/* irievybz.ai, 2026-09 rebuild (light). Shared by index.html, try.html, work.html.
   Light only, by Matthew's call (2026-09-23), in rasta colours: red, gold and green,
   a bit of each (his words), on a mostly light page so it still looks high class.
   Not black-and-yellow: primary buttons are green, the lead plan and the footer are
   deep green, and a thin red-gold-green stripe marks the important edges.
   --signal-ink / --green-ink are the text-safe versions on --bg.
   Deliberately NOT the old site's #009B3A / #FFD700 / #CE1126.
   Radius rule: controls 999px (pills), panels 20px, images 20px. Nothing else rounded.
   main.css is left alone for the other pages. */

:root {
  --bg: #F2F3F5;
  --bg-raised: #FFFFFF;
  --bg-sunk: #E9EBEE;
  --line: #DEE1E6;
  --line-strong: #C8CDD4;
  --text: #0C0E12;
  --text-2: #474E59;
  --text-3: #646B76;
  --signal: #E3A21A;
  --signal-ink: #8A5A00;
  --signal-soft: rgba(227, 162, 26, 0.18);
  --green: #1B7F4B;
  --green-ink: #17693F;
  --red: #C8372D;
  --green-deep: #0E4A2D;
  --rasta: linear-gradient(90deg, var(--red) 0 33.34%, var(--signal) 0 66.67%, var(--green) 0);
  --steel: #8FA3B8;

  --font: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --r-control: 999px;
  --r-panel: 20px;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1360px;
  --nav-h: 68px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-1: 0 1px 2px rgba(12, 14, 18, 0.05), 0 8px 24px -8px rgba(12, 14, 18, 0.12);
  --shadow-2: 0 2px 4px rgba(12, 14, 18, 0.04), 0 30px 60px -24px rgba(12, 14, 18, 0.28);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: var(--signal); color: var(--text); }
:focus-visible { outline: 2px solid var(--signal-ink); outline-offset: 3px; border-radius: 4px; }

.skip-nav {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--text); color: #fff; padding: 10px 16px;
  border-radius: var(--r-control); font-weight: 600; text-decoration: none;
}
.skip-nav:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0; font-stretch: 87.5%; }
.muted { color: var(--text-2); }
.quiet { color: var(--text-3); }
.anchor { position: relative; top: calc(var(--nav-h) * -1); display: block; height: 0; }

/* ── Type scale ─────────────────────────────────────────── */
.h-hero {
  font-size: clamp(2.9rem, 6.7vw, 6.4rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.h-display {
  font-size: clamp(2.5rem, 5vw, 4.9rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.042em;
  text-wrap: balance;
}
.h-section {
  font-size: clamp(2.2rem, 4.8vw, 4.4rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.h-chapter {
  font-size: clamp(2rem, 3.6vw, 3.5rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.036em;
  text-wrap: balance;
}
.lede { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.55; color: var(--text-2); max-width: 38ch; text-wrap: pretty; }
.body { color: var(--text-2); max-width: 60ch; text-wrap: pretty; }
.accent { color: var(--signal-ink); }

/* Split text (motion.js wraps each word; the original text stays as the accessible name) */
.split-line { display: block; }
.w { display: inline-block; overflow: clip; overflow-clip-margin: 0.12em; vertical-align: top; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.w > span { display: inline-block; will-change: transform; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px;
  border-radius: var(--r-control);
  font-size: 1rem; font-weight: 500; letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn--signal { background: var(--green); color: #fff; box-shadow: 0 12px 26px -14px rgba(14, 74, 45, 0.7); }
.btn--signal:hover { background: var(--green-ink); box-shadow: 0 0 0 3px var(--signal-soft), 0 16px 30px -14px rgba(14, 74, 45, 0.7); }
.btn--signal .arrow { color: var(--signal); }
.plan--lead .btn--signal { background: var(--signal); color: var(--text); }
.plan--lead .btn--signal .arrow { color: var(--text); }
.btn--ink { background: var(--text); color: #fff; }
.btn--ink:hover { background: #262A31; }
.btn--line { background: rgba(255,255,255,0.6); color: var(--text); border-color: var(--line-strong); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn--line:hover { border-color: var(--text); background: #fff; }
.btn--sm { height: 40px; padding: 0 18px; font-size: 0.925rem; }
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn:active { transform: scale(0.98); }
.btn[disabled] { opacity: .55; cursor: wait; }

.link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text); text-decoration: none; font-weight: 500;
  background: var(--rasta) 0 100% / 0 2px no-repeat,
              linear-gradient(var(--line-strong), var(--line-strong)) 0 100% / 100% 1px no-repeat;
  padding-bottom: 3px;
  transition: background-size .45s var(--ease);
}
.link:hover { background-size: 100% 2px, 100% 1px; }
.link .arrow { transition: transform .35s var(--ease); }
.link:hover .arrow { transform: translateX(4px); }

/* ── Nav ────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  transition: background-color .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-solid {
  background: rgba(242, 243, 245, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: var(--line);
}
.nav.is-hidden { transform: translateY(-105%); }
.nav:focus-within { transform: none; }
.nav-inner { height: 100%; display: flex; align-items: center; gap: 28px; }

/* Motion guards: hide only what motion.js will animate, and only while it is on its way.
   A 3 s failsafe in <head> adds .motion-ready even if a script never arrives. */
.js:not(.motion-ready) [data-split="hero"],
.js:not(.motion-ready) [data-hero-foot] { opacity: 0; }
.motion-on [data-bars] > *::before { transform: scaleX(0); transition: transform 1.2s var(--ease); }
.motion-on [data-bars].bars-in > *::before { transform: scaleX(1); }
.motion-on [data-bars].bars-in > :nth-child(2)::before { transition-delay: .15s; }
.motion-on [data-bars].bars-in > :nth-child(3)::before { transition-delay: .3s; }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 1.08rem; letter-spacing: -0.02em;
  text-decoration: none; color: var(--text); margin-right: auto;
}
.brand-mark { width: 12px; height: 12px; border-radius: 50%; background: conic-gradient(from -90deg, var(--green) 0 33.3%, var(--signal) 0 66.6%, var(--red) 0); }
.brand-ai { color: var(--text-3); font-weight: 500; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: 0.95rem; color: var(--text-2); text-decoration: none; transition: color .2s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
/* Soundtrack switch (index only): four bars in the rasta colours dance while it plays. */
.sound-toggle {
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-control); background: rgba(255,255,255,0.7);
  color: var(--text-2); font-size: 0.9rem; cursor: pointer; transition: color .2s var(--ease), border-color .2s var(--ease);
}
html:not(.js) .sound-toggle { display: none; }
.sound-toggle:hover, .sound-toggle.is-on { color: var(--text); border-color: var(--text); }
.sound-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sound-bars i { width: 3px; height: 4px; border-radius: 2px; background: var(--text-3); }
.sound-toggle.is-on .sound-bars i { animation: sound-bar .9s ease-in-out infinite alternate; }
.sound-toggle.is-on .sound-bars i:nth-child(1) { background: var(--red); animation-delay: -.45s; }
.sound-toggle.is-on .sound-bars i:nth-child(2) { background: var(--signal); animation-delay: -.1s; }
.sound-toggle.is-on .sound-bars i:nth-child(3) { background: var(--green); animation-delay: -.7s; }
.sound-toggle.is-on .sound-bars i:nth-child(4) { background: var(--signal); animation-delay: -.3s; }
@keyframes sound-bar { from { height: 3px; } to { height: 14px; } }
@media (prefers-reduced-motion: reduce) { .sound-toggle.is-on .sound-bars i { animation: none; height: 10px; } }
@media (max-width: 860px) { .sound-toggle { width: 42px; height: 42px; padding: 0; justify-content: center; } .sound-label { display: none; } }
.nav-burger {
  display: none; width: 42px; height: 42px; border: 1px solid var(--line-strong);
  border-radius: 50%; background: rgba(255,255,255,0.7); cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-burger span { width: 16px; height: 1.5px; background: var(--text); transition: transform .3s var(--ease); }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }
.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 49;
  background: rgba(242,243,245,0.98); border-bottom: 1px solid var(--line);
  padding: 12px var(--gutter) 24px; display: none; flex-direction: column;
}
.mobile-menu a { padding: 14px 0; font-size: 1.5rem; letter-spacing: -0.02em; text-decoration: none; border-bottom: 1px solid var(--line); }
.mobile-menu.is-open { display: flex; }
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-inner { gap: 10px; }
  .nav-burger { display: inline-flex; }
  .mobile-menu .btn { display: none; }
}

/* ── Stage: the scroll-driven scene ─────────────────────── */
.stage { position: relative; }
.stage-view { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; z-index: 0; }
.stage-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease); }
.stage.is-live .stage-view canvas { opacity: 1; }
.stage-stills { position: absolute; inset: 0; }
.stage-stills picture { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
.stage-stills picture img { width: 100%; height: 100%; object-fit: cover; }
.stage-stills picture.is-on { opacity: 1; }
.stage.is-live .stage-stills { opacity: 0; transition: opacity 1.2s var(--ease); }
.stage-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(242,243,245,0.55) 0%, transparent 16%, transparent 80%, rgba(242,243,245,0.9) 100%);
}
.stage-chapters { position: relative; z-index: 1; margin-top: -100vh; margin-top: -100lvh; }
.chapter { min-height: 135vh; min-height: 135lvh; display: flex; align-items: center; padding-block: calc(var(--nav-h) + 24px) 48px; }
.chapter--hero { min-height: 100vh; min-height: 100lvh; }
.chapter .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.chapter-copy { position: relative; grid-column: 1 / span 5; display: grid; gap: 18px; }
.chapter--right .chapter-copy { grid-column: 8 / span 5; }
.chapter-copy .body { font-size: 1.1rem; }
.stage-chapters .chapter:not(.chapter--hero) .chapter-copy::before { content: ""; width: 44px; height: 3px; border-radius: 3px; background: var(--signal); }
.stage-chapters .chapter:nth-child(3n+2) .chapter-copy::before { background: var(--red); }
.stage-chapters .chapter:nth-child(3n+1) .chapter-copy::before { background: var(--green); }
.chapter-copy > * { text-shadow: 0 0 28px rgba(242,243,245,0.95), 0 0 2px rgba(242,243,245,0.9); }
.chapter-tag {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px; border-radius: 999px; background: rgba(255,255,255,0.75);
  border: 1px solid var(--line); font-family: var(--mono); font-stretch: 87.5%; font-size: 0.72rem; color: var(--text-2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); text-shadow: none !important;
}
.chapter-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }

.chapter--hero { align-items: stretch; padding-top: calc(var(--nav-h) + clamp(28px, 6vh, 72px)); padding-bottom: clamp(40px, 8vh, 96px); }
.chapter--hero .wrap { grid-template-rows: auto 1fr auto; row-gap: 24px; }
.chapter--hero .hero-title { grid-column: 1 / -1; grid-row: 1; }
.chapter--hero .hero-foot { grid-column: 1 / span 5; grid-row: 3; display: grid; gap: 24px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 861px) { .hero-title .split-line { white-space: nowrap; } }

.site-ready .chapter [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.site-ready .chapter.is-in [data-reveal] { opacity: 1; transform: none; }
.site-ready .chapter.is-in [data-reveal="2"] { transition-delay: .1s; }
.site-ready .chapter.is-in [data-reveal="3"] { transition-delay: .2s; }

@media (max-width: 860px) {
  .chapter { align-items: flex-end; padding-bottom: calc(40px + 100lvh - 100svh); }
  .chapter-copy, .chapter--right .chapter-copy { grid-column: 1 / -1; }
  .chapter--hero { align-items: stretch; padding-top: calc(var(--nav-h) + 20px); }
  .chapter--hero .hero-foot { grid-column: 1 / -1; }
  .h-hero { font-size: clamp(2.6rem, 11.5vw, 3.6rem); text-wrap: balance; }
  .stage-shade { background: linear-gradient(to bottom, rgba(242,243,245,0.6) 0%, transparent 14%, transparent 46%, rgba(242,243,245,0.94) 76%, var(--bg) 100%); }
}

/* ── Sections ───────────────────────────────────────────── */
.section { position: relative; padding-block: clamp(96px, 13vw, 176px); }
.section-head { display: grid; gap: 20px; margin-bottom: clamp(48px, 6vw, 88px); max-width: 980px; }

/* Channel strip (the one marquee on the page); speed follows scroll velocity */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: clamp(18px, 2.4vw, 30px); background: var(--bg-raised); }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-group { display: flex; align-items: center; gap: clamp(28px, 4vw, 64px); padding-right: clamp(28px, 4vw, 64px); }
.marquee-item { font-size: clamp(2rem, 5vw, 4.4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; white-space: nowrap; }
.marquee-item:nth-child(4n+3) { color: transparent; -webkit-text-stroke: 1.2px var(--text); }
.marquee-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--signal); flex: none; }
.marquee-group .marquee-dot:nth-of-type(3n+1) { background: var(--red); }
.marquee-group .marquee-dot:nth-of-type(3n) { background: var(--green); }

/* Proof cards: image + copy, tilt in 3D */
.proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); perspective: 1400px; }
.proof-card {
  display: grid; gap: 22px; text-decoration: none; color: inherit;
  background: var(--bg-raised); border-radius: var(--r-panel); padding: clamp(14px, 1.6vw, 20px) clamp(14px, 1.6vw, 20px) clamp(24px, 2.6vw, 34px);
  box-shadow: var(--shadow-1); transform-style: preserve-3d; transition: box-shadow .5s var(--ease);
}
.proof-card:hover { box-shadow: var(--shadow-2); }
.proof-media { border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--bg-sunk); }
.proof-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.2s var(--ease); }
.proof-card:hover .proof-media img { transform: scale(1.1); }
.proof-copy { display: grid; gap: 10px; padding-inline: clamp(6px, 1vw, 14px); }
.proof-name { font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.02; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.proof-name .arrow { font-size: 0.7em; color: var(--signal-ink); transition: transform .4s var(--ease); }
.proof-card:hover .proof-name .arrow { transform: translate(4px, -4px); }
.proof-kind { color: var(--text-3); }
.proof-more { margin-top: 36px; }
.proof-slot--wide { grid-column: 1 / -1; }
.proof-card--wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(20px, 3vw, 40px); padding: clamp(14px, 1.6vw, 20px); }
.proof-card--wide .proof-copy { padding: clamp(6px, 1.4vw, 20px); }
@media (max-width: 860px) { .proof-grid { grid-template-columns: 1fr; } .proof-card--wide { grid-template-columns: 1fr; } }

/* Principles: big statements, each line flips up in 3D */
.principles { display: grid; perspective: 1200px; overflow-x: clip; }
.principle {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: end;
  padding-block: clamp(28px, 3.6vw, 44px); border-bottom: 1px solid var(--line); transform-origin: 50% 100%;
}
.principle:first-child { border-top: 1px solid var(--line); }
.principle h3 { font-size: clamp(1.8rem, 3.6vw, 3.2rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; }
.principle p { color: var(--text-2); max-width: 44ch; }
@media (max-width: 860px) { .principle { grid-template-columns: 1fr; gap: 12px; } }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; perspective: 1400px; }
.plan {
  display: flex; flex-direction: column; gap: 22px; padding: clamp(24px, 2.4vw, 32px);
  background: var(--bg-raised); border-radius: var(--r-panel); box-shadow: var(--shadow-1);
  transform-style: preserve-3d; transition: box-shadow .5s var(--ease);
}
.plan:hover { box-shadow: var(--shadow-2); }
.plan-name { font-size: 1.05rem; font-weight: 500; }
.plan-price { display: flex; align-items: baseline; gap: 6px; }
.plan-price strong { font-size: clamp(2.6rem, 3.8vw, 3.6rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1; }
.plan-price span { color: var(--text-3); }
.plan-for { color: var(--text-2); font-size: 0.975rem; min-height: 3.2em; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 1; align-content: start; }
.plan li { position: relative; padding-left: 20px; font-size: 0.95rem; color: var(--text-2); line-height: 1.45; }
.plan li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.plans .plan:nth-child(1) li:not(.plan-inherit)::before { background: var(--green); }
.plans .plan:nth-child(4) li:not(.plan-inherit)::before { background: var(--red); }
.plan li.plan-inherit { color: var(--text); }
.plan li.plan-inherit::before { background: var(--line-strong); }
.plan .btn { width: 100%; }
.plan--lead { position: relative; background: var(--green-deep); color: #fff; }
.plan--lead::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 4px; border-radius: 0 0 4px 4px; background: var(--rasta); }
.plan--lead .plan-for, .plan--lead li, .plan--lead .plan-price span { color: rgba(255, 255, 255, 0.76); }
.plan--lead li.plan-inherit { color: #fff; }
.plan--lead li.plan-inherit::before { background: rgba(255, 255, 255, 0.32); }
.plans-note { margin-top: 22px; color: var(--text-3); }
@media (max-width: 1080px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .plans { grid-template-columns: 1fr; } .plan-for { min-height: 0; } }

.start-steps { margin-top: clamp(64px, 8vw, 112px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.start-step { padding: 28px 28px 0 0; position: relative; }
.start-step::before { content: ""; position: absolute; top: -1px; left: 0; width: 48px; height: 2px; background: var(--signal); transform-origin: 0 50%; }
.start-step:nth-child(1)::before { background: var(--red); }
.start-step:nth-child(3)::before { background: var(--green); }
.start-step h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 8px; }
.start-step p { color: var(--text-2); font-size: 0.975rem; max-width: 34ch; }
@media (max-width: 760px) { .start-steps { grid-template-columns: 1fr; border-top: 0; } .start-step { border-top: 1px solid var(--line); padding: 22px 0 24px; } }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; padding: 24px 48px 24px 0; position: relative; font-size: 1.15rem; font-weight: 500; letter-spacing: -0.012em; line-height: 1.35; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%;
  background:
    linear-gradient(var(--text), var(--text)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--text), var(--text)) center / 1.5px 12px no-repeat,
    var(--bg-raised);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: transform .4s var(--ease);
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-answer { padding: 0 48px 28px 0; color: var(--text-2); max-width: 68ch; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; gap: 28px; } }

/* Final call to action */
.final { padding-block: clamp(110px, 15vw, 200px); overflow: hidden; }
.final-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: end; position: relative; z-index: 1; }
.final-orb { position: absolute; right: -6vw; top: 50%; width: min(52vw, 760px); aspect-ratio: 1; transform: translateY(-50%); z-index: 0; pointer-events: none; }
.final-orb .orb-spin { width: 100%; height: 100%; }
.final-orb img { width: 100%; height: 100%; object-fit: contain; }
.orb-float { position: relative; width: 100%; height: 100%; }
/* Where Karen sits on the ring picture when she lands there on her page tour (tour.js). */
.orb-seat { position: absolute; left: 51.7%; top: 28.6%; width: 1px; height: 1px; }
/* Karen on her page tour: a small see-through canvas that tour.js moves with her. */
.karen-tour { position: absolute; left: 0; top: 0; z-index: 40; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease); will-change: transform; }
.karen-tour.is-on { opacity: 1; }
.url-form { display: grid; gap: 10px; margin-top: 36px; max-width: 640px; }
.url-row { display: flex; gap: 10px; }
.url-row .field { flex: 1; min-width: 0; }
.capture { background: rgba(255,255,255,0.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: var(--r-panel); padding: 28px; display: grid; gap: 14px; box-shadow: var(--shadow-1); }
.capture p { color: var(--text-2); font-size: 0.975rem; max-width: 46ch; }
.capture-row { display: flex; gap: 10px; }
.capture-row .field { flex: 1; min-width: 0; }
.form-msg { min-height: 1.3em; font-size: 0.9rem; color: var(--text-2); }
@media (max-width: 860px) { .final-grid { grid-template-columns: 1fr; gap: 40px; } .final-orb { width: 90vw; right: -30vw; top: 12%; opacity: 0.5; } }
@media (max-width: 520px) { .url-row, .capture-row { flex-direction: column; } .url-row .btn, .capture-row .btn { width: 100%; } }

/* ── Form controls ──────────────────────────────────────── */
.label { font-size: 0.875rem; color: var(--text-2); font-weight: 500; }
.field {
  width: 100%; height: 52px; padding: 0 20px;
  border-radius: var(--r-control); border: 1px solid var(--line-strong);
  background: var(--bg-raised); color: var(--text);
  font-size: 1rem; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field::placeholder { color: var(--text-3); }
.field:hover { border-color: #AEB4BD; }
.field:focus { outline: none; border-color: var(--signal-ink); box-shadow: 0 0 0 4px var(--signal-soft); }
.field-group { display: grid; gap: 8px; }

/* ── Footer ─────────────────────────────────────────────── */
.footer { position: relative; background: var(--green-deep); color: #fff; padding-block: 72px 36px; border-radius: 28px 28px 0 0; }
.footer::before { content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 5px; border-radius: 0 0 5px 5px; background: var(--rasta); }
.footer .brand { color: #fff; }
.footer .brand-ai { color: rgba(255, 255, 255, 0.6); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 40px; }
.footer-tag { margin-top: 14px; color: rgba(255, 255, 255, 0.76); max-width: 30ch; }
.footer h4 { font-size: 0.875rem; font-weight: 500; color: rgba(255, 255, 255, 0.6); margin-bottom: 14px; }
.footer nav { display: grid; gap: 10px; }
.footer nav a { color: rgba(255, 255, 255, 0.88); text-decoration: none; font-size: 0.95rem; }
.footer nav a:hover { color: #fff; }
.footer-legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.16); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; color: rgba(255, 255, 255, 0.66); font-size: 0.85rem; }
.footer-legal a { color: rgba(255, 255, 255, 0.88); text-decoration: none; }
.footer-legal a:hover { color: #fff; }
.footer-legal nav { display: flex; gap: 20px; }
.footer :focus-visible { outline-color: var(--signal); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* ── Subscribe modal (PayPal signup) ────────────────────── */
.subscribe-modal {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.subscribe-modal.active { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .3s var(--ease), visibility 0s; }
.subscribe-overlay { position: absolute; inset: 0; background: rgba(12,14,18,0.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.subscribe-card { position: relative; width: min(460px, 100%); background: var(--bg-raised); border-radius: 24px; padding: 32px 28px 28px; box-shadow: var(--shadow-2); transform: translateY(14px) scale(0.98); transition: transform .45s var(--ease); }
.subscribe-modal.active .subscribe-card { transform: none; }
.subscribe-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg-raised); color: var(--text-2); font-size: 1.3rem; cursor: pointer; }
.subscribe-close:hover { color: var(--text); border-color: var(--text); }
.subscribe-header { margin-bottom: 20px; display: grid; gap: 4px; }
.subscribe-header h3 { font-size: 1.6rem; font-weight: 500; letter-spacing: -0.02em; }
.subscribe-price { color: var(--signal-ink); font-family: var(--mono); font-size: 0.85rem; }
.subscribe-form { display: grid; gap: 14px; }
.subscribe-field { display: grid; gap: 7px; }
.subscribe-field label { font-size: 0.875rem; color: var(--text-2); font-weight: 500; }
.field-optional { color: var(--text-3); font-weight: 400; }
.subscribe-note { color: var(--text-3); font-size: 0.85rem; text-align: center; }
.subscribe-success { text-align: center; padding: 24px 0 8px; display: grid; gap: 8px; }
.subscribe-success h3 { font-size: 1.3rem; font-weight: 500; }
.subscribe-success p { color: var(--text-2); }

/* ── Cookie banner (js/cookie-consent.js injects its own CSS; match it here and keep
      Accept and Reject equally prominent) ─────────────────── */
.cc-banner {
  background: rgba(255, 255, 255, 0.96) !important; color: var(--text-2) !important;
  border-top: 1px solid var(--line) !important; box-shadow: 0 -12px 40px -20px rgba(12,14,18,0.25) !important;
  font-family: var(--font) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.cc-banner a { color: var(--text) !important; }
.cc-banner .cc-btn {
  background: var(--bg-raised) !important; color: var(--text) !important;
  border: 1px solid var(--line-strong) !important; border-radius: 999px !important; font-weight: 500 !important;
}
.cc-banner .cc-btn:hover { border-color: var(--text) !important; opacity: 1 !important; }

/* ── Inner-page header (try, work) ──────────────────────── */
.page-hero { position: relative; padding-top: calc(var(--nav-h) + clamp(48px, 8vw, 110px)); padding-bottom: clamp(56px, 8vw, 110px); overflow: hidden; }
.page-hero-media { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.page-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(242,243,245,0.92) 34%, rgba(242,243,245,0.1) 68%, rgba(242,243,245,0.3) 100%),
    linear-gradient(to bottom, rgba(242,243,245,0.3) 0%, transparent 30%, transparent 72%, var(--bg) 100%);
}
.page-hero .wrap { position: relative; z-index: 1; }
@media (max-width: 860px) {
  .page-hero-media { height: 60svh; }
  .page-hero-media img { object-position: 50% 30%; }
  .page-hero:has(.page-hero-media) { padding-top: calc(var(--nav-h) + 44svh); }
  .page-hero-media::after { background: linear-gradient(to bottom, rgba(242,243,245,0.2) 0%, rgba(242,243,245,0.5) 45%, var(--bg) 100%); }
}

/* ── try.html ───────────────────────────────────────────── */
.try-hero { min-height: min(100svh, 940px); display: flex; align-items: center; }
.try-copy { max-width: 660px; display: grid; gap: 22px; }
.try-title { font-size: clamp(2.5rem, 5vw, 4.8rem); }
.try-form { display: grid; gap: 14px; margin-top: 8px; padding: 22px; background: rgba(255,255,255,0.72); border-radius: var(--r-panel); box-shadow: var(--shadow-1); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.try-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.try-note { color: var(--text-3); font-size: 0.9rem; }
.try-error { border: 1px solid rgba(194, 65, 12, 0.4); background: #FFF1EB; color: var(--text); border-radius: 14px; padding: 14px 16px; font-size: 0.95rem; }
.try-error a { color: var(--signal-ink); }
.try-loading { display: flex; align-items: center; gap: 14px; color: var(--text-2); font-size: 0.95rem; }
.try-loading-line { position: relative; width: 120px; height: 3px; background: var(--line-strong); overflow: hidden; border-radius: 3px; flex: none; }
.try-loading-line::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--signal); border-radius: 3px; animation: try-scan 1.3s var(--ease) infinite; }
@keyframes try-scan { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@media (max-width: 620px) { .try-row { grid-template-columns: 1fr; } }

.try-result { border-top: 1px solid var(--line); }
.result-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.result-profile { display: grid; gap: 14px; }
.profile-rows { margin-top: 14px; border-top: 1px solid var(--line); }
.summary-row { padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--text); font-size: 0.975rem; }
.summary-row strong { display: block; font-family: var(--mono); font-stretch: 87.5%; font-weight: 500; font-size: 0.72rem; color: var(--text-3); text-transform: uppercase; margin-bottom: 4px; }
.summary-row ul { margin: 4px 0 0; padding-left: 18px; color: var(--text-2); }
.chat {
  border-radius: 24px; background: var(--bg-raised); box-shadow: var(--shadow-2);
  display: grid; grid-template-rows: auto 1fr auto auto; min-height: 540px; overflow: hidden;
  position: sticky; top: calc(var(--nav-h) + 20px);
}
.chat-head { padding: 18px 22px; border-bottom: 1px solid var(--line); color: var(--text-2); font-size: 0.95rem; }
.chat-head .biz { color: var(--text); font-weight: 500; }
.messages { padding: 22px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; max-height: 470px; }
.msg { max-width: 82%; font-size: 0.975rem; line-height: 1.55; white-space: pre-wrap; }
.msg::before { display: block; font-family: var(--mono); font-stretch: 87.5%; font-size: 0.68rem; margin-bottom: 4px; }
.msg.karen { align-self: flex-start; padding-left: 14px; border-left: 2px solid var(--signal); color: var(--text); }
.msg.karen::before { content: "KAREN"; color: var(--signal-ink); }
.msg.user { align-self: flex-end; text-align: right; padding-right: 14px; border-right: 2px solid var(--line-strong); color: var(--text-2); }
.msg.user::before { content: "YOU"; color: var(--text-3); }
.msg.thinking { color: var(--text-3); animation: try-pulse 1.2s ease-in-out infinite; }
@keyframes try-pulse { 50% { opacity: 0.4; } }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 14px; }
.chip { border: 1px solid var(--line-strong); background: var(--bg-raised); color: var(--text-2); border-radius: 999px; padding: 8px 14px; font-size: 0.875rem; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease); }
.chip:hover { border-color: var(--signal-ink); color: var(--text); }
.chat-input { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--line); }
.chat-input .field { flex: 1; min-width: 0; }
.try-cta { margin-top: clamp(64px, 8vw, 110px); display: grid; gap: 18px; max-width: 900px; }
.try-cta .btn { justify-self: start; }
@media (max-width: 960px) { .result-grid { grid-template-columns: 1fr; } .chat { position: static; min-height: 440px; } }

.steps-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.steps-line > div { padding: 28px 28px 0 0; position: relative; }
.steps-line > div::before { content: ""; position: absolute; top: -1px; left: 0; width: 48px; height: 2px; background: var(--signal); }
.steps-line h3 { font-size: clamp(1.3rem, 1.9vw, 1.7rem); font-weight: 500; letter-spacing: -0.025em; margin-bottom: 10px; }
.steps-line p { color: var(--text-2); max-width: 36ch; }
@media (max-width: 760px) { .steps-line { grid-template-columns: 1fr; border-top: 0; } .steps-line > div { border-top: 1px solid var(--line); padding: 22px 0 26px; } }

.compare { background: var(--bg-raised); border-radius: var(--r-panel); box-shadow: var(--shadow-1); padding: 8px clamp(16px, 2.4vw, 32px); }
.compare-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.compare-row:last-child { border-bottom: 0; }
.compare-row > :first-child { color: var(--text-3); font-family: var(--mono); font-stretch: 87.5%; font-size: 0.72rem; text-transform: uppercase; }
.compare-row > :nth-child(2) { color: var(--text-3); }
.compare-row > :nth-child(3) { color: var(--text); font-weight: 500; }
.compare-head > * { font-family: var(--mono) !important; font-stretch: 87.5%; font-size: 0.72rem !important; text-transform: uppercase; color: var(--text-3) !important; font-weight: 400 !important; }
.compare-head > :nth-child(3) { color: var(--signal-ink) !important; }
@media (max-width: 760px) { .compare-row { grid-template-columns: 1fr 1fr; gap: 8px 16px; } .compare-row > :first-child { grid-column: 1 / -1; } .compare-head > :first-child { display: none; } }

.proof-line { font-size: clamp(1.7rem, 3vw, 2.7rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; max-width: 28ch; }
.proof-links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 28px; }

/* ── work.html ─────────────────────────────────────────── */
.case { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; perspective: 1400px; }
.case + .case { margin-top: clamp(96px, 12vw, 170px); }
.case--flip .case-media { order: 2; }
.case-media { border-radius: var(--r-panel); overflow: hidden; background: var(--bg-sunk); aspect-ratio: 16 / 10; box-shadow: var(--shadow-2); transform-style: preserve-3d; }
.case-media img { width: 100%; height: 100%; object-fit: cover; }
.case-copy { display: grid; gap: 18px; }
.case-name { font-size: clamp(2.4rem, 4.8vw, 4.2rem); font-weight: 500; letter-spacing: -0.042em; line-height: 1; }
.case-kind { color: var(--text-3); }
.case-facts { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--line); }
.case-facts li { padding: 13px 0 13px 22px; border-bottom: 1px solid var(--line); color: var(--text-2); position: relative; }
.case-facts li::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--signal); }
.case-links { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 8px; }
#oshun .case-facts li::before { background: var(--red); }
#joong .case-facts li::before { background: var(--green); }
#china-wheels .case-facts li::before { background: var(--signal); }
@media (max-width: 860px) { .case { grid-template-columns: 1fr; } .case--flip .case-media { order: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .site-ready .chapter [data-reveal] { opacity: 1; transform: none; }
  .try-loading-line::after { animation: none; width: 100%; }
  .msg.thinking { animation: none; }
}