/* ClearFrank for Business — enterprise Phonecheck deployment page.
   Built on the tokens in style.css so it follows light/dark with everything else. */

:root { --warn: #b45309; --warn-soft: #fef3c7; }
[data-theme="business"] {
  --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, 0.14);
}

/* ---- Centred hero -------------------------------------------------------------------------
   The hero's job is to name the thing and get out of the way of the console screenshot below it.
   So: one headline, one sentence, two buttons, and a measure short enough that the sentence reads
   as a caption rather than as a paragraph. ------------------------------------------------------ */
.hero--center { padding: 72px 24px 28px; }
.hero--center .hero-inner { max-width: 880px; text-align: center; }
.hero--center h1 {
  font-size: 3.4rem;
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin-bottom: 20px;
}
.hero--center p.lead {
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.08rem;
}

.hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 28px 0 0;
}
.hero-actions .primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  padding: 13px 26px;
  text-decoration: none; /* it is a link inside a <p>, so it arrives underlined */
}
/* The console is behind a sign-in wall, so the second door stays visible but quiet: a prospect who
   has no account should not be pulled towards a login screen. */
.hero-secondary { color: var(--muted); font-weight: 600; font-size: 0.93rem; text-decoration: none; }
.hero-secondary:hover { color: var(--text); }

@media (max-width: 860px) { .hero--center h1 { font-size: 2.6rem; } }
@media (max-width: 560px) { .hero--center h1 { font-size: 2.1rem; } .hero--center { padding-top: 48px; } }

/* ---- Tethered vs remote ---- */
.mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}

.mode-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.mode-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}

.mode-card h3 { margin: 0 0 6px; font-size: 1rem; }
.mode-card p { margin: 0 0 10px; font-size: 0.88rem; color: var(--muted); line-height: 1.6; }
.mode-note { font-size: 0.8rem; font-weight: 600; color: var(--accent-dark); }

/* ---- Fleet dashboard mock ---- */
.bay {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  overflow: hidden;
}

.bay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}

.bay-title { font-size: 0.85rem; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.bay-live { font-size: 0.78rem; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.bay-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }

.bay-rows { display: flex; flex-direction: column; }

.bay-row {
  display: grid;
  grid-template-columns: 1.5fr auto 1.6fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
.bay-row:last-child { border-bottom: 0; }

.bay-dev { font-weight: 600; }
.bay-dev em { font-style: normal; font-weight: 400; color: var(--muted); }
.bay-meta { color: var(--muted); font-size: 0.78rem; }

.bay-chip {
  justify-self: start;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--bg-alt);
  color: var(--muted);
  white-space: nowrap;
}
.bay-chip--ok { background: var(--good-soft); color: var(--good); }
.bay-chip--warn { background: var(--warn-soft); color: var(--warn); }

.bay-state { justify-self: end; font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.bay-state--done { color: var(--good); font-weight: 600; }

.bay-foot { margin: 0; padding: 10px 16px; font-size: 0.75rem; color: var(--muted); background: var(--bg-alt); }

/* ---- The loop ---- */
.loop { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }

.loop li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }

.loop-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.85rem;
}

.loop strong { display: block; margin-bottom: 3px; font-size: 0.95rem; }
.loop p { margin: 0; font-size: 0.87rem; color: var(--muted); line-height: 1.6; }

/* ---- Coverage strip ---- */
.features--tight { padding-top: 0; }

.coverage {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 760px;
  margin: 0 auto;
}

.cov {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  font-size: 0.85rem;
  font-weight: 600;
}

.coverage-note {
  max-width: 640px;
  margin: 18px auto 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.65;
}

@media (max-width: 720px) {
  .mode-grid { grid-template-columns: 1fr; }
  .bay-row { grid-template-columns: 1fr auto; row-gap: 5px; }
  .bay-meta, .bay-state { grid-column: 1 / -1; justify-self: start; }
}

/* ---- Platform section: the ClearFrank layer, then the Phonecheck layer ---- */
.feature-card--pillar { border-color: var(--accent); }
.feature-card--pillar .feature-icon { background: var(--accent-soft); color: var(--accent); }

.platform-claim {
  max-width: 640px;
  margin: 22px auto 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.section-head--sub { margin-top: 54px; }
.section-head--sub h2 { font-size: 1.35rem; }

/* ---- The platform statement, above the first panel ---- */
.platform-lead {
  margin: 0 0 22px;
  padding: 20px 24px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.7;
  text-align: center;
}

@media (max-width: 620px) {
  .platform-lead { padding: 16px 18px; font-size: 0.93rem; text-align: left; }
}

.platform-cta { margin: 0 0 22px; text-align: center; }
.platform-cta .primary { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 12px 24px; }


/* The dashboard CTA sends people to a sign-in wall. Anyone who has not signed up yet needs to be
   told, at the button, that there is another door. */
.platform-cta-note {
  margin: 10px 0 0;
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
}
.platform-cta-note a { color: var(--accent-dark); font-weight: 600; }

/* ---- Setup form: the extra qualifying fields ---- */
.field-group {
  border: 0;
  padding: 0;
  margin: 0 0 14px;
}
.field-group legend {
  padding: 0;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.chip-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip-choices label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  background: var(--panel);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.chip-choices label:hover { border-color: var(--accent); }
/* The chip itself is the hit target, so the box only needs to carry the state. */
.chip-choices input { accent-color: var(--accent); margin: 0; }
.chip-choices input:checked + span { font-weight: 600; color: var(--accent-dark); }
.chip-choices label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* A field the visitor got wrong should say so at the field, not only in a line under the button. */
.checkout-form .field-error {
  border-color: var(--bad, #dc2626);
}

.form-small {
  margin: 12px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.5;
}
.form-small a { color: var(--accent-dark); }

/* ---- Portal preview -------------------------------------------------------------------------
   Every class here is prefixed pv- and defined in THIS file. The first version reused .stat and
   .preview-table from the fleet dashboard, but /business loads style.css, verify.css and this one,
   NOT fleet.css — so the cards arrived unstyled and the label, value and note ran together on one
   line. Borrowing a class across pages that do not share a stylesheet is how that happens.
   Modelled on the desk console's table: dense rows, a sub-line under each cell, grade squares and
   status chips, so a prospect sees the real thing rather than a sketch. ------------------------ */
/* The wrapper around it is 640px, the width of the retail quote card, and a five-column fleet
   table squeezed into that is unreadable on a desktop. This breaks the figure out of the wrapper
   without widening the panels of body text around it, which want to stay at a reading measure. */
.portal-preview {
  margin: 0 0 8px;
  width: min(1080px, calc(100vw - 48px));
  margin-left: 50%;
  transform: translateX(-50%);
}
/* Below the frame, not above it. A disclaimer read before the screenshot is an apology; read after
   it, it is a footnote, and the screenshot gets to make its case first. */
.portal-preview figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--muted);
}
.preview-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.preview-frame {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.preview-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.preview-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.preview-url {
  margin-left: 10px;
  font-size: 0.72rem;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.preview-tabs {
  display: flex;
  gap: 2px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.pv-tab {
  padding: 11px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.pv-tab.is-on { color: var(--accent-dark); border-bottom-color: var(--accent); }

.preview-body { padding: 16px; }

.preview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.pv-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
}
.pv-stat--strong { border-color: var(--accent); background: var(--accent-soft); }
.pv-stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.pv-stat-value { font-size: 1.18rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pv-stat-note { font-size: 0.74rem; color: var(--muted); }

/* The table is wide by design, so it scrolls inside the frame rather than the page. */
.preview-scroll { overflow-x: auto; }
.pv-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; min-width: 660px; }
.pv-table th {
  text-align: left;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg-alt);
  padding: 9px 12px;
  white-space: nowrap;
}
.pv-table td { padding: 10px 10px; border-top: 1px solid var(--border); vertical-align: top; }
.pv-table td.r, .pv-table th.r { text-align: right; font-variant-numeric: tabular-nums; }
.pv-table .sub { display: block; font-size: 0.73rem; color: var(--muted); margin-top: 2px; }
.pv-table strong { font-weight: 650; }

.pv-g {
  display: inline-grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 7px;
  font-weight: 750;
  font-size: 0.76rem;
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.pv-g-a, .pv-g-b { background: var(--good-soft, #e8f8ee); color: var(--good, #16a34a); }
.pv-g-d, .pv-g-e { background: #fdf3e3; color: #8a600f; }

.pv-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  white-space: nowrap;
}
.pv-chip.good { background: var(--good-soft, #e8f8ee); color: var(--good, #16a34a); }
.pv-chip.warn { background: #fdf3e3; color: #8a600f; }
.pv-chip.accent { background: var(--accent-soft); color: var(--accent-dark); }

@media (max-width: 620px) {
  .preview-body { padding: 12px; }
}

/* The value column is what a reader's eye goes to, so it never wraps and never clips. */
.pv-table td.r, .pv-table th.r { white-space: nowrap; padding-right: 12px; }
.pv-table td.r .sub { white-space: nowrap; }

/* Grade C sits between the good and the poor bands. */
.pv-g-c { background: var(--accent-soft); color: var(--accent-dark); }

/* A scrollable table should say so rather than just appear cut off. */
.preview-scroll { overflow-x: auto; scrollbar-width: thin; }

/* ---- console preview: the lock states ----
   Added when the preview was rebuilt to mirror the real console. The point of the screenshot is
   the lock, so the three states it can be in (held, open, untested) each read differently. */
.pv-stat--lock { border-color: color-mix(in srgb, var(--good) 40%, var(--border)); }
.pv-stat--lock .pv-stat-value { color: var(--good); }
.pv-down { color: #dc2626; font-weight: 600; }
[data-theme="business"] .pv-down {color: #f87171;}

.pv-lockbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 10px; background: var(--accent-soft);
}
.pv-lock-kicker { display: block; font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pv-lock-head { display: block; margin: 3px 0 4px; font-size: 1rem; letter-spacing: -.01em; }
.pv-lock-sub { display: block; font-size: .78rem; color: var(--muted); line-height: 1.55; max-width: 56ch; }
.pv-lock-btn {
  margin-left: auto; flex: none; padding: 9px 16px; border-radius: 8px;
  background: var(--accent); color: var(--accent-text); font-size: .8rem; font-weight: 700; white-space: nowrap;
}

.pv-held { color: var(--good); }
.pv-btn { display: inline-block; padding: 5px 11px; border-radius: 8px; background: var(--accent); color: var(--accent-text); font-size: .74rem; font-weight: 700; }
.pv-chip.lock { background: var(--good-soft, #e8f8ee); color: var(--good, #16a34a); }
.pv-g-none { background: transparent; border: 1px dashed var(--border); color: var(--muted); }

.panel--lock { margin-top: 26px; }
.panel--lock .mode-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.panel--lock .mode-card em { font-style: normal; font-weight: 700; color: var(--text); }

@media (max-width: 640px) { .pv-lock-btn { margin-left: 0; } }

/* The grade chip was wrapping to two lines in the narrower five-column preview. */
.pv-g { white-space: nowrap; }

/* A signed-in customer needs a way back to the console from the marketing page, without the
   sign-in link competing with the main call to action. */
.ghost-nav {
  padding: 9px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--text); white-space: nowrap;
}
.ghost-nav:hover { border-color: var(--accent); color: var(--accent-dark); }
.nav-inner > .ghost-nav + .btn-nav { margin-left: 8px; }


/* ---- The two device worlds -----------------------------------------------------------------
   A full-bleed band, so the page breathes once before the closing call to action. The two panels
   are deliberately asymmetric in what they show: the mobile side has real product photography,
   the computer side has the certificate, because that is what a computer actually yields here.
   Showing a stock laptop would imply a cosmetic grade we do not test for. -------------------- */
.estate-band {
  padding: 84px 24px 88px;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.estate-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.estate-head h2 {
  font-size: 2.3rem;
  line-height: 1.12;
  letter-spacing: -0.024em;
  margin: 0 0 14px;
}
.estate-head p { margin: 0; color: var(--muted); font-size: 1.04rem; line-height: 1.6; }

.estate-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.estate-panel {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}
.estate-panel h3 { margin: 26px 0 10px; font-size: 1.28rem; letter-spacing: -0.015em; }
.estate-panel p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.65; }

/* A shared minimum on both art blocks, so the two headings line up, but a minimum rather than a
   fixed height: at 190px fixed the certificate card's last line spilled out onto the panel behind
   it, which looked like a rendering fault rather than a design. */
.estate-art {
  min-height: 224px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  border: 1px solid var(--border);
}

/* The product shots are 500x500 PNGs with transparent backgrounds, so they drop straight onto the
   dark panel. Staggered and overlapped, largest in the middle, the way a device family is shot. */
.estate-art--devices { gap: 0; }
.estate-art--devices img { height: 150px; width: auto; object-fit: contain; }
.estate-art--devices img:nth-child(1) { height: 132px; margin-right: -16px; opacity: 0.85; }
.estate-art--devices img:nth-child(3) { height: 92px; margin-left: -14px; opacity: 0.85; }

.cert-card {
  width: min(300px, 100%);
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.cert-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cert-mark {
  width: 30px; height: 30px; flex: none;
  border-radius: 9px;
  background: var(--good-soft);
  color: var(--good);
  display: grid; place-items: center;
}
.cert-top strong { display: block; font-size: 0.85rem; }
.cert-top span { font-size: 0.72rem; color: var(--muted); }
.cert-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cert-lines li { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--text); }
.cert-tick {
  width: 13px; height: 13px; flex: none;
  border-radius: 50%;
  background: var(--good-soft);
  border: 1px solid var(--good);
}
.cert-foot { margin: 12px 0 0; font-size: 0.68rem; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }

@media (max-width: 820px) {
  .estate-band { padding: 56px 20px 60px; }
  .estate-head h2 { font-size: 1.8rem; }
  .estate-pair { grid-template-columns: 1fr; }
}