/* ============================================================
   CosmoCrew by Yotta, landing page, sintra.ai-family.
   Black page, Figtree 500 display, blue pill CTAs, and the cast:
   six AVATARZ astronauts (one per department) rendered live from
   GLB (mascots.js) with webp stills as fallback.
   Shape rule: bento 24px, tiles 16px, buttons pill.
   Colour rule: blue for every CTA; department colours only on
   characters/cards; amber = approval state.
   ============================================================ */
:root {
  color-scheme: dark;
  --bg: #050505; --bg-2: #0B0B0D; --surface: #111114; --surface-2: #17171B;
  --ink: #FFFFFF; --ink-2: #D4D4D8; --muted: #A1A1AA; --muted-2: #71717A;
  --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.22);
  --blue: #3B82F6; --blue-deep: #2563EB; --amber: #F59E0B;
  --c-emails: #22C55E; --c-sales: #F59E0B; --c-marketing: #EC4899; --c-ops: #8B5CF6; --c-fin: #3B82F6; --c-delivery: #06B6D4;
  --font: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --r-bento: 24px; --r-tile: 16px;
  --ease: cubic-bezier(.2,.8,.2,1); --ease-out: cubic-bezier(.16,1,.3,1);
  --maxw: 1160px; --nav-h: 72px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html { overflow-x: clip; }   /* clip, not hidden: nothing decorative can widen the layout viewport on phones (which zooms the page out) */
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
::selection { background: var(--blue); color: #fff; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body::after { content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

h1, h2, h3 { font-weight: 500; letter-spacing: -.02em; line-height: 1.06; color: var(--ink); }
.t-64 { font-size: clamp(2.5rem, 4.5vw, 4rem); }
.t-48 { font-size: clamp(2rem, 3.4vw, 3rem); }
.t-40 { font-size: clamp(1.7rem, 2.8vw, 2.5rem); }
p { color: var(--muted); }
p b { color: var(--ink); font-weight: 600; }
.lede { font-size: 17px; line-height: 1.6; max-width: 62ch; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
.section { position: relative; padding-block: clamp(80px, 10vh, 130px); }
.head { max-width: 760px; }
.head.center { margin-inline: auto; }
.head .lede { margin-top: 18px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 500; font-size: 17px; border-radius: 999px; padding: 13px 20px; white-space: nowrap; border: 1.5px solid transparent; transition: transform .35s var(--ease-out), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-deep); }
.btn-white { background: #F8FAFC; color: #0F172A; border-radius: 11px; padding: 11px 20px; font-size: 16px; }
.btn-white:hover { background: #fff; }
.btn-ghost { background: rgba(255,255,255,.08); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: rgba(255,255,255,.14); }

.nav { position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 60; display: flex; align-items: center; transition: background .35s var(--ease), border-color .35s var(--ease); border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(5,5,5,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--line); }
.nav .container { display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand img { display: block; height: 20px; width: auto; }
.brand .by { font-size: 12px; color: var(--muted); }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a { font-size: 15px; font-weight: 500; color: var(--ink); opacity: .92; }
.nav-links a:hover { opacity: 1; }
.nav .login { font-size: 15px; font-weight: 500; padding-left: 26px; border-left: 1px solid var(--line); margin-left: 6px; }

/* ---------- the character slot ---------- */
.char { position: relative; display: block; --c: var(--blue); }
.char img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block; transition: opacity .45s var(--ease); }
/* stills first: every slot shows its still (rendered from the same rig, so it matches the live figure to the pixel) until the live
   figure has been drawn once, then the still fades under it. use-img = no WebGL: the still stays. */
.char.is-live:not(.use-img) img { opacity: 0; }
.char[data-still="off"]:not(.use-img) img { opacity: 0; }     /* slots whose still cannot match the live framing (bento stage) */

/* ============================================================
   SCENES: a rendered room plate (object-fit cover) with live characters standing on
   floor markers. main.js maps each .spot's plate coordinates (data-mx/my = feet,
   data-mh = height, all fractions of the plate) through the same cover transform.
   ============================================================ */
.scene { position: relative; overflow: hidden; }
.scene .plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.scene .cast { position: absolute; inset: 0; pointer-events: none; }
.scene .spot { position: absolute; will-change: transform; }
.scene .spot .char { position: absolute; inset: 0; }
.scene .spot::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -3%; height: 8%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.46) 0%, rgba(0,0,0,.2) 52%, transparent 74%); }   /* contact shadow */

/* ============================================================
   HERO: full-bleed room, three of the cast standing in it, copy on the left over a scrim
   ============================================================ */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; max-height: 1100px; display: flex; align-items: center; overflow: hidden; padding: calc(var(--nav-h) + 24px) 0 60px; background: #050505; }
.hero-scene { position: absolute; inset: 0; z-index: 0; }
.hero-scene .plate { transform-origin: 50% 60%; }
.hero-scene .scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.66) 28%, rgba(0,0,0,.18) 50%, rgba(0,0,0,0) 62%),
              linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 74%, rgba(0,0,0,.9) 96%, #000 100%); }
.hero-scene .cast { z-index: 1; }
.hero .container { position: relative; z-index: 2; width: 100%; }
.hero .copy { max-width: 620px; }
.hero h1 { font-size: clamp(2.6rem, 4.6vw, 4rem); max-width: 12ch; }
.hero .lede { margin-top: 22px; max-width: 50ch; font-size: 18px; color: rgba(255,255,255,.78); }
.hero .cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   TEAM: the big bust emerges from the dark, headline, portrait carousel of rooms
   ============================================================ */
.meet { text-align: center; padding-top: 40px; }
.reveal-stage { position: relative; height: 470px; margin: 0 auto 6px; display: flex; align-items: flex-end; justify-content: center; }
.meet .big-char { width: 560px; height: 440px; position: relative; --glow: 0; }
.meet .big-char::before { content: ""; position: absolute; left: 50%; top: 62%; width: min(760px, 96vw); height: 460px; transform: translate(-50%, -50%); opacity: var(--glow);
  background: radial-gradient(ellipse, rgba(236,72,153,.34) 0%, rgba(236,72,153,.09) 42%, transparent 66%); filter: blur(22px); pointer-events: none; }
.carousel-wrap { position: relative; margin-top: 56px; }
/* the carousel bleeds to the viewport edges so the neighbouring cards peek in the page gutters, dimmed toward black
   (Sintra's treatment); the first card still aligns with the container and stays fully lit */
/* --gutter = the page gutter (set by main.js from the wrap's left edge; scroll-padding cannot express it in CSS) */
.carousel-wrap { --gutter: clamp(20px, 5vw, 48px); }
.carousel { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.carousel-wrap::before, .carousel-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--gutter); z-index: 1; pointer-events: none; }
.carousel-wrap::before { left: calc(-1 * var(--gutter)); background: linear-gradient(90deg, var(--bg) 10%, rgba(5,5,5,.55) 60%, transparent); }
.carousel-wrap::after { right: calc(-1 * var(--gutter)); background: linear-gradient(270deg, var(--bg) 10%, rgba(5,5,5,.55) 60%, transparent); }
.carousel { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 8px 16px; }
.carousel::-webkit-scrollbar { display: none; }
.pcard { flex: 0 0 340px; scroll-snap-align: start; text-align: left; }
.pcard .art { position: relative; height: 500px; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.07); background: #0b0b0e;
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.pcard:hover .art { transform: translateY(-6px); box-shadow: 0 40px 80px -40px rgba(0,0,0,.9); }
.pcard .art .plate { transition: transform 1.2s var(--ease-out); transform-origin: 50% 70%; }
.pcard:hover .art .plate { transform: scale(1.04); }
.pcard .art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, transparent 22%, transparent 84%, rgba(0,0,0,.28) 100%); }
.pcard .art .tag { position: absolute; left: 14px; top: 14px; z-index: 2; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); }
.pcard h3 { font-size: 32px; margin-top: 22px; }
.pcard .role { color: var(--ink-2); margin-top: 6px; font-size: 17px; }
.pcard p { margin-top: 12px; font-size: 16px; line-height: 1.55; }
.car-btn { position: absolute; top: 226px; width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 24px; display: grid; place-items: center; z-index: 3; transition: background .25s var(--ease), transform .3s var(--ease-out); }
.car-btn:active { transform: scale(.94); }
.car-btn:hover { background: rgba(255,255,255,.22); }
.car-btn.prev { left: -30px; } .car-btn.next { right: -30px; }
.meet .cta { margin-top: 36px; }

/* ============================================================
   LINEUP: whole cast standing together
   ============================================================ */
/* the office: pinned for a beat, the scene grows from a card in the container to the full viewport while the team
   works (each character loops its desk job), then task chips pop up over their heads one by one */
.lineup { position: relative; padding: 0; }
.lineup-pin { position: relative; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.lineup-scene { position: absolute; inset: 0; border-radius: 0; transform-origin: 50% 50%; will-change: transform, border-radius;
  box-shadow: 0 60px 120px -60px rgba(0,0,0,.9); }
.lineup-scene .fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, transparent 18%, transparent 52%, rgba(0,0,0,.72) 100%); }
.lineup-copy { position: absolute; left: 0; right: 0; bottom: clamp(56px, 9vh, 110px); text-align: center; padding-inline: clamp(20px, 5vw, 48px); pointer-events: none; }   /* under the crew, on the desk edge (a title above them collided with the task chips) */
.lineup-copy h2 { max-width: 16ch; margin-inline: auto; text-shadow: 0 2px 24px rgba(0,0,0,.5); }
.scene .spot .task { position: absolute; left: 50%; bottom: calc(104% + var(--lift, 0px)); transform: translate(-50%, 8px) scale(.9); opacity: 0; white-space: nowrap; font-size: 13.5px; font-weight: 500; color: var(--ink);
  padding: 8px 12px 8px 10px; border-radius: 999px; background: rgba(12,12,14,.82); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px -16px rgba(0,0,0,.8); display: inline-flex; align-items: center; gap: 8px; pointer-events: none; }
.scene .spot .task::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); flex: none; }
.scene .spot .task.on { opacity: 1; transform: translate(-50%, 0) scale(1); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
#lineupScene .spot:nth-child(2n) .task { --lift: 44px; }
body:not(.enhanced) .lineup-pin { height: auto; display: block; }
body:not(.enhanced) .lineup-scene { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 10; border-radius: 24px; overflow: hidden; }
body:not(.enhanced) .lineup-copy { display: none; }
body:not(.enhanced) .scene .spot .task { display: none; }

/* ============================================================
   WORK: headline + vivid gradient task bento
   ============================================================ */
.work .bento { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 64px; }
.bento-card { position: relative; border-radius: var(--r-bento); overflow: hidden; padding: 44px; min-height: 520px; display: flex; flex-direction: column; color: #fff; }
.bento-card.wide { grid-column: 1 / -1; min-height: 440px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.bento-card.purple { background: linear-gradient(160deg, #7C3AED 0%, #5B21B6 60%, #4C1D95 100%); box-shadow: 0 0 120px -30px rgba(124,58,237,.6); }
.bento-card.blue { background: linear-gradient(160deg, #3B82F6 0%, #1D4ED8 70%); box-shadow: 0 0 120px -30px rgba(59,130,246,.5); }
.bento-card.orange { background: linear-gradient(160deg, #F59E0B 0%, #B45309 75%); box-shadow: 0 0 120px -30px rgba(245,158,11,.5); }
.bento-card h3 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); color: #fff; max-width: 15ch; }
.bento-card p { color: rgba(255,255,255,.8); margin-top: 16px; max-width: 42ch; font-size: 17px; }
.bento-card .stage { position: relative; margin-top: auto; height: 300px; }
.bento-card.wide .stage { margin-top: 0; height: 380px; }
.bento-card .stage .char { position: absolute; right: -2%; bottom: -46px; width: 60%; height: 122%; }
.bento-card.wide .stage .char { right: 2%; width: 56%; height: 128%; bottom: -52px; }
.bento-card .stage .chat { position: absolute; left: 0; top: 10%; width: 52%; display: flex; flex-direction: column; gap: 10px; z-index: 2; }
.bento-card.wide .stage .chat { top: 14%; width: 50%; }
.bubble { border-radius: 16px; padding: 12px 14px; font-size: 14px; line-height: 1.4; max-width: 100%; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); }
.bubble.you { background: #fff; color: #16161A; border-bottom-left-radius: 6px; }
.bubble.agent { background: rgba(0,0,0,.36); color: #fff; border: 1px solid rgba(255,255,255,.14); border-bottom-right-radius: 6px; align-self: flex-end; backdrop-filter: blur(6px); }
.bubble .k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .7; margin-bottom: 4px; }
.bubble .cost { display: inline-block; margin-top: 8px; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.16); font-size: 12px; font-weight: 600; }
.bubble.wait { background: #FFF7E6; color: #7A4A08; border: 1px solid rgba(245,158,11,.6); }

/* ============================================================
   HOW: sticky character stage + expanding steps
   ============================================================ */
.hiw .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); margin-top: 64px; align-items: start; }
.stage-col { position: sticky; top: calc(var(--nav-h) + 24px); }
.stage-box { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-bento); overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(80% 60% at 50% 100%, color-mix(in srgb, var(--glow, #8B5CF6) 40%, #000) 0%, #0b0b0e 70%); transition: background .8s var(--ease); }
.stage-box::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22;
  background: radial-gradient(circle, rgba(255,255,255,.35) 1px, transparent 1.6px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, transparent 95%); mask-image: linear-gradient(180deg, transparent, #000 40%, transparent 95%); }
.stage-box .char { position: absolute; inset: 5% 0 15% 0; opacity: 0; transition: opacity .5s var(--ease); }
.stage-box .char.on { opacity: 1; }
.stage-box .caption { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 3; padding: 14px 16px; border-radius: 14px; background: rgba(10,10,12,.7); border: 1px solid var(--line-2); backdrop-filter: blur(10px); font-size: 14px; color: var(--ink-2); }
.stage-box .caption b { color: #fff; font-weight: 600; }
.steps { padding-top: 24px; }
.st { padding: 26px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: baseline; cursor: pointer; }
.st:last-child { border-bottom: 1px solid var(--line); }
.st .n { color: var(--ink-2); font-size: 18px; }
.st h3 { font-size: 20px; font-weight: 500; color: var(--ink-2); transition: font-size .35s var(--ease), color .35s var(--ease); }
.st p { display: none; margin-top: 12px; font-size: 16px; max-width: 46ch; }
.st.is-active h3 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); color: var(--ink); }
.st.is-active .n { color: var(--ink); font-size: 24px; }
.st.is-active p { display: block; }

/* ============================================================
   SPLITS (character + a real card beside 64px copy)
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.split.rev .visual { order: -1; }
/* character beside its card, the card riding a few px over the suit (never the face) */
.split .visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 560px; }
.split.rev .visual { flex-direction: row-reverse; }
.split .lede { margin-top: 24px; }
.glow-bg { position: absolute; inset: -10%; background: radial-gradient(45% 45% at 40% 60%, var(--glow, rgba(139,92,246,.45)), transparent 70%); pointer-events: none; filter: blur(10px); }
.split .visual .char { position: relative; flex: 0 0 auto; width: 56%; height: 560px; z-index: 1; }
.split .visual .float { position: relative; flex: 0 0 auto; z-index: 2; margin-left: -40px; }
.split.rev .visual .float { margin-left: 0; margin-right: -40px; }
.appr-card { width: min(300px, 100%); border-radius: 20px; padding: 20px; background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--amber) 60%, var(--line)); box-shadow: 0 40px 100px -30px rgba(0,0,0,.95); }
.appr-card .who { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); }
.appr-card .who .badge { padding: 4px 9px; border-radius: 999px; background: rgba(245,158,11,.14); }
.appr-card .ask { font-size: 20px; font-weight: 500; line-height: 1.2; margin: 12px 0 10px; color: var(--ink); }
.appr-mock { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); padding: 12px 14px; margin-bottom: 14px; }
.appr-mock .lab { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.appr-mock .sub { font-size: 14px; font-weight: 600; margin-top: 2px; color: var(--ink); }
.appr-mock .body { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; }
.appr-btns { display: flex; gap: 10px; }
.appr-btns .btn { flex: 1; padding: 11px 0; font-size: 14px; }
.brief-card { width: min(300px, 100%); border-radius: 20px; background: var(--surface); border: 1px solid var(--line); padding: 20px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.95); }
.brief-card .k { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.brief-card .v { margin-top: 6px; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.brief-card .brain { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); font-size: 14px; }
.brief-card .brain b { color: var(--ink); font-weight: 500; }

/* ============================================================
   INTEGRATIONS, TRUST, BENEFITS, STATS, CTA, FAQ, FOOTER
   ============================================================ */
.marquee { position: relative; overflow: hidden; margin-top: 48px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 12px; width: max-content; animation: marq 44s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
.conn-chip { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; border-radius: var(--r-tile); padding: 13px 18px; background: rgba(255,255,255,.06); border: 1px solid var(--line); font-weight: 500; font-size: 15px; color: var(--ink); }
.conn-chip img { width: 22px; height: 22px; }
.conn-chip .mono { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; }
.rw-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.rw-pill { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 9px 16px 9px 9px; font-size: 15px; color: var(--ink-2); background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.rw-pill .tag { font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; color: #fff; }
.rw-pill.read .tag { background: #16A34A; } .rw-pill.write .tag { background: var(--amber); }
.feat-list { display: flex; flex-direction: column; gap: 28px; }
.feat h3 { font-size: 20px; }
.feat p { margin-top: 8px; font-size: 16px; }
.feat code { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: #93C5FD; background: rgba(59,130,246,.14); padding: 1px 6px; border-radius: 6px; }
.benefits { background: var(--bg-2); }
.ben-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 56px; }
.ben { grid-column: span 2; border-radius: 20px; padding: 26px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.ben:nth-child(4) { grid-column: 2 / span 2; } .ben:nth-child(5) { grid-column: 4 / span 2; }
.ben h3 { font-size: 19px; }
.ben p { margin-top: 10px; font-size: 15.5px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; text-align: center; }
.stat b { display: block; font-size: clamp(2.6rem, 5vw, 4.5rem); font-weight: 500; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.stat span { display: block; margin-top: 10px; color: var(--muted); font-size: 15px; }
.cta-wrap { text-align: center; position: relative; overflow: hidden; }
.cta-wrap .cast-row { display: flex; justify-content: center; align-items: flex-end; gap: 4px; margin: 0 auto 8px; }
.cta-wrap .cast-row .char { width: clamp(80px, 9vw, 130px); height: clamp(100px, 11.5vw, 170px); }
.cta-actions { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.faq { background: var(--bg-2); }
.faq-list { margin-top: 40px; max-width: 820px; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; padding: 22px 0; font-size: 20.8px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--muted); font-size: 24px; transition: transform .3s var(--ease); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 22px; max-width: 64ch; }
.footer { padding: 48px 0 56px; border-top: 1px solid var(--line); }
.footer .container { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer .f-links { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
.footer .f-links a { font-size: 14px; color: var(--muted); }
.footer .f-links a:hover { color: var(--ink); }
.footer .copy { width: 100%; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted-2); }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); will-change: transform, opacity; }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; } .reveal[data-d="2"] { transition-delay: .16s; } .reveal[data-d="3"] { transition-delay: .24s; }

@media (max-width: 1000px) {
  /* narrow screens: the copy sits above the room instead of over it; the room becomes an in-flow band */
  .hero { height: auto; min-height: 100svh; max-height: none; display: flex; flex-direction: column; align-items: stretch; padding-bottom: 0; }
  .hero .container { order: 1; } .hero-scene { order: 2; }
  .hero .copy { max-width: 640px; }
  .hero-scene { position: relative; height: 56vh; min-height: 380px; max-height: 620px; margin-top: 28px; }
  .nav-links { gap: 16px; } .nav .login { display: none; } .brand .by { display: none; }
  .hero-scene .plate { object-position: 62% 50%; }
  .hero-scene .scrim { background: linear-gradient(180deg, #050505 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 70%, #000 100%); }
  .reveal-stage { height: 380px; } .meet .big-char { width: 440px; height: 360px; }
  .work .bento { grid-template-columns: 1fr; }
  .bento-card.wide { grid-template-columns: 1fr; }
  .hiw .grid { grid-template-columns: 1fr; }
  .stage-col { position: relative; top: auto; }
  .split, .split.rev { grid-template-columns: 1fr; }
  .split.rev .visual { order: 0; }
  .ben-grid { grid-template-columns: 1fr 1fr; } .ben, .ben:nth-child(4), .ben:nth-child(5) { grid-column: auto; }
  .stats { grid-template-columns: 1fr 1fr; }
  .car-btn.prev { left: 4px; } .car-btn.next { right: 4px; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav .btn { margin-left: auto; }
}
@media (max-width: 760px) {
  :root { --nav-h: 64px; }
  .nav .login { display: none; }
  .nav .btn { margin-left: auto; }
  .hero { padding-top: calc(var(--nav-h) + 20px); }
  .hero-scene { height: 52vh; min-height: 340px; margin-top: 20px; }
  .hero-scene .plate { object-position: 72% 50%; }
  .hero-scene .scrim { background: linear-gradient(180deg, #050505 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 72%, #000 100%); }
  .hero .lede { font-size: 16px; }
  .reveal-stage { height: 280px; } .meet .big-char { width: 300px; height: 260px; }
  .lineup-scene { border-radius: 14px; }
  .pcard { flex-basis: 280px; } .pcard .art { height: 420px; }
  .bento-card { padding: 28px; min-height: 0; }
  .bento-card .stage, .bento-card.wide .stage { height: 340px; }
  .bento-card .stage .chat, .bento-card.wide .stage .chat { width: 100%; position: relative; top: auto; }
  .bento-card .stage .char, .bento-card.wide .stage .char { position: relative; right: auto; bottom: auto; width: 60%; height: 220px; margin: 8px auto 0; }
  .split .visual, .split.rev .visual { min-height: 0; flex-direction: column; }
  .split .visual .char { width: 80%; height: 400px; }
  .split .visual .float, .split.rev .visual .float { margin: -24px 0 0 0; width: 100%; }
  .ben-grid, .stats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  .stage-col { position: relative; top: auto; }
}

/* ============================================================
   MOTION LAYER + NEW SECTIONS (try it, a day on the floor, compare)
   ============================================================ */
/* nav progress hairline: orientation on a long page */
.nav .progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none; }
.nav .progress i { display: block; height: 100%; background: var(--blue); transform-origin: left; transform: scaleX(0); }

/* masked word reveal for headlines (JS splits into .w > .wi) */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .02em .12em; margin: 0 -.02em -.12em; }
[data-split] .wi { display: inline-block; will-change: transform; }

/* hero copy column */
.hero .copy { position: relative; z-index: 2; }


/* bento: 3D tilt + typed conversation */
.bento-card[data-tilt] { transform-style: preserve-3d; transition: transform .25s var(--ease), box-shadow .3s var(--ease); will-change: transform; }
.bento-card .stage .char { transition: transform .25s var(--ease); }
.bubble { position: relative; }
.bubble .typing { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: inline-flex; gap: 5px; }
.bubble .typing i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.7); animation: typ 1s ease-in-out infinite; }
.bubble.wait .typing i { background: rgba(122,74,8,.7); }
.bubble .typing i:nth-child(2) { animation-delay: .15s; } .bubble .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typ { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.bubble.agent .msg { opacity: 0; transition: opacity .35s var(--ease); }
.bubble.agent.done .msg { opacity: 1; }
.bubble.agent.done .typing { display: none; }
.bubble.agent:not(.is-on) .typing { display: none; }

/* ---------- TRY IT ---------- */
.tryit { background: var(--bg-2); }
.task-box { display: flex; align-items: center; gap: 10px; max-width: 760px; margin: 44px auto 0; padding: 8px 8px 8px 18px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line-2); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.task-box:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(59,130,246,.18); }
.task-box .dd { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-right: 12px; border-right: 1px solid var(--line); }
.task-box input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--ink); font-family: var(--font); font-size: 17px; padding: 10px 4px; }
.task-box input::placeholder { color: var(--muted-2); }
.task-box .btn { padding: 12px 20px; font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px auto 0; max-width: 820px; }
.chips button { font-size: 13.5px; font-weight: 500; color: var(--ink-2); padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease-out); }
.chips button:hover { background: rgba(255,255,255,.1); border-color: var(--line-2); transform: translateY(-1px); }
.router { position: relative; margin-top: 56px; }
.router-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.rslot { position: relative; text-align: center; padding: 14px 8px 12px; border-radius: 20px; border: 1px solid transparent; transition: border-color .35s var(--ease), background .35s var(--ease), transform .45s var(--ease-out); }
.rslot .char { width: 100%; height: 150px; }
.rslot span { display: block; margin-top: 6px; font-size: 13.5px; font-weight: 500; color: var(--muted); transition: color .3s var(--ease); }
.rslot.is-target { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: radial-gradient(90% 60% at 50% 100%, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%); transform: translateY(-8px); }
.rslot.is-target span { color: var(--ink); }
.router.busy .rslot:not(.is-target) { opacity: .55; }
.ticket { position: absolute; z-index: 6; left: 0; top: 0; max-width: 320px; padding: 10px 14px; border-radius: 12px; background: #fff; color: #16161A; font-size: 14px; font-weight: 500; box-shadow: 0 20px 40px -18px rgba(0,0,0,.8); opacity: 0; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.router-result { max-width: 640px; margin: 22px auto 0; padding: 18px 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease), transform .45s var(--ease-out), border-color .45s var(--ease); }
.router-result.on { opacity: 1; transform: none; }
.rr-head { display: flex; align-items: baseline; gap: 10px; }
.rr-dept { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c, var(--blue)); }
.rr-role { font-size: 18px; font-weight: 500; color: var(--ink); }
.router-result p { margin-top: 8px; font-size: 15px; }
.rr-foot { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.rr-cost b { color: var(--ink); font-weight: 600; }
.rr-appr { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; background: rgba(245,158,11,.14); color: #FCD38A; font-weight: 500; }
.rr-appr[hidden] { display: none; }

/* ---------- A DAY ON THE FLOOR (pinned horizontal pan) ---------- */
.day { position: relative; overflow: hidden; }
.day-pin { padding: clamp(80px, 10vh, 130px) 0 60px; }
.day-head { margin-bottom: 40px; }
.day-wrap { overflow: hidden; }
.day-track { display: flex; gap: 22px; width: max-content; padding-left: max(20px, calc((100vw - var(--maxw)) / 2 + 48px)); padding-right: 12vw; }
.day-card { position: relative; flex: 0 0 min(460px, 74vw); min-height: 360px; border-radius: var(--r-bento); padding: 28px 30px; overflow: hidden;
  background: radial-gradient(90% 70% at 100% 100%, color-mix(in srgb, var(--c, #8B5CF6) 42%, #0b0b0e) 0%, #0f0f12 60%); border: 1px solid rgba(255,255,255,.08); }
.day-card.night { background: linear-gradient(160deg, #1a1a24, #0b0b0e); }
.day-card .time { font-size: clamp(2.6rem, 4vw, 3.6rem); font-weight: 500; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.day-card .who { margin-top: 10px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, var(--c, #fff) 80%, #fff); }
.day-card p { margin-top: 12px; font-size: 15.5px; max-width: 26ch; }
.day-card .appr { position: absolute; left: 30px; bottom: 26px; display: inline-flex; padding: 6px 11px; border-radius: 999px; background: rgba(245,158,11,.16); color: #FCD38A; font-size: 12.5px; font-weight: 600; }
.day-card .char { position: absolute; right: -6%; bottom: -8%; width: 52%; height: 62%; }
.day-rule { position: relative; margin-top: 34px; height: 2px; background: var(--line); }
.day-rule i { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--blue); }
.day-rule span { position: absolute; top: 10px; font-size: 12px; color: var(--muted-2); transform: translateX(-50%); }
.day-rule span:nth-of-type(1) { left: 0; transform: none; } .day-rule span:nth-of-type(2) { left: 33.3%; } .day-rule span:nth-of-type(3) { left: 66.6%; } .day-rule span:nth-of-type(4) { left: 100%; transform: translateX(-100%); }

/* ---------- COMPARE ---------- */
.cmp { margin-top: 48px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.cmp-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.25fr; gap: 0; }
.cmp-row + .cmp-row { border-top: 1px solid var(--line); }
.cmp-row > span { padding: 18px 20px; font-size: 15px; color: var(--muted); display: flex; align-items: center; }
.cmp-row .lbl { color: var(--ink); font-weight: 500; }
.cmp-row .fab { background: rgba(59,130,246,.08); color: var(--ink); border-left: 1px solid rgba(59,130,246,.35); }
.cmp-head > span { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cmp-head .fab { color: #93C5FD; }
.cmp-row .yes::before { content: "\2713"; color: #4ADE80; font-weight: 700; margin-right: 10px; }
.cmp-row .no::before { content: "\2715"; color: var(--muted-2); font-weight: 700; margin-right: 10px; font-size: 12px; }
.cmp-row .fab.yes::before { color: #93C5FD; }

/* ---------- benefits: cursor spotlight cards ---------- */
.ben { position: relative; overflow: hidden; }
.ben::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(59,130,246,.16), transparent 62%); }
.ben::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.45), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.ben:hover::before, .ben:hover::after { opacity: 1; }
.ben > * { position: relative; }

/* ---------- steps: progress line ---------- */
.steps { position: relative; }
.steps-line { position: absolute; left: 10px; top: 24px; bottom: 24px; width: 2px; background: var(--line); }
.steps-line i { display: block; width: 100%; height: 25%; background: var(--ink); transition: height .6s var(--ease); }
.st { padding-left: 22px; }

/* ---------- marquee: GSAP-driven when enhanced ---------- */
.enhanced .marquee-track { animation: none; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .router-row { grid-template-columns: repeat(3, 1fr); }
  .day-wrap { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .day-wrap::-webkit-scrollbar { display: none; }
  .day-track { padding-left: 20px; padding-right: 20px; }
  .day-card { scroll-snap-align: start; }
  .day-rule { display: none; }
  .cmp { overflow-x: auto; }
  .cmp-row { min-width: 720px; }
}
@media (max-width: 760px) {
  .task-box { flex-wrap: wrap; border-radius: 22px; padding: 10px; }
  .task-box .dd { display: none; }
  .task-box .btn { width: 100%; }
  .router-row { grid-template-columns: repeat(2, 1fr); }
  .rslot .char { height: 120px; }
  .day-card { flex-basis: 84vw; min-height: 320px; }
  .day-card .char { width: 46%; height: 52%; }
}
@media (prefers-reduced-motion: reduce) {
  [data-split] .wi { transform: none !important; }
  .bubble.agent .msg { opacity: 1; } .bubble .typing { display: none !important; }
  .day-wrap { overflow-x: auto; }
  .day-rule { display: none; }
}

/* bento composition: give the conversation its own column, cost on its own line */
.bento-card.wide .stage .chat { width: 46%; }
.bento-card.wide .stage .char { right: 0; width: 50%; }
.bento-card .stage .chat { width: 50%; }
.bento-card .stage .char { right: -4%; width: 56%; }
.bubble .cost { display: block; width: max-content; margin-top: 10px; }

/* day cards: the character sits on the card floor (the 3D layer is not clipped by overflow) */
.day-card .char { right: 0; bottom: 0; width: 48%; height: 58%; }

/* ============================================================
   PREMIUM PASS: curtain, GSAP-driven reveals, ambient depth
   ============================================================ */
.curtain { position: fixed; inset: 0; z-index: 90; background: #050505; display: grid; place-content: center; gap: 18px; justify-items: center; }
.curtain .mark { opacity: 0; animation: markin .9s var(--ease-out) .1s forwards; }
.curtain .mark img { display: block; height: 28px; width: auto; }
.curtain .bar { width: 120px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.curtain .bar i { display: block; height: 100%; width: 40%; background: var(--blue); animation: barrun 1.1s var(--ease) infinite; }
@keyframes markin { to { opacity: 1; } }
@keyframes barrun { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
body.no-curtain .curtain { display: none; }
@media (prefers-reduced-motion: reduce) { .curtain { display: none; } }

/* reveals are GSAP-driven when enhanced (no CSS transition fighting the tween) */
.enhanced .reveal { transition: none; }

/* ambient colour pools: slow, transform-only, background only */
.tryit, .compare, .cta-wrap { position: relative; overflow: hidden; }
.tryit::before, .compare::before, .cta-wrap::before { content: ""; position: absolute; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; border-radius: 50%; pointer-events: none; filter: blur(40px); opacity: .55; animation: drift 26s ease-in-out infinite alternate; z-index: 0; }
.tryit::before { left: -20vw; top: -10vw; background: radial-gradient(circle, rgba(59,130,246,.16), transparent 62%); }
.compare::before { right: -22vw; bottom: -20vw; background: radial-gradient(circle, rgba(139,92,246,.14), transparent 62%); animation-delay: -9s; }
.cta-wrap::before { left: 50%; top: -30vw; transform: translateX(-50%); background: radial-gradient(circle, rgba(245,158,11,.14), transparent 62%); animation-name: driftx; }
.tryit > .container, .compare > .container, .cta-wrap > .container { position: relative; z-index: 1; }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(8vw, 6vw); } }
@keyframes driftx { from { transform: translateX(-56%); } to { transform: translateX(-44%); } }

/* carousel drag */
.carousel { cursor: grab; }
.carousel.dragging { cursor: grabbing; scroll-snap-type: none; }
.carousel.dragging .pcard { pointer-events: none; }

/* ============================================================
   MOBILE LAYER (2026-09-19): phones get their own composition, not a squeezed desktop.
   Rules: one column, edge-to-edge media, 44px targets, the same black / blue / pill language.
   ============================================================ */
/* nav: hamburger + full-height sheet below 900px */
.nav-toggle { display: none; position: relative; width: 44px; height: 44px; margin-left: 8px; margin-right: -8px; border-radius: 12px; flex: none; }
.nav-toggle span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .35s var(--ease-out), top .35s var(--ease-out); }
.nav-toggle span:nth-child(1) { top: 17px; } .nav-toggle span:nth-child(2) { top: 25px; }
.nav.menu-open .nav-toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav.menu-open .nav-toggle span:nth-child(2) { top: 21px; transform: rotate(-45deg); }
.mobile-menu { position: fixed; inset: var(--nav-h) 0 0 0; background: rgba(5,5,5,.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding: 12px clamp(20px, 5vw, 48px) calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; opacity: 0; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .35s var(--ease-out); }
.mobile-menu[hidden] { display: none; }
.nav.menu-open .mobile-menu { opacity: 1; transform: none; }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a { font-size: 28px; font-weight: 500; letter-spacing: -.02em; padding: 16px 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(10px); }
.nav.menu-open .mobile-menu nav a { opacity: 1; transform: none; transition: opacity .4s var(--ease-out), transform .5s var(--ease-out); }
.nav.menu-open .mobile-menu nav a:nth-child(2) { transition-delay: .04s; } .nav.menu-open .mobile-menu nav a:nth-child(3) { transition-delay: .08s; }
.nav.menu-open .mobile-menu nav a:nth-child(4) { transition-delay: .12s; } .nav.menu-open .mobile-menu nav a:nth-child(5) { transition-delay: .16s; }
.mobile-menu .mm-foot { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mobile-menu .mm-foot .btn { width: 100%; }
body.menu-open { overflow: hidden; }
.nav.menu-open { background: rgba(5,5,5,.96); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav .btn { margin-left: auto; }
}
@media (max-width: 760px) {
  /* type + rhythm */
  body { font-size: 16px; }
  .section { padding-block: 64px; }
  .hero h1 { font-size: clamp(2.25rem, 10.4vw, 2.75rem); max-width: none; }
  .t-48 { font-size: clamp(1.9rem, 8.6vw, 2.3rem); }
  .t-40 { font-size: clamp(1.6rem, 7vw, 2rem); }
  .lede { font-size: 16px; }
  .head .lede { margin-top: 14px; }
  .hero .cta .btn { flex: 1 1 auto; justify-content: center; }
  .nav .btn-white { padding: 10px 16px; font-size: 15px; }
  /* meet: the bust and edge-to-edge cards that peek */
  .meet { padding-top: 24px; }
  .carousel-wrap { margin-top: 36px; }
  .car-btn { display: none; }
  .carousel { padding-block: 8px 16px; gap: 14px; }
  .pcard { flex-basis: min(300px, 78vw); }
  .pcard .art { height: min(440px, 112vw); }
  .pcard h3 { font-size: 26px; margin-top: 16px; }
  .pcard p { font-size: 15px; }
  .meet .cta { margin-top: 28px; }
  /* lineup */
  .lineup { padding-top: 12px; }
  body:not(.enhanced) .lineup-scene { border-radius: 0; }
  /* work bento */
  .work .bento { gap: 14px; margin-top: 40px; }
  .bento-card { padding: 24px; border-radius: 20px; }
  .bento-card h3 { font-size: 1.6rem; }
  .bento-card p { font-size: 15.5px; margin-top: 12px; }
  /* try it */
  .task-box { margin-top: 32px; }
  .task-box input { font-size: 16px; padding: 8px 6px; }
  .chips { gap: 8px; margin-top: 14px; }
  .chips button { padding: 10px 14px; font-size: 14px; }
  .router-row { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .rslot { padding: 10px 4px 10px; border-radius: 16px; }
  .rslot .char { height: 96px; }
  .rslot span { font-size: 12.5px; }
  /* how it works */
  .stage-box { aspect-ratio: 4 / 4.4; }
  .steps { padding-top: 12px; }
  /* day */
  .day-pin { padding: 64px 0 40px; }
  .day-head { margin-bottom: 24px; }
  .day-card { flex-basis: 82vw; min-height: 300px; padding: 22px 22px; }
  .day-track { gap: 14px; }
  /* splits */
  .split { gap: 28px; }
  .split .visual .char { width: 78%; height: 340px; }
  .split .lede { margin-top: 16px; }
  /* compare: one card per row, column names as labels */
  .cmp { margin-top: 32px; overflow: visible; border-radius: 16px; }
  .cmp-row { grid-template-columns: 1fr; min-width: 0; padding: 6px 0 12px; }
  .cmp-row.cmp-head { display: none; }
  .cmp-row > span { padding: 8px 18px; font-size: 15px; display: block; }
  .cmp-row .lbl { padding: 12px 18px 4px; font-size: 17px; }
  .cmp-row > span[data-h]::before { content: attr(data-h); display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 2px; }
  .cmp-row .yes::before, .cmp-row .no::before { display: none; }
  .cmp-row .fab { border-left: 0; margin: 6px 12px 0; padding: 10px 12px; border-radius: 12px; }
  .cmp-row .fab[data-h]::before { color: #93C5FD; }
  /* benefits / stats / cta / faq / footer */
  .ben-grid { gap: 12px; margin-top: 36px; }
  .ben { padding: 22px; border-radius: 16px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 28px 12px; margin-top: 40px; }
  .stat b { font-size: clamp(2.4rem, 11vw, 3rem); }
  .cta-wrap .cast-row { flex-wrap: wrap; justify-content: center; gap: 0 2px; max-width: 360px; }
  .cta-wrap .cast-row .char { width: 30%; height: 118px; }
  .cta-wrap .cta { display: flex; flex-direction: column; gap: 10px; }
  .cta-wrap .cta .btn { width: 100%; }
  .faq-list { margin-top: 24px; }
  .faq-list summary { font-size: 18px; padding: 18px 0; gap: 16px; }
  .faq-list details p { font-size: 15.5px; }
  .footer { padding: 40px 0 calc(40px + env(safe-area-inset-bottom)); }
  .footer .container { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer .f-links { margin-left: 0; gap: 12px 18px; }
  .footer .f-links a { font-size: 15px; padding: 4px 0; }
}
@media (max-width: 400px) {
  .hero .cta { flex-direction: column; }
  .hero .cta .btn { width: 100%; }
}
@media (max-width: 760px) {
  /* bento: the stage flows (conversation, then the character) instead of a fixed-height box; the desktop
     composition rules further up gave the chat 46% width and let the character slot run past the card */
  .bento-card .stage, .bento-card.wide .stage { height: auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
  .bento-card .stage .chat, .bento-card.wide .stage .chat { position: relative; top: auto; left: auto; width: 100%; }
  .bento-card .stage .char, .bento-card.wide .stage .char { position: relative; inset: auto; right: auto; bottom: auto; width: 62%; height: 230px; margin: 6px auto 0; }
}

/* ======================================================================
   PREMIUM PASS (2026-09-20, measured against sintra.ai)
   Tone: white copy with tight tracking instead of grey; taller section rhythm; finished buttons (Sintra's
   white nav CTA with its inset highlight); soft colour halos behind the bento; hover and focus states on
   every interactive surface; an animated FAQ; balanced headings and pretty paragraphs.
   ====================================================================== */
:root { interpolate-size: allow-keywords; }
h1, h2, h3 { letter-spacing: -.03em; text-wrap: balance; }
.t-64 { line-height: 1.0; letter-spacing: -.032em; }
.t-48 { line-height: 1.06; }
p { color: rgba(255,255,255,.72); text-wrap: pretty; }
.lede { font-size: 19px; line-height: 1.5; letter-spacing: -.012em; color: rgba(255,255,255,.76); max-width: 60ch; }
.hero .lede { font-size: 20px; color: rgba(255,255,255,.88); max-width: 42ch; }
.head .lede { margin-top: 20px; }
.pcard p, .day-card p, .st p, .ben p, .faq-list details p { color: rgba(255,255,255,.66); }
.pcard .role { color: rgba(255,255,255,.82); }
.bento-card p { color: rgba(255,255,255,.86); }
@media (min-width: 901px) { .section { padding-block: clamp(110px, 12vh, 168px); } }

/* buttons */
.btn { padding: 14px 22px; transition: transform .35s var(--ease-out), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .35s var(--ease-out); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn-blue:hover { background: var(--blue-deep); box-shadow: 0 12px 30px -12px rgba(59,130,246,.65); }
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: var(--line-2); }
.btn-white { padding: 11px 20px; border: 1px solid #E2E8F0; box-shadow: inset 0 1.5px 0 #fff, inset 0 -1.5px 0 #E9EEF3, 0 0 1.5px rgba(51,65,85,.25); }
.btn-white:hover { background: #fff; box-shadow: inset 0 1.5px 0 #fff, inset 0 -1.5px 0 #E9EEF3, 0 8px 20px -10px rgba(0,0,0,.7); }
.nav-links a, .nav .login, .footer .f-links a { transition: color .25s var(--ease); }
.nav-links a:hover, .nav .login:hover { color: #fff; }

/* surfaces */
.ben, .day-card, .conn-chip { transition: transform .5s var(--ease-out), border-color .3s var(--ease), box-shadow .5s var(--ease-out), background .3s var(--ease); }
.ben:hover, .day-card:hover { transform: translateY(-3px); border-color: var(--line-2); }
.conn-chip:hover { background: rgba(255,255,255,.1); border-color: var(--line-2); }
.bento-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 40px 120px -40px var(--glow, rgba(0,0,0,.6)), 0 0 90px -24px var(--glow, transparent); }
.bento-card.purple { --glow: rgba(124,58,237,.6); }
.bento-card.blue { --glow: rgba(59,130,246,.55); }
.bento-card.orange { --glow: rgba(245,158,11,.5); }
.car-btn { border: 1px solid rgba(255,255,255,.14); transition: background .25s var(--ease), transform .3s var(--ease-out), border-color .25s var(--ease); }
.car-btn:hover { transform: scale(1.05); border-color: rgba(255,255,255,.28); }
.task-box { transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.task-box:focus-within { border-color: rgba(59,130,246,.65); box-shadow: 0 0 0 4px rgba(59,130,246,.16); }
.cmp-row { transition: background .25s var(--ease); }
.cmp-row:not(.cmp-head):hover { background: rgba(255,255,255,.03); }

/* FAQ: the answer slides open instead of popping (Chrome 131+, harmless elsewhere) */
.faq-list summary { transition: color .25s var(--ease); }
.faq-list summary:hover { color: #fff; }
.faq-list summary:hover::after { color: var(--ink); }
.faq-list details::details-content { height: 0; overflow: clip; transition: height .45s var(--ease-out), content-visibility .45s allow-discrete; }
.faq-list details[open]::details-content { height: auto; }

/* details */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible, .car-btn:focus-visible { outline-offset: 4px; border-radius: 999px; }
.char img, .plate { -webkit-user-drag: none; user-select: none; }
.footer { padding: 64px 0 72px; }
.footer .copy { color: rgba(255,255,255,.5); }
@media (prefers-reduced-motion: reduce) { .btn, .ben, .day-card, .car-btn, .conn-chip { transition: none; } .btn:hover { transform: none; } }
@media (max-width: 760px) { .lede, .hero .lede { font-size: 17px; max-width: none; } .hero .lede { color: rgba(255,255,255,.84); } .btn { padding: 13px 20px; } }

/* tablet landscape and small laptops (900 to 1280): two columns are too narrow for a split whose character bleeds over its card (the
   canvas paints above the page), so the copy goes above and the character and card share a row beneath it;
   the hero plate favours the cast on the right */
@media (min-width: 901px) and (max-width: 1280px) {
  .split, .split.rev { grid-template-columns: 1fr; gap: 32px; }
  .split .visual, .split.rev .visual { order: 1; }              /* copy first, then the character and its card, in both directions */
  .split.rev .visual { flex-direction: row-reverse; }
  .split > div:not(.visual) { max-width: 640px; }
  .split .visual { min-height: 460px; justify-content: center; gap: 28px; }
  .split .visual .char { width: 40%; max-width: 380px; height: 460px; }
  .split .visual .float, .split.rev .visual .float { margin: 0; }
  .hero-scene .plate { object-position: 70% 50%; }   /* the third astronaut stays in frame */
}