/* Strong 8K - pages.css: the content pages (plans, downloads, how it works, device guides, resellers, faq, legal, 404,
   error page). Loaded after site.css on those pages. Markup: app/handlers/pages.php (pg_*) and the default section
   flow of render_section() in app/lib/render.php. Shared classes live in site.css. Mobile first; strict CSP. */

/* ---------- page head ---------- */
.page-head::before{content:"";position:absolute;z-index:-1;top:calc(var(--head-h)*-1);bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:radial-gradient(60% 130% at 0% 0%,rgba(91,140,255,.16),transparent 70%),radial-gradient(40% 120% at 100% 0%,rgba(139,92,246,.14),transparent 70%);box-shadow:inset 0 -1px 0 var(--line)}
.page-head--doc>.wrap,.doc--legal{width:min(100% - var(--gut)*2,940px)}
.page-head--art::after{content:"";position:absolute;z-index:-1;top:calc(var(--head-h)*-1);right:0;bottom:1px;width:min(100%,780px);background:linear-gradient(180deg,rgba(9,11,24,.3),rgba(9,11,24,.1) 45%,var(--bg)),url(/assets/images/strong8k-ultrawide-screen-800.webp) 100% 40%/180% auto no-repeat;opacity:.35;-webkit-mask-image:linear-gradient(90deg,transparent,#000 58%);mask-image:linear-gradient(90deg,transparent,#000 58%)}
@media (max-width:599px){.page-head--art::after{display:none}}
@media (min-width:900px){.page-head--art::after{opacity:.5;background-image:linear-gradient(180deg,rgba(9,11,24,.3),rgba(9,11,24,.1) 45%,var(--bg)),url(/assets/images/strong8k-ultrawide-screen-1200.webp)}}
.page-head--art h1,.page-head--art .lead{text-shadow:0 2px 20px rgba(3,6,13,.8)}
.updated{margin-top:10px;color:var(--text-3);font-size:.875rem}

/* ---------- shared pieces ---------- */
.pg-related .related{padding:clamp(38px,5.6vw,68px) 0 clamp(34px,5vw,56px)}
.pg-related:last-child .related{padding-bottom:clamp(48px,7vw,84px)}
.pg-intro{display:grid;gap:1rem;margin-bottom:clamp(24px,3.6vw,40px)}
.pg-cols{display:grid;gap:1rem;margin-top:clamp(22px,3.2vw,36px)}
.tile-grid{display:grid;gap:14px}
.tile-grid .tile h2{font-size:clamp(1.375rem,1.15rem + .8vw,1.75rem)}
.tile__cols{display:grid;gap:1rem}
:root{--measure:34.5rem}
.page-head .lead,.sec-intro{max-width:36rem}
.band .prose>p:not(.big),.pg-cols>p,.tile__cols>p,.tile-grid .tile>p,.duo>.tile>p,.statement__cell>p,.callout>span,.nf__main>p,.qa p,.fact__rest{max-width:var(--measure)}
.callout{max-width:41rem}
.band .faq-grid{margin-top:14px}
.band .sec-head+.faq-grid,.fq .faq-grid{margin-top:0}
.block--picture .split{margin-top:0}
.block .split .prose>h2{margin-top:0}
@media (min-width:760px) and (max-width:959px){.faq-grid{grid-template-columns:1fr 1fr}.faq-grid>.sec-head{margin:0;padding-right:12px;align-self:center}}
@media (min-width:900px){
  .pg-cols{grid-template-columns:1fr 1fr;gap:20px 64px}
  .tile-grid{grid-template-columns:1fr 1fr;gap:16px}
  .tile--wide{grid-column:1/-1}
  .tile__cols--2{grid-template-columns:1fr 1fr;gap:20px 48px}
}
@media (min-width:1080px){.tile__cols--3{grid-template-columns:repeat(3,1fr);gap:20px 40px}}
@media (min-width:940px){.pg-intro{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:72px;align-items:end}}
/* "On this page" */
.toc{padding:18px 20px 12px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass)}
.toc-title{margin-bottom:8px;color:var(--text-3);font:700 .75rem/1 var(--font);letter-spacing:.16em;text-transform:uppercase}
.toc ol{counter-reset:toc}
.toc li{counter-increment:toc}
.toc li+li{border-top:1px solid var(--line)}
.toc a{display:grid;grid-template-columns:2em 1fr;padding:9px 0;color:var(--text-2);font-size:.9375rem;line-height:1.35;text-decoration:none}
.toc a::before{content:counter(toc,decimal-leading-zero);color:var(--gold-2);font-size:.8125rem;font-weight:700;line-height:1.56;font-variant-numeric:tabular-nums}
.toc a:hover{color:#fff}
.toc--row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:clamp(20px,3vw,32px);padding:14px 18px}
.toc--row .toc-title{margin:0}
.toc--row ol{display:flex;flex-wrap:wrap;gap:8px}
.toc--row li+li{border:0}
.toc--row a{display:flex;gap:8px;align-items:baseline;padding:11px 14px;border:1px solid var(--line-2);border-radius:99px;background:rgba(255,255,255,.03);color:var(--text);font-weight:600}
.toc--row a:hover{border-color:var(--gold-line);color:var(--text);background:var(--gold-wash)}
ul.list--no li::before{left:3px;top:.42em;width:13px;height:13px;border:0;transform:none;background:linear-gradient(45deg,transparent 43%,var(--bad) 43% 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,var(--bad) 43% 57%,transparent 57%)}

/* ---------- /plans ---------- */
.pl-stage>.stage{padding-block:clamp(20px,3.1vw,44px) clamp(18px,2.4vw,32px)}
@media (max-width:699px){.pl-stage>.stage>.wrap{width:100%}}
.ledger{padding:4px 20px 8px}
.ledger li{display:grid;gap:2px 20px;padding:15px 0}
.ledger li+li{border-top:1px solid var(--line)}
.ledger__k{color:var(--text);font:700 1.125rem/1.3 var(--display)}
.ledger__v{color:var(--text-2);font-variant-numeric:tabular-nums}
.letter{position:relative;border:1px solid var(--line-2);border-radius:var(--r-lg);background:linear-gradient(180deg,#141B3A,#0C1124);box-shadow:var(--shadow-glow),inset 0 1px 0 rgba(255,255,255,.08)}
.letter__head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px dashed var(--line-2);color:var(--text);font:700 .75rem/1 var(--font);letter-spacing:.16em;text-transform:uppercase}
.letter__head .ico{width:20px;height:20px;color:var(--gold-2)}
.letter__list{padding:4px 20px 8px}
.letter__list li{display:grid;grid-template-columns:24px 1fr;gap:16px;padding:16px 0;color:var(--text)}
.letter__list li+li{border-top:1px solid var(--line)}
.letter__list .ico{color:var(--blue-2);margin-top:1px}
@media (min-width:560px) and (max-width:939px),(min-width:1240px){.ledger li{grid-template-columns:7rem 1fr;align-items:baseline}}
@media (min-width:1240px){.trio--ledger{grid-template-columns:minmax(0,4fr) minmax(0,5.6fr)}}
.examples{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.examples li{display:flex;flex-direction:column;padding:16px 14px 18px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:linear-gradient(160deg,rgba(91,140,255,.16),rgba(255,255,255,.02) 72%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.examples__n{display:flex;gap:5px;margin-bottom:14px;color:var(--blue-2)}
.examples__k{margin-bottom:8px;line-height:1.35}
.examples__v{margin-top:auto;color:var(--text);font:800 clamp(1.5rem,1.05rem + 2vw,2.25rem)/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.lcards{display:grid;gap:12px}
.lcard{padding:22px 20px 24px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:rgba(6,9,20,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.lcard__ico{position:relative;display:grid;place-items:center;width:44px;height:44px;margin-bottom:16px;border-radius:13px;color:var(--blue-2);background:rgba(91,140,255,.12);box-shadow:inset 0 0 0 1px rgba(157,184,255,.3)}
.lcard__ico.is-struck::after{content:"";position:absolute;left:5px;right:5px;top:calc(50% - 1px);height:2px;border-radius:2px;background:var(--bad);box-shadow:0 0 0 2px #0a1830;transform:rotate(-45deg)}
.lcard__k{display:block;margin-bottom:8px;color:var(--text);font:700 1.25rem/1.15 var(--display)}
@media (min-width:600px){.lcards{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.examples{grid-template-columns:repeat(4,1fr);gap:14px}.examples li{padding:22px 22px 24px}}
@media (min-width:1080px){.lcards{grid-template-columns:repeat(4,1fr)}}
.fact-list{counter-reset:fact;border-top:1px solid var(--line-2)}
.fact-list li{counter-increment:fact;position:relative;display:grid;gap:6px;padding:20px 0 20px 52px;border-bottom:1px solid var(--line)}
.fact-list li::before{content:counter(fact,decimal-leading-zero);position:absolute;left:0;top:19px;font:800 1.4rem/1.15 var(--display);color:var(--gold)}
.fact__lead{color:var(--text);font-size:1.0625rem;font-weight:600;line-height:1.45}
.statement{display:grid;border:1px solid var(--line-2);border-radius:var(--r-lg);background:linear-gradient(115deg,rgba(91,140,255,.16),rgba(255,255,255,.02) 62%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.statement__cell{padding:24px 22px 26px}
.statement__cell+.statement__cell{border-top:1px solid var(--line)}
.statement__cell>.ico{width:28px;height:28px;margin-bottom:16px;color:var(--gold-2)}
.statement__cell+.statement__cell>.ico{color:var(--blue-2)}
.statement__cell:first-child p{color:var(--text)}
.fx{display:flex;align-items:center;gap:10px;margin-top:22px;color:var(--blue-2)}
.fx span{padding:9px 12px 8px;border-radius:10px;font:800 .8125rem/1 var(--font);letter-spacing:.1em;color:var(--text);background:rgba(91,140,255,.12);box-shadow:inset 0 0 0 1px rgba(157,184,255,.3)}
.fx .ico{width:18px;height:18px}
@media (min-width:960px){.fact-list li{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:10px 64px;align-items:baseline;padding:24px 0}.fact-list li::before{top:23px}.fact__lead{padding-left:60px}.fact-list .is-single{grid-template-columns:1fr}}
@media (min-width:900px){.statement{grid-template-columns:7fr 5fr}.statement__cell{padding:38px 40px 40px}.statement__cell+.statement__cell{border-top:0;border-left:1px solid var(--line)}}
/* question / answer cards of the skeleton's /faq and /plans layouts (div.qa, all visible) */
.faq-grid{display:grid;gap:12px}
.faq-grid>.sec-head{margin-bottom:14px}
@media (min-width:960px){.faq-grid{grid-template-columns:1fr 1fr;gap:16px}.faq-grid>.sec-head{margin:0;padding-right:40px;align-self:center}.faq-grid .qa:not(details){padding:26px 28px 28px}.faq-grid .qa h3{font-size:1.1875rem}}

/* ---------- /strong8k-resellers/: bundles ---------- */
.bundles{display:grid;gap:12px;margin-top:22px}
.bundle{display:grid;gap:6px;align-content:start;padding:22px 20px 24px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--glass);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.bundle__name{font-size:1.0625rem;color:var(--text-2);font-weight:600}
.bundle__credits{color:var(--text);font-weight:600}
.bundle__n{color:var(--gold);font:800 2.4rem/1 var(--display);letter-spacing:-.04em;margin-right:4px}
.bundle__price{color:var(--text);font:700 1.5rem/1.1 var(--display)}
.bundle__per{color:var(--text-3);font-size:.875rem}
.bundle__go{margin-top:12px}
@media (min-width:640px){.bundles{grid-template-columns:repeat(3,1fr);gap:14px}}
@media (min-width:900px){.bundle{padding:28px 28px 30px}}
.block .contact-form{margin-top:22px}

/* ---------- /privacy, /terms, /refund: long-form reading ---------- */
.doc{display:grid;gap:34px;padding-top:clamp(26px,4vw,52px)}
.doc__body{min-width:0;max-width:35.5rem;font-size:1.0625rem;line-height:1.72}
.doc-sec+.doc-sec{margin-top:clamp(30px,4.2vw,46px);padding-top:clamp(28px,4vw,42px);border-top:1px solid var(--line)}
.doc-sec>*+*{margin-top:1.05rem}
.doc-sec>.idx{margin-bottom:12px}
.doc-sec>.idx+h2{margin-top:0}
.doc-sec h2{font-size:clamp(1.4rem,1.2rem + 1vw,1.85rem);line-height:1.15}
.doc-sec .list{gap:12px}
.doc--legal .doc__aside{display:none}
@media (min-width:640px) and (max-width:939px){.doc__body{max-width:38rem;font-size:1.125rem}}
@media (min-width:940px){.doc{grid-template-columns:minmax(0,35.5rem) minmax(0,1fr);gap:64px;align-items:start}.doc__aside,.doc--legal .doc__aside{display:block;position:sticky;top:96px}.doc--legal .doc__aside{justify-self:end;width:100%;max-width:288px}.doc--art{gap:88px}}

/* ---------- 404 ---------- */
.nf{display:grid;gap:34px;padding-block:clamp(22px,4vw,48px) clamp(48px,7vw,84px)}
.nf__main::before{content:"404";display:block;margin-bottom:18px;font:800 clamp(5rem,22vw,10rem)/.8 var(--display);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(242,193,78,.66);-webkit-user-select:none;user-select:none}
.nf__main>*+*{margin-top:1rem}
.nf__main h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.05rem)}
.nf__links{display:grid;gap:10px;margin-top:22px}
.nf__links a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:8px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(255,255,255,.03);color:var(--text);font-weight:600;text-decoration:none;transition:border-color .2s,background-color .2s}
.nf__links a::after{content:"";flex:none;width:8px;height:8px;border:solid var(--gold-2);border-width:1.8px 1.8px 0 0;transform:rotate(45deg)}
.nf__links a:hover{border-color:var(--gold-line);background:var(--gold-wash);color:var(--text)}
.nf__home{margin-top:22px}
@media (max-width:479px){.nf__home .btn{width:100%}}
@media (min-width:560px){.nf__links{grid-template-columns:1fr 1fr}}
@media (min-width:940px){.nf{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:72px;align-items:center}}

/* ---------- skeleton layouts that may still be routed (setup guide, apps table): compact, readable fallbacks ---------- */
.guide{display:grid;gap:18px;padding-top:clamp(20px,3.2vw,40px)}
.guide__body{display:grid;gap:14px;min-width:0}
.gs{padding:26px 24px 28px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass)}
.gs__head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.gs__head>.ico{box-sizing:content-box;width:24px;height:24px;padding:12px;border-radius:14px;color:var(--gold-2);background:var(--gold-wash)}
.gs h2{font-size:clamp(1.375rem,1.15rem + .9vw,1.75rem)}
.gs__cols,.fmt,.pair,.checks,.dl-list{display:grid;gap:12px}
.fmt li,.pair__cell,.checks li,.dl-list li{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(3,6,13,.34)}
.gsteps{counter-reset:gst;margin-top:14px}
.gsteps li{counter-increment:gst;position:relative;padding:12px 0 12px 44px;border-bottom:1px solid var(--line);color:var(--text)}
.gsteps li::before{content:counter(gst);position:absolute;left:0;top:11px;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--gold-wash);color:var(--gold-2);font:800 .9375rem/1 var(--display)}
@media (min-width:1000px){.guide{grid-template-columns:268px minmax(0,1fr);gap:48px;align-items:start}.guide>.toc{position:sticky;top:96px}}
.dl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg)}
.hash{font-size:.8125rem;word-break:break-all}

/* ---------- plain error page (error_page_html) ---------- */
.err-page{display:grid;align-items:center;min-height:100vh;background:radial-gradient(70% 60% at 0% 0%,rgba(91,140,255,.2),transparent 70%),radial-gradient(50% 50% at 100% 0%,rgba(139,92,246,.16),transparent 70%),var(--bg)}
.err__brand .brand{font-size:1.375rem}
.err__brand .brand-mark{width:42px;height:42px}
.err__card{margin-top:22px;padding:26px 22px 28px;border:1px solid var(--line-2);border-radius:var(--r-xl);background:var(--bg-2);box-shadow:var(--shadow-glow),inset 0 1px 0 rgba(255,255,255,.07)}
.err__card>*+*{margin-top:16px}
.err__card h1{font-size:clamp(1.75rem,1.3rem + 2vw,2.5rem)}
@media (min-width:620px){.err__card{padding:36px 36px 38px}}

@media (forced-colors:active){.gs,.lcard,.examples li,.toc,.err__card,.bundle,.letter{border:1px solid ButtonText}}