/* styles/tokens.css */
/* Website tokens. Names follow the app's assets/core/tokens.css so the site and the app share
   one vocabulary; values are the approved V4 website palette (one dark look by choice).
   Website-only additions: --text-4, stage colors and the type stacks. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/site/fonts/InterVariable-4.1-latin.woff2") format("woff2");
}
:root {
  --bg: #08090a; --surface: #0e0f11; --surface-2: #141518; --surface-3: #1b1c20;
  --line: rgba(255,255,255,.06); --line-2: rgba(255,255,255,.1);
  --text: #f3f4f6; --text-2: #c8cad0; --text-3: #8a8f98; --text-4: #5b5f68;
  --accent: #abaaff; --accent-ink: #11121a; --accent-soft: rgba(171,170,255,.1); --accent-line: rgba(171,170,255,.3);
  --warn: #f5b445; --danger: #f2555a; --ok: #7fcfa0;
  /* Stage colors (owner decisions, October 3): rings fill one segment per stage. */
  --stage-applied: #8a8f98; --stage-screen: #f2a47d; --stage-interview: #8ec67b; --stage-offer: #2ea8f0;
  --final: #9aa3ff; /* "Final" interview label: indigo text, no box */
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --page: 1180px;
  --gutter: 32px; /* page sections, as on the approved boards; the header uses its own 24px */
  color-scheme: dark;
}
@media (max-width: 600px) { :root { --gutter: 24px; } }

/* styles/base.css */
/* Reset, type and layout helpers. Breakpoints: phone ≤600px, tablet 601–1023px, desktop ≥1024px. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.55 var(--font); font-optical-sizing: none; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video, canvas, iframe { max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip-link { position: absolute; left: 16px; top: -48px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: var(--text); color: var(--bg); font-weight: 600; }
.skip-link:focus { top: 12px; }

.wrap { max-width: calc(1132px + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); } /* 1132px of content, as on the boards */
.sec { padding-block: 128px; }
.eyebrow { font: 500 14px/1 var(--font); color: var(--text-3); }
.sec h2, .fsec h2, .fclose h2, .h2 { margin: 16px 0 0; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -.04em; font-weight: 600; text-wrap: balance; }
.dim { color: var(--text-3); }
.lede { margin: 20px 0 0; max-width: 36em; color: var(--text-3); font-size: 18px; text-wrap: pretty; }
.num { font-variant-numeric: tabular-nums; }

.btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 10px; font: 600 15px var(--font); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); cursor: pointer; }
.btn:hover { border-color: rgba(255,255,255,.22); }
.btn.pri { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn.pri:hover { background: #fff; }

/* "Planned" tag: features that are on the way. */
.plan { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--line-2); font-size: 11px; font-weight: 500; color: var(--text-3); white-space: nowrap; vertical-align: 2px; }

/* Links whose pages do not exist yet (shown in purple until they are built). */
.needs-page { color: var(--accent) !important; }

@media (max-width: 1023px) { .sec { padding-block: 96px; } }
@media (max-width: 600px) { .sec { padding-block: 80px; } .sec h2, .fsec h2, .fclose h2 { font-size: 34px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Text for screen readers only. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* styles/components.css */
/* Shared pieces: site header and Product menu, footer, and the product UI used in illustrations. */

/* ---------- header and Product menu ---------- */
.site-header { position: sticky; top: 0; z-index: 40; padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid transparent; transition: border-color .2s; }
/* The frosted background sits on its own layer: a backdrop-filter on the header itself would make
   the phone menu (position: fixed) size itself to the header instead of the screen. */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8,9,10,.82); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); }
.site-header.scrolled { border-bottom-color: var(--line); }
.site-header-in { max-width: var(--page); margin: 0 auto; padding-inline: 24px; height: 72px; display: flex; align-items: center; gap: 28px; }
.site-logo img, .flogo img { height: auto; display: block; filter: grayscale(1) brightness(0) invert(1); }
.site-logo img { width: 148px; }
.mainnav { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.mainnav a, .navbtn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 8px; color: #c9cbe0; background: none; border: 0; cursor: pointer; }
.mainnav a:hover, .navbtn:hover, .navbtn[aria-expanded="true"] { color: var(--text); background: rgba(255,255,255,.05); }
.navbtn svg { transition: transform .2s; }
.navbtn[aria-expanded="true"] svg { transform: rotate(180deg); }
/* desktop: logo left, page links centered under the hero line, account actions right */
@media (min-width: 1024px) { .site-header-in { display: grid; grid-template-columns: 1fr auto 1fr; } .mainnav { justify-self: center; } .navacts { justify-self: end; } }
.navacts { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.signin-link { color: #c9cbe0; padding: 0 10px; }
.signin-link:hover { color: var(--text); }
.navacts .trial { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 9px; background: var(--text); color: var(--bg); font-weight: 600; white-space: nowrap; }
.menu-btn { display: none; width: 38px; height: 38px; border-radius: 9px; border: 1px solid rgba(255,255,255,.12); background: rgba(17,18,24,.7); color: var(--text); place-items: center; cursor: pointer; }
.menu-btn .x { display: none; }
.menu-btn[aria-expanded="true"] .bars { display: none; }
.menu-btn[aria-expanded="true"] .x { display: block; }

.pmenu { position: absolute; left: 0; right: 0; top: 100%; padding-inline: 24px; }
.pm-in { max-width: var(--page); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px 24px; padding: 24px; border-radius: 16px; border: 1px solid var(--line-2); background: linear-gradient(180deg, #141518, #0f1012); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 40px 80px -20px rgba(0,0,0,.85); }
.pm-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 20px; }
.mg h3 { margin: 0 0 8px; font-size: 12px; font-weight: 500; color: var(--text-3); }
.mg ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mg a { display: flex; flex-direction: column; gap: 1px; padding: 7px 8px; margin-inline: -8px; border-radius: 8px; }
.mg a:hover { background: rgba(255,255,255,.05); }
.mg b { font-size: 14px; font-weight: 500; color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mg b .plan { height: 16px; font-size: 10.5px; padding: 0 5px; vertical-align: 0; }
.mg a > span { font-size: 12.5px; color: var(--text-3); }
.pm-side { display: flex; flex-direction: column; gap: 10px; }
.pm-card { display: flex; flex-direction: column; gap: 2px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); padding: 12px; font-size: 12.5px; color: var(--text-3); }
.pm-card:hover { border-color: var(--line-2); }
.pm-card b { font-size: 14px; font-weight: 500; color: var(--text); margin-top: 8px; }
.pm-art { height: 72px; border-radius: 8px; background: radial-gradient(80% 90% at 50% 100%, rgba(171,170,255,.16), transparent), #191a1f; display: grid; place-items: center; }
.pm-art.phone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.pm-art.phone span { display: block; width: 70px; height: 9px; border-radius: 4px; background: rgba(255,255,255,.12); }
.pm-art.phone span:first-child { width: 90px; background: rgba(255,255,255,.22); }
.pm-art svg { width: 26px; height: 26px; fill: none; stroke: var(--text-2); stroke-width: 1.6; }
.pm-foot { grid-column: 1 / -1; display: flex; gap: 20px; align-items: center; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; font-size: 13.5px; color: var(--text-2); }
.pm-foot a:hover { color: var(--text); }
.pm-foot .all { margin-left: auto; color: var(--text); font-weight: 500; }
.pm-m { display: none; }

@media (max-width: 1023px) {
  .mainnav, .signin-link { display: none; }
  .navacts { margin-left: auto; }
  .menu-btn { display: grid; }
  .pm-groups { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  /* Tablet and phone menu, Mobile site boards section 1, menu A (approved October 22, 2026): Pricing, Demo
     and Sign in first, Product and Evallo for open in place, one trial button pinned at the bottom. */
  .pmenu { position: fixed; inset: 72px 0 0 0; padding: 0; overflow: hidden; background: var(--bg); z-index: 50; }
  .pm-in { display: flex; flex-direction: column; height: 100%; max-width: none; border: 0; border-radius: 0; box-shadow: none; background: none; padding: 0; }
  .pmenu .pm-groups, .pm-side, .pm-foot { display: none; }
  .pm-m { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .pm-m-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 24px 16px; }
  .pm-m-row { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: none; font: 500 17px var(--font); letter-spacing: -.01em; color: var(--text); text-align: left; cursor: pointer; }
  .pm-m-row svg { color: var(--text-3); transition: transform .2s; }
  .pm-acc[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--text); }
  .pm-m-gap { height: 14px; }
  .pm-m-sub { padding: 6px 0 14px; border-bottom: 1px solid var(--line); }
  .pm-m-sub[hidden] { display: none; }
  .pm-m-sub h3 { margin: 12px 0 2px; font-size: 12px; font-weight: 400; letter-spacing: .02em; color: var(--text-3); }
  .pm-m-sub h3:first-child { margin-top: 4px; }
  .pm-m-sub > a:not(.pm-m-all) { display: flex; align-items: center; min-height: 40px; padding-left: 2px; font-size: 15.5px; color: var(--text-2); }
  .pm-m-planned { margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
  .pm-m-planned > .plan { margin-bottom: 8px; vertical-align: 0; }
  .pm-m-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .pm-m-chips a { font-size: 13px; color: var(--text-2); padding: 5px 9px; border: 1px solid var(--line-2); border-radius: 999px; }
  .pm-m-all { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 15px; font-weight: 500; color: var(--text); }
  .pm-m-foot { padding: 12px 24px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--bg); }
  .pm-m-foot .btn { width: 100%; justify-content: center; height: 50px; font-size: 16px; color: var(--bg); }
  .pm-m-foot p { margin: 8px 0 0; text-align: center; font-size: 12.5px; color: var(--text-3); }
  /* One trial button: the header's copy steps aside while the menu is open. */
  body.menu-open .navacts .trial { display: none; }
  body.menu-open { overflow: hidden; }
}
@media (max-width: 600px) {
  .site-header-in { height: 64px; gap: 12px; padding-inline: 16px; }
  .site-logo img { width: 120px; }
  .navacts .trial { height: 34px; padding: 0 12px; font-size: 13px; }
  .pmenu { inset: 64px 0 0 0; }
  .pm-groups { grid-template-columns: 1fr; gap: 18px; }
  .pm-m-scroll { padding-inline: 16px; }
  .pm-m-foot { padding-inline: 16px; }
  .mg a > span { display: none; }
  .mg a { padding: 9px 8px; }
}

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 48px; font-size: 14px; color: var(--text-3); }
.site-footer .wrap { display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: 32px 24px; }
.site-footer h2 { margin: 0 0 12px; font: 500 13px var(--font); color: var(--text); }
.site-footer nav a { display: block; padding: 4px 0; }
.site-footer nav a:hover { color: var(--text); }
/* A new footer link gets a small New tag (owner, October 8), like the New label on What's new. */
.site-footer .f-new { display: inline-flex; align-items: center; height: 18px; margin-left: 6px; padding: 0 6px; border-radius: 5px; background: var(--text); color: var(--bg); font-size: 11px; font-weight: 500; vertical-align: 1px; }
.site-footer h2 a { display: inline; padding: 0; color: inherit; }
.site-footer h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.flogo img { width: 120px; display: block; }
.fbrand p { margin: 10px 0 0; max-width: 22em; }
.addr { font-style: normal; margin-top: 16px; font-size: 13px; line-height: 1.65; }
.addr a { color: var(--text-2); }
.social { display: flex; gap: 10px; margin-top: 18px; }
.social a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line-2); }
.social svg { width: 16px; height: 16px; }
.fbottom { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; }
@media (max-width: 1023px) { .site-footer .wrap { grid-template-columns: repeat(3, 1fr); } .fbrand { grid-column: 1 / -1; } }
@media (max-width: 600px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } }

/* ---------- product UI used in illustrations (fictional data) ---------- */
.win { border-radius: 16px; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%), var(--surface); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 60px -20px rgba(0,0,0,.8); overflow: hidden; }
.bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--line); color: var(--text-3); font-size: 12.5px; }
.bar .crumb { color: var(--text-2); }
.bar .sep { color: var(--text-4); }
.bar .k, .bar .end { margin-left: auto; }
.bar .k { font: 500 11px var(--font); color: var(--text-4); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; }
.body { padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.mut { color: var(--text-3); }
.i { width: 14px; height: 14px; flex: none; color: var(--text-3); vertical-align: -2px; }
.i.ok { color: var(--accent); }
kbd { font: 500 10.5px var(--font); color: var(--text-3); border: 1px solid var(--line-2); border-radius: 4px; padding: 0 4px; min-width: 16px; text-align: center; display: inline-block; line-height: 16px; }
.kb { display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 4px 0 10px; border-radius: 6px; background: var(--text); color: #0b0c0e; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.kb.plain { padding: 0 10px; }
.kb kbd { color: #0b0c0e; border-color: rgba(0,0,0,.18); margin-left: 2px; }
.av { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #2a2c33; color: var(--text-2); font: 600 9.5px var(--font); flex: none; }
.av.sm { width: 16px; height: 16px; font-size: 8px; margin-right: 6px; vertical-align: -3px; }
.av.sq { border-radius: 5px; margin-right: 8px; }
.hl { background: rgba(255,255,255,.06); box-shadow: inset 0 -1px 0 rgba(255,255,255,.35); border-radius: 3px; padding: 0 2px; color: var(--text); }

.msg { border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); padding: 14px; font-size: 13px; line-height: 1.6; color: var(--text-2); }
.msg .who { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; color: var(--text); }
.msg .who b { font-weight: 500; }
.msg .who .mut { font-size: 12px; }
.msg p { margin: 0 0 10px; }
.msg p.mut { font-size: 12px; margin: 0; }
.cap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 12px; align-items: start; }
.cap .ccol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.props { border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); padding: 6px 0; font-size: 12.5px; }
.ph { display: flex; justify-content: space-between; padding: 6px 14px 10px; font-weight: 500; color: var(--text); }
.ph .mut { font-weight: 400; font-size: 12px; }
.pr { display: grid; grid-template-columns: 14px 74px 1fr; gap: 10px; align-items: center; padding: 7px 14px; color: var(--text-3); }
.pr b { font-weight: 500; color: var(--text-2); display: flex; align-items: center; }
.pf { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 6px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 12px; }

.pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 6px; }
.col h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.col h4 span { margin-left: 2px; color: var(--text-4); }
.card { padding: 9px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
.card .ct { display: flex; align-items: center; font-size: 12.5px; font-weight: 500; color: var(--text); }
.card small { color: var(--text-3); font-size: 11.5px; }
.card .cf { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; color: var(--text-4); font-size: 11.5px; }
.card .cf span { display: inline-flex; align-items: center; gap: 4px; }
.card .cf .r { gap: 6px; }
.card .cf .r .av { margin: 0; }
.card .cf .i { width: 13px; height: 13px; }
.card.hot { border-color: rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.tg { display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--line-2); font-size: 11px; color: var(--text-2); }
.tg i { width: 6px; height: 6px; border-radius: 50%; display: block; }
.rnd { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--line-2); font-size: 11px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.fin { color: var(--final); }
.soon, .due-soon { color: var(--text-2) !important; }
.late, .due-late { color: var(--danger) !important; }
.today, .pk { color: var(--warn) !important; }
.wait { color: var(--text-2) !important; }

.list { border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); padding: 4px 0; }
.li { display: grid; grid-template-columns: 14px 1fr auto; column-gap: 10px; align-items: center; padding: 8px 12px; font-size: 12.5px; border-top: 1px solid var(--line); }
.li:first-child { border-top: 0; }
.li .t { color: var(--text); }
.li .co { grid-column: 2; color: var(--text-4); font-size: 11.5px; margin-top: -2px; }
.li .due { grid-row: 1; grid-column: 3; font-size: 11.5px; color: var(--text-3); }
.li.done .t { color: var(--text-4); text-decoration: line-through; }

.doc { font-size: 13px; }
.doc h5 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--text-3); font-size: 12px; }
.meta span { display: inline-flex; align-items: center; gap: 5px; }
.dsec { border-top: 1px solid var(--line); padding-top: 10px; }
.dh { display: block; font-size: 12px; color: var(--text-3); margin-bottom: 6px; }
.dsec ol { margin: 0; padding-left: 18px; color: var(--text-2); display: flex; flex-direction: column; gap: 4px; }
.dsec p { margin: 0; color: var(--text-2); }
.dot-warn { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); margin-right: 8px; vertical-align: 2px; }

.mail { border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); display: flex; flex-direction: column; font-size: 12.5px; }
.mr { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.mail .t { padding: 12px 14px; color: var(--text-2); flex: 1; }
.att { margin: 0 12px 12px; display: flex; align-items: center; gap: 6px; border-radius: 8px; border: 1px solid var(--line-2); padding: 6px 6px 6px 10px; font-size: 12px; }

.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th, .tbl td { line-height: normal; text-align: left; padding: 9px 10px; border-top: 1px solid var(--line); color: var(--text-2); }
.tbl thead th { border-top: 0; font-weight: 500; color: var(--text); }
.tbl td:first-child { color: var(--text-3); width: 120px; }
.tbl td .i { margin-right: 6px; }
.miss { color: var(--danger) !important; }
.askfinal { color: #7480e6 !important; } /* questions for the final round: indigo text */

.box { border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); padding: 16px; }
.lbl { display: block; margin-bottom: 10px; font: 500 12px var(--font); color: var(--text-3); }
.box ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--text-2); }
.box li { display: flex; gap: 10px; }
.box li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); margin-top: 8px; flex: none; }
.box p { margin: 8px 0 0; font-size: 13px; line-height: 1.5; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: 12.5px; color: var(--text-2); }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cal > div { border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); padding: 8px; font-size: 12.5px; color: var(--text-3); min-height: 64px; }
.cal b { display: block; color: var(--text-2); font-size: 13px; }
.cal .ev { margin-top: 6px; border: 1px solid var(--line); border-left: 2px solid var(--text-3); background: rgba(255,255,255,.03); border-radius: 0 5px 5px 0; padding: 3px 6px; color: var(--text); font-size: 12px; }
.cal .ev.st-scr { border-left-color: var(--stage-screen); background: rgba(242,164,125,.09); }
.cal .ev.st-int { border-left-color: var(--stage-interview); background: rgba(142,198,123,.09); }
.cal .ev.st-off { border-left-color: var(--stage-offer); background: rgba(46,168,240,.09); }
.diff { font: 500 12px/1.65 var(--mono); border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); padding: 12px 14px; color: var(--text-3); }
.diff .add { color: #7fd6a6; }
.diff .rm { color: #ff8a8a; text-decoration: line-through; text-decoration-color: rgba(255,138,138,.5); }
.task { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.task:first-child { border-top: 0; }
.task small { display: block; color: var(--text-3); font-size: 12.5px; }
.task .tag { margin-left: auto; }
.mk { width: 32px; height: 32px; border-radius: 9px; background: var(--surface-3); border: 1px solid var(--line-2); display: grid; place-items: center; font: 700 13px var(--font); color: var(--text); flex: none; }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 500; border: 1px solid var(--line-2); color: var(--text-2); white-space: nowrap; }
.tag.today { border-color: rgba(245,180,69,.35); background: rgba(245,180,69,.08); }

/* Offer comparison (homepage and Product pages) */
.cmp { display: grid; grid-template-columns: 200px 1fr 1fr; border-radius: 18px; border: 1px solid var(--line-2); overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%), var(--surface); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 60px -20px rgba(0,0,0,.8); }
.cmp > div { padding: 16px 24px; border-top: 1px solid var(--line); font-size: 15px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.cmp .k { color: var(--text-3); font-size: 14px; }
.cmp .h { border-top: 0; padding-block: 24px; }
.cmp .h b { font-size: 18px; }
.cmp .h small { display: block; color: var(--text-3); font-size: 13px; }
.cmp .ok { color: var(--text-2); }
@media (max-width: 1023px) { .cmp { grid-template-columns: 160px 1fr 1fr; } }
@media (max-width: 600px) {
  .cap { grid-template-columns: 1fr; }
  .cal { grid-template-columns: 1fr; gap: 4px; }
  .cal > div { min-height: 0; display: flex; align-items: center; gap: 12px; padding: 6px 10px; }
  .cal > div b { width: 34px; }
  .cal .ev { margin-top: 0; flex: 1; }
  .cmp { grid-template-columns: 1fr 1fr; }
  .cmp > div { padding: 12px 16px; font-size: 14px; }
  .cmp .k { grid-column: 1 / -1; padding-bottom: 0; }
  .cmp .k + div, .cmp .k + div + div { border-top: 0; }
  .cmp .hk, .cmp .h .mk { display: none; }
  .tbl th, .tbl td { padding: 8px 6px; }
  .tbl td:first-child { width: auto; }
}
.end { margin-left: auto; }
/* tag dots (fictional tags in illustrations) */
.d-blue { background: #7aa2f7; } .d-pink { background: #d98ad1; } .d-green { background: #7fd6a6; } .d-teal { background: #6fd3c4; } .d-gold { background: #e6c26a; }

/* ---------- Product pages: feature bands, small illustrations, phone screens ---------- */

.fhero{padding-block:72px 40px}
.fhero h1{margin:16px 0 0;max-width:15em;font-size:clamp(38px,5.4vw,64px);line-height:1.02;letter-spacing:-.04em;font-weight:600;text-wrap:balance}
.fhero .lede{max-width:40em}

/* group buttons stay at the top while you read */
.fnav{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:rgba(8,9,10,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-block:1px solid var(--line)}
.fnav-in{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-block:10px}
.fnav-in::-webkit-scrollbar{display:none}
.fnav a{flex:none;height:32px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);color:var(--text-3);font-size:13px;font-weight:500}
.fnav a[aria-current]{background:var(--text);border-color:var(--text);color:#0b0c0e}


.fsec{padding-block:112px;border-top:1px solid var(--line)}
.fsec:first-of-type{border-top:0}
.fhead{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:64px;align-items:center}
.fhead.flip{grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr)}
.fhead.flip .ftext{order:2}
.ftext h2{font-size:clamp(30px,3.6vw,44px)}
.ftext .lede{font-size:17px}
.ftext.narrow{max-width:44em;margin-bottom:8px}
.fvis{min-width:0}
.fvis .win{overflow:hidden}
.rings{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--text-2)}
.rings li{display:inline-flex;align-items:center;gap:6px}

.fsmall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:56px}
.fcard{border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 40%),var(--surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);padding:22px;display:flex;flex-direction:column;gap:6px;min-width:0}
.fcard h3{margin:0;font-size:16px;font-weight:600}
.fcard>p{margin:0;color:var(--text-3);font-size:14.5px}
.fcard .vis{margin-top:auto;padding-top:18px}

/* small visuals */
.evt{border-radius:10px;border:1px solid var(--line-2);background:var(--surface-2);padding:12px;display:flex;flex-direction:column;gap:8px;font-size:12.5px}
.evt .et{display:flex;align-items:center;gap:8px}.evt .et .mut{margin-left:auto}
.evt .eq{color:var(--text-2)}
.evt .ea{display:flex;gap:6px;align-items:center}
.evt .ghost{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:6px;border:1px solid var(--line-2);color:var(--text-2);font-size:12.5px}
.wait{display:inline-flex;align-items:center;gap:4px;color:var(--text-2)!important}
.li .due.wait{color:var(--text-2)}
.rounds{display:flex;flex-wrap:wrap;gap:6px}
.rounds .rnd{height:24px;font-size:12px;margin:0}
.tl{list-style:none;margin:0;padding:0 0 0 14px;border-left:1px solid var(--line-2);display:flex;flex-direction:column;gap:10px;font-size:12.5px}
.tl li{position:relative;display:flex;flex-direction:column}
.tl li::before{content:"";position:absolute;left:-18px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--text-3)}
.tl li:first-child::before{background:var(--text)}
.tl span{color:var(--text-4);font-size:12px}
.upnext,.pnext{border-radius:10px;border:1px solid var(--line-2);background:var(--surface-2);padding:12px;display:flex;flex-direction:column;gap:4px;font-size:12.5px}
.upnext .kb,.pnext .kb{align-self:flex-start;margin-top:6px}
.mini-props{padding:4px 0}
.debrief{display:flex;flex-direction:column;gap:6px}
.nudge{display:flex;gap:10px;align-items:flex-start;border-radius:10px;border:1px solid rgba(245,180,69,.3);background:rgba(245,180,69,.06);padding:12px;font-size:12.5px}
.nudge .i{color:var(--warn);margin-top:2px}
.nudge span{display:flex;flex-direction:column;gap:2px}
.notif{display:flex;align-items:center;gap:10px;border-radius:14px;background:rgba(255,255,255,.07);padding:12px;font-size:12.5px}
.notif .nicon{width:28px;height:28px;border-radius:7px;background:#2a2c33;flex:none}
.notif span{display:flex;flex-direction:column}.notif .nt{margin-left:auto}
.rec{border-radius:10px;border:1px solid var(--line-2);background:var(--surface-2);padding:12px;display:flex;flex-direction:column;gap:10px;font-size:12.5px}
.rh{display:flex;align-items:center;gap:8px}.rh .mut{margin-left:auto}
.rdot{width:8px;height:8px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 3px rgba(242,85,90,.18);flex:none}
.wave{height:22px;display:flex;align-items:center;gap:2px}.wave i{flex:1;max-width:3px;border-radius:2px;background:var(--text-3)}.wave i:nth-child(n+30){background:var(--text-4)}
.rout{list-style:none;margin:0;padding:8px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px;color:var(--text-2)}
.rout li{display:flex;align-items:center;gap:8px}.rout .i{color:var(--accent)}
.devices{display:flex;gap:8px;flex-wrap:wrap}
.devices span{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);font-size:12.5px;color:var(--text-2)}
.fcard .mail{border:1px solid var(--line)}
.fcard .mail .att{margin:10px 12px 12px}

/* phone visual */
.phonevis{display:flex;justify-content:center}
.phonef{width:300px;border-radius:40px;border:1px solid var(--line-2);background:linear-gradient(180deg,#141518,#0e0f11);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 80px -24px rgba(0,0,0,.85);padding:16px 14px 22px;display:flex;flex-direction:column;gap:12px}
.pnotch{width:90px;height:22px;border-radius:999px;background:#000;margin:0 auto 4px}
.ptop{display:flex;align-items:baseline;justify-content:space-between;padding-inline:4px}
.ptop b{font-size:22px;letter-spacing:-.02em}

/* the pipeline swipes sideways on narrow screens */
.pipe.swipe .card.hot{animation:none}
.play.in .card.hot{animation:s-story-slide .7s .2s backwards}
.play.in .props .pr{animation:product-pop .5s backwards}
.play.in .props .pr:nth-of-type(2){animation-delay:.08s}.play.in .props .pr:nth-of-type(3){animation-delay:.16s}.play.in .props .pr:nth-of-type(4){animation-delay:.24s}.play.in .props .pr:nth-of-type(5){animation-delay:.32s}.play.in .props .pr:nth-of-type(6){animation-delay:.4s}

.fclose{padding-block:96px 120px;border-top:1px solid var(--line);text-align:center}
.fclose h2{margin-inline:auto}
.fclose .acts{display:flex;justify-content:center;gap:10px;margin-top:28px;flex-wrap:wrap}
.fclose .fine{margin-top:14px;font-size:13px;color:var(--text-3)}

/* tablet */
@media (max-width:1023px){
  .fsec{padding-block:88px}
  .fhead,.fhead.flip{grid-template-columns:1fr;gap:32px}
  .fhead.flip .ftext{order:0}
  .fsmall{grid-template-columns:1fr;gap:12px;margin-top:32px}
  .fcard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;align-items:center}
  .fcard h3,.fcard>p{grid-column:1}
  .fcard .vis{grid-column:2;grid-row:1/span 2;margin:0;padding:0}
  .fcard.stack{display:flex;align-items:stretch}
  .fcard.stack .vis{padding-top:16px}
}
/* phone */
@media (max-width:600px){
  .fhero{padding-block:40px 28px}
  .fhero h1{font-size:36px}
  .fnav .wrap{padding-inline:0}.fnav-in{padding-inline:16px}
  .fsec{padding-block:64px}
  .ftext h2{font-size:30px}
  .ftext .lede{font-size:16px}
  .fhead,.fhead.flip{gap:24px}
  .fcard{display:flex;align-items:stretch;padding:18px}
  .fcard .vis{padding-top:14px}
  .fvis .win{border-radius:12px}
  .fvis .bar{display:none}
  .pipe.swipe{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .pipe.swipe::-webkit-scrollbar{display:none}
  .pipe.swipe .col{scroll-snap-align:start}
  .fvis .doc .meta{display:none}
  .phonef{width:min(300px,100%)}
  .fclose{padding-block:64px 80px}
}

/* debrief: two phone screens */
.eyebrow .plan{vertical-align:1px}
.dsteps{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:d}
.dsteps li{display:grid;grid-template-columns:24px 1fr;column-gap:10px;font-size:14px;counter-increment:d}
.dsteps li::before{content:counter(d);grid-row:1/3;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-size:12px;color:var(--text-2)}
.dsteps b{font-weight:600}.dsteps span{color:var(--text-3)}
.phones2{display:flex;gap:20px;justify-content:center;align-items:flex-start}
.phones2 .phonef{width:270px;min-height:540px}
.phones2 .ptop .mut{font-size:13px}
.phones2 .phonef:nth-child(2){margin-top:48px}
.rq{display:flex;flex-direction:column;gap:4px;padding:8px 4px 0;font-size:12px}.rq b{font-size:22px;letter-spacing:-.02em}
.rtimer{font-size:40px;font-weight:600;letter-spacing:-.03em;text-align:center;margin-top:12px}
.wave.big{height:44px;justify-content:center;gap:3px}.wave.big i{max-width:4px;background:var(--danger);opacity:.85}.wave.big i:nth-child(n+24){background:var(--text-4)}
.prompts{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--text-3);text-align:center}
.rstop{margin:18px auto 0;width:64px;height:64px;border-radius:50%;border:2px solid rgba(242,85,90,.5);display:grid;place-items:center}
.rstop span{width:22px;height:22px;border-radius:6px;background:var(--danger)}
.rhint{text-align:center;font-size:12px}
.review{list-style:none;margin:6px 0 0;padding:0;border-radius:12px;border:1px solid var(--line-2);background:var(--surface-2)}
.review li{display:grid;grid-template-columns:18px 1fr;gap:10px;padding:11px 12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--text-2)}
.review li:first-child{border-top:0}
.review .i.on{color:var(--accent);width:16px;height:16px;margin-top:1px}
.review b{display:block;font-weight:500;color:var(--text);font-size:12px;margin-bottom:2px}
.review .stg{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.psave{align-self:stretch;justify-content:center;height:38px;font-size:13.5px;margin-top:auto}
@media (max-width:1023px){.phones2 .phonef:nth-child(2){margin-top:0}}
@media (max-width:600px){
  .phones2{overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory;margin-inline:-16px;padding-inline:16px;scrollbar-width:none;gap:12px}
  .phones2::-webkit-scrollbar{display:none}
  .phones2 .phonef{flex:0 0 82%;width:auto;scroll-snap-align:start;min-height:500px}
}


/* overview: quick links and bands */
.fhero .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.qls{padding-block:8px 24px}
.pm-groups.onpage{border-radius:16px;border:1px solid var(--line);background:var(--surface);padding:22px 24px}
@media (max-width:600px){.pm-groups.onpage{grid-template-columns:1fr 1fr;padding:18px}.pm-groups.onpage .mg a>span{display:none}}
.qls h2{font-size:13px;font-weight:500;letter-spacing:0;line-height:1.04;color:var(--text-3);margin:0 0 12px}
.bul{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--text-2)}
.bul li{display:grid;grid-template-columns:14px 1fr;column-gap:10px;align-items:baseline}
.bul li::before{content:"";width:14px;height:1px;background:var(--text-3);transform:translateY(-4px)}
.bul .plan{margin-left:4px}
.more{display:inline-block;margin-top:24px;font-size:14.5px;font-weight:500;color:var(--text)}
.more:hover{text-decoration:underline;text-underline-offset:3px}
@media (min-width:1024px){.band .phones2 .phonef:nth-child(2){margin-top:48px}}


.crumb-nav{font-size:13px;color:var(--text-3);display:flex;gap:6px;align-items:center}
.crumb-nav a{color:var(--text-3)}.crumb-nav a:hover{color:var(--text)}
.flist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.eyebrow+.flist{margin-top:24px}
.fitem{display:flex;flex-direction:column;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 40%),var(--surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden;transition:border-color .2s,transform .2s;min-width:0}
.fitem:hover{border-color:var(--line-2);transform:translateY(-2px)}
.fitem:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fitem .prev{height:168px;padding:18px 18px 0;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent);pointer-events:none}
.fitem .txt{padding:16px 18px 18px;display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line)}
.fitem h3{margin:0;font-size:16px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fitem p{margin:0;color:var(--text-3);font-size:14px}
.fitem .go{margin-top:8px;font-size:13px;font-weight:500;color:var(--text-2)}
.fitem:hover .go{color:var(--text)}

/* feature page */
.fp-hero{padding-block:48px 24px}
.fp-hero h1{margin:14px 0 0;max-width:16em;font-size:clamp(36px,5vw,60px);line-height:1.03;letter-spacing:-.04em;font-weight:600;text-wrap:balance}
.fp-hero .eyebrow{display:flex;align-items:center;gap:8px;margin-top:28px}
.fp-hero .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.show{position:relative;padding-block:40px 0}
.show .desk{margin-right:230px}
.show .desk .win{overflow:hidden;min-height:470px}
/* The phone overlaps the window's right edge by about 30px: keep right-aligned text clear of it. */
.show .desk .win>.bar,.show .desk .win>.body{padding-right:54px}
/* Space under the captions, so they don't sit on the next section's line. */
.show-sec{padding-bottom:96px}
.show .onphone{position:absolute;right:0;bottom:-56px;z-index:2}
.show .onphone .phonef{width:260px;min-height:520px;height:534px;overflow:hidden}
.capts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:88px}
.capt{border-top:1px solid var(--line-2);padding-top:16px}
.capt b{display:block;font-size:15px;font-weight:600}
.capt span{color:var(--text-3);font-size:14.5px}
.dgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}
.osum{display:flex;flex-direction:column;gap:14px}
.newtag{display:inline-flex;align-items:center;height:16px;padding:0 5px;border-radius:4px;background:rgba(171,170,255,.14);color:var(--accent);font-size:10.5px;font-weight:600;margin-left:6px}
.tl li.new b{color:var(--text)}
.tl li.new::before{background:var(--accent)}
.hsteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px;align-items:start}
.hstep{display:flex;flex-direction:column;gap:16px;min-width:0}
.hstep .snum{font:500 12px var(--font);color:var(--text-3)}
.hstep h3{margin:0;font-size:18px;font-weight:600}
.hstep p{margin:0;color:var(--text-3);font-size:14.5px}
.hstep .shot{display:flex;justify-content:center;min-height:0}
.hstep .shot .phonef{width:260px;min-height:500px}
.hstep .shot .win{width:100%}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px}
.fact{border-top:1px solid var(--line-2);padding-top:16px}
.fact h3{margin:0;font-size:16px;font-weight:600}
.fact p{margin:6px 0 0;color:var(--text-3);font-size:14.5px}

@media (max-width:1023px){
  .flist{gap:12px}
  .fitem .prev{height:132px;padding:14px 14px 0}
  .fitem .txt{padding:14px}
  .show .desk{margin-right:0}
  .show .desk .win>.bar{padding-right:14px}.show .desk .win>.body{padding-right:16px}
  .show .onphone{position:relative;right:auto;bottom:auto;display:flex;justify-content:center;margin-top:-120px}
  .capts{margin-top:32px}
  .hsteps{grid-template-columns:1fr;gap:48px}
  .hstep{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}
  .hstep .shot{grid-column:2;grid-row:1/span 4}
  .facts{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:600px){
  .flist{grid-template-columns:1fr;gap:10px}
  .fitem{flex-direction:row;align-items:center}
  .fitem .prev{display:none}
  .fitem .txt{border:0;padding:14px 16px}
  .fitem .go{display:none}
  .fitem::after{content:"›";color:var(--text-3);font-size:22px;padding-right:16px}
  .fp-hero h1{font-size:34px}
  .show{padding-top:24px}
  .show-sec{padding-bottom:56px}
  .eyebrow+.flist{margin-top:16px}
  .show .desk{display:none}
  .show .onphone{margin-top:0}
  .capts{grid-template-columns:1fr;gap:16px}
  .hstep{display:flex;align-items:stretch}
  .show{display:none}
  .capts{margin-top:8px}
  .hstep .shot{order:5}
  .hstep .shot .win .bar{display:none}
  .dgrid{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr;gap:16px}
}


@keyframes product-pop { from { opacity: 0; transform: translateY(6px); } }

.ftext .eyebrow .plan, .fp-hero .eyebrow .plan { vertical-align: 1px; }
.show .desk .props.panel { padding: 6px 0 12px; }
.show .desk .review { margin: 4px 12px 12px; }
.show .desk .pf { margin: 0; padding-inline: 12px; }
.phonef .ptitle { font-size: 18px; }
.phonef .psub { font-size: 12px; padding-inline: 4px; }
.fcard .box, .fitem .box { padding: 12px; }
.fitem .box ul { font-size: 13px; }
/* As on the board: the comparison table in the Decide band keeps the comparison's top spacing. */
.band .cmp { margin-top: 64px; }
@media (max-width: 600px) { .band .cmp { margin-top: 40px; } }
/* matched to the boards in the side-by-side audit */
.fsec .kb, .show-sec .kb { padding: 0 10px; }
.site-footer .flogo { display: block; padding: 4px 0; }

/* AI Suggestions illustration */
.sug { display: flex; flex-direction: column; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); }
.sg { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-top: 1px solid var(--line); font-size: 12.5px; }
.sg:first-child { border-top: 0; }
.sg b { font-size: 13px; font-weight: 500; color: var(--text); }
.sg .mut { font-size: 11.5px; }
.sg p { margin: 4px 0 0; color: var(--text-2); }
.sa { display: flex; gap: 6px; margin-top: 8px; }
.sa .ghost { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--text-2); font-size: 12.5px; }
/* "Pending" offer label: Offer blue text, no box (owner decision Oct 4) */
.pend { color: #5cbcf5; }

/* sections/hero.css */
/* Hero: copy above a perspective dot field; the existing interactive demo rises out of it.
   The demo's own behavior and playback styles come from /assets/marketing-approved/marketing-hero.css. */
.s-hero {
  --hero-h: max(560px, calc(100svh - 168px));
  position: relative;
  padding-bottom: 72px;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 280px at 50% calc(var(--hero-h) * .62), rgba(170,174,190,.1) 0%, rgba(170,174,190,.04) 45%, transparent 80%), var(--bg);
}
.s-hero .hero-field {
  --hero-dots-extend: 0px;
  position: absolute; left: 0; top: 0; z-index: 0;
  width: 100%; height: calc(var(--hero-h) + var(--hero-dots-extend));
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--hero-dots-extend) * .8), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--hero-dots-extend) * .8), transparent 100%);
}
@media (min-width: 861px) { .s-hero .hero-field { --hero-dots-extend: 340px; } }

.s-hero .hero-grid { position: relative; z-index: 1; display: grid; grid-template-rows: var(--hero-h) auto; justify-items: center; padding-inline: var(--gutter); }
.s-hero .hero-copy { align-self: start; display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 760px; padding-top: clamp(24px, 5vh, 56px); text-align: center; pointer-events: none; }
.s-hero .hero-copy > * { pointer-events: auto; }
.s-hero .hero-eyebrow { margin: 0; font: 400 12px/1.55 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #9a9caf; }
.s-hero h1 { margin: 0; font-size: clamp(40px, 7vw, 72px); line-height: 1.02; letter-spacing: -.035em; font-weight: 700; text-wrap: balance; }
.s-hero h1 span { color: #a3a6ae; }
.s-hero .hero-lede { margin: 0; max-width: 34em; color: #9a9caf; font-size: clamp(15px, 1.6vw, 17px); text-wrap: balance; }
.s-hero .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-top: 6px; }
.s-hero .btn.ghost { background: rgba(17,18,24,.7); border-color: #23242c; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.s-hero .hero-fine { margin: 0; font-size: 13px; color: #9a9caf; }
.s-hero .hero-fine-below { display: none; }
@media (min-width: 1024px) {
  .s-hero .hero-lede { font-size: 20px; color: #c4c6d2; margin-top: 8px; letter-spacing: -.005em; }
}

/* Same size and frame as the live homepage: as wide as clamp(540px, 51vw, 720px) of height allows
   (1364 × 720 at 1440px), the screen edge to edge inside a thin border that fades at the bottom. */
.s-hero .product-frame { --hero-frame-width: min(calc(100vw - 48px), calc(clamp(540px, 51vw, 720px) * 1.894444444)); position: relative; width: var(--hero-frame-width); max-width: none; margin: 0; }
.s-hero .hero-shell { position: relative; }
/* The homepage shows the demo in full color, with nothing over it (owner, Oct 9, #297). */
.s-hero .hero-playback { position: relative; border: 1px solid rgba(255,255,255,.21); border-radius: 13px; background: #121315; overflow: hidden; box-shadow: 0 28px 80px rgba(0,0,0,.56); }
@media (min-width: 1024px) { .s-hero .hero-playback { border-color: transparent; background: linear-gradient(#121315, #121315) padding-box, linear-gradient(180deg, rgba(255,255,255,.21) 80%, rgba(255,255,255,.11) 100%) border-box; } }
.s-hero .hero-playback img { display: block; width: 100%; }
@media (min-width: 781px) { .s-hero .hero-playback { aspect-ratio: 1893.6 / 1000; } }
@media (min-width: 861px) {
  .s-hero .hero-playback > a, .s-hero .hero-playback.is-ready > a { display: block; position: absolute; inset: 0; }
  .s-hero .hero-playback > a > picture { display: block; width: 100%; height: 100%; }
  .s-hero .hero-playback .workspace-screenshot { width: 100%; height: 100%; object-fit: fill; }
  .s-hero .hero-playback.is-ready > a { visibility: hidden; transition: visibility 0s .2s; }
}
.s-hero figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 14px 4px 0; font-size: 13px; color: #9a9caf; }
.s-hero figcaption a { color: var(--text); font-weight: 500; }
.s-hero .mobile-demo-expand { display: none; }

/* phones: a shorter hero (372, the shorter graph on board A2, #269); the fine print moves under the picture, and the demo can open full screen */
@media (max-width: 600px) {
  .s-hero { --hero-h: 372px; padding-bottom: 40px; }
  .s-hero .hero-grid { padding-inline: 16px; }
  .s-hero .hero-copy { padding-top: 16px; gap: 14px; }
  .s-hero h1 { font-size: 40px; }
  .s-hero .hero-copy .hero-fine { display: none; }
  .s-hero .hero-fine-below { display: block; padding-top: 14px; text-align: center; }
}
@media (max-width: 780px) {
  .s-hero .hero-footer-actions > a { display: none; }
  .s-hero .mobile-demo-expand { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text); text-decoration: underline; text-underline-offset: 4px; font-weight: 500; cursor: pointer; }
  .s-hero .hero-frame-caption { max-width: 170px; }
}

/* expanded demo on phones */
.mobile-demo-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; color: var(--text); background: var(--bg); }
.mobile-demo-dialog::backdrop { background: rgba(0,0,0,.82); }
.mobile-demo-dialog-shell { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; }
.mobile-demo-dialog-header { display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: max(10px, env(safe-area-inset-top)) 16px 10px; border-bottom: 1px solid var(--line-2); background: var(--surface); }
.mobile-demo-dialog-header div { display: grid; gap: 2px; }
.mobile-demo-dialog-header strong { font-size: 15px; }
.mobile-demo-dialog-header span { color: var(--text-3); font-size: 12px; }
.mobile-demo-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface-2); cursor: pointer; }
.mobile-demo-close svg { width: 20px; height: 20px; }
.mobile-demo-scroll { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom); }
.mobile-demo-scroll iframe { display: block; width: 1180px; height: 100%; border: 0; background: #f5f7fc; }
body.mobile-demo-open { overflow: hidden; }
@media (max-width: 860px) { .s-hero .hero-playback > a > picture { display: block; height: 100%; } }
/* phones and small tablets: the whole workspace at its own shape, as on the board and the live site
   (overrides the demo stylesheet's 520px phone window) */
@media (max-width: 780px) {
  .s-hero .hero-playback { height: auto; aspect-ratio: 1728 / 1140; }
  .s-hero .hero-playback > a { position: absolute; inset: 0; }
  .s-hero .hero-playback .workspace-screenshot { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
}
/* desktop preview (hero-desktop-preview.js): the live demo takes hover and focus */
@media (min-width: 1024px) { .s-hero .hero-playback > iframe { border: 0; clip-path: inset(1px); pointer-events: auto; color-scheme: light; } }
@media (min-width: 861px) { .s-hero .hero-playback > iframe { transition: opacity .2s; } }

/* the hero's own ink, as on the board */
.s-hero { --text: #f2f3fb; color: var(--text); }

/* Phones (600px and below): the iPhone app's Today screen, a still picture in a drawn iPhone, then
   Try the demo and the trial line (#269, board "Mobile site boards" section 2, A2). At 390 wide the
   device is 339 x 715 (a 320 x 696 screen, 6 black border, 3.5 titanium band); the sizes below are
   in cqw of the device's width, so narrower phones get the same drawing, smaller. From 601px up
   the scaled desktop stays. */
.s-hero .hero-phone { display: none; }
@media (max-width: 600px) {
  .s-hero .hero-shell { display: none; }
  .s-hero .product-frame { width: 100%; display: flex; flex-direction: column; align-items: center; }
  .s-hero figcaption { width: min(363px, 100%); justify-content: center; text-align: center; padding-top: 22px; }
  .s-hero .hero-frame-caption { display: none; }
  .s-hero .hero-footer-actions { width: 100%; justify-content: center; }

  .s-hero .hero-phone { display: block; position: relative; container-type: inline-size; width: min(339px, 100%); aspect-ratio: 339 / 715; margin-top: 6px; }
  .s-hero .hero-phone::before { content: ""; position: absolute; inset: -40px -30px; z-index: 0; pointer-events: none; background: radial-gradient(50% 45% at 50% 40%, rgba(160,165,190,.10), transparent 70%); }
  .s-hero .hero-phone::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -26px; height: 46px; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.85), rgba(0,0,0,0)); filter: blur(6px); }
  .s-hero .hp-btn { position: absolute; z-index: 0; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #2b2c30, #6a6c72 60%, #3a3b40); }
  .s-hero .hp-btn.l { left: -2px; }
  .s-hero .hp-btn.r { right: -2px; background: linear-gradient(270deg, #2b2c30, #6a6c72 60%, #3a3b40); }
  .s-hero .hp-btn.b1 { top: 39.528cqw; height: 8.555cqw; }
  .s-hero .hp-btn.b2 { top: 55.457cqw; height: 15.044cqw; }
  .s-hero .hp-btn.b3 { top: 74.336cqw; height: 15.044cqw; }
  .s-hero .hp-btn.b4 { top: 61.062cqw; height: 23.599cqw; }
  .s-hero .hp-btn.b5 { top: 150.147cqw; height: 16.519cqw; }
  .s-hero .hp-frame { position: absolute; inset: 0; z-index: 1; border-radius: 15.782cqw; background: linear-gradient(140deg, #8b8d93 0%, #3d3f44 18%, #24252a 45%, #4a4c52 75%, #9a9ca2 100%); box-shadow: 0 0 0 .5px rgba(0,0,0,.9), 0 40px 70px -20px rgba(0,0,0,.85), 0 18px 30px -12px rgba(0,0,0,.6); }
  .s-hero .hp-frame::after { content: ""; position: absolute; inset: .75px; border-radius: 15.487cqw; box-shadow: inset 0 0 0 .75px rgba(255,255,255,.28), inset 0 1px 0 rgba(255,255,255,.35); pointer-events: none; }
  .s-hero .hp-bezel { position: absolute; inset: 1.032cqw; border-radius: 14.749cqw; background: #050506; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
  .s-hero .hp-screen { position: absolute; inset: 2.802cqw; z-index: 1; border-radius: 12.979cqw; overflow: hidden; background: #0a0b0d; }
  .s-hero .hp-screen picture, .s-hero .hp-screen img { display: block; width: 100%; height: 100%; }
  .s-hero .hp-screen img { object-fit: cover; object-position: top; }
  .s-hero .hp-sheen { position: absolute; inset: 2.802cqw; z-index: 2; border-radius: 12.979cqw; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 28%); }
  .s-hero .hp-island { position: absolute; top: 5.457cqw; left: 50%; z-index: 3; width: 29.499cqw; height: 8.555cqw; transform: translateX(-50%); border-radius: 999px; background: #000; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.05); }
  .s-hero .hp-island::after { content: ""; position: absolute; right: 2.655cqw; top: 50%; width: 2.655cqw; height: 2.655cqw; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2b3550, #07080c 65%); }
}

/* sections/how-it-works.css */
/* How it works. Desktop: a pinned product window beside five steps, joined by a thread that fills
   as you scroll. Tablet and phone: a swipe carousel; phones show only the key part of each window. */
.s-story { overflow-x: clip; }
.s-story .lead-in { height: 120px; width: 2px; margin: 24px 0 0; background: linear-gradient(180deg, transparent, var(--line-2)); }
.s-story .story { display: grid; grid-template-columns: 360px 1fr; gap: 64px; }
.s-story .steps { position: relative; display: flex; flex-direction: column; }
.s-story .thread { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: var(--line-2); }
.s-story .thread i { position: absolute; left: 0; top: 0; width: 2px; height: var(--p, 0%); border-radius: 2px; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.6)); transition: background .4s; }
/* The line's shading is pinned to the whole track (its background is the track's height), so scrolling reveals it rather
   than stretching it. At the end it stays white and the bottom 30% of the track glows softly (owner, Oct 9, #297:
   lavender is for Evallo AI only); the glow is pinned there too and shows only where the line has reached. */
.s-story .thread i, .s-story .thread.end i { background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.6)) 0 0 / 100% var(--th, 100%) no-repeat; transition: none; }
.s-story .thread i::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--th, 0px) * .7); height: max(0px, calc(var(--fh, 0px) - var(--th, 0px) * .7)); border-radius: 2px; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.95)) 0 0 / 100% calc(var(--th, 0px) * .3) no-repeat; filter: drop-shadow(0 0 3px rgba(255,255,255,.75)) drop-shadow(0 0 9px rgba(255,255,255,.45)); opacity: 0; transition: opacity .4s; pointer-events: none; }
.s-story .thread.end i::before { opacity: 1; }
.s-story .thread i::after { content: ""; position: absolute; left: -4px; bottom: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
/* Owner, Oct 9 (video, #297): the line's end dot slipped with the page while scrolling, then snapped back, because the fill was
   moved by script a frame late whenever the page was busy. Where the browser can tie motion to scrolling itself
   (scroll-driven animations), the line, glow and dot ride the scroll directly and can't lag. The fill is a window that
   slides down over a still line (so nothing stretches); the dot moves on its own. Other browsers keep the script. */
@supports (animation-timeline: view()) {
  .s-story .steps { view-timeline: --hiw block; view-timeline-inset: 50% 50%; }
  .s-story .thread i { height: 100% !important; width: 80px; left: -39px; overflow: hidden; background: none !important; transition: none;
    animation: hiw-window linear both; animation-timeline: --hiw; animation-range: cover 0% cover 100%; }
  .s-story .thread i::before { content: ""; position: absolute; inset: 0; height: auto; top: 0; border-radius: 0; filter: none; opacity: 1;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.6)) 50% 0 / 2px 100% no-repeat;
    animation: hiw-still linear both; animation-timeline: --hiw; animation-range: cover 0% cover 100%; }
  .s-story .thread i::after { content: ""; position: absolute; inset: 0; width: auto; height: auto; left: 0; top: 0; bottom: 0; border-radius: 0; box-shadow: none;
    background: linear-gradient(180deg, rgba(255,255,255,0) 70%, rgba(255,255,255,.95)) 50% 0 / 2px 100% no-repeat;
    filter: drop-shadow(0 0 3px rgba(255,255,255,.75)) drop-shadow(0 0 9px rgba(255,255,255,.45));
    opacity: 0; transition: opacity .4s; animation: hiw-still linear both; animation-timeline: --hiw; animation-range: cover 0% cover 100%; }
  .s-story .thread.end i::after { opacity: 1; }
  .s-story .thread::after { content: ""; position: absolute; left: -9px; top: -10px; width: 20px; height: calc(100% + 20px); pointer-events: none;
    background: radial-gradient(circle at 10px 10px, var(--text) 0 4.5px, rgba(255,255,255,.08) 5px 8px, transparent 8.5px) 0 0 / 20px 20px no-repeat;
    animation: hiw-dot linear both; animation-timeline: --hiw; animation-range: cover 0% cover 100%; }
  @keyframes hiw-window { from { transform: translateY(-100%) } to { transform: translateY(0) } }
  @keyframes hiw-still { from { transform: translateY(100%) } to { transform: translateY(0) } }
  @keyframes hiw-dot { from { transform: translateY(0) } to { transform: translateY(calc(100% - 20px)) } }
}
.s-story .step { position: relative; min-height: 58vh; display: flex; flex-direction: column; justify-content: center; padding-left: 28px; opacity: .35; transition: opacity .35s; }
.s-story .step.on { opacity: 1; }
.s-story .step .lbl { margin: 0; color: var(--text-4); }
.s-story .step.on .lbl { color: var(--text-2); }
.s-story .step h3 { margin: 12px 0 0; font-size: 26px; letter-spacing: -.02em; line-height: 1.2; }
.s-story .step > p { margin: 10px 0 0; color: var(--text-3); }
.s-story .node { position: absolute; left: -5px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-2); transition: border-color .3s, background .3s; }
.s-story .step.passed .node { border-color: var(--text-2); background: var(--text-2); }
.s-story .step[data-s="4"].passed .node { border-color: var(--text-2); background: var(--text-2); }

.s-story .stage { position: sticky; top: calc(50vh - 240px); height: 480px; }
.s-story .screen { position: absolute; inset: 0; opacity: 0; transform: translateY(12px) scale(.985); transition: opacity .45s, transform .45s; pointer-events: none; }
.s-story .screen.on { opacity: 1; transform: none; pointer-events: auto; }
.s-story .stage .win { width: 820px; height: 100%; display: flex; flex-direction: column;
  -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent 100%), linear-gradient(180deg, #000 80%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 70%, transparent 100%), linear-gradient(180deg, #000 80%, transparent 100%); mask-composite: intersect; }
.s-story .stage .body { flex: 1; }
.s-story .stepvis { display: none; }
.s-story .ft, .s-story .mini { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }

.s-story .float { position: absolute; left: 440px; bottom: -28px; z-index: 2; width: 260px; display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, #1c1d21, #15161a); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -16px rgba(0,0,0,.85); font-size: 13px; opacity: 0; transform: translate(24px, 40px) scale(.96); transition: opacity .5s .25s, transform .7s .25s cubic-bezier(.16,1,.3,1); }
.s-story .screen.on .float { opacity: 1; transform: none; }
.s-story .float b { font-size: 14px; font-weight: 500; }
.s-story .float small { color: var(--text-3); font-size: 12px; }
.s-story .float .fh { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; font-weight: 500; color: var(--text-3); }
.s-story .float .fb { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 10px; height: 28px; padding: 0 10px; border-radius: 7px; background: var(--text); color: #0b0c0e; font-weight: 500; font-size: 12.5px; }
.s-story .float .fb kbd { background: rgba(0,0,0,.12); border-color: rgba(0,0,0,.15); color: #0b0c0e; }
.s-story .float.warm { border-color: rgba(46,168,240,.3); }
.s-story .on .card.hot { animation: s-story-slide .7s .2s backwards; }
@keyframes s-story-slide { from { transform: translateX(-120%); opacity: .3; } }
.s-story .stepnav { display: none; }

/* tablet and phone: swipe carousel */
@media (max-width: 1023px) {
  .s-story .lead-in, .s-story .thread, .s-story .node, .s-story .stage { display: none; }
  .s-story .stepnav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 24px calc(-1 * var(--gutter)) 0; padding-inline: var(--gutter); }
  .s-story .stepnav::-webkit-scrollbar { display: none; }
  .s-story .stepnav button { flex: none; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: none; color: var(--text-3); font: 500 13.5px var(--font); cursor: pointer; }
  .s-story .stepnav button[aria-current] { background: var(--text); border-color: var(--text); color: #0b0c0e; }
  .s-story .story { grid-template-columns: 1fr; gap: 0; margin-top: 20px; }
  .s-story .steps { flex-direction: row; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  .s-story .steps::-webkit-scrollbar { display: none; }
  .s-story .step { flex: 0 0 88%; min-height: 0; justify-content: flex-start; opacity: 1; scroll-snap-align: start; padding: 22px 20px 20px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%), var(--surface); }
  .s-story .stepvis { display: block; margin-top: 16px; }
  .s-story .stepvis .screen { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; }
  .s-story .stepvis .float { display: none; }
}

/* phone: smaller cards and only the key part of each window */
@media (max-width: 600px) {
  .s-story .stepnav button { height: 32px; padding: 0 12px; font-size: 13px; }
  .s-story .story { margin-top: 16px; }
  .s-story .steps { gap: 12px; }
  .s-story .step { flex-basis: 86%; padding: 18px 16px 16px; border-radius: 16px; }
  .s-story .step h3 { font-size: 20px; margin-top: 8px; }
  .s-story .step > p { font-size: 14.5px; margin-top: 6px; }
  .s-story .stepvis { margin-top: 14px; }
  .s-story .stepvis .win { background: none; border: 0; box-shadow: none; }
  .s-story .stepvis .bar, .s-story .stepvis .msg { display: none; }
  .s-story .stepvis .body { padding: 0; gap: 8px; }
  .s-story .stepvis .cap, .s-story .stepvis .ft, .s-story .stepvis .mini { grid-template-columns: 1fr; }
  .s-story .stepvis .pipe { grid-template-columns: 1fr; gap: 14px; }
  .s-story .stepvis .pipe .col:nth-child(1), .s-story .stepvis .pipe .col:nth-child(4), .s-story .stepvis .pipe .col:nth-child(2) .card:nth-child(3) { display: none; }
  .s-story .stepvis .pipe .card .tags, .s-story .stepvis .pipe .card small { display: none; }
  .s-story .stepvis .pipe .card { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
  .s-story .stepvis .pipe .card .cf { margin-top: 0; gap: 10px; }
  .s-story .stepvis .doc .meta, .s-story .stepvis .doc .dsec:last-child { display: none; }
  .s-story .stepvis .ft .mail, .s-story .stepvis .ft .li:nth-child(n+5) { display: none; }
  .s-story .stepvis .tbl tr:last-child { display: none; }
  .s-story .stepvis .tbl { font-size: 12px; }
  .s-story .stepvis .dsec p { font-size: 14.5px; }
}

/* Step 1's typed recruiter message (#296; site/scripts/type-message.js): letters hold their space while hidden, and the
   highlights stay plain until the message is typed. */
.s-story .tw-c { opacity: 0; }
.s-story .tw-c.on { opacity: 1; }
.s-story .tw-msg .hl { transition: background-color .25s ease, box-shadow .25s ease, color .25s ease; }
.s-story .tw-plain .hl { background: transparent; box-shadow: none; color: inherit; }

/* sections/features.css */
/* Features (board FS v2 polished, approved Oct 10): a six-column bento on desktop, two columns on tablets.
   Every tile shows a real app screen at one scale (the app at 75%, taken at 2x), as a window that starts 24px in
   from the tile's left and 24px under its words, runs off the right and bottom edges and fades there. The phone is
   the one exception: a whole device, cut off at the bottom the same way. Planned features sit in a quieter
   "Coming soon" row. Tablets (601-1023px) get wider crops of the same screens at the same scale, so no screen ends
   before its tile's right edge. Phones show one column with the screens cut off at 220px; tiles already shown in
   How it works are skipped. */
.s-features { padding-top: 64px; }
.s-features .grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 64px; }
.s-features .tile { --h: 280px; position: relative; grid-column: span 2; display: flex; flex-direction: column; padding: 24px 0 0 24px; overflow: hidden;
  border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%), var(--surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 60px -20px rgba(0,0,0,.8); transition: border-color .25s; }
.s-features .tile:hover { border-color: var(--line-2); }
.s-features .tile.w3 { grid-column: span 3; }
.s-features .tile.w4 { grid-column: span 4; }
/* the words: a title and at most two lines, in a block of fixed height so every screen in a row starts on one line */
.s-features .txt { min-height: 76px; padding-right: 24px; }
.s-features .tile h3 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; }
.s-features .tile p { margin: 4px 0 0; color: var(--text-3); font-size: 15px; line-height: 24px; }
/* the screen */
.s-features .shot { position: relative; height: var(--h); margin-top: 24px; overflow: hidden; border: 1px solid var(--line-2); border-width: 1px 0 0 1px;
  border-top-left-radius: 10px; background: #0e0f11;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent), linear-gradient(180deg, #000 calc(100% - 56px), transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent), linear-gradient(180deg, #000 calc(100% - 56px), transparent);
  mask-composite: intersect; }
.s-features .shot picture, .s-features .shot img { display: block; }
.s-features .shot img { max-width: none; height: auto; }
/* the phone: a whole device, centered, cut off at the bottom. Its own text is larger than the desktop's, so it is shown
   at 65%, where its words read the same size as the other tiles' */
.s-features .shot.phone { display: flex; justify-content: center; margin-left: -24px; border: 0; border-radius: 0; background: none;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent); }
.s-features .device { width: 266px; height: max-content; padding: 6px 6px 0; border-radius: 38px 38px 0 0; background: #1c1d20; box-shadow: inset 0 0 0 1px #3a3b40; }
.s-features .screen { position: relative; border-radius: 32px 32px 0 0; overflow: hidden; background: #08090a; }
.s-features .sb { position: relative; height: 35px; display: flex; align-items: center; justify-content: space-between; padding: 2px 19px 0 29px; color: #f3f4f6; font: 600 11px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font); }
.s-features .sb svg { width: 38px; height: 8px; fill: currentColor; }
.s-features .sb .island { position: absolute; left: 50%; top: 7px; width: 80px; height: 23px; margin-left: -40px; border-radius: 12px; background: #000; }

/* Coming soon: a quieter row under a gray label, with its screens slightly dimmed so shipped features lead. Two tiles
   since Calendar sync went live (Oct 13), so from 601px up they use the wider crops and still run off the right edge. */
.s-features .next { margin-top: 56px; }
.s-features .next-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; }
.s-features .next-grid .tile { --h: 220px; grid-column: auto; }
.s-features .next-grid .tile h3 { font-size: 16px; }
.s-features .next-grid .tile p { font-size: 14px; line-height: 22px; }
.s-features .next-grid .txt { min-height: 72px; }
.s-features .next-grid .shot img { opacity: .85; }

@media (max-width: 1023px) {
  .s-features .grid { grid-template-columns: repeat(2, 1fr); }
  .s-features .tile { grid-column: span 1; }
  .s-features .tile.w3, .s-features .tile.w4 { grid-column: span 2; }
  .s-features .next-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .s-features { padding-top: 16px; }
  .s-features .grid { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .s-features .tile.in-story { display: none; }
  .s-features .tile, .s-features .tile.w3, .s-features .tile.w4, .s-features .next-grid .tile { --h: 220px; grid-column: auto; order: 3; padding: 20px 0 0 20px; border-radius: 16px; }
  .s-features .txt, .s-features .next-grid .txt { min-height: 0; padding-right: 20px; }
  .s-features .tile h3, .s-features .next-grid .tile h3 { font-size: 16px; line-height: 22px; }
  .s-features .tile p, .s-features .next-grid .tile p { font-size: 14.5px; line-height: 22px; }
  .s-features .shot { margin-top: 20px; }
  .s-features .shot.phone { margin-left: -20px; }
  .s-features .tile.m1 { order: 1; }
  .s-features .tile.m2 { order: 2; }
  .s-features .next { margin-top: 36px; }
  .s-features .next-grid { gap: 12px; margin-top: 14px; }
}

/* sections/why-it-works.css */
/* Why it works: the offer comparison. */
.s-why .cmp { margin-top: 64px; }
@media (max-width: 600px) { .s-why .cmp { margin-top: 40px; } }

/* sections/privacy.css */
/* Private by design: phone points (planned) first, then account points. */
.s-privacy { padding-top: 0; }
.s-privacy .trust { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px 24px; margin-top: 48px; }
.s-privacy .tgrp { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.s-privacy .tgrp:first-child { margin-top: 0; }
.s-privacy .tgrp .plan { vertical-align: 0; }
.s-privacy .tr { grid-column: span 2; padding-top: 24px; border-top: 1px solid var(--line-2); }
.s-privacy .tr.wide { grid-column: span 3; }
.s-privacy .tr svg { width: 22px; height: 22px; fill: none; stroke: var(--text-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.s-privacy .tr h3 { margin: 16px 0 0; font-size: 18px; font-weight: 700; }
.s-privacy .tr p { margin: 8px 0 0; color: var(--text-3); font-size: 15px; }
@media (max-width: 600px) {
  .s-privacy .trust { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
  .s-privacy .tgrp { margin: 28px 0 4px; }
  .s-privacy .tr, .s-privacy .tr.wide { grid-column: auto; display: grid; grid-template-columns: 20px 1fr; column-gap: 12px; padding-block: 14px; }
  .s-privacy .tr svg { grid-row: 1 / 3; width: 18px; height: 18px; margin-top: 2px; }
  .s-privacy .tr h3 { margin: 0; font-size: 16px; }
  .s-privacy .tr p { margin: 4px 0 0; font-size: 14px; }
}

/* sections/founder.css */
/* Founder note. */
.s-founder { padding-top: 0; }
.s-founder .letter { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
.s-founder blockquote { margin: 0; font-size: 22px; line-height: 1.55; letter-spacing: -.01em; color: var(--text-2); text-wrap: pretty; }
.s-founder blockquote p { margin: 0 0 20px; }
.s-founder blockquote p:first-child { color: var(--text); }
.s-founder .sig { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.s-founder .sig .av { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #2a2b3a, #1c1d26); border: 1px solid var(--line-2); font: 600 16px var(--font); color: var(--text-2); }
.s-founder .sig b { display: block; }
.s-founder .sig small { color: var(--text-3); font-size: 14px; }
.s-founder blockquote a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1023px) { .s-founder .letter { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 600px) { .s-founder blockquote { font-size: 18px; } }

/* sections/faq.css */
/* Questions. */
.s-faq { padding-top: 0; }
.s-faq .faq { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; }
.s-faq .lede { font-size: 16px; }
.s-faq .lede a { color: var(--text-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.s-faq .lede a:hover { color: #fff; }
/* phones: 44pt hit height. Vertical padding on an inline link grows the tap area without moving the text (audit 3) */
@media (max-width: 600px) { .s-faq .lede a { padding-block: 12px; } }
.s-faq details { border-top: 1px solid var(--line); }
.s-faq details:last-child { border-bottom: 1px solid var(--line); }
.s-faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; list-style: none; font-size: 17px; font-weight: 500; cursor: pointer; }
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary::after { content: "+"; color: var(--text-3); font-size: 20px; line-height: 1; }
.s-faq details[open] summary::after { content: "–"; }
.s-faq details p { margin: 0 0 20px; color: var(--text-3); max-width: 40em; }
@media (max-width: 1023px) { .s-faq .faq { grid-template-columns: 1fr; gap: 32px; } }

/* sections/closing.css */
/* Closing call to action over the same dot surface as the hero. */
.s-closing { position: relative; overflow: hidden; padding-block: 120px 260px; text-align: center; }
.s-closing .field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; }
.s-closing .wrap { position: relative; }
.s-closing h2 { max-width: 14em; margin-inline: auto; }
.s-closing .lede { margin-inline: auto; }
.s-closing .acts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.s-closing .fine { margin: 16px 0 0; font-size: 13px; color: var(--text-3); }

/* sections/sticky-cta.css */
/* Phones only: a trial bar between the hero and the closing section (sticky-cta.js). */
.sticky-cta { display: none; }
@media (max-width: 600px) {
  .sticky-cta:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line-2); background: rgba(11,12,14,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 13px; font-weight: 500; transition: transform .25s; }
  .sticky-cta small { display: block; color: var(--text-3); font-weight: 400; font-size: 12px; }
  .sticky-cta .btn { height: 40px; padding: 0 14px; font-size: 14px; }
  .sticky-cta.away { transform: translateY(110%); }
  body:has(.sticky-cta) .site-footer { padding-bottom: 96px; }
}