/* @peak/gdpr-consent */
/* Peakime GDPR Consent UI — self-contained design tokens, same approach as
   @peak/ui-compliance's policy-design.css: consuming apps use different
   token systems (shadcn-style vs custom), so this ships its own scoped
   `--gc-*` variables and renders consistently regardless of host app. */

:root {
  --gc-bg: #ffffff;
  --gc-border: #e5e0f5;
  --gc-fg: #1d1732;
  --gc-muted-fg: #6b6478;
  --gc-primary: #621bcb;
  --gc-primary-fg: #ffffff;
  --gc-track-off: #d9d4e8;
  --gc-shadow: 0 20px 50px rgba(20, 10, 40, 0.14);
  --gc-radius-lg: 1.5rem;
  --gc-radius-md: 1rem;
  --gc-radius-sm: 0.6rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --gc-bg: #14111f;
    --gc-border: #2f2547;
    --gc-fg: #f5eeff;
    --gc-muted-fg: #b9b0c9;
    --gc-primary: #d3bbff;
    --gc-primary-fg: #25005a;
    --gc-track-off: #3a3150;
    --gc-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme='dark'],
.dark {
  --gc-bg: #14111f;
  --gc-border: #2f2547;
  --gc-fg: #f5eeff;
  --gc-muted-fg: #b9b0c9;
  --gc-primary: #d3bbff;
  --gc-primary-fg: #25005a;
  --gc-track-off: #3a3150;
  --gc-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.gc-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 2147483000;
  margin: 0 auto;
  max-width: 42rem;
  background: var(--gc-bg);
  color: var(--gc-fg);
  border: 1px solid var(--gc-border);
  border-radius: var(--gc-radius-lg);
  box-shadow: var(--gc-shadow);
  padding: 1.25rem;
  font-family: inherit;
}

.gc-banner p {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--gc-fg);
}

.gc-banner a {
  color: var(--gc-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.gc-btn {
  border: 1px solid var(--gc-border);
  background: transparent;
  color: var(--gc-fg);
  border-radius: var(--gc-radius-sm);
  padding: 0.4rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.gc-btn-primary {
  border: none;
  background: var(--gc-primary);
  color: var(--gc-primary-fg);
}

.gc-panel {
  margin-top: 0.9rem;
  border-top: 1px solid var(--gc-border);
  padding-top: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.gc-category {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.gc-category-copy strong {
  display: block;
  font-size: 0.8rem;
}

.gc-category-copy span {
  display: block;
  font-size: 0.72rem;
  color: var(--gc-muted-fg);
  margin-top: 0.15rem;
}

.gc-switch {
  position: relative;
  width: 2.5rem;
  height: 1.4rem;
  flex: none;
  border-radius: 999px;
  background: var(--gc-track-off);
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.gc-switch[data-checked='true'] {
  background: var(--gc-primary);
}

.gc-switch[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

.gc-switch-thumb {
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background: #fff;
  transition: transform 0.15s ease;
}

.gc-switch[data-checked='true'] .gc-switch-thumb {
  transform: translateX(1.1rem);
}

.gc-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.gc-checkbox-row input[type='checkbox'] {
  margin-top: 0.15rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--gc-primary);
  flex: none;
}

.gc-checkbox-row label {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--gc-muted-fg);
}

.gc-checkbox-row label a {
  color: var(--gc-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gc-checkbox-row label a:hover {
  text-decoration-thickness: 2px;
}

/* site.css */
/* ==========================================================================
   Peakime — design system
   Brand colour: Hyper Magenta #FF1E8C. Button labels on magenta are always
   white. Text is ink (black / white); magenta marks what matters: the mark,
   primary actions, the active state, key words in display headlines.
   ========================================================================== */

@view-transition { navigation: auto; }

:root {
  --magenta: #FF1E8C;
  --on-magenta: #FFFFFF;

  --font-display: 'Inter Tight', 'Inter Display', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --gutter: clamp(1rem, 3.6vw, 2.75rem);
  --max: 1320px;
  --r-lg: 22px;
  --r: 16px;
  --r-sm: 12px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --nav-h: 76px;
}

:root,
:root[data-theme='dark'] {
  --bg: #0A0A0B;
  --bg-2: #111113;
  --surface: #161618;
  --surface-2: #1E1E21;
  --ink: #F5F5F7;
  --ink-2: #A9A9B2;
  --ink-3: #74747D;
  --line: rgba(245, 245, 247, .1);
  --line-2: rgba(245, 245, 247, .18);
  --accent: #FF1E8C;          /* magenta as text/lines on dark: 5.7:1 */
  --accent-soft: rgba(255, 30, 140, .14);
  --glow: rgba(255, 30, 140, .45);
  color-scheme: dark;
}

:root[data-theme='light'] {
  --bg: #FFFFFF;
  --bg-2: #F4F4F6;
  --surface: #F7F7F9;
  --surface-2: #EEEEF1;
  --ink: #0A0A0B;
  --ink-2: #4E4E57;
  --ink-3: #85858E;
  --line: rgba(10, 10, 11, .1);
  --line-2: rgba(10, 10, 11, .2);
  --accent: #D80070;          /* same magenta, deepened for small text on white: 5.0:1 */
  --accent-soft: rgba(255, 30, 140, .1);
  --glow: rgba(255, 30, 140, .35);
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 20px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
  transition: background-color .45s var(--ease), color .45s var(--ease);
}
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--magenta); color: var(--on-magenta); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.i { width: 1.1em; height: 1.1em; flex: none; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem; background: var(--magenta); color: var(--on-magenta); border-radius: 10px; font-weight: 700; transition: top .2s; }
.skip:focus { top: 1rem; }
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
.d-xl, .d-lg, .d-md, .d-sm, .h1, .h2, .h3, .h4, .display {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -.035em; line-height: .9; text-wrap: balance;
}
.d-xl, .display { font-size: clamp(3rem, 9.4vw, 9.5rem); line-height: .86; letter-spacing: -.045em; }
.d-lg, .h1 { font-size: clamp(2.6rem, 7vw, 6.4rem); line-height: .88; letter-spacing: -.04em; }
.d-md, .h2 { font-size: clamp(2.1rem, 4.8vw, 4.4rem); }
.d-sm, .h3 { font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: .95; letter-spacing: -.025em; }
.h4 { font-size: 1.22rem; line-height: 1.12; letter-spacing: -.015em; text-transform: none; font-weight: 800; }
:is(.d-xl, .d-lg, .d-md, .d-sm, .h1, .h2, .h3, .display) em { font-style: normal; color: var(--magenta); }
.h4 em { font-style: normal; color: var(--accent); }
.lede { font-size: clamp(1.06rem, 1.35vw, 1.22rem); line-height: 1.55; color: var(--ink-2); max-width: 40rem; text-wrap: pretty; }
.lede--lg { font-size: clamp(1.12rem, 1.55vw, 1.32rem); }
.muted { color: var(--ink-3); }
.mono { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.4rem;
  font: 600 .74rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}
.eyebrow__star { width: 8px; height: 8px; border-radius: 2px; background: var(--magenta); box-shadow: 0 0 14px var(--glow); }

/* ---------- buttons ---------- */
.btn {
  --pad: 1rem 1.4rem;
  position: relative; display: inline-flex; align-items: center; gap: .6rem; padding: var(--pad);
  border-radius: var(--r-sm); font: 800 1rem/1 var(--font-body); letter-spacing: -.005em; white-space: nowrap;
  transition: transform .5s var(--ease), background-color .25s, color .25s, border-color .25s, box-shadow .4s;
  isolation: isolate; overflow: hidden;
}
.btn .i { transition: transform .45s var(--ease); }
.btn:hover .i { transform: translateX(3px); }
.btn--primary { background: var(--magenta); color: var(--on-magenta); box-shadow: 0 10px 30px -12px var(--glow); }
.btn--primary::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.btn--primary:hover::before { transform: translateX(120%); }
.btn--primary:hover { box-shadow: 0 0 0 5px var(--accent-soft), 0 14px 40px -12px var(--glow); }
.btn--ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--sm { --pad: .7rem 1rem; font-size: .9rem; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.actions--center { justify-content: center; }
.link { display: inline-flex; align-items: center; gap: .4rem; color: var(--accent); font-weight: 700;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .5s var(--ease); }
.link:hover { background-size: 100% 2px; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: transform .6s var(--ease); }
.nav.is-hidden { transform: translateY(-100%); }
.nav__bar { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding-inline: var(--gutter); max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; }
.nav::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--line); }
.nav.is-scrolled::before, .nav.is-open::before { opacity: 1; }
.brand { display: inline-flex; align-items: center; gap: .55rem; }
.brand__mark .mark { width: 30px; height: 30px; overflow: visible; }
.mark__spark { transform-origin: 32px 10px; transition: transform .9s var(--ease); }
.brand:hover .mark__spark { transform: rotate(180deg) scale(1.2); }
.brand__word { font: 900 1.28rem/1 var(--font-display); letter-spacing: -.03em; text-transform: uppercase; }
.nav__links { display: flex; gap: .2rem; }
.nav__links a { position: relative; padding: .55rem .8rem; font-size: .93rem; font-weight: 600; color: var(--ink-2); transition: color .2s; }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--ink); }
.nav__links a::after { content: ''; position: absolute; left: .8rem; right: .8rem; bottom: 2px; height: 2px; background: var(--magenta); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.nav__links a:hover::after, .nav__links a[aria-current]::after { transform: scaleX(1); }
.nav__tools { display: flex; align-items: center; gap: .25rem; }
.iconbtn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--ink-2); transition: background-color .2s, color .2s; }
.iconbtn:hover { background: var(--surface-2); color: var(--ink); }
.iconbtn .i { width: 20px; height: 20px; }
:root[data-theme='dark'] .i--moon, :root[data-theme='light'] .i--sun { display: none; }
.nav__cta { margin-left: .4rem; }
.nav__burger { display: none; }
.menu { position: fixed; inset: 0; z-index: 45; background: var(--bg); padding: calc(var(--nav-h) + 1.5rem) var(--gutter) 2rem; overflow-y: auto; clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease-io); }
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu__inner { display: flex; flex-direction: column; max-width: 640px; margin: 0 auto; }
.menu__inner > a:not(.btn) { font: 900 clamp(2.2rem, 11vw, 3.4rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: -.04em; padding: .3rem 0; border-bottom: 1px solid var(--line);
  transform: translateY(30px); opacity: 0; transition: transform .7s var(--ease), opacity .5s, color .2s; transition-delay: calc(var(--i, 0) * 45ms + 150ms); }
.menu.is-open .menu__inner > a { transform: none; opacity: 1; }
.menu__inner > a[aria-current], .menu__inner > a:hover { color: var(--magenta); }
.menu__worlds { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.6rem 0; }
.menu__worlds a { padding: .45rem .8rem; border: 1px solid var(--line-2); border-radius: 999px; font-size: .86rem; font-weight: 600; color: var(--ink-2); }
.menu .btn { align-self: flex-start; }
@media (max-width: 1100px) { .nav__links { display: none; } .nav__burger { display: grid; } }
@media (max-width: 560px) { .nav__cta { display: none; } }

/* ---------- sections ---------- */
main { display: block; }
.section { position: relative; padding-block: clamp(5rem, 11vw, 10rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--raised { background: var(--bg-2); }
.section--line { border-top: 1px solid var(--line); }
.shead { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); max-width: 64rem; }
.shead .lede { margin-top: 1.5rem; }
.shead--center { margin-inline: auto; text-align: center; }
.shead--center .lede { margin-inline: auto; }
.shead--split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem 4rem; align-items: end; max-width: none; }
.shead--split .lede { margin: 0; }
@media (max-width: 900px) { .shead--split { grid-template-columns: 1fr; } }
.split { display: grid; gap: clamp(2rem, 6vw, 6rem); }
.split--5-7 { grid-template-columns: 5fr 7fr; } .split--7-5 { grid-template-columns: 7fr 5fr; }
.split--6-6 { grid-template-columns: 1fr 1fr; } .split--4-8 { grid-template-columns: 4fr 8fr; }
.split--center { align-items: center; } .split--start { align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr !important; } }
.sticky { position: sticky; top: calc(var(--nav-h) + 2rem); }
@media (max-width: 900px) { .sticky { position: static; } }

/* ---------- rows: the core list pattern (replaces card grids) ---------- */
.rows { list-style: none; border-top: 1px solid var(--line-2); counter-reset: row; }
.row {
  position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: start;
  padding: clamp(1.4rem, 2.6vw, 2.2rem) 0; border-bottom: 1px solid var(--line-2); isolation: isolate;
}
.row::before { content: ''; position: absolute; inset: 0 calc(var(--gutter) * -1); z-index: -1; background: var(--surface); transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease); }
.row:hover::before { transform: scaleY(1); }
.row__n { font: 700 .8rem/1.6 var(--font-mono); color: var(--ink-3); padding-top: .35rem; transition: color .3s; }
.row:hover .row__n { color: var(--accent); }
.row__t { display: flex; align-items: center; gap: .9rem; }
.row__t .d-sm { transition: transform .55s var(--ease); }
.row:hover .row__t .d-sm { transform: translateX(10px); }
.row__ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); }
.row__ic .i { width: 20px; height: 20px; }
.row__b { color: var(--ink-2); font-size: 1rem; }
.row__b > :first-child { margin-top: .2rem; }
.row__go { align-self: center; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); transition: background-color .3s, border-color .3s, color .3s, transform .5s var(--ease); }
.row:hover .row__go { background: var(--magenta); border-color: var(--magenta); color: var(--on-magenta); transform: rotate(-45deg); }
.row__go .i { width: 20px; height: 20px; }
.row--plain .row__go { display: none; }
.row a.row__cover { position: absolute; inset: 0; z-index: 1; }
@media (max-width: 860px) {
  .row { grid-template-columns: 2.6rem minmax(0, 1fr) auto; }
  .row__b { grid-column: 2 / -1; }
  .row__go { grid-column: 3; grid-row: 1; width: 40px; height: 40px; }
}

/* product world row */
.world-row .d-sm { font-size: clamp(2rem, 4.4vw, 3.8rem); }
.world-row .row__verb { display: block; margin-top: .6rem; font: 600 .72rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.world-row .row__links { display: flex; gap: .6rem; margin-top: 1rem; position: relative; z-index: 2; }

/* ---------- steps ---------- */
.steps { list-style: none; position: relative; }
.steps::before { content: ''; position: absolute; left: 1.55rem; top: 0; bottom: 0; width: 2px; background: var(--line-2); }
.steps::after { content: ''; position: absolute; left: 1.55rem; top: 0; width: 2px; height: calc(var(--p, 0) * 100%); background: var(--magenta); box-shadow: 0 0 14px var(--glow); }
.steps__item { position: relative; display: grid; grid-template-columns: 3.2rem 1fr; gap: 1.6rem; padding: 0 0 clamp(2rem, 4vw, 3rem); }
.steps__num { position: relative; z-index: 1; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-2); font: 800 .85rem/1 var(--font-mono); transition: background-color .4s, border-color .4s, color .4s; }
.steps__item.is-on .steps__num { background: var(--magenta); border-color: var(--magenta); color: var(--on-magenta); }
.steps__tag { font: 600 .7rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: .2rem 0 .6rem; }
.steps .h4 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin: .55rem 0 .5rem; }
.steps p { color: var(--ink-2); max-width: 44rem; }

/* ---------- chips, callout, quote, faq ---------- */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; }
.chips li { padding: .5rem .85rem; border: 1px solid var(--line-2); border-radius: 999px; font-size: .9rem; font-weight: 600; color: var(--ink-2); transition: border-color .2s, color .2s; }
.chips li:hover { border-color: var(--magenta); color: var(--ink); }
.callout { display: flex; gap: 1rem; padding: 1.3rem 1.4rem; border-left: 3px solid var(--magenta); background: var(--surface); border-radius: 0 var(--r) var(--r) 0; }
.callout__icon { color: var(--accent); padding-top: .1rem; }
.callout__icon .i { width: 22px; height: 22px; }
.callout__title { font-weight: 800; margin-bottom: .3rem; }
.callout p { color: var(--ink-2); }
.pull { margin: 0; padding: clamp(1rem, 3vw, 2rem) 0; position: relative; }
.pull::before { content: '“'; display: block; font: 900 clamp(5rem, 10vw, 8rem)/.6 var(--font-display); color: var(--magenta); margin-bottom: .2rem; }
.pull blockquote { margin: 0; font: 900 clamp(1.8rem, 3.8vw, 3.3rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: -.03em; text-wrap: balance; }
.pull figcaption { margin-top: 1.4rem; font: 600 .74rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

.faq { border-top: 1px solid var(--line-2); }
.faq__item { border-bottom: 1px solid var(--line-2); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.35rem 0; font: 800 clamp(1.05rem, 1.6vw, 1.28rem)/1.3 var(--font-body); letter-spacing: -.01em; transition: color .2s; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent); }
.faq__plus { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); transition: transform .5s var(--ease), background-color .3s, color .3s, border-color .3s; }
.faq__item[open] .faq__plus { transform: rotate(45deg); background: var(--magenta); color: var(--on-magenta); border-color: var(--magenta); }
.faq__a { padding: 0 3.6rem 1.6rem 0; color: var(--ink-2); }
.faq__a ul { padding-left: 1.2rem; }
.faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; }
.faq__item[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

.prose { color: var(--ink-2); max-width: 46rem; }
.prose h2, .prose h3 { color: var(--ink); font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: 1; }
.prose h2 { font-size: 1.8rem; margin: 2.6rem 0 1rem; }
.prose h3 { font-size: 1.3rem; margin: 2rem 0 .7rem; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1.2em; }
.prose li { margin: .35em 0; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }

/* ---------- big numbers ---------- */
.stat .stat__n { color: var(--ink); font: 900 clamp(4rem, 12vw, 11rem)/.8 var(--font-display); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.stat__n em { font-style: normal; color: var(--magenta); }
.stat__l { margin-top: 1rem; font: 600 .76rem/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

.tag { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: 6px; font: 900 .7rem/1 var(--font-body); font-style: italic; letter-spacing: .02em; text-transform: uppercase; background: var(--magenta); color: var(--on-magenta); }

/* ---------- marquee ---------- */
.marquee { position: relative; overflow: hidden; display: flex; user-select: none; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track { display: flex; flex: none; gap: 0; will-change: transform; }
.marquee__item { display: inline-flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); padding-right: clamp(1rem, 2.4vw, 2rem); white-space: nowrap;
  font: 900 clamp(2.6rem, 8vw, 7.5rem)/1 var(--font-display); letter-spacing: -.045em; text-transform: uppercase; }
.marquee__item .star { width: .45em; height: .45em; flex: none; background: var(--magenta); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.marquee--outline .marquee__item span:not(.star) { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.marquee--outline .marquee__item span.is-fill { color: var(--ink); -webkit-text-stroke: 0; }
.marquee--sm .marquee__item { font-size: clamp(1rem, 2vw, 1.4rem); letter-spacing: .02em; font-family: var(--font-mono); font-weight: 600; }

/* ---------- cosmos & page hero ---------- */
.cosmos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.phero { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--nav-h) + clamp(4rem, 10vw, 8rem)) 0 clamp(3rem, 7vw, 6rem); border-bottom: 1px solid var(--line); }
.phero .cosmos { z-index: -2; }
.phero__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent 40%, var(--bg) 100%); }
.phero__grid { display: grid; gap: 3rem; align-items: end; }
.phero__grid--aside { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.phero .h1 { max-width: 14ch; }
.phero .lede { margin-top: 1.8rem; }
.phero__meta { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; color: var(--ink-3); font: 600 .78rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.phero__meta span { display: inline-flex; align-items: center; gap: .45rem; }
.phero__meta .i { color: var(--accent); }
@media (max-width: 900px) { .phero__grid--aside { grid-template-columns: 1fr; } }

/* ---------- CTA: full magenta block ---------- */
.cta { padding-block: clamp(3rem, 7vw, 6rem); }
.cta__panel { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); background: var(--magenta); color: var(--on-magenta); padding: clamp(3rem, 8vw, 7rem) clamp(1.4rem, 5vw, 5rem); }
.cta__panel .h2 { font-size: clamp(2.6rem, 7.4vw, 7rem); max-width: 14ch; color: var(--on-magenta); }
.cta__panel .h2 em { color: transparent; -webkit-text-stroke: 2px #fff; }
.cta__panel .lede { color: rgba(255,255,255,.88); margin-top: 1.6rem; }
.cta__panel .btn--primary { background: #0A0A0B; color: #fff; box-shadow: none; }
.cta__panel .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.cta__panel .btn--ghost:hover { border-color: #fff; }
.cta__burst { position: absolute; right: -8%; top: calc(50% - min(24vw, 280px)); width: min(48vw, 560px); aspect-ratio: 1; z-index: -1; pointer-events: none; }
.cta__burst path { fill: #fff; opacity: .14; }
.cta__burst .core { opacity: 1; fill: #fff; }
@media (max-width: 700px) { .cta__burst { opacity: .35; right: -30%; } }

/* ---------- footer ---------- */
.foot { position: relative; overflow: hidden; border-top: 1px solid var(--line); padding: clamp(4rem, 8vw, 6rem) 0 2.2rem; }
.foot__big { font: 900 clamp(3rem, 13vw, 13rem)/.82 var(--font-display); letter-spacing: -.06em; text-transform: uppercase; margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.foot__big em { font-style: normal; color: var(--magenta); }
.foot__lead { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.foot__about p { color: var(--ink-2); margin-top: 1rem; max-width: 28rem; }
.foot__about .foot__origin { font: 600 .72rem/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.foot__contact a { display: inline-flex; align-items: center; gap: .5rem; color: var(--accent); font-weight: 700; }
.foot__cols { display: grid; grid-template-columns: repeat(3, 1fr) 1.6fr; gap: 2rem; padding: 2.8rem 0; }
.foot__cols .foot__col:last-child ul { columns: 2; column-gap: 2rem; }
.foot__title { font: 600 .72rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1.1rem; }
.foot__col ul { list-style: none; }
.foot__col li { break-inside: avoid; }
.foot__col a { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem 0; color: var(--ink-2); font-size: .93rem; font-weight: 500; transition: color .2s; }
.foot__col a:hover { color: var(--ink); }
.foot__col .i { width: 12px; height: 12px; opacity: .55; }
.foot__legal { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-top: 1.8rem; border-top: 1px solid var(--line); color: var(--ink-3); font-size: .84rem; }
.foot__legal p { margin: 0 0 .3rem; }
.foot__co { color: var(--ink-2); font-weight: 700; }
.foot__mini { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; align-items: flex-start; }
.foot__mini p { width: 100%; }
.foot__mini a:hover { color: var(--ink); }
@media (max-width: 980px) { .foot__lead { grid-template-columns: 1fr; } .foot__cols { grid-template-columns: repeat(2, 1fr); } .foot__cols .foot__col:last-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot__cols .foot__col:last-child ul { columns: 1; } }

/* ---------- search ---------- */
.search { width: min(660px, calc(100vw - 2rem)); max-height: min(70vh, 640px); margin: 12vh auto auto; padding: 0; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); box-shadow: 0 40px 120px -20px rgba(0,0,0,.6); }
.search[open] { display: flex; flex-direction: column; animation: pop .35s var(--ease); }
.search::backdrop { background: rgba(5,5,6,.6); backdrop-filter: blur(6px); }
.search__box { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.search__box .i { width: 20px; height: 20px; color: var(--ink-3); }
.search__box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 1.1rem var(--font-body); }
.search__box input::-webkit-search-cancel-button { display: none; }
kbd { font: 600 .7rem/1 var(--font-mono); padding: .35rem .45rem; border: 1px solid var(--line-2); border-radius: 6px; color: var(--ink-3); }
.search__results { list-style: none; overflow-y: auto; padding: .5rem; }
.search__results a { display: block; padding: .8rem 1rem; border-radius: var(--r-sm); border-left: 3px solid transparent; }
.search__results a[aria-selected='true'], .search__results a:hover { background: var(--surface-2); border-left-color: var(--magenta); }
.search__results strong { display: block; font-weight: 800; }
.search__results span { display: block; font-size: .86rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search__empty { padding: 1.4rem; color: var(--ink-3); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* ---------- policy documents ---------- */
.doc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
.doc__toc { position: sticky; top: calc(var(--nav-h) + 1.5rem); align-self: start; max-height: calc(100vh - var(--nav-h) - 3rem); overflow-y: auto; }
.doc__toc p { font: 600 .7rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1rem; }
.doc__toc ol { list-style: none; border-left: 2px solid var(--line); }
.doc__toc a { display: block; padding: .45rem 0 .45rem 1rem; margin-left: -2px; border-left: 2px solid transparent; font-size: .9rem; font-weight: 500; color: var(--ink-3); transition: color .2s, border-color .2s; }
.doc__toc a:hover { color: var(--ink); }
.doc__toc a.is-active { color: var(--ink); border-left-color: var(--magenta); font-weight: 700; }
.doc__body { max-width: 48rem; }
.doc__chapter { padding-top: 1rem; margin-bottom: 4rem; }
.doc__chapter > .h3 { padding-bottom: 1.1rem; margin-bottom: 1.6rem; border-bottom: 2px solid var(--ink); }
.doc__sec { margin-bottom: 2.2rem; }
.doc__sec h3 { font: 800 1.16rem/1.35 var(--font-body); letter-spacing: -.01em; margin-bottom: .8rem; }
.doc__sec p { color: var(--ink-2); }
.doc__sec .chips { margin: 1rem 0; }
.doc__sec .callout { margin: 1rem 0; }
.doc__legal { padding: 1.4rem 1.5rem; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); }
.doc__legal p { font-size: .94rem; }
.doc__contacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0; border-top: 1px solid var(--line-2); }
.doc__contacts a { display: block; padding: 1rem 0; border-bottom: 1px solid var(--line-2); transition: padding-left .4s var(--ease); }
.doc__contacts a:hover { padding-left: .6rem; }
.doc__contacts strong { display: block; font-size: .95rem; }
.doc__contacts span { display: block; color: var(--accent); font-size: .88rem; font-weight: 600; word-break: break-all; }
.doc__contacts small { display: block; margin-top: .3rem; color: var(--ink-3); font-size: .82rem; }
@media (max-width: 960px) {
  .doc { grid-template-columns: 1fr; }
  .doc__toc { position: static; max-height: none; }
  .doc__toc ol { display: flex; gap: .4rem; overflow-x: auto; border-left: 0; padding-bottom: .4rem; }
  .doc__toc a { white-space: nowrap; border: 1px solid var(--line-2); border-radius: 999px; padding: .4rem .8rem; margin: 0; }
  .doc__toc a.is-active { border-color: var(--magenta); }
}

/* ---------- cursor (fine pointers only) ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 95; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--magenta); pointer-events: none; mix-blend-mode: normal;
  transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), opacity .3s; opacity: 0; }
.cursor.is-on { opacity: 1; }
.cursor.is-big { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: color-mix(in srgb, var(--magenta) 22%, transparent); border: 1px solid var(--magenta); }

/* ==========================================================================
   Motion
   ========================================================================== */
.js [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-stagger] > * { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--si, 0) * 80ms); }
.js [data-stagger].is-in > * { opacity: 1; transform: none; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; }
.js [data-split] .w > span { transform: translateY(105%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--wi, 0) * 55ms + var(--d, 0ms)); }
.js [data-split].is-in .w > span { transform: none; }
.js [data-clip] { clip-path: inset(0 0 99% 0); transition: clip-path 1.3s var(--ease-io); transition-delay: var(--d, 0ms); }
.js [data-clip].is-in { clip-path: inset(0 0 0 0); }
[data-draw] path, [data-draw] line, [data-draw] circle, [data-draw] rect, [data-draw] polyline { stroke-dasharray: var(--len, 1000); stroke-dashoffset: calc(var(--len, 1000) * (1 - var(--p, 1))); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js [data-stagger] > *, .js [data-split] .w > span { opacity: 1 !important; transform: none !important; }
  .js [data-clip] { clip-path: none !important; }
  .cursor { display: none; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: var(--ease-io); }

/* shared GDPR consent banner, mapped onto Peakime tokens */
:root, :root[data-theme='dark'], :root[data-theme='light'] {
  --gc-bg: var(--surface); --gc-border: var(--line-2); --gc-fg: var(--ink); --gc-muted-fg: var(--ink-2);
  --gc-primary: var(--magenta); --gc-primary-fg: var(--on-magenta); --gc-track-off: var(--line-2);
}

/* company.css */
/* ==========================================================================
   Company pages — About, Mandate, Careers, Showcase, Explore, Get Started,
   Voluntary Support. Everything prefixed co- so it never clashes.
   Ink text, Hyper Magenta for emphasis, white text on magenta.
   ========================================================================== */

.co-gap { margin-top: clamp(3rem, 6vw, 5rem); }
.co-gap-sm { margin-top: 1.6rem; }

/* long-form prose blocks */
.co-prose .pull blockquote { font-size: clamp(1.4rem, 2.4vw, 2.2rem); }
.co-prose { display: grid; gap: 1.2rem; color: var(--ink-2); font-size: 1.08rem; max-width: 44rem; }
.co-prose p { margin: 0; }
.co-prose__big { font: 800 clamp(1.35rem, 2.3vw, 2rem)/1.2 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.co-prose__punch { font: 900 clamp(1.3rem, 2vw, 1.7rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: -.02em; color: var(--ink); }
.co-lede-xl { font-size: clamp(1.15rem, 1.7vw, 1.4rem); }

/* name + description lines (lists, not cards) */
.co-lines { list-style: none; margin-top: 1.8rem; border-top: 1px solid var(--line-2); }
.co-lines li { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr; gap: .4rem 1.6rem; padding: .95rem 0; border-bottom: 1px solid var(--line-2); transition: padding-left .45s var(--ease); }
.co-lines li:hover { padding-left: .6rem; }
.co-lines strong { font-weight: 800; }
.co-lines span { color: var(--ink-2); }
.co-lines--wide li { grid-template-columns: minmax(12rem, 22rem) 1fr; padding: 1.3rem 0; }
.co-lines--wide strong { font: 900 clamp(1.1rem, 1.8vw, 1.5rem)/1.05 var(--font-display); text-transform: uppercase; letter-spacing: -.02em; }
@media (max-width: 640px) { .co-lines li, .co-lines--wide li { grid-template-columns: 1fr; } }

/* ---------- About ---------- */
.co-story { display: grid; gap: 1.6rem; }
.co-story__lead { font: 800 clamp(1.3rem, 2.2vw, 1.85rem)/1.25 var(--font-display); letter-spacing: -.02em; margin: 0; }
.co-door-row { display: grid; grid-template-columns: 170px 1fr; gap: 1.6rem; align-items: center; padding: 1.4rem 0; border-block: 1px solid var(--line-2); }
.co-door { color: var(--ink); }
.co-door__light { fill: var(--magenta); opacity: .9; }
.co-door__panel { fill: var(--surface-2); stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.co-door__leaf { transform-box: view-box; transform-origin: 74px 105px; animation: coDoor 5s var(--ease-io) infinite; }
.co-door__spill { fill: var(--magenta); opacity: 0; animation: coSpill 5s var(--ease-io) infinite; }
@keyframes coDoor { 0%, 12% { transform: scaleX(1); } 45%, 80% { transform: scaleX(.12); } 100% { transform: scaleX(1); } }
@keyframes coSpill { 0%, 15% { opacity: 0; } 45%, 78% { opacity: .35; } 100% { opacity: 0; } }
@media (max-width: 560px) { .co-door-row { grid-template-columns: 110px 1fr; gap: 1rem; } }

.co-two { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--line); }
.co-two__side { padding: clamp(3.5rem, 8vw, 7rem) var(--gutter); }
.co-two__side + .co-two__side { border-left: 1px solid var(--line); background: var(--bg-2); }
.co-two__inner { max-width: 600px; margin-left: auto; }
.co-two__side + .co-two__side .co-two__inner { margin-left: 0; margin-right: auto; }
.co-two__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--magenta); color: var(--on-magenta); margin-bottom: 1.6rem; }
.co-two__icon .i { width: 26px; height: 26px; }
.co-two .lede { margin-top: 1.2rem; }
@media (max-width: 900px) { .co-two { grid-template-columns: 1fr; } .co-two__side + .co-two__side { border-left: 0; border-top: 1px solid var(--line); } .co-two__inner { margin: 0 !important; } }

/* timeline: the line fills magenta as you scroll; each dot lights on arrival */
.co-tl { list-style: none; position: relative; padding-left: 2.6rem; }
.co-tl::before, .co-tl::after { content: ''; position: absolute; left: .55rem; top: .6rem; width: 2px; }
.co-tl::before { bottom: .6rem; background: var(--line-2); }
.co-tl::after { height: calc(var(--p, 0) * (100% - 1.2rem)); background: var(--magenta); box-shadow: 0 0 14px var(--glow); }
.co-tl__item { position: relative; display: grid; grid-template-columns: minmax(8rem, 15rem) 1fr; gap: .6rem 2.4rem; padding: 0 0 clamp(2.4rem, 5vw, 4rem); }
.co-tl__dot { position: absolute; left: -2.6rem; top: .35rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--line-2); transition: background-color .6s, border-color .6s, box-shadow .6s; transition-delay: .3s; }
.co-tl__item.is-in .co-tl__dot { background: var(--magenta); border-color: var(--magenta); box-shadow: 0 0 0 6px var(--accent-soft); }
.co-tl__item.is-future .co-tl__dot { background: var(--bg-2); border-style: dashed; border-color: var(--magenta); box-shadow: none; }
.co-tl__when { font: 900 clamp(1.8rem, 3.8vw, 3.2rem)/.9 var(--font-display); letter-spacing: -.04em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px var(--ink); margin: 0; }
.co-tl__item.is-future .co-tl__when { -webkit-text-stroke-color: var(--magenta); }
.co-tl__item .d-sm { margin-bottom: .6rem; }
.co-tl__item p:not(.co-tl__when) { color: var(--ink-2); max-width: 40rem; }
@media (max-width: 700px) { .co-tl__item { grid-template-columns: 1fr; } }

.co-vision .pull blockquote { font-size: clamp(1.6rem, 3.4vw, 3rem); max-width: 30ch; }

.co-corp .d-sm { margin-bottom: 1rem; }
.co-corp__p { color: var(--ink-2); max-width: 36rem; }
.co-facts { margin: 1.6rem 0 0; border-top: 1px solid var(--line-2); }
.co-facts div { padding: .95rem 0; border-bottom: 1px solid var(--line-2); }
.co-facts dt { font: 600 .72rem/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .35rem; }
.co-facts dd { margin: 0; font-weight: 700; }
.co-mails { list-style: none; margin-top: 1.6rem; border-top: 1px solid var(--line-2); }
.co-mails a { display: grid; grid-template-columns: 1fr auto auto; gap: .3rem 1rem; align-items: center; padding: .95rem 0; border-bottom: 1px solid var(--line-2); transition: padding-left .45s var(--ease); }
.co-mails a:hover { padding-left: .6rem; }
.co-mails strong { display: block; font-weight: 800; }
.co-mails small { display: block; color: var(--ink-3); font-size: .86rem; }
.co-mails em { font-style: normal; color: var(--accent); font-weight: 700; font-size: .9rem; }
.co-mails .i { transition: transform .4s var(--ease); }
.co-mails a:hover .i { transform: translateX(4px); color: var(--accent); }
@media (max-width: 640px) { .co-mails a { grid-template-columns: 1fr auto; } .co-mails em { grid-column: 1; grid-row: 2; } }
.co-domains { margin-top: clamp(4rem, 8vw, 6rem); }
.co-domains .lede { margin-top: 1rem; }
.co-domains__list { list-style: none; columns: 2; column-gap: 3rem; margin-top: 2rem; border-top: 1px solid var(--line-2); }
.co-domains__list li { break-inside: avoid; }
.co-domains__list a { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--line-2); transition: padding-left .45s var(--ease), color .2s; }
.co-domains__list a:hover { padding-left: .6rem; }
.co-domains__list strong { font-weight: 800; }
.co-domains__list span { font: 500 .8rem/1 var(--font-mono); color: var(--ink-3); }
.co-domains__list a:hover span, .co-domains__list a:hover .i { color: var(--accent); }
.co-domains__list .i { width: 14px; height: 14px; color: var(--ink-3); }
@media (max-width: 760px) { .co-domains__list { columns: 1; } }

/* ---------- Mandate ---------- */
.co-band { padding-block: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.co-band__p { margin: 1.6rem auto 0; text-align: center; }
/* principles stack: each one slides over the last as you scroll */
.co-manifest { padding-block: clamp(3rem, 6vw, 5rem); }
.co-manifest__list { list-style: none; }
.co-manifest__item { position: sticky; top: var(--nav-h); display: grid; grid-template-columns: minmax(6rem, 14rem) 1fr; gap: 1rem 3rem; align-content: center; align-items: start;
  min-height: calc(100vh - var(--nav-h)); padding: clamp(2rem, 4vw, 3.2rem) 0; background: var(--bg); border-top: 2px solid var(--ink); }
.co-manifest__n { font: 900 clamp(4.5rem, 12vw, 11rem)/.8 var(--font-display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px var(--magenta); }
.co-manifest__item .lede { margin-top: 1.6rem; font-size: clamp(1.15rem, 1.8vw, 1.5rem); max-width: 36rem; }
@media (max-width: 760px) { .co-manifest__item { grid-template-columns: 1fr; min-height: 0; position: static; } }

.co-policy { display: grid; gap: 0; margin-top: 2.2rem; border-top: 1px solid var(--line-2); }
.co-policy__item { padding: 1.6rem 0; border-bottom: 1px solid var(--line-2); }
.co-policy__item p { color: var(--ink-2); }
.co-policy__item .stat__n { font-size: clamp(3.4rem, 8vw, 6.5rem); color: var(--ink); }
.co-policy__item .stat__n em { font-size: .5em; }
.co-policy__item .stat__l { margin: .6rem 0 .6rem; }
.co-policy__item .d-sm { margin-bottom: .6rem; }
.co-shield-wrap { display: grid; place-items: center; color: var(--ink); }
.co-shield { max-width: 360px; }
.co-shield__outline { stroke-width: 3; stroke-dasharray: 520; stroke-dashoffset: 520; animation: coDraw 4.5s var(--ease) infinite; }
.co-shield__check { stroke-width: 5; stroke-dasharray: 90; stroke-dashoffset: 90; animation: coCheck 4.5s var(--ease) infinite; }
.co-shield__scan { stroke-width: 2; opacity: .8; animation: coScan 4.5s var(--ease-io) infinite; }
@keyframes coDraw { 0% { stroke-dashoffset: 520; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes coCheck { 0%, 45% { stroke-dashoffset: 90; } 65%, 100% { stroke-dashoffset: 0; } }
@keyframes coScan { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 50% { transform: translateY(110px); opacity: .9; } 60%, 100% { transform: translateY(110px); opacity: 0; } }

.co-zero { padding-block: clamp(5rem, 11vw, 9rem); border-top: 1px solid var(--line); overflow: hidden; }
.co-zero__h { display: grid; gap: .6rem; margin: 0 0 2rem; }
.js .co-zero__h .co-zero__n { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease-io) .1s; }
.co-zero__h.is-in .co-zero__n { clip-path: inset(0 0 -10% 0); }
@media (prefers-reduced-motion: reduce) { .js .co-zero__h .co-zero__n { clip-path: none; } }
.co-zero__n { display: block; font: 900 clamp(7rem, 26vw, 24rem)/.78 var(--font-display); letter-spacing: -.07em; color: var(--magenta); }
.co-zero .lede { font-size: clamp(1.15rem, 1.7vw, 1.4rem); max-width: 44rem; }
.co-zero__seal { display: inline-flex; align-items: center; gap: .6rem; margin-top: 2rem; padding: .7rem 1rem; border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--ink-2); text-transform: uppercase; }
.co-zero__seal .i { color: var(--accent); }

/* ---------- Careers ---------- */
.co-applies { margin-top: .8rem; font: 600 .72rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.co-offers { padding-block: clamp(4rem, 8vw, 6rem); border-block: 1px solid var(--line); }
.co-offers .wrap { margin-top: clamp(2.5rem, 5vw, 4rem); }
.co-cta-note { flex-basis: 100%; margin-top: .6rem; color: rgba(255,255,255,.88); font-size: .95rem; }

/* ---------- Showcase ---------- */
.co-wait--flip > :first-child { order: 2; }
@media (max-width: 900px) { .co-wait--flip > :first-child { order: 0; } }
.co-wait__panel { position: relative; padding: clamp(1.6rem, 3vw, 2.4rem); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.co-wait__panel .mg { max-width: 100%; margin: 0 auto 1.4rem; display: block; }
.co-wait__panel .d-sm { margin-bottom: .8rem; }
.co-wait__panel p { color: var(--ink-2); }
.co-wait__cta { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-2); color: var(--ink) !important; font-weight: 600; }
.co-stage__beam { transform-box: view-box; transform-origin: 160px 6px; animation: coBeam 5s var(--ease-io) infinite alternate; }
@keyframes coBeam { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.co-stage__spark { transform-box: fill-box; transform-origin: center; animation: coTwinkle 2.4s var(--ease-io) infinite; }
@keyframes coTwinkle { 50% { transform: scale(.55) rotate(45deg); opacity: .5; } }

/* ---------- Get Started ---------- */
/* paths stack as you scroll */
.co-paths { padding-block: clamp(3rem, 6vw, 5rem); }
.co-paths__list { list-style: none; display: grid; gap: 1.2rem; }
.co-path { position: sticky; top: calc(var(--nav-h) + 1rem + var(--i) * clamp(5.5rem, 10vw, 9rem)); display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr; gap: 1.4rem 3rem;
  padding: clamp(1.8rem, 4vw, 3.2rem); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); box-shadow: 0 -20px 40px -30px rgba(0,0,0,.5); }
.co-path:nth-child(2) { background: var(--surface-2); }
.co-path:nth-child(3) { background: var(--magenta); border-color: var(--magenta); color: var(--on-magenta); }
.co-path:nth-child(3) .lede, .co-path:nth-child(3) .co-path__outcome { color: rgba(255,255,255,.92); }
.co-path:nth-child(3) .chips li { color: #fff; border-color: rgba(255,255,255,.55); }
.co-path:nth-child(3) .btn--primary { background: #0A0A0B; color: #fff; box-shadow: none; }
.co-path:nth-child(3) .co-path__icon { background: #fff; color: var(--magenta); }
.co-path:nth-child(3) .co-path__n { color: #fff; }
.co-path__head { display: flex; flex-direction: column; gap: 1rem; }
.co-path__n { font-size: .9rem; font-weight: 700; color: var(--ink-3); }
.co-path__icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: var(--r); background: var(--magenta); color: var(--on-magenta); }
.co-path__icon .i { width: 30px; height: 30px; }
.co-path__body .lede { margin-top: 1.2rem; }
.co-path__outcome { margin-top: 1rem; color: var(--ink-2); max-width: 40rem; }
.co-path__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.6rem; }
@media (max-width: 760px) { .co-path { grid-template-columns: 1fr; position: static; } .co-path__head { flex-direction: row; align-items: center; justify-content: space-between; } }

/* four steps along a line that fills as you scroll */
.co-flow { list-style: none; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding-top: 0; }
.co-flow__line { position: absolute; left: 32px; right: 32px; top: 31px; height: 2px; background: var(--line-2); }
.co-flow__line::after { content: ''; position: absolute; inset: 0; background: var(--magenta); transform: scaleX(var(--p, 0)); transform-origin: left; box-shadow: 0 0 12px var(--glow); }
.co-flow { --p: 0; }
.co-flow__step { position: relative; }
.co-flow__node { position: relative; z-index: 1; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--line-2); color: var(--ink); transition: background-color .6s, border-color .6s, color .6s; transition-delay: .4s; }
.co-flow__step.is-in .co-flow__node { background: var(--magenta); border-color: var(--magenta); color: var(--on-magenta); }
.co-flow__node .i { width: 26px; height: 26px; }
.co-flow__n { margin: 1.4rem 0 .5rem; color: var(--ink-3); font-weight: 700; }
.co-flow__step .d-sm { margin-bottom: .6rem; }
.co-flow__step p:last-child { color: var(--ink-2); }
@media (max-width: 860px) {
  .co-flow { grid-template-columns: 1fr; gap: 1.6rem; padding-left: 5rem; }
  .co-flow__line { left: 31px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .co-flow__line::after { transform: scaleY(var(--p, 0)); transform-origin: top; }
  .co-flow__node { position: absolute; left: -5rem; top: 0; }
  .co-flow__n { margin-top: 0; }
}

/* ---------- Voluntary Support ---------- */
.co-clarity { list-style: none; border-top: 2px solid var(--ink); }
.co-clarity__item { position: relative; display: grid; grid-template-columns: 4rem minmax(0, 1.1fr) minmax(0, 1fr); gap: .6rem 2rem; align-items: center; padding: clamp(1.6rem, 3vw, 2.6rem) 0; border-bottom: 1px solid var(--line-2); }
.co-clarity__x { grid-row: span 1; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--magenta); color: var(--on-magenta); }
.co-clarity__x .i { width: 24px; height: 24px; }
.co-clarity__n { position: absolute; right: 0; top: 1rem; color: var(--ink-3); font-weight: 700; }
.co-clarity__item p:last-child { color: var(--ink-2); font-size: 1.05rem; }
@media (max-width: 860px) { .co-clarity__item { grid-template-columns: 4rem 1fr; } .co-clarity__item p:last-child { grid-column: 2; } }

/* ---------- Explore ---------- */
.co-genres { padding-block: clamp(1.6rem, 3vw, 2.4rem); border-bottom: 1px solid var(--line); display: grid; gap: 1rem; }
.co-cat { padding-block: clamp(2rem, 5vw, 4rem); border-top: 1px solid var(--line); }
.co-cat__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); }
.co-cat__aside { position: relative; }
.co-cat__list { list-style: none; }
.co-cat__item { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; padding: 3rem 0; border-bottom: 1px solid var(--line-2); opacity: .35; transition: opacity .6s var(--ease); }
.co-cat__item.is-on, .co-cat__item:hover, .co-cat__item:focus-within { opacity: 1; }
.co-cat__item .lede { margin-top: 1.4rem; }
.co-cat__label { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.2rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.co-cat__label span { background: var(--magenta); color: var(--on-magenta); padding: .25rem .45rem; border-radius: 5px; }

.co-orb { container-type: inline-size; position: sticky; top: calc(50vh - min(19vw, 230px)); width: 100%; max-width: 460px; aspect-ratio: 1; margin-inline: auto; }
.co-orb__ring { position: absolute; inset: 9%; border-radius: 50%; border: 1px solid var(--line-2); }
.co-orb__ring--2 { inset: 28%; border-style: dashed; animation: coSpin 60s linear infinite; }
@keyframes coSpin { to { transform: rotate(360deg); } }
.co-orb__core { position: absolute; inset: 39%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 38% 32%, #FF9ACB, var(--magenta) 50%, #8A0047 100%); box-shadow: 0 0 50px 6px var(--glow); }
.co-orb__spark { position: absolute; inset: 26%; background: #fff; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: coTwinkle 4s var(--ease-io) infinite; }
.co-orb__moon { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-2);
  transform: rotate(var(--a)) translateX(45cqw) rotate(calc(-1 * var(--a))); transition: background-color .5s, color .5s, border-color .5s, box-shadow .5s, scale .5s var(--ease); }
.co-orb__moon .i { width: 22px; height: 22px; }
.co-orb__moon.is-on { background: var(--magenta); border-color: var(--magenta); color: var(--on-magenta); box-shadow: 0 0 0 6px var(--accent-soft), 0 0 30px var(--glow); scale: 1.2; }
.co-orb__now { position: absolute; left: 0; right: 0; bottom: -2.2rem; text-align: center; color: var(--ink-3); font-size: .9rem; }
.co-orb__now span { color: var(--ink); font-weight: 700; }
@media (max-width: 900px) {
  .co-cat__grid { grid-template-columns: 1fr; }
  .co-cat__aside { display: none; }
  .co-cat__item { min-height: 0; opacity: 1; padding: 2.4rem 0; }
}
@media (prefers-reduced-motion: reduce) { .co-cat__item { opacity: 1; } }
.co-wf-scene { margin: 0 0 1.6rem; padding: 0; height: 42vh; } .co-wf-scene .scene { width: 100%; height: 100%; }
/* WealthFarmer is green only: swap the accent tokens inside its half */
.co-two__side:has(.co-wf-scene) {
  --magenta: #1F8A4C; --accent: #2A9A57; --accent-soft: rgba(42, 154, 87, .14); --glow: rgba(42, 154, 87, .4);
}

/* home.css */
/* ==========================================================================
   Home — hero world, platform marquee, manifesto, pinned journey with
   motion graphics, orbit ecosystem, counters, company, magenta close.
   ========================================================================== */

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; padding: calc(var(--nav-h) + 3rem) 0 1.6rem; }
.hero .cosmos { z-index: -2; }
.hero__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 78%, transparent) 0%, transparent 62%), linear-gradient(180deg, transparent 60%, var(--bg) 100%); }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; align-items: end; }
.hero .display { max-width: 12ch; }
.hero__lede { margin-top: 1.8rem; max-width: 37rem; }
.hero__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: clamp(2.5rem, 6vh, 4rem); padding-top: 1.2rem; border-top: 1px solid var(--line); }
.hero__vows { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 2rem; }
.hero__vows li { display: inline-flex; align-items: center; gap: .5rem; font: 600 .74rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.hero__vows .i { color: var(--accent); width: 16px; height: 16px; }
.hero__live { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink-2); text-transform: uppercase; }
.hero__live i { width: 8px; height: 8px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 0 0 var(--glow); animation: live 2s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* the connected creator path: a pulse travels the line and lights each node */
.route { position: relative; display: grid; gap: .5rem; padding-left: 1.8rem; min-width: 250px; }
.route__line { position: absolute; left: 6px; top: 14px; bottom: 14px; width: 2px; background: var(--line-2); overflow: hidden; }
.route__pulse { position: absolute; left: 0; width: 100%; height: 30%; background: linear-gradient(transparent, var(--magenta), transparent); animation: routePulse 4s var(--ease-io) infinite; }
@keyframes routePulse { from { top: -30%; } to { top: 100%; } }
.route__node { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; align-items: baseline; padding: .7rem 1rem; border-radius: var(--r-sm); border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(10px); transition: border-color .3s, transform .5s var(--ease), background-color .3s; }
.route__node:hover { border-color: var(--magenta); transform: translateX(6px); }
.route__dot { position: absolute; left: -1.8rem; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-2); animation: routeDot 4s var(--ease-io) infinite; animation-delay: calc(var(--i) * 1s); }
@keyframes routeDot { 0%, 20% { background: var(--magenta); border-color: var(--magenta); box-shadow: 0 0 16px var(--glow); } 35%, 100% { background: var(--bg); border-color: var(--line-2); box-shadow: none; } }
.route__verb { font: 900 1.25rem/1 var(--font-display); text-transform: uppercase; letter-spacing: -.02em; }
.route__name { font: 600 .74rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 1000px) {
  .hero__inner { grid-template-columns: 1fr; }
  .route { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 0; min-width: 0; }
  .route__line, .route__dot { display: none; }
}
@media (max-width: 640px) {
  .hero__veil { background: linear-gradient(180deg, transparent 10%, color-mix(in srgb, var(--bg) 85%, transparent) 55%, var(--bg) 100%); }
  .hero__live { display: none; }
}

/* ---------- platform marquee band ---------- */
.band { padding-block: clamp(1.6rem, 3.5vw, 2.8rem); border-block: 1px solid var(--line); }

/* ---------- manifesto ---------- */
.manifesto__head { max-width: 16ch; margin-bottom: clamp(3rem, 7vw, 6rem); }
.manifesto__text { font: 800 clamp(1.6rem, 3.2vw, 2.9rem)/1.15 var(--font-display); letter-spacing: -.025em; max-width: 32ch; margin: 0 0 clamp(3rem, 7vw, 6rem) auto; text-wrap: pretty; }
.manifesto__text .mw { color: var(--ink-3); opacity: .35; transition: opacity .45s, color .45s; }
.manifesto__text .mw.is-lit { color: var(--ink); opacity: 1; }
.manifesto__text em { font-style: normal; }
.manifesto__text em .mw.is-lit { color: var(--magenta); }
.manifesto__text:not([data-ready]) { color: var(--ink); }
.manifesto__turn { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: end; padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 2px solid var(--ink); }
.builtfor { margin-top: clamp(4rem, 9vw, 7rem); }
.builtfor .row .d-sm { font-size: clamp(2rem, 5vw, 4.4rem); }
.builtfor .row__b strong { display: none; }
.builtfor__sig { margin: 2.4rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; }
.builtfor__sig blockquote { margin: 0; font-weight: 700; font-size: 1.1rem; }
.builtfor__sig figcaption { font: 600 .74rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 900px) { .manifesto__turn { grid-template-columns: 1fr; } }

/* ---------- journey: pinned horizontal story with motion graphics ---------- */
.journey { position: relative; background: var(--bg-2); border-block: 1px solid var(--line); }
.journey__pin { padding: clamp(5rem, 10vw, 8rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; }
.journey__head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.journey__head .d-md { max-width: 20ch; }
.journey__count { font-size: 1rem; color: var(--ink-3); white-space: nowrap; }
.journey__count span { color: var(--ink); font-weight: 700; }
.journey__track { display: flex; gap: clamp(1rem, 2vw, 1.4rem); padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2)); will-change: transform; }
.chapter { position: relative; flex: 0 0 min(460px, 84vw); display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: border-color .5s, transform .7s var(--ease); }
.chapter.is-active { border-color: var(--magenta); }
.chapter__art { aspect-ratio: 3 / 2; display: grid; place-items: center; background: var(--bg); border-bottom: 1px solid var(--line); color: var(--ink); padding: 1rem; }
.chapter__body { padding: clamp(1.3rem, 2.2vw, 1.8rem); display: grid; gap: .8rem; align-content: start; flex: 1; }
.chapter__tag { display: flex; gap: .7rem; align-items: center; color: var(--ink-3); text-transform: uppercase; }
.chapter__tag span { color: var(--on-magenta); background: var(--magenta); padding: .25rem .45rem; border-radius: 5px; font-weight: 700; }
.chapter .d-sm { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.chapter p:not(.chapter__tag) { color: var(--ink-2); font-size: .98rem; }
.chapter--pitch { background: var(--magenta); border-color: var(--magenta); color: var(--on-magenta); justify-content: flex-end; }
.chapter--pitch .chapter__body { flex: 0; }
.chapter--pitch p:not(.chapter__tag), .chapter--pitch .chapter__tag { color: rgba(255,255,255,.9); }
.chapter--pitch .chapter__tag span { background: #0A0A0B; }
.chapter--pitch .btn--ghost { justify-self: start; margin-top: .6rem; background: #0A0A0B; color: #fff; border-color: #0A0A0B; }
.journey__progress { margin-top: 2rem; }
.journey__progress::before { content: ''; display: block; height: 2px; background: var(--line); }
.journey__progress span { display: block; height: 2px; margin-top: -2px; width: 100%; background: var(--magenta); transform: scaleX(var(--p, 0)); transform-origin: left; box-shadow: 0 0 12px var(--glow); }
.journey.is-pinned .journey__pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--nav-h) + .5rem) 1.5rem; }
.journey.is-pinned .chapter__art { aspect-ratio: auto; height: min(26vh, 220px); }
.journey:not(.is-pinned) .journey__track { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: none; }
.journey:not(.is-pinned) .chapter { scroll-snap-align: center; }

/* motion graphics */
.mg { width: 100%; max-width: 280px; height: auto; max-height: 100%; overflow: visible; }
.mg * { vector-effect: non-scaling-stroke; }
.mg-line { fill: none; stroke: currentColor; stroke-width: 2; opacity: .55; }
.mg-ink { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.mg-a { fill: none; stroke: var(--magenta); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mg-a-fill { fill: var(--magenta); stroke: none; }
.mg-ink-fill { fill: currentColor; opacity: .85; }
.mg-white { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.mg-bg { fill: var(--surface); }
.chapter:not(.is-active) .mg * { animation-play-state: paused !important; }
/* 1 notebook: lines write themselves, the pen bobs */
.mg-write { stroke-dasharray: 120; stroke-dashoffset: 120; animation: write 3.2s var(--ease) infinite; animation-delay: calc(var(--i) * .35s); }
@keyframes write { 0% { stroke-dashoffset: 120; } 40%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.mg-pen { animation: pen 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pen { 50% { transform: translate(-6px, 6px) rotate(-6deg); } }
/* 2 book: the right page turns */
.mg-page { transform-box: view-box; transform-origin: 120px 87px; animation: turn 3s var(--ease-io) infinite; opacity: .9; }
@keyframes turn { 0%, 15% { transform: scaleX(1); } 55%, 70% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
/* 3 audience: bars breathe, the trend line draws */
.mg-bar { transform-box: fill-box; transform-origin: bottom; animation: bar 2.4s var(--ease-io) infinite alternate; animation-delay: calc(var(--i) * .15s); }
@keyframes bar { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.mg-trace { stroke-dasharray: 260; stroke-dashoffset: 260; animation: trace 2.8s var(--ease) infinite; }
@keyframes trace { 60%, 100% { stroke-dashoffset: 0; } }
/* 4 panels: frames pop into a page */
.mg-pop { transform-box: fill-box; transform-origin: center; animation: pop2 3.2s var(--ease) infinite; animation-delay: calc(var(--i) * .2s); }
@keyframes pop2 { 0% { transform: scale(.6); opacity: 0; } 20%, 80% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
/* 5 frames: variations shuffle */
.mg-frame { animation: shuffle 3s var(--ease-io) infinite; animation-delay: calc(var(--i) * -1s); }
@keyframes shuffle { 0%, 25% { transform: translate(0, 0); } 50% { transform: translate(-18px, -14px); } 75% { transform: translate(18px, 14px); } 100% { transform: translate(0, 0); } }
.mg-spark { transform-box: fill-box; transform-origin: center; animation: spin2 3s linear infinite; }
@keyframes spin2 { to { transform: rotate(360deg); } }
/* 6 film: the strip rolls */
.mg-roll { animation: roll 3.5s linear infinite; }
@keyframes roll { to { transform: translateX(70px); } }
/* 7 seal: ring draws, check lands */
.mg-ring { stroke-dasharray: 360; stroke-dashoffset: 360; animation: trace 2.6s var(--ease) infinite; }
.mg-check { stroke-dasharray: 60; stroke-dashoffset: 60; animation: check 2.6s var(--ease) infinite; }
@keyframes check { 40% { stroke-dashoffset: 60; } 70%, 100% { stroke-dashoffset: 0; } }

/* ---------- ecosystem orbit ---------- */
.eco__stage { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.orbit { --size: min(640px, 100%); position: relative; width: var(--size); aspect-ratio: 1; margin-inline: auto; }
.orbit__sun { position: absolute; left: 50%; top: 50%; width: 20%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; z-index: 2;
  background: radial-gradient(circle at 38% 32%, #FF9ACB, var(--magenta) 50%, #8A0047 100%); box-shadow: 0 0 60px 8px var(--glow), 0 0 160px 50px color-mix(in srgb, var(--glow) 35%, transparent); }
.orbit__spark { position: absolute; inset: 28%; background: #fff; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: breathe 4s var(--ease-io) infinite; }
@keyframes breathe { 50% { transform: scale(.8) rotate(45deg); } }
.orbit__ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid var(--line-2); transform: translate(-50%, -50%); animation: spin var(--dur) linear infinite; }
.orbit__ring--1 { width: 48%; height: 48%; --dur: 60s; }
.orbit__ring--2 { width: 74%; height: 74%; --dur: 95s; animation-direction: reverse; }
.orbit__ring--3 { width: 100%; height: 100%; --dur: 130s; }
@keyframes spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes counter { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
.orbit:hover .orbit__ring, .orbit:focus-within .orbit__ring, .orbit:hover .planet__inner, .orbit:focus-within .planet__inner { animation-play-state: paused; }
.arm { position: absolute; inset: 0; transform: rotate(var(--a)); pointer-events: none; }
.planet { position: absolute; left: 100%; top: 50%; transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))); pointer-events: auto; border-radius: 50%; }
.planet__inner { display: grid; justify-items: center; gap: .45rem; animation: counter var(--dur) linear infinite; }
.orbit__ring--2 .planet__inner { animation-direction: reverse; }
.planet__body { width: clamp(42px, 6vw, 56px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-2); transition: transform .5s var(--ease), background-color .3s, color .3s, border-color .3s, box-shadow .4s; }
.planet__body .i { width: 22px; height: 22px; }
.planet__name { padding: .22rem .5rem; border-radius: 6px; font: 700 .72rem/1 var(--font-body); white-space: nowrap; color: var(--ink-2); background: color-mix(in srgb, var(--bg) 80%, transparent); }
.planet:hover .planet__body, .planet:focus-visible .planet__body { transform: scale(1.12); border-color: var(--magenta); }
.planet.is-active .planet__body { background: var(--magenta); color: var(--on-magenta); border-color: var(--magenta); transform: scale(1.2); box-shadow: 0 0 0 6px var(--accent-soft), 0 0 36px var(--glow); }
.planet.is-active .planet__name { color: var(--ink); }
.worlds { position: relative; min-height: 360px; }
.world { position: absolute; inset: 0 0 auto; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity .45s var(--ease), transform .7s var(--ease), visibility .45s; }
.world.is-active { position: relative; opacity: 1; visibility: visible; transform: none; }
.world__verb { color: var(--accent); text-transform: uppercase; letter-spacing: .14em; margin-bottom: 1rem; font-weight: 700; }
.world .d-md { margin-bottom: 1.2rem; }
.world p { color: var(--ink-2); font-size: 1.1rem; max-width: 30rem; }
.no-js .world { position: relative; opacity: 1; visibility: visible; transform: none; margin-bottom: 2.5rem; }
.tiers { margin-top: clamp(5rem, 10vw, 8rem); }
.tier__links { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin-top: .8rem; position: relative; z-index: 2; }
.tier__links a { display: inline-flex; align-items: center; gap: .3rem; font: 600 .78rem/1.4 var(--font-mono); color: var(--ink-3); transition: color .2s; }
.tier__links a:hover { color: var(--accent); }
.tier__links .i { width: 12px; height: 12px; }
@media (max-width: 980px) { .eco__stage { grid-template-columns: 1fr; } .orbit { --size: min(540px, 100%); } }
@media (max-width: 520px) { .planet__name { display: none; } .planet.is-active .planet__name { display: block; } }
@media (prefers-reduced-motion: reduce) { .orbit__ring, .planet__inner { animation: none; } }

/* ---------- trust ---------- */
.trust__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 2px solid var(--ink); margin-bottom: clamp(2rem, 4vw, 3rem); }
.trust__stat { padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem) 0; }
.trust__stat + .trust__stat { border-left: 1px solid var(--line-2); padding-left: clamp(1rem, 3vw, 2.5rem); }
.trust__stat > p { color: var(--ink-2); max-width: 30rem; margin-top: 1rem; }
.trust__stat .stat__n em { font-size: .35em; letter-spacing: -.02em; margin-left: .1em; }
@media (max-width: 760px) { .trust__stats { grid-template-columns: 1fr; } .trust__stat + .trust__stat { border-left: 0; border-top: 1px solid var(--line-2); padding-left: 0; } }
/* pinned journey must fit one screen: compact heading and art */
.journey.is-pinned .journey__head .d-md { font-size: clamp(1.8rem, 3.3vw, 3.1rem); max-width: 26ch; }
.journey.is-pinned .journey__head .eyebrow { margin-bottom: .9rem; }
@media (max-height: 820px) { .journey.is-pinned .chapter__art { height: min(20vh, 170px); } .journey.is-pinned .chapter__body { gap: .55rem; } }
.chapter__art { overflow: hidden; } .journey.is-pinned .chapter__art .mg { height: 100%; width: auto; }
/* keep the orbit's rotating arms and edge planets inside small screens */
.eco { overflow-x: clip; }
@media (max-width: 600px) { .orbit { --size: 86%; } }

/* living scene for the selected world */
.world__scene { width: min(100%, 300px); aspect-ratio: 1; margin-bottom: 1.2rem; padding: .6rem; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line); }
.world .d-md { font-size: clamp(2rem, 3.6vw, 3.2rem); }
@media (max-width: 980px) { .world__scene { width: min(100%, 260px); } }

/* trust: one big number beside its promise */
.trust__stats { grid-template-columns: 1fr; }
.trust__stat { display: grid; grid-template-columns: auto 1fr; gap: 1rem clamp(2rem, 5vw, 4rem); align-items: end; padding-right: 0; }
.trust__stat > p { margin: 0 0 .6rem; font-size: 1.1rem; }
@media (max-width: 700px) { .trust__stat { grid-template-columns: 1fr; } }

/* parent company: rows beside WealthFarmer's growing field */
.parent__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.parent__wf { margin: 0; }
@media (max-width: 900px) { .parent__grid { grid-template-columns: 1fr; } }
.world__scene { width: min(100%, 340px); }
.trust__stat { align-items: center; }

/* WealthFarmer is green only: swap the accent tokens inside its blocks */
.parent .rows .row:nth-child(2) {
  --magenta: #1F8A4C; --accent: #2A9A57; --accent-soft: rgba(42, 154, 87, .14); --glow: rgba(42, 154, 87, .4);
}
/* rows in the narrower company column stack their text under the title */
.parent__grid .row { grid-template-columns: 2.6rem minmax(0, 1fr) auto; }
.parent__grid .row__b { grid-column: 2 / -1; }
.parent__grid .row__go { grid-column: 3; grid-row: 1; }


/* ==========================================================================
   Story: the creator journey, chapter by chapter; the motion graphic stays
   beside the text and plays with the scroll
   ========================================================================== */
.story { padding-top: clamp(5rem, 10vw, 9rem); border-top: 1px solid var(--line); }
.story__intro { margin-bottom: clamp(2rem, 5vw, 4rem); }
.story__intro .d-lg { max-width: 17ch; }
.story__intro .lede { margin-top: 1.5rem; }
.story__body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); }
.story__stage { position: sticky; top: 0; height: 100vh; isolation: isolate; }
.story__light { position: absolute; inset: 10% 0; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent); }
.story__scene { position: absolute; inset: calc(var(--nav-h) + 2vh) 0 6vh 2.4rem; display: grid; place-items: center; opacity: 0; transform: translateY(40px) scale(.95); transition: opacity .6s var(--ease), transform 1s var(--ease); will-change: transform; }
.story__scene.is-active { opacity: 1; transform: none; }
.story__scene { overflow: hidden; }
.story__scene .scene { height: 100%; width: auto; max-width: 100%; }
.story__rail { position: absolute; left: 0; top: calc(var(--nav-h) + 2vh); bottom: 6vh; width: 2px; background: var(--line); }
.story__rail span { position: absolute; inset: 0; background: var(--magenta); transform: scaleY(var(--p, 0)); transform-origin: top; box-shadow: 0 0 12px var(--glow); }
.story__chapters { padding: 22vh 0 26vh; }
.story__ch { min-height: 88vh; display: flex; flex-direction: column; justify-content: center; opacity: .22; transition: opacity .6s var(--ease); }
.story__ch.is-active { opacity: 1; }
.story__n { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.2rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .12em; }
.story__n span { background: var(--magenta); color: var(--on-magenta); padding: .28rem .5rem; border-radius: 6px; font-weight: 700; letter-spacing: .04em; }
.story__ch .d-md { margin-bottom: 1.2rem; }
.story__ch .lede { color: var(--ink); }
.story__more { color: var(--ink-2); margin-top: 1.1rem; max-width: 34rem; }
.story__links { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: 1.6rem; }
.link--quiet { color: var(--ink-3); font-weight: 600; font-size: .92rem; }
.story__pitch { min-height: 70vh; }
.story .tiers { margin-top: 0; padding-bottom: clamp(5rem, 10vw, 8rem); }
@media (max-width: 900px) {
  .story__body { grid-template-columns: 1fr; gap: 0; }
  .story__stage { top: 0; height: calc(40vh + var(--nav-h)); z-index: 2; background: var(--bg); border-bottom: 1px solid var(--line); }
  .story__scene { inset: calc(var(--nav-h) + .6rem) 0 .8rem 1rem; }
  .story__rail { top: calc(var(--nav-h) + .6rem); bottom: .8rem; }
  .story__chapters { padding: 6vh 0 10vh; }
  .story__ch { min-height: 70vh; }
}
@media (prefers-reduced-motion: reduce) { .story__ch { opacity: 1; } .story__scene { transition: none; } }

/* spark portal between chapters: the old world collapses into the spark,
   the spark flashes, the next world opens out of it */
.story__scene { clip-path: circle(0% at 50% 50%); transition: clip-path .7s cubic-bezier(.76, 0, .24, 1), opacity .4s, transform .9s var(--ease); }
.story__scene.is-active { clip-path: circle(75% at 50% 50%); transition-delay: .25s; }
.story__portal { position: absolute; left: calc(50% + 1.2rem); top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; z-index: 3; pointer-events: none; opacity: 0;
  background: var(--magenta); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); filter: drop-shadow(0 0 18px var(--glow)); }
.story__stage.is-portal .story__portal { animation: portal .95s cubic-bezier(.76, 0, .24, 1); }
@keyframes portal { 0% { opacity: 0; transform: scale(.2) rotate(0deg); } 35% { opacity: 1; transform: scale(1.6) rotate(90deg); } 60% { opacity: 1; transform: scale(1) rotate(180deg); } 100% { opacity: 0; transform: scale(5) rotate(270deg); } }
.story__dreamer { position: absolute; left: 1.6rem; bottom: 3vh; width: clamp(150px, 14vw, 220px); z-index: 4; filter: drop-shadow(0 0 1px rgba(255,255,255,.35)) drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); }
@media (max-width: 900px) { .story__dreamer { width: 100px; left: auto; right: .4rem; bottom: .4rem; } .story__portal { left: 50%; } }
@media (prefers-reduced-motion: reduce) { .story__scene { clip-path: none; } }

/* ---------- first-visit intro ---------- */
.intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #0A0A0B; color: #F5F5F7; cursor: pointer; clip-path: inset(0 0 0 0); transition: clip-path .85s cubic-bezier(.76, 0, .24, 1); }
.intro.is-out { clip-path: inset(0 0 100% 0); }
.intro__inner { display: grid; justify-items: center; gap: 1.4rem; }
.intro__mark { width: clamp(90px, 12vw, 140px); overflow: visible; }
.intro__peak { stroke: #FF1E8C; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: intro-draw .9s cubic-bezier(.65, 0, .35, 1) .45s forwards; }
.intro__peak--2 { opacity: .5; animation-delay: .7s; }
.intro__spark { fill: #FF1E8C; transform-box: fill-box; transform-origin: center; transform: translateY(-80px) scale(0); animation: intro-spark .7s cubic-bezier(.2, 1.4, .4, 1) forwards; filter: drop-shadow(0 0 14px rgba(255, 30, 140, .7)); }
.intro__word { margin: 0; display: flex; font: 900 clamp(2rem, 6vw, 4rem)/1 var(--font-display); letter-spacing: -.03em; overflow: hidden; }
.intro__word span { display: inline-block; transform: translateY(110%); animation: intro-rise .7s cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: calc(1.1s + var(--i) * 55ms); }
@keyframes intro-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-spark { to { transform: translateY(0) scale(1) rotate(180deg); } }
@keyframes intro-rise { to { transform: none; } }
.is-intro .hero__inner, .is-intro .hero__foot { visibility: hidden; }

/* ==========================================================================
   WealthFarmer: its own full-screen world at the end of the page. Green only.
   The stage is sticky; it grows from a card to the full screen (--x) as the
   section arrives, and the chapters scroll over its left side.
   ========================================================================== */
.wfx { position: relative; margin-top: clamp(3rem, 8vw, 6rem);
  --magenta: #1F8A4C; --accent: #2A9A57; --accent-soft: rgba(42, 154, 87, .14); --glow: rgba(42, 154, 87, .4); --on-magenta: #fff; --wf-ink: #14663A; }
:root[data-theme='dark'] .wfx { --wf-ink: #6FD08F; --magenta: #2A9A57; }
.wfx__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate;
  background: color-mix(in srgb, #2A9A57 10%, var(--bg));
  clip-path: inset(calc((1 - var(--x, 1)) * 10vh) calc((1 - var(--x, 1)) * 7vw) round calc((1 - var(--x, 1)) * 40px)); }
.wfx__field { position: absolute; inset: 0; }
.wfx__field .scene { width: 100%; height: 100%; display: block; }
.wfx__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: color-mix(in srgb, #2A9A57 25%, transparent); z-index: 3; }
.wfx__bar span { position: absolute; inset: 0; background: #2A9A57; transform: scaleX(var(--p, 0)); transform-origin: left; box-shadow: 0 0 14px var(--glow); }
.wfx__chapters { position: relative; z-index: 2; margin-top: -100vh; padding-block: 40vh 45vh; pointer-events: none; }
.wfx__ch { pointer-events: auto; max-width: 34rem; margin-bottom: 60vh; padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: 24px;
  background: color-mix(in srgb, var(--bg) 86%, transparent); border: 1px solid color-mix(in srgb, #2A9A57 30%, var(--line));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35);
  opacity: .35; transform: translateY(24px) scale(.98); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.wfx__ch:last-child { margin-bottom: 0; }
.wfx__ch.is-active { opacity: 1; transform: none; }
.wfx__ch--open { max-width: 40rem; }
.wfx__ch .lede { color: var(--ink); }
.wfx__ch .d-md { margin-bottom: 1.1rem; font-size: clamp(2rem, 4.2vw, 3.6rem); }
.wfx__ch .eyebrow { margin-bottom: 1.2rem; }
.wfx__ch em { color: var(--wf-ink); }
.wfx__n { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.2rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .12em; }
.wfx__n span { background: #2A9A57; color: #fff; padding: .28rem .5rem; border-radius: 6px; font-weight: 700; letter-spacing: .04em; }
.wfx__links { margin-top: 1.6rem; }
.wfx .link { color: var(--wf-ink); }
@media (max-width: 900px) {
  .wfx__chapters { padding-block: 18vh 40vh; }
  .wfx__ch { margin-bottom: 70vh; }
}
@media (prefers-reduced-motion: reduce) { .wfx__ch { opacity: 1; transform: none; } .wfx__stage { clip-path: none; } }

/* WealthFarmer explainer diagrams (src/lib/wfpanels.mjs): one per chapter,
   in a frosted card in the open sky; parts animate in while active. */
.wfx__panels { position: absolute; top: calc(var(--nav-h) + 3vh); right: clamp(1rem, 5vw, 5rem); width: min(44vw, 540px); aspect-ratio: 400 / 260; z-index: 1;
  border-radius: 24px; background: color-mix(in srgb, var(--bg) 82%, transparent); border: 1px solid color-mix(in srgb, #2A9A57 30%, var(--line));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35);
  --wp-1: #0B3D24; --wp-2: #14663A; --wp-3: #2A9A57; --wp-4: #6FD08F; --wp-5: #DDF5E4; --wp-ink: var(--ink); }
:root[data-theme='dark'] .wfx__panels { --wp-5: #143A26; --wp-2: #6FD08F; }
.wfx__panel { position: absolute; inset: 0; padding: 4%; opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .5s var(--ease), transform .7s var(--ease); }
.wfx__panel.is-active { opacity: 1; transform: none; }
.wp { width: 100%; height: 100%; display: block; overflow: visible; }
.wp text { font-family: var(--font-body, system-ui), sans-serif; fill: var(--wp-ink); stroke: none; }
.wp-title { font-size: 18px; font-weight: 800; }
.wp-label { font-size: 14px; font-weight: 700; }
.wp-tick { font-size: 12px; font-weight: 600; fill: var(--ink-2) !important; }
.wp-big { font: 900 34px/1 'Inter Tight', sans-serif; fill: var(--wp-3) !important; }
.wp-big--sm { font-size: 24px; }
.wp-zero { font: 900 120px/1 'Inter Tight', sans-serif; fill: var(--wp-3) !important; letter-spacing: -.04em; }
.wp-chip rect { fill: var(--wp-5); stroke: var(--wp-3); stroke-width: 1.5; }
.wp-chip text { font-size: 13px; font-weight: 700; fill: var(--wp-2); }
.wp-chip--solid rect { fill: var(--wp-3); stroke: none; }
.wp-chip--solid text { fill: #fff; }
.wp-chip--warn rect { fill: transparent; stroke-dasharray: 4 4; }
.wp-node circle { fill: var(--wp-5); stroke: var(--wp-3); stroke-width: 2.5; }
.wp-node--dash circle { fill: transparent; stroke-dasharray: 6 6; stroke: var(--ink-3); }
.wp-glyph { stroke: var(--wp-2); stroke-width: 2.5; }
.wp-glyph--fill { fill: var(--wp-5); stroke: var(--wp-3); stroke-width: 2.5; }
.wp-stem { stroke: var(--wp-3); stroke-width: 3; }
.wp-leaf { fill: var(--wp-3); }
.wp-link { stroke: var(--wp-3); stroke-width: 3; }
.wp-link--dash { stroke: var(--ink-3); stroke-dasharray: 6 6; }
.wp-dot { fill: var(--wp-4); }
.wp-coin { fill: var(--wp-4); stroke: var(--wp-2); stroke-width: 1.5; }
.wp-bubble { fill: var(--wp-5); stroke: var(--wp-3); stroke-width: 2; }
.wp-axis, .wp-rule { stroke: var(--line); stroke-width: 1.5; }
.wp-area { fill: var(--wp-3); opacity: .14; }
.wp-line { stroke: var(--wp-3); stroke-width: 3.5; }
.wp-pt { fill: var(--bg); stroke: var(--wp-3); stroke-width: 3; }
.wp-pt--hi { fill: var(--wp-3); }
.wp-pulse { fill: var(--wp-4); transform-box: fill-box; transform-origin: center; }
.wp-ring { stroke: var(--wp-3); stroke-width: 1.5; stroke-dasharray: 5 6; }
.wp-sweep path { fill: var(--wp-4); opacity: .18; }
.wp-sweep { transform-origin: 200px 132px; }
.wp-me { fill: var(--wp-5); stroke: var(--wp-3); stroke-width: 2; }
.wp-pin { fill: var(--wp-3); stroke: var(--bg); stroke-width: 1.5; }
.wp-pin--best { fill: var(--wp-1); stroke: var(--wp-4); stroke-width: 2.5; }
:root[data-theme='dark'] .wp-pin--best { fill: var(--wp-4); stroke: #fff; }
.wp-card { fill: color-mix(in srgb, var(--bg) 70%, transparent); stroke: var(--line); stroke-width: 1.5; }
.wp-bar { fill: var(--wp-5); }
.wp-bar--hi { fill: var(--wp-3); }
.wp-ledger .wp-bar, .wp--ledger .wp-bar { fill: var(--wp-4); }
.wp--ledger .wp-bar--hi { fill: var(--wp-3); }
.wp-node-x { fill: transparent; stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 5 5; }
.wp-x { stroke: var(--wp-3); stroke-width: 4; }
.wp-smoke { fill: var(--wp-5); stroke: var(--wp-3); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.wp-globe { fill: var(--wp-5); stroke: var(--wp-3); stroke-width: 2; }
.wp-meridian { stroke: var(--wp-3); stroke-width: 1.2; opacity: .5; }
.wp-brace { stroke: var(--wp-3); stroke-width: 2; }
.wp-orbit { stroke: var(--wp-3); stroke-width: 2; stroke-dasharray: 3 10; transform-box: fill-box; transform-origin: center; }
.wp-disc { fill: var(--wp-5); }
.wp-type { font-size: 15px; font-weight: 600; fill: var(--ink-2) !important; }
.wp-in, .wp-pop, .wp-grow, .wp-fill { transform-box: fill-box; }

/* while active */
.wfx__panel.is-active .wp-in { animation: wp-in .7s var(--ease) both; animation-delay: calc(var(--d) * 1s); }
.wfx__panel.is-active .wp-pop { animation-name: wp-pop; transform-origin: center bottom; }
.wfx__panel.is-active .wp-slide { animation-name: wp-slide; }
.wfx__panel.is-active .wp-grow { animation-name: wp-grow; transform-origin: center bottom; }
.wfx__panel.is-active .wp-fill { animation-name: wp-fill; transform-origin: left center; }
.wfx__panel.is-active .wp-draw { stroke-dasharray: 1; animation: wp-draw 1.2s var(--ease) both; }
.wfx__panel.is-active .wp-dot { animation: wp-flow 2.4s linear infinite; animation-delay: calc(var(--i) * -.6s); }
.wfx__panel.is-active .wp-coin { animation: wp-coin 1.8s ease-in infinite; animation-delay: calc(var(--i) * .5s); }
.wfx__panel.is-active .wp-pulse { animation: wp-pulse 1.6s ease-out infinite; }
.wfx__panel.is-active .wp-sweep { animation: wp-spin 3.2s linear infinite; }
.wfx__panel.is-active .wp-orbit { animation: wp-spin 14s linear infinite; }
.wfx__panel.is-active .wp-smoke { animation: wp-smoke 2.4s ease-out infinite; animation-delay: calc(var(--i) * .8s); }
.wfx__panel.is-active .wp-float { animation: wp-floaty 3s ease-in-out infinite alternate; animation-delay: calc(var(--i) * .4s); }
.wfx__panel.is-active .wp-type { clip-path: inset(0 100% 0 0); animation: wp-type 1.4s steps(18) .2s both; }
@keyframes wp-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes wp-pop { from { opacity: 0; transform: translateY(-18px) scale(.4); } 70% { transform: scale(1.12); } }
@keyframes wp-slide { from { opacity: 0; transform: translateX(40px); } }
@keyframes wp-grow { from { opacity: 0; transform: scale(.2); } }
@keyframes wp-fill { from { transform: scaleX(0); } }
@keyframes wp-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes wp-flow { from { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateX(var(--dx)); opacity: 0; } }
@keyframes wp-coin { from { transform: translateY(0); opacity: 1; } to { transform: translateY(44px); opacity: 0; } }
@keyframes wp-pulse { from { transform: scale(1); opacity: .8; } to { transform: scale(3); opacity: 0; } }
@keyframes wp-spin { to { transform: rotate(360deg); } }
@keyframes wp-smoke { from { transform: translateY(0) scale(.6); opacity: .9; } to { transform: translateY(-26px) scale(1.4); opacity: 0; } }
@keyframes wp-floaty { to { transform: translateY(-8px); } }
@keyframes wp-type { to { clip-path: inset(0 0 0 0); } }
@media (max-width: 900px) {
  .wfx__panels { width: auto; left: 1rem; right: 1rem; top: calc(var(--nav-h) + 1vh); }
  /* cards stop just under the diagram and stack there, so it is never covered */
  .wfx__chapters { padding-top: 60vh; }
  .wfx__ch { position: sticky; top: calc(var(--nav-h) + 1vh + (100vw - 2rem) * .65 + 12px); margin-bottom: 55vh; background: color-mix(in srgb, var(--bg) 97%, transparent); }
  .wfx__ch.is-past { opacity: 0; }
  .wfx__ch:last-child { margin-bottom: 35vh; }
  .wfx__ch--open .d-lg { font-size: clamp(1.8rem, 8.4vw, 3rem); }
}
@media (prefers-reduced-motion: reduce) { .wfx__panel *, .wfx__panel.is-active * { animation: none !important; clip-path: none !important; } }

/* The cast: farmer, and the trader who comes for the sale, standing so their
   hands meet for the handshake and the payment; the bagged crop beside them
   and the trader's lorry that collects it. Driven by data-k / data-tpose. */
.wfx__stage { --cw: clamp(150px, 15vw, 240px); --cr: clamp(1rem, 6vw, 6rem); --lw: calc(var(--cw) * 1.2); --sw: calc(var(--cw) * .5); }
.wfx__cast { position: absolute; right: var(--cr); bottom: 4vh; width: calc(var(--cw) * 1.65); height: calc(var(--cw) * 1.25); z-index: 3;
  transform: translateY(calc((1 - var(--x, 1)) * 30%)); }
.wfx__farmer, .wfx__trader { position: absolute; bottom: 0; width: var(--cw); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .28)); }
.wfx__farmer { left: 0; z-index: 2; }
.wfx__trader { left: calc(var(--cw) * .65); opacity: 0; transform: translateX(40%); transition: opacity .6s var(--ease), transform .9s var(--ease); }
.wfx__stage:not([data-tpose='none']) .wfx__trader { opacity: 1; transform: none; }
.wfx__sacks { position: absolute; right: 100%; bottom: calc(var(--cw) * .04); width: var(--sw); margin-right: 4px; opacity: 0; transition: opacity .4s; }
.wfx__sacksvg { width: 100%; height: auto; display: block; overflow: visible; }
.wl-sack { fill: #BFE3C9; stroke: #16161B; stroke-width: 2.4; }
.wl-tie { stroke: #14663A; stroke-width: 3; }
.wl-leaf { fill: #2A9A57; }
.wfx__sack { transform-box: fill-box; transform-origin: center bottom; }
.wfx__stage:is([data-k='harvest'], [data-k='list'], [data-k='radius'], [data-k='offers'], [data-k='confirm'], [data-k='lorry']) .wfx__sacks { opacity: 1; }
.wfx__stage[data-k='harvest'] .wfx__sack { animation: wfx-sackpop .7s cubic-bezier(.3, 1.6, .5, 1) backwards; animation-delay: calc(.8s + var(--i) * .45s); }
.wfx__lorry { position: absolute; z-index: 2; bottom: calc(4vh + var(--cw) * .03); width: var(--lw);
  right: calc(var(--cr) + var(--cw) * 1.65 + var(--sw) + 10px); transform: translateX(-120vw); }
.wfx__lorrysvg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .25)); }
.wl-bed { fill: #2A9A57; stroke: #16161B; stroke-width: 3; }
.wl-slat { stroke: #14663A; stroke-width: 3; }
.wl-cab { fill: #14663A; stroke: #16161B; stroke-width: 3; }
.wl-window { fill: #CFF5DA; stroke: #16161B; stroke-width: 2; }
.wl-bump { fill: #0B3D24; }
.wl-wheel circle { fill: #26262E; stroke: #16161B; stroke-width: 3; }
.wl-wheel path { stroke: #9A9AA6; stroke-width: 3; }
.wl-wheel { transform-box: fill-box; transform-origin: center; }
.wl-cargo { opacity: 0; }
.wfx__stage[data-k='lorry'] .wfx__lorry { animation: wfx-lorry 6.5s forwards; }
.wfx__stage[data-k='lorry'] .wl-wheel { animation: wfx-wheels 6.5s linear forwards; }
.wfx__stage[data-k='lorry'] .wfx__sack { animation: wfx-load 6.5s forwards; animation-delay: calc(var(--i) * .35s); }
.wfx__stage[data-k='lorry'] .wl-cargo { animation: wfx-cargo 6.5s forwards; animation-delay: calc(var(--i) * .35s); }
@keyframes wfx-sackpop { from { transform: translateY(-40%) scale(.2); opacity: 0; } }
@keyframes wfx-lorry {
  0% { transform: translateX(-120vw); animation-timing-function: cubic-bezier(.15, .7, .3, 1); }
  30%, 66% { transform: translateX(0); animation-timing-function: cubic-bezier(.6, 0, .9, .6); }
  100% { transform: translateX(130vw); } }
@keyframes wfx-wheels { 0% { transform: rotate(0); } 30%, 66% { transform: rotate(900deg); } 100% { transform: rotate(2400deg); } }
@keyframes wfx-load {
  0%, 34% { transform: none; opacity: 1; }
  42% { transform: translate(calc(-.5 * (var(--sw) / 2 + 10px + var(--lw) * .66)), -60%); opacity: 1; }
  48% { transform: translate(calc(-1 * (var(--sw) / 2 + 10px + var(--lw) * .66)), -20%); opacity: 1; }
  50%, 100% { transform: translate(calc(-1 * (var(--sw) / 2 + 10px + var(--lw) * .66)), -20%); opacity: 0; } }
@keyframes wfx-cargo { 0%, 48% { opacity: 0; } 50%, 100% { opacity: 1; } }

/* story diagrams */
.wp-sack { fill: var(--wp-5); stroke: var(--wp-3); stroke-width: 2; }
.wp-tie { stroke: var(--wp-2); stroke-width: 2; }
.wp-phone { fill: #26262E; stroke: var(--line); stroke-width: 2; }
.wp-screen { fill: var(--bg); }
.wp-row { fill: transparent; stroke: var(--line); stroke-width: 1.5; }
.wp-row--best { fill: var(--wp-5); stroke: var(--wp-3); stroke-width: 2.5; }
.wp-ok { fill: var(--wp-3); }
.wp-tick-m { stroke: #fff; stroke-width: 6; }
.wp-road { stroke: var(--line); stroke-width: 16; }
.wp-road-c { stroke: var(--wp-4); stroke-width: 2; stroke-dasharray: 8 8; }
.wp-truck { offset-path: path('M50 200 C120 200 120 80 200 110 S300 60 350 70'); offset-rotate: auto; offset-distance: 0%; }
.wp-truck rect { fill: var(--wp-3); stroke: var(--line); stroke-width: 1.5; }
.wp-truck circle { fill: var(--ink); }
.wp-val { fill: var(--wp-2) !important; font-weight: 800; }
.wp-stamp { transform-box: fill-box; transform-origin: center; transform: rotate(-12deg); }
.wp-stamp rect { fill: color-mix(in srgb, var(--wp-3) 10%, transparent); stroke: var(--wp-3); stroke-width: 4; }
.wp-stamp text { font: 900 28px/1 'Inter Tight', sans-serif; fill: var(--wp-3) !important; letter-spacing: .08em; }
.wfx__panel.is-active .wp-truck { animation: wp-drive 2.2s cubic-bezier(.5, 0, .3, 1) .3s both; }
.wfx__panel.is-active .wp-stampin { animation-name: wp-stampin; animation-duration: .5s; }
.wfx__panel.is-active .wp-press rect { animation: wp-press 1.8s ease-in-out 1.6s infinite; transform-box: fill-box; transform-origin: center; }
.wfx__panel.is-active .wp-blink { animation-name: wp-in, wp-blink; animation-duration: .7s, 1.4s; animation-iteration-count: 1, infinite; animation-delay: 1.4s, 2.1s; }
@keyframes wp-drive { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes wp-stampin { from { opacity: 0; transform: scale(2.4); } 70% { opacity: 1; transform: scale(.92); } }
@keyframes wp-press { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(.9); } }
@keyframes wp-blink { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .wfx__stage * { animation: none !important; } .wfx__stage[data-k='lorry'] .wfx__lorry { transform: none; } .wfx__stage[data-k='lorry'] .wfx__sacks { opacity: 0; } .wfx__stage[data-k='lorry'] .wl-cargo { opacity: 1; } }
@media (max-width: 900px) {
  .wfx__stage { --cw: 112px; --cr: .4rem; --lw: calc(var(--cw) * 1.05); --sw: calc(var(--cw) * .4); }
  .wfx__cast { bottom: 1vh; }
  .wfx__lorry { bottom: calc(1vh + var(--cw) * .03); }
}

/* The second half of the chain: the vendor at the market stall, the consumer
   who compares prices, rides over on a bike and buys. Plus the live caption
   naming what is happening on stage. */
.wfx__vendor, .wfx__consumer { position: absolute; bottom: 0; width: var(--cw); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .28)); opacity: 0; transition: opacity .6s var(--ease), transform .9s var(--ease); }
.wfx__vendor { left: 0; z-index: 2; transform: translateY(12%); }
.wfx__consumer { left: calc(var(--cw) * .65); transform: translateX(40%); }
.wfx__stall { position: absolute; left: calc(var(--cw) * -.32); bottom: calc(var(--cw) * .1); width: calc(var(--cw) * 1.35); z-index: 0; opacity: 0; transform: translateY(10%); transition: opacity .6s var(--ease), transform .9s var(--ease); }
.wfx__stallsvg { width: 100%; height: auto; display: block; }
.wfx__farmer { transition: opacity .5s var(--ease); }
.wfx__stage:is([data-k='vendorlist'], [data-k='compare'], [data-k='ride'], [data-k='buy'], [data-k='vendorhappy'], [data-k='chain']) .wfx__farmer { opacity: 0; }
.wfx__stage:is([data-k='vendorlist'], [data-k='ride'], [data-k='buy'], [data-k='vendorhappy'], [data-k='chain']) :is(.wfx__vendor, .wfx__stall) { opacity: 1; transform: none; }
.wfx__stage:not([data-cpose='none']) .wfx__consumer { opacity: 1; transform: none; }
.st-pole { stroke: #14663A; stroke-width: 6; }
.st-roof { fill: #2A9A57; stroke: #16161B; stroke-width: 3; }
.st-scallop { fill: #EEF8F1; stroke: #16161B; stroke-width: 2; } .st-scallop--b { fill: #2A9A57; }
.st-board { fill: #EEF8F1; stroke: #16161B; stroke-width: 2; }
.st-txt { fill: #14663A; font: 800 14px/1 'Inter Tight', sans-serif; }
.st-table { fill: #6FD08F; stroke: #16161B; stroke-width: 3; }
.st-crate { fill: #BFE3C9; stroke: #16161B; stroke-width: 2.5; }
.st-veg { stroke: #16161B; stroke-width: 1.8; } .st-veg--0 { fill: #2A9A57; } .st-veg--1 { fill: #8FD3A6; } .st-veg--2 { fill: #14663A; }
.wfx__bike { position: absolute; z-index: 2; bottom: calc(4vh + var(--cw) * .02); width: calc(var(--cw) * .95);
  right: calc(var(--cr) + var(--cw) * 1.65 + 6px); transform: translateX(-120vw); }
.wfx__bikesvg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .22)); }
.bk-wheel circle { fill: none; stroke: #16161B; stroke-width: 6; }
.bk-wheel path { stroke: #9A9AA6; stroke-width: 2; }
.bk-wheel { transform-box: fill-box; transform-origin: center; }
.bk-frame { stroke: #2A9A57; stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bk-basket { fill: #BFE3C9; stroke: #16161B; stroke-width: 2.5; }
.bk-body { fill: #6FD08F; stroke: #16161B; stroke-width: 3; }
.bk-leg { stroke: #1E3A34; stroke-width: 10; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bk-arm { stroke: #6FD08F; stroke-width: 9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bk-face { fill: #D9A47A; stroke: #16161B; stroke-width: 3; }
.bk-hair, .bk-bun { fill: #1E1A18; stroke: #16161B; stroke-width: 2; }
.bk-eye { fill: #16161B; }
.bk-smile { stroke: #16161B; stroke-width: 2.4; fill: none; stroke-linecap: round; }
.wfx__stage:is([data-k='buy'], [data-k='vendorhappy'], [data-k='chain']) .wfx__bike { transform: none; }
.wfx__stage:is([data-k='buy'], [data-k='vendorhappy'], [data-k='chain']) .bk-rider { opacity: 0; }
.wfx__stage[data-k='ride'] .wfx__bike { animation: wfx-ride 3.2s cubic-bezier(.2, .7, .3, 1) forwards; }
.wfx__stage[data-k='ride'] .bk-wheel { animation: wfx-spoke 3.2s cubic-bezier(.2, .7, .3, 1) forwards; }
.wfx__stage[data-k='ride'] .bk-rider { animation: wfx-pedal .35s ease-in-out 9 alternate; }
@keyframes wfx-ride { from { transform: translateX(-120vw); } to { transform: none; } }
@keyframes wfx-spoke { from { transform: rotate(-2000deg); } to { transform: none; } }
@keyframes wfx-pedal { to { transform: translateY(3px); } }
.wfx__cap { position: absolute; right: 0; bottom: calc(100% + 1.2rem); z-index: 4; margin: 0; display: inline-flex; align-items: center; gap: .6rem; max-width: min(28rem, 80vw);
  padding: .55rem 1rem; border-radius: 999px; font: 700 .9rem/1.3 var(--font-body); color: var(--ink);
  background: color-mix(in srgb, var(--bg) 88%, transparent); border: 1px solid color-mix(in srgb, #2A9A57 45%, var(--line));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .4); }
.wfx__live { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #2A9A57; box-shadow: 0 0 0 0 rgba(42, 154, 87, .6); animation: wfx-live 1.6s infinite; }
.wfx__cap.is-new { animation: wfx-cap .6s var(--ease); }
@keyframes wfx-live { 70% { box-shadow: 0 0 0 9px rgba(42, 154, 87, 0); } 100% { box-shadow: 0 0 0 0 rgba(42, 154, 87, 0); } }
@keyframes wfx-cap { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 900px) {
  .wfx__cap { right: auto; left: calc(var(--cw) * -1.4); bottom: calc(100% + .4rem); font-size: .78rem; padding: .4rem .75rem; max-width: 80vw; }
}
@media (prefers-reduced-motion: reduce) { .wfx__stage[data-k='ride'] .wfx__bike { transform: none; } }
.wp-soil { fill: var(--wp-1); }
:root[data-theme='dark'] .wp-soil { fill: #0B3D24; }
.wp-seed { fill: var(--wp-4); }
.wfx__panel.is-active .wp-seed { animation: wp-seed .7s ease-in both; animation-delay: calc(var(--i) * .12s); }
.wp-eye { fill: var(--wp-2); }
.wp-smile { stroke: var(--wp-2); stroke-width: 4; }
.wp-heart { fill: var(--wp-3); }
.wfx__panel.is-active .wp-heart { animation: rg-beat 1.3s ease-in-out 1s infinite; transform-box: fill-box; transform-origin: center; }
.wp-veg { fill: var(--wp-3); stroke: var(--line); stroke-width: 1.5; } .wp-veg--2 { fill: var(--wp-4); }
.wp-wheel { stroke: var(--ink); stroke-width: 2.5; fill: none; }
.wp-frame { stroke: var(--wp-3); stroke-width: 2.5; }
.wp-head { fill: var(--wp-4); }
.wp-bar--grey { fill: color-mix(in srgb, var(--ink) 22%, transparent); }
.wfx__panel.is-active .wp-rise { animation: wp-rise .9s var(--ease) both; transform-box: fill-box; transform-origin: bottom; }
@keyframes wp-seed { from { transform: translateY(-120px); opacity: 0; } 30% { opacity: 1; } }
@keyframes wp-rise { from { transform: scaleY(0); } }

/* products.css */
/* ==========================================================================
   Product pages — shared template (src/lib/product-page.mjs) and the
   animated hero motion graphics (src/lib/product-motifs.mjs).
   Ink for structure, Hyper Magenta for the moving parts.
   ========================================================================== */

/* ---------- hero ---------- */
.pp-hero { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--nav-h) + clamp(3rem, 8vw, 6rem)) 0 clamp(3rem, 7vw, 6rem); border-bottom: 1px solid var(--line); }
.pp-hero .cosmos { z-index: -2; }
.pp-hero__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 55%, transparent 100%), linear-gradient(180deg, transparent 50%, var(--bg) 100%); }
.pp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.pp-hero .d-lg { max-width: 12ch; }
.pp-hero .lede { margin-top: 1.6rem; }
.pp-hero__sub { margin-top: 1.2rem; color: var(--ink-3); max-width: 38rem; font-size: 1rem; }
.pp-hero__badge { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--magenta); color: var(--on-magenta); }
.pp-hero__badge .i { width: 16px; height: 16px; }
.pp-hero__marks { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: 2rem; }
.pp-hero__marks li { display: inline-flex; align-items: center; gap: .5rem; font: 600 .74rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.pp-hero__marks .i { color: var(--accent); }
.pp-hero__art { position: relative; padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(6px); }
/* the scene wipes in from the top once its frame is revealed */
.js .pp-hero__wipe { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease-io) .25s; }
.js .pp-hero__art.is-in .pp-hero__wipe { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .js .pp-hero__wipe { clip-path: none; } }
.pp-corner { position: absolute; width: 22px; height: 22px; border-color: var(--magenta); border-style: solid; }
.pp-corner--tl { left: -1px; top: -1px; border-width: 3px 0 0 3px; border-top-left-radius: var(--r-lg); }
.pp-corner--br { right: -1px; bottom: -1px; border-width: 0 3px 3px 0; border-bottom-right-radius: var(--r-lg); }
@media (max-width: 900px) {
  .pp-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .pp-hero__art { width: 100%; max-width: 420px; }
}
@media (max-width: 560px) {
  .pp-hero .btn { white-space: normal; text-align: left; line-height: 1.25; }
}

/* ---------- shared bits ---------- */
.pp-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: 50rem; }
.pp-head .lede { margin-top: 1.4rem; }
.pp-head--wide { max-width: 62rem; }
.sticky .pp-head { margin-bottom: 0; }
.pp-tag { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin-bottom: .5rem; }
.pp-more { margin-top: .7rem; font-weight: 700; color: var(--ink); }
.pp-note { margin-top: 1.4rem; padding: 1.1rem 1.3rem; border-left: 3px solid var(--magenta); background: var(--surface); border-radius: 0 var(--r) var(--r) 0; color: var(--ink-2); }
.pp-paras { max-width: 46rem; margin-bottom: 1rem; }
.pp-paras .lede + .lede { margin-top: 1rem; }
.tick { list-style: none; display: grid; gap: .6rem; margin-top: .4rem; }
.tick li { display: grid; grid-template-columns: 1.2rem 1fr; gap: .7rem; align-items: start; color: var(--ink-2); }
.tick .i { width: 1.1rem; height: 1.1rem; margin-top: .22rem; color: var(--accent); }
.tick--lg li { font-size: 1.08rem; color: var(--ink); }
.prod-chips { margin-top: 1rem; }
.pp-band { padding-block: clamp(1.4rem, 3vw, 2.4rem); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); border-block: 1px solid var(--line); }
.pp-band .marquee__item { font-size: clamp(2rem, 5.6vw, 5rem); }
.row--plain .row__b > :first-child { margin-top: .25rem; }

/* ---------- why: prose with a magenta reading line ---------- */
.pp-why__prose { position: relative; padding-left: clamp(1.2rem, 3vw, 2.4rem); }
.pp-why__prose::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--line-2); }
.pp-why__prose::after { content: ''; position: absolute; left: 0; top: 0; width: 2px; height: calc(var(--p, 0) * 100%); background: var(--magenta); box-shadow: 0 0 12px var(--glow); }
.pp-why__prose p { color: var(--ink-2); font-size: 1.08rem; margin-bottom: 1.3em; }
.pp-why__first { font: 800 clamp(1.3rem, 2.1vw, 1.75rem)/1.3 var(--font-display) !important; letter-spacing: -.015em; color: var(--ink) !important; }

/* ---------- modes ---------- */
.pp-mode { padding-top: clamp(2rem, 4vw, 3rem); border-top: 2px solid var(--ink); }
.pp-mode + .pp-mode { margin-top: clamp(3rem, 6vw, 5rem); }
.pp-mode__n { font: 900 clamp(3rem, 7vw, 6rem)/.8 var(--font-display); color: transparent; -webkit-text-stroke: 1.5px var(--magenta); margin-bottom: 1rem; }

/* ---------- duo: two large numbered statements ---------- */
.pp-duo__list { list-style: none; border-top: 2px solid var(--ink); }
.pp-duo__item { display: grid; grid-template-columns: minmax(6rem, 1fr) 4fr; gap: 1.5rem clamp(1.5rem, 4vw, 4rem); padding: clamp(2rem, 4vw, 3rem) 0; border-bottom: 1px solid var(--line-2); align-items: start; }
.pp-duo__n { font: 900 clamp(4rem, 10vw, 8.5rem)/.8 var(--font-display); letter-spacing: -.05em; color: var(--magenta); }
.pp-duo__item .d-sm { margin-bottom: .9rem; }
.pp-duo__item p:not(.pp-tag) { color: var(--ink-2); max-width: 44rem; }
@media (max-width: 700px) { .pp-duo__item { grid-template-columns: 1fr; } }

/* ---------- role: a chain that draws itself ---------- */
.pp-chain { list-style: none; position: relative; display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); padding-left: .2rem; }
.pp-chain::before { content: ''; position: absolute; left: 1.55rem; top: 1.6rem; bottom: 1.6rem; width: 2px; background: var(--line-2); }
.pp-chain::after { content: ''; position: absolute; left: 1.55rem; top: 1.6rem; width: 2px; height: calc(var(--p, 0) * (100% - 3.2rem)); background: var(--magenta); box-shadow: 0 0 12px var(--glow); }
.pp-chain li { position: relative; display: grid; grid-template-columns: 3.2rem 1fr; gap: 1.2rem; align-items: center; }
.pp-chain__node { position: relative; z-index: 1; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--magenta); color: var(--on-magenta); box-shadow: 0 0 0 6px var(--bg); }
.pp-chain__node .i { width: 20px; height: 20px; }
.pp-chain p { font-size: 1.15rem; color: var(--ink-2); }
.pp-chain strong { color: var(--ink); }

/* ---------- trust ---------- */
.pp-trust__shield { width: 64px; height: 64px; display: grid; place-items: center; border-radius: var(--r); background: var(--magenta); color: var(--on-magenta); margin-bottom: 1.6rem; box-shadow: 0 16px 40px -14px var(--glow); }
.pp-trust__shield .i { width: 30px; height: 30px; }
.pp-contact { margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--line-2); border-left: 3px solid var(--magenta); border-radius: 0 var(--r) var(--r) 0; display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; align-items: end; background: var(--surface); }
.pp-contact .d-sm { margin-bottom: .6rem; }
.pp-contact p:not(.eyebrow) { color: var(--ink-2); }
.pp-contact__go { display: grid; gap: .8rem; justify-items: start; }
@media (max-width: 760px) { .pp-contact { grid-template-columns: 1fr; } }

/* ---------- statement ---------- */
.pp-statement .lede + .lede { margin-top: 1rem; }
.pp-statement .tick { margin-top: 1.6rem; }

/* ---------- ecosystem strip ---------- */
.pp-eco__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.pp-eco__head .eyebrow { margin: 0; }

/* single column: pinned headings would overlap the content they introduce */
@media (max-width: 900px) { .is-product .sticky { position: static; margin-bottom: 1.5rem; } }

/* ==========================================================================
   Motion graphics
   ========================================================================== */
.motif { width: 100%; height: auto; overflow: visible; stroke: var(--ink-2); stroke-width: 2; }
.motif .m-glow { fill: var(--accent-soft); stroke: none; filter: blur(16px); }
.motif .m-paper { fill: var(--surface); stroke: var(--ink-3); }
.motif .m-frame { fill: var(--surface); stroke: var(--ink-3); stroke-width: 2; }
.motif .m-line2 { stroke: var(--ink-3); }
.motif .m-ink { stroke: var(--ink-2); stroke-width: 3.5; }
.motif .m-spark { fill: var(--magenta); stroke: none; filter: drop-shadow(0 0 10px var(--glow)); transform-box: fill-box; transform-origin: center; animation: m-twinkle 4s var(--ease-io) infinite; }
.motif .m-chip { fill: var(--accent-soft); stroke: var(--magenta); }
.motif .m-node { fill: var(--surface); stroke: var(--ink-3); transform-box: fill-box; transform-origin: center; animation: m-light 6s var(--ease-io) infinite; animation-delay: calc(var(--k, 0) * .35s); }
.motif .m-node--root { fill: var(--magenta); stroke: none; filter: drop-shadow(0 0 14px var(--glow)); animation: m-pulse 2.4s var(--ease-io) infinite; }
.motif .m-write { stroke-dasharray: 260; stroke-dashoffset: 260; animation: m-write 7s var(--ease) infinite; animation-delay: calc(var(--k, 0) * .28s); }
.motif .m-write--stroke { stroke: var(--magenta); stroke-width: 4; stroke-dasharray: 520; stroke-dashoffset: 520; animation-name: m-write-long; }
.motif .m-write--long { stroke: var(--magenta); stroke-width: 3; }
.motif .m-quill { stroke: var(--magenta); stroke-width: 2.5; }

.motif--book .m-chip { animation: m-light 6s var(--ease-io) infinite; animation-delay: calc(var(--k) * .6s); }
.motif--strip .m-panel rect { fill: var(--bg-2); stroke: var(--ink-3); }
.motif--strip .m-panel:nth-child(3n+1) rect { fill: var(--magenta); stroke: none; }
.motif--strip .m-panel:nth-child(3n+1) circle, .motif--strip .m-panel:nth-child(3n+1) path { stroke: #fff; }
.motif--strip .m-panel circle, .motif--strip .m-panel path { stroke: var(--ink-2); }
.motif--strip .m-scroll { animation: m-scroll 18s linear infinite; }
.motif--strip .m-notch { fill: var(--ink-3); stroke: none; }
.motif--canvas .m-guide rect { stroke: var(--ink-3); stroke-dasharray: 5 6; fill: none; }
.motif--canvas .m-brush { stroke: var(--ink); stroke-width: 5; }
.motif--canvas .m-brush--tip { fill: var(--magenta); stroke: none; stroke-width: 0; }
.motif--constellation .m-pulses circle { fill: var(--magenta); stroke: none; animation: m-travel 4.5s var(--ease-io) infinite; animation-delay: calc(var(--k) * .7s); }
.motif--screen .m-world { fill: var(--accent-soft); stroke: var(--magenta); stroke-width: 2; filter: drop-shadow(0 -6px 22px var(--glow)); animation: m-rise 9s var(--ease-io) infinite alternate; }
.motif--screen .m-play-ring { fill: color-mix(in srgb, var(--bg) 60%, transparent); stroke: var(--ink-3); }
.motif--screen .m-play { fill: var(--magenta); stroke: none; }
.motif--screen .m-track { fill: var(--line-2); stroke: none; }
.motif--screen .m-progress { fill: var(--magenta); stroke: none; transform-box: fill-box; transform-origin: left; animation: m-progress 9s linear infinite; }
.motif--beats .m-arrow { stroke: var(--magenta); stroke-width: 2.5; }
.motif--beats .m-frameg rect { fill: var(--surface); stroke: var(--ink-3); }
.motif--beats .m-frameg circle { fill: var(--accent-soft); stroke: var(--magenta); }
.motif--beats .m-frameg { animation: m-fade 7s var(--ease) infinite; animation-delay: calc(1.6s + var(--k) * .3s); }
.motif--variations .m-tile rect { fill: var(--surface); stroke: var(--ink-3); }
.motif--variations .m-tile circle, .motif--variations .m-tile path { stroke: var(--ink-2); }
.motif--variations .m-tile { animation: m-dim 9s var(--ease-io) infinite; animation-delay: calc(var(--k) * .5s); }
.motif--variations .m-lock { fill: none; stroke: var(--magenta); stroke-width: 3; filter: drop-shadow(0 0 12px var(--glow)); }
.motif--filmstrip .m-hole { fill: var(--bg-2); stroke: var(--ink-3); }
.motif--filmstrip .m-cut rect { fill: var(--bg-2); stroke: var(--ink-3); }
.motif--filmstrip .m-cut circle { fill: var(--magenta); stroke: none; filter: drop-shadow(0 0 8px var(--glow)); }
.motif--filmstrip .m-cut path { stroke: var(--magenta); stroke-width: 3; }
.motif--filmstrip .m-cut { animation: m-fade 6s var(--ease) infinite; animation-delay: calc(var(--k) * .35s); }
.motif--filmstrip .m-lockicon { stroke: var(--magenta); stroke-width: 2.5; fill: none; }

@keyframes m-twinkle { 50% { transform: scale(.75) rotate(45deg); opacity: .75; } }
@keyframes m-pulse { 50% { filter: drop-shadow(0 0 26px var(--glow)); } }
@keyframes m-light { 0%, 100% { fill: var(--surface); } 40%, 60% { fill: var(--magenta); stroke: var(--magenta); } }
@keyframes m-write { 0% { stroke-dashoffset: 260; } 35%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes m-write-long { 0% { stroke-dashoffset: 520; } 40%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes m-scroll { to { transform: translateY(-574px); } }
@keyframes m-travel { 0% { transform: translate(var(--x0), var(--y0)); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(var(--x1), var(--y1)); opacity: 0; } }
@keyframes m-rise { to { transform: translateY(-28px); } }
@keyframes m-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes m-fade { 0% { opacity: 0; transform: translateY(6px); } 20%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes m-dim { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  .motif * { animation: none !important; }
  .motif .m-write, .motif .m-write--stroke { stroke-dashoffset: 0; }
  .motif--constellation .m-pulses { display: none; }
}

/* Full-screen interactive hero stage: the world's scene owns the screen */
.pp-hero { min-height: 100svh; display: flex; align-items: center; }
.pp-hero__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); width: 100%; }
.pp-hero__light { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(700px circle at var(--mx, 72%) var(--my, 50%), var(--accent-soft), transparent 62%); }
.pp-hero__art { padding: 0; border: 0; background: none; backdrop-filter: none; height: min(78vh, 52vw); display: grid; place-items: center; will-change: transform; }
.pp-hero__art .pp-corner { display: none; }
.pp-hero__wipe { height: 100%; display: grid; place-items: center; }
.pp-hero__wipe .scene { height: 100%; width: auto; max-width: 100%; overflow: visible; filter: drop-shadow(0 30px 60px rgba(0,0,0,.25)); }
@media (max-width: 900px) { .pp-hero { min-height: 0; } .pp-hero__art { height: 46vh; max-width: none; } }

/* scenes.css */
/* ==========================================================================
   Scenes — the living motion graphics for every world (src/lib/scenes.mjs).
   Shared palette: ink (currentColor), paper (surfaces), Hyper Magenta.
   WealthFarmer uses its own greens only.
   ========================================================================== */
.scene { display: block; width: 100%; height: auto; overflow: hidden; color: var(--ink); stroke-width: 2.5; }
.scene * { vector-effect: non-scaling-stroke; }
.scene [pathLength="1"] { stroke-dasharray: 1; }

.s-ink { stroke: currentColor; }
.s-inkf { fill: currentColor; stroke: none; }
.s-faint { stroke: var(--ink-3); opacity: .7; }
.s-thin { stroke-width: 1.5; }
.s-mid { stroke-width: 2; }
.s-bold { stroke-width: 3.5; }
.s-heavy { stroke-width: 7; }
.s-mag { stroke: var(--magenta); stroke-width: 3; }
.s-magf { fill: var(--magenta); stroke: none; }
.s-white { stroke: #fff; stroke-width: 3; }
.s-whitef { fill: #fff; stroke: none; }
.s-sheet { fill: var(--surface); stroke: var(--line-2); stroke-width: 2; }
.s-sheet--top { fill: var(--bg); stroke: var(--ink-3); }
.s-cover { fill: var(--magenta); stroke: none; opacity: .9; }
.s-turn { fill: var(--surface-2); stroke: var(--ink-3); }
.s-hand { stroke: currentColor; stroke-width: 2.6; }
.s-penbody { fill: currentColor; stroke: none; }
.s-ferrule { fill: var(--ink-3); stroke: none; }
.s-chip { fill: transparent; stroke: var(--magenta); stroke-width: 2; }
.s-bubble { fill: var(--bg); stroke: currentColor; stroke-width: 3; }
.s-paint { stroke: var(--magenta); stroke-width: 20; }
.s-screen { fill: #07070A; stroke: none; }
.s-starf { fill: #fff; stroke: none; }
.s-world { fill: var(--magenta); opacity: .9; filter: drop-shadow(0 -10px 26px var(--glow)); }
.s-glass { fill: rgba(255, 255, 255, .14); stroke: rgba(255, 255, 255, .55); stroke-width: 2; }
.s-track { fill: var(--line-2); stroke: none; }
.s-beam { fill: var(--magenta); opacity: .16; stroke: none; }
.s-film { fill: #0E0E11; stroke: none; }

/* WealthFarmer greens (from its forest-green identity) */
.scene--wealthfarmer { --wf-1: #0B3D24; --wf-2: #14663A; --wf-3: #2A9A57; --wf-4: #6FD08F; --wf-5: #C9F2D5; }
:root[data-theme='dark'] .scene--wealthfarmer { --wf-5: #1C4A30; }
.wf-sunf { fill: var(--wf-4); opacity: .9; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--wf-4) 60%, transparent)); }
.wf-hill { fill: var(--wf-5); stroke: none; }
.wf-soil { fill: var(--wf-1); stroke: none; }
.wf-furrow { stroke: var(--wf-2); stroke-width: 3; }
.wf-seed { fill: var(--wf-4); stroke: none; }
.wf-stem { stroke: var(--wf-3); stroke-width: 3.5; }
.wf-stem--gold { stroke: var(--wf-4); }
.wf-leaf { fill: var(--wf-3); stroke: none; }
.wf-leaf--b { fill: var(--wf-2); }
.wf-grain { fill: var(--wf-4); stroke: var(--wf-2); stroke-width: 1.5; }
.wf-body { fill: var(--wf-2); stroke: none; }
.wf-cab { fill: var(--wf-3); stroke: none; }
.wf-window { fill: var(--wf-5); stroke: none; }
.wf-cut { fill: var(--wf-1); stroke: none; }
.wf-tine { stroke: var(--wf-1); stroke-width: 3; }
.wf-tyre { fill: var(--wf-1); stroke: var(--wf-4); stroke-width: 3; }
.wf-spoke { stroke: var(--wf-4); stroke-width: 2.5; }
.wf-band { fill: var(--wf-1); stroke: none; }

/* Save the GPU: scenes only animate while on screen. */
.js .scene:not(.is-playing):not(.is-scrubbed) * { animation-play-state: paused !important; }

/* Reduced motion: finished illustrations; hide anything that only exists in flight. */
@media (prefers-reduced-motion: reduce) {
  .scene .pk-m0, .scene .pk-m1, .scene .pk-m2, .scene .pk-m3, .scene .pk-m4, .scene .pk-m5,
  .scene .ai-p0, .scene .ai-p1, .scene .ai-p2, .scene .ai-p3, .scene .ai-p4, .scene .ai-p5, .scene .cp-wand, .scene .pb-brush, .scene .po-page,
  .scene [class*='pk-h'], .scene [class*='po-h'], .scene .wf-s0, .scene .wf-s1, .scene .wf-s2, .scene .wf-s3, .scene .wf-s4, .scene .wf-s5, .scene .wf-s6, .scene .wf-harv { display: none; }
}

/* Frames that hold a scene */
.scene-frame { position: relative; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-2); padding: clamp(1rem, 3vw, 2rem); overflow: hidden; }
.scene-frame--wf { background: color-mix(in srgb, #2A9A57 8%, var(--bg-2)); border-color: color-mix(in srgb, #2A9A57 35%, var(--line)); }
/* pointer tilt from stage.js, composed after any reveal transform */
[data-tilt-layer] > .scene { transform: var(--tilt, none); transition: transform .1s linear; }

/* ==========================================================================
   Character rig (src/lib/character.mjs): Peakime dreamer and WealthFarmer
   farmer. Joint angles per pose are solved by IK and generated into the SVG's
   own <style>. Fixed mascot colours so they read the same in light and dark.
   ========================================================================== */
.rig { width: 100%; height: auto; overflow: visible;
  --line: #16161B; --skin: #F3CBA6; --hair: #22202A; --cloth: #FF1E8C; --cloth-2: #C8106B; --pants: #2B2B36; --shoe: #FFFFFF; --accent: #FF1E8C; --paper: #FFFFFF; }
.rig--farmer { --cloth: #F6F2E6; --cloth-2: #DED7C2; --shoe: #3B2A20; --accent: #2A9A57; --hair: #2B2522; --skin: #A86E46; --pagdi: #2A9A57; --pagdi-2: #14663A; }
.rg-pagdi, .rg-gamcha { fill: var(--pagdi); stroke: var(--line); stroke-width: 2.6; }
.rg-fold, .rg-check { stroke: var(--pagdi-2); stroke-width: 2.4; }
.rg-check { stroke: #8FD3A6; stroke-width: 1.8; }
.rg-fringe { stroke: var(--pagdi-2); stroke-width: 2; }
.rg-tache { fill: var(--hair); stroke: var(--line); stroke-width: 1.5; }
.rg-brow--thick { stroke-width: 4; }
.rg-dhoti { fill: #FFFFFF; stroke: var(--line); stroke-width: 3; }
.rg-pleat { stroke: #CFC8B4; stroke-width: 2; }
.rg-ankle { fill: var(--skin); stroke: var(--line); stroke-width: 2.6; }
.rg-placket { stroke: var(--cloth-2); stroke-width: 3; }
.rg-button { fill: var(--pagdi-2); }
.rig * { vector-effect: non-scaling-stroke; }
.rg-shadow { fill: #000; opacity: .22; }
.rg-glow { fill: var(--accent); opacity: 0; filter: blur(18px); transition: opacity .6s; }
.rg-leg { fill: var(--pants); stroke: var(--line); stroke-width: 3; }
.rg-shoe { fill: var(--shoe); stroke: var(--line); stroke-width: 3; }
.rg-neck, .rg-ear { fill: var(--skin); stroke: var(--line); stroke-width: 3; }
.rg-body { fill: var(--cloth); stroke: var(--line); stroke-width: 3; }
.rg-hood { stroke: var(--cloth-2); stroke-width: 5; }
.rg-string { stroke: #fff; stroke-width: 2.6; }
.rg-pocket, .rg-hem { stroke: var(--cloth-2); stroke-width: 3; }
.rg-sleeve-o { stroke: var(--line); stroke-width: 19; }
.rg-sleeve { stroke: var(--cloth); stroke-width: 13; }
.rg-joint { fill: var(--cloth); }
.rg-cuff { fill: var(--cloth-2); stroke: var(--line); stroke-width: 2.5; }
.rg-hand { fill: var(--skin); stroke: var(--line); stroke-width: 2.8; }
.rg-face { fill: var(--skin); stroke: var(--line); stroke-width: 3; }
.rg-hair { fill: var(--hair); stroke: var(--line); stroke-width: 2; }
.rg-hat { fill: #8FD3A6; stroke: var(--line); stroke-width: 2.8; }
.rg-band2 { stroke: var(--cloth-2); stroke-width: 4; }
.rg-clip { fill: var(--accent); stroke: #fff; stroke-width: 1; }
.rg-brow { stroke: var(--line); stroke-width: 2.6; }
.rg-eyes { transition: transform .5s var(--ease, ease); }
.rg-eyes ellipse { fill: var(--line); transform-box: fill-box; transform-origin: center; animation: rg-blink 4.6s infinite; }
.rg-glint { fill: #fff; }
.rg-mouth { stroke: var(--line); stroke-width: 2.8; transition: d .4s; }
.rg-cheek { fill: #FF6FAE; opacity: .5; }
.rig--farmer .rg-cheek { fill: #C9644A; opacity: .35; }
/* props */
.rg-ink-o { stroke: var(--line); stroke-width: 8; }
.rg-tool { stroke: #4A4A58; stroke-width: 4.5; }
.rg-tool--pencil { stroke: #F2C14E; }
.rg-tool--brush { stroke: #9A6440; }
.rg-ferrule { fill: #C9CBD3; stroke: var(--line); stroke-width: 1.5; }
.rg-inkf { fill: var(--line); }
.rg-magf, .rg-star { fill: var(--accent); stroke: var(--line); stroke-width: 1.5; }
.rg-star { fill: #FFD84A; }
.rg-paper { fill: var(--paper); stroke: var(--line); stroke-width: 2.4; }
.rg-cover { fill: var(--cloth-2); stroke: var(--line); stroke-width: 2.4; }
.rg-page { transform-box: view-box; transform-origin: 120px 0; animation: rg-page 2.4s ease-in-out infinite; }
.rg-tablet, .rg-phone, .rg-board { fill: #26262E; stroke: var(--line); stroke-width: 2.4; }
.rg-canvas { fill: #fff; }
.rg-line { stroke: #9A9AA6; stroke-width: 2; }
.rg-line--mag { stroke: var(--accent); stroke-width: 2.8; }
.rg-line--w { stroke: #fff; stroke-width: 2; }
.rg-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.rg-seal { fill: var(--accent); stroke: var(--line); stroke-width: 1.5; }
.rg-screen { fill: #FF8AC2; } .rg-screen--wf { fill: #CFF5DA; }
.rg-chip { fill: #2A9A57; }
.rg-up { stroke: #14663A; stroke-width: 3; }
.rg-leaf { fill: #2A9A57; stroke: #14663A; stroke-width: 1.5; }
.rg-scanline { stroke: #14663A; stroke-width: 2; animation: rg-scan 1.4s ease-in-out infinite alternate; }
.rg-beam { fill: #6FD08F; opacity: .22; }
.rg-bar { fill: #2A9A57; transform-box: fill-box; transform-origin: bottom; animation: rg-bar 1.2s ease-in-out infinite alternate; animation-delay: calc(var(--i) * .15s); }
.rg-stripe { fill: #fff; stroke: var(--line); stroke-width: 2; }
.rg-clapper { transform-box: fill-box; transform-origin: left bottom; }
.rg-fist { stroke: var(--line); stroke-width: 2; }
.rg-bucket { fill: #fff; stroke: var(--line); stroke-width: 2.4; }
.rg-pop, .rg-kernel { fill: #FFF6DA; stroke: var(--line); stroke-width: 1.8; }
.rg-heart { fill: #fff; stroke: var(--line); stroke-width: 2.8; }
.rig--dreamer .rg-heart { fill: var(--accent); }
.rg-shine { stroke: #fff; stroke-width: 3; }
.rg-bulb { fill: #FFF6C9; stroke: var(--line); stroke-width: 2.6; }
.rg-bulb-b { fill: #C9CBD3; stroke: var(--line); stroke-width: 2; }
.rg-ray { stroke: #FFD84A; stroke-width: 3; }
.rg-finger-o { stroke: var(--line); stroke-width: 9; }
.rg-finger { stroke: var(--skin); stroke-width: 4.5; }
.rg-palette { fill: #F4E3C8; stroke: var(--line); stroke-width: 2.4; }
.rg-dab { fill: var(--accent); } .rg-dab--2 { fill: #FFD84A; } .rg-dab--3 { fill: #3A3A48; }
.rg-bag { fill: #8FD3A6; stroke: var(--line); stroke-width: 2.4; }
.rg-confetti { fill: var(--accent); }
.rg-confetti:nth-child(even) { fill: #FFD84A; }
.rg-stalk { stroke: #14663A; stroke-width: 2.6; }
.rg-grain { fill: #8FD3A6; stroke: #14663A; stroke-width: 1.5; }
.rg-band { fill: #14663A; }
.rg-seed { fill: #6FD08F; stroke: #14663A; stroke-width: 1; }
.rg-twinkle, .rg-beat, .rg-spark { transform-box: fill-box; transform-origin: center; }
.rg-twinkle { animation: rg-twinkle 2.6s ease-in-out infinite; }
.rg-bob { animation: rg-bob 3.6s ease-in-out infinite; }
.rg-s, .rg-e, .rg-w, .rg-head { transition: transform .75s cubic-bezier(.34, 1.25, .5, 1); }
.pr { opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }

/* pose-specific life */
[data-pose='idea'] .rg-glow, [data-pose='watch'] .rg-glow, [data-pose='scan'] .rg-glow, [data-pose='wand'] .rg-glow { opacity: .35; }
[data-pose='share'] .rg-float { animation: rg-float 1.8s ease-out infinite; animation-delay: calc(var(--i) * .55s); }
[data-pose='sign'] .rg-confetti { animation: rg-confetti 1.9s ease-in infinite; animation-delay: calc(var(--i) * .27s); }
[data-pose='sign'] .rg-sig { stroke-dasharray: 1; animation: rg-write 1.8s ease-in-out infinite; }
[data-pose='sketch'] .rg-draw { animation: rg-write 2.4s ease-in-out infinite; }
[data-pose='love'] .rg-beat { animation: rg-beat 1.3s ease-in-out infinite; }
[data-pose='clap'] .rg-clapper { animation: rg-clap 1.1s ease-in-out infinite; }
[data-pose='wand'] .rg-spark { animation: rg-spark 1.5s ease-in-out infinite; animation-delay: calc(var(--i) * .35s); }
[data-pose='idea'] .rg-rise { animation: rg-rise 1.6s ease-in-out infinite alternate; }
[data-pose='idea'] .rg-ray { animation: rg-ray 1.6s ease-in-out infinite alternate; }
[data-pose='scatter'] .pr--scatter .rg-seed[style] { animation: rg-seed 1.8s ease-out infinite; animation-delay: calc(var(--i) * .15s); }
[data-pose='love'] .rg-mouth, [data-pose='sign'] .rg-mouth, [data-pose='harvest'] .rg-mouth, [data-pose='idea'] .rg-mouth, [data-pose='watch'] .rg-mouth { d: path('M109 96 Q120 110 131 96'); }

/* WealthFarmer story props */
.rg-ring { stroke: #2A9A57; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; opacity: 0; }
[data-pose='radar'] .rg-ring { animation: rg-ring 1.8s ease-out infinite; animation-delay: calc(var(--i) * .6s); }
.rg-pin { fill: #14663A; }
.rg-pinhole { fill: #CFF5DA; }
.rg-stick { stroke: #6B5A44; stroke-width: 4.5; }
.rg-txt { fill: #14663A; stroke: none; font: 900 26px/1 'Inter Tight', 'Inter', system-ui, sans-serif; }
.rg-txt--q { font-size: 24px; }
.rg-bubble { fill: #fff; stroke: var(--line); stroke-width: 2.4; }
.rg-sleeve2-o { stroke: var(--line); stroke-width: 19; }
.rg-sleeve2 { stroke: #14663A; stroke-width: 13; }
.rg-hand2 { fill: #C08A5E; stroke: var(--line); stroke-width: 2.8; }
.rg-confetti--wf { fill: #2A9A57; } .rg-confetti--wf:nth-child(even) { fill: #8FD3A6; }
[data-pose='free'] .rg-confetti { animation: rg-confetti 1.9s ease-in infinite; animation-delay: calc(var(--i) * .27s); }
[data-pose='free'] .rg-glow, [data-pose='radar'] .rg-glow { opacity: .35; }
[data-pose='harvest'] .rig--farmer .rg-mouth, [data-pose='free'] .rig--farmer .rg-mouth, [data-pose='deal'] .rig--farmer .rg-mouth { d: path('M110 104 Q120 113 130 104'); }
[data-pose='think'] .rig--farmer .rg-mouth { d: path('M113 107 Q120 104 127 107'); }
/* the trader */
.rig--trader { --cloth: #D7F0DF; --cloth-2: #9FD3B0; --pants: #14663A; --shoe: #0B3D24; --accent: #2A9A57; --hair: #1E1A18; --skin: #C99068; }
.rig--trader .rg-cheek { fill: #C9644A; opacity: .3; }
.rg-specs { stroke: var(--line); stroke-width: 2.4; }
.rg-specs circle { fill: rgba(255, 255, 255, .25); }
.rg-collar { stroke: var(--cloth-2); stroke-width: 3; }
.rg-pen { stroke: #14663A; stroke-width: 3; }
/* the vendor and the consumer */
.rig--vendor { --cloth: #EEF8F1; --cloth-2: #BFE3C9; --pants: #14663A; --shoe: #0B3D24; --accent: #2A9A57; --hair: #2B2522; --skin: #B97A4E; }
.rig--consumer { --cloth: #6FD08F; --cloth-2: #2A9A57; --pants: #1E3A34; --shoe: #FFFFFF; --accent: #2A9A57; --hair: #1E1A18; --skin: #D9A47A; }
.rig--vendor .rg-cheek, .rig--consumer .rg-cheek { fill: #C9644A; opacity: .3; }
.rg-cap { fill: #2A9A57; stroke: var(--line); stroke-width: 2.6; }
.rg-apron { fill: #2A9A57; stroke: var(--line); stroke-width: 2.4; }
.rig--vendor .rg-pocket { stroke: #14663A; }
.rg-pbag { fill: #DDF5E4; stroke: var(--line); stroke-width: 2.4; }
.rg-veg { fill: #2A9A57; stroke: var(--line); stroke-width: 1.5; } .rg-veg--2 { fill: #8FD3A6; }
.rg-cmp { fill: #9A9AA6; }
[data-pose='give'] .rig--vendor .rg-mouth, [data-pose='cash'] .rig--vendor .rg-mouth, [data-cpose='carry'] .rig--consumer .rg-mouth { d: path('M109 98 Q120 112 131 98'); }
/* sale props */
.rg-blade { fill: #D5D9DE; stroke: var(--line); stroke-width: 2; }
.rg-sack { fill: #BFE3C9; stroke: var(--line); stroke-width: 2.8; }
.rg-sackf { fill: #2A9A57; }
.rg-leafs { fill: #2A9A57; }
.rg-note { fill: #8FD3A6; stroke: #14663A; stroke-width: 1.6; }
.rg-noteo { stroke: #14663A; stroke-width: 1.6; }
.rg-txt--s { font-size: 13px; }
.rg-toast, .rg-offer { transform-box: fill-box; transform-origin: left bottom; }
[data-pose='post'] .rg-toast { animation: rg-popin 2.4s ease-out infinite; }
[data-pose='offers'] .rg-offer { animation: rg-popin 2.6s ease-out infinite; animation-delay: calc(var(--i) * .35s); }
[data-tpose='free'] .rg-confetti { animation: rg-confetti 1.9s ease-in infinite; animation-delay: calc(var(--i) * .27s); }
[data-pose='cash'] .rig--farmer .rg-mouth, [data-pose='receive'] .rig--farmer .rg-mouth { d: path('M110 104 Q120 113 130 104'); }
[data-tpose='free'] .rig--trader .rg-mouth, [data-tpose='pay'] .rig--trader .rg-mouth { d: path('M109 98 Q120 112 131 98'); }
@keyframes rg-popin { 0%, 10% { transform: scale(0); opacity: 0; } 22% { transform: scale(1.15); opacity: 1; } 30%, 85% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }

@keyframes rg-ring { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(2.8); opacity: 0; } }

@keyframes rg-bob { 50% { transform: translateY(-3px); } }
@keyframes rg-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes rg-twinkle { 50% { transform: scale(.7) rotate(45deg); } }
@keyframes rg-page { 0%, 30% { transform: scaleX(1); } 60%, 100% { transform: scaleX(-1); } }
@keyframes rg-float { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-40px); opacity: 0; } }
@keyframes rg-confetti { 0% { transform: translateY(-10px) rotate(0deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(130px) rotate(280deg); opacity: 0; } }
@keyframes rg-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } 45% { transform: scale(1.07); } }
@keyframes rg-clap { 0%, 55%, 100% { transform: rotate(0deg); } 68% { transform: rotate(-26deg); } }
@keyframes rg-scan { from { transform: translateY(0); } to { transform: translateY(26px); } }
@keyframes rg-bar { from { transform: scaleY(.5); } to { transform: scaleY(1.15); } }
@keyframes rg-seed { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(calc(var(--i) * 8px + 14px), calc(var(--i) * 4px + 40px)); opacity: 0; } }
@keyframes rg-write { 0% { stroke-dashoffset: 1; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes rg-spark { 0%, 100% { transform: scale(.3); opacity: 0; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
@keyframes rg-rise { to { transform: translateY(-4px); } }
@keyframes rg-ray { from { opacity: .3; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rig * { animation: none !important; } .rig .rg-draw, .rig .rg-sig { stroke-dashoffset: 0; } }

/* support.css */
/* ==========================================================================
   Support, FAQ, Legal Center, policy documents and the 404 page.
   Built on site.css: ink text, Hyper Magenta for actions and emphasis.
   ========================================================================== */

/* ---------- reading progress (documents + FAQ) ---------- */
.readbar { position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 3px; pointer-events: none; }
.readbar span { display: block; height: 100%; background: var(--magenta); box-shadow: 0 0 12px var(--glow); transform: scaleX(var(--p, 0)); transform-origin: left; }

/* ---------- document chrome ---------- */
.phero--doc .h1 { max-width: 18ch; font-size: clamp(2.4rem, 6vw, 5.4rem); }
.phero .eyebrow a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.phero .eyebrow a:hover { color: var(--ink); }
.docwrap { padding-top: clamp(2.5rem, 5vw, 4rem); }
.doc__tocn { display: inline-block; min-width: 1.9rem; font: 700 .72rem/1 var(--font-mono); color: var(--ink-3); transition: color .2s; }
.doc__toc a.is-active .doc__tocn, .doc__toc a:hover .doc__tocn { color: var(--accent); }
.doc__chapter { scroll-margin-top: calc(var(--nav-h) + 1rem); }
.doc__num { display: block; font: 900 clamp(3rem, 6vw, 5rem)/.8 var(--font-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px var(--magenta); margin-bottom: .8rem; }
.doc__chapter > .d-sm { padding-bottom: 1.1rem; margin-bottom: 1.6rem; border-bottom: 2px solid var(--ink); }
.doc__intro { margin-bottom: 2rem; }
.doc__intro p { font-size: 1.08rem; }
.doc__legal-k { font: 700 .7rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: .9rem !important; }
.doc__closing { padding-top: 2rem; }
.doc__sign { margin-top: 2rem; font: 600 .74rem/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.doc__related { padding-top: 1rem; }
.doc__related .row { grid-template-columns: 3rem minmax(0, 1fr) auto; }
.doc__related .row__b { display: none; }
.doc__body .rows .d-sm { font-size: clamp(1.15rem, 1.8vw, 1.5rem); }
.doc__body .row { padding-block: 1.1rem; }

/* converted policy markup (also inside FAQ answers) */
.doc__sec > * + *, .faq__a > * + * { margin-top: 1rem; }
.doc__sec p, .faq__a p { margin: 0; }
.doc__sec p + p, .faq__a p + p { margin-top: .9rem; }
.doc__sec strong, .faq__a strong { color: var(--ink); font-weight: 700; }
.doc__sec a, .faq__a a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.doc__sec ul:not([class]), .doc__sec ol, .faq__a ul:not([class]), .faq__a ol { padding-left: 1.2rem; }
.doc__sec li, .faq__a li { margin: .45rem 0; padding-left: .2rem; }
.doc__sec li::marker, .faq__a li::marker { color: var(--magenta); }
.doc__sec h3, .faq__a h3 { font: 800 1.08rem/1.35 var(--font-body); color: var(--ink); margin: 0 0 .55rem; }
.doc__sec h3:not(:first-child) { margin-top: 1.8rem; }

/* boxes become ruled blocks; grids of boxes become a single ruled list */
.doc-grid { display: block; margin-top: 1.2rem; border-top: 1px solid var(--line-2); }
.doc-box { position: relative; padding: 1.2rem 0 1.2rem 1.3rem; border-left: 3px solid var(--line-2); color: var(--ink-2); }
.doc-box + .doc-box { margin-top: 1rem; }
.doc-grid > .doc-box { border-left: 0; padding: 1rem 0; margin: 0; border-bottom: 1px solid var(--line-2); display: grid; }
.doc-grid > .doc-box > div { display: grid; grid-template-columns: minmax(10rem, 1fr) 2fr; gap: .4rem 1.5rem; }
.doc-box > * + * { margin-top: .55rem; }
.doc-box--accent, .doc-box--alert { border-left-color: var(--magenta); background: linear-gradient(90deg, var(--accent-soft), transparent 70%); padding-right: 1.2rem; border-radius: 0 var(--r) var(--r) 0; }
.doc-box--alert strong:first-child, .doc-box--alert p:first-child { color: var(--ink); }
.doc-box__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.doc-box__head h3 { margin: 0 !important; }
.doc-box__head + * { margin-top: .75rem; }
.doc-box ul { margin-top: .7rem; }
ul.doc-plain { list-style: none; padding: 0; border-top: 1px solid var(--line); }
ul.doc-plain > li { margin: 0; padding: .65rem 0; border-bottom: 1px solid var(--line); }
ul.doc-plain > li > .doc-k:first-child { display: inline-block; min-width: 9.5rem; color: var(--ink-3); font-size: .9rem; }
.doc-ticked { display: flex; gap: .75rem; align-items: flex-start; list-style: none; }
.doc-tick { flex: none; width: 1.4rem; height: 1.4rem; display: grid; place-items: center; margin-top: .1rem; border-radius: 6px; background: var(--magenta); color: var(--on-magenta); font-size: .75rem; font-weight: 800; }
.doc-strong { display: block; margin-bottom: .3rem; color: var(--ink); }
.doc-k { font-weight: 700; color: var(--ink); }
.doc-label { font-weight: 700; color: var(--ink) !important; }
.doc-code { font-family: var(--font-mono); font-size: .86em; padding: .15rem .45rem; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }
.doc-code--block { display: inline-block; padding: .5rem .8rem; }
@media (max-width: 640px) { .doc-grid > .doc-box > div { grid-template-columns: 1fr; } }

/* ---------- Legal Center ---------- */
.legal-index .rows .d-sm { font-size: clamp(1.4rem, 2.6vw, 2.2rem); }
.legal-band { padding-block: clamp(1.4rem, 3vw, 2.4rem); border-block: 1px solid var(--line); }
.legal-sign__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem 4rem; align-items: end; }
.legal-sign__line { color: var(--ink-2); margin: 0 0 .4rem; }
@media (max-width: 900px) { .legal-sign__grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faqsec { padding-top: clamp(2.5rem, 5vw, 4rem); }
.faqwrap { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
.faqnav { position: sticky; top: calc(var(--nav-h) + 1.5rem); align-self: start; }
.faqnav p { font: 600 .7rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1rem; }
.faqnav ol { list-style: none; border-left: 2px solid var(--line); }
.faqnav a { display: flex; justify-content: space-between; gap: .6rem; padding: .45rem 0 .45rem 1rem; margin-left: -2px; border-left: 2px solid transparent; font-size: .92rem; font-weight: 500; color: var(--ink-3); transition: color .2s, border-color .2s; }
.faqnav a:hover { color: var(--ink); }
.faqnav a.is-active { color: var(--ink); font-weight: 700; border-left-color: var(--magenta); }
.faqnav small { font: 700 .7rem/1.6 var(--font-mono); color: var(--ink-3); }
.faqnav a.is-active small { color: var(--accent); }
.faqgroup { margin-bottom: clamp(3.5rem, 7vw, 5.5rem); scroll-margin-top: calc(var(--nav-h) + 1rem); }
.faqgroup__head { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 1.2rem; padding-bottom: 1.2rem; margin-bottom: 0; border-bottom: 2px solid var(--ink); }
.faqgroup__n { font: 900 clamp(2.6rem, 5vw, 4rem)/.8 var(--font-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px var(--magenta); }
.faqgroup__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--accent); background: var(--accent-soft); }
.faqgroup__icon .i { width: 20px; height: 20px; }
.faqgroup .faq { border-top: 0; }
.faq__item { scroll-margin-top: calc(var(--nav-h) + 1rem); }
.faq__item:target summary { color: var(--accent); }
.faq__a { font-size: 1rem; }
@media (max-width: 960px) {
  .faqwrap { grid-template-columns: minmax(0, 1fr); }
  .faqnav { position: sticky; top: 0; z-index: 5; margin-inline: calc(var(--gutter) * -1); padding: .7rem var(--gutter); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
  .faqnav p { display: none; }
  .faqnav ol { display: flex; gap: .4rem; overflow-x: auto; border: 0; scrollbar-width: none; }
  .faqnav a { white-space: nowrap; padding: .45rem .8rem; margin: 0; border: 1px solid var(--line-2); border-radius: 999px; }
  .faqnav a.is-active { border-color: var(--magenta); }
  .faqnav small { display: none; }
}
@media (max-width: 640px) { .faq__a { padding-right: 0; } .faqgroup__icon { display: none; } .faqgroup__head { grid-template-columns: auto 1fr; } }

/* ---------- in-page search ---------- */
.findbox { position: relative; display: flex; align-items: center; gap: .8rem; width: min(680px, 100%); padding: .3rem .5rem .3rem 1.2rem;
  border: 2px solid var(--line-2); border-radius: var(--r); background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(10px);
  transition: border-color .25s, box-shadow .35s; }
.findbox:focus-within { border-color: var(--magenta); box-shadow: 0 0 0 6px var(--accent-soft); }
.findbox > .i { width: 22px; height: 22px; color: var(--ink-3); }
.findbox:focus-within > .i { color: var(--accent); }
.findbox input { flex: 1; min-width: 0; padding: .95rem 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 600 1.1rem var(--font-body); }
.findbox input::placeholder { color: var(--ink-3); font-weight: 500; }
.findbox input::-webkit-search-cancel-button { display: none; }
.findbox__count { padding: .4rem .7rem; border-radius: 8px; font: 700 .72rem/1 var(--font-mono); letter-spacing: .06em; color: var(--on-magenta); background: var(--magenta); white-space: nowrap; }
.findbox__count:empty { display: none; }
.findempty { padding: 2rem 0; color: var(--ink-2); font-size: 1.05rem; }
[data-filter-item][hidden], [data-filter-group][hidden] { display: none !important; }

/* ---------- Support ---------- */
.answers { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.answers__list { list-style: none; border-top: 2px solid var(--ink); }
.answers__list a { display: grid; grid-template-columns: 12rem 1fr auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line-2); transition: padding-left .4s var(--ease), color .2s; }
.answers__list a:hover { padding-left: .6rem; color: var(--accent); }
.answers__g { font: 600 .72rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.answers__list strong { font-weight: 700; }
.answers__list .i { color: var(--accent); }
@media (max-width: 700px) { .answers__list a { grid-template-columns: 1fr auto; } .answers__g { grid-column: 1 / -1; } }

.support-duo .lede { margin-top: 1.2rem; }
.channels { list-style: none; margin: 2rem 0 0; border-top: 2px solid var(--ink); }
.channel { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: center; padding: 1.2rem 0; border-bottom: 1px solid var(--line-2); }
.channel__k { font: 600 .72rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); grid-column: 1; }
.channel__v { font: 900 clamp(1.1rem, 2vw, 1.5rem)/1.1 var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; grid-column: 1; transition: color .2s; }
.channel__go { grid-column: 2; grid-row: 1 / span 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); transition: background-color .3s, color .3s, border-color .3s, transform .5s var(--ease); }
.channel:hover .channel__v { color: var(--accent); }
.channel:hover .channel__go { background: var(--magenta); color: var(--on-magenta); border-color: var(--magenta); transform: rotate(-45deg); }
.window { margin: 2rem 0 0; padding-top: 1.6rem; border-top: 2px solid var(--ink); }
.window .stat__n { font-size: clamp(4rem, 9vw, 7.5rem); }
.window .stat__n em { font-size: .32em; margin-left: .12em; letter-spacing: -.02em; }
.window > p { color: var(--ink-2); margin-top: 1.2rem; max-width: 36rem; }

/* ---------- 404 ---------- */
.lost { position: relative; overflow: hidden; isolation: isolate; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-h) + 3rem) 0 4rem; }
.lost .cosmos { z-index: -1; }
.lost__code { display: flex; align-items: center; gap: .02em; margin: 0 0 1.5rem; font: 900 clamp(7rem, 24vw, 20rem)/.8 var(--font-display); letter-spacing: -.06em; }
.lost__orbit { width: .78em; height: .78em; margin: 0 .04em; overflow: visible; }
.lost__ring { fill: none; stroke: var(--ink); stroke-width: 14; }
.lost__ring--in { stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 4 8; }
.lost__world { fill: var(--magenta); filter: drop-shadow(0 0 10px var(--glow)); }
.lost__moon { fill: var(--ink); }
.lost__spin { transform-origin: 100px 100px; animation: lostSpin 6s linear infinite; }
.lost__spin--slow { animation-duration: 11s; animation-direction: reverse; }
@keyframes lostSpin { to { transform: rotate(360deg); } }
.lost__links { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: 2.4rem; }

/* keep long titles and the scrolling category strip inside the viewport */
.faqwrap > *, .doc > * { min-width: 0; }
.faqgroup__head .d-sm, .doc__chapter > .d-sm { overflow-wrap: anywhere; hyphens: auto; }
.doc__body .rows .d-sm, .legal-index .rows .d-sm { overflow-wrap: anywhere; }