/* movetheneedle.studio — landing stylesheet (cool "drafting instrument" system).
   Self-contained: this replaces styles.css for the landing only. */

@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/archivo-400.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/archivo-500.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/archivo-700.woff2) format("woff2")}
@font-face{font-family:"Spline Sans Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/spline-mono-400.woff2) format("woff2")}
@font-face{font-family:"Spline Sans Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/spline-mono-500.woff2) format("woff2")}

/* Tokens live in tokens.css, loaded before this file. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:44px 44px;background-position:center -1px;
}
.wrap,.landing-hero-inner,.outcomes-heading,.operating-read-heading,.faq-heading,.experience-rail-heading{max-width:1120px;margin-inline:auto;padding-inline:var(--edge)}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--sans);font-weight:700;letter-spacing:-.022em;text-wrap:balance;margin:0}
p{margin:0}
a{color:var(--accent-text);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent-deep)}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:3px}
.eyebrow{font-family:var(--mono);font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);margin:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* collapsed = compact preview: insight, "what this means", and the top initiative's
   goal + "What to do" + "Metric to improve"; the rest is hidden. The card HEIGHT is
   FLIP-animated in landing.js, so expand/collapse and panel switches are smooth. */
.hero-report:not(.is-expanded) .mini-report > :not(.mini-report-heading):not(.mini-summary):not(.mini-initiatives){display:none}
.hero-report:not(.is-expanded) .mini-initiatives-head,
.hero-report:not(.is-expanded) .mini-initiatives > ol > li.is-overview,
.hero-report:not(.is-expanded) .mini-initiatives > ol > li.is-first > div > p{display:none}
.hero-report:not(.is-expanded) .mini-initiatives{margin-top:14px}
.hero-report:not(.is-expanded) .mini-initiatives > ol{margin:0}
.report-expand{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:14px 0 0;padding:11px 10px;
  background:none;border:0;border-top:1px solid var(--line);cursor:pointer;font-family:var(--mono);font-size:.72rem;
  font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-text)}
.report-expand:hover{color:var(--accent-deep)}
.report-expand-chev{transition:transform .25s ease}
.hero-report.is-expanded .report-expand-chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.report-expand-chev{transition:none}}
/* starts readable, not blank: a fast scroller passes unrevealed blocks before
   the observer fires, and opacity 0 left them on empty screens */
.reveal{opacity:.35;transform:translateY(8px);transition:opacity .45s ease, transform .45s ease}
.reveal.in-view{opacity:1;transform:none}
.has-js .reveal:not(.in-view){pointer-events:none}
/* no-JS / reduced-motion: never hide content */
html:not(.has-js) .reveal{opacity:1;transform:none}

/* ---------- buttons ---------- */
.button{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:.92rem;font-weight:600;
  background:var(--ink);color:var(--bg);border:1px solid var(--ink);border-radius:10px;
  padding:11px 18px;text-decoration:none;cursor:pointer;transition:transform .15s ease, opacity .15s ease}
.button:hover{opacity:.92;transform:translateY(-1px);color:var(--bg)}
.button span[aria-hidden],.button b{transition:transform .2s ease}
.button:hover span[aria-hidden]{transform:translate(2px,-2px)}
.button-small{padding:9px 15px;font-size:.88rem;border-radius:9px}
.button-light{background:var(--accent);border-color:var(--accent);color:#fff}
.button-light:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 86%, transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:inline-flex;align-items:center;gap:0;font-family:var(--mono);font-weight:500;font-size:1rem;
  letter-spacing:-.01em;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand:hover{color:var(--ink)}
.brand em{font-style:normal;color:var(--accent-text)}
.brand .dot-mark{width:9px;height:9px;margin-right:10px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.site-header nav{display:flex;align-items:center;gap:22px}
.site-header nav a:not(.button){color:var(--ink-soft);text-decoration:none;font-size:.9rem}
.site-header nav a:not(.button):hover{color:var(--ink)}
.theme-toggle{display:inline-grid;place-items:center;width:36px;height:36px;border:1px solid var(--line-strong);
  background:var(--bg-2);border-radius:999px;color:var(--ink-soft);cursor:pointer;padding:0;transition:color .15s ease}
.theme-toggle:hover{color:var(--ink)}
.theme-toggle svg{grid-area:1/1;width:17px;height:17px;display:none}
.theme-toggle svg.is-shown{display:block}

/* ---------- hero ---------- */
.landing-hero{position:relative;overflow:hidden}
.hero-noise{display:none}
.landing-hero-inner{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,5vw,64px);align-items:center;
  padding-block:clamp(44px,7vw,92px)}
.landing-hero-copy{max-width:40ch}
.landing-hero-copy .eyebrow{margin-bottom:20px}
.hero-title,.landing-hero h1{font-size:clamp(2.3rem,5vw,3.9rem);font-weight:700;line-height:1.05;letter-spacing:-.03em;margin:0}
.hero-title .em{color:var(--accent)}
/* rotating value-prop line under the fixed H1, synced to the report carousel */
/* grid-stack the rotating lines: all share one cell, so the stage auto-sizes to
   the TALLEST phrase and never overflows onto .landing-hero-sub at any width */
.hero-headline-stage{display:grid;margin:.5rem 0 1.15rem}
.hero-headline-stage .hero-headline{grid-area:1/1;opacity:0;transform:translateY(6px);
  transition:opacity .45s ease,transform .45s ease;font-family:var(--sans);font-weight:700;
  font-size:clamp(1.35rem,3.2vw,2.25rem);line-height:1.14;letter-spacing:-.02em;color:var(--accent)}
.hero-headline-stage .hero-headline.is-active{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.hero-headline-stage .hero-headline{transition:none}}
.landing-hero-sub{font-size:clamp(1.02rem,1.4vw,1.16rem);color:var(--ink-soft);max-width:52ch;margin:20px 0 0}

/* scan form */
.hero-scan{margin-top:28px;max-width:460px}
.hero-query label{display:block;font-family:var(--mono);font-size:.68rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted);margin-bottom:8px}
.hero-query{position:relative}
.hero-query-control{display:flex;gap:8px;background:var(--card);border:1px solid var(--line-strong);border-radius:12px;
  padding:6px;box-shadow:var(--shadow)}
.hero-query-control input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:.95rem;padding:9px 10px}
.hero-query-control input::placeholder{color:var(--muted)}
/* the input drops its own outline, so the control carries the focus ring for it,
   in the accent the global :focus-visible rule already uses */
.hero-query-control input:focus{outline:none}
.hero-query-control:focus-within{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent),var(--shadow)}
.hero-query-control .button{white-space:nowrap}
.hero-microcopy{margin:12px 2px 0;font-size:.8rem;color:var(--muted)}
.hero-search-status{margin:8px 2px 0;font-size:.78rem;color:var(--muted);min-height:1em}
.hero-form-error{margin:8px 2px 0;font-size:.82rem;color:var(--neg)}
/* autocomplete suggestions (injected by landing.js) */
.hero-suggestions{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;background:var(--card);
  border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow);padding:6px;max-height:340px;overflow:auto}
.hero-suggestion{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:transparent;border:0;
  border-radius:9px;padding:9px 10px;cursor:pointer;color:var(--ink);font:inherit}
.hero-suggestion.is-active,.hero-suggestion:hover{background:var(--bg-2)}
.hero-suggestion-icon{width:34px;height:34px;border-radius:8px;background:var(--bg-2);display:grid;place-items:center;
  overflow:hidden;flex:none;font-family:var(--mono);color:var(--muted)}
.hero-suggestion-icon img{width:100%;height:100%;object-fit:cover}
.hero-suggestion-copy{display:flex;flex-direction:column;min-width:0;flex:1}
.hero-suggestion-copy strong{font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-suggestion-copy small{color:var(--muted);font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-suggestion em{font-style:normal;font-family:var(--mono);font-size:.74rem;color:var(--accent-text)}

/* ---------- hero report carousel ---------- */
.hero-report{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);overflow:hidden;transform:translateY(var(--report-y,0))}
.hero-report::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at var(--report-glow-x,76%) var(--report-glow-y,10%),
    color-mix(in srgb,var(--intent-accent) 12%, transparent), transparent 55%)}
.report-paper-top{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:15px 18px;border-bottom:1px solid var(--line)}
.report-app-brands{position:relative;min-height:38px;display:flex;align-items:center;flex:1}
.report-app-brand{display:none;align-items:center;gap:11px}
.report-app-brand.is-active{display:flex}
.report-app-brand img{width:34px;height:34px;border-radius:9px;flex:none;object-fit:cover;background:var(--bg-2)}
.report-app-brand strong{display:block;font-weight:600;font-size:.92rem;letter-spacing:-.01em}
.report-app-brand small{display:block;color:var(--muted);font-size:.7rem}
.report-intent{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.62rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text);
  border:1px solid color-mix(in srgb,var(--intent-accent) 40%, var(--line-strong));border-radius:6px;padding:4px 8px;white-space:nowrap}
.report-intent i{width:5px;height:5px;border-radius:50%;background:var(--intent-accent)}
/* panels overlap (absolute) for the cross-fade; the ACTIVE one is in normal flow so
   the card is always exactly its height (no white space). The stage height is
   FLIP-animated in landing.js so switching/expanding is smooth and never jumps. */
.hero-report-stage{position:relative;overflow:hidden}
.mini-report{position:absolute;top:0;left:0;right:0;padding:18px;opacity:0;pointer-events:none;transition:opacity .4s ease}
.mini-report.is-active{position:relative;opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.mini-report{transition:none}}
.mini-report-heading{margin-bottom:14px}
.mini-insight-label{display:block;font-family:var(--mono);font-size:.64rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.13em;color:var(--muted);margin-bottom:6px}
.mini-report-heading h2{font-size:1.12rem;line-height:1.3;letter-spacing:-.015em}

/* revenue flow / generic labelled bars */
.mini-revenue-flow,.mini-retention-pie,.mini-source-check{background:var(--bg-2);border:1px solid var(--line);
  border-radius:12px;padding:14px;margin-bottom:14px}
.mini-revenue-flow-head,.mini-retention-pie-head,.mini-source-check-head{display:flex;justify-content:space-between;
  align-items:baseline;gap:10px;font-size:.75rem;color:var(--muted);margin-bottom:10px}
.mini-revenue-flow-head strong,.mini-retention-pie-head strong,.mini-source-check-head strong{color:var(--ink);font-weight:600;font-family:var(--mono);font-size:.78rem}
.mini-revenue-row{display:grid;grid-template-columns:9.5ch 1fr auto;gap:10px;align-items:center;font-size:.8rem;margin-top:8px}
.mini-revenue-row>span:first-child{color:var(--ink-soft)}
.mini-revenue-row i{display:block;height:8px;border-radius:5px;background:var(--bg);overflow:hidden;border:1px solid var(--line)}
.mini-revenue-row i b{display:block;height:100%;border-radius:5px;width:var(--flow-width,0);background:var(--intent-accent)}
.mini-revenue-row.is-loss i b{background:var(--neg)}
.mini-revenue-row strong{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--pos);text-align:right}
.mini-revenue-row.is-loss strong{color:var(--neg)}
.mini-revenue-result{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:12px;
  padding-top:10px;border-top:1px solid var(--line)}
.mini-revenue-result span{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.mini-revenue-result strong{font-family:var(--mono);font-size:1rem;color:var(--ink)}
.mini-revenue-result small{color:var(--muted);font-size:.68rem;flex:1;text-align:right}

/* metrics grid */
.mini-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;margin:0 0 14px}
.mini-metrics>div{background:var(--card);padding:11px 12px}
.mini-metrics dt{font-size:.66rem;color:var(--muted);margin-bottom:4px;line-height:1.25}
.mini-metrics dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1rem;font-weight:500;color:var(--ink)}

/* summary */
.mini-summary{margin-bottom:14px}
.mini-summary span{display:block;font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:5px}
.mini-summary p{font-size:.85rem;color:var(--ink-soft);line-height:1.55}

/* retention donut */
.mini-retention-pie-body{display:grid;grid-template-columns:auto 1fr;gap:12px 16px;align-items:center}
.mini-retention-donut{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--intent-accent) 0 41%, color-mix(in srgb,var(--neg) 55%, transparent) 41% 100%);position:relative}
.mini-retention-donut::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--bg-2)}
.mini-retention-donut span{position:relative;text-align:center;line-height:1}
.mini-retention-donut strong{font-family:var(--mono);font-size:1.05rem;color:var(--ink);display:block}
.mini-retention-donut small{font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.mini-retention-pie-body dl{margin:0;display:flex;flex-direction:column;gap:6px}
.mini-retention-pie-body dl>div{display:flex;justify-content:space-between;font-size:.78rem}
.mini-retention-pie-body dt{color:var(--ink-soft)}
.mini-retention-pie-body dd{margin:0;font-family:var(--mono);font-weight:500}
.mini-retention-pie-body .is-kept dd{color:var(--pos)}
.mini-retention-pie-body .is-lost dd{color:var(--neg)}
.mini-retention-pie-note{grid-column:1/-1;border-top:1px solid var(--line);padding-top:9px}
.mini-retention-pie-note span{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.mini-retention-pie-note strong{display:block;font-size:.85rem;margin-top:2px}
.mini-retention-pie-note small{color:var(--muted);font-size:.72rem}

/* source check bar */
.mini-source-check-bar{display:flex;height:26px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.mini-source-check-bar span{display:flex;align-items:center;padding:0 8px;font-family:var(--mono);font-size:.6rem;color:#fff;white-space:nowrap;overflow:hidden}
.mini-source-check-bar .is-search{width:var(--source-width,68%);background:var(--intent-accent)}
.mini-source-check-bar .is-other{flex:1;background:color-mix(in srgb,var(--muted) 60%, var(--card));color:var(--ink)}
.mini-source-check-note{display:flex;justify-content:space-between;gap:10px;margin-top:9px;font-size:.74rem;color:var(--muted)}
.mini-source-check-note strong{color:var(--ink);font-weight:600;font-family:var(--mono);font-size:.76rem}

/* ranked initiatives — the EXPANDABLE PREVIEW */
.mini-initiatives{border-top:1px solid var(--line);padding-top:14px}
.mini-initiatives-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.mini-initiatives-head span{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.mini-initiatives-head small{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-text)}
.mini-initiatives ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.mini-initiatives li{border:1px solid var(--line);border-radius:11px;padding:12px;background:var(--bg-2)}
.mini-initiatives li.is-first{border-color:color-mix(in srgb,var(--intent-accent) 45%, var(--line-strong));
  background:color-mix(in srgb,var(--intent-accent) 7%, var(--card))}
.mini-initiatives li>div>span:first-child{display:block;font-weight:600;font-size:.86rem;letter-spacing:-.01em}
.mini-initiatives li small:first-child,.mini-initiatives li>div>span small{display:block;font-family:var(--mono);font-size:.6rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--accent-text);margin-bottom:3px;font-weight:500}
.mini-initiatives li p{font-size:.8rem;color:var(--ink-soft);margin:6px 0}
.mini-initiatives li p em{font-style:normal;font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-right:6px}
.initiative-action,.overview-move{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:9px 10px;margin-top:8px}
.initiative-action-label,.overview-move small{display:block;font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:3px}
.initiative-action strong,.overview-move strong{font-size:.82rem;font-weight:600;line-height:1.4}
.initiative-metric,.overview-metrics{display:block;margin-top:8px}
.initiative-metric em,.overview-metrics em{font-style:normal;font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);display:block;margin-bottom:4px}
.initiative-metric span,.overview-metrics span{display:flex;flex-wrap:wrap;gap:5px}
.initiative-metric b,.overview-metrics b{font-family:var(--mono);font-weight:400;font-size:.66rem;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:5px;padding:2px 6px}
.initiative-metric b.is-review{color:var(--accent-text);border-color:color-mix(in srgb,var(--accent-text) 40%,var(--line))}

/* carousel controls */
.hero-carousel-controls{display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 18px 16px;border-top:1px solid var(--line)}
.hero-carousel-arrow{width:32px;height:32px;border-radius:999px;border:1px solid var(--line-strong);background:var(--bg-2);
  color:var(--ink-soft);cursor:pointer;font-size:.9rem;display:grid;place-items:center;transition:color .15s,border-color .15s}
.hero-carousel-arrow:hover{color:var(--ink);border-color:var(--accent-text)}
.hero-carousel-dots{display:flex;gap:8px}
.hero-carousel-dots button{width:9px;height:9px;padding:0;border-radius:999px;border:1px solid var(--line-strong);
  background:transparent;cursor:pointer;transition:background .15s,border-color .15s}
.hero-carousel-dots button.is-active{background:var(--accent);border-color:var(--accent)}
.hero-carousel-count{font-family:var(--mono);font-size:.68rem;color:var(--muted);letter-spacing:.05em}
.hero-carousel-count b{color:var(--ink);font-weight:500}
.hero-carousel-play{width:32px;height:32px;border-radius:999px;border:1px solid var(--line-strong);background:var(--bg-2);
  color:var(--ink-soft);cursor:pointer;display:grid;place-items:center;padding:0;transition:color .15s,border-color .15s}
.hero-carousel-play:hover{color:var(--ink);border-color:var(--accent-text)}
.hero-carousel-play svg{width:15px;height:15px;fill:currentColor}
.hero-carousel-play .icon-play{display:none}
.hero-carousel-play.is-paused .icon-pause{display:none}
.hero-carousel-play.is-paused .icon-play{display:block}

/* ---------- how it works (simplified) ---------- */
.operating-read-section{border-top:1px solid var(--line);background:var(--bg-2)}
.operating-read-heading{padding-top:clamp(44px,7vw,80px);display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(20px,4vw,48px);align-items:end}
/* Section headings set a size but inherited body leading (1.6), so 33px display
   type was set on a 53px line. Every heading that does declare its own leading
   on this page is tight: hero 1.05, final CTA 1.08, initiatives 1.15, report
   block 1.18. The loose ones were unset, not chosen. */
.operating-read-heading h2{font-size:clamp(1.5rem,3vw,2.05rem);line-height:1.18;max-width:20ch}
.operating-read-heading p{color:var(--ink-soft);max-width:52ch}
.compact-process{list-style:none;margin:clamp(28px,4vw,44px) auto 0;padding-block:0 6px;max-width:1120px;padding-inline:var(--edge);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,32px)}
.compact-process li{display:flex;gap:12px;align-items:flex-start}
.compact-process li>span{font-family:var(--mono);font-size:.88rem;color:var(--accent-text);font-weight:500;padding-top:3px}
.process-step{flex:1;min-width:0}
/* the toggle sits immediately after the heading, not flung to the column edge:
   short headings keep it within reach of the words it opens */
.process-step summary{display:flex;justify-content:flex-start;align-items:flex-start;gap:10px;
  cursor:pointer;list-style:none;padding-block:0 2px}
.process-step summary::-webkit-details-marker{display:none}
.process-toggle{flex:none;display:grid;place-items:center;width:25px;height:25px;
  border-radius:50%;background:color-mix(in srgb,var(--accent) 13%,transparent);
  font-family:var(--mono);font-weight:500;font-size:1.2rem;line-height:1;color:var(--accent-text);
  transition:transform .2s ease,background-color .15s}
.process-step summary:hover .process-toggle{background:color-mix(in srgb,var(--accent) 24%,transparent)}
.process-step[open] .process-toggle{transform:rotate(45deg)}
.compact-process strong{display:block;font-size:1.12rem;font-weight:600;line-height:1.32}
.compact-process p{margin:8px 0 0;font-size:.95rem;color:var(--ink-soft);line-height:1.55}
.privacy-line{max-width:1120px;margin:clamp(28px,4vw,40px) auto 0;padding:0 var(--edge) clamp(44px,7vw,80px);font-size:.92rem;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq-section{padding-block:clamp(48px,8vw,92px)}
.faq-heading{margin-bottom:clamp(22px,3vw,34px)}
.faq-heading h2{font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.18;margin-top:6px}
.faq-list{max-width:1120px;margin-inline:auto;padding-inline:var(--edge);display:flex;flex-direction:column;gap:10px}
.faq-list details{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:2px 18px;transition:border-color .15s}
.faq-list details[open]{border-color:var(--line-strong)}
.faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:14px;cursor:pointer;list-style:none;
  padding:16px 0;font-weight:600;font-size:1rem}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span[aria-hidden]{font-family:var(--mono);color:var(--accent-text);font-size:1.1rem;transition:transform .2s ease}
.faq-list details[open] summary span[aria-hidden]{transform:rotate(45deg)}
.faq-list p{color:var(--ink-soft);font-size:.92rem;line-height:1.6;padding:0 0 18px;margin:0}
.faq-list details p{max-width:70ch}

/* ---------- experience marquee ---------- */
.experience-rail-section{border-top:1px solid var(--line);background:var(--bg-2);padding-block:clamp(40px,6vw,72px);overflow:hidden}
.experience-rail-heading{margin-bottom:clamp(20px,3vw,30px)}
.experience-rail-heading h2{font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.18;margin-top:6px}
.experience-marquee{position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.experience-track{display:flex;gap:14px;width:max-content}
.experience-track.is-ready{animation:marquee 60s linear infinite}
.experience-group{display:flex;gap:14px;align-items:center}
.experience-divider{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);padding:0 8px;white-space:nowrap}
.experience-tile{width:66px;height:66px;border-radius:15px;border:1px solid var(--line);background:var(--card);
  overflow:hidden;display:grid;place-items:center;flex:none;text-decoration:none}
.experience-tile img{width:100%;height:100%;object-fit:cover}
/* programs are logos, not app icons: wider white logo chips */
.experience-program{width:auto;min-width:0;padding:0 20px;background:#fff;overflow:visible}
.experience-program img{width:auto;height:26px;max-width:120px;object-fit:contain}
.experience-more{font-family:var(--mono);color:var(--muted);letter-spacing:.1em}
/* :focus-within as well as :hover, so a keyboard user tabbing the app tiles
   can stop the rail instead of chasing a moving target */
.experience-marquee:hover .experience-track.is-ready,
.experience-marquee:focus-within .experience-track.is-ready{animation-play-state:paused}
/* signal-flow diagram: your app signals -> synthesis card -> our analysis */
.operating-report{max-width:1120px;margin:clamp(30px,4vw,46px) auto 0;padding-inline:var(--edge)}
/* start, not center: with the column headlines gone the two mono labels are the
   top of each column, and centring left them 18px out of line with each other */
.signal-flow{position:relative;display:grid;grid-template-columns:.92fr 1.06fr .92fr;gap:clamp(48px,7vw,100px);align-items:start}
.signal-flow>div{position:relative;z-index:2;min-width:0}
.signal-wires{position:absolute;z-index:0;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.signal-wires path{fill:none;stroke:var(--line-strong);stroke-width:1.25}
.signal-wires path.is-arrow{marker-end:url(#signalArrow)}
.signal-wires marker path{fill:var(--accent);stroke:none}
.flow-label{display:block;margin-bottom:14px;font-family:var(--mono);color:var(--muted);font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.signal-inputs ul,.signal-output ol{margin:0;padding:0;list-style:none}
.signal-inputs ul{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.signal-inputs li{position:relative;min-height:64px;padding:11px 12px;display:grid;grid-template-columns:11px minmax(0,1fr);gap:8px;align-items:center;
  border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink-soft);font-size:.88rem;font-weight:600;line-height:1.35;box-shadow:var(--shadow)}
.signal-inputs li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.signal-synthesis{padding:24px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line-strong));border-radius:18px;
  background:color-mix(in srgb,var(--accent) 8%,var(--card));box-shadow:var(--shadow)}
.synthesis-mark{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:13px}
.synthesis-mark img{width:40px;height:40px;border-radius:12px}
.synthesis-mark strong{display:block;font-size:1.32rem;line-height:1.2;letter-spacing:-.025em}
.signal-synthesis>ul{margin:19px 0 0;padding:15px 0 0;display:grid;gap:9px;border-top:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));list-style:none}
.signal-synthesis>ul li{position:relative;padding-left:20px;color:var(--ink-soft);font-size:.9rem;font-weight:600}
.signal-synthesis>ul li::before{content:"\2713";position:absolute;left:0;color:var(--accent-text);font-weight:700}
/* same row height and gap as the source chips, so both flanks of the diagram
   end level with each other instead of the right one running 35px short */
.signal-output ol{display:grid;gap:8px}
.signal-output li{min-height:82px;padding:14px 16px;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:center;
  border:1px solid var(--line);border-radius:11px;background:var(--card);box-shadow:var(--shadow)}
.signal-output li span{color:var(--accent-text);font-family:var(--mono);font-weight:500;font-size:.78rem}
.signal-output li strong{font-size:1rem;line-height:1.3}
/* pipeline animation: each source lights, the data travels the wires to the
   synthesis card, then on to the three outputs. landing.js drives the sequence
   with classes and only runs it while the diagram is on screen. */
.signal-wires path.wire-pulse{stroke:var(--accent);stroke-width:2.25;stroke-linecap:round;opacity:0}
.signal-wires.is-flow-in path.wire-pulse-in,
.signal-wires.is-flow-out path.wire-pulse-out{opacity:.85;animation:wireFlow 1.5s cubic-bezier(.33,0,.35,1) forwards}
@keyframes wireFlow{
  0%{stroke-dashoffset:26px;opacity:0}
  18%{opacity:.85}
  82%{opacity:.85}
  100%{stroke-dashoffset:calc(26px - var(--len));opacity:0}
}
/* long, eased, no overshoot: the diagram should breathe rather than pop */
.signal-inputs li,.signal-output li,.signal-synthesis{
  transition:transform .7s cubic-bezier(.33,0,.35,1),border-color .7s ease,box-shadow .7s ease}
.signal-inputs li.is-lit,.signal-output li.is-lit{transform:translateY(-1px) scale(1.012);
  border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  box-shadow:0 4px 16px -8px color-mix(in srgb,var(--accent) 30%,transparent)}
.signal-inputs li.is-lit::before{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 16%,transparent)}
.signal-synthesis.is-lit{transform:scale(1.008);
  border-color:color-mix(in srgb,var(--accent) 70%,var(--line-strong));
  box-shadow:0 8px 26px -12px color-mix(in srgb,var(--accent) 34%,transparent)}
/* operating memory: what changed + what we learned */
/* one title per block, so the diagram and the memory row read as their own
   ideas rather than as more of the numbered process above */
.report-block-heading{margin-top:clamp(34px,4vw,46px);padding-top:clamp(26px,3vw,34px);
  margin-bottom:clamp(18px,2.5vw,26px);border-top:1px solid var(--line)}
.report-block-heading>span{font-family:var(--mono);color:var(--accent-text);font-size:.78rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.report-block-heading h3{margin:9px 0 0;font-size:clamp(1.3rem,2.4vw,1.6rem);line-height:1.18;letter-spacing:-.03em}
.history-view{display:grid;grid-template-columns:.92fr 1.26fr;gap:34px;align-items:start}
.history-timeline>header,.history-ledger>header{margin-bottom:18px}
.history-timeline header span,.history-ledger header span{font-size:1.05rem;font-weight:600}
.operating-timeline{position:relative;margin:0;padding:9px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;list-style:none}
.operating-timeline li{position:relative;min-width:0;padding-top:24px}
.operating-timeline li:not(:last-child)::after{content:"";position:absolute;top:8px;left:21px;right:-12px;height:1px;background:var(--line-strong)}
.operating-timeline li::before{content:"";position:absolute;top:0;left:0;width:11px;height:11px;border:3px solid var(--bg-2);border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px var(--line-strong)}
.operating-timeline time,.operating-timeline b,.operating-timeline small{display:block}
.operating-timeline time{font-family:var(--mono);color:var(--accent-text);font-weight:500;font-size:.78rem}
.operating-timeline b{margin-top:5px;font-size:.98rem;line-height:1.25}
.operating-timeline small{margin-top:4px;color:var(--muted);font-size:.84rem;line-height:1.35}
.learning-ledger{width:100%;font-size:.82rem}
/* minmax(0,...) not a bare 1fr: a bare 1fr floors at the cell's min-content, so
   one long initiative name would push the whole page wider than the viewport */
.learning-ledger-head,.learning-ledger-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);gap:10px;align-items:center}
.learning-ledger-head>*,.learning-ledger-row>*{min-width:0;overflow-wrap:anywhere}
.learning-ledger-head{padding:0 9px 8px;font-family:var(--mono);color:var(--muted);font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.learning-ledger-row{min-height:44px;padding:11px 9px;border-top:1px solid var(--line);color:var(--ink-soft)}
.learning-ledger-row b{color:var(--ink)}
.learning-ledger-row strong{color:var(--ink-soft)}
.learning-ledger-row strong.is-positive{color:var(--pos)}
.learning-ledger-row strong.is-warning{color:var(--neg)}
@media (max-width:900px){
  .signal-flow{grid-template-columns:1fr;gap:22px}
  .history-view{grid-template-columns:1fr;gap:26px}
  .operating-timeline li:not(:last-child)::after{display:none}}
/* on a phone three columns leave every cell two words wide, so each row restacks
   as a small block: initiative, result, watch next. Visual only. The head row
   keeps its role="columnheader" cells in the accessibility tree (hidden the
   .sr-only way, never display:none) so role="table" still reads correctly. */
@media (max-width:480px){
  .learning-ledger-head{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .learning-ledger-row{display:block;min-height:0;padding:11px 2px}
  .learning-ledger-row>*{display:block}
  .learning-ledger-row b{font-weight:600;line-height:1.35}
  .learning-ledger-row strong,.learning-ledger-row>span{margin-top:2px;font-weight:400}
  /* stacked, the column position no longer tells the result from the thing to
     watch, so the watch-next line drops to the caption tier the timeline
     already uses one block above */
  .learning-ledger-row>span{color:var(--muted)}
}
.experience-claim{max-width:1120px;margin:clamp(20px,3vw,28px) auto 0;padding-inline:var(--edge);font-size:.82rem;color:var(--muted)}
@keyframes marquee{to{transform:translateX(calc(-50% - 7px))}}

/* ---------- final CTA ---------- */
.final-cta{text-align:center;padding-block:clamp(56px,9vw,104px);padding-inline:var(--edge);border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:16px}
/* display type, so it takes the hero's line height (1.05) rather than the
   body's 1.6, which opened 77px gaps between two 48px lines */
.final-cta h2{font-size:clamp(1.8rem,4vw,3rem);line-height:1.08;letter-spacing:-.03em;max-width:18ch}
.final-cta .eyebrow{margin-bottom:0}
.final-cta p{color:var(--ink-soft);max-width:46ch}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);max-width:1120px;margin-inline:auto;padding:34px var(--edge);
  display:flex;flex-direction:column;gap:14px}
.site-footer .footer-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px 28px;flex-wrap:wrap}
.site-footer .brand{font-size:.95rem}
.site-footer .footer-meta p{color:var(--muted);font-size:.85rem;margin:0}
.site-footer nav{display:flex;gap:20px;font-size:.85rem}
.site-footer nav a{color:var(--ink-soft);text-decoration:none}
.site-footer nav a:hover{color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .landing-hero-inner{grid-template-columns:1fr}
  .landing-hero-copy{max-width:none;order:1}
  .hero-report{order:2}
  .operating-read-heading{grid-template-columns:1fr;gap:16px}
  .compact-process{grid-template-columns:1fr}
  .site-header nav .nav-link{display:none}
}
@media (max-width:560px){
  .mini-metrics{grid-template-columns:1fr}
  /* input above a full-width button. Side by side, the two floor the hero grid
     column at ~379px, so on a 320 or 390 phone the whole hero (headline, sub,
     form, report card) was laid out wider than the screen and clipped by
     .landing-hero's overflow:hidden. The button keeps white-space:nowrap: at
     full width the label fits on one line. */
  .hero-query-control{flex-direction:column;gap:6px}
  .hero-query-control .button{width:100%;justify-content:center}
}
/* the wordmark, the theme toggle and the CTA need 455px to share one row. Below
   that the CTA wrapped to two lines inside the 64px header and, under 390px, it
   pushed the whole page into horizontal scroll. The CTA only jumps to the hero
   form, which is already on screen at this width, so the phone header drops it:
   the same reason .nav-link is dropped at 900px. */
@media (max-width:460px){
  /* Owner call: the CTA stays on phones. Full text cannot share a 320px row
     with the wordmark and the toggle, so the brand narrows a step and the
     button compacts to its established action glyph. The label stays in the
     markup (font-size 0), so the accessible name is still "Analyze an app". */
  .site-header .brand{font-size:.85rem}
  .site-header nav .button{width:36px;height:36px;padding:0;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;font-size:0;line-height:0}
  .site-header nav .button::after{content:"\2197";font-size:15px;line-height:1}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- the initiatives database (#initiatives) ---------- */
/* Sits between How it works and the FAQ: the section above closes on "connect
   initiatives to results", so this is the literal answer to a promise the page
   has just made. The table deliberately borrows the private report's own data
   grid (table.grid in styles.css): full cell rules, tight padding, uppercase
   muted headers, mono for secondary values. It should read as a database
   rather than as a marketing list, because that is what it is. */
.initiatives-section{padding-block:clamp(48px,8vw,92px)}
.initiatives-inner{max-width:1120px;margin-inline:auto;padding-inline:var(--edge)}
/* The numeral is 80px against a 33px heading, so the gaps that read as generous
   next to body copy read as cramped next to it. Measured on the live page: 14px
   above and 20px beside, against a section that pads itself by 92px. */
/* center, not baseline: baseline pins the numeral to the FIRST line of a
   heading that always wraps to two, so its ink centre sat 35px above the
   heading's (measured live at 1440px). Both boxes are ink-centred to within
   1.5px at these sizes, so centring the boxes centres the ink, at any wrap
   count and without a magic offset. */
.initiatives-count{display:flex;align-items:center;gap:clamp(18px,2.6vw,30px);flex-wrap:wrap;margin-top:clamp(18px,2.4vw,26px)}
.initiatives-n{font-size:clamp(46px,8vw,80px);font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--accent-text);font-variant-numeric:tabular-nums}
.initiatives-count h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:0;max-width:22ch;line-height:1.15}

/* The well: five sharp rows, then the veil fading into the fold. Capped height
   with its own scroll, so the depth is felt rather than claimed. */
.initiatives-tablewrap{
  margin-top:clamp(26px,3.4vw,38px);overflow-x:auto;overflow-y:auto;max-height:min(60vh,520px);
  border:1px solid var(--line-strong);border-radius:10px;background:var(--card);
  -webkit-mask-image:linear-gradient(to bottom,#000 78%,rgba(0,0,0,.35) 94%,transparent);
  mask-image:linear-gradient(to bottom,#000 78%,rgba(0,0,0,.35) 94%,transparent);
}
.initiatives-table{width:100%;min-width:820px;border-collapse:collapse;font-size:.85rem}
.initiatives-table th,.initiatives-table td{padding:7px 10px;border:1px solid var(--line);text-align:left;vertical-align:top}
.initiatives-table thead th{
  position:sticky;top:0;z-index:1;background:var(--bg-2);
  color:var(--muted);font-family:var(--mono);font-size:.6rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}
.initiatives-table tbody tr:hover{background:var(--bg-2)}
.i-title{font-weight:600;color:var(--ink);max-width:34ch}
.i-stage{font-family:var(--mono);font-size:.64rem;color:var(--ink-soft);white-space:nowrap}
.i-metric{font-family:var(--mono);font-size:.64rem;color:var(--muted);white-space:nowrap}
.i-figure{font-family:var(--mono);font-size:.95rem;font-weight:600;color:var(--accent-text);white-space:nowrap;font-variant-numeric:tabular-nums}
.i-measured{color:var(--ink-soft);white-space:nowrap}
.i-how{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.05em;color:var(--muted);margin-top:2px}

/* Blur per cell: filter on a table-row is unreliable across engines. */
.initiatives-table tr.i-veil{opacity:.5;user-select:none;pointer-events:none}
.initiatives-table tr.i-veil td{filter:blur(5px)}

.initiatives-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:22px}

/* ---------- operating memory, extracted into its own section ---------- */
/* .operating-read-section intentionally carries no vertical padding: #how-it-works
   derives its rhythm from its children and closes on a privacy line. This section
   closes on a table, so without padding the tinted band ended flush against the
   last row. Scoped to the id rather than the class so #how-it-works is untouched. */
#operating-memory{padding-block:clamp(48px,8vw,92px)}
/* The heading carries its own top padding because in #how-it-works it *is* the
   section's top rhythm. Here the section owns that, so the two stacked and the
   band opened 173px above the eyebrow while closing 92px below the table. */
#operating-memory .operating-read-heading{padding-top:0;margin-bottom:clamp(20px,3vw,30px)}
#operating-memory .operating-report{margin-block:0}
/* The two columns are top-aligned and content-driven, so the shorter one ends
   early. Give the pair a floor so the ledger does not look like it overhangs. */
@media(min-width:861px){
  #operating-memory .history-view{align-items:start}
}