/*
Theme Name: iptsi
Theme URI: https://iptsi.com/
Author: iptsi
Author URI: https://iptsi.com/
Description: The iptsi site as a WordPress theme: twenty original HTML5 games, the licensed catalogue, the articles and the legal pages. The stylesheet below is the same one the static site ships, so the design is identical.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: iptsi
Tags: dark, custom-colors, full-width-template, translation-ready
*/

/* There is deliberately no "Tested up to" line. That field is a claim that the
   theme was run on that WordPress release, and it has not been run on any: there
   is no MySQL on the machine it was written on. WORDPRESS.md §9 lists what a real
   install still has to confirm. Add the line yourself once you have activated it. */

/* The rest of this file is generated from index.html by build-theme.mjs.
   Edit the <style> block in index.html and re-run the build, not this file. */

/* ============================================================
   iptsi — design tokens (Kinetic Enterprise Pulse)
   ============================================================ */
:root{
  --surface:#0b1326;            --surface-dim:#0b1326;          --surface-bright:#31394d;
  --surface-lowest:#060e20;     --surface-low:#131b2e;          --surface-c:#171f33;
  --surface-high:#222a3d;       --surface-highest:#2d3449;
  --on-surface:#dae2fd;         --on-surface-variant:#c7c4d7;
  --outline:#908fa0;            --outline-variant:#464554;
  --primary:#c0c1ff;            --on-primary:#1000a9;
  --primary-container:#8083ff;  --on-primary-container:#0d0096;
  --secondary:#4cd7f6;          --on-secondary:#003640;         --secondary-container:#03b5d3;
  --tertiary:#4edea3;           --on-tertiary:#003824;          --tertiary-container:#00885d;
  --error:#ffb4ab;
  --brand-1:#8b8cff;            --brand-2:#4c9bff;              --brand-3:#22d3ee;

  --r-xs:.25rem; --r-sm:.5rem; --r-md:.75rem; --r-lg:1rem; --r-xl:1.5rem; --r-full:9999px;
  --sp-xs:.25rem; --sp-sm:.5rem; --sp-md:1rem; --sp-lg:1.5rem; --sp-xl:2.5rem;
  --margin-sm:1rem; --margin:2rem; --margin-lg:4rem;
  --maxw:80rem;

  --font-display:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --shadow-lg:0 18px 40px -18px rgba(0,0,0,.7);
  --glow-primary:0 0 22px rgba(128,131,255,.32);
  --hdr-h:4.5rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--surface);color:var(--on-surface);
  font-family:var(--font-body);font-size:.9375rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
select{font:inherit}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--r-xs)}
::selection{background:var(--primary-container);color:var(--on-primary-container)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ============================================================
   Typography scale
   ============================================================ */
.disp{font-family:var(--font-display);font-weight:800;font-size:clamp(2.1rem,5.2vw,3.5rem);line-height:1.1;letter-spacing:-.03em}
.h-lg{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.18;letter-spacing:-.022em}
.h-md{font-family:var(--font-display);font-weight:600;font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.28;letter-spacing:-.012em}
.h-sm{font-family:var(--font-display);font-weight:600;font-size:1.25rem;line-height:1.4}
.title{font-family:var(--font-display);font-weight:600;font-size:1rem;line-height:1.5}
.body-lg{font-size:1.125rem;line-height:1.6}
.body-sm{font-size:.8125rem;line-height:1.6}
.lbl-lg{font-family:var(--font-display);font-weight:600;font-size:.875rem;line-height:1.4}
.lbl-md{font-family:var(--font-display);font-weight:600;font-size:.75rem;line-height:1.35;letter-spacing:.02em}
.lbl-sm{font-family:var(--font-display);font-weight:700;font-size:.625rem;line-height:1.4;letter-spacing:.09em;text-transform:uppercase}
.muted{color:var(--on-surface-variant)}
.tnum{font-variant-numeric:tabular-nums}
.grad-text{background:linear-gradient(92deg,var(--brand-1),var(--brand-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-text-2{background:linear-gradient(92deg,var(--secondary),var(--tertiary));-webkit-background-clip:text;background-clip:text;color:transparent}
.balance{text-wrap:balance}
.measure{max-width:42rem}

/* ============================================================
   Layout
   ============================================================ */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--margin-sm)}
@media(min-width:640px){.container{padding-inline:var(--margin)}}
@media(min-width:1024px){.container{padding-inline:var(--margin-lg)}}
.section{padding-block:clamp(2.75rem,6vw,5.5rem)}
.tint{background:var(--surface-lowest)}
.tint-2{background:var(--surface-low)}
.grid{display:grid;gap:var(--sp-lg)}
.row{display:flex;align-items:center;gap:var(--sp-md)}
.row-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-md)}
.between{justify-content:space-between}
.center{justify-content:center}
.stack{display:flex;flex-direction:column;gap:var(--sp-lg)}
.stack-sm{display:flex;flex-direction:column;gap:var(--sp-sm)}
.stack-md{display:flex;flex-direction:column;gap:var(--sp-md)}
.grow{flex:1 1 auto;min-width:0}
.txt-c{text-align:center}
.mx-auto{margin-inline:auto}
.cols-2{grid-template-columns:1fr}
.cols-3{grid-template-columns:1fr}
.cols-4{grid-template-columns:repeat(2,1fr)}
.split{grid-template-columns:1fr}
@media(min-width:700px){.cols-3{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){
  .cols-2{grid-template-columns:repeat(2,1fr)}
  .cols-3{grid-template-columns:repeat(3,1fr)}
  .cols-4{grid-template-columns:repeat(4,1fr)}
  .split{grid-template-columns:repeat(2,1fr);gap:var(--margin-lg);align-items:center}
}
.split-flip>*:first-child{order:0}
@media(min-width:1000px){.split-flip>*:first-child{order:2}}
.hr{height:1px;background:var(--outline-variant);opacity:.5;border:0;margin:0}

/* ============================================================
   Icons
   ============================================================ */
.icon{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.icon-sm{width:1em;height:1em}
.icon-lg{width:1.75em;height:1.75em}
.icon-box{width:3rem;height:3rem;border-radius:var(--r-md);display:grid;place-items:center;flex:none}
.icon-box .icon{width:1.5rem;height:1.5rem}
.ib-primary{background:rgba(128,131,255,.16);color:var(--primary)}
.ib-secondary{background:rgba(76,215,246,.16);color:var(--secondary)}
.ib-tertiary{background:rgba(78,222,163,.16);color:var(--tertiary)}

/* ============================================================
   Buttons, chips, cards
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:var(--r-full);padding:.75rem 1.5rem;border:1px solid transparent;
  font-family:var(--font-display);font-weight:600;font-size:.875rem;line-height:1.2;
  cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s;
  text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:.5rem 1rem;font-size:.8125rem}
.btn-lg{padding:.9rem 2rem;font-size:.9375rem}
.btn-primary{background:var(--primary-container);color:var(--on-primary-container);box-shadow:var(--glow-primary)}
.btn-primary:hover{background:var(--primary);color:var(--on-primary);box-shadow:0 0 28px rgba(128,131,255,.5)}
.btn-soft{background:var(--surface-c);color:var(--on-surface)}
.btn-soft:hover{background:var(--surface-high)}
.btn-outline{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:var(--on-surface)}
.btn-outline:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.08)}
.btn-light{background:var(--surface);color:var(--on-surface);box-shadow:var(--shadow-lg)}
.btn-light:hover{background:var(--surface-high)}
.btn-glass{background:rgba(45,52,73,.6);color:var(--on-surface);backdrop-filter:blur(10px)}
.btn-glass:hover{background:var(--surface-highest)}
.btn-text{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:600;font-size:.875rem;color:var(--primary)}
.btn-text:hover{color:#e1e0ff}
.btn-text .icon{transition:transform .2s}
.btn-text:hover .icon{transform:translateX(4px)}
.btn-block{width:100%}
@media(min-width:640px){.btn-block-sm{width:auto}}

.chip{display:inline-flex;align-items:center;gap:.375rem;border-radius:var(--r-full);padding:.3rem .75rem;background:var(--surface-c);font-family:var(--font-display);font-weight:700;font-size:.625rem;letter-spacing:.09em;text-transform:uppercase}
.chip-secondary{color:var(--secondary)}
.chip-primary{color:var(--primary)}
.chip-tertiary{color:var(--tertiary)}
.chip-glass{background:rgba(6,14,32,.75);backdrop-filter:blur(8px);color:var(--on-surface);text-transform:none;letter-spacing:.02em;font-weight:600;font-size:.6875rem}
.dot{width:.5rem;height:.5rem;border-radius:50%;flex:none;display:inline-block}
.dot-secondary{background:var(--secondary)}
.dot-tertiary{background:var(--tertiary)}
.dot-primary{background:var(--primary)}
.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.card{background:var(--surface-low);border:1px solid rgba(70,69,84,.55);border-radius:var(--r-xl);padding:var(--sp-lg);transition:background-color .28s,border-color .28s,box-shadow .28s,transform .28s}
.card-pad-lg{padding:var(--sp-xl)}
.card-hover:hover{background:var(--surface-c);border-color:rgba(128,131,255,.32);box-shadow:0 0 34px -8px rgba(99,102,241,.35)}
.card-flat{background:var(--surface-c);border-color:rgba(70,69,84,.4)}
.panel{background:var(--surface-c);border-radius:var(--r-lg);padding:var(--sp-md)}
.eyebrow{display:inline-flex;align-items:center;gap:.4rem;border-radius:var(--r-full);padding:.25rem .8rem;background:var(--surface-high);font-family:var(--font-display);font-weight:700;font-size:.625rem;letter-spacing:.11em;text-transform:uppercase}
/* keep pill labels hugging their text when they are direct children of a flex stack */
.stack-sm>.eyebrow,.stack-md>.eyebrow{align-self:flex-start}
.txt-c>.eyebrow{align-self:center}
.chip-row>.chip,.chip-row>.eyebrow{align-self:center}
.bullets{display:flex;flex-direction:column;gap:var(--sp-md)}
.bullets li{display:flex;gap:.625rem;align-items:flex-start;color:var(--on-surface-variant)}
.bullets .icon{margin-top:.15rem}

/* ============================================================
   Header / nav
   ============================================================ */
.hdr{position:fixed;inset:0 0 auto 0;z-index:60;background:rgba(11,19,38,.82);backdrop-filter:blur(18px);border-bottom:1px solid rgba(70,69,84,.4)}
.hdr-in{height:var(--hdr-h);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-md)}
.brand{display:flex;align-items:center;gap:.5rem;flex:none}
.brand-logo{height:2.5rem;width:auto}
.brand-logo text{font-family:var(--font-display);letter-spacing:-.03em}
@media(min-width:1024px){.brand-logo{height:2.75rem}}
.nav{display:none;align-items:center;gap:.25rem}
@media(min-width:1024px){.nav{display:flex}}
.nav a{font-family:var(--font-display);font-weight:600;font-size:.875rem;color:var(--on-surface-variant);padding:.4rem .9rem;border-radius:var(--r-full);transition:color .2s,background-color .2s}
.nav a:hover{color:var(--on-surface)}
.nav a[aria-current="page"]{background:var(--primary-container);color:var(--on-primary-container)}
/* the nav and the header actions only just fit at 1024px, so the nav tightens
   before the layout would have to wrap */
@media(min-width:1024px) and (max-width:1279px){
  .nav{gap:.1rem}
  .nav a,.nav .dd>button{padding:.4rem .55rem;font-size:.8125rem}
  .hdr-in{gap:var(--sp-sm)}
}
.hdr-act{display:flex;align-items:center;gap:.5rem}
.icon-btn{width:2.25rem;height:2.25rem;border-radius:50%;display:grid;place-items:center;background:var(--surface-c);color:var(--on-surface);transition:background-color .2s}
.icon-btn:hover{background:var(--surface-high)}
.avatar{width:2.25rem;height:2.25rem;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--on-primary);flex:none;transition:box-shadow .2s}
.avatar:hover{box-shadow:0 0 18px rgba(192,193,255,.55)}
.burger{display:grid}
@media(min-width:1024px){.burger{display:none}}
.hide-sm{display:none}
@media(min-width:640px){.hide-sm{display:inline-flex}}
@media(min-width:1024px){.hide-lg{display:none!important}}
/* dropdown */
.dd{position:relative}
.dd-menu{position:absolute;right:0;top:calc(100% + .6rem);min-width:14rem;background:var(--surface-c);border:1px solid rgba(128,131,255,.22);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:.4rem;display:none;z-index:70}
.dd-menu[data-open="true"]{display:block}
.dd-menu a,.dd-menu button{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;padding:.55rem .7rem;border-radius:var(--r-sm);font-family:var(--font-display);font-weight:600;font-size:.8125rem;color:var(--on-surface-variant)}
.dd-menu a:hover,.dd-menu button:hover{background:var(--surface-high);color:var(--on-surface)}
.dd-sep{height:1px;background:var(--outline-variant);opacity:.5;margin:.4rem .2rem}
/* a dropdown used inside the main nav: styled like a nav link, opening to the left */
.nav .dd>button{display:flex;align-items:center;gap:.25rem;font-family:var(--font-display);
  font-weight:600;font-size:.875rem;color:var(--on-surface-variant);padding:.4rem .9rem;
  border-radius:var(--r-full);background:none;border:0;cursor:pointer;transition:color .2s,background-color .2s}
.nav .dd>button:hover{color:var(--on-surface)}
.nav .dd>button[aria-expanded="true"],.nav .dd>button[aria-current="page"]{background:var(--primary-container);color:var(--on-primary-container)}
.dd-left .dd-menu{left:0;right:auto}

/* mobile menu */
.mmenu{display:none;border-top:1px solid rgba(70,69,84,.4)}
.mmenu[data-open="true"]{display:block}
.mmenu ul{padding:var(--sp-sm) 0 var(--sp-md);display:flex;flex-direction:column;gap:.15rem}
.mmenu a{display:flex;align-items:center;justify-content:space-between;padding:.7rem .5rem;border-radius:var(--r-sm);font-family:var(--font-display);font-weight:600;font-size:.9375rem;color:var(--on-surface-variant)}
.mmenu a:hover,.mmenu a[aria-current="page"]{background:var(--surface-c);color:var(--on-surface)}
.mmenu .m-cta{margin-top:.6rem}
main{padding-top:var(--hdr-h);min-height:60vh;display:block}
/* no fill-mode: if the animation never runs the page is still fully visible */
#view{animation:fadeUp .45s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative;overflow:hidden}
/* Glows use radial gradients rather than blur filters: same softness, far cheaper to composite. */
.glow{position:absolute;border-radius:50%;pointer-events:none}
.glow-a{width:34rem;height:34rem;top:-7rem;left:10%;background:radial-gradient(circle,rgba(128,131,255,.20),rgba(128,131,255,0) 70%)}
.glow-b{width:32rem;height:32rem;top:26%;right:-6rem;background:radial-gradient(circle,rgba(76,215,246,.17),rgba(76,215,246,0) 70%)}
.hero-grid{position:relative;display:grid;gap:var(--margin);grid-template-columns:1fr;align-items:center}
@media(min-width:1000px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:var(--margin-lg)}}
.hero-art{position:relative;width:100%;max-width:36rem;margin-inline:auto}
.hero-art::before{content:"";position:absolute;inset:-6% -4%;border-radius:50%;background:radial-gradient(circle at 50% 55%,rgba(6,14,32,.7),rgba(6,14,32,0) 68%);z-index:0}
.hero-art>img{position:relative;z-index:1;width:100%;height:auto}
.hero-logo{position:absolute;left:51.8%;top:45.4%;width:58%;height:auto;transform:translate(-50%,-50%);animation:float 6s ease-in-out infinite;z-index:2}
@keyframes float{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 8px))}}
.float-badge{position:absolute;display:flex;align-items:center;gap:.4rem;background:var(--surface-highest);border-radius:var(--r-full);padding:.4rem .85rem;box-shadow:var(--shadow-lg);font-family:var(--font-display);font-weight:600;font-size:.75rem;white-space:nowrap}
.fb-1{left:-2%;bottom:14%}
@media(max-width:640px){.float-badge{font-size:.6875rem;padding:.3rem .6rem}}
@media(prefers-reduced-motion:reduce){.hero-logo{animation:none}#view{animation:none}}

/* ============================================================
   Media frames
   ============================================================ */
.frame{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--surface-low);border:1px solid rgba(70,69,84,.55)}
.frame img{width:100%;height:auto}
.frame-tint::after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(128,131,255,.14),transparent 45%,rgba(76,215,246,.12));pointer-events:none}
.overlay-stat{position:absolute;display:flex;align-items:center;gap:.6rem;background:rgba(45,52,73,.95);backdrop-filter:blur(10px);border-radius:var(--r-lg);padding:.6rem .85rem;box-shadow:var(--shadow-lg);z-index:2}
.os-bl{left:var(--sp-lg);bottom:var(--sp-lg)}
.os-tr{right:var(--sp-lg);top:var(--sp-lg)}
.art-tile{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--surface-c);aspect-ratio:2.05;display:block}
.art-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.art-tile:hover img{transform:scale(1.05)}
.art-tile .chip-glass{position:absolute;top:.6rem;right:.6rem}
.card-hover:hover .art-tile img{transform:scale(1.05)}

/* game cards */
.gcard{display:flex;flex-direction:column;background:var(--surface-c);border:1px solid rgba(70,69,84,.5);border-radius:var(--r-xl);overflow:hidden;transition:box-shadow .3s,transform .3s,border-color .3s}
.gcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:rgba(128,131,255,.35)}
.gcard .meta{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:var(--sp-md)}
.gcard .play{color:var(--outline-variant);transition:color .2s}
.gcard:hover .play{color:var(--primary)}

/* playable games */
.pcard{display:flex;flex-direction:column;background:var(--surface-c);border:1px solid rgba(70,69,84,.5);border-radius:var(--r-xl);overflow:hidden;color:inherit;text-decoration:none;transition:box-shadow .3s,transform .3s,border-color .3s}
.pcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:rgba(128,131,255,.35)}
.pcard-body{display:flex;flex-direction:column;flex:1;padding:var(--sp-lg)}
.pcard .body-sm{flex:1}
.pcard-foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:var(--sp-md);padding-top:var(--sp-md);border-top:1px solid rgba(70,69,84,.45)}
.play-go{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-display);font-weight:700;font-size:.8125rem;color:var(--primary);white-space:nowrap}
.player{border:1px solid rgba(128,131,255,.28);border-radius:var(--r-xl);overflow:hidden;background:#050a18;box-shadow:var(--shadow-lg);margin-bottom:var(--sp-xl)}
.player[hidden]{display:none}
.player-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem .9rem;background:var(--surface-low);border-bottom:1px solid rgba(70,69,84,.5)}
.player-bar .name{font-family:var(--font-display);font-weight:700;font-size:.9375rem}
.player-bar .acts{display:flex;align-items:center;gap:.5rem}
.player iframe{display:block;width:100%;height:min(74vh,620px);border:0;background:#060e20}
button.btn{font:inherit;cursor:pointer;width:auto}

/* advertising: a clearly labelled slot, never above the fold and never next to
   something interactive, plus the consent banner that sets what may be stored */
.linklike{font:inherit;font-size:.8125rem;color:var(--on-surface-variant);background:none;border:0;cursor:pointer;padding:0;text-align:left;text-decoration:underline;text-decoration-color:rgba(192,193,255,.45)}
.linklike:hover{color:var(--primary)}
  .byline{display:flex;align-items:center;gap:.6rem;margin-top:.9rem;font-size:.9rem;color:var(--muted)}
  .byline .avatar{width:2rem;height:2rem;border-radius:999px;display:grid;place-items:center;
    background:var(--surface-2,rgba(255,255,255,.07));font-weight:700;color:var(--ink)}
  .f-entity{display:flex;flex-wrap:wrap;gap:.25rem .9rem;margin-top:.5rem;font-size:.8rem;color:var(--muted)}
  .f-entity strong{color:var(--ink)}
.ad-slot{margin-inline:auto;max-width:60rem;border:1px dashed rgba(70,69,84,.75);border-radius:var(--r-lg);padding:.75rem;background:rgba(19,27,46,.35)}
.ad-slot .ad-label{display:block;font-size:.625rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--outline);margin-bottom:.5rem;text-align:center}
.ad-slot .ad-body{display:flex;align-items:center;justify-content:center;min-height:100px}
.ad-slot .ad-body ins{width:100%}
.consent{position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(6,14,32,.97);border-top:1px solid rgba(128,131,255,.35);backdrop-filter:blur(8px);padding:var(--sp-md);box-shadow:0 -12px 40px rgba(0,0,0,.5)}
.consent[hidden]{display:none}
.consent-in{max-width:var(--maxw);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-md);flex-wrap:wrap}
.consent p{margin:0;font-size:.8125rem;line-height:1.6;color:var(--on-surface-variant);max-width:44rem}
.consent-act{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
@media(max-width:760px){.consent-in{flex-direction:column;align-items:stretch}.consent-act{justify-content:center}}

/* stats */
.stat{display:flex;flex-direction:column;gap:.3rem;background:var(--surface-low);border:1px solid rgba(70,69,84,.45);border-radius:var(--r-lg);padding:var(--sp-lg)}
.stat b{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,3.6vw,2.5rem);line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* testimonials */
.quote{display:flex;flex-direction:column;justify-content:space-between;background:var(--surface-low);border:1px solid rgba(70,69,84,.5);border-radius:var(--r-xl);padding:var(--sp-lg)}
.quote footer{margin-top:var(--sp-md);padding-top:var(--sp-md);border-top:1px solid var(--surface-c)}
.quote .qmark{color:rgba(192,193,255,.4)}
.quote:nth-child(3n+2) .qmark{color:rgba(76,215,246,.4)}
.quote:nth-child(3n) .qmark{color:rgba(78,222,163,.4)}
.quote .org{color:var(--secondary)}

/* CTA band */
.band{position:relative;border-radius:var(--r-xl);overflow:hidden;padding:clamp(2rem,5vw,4rem);text-align:center;background:linear-gradient(100deg,var(--primary-container),var(--secondary-container),var(--tertiary-container))}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,14,32,.34),rgba(6,14,32,.18))}
.band>*{position:relative;z-index:1}
.band h2{color:#0a0f2b}
.band p{color:#0e1533;font-weight:500}

/* accordion */
.acc{border:1px solid rgba(70,69,84,.55);border-radius:var(--r-lg);background:var(--surface-low);overflow:hidden}
.acc+.acc{margin-top:.6rem}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.25rem;cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:1rem;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary .icon{color:var(--primary);transition:transform .25s}
.acc[open] summary .icon{transform:rotate(45deg)}
.acc .acc-body{padding:0 1.25rem 1.25rem;color:var(--on-surface-variant)}

/* forms */
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{font-family:var(--font-display);font-weight:600;font-size:.75rem;letter-spacing:.02em;color:var(--on-surface-variant)}
.field input,.field select,.field textarea{background:var(--surface-lowest);border:1px solid var(--outline-variant);border-radius:var(--r-sm);padding:.7rem .85rem;color:var(--on-surface);font-family:var(--font-body);font-size:.9375rem;transition:border-color .2s,box-shadow .2s;width:100%}
.field textarea{min-height:8rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary-container);box-shadow:0 0 0 3px rgba(99,102,241,.2)}
.field .err{color:var(--error);font-size:.75rem;display:none}
.codeblock{background:var(--surface-lowest);border:1px solid var(--outline-variant);border-radius:var(--r-sm);
  padding:1rem 1.1rem;overflow-x:auto;white-space:pre;color:var(--on-surface);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8125rem;line-height:1.65}
.field[data-invalid="true"] input,.field[data-invalid="true"] textarea,.field[data-invalid="true"] select{border-color:var(--error)}
.field[data-invalid="true"] .err{display:block}
.form-note{font-size:.8125rem;color:var(--on-surface-variant)}
.ok-panel{display:none;background:var(--surface-low);border:1px solid rgba(78,222,163,.4);border-radius:var(--r-xl);padding:var(--sp-xl);text-align:center}
.ok-panel[data-open="true"]{display:block}

/* callout */
.callout{display:flex;gap:.75rem;align-items:flex-start;background:var(--surface-c);border-left:2px solid var(--tertiary);border-radius:var(--r-sm);padding:.85rem 1rem;font-size:.8125rem;color:var(--on-surface-variant)}
.callout .icon{color:var(--tertiary);margin-top:.15rem}

/* mock device (DCB sheet) */
.mock{background:var(--surface-low);border:1px solid rgba(70,69,84,.6);border-radius:var(--r-xl);padding:var(--sp-lg);display:flex;flex-direction:column;gap:var(--sp-md)}
.mock-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.8125rem;color:var(--on-surface-variant)}
.mock-row b{color:var(--on-surface);font-family:var(--font-display);font-weight:600}
.mock-bar{display:flex;align-items:center;justify-content:space-between;background:var(--surface-highest);border-radius:var(--r-full);padding:.5rem .85rem}
.toggle{width:2.75rem;height:1.5rem;border-radius:var(--r-full);background:var(--tertiary);position:relative;flex:none}
.toggle::after{content:"";position:absolute;top:3px;right:3px;width:1.125rem;height:1.125rem;border-radius:50%;background:#f8fafc}

/* prose (legal) */
.prose h2{font-family:var(--font-display);font-weight:600;font-size:1.25rem;margin:2rem 0 .6rem;color:var(--on-surface)}
.prose h3{font-family:var(--font-display);font-weight:600;font-size:1rem;margin:1.4rem 0 .4rem}
.prose p,.prose li{color:var(--on-surface-variant);margin-bottom:.7rem;font-size:.9375rem;line-height:1.7}
.prose ul{list-style:disc;padding-left:1.25rem;margin-bottom:.9rem}
.prose li{margin-bottom:.35rem}
.prose a{color:var(--primary);text-decoration:underline}

/* footer */
footer.site{background:var(--surface-lowest);border-top:1px solid rgba(70,69,84,.45);padding-block:var(--margin-lg) var(--sp-lg)}
.f-grid{display:grid;gap:var(--margin);grid-template-columns:1fr}
@media(min-width:700px){.f-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.f-grid{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr}}
.f-col h3{font-family:var(--font-display);font-weight:700;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-surface);margin-bottom:.85rem}
.f-col a{display:block;font-size:.8125rem;color:var(--on-surface-variant);padding:.22rem 0;transition:color .2s}
.f-col a:hover{color:var(--on-surface)}
.f-bottom{display:flex;flex-wrap:wrap;gap:var(--sp-md);align-items:center;justify-content:space-between;padding-top:var(--sp-lg);margin-top:var(--sp-lg);border-top:1px solid rgba(70,69,84,.45);color:var(--outline);font-size:.75rem}
.status{display:flex;align-items:center;gap:.4rem}

/* toast + modal */
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,150%);z-index:90;background:var(--surface-high);border:1px solid rgba(128,131,255,.3);border-radius:var(--r-full);padding:.7rem 1.2rem;font-family:var(--font-display);font-weight:600;font-size:.8125rem;box-shadow:var(--shadow-lg);transition:transform .35s cubic-bezier(.2,.9,.3,1.2);max-width:min(92vw,32rem);text-align:center}
.toast[data-open="true"]{transform:translate(-50%,0)}
.modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:var(--sp-md)}
.modal[data-open="true"]{display:flex}
.modal-bg{position:absolute;inset:0;background:rgba(6,14,32,.72);backdrop-filter:blur(6px)}
.modal-card{position:relative;z-index:1;background:var(--surface-c);border:1px solid rgba(128,131,255,.22);border-radius:var(--r-xl);max-width:34rem;width:100%;padding:var(--sp-xl);box-shadow:var(--shadow-lg);max-height:88vh;overflow:auto}

/* reveal: visible by default; only hidden once JS confirms it will animate them */
.reveal{opacity:1;transform:none}
html.js-reveal .reveal{opacity:0;transform:translateY(14px)}
html.js-reveal .reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
@media(prefers-reduced-motion:reduce){html.js-reveal .reveal{opacity:1;transform:none}}

.sr{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:1rem;top:-4rem;z-index:100;background:var(--primary-container);color:var(--on-primary-container);padding:.6rem 1rem;border-radius:var(--r-full);font-family:var(--font-display);font-weight:600;transition:top .2s}
.skip:focus{top:1rem}