/*
  Leadsler — public homepage (/) and /subscribe. Redesign 2026-10-17, v4.
  Concept: "the approval desk". The page opens on the thing Leadsler is: a real demo-brand carousel waiting in the card
  where the owner taps approve, and a line that carries it out to the platforms. Dark cinematic stages (hero, content
  wall) alternate with quiet paper sections (demo, steps, pricing); a lit seam marks every change between the two.
  One supporting accent, marigold, means one thing only: "waiting for your OK"; green means "done".

  Tokens (all below in :root):
  - Motion language. Three curves, each with one job: --m-out (arrivals: things entering or settling), --m-spring
    (feedback: a small physical overshoot when you press or something lights up), --m-swipe (travel: things that move
    from A to B — slides, drawn lines). Three durations: --m-fast 160ms (feedback), --m-base 420ms (state changes),
    --m-slow 900ms (entrances). Stagger rule: items in a group start var(--i) × 70ms apart (--m-stagger), at most six.
    Only transform, opacity and filter animate (the drawn lines' stroke-dashoffset is the one deliberate exception:
    a few hundred pixels of SVG, once). Every loop stops with "Pause motion" (html.h-paused); under
    prefers-reduced-motion nothing moves and every scene shows its finished state.
  - Type: Bricolage Grotesque ExtraBold for display (SIL OFL 1.1, same-origin Latin subset — licence in
    /static/bricolage-OFL.txt), the system sans for reading. Fluid scale with clamp(): --t-h1 · --t-h2 · --t-h3 ·
    --t-lead · 16 · 14 · 12.5; tracking tightens as size grows (optical sizing by hand: the font is one static cut).
  - Radii: 28 (bands) · 18 (screens and panels) · 12 (cards, buttons, media) · 8 (thumbnails, chips) · 5 (tags).
  - Shadow tiers, tinted navy, one light source from above: --sh-1 (resting card) · --sh-2 (screen) · --sh-3 (hero).
  - Icons: one 24-unit grid, stroke 1.6, round caps (inline SVG in home-public.tsx; the tiny check badges use 2.6 on
    24 units drawn at 11 px, the same ≈1.2 px on screen).
  Light and dark via prefers-color-scheme. No third-party fonts, scripts or images (CSP). Prefix: .h-
*/
@font-face { font-family: "Bricolage Grotesque"; src: url("bricolage-800-latin.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --h-bg: #f3f4f7;
  --h-bg-2: #e9ecf2;
  --h-panel: #ffffff;
  --h-panel-2: #eef0f5;
  --h-line: #dde1ea;
  --h-line-2: #c6ccda;
  --h-ink: #10182f;
  --h-ink-2: #3a4460;
  --h-muted: #5a6480;
  --h-accent: #2f55d4;
  --h-accent-soft: rgba(47, 85, 212, 0.1);
  --h-btn: #2f55d4;
  --h-btn-hover: #2446b8;
  --h-btn-ink: #ffffff;
  --h-desk: #2c4fcf;
  --h-desk-deep: #1b3597;
  --h-desk-ink: #ffffff;
  --h-good: #1f7a4d;
  --h-good-soft: rgba(31, 122, 77, 0.1);
  --h-mari: #f2b43e; /* the one supporting accent: marigold = "waiting for your OK" (fills and dots only) */
  --h-warn: #8a5300; /* marigold as text: ≥ 4.8:1 on every surface */
  /* the dark stage (hero, content wall) */
  --c-bg: #060a15; --c-bg-2: #0b1122; --c-ink: #f3f5fb; --c-ink-2: #b9c2d8; --c-muted: #8b95ae; --c-line: rgba(255, 255, 255, 0.09); --c-line-2: rgba(255, 255, 255, 0.16); --c-glass: rgba(255, 255, 255, 0.05);
  --c-lit: #4fcf93;
  /* motion language */
  --m-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --m-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --m-swipe: cubic-bezier(0.65, 0, 0.35, 1);
  --m-fast: 160ms;
  --m-base: 420ms;
  --m-slow: 900ms;
  --m-stagger: 70ms;
  /* type */
  --t-h1: clamp(32px, 2.9vw + 22px, 64px);
  --t-h2: clamp(30px, 1.9vw + 20px, 48px);
  --t-h3: clamp(19px, 0.7vw + 16px, 26px);
  --t-lead: clamp(15.5px, 0.35vw + 14px, 19px);
  /* shape */
  --r-xl: 28px;
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 8px;
  --r-xs: 5px;
  --sh-1: 0 1px 2px rgba(16, 24, 47, 0.06), 0 6px 16px -10px rgba(16, 24, 47, 0.22);
  --sh-2: 0 1px 2px rgba(16, 24, 47, 0.06), 0 18px 48px -24px rgba(16, 24, 47, 0.34);
  --sh-3: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 18px 40px -20px rgba(20, 40, 120, 0.6);
  --h-lift: var(--sh-2);
  --focus-halo: 0 0 0 5px color-mix(in srgb, var(--h-accent) 22%, transparent);
  --h-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --h-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --h-display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Display', 'Segoe UI', Roboto, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --h-bg: #0c111e;
    --h-bg-2: #10172b;
    --h-panel: #151d33;
    --h-panel-2: #1b2440;
    --h-line: #232d48;
    --h-line-2: #34405f;
    --h-ink: #eef1f8;
    --h-ink-2: #b8c0d4;
    --h-muted: #8f99b0;
    --h-accent: #8fb0ff;
    --h-accent-soft: rgba(143, 176, 255, 0.12);
    --h-btn: #3866ee;
    --h-btn-hover: #2f5bd8; /* white label stays ≥ 4.5:1 on hover too */
    --h-btn-ink: #ffffff;
    --h-desk: #1f3fae;
    --h-desk-deep: #142b7a;
    --h-good: #4fcf93;
    --h-good-soft: rgba(79, 207, 147, 0.12);
    --h-warn: #f2c063;
    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 18px -10px rgba(0, 0, 0, 0.6);
    --sh-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 60px -28px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
  }
}

/* ───────── base ───────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; } /* the sticky header never covers an anchor target or a focused control */
body.h-body { margin: 0; background: var(--h-bg); color: var(--h-ink); font: 16px/1.6 var(--h-sans); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: rgba(47, 85, 212, 0.15); }
a { color: var(--h-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a, button, summary, label, .h-btn { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--h-accent); outline-offset: 3px; border-radius: 4px; }
main:focus-visible { outline: none; } /* <main tabindex="-1"> is only the skip link's landing place, not a control */
h1, h2, h3 { margin: 0; line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; }
h1, h2 { font-family: var(--h-display); font-weight: 800; }
p { margin: 0; text-wrap: pretty; }
img, video { max-width: 100%; }
.h-wrap { --wrap-pad: 40px; max-width: 1320px; margin: 0 auto; padding: 0 var(--wrap-pad); }
.h-wrap-narrow { max-width: 800px; }
.h-kicker { font-size: 14px; font-weight: 650; color: var(--h-accent); margin: 0 0 10px; }
.h-skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: var(--r-sm); background: var(--h-ink); color: var(--h-bg); font-weight: 600; }
.h-skip:focus { top: 12px; }
.h-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--h-mari); box-shadow: 0 0 0 3px color-mix(in srgb, var(--h-mari) 28%, transparent); }
.h-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ───────── buttons: hover lifts, press settles to .98, focus wears the same halo as hover plus a ring ───────── */
/* min-height, not height: a label that does not fit (320px wide, user text spacing) wraps inside the button instead of spilling out of it */
.h-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 20px; border-radius: var(--r-md); border: 1px solid transparent; background: var(--h-btn); color: var(--h-btn-ink); font: 600 15px/1.25 var(--h-sans); text-align: center; cursor: pointer; transition: background-color var(--m-fast) ease, border-color var(--m-fast) ease, color var(--m-fast) ease, box-shadow var(--m-base) var(--m-out), scale var(--m-fast) var(--m-spring), translate var(--m-base) var(--m-spring); }
.h-btn:hover { background: var(--h-btn-hover); text-decoration: none; box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--h-btn) 80%, transparent); }
.h-btn:active { scale: 0.98; }
.h-btn:focus-visible { outline: 2px solid var(--h-accent); outline-offset: 3px; border-radius: var(--r-md); box-shadow: var(--focus-halo); }
.h-btn.ghost { background: var(--h-panel); color: var(--h-ink); border-color: var(--h-line-2); }
.h-btn.ghost:hover { background: var(--h-panel); border-color: var(--h-muted); box-shadow: var(--sh-1); }
.h-btn.quiet { background: transparent; color: var(--h-ink-2); border-color: transparent; }
.h-btn.quiet:hover { background: var(--h-panel-2); color: var(--h-ink); box-shadow: none; }
.h-btn.sm { min-height: 36px; padding: 6px 14px; font-size: 14px; border-radius: var(--r-sm); }
.h-btn.lg { min-height: 50px; padding: 8px 24px; font-size: 16px; border-radius: var(--r-md); }

/* ───────── top bar (part of the dark stage) ───────── */
.h-top { position: sticky; top: 0; z-index: 20; background: rgba(6, 10, 21, 0.78); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--c-line); }
.h-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(143, 176, 255, 0.45), transparent); opacity: 0; transition: opacity var(--m-base) var(--m-out); } /* once the page scrolls, a lit hairline under the bar */
.h-top.is-scrolled::after { opacity: 1; }
.h-top-in { display: flex; align-items: center; gap: 24px; height: 64px; }
.h-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--h-ink); font: 800 19px/1 var(--h-display); letter-spacing: -0.01em; }
.h-brand:hover { text-decoration: none; }
.h-brand svg { flex: none; transition: rotate var(--m-base) var(--m-spring); }
.h-brand:hover svg { rotate: -8deg; }
.h-nav { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.h-nav a { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--r-sm); color: var(--h-ink-2); font-size: 15px; font-weight: 500; }
.h-nav a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--m-base) var(--m-out); }
.h-nav a:hover, .h-nav a:focus-visible { text-decoration: none; }
.h-nav a:hover::after, .h-nav a:focus-visible::after { transform: none; }
.h-top-act { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.h-menu { display: none; position: relative; }
.h-menu summary { list-style: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--h-line-2); background: var(--h-panel); color: var(--h-ink); cursor: pointer; transition: background-color var(--m-fast) ease, border-color var(--m-fast) ease; }
.h-menu summary::-webkit-details-marker { display: none; }
.h-menu[open] summary { background: var(--h-panel-2); }
/* max-height + scroll: on a short viewport (phone in landscape, 400% zoom = 320×256) the sticky header cannot scroll away, so a taller panel would lose its last items */
.h-menu-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; width: min(320px, calc(100vw - 32px)); max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); overflow-y: auto; overscroll-behavior: contain; padding: 8px; display: flex; flex-direction: column; gap: 2px; background: var(--h-panel); border: 1px solid var(--h-line-2); border-radius: var(--r-md); box-shadow: var(--sh-2); }
.h-menu-panel a:not(.h-btn) { display: block; padding: 10px 12px; border-radius: var(--r-sm); color: var(--h-ink); font-weight: 500; }
.h-menu-panel a:not(.h-btn):hover { background: var(--h-panel-2); text-decoration: none; }
.h-menu-panel .h-btn { margin-top: 6px; }
.h-top .h-brand { color: var(--c-ink); }
.h-top .h-nav a { color: var(--c-ink-2); }
.h-top .h-nav a:hover, .h-top .h-nav a:focus-visible { color: #fff; }
.h-top .h-btn.ghost { background: transparent; color: #fff; border-color: var(--c-line-2); }
.h-top .h-btn.ghost:hover { border-color: rgba(255, 255, 255, 0.45); box-shadow: none; }
.h-top .h-menu summary { background: transparent; color: #fff; border-color: var(--c-line-2); }
.h-top .h-menu summary:hover { border-color: rgba(255, 255, 255, 0.45); }
.h-top .h-menu[open] summary { background: rgba(255, 255, 255, 0.08); }
.h-top :focus-visible { outline-color: #fff; }
.h-top .h-menu-panel :focus-visible { outline-color: var(--h-accent); }

/* ───────── the dark stage, shared by the hero and the content wall ───────── */
.h-hero, .h-dark { position: relative; isolation: isolate; background: var(--c-bg); color: var(--c-ink); }
.h-hero::after, .h-dark::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--h-grain); background-size: 180px 180px; opacity: 0.09; mix-blend-mode: overlay; } /* film grain */
.h-hero :focus-visible, .h-dark :focus-visible { outline-color: #fff; }
/* the cursor's light: a soft disc that follows a fine pointer over dark sections (home-demo.js moves it with transform) */
.h-spot { position: absolute; left: 0; top: 0; z-index: -1; width: 680px; height: 680px; margin: -340px 0 0 -340px; border-radius: 50%; background: radial-gradient(closest-side, rgba(126, 156, 255, 0.14), rgba(126, 156, 255, 0.05) 55%, transparent); pointer-events: none; opacity: 0; transition: opacity var(--m-slow) var(--m-out); will-change: transform; }
[data-spot].is-lit .h-spot { opacity: 1; }
/* the seam where a dark section meets a light one: a lit hairline and a little of its light spilling over (it draws itself out from the centre as it scrolls in, where the browser can) */
.h-seam { position: relative; z-index: 3; height: 0; view-timeline: --seam block; }
.h-seam::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(143, 176, 255, 0.5) 22%, rgba(255, 255, 255, 0.95) 50%, rgba(143, 176, 255, 0.5) 78%, transparent); }
.h-seam::after { content: ''; position: absolute; left: 12%; right: 12%; top: -64px; height: 64px; pointer-events: none; background: radial-gradient(55% 100% at 50% 100%, rgba(77, 123, 255, 0.26), transparent 72%); } /* the light stays on the dark side */
.h-seam.down::after { top: 0; background: radial-gradient(55% 100% at 50% 0%, rgba(77, 123, 255, 0.26), transparent 72%); }

/* ───────── hero: huge type and the offer on the left, the product film on the right ───────── */
.h-hero { overflow: hidden; padding: 48px 0 72px; }
/* light, not a wash: a blue lamp behind the card, a teal one where the ocean carousel sits, a warm fill low right, a cool fill top left */
.h-hero-light { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(34% 44% at 73% 42%, rgba(61, 107, 255, 0.38), transparent 70%), radial-gradient(20% 26% at 63% 58%, rgba(33, 212, 180, 0.13), transparent 70%), radial-gradient(18% 24% at 92% 86%, rgba(242, 180, 62, 0.12), transparent 70%), radial-gradient(30% 40% at 6% 0%, rgba(120, 150, 255, 0.1), transparent 70%); }
.h-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: '. stage' 'copy stage' 'offer stage' '. stage'; grid-template-rows: 1fr auto auto 1fr; gap: 0 48px; align-items: start; }
.h-hero-copy { grid-area: copy; position: relative; z-index: 2; }
.h-stage { grid-area: stage; }
.h-hero-offer { grid-area: offer; position: relative; z-index: 2; margin-top: 34px; }
.h-hero h1 { font-size: var(--t-h1); line-height: 0.95; letter-spacing: -0.038em; text-wrap: wrap; color: #fff; }
.h-h1-a, .h-h1-b { display: block; }
.h-h1-b { margin-top: 0.06em; padding-bottom: 0.04em; background: linear-gradient(92deg, #b6caff 0%, #6b93ff 45%, #8fe3c8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h-lead { max-width: 44ch; margin-top: 24px; font-size: var(--t-lead); line-height: 1.55; color: var(--c-ink-2); }
.h-offer-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; font-size: 18px; font-weight: 600; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.h-offer-amt { font: 800 clamp(36px, 1.4vw + 30px, 50px)/1 var(--h-display); letter-spacing: -0.03em; color: #fff; }
.h-offer-tag { margin-left: 4px; padding: 3px 9px; border-radius: var(--r-xs); background: rgba(77, 123, 255, 0.2); color: #c3d3ff; font-size: 13px; font-weight: 650; align-self: center; }
.h-offer-note { margin-top: 8px; font-size: 14px; color: var(--c-muted); }
.h-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.h-hero .h-btn:not(.ghost):not(.h-desk-ok) { background: #3d6bff; box-shadow: 0 10px 30px -10px rgba(61, 107, 255, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.h-hero .h-btn:not(.ghost):not(.h-desk-ok):hover { background: #2f5df0; box-shadow: 0 16px 36px -12px rgba(61, 107, 255, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.h-hero .h-btn:not(.ghost):not(.h-desk-ok):focus-visible { box-shadow: 0 0 0 5px rgba(143, 176, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.h-hero .h-cta .h-btn.ghost { background: var(--c-glass); color: #fff; border-color: var(--c-line-2); }
.h-hero .h-cta .h-btn.ghost:hover { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.08); box-shadow: none; }
.h-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; padding: 0; font-size: 14px; color: var(--c-ink-2); }
.h-trust li { display: flex; align-items: center; gap: 8px; }
.h-trust li::before { content: ''; flex: none; width: 14px; height: 14px; border-radius: 50%; background: rgba(77, 123, 255, 0.24) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3d3ff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l3.8 3.8L18 8'/%3E%3C/svg%3E") center / 10px no-repeat; }
.h-motion { position: absolute; right: 24px; bottom: 18px; z-index: 3; min-height: 32px; padding: 4px 12px; border: 1px solid var(--c-line-2); border-radius: 999px; background: rgba(6, 10, 21, 0.6); color: var(--c-ink-2); font: 600 12.5px/1 var(--h-sans); cursor: pointer; transition: color var(--m-fast) ease, border-color var(--m-fast) ease, scale var(--m-fast) var(--m-spring); }
.h-motion:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.h-motion:active { scale: 0.96; }
.h-motion:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 999px; }
.h-motion[hidden] { display: none; }

/* the stage: real renders floating at three depths around the approval card (they shift with the pointer by depth) */
.h-stage { position: relative; isolation: isolate; padding: 36px 0 0; }
.h-float { position: absolute; inset: -30px -70px -30px -50px; z-index: -1; pointer-events: none; }
.h-fl { position: absolute; display: block; height: auto; border-radius: var(--r-md); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.1); transform: rotate(var(--r)); translate: calc(var(--px, 0) * var(--d) * 1px) calc(var(--py, 0) * var(--d) * 1px); transition: translate 1.2s var(--m-out); }
.h-fl.f1 { width: 150px; left: -4%; top: 0; --r: -8deg; --d: 26; filter: blur(1.5px) brightness(0.8); }
.h-fl.f2 { width: 128px; right: 4%; top: -3%; --r: 7deg; --d: 14; filter: brightness(0.8); }
.h-fl.f3 { width: 112px; right: 0; top: 44%; --r: 6deg; --d: 18; filter: brightness(0.9); }
.h-fl.f4 { width: 136px; left: -7%; bottom: 10%; --r: -5deg; --d: 16; filter: brightness(0.8); }
.h-fl.f5 { width: 100px; left: 30%; top: 2%; --r: -3deg; --d: 6; filter: blur(2.5px) brightness(0.5); }
.h-desk { position: relative; margin: 0 auto; max-width: 620px; }
.h-desk::before { content: ''; position: absolute; left: 10%; right: 10%; top: 60%; height: 120px; z-index: -1; border-radius: 50%; background: rgba(61, 107, 255, 0.5); filter: blur(60px); } /* the card's own light on the table */
/* the card: tilts toward the pointer (home-demo.js sets --rx / --ry), a glare follows it, a beam of light runs round its hairline edge */
.h-desk-wrap { position: relative; transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform var(--m-slow) var(--m-out); }
.h-desk-wrap.is-tilting { transition-duration: 140ms; }
.h-beam { position: absolute; z-index: 2; inset: -1px; padding: 1px; border-radius: calc(var(--r-lg) + 1px); overflow: hidden; pointer-events: none; -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 exclude, linear-gradient(#000 0 0); }
.h-beam::before { content: ''; position: absolute; left: 50%; top: 50%; width: 160%; aspect-ratio: 1; margin: -80% 0 0 -80%; background: conic-gradient(from 0deg, transparent 0deg 240deg, rgba(120, 156, 255, 0.9) 310deg, #fff 345deg, rgba(143, 227, 200, 0.9) 352deg, transparent 360deg); }
.h-desk-card { position: relative; z-index: 1; border-radius: var(--r-lg); background: var(--h-panel); color: var(--h-ink); box-shadow: var(--sh-3); overflow: hidden; }
.h-glare { position: absolute; z-index: 3; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.12) 45%, transparent 72%); mix-blend-mode: soft-light; opacity: 0; pointer-events: none; transition: opacity var(--m-base) var(--m-out); will-change: transform; }
.h-desk-wrap.is-tilting .h-glare { opacity: 1; }
.h-desk-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 6px 18px; border-bottom: 1px solid var(--h-line); font-size: 13px; color: var(--h-muted); }
.h-desk-app { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--h-ink); }
.h-desk-brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--h-ink-2); }
.h-desk-brand::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #21d4b4; box-shadow: 0 0 0 3px rgba(33, 212, 180, 0.2); } /* the demo brand's own colour */
.h-desk-body { display: grid; grid-template-columns: minmax(0, 286px) minmax(0, 1fr); gap: 22px; padding: 20px; align-items: stretch; }
/* the carousel: a window onto its slides, the rest of the deck fanned behind it */
.h-car { min-width: 0; }
.h-car-frame { position: relative; isolation: isolate; margin-right: 22px; }
.h-car-back { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); transform-origin: 100% 50%; box-shadow: 0 6px 16px -10px rgba(16, 24, 47, 0.5); }
.h-car-back.b1 { transform: translateX(11px) scale(0.95); opacity: 0.8; }
.h-car-back.b2 { transform: translateX(22px) scale(0.9); opacity: 0.5; }
.h-car-view { position: relative; overflow: hidden; border-radius: var(--r-md); aspect-ratio: 4 / 5; background: #03161d; box-shadow: 0 1px 2px rgba(16, 24, 47, 0.14), 0 14px 30px -14px rgba(16, 24, 47, 0.5); }
.h-car-track { display: flex; height: 100%; will-change: transform; }
.h-car-track img { display: block; flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; }
.h-car-n { display: flex; align-items: center; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--h-muted); font-variant-numeric: tabular-nums; line-height: 1.3; }
.h-car-tick { display: inline-flex; flex-direction: column; height: 1.3em; overflow: hidden; color: var(--h-ink); }
.h-car-tick > span { display: block; height: 1.3em; }
.h-desk-info { display: flex; flex-direction: column; min-width: 0; padding-top: 4px; }
.h-desk-kick { display: grid; font-size: 13.5px; font-weight: 650; }
.h-kick-a, .h-kick-b { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 9px; }
.h-kick-a { color: var(--h-warn); }
.h-kick-b { color: var(--h-good); opacity: 0; }
.h-dot.ok { background: var(--h-good); box-shadow: 0 0 0 3px var(--h-good-soft); }
.h-desk-title { margin-top: 12px; font: 800 var(--t-h3)/1.08 var(--h-display); letter-spacing: -0.018em; color: var(--h-ink); text-wrap: balance; }
.h-desk-meta { margin-top: 8px; font-size: 14px; color: var(--h-muted); }
.h-desk-checks { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--h-line); font-size: 14px; line-height: 1.4; color: var(--h-ink-2); }
.h-desk-checks li { display: flex; gap: 9px; }
.h-desk-checks li::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--h-good-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f7a4d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l3.8 3.8L18 8'/%3E%3C/svg%3E") center / 11px no-repeat; }
.h-desk-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 22px; pointer-events: none; }
.h-desk-ok { flex: 1 1 100%; display: grid; isolation: isolate; box-shadow: 0 0 0 4px var(--h-accent-soft); }
.h-desk-ok::before { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: #1f7a4d; opacity: 0; } /* turns green once approved */
.h-ok-a, .h-ok-b { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.28em; }
.h-ok-b { opacity: 0; }
.h-ok-b svg { width: 16px; height: 16px; }
.h-desk-ok::after { content: ''; position: absolute; inset: -5px; border-radius: calc(var(--r-md) + 5px); border: 2px solid var(--c-lit); opacity: 0; pointer-events: none; } /* the ring that answers the press */
.h-desk-act .ghost { border-color: transparent; background: transparent; padding-inline: 10px; color: var(--h-ink-2); }

/* the route under the card: Approved → Scheduled → the platforms, drawn as one line (SVG units match the chip positions below) */
.h-route { position: relative; margin-top: 2px; }
.h-route-svg { display: block; width: 100%; height: auto; overflow: visible; }
.h-route-svg.m { display: none; }
.h-route-base path { fill: none; stroke: rgba(255, 255, 255, 0.15); stroke-width: 1.5; }
.h-route-base .idle { stroke-dasharray: 2 6; stroke-linecap: round; }
.h-route-lit path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.h-node { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 12px; border: 1px solid var(--c-line-2); border-radius: 999px; background: #0b1224; color: var(--c-ink-2); font: 600 13px/1 var(--h-sans); white-space: nowrap; }
.h-node::before { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; border: 1px solid rgba(79, 207, 147, 0.65); background: #0d2622; box-shadow: 0 0 26px -6px rgba(79, 207, 147, 0.6); opacity: 0; } /* lit */
.h-node svg { flex: none; width: 16px; height: 16px; }
.h-node-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.n-ok { --x: 20%; --y: 50%; width: 112px; }
.n-sch { --x: 50%; --y: 50%; width: 176px; }
.h-plat { --x: 86%; width: 128px; justify-content: flex-start; padding-left: 14px; }
.n-instagram { --y: 17.74%; }
.n-pinterest { --y: 50%; }
.n-youtube { --y: 82.26%; color: var(--c-muted); border-style: dashed; }
.h-plat-t { display: grid; }
.h-plat-t > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; }
.h-plat-t .b { opacity: 0; color: #c9f5e0; }
.h-plat-t .b svg { width: 14px; height: 14px; }

/* ───────── sections ───────── */
.h-sec { padding: 104px 0; }
.h-sec-alt { background: var(--h-bg-2); }
.h-sec-head { max-width: 680px; margin-bottom: 44px; }
.h-sec-head-row { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 64px; align-items: end; }
.h-sec-head-row .h-sub { margin-top: 0; max-width: 52ch; }
.h-sec h2 { font-size: var(--t-h2); line-height: 1.02; letter-spacing: -0.03em; }
.h-sub { margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--h-ink-2); }

/* ───────── the demo workspace ───────── */
.h-demo { padding-top: 96px; }
.h-app { border: 1px solid var(--h-line-2); border-radius: var(--r-lg); background: var(--h-panel); box-shadow: var(--sh-2); overflow: hidden; }
.h-app-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 6px 18px; border-bottom: 1px solid var(--h-line); background: var(--h-panel-2); }
.h-app-name { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 650; color: var(--h-ink); }
.h-app-tag { padding: 2px 8px; border: 1px solid var(--h-line-2); border-radius: var(--r-xs); background: var(--h-panel); font-size: 12.5px; font-weight: 600; color: var(--h-ink-2); }
.h-app-tabs { display: flex; gap: 6px; margin: 0; padding: 14px 18px 0; border: 0; border-bottom: 1px solid var(--h-line); overflow-x: auto; scrollbar-width: none; }
.h-app-tab { position: relative; flex: none; cursor: pointer; }
.h-app-tab input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.h-app-tab-in { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 8px 14px 11px; color: var(--h-ink-2); border-radius: var(--r-sm) var(--r-sm) 0 0; transition: color var(--m-fast) ease, background-color var(--m-fast) ease; }
.h-app-tab-in::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--h-accent); transform: scaleX(0); transition: transform var(--m-base) var(--m-spring); } /* the active tab's underline grows out of its centre */
.h-app-tab-in b { font-size: 15px; font-weight: 650; line-height: 1.25; }
.h-app-tab-in small { font-size: 12.5px; color: var(--h-muted); }
.h-app-tab:hover .h-app-tab-in { color: var(--h-ink); background: var(--h-panel-2); }
.h-app-tab input:checked + .h-app-tab-in { color: var(--h-ink); }
.h-app-tab input:checked + .h-app-tab-in::after { transform: none; }
.h-app-tab input:checked + .h-app-tab-in b { color: var(--h-accent); }
.h-app-tab input:focus-visible + .h-app-tab-in { outline: 2px solid var(--h-accent); outline-offset: -2px; border-radius: var(--r-sm); box-shadow: var(--focus-halo); }
.h-app-panel { display: none; padding: 18px; }
.h-app:has(.h-app-tab:nth-of-type(1) input:checked) .p-1, .h-app:has(.h-app-tab:nth-of-type(2) input:checked) .p-2, .h-app:has(.h-app-tab:nth-of-type(3) input:checked) .p-3, .h-app:has(.h-app-tab:nth-of-type(4) input:checked) .p-4, .h-app:has(.h-app-tab:nth-of-type(5) input:checked) .p-5, .h-app:has(.h-app-tab:nth-of-type(6) input:checked) .p-6, .h-app:has(.h-app-tab:nth-of-type(7) input:checked) .p-7, .h-app:has(.h-app-tab:nth-of-type(8) input:checked) .p-8, .h-app:has(.h-app-tab:nth-of-type(9) input:checked) .p-9, .h-app:has(.h-app-tab:nth-of-type(10) input:checked) .p-10 { display: block; animation: h-panel-in var(--m-base) var(--m-out) both; }
/* the accounts: one chip per platform with its state; a connected account breathes once every few seconds */
.h-soc { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; }
.h-soc li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px 4px 10px; border: 1px solid var(--h-line); border-radius: var(--r-sm); font-size: 13.5px; color: var(--h-ink); }
.h-soc svg { flex: none; color: var(--h-ink-2); }
.h-soc-name { font-weight: 600; }
.h-soc-state { color: var(--h-muted); font-size: 12.5px; }
.h-soc-dot { position: relative; flex: none; width: 7px; height: 7px; margin-right: -2px; border-radius: 50%; background: var(--h-line-2); }
.h-soc .is-connected { background: var(--h-good-soft); border-color: color-mix(in srgb, var(--h-good) 30%, transparent); }
.h-soc .is-connected .h-soc-state { color: var(--h-good); font-weight: 600; }
.h-soc .is-connected .h-soc-dot { background: var(--h-good); }
.h-soc .is-connected .h-soc-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--h-good); opacity: 0; }
.h-soc .is-unsupported { border-style: dashed; color: var(--h-muted); }
.h-app-main { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.h-app-h { margin-bottom: 10px; font: 650 13.5px/1.3 var(--h-sans); letter-spacing: 0; color: var(--h-muted); }
/* the queue */
.h-q-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.h-q { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 12px; border: 1px solid var(--h-line); border-radius: var(--r-md); background: var(--h-panel); transition: background-color var(--m-base) ease, border-color var(--m-base) ease, box-shadow var(--m-base) var(--m-out); }
.h-q:hover { border-color: var(--h-line-2); box-shadow: var(--sh-1); }
.h-q-img { display: block; width: 84px; height: 105px; object-fit: cover; border-radius: var(--r-sm); background: var(--h-panel-2); transition: opacity var(--m-base) ease, transform var(--m-base) var(--m-spring); }
.h-q-img.k-short, .h-q-img.k-pin { object-position: center 30%; }
.h-q-body { display: flex; flex-direction: column; min-width: 0; }
.h-q-kind { font-size: 12.5px; font-weight: 600; color: var(--h-muted); }
.h-q-title { margin-top: 3px; font-size: 16px; font-weight: 650; line-height: 1.3; color: var(--h-ink); border-radius: 4px; }
.h-q.is-editing .h-q-title { outline: 2px solid var(--h-accent); outline-offset: 2px; background: var(--h-accent-soft); }
.h-q-when { margin-top: 3px; font-size: 13px; color: var(--h-muted); }
.h-q-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; }
.h-q-done { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: auto; padding-top: 10px; }
.h-q-done[hidden] { display: none; }
.h-q-done-t { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; color: var(--h-ink-2); }
.h-q[data-state] .h-q-act, .h-q[data-state] .h-q-when { display: none; }
.h-q[data-state='approved'] { background: var(--h-good-soft); border-color: color-mix(in srgb, var(--h-good) 35%, transparent); }
.h-q[data-state='approved'] .h-q-done-t { color: var(--h-good); }
.h-q[data-state='approved'] .h-q-done-t::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--h-good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l3.8 3.8L18 8'/%3E%3C/svg%3E") center / 12px no-repeat; animation: h-pop var(--m-base) var(--m-spring) both; }
.h-q[data-state] .h-q-done { animation: h-panel-in var(--m-base) var(--m-out) both; }
.h-q[data-state='skipped'] .h-q-img { opacity: 0.4; }
.h-q[data-state='skipped'] .h-q-title { color: var(--h-muted); }
.h-q[data-state='approved'] .h-q-img { transform: scale(0.94); }
.h-q-empty { display: none; padding: 18px 4px; font-size: 14.5px; color: var(--h-muted); }
.h-app-panel.is-clear .h-q-empty { display: block; }
/* the week: seven days, each with its slots; an approved post springs into its slot */
.h-week { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; }
.h-week li { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-height: 118px; padding: 8px 5px; border-radius: var(--r-sm); background: var(--h-panel-2); }
.h-week b { font-size: 12.5px; font-weight: 650; color: var(--h-ink-2); text-align: center; }
.h-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; border: 1px dashed var(--h-line-2); border-radius: var(--r-sm); transition: border-color var(--m-base) ease, background-color var(--m-base) ease; }
.h-slot img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: var(--r-xs); opacity: 0; transform: scale(0.85); transition: opacity var(--m-base) var(--m-out), transform var(--m-base) var(--m-spring); }
.h-slot-t { font-size: 11.5px; font-weight: 600; color: var(--h-muted); font-variant-numeric: tabular-nums; }
.h-slot.is-filled { border-style: solid; border-color: color-mix(in srgb, var(--h-good) 45%, transparent); background: var(--h-panel); }
.h-slot.is-filled img { opacity: 1; transform: none; }
.h-slot.is-filled .h-slot-t { color: var(--h-good); }
.h-week-note { margin-top: 12px; font-size: 13px; color: var(--h-muted); }

/* ───────── examples (dark): the content wall, then the Short in a phone, the carousel as a swipeable row, two pins ───────── */
.h-ex { padding-bottom: 112px; background: radial-gradient(50% 40% at 50% 0%, rgba(61, 107, 255, 0.16), transparent 70%), var(--c-bg); }
.h-dark h2 { color: #fff; }
.h-dark .h-sub { color: var(--c-ink-2); }
.h-wall { display: flex; flex-direction: column; gap: 20px; margin: 8px 0 0; padding: 8px 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.h-wall:focus-visible { outline-offset: -2px; }
.h-wall-row { overflow: visible; }
.h-wall-track { list-style: none; display: flex; gap: 18px; width: max-content; margin: 0; padding: 0; will-change: transform; }
.h-wall-track li { position: relative; flex: none; margin: 0; }
.h-wall-track img { display: block; height: 330px; width: auto; border-radius: var(--r-md); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 50px -24px rgba(0, 0, 0, 0.9); transition: transform var(--m-base) var(--m-out), box-shadow var(--m-base) var(--m-out); }
.h-wall-track li:hover img { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 34px 60px -24px rgba(0, 0, 0, 0.95); }
.h-wall-cap { display: flex; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--c-muted); transition: color var(--m-base) ease; }
.h-wall-cap b { color: var(--c-ink); font-weight: 650; }
.h-wall-track li:hover .h-wall-cap { color: var(--c-ink-2); }
.h-wall-foot { display: flex; justify-content: flex-end; min-height: 36px; margin: 6px 0 48px; }
.h-wall-foot .h-motion { position: static; }
.h-ex-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); grid-template-areas: 'short car' 'short pins'; gap: 40px 56px; align-items: start; }
.h-ex-item { margin: 0; min-width: 0; }
.h-ex-short { grid-area: short; }
.h-ex-carousel { grid-area: car; }
.h-ex-pins { grid-area: pins; display: flex; align-items: flex-end; gap: 24px; }
.h-ex-phone { position: relative; padding: 9px; border-radius: 40px; background: #0d1222; box-shadow: 0 0 0 1.5px #2a3150, 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 80px -20px rgba(61, 107, 255, 0.35); }
.h-ex-phone::before { content: ''; position: absolute; z-index: 1; top: 19px; left: 50%; width: 22%; height: 18px; transform: translateX(-50%); border-radius: 999px; background: #0d1222; pointer-events: none; }
.h-ex-phone video, .h-ex-phone img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 31px; background: #0d1222; object-fit: cover; }
.h-ex-still { display: none !important; }
/* the films (scripts/home-films): square, muted loops; the poster first, the film only near the screen (home-demo.js) */
.h-film-frame { position: relative; overflow: hidden; border-radius: var(--r-lg); background: #060a15; box-shadow: var(--sh-2); }
.h-film-v { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #060a15; }
.h-film-story { width: min(100%, max(320px, calc(100svh - 470px))); margin: 32px 0 0; }
.h-film-foot { display: flex; min-height: 32px; margin-top: 12px; }
.h-film-foot .h-motion { position: static; border-color: var(--h-line-2); background: var(--h-panel); color: var(--h-ink-2); }
.h-film-foot .h-motion:hover { border-color: var(--h-muted); color: var(--h-ink); }
.h-feats-scroll { margin-top: 28px; }
.h-feats { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; }
.h-feat h3 { margin-top: 16px; font: 800 19px/1.2 var(--h-display); letter-spacing: -0.015em; }
.h-feat p { margin-top: 6px; max-width: 34ch; font-size: 15px; line-height: 1.5; color: var(--h-ink-2); }
.h-ex-item figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; font-size: 14.5px; line-height: 1.45; color: var(--c-ink-2); }
.h-ex-item figcaption b { font-size: 16px; font-weight: 650; color: #fff; }
/* sideways strips: the strip scrolls, never the page; the next slide peeks in at the edge */
.h-strip { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; padding-bottom: 10px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.h-strip:focus-visible { outline-offset: 4px; }
.h-strip ul { list-style: none; display: flex; gap: 14px; margin: 0; padding: 0; }
.h-strip li { flex: 0 0 var(--h-strip-w, 260px); scroll-snap-align: start; }
.h-strip img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: var(--r-md); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
.h-ex-carousel .h-strip { --h-strip-w: calc((100% - 42px) / 3.35); }
.h-pins { list-style: none; display: flex; gap: 14px; margin: 0; padding: 0; }
.h-pins li { width: 200px; }
.h-pins img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; border-radius: var(--r-md); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 50px -26px rgba(0, 0, 0, 0.9); }
.h-ex-pins figcaption { margin-top: 0; padding-bottom: 6px; max-width: 30ch; }

/* ───────── from topic to post: one Whiskerwhy post through the four steps, a rail that fills as you scroll ───────── */
.h-tour-in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 32px 72px; align-items: start; }
.h-tour-head { position: sticky; top: 112px; margin-bottom: 0; }
.h-tour-scroll { margin: 0; }
.h-tour { --rail-in: 116px; position: relative; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0; padding: 0; }
.h-tour::before, .h-tour::after { content: ''; position: absolute; left: 17px; top: var(--rail-in); bottom: var(--rail-in); width: 2px; border-radius: 2px; background: var(--h-line-2); }
/* lit by default (no script, reduced motion); home-demo.js adds .is-live and then lights each step as it passes the middle of the screen */
.h-tour::after { background: linear-gradient(var(--h-btn), var(--h-good)); transform-origin: top; transition: transform var(--m-slow) var(--m-out); }
.h-tour.is-live::after { transform: scaleY(0); }
.h-tour.is-live[data-on='2']::after { transform: scaleY(0.3333); }
.h-tour.is-live[data-on='3']::after { transform: scaleY(0.6667); }
.h-tour.is-live[data-on='4']::after { transform: none; }
.h-tour li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 18px; align-items: center; min-width: 0; }
.h-tour .h-step-n { position: relative; z-index: 1; isolation: isolate; width: 36px; height: 36px; border: 1.5px solid transparent; background: var(--h-bg); color: #fff; font-size: 15px; transition: color var(--m-base) ease, border-color var(--m-base) ease; }
.h-tour .h-step-n::before { content: ''; position: absolute; inset: -1.5px; z-index: -1; border-radius: 50%; background: var(--h-btn); transition: transform var(--m-base) var(--m-spring); }
.h-tour.is-live li:not(.is-on) .h-step-n { color: var(--h-muted); border-color: var(--h-line-2); }
.h-tour.is-live li:not(.is-on) .h-step-n::before { transform: scale(0); }
/* when a step lights up, its picture does its part: the approve button is pressed, the posted badge springs in */
.h-tour.is-live li.is-on .h-art-tap { animation: h-press 0.5s var(--m-spring) 0.35s both; }
.h-tour.is-live li.is-on .h-art-posted, .h-tour.is-live li.is-on .h-art-chip { animation: h-pop var(--m-base) var(--m-spring) 0.3s both; }
.h-tour-card { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 28px; align-items: center; padding: 16px; border: 1px solid var(--h-line); border-radius: var(--r-lg); background: var(--h-panel); box-shadow: var(--sh-1); transition: border-color var(--m-base) ease; }
.h-tour.is-live li.is-on .h-tour-card { border-color: color-mix(in srgb, var(--h-accent) 30%, var(--h-line)); }
.h-tour-txt { display: flex; flex-direction: column; gap: 6px; }
.h-tour-txt b { font: 800 var(--t-h3)/1.15 var(--h-display); letter-spacing: -0.015em; }
.h-tour-txt p { font-size: 16px; line-height: 1.55; color: var(--h-ink-2); max-width: 40ch; }
.h-step-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--h-btn); color: #fff; font: 800 14px/1 var(--h-display); font-variant-numeric: tabular-nums; }
.h-art { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 200px; padding: 18px; border-radius: var(--r-md); background: var(--h-bg); overflow: hidden; }
.h-art img { display: block; width: var(--w); height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-sm); }
.h-art-field { display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 14px; border: 1px solid var(--h-line-2); border-radius: 999px; background: var(--h-panel); font-size: 14px; color: var(--h-ink); box-shadow: var(--sh-1); }
.h-art-field svg { flex: none; color: var(--h-muted); }
.h-art-field > span:not(.h-art-caret) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-art-caret { flex: none; width: 1.5px; height: 18px; margin-left: -6px; background: var(--h-accent); }
.h-art-topic { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 6px; font-size: 13.5px; font-weight: 600; color: var(--h-ink-2); }
.h-art-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--h-accent); }
.h-art-made img { box-shadow: 0 12px 26px -14px rgba(16, 24, 47, 0.55); }
.h-art-made { gap: 10px; }
.h-art-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-xs); background: var(--h-panel); border: 1px solid var(--h-line-2); font-size: 12.5px; font-weight: 650; color: var(--h-good); }
.h-art-okcard { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 10px; border: 1px solid var(--h-line); border-radius: var(--r-md); background: var(--h-panel); }
.h-art-okcard .h-desk-kick { font-size: 12.5px; }
.h-art-oktitle { margin-top: 4px; font-size: 14px; font-weight: 650; line-height: 1.3; color: var(--h-ink); }
.h-art-tap { width: 100%; pointer-events: none; box-shadow: 0 0 0 5px color-mix(in srgb, var(--h-mari) 40%, transparent); }
.h-art-postcard { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--h-line); border-radius: var(--r-md); background: var(--h-panel); box-shadow: var(--sh-1); }
.h-art-posthead { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--h-ink); }
.h-art-posthead svg { width: 14px; height: 14px; margin-left: auto; color: var(--h-muted); }
.h-art-avatar { width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(#f2b43e, #e1306c, #833ab4, #f2b43e); }
.h-art-post { flex-direction: row; gap: 14px; }
.h-art-posted { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-xs); background: var(--h-good); font-size: 12.5px; font-weight: 650; color: #fff; }
@media (prefers-color-scheme: dark) { .h-art-posted { color: #062417; } }

/* ───────── the real Command Center (Leadsler's own live numbers) ─────────
   The real dashboard components (KpiStrip / KpiTile, the revenue card and milestone track from
   src/web/routes/command-center.tsx) with the real stylesheets (/static/app.css, /static/page-cc.css, loaded before
   this file). Only the frame and the caption live here. */
.h-live-in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 24px 64px; align-items: start; }
.h-live .h-sec-head { margin-bottom: 0; }
.h-cc { margin: 0; }
.h-cc-win { position: relative; text-align: left; overflow: hidden; border: 1px solid var(--h-line-2); border-radius: 14px; background: var(--bg, var(--h-bg-2)); box-shadow: var(--sh-2); }
.h-cc-bar { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 16px; border-bottom: 1px solid var(--h-line); background: var(--h-panel); font-size: 12.5px; color: var(--h-ink-2); white-space: nowrap; }
.h-cc-brand { display: inline-flex; align-items: center; gap: 7px; color: var(--h-ink); font-weight: 650; }
.h-cc-brand svg { flex: none; }
.h-cc-page { padding-left: 12px; border-left: 1px solid var(--h-line-2); font-weight: 600; color: var(--h-ink); }
.h-cc-asof { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.h-cc-asof::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--h-good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--h-good) 18%, transparent); }
.h-cc-body { padding: 16px; font: 14px/1.5 var(--h-sans); color: var(--text, var(--h-ink)); }
/* the dashboard's tertiary text (--text-3) is a notch stronger here, so every label and hint reads at >= 4.5:1 */
.h-cc-body { --text-3: #626b7a; }
@media (prefers-color-scheme: dark) { .h-cc-body { --text-3: #8a919e; } }
.h-cc-body .card { border-radius: 10px; }
.h-cc-body .cc-revenue { margin-bottom: 16px; }
.h-cc-body .cc-revenue .display { font-size: clamp(40px, 4.6vw, 56px); }
.h-cc-body .cc-revenue .sub { font-size: 13px; color: var(--text-2, var(--h-ink-2)); max-width: 60ch; }
.h-cc-body .kpi-strip { margin-bottom: 0; }
.h-cc-body .cc-money .kpi { padding: 16px 18px 15px; gap: 6px; }
.h-cc-body .cc-money .kpi .value { font-size: 32px; }
.h-cc-body .cc-money .kpi .hint { font-size: 12.5px; white-space: normal; overflow: visible; text-overflow: clip; text-wrap: pretty; }
.h-cc-body .cc-money .kpi .label { white-space: normal; }
.h-cc-body .cc-money .kpi .kpi-row { min-height: 24px; }
/* the KPI strip clips its children (overflow: hidden, rounded corners): a tile link's focus ring is drawn inside the tile, or it would be cut off on three sides */
.h-cc-body .kpi-strip a.kpi-link:focus-visible { outline-offset: -3px; }
.h-cc-guides { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 12px 2px 0; font-size: 13px; color: var(--h-muted); }
.h-cc-guides a { padding-block: 3px; margin-block: -3px; color: var(--h-ink-2); text-decoration: underline; text-decoration-color: var(--h-line-2); text-underline-offset: 3px; }
.h-cc-guides a:hover { color: var(--h-accent); text-decoration-color: currentColor; }
.h-cc figcaption { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--h-muted); }

/* ───────── pricing: the one plan, and how a subscription starts (shared with /subscribe) ───────── */
.h-os-price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: start; }
.h-plan { display: flex; flex-direction: column; padding: 30px 30px 24px; border: 1px solid var(--h-line-2); border-radius: var(--r-lg); background: var(--h-panel); box-shadow: var(--sh-1); }
.h-plan-main { border-color: color-mix(in srgb, var(--h-accent) 55%, var(--h-line-2)); box-shadow: inset 0 3px 0 var(--h-accent), var(--sh-2); }
.h-plan h3, .h-sub-page .h-os-plan h2 { font: 650 18px/1.2 var(--h-sans); letter-spacing: -0.01em; }
.h-plan-price { margin-top: 12px; font: 800 46px/1.02 var(--h-display); letter-spacing: -0.028em; font-variant-numeric: tabular-nums; } /* wraps only when the card is narrower than the price (320px, user text spacing) */
.h-plan-price.excl { font-size: 36px; }
.h-plan-vat { margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--h-muted); }
/* the billing promise reads with the price and its tax note as one unit */
.h-plan-bill { margin-top: 4px; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--h-ink-2); }
.h-plan-act { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: auto; padding-top: 20px; }
.h-cta-note { font-size: 13.5px; color: var(--h-muted); }
.h-buy-inc { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--h-line); }
.h-buy-inc li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--h-ink); }
.h-buy-inc li::before { content: ''; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--h-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f55d4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l3.8 3.8L18 8'/%3E%3C/svg%3E") center / 12px no-repeat; }
.h-buy-state { display: flex; align-items: flex-start; gap: 9px; margin: 18px 0 0; font-size: 14px; line-height: 1.45; color: var(--h-ink-2); }
.h-buy-state::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--h-mari); }
.h-buy-state.open::before { background: var(--h-good); }
.h-buy-legal { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--h-line); font-size: 13.5px; color: var(--h-muted); text-align: center; }
.h-buy-legal a { padding-block: 3px; color: var(--h-ink-2); text-decoration: underline; text-decoration-color: var(--h-line-2); text-underline-offset: 3px; transition: color var(--m-fast) ease, text-decoration-color var(--m-fast) ease; }
.h-buy-legal a:hover { color: var(--h-accent); text-decoration-color: currentColor; }
@media (prefers-color-scheme: dark) {
  .h-buy-inc li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fb0ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l3.8 3.8L18 8'/%3E%3C/svg%3E"); }
  .h-desk-checks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234fcf93' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l3.8 3.8L18 8'/%3E%3C/svg%3E"); }
}
.h-steps-h { margin: 6px 0 4px; font: 800 22px/1.2 var(--h-display); letter-spacing: -0.012em; }
.h-steps .h-kicker { font: 800 22px/1.2 var(--h-display); color: var(--h-ink); letter-spacing: -0.012em; } /* /subscribe's "How early access works" */
.h-steps ol { list-style: none; display: flex; flex-direction: column; margin: 8px 0 0; padding: 0; }
.h-steps li { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--h-line-2); }
.h-steps li:last-child { border-bottom: 1px solid var(--h-line-2); }
.h-steps b { display: block; font-size: 16.5px; margin-bottom: 4px; }
.h-steps p { font-size: 15px; line-height: 1.55; color: var(--h-ink-2); }
.h-loop-n { display: block; min-width: 22px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--h-accent); } /* /subscribe's step numbers */
.h-steps .h-step-n { flex: none; width: 28px; height: 28px; font-size: 14px; }

/* faq: the heading on the left, the questions on the right */
.h-faq-in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 24px 64px; align-items: start; }
.h-faq-in .h-sec-head { margin-bottom: 0; }
.h-faq details { border-top: 1px solid var(--h-line); }
.h-faq details:last-child { border-bottom: 1px solid var(--h-line); }
.h-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 0; font-size: 17px; font-weight: 600; color: var(--h-ink); cursor: pointer; transition: color var(--m-fast) ease; }
.h-faq summary::-webkit-details-marker { display: none; }
.h-faq summary::after { content: '+'; content: '+' / ''; flex: none; font-size: 22px; font-weight: 400; line-height: 1; color: var(--h-muted); transition: transform var(--m-base) var(--m-spring), color var(--m-fast) ease; }
.h-faq summary:hover, .h-faq summary:focus-visible { color: var(--h-accent); }
.h-faq summary:hover::after { color: var(--h-accent); }
.h-faq details[open] summary::after { transform: rotate(45deg); }
.h-faq details[open] p { animation: h-panel-in var(--m-base) var(--m-out) both; }
.h-faq p { max-width: 68ch; margin: -6px 0 20px; font-size: 15.5px; color: var(--h-ink-2); }

/* final band: the desk's surface once more, closing the page */
.h-final { padding: 0 0 104px; }
.h-final-in { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: 52px 48px; border-radius: var(--r-xl); background-color: var(--h-desk); background-image: var(--h-grain), radial-gradient(80% 120% at 0% 0%, rgba(255, 255, 255, 0.14), transparent 60%), radial-gradient(70% 100% at 100% 100%, var(--h-desk-deep), transparent 70%); background-size: 180px 180px, auto, auto; background-blend-mode: soft-light, normal, normal; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), var(--sh-2); color: var(--h-desk-ink); }
.h-final-in h2 { max-width: 22ch; font-size: clamp(28px, 1.4vw + 20px, 40px); }
.h-final-note { margin-top: 10px; font-size: 14.5px; color: rgba(255, 255, 255, 0.88); }
.h-final .h-cta { margin-top: 0; }
.h-final .h-btn:not(.ghost) { background: #fff; color: #17307f; }
.h-final .h-btn:not(.ghost):hover { background: #e9eeff; box-shadow: 0 14px 30px -14px rgba(8, 20, 80, 0.8); }
.h-final .h-btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.h-final .h-btn.ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); box-shadow: none; }
.h-final :focus-visible { outline-color: #fff; }
.h-final .h-btn:focus-visible { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.28); }

/* footer */
.h-foot { padding: 64px 0 36px; border-top: 1px solid var(--h-line); }
.h-foot-in { display: grid; grid-template-columns: 1.6fr 1fr 1.5fr 1fr; gap: 32px 40px; }
.h-foot-brand p { margin-top: 12px; font-size: 14.5px; color: var(--h-muted); max-width: 32ch; }
.h-foot-col { display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.h-foot-col b { margin-bottom: 4px; font-size: 14px; font-weight: 700; color: var(--h-ink); }
.h-foot-col a { min-height: 24px; color: var(--h-ink-2); transition: color var(--m-fast) ease; } /* 24px target (WCAG 2.5.8) by construction, not only by the gap between the links */
.h-foot-col a:hover { color: var(--h-ink); }
/* the page's one Leadsler Guides touch: a quiet card with a line icon; its arrow leans forward on hover and focus */
.h-foot-col a.h-guides-card { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--h-line); border-radius: var(--r-md); background: var(--h-panel); color: var(--h-ink); transition: border-color var(--m-base) ease, box-shadow var(--m-base) var(--m-out), translate var(--m-base) var(--m-out); }
.h-guides-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--h-accent-soft); color: var(--h-accent); }
.h-guides-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.h-guides-t b { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.3; }
.h-guides-t span { font-size: 13.5px; line-height: 1.4; color: var(--h-muted); }
.h-guides-go { display: grid; color: var(--h-muted); transition: transform var(--m-base) var(--m-spring), color var(--m-fast) ease; }
.h-foot-col a.h-guides-card:hover, .h-foot-col a.h-guides-card:focus-visible { text-decoration: none; border-color: color-mix(in srgb, var(--h-accent) 40%, var(--h-line)); box-shadow: var(--sh-1); translate: 0 -2px; }
.h-foot-col a.h-guides-card:focus-visible { outline: 2px solid var(--h-accent); outline-offset: 3px; border-radius: var(--r-md); }
.h-guides-card:hover .h-guides-go, .h-guides-card:focus-visible .h-guides-go { transform: translateX(3px); color: var(--h-accent); }
.h-foot-low { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 32px; margin-top: 44px; padding-top: 20px; font-size: 13.5px; color: var(--h-muted); }
.h-foot-low::before { content: ''; position: absolute; top: 0; left: var(--wrap-pad); right: var(--wrap-pad); height: 1px; background: var(--h-line); } /* the rule spans the content, not the gutters */
.h-credits { max-width: 90ch; font-size: 12.5px; line-height: 1.5; color: var(--h-muted); text-align: right; }
.h-credits a { color: inherit; text-decoration: underline; text-underline-offset: 2px; transition: color var(--m-fast) ease; }
.h-credits a:hover { color: var(--h-ink); }

/* /subscribe (src/web/routes/subscribe.tsx): the homepage's pricing block as a page of its own */
.h-sub-page h1 { font-size: clamp(32px, 3.3vw, 48px); line-height: 1.02; letter-spacing: -0.025em; }

/* ───────── motion ─────────
   1. The hero film (load, ≈5.5 s, then a calm loop): the headline and offer rise in, staggered; the renders rise in at
      their depths and then drift; the card lands; the beam lights; the carousel swipes every 3.2 s (cover → 4 slides →
      the cover again, seamlessly); at 3.55 s Approve is pressed and the line draws out of the card through Approved and
      Scheduled to Pinterest and Instagram, each lighting as the line arrives.
   2. Scroll: sections reveal with the stagger rule (home-demo.js adds .is-in once); the steps' rail fills step by step;
      where the browser supports scroll-driven animations, the seams draw out from the centre and the wall's two rows
      slide against each other as they pass.
   3. The pointer: the cursor's light over dark sections, the card's tilt and glare, the renders' depth shift, magnetic
      primary buttons (≤ 6 px) — all eased back when the pointer leaves. */
@keyframes h-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes h-in { from { opacity: 0; transform: translateY(46px) rotate(calc(var(--r) * 2)) scale(0.9); } to { opacity: 1; transform: rotate(var(--r)); } }
@keyframes h-drift { from { transform: translateY(0) rotate(var(--r)); } to { transform: translateY(-16px) rotate(calc(var(--r) * 0.6)); } }
@keyframes h-land { from { opacity: 0; transform: translateY(28px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes h-swipe { 0%, 16% { transform: translateX(0); } 20%, 36% { transform: translateX(-100%); } 40%, 56% { transform: translateX(-200%); } 60%, 76% { transform: translateX(-300%); } 80%, 96% { transform: translateX(-400%); } 100% { transform: translateX(-500%); } }
@keyframes h-tick { 0%, 16% { transform: translateY(0); } 20%, 36% { transform: translateY(-100%); } 40%, 56% { transform: translateY(-200%); } 60%, 76% { transform: translateY(-300%); } 80%, 96% { transform: translateY(-400%); } 100% { transform: translateY(-500%); } }
@keyframes h-spin { to { transform: rotate(1turn); } }
@keyframes h-press { 0% { transform: none; } 35% { transform: scale(0.95); } 100% { transform: none; } }
@keyframes h-ping { 0% { opacity: 0.9; transform: scale(0.96); } 100% { opacity: 0; transform: scale(1.1); } }
@keyframes h-out { to { opacity: 0; } }
@keyframes h-on { to { opacity: 1; } }
@keyframes h-draw { to { stroke-dashoffset: 0; } }
@keyframes h-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.08); } 100% { transform: none; } }
@keyframes h-node { 0% { scale: 1; } 45% { scale: 1.07; } 100% { scale: 1; } }
@keyframes h-pulse { 0% { opacity: 0.55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(3.2); } }
@keyframes h-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes h-marquee { to { transform: translateX(-50%); } }
@keyframes h-panel-in { from { opacity: 0; transform: translateY(6px); } }
/* 1 · the hero film */
.h-h1-a { animation: h-rise var(--m-slow) var(--m-out) 0.05s both; }
.h-h1-b { animation: h-rise var(--m-slow) var(--m-out) calc(0.05s + var(--m-stagger)) both; }
.h-lead { animation: h-rise var(--m-slow) var(--m-out) calc(0.05s + 2 * var(--m-stagger)) both; }
.h-offer-price { animation: h-rise var(--m-slow) var(--m-out) calc(0.05s + 3 * var(--m-stagger)) both; }
.h-offer-note { animation: h-rise var(--m-slow) var(--m-out) calc(0.05s + 4 * var(--m-stagger)) both; }
.h-hero .h-cta { animation: h-rise var(--m-slow) var(--m-out) calc(0.05s + 5 * var(--m-stagger)) both; }
.h-trust { animation: h-rise var(--m-slow) var(--m-out) calc(0.05s + 6 * var(--m-stagger)) both; }
.h-fl { animation: h-in 1.1s var(--m-out) both, h-drift 7s ease-in-out 1.4s infinite alternate; }
.h-fl.f2 { animation-delay: 0.15s, 1.6s; animation-duration: 1.1s, 8s; }
.h-fl.f3 { animation-delay: 0.3s, 1.8s; animation-duration: 1.1s, 6.5s; }
.h-fl.f4 { animation-delay: 0.1s, 1.5s; animation-duration: 1.1s, 9s; }
.h-fl.f5 { animation-delay: 0.45s, 2s; animation-duration: 1.1s, 10s; }
.h-desk-card { animation: h-land 0.8s var(--m-out) 0.15s both; }
.h-beam { animation: h-on var(--m-slow) var(--m-out) 0.9s both; }
.h-beam::before { animation: h-spin 7s linear infinite; }
.h-car-track { animation: h-swipe 16s var(--m-swipe) 0.2s infinite; }
.h-car-tick > span { animation: h-tick 16s var(--m-swipe) 0.2s infinite; }
.h-desk-ok { animation: h-press 0.5s var(--m-spring) 3.55s both; }
.h-desk-ok::after { animation: h-ping 0.9s var(--m-out) 3.6s both; }
.h-desk-ok::before { animation: h-on 0.3s var(--m-out) 3.68s both; }
.h-ok-a { animation: h-out 0.2s var(--m-out) 3.68s both; }
.h-ok-b { animation: h-on 0.3s var(--m-out) 3.74s both; }
.h-desk-act .ghost { animation: h-out 0.3s var(--m-out) 3.7s both; } /* nothing left to edit once it is approved */
.h-desk .h-kick-a { animation: h-out 0.3s var(--m-out) 3.7s both; }
.h-desk .h-kick-b { animation: h-on 0.3s var(--m-out) 3.75s both; }
.h-desk .h-kick-b .h-dot { animation: h-pop var(--m-base) var(--m-spring) 3.75s both; }
.h-route-lit .l0 { animation: h-draw 0.35s var(--m-swipe) 3.8s both; }
.h-route-lit .l1 { animation: h-draw 0.4s var(--m-swipe) 4.2s both; }
.h-route-lit .l2 { animation: h-draw 0.5s var(--m-swipe) 4.65s both; }
.h-route-lit .l3 { animation: h-draw 0.5s var(--m-swipe) 4.75s both; }
.n-ok { --t: 4.12s; }
.n-sch { --t: 4.58s; }
.n-pinterest { --t: 5.12s; }
.n-instagram { --t: 5.22s; }
.n-ok, .n-sch, .n-pinterest, .n-instagram { animation: h-node 0.5s var(--m-spring) var(--t) both; }
.n-ok::before, .n-sch::before, .n-pinterest::before, .n-instagram::before { animation: h-on 0.3s var(--m-out) var(--t) both; }
.n-ok .h-node-dot { animation: h-pop var(--m-base) var(--m-spring) var(--t) both; }
.n-pinterest .h-plat-t .a, .n-instagram .h-plat-t .a { animation: h-out 0.25s var(--m-out) var(--t) both; }
.n-pinterest .h-plat-t .b, .n-instagram .h-plat-t .b { animation: h-on 0.3s var(--m-out) calc(var(--t) + 0.1s) both; }
/* small loops: connected accounts breathe, the search caret blinks */
.h-soc .is-connected .h-soc-dot::after { animation: h-pulse 2.8s var(--m-out) infinite; }
.h-soc li:nth-child(2) .h-soc-dot::after { animation-delay: 0.9s; }
.h-soc li:nth-child(3) .h-soc-dot::after { animation-delay: 1.8s; }
.h-art-caret { animation: h-blink 1.1s steps(1) infinite; }
.h-slot.is-new { animation: h-pop 0.5s var(--m-spring) both; }
/* the content wall: two rows drifting in opposite directions; they stop under the pointer or keyboard focus and off screen */
.h-wall-track { animation: h-marquee 72s linear infinite; }
.h-wall-row.r2 .h-wall-track { animation-direction: reverse; animation-duration: 84s; }
.h-wall:hover .h-wall-track, .h-wall:focus-within .h-wall-track, .h-wall.is-off .h-wall-track { animation-play-state: paused; }
/* one switch for every loop on the page (WCAG 2.2.2) */
.h-paused .h-wall-track, .h-paused .h-fl, .h-paused .h-beam::before, .h-paused .h-car-track, .h-paused .h-car-tick > span, .h-paused .h-soc-dot::after, .h-paused .h-art-caret { animation-play-state: paused; }
@media (prefers-reduced-motion: no-preference) {
  /* 2 · scroll reveals (only once home-demo.js runs): a block rises in, or its .h-st children one by one, 70 ms apart */
  .h-reveal [data-reveal]:not(:has(.h-st)), .h-reveal [data-reveal] .h-st { opacity: 0; transform: translateY(26px); transition: opacity var(--m-slow) var(--m-out), transform var(--m-slow) var(--m-out); transition-delay: calc(var(--i, 0) * var(--m-stagger)); }
  .h-reveal [data-reveal].is-in, .h-reveal [data-reveal].is-in .h-st { opacity: 1; transform: none; }
  /* the steps' rail on a phone: each link draws after the one before it */
  .h-tour li::after { transition: transform var(--m-slow) var(--m-out); }
  .h-tour li:nth-child(2)::after { transition-delay: 0.3s; }
  .h-tour li:nth-child(3)::after { transition-delay: 0.6s; }
  .h-tour li:nth-child(2) .h-step-n::before { transition-delay: 0.3s; }
  .h-tour li:nth-child(3) .h-step-n::before { transition-delay: 0.6s; }
  .h-tour li:nth-child(4) .h-step-n::before { transition-delay: 0.9s; }
  @supports (animation-timeline: view()) {
    .h-seam::before { animation: h-seam linear both; animation-timeline: --seam; animation-range: cover 0% cover 45%; }
    .h-wall-row.r1 { animation: h-row-l linear both; animation-timeline: view(); animation-range: cover; }
    .h-wall-row.r2 { animation: h-row-r linear both; animation-timeline: view(); animation-range: cover; }
    @keyframes h-seam { from { transform: scaleX(0.12); opacity: 0.3; } to { transform: none; opacity: 1; } }
    @keyframes h-row-l { from { transform: translateX(4%); } to { transform: translateX(-4%); } }
    @keyframes h-row-r { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { animation: none !important; transition: none !important; }
  /* the looping Short becomes its still (with its description) */
  .h-ex-phone video { display: none !important; }
  .h-ex-still { display: block !important; }
  /* a calm, finished hero: the card shows the approved carousel, the line stands drawn to Instagram and Pinterest */
  .h-desk .h-kick-a, .h-ok-a, .h-desk-act .ghost { opacity: 0; }
  .h-desk .h-kick-b, .h-ok-b, .h-desk-ok::before { opacity: 1; }
  .h-route-lit path { stroke-dashoffset: 0; }
  .n-ok::before, .n-sch::before, .n-pinterest::before, .n-instagram::before, .h-plat-t .b { opacity: 1; }
  .h-plat-t .a:has(+ .b) { opacity: 0; }
  .h-beam::before { transform: rotate(150deg); }
  /* the wall becomes two rows you scroll yourself (the steps' rail stands full: home-demo.js leaves it lit) */
  .h-wall-row { overflow-x: auto; }
}

/* ───────── responsive ───────── */
@media (max-width: 1180px) {
  .h-hero-in { gap: 0 32px; }
  .h-desk-body { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 18px; padding: 16px; }
  .h-fl.f1, .h-fl.f5 { display: none; }
  .h-app-main { grid-template-columns: minmax(0, 1fr); }
  .h-tour-card { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 20px; }
  .h-foot-in { grid-template-columns: 1.2fr 1fr 1.5fr 1fr; gap: 28px; }
}
@media (max-width: 960px) {
  .h-wrap { --wrap-pad: 24px; }
  .h-nav, .h-top-login { display: none; }
  .h-menu { display: block; }
  .h-top-act { margin-left: auto; }
  .h-hero-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'copy' 'stage' 'offer'; grid-template-rows: none; gap: 24px; }
  .h-hero-offer { margin-top: 0; }
  .h-tour-in { grid-template-columns: minmax(0, 1fr); }
  .h-tour-head { position: static; }
  .h-film-story { width: min(100%, 560px); }
  .h-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-os-price, .h-live-in, .h-faq-in, .h-sec-head-row { grid-template-columns: minmax(0, 1fr); }
  .h-sec-head-row .h-sub { margin-top: 0; }
  .h-ex-grid { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
  .h-foot-in { grid-template-columns: 1fr 1fr; }
  .h-foot-brand { grid-column: span 2; }
  .h-credits { text-align: left; }
}
@media (max-width: 720px) {
  .h-wrap { --wrap-pad: 16px; }
  .h-top-in { height: 56px; gap: 12px; }
  .h-brand { font-size: 18px; }
  .h-hero { padding: 18px 0 44px; }
  .h-hero-in { gap: 14px; }
  .h-hero h1 { font-size: clamp(30px, 8.6vw, 42px); line-height: 0.98; letter-spacing: -0.032em; }
  .h-lead { margin-top: 10px; font-size: 15px; line-height: 1.5; }
  .h-motion { right: 12px; bottom: 10px; }
  /* the stage on a phone: the card with the carousel beside its title and the approve button; two renders peek behind it */
  .h-stage { padding: 8px 0 0; }
  .h-float { inset: -8px -10px 60px -10px; }
  .h-fl.f1, .h-fl.f4, .h-fl.f5 { display: none; }
  .h-fl.f2 { width: 70px; right: -2px; top: 22px; }
  .h-fl.f3 { width: 64px; right: -6px; top: auto; bottom: 0; }
  .h-desk { max-width: none; margin-right: 22px; }
  .h-desk-card { border-radius: var(--r-md); }
  .h-beam { border-radius: calc(var(--r-md) + 1px); }
  .h-desk-bar { min-height: 34px; padding: 4px 12px; font-size: 12px; }
  .h-desk-body { grid-template-columns: minmax(0, 140px) minmax(0, 1fr); gap: 12px; padding: 12px; }
  .h-car-frame { margin-right: 10px; }
  .h-car-back.b1 { transform: translateX(5px) scale(0.95); }
  .h-car-back.b2 { transform: translateX(10px) scale(0.9); }
  .h-car-view { border-radius: var(--r-sm); }
  .h-car-n { margin-top: 6px; font-size: 11.5px; }
  .h-desk-info { padding-top: 0; }
  .h-desk-kick { font-size: 12.5px; }
  .h-kick-a, .h-kick-b { gap: 7px; }
  .h-desk-title { margin-top: 6px; font-size: 17px; line-height: 1.12; letter-spacing: -0.01em; }
  .h-desk-meta { font-size: 12.5px; margin-top: 5px; line-height: 1.35; }
  .h-desk-checks { display: none; }
  .h-desk-act { padding-top: 10px; }
  .h-desk-act .ghost, .h-desk-more { display: none; }
  .h-desk-ok { flex: 1 1 auto; }
  .h-desk-act .h-btn { min-height: 38px; padding: 6px 10px; font-size: 13.5px; border-radius: var(--r-sm); }
  .h-desk-ok::after { border-radius: calc(var(--r-sm) + 5px); }
  /* the route on a phone: one row, the platforms as round icons */
  .h-route-svg.d { display: none; }
  .h-route-svg.m { display: block; }
  .h-node { height: 28px; padding: 0 9px; gap: 5px; font-size: 11.5px; }
  .n-ok { --x: 13.53%; width: 86px; }
  .n-sch { --x: 47.06%; width: 88px; }
  .h-node-long { display: none; }
  .h-plat { --x: 89.41%; width: 26px; height: 26px; padding: 0; justify-content: center; }
  .h-plat svg { width: 14px; height: 14px; }
  .h-plat-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .n-instagram { --y: 16.67%; }
  .n-youtube { --y: 83.33%; }
  .h-offer-price { font-size: 16px; }
  .h-offer-amt { font-size: 32px; }
  .h-offer-tag { margin-left: 0; }
  .h-offer-note { margin-top: 4px; font-size: 13px; line-height: 1.45; }
  .h-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 14px; }
  .h-cta .h-btn.lg { min-height: 48px; padding: 8px 12px; font-size: 15px; }
  .h-trust { gap: 4px 14px; margin-top: 14px; font-size: 13px; }
  .h-sec { padding: 60px 0; }
  .h-sec-head { margin-bottom: 22px; }
  .h-sub { font-size: 15.5px; }
  .h-seam::after { top: -40px; height: 40px; }
  .h-seam.down::after { top: 0; }
  /* demo workspace: tabs swipe, the week becomes a compact strip under the queue */
  .h-demo { padding-top: 52px; }
  .h-app-bar { padding: 4px 12px; min-height: 40px; }
  .h-app-tabs { padding: 8px 8px 0; gap: 0; }
  .h-app-tab-in { padding: 6px 10px 9px; }
  .h-app-tab-in b { font-size: 14px; }
  .h-app-tab-in small { font-size: 11.5px; }
  .h-app-panel { padding: 12px; }
  /* the accounts on a phone: icon, name and the state dot; the state words stay for screen readers */
  .h-soc { gap: 6px; margin-bottom: 14px; }
  .h-soc li { position: relative; min-height: 32px; gap: 6px; padding: 3px 10px 3px 8px; font-size: 12.5px; }
  .h-soc-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .h-q { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 10px; }
  .h-q-img { width: 64px; height: 80px; }
  .h-q-title { font-size: 14.5px; }
  .h-q-when { font-size: 12.5px; }
  .h-q-act .h-btn.sm, .h-q-done .h-btn.sm { min-height: 36px; padding: 6px 11px; font-size: 13.5px; }
  .h-week { gap: 4px; }
  .h-week li { min-height: 96px; padding: 6px 3px; gap: 4px; }
  .h-week b { font-size: 11.5px; }
  .h-slot { padding: 2px; border-radius: 6px; }
  .h-slot-t { font-size: 10.5px; }
  /* examples: the phone beside its caption, the carousel swipes edge to edge, the pins side by side */
  .h-ex { padding-bottom: 64px; }
  .h-wall { gap: 12px; }
  .h-wall-track { gap: 12px; }
  .h-wall-track img { height: 184px; border-radius: 9px; }
  .h-wall-cap { font-size: 12px; margin-top: 7px; }
  .h-wall-foot { margin: 4px 0 28px; }
  .h-ex-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'short' 'car' 'pins'; gap: 32px; }
  .h-ex-short { display: grid; grid-template-columns: minmax(0, 50%) minmax(0, 1fr); gap: 16px; align-items: end; }
  .h-ex-short figcaption { margin-top: 0; font-size: 14px; }
  .h-ex-phone { padding: 6px; border-radius: 28px; }
  .h-ex-phone::before { top: 13px; height: 12px; }
  .h-ex-phone video, .h-ex-phone img { border-radius: 22px; }
  .h-strip { margin: 0 -16px; padding: 0 16px 8px; scroll-padding-inline: 16px; -webkit-mask-image: none; mask-image: none; }
  .h-ex-carousel .h-strip { --h-strip-w: 62%; }
  .h-ex-item figcaption { font-size: 14px; }
  .h-ex-pins { flex-direction: column; align-items: stretch; gap: 14px; }
  .h-pins li { width: auto; flex: 1 1 0; }
  .h-ex-pins figcaption { max-width: none; }
  /* how it works: a swipe row of the four steps; the rail runs along the top through the numbers */
  .h-film-story { width: 100%; margin-top: 22px; }
  .h-feats-scroll { margin: 20px -16px 0; padding: 0 16px 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
  .h-feats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; }
  .h-feat { scroll-snap-align: start; }
  .h-feat h3 { font-size: 17px; }
  .h-feat p { font-size: 14.5px; }
  .h-tour-scroll { margin: 0 -16px; padding: 0 16px 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
  .h-tour { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; }
  .h-tour::before, .h-tour::after { display: none; }
  .h-tour li { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px; scroll-snap-align: start; }
  .h-tour li::before, .h-tour li::after { content: ''; position: absolute; top: 17px; left: 44px; right: -10px; height: 2px; border-radius: 2px; background: var(--h-line-2); }
  .h-tour li::after { background: linear-gradient(90deg, var(--h-btn), var(--h-good)); transform-origin: left; }
  .h-tour.is-live li:not(.is-on)::after { transform: scaleX(0); }
  .h-tour li:last-child::before, .h-tour li:last-child::after { display: none; }
  .h-tour-card { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 12px; }
  .h-art { height: 172px; padding: 14px; }
  .h-tour-txt b { font-size: 18px; }
  .h-tour-txt p { font-size: 14.5px; }
  .h-plan { padding: 24px 20px 20px; }
  .h-plan-price { font-size: 38px; }
  .h-plan-price.excl { font-size: 30px; }
  .h-buy-inc { gap: 7px; margin-top: 16px; padding-top: 14px; }
  .h-buy-inc li { font-size: 14px; line-height: 1.4; }
  .h-steps-h { font-size: 20px; }
  .h-steps li { padding: 12px 0; gap: 12px; }
  .h-steps b { font-size: 15px; margin-bottom: 2px; }
  .h-steps p { font-size: 13.5px; line-height: 1.5; }
  .h-faq summary { font-size: 16px; padding: 14px 0; }
  .h-final { padding: 0 0 56px; }
  .h-final-in { padding: 30px 20px; border-radius: 20px; }
  .h-final .h-cta { width: 100%; }
  .h-foot { padding: 40px 0 24px; }
  .h-foot-in { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .h-foot-brand, .h-foot-guides { grid-column: 1 / -1; }
  .h-foot-low { flex-direction: column; margin-top: 28px; }
}
/* a 320px phone: the headline and the price keep fitting (the wrap fallbacks above are for user text spacing) */
@media (max-width: 340px) {
  .h-hero h1 { font-size: 28px; }
  .h-plan-price { font-size: 32px; }
  .h-desk-body { grid-template-columns: minmax(0, 118px) minmax(0, 1fr); }
  .h-cta { grid-template-columns: minmax(0, 1fr); }
}

/* ── /subscribe (phase B) ── the subscribe step, account, terms (src/web/routes/subscribe.tsx) */
.h-narrow { max-width: 680px; }
.h-narrow h1 { margin-bottom: 18px; }
.h-alert { margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--h-line); background: var(--h-panel); font-size: 14px; line-height: 1.45; color: var(--h-ink); }
.h-alert.good { border-color: var(--h-good); }
.h-alert.warn { border-color: var(--h-warn); }
.h-alert.bad { border-color: #c2412d; }
.h-form { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 8px; padding-top: 16px; border-top: 1px solid var(--h-line); }
.h-form-title { font-weight: 700; font-size: 15px; margin: 0 0 4px; }
.h-form label { font-size: 13.5px; font-weight: 600; color: var(--h-ink-2); }
.h-form input[type='email'], .h-form input[type='password'] { height: 42px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--h-line-2); background: var(--h-bg); color: var(--h-ink); font: 15px/1 var(--h-sans); }
.h-form input:focus-visible, .h-form button:focus-visible { outline: 2px solid var(--h-accent); outline-offset: 2px; }
.h-form .h-btn { align-self: flex-start; white-space: normal; height: auto; min-height: 44px; padding: 10px 18px; line-height: 1.3; text-align: left; }
.h-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; color: var(--h-ink) !important; margin: 6px 0; }
.h-check input { margin-top: 3px; flex: none; width: 16px; height: 16px; }
.h-hint { font-size: 13px; line-height: 1.45; color: var(--h-muted); margin: 0; }
.h-signed-in { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 13.5px; color: var(--h-muted); margin: 0 0 6px; }
.h-link { background: none; border: 0; padding: 0; color: var(--h-accent); font: inherit; text-decoration: underline; cursor: pointer; }
.h-facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 6px 0 10px; font-size: 14px; line-height: 1.5; }
.h-facts dt { font-weight: 600; color: var(--h-ink-2); }
.h-facts dd { margin: 0; color: var(--h-ink); overflow-wrap: anywhere; }
.h-terms h2 { font-size: 17px; margin: 22px 0 6px; font-family: var(--h-sans); font-weight: 700; }
.h-terms p { line-height: 1.6; color: var(--h-ink-2); }
@media (max-width: 560px) {
  .h-facts { grid-template-columns: 1fr; gap: 2px; }
  .h-facts dd { margin-bottom: 8px; }
}