/* ─────────────────────────────────────────────────────────────
   Excavate · the site
   Type, colour and rhythm measured off linear.app at 1440 and 375,
   and off demo.excavate.ai. Nothing here is chosen by feel: the
   ratios are the point, and the ratio that matters is a 48px
   heading against 15px body.
   ───────────────────────────────────────────────────────────── */

:root {
  --bg: #08090a;
  --ink: #f7f8f8;
  --mut: #8a8f98;
  --dim: #6b7280;
  --faint: #4c5563;
  --line: rgba(255, 255, 255, .08);
  --line2: rgba(255, 255, 255, .14);
  --frame: rgba(255, 255, 255, .2);
  --accent: #4da6ff;
  --accent-ink: #7dbfff;
  --accent-dim: rgba(77, 166, 255, .13);
  --amber: #d9a03c;
  --red: #e25a5a;
  --card: #0f1013;
  --btn-bg: #f7f8f8;
  --btn-ink: #08090a;
  --sans: "Geist", -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", "SF Mono", Menlo, monospace;
  --gut: clamp(16px, 3.4vw, 48px);
  --sec: clamp(52px, 8vw, 112px);
  --fig-solid: #3e444d;
  --fig-ghost: #30353d;
  --fig-faint: #262a30;
  --fig-top: #1c2027;
  --fig-l: #111418;
  --fig-r: #161a1f;
  --surf: #0e0f12;
  --stage-a: #23262c;
  --stage-b: #101215;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
main { overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent-dim); }

/* ── the scale ───────────────────────────────────────────────
   64/48/15 at 1440 and 38/24/15 at 375. Body never changes size;
   only the display does, and its leading loosens as it shrinks
   because 1.0 is right at 48px and cramped at 24. */
.h1 {
  font-size: clamp(38px, 4.6vw, 64px);
  font-weight: 500;
  letter-spacing: -.028em;
  line-height: 1.04;
}
.h2 {
  font-size: clamp(24px, 3.4vw, 48px);
  font-weight: 500;
  letter-spacing: -.022em;
  line-height: 1.14;
}
.h3 { font-size: clamp(17px, 1.5vw, 21px); font-weight: 500; letter-spacing: -.022em; line-height: 1.3; }
.lede { color: var(--mut); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; }
.lead-lg { color: var(--mut); font-size: clamp(19px, 1.9vw, 26px); font-weight: 500; letter-spacing: -.02em; line-height: 1.28; }
.lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.mut { color: var(--mut); }
.mono-note { font-family: var(--mono); font-size: clamp(11px, .85vw, 12px); letter-spacing: .07em; color: var(--dim); line-height: 1.7; }
.src { display: block; margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .07em; color: var(--faint); }

@media (min-width: 901px) { .h1 { line-height: .97; } .h2 { line-height: 1; } }

/* ── frame ───────────────────────────────────────────────── */
.wrap { max-width: 1344px; margin: 0 auto; padding: 0 var(--gut); }
.sec { padding: var(--sec) 0; }
.rule { height: 1px; background: var(--line); }
.say { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.say .h2 { max-width: 20ch; }

/* ── buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 54px; padding: 0 30px;
  font-family: var(--sans); font-size: 16.5px; font-weight: 500;
  border: 1px solid transparent; border-radius: 3px;
  cursor: pointer; white-space: nowrap;
  transition: opacity .16s ease, border-color .16s ease;
}
.btn-a { background: var(--btn-bg); color: var(--btn-ink); }
.btn-b { border-color: var(--line2); color: var(--ink); background: none; }
.btn:hover { opacity: .86; }
.acts { display: flex; gap: 14px; }
.more { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; margin-top: 22px; }
.more i { font-style: normal; opacity: .55; transition: transform .18s ease; }
.more:hover i { transform: translateX(3px); }

/* ── header ──────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.top.on { border-bottom-color: var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 70px; }
.top nav { display: flex; gap: 28px; font-size: 14.5px; color: var(--mut); }
.top nav a:hover { color: var(--ink); }
.brand img { height: 30px; width: auto; }
.top-r { display: flex; align-items: center; gap: 14px; }
.tbtn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; font-size: 14px; font-weight: 500; border-radius: 3px; background: var(--btn-bg); color: var(--btn-ink); border: none; cursor: pointer; font-family: var(--sans); }
.burger { display: none; }

/* ── hero ────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 100px) 0 0; }
.hero-in { position: relative; text-align: center; max-width: 1060px; margin: 0 auto; }
.hero .lede { max-width: 720px; margin-left: auto; margin-right: auto; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.5; }
.hero .acts { justify-content: center; }

/* ── screenshots: windows, not cards ─────────────────────── */
.shot { position: relative; }
.shot img { width: 100%; height: auto; border-radius: 9px; border: 1px solid var(--line); }
.shot .fade { -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); }
.shot::before {
  content: ""; position: absolute; inset: -10% -6% 24%; z-index: 0;
  background: radial-gradient(58% 48% at 50% 38%, var(--accent-dim), transparent 72%);
  filter: blur(34px); pointer-events: none;
}
.shot > * { position: relative; z-index: 1; }
/* On a phone a 1330px capture squeezed into 343 is unreadable mush, so
   a desktop capture cannot be read at any size that fits, so it stops
   pretending: the whole window shows, in proportion, inside the column. */
@media (max-width: 900px) {
  .shot { overflow: hidden; }
  .shot::before { display: none; }
  .shot img { width: 100%; max-width: 100%; border-radius: 7px; }
  .shot img.fade { -webkit-mask-image: none; mask-image: none; }
}

/* ── the problem ─────────────────────────────────────────── */
.figs { display: grid; grid-template-columns: repeat(3, 1fr); }
.fig { padding: clamp(26px, 2.6vw, 36px) clamp(20px, 2.8vw, 44px) 0 0; min-width: 0; }
.fig + .fig { padding-left: clamp(20px, 2.8vw, 44px); border-left: 1px solid var(--line); }
.fig:last-child { padding-right: 0; }
.fig-art { height: clamp(180px, 18vw, 250px); display: grid; place-items: center; margin-bottom: 8px; }
.fig-art svg { width: clamp(230px, 22vw, 310px); height: auto; }
.fig-n { display: flex; align-items: baseline; gap: 12px; margin-bottom: 9px; flex-wrap: wrap; }
.fig-n b { font-family: var(--mono); font-weight: 500; font-size: clamp(20px, 2vw, 26px); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.fig-n span { font-size: clamp(16px, 1.3vw, 18px); font-weight: 500; letter-spacing: -.018em; }
.fig p { color: var(--mut); font-size: 15px; margin: 0; max-width: 40ch; }
.n-acc b { color: var(--accent-ink); }
.n-amb b { color: var(--amber); }
.n-red b { color: var(--red); }

/* ── the turn ────────────────────────────────────────────── */
.turn { padding: clamp(72px, 9vw, 136px) 0; margin: 0; text-align: center; }
/* the model in three cells: what you connect, what we do, what you get */
.how3 { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(36px, 4.6vw, 64px);
  border: 1px solid var(--line); border-radius: 10px; background: var(--surf); overflow: hidden; text-align: left; }
.how3 > div { padding: clamp(24px, 2.8vw, 38px); min-width: 0; }
.how3 > div + div { border-left: 1px solid var(--line); }
.how3 .n { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--accent-ink); margin-bottom: 18px; }
.how3 h3 { font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; margin-bottom: 10px; }
.how3 p { color: var(--mut); font-size: 15px; margin: 0; }
.how3 p b { color: var(--ink); font-weight: 500; }
.sec.ruled { border-top: 1px solid var(--line); }
.turn-h { font-size: clamp(28px, 4vw, 56px); font-weight: 500; letter-spacing: -.028em; line-height: 1.06; max-width: 900px; margin: 0 auto; }
.turn .lede { max-width: 640px; margin: clamp(16px, 2vw, 26px) auto 0; font-size: clamp(15px, 1.3vw, 18px); }

/* ── captions under a shot ───────────────────────────────── */
.caps { display: flex; gap: 0; margin-top: clamp(28px, 3.2vw, 44px); }
.caps > div { flex: 1; padding: 0 clamp(20px, 2.8vw, 44px) 0 0; }
.caps > div + div { border-left: 1px solid var(--line); padding-left: clamp(20px, 2.8vw, 44px); }
.caps > div:last-child { padding-right: 0; }
.caps p { color: var(--mut); font-size: 14.5px; margin: 0; }
.caps .lbl { display: block; margin-bottom: 9px; }

/* ── what now ────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.step { padding: clamp(24px, 2.4vw, 32px) clamp(20px, 2.6vw, 40px) 0 0; }
.step + .step { border-left: 1px solid var(--line); padding-left: clamp(20px, 2.6vw, 40px); }
.step:last-child { padding-right: 0; }
.step-k { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.step-k i { width: 7px; height: 7px; background: var(--accent); flex-shrink: 0; }
.step.on .step-k i { width: 11px; height: 11px; outline: 1px solid var(--accent); outline-offset: 3px; }
.step.on .lbl { color: var(--accent-ink); }
.step .h3 { margin-bottom: 10px; }
.step p { color: var(--mut); font-size: 15px; margin: 0; }

/* ── footer ──────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); padding: clamp(22px, 2.6vw, 32px) 0; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: clamp(26px, 3.4vw, 56px); align-items: start; }
.foot-brand { color: var(--mut); font-size: 14px; line-height: 1.7; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 14.5px; }
.foot-col .lbl { margin-bottom: 4px; }
.foot-col a { color: var(--mut); }
.foot-col a:hover { color: var(--ink); }

/* ── the booking modal ───────────────────────────────────── */
.cal-veil { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: clamp(12px, 4vw, 40px); background: rgba(4,6,10,.72); backdrop-filter: blur(6px); }
.cal-veil.open { display: flex; }
.cal-box { position: relative; width: min(980px, 100%); max-height: 88vh; overflow: auto; background: var(--bg); border: 1px solid var(--line2); border-radius: 8px; }
.cal-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--line); background: var(--bg); }
.cal-x { width: 30px; height: 30px; display: grid; place-items: center; background: none; border: 1px solid var(--line2); border-radius: 3px; color: var(--mut); font-size: 16px; cursor: pointer; }
#cal-inline { min-height: 520px; padding: 6px; }

/* ── reveal ──────────────────────────────────────────────── */
.nx-anim [data-rise] { opacity: 0; transform: translateY(12px); }
.in [data-rise] { opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.22,1,.36,1) var(--d,0s), transform .6s cubic-bezier(.22,1,.36,1) var(--d,0s); }

/* ── the phone ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .say { grid-template-columns: 1fr; gap: 16px; }
  .say .h2 { max-width: none; }
  .figs, .steps { grid-template-columns: 1fr; border-top: none; }
  .fig, .step { padding: 26px 0; border-top: 1px solid var(--line); }
  .fig + .fig, .step + .step { border-left: none; padding-left: 0; }
  .fig-art { height: 170px; }
  .fig + .fig { border-left: none; }
  .how3 { grid-template-columns: 1fr; }
  .how3 > div + div { border-left: none; border-top: 1px solid var(--line); }
  .shot.stage { padding: 6px; border-radius: 12px; }
  .caps { flex-direction: column; gap: 0; }
  .caps > div { padding: 20px 0 !important; border-left: none !important; border-top: 1px solid var(--line); }
  .acts { flex-direction: column; }
  .btn { width: 100%; height: 52px; font-size: 16px; }
  .hero .acts { align-items: stretch; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px clamp(20px, 5vw, 40px); }
  .foot-brand { grid-column: 1 / -1; order: 3; margin-top: 6px; }
  .top nav, .top .demo-link { display: none; }
  .burger { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 3px; background: none; cursor: pointer; gap: 4px; }
  .burger span { display: block; width: 15px; height: 1.5px; background: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nx-anim [data-rise] { opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────────────────────
   Sub-pages
   A page per question a buyer asks before signing, built on the
   same scale as the index: one hero, then topic sections carrying
   a full-width capture and a short caption beneath it.
   ───────────────────────────────────────────────────────────── */

.page-hero { padding: clamp(56px, 8vw, 128px) 0 clamp(20px, 3vw, 40px); }
.page-hero .h1 { font-size: clamp(34px, 4.4vw, 62px); max-width: 18ch; }
.page-hero .lede { max-width: 620px; margin-top: clamp(16px, 2vw, 24px); font-size: clamp(15px, 1.4vw, 19px); }
.page-hero .lbl { display: block; margin-bottom: 20px; color: var(--accent-ink); }

/* a topic section: say it, then show it */
.feat { padding: clamp(56px, 8vw, 120px) 0; }
.feat + .feat { margin-top: clamp(8px, 2vw, 32px); }
.feat-say { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; margin-bottom: clamp(30px, 4vw, 56px); }
.feat-say .lede, .say .lede { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; max-width: 560px; }
.feat-say .h2 { max-width: 14ch; }

/* rows of short claims under a heading */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
/* Column-aware, so a second row does not inherit the first column's
   divider. `+ .cellx` walks DOM order, not grid columns, which put a
   border down the middle of the left column on any wrapped grid. */
.cellx { padding: clamp(24px, 2.6vw, 34px) clamp(20px, 2.8vw, 44px); }
.grid3 .cellx:nth-child(3n+1), .grid2 .cellx:nth-child(odd) { padding-left: 0; }
.grid3 .cellx:nth-child(3n), .grid2 .cellx:nth-child(even) { padding-right: 0; }
/* vertical dividers retired: the gutter does the separating */
.grid3 .cellx:nth-child(n+4), .grid2 .cellx:nth-child(n+3) { border-top: 1px solid var(--line); }
.cellx .h3 { margin-bottom: 10px; }
.cellx p { color: var(--mut); font-size: 14.5px; margin: 0; }
.cellx .lbl { display: block; margin-bottom: 14px; }

/* a numbered list of controls or steps */
.rows { border-top: 1px solid var(--line); }
.rowx { display: grid; grid-template-columns: 62px 1fr 1.5fr; gap: clamp(18px, 3vw, 44px); padding: clamp(22px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--line); align-items: start; }
.rowx .n { font-family: var(--mono); font-size: 12px; color: var(--faint); letter-spacing: .06em; padding-top: 4px; }
.rowx p { color: var(--mut); font-size: 15px; margin: 0; }

/* the plan */
.plan { border: 1px solid var(--line2); border-radius: 6px; padding: clamp(28px, 3.4vw, 44px); background: var(--card); }
.plan-k { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.plan-price { font-family: var(--mono); font-size: clamp(15px, 1.3vw, 17px); color: var(--accent-ink); }
.incl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; margin: clamp(24px, 3vw, 34px) 0; }
.incl div { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--mut); }
.incl svg { width: 13px; height: 13px; margin-top: 5px; flex-shrink: 0; }
.incl path { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* the comparison */
.matrix { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.matrix th, .matrix td { text-align: center; padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.matrix thead th { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); font-weight: 400; border-bottom-color: var(--line2); }
.matrix thead th.us { color: var(--accent-ink); background: var(--accent-dim); }
.matrix td:first-child, .matrix th:first-child { padding-left: 0; text-align: left; width: 36%; color: var(--ink); }
.matrix th:not(:first-child), .matrix td:not(:first-child) { width: 16%; }
.matrix td { color: var(--mut); }
.matrix col.us, .matrix td.us { background: var(--accent-dim); }
.matrix td.us { color: var(--ink); }
.matrix .y { color: var(--accent-ink); } .matrix .n { color: var(--faint); }
.mwrap { overflow-x: auto; }

/* questions */
.qa { border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; font-size: clamp(16px, 1.4vw, 18px); font-weight: 500; letter-spacing: -.018em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { font-style: normal; color: var(--mut); font-size: 20px; line-height: 1; transition: transform .2s ease; }
.qa details[open] summary i { transform: rotate(45deg); }
.qa p { color: var(--mut); font-size: 15px; margin: 0 0 22px; max-width: 74ch; }

/* the closing band every sub-page ends on */
.end { padding: clamp(72px, 10vw, 150px) 0 clamp(80px, 11vw, 170px); margin-top: clamp(24px, 4vw, 64px); text-align: center; }
.end .h2 { max-width: 18ch; margin: 0 auto; font-size: clamp(30px, 4.4vw, 62px); }
.end .lede { max-width: 560px; margin: 20px auto 0; }
.end .acts { justify-content: center; margin-top: clamp(24px, 3vw, 38px); }

@media (max-width: 900px) {
  .feat-say { grid-template-columns: 1fr; gap: 16px; }
  .feat-say .h2 { max-width: none; }
  .grid3, .grid2 { grid-template-columns: 1fr; border-top: none; }
  .cellx { padding: 24px 0 !important; border-top: 1px solid var(--line); border-left: none !important; }
  .rowx { grid-template-columns: 1fr; gap: 10px; }
  .rowx .n { padding-top: 0; }
  .incl { grid-template-columns: 1fr; }
  .matrix { min-width: 620px; }
  .page-hero .h1 { max-width: none; }
}

/* ─────────────────────────────────────────────────────────────
   The bento
   A sub-page is a grid you can scan in two screens, not a stack of
   full-width sections. One bordered plate, cells inside it, each
   carrying a claim and a window onto the surface that proves it.
   ───────────────────────────────────────────────────────────── */

.bento { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.brow { display: grid; grid-template-columns: 1fr; }
.brow.two { grid-template-columns: 1fr 1fr; }
.brow + .brow { border-top: 1px solid var(--line); }
.brow.two > .bcell + .bcell { border-left: 1px solid var(--line); }

.bcell { padding: clamp(26px, 3.2vw, 44px) clamp(24px, 3vw, 44px) 0; min-width: 0; display: flex; flex-direction: column; }
.bcell h3 { font-size: clamp(20px, 2.1vw, 28px); font-weight: 500; letter-spacing: -.024em; line-height: 1.15; margin-bottom: 10px; max-width: 22ch; }
.bcell p { color: var(--mut); font-size: 15px; margin: 0; max-width: 56ch; }

/* the window: a cropped view of a real surface, dissolving downward */
.bwell {
  margin-top: clamp(22px, 2.6vw, 34px);
  height: clamp(180px, 19vw, 268px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 7px 7px 0 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.bwell img { width: 100%; height: auto; display: block; border: none; border-radius: 0; }
.bwell.tall { height: clamp(220px, 24vw, 330px); }

@media (max-width: 900px) {
  .brow.two { grid-template-columns: 1fr; }
  .brow.two > .bcell + .bcell { border-left: none; border-top: 1px solid var(--line); }
}

/* ── product menu ────────────────────────────────────────── */
.ndrop { position: relative; }
.ndrop > button {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 14.5px; color: var(--mut);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.ndrop > button:hover, .ndrop.open > button { color: var(--ink); }
.ndrop-menu {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  display: none; flex-direction: column; min-width: 190px; padding: 6px;
  background: var(--card); border: 1px solid var(--line2); border-radius: 6px;
  box-shadow: 0 24px 48px -20px rgba(0,0,0,.7);
}
.ndrop.open .ndrop-menu { display: flex; }
.ndrop-menu a { padding: 9px 12px; border-radius: 4px; font-size: 14.5px; color: var(--mut); white-space: nowrap; }
.ndrop-menu a:hover { background: var(--accent-dim); color: var(--ink); }
.ndrop-menu a span { display: block; font-size: 12.5px; color: var(--faint); margin-top: 2px; }

/* the ask panel: a small complete exchange, not a full-height capture */
.bwell.ask{height:clamp(214px,23.5vw,322px);
  -webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 86%,transparent 100%)}
.bcell .bwell{margin-top:auto}
.bcell>p{margin-bottom:clamp(20px,2.4vw,30px)}
/* a full-width bento row carries a larger head than a half cell */
.brow:not(.two) > .bcell h3{font-size:clamp(23px,2.6vw,34px);max-width:26ch}
.brow.three{grid-template-columns:repeat(3,1fr)}
.brow.three > .bcell + .bcell{border-left:1px solid var(--line)}
.bcell.note{padding-bottom:clamp(26px,3.2vw,44px)}
.bcell.note .lbl{margin-bottom:10px}
.bcell.note p{font-size:14px;max-width:44ch}
@media (max-width:900px){
  .brow.three{grid-template-columns:1fr}
  .brow.three > .bcell + .bcell{border-left:none;border-top:1px solid var(--line)}
}

/* mobile menu sheet, built from the desktop nav at first open */
.msheet{position:fixed;left:0;right:0;top:70px;z-index:59;display:none;
  background:var(--bg);border-bottom:1px solid var(--line);
  padding:8px var(--gut) calc(18px + env(safe-area-inset-bottom));
  max-height:calc(100dvh - 70px);overflow:auto}
.msheet.open{display:block}
.msheet .mgrp{font:500 11px/1 var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  letter-spacing:.11em;text-transform:uppercase;color:var(--faint);padding:18px 0 6px}
.msheet a{display:block;padding:11px 0;font-size:17px;color:var(--ink);
  border-bottom:1px solid var(--line)}
.msheet a span{display:block;font-size:13px;color:var(--mut);margin-top:2px}
.msheet a:last-of-type{border-bottom:0}
.burger.open span:first-child{transform:translateY(2.75px) rotate(45deg)}
.burger.open span:last-child{transform:translateY(-2.75px) rotate(-45deg)}
.burger span{transition:transform .18s ease}
body.mlock{overflow:hidden}

/* mobile: the bento goes edge to edge and each window magnifies rather than
   shrinks, so the app stays legible instead of turning into grey texture */
@media (max-width: 900px) {
  .bento { margin-left: calc(var(--gut)*-1); margin-right: calc(var(--gut)*-1);
    border-left: 0; border-right: 0; border-radius: 0; }
  .bcell { padding-left: var(--gut); padding-right: var(--gut);
    padding-bottom: clamp(24px, 5vw, 32px); }
  .bwell, .bwell.tall, .bwell.ask {
    margin-left: 0; margin-right: 0; height: auto;
    border: 1px solid var(--line); border-radius: 7px;
    -webkit-mask-image: none; mask-image: none;
  }
  .bwell img, .bwell.ask img { width: 100%; max-width: 100%; margin-left: 0; border-radius: 6px; }
}

/* mobile header: logo, theme, menu. the demo button lives in the sheet */
@media (max-width: 900px) {
  .top .tbtn { height: 32px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; }
  .top-r { gap: 10px; }
  .burger { border: 0; }
}
.burger { position: relative; }
.burger span { position: absolute; top: 50%; left: 50%; width: 15px; height: 1.5px;
  margin: -.75px 0 0 -7.5px; background: var(--ink); transition: transform .18s ease; }
.burger span:first-child { transform: translateY(-2.5px); }
.burger span:last-child  { transform: translateY(2.5px); }
.burger.open span:first-child { transform: rotate(45deg); }
.burger.open span:last-child  { transform: rotate(-45deg); }

/* ── reading pages ────────────────────────────────────────────
   Trust, About and Careers carry no screenshots, so the structure
   has to do the work: a heading that holds its place on the left
   while a scannable list moves past it on the right.
   ───────────────────────────────────────────────────────────── */
.sec2 { display: grid; grid-template-columns: minmax(0, 320px) 1fr;
  gap: clamp(26px, 5vw, 100px); align-items: start; }
.sec2 > .side { position: sticky; top: 92px; }
.sec2 > .side .h2 { font-size: clamp(23px, 2.4vw, 34px); line-height: 1.1; max-width: none; }
.sec2 > .side .lede { margin-top: 15px; max-width: 32ch; font-size: 14.5px; }

/* name on the left, one paragraph on the right, hairline between */
.spec { border-top: 1px solid var(--line); }
.spec > div { display: grid; grid-template-columns: minmax(0, 200px) 1fr;
  gap: clamp(14px, 2.2vw, 40px); padding: clamp(20px, 2.3vw, 28px) 0;
  border-bottom: 1px solid var(--line); align-items: start; }
.spec .k { font-size: 15.5px; font-weight: 500; letter-spacing: -.014em; color: var(--ink); }
.spec p { color: var(--mut); font-size: 15px; line-height: 1.58; margin: 0; max-width: 66ch; }

/* the spec sheet: short facts, four across, nothing to read twice */
.kv { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.kv > div { padding: clamp(17px, 2vw, 24px) clamp(16px, 2vw, 30px); border-bottom: 1px solid var(--line); }
.kv > div:nth-child(4n+1) { padding-left: 0; }
.kv > div:nth-child(4n) { padding-right: 0; }
.kv > div:not(:nth-child(4n+1)) { border-left: 1px solid var(--line); }
.kv .k { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 9px; }
.kv .v { font-size: 15px; color: var(--ink); letter-spacing: -.012em; line-height: 1.4; }

/* the chain: one rail, one dot per step, no boxes */
.chain > div { position: relative; padding: 0 0 clamp(24px, 2.8vw, 36px) 40px;
  display: grid; grid-template-columns: minmax(0, 170px) 1fr;
  gap: clamp(14px, 2.2vw, 40px); align-items: start; }
.chain > div::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: -4px;
  width: 1px; background: var(--line2); }
.chain > div:last-child { padding-bottom: 0; }
.chain > div:last-child::before { display: none; }
.chain > div::after { content: ""; position: absolute; left: 4px; top: 5px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.chain > div:last-child::after { background: var(--accent); }
.chain .k { font-size: 15.5px; font-weight: 500; letter-spacing: -.014em; color: var(--ink); }
.chain p { color: var(--mut); font-size: 15px; line-height: 1.58; margin: 0; max-width: 66ch; }

/* prose gets a real measure and a bigger size than the rest of the site */
.prose { max-width: 62ch; }
.prose p { color: var(--mut); font-size: clamp(16.5px, 1.35vw, 19px); line-height: 1.62; }
.prose p + p { margin-top: 1.1em; }
.prose b { color: var(--ink); font-weight: 500; }

@media (max-width: 900px) {
  .sec2 { grid-template-columns: 1fr; gap: clamp(22px, 5vw, 32px); }
  .sec2 > .side { position: static; }
  .sec2 > .side .h2, .sec2 > .side .lede { max-width: none; }
  .spec > div, .chain > div { grid-template-columns: 1fr; gap: 8px; }
  .kv { grid-template-columns: repeat(2, 1fr); }
  .card .kv > div:nth-last-child(-n+4) { border-bottom: 1px solid var(--line); }
  .card .kv > div:nth-last-child(-n+2) { border-bottom: 0; }
  .kv > div { padding-left: 0; padding-right: clamp(16px, 4vw, 30px); }
  .kv > div:nth-child(even) { padding-left: clamp(16px, 4vw, 30px); padding-right: 0;
    border-left: 1px solid var(--line); }
  .kv > div:not(:nth-child(4n+1)):nth-child(odd) { border-left: none; }
}

/* ── the three figures ────────────────────────────────────────
   One isometric plane, three behaviours. Each loop draws the number
   printed beneath it: what leaves, what is never opened, what decays.
   ───────────────────────────────────────────────────────────── */
.fga { width: 100%; height: auto; display: block; overflow: visible; }
.fg-grid { stroke-dasharray: 1 5; opacity: .55; }
.fg-tick { stroke-width: 1.4; }

@media (prefers-reduced-motion: no-preference) {
  .fg-go    { animation: fg-go    6s calc(var(--i) * .13s) infinite ease-in-out; }
  .fg-tick  { animation: fg-tick  6s calc(var(--i) * .16s) infinite ease-in-out; }
  .fg-open  { animation: fg-open  6s calc(var(--i) * .3s)  infinite ease-in-out; }
  .fg-decay { animation: fg-decay 6s calc(var(--i) * .14s) infinite ease-in-out; }
  .fg-late  { animation: fg-late  6s infinite ease-in-out; }
}
/* the leavers hold, lift off the plane, and are back for the next pass */
@keyframes fg-go {
  0%, 44%   { transform: translate(0, 0);        opacity: 1; stroke: var(--fig-solid); }
  70%       { transform: translate(15px, -13px); opacity: 0; stroke: var(--accent); }
  71%, 86%  { transform: translate(0, 0);        opacity: 0; stroke: var(--fig-solid); }
  100%      { transform: translate(0, 0);        opacity: 1; stroke: var(--fig-solid); }
}
/* six are examined: each tick draws itself, one after another */
.fg-tick { stroke-dasharray: 15; }
@keyframes fg-tick {
  0%, 6%   { stroke-dashoffset: 15; }
  30%, 84% { stroke-dashoffset: 0; }
  95%,100% { stroke-dashoffset: 15; }
}
/* four are never opened, so they sit there unresolved */
@keyframes fg-open {
  0%, 100% { opacity: 1; }
  50%      { opacity: .38; }
}
/* the record decays day by day, left to right, then the window restarts */
@keyframes fg-decay {
  0%, 46%  { opacity: 1; }
  72%, 88% { opacity: 0; }
  100%     { opacity: 1; }
}
/* containment arrives after there is nothing left to look at */
@keyframes fg-late {
  0%, 56%  { opacity: 0; }
  74%, 92% { opacity: 1; }
  100%     { opacity: 0; }
}

/* a centred block on desktop */
.mid { text-align: center; max-width: 820px; margin: 0 auto; }

/* ── mobile ───────────────────────────────────────────────────
   Centred paragraphs are hard work on a narrow screen, so on a phone
   every block that centres on desktop aligns left with everything
   else, and the display sizes come down to fit the column.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-in, .turn, .end, .mid { text-align: left; }
  .hero-in > *, .turn .wrap > *, .end .wrap > *, .mid > * {
    margin-left: 0 !important; margin-right: 0 !important; max-width: none !important;
  }
  .hero .acts, .end .acts, .turn .acts { justify-content: flex-start; }
  .end .h2, .turn .h2 { margin-left: 0; max-width: none; }
  .end .lede { margin-left: 0; max-width: none; }

  /* the display sizes, sized to the column rather than to a big screen */
  .h1 { font-size: clamp(30px, 8.4vw, 44px); line-height: 1.06; }
  .h2 { font-size: clamp(24px, 6.6vw, 34px); }
  .lead-lg { font-size: clamp(18px, 4.8vw, 22px); }

  /* the hero stops being a screen and a half of stacked centred type */
  .hero { padding-top: 96px; }
  .hero .acts, .hero .mono-note { display: none; }
  .hero-in .lead-lg { margin-top: 14px !important; }
  .hero-in .lede { margin-top: 12px !important; }
  .hero-in .acts { margin-top: 24px !important; }
  .hero-in .mono-note { margin-top: 18px !important; }
  .acts { gap: 10px; }
  .btn { height: 48px; }

  /* the figures get the width of the column instead of a fixed 160px.
     the box grows to the drawing rather than the drawing overflowing it. */
  .fig-art { height: auto; padding: 8px 0 18px; }
  .fig-art svg { width: min(268px, 82%); }
}

@media (max-width: 900px) {
  /* the comparison scrolls sideways, so it has to look like it does */
  .mwrap { -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 86%, transparent 100%);
            mask-image: linear-gradient(to right, #000 86%, transparent 100%); }
  .matrix caption::after { content: " \00b7\00a0swipe to compare"; color: var(--faint); }
}
.end-more { margin-top: clamp(20px, 2.4vw, 28px); color: var(--mut); }
.end-more:hover { color: var(--ink); }

/* ── provenance: the reason to believe any of the above ────── */
.prov { padding: clamp(28px, 3.4vw, 44px) 0;
  margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.prov .lbl { display: block; margin-bottom: clamp(20px, 2.4vw, 28px); }
.prov-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 52px); }
.prov-row > div { display: flex; flex-direction: column; gap: 6px; }
.prov-row b { font-size: clamp(15px, 1.35vw, 17px); font-weight: 500;
  letter-spacing: -.016em; color: var(--ink); }
.prov-row span { font-size: 14px; line-height: 1.5; color: var(--mut); }
@media (max-width: 900px) {
  .prov-row { grid-template-columns: 1fr 1fr; gap: 22px clamp(18px, 4vw, 30px); }
}
@media (max-width: 520px) { .prov-row { grid-template-columns: 1fr; } }

/* ── integrations ─────────────────────────────────────────────
   Grouped by the question a source answers rather than by vendor,
   and each entry names the signal we read, not the product.
   ───────────────────────────────────────────────────────────── */
.srcs { border-top: 1px solid var(--line); }
.srcgrp { display: grid; grid-template-columns: minmax(0, 300px) 1fr;
  gap: clamp(18px, 3vw, 64px); padding: clamp(26px, 3.2vw, 40px) 0;
  border-bottom: 1px solid var(--line); align-items: start; }
.srcgrp-head h3 { font-size: clamp(18px, 1.7vw, 22px); font-weight: 500;
  letter-spacing: -.02em; line-height: 1.2; display: inline; }
.srcgrp-head .n { font-family: var(--mono); font-size: 12px; color: var(--faint);
  margin-left: 9px; font-variant-numeric: tabular-nums; }
.srcgrp-head p { margin-top: 9px; color: var(--mut); font-size: 14px; max-width: 30ch; }
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px; }
.logo { display: flex; align-items: center; gap: 10px;
  min-height: 58px; padding: 12px 15px; border: 1px solid var(--line);
  border-radius: 5px; background: var(--card); }
.logo svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--ink); opacity: .78; }
.logo span { font-size: 13px; white-space: nowrap; font-weight: 500; letter-spacing: -.012em;
  color: var(--ink); line-height: 1.25; }
.more-src .srcgrp-head h3 { color: var(--mut); }
.logos-note p { color: var(--mut); font-size: 14.5px; line-height: 1.6; max-width: 56ch; }
.logos-note .more { margin-top: 14px; }

/* ── use cases: a person and a situation, three times over ──── */
.ucases { border-top: 1px solid var(--line2); }
.ucase { padding: clamp(34px, 4.4vw, 62px) 0; border-bottom: 1px solid var(--line); }
.uc-top { max-width: 72ch; }
.uc-top .lbl { display: block; margin-bottom: 14px; }
.uc-title { font-size: clamp(23px, 2.9vw, 36px); font-weight: 500;
  letter-spacing: -.026em; line-height: 1.1; max-width: 20ch; }
.uc-lede { margin-top: 16px; color: var(--mut);
  font-size: clamp(16px, 1.35vw, 18.5px); line-height: 1.55; max-width: 58ch; }
.uc-cols { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 44px); margin-top: clamp(26px, 3vw, 40px);
  padding-top: clamp(22px, 2.6vw, 32px); border-top: 1px solid var(--line); }
.uc-k { display: block; margin-bottom: 10px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.uc-cols p { color: var(--mut); font-size: 14.5px; line-height: 1.6; }
.uc-verdict p { color: var(--ink); }
.uc-verdict .uc-k { color: var(--accent-ink); }

@media (max-width: 900px) {
  .srcgrp { grid-template-columns: 1fr; gap: 18px; }
  .srcgrp-head p { max-width: none; }
  .logos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .logo { min-height: 54px; padding: 10px; }
  .uc-title, .uc-lede { max-width: none; }
  .uc-cols { grid-template-columns: 1fr; gap: 22px; }
}

/* ── the three product sections, three shapes ─────────────────
   A: the capture leads at full width and the words sit beneath it.
   B: one bento with the band shown whole and the notes in a row.
   C: two columns, words left, the report right.
   ───────────────────────────────────────────────────────────── */
.bleed { max-width: 1560px; margin: 0 auto; padding: 0 clamp(12px, 2vw, 32px); overflow: clip; }
.under { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: clamp(32px, 4.4vw, 64px); }
.under .h2 { max-width: 19ch; }
.under .lede { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; max-width: 560px; }

.bwell.whole { height: auto; border: 1px solid var(--line); border-radius: 7px;
  -webkit-mask-image: none; mask-image: none; margin-top: 0; }
.form-b .bcell > .more { margin-top: 0; }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 88px); align-items: center; }
.split-t .h2 { max-width: 14ch; }
.split-t .lede { margin-top: clamp(16px, 2vw, 24px); font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.55; max-width: 34ch; }

@media (max-width: 900px) {
  .bleed { padding: 0 var(--gut); }
  .under { grid-template-columns: 1fr; gap: 16px; margin-top: 26px; }
  .under .h2, .split-t .h2, .split-t .lede { max-width: none; }
  .split { grid-template-columns: 1fr; gap: 26px; }
  .bwell.whole { margin-left: 0; margin-right: 0; }
}

/* ── how it works: five steps, each beside the screen it produces ── */
.hiw { display: grid; gap: clamp(64px, 9vw, 150px); }
.hiw-step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 88px); align-items: center; }
.hiw-step:nth-child(even) .hiw-t { order: 2; }
.hiw-step:nth-child(even) .hiw-v { order: 1; }
.hiw-t .lbl { display: block; margin-bottom: 16px; color: var(--accent-ink); }
.hiw-t .h2 { max-width: 12ch; }
.hiw-t .lede { margin-top: clamp(14px, 1.8vw, 22px); font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.55; max-width: 34ch; }
.hiw-t .more { margin-top: 18px; }
.hiw-v .bwell { margin-top: 0; }
.hiw-marks { grid-template-columns: repeat(2, 1fr); }
.hiw-sec { padding-top: clamp(24px, 4vw, 56px); }

/* the boundary, as two lists side by side */
.bound { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px);
  border-top: 1px solid var(--line); padding-top: clamp(26px, 3vw, 40px); }
.bound .lbl { display: block; margin-bottom: 14px; }
.bound ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bound li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.bound li::before { content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--accent); }
.bound .no li { color: var(--mut); }
.bound .no li::before { background: none; border: 1px solid var(--line2); width: 8px; height: 8px; }
.bound-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(36px, 5vw, 64px); padding-top: clamp(22px, 2.6vw, 32px); border-top: 1px solid var(--line); }
.bound-notes .lbl { display: block; margin-bottom: 10px; }
.bound-notes p { color: var(--mut); font-size: 14.5px; line-height: 1.6; }

@media (max-width: 900px) {
  .hiw { gap: clamp(44px, 8vw, 64px); }
  .hiw-step { grid-template-columns: 1fr; gap: 20px; }
  .hiw-step:nth-child(even) .hiw-t { order: 1; }
  .hiw-step:nth-child(even) .hiw-v { order: 2; }
  .hiw-t .h2, .hiw-t .lede { max-width: none; }
  .bound, .bound-notes { grid-template-columns: 1fr; gap: 24px; }
}

/* ─────────────────────────────────────────────────────────────
   The redesign pass
   Archivo for the display face (Geist Mono stays for data), one
   accent carried by a single token so the colour can be switched
   (<html data-accent="signal"> or ?accent=signal tries the neon),
   the integrations ticker, the pricing band, and the lit captures.
   These override the tokens declared at the top of this file.
   ───────────────────────────────────────────────────────────── */

:root {
  --sans: "Archivo", -apple-system, "Segoe UI", sans-serif;

  /* the accent, blue by default because the mark is blue */
  --accent: #4da6ff;
  --accent-ink: #7dbfff;
  --accent-dim: rgba(77, 166, 255, .13);
  --on-accent: #08090a;

  /* the primary button carries the accent, as in the Framer pass */
  --btn-bg: var(--accent);
  --btn-ink: var(--on-accent);
}

/* the alternative: Framer's neon on black. flip the attribute, nothing else. */
[data-accent="signal"] {
  --accent: #c7f36a;
  --accent-ink: #c7f36a;
  --accent-dim: rgba(199, 243, 106, .12);
  --on-accent: #111411;
}
[data-accent="signal"]
/* ── type: Archivo wants more weight and tighter tracking than Geist ── */
body { letter-spacing: -.015em; }
.h1 { font-weight: 600; letter-spacing: -.045em; }
.h2, .turn-h, .end .h2 { font-weight: 600; letter-spacing: -.035em; }
.h3, .bcell h3, .how3 h3 { font-weight: 600; letter-spacing: -.02em; }
.btn, .tbtn { font-weight: 600; }
.fig-n span, .prov-row b, .step .h3 { font-weight: 600; }
.lbl, .mono-note, .src { font-weight: 500; }

/* ── the card: a dark surface in the same room as the captures ──
   Rim, sheen and shadow like a window. One per page, for the block that
   page is about; the accent only on labels and the button. */
.card { position: relative; padding: clamp(28px, 3.4vw, 44px); background: var(--card); border: 1px solid var(--line2); border-radius: 9px;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.85), 0 80px 120px -60px rgba(0,0,0,.7); }
.card::before { content: ""; position: absolute; inset: -18% -8% 12%; z-index: 0; pointer-events: none;
  background: radial-gradient(55% 45% at 50% 22%, rgba(255,255,255,.09), transparent 70%); filter: blur(44px); }
.card::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  background: radial-gradient(70% 55% at 50% -10%, rgba(255,255,255,.12), transparent 70%);
  background-size: 160% 100%; background-position: 50% 0; animation: shine 14s ease-in-out infinite alternate; }
.card > * { position: relative; z-index: 1; }
.card > .lbl { display: block; margin-bottom: 18px; color: var(--accent-ink); }
.card > .kv { border-top: 0; margin-bottom: calc(-1 * clamp(17px, 2vw, 24px)); }
.card .kv > div:nth-last-child(-n+4) { border-bottom: 0; }
.card > .grid3 { border-top: 0; margin: calc(-1 * clamp(24px, 2.6vw, 34px)) 0; }
.uc-verdict.card { padding: clamp(20px, 2.2vw, 28px); border-radius: 7px; }
.uc-verdict.card::after { border-radius: 7px; }
.band { margin-top: clamp(40px, 6vw, 96px); }
.band-card { display: flex; justify-content: space-between; align-items: flex-end; gap: clamp(24px, 4vw, 64px);
  padding: clamp(36px, 5vw, 72px) clamp(24px, 4vw, 64px); }
.band .lbl { display: block; margin-bottom: 20px; color: var(--accent-ink); }
.band .h2 { max-width: 16ch; }
.band .lede { max-width: 560px; margin-top: clamp(14px, 1.8vw, 22px); }

/* ── closing: the Framer line, centred, then the two buttons ── */
.end .lbl { display: block; margin-bottom: 18px; color: var(--accent-ink); }

/* ── steps: the "on" step reads in the accent, keep; the dots follow ── */
.step-k i { border-radius: 1px; }

@media (max-width: 900px) {
  .band-card { flex-direction: column; align-items: stretch; }
  .band .h2 { max-width: none; }
}

/* ── the integrations ticker: one row of every source, drifting ── */
.tick { padding: clamp(28px, 3.4vw, 44px) 0 clamp(24px, 3vw, 40px); margin-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tick .lbl { display: block; text-align: center; margin-bottom: clamp(20px, 2.4vw, 28px); }
.ticker { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ticker-track { display: flex; gap: 12px; width: max-content; animation: ticker 70s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker .logo { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border: 1px solid var(--line);
  border-radius: 5px; background: var(--card); white-space: nowrap; }
.ticker .logo svg { width: 16px; height: 16px; color: var(--ink); opacity: .72; }
.ticker .logo span { font-size: 13px; font-weight: 500; letter-spacing: -.012em; color: var(--mut); }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .ticker-track > .logo:nth-child(n+30) { display: none; } .ticker { mask-image: none; -webkit-mask-image: none; } }

/* ── the screenshots: lit from above, resting on a shadow ─────
   A soft highlight drifts across the top of every capture and the
   window sits on a deep, wide shadow, so the page reads as a lit room
   rather than a stack of flat images. */
.shot::before { inset: -18% -8% 12%; background: radial-gradient(55% 45% at 50% 22%, rgba(255,255,255,.11), transparent 70%); filter: blur(44px); }
.shot img { border-color: var(--line2);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.85), 0 80px 120px -60px rgba(0,0,0,.7); }
.shot::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  background: radial-gradient(70% 55% at 50% -10%, rgba(255,255,255,.14), transparent 70%);
  background-size: 160% 100%; background-position: 50% 0; animation: shine 14s ease-in-out infinite alternate; }
@keyframes shine { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.shot:has(.fade)::after {
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); }
@media (prefers-reduced-motion: reduce) { .shot::after { animation: none; } }

/* the bento windows are lit the same way as the full captures */
.bwell { position: relative; }
.bwell::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 7px 7px 0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  background: radial-gradient(70% 55% at 50% -10%, rgba(255,255,255,.12), transparent 70%);
  background-size: 160% 100%; animation: shine 14s ease-in-out infinite alternate; }
.bwell.whole::after { border-radius: 7px; }
.bcell { position: relative; }
.bcell::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 55%; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 100%, rgba(255,255,255,.05), transparent 70%); filter: blur(30px); }
.bcell > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .bwell::after { animation: none; } }

/* ── the room: one light on the page itself, not only on the captures.
   Linear's ground is flat; ours is a dark room with a single source that
   follows the pointer (nx.js sets --lx/--ly). No pointer, no light: on
   touch the page stays plain. Transform-only, so it costs nothing to run. */
@media (hover: hover) and (pointer: fine) {
  body::before { content: ""; position: fixed; z-index: -1; pointer-events: none;
    top: -65vh; left: -70vw; width: 140vw; height: 130vh;
    background:
      radial-gradient(26% 22% at 50% 50%, rgba(255,255,255,.07), transparent 70%),
      radial-gradient(18% 15% at 56% 54%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%);
    transform: translate3d(var(--lx, 50vw), var(--ly, 24vh), 0);
    transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
}
@media (prefers-reduced-motion: reduce) { body::before { transition: none; } .card::after { animation: none; } }

/* ── the ledger: three exhibits laid across the table, not three columns.
   A mono number on the left, the evidence drawn wide in the middle, the
   caption on the right. Each figure plays once when the section lights. */
.ledger { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) minmax(220px, 300px); gap: clamp(24px, 4vw, 72px);
  align-items: center; padding: clamp(28px, 3.4vw, 44px) 0; border-bottom: 1px solid var(--line); }
.row-n .lbl { display: block; margin-bottom: 14px; }
.row-n b { display: block; font-family: var(--mono); font-weight: 500; font-size: clamp(36px, 3.6vw, 52px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.row-n > span:last-child { display: block; margin-top: 10px; font-size: 15px; font-weight: 500; letter-spacing: -.016em; color: var(--ink); }
.row-fig { position: relative; }
.row-fig::before { content: ""; position: absolute; inset: -30% -6%; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.05), transparent 70%); filter: blur(30px); }
.row-fig > * { position: relative; z-index: 1; }
.row-t p { color: var(--mut); font-size: 14.5px; margin: 0; }
.row-t .src { margin-top: 10px; }
@media (max-width: 900px) {
  .row { grid-template-columns: 1fr; gap: 20px; padding: 28px 0; }
  .row-n b { font-size: 40px; }
}

/* The exhibits draw in white and grey; the one colour is a muted red,
   and it appears only at the last beat of each loop, when the thing is
   lost. Every element runs the same cycle, offset by its own delay, so
   the choreography repeats identically each time round. The resting
   style of each element is its first keyframe, so the delay shows the
   start of the story, not a hole. */
.ledger { --loss: color-mix(in srgb, var(--red) 82%, var(--bg)); --slot: rgba(255,255,255,.1); --ease: cubic-bezier(.2,.7,.2,1); }
.row-n b { color: var(--ink); }

/* exhibit A: a hundred people; 76 fill in, hold, and then are gone */
.fga1 circle { fill: var(--slot); transform-box: fill-box; transform-origin: center; }
.fga1 .l { transform: scale(.55); }
.in .fga1 .l { animation: dotloop 8s var(--ease) infinite; animation-delay: calc(var(--r) * .4s + var(--i) * 22ms); }
@keyframes dotloop {
  0%   { fill: var(--slot); transform: scale(.55); opacity: 1; }
  5%   { fill: var(--ink);  transform: scale(1);   opacity: 1; }
  58%  { fill: var(--ink);  transform: scale(1);   opacity: 1; }
  62%  { fill: var(--loss); transform: scale(1);   opacity: 1; }
  70%  { fill: var(--loss); transform: scale(.3);  opacity: 0; }
  90%  { fill: var(--slot); transform: scale(.55); opacity: 0; }
  100% { fill: var(--slot); transform: scale(.55); opacity: 1; }
}

/* exhibit B: ten alerts arrive; six get read, four are never opened, and stay that way */
.fga2 .a { opacity: 0; transform: translateX(-10px); }
.fga2 .k { fill: rgba(255,255,255,.3); }
.fga2 .b { fill: rgba(255,255,255,.14); }
.fga2 .m { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.4); }
.fga2 .mo { stroke: rgba(255,255,255,.45); stroke-width: 1.4; }
.fga2 .mx { stroke: var(--loss); }
.in .fga2 .a  { animation: rowloop 8s var(--ease) infinite; animation-delay: calc(var(--r) * .4s + var(--i) * 110ms); }
.in .fga2 .mt { animation: markloop 8s var(--ease) infinite; animation-delay: calc(var(--r) * .4s + 1.3s + var(--i) * 110ms); }
.in .fga2 .mo { animation: openloop 8s var(--ease) infinite; animation-delay: calc(var(--r) * .4s + 1.3s + var(--i) * 110ms); }
.in .fga2 .mx { animation: xloop 8s var(--ease) infinite; animation-delay: calc(var(--r) * .4s + 1.3s + var(--i) * 110ms); }
.in .fga2 .o .b { animation: barloss 8s linear infinite; animation-delay: calc(var(--r) * .4s + 1.3s + var(--i) * 110ms); }
.in .fga2 .o .k { animation: keyloss 8s linear infinite; animation-delay: calc(var(--r) * .4s + 1.3s + var(--i) * 110ms); }
@keyframes rowloop  { 0% { opacity: 0; transform: translateX(-10px); } 5% { opacity: 1; transform: none; } 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateX(-10px); } }
@keyframes markloop { 0%, 3% { opacity: 0; transform: scale(.4); } 7% { opacity: 1; transform: none; } 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes openloop { 0%, 3% { opacity: 0; transform: scale(.4); } 7% { opacity: 1; transform: none; } 60% { opacity: 1; transform: none; } 64%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes xloop    { 0%, 62% { opacity: 0; transform: scale(.4); } 66% { opacity: 1; transform: none; } 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes barloss  { 0%, 60% { fill: rgba(255,255,255,.14); } 66%, 100% { fill: color-mix(in srgb, var(--loss) 45%, transparent); } }
@keyframes keyloss  { 0%, 60% { fill: rgba(255,255,255,.3); } 66%, 100% { fill: var(--loss); } }

/* exhibit C: the days count on while the record thins out from the oldest end;
   by the time anything is contained, the track is empty and outlined in red */
.fga3 .ghost { fill: rgba(255,255,255,.05); stroke: transparent; stroke-width: 1; }
.fga3 .bar { fill: rgba(255,255,255,.32); transform-box: fill-box; transform-origin: right; transform: scaleX(1); }
.fga3 .ax { stroke: rgba(255,255,255,.18); stroke-width: 1; }
.fga3 .tk { stroke: rgba(255,255,255,.35); stroke-width: 1; }
.fga3 .cur line { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; }
.fga3 .cur circle { fill: var(--ink); }
.fga3 .cur { transform: translateX(0); opacity: 0; }
.in .fga3 .cur   { animation: curloop 8s linear infinite; animation-delay: calc(var(--r) * .4s + .2s); }
.in .fga3 .bar   { animation: barloop 8s linear infinite; animation-delay: calc(var(--r) * .4s + .2s); }
.in .fga3 .ghost { animation: ghostloop 8s linear infinite; animation-delay: calc(var(--r) * .4s + .2s); }
@keyframes curloop {
  0% { transform: translateX(0); opacity: 0; } 3% { opacity: 1; }
  60% { transform: translateX(600px); opacity: 1; } 93% { transform: translateX(600px); opacity: 1; }
  97%, 100% { transform: translateX(600px); opacity: 0; } }
@keyframes barloop {
  0%, 27% { transform: scaleX(1); fill: rgba(255,255,255,.32); opacity: 1; }
  54% { transform: scaleX(.12); fill: rgba(255,255,255,.32); opacity: 1; }
  60% { transform: scaleX(.03); fill: var(--loss); opacity: 1; }
  64% { transform: scaleX(0); fill: var(--loss); opacity: 1; }
  96% { transform: scaleX(0); fill: var(--loss); opacity: 0; }
  100% { transform: scaleX(1); fill: rgba(255,255,255,.32); opacity: 0; } }
@keyframes ghostloop { 0%, 60% { stroke: transparent; } 66% { stroke: var(--loss); } 92% { stroke: var(--loss); } 97%, 100% { stroke: transparent; } }
.axis { position: relative; height: 34px; margin-top: 6px; line-height: 1.55; font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; color: var(--dim); }
.axis span { position: absolute; top: 0; white-space: nowrap; }
/* no motion: each exhibit rests at the middle of its story */
@media (prefers-reduced-motion: reduce) {
  .fga1 .l, .fga2 *, .fga3 * { animation: none !important; }
  .fga1 .l { fill: var(--ink); transform: none; }
  .fga2 .a, .fga2 .mt, .fga2 .mo { opacity: 1; transform: none; }
  .fga3 .bar { transform: scaleX(.25); }
  .fga3 .cur { transform: translateX(269px); opacity: 1; }
}

/* ── footer: one row ── */
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 14px 32px; flex-wrap: wrap; font-size: 13.5px; }
.foot-brand { color: var(--dim); font-size: 13.5px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-links a, .foot-mail { color: var(--mut); }
.foot-links a:hover, .foot-mail:hover { color: var(--ink); }
@media (max-width: 900px) { .foot-row { flex-direction: column; align-items: flex-start; } }

/* ── the two dropdowns say so: a caret, and they open on hover ── */
.ndrop > button::after { content: ""; width: 5px; height: 5px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .6; transition: transform .15s ease, margin-top .15s ease; }
.ndrop.open > button::after { transform: rotate(225deg); margin-top: 3px; }
.ndrop::before { content: ""; position: absolute; left: -16px; right: -16px; top: 100%; height: 16px; }
.ndrop:hover > button, .ndrop:has(:focus-visible) > button { color: var(--ink); }
.ndrop:hover > button::after, .ndrop:has(:focus-visible) > button::after { transform: rotate(225deg); margin-top: 3px; }
.ndrop:hover > .ndrop-menu, .ndrop:has(:focus-visible) > .ndrop-menu { display: flex; }

/* ── portal: page captures zoomed to the scale of the ask panel ── */
.bwell.zoom { height: clamp(214px, 23.5vw, 322px);
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); }
.bwell.zoom img { width: 160%; }
@media (max-width: 900px) { .bwell.zoom { height: auto; } .bwell.zoom img { width: 100%; } }

/* a three-across glance, two rows of three */
.kv.three { grid-template-columns: repeat(3, 1fr); }
.kv.three > div { padding-left: clamp(16px, 2vw, 30px); padding-right: clamp(16px, 2vw, 30px); border-left: 1px solid var(--line); }
.kv.three > div:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.kv.three > div:nth-child(3n) { padding-right: 0; }
.card .kv.three > div { border-bottom: 1px solid var(--line); }
.card .kv.three > div:nth-last-child(-n+3) { border-bottom: 0; }
@media (max-width: 900px) {
  .kv.three { grid-template-columns: 1fr; }
  .kv.three > div { padding-left: 0; padding-right: 0; border-left: 0; }
  .card .kv.three > div { border-bottom: 1px solid var(--line); }
  .card .kv.three > div:last-child { border-bottom: 0; }
}

/* ── the mobile sheet: the whole screen under the header, one column,
   no rules, the two actions straight after the list ── */
.msheet { position: fixed; top: 70px; left: 0; right: 0; height: calc(100vh - 70px); height: calc(100dvh - 70px); z-index: 59; display: none; overflow: auto; -webkit-overflow-scrolling: touch;
  background: var(--bg); border: 0; padding: 4px var(--gut) calc(48px + env(safe-area-inset-bottom)); box-shadow: none; max-height: none; }
.msheet.open { display: block; }
.msheet .mgrp { padding: 26px 0 8px; color: var(--dim); }
.msheet .mlist { display: block; }
.msheet .mlist a { display: block; padding: 9px 0; font-size: 22px; font-weight: 500; letter-spacing: -.024em; line-height: 1.2; color: var(--ink); border: 0; }
.msheet .mlist a span { display: none; }
body.mlock { overflow: hidden; }
@media (max-width: 900px) {
  .card > .grid3 .cellx:first-child { border-top: 0; }
  .page-hero[style*="border-bottom:none"] { padding-bottom: clamp(56px, 12vw, 96px); }
}

/* a tall capture, clipped: the page shows the top and lets the rest fall away */


/* ── the play: the portal rebuilt in markup, three screens that swap ──────
   Dashboard, the person's record, the signed report. The sidebar stays;
   the main pane changes. Tokens are the portal's own dark theme. */
.play { --p-bg: oklch(13.5% .004 264); --p-card: oklch(16.8% .004 264); --p-pop: oklch(20.5% .005 264); --p-line: oklch(23.5% .005 264);
  --p-fg: oklch(92% .004 264); --p-mut: oklch(62% .009 264); --p-dim: oklch(48% .008 264); --p-acc: oklch(60% .17 250);
  --p-red: oklch(65.5% .18 18); --p-amb: oklch(75.5% .115 82); --p-grn: oklch(72.5% .15 162); --e: cubic-bezier(.2,.7,.2,1);
  position: relative; display: grid; grid-template-columns: 196px 1fr; height: clamp(520px, 50vw, 660px); overflow: hidden;
  background: var(--p-bg); color: var(--p-fg); border: 1px solid var(--line2); border-radius: 9px;
  font-family: "Geist", var(--sans); font-size: 12.5px; line-height: 1.45; letter-spacing: 0; text-align: left;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.85), 0 80px 120px -60px rgba(0,0,0,.7); }
.play * { box-sizing: border-box; }
.play svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.play .mono { font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; }
.play .k { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--p-dim); }
.play .dim { color: var(--p-dim); }
.play .lnk { color: var(--p-acc); }
.play .pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 11.5px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; }
.play .pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.play .pill.amb { color: var(--p-amb); border-color: color-mix(in oklch, var(--p-amb) 45%, transparent); background: color-mix(in oklch, var(--p-amb) 10%, transparent); }
.play .pill.red { color: var(--p-red); border-color: color-mix(in oklch, var(--p-red) 45%, transparent); background: color-mix(in oklch, var(--p-red) 10%, transparent); }
.play .pill.blue { color: var(--p-acc); border-color: color-mix(in oklch, var(--p-acc) 45%, transparent); background: color-mix(in oklch, var(--p-acc) 10%, transparent); }
.play .p-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--p-line); border-radius: 6px; background: var(--p-pop); font-size: 12px; font-weight: 500; white-space: nowrap; }
.play .p-card { background: var(--p-card); border: 1px solid var(--p-line); border-radius: 8px; }

/* sidebar */
.p-side { border-right: 1px solid var(--p-line); padding: 14px 10px; background: var(--p-bg); }
.p-brand { display: flex; align-items: center; gap: 8px; padding: 2px 8px 18px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--p-mut); }
.p-brand img { width: 20px; height: 22px; display: block; }
.p-grp { display: block; padding: 12px 8px 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--p-dim); }
.p-nav a { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 8px; border-radius: 6px; color: var(--p-mut); font-size: 12.5px; transition: background .3s var(--e), color .3s var(--e); }
.p-nav a svg { width: 14px; height: 14px; opacity: .8; }
.play[data-step="1"] .p-nav a[data-k="dash"], .play[data-step="2"] .p-nav a[data-k="people"], .play[data-step="3"] .p-nav a[data-k="rep"],
.play:not([data-step]) .p-nav a[data-k="dash"] { background: var(--p-pop); color: var(--p-fg); }

/* the main pane and the three screens */
.p-main { position: relative; min-width: 0; }
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .5s var(--e), transform .65s var(--e); }
.scr.on { opacity: 1; transform: none; z-index: 2; }
.scr.was { opacity: 0; transform: translateY(-10px) scale(.992); }
.play:not([data-step]) .scr-1 { opacity: 1; transform: none; }
.p-top { display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 22px; border-bottom: 1px solid var(--p-line); flex: none; }
.p-top b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.p-top > div > span { font-size: 12px; color: var(--p-mut); }
.p-tools { display: flex; align-items: center; gap: 10px; }
.p-bell { position: relative; width: 28px; height: 28px; border-radius: 6px; }
.p-bell::before { content: ""; position: absolute; left: 9px; top: 7px; width: 10px; height: 11px; border: 1.4px solid var(--p-mut); border-radius: 5px 5px 2px 2px; }
.p-bell i { position: absolute; top: -4px; right: -3px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--p-red); color: #fff; font-style: normal; font-size: 9px; font-weight: 600; display: grid; place-items: center; }
.p-sq { width: 28px; height: 28px; border: 1px solid var(--p-line); border-radius: 6px; background: var(--p-pop); display: grid; place-items: center; color: var(--p-mut); }
.p-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; flex: 1; min-height: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent); mask-image: linear-gradient(to bottom, #000 88%, transparent); }
.p-lbl { display: flex; align-items: baseline; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--p-mut); margin-top: 4px; }
.p-lbl span { font-family: var(--sans); font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--p-dim); }
.p-lbl em { margin-left: auto; font-style: normal; font-family: var(--sans); font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--p-red); }
.p-lbl em.dim { color: var(--p-dim); }
.p-back { display: flex; align-items: center; gap: 6px; color: var(--p-dim); font-size: 12px; }

/* elements arrive in order when a screen lights */
.scr.on .a { animation: pin .55s var(--e) both; animation-delay: calc(var(--i) * 75ms + .12s); }
@keyframes pin { from { opacity: 0; transform: translateY(8px); } }

/* screen 1: the dashboard */
.p-hello { display: flex; align-items: flex-start; justify-content: space-between; }
.p-hello b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.p-hello > div > span { font-size: 12px; color: var(--p-mut); }
.p-ask { background: var(--p-card); border: 1px solid var(--p-line); border-radius: 8px; padding: 10px 12px; }
.p-askin { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px solid var(--p-line); border-radius: 6px; color: var(--p-dim); background: var(--p-bg); }
.p-askin em { margin-left: auto; font-style: normal; }
.p-chips { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.p-chips span { height: 22px; display: inline-flex; align-items: center; padding: 0 9px; border: 1px solid var(--p-line); border-radius: 11px; font-size: 11px; color: var(--p-mut); }
.p-covrow { display: flex; align-items: center; gap: 18px; padding: 11px 12px; white-space: nowrap; }
.p-srcs { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--p-line); font-size: 11.5px; color: var(--p-mut); }
.p-srcs .k { display: inline; }
.p-srcs .warn { color: var(--p-amb); }
.p-srcs .r { margin-left: auto; }
.p-alert { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid color-mix(in oklch, var(--p-red) 30%, transparent); border-radius: 8px;
  background: color-mix(in oklch, var(--p-red) 7%, var(--p-card)); }
.p-alert b { display: block; font-size: 13px; font-weight: 600; }
.p-alert > div > span { font-size: 11.5px; color: var(--p-mut); }
.p-alert em { margin-left: auto; color: var(--p-dim); font-style: normal; font-size: 16px; }
.scr-1.on .p-alert { animation: pin .55s var(--e) both, ring 3.2s var(--e) both; animation-delay: calc(5 * 75ms + .12s), 0s; }
@keyframes ring { 0%, 50% { box-shadow: 0 0 0 0 transparent; } 62%, 100% { box-shadow: 0 0 0 1px var(--p-acc), 0 0 0 5px color-mix(in oklch, var(--p-acc) 22%, transparent); } }
.p-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.p-tiles > div { background: var(--p-card); border: 1px solid var(--p-line); border-radius: 8px; padding: 12px 12px 10px; }
.p-tiles span { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--p-dim); }
.p-tiles b { display: block; font-size: 20px; font-weight: 500; letter-spacing: -.02em; margin: 6px 0 8px; }
.p-tiles small { display: block; font-size: 11px; color: var(--p-mut); line-height: 1.35; }

/* screen 2: the person */
.p-person { padding: 14px 16px; }
.p-who { display: flex; align-items: baseline; gap: 12px; }
.p-who b { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.p-who span { font-size: 12.5px; color: var(--p-mut); }
.p-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; color: var(--p-mut); }
.p-meta b { color: var(--p-fg); font-weight: 500; }
.p-ids { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--p-line); }
.p-ids .k { display: inline; }
.chip { white-space: nowrap; height: 20px; display: inline-flex; align-items: center; padding: 0 8px; border: 1px solid var(--p-line); border-radius: 10px; font-family: var(--mono); font-size: 10.5px; color: var(--p-mut); }
.p-rev { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: start; padding: 12px 14px; }
.p-rev + .p-rev { border-top: 1px solid var(--p-line); }
.p-rev .d { color: var(--p-dim); padding-top: 2px; }
.p-rev b { display: block; font-size: 12.5px; font-weight: 600; }
.p-rev > div > span { display: block; font-size: 11.5px; color: var(--p-mut); margin-top: 2px; }
.p-rev em { display: flex; align-items: center; gap: 5px; font-style: normal; font-size: 11.5px; margin-top: 6px; }
.p-rev.hot { background: color-mix(in oklch, var(--p-red) 4%, transparent); border-radius: 8px 8px 0 0; }
.scr-2.on .p-rev.hot { animation: ring 3.6s var(--e) both; }
.scr-2.on .esc { animation: pin .55s var(--e) both, pulse 1.2s var(--e) both; animation-delay: 1.2s, 1.2s; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--p-red) 45%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
.p-chart { padding: 12px 14px 10px; }
.p-bars { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 96px; }
.p-bars .bar { flex: 1; height: calc(var(--h) * 100%); background: var(--p-acc); border-radius: 1px 1px 0 0; opacity: .85; transform-origin: bottom; }
.p-bars .bar:nth-child(-n+53) { opacity: .5; }
.scr-2.on .bar { animation: grow .6s var(--e) both; animation-delay: calc(.35s + var(--i) * 7ms); }
@keyframes grow { from { transform: scaleY(0); } }
.p-split { position: absolute; left: 44%; top: 0; bottom: 0; border-left: 1px solid var(--p-line); }
.p-split em { position: absolute; top: -2px; font-family: var(--mono); font-size: 9.5px; font-style: normal; color: var(--p-dim); white-space: nowrap; }
.p-split em:first-child { right: 6px; } .p-split em:last-child { left: 6px; }
.p-dots { position: absolute; right: 2%; bottom: -14px; display: flex; gap: 22px; }
.p-dots i { width: 7px; height: 7px; border-radius: 50%; }
.p-dots .y, .p-legend .y { background: var(--p-amb); } .p-dots .r, .p-legend .r { background: var(--p-red); }
.p-months { display: flex; justify-content: space-between; margin-top: 18px; color: var(--p-dim); font-size: 10px; }
.p-legend { display: flex; gap: 14px; margin-top: 8px; font-size: 11px; color: var(--p-mut); }
.p-legend span { display: flex; align-items: center; gap: 5px; }
.p-legend i { width: 7px; height: 7px; border-radius: 2px; }
.p-legend .b { background: var(--p-acc); } .p-legend .g { background: var(--p-dim); width: 10px; height: 2px; }
.p-legend em { margin-left: auto; font-style: normal; color: var(--p-dim); }
.p-stat { color: var(--p-mut); } .p-stat b { color: var(--p-fg); font-weight: 500; }

/* screen 3: the report */
.p-report { overflow: hidden; }
.p-rhead { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--p-line); }
.p-rhead b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.02em; margin: 4px 0 2px; }
.p-rsum { padding: 14px 18px; border-bottom: 1px solid var(--p-line); }
.p-rsum p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--p-mut); max-width: 64ch; }
.p-rtiles { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--p-line); }
.p-rtiles.three { grid-template-columns: repeat(3, 1fr); }
.p-rtiles > div { padding: 12px 18px; } .p-rtiles > div + div { border-left: 1px solid var(--p-line); }
.p-rtiles b { display: block; font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.p-rtiles span { font-size: 11px; color: var(--p-dim); }
.p-rlbl { padding: 12px 18px 8px; }
.p-find { padding: 12px 18px 6px; }
.p-fbar { display: flex; gap: 4px; height: 8px; margin-top: 8px; }
.p-fbar i { display: block; height: 100%; border-radius: 2px; transform-origin: left; }
.p-fbar .r { flex: 3; background: var(--p-red); } .p-fbar .y { flex: 1; background: var(--p-amb); }
.scr-3.on .p-fbar i { animation: growx .9s var(--e) both; animation-delay: .75s; }
.scr-3.on .p-fbar .y { animation-delay: 1.2s; }
@keyframes growx { from { transform: scaleX(0); } }
.p-flg { display: flex; gap: 12px; margin-top: 8px; font-size: 11px; color: var(--p-mut); }
.p-flg span { display: flex; align-items: center; gap: 5px; } .p-flg i { width: 7px; height: 7px; border-radius: 50%; }
.p-flg .r { background: var(--p-red); } .p-flg .y { background: var(--p-amb); }
.p-frow { display: flex; gap: 10px; align-items: flex-start; margin: 8px 18px 16px; padding: 10px 12px; border: 1px solid color-mix(in oklch, var(--p-red) 35%, transparent); border-radius: 6px; background: color-mix(in oklch, var(--p-red) 6%, transparent); }
.p-frow > i { width: 6px; height: 6px; border-radius: 50%; background: var(--p-red); margin-top: 6px; flex: none; }
.p-frow b { display: block; font-size: 12.5px; font-weight: 600; }
.p-frow span { display: block; font-size: 11.5px; color: var(--p-mut); margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .play .a, .play .bar, .play .p-fbar i, .play .esc, .play .p-alert, .play .p-rev.hot { animation: none !important; }
  .scr { transition: none; }
}
/* the phone: no sidebar, one column, the same three screens */
@media (max-width: 900px) {
  .play { grid-template-columns: 1fr; height: 600px; font-size: 12px; }
  .p-side { display: none; }
  .p-top { padding: 0 14px; height: 52px; }
  .p-body { padding: 14px; gap: 10px; }
  .p-tools .p-btn, .p-hello .p-btn, .p-rhead .p-btn { display: none; }
  .p-chips span:nth-child(n+2), .p-srcs, .p-covrow .mono:nth-child(2), .p-meta span:nth-child(3), .p-lbl span { display: none; }
  .p-covrow { gap: 10px; }
  .p-tiles { grid-template-columns: 1fr 1fr; }
  .p-tiles small { display: none; }
  .p-rtiles { grid-template-columns: 1fr 1fr; }
  .p-rtiles > div:nth-child(3) { border-left: 0; }
  .p-rtiles.three > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--p-line); grid-column: 1 / -1; }
  .p-rtiles > div:nth-child(n+3) { border-top: 1px solid var(--p-line); }
  .p-rev { grid-template-columns: 44px 1fr; }
  .p-rev > .pill, .p-rev > .dim { grid-column: 2; justify-self: start; }
  .p-months span:nth-child(even) { display: none; }
}

/* pause and resume the play, for anyone who wants to read a screen */
.p-pause { position: absolute; right: 12px; bottom: 12px; z-index: 6; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px 0 8px;
  border: 1px solid var(--p-line); border-radius: 13px; background: color-mix(in oklch, var(--p-pop) 85%, transparent); backdrop-filter: blur(6px);
  color: var(--p-mut); font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: color .2s, border-color .2s; }
.p-pause:hover { color: var(--p-fg); border-color: var(--p-mut); }
.p-pause i { width: 8px; height: 8px; position: relative; }
.p-pause i::before, .p-pause i::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2.5px; background: currentColor; border-radius: 1px; }
.p-pause i::before { left: 0; } .p-pause i::after { right: 0; }
.p-pause[aria-pressed="true"] i::before { left: 1px; width: 0; height: 0; top: 0; bottom: auto; background: none; border-left: 7px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.p-pause[aria-pressed="true"] i::after { display: none; }
@media (prefers-reduced-motion: reduce) { .p-pause { display: none; } }