/* ===================================================================
   APEX PREMIUM THEME: red on white.
   Loaded after store.css. Tokens first, then components.
   Palette:  Paper #FFFFFF  Mist #F5F5F3  Ink #141416  Graphite #5B5E66
             Hairline #E6E5E1  Apex Red #D3132B (hover #A80F22)
   Type:     Archivo (variable width) for wordmark, headings, prices
             Instrument Sans for everything you read
   =================================================================== */
:root{
  --bg:#ffffff;--bg2:#f5f5f3;--panel:#ffffff;--panel2:#f5f5f3;--line:#e6e5e1;--line2:#d4d3cf;
  --fg:#141416;--muted:#5b5e66;--dim:#878a91;--gold:#d3132b;--gold2:#c8102e;--red-deep:#a80f22;--wa:#25d366;
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;--serif:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--cond:'Instrument Sans',system-ui,sans-serif;
  --r-card:14px;--r-btn:10px;
}
body{background:var(--bg);color:var(--fg);font:400 17px/1.65 var(--body);font-feature-settings:"ss01"}
::selection{background:var(--gold);color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* headings: wide, heavy, tight */
h1,h2,h3{font-family:var(--display);font-weight:800;font-stretch:112%;font-variation-settings:"wdth" 112;letter-spacing:-.015em;line-height:1.06;color:var(--fg)}
h3{font-weight:700;font-stretch:105%;font-variation-settings:"wdth" 105;letter-spacing:-.005em}
.lead{color:var(--muted)}

/* small labels: sentence case, quiet */
.label,.pbrand{font:600 13.5px/1.2 var(--body);letter-spacing:.01em;text-transform:none;color:var(--gold2)}
.pbrand{color:var(--muted)}
.shead .label{display:none}
.shead h2::after{width:44px;height:3px;background:var(--gold);margin-top:18px;border-radius:2px}
.shead p{color:var(--muted)}

/* announcement + header */
.ann{background:var(--gold);color:#fff;font:500 13.5px/1.3 var(--body);letter-spacing:.01em;text-transform:none;padding:9px 12px}
.top{background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line);box-shadow:none}
.top .wrap{height:74px}
.top nav a{font:500 15px/1 var(--body)!important;letter-spacing:0!important;text-transform:none;color:var(--muted);padding:10px 0;border-bottom:2px solid transparent}
.top nav a:hover{color:var(--fg)}
.top nav a.on{color:var(--fg);border-color:var(--gold)}
.cartbtn{border:1px solid var(--line2);border-radius:var(--r-btn);font:600 15px/1 var(--body);letter-spacing:0;text-transform:none;color:var(--fg);background:#fff}
.cartbtn:hover{border-color:var(--fg)}
.cartbtn b,.mbar b{background:var(--gold);color:#fff;font:700 12.5px/1 var(--body)}

/* wordmark (text only) */
.brand{display:inline-flex;align-items:center;gap:12px;font:inherit!important;letter-spacing:0!important;text-transform:none!important;color:var(--fg)}
.brand::before{display:none!important}
.wm{font-family:var(--display);font-weight:900;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:27px;line-height:1;letter-spacing:.01em;color:var(--gold)}
.wm2{font:600 13px/1.15 var(--body);color:var(--fg);padding-left:12px;border-left:1px solid var(--line2)}
@media(max-width:560px){.wm{font-size:23px}.wm2{font-size:12px}}

/* buttons */
.btn{border-radius:var(--r-btn);font:600 15.5px/1.1 var(--body);letter-spacing:0;text-transform:none;padding:15px 24px;border:1.5px solid var(--fg);color:var(--fg);background:transparent;box-shadow:none!important}
.btn:hover{transform:none;background:var(--fg);color:#fff;border-color:var(--fg)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#fff}
.btn.gold:hover{background:var(--red-deep);border-color:var(--red-deep);color:#fff}
.btn.wa{background:#1fbe5c;border-color:#1fbe5c;color:#fff}
.btn.wa:hover{background:#17a24d;border-color:#17a24d;filter:none;color:#fff}
.btn.line{border-color:var(--line2)}
.add{border-radius:8px;font:600 14px/1 var(--body);letter-spacing:0;text-transform:none;background:var(--gold);border:1px solid var(--gold);color:#fff;padding:10px 14px}
.add:hover,.add.done{background:var(--red-deep);border-color:var(--red-deep);color:#fff}
.chip{border-radius:999px;font:500 14px/1 var(--body);letter-spacing:0;text-transform:none;border-color:var(--line2);background:#fff}
.chip:hover{border-color:var(--fg)}
.tag{border-radius:999px;font:600 12.5px/1 var(--body);letter-spacing:0;text-transform:none;color:var(--fg);border-color:var(--line2);background:var(--bg2)}
.ticks{color:var(--muted)}
.ticks li::before{width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* hero: big ink headline, one red rule, nothing else shouting */
.hero{background:var(--bg);padding:76px 0 72px}
.hero::after{display:none}
.hero h1{font-family:var(--display);font-weight:850;font-stretch:118%;font-variation-settings:"wdth" 118;text-transform:none;letter-spacing:-.03em;line-height:.98;font-size:clamp(44px,6.2vw,88px);margin:22px 0 26px;color:var(--fg)}
.hero h1::before{content:"";display:block;width:56px;height:5px;background:var(--gold);border-radius:3px;margin-bottom:28px}
.hero h1 em{display:block;color:var(--muted);font-weight:700;font-stretch:112%;font-variation-settings:"wdth" 112}
.hero .label{color:var(--fg);font-weight:600}
.hfeat{transform:none!important;box-shadow:none;border:1px solid var(--line);border-radius:var(--r-card);overflow:visible;background:#fff}
.hshow{border-radius:var(--r-card) var(--r-card) 0 0}
.hcap{border-top:1px solid var(--line)}
.hcap b{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.01em}
.hbadge{background:var(--fg);color:#fff;font:600 13px/1 var(--body);letter-spacing:0;text-transform:none;border-radius:999px;padding:9px 14px;top:-16px;left:18px}

/* brand marquee + trust strip */
.mq{background:var(--bg2);border-color:var(--line)}
.mqt img{background:#fff;border:1px solid var(--line);border-radius:12px}
.mqt a:hover img{border-color:var(--fg)}
.mqt span{font:500 13px/1 var(--body);letter-spacing:0;text-transform:none;color:var(--muted)}
.trust{background:#fff;border-color:var(--line)}
.trust li{border-color:var(--line)}
.trust b,.trust li b{font-family:var(--display);font-weight:700;font-size:19px;color:var(--fg);letter-spacing:-.01em}

/* sections */
.sec.alt{background:var(--bg2);border-color:var(--line)}

/* cards: one radius, hairline borders, no glow */
.pcard,.ccard,.goal,.stack,.steps li,.whyg>div,.gg>div,.rv1,.trg figure,.togr,.note,.swprob>div,.swf,.swg,.swpc,.pgal{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:none!important}
.pcard::after{display:none}
.pcard:hover,.ccard:hover,.goal:hover,.stack:hover{transform:none;border-color:var(--fg);box-shadow:none}
.pimg{border-bottom:1px solid var(--line);border-radius:var(--r-card) var(--r-card) 0 0}
.pcard:hover .pimg img{transform:scale(1.03)}
.pbody h3{font-size:19px;line-height:1.2}
.pbody h3 a:hover{color:var(--gold2)}
.price{font-family:var(--display);font-weight:800;font-stretch:108%;font-variation-settings:"wdth" 108;letter-spacing:-.01em;color:var(--fg)}
.ctext b{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.01em}
.cimg img{border-radius:10px}
.goal span{font:600 14px/1 var(--body);letter-spacing:0;text-transform:none;color:var(--gold2)}
.stack{border-color:var(--line)}
.simgs img{border-radius:10px;border-color:var(--line)}
.save{color:#13803f;font:600 14px/1 var(--body);letter-spacing:0;text-transform:none}
.steps b{font-family:var(--display);color:var(--gold)}
.whyg b,.gg b,.swprob h3,.swf h3,.swcmp h3,.trf h3{font-family:var(--display);font-weight:700;color:var(--fg);letter-spacing:-.01em}
.swf{border-top:3px solid var(--gold)}
.swprob span{color:var(--gold2);font:600 14px/1.4 var(--body);letter-spacing:0;text-transform:none}
.shot img,.swshot img,.swhf img,.swteaser .shot img{border:1px solid var(--line);border-radius:var(--r-card);box-shadow:none}
.rv1 blockquote{font:500 18px/1.5 var(--body);color:var(--fg)}
.rv1 img,.trg img,.ti img,.ci img{border-radius:10px;border-color:var(--line)}
.trq{background:var(--bg2);border-left-color:var(--gold);border-radius:0 10px 10px 0}
.rv1 .stars span{color:#c9c9c9}.rv1 .stars b{color:var(--muted)}

/* FAQ, tables, guides */
.faq details{border-color:var(--line)}
.faq summary{font:700 19px/1.35 var(--display);letter-spacing:-.01em}
.faq summary::after{color:var(--gold)}
.cmp th,.cmp td{border-color:var(--line)}
.cmp thead th{background:var(--bg2);font:700 16px var(--display);letter-spacing:-.01em}
.gcard{border:1px solid var(--line);border-radius:var(--r-card);background:#fff}
.gcard:hover{border-color:var(--fg);transform:none}
.gcard span{color:var(--muted)}
.crumbs{font:500 14px/1.4 var(--body);letter-spacing:0;text-transform:none;color:var(--dim)}
.crumbs span{color:var(--fg)}
.tl{color:var(--gold2)}
.free{background:#fdf0f2;border-color:#f1b7c0;border-radius:10px}
.xs{border-radius:10px}
.how li::before{border-radius:50%;background:var(--gold);color:#fff;font:700 15px var(--body)}

/* product page */
.pinfo h1{font-size:clamp(30px,3.6vw,46px)}
.pprice .price.big,.price.big{font-size:44px}
.qty{border-radius:var(--r-btn);border-color:var(--line2);overflow:hidden}
.qty input{color:var(--fg)}
.qty button:hover{color:var(--gold2)}
.pdetail{border-color:var(--line)}
.facts th,.facts td{border-color:var(--line)}

/* drawer + mobile bar */
.scrim{background:rgba(20,20,22,.45)}
.drawer{background:#fff;border-left:1px solid var(--line)}
.dh,.df,.ci{border-color:var(--line)}
.dh h2{font-size:24px}
.dh button{border-radius:8px;font:600 14px/1 var(--body);letter-spacing:0;text-transform:none;border-color:var(--line2);background:#fff}
.tot{font-family:var(--display);font-weight:800;letter-spacing:-.01em}
.tot span:last-child{color:var(--fg)}
.ci h4{font:700 16px/1.25 var(--display);letter-spacing:-.005em}
@media(max-width:560px){.mbar{background:rgba(255,255,255,.97)!important;border-top:1px solid var(--line)!important;backdrop-filter:blur(10px)}}

/* footer: the one dark band, so the page ends grounded */
footer{background:#141416;border-top:0;color:#fff}
footer .wm2{color:#fff;border-color:#3a3b40}
footer p,footer .fgrid a{color:#a8aab0}
footer .fgrid a:hover{color:#fff}
footer h3{font:600 14px/1 var(--body);letter-spacing:0;text-transform:none;color:#fff}
.fname{margin-bottom:14px}
.fcopy{border-color:#2a2b30;color:#8a8c92}

/* software page odds and ends */
.swamt b{color:var(--fg)}
.swamt span{font:600 14px/1 var(--body);letter-spacing:0;text-transform:none;color:var(--muted)}
.swpc{border:1.5px solid var(--gold);background:#fff}
.swpc li{color:var(--fg)}
.swcmp th{font:600 13px/1.2 var(--body);letter-spacing:0;text-transform:none;color:var(--muted)}
.swcta{background:var(--bg2)}
@media(prefers-reduced-motion:reduce){.pcard:hover .pimg img{transform:none}}

/* ---- Oct 2026 fixes ---- */
/* carousel: two groups (second is the aria-hidden loop copy) + price on every card */
.mqg{display:flex;gap:18px;flex:none}
.mq:focus-within .mqt{animation-play-state:paused}
.mqt a:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:12px}
.mqt .mqp{font:700 14px/1 var(--body);color:var(--fg);letter-spacing:0}
@media(max-width:820px){.mqg{gap:14px}}
/* product page: WhatsApp is the main action, add to cart is secondary */
.pdp .order-main{width:100%;font-size:17px;padding:17px 18px;margin:4px 0 12px}
.pdp .buy .btn.line{background:#fff;color:var(--fg)}
.stock{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;font-size:14px;color:var(--muted)}
.stock::before{content:"";width:9px;height:9px;border-radius:50%;background:#1fbe5c;flex:none;margin-top:6px}
.stock.out::before{background:var(--gold)}
.stock b{color:var(--fg);font-weight:600}
.revask{border:1px dashed var(--line2);border-radius:var(--r-card);padding:18px 20px;margin-top:40px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.revask p{margin:0;font-weight:600}
/* bundle on product pages */
.tbuy .was{color:var(--muted);font-size:14px}.tbuy .was s{color:var(--muted)}
.tbuy .btn{width:100%}
/* sticky bottom bar on product pages: Order on WhatsApp gets the widest slot */
@media(max-width:560px){
 .pdpbar{grid-template-columns:1.7fr 1fr auto!important}
 .pdpbar .btn{font-size:13px;padding:13px 8px;white-space:nowrap}
}

/* ---- Blog ---- */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin:8px 0 40px}
.bcard{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:18px;color:var(--fg);text-decoration:none;transition:border-color .2s,transform .2s}
.bcard:hover{border-color:var(--fg);transform:translateY(-2px)}
.bimg{margin:-18px -18px 6px;display:block;overflow:hidden;border-radius:var(--r-card) var(--r-card) 0 0;aspect-ratio:16/9;background:var(--bg2)}
.bimg img{width:100%;height:100%;object-fit:cover;display:block}
.bmeta{font-size:13px;color:var(--muted)}
.bcard b{font:800 20px/1.2 var(--display,inherit);font-stretch:100%;letter-spacing:-.01em}
.bdesc{color:var(--muted);font-size:15px;line-height:1.5}
.post{max-width:720px;margin:0 auto 40px}
.phead h1{font-size:clamp(32px,6vw,48px);line-height:1.08;margin:10px 0 14px;text-transform:none}
.phead .lead{font-size:19px;color:var(--muted);margin:0 0 12px}
.byline{font-size:14px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:18px;margin:0 0 24px}
.phero{margin:0 0 28px}.phero img{width:100%;height:auto;border-radius:var(--r-card);display:block}
.pbody{font-size:18px;line-height:1.7;color:var(--fg)}
.pbody>*{margin:0 0 1.1em}
.pbody h2{font-size:clamp(24px,4.4vw,30px);line-height:1.2;margin:1.8em 0 .6em;text-transform:none}
.pbody h3{font-size:21px;line-height:1.3;margin:1.5em 0 .5em;text-transform:none}
.pbody ul,.pbody ol{padding-left:1.3em}.pbody li{margin:.35em 0}
.pbody a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.pbody img{width:100%;height:auto;border-radius:12px;display:block}
.pbody blockquote{border-left:3px solid var(--gold);margin-left:0;padding:4px 0 4px 18px;color:var(--muted);font-style:italic}
.pbody table{width:100%;border-collapse:collapse;font-size:16px;display:block;overflow-x:auto}
.pbody th,.pbody td{border:1px solid var(--line);padding:10px 12px;text-align:left}.pbody th{background:var(--bg2)}
.pbody code{background:var(--bg2);padding:2px 6px;border-radius:6px;font-size:.9em}
.pask{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;background:var(--bg2);border-radius:var(--r-card);padding:18px 20px;margin:32px 0 18px}
.pask p{margin:0}
@media(max-width:560px){.pbody{font-size:17px}.phead .lead{font-size:17px}.pask .btn{width:100%}}
.ptoc{background:var(--bg2);border-radius:var(--r-card);padding:18px 22px;margin:0 0 28px}
.ptoc b{display:block;margin-bottom:8px}
.ptoc ol{margin:0;padding-left:1.2em;display:grid;gap:6px}
.ptoc a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.phead a.label{text-decoration:none}
.pbody h2,.pbody h3{scroll-margin-top:90px}
.chip.on{background:var(--fg);color:#fff;border-color:var(--fg)}