/* =========================================================
   UnlockTool.org — SaaS Light Theme (UnlockTool grey + orange)
   Single stylesheet, no frameworks, no external requests.
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Light grey UI, matched to the UnlockTool software window */
  --bg:#e9e7e2;
  --bg-2:#f4f3f0;
  --surface:#ffffff;
  --surface-2:#f6f5f2;
  --line:#d3cfc7;
  --line-strong:#bdb8ae;

  --text:#23262d;
  --muted:#5c626e;
  --dim:#5f6572;

  /* UnlockTool orange / gold accent */
  --brand:#e8830c;
  --brand-2:#f5a623;
  --accent:#a85400;
  --gold:#f5c518;
  --green:#2f9e44;

  --grad:linear-gradient(135deg,#e8830c 0%,#f5a623 55%,#f5c518 120%);
  --grad-soft:linear-gradient(135deg,rgba(232,131,12,.14),rgba(245,197,24,.10));
  --grad-text:linear-gradient(135deg,#b85800 0%,#d97706 60%,#c2410c 120%);

  /* Warm cream surfaces (hover rows, notices, FAQ, chips). These used to be
     hardcoded hex in a dozen rules, which made a dark theme impossible
     without touching every one of them. Named here, flipped once below. */
  --warm:#fdf6ec;
  --warm-2:#fdf2e2;
  --warm-3:#fffdf9;
  --warm-4:#fff8e8;
  --warm-line:#eec489;
  --warm-ink:#a35a00;
  --on-brand:#26170a;      /* text that sits ON the orange gradient */

  /* Dark toolbar, like the software's title/menu strip */
  --chrome:#3f4450;
  --chrome-2:#4b5160;

  --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px;
  --shadow:0 18px 44px rgba(35,38,45,.14);
  --shadow-sm:0 6px 18px rgba(35,38,45,.10);
  --ring:0 0 0 1px var(--line);

  --wrap:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.2;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(2rem,1.2rem + 3.2vw,3.4rem)}
h2{font-size:clamp(1.6rem,1.1rem + 1.9vw,2.4rem)}
h3{font-size:1.2rem}
p{margin:0 0 1rem}
ul,ol{margin:0 0 1rem;padding-left:1.2rem}
li{margin:.3rem 0}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
::selection{background:rgba(245,166,35,.35)}

/* Ambient background glow */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60rem 40rem at 12% -8%,rgba(232,131,12,.10),transparent 60%),
    radial-gradient(50rem 36rem at 92% 4%,rgba(245,197,24,.12),transparent 60%),
    radial-gradient(46rem 34rem at 50% 104%,rgba(63,68,80,.06),transparent 62%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(35,38,45,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(35,38,45,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 55% at 50% 12%,#000 0%,transparent 100%);
}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.section{padding:72px 0}
.section--tight{padding:48px 0}
.section--flush{padding-top:0}
.grid{display:grid;gap:22px}
.center{text-align:center}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:13px 24px;border-radius:13px;border:1px solid transparent;
  font-weight:700;font-size:.95rem;letter-spacing:.01em;cursor:pointer;
  background:var(--btn-bg);color:var(--text);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background-color:#e8830c;background-image:var(--grad);color:var(--on-brand)}
.btn-ghost{border-color:var(--line-strong);background:var(--surface);color:var(--text)}
.btn-ghost:hover{border-color:var(--brand);background:var(--surface-2)}
.btn-dark{background:var(--chrome);color:#fff;box-shadow:var(--shadow-sm)}
.btn-dark:hover{background:var(--chrome-2)}
.btn-lg{padding:16px 32px;font-size:1.02rem}
.btn-block{width:100%}

/* ---------- Chips / badges ---------- */
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:5px 12px;border-radius:999px;font-size:.74rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line-strong);background:var(--surface-2);color:var(--muted);
}
.chip--new{color:#1668a8;border-color:#9ec9e8;background:#e7f2fb}
.chip--renewal{color:var(--warm-ink);border-color:var(--warm-line);background:var(--warm-2)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:7px 16px;border-radius:999px;margin-bottom:1rem;
  font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--warm-ink);border:1px solid var(--warm-line);background:var(--warm-2);
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--brand)}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(63,68,80,.96);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.site-header.is-stuck{border-bottom-color:rgba(0,0,0,.25);background:rgba(63,68,80,.99);box-shadow:0 4px 18px rgba(35,38,45,.18)}
.hdr{display:flex;align-items:center;gap:18px;height:70px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;color:#fff}
.brand img{height:36px;width:auto;display:block}

.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav > a:not(.btn){
  position:relative;padding:9px 14px;border-radius:999px;
  font-size:.92rem;font-weight:600;color:#d6d9e0;white-space:nowrap;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.nav > a:not(.btn):hover{color:#fff;background:rgba(255,255,255,.12)}
.nav > a[aria-current="page"]{color:#fff}
.nav > a[aria-current="page"]::after{
  content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:18px;height:2px;border-radius:2px;background:var(--grad);
}
.hdr-cta{margin-left:10px;flex:0 0 auto}
.nav-cta-mobile{display:none}
.nav-toggle{
  display:none;margin-left:auto;width:44px;height:44px;border-radius:12px;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.10);color:#fff;
  align-items:center;justify-content:center;cursor:pointer;
}
.nav-toggle span{display:block;width:18px;height:2px;background:currentColor;position:relative;border-radius:2px;transition:.25s var(--ease)}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:2px;transition:.25s var(--ease)}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:1000px){
  .nav-toggle{display:inline-flex}
  .hdr-cta{display:none}
  .nav{
    position:absolute;left:12px;right:12px;top:66px;margin:0;
    flex-direction:column;align-items:stretch;gap:4px;padding:12px;
    background:var(--chrome);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);
    box-shadow:var(--shadow);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:.25s var(--ease);
  }
  .nav.is-open{opacity:1;visibility:visible;transform:translateY(0)}
  .nav > a:not(.btn){padding:12px 14px;border-radius:12px;font-size:1rem}
  .nav > a[aria-current="page"]::after{display:none}
  .nav > a[aria-current="page"]{background:rgba(255,255,255,.14)}
  .nav-cta-mobile{display:inline-flex;margin-top:8px;justify-content:center}
}
@media (max-width:1140px) and (min-width:1001px){
  .nav > a:not(.btn),.nav-drop-btn{padding:9px 11px;font-size:.88rem}
  .hdr{gap:12px}
  .hdr-cta{padding:11px 20px;font-size:.9rem}
}


/* ---------- Pricing dropdown ---------- */
.nav-drop{position:relative}
.nav-drop-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 14px;border:0;border-radius:999px;cursor:pointer;
  font:600 .92rem/1 var(--font);color:#d6d9e0;background:none;white-space:nowrap;
  text-decoration:none;
  transition:color .2s var(--ease),background .2s var(--ease);
}
/* Invisible bridge so the pointer can travel from the button to the panel
   without crossing a dead gap and closing the menu. */
.nav-drop::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.nav-drop-btn:hover{color:#fff;background:rgba(255,255,255,.12)}
.nav-drop-btn[aria-current="page"]{color:#fff}
.nav-caret{width:11px;height:8px;transition:transform .25s var(--ease);opacity:.75}
.nav-drop.is-open .nav-drop-btn{color:#fff;background:rgba(255,255,255,.12)}
.nav-drop.is-open .nav-caret{transform:rotate(180deg)}

.nav-menu{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px);
  width:min(440px,92vw);padding:18px;border-radius:18px;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 24px 60px rgba(35,38,45,.22);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
  z-index:80;
}
.nav-menu::before{
  content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:13px;height:13px;background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);
}
@media (min-width:1001px){
  /* Hover or keyboard focus opens it. Clicking "Pricing" just follows the link
     to /pricing — it must never toggle the panel shut. */
  .nav-drop:hover > .nav-menu,
  .nav-drop:focus-within > .nav-menu{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
  }
  .nav-drop:hover .nav-drop-btn,
  .nav-drop:focus-within .nav-drop-btn{color:#fff;background:rgba(255,255,255,.12)}
  .nav-drop:hover .nav-caret,
  .nav-drop:focus-within .nav-caret{transform:rotate(180deg)}
}

.nav-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.nav-col-title{
  margin:0 0 8px;padding:0 10px;font-size:.66rem;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);
}
.nav-item{
  display:block;padding:9px 10px;border-radius:10px;
  transition:background .18s var(--ease);
}
.nav-item:hover{background:var(--warm)}
.nav-item-name{display:flex;align-items:center;gap:7px;font-weight:700;font-size:.94rem;color:var(--text);line-height:1.3}
.nav-item-name em{
  font-style:normal;font-size:.6rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;color:var(--on-brand);background:var(--gold);
}
.nav-item-meta{display:block;margin-top:2px;font-size:.79rem;color:var(--muted)}
.nav-item-meta b{color:var(--accent);font-weight:800}

.nav-menu-foot{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
  font-weight:800;font-size:.88rem;color:var(--accent);
}
.nav-menu-foot svg{width:15px;height:11px;transition:transform .2s var(--ease)}
.nav-menu-foot:hover svg{transform:translateX(3px)}

@media (max-width:1000px){
  .nav-drop{width:100%}
  .nav-drop-btn{
    width:100%;justify-content:space-between;padding:12px 14px;border-radius:12px;font-size:1rem;
  }
  .nav-menu{
    position:static;transform:none;width:auto;opacity:1;visibility:visible;pointer-events:auto;
    background:transparent;border:0;box-shadow:none;padding:2px 0 8px;
    display:none;
  }
  .nav-menu::before{display:none}
  .nav-drop.is-open .nav-menu{display:block;transform:none}
  .nav-menu-grid{grid-template-columns:1fr;gap:2px}
  .nav-col+.nav-col{margin-top:10px}
  .nav-col-title{color:#98a0b3;padding-left:14px}
  .nav-item{padding:9px 14px}
  .nav-item:hover{background:rgba(255,255,255,.10)}
  .nav-item-name{color:#eef2ff}
  .nav-item-meta{color:#aeb5c6}
  .nav-item-meta b{color:var(--gold)}
  .nav-menu-foot{border-top-color:rgba(255,255,255,.14);color:var(--gold)}
}

/* ---------- Hero ---------- */
.hero{position:relative;padding:78px 0 64px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
.hero h1{margin-bottom:1rem}
.hero h1 .grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{color:var(--muted);font-size:1.08rem;max-width:56ch;margin-bottom:1.6rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:1.6rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 22px;color:var(--muted);font-size:.88rem;font-weight:600}
.hero-meta i{color:var(--green);font-style:normal}

.hero-visual{position:relative}
.hero-card{
  position:relative;border-radius:var(--r-xl);padding:26px;
  background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.hero-card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:var(--grad);opacity:.85;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.hero-card img{border-radius:var(--r);width:100%}
.hero-float{
  position:absolute;display:flex;align-items:center;gap:10px;
  padding:11px 16px;border-radius:14px;font-size:.83rem;font-weight:700;
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  box-shadow:var(--shadow);
  animation:float 6s ease-in-out infinite;
}
.hero-float b{display:block;font-size:.95rem}
.hero-float small{color:var(--dim);font-weight:600}
.hero-float--a{top:-16px;left:-18px}
.hero-float--b{bottom:-18px;right:-14px;animation-delay:-3s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

@media (max-width:920px){
  .hero{padding:52px 0 44px}
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-float--a{left:8px;top:-14px}
  .hero-float--b{right:8px}
}

/* ---------- Marquee / logos strip ---------- */
.strip{border-block:1px solid var(--line);background:var(--bg-2);padding:18px 0;overflow:hidden}
.strip-track{display:flex;gap:52px;align-items:center;width:max-content;animation:slide 32s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
.strip-item{color:var(--muted);font-weight:800;letter-spacing:.06em;font-size:.95rem;white-space:nowrap;text-transform:uppercase}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Section head ---------- */
.sec-head{max-width:720px;margin:0 auto 44px;text-align:center}
.sec-head p{color:var(--muted);margin:0}
.sec-head--left{margin-inline:0;text-align:left}

/* ---------- Cards ---------- */
.card{
  position:relative;border-radius:var(--r-lg);padding:26px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.card:hover{transform:translateY(-4px);border-color:var(--brand);box-shadow:var(--shadow)}
.card h3{margin-bottom:.4rem}
.card p{color:var(--muted);margin:0}
.card-ico{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  font-size:1.3rem;margin-bottom:14px;
  background:var(--grad-soft);border:1px solid var(--warm-line);
}
/* Mirror cards carry real brand marks instead of coloured dots. The SVGs are
   inline (no extra request, no external host) and the padding is dropped to 0
   so the logo fills the tile the way the emoji used to. */
.card-ico--logo{padding:0;background:var(--surface);border-color:var(--line)}
.mirror-logo{width:24px;height:24px;display:block}

.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}
.cards-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:960px){.cards-4{grid-template-columns:repeat(2,1fr)}.cards-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cards-4,.cards-3,.cards-2{grid-template-columns:1fr}}

/* ---------- Product cards ---------- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:980px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.pgrid{grid-template-columns:1fr}}

.pcard{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.pcard:hover{transform:translateY(-6px);border-color:var(--brand);box-shadow:var(--shadow)}
.pcard--featured{border-color:var(--brand);box-shadow:0 0 0 1px rgba(232,131,12,.35),0 18px 44px rgba(232,131,12,.18)}
.pcard--featured::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(60% 40% at 50% 0%,rgba(245,197,24,.20),transparent 70%);
}
.pcard-ribbon{
  position:absolute;top:14px;right:14px;z-index:2;
  padding:5px 12px;border-radius:999px;font-size:.68rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--on-brand);background-color:#e8830c;background-image:var(--grad);
  box-shadow:0 6px 16px rgba(232,131,12,.35);
}
.pcard-media{
  padding:22px 22px 0;position:relative;
}
.pcard-media img{
  width:100%;height:auto;display:block;
  border-radius:var(--r);background:var(--surface-2);
  border:1px solid var(--line);
}
.pcard-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1;gap:.35rem}
/* Flex children stretch by default — the badge should hug its text, not the card. */
.pcard-body > .chip{align-self:flex-start}
.pcard-body h3{margin:.5rem 0 .1rem;font-size:1.15rem}
.pcard-tag{color:var(--muted);font-size:.92rem;margin:0 0 .6rem}
.pcard-price{display:flex;align-items:baseline;gap:10px;margin:auto 0 16px;padding-top:12px;border-top:1px dashed var(--line)}
.pcard-price strong{font-size:1.65rem;letter-spacing:-.03em;color:#b85800}
.pcard-price span{color:var(--dim);font-size:.82rem;font-weight:600}
.pcard-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pcard-actions .btn{padding:11px 14px;font-size:.88rem}
.pcard--compact .pcard-media{display:none}

.price-big{font-size:2.6rem;letter-spacing:-.04em;color:#b85800;font-weight:800;line-height:1}


/* ---------- Product page media ----------
   The artwork is a 1:1 square, but the buy box beside it is always taller —
   a contained square simply cannot fill that height, and cropping it with
   object-fit:cover would slice the caption text baked into the image.
   So the image sits edge to edge at full width and a blurred, scaled copy of
   itself fills whatever height is left. Both cards stay exactly level, the
   artwork stays whole, and there is no dead white space. */
.panel.pdp-media{
  position:relative;overflow:hidden;padding:0;
  display:flex;align-items:center;justify-content:center;
}
.pdp-media::before{
  content:"";position:absolute;inset:0;
  background:var(--pdp-img) center/cover no-repeat;
  transform:scale(1.25);filter:blur(34px) saturate(1.25);
  opacity:.55;
}
.pdp-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,.35));
}
.pdp-media img{
  position:relative;z-index:2;
  width:100%;height:auto;max-height:100%;object-fit:contain;
  display:block;
}

/* Left column: the image card, with the secondary actions sitting underneath.
   Moving those two buttons out of the buy box is what makes the columns match —
   it takes ~60px off the right and adds it to the left, and the media card then
   flexes to fill exactly the space that remains. */
.pdp-left{display:flex;flex-direction:column;gap:12px}
.pdp-left > .panel.pdp-media{flex:1 1 auto;min-height:0}
.pdp-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:0 0 auto}
.pdp-actions .btn{width:100%}

/* Both columns stretch to the same height; the buy box pins its CTA to the
   bottom so any leftover space sits above the button instead of below it —
   the "Buy now" edge then lines up with the buttons under the image. */
.split.pdp-split{align-items:stretch}
.panel.pdp-buy{padding:28px;display:flex;flex-direction:column}
.panel.pdp-buy > .btn-primary{margin-top:auto}
/* Flex children stretch by default — the badge must keep hugging its text. */
.panel.pdp-buy > .chip{align-self:flex-start}
/* The duration alone is not unique — 3 Months exists as both a new activation
   and a renewal — so the variant belongs in the heading too. */
.pdp-variant{display:block;font-size:.5em;font-weight:800;letter-spacing:.02em;color:var(--accent);margin-top:.25em}
.pdp-list{gap:8px}
.pdp-buy .price-big{font-size:2.4rem}

@media (max-width:900px){
  /* Stacked order must be: image -> buy box -> secondary actions. The primary
     CTA must never sit below the secondary buttons. display:contents lifts the
     left column's two children into the same flow so they can be reordered.
     .split is declared later in this file, so these need the extra class to win. */
  .split.pdp-split{display:flex;flex-direction:column;gap:18px;align-items:stretch}
  .pdp-split .pdp-left{display:contents}
  .pdp-split .panel.pdp-media{order:1}
  .pdp-split .panel.pdp-buy{order:2}
  .pdp-split .pdp-actions{order:3}
  .panel.pdp-buy > .btn-primary{margin-top:0}

  .panel.pdp-media{min-height:0}
  .panel.pdp-media::before,.panel.pdp-media::after{display:none}
  .panel.pdp-media img{border-radius:var(--r-xl)}
}

/* ---------- Feature list ---------- */
.flist{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.flist li{display:flex;gap:10px;align-items:flex-start;color:var(--muted);margin:0}
.flist li::before{
  content:"✓";flex:0 0 22px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:.72rem;font-weight:900;
  color:#fff;background:var(--green);margin-top:3px;
}
.flist--2{grid-template-columns:1fr 1fr}
@media (max-width:640px){.flist--2{grid-template-columns:1fr}}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{
  text-align:center;padding:24px 16px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-sm);
}
.stat b{display:block;font-size:1.9rem;letter-spacing:-.03em;color:var(--accent)}
.stat span{color:var(--dim);font-size:.85rem;font-weight:600}
@media (max-width:720px){.stats{grid-template-columns:1fr 1fr}}

/* ---------- Steps ---------- */
.steps{counter-reset:s;display:grid;gap:16px}
.step{
  position:relative;padding:22px 22px 22px 74px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-sm);
}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:22px;top:22px;width:34px;height:34px;border-radius:12px;
  display:grid;place-items:center;font-weight:800;color:var(--on-brand);background-color:#e8830c;background-image:var(--grad);
  box-shadow:0 6px 14px rgba(232,131,12,.30);
}
.step h3{margin:0 0 .25rem;font-size:1.05rem}
.step p{margin:0;color:var(--muted);font-size:.95rem}

/* ---------- Split panel ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}

.panel{
  border-radius:var(--r-xl);padding:34px;
  background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  padding:48px 40px;text-align:center;
  background:linear-gradient(135deg,var(--warm-2),var(--warm-4) 60%,var(--warm));
  border:1px solid var(--warm-line);
}
.cta-band h2{margin-bottom:.5rem}
.cta-band p{color:var(--muted);max-width:60ch;margin:0 auto 1.5rem}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- Breadcrumbs ---------- */
.crumbs{margin:0 0 22px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;font-size:.85rem;color:var(--dim)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--dim)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current]{color:var(--text);font-weight:600}

/* ---------- Page header ---------- */
.page-head{padding:44px 0 8px}
.page-head h1{margin-bottom:.5rem}
.page-head .lede{color:var(--muted);font-size:1.05rem;max-width:70ch;margin:0}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;max-width:860px;margin-inline:auto}
.faq-heading{text-align:center;margin-bottom:.6rem}
.faq-item{
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-sm);
  overflow:hidden;transition:border-color .25s var(--ease),background .25s var(--ease);
}
.faq-item[open]{border-color:var(--brand);background:var(--warm-3)}
.faq-item summary{
  cursor:pointer;list-style:none;padding:18px 52px 18px 20px;position:relative;
  font-weight:700;font-size:1rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:1.35rem;font-weight:400;color:var(--accent);transition:transform .25s var(--ease);
}
.faq-item[open] summary::after{content:"−"}
.faq-body{padding:0 20px 18px;color:var(--muted);font-size:.96rem}
.faq-body p{margin:0}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse;min-width:520px}
th,td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:.94rem}
th{color:#fff;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;background:var(--chrome)}
tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:#faf9f7}
tbody tr:hover{background:var(--warm)}
tbody th[scope="row"]{color:var(--muted);background:var(--bg-2)}
td strong{color:var(--text)}

/* ---------- Prose ---------- */
.prose{max-width:820px}
.prose h2{margin-top:2.2rem}
.prose h3{margin-top:1.6rem}
.prose p,.prose li{color:var(--muted)}
.prose strong{color:var(--text)}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
/* Long-form product copy: .flist and <ol> are used inside .prose on the
   licence pages, and neither carried vertical rhythm there — a checklist ran
   straight into the paragraph below it. */
.prose .flist{margin:1.1rem 0 1.4rem}
.prose ol{margin:1.1rem 0 1.4rem;padding-left:1.25rem}
.prose ol li{margin-bottom:.5rem}
.prose h2+p,.prose h3+p{margin-top:.5rem}
.prose .table-wrap table{width:100%}
.prose blockquote{
  margin:1.5rem 0;padding:16px 22px;border-left:3px solid var(--brand);
  background:var(--warm);border-radius:0 var(--r) var(--r) 0;color:var(--muted);
}

/* ---------- Notice ---------- */
.notice{
  display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:.94rem;box-shadow:var(--shadow-sm);
}
.notice b{color:var(--text)}
.notice--warn{border-color:var(--warm-line);background:var(--warm)}
.notice--ok{border-color:#a9dbb8;background:#eef8f1}

/* ---------- Update log ---------- */
.rel{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm);padding:26px;margin-bottom:20px}
.rel-top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}
.rel-ver{font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
.rel-date{color:var(--dim);font-size:.85rem;font-weight:700}
code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
  background:#f1efe9;border:1px solid var(--line);border-radius:6px;padding:2px 6px;color:#3d2a12}
.rel-hash{display:flex;align-items:center;gap:7px;margin-top:6px;flex-wrap:wrap}
.rel-hash span{font-size:.62rem;font-weight:900;letter-spacing:.1em;color:var(--dim)}
.rel-hash code{font-size:.72rem;word-break:break-all;background:var(--surface-2);padding:2px 7px}

.rel-sec{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line)}
.rel-sec h4{margin:0 0 .5rem;font-size:.95rem;color:#1f7a3d;letter-spacing:.02em;font-weight:800}
.rel-sec ul{margin:0;padding-left:1.1rem;color:var(--muted);font-size:.92rem;columns:2;column-gap:32px}
@media (max-width:700px){.rel-sec ul{columns:1}}

/* ---------- Blog ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:960px){.post-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.post-grid{grid-template-columns:1fr}}
.post{
  display:flex;flex-direction:column;padding:26px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.post:hover{transform:translateY(-5px);border-color:var(--brand);box-shadow:var(--shadow)}
/* Card title is an <h2> now (top-level item under the page <h1>); the
   size stays on the old h3 scale so nothing moves visually. */
.post h2,.post h3{font-size:1.1rem;margin-bottom:.4rem}
.post-date{display:block;order:-1;font-size:.78rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.post p{color:var(--muted);font-size:.94rem;flex:1}
.post-more{color:var(--accent);font-weight:700;font-size:.9rem}

/* ---------- Social ---------- */
.social{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:820px){.social{grid-template-columns:1fr 1fr}}
.soc{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px;border-radius:var(--r);font-weight:700;font-size:.94rem;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);box-shadow:var(--shadow-sm);
  transition:.25s var(--ease);
}
.soc:hover{transform:translateY(-3px);color:var(--text);border-color:var(--brand);background:var(--warm-3)}
.soc svg{width:20px;height:20px;flex:0 0 20px}

/* ---------- Footer ---------- */
.site-footer{margin-top:40px;border-top:3px solid var(--brand);background:var(--chrome);color:#d6d9e0}
/* Five columns since the "Other tools from GsmGenesis" block was added.
   The brand column keeps the extra width; the four link columns share
   the rest evenly. */
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:30px;padding:56px 0 36px}
@media (max-width:1080px){.foot{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}}
@media (max-width:900px){.foot{grid-template-columns:1fr 1fr;gap:28px}}
@media (max-width:560px){.foot{grid-template-columns:1fr}}
.foot h4{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.foot p{color:#c3c7d1;font-size:.92rem}
.foot-links{display:grid;gap:9px}
.foot-links a{color:#c3c7d1;font-size:.92rem;transition:color .2s var(--ease)}
.foot-links a:hover{color:var(--gold)}
.foot-brand img{height:32px;margin-bottom:14px}
.foot-bottom{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;
  padding:20px 0;border-top:1px solid rgba(255,255,255,.14);color:#c3c7d1;font-size:.86rem;
}
.foot-bottom a{color:var(--gold)}
.foot-bottom a:hover{color:#fff}
.foot-a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.foot-a:hover{color:#fff}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ---------- Back to top ---------- */
.totop{
  position:fixed;right:18px;bottom:18px;z-index:50;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;font-size:1.1rem;
  color:var(--on-brand);background-color:#e8830c;background-image:var(--grad);border:0;box-shadow:0 8px 22px rgba(232,131,12,.4);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.3s var(--ease);
}
.totop.is-on{opacity:1;visibility:visible;transform:none}

/* ---------- Utilities ---------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-2{margin-top:1.4rem}.mt-3{margin-top:2rem}
.muted{color:var(--muted)}
.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}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

@media print{
  body::before,body::after,.site-header,.site-footer,.totop{display:none}
  body{background:#fff;color:#000}
  .card,.pcard,.panel,.faq-item{box-shadow:none;border:1px solid #ccc}
}

/* =========================================================
   WhatsApp chat widget (self-contained, no external scripts)
   ========================================================= */
.wa{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:12px}

/* --- Floating button --- */
.wa-fab{
  position:relative;width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(145deg,#3ad167,#25D366 45%,#128C7E);
  box-shadow:0 10px 28px rgba(18,140,126,.42),0 2px 6px rgba(0,0,0,.18);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.wa-fab:hover{transform:scale(1.07);box-shadow:0 14px 34px rgba(18,140,126,.5)}
.wa-fab:active{transform:scale(.97)}
.wa-fab svg{width:31px;height:31px;grid-area:1/1;transition:opacity .22s var(--ease),transform .28s var(--ease)}
.wa-fab-x{opacity:0;transform:rotate(-90deg) scale(.6);width:26px;height:26px}
.wa-fab[aria-expanded="true"] .wa-fab-ico{opacity:0;transform:rotate(90deg) scale(.6)}
.wa-fab[aria-expanded="true"] .wa-fab-x{opacity:1;transform:none}

/* pulsing ring */
.wa-fab::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(37,211,102,.55);
  animation:wa-pulse 2.6s var(--ease) infinite;
}
.wa-fab[aria-expanded="true"]::before{display:none}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.8}70%{transform:scale(1.55);opacity:0}100%{opacity:0}}

.wa-badge{
  position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:#d32626;color:#fff;border:2px solid var(--bg);
  font-size:.68rem;font-weight:800;line-height:16px;text-align:center;
}
.wa-fab[aria-expanded="true"] .wa-badge,.wa.is-seen .wa-badge{display:none}

/* --- Hover tooltip --- */
.wa-tip{
  position:absolute;right:74px;bottom:19px;white-space:nowrap;pointer-events:none;
  padding:9px 14px;border-radius:10px;font-size:.84rem;font-weight:700;
  background:var(--chrome);color:#fff;box-shadow:var(--shadow-sm);
  opacity:0;transform:translateX(8px);transition:.25s var(--ease);
}
.wa-tip::after{content:"";position:absolute;right:-5px;bottom:12px;width:10px;height:10px;background:var(--chrome);transform:rotate(45deg)}
.wa-fab:hover ~ .wa-tip{opacity:1;transform:none}
.wa-fab[aria-expanded="true"] ~ .wa-tip{opacity:0!important}

/* --- Panel --- */
.wa-panel{
  width:340px;max-width:calc(100vw - 36px);overflow:hidden;
  border-radius:18px;background:var(--surface);border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(35,38,45,.26);
  transform-origin:bottom right;
  animation:wa-in .28s var(--ease);
}
.wa-panel[hidden]{display:none}
@keyframes wa-in{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}

.wa-head{display:flex;align-items:center;gap:12px;padding:16px 16px;background:#075E54;color:#fff}
.wa-avatar{width:42px;height:42px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:0 0 42px}
.wa-avatar svg{width:26px;height:26px}
.wa-head-txt{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.wa-head-txt strong{font-size:.98rem}
.wa-head-txt span{font-size:.76rem;color:#c8e6d8;display:flex;align-items:center;gap:6px}
.wa-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;display:inline-block;box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:wa-live 2s infinite}
@keyframes wa-live{0%{box-shadow:0 0 0 0 rgba(74,222,128,.7)}70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.wa-x{margin-left:auto;background:none;border:0;color:#c8e6d8;font-size:1.6rem;line-height:1;cursor:pointer;padding:0 2px}
.wa-x:hover{color:#fff}

.wa-body{
  padding:18px 16px 16px;max-height:min(52vh,400px);overflow-y:auto;overscroll-behavior:contain;
  background:#ece5dd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='%23d9cfc3' fill-opacity='.4'%3E%3Ccircle cx='6' cy='6' r='1.4'/%3E%3Ccircle cx='26' cy='18' r='1.4'/%3E%3Ccircle cx='14' cy='32' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
}
.wa-bubble{
  position:relative;background:#fff;border-radius:0 12px 12px 12px;padding:12px 14px 8px;
  box-shadow:0 1px 2px rgba(0,0,0,.16);max-width:92%;
}
.wa-bubble::before{content:"";position:absolute;left:-7px;top:0;border:7px solid transparent;border-top-color:#fff;border-right:0}
.wa-bubble p{margin:0 0 .5rem;font-size:.9rem;color:#1f2430;line-height:1.55}
.wa-bubble p:last-of-type{margin-bottom:.2rem}
.wa-bubble time{display:block;text-align:right;font-size:.68rem;color:#8b93a3}

.wa-quick-label{margin:16px 0 8px;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#5c6470}
.wa-quick{display:flex;flex-direction:column;gap:7px}
.wa-body::-webkit-scrollbar{width:6px}
.wa-body::-webkit-scrollbar-thumb{background:rgba(7,94,84,.28);border-radius:3px}
.wa-chip{
  text-align:left;padding:10px 13px;border-radius:12px;cursor:pointer;font-size:.84rem;
  font-weight:600;color:#075E54;background:#fff;border:1px solid #cfe3d8;font-family:inherit;
  transition:.2s var(--ease);
}
.wa-chip:hover{background:#e8f5ef;border-color:#25D366;transform:translateX(2px)}

.wa-foot{display:flex;gap:8px;padding:11px;background:#f0f0f0;border-top:1px solid #dcdcdc}
.wa-foot input{
  flex:1;min-width:0;padding:11px 14px;border-radius:999px;border:1px solid #d5d5d5;
  font-family:inherit;font-size:.88rem;color:#1f2430;background:#fff;
}
.wa-foot input:focus{outline:none;border-color:#25D366;box-shadow:0 0 0 3px rgba(37,211,102,.18)}
.wa-send{
  flex:0 0 42px;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;color:#fff;background:#25D366;
  transition:.2s var(--ease);
}
.wa-send:hover{background:#1eb955;transform:scale(1.06)}
.wa-send svg{width:19px;height:19px}

/* Keep the back-to-top button clear of the widget */
.totop{bottom:92px;right:24px;width:42px;height:42px;font-size:1rem}

@media (max-width:520px){
  .wa{right:14px;bottom:14px}
  .wa-fab{width:56px;height:56px}
  .wa-fab svg{width:29px;height:29px}
  .wa-tip{display:none}
  .totop{bottom:84px;right:20px}
}

@media (prefers-reduced-motion:reduce){
  .wa-fab::before,.wa-dot{animation:none}
  .wa-panel{animation:none}
}

@media print{.wa{display:none}}

/* ---------- Download page ---------- */
.dl-hero{
  display:grid;grid-template-columns:1.4fr .85fr;gap:34px;align-items:center;
  padding:32px 34px;border-radius:var(--r-xl);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
}
.dl-hero::before{
  content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--grad);
}
.dl-hero-main h2{margin:.7rem 0 .3rem;font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem)}
.dl-hero-cta{display:grid;gap:10px}
.dl-hash{display:flex;align-items:center;gap:9px;margin-top:14px;flex-wrap:wrap}
.dl-hash span{font-size:.64rem;font-weight:900;letter-spacing:.12em;color:var(--dim)}
.dl-hash code{font-size:.78rem;word-break:break-all}
.dl-mirror{display:flex;flex-direction:column}
.dl-mirror .post-more{margin-top:auto;padding-top:12px}
@media (max-width:860px){
  .dl-hero{grid-template-columns:1fr;gap:22px;padding:26px 22px}
  .dl-hero::before{inset:0 0 auto 0;width:auto;height:5px}
}


/* ------------------------------------------------------------------ */
/*  Currency switcher                                                  */
/*                                                                     */
/*  USD is the canonical currency; INR is a convenience for Indian     */
/*  visitors. rel="nofollow" on the links keeps crawlers out of the    */
/*  switcher entirely, so no rupee URL ever enters the index.          */
/* ------------------------------------------------------------------ */

.cur-switch {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
}
.cur-switch a {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .03em;
  color: rgba(255,255,255,.72);
  line-height: 1.2;
}
.cur-switch a:hover { color: #fff; }
.cur-switch a.is-on {
  background: var(--brand);
  background-image: var(--grad);
  /* Near-black on orange, not white: white on this orange measures 2.7:1 on
     the light theme and 2.0:1 on dark, both failing AA for a 12px label.
     This is the same ink the primary buttons already use on the gradient. */
  color: var(--on-brand);
}
.cur-switch a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 960px) {
  .cur-switch { margin: 12px 0 0; align-self: flex-start; }
}

.cur-note {
  font-size: .82rem;
  color: var(--dim);
  margin-top: .5rem;
}

/* ==========================================================================
   DARK THEME
   --------------------------------------------------------------------------
   One override block, not a second stylesheet. Every rule above already
   paints from the tokens in :root, so flipping the tokens flips the site.

   HOW THE MODE IS CHOSEN
     data-theme="dark"  / data-theme="light"   an explicit visitor choice
     no attribute                               follow the OS setting
   The inline script in includes/head.php sets the attribute before first
   paint, so a dark-mode visitor never sees a white flash.

   COLOUR NOTES
     --brand stays #e8830c on light because it has to carry black text on an
     orange button. On dark it lifts to #f5a623: the darker orange muddies
     against a near-black page and drops link contrast below AA.
     --accent is a deliberately different value per theme for the same
     reason — dark-orange links are readable on cream, invisible on charcoal.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#141114; --bg-2:#191619;
    --surface:#1d1a1e; --surface-2:#232025;
    --line:rgba(255,255,255,.11); --line-strong:rgba(255,255,255,.19);
    --text:#f3f0ee; --muted:#aaa3a9; --dim:#a49ca3;
    --brand:#f5a623; --brand-2:#f5c518; --accent:#f5a623;
    --gold:#f5c518; --green:#4ade80;
    --grad-soft:linear-gradient(135deg,rgba(245,166,35,.16),rgba(245,197,24,.09));
    --grad-text:linear-gradient(135deg,#f5c518 0%,#f5a623 60%,#ef8a2c 120%);
    --chrome:#100e11; --chrome-2:#1a171b;
    --warm:#241c13; --warm-2:#2a2016; --warm-3:#201911; --warm-4:#2e2317;
    --warm-line:rgba(245,166,35,.30); --warm-ink:#f0b45c;
    --shadow:0 18px 44px rgba(0,0,0,.55);
    --shadow-sm:0 6px 18px rgba(0,0,0,.42);
  }
}
:root[data-theme="dark"] {
  --bg:#141114; --bg-2:#191619;
  --surface:#1d1a1e; --surface-2:#232025;
  --line:rgba(255,255,255,.11); --line-strong:rgba(255,255,255,.19);
  --text:#f3f0ee; --muted:#aaa3a9; --dim:#a49ca3;
  --brand:#f5a623; --brand-2:#f5c518; --accent:#f5a623;
  --gold:#f5c518; --green:#4ade80;
  --grad-soft:linear-gradient(135deg,rgba(245,166,35,.16),rgba(245,197,24,.09));
  --grad-text:linear-gradient(135deg,#f5c518 0%,#f5a623 60%,#ef8a2c 120%);
  --chrome:#100e11; --chrome-2:#1a171b;
  --warm:#241c13; --warm-2:#2a2016; --warm-3:#201911; --warm-4:#2e2317;
  --warm-line:rgba(245,166,35,.30); --warm-ink:#f0b45c;
  --shadow:0 18px 44px rgba(0,0,0,.55);
  --shadow-sm:0 6px 18px rgba(0,0,0,.42);
}

/* Handful of rules that hardcode a light value for a good reason on light,
   and therefore need saying again for dark. Kept deliberately short — if
   this list grows, the rule above it should have used a token instead. */
/* WhatsApp panel in dark.
   ------------------------------------------------------------------------
   This widget deliberately imitates the real WhatsApp chat UI, so its
   surfaces are hardcoded brand values rather than site tokens — a "chat
   wallpaper" that followed --bg would stop looking like WhatsApp. That
   means dark mode has to restate them, and the honest thing to restate
   them AS is WhatsApp's own dark palette:
       #0b141a wallpaper · #202c33 incoming bubble · #2a3942 input field
   The header stays #075E54 in both themes; WhatsApp keeps it dark too.

   The same rules appear twice on purpose. The first copy is an explicit
   visitor choice and must win regardless of the OS. The second is the
   "no choice yet" case and MUST sit inside the media query — without it,
   :not([data-theme="light"]) also matches a light-mode page with no
   attribute set, and the widget goes dark on a white site. */

:root[data-theme="dark"] .wa-body {
  background-color:#0b141a;
  /* Same dot pattern, dark ink — the light dots vanished on this ground. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='%23223240' fill-opacity='.55'%3E%3Ccircle cx='6' cy='6' r='1.4'/%3E%3Ccircle cx='26' cy='18' r='1.4'/%3E%3Ccircle cx='14' cy='32' r='1.4'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-theme="dark"] .wa-avatar { background:#0b141a; }
:root[data-theme="dark"] .wa-bubble { background:#202c33; box-shadow:0 1px 2px rgba(0,0,0,.5); }
:root[data-theme="dark"] .wa-bubble::before { border-top-color:#202c33; }
:root[data-theme="dark"] .wa-bubble p { color:#e9edef; }
:root[data-theme="dark"] .wa-bubble time { color:#8696a0; }
:root[data-theme="dark"] .wa-quick-label { color:#8696a0; }
:root[data-theme="dark"] .wa-chip {
  background:#202c33; color:#7ee0a8; border-color:rgba(126,224,168,.26); }
:root[data-theme="dark"] .wa-chip:hover { background:#2a3942; border-color:#25D366; }
:root[data-theme="dark"] .wa-foot { background:#111b21; border-top-color:rgba(255,255,255,.08); }
:root[data-theme="dark"] .wa-foot input {
  background:#2a3942; border-color:rgba(255,255,255,.10); color:#e9edef; }
:root[data-theme="dark"] .wa-foot input::placeholder { color:#8696a0; }
:root[data-theme="dark"] .wa-body::-webkit-scrollbar-thumb { background:rgba(233,237,239,.22); }
:root[data-theme="dark"] .wa-panel { box-shadow:0 24px 60px rgba(0,0,0,.6); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wa-body {
  background-color:#0b141a;
  /* Same dot pattern, dark ink — the light dots vanished on this ground. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='%23223240' fill-opacity='.55'%3E%3Ccircle cx='6' cy='6' r='1.4'/%3E%3Ccircle cx='26' cy='18' r='1.4'/%3E%3Ccircle cx='14' cy='32' r='1.4'/%3E%3C/g%3E%3C/svg%3E"); }
  :root:not([data-theme="light"]) .wa-avatar { background:#0b141a; }
  :root:not([data-theme="light"]) .wa-bubble { background:#202c33; box-shadow:0 1px 2px rgba(0,0,0,.5); }
  :root:not([data-theme="light"]) .wa-bubble::before { border-top-color:#202c33; }
  :root:not([data-theme="light"]) .wa-bubble p { color:#e9edef; }
  :root:not([data-theme="light"]) .wa-bubble time { color:#8696a0; }
  :root:not([data-theme="light"]) .wa-quick-label { color:#8696a0; }
  :root:not([data-theme="light"]) .wa-chip {
  background:#202c33; color:#7ee0a8; border-color:rgba(126,224,168,.26); }
  :root:not([data-theme="light"]) .wa-chip:hover { background:#2a3942; border-color:#25D366; }
  :root:not([data-theme="light"]) .wa-foot { background:#111b21; border-top-color:rgba(255,255,255,.08); }
  :root:not([data-theme="light"]) .wa-foot input {
  background:#2a3942; border-color:rgba(255,255,255,.10); color:#e9edef; }
  :root:not([data-theme="light"]) .wa-foot input::placeholder { color:#8696a0; }
  :root:not([data-theme="light"]) .wa-body::-webkit-scrollbar-thumb { background:rgba(233,237,239,.22); }
  :root:not([data-theme="light"]) .wa-panel { box-shadow:0 24px 60px rgba(0,0,0,.6); }
}

/* ---------------------------------------------------------------- toggle */
.theme-btn{
  display:inline-grid;place-items:center;width:34px;height:34px;flex:none;
  border-radius:9px;cursor:pointer;padding:0;
  color:#d6d9e0;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.theme-btn:hover{ color:#fff;background:rgba(255,255,255,.16); }
.theme-btn svg{ width:17px;height:17px;display:block; }
/* Two icons, one button: show the mode the click will switch TO, which is
   the convention people already read correctly without a label. */
.theme-btn .i-sun{ display:none; }
:root[data-theme="dark"] .theme-btn .i-sun{ display:block; }
:root[data-theme="dark"] .theme-btn .i-moon{ display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .i-sun{ display:block; }
  :root:not([data-theme="light"]) .theme-btn .i-moon{ display:none; }
}