/* GeekLair storefront stylesheet. FINAL brand (approved by Grant, Oct 16 2026):
   /workspace/business/geeklair/brand/README.md. WCAG ratios measured on Lair Navy unless noted. */
@font-face{font-family:"Press Start 2P";src:url(fonts/PressStart2P-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/Inter-latin-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/Inter-Italic-latin-var.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}

:root{
  --gl-navy:#141726;        /* Lair Navy: base background */
  --gl-rock:#23283D;       /* Cave Slate: cards (Parchment on it 12.7:1) */
  --gl-parchment:#F2EFE6;   /* Parchment: all text (15.5:1) */
  --gl-green:#4CE06A;       /* Pixel Green: CTAs, links, eyebrows (10.3:1; navy text ON green 10.3:1, never white) */
  --gl-purple:#8A5CF0;      /* Portal Purple: borders/glow/UI outlines only (4.1:1). Never small text */
  --gl-purple-deep:#4A2F8A; /* deep purple: secondary button + Paid tag bg (Parchment on it 8.9:1) */
  --gl-amber:#FFB547;       /* Torch Amber: testing badge + disclaimers (10.1:1; 8.3:1 on slate) */
  --gl-rock:#454B6B;        /* Rock Grey: decorative borders */
  --gl-moss:#11702F;        /* Moss: green text on light backgrounds (5.4:1 on Parchment); no light bgs yet */
  --gl-ink:#0B0D16;         /* Ink: outlines, button shadows */
  --gl-font-display:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; /* headlines, buttons, prices, nav: Inter 700-800 */
  --gl-font-pixel:"Press Start 2P","Silkscreen",ui-monospace,monospace; /* small accents ONLY: eyebrows, tags/badges, flags. Never headlines, body or buttons */
  --gl-font-body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --gl-radius:4px;
  --gl-max:72rem;
  --gl-glow:0 0 0 1px var(--gl-purple),0 0 24px rgba(138,92,240,.35);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--gl-navy);color:var(--gl-parchment);font:1.0625rem/1.6 var(--gl-font-body)}
img,svg{max-width:100%;display:block}
a{color:var(--gl-green);text-underline-offset:.18em}
a:hover{color:var(--gl-parchment)}
:focus-visible{outline:3px solid var(--gl-green);outline-offset:3px;border-radius:2px}
h1,h2,h3{color:var(--gl-parchment);line-height:1.25;margin:0 0 .6em}
h1{font-family:var(--gl-font-display);font-weight:800;font-size:clamp(2rem,5.4vw,3.25rem);line-height:1.08;letter-spacing:-.025em;max-width:18ch;text-wrap:balance}
h2{font-family:var(--gl-font-display);font-weight:800;font-size:clamp(1.45rem,3vw,2rem);line-height:1.18;letter-spacing:-.02em;text-wrap:balance}
h3{font-family:var(--gl-font-display);font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em}
code,kbd,.mono{font-family:var(--gl-font-body);font-size:.92em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:.5rem;top:-3rem;background:var(--gl-green);color:var(--gl-navy);padding:.5rem .8rem;font-weight:700;z-index:10}
.skip:focus{top:.5rem}
.wrap{max-width:var(--gl-max);margin:0 auto;padding:0 1.1rem}

.ph-note{display:block;border:1px dashed var(--gl-purple);background:rgba(74,47,138,.18);color:var(--gl-parchment);font:500 .82rem/1.5 var(--gl-font-body);padding:.55rem .75rem;border-radius:var(--gl-radius);margin:.75rem 0}
.ph-note strong{color:var(--gl-parchment)}

/* header */
.site-head{border-bottom:1px solid var(--gl-rock);background:var(--gl-navy)}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;padding-top:.8rem;padding-bottom:.8rem}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;margin:0;padding:0;align-items:center}
.nav a{color:var(--gl-parchment);text-decoration:none;font-family:var(--gl-font-display);font-weight:600;padding:.35rem 0;display:inline-block}
.nav a:hover,.nav a[aria-current=page]{color:var(--gl-parchment);text-decoration:underline;text-decoration-color:var(--gl-green);text-decoration-thickness:2px}
.nav .btn{padding:.45rem .8rem;text-decoration:none;font-weight:800}

/* buttons */
.btn{display:inline-block;font:700 1rem/1.2 var(--gl-font-display);letter-spacing:-.005em;text-decoration:none;border-radius:var(--gl-radius);padding:.8rem 1.15rem;border:2px solid transparent;cursor:pointer;text-align:center}
.btn-primary{background:var(--gl-green);color:var(--gl-navy);box-shadow:0 4px 0 var(--gl-ink)}
.btn-primary:hover{background:var(--gl-parchment);color:var(--gl-navy)}
.btn-secondary{background:var(--gl-purple-deep);color:var(--gl-parchment);border-color:var(--gl-purple)}
.btn-secondary:hover{border-color:var(--gl-green);color:var(--gl-parchment)}
.btn-ghost{background:transparent;color:var(--gl-parchment);border-color:var(--gl-rock)}
.btn-ghost:hover{border-color:var(--gl-green);color:var(--gl-parchment)}
.nav .btn-primary,.nav .btn-primary:hover{color:var(--gl-navy);text-decoration:none}

/* sections */
section{padding:3rem 0}
.section-alt{background:var(--gl-slate);border-top:1px solid var(--gl-rock);border-bottom:1px solid var(--gl-rock)}
.eyebrow{font:400 .7rem/1.7 var(--gl-font-pixel);text-transform:uppercase;letter-spacing:.02em;color:var(--gl-green);margin:0 0 .7rem}
.lede{font-size:1.15rem;color:var(--gl-parchment);max-width:40rem}
.grid{display:grid;gap:1rem}
@media (min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}

/* hero */
.hero{padding:2.5rem 0 3rem;background:radial-gradient(ellipse at 75% 40%,rgba(74,47,138,.35),transparent 60%),var(--gl-navy)}
.hero .wrap{display:grid;gap:2rem;align-items:center}
@media (min-width:880px){.hero .wrap{grid-template-columns:1.25fr 1fr}}
.hero-art{position:relative;max-width:340px;margin:0 auto;width:100%}
.hero-art figcaption{font:500 .75rem/1.4 var(--gl-font-body);color:var(--gl-parchment);text-align:center;margin-top:.5rem}
.trust-row{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;list-style:none;padding:0;margin:1.2rem 0 0;font:500 .9rem/1.4 var(--gl-font-body);color:var(--gl-parchment)}
.trust-row li::before{content:"\25A0 ";color:var(--gl-green)}

/* email capture */
.capture{background:var(--gl-slate);border:2px solid var(--gl-rock);border-radius:var(--gl-radius);padding:1.1rem;margin-top:1.4rem;max-width:34rem}
.capture.big{max-width:none;box-shadow:var(--gl-glow)}
.capture h2,.capture h3{margin-bottom:.4rem}
.field-row{display:flex;flex-direction:column;gap:.6rem;margin-top:.6rem}
@media (min-width:520px){.field-row{flex-direction:row}.field-row input{flex:1}}
label{font-weight:600;color:var(--gl-parchment)}
input[type=email],input[type=text],input[type=search]{font:inherit;color:var(--gl-parchment);background:var(--gl-navy);border:2px solid var(--gl-purple);border-radius:var(--gl-radius);padding:.7rem .8rem;min-height:2.9rem;width:100%}
.fineprint{font-size:.85rem;color:var(--gl-parchment);margin:.6rem 0 0}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* steps */
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;background:var(--gl-navy);border:1px solid var(--gl-rock);border-radius:var(--gl-radius);padding:1.1rem 1.1rem 1.1rem 4rem;position:relative}
.steps li::before{content:counter(s);position:absolute;left:1rem;top:1rem;width:2.2rem;height:2.2rem;display:grid;place-items:center;background:var(--gl-green);color:var(--gl-navy);font:800 1rem var(--gl-font-body)}
.steps h3{margin-bottom:.3rem}

/* cards */
.card{background:var(--gl-slate);border:1px solid var(--gl-rock);border-radius:var(--gl-radius);padding:1.1rem;display:flex;flex-direction:column;gap:.6rem;position:relative}
.card:hover,.card:focus-within{border-color:var(--gl-purple);box-shadow:var(--gl-glow)}
.card h2,.card h3{margin:0;font:700 1.2rem/1.3 var(--gl-font-body)}
.card h2 a,.card h3 a{color:var(--gl-parchment);text-decoration:none}
.card h2 a::after,.card h3 a::after{content:"";position:absolute;inset:0}
.card h2 a:hover,.card h3 a:hover{text-decoration:underline;text-decoration-color:var(--gl-green)}
.card p{margin:0;font-size:.98rem}
.card .meta{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap;font:500 .85rem var(--gl-font-body);color:var(--gl-parchment)}
.card .price{color:var(--gl-parchment);font-weight:700}
.icon{width:48px;height:48px;image-rendering:pixelated} /* 8px grid x6 */
.badges{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;margin:0;padding:0}
.badge{font:600 .74rem/1 var(--gl-font-body);padding:.35rem .5rem;border-radius:3px;border:1px solid var(--gl-rock);color:var(--gl-parchment);background:var(--gl-navy)}
.tag{font:400 .6rem/1 var(--gl-font-pixel);text-transform:uppercase;letter-spacing:.02em;padding:.4rem .55rem;border-radius:3px;align-self:flex-start}
.tag-free{background:var(--gl-green);color:var(--gl-navy)}
.tag-paid{background:var(--gl-purple-deep);color:var(--gl-parchment);border:1px solid var(--gl-purple)}
.tag-tested{background:transparent;color:var(--gl-green);border:1px solid var(--gl-green)}
.tags{display:flex;gap:.4rem;flex-wrap:wrap}

/* pricing */
.tier{background:var(--gl-navy);border:2px solid var(--gl-rock);border-radius:var(--gl-radius);padding:1.4rem;display:flex;flex-direction:column;gap:.7rem}
.tier.featured{border-color:var(--gl-green);position:relative}
.tier .flag{position:absolute;top:-.85rem;left:1.2rem;background:var(--gl-green);color:var(--gl-navy);font:400 .6rem/1 var(--gl-font-pixel);padding:.4rem .55rem;text-transform:uppercase;letter-spacing:.02em}
.tier .amount{font:800 2rem/1.15 var(--gl-font-display);letter-spacing:-.025em;color:var(--gl-parchment)}
.tier .amount small{font:500 .9rem var(--gl-font-body);color:var(--gl-parchment)}
.tier ul{padding-left:1.1rem;margin:0}
.tier li{margin:.25rem 0}
.tier .btn{margin-top:auto}

/* safety blurb */
.safety{display:grid;gap:1.2rem;align-items:start}
@media (min-width:880px){.safety{grid-template-columns:1fr 1.4fr}}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.checks li{padding-left:2rem;position:relative}
.checks li::before{content:"";position:absolute;left:0;top:.35em;width:1rem;height:1rem;background:var(--gl-green);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}

/* catalog */
.catalog-layout{display:grid;gap:1.5rem}
@media (min-width:960px){.catalog-layout{grid-template-columns:15rem 1fr}}
.filters{background:var(--gl-slate);border:1px solid var(--gl-rock);border-radius:var(--gl-radius);padding:1rem;align-self:start}
.filters fieldset{border:0;padding:0;margin:0 0 1rem}
.filters legend{font:600 .8rem var(--gl-font-body);text-transform:uppercase;letter-spacing:.1em;color:var(--gl-green);margin-bottom:.4rem}
.opt{display:flex;align-items:center;gap:.5rem;padding:.3rem 0;font-weight:500;color:var(--gl-parchment)}
.opt input{width:1.15rem;height:1.15rem;accent-color:var(--gl-green)}
.results-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;font:500 .9rem var(--gl-font-body);color:var(--gl-parchment)}
/* CSS-only price filter (no JS) using :has(). Browsers without :has just show everything. */
.catalog-layout:has(#f-free:checked) .card[data-price=paid],
.catalog-layout:has(#f-paid:checked) .card[data-price=free]{display:none}

/* template page */
.crumbs{font:500 .85rem var(--gl-font-body);color:var(--gl-parchment);padding:1rem 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0}
.crumbs li+li::before{content:"/ ";color:var(--gl-rock)}
.crumbs a{color:var(--gl-parchment)}
.tpl-head{display:grid;gap:1.5rem;padding:1.5rem 0 2.5rem}
@media (min-width:960px){.tpl-head{grid-template-columns:1.4fr 1fr}}
.buybox{background:var(--gl-slate);border:2px solid var(--gl-green);border-radius:var(--gl-radius);padding:1.2rem;display:flex;flex-direction:column;gap:.8rem;align-self:start}
.buybox .opt-row{display:flex;justify-content:space-between;gap:.5rem;align-items:baseline;border-bottom:1px dashed var(--gl-rock);padding-bottom:.6rem}
.buybox .opt-row b{color:var(--gl-parchment);font-size:1.15rem}
.video{aspect-ratio:16/9;background:repeating-linear-gradient(0deg,rgba(242,239,230,.03) 0 2px,transparent 2px 4px),var(--gl-slate);border:2px dashed var(--gl-purple);border-radius:var(--gl-radius);display:grid;place-items:center;text-align:center;padding:1rem}
.video .play{width:64px;height:64px;margin:0 auto .6rem}
.platform-table{width:100%;border-collapse:collapse;font-size:.95rem}
.platform-table th,.platform-table td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid var(--gl-rock);vertical-align:top}
.platform-table th{color:var(--gl-parchment);font-weight:700}
.platform-table thead th{font:600 .78rem var(--gl-font-body);text-transform:uppercase;letter-spacing:.08em;color:var(--gl-green)}
.table-scroll{overflow-x:auto}
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.checklist li{display:flex;gap:.75rem;align-items:flex-start;background:var(--gl-navy);border:1px solid var(--gl-rock);border-radius:var(--gl-radius);padding:.75rem .9rem}
.checklist .box{flex:0 0 auto;width:1.25rem;height:1.25rem;border:2px solid var(--gl-green);margin-top:.2rem}
.checklist .t{font:600 .78rem var(--gl-font-body);color:var(--gl-parchment);margin-left:auto;white-space:nowrap}
.variant{border:2px dashed var(--gl-green);border-radius:var(--gl-radius);padding:1.2rem;background:rgba(76,224,106,.06)}

/* faq */
.faq details{background:var(--gl-slate);border:1px solid var(--gl-rock);border-radius:var(--gl-radius);margin:0 0 .6rem}
.faq summary{cursor:pointer;padding:1rem 1.1rem;font-weight:700;color:var(--gl-parchment);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:800 1.2rem/1 var(--gl-font-body);color:var(--gl-green)}
.faq details[open] summary::after{content:"\2212"}
.faq details[open]{border-color:var(--gl-purple)}
.faq .a{padding:0 1.1rem 1rem}
.faq .a ul{padding-left:1.2rem}
.faq-group{margin-bottom:2rem}
.keyflow{display:grid;gap:.5rem;list-style:none;padding:0;margin:1rem 0;counter-reset:k}
@media (min-width:760px){.keyflow{grid-template-columns:repeat(3,1fr)}}
.keyflow li{border:1px solid var(--gl-rock);border-radius:var(--gl-radius);padding:.8rem;background:var(--gl-navy);font-size:.95rem}
.keyflow b{display:block;color:var(--gl-parchment);font-family:var(--gl-font-body);font-size:.85rem;margin-bottom:.25rem}

/* footer */
.site-foot{border-top:1px solid var(--gl-rock);padding:2rem 0;font-size:.92rem;color:var(--gl-parchment)}
.site-foot .wrap{display:grid;gap:1rem}
@media (min-width:760px){.site-foot .wrap{grid-template-columns:2fr 1fr 1fr}}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin:.3rem 0}
.site-foot a{color:var(--gl-parchment)}
.site-foot h2{font:600 .8rem var(--gl-font-body);text-transform:uppercase;letter-spacing:.1em;color:var(--gl-green)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media (forced-colors:active){.btn,.tag,.badge{border:1px solid ButtonText}}

/* --- revision 2 additions --- */
.badge-soon{color:var(--gl-parchment);border-style:dashed;background:transparent;font-style:italic}
.tag-soon{background:transparent;color:var(--gl-parchment);border:1px dashed var(--gl-parchment)}
.opt-soon{color:var(--gl-parchment)}
.opt-soon input{opacity:.5}
.row-soon th,.row-soon td{color:var(--gl-parchment)}
.ph-tag{font:600 .75rem var(--gl-font-body);color:var(--gl-parchment);border:1px dashed var(--gl-purple);padding:.1rem .35rem;border-radius:3px;white-space:nowrap}
.soon-note{margin-top:1.2rem;font-size:.95rem}
.callout{border-left:4px solid var(--gl-green);background:var(--gl-slate);padding:.8rem 1rem;color:var(--gl-parchment);border-radius:0 var(--gl-radius) var(--gl-radius) 0}
.buybox .capture{margin:0;max-width:none;border:0;padding:0;background:transparent}
.upsell{border-top:1px dashed var(--gl-rock);padding-top:1rem;display:flex;flex-direction:column;gap:.6rem}
a.video{color:var(--gl-parchment);text-decoration:none}
a.video:hover{border-color:var(--gl-green)}
a.video:hover .v-title{text-decoration:underline;text-decoration-color:var(--gl-green)}
.v-title{display:block;color:var(--gl-parchment);font-weight:700}
.tag{white-space:nowrap}

/* --- revision 3 additions --- */
.tag-testing{background:transparent;color:var(--gl-amber);border:1px dashed var(--gl-amber)} /* Torch Amber 10.1:1 on navy */
.fin-note{margin:0;font-size:.88rem;color:var(--gl-parchment);border:1px solid var(--gl-amber);border-radius:3px;padding:.35rem .55rem;background:rgba(255,181,71,.08)}
.ondemand{margin:0;font-size:.82rem;color:var(--gl-parchment)}
.pro-list{font-size:.92rem;gap:.35rem}
/* --- revision 4 --- */
.callout-soft{border-left-color:var(--gl-parchment);color:var(--gl-parchment)}
.coming-box{border:1px dashed var(--gl-parchment);border-radius:var(--gl-radius);padding:1rem;background:var(--gl-navy)}
.buybox .fin-note{margin:0}
.checks + .fin-note{margin-top:.8rem}

/* --- final brand (rev 5) --- */
.pixel{image-rendering:crisp-edges;image-rendering:pixelated}
.brand img{display:block;width:186px;height:40px} /* wordmark native grid 186x40 -> 1x */
.hero-art img{width:256px;height:256px;margin:0 auto} /* icon A 32px grid x8 */
@media (min-width:880px){.hero-art img{width:320px;height:320px}} /* x10 */
.btn-pixel{font:800 1.05rem/1.3 var(--gl-font-display);letter-spacing:-.01em;padding:.85rem 1.2rem} /* Inter 800, pixel look comes from the button shape, not the font */
.site-head,.site-foot{background:var(--gl-navy)}
.btn{box-shadow:0 4px 0 var(--gl-ink)}
.btn-ghost{border-color:var(--gl-rock)}
/* legal pages (privacy, terms) */
.legal h2{font-size:1.25rem;margin:2rem 0 .5rem}
.legal ul{padding-left:1.2rem}
.legal li{margin:.25rem 0}

.field-label{display:block;font-size:.9rem;margin:.2rem 0 0}