/* ============================================================
   maja by looklike — brand tokens
   A tasteful derivative of the look: design system (docs/external-distribution/brand/looklike-tokens.css).
   Kept: black/off-white foundation, Neue Haas Black display, lowercase, dim-25 soft emphasis,
   8px radii (NEVER pill), the long printed-on-paper card shadow, 1px ink rules, serif italic accents,
   one theme color per piece — Maja's is teal #15AA9B, picked from looklike's own theme set.
   SaaS-ified: body text at Roman/Medium for legibility, web-responsive type scale, functional density.
   NOTE: Neue Haas Display is licensed type (from Gustav's brand bundle) — keep self-hosted, never CDN it.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

@font-face { font-family: 'Neue Haas Display'; src: url('/assets/fonts/NeueHaasDisplayRoman.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Neue Haas Display'; src: url('/assets/fonts/NeueHaasDisplayRomanItalic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Neue Haas Display'; src: url('/assets/fonts/NeueHaasDisplayMediu.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Neue Haas Display'; src: url('/assets/fonts/NeueHaasDisplayMediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Neue Haas Display'; src: url('/assets/fonts/NeueHaasDisplayBlack.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Neue Haas Display'; src: url('/assets/fonts/NeueHaasDisplayBlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }

:root {
  --look-black: #000000;
  --look-offwhite: #F9F9F9;
  --ink: #000000;
  --ink-25: rgba(0,0,0,.25);
  --ink-50: rgba(0,0,0,.50);
  --ink-08: rgba(0,0,0,.08);
  --paper: #F9F9F9;
  --paper-25: rgba(249,249,249,.25);
  --paper-50: rgba(249,249,249,.50);
  --theme: #15AA9B;            /* maja's one theme color — looklike --theme-teal */
  --theme-soft: rgba(21,170,155,.10);
  --ff: 'Neue Haas Display','Neue Haas Grotesk Display Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
  --ff-serif: 'Instrument Serif','Signifier','Times New Roman',serif;
  --r-xs: 4px; --r-s: 8px; --r-m: 16px;  /* never pill */
  --shadow-card: 7px 7px 22px 0 rgba(0,0,0,.08), 26px 29px 39px 0 rgba(0,0,0,.07), 59px 66px 53px 0 rgba(0,0,0,.04), 105px 117px 63px 0 rgba(0,0,0,.01);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.04);
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 160ms; --dur: 280ms;
}

html, body {
  margin: 0; background: var(--look-offwhite); color: var(--ink);
  font-family: var(--ff); font-weight: 400; font-size: 16px; line-height: 1.4;
  letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--ink); color: var(--paper); }
a { color: inherit; text-decoration: none; }

/* display type — Black 900, tight, lowercase by class */
.mk-display { font-weight: 900; letter-spacing: -0.025em; line-height: 1.02; }
.mk-title   { font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; }
.low { text-transform: lowercase; }
.mk-serif   { font-family: var(--ff-serif); font-weight: 400; font-style: italic; text-transform: none; letter-spacing: 0; }
.dim   { color: var(--ink-25); }   /* soft emphasis — the system's substitute for bold */
.dim50 { color: var(--ink-50); }
.pdim  { color: var(--paper-50); }
.stamp { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-50); font-weight: 500; }
.stamp.on-dark { color: var(--paper-50); }

/* containers */
.mk-card  { background: #fff; border-radius: var(--r-s); box-shadow: var(--shadow-card); }
.mk-flat  { background: #fff; border: 1px solid var(--ink-08); border-radius: var(--r-s); }
.mk-dark  { background: var(--look-black); color: var(--paper); border-radius: var(--r-s); }
.rule-b   { border-bottom: 1px solid var(--ink); }
.rule-t   { border-top: 1px solid var(--ink); }

/* buttons — black rectangles, r-s, hover invert. never pill. */
.mk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  border-radius: var(--r-s); padding: 14px 24px; font-weight: 900; font-size: 15px;
  letter-spacing: -0.01em; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mk-btn:hover { background: var(--look-offwhite); color: var(--ink); }
.mk-btn.on-dark { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.mk-btn.on-dark:hover { background: transparent; color: var(--paper); }
.mk-btn.theme { background: var(--theme); border-color: var(--theme); color: #04201c; }
.mk-btn.theme:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mk-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; color: var(--ink); border: 1px solid var(--ink-25);
  border-radius: var(--r-s); padding: 14px 24px; font-weight: 500; font-size: 15px; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.mk-ghost:hover { border-color: var(--ink); }

/* form fields */
.mk-input {
  width: 100%; background: #fff; border: 1px solid var(--ink-25); border-radius: var(--r-s);
  padding: 13px 16px; font: inherit; color: var(--ink); outline: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.mk-input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(21,170,155,.25); }
.mk-input::placeholder { color: var(--ink-25); }

/* editorial section heads — num · title · sub */
.sec { padding: 96px 0; }
.sec-head { display: grid; grid-template-columns: 72px 1fr; gap: 24px; align-items: baseline; margin-bottom: 48px; }
.sec-num { font-weight: 900; color: var(--theme); font-size: 15px; }

/* range slider */
input[type=range].mk-range { -webkit-appearance: none; width: 100%; height: 2px; background: var(--ink-25); border-radius: 0; }
input[type=range].mk-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--look-offwhite); box-shadow: 0 0 0 1px var(--ink); cursor: pointer;
}

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.num { font-variant-numeric: tabular-nums; }

/* aurora — the hero gradient field (blaise-mood: dark → steel blue → warm sand glow; ours, with a teal breath) */
.aurora {
  background:
    radial-gradient(95% 75% at 12% 108%, rgba(233,214,178,.50), transparent 62%),
    radial-gradient(75% 65% at 88% 98%,  rgba(122,162,192,.32), transparent 66%),
    radial-gradient(65% 55% at 50% 85%,  rgba(56,92,116,.40),  transparent 72%),
    radial-gradient(50% 40% at 70% 70%,  rgba(21,170,155,.10), transparent 70%),
    #0a0c10;
}
.aurora-text { color: var(--paper); }
.aurora .stamp { color: var(--paper-50); }

/* ============ SaaS blend v2 — motion system + UI typography ============ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
  --ff-ui: 'Inter','Neue Haas Display','Helvetica Neue',Helvetica,Arial,sans-serif;
  --theme2: #4ACAD1;             /* looklike theme-cyan — gradient partner */
  --grad: linear-gradient(100deg, #15AA9B, #4ACAD1);
}
body { font-family: var(--ff-ui); }
.mk-display, .mk-title { font-family: var(--ff); }   /* Neue Haas stays ONLY on display type */
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chip { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:8px; font:600 12px/1 var(--ff-ui); letter-spacing:.02em; }

/* scroll reveal — only hides when JS is active (html.js); no-JS / failsafe keeps content visible */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); }
html.js .reveal.in { opacity: 1; transform: none; }

/* aurora drift — pre-blurred gradient blobs (NO filter:blur — 70px blur on 60vw surfaces was the
   single worst GPU cost on weak devices; long gradient falloff gives the same softness for free) */
.aurora-wrap { position: relative; overflow: hidden; background: #0a0c10; }
.blob { position:absolute; border-radius:50%; opacity:.55; will-change: transform, opacity; }
.blob.b1 { width:60vw; height:60vw; left:-15vw; bottom:-38vw; background: radial-gradient(circle, rgba(233,214,178,.5) 0%, rgba(233,214,178,.22) 38%, transparent 72%); animation: drift1 16s ease-in-out infinite alternate; }
.blob.b2 { width:48vw; height:48vw; right:-12vw; bottom:-30vw; background: radial-gradient(circle, rgba(122,162,192,.4) 0%, rgba(122,162,192,.18) 38%, transparent 72%); animation: drift2 19s ease-in-out infinite alternate; }
.blob.b3 { width:34vw; height:34vw; left:38vw; bottom:-20vw; background: radial-gradient(circle, rgba(21,170,155,.3) 0%, rgba(21,170,155,.13) 38%, transparent 72%); animation: drift3 23s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(6vw,-4vw) scale(1.08); } }
@keyframes drift2 { to { transform: translate(-5vw,-6vw) scale(1.12); } }
@keyframes drift3 { to { transform: translate(-7vw,-3vw) scale(.94); } }
.grain { position:absolute; inset:0; opacity:.5; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* marquee */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee-track { display: inline-flex; gap: 56px; padding-right: 56px; animation: marq 30s linear infinite; will-change: transform; }
@keyframes marq { to { transform: translateX(-50%); } }

/* hero slack mock float + glow */
.float-card { animation: floaty 7s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-10px) rotate(.4deg); } }
.glow { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px -20px rgba(21,170,155,.35), 0 18px 50px rgba(0,0,0,.45); }

/* typing dots */
.tdots span { display:inline-block; width:5px; height:5px; margin:0 1.5px; border-radius:50%; background:#94a3b8; animation: tblink 1.1s infinite; }
.tdots span:nth-child(2){ animation-delay:.18s } .tdots span:nth-child(3){ animation-delay:.36s }
@keyframes tblink { 0%,80%,100% { opacity:.25 } 40% { opacity:1 } }
.msg-pop { animation: pop .42s var(--ease) both; }
@keyframes pop { from { opacity:0; transform: translateY(8px) scale(.985); } to { opacity:1; transform:none; } }

/* timeline progress line */
.tl-line { position:absolute; top:22px; left:0; height:2px; background:var(--grad); width:0; transition: width 1.6s var(--ease); }
.in .tl-line { width:100%; }

/* hover physics */
.lift { transition: transform .28s var(--ease), box-shadow .28s var(--ease); }
.lift:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.btn-sheen { position:relative; overflow:hidden; }
.btn-sheen::after { content:''; position:absolute; inset:0; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%); transform:translateX(-120%); transition:transform .7s var(--ease); }
.btn-sheen:hover::after { transform:translateX(120%); }

/* nav glass-on-scroll */
.navbar { transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease); border-bottom:1px solid transparent; }
.navbar.scrolled { background: rgba(10,12,16,.92); backdrop-filter: blur(14px); border-bottom-color: rgba(249,249,249,.08); }

@media (prefers-reduced-motion: reduce) {
  .blob, .float-card, .marquee-track, .msg-pop, .tdots span, .orbit-chip { animation: none !important; }
  .reveal { opacity:1; transform:none; transition:none; }
}

/* ============ mobile optimization layer (viktor-audit parity, 2026-06-10) ============ */

/* dynamic viewport height — 100vh overshoots the visible area on iOS Safari/Chrome */
.dvh { min-height: 100vh; min-height: 100dvh; }

/* anchor auth/signup content upper-middle on phones instead of dead center (browser
   chrome eats the bottom; dead center pushes CTAs down toward the toolbar) */
.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; }
@media (max-width: 1023px) {
  .auth-main { justify-content: flex-start; padding-top: clamp(36px, 9dvh, 96px); }
}

/* fixed bottom support bar — solid surface, safe-area aware, never clipped by the toolbar */
.helpbar { background: var(--look-offwhite); border-top: 1px solid var(--ink-08); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.safe-bottom { padding-bottom: max(16px, env(safe-area-inset-bottom)); }

/* ── mobile nav menu ── */
.menu-btn {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; border-radius: var(--r-s);
  background: transparent; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.menu-btn .i-close { display: none; }
body.menu-open .menu-btn .i-burger { display: none; }
body.menu-open .menu-btn .i-close { display: block; }
@media (max-width: 767px) { .menu-btn { display: inline-flex; } }

.menu-scrim { display: none; position: fixed; inset: 0; z-index: 999; background: rgba(10,12,16,.45); }
.mobile-menu {
  display: none;
  position: fixed; left: 12px; right: 12px;
  top: calc(env(safe-area-inset-top, 0px) + 72px);
  z-index: 1000; padding: 8px;
  background: rgba(255,255,255,.97);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(10,12,16,.10); border-radius: var(--r-m);
  box-shadow: 0 18px 44px rgba(10,12,16,.28);
}
body.menu-open { overflow: hidden; }
body.menu-open .menu-scrim { display: block; }
body.menu-open .mobile-menu { display: block; }
body.menu-open .navbar { z-index: 1001; background: rgba(10,12,16,.95); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.mobile-menu a {
  display: flex; align-items: center; min-height: 48px; padding: 0 14px;
  border-radius: 10px; color: #0a0c10; font-weight: 600; font-size: 16px;
}
.mobile-menu a:active { background: rgba(10,12,16,.06); }
.mobile-menu .mm-cta { background: var(--grad); color: #000; font-weight: 700; justify-content: center; margin-top: 6px; }

/* ── loading state: zero layout shift (reserved dims, centered spinner) ── */
.mk-btn { --spin: var(--paper); }
.mk-btn.theme { --spin: #04201c; }
.mk-ghost { --spin: var(--ink); }
.is-loading { pointer-events: none; position: relative; color: transparent !important; }
.is-loading .ld-wrap, .is-loading svg, .is-loading img { visibility: hidden; }
.is-loading::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 2.5px solid rgba(127,127,127,.3); border-top-color: var(--spin, #0a0c10);
  animation: mkspin .7s linear infinite;
}
@keyframes mkspin { to { transform: rotate(360deg); } }
.ld-note { display: block; min-height: 18px; opacity: 0; transition: opacity .25s var(--ease); }
.ld-note.show { opacity: 1; }

/* ── sticky header: anchored sections never slide under the bar ── */
section[id] { scroll-margin-top: 76px; }

/* ── horizontal control rows (dashboard tabs): snap, hidden scrollbar, stable height ── */
@media (max-width: 767px) {
  .dash-tabs { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent); }
  .dash-tabs::-webkit-scrollbar { display: none; }
  .dash-tabs a { flex: 0 0 auto; scroll-snap-align: start; min-height: 44px; align-items: center; }
}

/* ── slider: bigger thumb on touch ── */
@media (max-width: 768px) {
  input[type=range].mk-range::-webkit-slider-thumb { width: 26px; height: 26px; }
}

/* ── dark-section contrast at real mobile brightness (audit P1) ──
   text-white/N utilities are only used on dark surfaces in this codebase */
@media (max-width: 768px) {
  .text-white\/30 { color: rgba(255,255,255,.5); }
  .text-white\/35 { color: rgba(255,255,255,.55); }
  .text-white\/40 { color: rgba(255,255,255,.58); }
  .text-white\/45 { color: rgba(255,255,255,.62); }
  .text-white\/50 { color: rgba(255,255,255,.68); }
  .text-white\/55 { color: rgba(255,255,255,.72); }
  .text-white\/60 { color: rgba(255,255,255,.75); }
  .stamp.on-dark, .pdim { color: rgba(249,249,249,.68); }
}

/* ============ motion system v2 (artisan-reference, 2026-06-10) ============ */

/* 1. staggered hero entrance — pure CSS, --i per element */
html.js .hi { opacity: 0; animation: heroin .8s cubic-bezier(.16,1,.3,1) forwards; animation-delay: calc(var(--i, 0) * .1s + .05s); }
@keyframes heroin { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* 9. arrow micro-translate on hover */
.arr { display: inline-block; transition: transform .2s ease-out; }
a:hover .arr, button:hover .arr { transform: translateX(4px); }

/* masked word reveals — headlines rise line-by-line out of their own baseline */
.ws .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
html.js .ws .w > span { display: inline-block; transform: translateY(112%); transition: transform .65s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--wi, 0) * .04s); }
html.js .ws.in .w > span, html.js .reveal.in .ws .w > span { transform: none; }

/* uniform premium hover physics on every primary control */
.mk-btn, .mk-ghost, .btn-sheen {
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1),
              background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mk-btn:hover, .btn-sheen:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.mk-btn:active, .btn-sheen:active, .mk-ghost:active { transform: translateY(0) scale(.98); transition-duration: .12s; }
.mk-ghost:hover { transform: translateY(-1px); }

/* 10. nav shrink on scroll (glass already handled by .scrolled) */
.navbar .nav-inner { height: 64px; transition: height .3s var(--ease); }
.navbar.scrolled .nav-inner { height: 56px; }

/* 3. chaos pile — REAL physics: tool logos + the humans it used to take, draggable.
   Grounded: dot-grid texture + soft floor shading so the pit reads as a place, not dead space. */
.chaos {
  position: relative; height: 430px; max-width: 620px; margin: 40px auto 0; touch-action: pan-y; overflow: hidden; border-radius: var(--r-m);
  background:
    radial-gradient(60% 55% at 50% 102%, rgba(10,12,16,.05), transparent 70%),
    radial-gradient(rgba(10,12,16,.05) 1px, transparent 1px);
  background-size: 100% 100%, 26px 26px;
}
.pile-body {
  position: absolute; top: 0; left: 0;
  user-select: none; -webkit-user-select: none; will-change: transform; opacity: 0;
}
.pile-body.live { opacity: 1; }
/* physics mode ONLY: tiles capture the pointer. Never in static mode — a touch starting on a tile
   must scroll the page (touch-action:none on every tile was the mobile scroll-hijack). */
.chaos:not(.static) .pile-body { cursor: grab; touch-action: none; }
.chaos:not(.static) .pile-body:active { cursor: grabbing; }
/* labeled card tiles — icon/face + role INSIDE the tile, so the pile explains itself */
.pile-tile {
  width: 122px; height: 104px; border-radius: 18px; background: #fff; border: 1px solid rgba(10,12,16,.1);
  box-shadow: 0 14px 30px rgba(10,16,28,.17), inset 0 1px 0 rgba(255,255,255,.95);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 10px 8px;
}
.pile-tile svg { width: 34px; height: 34px; }
.pt-ic { display: flex; align-items: center; justify-content: center; height: 40px; }
.pt-face { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(10,16,28,.18); pointer-events: none; display: block; }
.pt-label { font: 700 10px/1.1 var(--ff-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-50); text-align: center; max-width: 106px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* static pile (touch devices / reduced-motion / no-JS / ?cap / matter load failure): tidy heap.
   Coarse pointers skip physics entirely (shell.ts) — page swipes must never fight a sandbox,
   and phones skip the Matter.js download. Tilts keep a little of the mess; ?cap straightens them. */
.chaos.static { height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 18px; padding: 8px 0; }
.chaos.static .pile-body { position: static; opacity: 1; will-change: auto; }
.chaos.static .pile-body:nth-child(3n+1) { transform: rotate(-2.5deg); }
.chaos.static .pile-body:nth-child(3n+2) { transform: rotate(1.8deg); }
.chaos.static .pile-body:nth-child(4n+3) { transform: rotate(3.2deg); }
/* the "drag the mess around" invite only makes sense where the physics pile runs */
@media (pointer: coarse) { .drag-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .drag-hint { display: none; } }
@media (max-width: 640px) {
  .chaos { height: 400px; }
  .chaos.static { gap: 10px 12px; }
  .pile-tile { width: 96px; height: 84px; border-radius: 14px; gap: 5px; }
  .pile-tile svg { width: 26px; height: 26px; }
  .pt-ic { height: 30px; }
  .pt-face { width: 34px; height: 34px; }
  .pt-label { font-size: 8.5px; max-width: 84px; }
}

/* pulse layer — pings on live dots, breathing glows on portraits + primary CTAs */
.pdot { position: relative; }
.pdot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: ping 2.6s cubic-bezier(0,0,.2,1) infinite; animation-delay: calc(var(--i, 0) * .4s); }
@keyframes ping { 0% { transform: scale(1); opacity: .8; } 75%, 100% { transform: scale(3.4); opacity: 0; } }
/* breathe: animating box-shadow on large surfaces forces full repaints every frame and tanked
   scroll perf (Gustav, 2026-06-10) — pulse glows are now ONLY tiny pdot pings + the small CTA */
.btn-breathe { animation: btnbreathe 3.8s ease-in-out infinite; }
@keyframes btnbreathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(74,202,209,0); } 50% { box-shadow: 0 0 14px 1px rgba(74,202,209,.35); } }

/* sheet seam — light sections slide over the dark ones like a sheet (kills the flashbang cut) */
.sheet-top { border-radius: 28px 28px 0 0; margin-top: -28px; position: relative; z-index: 2; }

/* offstage — ambient animations pause while their section is out of view (battery + weak GPUs) */
.offstage .blob, .offstage .marquee-track, .offstage .gpulse, .offstage .orbit-chip,
.offstage .float-card, .offstage .cta-float, .offstage .hero-float,
.offstage .pdot::after, .offstage .pdot::before,
.offstage .step-pane.on .m-seq, .offstage .step-pane.on .mbar > span, .offstage .step-pane.on .mthumb,
.offstage .step-pane.on .mcol, .offstage .step-dot.on::after, .offstage .step-dot.on::before { animation-play-state: paused !important; }

/* lite mode — weak devices (low cores/memory, set by motion()): kill ambience + expensive blurs */
html.lite .blob, html.lite .gpulse, html.lite .float-card, html.lite .orbit-chip,
html.lite .cta-float, html.lite .hero-float, html.lite .pdot::after, html.lite .pdot::before,
html.lite .btn-breathe, html.lite .reel-play, html.lite .step-dot.on { animation: none !important; }
html.lite .orbit-chip { opacity: 1 !important; }
html.lite .mobile-menu, html.lite .orbit-chip, html.lite .cta-float, html.lite .hero-float, html.lite .nav-panel, html.lite .reel-chip {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.lite .navbar.scrolled, html.lite body.menu-open .navbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10,12,16,.97); }
html.lite .grain { display: none; }

/* topbar — launch-energy announcement banner (landing only); hides on scroll, nav slides up */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 38px;
  display: flex; align-items: center; justify-content: center; padding: 0 12px;
  background: linear-gradient(100deg, #0e2e29, #0a0c10 70%); color: rgba(255,255,255,.85);
  font: 600 12.5px/1 var(--ff-ui); white-space: nowrap; overflow: hidden;
  border-bottom: 1px solid rgba(74,202,209,.18); transition: transform .35s var(--ease);
}
.topbar a { color: #4ACAD1; font-weight: 800; }
/* small phones: swap the full banner copy (.tb-f) for the short form (.tb-s) so nothing clips at 390px */
.topbar .tb-s { display: none; }
@media (max-width: 480px) {
  .topbar { font-size: 11.5px; }
  .topbar .tb-f { display: none; }
  .topbar .tb-s { display: inline; }
}
body.has-topbar .navbar { top: 38px; transition: top .35s var(--ease), background .3s var(--ease), border-color .3s var(--ease); }
body.has-topbar #H { padding-top: calc(4rem + 38px); }
body.past-top .topbar { transform: translateY(-100%); }
body.has-topbar.past-top .navbar { top: 0; }
body.has-topbar .mobile-menu { top: calc(env(safe-area-inset-top, 0px) + 72px + 38px); }
body.has-topbar.past-top .mobile-menu { top: calc(env(safe-area-inset-top, 0px) + 72px); }

/* hero floating mini-cards — the product keeps performing after the entrance */
.hero-float {
  position: absolute; z-index: 2; display: none; padding: 12px 14px; border-radius: 13px; text-align: left;
  background: rgba(17,21,28,.78); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 16px 44px rgba(0,0,0,.45); color: #fff; font: 500 12.5px/1.5 var(--ff-ui); max-width: 220px;
  animation: chipfloat 6.8s ease-in-out infinite alternate;
}
@media (min-width: 1180px) { .hero-float { display: block; } }

/* marquee logo marks */
.mq-ic { display: inline-flex; }
.mq-ic svg { width: 16px; height: 16px; display: block; }

/* nav: underline-grow links + hover dropdown panel */
.nlink { position: relative; padding-bottom: 3px; }
.nlink::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%; border-radius: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nlink:hover::after { transform: scaleX(1); }
.nav-drop { position: relative; display: inline-flex; }
.nav-panel {
  position: absolute; top: calc(100% + 14px); left: -14px; min-width: 215px; padding: 8px;
  display: flex; flex-direction: column; border-radius: 14px;
  background: rgba(14,17,23,.92); border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.nav-drop::before { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 16px; } /* hover bridge */
.nav-drop:hover .nav-panel, .nav-drop:focus-within .nav-panel { opacity: 1; pointer-events: auto; transform: none; }
.nav-panel a { display: block; padding: 10px 12px; border-radius: 9px; color: rgba(255,255,255,.78); font: 500 13.5px/1 var(--ff-ui); }
.nav-panel a:hover { background: rgba(255,255,255,.08); color: #fff; }

/* persona hover: photo zoom */
.persona-card { overflow: hidden; }
.persona-card img { transition: transform .6s var(--ease); }
.persona-card:hover img { transform: scale(1.05); }

/* reel play chip: idle pulse */
.reel-play { animation: playpulse 2.8s ease-in-out infinite; }
@keyframes playpulse { 0%, 100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.08); } }

/* blobs breathe (opacity only — compositor) on top of their drift */
.blob.b1 { animation: drift1 16s ease-in-out infinite alternate, blobpulse 7s ease-in-out infinite alternate; }
.blob.b2 { animation: drift2 19s ease-in-out infinite alternate, blobpulse 8.5s ease-in-out infinite alternate; }
.blob.b3 { animation: drift3 23s ease-in-out infinite alternate, blobpulse 6.2s ease-in-out infinite alternate; }
@keyframes blobpulse { from { opacity: .4; } to { opacity: .68; } }

/* step carousel active dot: pulse ring */
.step-dot.on::before { content: ''; position: absolute; inset: -2px; border: 2px solid rgba(21,170,155,.55); border-radius: 99px; animation: ringpulse 2.2s ease-out infinite; pointer-events: none; }
@keyframes ringpulse { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.9); opacity: 0; } }

/* gpulse — the Artisan-style breathing radial glow, done cheap: a gradient layer animating
   ONLY opacity+transform (compositor), never box-shadow. Place behind portraits/mocks. */
.gpulse {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; opacity: .5;
  background: radial-gradient(50% 50% at 50% 50%, rgba(21,170,155,.62), rgba(74,202,209,.24) 48%, transparent 72%);
  animation: gpulse 4.2s ease-in-out infinite; will-change: transform, opacity;
}
@keyframes gpulse { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: 1; transform: scale(1.22); } }

/* double-ripple pings: second delayed ring makes the pulse readable at a glance */
.pdot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: ping 2.6s cubic-bezier(0,0,.2,1) infinite; animation-delay: calc(var(--i, 0) * .4s + 1.3s); }
.jr-row.on .jr-day { position: relative; }
.jr-row.on .jr-day::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(21,170,155,.5); animation: ping 2.2s cubic-bezier(0,0,.2,1) infinite; }

/* journey — scroll-driven honest timeline */
.jr-visual { position: relative; aspect-ratio: 4/3.4; }
.jr-pane { position: absolute; inset: 0; opacity: 0; visibility: hidden; background: #fff; filter: blur(7px); transform: translateY(20px) scale(.97); transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1), filter .55s cubic-bezier(.16,1,.3,1), visibility 0s .55s; pointer-events: none; padding: 26px; display: flex; flex-direction: column; justify-content: center; }
.jr-pane.on { opacity: 1; visibility: visible; filter: none; transform: none; pointer-events: auto; transition-delay: 0s; z-index: 2; }
.jr-row { display: flex; gap: 16px; padding: 17px 14px; border-radius: 12px; cursor: pointer; transition: background .3s var(--ease), opacity .3s var(--ease); opacity: .45; }
.jr-row.on { opacity: 1; background: #fff; box-shadow: var(--shadow-soft); }
.jr-day { min-width: 52px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font: 800 11.5px/1 var(--ff-ui); letter-spacing: .04em; background: var(--ink-08); color: var(--ink-50); }
.jr-row.on .jr-day { background: var(--grad); color: #04201c; }
.jr-line { position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 99px; background: var(--ink-08); overflow: hidden; }
.jr-line > span { display: block; width: 100%; height: 0; background: var(--grad); border-radius: 99px; }

@media (prefers-reduced-motion: reduce) {
  .pdot::after, .pdot::before, .btn-breathe, .gpulse, .jr-row.on .jr-day::after,
  .hero-float, .cta-float, .reel-play, .step-dot.on { animation: none !important; }
  html.js .dpop, .dbar > span, .dcol { animation: none !important; opacity: 1 !important; transform: scaleX(var(--w, 1)) scaleY(1) !important; }
  html.js .dpop { transform: none !important; }
  html.js .ws .w > span { transform: none !important; transition: none !important; }
  .mk-btn, .mk-ghost, .btn-sheen { transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
}

/* 4+5. orbit chip entrance (fade-stagger; float owns transform) */
html.js .orbit-chip { opacity: 0; }
.orbit-wrap.in .orbit-chip { animation: chipfade .6s ease-out forwards, chipfloat 6.5s ease-in-out infinite alternate; animation-delay: calc(.15s + var(--i, 0) * .07s), calc(var(--i, 0) * -1.3s); }
@keyframes chipfade { to { opacity: 1; } }
@media (max-width: 1023px) { .orbit-wrap.in .orbit-chip { animation: chipfade .5s ease-out forwards; animation-delay: calc(.1s + var(--i, 0) * .06s); } }

/* scroll-pinned steps shell + layered stage (image backdrop, floating mock) */
.steps-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.step-stage { position: relative; padding-bottom: 36px; }
.step-bg { width: 84%; aspect-ratio: 1/1; object-fit: cover; border-radius: 18px; display: block; box-shadow: var(--shadow-soft); }
.step-pane.on .step-bg { animation: stepin .5s cubic-bezier(.16,1,.3,1) both; }
.step-mock { position: absolute; right: -2%; bottom: 0; width: 74%; }
@media (max-width: 1023px) {
  .steps-sticky { align-items: flex-start; padding-top: 72px; overflow-y: auto; }
  .step-bg { display: none; }
  .step-mock { position: static; width: 100%; }
  .step-stage { padding-bottom: 0; }
}

/* 7+8. step carousel — elastic dots, slide-fade panes, animated UI mocks */
.step-dot { width: 9px; height: 9px; border-radius: 99px; background: var(--ink-25); border: 0; padding: 0; cursor: pointer; position: relative; overflow: hidden; transition: width .4s cubic-bezier(.175,.885,.32,1.275), background .3s var(--ease); }
.step-dot.on { width: 38px; background: var(--ink-08); }
.step-dot::after { content: ''; position: absolute; inset: 0; border-radius: 99px; background: var(--grad); transform-origin: left; transform: scaleX(var(--p, 0)); }
.step-pane { display: none; }
.step-pane.on { display: grid; }
.step-pane.on .step-copy { animation: stepin .4s cubic-bezier(.16,1,.3,1) both; }
.step-pane.on .step-mock { animation: stepin .4s cubic-bezier(.16,1,.3,1) .06s both; }
@keyframes stepin { from { opacity: 0; transform: translateX(26px); } }
.step-mock { background: #fff; border: 1px solid var(--ink-08); border-radius: var(--r-m); box-shadow: var(--shadow-card); padding: 20px; min-height: 0; overflow: hidden; transform: translateZ(0); contain: paint; }
/* mock building blocks — each animates when its pane activates */
.mrow { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; background: var(--look-offwhite); border: 1px solid var(--ink-08); font: 500 13.5px/1.2 var(--ff-ui); }
/* mock internals LOOP while their step is active (artisan: the UI never freezes) —
   build with springy overshoot → hold → tear down → rebuild, synced to --step-dur */
.step-pane.on .m-seq { opacity: 0; animation: mockcycle var(--step-dur, 6.5s) var(--ease) infinite; animation-delay: calc(.25s + var(--i, 0) * .22s); }
@keyframes mockcycle {
  0% { opacity: 0; transform: translateY(12px) scale(.97); }
  3.5% { opacity: 1; transform: translateY(-2px) scale(1.012); }
  5.5% { transform: none; }
  78% { opacity: 1; transform: none; }
  85% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(12px) scale(.97); }
}
.mbar { height: 8px; border-radius: 99px; background: var(--ink-08); overflow: hidden; }
.mbar > span { display: block; height: 100%; border-radius: 99px; background: var(--grad); transform-origin: left; transform: scaleX(0); }
.step-pane.on .mbar > span { animation: barcycle var(--step-dur, 6.5s) cubic-bezier(.16,1,.3,1) infinite; animation-delay: .9s; }
@keyframes barcycle { 0% { transform: scaleX(0); } 13% { transform: scaleX(var(--w, 1)); } 78% { transform: scaleX(var(--w, 1)); } 85%, 100% { transform: scaleX(0); } }
.mthumb { width: 64px; aspect-ratio: 9/16; border-radius: 8px; object-fit: cover; box-shadow: var(--shadow-soft); }
.step-pane.on .mthumb { opacity: 0; animation: thumbcycle var(--step-dur, 6.5s) cubic-bezier(.18,.89,.32,1.18) infinite; animation-delay: calc(.4s + var(--i, 0) * .16s); }
@keyframes thumbcycle {
  0% { opacity: 0; transform: translateY(16px) rotate(0); }
  5% { opacity: 1; transform: translateY(-3px) rotate(var(--r, 0deg)); }
  7.5% { transform: rotate(var(--r, 0deg)); }
  78% { opacity: 1; transform: rotate(var(--r, 0deg)); }
  85% { opacity: 0; transform: translateY(-10px) rotate(var(--r, 0deg)); }
  100% { opacity: 0; transform: translateY(16px) rotate(0); }
}
.mcell { aspect-ratio: 1; border-radius: 7px; background: var(--look-offwhite); border: 1px solid var(--ink-08); display: flex; align-items: center; justify-content: center; gap: 2px; }
.mdot { width: 6px; height: 6px; border-radius: 50%; }
.step-pane.on .mcell .mdot { opacity: 0; animation: dotpop .5s ease-out forwards; animation-delay: calc(.4s + var(--i, 0) * .07s); }
@keyframes dotpop { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
.mcol { border-radius: 6px 6px 0 0; background: var(--ink-08); transform-origin: bottom; transform: scaleY(0); }
.step-pane.on .mcol { animation: colcycle var(--step-dur, 6.5s) cubic-bezier(.16,1,.3,1) infinite; animation-delay: calc(.35s + var(--i, 0) * .09s); }
@keyframes colcycle { 0% { transform: scaleY(0); } 9% { transform: scaleY(1.04); } 12% { transform: scaleY(1); } 78% { transform: scaleY(1); } 85%, 100% { transform: scaleY(0); } }
.steps.paused .step-pane.on .m-seq, .steps.paused .step-pane.on .mbar > span, .steps.paused .step-pane.on .mthumb,
.steps.paused .step-pane.on .mcell .mdot, .steps.paused .step-pane.on .mcol { animation-play-state: paused; }

/* 6. scroll-linked light→dark agency interpolation (JS drives --agp 0→1) */
#agencyX { background: var(--look-offwhite); }
#agencyX .ag-a, #agencyX .ag-b { grid-area: 1/1; transition: none; }

/* final CTA flanking outcome cards */
.cta-float { position: absolute; display: none; padding: 14px 16px; border-radius: 14px; text-align: left;
  background: rgba(20,24,31,.72); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0,0,0,.4); color: #fff; font: 500 13px/1.45 var(--ff-ui); max-width: 250px;
  animation: chipfloat 7s ease-in-out infinite alternate; }
@media (min-width: 1280px) { .cta-float { display: block; } }

@media (prefers-reduced-motion: reduce) {
  html.js .hi, .chaos.in .chaos-tile, .orbit-wrap.in .orbit-chip,
  .step-pane.on .m-seq, .step-pane.on .mbar > span, .step-pane.on .mthumb, .step-pane.on .mcell .mdot, .step-pane.on .mcol,
  .step-pane.on .step-copy, .step-pane.on .step-mock, .cta-float, .step-dot.on::after { animation: none !important; opacity: 1 !important; transform: none !important; }
  .step-pane.on .mbar > span { transform: scaleX(var(--w, 1)) !important; }
  .step-pane.on .mcol { transform: scaleY(1) !important; }
}

/* ============ marketing imagery layer (2026-06-10 redesign) ============ */

/* the employee, centered — portrait card + floating capability chips */
.orbit-wrap { position: relative; display: flex; justify-content: center; padding: 28px 0; }
.orbit-img {
  width: min(360px, 78%); aspect-ratio: 2/3; object-fit: cover; display: block;
  border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(74,202,209,.22), 0 0 0 1.5px rgba(255,255,255,.06), 0 38px 110px -22px rgba(21,170,155,.55), 0 24px 70px rgba(0,0,0,.55);
}
.orbit-chips { position: absolute; inset: 0; pointer-events: none; }
.orbit-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 14px; border-radius: 12px; white-space: nowrap; pointer-events: auto;
  font: 600 13px/1 var(--ff-ui); color: #fff;
  background: rgba(14,17,23,.78); border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  animation: chipfloat var(--fd, 6.5s) ease-in-out infinite alternate;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.orbit-chip:hover { border-color: rgba(74,202,209,.7); background: rgba(14,17,23,.82); box-shadow: 0 12px 40px rgba(21,170,155,.35); }
.orbit-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grad); }
@keyframes chipfloat { to { transform: translate3d(var(--dx, 6px), var(--dy, -12px), 0) rotate(var(--dr, 1deg)); } }
@media (max-width: 1023px) {
  .orbit-chips { position: static; pointer-events: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
  .orbit-chip { position: static !important; animation: none; }
  .orbit-wrap { flex-direction: column; align-items: center; padding: 8px 0 0; }
}

/* roster persona cards */
.persona-card { background: #fff; border: 1px solid var(--ink-08); border-radius: var(--r-m); overflow: hidden; }
.persona-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.persona-ghost {
  border: 1.5px dashed var(--ink-25); border-radius: var(--r-m);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 18px; min-height: 100%;
}

/* reel cards — paused-UGC frames with real receipts */
.reel-card { position: relative; display: block; aspect-ratio: 9/16; border-radius: var(--r-m); overflow: hidden; background: #0a0c10; }
.reel-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.reel-card:hover img { transform: scale(1.045); }
.reel-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,16,.22) 0%, transparent 26%, transparent 44%, rgba(10,12,16,.86) 100%); }
.reel-chip {
  position: absolute; top: 14px; left: 14px;
  font: 700 10px/1 var(--ff-ui); letter-spacing: .09em; text-transform: uppercase; color: #fff;
  padding: 7px 10px; border-radius: 8px;
  background: rgba(14,17,23,.55); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.reel-play {
  position: absolute; top: 38%; left: 50%; transform: translate(-50%,-50%);
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(14,17,23,.45); border: 1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font-size: 16px; transition: transform .3s var(--ease), background .3s var(--ease);
}
.reel-card:hover .reel-play { transform: translate(-50%,-50%) scale(1.1); background: rgba(21,170,155,.6); }
.reel-meta { position: absolute; left: 18px; right: 18px; bottom: 16px; color: #fff; }

/* avatar stack */
.avatar-stack { display: flex; align-items: center; }
.avatar-stack img, .avatar-stack .more {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 2px solid #16191f; margin-left: -9px;
}
.avatar-stack img:first-child { margin-left: 0; }
.avatar-stack .more { display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.12); color: #fff; font: 700 11px/1 var(--ff-ui); }

/* horizontal snap rail on phones (roster, reels, timeline) */
@media (max-width: 767px) {
  .rail { display: flex; overflow-x: auto; gap: 14px; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -24px; padding: 4px 24px 10px; }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { flex: 0 0 70%; scroll-snap-align: start; }
  .rail.rail-sm > * { flex: 0 0 46%; }
}

/* ── app-surface one-shot animations (dashboard/subpages — pop once, never loop) ── */
html.js .dpop { opacity: 0; animation: dpopin .5s var(--ease) forwards; animation-delay: calc(var(--i, 0) * .06s); }
@keyframes dpopin { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.dbar { overflow: hidden; }
.dbar > span { display: block; height: 100%; border-radius: inherit; background: var(--grad); transform-origin: left; transform: scaleX(0); animation: dbarfill .9s cubic-bezier(.16,1,.3,1) .35s forwards; }
@keyframes dbarfill { to { transform: scaleX(var(--w, 1)); } }
.dcol { transform-origin: bottom; transform: scaleY(0); animation: dcolup .8s cubic-bezier(.16,1,.3,1) forwards; animation-delay: calc(var(--i, 0) * .07s); }
@keyframes dcolup { to { transform: scaleY(1); } }

/* ── mobile type scale + density (audit P1: first viewport sells, copy stays scannable) ── */
.cta-row { flex-wrap: wrap; }
.sl-h { height: 560px; }
@media (max-width: 640px) {
  section.py-28 { padding-top: 72px; padding-bottom: 72px; }
  #H .py-16 { padding-top: 40px; padding-bottom: 48px; }
  #H .mk-display { font-size: 42px; }
  #H p.text-lg { font-size: 16px; }
  .mk-display.text-6xl { font-size: 46px; }
  .mk-display.text-8xl { font-size: 72px; }
  .sl-h { height: 480px; }
  .marquee-track { font-size: 12px; }
}

/* 8. guides — long-form SEO articles (server-rendered, brand-aligned long-form typography;
   tw.css is purged so prose styling lives here, not in new utility classes) */
.guide-prose { font-size: 16.5px; line-height: 1.78; color: var(--ink); }
.guide-prose p { margin: 0 0 1.15em; }
.guide-prose h2 { font: 700 26px/1.25 var(--ff-ui); letter-spacing: -.01em; margin: 2em 0 .65em; }
.guide-prose ul, .guide-prose ol { margin: 0 0 1.2em; padding-left: 1.25em; }
.guide-prose li { margin: 0 0 .55em; }
.guide-prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(10,12,16,.3); }
.guide-prose a:hover { text-decoration-color: var(--ink); }
.guide-prose a.mk-flat, .guide-prose a.mk-btn { text-decoration: none; }
.guide-prose b { color: var(--ink); }
.guide-prose i { color: var(--ink-50); }