/*
Theme Name: J1 Systems Pro
Theme URI: https://j1systems.pro
Author: Jacob Chappell / J1 Media Productions LLC
Author URI: https://j1systems.pro
Description: Custom theme for J1 Systems — service-trade AI automations. Classic theme (no FSE). Every word editable via Appearance → Customize → J1 Systems. Replaces Elementor.
Version: 2.6.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary — internal use, J1 Media Productions LLC
License URI: https://j1systems.pro/terms
Text Domain: j1sv2
Tags: business, classic, custom-logo, custom-menu, featured-images, full-width-template, theme-options, threaded-comments, translation-ready
*/

  :root{
    --font-display: 'Big Shoulders Display', 'Bricolage Grotesque', Impact, ui-sans-serif, system-ui, sans-serif;
    --font-subhead: 'Bricolage Grotesque', 'Geist', ui-sans-serif, system-ui, sans-serif;
    --font-editorial: 'Instrument Serif', ui-serif, Georgia, serif;
    --font-body: 'Geist', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, monospace;


    --bg:           #0c0d0f;          /* deep black canvas */
    --bg-2:         #131517;          /* slightly lifted bg */
    --bg-3:         #1a1c1f;          /* card on dark */
    --paper:        #f3efe7;          /* light cream paper */
    --paper-2:      #eae5d8;
    --paper-3:      #fdfaf2;          /* lightest paper */
    --card:         #ffffff;
    --ink:          #0c0d0f;          /* black ink for light surfaces */
    --ink-2:        #25272c;
    --text-on-dark: #f3efe7;
    --text-on-dark-2: rgba(243,239,231,.72);
    --muted:        #7a7c82;
    --muted-d:      #8d8f96;          /* on dark */
    --muted-2:      #9c9ea4;
    --line:         #1f2125;          /* hairline on dark */
    --line-l:       #e0dccf;          /* hairline on light */
    --orange:       #E07B30;
    --orange-2:     #ec8a3c;
    --orange-deep:  #b85e1a;
    --orange-soft:  rgba(224,123,48,.14);
    --orange-glow:  rgba(224,123,48,.36);
    --ok:           #3aa66e;

    --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;

    --sh-card: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(15,16,20,.04), 0 14px 28px rgba(15,16,20,.08), 0 40px 70px rgba(15,16,20,.08);

    /* 3D button shadows — raised pillow look */
    --sh-btn-dark:
      inset 0 2px 0 rgba(255,255,255,0.30),
      inset 0 1px 0 rgba(255,255,255,0.14),
      inset 0 -2px 1px rgba(0,0,0,0.70),
      0 1px 2px rgba(0,0,0,0.32),
      0 10px 22px rgba(15,16,20,0.34),
      0 24px 44px rgba(15,16,20,0.26),
      0 52px 80px rgba(15,16,20,0.18);
    --sh-btn-dark-h:
      inset 0 2px 0 rgba(255,255,255,0.42),
      inset 0 1px 0 rgba(255,255,255,0.20),
      inset 0 -2px 1px rgba(120,50,10,0.60),
      0 2px 3px rgba(160,80,30,0.28),
      0 14px 28px rgba(180,90,36,0.32),
      0 32px 56px rgba(180,90,36,0.22),
      0 64px 92px rgba(180,90,36,0.14);
    --sh-btn-light:
      inset 0 2px 0 rgba(255,255,255,1),
      inset 0 1px 0 rgba(255,255,255,0.9),
      inset 0 -1.5px 1px rgba(0,0,0,0.16),
      inset 0 0 0 1px rgba(0,0,0,0.06),
      0 1px 2px rgba(0,0,0,0.10),
      0 8px 18px rgba(0,0,0,0.12),
      0 20px 34px rgba(0,0,0,0.10);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  html,body{ margin:0; padding:0; }
  body{
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text-on-dark);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.6;
    font-size: 18px;
    padding-top: 76px;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);
    background-size: 24px 24px;
    /* PERF: was `fixed` — repainted full viewport on every scroll. `scroll` is materially faster on desktop. */
    background-attachment: scroll;
  }
  /* PERF: Dither overlay was z-index:9999 with mix-blend-mode:overlay covering the entire viewport
     fixed-positioned. That forces a composite over every paint of every element below it.
     Disabled by default — re-enable only if you actually see banding on the dark gradients.
     If you want it back, set opacity to .08 and z-index to 1. */
  body::after{ display: none; }
  h1,h2,h3,h4{
    margin:0; color: var(--text-on-dark);
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing:-0.005em; line-height: 1.0;
    text-transform: uppercase;
  }
  p{ margin:0; }
  a{ color: inherit; }

  .wrap{ max-width: 1180px; margin:0 auto; padding: 0 28px; }

  .eyebrow{
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--muted); font-weight: 500;
    display: inline-flex; align-items: center; gap: 10px;
  }
  .eyebrow::before{
    content: "";
    width: 6px; height: 6px;
    background: var(--orange);
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(224,123,48,.15);
  }

  /* Display emphasis — used for memorable orange moments throughout the page.
     Matches the hero's "slow quotes" treatment: big, condensed display, uppercase. */
  .ed{
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    color: var(--orange);
  }

  /* Gauge divider — small mono label + thin orange line, like a precision instrument */
  .gauge{
    display: flex; align-items: center; gap: 16px;
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--muted-d); font-weight: 500;
    margin: 0 0 28px;
  }
  .gauge::after{
    content: "";
    flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--orange), transparent);
  }

  /* === BUTTONS — 3D pillow style === */
  .btn{
    display:inline-flex; align-items:center; gap: 10px;
    padding: 16px 24px;
    border-radius: var(--r-pill);
    font-weight: 600; font-size: 15px;
    text-decoration: none; border: none; cursor: pointer;
    transition:
      transform .35s cubic-bezier(.22,.61,.36,1),
      box-shadow .4s cubic-bezier(.22,.61,.36,1),
      background .3s ease, color .3s ease, filter .2s ease;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
  }
  /* sheen wipe */
  .btn::before{
    content:""; position:absolute; inset:0;
    background: linear-gradient(110deg,
      transparent 30%,
      rgba(255,255,255,0.22) 48%,
      rgba(255,255,255,0.32) 50%,
      rgba(255,255,255,0.22) 52%,
      transparent 70%);
    transform: translateX(-120%);
    transition: transform .9s cubic-bezier(.22,.61,.36,1);
    pointer-events:none; border-radius: inherit;
    mix-blend-mode: overlay; opacity: 0;
  }
  .btn:hover::before{ transform: translateX(120%); opacity: 1; }
  .btn:hover{ transform: translateY(-2px); }
  .btn:active{ transform: translateY(0); transition-duration:.12s; filter: brightness(.96); }

  .btn-primary{
    background: linear-gradient(180deg, #1c1a17 0%, #0a0a09 55%, #050505 100%);
    color: var(--orange);
    box-shadow: var(--sh-btn-dark);
    padding: 18px 28px;
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
  }
  .btn-primary:hover{
    background: linear-gradient(180deg, var(--orange-2) 0%, var(--orange) 55%, var(--orange-deep) 100%);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: var(--sh-btn-dark-h);
    text-shadow: 0 1px 0 rgba(120,50,10,.5);
  }

  .btn-ghost{
    background: linear-gradient(180deg, #ffffff 0%, #f7f3ea 100%);
    color: var(--ink);
    box-shadow: var(--sh-btn-light);
  }
  .btn-ghost:hover{
    transform: translateY(-2px);
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,1),
      inset 0 1px 0 rgba(255,255,255,.9),
      inset 0 -2px 1px rgba(0,0,0,.18),
      inset 0 0 0 1px rgba(0,0,0,.08),
      0 2px 4px rgba(0,0,0,.14),
      0 12px 22px rgba(0,0,0,.16),
      0 28px 44px rgba(0,0,0,.14);
  }
  .btn .arr{
    width: 16px; height: 16px;
    display:inline-grid; place-items:center;
    transition: transform .35s cubic-bezier(.22,.61,.36,1);
    position: relative; z-index: 1;
  }
  .btn:hover .arr{ transform: translate(3px,-3px) rotate(2deg); }
  .btn > span, .btn > svg{ position:relative; z-index:1; }

  /* === NAV === */
  nav.top{
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: rgba(12,13,15,.72);
    /* PERF: blur 16px -> 8px. Half the radius, half the per-frame composite cost. Still reads as frosted glass. */
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
  }
  nav.top.scrolled{
    border-bottom-color: rgba(255,255,255,.06);
    background: rgba(12,13,15,.88);
    box-shadow: 0 1px 0 rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.30);
  }
  nav.top .bar{
    max-width: 1240px; margin: 0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding: 16px 28px;
  }
  .brand{
    display:flex; align-items:center; gap: 12px;
    font-weight: 700; font-size: 18px; letter-spacing:-0.01em;
    color: var(--text-on-dark);
    text-decoration:none;
  }
  .brand-mark{
    width: 38px; height: 38px;
    background: url('assets/j1-logo-light.png') no-repeat center / contain;
    flex: none;
  }
  nav.top ul{ list-style:none; display:flex; gap: 30px; margin: 0; padding: 0; }
  nav.top ul a{
    text-decoration: none; color: var(--text-on-dark-2); font-size: 14px; font-weight: 500;
    background-image: linear-gradient(var(--orange), var(--orange));
    background-size: 0 1.5px; background-repeat: no-repeat; background-position: 0 100%;
    transition: background-size .35s cubic-bezier(.22,.61,.36,1), color .25s ease;
    padding-bottom: 2px;
  }
  nav.top ul a:hover{ color: var(--text-on-dark); background-size: 100% 1.5px; }
  @media (max-width: 880px){ nav.top ul{ display:none; } }

  /* === HERO === */
  .hero{
    padding: 48px 0 120px;
    position: relative;
    overflow: hidden;
  }
  .hero::before{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:
      radial-gradient(60% 50% at 85% 50%, rgba(224,123,48,.16), transparent 65%),
      radial-gradient(70% 60% at 15% 80%, rgba(224,123,48,.08), transparent 60%);
  }
  .hero .wrap{ position:relative; z-index:1; }
  .hero-grid{
    display:grid; grid-template-columns: 1.2fr 1fr; gap: 72px; align-items:center;
  }
  .hero h1{
    font-family: var(--font-display);
    font-size: clamp(50px, 7.4vw, 94px);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    letter-spacing: -0.035em;
    line-height: 0.98;
    color: var(--text-on-dark);
  }
  .hero h1 .em{ color: var(--orange); }
  .hero h1 .ed{
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    font-size: 1em;
    line-height: 1;
    margin-left: 0;
  }
  .hero .sub{
    margin-top: 26px;
    color: var(--text-on-dark-2);
    font-size: 19px; line-height: 1.55;
    max-width: 52ch;
  }
  .hero .ctas{ margin-top: 36px; display:flex; gap: 14px; flex-wrap: wrap; }
  .hero .trust{
    margin-top: 30px;
    display:inline-flex; align-items:center; gap: 10px;
    color: var(--muted-d); font-size: 14px;
  }
  .hero .trust .live{
    width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
    box-shadow: 0 0 0 4px rgba(58,166,110,.18);
    animation: livePulse 2.6s ease-in-out infinite;
  }
  @keyframes livePulse{ 0%,100%{ box-shadow: 0 0 0 4px rgba(58,166,110,.18); } 50%{ box-shadow: 0 0 0 8px rgba(58,166,110,.04); } }

  /* === HERO STAGE: dead-lead notification card (no stage chrome) === */
  .hero-stage{
    position: relative;
    max-width: 460px;
    margin-left: auto;
    padding: 28px 16px;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
  }
  @media (max-width: 880px){
    .hero-stage{ max-width: 420px; margin: 0 auto; }
  }

  /* The notification card */
  .lead-card{
    position: relative; z-index: 2;
    width: 100%;
    background: linear-gradient(180deg, rgba(28,22,18,.92), rgba(18,14,11,.96));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    padding: 22px 22px 20px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      0 20px 40px rgba(0,0,0,.5);
    transform: rotate(-1.2deg);
  }
  .lead-card__head{
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(243,239,231,.55);
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(255,255,255,.10);
  }
  .lead-card__head .app{
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--text-on-dark); font-weight: 700;
    letter-spacing: 0.14em;
    font-family: var(--font-display);
    font-size: 15px;
    text-transform: uppercase;
  }
  .lead-card__head .app i{
    width: 10px; height: 10px; border-radius: 50%;
    background: #ff4a3d;
    box-shadow: 0 0 0 3px rgba(255,74,61,.18), 0 0 12px rgba(255,74,61,.6);
    animation: missedPulse 1.8s ease-in-out infinite;
  }
  @keyframes missedPulse{
    0%,100%{ box-shadow: 0 0 0 3px rgba(255,74,61,.18), 0 0 12px rgba(255,74,61,.6); }
    50%    { box-shadow: 0 0 0 6px rgba(255,74,61,.0),  0 0 18px rgba(255,74,61,.4); }
  }
  .lead-card__head .stamp{ margin-left: auto; }

  .lead-card__title{
    margin: 16px 0 6px;
    font-family: var(--font-subhead);
    font-size: clamp(20px, 2.2vw, 24px); font-weight: 600;
    color: var(--text-on-dark); letter-spacing: -0.012em; line-height: 1.18;
  }
  .lead-card__sub{
    color: rgba(243,239,231,.65);
    font-size: 14.5px; line-height: 1.5;
  }
  .lead-card__meta{
    margin-top: 16px; padding-top: 14px;
    border-top: 1px dashed rgba(255,255,255,.08);
    display: grid; grid-template-columns: 1fr auto; gap: 6px 16px;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.10em; text-transform: uppercase;
    color: rgba(243,239,231,.5);
  }
  .lead-card__meta b{
    color: var(--text-on-dark); font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  /* Status bar at bottom of card — "opened X ago" + competitor count */
  /* Status bar at bottom of card — "opened X ago" + competitor count */
  .lead-card__status{
    position: relative;
    margin-top: 18px; padding: 14px 16px;
    background: rgba(207,55,40,.10);
    border: 1px solid rgba(224,80,40,.42);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    overflow: hidden;
    animation: statusPulse 3.4s ease-in-out infinite;
  }
  /* Soft inner heartbeat — pulses the urgency without being loud */
  .lead-card__status::before{
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(60% 100% at 20% 50%, rgba(255,80,50,.20), transparent 70%);
    opacity: 0;
    animation: statusInnerPulse 3.4s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
  }
  @keyframes statusPulse{
    0%, 100% {
      border-color: rgba(224,80,40,.42);
      box-shadow: 0 0 0 0 rgba(224,80,40,0);
    }
    50% {
      border-color: rgba(255,100,70,.72);
      box-shadow: 0 0 0 4px rgba(224,80,40,.08), 0 0 24px rgba(224,80,40,.18);
    }
  }
  @keyframes statusInnerPulse{
    0%, 100% { opacity: 0.0; }
    50%      { opacity: 1.0; }
  }

  .lead-card__status .label{
    position: relative; z-index: 1;
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: 0.20em; text-transform: uppercase;
    color: #ff8a6a;
    font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px;
  }
  /* Small red dot — recording/live indicator next to OPENED */
  .lead-card__status .label::before{
    content: ""; width: 7px; height: 7px;
    background: #ff5f44; border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255,95,68,.6);
    animation: statusDotPulse 1.6s ease-in-out infinite;
  }
  @keyframes statusDotPulse{
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,95,68,.6); }
    50%      { box-shadow: 0 0 0 6px rgba(255,95,68,0); }
  }

  .lead-card__status .value{
    position: relative; z-index: 1;
    font-family: var(--font-display); font-weight: 800;
    color: #ffb59a;
    font-size: 18px; letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 14px rgba(255,95,68,.30);
    transition: transform .25s cubic-bezier(.22,.61,.36,1);
  }
  /* Triggered by JS each second when the counter ticks */
  .lead-card__status .value.tick{
    animation: valueTick .42s cubic-bezier(.22,.61,.36,1);
  }
  @keyframes valueTick{
    0%   { transform: translateY(0)    scale(1); color: #ffb59a; }
    35%  { transform: translateY(-2px) scale(1.06); color: #ffd9c4; }
    100% { transform: translateY(0)    scale(1); color: #ffb59a; }
  }

  .lead-card__compete{
    position: absolute; bottom: -22px; right: -18px;
    transform: rotate(2.5deg);
    background: linear-gradient(180deg, #1a1614, #0f0c0a);
    border: 1px solid rgba(255,120,80,.22);
    border-left: 3px solid var(--orange);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 18px 36px rgba(0,0,0,.5), 0 0 0 0 rgba(255,90,60,0);
    animation: competeAmbient 3.4s ease-in-out infinite,
               competeNudge   6s ease-in-out infinite;
    transform-origin: center right;
  }
  /* Ambient glow that breathes in sync with the status box */
  @keyframes competeAmbient{
    0%, 100% {
      box-shadow: 0 18px 36px rgba(0,0,0,.5), 0 0 0 0 rgba(255,90,60,0);
      border-color: rgba(255,120,80,.22);
    }
    50% {
      box-shadow: 0 18px 36px rgba(0,0,0,.5), 0 0 22px rgba(255,90,60,.22);
      border-color: rgba(255,140,100,.55);
    }
  }
  /* Periodic brief jolt — fires once every 6s for ~280ms */
  @keyframes competeNudge{
    0%, 92%, 100% { transform: rotate(2.5deg) translateX(0); }
    93% { transform: rotate(3.5deg)  translateX(-2px); }
    95% { transform: rotate(1.5deg)  translateX(2px); }
    97% { transform: rotate(3.2deg)  translateX(-1.5px); }
    99% { transform: rotate(2deg)    translateX(0.5px); }
  }
  @media (prefers-reduced-motion: reduce){
    .lead-card__status, .lead-card__status::before, .lead-card__status .label::before,
    .lead-card__compete{ animation: none !important; }
  }
  .lead-card__compete .num{
    font-family: var(--font-display); font-weight: 800;
    font-size: 22px; color: var(--orange); letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .lead-card__compete .lbl{
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(243,239,231,.7); line-height: 1.25;
  }

  /* Legacy .hero-photo wrapper — orphaned rules wrapped in a valid selector.
     The active homepage uses .hero-stage + .lead-card; kept in case orb hero
     is ever re-enabled. */
  .hero-photo{
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--r-xl);
    background:
      radial-gradient(120% 80% at 50% 30%, #2a221c 0%, #15110d 60%, #0a0907 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      0 30px 60px rgba(0,0,0,.40),
      0 70px 120px rgba(0,0,0,.34),
      0 0 0 1px rgba(224,123,48,.08),
      0 0 80px rgba(224,123,48,.12);
    overflow: hidden;
    --py: 0px;
    transform: translateY(var(--py));
    transition: transform .15s linear;
  }
  .hero-photo img.jacob{
    position:absolute; left:0; right:0; top:0; bottom:0;
    width: 100%; height: 100%;
    object-fit: contain; object-position: 50% 100%;
    z-index: 2;
    filter: drop-shadow(0 18px 30px rgba(0,0,0,.55));
  }
  .hero-photo .badge{
    position:absolute; left: 22px; top: 22px; z-index: 3;
    display:inline-flex; align-items:center; gap: 8px;
    background: rgba(20,16,12,.65); backdrop-filter: blur(10px);
    color: var(--text-on-dark);
    padding: 8px 14px; border-radius: var(--r-pill);
    font-family:'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    border: 1px solid rgba(255,255,255,.10);
  }
  .hero-photo .badge .dot{
    width: 8px; height: 8px; border-radius: 50%; background: var(--orange);
    box-shadow: 0 0 0 3px rgba(224,123,48,.28);
  }
  .hero-photo .corner{
    position:absolute; right:-1px; top:-1px; z-index:1;
    width: 100px; height: 100px;
    background: linear-gradient(225deg, var(--orange), transparent 65%);
    border-top-right-radius: var(--r-xl);
    opacity:.6;
  }

  @media (max-width: 880px){
    .hero-grid{ grid-template-columns: 1fr; gap: 36px; }
    .hero-photo{ max-width: 380px; margin: 0 auto; }
  }

  /* === SECTIONS === */
  section{ padding: 96px 0; }
  @media (max-width: 700px){ section{ padding: 64px 0; } }

  .sec-head{ max-width: 800px; margin-bottom: 64px; }
  .sec-head h2{
    font-family: var(--font-display);
    font-size: clamp(40px, 5.6vw, 72px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    margin-top: 18px;
    color: var(--text-on-dark);
    line-height: 1.02;
  }
  .sec-head h2 .em{ color: var(--orange); }
  .sec-head h2 .ed{
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    font-size: 1em; line-height: 1;
  }

  /* === SUBHEADS (h3/h4) — readable Bricolage, sentence case === */
  h3, h4,
  .step h3, .outcome h3, .stake h3, .tier h3, .case-col h4, .ch h3, .auth-item p strong{
    font-family: var(--font-subhead);
    font-weight: 600;
    letter-spacing: -0.015em;
    text-transform: none;
    line-height: 1.18;
  }
  .sec-head p.kicker{
    margin-top: 18px; color: var(--muted-d); font-size: 17px; max-width: 60ch;
  }
  /* section-context eyebrow override — orange dot + orange text */
  .sec-head .eyebrow,
  .case .eyebrow,
  .final .eyebrow{ color: var(--orange); }

  section.band{
    background: var(--bg-2);
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0);
    background-size: 24px 24px;
  }

  /* === STAKES (legacy 3-col, kept for safety) === */
  .stakes-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .stake{
    padding: 0; max-width: 32ch;
  }
  .stake .ico{
    width: 44px; height: 44px; border-radius: 12px;
    display:grid; place-items:center; color: var(--orange);
    background: var(--orange-soft);
    border: 1px solid rgba(224,123,48,.30);
    margin-bottom: 22px;
  }
  .stake .ico svg{ width: 22px; height: 22px; }
  .stake h3{ font-size: 22px; font-weight: 600; margin-bottom: 10px; color: var(--text-on-dark); }
  .stake p{ color: var(--text-on-dark-2); font-size: 16px; line-height: 1.6; }
  .stakes-foot{ margin-top: 32px; color: var(--muted-d); font-size: 15px; max-width: 64ch; }
  #stakes{ padding-bottom: 48px; }
  @media (max-width: 880px){ .stakes-grid{ grid-template-columns: 1fr; gap: 36px; } }

  /* === LEAK NARRATIVE — 3-scene visual story: lead lands → goes cold → revenue walks === */
  .leak{ position: relative; margin-top: 16px; }
  .leak__grid{
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
    position: relative;
  }
  .leak__scene{
    position: relative;
    display: flex; flex-direction: column;
    min-width: 0;
  }
  /* Top rail row: badge + flowing arrow */
  .leak__head{
    display: flex; align-items: center; gap: 12px;
    height: 32px;
    margin-bottom: 10px;
    position: relative;
  }
  .leak__badge{
    font-family: var(--font-mono);
    font-size: 12px; font-weight: 600; letter-spacing: .14em;
    color: var(--orange);
    padding: 6px 10px; border-radius: 6px;
    background: rgba(224,123,48,.10);
    border: 1px solid rgba(224,123,48,.32);
    line-height: 1; flex: none;
  }
  .leak__arrow{
    flex: 1; height: 14px; position: relative;
    margin-right: -52px; /* extend through the grid gap */
    z-index: 0;
  }
  .leak__arrow::before{
    content: ""; position: absolute; top: 50%; left: 4px; right: 16px;
    height: 2px; transform: translateY(-50%);
    background-image: linear-gradient(to right, var(--orange) 55%, transparent 55%);
    background-size: 10px 2px;
    background-repeat: repeat-x;
    background-position: 0 50%;
    animation: leakFlow 1.4s linear infinite;
    filter: drop-shadow(0 0 6px rgba(224,123,48,.55));
    opacity: .85;
  }
  .leak__arrow::after{
    content: ""; position: absolute; top: 50%; right: 0;
    width: 0; height: 0;
    border-left: 9px solid var(--orange);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    transform: translateY(-50%);
    filter: drop-shadow(0 0 8px rgba(224,123,48,.6));
  }
  .leak__scene:last-child .leak__arrow{ display: none; }
  @keyframes leakFlow{
    from{ background-position: 0 50%; }
    to  { background-position: 10px 50%; }
  }

  .leak__when{
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted-d);
    margin-bottom: 14px;
  }

  /* Stage = the mini-illustration container */
  .leak__stage{
    height: 240px;
    border-radius: 14px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 60%),
      var(--bg-2);
    border: 1px solid var(--line);
    padding: 14px;
    position: relative;
    overflow: hidden;
    margin-bottom: 22px;
  }
  .leak__stage--loss{
    background:
      radial-gradient(120% 80% at 50% 0%, rgba(224,123,48,.14), rgba(224,123,48,0) 60%),
      #17110c;
    border-color: rgba(224,123,48,.22);
  }

  /* --- Scene 1: phone with 3 unread leads --- */
  .leak__phone{ display: flex; flex-direction: column; gap: 7px; height: 100%; }
  .leak__row{
    display: grid; grid-template-columns: 44px 1fr 10px; gap: 10px; align-items: center;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--line);
    border-radius: 9px; padding: 8px 10px;
  }
  .leak__row--alert{
    border-color: rgba(207,78,78,.32);
    background: rgba(207,78,78,.06);
  }
  .leak__pill{
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
    padding: 4px 0; border-radius: 5px; text-align: center;
    line-height: 1;
  }
  .leak__pill--call{ background: rgba(207,78,78,.16); color:#e89595; border:1px solid rgba(207,78,78,.35); }
  .leak__pill--fb  { background: rgba(82,118,200,.18); color:#a4b8e8; border:1px solid rgba(82,118,200,.35); }
  .leak__pill--form{ background: rgba(120,140,150,.15); color:#bfc6cb; border:1px solid rgba(120,140,150,.30); }
  .leak__rowtxt strong{ display:block; font-family: var(--font-body); font-weight: 600; font-size: 12.5px; color: var(--text-on-dark); }
  .leak__rowtxt small { display:block; font-family: var(--font-body); font-size: 11px; color: var(--muted-d); margin-top:1px; }
  .leak__dot{ width: 8px; height: 8px; border-radius: 50%; background: #e0533a; box-shadow: 0 0 8px rgba(224,80,60,.75); }
  .leak__seen{
    margin-top: auto; align-self: flex-end;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
    color: var(--muted-d); padding: 4px 9px;
    border: 1px dashed var(--line); border-radius: 999px;
  }

  /* --- Scene 2: customer comparing quotes --- */
  .leak__inbox{ display: flex; flex-direction: column; gap: 6px; height: 100%; }
  .leak__ibhead{
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted-d); padding-bottom: 6px; border-bottom: 1px dashed var(--line);
    margin-bottom: 2px;
  }
  .leak__timer{ display: inline-flex; gap: 5px; align-items: center; color: var(--orange-2); }
  .leak__bub{
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 8px;
    background: rgba(255,255,255,.035); border: 1px solid var(--line);
    font-size: 11.5px;
  }
  .leak__bub strong{ font-weight: 600; color: var(--text-on-dark); }
  .leak__bub span{ color: var(--muted-d); font-family: var(--font-mono); font-size: 11px; }
  .leak__bub--you{
    margin-top: auto;
    background: rgba(224,123,48,.05);
    border: 1px dashed rgba(224,123,48,.45);
  }
  .leak__bub--you strong{ color: var(--orange-2); }
  .leak__bub--you span{ color: rgba(224,123,48,.78); font-style: italic; font-family: var(--font-body); }

  /* --- Scene 3: revenue receipt --- */
  .leak__receipt{ display: flex; flex-direction: column; gap: 10px; height: 100%; }
  .leak__rhead{
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(224,123,48,.22);
  }
  .leak__lab{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-d); }
  .leak__stamp{
    font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: .14em;
    color: #ff5f44;
    padding: 3px 8px; border: 2px solid #ff5f44; border-radius: 4px;
    transform: rotate(-5deg);
    opacity: .92;
  }
  .leak__line{
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 13px; color: var(--text-on-dark-2);
  }
  .leak__line strong{ color: var(--text-on-dark); font-weight: 600; }
  .leak__line em{ font-style: italic; color: var(--muted-d); }
  .leak__receipt hr{ border: 0; border-top: 1px dashed var(--line); margin: 4px 0 2px; }
  .leak__totlab{
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted-d); margin-top: auto;
  }
  .leak__total{
    font-family: var(--font-display); font-weight: 800;
    font-size: 38px; line-height: 1; letter-spacing: -0.01em;
    color: #ff8c6a;
    text-shadow: 0 0 28px rgba(224,123,48,.45);
    margin-top: 2px;
  }
  .leak__total .leak__neg{ color: #ff5f44; margin-right: 2px; }

  /* Caption */
  .leak__cap{ max-width: 34ch; }
  .leak__cap h3{ font-size: 22px; font-weight: 600; margin-bottom: 10px; color: var(--text-on-dark); font-family: var(--font-subhead); }
  .leak__cap p{ color: var(--text-on-dark-2); font-size: 15px; line-height: 1.6; }

  /* Card hover halo (reuse existing pattern) */
  .leak__scene{ isolation: isolate; }
  .leak__scene::after{
    content:""; position: absolute; inset: 24px -8px -8px -8px;
    border-radius: 18px;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(224,123,48,.0), 0 30px 60px -20px rgba(224,123,48,.0);
    background: radial-gradient(60% 50% at 50% 30%, rgba(224,123,48,.12), rgba(224,123,48,0) 70%);
    opacity: 0; transition: opacity 280ms ease; z-index: -1;
  }
  .leak__scene:hover::after{ opacity: 1; }

  @media (max-width: 880px){
    .leak__grid{ grid-template-columns: 1fr; gap: 32px; }
    .leak__arrow{ display: none; }
    .leak__scene:last-child .leak__arrow{ display: none; }
    .leak__stage{ height: auto; min-height: 200px; }
    .leak__cap{ max-width: none; }
  }
  @media (prefers-reduced-motion: reduce){
    .leak__arrow::before{ animation: none; }
  }

  /* =====================================================================
     LEAK² — vertical scrollytelling. Pinned phone on the right morphs
     through three "chapters" of the week as the user scrolls down.
     Replaces the 3-col leak grid for the #stakes section.
     ===================================================================== */
  .leak2{
    --phone-w: 440px;
    --rail-x: 18px;
    display: grid;
    grid-template-columns: 1fr var(--phone-w);
    gap: 96px;
    margin-top: 64px;
    position: relative;
  }
  .leak2__intro{
    grid-column: 1 / -1;
    margin: -16px 0 40px;
    font-family: var(--font-mono);
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted-d);
    display: inline-flex; align-items: center; gap: 12px;
  }
  .leak2__intro::after{
    content: ""; flex: 1; max-width: 220px;
    height: 1px;
    background-image: linear-gradient(to right, rgba(224,123,48,.5) 55%, transparent 55%);
    background-size: 8px 1px; background-repeat: repeat-x;
    animation: leak2RailFlowH 1.6s linear infinite;
    align-self: center;
  }
  @keyframes leak2RailFlowH{ to{ background-position: 8px 0; } }

  /* Left column — the scrolling copy + the leak rail */
  .leak2__copy{
    position: relative;
    padding-left: 64px;
    min-width: 0;
  }
  .leak2__copy::before{
    /* Vertical leak rail — dashed, flowing downward */
    content: ""; position: absolute;
    left: var(--rail-x); top: 0; bottom: 0;
    width: 1px;
    background-image: linear-gradient(to bottom, rgba(224,123,48,.45) 50%, transparent 50%);
    background-size: 1px 9px;
    background-repeat: repeat-y;
    animation: leak2RailFlow 1.6s linear infinite;
    pointer-events: none;
    opacity: .55;
  }
  .leak2__copy::after{
    /* Rail terminator — a single bright drop at the bottom */
    content: ""; position: absolute;
    left: calc(var(--rail-x) - 3px); bottom: -2px;
    width: 7px; height: 7px;
    background: var(--orange);
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(224,123,48,.8), 0 0 0 4px var(--bg);
  }
  @keyframes leak2RailFlow{ to{ background-position: 0 9px; } }

  .leak2__chap{
    position: relative;
    min-height: 90vh;
    padding-top: 14vh;
    padding-bottom: 12vh;
  }
  .leak2__chap:first-of-type{ padding-top: 6vh; }
  /* Last chapter holds the dramatic "-$11,800" payoff — pin the phone on it
     much longer so the reader can sit with the number before scrolling away. */
  .leak2__chap:last-of-type{ padding-bottom: 2vh; min-height: 175vh; }

  /* Chapter node on the rail — sits on the vertical rail INSIDE the padding zone */
  .leak2__chap::before{
    content: attr(data-chap);
    position: absolute;
    /* copy has padding-left:64px, rail at copy-x=18, pip 38 wide → pip-left at chap = 18 - 64 - 19 = -65 */
    left: -65px;
    top: 14vh;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid rgba(224,123,48,.45);
    color: var(--orange);
    display: grid; place-items: center;
    font-family: var(--font-mono); font-size: 12px; font-weight: 700;
    box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px rgba(224,123,48,.0), 0 0 0 12px rgba(224,123,48,0);
    transition: background 400ms ease, color 400ms ease, transform 500ms cubic-bezier(.2,.65,.2,1.2), box-shadow 400ms ease;
    z-index: 2;
  }
  .leak2__chap:first-of-type::before{ top: 6vh; }
  .leak2__chap.is-active::before{
    background: var(--orange);
    color: #161108;
    transform: scale(1.08);
    box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px rgba(224,123,48,.35), 0 0 28px rgba(224,123,48,.55);
  }

  .leak2__when{
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted-d);
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(255,255,255,.08);
    margin-bottom: 28px;
    transition: color 300ms ease, border-color 300ms ease;
  }
  .leak2__chap.is-active .leak2__when{
    color: var(--orange-2);
    border-bottom-color: rgba(224,123,48,.35);
  }

  .leak2__title{
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(46px, 5.4vw, 72px);
    line-height: 0.96;
    letter-spacing: -0.015em;
    color: var(--text-on-dark);
    margin-bottom: 28px;
    text-transform: uppercase;
  }
  .leak2__title em{
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 800;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: -0.005em;
    font-size: 1em;
  }

  .leak2__lede{
    font-family: var(--font-body);
    font-size: 19px;
    line-height: 1.5;
    color: var(--text-on-dark);
    max-width: 38ch;
    margin-bottom: 18px;
  }
  .leak2__chap p:not(.leak2__lede){
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-on-dark-2);
    max-width: 38ch;
    margin-bottom: 14px;
  }
  .leak2__chap p .hl{
    color: var(--orange-2);
    font-weight: 500;
  }

  /* ============== PINNED iPHONE STAGE ============== */
  .leak2__stage{
    position: sticky;
    top: calc(96px + 2vh);
    height: min(82vh, calc(100vh - 96px - 4vh));
    min-height: 640px;
    align-self: start;
    display: flex; justify-content: center; align-items: flex-start;
  }

  /* iPhone frame — real proportions (9:19.5 aspect) */
  .leak2__phone{
    position: relative;
    height: 100%;
    aspect-ratio: 9 / 19.5;
    border-radius: 52px;
    background: linear-gradient(160deg, #1a1b1f 0%, #0e0f12 55%, #060608 100%);
    padding: 9px;
    overflow: hidden;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.05),
      inset 0 0 0 1px rgba(255,255,255,.035),
      inset 0 1px 0 rgba(255,255,255,.05),
      inset 0 -2px 0 rgba(0,0,0,.55),
      -20px 30px 60px -10px rgba(0,0,0,.55),
      0 60px 120px -30px rgba(0,0,0,.85),
      0 24px 60px -10px rgba(0,0,0,.55);
  }
  .leak2__phone::before{
    /* very subtle bezel highlight — barely-there edge light, no glossy sheen */
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 0%, transparent 72%, rgba(255,255,255,.035) 86%, rgba(255,255,255,.05) 92%, transparent 100%);
    z-index: 2;
  }
  .leak2__phone::after{
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 60px rgba(224,123,48,0);
    transition: box-shadow 700ms ease;
  }
  .leak2.is-loss .leak2__phone::after{
    box-shadow:
      inset 0 -120px 90px -40px rgba(200,40,25,.32),
      inset 0 0 80px rgba(160,30,15,.18);
    animation: phoneLossPulse 1.6s ease-in-out infinite;
  }
  @keyframes phoneLossPulse{
    0%, 100% {
      box-shadow:
        inset 0 -120px 90px -40px rgba(200,40,25,.32),
        inset 0 0 80px rgba(160,30,15,.18);
    }
    50% {
      box-shadow:
        inset 0 -140px 110px -40px rgba(220,55,30,.46),
        inset 0 0 100px rgba(180,40,20,.28);
    }
  }

  /* Screen — wallpaper-style dark background, no orange tinting (real iOS aesthetic) */
  .leak2__screen{
    position: relative;
    width: 100%; height: 100%;
    border-radius: 44px;
    overflow: hidden;
    background:
      radial-gradient(120% 80% at 50% 0%, rgba(70,70,80,.45), rgba(20,20,24,0) 55%),
      radial-gradient(140% 100% at 50% 100%, rgba(40,28,22,.55), rgba(14,14,18,0) 60%),
      linear-gradient(180deg, #1a1a1f 0%, #0c0c10 100%);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
  }

  /* Dynamic Island — black pill at top center */
  .leak2__notch{
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    width: 36%; min-width: 100px; max-width: 130px;
    height: 30px;
    background: #000;
    border-radius: 28px;
    z-index: 6;
    box-shadow: inset 0 0 0 1px #111;
  }

  /* iOS Status bar — time on left, signal/wifi/battery on right */
  .leak2__statusbar{
    position: absolute; top: 0; left: 0; right: 0;
    height: 46px;
    padding: 0 28px;
    display: flex; justify-content: space-between; align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    z-index: 5;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }
  .leak2__statusbar .leak2__day{
    color: #fff;
    letter-spacing: -0.01em;
    padding-top: 8px;
  }
  .leak2__statusbar .ios-icons{
    display: inline-flex; align-items: center; gap: 6px;
    padding-top: 8px;
  }
  .leak2__statusbar .ios-icons svg{ display: block; }

  /* ============== SCENES (stacked, cross-fade) ============== */
  .leak2__scene{
    position: absolute;
    inset: 46px 0 0 0;     /* below status bar */
    padding: 0 14px 24px;
    display: flex; flex-direction: column;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 320ms ease, transform 420ms cubic-bezier(.2,.65,.2,1);
    pointer-events: none;
    will-change: opacity, transform;
    color: #fff;
  }
  .leak2__scene.is-active{
    opacity: 1; transform: translateY(0);
    pointer-events: auto;
  }

  /* In-screen header (Lock-screen date/time block OR app-bar for scenes 2 & 3) */
  .leak2__sceneLabel{ display: none; } /* legacy class — hidden, replaced by purpose-built blocks */

  /* --- LOCK SCREEN block (Scene 1) --- */
  .leak2__lock{
    text-align: center;
    padding: 6px 0 22px;
    color: #fff;
  }
  .leak2__lock__lock{
    width: 14px; height: 14px;
    margin: 0 auto 14px;
    opacity: .9;
  }
  .leak2__lock__date{
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,.92);
    letter-spacing: 0;
    margin-bottom: 6px;
  }
  .leak2__lock__time{
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    font-weight: 200;
    font-size: 76px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #fff;
    font-variant-numeric: tabular-nums;
  }

  /* --- iOS notification card (Scene 1) --- */
  .leak2__notif{
    display: grid;
    grid-template-columns: 32px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    background: rgba(255,255,255,.10);
    /* PERF: blur 24px -> 8px. Three iOS notification cards × 24px blur was painful on weaker GPUs. */
    backdrop-filter: blur(8px) saturate(150%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    border: 0.5px solid rgba(255,255,255,.10);
    border-radius: 16px;
    padding: 10px 12px 11px;
    margin-bottom: 8px;
    opacity: 0; transform: translateY(12px);
    transition: opacity 340ms ease, transform 460ms cubic-bezier(.2,.65,.2,1);
    transition-delay: calc(var(--i) * 110ms + 80ms);
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
  }
  .leak2__scene--1.is-active .leak2__notif{
    opacity: 1; transform: translateY(0);
  }
  .leak2__notif .ios-app-icon{
    grid-row: 1 / span 2;
    width: 32px; height: 32px;
    border-radius: 8px;
    background: #1a1a1f;
    display: grid; place-items: center;
    color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
    overflow: hidden;
    align-self: start;
  }
  .leak2__notif .ios-app-icon svg{ width: 18px; height: 18px; }
  .leak2__notif .ios-app-icon.ico--phone{ background: linear-gradient(180deg, #4cd964, #2cab4a); }
  .leak2__notif .ios-app-icon.ico--msg  { background: linear-gradient(180deg, #67d6ff, #2196f3); }
  .leak2__notif .ios-app-icon.ico--mail { background: linear-gradient(180deg, #5cc1ff, #1e88e5); }
  .leak2__notif .ios-app-icon.ico--fb   { background: linear-gradient(180deg, #4267b2, #29487d); }
  .leak2__notif .ios-app-icon.ico--web  { background: linear-gradient(180deg, #ff9d4d, #e07b30); }

  .leak2__notif .ios-app-name{
    grid-column: 2; grid-row: 1;
    font-size: 12px; font-weight: 600;
    color: rgba(255,255,255,.85);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    align-self: center;
  }
  .leak2__notif .ios-time{
    grid-column: 3; grid-row: 1;
    font-size: 11.5px; font-weight: 500;
    color: rgba(255,255,255,.62);
    align-self: center;
  }
  .leak2__notif .ios-content{
    grid-column: 2 / span 2; grid-row: 2;
    color: #fff;
    font-size: 13.5px;
    line-height: 1.32;
    font-weight: 400;
  }
  .leak2__notif .ios-content b{
    font-weight: 600;
    display: block;
    margin-bottom: 1px;
  }

  /* Footer "0/3 seen" badge */
  .leak2__unseen{
    margin-top: auto;
    align-self: stretch;
    display: flex; justify-content: space-between; align-items: center;
    font-family: -apple-system, system-ui, sans-serif;
    font-size: 11.5px; letter-spacing: 0;
    color: rgba(255,255,255,.55);
    padding: 10px 8px 0;
    border-top: 1px solid rgba(255,255,255,.07);
    text-transform: uppercase;
    font-weight: 500;
    opacity: 0;
    transition: opacity 340ms ease;
    transition-delay: 480ms;
  }
  .leak2__unseen strong{
    color: #ff5f44; font-weight: 700; font-size: 13px; letter-spacing: .02em;
  }
  .leak2__scene--1.is-active .leak2__unseen{ opacity: 1; }

  /* --- iOS APP BAR (used by scenes 2 & 3) --- */
  .leak2__appbar{
    text-align: center;
    padding: 4px 0 14px;
    border-bottom: 0.33px solid rgba(255,255,255,.10);
    margin-bottom: 14px;
  }
  .leak2__appbar__sub{
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,.58);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .leak2__appbar__title{
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
  }

  /* --- Scene 2 — Customer comparing quotes (Messages-style) --- */
  .leak2__custHead{ display: none; }
  .leak2__timer{
    display: inline-flex; gap: 6px; align-items: center;
    color: #ff5f44;
    font-feature-settings: 'tnum';
    font-size: 11px;
    font-weight: 500;
  }
  .leak2__bub{
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: 14px;
    background: rgba(255,255,255,.10);
    /* PERF: blur 16px -> 6px. Four message bubbles × 16px blur was redundant work. */
    backdrop-filter: blur(6px) saturate(150%);
    -webkit-backdrop-filter: blur(6px) saturate(150%);
    border: 0.5px solid rgba(255,255,255,.08);
    font-size: 13px;
    margin-bottom: 8px;
    color: #fff;
    opacity: 0; transform: translateX(-12px);
    transition: opacity 340ms ease, transform 420ms cubic-bezier(.2,.65,.2,1);
    transition-delay: calc(var(--i) * 120ms + 100ms);
  }
  .leak2__scene--2.is-active .leak2__bub{ opacity: 1; transform: translateX(0); }
  .leak2__bub strong{ color: #fff; font-weight: 600; }
  .leak2__bub span{
    color: rgba(255,255,255,.62);
    font-size: 11.5px;
    font-feature-settings: 'tnum';
  }
  .leak2__bub--you{
    margin-top: 6px;
    background: rgba(224,123,48,.10);
    border: 0.5px dashed rgba(224,123,48,.45);
    transform: translateX(0) translateY(8px);
  }
  .leak2__bub--you strong{ color: var(--orange-2); }
  .leak2__bub--you span{ color: rgba(224,123,48,.78); font-style: italic; }
  .leak2__verdict{
    margin-top: 14px;
    text-align: center;
    font-style: italic;
    font-size: 13px;
    color: rgba(255,255,255,.65);
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    opacity: 0;
    transition: opacity 380ms ease;
    transition-delay: 620ms;
  }
  .leak2__scene--2.is-active .leak2__verdict{ opacity: 1; }

  /* --- Scene 3 — Week summary / loss (Notes/Reminders-style) --- */
  .leak2__weekHead{
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 10px;
    border-bottom: 0.5px solid rgba(255,255,255,.10);
    margin-bottom: 6px;
  }
  .leak2__weekLab{
    font-size: 11.5px;
    color: rgba(255,255,255,.62);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
  }
  .leak2__lostStamp{
    font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: .16em;
    color: #ff5f44;
    padding: 4px 9px; border: 2px solid #ff5f44; border-radius: 4px;
    transform: rotate(22deg) scale(1.6); opacity: 0;
    transition: transform 750ms cubic-bezier(.2,.7,.2,1.4), opacity 350ms ease;
    transition-delay: 950ms;
    line-height: 1;
  }
  .leak2__scene--3.is-active .leak2__lostStamp{
    transform: rotate(-7deg) scale(1);
    opacity: 0.94;
  }
  .leak2__r-line{
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 13px; color: rgba(255,255,255,.78);
    padding: 7px 0;
    opacity: 0; transform: translateY(6px);
    transition: opacity 340ms ease, transform 360ms ease;
    transition-delay: calc(var(--i) * 90ms + 100ms);
  }
  .leak2__scene--3.is-active .leak2__r-line{ opacity: 1; transform: translateY(0); }
  .leak2__r-line strong{ color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
  .leak2__r-line em{ font-style: italic; color: rgba(255,255,255,.55); }
  .leak2__r-hr{ border: 0; border-top: 0.5px dashed rgba(255,255,255,.12); margin: 4px 0; opacity: 0; transition: opacity 300ms ease; transition-delay: 420ms; }
  .leak2__scene--3.is-active .leak2__r-hr{ opacity: 1; }
  .leak2__weekTotal{
    margin-top: auto;
    padding-top: 14px;
    text-align: center;
  }
  .leak2__weekTotalLab{
    font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin-bottom: 6px;
    opacity: 0;
    transition: opacity 340ms ease;
    transition-delay: 380ms;
    font-weight: 500;
  }
  .leak2__scene--3.is-active .leak2__weekTotalLab{ opacity: 1; }
  .leak2__weekTotalVal{
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    font-weight: 800;
    font-size: 54px; line-height: 1; letter-spacing: -0.035em;
    color: #ff3a2a;
    text-shadow:
      0 0 12px rgba(255,58,42,.85),
      0 0 32px rgba(255,40,25,.55),
      0 0 64px rgba(220,30,15,.40);
    font-variant-numeric: tabular-nums;
    opacity: 0; transform: translateY(8px);
    transition: opacity 460ms ease, transform 460ms cubic-bezier(.2,.65,.2,1.2);
    transition-delay: 500ms;
  }
  .leak2__scene--3.is-active .leak2__weekTotalVal{
    opacity: 1; transform: translateY(0);
    animation: weekTotalPulse 1.6s ease-in-out 900ms infinite;
  }
  @keyframes weekTotalPulse{
    0%, 100% {
      color: #ff3a2a;
      text-shadow:
        0 0 12px rgba(255,58,42,.85),
        0 0 32px rgba(255,40,25,.55),
        0 0 64px rgba(220,30,15,.40);
    }
    50% {
      color: #ff5142;
      text-shadow:
        0 0 18px rgba(255,80,60,1),
        0 0 48px rgba(255,55,35,.80),
        0 0 96px rgba(230,40,20,.60);
    }
  }
  .leak2__weekTotalSub{
    font-size: 12px;
    color: rgba(255,255,255,.55);
    margin-top: 6px;
    opacity: 0;
    transition: opacity 340ms ease;
    transition-delay: 640ms;
  }
  .leak2__scene--3.is-active .leak2__weekTotalSub{ opacity: 1; }

  /* ============== Responsive ============== */
  @media (max-width: 1080px){
    .leak2{ --phone-w: 380px; gap: 64px; }
    .leak2__title{ font-size: clamp(38px, 5vw, 56px); }
  }
  @media (max-width: 880px){
    .leak2{
      grid-template-columns: 1fr;
      gap: 24px;
    }
    .leak2__stage{
      position: sticky;
      top: 72px;
      height: 56vh;
      min-height: 420px;
      max-width: 340px;
      margin: 0 auto;
      order: -1; /* phone above each chapter group is awkward — instead place at top */
    }
    .leak2__copy{ padding-left: 44px; }
    .leak2__copy::before{ left: 10px; }
    .leak2__copy::after{ left: 7px; }
    /* mobile: copy padding-left:44px, rail at copy-x=10, pip 32 wide → pip-left at chap = 10 - 44 - 16 = -50 */
    .leak2__chap::before{ left: -50px; width: 32px; height: 32px; font-size: 11px; top: 6vh; }
    .leak2__chap{ min-height: auto; padding-top: 4vh; padding-bottom: 4vh; }
    .leak2__title{ font-size: 38px; }
    .leak2__lede{ font-size: 17px; }
  }
  @media (prefers-reduced-motion: reduce){
    .leak2__scene, .leak2__notif, .leak2__bub, .leak2__r-line, .leak2__weekTotalVal,
    .leak2__lostStamp, .leak2__chap::before, .leak2__verdict, .leak2__unseen,
    .leak2__weekTotalLab, .leak2__weekTotalSub, .leak2__r-hr{
      transition: none !important;
    }
    .leak2__copy::before, .leak2__intro::after{ animation: none !important; }
  }

  /* === PLAN STEPS === */
  .plan-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .step{
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 36px 30px 32px;
    position: relative;
    overflow: hidden; /* clip the giant outline numeral inside the card */
    transition: border-color .4s ease, transform .4s cubic-bezier(.22,.61,.36,1);
  }
  .step::before{
    /* Giant decorative outline numeral — industrial gauge feel */
    content: attr(data-num);
    position: absolute;
    right: -14px; bottom: -36px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 200px;
    line-height: 1;
    letter-spacing: -0.06em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(224,123,48,.22);
    pointer-events: none;
    transition: -webkit-text-stroke-color .4s ease;
  }
  .step:hover{ border-color: rgba(224,123,48,.30); transform: translateY(-2px); }
  .step:hover::before{ -webkit-text-stroke-color: rgba(224,123,48,.35); }
  .step .n{
    font-family: var(--font-mono);
    font-size: 11px; color: var(--orange); letter-spacing: 0.22em;
    display:block; margin-bottom: 18px; text-transform: uppercase;
    position: relative; z-index: 1;
  }
  .step h3{ font-size: 24px; font-weight: 600; margin-bottom: 14px; color: var(--text-on-dark); position: relative; z-index: 1; }
  .step p{ color: var(--text-on-dark-2); font-size: 16px; line-height: 1.6; position: relative; z-index: 1; }
  .plan-foot{ margin-top: 40px; color: var(--muted-d); font-size: 15px; }
  @media (max-width: 880px){ .plan-grid{ grid-template-columns: 1fr; } }

  /* === WHAT IT DOES (3 outcome cards) === */
  .outcome-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .outcome-grid--four{ grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .outcome{
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 36px 32px;
    display:flex; flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: border-color .4s ease, transform .4s cubic-bezier(.22,.61,.36,1);
  }
  .outcome::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
    background: linear-gradient(180deg, var(--orange), transparent);
  }
  .outcome:hover{ border-color: rgba(224,123,48,.30); transform: translateY(-2px); }
  .outcome .ico{
    width: 48px; height: 48px; border-radius: 12px;
    background: linear-gradient(180deg, var(--orange-2) 0%, var(--orange) 60%, var(--orange-deep) 100%);
    color: #fff;
    display:grid; place-items:center;
    margin-bottom: 22px;
    box-shadow: 0 8px 18px rgba(224,123,48,.30), inset 0 1px 0 rgba(255,255,255,.25);
  }
  .outcome .ico svg{ width: 22px; height: 22px; }
  .outcome h3{ font-size: 22px; font-weight: 600; line-height: 1.2; margin-bottom: 12px; color: var(--text-on-dark); }
  .outcome p{ color: var(--text-on-dark-2); font-size: 16px; line-height: 1.6; }
  .outcome .result{
    margin-top: 24px; padding-top: 20px;
    border-top: 1px solid var(--line);
    font-family:'Geist Mono', monospace;
    font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--orange);
  }
  @media (max-width: 880px){ .outcome-grid{ grid-template-columns: 1fr; } }

  /* === CASE STUDY === */
  .case{
    background: linear-gradient(180deg, #131517 0%, #0a0b0d 100%);
    border: 1px solid rgba(224,123,48,.18);
    border-radius: var(--r-xl);
    padding: 72px 56px;
    position: relative; overflow: hidden;
  }
  .case::before{
    content:""; position:absolute; right:-100px; top:-100px;
    width: 380px; height: 380px; border-radius: 50%;
    background: radial-gradient(circle, rgba(224,123,48,.30), transparent 70%);
    pointer-events: none;
  }
  .case .eyebrow{ color: var(--orange); }
  .case h2{ color: var(--text-on-dark); font-size: clamp(30px, 4vw, 44px); margin-top: 14px; max-width: 24ch; position: relative; }
  .case-cols{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 36px; margin-top: 52px; position: relative; }
  .case-col h4{
    font-family:'Geist Mono', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--muted-d); font-weight: 500;
    padding-bottom: 14px; margin-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .case-col.result h4{ color: var(--orange); border-bottom-color: rgba(224,123,48,.30); }
  .case-col ul{ list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
  .case-col__line{
    font-family: var(--font-subhead);
    font-size: 17px;
    line-height: 1.5;
    color: var(--text-on-dark);
    margin: 0;
    letter-spacing: -0.005em;
  }
  .case-col.result .case-col__line{ color: var(--orange); }
  .case-col li{ font-size: 15px; color: var(--text-on-dark-2); line-height: 1.55; padding-left: 22px; position:relative; }
  .case-col li::before{
    content:""; position:absolute; left: 0; top: 9px; width: 12px; height: 1px; background: rgba(255,255,255,.25);
  }
  .case-col.after li::before, .case-col.result li::before{ background: var(--orange); }
  .pullquote{
    margin-top: 56px; padding: 36px 40px;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.06);
    border-left: 3px solid var(--orange);
    border-radius: 8px;
    position: relative;
  }
  .pullquote p{ font-size: 22px; line-height: 1.45; font-weight: 500; color: var(--text-on-dark); max-width: 56ch; }
  .pullquote cite{
    display:block; margin-top: 16px; font-style: normal;
    font-family:'Geist Mono', monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted-d);
  }
  .case-foot{ margin-top: 32px; font-size: 13px; color: var(--muted-d); position: relative; }

  /* === BIG TYPOGRAPHIC STAT — the promise made visual === */
  .case-stat{
    margin-top: 56px;
    padding: 36px 0 12px;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
    position: relative;
  }
  .case-stat__label{
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--muted-d); font-weight: 500;
    margin-bottom: 18px;
  }
  .case-stat__label::before{
    content: ""; width: 6px; height: 6px;
    background: var(--orange);
    box-shadow: 0 0 0 3px rgba(224,123,48,.15);
  }
  .case-stat__row{
    display: flex; align-items: baseline; gap: clamp(20px, 4vw, 56px);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.9;
    flex-wrap: wrap;
  }
  .case-stat__from{
    font-size: clamp(48px, 8vw, 96px);
    color: var(--muted-d);
    text-decoration: line-through;
    text-decoration-color: rgba(141,143,150,.4);
    text-decoration-thickness: 3px;
  }
  .case-stat__arrow{
    color: var(--orange);
    display: inline-flex; align-items: center;
    flex: none;
    transform: translateY(-0.1em);
  }
  .case-stat__to{
    font-size: clamp(72px, 13vw, 168px);
    color: var(--text-on-dark);
    display: inline-flex; align-items: baseline; gap: 0.12em;
  }
  .case-stat__unit{
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    color: var(--orange);
    font-size: 0.42em;
    letter-spacing: -0.01em;
  }
  .case-stat__sub{
    display: inline-block;
    margin-top: 14px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text-on-dark-2);
    letter-spacing: 0;
  }
  .case-stat__sub .ed{
    font-size: 1.4em;
    margin-right: 0.1em;
    vertical-align: -0.1em;
  }
  @media (max-width: 700px){
    .case-stat__row{ gap: 16px; }
    .case-stat__arrow svg{ width: 48px; height: 18px; }
  }
  @media (max-width: 880px){
    .case{ padding: 48px 24px; }
    .case-cols{ grid-template-columns: 1fr; gap: 28px; }
  }

  /* === GUIDE === */
  .guide-grid{ display:grid; grid-template-columns: 0.85fr 1fr; gap: 64px; align-items:center; }
  .guide-photo{
    aspect-ratio: 4/5;
    border-radius: var(--r-xl);
    background: radial-gradient(120% 80% at 50% 20%, #2a221c 0%, #15110d 60%, #0a0907 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      0 24px 50px rgba(0,0,0,.40),
      0 56px 96px rgba(0,0,0,.30),
      0 0 0 1px rgba(224,123,48,.08),
      0 0 80px rgba(224,123,48,.10);
    overflow: hidden;
    position: relative;
  }
  .guide-photo img.jacob{
    position:absolute; left:0; right:0; top:0; bottom:0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 18%;
    z-index: 2;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,.55));
  }
  .guide-photo .placeholder{ display:none; }
  .guide-body h2{ font-size: clamp(28px, 3.8vw, 42px); font-weight: 600; color: var(--text-on-dark); }
  .guide-body p{ margin-top: 18px; color: var(--text-on-dark-2); font-size: 17px; line-height: 1.65; max-width: 56ch; }
  .auth-strip{
    margin-top: 40px; display:grid; grid-template-columns: 1fr 1fr; gap: 18px;
    padding-top: 32px; border-top: 1px solid var(--line);
  }
  .auth-item{ display:flex; gap: 14px; align-items:flex-start; }
  .auth-item .ico{
    flex: none; width: 32px; height: 32px;
    display:grid; place-items:center; color: var(--orange);
    background: var(--orange-soft);
    border-radius: 8px;
    border: 1px solid rgba(224,123,48,.20);
  }
  .auth-item p{ margin: 0; font-size: 14px; color: var(--text-on-dark-2); line-height: 1.5; }
  @media (max-width: 880px){
    .guide-grid{ grid-template-columns: 1fr; gap: 40px; }
    .guide-photo{ max-width: 340px; margin: 0 auto; }
    .auth-strip{ grid-template-columns: 1fr; }
  }

  /* === OFFER LADDER === */
  .tiers{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; align-items: stretch; }
  .tiers--two{
    grid-template-columns: 1.05fr 0.95fr;
    gap: 28px;
    max-width: 1080px;
    margin: 0 auto;
  }
  @media (max-width: 880px){ .tiers--two{ grid-template-columns: 1fr; } }
  .tier{
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 40px 32px;
    display:flex; flex-direction: column;
    position: relative;
    transition: border-color .4s ease, transform .4s cubic-bezier(.22,.61,.36,1);
  }
  .tier:hover{ border-color: rgba(224,123,48,.30); transform: translateY(-3px); }
  .tier.featured{
    background: linear-gradient(180deg, #1c1814 0%, #16120e 100%);
    border: 1px solid rgba(224,123,48,.40);
    box-shadow: 0 0 40px rgba(224,123,48,.10), 0 30px 60px rgba(0,0,0,.40);
  }
  .tier.featured h3, .tier.featured .price, .tier.featured .sub{ color: var(--text-on-dark); }
  .tier .badge{
    position:absolute; top: -14px; left: 32px;
    background: linear-gradient(180deg, var(--orange-2), var(--orange) 60%, var(--orange-deep));
    color: #fff;
    font-family:'Geist Mono', monospace;
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    padding: 7px 14px; border-radius: var(--r-pill);
    font-weight: 600;
    box-shadow: 0 8px 18px rgba(224,123,48,.40), inset 0 1px 0 rgba(255,255,255,.25);
  }
  .tier h3{ font-size: 20px; font-weight: 600; color: var(--text-on-dark); }
  .tier .price{
    margin-top: 14px;
    font-size: 40px; font-weight: 600; letter-spacing: -0.028em; color: var(--text-on-dark);
  }
  .tier .price .unit{ font-size: 14px; color: var(--muted-d); font-weight: 500; margin-left: 6px; }
  .tier .sub{ margin-top: 10px; font-size: 15px; color: var(--text-on-dark-2); }
  .tier hr{ border: none; border-top: 1px solid var(--line); margin: 24px 0; }
  .tier.featured hr{ border-top-color: rgba(224,123,48,.18); }
  .feat-list{ list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
  .feat-list li{ font-size: 14.5px; color: var(--text-on-dark-2); line-height: 1.5; padding-left: 24px; position: relative; }
  .feat-list li::before{ content: "✓"; position:absolute; left: 0; top: 0; color: var(--orange); font-weight: 700; }
  .guarantee{
    margin-top: 24px; padding: 16px 18px;
    background: rgba(224,123,48,.08);
    border: 1px solid rgba(224,123,48,.20);
    border-radius: var(--r-md);
    font-size: 13.5px; color: var(--text-on-dark-2); line-height: 1.55;
  }
  .guarantee strong{ color: var(--orange); }
  .tier .btn{ margin-top: auto; align-self: stretch; justify-content: center; margin-top: 28px; }
  .tier.featured .btn-primary{ background: linear-gradient(180deg, var(--orange-2), var(--orange) 60%, var(--orange-deep)); color: #fff; }
  .tier.featured .btn-primary:hover{ filter: brightness(1.06); }

  /* === FOUNDING-3 — scarcity counter, trade-back, retired state === */
  .tier--founding .badge{
    display: inline-flex; align-items: center; gap: 8px;
    font-variant-numeric: tabular-nums;
    transition: background .35s ease, color .35s ease, box-shadow .35s ease;
  }
  .tier--founding .badge::before{
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.25);
    animation: foundingDot 2.4s ease-in-out infinite;
  }
  @keyframes foundingDot{
    0%,100%{ box-shadow: 0 0 0 3px rgba(255,255,255,.20); }
    50%    { box-shadow: 0 0 0 7px rgba(255,255,255,.0); }
  }
  .tier--founding .price-stamp{
    position: absolute;
    top: 88px; left: 32px;
    transform: rotate(-7deg) scale(0.96);
    font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: .18em;
    color: #ff5f44;
    padding: 6px 12px;
    border: 3px solid #ff5f44; border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1.4);
    line-height: 1;
  }

  /* TRADE-BACK BOX — what's asked in exchange */
  .tradeback{
    margin-top: 22px;
    padding: 18px 20px;
    background: linear-gradient(180deg, rgba(243,239,231,.04), rgba(243,239,231,.02));
    border: 1px dashed rgba(243,239,231,.16);
    border-radius: var(--r-md);
  }
  .tradeback__lab{
    font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: .20em; text-transform: uppercase;
    color: var(--muted-d); font-weight: 500;
    display: block; margin-bottom: 12px;
  }
  .tradeback ul{
    list-style: none; padding: 0; margin: 0; display: grid; gap: 8px;
  }
  .tradeback li{
    font-size: 13.5px; line-height: 1.5;
    color: var(--text-on-dark-2);
    padding-left: 18px; position: relative;
  }
  .tradeback li::before{
    content: "↺"; position: absolute; left: 0; top: 0;
    color: var(--orange); font-weight: 700;
  }

  /* RETIRED STATE — when data-founding-spots="0" */
  .tiers[data-founding-spots="0"] .tier--founding{
    opacity: 0.78;
    filter: saturate(0.6);
  }
  .tiers[data-founding-spots="0"] .tier--founding .badge{
    background: linear-gradient(180deg, #2a2a2e, #18181a);
    color: var(--text-on-dark-2);
    box-shadow: 0 8px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .tiers[data-founding-spots="0"] .tier--founding .badge::before{
    background: var(--muted-d); animation: none; box-shadow: none;
  }
  .tiers[data-founding-spots="0"] .tier--founding .price{
    color: var(--muted-d);
    text-decoration: line-through;
    text-decoration-color: rgba(141,143,150,.5);
    text-decoration-thickness: 2px;
  }
  .tiers[data-founding-spots="0"] .tier--founding .price-stamp{
    opacity: 0.94;
    transform: rotate(-7deg) scale(1);
  }
  .tiers[data-founding-spots="0"] .tier--founding .tradeback{ display: none; }
  .tiers[data-founding-spots="0"] .tier--founding .btn-primary{
    background: linear-gradient(180deg, #1c1a17 0%, #0a0a09 55%, #050505 100%);
    color: var(--text-on-dark);
  }
  .tiers[data-founding-spots="0"] .tier--founding .btn-primary:hover{
    background: linear-gradient(180deg, var(--orange-2) 0%, var(--orange) 55%, var(--orange-deep) 100%);
    color: #fff;
  }
  .tiers-foot{
    margin-top: 40px; text-align:center;
    color: var(--muted-d); font-size: 15px;
  }
  .tiers-foot a{ color: var(--orange); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }
  @media (max-width: 980px){ .tiers{ grid-template-columns: 1fr; } }

  /* === SUCCESS VISION === */
  .vision{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; }
  .vision .col h3{
    font-family:'Geist Mono', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--orange); font-weight: 600; margin-bottom: 24px;
  }
  .vision .checklist{ list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
  .vision .checklist li{ font-size: 17px; line-height: 1.5; color: var(--text-on-dark); padding-left: 32px; position:relative; }
  .vision .checklist li::before{
    content:""; position:absolute; left: 0; top: 6px; width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--orange-soft);
    box-shadow: inset 0 0 0 1px rgba(224,123,48,.40);
  }
  .vision .checklist li::after{
    content:""; position:absolute; left: 5px; top: 11px; width: 8px; height: 5px;
    border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
    transform: rotate(-45deg);
  }
  .vision .col p{ color: var(--text-on-dark-2); font-size: 17px; line-height: 1.7; }
  .vision .col p + p{ margin-top: 18px; }
  @media (max-width: 880px){ .vision{ grid-template-columns: 1fr; gap: 40px; } }

  /* === FINAL CTA === */
  .final{
    background:
      radial-gradient(60% 80% at 50% 0%, rgba(224,123,48,.22), transparent 65%),
      linear-gradient(180deg, #1a1714 0%, #0a0907 100%);
    border: 1px solid rgba(224,123,48,.20);
    color: var(--text-on-dark);
    border-radius: var(--r-xl);
    padding: 96px 56px; text-align: center;
    position: relative; overflow: hidden;
  }
  .final::after{
    content:""; position:absolute; left:-100px; bottom:-100px;
    width: 400px; height: 400px; border-radius: 50%;
    background: radial-gradient(circle, rgba(224,123,48,.28), transparent 70%);
    pointer-events:none;
  }
  .final h2{
    color: var(--text-on-dark);
    font-size: clamp(40px, 5.4vw, 64px); font-weight: 600;
    max-width: 22ch; margin: 14px auto 0;
    position: relative;
  }
  .final p{ color: var(--text-on-dark-2); margin: 22px auto 0; max-width: 58ch; font-size: 17px; line-height: 1.6; position: relative; }
  .final .ctas{ margin-top: 42px; display:flex; justify-content:center; gap: 14px; flex-wrap: wrap; position: relative; }
  .final .btn-primary{
    background: linear-gradient(180deg, var(--orange-2) 0%, var(--orange) 55%, var(--orange-deep) 100%);
    color: #fff;
  }
  .final .btn-primary:hover{ filter: brightness(1.06); }
  .final .alt{ margin-top: 28px; font-size: 14px; color: var(--muted-d); position: relative; }
  .final .alt a{ color: var(--orange); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
  .final .eyebrow{ color: var(--orange); }
  @media (max-width: 700px){ .final{ padding: 64px 24px; } }

  /* === FOOTER === */
  footer{ padding: 72px 0 36px; border-top: 1px solid var(--line); margin-top: 72px; }
  .foot-row{ display:flex; justify-content:space-between; align-items:flex-end; gap: 24px; flex-wrap: wrap; }
  .foot-links{ display:flex; gap: 24px; flex-wrap: wrap; }
  .foot-links a{ color: var(--muted-d); text-decoration: none; font-size: 14px; transition: color .25s ease; }
  .foot-links a:hover{ color: var(--orange); }
  .foot-row .brand-mark{
    background: url('assets/j1-logo-orange.png') no-repeat center / contain;
  }

  /* === Reveal === */
  [data-reveal]{
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity .9s cubic-bezier(.22,.61,.36,1),
      transform 1s cubic-bezier(.22,.61,.36,1);
    transition-delay: calc(var(--i,0) * 80ms);
    will-change: opacity, transform;
  }
  [data-reveal].in{ opacity: 1; transform: translateY(0); }

  [data-reveal-x="left"]{ transform: translateX(-26px); }
  [data-reveal-x="left"].in{ transform: translateX(0); }
  [data-reveal-x="right"]{ transform: translateX(26px); }
  [data-reveal-x="right"].in{ transform: translateX(0); }

  .hero-photo{ animation: none; }

  @media (prefers-reduced-motion: reduce){
    *{ transition: none !important; animation: none !important; }
    [data-reveal]{ opacity:1 !important; transform: none !important; }
    html{ scroll-behavior: auto; }
  }

  /* ============================================================
     MOBILE PAINT-PERFORMANCE OVERRIDES
     ------------------------------------------------------------
     Mobile GPUs hate full-page repaints + big-radius filters.
     On phones we drop the expensive effects nobody really notices
     at that screen size: parallax bg, the 40px blurred glows,
     the always-running marquee, and the body-wide dot-grid
     scroll-attachment that forces a relayout every frame.
     ============================================================ */
  @media (max-width: 760px){
    body{
      background-attachment: scroll;
    }
    /* Hero ambient drift glow — 40px blur + infinite animation */
    .hero-bg::before{
      filter: none;
      animation: none;
    }
    /* Final-CTA glow blob — 40px blur, no animation but still expensive */
    .final::after{
      filter: none;
      opacity: 0.12;
    }
    /* Marquee runs forever — pause when small viewport */
    .marquee-track{
      animation: none;
    }
  }

  .ico-stroke{ stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }


  /* ===== TRADE MARQUEE — infinite scroll ticker stating the audience ===== */
  .marquee{
    position: relative;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
    overflow: hidden;
    padding: 22px 0;
    margin: 0;
  }
  .marquee-track{
    display: flex;
    width: max-content;
    animation: marqueeScroll 38s linear infinite;
    will-change: transform;
  }
  .marquee-item{
    display: inline-flex; align-items: center; gap: 28px;
    padding: 0 28px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(22px, 2.6vw, 32px);
    letter-spacing: -0.02em;
    color: var(--text-on-dark);
    white-space: nowrap;
  }
  .marquee-item .sep{
    width: 8px; height: 8px;
    background: var(--orange);
    transform: rotate(45deg);
    flex: none;
  }
  .marquee-item .ed-i{
    font-family: var(--font-editorial);
    font-style: italic;
    font-weight: 400;
    color: var(--orange);
  }
  @keyframes marqueeScroll{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce){
    .marquee-track{ animation: none; }
  }

  /* ===== STRIP-BACK MOTION LAYER (subtle only) ===== */

  /* Animated hero background — slow gradient drift BEHIND the photo. No overlay on Jacob. */
  .hero-bg{
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none; overflow: hidden;
  }
  .hero-bg::before{
    content:""; position: absolute; inset: -10%;
    /* PERF: radial-gradients are naturally soft-edged. Removed redundant filter:blur(40px)
       which was forcing a real-time gaussian on every animation frame. Visual is identical. */
    background:
      radial-gradient(50% 40% at 80% 30%, rgba(224,123,48,.16), transparent 60%),
      radial-gradient(45% 35% at 20% 80%, rgba(224,123,48,.08), transparent 60%);
    animation: heroDrift 22s ease-in-out infinite;
    will-change: transform;
  }
  @keyframes heroDrift{
    0%,100%{ transform: translate(0,0); }
    50%{ transform: translate(40px,-30px); }
  }

  /* Card glow halo — PERF rewrite: replaced filter:blur(40px) on ::after pseudo-elements
     with cheap box-shadow glows on the elements themselves. Same visual effect, ~10x cheaper:
     GPU rasterizes box-shadows once and composites; filter:blur recalculates a gaussian
     every paint. With 12+ cards painting at once, this was a major frame-time hit. */
  .stake, .step, .outcome, .tier, .case-col{
    position: relative; isolation: isolate;
    transition: box-shadow 250ms ease, border-color .4s ease, transform .4s cubic-bezier(.22,.61,.36,1);
  }
  .stake, .step, .outcome, .case-col{
    box-shadow: 0 0 32px rgba(224,123,48,0.05);
  }
  .stake:hover, .step:hover, .outcome:hover, .case-col:hover{
    box-shadow: 0 0 40px rgba(224,123,48,0.18);
  }
  /* .tier keeps its existing shadow stack (.featured glow etc). Just bump on hover. */
  .tier:hover{ box-shadow: 0 0 40px rgba(224,123,48,0.18); }

  /* Mobile: drop the glow + the photo box-shadow color noise, keep layout clean */
  @media (max-width: 767px){
    .stake, .step, .outcome, .tier, .case-col{ box-shadow: none; }
    .stake:hover, .step:hover, .outcome:hover, .tier:hover, .case-col:hover{ transform: none; box-shadow: none; }
  }

  /* Reduced motion — kill the animated bg drift */
  @media (prefers-reduced-motion: reduce){
    .hero-bg::before{ animation: none; }
  }

  /* ================================================================
     STORYTELLING LAYER — chapter rail, intercards, narrator beats
     ================================================================ */

  /* ---- Chapter rail · connect-the-dots progress on right edge ---- */
  .chapter-rail{
    position: fixed;
    top: 50%; right: 28px;
    transform: translateY(-50%);
    z-index: 40;
    display: flex; flex-direction: column; align-items: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .6s ease;
    /* the vertical connecting line is the rail's own background */
  }
  .chapter-rail.is-ready{ opacity: 1; }

  /* The full vertical line behind all dots */
  .chapter-rail::before{
    content: "";
    position: absolute;
    left: 50%; top: 16px; bottom: 16px;
    width: 1px;
    background: rgba(243,239,231,.10);
    transform: translateX(-0.5px);
    z-index: 0;
  }
  /* The filled portion of the line — height set inline via --fill */
  .chapter-rail::after{
    content: "";
    position: absolute;
    left: 50%; top: 16px;
    width: 1px;
    height: var(--fill, 0%);
    max-height: calc(100% - 32px);
    background: linear-gradient(180deg, var(--orange), var(--orange-deep));
    transform: translateX(-0.5px);
    transition: height .5s cubic-bezier(.22,.61,.36,1);
    box-shadow: 0 0 8px rgba(224,123,48,.4);
    z-index: 0;
  }

  .chapter-rail a{
    pointer-events: auto;
    text-decoration: none;
    position: relative;
    z-index: 1;
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    margin: 14px 0;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid rgba(243,239,231,.22);
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 600;
    color: rgba(243,239,231,.45);
    transition: border-color .35s ease, color .35s ease, background .35s ease, transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
  }
  .chapter-rail a:first-of-type{ margin-top: 0; }
  .chapter-rail a:last-of-type{ margin-bottom: 0; }

  /* Label on the LEFT of the dot — appears on hover or when current */
  .chapter-rail a .name{
    position: absolute;
    right: calc(100% + 14px);
    top: 50%; transform: translateY(-50%);
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--text-on-dark);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, transform .35s cubic-bezier(.22,.61,.36,1);
    text-shadow: 0 1px 0 rgba(0,0,0,.4);
  }
  /* The connector mark between the label and the dot */
  .chapter-rail a .name::after{
    content: "";
    position: absolute;
    left: 100%; top: 50%;
    width: 8px; height: 1px;
    margin-left: 4px;
    background: var(--orange);
    transform: translateY(-0.5px);
  }

  /* Passed (visited) state — orange outline */
  .chapter-rail a.is-passed{
    border-color: var(--orange);
    color: var(--orange-2);
  }
  /* Current state — filled orange */
  .chapter-rail a.is-current{
    background: var(--orange);
    border-color: var(--orange);
    color: #161108;
    transform: scale(1.16);
    box-shadow: 0 0 0 4px rgba(224,123,48,.16), 0 0 18px rgba(224,123,48,.45);
  }
  .chapter-rail a.is-current .name,
  .chapter-rail a:hover .name{
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
  .chapter-rail a:hover:not(.is-current){
    border-color: var(--orange);
    color: var(--orange-2);
  }
  @media (max-width: 980px){ .chapter-rail{ display: none; } }

  /* ---- Opening narrator beat · sits between hero and stakes ---- */
  .narr-open{
    padding: 48px 0 24px;
    position: relative;
    text-align: center;
  }
  .narr-open .wrap{ max-width: 880px; }
  .narr-open__lede{
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-on-dark);
    font-size: clamp(38px, 5.6vw, 72px);
    line-height: 1.0;
    letter-spacing: -0.005em;
    max-width: 22ch;
    margin: 0 auto;
    text-wrap: balance;
  }
  .narr-open__lede em{
    font-style: normal;
    color: var(--orange);
    font-family: var(--font-display);
    font-weight: 900;
  }

  /* === COMPARE TABLE === */
  .compare{
    margin-top: 44px;
    background: #1c1e22;
    background-image: none;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r-lg, 16px);
    overflow: hidden;
    position: relative;
    z-index: 1;
    isolation: isolate;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.55);
  }
  .compare *{ background-image: none; }
  /* Solid surface layer behind everything so the body dot-grid never bleeds
     through, no matter what individual rows do. */
  .compare::before{
    content: "";
    position: absolute; inset: 0;
    background: #1c1e22;
    z-index: -1;
    border-radius: inherit;
  }
  .compare__head,
  .compare__row,
  .compare__total{
    display: grid;
    grid-template-columns: 1.4fr 1.5fr 1fr 0.85fr;
    align-items: center;
    padding: 22px 32px;
    border-top: 1px solid rgba(255,255,255,.05);
    background: #1c1e22;
  }
  .compare__head{
    border-top: 0;
    background: #14110e;
    font-family: var(--font-mono);
    font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255,255,255,.75);
    padding: 18px 32px;
  }
  .compare__row{
    transition: background .25s ease;
  }
  .compare__row:hover{ background: #23262b; }
  .compare__col--feat{
    font-family: var(--font-subhead);
    font-weight: 700;
    color: #ffffff;
    font-size: 18px;
    letter-spacing: -0.005em;
  }
  .compare__col--repl{
    color: rgba(243,239,231,.85);
    font-size: 16px;
  }
  /* Brand logo circles — round chips that hold a WebP brand mark image.
     The image lives at assets/logos/<brand>.webp; if it 404s, the onerror
     handler swaps in a brand-color monogram so the table never breaks. */
  .brand-chips{
    display: inline-flex; align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .brand-logo{
    position: relative;
    display: inline-grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow:
      0 2px 4px rgba(0,0,0,.30),
      0 6px 12px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.45),
      inset 0 -1px 0 rgba(0,0,0,.08);
    user-select: none;
    transition: transform .2s ease, box-shadow .2s ease;
    flex: 0 0 auto;
    overflow: hidden;
  }
  .brand-logo:hover{
    transform: translateY(-2px);
    box-shadow:
      0 4px 8px rgba(0,0,0,.35),
      0 10px 20px rgba(0,0,0,.25),
      inset 0 1px 0 rgba(255,255,255,.45);
  }
  /* The actual logo image — 64% of the circle, contained, centered. */
  .brand-logo img{
    width: 22px; height: 22px;
    object-fit: contain;
    object-position: center;
    display: block;
  }
  /* Monogram fallback (shown ONLY when the <img> errors out / is missing).
     Hidden by default so transparent WebP logos don't show a ghost letter behind. */
  .brand-logo[data-mono]::before{
    content: attr(data-mono);
    position: absolute; inset: 0;
    display: none;
    place-items: center;
    font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: -0.02em;
    color: var(--mono-color, #1a1f2e);
    z-index: 0;
  }
  .brand-logo.is-fallback[data-mono]::before{ display: grid; }
  .brand-logo img{ position: relative; z-index: 1; }
  .brand-logo.is-fallback img{ display: none; }
  /* Tooltip on hover — full brand name */
  .brand-logo[title]:hover::after{
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%; transform: translateX(-50%);
    background: #0c0d0f;
    color: #f3efe7;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .04em;
    padding: 5px 9px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.10);
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
  }
  .compare__col--cost{
    font-family: var(--font-mono);
    font-size: 15px;
    color: rgba(243,239,231,.78);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
  }
  .compare__col--j1{ text-align: right; }
  .compare__check{
    display: inline-grid; place-items: center;
    width: 34px; height: 34px; border-radius: 10px;
    background: linear-gradient(180deg, var(--orange-2), var(--orange) 60%, var(--orange-deep));
    border: 1px solid rgba(224,123,48,.50);
    color: #fff;
    font-weight: 800; font-size: 16px;
    box-shadow: 0 6px 14px rgba(224,123,48,.30), inset 0 1px 0 rgba(255,255,255,.20);
  }
  .compare__total{
    background: linear-gradient(180deg, #1c1814 0%, #16120e 100%);
    border-top: 1px solid rgba(224,123,48,.30);
    padding: 28px 32px;
  }
  .compare__total .compare__col--feat{ font-size: 19px; }
  .compare__strike{
    font-family: var(--font-mono);
    color: var(--text-on-dark-2);
    text-decoration: line-through;
    text-decoration-color: rgba(224,80,60,.85);
    text-decoration-thickness: 2px;
    font-size: 17px;
  }
  .compare__price{
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--orange);
    font-size: 32px;
    letter-spacing: -0.02em;
    text-shadow: 0 0 24px rgba(224,123,48,.35);
    white-space: nowrap;
  }
  .compare__price small{
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    color: var(--muted-d);
    margin-left: 4px;
    letter-spacing: 0;
    text-shadow: none;
  }
  @media (max-width: 880px){
    .compare__head{ display: none; }
    .compare__row, .compare__total{
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "feat j1"
        "repl repl"
        "cost cost";
      gap: 6px 12px;
      padding: 18px 18px;
    }
    .compare__col--feat{ grid-area: feat; }
    .compare__col--repl{ grid-area: repl; font-size: 13px; }
    .compare__col--cost{ grid-area: cost; font-size: 12px; }
    .compare__col--j1{ grid-area: j1; }
  }

  .compare-summary{
    margin-top: 48px;
    text-align: center;
  }
  .compare-summary__row{
    display: inline-flex;
    align-items: stretch;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .compare-summary__stat{
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 26px 30px;
    background: #23252a;
    background-image: none;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    min-width: 200px;
    position: relative;
    z-index: 1;
    box-shadow: 0 20px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .compare-summary__stat--big{
    background: linear-gradient(180deg, #1c1814 0%, #16120e 100%);
    border: 1px solid rgba(224,123,48,.40);
    box-shadow: 0 0 40px rgba(224,123,48,.10);
  }
  .compare-summary__num{
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 30px; letter-spacing: -0.02em;
    color: var(--text-on-dark);
    line-height: 1;
  }
  .compare-summary__num--big{
    color: var(--orange);
    font-size: 40px;
    text-shadow: 0 0 28px rgba(224,123,48,.40);
  }
  .compare-summary__num small{
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px;
    color: var(--muted-d);
    margin-left: 2px;
    text-shadow: none;
  }
  .compare-summary__lab{
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted-d);
  }
  .compare-summary__plus,
  .compare-summary__eq{
    align-self: center;
    font-family: var(--font-display);
    font-weight: 700; font-size: 24px;
    color: var(--muted-d);
    padding: 0 4px;
  }
  .compare-summary__foot{
    margin-top: 28px;
    color: var(--muted-d);
    font-size: 13px;
    max-width: 60ch;
    margin-left: auto; margin-right: auto;
  }
  @media (max-width: 760px){
    .compare-summary__row{ flex-direction: column; gap: 10px; }
    .compare-summary__plus, .compare-summary__eq{ font-size: 20px; }
    .compare-summary__stat{ width: 100%; }
  }

  /* === DASHBOARD ON-THE-GO === */
  .dash-band{ padding-top: 80px; padding-bottom: 80px; }
  .dash-grid{
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: center;
  }
  .dash-phone-wrap{
    perspective: 900px;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
  }
  .dash-grid .dash-copy{ order: 2; }
  .dash-grid .dash-phone{ order: 1; }
  @media (max-width: 980px){
    .dash-grid{ grid-template-columns: 1fr; gap: 48px; }
    .dash-phone-wrap{ perspective: none; }
    .dash-grid .dash-copy{ order: 2; }
    .dash-grid .dash-phone{ order: 1; }
    .dash-phone{ transform: none !important; }
  }
  .dash-copy h2{
    font-size: clamp(40px, 5.2vw, 72px);
    line-height: 0.98;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    margin-top: 18px;
  }
  .dash-copy .ed{ color: var(--orange); }
  .dash-copy .kicker{
    margin-top: 22px;
    color: var(--text-on-dark-2);
    font-size: 17px; line-height: 1.55;
    max-width: 48ch;
  }
  .dash-list{
    list-style: none; padding: 0; margin: 32px 0 0;
    display: grid; gap: 16px;
  }
  .dash-list li{
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 14px; align-items: start;
    color: var(--text-on-dark-2);
    font-size: 15.5px; line-height: 1.5;
  }
  .dash-list li::before{
    content: "";
    width: 18px; height: 18px;
    margin-top: 3px;
    border-radius: 6px;
    background: var(--orange-soft);
    border: 1px solid rgba(224,123,48,.40);
    background-image: linear-gradient(135deg, transparent 35%, var(--orange) 35%, var(--orange) 45%, transparent 45%, transparent 55%, var(--orange) 55%, var(--orange) 65%, transparent 65%);
    background-size: 8px 8px;
    background-repeat: no-repeat;
    background-position: 4px 4px;
  }
  .dash-list strong{ color: var(--text-on-dark); font-weight: 600; }

  .dash-cta{ margin-top: 36px; display: inline-flex; }

  /* Phone */
  .dash-phone{
    position: relative;
    width: 100%; max-width: 360px;
    aspect-ratio: 9 / 19.5;
    margin: 0 auto;
    border-radius: 44px;
    padding: 12px;
    background:
      linear-gradient(135deg, #3a3a3e 0%, #1a1a1c 50%, #0e0e10 100%);
    --tilt-y: 0deg;
    --tilt-x: 0deg;
    --tilt-z: 0deg;
    --mouse-y: 0deg;
    --mouse-x: 0deg;
    transform: rotateY(calc(var(--tilt-y) + var(--mouse-y))) rotateX(calc(var(--tilt-x) + var(--mouse-x))) rotateZ(var(--tilt-z));
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    transition: transform 600ms cubic-bezier(.22,.61,.36,1);
    will-change: transform;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.08),
      inset 0 2px 0 rgba(255,255,255,.14),
      inset 0 -2px 0 rgba(0,0,0,.5),
      0 30px 50px -10px rgba(0,0,0,.5),
      0 60px 80px -30px rgba(0,0,0,.4);
  }
  .dash-phone.is-tracking{
    transition: transform 80ms linear;
  }
  .dash-phone::before{
    /* glossy edge highlight on the right side, simulates light hitting bezel */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 0%, transparent 55%, rgba(255,255,255,.08) 72%, rgba(255,255,255,.18) 80%, rgba(255,255,255,.05) 88%, transparent 100%);
    pointer-events: none;
  }
  .dash-phone::after{
    /* subtle screen reflection diagonal */
    content: "";
    position: absolute;
    top: 12px; left: 12px; right: 12px; bottom: 12px;
    border-radius: 32px;
    background: linear-gradient(115deg, transparent 0%, transparent 45%, rgba(255,255,255,.04) 55%, transparent 65%);
    pointer-events: none;
    z-index: 5;
  }
  .dash-phone__screen{
    position: relative;
    width: 100%; height: 100%;
    border-radius: 32px;
    background: linear-gradient(180deg, #0e0e10 0%, #16120e 100%);
    overflow: hidden;
    padding: 18px 14px 14px;
    display: flex; flex-direction: column;
    gap: 10px;
  }
  .dash-phone__notch{
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    width: 90px; height: 26px; border-radius: 14px;
    background: #000;
  }
  .dash-phone__statusbar{
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 600;
    color: var(--text-on-dark);
    padding: 0 6px;
    margin-bottom: 6px;
    margin-top: 2px;
  }
  .dash-phone__statusbar .icons{ display: inline-flex; gap: 4px; align-items: center; }
  .dash-phone__statusbar .icons svg{ width: 12px; height: 12px; }

  .dash-phone__head{
    padding: 8px 8px 4px;
  }
  .dash-phone__brand{
    font-family: var(--font-subhead);
    font-weight: 600;
    color: var(--text-on-dark);
    font-size: 13px;
    letter-spacing: -0.01em;
  }
  .dash-phone__sub{
    font-family: var(--font-mono);
    font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted-d);
    margin-top: 2px;
  }

  .dash-phone__kpis{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .dash-kpi{
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    padding: 12px 12px 10px;
    position: relative;
  }
  .dash-kpi__lab{
    font-family: var(--font-mono);
    font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted-d);
  }
  .dash-kpi__val{
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 24px; letter-spacing: -0.02em;
    color: var(--text-on-dark);
    line-height: 1.1;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
  }
  .dash-kpi__val--orange{
    color: var(--orange);
    text-shadow: 0 0 16px rgba(224,123,48,.40);
  }
  .dash-kpi__delta{
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: #6fbd8f;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
  }
  .dash-kpi__icon{
    position: absolute; top: 12px; right: 12px;
    width: 22px; height: 22px;
    border-radius: 6px;
    background: var(--orange-soft);
    color: var(--orange);
    display: grid; place-items: center;
  }
  .dash-kpi__icon svg{ width: 12px; height: 12px; }

  .dash-phone__list{
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 8px;
    flex: 1;
  }
  .dash-phone__listhead{
    display: flex; justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted-d);
    padding-bottom: 6px;
    border-bottom: 1px dashed rgba(255,255,255,.08);
  }
  .dash-job{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    font-size: 11.5px;
    color: var(--text-on-dark);
  }
  .dash-job small{
    grid-column: 1 / -1;
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--muted-d);
  }
  .dash-job__price{
    color: var(--orange);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
  }
  .dash-phone__dock{
    display: flex; justify-content: space-around;
    padding: 6px 4px 2px;
    border-top: 1px solid rgba(255,255,255,.06);
    margin-top: 4px;
  }
  .dash-phone__dock span{
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 9px;
    background: rgba(224,123,48,.10);
    color: var(--orange);
  }
  .dash-phone__dock span svg{ width: 14px; height: 14px; }

  /* === TESTIMONIALS === */
  .testi-band{ padding-top: 80px; padding-bottom: 80px; }
  .testi-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 64px;
    align-items: start;
  }
  .testi-grid > .testi:nth-child(1){ translate: 0 28px; }
  .testi-grid > .testi:nth-child(2){ translate: 0 -12px; }
  .testi-grid > .testi:nth-child(3){ translate: 0 40px; }
  .testi-grid > .testi:nth-child(4){ translate: 0 0; }
  @media (max-width: 1100px){
    .testi-grid{ grid-template-columns: repeat(2, 1fr); }
    .testi-grid > .testi:nth-child(1){ translate: 0 20px; }
    .testi-grid > .testi:nth-child(2){ translate: 0 0; }
    .testi-grid > .testi:nth-child(3){ translate: 0 0; }
    .testi-grid > .testi:nth-child(4){ translate: 0 20px; }
  }
  @media (max-width: 560px){
    .testi-grid{ grid-template-columns: 1fr; }
    .testi-grid > .testi{ translate: 0 !important; }
  }
  .testi{
    position: relative;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px 24px 22px;
    display: flex; flex-direction: column;
    transition: border-color .35s ease, transform .35s cubic-bezier(.22,.61,.36,1);
  }
  .testi:hover{ border-color: rgba(224,123,48,.32); transform: translateY(-3px); }
  .testi--featured{
    background: linear-gradient(180deg, #1c1814 0%, #16120e 100%);
    border: 1px solid rgba(224,123,48,.34);
    box-shadow: 0 0 30px rgba(224,123,48,.08);
  }
  .testi__mark{
    font-family: var(--font-display);
    font-size: 56px; line-height: 0.6;
    color: var(--orange);
    opacity: 0.85;
    margin-bottom: 4px;
    letter-spacing: -0.06em;
  }
  .testi__quote{
    font-family: var(--font-subhead);
    font-size: 15px; line-height: 1.55;
    color: var(--text-on-dark);
    margin: 6px 0 18px;
    text-wrap: pretty;
  }
  .testi__stars{
    display: inline-flex; gap: 2px;
    color: var(--orange);
    margin-bottom: 16px;
  }
  .testi__stars svg{ width: 13px; height: 13px; }
  .testi__who{
    margin-top: auto;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px; align-items: center;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
  }
  .testi__avatar{
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--orange-2), var(--orange-deep));
    display: grid; place-items: center;
    color: #fff;
    font-family: var(--font-display); font-weight: 800;
    font-size: 15px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  }
  .testi__name{
    font-family: var(--font-subhead);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--text-on-dark);
    line-height: 1.2;
  }
  .testi__role{
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted-d);
    margin-top: 3px;
  }
  .testi-foot{
    margin-top: 32px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted-d);
  }