/*  =====================================================================
    GhostLabs — mobile.css  (v6.0 — Version A: Dark Hero Refined)
    Production mobile stylesheet. Loaded via:
      <link rel="stylesheet" href="mobile.css" media="(max-width: 1000px)">

    Architecture:
      - Cascades cleanly over the inline <style> block in mockup.html
      - Uses specificity (not !important) wherever possible
      - !important only where inline styles or high-specificity desktop
        rules leave no alternative
      - All rules scoped inside @media so desktop is NEVER touched

    Breakpoints (mobile-down, Apple convention):
      1000px — tablet / small laptop (entry point)
       768px — large phone landscape / small tablet
       600px — standard phone (iPhone 14, Pixel 7)
       480px — compact phone
       380px — mini phone (iPhone SE, Galaxy S mini)

    Visual language (benchmarked: Chaleit, Lando Norris, Apple):
      - Dark immersive hero — authority & premium feel
      - Tango (#E24B1F) glow on CTAs — urgency & energy
      - Card elevation via box-shadow — visual depth
      - Section-level color shifts — "room-by-room" scroll rhythm
      - Glass card treatment on scan box — product feel

    Design philosophy (47-parameter framework):
      - Every section earns its screen-space or gets cut
      - CTAs: 40–44px tall (CertiK/Linear/Vercel benchmark)
      - Typography: 16px body minimum (WCAG/Google)
      - Form inputs: 16px minimum (prevents iOS auto-zoom)
      - Touch targets: 44×44px minimum (WCAG 2.2 AA)
      - Social proof stays visible — it's the conversion engine
      - Scroll journey: Hook → Proof → Product → Price → Close
      - Zero horizontal overflow at any breakpoint
    ===================================================================== */


/* ═══════════════════════════════════════════════════════════════════════
   FOUNDATIONS — file is loaded only at ≤1000 px via the <link media>
   attribute on mockup.html, so these rules ONLY apply on mobile/tablet.
   The block name is retained for legacy reference; desktop is untouched.
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

img, svg, video, canvas, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


/* ═══════════════════════════════════════════════════════════════════════
   TABLET — max-width: 1000px
   Primary mobile breakpoint. Everything below cascades from here.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {

  /* ── OVERFLOW GUARD ────────────────────────────────────────────────── */
  html { overflow-x: hidden; }

  /* ── BREADCRUMB — hidden on mobile, nav handles wayfinding ───────── */
  .breadcrumb { display: none !important; }
  .article-crumbs { display: none !important; }   /* hide "GhostLabs / Insights / Research" hierarchy text on mobile */
  section.article-hero { padding-top: 12px !important; }   /* tighten top gap on insights articles */

  /* ── TABLE OVERFLOW — prevent horizontal scroll on narrow viewports ─ */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Stack named tables as cards on mobile (rows → vertical cards, thead hidden).
     Targets: comp-table, sc-holder-table, da-compliance-table, erd-findings,
     sn-event-log. Generic stacking works because each has consistent column
     semantics where row 1 = title, rest = supporting info. */
  .sc-holder-table,
  .da-compliance-table,
  .erd-findings,
  .sn-event-log {
    display: block !important;
  }
  .sc-holder-table thead,
  .da-compliance-table thead,
  .erd-findings thead,
  .sn-event-log thead {
    display: none !important;
  }
  .sc-holder-table tbody, .sc-holder-table tr,
  .da-compliance-table tbody, .da-compliance-table tr,
  .erd-findings tbody, .erd-findings tr,
  .sn-event-log tbody, .sn-event-log tr {
    display: block !important;
    width: 100% !important;
  }
  .sc-holder-table tr,
  .da-compliance-table tr,
  .erd-findings tr,
  .sn-event-log tr {
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--fog) !important;
  }
  .sc-holder-table td,
  .da-compliance-table td,
  .erd-findings td,
  .sn-event-log td {
    display: block !important;
    width: 100% !important;
    padding: 2px 0 !important;
    border: 0 !important;
    line-height: 1.45 !important;
  }
  .sc-holder-table td:first-child,
  .da-compliance-table td:first-child,
  .erd-findings td:first-child,
  .sn-event-log td:first-child {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--ink) !important;
    padding-bottom: 4px !important;
  }
  /* comp-table — keep horizontal scroll since it's a feature-comparison matrix
     where each column represents a vendor. Stacking destroys the comparison. */
  .comp-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .comp-table { min-width: 700px !important; }

  /* ── REPORT PAPER — insight pages with inline 40-48px padding ─────── */
  .report-paper-inner {
    padding: 32px 20px !important;
  }

  body {
    overflow-x: hidden;
    position: relative;
    word-break: break-word;
    padding-top: 56px; /* offset for fixed nav */
  }


  /* ── CONTAINER PADDING ─────────────────────────────────────────────
     Desktop: 48px gutters on 1280px max-width.
     Mobile: 20px gutters. Content gets 350px on a 390px phone (Apple/Linear standard).
     ──────────────────────────────────────────────────────────────────── */
  .container,
  .container-sm,
  .container-md,
  nav.top .inner,
  .statement .inner,
  .final-inner,
  .url-band .inner,
  .ticker {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
  }


  /* ── SECTION SPACING ───────────────────────────────────────────────
     Tightened for mobile thumb-scrolling. Sections breathe through
     background-color shifts, not raw whitespace.
     ──────────────────────────────────────────────────────────────────── */
  section {
    padding: 48px 0;
  }
  section.tight {
    padding: 32px 0;
  }


  /* ── SECTION HEADERS ───────────────────────────────────────────────
     Shared pattern across all major sections.
     ──────────────────────────────────────────────────────────────────── */
  .sec-head {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 28px !important;
  }
  .sec-head h2 {
    font-size: clamp(28px, 7vw, 40px);
  }
  .sec-head .lede {
    font-size: 16px;
    line-height: 1.55;
  }


  /* ══════════════════════════════════════════════════════════════════════
     NAV — fixed, frosted-glass, auto-hide on scroll
     ══════════════════════════════════════════════════════════════════════ */

  /* Hamburger — hidden on desktop, visible on mobile */
  .hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .hamburger-btn:active { opacity: 0.6; }
  .hamburger-btn svg { width: 28px; height: 28px; stroke: var(--ink); }

  nav.top {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 50;
    background: rgba(240, 238, 233, 0.88) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
    backdrop-filter: blur(20px) saturate(1.2) !important;
    border-bottom: none !important;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
    will-change: transform;
  }
  nav.top.nav-hidden {
    transform: translateY(-100%) !important;
  }
  nav.top .inner {
    padding: 12px 20px;
    gap: 12px;
  }

  /* Hide desktop nav elements */
  .nav-links { display: none !important; }
  .nav-actions .nav-cta { display: none; }
  .nav-actions .nav-icon { display: none; }
  .nav-actions { gap: 10px; }
  .nav-quote-btn { display: none !important; }
  .mega-menu { display: none !important; }


  /* ── Mobile nav overlay — full-screen takeover ─────────────────────
     Chaleit-style: full cream overlay, large type, clear hierarchy.
     ──────────────────────────────────────────────────────────────────── */
  .mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: var(--cloud);
    transition: opacity 0.25s ease;
  }
  .mobile-nav-overlay.is-open {
    display: flex;
    flex-direction: column;
  }
  .mobile-nav-overlay.is-closing {
    opacity: 0;
  }

  .mobile-nav-drawer {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--cloud);
    padding: 60px 20px 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 0;
    animation: navFadeIn 0.3s ease;
    will-change: opacity;
  }
  .mobile-nav-drawer::before { display: none; }

  @keyframes navFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes navFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
  }

  @keyframes pulseInputLine {
    0%   { border-bottom-color: rgba(226, 75, 31, 0.15); }
    50%  { border-bottom-color: rgba(226, 75, 31, 0.5); }
    100% { border-bottom-color: rgba(226, 75, 31, 0.15); }
  }

  @keyframes pulseCTAGlow {
    0%   { border-color: rgba(226, 75, 31, 0.2); box-shadow: 0 0 0 0 rgba(226, 75, 31, 0); }
    50%  { border-color: rgba(226, 75, 31, 0.6); box-shadow: 0 0 16px 2px rgba(226, 75, 31, 0.15); }
    100% { border-color: rgba(226, 75, 31, 0.2); box-shadow: 0 0 0 0 rgba(226, 75, 31, 0); }
  }

  .mobile-nav-close {
    position: fixed;
    top: 12px; right: 20px;
    z-index: 1001;
    width: 44px; height: 44px;
    background: none;
    border: 1.5px solid var(--fog);
    border-radius: 10px;
    font-size: 22px;
    line-height: 1;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.2s;
  }
  .mobile-nav-close:active { border-color: var(--ink); }

  /* Home link — top of mobile drawer, visible only on mobile */
  .mobile-nav-home {
    display: block;
    font-family: var(--f-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    padding: 8px 0 6px;
    border-bottom: 1px solid rgba(15, 14, 12, 0.08);
    margin-bottom: 4px;
    text-decoration: none;
    letter-spacing: 0.01em;
  }
  .mobile-nav-home:active { color: var(--tango); }

  .mobile-nav-group {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  .mobile-nav-label {
    font-family: var(--f-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--smoke);
    margin-bottom: 0;
    padding: 8px 0 2px;
  }
  .mobile-nav-group:first-of-type .mobile-nav-label {
    padding-top: 0;
  }

  .mobile-nav-overlay a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    padding: 5px 0;
    font-family: var(--f-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    border-bottom: 1px solid rgba(201, 195, 183, 0.22);
    text-decoration: none;
    transition: color 0.12s ease;
  }
  .mobile-nav-overlay a::after {
    content: '→';
    font-size: 16px;
    color: var(--smoke);
    flex-shrink: 0;
    margin-left: 12px;
    transition: transform 0.2s ease, color 0.2s ease;
  }
  .mobile-nav-overlay a:active { color: var(--tango); transition: none; }
  .mobile-nav-overlay a:active::after { color: var(--tango); transform: translateX(3px); }
  .mobile-nav-group a:last-child { border-bottom: 0; }

  .mobile-nav-socials {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: auto;
    padding-top: 8px;
  }
  /* P3.1: Social icons — 44px minimum tap target */
  .mobile-nav-socials a {
    display: flex;
    width: 44px; height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fog);
    border-radius: 50%;
    padding: 0;
    font-size: 0;
    min-height: 44px;
    transition: border-color 0.15s, background 0.15s;
  }
  .mobile-nav-socials a::after { display: none; }
  .mobile-nav-socials a:active {
    border-color: var(--tango);
    background: rgba(226, 75, 31, 0.06);
  }
  .mobile-nav-socials a svg { width: 18px; height: 18px; fill: var(--ink); }


  /* ══════════════════════════════════════════════════════════════════════
     HERO — Dark, immersive, conversion-focused (Chaleit/Lando pattern)
     Dark bg = authority. Tight spacing = momentum. Glow CTA = urgency.
     Psychology: fear → simple action → relief. One screen, one job.
     ══════════════════════════════════════════════════════════════════════ */
  /* Secondary-page hero — sensible mobile padding (partners, careers, press, etc.) */
  section.hero {
    padding: 56px 0 48px !important;
    min-height: auto !important;
    display: block !important;
    border-bottom: none !important;
    background: var(--cloud) !important;
    position: relative;
    overflow: hidden;
  }

  /* Homepage hero ONLY — claim the full mobile viewport so the cream block
     fills the first screen exactly and THE LIVE READ starts on next scroll.
     100svh = "smallest viewport" → ticker stays above the mobile URL bar.
     Subtract 56px = body padding-top (offset for fixed nav, see line 87)
     so the hero fills from below the nav to the bottom of the viewport
     instead of overflowing by the nav height.
     Flex column → ticker (last child of .hero) locks to the bottom edge. */
  section.hero:has(.hero-grid) {
    padding: 0 0 12px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: calc(100vh - 56px) !important;       /* fallback */
    min-height: calc(100svh - 56px) !important;      /* mobile-safe viewport */
    overflow: visible !important;
  }
  /* Fallback for browsers without :has() — .hero-grid parent is only in mockup.html */
  @supports not (selector(:has(*))) {
    section.hero {
      padding: 0 0 12px 0 !important;
      display: flex !important;
      flex-direction: column !important;
      min-height: calc(100vh - 56px) !important;
      min-height: calc(100svh - 56px) !important;
      overflow: visible !important;
    }
  }
  /* Radial glows — hidden on cream hero */
  section.hero::before {
    display: none;
  }
  section.hero::after {
    display: none;
  }

  section.hero > .container {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    position: relative;
    z-index: 1;
  }

  .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    width: 100% !important;
    /* Pin headline ~15vh below the nav, CTA 20px above the ticker. Empty
       space lives in the middle (between headline and CTA), not at the top.
       Effect: headline sits in the upper-third (~37% from top), CTA in
       thumb zone (~85% from top). Pulls headline up ~140px (~17% of vh)
       from the prior flex-end placement. */
    justify-content: space-between !important;
    padding-top: clamp(56px, 15vh, 130px) !important;
    padding-bottom: 20px !important;
    gap: 0 !important;
  }

  /* Headline block — sits in the visual middle of the hero (positioned
     by parent's justify-content distribution).
     No extra padding — inherits .container's 20px gutter so H1/H2/input/CTA
     all left-align at the same x-coordinate (was previously double-indented). */
  .hero-grid .hero-left {
    order: -1;
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
  }

  /* Scan box — drops into the thumb zone (lower third of viewport).
     Positioned by parent's justify-content: space-around — no manual
     margin needed. */
  .hero-grid .scan-box {
    order: 1;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Mobile headline — homepage ONLY (scoped to .hero-grid parent).
     Shows the brand H1 from mockup.html: "The fastest 'No' in Web3."
     The .accent span (around 'No') gets tango orange via CSS below.
     Explicit margin/padding/text-indent zeroing + hanging-punctuation
     to force H1 and H2 to share an identical left baseline. */
  section.hero:has(.hero-grid) h1 {
    font-size: clamp(66px, 17.3vw, 96px) !important;
    line-height: 1.0 !important;
    color: var(--ink) !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    margin: 0 !important;
    padding: 0 !important;
    text-indent: 0 !important;
    text-align: left !important;
    align-self: flex-start !important;
    hanging-punctuation: first !important;   /* curly quotes hang into gutter, glyphs flush-align */
  }
  section.hero:has(.hero-grid) h1 .accent {
    color: var(--tango) !important;
    font-weight: 800 !important;
    /* inline — let H1 wrap naturally as "The fastest 'No' in Web3." */
  }
  section.hero:has(.hero-grid) h1 .h1-line-3 {
    display: inline !important;            /* Show " in Web3." inline — natural wrap */
  }
  /* Capability page $98 chip — strip the inline margin-left on small phones
     so when it wraps below the "Get a quote" button it doesn't sit indented. */
  .cap-pricing-link {
    margin-left: 0 !important;
    margin-top: 10px !important;
  }
  /* H2 subhead under H1 — capped at 75% width for editorial narrow-column.
     Explicit alignment so H1 and H2 share an identical left baseline. */
  section.hero:has(.hero-grid) .hero-subhead {
    display: block !important;
    font-size: clamp(31.6px, 8.22vw, 45.5px) !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    color: var(--stone) !important;
    letter-spacing: 0 !important;
    margin: 18px 0 0 0 !important;
    padding: 0 !important;
    text-indent: 0 !important;
    text-align: left !important;
    text-transform: none !important;
    align-self: flex-start !important;
    max-width: 100% !important;
    text-align: justify !important;
    hyphens: auto !important;
  }
  /* Force the parent flex container to align its kids flush-left.
     Belt-and-braces — protects against any inherited flex item shifting. */
  section.hero:has(.hero-grid) .hero-left-top {
    align-items: flex-start !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Highlighted words inside H2 — tango orange to echo the H1 accent */
  section.hero:has(.hero-grid) .hero-subhead .accent {
    color: var(--tango) !important;
    font-weight: 600 !important;
  }
  /* :has() fallback — browsers without support get homepage rules globally */
  @supports not (selector(:has(*))) {
    .hero h1 {
      font-size: clamp(66px, 17.3vw, 96px) !important;
      line-height: 1.0 !important;
      color: var(--ink) !important;
      font-weight: 800 !important;
      letter-spacing: -0.035em !important;
      margin: 0 !important;
      text-align: left;
    }
    .hero h1 .accent {
      color: var(--tango) !important;
      font-weight: 800 !important;
    }
    .hero h1 .h1-line-3 {
      display: inline !important;
    }
    .hero .hero-subhead {
      display: block !important;
      font-size: clamp(31.6px, 8.22vw, 45.5px) !important;
      line-height: 1.4 !important;
      font-weight: 500 !important;
      color: var(--stone) !important;
      letter-spacing: 0 !important;
      margin: 18px 0 0 0 !important;
      padding: 0 !important;
      text-align: left !important;
      text-transform: none !important;
      max-width: 100% !important;
      text-align: justify !important;
      hyphens: auto !important;
    }
  }

  /* Secondary-page hero h1 — readable mobile sizing */
  section.hero:not(:has(.hero-grid)) h1 {
    font-size: clamp(32px, 8vw, 48px) !important;
    line-height: 1.08 !important;
    color: var(--ink) !important;
    letter-spacing: -0.03em;
  }

  /* Hide desktop prose — headline IS the value prop on mobile */
  .hero-left-bottom { display: none !important; }
  .hero-left-top {
    gap: 14px !important;
    text-align: left;
    padding: 0 !important;
  }

  /* kicker-live — HIDDEN on mobile. Headline says it all.
     Radical restraint: Apple shows 7 words, Chaleit shows 12.
     Every extra word dilutes the punch. */
  .kicker-live {
    display: none !important;
  }

  /* Cream hero — frosted nav matching desktop */
  nav.top {
    background: rgba(240, 238, 233, 0.88) !important;
  }
  nav.top .inner .logo,
  nav.top .inner .logo svg,
  nav.top .inner a[href="/"] {
    color: var(--ink) !important;
    fill: var(--ink) !important;
  }
  .hamburger-btn svg { stroke: var(--ink) !important; }

  /* Hero stat ladder */
  /* Hero ladder — inverted for dark hero */
  .hero-ladder {
    grid-template-columns: 1fr;
    border-color: rgba(15, 14, 12, 0.1) !important;
  }
  .hero-ladder .rung + .rung {
    border-left: 0;
    border-top: 1px solid rgba(15, 14, 12, 0.1);
    padding-left: 0;
    padding-top: 14px;
  }
  .hero-ladder .v { font-size: 20px; color: var(--ink) !important; }
  .hero-ladder .k { color: var(--tango) !important; }


  /* ══════════════════════════════════════════════════════════════════════
     SCAN BOX — direct on dark, no card wrapper (Chaleit pattern)
     The form breathes on the dark background. CTA is the star.
     ══════════════════════════════════════════════════════════════════════ */
  .scan-box {
    gap: 0 !important;
    align-items: stretch;
    width: 100%;
    margin-top: 20px;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }
  .scan-box-bottom {
    margin-top: 8px !important;
  }

  /* Hide word-pulse on mobile — headline says it all */
  .word-pulse { display: none !important; }

  /* Scan form */
  .scan-box-form {
    gap: 0px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Scan prompt — HIDDEN. The input placeholder does this job.
     Removing a label = one fewer element competing for attention. */
  .scan-prompt {
    display: none !important;
  }

  /* Input — clean, confident. Chaleit uses underline-only.
     Bigger padding, stronger placeholder, tango focus glow. */
  .scan-box-input {
    font-size: 15px;
    padding: 12px 0;
    text-align: left;
    width: 100% !important;
    color: var(--ink) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1.5px solid rgba(226, 75, 31, 0.35) !important;
    border-radius: 0 !important;
    animation: pulseInputLine 2.5s ease-in-out infinite;
  }
  .scan-box-input::placeholder {
    color: rgba(140, 133, 122, 0.4) !important;
    opacity: 1 !important;
    font-size: 13px;
    letter-spacing: 0.01em;
  }
  .scan-box-input:focus {
    border-bottom-color: var(--ink) !important;
    outline: none;
  }

  /* Scan button — cream pill on dark (Apple dual-CTA pattern) */
  .scan-box-action-row {
    display: block !important;
    width: 100% !important;
    margin-top: 12px;
  }
  /* CTA — TANGO pill on dark. This is the ONE hot spot.
     Chaleit: neon lime full-width pill. Apple: filled blue pill.
     Both use the brand's hottest color on the action. */
  .scan-submit-wrap {
    width: 100% !important;
    display: flex !important;
    align-self: stretch !important;
    border-radius: 999px !important;
    border: 1.5px solid rgba(226, 75, 31, 0.4) !important;
    background: transparent !important;
    overflow: visible !important;
    position: relative !important;
    box-shadow: 0 0 0 0 rgba(226, 75, 31, 0);
    animation: pulseCTAGlow 2.5s ease-in-out infinite !important;
  }
  .scan-submit-main {
    font-size: 15px !important;
    padding: 14px 24px 14px 32px;
    min-height: 48px;
    flex: 1;
    border-radius: 999px 0 0 999px !important;
    background: var(--ink) !important;
    color: var(--cloud) !important;
    text-align: center;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    box-shadow: none;
  }
  .scan-submit-trigger {
    padding: 14px 18px;
    min-height: 48px;
    border-radius: 0 999px 999px 0 !important;
    border-left: 1px solid rgba(240, 238, 233, 0.15) !important;
    background: var(--ink) !important;
    color: var(--cloud) !important;
    box-shadow: none;
  }
  .scan-submit-trigger svg { stroke: var(--cloud) !important; }

  /* Scan dropdown — compact mobile card */
  .scan-submit-menu {
    border-radius: 14px;
    padding: 6px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(100% + 10px) !important;
    z-index: 100 !important;
  }
  .scan-submit-menu button {
    padding: 10px 14px !important;
    font-size: 15px;
    gap: 8px !important;
    margin-top: 0 !important;
    border-radius: 10px;
    min-height: 44px;
  }
  .scan-submit-menu button .lbl-title { font-size: 16px !important; }
  .scan-submit-menu button .lbl-tag { font-size: 12px !important; }
  .scan-submit-menu button .price { font-size: 13px !important; }
  .scan-submit-menu button .dot { display: none !important; }
  .scan-submit-menu button.is-recommended {
    box-shadow: inset 0 0 0 1.5px var(--gv-gold-mid, #C9A246) !important;
  }

  /* Scan meta row — subtle, doesn't compete with CTA */
  .scan-meta-row { color: var(--stone) !important; font-size: 11px !important; }
  .scan-detected { color: var(--graphite) !important; }

  /* Scan counter + detected indicator */
  .scan-detected { font-size: 10px; }
  .scan-meta-row { flex-wrap: wrap; gap: 8px; }


  /* ══════════════════════════════════════════════════════════════════════
     TICKER — crypto price strip (on dark hero)
     ══════════════════════════════════════════════════════════════════════ */
  .ticker {
    margin-top: 0px !important;
    flex: none !important;
    margin-bottom: 0px !important;
    padding-bottom: 12px !important;
    padding-top: 12px !important;
  }
  /* Homepage hero ticker — lock to the very bottom of the flex column hero
     (regardless of how tall .container ends up being). Belt + braces with
     min-height fix on section.hero:has(.hero-grid) above. */
  section.hero:has(.hero-grid) > .ticker {
    margin-top: auto !important;
  }
  @supports not (selector(:has(*))) {
    section.hero > .ticker {
      margin-top: auto !important;
    }
  }
  .ticker-inner { border-bottom: none !important; border-top: none !important; }
  .ticker-track { animation-duration: 20s !important; }
  .ticker-item { padding: 0 20px; font-size: 11px !important; color: var(--stone) !important; letter-spacing: 0.04em; }
  .ticker-item .sym { color: var(--graphite) !important; font-weight: 600; }
  .ticker-item .up { color: #16a34a !important; }
  .ticker-item .down { color: #dc2626 !important; }
  .ticker-item .up,
  .ticker-item .down { font-size: 10px !important; letter-spacing: 0.02em; }


  /* ══════════════════════════════════════════════════════════════════════
     VISUAL DEPTH SYSTEM — elevation, shadows, section rhythm
     What makes Chaleit/Lando/Apple feel "alive" vs. flat:
     1. Card elevation via box-shadow (not just border)
     2. Section-level color shifts (light ↔ dark rooms)
     3. Subtle border treatments that catch light
     4. CTA elements glow or elevate above their container
     ══════════════════════════════════════════════════════════════════════ */

  /* Card elevation — audience cards, price cards, GV slabs */
  .audience-card {
    box-shadow: 0 1px 3px rgba(15, 14, 12, 0.04), 0 6px 16px rgba(15, 14, 12, 0.06) !important;
    border: 1px solid rgba(201, 195, 183, 0.3) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }
  .price-card {
    box-shadow: 0 2px 8px rgba(15, 14, 12, 0.05), 0 8px 24px rgba(15, 14, 12, 0.08) !important;
    border: 1px solid rgba(201, 195, 183, 0.25) !important;
  }
  /* Featured/recommended price card gets extra lift */
  .price-card.featured,
  .price-card:nth-child(2) {
    box-shadow: 0 4px 12px rgba(226, 75, 31, 0.08), 0 12px 32px rgba(15, 14, 12, 0.12) !important;
    border-color: rgba(226, 75, 31, 0.2) !important;
  }
  .tier-card {
    box-shadow: 0 1px 3px rgba(15, 14, 12, 0.04), 0 4px 12px rgba(15, 14, 12, 0.06) !important;
  }
  .cap-band-card {
    box-shadow: 0 1px 3px rgba(15, 14, 12, 0.04), 0 4px 12px rgba(15, 14, 12, 0.06) !important;
  }

  /* GV verdict card — the premium showpiece */
  .gv-slab {
    box-shadow: 0 8px 32px rgba(15, 14, 12, 0.15), 0 2px 8px rgba(15, 14, 12, 0.08) !important;
  }

  /* Section-level visual rhythm — alternating temperature */
  #audiences {
    background: var(--cloud) !important;
  }
  #report {
    background: var(--cloud-deep) !important;
    color: var(--ink) !important;
  }
  #report .report-head h2 {
    color: var(--ink) !important;
  }
  #report .report-head .lede {
    color: var(--smoke) !important;
  }
  #report .kicker { color: var(--tango) !important; }

  /* Pricing section — subtle warm tint */
  #pricing {
    background: rgba(226, 75, 31, 0.02) !important;
  }


  /* ══════════════════════════════════════════════════════════════════════
     GLOBAL MOBILE TYPOGRAPHY
     Readable, not squinting. 14px body minimum. Justified where prose
     is long enough to warrant it, left-aligned for short blocks.
     ══════════════════════════════════════════════════════════════════════ */
  /* ── P2.1: Body text ≥ 16px (WCAG / typography research) ────────── */
  /* ── P2.2: Line height 1.5–1.6× (W3C guideline) ──────────────── */
  .audiences-head .lede,
  .report-head .lede,
  .pricing-head .lede,
  .tiers-head .lede,
  .ledger-head .lede,
  .audience-desc,
  .price-card .sub,
  .spotlight-verdict,
  .ledger-tagline,
  .briefing-bar-copy,
  .foot .blurb,
  .mark-body p,
  .gv-quote {
    font-size: 16px !important;
    line-height: 1.55;
  }

  .price-features li,
  .step p,
  .disclaimer-block p,
  .tier-card p {
    font-size: 16px !important;
    line-height: 1.55;
  }

  /* Kickers — Chaleit upgrade: uppercase, 12px, 600 weight, wide spacing */
  .kicker,
  .ledger-head .kicker,
  .audiences-head .kicker,
  .report-head .kicker,
  .pricing-head .kicker,
  .spotlight-kicker,
  .success-kicker,
  .why-kicker,
  .quote-kicker,
  .sc-section-label,
  .hero .kicker,
  .crowd-head .kicker,
  .download-kicker,
  .mark-kicker,
  .srm-result-kicker {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
  }


  /* ══════════════════════════════════════════════════════════════════════
     LEDGER SECTION — live activity pulse (Option C hybrid)
     Strip to: kicker + h2 + 3 compact feed rows + single CTA.
     Kill: lede paragraphs, spotlight, closing editorial, share buttons.
     Psychology: urgency + social proof via recency, not essays.
     ══════════════════════════════════════════════════════════════════════ */
  section#ledger.tight {
    padding-top: 32px;
    padding-bottom: 36px;
  }

  .ledger-head { margin-bottom: 20px; }
  .ledger-head h2 { font-size: clamp(26px, 6.5vw, 36px); }
  /* Lede — replace both paragraphs with condensed copy via pseudo-element */
  .ledger-head .lede {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    height: 0;
  }
  .ledger-head .lede:first-of-type {
    height: auto;
  }
  .ledger-head .lede:first-of-type::before {
    content: "Private audits are just paid secrets. The Live Read is different; it\2019s security as a spectator sport. When you drop a GhostLabs verdict into a group chat, you destroy the market\2019s ability to ignore the risk. Once the contract is exposed, inaction becomes a choice.\A\AOpen a row. Forward the signal. Let the collective \2018knowing\2019 do the work.";
    font-size: 15px;
    line-height: 1.55;
    color: var(--cloud);
    display: block;
    white-space: pre-line;
    margin-top: 12px;
    opacity: 0.65;
  }

  /* Stats strip — single column on mobile */
  .ledger-stats-strip {
    grid-template-columns: 1fr;
  }
  .ledger-stats-strip .lstat {
    border-right: 0;
    border-bottom: 1px solid var(--fog);
    padding: 14px 20px;
  }
  .ledger-stats-strip .lstat:last-child {
    border-bottom: 1px solid var(--ink);
  }

  /* Featured spotlight — HIDDEN on mobile. Feed rows are the proof. */
  .featured-spotlight { display: none !important; }

  /* Closing editorial paragraphs — HIDDEN. CTA speaks for itself. */
  .ledger-tagline { display: none !important; }

  /* Share buttons in feed — keep visible for .lrow cards */

  /* Secondary CTA — HIDDEN. One CTA only. Sticky bar handles upsell. */
  .ledger-cta-pair .btn-outline { display: none !important; }
  .ledger-cta-pair .btn-solid { width: 100%; justify-content: center; }
  .ledger-cta-pair { margin-top: 20px; }

  /* P3.1: Touch targets ≥ 44×44px (WCAG 2.2 AA) */
  /* Share buttons — visual 32px icon with 44px tap area via padding */
  .share-btn,
  .spotlight-share-row .share-btn,
  .ledger-feed .share-btn {
    width: 32px !important; height: 32px !important;
    min-width: 44px !important; min-height: 44px !important;
    padding: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .share-btn svg,
  .spotlight-share-row .share-btn svg,
  .ledger-feed .share-btn svg {
    width: 16px !important; height: 16px !important;
  }

  /* Feed — show only 1 .lrow card on mockup homepage (latest scan).
     Scoped to #ledger so the full ledger.html page shows all rows. */
  .ledger-feed {
    display: block !important;
    border-top: none !important;
  }
  #ledger .ledger-feed .lrow:nth-child(n+2) {
    display: none !important;
  }

  /* Old ledger rows (fallback) */
  .ledger-row {
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
  }
  .ledger-time  { grid-column: 1; }
  .ledger-result { grid-column: 2; text-align: right; }
  .ledger-name  { grid-column: 1 / -1; }
  .ledger-addr  { grid-column: 1; font-size: 12px; }
  .ledger-flag  { grid-column: 2; text-align: right; }
  .ledger-link  { display: none; }

  /* "Browse full ledger" link — keep but subtle */
  .ledger-more-cta { margin-top: 16px; text-align: center; }
  .ledger-more-cta a { font-size: 13px; color: rgba(240, 238, 233, 0.5); }

  /* ── .lrow dark-mode overrides for mobile ────────────────────────── */
  #ledger.dark-mode .lrow {
    background: rgba(240, 238, 233, 0.04) !important;
    border-color: rgba(240, 238, 233, 0.1) !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  #ledger.dark-mode .lrow-info .name { color: var(--cloud) !important; }
  #ledger.dark-mode .lrow-info .ticker { color: var(--tango) !important; }
  #ledger.dark-mode .lrow-info .meta-line { color: rgba(240, 238, 233, 0.45) !important; }
  #ledger.dark-mode .lrow-info .score-num { color: var(--cloud) !important; }
  #ledger.dark-mode .lrow-info .score-num.lo { color: var(--tango) !important; }
  #ledger.dark-mode .lrow-info .score-num.mid { color: #C9A246 !important; }
  #ledger.dark-mode .lrow-info .score-num.hi { color: #2D6A4F !important; }
  #ledger.dark-mode .lrow-info .score-num.elite { color: #C9A246 !important; }
  #ledger.dark-mode .lrow-info .tier-name { color: rgba(240, 238, 233, 0.5) !important; }
  #ledger.dark-mode .sentiment-bar { background: rgba(240, 238, 233, 0.08) !important; }
  #ledger.dark-mode .sentiment-meta { color: rgba(240, 238, 233, 0.4) !important; }
  #ledger.dark-mode .sentiment-meta .label-trust { color: #4DA67A !important; }
  #ledger.dark-mode .sentiment-meta .label-wary { color: #C9A246 !important; }
  #ledger.dark-mode .sentiment-meta .label-avoid { color: var(--tango) !important; }
  #ledger.dark-mode .vote-btn {
    background: rgba(240, 238, 233, 0.06) !important;
    border-color: rgba(240, 238, 233, 0.12) !important;
    color: rgba(240, 238, 233, 0.5) !important;
    white-space: nowrap !important;
    font-size: 7.5px !important;
    padding: 6px 4px !important;
    letter-spacing: 0.08em !important;
  }
  #ledger.dark-mode .vote-btn .dot { opacity: 0.7; }
  #ledger.dark-mode .lrow-actions .share-btn {
    border-color: rgba(240, 238, 233, 0.15) !important;
    color: rgba(240, 238, 233, 0.5) !important;
  }
  #ledger.dark-mode .lrow-actions .open-btn {
    background: var(--cloud) !important;
    color: var(--ink) !important;
    border-color: var(--cloud) !important;
  }
  #ledger.dark-mode .verified-badge {
    color: #C9A246 !important;
    border-color: #C9A246 !important;
    background: rgba(201, 162, 70, 0.12) !important;
  }

  /* Hide legacy .row elements — .lrow cards replace them */
  .ledger-feed .row { display: none !important; }

  /* Dark mode stats + CTA */
  #ledger.dark-mode .ledger-cta-pair .btn { width: 100%; justify-content: center; }
  #ledger.dark-mode .ledger-stats-strip .lstat {
    border-right: 0;
    border-bottom: 1px solid var(--on-ink-border);
  }
  #ledger.dark-mode .ledger-stats-strip .lstat:last-child {
    border-bottom: 1px solid var(--on-ink-border);
  }


  /* ══════════════════════════════════════════════════════════════════════
     AUDIENCES — stacked cards (v6.6 — Session 5)
     Converted from horizontal scroll carousel to vertical stack.
     ══════════════════════════════════════════════════════════════════════ */
  #audiences { padding: 48px 0; }
  .audiences-head { margin-bottom: 12px; }
  .audiences-head h2 { font-size: clamp(28px, 7vw, 40px); }

  .audiences-grid {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    padding: 0 20px;
    overflow: visible;
  }
  .audiences-grid::-webkit-scrollbar { display: none; }
  .audiences-grid .audience-card {
    flex: none;
    width: 100%;
    border-bottom: 0.625px solid rgba(84, 79, 71, 0.15);
  }
  .audiences-grid .audience-card:last-child { border-bottom: none; }
  .audiences-grid .audience-card:nth-child(1),
  .audiences-grid .audience-card:nth-child(3) { display: flex !important; }

  .audience-card { padding: 22px 20px; gap: 12px; }
  .audience-card.aud-card-jtbd { padding: 22px 20px; }
  .audience-card h3 { min-height: auto; font-size: 20px; }
  .audience-card h3.aud-quote { font-size: clamp(17px, 4.5vw, 22px); }

  /* Progressive disclosure — hide complex proof cards on mobile */
  .audience-card .aud-proof { display: none !important; }
  .audience-card .features { display: none !important; }

  .audience-card .audience-desc {
    font-size: 16px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .audience-card .cta-row { padding-top: 12px; }

  /* Mark strip */
  .mark-strip { margin-top: 16px; padding-top: 16px; }
  .mark-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center;
    justify-items: center;
  }
  .mark-seal { width: 106px; }
  .mark-body { align-items: center; }
  .mark-body p { max-width: none; font-size: 16px; line-height: 1.55; }
  .mark-link { font-size: 15px !important; padding: 10px 20px !important; min-height: 40px; }
  .aud-proof-verdict .aud-proof-label::after { white-space: nowrap; }


  /* ══════════════════════════════════════════════════════════════════════
     REPORT / CONTRAST SECTION (GV VERDICT CARDS)
     The 3D flip cards are the premium moment. Keep them impactful.
     ══════════════════════════════════════════════════════════════════════ */
  .report-head h2 { font-size: clamp(28px, 7vw, 40px); }

  .report-strip { display: none !important; }

  .contrast-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* Show only 1 card on mobile — the fail card (more dramatic) */
  .contrast-grid > .gv-cell:nth-child(1) { display: none !important; }
  .contrast-grid:has(.gv-slab) {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  @supports not (selector(:has(*))) {
    .contrast-grid.contrast-grid--has-cards {
      grid-template-columns: 1fr;
      justify-items: center;
    }
  }

  /* GV Card — mobile sizing, keep premium feel */
  .gv-slab {
    max-width: 340px;
    padding: 12px;
    transform: none;
  }
  .gv-slab:hover { transform: none; }
  .gv-num { font-size: 72px; }
  .gv-nm,
  .gv-tier-name,
  .gv-ad,
  .gv-tk,
  .gv-action { font-size: 11px; }
  .gv-quote {
    font-size: 12px;
    margin: 0 12px 12px;
    padding: 10px 14px;
  }
  .gv-cb { display: none !important; }
  .gv-top { padding: 8px 10px; gap: 6px; }
  .gv-top .gv-wordmark,
  .gv-top .gv-chain { font-size: 11px; }
  .gv-top-l { gap: 2px !important; }
  .gv-lockup { gap: 5px !important; }
  .gv-mark { width: 14px !important; height: 18px !important; }
  .gv-wm { font-size: 14px !important; }
  .gv-subtitle { font-size: 11px !important; padding-left: 19px !important; }
  .gv-top-r { gap: 4px !important; }
  .gv-id { padding: 12px 14px 6px; }
  .gv-score-row { padding: 4px 14px 2px; }
  .gv-bt { padding: 10px 12px 12px; }

  .gv-share { width: 24px !important; height: 24px !important; }
  .gv-share svg { width: 12px !important; height: 12px !important; }
  .gv-qr-mini { width: 24px !important; height: 24px !important; }

  /* Back face */
  .gv-bk-pillar,
  .gv-bk-pillar-num,
  .gv-bk-find,
  .gv-bk-find-n,
  .gv-bk-find-flag,
  .gv-bk-h,
  .gv-bk-id-nm,
  .gv-bk-id-tk,
  .gv-bk-id-ad { font-size: 11px; }
  .gv-bk-mini-num { font-size: 28px; }
  .gv-bk-mini-tier { font-size: 11px; }
  .gv-bk-cta { font-size: 12px; padding: 10px 12px; }
  .gv-bk-cta-label { font-size: 11px; }
  .gv-bk-sig,
  .gv-bk-sig-meta,
  .gv-bk-verify-label,
  .gv-bk-verify-url,
  .gv-bk-verify-cta { font-size: 11px; }
  .gv-bk-qr { width: 60px; height: 60px; }

  /* Report panel (detailed report) */
  .report-panel .score-row {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 20px;
  }
  .score-num { font-size: 72px; }
  .findings { padding: 16px 20px 20px; }
  .finding { grid-template-columns: 1fr auto; }
  .locked-band { padding: 16px 20px; flex-wrap: wrap; gap: 12px; }


  /* ══════════════════════════════════════════════════════════════════════
     TIER GRID
     ══════════════════════════════════════════════════════════════════════ */
  .tiers-head {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 16px;
  }
  .tiers-head h2 { font-size: 32px; }
  .tier-grid { grid-template-columns: repeat(2, 1fr); }
  .tier-card { min-height: auto; padding: 18px; }
  .tier .tier-pct,
  .tier-pct { font-size: 48px; }
  .tier .tier-name,
  .tier-name { font-size: 20px; }


  /* ══════════════════════════════════════════════════════════════════════
     SECONDARY-PAGE TYPOGRAPHY — partners, careers, press, brand, etc.
     Establishes clear hierarchy on pages that use inline CSS font scales.
     Desktop inline sizes are too large/flat for 390px — override here.
     ══════════════════════════════════════════════════════════════════════ */

  /* — Shared patterns (apply across multiple secondary pages) — */
  .sec-head .sub { font-size: clamp(15px, 4vw, 18px); }
  .faq-q { font-size: 18px !important; font-weight: 600; }
  .faq-a p { font-size: 15px; line-height: 1.6; }

  /* — hero-proposal.html — h1 at 96px desktop has no mobile scaling — */
  .hero-proposal h1,
  section.hero .headline {
    font-size: clamp(32px, 8vw, 48px) !important;
    line-height: 1.08;
    letter-spacing: -0.03em;
  }

  /* — contact.html — form hierarchy too flat on mobile — */
  .contact-form-wrap h3 { font-size: 22px !important; }
  .info-label { font-size: 13px !important; }
  .info-value { font-size: 16px !important; }
  .info-note { font-size: 14px !important; line-height: 1.5; }

  /* — insights/deep-audit-report.html — score ring too large — */
  .composite-ring .ring-num,
  #report .composite-ring .ring-num {
    font-size: clamp(28px, 7vw, 40px) !important;
  }

  /* — insights/scan-trump-solana.html — score + token name overflow — */
  .sc-ring-num { font-size: clamp(28px, 7vw, 40px) !important; }
  .sc-token-name { font-size: 24px !important; }

  /* — brand.html — display typography at 64-88px desktop, no mobile scaling — */
  .brand-sec .sec-head h2,
  body.brand-page .sec-head h2 {
    font-size: clamp(32px, 8vw, 48px) !important;
  }
  .wm.lg { font-size: 32px !important; }
  .t-88 { font-size: 48px !important; }
  .t-56 { font-size: 32px !important; }
  .t-32 { font-size: 22px !important; }


  /* ══════════════════════════════════════════════════════════════════════
     CAPABILITIES BAND
     ══════════════════════════════════════════════════════════════════════ */
  section.capabilities-band { padding: 48px 0; }
  .cap-band-head {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 16px;
    padding: 0 20px;
  }
  .cap-band-head .lede { font-size: 14px; }
  .cap-band-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 20px;
  }
  .cap-band-card { min-height: auto; padding: 20px 18px; }
  .cap-band-card h3 { font-size: 17px; }
  .cap-band-card p { font-size: 16px; line-height: 1.55; }


  /* ══════════════════════════════════════════════════════════════════════
     CAPABILITY PAGES — alignment & spacing fixes
     _capabilities.css uses hardcoded 48px padding on inner containers
     and asymmetric deliverable padding for its 2-col desktop grid.
     On mobile (1-col), everything must be flush and uniform.
     ══════════════════════════════════════════════════════════════════════ */

  /* Inner containers with hardcoded 48px padding */
  .cap-hero .inner,
  .reframe-grid,
  .final-cta-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Hero — tighten for mobile */
  section.cap-hero {
    padding: 12px 0 48px;
  }
  /* Universal top-padding compression for every secondary-page hero class
     so the kicker/H1 sits close to the nav across the whole mega-menu */
  section.why-hero,
  section.ledger-hero,
  section.careers-hero,
  section.hero-press,
  section.imp-hero,
  section.hero-gs,
  section.hero:not(:has(.hero-grid)) {
    padding-top: 12px !important;
  }
  .cap-hero .inner {
    gap: 0 !important;
  }
  .cap-eyebrow {
    margin-bottom: 48px !important;  /* push eyebrow up, away from the hero */
  }
  .cap-hero h1 {
    font-size: clamp(32px, 8vw, 48px);
    line-height: 1.08;
  }
  .cap-hero .lede {
    font-size: 16px;
    line-height: 1.55;
  }

  /* Deliverables — normalize padding for single-column layout */
  .deliverables {
    grid-template-columns: 1fr !important;
  }
  .deliverable {
    padding: 20px 0 !important;
  }
  .deliverable:nth-child(odd) {
    border-right: 0 !important;
    padding-left: 0 !important;
  }
  .deliverable:nth-child(even) {
    padding-right: 0 !important;
  }

  /* Deliverable body text — prevent sub-16px on mobile */
  .deliverable .body p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* Steps grid — single column on narrow screens */
  .steps {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Stats grid — 2 cols on mobile, tighter padding, smaller numbers */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stat {
    padding: 20px 12px !important;
  }
  .stat .num {
    font-size: 40px !important;
  }

  /* Trust grid — single column, symmetric padding */
  .trust-grid {
    grid-template-columns: 1fr !important;
  }
  .trust {
    padding: 20px 0 !important;
  }
  .trust:nth-child(odd) {
    padding-left: 0 !important;
  }
  .trust:nth-child(2n) {
    border-right: 0 !important;
  }

  /* Reframe section — less vertical breathing room */
  .reframe {
    padding: 64px 0;
  }

  /* Final CTA — tighten vertical */
  .final-cta {
    padding: 72px 0;
  }


  /* ══════════════════════════════════════════════════════════════════════
     PRICING — the decision stage
     Cards stack vertically on mobile. No carousel — users need to see
     all options to make a decision. Recommended card gets visual weight.
     ══════════════════════════════════════════════════════════════════════ */
  #pricing {
    padding: 48px 0;
    background: var(--ink) !important;
    color: var(--cloud) !important;
  }
  .pricing-head { margin-bottom: 20px; }
  .pricing-head h2 {
    font-size: clamp(28px, 7vw, 40px);
    color: var(--cloud) !important;
  }
  .pricing-head h2 .accent { color: var(--gold-bright, #D4A017) !important; }
  .pricing-head .lede {
    color: rgba(240, 238, 233, 0.72) !important;
  }
  .pricing-proof { display: none !important; }

  .pricing-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .price-card {
    flex: none !important;
    scroll-snap-align: none;
    padding: 24px 20px 20px;
    border-radius: 14px;
  }

  /* Remove desktop min-heights — let content flow naturally */
  .price-card .k { margin-bottom: 6px !important; min-height: auto !important; }
  .price-card .pc-persona {
    font-size: 10px;
    margin-bottom: 10px !important;
    min-height: auto !important;
  }
  .price-card h3 {
    min-height: auto !important;
    font-size: 22px;
    margin-bottom: 8px !important;
  }
  .price-card .sub {
    min-height: auto !important;
    font-size: 14px !important;
    margin-bottom: 12px !important;
  }

  /* Price tag — centered, prominent */
  .price-tag {
    margin-bottom: 8px !important;
    align-items: center !important;
    text-align: center !important;
  }
  .price-tag .amount { font-size: 56px; }
  .price-note { margin-bottom: 8px !important; text-align: center !important; }
  .price-toggle { align-self: center !important; }
  .price-cta-row { margin-top: 8px !important; }
  .price-features li { font-size: 14px; }

  /* Recommended card — tango border to draw the eye */
  .price-card.recommended {
    border: 2px solid var(--tango);
  }

  /* Collapsible feature lists — show 3 items, expand on tap */
  .price-features {
    position: relative;
    max-height: 10em;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }
  .price-features.is-expanded { max-height: 600px; }
  .price-features::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--cloud));
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .price-card.inverse .price-features::after {
    background: linear-gradient(to bottom, transparent, var(--ink));
  }
  .price-features.is-expanded::after { opacity: 0; }

  .price-features-toggle {
    display: block;
    width: 100%;
    background: none;
    border: none;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--smoke);
    padding: 8px 0 0;
    cursor: pointer;
    text-align: center;
  }
  .price-card.inverse .price-features-toggle { color: rgba(240, 238, 233, 0.6); }
  .price-features-toggle::after { content: ' ▾'; }
  .price-features-toggle.is-expanded::after { content: ' ▴'; }

  /* Steps / How-it-works */
  .steps { grid-template-columns: 1fr 1fr; gap: 20px; }
  .step h3 { font-size: 20px; }

  /* Chains grid */
  .chains { grid-template-columns: repeat(2, 1fr); }

  /* Disclaimer */
  .disclaimer-block { padding: 8px 0 8px 20px; margin-top: 32px; }


  /* ══════════════════════════════════════════════════════════════════════
     STATEMENT / ZIG-ZAG / URL-BAND
     ══════════════════════════════════════════════════════════════════════ */
  section.statement { padding: 48px 0; }
  .statement .inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .statement h2 { font-size: clamp(28px, 7vw, 40px); }

  .zig { grid-template-columns: 1fr; gap: 36px; }

  .url-band .inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .final-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .lb-grid { grid-template-columns: 1fr; gap: 32px; }


  /* ══════════════════════════════════════════════════════════════════════
     BRIEFING BAR — newsletter capture
     ══════════════════════════════════════════════════════════════════════ */
  .briefing-bar-inner {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  .briefing-bar-copy { min-width: 0; font-size: 16px; line-height: 1.55; }
  .briefing-form { width: 100%; max-width: 100%; }
  .briefing-form input[type="email"] { width: 100%; font-size: 16px; }
  .briefing-form button { font-size: 15px; min-height: 44px; }


  /* ══════════════════════════════════════════════════════════════════════
     STICKY MOBILE CTA — always-visible conversion bar
     Frosted glass, tango pill, slides up after hero scroll.
     ══════════════════════════════════════════════════════════════════════ */
  .mobile-sticky-cta {
    display: block;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 49;
    background: rgba(240, 238, 233, 0.05);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
    padding: 8px 20px 10px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    border-top: 1px solid rgba(15, 14, 12, 0.06);
  }
  .mobile-sticky-cta.is-visible { transform: translateY(0); }
  .mobile-sticky-cta > a,
  .mobile-sticky-cta > button {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--tango);
    color: var(--cloud);
    font-family: var(--f-display);
    font-size: 15px;
    font-weight: 600;
    padding: 14px 24px;
    min-height: 48px;
    border-radius: 999px;
    text-decoration: none;
    letter-spacing: -0.01em;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none;
  }


  /* ══════════════════════════════════════════════════════════════════════
     FOOTER — accordion nav, compact, professional
     ══════════════════════════════════════════════════════════════════════ */
  footer { padding: 36px 0; }

  .foot {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    margin-bottom: 24px;
    padding: 0 20px;
  }
  .foot-col:first-child {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(201,162,70,.2);
  }
  .foot-col:first-child .blurb {
    font-size: 16px;
    line-height: 1.55;
    max-width: none !important;
  }

  /* Accordion headers */
  .foot-col h4 {
    font-size: 12px;
    margin-bottom: 0 !important;
    padding: 14px 0;
    border-bottom: 1px solid rgba(201,162,70,.15);
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    -webkit-user-select: none;
    user-select: none;
  }
  .foot-col h4::after {
    content: '+';
    font-size: 16px;
    font-weight: 300;
    color: #C9A246;
    transition: transform .3s ease;
    line-height: 1;
  }
  .foot-col h4.foot-open::after { content: '−'; }

  .foot-col ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.22,1,.36,1);
    gap: 0 !important;
    padding-left: 0;
  }
  .foot-col h4.foot-open + ul { max-height: 500px; }
  .foot-col ul + h4 { margin-top: 0 !important; }
  .foot-col li a {
    font-size: 15px;
    padding: 12px 0;
    display: block;
    border-bottom: 1px solid rgba(201,162,70,.06);
    min-height: 44px;
  }
  .foot-col li:last-child a { border-bottom: none; padding-bottom: 12px; }
  .foot-col:first-child h4 { display: none; }

  .foot-bottom {
    flex-direction: column;
    gap: 8px;
    font-size: 11px;
    text-align: center;
  }
  .foot-bottom .foot-disclaimer { font-size: 11px; }
  .foot-bottom-left { max-width: none; flex: 1 1 auto; }


  /* ══════════════════════════════════════════════════════════════════════
     QUOTE MODAL — floating card, blurred backdrop
     ══════════════════════════════════════════════════════════════════════ */
  .quote-modal { padding: 20px 20px !important; }
  .quote-backdrop {
    background: rgba(15, 14, 12, 0.55) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
    backdrop-filter: blur(12px) saturate(1.4) !important;
  }
  .quote-panel {
    padding: 24px 20px 20px;
    max-width: 100%;
    max-height: calc(100vh - 80px) !important;
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 24px 64px rgba(0,0,0,0.12) !important;
  }
  .quote-header { margin-bottom: 12px; }
  .quote-header h2 { font-size: 22px; margin-bottom: 6px !important; }
  .quote-header p { display: none; }
  .quote-kicker { margin-bottom: 8px !important; font-size: 10px !important; }
  .q-row { grid-template-columns: 1fr 1fr; gap: 12px; }
  .q-field { margin-bottom: 12px; }
  .q-field label { font-size: 10px !important; margin-bottom: 4px; }
  .q-field input,
  .q-field select,
  .q-field textarea {
    font-size: 16px !important;
    padding: 10px 0 !important;
  }
  .q-field textarea { min-height: 44px; }
  .q-submit { font-size: 16px; padding: 12px 20px; margin-top: 8px; min-height: 44px; }
  .q-submit svg { display: none; }
  .q-status { font-size: 11px; margin-top: 8px; min-height: 14px; }
  .quote-close { font-size: 18px; width: 36px; height: 36px; top: 12px; right: 14px; }


  /* ══════════════════════════════════════════════════════════════════════
     SCAN RESULT MODAL (SRM) — the payoff moment
     ══════════════════════════════════════════════════════════════════════ */
  .srm-modal {
    padding: 24px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .srm-panel { max-width: 100%; }
  .srm-loading {
    padding: 36px 20px 28px;
    border-radius: 20px !important;
  }
  .srm-error {
    padding: 32px 24px 28px !important;
    gap: 14px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(15, 14, 12, 0.08) !important;
    box-shadow: 0 8px 32px rgba(15, 14, 12, 0.12) !important;
  }
  .srm-error-mark { width: 44px !important; height: 44px !important; font-size: 22px !important; }
  .srm-error-title { font-size: 19px !important; }
  .srm-error-body { font-size: 15px !important; line-height: 1.55 !important; color: var(--stone) !important; }
  .srm-error-actions { gap: 10px !important; margin-top: 8px !important; }
  .srm-error-actions button { font-size: 15px !important; padding: 12px 22px !important; min-height: 44px; border-radius: 999px !important; }

  .srm-result-footer {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 18px 20px;
  }
  .srm-result-cta { justify-content: center; width: 100%; }
  .srm-card-host .gv-cell { max-width: 100%; }
  .srm-close { top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50% !important; }
  .srm-card-host .gv-slab[data-flipped="true"] { min-height: auto; }

  /* Capture form */
  .srm-capture { max-width: 100%; }
  .srm-capture > div:not(.srm-capture-label):not(.srm-capture-status) { font-size: 16px !important; }
  .srm-capture-label { font-size: 12px !important; }
  .srm-capture-row { flex-direction: column; }
  .srm-capture-row input[type="email"] { font-size: 16px; padding: 12px 14px; }
  .srm-capture-row button { width: 100%; font-size: 15px !important; padding: 10px 18px !important; min-height: 40px; }


  /* ══════════════════════════════════════════════════════════════════════
     PAGE HEAD (verdict page top bar)
     ══════════════════════════════════════════════════════════════════════ */
  .page-head .meta { gap: 16px; overflow-x: auto; flex-wrap: wrap; }


  /* ══════════════════════════════════════════════════════════════════════
     OVERFLOW PREVENTION — monospace, addresses, code
     ══════════════════════════════════════════════════════════════════════ */
  pre, code, .aud-api-block, .aud-api-json {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    word-break: break-all;
    white-space: pre-wrap;
    font-size: 12px;
  }
  .ledger-feed .row .addr,
  .spotlight-addr,
  .vc-addr,
  .gv-addr {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }


  /* ══════════════════════════════════════════════════════════════════════
     VISUAL RHYTHM — section transitions (room-by-room feel)
     ══════════════════════════════════════════════════════════════════════ */
  #audiences,
  #pricing {
    border-top: none !important;
  }

  /* Pricing CTA glow — these are the money buttons */
  .price-card .btn-solid {
    box-shadow: 0 2px 8px rgba(15, 14, 12, 0.1), 0 4px 16px rgba(15, 14, 12, 0.08) !important;
  }
  .price-card:nth-child(2) .btn-solid,
  .price-card.featured .btn-solid {
    box-shadow: 0 2px 8px rgba(226, 75, 31, 0.2), 0 4px 16px rgba(226, 75, 31, 0.12) !important;
  }

  .partner-pitch { padding: 40px 0; }
  .partner-pitch .pricing-head { margin-bottom: 28px; }
  .partner-pitch .pricing-head h2 { font-size: clamp(24px, 6vw, 36px); }

  .final { padding: 48px 0; }
  .final h2 { font-size: clamp(32px, 8vw, 48px); }
  .final .cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .final .cta-row .btn { width: 100%; justify-content: center; text-align: center; }
  .final .cta-row .mono { margin-left: 0; text-align: center; }

  .lb h3 { font-size: 20px; }
  .lb-row { font-size: 12px; }


  /* ══════════════════════════════════════════════════════════════════════
     TOUCH TARGETS — 44px minimum for CTAs, 44px for all interactive (WCAG 2.2 AA)
     Benchmark-calibrated: CertiK 44px hero, Linear/Vercel 32px nav.
     ══════════════════════════════════════════════════════════════════════ */
  .btn, .btn-outline, .btn-lg { min-height: 44px; }
  .share-btn,
  .spotlight-share-row .share-btn {
    min-width: 44px;
    min-height: 44px;
  }


  /* ══════════════════════════════════════════════════════════════════════
     BUTTON SYSTEM — tiered sizing for mobile
     Primary CTAs: 14-15px, prominent. Utility: 13px, compact.
     ══════════════════════════════════════════════════════════════════════ */
  /* P3.1 + P4.7: Buttons — benchmark-calibrated sizing
     General: 40px / 15px (Linear/Vercel pattern)
     Primary CTAs: 44px / 16px (CertiK hero pattern) */
  .btn, .btn-outline {
    font-size: 15px !important;
    padding: 10px 20px !important;
    white-space: nowrap;
    text-align: center;
    min-height: 40px;
    border-radius: 999px !important;
  }

  /* Secondary-page hero CTAs — full-width stacked column */
  section.hero:not(:has(.hero-grid)) .btn {
    display: flex !important;
    width: 100%;
    justify-content: center;
  }
  .btn-solid.btn-lg,
  .btn.btn-lg {
    font-size: 16px !important;
    padding: 12px 24px !important;
    min-height: 44px;
    border-radius: 999px !important;
  }
  .price-card .btn-solid,
  .price-cta-row .btn-solid,
  .ledger-cta-pair .btn-solid,
  .report-cta-row .btn-solid {
    font-size: 16px !important;
    padding: 12px 22px !important;
    min-height: 44px;
  }
  .pc-link { font-size: 12px !important; }

  .upsell-inline,
  .spotlight-actions .upsell-inline,
  .ledger-feed .upsell-inline {
    white-space: normal;
    word-break: break-word;
  }

  .price-toggle { white-space: normal; text-align: center; }
  .price-toggle label { white-space: nowrap; }

  .vc-action { white-space: normal; }


  /* ══════════════════════════════════════════════════════════════════════
     MICROINTERACTIONS — tap feedback (Apple HIG: scale 0.97 on press)
     ══════════════════════════════════════════════════════════════════════ */
  .btn:active,
  .btn-lg:active,
  .btn-solid:active,
  .btn-outline:active,
  .nav-quote-btn:active,
  .hamburger-btn:active,
  .mobile-nav-overlay a:active,
  .mobile-nav-close:active,
  .price-card .btn:active,
  .scan-submit-main:active,
  .scan-submit-trigger:active,
  .price-features-toggle:active,
  .mobile-sticky-cta a:active,
  .mobile-sticky-cta button:active,
  .foot-col h4:active,
  .share-btn:active,
  .upsell-inline:active,
  .cc-btn:active,
  .mark-link:active,
  .q-submit:active,
  .briefing-form button:active {
    transform: scale(0.97);
    opacity: 0.85;
    transition: transform 0.1s ease, opacity 0.1s ease;
  }
  .audience-card:active,
  .price-card:active,
  .cap-band-card:active,
  .tier-card:active {
    transform: scale(0.985);
    opacity: 0.9;
    transition: transform 0.1s ease, opacity 0.1s ease;
  }


  /* ══════════════════════════════════════════════════════════════════════
     OVERFLOW SAFETY NET — catch remaining desktop overflows
     ══════════════════════════════════════════════════════════════════════ */
  .pricing-grid,
  .audiences-grid,
  .tier-grid,
  .cap-band-grid,
  .contrast-grid,
  .steps,
  .chains,
  .foot,
  .mark-grid,
  .lb-grid,
  .zig,
  .hero-grid,
  .hero-ladder,
  .spotlight-body,
  .ledger-stats-strip {
    max-width: 100%;
  }

} /* end @media 1000px */


/* ═══════════════════════════════════════════════════════════════════════
   LARGE PHONE — max-width: 768px
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .cap-band-grid { grid-template-columns: 1fr; }
  .tier-grid { grid-template-columns: 1fr; }
  .chains { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════
   PHONE — max-width: 600px
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Nav — compact */
  nav.top .inner { padding: 8px 20px !important; }
  .wordmark { font-size: 18px; gap: 8px; }
  .wordmark .mark { width: 18px; height: 24px; }
  /* P3.1: Keep hamburger at 44px minimum tap target — !important beats _capabilities.css 36px override */
  .hamburger-btn { width: 44px !important; height: 44px !important; }
  .hamburger-btn svg { width: 22px !important; height: 22px !important; }

  /* Hero headline — still dominant at 600px */
  section.hero:has(.hero-grid) h1 { font-size: clamp(62px, 16.4vw, 84px) !important; }
  section.hero:has(.hero-grid) .hero-subhead { font-size: clamp(29.1px, 7.84vw, 39.2px) !important; }

  /* Containers — tighter gutters */
  .container,
  .container-sm,
  .statement .inner,
  .final-inner,
  .url-band .inner,
  .ticker {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .cap-band-head,
  .cap-band-grid { padding: 0 20px !important; }

  /* Section spacing */
  section { padding: 36px 0; }
  section.tight { padding: 24px 0; }

  /* P3.7: Form inputs never below 16px at any breakpoint */
  .scan-submit-main { font-size: 16px !important; }
  .scan-box-input { font-size: 16px; }

  /* GV Cards */
  .gv-slab { max-width: 310px; padding: 10px; }
  .gv-num { font-size: 64px; }

  /* Pricing */
  .price-tag .amount { font-size: 48px; }
  .price-card { padding: 22px 18px 18px; }

  /* Audiences */
  .aud-verdict-score { font-size: 28px; }
  .aud-badge-seal { width: 100px; }
  .audience-card .cta-row {
    flex-direction: column;
    gap: 10px;
  }
  .audience-card .cta-row .btn {
    width: 100%;
    justify-content: center;
  }

  /* Briefing */
  .briefing-form { flex-direction: column; }
  .briefing-form input[type="email"] { width: 100%; }
  .briefing-form button { width: 100%; }

  /* Score numbers */
  .score-num { font-size: 60px; }
  .vc-score { font-size: 56px; }
  .vc-score-row { grid-template-columns: 1fr; gap: 12px; }

  /* Spotlight */
  .spotlight-score .num { font-size: 36px; }

  /* Ledger */
  .ledger-stats-strip .lstat { padding: 12px 20px; }
  .featured-spotlight { padding: 14px 20px 16px; }

  /* Footer — P2.1: body text ≥ 16px */
  .foot-col li a { font-size: 16px; }
  .foot { gap: 0; }
  .foot-bottom { font-size: 12px; }

  /* Quote modal */
  .quote-panel { padding: 20px 20px 16px; }
  .q-row { grid-template-columns: 1fr; gap: 0; }
  .q-field { margin-bottom: 10px; }
  .quote-header h2 { font-size: 20px; }

  /* Pricing CTAs */
  .price-card .btn { width: 100%; justify-content: center; }

  /* Dark mode phone */
  #ledger.dark-mode .featured-spotlight { padding: 14px 20px 16px; }
  #ledger.dark-mode .spotlight-score .num { font-size: 32px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   SMALL PHONE — max-width: 480px
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  section.hero:has(.hero-grid) h1 { font-size: clamp(55px, 14.6vw, 72px) !important; }
  section.hero:has(.hero-grid) .hero-subhead { font-size: clamp(26.6px, 6.96vw, 34.2px) !important; }
  .price-tag .amount { font-size: 42px; }
  .gv-num { font-size: 56px; }
  .gv-slab { max-width: 290px; padding: 8px; }
  .score-num { font-size: 52px; }
  .vc-score { font-size: 48px; }
  .spotlight-score .num { font-size: 32px; }
  section.capabilities-band { padding: 40px 0; }
  .cap-band-card { padding: 16px 14px; }
  .tier-card { padding: 16px; }
  .tiers-head h2 { font-size: 28px; }
  .audience-card { padding: 20px 16px; }
  .mark-seal { width: 86px; }
  .step h3 { font-size: 18px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   TINY PHONE — max-width: 380px (iPhone SE, Galaxy S mini)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  section.hero:has(.hero-grid) h1 { font-size: clamp(49px, 13vw, 62px) !important; }
  section.hero:has(.hero-grid) .hero-subhead { font-size: clamp(22.8px, 6.20vw, 29.1px) !important; }
  .wordmark { font-size: 16px; }
  .price-tag .amount { font-size: 36px; }
  .gv-num { font-size: 48px; }
  .gv-slab { max-width: 260px; padding: 6px; }
  .gv-quote { font-size: 11px; padding: 8px 10px; margin: 0 10px 10px; }
  .gv-top { padding: 8px 10px; gap: 6px; }
  .gv-id { padding: 10px 12px 4px; }
  .gv-score-row { padding: 2px 12px 0; gap: 10px; }
  .gv-bt { padding: 8px 10px 10px; }
  .score-num { font-size: 44px; }
  .spotlight-score .num { font-size: 28px; }
  .container,
  .container-sm,
  .ticker { padding-left: 16px !important; padding-right: 16px !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   COOKIE CONSENT — mobile override
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  #cookieConsent .cc-inner { padding: 12px 20px !important; gap: 10px !important; }
  #cookieConsent .cc-text { font-size: 14px !important; flex-basis: auto !important; line-height: 1.5; }
  #cookieConsent .cc-btn { font-size: 14px !important; padding: 12px 18px !important; min-height: 44px; }
  #cookieConsent { bottom: 52px !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .gl-toast {
    display: block;
    position: fixed;
    top: 64px; left: 20px; right: 20px;
    z-index: 9998;
    background: var(--ink);
    color: var(--cloud);
    font-family: var(--f-display);
    font-size: 16px;
    font-weight: 600;
    padding: 16px 18px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    transform: translateY(-20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
  }
  .gl-toast.is-visible { transform: translateY(0); opacity: 1; }
  .gl-toast.gl-toast-success { background: #1a7a3a; }
  .gl-toast.gl-toast-error { background: #c0392b; }
}


/* ═══════════════════════════════════════════════════════════════════════
   FORM VALIDATION — inline error states
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .field-error {
    font-family: var(--f-mono);
    font-size: 11px;
    color: #c0392b;
    margin-top: 4px;
    letter-spacing: 0.04em;
  }
  input:invalid:not(:placeholder-shown),
  select:invalid:not(:placeholder-shown) {
    border-color: #c0392b !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SAFE AREA INSETS — notched phones (iPhone X+)
   ═══════════════════════════════════════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 1000px) {
    .mobile-sticky-cta {
      padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
    #cookieConsent {
      bottom: calc(52px + env(safe-area-inset-bottom)) !important;
    }
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   LANDSCAPE — prevent layout breaks on rotated phones
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) and (orientation: landscape) and (max-height: 500px) {
  .hero {
    min-height: auto !important;
    padding-top: 60px !important;
    padding-bottom: 24px !important;
  }
  .hero-sub { display: none !important; }
  nav.top { padding: 4px 12px !important; }
  body { padding-top: 44px; }
  section { padding-top: 16px !important; padding-bottom: 16px !important; }
  .gv-slab { max-width: 280px !important; }
  .mobile-sticky-cta { padding: 6px 20px; }
  .mobile-sticky-cta > a,
  .mobile-sticky-cta > button { padding: 10px 16px; font-size: 16px; min-height: 44px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   HIGH CONTRAST MODE — WCAG accessibility
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-contrast: more) {
  .kicker, .kicker-live, .gv-subtitle, .price-note,
  .mobile-nav-label, .foot-col h4 {
    color: var(--ink) !important;
  }
  .btn, .btn-solid, .btn-outline, .cc-btn,
  .mobile-sticky-cta a, .mobile-sticky-cta button {
    border-width: 2px !important;
  }
  .foot-col li a, .mobile-nav-overlay a {
    color: var(--ink) !important;
  }
  .gv-share { border-width: 2px !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   REDUCED MOTION — respect user preferences
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav-drawer { animation: none; }
  .gv-slab { transform: none !important; transition: none !important; }
  .mobile-sticky-cta { transition: none !important; }
  .gl-toast { transition: none !important; }
}