/* ============================================================================
   Hermoso — marketing design system  ·  v11 "Daylight Atelier"
   A premium LIGHT direction: warm paper ground, crisp white gallery cards
   floating on soft realistic shadows, near-black warm ink, ONE rationed deep
   coral accent, Fraunces editorial display + Hanken grotesque + mono labels.
   Not sterile white, not dark — the light of a studio at midday. Every class/id
   from the prior system is preserved so the markup + JS keep working.
   ========================================================================== */

/* Self-hosted fonts (latin subset, variable) — no render-blocking third-party
   request chain, and the LCP headline faces are preloaded in the HTML. */
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('fonts/fraunces-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces'; font-style:italic; font-weight:400 500; font-display:swap;
  src:url('fonts/fraunces-italic-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Hanken Grotesk'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('fonts/hanken-latin.woff2') format('woff2');
}
/* Metric-matched fallback for the display face (Georgia overridden to Fraunces'
   own metrics) — the pre-swap headline is already the right size, so the LCP
   headline is recorded at first paint instead of at the Fraunces swap. */
@font-face{
  font-family:'Fraunces Fallback';
  src:local('Georgia');
  ascent-override:97.8%; descent-override:25.5%; line-gap-override:0%; size-adjust:107%;
}

:root{
  /* warm paper ground — ivory/oat, never clinical white; white is reserved for the
     CARDS, so they read as gallery prints floating on paper. */
  --bg:        #faf8f3;
  --bg-2:      #f3efe6;   /* deeper warm sand — alternating section wash */
  --surface:   #ffffff;   /* crisp card white — pops off the paper */
  --surface-2: #fbfaf5;   /* card hover / recessed */
  --surface-3: #f1ece2;   /* chips, inset controls */

  /* hairlines — warm ink at low alpha; a line is a whisper, not a border */
  --line:      rgba(28,24,17,.10);
  --line-2:    rgba(28,24,17,.17);
  --hair:      rgba(28,24,17,.05);

  /* warm near-black ink — AA+ on both paper and white */
  --text:   #1a1712;
  --muted:  #57524a;   /* ~7:1 body */
  --faint:  #8a8377;   /* ~4.5:1, decorative / ≥16px only */
  --ink-well: #ffffff;

  /* coral — Hermoso "Full Bloom". On light it DEEPENS so it stays punchy + legible;
     coral is punctuation, not paint — most of the page is warm monochrome. */
  --coral:        #c8442a;   /* coral as text/accent on light (AA on white) */
  --coral-solid:  #db5238;   /* primary fill */
  --coral-deep:   #a5371f;   /* pressed / deep */
  --plum:         #8a5772;   /* secondary warm */
  --cream:        #fff6f2;   /* ink on coral fills */
  --gold:         #bd7a34;   /* warm secondary spark */

  --glow:   rgba(219,82,56,.20);
  --glow-2: rgba(138,87,114,.14);

  /* type */
  --display: 'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', serif;
  --body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* shape */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --pill: 999px;

  /* elevation — soft, warm, LAYERED shadows are the premium tell on light: a tight
     contact shadow + a wide diffuse lift, both warm-tinted (never neutral grey). */
  --el-1: 0 1px 2px rgba(60,45,25,.05), 0 5px 16px -8px rgba(60,45,25,.10);
  --el-2: 0 2px 6px rgba(60,45,25,.05), 0 34px 60px -34px rgba(50,38,22,.24);
  --el-glow: 0 2px 6px rgba(60,45,25,.05), 0 40px 80px -36px rgba(200,68,42,.28);

  --maxw: 1180px;
  --t: 240ms cubic-bezier(.2,.7,.2,1);
  --t-slow: 600ms cubic-bezier(.2,.7,.2,1);
  --ease-hero: cubic-bezier(.19,1,.22,1);
  --ease-ui:   cubic-bezier(.33,1,.68,1);
  --ease-exit: cubic-bezier(.32,0,.67,0);
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:96px; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
:focus-visible{ outline:2px solid var(--coral); outline-offset:3px; border-radius:6px; }
.btn:focus-visible{ outline:2px solid var(--coral-deep); outline-offset:3px; }
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--coral-solid); color:var(--cream); padding:10px 16px; border-radius:0 0 10px 0; font-weight:600; }
.skip:focus{ left:0; }
.field-err{ display:block; color:var(--coral); font-size:.8rem; margin-top:8px; text-align:left; padding-left:8px; }
::selection{ background:rgba(219,82,56,.18); color:var(--coral-deep); }

/* ── ambient light + fine paper grain ────────────────────────────────────── */
body::before{ /* fine paper grain — barely there, multiply so it tints the paper, not the cards */
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.03; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
body::after{ /* daylight — a soft warm coral wash spilling from the top, a whisper of
    plum lower down. Frames with LIGHT, never a dark vignette. */
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(125% 58% at 50% -14%, rgba(219,82,56,.09), transparent 56%),
    radial-gradient(80% 50% at 88% 8%, rgba(189,122,52,.06), transparent 60%),
    radial-gradient(90% 60% at 50% 116%, rgba(138,87,114,.06), transparent 64%);
}
/* the dark "traveling ember" is retired on light. If a cached JS build still injects
   the nodes, keep them invisible (the daylight wash above is the light-theme signature). */
.ember{ display:none !important; }
.page{ position:relative; z-index:1; }
/* hairline-as-light — a divider drawn in warm coral, fading at both ends */
.hair-light{ height:1px; border:0; background:linear-gradient(90deg, transparent, rgba(200,68,42,.42), transparent); }
.hair-soft{ height:1px; border:0; background:linear-gradient(90deg, transparent, rgba(28,24,17,.12), transparent); }

/* ── type scale ──────────────────────────────────────────────────────────── */
.display{ font-family:var(--display); font-weight:500; line-height:1.02; letter-spacing:-.022em; font-optical-sizing:auto; }
h1,h2,h3{ font-family:var(--display); font-weight:500; line-height:1.05; letter-spacing:-.022em; font-optical-sizing:auto; color:var(--text); }
.h1{ font-size:clamp(2.7rem, 6vw, 5rem); }
.h2{ font-size:clamp(2.05rem, 4.2vw, 3.45rem); line-height:1.04; }
.h3{ font-size:clamp(1.35rem, 2vw, 1.7rem); }
.serif-i,.key{ font-family:var(--display); font-style:italic; font-weight:500; }
/* hero/headline keyword — editorial italic in deep coral; on light it carries a soft
   coral underline-swash instead of a glow, so it reads as ink, not neon. */
.key{ color:var(--coral); position:relative; }
.key::after{ content:""; position:absolute; left:2%; right:2%; bottom:.02em; height:.09em; border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(219,82,56,.42) 18%, rgba(219,82,56,.42) 82%, transparent); }
.coral-ink{ color:var(--coral); }
.cream-ink{ color:var(--cream); }

/* refined warm gradient — reserved for big numerals in the stat band */
.grad{
  background:linear-gradient(102deg, var(--gold), var(--coral) 48%, var(--coral-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

p{ color:var(--muted); }
.lead{ font-size:clamp(1.08rem,1.5vw,1.3rem); line-height:1.58; color:#4c473f; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono);
  font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--coral);
}
.eyebrow::before{ content:""; width:22px; height:1px; background:linear-gradient(90deg,transparent,var(--coral)); }
.eyebrow.center::before{ display:none; }
/* Latin-display choices (mono + uppercase + wide tracking) break connected scripts —
   restore the natural body font + no forced case for RTL + CJK/Thai. */
:root[dir="rtl"] .eyebrow,
:root[lang^="ja"] .eyebrow, :root[lang^="ko"] .eyebrow,
:root[lang^="zh"] .eyebrow, :root[lang^="th"] .eyebrow{
  font-family:var(--body); text-transform:none; letter-spacing:.02em; font-weight:600;
}

/* ── layout ──────────────────────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:26px; }
.section{ padding-block:clamp(76px,9.5vw,136px); position:relative; }
.section.tight{ padding-block:clamp(50px,6vw,84px); }
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.measure{ max-width:60ch; }
.measure-sm{ max-width:44ch; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:600; font-size:.96rem; letter-spacing:-.01em;
  padding:13px 22px; border-radius:var(--pill);
  border:1px solid transparent; transition:var(--t); white-space:nowrap; isolation:isolate;
}
.btn .arr{ transition:transform var(--t); }
.btn:hover .arr{ transform:translateX(3px); }
.btn-primary{
  background:linear-gradient(180deg, #e75f43, var(--coral-solid) 52%, var(--coral-deep));
  color:var(--cream);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 10px 26px -10px rgba(200,68,42,.5), 0 2px 6px rgba(120,40,20,.14);
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 16px 36px -12px rgba(200,68,42,.55), 0 3px 8px rgba(120,40,20,.16); }
.btn-primary:active{ transform:translateY(0); background:var(--coral-deep); }
.btn-ghost{ background:#fff; color:var(--text); border-color:var(--line-2); box-shadow:0 1px 2px rgba(60,45,25,.04); }
.btn-ghost:hover{ background:#fff; border-color:var(--coral); color:var(--coral-deep); }
.btn-lg{ padding:16px 28px; font-size:1.02rem; }
.btn-text{ display:inline-flex; align-items:center; gap:7px; color:var(--text); font-weight:600; }
.btn-text:hover{ color:var(--coral); }
.btn-block{ width:100%; }

/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:60;
  backdrop-filter:saturate(150%) blur(16px);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  background:rgba(250,248,243,.72);
  border-bottom:1px solid transparent;
  transition:border-color var(--t), background var(--t), box-shadow var(--t);
}
.nav.scrolled{ border-color:var(--line); background:rgba(250,248,243,.9); box-shadow:0 1px 20px -12px rgba(60,45,25,.3); }
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:70px; gap:24px; }
.brand{ display:inline-flex; align-items:center; gap:11px; font-family:var(--display); font-size:1.4rem; font-weight:600; letter-spacing:-.02em; color:var(--text); }
.brand .bloom{ width:27px; height:27px; transition:transform var(--t-slow); }
.brand:hover .bloom{ transform:rotate(135deg); }
.brand b{ font-weight:600; }
.nav-links{ display:flex; align-items:center; gap:32px; }
.nav-links a{ position:relative; font-size:.93rem; font-weight:500; color:var(--muted); transition:color var(--t); }
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1px; background:var(--coral); transition:right var(--t); opacity:.85; }
.nav-links a:hover{ color:var(--text); }
.nav-links a:hover::after{ right:0; }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-cta .btn-ghost{ background:transparent; border-color:transparent; color:var(--muted); box-shadow:none; padding-inline:14px; }
.nav-cta .btn-ghost:hover{ color:var(--text); background:rgba(28,24,17,.05); }
.nav-toggle{ display:none; }

/* ── bloom mark ──────────────────────────────────────────────────────────── */
.bloom-petals{ transform-origin:center; }
.spin-slow{ animation:spin 40s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ── glow orbs — on light these are soft WARM washes, not blur-bombs ──────── */
.glow{ position:absolute; border-radius:50%; filter:blur(100px); pointer-events:none; z-index:0; opacity:.5; }
.glow-coral{ background:radial-gradient(circle, rgba(219,82,56,.22), rgba(219,82,56,.08) 46%, transparent 72%); }
.glow-plum{ background:radial-gradient(circle, rgba(138,87,114,.16), transparent 70%); }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{ position:relative; padding-top:clamp(58px,8vw,116px); padding-bottom:clamp(40px,5vw,64px); overflow:hidden; }
.hero .glow-1{ width:820px; height:820px; top:-420px; left:50%; transform:translateX(-50%); filter:blur(130px); opacity:.5; }
.hero .glow-2{ width:540px; height:540px; top:20px; right:-220px; opacity:.4; }
.hero-inner{ position:relative; z-index:2; text-align:center; }
.hero h1{ font-size:clamp(3rem, 7.4vw, 6rem); line-height:1.02; max-width:15ch; margin-inline:auto; }
.hero .lead{ margin:28px auto 0; max-width:58ch; }
.hero-form{ margin:38px auto 0; display:flex; gap:10px; max-width:486px; }
.hero-cta{ margin:36px auto 0; display:inline-flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; }
.hero-note{ margin-top:16px; font-size:.86rem; color:var(--faint); }
.hero-note b{ color:var(--muted); font-weight:600; }

.field{
  flex:1; display:flex; align-items:center;
  background:#fff; border:1px solid var(--line-2); border-radius:var(--pill);
  padding:4px 4px 4px 20px; transition:border-color var(--t), box-shadow var(--t); box-shadow:var(--el-1);
}
.field:focus-within{ border-color:var(--coral); box-shadow:0 0 0 4px rgba(219,82,56,.12); }
.field input{ flex:1; background:none; border:none; outline:none; color:var(--text); font-size:.98rem; min-width:0; }
.field input::placeholder{ color:var(--faint); }

/* ── hero reel (showcase strip) — horizontally scrollable: drag / swipe / wheel ── */
.marquee{ position:relative; margin-top:clamp(48px,6vw,80px); overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; cursor:grab; overscroll-behavior-x:contain; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.marquee::-webkit-scrollbar{ display:none; }
.marquee.dragging{ cursor:grabbing; }
.marquee.dragging .reel-card{ pointer-events:none; }
.marquee-track{ display:flex; align-items:center; gap:18px; width:max-content; padding-inline:6px; padding-block:8px; }
.reel-card{
  position:relative; flex:0 0 auto; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); background:var(--surface); box-shadow:var(--el-2);
}
.reel-card video, .reel-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.reel-card.v{ width:206px; aspect-ratio:9/16; }
.reel-card.s{ width:300px; aspect-ratio:1/1; }
.reel-card.w{ width:488px; aspect-ratio:16/9; }
.reel-card::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(28,24,17,.06); border-radius:inherit; pointer-events:none; }
/* brand chip on a reel card — stays dark glass (it sits ON video, needs legibility) */
.reel-card .rc-brand{ position:absolute; left:10px; bottom:10px; z-index:2; display:inline-flex; align-items:center; gap:6px; max-width:calc(100% - 20px); padding:5px 11px; border-radius:var(--pill); font-size:.72rem; font-weight:650; letter-spacing:.01em; line-height:1; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:rgba(20,16,14,.5); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); box-shadow:0 0 0 1px rgba(255,255,255,.14) inset; pointer-events:none; }

/* poster-shield — a still frame held over each video until it is actually playing */
.pshield{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; opacity:1; transition:opacity .32s ease; pointer-events:none; background:var(--surface-3); }
.pshield.gone{ opacity:0; }

/* ── trust strip ─────────────────────────────────────────────────────────── */
.trust{ border-block:1px solid var(--line); background:rgba(255,255,255,.5); }
.trust-in{ display:flex; flex-direction:column; align-items:center; justify-content:center; flex-wrap:wrap; gap:16px 38px; padding-block:32px; }
.trust-label{ font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.trust-logos{ display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; justify-content:center; }
.model-chip{ display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border:1px solid var(--line); border-radius:var(--pill); background:#fff; font-family:var(--mono); font-weight:500; font-size:.82rem; letter-spacing:.01em; color:var(--muted); box-shadow:0 1px 2px rgba(60,45,25,.04); transition:var(--t); }
.model-chip:hover{ color:var(--text); border-color:var(--line-2); transform:translateY(-1px); }
.model-chip .dot{ color:var(--coral); margin-right:7px; }

/* ── section headers ─────────────────────────────────────────────────────── */
.sec-head{ max-width:62ch; position:relative; }
.sec-head.center{ margin-inline:auto; }
.sec-head h2{ margin-top:18px; }
.sec-head p{ margin-top:18px; }

/* ── steps (how it works) ────────────────────────────────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:58px; }
.step{
  position:relative; padding:32px 30px; border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--line); transition:var(--t); overflow:hidden; box-shadow:var(--el-1);
}
.step:hover{ border-color:var(--line-2); transform:translateY(-4px); box-shadow:var(--el-2); }
.step::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px; background:linear-gradient(90deg,var(--coral),var(--gold)); opacity:0; transition:opacity var(--t); }
.step:hover::before{ opacity:1; }
.step .num{ font-family:var(--display); font-style:italic; font-size:1.02rem; color:var(--coral); font-weight:500; letter-spacing:0; }
.step .ico{ width:48px; height:48px; display:grid; place-items:center; border-radius:13px; background:rgba(219,82,56,.09); border:1px solid rgba(219,82,56,.2); color:var(--coral); margin-bottom:22px; }
.step h3{ font-size:1.34rem; margin:14px 0 9px; }
.step p{ font-size:.97rem; }

/* ── bento features ──────────────────────────────────────────────────────── */
#features{ border-top:1px solid var(--hair); background:linear-gradient(180deg, transparent, rgba(243,239,230,.5)); }
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; margin-top:58px; }
.tile{
  position:relative; padding:30px; border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); border:1px solid var(--line); transition:var(--t);
  display:flex; flex-direction:column; box-shadow:var(--el-1);
}
.tile:hover{ border-color:var(--line-2); transform:translateY(-3px); box-shadow:var(--el-2); }
.tile .ico{ width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:rgba(219,82,56,.08); border:1px solid rgba(219,82,56,.18); color:var(--coral); margin-bottom:20px; }
.tile h3{ font-size:1.26rem; margin-bottom:9px; }
.tile p{ font-size:.95rem; }
.tile.col-3{ grid-column:span 3; }
.tile.col-2{ grid-column:span 2; }
.tile.col-4{ grid-column:span 4; }
.tile.feature{ background:linear-gradient(150deg, rgba(219,82,56,.08), #fff 54%); border-color:rgba(219,82,56,.2); }
.tile .glow-tile{ position:absolute; width:240px; height:240px; right:-60px; bottom:-90px; opacity:.55; }
.tile .tile-media{ position:relative; margin-top:22px; border-radius:13px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10; background:var(--surface-3); }
.tile .tile-media video, .tile .tile-media img{ width:100%; height:100%; object-fit:cover; }
.kbd{ font-family:var(--body); font-size:.78rem; padding:3px 8px; border-radius:7px; background:var(--surface-3); border:1px solid var(--line-2); color:var(--muted); }

/* ── showcase gallery ────────────────────────────────────────────────────── */
.gallery{ columns:4; column-gap:16px; margin-top:52px; }
.shot{
  position:relative; break-inside:avoid; margin-bottom:16px; border-radius:15px; overflow:hidden;
  border:1px solid var(--line); background:var(--surface); box-shadow:var(--el-1); transition:var(--t);
}
.shot:hover{ transform:translateY(-4px); border-color:var(--line-2); box-shadow:var(--el-2); }
.shot video, .shot img{ width:100%; height:auto; display:block; }
.shot .tag{ position:absolute; left:12px; bottom:12px; z-index:2; font-size:.7rem; font-weight:600; letter-spacing:.03em; padding:5px 11px; border-radius:var(--pill); background:rgba(20,16,14,.55); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.2); color:#fbf7f1; }
.shot .play{ position:absolute; inset:0; display:grid; place-items:center; z-index:1; opacity:0; transition:opacity var(--t); background:rgba(20,16,14,.14); }
.shot:hover .play{ opacity:1; }
.shot .play span{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.96); color:#111; box-shadow:0 6px 20px -6px rgba(0,0,0,.4); }

/* ── split / why ─────────────────────────────────────────────────────────── */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; }
.checklist{ list-style:none; display:grid; gap:18px; margin-top:32px; }
.checklist li{ display:flex; gap:14px; align-items:flex-start; }
.checklist .ck{ flex:0 0 auto; width:27px; height:27px; border-radius:8px; display:grid; place-items:center; background:rgba(219,82,56,.1); border:1px solid rgba(219,82,56,.24); color:var(--coral); margin-top:2px; }
.checklist b{ color:var(--text); font-weight:600; }
.checklist span{ color:var(--muted); }
.media-frame{ position:relative; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line); box-shadow:var(--el-glow); background:var(--surface); }
.media-frame video, .media-frame img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.media-frame .chrome{ display:flex; gap:6px; padding:13px 16px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.media-frame .chrome i{ width:11px; height:11px; border-radius:50%; background:var(--surface-3); }

/* compare table */
.compare{ margin-top:50px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--el-1); }
.compare-row{ display:grid; grid-template-columns:1.4fr 1fr 1fr; align-items:center; }
.compare-row + .compare-row{ border-top:1px solid var(--line); }
.compare-row > div{ padding:18px 22px; font-size:.97rem; }
.compare-head{ background:var(--surface-2); font-weight:600; }
.compare-head .h-hermoso{ color:var(--coral); display:flex; align-items:center; gap:8px; box-shadow:inset 0 2px 0 var(--coral-solid); }
.compare-row .feat{ color:var(--muted); }
.compare .yes{ color:var(--coral); font-weight:600; }
.compare .no{ color:var(--faint); }
.compare-row .col-hermoso{ background:rgba(219,82,56,.06); box-shadow:inset 1px 0 0 rgba(219,82,56,.22), inset -1px 0 0 rgba(219,82,56,.22); }

/* ── stat band ───────────────────────────────────────────────────────────── */
.band{ border-radius:var(--r-xl); padding:clamp(42px,5vw,66px); background:linear-gradient(150deg, rgba(219,82,56,.09), rgba(189,122,52,.07) 70%, #fff); border:1px solid rgba(219,82,56,.18); position:relative; overflow:hidden; box-shadow:var(--el-1); }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; text-align:center; }
.stat .n{ font-family:var(--display); font-size:clamp(2.4rem,3.6vw,3.3rem); font-weight:500; color:var(--text); line-height:1; }
.stat .n .grad{ font-family:inherit; font-style:italic; }
.stat .l{ margin-top:12px; font-size:.92rem; color:var(--muted); }

/* ── pricing ─────────────────────────────────────────────────────────────── */
.plans{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:58px; align-items:stretch; }
.plan{
  display:flex; flex-direction:column; padding:32px 30px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line); transition:var(--t); position:relative; box-shadow:var(--el-1);
}
.plan:hover{ border-color:var(--line-2); transform:translateY(-3px); box-shadow:var(--el-2); }
.plan.pop{ background:linear-gradient(180deg, rgba(219,82,56,.06), #fff 42%); border-color:rgba(219,82,56,.4); box-shadow:var(--el-glow); transform:scale(1.02); }
.plan.pop:hover{ transform:scale(1.02) translateY(-3px); }
.plan .ribbon{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:5px 14px; border-radius:var(--pill); background:linear-gradient(180deg,#e76a4e,var(--coral-solid)); color:var(--cream); white-space:nowrap; box-shadow:0 8px 22px -8px rgba(200,68,42,.5); }
.plan .pname{ font-family:var(--display); font-size:1.55rem; font-weight:600; }
.plan .pdesc{ font-size:.92rem; color:var(--muted); margin-top:6px; min-height:42px; }
.plan .price{ display:flex; align-items:baseline; gap:6px; margin:22px 0 4px; }
.plan .price .amt{ font-family:var(--display); font-size:3.1rem; font-weight:500; line-height:1; }
.plan .price .per{ color:var(--faint); font-size:.92rem; }
.plan .price-note{ font-size:.84rem; color:var(--faint); min-height:20px; }
.plan .plan-ads{ margin-top:14px; padding:10px 13px; border-radius:11px; background:var(--surface-3); border:1px solid var(--line); font-size:.87rem; color:var(--muted); line-height:1.4; }
.plan .plan-ads b{ color:var(--text); font-weight:600; white-space:nowrap; }
.plan.pop .plan-ads{ background:rgba(219,82,56,.05); border-color:rgba(219,82,56,.22); }
.plan ul{ list-style:none; display:grid; gap:13px; margin:22px 0 28px; }
.plan li{ display:flex; gap:11px; align-items:flex-start; font-size:.95rem; color:var(--muted); }
.plan li .ck{ flex:0 0 auto; color:var(--coral); margin-top:3px; }
.plan li b{ color:var(--text); font-weight:600; }
.plan .btn{ margin-top:auto; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq{ max-width:800px; margin:50px auto 0; border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 4px; text-align:left; font-family:var(--display); font-size:1.2rem; font-weight:500; color:var(--text); transition:color var(--t); }
.qa-q:hover{ color:var(--coral); }
.qa-q .pm{ flex:0 0 auto; width:24px; height:24px; position:relative; }
.qa-q .pm::before,.qa-q .pm::after{ content:""; position:absolute; background:var(--coral); border-radius:2px; transition:var(--t); }
.qa-q .pm::before{ top:11px; left:3px; width:18px; height:2px; }
.qa-q .pm::after{ left:11px; top:3px; width:2px; height:18px; }
.qa.open .pm::after{ transform:scaleY(0); }
.qa-a{ max-height:0; overflow:hidden; transition:max-height 360ms cubic-bezier(.2,.7,.2,1); }
.qa-a-in{ padding:0 4px 26px; color:var(--muted); font-size:1rem; max-width:66ch; }

/* ── final CTA ───────────────────────────────────────────────────────────── */
.cta-band{ position:relative; overflow:hidden; border-radius:var(--r-xl); padding:clamp(50px,7vw,92px) 32px; text-align:center; background:linear-gradient(160deg, rgba(219,82,56,.1), rgba(189,122,52,.07) 60%, #fff); border:1px solid rgba(219,82,56,.2); box-shadow:var(--el-1); }
.cta-band h2{ max-width:18ch; margin-inline:auto; }
.cta-band .glow-c{ width:580px; height:580px; left:50%; top:24%; transform:translateX(-50%); opacity:.5; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.footer{ border-top:1px solid var(--line); padding-block:66px 40px; margin-top:clamp(60px,8vw,110px); position:relative; background:rgba(255,255,255,.4); }
.foot-grid{ display:flex; flex-wrap:wrap; gap:36px 40px; }
.foot-brand{ flex:1 1 240px; min-width:220px; max-width:320px; }
.foot-col{ flex:1 1 130px; min-width:120px; }
.foot-brand .brand{ margin-bottom:16px; }
.foot-brand p{ font-size:.92rem; max-width:30ch; }
.foot-col h3{ font-family:var(--body); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); font-weight:700; margin-bottom:16px; }
.foot-col a{ display:block; color:var(--muted); font-size:.94rem; padding:5px 0; transition:color var(--t); }
.foot-col a:hover{ color:var(--coral); }
.foot-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:56px; padding-top:28px; border-top:1px solid var(--line); }
.foot-bottom .meta{ font-size:.86rem; color:var(--faint); }
.lang{ display:inline-flex; align-items:center; gap:8px; font-size:.88rem; color:var(--muted); border:1px solid var(--line-2); border-radius:var(--pill); padding:7px 14px; }

/* language switcher — native <details> dropdown, opens upward from the footer */
.langpick{ position:relative; }
.langpick > summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-size:.88rem; color:var(--muted); border:1px solid var(--line-2); border-radius:var(--pill); padding:7px 14px; background:#fff; transition:var(--t); user-select:none; }
.langpick > summary::-webkit-details-marker{ display:none; }
.langpick > summary::after{ content:""; width:11px; height:8px; background:currentColor; opacity:.65; transition:transform var(--t); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 2 6 6.5 10.5 2'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 2 6 6.5 10.5 2'/%3E%3C/svg%3E") center/contain no-repeat; }
.langpick[open] > summary{ border-color:var(--coral); color:var(--text); }
.langpick[open] > summary::after{ transform:rotate(180deg); }
.langpick .globe{ width:14px; height:14px; opacity:.85; }
.langmenu{ position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); width:188px; max-height:50vh; overflow:auto; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--el-2); padding:6px; display:grid; gap:1px; z-index:90; }
.langmenu a{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 13px; border-radius:9px; font-size:.92rem; color:var(--muted); white-space:nowrap; transition:var(--t); }
.langmenu a:hover{ background:var(--surface-3); color:var(--text); }
.langmenu a.on{ color:var(--coral); font-weight:600; }
.langmenu a .lc{ font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.langmenu a.on .lc{ color:var(--coral); }
.social{ display:flex; gap:10px; }
.social a{ width:36px; height:36px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--line); color:var(--muted); background:#fff; transition:var(--t); }
.social a:hover{ color:var(--coral); border-color:var(--line-2); }

/* ── prose (legal / manifesto) ───────────────────────────────────────────── */
.prose{ max-width:720px; margin-inline:auto; }
.prose .eyebrow{ margin-bottom:18px; }
.prose h1{ font-size:clamp(2.4rem,5vw,3.6rem); margin-bottom:14px; }
.prose .updated{ color:var(--faint); font-size:.9rem; margin-bottom:8px; }
.prose h2{ font-size:1.55rem; margin:44px 0 14px; }
.prose h3{ font-size:1.18rem; margin:28px 0 10px; }
.prose p{ margin-bottom:16px; line-height:1.74; }
.prose ul,.prose ol{ margin:0 0 18px 22px; color:var(--muted); display:grid; gap:9px; }
.prose a{ color:var(--coral); text-decoration:underline; text-underline-offset:3px; }
/* buttons inside prose must keep their own fill/contrast — else `.prose a` (0,1,1) beats `.btn-primary` color and paints coral-on-coral (unreadable "Start free") */
.prose a.btn{ text-decoration:none; }
.prose a.btn-primary{ color:var(--cream); }
.prose a.btn-ghost{ color:var(--text); }
.prose a.btn-ghost:hover{ color:var(--coral-deep); }
.prose .callout{ border:1px solid var(--line); background:var(--surface); border-radius:var(--r); padding:20px 24px; margin:24px 0; font-size:.95rem; color:var(--muted); box-shadow:var(--el-1); }
.prose .callout b{ color:var(--text); }
.prose .big-quote{ font-family:var(--display); font-size:clamp(1.65rem,3vw,2.3rem); line-height:1.3; font-weight:500; color:var(--text); margin:38px 0; }

/* toast */
.toast{ position:fixed; left:50%; bottom:26px; transform:translate(-50%,12px); z-index:300; background:#1a1712; color:#fbf7f1; font-size:.92rem; font-weight:500; padding:11px 18px; border-radius:var(--pill); box-shadow:var(--el-2); opacity:0; transition:opacity var(--t), transform var(--t); pointer-events:none; max-width:calc(100vw - 32px); }
.toast.in{ opacity:1; transform:translate(-50%,0); }

/* ── blog ─────────────────────────────────────────────────────────────────── */
.blog-list{ display:grid; gap:18px; margin:46px auto 0; max-width:760px; }
.post-card{ display:block; padding:28px 30px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--el-1); transition:var(--t); }
.post-card:hover{ border-color:var(--line-2); transform:translateY(-3px); box-shadow:var(--el-2); }
.post-card .pc-meta{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--coral); font-weight:600; }
.post-card h2{ font-size:1.5rem; line-height:1.12; margin:11px 0 9px; }
.post-card p{ color:var(--muted); font-size:.98rem; }
.post-card .pc-more{ margin-top:15px; color:var(--text); font-weight:600; font-size:.92rem; display:inline-flex; gap:6px; align-items:center; }
.post-card:hover .pc-more{ color:var(--coral); }
.post-head{ max-width:740px; margin-inline:auto; text-align:center; }
.post-head .post-meta{ color:var(--faint); font-size:.9rem; margin-top:16px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.post-dek{ font-family:var(--display); font-style:italic; font-size:clamp(1.18rem,2.1vw,1.5rem); line-height:1.4; color:var(--muted); margin-top:16px; }
.prose h2:first-child{ margin-top:0; }
.prose .faq-q{ font-weight:600; color:var(--text); margin-top:22px; }
.post-cta{ margin-top:42px; padding-top:30px; border-top:1px solid var(--line); text-align:center; }

/* inner page hero (legal / manifesto / pricing) */
.page-hero{ position:relative; padding-top:clamp(62px,8vw,108px); padding-bottom:clamp(24px,3vw,40px); overflow:hidden; }
.page-hero .glow{ width:560px; height:560px; top:-320px; left:50%; transform:translateX(-50%); opacity:.5; }
.page-hero-in{ position:relative; z-index:2; }

/* credits table (pricing) */
.credits{ margin-top:18px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--el-1); }
.credits-row{ display:grid; grid-template-columns:1.5fr 1fr 1fr; align-items:center; }
.credits-row + .credits-row{ border-top:1px solid var(--line); }
.credits-row > div{ padding:16px 22px; font-size:.96rem; }
.credits-head{ background:var(--surface-2); font-weight:600; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.credits-row .feat{ color:var(--text); font-weight:500; }
.credits-row .val{ color:var(--muted); }
.credits-row .val b{ color:var(--coral); font-weight:600; }
@media (max-width:640px){ .credits-row{ grid-template-columns:1.4fr .8fr .8fr; } .credits-row > div{ padding:13px 14px; font-size:.86rem; } }

/* ── reveal motion ───────────────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

.hero .reveal{ opacity:1; animation:riseIn .8s cubic-bezier(.2,.7,.2,1) both; }
.hero h1.reveal{ animation:none; transform:none; }
.hero .reveal.d2{ animation-delay:.10s; }
.hero .reveal.d3{ animation-delay:.18s; }
.hero .reveal.d4{ animation-delay:.28s; }
@keyframes riseIn{ from{ transform:translateY(20px); } to{ transform:none; } }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero .reveal{ animation:none; }
  .marquee-track,.spin-slow{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* the mobile nav drawer is hidden on desktop; only revealed at ≤860px when .open */
.mobile-menu{ display:none; }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .steps{ grid-template-columns:1fr; }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .tile.col-3,.tile.col-4,.tile.col-2{ grid-column:span 2; }
  .split{ grid-template-columns:1fr; gap:36px; }
  .plans{ grid-template-columns:repeat(2,1fr); max-width:760px; margin-inline:auto; }
  .plan.pop{ transform:none; }
  .plan.pop:hover{ transform:translateY(-3px); }
  .stats{ grid-template-columns:repeat(2,1fr); gap:26px; }
  .gallery{ columns:2; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .foot-brand{ grid-column:span 2; }
  .compare-row{ grid-template-columns:1.2fr .8fr .8fr; }
  .compare-row > div{ padding:14px 14px; font-size:.9rem; }
}

@media (max-width:860px){
  .nav-links, .nav-cta{ display:none; }
  .nav-toggle{ display:grid; place-items:center; width:44px; height:44px; border-radius:12px; border:1px solid var(--line-2); background:#fff; transition:var(--t); -webkit-tap-highlight-color:transparent; touch-action:manipulation; cursor:pointer; }
  /* mouse ONLY — a bare :hover STICKS after a tap on touch devices (iOS holds the hover state), which left the
     coral border stuck on the open ✕ and made closing feel broken / like it needed a second tap. */
  @media (hover:hover){ .nav-toggle:hover{ border-color:var(--coral); } }
  .nav-toggle:focus-visible{ outline:2px solid var(--coral); outline-offset:2px; } /* keyboard focus only, never on tap */
  .nav-toggle span{ width:18px; height:2px; background:var(--text); position:relative; display:block; transition:var(--t); }
  .nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--text); transform-origin:center; transition:transform var(--t); }
  .nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }
  .nav-toggle.open span{ background:transparent; }
  /* Center the two bars with transform (translateY cancels the ±6px offset) THEN rotate — a pure-transform
     ✕. Do NOT animate `top` to 0 here: iOS Safari can skip the `top` change on a pseudo-element that also
     has a transform, leaving the bars stacked at ±6px as a “/over\” — which reads as an arrow, not an ✕. */
  .nav-toggle.open span::before{ transform:translateY(6px) rotate(45deg); }
  .nav-toggle.open span::after{ transform:translateY(-6px) rotate(-45deg); }

  .mobile-menu{
    position:fixed; top:70px; left:0; right:0; z-index:58; display:none;
    height:calc(100vh - 70px); height:calc(100dvh - 70px);
    flex-direction:column; gap:2px;
    background:linear-gradient(180deg, #fefdfb, #f6f2ea);
    border-top:1px solid var(--line);
    padding:22px 26px calc(26px + env(safe-area-inset-bottom,0px));
    overflow-y:auto; overscroll-behavior:contain;
    animation:menuIn .28s cubic-bezier(.2,.7,.2,1);
  }
  .mobile-menu.open{ display:flex; }
  @keyframes menuIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
  .mobile-menu a{ display:flex; align-items:center; justify-content:space-between; padding:17px 2px; font-size:1.22rem; font-family:var(--display); color:var(--text); border-bottom:1px solid var(--hair); transition:color var(--t); }
  .mobile-menu a:hover,.mobile-menu a:active{ color:var(--coral); }
  .mobile-menu .m-actions{ display:grid; gap:10px; margin-top:24px; }
  .mobile-menu .btn{ width:100%; padding:15px; font-size:1rem; border-bottom:0; }
  .mobile-menu .btn.btn-ghost{ font-family:var(--body); }
  /* the CTA <a>s live inside .mobile-menu, so `.mobile-menu a{color:var(--text)}` above was overriding the orange
     button's cream text (it rendered black in the menu). Restore it. And drop the trailing hairline under the last
     nav link — it read as a stray "line above the Sign up button". */
  .mobile-menu .m-actions .btn-primary,
  .mobile-menu .m-actions .btn-primary:hover,
  .mobile-menu .m-actions .btn-primary:active{ color:var(--cream); }
  .mobile-menu > a:last-of-type{ border-bottom:0; }
  body.menu-open{ overflow:hidden; }
}

@media (max-width:640px){
  body{ font-size:16px; }
  .hero-form{ flex-direction:column; }
  .hero-form .btn{ width:100%; }
  .hero-cta{ flex-direction:column; width:100%; max-width:340px; }
  .hero-cta .btn{ width:100%; }
  .bento{ grid-template-columns:1fr; }
  .tile.col-3,.tile.col-4,.tile.col-2{ grid-column:span 1; }
  .gallery{ columns:1; }
  .stats{ grid-template-columns:1fr 1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .compare-row{ grid-template-columns:1.3fr .7fr .7fr; }
  .plans{ grid-template-columns:1fr; max-width:440px; }
  .band,.cta-band{ padding:36px 22px; }

  h1,h2,h3,.h1,.h2{ overflow-wrap:break-word; }
  .hero h1{ font-size:clamp(2.15rem,8.4vw,3.2rem); max-width:none; letter-spacing:-.02em; }
  .hero .lead{ font-size:1.04rem; }
  .hero-note{ font-size:.82rem; }
  .h1{ font-size:clamp(2rem,8vw,3rem); max-width:none; }
  .h2{ font-size:clamp(1.78rem,7vw,2.35rem); }
  .prose h1{ font-size:clamp(2rem,8vw,2.8rem); }
  .prose .big-quote{ font-size:1.48rem; }
  .eyebrow{ font-size:.62rem; letter-spacing:.14em; flex-wrap:wrap; justify-content:center; row-gap:2px; }
  .sec-head{ margin-bottom:6px; }
  .section{ padding-block:clamp(60px,12vw,88px); }
}

/* anchor jumps clear the sticky nav and keep the section title in view */
:where(section,[id]){ scroll-margin-top:96px; }
#top{ scroll-margin-top:0; }

/* ── cookie-consent banner ───────────────────────────────────────────────── */
.cookie-consent{ position:fixed; left:50%; bottom:18px; transform:translate(-50%,160%); z-index:150;
  display:flex; align-items:center; justify-content:center; gap:14px 18px; flex-wrap:wrap;
  width:max-content; max-width:min(640px, calc(100vw - 28px)); padding:14px 18px;
  background:var(--surface); color:var(--text); border:1px solid var(--line-2); border-radius:var(--r);
  box-shadow:var(--el-2); font-family:var(--body); font-size:14px; opacity:0;
  transition:transform var(--t), opacity var(--t); }
.cookie-consent.show{ transform:translate(-50%,0); opacity:1; }
.cookie-consent .cc-msg{ margin:0; line-height:1.45; flex:1 1 260px; }
.cookie-consent .cc-msg a{ color:var(--coral); text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }
.cookie-consent .cc-btns{ display:flex; gap:8px; flex:0 0 auto; }
.cookie-consent .cc-btn{ font:inherit; font-weight:600; line-height:1; padding:9px 16px;
  border-radius:var(--r-sm); cursor:pointer; border:1px solid transparent;
  transition:background var(--t), color var(--t), border-color var(--t); }
.cookie-consent .cc-decline{ background:transparent; color:var(--muted); border-color:var(--line-2); }
.cookie-consent .cc-decline:hover{ color:var(--text); border-color:var(--text); }
.cookie-consent .cc-accept{ background:var(--coral); color:#fff; }
.cookie-consent .cc-accept:hover{ background:var(--coral-deep); }
@media (max-width:520px){
  .cookie-consent{ left:12px; right:12px; bottom:12px; width:auto; max-width:none; transform:translateY(170%); }
  .cookie-consent.show{ transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){ .cookie-consent{ transition:opacity var(--t); } }

/* Heading balance at EVERY width (was mobile-only): kills the desktop widows on the hero h1 ('…with / AI.') and section heads ('…to / make / ads…'). */
h1,h2,h3,.h1,.h2{ text-wrap:balance; }

/* ── INTERACTIVE CRAFT (Daylight Atelier warmth, Linear-class touches) ─────────────────────────────
   Cursor-tracking glow: bordered cards light up softly where the pointer is — a warm cream-coral
   radial on the surface + a brighter seam on the border. Driven by --mx/--my set in JS (rAF-throttled);
   hover-capable pointers only, so touch devices never pay for it. */
@media (hover:hover) and (pointer:fine){
  .tile, .step, .plan{ position:relative; }
  .tile::before, .step::before, .plan::before{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(219,82,56,.075), rgba(240,180,120,.05) 34%, transparent 62%);
    opacity:0; transition:opacity .35s ease;
  }
  .tile:hover::before, .step:hover::before, .plan:hover::before{ opacity:1; }
  /* border seam: a masked ring so only the border-line brightens near the cursor */
  .tile::after, .step::after, .plan::after{
    content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; z-index:1;
    padding:1px;
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(219,82,56,.5), transparent 70%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
    opacity:0; transition:opacity .35s ease;
  }
  .tile:hover::after, .step:hover::after, .plan:hover::after{ opacity:1; }
  /* keep card content above the glow layers */
  .tile > *, .step > *, .plan > *{ position:relative; z-index:2; }
}
/* Brand bloom: a slow, pleased quarter-turn on hover — the flower blooms when you greet it. */
.brand .bloom{ transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.brand:hover .bloom{ transform:rotate(45deg); }
/* Hero key word: ONE soft light-sweep after the entrance settles — the page's single "alive" beat. */
.hero h1 .key{ position:relative; display:inline-block; overflow:hidden; padding:.1em .08em; margin:-.1em -.08em; } /* pad+negative-margin so overflow:hidden never shaves the italic serif's swashes/descenders */
.hero h1 .key::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,244,230,.85) 50%, transparent 70%);
  transform:translateX(-130%) skewX(-12deg);
  animation:keysweep 1.1s cubic-bezier(.4,.1,.2,1) 1.15s 1 both;
}
@keyframes keysweep{ to{ transform:translateX(130%) skewX(-12deg); } }
@media (prefers-reduced-motion: reduce){
  .hero h1 .key::after{ animation:none; opacity:0; }
  .brand .bloom, .brand:hover .bloom{ transition:none; transform:none; }
  .tile::before,.step::before,.plan::before,.tile::after,.step::after,.plan::after{ display:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   V13 — "DAYLIGHT CINEMA" LAYER
   Warm editorial paper as the gallery wall; saturated real footage as the only art
   on it. Chrome = paper + ink + hairline; coral is an EVENT; one dark band for
   gravity. Mono is the third voice (receipts: formats, render times, model names).
   Overrides + new components below intentionally shadow v12 selectors above.
   ═══════════════════════════════════════════════════════════════════════════════ */
:root{
  --paper:#FAF8F3; --paper-2:#F3EFE7; --ink:#1C1917; --ink-muted:#6B645C;
  --hairline:#E5DFD4; --cinema:#14100E; --cinema-ink:#F5F1EA;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,monospace;
}
body{ color:var(--ink); }
/* ── mono voice ── */
.mono{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); }
.mono .dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--coral-solid,#DB5238); margin-right:8px; vertical-align:1px; }
/* ── two-tone headline ── */
.tt{ font-size:clamp(30px,3.1vw,42px); line-height:1.12; letter-spacing:-.015em; font-weight:560; }
.tt i{ font-style:normal; color:var(--ink-muted); }
/* ── flat coral CTAs (kill the gradient pill) ── */
.btn-primary{ background:var(--coral-solid,#DB5238); box-shadow:none; }
.btn-primary:hover{ background:var(--coral-deep,#C2452E); transform:none; box-shadow:none; }
.btn-ghost{ border-color:var(--hairline); }
/* ═══ HERO (asymmetric split + Finished Ad Stage) ═══ */
.hero13{ padding:clamp(48px,6vw,84px) 0 clamp(36px,4vw,56px); }
.hero13-grid{ display:grid; grid-template-columns:1.05fr .9fr; gap:clamp(32px,5vw,72px); align-items:center; }
.hero13 h1{ font-size:clamp(44px,5vw,76px); line-height:1.02; letter-spacing:-.015em; font-weight:560; max-width:none; text-align:left; margin:22px 0 0; }
.hero13 .lead{ text-align:left; font-size:18px; margin:20px 0 0; max-width:44ch; color:var(--ink-muted); }
.hero13 .hero-cta{ justify-content:flex-start; margin-top:30px; }
.hero13 .hero-note{ text-align:left; margin-top:16px; }
.hero13 .eyebrow13{ display:inline-flex; align-items:center; gap:8px; }
/* the stage: ONE big frame playing OUR finished ads, dressed as they'd run in-feed */
.stage-wrap{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.stage{ position:relative; width:min(360px,100%); aspect-ratio:9/16; max-height:76vh; border-radius:20px; overflow:hidden; background:var(--cinema); box-shadow:0 30px 80px -30px rgba(40,25,15,.35), 0 2px 8px rgba(40,25,15,.08); }
.stage video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .9s ease; }
.stage video.on{ opacity:1; }
/* in-feed ad chrome composited over the footage — the page's thesis made literal */
.stage .adc-top{ position:absolute; top:0; left:0; right:0; padding:14px 16px; display:flex; align-items:center; gap:9px; background:linear-gradient(rgba(10,7,5,.45),transparent); z-index:2; color:#fff; }
.stage .adc-av{ width:30px; height:30px; border-radius:50%; background:#fff2; border:1.5px solid #fffc; display:grid; place-items:center; font:700 12px/1 var(--sans,system-ui); color:#fff; }
.stage .adc-nm{ font:600 13px/1.2 system-ui; text-shadow:0 1px 4px rgba(0,0,0,.4); }
.stage .adc-sp{ font:400 10.5px/1 system-ui; opacity:.8; }
.stage .adc-bot{ position:absolute; left:0; right:0; bottom:0; padding:16px; background:linear-gradient(transparent,rgba(10,7,5,.55)); z-index:2; }
.stage .adc-cap{ color:#fff; font:500 13.5px/1.45 system-ui; text-shadow:0 1px 6px rgba(0,0,0,.45); margin-bottom:10px; }
.stage .adc-cta{ display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.94); border-radius:9px; padding:9px 12px; font:600 12.5px/1 system-ui; color:#111; }
.stage .adc-cta .arr{ color:var(--coral-deep,#C2452E); }
.stage-cap{ min-height:15px; text-align:center; }
/* ═══ FILMSTRIP (made-with-Hermoso proof strip) ═══ */
.filmstrip{ border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); background:var(--paper); padding:18px 0 14px; }
.filmstrip .fs-label{ text-align:center; margin-bottom:14px; }
.film .reel-card{ height:150px; border-radius:10px; }
/* size the CARD per aspect (video/img/pshield already fill 100%×100%) — sizing the video left the card wider, exposing a white gap */
.film .reel-card.v{ width:84px; } .film .reel-card.s{ width:150px; } .film .reel-card.w{ width:266px; }
.fs-tag{ position:absolute; left:8px; bottom:8px; z-index:2; font-family:var(--mono); font-size:9px; letter-spacing:.07em; text-transform:uppercase; color:#fff; background:rgba(16,12,10,.55); padding:4px 7px; border-radius:5px; backdrop-filter:blur(6px); }
/* ═══ THREE MOVES (alternating ~85vh product screens) ═══ */
.move{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(32px,5vw,80px); align-items:center; padding:clamp(52px,7vw,104px) 0; }
.move.flip .move-txt{ order:2; } .move.flip .move-media{ order:1; }
.move-idx{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--coral-deep,#C2452E); }
.move-txt h2{ margin:14px 0 0; font-size:clamp(30px,3vw,40px); line-height:1.1; font-weight:560; letter-spacing:-.015em; }
.move-txt h2 i{ font-style:normal; color:var(--ink-muted); }
.move-txt p{ margin:16px 0 0; font-size:17px; line-height:1.6; color:var(--ink-muted); max-width:42ch; }
.move-txt .move-link{ display:inline-block; margin-top:18px; font-weight:600; color:var(--ink); border-bottom:1.5px solid var(--coral-solid,#DB5238); padding-bottom:2px; text-decoration:none; }
.move-txt .move-link:hover .arr{ transform:translateX(3px); } .move-link .arr{ display:inline-block; transition:transform .2s; }
.move-media{ position:relative; }
.ui-frame{ border:1px solid var(--hairline); border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 24px 70px -28px rgba(40,25,15,.28); }
.ui-frame .ui-bar{ display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid var(--hairline); background:var(--paper); }
.ui-frame .ui-bar i{ width:9px; height:9px; border-radius:50%; background:var(--hairline); }
.ui-frame img{ width:100%; height:auto; aspect-ratio:1400/880; object-fit:cover; object-position:top; display:block; }
.move-media .media-cap{ margin-top:12px; text-align:center; }
/* ═══ LIVE STUDIO DEMO (typewriter) ═══ */
.agentdemo{ background:var(--paper-2); border:1px solid var(--hairline); border-radius:18px; padding:clamp(24px,3vw,44px); display:grid; grid-template-columns:1fr .8fr; gap:clamp(24px,4vw,56px); align-items:center; }
.ad-log{ font-family:var(--mono); font-size:12.5px; line-height:2.1; letter-spacing:.02em; color:var(--ink); min-height:220px; }
.ad-log .l{ opacity:0; transform:translateY(4px); transition:opacity .4s, transform .4s; display:block; }
.ad-log .l.in{ opacity:1; transform:none; }
.ad-log .ok{ color:var(--coral-deep,#C2452E); margin-right:8px; }
.ad-log .dim{ color:var(--ink-muted); }
.ad-out{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ad-out .th{ aspect-ratio:9/16; border-radius:10px; overflow:hidden; opacity:0; transform:translateY(10px) scale(.97); transition:opacity .5s, transform .5s; background:var(--cinema); }
.ad-out .th img{ width:100%; height:100%; object-fit:cover; display:block; }
.ad-out .th.in{ opacity:1; transform:none; }
.ad-out .th.big{ grid-column:1 / -1; aspect-ratio:9/14; }
/* ═══ THE DARK BAND (era proof — the ONE temperature change) ═══ */
.cinema{ background:var(--cinema); color:var(--cinema-ink); padding:clamp(64px,8vw,110px) 0; }
.cinema .tt i{ color:#B7ADA0; }
.cinema-strip{ display:grid; grid-auto-flow:column; grid-auto-columns:min-content; gap:14px; overflow-x:auto; padding:36px 4px 8px; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); }
.cinema-strip::-webkit-scrollbar{ display:none; }
.cinema .reel-card{ height:300px; border-radius:12px; border:1px solid rgba(255,255,255,.08); }
.cinema .reel-card.v{ width:170px; } .cinema .reel-card.s{ width:300px; } .cinema .reel-card.w{ width:533px; }
.cinema .rc-brand{ background:rgba(0,0,0,.5); }
.cinema-note{ margin-top:26px; max-width:64ch; color:#B7ADA0; font-size:15px; line-height:1.6; }
/* ═══ SHOWCASE WALL (mono labels) ═══ */
.shot .tag{ font-family:var(--mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; }
/* ═══ MODELS FOOTNOTE ═══ */
.models-row{ display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); }
/* ═══ MANIFESTO PULL-QUOTE ═══ */
.pullq{ font-size:clamp(26px,3.4vw,44px); line-height:1.22; letter-spacing:-.015em; font-weight:560; max-width:24ch; margin:0 auto; text-align:center; }
.pullq i{ font-style:normal; color:var(--ink-muted); }
.pullq-link{ display:block; text-align:center; margin-top:26px; }
/* ═══ PRICING TEASER ═══ */
.teaser{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:stretch; max-width:1240px; margin-inline:auto; }
@media (max-width:1020px){ .teaser{ grid-template-columns:repeat(2,1fr); max-width:640px; } }
.tease{ position:relative; display:flex; flex-direction:column; border:1px solid var(--hairline); border-radius:18px; padding:28px 28px 26px; background:#fff; color:var(--ink); text-decoration:none; box-shadow:0 1px 2px rgba(40,25,15,.04); transition:border-color .2s, transform .2s, box-shadow .2s; }
.tease:hover{ border-color:#CDC5B6; transform:translateY(-3px); box-shadow:0 22px 54px -26px rgba(40,25,15,.26); }
.tease.feat{ border-color:var(--coral-solid,#DB5238); box-shadow:0 22px 54px -28px rgba(219,82,56,.34); }
.tease.feat:hover{ border-color:var(--coral-solid,#DB5238); }
.tease .t-tag{ position:absolute; top:-11px; left:28px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--coral-solid,#DB5238); padding:4px 10px; border-radius:var(--pill,999px); }
.tease .t-name{ font-weight:650; font-size:15px; letter-spacing:.01em; }
.tease .t-amt{ margin-top:14px; font-size:40px; line-height:1; font-weight:560; letter-spacing:-.02em; }
.tease .t-amt small{ font-size:15px; font-weight:500; color:var(--ink-muted); letter-spacing:0; }
.tease .t-credits{ margin-top:9px; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--coral-deep,#C2452E); }
.tease .t-ads{ margin-top:8px; font-size:12.5px; line-height:1.4; color:var(--ink-muted); }
.tease .t-ads b{ color:var(--ink); font-weight:600; white-space:nowrap; }
.tease p{ margin:14px 0 0; font-size:14px; line-height:1.55; color:var(--ink-muted); }
.tease .t-go{ margin-top:auto; padding-top:22px; font-weight:600; font-size:14px; color:var(--ink); }
.tease .t-go .arr{ display:inline-block; transition:transform .2s; }
.tease:hover .t-go .arr{ transform:translateX(3px); }
.tease.feat .t-go{ color:var(--coral-deep,#C2452E); }
/* ═══ CLOSING CTA (full-bleed finished ad) ═══ */
.closer{ position:relative; overflow:hidden; padding:clamp(90px,12vw,150px) 0; background:var(--cinema); }
.closer video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.42; }
.closer .scrim{ position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(20,16,14,.62), rgba(20,16,14,.9)); }
.closer .wrap{ position:relative; z-index:2; text-align:center; color:var(--cinema-ink); }
.closer h2{ font-size:clamp(34px,4.4vw,64px); line-height:1.06; font-weight:560; letter-spacing:-.015em; text-shadow:0 2px 24px rgba(10,7,5,.55); color:var(--cinema-ink); } /* the global h1,h2,h3 ink rule beats .wrap's inherited light color — set it directly */
.closer .key{ color:#F08A70; }
.closer .hero-cta{ justify-content:center; margin-top:30px; }
/* ═══ responsive ═══ */
@media (max-width: 960px){
  .hero13-grid{ grid-template-columns:1fr; gap:36px; }
  .hero13 h1, .hero13 .lead, .hero13 .hero-note{ text-align:center; }
  .hero13 .lead{ margin-inline:auto; }
  .hero13 .hero-cta{ justify-content:center; }
  .hero13 .eyewrap{ text-align:center; }
  .stage{ width:min(330px,88vw); }
  .move, .agentdemo{ grid-template-columns:1fr; min-height:0; }
  .move.flip .move-txt{ order:1; } .move.flip .move-media{ order:2; }
  .move-txt h2, .move-txt p{ text-align:left; }
  .teaser{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; }
  .cinema .reel-card{ height:220px; }
  .cinema .reel-card.v{ width:124px; } .cinema .reel-card.s{ width:220px; } .cinema .reel-card.w{ width:391px; }
}
@media (prefers-reduced-motion: reduce){
  .stage video{ transition:none; }
  .ad-log .l, .ad-out .th{ transition:none; opacity:1; transform:none; }
}
/* hero13 animates on LOAD (like v12's hero), not on IO — first paint must never be empty */
.hero13 .reveal{ opacity:1; animation:riseIn .7s cubic-bezier(.2,.7,.2,1) both; }
.hero13 .reveal.d1{ animation-delay:.08s; } .hero13 .reveal.d2{ animation-delay:.16s; } .hero13 .reveal.d3{ animation-delay:.24s; }
.filmstrip.reveal{ opacity:1; animation:riseIn .7s cubic-bezier(.2,.7,.2,1) .3s both; }
@media (prefers-reduced-motion: reduce){ .hero13 .reveal, .filmstrip.reveal{ animation:none; } }
@media (max-width:700px){ .closer video{ opacity:.3; } }

/* ── hero floats: two era-context reel cards flanking the headline (Arcads-style presence, big-brand-only policy) ── */
.hero-float{ position:absolute; width:clamp(200px, 16.5vw, 248px); aspect-ratio:9/16; border-radius:18px; overflow:hidden; background:var(--cinema); box-shadow:0 40px 90px -30px rgba(40,25,15,.42), 0 4px 14px rgba(40,25,15,.10); }
.hero-float video{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-float .rc-brand{ position:absolute; left:10px; bottom:10px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#F5F1EA; background:rgba(14,10,8,.62); padding:4px 8px; border-radius:999px; backdrop-filter:blur(6px); }
/* straight cards, scattered sizes (no rotation — tilted edges read as crooked, per Dave) */
.hf-l{ left:max(36px, calc(50% - 690px)); top:50%; transform:translateY(-50%); }
.hf-r{ right:max(36px, calc(50% - 690px)); top:50%; transform:translateY(-50%); }
@media (min-width:1181px){ .hero13{ min-height:600px; display:flex; align-items:center; } .hero13 .wrap{ width:100%; } }
.hero13{ position:relative; }
.hero13 .wrap{ position:relative; z-index:2; }
@media (max-width:1180px){ .hero-float{ display:none; } }
@media (prefers-reduced-motion:reduce){ .hero-float video{ display:none; } .hero-float{ background-size:cover; } }

/* cinema strip auto-marquee (JS wraps the cards in a doubled track; falls back to manual scroll without JS) */
.cinema-strip.marquee{ display:block; overflow:hidden; }
.strip-track{ display:flex; gap:14px; width:max-content; animation:stripDrift 80s linear infinite; }
.strip-set{ display:flex; gap:14px; }
.cinema-strip.marquee:hover .strip-track{ animation-play-state:paused; }
@keyframes stripDrift{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .strip-track{ animation:none; } }

/* /mcp interactive setup widget (Higgsfield-style: surface × provider → 3 steps) */
.mcpw{ border:1px solid var(--hairline); border-radius:20px; background:#fff; padding:22px 24px 18px; margin:26px 0 6px; }
/* break out wider than the 720px prose column on desktop so a single command reads on one line, not 3-4 wrapped rows */
@media (min-width:1024px){ .mcpw{ margin-left:-110px; margin-right:-110px; } }
.mcpw-head{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.mcpw-tabs{ display:inline-flex; gap:4px; background:var(--paper-2); border-radius:999px; padding:4px; }
.mcpw-tabs button{ border:0; background:none; font:inherit; font-size:13.5px; font-weight:600; color:var(--ink-muted); padding:7px 14px; border-radius:999px; cursor:pointer; }
.mcpw-tabs button.on{ background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(40,25,15,.12); }
/* the provider (AI-client) selector only changes MCP content — hidden on CLI + Skills where every client is identical */
.mcpw.mcpw-noprov .mcpw-tabs[data-role="provider"]{ display:none; }
/* steps stack vertically so each code block spans the full widget width (was a 3-col grid that squeezed commands) */
.mcpw-steps{ display:grid; grid-template-columns:1fr; gap:18px; }
.mcpw-step{ display:flex; gap:14px; min-width:0; align-items:flex-start; }
.mcpw-n{ flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--hairline); display:grid; place-items:center; font-size:12.5px; font-weight:650; color:var(--ink-muted); }
.mcpw-b{ flex:1 1 auto; min-width:0; }
.mcpw-b h3{ font-size:15.5px; margin:2px 0 6px; }
.mcpw-b p{ font-size:13.5px; color:var(--ink-muted); margin:0 0 8px; line-height:1.5; }
.mcpw-code{ display:flex; align-items:flex-start; gap:8px; background:var(--paper-2); border:1px solid var(--hairline); border-radius:10px; padding:8px 10px; cursor:pointer; transition:border-color .12s; }
.mcpw-code:hover{ border-color:var(--coral); }
.mcpw-code:focus-visible{ outline:2px solid var(--coral); outline-offset:2px; }
/* one line per command; the very longest scroll horizontally rather than hard-wrapping mid-flag (copy button stays pinned) */
.mcpw-code code{ flex:1; min-width:0; font-family:var(--mono); font-size:11.5px; white-space:pre; overflow-x:auto; color:var(--ink); line-height:1.55; }
.mcpw-copy{ flex:none; border:0; background:none; cursor:pointer; color:var(--ink-muted); font-size:14px; }
/* ONE line, never wrapped (Dave: the 2-row list looked ugly). Compact so all 7 fit on desktop; horizontal-scroll is the
   safety valve on narrow viewports (scrollbar hidden) rather than breaking to a second row. */
.mcpw-tabs[data-role="provider"]{ flex-wrap:nowrap; max-width:100%; overflow-x:auto; scrollbar-width:none; }
.mcpw-tabs[data-role="provider"]::-webkit-scrollbar{ display:none; }
.mcpw-tabs[data-role="provider"] button{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; padding:6px 10px; font-size:12.5px; flex:none; }
.mcpw-tabs[data-role="provider"] .prov-logo{ width:13px; height:13px; flex:none; opacity:.75; }
.mcpw-tabs[data-role="provider"] button.on .prov-logo{ opacity:1; }
.mcpw-foot{ margin:18px 0 0; font-size:13px; color:var(--ink-muted); }

/* ── FORMATS SHOWCASE ──────────────────────────────────────────────────────
   SEE the shapes an ad can take. Poster-first 9:16 tiles; the 3 AI-video leads
   autoplay in view (data-auto), the native formats play on hover/tap (data-hover).
   Reuses site.v15.js poster-shield + play handlers — no new JS. */
.formats .sec-head{ max-width:66ch; }
.formats .sec-head p{ color:var(--ink-muted); }
.fmt-group{ margin-top:clamp(40px,5vw,64px); }
.fmt-grouphead{ display:flex; align-items:baseline; gap:8px 18px; flex-wrap:wrap; margin-bottom:clamp(16px,1.8vw,22px); padding-bottom:14px; border-bottom:1px solid var(--line); }
.fmt-grouphead .mono{ color:var(--coral); }
.fmt-sub{ font-size:.94rem; line-height:1.4; color:var(--ink-muted); }

/* Format tiles: ONE row max at every viewport — a horizontal scroll rail, never a wrapping
   grid. Hidden scrollbar + scroll-snap; the cut-off card at the edge is the affordance. */
.fmt-grid{ display:flex; gap:clamp(12px,1.3vw,18px); overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; padding:4px 2px 10px; }
.fmt-grid::-webkit-scrollbar{ display:none; }
.fmt-grid .fmt-card{ scroll-snap-align:start; flex:0 0 auto; width:196px; }
/* AI-video leads: bigger phone-shaped tiles, still one row */
.fmt-grid-lead{ gap:clamp(16px,1.8vw,24px); }
.fmt-grid-lead .fmt-card{ width:256px; }
/* chip stacks share the marquee rail: 2 text chips per column, stretched to the video-card height */
.fmt-stack{ flex:0 0 auto; width:204px; display:flex; flex-direction:column; gap:12px; scroll-snap-align:start; }
.fmt-stack .fmt-mini{ flex:1 1 0; width:auto; min-height:0; }
.fmt-grid-lead > .fmt-mini--cta{ flex:0 0 auto; scroll-snap-align:start; }

.fmt-card{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--surface); box-shadow:var(--el-1); transition:transform var(--t), box-shadow var(--t); }
.fmt-card:hover{ transform:translateY(-3px); box-shadow:var(--el-2); }
.fmt-card::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(28,24,17,.06); border-radius:inherit; pointer-events:none; z-index:4; }
.fmt-media{ position:relative; aspect-ratio:9/16; overflow:hidden; background:var(--surface-3); }
.fmt-media video, .fmt-media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* caption always visible over the poster so the format reads even at rest */
.fmt-cap{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:34px 13px 12px; background:linear-gradient(180deg, rgba(16,12,10,0) 0%, rgba(16,12,10,.5) 55%, rgba(16,12,10,.86) 100%); pointer-events:none; }
.fmt-name{ display:block; color:#fff; font-family:var(--display); font-weight:560; font-size:1.04rem; letter-spacing:-.01em; line-height:1.08; }
.fmt-desc{ display:block; margin-top:4px; color:rgba(255,255,255,.82); font-size:.77rem; line-height:1.32; }
.fmt-grid-lead .fmt-name{ font-size:1.16rem; }
.fmt-grid-lead .fmt-desc{ font-size:.83rem; }

.fmt-cta{ margin-top:clamp(38px,4.4vw,58px); text-align:center; }

/* Format-breadth text chips (.fmt-mini). On EN they live as 2-high .fmt-stack columns INSIDE the
   marquee .fmt-grid-lead rail; .fmt-more/.fmt-rail wrappers are kept only for locale homepages
   that may still carry the older standalone-rail block. */
.fmt-more{ margin-top:clamp(26px,3vw,40px); }
.fmt-more-head{ margin:0 auto 18px; max-width:680px; text-align:center; font-size:1rem; line-height:1.5; color:var(--muted); }
.fmt-more-head b{ color:var(--text); font-weight:640; }
.fmt-rail{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; padding:4px 2px 8px; }
.fmt-rail::-webkit-scrollbar{ display:none; }
.fmt-mini{ scroll-snap-align:start; flex:0 0 auto; width:186px; min-height:98px; display:flex; flex-direction:column; justify-content:flex-end; gap:3px; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--el-1); transition:transform var(--t), box-shadow var(--t); }
.fmt-mini:hover{ transform:translateY(-3px); box-shadow:var(--el-2); }
.fmt-mini-name{ font-family:var(--display); font-weight:560; font-size:1.02rem; letter-spacing:-.01em; color:var(--text); line-height:1.1; }
.fmt-mini-desc{ font-size:.78rem; line-height:1.34; color:var(--muted); }
.fmt-mini-tag{ align-self:flex-start; margin-bottom:6px; font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--cream); background:var(--coral-solid); padding:2px 7px; border-radius:var(--pill); }
.fmt-mini.is-new{ border-color:rgba(200,68,42,.28); background:var(--cream); }
.fmt-mini--cta{ align-items:flex-start; justify-content:center; text-decoration:none; border-style:dashed; background:transparent; box-shadow:none; color:var(--coral); font-family:var(--display); font-weight:560; font-size:1.02rem; }
.fmt-mini--cta:hover{ border-color:var(--line-2); transform:translateY(-3px); box-shadow:none; }
.fmt-mini--cta .arr{ margin-left:2px; }
@media (max-width:600px){ .fmt-mini{ width:160px; min-height:92px; padding:12px; } }

@media (max-width:900px){
  .fmt-grid .fmt-card{ width:176px; }
  .fmt-grid-lead .fmt-card{ width:232px; }
  .fmt-stack{ width:186px; }
}
@media (max-width:600px){
  .fmt-grid, .fmt-grid-lead{ gap:11px; }
  .fmt-grid .fmt-card{ width:156px; }
  .fmt-grid-lead .fmt-card{ width:204px; }
  .fmt-stack{ width:168px; gap:11px; }
  .fmt-cap{ padding:28px 10px 10px; }
  .fmt-name{ font-size:.95rem; }
  .fmt-grid-lead .fmt-name{ font-size:1rem; }
  .fmt-desc, .fmt-grid-lead .fmt-desc{ font-size:.74rem; }
}