/* ============================================================
   DESIGN RATIONALE — every token and rule below traces back to
   a named principle, not to taste. Summary (full notes inline
   at each section):

   COLOR
   - 60-30-10 rule: pearl (neutral) ~60%, ash/ink ~30%, and a
     single accent reserved for CTA affordance ~10%, so the eye
     is never fighting for attention in two places at once.
   - Simultaneous contrast (Albers): every "muted" gray below was
     re-picked IN SITU against its actual background, not as an
     isolated swatch — the same hex reads differently on pearl-100
     vs ash-400, so light-mode and dark-mode mutes are different
     values, not the same gray with opacity.
   - WCAG contrast: text-muted / text-inverse-muted were measured
     (not eyeballed) at ≥4.5:1 against their real backgrounds for
     body text, ≥3:1 for large/bold text. The original draft's
     #8A8A8A on white measured 3.46:1 — it read fine to the eye but
     fails AA; corrected to #6B6B6B (5.3:1). Same fix applied to
     text-inverse-muted (#6A6A6A → #85847F, 4.5:1+ vs #1A1A1A).
   - Near-black, not pure black (Refactoring UI): body copy sits on
     #1A1A1A / #1A1A1A-based inks, never #000, to reduce eye strain
     at long line lengths.

   TYPOGRAPHY
   - Modular scale (~1.25, "major third"): section-title, hero h1,
     pricing-amount and body sizes step by a consistent ratio rather
     than ad hoc px values, so hierarchy reads as intentional.
   - Two typefaces only (Refactoring UI): Playfair Display (display
     serif, high-contrast strokes) vs Inter (geometric-humanist sans)
     — different enough in construction to create real hierarchy
     instead of "two fonts that look like a mistake."
   - Line length 45–75 characters, line-height 1.4–1.6x for body
     copy — .prose p and .section-desc are both capped by max-width
     for this reason, not just visual tidiness.

   LAYOUT
   - 8pt spacing grid: every --spacing-* token is a multiple of 8px
     (8/16/24/32/48/64/96) so the composition "snaps into place"
     (Müller-Brockmann's grid discipline).
   - CRAP (Williams): Contrast via ash-vs-pearl section alternation,
     Repetition via the .btn/.card/.section-header system, Alignment
     via the shared .wrap/.wrap-narrow containers, Proximity via
     Gestalt grouping (stat + label always share a parent).
   - Z-pattern in the hero (prehead → h1 → CTA, visual anchors the
     right eye-stop): the offer and the button sit where a first-
     time scanner's eye already lands (Krug: don't make me think).

   INTERACTION
   - Fitts's Law: primary CTAs are large (min-height 48–56px) and
     repeated at every natural decision point (after the problem,
     after pricing, at scroll-exit) rather than requiring a user to
     travel back to one CTA.
   - 44–48px minimum touch targets (iOS/Material) — non-negotiable
     floor for every .btn, not a suggestion.
   - Explicit verb labels (Adam Silver): "Claim My Trial," "Start
     Trial," never a bare "Submit."
   - Motion = feedback, not decoration (Saffer): 200–300ms micro-
     interactions, ease-out/jelly curves that mimic natural
     deceleration; reduced-motion users get the outcome with no
     animation, never a broken state.
   - Accessible focus (Norman's signifiers): every interactive
     element gets a visible focus ring so keyboard users get the
     same "what can I do here" signal mouse users get from hover.
   - Errors surface in three places, never live-as-you-type (Silver,
     Form Design Patterns): field-level message + inline border +
     a summary list at the top of the form, all appearing only on
     submit attempt.
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --pearl-100:#FFFFFF;
  --pearl-200:#FDFCFA;
  --pearl-300:#F8F6F3;
  --pearl-400:#F2F0EC;
  --pearl-500:#EBE9E4;
  --pearl-gradient:linear-gradient(180deg,#FDFCFA 0%,#F2F0EC 100%);
  --pearl-gradient-subtle:linear-gradient(180deg,#FFFFFF 0%,#F8F6F3 100%);

  --ash-100:#3A3A3A;
  --ash-200:#2D2D2D;
  --ash-300:#222222;
  --ash-400:#1A1A1A;
  --ash-500:#111111;
  --ash-600:#0D0D0D;
  --ash-gradient:linear-gradient(180deg,#2D2D2D 0%,#1A1A1A 100%);
  --ash-gradient-deep:linear-gradient(180deg,#1A1A1A 0%,#0D0D0D 100%);
  --ash-gradient-radial:radial-gradient(ellipse at top,#2D2D2D 0%,#111111 100%);

  --text-primary:#1A1A1A;
  --text-secondary:#5A5A5A;
  /* WCAG AA fix: #8A8A8A on white measured 3.46:1 (fails 4.5:1 for
     normal body text — Albers' simultaneous-contrast reminder that
     a swatch must be checked in situ, not in isolation). #6B6B6B
     measures 5.3:1 against pearl backgrounds. */
  --text-muted:#6B6B6B;
  --text-inverse:#FAFAF8;
  --text-inverse-secondary:#A0A0A0;
  /* Same fix, dark side: #6A6A6A on #1A1A1A measured 3.22:1.
     #85847F measures ~4.6:1 against ash-400. */
  --text-inverse-muted:#85847F;
  --icon-inverse:rgba(250,250,248,0.75);

  --border-light:rgba(0,0,0,0.06);
  --border-medium:rgba(0,0,0,0.1);
  --border-dark:rgba(255,255,255,0.06);
  --border-dark-medium:rgba(255,255,255,0.1);

  --shadow-xs:0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.03),0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:0 4px 12px rgba(0,0,0,0.06),0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:0 8px 24px rgba(0,0,0,0.08),0 4px 8px rgba(0,0,0,0.04);
  --shadow-xl:0 16px 48px rgba(0,0,0,0.12),0 8px 16px rgba(0,0,0,0.06);
  --shadow-2xl:0 24px 64px rgba(0,0,0,0.16),0 12px 24px rgba(0,0,0,0.08);
  --shadow-dark-sm:0 2px 8px rgba(0,0,0,0.3);
  --shadow-dark-md:0 8px 24px rgba(0,0,0,0.4);
  --shadow-dark-lg:0 16px 48px rgba(0,0,0,0.5);
  --shadow-inset:inset 0 1px 2px rgba(0,0,0,0.06);
  --shadow-inset-dark:inset 0 1px 0 rgba(255,255,255,0.04);

  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --spacing-xs:8px;
  --spacing-sm:16px;
  --spacing-md:24px;
  --spacing-lg:32px;
  --spacing-xl:48px;
  --spacing-2xl:64px;
  --spacing-3xl:96px;

  --font-body:'Inter',-apple-system,sans-serif;
  --font-display:'Playfair Display',Georgia,serif;

  --transition-fast:200ms cubic-bezier(0.4,0,0.2,1);
  --transition-smooth:300ms cubic-bezier(0.4,0,0.2,1);
  --jelly:500ms cubic-bezier(0.68,-0.55,0.265,1.55);
  --jelly-soft:600ms cubic-bezier(0.34,1.56,0.64,1);
  --focus-ring:0 0 0 3px rgba(45,45,45,0.35);
  --focus-ring-dark:0 0 0 3px rgba(250,250,248,0.55);
}

html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--pearl-300);
  color:var(--text-primary);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{display:block;max-width:100%}

/* Skip link — Krug/WCAG: keyboard and screen-reader users should
   not have to tab through the entire nav to reach the offer. */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ash-400);color:var(--text-inverse);padding:12px 20px;border-radius:0 0 var(--radius-sm) 0;z-index:2000;font-weight:600;font-size:.875rem;text-decoration:none}
.skip-link:focus{left:0}

/* Visible focus signifier (Norman): every focusable element gets
   an explicit, high-contrast ring — this is the keyboard user's
   equivalent of a hover state, not optional polish. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-xs);
}
.section-dark a:focus-visible,.section-dark button:focus-visible,.section-dark [tabindex]:focus-visible{
  box-shadow:var(--focus-ring-dark);
}

/* ============ TICKER ============ */
.ticker{
  background:var(--ash-gradient-deep);
  color:var(--text-inverse-secondary);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  padding:9px 0;
  overflow:hidden;
  position:relative;
  border-bottom:1px solid var(--border-dark);
}
.ticker-track{display:flex;gap:var(--spacing-2xl);white-space:nowrap;animation:ticker 34s linear infinite;width:max-content}
.ticker-track span{display:inline-flex;align-items:center;gap:10px}
.ticker-track span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--text-inverse-muted)}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ NAV ============ */
.nav{
  position:sticky;top:0;left:0;right:0;z-index:1000;
  padding:var(--spacing-sm) var(--spacing-lg);
  background:rgba(253,252,250,.8);
  border-bottom:1px solid var(--border-light);
  transition:var(--transition-smooth);
}
.nav.scrolled{background:rgba(253,252,250,.95);box-shadow:var(--shadow-md)}
.nav-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md)}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-mark{width:38px;height:38px;flex-shrink:0}
.logo-text{font-family:var(--font-display);font-size:1.375rem;font-weight:700;color:var(--text-primary);letter-spacing:-.02em}
.logo-text span{color:var(--text-muted);font-weight:400}
/* Hick's Law: 4 real nav choices + 1 CTA. More items = longer
   decision time before a visitor even reaches the offer, so
   anything that isn't "read the pitch" or "convert" stays out. */
.nav-links{display:flex;align-items:center;gap:var(--spacing-lg);list-style:none}
.nav-links a{color:var(--text-secondary);text-decoration:none;font-size:.875rem;font-weight:500;letter-spacing:.01em;transition:color var(--transition-fast);position:relative;padding:4px 0}
.nav-links a:hover{color:var(--text-primary)}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:1.5px;background:var(--text-primary);transform:scaleX(0);transform-origin:left;transition:transform var(--transition-smooth)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{
  background:var(--ash-gradient)!important;color:var(--text-inverse)!important;
  padding:10px 22px!important;border-radius:var(--radius-sm)!important;font-weight:600!important;
  box-shadow:var(--shadow-md),var(--shadow-inset);transition:transform var(--jelly),opacity var(--jelly),box-shadow var(--jelly),background-color var(--jelly),color var(--jelly),border-color var(--jelly)!important;transform-origin:center;
}
.nav-cta:hover{transform:scale(1.05);box-shadow:var(--shadow-lg)!important}
.nav-cta:active{transform:scale(.96);transition-duration:100ms}
.nav-cta::after{display:none!important}
.mobile-menu-btn{display:none;background:none;border:none;color:var(--text-primary);font-size:1.5rem;cursor:pointer;padding:var(--spacing-xs);line-height:1}

/* ============ BUTTONS ============ */
/* Fitts's Law: target time = f(distance, size). Every button here
   clears the 44–48px minimum touch target (iOS HIG / Material) —
   not a stylistic choice, a documented usability floor. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);
  padding:14px 28px;border-radius:var(--radius-sm);font-size:.9375rem;font-weight:600;
  text-decoration:none;cursor:pointer;border:none;transition:transform var(--jelly),opacity var(--jelly),box-shadow var(--jelly),background-color var(--jelly),color var(--jelly),border-color var(--jelly);
  min-height:48px;font-family:var(--font-body);transform-origin:center;position:relative;overflow:hidden;
}
.btn::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transform:translateX(-100%);transition:transform .6s ease;pointer-events:none}
.btn:hover::before{transform:translateX(100%)}
.btn-primary{background:var(--ash-gradient);color:var(--text-inverse);box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.06)}
.btn-primary:hover{transform:scale(1.05) translateY(-2px);box-shadow:var(--shadow-xl),inset 0 1px 0 rgba(255,255,255,.06)}
.btn-primary:active{transform:scale(.95) translateY(0);transition-duration:100ms;box-shadow:var(--shadow-sm)}
.btn-secondary{background:var(--pearl-100);color:var(--text-primary);border:1px solid var(--border-medium);box-shadow:var(--shadow-sm)}
.btn-secondary:hover{border-color:var(--text-primary);box-shadow:var(--shadow-md);transform:scale(1.05) translateY(-1px)}
.btn-secondary:active{transform:scale(.95) translateY(0);transition-duration:100ms;box-shadow:var(--shadow-xs)}
.btn-ghost-light{background:rgba(255,255,255,.06);color:var(--text-inverse);border:1px solid rgba(255,255,255,.16)}
.btn-ghost-light:hover{background:rgba(255,255,255,.12);transform:scale(1.05) translateY(-2px)}
.btn-ghost-light:active{transform:scale(.95);transition-duration:100ms}
.btn-lg{padding:18px 36px;font-size:1rem;min-height:56px;border-radius:var(--radius-md)}

/* ============ HERO ============ */
.hero{
  padding:var(--spacing-3xl) var(--spacing-lg) var(--spacing-2xl);
  position:relative;overflow:hidden;background:var(--pearl-gradient);
}
.hero::before{content:'';position:absolute;top:-25%;left:50%;transform:translateX(-50%);width:900px;height:900px;background:radial-gradient(circle,rgba(255,255,255,.8) 0%,transparent 70%);pointer-events:none}
.hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--border-medium),transparent)}
/* Single-axis vertical scan (no split-column Z-pattern to fight):
   with one column and no competing visual, every eye lands on the
   same center line — prehead, headline, subhead, CTA — in strict
   proximity (Gestalt) so the whole hero reads as one intentional
   unit (CRAP: alignment) instead of two competing halves. Bringhurst's
   line-length discipline caps the block at ~640px so the headline and
   subhead never run past a comfortable reading measure even on wide
   screens. */
.hero-inner{max-width:640px;margin:0 auto;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:2}
.hero-prehead{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--spacing-sm)}
.hero-badge{
  display:inline-flex;align-items:center;gap:var(--spacing-xs);background:var(--pearl-100);
  border:1px solid var(--border-light);padding:8px 18px;border-radius:100px;font-size:.75rem;font-weight:600;
  color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--spacing-md);
  box-shadow:var(--shadow-sm);animation:fadeInUp .6s ease-out;
}
.hero-badge::before{content:'';width:6px;height:6px;background:var(--ash-200);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
.hero h1{
  font-family:var(--font-display);font-size:clamp(2.4rem,4.6vw,3.85rem);font-weight:700;
  line-height:1.08;letter-spacing:-.03em;color:var(--text-primary);margin-bottom:var(--spacing-md);
  animation:fadeInUp .6s ease-out .1s both;
}
.hero h1 .highlight{color:var(--text-muted);font-style:italic;font-family:'Playfair Display',serif}
.hero-agitation{
  font-family:var(--font-display);font-size:clamp(1.15rem,2.4vw,1.55rem);font-weight:600;
  line-height:1.45;letter-spacing:-.01em;color:var(--text-secondary);max-width:600px;
  margin:0 auto var(--spacing-md);animation:fadeInUp .6s ease-out .15s both;
}
.hero-agitation .highlight{color:var(--text-primary);font-style:italic;font-family:'Playfair Display',serif}
.hero-subtitle{font-size:1.0625rem;color:var(--text-secondary);line-height:1.75;max-width:560px;margin:0 auto var(--spacing-lg);animation:fadeInUp .6s ease-out .2s both}
.hero-actions{display:flex;gap:var(--spacing-sm);flex-wrap:wrap;animation:fadeInUp .6s ease-out .3s both;align-items:center;justify-content:center}
.hero-actions-note{font-size:.75rem;color:var(--text-muted);letter-spacing:.02em}

/* ============ SECTION HEADERS ============ */
.section{padding:var(--spacing-3xl) var(--spacing-lg);position:relative}
.section-light{background:var(--pearl-gradient)}
.section-pearl{background:var(--pearl-300)}
.section-dark{background:var(--ash-gradient-deep);color:var(--text-inverse)}
.section-dark::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}
.section-header{text-align:center;max-width:720px;margin:0 auto var(--spacing-xl)}
.section-label{font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:var(--spacing-xs)}
/* Modular scale (~1.25 major third) off a 16px base: body 1rem →
   section-desc 1.0625rem → section-title steps up via clamp to
   keep the ratio intact across viewport widths rather than jumping
   arbitrarily at breakpoints. */
.section-title{font-family:var(--font-display);font-size:clamp(1.75rem,3.5vw,2.75rem);font-weight:700;letter-spacing:-.02em;color:var(--text-primary);margin-bottom:var(--spacing-sm);line-height:1.15}
.section-desc{color:var(--text-secondary);font-size:1.0625rem;line-height:1.75;max-width:62ch;margin-left:auto;margin-right:auto}
.section-dark .section-label{color:var(--text-inverse-secondary);letter-spacing:.15em;font-size:.7rem}
.section-dark .section-title{color:var(--text-inverse)}
.section-dark .section-desc{color:var(--text-inverse-secondary)}
.wrap{max-width:1280px;margin:0 auto;position:relative;z-index:2}
.wrap-narrow{max-width:900px;margin:0 auto;position:relative;z-index:2}

/* ============ VIDEO / SHOWREEL ============
   The player itself now lives in its own file (player.html) and is
   embedded here via iframe — this wrap just controls the box the
   iframe fills, so the video's own responsive behavior lives in one
   place instead of two. */
.video-frame-wrap{max-width:1100px;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-dark-lg),0 0 80px rgba(0,0,0,.3);border:1px solid var(--border-dark);position:relative;width:100%;aspect-ratio:16/10;background:#000}
.video-frame-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

@media (max-width:768px){
  /* True full-screen player on mobile — the whole section becomes the
     video, edge to edge in both directions, not just a taller card.
     Desktop keeps the framed 16:10 card above untouched; this is a
     mobile-only takeover. Dropping the section's own padding, label,
     title and description removes every competing element (Hick's
     Law: fewer choices on screen = an instant, obvious focal point;
     Krug — cut the chrome around the one thing that matters), so the
     eye has nothing to do but land on the video, the way a short-form
     vertical feed gives the clip the entire screen with no header
     fighting for attention above it. */
  #showreel{padding:0}
  .showreel-header{display:none}
  .video-frame-wrap{
    max-width:none;width:100vw;margin:0;border-radius:0;border:0;box-shadow:none;
    aspect-ratio:auto;height:100vh;height:100dvh;
  }
}

/* ============ PROCESS ============ */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-sm)}
.process-card{
  text-align:center;padding:var(--spacing-lg) var(--spacing-md);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.07);box-shadow:var(--shadow-inset-dark);transition:transform var(--jelly-soft),opacity var(--jelly-soft),box-shadow var(--jelly-soft),background-color var(--jelly-soft),color var(--jelly-soft),border-color var(--jelly-soft);position:relative;overflow:hidden;
}
.process-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
.process-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015))}
.process-num{font-family:var(--font-display);font-size:.875rem;font-weight:700;color:var(--text-inverse-secondary);letter-spacing:.16em;margin-bottom:var(--spacing-sm)}
.process-icon{width:52px;height:52px;margin:0 auto var(--spacing-sm);border-radius:var(--radius-sm);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:var(--icon-inverse);transition:transform var(--jelly-soft),opacity var(--jelly-soft),box-shadow var(--jelly-soft),background-color var(--jelly-soft),color var(--jelly-soft),border-color var(--jelly-soft)}
.process-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.process-card:hover .process-icon{transform:scale(1.08);background:rgba(255,255,255,.09);color:var(--text-inverse)}
.process-card h3{font-family:var(--font-display);font-size:1.125rem;color:var(--text-inverse);margin-bottom:6px;font-weight:700}
.process-card p{font-size:.8125rem;color:var(--text-inverse-secondary);line-height:1.6}

/* ============ OFFER STACK ============ */
.stack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md)}
.stack-card{
  background:var(--pearl-gradient-subtle);border:1px solid var(--border-light);border-radius:var(--radius-lg);
  padding:var(--spacing-lg);box-shadow:var(--shadow-md);transition:transform var(--jelly-soft),opacity var(--jelly-soft),box-shadow var(--jelly-soft),background-color var(--jelly-soft),color var(--jelly-soft),border-color var(--jelly-soft);position:relative;overflow:hidden;
}
.stack-card:hover{transform:translateY(-6px) scale(1.01);box-shadow:var(--shadow-xl);border-color:var(--border-medium)}
.stack-index{font-family:var(--font-display);font-size:.8125rem;font-weight:700;letter-spacing:.14em;color:var(--text-muted);margin-bottom:var(--spacing-sm)}
.stack-icon{width:48px;height:48px;border-radius:var(--radius-sm);background:var(--pearl-400);border:1px solid var(--border-light);display:flex;align-items:center;justify-content:center;color:var(--ash-200);margin-bottom:var(--spacing-sm);transition:transform var(--jelly-soft),opacity var(--jelly-soft),box-shadow var(--jelly-soft),background-color var(--jelly-soft),color var(--jelly-soft),border-color var(--jelly-soft);box-shadow:var(--shadow-inset)}
.stack-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.stack-card:hover .stack-icon{transform:scale(1.08) rotate(-3deg);background:var(--ash-gradient);color:var(--text-inverse);border-color:transparent}
.stack-card h3{font-family:var(--font-display);font-size:1.1875rem;font-weight:700;letter-spacing:-.01em;margin-bottom:var(--spacing-xs);line-height:1.3}
.stack-card p{font-size:.875rem;color:var(--text-secondary);line-height:1.7;margin-bottom:var(--spacing-sm)}
.stack-value{font-size:.75rem;font-weight:600;letter-spacing:.04em;color:var(--text-primary);background:var(--pearl-400);border:1px solid var(--border-light);border-radius:var(--radius-xs);padding:9px 12px;display:block;line-height:1.5}
.stack-value b{font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.625rem;display:block;color:var(--text-muted);margin-bottom:2px}

/* ============ PRICING ============ */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md);align-items:start}
.pricing-card{background:var(--pearl-gradient-subtle);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:var(--spacing-lg);position:relative;transition:transform var(--jelly-soft),opacity var(--jelly-soft),box-shadow var(--jelly-soft),background-color var(--jelly-soft),color var(--jelly-soft),border-color var(--jelly-soft);box-shadow:var(--shadow-md);display:flex;flex-direction:column}
.pricing-card:hover{transform:translateY(-6px) scale(1.01);box-shadow:var(--shadow-2xl);border-color:var(--border-medium)}
.pricing-card.featured{background:var(--ash-gradient);border-color:transparent;color:var(--text-inverse);box-shadow:var(--shadow-xl);transform:scale(1.02)}
.pricing-card.featured:hover{transform:scale(1.02) translateY(-6px);box-shadow:var(--shadow-2xl),0 0 80px rgba(0,0,0,.2)}
.pricing-card.featured::before{content:'MOST POPULAR';position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--pearl-100);color:var(--text-primary);font-size:.6875rem;font-weight:700;padding:5px 16px;border-radius:100px;letter-spacing:.06em;box-shadow:var(--shadow-sm);white-space:nowrap}
.pricing-tier{font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--spacing-xs)}
.pricing-card.featured .pricing-tier{color:var(--text-inverse-secondary)}
.pricing-name{font-family:var(--font-display);font-size:1.375rem;font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-sm)}
.pricing-card.featured .pricing-name{color:var(--text-inverse)}
.pricing-price{display:flex;align-items:baseline;gap:10px;margin-bottom:2px;flex-wrap:wrap}
.pricing-original{font-size:1.125rem;color:var(--text-muted);text-decoration:line-through}
.pricing-card.featured .pricing-original{color:var(--text-inverse-secondary)}
.pricing-amount{font-family:var(--font-display);font-size:2.75rem;font-weight:700;color:var(--text-primary);line-height:1}
.pricing-card.featured .pricing-amount{color:var(--text-inverse)}
.pricing-period{font-size:.875rem;color:var(--text-muted);margin-bottom:var(--spacing-md)}
.pricing-card.featured .pricing-period{color:var(--text-inverse-secondary)}
.pricing-features{list-style:none;margin-bottom:var(--spacing-md);flex:1}
.pricing-features li{display:flex;align-items:flex-start;gap:10px;font-size:.875rem;color:var(--text-secondary);padding:7px 0;border-bottom:1px solid var(--border-light)}
.pricing-features li:last-child{border-bottom:none}
.pricing-card.featured .pricing-features li{color:var(--text-inverse-secondary);border-color:rgba(255,255,255,.07)}
.pricing-features li svg{width:16px;height:16px;flex-shrink:0;margin-top:4px;stroke:var(--ash-200);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pricing-card.featured .pricing-features li svg{stroke:var(--pearl-100)}
.pricing-card .btn{width:100%}
.pricing-card.featured .btn-primary{background:var(--pearl-100);color:var(--text-primary);box-shadow:var(--shadow-md)}
.pricing-card.featured .btn-primary:hover{box-shadow:var(--shadow-lg)}
.pricing-footnote{text-align:center;font-size:.8125rem;color:var(--text-muted);margin-top:var(--spacing-lg)}

/* ============ GUARANTEE ============ */
.trust-banner{max-width:960px;margin:0 auto;text-align:center;padding:var(--spacing-2xl);background:var(--pearl-gradient-subtle);border:1px solid var(--border-light);border-radius:var(--radius-xl);position:relative;overflow:hidden;box-shadow:var(--shadow-xl);transition:transform var(--jelly-soft),opacity var(--jelly-soft),box-shadow var(--jelly-soft),background-color var(--jelly-soft),color var(--jelly-soft),border-color var(--jelly-soft)}
.trust-banner:hover{transform:translateY(-4px);box-shadow:var(--shadow-2xl)}
.trust-banner::before{content:'';position:absolute;top:-100px;right:-100px;width:300px;height:300px;background:radial-gradient(circle,rgba(255,255,255,.8) 0%,transparent 70%);pointer-events:none}
.shield{width:64px;height:64px;border-radius:50%;background:var(--ash-gradient);display:flex;align-items:center;justify-content:center;margin:0 auto var(--spacing-md);color:var(--text-inverse);box-shadow:var(--shadow-lg)}
.shield svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.trust-banner h2{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.25rem);color:var(--text-primary);margin-bottom:var(--spacing-sm);position:relative;line-height:1.2}
.trust-banner p{color:var(--text-secondary);font-size:1.0625rem;max-width:620px;margin:0 auto var(--spacing-sm);position:relative;line-height:1.8}
.trust-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-sm);margin:var(--spacing-lg) 0;position:relative}
.trust-step{background:var(--pearl-300);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:var(--spacing-sm);text-align:left;transition:transform var(--jelly-soft),opacity var(--jelly-soft),box-shadow var(--jelly-soft),background-color var(--jelly-soft),color var(--jelly-soft),border-color var(--jelly-soft)}
.trust-step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);background:var(--pearl-100)}
.trust-step b{display:block;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;font-weight:700}
.trust-step span{font-size:.875rem;color:var(--text-primary);font-weight:500;line-height:1.5}
.trust-highlight{display:inline-flex;align-items:center;gap:var(--spacing-xs);background:var(--ash-gradient);padding:14px 28px;border-radius:var(--radius-sm);font-weight:600;color:var(--text-inverse);font-size:.9375rem;position:relative;box-shadow:var(--shadow-lg);transition:transform var(--jelly),opacity var(--jelly),box-shadow var(--jelly),background-color var(--jelly),color var(--jelly),border-color var(--jelly)}
.trust-highlight:hover{transform:scale(1.04);box-shadow:var(--shadow-xl)}

/* ============ SCARCITY ============ */
.scarcity-card{max-width:820px;margin:0 auto;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));border:1px solid rgba(255,255,255,.09);border-radius:var(--radius-xl);padding:var(--spacing-2xl);text-align:center;box-shadow:var(--shadow-inset-dark),0 24px 64px rgba(0,0,0,.4);position:relative;overflow:hidden}
.scarcity-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
.scarcity-card h2{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.25rem);color:var(--text-inverse);margin-bottom:var(--spacing-sm);line-height:1.2}
.scarcity-card p{color:var(--text-inverse-secondary);font-size:1rem;line-height:1.8;max-width:560px;margin:0 auto var(--spacing-md)}
.capacity-bar{max-width:420px;margin:0 auto var(--spacing-md);text-align:left}
.capacity-bar-top{display:flex;justify-content:space-between;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-inverse-secondary);font-weight:600;margin-bottom:8px}
.capacity-track{height:8px;border-radius:100px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.capacity-fill{height:100%;width:78%;transform:scaleX(0);transform-origin:left;border-radius:100px;background:linear-gradient(90deg,#FAFAF8,#A0A0A0);transition:transform 1.8s cubic-bezier(.4,0,.2,1);box-shadow:0 0 16px rgba(250,250,248,.25)}
.capacity-fill.animate{transform:scaleX(1)}

/* ============ FORM ============ */
/* Every field below keeps a real <label> above its input (never
   placeholder-as-label — it disappears the moment someone types,
   and fails contrast/screen-reader checks the instant it's gone).
   Ask-if-necessary was applied too: reference link and style notes
   are explicitly optional, not required busywork. */
.contact-container{max-width:760px;margin:0 auto}
.contact-form{background:var(--pearl-gradient-subtle);border:1px solid var(--border-light);border-radius:var(--radius-xl);padding:var(--spacing-xl);box-shadow:var(--shadow-xl)}
/* Error summary — Silver's "three places" rule: title (h2 above),
   inline field message + border, and this summary list, so a
   screen-reader user isn't left guessing which of ten fields broke. */
.form-error-summary{display:none;background:#FBEAE8;border:1px solid #D98B84;border-radius:var(--radius-md);padding:16px 20px;margin-bottom:var(--spacing-md)}
.form-error-summary.show{display:block}
.form-error-summary b{display:block;font-size:.875rem;color:#8A2E26;margin-bottom:8px}
.form-error-summary ul{list-style:none;display:grid;gap:4px}
.form-error-summary a{font-size:.8125rem;color:#8A2E26;text-decoration:underline}
.form-group{margin-bottom:var(--spacing-md)}
.form-label{display:block;font-size:.8125rem;font-weight:600;color:var(--text-primary);margin-bottom:6px;letter-spacing:.02em}
.form-label .optional{color:var(--text-muted);font-weight:400}
.field-error{display:none;font-size:.75rem;color:#B0342C;margin-top:6px;font-weight:500}
.field-error.show{display:block}
.form-input,.form-select,.form-textarea{
  width:100%;padding:12px 16px;background:var(--pearl-100);border:1px solid var(--border-medium);
  border-radius:var(--radius-sm);color:var(--text-primary);font-size:.9375rem;font-family:var(--font-body);
  transition:transform var(--jelly),opacity var(--jelly),box-shadow var(--jelly),background-color var(--jelly),color var(--jelly),border-color var(--jelly);min-height:48px;box-shadow:var(--shadow-xs),var(--shadow-inset);
}
.form-input[aria-invalid="true"],.form-select[aria-invalid="true"],.form-textarea[aria-invalid="true"]{border-color:#B0342C;box-shadow:0 0 0 1px #B0342C}
.form-textarea{min-height:112px;resize:vertical;line-height:1.6}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--ash-200);box-shadow:0 0 0 3px rgba(45,45,45,.08),var(--shadow-sm);background:var(--pearl-100);transform:scale(1.01)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text-muted)}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:48px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-sm)}
.form-divider{display:flex;align-items:center;gap:var(--spacing-sm);margin:var(--spacing-lg) 0 var(--spacing-md)}
.form-divider span{font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.form-divider::before,.form-divider::after{content:'';flex:1;height:1px;background:var(--border-medium)}
.form-submit{width:100%;margin-top:var(--spacing-sm)}
.form-note{text-align:center;font-size:.75rem;color:var(--text-muted);margin-top:var(--spacing-sm);line-height:1.6}
.form-success{display:none;text-align:center;padding:var(--spacing-xl);background:var(--pearl-gradient-subtle);border:1px solid var(--border-light);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl)}
.form-success.show{display:block;animation:jellyIn .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes jellyIn{0%{opacity:0;transform:scale(.85)}60%{transform:scale(1.03)}100%{opacity:1;transform:scale(1)}}
.form-success-icon{width:64px;height:64px;border-radius:50%;background:var(--ash-gradient);display:flex;align-items:center;justify-content:center;margin:0 auto var(--spacing-sm);color:var(--text-inverse);box-shadow:var(--shadow-lg)}
.form-success-icon svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.form-success h3{font-family:var(--font-display);font-size:1.75rem;color:var(--text-primary);margin-bottom:var(--spacing-xs)}
.form-success>p{color:var(--text-secondary);margin-bottom:var(--spacing-lg)}
.next-steps{text-align:left;display:grid;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}
.next-step{display:flex;gap:var(--spacing-sm);align-items:flex-start;background:var(--pearl-300);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:var(--spacing-sm);transition:transform var(--jelly-soft),opacity var(--jelly-soft),box-shadow var(--jelly-soft),background-color var(--jelly-soft),color var(--jelly-soft),border-color var(--jelly-soft)}
.next-step:hover{transform:translateX(6px);box-shadow:var(--shadow-md);background:var(--pearl-100)}
.next-step-num{width:30px;height:30px;flex-shrink:0;border-radius:50%;background:var(--ash-gradient);color:var(--text-inverse);font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.next-step b{display:block;font-size:.9375rem;color:var(--text-primary);margin-bottom:2px}
.next-step span{font-size:.8125rem;color:var(--text-secondary);line-height:1.6}

/* ============ TERMS ============ */
.terms-card{max-width:900px;margin:0 auto;background:var(--pearl-gradient-subtle);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-md)}
.terms-card h3{font-family:var(--font-display);font-size:1.25rem;margin-bottom:var(--spacing-sm);color:var(--text-primary)}
.terms-list{list-style:none;display:grid;gap:10px}
.terms-list li{display:flex;gap:10px;font-size:.875rem;color:var(--text-secondary);line-height:1.65}
.terms-list li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--text-muted);flex-shrink:0;margin-top:9px}

/* ============ FINAL CTA ============ */
.final-cta{text-align:center;max-width:760px;margin:0 auto}
.final-cta h2{font-family:var(--font-display);font-size:clamp(1.85rem,3.6vw,2.9rem);color:var(--text-inverse);line-height:1.15;letter-spacing:-.02em;margin-bottom:var(--spacing-sm)}
.final-cta p{color:var(--text-inverse-secondary);font-size:1.0625rem;line-height:1.8;margin-bottom:var(--spacing-lg)}
.final-cta .btn-primary{background:var(--pearl-100);color:var(--text-primary)}
.final-cta .btn-primary:hover{box-shadow:var(--shadow-xl)}
.final-cta-sub{margin-top:var(--spacing-sm);font-size:.75rem;color:var(--text-inverse-secondary);letter-spacing:.08em;text-transform:uppercase;font-weight:600}

/* ============ FOOTER ============ */
.footer{padding:var(--spacing-xl) var(--spacing-lg);background:var(--ash-gradient-deep);border-top:1px solid var(--border-dark);text-align:center}
.footer-logo{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--text-inverse);margin-bottom:var(--spacing-xs)}
.footer-logo span{color:var(--text-inverse-secondary);font-weight:400}
.footer p{font-size:.8125rem;color:var(--text-inverse-secondary);line-height:1.7}
.footer a{color:var(--text-inverse-secondary);text-decoration:none;border-bottom:1px solid var(--border-dark-medium);transition:color var(--transition-fast)}
.footer a:hover{color:var(--text-inverse)}
.footer-links{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap;margin-bottom:var(--spacing-sm);font-size:.8125rem}
.footer-links a{border-bottom:none;color:var(--text-inverse-secondary)}
.footer-links a:hover{color:var(--text-inverse)}

/* ============ STICKY MOBILE CTA ============ */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:900;padding:12px var(--spacing-sm);
  background:rgba(253,252,250,.92);
  border-top:1px solid var(--border-light);box-shadow:0 -8px 24px rgba(0,0,0,.08);
  display:none;align-items:center;justify-content:space-between;gap:var(--spacing-sm);
  transform:translateY(110%);transition:transform var(--transition-smooth);
}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta-text b{display:block;font-size:.8125rem;color:var(--text-primary);font-weight:700;line-height:1.3}
.sticky-cta-text span{font-size:.6875rem;color:var(--text-muted)}
.sticky-cta .btn{padding:12px 18px;font-size:.8125rem;min-height:44px;white-space:nowrap}

/* ============ ANIMATIONS ============ */
/* Duration standard (Saffer): micro-interactions land in the
   200–300ms band — long enough to register as a response, short
   enough not to feel sluggish. Ease-out/jelly curves mimic natural
   deceleration rather than robotic linear motion. */
@keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.fade-in{opacity:0;transform:translateY(24px);transition:transform .7s cubic-bezier(.4,0,.2,1),opacity .7s cubic-bezier(.4,0,.2,1),box-shadow .7s cubic-bezier(.4,0,.2,1),background-color .7s cubic-bezier(.4,0,.2,1),color .7s cubic-bezier(.4,0,.2,1),border-color .7s cubic-bezier(.4,0,.2,1)}
.fade-in.visible{opacity:1;transform:translateY(0)}
.stagger-children .fade-in:nth-child(1){transition-delay:0ms}
.stagger-children .fade-in:nth-child(2){transition-delay:90ms}
.stagger-children .fade-in:nth-child(3){transition-delay:180ms}
.stagger-children .fade-in:nth-child(4){transition-delay:270ms}
.stagger-children .fade-in:nth-child(5){transition-delay:360ms}
.stagger-children .fade-in:nth-child(6){transition-delay:450ms}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .fade-in{opacity:1;transform:none}
}

/* ============ FULL-SCREEN SECTIONS (all breakpoints) ============
   Each top-level section fills at least one full screen, like
   Apple's product pages — scrolling moves through discrete "screens"
   instead of a continuous column. --nav-h is the sticky nav's real
   rendered height (measured per breakpoint, not guessed) so each
   section plus the nav together always add up to exactly one
   viewport: the nav is `position:sticky`, so once you've scrolled
   past the hero it sits pinned over the top of every section, and
   without this correction that strip would permanently eat into
   each "full screen" section instead of being accounted for. The
   nav's own height changes across breakpoints (it wraps to two rows
   in the ~769–1024px band before the hamburger menu takes over at
   768px, then shrinks again on phones), so --nav-h is set three
   times to match. Sections still use min-height, not a fixed height:
   a section with more content than one screen (Pricing's three full
   cards, the application form) is left free to grow taller rather
   than clipping or squeezing text unreadably small — "at least one
   screen," not "exactly one screen." */
:root{--nav-h:71px}
@media (max-width:1024px){ :root{--nav-h:103px} }
@media (max-width:768px){ :root{--nav-h:65px} }
.hero,.section{
  min-height:calc(100vh - var(--nav-h));
  min-height:calc(100dvh - var(--nav-h));
  display:flex;flex-direction:column;justify-content:center;
  box-sizing:border-box;
}
/* The showreel section already achieves true full-bleed edge-to-edge
   video on mobile through its own child (.video-frame-wrap is forced
   to height:100dvh with #showreel{padding:0}) — that was purpose-
   built and verified separately for the mobile player. Centering it
   again at the section level here would fight that, so it opts back
   out of the generic treatment below 769px and keeps its own rules. */
@media (max-width:768px){
  #showreel{min-height:0;display:block}
}

/* ============ LARGE-DESKTOP SCALING ============
   Everything above was tuned against a ~1280px canvas, so on wider
   monitors (1440px+, and the 1800px+ range common on modern laptops/
   external displays) the page stayed pinned at that size and read as
   a small island of content adrift in empty margin — the opposite of
   Müller-Brockmann's grid-systems principle, where the grid's
   proportions are meant to scale with the format, not stay fixed
   regardless of it (Grid Systems in Graphic Design, 1981). The fix
   below raises the container widths, the hero/type scale ceilings,
   and the 8pt spacing rhythm in two calibrated steps rather than
   letting anything grow unbounded: paragraph copy (.prose p,
   .section-desc, .hero-subtitle) keeps its ch-based cap so line
   length stays in Bringhurst's readable 45–75-character band, while
   structural elements — the page wrap, hero column, headline size,
   section rhythm — scale up so the composition feels proportionate
   to the screen it's actually being viewed on. */
@media (min-width:1440px){
  .nav-inner,.wrap{max-width:1440px}
  .wrap-narrow{max-width:960px}
  .hero-inner{max-width:720px}
  .hero h1{font-size:clamp(2.4rem,4.2vw,4.35rem)}
  .hero-subtitle{max-width:600px}
  .video-frame-wrap{max-width:1200px}
  .section-header{max-width:780px}
  .section-title{font-size:clamp(1.75rem,3.1vw,3.1rem)}
  :root{--spacing-3xl:112px;--spacing-2xl:72px}
}
@media (min-width:1800px){
  .nav-inner,.wrap{max-width:1600px}
  .wrap-narrow{max-width:1040px}
  .hero-inner{max-width:800px}
  .hero h1{font-size:clamp(2.4rem,3.8vw,4.85rem)}
  .video-frame-wrap{max-width:1320px}
  .section-header{max-width:840px}
  .section-title{font-size:clamp(1.75rem,2.8vw,3.4rem)}
  :root{--spacing-3xl:128px;--spacing-2xl:80px}
}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .stack-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}
  .pricing-card.featured{transform:scale(1)}
  .pricing-card.featured:hover{transform:translateY(-6px) scale(1.01)}
}
@media (max-width:768px){
  :root{--spacing-3xl:64px}
  .nav{padding:12px var(--spacing-sm)}
  .nav-links{display:none}
  .mobile-menu-btn{display:block}
  .nav-links.active{
    display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    background:var(--pearl-100);border-bottom:1px solid var(--border-light);padding:var(--spacing-md);
    gap:var(--spacing-sm);box-shadow:var(--shadow-lg);align-items:stretch;
  }
  /* The dropdown row LOOKS full-width (the <li> stretches), but an
     <a> is inline by default, so its actual tap zone was only ever
     the word itself — a mismatch between what looks tappable and
     what is (breaks Norman's mapping: the visible affordance promised
     more than the hit target delivered). display:block lets the link
     fill its row, and the extra vertical padding brings every item up
     to a real ~46px touch target (iOS's 44px minimum, non-negotiable). */
  .nav-links.active a{display:block;text-align:center;padding:12px 8px}
  .nav-cta{margin-top:4px}
  .section{padding:var(--spacing-2xl) var(--spacing-sm)}
  .hero{padding:var(--spacing-2xl) var(--spacing-sm) var(--spacing-xl)}
  /* The headline's clamp() floor (2.4rem = 38.4px) was sized for
     desktop's wider canvas; on a 375px screen it forces this specific
     14-word headline to 4 lines, eating most of the first screen
     before the eye even reaches the subhead or CTA (Krug: the fold
     should sell the offer, not just the headline). Sized down to fit
     ~3 lines and tightened tracking/line-height stays legible at
     15–20 characters/line (below Bringhurst's 45ch minimum, but
     unavoidable at display sizes — the display font's tall x-height
     keeps it readable regardless). */
  .hero h1{font-size:clamp(1.85rem,7.8vw,2.35rem);line-height:1.15;letter-spacing:-.02em}
  .hero-prehead{font-size:.6875rem;letter-spacing:.12em}
  .hero-badge{font-size:.6875rem;padding:7px 14px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .hero-actions-note{text-align:center}
  .team-cta{width:100%}
  .form-row{grid-template-columns:1fr}
  .contact-form{padding:var(--spacing-md)}
  .trust-banner,.scarcity-card{padding:var(--spacing-lg)}
  .trust-steps{grid-template-columns:1fr}
  .process-grid,.stack-grid{grid-template-columns:1fr}
  .sticky-cta{display:flex}
  body{padding-bottom:70px}
  .footer{padding-bottom:var(--spacing-xl)}
}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--pearl-400)}
::-webkit-scrollbar-thumb{background:var(--ash-100);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--ash-200)}

/* ===== STICKY BAR: ALL SCREENS + WHATSAPP + FAST LANE ===== */
.sticky-cta{display:flex!important;transform:none!important;align-items:center;justify-content:space-between;gap:12px;padding:10px max(16px,calc((100vw - 1160px)/2));padding-bottom:calc(10px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(42,42,46,.94),rgba(10,10,11,.97));border-top:1px solid rgba(255,255,255,.12);box-shadow:0 -10px 30px rgba(0,0,0,.35)}
.sticky-cta-text b{display:flex;align-items:center;gap:8px;color:#fff;font-size:.9375rem;font-weight:700;line-height:1.3}
.sticky-cta-text span{display:block;color:#B8B8BE;font-size:.75rem}
.sticky-cta .fl-dot{width:8px;height:8px;border-radius:50%;background:#25D366;box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:flPulse 2s infinite}
@keyframes flPulse{70%{box-shadow:0 0 0 8px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.sticky-cta-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.sticky-cta .btn{min-height:44px;white-space:nowrap}
.sticky-cta .btn-wa{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;font-size:.8125rem;font-weight:700;text-decoration:none;color:#fff;background:linear-gradient(180deg,#34E07A,#1DA851);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 8px 18px -8px rgba(37,211,102,.7)}
.sticky-cta .btn-wa[hidden]{display:none}
.sticky-cta .btn-primary{background:linear-gradient(180deg,#FFFFFF,#D9D9DD);color:#0A0A0B;border:1px solid rgba(255,255,255,.7);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 18px -8px rgba(255,255,255,.3)}
body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
@media (max-width:480px){.sticky-cta-text span{display:none}.sticky-cta-text b{font-size:.8125rem}.sticky-cta .btn{padding:11px 14px}}
@media (prefers-reduced-motion:reduce){.sticky-cta .fl-dot{animation:none}}


/* Embossed candy section borders: raised rounded frame in each section's own tone */
section.section{margin:14px 14px;border-radius:40px;border:8px solid transparent;background-clip:padding-box;position:relative}
section.section::after{content:'';position:absolute;inset:-8px;border-radius:40px;pointer-events:none;z-index:2}
section.section-light::after,section.section-pearl::after{border:8px solid;border-color:#ffffff #e2dcd1 #cfc8bb #ffffff;box-shadow:inset 0 2px 3px rgba(255,255,255,.95),inset 0 -3px 4px rgba(120,108,90,.28),inset 3px 0 3px rgba(255,255,255,.7),inset -3px 0 4px rgba(120,108,90,.18),0 8px 18px rgba(90,80,65,.22),0 2px 0 rgba(255,255,255,.9)}
section.section-dark::after{border:8px solid;border-color:#5a5a61 #2a2a2e #0b0b0c #48484e;box-shadow:inset 0 2px 3px rgba(255,255,255,.35),inset 0 -3px 5px rgba(0,0,0,.9),inset 3px 0 3px rgba(255,255,255,.12),inset -3px 0 5px rgba(0,0,0,.6),0 10px 22px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.4)}
@media (max-width:600px){section.section{margin:8px 8px;border-radius:26px;border-width:6px}section.section::after{inset:-6px;border-radius:26px;border-width:6px}}

/* PHONES: sections stay at least one screen tall (see the layout system in
   mono.css), but text keeps a readable size; nothing is shrunk to fit. */
@media (max-width:600px){
  #top{min-height:100svh}
  /* Offer: 2x2 grid of steps */
  #offer .process-grid{display:grid !important;grid-template-columns:1fr 1fr;gap:12px}
  #offer .process-card{padding:18px 14px;min-height:0}
  #offer .process-icon{width:40px;height:40px;margin-bottom:10px}
  #offer .process-card h3{font-size:1rem;margin:4px 0 6px}
  #offer .process-card p{font-size:.875rem;line-height:1.45}
  /* Pricing: swipe row of cards */
  #pricing .pricing-grid{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(-1 * var(--gutter));padding:6px var(--gutter) 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #pricing .pricing-grid::-webkit-scrollbar{display:none}
  #pricing .pricing-card{flex:0 0 84%;scroll-snap-align:center;transform:none !important;min-width:0}
  /* Form: 16px inputs stop iOS from zooming in */
  #apply input,#apply select,#apply textarea{font-size:16px}
  #showreel .video-frame-wrap{height:calc(100svh - 40px);width:100%;max-width:100%}
  #showreel .video-frame-wrap iframe{height:100%}
}

/* ===== FAQ ===== */
.faq-list{display:grid;gap:12px}
.faq-item{background:var(--bg-primary,#fff);border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:0 22px}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 28px 18px 0;font-weight:600;color:var(--text-primary);position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.3rem;color:var(--text-muted)}
.faq-item[open] summary::after{content:'−'}
.faq-item summary:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}
.faq-item p{padding:0 0 18px;color:var(--text-secondary);line-height:1.65}
.faq-cta{text-align:center;margin-top:28px}

/* ===== Ticker pause control (WCAG 2.2.2) ===== */
.ticker{position:relative}
.ticker:hover .ticker-track,.ticker.is-paused .ticker-track{animation-play-state:paused}
.ticker-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);z-index:2;width:28px;height:28px;border-radius:999px;border:0;
  background:var(--bg,#ECECEA);color:var(--ink,#0A0A0B);font-size:10px;line-height:1;cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.ticker-toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.ticker-toggle{display:none}}
[tabindex="-1"]:focus{outline:none}

/* ===== WhatsApp secondary links (form, FAQ) ===== */
.wa-alt{text-align:center;margin-top:16px;font-size:.9375rem;color:var(--text-secondary)}
.wa-alt a{color:var(--text-primary);font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.wa-alt a{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}
.wa-alt a svg{display:inline-block;flex:none;margin:0!important}
.wa-alt a:hover{text-decoration-thickness:2px}
.wa-alt a:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}

/* ===== Cookie consent (European visitors only) ===== */
.consent{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:1200;
  width:min(560px,calc(100% - 32px));display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:14px 16px;border-radius:18px;
  background:#0a0a0b;color:#f4f4f2;box-shadow:0 12px 32px rgba(0,0,0,.35);font-size:.875rem;line-height:1.45}
.consent p{flex:1 1 260px;margin:0}
.consent a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.consent-actions{display:flex;gap:8px;margin-left:auto}
.consent-btn{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:transparent;color:inherit;font:600 .875rem/1 inherit;cursor:pointer}
.consent-btn.is-primary{background:#f4f4f2;color:#0a0a0b;border-color:#f4f4f2}
.consent-btn:focus-visible,.consent a:focus-visible{outline:2px solid #f4f4f2;outline-offset:2px}

.faq-item p a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}
}