/* ==========================================================================
   Gavana — design system
   Single flattened stylesheet. One token set, one scale per role.
   Order: tokens → base → primitives → type → components → responsive
   HERO: meadow stays. Page ground is cream. Dark bands share one charcoal.
   White is raised cards only. The logo rim is activity, never fill.
   Color contract: PALETTE.md
   ========================================================================== */

:root {
  /* --- Surface ramp -------------------------------------------------------
     Light ground. Unlike a dark ramp, this one cannot keep going lighter —
     white is only four steps up — so the ramp runs *downward* from the page
     ground and raised things are lifted by shadow instead of by tone.
     Neutrals carry a faint yellow-green bias, pulled from the meadow.       */
  --surface-0:    #f4f0e8;  /* page ground — wordmark cream              */
  --surface-1:    #eef1e8;  /* alternating bands, closing                */
  --surface-2:    #e6eade;  /* proof bar, recessed shape                 */
  --surface-3:    #dce1d2;  /* deeper shape                              */
  --surface-4:    #ccd3c0;  /* deepest shape                             */
  --surface-sunk: #e3e8da;  /* footer — recedes behind the page          */
  --surface-white: #fff;    /* true white — raised cards, button hover   */

  /* --- Text ---------------------------------------------------------------
     Navy rather than grey, drawn from the hero sky so the page and the image
     share one ink. All three clear 4.5:1 on every text-bearing surface above
     — text-3 is tuned against --surface-sunk, the darkest of them.
     text-4 is NOT a text colour: non-text marks only, where 3:1 applies.   */
  --text-1: #17191a;
  --text-2: #3b4757;
  --text-3: #58626f;
  --text-4: #7a8576;  /* clears 3:1 on every page surface */

  /* Text on an inverted (ink) ground — the primary button, hover chips. */
  --on-invert: #f4f0e8;

  /* --- Hairlines ----------------------------------------------------------
     Ink-based, so they read as lines on a light ground rather than vanishing.
     Three steps, same roles as before.                                      */
  --hairline-soft:   rgba(23, 25, 26, .07);
  --hairline:        rgba(23, 25, 26, .13);
  --hairline-strong: rgba(23, 25, 26, .22);

  /* Surface decoration: hover wash and the closing-panel sheen. */
  --wash:       rgba(23, 25, 26, .05);
  --wash-faint: rgba(23, 25, 26, .022);

  /* --- Frame --------------------------------------------------------------
     The product windows flip to the dark ramp inside, but their outer frame
     belongs to the page. These two are deliberately absent from the dark
     scope below so the frame keeps inheriting the page's values.            */
  --frame-edge:   rgba(23, 25, 26, .14);
  --frame-shadow: 0 2px 8px rgba(23, 25, 26, .07), 0 22px 48px rgba(23, 25, 26, .13);

  /* --- Signal -------------------------------------------------------------
     Neutral system-feedback tone: status dots, progress, live cursors.      */
  --signal: #6b7566;
  /* Keyboard focus only. The one saturated value in the system, on purpose;
     a deep lime picked out of the meadow.                                   */
  --focus: #17191a;

  /* --- Type --------------------------------------------------------------- */
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  /* Display face, hero headline only — the reference design's face. */
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  /* Below-hero clone of membership.io: CircularXX → Plus Jakarta, Proxima → Source Sans 3. */
  --font-mio: "Source Sans 3", "Inter", system-ui, sans-serif;

  /* Below-hero tokens, pulled from the mark (charcoal + rim) */
  --mio-dark: #17191a;
  --mio-accent: #f59305;
  --mio-accent-2: #ffa61a;
  --mio-wash: #f4f0e8;
  --mio-white: #fff;
  --mio-muted: #f7f4ee;
  --mio-line: #e8e2d8;
  --mio-text-2: #5c5852;
  --mio-neutral: #8a847a;
  --mio-blue: #d4e2ff;
  --mio-yellow: #ffe4b3;
  --mio-purple: #e9d4ff;
  --mio-pink: #ffd0e4;
  --mio-mint: #ffe6c8;
  --mio-green: var(--mio-accent);
  --mio-green-2: #ffd089;
  --dark-0: #17191a;
  --dark-1: #242628;
  --dark-2: #1c1e20;
  --on-dark-2: #b9b4ac;
  --warm-tint: #f3e4d8;
  --gavana-orange: #f59305;
  --gavana-pink: #ff5d8f;
  --gavana-blue: #4d8cff;
  --gavana-rim: linear-gradient(120deg, #f59305 0%, #ff5d8f 52%, #4d8cff 100%);
  --mio-radius: 30px;
  --mio-radius-sm: 16px;
  --mio-wrap: 1440px;

  --fs-h2:       clamp(34px, 3.6vw, 48px);
  --fs-h3:       clamp(26px, 2.5vw, 32px);
  --fs-h4:       24px;
  --fs-lede:     18px;
  --fs-body:     16px;
  --fs-sm:       14px;
  --fs-ui:       13px;
  --fs-mock:     12px;   /* product-mock titles          */
  --fs-label:    11px;   /* mono uppercase page labels   */
  --fs-label-sm:  9px;   /* mono uppercase inside mocks  */

  /* --- Hero ---------------------------------------------------------------
     The hero sits on a painted meadow that is bright everywhere: white copy
     measures 1.0–1.4:1 against it at worst, and no scrim rescues that
     without destroying the picture. So the hero runs dark ink on a white
     veil — which is also what lets it hand off to the light page cleanly.   */
  --hero-ink:   #0b1b3a;  /* white pill ground, scrolled header ink */
  --hero-ink-2: #26374f;  /* its hover step                         */
  --hero-text:  #fff;     /* all hero copy                          */
  --hero-sky:   #79c2f6;  /* ground under the image while it loads  */
  /* Deep navy the scrim and every hero drop shadow are mixed from. */
  --hero-shade: 0, 10, 45;
  --hero-shadow-lg:   0 8px 30px rgba(0, 10, 45, .72);  /* headline */
  --hero-shadow-md:   0 4px 20px rgba(0, 10, 45, .64);  /* lede     */
  --hero-shadow-sm:   0 3px 14px rgba(0, 10, 45, .72);  /* ui text  */

  /* --- Glass --------------------------------------------------------------
     One frosted material, used by the hero chrome and by the header while it
     is over the hero. Slate fill rather than white: over a bright ground a
     white fill disappears, a dark one reads as glass.                       */
  --glass-tint:        15, 23, 42;
  --glass-fill:        rgba(15, 23, 42, .10);
  --glass-fill-hover:  rgba(15, 23, 42, .18);
  --glass-white:       rgba(255, 255, 255, .14);  /* icon discs */
  --glass-edge:        rgba(255, 255, 255, .30);
  --glass-edge-soft:   rgba(255, 255, 255, .22);
  --glass-edge-strong: rgba(255, 255, 255, .48);
  --glass-sheen:       rgba(255, 255, 255, .30);  /* inset top highlight */
  --glass-underglow:   rgba(255, 255, 255, .10);  /* inset bottom bounce  */
  --glass-blur:        blur(20px) saturate(180%);
  --glass-shadow:      0 18px 48px rgba(15, 23, 42, .16);
  --fs-hero:    clamp(31px, 4.6vw, 64px);

  /* The wordmark is a logotype, not body type — its own three sizes. */
  --fs-brand:     21px;
  --fs-brand-lg:  27px;
  --fs-brand-sm:  19px;
  --fs-quote-mark: 52px;

  /* Weight rule: display sizes stay at 500; headings 24px and under step up
     to 600 to hold the same optical weight. Nothing uses 700 or 800.        */
  --fw-display: 500;
  --fw-heading: 600;
  --fw-ui:      600;

  --track-tight-1: -.045em;  /* display, h2 */
  --track-tight-2: -.035em;  /* h3          */
  --track-tight-3: -.025em;  /* h4          */
  --track-label:    .06em;   /* every mono uppercase label */

  /* --- Space --------------------------------------------------------------
     One rhythm for section padding, one 4px-based scale for everything else. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --section:    120px;
  --section-sm:  76px;

  /* --- Radius ------------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-pill: 100px;

  /* --- Elevation ----------------------------------------------------------
     On a light ground shadow does the work tone used to do, so these are
     two-part: a tight contact shadow plus a wide soft one.                  */
  --shadow-1: 0 1px 3px rgba(23, 25, 26, .06), 0 6px 16px rgba(23, 25, 26, .07);
  --shadow-2: 0 6px 18px rgba(23, 25, 26, .09), 0 34px 70px rgba(23, 25, 26, .13);

  --surface-header: rgba(244, 240, 232, .88);  /* surface-0, translucent */
  --header-h: 68px;

  --motion: .2s ease;
}

/* ==========================================================================
   Base
   ========================================================================== */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--surface-0);
}

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: #7ee08c;
  color: #17191a;
}
::-moz-selection {
  background: #7ee08c;
  color: #17191a;
}
input::selection,
textarea::selection,
[contenteditable]::selection {
  background: rgba(23, 25, 26, .18);
  color: inherit;
}
input::-moz-selection,
textarea::-moz-selection,
[contenteditable]::-moz-selection {
  background: rgba(23, 25, 26, .18);
  color: inherit;
}

.bloom-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 30;
  contain: paint;
  transform: translateZ(0);
}

html.is-prod-protect,
html.is-prod-protect img,
html.is-prod-protect svg,
html.is-prod-protect video,
html.is-prod-protect picture,
html.is-prod-protect canvas {
  -webkit-touch-callout: none;
}

html.is-prod-protect img,
html.is-prod-protect svg,
html.is-prod-protect video,
html.is-prod-protect picture,
html.is-prod-protect canvas {
  -webkit-user-drag: none;
  user-select: none;
}

html.is-prod-protect img,
html.is-prod-protect video,
html.is-prod-protect picture {
  pointer-events: none;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

.agents a:focus-visible,
.agents button:focus-visible {
  outline-color: var(--mio-wash);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }

.mio-wrap {
  width: min(var(--mio-wrap), 100%);
  margin: 0 auto;
  padding: 80px;
}

.section-rule { border-bottom: 1px solid var(--hairline); }

#canvas, #teams, #shipped, #faq, #ask, #waitlist { scroll-margin-top: 86px; }

/* Shared icon treatment — every mark on the page is drawn the same way. */
.icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   Type scale
   ========================================================================== */

h1, h2, h3, h4 { margin: 0; }

.agents h2,
.toolkit h2,
.toolkit-card h3,
.toolkit-panel h3,
.shipped h2,
.faq h2,
.ask h2,
.finale h2 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.agents h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.faq h2,
.toolkit h2 { font-size: clamp(28px, 3.2vw, 45px); }
.toolkit-card h3 {
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.25;
  letter-spacing: -.02em;
}
.toolkit-panel h3 {
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.18;
  letter-spacing: -.03em;
}
.shipped h2 {
  font-size: clamp(36px, 5.4vw, 72px);
  line-height: .98;
  letter-spacing: -.04em;
}
.ask h2 { font-size: clamp(32px, 4vw, 52px); }
.finale h2 { font-size: clamp(32px, 3.8vw, 45px); }

.stage-caption h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 25px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.recipe-inner h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-heading);
  line-height: 1.15;
  letter-spacing: var(--track-tight-3);
}

/* --- Mono labels ---------------------------------------------------------
   Uppercase. Names a thing rather than saying something. One size at page
   level, one step down inside a product mock. Same family and tracking.    */
.mini-note small,
.mini-output small,
.recipe-inner small,
.run-steps b,
.asset-card small,
.asset-card > span,
.tiny-pill,
.run-status {
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* --- Mono values ---------------------------------------------------------
   Same family and tracking as the labels, sentence case. This is content
   the interface is showing you, not a name for a slot.                     */
.fake-window-bar,
.mini-note p {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--track-label);
}

/* Body copy below the hero uses the membership.io scale. */
.agent-copy > p {
  margin: 0;
  font-family: var(--font-mio);
  font-size: 19px;
  line-height: 1.5;
}

/* ==========================================================================
   Header
   ========================================================================== */

/* Sits transparent over the hero image and takes on its own ground once the
   hero is scrolled past — .is-scrolled is toggled by assets/header.js.
   The nav runs ink over the image, same as the hero copy, so the transition
   to the scrolled state is a change of ground only, never of text colour. */
.site-header {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  min-height: var(--header-h);
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--hero-text);
  text-shadow: var(--hero-shadow-sm);
  isolation: isolate;
  transition:
    background var(--motion),
    border-color var(--motion),
    color var(--motion),
    transform .28s ease;
}

.site-header.is-hidden {
  transform: translateY(-100%);
  pointer-events: none;
}

/* A light scrim gives the header text a stable ground over bright clouds
   without bringing back capsules around the logo or action group. */
.site-header:not(.is-scrolled) {
  --glass-fill: rgba(var(--glass-tint), .40);
  --glass-fill-hover: rgba(var(--glass-tint), .50);
}

.site-header:not(.is-scrolled)::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: 104px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(var(--hero-shade), .42) 0%,
    rgba(var(--hero-shade), .20) 62%,
    rgba(var(--hero-shade), 0) 100%
  );
}

.site-header.is-scrolled {
  border-bottom-color: var(--hairline);
  background: var(--surface-header);
  backdrop-filter: blur(14px);
  color: var(--text-1);
  text-shadow: none;
}

/* Nav centred in the header, brand and actions pinned to the edges — the
   reference's arrangement. Taking the two ends out of flow is what lets the
   nav centre on the viewport rather than on whatever space is left over. */
.header-inner {
  position: relative;
  z-index: 1;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-inner > .brand { position: absolute; left: 0; }
.header-inner > .header-actions { position: absolute; right: 0; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border-radius: var(--radius-pill);
  transition: background var(--motion), border-color var(--motion), box-shadow var(--motion);
  font-size: var(--fs-brand);
  line-height: 1;
  font-weight: var(--fw-heading);
  letter-spacing: var(--track-tight-3);
}

.brand-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.brand-wordmark {
  display: block;
  width: 96px;
  height: auto;
  transition: filter var(--motion);
}

.site-header:not(.is-scrolled) .brand-wordmark {
  filter: brightness(0) invert(1);
}

.site-header.is-scrolled .brand-wordmark {
  filter: brightness(0);
}

/* Frosted capsule while it sits over the hero — the reference's signature
   piece of nav chrome. The brand and actions stay directly on the hero. */
.main-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
  padding: 4px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-ui);
  color: inherit;
  white-space: nowrap;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.site-header:not(.is-scrolled) .main-nav {
  border-color: rgba(255, 255, 255, .30);
  background: rgba(15, 23, 42, .10);
  box-shadow: 0 16px 34px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .24);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.main-nav a,
.main-nav .nav-trigger {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: inherit;
  background: none;
  font: inherit;
  font-weight: inherit;
  line-height: 24px;
  cursor: pointer;
  transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}

.main-nav a:hover,
.main-nav .nav-trigger:hover,
.main-nav .nav-trigger[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .14);
}

.main-nav a:focus-visible,
.main-nav .nav-trigger:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .70);
  outline-offset: 2px;
}

.site-header.is-scrolled .main-nav {
  border-color: var(--hairline);
  background: var(--surface-white);
  box-shadow: var(--shadow-1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header.is-scrolled .main-nav a:hover,
.site-header.is-scrolled .main-nav .nav-trigger:hover,
.site-header.is-scrolled .main-nav .nav-trigger[aria-expanded="true"] {
  border-color: var(--hairline);
  background: var(--surface-1);
}

.site-header.is-scrolled .main-nav a:focus-visible,
.site-header.is-scrolled .main-nav .nav-trigger:focus-visible {
  outline-color: var(--focus);
}

.text-link,
.footer-links a { transition: color var(--motion); }

.text-link:hover { opacity: 1; }
.footer-links a:hover { color: var(--text-1); }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-ui);
  transition: background var(--motion), border-color var(--motion), box-shadow var(--motion);
}

/* Once the header has its own ground the frost is redundant everywhere. */
.site-header.is-scrolled .brand,
.site-header.is-scrolled .header-actions {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.mobile-menu { display: none; position: relative; }
.mobile-menu summary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: var(--radius-pill);
  background: rgba(15, 23, 42, .10);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .14), inset 0 1px 0 rgba(255, 255, 255, .22);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  cursor: pointer;
  list-style: none;
  line-height: 24px;
}
.mobile-menu summary::after { content: "⌄"; font-size: 15px; line-height: 1; }
.mobile-menu summary::-webkit-details-marker { display: none; }

.site-header.is-scrolled .mobile-menu summary {
  border-color: var(--hairline);
  color: var(--text-1);
  background: var(--surface-white);
  box-shadow: var(--shadow-1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.mobile-menu summary:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .70);
  outline-offset: 2px;
}

.site-header.is-scrolled .mobile-menu summary:focus-visible { outline-color: var(--focus); }

.mobile-menu nav {
  position: absolute;
  top: calc(100% + var(--space-3));
  right: 0;
  width: 268px;
  text-shadow: none;
  padding: 6px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-white);
  box-shadow: var(--shadow-2);
}

.mobile-menu nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  color: var(--text-2);
}

.mobile-menu nav a:hover { color: var(--text-1); background: var(--wash); }

.mobile-waitlist {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 8px 8px 6px;
  border-radius: 999px;
  color: var(--on-invert) !important;
  background: var(--text-1);
  font-weight: 600;
}

.mobile-waitlist:hover {
  color: var(--on-invert);
  background: var(--hero-ink-2);
}

.mobile-menu nav details {
  border-radius: var(--radius-md);
}

.mobile-menu nav details summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-radius: var(--radius-md);
  color: var(--text-2);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}

.mobile-menu nav details summary::-webkit-details-marker { display: none; }
.mobile-menu nav details summary::after { content: "⌄"; font-size: 15px; opacity: .6; }
.mobile-menu nav details[open] summary { color: var(--text-1); background: var(--wash); }
.mobile-menu nav details a,
.mobile-menu nav details .nav-disabled {
  padding-left: 22px;
  font-weight: 400;
}

.mobile-menu .nav-disabled,
.mega-link.is-disabled {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  color: var(--text-3);
  cursor: default;
  opacity: .62;
}

.mobile-menu .nav-soon,
.mega-soon {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--wash);
  color: var(--text-3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ==========================================================================
   Mega menu — cream panel under the glass pill. Always ink on cream, even
   over the meadow, so Product / Solution / Customer / Pricing / Resource
   read as one site, not a second chrome language.
   ========================================================================== */

.nav-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.mega-root {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: 10px 0 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  text-shadow: none;
  color: var(--text-1);
  transition: opacity .18s ease, visibility .18s ease;
}

.site-header.is-nav-open .mega-root {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mega {
  display: none;
}

.mega.is-active {
  display: block;
}

.mega-panel {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: 22px 22px 18px;
  border: 1px solid var(--hairline);
  border-radius: 28px;
  background: var(--surface-white);
  box-shadow: 0 18px 50px rgba(23, 25, 26, .16);
}

.mega-grid {
  display: grid;
  gap: 8px 20px;
  align-items: start;
}

.mega-grid--product {
  grid-template-columns: 1fr minmax(230px, 280px);
  align-items: stretch;
}

.mega-grid--product > div:first-child {
  display: flex;
  flex-direction: column;
}

.mega-objects {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 2px 12px;
  align-items: start;
}

.mega-grid--solution,
.mega-grid--resource {
  grid-template-columns: 1fr 1fr minmax(230px, 280px);
}

.mega-grid--customer,
.mega-grid--pricing {
  grid-template-columns: minmax(0, 1.2fr) minmax(230px, 320px);
}

.mega-label {
  margin: 0 0 10px;
  padding: 0 10px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 14px;
  text-transform: uppercase;
}

.mega-highlight .mega-label,
.mega-pricing .mega-label {
  padding: 0;
}

.mega-feature {
  display: block;
  padding: 16px;
  border-radius: 20px;
  background: var(--mio-muted);
  color: inherit;
  transition: background .2s ease, transform .2s ease;
}

.mega-feature:hover {
  background: var(--surface-1);
  transform: translateY(-1px);
}

.mega-feature .mega-ico {
  margin-bottom: 14px;
}

.mega-feature strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.mega-feature p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.45;
}

.mega-ico {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--surface-white);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--text-1);
}

.mega-ico svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mega-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 14px;
  color: inherit;
  transition: background .2s ease;
}

.mega-link:hover {
  background: var(--wash);
}

.mega-link.is-disabled {
  min-height: 0;
  padding: 10px;
  opacity: .78;
  color: var(--text-2);
}

.mega-link.is-disabled:hover {
  background: none;
}

.mega-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mega-text strong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.mega-text em {
  font-style: normal;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.35;
}

.mega-highlight {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: var(--mio-muted);
  color: inherit;
}

.mega-highlight.is-disabled {
  opacity: 1;
  cursor: default;
}

.mega-highlight img {
  display: block;
  width: 100%;
  height: 132px;
  object-fit: cover;
}

.mega-highlight div {
  padding: 14px 16px 16px;
}

.mega-highlight strong {
  display: block;
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.015em;
}

.mega-highlight p {
  margin: 0;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.4;
}

.mega-pricing {
  padding: 8px 8px 4px;
}

.mega-pricing h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.03em;
}

.mega-pricing p {
  margin: 0 0 18px;
  max-width: 36em;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.5;
}

.mega-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  color: var(--on-invert);
  background: var(--text-1);
  font-size: 14px;
  font-weight: 600;
}

.mega-cta:hover {
  background: var(--hero-ink-2);
}

.mega-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline-soft);
}

.mega-foot p {
  margin: 0;
  color: var(--text-3);
  font-size: 13px;
}

/* ==========================================================================
   Buttons & links
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-ui);
  line-height: 1;
  letter-spacing: -.01em;
  transition: transform var(--motion), background var(--motion), color var(--motion), border-color var(--motion);
}

.button:hover { transform: translateY(-2px); }
.button-light { color: var(--on-invert); background: var(--text-1); }
.button-light:hover { background: var(--hero-ink-2); }

/* The header CTA uses a solid navy ground for reliable contrast over the
   hero. The logo and action group themselves remain transparent. */
.site-header:not(.is-scrolled) .button-light {
  color: var(--hero-text);
  border-color: var(--hero-ink);
  background: var(--hero-ink);
  box-shadow: 0 4px 14px rgba(var(--hero-shade), .28);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: var(--hero-shadow-sm);
}

.site-header:not(.is-scrolled) .button-light:hover {
  border-color: var(--hero-ink-2);
  background: var(--hero-ink-2);
}

.button-outline { color: var(--text-1); border-color: var(--hairline-strong); }
.button-outline:hover { border-color: var(--text-1); background: var(--wash); }

.button-small {
  min-height: 38px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-ui);
}

.site-header .button-small {
  min-height: 56px;
  padding: 15px 20px;
  border-radius: 30px;
  border-color: rgba(255, 255, 255, .30);
  color: var(--hero-text);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  box-shadow: 0 16px 34px rgba(15, 23, 42, .18);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.header-cta-rest {
  margin-left: 0.25em;
}

.site-header:not(.is-scrolled) .button-small {
  border-color: rgba(255, 255, 255, .30);
  background: rgba(15, 23, 42, .10);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.site-header:not(.is-scrolled) .button-small:hover {
  border-color: rgba(255, 255, 255, .45);
  background: rgba(15, 23, 42, .15);
}

.site-header .button-small:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .70);
  outline-offset: 2px;
}

.site-header.is-scrolled .button-small {
  border-color: transparent;
  color: var(--on-invert);
  background: var(--text-1);
  box-shadow: var(--shadow-1);
  text-shadow: none;
}

.site-header.is-scrolled .button-small:hover {
  border-color: transparent;
  background:
    linear-gradient(#2a2c2e, #2a2c2e) padding-box,
    var(--gavana-rim) border-box;
}

.site-header.is-scrolled .button-small:focus-visible { outline-color: var(--focus); }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

.mio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 32px;
  border: 1px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(var(--mio-white), var(--mio-white)) padding-box,
    transparent border-box;
  color: var(--mio-dark);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  transition: background .2s ease, transform .2s ease;
}

.mio-btn:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(var(--mio-wash), var(--mio-wash)) padding-box,
    var(--gavana-rim) border-box;
}

.mio-btn-ink {
  background:
    linear-gradient(var(--mio-dark), var(--mio-dark)) padding-box,
    transparent border-box;
  color: var(--on-invert);
}

.mio-btn-ink:hover {
  background:
    linear-gradient(#2a2c2e, #2a2c2e) padding-box,
    var(--gavana-rim) border-box;
  color: var(--on-invert);
}

.mio-btn-on-dark {
  margin: 8px auto 0;
}

.mio-text-link {
  display: inline-flex;
  align-items: center;
  margin-top: 20px;
  color: var(--mio-dark);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mio-text-link:hover { color: #2c2e30; }

/* ==========================================================================
   Placeholders — image-generation slots
   ========================================================================== */

/* ==========================================================================
   Hero — glass chrome over a photographic ground
   Follows the Heatbird reference: white copy, frosted chrome, deep-navy drop
   shadows. That reference sits on a blue sky; this one sits on a painted
   meadow where white measures 1.0–1.4:1 unaided, so the scrim below is
   load-bearing rather than decorative.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--hero-sky);
  isolation: isolate;
}

.hero-media {
  position: absolute;
  z-index: 0;
  inset: 0;
}

/* A localized veil keeps the copy readable across bright cloud patches
   without washing the whole hero image in navy. */
.hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 58% 42% at 50% 48%,
    rgba(var(--hero-shade), .30) 0%,
    rgba(var(--hero-shade), .16) 46%,
    rgba(var(--hero-shade), 0) 78%
  );
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 34%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(var(--hero-shade), 0) 0%,
    rgba(var(--hero-shade), .54) 100%
  );
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
  display: block;
}


.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 940px;
  /* Offset by the header so the copy reads centred in the space below it,
     not in the raw viewport. */
  padding: var(--header-h) 0 0;
  text-align: center;
  transform: translateY(-28px);
}

/* --- Glass primitive -----------------------------------------------------
   Shared by the hero chrome and by the header while it sits over the hero,
   so the two can't drift apart. */
.glass {
  border: 1px solid var(--glass-edge);
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-sheen);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* --- Headline ------------------------------------------------------------ */

.hero h1 {
  max-width: 860px;
  margin: 0 auto var(--space-5);
  color: var(--hero-text);
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.02em;
  text-wrap: balance;
  text-shadow: var(--hero-shadow-lg);
}

.hero-lede {
  max-width: 720px;
  margin: 0 auto var(--space-7);
  color: var(--hero-text);
  font-size: var(--fs-lede);
  font-weight: 500;
  line-height: 1.6;
  text-wrap: pretty;
  text-shadow: var(--hero-shadow-md);
}

/* --- Hero CTA ------------------------------------------------------------ */

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.hero-waitlist {
  width: min(100%, 520px);
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 5px 4px 20px;
  border-radius: var(--radius-pill);
  background: rgba(var(--glass-tint), .28);
  color: var(--hero-text);
  text-align: left;
}

.hero-waitlist input {
  min-width: 0;
  flex: 1;
  padding: 10px 0;
  border: 0;
  outline: 0;
  color: var(--hero-text);
  background: transparent;
  font: inherit;
  font-size: var(--fs-sm);
  text-shadow: var(--hero-shadow-sm);
}

.hero-waitlist input::placeholder {
  color: rgba(255, 255, 255, .82);
  opacity: 1;
}

.hero-waitlist input:focus-visible {
  outline: 2px solid var(--surface-white);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.hero-waitlist-submit {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--hero-ink);
  background:
    linear-gradient(var(--surface-white), var(--surface-white)) padding-box,
    transparent border-box;
  box-shadow: 0 10px 24px rgba(var(--hero-shade), .22);
  cursor: pointer;
  font-size: var(--fs-ui);
  font-weight: var(--fw-ui);
  line-height: 1;
  transition: transform var(--motion), background var(--motion);
}

.hero-waitlist-submit:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(var(--surface-0), var(--surface-0)) padding-box,
    var(--gavana-rim) border-box;
}

.hero-waitlist-submit:disabled {
  cursor: default;
  transform: none;
  background:
    linear-gradient(var(--surface-white), var(--surface-white)) padding-box,
    transparent border-box;
}

.waitlist-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 520px);
}

.waitlist-status {
  width: 100%;
  margin: 10px 0 0;
  min-height: 1.2em;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .88);
  font-family: var(--font-mio);
  font-size: var(--fs-sm);
  text-align: center;
  text-shadow: var(--hero-shadow-sm);
}

.waitlist-status.is-error { color: #E23B32; }

/* --- Agent logo strip ---------------------------------------------------- */

.agent-strip {
  width: min(100%, 1000px);
  margin: clamp(42px, 7vh, 72px) auto 0;
  color: var(--hero-text);
  text-shadow: var(--hero-shadow-sm);
}

.agent-strip-label {
  margin: 0 0 var(--space-5);
  color: rgba(255, 255, 255, .88);
  font-size: var(--fs-ui);
  font-weight: 500;
}

.agent-logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 28px;
  align-items: center;
}

.agent-logo {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: rgba(255, 255, 255, .96);
  font-size: clamp(14px, 1.5vw, 19px);
  font-weight: 600;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.agent-logo-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.agent-logo-icon--source {
  filter: none;
  mix-blend-mode: multiply;
  border-radius: 6px;
}

.tone-blue,
.tone-green,
.tone-yellow,
.tone-purple { background: var(--surface-white); }
.tone-pink,
.tone-mint { background: var(--warm-tint); }

/* ==========================================================================
   Problem — Fly-style manifesto
   ========================================================================== */

.trusted {
  background: var(--surface-0);
  padding: 72px 0 28px;
}

.trusted-inner {
  width: min(1080px, calc(100% - 64px));
  margin: 0 auto;
  text-align: center;
}

.trusted-label {
  margin: 0 0 28px;
  color: var(--mio-neutral);
  font-family: var(--font-mio);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.2;
}

.trusted-marks {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trusted-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 18px;
}

.trusted-mark {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--mio-text-2);
  font-family: var(--font-mio);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

.trusted-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: block;
  object-fit: contain;
  border-radius: 5px;
}

/* A quiet bridge between social proof and the manifesto. */
.landscape-transition {
  background: var(--surface-0);
  padding: 20px 0 14px;
}

.landscape-transition-inner {
  display: grid;
  grid-template-columns: minmax(36px, 1fr) auto auto minmax(36px, 1fr);
  align-items: center;
  gap: 14px;
  width: min(940px, calc(100% - 64px));
  margin: 0 auto;
}

.landscape-transition-line {
  height: 1px;
  background: var(--mio-line);
}

.landscape-transition-pivot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mio-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mio-accent) 13%, transparent);
}

.landscape-transition p {
  margin: 0;
  color: var(--mio-dark);
  font-family: var(--font-mio);
  font-size: clamp(14px, 1.35vw, 18px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.problem {
  background: var(--surface-0);
  color: var(--mio-dark);
  padding: 26px 0 64px;
}

.problem-copy {
  width: min(42rem, calc(100% - 64px));
  margin: 0 auto;
  color: var(--mio-text-2);
  font-family: var(--font-mio);
  font-size: clamp(21px, 2.35vw, 32px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.018em;
}

.problem-copy p { margin: 0; }

.problem-copy p + p { margin-top: .8em; }

.problem-copy strong {
  color: var(--mio-dark);
  font-weight: 700;
}

.problem-copy em {
  color: var(--mio-dark);
  font-style: italic;
  font-weight: 600;
}

.problem-drop {
  display: block;
  margin-top: .4em;
}

.problem-copy .nowrap {
  display: inline;
  white-space: nowrap;
}

.inline-chip {
  display: inline-block;
  box-sizing: border-box;
  width: 1.28em;
  height: 1.28em;
  padding: .12em;
  margin: 0 .08em 0 .1em;
  vertical-align: -.26em;
  object-fit: contain;
  background: var(--surface-white);
  border-radius: .34em;
  box-shadow: 0 1px 2px rgba(23, 25, 26, .08), 0 8px 16px rgba(23, 25, 26, .1);
}

.inline-chip--mark {
  padding: 0;
  object-fit: cover;
  background: var(--dark-0);
}

/* The landscape pair are illustrations, not elevated product chips. Keeping
   them inline lets the image baseline sit naturally with the surrounding type. */
.inline-chip--landscape {
  padding: 0;
  margin-inline: .06em;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* ==========================================================================
   Agents — Framer stacked cards, agent rail on the LEFT
   HERO of this band: the left agent session + three Gavana explorations.
   ========================================================================== */

.agents {
  background: var(--dark-0);
  color: #fff;
}

.agents-inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.agents-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 28px 4px 8px;
}

.agents-head h2 {
  margin: 0;
  max-width: 640px;
}

.agents-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background:
    linear-gradient(#2c2e30, #2c2e30) padding-box,
    transparent border-box;
  color: #fff;
  font-family: var(--font-mio);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.agents-cta:hover {
  background:
    linear-gradient(#343638, #343638) padding-box,
    var(--gavana-rim) border-box;
}

.agents-stack {
  --agent-sticky-top: max(calc(var(--header-h) + 24px), calc(50vh - 240px));
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.agents-cases {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.agent-case::after {
  content: "";
  display: block;
  height: 24vh;
}

.agent-case:last-child::after { height: 0; }

.agent-stage,
.agent-rail-card {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  background: var(--dark-1);
  color: #f5f5f4;
}

.agent-rail {
  align-self: stretch;
  background: transparent;
  border: 0;
}

.agent-rail-card {
  position: sticky;
  top: var(--agent-sticky-top);
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: auto;
}

.rail-scene {
  display: none;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.rail-scene.is-on { display: flex; }

.chat-thread {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 14px 12px 6px;
  overflow: auto;
}

.chat-turn {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.chat-face {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: #2a2a2a;
}

.chat-face--you {
  background:
    radial-gradient(circle at 30% 30%, #7ec8e3 0 28%, transparent 29%),
    radial-gradient(circle at 70% 60%, #4a7ea8 0 40%, #2b3d4a 41%);
}

.chat-who {
  margin: 2px 0 4px;
  color: rgba(255, 255, 255, .92);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.chat-say {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: 13.5px;
  line-height: 1.4;
}

.chat-say.is-stream::after,
.connect-log p.is-stream::after {
  content: "▍";
  margin-left: 1px;
  background: var(--gavana-rim);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: caret 0.9s step-end infinite;
}

@keyframes caret {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-say.is-stream::after,
  .connect-log p.is-stream::after { content: none; animation: none; }
}

.chat-build {
  margin-top: 10px;
  padding: 10px 12px 8px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  background: var(--dark-2);
}

.chat-build header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, .55);
  font-size: 12px;
}

.chat-build header::before {
  content: "";
  width: 8px;
  height: 12px;
  background-image: radial-gradient(circle, #6a6a6a 1.05px, transparent 1.15px);
  background-size: 4px 4px;
}

.chat-build time {
  margin-left: auto;
  color: rgba(255, 255, 255, .38);
}

.chat-build ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.chat-build li {
  display: grid;
  grid-template-columns: 10px auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 5px 0;
  color: rgba(255, 255, 255, .55);
  font-size: 13px;
}

.chat-build li i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5a5a5a;
}

.chat-build li.is-on { color: rgba(255, 255, 255, .88); }
.chat-build li.is-on i {
  background: var(--gavana-rim);
  box-shadow: 0 0 8px rgba(255, 93, 143, .35);
}

.chat-build .k { color: rgba(255, 255, 255, .42); }
.chat-build .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rail-composer {
  margin: 6px 10px 10px;
  padding: 8px 10px 8px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
  background: var(--dark-2);
}

.rail-composer p {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, .32);
  font-size: 13px;
}

.rail-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, .55);
  font-size: 12px;
}

.rail-tools { display: flex; gap: 6px; }
.rail-tools i {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #262626;
}

.agent-stage {
  position: sticky;
  top: var(--agent-sticky-top);
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: var(--agent-case-h, auto);
  min-width: 0;
}

.stage-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 18px 18px 0;
  background: var(--dark-2);
}

.stage-body--wheel {
  padding: 18px 18px 0;
  background: #121314;
}

.stage-caption {
  display: grid;
  grid-template-columns: 1fr auto;
  flex: 0 0 auto;
  gap: 24px 32px;
  align-items: end;
  padding: 22px 28px 26px;
}

.stage-caption h3 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.02em;
}

.stage-caption p {
  margin: 0;
  max-width: 62ch;
  color: var(--on-dark-2);
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -.02em;
}

.stage-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: #fff;
  font-size: 15px;
  white-space: nowrap;
}

.stage-go:hover { opacity: .75; }

.explore-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  align-items: start;
  padding-bottom: 18px;
}

.explore-col { margin: 0; min-width: 0; }

.explore-col figcaption {
  margin: 0 0 10px 2px;
  color: rgba(255, 255, 255, .5);
  font-size: 12px;
  font-weight: 600;
}

.explore-col.is-on figcaption { color: #ffb07a; }

.explore-col img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 50%;
  border: 1.5px solid transparent;
  border-radius: 6px;
  background: #0c0e14;
}

.explore-col.is-on img {
  border-color: transparent;
  background: #050505;
}

/* HERO: 1→3 canvas flow — one still fans into three layouts. */
.stage-body--flow {
  position: relative;
  padding: 22px 22px 32px;
  min-height: 600px;
  background: #141516;
}

.canvas-flow {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  min-height: 520px;
  overflow: hidden;
}

.canvas-flow-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.canvas-flow::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .16) 0.7px, transparent 0.85px);
  background-size: 12px 12px;
  background-position: center;
  pointer-events: none;
}

.canvas-flow-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.flow-wire,
.flow-wire-pulse {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.flow-wire {
  stroke: rgba(245, 245, 244, .28);
  stroke-width: 1.5;
  transition: stroke .45s ease, stroke-width .45s ease, filter .45s ease;
}

.flow-link.is-on .flow-wire,
.flow-link.is-generating .flow-wire,
.flow-link.is-arrived .flow-wire {
  stroke: rgba(250, 250, 249, .55);
  stroke-width: 2.25;
  filter: drop-shadow(0 0 8px rgba(250, 250, 249, .35));
}

.flow-wire-pulse {
  stroke: #fafaf9;
  stroke-width: 2.5;
  stroke-dasharray: .2 1;
  stroke-dashoffset: .2;
  stroke-opacity: 0;
}

.flow-link.is-generating .flow-wire-pulse {
  stroke-opacity: 1;
  animation: wire-arrive .9s linear forwards;
}

@keyframes wire-arrive {
  from { stroke-dashoffset: .2; }
  to { stroke-dashoffset: -1; }
}

.canvas-flow.is-playing .flow-wire {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.canvas-flow.is-playing.is-drawn .flow-wire {
  stroke-dashoffset: 0;
  transition:
    stroke-dashoffset 1.05s cubic-bezier(.16, 1, .3, 1),
    stroke .45s ease,
    stroke-width .45s ease,
    filter .45s ease;
}

.canvas-flow.is-playing.is-drawn .flow-link[data-flow="0"] .flow-wire { transition-delay: 0s, 0s, 0s, 0s; }
.canvas-flow.is-playing.is-drawn .flow-link[data-flow="1"] .flow-wire { transition-delay: .12s, 0s, 0s, 0s; }
.canvas-flow.is-playing.is-drawn .flow-link[data-flow="2"] .flow-wire { transition-delay: .24s, 0s, 0s, 0s; }

.flow-node {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(196px, 31%);
  transform: translate(-50%, -50%);
}

.flow-node--source { left: 20%; top: 50%; }

.flow-node--out[data-flow="0"] { left: 80%; top: 20%; }
.flow-node--out[data-flow="1"] { left: 80%; top: 50%; }
.flow-node--out[data-flow="2"] { left: 80%; top: 80%; }

.flow-node-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
}

.flow-node-title {
  min-width: 0;
  overflow: hidden;
  color: rgb(180, 180, 180);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-node-meta {
  flex: none;
  color: rgb(123, 123, 123);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
}

.flow-node.is-on .flow-node-title { color: #ffb07a; }

.flow-node-frame { position: relative; }

.flow-port {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(250, 250, 249, .45);
  border-radius: 50%;
  background: #141516;
  transform: translateY(-50%);
  pointer-events: none;
}

.flow-node--source .flow-port { right: -5px; }
.flow-node--out .flow-port { left: -5px; }

.flow-node.is-on .flow-port {
  border-color: #fafaf9;
  box-shadow: 0 0 0 3px rgba(250, 250, 249, .16);
}

.flow-node-card {
  overflow: hidden;
  border: .5px solid rgba(255, 255, 255, .11);
  border-radius: 12px;
  background: rgba(25, 25, 25, .92);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}

.flow-node.is-on .flow-node-card {
  border-color: rgba(255, 176, 122, .38);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, .28),
    0 0 0 1px rgba(255, 176, 122, .18);
}

.flow-node-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #0c0e14;
}

.flow-node--source .flow-node-card img { object-position: 50% 64%; }
.flow-node--out[data-flow="2"] .flow-node-card img { object-position: 50% 38%; }

.canvas-flow.is-playing .flow-node--out .flow-node-head,
.canvas-flow.is-playing .flow-node--out .flow-node-card {
  opacity: 0;
  transform: translateX(18px);
}

.canvas-flow.is-playing .flow-node--out.is-in .flow-node-head,
.canvas-flow.is-playing .flow-node--out.is-in .flow-node-card {
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity .9s cubic-bezier(.16, 1, .3, 1),
    transform .9s cubic-bezier(.16, 1, .3, 1);
}

.canvas-flow.is-playing .flow-node--out.is-in[data-flow="0"] .flow-node-card,
.canvas-flow.is-playing .flow-node--out.is-in[data-flow="0"] .flow-node-head { transition-delay: .2s; }
.canvas-flow.is-playing .flow-node--out.is-in[data-flow="1"] .flow-node-card,
.canvas-flow.is-playing .flow-node--out.is-in[data-flow="1"] .flow-node-head { transition-delay: .38s; }
.canvas-flow.is-playing .flow-node--out.is-in[data-flow="2"] .flow-node-card,
.canvas-flow.is-playing .flow-node--out.is-in[data-flow="2"] .flow-node-head { transition-delay: .56s; }

@media (prefers-reduced-motion: reduce) {
  .flow-link.is-generating .flow-wire-pulse {
    stroke-opacity: 0;
    animation: none;
  }
  .canvas-flow.is-playing .flow-wire,
  .canvas-flow.is-playing.is-drawn .flow-wire {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: stroke .45s ease;
  }
  .canvas-flow.is-playing .flow-node--out .flow-node-head,
  .canvas-flow.is-playing .flow-node--out .flow-node-card,
  .canvas-flow.is-playing .flow-node--out.is-in .flow-node-head,
  .canvas-flow.is-playing .flow-node--out.is-in .flow-node-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.canvas-table {
  overflow-x: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 14px 8px;
  border-radius: 14px;
  background: var(--dark-2);
  color: #f5f5f4;
}

.canvas-table-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: baseline;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, .45);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.canvas-table-meta strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
}

.canvas-table table { width: 100%; border-collapse: collapse; }

.canvas-table th,
.canvas-table td {
  padding: 10px 8px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  text-align: left;
  vertical-align: middle;
  font-size: 13px;
  white-space: nowrap;
}

.canvas-table th {
  color: rgba(255, 255, 255, .45);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.canvas-table td:first-child { font-weight: 600; }

.canvas-table tr.is-on { background: rgba(245, 147, 5, .1); }
.canvas-table tr.is-on td:first-child { box-shadow: inset 2px 0 0 var(--gavana-orange); }

.canvas-table td img {
  width: 44px;
  height: 28px;
  object-fit: cover;
  border-radius: 4px;
}

.status-live,
.status-draft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.status-live { color: #d7f5c8; background: rgba(90, 160, 70, .22); }
.status-draft { color: #ffe4b3; background: rgba(245, 147, 5, .18); }

.status-live::before,
.status-draft::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.image-wheel {
  position: relative;
  flex: 1 1 auto;
  height: 400px;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(110, 80, 255, .28);
  border-radius: 8px;
  background: #070707;
  perspective: 1400px;
}

.wheel-tile {
  position: absolute;
  width: 148px;
  height: 186px;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  transform-origin: center;
}

.wheel-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wheel-tile.t1 { left: 14%; top: 18%; transform: rotate(-14deg); animation: wheel-float 7s ease-in-out infinite; }
.wheel-tile.t2 { left: 28%; top: 6%; transform: rotate(8deg); animation: wheel-float 8s ease-in-out infinite .4s; }
.wheel-tile.t3 { left: 44%; top: 22%; transform: rotate(4deg); animation: wheel-float 6.5s ease-in-out infinite .8s; }
.wheel-tile.t4 { left: 58%; top: 8%; transform: rotate(-6deg); animation: wheel-float 7.5s ease-in-out infinite .2s; }
.wheel-tile.t5 { left: 22%; top: 46%; transform: rotate(-8deg); animation: wheel-float 8.2s ease-in-out infinite .6s; }
.wheel-tile.t6 { left: 40%; top: 48%; transform: rotate(10deg); animation: wheel-float 7.2s ease-in-out infinite 1s; }
.wheel-tile.t7 { left: 58%; top: 44%; transform: rotate(-4deg); animation: wheel-float 6.8s ease-in-out infinite .3s; }

@keyframes wheel-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

@media (prefers-reduced-motion: reduce) {
  .wheel-tile { animation: none; }
}

.agent-stage[data-case="3"] {
  position: relative;
  top: auto;
  height: auto;
}

.still-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--dark-1);
}

.still-grid figure {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 10px 10px 12px;
  background: #0d0d0d;
}

.still-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 50%;
  margin-bottom: 8px;
  border-radius: 4px;
}

.still-grid figcaption {
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.3;
}

.connect-terminal {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.connect-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 10px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  scrollbar-width: none;
}

.connect-tabs::-webkit-scrollbar { display: none; }

.connect-tabs span {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #a9a6a2;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.connect-tabs .is-on {
  color: #fafafa;
  background:
    linear-gradient(#2c2e30, #2c2e30) padding-box,
    var(--gavana-rim) border-box;
}

.connect-log {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 14px 12px 8px;
  overflow: auto;
  color: #d6d3d1;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.connect-log p { margin: 0 0 2px; }

.term-head {
  margin: 0 0 14px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
}

.term-head strong {
  display: block;
  color: #eceae6;
  font-size: 12px;
  font-weight: 500;
}

.term-head span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, .48);
  font-size: 11px;
}

.connect-log .term-ok {
  margin-top: 10px;
  color: #d7f5c8;
}

.connect-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.connect-copy {
  min-width: 0;
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  background: var(--dark-2);
  color: #d6d3d1;
  font-family: var(--font-mono);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.connect-copy:hover { color: #fff; }

.connect-install {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 8px 14px;
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .rail-scene { transition: none; }
}

/* ==========================================================================
   Toolkit — light bento + overlapping campaign frames
   HERO: two campaign phones that peek out of cream panels
   ========================================================================== */

.toolkit {
  background: var(--surface-0);
  color: var(--mio-dark);
}

.toolkit h2 {
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
  text-wrap: balance;
}

.toolkit-bento,
.toolkit-panels {
  display: grid;
  gap: 16px;
}

.toolkit-bento {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.toolkit-panels {
  grid-template-columns: 1fr 1fr;
  margin-top: 16px;
}

.toolkit-card,
.toolkit-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--hairline-soft);
  border-radius: 28px;
  background: var(--surface-white);
  box-shadow: 0 1px 0 rgba(23, 25, 26, .04), 0 18px 40px rgba(23, 25, 26, .045);
}

.toolkit-card {
  min-height: 360px;
  padding: 12px 22px 28px;
}

.toolkit-card--wide { grid-column: span 2; }

.toolkit-card h3,
.toolkit-panel h3 {
  margin: 0;
  text-align: center;
  text-wrap: balance;
}

.toolkit-card p,
.toolkit-panel > p:not(.kit-kicker) {
  max-width: 48ch;
  margin: 8px auto 0;
  color: var(--mio-text-2);
  font-family: var(--font-mio);
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
  text-wrap: pretty;
}

.toolkit-panel {
  min-height: 620px;
  padding: 36px 28px 0;
}

.toolkit-panel > p:not(.kit-kicker) {
  max-width: 42ch;
  font-size: 16px;
  line-height: 1.5;
}

.kit-kicker {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--mio-text-2);
  font-family: var(--font-mio);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.kit-kicker .icon {
  width: 14px;
  height: 14px;
}

.kit-visual {
  position: relative;
  display: grid;
  place-items: center;
  height: 214px;
  margin: 4px 0 22px;
}

.kit-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 56px);
  gap: 10px;
  opacity: .7;
  mask-image: radial-gradient(circle at 50% 48%, #000 22%, transparent 78%);
}

.kit-mosaic img {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
  background: var(--mio-muted);
}

.kit-mosaic--agents img {
  padding: 10px;
  background: var(--surface-0);
  object-fit: contain;
}

.kit-on-light { filter: invert(1); }

.kit-orb {
  position: absolute;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--mio-dark);
  color: var(--mio-wash);
  box-shadow:
    0 0 0 10px rgba(23, 25, 26, .05),
    0 0 0 22px rgba(23, 25, 26, .03),
    0 10px 24px rgba(23, 25, 26, .16);
}

.kit-orb .icon {
  width: 28px;
  height: 28px;
}

.kit-orb--mark {
  background: var(--surface-white);
  border: 1px solid var(--hairline);
}

.kit-orb--mark img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.kit-visual--shot {
  overflow: hidden;
  height: 214px;
  margin: 4px 4px 22px;
  border-radius: 20px;
}
.kit-visual--shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kit-visual--aurora {
  overflow: hidden;
  margin: 4px 4px 22px;
  border-radius: 20px;
}

.kit-visual--aurora img {
  display: block;
  width: 100%;
  height: 214px;
  object-fit: cover;
  object-position: 50% 42%;
  filter: saturate(.88) brightness(1.08);
}

.kit-visual--aurora::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  background: linear-gradient(to bottom, transparent, var(--surface-white));
}

.kit-pill {
  position: absolute;
  z-index: 1;
  min-width: 168px;
  padding: 12px 28px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--mio-dark);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-align: center;
  box-shadow: 0 10px 28px rgba(11, 27, 58, .18);
}

.kit-share-window {
  overflow: hidden;
  width: 186px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--surface-0);
  box-shadow: 0 12px 28px rgba(23, 25, 26, .08);
}

.kit-share-bar {
  display: flex;
  gap: 5px;
  padding: 8px 10px 6px;
}

.kit-share-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hairline-strong);
}

.kit-share-window img {
  display: block;
  width: 100%;
  height: 124px;
  object-fit: cover;
}

.kit-orb--share { translate: -36px 18px; }

.kit-tip {
  position: absolute;
  left: calc(50% + 22px);
  top: 132px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--warm-tint);
  color: var(--mio-dark);
  font-family: var(--font-mio);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 4px 10px rgba(23, 25, 26, .08);
}

.kit-tip::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 6px;
  border: 4px solid transparent;
  border-right-color: var(--warm-tint);
  border-left: 0;
}

/* Recipe visual — creative ingredients packaged into one reusable recipe */
.kit-visual--recipe {
  height: 214px;
  align-content: start;
  padding-top: 24px;
}

.rcp {
  position: relative;
  width: min(100%, 440px);
  height: 152px;
}

.rcp-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rcp-wires path {
  fill: none;
  stroke: var(--mio-text-2);
  stroke-width: 1;
  opacity: .2;
  vector-effect: non-scaling-stroke;
}

.rcp-parts {
  position: absolute;
  inset: 0 4px auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.rcp-part {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  width: 84px;
  height: 62px;
  margin: 0;
}

.rcp-part figcaption {
  color: var(--mio-text-2);
  font-family: var(--font-mio);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .6;
}

/* each ingredient gets its own visual language, never a repeated chip */
.rcp-thumb {
  overflow: hidden;
  width: 56px;
  height: 40px;
  border: 1px solid var(--mio-line);
  border-radius: var(--radius-md);
  background: var(--surface-white);
}

.rcp-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rcp-light {
  width: 38px;
  height: 38px;
  border: 1px solid var(--mio-line);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fff 0%, var(--mio-muted) 46%, var(--mio-line) 100%);
  box-shadow: 0 0 0 5px rgba(232, 226, 216, .32);
}

.rcp-type {
  color: var(--mio-dark);
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  border-bottom: 1px solid var(--mio-line);
  padding: 0 2px 5px;
}

.rcp-swatches {
  display: flex;
  gap: 5px;
}

.rcp-swatches i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--hairline-soft);
}

.rcp-swatches i:nth-child(1) { background: var(--mio-muted); }
.rcp-swatches i:nth-child(2) { background: var(--mio-line); }
.rcp-swatches i:nth-child(3) { background: var(--mio-text-2); border-color: transparent; }
.rcp-swatches i:nth-child(4) { background: var(--mio-dark); border-color: transparent; }

/* stacked layers say "reusable" without extra copy */
.rcp-stack {
  position: absolute;
  bottom: 12px;
  left: 50%;
  width: 176px;
  transform: translateX(-50%);
}

.rcp-stack::before,
.rcp-stack::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border: 1px solid var(--mio-line);
  border-radius: var(--radius-lg);
  background: var(--mio-muted);
}

.rcp-stack::before { transform: translate(12px, 12px); }
.rcp-stack::after { transform: translate(6px, 6px); }

.rcp-card {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 46px;
  padding: 0 12px 0 14px;
  border-radius: var(--radius-lg);
  background: var(--mio-dark);
  color: var(--on-invert);
}

.rcp-label {
  font-family: var(--font-mio);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.rcp-check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(244, 240, 232, .13);
}

.rcp-check svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--on-invert);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 560px) {
  .rcp-part { width: 64px; }
  .rcp-thumb { width: 48px; height: 34px; }
  .rcp-light { width: 32px; height: 32px; }
  .rcp-type { font-size: 23px; }
  .rcp-swatches i { width: 12px; height: 12px; }
  .rcp-stack { width: 158px; }
}

.kit-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 380px;
  margin-top: 28px;
}

.kit-phone {
  position: absolute;
  overflow: hidden;
  width: min(54%, 248px);
  height: 420px;
  border: 1px solid var(--hairline);
  border-radius: 26px;
  background: var(--surface-white);
  box-shadow: 0 18px 40px rgba(23, 25, 26, .10);
}

.kit-phone--back {
  left: 6%;
  top: 48px;
  opacity: .78;
  filter: saturate(.92);
}

.kit-phone--front {
  right: 5%;
  top: 0;
  z-index: 2;
}

.kit-phone header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 36px;
  padding: 8px 12px 6px;
  color: var(--mio-neutral);
  font-family: var(--font-mio);
  font-size: 10px;
  font-weight: 600;
}

.kit-phone header strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--mio-dark);
  text-align: center;
}

.kit-phone header span:last-child { justify-self: end; }

.kit-phone-share {
  font-size: 13px;
  color: var(--mio-dark);
}

.kit-phone-body { padding: 4px 12px 16px; }

.kit-phone-label {
  margin: 10px 0 6px;
  color: var(--mio-neutral);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.kit-src,
.kit-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kit-src li,
.kit-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--hairline-soft);
  color: var(--mio-dark);
  font-family: var(--font-mio);
  font-size: 12px;
  font-weight: 600;
}

.kit-src img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.kit-src b {
  margin-left: auto;
  color: var(--mio-neutral);
  font-weight: 600;
}

.kit-src em {
  margin-left: auto;
  color: var(--gavana-orange);
  font-style: normal;
  font-weight: 700;
}

.kit-tabs {
  display: flex;
  gap: 6px;
  margin: 4px 0 12px;
}

.kit-tabs span {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-0);
  color: var(--mio-text-2);
  font-family: var(--font-mio);
  font-size: 11px;
  font-weight: 600;
}

.kit-tabs .is-on {
  background: var(--mio-dark);
  color: var(--on-invert);
}

.kit-feed {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.kit-feed img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
}

.kit-feed p {
  margin: 0;
  color: var(--mio-neutral);
  font-family: var(--font-mio);
  font-size: 10px;
  font-weight: 600;
}

.kit-feed h4,
.kit-phone--article h4 {
  margin: 2px 0 0;
  color: var(--mio-dark);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.kit-feed small {
  color: var(--mio-neutral);
  font-family: var(--font-mio);
  font-size: 10px;
}

.kit-phone--article .kit-phone-body small {
  display: block;
  margin-bottom: 6px;
  color: var(--mio-neutral);
  font-family: var(--font-mio);
  font-size: 10px;
}

.kit-phone--article h4 {
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.25;
}

.kit-phone--article img {
  display: block;
  width: 100%;
  height: 118px;
  margin-bottom: 10px;
  border-radius: 10px;
  object-fit: cover;
  object-position: 72% 42%;
}

.kit-phone--article p {
  margin: 0 0 8px;
  color: var(--mio-text-2);
  font-family: var(--font-mio);
  font-size: 11px;
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .kit-orb--share { translate: -36px 18px; }
}

/* ==========================================================================
   Shipped — Framer-style work gallery
   Charcoal ground. Rounded image cards. Slow horizontal drift.
   ========================================================================== */

.shipped {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: 80px;
  background:
    radial-gradient(70% 140% at 0% 0%, rgba(77, 140, 255, .14), transparent 62%),
    radial-gradient(54% 110% at 100% 100%, rgba(245, 147, 5, .11), transparent 62%),
    var(--dark-0);
  color: var(--on-invert);
}

.shipped-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 36px;
}

.shipped-head h2 { margin: 0; }

.shipped-cta {
  flex: 0 0 auto;
  padding: 10px 16px;
  border: 1px solid rgba(244, 240, 232, .32);
  border-radius: 100px;
  background: rgba(244, 240, 232, .08);
  color: var(--on-invert);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.shipped-cta:hover {
  border-color: rgba(244, 240, 232, .68);
  background: rgba(244, 240, 232, .16);
  transform: translateY(-1px);
}

.shipped-cta:focus-visible {
  outline: 2px solid var(--on-invert);
  outline-offset: 3px;
}

.shipped-marquee {
  overflow: hidden;
}

.shipped-track {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 16px;
  height: 596px;
  width: max-content;
  padding: 0 80px;
  animation: shipped-drift 80s linear infinite;
}

.shipped-card {
  display: block;
  overflow: hidden;
  flex: 0 0 auto;
  width: calc(var(--ship-w, 477) * 1px);
  height: calc(var(--ship-h, 596) * 1px);
  border-radius: 24px;
  background: var(--surface-white);
}

.shipped-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shipped-card.is-wide { width: 460px; height: 290px; }
.shipped-card.is-mid { width: 290px; height: 290px; }
.shipped-card.is-tall { width: 240px; height: 596px; }
.shipped-card.is-feature { width: 560px; height: 290px; }

@keyframes shipped-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   Use cases + finale
   ========================================================================== */

.faq {
  background: var(--surface-0);
  color: var(--mio-dark);
}

.faq-inner {
  display: grid;
  grid-template-columns: minmax(240px, .86fr) minmax(0, 1.28fr);
  align-items: start;
  gap: 56px 72px;
  padding-bottom: 56px;
}

.faq-aside {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.faq-label {
  margin: 0 0 10px;
  color: var(--mio-neutral);
  font-family: var(--font-mio);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.faq h2 {
  margin: 0 0 28px;
  color: var(--mio-dark);
  letter-spacing: -.02em;
}

.faq-card {
  padding: 28px 28px 24px;
  border-radius: 24px;
  background: var(--surface-white);
  box-shadow: var(--shadow-1);
}

.faq-card-mark {
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 12px;
}

.faq-card h3 {
  margin: 0 0 6px;
  color: var(--mio-dark);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.25;
}

.faq-card p {
  margin: 0;
  color: var(--mio-text-2);
  font-family: var(--font-mio);
  font-size: 15px;
  line-height: 1.5;
}

.faq-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 20px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 100px;
  background:
    linear-gradient(var(--mio-dark), var(--mio-dark)) padding-box,
    transparent border-box;
  color: var(--on-invert);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.faq-cta:hover {
  background:
    linear-gradient(#2a2c2e, #2a2c2e) padding-box,
    var(--gavana-rim) border-box;
}

.faq-alt {
  margin-top: 16px;
  font-size: 14px;
}

.faq-alt a {
  color: var(--mio-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  border-radius: 16px;
  background: var(--surface-white);
  box-shadow: var(--shadow-1);
}

.faq-item summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  list-style: none;
  cursor: pointer;
  color: var(--mio-dark);
  font-family: var(--font-mio);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.35;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 16px;
}

.faq-plus {
  position: relative;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}

.faq-plus::before,
.faq-plus::after {
  content: "";
  position: absolute;
  background: var(--mio-dark);
  border-radius: 1px;
}

.faq-plus::before {
  top: 6px;
  left: 0;
  width: 14px;
  height: 1.5px;
}

.faq-plus::after {
  top: 0;
  left: 6px;
  width: 1.5px;
  height: 14px;
  transition: transform .2s ease, opacity .2s ease;
}

.faq-item[open] .faq-plus::after {
  transform: scaleY(0);
}

.faq-answer {
  padding: 0 22px 20px 50px;
}

.faq-answer p {
  margin: 0;
  color: var(--mio-text-2);
  font-family: var(--font-mio);
  font-size: 16px;
  line-height: 1.55;
}

.ask {
  background: var(--dark-0);
  padding: 0;
}

.ask-board {
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) 1fr 1fr 1fr;
  grid-template-areas:
    "intro gpt claude gemini"
    "intro pplx grok copy"
    "intro human human human";
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: rgba(244, 240, 232, .14);
  gap: 1px;
  color: #fff;
}

.ask-intro {
  grid-area: intro;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 320px;
  padding: 56px clamp(24px, 5vw, 80px);
  background: var(--dark-0);
}

.ask-label {
  margin: 0 0 14px;
  color: var(--on-dark-2);
  font-family: var(--font-mio);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.ask h2 {
  margin: 0 0 16px;
  color: #fff;
  letter-spacing: -.025em;
  line-height: 1.08;
}

.ask-lede {
  margin: 0;
  max-width: 28rem;
  color: var(--on-dark-2);
  font-family: var(--font-mio);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
}

.ask-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 176px;
  padding: 28px 16px;
  border: 0;
  background: var(--dark-0);
  color: #fff;
  font-family: var(--font-mio);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.3;
  cursor: pointer;
  text-align: center;
  transition: background .2s ease;
}

.ask-board > a.ask-tile[data-ask-chatgpt] { grid-area: gpt; }
.ask-board > a.ask-tile[data-ask-claude] { grid-area: claude; }
.ask-board > a.ask-tile[data-ask-gemini] { grid-area: gemini; }
.ask-board > a.ask-tile[data-ask-perplexity] { grid-area: pplx; }
.ask-board > a.ask-tile[data-ask-grok] { grid-area: grok; }
.ask-board > button.ask-tile { grid-area: copy; }

.ask-tile:hover,
.ask-human:hover {
  background: var(--dark-1);
}

.ask-tile:focus-visible,
.ask-human:focus-visible {
  outline: 2px solid var(--mio-wash);
  outline-offset: -2px;
}

.ask-icon {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  color: #fff;
}

.ask-icon--ink {
  filter: invert(1);
}

.ask-icon--mark {
  width: 36px;
  height: 36px;
  border-radius: 9px;
}

.ask-human {
  grid-area: human;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 68px;
  padding: 18px clamp(24px, 5vw, 80px);
  background: var(--dark-0);
  color: #fff;
  font-family: var(--font-mio);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: background .2s ease, color .2s ease;
}

.ask-human:hover { color: var(--mio-wash); }

.finale { padding: 0; }

.finale-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: clamp(520px, 72vh, 720px);
  padding: 72px 24px;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: center;
}

.finale-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 780px);
}

.finale-media {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
  display: block;
}

/* Same problem as the hero: white type on the meadow needs a veil. */
.finale-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 68% 52% at 50% 50%,
      rgba(var(--hero-shade), .48) 0%,
      rgba(var(--hero-shade), .28) 52%,
      rgba(var(--hero-shade), .16) 100%
    ),
    linear-gradient(
      180deg,
      rgba(var(--hero-shade), .18) 0%,
      rgba(var(--hero-shade), .08) 42%,
      rgba(var(--hero-shade), .36) 100%
    );
}

.finale h2 {
  max-width: 640px;
  margin: 0;
  padding: 0;
  color: var(--mio-white);
  text-shadow: var(--hero-shadow-lg);
}

.finale-cta {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 36px;
}

.finale-waitlist {
  width: min(100%, 520px);
  border-color: rgba(255, 255, 255, .38);
  background: rgba(var(--glass-tint), .46);
  box-shadow: 0 16px 34px rgba(15, 23, 42, .20), inset 0 1px 0 rgba(255, 255, 255, .24);
}

/* ==========================================================================
   Product window mocks
   ========================================================================== */

/* --- Product window shell ------------------------------------------------ */

/* The mocks are app UI, and the app is dark. Keeping them on the dark ramp
   also solves a real constraint: the light ground has no room for four
   distinct levels of window chrome, where the dark ramp has plenty. Custom
   properties inherit, so re-declaring the ramp here flips the whole subtree
   and not one component rule below needs to know about it.
   --frame-* is deliberately absent: the outer frame belongs to the page. */
.product-window {
  --surface-0:    #171717;
  --surface-1:    #1d1f1d;
  --surface-2:    #232623;
  --surface-3:    #2a2d2a;
  --surface-4:    #383b36;
  --surface-white: #fff;

  --text-1: #fafafa;
  --text-2: #d6d3d1;
  --text-3: #a9a6a2;
  --text-4: #7d7a76;

  /* Cards inside the mock that invert back to a light ground. */
  --surface-light:   #f5f5f4;
  --surface-light-2: #e6e4dc;
  --surface-light-3: #d5d3cb;
  --on-light-1: #18181b;
  --on-light-2: #4f4d48;

  --hairline-soft:   rgba(239, 238, 231, .08);
  --hairline:        rgba(239, 238, 231, .16);
  --hairline-strong: rgba(239, 238, 231, .28);

  --canvas-dot:  rgba(245, 245, 244, .24);
  --hatch-light: rgba(255, 255, 255, .08);
  --hatch-dark:  rgba(0, 0, 0, .07);
  --wash:        rgba(255, 255, 255, .07);
  --signal:      #a8a29e;

  /* Re-declaring the tokens is not enough on its own: anything inside that
     merely inherits `color` carries the value already computed on <body>,
     from the light --text-1. Restating colour here re-resolves it for the
     whole subtree. */
  color: var(--text-1);

  min-height: 452px;
  overflow: hidden;
  border: 1px solid var(--frame-edge);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--frame-shadow);
}

.window-dots { display: inline-flex; gap: 5px; }
.window-dots b { width: 7px; height: 7px; display: block; border-radius: 50%; background: var(--text-4); }

.fake-window-bar {
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--hairline-soft);
  color: var(--text-3);
}
.fake-window-bar > span:nth-child(2) { margin: auto; }

.tiny-pill,
.run-status {
  padding: 3px 7px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
}

.run-status { color: var(--signal); }

/* All four product windows are the same height — the mock inside changes,
   the frame does not. Sized so the canvas cards never have to overlap. */
.window-inner,
.asset-inner,
.recipe-inner,
.run-inner { min-height: 412px; }

/* --- 01 / Canvas --------------------------------------------------------- */

.canvas-mini {
  position: relative;
  overflow: hidden;
  background-color: var(--surface-0);
  background-image: radial-gradient(var(--canvas-dot) 1px, transparent 1px);
  background-size: 15px 15px;
}

.mini-note,
.mini-output {
  position: absolute;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}

.mini-note small,
.mini-output small { display: block; margin-bottom: var(--space-2); color: var(--text-3); }

.mini-note strong,
.mini-output strong { display: block; font-size: var(--fs-mock); font-weight: var(--fw-ui); }

/* Coordinates keep the three canvas cards comfortably separated. */
.note-a {
  top: 40px;
  left: 6%;
  width: 150px;
  padding: var(--space-3);
  background: var(--surface-4);
  transform: rotate(-3deg);
}

.note-b {
  top: 96px;
  left: 40%;
  width: 160px;
  padding: var(--space-3);
  color: var(--on-light-1);
  background: var(--surface-light);
  transform: rotate(2deg);
}

.note-b small { color: var(--on-light-2); }
.note-b p { margin: var(--space-3) 0 0; color: var(--on-light-2); }

.mini-output {
  right: 5%;
  bottom: 16px;
  width: 158px;
  padding: var(--space-3);
  color: var(--on-light-1);
  background: var(--surface-light-2);
  transform: rotate(3deg);
}

.mini-output small { color: var(--on-light-2); }

.generated-image {
  display: block;
  width: 100%;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.mini-reference-art { height: 52px; margin-top: 11px; object-position: center; }
.mini-art { height: 94px; margin-bottom: var(--space-2); object-position: center 57%; }

.mini-line {
  position: absolute;
  height: 1px;
  background: var(--hairline-strong);
  transform-origin: 0 50%;
}

.line-a { top: 100px; left: 29.5%; width: 81px; transform: rotate(35deg); }
.line-b { top: 170px; left: 65%; width: 55px; transform: rotate(54deg); }

/* --- 02 / Assets ---------------------------------------------------------
   Three identical frames. In an asset grid, uniform framing is the point —
   the caption and the thumbnail carry the difference.                       */

.asset-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-1);
}

.asset-card {
  position: relative;
  min-height: 324px;
  overflow: hidden;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--radius-md);
  color: var(--text-1);
  background: var(--surface-3);
}

.asset-card > span {
  position: relative;
  z-index: 1;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  color: var(--text-2);
}

.asset-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.asset-card small {
  display: block;
  margin-top: 3px;
  color: var(--text-3);
}

.asset-media {
  position: absolute;
  inset: 52px var(--space-3) 58px;
  z-index: 0;
  width: calc(100% - var(--space-6));
  height: calc(100% - 110px);
  border-color: var(--hairline-soft);
  object-position: center;
}

/* --- 03 / Recipes -------------------------------------------------------- */

.recipe-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-6) var(--space-7);
  background: var(--surface-2);
}

.recipe-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-md);
  color: var(--on-light-1);
  background: var(--surface-light);
}

.recipe-icon .icon { width: 18px; height: 18px; }
.recipe-inner small { display: block; color: var(--text-3); }
.recipe-inner h4 { margin: var(--space-2) 0 var(--space-5); }

.recipe-inner ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.recipe-inner li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline-soft);
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.recipe-inner li b {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  font-weight: 500;
  letter-spacing: var(--track-label);
}

.recipe-inner button { align-self: flex-end; margin-top: var(--space-4); }

/* --- 04 / Runs ----------------------------------------------------------- */

.run-inner {
  display: flex;
  flex-direction: column;
  padding: var(--space-7) var(--space-7) var(--space-6);
  background: var(--surface-2);
}
.run-progress { display: flex; align-items: center; }

.run-progress span {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--on-light-1);
  background: var(--signal);
  font-size: var(--fs-mock);
  font-weight: var(--fw-ui);
}

.run-progress i { flex: 1 1 auto; height: 1px; background: var(--hairline-strong); }

.run-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.run-steps p { margin: 0; color: var(--text-2); font-size: var(--fs-label); line-height: 1.4; }
.run-steps b { display: block; margin-bottom: 5px; color: var(--text-3); }
.run-art { flex: 1 1 auto; min-height: 150px; margin-top: var(--space-6); object-position: center 56%; }

/* ==========================================================================
   Footer — cream sheet over charcoal, giant cropped wordmark
   ========================================================================== */

.site-footer {
  background: var(--dark-0);
  color: var(--mio-dark);
}

.footer-sheet {
  background: var(--surface-0);
  border-radius: 0 0 80px 80px;
  padding-bottom: 48px;
}

.footer-top {
  padding-top: 72px;
  padding-bottom: 72px;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 48px;
}

.footer-links h3 {
  margin: 0 0 16px;
  color: var(--mio-dark);
  font-family: var(--font-mio);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.footer-links a {
  display: block;
  margin: 0 0 10px;
  color: var(--mio-text-2);
  font-family: var(--font-mio);
  font-size: 16px;
  line-height: 1.45;
}

.footer-links a:hover { color: var(--mio-dark); }

.footer-legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px 24px 24px;
  text-align: center;
}

.footer-mark { display: inline-flex; line-height: 0; }
.footer-legal .brand-mark { width: 36px; height: 36px; }

.footer-legal p {
  margin: 0;
  color: var(--mio-text-2);
  font-family: var(--font-mio);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

.footer-wordmark {
  display: flex;
  justify-content: center;
  height: clamp(170px, 26vw, 320px);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.footer-wordmark img {
  display: block;
  width: 118vw;
  max-width: none;
  height: auto;
  margin-top: 6px;
  filter: brightness(0) invert(1);
  opacity: .94;
}

/* Object pages — job → proof picture → why → ask.
   Meadow hero stays. No logo bar. No shared campaign reel. */

.hero-kicker {
  margin: 0 auto 12px;
  color: var(--hero-text);
  font-family: var(--font-mio);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.2;
  text-shadow: var(--hero-shadow-md);
}

/* Short cream hero. Copy sits on cream; meadow flowers bloom up from the
   bottom of the same band — Lovable marketers shape, Gavana meadow instead
   of a gradient. Homepage hero is unchanged. */
body.object-page .hero {
  min-height: 0;
  height: auto;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
  background: var(--surface-0);
}

body.object-page .hero::before,
body.object-page .hero::after { content: none; }

body.object-page .hero-inner {
  width: min(940px, calc(100% - 48px));
  margin: 0 auto;
  padding: calc(var(--header-h) + 36px) 0 168px;
  transform: none;
}

body.object-page .hero-actions { margin-bottom: 0; }

body.object-page .hero-media {
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 280px;
  pointer-events: none;
}

body.object-page .hero-media img {
  object-fit: cover;
  object-position: center 92%;
}

body.object-page .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--surface-0) 0%,
    color-mix(in srgb, var(--surface-0) 82%, transparent) 18%,
    color-mix(in srgb, var(--surface-0) 28%, transparent) 52%,
    transparent 78%
  );
}

body.object-page .hero-kicker {
  margin-bottom: 16px;
  color: var(--mio-dark);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: none;
}

body.object-page .hero h1 {
  max-width: 14em;
  margin-bottom: 16px;
  color: var(--mio-dark);
  font-size: clamp(40px, 6.2vw, 76px);
  line-height: .96;
  letter-spacing: -.045em;
  text-shadow: none;
}

body.object-page .hero-lede {
  max-width: 34em;
  margin-bottom: 28px;
  color: var(--text-2);
  font-size: clamp(16px, 1.45vw, 19px);
  font-weight: 500;
  text-shadow: none;
}

body.object-page .hero-waitlist {
  background: var(--surface-white);
  color: var(--text-1);
  box-shadow: var(--shadow-1);
}

body.object-page .hero-waitlist input {
  color: var(--text-1);
  text-shadow: none;
}

body.object-page .hero-waitlist input::placeholder { color: var(--text-3); }

body.object-page .hero-waitlist input:focus-visible {
  outline-color: var(--focus);
}

body.object-page .hero-waitlist-submit {
  color: var(--on-invert);
  background: var(--text-1);
  box-shadow: none;
}

body.object-page .hero-waitlist-submit:hover {
  background:
    linear-gradient(#2a2c2e, #2a2c2e) padding-box,
    var(--gavana-rim) border-box;
}

body.object-page .waitlist-status {
  color: var(--text-2);
  text-shadow: none;
}

.object-jobs,
.object-why,
.object-faq {
  background: var(--surface-0);
  color: var(--mio-dark);
}

body.object-page .landscape-transition {
  padding: 8px 0 0;
}

.object-jobs .mio-wrap,
.object-why .mio-wrap,
.object-faq .mio-wrap {
  width: min(1040px, calc(100% - 48px));
  padding-left: 0;
  padding-right: 0;
}

.object-jobs .mio-wrap {
  padding-top: 28px;
  padding-bottom: 12px;
}

.object-why .mio-wrap {
  padding-top: 36px;
  padding-bottom: 56px;
}

.object-faq .mio-wrap {
  padding-top: 8px;
  padding-bottom: 48px;
}

.object-head {
  max-width: 16em;
  margin: 0 0 20px;
}

.object-head h2 {
  margin: 0;
  text-wrap: balance;
}

.object-head--wide { max-width: 22em; }

.object-head p {
  max-width: 36em;
  margin: 14px 0 0;
  color: var(--mio-text-2);
  font-family: var(--font-mio);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.45;
}

.object-job {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 8px 24px;
  align-items: center;
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 24px;
  background: var(--surface-white);
  box-shadow: 0 1px 0 rgba(23, 25, 26, .04), 0 18px 40px rgba(23, 25, 26, .045);
}

.object-job--flip {
  grid-template-columns: 300px minmax(0, 1fr);
}

.object-job--flip .object-job-copy { order: 2; }

.object-job-copy { padding: 16px 16px 16px 20px; }

.object-job--flip .object-job-copy { padding: 16px 20px 16px 16px; }

.object-job-copy h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
  text-wrap: balance;
}

.object-job-copy p {
  margin: 0;
  max-width: 38em;
  color: var(--mio-text-2);
  font-family: var(--font-mio);
  font-size: 16px;
  line-height: 1.5;
}

.object-job-media {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: var(--mio-muted);
}

.object-job-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.object-reasons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.object-reason {
  padding: 28px 24px 26px;
  border-radius: 24px;
  background: var(--surface-white);
  box-shadow: 0 1px 0 rgba(23, 25, 26, .04);
}

.object-reason h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.object-reason p {
  margin: 0;
  color: var(--mio-text-2);
  font-family: var(--font-mio);
  font-size: 15px;
  line-height: 1.5;
}

.object-faq .faq-list { max-width: 840px; }

/* ==========================================================================
   Responsive — two breakpoints, one block each
   ========================================================================== */

@media (max-width: 1024px) {
  .page-hero.mio-wrap,
  .page-brief .mio-wrap,
  .page-legal.mio-wrap {
    grid-template-columns: 1fr;
  }
  .page-hero-stage { max-height: 520px; aspect-ratio: 16 / 10; }
  .page-object-grid,
  .page-pair--three { grid-template-columns: 1fr 1fr; }
  .page-legal-aside { position: static; }
  .faq-inner { gap: 40px 48px; }
  .mio-wrap { padding: 48px 24px; }
  .object-reasons { grid-template-columns: 1fr 1fr; }
  .agents-stack { grid-template-columns: 1fr; }
  .agent-rail-card {
    position: relative;
    top: auto;
    height: auto;
    max-height: none;
  }
  .agent-case::after { height: 0; }
  .agent-stage {
    position: relative;
    top: auto;
    z-index: auto;
    height: auto;
  }
  .toolkit-bento { grid-template-columns: 1fr 1fr; }
  .toolkit-card--wide { grid-column: span 2; }
  .toolkit-panels { grid-template-columns: 1fr; }
  .toolkit-panel { min-height: 560px; }
  .shipped-track { padding: 0 24px; }
  .footer-sheet { border-bottom-left-radius: 56px; border-bottom-right-radius: 56px; }
  .footer-top { padding-top: 48px; padding-bottom: 48px; }
}

@media (max-width: 1100px) {
  .mega-grid--product {
    grid-template-columns: 1fr minmax(220px, 280px);
  }
  .mega-grid--solution,
  .mega-grid--resource {
    grid-template-columns: 1fr 1fr;
  }
  .mega-grid--solution .mega-highlight,
  .mega-grid--resource .mega-highlight {
    grid-column: 1 / -1;
  }
  .mega-highlight img { height: 160px; }
}

@media (max-width: 900px) {
  .main-nav,
  .mega-root { display: none; }
  .mobile-menu { display: block; position: static; }
  .mobile-menu nav { width: min(360px, calc(100vw - 24px)); }
  .ask-board {
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "intro intro"
      "gpt claude"
      "gemini pplx"
      "grok copy"
      "human human";
  }
  .ask-intro { min-height: 0; padding: 44px 28px 36px; }
  .object-job,
  .object-job--flip {
    grid-template-columns: 1fr;
  }
  .object-job--flip .object-job-copy { order: 0; }
  .object-job-copy,
  .object-job--flip .object-job-copy { padding: 10px 8px 6px; }
  .object-job-media { aspect-ratio: 16 / 9; }
  .object-reasons { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .page-pair,
  .page-object-grid,
  .page-pair--three { grid-template-columns: 1fr; }
  .page-hero-stage { aspect-ratio: 4 / 5; max-height: none; }
  .hide-sm { display: none; }
  .hero-inner { transform: translateY(-16px); }
  body.object-page .hero-media { height: 200px; }
  body.object-page .hero-inner {
    width: min(940px, calc(100% - 32px));
    padding: calc(var(--header-h) + 24px) 0 132px;
    transform: none;
  }
  body.object-page .hero h1 { font-size: clamp(34px, 10vw, 48px); }
  .hero-lede { margin-bottom: var(--space-6); }
  .hero-actions { flex-direction: column; align-items: center; gap: var(--space-3); }
  .hero-waitlist { width: 100%; max-width: 360px; }
  .agent-strip { margin-top: var(--space-7); }
  .agent-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 10px;
  }
  .agent-logo { gap: 6px; font-size: 13px; }
  .agent-logo-icon { width: 19px; height: 19px; flex-basis: 19px; }
  .wrap { width: min(100% - 32px, 1180px); }
  .mio-wrap { padding: 36px 20px; }

  .site-header { --header-h: 62px; }
  .header-inner { gap: var(--space-3); }
  .header-actions { gap: 10px; }
  .header-cta-rest { display: none; }
  .brand { font-size: var(--fs-brand-sm); }
  .brand-mark { width: 26px; height: 26px; }
  .brand-wordmark { width: 84px; }

  .trusted { padding: 52px 0 18px; }
  .trusted-inner { width: calc(100% - 40px); }
  .trusted-label { margin-bottom: 20px; }
  .trusted-marks { gap: 14px; }
  .trusted-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
    gap: 14px 8px;
  }
  .trusted-mark {
    flex: none;
    font-size: 14px;
    gap: 6px;
  }
  .trusted-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }
  .landscape-transition { padding: 18px 0 8px; }
  .landscape-transition-inner {
    grid-template-columns: minmax(18px, 1fr) auto auto minmax(18px, 1fr);
    gap: 10px;
    width: calc(100% - 40px);
  }
  .landscape-transition-pivot {
    width: 7px;
    height: 7px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mio-accent) 13%, transparent);
  }
  .landscape-transition p { font-size: 14px; }
  .problem { padding: 22px 0 44px; }
  .problem-copy { width: calc(100% - 40px); }
  .faq-inner { grid-template-columns: 1fr; gap: 28px; }
  .faq-aside { position: static; }
  .faq h2 { margin-bottom: 20px; }
  .faq-item summary { font-size: 16px; padding: 16px 18px; }
  .faq-answer { padding: 0 18px 16px 46px; }
  .ask-board {
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "intro intro"
      "gpt claude"
      "gemini pplx"
      "grok copy"
      "human human";
  }
  .ask-intro {
    min-height: 0;
    padding: 36px 20px 28px;
  }
  .ask-tile { min-height: 140px; }
  .ask-human { justify-content: center; padding: 18px 20px; text-align: center; }
  .finale-card { text-align: center; }
  .shipped-head { flex-wrap: wrap; }
  .shipped-track { height: 456px; padding: 0 20px; }
  .shipped-card {
    height: 456px;
    width: calc(456px * var(--ship-w, 477) / var(--ship-h, 596));
  }
  .shipped-card.is-wide { width: 340px; height: 220px; }
  .shipped-card.is-mid { width: 220px; height: 220px; }
  .shipped-card.is-tall { width: 180px; height: 456px; }
  .shipped-card.is-feature { width: 400px; height: 220px; }
  .agents-head { flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 16px; }
  .stage-caption { grid-template-columns: 1fr; }
  .stage-caption p { font-size: 16px; }
  .explore-grid { gap: 10px; }
  .stage-body--flow {
    min-height: 0;
    padding: 16px 16px 24px;
    aspect-ratio: 627 / 560;
  }
  .canvas-flow {
    min-height: 0;
  }
  .flow-node-meta { display: none; }
  .still-grid { grid-template-columns: 1fr 1fr; }
  .image-wheel { height: 340px; }
  .wheel-tile { width: 112px; height: 140px; }
  .toolkit-bento,
  .toolkit-panels { grid-template-columns: 1fr; }
  .footer-links { grid-template-columns: 1fr 1fr; }
  .toolkit-card--wide { grid-column: auto; }
  .toolkit-card { min-height: 0; padding-bottom: 24px; }
  .toolkit-panel { min-height: 520px; padding-top: 28px; }
  .kit-visual,
  .kit-visual--aurora img { height: 180px; }
  .kit-phone { width: min(58%, 210px); height: 360px; }
  .footer-sheet { border-bottom-left-radius: 36px; border-bottom-right-radius: 36px; }
  .footer-wordmark { height: 140px; }

  .product-window { min-height: 436px; }
  .window-inner,
  .asset-inner,
  .recipe-inner,
  .run-inner { min-height: 396px; }

  .note-a { top: 26px; left: 3%; width: 112px; padding: 10px; }
  .note-b { top: 84px; left: 40%; width: 130px; padding: 10px; }
  .mini-output { right: 3%; bottom: 12px; width: 118px; padding: 10px; }
  .mini-reference-art { height: 38px; margin-top: var(--space-2); }
  .mini-art { height: 58px; }

  .asset-inner { gap: var(--space-2); padding: 10px; }
  .asset-card { min-height: 257px; padding: 10px; }
  .asset-media { inset: 44px 10px 52px; width: calc(100% - 20px); height: calc(100% - 96px); }

  .recipe-inner,
  .run-inner { padding: var(--space-5); }
  .run-art { min-height: 120px; margin-top: var(--space-5); }
}

@media (max-width: 480px) {
  .landscape-transition-inner {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
  }
  .landscape-transition-line { display: none; }
  .asset-inner { grid-template-columns: repeat(3, minmax(160px, 1fr)); overflow-x: auto; }
  body { overflow-x: clip; }
  .header-cta-rest { display: none; }
  .site-header .button-small {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================================
   Subpages — product, legal, contact. Cream ground; no hero.
   Header ships with .is-scrolled in HTML so it stays readable at the top.
   ========================================================================== */

body.subpage,
body.object-page {
  overflow-x: clip;
  background: var(--surface-0);
  color: var(--text-1);
  font-family: var(--font-mio);
}

/* Keep the scrolled chrome even if JS toggles the class at y = 0. */
body.subpage .site-header,
body.object-page .site-header {
  border-bottom-color: var(--hairline);
  background: var(--surface-header);
  backdrop-filter: blur(14px);
  color: var(--text-1);
  text-shadow: none;
}

body.subpage .site-header::before,
body.object-page .site-header::before { content: none; }

body.subpage .brand-wordmark,
body.object-page .brand-wordmark { filter: brightness(0); }

body.subpage .main-nav,
body.object-page .main-nav {
  border-color: var(--hairline);
  background: var(--surface-white);
  box-shadow: var(--shadow-1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.subpage .main-nav a:hover,
body.subpage .main-nav .nav-trigger:hover,
body.subpage .main-nav .nav-trigger[aria-expanded="true"],
body.object-page .main-nav a:hover,
body.object-page .main-nav .nav-trigger:hover,
body.object-page .main-nav .nav-trigger[aria-expanded="true"] {
  border-color: var(--hairline);
  background: var(--surface-1);
  transform: none;
}

body.subpage .main-nav a:focus-visible,
body.subpage .main-nav .nav-trigger:focus-visible,
body.object-page .main-nav a:focus-visible,
body.object-page .main-nav .nav-trigger:focus-visible { outline-color: var(--focus); }

body.subpage .brand,
body.subpage .header-actions,
body.object-page .brand,
body.object-page .header-actions {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.subpage .mobile-menu summary,
body.object-page .mobile-menu summary {
  border-color: var(--hairline);
  color: var(--text-1);
  background: var(--surface-white);
  box-shadow: var(--shadow-1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.subpage .mobile-menu summary:focus-visible,
body.object-page .mobile-menu summary:focus-visible { outline-color: var(--focus); }

body.subpage .site-header .button-small,
body.object-page .site-header .button-small {
  border-color: transparent;
  color: var(--on-invert);
  background: var(--text-1);
  box-shadow: var(--shadow-1);
  text-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.subpage .site-header .button-small:hover,
body.object-page .site-header .button-small:hover {
  border-color: transparent;
  background:
    linear-gradient(#2a2c2e, #2a2c2e) padding-box,
    var(--gavana-rim) border-box;
}

body.subpage .site-header .button-small:focus-visible,
body.object-page .site-header .button-small:focus-visible { outline-color: var(--focus); }

.main-nav a[aria-current="page"],
.main-nav .nav-trigger[aria-current="page"],
.mobile-menu nav a[aria-current="page"] {
  color: var(--text-1);
  font-weight: var(--fw-heading);
  text-decoration: underline;
  text-underline-offset: 0.28em;
}

.mega-link[aria-current="page"] {
  background: var(--wash);
}

/* HERO: campaign still as the page, not a blog column. */
.page-hero.mio-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1.05fr);
  gap: 56px 64px;
  align-items: center;
  padding-top: calc(var(--header-h) + 28px);
}

.page-hero--solo {
  grid-template-columns: minmax(0, 36rem);
  padding-bottom: 24px;
}

.page-hero .faq-label { margin-bottom: 14px; }

.page-hero-copy h1 {
  margin: 0 0 18px;
  color: var(--mio-dark);
  font-family: var(--font-display);
  font-size: clamp(52px, 7vw, 92px);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.045em;
}

.page-lede {
  max-width: 34ch;
  margin: 0 0 28px;
  color: var(--mio-text-2);
  font-family: var(--font-mio);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.45;
}

.page-hero-stage {
  overflow: hidden;
  border-radius: 32px;
  aspect-ratio: 4 / 5;
  background: var(--dark-1);
  box-shadow: var(--frame-shadow);
}

.page-hero-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 0;
}

.page-pair--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.page-note {
  min-height: 0;
  padding: 36px 32px 40px;
  text-decoration: none;
  color: inherit;
}

.page-note h3,
.page-note p {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

.page-note h3 { color: var(--mio-dark); }

.page-note p {
  max-width: 46ch;
  margin-top: 10px;
}

.page-brief {
  background: var(--dark-0);
  color: var(--on-invert);
}

.page-brief .mio-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(240px, .9fr);
  gap: 48px 56px;
  align-items: center;
}

.page-brief .faq-label { color: rgba(244, 240, 232, .48); }

.page-brief h2 {
  margin: 0 0 22px;
  color: var(--on-invert);
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.03em;
}

.page-brief blockquote {
  margin: 0 0 20px;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  background: var(--dark-1);
}

.page-brief-who {
  margin: 0 0 8px;
  color: rgba(244, 240, 232, .45);
  font-family: var(--font-mio);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.page-brief blockquote p:last-child {
  margin: 0;
  color: var(--on-invert);
  font-family: var(--font-mio);
  font-size: 20px;
  line-height: 1.4;
}

.page-brief-copy > p {
  max-width: 42ch;
  margin: 0;
  color: rgba(244, 240, 232, .7);
  font-family: var(--font-mio);
  font-size: 17px;
  line-height: 1.55;
}

.page-brief-stage {
  overflow: hidden;
  margin: 0;
  border-radius: 28px;
  aspect-ratio: 4 / 5;
}

.page-brief-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-objects h2 {
  margin: 0 0 28px;
  color: var(--mio-dark);
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 45px);
  font-weight: 700;
  letter-spacing: -.03em;
}

.page-object-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.page-object {
  overflow: hidden;
  border: 1px solid var(--hairline-soft);
  border-radius: 24px;
  background: var(--surface-white);
  box-shadow: 0 1px 0 rgba(23, 25, 26, .04), 0 18px 40px rgba(23, 25, 26, .045);
  color: inherit;
  text-decoration: none;
}

.page-object img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.page-object span {
  display: block;
  padding: 16px 18px 18px;
  color: var(--mio-dark);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.page-legal.mio-wrap {
  display: grid;
  grid-template-columns: minmax(220px, .78fr) minmax(0, 1.22fr);
  gap: 48px 72px;
  align-items: start;
  padding-top: calc(var(--header-h) + 36px);
  padding-bottom: 96px;
}

.page-legal h1 {
  margin: 0 0 14px;
  color: var(--mio-dark);
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.04em;
}

.page-legal-aside {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.page-legal-body h2 {
  margin: 36px 0 10px;
  color: var(--mio-dark);
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -.02em;
}

.page-legal-body h2:first-child { margin-top: 0; }

.page-legal-body p {
  margin: 0 0 8px;
  color: var(--mio-text-2);
  font-family: var(--font-mio);
  font-size: 18px;
  line-height: 1.6;
}

.page-legal-body ul {
  margin: 8px 0 20px;
  padding: 0 0 0 1.15em;
  color: var(--mio-text-2);
  font-family: var(--font-mio);
  font-size: 18px;
  line-height: 1.6;
}

.page-legal-body li { margin: 0 0 8px; }

.page-legal-body a {
  color: var(--mio-dark);
  text-underline-offset: .18em;
}

.page-legal-body code {
  font-family: var(--font-mono);
  font-size: .86em;
}

.page-object:hover span { color: var(--mio-text-2); }

@media (max-width: 1024px) {
  .page-hero.mio-wrap,
  .page-brief .mio-wrap,
  .page-legal.mio-wrap {
    grid-template-columns: 1fr;
  }
  .page-hero-stage { max-height: 520px; aspect-ratio: 16 / 10; }
  .page-object-grid,
  .page-pair--three { grid-template-columns: 1fr 1fr; }
  .page-legal-aside { position: static; }
}

@media (max-width: 620px) {
  .page-pair,
  .page-object-grid,
  .page-pair--three { grid-template-columns: 1fr; }
  .page-hero-stage { aspect-ratio: 4 / 5; max-height: none; }
}

/* Product object pages.
   Six sections, same count as a long product story: hero+board, blocks,
   uses, features, proof, meadow. Cream ground, white cards, charcoal board. */
#blocks, #uses, #features, #page-waitlist { scroll-margin-top: 86px; }

.prod-hero.mio-wrap {
  padding-top: calc(var(--header-h) + 36px);
  padding-bottom: 48px;
}

.prod-hero .faq-label { margin-bottom: 16px; }

.prod-hero h1 {
  max-width: 16ch;
  margin: 0 0 18px;
  color: var(--mio-dark);
  font-family: var(--font-display);
  font-size: clamp(44px, 6.4vw, 84px);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.prod-lede {
  max-width: 46ch;
  margin: 0;
  color: var(--mio-text-2);
  font-family: var(--font-mio);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.45;
}

.prod-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.prod-actions .button {
  min-height: 48px;
  padding: 0 20px;
  border-radius: 14px;
  font-family: var(--font-mio);
  font-size: 15px;
  font-weight: 600;
}

.prod-hero .prod-board { margin-top: 40px; }

.prod-board {
  position: relative;
  overflow: hidden;
  height: clamp(340px, 42vw, 560px);
  border-radius: 32px;
  background: var(--dark-1);
  box-shadow: var(--frame-shadow);
}

.prod-board img {
  position: absolute;
  border-radius: 18px;
  object-fit: cover;
  background: var(--dark-2);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .34);
}

.prod-board img:nth-child(1) {
  left: 6%;
  top: 14%;
  width: 26%;
  aspect-ratio: 4 / 5;
}

.prod-board img:nth-child(2) {
  left: 35%;
  top: 10%;
  z-index: 2;
  width: 30%;
  aspect-ratio: 5 / 4;
}

.prod-board img:nth-child(3) {
  right: 7%;
  top: 16%;
  width: 24%;
  aspect-ratio: 4 / 5;
}

.prod-board img:nth-child(4) {
  left: 28%;
  bottom: 8%;
  z-index: 3;
  width: 20%;
  aspect-ratio: 1 / 1;
}

.prod-section.mio-wrap {
  padding-top: 56px;
  padding-bottom: 24px;
}

.prod-head {
  max-width: 46rem;
  margin: 0 0 28px;
}

.prod-head h2 {
  margin: 0 0 12px;
  color: var(--mio-dark);
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.prod-head p {
  margin: 0;
  color: var(--mio-text-2);
  font-family: var(--font-mio);
  font-size: 18px;
  line-height: 1.5;
}

.prod-grid {
  display: grid;
  gap: 16px;
}

.prod-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prod-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prod-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prod-grid + .prod-grid { margin-top: 16px; }

.prod-tile {
  overflow: hidden;
  border: 1px solid var(--hairline-soft);
  border-radius: 28px;
  background: var(--surface-white);
  box-shadow: 0 1px 0 rgba(23, 25, 26, .04), 0 18px 40px rgba(23, 25, 26, .045);
}

.prod-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--dark-1);
}

.prod-tile--tall img { aspect-ratio: 4 / 5; }

.prod-tile-copy {
  padding: 18px 20px 22px;
}

.prod-tile h3 {
  margin: 0 0 6px;
  color: var(--mio-dark);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.prod-tile p {
  margin: 0;
  color: var(--mio-text-2);
  font-family: var(--font-mio);
  font-size: 15px;
  line-height: 1.45;
}

.prod-wide {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(240px, .95fr);
  gap: 32px 48px;
  align-items: center;
  margin-top: 16px;
  padding: 36px 36px 36px 40px;
  border: 1px solid var(--hairline-soft);
  border-radius: 28px;
  background: var(--surface-white);
  box-shadow: 0 1px 0 rgba(23, 25, 26, .04), 0 18px 40px rgba(23, 25, 26, .045);
}

.prod-wide h3 {
  margin: 0 0 10px;
  color: var(--mio-dark);
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
  text-wrap: balance;
}

.prod-wide p {
  max-width: 42ch;
  margin: 0;
  color: var(--mio-text-2);
  font-family: var(--font-mio);
  font-size: 17px;
  line-height: 1.5;
}

.prod-wide-stage {
  overflow: hidden;
  margin: 0;
  border-radius: 22px;
  min-height: 240px;
  aspect-ratio: 4 / 5;
  background: var(--dark-1);
}

.prod-wide-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prod-proof {
  padding-top: 40px;
  padding-bottom: 24px;
}

.prod-proof-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 28px;
  background: var(--surface-white);
}

.prod-stat {
  padding: 36px 32px 40px;
  border-right: 1px solid var(--hairline);
}

.prod-stat:last-child { border-right: 0; }

.prod-stat strong {
  display: block;
  color: var(--mio-dark);
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.prod-stat span {
  display: block;
  margin-top: 10px;
  color: var(--mio-text-2);
  font-family: var(--font-mio);
  font-size: 15px;
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .prod-grid--4,
  .prod-grid--3 { grid-template-columns: 1fr 1fr; }
  .prod-wide {
    grid-template-columns: 1fr;
    padding: 28px;
  }
  .prod-wide-stage { max-height: 420px; aspect-ratio: 16 / 10; }
  .prod-board img:nth-child(4) { display: none; }
}

@media (max-width: 620px) {
  .prod-hero h1 { max-width: 12ch; }
  .prod-grid--4,
  .prod-grid--3,
  .prod-grid--2,
  .prod-proof-panel { grid-template-columns: 1fr; }
  .prod-stat {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }
  .prod-stat:last-child { border-bottom: 0; }
  .prod-board {
    height: auto;
    aspect-ratio: 4 / 5;
  }
  .prod-board img:nth-child(n + 2) { display: none; }
  .prod-board img:nth-child(1) {
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    aspect-ratio: auto;
  }
}

/* ==========================================================================
   Cookie banner — compact card, bottom left
   ========================================================================== */

.cookie-banner {
  position: fixed;
  z-index: 40;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(22.5rem, calc(100vw - 32px));
  padding: 18px 18px 16px;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--surface-white);
  box-shadow: var(--shadow-2);
  color: var(--text-1);
}

.cookie-banner__eyebrow {
  margin: 0 0 8px;
  color: var(--mio-neutral);
  font-family: var(--font-mio);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cookie-banner h2 {
  margin: 0;
  color: var(--mio-dark);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.cookie-banner p {
  margin: 8px 0 0;
  color: var(--mio-text-2);
  font-family: var(--font-mio);
  font-size: 14px;
  line-height: 1.45;
}

.cookie-banner a {
  color: var(--mio-dark);
  text-underline-offset: .18em;
}

.cookie-banner__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.cookie-banner button,
.cookie-preferences {
  cursor: pointer;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mio);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.cookie-banner button:focus-visible,
.cookie-preferences:focus-visible {
  outline: 2px solid var(--mio-dark);
  outline-offset: 3px;
}

.cookie-banner__reject,
.cookie-preferences {
  border: 1px solid var(--hairline-strong);
  background: transparent;
  color: var(--mio-dark);
}

.cookie-banner__reject:hover,
.cookie-preferences:hover {
  background: var(--wash);
}

.cookie-banner__accept {
  border: 1px solid var(--mio-dark);
  background: var(--mio-dark);
  color: var(--on-invert);
}

.cookie-banner__accept:hover {
  background: var(--dark-1);
}

.cookie-preferences {
  margin-top: 16px;
}

@media (prefers-reduced-motion: no-preference) {
  .cookie-banner {
    animation: cookie-banner-in .45s cubic-bezier(.16, 1, .3, 1) both;
  }
}

@keyframes cookie-banner-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}