/* Owómidé coming-soon site. Bone, green and gold palette. Brand fonts. */

/* DM Sans only fills in the symbols Open Sauce Sans lacks (arrows, maths, fractions), so it is
   subset to those and downloaded only by a page that uses one. */
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-Symbols.woff2") format("woff2"); font-weight: 100 1000; font-display: swap;
  unicode-range: U+00AC, U+00B2-00B3, U+00B5, U+00B9, U+00BC-00BE, U+0111, U+0114-0115, U+0126-0129, U+012C-012D, U+0132-0133, U+013F-0140, U+014A-014B, U+014E-014F, U+0168-0169, U+016C-016D, U+018F, U+0259, U+1EBC-1EBD, U+1EF8-1EF9, U+2021, U+2074, U+20A8, U+20B9-20BA, U+20BD, U+2113, U+2126, U+212E, U+2190-2199, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265; }
@font-face { font-family: "Open Sauce Sans"; src: url("fonts/OpenSauceSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("fonts/OpenSauceSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("fonts/OpenSauceSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("fonts/OpenSauceSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --green: #06332c;
  --green-2: #0c4a40;
  --teal: #2e7a6b;
  --gold: #d8b352;
  --gold-dark: #946405;
  --bone: #f5f1e9;
  --cream: #f6eadc;
  --paper: #fffdf8;
  --white: #ffffff;
  --ink: #13211e;
  --muted: #62706c;
  --line: #d9ded8;
  --line-strong: #bdc8c1;
  --positive: #1f6b50;
  --positive-soft: #e6f1ea;
  --danger: #a14438;
  --danger-soft: #f8e9e5;
  --focus: #1c5dbf;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font-text: "Open Sauce Sans", "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
/* The sticky header is 72px tall: every jump and every keyboard focus stops just below it.
   Sections add only any extra breathing room they want on top of that. */
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--bone); color: var(--ink); font-family: var(--font-text); font-size: 16px; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; background: var(--white); color: var(--green); font-weight: 700; padding: 12px 16px; border-radius: 6px; z-index: 200; }
.skip-link:focus { top: 12px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; padding: 0 clamp(16px, 4.4vw, 68px); background: rgba(245, 241, 233, .92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.brand-group { display: flex; align-items: center; gap: 14px; flex: none; }
.brand-link { display: inline-flex; align-items: center; flex: none; }
.brand-link img { height: 30px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { white-space: nowrap; padding: 8px 12px; border-radius: 10px; color: #3d4b47; font-size: 14px; line-height: 20px; text-decoration: none; transition: background .14s ease, color .14s ease; }
.nav a:hover { background: rgba(6, 51, 44, .06); color: var(--green); }
.nav a[aria-current="page"] { padding: 7px 11px; border: 1px solid var(--line); background: var(--white); color: var(--green); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 38, 34, .05); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.menu-button { display: none; width: 44px; height: 44px; border: 0; background: transparent; color: var(--green); border-radius: 10px; cursor: pointer; }
.menu-button svg { width: 24px; height: 24px; }

/* Buttons */
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; overflow: hidden; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; transition: transform .18s var(--ease), background .14s ease, box-shadow .18s ease; }
.primary-button { padding: 0 0 0 19px; border: 1px solid var(--green); background: var(--green); color: var(--white); box-shadow: inset 0 1px rgba(255, 255, 255, .1); }
.primary-button > span:first-child { padding-right: 17px; }
.primary-button__icon { display: grid; width: 46px; min-height: 48px; place-items: center; border-left: 1px solid rgba(246, 234, 220, .18); color: var(--gold); }
.primary-button__icon svg { width: 17px; height: 17px; transition: transform .22s var(--ease); }
.primary-button:hover { transform: translateY(-1px); background: var(--green-2); box-shadow: 0 10px 24px rgba(6, 51, 44, .16), inset 0 1px rgba(255, 255, 255, .12); }
.primary-button:hover .primary-button__icon svg { transform: translate(2px, -2px); }
.secondary-button { padding: 0 19px; border: 1px solid var(--line-strong); background: var(--white); color: var(--green); box-shadow: 0 1px 2px rgba(15, 38, 34, .05); }
.secondary-button:hover { background: var(--paper); transform: translateY(-1px); }
.primary-button--sm, .secondary-button--sm { min-height: 40px; font-size: 13px; }
.primary-button--sm { padding: 0 18px; }
.primary-button--sm > span:first-child { padding-right: 0; }
.secondary-button--sm { padding: 0 16px; }

.eyebrow { margin: 0 0 18px; color: var(--gold-dark); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* Hero */
.story-hero { display: grid; grid-template-columns: minmax(360px, .76fr) minmax(0, 1.52fr); align-items: center; gap: clamp(40px, 4.4vw, 70px); max-width: 1600px; min-height: 704px; margin-inline: auto; padding: 48px clamp(16px, 4.4vw, 68px) 56px; }
.story-hero__copy { max-width: 490px; }
.story-hero__copy .eyebrow { margin-bottom: 0; }
/* "Coming soon" sits above the headline on the home page */
.story-hero__soon { margin: 0; gap: 10px; font-size: 17px; }
.story-hero__soon i { width: 10px; height: 10px; }
.story-hero__copy h1 { max-width: 530px; margin: 14px 0 0; color: var(--green); font-size: clamp(55.5px, 5.25vw, 83.5px); font-weight: 500; letter-spacing: -.07em; line-height: .88; }
.story-hero__copy h1 span { color: var(--gold-dark); }
.story-hero__lede span { white-space: nowrap; }
.story-hero__copy > p:not(.eyebrow) { max-width: 480px; text-wrap: balance; margin: 24px 0 0; color: #40504b; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.62; }
.story-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 28px; }
.hero-quickstart { display: flex; align-items: center; gap: 6px; max-width: 460px; margin-top: 28px; padding: 6px 6px 6px 20px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--white); box-shadow: 0 16px 36px rgba(15, 38, 34, .07); }
.hero-quickstart input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; }
.hero-quickstart input::placeholder { color: var(--muted); }
.hero-quickstart input:focus-visible { outline: none; }
.hero-quickstart:focus-within { border-color: var(--green); }
.hero-quickstart button { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 48px; padding: 0 8px 0 18px; border: 0; border-radius: 10px; background: var(--green); color: var(--white); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .15s; }
.hero-quickstart button:hover { background: var(--green-2, var(--green)); }
.hero-quickstart button .primary-button__icon { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; }
.hero-quickstart button .primary-button__icon svg { width: 16px; height: 16px; }
.hero-quickstart__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; }
.hero-quickstart__foot .hero-status { margin: 0; }
@media (max-width: 480px) {
  .hero-quickstart { flex-wrap: wrap; padding: 14px; }
  .hero-quickstart input { flex-basis: 100%; padding: 8px 4px; }
  .hero-quickstart button { flex: 1; justify-content: center; }
}
/* Darker than --muted: the translucent header can sit over the dark bands. */
.soon-note { display: inline-flex; align-items: center; gap: 8px; color: #4f5c58; font-size: 13px; }
.soon-note i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }

/* Product in use: a simulated Owómidé workspace */
.film { container-type: inline-size; overflow: hidden; border: 1px solid rgba(6, 51, 44, .2); border-radius: 12px; background: #f1f2f1; box-shadow: 0 28px 84px rgba(24, 45, 39, .1), 0 4px 18px rgba(24, 45, 39, .04); }
.film__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 0 16px; border-bottom: 1px solid var(--line); background: rgba(255, 253, 248, .9); }
.film__dots { display: flex; gap: 6px; }
.film__dots i { width: 9px; height: 9px; border-radius: 50%; background: #d9ded8; }
.ico { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.story-hero__media { min-width: 0; }
.film-note { margin: 12px 2px 0; color: #8a9591; font-size: 12px; text-align: right; }

/* Market switcher: the launch markets, with the one on screen opened out to its city */
.mkts { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: #f4f5f3; }
.mkt { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; color: var(--muted); font-size: 11px; white-space: nowrap; transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); }
.mkt b { font-weight: 600; letter-spacing: .06em; }
.mkt__city { overflow: hidden; max-width: 0; opacity: 0; color: var(--ink); font-weight: 500; transition: max-width .45s var(--ease), opacity .3s ease, margin .45s var(--ease); }
.mkt.is-on { background: var(--white); color: var(--gold-dark); box-shadow: 0 1px 2px rgba(15, 38, 34, .08), 0 0 0 1px rgba(15, 38, 34, .06); }
.mkt.is-on .mkt__city { max-width: 110px; margin-right: 7px; opacity: 1; }

/* Pause / play, with a ring that fills as the current flow plays through */
.film__toggle { position: relative; display: grid; place-items: center; width: 32px; height: 32px; flex: none; padding: 0; border: 0; border-radius: 50%; background: var(--white); color: var(--green); cursor: pointer; }
.film__toggle:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; }
.film__ring { position: absolute; inset: 0; width: 32px; height: 32px; transform: rotate(-90deg); fill: none; stroke-width: 2; }
.film__ring circle:first-child { stroke: var(--line-strong); }
.film__ring-bar { stroke: var(--gold-dark); stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; transition: stroke-dashoffset .6s var(--ease); }
.film__toggle .i-pause, .film__toggle .i-play { position: relative; width: 11px; height: 11px; }
.film__toggle .i-play { display: none; margin-left: 1px; }
.film.is-paused .film__toggle .i-play { display: block; }
.film.is-paused .film__toggle .i-pause { display: none; }
@media (prefers-reduced-motion: reduce) { .mkt, .mkt__city, .film__ring-bar, .film .show { transition: none; } }

.film__stage { position: relative; height: 500px; overflow: hidden; }
.app { display: grid; grid-template-columns: 152px minmax(0, 1fr); height: 100%; }

/* Sidebar */
.side { display: flex; flex-direction: column; gap: 1px; padding: 12px 10px 10px; border-right: 1px solid var(--line); background: #f1f2f1; }
.side__brand { padding: 2px 6px 9px; }
.side__brand img { width: 108px; height: auto; }
.side__sep { height: 1px; margin: 5px 8px; background: var(--line); }
.nav-i { display: flex; align-items: center; gap: 9px; height: 28px; padding: 0 9px; border: 1px solid transparent; border-radius: 8px; color: #53655f; font-size: 12px; white-space: nowrap; }
.nav-i svg { width: 14px; height: 14px; flex: none; }
.nav-i.is-on { border-color: var(--line); background: var(--white); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 38, 34, .05); }
.side__foot { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 8px 6px 0; border-top: 1px solid var(--line); }
.av { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--green-2); color: #fff; font-size: 11px; font-weight: 700; }
.who { display: grid; line-height: 1.25; min-width: 0; }
.who b { font-size: 11.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.who small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }

/* Main */
.main { position: relative; min-width: 0; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 52px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.top h3 { margin: 0; color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.badge { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--white); color: var(--ink); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #d8ae52; }
.dot--pos { background: var(--positive); }
.dot--neg { background: var(--danger); }
.dot--grey { background: #84908c; }

.screen { position: absolute; inset: 52px 0 0 0; display: none; padding: 14px 18px 16px; }
.screen.is-on { display: block; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--white); color: var(--ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 1px 2px rgba(15, 38, 34, .05); transition: transform .15s ease, box-shadow .15s ease, background .15s; }
.btn--brand { border-color: var(--green); background: var(--green); color: #fff; box-shadow: inset 0 1px rgba(255, 255, 255, .12); }
.btn.is-hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(6, 51, 44, .18); }
.btn.is-press { transform: scale(.96); }
.btn.is-done { opacity: .45; }

.tray { display: grid; gap: 6px; padding: 6px; border-radius: 16px; background: #e7eae8; }
.card { border: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: 0 1px 2px rgba(15, 38, 34, .05); }
.tile { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: #e6ece8; color: var(--green); }
.tile svg { width: 16px; height: 16px; }
.tile--ink { background: var(--green); color: #fff; }
.tile--ai { background: var(--green); color: var(--gold); }
.tile--ok { background: var(--positive-soft); color: var(--positive); }
.tile--warn { background: #f6eed5; color: #7a5304; }
.tile--bad { background: var(--danger-soft); color: var(--danger); }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.hide { opacity: 0; transform: translateY(6px); }
.show { opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .55s var(--ease); }

/* S1 exposure */
.alert { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; }
.alert__l { display: flex; align-items: center; gap: 12px; }
.alert__fig { font-size: 34px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.alert__txt { display: grid; gap: 2px; font-size: 12.5px; color: #40504b; }
.alert__txt b { color: var(--ink); font-size: 13px; }
.rows { display: grid; gap: 6px; margin-top: 6px; }
.row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 76px 130px; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; }
.row b { font-size: 12.5px; font-weight: 600; }
.row small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
.row .m { text-align: right; font-size: 13px; font-weight: 700; }
.row .st { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; }
.st--neg { color: var(--danger); }
.st--grey { color: #53655f; }
.st--pos { color: var(--positive); }
.sq { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #e6ece8; color: var(--green); font-size: 12px; font-weight: 700; }

/* S2 plan */
.steps { display: flex; gap: 4px; margin-bottom: 10px; }
.steps span { flex: 1; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--muted); font-size: 10.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.steps span.is-on { border-color: var(--gold-dark); color: var(--green); background: #fbf6e6; }
.steps span.is-past { color: var(--green); }
.ai { display: grid; gap: 10px; padding: 14px; }
.ai__head { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.prompt { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: #f7f8f7; font-size: 13px; color: var(--ink); }
.caret { display: inline-block; width: 1.5px; height: 15px; margin-left: 2px; background: var(--green); animation: blink 1s steps(2) infinite; }
.reply { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid rgba(6, 51, 44, .14); border-radius: 10px; background: #f1f5f2; font-size: 12.5px; line-height: 1.5; color: #24403a; }
.reply ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.reply li { display: flex; align-items: center; gap: 8px; }
.reply li i { width: 6px; height: 6px; border-radius: 50%; background: var(--green-2); }
.reply small { color: #536a63; font-size: 11.5px; }
.think { display: inline-flex; gap: 4px; }
.think i { width: 6px; height: 6px; border-radius: 50%; background: var(--green-2); animation: pulse 1s ease-in-out infinite; }
.think i:nth-child(2) { animation-delay: .15s; }
.think i:nth-child(3) { animation-delay: .3s; }
.actions { display: flex; justify-content: flex-end; gap: 8px; }

/* S3 check */
.tbl { display: grid; }
.tbl__h, .tbl__r { display: grid; grid-template-columns: minmax(0, 1.5fr) 1fr 1fr .8fr 1.25fr; align-items: center; gap: 10px; padding: 0 12px; }
.tbl__h { min-height: 30px; color: var(--muted); font-size: 11px; font-weight: 500; }
.tbl__r { min-height: 42px; border-top: 1px solid var(--line); font-size: 12.5px; }
.tbl__r b { font-weight: 600; }
.tbl__r .num { font-weight: 600; }
.arrow { color: var(--muted); }
.sum { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 6px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--white); }
.sum > div { display: grid; gap: 2px; padding: 8px 12px; border-right: 1px solid var(--line); }
.sum > div:last-child { border-right: 0; }
.sum small { color: var(--muted); font-size: 11px; }
.sum b { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.sum .risk b { color: var(--danger); }
.guards { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* S4 approve */
.prop { display: grid; gap: 0; }
.prop__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.prop__h b { font-size: 14px; font-weight: 600; }
.prop__h small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); }
.facts > div { display: grid; gap: 2px; padding: 10px 14px; border-right: 1px solid var(--line); }
.facts > div:last-child { border-right: 0; }
.facts small { font-size: 11px; color: var(--muted); }
.facts b { font-size: 16px; font-weight: 600; }
.note { display: grid; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.note small { font-size: 11px; color: var(--muted); }
.comment { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: #f7f8f7; font-size: 12.5px; }
.sealed { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-top: 6px; border-radius: 10px; background: #e6f1ea; color: #14523c; font-size: 12px; font-weight: 600; }
.sealed svg { width: 15px; height: 15px; }

/* S5 publish */
.tg { display: grid; gap: 6px; margin-top: 6px; }
.tg__r { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; }
.tg__r b { font-size: 13px; font-weight: 600; }
.tg__r small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
.stat { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: #53655f; }
.stat.is-ok { color: var(--positive); }
.stat .dot { background: #d8ae52; }
.stat.is-ok .dot { background: var(--positive); }
.spin { width: 12px; height: 12px; border: 2px solid #d8ae52; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }

/* S6 track */
.res { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.res .card { padding: 12px 14px; }
.res small { color: var(--muted); font-size: 11.5px; }
.big { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; font-size: 32px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.big s { color: var(--muted); font-size: 18px; font-weight: 500; text-decoration-thickness: 1.5px; }
.delta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--positive); font-size: 12px; font-weight: 600; }
.dm { display: block; width: 100%; height: 64px; margin-top: 8px; }
.tl { display: grid; gap: 0; margin-top: 6px; padding: 6px 14px; }
.tl__r { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 30px; font-size: 12px; }
.tl__r i { width: 8px; height: 8px; border-radius: 50%; background: var(--positive); }
.tl__r span { color: var(--muted); font-size: 11.5px; }

/* Cursor */
.cursor { position: absolute; z-index: 20; left: 0; top: 0; width: 22px; height: 22px; pointer-events: none; opacity: 0; transition: transform .95s cubic-bezier(.45, .05, .25, 1), opacity .3s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.cursor.is-on { opacity: 1; }
.cursor svg { width: 22px; height: 22px; }
.ring { position: absolute; z-index: 19; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 2px solid var(--gold-dark); border-radius: 50%; opacity: 0; pointer-events: none; }
.ring.go { animation: ring .6s ease-out; }

/* Steps rail */
.film__rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; min-height: 40px; padding: 10px 16px 12px; border-top: 1px solid var(--line); background: rgba(255, 253, 248, .9); }
.seg { position: relative; min-height: 28px; padding: 8px 0 4px; border: 0; background: transparent; color: #7a8581; font-size: 11.5px; font-weight: 600; text-align: left; cursor: pointer; }
.seg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #e1e5df; }
.seg i { position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--gold-dark); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.seg.is-done i, .seg.is-active i { transform: scaleX(1); }
.seg.is-active { color: var(--green); }

/* Flow tabs and flow title card */
.film__flows { display: flex; gap: 6px; padding: 8px 16px; overflow-x: auto; border-bottom: 1px solid var(--line); background: rgba(255, 253, 248, .9); scrollbar-width: none; }
.film__flows::-webkit-scrollbar { display: none; }
.flow { display: flex; flex: 1 0 auto; align-items: center; justify-content: flex-start; gap: 8px; height: 32px; padding: 0 12px 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; text-align: left; cursor: pointer; transition: border-color .25s, background .25s, color .25s; }
.flow b { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; background: #e7eae8; color: #53655f; font-size: 10.5px; font-weight: 700; transition: background .25s, color .25s; }
.flow.is-active { border-color: var(--gold-dark); background: #fbf6e6; color: var(--green); }
.flow.is-active b { background: var(--gold-dark); color: #fff; }
.gone { display: none; }
@container (max-width: 700px) {
  .film__flows { gap: 5px; padding: 8px 12px; }
  .flow { gap: 6px; padding: 0 9px 0 8px; font-size: 11.5px; }
}
@container (max-width: 560px) {
  .film__dots { display: none; }
  .film__bar { padding: 0 12px; }
}
@container (max-width: 400px) {
  .mkts { gap: 2px; }
  .mkt { padding: 0 6px; }
  .mkt.is-on .mkt__city { max-width: 80px; margin-right: 5px; }
}

/* More product scenes */
.tog { position: relative; width: 34px; height: 20px; flex: none; border-radius: 999px; background: #cfd6d2; transition: background .25s; }
.tog i { position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .25s var(--ease); }
.tog.is-on { background: var(--green); }
.tog.is-on i { transform: translateX(14px); }
.rule__h { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.rule__h b { font-size: 13px; font-weight: 600; line-height: 1.35; }
.rule__h small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; font-weight: 400; }
.rule__r { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 0 14px; font-size: 12.5px; }
.rule__r + .rule__r { border-top: 1px solid var(--line); }
.evi { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 48px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: #f7f8f7; }
.evi b { font-size: 12.5px; font-weight: 600; }
.evi small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.tbl__r small { display: block; color: var(--muted); font-size: 10.5px; font-weight: 400; }
.tbl--cmp .tbl__h, .tbl--cmp .tbl__r { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
.tbl--cmp .tbl__r { min-height: 46px; }
.tbl--cmp .is-best { justify-self: start; padding: 3px 9px; margin-left: -9px; border-radius: 7px; background: #e6f1ea; color: #14523c; }
.sc-grid, .choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sc { display: grid; gap: 8px; align-content: start; padding: 12px; }
.sc__l { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--green); color: #fff; font-size: 12px; font-weight: 700; }
.sc b, .pick b { font-size: 13px; font-weight: 600; }
.sc small, .pick small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.sc__p { font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.tag { display: inline-flex; align-items: center; justify-self: start; min-height: 22px; padding: 3px 8px; border-radius: 6px; background: #e6f1ea; color: #14523c; font-size: 10.5px; font-weight: 700; line-height: 1.25; }
.tag--asm { background: #fbf1cf; color: #6b4a04; }
.hint { margin: 10px 2px 0; color: #53655f; font-size: 12px; line-height: 1.5; }
.pick { display: grid; gap: 6px; align-content: start; padding: 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: 0 1px 2px rgba(15, 38, 34, .05); transition: opacity .45s var(--ease), transform .55s var(--ease), border-color .25s, background .25s, box-shadow .25s; }
.pick.is-picked { border-color: var(--gold-dark); background: #fbf6e6; box-shadow: 0 8px 20px rgba(148, 100, 5, .14); }
.tr__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; }
.tr__top small { color: var(--muted); font-size: 11.5px; }
.tr__r { display: grid; grid-template-columns: minmax(0, 1fr) auto 92px; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-top: 1px solid var(--line); }
.tr__r b { font-size: 12.5px; font-weight: 600; }
.tr__r small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.tr__v { font-size: 15px; font-weight: 600; }
.tr__r .tag { justify-self: end; }
.formula { padding: 11px 14px; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; background: #f7f8f7; color: #40504b; font-size: 12.5px; }
.thread { display: grid; padding: 2px 14px; }
.cm { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 10px 0; }
.cm + .cm { border-top: 1px solid var(--line); }
.cm b { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; }
.cm b small { color: var(--muted); font-size: 11px; font-weight: 400; }
.cm p { margin: 2px 0 0; color: #40504b; font-size: 12.5px; line-height: 1.45; }
.diff__h, .diff__r { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 10px; padding: 0 14px; }
.diff__h { min-height: 32px; color: var(--muted); font-size: 11px; }
.diff__r { min-height: 44px; border-top: 1px solid var(--line); font-size: 12.5px; }
.diff__r b { font-weight: 600; }
.old { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.new { color: var(--ink); font-weight: 600; }
.same { color: var(--muted); }
.chain__r { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 0 14px; border-top: 1px solid var(--line); }
.chain__r b { font-size: 12.5px; font-weight: 600; }
.chain__r small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.cd { display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid #d5dbd7; border-radius: 50%; color: #fff; transition: background .3s, border-color .3s; }
.cd svg { width: 12px; height: 12px; opacity: 0; transition: opacity .3s; }
.cd--ok { border-color: var(--positive); background: var(--positive); }
.cd--ok svg { opacity: 1; }
.tl__r b small { margin-left: 8px; color: var(--muted); font-size: 11.5px; font-weight: 400; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ring { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.4); } }


@media (max-width: 1180px) {
  .header-actions .secondary-button { display: none; }
}
@media (max-width: 1100px) {
  .story-hero { grid-template-columns: 1fr; min-height: auto; gap: 48px; padding-top: 48px; }
  .story-hero__copy, .story-hero__copy h1 { max-width: 760px; }
  .story-hero__copy h1 { font-size: 75.5px; }
}
@media (max-width: 960px) {
  .nav { display: none; }
  .nav.is-open { position: absolute; top: 72px; left: 0; right: 0; display: grid; gap: 2px; padding: 8px 16px 16px; background: var(--bone); border-bottom: 1px solid var(--line); }
  .header-actions .secondary-button, .header-actions .primary-button { display: none; }
  .menu-button { display: grid; place-items: center; }
}
@media (max-width: 720px) {
  .story-hero { gap: 40px; padding: 40px 16px 48px; }
  .story-hero__copy h1 { font-size: 53.5px; line-height: .9; }
  .story-hero__actions { flex-direction: column; align-items: stretch; }
  .story-hero__actions .primary-button { width: 100%; }
  .story-hero__actions .primary-button > span:first-child { flex: 1; text-align: left; }
  .site-header { padding-inline: 16px; }
  .app { grid-template-columns: 1fr; }
  .side { display: none; }
  .film__stage { height: 590px; }
  .screen { padding: 12px; }
  .row { grid-template-columns: 30px minmax(0, 1fr) 60px; }
  .row .st { display: none; }
  .alert { flex-direction: column; align-items: flex-start; }
  .tbl__h, .tbl__r { grid-template-columns: minmax(0, 1.4fr) 1fr 1fr; }
  .tbl__h span:nth-child(n+4), .tbl__r > *:nth-child(n+4) { display: none; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts > div:nth-child(3) { display: none; }
  .steps span { font-size: 9.5px; padding: 6px 4px; }
  .seg span { display: none; }
  .tbl--cmp .tbl__h span:nth-child(n+4), .tbl--cmp .tbl__r > *:nth-child(n+4) { display: block; }
  .tbl--cmp .tbl__h, .tbl--cmp .tbl__r { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 6px; font-size: 11.5px; }
  .sc, .pick { padding: 10px; }
  .sc__p { font-size: 19px; }
  .evi { grid-template-columns: 30px minmax(0, 1fr); }
  .evi .badge { display: none; }
  .tr__r { grid-template-columns: minmax(0, 1fr) auto; }
  .tr__r .tag { display: none; }
  .diff__h, .diff__r { gap: 6px; padding: 0 10px; }
  .rule__h { align-items: flex-start; }
  .cm { padding: 8px 0; }
  .cm p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .caret, .think i, .spin { animation: none; }
  .cursor { transition: none; }
}

/* People, settings, checklist and search scenes */
.st--warn { color: var(--gold-dark); }
.badge.is-picked { border-color: var(--gold-dark); background: #fbf6e6; color: var(--green); transition: background .25s, border-color .25s; }
.sub { display: block; margin-top: 1px; color: var(--muted); font-size: 11px; font-weight: 400; }
.val { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border: 1px solid var(--line-strong); border-radius: 7px; background: #f7f8f7; color: var(--ink); font-size: 12px; font-weight: 600; }
.val--red { border-color: rgba(178, 62, 46, .3); background: #fbeceb; color: var(--danger); }
.rule__r > span:first-child { font-weight: 500; }
.rule__r > span:last-child { text-align: right; }
.person { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 50px; padding: 0 12px; }
.person b { font-size: 12.5px; font-weight: 600; }
.person small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.person .st { font-size: 11.5px; font-weight: 600; }
.warnbox { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: #fbf1cf; color: #6b4a04; font-size: 12px; font-weight: 600; line-height: 1.4; }
.warnbox svg { width: 16px; height: 16px; flex: none; }
.tbl--map .tbl__h, .tbl--map .tbl__r { grid-template-columns: 1fr 1fr; }
.rej__h { padding: 10px 14px; color: var(--muted); font-size: 11.5px; }
.rej__r { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 34px; padding: 0 14px; border-top: 1px solid var(--line); font-size: 12.5px; }
.rej__r b { font-weight: 600; }
.rej__r span { color: var(--danger); font-weight: 600; }
.chk { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 40px; padding: 0 14px; font-size: 12.5px; }
.chk + .chk { border-top: 1px solid var(--line); }
.chk b { font-weight: 600; }
.chk span { color: var(--muted); font-size: 11.5px; }
.chk i { display: block; width: 18px; height: 18px; border: 2px solid #d5dbd7; border-radius: 50%; }
.chk i.ok { border-color: var(--positive); background: var(--positive) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }
.chain--tight .chain__r { min-height: 46px; }
.prompt .srch { width: 16px; height: 16px; margin-right: 8px; flex: none; color: var(--muted); }
.evi--in { margin: 4px 0 6px 38px; }
/* Access, rules, AI policy, cost and freshness scenes */
.opt { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 56px; padding: 0 14px; transition: opacity .45s var(--ease), transform .55s var(--ease), background .25s; }
.opt + .opt { border-top: 1px solid var(--line); }
.opt b { font-size: 12.5px; font-weight: 600; }
.opt small { display: block; margin-top: 1px; color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.4; }
.rd { position: relative; width: 16px; height: 16px; border: 2px solid #c5cdc8; border-radius: 50%; transition: border-color .25s; }
.rd::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--green); opacity: 0; transition: opacity .25s; }
.opt.is-picked { background: #f4f8f5; }
.opt.is-picked .rd { border-color: var(--green); }
.opt.is-picked .rd::after { opacity: 1; }
.choice--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rule__r .sub + .sub { margin-top: 0; }
.person .tog { justify-self: end; }
.stat--grey .dot { background: #84908c; }
.sum .warn b { color: var(--gold-dark); }
.cd svg { stroke-width: 3; }
.cd--ok { color: #fff; }
.delta svg { stroke-width: 2.4; }
@media (max-width: 720px) {
  .row--age { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .row--age .m { display: none; }
  .row--age .st { display: inline-flex; font-size: 11px; }
}
.row--age { grid-template-columns: 30px minmax(0, 1fr) 76px 156px; }
@media (max-width: 720px) { .row--age { grid-template-columns: 30px minmax(0, 1fr) auto; } }

/* Narrower film: the sidebar becomes an icon rail so scenes keep their room */
.side__mark { display: none; width: 24px; height: auto; }
@container (max-width: 760px) {
  @media (min-width: 721px) {
    .app { grid-template-columns: 56px minmax(0, 1fr); }
    .side { align-items: center; padding: 12px 8px 10px; }
    .side__brand { padding: 2px 0 9px; }
    .side__brand img { display: none; }
    .side__brand .side__mark { display: block; }
    .nav-i { justify-content: center; width: 38px; padding: 0; }
    .nav-i span { display: none; }
    .side__sep { width: 24px; margin: 5px 0; }
    .side__foot { justify-content: center; width: 100%; padding: 8px 0 0; }
    .who { display: none; }
  }
}
@media (max-width: 380px) {
  .story-hero__copy > p:not(.eyebrow) { font-size: 15px; letter-spacing: -.012em; }
}
@media (max-width: 340px) {
  .story-hero__lede span { white-space: normal; }
  .site-header { gap: 12px; padding-inline: 12px; }
  .brand-group { gap: 10px; }
  .brand-link img { height: 26px; }
  .story-hero__copy h1 { font-size: 47px; }
}

/* Background film: one cowrie video, fixed to the screen, plays softly behind the hero only.
   clip-path keeps the fixed video inside this stage, so it stops where How it works begins. */
.video-stage { position: relative; isolation: isolate; -webkit-clip-path: inset(0); clip-path: inset(0); }
.video-stage__video { position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100vh; object-fit: cover; opacity: .1; pointer-events: none; }
.video-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 120px; background: linear-gradient(180deg, rgba(245, 241, 233, 0), var(--bone)); pointer-events: none; }
.eyebrow--light { color: var(--gold); }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-size: 15px; font-weight: 600; text-decoration: none; }
.text-link svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.text-link:hover svg { transform: translateX(4px); }
.text-link--light { color: #fff; }
.light-button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border-radius: 10px; background: var(--white); color: var(--green); font-size: 14px; font-weight: 600; text-decoration: none; transition: transform .18s var(--ease), background .15s; }
.light-button:hover { background: var(--cream); transform: translateY(-1px); }
.text-link:focus-visible, .light-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px; }

/* Early access band. The cowrie video sits behind everything here, at the same 10% opacity as
   the .video-stage pattern elsewhere, clipped to this section's own box by that pattern's
   clip-path so it never bleeds into the sections above or below it. */
.waitlist { position: relative; background: var(--green); color: #fff; overflow: hidden; }
.waitlist__inner { position: relative; z-index: 1; max-width: 1600px; margin-inline: auto; padding: clamp(64px, 8vw, 112px) clamp(16px, 4.4vw, 68px); }
.waitlist__inner > * { max-width: 620px; }
.waitlist__inner > .waitlist__top { max-width: none; }
.waitlist__top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; padding-bottom: clamp(32px, 4vw, 48px); border-bottom: 1px solid rgba(255, 255, 255, .18); }
.waitlist h2 { margin: 16px 0 0; font-family: var(--font-display, inherit); font-size: clamp(36px, 4.4vw, 64px); font-weight: 600; letter-spacing: -.04em; line-height: 1.02; }
.waitlist p:not(.eyebrow) { margin: 20px 0 0; color: rgba(255, 255, 255, .78); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; }
.waitlist__lede { margin: 0; color: rgba(255, 255, 255, .78); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; }
.waitlist__cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: clamp(28px, 3.5vw, 40px); }
.waitlist__soon { display: flex; align-items: center; gap: 10px; font-size: 14px !important; color: var(--gold) !important; }
.waitlist__soon i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: soonPing 2.4s ease-out infinite; }
@keyframes soonPing { 0% { box-shadow: 0 0 0 0 rgba(216, 179, 82, .45); } 80%, 100% { box-shadow: 0 0 0 10px rgba(216, 179, 82, 0); } }
@media (max-width: 720px) {
  .waitlist__inner { padding-inline: 16px; }
  .waitlist__top { grid-template-columns: 1fr; align-items: start; }
}

/* ===== How it works ===== */
.hiw-hero { max-width: 1400px; margin-inline: auto; padding: clamp(56px, 7vw, 96px) clamp(16px, 4.4vw, 68px) 8px; text-align: center; }
.hiw-title { margin: 0; color: var(--ink); font-size: clamp(31px, 3.9vw, 58px); font-weight: 500; letter-spacing: -.05em; line-height: 1.06; }
.hiw-title__l1, .hiw-title__l2 { display: block; }
.hiw-title__l2 { color: var(--green); }
/* Rotating word: slides up to the next word every five seconds */
.rot { position: relative; display: inline-block; height: 1.06em; overflow: hidden; margin: 0 .1em 0 -.04em; padding-left: .04em; vertical-align: bottom; color: var(--gold-dark); font-style: italic; transition: width .6s var(--ease); }
.rot__track { display: flex; flex-direction: column; transition: transform .7s var(--ease); }
.rot__track > span { display: block; width: max-content; height: 1.06em; padding-right: .16em; line-height: 1.06; white-space: nowrap; }

/* The engine sits straight on the page, with no panel. One teal tone carries every signal, so the
   wires read as one system rather than two; dotted ink lines are people. A pulse with a short
   trail runs along each line; the hub rings as each decision lands. */
.engine { --mk: #2e7a6b; --mk-soft: rgba(46, 122, 107, .12); --rl: #2e7a6b; --rl-soft: rgba(46, 122, 107, .12); position: relative; max-width: 1400px; margin: clamp(32px, 4vw, 56px) auto 0; padding: 40px clamp(16px, 3vw, 40px) 64px; overflow: hidden; isolation: isolate; }

.engine__wires { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.engine__wires .w { fill: none; stroke-width: 1.1; }
.engine__wires .w--market { stroke: rgba(46, 122, 107, .4); }
.engine__wires .w--rules { stroke: rgba(46, 122, 107, .4); }
.engine__wires .w--role { stroke: rgba(19, 33, 30, .32); stroke-dasharray: 2 5; }
.engine__wires .w--out { stroke: rgba(19, 33, 30, .22); }
.engine__wires .t { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.engine__wires .t--market, .engine__wires .t--out { stroke: var(--mk); }
.engine__wires .t--rules { stroke: var(--rl); }
.engine__wires .t--role { stroke: rgba(19, 33, 30, .55); }
.engine__wires .p--market, .engine__wires .p--out { fill: var(--mk); }
.engine__wires .p--rules { fill: var(--rl); }
.engine__wires .p--role { fill: var(--ink); }

.engine__layout { position: relative; z-index: 1; }
.engine__signals { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sig { --c: var(--mk); --c-soft: var(--mk-soft); display: inline-flex; margin: 0; align-items: center; gap: 7px; height: 32px; padding: 0 clamp(10px, .85vw, 13px); border: 1px solid var(--line-strong); border-radius: 999px; background: var(--white); color: var(--ink); font-size: clamp(9.5px, .72vw, 10.5px); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 1px 2px rgba(15, 38, 34, .04); transition: background .3s, border-color .3s, box-shadow .3s; }
.sig[data-group="rules"] { --c: var(--rl); --c-soft: var(--rl-soft); }
.sig::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--c); }
.sig.is-hot { border-color: var(--c); background-image: linear-gradient(var(--c-soft), var(--c-soft)); box-shadow: 0 0 0 4px var(--c-soft); }

.engine__core { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(40px, 7vw, 120px); margin-top: clamp(150px, 18vw, 260px); }

.engine__hub { position: relative; display: grid; place-items: center; padding: 18px 32px; border-radius: 999px; }
.engine__hub img { display: block; width: clamp(150px, 14vw, 200px); height: auto; }
/* As each decision lands, the logo itself gives a small pop: no shape appears around it */
.engine__hub.is-pulse img { animation: hubPop .7s var(--ease); }
@keyframes hubPop { 40% { transform: scale(1.05); } }

/* The people working the decision, either side of the hub. A dotted ink line ties each chip in;
   the status dot is the only colour on the chip, so the row stays calm at a glance. */
.engine__roles { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.engine__roles--l { justify-items: start; }
.engine__roles--r { justify-items: end; }
.role { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 6px 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 2px 8px rgba(15, 38, 34, .05); transition: border-color .3s, background .3s; }
.role__st { --s: #56615d; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 8px; border-radius: 999px; background: #f2f0ea; color: var(--s); font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: none; transition: color .3s; }
.role__st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.role__st[data-st="online"] { --s: var(--positive); }
.role__st[data-st="editing"] { --s: #2e7a6b; }
.role__st[data-st="reviewing"] { --s: #1f6475; }
.role__st[data-st="approving"] { --s: var(--green-2); }
.role__st[data-st="away"] { --s: #56615d; }
.role.is-ping { border-color: #2e7a6b; background: #eef6f4; }

.engine__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); max-width: 1040px; margin: clamp(100px, 11vw, 140px) auto 0; }
.ocard { position: relative; padding: 20px 22px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); color: var(--ink); box-shadow: 0 14px 36px rgba(15, 38, 34, .08); transition: box-shadow .4s, border-color .4s, transform .4s var(--ease); }
.ocard__tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 7px; border-radius: 999px; background: var(--positive-soft); color: var(--positive); font-size: 11px; font-weight: 600; }
.ocard__tag svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ocard h3 { margin: 14px 0 0; color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.ocard p { margin: 8px 0 0; color: #55635f; font-size: 14px; line-height: 1.55; }
.ocard h3, .ocard p { transition: opacity .35s ease, transform .35s var(--ease); }
.ocard.is-out h3, .ocard.is-out p { opacity: 0; transform: translateY(6px); }
.ocard.is-new { border-color: var(--gold-dark); box-shadow: 0 0 0 1px var(--gold-dark), 0 18px 44px rgba(148, 100, 5, .14); transform: translateY(-4px); }

.moves { max-width: 1320px; margin-inline: auto; padding: clamp(64px, 8vw, 112px) clamp(16px, 4.4vw, 68px); }
.moves__head { max-width: 640px; }
.moves__head h2 { margin: 0; color: var(--ink); font-size: clamp(30px, 3.2vw, 46px); font-weight: 500; letter-spacing: -.045em; line-height: 1.05; }
.moves__hint { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0; color: var(--muted); font-size: 14px; }
.moves__hint::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: soonPing 2.4s ease-out infinite; }

/* Four moves: each card opens into a short, looping look at the software. Cards stack vertically
   at every width; the open one grows down into its demo, closed ones hold to their title bar. */
.moves__list { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 40px 0 0; padding: 0; list-style: none; }
.move { position: relative; display: flex; flex: none; flex-direction: column; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); cursor: pointer; transition: border-color .3s, box-shadow .3s, background .3s; }
.move:hover { border-color: var(--line-strong); box-shadow: 0 10px 30px rgba(15, 38, 34, .06); }
.move.is-open { border-color: rgba(148, 100, 5, .45); background: var(--white); box-shadow: 0 22px 60px rgba(15, 38, 34, .1); cursor: default; }
.moves__list.has-open .move:not(.is-open) { padding-block: 14px; }
.moves__list.has-open .move:not(.is-open) .move__p { display: none; }
.moves__list.has-open .move:not(.is-open) .move__btn { grid-template-columns: auto 1fr auto; }
.moves__list.has-open .move:not(.is-open) .move__t { grid-column: 2; grid-row: 1; font-size: 16px; }
.moves__list.has-open .move:not(.is-open) .move__plus { grid-column: 3; }
.move__h { margin: 0; }
.move { scroll-margin-top: 16px; }
.move__btn { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px 12px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.move__btn:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 6px; border-radius: 6px; }
.move__n { color: var(--gold-dark); font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.move__t { grid-column: 1 / -1; color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.move__plus { position: relative; grid-column: 2; grid-row: 1; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); transition: transform .45s var(--ease), background .3s, border-color .3s; }
.move__plus::before, .move__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; margin: -.8px 0 0 -5.5px; border-radius: 2px; background: var(--green); }
.move__plus::after { transform: rotate(90deg); }
.move:hover .move__plus { border-color: var(--gold-dark); }
.move.is-open .move__plus { transform: rotate(45deg); background: var(--green); border-color: var(--green); }
.move.is-open .move__plus::before, .move.is-open .move__plus::after { background: #fff; }
.move__p { margin: 10px 0 0; color: #5a6864; font-size: 14.5px; line-height: 1.6; transition: opacity .3s; }
.move.is-open .move__p { max-width: 640px; }
.moves__list.has-open .move:not(.is-open) .move__p { opacity: 0; visibility: hidden; }
.move__demo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .65s var(--ease); }
.move.is-open .move__demo { grid-template-rows: 1fr; }
.move__demo-in { min-height: 0; overflow: hidden; opacity: 0; transition: opacity .3s; }
.move.is-open .move__demo-in { opacity: 1; transition: opacity .45s .35s; }

/* External flow: the shell around each move differs card to card, closed or open, not only what
   plays inside it once opened. Colours match each card's own frame below. */
.move--panel { border-radius: 20px; }
.move--panel:hover { border-color: rgba(31, 79, 66, .35); }
.move--panel .move__n { color: var(--green); }
.move--panel .move__plus { border-radius: 9px; }
.move--panel.is-open { border-color: rgba(31, 79, 66, .4); box-shadow: inset 3px 0 0 var(--green), 0 22px 60px rgba(15, 38, 34, .1); }
.move--panel.is-open .move__plus { background: var(--green); border-color: var(--green); }

.move--stepper { border-radius: 14px; }
.move--stepper:hover { border-color: rgba(148, 100, 5, .35); }
.move--stepper.is-open { box-shadow: inset 3px 0 0 var(--gold-dark), 0 22px 60px rgba(15, 38, 34, .1); }

.move--ledger { border-radius: 8px; border-style: dashed; }
.move--ledger:hover { border-color: var(--muted); }
.move--ledger .move__n { color: #6b7370; }
.move--ledger .move__plus { border-radius: 5px; }
.move--ledger.is-open { border-style: solid; border-color: var(--line-strong); box-shadow: inset 3px 0 0 #6b7370, 0 22px 60px rgba(15, 38, 34, .1); }
.move--ledger.is-open .move__plus { background: #6b7370; border-color: #6b7370; }

/* Demo window */
.dmw { container-type: inline-size; margin-top: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #f7f6f1; color: var(--ink); font-size: 12px; }
.dmw__bar { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--white); }
.dmw__dots { display: flex; gap: 5px; }
.dmw__dots i { width: 7px; height: 7px; border-radius: 50%; background: #dfe3de; }
.dmw__t { min-width: 0; overflow: hidden; font-size: 12.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.dmw__tag { margin-left: auto; padding: 3px 8px; border-radius: 999px; background: #f1efe8; color: var(--muted); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.dmw__stage { display: grid; padding: 18px; }
.dms { grid-area: 1 / 1; align-self: center; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.dms.is-on { opacity: 1; visibility: visible; transition: opacity .35s; }
.dmw__foot { display: grid; gap: 10px; padding: 12px 14px 14px; border-top: 1px solid var(--line); background: var(--white); }
.dmw__tabs { display: flex; gap: 6px; }
.dmw__tab { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: #4f5c58; font: inherit; font-size: 11.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.dmw__tab span { position: relative; z-index: 1; }
.dmw__tab i { position: absolute; inset: 0; background: rgba(216, 179, 82, .22); transform: scaleX(0); transform-origin: left; transition: transform .2s linear; }
.dmw__tab[aria-selected="true"] { border-color: rgba(148, 100, 5, .4); color: var(--ink); }
.dmw__tab[aria-selected="true"] i { transform: scaleX(var(--p, 0)); } /* fills as the visitor scrolls to the next scene */
.dmw__cap { min-height: 2.9em; margin: 0; color: #40504b; font-size: 13px; line-height: 1.45; }
.dmw__tab::before { content: attr(data-n) ". "; position: relative; z-index: 1; }

/* Four distinct frames for the four moves, so twelve stops don't scroll past as one repeating screen.
   Card 1 keeps the plain window above. Cards 2 to 4 restyle the same .dmw__bar / .dmw__tabs /
   .dmw__stage / .dmw__cap parts the script already drives, so the scroll and scene logic is untouched. */

/* Card 2, "See your exposure": a report panel. Tabs become pills above the chart, read before you see it. */
.dmw--panel { border-color: var(--line-strong); border-radius: 18px; background: var(--white); box-shadow: 0 16px 36px rgba(15, 38, 34, .07); }
.dmw--panel .dmw__bar { height: 46px; border-bottom: 0; background: var(--green); }
.dmw--panel .dmw__dots { display: none; }
.dmw--panel .dmw__t { color: #fff; font-size: 13px; }
.dmw--panel .dmw__tag { background: rgba(255, 255, 255, .16); color: #eef3ef; }
.dmw--panel .dmw__tabs { padding: 14px 18px 0; gap: 8px; }
.dmw--panel .dmw__tab { flex: none; height: 32px; padding: 0 14px; border-radius: 999px; border-color: var(--line); background: #eef1ee; color: #45544f; }
.dmw--panel .dmw__tab::before { content: none; }
.dmw--panel .dmw__tab[aria-selected="true"] { border-color: var(--green); background: var(--green); color: #fff; }
.dmw--panel .dmw__tab i { background: rgba(255, 255, 255, .32); }
.dmw--panel .dmw__stage { padding: 22px 18px 6px; }
.dmw--panel .dmw__foot { border-top: 0; background: transparent; padding: 0 18px 18px; }
.dmw--panel .dmw__cap { padding: 11px 13px; border-radius: 10px; background: #eef4f0; border-left: 3px solid var(--green); color: #223732; }

/* Card 3, "Propose and approve": a step rail, since the story itself is a route through approvers. */
.dmw--stepper { border-color: var(--line-strong); border-top: 3px solid var(--gold-dark); border-radius: 18px; background: var(--white); }
.dmw--stepper .dmw__tabs { padding: 18px 22px 4px; gap: 0; }
.dmw--stepper .dmw__tab { position: relative; flex: 1 1 0; height: auto; min-height: 50px; padding: 0 6px 10px; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 6px; white-space: normal; text-align: center; }
.dmw--stepper .dmw__tab:not(:last-child)::after { content: ""; position: absolute; top: 12px; left: 50%; width: 100%; height: 1.5px; background: var(--line); z-index: -1; }
.dmw--stepper .dmw__tab::before { content: attr(data-n); position: static; z-index: auto; display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--white); color: var(--muted); font-size: 11px; font-weight: 700; }
.dmw--stepper .dmw__tab[aria-selected="true"]::before { border-color: var(--gold-dark); background: var(--gold-dark); color: #fff; }
.dmw--stepper .dmw__tab span { color: #5a6864; font-size: 10.5px; font-weight: 600; }
.dmw--stepper .dmw__tab[aria-selected="true"] span { color: var(--ink); }
.dmw--stepper .dmw__tab i { inset: auto 10px -4px 10px; height: 2.5px; border-radius: 2px; background: var(--gold-dark); }
.dmw--stepper .dmw__stage { padding: 8px 18px 18px; }

/* Card 4, "Export and record": a ledger, with scenes listed down the side like line items. */
.dmw--ledger { border-color: var(--line-strong); border-radius: 10px; background: var(--paper); }
.dmw--ledger .dmw__bar { border-bottom: 1px dashed var(--line-strong); }
.dmw--ledger .dmw__t { letter-spacing: .02em; }
.dmw--ledger .dmw__body { display: grid; grid-template-columns: 100px minmax(0, 1fr); }
.dmw--ledger .dmw__tabs { flex-direction: column; gap: 0; padding: 14px 0; border-right: 1px dashed var(--line-strong); }
.dmw--ledger .dmw__tab { flex: none; height: auto; min-height: 44px; padding: 6px 12px; border: 0; border-radius: 0; background: none; justify-content: flex-start; text-align: left; white-space: normal; line-height: 1.25; }
.dmw--ledger .dmw__tab::before { content: attr(data-n); display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 2px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--white); font-size: 10px; }
.dmw--ledger .dmw__tab[aria-selected="true"] { color: var(--ink); }
.dmw--ledger .dmw__tab[aria-selected="true"]::before { border-color: var(--green); background: var(--green); color: #fff; }
.dmw--ledger .dmw__tab i { display: none; }
.dmw--ledger .dmw__tab span { font-size: 11px; }
.dmw--ledger .dmw__stage { padding: 18px; }
.dmw--ledger .dmw__foot { border-top: 1px dashed var(--line-strong); }

/* Shared demo pieces */
.dmw .k { color: var(--muted); font-size: 11px; }
.dmw .num { font-variant-numeric: tabular-nums; }
.dmw .ch__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 600; }
.dmw .ch__h > b { font-weight: 600; }
.dmw .ch__h { margin-bottom: 12px; }
.dmw .ch__x { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted); font-size: 10.5px; }
.dmw .ch__x--6 span { flex: 1; text-align: center; }
.dmw .pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: #40504b; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.dmw .pill i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #aab5b0; }
.dmw .pill--pos { border-color: rgba(31, 107, 80, .25); background: var(--positive-soft); color: var(--positive); }
.dmw .pill--pos i { background: var(--positive); }
.dmw .pill--warn { border-color: rgba(148, 100, 5, .3); background: #fbf3de; color: var(--gold-dark); }
.dmw .pill--warn i { background: var(--gold); }
.dmw .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dmw .chips--stack { display: grid; justify-items: start; }
.dmw .chips--stack > * { grid-area: 1 / 1; }
.dmw .ring-bg { fill: none; stroke: #e8e6de; stroke-width: 10; }
.dmw .ring-fg { fill: none; stroke: var(--green); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 0 100; transform: rotate(-90deg); transform-origin: center; }
.dms.is-on .ring-fg { animation: ringFill 1.4s var(--ease) .2s forwards; }
.dms.is-on .ring-fg--slow { animation: ringFill 2.6s linear .9s forwards; }
@keyframes ringFill { to { stroke-dasharray: var(--p) 100; } }

/* Motion primitives: each scene replays when it becomes active */
.dmw .fx, .dmw .fxo { opacity: 0; }
.dms.is-on .fx { animation: fxIn .5s var(--ease) var(--d, 0s) both; }
.dms.is-on .fxo { animation: fxIn .5s var(--ease) var(--d, 0s) both, fxOut .35s ease var(--o, 3s) forwards; }
@keyframes fxIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fxOut { to { opacity: 0; } }
.dmw .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.dms.is-on .draw { animation: drawIn 1.1s var(--ease) var(--d, 0s) forwards; }
.dms.is-on .draw.fxo { opacity: 1; animation: drawIn 1s var(--ease) var(--d, 0s) forwards, fxOut .35s ease var(--o, 3s) forwards; }
@keyframes drawIn { to { stroke-dashoffset: 0; } }
.dms.is-on .mv { animation: mvDown .8s var(--ease) var(--d, 0s) both; }
@keyframes mvDown { from { transform: none; } to { transform: translateY(var(--dy)); } }

/* 01 Connect */
.dms--connect { display: grid; grid-template-columns: minmax(0, 1.25fr) 56px minmax(0, 1fr); align-items: center; }
.src { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.src__i { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 50px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.src__ic { display: grid; place-items: center; height: 26px; border-radius: 6px; background: #eef3f0; color: var(--green); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; }
.src__i b { min-width: 0; overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.src__i small { display: block; overflow: hidden; color: var(--muted); font-size: 10.5px; font-weight: 400; text-overflow: ellipsis; }
.src__i .pill { height: 22px; padding: 0 8px; font-size: 10.5px; }
.src__wires { width: 100%; height: 100%; overflow: visible; }
.src__wires path { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; opacity: 0; }
.dms.is-on .src__wires path { animation: fxIn .4s .9s both, march 1s linear infinite; }
@keyframes march { to { stroke-dashoffset: -16; } }
.cat { display: grid; gap: 2px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: 0 10px 30px rgba(15, 38, 34, .06); }
.cat__n { color: var(--green); font-size: 34px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.cat__s { color: var(--muted); font-size: 11.5px; }
.cat__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.cat__g small { display: block; color: var(--muted); font-size: 10px; line-height: 1.3; }
.cat__g b { font-size: 15px; font-weight: 600; }

/* 01 Coverage */
.dms--cov { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 24px; }
.cov__ring { position: relative; }
.cov__ring svg { display: block; width: 100%; }
.cov__v { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.cov__v b { color: var(--green); font-size: 30px; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.cov__v small { color: var(--muted); font-size: 10.5px; }
.cov__bars { display: grid; gap: 9px; }
.hb { display: grid; grid-template-columns: 104px minmax(0, 1fr) 40px; align-items: center; gap: 10px; }
.hb__l { overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.hb__t { height: 8px; overflow: hidden; border-radius: 99px; background: #e8e6de; }
.hb__t i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--teal); }
.hb--warn .hb__t i { background: var(--gold); }
.dms.is-on .hb__t i { animation: grow 1.1s var(--ease) calc(var(--d, 0s) + .15s) forwards; }
@keyframes grow { to { width: var(--w); } }
.hb b { font-size: 11.5px; font-weight: 600; text-align: right; }
.dm-note { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 0; color: var(--gold-dark); font-size: 11.5px; line-height: 1.45; }
.dm-note i { width: 7px; height: 7px; flex: none; margin-top: 4px; border-radius: 50%; background: var(--gold); }

/* 01 History */
.ch__plot { position: relative; height: 150px; }
.ch__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ch__plot .ar { fill: rgba(46, 122, 107, .1); stroke: none; }
.ch__plot .ln { fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-linejoin: round; }
.ch__plot .st { fill: none; stroke: var(--gold-dark); stroke-width: 1.3; }
.dmw .lg { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10.5px; font-weight: 400; }
.dmw .lg i { width: 12px; height: 3px; border-radius: 2px; }
.dmw .lg i + * { margin-right: 4px; }
.lg__a { background: var(--teal); }
.lg__b { margin-left: 6px; background: var(--gold-dark); }
.pin { position: absolute; top: 0; display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--gold-dark); font-size: 10.5px; font-weight: 600; white-space: nowrap; translate: -50% 0; }
.pin::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 104px; background: repeating-linear-gradient(rgba(148, 100, 5, .5) 0 3px, transparent 3px 6px); }
.pin i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.pin--g { color: var(--teal); }
.pin--g i { background: var(--teal); }
.pin--g::after { background: repeating-linear-gradient(rgba(46, 122, 107, .5) 0 3px, transparent 3px 6px); }

/* 02 Histogram */
.hg { position: relative; height: 170px; }
.hg__bars { display: flex; align-items: flex-end; gap: 5px; height: 100%; border-bottom: 1px solid var(--line-strong); }
.hg__bars i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: var(--teal); opacity: .8; transform: scaleY(0); transform-origin: bottom; }
.dms.is-on .hg__bars i { animation: barUp .8s var(--ease) var(--d) forwards; }
.dms.is-on .hg__bars i.lo { animation: barUp .8s var(--ease) var(--d) forwards, toGold .5s ease 1.3s forwards; }
@keyframes barUp { to { transform: scaleY(1); } }
@keyframes toGold { to { background: var(--gold); opacity: 1; } }
.hg__floor { position: absolute; top: -6px; bottom: 0; left: 50%; border-left: 2px dashed var(--gold-dark); }
.hg__floor span { position: absolute; top: 0; left: 8px; padding: 3px 7px; border-radius: 6px; background: var(--gold-dark); color: #fff; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.ch__x--4 { position: relative; height: 14px; }
.ch__x--4 span { position: absolute; translate: -50% 0; }
.ch__x--4 span:nth-child(1) { left: 0; translate: 0 0; }
.ch__x--4 span:nth-child(2) { left: 33.33%; }
.ch__x--4 span:nth-child(3) { left: 66.66%; }
.ch__x--4 span:nth-child(4) { left: 100%; translate: -100% 0; }

/* 02 Heatmap */
.dms--heat { display: grid; grid-template-columns: minmax(0, 1fr) 170px; align-items: center; gap: 20px; }
.hm { display: grid; grid-template-columns: 78px repeat(5, minmax(0, 1fr)); gap: 5px; }
.hm__c { overflow: hidden; color: var(--muted); font-size: 10.5px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.hm__r { overflow: hidden; align-self: center; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.hm i { position: relative; height: 34px; border-radius: 6px; background: rgba(196, 150, 46, var(--v)); box-shadow: inset 0 0 0 1px rgba(15, 38, 34, .05); opacity: 0; transform: scale(.6); }
.dms.is-on .hm i { animation: cellIn .45s var(--ease) var(--d) forwards; }
@keyframes cellIn { to { opacity: 1; transform: none; } }
.dms.is-on .hm i.hot { animation: cellIn .45s var(--ease) var(--d) forwards, hot 1.6s ease 1.4s infinite; }
@keyframes hot { 0% { box-shadow: 0 0 0 0 rgba(148, 100, 5, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(148, 100, 5, 0); } }
.hm__side { display: grid; gap: 14px; }
.tip { display: grid; gap: 3px; padding: 14px; border: 1px solid rgba(148, 100, 5, .35); border-radius: 12px; background: var(--white); box-shadow: 0 10px 30px rgba(15, 38, 34, .07); }
.tip b { color: var(--gold-dark); font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.tip small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.hm__lg { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10.5px; }
.hm__lg i { flex: 1; height: 8px; border-radius: 99px; background: linear-gradient(90deg, rgba(196, 150, 46, .08), rgba(196, 150, 46, 1)); }

/* 02 Waterfall */
.wf { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; height: 190px; margin-top: 18px; border-bottom: 1px solid var(--line-strong); }
.wf__c { position: relative; }
.wf__c small { position: absolute; top: calc(100% + 6px); left: 0; right: 0; overflow: hidden; color: var(--muted); font-size: 10.5px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.wf__b { position: absolute; left: 10%; right: 10%; border-radius: 4px; transform: scaleY(0); transform-origin: bottom; }
.wf__b--neg { transform-origin: top; background: var(--gold); }
.wf__b--base { background: var(--teal); }
.wf__b--now { background: var(--green); }
.dms.is-on .wf__b { animation: barUp .7s var(--ease) var(--d) forwards; }
.wf__b em { position: absolute; bottom: calc(100% + 4px); left: 50%; translate: -50% 0; font-size: 11.5px; font-style: normal; font-weight: 600; white-space: nowrap; }
.wf__b--neg em { color: var(--gold-dark); }
.wf__b--now em { bottom: auto; top: 8px; color: #fff; }
.wf__floor { position: absolute; left: 0; right: 0; z-index: 1; border-top: 2px dashed var(--gold-dark); }
.wf__floor span { position: absolute; left: 61.5%; bottom: 4px; padding: 2px 6px; border-radius: 5px; background: var(--gold-dark); color: #fff; font-size: 10px; font-weight: 600; }
.dms--wf .ch { padding-bottom: 20px; }

/* 03 Guardrail band */
.band, .lad { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.band text, .lad text { fill: var(--ink); font-size: 11px; text-anchor: middle; }
.band__zone { fill: rgba(46, 122, 107, .1); stroke: none; }
.band__edge { stroke: var(--teal); stroke-width: 1.5; stroke-dasharray: 4 4; }
.band .band__lab { fill: var(--teal); font-size: 10px; font-weight: 600; text-anchor: start; }
.band__axis { stroke: var(--line-strong); }
.band line:not([class]) { stroke: var(--line-strong); }
.band text:not([class]) { fill: var(--muted); font-size: 10px; }
.today rect { fill: var(--ink); }
.today text { fill: var(--muted); font-size: 10.5px; }
.bopt circle { fill: var(--gold); }
.bopt text { fill: #fff; font-size: 10px; font-weight: 700; }
.band .bopt .bopt__p { fill: var(--ink); font-size: 11px; font-weight: 600; }
.pick-ring { fill: none; stroke: var(--green); stroke-width: 2; }
.bopt--b circle { fill: var(--gold-dark); }

/* 03 Pack ladder */
.lad__g { stroke: #e3e1d9; }
.lad .lad__y { fill: var(--muted); font-size: 10px; text-anchor: end; }
.lad .lad__x { fill: var(--muted); font-size: 11px; }
.lad__s { stroke: var(--teal); stroke-width: 2.4; stroke-linecap: round; }
.lad__bad { stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; }
.lad__d { fill: var(--white); stroke: var(--teal); stroke-width: 2.4; }
.lad__d--m { stroke: var(--gold-dark); }
.lad g text { font-size: 11px; font-weight: 600; }

/* 03 Routing */
.lanes { display: grid; gap: 10px; }
.lane { display: grid; grid-template-columns: 138px minmax(0, 1fr) 26px 92px; align-items: center; gap: 12px; height: 56px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.lane__l b { display: block; font-size: 12px; font-weight: 600; }
.lane__l small { color: var(--muted); font-size: 10.5px; }
.lane__t { display: flex; flex-wrap: wrap; align-content: center; gap: 4px; min-width: 0; }
.lane__t i { width: 12px; height: 12px; border-radius: 3px; background: var(--gold); opacity: 0; transform: translateX(-14px); }
.dms.is-on .lane__t i { animation: dotIn .4s var(--ease) var(--d) forwards; }
@keyframes dotIn { to { opacity: 1; transform: none; } }
.lane__n { font-size: 15px; font-weight: 600; text-align: right; }
.lane .pill { justify-self: end; }

/* 04 Stores */
.rollout { display: inline-flex; align-items: center; gap: 8px; }
.rollout svg { width: 26px; height: 26px; }
.rollout .ring-bg, .rollout .ring-fg { stroke-width: 5; }
.rollout .ring-fg { stroke: var(--positive); }
.rollout b { font-size: 12px; }
.stores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.store { position: relative; display: grid; gap: 6px; padding: 10px 11px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.store b { overflow: hidden; font-size: 11.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.store__s { grid-area: 2 / 1; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10.5px; font-weight: 600; }
.store__s i { width: 7px; height: 7px; border-radius: 50%; background: #b8c1bd; }
.store__s:not(.store__s--sent):not(.store__s--live) { color: var(--gold-dark); }
.store__s:not(.store__s--sent):not(.store__s--live) i { background: var(--gold); }
.store__s--live { color: var(--positive); }
.store__s--live i { background: var(--positive); }
.store__glow { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--positive); opacity: 0; pointer-events: none; }
.dms.is-on .store__glow { animation: glow 1.2s ease var(--d) forwards; }
@keyframes glow { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: .25; } }

/* 04 Schedule */
.gt { position: relative; display: grid; gap: 10px; padding-bottom: 20px; }
.gt__h, .gt__r { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 12px; }
.gt__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); color: var(--muted); font-size: 10.5px; }
.gt__days span { padding-left: 4px; border-left: 1px solid var(--line); }
.gt__l b { display: block; font-size: 12px; font-weight: 600; }
.gt__l small { color: var(--muted); font-size: 10.5px; }
.gt__t { position: relative; height: 40px; border-radius: 8px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 7 - 1px), var(--line) calc(100% / 7 - 1px) calc(100% / 7)); }
.gt__b { position: absolute; top: 5px; right: 0; bottom: 5px; display: flex; align-items: center; overflow: hidden; padding: 0 10px; border: 1.5px dashed var(--teal); border-radius: 7px; background: var(--white); }
.gt__b span { position: relative; z-index: 1; overflow: hidden; color: var(--teal); font-size: 10.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.gt__f { position: absolute; inset: 0; background: var(--positive); transform: scaleX(0); transform-origin: left; }
.dms.is-on .gt__f { animation: barX .7s var(--ease) var(--d) forwards; }
@keyframes barX { to { transform: scaleX(1); } }
.dms.is-on .gt__b span { animation: toWhite .3s ease calc(var(--d) + .7s) forwards; }
@keyframes toWhite { to { color: #fff; } }
.dms--gantt .gt__r:nth-of-type(2) .gt__b span { animation-delay: 1.3s; }
.dms--gantt .gt__r:nth-of-type(3) .gt__b span { animation-delay: 2.5s; }
.dms--gantt .gt__r:nth-of-type(4) .gt__b span { animation-delay: 3.7s; }
.gt__now { position: absolute; top: 0; bottom: 20px; left: calc(120px + 12px); right: 0; pointer-events: none; }
.gt__now i { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--gold-dark); opacity: 0; }
.gt__now i::before { content: "Now"; position: absolute; bottom: -18px; left: 50%; translate: -50% 0; color: var(--gold-dark); font-size: 10px; font-style: normal; font-weight: 700; }
.dms.is-on .gt__now i { animation: sweep 4.2s linear .6s forwards; }
@keyframes sweep { 0% { left: 0; opacity: 1; } 100% { left: 100%; opacity: 1; } }

/* 04 Record */
.dms--rec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 20px; }
.db { display: flex; align-items: flex-end; gap: 8px; height: 150px; margin-top: 26px; border-bottom: 1px solid var(--line-strong); }
.db i { position: relative; flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: var(--teal); transform: scaleY(0); transform-origin: bottom; }
.dms.is-on .db i { animation: barUp .7s var(--ease) var(--d) forwards; }
.db em { position: absolute; bottom: calc(100% + 3px); left: 50%; translate: -50% 0; font-size: 11px; font-style: normal; font-weight: 600; }
.rec { display: grid; gap: 0; padding: 4px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.rec__r { display: grid; gap: 1px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.rec__r small { color: var(--muted); font-size: 10.5px; }
.rec__r b { font-size: 12px; font-weight: 600; }
.rec__seal { display: flex; align-items: center; gap: 8px; padding: 11px 0 9px; color: var(--positive); font-size: 11.5px; font-weight: 700; }
.rec__seal svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Narrow demo windows */
@container (max-width: 560px) {
  .dmw__stage { padding: 14px; }
  .dms--connect { grid-template-columns: 1fr; gap: 12px; }
  .src__wires { display: none; }
  .dms--cov { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; }
  .cov__v b { font-size: 24px; }
  .hb { grid-template-columns: 78px minmax(0, 1fr) 34px; gap: 8px; }
  .dms--heat { grid-template-columns: 1fr; gap: 12px; }
  .hm { grid-template-columns: 64px repeat(5, minmax(0, 1fr)); gap: 4px; }
  .hm i { height: 28px; }
  .hm__side { grid-template-columns: 1fr 1fr; align-items: center; }
  .lane { grid-template-columns: 100px minmax(0, 1fr) 22px; height: auto; min-height: 56px; padding: 8px 10px; gap: 8px; }
  .lane .pill { grid-column: 1 / -1; justify-self: start; }
  .stores { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .gt__h, .gt__r { grid-template-columns: 76px minmax(0, 1fr); gap: 8px; }
  .gt__now { left: calc(76px + 8px); }
  .gt__b { padding: 0 6px; }
  .gt__b span { font-size: 0; }
  .gt__b span::after { content: "06:00"; font-size: 10px; }
  .dms--rec { grid-template-columns: 1fr; }
  .dmw__tab { height: auto; min-height: 34px; padding: 5px 4px; font-size: 10.5px; line-height: 1.2; white-space: normal; }
  .dmw--panel .dmw__tabs { flex-wrap: wrap; }
  .dmw--stepper .dmw__tabs { padding-inline: 10px; }
  .dmw--ledger .dmw__body { grid-template-columns: 1fr; }
  .dmw--ledger .dmw__tabs { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px dashed var(--line-strong); padding: 10px; }
  .dmw--ledger .dmw__tab { flex: 1 1 40%; align-items: center; text-align: center; padding: 6px 4px; }
  .band text { font-size: 15px; }
  .band .band__lab { font-size: 14px; }
  .band text:not([class]) { font-size: 13px; }
  .today text { font-size: 14px; }
  .band .bopt .bopt__p { font-size: 15px; }
  .bopt text { font-size: 12px; }
  .lad text { font-size: 15px; }
  .lad .lad__y { font-size: 13px; }
  .lad .lad__x { font-size: 15px; }
  .lad g text { font-size: 15px; }
  .hm__side { grid-template-columns: 1fr; }
  .tip b { font-size: 18px; }
  .wf { gap: 6px; }
}
@container (max-width: 380px) {
  .hb__l { font-size: 10.5px; }
  .src__i { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; }
  .hm__c { font-size: 9px; }
  .hm__r { font-size: 10px; }
  .stores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wf__c small { font-size: 9px; }
  .gt__days { font-size: 9.5px; }
}

/* How it works fills one screen on laptops and desktops: the headline, every signal, the team and
   the three recorded decisions are all in view when "How it works" is chosen. Spare height goes into
   the gaps between the rows, so the drawing breathes on tall screens and tightens on short ones. */
@media (min-width: 861px) {
  .hiw { display: flex; flex-direction: column; min-height: min(calc(100svh - 72px), 1040px); }
  .hiw-hero { width: 100%; padding-top: clamp(18px, 3.4svh, 44px); }
  .hiw-title { font-size: clamp(30px, min(3.9vw, 6.2svh), 58px); }
  .engine { display: flex; flex: 1; flex-direction: column; width: 100%; margin-top: clamp(10px, 2svh, 24px); padding-top: 12px; padding-bottom: clamp(18px, 3svh, 36px); }
  .engine__layout { display: flex; flex: 1; flex-direction: column; justify-content: space-between; }
  .engine__core { margin-top: clamp(92px, 13svh, 150px); }
  .engine__cards { width: 100%; margin-top: clamp(52px, 7.5svh, 96px); }
}
@media (min-width: 861px) and (max-height: 820px) {
  .ocard { padding: 14px 18px 16px; }
  .ocard h3 { margin-top: 10px; font-size: 15.5px; }
  .ocard p { margin-top: 6px; font-size: 13px; line-height: 1.45; }
  .role { height: 32px; }
  .engine__roles { gap: 8px; }
}

/* On wide screens the four steps hold still while the page scrolls, and each opens in turn */
.moves.is-pin { padding-block: 0; overflow-anchor: none; } /* the pinned block changes height between cards; stop the browser nudging the scroll */
.moves.is-pin .moves__pin { position: sticky; top: 72px; display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - 72px); padding-block: 18px; transition: top .4s var(--ease); }
.moves.is-pin .moves__head { max-width: none; }
.moves.is-pin .moves__head h2 { font-size: clamp(28px, min(3.2vw, 5svh), 46px); }
.moves.is-pin .moves__hint { margin-top: 10px; }
.moves.is-pin .moves__list { margin-top: clamp(16px, 2.6svh, 28px); }

@media (max-width: 860px) {
  .engine__core { grid-template-columns: 1fr 1fr; gap: 28px 12px; margin-top: 150px; }
  .engine__hub { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .engine__roles--l { justify-items: start; }
  .engine__roles--r { justify-items: end; }
  .engine__cards { grid-template-columns: 1fr; max-width: 520px; margin-top: 72px; }
}
@media (max-width: 560px) {
  .engine { padding-top: 24px; padding-bottom: 48px; }
  .sig { height: 28px; padding: 0 10px; font-size: 10px; }
  .engine__core { margin-top: 110px; }
  .role { height: 32px; padding: 0 10px; gap: 6px; font-size: 9.5px; letter-spacing: .04em; }
  .role__st { width: 7px; height: 7px; flex: none; padding: 0; border-radius: 50%; background: currentColor; font-size: 0; }
  .role__st::before { display: none; }
  .engine__roles { gap: 8px; }
  .move { padding: 20px 16px; }
}

/* =====================================================================
   Inner pages: Product, Solutions, About, Contact, Privacy, 404
   Same tokens, type and buttons as the home page.
   ===================================================================== */
.wrap { max-width: 1320px; margin-inline: auto; padding-inline: clamp(16px, 4.4vw, 68px); }
.display { margin: 0; color: var(--green); font-size: clamp(42px, 5vw, 76px); font-weight: 500; letter-spacing: -.06em; line-height: .96; text-wrap: balance; }
.display span { color: var(--gold-dark); }
.lede { max-width: 580px; margin: 24px 0 0; color: #40504b; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; text-wrap: pretty; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Page hero */
.page-hero { position: relative; padding-block: clamp(56px, 7vw, 104px) clamp(56px, 6vw, 96px); overflow: hidden; }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(40px, 5vw, 80px); }
.page-hero--center { text-align: center; }
.page-hero--center .lede { margin-inline: auto; }
.page-hero--center .cta-row { justify-content: center; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.crumbs a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--green); font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color .2s, background .2s; }
.crumbs a:hover { border-color: var(--gold-dark); background: var(--white); }
.page-hero--center .crumbs { justify-content: center; }

/* Sections */
.section { padding-block: clamp(64px, 8vw, 120px); }
.section--paper { border-block: 1px solid var(--line); background: var(--paper); }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.section-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2, .h2 { margin: 0; color: var(--ink); font-size: clamp(30px, 3.2vw, 48px); font-weight: 500; letter-spacing: -.045em; line-height: 1.05; text-wrap: balance; }
.section-head p:not(.eyebrow) { margin: 18px 0 0; color: var(--muted); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.6; text-wrap: pretty; }

/* Grids and cards */
.grid { display: grid; gap: clamp(14px, 1.6vw, 20px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pcard { position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(22px, 2vw, 28px); border: 1px solid var(--line); border-radius: 16px; background: var(--white); transition: border-color .3s, box-shadow .3s, transform .3s var(--ease); }
a.pcard { color: inherit; text-decoration: none; }
a.pcard:hover, .pcard--lift:hover { border-color: var(--line-strong); box-shadow: 0 16px 40px rgba(15, 38, 34, .08); transform: translateY(-2px); }
.pcard h3 { margin: 0; color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.pcard p { margin: 10px 0 0; color: #5a6864; font-size: 15px; line-height: 1.6; }
.pcard .icon { margin-bottom: 18px; }
.pcard__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 18px; color: var(--green); font-size: 14px; font-weight: 600; }
.pcard__more svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
a.pcard:hover .pcard__more svg { transform: translateX(3px); }
.icon { display: grid; flex: none; width: 42px; height: 42px; place-items: center; border-radius: 11px; background: var(--cream); color: var(--gold-dark); }
.icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon--green { background: var(--green); color: var(--gold); }
.ticks { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 26px; color: #40504b; font-size: 15px; line-height: 1.55; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .28em; width: 16px; height: 16px; border-radius: 50%; background: var(--positive-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6b50' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 10px no-repeat; }
.label { display: inline-flex; align-items: center; gap: 6px; width: max-content; padding: 4px 10px; border-radius: 999px; background: #f1efe8; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.label--gold { background: #fbf6e6; color: var(--gold-dark); }
.label--green { background: var(--positive-soft); color: var(--positive); }

/* The decision loop: six steps joined by a line with one travelling ball */
.loop { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: loop; }
.loop::before { content: ""; position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 21px; border-top: 1.5px dashed var(--line-strong); }
.loop::after { content: ""; position: absolute; z-index: 2; top: 16px; left: calc(100% / 12); width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(216, 179, 82, .2); animation: loopRun 9s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes loopRun { 0% { left: calc(100% / 12); opacity: 0; } 4% { opacity: 1; } 90% { left: calc(100% - 100% / 12); opacity: 1; } 96%, 100% { left: calc(100% - 100% / 12); opacity: 0; } }
.loop li { position: relative; counter-increment: loop; text-align: center; }
.loop__n { position: relative; z-index: 1; display: grid; width: 44px; height: 44px; margin: 0 auto 16px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--white); color: var(--ink); font-size: 13px; font-weight: 700; }
.loop__n::before { content: "0" counter(loop); }
.loop h3 { margin: 0; color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.loop p { margin: 8px 0 0; color: #5a6864; font-size: 14px; line-height: 1.55; }

/* Feature rows: copy beside an illustrative screen, alternating sides */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(32px, 5vw, 88px); scroll-margin-top: 24px; }
.feature + .feature { margin-top: clamp(72px, 9vw, 128px); }
.feature--flip .feature__copy { order: 2; }
.feature__copy h3 { margin: 0; color: var(--ink); font-size: clamp(26px, 2.5vw, 36px); font-weight: 500; letter-spacing: -.04em; line-height: 1.1; text-wrap: balance; }
.feature__copy > p { margin: 16px 0 0; color: #5a6864; font-size: 16px; line-height: 1.65; }

/* Illustrative screens: a quiet window with rows */
.mock { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #f7f6f1; box-shadow: 0 24px 60px rgba(15, 38, 34, .08); font-size: 13px; }
.mock__bar { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--white); }
.mock__dots { display: flex; gap: 5px; }
.mock__dots i { width: 7px; height: 7px; border-radius: 50%; background: #dfe3de; }
.mock__t { min-width: 0; overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mock__bar .label { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; }
.mock__body { display: grid; gap: 10px; padding: 18px; }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 50px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--white); }
.prow b { display: block; color: var(--ink); font-weight: 600; }
.prow small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.ppill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #f1efe8; color: var(--muted); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.ppill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ppill--ok { background: var(--positive-soft); color: var(--positive); }
.ppill--gold { background: #fbf6e6; color: var(--gold-dark); }
.ppill--wait { background: #eef2f1; color: var(--teal); }
.ppill--block { background: var(--danger-soft); color: var(--danger); }
.mock__note { margin: 2px 2px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.psteps { display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; }
.step + .step { border-top: 1px dashed var(--line-strong); }
.pav { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--green); color: var(--gold); font-size: 12px; font-weight: 700; }
.pav--gold { background: var(--cream); color: var(--gold-dark); }
.scen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.scen__c { padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--white); text-align: center; }
.scen__c small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.scen__c b { display: block; margin-top: 6px; color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
.scen__c span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.scen__c.is-pick { border-color: rgba(148, 100, 5, .5); box-shadow: 0 0 0 3px rgba(216, 179, 82, .18); }
.meter { height: 8px; overflow: hidden; border-radius: 99px; background: #e8ebe7; }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--teal); }
.meter i.is-gold { background: var(--gold); }

/* Does / leaves to you */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.split__col { padding: clamp(24px, 2.4vw, 36px); border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.split__col--dark { border-color: var(--green); background: var(--green); color: #fff; }
.split__col h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.split__col--dark .ticks li { color: rgba(255, 255, 255, .86); }
.split__col--dark .ticks li::before { background-color: rgba(216, 179, 82, .18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8b352' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }

/* People: roles and team */
.person-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: 16px; }
.person-card .pav { width: 52px; height: 52px; font-size: 16px; }
.person-card h3 { margin-top: 3px; }
.founder { display: flex; flex-direction: column; align-items: flex-start; }
.founder__mono { display: grid; width: 100%; aspect-ratio: 4 / 3; place-items: center; margin-bottom: 20px; border-radius: 12px; background: linear-gradient(145deg, var(--green), #0c4a40); color: var(--gold); font-size: clamp(40px, 4vw, 56px); font-weight: 500; letter-spacing: -.04em; }
.founder h3 { font-size: 20px; }
.founder .founder__role { margin-top: 6px; color: var(--gold-dark); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* Markets */
.market { gap: 0; }
.market__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.market__code { color: var(--gold-dark); font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.market dl { display: grid; gap: 10px; margin: 18px 0 0; }
.market dl div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.market dt { color: var(--muted); font-size: 13px; }
.market dd { margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; }

/* Principles: numbered, quiet */
.principles { counter-reset: pr; }
.principles .pcard::before { counter-increment: pr; content: "0" counter(pr); display: block; margin-bottom: 18px; color: var(--gold-dark); font-size: 13px; font-weight: 700; letter-spacing: .08em; }

/* Story: large quote-like statement */
.statement { max-width: 1080px; margin: 0; color: var(--ink); font-size: clamp(26px, 2.8vw, 42px); font-weight: 500; letter-spacing: -.04em; line-height: 1.2; text-wrap: balance; }
.statement em { color: var(--gold-dark); font-style: italic; }
.prose { max-width: 720px; }
.prose p { margin: 0 0 18px; color: #40504b; font-size: 17px; line-height: 1.7; }
.prose h2 { margin: 44px 0 14px; color: var(--ink); font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.prose ul { margin: 0 0 18px; padding-left: 20px; color: #40504b; font-size: 17px; line-height: 1.7; }
.prose a { color: var(--green); font-weight: 600; }

/* Timeline */
.timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.timeline li { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 48px; padding: 0 0 32px; }
.timeline li::before { content: ""; position: absolute; left: 143px; top: 8px; bottom: -8px; border-left: 1.5px dashed var(--line-strong); }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ""; position: absolute; left: 138px; top: 4px; width: 12px; height: 12px; border: 2px solid var(--green); border-radius: 50%; background: var(--bone); }
.timeline li.is-now::after { border-color: var(--gold-dark); background: var(--gold); box-shadow: 0 0 0 5px rgba(216, 179, 82, .22); }
.timeline time { color: var(--gold-dark); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.timeline h3 { margin: 0; color: var(--ink); font-size: 18px; font-weight: 600; }
.timeline p { margin: 6px 0 0; color: #5a6864; font-size: 15px; line-height: 1.6; }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 880px; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--white); transition: border-color .25s; }
.faq details[open] { border-color: var(--line-strong); }
.faq summary { position: relative; display: block; padding: 20px 60px 20px 22px; color: var(--ink); font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border: 1px solid var(--line); border-radius: 50%; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306332c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 12px no-repeat; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 14px; }
.faq details > div { padding: 0 22px 22px; color: #5a6864; font-size: 15.5px; line-height: 1.65; }
.faq details > div p { margin: 0 0 10px; }
.faq details > div p:last-child { margin: 0; }

/* Contact topics */
.topic { gap: 0; }
.topic .label { margin-top: 18px; }

/* Notice: a calm bordered note */
.notice { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 18px; align-items: start; max-width: 880px; padding: 24px; border: 1px solid rgba(148, 100, 5, .3); border-radius: 16px; background: #fbf6e6; }
.notice p { margin: 0; color: #40504b; font-size: 15.5px; line-height: 1.65; }
.notice p + p { margin-top: 8px; }
.notice a { color: var(--green); font-weight: 600; }

/* 404 */
.lost { display: grid; min-height: calc(100svh - 72px - 260px); place-items: center; padding-block: 80px; text-align: center; }
.lost__code { color: var(--gold-dark); font-size: 13px; font-weight: 700; letter-spacing: .14em; }

/* Hero visual on the product page: the loop drawn as a ring */
.loopring { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin-inline: auto; }
.loopring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring__track { fill: none; stroke: var(--line-strong); stroke-width: 1.4; stroke-dasharray: 5 6; }
.ring__arc { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; }
.ring__hub { position: absolute; left: 50%; top: 50%; display: grid; width: 38%; aspect-ratio: 1; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: radial-gradient(circle at 50% 40%, var(--white), var(--paper)); box-shadow: 0 20px 50px rgba(15, 38, 34, .08); transform: translate(-50%, -50%); }
.ring__hub img { width: 44%; height: auto; }
.ring__node { position: absolute; display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; transform: translate(-50%, -50%); transition: border-color .4s, background .4s, box-shadow .4s; }
.ring__node i { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--cream); color: var(--gold-dark); font-size: 10.5px; font-style: normal; }
.ring__node.is-on { border-color: var(--gold-dark); background: #fbf6e6; box-shadow: 0 8px 22px rgba(148, 100, 5, .16); }
.ring__node.is-on i { background: var(--gold); color: var(--green); }
.ring__caption { margin: 18px auto 0; max-width: 360px; min-height: 3.2em; color: #40504b; font-size: 14.5px; line-height: 1.55; text-align: center; }

/* Site footer */
.footer { border-top: 1px solid var(--line); background: var(--bone); color: var(--muted); font-size: 14px; }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); padding-block: clamp(48px, 6vw, 80px) 40px; }
.footer__brand img { height: 30px; width: auto; }
.footer__brand a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__brand p { max-width: 340px; margin: 16px 0 0; line-height: 1.6; }
.footer__soon { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--green); font-size: 13px; font-weight: 600; }
.footer__soon i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: soonPing 2.4s ease-out infinite; }
.footer h2 { margin: 0 0 14px; color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.footer ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.footer a { color: #40504b; text-decoration: none; }
.footer ul a { display: inline-block; padding-block: 4px; }
.footer a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 22px 28px; border-top: 1px solid var(--line); font-size: 13px; }

/* Phone menu: the two header actions join the menu */
.nav__cta { display: none; }

/* Gentle reveal (only when motion is welcome; see site.js) */
.can-reveal [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.4, 0, .2, 1), transform .7s cubic-bezier(.4, 0, .2, 1); }
.can-reveal [data-reveal].is-in { opacity: 1; transform: none; }
.can-reveal [data-reveal="stagger"] > * { opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.4, 0, .2, 1), transform .6s cubic-bezier(.4, 0, .2, 1); }
.can-reveal [data-reveal="stagger"] { opacity: 1; transform: none; }
.can-reveal [data-reveal="stagger"].is-in > * { opacity: 1; transform: none; }
.can-reveal [data-reveal="stagger"].is-in > :nth-child(2) { transition-delay: .06s; }
.can-reveal [data-reveal="stagger"].is-in > :nth-child(3) { transition-delay: .12s; }
.can-reveal [data-reveal="stagger"].is-in > :nth-child(4) { transition-delay: .18s; }
.can-reveal [data-reveal="stagger"].is-in > :nth-child(5) { transition-delay: .24s; }
.can-reveal [data-reveal="stagger"].is-in > :nth-child(6) { transition-delay: .3s; }
.can-reveal [data-reveal="stagger"].is-in > :nth-child(n+7) { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  .loop::after { display: none; }
  .rot, .rot__track { transition: none; }
  .footer__soon i, .waitlist__soon i, .moves__hint::before { animation: none; }
  /* The four moves' scenes appear at once; passing hints (.fxo) stay hidden */
  .dms.is-on .fx { animation: none; opacity: 1; }
  .move, .move__demo, .move__demo-in, .move.is-open .move__demo-in, .move__plus, .move__p { transition: none; }
  .dms, .dms.is-on { transition: none; }
  .dms.is-on .fxo, .dms.is-on .draw.fxo { animation: none; opacity: 0; }
}

@media (max-width: 1100px) {
  .page-hero__grid, .feature { grid-template-columns: 1fr; }
  .feature--flip .feature__copy { order: 0; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .nav.is-open .nav__cta { display: flex; align-items: center; justify-content: center; min-height: 46px; margin-top: 8px; border-radius: 10px; font-weight: 600; }
  .nav.is-open .nav__cta--primary { background: var(--green); color: var(--white); }
  .nav.is-open .nav__cta--primary:hover { background: var(--green-2); color: var(--white); }
  .nav.is-open .nav__cta--secondary { margin-top: 12px; border: 1px solid var(--line-strong); background: var(--white); color: var(--green); }
  .nav.is-open { max-height: calc(100svh - 72px); overflow-y: auto; box-shadow: 0 20px 40px rgba(15, 38, 34, .1); }
  .nav.is-open a { padding: 12px; font-size: 16px; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loop { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
  .loop::before, .loop::after { display: none; }
}
@media (max-width: 720px) {
  .grid--2, .grid--3, .grid--4, .split { grid-template-columns: 1fr; }
  .loop { grid-template-columns: 1fr; gap: 0; }
  .loop li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 16px; padding-bottom: 26px; text-align: left; }
  .loop li::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; border-left: 1.5px dashed var(--line-strong); }
  .loop li:last-child::before { display: none; }
  .loop__n { grid-row: span 2; margin: 0; }
  .loop h3 { align-self: end; padding-top: 4px; }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline li { grid-template-columns: 1fr; gap: 4px; padding-left: 32px; }
  .timeline li::before { left: 5px; }
  .timeline li::after { left: 0; }
  .scen__c b { font-size: 17px; }
  .ring__node { padding: 6px 10px 6px 6px; font-size: 10px; }
  .ring__node i { width: 18px; height: 18px; font-size: 9px; }
  .notice { grid-template-columns: 1fr; }
  .faq summary { padding: 18px 56px 18px 18px; font-size: 15.5px; }
  .faq details > div { padding: 0 18px 18px; }
}

/* Details for inner-page components */
.pcard--dark { border-color: var(--green); background: var(--green); color: #fff; }
.pcard--dark h3 { color: #fff; }
.pcard--dark p { color: rgba(255, 255, 255, .78); }
.pcard--dark .pcard__more { color: var(--gold); }
a.pcard--dark:hover { border-color: var(--green); }
.step b { display: block; color: var(--ink); font-weight: 600; }
.step small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.prow .meter { margin-top: 8px; }
.ring-wrap { margin: 0; }
.ring__nodes { margin: 0; padding: 0; list-style: none; }
.ring__node:nth-child(1) { left: 50%; top: 11.54%; }
.ring__node:nth-child(2) { left: 83.3%; top: 30.77%; }
.ring__node:nth-child(3) { left: 83.3%; top: 69.23%; }
.ring__node:nth-child(4) { left: 50%; top: 88.46%; }
.ring__node:nth-child(5) { left: 16.7%; top: 69.23%; }
.ring__node:nth-child(6) { left: 16.7%; top: 30.77%; }
.waitlist--wrap .waitlist__inner { max-width: 1320px; }
.stack-top { margin-top: clamp(40px, 5vw, 64px); }
.lost .lede { margin-inline: auto; }
.lost .cta-row { justify-content: center; }

/* PRD coverage: lists of types, the lifecycle stepper, readable pricing logic, journeys, roadmap */
.chip-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip-cloud li { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 14px; font-weight: 500; }
.chip-cloud--gold li { border-color: rgba(148, 100, 5, .28); background: #fbf6e6; color: var(--gold-dark); font-weight: 600; }
.sub-h { margin: 28px 0 12px; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pcard .sub-h:first-of-type { margin-top: 20px; }
.states { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.states li { display: inline-flex; align-items: center; counter-increment: st; }
.states li span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 8px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; }
.states li span::before { content: counter(st); display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--cream); color: var(--gold-dark); font-size: 12px; font-weight: 700; }
.states li + li::before { content: ""; width: 22px; border-top: 1.5px dashed var(--line-strong); }
.states li.is-cond span { border-style: dashed; }
.states-note { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 22px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.states-note b { color: var(--ink); }
.logic { padding: 16px 18px; border: 1px solid rgba(148, 100, 5, .3); border-radius: 12px; background: #fbf6e6; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.5; }
.logic small { display: block; margin-bottom: 6px; color: var(--gold-dark); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.metrics li { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.metrics b { display: block; color: var(--ink); font-size: 15px; font-weight: 600; }
.metrics span { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.treat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.treat div { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.treat b { display: block; margin: 8px 0 4px; color: var(--ink); font-size: 14.5px; }
.treat span:not(.ppill) { color: var(--muted); font-size: 13px; line-height: 1.5; }
.journey ol { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: js; }
.journey ol li { position: relative; padding-left: 34px; color: #40504b; font-size: 14.5px; line-height: 1.55; counter-increment: js; }
.journey ol li::before { content: counter(js); position: absolute; left: 0; top: 0; display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--green); color: var(--gold); font-size: 11px; font-weight: 700; }
.journey ol li b { color: var(--ink); }
.journey .pcard__pass { margin-top: auto; padding-top: 18px; color: var(--positive); font-size: 13.5px; font-weight: 600; line-height: 1.5; }
.release { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); margin: 0; padding: 0; list-style: none; }
.release > li { position: relative; display: flex; flex-direction: column; padding: clamp(22px, 2vw, 28px); border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.release time { color: var(--gold-dark); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.release h3 { margin: 10px 0 0; color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.release p { margin: 8px 0 0; color: #5a6864; font-size: 15px; line-height: 1.6; }
.release .ticks { margin-top: 14px; }
.release > li.is-next { border-color: rgba(148, 100, 5, .45); box-shadow: 0 16px 40px rgba(148, 100, 5, .08); }
.fineprint { margin: 18px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.problem-list { counter-reset: pb; }
.problem-list .pcard::before { counter-increment: pb; content: counter(pb, decimal-leading-zero); display: block; margin-bottom: 14px; color: var(--gold-dark); font-size: 13px; font-weight: 700; letter-spacing: .08em; }
@media (max-width: 1100px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .release { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .treat, .metrics { grid-template-columns: 1fr; }
  .states { flex-direction: column; align-items: flex-start; gap: 0; }
  .states li { flex-direction: column; align-items: flex-start; }
  .states li + li::before { width: 0; height: 14px; margin-left: 20px; border-top: 0; border-left: 1.5px dashed var(--line-strong); }
}
.journey h3 { margin-top: 14px; }
.stack-s { margin-top: 16px; }
/* Layout refinements: lifecycle as an even 4 + 4 grid (the numbers show the order); economics tiles two across */
.states { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.states li { display: flex; }
.states li + li::before { display: none; }
.states li span { width: 100%; }
.feature .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .states { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .states { grid-template-columns: 1fr; gap: 8px; } }

/* =====================================================================
   Early-access application (waitlist.html)
   A calm split screen: the application builds itself as a record on the green side.
   ===================================================================== */
.wl-body { background: var(--bone); }
.wl { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 100svh; }
.wl-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: clamp(28px, 4vh, 44px); height: 100svh; padding: clamp(24px, 3.2vw, 48px); overflow: hidden; background: var(--green); color: #fff; isolation: isolate; }
.wl-side::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("video/cowrie-necklace.jpg") center / cover; opacity: .09; }
.wl-side::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 70% at 0% 100%, rgba(216, 179, 82, .14), transparent 60%); }
.wl-side__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wl-logo img { display: block; height: 30px; width: auto; }
.wl-back { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255, 255, 255, .78); font-size: 14px; text-decoration: none; }
.wl-back:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.wl-back:focus-visible, .wl-logo:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
.wl-title { margin: 0; font-size: clamp(38px, 3.9vw, 62px); font-weight: 500; letter-spacing: -.055em; line-height: .98; text-wrap: balance; }
.wl-lede { max-width: 440px; margin: 18px 0 0; color: rgba(255, 255, 255, .78); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.6; }

.wl-record { margin: 0; padding: 20px 22px 18px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wl-record__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 14px; font-weight: 600; }
.wl-record__status { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); font-size: 12px; font-weight: 600; }
.wl-record__status.is-ok { background: rgba(31, 107, 80, .9); color: #fff; }
.wl-record__status.is-wait { background: rgba(216, 179, 82, .2); color: var(--gold); }
.wl-record__rows { display: grid; gap: 0; margin: 0; }
.wl-record__rows div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(255, 255, 255, .1); font-size: 14px; }
.wl-record__rows dt { color: rgba(255, 255, 255, .56); }
.wl-record__rows dd { overflow: hidden; margin: 0; color: rgba(255, 255, 255, .38); text-overflow: ellipsis; white-space: nowrap; transition: color .3s; }
.wl-record__rows .is-set dd { color: #fff; font-weight: 500; }
.wl-record__rows .is-new dd { animation: recIn .55s var(--ease); }
@keyframes recIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wl-record__foot { margin-top: 12px; color: rgba(255, 255, 255, .6); font-size: 13px; line-height: 1.5; }
.wl-promises { display: grid; gap: 10px; margin: auto 0 0; padding: 0; list-style: none; }
.wl-promises li { position: relative; padding-left: 22px; color: rgba(255, 255, 255, .72); font-size: 13.5px; line-height: 1.5; }
.wl-promises li::before { content: ""; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }

.wl-main { display: flex; flex-direction: column; min-width: 0; }
.wl-progress { position: sticky; top: 0; z-index: 2; height: 4px; background: var(--line); }
.wl-progress i { display: block; height: 100%; background: var(--gold-dark); transform: scaleX(.25); transform-origin: left; transition: transform .6s var(--ease); }
.wl-form { width: 100%; max-width: 620px; margin: auto; padding: clamp(40px, 7vh, 88px) clamp(20px, 4vw, 56px); }
.wl-count { margin: 0 0 14px; color: var(--gold-dark); font-size: 14px; font-weight: 600; }
.wl-notice { margin: 0 0 22px; padding: 12px 14px; border: 1px solid rgba(148, 100, 5, .35); border-radius: 10px; background: #fbf3df; color: #5c430b; font-size: 14px; line-height: 1.5; }
/* A field people never see, so only automated form-fillers complete it */
.wl-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wl-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.wl-step.is-on { animation: stepIn .5s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.wl-h { display: block; margin: 0; padding: 0; color: var(--ink); font-size: clamp(30px, 2.6vw, 40px); font-weight: 500; letter-spacing: -.045em; line-height: 1.1; outline: none; }
.wl-sub { margin: 10px 0 30px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.wl-field { display: grid; gap: 8px; margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.wl-field > label, .wl-group > legend { padding: 0; color: var(--ink); font-size: 15px; font-weight: 600; }
.wl-group > legend { margin-bottom: 10px; line-height: 1.4; }
.wl-opt { margin-left: 6px; color: var(--muted); font-size: 13px; font-weight: 500; }
.wl-field input:not([type=radio]):not([type=checkbox]), .wl-field select, .wl-field textarea { width: 100%; min-height: 52px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--white); color: var(--ink); font: inherit; font-size: 16px; transition: border-color .2s, box-shadow .2s; }
.wl-field textarea { min-height: 96px; padding: 14px 16px; resize: vertical; line-height: 1.5; }
.wl-field select { appearance: none; padding-right: 44px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306332c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center / 18px no-repeat; cursor: pointer; }
.wl-field input:hover, .wl-field select:hover, .wl-field textarea:hover { border-color: #93a39c; }
.wl-field input:focus, .wl-field select:focus, .wl-field textarea:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 4px rgba(6, 51, 44, .12); }
.wl-field [aria-invalid="true"] { border-color: var(--danger) !important; }
.wl-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.wl-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.wl-choice { position: relative; cursor: pointer; }
.wl-choice input { position: absolute; opacity: 0; pointer-events: none; }
.wl-choice span { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 15px; transition: border-color .2s, background .2s, color .2s; }
.wl-choice span::before { content: ""; width: 14px; height: 14px; border: 1.5px solid #93a39c; border-radius: 50%; transition: border-color .2s, background .2s, box-shadow .2s; }
.wl-choice input[type=checkbox] + span::before { border-radius: 4px; }
.wl-choice:hover span { border-color: #93a39c; }
.wl-choice input:checked + span { border-color: var(--green); background: #eef4f1; color: var(--green); font-weight: 600; }
.wl-choice input:checked + span::before { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 2.5px #eef4f1; }
.wl-choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.wl-group:has([aria-invalid="true"]) .wl-choice span { border-color: rgba(161, 68, 56, .55); }
.wl-err { display: none; margin: 0; color: var(--danger); font-size: 14px; font-weight: 500; }
.wl-err.is-on { display: block; }
.wl-consent { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; margin: 6px 0 6px; color: #40504b; font-size: 15px; line-height: 1.5; cursor: pointer; }
.wl-consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--green); cursor: pointer; }
.wl-consent a { color: var(--green); font-weight: 600; }
.wl-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px; }
.wl-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border: 1px solid var(--green); border-radius: 12px; background: var(--green); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s, transform .18s var(--ease); }
.wl-btn:hover { background: var(--green-2); transform: translateY(-1px); }
.wl-btn:disabled { opacity: .6; cursor: progress; transform: none; }
.wl-btn--ghost { border-color: var(--line-strong); background: var(--white); color: var(--green); }
.wl-btn--ghost:hover { background: var(--paper); }
.wl-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.wl-status { min-height: 1.4em; margin: 14px 0 0; color: var(--danger); font-size: 14px; text-align: right; }
.wl-done { outline: none; animation: stepIn .5s var(--ease); }
.wl-done__mark { display: grid; width: 56px; height: 56px; margin-bottom: 22px; place-items: center; border-radius: 50%; background: var(--green); }
.wl-done__mark svg { width: 26px; height: 26px; fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: tickDraw .6s .2s var(--ease) forwards; }
@keyframes tickDraw { to { stroke-dashoffset: 0; } }
.wl-next { display: grid; gap: 14px; margin: 0 0 30px; padding: 0; list-style: none; counter-reset: nx; }
.wl-next li { position: relative; padding-left: 40px; color: #40504b; font-size: 15.5px; line-height: 1.55; counter-increment: nx; }
.wl-next li::before { content: counter(nx); position: absolute; left: 0; top: 0; display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--cream); color: var(--gold-dark); font-size: 13px; font-weight: 700; }
.wl-next b { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .wl-step.is-on, .wl-done, .wl-record__rows .is-new dd { animation: none; }
  .wl-done__mark svg { animation: none; stroke-dashoffset: 0; }
}
@media (max-width: 1000px) {
  .wl { grid-template-columns: 1fr; }
  .wl-side { position: relative; height: auto; order: 2; }
  .wl-main { order: 1; }
  .wl-mobile-top { display: flex; }
}
@media (max-width: 560px) {
  .wl-2 { grid-template-columns: 1fr; }
  .wl-record__rows div { grid-template-columns: 110px minmax(0, 1fr); }
  .wl-nav { flex-direction: column-reverse; }
  .wl-btn { width: 100%; }
  .wl-status { text-align: left; }
}
.wl-mobile-top { display: none; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--bone); }
.wl-mobile-top img { display: block; height: 26px; width: auto; }
.wl-back--dark { color: var(--green); font-weight: 600; }
.wl-back--dark:hover { color: var(--green-2); }
.waitlist__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 32px; }
.waitlist__cta .waitlist__soon { margin: 0 !important; }
@media (max-width: 1000px) { .wl-mobile-top { display: flex; } }
.wl [hidden] { display: none !important; }
.wl-done__mark--wait { background: var(--cream); }
.wl-done__mark--wait svg { stroke: var(--gold-dark); stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
@media (max-width: 1000px) { .wl-side__top { display: none; } }
.wl-record__rows dd { white-space: normal; overflow-wrap: anywhere; }
/* Small gold text on cream needs a deeper gold to reach 4.5:1 contrast */
.ring__node i, .states li span::before, .wl-next li::before, .journey ol li::before { color: #7a5304; }
.journey ol li::before { color: var(--gold); }

/* Windows high contrast and other forced-colour modes: the page's colours are replaced by the
   visitor's own. The dark logo swaps to the light one on a dark scheme (see the <picture> in each
   page), and the role menu gets back the system's own arrow. */
picture { display: contents; }
@media (forced-colors: active) {
  .wl-field select { appearance: auto; padding-right: 16px; background-image: none; }
}

/* Printing or saving as PDF: the words on white paper, without the films, menus or sticky header */
@media print {
  @page { margin: 16mm 14mm; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-header { position: static; background: none; border-bottom: 1px solid #999; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header nav, .site-header .header-actions, .menu-button, .skip-link, video, .film__toggle { display: none !important; }
  .can-reveal [data-reveal], .can-reveal [data-reveal="stagger"] > * { opacity: 1 !important; transform: none !important; }
  .moves.is-pin .moves__pin { position: static; min-height: 0; }
  .moves.is-pin .moves__track { height: auto !important; }
  article, .pcard, .faq details, figure, li { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}