/* ==========================================================================
   MyGuardian™ — Design System
   Built to the MyGuardian Brand & PR Bible (Guardian Ink / Gold / Blue).
   Motion doctrine: slow, steady, deliberate — a witness, not a siren.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Brand palette (Brand & PR Bible) */
  --ink:        #0B1120;   /* Guardian Ink — backgrounds, authority */
  --gold:       #E5B84B;   /* Guardian Gold — accent, headlines, CTAs */
  --blue:       #3987E5;   /* Guardian Blue — product, links, action */
  --green:      #199E70;   /* Witness Green — confirmation, "protected" */
  --navy:       #17223A;   /* Card Navy — surfaces, cards */
  --steel:      #AEBAD1;   /* secondary text */
  --alert:      #D03B3B;   /* reserved: emergencies only, never brand */

  /* Derived, contrast-tuned (see tools/contrast.py — all AA or better) */
  --blue-lift:  #7FB6F5;   /* links & small text on ink  (8.89:1 on ink) */
  --blue-cta:   #2E72C9;   /* filled buttons: 4.81:1 with white, WCAG AA */
  /* Chrome-blue gradient lifted from the shield: the brand's primary display fill */
  --chrome-blue: linear-gradient(96deg,#BFDCFF 2%,#7FB6F5 26%,#4E92E8 52%,#9CCBFF 74%,#5C9FEE 100%);
  /* Gold stays the signature accent, with dimension */
  --chrome-gold: linear-gradient(96deg,#F6DCA0 2%,#E5B84B 30%,#B98A20 52%,#FFE9AE 74%,#E5B84B 100%);
  --green-lift: #4FD6A4;
  --ink-2:      #0E1626;
  --ink-3:      #121C30;
  --line:       rgba(174,186,209,.14);
  --line-2:     rgba(174,186,209,.28);
  --text:       #E9EEF8;
  --text-dim:   #AEBAD1;
  --text-faint: #7C8AA5;

  --radius:     16px;
  --radius-lg:  26px;

  --shadow:     0 1px 0 rgba(255,255,255,.04) inset, 0 18px 50px -20px rgba(0,0,0,.75);
  --shadow-lift:0 1px 0 rgba(255,255,255,.06) inset, 0 34px 80px -28px rgba(0,0,0,.85);
  --shadow-pop: 0 28px 60px -22px rgba(0,0,0,.95);
  --shadow-qr:  0 20px 44px -20px rgba(0,0,0,.9);

  /* Neutral tints and surfaces. These carry the theme; the brand hues do not. */
  --card-a:     rgba(23,34,58,.92);   /* card gradient, top */
  --card-b:     rgba(18,28,48,.82);   /* card gradient, bottom */
  --panel-b:    rgba(14,22,38,.9);
  --tint:       rgba(174,186,209,.09);/* hover fill, pill fill */
  --tint-soft:  rgba(174,186,209,.05);
  --tint-faint: rgba(174,186,209,.035);
  --hdr-bg:     rgba(11,17,32,.72);
  --hdr-bg-on:  rgba(11,17,32,.92);
  --menu-bg:    rgba(9,14,26,.97);
  --pop-bg:     rgba(14,22,38,.98);
  --dock-bg:    rgba(11,17,32,.94);
  --ftr-bg:     #080D18;
  --band-mid:   rgba(11,17,32,.45);   /* CTA band centre stop */
  --glow:       1;                     /* multiplier for the ambient hero glows */
  --link-hover: #A9D0FA;
  --gold-ink:   var(--gold);           /* gold as readable text on the page */
  --wm-dark:    block;                 /* which wordmark shows */
  --wm-light:   none;

  --maxw:       1200px;
  --gutter:     clamp(20px, 5vw, 48px);

  /* Deliberate motion */
  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --t-fast:     .28s;
  --t:          .5s;
  --t-slow:     .9s;

  --font: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Segoe UI",
          Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
a{color:var(--blue-lift);text-decoration:none}
a:hover{color:var(--link-hover)}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.1;letter-spacing:-.022em;font-weight:760;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
p{margin:0 0 1.1em}
ul{margin:0 0 1.1em;padding-left:1.15em}
li{margin:.35em 0}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
::selection{background:rgba(57,135,229,.4);color:#fff}

/* The product name and its mark are one bidi object. Without the isolate the
   Unicode algorithm gives a trailing U+2122 the paragraph's own direction, so
   on the Arabic pages "MyGuardian™" was laid out as "™MyGuardian". */
.tmn{unicode-bidi:isolate;direction:ltr}
.tm{font-size:.56em;line-height:0;vertical-align:.5em;letter-spacing:0;font-weight:inherit}
/* Display type carries the mark higher and smaller still; body copy needs it a
   touch larger to stay legible at 16px. */
h1 .tm,h2 .tm,.h1 .tm,.h2 .tm,.quote .tm,.h1-sub .tm{font-size:.42em;vertical-align:.85em}
.small .tm,small .tm,.cites .tm,.ftr .tm,.disclaimer .tm{font-size:.68em;vertical-align:.36em}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:-9999px;top:0;background:var(--gold);color:#0B1120;padding:12px 18px;font-weight:700;z-index:200;border-radius:0 0 10px 0}
.skip:focus{inset-inline-start:0}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{max-width:1360px}
section{position:relative}
.sec{padding:clamp(64px,9vw,124px) 0}
.sec-tight{padding:clamp(48px,6vw,80px) 0}
.grid{display:grid;gap:clamp(18px,2.4vw,28px)}
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:940px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- Type scale ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.755rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-lift);margin:0 0 1.1em;
}
.eyebrow::before{content:"";width:26px;height:2px;background:linear-gradient(90deg,var(--blue-lift),transparent)}
h1,.h1{font-size:clamp(2.5rem,6.2vw,4.6rem);letter-spacing:-.035em}
h2,.h2{font-size:clamp(1.9rem,3.9vw,3rem);letter-spacing:-.03em}
h3,.h3{font-size:clamp(1.18rem,1.8vw,1.5rem)}
/* A heading with a deliberate <br>: the type has to be small enough that the
   longer of the two lines still fits on one, in every language, before the
   browser adds a wrap of its own. Below tablet it wraps naturally, as it should. */
.h-2line{font-size:clamp(1.9rem,3.1vw,2.75rem)}
/* German runs about 13 percent longer here, so it gets its own ceiling rather
   than forcing every language down to the width of the longest one. */
[lang="de"] .h-2line{font-size:clamp(1.75rem,2.7vw,2.4rem)}
.lede{font-size:clamp(1.06rem,1.55vw,1.32rem);color:var(--text-dim);max-width:62ch;line-height:1.6}
.small{font-size:.86rem;color:var(--text-faint);line-height:1.6}
.gold{color:var(--gold-ink)}
.bl{color:var(--blue-lift)}
.gr{color:var(--green-lift)}
.center{text-align:center}
.center .lede{margin-inline:auto}
.center .eyebrow,.cta-band .eyebrow{justify-content:center}
.h1-sub{font-size:clamp(2.2rem,5vw,3.6rem)}
.card-pill{margin:-4px 0 12px}
.map-detail .rule[data-c="one"]{color:var(--green-lift)}
.map-detail .rule[data-c="all"]{color:var(--gold-ink)}
.map-detail .rule[data-c="mixed"]{color:var(--blue-lift)}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--blue-cta); --fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:.92em 1.5em;border-radius:999px;border:1px solid transparent;
  background:var(--bg);color:var(--fg);font-weight:700;font-size:.97rem;letter-spacing:-.01em;
  cursor:pointer;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
  box-shadow:0 10px 30px -12px rgba(57,135,229,.85);
  text-align:center;max-width:100%;overflow-wrap:anywhere;
}
.btn:hover{transform:translateY(-2px);color:var(--fg);box-shadow:0 18px 40px -14px rgba(57,135,229,.95)}
.btn:active{transform:translateY(0)}
.btn-gold{--bg:var(--gold);--fg:#10151F;box-shadow:0 10px 30px -12px rgba(229,184,75,.7)}
.btn-gold:hover{box-shadow:0 18px 40px -14px rgba(229,184,75,.8)}
.btn-ghost{--bg:transparent;--fg:var(--text);border-color:var(--line-2);box-shadow:none}
.btn-ghost:hover{--bg:var(--tint);box-shadow:none}
.btn-sm{padding:.62em 1.05em;font-size:.87rem}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.center .btn-row{justify-content:center}

/* ---------- Store badges — high-desire, tactile ---------- */
.stores{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch}
.center .stores{justify-content:center}
/* The two lockups must read as a matched pair. Their labels are different
   lengths ("Download on the" against "Get it on") and both get translated, so a
   fixed width would only ever be right in English. Two equal grid tracks in a
   max-content container both resolve to the wider badge, in any language.
   Below the breakpoint they stack, and stack at the same width. */
@media (min-width:560px){
  .stores{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
          width:max-content;max-width:100%}
  /* width:max-content makes this a shrink-to-fit block, and a block does not
     answer to text-align or justify-content on its parent: it needs auto
     margins. Every centered context that holds a badge pair has to be listed
     here, or the pair silently sits flush left inside a centered section. That
     is what happened to the closing call-to-action band on seven pages when the
     two badges were first made equal width. */
  .center .stores,.cta-band .stores{margin-inline:auto}
  .stores .store{min-width:0}
}
@media (max-width:559px){
  /* Stacked, and still a matched pair: equal rows keep the two the same height
     when a translated label wraps to two lines in one badge and not the other. */
  .stores{display:grid;grid-auto-flow:row;grid-auto-rows:1fr;width:auto}
  .stores .store{min-width:0}
}
.store{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:14px;
  padding:14px 26px 14px 20px;border-radius:16px;
  background:linear-gradient(177deg,#FFFFFF 0%,#EDF3FD 46%,#D3E0F5 100%);
  color:#0B1120;border:1px solid rgba(255,255,255,.9);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -14px 26px -18px rgba(11,17,32,.35) inset,
    0 14px 34px -14px rgba(0,0,0,.85),
    0 0 0 0 rgba(127,182,245,0);
  transition:transform .34s var(--ease-out),box-shadow .34s var(--ease-out),background .34s var(--ease);
  min-width:min(212px,100%);flex:0 1 auto;
  will-change:transform;
}
.store::after{ /* specular sweep */
  content:"";position:absolute;top:-60%;left:-70%;width:45%;height:220%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.92),transparent);
  transform:skewX(-18deg);animation:sheen 6.5s var(--ease) infinite;
}
@keyframes sheen{0%,72%{left:-70%}92%,100%{left:150%}}
.store:hover,.store:focus-visible{
  transform:translateY(-4px) scale(1.025);color:#0B1120;
  background:linear-gradient(177deg,#FFFFFF 0%,#F4F8FF 46%,#DEE9FA 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 -14px 26px -18px rgba(11,17,32,.28) inset,
    0 24px 52px -16px rgba(0,0,0,.95),
    0 0 46px -6px rgba(127,182,245,.55);
}
.store:hover::after{animation:sheen 1.1s var(--ease-out) 1}
.store:active{transform:translateY(-1px) scale(1.005)}
.store svg{flex:none;filter:drop-shadow(0 1px 1px rgba(11,17,32,.22))}
.store .lbl{display:block;font-size:.725rem;letter-spacing:.14em;text-transform:uppercase;font-weight:900;color:#3C4A63;line-height:1.3}
.store .nm{display:block;font-size:1.16rem;font-weight:900;letter-spacing:-.028em;line-height:1.18;color:#0B1120}
.store .free{
  align-self:center;margin-inline-start:auto;flex:none;
  padding:5px 11px 6px;border-radius:999px;
  background:linear-gradient(135deg,#F3CE74,#E5B84B);color:#191202;
  font-size:.725rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
  box-shadow:0 2px 8px -3px rgba(146,105,12,.6);
}
.store[data-preferred="1"]{animation:nudge 3.4s var(--ease) 1.2s 2}
@keyframes nudge{0%,100%{transform:none}40%{transform:translateY(-5px) scale(1.03)}60%{transform:translateY(0) scale(1)}}
.stores-lg .store{padding:18px 32px 18px 24px;min-width:min(252px,100%);border-radius:18px}
.stores-lg .store .nm{font-size:1.32rem}
.stores-lg .store svg{transform:scale(1.15)}

/* ---------- Header ---------- */
.hdr{
  position:sticky;top:0;z-index:100;
  background:var(--hdr-bg);backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid transparent;transition:border-color var(--t) var(--ease),background var(--t) var(--ease);
}
.hdr.is-stuck{border-bottom-color:var(--line);background:var(--hdr-bg-on)}
body.menu-open .hdr{background:transparent;border-bottom-color:transparent}
.hdr .bar{display:flex;align-items:center;gap:clamp(8px,1vw,18px);height:80px;min-width:0}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto;color:var(--text);font-weight:800;letter-spacing:-.03em;font-size:1.16rem}
.brand:hover{color:var(--text)}
.nav{display:flex;gap:2px;margin-left:auto;flex:none}
.nav a{
  white-space:nowrap;padding:9px 10px;border-radius:9px;color:var(--text-dim);font-size:.925rem;font-weight:600;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.nav a:hover{color:var(--text);background:var(--tint)}
.nav a[aria-current="page"]{color:var(--gold-ink)}
.hdr-cta{display:flex;align-items:center;gap:8px;margin-inline-start:4px;flex:none}
.hdr-cta .btn{white-space:nowrap}
.menu-btn{
  display:inline-flex;align-items:center;gap:9px;background:transparent;border:1px solid var(--line-2);
  border-radius:999px;padding:9px 15px;cursor:pointer;color:var(--text-dim);font-weight:700;font-size:.88rem;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.menu-btn:hover{color:var(--text);border-color:var(--steel)}
.menu-btn .bars{display:inline-flex;flex-direction:column;gap:3.5px;width:16px}
.menu-btn .bars i{display:block;height:1.9px;background:currentColor;border-radius:2px;transition:transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)}
.menu-btn .bars i:nth-child(2){width:70%}
body.menu-open .menu-btn .bars i:nth-child(1){transform:translateY(5.4px) rotate(45deg)}
body.menu-open .menu-btn .bars i:nth-child(2){opacity:0}
body.menu-open .menu-btn .bars i:nth-child(3){transform:translateY(-5.4px) rotate(-45deg);width:100%}
@media (max-width:1180px){.nav{display:none}}
@media (max-width:1460px){.hdr .brand-tag{display:none}}
@media (max-width:560px){.hdr-cta .btn{display:none}}

/* ---------- Full menu (hamburger) ---------- */
.menu{
  position:fixed;inset:0;z-index:95;background:var(--menu-bg);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  opacity:0;visibility:hidden;transition:opacity var(--t) var(--ease),visibility var(--t);
  overflow-y:auto;overflow-x:hidden;padding:96px 0 60px;
}
body.menu-open .menu{opacity:1;visibility:visible}
.menu-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:38px}
@media (max-width:900px){.menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.menu-grid{grid-template-columns:1fr}}
.menu ul{list-style:none;padding:0;margin:0}
.menu li{margin:0}
.menu li a{
  display:flex;align-items:baseline;gap:.5em;padding:8px 0;color:var(--text);font-size:1.02rem;font-weight:600;
  border-bottom:1px solid var(--line);transition:padding-left var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.menu li a:hover{padding-left:8px;color:var(--gold-ink)}
.menu li a .ext{font-size:.66rem;color:var(--text-faint);letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.menu-foot{margin-top:46px;padding-top:26px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}

/* ---------- Cards & surfaces ---------- */
.card{
  background:linear-gradient(180deg,var(--card-a),var(--card-b));
  border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,2.4vw,30px);
  box-shadow:var(--shadow);position:relative;overflow:hidden;
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.card:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow-lift)}
.card h3{margin-bottom:.45em}
.card p:last-child{margin-bottom:0}
.card .ic{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
  background:rgba(57,135,229,.14);border:1px solid rgba(57,135,229,.3);color:var(--blue-lift);
}
.card .ic svg{width:22px;height:22px}
.card-gold .ic{background:rgba(229,184,75,.14);border-color:rgba(229,184,75,.32);color:var(--gold-ink)}
.card-green .ic{background:rgba(25,158,112,.16);border-color:rgba(25,158,112,.36);color:var(--green-lift)}
.card-flat{box-shadow:none}
.card-flat:hover{transform:none}

.panel{
  background:radial-gradient(120% 140% at 12% 0%,rgba(57,135,229,.13),transparent 55%),
             linear-gradient(180deg,var(--card-a),var(--panel-b));
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(26px,4vw,54px);
  box-shadow:var(--shadow);
}

.pill{
  display:inline-flex;align-items:center;gap:.5em;padding:6px 13px;border-radius:999px;
  background:var(--tint);border:1px solid var(--line-2);
  font-size:.76rem;font-weight:700;letter-spacing:.02em;color:var(--text-dim);
}
.pill-live{background:rgba(25,158,112,.14);border-color:rgba(25,158,112,.4);color:var(--green-lift)}
.pill-soon{background:rgba(229,184,75,.12);border-color:rgba(229,184,75,.38);color:var(--gold-ink)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(79,214,164,.55)}70%{box-shadow:0 0 0 9px rgba(79,214,164,0)}100%{box-shadow:0 0 0 0 rgba(79,214,164,0)}}

/* ---------- Hero ---------- */
.hero{position:relative;padding:clamp(50px,7vw,90px) 0 clamp(60px,8vw,110px);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:120%;
  background:
    radial-gradient(52% 46% at 22% 12%,rgba(57,135,229,.24),transparent 62%),
    radial-gradient(44% 40% at 82% 4%,rgba(229,184,75,.13),transparent 65%),
    radial-gradient(60% 50% at 50% 100%,rgba(25,158,112,.09),transparent 70%);
  pointer-events:none;
}
.hero .wrap{position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(28px,4vw,60px);align-items:center}
@media (max-width:980px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.hero h1 .em{
  background:var(--chrome-blue);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 14px rgba(57,135,229,.35));
}
.hero-note{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;color:var(--text-faint);font-size:.85rem;font-weight:600}
.hero-note span{display:inline-flex;align-items:center;gap:.45em}

/* Signal rings behind the phone */
.rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;overflow:hidden}
.rings i{
  position:absolute;border-radius:50%;border:1px solid rgba(57,135,229,.3);
  width:280px;height:280px;opacity:0;animation:ring 5.4s var(--ease-out) infinite;
}
.rings i:nth-child(2){animation-delay:1.8s}
.rings i:nth-child(3){animation-delay:3.6s}
@keyframes ring{0%{transform:scale(.55);opacity:0}22%{opacity:.75}100%{transform:scale(2.2);opacity:0}}

/* ---------- Phone frame ---------- */
.phone-stage{position:relative;display:grid;place-items:center;min-height:600px}
.phone{
  position:relative;width:min(330px,86vw);aspect-ratio:9/19.2;border-radius:44px;
  background:linear-gradient(170deg,#1B2740,#0C1322 60%);
  border:1px solid rgba(174,186,209,.24);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.95),0 0 0 8px rgba(11,17,32,.7),0 1px 0 rgba(255,255,255,.1) inset;
  padding:12px;z-index:2;
}
.phone::after{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);width:86px;height:22px;border-radius:14px;background:#070C16}
.screen{
  position:relative;height:100%;border-radius:33px;overflow:hidden;
  background:radial-gradient(90% 60% at 50% 0%,rgba(57,135,229,.18),transparent 60%),#0A101D;
  display:flex;flex-direction:column;padding:34px 11px 14px;gap:0;
}
.demo-ctl{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px;position:relative;z-index:3}
.demo-note{margin-top:12px;text-align:center;font-size:.76rem;color:var(--text-faint)}

/* ---------- Stat counters ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{background:var(--ink-2);padding:clamp(20px,2.6vw,30px);transition:background var(--t) var(--ease)}
.stat:hover{background:var(--ink-3)}
.stat .n{font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:800;letter-spacing:-.045em;color:var(--blue-lift);font-variant-numeric:tabular-nums;line-height:1}
.stat .l{margin-top:10px;font-size:.83rem;color:var(--text-dim);font-weight:650;line-height:1.45}
.stat .s{margin-top:6px;font-size:.74rem;color:var(--text-faint)}
.stat-blue .n{color:var(--blue-lift)}
.stat-green .n{color:var(--green-lift)}

/* ---------- Steps ---------- */
.steps{counter-reset:s;display:grid;gap:2px}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  padding:clamp(20px,2.6vw,30px);border:1px solid var(--line);border-radius:var(--radius);
  background:var(--ink-2);transition:background var(--t) var(--ease),border-color var(--t) var(--ease)}
.step:hover{background:var(--ink-3);border-color:var(--line-2)}
.step .num{
  counter-increment:s;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(57,135,229,.14);border:1px solid rgba(57,135,229,.34);color:var(--blue-lift);
  font-weight:800;font-size:1.02rem;font-variant-numeric:tabular-nums;
}
.step .num::before{content:"0" counter(s)}
.step h3{font-size:1.1rem;margin-bottom:.3em}
.step p{margin:0;color:var(--text-dim);font-size:.95rem}

/* ---------- Tile map ---------- */
.map-wrap{position:relative}
.tilemap{width:100%;height:auto;display:block}
.tile rect{
  fill:var(--ink-3);stroke:var(--line);stroke-width:1;rx:5;
  transition:fill var(--t-fast) var(--ease),stroke var(--t-fast) var(--ease);
}
.tile text{fill:var(--text-dim);font-size:9.4px;font-weight:800;text-anchor:middle;pointer-events:none;font-family:var(--font);letter-spacing:.02em}
.tile[data-c="one"] rect{fill:rgba(25,158,112,.26);stroke:rgba(25,158,112,.5)}
.tile[data-c="all"] rect{fill:rgba(229,184,75,.26);stroke:rgba(229,184,75,.55)}
.tile[data-c="mixed"] rect{fill:rgba(57,135,229,.26);stroke:rgba(57,135,229,.55)}
.tile{cursor:pointer}
.tile:hover rect{stroke:var(--text);stroke-width:2}
.tile:focus-visible rect{stroke:var(--gold);stroke-width:3}
.tile:focus-visible{outline:none}
.map-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px}
.map-legend span{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-dim);font-weight:650}
.map-legend i{width:13px;height:13px;border-radius:4px;display:block}
.sw-one{background:rgba(25,158,112,.5);border:1px solid rgba(25,158,112,.8)}
.sw-all{background:rgba(229,184,75,.5);border:1px solid rgba(229,184,75,.8)}
.sw-mixed{background:rgba(57,135,229,.5);border:1px solid rgba(57,135,229,.8)}
.map-detail{min-height:190px}
.map-detail .st{font-size:1.45rem;font-weight:800;letter-spacing:-.03em;margin:0 0 2px}
.map-detail .rule{font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.map-detail p{font-size:.92rem;color:var(--text-dim)}

/* ---------- Language ticker ---------- */
.ticker{display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-row{display:flex;gap:14px;width:max-content;animation:slide 42s linear infinite}
.ticker:hover .ticker-row{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.chip{
  padding:11px 20px;border-radius:999px;border:1px solid var(--line-2);background:var(--ink-2);
  font-weight:700;font-size:.95rem;white-space:nowrap;color:var(--text)
}
.chip small{display:block;font-size:.68rem;color:var(--text-faint);font-weight:650;letter-spacing:.04em}

/* ---------- Tables ---------- */
.tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--ink-2)}
table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px}
.tbl-kv{overflow:visible}
.tbl-kv table{min-width:0}
.tbl-kv td{white-space:normal;overflow-wrap:anywhere}
.tbl-kv td:first-child{width:26%;min-width:120px;font-weight:750;color:var(--text)}
@media (max-width:760px){.tbl-kv td{display:block;border-bottom:0;padding:4px 16px}
  .tbl-kv td:first-child{width:auto;padding-top:14px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-lift)}
  .tbl-kv tr{display:block;border-bottom:1px solid var(--line);padding-bottom:10px}}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-size:.725rem;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-lift);font-weight:800;background:rgba(57,135,229,.06)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--tint-faint)}
td .yes{color:var(--green-lift);font-weight:750}
td .no{color:var(--text-faint)}
tr.us td{background:rgba(57,135,229,.09)}
tr.us td:first-child{font-weight:800;color:var(--text)}

/* ---------- Commitments ---------- */
.commit{display:grid;gap:2px}
.commit-item{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;
  padding:18px 22px;border:1px solid var(--line);border-radius:14px;background:var(--ink-2);
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.commit-item:hover{border-color:var(--line-2);background:var(--ink-3)}
.commit-item .n{font-family:var(--mono);font-size:.8rem;color:var(--blue-lift);font-weight:700}
.commit-item p{margin:0;font-size:.98rem;font-weight:600;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.tag-lock{font-size:.725rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--green-lift);background:rgba(25,158,112,.14);border:1px solid rgba(25,158,112,.4);padding:5px 10px;border-radius:999px;white-space:nowrap}
@media (max-width:640px){.commit-item{grid-template-columns:auto minmax(0,1fr)}
  .commit-item .tag-lock{grid-column:2;justify-self:start;white-space:normal}}

/* ---------- FAQ ---------- */
.faq details{border:1px solid var(--line);border-radius:14px;background:var(--ink-2);margin-bottom:10px;overflow:hidden}
.faq summary{
  padding:18px 22px;cursor:pointer;font-weight:700;font-size:1rem;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center;transition:background var(--t-fast) var(--ease)}
.faq summary:hover{background:var(--tint-soft)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--gold-ink);font-weight:400;line-height:1;transition:transform var(--t-fast) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 22px 20px;color:var(--text-dim);font-size:.95rem}
.faq .ans p:last-child{margin-bottom:0}

/* ---------- Ecosystem ---------- */
.eco{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:900px){.eco{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.eco{grid-template-columns:1fr}}
.eco a{display:block;color:inherit}
.eco .card{height:100%;display:flex;flex-direction:column}
.eco .kind{font-size:.725rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--blue-lift);margin-bottom:10px;overflow-wrap:anywhere}
.eco h3{font-size:1.06rem}
.eco p{font-size:.88rem;color:var(--text-dim);margin-bottom:14px}
.eco .go{font-size:.78rem;font-weight:700;color:var(--blue-lift);overflow-wrap:anywhere;word-break:break-word;margin-top:auto}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,rgba(57,135,229,.28),var(--band-mid) 52%,rgba(229,184,75,.10));
  border:1px solid var(--line-2);padding:clamp(32px,5vw,68px);text-align:center;
}
.cta-band::after{
  content:"";position:absolute;left:0;right:0;bottom:-40%;height:70%;
  background:radial-gradient(60% 70% at 50% 0%,rgba(57,135,229,.28),transparent 72%);pointer-events:none;
}
.cta-band>*{position:relative}
.cta-band .stores,.cta-band .btn-row,.cta-band .qr-row{justify-content:center}
/* belt and braces: anything shrink-to-fit in the band centres as a block too */
.cta-band .btn-row,.cta-band .qr-row{margin-inline:auto}
.cta-band .lede{margin-inline:auto;font-size:clamp(1.15rem,1.9vw,1.55rem);color:var(--text);font-weight:650}
.qr-row{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.qr{background:#fff;padding:12px;border-radius:14px;width:132px;box-shadow:var(--shadow-qr)}
.qr img,.qr svg{width:100%;height:auto;display:block}
.qr-cap{margin-top:9px;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#0B1120;text-align:center}

/* ---------- Sticky mobile download bar ---------- */
.dockbar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--dock-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line-2);padding:11px var(--gutter);
  display:none;align-items:center;gap:12px;
  transform:translateY(110%);transition:transform var(--t) var(--ease);
  padding-bottom:calc(11px + env(safe-area-inset-bottom));
}
.dockbar.on{transform:none}
.dockbar .t{flex:1;min-width:0}
.dockbar .t b{display:block;font-size:.9rem;line-height:1.25}
.dockbar .t span{display:block;font-size:.72rem;color:var(--text-faint)}
@media (max-width:760px){.dockbar{display:flex}body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}}

/* ---------- Footer ---------- */
.ftr{border-top:1px solid var(--line);background:var(--ftr-bg);padding:clamp(48px,6vw,76px) 0 34px;margin-top:20px}
.ftr-grid{display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:34px}
.ftr-grid>*{min-width:0}
.ftr li a,.menu li a{overflow-wrap:anywhere}
small,.small{overflow-wrap:break-word}
@media (max-width:980px){.ftr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin:0 0 9px}
.ftr li a{color:var(--text-dim);font-size:.9rem}
.ftr li a:hover{color:var(--text)}
.ftr-brand p{font-size:.88rem;color:var(--text-faint);max-width:34ch}
.ftr-legal .attrib{font-size:.74rem;color:var(--text-faint);opacity:.8;max-width:88ch;margin-top:6px}
.ftr-legal{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center}
.ftr-legal p{margin:0;font-size:.78rem;color:var(--text-faint)}
.disclaimer{margin-top:20px;font-size:.76rem;color:var(--text-faint);line-height:1.6;max-width:88ch}
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--text-dim);transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.social a:hover{color:var(--gold-ink);border-color:var(--gold-ink)}
.social svg{width:17px;height:17px}

/* ---------- Reveal on scroll ---------- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
.js .rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}.rv-d4{transition-delay:.36s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .rv{opacity:1;transform:none}
  .ticker-row{animation:none}
}

/* ---------- Print ---------- */
@media print{
  /* Paper is white whatever the reader's theme is, so the light token set is
     the only one that can be printed. Without this the dark theme prints pale
     grey text on white and the footer disappears entirely. */
  html,html[data-theme="dark"],html[data-theme="light"]{
    --ink:#FFFFFF;--ink-2:#FFFFFF;--ink-3:#F4F6FA;--navy:#FFFFFF;
    --text:#0C1424;--text-dim:#33405A;--text-faint:#4A5670;
    --line:rgba(11,17,32,.22);--line-2:rgba(11,17,32,.35);
    --blue-lift:#14508F;--green-lift:#0B6A49;--gold-ink:#6B4A0C;--steel:#4A5670;
    --card-a:#FFFFFF;--card-b:#FFFFFF;--panel-b:#FFFFFF;--ftr-bg:#FFFFFF;
    --tint:transparent;--tint-soft:transparent;--tint-faint:transparent;
    --shadow:none;--shadow-lift:none;--shadow-pop:none;--shadow-qr:none;
    --gv-line:#14508F;--gv-fill:rgba(20,80,143,.12);--gv-grid:rgba(11,17,32,.2);
    --gv-ring:#FFFFFF;--gv-mark:rgba(107,74,12,.8);--gv-mark-t:#6B4A0C;
    --wm-dark:none;--wm-light:block;
  }
  /* The reveal animation is driven by an IntersectionObserver, and printing
     never scrolls. Without this, everything below the fold prints blank for a
     reader who hits Ctrl+P from the top of the page. */
  .js .rv{opacity:1;transform:none}
  body{background:#fff;color:var(--text)}
  .hdr,.dockbar,.menu,.cta-band,.demo-ctl{display:none!important}
  .card,.panel,.gv-wrap{border:1px solid #ccc;box-shadow:none;background:#fff}
  .ftr{background:#fff;border-top:1px solid #ccc}
  .gv-table[open] .tbl-scroll,.gv-table .tbl-scroll{max-height:none;overflow:visible}
}

/* ==========================================================================
   In-app UI — faithful recreation of the shipping SOS Active screen
   ========================================================================== */
.au{display:flex;flex-direction:column;gap:7px;height:100%;font-size:11px}
.au-bar{display:flex;justify-content:space-between;align-items:center;color:var(--text-faint);font-size:9.5px;font-weight:700;letter-spacing:.04em;padding:0 3px 2px}
.au-bar .sig{display:flex;gap:2.5px;align-items:flex-end}
.au-bar .sig i{width:2.5px;background:var(--steel);border-radius:1px;display:block}
.au-bar .sig i:nth-child(1){height:4px}.au-bar .sig i:nth-child(2){height:6px}
.au-bar .sig i:nth-child(3){height:8px}.au-bar .sig i:nth-child(4){height:10px}

.au-row{display:flex;justify-content:space-between;gap:4px;min-width:0}
.au-pill{
  display:inline-flex;align-items:center;gap:5px;padding:4.5px 9px;border-radius:999px;
  font-size:8.6px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;padding-inline:8px;min-width:0;
  border:1px solid transparent;transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.au-sos{background:rgba(208,59,59,.2);border-color:rgba(208,59,59,.55);color:#FF8B8B}
.au-sos i{width:6px;height:6px;border-radius:50%;background:#FF5A5A;animation:blink 1.15s steps(2,end) infinite}
@keyframes blink{50%{opacity:.15}}
.au-contacts{background:rgba(25,158,112,.16);border-color:rgba(25,158,112,.45);color:var(--green-lift)}

.au-cancel{
  display:block;width:100%;border:0;border-radius:9px;padding:8px 6px;
  background:linear-gradient(180deg,#F0C24E,#D9A227);color:#1A1405;
  font-weight:800;font-size:10.5px;letter-spacing:-.01em;
  box-shadow:0 6px 16px -8px rgba(229,184,75,.9);
}

/* Viewfinder */
.au-view{
  position:relative;border-radius:10px;overflow:hidden;aspect-ratio:16/10;
  border:1px solid rgba(174,186,209,.18);background:#05080F;
}
.au-scene{position:absolute;inset:0;overflow:hidden}
.au-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.9) saturate(.96) contrast(1.04);
  animation:pan 16s var(--ease) infinite alternate;transform-origin:52% 55%}
@keyframes pan{from{transform:scale(1.03) translateX(-4px)}to{transform:scale(1.09) translateX(6px)}}
.au-grain{position:absolute;inset:0;opacity:.3;mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px)}
.au-vig{position:absolute;inset:0;background:
  radial-gradient(86% 72% at 50% 46%,transparent 42%,rgba(2,5,10,.5) 100%),
  linear-gradient(180deg,rgba(2,5,10,.5),transparent 22%,transparent 62%,rgba(2,5,10,.62))}

.au-rec{position:absolute;top:7px;left:7px;display:inline-flex;align-items:center;gap:5px;
  padding:3.5px 8px 3.5px 6px;border-radius:6px;background:rgba(190,32,32,.9);
  font-size:8.4px;font-weight:900;letter-spacing:.14em;color:#fff}
.au-rec i{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.15s steps(2,end) infinite}
.au-time{position:absolute;top:7px;right:7px;padding:3.5px 7px;border-radius:6px;background:rgba(6,10,18,.72);
  font-family:var(--mono);font-size:9.4px;font-weight:700;color:#fff;letter-spacing:.04em}
.au-flip{position:absolute;right:8px;top:34px;width:24px;height:24px;border-radius:50%;border:0;
  background:rgba(6,10,18,.72);color:#E9EEF8;display:grid;place-items:center;font-size:11px;cursor:default}
.au-hash{
  position:absolute;left:6px;right:6px;bottom:6px;padding:3.5px 7px;border-radius:5px;
  background:rgba(4,8,14,.78);border:1px solid rgba(25,158,112,.28);
  font-family:var(--mono);font-size:7.6px;letter-spacing:.01em;color:#63D9A8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Waveform */
.au-wave{display:flex;align-items:flex-end;justify-content:center;gap:1.6px;height:20px;padding:0 4px}
.au-wave i{width:2.2px;border-radius:1px;background:linear-gradient(180deg,#7FE9C0,#199E70);height:12%;
  transform-origin:bottom;transition:height .12s linear}

/* Metadata grid */
.au-meta{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.au-cell{background:rgba(174,186,209,.06);border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.au-cell .k{font-size:7.6px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-faint);font-weight:800}
.au-cell .v{font-family:var(--mono);font-size:10px;color:var(--text);font-weight:700;margin-top:2px;white-space:nowrap}

/* Captions */
.au-cap{background:rgba(174,186,209,.06);border:1px solid var(--line);border-radius:8px;padding:6px 8px;min-height:52px}
.au-cap .hd{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.au-cap .live{display:inline-flex;align-items:center;gap:4px;padding:2.5px 6px;border-radius:999px;
  background:rgba(25,158,112,.18);border:1px solid rgba(25,158,112,.45);color:var(--green-lift);
  font-size:7.4px;font-weight:900;letter-spacing:.1em}
.au-cap .live i{width:4.5px;height:4.5px;border-radius:50%;background:currentColor;animation:blink 1.4s steps(2,end) infinite}
.au-cap .hd span{font-size:7.6px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-faint);font-weight:800}
.au-cap p{margin:0;font-size:9.6px;line-height:1.45;color:var(--text);min-height:2.9em}
.au-cap p .cur{display:inline-block;width:1.5px;height:.95em;background:var(--green-lift);vertical-align:-1px;animation:blink .9s steps(2,end) infinite}

/* Action buttons */
.au-acts{display:flex;flex-direction:column;gap:5px;margin-top:auto}
.au-btn{width:100%;border:1px solid transparent;border-radius:9px;padding:8px;font-size:10.4px;font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:6px;color:#fff}
.au-btn.red{background:linear-gradient(180deg,#E2504F,#C42F2E);box-shadow:0 6px 16px -8px rgba(208,59,59,.9)}
.au-btn.dark{background:var(--tint);border-color:var(--line-2);color:var(--text)}
.au-btn.seal{background:linear-gradient(180deg,#E2504F,#A8201F)}
.au-btn.sealed{background:linear-gradient(180deg,#28B583,#12855C);box-shadow:0 6px 18px -8px rgba(25,158,112,.95)}

/* Idle / armed variant */


/* ---------- Official brand mark ---------- */
.brand-mark{width:54px;height:54px;object-fit:contain;flex:none;
  filter:drop-shadow(0 2px 10px rgba(57,135,229,.45))}
.ftr-brand .brand-mark{width:62px;height:62px}

/* ---------- Tagline lockup ---------- */
.tagline{
  display:inline-block;margin:0 0 22px;font-size:clamp(1.02rem,2.1vw,1.6rem);
  font-weight:900;letter-spacing:.15em;text-transform:uppercase;line-height:1.35;
  background:var(--chrome-gold);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 6px rgba(229,184,75,.28));
  border-left:4px solid;border-image:var(--chrome-gold) 1;padding-left:18px;
}
.tagline-c{border-left:0;padding:0 0 10px;border-bottom:2px solid rgba(229,184,75,.5);margin-bottom:26px;font-size:clamp(1.1rem,2.4vw,1.8rem)}
.brand-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;gap:6px}
.brand-wordmark{display:block;width:auto;height:19px;object-fit:contain;filter:drop-shadow(0 1px 4px rgba(0,0,0,.55))}
.ftr-brand .brand-wordmark{height:22px}
@media (max-width:430px){.brand-wordmark{height:17px}}
.brand-tag{white-space:nowrap;font-size:.725rem;font-weight:900;letter-spacing:.088em;text-transform:uppercase;color:var(--gold-ink);margin-top:0}
@media (max-width:430px){.brand-tag{display:none}}
.ftr-brand .brand-tag{font-size:.75rem;white-space:normal;line-height:1.35}

/* ---------- Campaign quote ---------- */
.quote{
  font-size:clamp(2rem,5vw,3.6rem);font-weight:800;letter-spacing:-.035em;line-height:1.05;
  margin:.2em 0 .5em;
  background:var(--chrome-blue);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 16px rgba(57,135,229,.4));
}


/* ---------- On-page citations ---------- */
.cites{list-style:none;counter-reset:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.cites li{
  position:relative;padding-left:30px;font-size:.795rem;line-height:1.55;color:var(--text-faint);
  scroll-margin-top:100px;
}
.cites li span{
  position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;
  background:rgba(57,135,229,.14);border:1px solid rgba(57,135,229,.34);color:var(--blue-lift);
  font-size:.66rem;font-weight:800;
}
.cites li em{color:var(--text-dim);font-style:italic}
.cites li a{color:var(--blue-lift);overflow-wrap:anywhere}
.cites li:target{color:var(--text-dim)}
.cites li:target span{background:var(--gold);color:#10151F;border-color:var(--gold)}
.card .small a[href^="#c"]{color:var(--blue-lift);font-weight:800;text-decoration:none;white-space:nowrap}

.col-h{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px;font-weight:800;line-height:1.3;color:var(--blue-lift)}

/* screen-reader-only headings keep the document outline valid without visual noise */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.menu .col-h{letter-spacing:.18em}

/* ==========================================================================
   Responsive layer: phones, phablets, tablets, laptops, desktops
   Verified against 19 device profiles x 9 pages.
   ========================================================================== */

/* ---- Legibility floor. Nothing drops below ~11.5px on any device ---- */
@media (max-width:1024px){
  .brand-tag{letter-spacing:.11em}
  .col-h{font-size:.78rem}
  .store .lbl{font-size:.75rem}
  .store .free{font-size:.72rem}
  .eyebrow{font-size:.78rem}
  .small,.cites li{font-size:.9rem}
  .stat .s,.card .small{font-size:.88rem}
  .qr-cap{font-size:.76rem}
}
@media (max-width:420px){
  body{font-size:16.5px}
  .col-h{font-size:.78rem}
  .store .lbl{font-size:.76rem}
  .store .free{font-size:.74rem;padding:5px 10px 6px}
}

/* ---- Touch targets. 44px minimum on any coarse pointer ---- */
@media (any-pointer:coarse),(max-width:900px){
  .ftr li a,.menu li a{
    display:flex;align-items:center;min-height:44px;padding-block:4px;
  }
  .ftr li{margin:0}
  .ftr-legal a{display:inline-flex;align-items:center;min-height:44px;padding-inline:2px}
  .ftr-legal p{display:flex;flex-wrap:wrap;gap:0 10px;align-items:center}
  .social{gap:12px;flex-wrap:wrap}
  .social a{width:46px;height:46px;min-width:46px;flex:none}
  .nav a{min-height:44px;display:inline-flex;align-items:center}
  .faq summary{min-height:52px}
  .btn,.btn-sm{min-height:46px}
  .lang-btn{min-height:44px;min-width:44px;justify-content:center}
  .store{min-height:60px}
  .tile{stroke-width:0}
}

/* ---- Tablet: two-up grids read better than three or four ---- */
@media (min-width:641px) and (max-width:900px){
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eco{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- Landscape phones: reclaim vertical space ---- */
@media (max-height:520px) and (orientation:landscape){
  .hdr .bar{height:60px}
  .brand-mark{width:40px;height:40px}
  .brand-wordmark{height:16px}
  .brand-tag{display:none}
  .hero{padding-block:32px 44px}
  .sec{padding-block:clamp(40px,6vw,72px)}
  .menu{padding-top:72px}
  .phone-stage{min-height:auto}
  .phone{width:min(260px,60vw)}
}

/* ---- Large screens: hold the measure, let the art breathe ---- */
@media (min-width:1600px){
  :root{--maxw:1280px}
  html{font-size:106.25%}
  .wrap-wide{max-width:1480px}
  .hero-grid{gap:clamp(40px,4vw,88px)}
}
@media (min-width:2000px){
  html{font-size:112.5%}
  .wrap-wide{max-width:1560px}
}

/* ---- Foldables and very narrow phones ---- */
@media (max-width:340px){
  :root{--gutter:16px}
  .phone{width:min(280px,92vw)}
  .stores{gap:10px}
  .store{padding:12px 16px;min-width:100%}
}

/* ---- Respect the notch and the home indicator ---- */
@supports (padding:max(0px)){
  .wrap{padding-left:max(var(--gutter),env(safe-area-inset-left));
        padding-right:max(var(--gutter),env(safe-area-inset-right))}
}

/* ---- Print: one clean pass ---- */
@media print{
  .dockbar,.demo-ctl,.phone-stage,.ticker{display:none!important}
  .wrap,.wrap-wide{max-width:100%}
}

/* ==========================================================================
   Localization: language switcher, and right-to-left support
   ========================================================================== */

.langs{position:relative}
.lang-btn{
  display:inline-flex;align-items:center;gap:7px;background:transparent;
  border:1px solid var(--line-2);border-radius:999px;padding:9px 14px;cursor:pointer;
  color:var(--text-dim);font-weight:700;font-size:.86rem;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.lang-btn:hover{color:var(--text);border-color:var(--steel)}
.lang-btn svg{width:16px;height:16px;flex:none}
.lang-btn[aria-expanded="true"]{color:var(--text);border-color:var(--blue-lift)}
.lang-list{
  position:absolute;inset-inline-end:0;top:calc(100% + 10px);z-index:120;
  min-width:210px;max-height:min(70vh,420px);overflow-y:auto;
  list-style:none;margin:0;padding:6px;
  background:var(--pop-bg);backdrop-filter:blur(18px);
  border:1px solid var(--line-2);border-radius:14px;
  box-shadow:var(--shadow-pop);
}
.lang-list[hidden]{display:none}
.lang-list li{margin:0}
.lang-list a{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 12px;border-radius:9px;color:var(--text);font-size:1rem;font-weight:650;
  min-height:44px;
}
.lang-list a:hover{background:rgba(57,135,229,.14);color:var(--text)}
.lang-list a[aria-current="true"]{background:rgba(57,135,229,.18);color:var(--blue-lift)}
.lang-list a[aria-current="true"]::after{content:"✓";color:var(--blue-lift);font-weight:800}
.lang-en{font-size:.78rem;color:var(--text-faint);font-weight:600}
@media (max-width:560px){
  .lang-btn span{display:none}
  .lang-btn{padding:9px 11px}
  .lang-list{inset-inline-end:auto;inset-inline-start:50%;transform:translateX(-50%);min-width:200px}
}
[dir="rtl"] .lang-list{transform:none}

/* ---- Right to left ---------------------------------------------------- */
[dir="rtl"] .eyebrow::before{background:linear-gradient(270deg,var(--blue-lift),transparent)}
[dir="rtl"] .tagline{border-left:0;border-right:4px solid;border-image:var(--chrome-gold) 1;
  padding-left:0;padding-right:18px}
[dir="rtl"] .tagline-c{border-right:0;padding-right:0}
[dir="rtl"] .cites li{padding-left:0;padding-right:30px}
[dir="rtl"] .cites li span{left:auto;right:0}
[dir="rtl"] .step{grid-template-columns:auto 1fr}
[dir="rtl"] .au-rec{left:auto;right:7px}
[dir="rtl"] .au-time{right:auto;left:7px}
[dir="rtl"] .au-flip{right:auto;left:8px}
[dir="rtl"] .skip{border-radius:0 0 0 10px}
[dir="rtl"] .card .small a[href^="#c"]{direction:ltr;display:inline-block}
[dir="rtl"] .mono,[dir="rtl"] .au-hash,[dir="rtl"] .au-cell .v{direction:ltr;text-align:right}
[dir="rtl"] .ticker-row{animation-direction:reverse}
/* Latin brand assets and the phone mockup keep their own direction */
[dir="rtl"] .brand,[dir="rtl"] .store,[dir="rtl"] .au,[dir="rtl"] .qr-row{direction:ltr}
[dir="rtl"] .brand-txt,[dir="rtl"] .brand-tag{text-align:left}
[dir="rtl"] .au-cap p,[dir="rtl"] .au-cancel{direction:rtl}
/* Arabic and Hindi need a little more line height to breathe */
[lang="ar"] body,[lang="hi"] body{line-height:1.8}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,
[lang="hi"] h1,[lang="hi"] h2,[lang="hi"] h3{line-height:1.35;letter-spacing:0}
/* Tracking is a Latin-display device. In Arabic it severs the cursive join and
   in Devanagari it breaks the shirorekha, so every tracked micro-label resets. */
[lang="ar"] .eyebrow,[lang="hi"] .eyebrow,
[lang="ar"] .brand-tag,[lang="hi"] .brand-tag,
[lang="ar"] .tagline,[lang="hi"] .tagline,
[lang="ar"] .kind,[lang="hi"] .kind,
[lang="ar"] .qr-cap,[lang="hi"] .qr-cap,
[lang="ar"] .au-pill,[lang="hi"] .au-pill,
[lang="ar"] .chip,[lang="hi"] .chip,
[lang="ar"] .tag-lock,[lang="hi"] .tag-lock,
[lang="ar"] .map-detail .rule,[lang="hi"] .map-detail .rule,
[lang="ar"] thead th,[lang="hi"] thead th,
[lang="ar"] .lbl,[lang="hi"] .lbl,
[lang="ar"] .free,[lang="hi"] .free,
[lang="ar"] .tbl-kv td:first-child,[lang="hi"] .tbl-kv td:first-child{letter-spacing:0}
/* Korean breaks at any character by default, which splits words mid-eojeol. */
[lang="ko"]{word-break:keep-all;overflow-wrap:break-word}
/* Japanese and Chinese need kinsoku: a line may not open with a small kana,
   a long-vowel mark, or closing punctuation. */
[lang="ja"],[lang="zh-Hans"]{line-break:strict}
[lang="ar"]{font-size:1.03em}
/* CJK: tighter tracking reads better, and no forced letter-spacing */
[lang="zh-Hans"] h1,[lang="ja"] h1,[lang="ko"] h1,
[lang="zh-Hans"] h2,[lang="ja"] h2,[lang="ko"] h2{letter-spacing:0;line-height:1.3}
[lang="zh-Hans"] .eyebrow,[lang="ja"] .eyebrow,[lang="ko"] .eyebrow,
[lang="zh-Hans"] .tagline,[lang="ja"] .tagline,[lang="ko"] .tagline{letter-spacing:.08em}


/* ==========================================================================
   Daylight theme
   --------------------------------------------------------------------------
   Guardian Ink is the brand, so dark stays the identity and daylight is the
   same design system restated for a white page. Only the neutral tokens move.
   The brand hues do not: blue is still blue, gold is still gold. What changes
   is which end of each ramp is legible, so three tokens get daylight values
   (--blue-lift, --green-lift, --gold-ink) and the two chrome gradients get
   darker stops, because a gradient built to glow on ink is invisible on paper.

   `html[data-theme="light"]` is the explicit choice. The media query below it
   covers the first visit before any choice exists, and covers a visitor with
   JavaScript off, which is why it is scoped to :not([data-theme]).
   ========================================================================== */


html[data-theme="light"]{
  color-scheme: light;

  --ink:        #F6F8FD;
  --ink-2:      #FFFFFF;
  --ink-3:      #EDF2FB;
  --navy:       #FFFFFF;
  --steel:      #5B6A85;

  /* Contrast-tuned against #F6F8FD and #FFFFFF, validated by tools/contrast.py */
  --blue-lift:  #1A5FB8;
  --green-lift: #0B7551;
  --gold-ink:   #7A5510;
  --link-hover: #12468A;

  --chrome-blue: linear-gradient(96deg,#123C79 2%,#1A5FB8 26%,#2665AE 52%,#14508F 74%,#1D5FB4 100%);
  --chrome-gold: linear-gradient(96deg,#6B4A0C 2%,#9A6F14 30%,#7A5510 52%,#B4841E 74%,#8A6410 100%);

  --line:       rgba(11,17,32,.11);
  --line-2:     rgba(11,17,32,.20);
  --text:       #0C1424;
  --text-dim:   #3E4C66;
  --text-faint: #55637C;

  --shadow:     0 1px 0 rgba(255,255,255,.9) inset, 0 12px 30px -18px rgba(11,17,32,.30);
  --shadow-lift:0 1px 0 rgba(255,255,255,1) inset, 0 22px 48px -22px rgba(11,17,32,.38);
  --shadow-pop: 0 24px 50px -20px rgba(11,17,32,.34);
  --shadow-qr:  0 16px 34px -18px rgba(11,17,32,.30);

  --card-a:     #FFFFFF;
  --card-b:     #FAFCFF;
  --panel-b:    #F4F8FE;
  --tint:       rgba(11,17,32,.055);
  --tint-soft:  rgba(11,17,32,.035);
  --tint-faint: rgba(11,17,32,.022);
  --hdr-bg:     rgba(246,248,253,.78);
  --hdr-bg-on:  rgba(246,248,253,.94);
  --menu-bg:    rgba(246,248,253,.985);
  --pop-bg:     rgba(255,255,255,.99);
  --dock-bg:    rgba(255,255,255,.95);
  --ftr-bg:     #EBF0F9;
  --band-mid:   rgba(255,255,255,.62);
  --glow:       .45;

  --wm-dark:    none;
  --wm-light:   block;
}
@media (prefers-color-scheme:light){ html:not([data-theme]){
  color-scheme: light;

  --ink:        #F6F8FD;
  --ink-2:      #FFFFFF;
  --ink-3:      #EDF2FB;
  --navy:       #FFFFFF;
  --steel:      #5B6A85;

  /* Contrast-tuned against #F6F8FD and #FFFFFF, validated by tools/contrast.py */
  --blue-lift:  #1A5FB8;
  --green-lift: #0B7551;
  --gold-ink:   #7A5510;
  --link-hover: #12468A;

  --chrome-blue: linear-gradient(96deg,#123C79 2%,#1A5FB8 26%,#2665AE 52%,#14508F 74%,#1D5FB4 100%);
  --chrome-gold: linear-gradient(96deg,#6B4A0C 2%,#9A6F14 30%,#7A5510 52%,#B4841E 74%,#8A6410 100%);

  --line:       rgba(11,17,32,.11);
  --line-2:     rgba(11,17,32,.20);
  --text:       #0C1424;
  --text-dim:   #3E4C66;
  --text-faint: #55637C;

  --shadow:     0 1px 0 rgba(255,255,255,.9) inset, 0 12px 30px -18px rgba(11,17,32,.30);
  --shadow-lift:0 1px 0 rgba(255,255,255,1) inset, 0 22px 48px -22px rgba(11,17,32,.38);
  --shadow-pop: 0 24px 50px -20px rgba(11,17,32,.34);
  --shadow-qr:  0 16px 34px -18px rgba(11,17,32,.30);

  --card-a:     #FFFFFF;
  --card-b:     #FAFCFF;
  --panel-b:    #F4F8FE;
  --tint:       rgba(11,17,32,.055);
  --tint-soft:  rgba(11,17,32,.035);
  --tint-faint: rgba(11,17,32,.022);
  --hdr-bg:     rgba(246,248,253,.78);
  --hdr-bg-on:  rgba(246,248,253,.94);
  --menu-bg:    rgba(246,248,253,.985);
  --pop-bg:     rgba(255,255,255,.99);
  --dock-bg:    rgba(255,255,255,.95);
  --ftr-bg:     #EBF0F9;
  --band-mid:   rgba(255,255,255,.62);
  --glow:       .45;

  --wm-dark:    none;
  --wm-light:   block;
} }

/* --- Pieces that need more than a token swap ---------------------------- */
html[data-theme="light"] .hero::before{opacity:.55}
html[data-theme="light"] .cta-band::after{opacity:.5}
html[data-theme="light"] .rings i{border-color:rgba(46,114,201,.30)}
html[data-theme="light"] .brand-wordmark{filter:none}
html[data-theme="light"] .store{border-color:rgba(11,17,32,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 -14px 26px -18px rgba(11,17,32,.16) inset,
             0 12px 28px -14px rgba(11,17,32,.30),0 0 0 0 rgba(127,182,245,0)}
html[data-theme="light"] .store:hover, html[data-theme="light"] .store:focus-visible{
  box-shadow:0 1px 0 rgba(255,255,255,1) inset,0 -14px 26px -18px rgba(11,17,32,.14) inset,
             0 20px 40px -16px rgba(11,17,32,.34),0 0 40px -8px rgba(57,135,229,.35)}
html[data-theme="light"] .qr{border:1px solid var(--line)}
html[data-theme="light"] .brand-mark{filter:drop-shadow(0 2px 8px rgba(57,135,229,.28))}
html[data-theme="light"] .tagline{filter:none}
html[data-theme="light"] .quote, html[data-theme="light"] .hero h1 .em{filter:none}
html[data-theme="light"] .ticker{mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
html[data-theme="light"] .tile[data-c="one"] rect{fill:rgba(25,158,112,.20);stroke:rgba(25,158,112,.6)}
html[data-theme="light"] .tile[data-c="all"] rect{fill:rgba(197,150,40,.24);stroke:rgba(160,120,25,.65)}
html[data-theme="light"] .tile[data-c="mixed"] rect{fill:rgba(57,135,229,.18);stroke:rgba(46,114,201,.6)}
html[data-theme="light"] .sw-all{background:rgba(197,150,40,.45);border-color:rgba(160,120,25,.9)}
html[data-theme="light"] thead th{background:rgba(57,135,229,.08)}
html[data-theme="light"] tr.us td{background:rgba(57,135,229,.10)}
html[data-theme="light"] .stat{background:var(--ink-2)}
html[data-theme="light"] .stat:hover{background:var(--ink-3)}
html[data-theme="light"] .skip{color:#0B1120}
html[data-theme="light"] .btn-gold{box-shadow:0 10px 26px -14px rgba(184,140,40,.75)}
html[data-theme="light"] .tag-lock{background:rgba(11,117,81,.10);border-color:rgba(11,117,81,.35)}
html[data-theme="light"] .pill-live{background:rgba(11,117,81,.10);border-color:rgba(11,117,81,.35)}
html[data-theme="light"] .pill-soon{background:rgba(154,111,20,.12);border-color:rgba(154,111,20,.34)}
html[data-theme="light"] .card-green .ic{background:rgba(11,117,81,.10);border-color:rgba(11,117,81,.30)}
html[data-theme="light"] .card-gold .ic{background:rgba(154,111,20,.11);border-color:rgba(154,111,20,.30)}
html[data-theme="light"] .phone{
  --text:#E9EEF8; --text-dim:#AEBAD1; --text-faint:#7C8AA5; --steel:#AEBAD1;
  --line:rgba(174,186,209,.14); --line-2:rgba(174,186,209,.28);
  --green-lift:#4FD6A4; --tint:rgba(174,186,209,.09);
  box-shadow:0 40px 90px -34px rgba(11,17,32,.55),0 0 0 8px rgba(11,17,32,.10),0 1px 0 rgba(255,255,255,.1) inset;
}

@media (prefers-color-scheme:light){
html:not([data-theme]) .hero::before{opacity:.55}
html:not([data-theme]) .cta-band::after{opacity:.5}
html:not([data-theme]) .rings i{border-color:rgba(46,114,201,.30)}
html:not([data-theme]) .brand-wordmark{filter:none}
html:not([data-theme]) .store{border-color:rgba(11,17,32,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 -14px 26px -18px rgba(11,17,32,.16) inset,
             0 12px 28px -14px rgba(11,17,32,.30),0 0 0 0 rgba(127,182,245,0)}
html:not([data-theme]) .store:hover, html:not([data-theme]) .store:focus-visible{
  box-shadow:0 1px 0 rgba(255,255,255,1) inset,0 -14px 26px -18px rgba(11,17,32,.14) inset,
             0 20px 40px -16px rgba(11,17,32,.34),0 0 40px -8px rgba(57,135,229,.35)}
html:not([data-theme]) .qr{border:1px solid var(--line)}
html:not([data-theme]) .brand-mark{filter:drop-shadow(0 2px 8px rgba(57,135,229,.28))}
html:not([data-theme]) .tagline{filter:none}
html:not([data-theme]) .quote, html:not([data-theme]) .hero h1 .em{filter:none}
html:not([data-theme]) .ticker{mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
html:not([data-theme]) .tile[data-c="one"] rect{fill:rgba(25,158,112,.20);stroke:rgba(25,158,112,.6)}
html:not([data-theme]) .tile[data-c="all"] rect{fill:rgba(197,150,40,.24);stroke:rgba(160,120,25,.65)}
html:not([data-theme]) .tile[data-c="mixed"] rect{fill:rgba(57,135,229,.18);stroke:rgba(46,114,201,.6)}
html:not([data-theme]) .sw-all{background:rgba(197,150,40,.45);border-color:rgba(160,120,25,.9)}
html:not([data-theme]) thead th{background:rgba(57,135,229,.08)}
html:not([data-theme]) tr.us td{background:rgba(57,135,229,.10)}
html:not([data-theme]) .stat{background:var(--ink-2)}
html:not([data-theme]) .stat:hover{background:var(--ink-3)}
html:not([data-theme]) .skip{color:#0B1120}
html:not([data-theme]) .btn-gold{box-shadow:0 10px 26px -14px rgba(184,140,40,.75)}
html:not([data-theme]) .tag-lock{background:rgba(11,117,81,.10);border-color:rgba(11,117,81,.35)}
html:not([data-theme]) .pill-live{background:rgba(11,117,81,.10);border-color:rgba(11,117,81,.35)}
html:not([data-theme]) .pill-soon{background:rgba(154,111,20,.12);border-color:rgba(154,111,20,.34)}
html:not([data-theme]) .card-green .ic{background:rgba(11,117,81,.10);border-color:rgba(11,117,81,.30)}
html:not([data-theme]) .card-gold .ic{background:rgba(154,111,20,.11);border-color:rgba(154,111,20,.30)}
html:not([data-theme]) .phone{
  --text:#E9EEF8; --text-dim:#AEBAD1; --text-faint:#7C8AA5; --steel:#AEBAD1;
  --line:rgba(174,186,209,.14); --line-2:rgba(174,186,209,.28);
  --green-lift:#4FD6A4; --tint:rgba(174,186,209,.09);
  box-shadow:0 40px 90px -34px rgba(11,17,32,.55),0 0 0 8px rgba(11,17,32,.10),0 1px 0 rgba(255,255,255,.1) inset;
}
}

/* --- The toggle -------------------------------------------------------- */
/* Hidden without JavaScript: it cannot do anything there, and the media query
   above already gives those visitors the right theme. */
.theme-btn{display:none}
.js .theme-btn{
  display:inline-grid;place-items:center;width:36px;height:36px;flex:none;
  background:transparent;border:1px solid var(--line-2);border-radius:999px;cursor:pointer;
  color:var(--text-dim);
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.theme-btn:hover{color:var(--text);border-color:var(--steel);background:var(--tint)}
.theme-btn svg{width:18px;height:18px;display:block}
.theme-btn .i-sun{display:none}
.theme-btn .i-moon{display:block}
html[data-theme="light"] .theme-btn .i-sun{display:block}
html[data-theme="light"] .theme-btn .i-moon{display:none}
@media (prefers-color-scheme:light){
  html:not([data-theme]) .theme-btn .i-sun{display:block}
  html:not([data-theme]) .theme-btn .i-moon{display:none}
}
@media (any-pointer:coarse),(max-width:900px){.js .theme-btn{width:44px;height:44px}}
/* in the menu footer it sits beside the language switcher as a labelled control */
.menu-foot .theme-btn{width:auto;height:auto;padding:10px 16px;gap:9px;grid-auto-flow:column;
  min-height:44px;font-weight:700;font-size:.88rem}

/* the two wordmarks: exactly one is in the accessibility tree at a time */
.brand-wordmark[data-wm="dark"]{display:var(--wm-dark)}
.brand-wordmark[data-wm="light"]{display:var(--wm-light)}

@media print{
  body{background:#fff;color:#000}
}


/* ==========================================================================
   Guardian growth
   --------------------------------------------------------------------------
   One series, so one hue and no legend: the caption already says what is
   plotted. The line and fill are tokens rather than literals, because a mark
   needs 3:1 against its surface and the surface changes with the theme.
   ========================================================================== */
:root{
  --gv-line:  #7FB6F5;   /* 8.89:1 on ink, far past the 3:1 a mark needs */
  --gv-fill:  rgba(127,182,245,.14);
  --gv-grid:  rgba(174,186,209,.16);
  --gv-ring:  var(--ink-2);
  --gv-mark:  rgba(229,184,75,.55);
  --gv-mark-t:#E5B84B;
}

.gv-wrap{
  background:linear-gradient(180deg,var(--card-a),var(--card-b));
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(20px,3vw,36px);box-shadow:var(--shadow);
}

/* KPI row: the headline numbers are the story, the curve is the evidence */
.gv-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-bottom:clamp(22px,3vw,34px)}
@media (max-width:720px){.gv-kpi{grid-template-columns:1fr;gap:18px}}
.gv-stat{min-width:0}
.gv-n{font-size:clamp(2rem,4vw,3.1rem);font-weight:800;letter-spacing:-.045em;line-height:1;
  color:var(--blue-lift);font-variant-numeric:tabular-nums}
.gv-up{color:var(--green-lift)}
.gv-l{margin-top:9px;font-size:.95rem;font-weight:700;color:var(--text)}
.gv-s{margin-top:4px;font-size:.83rem;color:var(--text-faint);line-height:1.5}

.gv{margin:0}
.gv-cap{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin-bottom:12px}
.gv-title{font-size:.9rem;font-weight:750;color:var(--text)}
.gv-range{font-size:.8rem;color:var(--text-faint)}
/* The plot runs earliest-on-the-left in every locale, and SVG resolves
   text-anchor against the inline base direction, so an inherited dir="rtl"
   flipped every axis tick and both milestone labels onto the wrong side of
   their own gridlines. */
.gv-svg{width:100%;height:auto;aspect-ratio:920/300;display:block;overflow:visible;direction:ltr}
.gv-grid{stroke:var(--gv-grid);stroke-width:1;shape-rendering:crispEdges}
.gv-tick{fill:var(--text-faint);font-size:12px;font-family:var(--font);font-variant-numeric:tabular-nums}
.gv-mark{stroke:var(--gv-mark);stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.gv-mark-t{fill:var(--gv-mark-t);font-size:11.5px;font-family:var(--font);font-weight:800;
  letter-spacing:.06em;text-transform:uppercase}
.gv-area{fill:var(--gv-fill)}
.gv-line{fill:none;stroke:var(--gv-line);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke}
/* a connector between two measured points, not a measured path */
.gv-line.is-provisional{stroke-dasharray:7 6;stroke-width:2}
.gv-pt{fill:var(--gv-line);stroke:var(--gv-ring);stroke-width:2;vector-effect:non-scaling-stroke}
.gv-prov{margin:12px 0 0;color:var(--text-dim);font-weight:600}
.gv-ring{fill:var(--gv-ring)}          /* 2px surface ring, so the dot stays legible */
.gv-dot{fill:var(--gv-line)}
/* "+986" is a signed quantity: the leading + is bidi-neutral and moves to the
   trailing side inside an Arabic paragraph without this. */
.gv-n{unicode-bidi:isolate;direction:ltr}
.gv-read{margin:12px 0 0;min-height:1.5em;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.gv-src{margin:6px 0 0;font-size:.76rem;color:var(--text-faint)}
/* readout marks: hidden until the chart is being read, pointer or keyboard */
.gv-cross,.gv-hit{opacity:0;transition:opacity var(--t-fast) var(--ease)}
.gv-svg.is-reading .gv-cross,.gv-svg.is-reading .gv-hit{opacity:1}
.gv-cross{stroke:var(--gv-line);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.gv-hit{fill:var(--gv-line);stroke:var(--gv-ring);stroke-width:2;vector-effect:non-scaling-stroke}
.gv-svg:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:8px}
#growth{scroll-margin-top:96px}

.gv-table{margin-top:18px}
.gv-table summary{cursor:pointer;font-size:.85rem;font-weight:700;color:var(--blue-lift);
  list-style:none;display:inline-flex;align-items:center;gap:.45em;min-height:44px}
.gv-table summary::-webkit-details-marker{display:none}
.gv-table summary::after{content:"+";font-size:1.1rem;font-weight:400;line-height:1;
  transition:transform var(--t-fast) var(--ease)}
.gv-table[open] summary::after{transform:rotate(45deg)}
.gv-table table{min-width:0}
.gv-table .tbl-scroll{margin-top:10px;max-height:340px;overflow:auto}
.gv-table .tbl-scroll:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

@media (max-width:520px){
  /* the viewBox scales down uniformly now, so the type scales up to compensate */
  .gv-tick{font-size:16px}
  .gv-mark-t{font-size:15px}
}

/* The mark needs 3:1 against the surface, and the surface is white here. */
html[data-theme="light"]{--gv-line:#1A5FB8;--gv-fill:rgba(26,95,184,.10);--gv-grid:rgba(11,17,32,.12);--gv-ring:#FFFFFF;--gv-mark:rgba(122,85,16,.85);--gv-mark-t:#7A5510}
@media (prefers-color-scheme:light){
  html:not([data-theme]){--gv-line:#1A5FB8;--gv-fill:rgba(26,95,184,.10);--gv-grid:rgba(11,17,32,.12);--gv-ring:#FFFFFF;--gv-mark:rgba(122,85,16,.85);--gv-mark-t:#7A5510}
}