/* ============================================================
   Todokan landing — clean rewrite
   Principles: generous space, one accent color, type does the work,
   animation only where it earns its place.
   ============================================================ */

:root {
  --bg: #F7F4ED;          /* warm paper */
  --ink: #1A2A20;         /* deep moss ink */
  --ink-muted: #5B6B61;
  --ink-soft: #8A9A8F;
  --line: #E2DCCC;
  --surface: #FFFFFF;
  --accent: #CF5807;      /* clay */
  --accent-ink: #FFFFFF;
  --moss: #2E4036;

  --font-sans: "Plus Jakarta Sans", -apple-system, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --maxw: 1160px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  position: relative;
}
img { max-width: 100%; display: block; }

/* =======  HERO BACKGROUND (tweakable)  ======= */
.heroBg {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 900px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.heroBg__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 400ms, filter 400ms;
}
.heroBg__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(247,244,237,0.55), rgba(247,244,237,0.82));
  transition: opacity 400ms;
}
.heroBg__fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 260px;
  background: linear-gradient(180deg, transparent, var(--bg));
}
/* None */
body[data-hero-bg="none"] .heroBg { display: none; }
/* Jungle photo */
body[data-hero-bg="jungle"] .heroBg__img { background-image: url("../assets/jungle-bg.webp"); }
/* New default — golden-hour jungle glow (illustrated, depth-layered) */
body[data-hero-bg="glow"] .heroBg__img {
  background-image: url("../assets/hero-jungle-glow.svg");
  background-color: #F2D29A;
}
body[data-hero-bg="glow"] .heroBg__veil {
  /* Lift the haze so text stays readable but image reads through */
  opacity: 0.35;
  background: linear-gradient(180deg, rgba(247,244,237,0.20), rgba(247,244,237,0.55));
}
body[data-hero-bg="glow"] .heroBg::after {
  /* Subtle warm vignette */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 60%, rgba(207,88,7,0.10), transparent 55%);
  pointer-events: none;
}
/* Time-of-day jungle (4 zones — _new.svg variants in /themes/jungle/) */
body[data-hero-bg="morning"]   .heroBg__img { background-image: url("/themes/jungle/morning_new.svg");   background-color: #F7F4ED; }
body[data-hero-bg="morning"]   .heroBg__veil { opacity: 0.42; background: linear-gradient(180deg, rgba(247,244,237,0.18), rgba(247,244,237,0.55)); }
body[data-hero-bg="noon"]      .heroBg__img { background-image: url("/themes/jungle/noon_new.svg");      background-color: #F7F4ED; }
body[data-hero-bg="noon"]      .heroBg__veil { opacity: 0.45; background: linear-gradient(180deg, rgba(247,244,237,0.18), rgba(247,244,237,0.55)); }
body[data-hero-bg="afternoon"] .heroBg__img { background-image: url("/themes/jungle/afternoon_new.svg"); background-color: #F7F4ED; }
body[data-hero-bg="afternoon"] .heroBg__veil { opacity: 0.5;  background: linear-gradient(180deg, rgba(247,244,237,0.20), rgba(247,244,237,0.6));  }
body[data-hero-bg="night"]     .heroBg__img { background-image: url("/themes/jungle/night_new.svg");     background-color: #121A22; }
body[data-hero-bg="night"]     .heroBg__veil { opacity: 0.5;  background: linear-gradient(180deg, rgba(18,26,34,0.35), rgba(18,26,34,0.75)); }
/* Warm radial glow on every time-of-day variant — mirrors the `glow` mode */
body[data-hero-bg="morning"]   .heroBg::after,
body[data-hero-bg="noon"]      .heroBg::after,
body[data-hero-bg="afternoon"] .heroBg::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 60%, rgba(207,88,7,0.10), transparent 55%);
  pointer-events: none;
}
body[data-hero-bg="night"]     .heroBg::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(207,88,7,0.16), transparent 55%);
  pointer-events: none;
}

/* Hero content sits above the bg */
.nav, .hero { position: relative; z-index: 1; }

/* Accent swap */
body[data-accent="moss"]    { --accent: #2E8B57; }
body[data-accent="berry"]   { --accent: #B5345E; }
body[data-accent="midnight"]{ --accent: #1E3A5F; }

/* Proof animation can be disabled */
body[data-proof="off"] .proof__card--flyer { animation: none !important; }
body[data-proof="off"] .proof__slot::before { animation: none !important; opacity: 1 !important; }
body[data-proof="off"] .proof__slot::after { animation: none !important; opacity: 1 !important; }

/* =======  BUTTONS  ======= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 160ms, transform 160ms, border-color 160ms;
  cursor: pointer;
}
.btn--clay { background: var(--accent); color: var(--accent-ink); }
.btn--clay:hover { background: #B84B04; }
.btn--ghost { color: var(--ink); border-color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--bg); }
.btn--lg { padding: 14px 24px; font-size: 15px; }
.btn--xl { padding: 18px 32px; font-size: 16px; }

/* =======  NAV  ======= */
.nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
}
.nav__brand img {
  height: 38px;
  width: auto;
  display: block;
}
/* Nav logo: the white asset is used directly (see landing-page-v22.html) —
   all four time-of-day skies are dark at the top. No filters, no halo. */
.nav__links {
  display: flex;
  gap: 28px;
  margin-left: auto;
}
.nav__links a {
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.nav__links a:hover { color: var(--ink); }

/* =======  SHARED TYPE  ======= */
.h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1.2;
  letter-spacing: -0.035em;
  margin: 0;
}
.h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--accent); line-height: 1; display: inline-block; padding-bottom: 0.08em; }
.p { font-size: 17px; color: var(--ink-muted); line-height: 1.55; max-width: 560px; margin: 24px 0 0; }

/* =======  HERO  ======= */
.hero {
  max-width: var(--maxw);
  margin: 40px auto 120px;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  min-height: 540px;
}
.hero__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(3rem, 6vw, 5.2rem);
  line-height: 1.03;
  letter-spacing: -0.045em;
  margin: 0 0 24px;
  color: var(--ink);
}
.hero__title em {
  font-family: var(--italic-font, 'Instrument Serif'), 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: var(--italic-weight, 400);
  color: var(--accent);
  letter-spacing: var(--italic-tracking, -0.01em);
  line-height: 1;
  font-size: var(--italic-scale, 1.1em);
}
/* Italic font swaps */
body[data-italic-font="instrument"] { --italic-font: 'Instrument Serif'; --italic-scale: 1.1em; --italic-weight: 400; --italic-tracking: -0.01em; }
body[data-italic-font="playfair"]   { --italic-font: 'Playfair Display';  --italic-scale: 0.96em; --italic-weight: 500; --italic-tracking: -0.025em; }
body[data-italic-font="dmserif"]    { --italic-font: 'DM Serif Display';  --italic-scale: 1em; --italic-weight: 400; --italic-tracking: -0.02em; }
body[data-italic-font="fraunces"]   { --italic-font: 'Fraunces';          --italic-scale: 0.98em; --italic-weight: 500; --italic-tracking: -0.03em; }
body[data-italic-font="newsreader"] { --italic-font: 'Newsreader';        --italic-scale: 1.02em; --italic-weight: 400; --italic-tracking: -0.015em; }
body[data-italic-font="young"]      { --italic-font: 'Young Serif';       --italic-scale: 0.94em; --italic-weight: 400; --italic-tracking: -0.02em; font-style: normal; }
body[data-italic-font="young"] .hero__title em { font-style: normal; }
body[data-italic-font="cormorant"]  { --italic-font: 'Cormorant Garamond'; --italic-scale: 1.12em; --italic-weight: 500; --italic-tracking: -0.02em; }
/* Phosphate Inline (Apple system) — fallbacks to Big Shoulders then Oswald on non-Mac */
body[data-italic-font="phosphate"]  { --italic-font: 'Phosphate Inline', 'Phosphate', 'Big Shoulders Inline Display', 'Big Shoulders Display', 'Oswald', 'Impact', sans-serif; --italic-scale: 1em; --italic-weight: 700; --italic-tracking: -0.01em; }
body[data-italic-font="phosphate"] .hero__title em { font-style: normal; text-transform: uppercase; letter-spacing: 0.005em; -webkit-text-stroke: 0; }
.hero__lede {
  font-size: 19px;
  line-height: 1.55;
  color: #283831;
  font-weight: 500;
  margin: 0 0 36px;
  max-width: 460px;
  text-shadow: 0 1px 0 rgba(247, 244, 237, 0.6);
}
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* =======  HERO HEADLINE REVEAL (word-by-word fly-in)  ======= */
.hero__title .reveal-word,
.hero__lede  .reveal-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
  animation: heroWordReveal 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(var(--i, 0) * 0.08s);
}
.hero__lede .reveal-word {
  animation-duration: 0.55s;
  animation-delay: calc(0.35s + var(--i, 0) * 0.04s);
  transform: translateY(12px);
}
@keyframes heroWordReveal {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__title .reveal-word,
  .hero__lede  .reveal-word {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* =======  HERO PROOF ANIMATION  ======= */
.hero__proof { display: flex; justify-content: center; }
.proof {
  width: 100%;
  max-width: 480px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  position: relative;
}
.proof__col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.proof__colHd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ink);
}
.proof__dot { width: 8px; height: 8px; border-radius: 50%; }
.proof__dot--you { background: #3B82F6; }
.proof__dot--ai { background: #22D3EE; animation: aiPulse 2s ease-in-out infinite; }
@keyframes aiPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(34,211,238,0); }
}

.proof__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.proof__cardTitle { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.proof__cardMeta { display: flex; align-items: center; gap: 8px; }
.proof__pill {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid currentColor;
}
.proof__pill--todo { color: #8A9A8F; }
.proof__pill--open { color: #22C55E; }
.proof__pill--run { color: #22D3EE; }
.proof__send {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  background: var(--accent);
  color: #fff;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* The flying card animation — this is the one animation on the page */
.proof__card--flyer {
  animation: flyToAgent 5s cubic-bezier(0.65, 0, 0.3, 1) infinite;
  transform-origin: center;
  position: relative;
  z-index: 2;
}
@keyframes flyToAgent {
  0%,   15% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  25% {
    transform: translate(0, 0) scale(1.04);
    box-shadow: 0 10px 30px rgba(207,88,7,0.3);
  }
  45% {
    transform: translate(calc(100% + 36px), -30px) scale(0.96);
    opacity: 1;
  }
  55%, 70% {
    transform: translate(calc(100% + 36px), -30px) scale(0.96);
    opacity: 0.001;
  }
  71%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}

/* The card that appears in the agent column when the flyer lands */
.proof__slot {
  position: relative;
  min-height: 80px;
}
.proof__slot::before {
  /* running card, fades in when the flyer "arrives" */
  content: "Migrate worker to new auth";
  display: block;
  background: var(--surface);
  border: 1px solid rgba(34,211,238,0.5);
  border-radius: 10px;
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  opacity: 0;
  animation: landCard 5s cubic-bezier(0.65, 0, 0.3, 1) infinite;
}
.proof__slot::after {
  content: "● RUNNING · 00:12";
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #22D3EE;
  margin-top: 8px;
  padding: 4px 8px;
  border: 1px solid rgba(34,211,238,0.5);
  border-radius: 3px;
  width: fit-content;
  opacity: 0;
  animation: landStatus 5s cubic-bezier(0.65, 0, 0.3, 1) infinite;
}
@keyframes landCard {
  0%, 48% { opacity: 0; transform: translateY(8px); }
  55%, 95% { opacity: 1; transform: translateY(0); background: linear-gradient(180deg, rgba(34,211,238,0.06), var(--surface)); }
  100% { opacity: 0; }
}
@keyframes landStatus {
  0%, 58% { opacity: 0; }
  65%, 95% { opacity: 1; }
  100% { opacity: 0; }
}

/* =======  HOW IT WORKS  ======= */
.how {
  max-width: var(--maxw);
  margin: 0 auto 120px;
  padding: 0 32px;
}
.how__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.how__list li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--ink);
}
.how__n {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.how__t {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.2;
}
.how__s {
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1.5;
}

/* =======  BOARD GLIMPSE  ======= */
.glimpse {
  max-width: var(--maxw);
  margin: 0 auto 120px;
  padding: 0 32px;
}
.glimpse__frame {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -20px rgba(26,42,32,0.15);
  background: #111;
}
.glimpse__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #0E1A14;
}
.glimpse__bar > span {
  width: 10px; height: 10px; border-radius: 50%;
  background: #3D4945;
}
.glimpse__bar > span:nth-child(1) { background: #FF5F57; }
.glimpse__bar > span:nth-child(2) { background: #FEBC2E; }
.glimpse__bar > span:nth-child(3) { background: #28C840; }
.glimpse__url {
  margin: 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
}
.glimpse__frame img {
  width: 100%;
  display: block;
}

/* =======  YOUR RULES  ======= */
.control {
  max-width: var(--maxw);
  margin: 0 auto 120px;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  align-items: start;
}
.control__intro { position: sticky; top: 40px; }
.rules {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.rule {
  padding: 24px 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 32px;
  align-items: baseline;
}
.rule:last-child { border-bottom: 1px solid var(--line); }
.rule dt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.rule__dot { width: 10px; height: 10px; border-radius: 50%; }
.rule dd {
  margin: 0;
  font-size: 16px;
  color: var(--ink-muted);
  line-height: 1.5;
}

/* =======  SURFACES — device mockups  ======= */
.surf {
  max-width: var(--maxw);
  margin: 0 auto 120px;
  padding: 0 32px;
}
.surf__row {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1.4fr;
  gap: 40px;
  align-items: stretch;
  padding: 60px 48px 48px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}
.surf__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}
.surf__device {
  display: flex;
  justify-content: center;
}
.surf__name {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--ink-soft);
  margin-top: 4px;
}
.surf__job {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.05;
}

/* Watch frame */
.wfr {
  width: 120px;
  height: 150px;
  background: #0A0A0C;
  border-radius: 32px;
  padding: 10px 8px;
  position: relative;
  box-shadow: 0 20px 40px -12px rgba(10,10,12,0.35);
}
.wfr__crown {
  position: absolute;
  right: -3px; top: 40px;
  width: 6px; height: 20px;
  background: #2A2A2E;
  border-radius: 2px;
}
.wfr__screen {
  background:
    linear-gradient(rgba(1, 64, 64, 0.55), rgba(1, 64, 64, 0.78)),
    url('/jungle-hero.jpg') center / cover no-repeat;
  border-radius: 22px;
  height: 100%;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.wfr__time {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: #CF5807;
  align-self: flex-end;
}
.wfr__mic {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(207,88,7,0.12);
  border: 2px solid rgba(207,88,7,0.4);
  display: flex; align-items: center; justify-content: center;
  animation: micPulse 1.8s ease-in-out infinite;
}
@keyframes micPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(207,88,7,0.35); }
  50%     { box-shadow: 0 0 0 6px rgba(207,88,7,0); }
}
.wfr__lbl {
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #CF5807;
}

/* Phone frame */
.pfr {
  width: 190px;
  background: #0A0A0C;
  border-radius: 28px;
  padding: 8px;
  position: relative;
  box-shadow: 0 30px 50px -14px rgba(10,10,12,0.4);
}
.pfr__notch {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 16px;
  background: #000;
  border-radius: 10px;
  z-index: 3;
}
.pfr__screen {
  background: #014040;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 306 / 647;
}
.pfr__screen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #014040;
}

/* Browser frame for web */
.bfr {
  width: 100%;
  max-width: 380px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 30px 50px -14px rgba(26,42,32,0.2);
  background: #111;
}
.bfr__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  background: #0E1A14;
}
.bfr__bar > span {
  width: 8px; height: 8px; border-radius: 50%;
  background: #3D4945;
}
.bfr__bar > span:nth-child(1) { background: #FF5F57; }
.bfr__bar > span:nth-child(2) { background: #FEBC2E; }
.bfr__bar > span:nth-child(3) { background: #28C840; }
.bfr__screen { background: #014040; aspect-ratio: 1.93 / 1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.bfr__screen img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }

/* =======  CTA  ======= */
.cta {
  max-width: var(--maxw);
  margin: 0 auto 120px;
  padding: 0 32px;
  text-align: center;
}
.cta__t {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
  color: var(--ink);
  margin: 0 auto 40px;
  max-width: 720px;
}
.cta__t em {
  font-family: 'Big Shoulders Display', 'Oswald', sans-serif;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px var(--clay, #CF5807);
  paint-order: stroke fill;
  letter-spacing: 0.005em;
  line-height: 1;
  display: inline-block;
}
.cta__row {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.cta__note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}

/* =======  FAQ  ======= */
.faq {
  max-width: 760px;
  margin: 0 auto 120px;
  padding: 0 32px;
}
.faq__h { margin-bottom: 32px; }
.q {
  border-top: 1px solid var(--line);
  padding: 20px 0;
}
.q:last-child { border-bottom: 1px solid var(--line); }
.q summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.q summary::-webkit-details-marker { display: none; }
.q summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 20px;
  color: var(--ink-soft);
  transition: transform 200ms;
}
.q[open] summary::after { content: "−"; }
.q p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 560px;
}

/* =======  FOOTER  ======= */
.foot {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px 32px 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  border-top: 1px solid var(--line);
}
.foot__logo {
  display: inline-block;
  padding: 10px 16px;
  background: var(--moss);
  border-radius: 8px;
}
.foot__logo img { height: 24px; width: auto; }
.foot__line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
}
.foot__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-top: 6px;
}
.foot__links {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 4px;
}
.foot__links a {
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px dotted rgba(20,30,24,0.25);
}
.foot__links a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.foot__sep { opacity: 0.5; }

/* =======  RESPONSIVE  ======= */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 60px; margin-bottom: 80px; }
  .hero__proof { order: -1; }
  .how__list { grid-template-columns: 1fr; gap: 32px; }
  .control { grid-template-columns: 1fr; gap: 48px; }
  .control__intro { position: static; }
  .rule { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
  .surf__row { grid-template-columns: 1fr; gap: 48px; padding: 40px 32px; }
  .nav__links { display: none; }
  .nav { padding: 20px; }
}

/* ============================================================
   PINNED BOARD — the "window-frame" scroll effect (à la Gabba)
   The figure sticks; the next section rises over it.
   ============================================================ */
.pin {
  position: relative;
  margin-top: 40px;
}
.pin__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  z-index: 0;
}
.pin__frame {
  width: min(1080px, 92vw);
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #0F1612;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 40px 80px -30px rgba(20,30,24,0.55),
    0 12px 30px -12px rgba(20,30,24,0.35);
  border: 1px solid rgba(0,0,0,0.18);
}
.pin__bar {
  height: 34px;
  background: #0F1612;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 6px;
  position: relative;
}
.pin__bar span {
  width: 10px; height: 10px; border-radius: 50%;
  background: #3A4740;
}
.pin__bar span:nth-child(1) { background: #E35D4B; }
.pin__bar span:nth-child(2) { background: #E6B94E; }
.pin__bar span:nth-child(3) { background: #6BBF69; }
.pin__url {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #8A9A8F;
}
.pin__frame img {
  width: 100%;
  display: block;
}
.pin__anim {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #2E4036;
  display: block;
}
.pin__anim iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* This reserves scroll distance so the sticky pin stays visible. */
.pin__overscroll {
  height: 40vh;
}

/* ============================================================
   KANBAN LANDING — three columns with sticky headers + hover details
   ============================================================ */
.klm {
  position: relative;
  z-index: 2;
  padding: 120px 40px 140px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  margin-top: -20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.klm__head {
  max-width: 1320px;
  margin: 0 auto 56px;
  text-align: center;
}
.klm__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 18px;
}
.klm__h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--ink);
}
.klm__h2 em {
  font-family: var(--italic-font, 'Instrument Serif'), serif;
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.015em;
  font-size: var(--italic-scale, 1.05em);
}
.klm__sub {
  font-size: 16px;
  color: var(--ink-muted);
  max-width: 520px;
  margin: 0 auto;
}

.klm__board {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
  align-items: start;
}

.kcol {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kcol__sticky {
  position: sticky;
  top: 0;
  background: var(--bg);
  /* Extra top padding + negative margin creates a solid band above
     the visible header, so cards scrolling behind can't show through. */
  padding: 32px 0 18px;
  margin-top: -24px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
  z-index: 5;
}
.kcol__hd {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink);
  margin-bottom: 14px;
}
.kcol__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.kcol__name { flex: 1; }
.kcol__count {
  font-size: 10px;
  color: var(--ink-soft);
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  letter-spacing: 0.08em;
}
.kcol__t {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 10px;
}
.kcol__t em {
  font-family: var(--italic-font, 'Instrument Serif'), serif;
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.kcol__s {
  font-size: 13.5px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 0;
}
.kcol__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kcard {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 16px 14px;
  cursor: default;
  transition: border-color 180ms, box-shadow 180ms, transform 180ms;
}
.kcard:hover {
  border-color: var(--ink);
  box-shadow: 0 6px 24px -10px rgba(26,26,26,0.2);
  transform: translateY(-1px);
}
.kcard__pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(26,26,26,0.06);
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.kcard__pill--todo { background: rgba(207,88,7,0.12); color: var(--accent); }
.kcard__pill--sent { background: rgba(34,211,238,0.14); color: #0E8AA0; }
.kcard__pill--done { background: rgba(46,64,54,0.12); color: #2E4036; }
.kcard__pill--q    { background: rgba(26,26,26,0.06); color: var(--ink); }

.kcard__t {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.3;
}
.kcard__s {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.4;
}

/* Detail frame — expands BELOW the card on hover (inline, no overlap) */
.kcard__detail {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  margin-top: 0;
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  transition: grid-template-rows 280ms cubic-bezier(0.2,0.7,0.2,1),
              margin-top 280ms cubic-bezier(0.2,0.7,0.2,1);
}
.kcard__detailInner {
  min-height: 0;
  background: var(--ink);
  border-radius: 10px;
  padding: 0 16px;
  box-shadow: 0 20px 40px -18px rgba(26,26,26,0.5);
  transition: padding 280ms cubic-bezier(0.2,0.7,0.2,1);
}
.kcard__detailT {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  margin-bottom: 8px;
  color: #fff;
}
.kcard__detail p {
  margin: 0;
  color: rgba(255,255,255,0.78);
}
.kcard:hover .kcard__detail,
.kcard:focus-within .kcard__detail {
  grid-template-rows: 1fr;
  margin-top: 14px;
}
.kcard:hover .kcard__detailInner,
.kcard:focus-within .kcard__detailInner {
  padding: 16px;
}

/* Q cards have a slightly different treatment */
.kcard--q .kcard__t { font-weight: 500; }

/* Responsive */
@media (max-width: 1100px) {
  .klm__board { grid-template-columns: 1fr 1fr; }
  .kcol:last-child { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .pin__sticky { height: auto; padding: 40px 20px; position: relative; }
  .pin__overscroll { display: none; }
  .klm { padding: 80px 20px 100px; margin-top: 0; }
  .klm__board { grid-template-columns: 1fr; gap: 40px; }
  .kcol:last-child { grid-column: auto; }
  .kcol__sticky { position: static; }
  .kcard__detail {
    grid-template-rows: 1fr;
    margin-top: 10px;
  }
  .kcard__detailInner { padding: 16px; }
}

/* ============================================================
   MCP TUNNEL — scroll-driven scene
   Robot talks to the board through an isometric tunnel.
   Card flies right -> left (query), then left -> right (result).
   ============================================================ */
.mcp {
  position: relative;
  background: var(--bg);
  padding: 0;
  z-index: 2;
}
/* The scroll zone sets how much scroll drives the pinned scene. */
.mcp__scroll { height: 420vh; pointer-events: none; }

/* Pinned stage fills the viewport. */
.mcp__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg) 0%, #EFEADD 100%);
  /* place stage ABOVE the scroll-zone siblings so it sits alone visually */
}

.mcp__head {
  text-align: center;
  padding: 48px 40px 8px;
  max-width: 920px;
  margin: 0 auto;
  flex: 0 0 auto;
}
.mcp__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--accent);
  margin-bottom: 14px;
}
.mcp__h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--ink);
}
.mcp__h2 em {
  font-family: 'Big Shoulders Display', 'Oswald', sans-serif;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px var(--clay, #CF5807);
  paint-order: stroke fill;
  letter-spacing: 0.005em;
  display: inline-block;
}
.mcp__sub {
  font-size: 15px;
  color: var(--ink-muted);
  max-width: 560px;
  margin: 0 auto;
}

/* The 3-column scene */
.mcp__scene {
  position: relative;
  flex: 1 1 auto;
  margin: 0 auto;
  width: min(1320px, 100%);
  padding: 20px 40px 40px;
  overflow: visible;
}

/* ROBOT (left) */
.mcp__robot {
  position: absolute;
  left: 2%;
  top: 36%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 180px;
}
.bot {
  position: relative;
  width: 150px;
  height: 200px;
  animation: botFloat 4s ease-in-out infinite;
}
@keyframes botFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.bot__antenna {
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translateX(-50%);
  width: 2px;
  height: 18px;
  background: var(--ink);
}
.bot__antenna-ball {
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: antennaBlink 1.4s ease-in-out infinite;
}
@keyframes antennaBlink {
  0%, 60%, 100% { opacity: 1; }
  70%, 80%      { opacity: 0.3; }
}
.bot__head {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 90px;
  background: #F4F0E6;
  border: 2px solid var(--ink);
  border-radius: 22px 22px 14px 14px;
  box-shadow: inset 0 -6px 0 rgba(26,26,26,0.08);
}
.bot__face {
  position: absolute;
  inset: 16px 14px;
  background: var(--ink);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.bot__eye {
  width: 16px;
  height: 16px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent);
  animation: botBlink 3.6s ease-in-out infinite;
}
.bot__eye--r { animation-delay: 0.1s; }
@keyframes botBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.1); }
}
.bot__mouth {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 4px;
  background: rgba(207,88,7,0.5);
  border-radius: 2px;
}
.bot__ear {
  position: absolute;
  top: 30px;
  width: 10px;
  height: 24px;
  background: #F4F0E6;
  border: 2px solid var(--ink);
  border-radius: 4px;
}
.bot__ear--l { left: -10px; }
.bot__ear--r { right: -10px; }
.bot__neck {
  position: absolute;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 10px;
  background: var(--ink);
  border-radius: 4px 4px 0 0;
}
.bot__body {
  position: absolute;
  top: 104px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 80px;
  background: #F4F0E6;
  border: 2px solid var(--ink);
  border-radius: 14px 14px 18px 18px;
}
.bot__chest {
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  width: 44px;
  height: 24px;
  background: var(--ink);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.1);
}
.bot__chest::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22D3EE;
  box-shadow: 0 0 8px #22D3EE;
  transform: translate(-50%,-50%);
  animation: chestPulse 1.6s ease-in-out infinite;
}
@keyframes chestPulse {
  0%, 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: 0.5; transform: translate(-50%,-50%) scale(0.7); }
}
.bot__arm {
  position: absolute;
  top: 10px;
  width: 8px;
  height: 50px;
  background: #F4F0E6;
  border: 2px solid var(--ink);
  border-radius: 6px;
}
.bot__arm--l { left: -10px; transform: rotate(-8deg); transform-origin: top center; animation: armSwayL 4s ease-in-out infinite; }
.bot__arm--r { right: -10px; transform: rotate(8deg); transform-origin: top center; animation: armSwayR 4s ease-in-out infinite; }
@keyframes armSwayL { 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(-14deg)} }
@keyframes armSwayR { 0%,100%{transform:rotate(8deg)}  50%{transform:rotate(14deg)}  }

.bot__shadow {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 10px;
  background: radial-gradient(ellipse, rgba(26,26,26,0.25), transparent 70%);
  animation: shadowPulse 4s ease-in-out infinite;
}
@keyframes shadowPulse {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.55; }
  50%      { transform: translateX(-50%) scale(0.85); opacity: 0.35; }
}

/* Speech bubble */
.mcp__bubble {
  position: relative;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: 18px;
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: -0.005em;
  max-width: 220px;
  text-align: center;
  box-shadow: 0 10px 30px -12px rgba(26,26,26,0.4);
  margin-top: 8px;
}
.mcp__bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  background: var(--ink);
  border-radius: 3px;
}
.mcp__bubble.is-pop {
  animation: bubblePop 420ms cubic-bezier(0.3, 1.4, 0.4, 1);
}
@keyframes bubblePop {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* TUNNEL (center) — bigger, sits between robot and board with breathing room */
.mcp__tunnel {
  position: absolute;
  left: 24%;
  right: 28%;
  top: 30%;
  transform: translateY(-50%);
  height: 260px;
  perspective: 900px;
  z-index: 2;
}
.mcp__tunnelLabel {
  position: absolute;
  left: 50%;
  top: -28px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--ink-muted);
  background: var(--bg);
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  z-index: 4;
}
.mcp__tunnelLabel span {
  display: inline-block;
  color: var(--accent);
  font-weight: 600;
}
.mcp__rings {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280px;
  height: 220px;
  margin-left: -140px;
  margin-top: -110px;
  border: 1.5px solid var(--ink);
  border-radius: 48%;
  transform: translateZ(calc(var(--i) * -90px)) scale(calc(1 - var(--i) * 0.09));
  opacity: calc(1 - var(--i) * 0.1);
  animation: ringPulse 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.2s);
}
.ring:nth-child(even) {
  border-color: var(--accent);
  opacity: calc(0.55 - var(--i) * 0.05);
}
@keyframes ringPulse {
  0%, 100% { border-width: 1px; }
  50%      { border-width: 2px; }
}

/* Particles flowing through the tunnel — bidirectional */
.mcp__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.mcp__particle {
  position: absolute;
  left: 0%;
  top: calc(50% + var(--py));
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--accent);
  transform: scale(var(--ps));
  animation: particleFlyLR var(--pd) linear infinite;
  animation-delay: var(--pdelay);
  opacity: 0.7;
}
/* Reverse-direction particles (return path) */
.mcp__particle--rl {
  background: #22D3EE;
  box-shadow: 0 0 6px #22D3EE;
  animation: particleFlyRL var(--pd) linear infinite;
  animation-delay: var(--pdelay);
}
@keyframes particleFlyLR {
  0%   { left: 0%;   opacity: 0; transform: scale(var(--ps)) translateX(0); }
  10%  { opacity: 0.85; }
  90%  { opacity: 0.85; }
  100% { left: 100%; opacity: 0; transform: scale(calc(var(--ps) * 1.4)); }
}
@keyframes particleFlyRL {
  0%   { left: 100%; opacity: 0; transform: scale(var(--ps)) translateX(0); }
  10%  { opacity: 0.85; }
  90%  { opacity: 0.85; }
  100% { left: 0%;   opacity: 0; transform: scale(calc(var(--ps) * 1.4)); }
}

/* TRAVELING CARD */
.mcp__traveler {
  position: absolute;
  left: 0; top: 0;
  width: 180px;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
  /* transform is set via JS */
}
.mcp__travelerInner {
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 12px 36px -12px rgba(26,26,26,0.5);
  position: relative;
}
.mcp__travelerInner::after {
  /* Glow behind card (in tunnel vibe) */
  content: "";
  position: absolute;
  inset: -6px;
  background: radial-gradient(ellipse, rgba(207,88,7,0.3), transparent 70%);
  border-radius: 16px;
  z-index: -1;
  filter: blur(8px);
}
.mcp__travelerPill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--accent);
  background: rgba(207,88,7,0.12);
  padding: 2px 7px;
  border-radius: 3px;
  margin-bottom: 6px;
}
.mcp__traveler.is-return .mcp__travelerPill {
  color: #0E8AA0;
  background: rgba(34,211,238,0.14);
}
.mcp__traveler.is-return .mcp__travelerPill::before {
  content: "DONE ";
}
.mcp__traveler.is-return .mcp__travelerPill {
  /* Hide the word TASK on return; content is prefixed above */
  font-size: 9px;
}
.mcp__travelerT {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink);
}

/* BOARD (right) — pulled right, away from gate */
.mcp__board {
  position: absolute;
  right: 1.5%;
  top: 36%;
  transform: translateY(-50%) perspective(700px) rotateY(-8deg);
  transform-origin: right center;
  width: 240px;
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  box-shadow: -20px 20px 60px -20px rgba(26,26,26,0.4);
  z-index: 3;
}
.mcp__boardTop {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  background: #F4F0E6;
  border-bottom: 1px solid var(--line);
}
.mcp__boardDot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(26,26,26,0.2);
}
.mcp__boardDot:nth-child(1) { background: #EF4444; }
.mcp__boardDot:nth-child(2) { background: #F59E0B; }
.mcp__boardDot:nth-child(3) { background: #22C55E; }
.mcp__boardTitle {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
}
.mcp__boardCols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--line);
  padding: 0;
  min-height: 240px;
}
.mcp__boardCol {
  background: #fff;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mcp__colHd {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.mcp__boardCard {
  background: #FBF8F1;
  border: 1px solid rgba(26,26,26,0.1);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 9.5px;
  line-height: 1.3;
  color: var(--ink);
  font-weight: 500;
}
.mcp__boardCard--ghost {
  background: rgba(207,88,7,0.08);
  border-color: rgba(207,88,7,0.3);
  color: var(--accent);
}
.mcp__boardCard--muted {
  opacity: 0.5;
  text-decoration: line-through;
}

/* Progress bar */
.mcp__progress {
  position: relative;
  width: min(720px, 90%);
  margin: 0 auto 32px;
  flex: 0 0 auto;
}
.mcp__progressTrack {
  position: relative;
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.mcp__progressFill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 120ms linear;
}
.mcp__progressSteps {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}
.mcp__progressSteps span {
  transition: color 200ms;
}
.mcp__progressSteps span.is-active {
  color: var(--accent);
  font-weight: 600;
}

/* ---- LABELS ---- */
.mcp__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--ink-soft);
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg);
}
.mcp__label--agent { color: var(--accent); border-color: rgba(207,88,7,0.35); }
.mcp__label--agentTop {
  color: var(--accent);
  border-color: rgba(207,88,7,0.35);
  margin-bottom: 6px;
}
.mcp__label--board {
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  color: #0E8AA0;
  border-color: rgba(34,211,238,0.35);
  white-space: nowrap;
}

/* ---- TUNNEL LABEL (upgraded) ---- */
.mcp__tunnelLabel {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mcp__tunnelLabelLock {
  font-size: 11px;
  filter: grayscale(0.2);
}

/* ---- GATEWAYS ---- */
.mcp__gate {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 36px;
  height: 200px;
}
.mcp__gate--l { left: -6px; }
.mcp__gate--r { right: -6px; }
.mcp__gateFrame {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(244, 240, 230, 0.7);
  backdrop-filter: blur(4px);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 16px -6px rgba(26,26,26,0.2);
}
.mcp__gateFrame::before,
.mcp__gateFrame::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px;
  height: 2px;
  background: var(--ink);
}
.mcp__gateFrame::before { top: 4px; }
.mcp__gateFrame::after  { bottom: 4px; }
.mcp__gateScan {
  position: absolute;
  left: 4px; right: 4px;
  top: 10%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 8px var(--accent);
  opacity: 0;
  transition: opacity 200ms;
}
.mcp__gate.is-scanning .mcp__gateScan {
  opacity: 1;
  animation: gateScan 0.9s linear infinite;
}
.mcp__gate.is-ok .mcp__gateFrame {
  border-color: #0E8AA0;
  background: rgba(34,211,238,0.08);
}
@keyframes gateScan {
  0%   { top: 8%; }
  100% { top: 88%; }
}
.mcp__gateLabel {
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%) rotate(-90deg);
  transform-origin: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.mcp__gateStatus {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%) rotate(-90deg);
  transform-origin: center;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.mcp__gateDot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(26,26,26,0.3);
}
.mcp__gate.is-scanning .mcp__gateDot {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  animation: dotPulse 0.8s ease-in-out infinite;
}
.mcp__gate.is-ok .mcp__gateDot {
  background: #22C55E;
  box-shadow: 0 0 6px #22C55E;
}
@keyframes dotPulse {
  50% { opacity: 0.4; }
}

/* ---- STREAM ARROWS (directional) ---- */
.mcp__stream {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent);
  opacity: 0;
  transition: opacity 200ms;
  pointer-events: none;
  z-index: 2;
}
.mcp__stream.is-active { opacity: 0.6; }
.mcp__stream--lr .mcp__arrow { animation: arrowPulseLR 0.9s ease-in-out infinite; }
.mcp__stream--rl .mcp__arrow { animation: arrowPulseRL 0.9s ease-in-out infinite; }
.mcp__stream .mcp__arrow:nth-child(2) { animation-delay: 0.15s; }
.mcp__stream .mcp__arrow:nth-child(3) { animation-delay: 0.3s; }
@keyframes arrowPulseLR {
  0%, 100% { opacity: 0.3; transform: translateX(-4px); }
  50%      { opacity: 1;   transform: translateX(4px); }
}
@keyframes arrowPulseRL {
  0%, 100% { opacity: 0.3; transform: translateX(4px); }
  50%      { opacity: 1;   transform: translateX(-4px); }
}

/* ---- TRAVELER: new RESULT variant ---- */
.mcp__travelerMeta {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-soft);
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.mcp__traveler.is-return .mcp__travelerPill {
  color: #0E8AA0;
  background: rgba(34,211,238,0.14);
}
.mcp__traveler.is-return .mcp__travelerInner {
  border-color: #0E8AA0;
}
.mcp__traveler.is-return .mcp__travelerInner::after {
  background: radial-gradient(ellipse, rgba(34,211,238,0.35), transparent 70%);
}

/* ---- LOG PANEL — sits centered under the MCP tunnel ---- */
.mcp__log {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 3%;
  transform: translateX(-50%);
  width: min(560px, 50%);
  background: #1A1A1A;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  font-family: var(--font-mono);
  color: #E6E6E6;
  box-shadow: 0 18px 40px -16px rgba(26,26,26,0.55);
  overflow: hidden;
  z-index: 6;
}
.mcp__logHead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #0F0F0F;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 10px;
  letter-spacing: 0.1em;
}
.mcp__logDot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  animation: dotPulse 1.2s ease-in-out infinite;
}
.mcp__logTitle { color: #B3B3B3; }
.mcp__logMeta {
  margin-left: auto;
  color: var(--accent);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.mcp__logBody {
  padding: 8px 14px;
  max-height: 110px;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.5;
}
.mcp__logLine {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: logLineIn 240ms ease-out;
  letter-spacing: 0.01em;
}
.mcp__logLine--dim   { color: rgba(255,255,255,0.35); }
.mcp__logLine--conn  { color: #A0A0A0; }
.mcp__logLine--auth  { color: #22C55E; }
.mcp__logLine--call  { color: #FFB26B; }
.mcp__logLine--policy{ color: #22D3EE; }
.mcp__logLine--ok    { color: #86EFAC; }
.mcp__logBullet {
  color: rgba(255,255,255,0.3);
  margin-right: 6px;
}
@keyframes logLineIn {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---- BOARD CARD STATES ---- */
.mcp__boardCard {
  position: relative;
  transition: background 240ms, border-color 240ms, color 240ms, transform 240ms;
}
.mcp__cardState {
  display: inline-block;
  width: 10px;
  margin-right: 4px;
  color: var(--accent);
  font-weight: 700;
}
.mcp__cardAttach {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  opacity: 0;
  transition: opacity 200ms;
}
.mcp__boardCard.is-running {
  background: rgba(255,178,107,0.12);
  border-color: rgba(255,178,107,0.45);
  color: var(--ink);
}
.mcp__boardCard.is-running::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border: 1.5px solid var(--accent);
  border-top-color: transparent;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: -1px;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.mcp__boardCard.is-attached {
  background: rgba(34,211,238,0.1);
  border-color: rgba(34,211,238,0.45);
}
.mcp__boardCard.is-done {
  background: rgba(34,197,94,0.12);
  border-color: rgba(34,197,94,0.5);
  color: #166534;
}
.mcp__boardCard.is-done .mcp__cardText {
  text-decoration: line-through;
  text-decoration-color: rgba(22,101,52,0.6);
}
.mcp__boardCard--new {
  opacity: 0;
  transform: translateY(-6px) scale(0.95);
  transition: opacity 300ms, transform 300ms cubic-bezier(0.3, 1.4, 0.4, 1);
}
.mcp__boardCard--new.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Responsive — vertical stack */
@media (max-width: 900px) {
  .mcp__scroll { height: 280vh; }
  .mcp__scene { padding: 12px 20px; }
  .mcp__head { padding: 28px 20px 0; }
  .mcp__robot,
  .mcp__board,
  .mcp__tunnel {
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .mcp__robot { top: 4%; }
  .mcp__tunnel {
    top: 42%;
    width: 80%;
    height: 160px;
    transform: translate(-50%, -50%);
  }
  .mcp__board {
    top: auto;
    bottom: 6%;
    transform: translateX(-50%) scale(0.85);
  }
  .ring { width: 180px; height: 140px; margin-left: -90px; margin-top: -70px; }
  .bot { transform: scale(0.75); }
  .mcp__bubble { max-width: 180px; font-size: 12px; padding: 8px 14px; }
  .mcp__progress { width: 85%; margin-bottom: 20px; }
  .mcp__progressSteps { font-size: 9px; }
}


/* ============================================================
   V22 OVERRIDES — nav login button + mobile polish
   ============================================================ */

/* Nav layout: brand left, links center, two buttons right */
.nav__cta-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.nav__login {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid rgba(20,30,24,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
  transition: background 150ms linear, border-color 150ms linear;
}
.nav__login:hover {
  background: rgba(255,255,255,0.85);
  border-color: rgba(20,30,24,0.32);
}
body[data-hero-bg="night"] .nav__login {
  color: #F2F0E9;
  border-color: rgba(242,240,233,0.28);
  background: rgba(18,26,34,0.4);
}
body[data-hero-bg="night"] .nav__login:hover {
  background: rgba(18,26,34,0.65);
  border-color: rgba(242,240,233,0.5);
}

/* Tablet & phone — collapse links, keep nav balanced */
@media (max-width: 860px) {
  .nav__cta-group { gap: 8px; }
}
@media (max-width: 600px) {
  /* Single-column kanban landing */
  .klm__board { grid-template-columns: 1fr !important; gap: 28px; }
  .kcol__sticky { position: static; }

  /* Nav — drop the login button on tiny screens, keep the clay CTA */
  .nav__login { display: none; }
  .nav__brand img { height: 30px; }
  .nav { padding: 16px 18px; }

  /* Hero copy gets full width */
  .hero { padding: 48px 20px 0; }
}

/* MCP scene — phone widths drop the scroll-pin and stack the scene as a
   vertical pipeline that reads top-down: board → POLICY gate → tunnel →
   AUTH gate → robot → activity log. Gates flip from vertical (desktop side
   rails) to horizontal bands at the tunnel's ends, so they sit between the
   data flow and each endpoint — POLICY between board and tunnel, AUTH
   between tunnel and robot. */
@media (max-width: 700px) {
  .mcp__scroll { display: none; }
  .mcp__stage {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    padding-bottom: 32px;
  }
  .mcp__scene {
    position: relative;
    transform: none;
    padding: 16px 16px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    overflow: visible;
  }

  /* DOM order is robot → tunnel → board → log. Reorder for top-down read:
     board first, tunnel second, robot third, log fourth. */
  .mcp__board    { order: 1; }
  .mcp__tunnel   { order: 2; }
  .mcp__robot    { order: 3; }
  .mcp__log      { order: 4; }

  .mcp__board {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: 320px;
  }
  .mcp__boardCols { gap: 6px; }
  .mcp__boardCard { font-size: 11px; }

  .mcp__tunnel {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    width: 240px;
    max-width: 100%;
    height: 200px;
    perspective: none;
    margin-top: 18px;
  }
  .ring { width: 180px; height: 130px; margin-left: -90px; margin-top: -65px; }
  .mcp__tunnelLabel { display: none; }

  /* Stream arrows rotate to point top-down through the tunnel. */
  .mcp__stream {
    left: 50%;
    right: auto;
    top: 12%;
    bottom: 12%;
    transform: translateX(-50%) rotate(90deg);
    transform-origin: center;
    width: 80px;
  }

  /* Gates become horizontal scanner bands at the tunnel's top/bottom edges.
     POLICY (gate--r) sits at the top — between board and the data flow.
     AUTH (gate--l) sits at the bottom — between the data flow and robot. */
  .mcp__gate {
    width: calc(100% + 12px);
    height: 26px;
    left: -6px;
    right: auto;
    transform: none;
  }
  .mcp__gate--r { top: -6px; bottom: auto; }
  .mcp__gate--l { top: auto; bottom: -6px; }
  .mcp__gateFrame {
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
  }
  .mcp__gateFrame::before,
  .mcp__gateFrame::after {
    left: auto; right: auto;
    top: 2px; bottom: 2px;
    height: auto;
    width: 2px;
  }
  .mcp__gateFrame::before { left: 4px; bottom: auto; top: 2px; height: calc(100% - 4px); width: 2px; }
  .mcp__gateFrame::after  { right: 4px; top: 2px; bottom: auto; height: calc(100% - 4px); width: 2px; }
  .mcp__gateScan {
    left: 8%; right: 8%;
    top: 50%;
    height: 3px;
    transform: translateY(-50%);
  }
  .mcp__gate.is-scanning .mcp__gateScan {
    animation: gateScanH 1.1s linear infinite;
  }
  @keyframes gateScanH {
    0%   { left: 8%;  right: 84%; }
    100% { left: 84%; right: 8%; }
  }
  .mcp__gateLabel {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    font-size: 9px;
    letter-spacing: 0.24em;
  }
  .mcp__gateStatus {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    font-size: 8px;
    gap: 5px;
  }

  .mcp__robot {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: auto;
    margin: 0;
  }
  .bot { transform: scale(0.5); transform-origin: top center; margin-bottom: -82px; }
  .mcp__bubble { max-width: 220px; font-size: 12px; padding: 8px 12px; margin-top: 4px; }

  .mcp__log {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: 320px;
  }
  .mcp__logBody { max-height: 120px; font-size: 11px; line-height: 1.6; }

  .mcp__progress {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0 16px 8px;
  }
  .mcp__progressSteps { font-size: 9px; }
}
@media (max-width: 480px) {
  .hero__title { font-size: clamp(40px, 11vw, 64px); }
  .hero__lede { font-size: 15px; }
  .surf__device--watch { transform: scale(0.85); }
  .surf__device--phone { transform: scale(0.9); }
  .klm { padding: 80px 20px 100px; }
  .cta { padding: 80px 20px 100px; }
  .cta__t { font-size: clamp(32px, 9vw, 48px); }
}

/* ============================================================
   V22 HERO — frosted glass card with chip labels
   ============================================================ */
.hero {
  display: block !important;
  grid-template-columns: none !important;
  margin: 40px auto 100px;
  min-height: 70vh;
  max-width: var(--maxw, 1280px);
  padding: 0 32px;
}
.heroGrid {
  display: grid;
  grid-template-columns: minmax(380px, 480px) minmax(0, 1fr);
  gap: 36px;
  align-items: stretch;
}
@media (max-width: 980px) {
  .heroGrid { grid-template-columns: 1fr; gap: 28px; }
}
.heroCard {
  max-width: none;
  padding: 44px 36px 40px;
  background: rgba(247, 244, 237, 0.5);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 24px;
  box-shadow:
    0 24px 60px -22px rgba(20,30,24,0.4),
    inset 0 1px 0 rgba(255,255,255,0.6);
  position: relative;
}
.heroCard .hero__title {
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1.04;
  margin: 0 0 22px;
  letter-spacing: -0.04em;
}
.heroCard .hero__lede {
  font-size: 17px;
  line-height: 1.55;
  margin: 0 0 32px;
  max-width: 520px;
  color: rgba(20,30,24,0.78);
}

/* Chip row — 4 category labels */
.chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 32px;
  max-width: 480px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.chip svg { width: 16px; height: 16px; flex-shrink: 0; stroke-width: 2; }
.chip--voice   { background: rgba(229,196,212,0.55); border-color: rgba(229,196,212,0.85); color: #6F2A4D; }
.chip--humans  { background: rgba(229,196,132,0.55); border-color: rgba(229,196,132,0.85); color: #6B4A14; }
.chip--control { background: rgba(178,211,192,0.6);  border-color: rgba(178,211,192,0.9);  color: #1F4F35; }
.chip--eu      { background: rgba(170,198,232,0.55); border-color: rgba(170,198,232,0.85); color: #1F3D6B; }

.heroCard__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  background: transparent;
  color: var(--accent, #CF5807);
  border: 2px solid var(--accent, #CF5807);
  text-decoration: none;
  transition: background 150ms linear, color 150ms linear, transform 150ms linear, box-shadow 150ms linear;
}
.heroCard__cta:hover {
  background: var(--accent, #CF5807);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 18px 40px -12px rgba(207,88,7,0.55);
}
.heroCard__cta svg { width: 18px; height: 18px; stroke: currentColor; }
.heroCard__cta em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  /* color inherits from the button — stays orange (or white on hover) */
}

/* Night-mode card */
body[data-hero-bg="night"] .heroCard {
  background: rgba(20, 30, 26, 0.5);
  border-color: rgba(255,255,255,0.18);
  box-shadow:
    0 30px 80px -22px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
body[data-hero-bg="night"] .heroCard .hero__title { color: #F2F0E9; }
body[data-hero-bg="night"] .heroCard .hero__lede  { color: rgba(242,240,233,0.78); text-shadow: none; }
/* Keep chip pastels readable on the dark glass — pump opacity + lighten text */
body[data-hero-bg="night"] .chip--voice   { background: rgba(229,196,212,0.22); border-color: rgba(229,196,212,0.45); color: #F2C5DA; }
body[data-hero-bg="night"] .chip--humans  { background: rgba(229,196,132,0.22); border-color: rgba(229,196,132,0.45); color: #F2D793; }
body[data-hero-bg="night"] .chip--control { background: rgba(178,211,192,0.22); border-color: rgba(178,211,192,0.45); color: #B5E3CA; }
body[data-hero-bg="night"] .chip--eu      { background: rgba(170,198,232,0.22); border-color: rgba(170,198,232,0.45); color: #B7D5F1; }

@media (max-width: 720px) {
  .heroCard { padding: 36px 24px 32px; max-width: 100%; }
  .heroCard .hero__title { font-size: clamp(38px, 9.5vw, 56px); }
  .heroCard .hero__lede { font-size: 16px; }
  .chips { max-width: 100%; }
}
@media (max-width: 420px) {
  .chips { grid-template-columns: 1fr; }
}

/* ============================================================
   V22 FLOW — Everything is a card. 3 horizontal blocks.
   Tasks left, board animation right.
   ============================================================ */
.flow {
  position: relative;
  z-index: 2;
  background: var(--bg, #F7F4ED);
  padding: 120px 32px 140px;
  border-top: 1px solid var(--line, #E5E1D6);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  margin-top: -20px;
}
.flow__head {
  max-width: 1200px;
  margin: 0 auto 96px;
  text-align: center;
}
.flow__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--clay);
  margin-bottom: 18px;
}
.flow__h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--ink);
}
.flow__h2 em {
  font-family: 'Big Shoulders Display', 'Oswald', sans-serif;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px var(--clay, #CF5807);
  paint-order: stroke fill;
  letter-spacing: 0.005em;
  display: inline-block;
}
.flow__sub {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  color: rgba(20,30,24,0.65);
  margin: 18px auto 0;
  max-width: 640px;
}

.flow__row {
  display: grid;
  grid-template-columns: 0.55fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto 130px;
}
.flow__row:last-child { margin-bottom: 0; }
.flow__num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--clay);
  margin-bottom: 14px;
}
.flow__taskcard {
  background: #FFFFFF;
  border: 1px solid rgba(20,30,24,0.08);
  border-radius: 14px;
  padding: 18px 22px 22px;
  box-shadow: 0 14px 30px -16px rgba(20,30,24,0.25);
  max-width: 380px;
}
.flow__pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-bottom: 6px;
}
.flow__pill--write  { background: rgba(207,88,7,0.12);   color: #B04E04; }
.flow__pill--send   { background: rgba(34,197,94,0.12);  color: #177D3C; }
.flow__pill--review { background: rgba(34,211,238,0.14); color: #0E8AA0; }
.flow__pill--ctx    { background: rgba(207,88,7,0.12);   color: #B04E04; }
.flow__pill--split  { background: rgba(187,123,154,0.18); color: #6F2A4D; }
.flow__pill--hand   { background: rgba(34,211,238,0.14); color: #0E8AA0; }
.flow__taskBody strong { font-weight: 700; color: var(--ink, #1A2A20); }
.flow__taskTitle {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 14px 0 6px;
}
.flow__taskBody {
  font-family: var(--font-sans);
  font-size: 16px;
  color: rgba(20,30,24,0.65);
  margin: 0;
}
.flow__viz {
  background: linear-gradient(180deg, #FCFAF4 0%, #F2EDE0 100%);
  border: 1px solid rgba(20,30,24,0.06);
  border-radius: 22px;
  height: 380px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 22px 50px -28px rgba(20,30,24,0.28);
}

@media (max-width: 860px) {
  .flow__row { grid-template-columns: 1fr; gap: 36px; margin-bottom: 80px; }
  .flow__viz { height: 320px; }
  .flow__taskTitle { font-size: 28px; }
  .flow { padding: 80px 20px 100px; }
  .flow__head { margin-bottom: 60px; }
}

/* ============================================================
   FLOW VIZ #1 — WRITE: capture sources funnel into a board card
   ============================================================ */
.vw {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.vw__src {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: rgba(20,30,24,0.6);
  animation: vwPulse 4s ease-in-out infinite;
}
.vw__src svg { width: 26px; height: 26px; padding: 10px; background: #FFFFFF; border-radius: 50%; box-shadow: 0 8px 20px -10px rgba(20,30,24,0.25); border: 1px solid rgba(20,30,24,0.06); }
.vw__src--mic  { left: 16%; top: 18%; color: #CF5807; animation-delay: 0s; }
.vw__src--key  { left: 12%; bottom: 22%; color: #1F4F35; animation-delay: 1.3s; }
.vw__src--mail { right: 14%; top: 24%; color: #1F3D6B; animation-delay: 2.6s; }
@keyframes vwPulse {
  0%, 16%   { transform: scale(0.95); opacity: 0.5; }
  18%, 30%  { transform: scale(1.1);  opacity: 1; }
  35%, 100% { transform: scale(0.95); opacity: 0.5; }
}
.vw__board {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(20,30,24,0.08);
  border-radius: 12px;
  padding: 14px 16px;
  width: 200px;
  box-shadow: 0 18px 40px -16px rgba(20,30,24,0.3);
  z-index: 2;
}
.vw__hd {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(20,30,24,0.45);
  margin-bottom: 8px;
}
.vw__card {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  padding: 8px 10px;
  border: 1px solid rgba(20,30,24,0.08);
  border-radius: 8px;
  background: #FCFAF4;
  animation: vwCardSwap 4s ease-in-out infinite;
}
@keyframes vwCardSwap {
  0%, 14%   { opacity: 0; transform: translateY(8px) scale(0.95); }
  18%, 33%  { opacity: 1; transform: translateY(0) scale(1); }
  35%, 100% { opacity: 0.6; transform: translateY(0) scale(1); }
}
/* Streaming dotted lines from sources to board */
.vw__beam {
  position: absolute;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--clay, #CF5807) 0 4px, transparent 4px 10px);
  opacity: 0.5;
  z-index: 1;
}
.vw__beam--mic  { top: 30%; left: 24%; width: 25%; transform: rotate(8deg); }
.vw__beam--key  { bottom: 32%; left: 22%; width: 26%; transform: rotate(-12deg); }
.vw__beam--mail { top: 33%; right: 22%; width: 26%; transform: rotate(-8deg); }

/* ============================================================
   FLOW VIZ #2 — SEND: card flies from YOU to AGENTS column
   ============================================================ */
.vs {
  position: absolute; inset: 24px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.vs__col {
  background: #FFFFFF;
  border: 1px solid rgba(20,30,24,0.08);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 12px 30px -16px rgba(20,30,24,0.2);
}
.vs__hd {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(20,30,24,0.55);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(20,30,24,0.06);
}
.vs__dot { width: 8px; height: 8px; border-radius: 50%; }
.vs__dot--you { background: #3B82F6; }
.vs__dot--ai  { background: #22D3EE; box-shadow: 0 0 0 0 rgba(34,211,238,0.6); animation: vsAi 2s ease-in-out infinite; }
@keyframes vsAi {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(34,211,238,0); }
}
.vs__card {
  background: #FCFAF4;
  border: 1px solid rgba(20,30,24,0.08);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.vs__slot {
  height: 56px;
  border: 1.5px dashed rgba(34,211,238,0.5);
  border-radius: 8px;
}
.vs__flyer {
  position: absolute;
  left: 24px; top: 60px;
  width: calc(50% - 34px);
  background: #FFFFFF;
  border: 1px solid rgba(34,211,238,0.6);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 14px 30px -12px rgba(34,211,238,0.35);
  animation: vsFly 4.5s ease-in-out infinite;
  z-index: 3;
}
.vs__pill {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(34,211,238,0.14);
  color: #0E8AA0;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-right: 8px;
}
@keyframes vsFly {
  0%, 18%  { transform: translate(0, 0)               scale(1)    rotate(0); opacity: 1; }
  45%      { transform: translate(110%, 60px)         scale(1.05) rotate(3deg); opacity: 1; }
  60%, 80% { transform: translate(110%, 60px)         scale(1)    rotate(0); opacity: 1; }
  85%, 100%{ transform: translate(110%, 60px)         scale(1)    rotate(0); opacity: 0; }
}

/* ============================================================
   FLOW VIZ #3 — REVIEW: AI completes, approve / roll back appears
   ============================================================ */
.vr {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.vr__card {
  width: min(82%, 360px);
  background: #FFFFFF;
  border: 1px solid rgba(20,30,24,0.08);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 18px 40px -18px rgba(20,30,24,0.3);
}
.vr__pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(34,211,238,0.14);
  color: #0E8AA0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-bottom: 10px;
}
.vr__t {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 10px;
}
.vr__bar {
  height: 6px;
  background: rgba(20,30,24,0.06);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.vr__fill {
  height: 100%;
  background: linear-gradient(90deg, #22D3EE, #0EA5E9);
  border-radius: 3px;
  width: 0;
  animation: vrFill 5s ease-in-out infinite;
}
@keyframes vrFill {
  0%       { width: 0; }
  50%      { width: 100%; }
  100%     { width: 100%; }
}
.vr__status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(20,30,24,0.55);
  margin-bottom: 14px;
  animation: vrStatus 5s linear infinite;
}
@keyframes vrStatus {
  0%, 45%   { content: "AI working…"; color: #0E8AA0; }
  50%, 100% { color: #177D3C; }
}
.vr__btns {
  display: flex; gap: 8px;
  opacity: 0;
  animation: vrBtns 5s ease-in-out infinite;
}
@keyframes vrBtns {
  0%, 48%   { opacity: 0; transform: translateY(8px); }
  56%, 100% { opacity: 1; transform: translateY(0); }
}
.vr__btn {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid rgba(20,30,24,0.1);
  border-radius: 10px;
  background: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  cursor: default;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.vr__btn--yes { background: #1F4F35; color: #FFFFFF; border-color: #1F4F35; }
.vr__btn--no  { color: rgba(20,30,24,0.7); }

/* ============================================================
   HERO MINI-KANBAN — the money shot. Shows what Todokan IS.
   4 columns (Backlog / Doing / Review / Done) with real cards
   featuring AI assignees, progress bars, approve/reject states.
   ============================================================ */
.heroBoard {
  background: rgba(247, 244, 237, 0.55);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 24px;
  box-shadow:
    0 24px 60px -22px rgba(20,30,24,0.4),
    inset 0 1px 0 rgba(255,255,255,0.6);
  padding: 18px 18px 22px;
  position: relative;
  overflow: hidden;
}
body[data-hero-bg="night"] .heroBoard {
  background: rgba(20,30,26,0.55);
  border-color: rgba(255,255,255,0.18);
  box-shadow:
    0 30px 80px -22px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
.hb__top {
  display: flex; align-items: center; gap: 12px;
  padding: 0 4px 14px;
  border-bottom: 1px solid rgba(20,30,24,0.08);
  margin-bottom: 14px;
}
body[data-hero-bg="night"] .hb__top { border-bottom-color: rgba(255,255,255,0.1); }
.hb__dots { display: inline-flex; gap: 6px; }
.hb__dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(20,30,24,0.18); }
.hb__dots span:nth-child(1) { background: #E35D4B; }
.hb__dots span:nth-child(2) { background: #E6B94E; }
.hb__dots span:nth-child(3) { background: #6BBF69; }
.hb__title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink, #1A2A20);
}
body[data-hero-bg="night"] .hb__title { color: #F2F0E9; }
.hb__url {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(20,30,24,0.45);
}
body[data-hero-bg="night"] .hb__url { color: rgba(242,240,233,0.5); }

.hb__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.hb__col {
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(20,30,24,0.06);
  border-radius: 12px;
  padding: 10px 8px 12px;
  min-height: 280px;
  display: flex; flex-direction: column; gap: 8px;
}
body[data-hero-bg="night"] .hb__col {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.hb__hd {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(20,30,24,0.6);
  padding: 0 2px 8px;
  border-bottom: 1px solid rgba(20,30,24,0.06);
}
body[data-hero-bg="night"] .hb__hd { color: rgba(242,240,233,0.7); border-bottom-color: rgba(255,255,255,0.08); }
.hb__dot { width: 7px; height: 7px; border-radius: 50%; }
.hb__dot--gray   { background: #8A9A8F; }
.hb__dot--cyan   { background: #22D3EE; box-shadow: 0 0 0 0 rgba(34,211,238,0.6); animation: hbPulse 2s ease-in-out infinite; }
.hb__dot--yellow { background: #F59E0B; }
.hb__dot--green  { background: #22C55E; }
@keyframes hbPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(34,211,238,0.5); } 50% { box-shadow: 0 0 0 4px rgba(34,211,238,0); } }
.hb__cnt {
  margin-left: auto;
  background: rgba(20,30,24,0.08);
  color: rgba(20,30,24,0.6);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
}
body[data-hero-bg="night"] .hb__cnt { background: rgba(255,255,255,0.08); color: rgba(242,240,233,0.6); }

.hb__card {
  background: #FFFFFF;
  border: 1px solid rgba(20,30,24,0.08);
  border-radius: 8px;
  padding: 8px 10px 10px;
  box-shadow: 0 4px 10px -6px rgba(20,30,24,0.18);
}
body[data-hero-bg="night"] .hb__card {
  background: #1F2937;
  border-color: rgba(255,255,255,0.08);
  color: #F2F0E9;
}
.hb__card--ai     { border-color: rgba(34,211,238,0.5); box-shadow: 0 6px 14px -8px rgba(34,211,238,0.35); }
.hb__card--done   { opacity: 0.85; }
.hb__cardTitle {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink, #1A2A20);
  margin-bottom: 6px;
}
body[data-hero-bg="night"] .hb__cardTitle { color: #F2F0E9; }
.hb__pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 2px 5px;
  border-radius: 4px;
  margin-bottom: 4px;
}
.hb__pill--managed { background: rgba(34,211,238,0.14); color: #0E8AA0; }
.hb__cardMeta {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: rgba(20,30,24,0.6);
}
body[data-hero-bg="night"] .hb__cardMeta { color: rgba(242,240,233,0.65); }
.hb__avatar {
  width: 16px; height: 16px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #FFFFFF;
}
.hb__avatar--you    { background: #3B82F6; }
.hb__avatar--claude { background: #C77859; font-size: 10px; }
.hb__avatar--gpt    { background: #10A37F; font-size: 10px; }
.hb__avatar--cursor { background: #1F2937; font-size: 10px; }
.hb__status { letter-spacing: 0.06em; }

.hb__bar {
  height: 4px;
  background: rgba(20,30,24,0.08);
  border-radius: 2px;
  overflow: hidden;
  margin: 6px 0 6px;
}
body[data-hero-bg="night"] .hb__bar { background: rgba(255,255,255,0.08); }
.hb__barFill {
  height: 100%;
  background: linear-gradient(90deg, #22D3EE, #0EA5E9);
  border-radius: 2px;
  width: 0;
  animation: hbProgress 5s ease-in-out infinite;
}
@keyframes hbProgress {
  0%   { width: 0;   }
  60%  { width: 92%; }
  100% { width: 92%; }
}

.hb__actions {
  display: flex; gap: 4px;
  margin-top: 8px;
  width: 100%;
  min-width: 0;
}
.hb__btn {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 4px 3px;
  border-radius: 5px;
  text-align: center;
  border: 1px solid rgba(20,30,24,0.1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}
.hb__btn--yes { background: #1F4F35; color: #FFFFFF; border-color: #1F4F35; }
.hb__btn--no  { color: rgba(20,30,24,0.6); background: transparent; }
body[data-hero-bg="night"] .hb__btn--no { color: rgba(242,240,233,0.65); border-color: rgba(255,255,255,0.18); }
.hb__card--review { border-color: rgba(245,158,11,0.4); }
.hb__check { margin-left: auto; color: #22C55E; font-weight: 700; }

/* Mobile: show only 2 cols visible (rest scrolls) */
@media (max-width: 720px) {
  .heroBoard { padding: 14px 12px 18px; }
  .hb__cols { grid-template-columns: repeat(4, minmax(140px, 1fr)); overflow-x: auto; padding-bottom: 6px; }
  .hb__col { min-height: 240px; }
}

/* ============================================================
   RULES — 4 protection states as a horizontal card grid.
   Sits between the FLOW section and the MCP tunnel.
   ============================================================ */
.rules {
  position: relative;
  z-index: 2;
  background: var(--bg, #F7F4ED);
  padding: 100px 32px 120px;
  border-top: 1px solid rgba(20,30,24,0.06);
}
.rules__head {
  max-width: 1200px;
  margin: 0 auto 56px;
  text-align: center;
}
.rules__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--clay, #CF5807);
  margin-bottom: 14px;
}
.rules__h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  color: var(--ink);
}
.rules__h2 em {
  font-family: 'Big Shoulders Display', 'Oswald', sans-serif;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px var(--clay, #CF5807);
  paint-order: stroke fill;
  letter-spacing: 0.005em;
  display: inline-block;
}
.rules__sub {
  font-family: var(--font-sans);
  font-size: 16px;
  color: rgba(20,30,24,0.6);
  margin: 0;
  max-width: 600px;
  margin: 0 auto;
}
.rules__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
}
.ruleCard {
  background: #FFFFFF;
  border: 1px solid rgba(20,30,24,0.08);
  border-radius: 16px;
  padding: 22px 22px 24px;
  box-shadow: 0 14px 30px -16px rgba(20,30,24,0.2);
  border-top: 4px solid;
}
.ruleCard--protected { border-top-color: #EF4444; }
.ruleCard--readonly  { border-top-color: #F59E0B; }
.ruleCard--managed   { border-top-color: #22D3EE; }
.ruleCard--open      { border-top-color: #22C55E; }

.ruleCard__pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 4px 8px;
  border-radius: 5px;
  margin-bottom: 14px;
}
.ruleCard--protected .ruleCard__pill { background: rgba(239,68,68,0.12);  color: #B33030; }
.ruleCard--readonly  .ruleCard__pill { background: rgba(245,158,11,0.14); color: #9A6305; }
.ruleCard--managed   .ruleCard__pill { background: rgba(34,211,238,0.14); color: #0E8AA0; }
.ruleCard--open      .ruleCard__pill { background: rgba(34,197,94,0.14);  color: #177D3C; }

.ruleCard__t {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink, #1A2A20);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.ruleCard__b {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(20,30,24,0.65);
  margin: 0;
}

@media (max-width: 980px) {
  .rules__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 600px) {
  .rules { padding: 70px 20px 90px; }
  .rules__grid { grid-template-columns: 1fr; }
  .rules__head { margin-bottom: 40px; }
  .ruleCard__t { font-size: 20px; }
}

/* ============================================================
   COLLAB — Team permissions. Mirrors .rules layout.
   ============================================================ */
.collab {
  position: relative;
  z-index: 2;
  background: var(--bg, #F7F4ED);
  padding: 100px 32px 120px;
  border-top: 1px solid rgba(20,30,24,0.06);
}
.collab__head {
  max-width: 1200px;
  margin: 0 auto 56px;
  text-align: center;
}
.collab__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--clay, #CF5807);
  margin-bottom: 14px;
}
.collab__h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  color: var(--ink);
}
.collab__h2 em {
  font-family: 'Big Shoulders Display', 'Oswald', sans-serif;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px var(--clay, #CF5807);
  paint-order: stroke fill;
  letter-spacing: 0.005em;
  display: inline-block;
}
.collab__sub {
  font-family: var(--font-sans);
  font-size: 16px;
  color: rgba(20,30,24,0.6);
  margin: 0 auto;
  max-width: 640px;
}
.collab__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
}
.collabCard {
  background: #FFFFFF;
  border: 1px solid rgba(20,30,24,0.08);
  border-radius: 16px;
  padding: 22px 22px 24px;
  box-shadow: 0 14px 30px -16px rgba(20,30,24,0.2);
  border-top: 4px solid;
}
.collabCard--invite  { border-top-color: #CF5807; }
.collabCard--grants  { border-top-color: #F59E0B; }
.collabCard--roles   { border-top-color: #2E4036; }
.collabCard--airules { border-top-color: #22D3EE; }

.collabCard__pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 4px 8px;
  border-radius: 5px;
  margin-bottom: 14px;
}
.collabCard--invite  .collabCard__pill { background: rgba(207,88,7,0.14);   color: #A8460B; }
.collabCard--grants  .collabCard__pill { background: rgba(245,158,11,0.14); color: #9A6305; }
.collabCard--roles   .collabCard__pill { background: rgba(46,64,54,0.12);   color: #2E4036; }
.collabCard--airules .collabCard__pill { background: rgba(34,211,238,0.14); color: #0E8AA0; }

.collabCard__t {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink, #1A2A20);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.collabCard__b {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(20,30,24,0.65);
  margin: 0;
}

@media (max-width: 980px) {
  .collab__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 600px) {
  .collab { padding: 70px 20px 90px; }
  .collab__grid { grid-template-columns: 1fr; }
  .collab__head { margin-bottom: 40px; }
  .collabCard__t { font-size: 20px; }
}

/* ============================================================
   FLOW VIZ #1 — CONTEXT MANAGEMENT
   A task card with goal, scope, attachments visibly pinned.
   ============================================================ */
.vctx { position: absolute; inset: 20px; display: flex; align-items: center; justify-content: center; }
.vctx__card {
  background: #FFFFFF;
  border: 1px solid rgba(20,30,24,0.08);
  border-radius: 12px;
  padding: 14px 16px 16px;
  width: min(82%, 360px);
  box-shadow: 0 18px 40px -18px rgba(20,30,24,0.3);
  font-family: var(--font-sans);
}
.vctx__pillRow { display: flex; gap: 6px; margin-bottom: 10px; }
.vctx__pill {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.vctx__pill--managed { background: rgba(34,211,238,0.14); color: #0E8AA0; }
.vctx__pill--label   { background: rgba(20,30,24,0.06);   color: rgba(20,30,24,0.6); letter-spacing: 0.04em; }
.vctx__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 12px;
}
.vctx__sect { margin-bottom: 10px; }
.vctx__sectLbl {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--clay, #CF5807);
  margin-bottom: 4px;
}
.vctx__sect p {
  font-size: 12px;
  color: rgba(20,30,24,0.7);
  line-height: 1.4;
  margin: 0;
}
.vctx__sect ul {
  list-style: none; margin: 0; padding: 0;
  font-size: 12px;
  color: rgba(20,30,24,0.7);
  line-height: 1.55;
}
.vctx__sect li { display: flex; align-items: center; gap: 6px; }
.vctx__chk { width: 12px; color: #1F4F35; font-weight: 700; }
.vctx__chk--no { color: rgba(20,30,24,0.35); }
.vctx__refs { display: flex; gap: 6px; flex-wrap: wrap; }
.vctx__ref {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(20,30,24,0.65);
  padding: 3px 7px;
  background: rgba(20,30,24,0.04);
  border-radius: 4px;
}
/* The "AI pull" beam — animated highlight running down the card */
.vctx__beam {
  position: absolute;
  top: 12%; bottom: 12%;
  right: -2%;
  width: 3px;
  background: linear-gradient(180deg, transparent, #CF5807, transparent);
  border-radius: 2px;
  opacity: 0;
  animation: vctxBeam 4s ease-in-out infinite;
}
.vctx__pull {
  position: absolute;
  right: 14px;
  bottom: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--clay, #CF5807);
  background: rgba(207,88,7,0.08);
  border: 1px solid rgba(207,88,7,0.25);
  padding: 4px 8px;
  border-radius: 6px;
  animation: vctxPull 4s ease-in-out infinite;
}
@keyframes vctxBeam {
  0%, 30%   { opacity: 0; transform: translateY(0); }
  40%, 70%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; transform: translateY(0); }
}
@keyframes vctxPull {
  0%, 30%   { opacity: 0; transform: translateY(4px); }
  40%, 80%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; transform: translateY(0); }
}

/* ============================================================
   FLOW VIZ #2 — TASK SPLITTING
   Big parent card splits into 3 child cards.
   ============================================================ */
.vsplit {
  position: absolute; inset: 24px;
  display: flex; flex-direction: column; gap: 0;
}
.vsplit__parent {
  align-self: center;
  background: #FFFFFF;
  border: 1px solid rgba(20,30,24,0.08);
  border-radius: 10px;
  padding: 12px 18px;
  box-shadow: 0 14px 30px -16px rgba(20,30,24,0.28);
  font-family: var(--font-sans);
  text-align: center;
  width: min(70%, 280px);
  margin-bottom: 6px;
  animation: vsplitParent 5s ease-in-out infinite;
}
.vsplit__parentT { font-size: 14px; font-weight: 700; color: var(--ink); }
.vsplit__parentS { font-size: 11px; color: rgba(20,30,24,0.55); margin-top: 4px; font-family: var(--font-mono); letter-spacing: 0.08em; }
@keyframes vsplitParent {
  0%, 25%   { transform: scale(1); opacity: 1; }
  35%, 60%  { transform: scale(0.95); opacity: 0.65; }
  70%, 100% { transform: scale(1); opacity: 1; }
}
.vsplit__lines {
  width: 100%;
  height: 50px;
  stroke: rgba(207,88,7,0.5);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 4 4;
  stroke-dashoffset: 0;
  animation: vsplitLines 5s linear infinite;
}
@keyframes vsplitLines {
  0%, 25%   { opacity: 0; stroke-dashoffset: 30; }
  40%, 75%  { opacity: 1; stroke-dashoffset: 0; }
  100%      { opacity: 0.4; stroke-dashoffset: 0; }
}
.vsplit__children {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: -6px;
}
.vsplit__child {
  background: #FFFFFF;
  border: 1px solid rgba(20,30,24,0.08);
  border-radius: 8px;
  padding: 10px 8px 12px;
  text-align: center;
  box-shadow: 0 6px 16px -10px rgba(20,30,24,0.22);
  animation: vsplitChild 5s ease-in-out infinite;
}
.vsplit__child:nth-child(1) { animation-delay: 0.1s; }
.vsplit__child:nth-child(2) { animation-delay: 0.25s; }
.vsplit__child:nth-child(3) { animation-delay: 0.4s; }
.vsplit__chPill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 2px 6px;
  background: rgba(187,123,154,0.18);
  color: #6F2A4D;
  border-radius: 4px;
  margin-bottom: 6px;
}
.vsplit__chPill--human    { background: rgba(59,130,246,0.16); color: #1D4ED8; }
.vsplit__chPill--research { background: rgba(199,120,89,0.18); color: #8B3F1F; }
.vsplit__chPill--qa       { background: rgba(16,163,127,0.16); color: #0E6B53; }
.vsplit__chT {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.vsplit__chAvatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-top: 8px;
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
}
.vsplit__chAvatar--human  { background: #3B82F6; }
.vsplit__chAvatar--claude { background: #C77859; }
.vsplit__chAvatar--gpt    { background: #10A37F; }
.vsplit__child--human { border-color: rgba(59,130,246,0.3); }
.vsplit__child--ai    { border-color: rgba(199,120,89,0.3); }
@keyframes vsplitChild {
  0%, 30%   { opacity: 0; transform: translateY(-12px) scale(0.9); }
  50%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mobile polish — phone widths get tighter type and avatars so the 3 owners
   sit comfortably side-by-side without pill wrapping. */
@media (max-width: 600px) {
  .vsplit { inset: 16px; }
  .vsplit__parent { width: min(85%, 260px); padding: 10px 14px; }
  .vsplit__parentT { font-size: 13px; }
  .vsplit__parentS { font-size: 10px; }
  .vsplit__lines { height: 28px; }
  .vsplit__children { gap: 6px; }
  .vsplit__child { padding: 8px 4px 10px; }
  .vsplit__chPill { font-size: 8px; padding: 2px 4px; letter-spacing: 0.12em; }
  .vsplit__chT { font-size: 11px; line-height: 1.2; }
  .vsplit__chAvatar { width: 18px; height: 18px; font-size: 10px; margin-top: 6px; }
}

/* ============================================================
   FLOW VIZ #3 — SEND TO AI
   Source card with [Send to AI] button → DOING column with progress.
   ============================================================ */
.vsend {
  position: absolute; inset: 22px;
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 8px;
  align-items: center;
}
.vsend__src, .vsend__dst {
  background: rgba(255,255,255,0.55);
  border: 1px dashed rgba(20,30,24,0.18);
  border-radius: 12px;
  padding: 10px;
  height: 100%;
  display: flex; flex-direction: column; gap: 8px;
}
.vsend__srcHd, .vsend__dstHd {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(20,30,24,0.55);
  display: flex; align-items: center; gap: 6px;
  padding: 0 4px 6px;
  border-bottom: 1px solid rgba(20,30,24,0.06);
}
.vsend__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22D3EE;
  box-shadow: 0 0 0 0 rgba(34,211,238,0.6);
  animation: vsDotPulse 2s ease-in-out infinite;
}
@keyframes vsDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0.6); }
  50%      { box-shadow: 0 0 0 5px rgba(34,211,238,0); }
}
.vsend__card {
  background: #FFFFFF;
  border: 1px solid rgba(20,30,24,0.08);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 8px 20px -12px rgba(20,30,24,0.2);
}
.vsend__cardT {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.3;
}
.vsend__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  background: var(--clay, #CF5807);
  color: #FFFFFF;
  border: 0;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: default;
  box-shadow: 0 6px 16px -8px rgba(207,88,7,0.55);
  animation: vsendBtnPulse 4.5s ease-in-out infinite;
}
@keyframes vsendBtnPulse {
  0%, 14%   { transform: scale(1);    box-shadow: 0 6px 16px -8px rgba(207,88,7,0.55), 0 0 0 0 rgba(207,88,7,0.4); }
  20%       { transform: scale(0.94); box-shadow: 0 6px 16px -8px rgba(207,88,7,0.55), 0 0 0 8px rgba(207,88,7,0); }
  26%, 100% { transform: scale(1);    box-shadow: 0 6px 16px -8px rgba(207,88,7,0.55); }
}
.vsend__arrow {
  width: 100%; height: 24px;
  opacity: 0;
  animation: vsendArrow 4.5s ease-in-out infinite;
}
@keyframes vsendArrow {
  0%, 18%   { opacity: 0; transform: translateX(-10px); }
  26%, 50%  { opacity: 1; transform: translateX(0); }
  60%, 100% { opacity: 0.6; transform: translateX(0); }
}
.vsend__active {
  background: #FFFFFF;
  border: 1px solid rgba(34,211,238,0.5);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 10px 24px -12px rgba(34,211,238,0.4);
  opacity: 0;
  animation: vsendActive 4.5s ease-in-out infinite;
}
@keyframes vsendActive {
  0%, 22%   { opacity: 0; transform: translateY(8px) scale(0.95); }
  32%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
.vsend__activePill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 2px 6px;
  background: rgba(34,211,238,0.14);
  color: #0E8AA0;
  border-radius: 4px;
  margin-bottom: 6px;
}
.vsend__activeT {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.3;
}
.vsend__bar {
  height: 5px;
  background: rgba(20,30,24,0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.vsend__barFill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #22D3EE, #0EA5E9);
  border-radius: 3px;
  animation: vsendBar 4.5s ease-in-out infinite;
}
@keyframes vsendBar {
  0%, 30%   { width: 0; }
  60%       { width: 75%; }
  100%      { width: 75%; }
}
.vsend__status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #0E8AA0;
}
.vsend__statusText { animation: vsendStatusText 4.5s ease-in-out infinite; }
@keyframes vsendStatusText {
  0%, 32%   { content: ''; }
}

/* Spawned subtask under the active card */
.vsend__sub {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-top: 6px;
  padding-left: 6px;
  opacity: 0;
  animation: vsendSub 4.5s ease-in-out infinite;
}
@keyframes vsendSub {
  0%, 55%   { opacity: 0; transform: translateY(-4px); }
  70%, 100% { opacity: 1; transform: translateY(0); }
}
.vsend__subBranch {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(20,30,24,0.4);
  flex: 0 0 auto;
  line-height: 1.4;
  padding-top: 6px;
}
.vsend__subBody {
  flex: 1;
  background: #FFFFFF;
  border: 1px solid rgba(16,163,127,0.4);
  border-radius: 6px;
  padding: 6px 8px;
  box-shadow: 0 6px 14px -10px rgba(16,163,127,0.4);
}
.vsend__subPill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 1px 5px;
  background: rgba(16,163,127,0.12);
  color: #0E6B53;
  border-radius: 3px;
  margin-bottom: 4px;
}
.vsend__subT {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}

/* Mobile polish — narrower arrow column and tighter type so the
   spawned subtask card stays inside the viz instead of clipping. */
@media (max-width: 600px) {
  .vsend { inset: 14px; grid-template-columns: 1fr 26px 1fr; gap: 6px; }
  .vsend__src, .vsend__dst { padding: 8px; gap: 6px; }
  .vsend__srcHd, .vsend__dstHd { font-size: 9px; padding: 0 2px 4px; }
  .vsend__cardT, .vsend__activeT { font-size: 12px; margin-bottom: 6px; line-height: 1.25; }
  .vsend__btn { font-size: 10px; padding: 5px 8px; gap: 4px; }
  .vsend__activePill { font-size: 8px; }
  .vsend__bar { height: 4px; margin-bottom: 5px; }
  .vsend__status { font-size: 9px; }
  .vsend__sub { margin-top: 4px; padding-left: 4px; gap: 4px; }
  .vsend__subBranch { font-size: 11px; }
  .vsend__subBody { padding: 5px 7px; }
  .vsend__subPill { font-size: 7.5px; }
  .vsend__subT { font-size: 10px; }
}

/* ============================================================
   SECURITY — 4 layers shown as numbered cards in 2×2 grid.
   Sits between RULES and MCP TUNNEL.
   ============================================================ */
.sec {
  position: relative;
  z-index: 2;
  background: #1A2A20;
  color: #F2F0E9;
  padding: 110px 32px 130px;
}
.sec__head {
  max-width: 1100px;
  margin: 0 auto 64px;
  text-align: center;
}
.sec__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: #CF5807;
  margin-bottom: 14px;
}
.sec__h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  color: #F7F4ED;
}
.sec__h2 em {
  font-family: 'Big Shoulders Display', 'Oswald', sans-serif;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px #CF5807;
  paint-order: stroke fill;
  letter-spacing: 0.005em;
  display: inline-block;
}
.sec__sub {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(247,244,237,0.7);
  max-width: 740px;
  margin: 0 auto;
}
.sec__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}
.secCard {
  position: relative;
  background: rgba(247,244,237,0.04);
  border: 1px solid rgba(247,244,237,0.1);
  border-radius: 16px;
  padding: 28px 28px 30px;
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 18px;
  row-gap: 8px;
}
.secCard__num {
  grid-column: 1; grid-row: 1;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #CF5807;
  align-self: start;
  padding-top: 4px;
}
.secCard__icon {
  grid-column: 1; grid-row: 2 / 4;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(207,88,7,0.12);
  border: 1px solid rgba(207,88,7,0.3);
  color: #E68A3D;
  display: flex; align-items: center; justify-content: center;
}
.secCard__icon svg { width: 22px; height: 22px; }
.secCard__t {
  grid-column: 2; grid-row: 1 / 3;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #F7F4ED;
  align-self: end;
}
.secCard__b {
  grid-column: 2; grid-row: 3;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(247,244,237,0.72);
  margin: 6px 0 0;
}
.secCard__b strong {
  color: #F7F4ED;
  font-weight: 700;
}

.sec__foot {
  text-align: center;
  margin-top: 56px;
}
.sec__footLink {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #CF5807;
  text-decoration: none;
  border-bottom: 1px dotted rgba(207,88,7,0.5);
  padding-bottom: 2px;
}
.sec__footLink:hover { color: #FFA468; border-bottom-color: rgba(255,164,104,0.7); }

@media (max-width: 860px) {
  .sec { padding: 80px 20px 100px; }
  .sec__grid { grid-template-columns: 1fr; gap: 14px; }
  .secCard { padding: 24px 22px 26px; grid-template-columns: 44px 1fr; column-gap: 14px; }
  .secCard__icon { width: 36px; height: 36px; border-radius: 10px; }
  .secCard__icon svg { width: 18px; height: 18px; }
  .secCard__t { font-size: 19px; }
}

/* ============================================================
   SURFACES — Watch "Say it" stronger viz: sound waves + transcript → task card.
   Plus updated surf__job + new surf__sub style.
   ============================================================ */
.surf__job {
  font-weight: 700;
  letter-spacing: -0.005em;
  min-height: 60px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
}
.surf__sub {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  color: rgba(20,30,24,0.55);
  margin-top: 8px;
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
  min-height: 76px;
  text-align: center;
}

/* Watch viz — animated waves, words appear, task card snaps in (5s loop) */
.wfr__waves {
  display: flex; align-items: center; gap: 4px;
  height: 28px;
  animation: wfrWavesShow 6s ease-in-out infinite;
}
.wfr__waves span {
  width: 3px;
  background: #CF5807;
  border-radius: 2px;
  animation: wfrBar 0.9s ease-in-out infinite;
}
.wfr__waves span:nth-child(1) { animation-delay: 0s;    }
.wfr__waves span:nth-child(2) { animation-delay: 0.12s; }
.wfr__waves span:nth-child(3) { animation-delay: 0.24s; }
.wfr__waves span:nth-child(4) { animation-delay: 0.36s; }
.wfr__waves span:nth-child(5) { animation-delay: 0.48s; }
@keyframes wfrBar {
  0%, 100% { height: 6px; }
  50%      { height: 22px; }
}
@keyframes wfrWavesShow {
  0%, 38%   { opacity: 1; transform: translateY(0); }
  45%, 100% { opacity: 0; transform: translateY(-4px); }
}

.wfr__transcript {
  position: absolute;
  inset: 28% 8% auto 8%;
  display: flex; flex-wrap: wrap; gap: 4px;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  color: #1A2A20;
  text-align: center;
}
.wfr__word {
  opacity: 0;
  animation: wfrWord 6s ease-in-out infinite;
}
.wfr__word:nth-child(1) { animation-delay: 0.0s; }
.wfr__word:nth-child(2) { animation-delay: 0.6s; }
.wfr__word:nth-child(3) { animation-delay: 1.2s; }
@keyframes wfrWord {
  0%, 5%   { opacity: 0; transform: translateY(4px) scale(0.9); }
  12%, 50% { opacity: 1; transform: translateY(0) scale(1); }
  58%, 100%{ opacity: 0; transform: translateY(-2px) scale(1); }
}

.wfr__taskcard {
  position: absolute;
  inset: auto 5% 6% 5%;
  background: #FFFFFF;
  border: 1px solid rgba(20,30,24,0.12);
  border-radius: 6px;
  padding: 4px 6px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 700;
  color: #1A2A20;
  opacity: 0;
  transform: translateY(10px);
  animation: wfrTask 6s ease-in-out infinite;
  box-shadow: 0 4px 8px -4px rgba(0,0,0,0.18);
}
.wfr__taskPill {
  background: rgba(207,88,7,0.14);
  color: #CF5807;
  font-family: var(--font-mono);
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 2px 4px;
  border-radius: 3px;
}
.wfr__taskT {
  white-space: normal;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  align-self: stretch;
}
@keyframes wfrTask {
  0%, 56%  { opacity: 0; transform: translateY(10px); }
  64%, 92% { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; transform: translateY(-2px); }
}

/* =======  MERCH — wear the parrot  ======= */
.merch {
  position: relative;
  z-index: 2;
  background: var(--bg, #F7F4ED);
  padding: 100px 32px 110px;
  border-top: 1px solid rgba(20,30,24,0.06);
}
.merch__head {
  max-width: 1200px;
  margin: 0 auto 48px;
  text-align: center;
}
.merch__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--clay, #CF5807);
  margin-bottom: 14px;
}
.merch__h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  color: var(--ink);
}
.merch__h2 em {
  font-family: 'Big Shoulders Display', 'Oswald', sans-serif;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px var(--clay, #CF5807);
  paint-order: stroke fill;
  letter-spacing: 0.005em;
  display: inline-block;
}
.merch__sub {
  font-family: var(--font-sans);
  font-size: 16px;
  color: rgba(20,30,24,0.6);
  max-width: 600px;
  margin: 0 auto;
}
.merch__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 980px;
  margin: 0 auto 40px;
}
.merchCard {
  display: block;
  background: #FFFFFF;
  border: 1px solid rgba(20,30,24,0.08);
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 14px 30px -16px rgba(20,30,24,0.2);
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.merchCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -18px rgba(20,30,24,0.3);
}
.merchCard svg,
.merchCard img {
  display: block;
  width: 100%;
  height: auto;
}
.merchCard__name {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(20,30,24,0.62);
  text-align: center;
  margin-top: 10px;
}
.merch__ctaRow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.merch__note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(20,30,24,0.5);
}
@media (max-width: 860px) {
  .merch { padding: 72px 20px 80px; }
  .merch__grid {
    grid-template-columns: 1fr;
    max-width: 360px;
    gap: 14px;
  }
}