/* ===== PREMIUM GLASS THEME =====
   Yawar, 2026-10-13: the website in a premium violet glass, and the same day (second pass, his
   "make it premium, with a touch of gold throughout, and the cards properly scrollable") deep
   royal violet with GOLD: gold hairlines on every card and the header, a gold-to-violet lit edge,
   gold call-to-action buttons and badges, gold eyebrows, a gold-ringed featured plan, and card rows
   that fade at whichever edge has more to scroll to. LOOKS ONLY — no copy, route, script or data
   changes. The journal, /dos-and-donts/ and /admin/ never load this file: on 2026-10-14 (Yawar)
   they took the same violet and gold as TOKENS in a block of their own — `<style
   id="violet-theme">` last in the journal's <head>, a marked block at the end of the others'
   <style> — because their markup shares none of these class names. /guide/ the same way, the same day.

   Loaded by every page of the teal/gold website — /, /start/, /learn/, /courses/view/, /privacy/,
   /terms/, /verify/, /reset/ — with ONE <link> placed after that page's own styles. Remove that
   link (or empty this file) and the page is exactly what it was: nothing here is a new class the
   markup depends on, and no rule in the pages was edited.

   HOW IT WORKS. The pages already share token NAMES (--bg, --surface, --teal, --gold, --text,
   --muted, --line …); this file re-declares their VALUES, three times as CLAUDE.md and
   test_contrast.js require (:root light; the dark media query guarded by
   :root:not([data-theme="light"]); :root[data-theme="dark"] for the manual switch). Then it
   restyles the shared components.

   RULES IT KEEPS (each pinned by test_contrast.js):
   - Arabic is never touched: no font, size, gradient or transparent fill on any .ar / [lang=ar].
   - backdrop-filter only on what floats over scrolling content (header, menus, the popup and its
     backdrop) — never on a card, where there is nothing behind to blur and it costs every frame.
   - The card look is background LAYERS, not ::before/::after, and the card rule sets no
     overflow — overflow:hidden would clip menus and focus rings inside a card.
   - Per-card colour comes from --card-c ON THE CARD; nothing per-card is resolved in :root.
   - No gradient TEXT anywhere: the contrast sweep cannot measure it, and a reader may not read it. */

:root{
  /* the theme's own names */
  --brand:#5531c8;--brand-2:#7c5cf0;--accent:#c9a24b;--panel:#ffffff;--panel-2:#f1eef8;--ink:#1b1630;
  --glass:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.86));
  --glass-2:rgba(85,49,200,.05);--glass-line:rgba(40,24,90,.10);
  --glass-shadow:0 14px 34px rgba(45,25,110,.10),inset 0 1px 0 #fff;
  --chrome:rgba(246,244,250,.82);--pop:rgba(255,255,255,.95);
  --field:rgba(255,255,255,.9);--field-line:#ddd6ea;
  --btn2:rgba(255,255,255,.85);--btn2-line:#dcd4ea;
  --grad:linear-gradient(135deg,#5b34d6,#4338ca);--grad-glow:0 10px 24px rgba(75,45,200,.28);
  --gold-grad:linear-gradient(135deg,#f7e2a4,#d9ae4f 55%,#b98a2c);--gold-ink-on:#1e1505;
  --gold-glow:0 10px 24px rgba(185,138,44,.30);
  --hair:linear-gradient(90deg,transparent,rgba(201,162,75,.75) 22%,rgba(201,162,75,.75) 78%,transparent);
  --glow-a:rgba(85,49,200,.10);--glow-b:rgba(201,162,75,.12);--glow-c:rgba(67,56,202,.07);
  --mc-a:#ffffff;--mc-b:#f4f1fa;--mc-tint:10%;--mc-sheen:rgba(255,255,255,.7);
  --mc-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 40px -18px rgba(45,25,110,.28),0 2px 6px rgba(45,25,110,.05);
  --mc-lift:0 1px 0 rgba(255,255,255,.9) inset,0 26px 50px -20px rgba(45,25,110,.36),0 0 0 1px rgba(201,162,75,.35);
  /* the site's names, mapped onto them (spec: "map these values onto the site's own names") */
  --bg:#f6f4fa;--surface:#ffffff;--surface-2:#f1eef8;--text:#1b1630;--muted:#5a5470;--line:#e6e0f0;
  --teal:#5531c8;--teal2:#4a28b8;--teal-2:#4a28b8;  /* the pages draw LINKS in this one */
  --gold:#c9a24b;--gold-soft:#f1e4c0;--gold-faint:#faf3e1;
  --gold-ink:#7a5a10;--gold-text:#7a5a10;
  --shadow:0 18px 40px -18px rgba(45,25,110,.28);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand:#b9a4ff;--brand-2:#d2c6ff;--accent:#e3c47c;--panel:#16141f;--panel-2:#1d1a2a;--ink:#f1ecf9;
    --glass:linear-gradient(150deg,rgba(32,28,48,.86),rgba(14,12,22,.9));
    --glass-2:rgba(255,255,255,.045);--glass-line:rgba(255,255,255,.09);
    --glass-shadow:0 18px 44px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
    --chrome:rgba(12,11,19,.76);--pop:rgba(24,21,36,.92);
    --field:rgba(8,7,14,.6);--field-line:rgba(255,255,255,.12);
    --btn2:rgba(255,255,255,.055);--btn2-line:rgba(255,255,255,.14);
    --grad-glow:0 10px 28px rgba(110,80,255,.35);
    --gold-grad:linear-gradient(135deg,#f7e2a4,#d9ae4f 55%,#b98a2c);--gold-ink-on:#1e1505;
    --gold-glow:0 10px 28px rgba(227,196,124,.22);
    --hair:linear-gradient(90deg,transparent,rgba(227,196,124,.55) 22%,rgba(227,196,124,.55) 78%,transparent);
    --glow-a:rgba(124,92,255,.16);--glow-b:rgba(227,196,124,.08);--glow-c:rgba(67,56,202,.12);
    --mc-a:rgba(30,27,45,.92);--mc-b:rgba(14,13,22,.94);--mc-tint:8%;--mc-sheen:rgba(255,255,255,.05);
    --mc-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 22px 50px -20px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.3);
    --mc-lift:0 1px 0 rgba(255,255,255,.07) inset,0 30px 60px -20px rgba(0,0,0,.8),0 0 0 1px rgba(227,196,124,.35);
    --bg:#0c0b13;--surface:#16141f;--surface-2:#1d1a2a;--text:#f1ecf9;--muted:#aaa3c0;--line:#2b2740;
    --teal:#b9a4ff;--teal2:#d2c6ff;--teal-2:#d2c6ff;
    --gold:#e3c47c;--gold-soft:#2e2615;--gold-faint:#1f1a10;
    --gold-ink:#ecd296;--gold-text:#ecd296;
    --shadow:0 22px 50px -20px rgba(0,0,0,.7);
  }
  :root:not([data-theme="light"]) body.home{background:#07050f}
  :root:not([data-theme="light"]) body.home::before{background:radial-gradient(700px 420px at 92% -8%,rgba(227,196,124,.14),transparent 60%),linear-gradient(180deg,#2c1677 0%,#1e0f55 30%,#120a33 60%,#07050f 100%)}
}
:root[data-theme="dark"]{
  --brand:#b9a4ff;--brand-2:#d2c6ff;--accent:#e3c47c;--panel:#16141f;--panel-2:#1d1a2a;--ink:#f1ecf9;
  --glass:linear-gradient(150deg,rgba(32,28,48,.86),rgba(14,12,22,.9));
  --glass-2:rgba(255,255,255,.045);--glass-line:rgba(255,255,255,.09);
  --glass-shadow:0 18px 44px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
  --chrome:rgba(12,11,19,.76);--pop:rgba(24,21,36,.92);
  --field:rgba(8,7,14,.6);--field-line:rgba(255,255,255,.12);
  --btn2:rgba(255,255,255,.055);--btn2-line:rgba(255,255,255,.14);
  --grad-glow:0 10px 28px rgba(110,80,255,.35);
  --gold-grad:linear-gradient(135deg,#f7e2a4,#d9ae4f 55%,#b98a2c);--gold-ink-on:#1e1505;
  --gold-glow:0 10px 28px rgba(227,196,124,.22);
  --hair:linear-gradient(90deg,transparent,rgba(227,196,124,.55) 22%,rgba(227,196,124,.55) 78%,transparent);
  --glow-a:rgba(124,92,255,.16);--glow-b:rgba(227,196,124,.08);--glow-c:rgba(67,56,202,.12);
  --mc-a:rgba(30,27,45,.92);--mc-b:rgba(14,13,22,.94);--mc-tint:8%;--mc-sheen:rgba(255,255,255,.05);
  --mc-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 22px 50px -20px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.3);
  --mc-lift:0 1px 0 rgba(255,255,255,.07) inset,0 30px 60px -20px rgba(0,0,0,.8),0 0 0 1px rgba(227,196,124,.35);
  --bg:#0c0b13;--surface:#16141f;--surface-2:#1d1a2a;--text:#f1ecf9;--muted:#aaa3c0;--line:#2b2740;
  --teal:#b9a4ff;--teal2:#d2c6ff;--teal-2:#d2c6ff;
  --gold:#e3c47c;--gold-soft:#2e2615;--gold-faint:#1f1a10;
  --gold-ink:#ecd296;--gold-text:#ecd296;
  --shadow:0 22px 50px -20px rgba(0,0,0,.7);
}

/* ---- the page: a soft violet light top-left, gold top-right, indigo below; fixed, content
   scrolls over it ---- */
body{background:var(--bg);color:var(--text);text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60rem 36rem at 8% -10%,var(--glow-a),transparent 62%),
    radial-gradient(50rem 32rem at 96% -4%,var(--glow-b),transparent 60%),
    radial-gradient(54rem 40rem at 50% 115%,var(--glow-c),transparent 62%)}
/* THE HOME PAGE IN DARK MODE runs from deep violet at the top into black at the foot, like the
   journal's cover and its loading screen (Yawar, 2026-10-19). The layer is theme-glass.css's fixed
   body::before, so the content scrolls over it; light mode is untouched. */
:root[data-theme="dark"] body.home{background:#07050f}
:root[data-theme="dark"] body.home::before{background:radial-gradient(700px 420px at 92% -8%,rgba(227,196,124,.14),transparent 60%),linear-gradient(180deg,#2c1677 0%,#1e0f55 30%,#120a33 60%,#07050f 100%)}
.hb-aurora{background:radial-gradient(45% 40% at 18% 12%,var(--glow-a),transparent 60%),radial-gradient(45% 40% at 88% 18%,var(--glow-b),transparent 60%)}
.hero-section::before{background:radial-gradient(120% 90% at 50% -10%,var(--glow-b),transparent 55%)}
.prod::before,.course::before,.flag::before{background:radial-gradient(circle,color-mix(in srgb,var(--gold) 12%,transparent) 0%,transparent 70%)}
::selection{background:color-mix(in srgb,var(--gold) 38%,transparent)}

/* headings a little tighter; the eyebrow over each section carries two gold rules */
h1,h2{letter-spacing:-.012em}
.eyebrow{letter-spacing:.22em}
.eyebrow::before,.eyebrow::after{content:"";display:inline-block;width:26px;height:1px;vertical-align:middle;
  background:linear-gradient(90deg,transparent,var(--gold))}
.eyebrow::before{margin-right:12px}
.eyebrow::after{margin-left:12px;transform:scaleX(-1)}
.brand i,.fbrand i{color:var(--gold-ink)}

/* ---- header, nav, menus, popup: frosted glass with a gold hairline ---- */
header.site,header.top{background:var(--chrome);border-bottom:1px solid transparent;
  border-image:var(--hair) 1;
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}
header.site nav a[aria-current]{padding:4px 12px;border-radius:12px;color:var(--brand);
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 18%,transparent),color-mix(in srgb,var(--gold) 10%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 40%,transparent),0 6px 18px color-mix(in srgb,var(--brand) 14%,transparent)}
.mobile-nav,.menu{background:var(--pop);border-color:color-mix(in srgb,var(--gold) 30%,var(--glass-line));
  box-shadow:0 24px 60px rgba(20,10,50,.28),inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%)}
.mobile-nav a:hover,.menu button:hover{background:var(--glass-2);color:var(--brand)}
.mobile-nav a.menu-cta{color:var(--gold-ink)}
/* html: the home page declares these again in a <style> in its body, after this file */
html .sub-popup-overlay{background:rgba(6,5,14,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html .sub-popup{border:1px solid transparent;
  background:var(--glass) padding-box,var(--panel) padding-box,linear-gradient(135deg,var(--gold),color-mix(in srgb,var(--brand) 40%,transparent),var(--gold)) border-box;
  box-shadow:0 30px 80px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06)}

/* ---- cards: glass body, a gold-to-violet lit edge, a soft glow beside it, a gold corner circle,
   a sheen across the top, and a gold hairline border. ALL BACKGROUND LAYERS, no pseudo-element,
   and NO overflow in this rule. ---- */
.card,.step,.prod,.course,.tier,.quote,.rvcard,.feat,.flag,.privacy,.versecard,details,.ayah{
  --mc-c:var(--card-c,var(--brand));
  border-radius:20px;border:1px solid transparent;
  background:
    linear-gradient(180deg,var(--mc-sheen),transparent 34%) padding-box,
    radial-gradient(circle at calc(100% - 10px) calc(100% + 8px),color-mix(in srgb,var(--gold) 16%,transparent) 0 var(--mc-r,64px),transparent calc(var(--mc-r,64px) + .5px)) padding-box,
    linear-gradient(180deg,var(--gold),var(--mc-c) 42%,transparent 92%) 0 0/3px 100% no-repeat padding-box,
    radial-gradient(34px 55% at 0 0,color-mix(in srgb,var(--mc-c) 22%,transparent),transparent) padding-box,
    linear-gradient(150deg,var(--mc-a),color-mix(in srgb,var(--mc-c) var(--mc-tint),var(--mc-b))) padding-box,
    linear-gradient(140deg,color-mix(in srgb,var(--gold) 70%,transparent),color-mix(in srgb,var(--mc-c) 18%,var(--glass-line)) 38%,color-mix(in srgb,var(--mc-c) 14%,var(--glass-line)) 64%,color-mix(in srgb,var(--gold) 50%,transparent)) border-box;
  box-shadow:var(--mc-shadow)}
/* small cards and list items: a smaller corner circle */
.step,.quote,.rvcard,details,.ayah{--mc-r:30px}
/* a few sections in their own colour, for variety: the method indigo, the courses orchid */
.step,.quote{--card-c:#4f5bd5}
.course,.privacy{--card-c:#9a4fd8}
/* the lift, only where there is a real hover (a phone would keep it after a tap) */
@media (hover:hover){
  .step,.prod,.course,.tier,.quote,.rvcard,.feat{transition:transform .25s ease,box-shadow .25s ease}
  .step:hover,.prod:hover,.course:hover,.tier:hover,.quote:hover,.rvcard:hover{transform:translateY(-4px);box-shadow:var(--mc-lift)}
}
@media (hover:none){.step:hover,.prod:hover,.course:hover,.quote:hover{transform:none}}
details[open]{box-shadow:var(--mc-lift)}
/* the featured plan: a gold ring and a warmer glow */
.tier.hot{--card-c:var(--gold);box-shadow:var(--mc-shadow),0 0 0 1.5px var(--gold),0 24px 60px -24px color-mix(in srgb,var(--gold) 60%,transparent)}
/* stat tiles: the price figures */
.tier .amt,.prod .amt,.feat .fcta .amt{color:var(--brand);letter-spacing:-.04em}
.tier .per{text-transform:uppercase;letter-spacing:.05em;font-size:11.5px;color:var(--muted)}
.tier li:before,.course li:before{color:var(--gold-ink)}
/* a product's status badge sits at its own width, not stretched across the card as a bar */
.prod>.badge{align-self:flex-start}
/* the cover art keeps its own colours, framed in gold */
.pcover .frame{border-color:rgba(247,226,164,.55)}
.pcover,.pshot{border-color:color-mix(in srgb,var(--gold) 40%,var(--line))}

/* ---- the rows of cards that scroll sideways: snap card by card, fade at whichever edge has more
   to show (the page's own script marks .hwrap scrollable / at-start / at-end), a thin gold
   scrollbar, and glass arrows ringed in gold ---- */
.steps,.prodgrid,.learngrid,.quotes,.price,.rvlist{scroll-behavior:smooth;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--gold) 60%,transparent) transparent}
.steps>*,.prodgrid>*,.learngrid>*,.quotes>*,.price>*,.rvlist>*{scroll-snap-align:start;scroll-snap-stop:normal}
.steps::-webkit-scrollbar-thumb,.prodgrid::-webkit-scrollbar-thumb,.learngrid::-webkit-scrollbar-thumb,
.quotes::-webkit-scrollbar-thumb,.price::-webkit-scrollbar-thumb,.rvlist::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg,#d9ae4f,#b98a2c);border-radius:99px}
.hwrap.scrollable>:is(.steps,.prodgrid,.learngrid,.quotes,.price){
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l,0px),#000 calc(100% - var(--fade-r,0px)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l,0px),#000 calc(100% - var(--fade-r,0px)),transparent 100%)}
.hwrap.scrollable:not(.at-start){--fade-l:36px}
.hwrap.scrollable:not(.at-end){--fade-r:48px}
.harrow{width:46px;height:46px;font-size:22px;color:var(--brand);border:1px solid transparent;
  background:var(--pop) padding-box,linear-gradient(135deg,var(--gold),color-mix(in srgb,var(--brand) 30%,transparent),var(--gold)) border-box;
  box-shadow:0 12px 28px rgba(20,10,50,.22)}
.harrow:hover{color:var(--gold-ink);box-shadow:0 14px 32px rgba(20,10,50,.28),0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent)}

/* ---- buttons and fields ---- */
/* Filled: the plain .btn of /start/, /learn/ and the course pages, and the home page's primary,
   in deep violet (white on it, 7.2–7.9:1); the home page's GOLD buttons in real gold with dark ink
   (5.8:1 at the darkest stop). The :root:is(…) prefix only raises specificity to beat the home
   page's own dark-mode text colour on these. */
:root:is([data-theme],:not([data-theme])) :is(.btn-primary,.btn:not(.ghost):not(.btn-ghost):not(.linkish):not(.btn-gold)),
:root:is([data-theme],:not([data-theme])) a.btn:not(.btn-gold),
:root:is([data-theme],:not([data-theme])) .card button:not(.linkish):not([class]){
  background:var(--grad);color:#fff;border-color:transparent;
  box-shadow:var(--grad-glow),inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(247,226,164,.18)}
:root:is([data-theme],:not([data-theme])) .btn-gold{background:var(--gold-grad);color:var(--gold-ink-on);border-color:transparent;
  box-shadow:var(--gold-glow),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-primary:hover,.btn-gold:hover,.btn:not(.ghost):not(.btn-ghost):not(:disabled):hover{filter:brightness(1.07) saturate(1.05);transform:translateY(-1px)}
.btn-primary:active,.btn-gold:active,.btn:not(.ghost):not(.btn-ghost):active{transform:translateY(1px)}
/* secondary */
.btn-ghost,.btn.ghost,.theme-toggle{background:var(--btn2);border:1px solid var(--btn2-line);color:var(--brand)}
.btn-ghost:hover,.btn.ghost:hover,.theme-toggle:hover{border-color:color-mix(in srgb,var(--gold) 70%,var(--btn2-line));box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 16%,transparent)}
/* fields */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=submit]):not([type=button]),select,textarea{
  background:var(--field);border:1px solid var(--field-line);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,select:focus,textarea:focus{
  outline:none;border-color:color-mix(in srgb,var(--brand) 70%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
/* pills, tags, chips, and the unselected tabs */
.chips span,.feats span,.feat .fwhat li,.chip,.ctabs button,.tabs button,.badge.soon{
  background:var(--glass-2);border:1px solid color-mix(in srgb,var(--gold) 28%,var(--glass-line));border-radius:999px}
.ctabs button[aria-selected="true"],.tabs button[aria-selected="true"]{border-color:transparent}
:root:is([data-theme],:not([data-theme])) :is(.ctabs,.tabs) button[aria-selected="true"]{background:var(--grad);color:#fff;
  box-shadow:var(--grad-glow),inset 0 0 0 1px rgba(247,226,164,.35)}

/* The subscribe band carries a paragraph of body text, so it is a deep violet field (white reads
   11.2:1 and 9.0:1 on its two ends) with a gold glow in one corner and a gold hairline. */
:root:is([data-theme],:not([data-theme])) .subscribe{background:linear-gradient(135deg,#3d1f9c,#4a2bb8);color:#fff;
  box-shadow:0 30px 70px -30px rgba(40,20,120,.6),inset 0 0 0 1px rgba(247,226,164,.35)}
:root:is([data-theme],:not([data-theme])) .subscribe h2{color:#fff}
.subscribe::after{content:"";position:absolute;right:-12%;top:-40%;width:60%;height:120%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(247,226,164,.22),transparent)}
:root:is([data-theme],:not([data-theme])) :is(.badge.live,.step .n){background:var(--gold-grad);color:var(--gold-ink-on)}

/* ---- gloss on colour swatches: badges, dots, the progress bar ---- */
.badge.live,.step .n,.versedot,.trust-row .dot,.bar>span{position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.2),0 0 12px color-mix(in srgb,var(--c,var(--gold)) 45%,transparent)}
.badge.live::after,.step .n::after,.bar>span::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.08) 48%,rgba(0,0,0,.14))}
.versedot::after,.trust-row .dot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.75),rgba(255,255,255,0) 58%)}
.versedot.active,.trust-row .dot{background:var(--gold);--c:var(--gold)}
.bar{background:var(--surface-2)}
.bar>span{background:linear-gradient(90deg,#7c5cf0,#5b34d6 55%,#d9ae4f)}

/* ---- checkboxes (the lesson ticks on /learn/, the waitlist) ---- */
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:none;margin:0;vertical-align:middle;cursor:pointer;
  border-radius:6px;border:1.5px solid color-mix(in srgb,var(--gold) 55%,var(--btn2-line));background:var(--field)}
input[type=checkbox]:checked{border-color:transparent;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/78% no-repeat,
    linear-gradient(180deg,#6d47e6,#4338ca);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 3px 10px rgba(75,45,200,.4),0 0 0 1px rgba(201,162,75,.5)}
/* visible focus, always: a gold ring */
input[type=checkbox]:focus-visible,.btn:focus-visible,.btn-primary:focus-visible,.btn-gold:focus-visible,.btn-ghost:focus-visible,.harrow:focus-visible,
.ctabs button:focus-visible,.tabs button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* footer: the gold hairline again */
footer{border-top:1px solid transparent;border-image:var(--hair) 1}

/* ---- motion: off for anyone who asked for less ---- */
@media (prefers-reduced-motion: reduce){
  .card,.step,.prod,.course,.tier,.quote,.rvcard,.feat,.flag,details,.btn,.btn-primary,.btn-gold,.btn-ghost{transition:none!important}
  .steps,.prodgrid,.learngrid,.quotes,.price,.rvlist{scroll-behavior:auto}
  .step:hover,.prod:hover,.course:hover,.tier:hover,.quote:hover,.btn:hover,.btn:active,.btn-primary:hover,.btn-gold:hover{transform:none!important}
}
/* ===== END PREMIUM GLASS THEME ===== */