:root {
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --paper: #FAF8F2;
  --paper-raised: #FFFFFF;
  --ink: #181815;
  --ink-soft: #6B6B63;
  --line: rgba(24,24,21,0.16);
  --accent: #A8C23A;
  --accent-dark: #687824;
  --accent-ink: #181815;
  --on-photo: #FAF8F2;
  --on-photo-soft: rgba(250,248,242,0.82);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #16150F;
    --paper-raised: #201F17;
    --ink: #F1EEE3;
    --ink-soft: #ABA89C;
    --line: rgba(241,238,227,0.16);
    --accent: #B9D94A;
    --accent-dark: #9AB23A;
    --accent-ink: #14150D;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #16150F;
  --paper-raised: #201F17;
  --ink: #F1EEE3;
  --ink-soft: #ABA89C;
  --line: rgba(241,238,227,0.16);
  --accent: #B9D94A;
  --accent-dark: #9AB23A;
  --accent-ink: #14150D;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img, svg { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 100;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display);
  padding: 10px 18px; font-weight: 700; text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

.wrap { max-width: 1240px; margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
  text-wrap: balance;
  margin: 0;
}
p { margin: 0; }
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 46ch; font-weight: 400; line-height: 1.55; }

.eyebrow {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-dark);
  margin-bottom: 10px;
}

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* split-word title reveal: each word slides up out of its own mask */
.split-h .word {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding-bottom: 0.18em; margin-bottom: -0.18em; /* room for descenders inside the clip box */
}
.split-h .word > span {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.7s cubic-bezier(.19,1,.22,1);
  transition-delay: calc(var(--i, 0) * 0.05s);
}
.reveal.is-visible .split-h .word > span,
.split-h.reveal.is-visible .word > span { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .split-h .word > span { transform: none; transition: none; animation: none; }
}

/* noise texture, used sparingly on dark/accent bands */
.grain { position: relative; }
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05; mix-blend-mode: overlay;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 2px solid currentColor;
  cursor: pointer;
  background: none;
  color: inherit;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s cubic-bezier(.2,.8,.2,1), box-shadow 0.15s ease;
}
.btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.btn-solid { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-solid:hover { background: var(--accent-dark); border-color: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 10px 24px -12px var(--accent); }
.btn-outline:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); }
.on-photo-outline { color: var(--on-photo); border-color: var(--on-photo); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Nav ---------- */
header.site {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease;
  --nav-ink: var(--on-photo);
  --nav-ink-soft: var(--on-photo-soft);
  --nav-ink-contrast: #181815; /* text on a --nav-ink fill (hovered header button, theme toggle) */
}
header.site.scrolled {
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  --nav-ink: var(--ink);
  --nav-ink-soft: var(--ink-soft);
  --nav-ink-contrast: var(--paper);
}
header.site.menu-open { background: var(--paper); --nav-ink: var(--ink); --nav-ink-soft: var(--ink-soft); --nav-ink-contrast: var(--paper); }
nav.masthead { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; }
.wordmark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--nav-ink); font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.01em; transition: color 0.25s ease; }
.wordmark .mark { flex-shrink: 0; fill: currentColor; }
nav.masthead .links { display: flex; align-items: center; gap: 22px; }
nav.masthead .links a.navlink {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em;
  text-decoration: none; color: var(--nav-ink-soft); transition: color 0.25s ease;
}
nav.masthead .links a.navlink:hover { color: var(--nav-ink); }
nav.masthead .links a.navlink.btn-outline { color: var(--nav-ink); }
nav.masthead .links a.navlink.btn-outline:hover { background: var(--nav-ink); border-color: var(--nav-ink); color: var(--nav-ink-contrast); }
nav.masthead .links a.navlink:focus-visible,
.mobile-menu a.navlink:focus-visible,
.foot-row a.navlink:focus-visible,
.wordmark:focus-visible,
.theme-toggle:focus-visible,
.menu-btn:focus-visible,
.tabs button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

/* current-page indicator */
nav.masthead .links a.navlink.is-current {
  color: var(--nav-ink); position: relative;
}
nav.masthead .links a.navlink.is-current::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -8px;
  height: 3px; background: var(--accent);
}
.mobile-menu a.navlink.is-current {
  color: var(--ink); background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-left: 3px solid var(--accent); padding-left: 17px;
}
.foot-row a.navlink.is-current { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 2px solid var(--nav-ink); border-radius: 999px;
  background: none; color: var(--nav-ink); cursor: pointer; flex-shrink: 0;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.15s ease;
}
.theme-toggle:hover { background: var(--nav-ink); color: var(--nav-ink-contrast); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: none; }
}

.menu-btn {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 2px solid var(--nav-ink); background: none;
  color: var(--nav-ink); cursor: pointer; flex-shrink: 0;
}
.menu-btn svg { width: 18px; height: 18px; }

.mobile-menu { display: none; }

/* ---------- Hero (video) ---------- */
.hero { position: relative; overflow: hidden; min-height: min(94vh, 820px); display: flex; align-items: flex-end; }
.hero-media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; background: #10120c; }
/* two stacked videos crossfade: the incoming one fades in on top, the outgoing one drops out once it's covered */
.hero-media { opacity: 0; transition: opacity 0s 1.8s; }
.hero-media.is-active { z-index: 1; opacity: 1; transition: opacity 1.8s ease; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(8,9,5,0.88) 0%, rgba(8,9,5,0.42) 46%, rgba(8,9,5,0.3) 68%, rgba(8,9,5,0.38) 100%);
}
.hero-content { position: relative; z-index: 2; padding-block: 110px clamp(48px, 8vw, 96px); width: 100%; }
.hero h1 {
  color: var(--on-photo);
  font-size: clamp(2.6rem, 8vw, 5.6rem);
  max-width: 17ch;
  min-height: calc(2 * 0.95 * clamp(2.6rem, 8vw, 5.6rem));
}

/* rotating headline: the live typed text and an invisible copy of every title share one grid cell,
   so the h1 is always as tall as the longest title and nothing below it moves as the titles change */
.hero h1.hero-type { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero-type-live, .hero-type-sizer { grid-area: 1 / 1; }
.hero-type-sizer { visibility: hidden; pointer-events: none; }

/* typewriter headline (Typed.js) */
.hero h1.hero-type .typed-cursor {
  display: inline-block;
  color: var(--accent);
  font-weight: 400;
  margin-left: 2px;
  animation: cursor-blink 0.9s steps(1) infinite;
}
@keyframes cursor-blink { 50% { opacity: 0; } }

.hero .cta-row {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(.19,1,.22,1), transform 0.7s cubic-bezier(.19,1,.22,1);
}
.hero-content.hero-ready .cta-row { opacity: 1; transform: translateY(0); transition-delay: 0.22s; }

/* the sub-texts are stacked in one grid cell (the cell is as tall as the longest); only .is-shown is visible.
   visibility keeps the hidden ones out of the accessibility tree while they still size the cell */
.hero-ledes { display: grid; margin-block: 22px 30px; }
.hero .lede {
  grid-area: 1 / 1;
  margin: 0;
  color: var(--on-photo-soft);
  font-size: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s 0.4s;
}
.hero .lede.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.7s cubic-bezier(.19,1,.22,1) 0.05s, transform 0.7s cubic-bezier(.19,1,.22,1) 0.05s, visibility 0s;
}
/* speech bubbles: what was said, then the next step pulled out of it; desktop only, sits right of the headline */
.hero-content .wrap { position: relative; }
.hero-talk {
  position: absolute; right: max(20px, env(safe-area-inset-right)); bottom: 0;
  width: min(360px, 34vw); display: grid;
}
.talk-pair { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; align-self: end; }
.talk-bubble, .talk-link, .talk-card {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.19,1,.22,1);
}
.talk-pair.is-in .talk-bubble { opacity: 1; transform: none; transition-delay: 0.1s; }
.talk-pair.is-in .talk-link { opacity: 1; transform: none; transition-delay: 0.9s; }
.talk-pair.is-in .talk-card { opacity: 1; transform: none; transition-delay: 1.25s; }
.talk-pair.is-out .talk-bubble, .talk-pair.is-out .talk-link, .talk-pair.is-out .talk-card {
  opacity: 0; transform: translateY(-22px); transition-duration: 0.45s; transition-delay: 0s;
}
.talk-bubble {
  align-self: flex-start; max-width: 92%;
  padding: 12px 16px 14px; border-radius: 18px 18px 18px 4px;
  background: color-mix(in srgb, var(--on-photo) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-photo) 20%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--on-photo);
}
.talk-bubble p { margin: 4px 0 0; font-size: 1rem; line-height: 1.45; }
.talk-who {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-photo-soft);
}
.talk-who svg { width: 13px; height: 13px; color: var(--accent); }
.talk-link {
  display: flex; align-items: center; gap: 8px; padding-left: 18px;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
}
.talk-link::before { content: ""; width: 1px; height: 18px; background: var(--accent); }
.talk-card {
  align-self: flex-end; width: 92%;
  padding: 14px 16px; border-radius: 4px;
  background: var(--on-photo); color: #181815;
  border-left: 3px solid var(--accent);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,0.6);
}
.talk-k { display: block; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: #687824; font-weight: 600; }
.talk-card strong { display: block; margin-top: 4px; font-size: 1.05rem; line-height: 1.3; }
.talk-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.talk-meta span { font-size: 0.8rem; padding: 3px 8px; border-radius: 999px; background: rgba(24,24,21,0.07); color: #4a4a43; }
@media (max-width: 1000px) { .hero-talk { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .talk-bubble, .talk-link, .talk-card { transition: none; }
}

/* rotation progress: six labeled segments; the active one burns down while its title holds. Each is a big tap target */
.hero-progress {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px;
  width: min(640px, 100%); margin: -14px 0 26px;
}
.hero-dot {
  appearance: none; background: none; border: 0; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 10px; padding: 12px 0 10px; min-height: 56px;
  color: var(--on-photo-soft); font: inherit;
}
.hero-dot-fill {
  position: relative; display: block; overflow: hidden; width: 100%; height: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--on-photo) 28%, transparent);
  transition: background 0.2s ease, height 0.2s ease;
}
.hero-dot-fill::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--accent); transform: scaleX(0); transform-origin: left center;
}
.hero-dot.is-burning .hero-dot-fill::after { animation: hero-burn var(--hold, 5500ms) linear forwards; }
@keyframes hero-burn { to { transform: scaleX(1); } }
.hero-dot-label { display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.2; }
.hero-dot-num { font-variant-numeric: tabular-nums; opacity: 0.6; }
.hero-dot-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-dot:hover { color: var(--on-photo); }
.hero-dot:hover .hero-dot-fill { background: color-mix(in srgb, var(--on-photo) 50%, transparent); height: 6px; }
.hero-dot.is-active { color: var(--on-photo); }
.hero-dot.is-active .hero-dot-num { color: var(--accent); opacity: 1; }
.hero-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 640px) {
  .hero-dot-name { display: none; }
  .hero-dot-label { font-size: 0.85rem; }
}

.hero .cta-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero .cta-row .hint { color: var(--on-photo-soft); font-size: 1rem; }
@media (prefers-reduced-motion: reduce) {
  .hero .lede, .hero .cta-row { transform: none; transition: none; }
  .hero .cta-row { opacity: 1; }
  .hero h1.hero-type .typed-cursor { animation: none; }
}

/* ---------- Sections ---------- */
section { padding-block: clamp(56px, 8vw, 104px); scroll-margin-top: 84px; }
.section-head h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.section-head .lede { margin-top: 16px; }

/* bento feature grid */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.bento .card { position: relative; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
a.bento-card { text-decoration: none; color: inherit; }
a.bento-card .card-more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: -4px;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85rem;
  color: var(--accent-dark);
}
a.bento-card .card-more svg { width: 15px; height: 15px; transition: transform 0.2s ease; }
a.bento-card .card-more span { transition: text-decoration-color 0.2s ease; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
a.bento-card:hover .card-more span { text-decoration-color: currentColor; }
a.bento-card:hover .card-more svg, a.bento-card:focus-visible .card-more svg { transform: translateX(3px); }
a.bento-card img { transition: transform 0.4s ease; }
a.bento-card:hover img { transform: scale(1.025); }
a.bento-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.step-num {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-display); font-weight: 800; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
}
.bento .card.wide { grid-column: span 2; }
.bento .card.full {
  grid-column: span 4;
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 28px; align-items: center;
}
.bento .card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.bento .card.full img { aspect-ratio: 16/10; height: 100%; }
.bento .card h3 { font-size: 1.4rem; margin-bottom: 6px; text-transform: none; }
.bento .card.wide h3 { font-size: 1.7rem; }
.bento .card p { color: var(--ink-soft); font-size: 1.02rem; max-width: 42ch; }

/* three equal photo cards (no wide/full spans) */
.bento.tri { grid-template-columns: repeat(3, 1fr); }

/* short pill list, e.g. "what we ask" on the design-partners page */
.tag-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 30px; }
.tag-row .tag {
  display: inline-block;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 0.85rem; padding: 8px 14px;
  background: var(--paper-raised); color: var(--ink); border: 1px solid var(--line); border-radius: 999px;
}

/* persona / talk panel */
.talk-panel { background: var(--accent); color: var(--accent-ink); padding-block: clamp(56px, 8vw, 96px); text-align: center; }
.talk-panel .ring { margin: 0 auto 34px; width: 130px; height: 130px; position: relative; }
.talk-panel .ring i {
  position: absolute; left: 50%; top: 50%; width: 6px; border-radius: 3px;
  background: var(--accent-ink); transform-origin: center 65px;
  animation: ringpulse 1.8s ease-in-out infinite;
}
@keyframes ringpulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .talk-panel .ring i { animation: none; opacity: 0.85; } }
.talk-panel h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); max-width: 20ch; margin-inline: auto; }
.talk-panel .lede { color: var(--accent-ink); opacity: 0.78; margin: 18px auto 0; }

.tabs { display: flex; justify-content: center; gap: 0; margin-top: 40px; flex-wrap: wrap; position: relative; z-index: 2; }
.tabs button {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  font-size: 1.1rem; padding: 12px 26px; background: none; border: 2px solid var(--accent-ink); color: var(--accent-ink);
  opacity: 0.8; cursor: pointer; margin: 0 -1px -1px 0; transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.tabs button svg { width: 18px; height: 18px; flex-shrink: 0; }
.tabs button:hover { opacity: 1; }
.tabs button.active { background: var(--accent-ink); color: var(--accent); opacity: 1; position: relative; z-index: 1; }
.tab-panel { display: none; max-width: 62ch; margin: 34px auto 0; text-align: center; position: relative; z-index: 2; }
.tab-panel.active { display: block; }
.tab-panel h3 { text-transform: none; font-size: 1.7rem; margin-bottom: 10px; }
.tab-panel p { color: var(--accent-ink); opacity: 0.78; font-size: 1.1rem; }


/* process page: technical pipeline, collapsed by default */
.hood { border: 1px solid var(--line); border-radius: 18px; background: var(--paper-raised); overflow: hidden; }
.hood summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px clamp(18px, 3vw, 32px); }
.hood summary::-webkit-details-marker { display: none; }
.hood summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.hood summary:hover { background: var(--paper-raised); }
.hood-kicker { display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; color: var(--accent-dark); }
.hood-title { display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.1; }
.hood .plus { position: relative; flex-shrink: 0; width: 30px; height: 30px; border: 2px solid var(--ink); border-radius: 999px; }
.hood .plus::before, .hood .plus::after { content: ""; position: absolute; background: var(--ink); }
.hood .plus::before { left: 7px; right: 7px; top: 50%; height: 2px; transform: translateY(-50%); }
.hood .plus::after { top: 7px; bottom: 7px; left: 50%; width: 2px; transform: translateX(-50%); transition: opacity 0.15s ease; }
.hood[open] .plus::after { opacity: 0; }
.hood-body { padding: 0 clamp(18px, 3vw, 32px) 32px; border-top: 1px solid var(--line); }
.hood-body .pipeline-panel { margin-top: 32px; }
/* schema comparison */
.clippings { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 44px; }
.clipping { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px; box-shadow: 0 24px 50px -34px rgba(24,24,21,0.35); }
.clipping .icon-badge { margin-bottom: 18px; }
.clipping .tag { display: inline-block; font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: color-mix(in srgb, var(--accent) 22%, var(--paper-raised)); color: var(--accent-dark); border-radius: 999px; padding: 4px 12px; margin-bottom: 16px; }
.clipping h3 { font-size: 1.7rem; text-transform: none; margin-bottom: 18px; }
.field-list { list-style: none; margin: 0; padding: 0; }
.field-list li { display: flex; justify-content: space-between; padding-block: 10px; border-top: 1px solid var(--line); font-size: 1.05rem; }
.field-list li:first-child { border-top: none; }
.field-list .type { font-family: var(--font-display); color: var(--ink-soft); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.03em; align-self: center; }
.caption { font-size: 1rem; color: var(--ink-soft); margin-top: 26px; text-align: center; }

/* use cases */
.usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.usecase { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; }
.usecase .tag { display: inline-block; align-self: flex-start; font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: color-mix(in srgb, var(--accent) 22%, var(--paper-raised)); color: var(--accent-dark); border-radius: 999px; padding: 4px 12px; }
.usecase h3 { font-size: 1.3rem; text-transform: none; }
.usecase p { color: var(--ink-soft); font-size: 1rem; }
.usecase.wide { grid-column: span 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 28px; }
.usecase.wide .usecase-head { display: flex; flex-direction: column; gap: 12px; }
.usecase.wide .usecase-head h3 { font-size: 1.5rem; }
.usecase.wide p { font-size: 1.05rem; max-width: 46ch; }
.partners-cta, .section-cta { text-align: center; margin-top: 40px; }

/* condensed use-case teaser on the homepage — full detail lives on use-cases.html */
.usecase-chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 44px; }
.usecase-chip {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 999px; padding: 8px 20px 8px 8px;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.95rem;
}

/* icon badge: the visual anchor on a card/stat/step — bigger and framed so the glyph reads as a real graphic, not a stray mark */
.icon-badge {
  position: relative;
  width: 68px; height: 68px; border-radius: 999px; flex-shrink: 0;
  background: color-mix(in srgb, var(--accent) 20%, var(--paper));
  display: flex; align-items: center; justify-content: center;
}
.icon-badge .icon { width: 36px; height: 36px; color: var(--accent-dark); display: block; }
.icon-badge.sm { width: 40px; height: 40px; }
.icon-badge.sm .icon { width: 20px; height: 20px; }
.icon-badge.lg { width: 88px; height: 88px; }
.icon-badge.lg .icon { width: 44px; height: 44px; }

/* one-shot expanding ring, played on hover by scripts/pipeline.js — sits behind nothing in
   particular, so JS can freely tween its transform without touching the badge's own transform */
.badge-ring { position: absolute; inset: 0; border-radius: 999px; border: 2px solid var(--accent-dark); opacity: 0; pointer-events: none; }

/* FAQ accordion */
.faq-list { max-width: 780px; margin: 44px auto 0; }
.faq-item { border-top: 2px solid var(--line); }
.faq-item:last-child { border-bottom: 2px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 2px; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-q { display: flex; align-items: center; gap: 16px; min-width: 0; }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.faq-item .plus { position: relative; flex-shrink: 0; width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 999px; }
.faq-item .plus::before, .faq-item .plus::after { content: ""; position: absolute; background: var(--ink); }
.faq-item .plus::before { left: 5px; right: 5px; top: 50%; height: 2px; transform: translateY(-50%); }
.faq-item .plus::after { top: 5px; bottom: 5px; left: 50%; width: 2px; transform: translateX(-50%); transition: opacity 0.15s ease; }
.faq-item[open] .plus::after { opacity: 0; }
.faq-item p { color: var(--ink-soft); font-size: 1.02rem; max-width: 68ch; padding: 0 2px 24px; }

/* proof strip */
.proof-row { display: flex; gap: 0; margin-top: 44px; border-top: 2px solid var(--line); }
.proof-row > div { flex: 1; padding: 26px 24px 0; border-right: 1px solid var(--line); }
.proof-row > div:last-child { border-right: none; }
.proof-row .icon-badge { margin-bottom: 18px; }
.proof-row h3 { font-size: 1.4rem; text-transform: none; margin-bottom: 8px; }
.proof-row p { color: var(--ink-soft); font-size: 1.02rem; }

/* final CTA */
.final-cta { position: relative; overflow: hidden; background: #10120c; }
.final-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.final-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,9,5,0.82) 0%, rgba(8,9,5,0.55) 45%, rgba(8,9,5,0.82) 100%);
}
.final-inner { position: relative; z-index: 2; text-align: center; padding-block: clamp(64px, 10vw, 120px); }
.final-inner h1, .final-inner h2 { color: var(--on-photo); font-size: clamp(2.2rem, 5.5vw, 3.6rem); max-width: 18ch; margin-inline: auto; }
.final-inner .lede { color: var(--on-photo-soft); margin: 18px auto 36px; }

/* blog-style byline row under a page-hero title, e.g. process.html */
.process-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 18px; font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--on-photo-soft); }

/* long-form article column */
.article { max-width: 740px; margin: 0 auto; }
.article > .lede { max-width: 100%; font-size: 1.2rem; margin: 0 auto 8px; text-align: center; }

/* illustrated summary of the 7-step pipeline, e.g. process.html — given its own framed
   panel (border + raised background) so it reads as the page's centerpiece rather than
   another paragraph, with a single winding path running through every stage (echoing a
   field row, not a flowchart line) and a small concrete detail floating at each stop —
   the same values the worked example uses further down the page, so the two reinforce
   each other instead of repeating the idea from scratch. */
.pipeline-panel {
  border: 1px solid var(--line); border-radius: 18px; background: var(--paper-raised);
  max-width: 1120px; margin: 56px auto 0; padding: 30px clamp(16px, 4vw, 48px) 40px;
}
.pipeline-panel-label {
  text-align: center; margin: 0 0 6px; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; color: var(--accent-dark);
}
.pipeline-illustration { position: relative; margin: 40px auto 0; max-width: 100%; }
.pipeline-track { position: absolute; left: 44px; right: 44px; top: 78px; height: 60px; color: var(--line); z-index: 0; }
.pipeline-track path { fill: none; stroke: currentColor; stroke-width: 2.5; }
.pipeline-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(7, 1fr); column-gap: 6px; }
.pipeline-node { display: grid; grid-template-rows: 46px 88px 20px 40px; row-gap: 10px; justify-items: center; text-align: center; }
.pipeline-node .icon-badge { grid-row: 2; transition: transform 0.6s ease; }
.pipeline-node .label { grid-row: 3; font-family: var(--font-display); font-size: 0.86rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); }
.pipeline-node .callout-top { grid-row: 1; align-self: end; }
.pipeline-node .callout-bottom { grid-row: 4; align-self: start; }
.pipeline-node .icon-badge .icon { transform-box: fill-box; transform-origin: 50% 50%; }

@media (min-width: 861px) {
  .pipeline-node:nth-of-type(odd) .icon-badge { transform: translateY(-10px); }
  .pipeline-node:nth-of-type(even) .icon-badge { transform: translateY(10px); }
  .pipeline-node:nth-of-type(1) { transition-delay: 0ms; }
  .pipeline-node:nth-of-type(2) { transition-delay: 90ms; }
  .pipeline-node:nth-of-type(3) { transition-delay: 180ms; }
  .pipeline-node:nth-of-type(4) { transition-delay: 270ms; }
  .pipeline-node:nth-of-type(5) { transition-delay: 360ms; }
  .pipeline-node:nth-of-type(6) { transition-delay: 450ms; }
  .pipeline-node:nth-of-type(7) { transition-delay: 540ms; }
}

.mini-wave { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 36px; }
.mini-wave span { width: 4px; border-radius: 2px; background: var(--accent-dark); display: block; }
.mini-fix { font-family: var(--font-body); font-size: 0.92rem; color: var(--ink-soft); white-space: nowrap; }
.mini-fix s { opacity: 0.5; text-decoration-color: var(--ink-soft); }
.mini-chip {
  display: inline-block; font-family: var(--font-display); font-size: 0.82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink-soft);
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px; white-space: nowrap;
}
.mini-chip.dashed { border-style: dashed; }

.pipeline-arrow { display: none; }

/* mobile: --p (0 -> 1) is written straight onto each .pipeline-node / .pipeline-arrow by
   pipeline.js on every scroll frame, so these track scroll position directly (scrubbed,
   reversible) instead of firing once when a threshold is crossed. */
@media (max-width: 860px) {
  .pipeline-panel { padding-top: 26px; }
  .pipeline-illustration { max-width: 100%; margin-top: 28px; }
  .pipeline-track { display: none; }
  .pipeline-grid { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .pipeline-node { display: flex; flex-direction: column; align-items: center; gap: 8px; --p: 0; }
  .pipeline-node .icon-badge {
    transform: scale(calc(0.6 + 0.4 * var(--p))); opacity: var(--p); transition: none;
  }
  .pipeline-node .badge-ring { opacity: calc(var(--p) * 0.5); transform: scale(calc(1 + 0.35 * var(--p))); }
  .pipeline-node .callout-top, .pipeline-node .callout-bottom { opacity: var(--p); }
  .pipeline-node .callout-top { transform: translateY(calc((1 - var(--p)) * -8px)); }
  .pipeline-node .callout-bottom { transform: translateY(calc((1 - var(--p)) * 8px)); }
  .pipeline-arrow {
    display: block; --p: 0; opacity: calc(0.3 + 0.7 * var(--p));
    color: color-mix(in srgb, var(--line), var(--accent-dark) calc(var(--p) * 100%));
  }
  .pipeline-arrow svg { width: 18px; height: 18px; display: block; transform: rotate(90deg); }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .pipeline-node .icon-badge, .pipeline-node .badge-ring,
  .pipeline-node .callout-top, .pipeline-node .callout-bottom,
  .pipeline-arrow { opacity: 1 !important; transform: none !important; color: var(--accent-dark) !important; }
}

/* numbered step-by-step breakdown */
.process-list { max-width: 740px; margin: 52px auto 0; }
.process-step { display: grid; grid-template-columns: 84px 1fr; gap: 24px; padding-block: 34px; border-top: 2px solid var(--line); }
.process-step:first-child { border-top: none; padding-top: 0; }
.process-step .num { font-family: var(--font-display); font-weight: 900; font-size: 2.8rem; line-height: 1; color: var(--accent-dark); }
.process-step h3 { font-size: 1.4rem; text-transform: none; margin-bottom: 10px; }
.process-step p { color: var(--ink-soft); font-size: 1.05rem; max-width: 58ch; }

/* pull-quote inserted mid-article */
.pull-quote { border-left: 4px solid var(--accent); margin: 8px auto 48px; padding-left: 24px; max-width: 620px; font-family: var(--font-display); font-weight: 600; text-transform: none; letter-spacing: normal; font-size: 1.5rem; line-height: 1.3; }
.pull-quote cite { display: block; margin-top: 12px; font-family: var(--font-body); font-style: normal; font-weight: 400; font-size: 0.95rem; color: var(--ink-soft); }

/* worked example: raw note -> cleaned transcript -> extracted record, e.g. process.html */
.clippings.flow { display: flex; align-items: stretch; gap: 20px; }
.clippings.flow .clipping { flex: 1; min-width: 0; }
.clippings.flow .flow-arrow { flex: 0 0 auto; align-self: center; color: var(--ink-soft); }
.clippings.flow .flow-arrow svg { width: 26px; height: 26px; display: block; }
.transcript-text { font-size: 1.05rem; line-height: 1.5; }
.transcript-text.raw { font-style: italic; color: var(--ink-soft); }
.transcript-text.raw::before, .transcript-text.raw::after { content: '"'; }

.field-list.results li { justify-content: flex-start; gap: 12px; align-items: baseline; }
.field-list.results li .field { flex: 0 0 40%; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.88rem; color: var(--ink-soft); }
.field-list.results li .val { flex: 1; font-weight: 600; }
.field-list.results li .conf { flex: 0 0 auto; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.85rem; color: var(--accent-dark); }
.field-list.results li.flag .conf { color: var(--ink-soft); border: 1px dashed var(--ink-soft); padding: 2px 8px; }

/* records dashboard mock, e.g. process.html */
.dash-panel { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 18px; padding: 24px; margin-top: 28px; overflow-x: auto; box-shadow: 0 24px 50px -34px rgba(24,24,21,0.35); }
.dash-panel .tag { display: inline-block; font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: color-mix(in srgb, var(--accent) 22%, var(--paper-raised)); color: var(--accent-dark); border-radius: 999px; padding: 4px 12px; margin-bottom: 16px; }
.dash-panel h3 { font-size: 1.4rem; text-transform: none; margin-bottom: 18px; }
.dash-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 560px; }
.dash-table th, .dash-table td { text-align: left; padding: 12px 14px 12px 0; border-top: 1px solid var(--line); }
.dash-table thead th { font-family: var(--font-display); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.05em; color: var(--ink-soft); border-top: none; }
.dash-table td.status { font-family: var(--font-display); font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent-dark); }
.dash-table tr.flag td.status { color: var(--ink-soft); }

.waitlist-card {
  background: var(--paper-raised);
  border: 1px solid var(--line); border-radius: 18px;
  max-width: 460px;
  margin-inline: auto;
  padding: 30px 28px;
  text-align: left;
  position: relative; z-index: 2;
}
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.field input, .field select {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 10px 12px;
  border: 2px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 0;
  width: 100%;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--accent-dark); }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 16px) 20px, calc(100% - 11px) 20px; background-size: 5px 5px; background-repeat: no-repeat; }
.hidden-field { position: absolute; left: -9999px; }
.waitlist-card .btn { width: 100%; justify-content: center; margin-top: 4px; }
/* form notices and the confirmation that replaces a sent form (built by main.js) */
.js-form-status { display: none; }
.js-form-status.err {
  display: block; margin-top: 14px; padding: 11px 14px;
  border-left: 3px solid var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-size: 0.95rem; line-height: 1.45; color: var(--ink);
  animation: noteIn 0.35s cubic-bezier(.2,.8,.2,1) both;
}
.waitlist-card.is-resizing { overflow: hidden; transition: height 0.45s cubic-bezier(.2,.8,.2,1); }
.waitlist-card form, .form-success { transition: opacity 0.22s ease, transform 0.22s ease; }
.waitlist-card .is-leaving { opacity: 0; transform: translateY(-8px); }
.waitlist-card.is-sent .fine { display: none; }

.form-success { text-align: center; padding-block: 14px 4px; }
.success-mark { position: relative; width: 76px; height: 76px; margin: 0 auto 22px; }
.success-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.success-mark .disc { fill: var(--accent); transform-origin: 26px 26px; animation: successPop 0.55s cubic-bezier(.2,1.5,.4,1) both; }
.success-mark .tick {
  fill: none; stroke: var(--accent-ink); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 34; stroke-dashoffset: 34;
  animation: successTick 0.4s 0.32s cubic-bezier(.6,0,.2,1) forwards;
}
.success-mark::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0;
  animation: successRing 0.9s 0.38s ease-out;
}
.success-title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.8rem, 5vw, 2.2rem); line-height: 1; letter-spacing: 0.01em;
  margin: 0 0 10px; outline: none;
}
.success-message { margin: 0 auto; max-width: 32ch; color: var(--ink-soft); line-height: 1.5; }
.success-email {
  display: inline-block; max-width: 100%; margin: 16px 0 0; padding: 6px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.88rem; color: var(--ink); overflow-wrap: anywhere;
}
.success-again {
  display: block; margin: 18px auto 0; padding: 4px 2px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 0.9rem; color: var(--ink-soft);
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.success-again:hover { color: var(--ink); text-decoration-color: var(--accent); }
.success-again:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.success-title, .success-message, .success-email, .success-again { animation: successUp 0.5s cubic-bezier(.2,.8,.2,1) both; }
.success-title { animation-delay: 0.42s; }
.success-message { animation-delay: 0.5s; }
.success-email { animation-delay: 0.58s; }
.success-again { animation-delay: 0.66s; }

@keyframes noteIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes successPop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes successTick { to { stroke-dashoffset: 0; } }
@keyframes successRing { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.65); } }
@keyframes successUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js-form-status.err, .success-mark .disc, .success-mark::after,
  .success-title, .success-message, .success-email, .success-again { animation: none; }
  .success-mark .tick { animation: none; stroke-dashoffset: 0; }
  .waitlist-card form, .form-success, .waitlist-card.is-resizing { transition: none; }
}
.fine { font-size: 0.9rem; color: var(--ink-soft); margin-top: 14px; text-align: center; }

/* footer */
footer { border-top: 1px solid var(--line); padding-block: 30px; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: baseline; }
.foot-row .navlink { font-family: var(--font-display); text-decoration: none; color: var(--ink-soft); font-size: 1rem; display: inline-block; padding-block: 10px; }
.foot-row .navlink:hover { color: var(--ink); }
.credits { margin-top: 18px; font-size: 0.82rem; color: var(--ink-soft); opacity: 0.75; line-height: 1.6; }
.credits a { text-decoration: underline; }

@media (max-width: 860px) {
  nav.masthead .links > a.navlink:not(.btn), nav.masthead .links .btn, nav.masthead .links .theme-toggle { display: none; }
  .menu-btn { display: inline-flex; }
  .mobile-menu.open {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 8px 0 20px;
  }
  .mobile-menu a.navlink {
    font-family: var(--font-display);
    padding: 14px 20px; font-size: 1.2rem; font-weight: 600; text-transform: uppercase;
    text-decoration: none; color: var(--ink); border-top: 1px solid var(--line);
  }
  .mobile-menu .mm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 4px; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento .card.wide { grid-column: span 2; }
  .bento .card.full { grid-column: span 2; grid-template-columns: 1fr; }
  .bento.tri { grid-template-columns: 1fr 1fr; }
  .clippings { grid-template-columns: 1fr; }
  .usecase-grid { grid-template-columns: 1fr 1fr; }
  .usecase.wide { grid-column: span 2; grid-template-columns: 1fr; }
  .process-step { grid-template-columns: 56px 1fr; gap: 16px; }
  .process-step .num { font-size: 2rem; }
  .proof-row { flex-direction: column; border-top: none; }
  .proof-row > div { border-right: none; border-top: 2px solid var(--ink); padding-bottom: 20px; }
  .clippings.flow { flex-direction: column; }
  .clippings.flow .flow-arrow svg { transform: rotate(90deg); margin-inline: auto; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .bento .card.wide, .bento .card.full { grid-column: span 1; }
  .bento.tri { grid-template-columns: 1fr; }
  .usecase-grid { grid-template-columns: 1fr; }
  .usecase.wide { grid-column: span 1; }
  .process-step { grid-template-columns: 1fr; gap: 8px; }
}

/* use-cases page: operation carousel — icon tabs above one stage; scripts/uc-carousel.js */
.uc-tabs { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 44px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.uc-tab { display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 10px; border-radius: 16px; text-decoration: none; color: var(--ink); transition: background-color 0.25s ease; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .uc-tab:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); } .uc-tab:hover .uc-tab-ico { transform: scale(1.06); } }
.uc-tab:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
.uc-tab-ico { position: relative; flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, var(--paper)); color: var(--accent-dark); transition: background-color 0.35s ease, color 0.35s ease, transform 0.35s cubic-bezier(.34,1.56,.64,1); }
.uc-tab-ico .icon { width: 28px; height: 28px; }
.uc-tab-ico::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; pointer-events: none; }
.uc-tab.is-active .uc-tab-ico { background: var(--accent); color: var(--accent-ink); }
.uc-tab.is-pop .uc-tab-ico { animation: ucPop 0.55s cubic-bezier(.34,1.56,.64,1); }
.uc-tab.is-pop .uc-tab-ico::after { animation: ucRing 0.7s ease-out; }
.uc-tab-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uc-tab-name { font-family: "Barlow", var(--font-body); font-weight: 700; font-size: 1.08rem; line-height: 1.15; }
.uc-tab-sub { font-size: 0.84rem; line-height: 1.3; color: var(--ink-soft); }
.uc-tabs-bar { display: none; }
@keyframes ucPop { 0% { transform: scale(1); } 35% { transform: scale(0.84); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes ucRing { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }

.uc-stage { position: relative; margin-top: 28px; scroll-margin-top: 96px; }
.uc-wipe, .uc-controls { display: none; }
.uc-detail { padding-block: clamp(40px, 5vw, 64px); }
.uc-detail + .uc-detail { border-top: 1px solid var(--line); }
.uc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.uc-tag { display: inline-flex; align-items: center; gap: 12px; font-family: "Barlow", var(--font-body); font-weight: 700; font-size: 1rem; color: var(--accent-dark); margin-bottom: 18px; }
.uc-copy h2 { font-family: "Barlow", var(--font-body); font-weight: 700; text-transform: none; letter-spacing: -0.015em; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.05; margin: 0 0 18px; }
.uc-intro { font-size: 1.2rem; line-height: 1.5; margin: 0 0 22px; max-width: 44ch; }
.uc-who { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }
.uc-who strong { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.uc-quote { margin: 0 0 30px; background: var(--ink); color: var(--paper); padding: 22px 24px 24px; border-radius: 20px; border-bottom-left-radius: 6px; position: relative; box-shadow: 0 28px 50px -32px rgba(24,24,21,0.55); }
.uc-quote figcaption { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; font-weight: 600; opacity: 0.75; margin-bottom: 10px; }
.uc-quote figcaption::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.uc-quote blockquote { margin: 0; font-family: "Barlow", var(--font-body); font-weight: 600; font-size: 1.32rem; line-height: 1.3; }
.uc-quote blockquote::before { content: '\201C'; } .uc-quote blockquote::after { content: '\201D'; }
.uc-word { display: inline-block; }
.uc-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 12px; }
.uc-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.uc-chips li { border: 1px solid var(--line); background: var(--paper-raised); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 0.95rem; }
.uc-outcomes { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.uc-outcomes li { display: flex; gap: 12px; align-items: flex-start; padding: 18px 18px 18px 16px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 500; line-height: 1.4; }
.uc-outcomes svg { flex-shrink: 0; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.uc-outcomes svg path { stroke-dasharray: 24; }

/* JS on: one stage, panels stacked in the same cell (height = tallest, so nothing jumps) */
.uc-js .uc-tabs-bar { display: block; position: absolute; left: 0; bottom: -2px; height: 3px; width: 0; border-radius: 3px; background: var(--accent-dark); transition: transform 0.5s cubic-bezier(.65,0,.35,1), width 0.5s cubic-bezier(.65,0,.35,1); }
.uc-js .uc-stage { overflow: hidden; border-radius: 28px; background: var(--paper-raised); border: 1px solid var(--line); box-shadow: 0 40px 80px -60px rgba(24,24,21,0.45); }
.uc-js .uc-panels { display: grid; }
.uc-js .uc-detail { grid-area: 1 / 1; padding: clamp(28px, 4vw, 56px) clamp(22px, 4vw, 56px) 92px; border: 0; visibility: hidden; opacity: 0; }
.uc-js .uc-detail.is-active { visibility: visible; opacity: 1; }
.uc-js .uc-controls { display: flex; align-items: center; gap: 14px; position: absolute; left: clamp(22px, 4vw, 56px); bottom: 26px; z-index: 2; }
.uc-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease; }
.uc-arrow svg { width: 18px; height: 18px; }
.uc-arrow:hover { background: var(--accent); border-color: var(--accent); transform: scale(1.06); }
.uc-arrow:active { transform: scale(0.94); }
.uc-arrow:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
.uc-count { font-size: 0.9rem; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.uc-count b { color: var(--ink); }

/* the wipe: a lime sheet carrying the new operation's icon sweeps across, the panels swap under it */
.uc-js .uc-wipe { display: block; position: absolute; inset: 0; z-index: 3; background: var(--accent); clip-path: inset(0 100% 0 0); pointer-events: none; }
.uc-wipe-ico { position: absolute; left: 50%; top: var(--iy, 50%); margin: -48px 0 0 -48px; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--accent-dark); opacity: 0; }
.uc-wipe-ico .icon { width: 48px; height: 48px; }
.uc-stage.wipe-next .uc-wipe { animation: ucWipeNext 0.76s cubic-bezier(.77,0,.18,1) both; }
.uc-stage.wipe-prev .uc-wipe { animation: ucWipePrev 0.76s cubic-bezier(.77,0,.18,1) both; }
.uc-stage.wipe-next .uc-wipe-ico, .uc-stage.wipe-prev .uc-wipe-ico { animation: ucWipeIco 0.76s ease both; }
@keyframes ucWipeNext { 0% { clip-path: inset(0 100% 0 0); } 42%, 50% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
@keyframes ucWipePrev { 0% { clip-path: inset(0 0 0 100%); } 42%, 50% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes ucWipeIco { 0%, 15% { opacity: 0; transform: scale(0.5) rotate(-12deg); } 45% { opacity: 1; transform: scale(1.05) rotate(0); } 60% { opacity: 1; transform: scale(1); } 85%, 100% { opacity: 0; transform: scale(0.85); } }
.uc-stage.is-leaving .uc-detail.is-active { transition: opacity 0.25s ease, transform 0.3s ease; opacity: 0; transform: translateX(calc(var(--lx, -1) * 24px)); }
.uc-stage.wipe-prev { --lx: 1; }

/* entrance: the pieces of the new panel land one after another */
.uc-detail.is-entering .uc-tag,
.uc-detail.is-entering .uc-copy h2,
.uc-detail.is-entering .uc-intro,
.uc-detail.is-entering .uc-who,
.uc-detail.is-entering .uc-label { animation: ucUp 0.6s cubic-bezier(.2,.8,.2,1) both; }
.uc-detail.is-entering .uc-tag { animation-delay: 0.08s; }
.uc-detail.is-entering .uc-copy h2 { animation-delay: 0.14s; }
.uc-detail.is-entering .uc-intro { animation-delay: 0.24s; }
.uc-detail.is-entering .uc-who { animation-delay: 0.32s; }
.uc-detail.is-entering .uc-tag .icon-badge { animation: ucPop 0.6s 0.15s cubic-bezier(.34,1.56,.64,1) both; }
.uc-detail.is-entering .uc-quote { animation: ucBubble 0.55s 0.2s cubic-bezier(.34,1.4,.64,1) both; transform-origin: 0 100%; }
.uc-detail.is-entering .uc-quote figcaption { animation: ucFade 0.4s 0.4s both; }
.uc-detail.is-entering .uc-word { animation: ucWord 0.4s both; animation-delay: calc(0.5s + var(--i) * 0.06s); }
.uc-detail.is-entering .uc-label { animation-delay: 0.7s; }
.uc-detail.is-entering .uc-chips li { animation: ucChip 0.45s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(0.8s + var(--i) * 0.07s); }
.uc-detail.is-entering .uc-outcomes li { animation: ucUp 0.6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(0.55s + var(--i) * 0.12s); }
.uc-detail.is-entering .uc-outcomes svg path { animation: ucCheck 0.5s ease-out both; animation-delay: calc(0.9s + var(--i) * 0.12s); }
@keyframes ucUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ucFade { from { opacity: 0; } to { opacity: 0.75; } }
@keyframes ucBubble { from { opacity: 0; transform: scale(0.6) translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ucWord { from { opacity: 0; transform: translateY(6px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ucChip { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes ucCheck { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }

@media (max-width: 1000px) {
  .uc-tabs { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .uc-tabs::-webkit-scrollbar { display: none; }
  .uc-tab { flex: 0 0 auto; scroll-snap-align: start; }
  .uc-js .uc-tabs-bar { left: 0; }
}
@media (max-width: 860px) {
  .uc-grid { grid-template-columns: 1fr; }
  .uc-js .uc-detail:not(.is-active) { display: none; } /* stage height follows the open panel; it changes under the wipe */
  .uc-outcomes { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
}
@media (max-width: 560px) {
  .uc-tabs { padding-top: 10px; margin-top: 30px; }
  .uc-tab { gap: 10px; padding: 8px 10px 8px 6px; }
  @keyframes ucRing { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
  .uc-tab-ico { width: 44px; height: 44px; }
  .uc-tab-ico .icon { width: 22px; height: 22px; }
  .uc-tab-sub { display: none; }
  .uc-js .uc-stage { border-radius: 22px; margin-inline: -4px; }
  .uc-js .uc-detail { padding-bottom: 88px; }
  .uc-quote blockquote { font-size: 1.18rem; }
}
@media (prefers-reduced-motion: reduce) {
  .uc-tab.is-pop .uc-tab-ico, .uc-tab.is-pop .uc-tab-ico::after { animation: none; }
  .uc-js .uc-tabs-bar { transition: none; }
}


/* ---------- Page hero: cinematic ----------
   Full-bleed footage, kept bright: shade only where the words sit (bottom-left) and a whisper at the top
   for the nav. Big white type, the field note as film subtitles, and a thin credits strip. */
.page-hero.cine {
  position: relative; overflow: hidden; background: #1b1f10; color: #FFFFFF; padding-block: 0;
  min-height: max(640px, 100svh); display: flex; flex-direction: column; justify-content: flex-end;
}
.cine-media {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  transform: scale(1.06); transition: transform 2.4s cubic-bezier(.19,1,.22,1);
}
.cine.is-in .cine-media { transform: scale(1); }
.cine-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,12,6,0.42) 0%, rgba(10,12,6,0) 20%),
    linear-gradient(0deg, rgba(10,12,6,0.72) 0%, rgba(10,12,6,0.34) 34%, rgba(10,12,6,0) 62%),
    linear-gradient(90deg, rgba(10,12,6,0.32) 0%, rgba(10,12,6,0) 55%);
}
.cine-inner {
  position: relative; z-index: 2; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: end; gap: 48px;
  padding-top: 140px; padding-bottom: 44px;
}
.cine .hero-copy .eyebrow {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; text-transform: none; letter-spacing: 0.01em;
  color: rgba(255,255,255,0.88);
}
.cine .hero-copy .eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.cine .hero-copy h1 {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em;
  color: #FFFFFF; font-size: clamp(2.6rem, 5.4vw, 5rem); line-height: 0.95; max-width: 20ch; text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,0.25);
}
.cine .hero-copy .lede { color: rgba(255,255,255,0.88); font-size: clamp(1.08rem, 1.35vw, 1.28rem); max-width: 44ch; margin: 24px 0 0; text-shadow: 0 1px 16px rgba(0,0,0,0.3); }
.cine .btn-solid { margin-top: 30px; background: #FFFFFF; border-color: #FFFFFF; color: #181815; border-radius: 999px; padding: 15px 26px; }
.cine .btn-solid:hover { background: var(--accent); border-color: var(--accent); color: #181815; box-shadow: none; }
.cine .hero-copy > p.reveal[style] { margin-top: 0 !important; }

/* the field note, as subtitles */
.cine-sub { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0 0 6px; }
.cine-who { display: inline-flex; align-items: center; gap: 9px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: rgba(255,255,255,0.85); }
.cine-rec { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(168,194,58,0.7); }
.cine-said {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.45; font-weight: 500; color: #FFFFFF;
  background: rgba(10,12,6,0.5); -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 3px 10px; border-radius: 4px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.cine-logged { font-size: 0.85rem; font-weight: 600; color: var(--accent); }

/* credits strip */
.cine-strip {
  position: relative; z-index: 2; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 18px 22px;
}
.cine-strip::before { content: ""; position: absolute; top: 0; left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); height: 1px; background: rgba(255,255,255,0.22); }
.cine-points { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; font-size: 0.92rem; color: rgba(255,255,255,0.8); }
.cine-scroll { display: inline-flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.85rem; flex-shrink: 0; }
.cine-scroll i { position: relative; width: 1px; height: 30px; background: rgba(255,255,255,0.3); overflow: hidden; }
.cine-scroll i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #FFFFFF; animation: cine-scroll 2s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes cine-scroll { to { top: 100%; } }
.cine-scroll:hover { color: #FFFFFF; }
#main-content { display: block; scroll-margin-top: 72px; }

/* motion (scripts/hero-motion.js adds .sub-ready and plays the line) */
.cine-shade, .cine-strip { opacity: 0; transition: opacity 1.4s ease 0.2s; }
.cine.is-in .cine-shade, .cine.is-in .cine-strip { opacity: 1; }
.sub-ready .cine-who, .sub-ready .cine-logged { opacity: 0; transform: translateY(6px); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.19,1,.22,1); }
.sub-ready .cine-said { opacity: 0; transition: opacity 0.4s ease; }
.sub-ready .cine-word { opacity: 0; transition: opacity 0.25s ease var(--d); }
.sub-ready.is-speaking .cine-who, .sub-ready.is-speaking .cine-said, .sub-ready.is-speaking .cine-word { opacity: 1; transform: none; }
.sub-ready.is-speaking .cine-rec { animation: cine-rec 1.3s ease-out infinite; }
@keyframes cine-rec { to { box-shadow: 0 0 0 9px rgba(168,194,58,0); } }
.sub-ready.is-logged .cine-logged { opacity: 1; transform: none; }
.sub-ready.is-leaving .cine-who, .sub-ready.is-leaving .cine-said, .sub-ready.is-leaving .cine-logged { opacity: 0; transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .cine-media { transform: none; transition: none; }
  .cine-shade, .cine-strip { opacity: 1; transition: none; }
  .cine-scroll i::after { animation: none; }
}

@media (max-width: 860px) {
  .page-hero.cine { min-height: max(600px, 92svh); }
  .cine-inner { grid-template-columns: 1fr; gap: 32px; padding-top: 120px; padding-bottom: 28px; }
  .cine-shade { background: linear-gradient(180deg, rgba(10,12,6,0.4) 0%, rgba(10,12,6,0) 18%), linear-gradient(0deg, rgba(10,12,6,0.8) 0%, rgba(10,12,6,0.45) 45%, rgba(10,12,6,0) 75%); }
  .cine-scroll { display: none; }
  .cine-points { gap: 4px 18px; font-size: 0.86rem; }
}

/* ---------- Process: one note, minute by minute ---------- */
.walk { list-style: none; margin: 56px 0 0; padding: 0; position: relative; }
.walk-step { position: relative; }
.walk-step:not(:last-child)::before { content: ""; position: absolute; left: 47px; top: 16px; bottom: -16px; width: 2px; background: var(--line); }
.walk-step { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px clamp(24px, 4vw, 56px); align-items: start; padding-bottom: 72px; }
.walk-step:last-child { padding-bottom: 0; }
.walk-step:last-child { padding-bottom: 0; }
.walk-time { position: relative; display: flex; justify-content: center; padding-top: 2px; }
.walk-time span {
  position: relative; z-index: 1; background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-body); font-weight: 700; font-size: 0.92rem; font-variant-numeric: tabular-nums;
  padding: 6px 12px; border-radius: 999px; box-shadow: 0 0 0 6px var(--paper);
}
.walk-copy h3 { font-family: "Barlow", var(--font-body); font-weight: 700; text-transform: none; letter-spacing: -0.012em; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; margin: 0 0 12px; }
.walk-copy p { margin: 0; color: var(--ink-soft); font-size: 1.06rem; max-width: 42ch; }

.wv-card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; box-shadow: 0 24px 50px -30px rgba(24,24,21,0.35); }
.wv-voice { display: flex; align-items: center; gap: 12px; background: color-mix(in srgb, var(--accent) 22%, var(--paper-raised)); border-radius: 999px; padding: 6px 14px 6px 6px; }
.wv-play { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-dark); color: #FFFFFF; }
.wv-play svg { width: 15px; height: 15px; margin-left: 2px; }
.wv-wave { flex: 1; display: flex; align-items: center; justify-content: space-between; height: 22px; }
.wv-wave i { flex: 0 0 3px; height: var(--h); background: var(--accent-dark); border-radius: 2px; }
.wv-dur { font-size: 0.8rem; font-weight: 600; color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.wv-quote { margin: 14px 2px 2px; font-size: 1.04rem; line-height: 1.5; }

.wv-row { display: flex; align-items: center; gap: 14px; }
.wv-row + .wv-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.wv-row b { display: block; font-size: 1rem; }
.wv-row small { display: block; font-size: 0.88rem; color: var(--ink-soft); }
.wv-ico { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; }
.wv-ico svg { width: 20px; height: 20px; }
.wv-ico.is-off { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-soft); }
.wv-ico.is-on { background: var(--accent); color: var(--accent-ink); }
.wv-ico.is-on svg { width: 16px; height: 16px; }

.wv-title { margin: 0 0 12px; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.wv-record dl { margin: 0; }
.wv-record dl > div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.wv-record dt { font-size: 0.88rem; color: var(--ink-soft); }
.wv-record dd { margin: 0; font-weight: 600; }
.wv-record .is-missing dd { color: var(--accent-dark); font-weight: 600; }
.wv-record .is-missing dd::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 8px; vertical-align: 1px; }

.wv-chat { display: flex; flex-direction: column; gap: 10px; }
.wv-msg { margin: 0; max-width: 82%; padding: 12px 16px; border-radius: 18px; font-size: 1.02rem; line-height: 1.4; }
.wv-msg.is-them { align-self: flex-start; background: var(--paper-raised); border: 1px solid var(--line); border-bottom-left-radius: 6px; box-shadow: 0 18px 40px -28px rgba(24,24,21,0.35); }
.wv-msg.is-me { align-self: flex-end; background: var(--accent-dark); color: #FFFFFF; border-bottom-right-radius: 6px; }
.wv-done { align-self: flex-end; display: inline-flex; align-items: center; gap: 6px; margin: 2px 4px 0 0; font-size: 0.85rem; font-weight: 600; color: var(--accent-dark); }
.wv-done svg { width: 14px; height: 14px; }

.wv-av { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 30%, var(--paper-raised)); color: var(--accent-ink); font-weight: 700; }
.walk-next { margin: 64px 0 0; padding-top: 28px; border-top: 1px solid var(--line); font-size: 1.08rem; color: var(--ink-soft); }
.walk-next a { color: var(--ink); font-weight: 600; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; margin-left: 6px; }

/* the chat replies arrive in order once the step scrolls in */
.walk-step.reveal .wv-msg, .walk-step.reveal .wv-done { opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.19,1,.22,1); }
.walk-step.reveal.is-visible .wv-msg.is-them { opacity: 1; transform: none; transition-delay: 0.3s; }
.walk-step.reveal.is-visible .wv-msg.is-me { opacity: 1; transform: none; transition-delay: 1.1s; }
.walk-step.reveal.is-visible .wv-done { opacity: 1; transform: none; transition-delay: 1.7s; }
@media (prefers-reduced-motion: reduce) { .walk-step.reveal .wv-msg, .walk-step.reveal .wv-done { opacity: 1; transform: none; transition: none; } }

@media (max-width: 860px) {
  .walk-step:not(:last-child)::before { left: 31px; }
  .walk-step { grid-template-columns: 64px minmax(0, 1fr); padding-bottom: 56px; }
  .walk-visual { grid-column: 2; }
  .walk-time span { padding: 5px 9px; font-size: 0.82rem; }
  .wv-record dl > div { grid-template-columns: 72px 1fr; }
}

/* ---------- process page: merged "ways in / your fields / shared workspace" sections ---------- */
/* one product-UI card language, matching the walkthrough's .wv-card */
.ui-card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; box-shadow: 0 24px 50px -34px rgba(24,24,21,0.35); }
.ui-card-title { margin: 0 0 14px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; color: var(--accent-dark); }

/* ways in: three channels, then what a no-signal note goes through */
.ways { display: grid; gap: 36px; margin-top: 44px; }
.channel-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) and (min-width: 861px) { .channel-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.channel-list li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.channel-list b { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: 1.3rem; letter-spacing: 0.01em; }
.channel-list small { display: block; color: var(--ink-soft); font-size: 0.95rem; }
.sync-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.sync-track::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 22px; height: 2px; background: linear-gradient(90deg, var(--line), var(--accent-dark)); }
.sync-track li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.sync-dot { width: 46px; height: 46px; border-radius: 999px; display: grid; place-items: center; background: var(--paper-raised); border: 1px solid var(--line); color: var(--accent-dark); margin-bottom: 8px; }
.sync-dot .icon { width: 22px; height: 22px; }
.sync-track .is-off .sync-dot { color: var(--ink-soft); border-style: dashed; }
.sync-track .is-done .sync-dot { background: var(--accent-dark); border-color: var(--accent-dark); color: #FFFFFF; }
.sync-track b { font-family: var(--font-display); text-transform: uppercase; font-size: 1.1rem; letter-spacing: 0.02em; }
.sync-track small { color: var(--ink-soft); font-size: 0.92rem; }

/* your fields: a field-builder screen next to an extracted, confidence-scored record */
.fields-demo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 44px; align-items: start; }
.fb-list, .conf-list { list-style: none; margin: 0; padding: 0; }
.fb-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 12px; border-top: 1px solid var(--line); font-weight: 600; }
.fb-list li:first-child { border-top: none; }
.fb-type { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.85rem; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.fb-list li.is-editing { background: color-mix(in srgb, var(--accent) 14%, var(--paper-raised)); border-radius: 10px; outline: 2px solid var(--accent); outline-offset: -2px; }
.fb-list li.is-editing .fb-type { color: var(--accent-dark); }
.fb-add { margin: 12px 0 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.95rem; color: var(--accent-dark); }
.conf-list li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 72px 3rem; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.conf-list li:first-child { border-top: none; }
.conf-k { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.88rem; color: var(--ink-soft); }
.conf-v { font-weight: 600; }
.conf-m { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.conf-m i { display: block; height: 100%; width: var(--c); background: var(--accent-dark); border-radius: inherit; }
.conf-n { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--accent-dark); text-align: right; }
.conf-list li.is-flag .conf-v { color: var(--ink-soft); font-weight: 400; font-style: italic; }
.conf-pill { grid-column: 3 / 5; justify-self: end; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85rem; background: #E9A23B; color: #1d1405; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }

/* shared workspace: big numerals, then the table */
.stat-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 44px 0 0; border-top: 2px solid var(--line); }
.stat-strip > div { padding: 22px 24px 0; border-right: 1px solid var(--line); display: flex; flex-direction: column-reverse; gap: 6px; }
.stat-strip > div:last-child { border-right: none; }
.stat-strip dt { color: var(--ink-soft); font-size: 1rem; }
.stat-strip dd { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(2.8rem, 5vw, 4rem); line-height: 0.9; }
.dash-table tr.flag td.status { color: #B46F0E; }
#workspace .tag-row { justify-content: flex-start; }
/* the merged sections read as one story, so they sit closer together than unrelated sections */
#ways-in, #fields, #workspace { padding-block: clamp(40px, 6vw, 72px); }

@media (max-width: 860px) {
  .channel-list, .fields-demo { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr; }
  .stat-strip > div { border-right: none; border-top: 1px solid var(--line); padding: 18px 0 0; }
  .stat-strip > div:first-child { border-top: none; }
}
@media (max-width: 560px) {
  .sync-track b { font-size: 0.95rem; }
  .sync-track small { font-size: 0.82rem; }
  .conf-list li { grid-template-columns: 4.6rem minmax(0, 1fr) 48px 2.6rem; gap: 8px; }
}

/* dark mode: the full-bleed lime band glares on a dark page, so it becomes dark olive with lime accents */
:root[data-theme="dark"] .talk-panel { background: #22280f; color: var(--ink); }
:root[data-theme="dark"] .talk-panel .lede, :root[data-theme="dark"] .talk-panel .tab-panel p { color: var(--ink-soft); opacity: 1; }
:root[data-theme="dark"] .talk-panel .ring i { background: var(--accent); }
:root[data-theme="dark"] .talk-panel .tabs button { border-color: var(--accent); color: var(--ink); }
:root[data-theme="dark"] .talk-panel .tabs button.active { background: var(--accent); color: var(--accent-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .talk-panel { background: #22280f; color: var(--ink); }
  :root:not([data-theme="light"]) .talk-panel .lede, :root:not([data-theme="light"]) .talk-panel .tab-panel p { color: var(--ink-soft); opacity: 1; }
  :root:not([data-theme="light"]) .talk-panel .ring i { background: var(--accent); }
  :root:not([data-theme="light"]) .talk-panel .tabs button { border-color: var(--accent); color: var(--ink); }
  :root:not([data-theme="light"]) .talk-panel .tabs button.active { background: var(--accent); color: var(--accent-ink); }
}

/* footer founder line */
.founder-line { margin-top: 14px; font-size: 0.95rem; color: var(--ink-soft); max-width: 70ch; }
.founder-line a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; white-space: nowrap; }