/* 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/about2.css */
/* About v2 (#209, Oct 10): what Evallo is, why it exists, the rules it keeps, what it won't do, who it's for, and the
   company, with one real screen. No founder name or story (owner, October 10). The screen is the real app at 75%. */
.ab2-hero { padding-bottom: 0; }
.ab2-hero .lede { max-width: 40em; }
.ab2-band { padding-top: 104px; }
.ab2 h2 { margin: 10px 0 0; font-size: 34px; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; max-width: 22em; }
.ab2 h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--text); }
.ab2 p { color: var(--text-2); font-size: 16px; line-height: 1.6; }
.ab2-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 20px; max-width: 980px; }
.ab2-cols p { margin: 0; }
.ab2-win { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 64px), transparent); position: relative; width: 1080px; max-width: 100%; height: 314px; margin-top: 48px; overflow: hidden; border-radius: 14px; border: 1px solid var(--line-2); background: #0e0f11; box-shadow: 0 30px 80px -30px rgba(0,0,0,.9); }
.ab2-win img { display: block; max-width: none; height: auto; }
.ab2-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 36px; }
.ab2-grid > div { padding-top: 20px; border-top: 1px solid var(--line-2); }
.ab2-grid p { margin: 8px 0 0; color: var(--text-3); font-size: 15px; }
.ab2-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.ab2-no { list-style: none; margin: 8px 0 0; padding: 0; }
.ab2-no li { padding: 14px 0 14px 30px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 16px; position: relative; }
.ab2-no li:last-child { border-bottom: 1px solid var(--line); }
.ab2-no li::before { content: ""; position: absolute; left: 4px; top: 22px; width: 12px; height: 1.6px; background: var(--text-3); transform: rotate(45deg); box-shadow: none; }
.ab2-no li::after { content: ""; position: absolute; left: 4px; top: 22px; width: 12px; height: 1.6px; background: var(--text-3); transform: rotate(-45deg); }
.ab2-who { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.ab2-orgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
.ab2-who a, .ab2-orgs a { display: block; padding: 22px 24px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; transition: border-color .2s; }
.ab2-who a, .ab2-orgs a { display: flex !important; flex-direction: column; }
.ab2-who a:hover, .ab2-orgs a:hover { border-color: var(--line-2); background: var(--surface-2); }
.ab2-more { margin-top: auto; padding-top: 14px; color: var(--text); font-size: 14px; font-weight: 500; }
.ab2-who a:hover .ab2-more, .ab2-orgs a:hover .ab2-more { text-decoration: underline; text-underline-offset: 3px; }
.ab2-who p, .ab2-orgs p { margin: 6px 0 0; color: var(--text-3); font-size: 15px; }
.ab2-org-h { margin-top: 28px; font: 500 14px/1 var(--font); color: var(--text-3); }
.ab2-facts p { margin: 8px 0 0; }
.ab2-facts p + p { margin-top: 14px; }
.ab2 .s-product-cta { margin-top: 104px; }
@media (max-width: 1023px) {
  .ab2-grid { grid-template-columns: 1fr 1fr; }
  .ab2-split { grid-template-columns: 1fr; gap: 20px; }
  .ab2-orgs { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ab2-band { padding-top: 64px; }
  .ab2 h2 { font-size: 26px; }
  .ab2-cols, .ab2-who, .ab2-grid { grid-template-columns: 1fr; gap: 20px; }
  .ab2-win { height: 230px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent), linear-gradient(180deg, #000 calc(100% - 56px), transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent), linear-gradient(180deg, #000 calc(100% - 56px), transparent); mask-composite: intersect; }
  .ab2 .s-product-cta { margin-top: 64px; }
}