/* ============================================================
   SAM TECH PLUS — “Toon Workshop” experimental version
   Shared stylesheet: tokens, layout, components, scene motion
   ============================================================ */

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

:root{
  --ink:#0A1830;
  --navy:#10264D;
  --navy-2:#16305E;
  --navy-3:#1D3A70;
  --paper:#F5F8FF;
  --white:#FFFFFF;
  --cloud:#E9F0FA;
  --mist:#C9D6E8;
  --slate:#5A6B85;
  --blue:#2E7CFF;
  --blue-deep:#1257D6;
  --blue-soft:#7FB2FF;
  --sky:#BFDCFF;
  --coral:#FF6A5A;
  --coral-deep:#E04A3A;
  --amber:#FFB941;
  --mint:#2FCB8B;
  --mint-deep:#1FA871;
  --aqua:#4FC9F2;
  --violet:#8F7BFF;
  --shadow-lg:0 24px 60px rgba(10,24,48,.16);
  --shadow-md:0 14px 34px rgba(10,24,48,.12);
  --shadow-sm:0 6px 18px rgba(10,24,48,.10);
  --r-lg:28px; --r-md:20px; --r-sm:14px;
  --ease:cubic-bezier(.45,0,.25,1);
  --pop:cubic-bezier(.34,1.4,.4,1);
  --font-display:'Nunito','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --nav-h:60px;
}

html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-size-adjust:100%;}
body{
  font-family:var(--font-body);
  background:var(--paper);color:var(--ink);
  line-height:1.55;overflow-x:hidden;font-size:16px;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--blue);color:#fff;}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.12;letter-spacing:-.015em;}

/* ---------- reveal-on-scroll (safe without JS) ---------- */
.reveal{opacity:1;transform:none;}
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
html.js .reveal.visible{opacity:1;transform:none;}
html.js.rm .reveal{opacity:1;transform:none;transition:none;}

/* ---------- scene engine gates ---------- */
/* Elements with .kf carry keyframe animation. Author markup = final (“repaired”) state.
   With JS: paused until scene enters viewport (.play). Without JS: they simply run.
   Reduced motion (.rm): animations removed → markup final state shows. */
html.js .scene:not(.play) .kf{animation-play-state:paused !important;}
html.rm .kf{animation:none !important;}
html.rm .scene .hide-rm{display:none;}
@media (prefers-reduced-motion:reduce){
  .kf{animation:none !important;}
  html{scroll-behavior:auto;}
  html.js .reveal{opacity:1;transform:none;transition:none;}
}
/* lite mode: drop ambient (non-essential) loops on low-power devices */
html.lite .kf.ambient{animation:none !important;}

/* ============================================================
   BUTTONS & PILLS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-display);font-weight:800;font-size:1rem;
  padding:.85rem 1.7rem;border-radius:999px;border:none;
  transition:transform .22s var(--pop),box-shadow .22s var(--ease),background .2s;
  position:relative;line-height:1.2;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 22px rgba(46,124,255,.35);}
.btn-primary:hover{background:var(--blue-deep);transform:translateY(-2px);box-shadow:0 12px 26px rgba(18,87,214,.4);}
.btn-outline{background:transparent;color:var(--blue);box-shadow:inset 0 0 0 2.5px var(--blue);}
.btn-outline:hover{background:rgba(46,124,255,.08);transform:translateY(-2px);}
.btn-outline.on-dark{color:#fff;box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.55);}
.btn-outline.on-dark:hover{background:rgba(255,255,255,.1);}
.btn-white{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm);}
.btn-white:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-mint{background:var(--mint);color:#053B27;box-shadow:0 8px 22px rgba(47,203,139,.35);}
.btn-mint:hover{background:var(--mint-deep);color:#fff;transform:translateY(-2px);}
.btn svg{flex-shrink:0;}
.btn-sm{padding:.55rem 1.15rem;font-size:.88rem;}

.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.8rem;font-weight:700;font-family:var(--font-display);
  background:var(--cloud);color:var(--ink);border-radius:999px;padding:.35rem .85rem;
}
.chip.on-dark{background:rgba(255,255,255,.1);color:#DCE9FF;}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--mint);}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:600;height:var(--nav-h);
  display:flex;align-items:center;gap:1rem;
  padding:0 clamp(1rem,3vw,2rem);
  background:rgba(10,24,48,.86);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid rgba(127,178,255,.14);
}
.nav-logo{display:flex;align-items:center;gap:.6rem;flex-shrink:0;}
.nav-logo img{height:34px;width:34px;border-radius:9px;display:block;}
.nav-name{font-family:var(--font-display);font-weight:800;font-size:1.02rem;color:#fff;white-space:nowrap;}
.nav-name b{color:var(--blue-soft);}
.nav-status{margin-left:.15rem;}
.status-pill{
  display:inline-flex;align-items:center;gap:.38rem;font-size:.72rem;font-weight:700;
  font-family:var(--font-display);color:#BFD3F2;background:rgba(255,255,255,.08);
  padding:.28rem .7rem;border-radius:999px;white-space:nowrap;
}
.status-pill .status-dot{width:8px;height:8px;border-radius:50%;background:var(--mist);}
.status-pill.open .status-dot{background:var(--mint);box-shadow:0 0 0 3px rgba(47,203,139,.25);}
.status-pill.closed .status-dot{background:var(--coral);box-shadow:0 0 0 3px rgba(255,106,90,.22);}
.nav-spacer{flex:1;}
.nav-links{display:flex;align-items:center;gap:clamp(.7rem,1.6vw,1.5rem);list-style:none;}
.nav-links a{
  font-size:.88rem;font-weight:600;color:#D7E4F8;opacity:.92;
  padding:.35rem .15rem;position:relative;transition:color .2s;
}
.nav-links a::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:3px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);
}
.nav-links a:hover{color:#fff;}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);}
.nav-links a.active{color:#fff;}
.nav-call-round{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;background:rgba(255,255,255,.1);color:#fff;transition:background .2s;
  flex-shrink:0;
}
.nav-call-round:hover{background:var(--blue);}
.nav-cta{flex-shrink:0;}

/* mobile menu (checkbox fallback works without JS) */
.nav-menu-check{position:absolute;opacity:0;pointer-events:none;}
.nav-burger{
  display:none;width:42px;height:42px;border-radius:12px;border:none;
  background:rgba(255,255,255,.1);align-items:center;justify-content:center;
  flex-direction:column;gap:5px;flex-shrink:0;cursor:pointer;
}
.nav-burger span{display:block;width:19px;height:2.5px;border-radius:2px;background:#fff;transition:transform .3s var(--ease),opacity .2s;}
.nav-drawer{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:590;
  background:rgba(10,24,48,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(127,178,255,.16);
  padding:.6rem 1.2rem 1.4rem;display:none;
  max-height:calc(100dvh - var(--nav-h));overflow:auto;
}
.nav-drawer ul{list-style:none;display:grid;gap:.15rem;}
.nav-drawer a{
  display:flex;align-items:center;gap:.7rem;color:#E6EFFC;font-weight:700;
  font-family:var(--font-display);font-size:1.05rem;padding:.8rem .6rem;border-radius:12px;
}
.nav-drawer a:hover,.nav-drawer a.active{background:rgba(46,124,255,.16);color:#fff;}
.nav-drawer a svg{opacity:.8;}
.nav-drawer .drawer-ctas{display:flex;gap:.7rem;margin-top:.9rem;flex-wrap:wrap;}
@media(max-width:1020px){
  .nav-links{display:none;}
  .nav-burger{display:inline-flex;}
  .nav-menu-check:checked ~ .nav-drawer{display:block;animation:drawerIn .3s var(--ease);}
  .nav-menu-check:checked ~ .nav-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
  .nav-menu-check:checked ~ .nav-burger span:nth-child(2){opacity:0;}
  .nav-menu-check:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
}
@media(max-width:640px){
  .nav-cta{display:none;}
  .nav-status{display:none;}
}
@keyframes drawerIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}

/* mobile sticky action bar */
.action-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:580;display:none;
  grid-template-columns:1fr 1fr;gap:.6rem;padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(10,24,48,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(127,178,255,.18);
  transform:translateY(110%);transition:transform .35s var(--ease);
}
.action-bar.show{transform:none;}
@media(max-width:760px){.action-bar{display:grid;} body{padding-bottom:0;}}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding:clamp(3.4rem,7vw,6rem) clamp(1.1rem,4vw,2rem);}
.section-inner{max-width:1180px;margin:0 auto;}
.section-dark{background:linear-gradient(180deg,var(--ink) 0%,var(--navy) 100%);color:#E8F0FC;}
.section-dark .section-sub{color:#A9BEDF;}
.section-cloud{background:var(--cloud);}
.section-head{text-align:center;max-width:760px;margin:0 auto clamp(2rem,4.5vw,3.4rem);}
.eyebrow{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-display);font-weight:800;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);margin-bottom:.8rem;
}
.eyebrow::before{content:'';width:22px;height:3px;border-radius:3px;background:var(--amber);}
.section-title{font-size:clamp(1.85rem,4.4vw,2.9rem);margin-bottom:.9rem;}
.section-sub{font-size:clamp(1rem,1.6vw,1.13rem);color:var(--slate);line-height:1.6;}
.fine-print{font-size:.8rem;color:var(--slate);text-align:center;margin-top:2rem;}
.section-dark .fine-print{color:#8FA6CC;}
.below-fold{/* content-visibility removed: broke full-page rendering + anchor jumps */}

/* ============================================================
   SCENE SHELL
   ============================================================ */
.scene{position:relative;}
.scene>svg:not(.store-pan),.ba-before svg,.ba-after svg{display:block;width:100%;height:auto;}
.scene .sc-shadow{opacity:.14;}

/* ============================================================
   HERO (index) — night workshop
   ============================================================ */
.hero{
  position:relative;overflow:hidden;color:#EAF2FF;
  background:
    radial-gradient(1100px 520px at 78% 8%,rgba(46,124,255,.20),transparent 60%),
    radial-gradient(900px 480px at 12% 96%,rgba(143,123,255,.12),transparent 60%),
    linear-gradient(180deg,#0A1830 0%,#0E2242 58%,#10264D 100%);
  padding:calc(var(--nav-h) + clamp(2.2rem,5vw,4rem)) clamp(1.1rem,4vw,2rem) clamp(2.6rem,5vw,4.4rem);
}
.hero-grid{
  max-width:1180px;margin:0 auto;display:grid;gap:clamp(2rem,4.5vw,4rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;
}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;} .hero-copy{text-align:center;} .hero-ctas,.hero-badges{justify-content:center;}}
.hero-kicker{
  display:inline-flex;align-items:center;gap:.5rem;background:rgba(46,124,255,.16);
  border:1px solid rgba(127,178,255,.32);color:#CFE2FF;font-family:var(--font-display);
  font-weight:800;font-size:.8rem;letter-spacing:.06em;padding:.42rem 1rem;border-radius:999px;margin-bottom:1.15rem;
}
.hero-kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--mint);}
.hero h1{font-size:clamp(2.5rem,6vw,4.3rem);color:#fff;margin-bottom:1.05rem;}
.hero h1 .hl{color:var(--blue-soft);position:relative;white-space:nowrap;}
.hero h1 .hl svg{position:absolute;left:0;right:0;bottom:-.14em;width:100%;height:.34em;overflow:visible;}
.hero-sub{font-size:clamp(1.02rem,1.9vw,1.22rem);color:#B9CCEC;max-width:540px;margin-bottom:1.6rem;}
@media(max-width:920px){.hero-sub{margin-inline:auto;}}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.5rem;}
.hero-badges{display:flex;flex-wrap:wrap;gap:.55rem;}
.hero-stage{position:relative;}
.hero-stage .scene{filter:drop-shadow(0 30px 46px rgba(4,12,28,.5));}
.hero-note{
  margin-top:1rem;display:flex;justify-content:center;
}
.hero-note span{
  font-size:.8rem;color:#9FB6DC;background:rgba(255,255,255,.06);
  border:1px solid rgba(127,178,255,.18);padding:.4rem .95rem;border-radius:999px;
}

/* wavy underline draw */
.hl-stroke{stroke:var(--amber);stroke-width:7;fill:none;stroke-linecap:round;}
.kf-underline{stroke-dasharray:230;stroke-dashoffset:0;animation:underlineDraw 1.4s var(--ease) .5s both;}
@keyframes underlineDraw{from{stroke-dashoffset:230;}to{stroke-dashoffset:0;}}

/* ---------- HERO REPAIR LOOP (11s master timeline) ---------- */
/* Author state = repaired phone, tools resting. Keyframes replay the story. */
.sc-hero .ph-body{fill:#182F5C;}
.sc-hero .ph-edge{fill:#0E2140;}
.sc-hero .ph-screen{fill:#0C1B36;}
.sc-hero .lamp-glow{opacity:.5;}

.kf-hero-phone{animation:heroPhone 11s var(--ease) infinite;transform-origin:210px 250px;}
@keyframes heroPhone{
  0%{transform:translateX(-300px) rotate(-7deg);}
  7%{transform:translateX(8px) rotate(1.4deg);}
  10%,76%{transform:none;}
  80%{transform:translateY(-8px);}
  84%{transform:translateY(0);}
  88%{transform:translateY(-4px);}
  92%,97%{transform:translateY(0);}
  100%{transform:translateX(-300px) rotate(-7deg);}
}
.kf-hero-crack{animation:heroCrack 11s linear infinite;}
@keyframes heroCrack{0%,3%{opacity:0;}6%,34%{opacity:1;}38%,100%{opacity:0;}}
.kf-hero-led{animation:heroLed 11s linear infinite;}
@keyframes heroLed{0%,6%{fill:#3A4E76;}7%,37%{fill:var(--coral);}38%,69%{fill:var(--amber);}70%,97%{fill:var(--mint);}100%{fill:#3A4E76;}}
/* screwdriver arm: swings in twice (remove + reinstall) */
.kf-hero-driver{animation:heroDriver 11s var(--ease) infinite;transform-origin:300px 300px;}
@keyframes heroDriver{
  0%,9%{transform:translate(300px,90px) rotate(30deg);}
  13%{transform:translate(-6px,4px) rotate(-6deg);}
  15%,18%{transform:translate(0,0) rotate(0);}
  19%{transform:rotate(-8deg);}
  21%,24%{transform:rotate(0);}
  28%{transform:translate(300px,90px) rotate(30deg);}
  47%{transform:translate(300px,90px) rotate(30deg);}
  51%{transform:translate(-6px,4px) rotate(-6deg);}
  53%,56%{transform:translate(0,0) rotate(0);}
  57%{transform:rotate(-8deg);}
  59%,62%{transform:rotate(0);}
  66%,100%{transform:translate(300px,90px) rotate(30deg);}
}
.kf-hero-bit-spin{animation:heroBitSpin 11s linear infinite;transform-origin:center;transform-box:fill-box;}
@keyframes heroBitSpin{
  13%,24%{}
  0%,12.9%{transform:rotate(0);}
  15%{transform:rotate(240deg);}
  18%{transform:rotate(480deg);}
  21%{transform:rotate(720deg);}
  24%{transform:rotate(960deg);}
  51%{transform:rotate(960deg);}
  53%{transform:rotate(1200deg);}
  56%{transform:rotate(1440deg);}
  59%{transform:rotate(1680deg);}
  62%{transform:rotate(1920deg);}
  100%{transform:rotate(1920deg);}
}
/* two screws leave to tray then return */
.kf-hero-screwL{animation:heroScrewL 11s var(--ease) infinite;transform-box:fill-box;transform-origin:center;}
@keyframes heroScrewL{
  0%,15%{transform:none;opacity:1;}
  19%{transform:translate(-90px,-20px) rotate(540deg);opacity:1;}
  20%,55%{transform:translate(-90px,-20px) rotate(540deg);opacity:1;}
  59%,100%{transform:none;opacity:1;}
}
.kf-hero-screwR{animation:heroScrewR 11s var(--ease) infinite;transform-box:fill-box;transform-origin:center;}
@keyframes heroScrewR{
  0%,18%{transform:none;}
  22%{transform:translate(-142px,-20px) rotate(540deg);}
  23%,57%{transform:translate(-142px,-20px) rotate(540deg);}
  61%,100%{transform:none;}
}
/* suction tool dips in, lifts old glass */
.kf-hero-suction{animation:heroSuction 11s var(--ease) infinite;}
@keyframes heroSuction{
  0%,26%{transform:translate(-40px,-300px);}
  31%{transform:translate(0,6px);}
  33%{transform:translate(0,0);}
  40%{transform:translate(10px,-300px);}
  100%{transform:translate(10px,-300px);}
}
.kf-hero-oldglass{animation:heroOldGlass 11s var(--ease) infinite;}
@keyframes heroOldGlass{
  0%,5%{transform:none;opacity:0;}
  6%,32%{transform:none;opacity:1;}
  39%{transform:translate(12px,-210px) rotate(5deg);opacity:0;}
  100%{opacity:0;}
}
/* new glass drops in */
.kf-hero-newglass{animation:heroNewGlass 11s var(--ease) infinite;}
@keyframes heroNewGlass{
  0%,42%{transform:translate(-6px,-230px) rotate(-3deg);opacity:0;}
  44%{opacity:1;}
  49%{transform:translate(0,3px) rotate(0);}
  51%,100%{transform:none;opacity:1;}
}
.kf-hero-sheen{animation:heroSheen 11s var(--ease) infinite;}
@keyframes heroSheen{0%,50%{transform:translate(-70px,70px);opacity:0;}53%{opacity:.9;}58%{transform:translate(70px,-70px);opacity:0;}100%{transform:translate(70px,-70px);opacity:0;}}
/* screen content: dark → bolt → dots → check */
.kf-hero-bolt{animation:heroBolt 11s linear infinite;transform-box:fill-box;transform-origin:center;}
@keyframes heroBolt{0%,64%{opacity:0;transform:scale(.6);}66%,71%{opacity:1;transform:scale(1);}74%,100%{opacity:0;transform:scale(.9);}}
.kf-hero-dot1{animation:heroDot1 11s linear infinite;}
.kf-hero-dot2{animation:heroDot2 11s linear infinite;}
.kf-hero-dot3{animation:heroDot3 11s linear infinite;}
@keyframes heroDot1{0%,73%{opacity:0;}74%,79%{opacity:1;}80%,100%{opacity:0;}}
@keyframes heroDot2{0%,75%{opacity:0;}76%,79%{opacity:1;}80%,100%{opacity:0;}}
@keyframes heroDot3{0%,77%{opacity:0;}78%,79%{opacity:1;}80%,100%{opacity:0;}}
.kf-hero-screenlight{animation:heroScreenLight 11s linear infinite;}
@keyframes heroScreenLight{0%,63%{opacity:0;}66%,96%{opacity:1;}100%{opacity:0;}}
.kf-hero-check{animation:heroCheck 11s var(--pop) infinite;transform-box:fill-box;transform-origin:center;}
@keyframes heroCheck{0%,79%{opacity:0;transform:scale(.3);}82%{opacity:1;transform:scale(1.12);}84%,96%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(1);}}
.kf-hero-spark1{animation:heroSpark1 11s var(--pop) infinite;transform-box:fill-box;transform-origin:center;}
.kf-hero-spark2{animation:heroSpark2 11s var(--pop) infinite;transform-box:fill-box;transform-origin:center;}
.kf-hero-spark3{animation:heroSpark3 11s var(--pop) infinite;transform-box:fill-box;transform-origin:center;}
@keyframes heroSpark1{0%,81%{opacity:0;transform:scale(0) rotate(0);}84%{opacity:1;transform:scale(1.15) rotate(18deg);}90%,100%{opacity:0;transform:scale(.4) rotate(40deg);}}
@keyframes heroSpark2{0%,83%{opacity:0;transform:scale(0) rotate(0);}86%{opacity:1;transform:scale(1) rotate(-14deg);}92%,100%{opacity:0;transform:scale(.4) rotate(-30deg);}}
@keyframes heroSpark3{0%,85%{opacity:0;transform:scale(0);}88%{opacity:1;transform:scale(.95);}94%,100%{opacity:0;transform:scale(.3);}}
.kf-hero-lamp{animation:heroLamp 11s linear infinite;}
@keyframes heroLamp{0%,4%{opacity:.18;}8%,92%{opacity:.5;}100%{opacity:.18;}}
.kf-hero-tag{animation:heroTag 11s var(--ease) infinite;transform-box:fill-box;transform-origin:top center;}
@keyframes heroTag{0%,8%{transform:rotate(0);}12%{transform:rotate(4deg);}18%{transform:rotate(-3deg);}24%{transform:rotate(0);}100%{transform:rotate(0);}}
/* ambient float for shelf items */
.kf-float{animation:floatY 5.4s ease-in-out infinite;}
.kf-float.f2{animation-duration:6.6s;animation-delay:.8s;}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}

/* ============================================================
   MARQUEE STRIP (services ticker)
   ============================================================ */
.strip{
  background:var(--blue);color:#fff;overflow:hidden;padding:.75rem 0;
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
}
.strip-track{display:flex;gap:2.6rem;width:max-content;animation:stripMove 26s linear infinite;}
html.js .strip:not(.play) .strip-track{animation-play-state:paused;}
html.rm .strip-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;}
@media (prefers-reduced-motion:reduce){.strip-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;}}
.strip-track span{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:800;font-size:.95rem;white-space:nowrap;}
.strip-track svg{flex-shrink:0;}
@keyframes stripMove{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ============================================================
   STATS
   ============================================================ */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;max-width:980px;margin:0 auto;}
@media(max-width:820px){.stats-row{grid-template-columns:repeat(2,1fr);}}
.stat-card{
  background:#fff;border-radius:var(--r-md);padding:1.5rem 1.2rem;text-align:center;
  box-shadow:var(--shadow-sm);border:2.5px solid var(--ink);position:relative;overflow:hidden;
}
.stat-card::after{content:'';position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--blue);}
.stat-card:nth-child(2)::after{background:var(--amber);}
.stat-card:nth-child(3)::after{background:var(--mint);}
.stat-card:nth-child(4)::after{background:var(--violet);}
.stat-num{font-family:var(--font-display);font-weight:900;font-size:clamp(1.7rem,3.4vw,2.4rem);color:var(--ink);line-height:1;}
.stat-lbl{font-size:.85rem;color:var(--slate);margin-top:.45rem;font-weight:600;}

/* ============================================================
   REPAIR JOURNEY — connected scroll story
   ============================================================ */
.journey{position:relative;max-width:1080px;margin:0 auto;}
.journey-path{
  position:absolute;left:34px;top:0;bottom:0;width:6px;border-radius:6px;
  background:repeating-linear-gradient(180deg,var(--mist) 0 10px,transparent 10px 20px);
}
.journey-fill{
  position:absolute;left:0;top:0;width:100%;height:0%;border-radius:6px;
  background:linear-gradient(180deg,var(--blue),var(--blue-deep));
  transition:height .15s linear;
}
html.rm .journey-fill{height:100% !important;}
.journey-token{
  position:absolute;left:-15px;top:0;width:36px;height:36px;margin-top:-18px;z-index:2;
  transition:top .15s linear;filter:drop-shadow(0 6px 10px rgba(10,24,48,.3));
}
html.rm .journey-token{top:100% !important;}
.journey-step{
  display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,320px);
  gap:clamp(.9rem,2.6vw,2rem);align-items:center;padding:clamp(1.4rem,3vw,2.2rem) 0;
}
.journey-step:nth-child(even){grid-template-columns:72px minmax(0,320px) minmax(0,1fr);}
.journey-step:nth-child(even) .journey-copy{order:3;}
.journey-step:nth-child(even) .journey-art{order:2;}
@media(max-width:860px){
  .journey-step,.journey-step:nth-child(even){grid-template-columns:60px 1fr;}
  .journey-art{grid-column:2;order:0 !important;max-width:330px;}
  .journey-copy{order:0 !important;}
  .journey-path,.journey-token{left:27px;}
}
.journey-num{
  width:52px;height:52px;border-radius:50%;background:#fff;border:3px solid var(--mist);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-weight:900;font-size:1.25rem;color:var(--slate);position:relative;z-index:3;margin-left:9px;
  transition:border-color .4s,color .4s,transform .4s var(--pop),box-shadow .4s;
}
.journey-step.lit .journey-num{border-color:var(--blue);color:var(--blue);transform:scale(1.08);box-shadow:0 0 0 6px rgba(46,124,255,.14);}
.journey-copy h3{font-size:clamp(1.2rem,2.4vw,1.55rem);margin-bottom:.5rem;}
.journey-copy p{color:var(--slate);max-width:46ch;}
.journey-art{
  background:#fff;border:2.5px solid var(--ink);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);overflow:hidden;
  opacity:.72;filter:saturate(.55);transform:scale(.985);
  transition:opacity .5s var(--ease),filter .5s var(--ease),transform .5s var(--ease);
}
html:not(.js) .journey-art,html.rm .journey-art{opacity:1;filter:none;transform:none;}
.journey-step.lit .journey-art{opacity:1;filter:none;transform:none;}
.journey-cta{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem;}

/* journey vignette micro-motion (plays when step lit) */
.jv .kf{animation-play-state:paused !important;}
.journey-step.lit .jv .kf,html:not(.js) .jv .kf{animation-play-state:running !important;}
html.rm .jv .kf{animation:none !important;}
.kf-jv-bob{animation:jvBob 3.6s ease-in-out infinite;}
@keyframes jvBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
.kf-jv-scan{animation:jvScan 2.8s var(--ease) infinite;}
@keyframes jvScan{0%,12%{transform:translateY(0);opacity:0;}20%{opacity:1;}55%{transform:translateY(64px);opacity:1;}70%,100%{transform:translateY(64px);opacity:0;}}
.kf-jv-ring{stroke-dasharray:151;animation:jvRing 3.4s var(--ease) infinite;}
@keyframes jvRing{0%{stroke-dashoffset:151;}62%,100%{stroke-dashoffset:0;}}
.kf-jv-tick1{animation:jvTick 3.4s linear infinite;}
.kf-jv-tick2{animation:jvTick 3.4s linear .45s infinite;}
.kf-jv-tick3{animation:jvTick 3.4s linear .9s infinite;}
@keyframes jvTick{0%,55%{opacity:0;transform:scale(.6);}66%,92%{opacity:1;transform:scale(1);}100%{opacity:0;}}
.kf-jv-bubble{animation:jvBubble 3.2s var(--pop) infinite;transform-box:fill-box;transform-origin:bottom left;}
@keyframes jvBubble{0%,10%{transform:scale(0);opacity:0;}18%,80%{transform:scale(1);opacity:1;}92%,100%{transform:scale(0);opacity:0;}}
.kf-jv-tool{animation:jvTool 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
@keyframes jvTool{0%,100%{transform:translateY(0) rotate(0);}40%{transform:translateY(-6px) rotate(-7deg);}70%{transform:translateY(-2px) rotate(4deg);}}
.kf-jv-star{animation:jvStar 3.2s var(--pop) infinite;transform-box:fill-box;transform-origin:center;}
@keyframes jvStar{0%,30%{transform:scale(0) rotate(0);opacity:0;}42%{transform:scale(1.15) rotate(16deg);opacity:1;}55%,86%{transform:scale(1) rotate(16deg);opacity:1;}100%{transform:scale(0);opacity:0;}}

/* ============================================================
   BEFORE / AFTER SLIDER (illustrated)
   ============================================================ */
.ba-wrap{max-width:640px;margin:0 auto;}
.ba{
  position:relative;border-radius:var(--r-lg);overflow:hidden;border:3px solid var(--ink);
  background:#0E2242;box-shadow:var(--shadow-lg);touch-action:none;user-select:none;
}
.ba svg{display:block;width:100%;height:auto;}
.ba-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--ba-pos,50%));}
.ba-divider{
  position:absolute;top:0;bottom:0;left:var(--ba-pos,50%);width:4px;margin-left:-2px;
  background:#fff;box-shadow:0 0 0 1px rgba(10,24,48,.25);z-index:3;pointer-events:none;
}
.ba-handle{
  position:absolute;top:50%;left:var(--ba-pos,50%);z-index:4;width:52px;height:52px;
  transform:translate(-50%,-50%);border-radius:50%;background:#fff;border:3px solid var(--ink);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);
  color:var(--ink);pointer-events:none;
}
.ba-tag{
  position:absolute;top:14px;z-index:5;font-family:var(--font-display);font-weight:800;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.32rem .8rem;border-radius:999px;pointer-events:none;
}
.ba-tag.before{left:14px;background:var(--coral);color:#fff;}
.ba-tag.after{right:14px;background:var(--mint);color:#053B27;}
.ba-range{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:6;
  -webkit-appearance:none;appearance:none;background:transparent;margin:0;
}
.ba-range:focus-visible ~ .ba-handle{outline:3px solid var(--amber);outline-offset:3px;}
.ba-hint{text-align:center;font-size:.85rem;color:var(--slate);margin-top:.8rem;}

/* ============================================================
   SERVICE SCENES (repairs)
   ============================================================ */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(1rem,2.4vw,1.6rem);}
.svc-card{
  background:#fff;border:2.5px solid var(--ink);border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  transition:transform .3s var(--pop),box-shadow .3s var(--ease);
}
.svc-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.svc-stage{background:linear-gradient(180deg,#EDF3FC,#DFEAF8);border-bottom:2.5px solid var(--ink);position:relative;}
.svc-body{padding:1.25rem 1.35rem 1.45rem;display:flex;flex-direction:column;gap:.5rem;flex:1;}
.svc-body h3{font-size:1.22rem;}
.svc-body p{color:var(--slate);font-size:.93rem;flex:1;}
.svc-meta{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.35rem;}
.svc-price{font-family:var(--font-display);font-weight:900;font-size:1.3rem;color:var(--ink);}
.svc-price small{display:block;font-size:.68rem;font-weight:700;color:var(--slate);letter-spacing:.04em;text-transform:uppercase;}
.svc-time{font-size:.78rem;font-weight:700;color:var(--blue-deep);background:rgba(46,124,255,.1);padding:.3rem .7rem;border-radius:999px;white-space:nowrap;}
.svc-note{font-size:.76rem;color:var(--slate);}

/* screen replacement loop (8s) */
.kf-scr-old{animation:scrOld 8s var(--ease) infinite;}
@keyframes scrOld{0%{transform:none;opacity:1;}8%,26%{transform:none;opacity:1;}44%{transform:translate(26px,-84px) rotate(9deg);opacity:0;}100%{opacity:0;}}
.kf-scr-new{animation:scrNew 8s var(--ease) infinite;}
@keyframes scrNew{0%,46%{transform:translate(-20px,-90px) rotate(-6deg);opacity:0;}52%{opacity:1;}62%{transform:translate(0,2px) rotate(0);}66%,100%{transform:none;opacity:1;}}
.kf-scr-sheen{animation:scrSheen 8s var(--ease) infinite;}
@keyframes scrSheen{0%,68%{transform:translate(-56px,56px);opacity:0;}72%{opacity:.85;}80%,100%{transform:translate(60px,-60px);opacity:0;}}
.kf-scr-crack{animation:scrCrack 8s linear infinite;}
@keyframes scrCrack{0%,42%{opacity:1;}44%,100%{opacity:0;}}
.kf-scr-check{animation:scrCheck 8s var(--pop) infinite;transform-box:fill-box;transform-origin:center;}
@keyframes scrCheck{0%,80%{opacity:0;transform:scale(.3);}86%{opacity:1;transform:scale(1.1);}88%,97%{opacity:1;transform:scale(1);}100%{opacity:0;}}

/* battery swap loop (8s) */
.kf-bat-old{animation:batOld 8s var(--ease) infinite;}
@keyframes batOld{0%,14%{transform:none;opacity:1;}30%{transform:translateX(-120px);opacity:1;}34%{transform:translateX(-140px);opacity:0;}100%{opacity:0;}}
.kf-bat-new{animation:batNew 8s var(--ease) infinite;}
@keyframes batNew{0%,38%{transform:translateX(150px);opacity:0;}44%{opacity:1;}56%{transform:translateX(-4px);}60%,100%{transform:none;opacity:1;}}
.kf-bat-fill{animation:batFill 8s var(--ease) infinite;transform-origin:left center;transform-box:fill-box;}
@keyframes batFill{0%,60%{transform:scaleX(.18);}84%,96%{transform:scaleX(1);}100%{transform:scaleX(1);}}
.kf-bat-fillcolor{animation:batFillColor 8s linear infinite;}
@keyframes batFillColor{0%,60%{fill:var(--coral);}70%{fill:var(--amber);}80%,100%{fill:var(--mint);}}
.kf-bat-pct{animation:batPct 8s linear infinite;}
@keyframes batPct{0%,62%{opacity:0;}70%,97%{opacity:1;}100%{opacity:0;}}
.kf-bat-bolt{animation:batBolt 8s var(--pop) infinite;transform-box:fill-box;transform-origin:center;}
@keyframes batBolt{0%,84%{opacity:0;transform:scale(.4);}89%,97%{opacity:1;transform:scale(1);}100%{opacity:0;}}

/* charging port loop (9s) */
.kf-port-cable{animation:portCable 9s var(--ease) infinite;}
@keyframes portCable{
  0%{transform:translate(0,60px);}
  8%{transform:translate(0,14px);}
  11%{transform:translate(0,26px);}
  17%{transform:translate(0,14px);}
  20%{transform:translate(0,60px);}
  47%{transform:translate(0,60px);}
  56%{transform:translate(0,3px);}
  60%,88%{transform:translate(0,0);}
  100%{transform:translate(0,60px);}
}
.kf-port-x{animation:portX 9s var(--pop) infinite;transform-box:fill-box;transform-origin:center;}
@keyframes portX{0%,8%{opacity:0;transform:scale(.4);}10%,18%{opacity:1;transform:scale(1);}22%,100%{opacity:0;transform:scale(.4);}}
.kf-port-brush{animation:portBrush 9s ease-in-out infinite;}
@keyframes portBrush{0%,24%{transform:translate(70px,-70px);opacity:0;}30%{transform:translate(0,0);opacity:1;}34%{transform:translate(-7px,2px);}38%{transform:translate(5px,-2px);}42%{transform:translate(-4px,1px);}46%{transform:translate(60px,-64px);opacity:0;}100%{transform:translate(70px,-70px);opacity:0;}}
.kf-port-dust1{animation:portDust 9s linear infinite;}
.kf-port-dust2{animation:portDust 9s linear .25s infinite;}
@keyframes portDust{0%,30%{opacity:0;transform:none;}34%{opacity:1;}44%{opacity:0;transform:translate(-14px,16px);}100%{opacity:0;}}
.kf-port-bolt{animation:portBolt 9s var(--pop) infinite;transform-box:fill-box;transform-origin:center;}
@keyframes portBolt{0%,60%{opacity:0;transform:scale(.3);}66%,90%{opacity:1;transform:scale(1);}94%,100%{opacity:0;}}
.kf-port-ring{animation:portRing 9s var(--ease) infinite;transform-box:fill-box;transform-origin:center;}
@keyframes portRing{0%,60%{opacity:0;transform:scale(.5);}66%{opacity:.7;transform:scale(1);}76%{opacity:0;transform:scale(1.5);}100%{opacity:0;}}

/* water damage loop (9s) */
.kf-wat-drop1{animation:watDrop 9s var(--ease) infinite;}
.kf-wat-drop2{animation:watDrop 9s var(--ease) .5s infinite;}
.kf-wat-drop3{animation:watDrop 9s var(--ease) 1s infinite;}
@keyframes watDrop{0%{transform:translateY(-66px);opacity:0;}4%{opacity:1;}14%{transform:translateY(0);opacity:1;}17%{transform:translateY(2px) scaleY(.7) scaleX(1.3);opacity:.7;}20%,100%{opacity:0;transform:translateY(2px);}}
.kf-wat-screen{animation:watScreen 9s linear infinite;}
@keyframes watScreen{0%,16%{opacity:1;}22%,52%{opacity:.25;}70%,100%{opacity:1;}}
.kf-wat-warn{animation:watWarn 9s var(--pop) infinite;transform-box:fill-box;transform-origin:center;}
@keyframes watWarn{0%,20%{opacity:0;transform:scale(.4);}25%,48%{opacity:1;transform:scale(1);}54%,100%{opacity:0;transform:scale(.4);}}
.kf-wat-mag{animation:watMag 9s ease-in-out infinite;}
@keyframes watMag{0%,42%{transform:translate(80px,60px);opacity:0;}50%{transform:translate(0,0);opacity:1;}58%{transform:translate(-16px,10px);}66%{transform:translate(10px,-6px);}74%{transform:translate(-4px,4px);opacity:1;}82%,100%{transform:translate(80px,60px);opacity:0;}}
.kf-wat-badge{animation:watBadge 9s var(--pop) infinite;transform-box:fill-box;transform-origin:center;}
@keyframes watBadge{0%,76%{opacity:0;transform:scale(.5);}82%,96%{opacity:1;transform:scale(1);}100%{opacity:0;}}

/* data transfer loop (7.5s) */
.kf-dat-chip1{animation:datChip1 7.5s var(--ease) infinite;}
.kf-dat-chip2{animation:datChip2 7.5s var(--ease) infinite;}
.kf-dat-chip3{animation:datChip3 7.5s var(--ease) infinite;}
@keyframes datChip1{0%,8%{transform:translate(0,0) scale(.6);opacity:0;}12%{opacity:1;transform:translate(8px,-30px) scale(1);}30%{transform:translate(150px,-44px) scale(1);opacity:1;}38%{transform:translate(196px,-6px) scale(.5);opacity:0;}100%{opacity:0;}}
@keyframes datChip2{0%,22%{transform:translate(0,0) scale(.6);opacity:0;}26%{opacity:1;transform:translate(8px,-34px) scale(1);}44%{transform:translate(150px,-48px) scale(1);opacity:1;}52%{transform:translate(196px,-8px) scale(.5);opacity:0;}100%{opacity:0;}}
@keyframes datChip3{0%,36%{transform:translate(0,0) scale(.6);opacity:0;}40%{opacity:1;transform:translate(8px,-38px) scale(1);}58%{transform:translate(150px,-50px) scale(1);opacity:1;}66%{transform:translate(196px,-10px) scale(.5);opacity:0;}100%{opacity:0;}}
.kf-dat-ring{stroke-dasharray:113;animation:datRing 7.5s var(--ease) infinite;}
@keyframes datRing{0%,10%{stroke-dashoffset:113;}68%,100%{stroke-dashoffset:0;}}
.kf-dat-check{animation:datCheck 7.5s var(--pop) infinite;transform-box:fill-box;transform-origin:center;}
@keyframes datCheck{0%,70%{opacity:0;transform:scale(.3);}76%,96%{opacity:1;transform:scale(1);}100%{opacity:0;}}

/* console / HDMI loop (9s) */
.kf-con-plug{animation:conPlug 9s var(--ease) infinite;}
@keyframes conPlug{0%,6%{transform:translate(0,0);}10%{transform:translate(26px,0) rotate(2deg);}12%,40%{transform:translate(30px,2px) rotate(3deg);}52%{transform:translate(30px,2px) rotate(3deg);}60%{transform:translate(0,0) rotate(0);}62%,100%{transform:none;}}
.kf-con-static{animation:conStatic 9s steps(2) infinite;}
@keyframes conStatic{0%,8%{opacity:0;}10%,58%{opacity:1;}62%,100%{opacity:0;}}
.kf-con-signal{animation:conSignal 9s linear infinite;}
@keyframes conSignal{0%,60%{opacity:0;}64%,96%{opacity:1;}100%{opacity:0;}}
.kf-con-tool{animation:conTool 9s ease-in-out infinite;}
@keyframes conTool{0%,38%{transform:translate(60px,70px);opacity:0;}44%{transform:translate(0,0);opacity:1;}47%{transform:translate(-5px,3px) rotate(-6deg);}50%{transform:translate(3px,-2px) rotate(4deg);}53%{transform:translate(-2px,1px);}58%{transform:translate(56px,66px);opacity:0;}100%{transform:translate(60px,70px);opacity:0;}}
.kf-con-led{animation:conLed 9s linear infinite;}
@keyframes conLed{0%,58%{fill:var(--coral);}62%,100%{fill:var(--mint);}}

/* SIM activation loop (8s) */
.kf-sim-card{animation:simCard 8s var(--ease) infinite;opacity:0;}
@keyframes simCard{0%,8%{transform:translate(-110px,-38px) rotate(-14deg);opacity:0;}10%{opacity:1;}26%{transform:translate(0,0) rotate(0);}36%{transform:translateX(0);opacity:1;}44%{transform:translateX(64px);opacity:0;}100%{transform:translateX(64px);opacity:0;}}
.kf-sim-tray{animation:simTray 8s var(--ease) infinite;opacity:0;}
@keyframes simTray{0%,10%{transform:translateX(-46px);opacity:1;}28%{transform:translateX(-46px);opacity:1;}36%{transform:translateX(0);opacity:1;}44%{transform:translateX(64px);opacity:0;}100%{transform:translateX(64px);opacity:0;}}
.kf-sim-bar1,.kf-sim-bar2,.kf-sim-bar3,.kf-sim-bar4{transform-box:fill-box;transform-origin:center bottom;}
.kf-sim-bar1{animation:simBar 8s var(--ease) infinite;}
.kf-sim-bar2{animation:simBar 8s var(--ease) .3s infinite;}
.kf-sim-bar3{animation:simBar 8s var(--ease) .6s infinite;}
.kf-sim-bar4{animation:simBar 8s var(--ease) .9s infinite;}
@keyframes simBar{0%,44%{transform:scaleY(.12);opacity:.35;}56%,94%{transform:scaleY(1);opacity:1;}100%{transform:scaleY(.12);opacity:.35;}}
.kf-sim-wave1{animation:simWave 8s var(--ease) infinite;}
.kf-sim-wave2{animation:simWave 8s var(--ease) .4s infinite;}
@keyframes simWave{0%,52%{opacity:0;transform:scale(.6);}60%{opacity:.8;}74%{opacity:0;transform:scale(1.25);}100%{opacity:0;}}
.kf-sim-check{animation:simCheck 8s var(--pop) infinite;transform-box:fill-box;transform-origin:center;}
@keyframes simCheck{0%,72%{opacity:0;transform:scale(.3);}78%,96%{opacity:1;transform:scale(1);}100%{opacity:0;}}

/* ============================================================
   STORE JOURNEY — scroll-scrubbed panorama
   ============================================================ */
.store-journey{position:relative;}
.store-window{
  overflow:hidden;border-radius:var(--r-lg);border:3px solid var(--ink);
  background:#0E2242;box-shadow:var(--shadow-lg);position:relative;
}
.store-pan{display:block;width:250%;max-width:none;height:auto;will-change:transform;}
html.rm .store-pan{transform:translateX(-45%) !important;}
.store-progress{
  position:absolute;left:14px;right:14px;bottom:12px;height:6px;border-radius:6px;
  background:rgba(255,255,255,.18);overflow:hidden;z-index:5;
}
.store-progress i{display:block;height:100%;width:0%;background:var(--amber);border-radius:6px;}
html.rm .store-progress i{width:100% !important;}
.store-steps{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin-top:1.1rem;}
.store-steps .chip{transition:background .3s,color .3s;}
.store-steps .chip.lit{background:var(--blue);color:#fff;}
.kf-store-walk{animation:storeWalk 1.1s ease-in-out infinite;transform-origin:center bottom;transform-box:fill-box;}
@keyframes storeWalk{0%,100%{transform:rotate(-2.4deg);}50%{transform:rotate(2.4deg);}}
.kf-store-sign{animation:storeSign 3.8s ease-in-out infinite;transform-box:fill-box;transform-origin:top center;}
@keyframes storeSign{0%,100%{transform:rotate(-1.6deg);}50%{transform:rotate(1.6deg);}}
.kf-store-twinkle{animation:storeTwinkle 2.6s ease-in-out infinite;}
.kf-store-twinkle.t2{animation-delay:.9s;}
.kf-store-twinkle.t3{animation-delay:1.7s;}
@keyframes storeTwinkle{0%,100%{opacity:.25;}50%{opacity:1;}}

/* ============================================================
   SHOWROOM (phones page)
   ============================================================ */
.filter-bar{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin-bottom:1rem;}
.filter-pill{
  border:2.5px solid var(--ink);background:#fff;color:var(--ink);
  font-family:var(--font-display);font-weight:800;font-size:.85rem;
  padding:.5rem 1.05rem;border-radius:999px;
  transition:background .22s,color .22s,transform .22s var(--pop),box-shadow .22s;
}
.filter-pill:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.filter-pill.active{background:var(--blue);border-color:var(--blue-deep);color:#fff;box-shadow:0 6px 16px rgba(46,124,255,.35);}
.sort-wrap{display:flex;align-items:center;gap:.55rem;justify-content:center;margin-bottom:1rem;}
.sort-wrap label{font-size:.85rem;font-weight:700;color:var(--slate);}
.sort-wrap select{
  font-family:var(--font-display);font-weight:700;font-size:.88rem;color:var(--ink);
  border:2.5px solid var(--ink);border-radius:999px;background:#fff;padding:.45rem 1rem;
}
.inv-results{text-align:center;font-size:.85rem;font-weight:700;color:var(--slate);margin-bottom:1.6rem;}

.shelf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:clamp(1rem,2.4vw,1.5rem);}
.pod{
  background:#fff;border:2.5px solid var(--ink);border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;position:relative;
  transition:transform .35s var(--pop),box-shadow .35s var(--ease),opacity .3s;
}
.pod:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
html.js .pod.pod-enter{opacity:0;transform:translateY(34px);}
html.js .pod.pod-in{opacity:1;transform:none;}
.pod.hidden-pod{display:none;}
.pod-stage{
  position:relative;background:linear-gradient(180deg,#F3F8FF 0%,#DCE9FA 100%);
  border-bottom:2.5px solid var(--ink);padding:1.6rem 1.2rem 2.1rem;min-height:215px;
  display:flex;align-items:flex-end;justify-content:center;
}
.pod-stage::after{ /* pedestal */
  content:'';position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  width:64%;height:13px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(10,24,48,.22),rgba(10,24,48,0) 70%);
}
.pod-stage img{
  max-height:168px;width:auto;object-fit:contain;position:relative;z-index:2;mix-blend-mode:multiply;
  transition:transform .4s var(--pop);filter:drop-shadow(0 10px 14px rgba(10,24,48,.18));
}
.pod:hover .pod-stage img{transform:translateY(-7px) scale(1.035);}
.pod-glow{
  position:absolute;left:50%;top:12%;transform:translateX(-50%);width:74%;height:70%;
  background:radial-gradient(ellipse at center,rgba(46,124,255,.28),transparent 68%);
  opacity:0;transition:opacity .4s;z-index:1;
}
.pod:hover .pod-glow,.pod:focus-within .pod-glow{opacity:1;}
.pod-tag{
  position:absolute;top:12px;left:12px;z-index:3;font-family:var(--font-display);
  font-weight:800;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;
  background:var(--ink);color:#fff;padding:.3rem .7rem;border-radius:999px;
}
.pod-tag.sale{background:var(--coral);}
.pod-tag.new{background:var(--mint);color:#053B27;}
.pod-body{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.55rem;flex:1;}
.pod-badges{display:flex;flex-wrap:wrap;gap:.35rem;}
.pod-badges span{font-size:.68rem;font-weight:700;background:var(--cloud);color:var(--ink);border-radius:999px;padding:.22rem .6rem;}
.pod-badges span.low{background:#FFE7D9;color:#B4472F;}
.pod-name{font-family:var(--font-display);font-weight:800;font-size:1.18rem;}
.pod-spec{font-size:.85rem;color:var(--slate);flex:1;}
.pod-price{font-family:var(--font-display);font-weight:900;font-size:1.35rem;}
.pod-price small{display:block;font-size:.7rem;font-weight:600;color:var(--slate);}
.pod-price .was{font-size:.95rem;color:var(--slate);text-decoration:line-through;font-weight:700;margin-right:.45rem;}
.pod-price .now{color:var(--coral-deep);}
.pod-note{font-size:.74rem;color:var(--slate);}
.pod .btn{width:100%;}

/* ============================================================
   ACCESSORIES
   ============================================================ */
.acc-cat{margin:2.6rem 0 1.1rem;display:flex;align-items:center;gap:.8rem;}
.acc-cat h3{font-size:1.35rem;}
.acc-cat::after{content:'';flex:1;height:3px;border-radius:3px;background:var(--cloud);}
.acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:1.1rem;}
.acc-card{
  background:#fff;border:2.5px solid var(--ink);border-radius:var(--r-md);padding:1.15rem;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.4rem;
  transition:transform .3s var(--pop),box-shadow .3s;position:relative;overflow:hidden;
}
.acc-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.acc-photo{
  height:150px;border-radius:var(--r-sm);background:var(--cloud);display:flex;
  align-items:center;justify-content:center;margin-bottom:.5rem;overflow:hidden;
}
.acc-photo img{max-height:132px;width:auto;object-fit:contain;mix-blend-mode:multiply;transition:transform .35s var(--pop);}
.acc-card:hover .acc-photo img{transform:scale(1.06);}
.acc-brand{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-deep);}
.acc-name{font-family:var(--font-display);font-weight:800;font-size:1.02rem;}
.acc-desc{font-size:.83rem;color:var(--slate);flex:1;}
.acc-price{font-family:var(--font-display);font-weight:800;font-size:.95rem;color:var(--ink);}
.acc-price .old{color:var(--slate);text-decoration:line-through;margin-right:.4rem;font-weight:700;}
.acc-price .new{color:var(--coral-deep);font-size:1.12rem;}
.acc-sale-flag{
  position:absolute;top:12px;right:12px;background:var(--coral);color:#fff;
  font-family:var(--font-display);font-weight:800;font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;padding:.26rem .6rem;border-radius:999px;
}

/* accessories intro scene loops */
.kf-acc-case{animation:accCase 7s var(--ease) infinite;}
@keyframes accCase{0%,10%{transform:translate(-64px,-34px) rotate(-10deg);opacity:0;}14%{opacity:1;}30%{transform:translate(0,2px) rotate(0);}34%,88%{transform:none;opacity:1;}96%,100%{opacity:0;}}
.kf-acc-snapring{animation:accSnapRing 7s var(--ease) infinite;transform-box:fill-box;transform-origin:center;}
@keyframes accSnapRing{0%,30%{opacity:0;transform:scale(.5);}34%{opacity:.75;transform:scale(1);}44%{opacity:0;transform:scale(1.45);}100%{opacity:0;}}
.kf-acc-shield{animation:accShield 7s var(--pop) infinite;transform-box:fill-box;transform-origin:center;}
@keyframes accShield{0%,36%{opacity:0;transform:scale(.4);}42%,86%{opacity:1;transform:scale(1);}94%,100%{opacity:0;}}
.kf-acc-guide{animation:accGuide 7s linear infinite;}
@keyframes accGuide{0%,8%{opacity:0;}12%,30%{opacity:.8;}36%,100%{opacity:0;}}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.3rem;max-width:980px;margin:0 auto;}
.review-card{
  background:#fff;border:2.5px solid var(--ink);border-radius:var(--r-md);
  padding:1.7rem 1.5rem 1.5rem;box-shadow:var(--shadow-sm);position:relative;
  transition:transform .3s var(--pop),box-shadow .3s;
}
.review-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.review-quote{
  position:absolute;top:-19px;left:20px;width:44px;height:38px;
  background:var(--blue);border:2.5px solid var(--ink);border-radius:12px;
  display:flex;align-items:center;justify-content:center;color:#fff;
}
html.js .scene.play .review-quote{animation:quotePop .6s var(--pop) both;}
@keyframes quotePop{from{transform:scale(0) rotate(-14deg);}to{transform:scale(1) rotate(0);}}
.review-stars{color:var(--amber);font-size:1.05rem;letter-spacing:.14em;margin-bottom:.7rem;}
.review-text{font-size:.95rem;color:#2A3A55;line-height:1.65;margin-bottom:1.1rem;}
.review-author{display:flex;align-items:center;gap:.75rem;}
.review-avatar{
  width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;
  font-family:var(--font-display);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.9rem;
  border:2.5px solid var(--ink);
}
.review-name{font-weight:800;font-family:var(--font-display);font-size:.95rem;}
.review-meta{font-size:.78rem;color:var(--slate);}
.review-verified{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:700;color:var(--mint-deep);}

/* results photo cards */
.results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem;}
.result-card{
  background:#fff;border:2.5px solid var(--ink);border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .3s var(--pop),box-shadow .3s;
}
.result-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.result-card figure{position:relative;aspect-ratio:39/40;overflow:hidden;background:var(--cloud);}
.result-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.result-card:hover img{transform:scale(1.04);}
.result-flag{
  position:absolute;top:12px;left:12px;background:rgba(10,24,48,.85);color:#fff;
  font-size:.68rem;font-weight:800;font-family:var(--font-display);letter-spacing:.07em;
  text-transform:uppercase;padding:.3rem .7rem;border-radius:999px;backdrop-filter:blur(4px);
}
.result-info{padding:1.05rem 1.2rem 1.2rem;}
.result-info h3{font-size:1.06rem;margin-bottom:.3rem;}
.result-info p{font-size:.85rem;color:var(--slate);}

/* ============================================================
   FORMS
   ============================================================ */
.form-shell{
  background:#fff;border:2.5px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);padding:clamp(1.4rem,3vw,2.2rem);color:var(--ink);
}
.form-title{font-family:var(--font-display);font-weight:800;font-size:1.4rem;margin-bottom:1.1rem;}
.form-switch{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.4rem;}
.form-switch button{
  border:2px solid var(--mist);background:#fff;color:var(--slate);
  font-family:var(--font-display);font-weight:800;font-size:.8rem;
  padding:.45rem .9rem;border-radius:999px;transition:all .22s;
}
.form-switch button:hover{border-color:var(--blue);color:var(--blue);}
.form-switch button.active{background:var(--ink);border-color:var(--ink);color:#fff;}
.nl-form{display:none;}
.nl-form.active{display:block;animation:formIn .35s var(--ease);}
html.rm .nl-form.active{animation:none;}
@keyframes formIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;}
@media(max-width:560px){.form-row{grid-template-columns:1fr;}}
.form-group{margin-bottom:.95rem;}
.form-label{display:block;font-size:.8rem;font-weight:700;color:var(--ink);margin-bottom:.35rem;font-family:var(--font-display);}
.form-input,.form-select,.form-textarea{
  width:100%;font-family:var(--font-body);font-size:.95rem;color:var(--ink);
  background:var(--paper);border:2px solid var(--mist);border-radius:12px;
  padding:.7rem .9rem;transition:border-color .2s,box-shadow .2s;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(46,124,255,.14);
}
.form-textarea{min-height:104px;resize:vertical;}
.form-note{font-size:.76rem;color:var(--slate);margin-top:.8rem;line-height:1.5;}
.form-submit{width:100%;margin-top:.4rem;}

/* mini form (trade-in / alerts) */
.mini-form{display:grid;gap:.7rem;}
.mini-form input,.mini-form select,.mini-form textarea{
  width:100%;font-family:var(--font-body);font-size:.92rem;background:#fff;
  border:2px solid var(--mist);border-radius:12px;padding:.65rem .85rem;color:var(--ink);
}
.mini-form input:focus,.mini-form select:focus,.mini-form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(46,124,255,.14);}
.mini-form textarea{min-height:84px;resize:vertical;}
.signup-inline{display:flex;gap:.7rem;flex-wrap:wrap;}
.signup-inline input{flex:1;min-width:180px;background:#fff;border:2px solid var(--mist);border-radius:999px;padding:.7rem 1.1rem;font-size:.92rem;}
.signup-inline input:focus{outline:none;border-color:var(--blue);}

/* ============================================================
   INFO PANELS / FAQ / COMPARE
   ============================================================ */
.panel{
  background:#fff;border:2.5px solid var(--ink);border-radius:var(--r-md);
  padding:1.5rem 1.5rem;box-shadow:var(--shadow-sm);color:var(--ink);
}
.panel.dark{background:var(--navy);border-color:#050E1F;color:#DFEAFB;}
.panel.dark h3{color:#fff;}
.panel h3{font-size:1.15rem;margin-bottom:.5rem;}
.panel p,.panel li{font-size:.9rem;color:var(--slate);}
.panel.dark p,.panel.dark li{color:#B7C9E8;}
.panel ul{padding-left:1.1rem;display:grid;gap:.3rem;}

.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem;max-width:1000px;margin:0 auto;}
.faq-item{
  background:#fff;border:2.5px solid var(--ink);border-radius:var(--r-md);
  padding:1.2rem 1.3rem;box-shadow:var(--shadow-sm);
}
.faq-item summary{
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:.8rem;
  cursor:pointer;font-family:var(--font-display);font-weight:800;font-size:1rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .faq-plus{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--cloud);
  display:flex;align-items:center;justify-content:center;color:var(--blue-deep);
  transition:transform .3s var(--ease),background .3s;font-weight:900;
}
.faq-item[open] summary .faq-plus{transform:rotate(45deg);background:var(--blue);color:#fff;}
.faq-item p{margin-top:.7rem;font-size:.9rem;color:var(--slate);}

.compare{overflow-x:auto;}
.compare table{width:100%;border-collapse:collapse;min-width:560px;}
.compare th,.compare td{padding:.85rem .9rem;font-size:.88rem;text-align:left;border-bottom:2px solid var(--cloud);}
.compare th{font-family:var(--font-display);font-weight:800;color:var(--ink);font-size:.92rem;}
.compare td:first-child{font-weight:700;}
.compare .win{color:var(--mint-deep);font-weight:700;display:inline-flex;align-items:center;gap:.35rem;}
.pay-strip{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem;}
.pay-strip span{font-size:.75rem;font-weight:800;font-family:var(--font-display);background:var(--cloud);border-radius:999px;padding:.32rem .8rem;color:var(--ink);}

/* pills cloud (service area / brands) */
.pill-cloud{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;max-width:860px;margin:0 auto;}
.pill-cloud span{
  font-family:var(--font-display);font-weight:800;font-size:.88rem;background:#fff;
  border:2.5px solid var(--ink);color:var(--ink);border-radius:999px;padding:.5rem 1.1rem;
  box-shadow:var(--shadow-sm);transition:transform .25s var(--pop),background .25s,color .25s;
}
.pill-cloud span:hover{transform:translateY(-3px);background:var(--blue);color:#fff;}

/* ============================================================
   LOCATION / MAP / HOURS
   ============================================================ */
.map-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1.4rem;align-items:stretch;}
@media(max-width:880px){.map-grid{grid-template-columns:1fr;}}
.map-frame{
  border:3px solid var(--ink);border-radius:var(--r-lg);overflow:hidden;min-height:340px;
  box-shadow:var(--shadow-md);background:var(--cloud);
}
.map-frame iframe{width:100%;height:100%;min-height:340px;border:0;display:block;}
.hours-table{display:grid;gap:.4rem;margin:1rem 0 1.3rem;}
.hours-row{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem;padding:.5rem .85rem;border-radius:10px;background:var(--paper);}
.hours-row.today{background:rgba(47,203,139,.14);font-weight:700;outline:2px solid rgba(47,203,139,.4);}
.hours-row span:last-child{font-weight:700;}
.loc-list{display:grid;gap:.75rem;margin:1rem 0 1.4rem;}
.loc-list>div{display:flex;gap:.75rem;align-items:flex-start;font-size:.93rem;}
.loc-list .ico{
  flex-shrink:0;width:38px;height:38px;border-radius:12px;background:var(--cloud);
  display:flex;align-items:center;justify-content:center;color:var(--blue-deep);
}

/* ============================================================
   CTA BAND & FOOTER
   ============================================================ */
.cta-band{
  position:relative;overflow:hidden;text-align:center;color:#fff;
  background:linear-gradient(135deg,var(--blue-deep) 0%,var(--blue) 55%,#4A90FF 100%);
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
}
.cta-band h2{font-size:clamp(1.9rem,4.4vw,2.9rem);margin-bottom:.7rem;}
.cta-band p{color:#DCE9FF;max-width:520px;margin:0 auto 1.6rem;}
.cta-band .cta-btns{display:flex;justify-content:center;gap:.85rem;flex-wrap:wrap;margin-bottom:1.6rem;}
.cta-band .cta-meta{display:flex;justify-content:center;gap:1.4rem;flex-wrap:wrap;font-size:.85rem;color:#E4EEFF;}
.cta-band .cta-meta span{display:inline-flex;align-items:center;gap:.45rem;}

footer{background:var(--ink);color:#B9CCEC;padding:3.4rem clamp(1.1rem,4vw,2rem) 3rem;}
@media(max-width:760px){footer{padding-bottom:6rem;}}
.footer-inner{max-width:1180px;margin:0 auto;}
.footer-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.2fr;gap:2rem;margin-bottom:2.4rem;}
@media(max-width:960px){.footer-cols{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.footer-cols{grid-template-columns:1fr;}}
.footer-brand img{height:44px;width:44px;border-radius:10px;margin-bottom:.8rem;}
.footer-brand p{font-size:.88rem;line-height:1.6;max-width:34ch;}
.footer-phone{display:inline-block;font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:#fff;margin-top:.7rem;}
.footer-phone:hover{color:var(--blue-soft);}
footer h4{color:#fff;font-size:.95rem;margin-bottom:.85rem;}
footer ul{list-style:none;display:grid;gap:.45rem;font-size:.86rem;}
footer ul a:hover{color:#fff;text-decoration:underline;}
.footer-note{font-size:.8rem;color:#7D93BC;margin-bottom:1.6rem;}
.footer-bottom{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center;
  border-top:1px solid rgba(127,178,255,.16);padding-top:1.4rem;font-size:.8rem;color:#7D93BC;
}
.footer-bottom ul{display:flex;gap:1.2rem;}

/* ============================================================
   HELP ASSISTANT
   ============================================================ */
.help-launch{
  position:fixed;right:16px;bottom:16px;z-index:640;
  display:inline-flex;align-items:center;gap:.55rem;border:2.5px solid var(--ink);
  background:var(--amber);color:var(--ink);font-family:var(--font-display);font-weight:800;
  font-size:.9rem;padding:.6rem 1.05rem .6rem .7rem;border-radius:999px;box-shadow:var(--shadow-md);
  transition:transform .25s var(--pop),box-shadow .25s;
}
.help-launch:hover{transform:translateY(-3px) scale(1.03);}
.help-launch svg{display:block;}
@media(max-width:760px){.help-launch{bottom:calc(66px + env(safe-area-inset-bottom));}}
.help-panel{
  position:fixed;right:16px;bottom:80px;z-index:650;width:min(360px,calc(100vw - 32px));
  background:#fff;border:2.5px solid var(--ink);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);display:none;flex-direction:column;overflow:hidden;
  max-height:min(560px,calc(100dvh - 120px));
}
.help-panel.open{display:flex;animation:helpIn .3s var(--pop);}
html.rm .help-panel.open{animation:none;}
@keyframes helpIn{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}
@media(max-width:760px){.help-panel{bottom:calc(126px + env(safe-area-inset-bottom));}}
.help-head{
  display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;
  background:var(--ink);color:#fff;
}
.help-head .help-bot{flex-shrink:0;}
.help-head strong{font-family:var(--font-display);font-size:.95rem;display:block;}
.help-head small{font-size:.72rem;color:#9FB6DC;display:block;line-height:1.35;}
.help-close{margin-left:auto;background:rgba(255,255,255,.12);border:none;color:#fff;width:30px;height:30px;border-radius:50%;font-size:1rem;flex-shrink:0;}
.help-body{padding:1rem;overflow:auto;}
.help-msg{font-size:.85rem;background:var(--cloud);border-radius:12px 12px 12px 4px;padding:.75rem .9rem;margin-bottom:.9rem;}
.help-options{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.9rem;}
.help-option{
  border:2px solid var(--mist);background:#fff;border-radius:10px;padding:.55rem .6rem;
  font-size:.78rem;font-weight:700;font-family:var(--font-display);color:var(--ink);
  transition:border-color .2s,background .2s;text-align:left;
}
.help-option:hover,.help-option.sel{border-color:var(--blue);background:rgba(46,124,255,.07);}
.help-answer{display:none;background:var(--paper);border:2px solid var(--cloud);border-radius:12px;padding:.9rem;}
.help-answer.show{display:block;animation:formIn .3s var(--ease);}
html.rm .help-answer.show{animation:none;}
.help-answer h4{font-size:.95rem;margin-bottom:.35rem;}
.help-answer p{font-size:.83rem;color:var(--slate);margin-bottom:.75rem;}
.help-actions{display:flex;gap:.5rem;flex-wrap:wrap;}
.help-actions a{
  font-size:.78rem;font-weight:800;font-family:var(--font-display);border-radius:999px;padding:.45rem .9rem;
}
.help-actions a.primary{background:var(--blue);color:#fff;}
.help-actions a.secondary{background:var(--cloud);color:var(--ink);}

/* ============================================================
   SIMPLE PAGES (privacy / warranty / thank-you / 404-ish)
   ============================================================ */
.simple-hero{padding-top:calc(var(--nav-h) + clamp(2.2rem,5vw,3.6rem));}
.simple-card{
  max-width:820px;margin:0 auto;background:#fff;border:2.5px solid var(--ink);
  border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:clamp(1.6rem,4vw,3rem);
}
.simple-card h1{font-size:clamp(1.9rem,4.5vw,2.7rem);margin-bottom:1rem;}
.simple-card h2{font-size:1.25rem;margin:1.6rem 0 .5rem;}
.simple-card p,.simple-card li{color:var(--slate);font-size:.95rem;line-height:1.65;}
.simple-card ul{padding-left:1.2rem;display:grid;gap:.4rem;}
.simple-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem;}

/* thank-you celebration */
.ty-scene{max-width:330px;margin:0 auto 1.4rem;}
.kf-ty-check{animation:tyCheck 1.1s var(--pop) .25s both;transform-box:fill-box;transform-origin:center;}
@keyframes tyCheck{from{opacity:0;transform:scale(.2) rotate(-16deg);}to{opacity:1;transform:scale(1) rotate(0);}}
.kf-ty-confetti{animation:tyConfetti 2.8s ease-in-out infinite;}
.kf-ty-confetti.c2{animation-delay:.5s;}
.kf-ty-confetti.c3{animation-delay:1.1s;}
@keyframes tyConfetti{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-9px) rotate(11deg);}}

/* ============================================================
   UTILITIES
   ============================================================ */
.center{text-align:center;}
.mt-1{margin-top:1rem;}.mt-2{margin-top:2rem;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;}
@media(max-width:860px){.grid-2{grid-template-columns:1fr;}}
.skip-link{
  position:fixed;top:-60px;left:16px;z-index:900;background:var(--ink);color:#fff;
  padding:.6rem 1.1rem;border-radius:0 0 12px 12px;font-weight:700;transition:top .25s;
}
.skip-link:focus{top:0;}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}