/* ══════════════════════════════════════════════════════════════════════
   ATA Prep storefront — shares the app's design tokens so the two read as
   one product. Token names and values are copied from ata-prep/index.html;
   if the app's palette changes, change it here too.
   ══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800;900&family=Work+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');
/* The logo's lettering, shipped with the product rather than fetched. */
@font-face{font-family:'Russo One';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/russo-one.woff2) format('woff2')}


:root{
  color-scheme:dark;
  --brand:#A78BFA;--brand-strong:#7C3AED;--brand-ink:#F5F3FF;--brand-soft:rgba(167,139,250,.14);
  --green:#34D399;--green-strong:#059669;--green-soft:rgba(52,211,153,.14);
  --yellow:#FBBF24;--yellow-soft:rgba(251,191,36,.14);
  --red:#FB7185;--red-strong:#DC2626;--red-soft:rgba(251,113,133,.14);
  --cyan:#38BDF8;

  --bg:#0B0918;--panel:#171233;--panel2:#1E1840;--panel-bg:#151030;
  --card-bg:linear-gradient(180deg,#1B1540,#141029);
  --hbg:rgba(11,9,24,.88);
  --body-grad:radial-gradient(1100px 620px at 8% -8%,rgba(124,58,237,.30),transparent 60%),
              radial-gradient(900px 560px at 100% 0%,rgba(56,189,248,.16),transparent 58%),
              radial-gradient(760px 520px at 50% 115%,rgba(5,150,105,.16),transparent 60%),
              linear-gradient(175deg,#0B0918 0%,#0E0B20 60%,#0A0816 100%);
  --line:#2C2358;--card-border:#3A2E73;--chip:#241C4D;
  --btn-bg:#221B4A;--btn-border:#3B2F76;--input-bg:#151030;
  --text:#EDE9FE;--muted:#A99FD4;--dim:#9A8FCC;

  --r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:26px;--r-pill:999px;
  --shadow-1:0 1px 2px rgba(0,0,0,.5),0 6px 18px -8px rgba(0,0,0,.7);
  --shadow-2:0 2px 4px rgba(0,0,0,.5),0 18px 42px -18px rgba(0,0,0,.85);
  --shadow-lift:0 10px 30px -12px rgba(124,58,237,.55),0 2px 6px rgba(0,0,0,.5);
  --inner-top:inset 0 1px 0 rgba(255,255,255,.07);
  --ring:0 0 0 3px rgba(167,139,250,.45);
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;
  --dur-fast:120ms;--dur:200ms;--dur-slow:320ms;--ease-out:cubic-bezier(.16,1,.3,1);
  --logo-shown:url(../assets/ata-logo-dark.png);
}
[data-theme="light"]{
  color-scheme:light;
  --brand:#6D28D9;--brand-strong:#7C3AED;--brand-ink:#FFFFFF;--brand-soft:rgba(109,40,217,.10);
  --green:#047857;--green-strong:#059669;--green-soft:rgba(4,120,87,.10);
  --yellow:#9A4507;--yellow-soft:rgba(180,83,9,.12);
  --red:#C81E1E;--red-strong:#DC2626;--red-soft:rgba(220,38,38,.09);
  --cyan:#0369A1;
  --bg:#F7F5FF;--panel:#FFFFFF;--panel2:#F1ECFE;--panel-bg:#FFFFFF;
  --card-bg:linear-gradient(180deg,#FFFFFF,#FBF9FF);
  --hbg:rgba(255,255,255,.90);
  --body-grad:radial-gradient(1100px 620px at 8% -8%,rgba(124,58,237,.16),transparent 60%),
              radial-gradient(900px 560px at 100% 0%,rgba(56,189,248,.14),transparent 58%),
              radial-gradient(760px 520px at 50% 115%,rgba(5,150,105,.12),transparent 60%),
              linear-gradient(175deg,#F6F2FF 0%,#F7F5FF 60%,#EEF4FF 100%);
  --line:#E3DAF8;--card-border:#D6C9F5;--chip:#F1ECFE;
  --btn-bg:#F3EEFF;--btn-border:#D6C9F5;--input-bg:#F8F6FF;
  --text:#170F32;--muted:#5B5280;--dim:#5F5786;
  --shadow-1:0 1px 2px rgba(23,15,50,.06),0 6px 16px -10px rgba(23,15,50,.22);
  --shadow-2:0 2px 4px rgba(23,15,50,.07),0 18px 40px -20px rgba(23,15,50,.30);
  --shadow-lift:0 12px 28px -14px rgba(124,58,237,.45),0 2px 6px rgba(23,15,50,.08);
  --inner-top:inset 0 1px 0 rgba(255,255,255,.9);
  --ring:0 0 0 3px rgba(109,40,217,.30);
  --logo-shown:url(../assets/ata-logo-light.png);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--body-grad);background-attachment:fixed;color:var(--text);
  font-family:'Work Sans',system-ui,-apple-system,Segoe UI,sans-serif;min-height:100dvh;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,button,.tab{font-family:Outfit,system-ui,sans-serif}
:where(a,button,input,select,[tabindex]):focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
.ic{width:1.15em;height:1.15em;flex-shrink:0;display:inline-block;vertical-align:-.18em;margin-right:.4em;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
button .ic,.logo .ic{margin-right:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:1140px;margin:0 auto;padding:0 var(--space-4)}

/* ── Header ── */
header{background:var(--hbg);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:100;padding-top:env(safe-area-inset-top)}
.hrow{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:var(--space-3) 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.logo{width:52px;height:48px;background:var(--logo-shown) center/contain no-repeat;flex-shrink:0;
  filter:drop-shadow(0 2px 6px color-mix(in srgb,var(--brand) 35%,transparent))}
.brand b{font-family:'Russo One',Outfit,system-ui,sans-serif;font-weight:400;font-size:1.25rem;letter-spacing:.03em;line-height:1}
/* The logo's lettering, for the headings that name the two exams. */
.display,.card h3{font-family:'Russo One',Outfit,system-ui,sans-serif;font-weight:400;letter-spacing:.01em}
.brand span{display:block;font-size:.74rem;color:var(--muted);font-weight:600;letter-spacing:0;text-transform:none}
nav{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
nav a,.navbtn{background:transparent;border:none;color:var(--muted);font-weight:700;font-size:.9rem;
  text-decoration:none;padding:9px 13px;min-height:44px;display:inline-flex;align-items:center;gap:6px;
  border-radius:var(--r-md);cursor:pointer;transition:color var(--dur),background var(--dur)}
nav a:hover,.navbtn:hover{color:var(--text);background:var(--brand-soft)}
nav a.on{color:var(--brand);background:var(--brand-soft)}
.cart-btn{background:var(--btn-bg);border:1.5px solid var(--btn-border);color:var(--brand);
  box-shadow:var(--shadow-1),var(--inner-top);position:relative}
.cart-count{background:var(--brand-strong);color:#fff;border-radius:var(--r-pill);font-size:.7rem;
  font-weight:800;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.cart-count[hidden]{display:none}

/* ── Buttons ── */
.btn{background:var(--btn-bg);color:var(--brand);border:1.5px solid var(--btn-border);border-radius:var(--r-md);
  padding:11px 18px;min-height:46px;font-size:.92rem;font-weight:700;font-family:Outfit,sans-serif;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  box-shadow:var(--shadow-1),var(--inner-top);
  transition:background var(--dur),color var(--dur),border-color var(--dur),transform var(--dur-fast),box-shadow var(--dur)}
.btn:hover:not(:disabled){background:var(--brand-strong);color:var(--brand-ink);border-color:var(--brand-strong);box-shadow:var(--shadow-lift)}
.btn:active:not(:disabled){transform:translateY(1px) scale(.985)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn-hero{background:linear-gradient(135deg,var(--brand-strong),#6366F1);color:#fff;border-color:transparent;
  font-size:1.05rem;padding:15px 30px;min-height:54px;box-shadow:var(--shadow-lift)}
.btn-hero:hover:not(:disabled){background:linear-gradient(135deg,#6D28D9,#4F46E5);transform:translateY(-2px)}
.btn-soft{background:var(--panel2);color:var(--muted);border-color:var(--line);box-shadow:none}
.btn-soft:hover:not(:disabled){background:var(--brand-soft)!important;color:var(--brand)!important;border-color:var(--brand)!important}
.btn-sm{padding:8px 13px;min-height:40px;font-size:.84rem}
.btn-full{width:100%}

/* ── Hero ── */
.kicker{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:var(--space-3)}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:900;letter-spacing:-.02em;line-height:1.08;
  margin-bottom:var(--space-4);text-wrap:balance}
.hero h1 em{font-style:normal;background:linear-gradient(92deg,var(--brand),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:1.08rem;color:var(--muted);max-width:60ch;margin:0 auto var(--space-5);line-height:1.65}
.hero-actions{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap}
.stats{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;margin-top:var(--space-6)}
.stat{background:var(--panel-bg);border:1.5px solid var(--line);border-radius:var(--r-lg);
  padding:var(--space-4) var(--space-5);min-width:130px;box-shadow:var(--shadow-1)}
.stat b{display:block;font-family:Outfit,sans-serif;font-size:1.9rem;font-weight:900;line-height:1.05;
  font-variant-numeric:tabular-nums;background:linear-gradient(92deg,var(--brand),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* ── Sections ── */
section{padding:var(--space-7) 0;scroll-margin-top:96px}
.sec-head{text-align:center;margin-bottom:var(--space-6)}
.sec-head h2{font-size:clamp(1.5rem,3.5vw,2.1rem);font-weight:900;letter-spacing:-.015em;margin-bottom:var(--space-2)}
.sec-head p{color:var(--muted);max-width:58ch;margin:0 auto}

/* ── Product grid ── */
.grid{display:grid;gap:var(--space-4)}
.grid-bundles{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid-singles{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{background:var(--card-bg);border:2px solid var(--card-border);border-radius:var(--r-xl);
  padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);position:relative;overflow:hidden;
  box-shadow:var(--shadow-1),var(--inner-top);transition:border-color var(--dur),transform var(--dur),box-shadow var(--dur)}
.card:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.card.feature{border-color:var(--brand)}
.card.feature::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--brand-strong),var(--cyan),var(--green))}
.card h3{font-size:1.15rem;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.card .tagline{font-size:.82rem;color:var(--brand);font-weight:700}
.card .blurb{font-size:.88rem;color:var(--muted);line-height:1.6;flex:1}
.badge{position:absolute;top:14px;right:14px;background:var(--brand-strong);color:#fff;font-size:.66rem;
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill)}
.price{font-family:Outfit,sans-serif;font-size:1.7rem;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.price.tbd{font-size:1rem;color:var(--dim);font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.includes{list-style:none;display:grid;gap:5px;font-size:.82rem;color:var(--muted)}
.includes li{display:flex;align-items:flex-start;gap:7px}
.includes .ic{color:var(--green);width:1rem;height:1rem;margin:2px 0 0}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding-top:var(--space-3);border-top:1px solid var(--line);flex-wrap:wrap}
.in-cart{color:var(--green);font-weight:800;font-size:.85rem;font-family:Outfit,sans-serif;
  display:inline-flex;align-items:center;gap:6px}

/* ── How it works ── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--space-4);counter-reset:s}
.step{background:var(--panel-bg);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:var(--space-5);
  counter-increment:s;box-shadow:var(--shadow-1)}
.step::before{content:counter(s);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--brand-strong);color:#fff;font-family:Outfit,sans-serif;font-weight:900;
  margin-bottom:var(--space-3)}
.step h4{font-size:1rem;font-weight:800;margin-bottom:6px}
.step p{font-size:.86rem;color:var(--muted);line-height:1.6}

/* ── Cart drawer ── */
.scrim{position:fixed;inset:0;background:rgba(6,4,18,.62);backdrop-filter:blur(2px);z-index:190;
  opacity:0;pointer-events:none;transition:opacity var(--dur-slow)}
.scrim.open{opacity:1;pointer-events:all}
.cart{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--panel-bg);
  border-left:1px solid var(--line);z-index:200;transform:translateX(100%);
  transition:transform var(--dur-slow) var(--ease-out);display:flex;flex-direction:column;box-shadow:var(--shadow-2)}
.cart.open{transform:translateX(0)}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);
  border-bottom:1px solid var(--line);flex-shrink:0}
.cart-head h2{font-size:1.05rem;font-weight:800}
.icon-btn{background:none;border:none;color:var(--muted);cursor:pointer;min-width:40px;min-height:40px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm);
  transition:color var(--dur),background var(--dur)}
.icon-btn:hover{color:var(--text);background:var(--panel2)}
.cart-body{padding:var(--space-4);overflow-y:auto;flex:1;display:grid;gap:var(--space-3);align-content:start}
.cart-item{background:var(--panel2);border:1.5px solid var(--line);border-radius:var(--r-md);padding:var(--space-3);
  display:flex;gap:var(--space-3);align-items:flex-start}
.cart-item-body{flex:1;min-width:0}
.cart-item b{display:block;font-family:Outfit,sans-serif;font-weight:800;font-size:.92rem;line-height:1.3}
.cart-item span{font-size:.78rem;color:var(--muted)}
.cart-item .price{font-size:1rem}
.cart-empty{text-align:center;color:var(--muted);padding:var(--space-7) var(--space-4);font-weight:600;line-height:1.7}
.cart-foot{padding:var(--space-4);border-top:1px solid var(--line);flex-shrink:0;display:grid;gap:var(--space-3)}
.total{display:flex;justify-content:space-between;align-items:baseline;font-family:Outfit,sans-serif;font-weight:800}
.total .price{font-size:1.5rem}
.dupe-note{background:var(--yellow-soft);border:1.5px solid color-mix(in srgb,var(--yellow) 34%,transparent);
  border-radius:var(--r-sm);padding:9px 11px;font-size:.8rem;line-height:1.5;color:var(--text)}

/* ── Notice / footer ── */
.notice{background:var(--brand-soft);border:1.5px solid color-mix(in srgb,var(--brand) 28%,transparent);
  border-radius:var(--r-lg);padding:var(--space-4) var(--space-5);font-size:.9rem;line-height:1.65;color:var(--text)}
.notice b{font-family:Outfit,sans-serif}
footer{border-top:1px solid var(--line);padding:var(--space-6) 0;margin-top:var(--space-7);
  color:var(--muted);font-size:.85rem}
.foot-row{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;align-items:center}
footer a{color:var(--brand);text-decoration:none}
footer a:hover{text-decoration:underline}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(90px);
  background:linear-gradient(135deg,var(--green-strong),#10B981);color:#fff;padding:13px 22px;
  border-radius:var(--r-pill);font-weight:700;font-family:Outfit,sans-serif;z-index:300;opacity:0;
  transition:opacity var(--dur-slow),transform var(--dur-slow);pointer-events:none;box-shadow:var(--shadow-2);
  max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:640px){
  .hrow{padding:var(--space-2) 0}
  .brand b{font-size:1rem}.logo{width:42px;height:39px}
  nav a,.navbtn{padding:8px 10px;font-size:.85rem}
  .nav-label{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ── Downloads ──────────────────────────────────────────────────────────── */
.grid-downloads{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.dl{text-align:center;align-items:center}
.dl h3{justify-content:center;margin-bottom:.15rem}
.dl .blurb{flex:1 0 auto;margin-bottom:var(--space-4)}
/* The platform marks are filled shapes, unlike the stroked interface icons. */
.dl-glyph{width:1.35em;height:1.35em;fill:currentColor;stroke:none;flex-shrink:0;
  display:inline-block;vertical-align:-.25em;margin-right:.5em}
.dl-badge{height:40px;width:auto;margin:0}
.btn-disabled{background:var(--panel2);color:var(--dim);border:1.5px solid var(--line);
  box-shadow:none;cursor:not-allowed}

/* ── Forms (account page) ───────────────────────────────────────────────── */
.field{display:block;margin-bottom:var(--space-3)}
.field>span{display:block;font-size:.8rem;font-weight:700;letter-spacing:.02em;
  color:var(--muted);margin-bottom:.35rem}
.field input{width:100%;padding:.7rem .85rem;border-radius:var(--r-2);font:inherit;
  color:var(--text);background:var(--panel2);border:1.5px solid var(--line);outline:none}
.field input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.field small{display:block;margin-top:.35rem;font-size:.75rem;color:var(--dim)}
.form-note{font-size:.85rem;line-height:1.45;margin:0 0 var(--space-3);
  padding:.6rem .75rem;border-radius:var(--r-2);background:var(--panel2);color:var(--muted)}
.form-note.bad{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red)}
.form-note.good{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.steps-inline{margin:0 0 var(--space-3);padding-left:1.15rem;color:var(--muted);
  font-size:.9rem;line-height:1.6}
.steps-inline li{margin-bottom:.3rem}
.dl-glyph.stroked{fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* Narrow, centre-aligned cards have no room for a corner badge. */
.dl .badge{position:static;align-self:center;margin-bottom:.5rem}

/* Anchors land below the sticky header rather than under it. */
section[id]{scroll-margin-top:96px}
.nav-item.nav-on{background:var(--brand-soft);color:var(--text)}

/* ── The aircraft on the landing page ───────────────────────────────────── */
/* The film of the ATA jet is the hero's background, edge to edge, drawn frame
   by frame as the page scrolls (js/hero-scrub.js). The headline sits over it
   in the lower part of the screen, on a scrim that darkens toward the bottom
   so the text reads. The hero keeps its own dark ground in both themes: the
   film is a night studio, and it fades into that ground at the end, not into
   the page. The poster is the first frame, shown until the script draws. */
.hero{position:relative;overflow:hidden;display:grid;gap:var(--space-3);justify-items:center;text-align:center;
  padding:var(--space-7) 0 var(--space-6);background:#0B0918;color:#EDE9FE;
  --scrim:11,9,24;--text:#EDE9FE;--muted:#C9C0EA;--dim:#B4A7E6}
.hero p{color:var(--muted)}
.hero-film{position:absolute;inset:0;z-index:0;background:#2a1a4d}
.hero-poster,.hero-scrub{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero-poster[hidden]{display:none}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--scrim),.14) 0%,rgba(var(--scrim),.04) 34%,rgba(var(--scrim),.62) 64%,rgba(var(--scrim),.92) 100%)}
.hero-content{position:relative;z-index:1;width:100%}
/* The hero pins while the film plays: .runway is taller than the hero by the
   length of the film, and the hero sticks to the top of it. The text stays
   put until the film has faded, then scrolls away with the page. */
.runway{min-height:calc(100vh + 170vh)}
.runway .hero{position:sticky;top:0;min-height:calc(100vh - 72px);align-content:end;box-sizing:border-box;
  padding-top:var(--space-6);padding-bottom:var(--space-6)}
/* The numbers sit right under the hero, the first thing after the film. */
.stats-band{padding:var(--space-5) 0 0}
.stats-band .stats{margin-top:0}
.stats-band .stat{min-width:0;flex:1 1 118px;padding:var(--space-3) var(--space-4)}
/* Phones and short screens: no pin. The film is a full-width band at the top
   of the hero, and the scrim runs it into the hero's ground above the headline. */
@media (max-width:720px),(max-height:640px),(prefers-reduced-motion:reduce){
  .runway{min-height:0}
  .runway .hero{position:relative;min-height:0;align-content:start;padding-top:0}
  .hero-film{position:relative;inset:auto;width:100%;aspect-ratio:3/2;margin-bottom:calc(-1 * var(--space-6))}
  .hero-scrim{background:linear-gradient(180deg,rgba(var(--scrim),0) 0%,rgba(var(--scrim),0) 50%,rgba(var(--scrim),.96) 100%)}
}
@media (prefers-reduced-motion:reduce){
  .hero-film{position:absolute;inset:0;aspect-ratio:auto;margin-bottom:0}
  .hero-scrim{background:linear-gradient(180deg,rgba(var(--scrim),.14) 0%,rgba(var(--scrim),.04) 34%,rgba(var(--scrim),.62) 64%,rgba(var(--scrim),.92) 100%)}
}
main>.wrap>section:not(.hero),footer{position:relative;z-index:1}
main{overflow-x:clip}

/* ── Liquid-glass button (the hero's main call to action) ──────────────── */
.btn-glass{position:relative;isolation:isolate;color:#fff;background:transparent;border:0;
  padding:0;box-shadow:none;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.btn-glass:hover{transform:scale(1.05)}
.btn-glass:active{transform:scale(.98)}
.btn-glass .glass-label{position:relative;z-index:2;display:inline-flex;align-items:center;gap:.4em;
  padding:.85rem 1.5rem;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.btn-glass .glass-face{position:absolute;inset:0;z-index:1;border-radius:999px;
  background:linear-gradient(180deg,rgba(124,58,237,.62),rgba(124,58,237,.38));
  -webkit-backdrop-filter:blur(10px) saturate(1.5);backdrop-filter:blur(10px) saturate(1.5);
  box-shadow:0 0 6px rgba(0,0,0,.03),0 2px 6px rgba(0,0,0,.08),
    inset 3px 3px .5px -3px rgba(255,255,255,.9),inset -3px -3px .5px -3px rgba(255,255,255,.85),
    inset 1px 1px 1px -.5px rgba(255,255,255,.6),inset -1px -1px 1px -.5px rgba(255,255,255,.6),
    inset 0 0 6px 6px rgba(255,255,255,.12),inset 0 0 2px 2px rgba(255,255,255,.06),
    0 0 12px rgba(255,255,255,.15);
  transition:box-shadow .3s}
.btn-glass:hover .glass-face{box-shadow:0 0 6px rgba(0,0,0,.03),0 6px 18px rgba(124,58,237,.35),
    inset 3px 3px .5px -3px rgba(255,255,255,.95),inset -3px -3px .5px -3px rgba(255,255,255,.9),
    inset 1px 1px 1px -.5px rgba(255,255,255,.7),inset -1px -1px 1px -.5px rgba(255,255,255,.7),
    inset 0 0 8px 8px rgba(255,255,255,.14),inset 0 0 2px 2px rgba(255,255,255,.08),
    0 0 16px rgba(255,255,255,.2)}
/* Chromium can run the SVG displacement filter on the backdrop; others keep the blur. */
@supports (backdrop-filter:url("#ata-glass")){
  .btn-glass .glass-face{-webkit-backdrop-filter:url("#ata-glass") blur(6px) saturate(1.5);
    backdrop-filter:url("#ata-glass") blur(6px) saturate(1.5)}
}
.btn-glass:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:999px}
@media (prefers-reduced-motion:reduce){.btn-glass,.btn-glass:hover{transform:none}}

/* ── Why us: the comparison table ───────────────────────────────────────── */
.cmp{border-collapse:separate;border-spacing:0;width:100%;font-size:.92rem;min-width:640px}
.cmp th,.cmp td{padding:.8rem .9rem;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.cmp thead th{vertical-align:bottom;border-bottom:2px solid var(--line);padding-bottom:.9rem}
.cmp thead th small,.cmp tbody th small{display:block;font-weight:500;color:var(--muted);font-size:.78rem;margin-top:.2rem;line-height:1.4}
.cmp-brand{font-family:Outfit,sans-serif;font-weight:800;font-size:1.05rem}
.cmp tbody th{font-weight:600;color:var(--text);width:38%}
.cmp td{width:20.6%}
.cmp td.us,.cmp th.us{background:var(--brand-soft)}
.cmp thead th.us{border-radius:var(--r-lg) var(--r-lg) 0 0}
.cmp tbody tr:last-child td.us{border-radius:0 0 var(--r-lg) var(--r-lg)}
.cmp thead th.us .cmp-brand{background:linear-gradient(92deg,var(--brand),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cmp-group th{background:transparent;padding-top:1.4rem;padding-bottom:.4rem;border-bottom:0;
  font-family:Outfit,sans-serif;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.cmp-yes,.cmp-no{display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;border-radius:50%}
.cmp-yes{background:var(--green-soft);color:var(--green)}
.cmp-no{background:var(--red-soft);color:var(--red)}
.cmp-yes .ic,.cmp-no .ic{margin:0;width:1rem;height:1rem;stroke-width:2.5}
.cmp-text{color:var(--muted)}
.cmp-see{color:var(--brand);font-weight:600}
.cmp-price{font-family:Outfit,sans-serif;font-weight:800;font-size:1rem}
.cmp-price.tbd{color:var(--muted);font-weight:700}
.cmp-foot{margin-top:var(--space-4);font-size:.78rem;line-height:1.6;color:var(--dim);max-width:none}
.cmp-foot a{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Wide tables scroll inside their own box; the page never scrolls sideways. */
.tablewrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}

/* ── Promotions ─────────────────────────────────────────────────────────── */
.price-was{color:var(--dim);font-weight:600;font-size:.78em;margin-right:.4em;text-decoration:line-through}
.price.promo{color:var(--green)}
.badge.promo-badge{background:var(--green-strong);color:#fff}
.cmp-price small{display:block;font-family:inherit;font-weight:600;font-size:.72rem;color:var(--green);margin-top:.15rem}
/* The cart drawer is parked off the right edge; nothing should let the page scroll to it. */
html,body{overflow-x:clip}
/* ── Reviews ─────────────────────────────────────────────────────────────
 * Customer reviews on the storefront. Star runs are text (★/☆) rather than
 * icons so they inherit colour and size, and so a screen reader gets the
 * aria-label on the run instead of ten separate glyphs.
 */
.grid-reviews{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.rating-summary{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  margin-bottom:var(--space-5)}
.rating-summary b{font-size:1.9rem;line-height:1}
.review-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.review-head h3{margin:0}
.review .blurb{margin-top:var(--space-3);white-space:pre-wrap}
.stars{color:#F5B301;letter-spacing:.12em;white-space:nowrap}