/* =====================================================================
   PlaySuper — sitewide polish layer (single source of truth)
   ---------------------------------------------------------------------
   This file is the authoritative styling layer applied AFTER every
   page's inline <style> block. It contains:
     - Part A critical fixes (HUD removal, overflow, dropdown a11y,
       headline wrap, architecture gap)
     - Tier 1 baseline polish (hero typography, hero stats, section
       padding, buttons, marquee, grain texture)
     - Tier 2 deeper polish (type tokens, architecture, screenshot
       shadows, calculator card, case study pills, brand cards, nav
       frosted glass + dropdowns)
     - Tier 3 final polish (footer hierarchy, colour tokens, motion
       system, modal overlay)
   No copy / DOM changes are made by this file. Behaviour and content
   stay intact; only styling, layout and motion are touched.
   ===================================================================== */


/* ─────────────────────────────────────────────────────────────────────
   0.  DESIGN TOKENS — unified across every page
   ───────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────
   0.0  SEMANTIC BACKGROUND COLOUR TOKENS — canonical design system.
        Every background-color in the codebase should reference one of
        these tokens. Per-page inline `<style>` blocks define legacy
        tokens (`--bg`, `--bg-card`, `--brand`, etc.) on `:root` at
        load time; the second :root block below re-maps those legacy
        names to the canonical tokens so the entire colour cascade
        flips with zero per-page edits.
   ───────────────────────────────────────────────────────────────────── */
:root{
  /* Primary backgrounds. */
  --bg-primary:                 #ffffff;
  --bg-primary-hover:           #fafafa;
  --bg-primary-hover-brand:     #f0e9fb;

  /* Secondary backgrounds. */
  --bg-secondary:               #fafafa;
  --bg-secondary-hover:         #f5f5f5;

  /* Tertiary backgrounds. */
  --bg-tertiary:                #f5f5f5;
  --bg-tertiary-hover:          #eeeeee;

  /* Brand backgrounds. */
  --bg-brand:                   #6a28db;
  --bg-brand-hover:             #5823b2;
  --bg-brand-secondary:         #f0e9fb;
  --bg-brand-secondary-hover:   #dac9f6;

  /* Positive / success backgrounds. */
  --bg-positive:                #008a18;
  --bg-positive-hover:          #037116;
  --bg-positive-secondary:      #e5f3e8;

  /* Disabled backgrounds. */
  --bg-disabled:                #f5f5f5;
  --bg-disabled-secondary:      #eeeeee;

  /* Neutral black. */
  --bg-black:                   #0e0e0e;
}

/* ─────────────────────────────────────────────────────────────────────
   0.1  LEGACY → CANONICAL TOKEN RE-MAP
        These rules override the per-page legacy tokens so every
        existing `var(--bg)`, `var(--bg-card)`, `var(--brand)`, etc.
        resolves to a canonical design system token.  Loaded AFTER
        each page's inline `<style>` block in the cascade, so it
        always wins.  Any future per-page edit that references one of
        these legacy names also picks up the canonical colour.
   ───────────────────────────────────────────────────────────────────── */
:root{
  --bg:        var(--bg-primary)         !important;
  --bg-s:      var(--bg-secondary)       !important;
  --bg-r:      var(--bg-tertiary)        !important;
  --bg-card:   var(--bg-primary)         !important;
  --brand:     var(--bg-brand)           !important;
  --brand-2:   var(--bg-brand-hover)     !important;
  --brand-bg:  var(--bg-brand-secondary) !important;
  --ok:        var(--bg-positive)        !important;
}

:root{
  /* Type scale, Tier 2 / Item 5. */
  --t-display: clamp(40px, 5vw,   64px);
  --t-h1:      clamp(38px, 4.6vw, 60px);
  --t-h2:      clamp(32px, 4vw,   56px);
  --t-h3:      clamp(22px, 1.8vw, 30px);
  --t-h4:      clamp(18px, 1.4vw, 22px);
  --t-lead:    clamp(17px, 1.2vw, 20px);
  --t-body:    16px;
  --t-small:   13px;

  /* Spacing scale. */
  --space-section: 160px;
  --space-section-mobile: 96px;
  --space-gutter: 32px;
  --space-gutter-mobile: 20px;

  /* Motion system, Tier 3 / Item 17. */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.4, 1);
  --ease-snap:   cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: .18s;
  --dur-med:  .28s;
  --dur-slow: .48s;

  /* Elevation tokens. */
  --shadow-1: 0 1px 2px rgba(20,14,38,.04), 0 1px 1px rgba(20,14,38,.03);
  --shadow-2: 0 4px 14px -4px rgba(20,14,38,.08), 0 2px 6px -2px rgba(20,14,38,.04);
  --shadow-3: 0 14px 36px -12px rgba(20,14,38,.14), 0 6px 14px -6px rgba(20,14,38,.06);
  --shadow-4: 0 30px 70px -20px rgba(20,14,38,.22), 0 12px 28px -10px rgba(20,14,38,.10);
  --shadow-brand: 0 14px 32px -12px rgba(106,40,219,.40);

  /* Radius scale. */
  --rad-sm: 8px;
  --rad-md: 12px;
  --rad-lg: 16px;
  --rad-xl: 22px;
}


/* ─────────────────────────────────────────────────────────────────────
   1.  PART A — CRITICAL FIXES
   ───────────────────────────────────────────────────────────────────── */

/* 1.1  Sitewide overflow primitives — kill horizontal scroll anywhere.
   Using `overflow-x: clip` (not `hidden`) so `position: sticky`
   descendants (e.g. the architecture stage) keep working.  `hidden`
   creates an implicit scroll container which breaks sticky pinning. */
html, body{
  overflow-x: clip !important;
  max-width:100vw;
}
/* Sticky-nav-aware in-page scroll: anchor jumps land 88px below the
   top of the viewport so the 72px sticky nav never covers the section
   header.  `scroll-behavior: smooth` makes cross-section anchor clicks
   animate cleanly across all pages. */
html{
  scroll-padding-top: 88px;
  scroll-behavior: smooth;
}
section, header, footer, main, .container{
  max-width:100%;
}
img, video, iframe, svg{ max-width:100%; }

/* 1.2  HUD / telemetry removal — kill on every viewport.
   The Emergent badge is forced via inline `display: inline-flex !important`,
   which beats any external `display: none`. So we suppress it with
   non-conflicting properties (visibility / opacity / pointer-events /
   off-screen position) which the inline style never sets. */
#emergent-badge,
a[href*="emergent-badge"]{
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: fixed !important;
  left: -9999px !important;
  top: -9999px !important;
  right: auto !important;
  bottom: auto !important;
}
.page-stamp,
.status-panel,
.enter-toast,
.cursor-coords,
.boot-scan,
.section-index,
.section-nav,
.ticker-bar,
.fig-ref,
.fig-divider,
.fig-label,
.fig-tag,
.fig-marker,
.section-marker,
.section-label,
.section-divider,
.figure-label,
.figure-tag,
.dev-overlay,
.dev-hud,
.hud-meta,
.brand-tape,
.brand-tape-row,
.sn-pinned,
.global-toast{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* 1.3  Headline wrap — let the structural <span class="hw-bridge">
       force line 2 of the hero h1 naturally. Only constrain section
       h2 widths so they read tidily. */
.fm-head h2, .fm-head .h2,
.section-head h2, .section-head .h2{
  text-wrap: balance;
  max-width: 22ch;
  margin-inline:auto;
}
.fm-head h2, .fm-head .h2{ max-width: 24ch; }
.hero .lead, .hero p.lead{
  text-wrap: pretty;
}

/* 1.4  Dropdown accessibility — work on hover (desktop), tap (mobile),
       focus (keyboard).  We KEEP a visual gap of ~6px between trigger
       and menu, and use an always-on transparent bridge inside
       `.nav-dd` to maintain the hover state when the cursor crosses
       the gap. */
.nav-dd{ position:relative; }
.nav-dd-trigger{
  cursor:pointer;
  min-height:40px;
  outline:none;
}
.nav-dd-trigger:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}
.nav-dd-menu{
  position:absolute;
  top: calc(100% + 6px) !important;
  left:0;
  margin-top:0 !important;
}
/* Always-on invisible bridge — fills the 6px visual gap so the
   mouse never leaves `.nav-dd` while travelling to the menu. */
.nav-dd::after{
  content:'';
  position:absolute;
  left:-4px; right:-4px;
  top:100%;
  height:10px;
  pointer-events:auto;
  z-index:98;
  background:transparent;
}
/* Hover/focus/open states open the menu. */
.nav-dd:hover .nav-dd-menu,
.nav-dd:focus-within .nav-dd-menu,
.nav-dd.is-open .nav-dd-menu{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) !important;
  pointer-events:auto !important;
  transition: opacity .18s var(--ease-out), transform .22s var(--ease-out), visibility 0s !important;
}

/* 1.5  Architecture pin section — original inline CSS already
       implements sticky behaviour (height:240vh on parent, sticky
       stage). The trailing dead-scroll is fixed below in section 2.4
       by tightening section height and zeroing block padding. */


/* ============================================================
   1.6  HERO 100vh CONTAINMENT — APPLIES TO STUDIO + BRAND PAGES
   ------------------------------------------------------------
   Both heroes (studio + brand) are pinned to exactly 100vh,
   overflow-hidden, with every direct child horizontally centred.
   Background (perspective grid floor + box grid + particle dots)
   stays fully visible because we kill the bleaching `.hero-blob`
   layer and tighten the foreground spacing. The next section
   starts cleanly the moment the user scrolls past the viewport.
   ============================================================ */

/* Kill the washy purple/lime blobs that bleach out the grid. */
.hero-mesh .hero-blob{ display: none !important; }

/* Box grid stretches across the entire hero width (no centred mask). */
header.hero .hero-grid{
  opacity: .55 !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%) !important;
          mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%) !important;
  background-size: 64px 64px !important;
}
/* Perspective floor reads as a clear "horizon" at the hero's bottom. */
header.hero .hero-floor{
  bottom: -40px !important;
  height: 460px !important;
  opacity: .9 !important;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.8) 55%, transparent 100%) !important;
          mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.8) 55%, transparent 100%) !important;
  background-image:
    linear-gradient(rgba(106,40,219,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(106,40,219,.22) 1px, transparent 1px) !important;
}

/* Outer hero — fill the viewport exactly, no taller, no shorter.
   Content is TOP-aligned (not vertically centred) so the eyebrow
   sits right below the navbar with a tight 32px gap. */
header.hero{
  min-height: 100vh !important;
  max-height: 100vh !important;
  height: 100vh !important;
  overflow: hidden !important;
  padding: 32px 0 40px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

/* About / simple hero — when there's no brand-strip or stat row below
   the copy block, the hero is a NARRATIVE-page intro. It shrinks to
   content height (NOT 100vh) so the next section flows naturally
   below with tight rhythm. Padding-top clears the 72px sticky nav
   with breathing room; padding-bottom gives 96px to the next section. */
header.hero:not(:has(.hero-brand-strip)):not(:has(.hero-22)):not(:has(.hero-stats)){
  min-height: auto !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  justify-content: flex-start !important;
  padding-top: 140px !important;
  padding-bottom: 96px !important;
}
@media (max-width: 768px){
  header.hero:not(:has(.hero-brand-strip)):not(:has(.hero-22)):not(:has(.hero-stats)){
    padding-top: 120px !important;
    padding-bottom: 72px !important;
  }
}

/* The inner container becomes a centred flex column. Children sit
   centred on the horizontal axis with tight vertical rhythm. */
header.hero > .container.hero-inner{
  flex: 0 0 auto;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  gap: 0;
  width: 100%;
}

/* On the studio page the hero copy is wrapped in a 2-col grid layout
   (`.hero-grid-layout > .hero-l`). Flatten it to a single centred
   column so the headline / lead / CTAs match the other heroes. */
header.hero .hero-grid-layout{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100%;
}
header.hero .hero-grid-layout > .hero-l{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  max-width: 1180px;
  width: 100%;
}

/* ----- Eyebrow ----- */
header.hero .hero-eyebrow,
header.hero > .container.hero-inner > .eyebrow{
  margin: 0 0 16px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* ----- Headline — fits in EXACTLY 2 lines on desktop ----- */
header.hero h1, header.hero .h1{
  font-size: clamp(32px, 3.8vw, 52px) !important;
  line-height: 1.08 !important;
  margin: 0 0 16px !important;
  max-width: 1180px;
  width: 100%;
  text-align: center !important;
  text-wrap: balance;
  letter-spacing: -.025em !important;
}

/* ----- Lead -----
   `#heroLead` is a single ~127-char marketing sentence that the team
   wants rendered on ONE line on desktop. We do that by lifting its
   max-width cap and letting it occupy whatever room the hero gives.
   On viewports too narrow to fit it on one line (≤980px), we revert
   to normal wrapping so it stays readable on tablet/mobile. */
header.hero .lead{
  font-size: clamp(14.5px, 1vw, 16px) !important;
  line-height: 1.5 !important;
  margin: 0 0 28px !important;
  max-width: 640px;
  text-align: center !important;
}
header.hero p.lead#heroLead{
  max-width: none !important;
  white-space: nowrap;
  /* Break out of the offset grid cell parent so the line centres
     against the viewport, not the grid's left-shifted column. We
     give it 100vw width anchored at the page's left edge (via
     negative margin) and text-align:center handles the inline
     centring of the actual sentence. */
  display: block !important;
  width: 100vw !important;
  position: relative !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  text-align: center !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}
@media (max-width: 980px){
  header.hero p.lead#heroLead{
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: normal;
    max-width: 640px !important;
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ----- CTAs centred as a pair ----- */
header.hero .hero-ctas{
  display: flex !important;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center !important;
  margin: 0 0 40px !important;
}

/* ----- Stats row (studio page) ----- */
header.hero .hero-stats{
  display: flex !important;
  flex-wrap: nowrap;
  gap: 0 !important;
  justify-content: center !important;
  align-items: center;
  width: auto !important;
  max-width: 100%;
  margin: 0 0 32px !important;
  padding: 0 !important;
}
header.hero .hero-stat{ padding: 4px 18px !important; text-align: center; }
header.hero .hero-stat .hs-num{ font-size: clamp(18px, 1.6vw, 22px) !important; }
header.hero .hero-stat .hs-tag{ font-size: 10px !important; }
header.hero .hero-stat .hs-lbl{ font-size: 10.5px !important; }

/* ----- Game thumbnails row (studio page) ----- */
header.hero .hero-games{ margin: 0 0 24px !important; width: 100%; text-align: center; }
header.hero .hg-label{
  font-size: 10px !important;
  letter-spacing: .14em;
  margin: 0 0 10px !important;
  text-align: center !important;
}
header.hero .hg-row{
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: center !important;
  gap: clamp(14px, 1.6vw, 26px) !important;
}
header.hero .hg-tile{ text-align: center; }
header.hero .hg-icon{
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px;
}
header.hero .hg-icon img{ width: 100%; height: 100%; object-fit: cover; }
header.hero .hg-name{
  font-size: 10.5px !important;
  margin-top: 6px !important;
  letter-spacing: 0;
}

/* ----- 22 studios marquee (studio page) — larger, more readable ----- */
header.hero .hero-22{ margin: 0 !important; width: 100%; }
header.hero .h22-label{
  font-size: 11px !important;
  text-align: center !important;
  margin: 0 0 14px !important;
  letter-spacing: .12em;
}
header.hero .h22-marquee{ max-height: 132px; padding-bottom: 8px !important; }
header.hero .h22-track{ gap: 22px !important; align-items: flex-start; }
header.hero .h22-tile{ padding: 0 !important; min-width: auto !important; }
header.hero .h22-tile-icon{
  height: 78px !important;
  min-width: 150px !important;
  background: #fff !important;
  border: 1px solid rgba(20,14,38,.06) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(20,14,38,.04), 0 4px 12px -4px rgba(20,14,38,.06) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 10px 22px !important;
}
header.hero .h22-tile-icon img{
  height: 54px !important;
  max-width: 140px;
  width: auto;
  object-fit: contain;
  filter: none !important;
  opacity: 1 !important;
}
/* Studio names visible under each tile (legibility win on mobile). */
header.hero .h22-tile-name{
  display: block !important;
  font-family: var(--fb) !important;
  font-weight: 500 !important;
  font-size: 11.5px !important;
  letter-spacing: .02em !important;
  color: var(--t2) !important;
  text-align: center !important;
  line-height: 1.25 !important;
  margin-top: 10px !important;
  max-width: 150px !important;
  white-space: normal !important;
}

/* ----- Brand-strip (brand page) — two prominent rows ----- */
header.hero .hero-brand-strip{
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  text-align: center;
  flex: 0 0 auto;
}
header.hero .hero-brand-strip *{ text-align: center; }
header.hero .hero-brand-strip .bn-marquee-wrap{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
header.hero .hero-brand-strip .bn-marquee{ height: 88px !important; }
header.hero .hero-brand-strip .bn-track{ gap: 18px !important; align-items: center; }
header.hero .hero-brand-strip .bn-logo{
  width: 110px !important;
  height: 80px !important;
  padding: 10px !important;
  background: #fff !important;
  border: 1px solid rgba(20,14,38,.06) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(20,14,38,.04), 0 4px 12px -4px rgba(20,14,38,.06) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
header.hero .hero-brand-strip .bn-logo img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Force hero entrance animations to their final visible state. The
   inline JS animates `.lead`, `.hero-ctas`, `.hero-stats`,
   `.hero-games`, `.hero-22` from opacity:0 → 1 via IntersectionObserver.
   Because we tightened the hero to 100vh with overflow:hidden, some
   of those elements never enter the observer's threshold window and
   stay invisible. Force them to their final state. */
header.hero .hero-eyebrow,
header.hero > .container.hero-inner > .eyebrow,
header.hero .lead,
header.hero .hero-ctas,
header.hero .hero-stats,
header.hero .hero-games,
header.hero .hero-22,
header.hero .hero-brand-strip,
header.hero .hero-grid-layout,
header.hero .hero-l > *{
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  visibility: visible !important;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px){
  header.hero{ padding-top: 88px !important; }
  header.hero h1, header.hero .h1{ font-size: clamp(30px, 4.6vw, 46px) !important; }
}
@media (max-width: 768px){
  header.hero{
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    /* Tighter top spacing on mobile — the 71px fixed nav clears the
       viewport top, so 24px additional breathing room is plenty. The
       previous 88px left a visually empty void between nav and eyebrow. */
    padding: 24px 0 40px !important;
  }
  header.hero > .container.hero-inner{ gap: 22px; }
  /* Hero stats: 2×2 grid on mobile (instead of flex-wrap which produced
     uneven 1+1+2 layouts because labels vary in width). */
  header.hero .hero-stats{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px 8px !important;
    width: 100% !important;
    padding: 16px 8px !important;
  }
  header.hero .hero-stat{
    padding: 6px 8px !important;
    min-width: 0 !important;
    width: auto !important;
    border-right: none !important;
  }
  header.hero .hero-stat::after{ display: none !important; }
  header.hero .hg-row{ flex-wrap: wrap !important; }
}


/* ─────────────────────────────────────────────────────────────────────
   2.  TIER 1 — BASELINE POLISH
   ───────────────────────────────────────────────────────────────────── */

/* 2.1  Item 10 — fixed grain texture (sits below content). */
body::after{
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.022;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:200px 200px;
  mix-blend-mode:multiply;
}
.nav, header.hero, main, section, footer{
  position:relative;
  z-index:2;
}
/* Nav itself must sit ABOVE every subsequent section so its
   dropdowns render on top of hero/section content. */
.nav{ z-index: 100 !important; }
/* The audit modal stays fixed-positioned (inset:0) covering the
   viewport. Do NOT change its position to relative — that drops the
   modal back into normal flow at the bottom of the page. */
.modal-overlay, .audit-modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
}

/* 2.2  Item 2 — hero typography. */
.hero h1, .hero .h1{
  font-size: clamp(38px, 4.4vw, 60px) !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
  font-weight: 800 !important;
}
.hero .hero-eyebrow, .hero .eyebrow{
  font-size:13px !important;
  letter-spacing:.08em !important;
  text-transform:uppercase;
  color:var(--t3) !important;
  font-weight:600 !important;
  margin-bottom:24px;
}
.hero .hero-lead, .hero .lead, .hero p.lead{
  font-size: var(--t-lead) !important;
  line-height:1.55 !important;
  color:var(--t2) !important;
  max-width:640px;
  margin-top:24px;
}
.hero .hero-ctas, .hero .hero-cta-row, .hero .hero-actions{
  margin-top:48px !important;
}
.h2, h2{
  font-size: var(--t-h2) !important;
  line-height:1.05 !important;
  letter-spacing:-.025em !important;
}
.h3, h3{
  font-size: var(--t-h3) !important;
  line-height:1.15 !important;
  letter-spacing:-.02em !important;
}

/* 2.3  Item 3 — hero stat block collapses inline (no card, no borders). */
.hero-stats{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:6px 0 0 !important;
  margin:14px 0 0 !important;
  border-radius:0 !important;
}
.hero-stats::before, .hero-stats::after{ display:none !important; }
.hero-stat{ padding:6px 14px !important; gap:4px !important; }
.hero-stat:not(:last-child)::after{
  top:30% !important; bottom:30% !important;
  background:linear-gradient(180deg,transparent,var(--line) 30%,var(--line) 70%,transparent) !important;
}
.hero-stat .hs-tag{
  font-family:var(--fb) !important;
  font-size:11px !important; font-weight:500 !important;
  letter-spacing:.01em !important; text-transform:none !important;
  color:var(--t3) !important; margin-bottom:0 !important;
}
.hero-stat .hs-tag .pulse{ display:none !important; }
.hero-stat .hs-num{
  font-size:clamp(20px,2vw,26px) !important;
  font-weight:700 !important;
  letter-spacing:-.02em !important;
  color:var(--brand) !important;
  background:none !important;
  -webkit-text-fill-color:var(--brand) !important;
  font-feature-settings:"tnum";
}
.hero-stat .hs-lbl{
  font-size:11px !important;
  color:var(--t3) !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}

/* 2.4  Item 4 — sitewide section breathing room.
       NOTE: `.section` alone is intentionally EXCLUDED — narrative
       pages (about / blog / reports / docs) use `.section` with their
       own tuned 90px padding for tight story flow.  Only sections
       carrying a marketing-landing class (.demo, .brand-net,
       .case-study, etc.) get the heroic 160px breathing room. */
section.demo,
section.brand-net,
section.case-study,
section.integrations,
section.final-merged,
section.final,
section.sdk,
section.steps,
section.metrics{
  padding-top: var(--space-section) !important;
  padding-bottom: var(--space-section) !important;
}
@media (max-width:768px){
  section.demo,
  section.brand-net,
  section.case-study,
  section.integrations,
  section.final-merged,
  section.final,
  section.sdk,
  section.steps,
  section.metrics{
    padding-top: var(--space-section-mobile) !important;
    padding-bottom: var(--space-section-mobile) !important;
  }
}
/* Pin section keeps zero block padding so the sticky stage's
   unpinning aligns perfectly with the next section's top edge. The
   L1→L6 reveal is scroll-linked — each layer occupies ~1/6 of the
   pinned scroll distance, so the animation completes exactly as the
   sticky stage unpins. No white scroll-void after L6, no missed
   layers if the user scrolls fast. */
section.layers-pin{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: 220vh !important;
}
/* Stage fills the viewport, content centred so the architecture
   visually sits in the middle of the screen during pin. */
.layers-pin .layers-stage{
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: 100vh !important;
}
/* Pull the next section closer so the post-stage transition lands
   right where it begins. Applied to both brand-net and case-study —
   either can follow the architecture pin depending on source order. */
section.brand-net,
section.case-study{
  padding-top: 56px !important;
}
@media (max-width:768px){
  section.brand-net,
  section.case-study{ padding-top: 40px !important; }
}
@media (max-width:980px){
  section.layers-pin{ height:auto !important; }
  .layers-pin .layers-stage{
    align-items: stretch !important;
    padding: 96px 0 !important;
    height: auto !important;
  }
}

/* 2.5  Item 6 — buttons system. Confident, taller, premium hover. */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  height:52px !important;
  padding:0 28px !important;
  border-radius: var(--rad-md) !important;
  font-size:15px !important;
  font-weight:600 !important;
  letter-spacing:-.005em !important;
  white-space:nowrap;
  transition:
    transform var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    background var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    color var(--dur-fast) var(--ease-out) !important;
}
.btn-pri{
  background:var(--brand) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.15) inset,
    0 8px 24px -8px rgba(106,40,219,.4) !important;
}
.btn-pri:hover{
  background:var(--brand-2) !important;
  transform:translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 14px 36px -8px rgba(106,40,219,.55) !important;
}
.btn-sec{
  background:#fff !important;
  border:1px solid rgba(20,16,42,.12) !important;
  color:var(--t1) !important;
  box-shadow: var(--shadow-1) !important;
}
.btn-sec:hover{
  border-color:rgba(20,16,42,.24) !important;
  background:rgba(20,16,42,.02) !important;
  transform:translateY(-1px);
  box-shadow: var(--shadow-2) !important;
}
.btn .arr{
  display:inline-block;
  transition:transform var(--dur-med) var(--ease-out);
}
.btn:hover .arr{ transform:translateX(4px); }

/* Nav-scope buttons stay slim so they fit the 72px nav band. */
.nav-cta .btn,
.nav-cta .nav-login{
  height:40px !important;
  padding:0 16px !important;
  font-size:14px !important;
  border-radius:10px !important;
}
.nav-cta .nav-login{ padding:0 18px !important; }

/* 2.6  Item 7 — studio logo marquee, grayscale-to-color fade-mask. */
.h22-marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) !important;
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) !important;
}
.h22-track{ gap:64px !important; animation-duration:60s !important; }
.h22-tile{ min-width:auto !important; padding:0 !important; }
.h22-tile-icon{
  height:36px !important;
  min-width:auto !important; max-width:none !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.h22-tile-icon img{
  height:28px !important;
  width:auto;
  filter:grayscale(1) brightness(.7) !important;
  opacity:.6 !important;
  transition:filter var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out) !important;
}
.h22-tile:hover .h22-tile-icon{
  transform:none !important;
  box-shadow:none !important;
  border:0 !important;
}
.h22-tile:hover .h22-tile-icon img{
  filter:grayscale(0) brightness(1) !important;
  opacity:1 !important;
}
/* Name display lives in the hero-specific block above (allows override). */

/* Same treatment for "Trusted by top brands" marquee. */
.bm-marquee,
.brand-marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) !important;
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) !important;
}


/* ─────────────────────────────────────────────────────────────────────
   3.  TIER 2 — DEEPER POLISH
   ───────────────────────────────────────────────────────────────────── */

/* 3.1  Item 9 — product screenshot layered shadows. */
.demo-shot, .hero-shot, .product-shot, .demo-screen, .hero-screen,
.demo-frame, .product-frame, .hero-frame,
.architecture-shot, .arch-shot, .demo-img-frame, .demo-hero,
.demo-card, .product-screenshot{
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 0 0 1px rgba(20,14,38,.06),
    0 8px 24px -8px rgba(20,14,38,.10),
    0 32px 80px -16px rgba(20,14,38,.20),
    0 60px 140px -30px rgba(106,40,219,.18) !important;
  background:#fff;
  overflow:hidden;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.demo-shot:hover, .hero-shot:hover, .product-shot:hover{
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 0 0 1px rgba(20,14,38,.07),
    0 12px 30px -8px rgba(20,14,38,.12),
    0 42px 100px -16px rgba(20,14,38,.24),
    0 76px 170px -30px rgba(106,40,219,.22) !important;
}

/* 3.2  Item 11 — calculator card promotion. */
.cv-card, .fm-card{
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F4 100%) !important;
  border: 1px solid rgba(20,14,38,.06) !important;
  border-radius: 22px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 12px 28px -12px rgba(20,14,38,.08),
    0 36px 90px -24px rgba(106,40,219,.12) !important;
  padding: 36px !important;
  position:relative;
  overflow:hidden;
}
@media (min-width:769px){
  .cv-card, .fm-card{ padding: 48px !important; }
}
.cv-card::before, .fm-card::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(600px 200px at 80% -10%, rgba(106,40,219,.07), transparent 60%),
    radial-gradient(500px 240px at 10% 110%, rgba(156,219,63,.06), transparent 60%);
  pointer-events:none;
  z-index:0;
}
.cv-card > *, .fm-card > *{ position:relative; z-index:1; }

.cv-input, .cv-select, input.cv-input, select.cv-input{
  background:#fff !important;
  border:1px solid var(--line-m) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size:15px !important;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out) !important;
}
.cv-input:hover, .cv-select:hover{
  border-color: rgba(20,14,38,.22) !important;
}
.cv-input:focus, .cv-select:focus,
.cv-input:focus-visible, .cv-select:focus-visible{
  outline:none !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(106,40,219,.15) !important;
}
.cv-label{
  font-size:12.5px !important;
  font-weight:500 !important;
  color: var(--t2) !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
  margin-bottom:8px !important;
  display:block;
}

.cv-twin{
  background: linear-gradient(180deg, rgba(106,40,219,.04) 0%, rgba(156,219,63,.04) 100%);
  border:1px solid rgba(106,40,219,.10);
  border-radius:16px;
  padding:22px 24px;
}
.cv-monthly, .cv-annual-big{
  font-feature-settings:"tnum";
  letter-spacing:-.02em;
}
.cv-monthly{ font-size: clamp(28px, 3vw, 38px) !important; font-weight:700; }
.cv-annual-big{ font-size: clamp(36px, 4vw, 56px) !important; font-weight:800; color: var(--brand); }
.cv-pill{
  font-size:10.5px !important;
  letter-spacing:.10em !important;
  color:var(--t3) !important;
  margin-bottom:8px;
}

/* 3.3  Item 12 — case-study slider control pills. */
.cs-tabs, .case-tabs, .cs-pills{
  display:flex; gap:8px;
  background: rgba(20,14,38,.04);
  border-radius: 999px;
  padding:6px;
  width:max-content;
}
.cs-tabs > *, .case-tabs > *, .cs-pills > *{
  padding:8px 16px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:600;
  color: var(--t2);
  cursor:pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  border:0;
}
.cs-tabs > *:hover, .case-tabs > *:hover{ color: var(--t1); }
.cs-tabs > *.active, .case-tabs > *.active, .cs-pills > *.active,
.cs-tabs > *[aria-current="true"], .case-tabs > *[aria-current="true"]{
  background:#fff;
  color:var(--t1);
  box-shadow: var(--shadow-2);
}

/* Case-study arrow controls — softer, circular. */
.cs-arrow, .case-arrow, .slider-arrow{
  width:44px; height:44px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--line-m) !important;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.cs-arrow:hover, .case-arrow:hover, .slider-arrow:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-3);
}

/* 3.4  Item 13 — brand catalogue / steps card lifts. */
.step-card, .brand-step, .catalogue-card, .feature-card,
.bn-card, .ps-step, .bcat-card,
.steps .card, .bn-steps > *, .h22-meta-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  box-shadow: var(--shadow-1);
  transition:
    transform var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out);
}
.step-card:hover, .brand-step:hover, .catalogue-card:hover, .feature-card:hover,
.bn-card:hover, .ps-step:hover, .bcat-card:hover,
.steps .card:hover, .bn-steps > *:hover, .h22-meta-card:hover{
  transform: translateY(-4px);
  border-color: rgba(106,40,219,.18);
  box-shadow: var(--shadow-3);
}

/* 3.5  Item 14 — nav frosted glass + dropdown polish. */
.nav.scrolled{
  background: rgba(251,250,247,.78) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  border-bottom: 1px solid rgba(20,16,42,.06) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 24px -16px rgba(20,14,38,.08);
}
.nav-dd-menu{
  border: 1px solid rgba(20,14,38,.06) !important;
  border-radius: 16px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 24px 60px -18px rgba(20,16,42,.18),
    0 8px 22px -10px rgba(20,16,42,.08) !important;
  padding: 10px !important;
  background: #fff !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.nav-dd-item{
  padding: 12px 14px !important;
  border-radius: 12px !important;
  transition: background var(--dur-fast) var(--ease-out) !important;
}
.nav-dd-item:hover{
  background: rgba(106,40,219,.07) !important;
}


/* ─────────────────────────────────────────────────────────────────────
   4.  TIER 3 — FINAL POLISH
   ───────────────────────────────────────────────────────────────────── */

/* 4.1  Item 15 — footer hierarchy + link treatment. */
footer{
  padding: 96px 0 56px !important;
  background: var(--bg-s) !important;
  border-top: 1px solid var(--line) !important;
}
.footer-grid{ gap: 64px !important; }
.footer-brand{ max-width: 380px !important; }
.footer-col h4{
  font-family: var(--fb) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: var(--t1) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
}
.footer-col ul{ gap: 12px !important; }
.footer-col a{
  font-size: 14.5px !important;
  color: var(--t2) !important;
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out) !important;
  display:inline-block;
}
.footer-col a:hover{
  color: var(--brand) !important;
  transform: translateX(2px);
}
.footer-bot{
  margin-top: 64px !important;
  padding-top: 32px !important;
  border-top: 1px solid var(--line) !important;
  font-size: 12px !important;
  color: var(--t3) !important;
}
.footer-bot a{ transition: color var(--dur-fast) var(--ease-out); }
.footer-bot a:hover{ color: var(--brand); }

/* 4.2  Item 17 — sitewide motion system unification. */
a, button, .btn, .nav-dd-trigger, .nav-dd-item, .nav-links a,
.footer-col a, .h22-tile, .cv-input, .cv-select,
.step-card, .brand-step, .catalogue-card, .feature-card,
.bn-card, .ps-step, .bcat-card,
.cs-arrow, .case-arrow, .slider-arrow{
  transition-timing-function: var(--ease-out) !important;
}

/* Respect reduced-motion. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 4.3  Item 18 — modal premium overlay. */
.audit-modal,
.modal-overlay{
  background: rgba(20, 14, 38, .42) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
}
.audit-modal .audit-form,
.modal-overlay .modal-dialog,
.am-dialog .audit-form{
  background:#fff !important;
  border: 1px solid rgba(20,14,38,.06) !important;
  border-radius: 22px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 40px 100px -20px rgba(20,14,38,.32),
    0 16px 40px -16px rgba(20,14,38,.18) !important;
  padding: 36px 32px 30px !important;
}
.audit-modal .audit-form h3,
.audit-modal .audit-form .h3{
  font-size: clamp(22px, 2vw, 28px) !important;
  letter-spacing:-.02em;
  margin-bottom: 8px;
}
.audit-modal input,
.audit-modal select,
.audit-modal textarea{
  border-radius: 10px !important;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out) !important;
}
.audit-modal input:focus,
.audit-modal select:focus,
.audit-modal textarea:focus{
  outline:none !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(106,40,219,.15) !important;
}


/* ─────────────────────────────────────────────────────────────────────
   5.  RESPONSIVE COLLAPSE — defensive single-column at small widths
   ───────────────────────────────────────────────────────────────────── */
@media (max-width:768px){
  .hero h1, .hero .h1{ max-width: 100%; }
  .fm-head h2, .fm-head .h2{ max-width: 100%; }

  /* Hero stat row stays on a single line where possible. */
  .hero-stats{ flex-wrap:wrap !important; gap:6px 10px !important; }
  .hero-stat:not(:last-child)::after{ display:none !important; }

  /* Calculator card pads down. */
  .cv-card, .fm-card{ padding: 26px !important; border-radius:18px !important; }
  .cv-twin{ padding: 18px !important; }

  /* Footer collapses cleanly. */
  .footer-grid{ grid-template-columns: 1fr !important; gap: 36px !important; }
  .footer-brand{ max-width: 100% !important; }
  .footer-bot{ flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width:480px){
  :root{ --space-section-mobile: 72px; }
  .container{ padding-left: var(--space-gutter-mobile) !important; padding-right: var(--space-gutter-mobile) !important; }
}


/* ============================================================
   Case-study headline — render on a single line on desktop.
   The headline "Live in 22+ Studios. Here's the result." wraps to
   2 lines by default because the section h2 max-width is 22ch.
   Override here so it sits on one line. Allow natural wrapping at
   mobile widths where one line wouldn't fit anyway.
   ============================================================ */
.cs-section-h2{
  white-space: nowrap !important;
  max-width: none !important;
  text-wrap: nowrap !important;
}
@media (max-width: 900px){
  .cs-section-h2{
    white-space: normal !important;
    text-wrap: balance !important;
    max-width: 28ch !important;
  }
}


/* ============================================================
   PlaySuper FAQ accordion — shared design across studio + brand
   pages (`<details class="faq">` inside `<div class="faqs">`).
   Cards lift on open with a soft brand-tinted shadow and a `+`
   that rotates into an `×`.
   ============================================================ */
.faqs{
  max-width: 840px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq{
  background: #fff;
  border: 1px solid var(--line-m, rgba(20,16,42,.14));
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.faq[open]{
  border-color: rgba(106,40,219,.18);
  box-shadow: 0 8px 24px -10px rgba(106,40,219,.30);
}
.faq summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: clamp(15px, 1.05vw, 17px);
  color: var(--t1);
  letter-spacing: -.01em;
  list-style: none;
  line-height: 1.4;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: '+';
  flex-shrink: 0;
  font-family: inherit;
  font-size: 22px;
  color: var(--brand);
  font-weight: 300;
  line-height: 1;
  transition: transform .25s var(--ease-out);
}
.faq[open] summary::after{ transform: rotate(45deg); }
.faq-body{
  padding: 0 26px 22px;
  font-size: 14.5px;
  color: var(--t2);
  line-height: 1.65;
}
.faq-body p + p{ margin-top: 10px; }
@media (max-width: 768px){
  .faq summary{ padding: 18px 20px; font-size: 15px; }
  .faq-body{ padding: 0 20px 18px; }
}


/* ─────────────────────────────────────────────────────────────────────
   14.  AUDIT MODAL — enriched thank-you state
        Personalised greeting + revenue snapshot recap + next steps.
        Lives on top of the existing `.af-success` baseline (which sets
        the green card chrome). These selectors extend that block.
   ───────────────────────────────────────────────────────────────────── */
.af-success{ text-align: left; padding: 26px 24px 22px; }
.af-success .afs-icon{
  animation: afsCheckIn .5s var(--ease-spring, cubic-bezier(0.34,1.4,0.4,1)) both;
}
.af-success .afs-icon svg{ display:block; width:22px; height:22px; }
@keyframes afsCheckIn{
  0%   { opacity:0; transform: scale(.4) rotate(-12deg); }
  60%  { opacity:1; transform: scale(1.08) rotate(2deg); }
  100% { opacity:1; transform: scale(1) rotate(0); }
}
.af-success .afs-h{
  text-align: center;
  font-size: 20px;
  margin-bottom: 4px;
  animation: afsFadeUp .55s var(--ease, cubic-bezier(0.16,1,0.3,1)) .12s both;
}
.af-success .afs-d{
  text-align: center;
  margin-bottom: 4px;
  animation: afsFadeUp .55s var(--ease, cubic-bezier(0.16,1,0.3,1)) .20s both;
}
.af-success .afs-h strong,
.af-success .afs-d strong{
  color: var(--t1, #14102A);
  font-weight: 600;
}
@keyframes afsFadeUp{
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.afs-snapshot{
  margin: 18px 0 6px;
  padding: 16px 18px 14px;
  background: linear-gradient(135deg, rgba(106,40,219,.07), rgba(156,219,63,.05));
  border: 1px solid rgba(106,40,219,.18);
  border-radius: 12px;
  animation: afsFadeUp .55s var(--ease, cubic-bezier(0.16,1,0.3,1)) .28s both;
}
.afs-snap-label{
  font-family: var(--fm, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t3, #908AA1);
  text-align: center;
  margin-bottom: 12px;
}
.afs-snap-grid{
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 12px;
  margin-bottom: 12px;
}
.afs-snap-cell{ flex: 1; text-align: center; }
.afs-snap-val{
  font-family: var(--fd, 'DM Sans');
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1;
  margin-bottom: 5px;
  color: var(--brand, #6A28DB);
  background: linear-gradient(135deg, var(--brand, #6A28DB), var(--brand-2, #9CDB3F));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.afs-snap-cell:last-of-type .afs-snap-val{
  background: none;
  -webkit-text-fill-color: initial;
  color: var(--t1, #14102A);
}
.afs-snap-cap{
  font-family: var(--fb, 'DM Sans');
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--t3, #908AA1);
  text-transform: uppercase;
}
.afs-snap-div{
  width: 1px;
  align-self: stretch;
  min-height: 34px;
  background: var(--line-m, rgba(20,14,38,.14));
}
.afs-snap-meta{
  font-family: var(--fm, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--t3, #908AA1);
  text-align: center;
  padding-top: 10px;
  border-top: 1px dashed var(--line-m, rgba(20,14,38,.14));
}
.afs-next{
  list-style: none;
  padding: 0;
  margin: 16px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  animation: afsFadeUp .55s var(--ease, cubic-bezier(0.16,1,0.3,1)) .36s both;
}
.afs-next li{
  font-family: var(--fb, 'DM Sans');
  font-size: 12.5px;
  font-weight: 500;
  color: var(--t2, #5C5673);
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}
.afs-next li::before{
  content: '→';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand, #6A28DB);
  font-weight: 700;
  font-size: 13px;
}
.afs-close{
  width: 100%;
  justify-content: center;
  padding: 12px 20px !important;
  font-size: 13px !important;
  background: var(--bg-card, #fff) !important;
  color: var(--t1, #14102A) !important;
  border: 1.5px solid var(--line-m, rgba(20,14,38,.14)) !important;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--fb, 'DM Sans');
  font-weight: 600;
  letter-spacing: .01em;
  transition: all .2s var(--ease, cubic-bezier(0.16,1,0.3,1));
  animation: afsFadeUp .55s var(--ease, cubic-bezier(0.16,1,0.3,1)) .44s both;
}
.afs-close:hover{
  border-color: var(--brand, #6A28DB) !important;
  color: var(--brand, #6A28DB) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(106,40,219,.25);
}
@media (max-width: 480px){
  .af-success{ padding: 22px 18px 18px; }
  .afs-snap-val{ font-size: 22px; }
  .afs-snap-grid{ gap: 8px; }
}

/* ─────────────────────────────────────────────────────────────────────
   15.  ABOUT — hero H1 single-line treatment
        "We're building Monetisation 3.0" must read on one line on
        desktop. Scales down gracefully on narrow viewports.
   ───────────────────────────────────────────────────────────────────── */
.h1.h1-oneline{
  font-size: clamp(34px, 5.6vw, 72px);
  white-space: nowrap;
  letter-spacing: -.038em;
  line-height: 1.02;
}
@media (max-width: 720px){
  .h1.h1-oneline{
    white-space: normal;
    font-size: clamp(32px, 8.5vw, 46px) !important;
    line-height: 1.05;
  }
  .h1.h1-oneline .accent{ display: inline; }
}


/* ─────────────────────────────────────────────────────────────────────
   16.  STUDIO + BRAND FORMS — single source of truth
        Two audience-specific lead forms (Studio / Brand) share this
        styling. The .form-row, .form-pair, .form-banner, .form-success
        primitives are reused by both #studio-form and #brand-form so
        future polish to one propagates to both.
   ───────────────────────────────────────────────────────────────────── */
.form-section{ display: flex; flex-direction: column; gap: 14px; }
.form-row{ display: flex; flex-direction: column; gap: 6px; position: relative; }
.form-row label{
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
  letter-spacing: -0.005em;
  font-family: var(--fb, 'DM Sans');
}
.form-row label .opt{
  font-weight: 400;
  color: var(--t3);
  margin-left: 6px;
  font-size: 12px;
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row select,
.form-row textarea{
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid rgba(20,16,42,0.10);
  border-radius: 10px;
  background: #fff;
  font-size: 14.5px;
  color: var(--t1);
  font-family: var(--fb, 'DM Sans');
  font-weight: 500;
  transition: border-color 0.15s var(--ease, cubic-bezier(0.16,1,0.3,1)), box-shadow 0.15s var(--ease, cubic-bezier(0.16,1,0.3,1));
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.form-row input::placeholder{ color: var(--t4, #C7C2D5); font-weight: 400; }
.form-row select{
  padding-right: 38px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' stroke='%235C5673' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
.form-row select:invalid{ color: var(--t4, #C7C2D5); }
.form-row select option{ color: var(--t1, #14102A); }
.form-row select option[value=""][disabled]{ color: var(--t4, #C7C2D5); }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  outline: none;
  border-color: var(--brand, #6A28DB);
  box-shadow: 0 0 0 4px rgba(106,40,219,0.12);
}
.form-row.error input,
.form-row.error select,
.form-row.error textarea{ border-color: #DC2626 !important; }
.form-row.error input:focus,
.form-row.error select:focus,
.form-row.error textarea:focus{
  box-shadow: 0 0 0 4px rgba(220,38,38,0.10) !important;
}
.form-row .err-msg{
  font-size: 12.5px;
  color: #DC2626;
  margin-top: 2px;
  font-weight: 500;
  font-family: var(--fb, 'DM Sans');
  letter-spacing: 0.005em;
  min-height: 0;
}
.form-row .warn-msg{
  font-size: 12px;
  color: var(--t3, #908AA1);
  margin-top: 2px;
  font-family: var(--fb, 'DM Sans');
  font-style: italic;
}
.form-pair{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px){ .form-pair{ grid-template-columns: 1fr; } }

.form-submit{
  width: 100%;
  margin-top: 6px;
  height: 50px;
  justify-content: center;
  font-size: 14px;
}
.form-submit .spinner{
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ps-form-spin 0.8s linear infinite;
}
.form-submit.loading .spinner{ display: inline-block; }
.form-submit.loading .arr,
.form-submit.loading .submit-label{ display: none; }
.form-submit.loading::after{
  content: 'Sending…';
  font-weight: 600;
}
@keyframes ps-form-spin{ to { transform: rotate(360deg); } }

.form-banner{
  padding: 11px 14px;
  background: rgba(220,38,38,0.07);
  border: 1px solid rgba(220,38,38,0.22);
  border-radius: 10px;
  color: #B91C1C;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
  font-family: var(--fb, 'DM Sans');
}
.form-banner a{ color: inherit; text-decoration: underline; }

.form-foot{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--t3, #908AA1);
  margin-top: 8px;
  font-family: var(--fb, 'DM Sans');
  font-weight: 500;
  letter-spacing: 0.02em;
  justify-content: center;
}
.form-foot::before{
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok, #16A34A);
  box-shadow: 0 0 6px var(--ok, #16A34A);
  display: inline-block;
  flex-shrink: 0;
}

/* Success state — replaces the form fields after submission.
   The .ps-form.submitted CSS hooks hide everything except .form-success. */
.form-success{
  display: none;
  padding: 8px 4px 4px;
  text-align: center;
  animation: ps-form-fade-in 0.35s var(--ease, cubic-bezier(0.16,1,0.3,1)) both;
}
.ps-form.submitted > :not(.form-success){ display: none; }
.ps-form.submitted .form-success{ display: block; }
.form-success .fs-icon{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ok, #16A34A), #2ecc71);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  box-shadow: 0 8px 22px rgba(22,163,74,0.32);
  animation: ps-form-check-in 0.5s var(--ease-spring, cubic-bezier(0.34,1.4,0.4,1)) both;
}
.form-success .fs-icon svg{ width: 26px; height: 26px; }
.form-success h3{
  font-family: var(--fd, 'DM Sans');
  font-size: 22px;
  font-weight: 700;
  color: var(--t1, #14102A);
  margin-bottom: 10px;
  letter-spacing: -0.018em;
}
.form-success p{
  font-size: 14px;
  line-height: 1.6;
  color: var(--t2, #5C5673);
  max-width: 380px;
  margin: 0 auto;
  font-family: var(--fb, 'DM Sans');
}
@keyframes ps-form-fade-in{
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ps-form-check-in{
  0%   { opacity: 0; transform: scale(0.4) rotate(-12deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Form heading block. */
.form-head{ margin-bottom: 6px; }
.form-head h2{
  font-family: var(--fd, 'DM Sans');
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.022em;
  color: var(--t1, #14102A);
  margin-bottom: 8px;
  line-height: 1.2;
}
.form-head p{
  font-size: 13.5px;
  color: var(--t3, #908AA1);
  line-height: 1.55;
  font-family: var(--fb, 'DM Sans');
}
@media (max-width: 540px){
  .form-head h2{ font-size: 20px; }
}

/* Field-fade transition during submit→success crossfade. */
.ps-form{ transition: opacity 0.3s var(--ease, cubic-bezier(0.16,1,0.3,1)); }
.ps-form.submitting{ opacity: 0.55; pointer-events: none; }


/* ─────────────────────────────────────────────────────────────────────
   17.  PS-FORM MODAL CHROME — overlay, backdrop, dialog, close button.
        Shared by both Studio and Brand form modals. The actual form
        fields live inside .ps-form (section 16 above).
   ───────────────────────────────────────────────────────────────────── */
.ps-form-modal{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ps-form-modal.open{
  display: flex;
  animation: psfmFadeIn .35s var(--ease, cubic-bezier(0.16,1,0.3,1)) both;
}
@keyframes psfmFadeIn{ from{ opacity: 0; } to{ opacity: 1; } }
.psfm-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(20,14,38,.45);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  cursor: pointer;
}
.psfm-dialog{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  background: linear-gradient(180deg, #fff, #FAF8FF);
  border: 1px solid var(--line-m, rgba(20,14,38,.14));
  border-radius: 20px;
  padding: 36px 32px 30px;
  box-shadow: 0 40px 100px -20px rgba(20,14,38,.32), 0 0 0 1px var(--line-m, rgba(20,14,38,.10));
  animation: psfmDialogIn .5s var(--ease-spring, cubic-bezier(0.34,1.4,0.4,1)) both;
}
.psfm-dialog::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand, #6A28DB), var(--accent, #9CDB3F));
  border-radius: 20px 20px 0 0;
}
@keyframes psfmDialogIn{
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.psfm-close{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-card, #fff);
  border: 1px solid var(--line-m, rgba(20,14,38,.14));
  color: var(--t2, #5C5673);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s var(--ease, cubic-bezier(0.16,1,0.3,1));
  box-shadow: 0 4px 12px -4px rgba(20,14,38,.12);
}
.psfm-close:hover{
  color: var(--t1, #14102A);
  border-color: var(--brand, #6A28DB);
  transform: rotate(90deg);
}
body.modal-open{ overflow: hidden; }

@media (max-width: 560px){
  .ps-form-modal{ padding: 16px; }
  .psfm-dialog{ padding: 28px 22px 22px; max-width: 100%; }
}


/* ─────────────────────────────────────────────────────────────────────
   18.  MOBILE — Architecture neural-net pill polish
        On narrow viewports the "Inference active · L1 · Static
        Intelligence" pill is too long for the inline-flex container
        and gets clipped to ellipsis (e.g. "INFERENCE ACTIVE L1 · STAT…").
        Hide the verbose "Inference active" label below 540px and keep
        just the pulsing dot + current layer name — same meaning, fits.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 540px){
  .nn-meta{
    max-width: calc(100% - 32px) !important;
    padding: 7px 12px !important;
    gap: 8px !important;
    font-size: 9.5px !important;
  }
  /* The first <span> inside .nn-meta is "Inference active"; hide it on
     small screens. The .dot stays visible; the <strong> layer label
     (id="nnLayer") stays visible. */
  .nn-meta > span:not(.dot){
    display: none !important;
  }
}