/* Spider VPN — the public page.
 *
 * The components here are the Mini App's, not new ones. Every measurement in
 * this file that matters — the newsprint and its 8px halftone, the masthead's
 * conic burst and torn edge, the peach spike behind the wordmark, the cream
 * row with its ink outline and hard offset, the cyan icon cell, the ink strip
 * with a red offset over each section — is copied from
 * `assets/smash-demo-v3.css`, which is what the app actually renders. A reader
 * who opens the Mini App after this page should find the same objects there.
 *
 * What is not copied is the arrangement. The app is a 620px column held in a
 * hand; this is read on a laptop, so the hero is a two-column panel — the
 * argument and the action on one side, the cover on the other — and the
 * sections below are wide lists rather than a stack.
 *
 * Every font and image is same-origin. The page is served under
 * `default-src 'self'`, so a webfont host would silently fail to load — and
 * Spider is the one face here that carries Cyrillic, which is the language
 * this page is written in. Comic Neue has none and falls through the body
 * stack to the system UI face, exactly as it does in the Mini App.
 */

@font-face {
  font-family: Spider;
  src: url('/webapp/assets/SpiderDisplay-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Comic Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/webapp/assets/ComicNeue-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Comic Neue';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/webapp/assets/ComicNeue-Bold.woff2') format('woff2');
}

:root {
  --font-ui: "Comic Neue", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: Spider, Impact, "Arial Black", sans-serif;

  /* Straight out of the Mini App. */
  --ink: #090b0c;
  --news: #f8dda4;
  --paper: #fff3c9;
  --cyan: #58e8ee;
  --red: #e32932;
  --red-lit: #ff343c;
  --red-deep: #ca0d20;
  --peach: #ff9d70;
  --yellow: #ffd34f;
  --muted: #675a51;
  --muted-2: #42342d;

  /* Two tones of everything, so nothing on the page is a flat fill. */
  --night: #160e29;
  --night-lit: #2a1750;
  --night-deep: #0d0719;
  --violet: #7b3fd4;
  --magenta: #c1379a;
  /* The masthead's rays, and the default set. Warm red-orange was tried here
     and does not work: on a deep-violet page it is a straight complementary
     clash, and the burst reads as a sticker from another brand. Everything
     below stays inside violet's own family — magenta, indigo, pink, plum — so
     the burst is the loud end of the page's own colour rather than a fight
     with it. The five presets are in [data-cover] further down. */
  --ray-lit: #e8479f;
  --ray-deep: #6d24a6;
  --ray-glow: rgba(255, 176, 206, .5);
  --spike: #ff9d70;
  /* The wordmark's accent letters sit ON the spike, so it cannot be a fixed
     colour: two of the presets use a cyan spike, and cyan-on-cyan makes half
     the logo vanish. Each preset names an accent that contrasts with its own
     spike. */
  --word: var(--cyan);
  --text-lit: #ded3f0;
  --text-dim: #a396bd;
  --paper-lit: #fffbee;
  --paper-deep: #f6e4b2;
  --cyan-lit: #8df4f8;
  --cyan-deep: #22c9d4;
  --red-warm: #ff4b45;
  --red-dark: #b8121c;
  --peach-lit: #ffb894;
  --peach-deep: #f4784f;

  --border: 4px solid var(--ink);
  --border-3: 3px solid var(--ink);
  /* The hard ink offset is the comic; the soft warm drop under it is what
     stops a page of flat fills reading as clip art. Both, always. */
  --shadow: 6px 7px 0 var(--ink), 14px 20px 34px rgba(6, 2, 16, .55);
  --shadow-sm: 4px 4px 0 var(--ink), 8px 12px 22px rgba(6, 2, 16, .45);
  --lit-cyan: linear-gradient(155deg, var(--cyan-lit), var(--cyan) 52%, var(--cyan-deep));
  --lit-red: linear-gradient(150deg, var(--red-warm), var(--red) 56%, var(--red-dark));
  --lit-peach: linear-gradient(150deg, var(--peach-lit), var(--peach) 54%, var(--peach-deep));
  --lit-paper: linear-gradient(168deg, var(--paper-lit), var(--paper) 52%, var(--paper-deep));
  --gutter: clamp(16px, 4vw, 56px);
  --measure: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* The bar is sticky: without this every in-page anchor lands with its heading
   underneath it. */
[id] { scroll-margin-top: 96px; }

body {
  margin: 0;
  color: var(--text-lit);
  background: var(--night);
  font: 16px/1.55 var(--font-ui);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

/* The sky, in two fixed layers behind everything: a warm range from cream at
   the top to a deep peach at the foot with two coloured glows across it, then
   the halftone printed over the whole thing. Fixed rather than scrolling, so
   it costs one composited layer and nothing repaints as the page moves. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* One sky for the whole page, and the page turns it.
 *
 * This was two things before and both were wrong. It started as a fixed base
 * plus a wash per section, and every section boundary was a hard line where
 * one wash stopped and the next began — the seams. Replacing that with a
 * single animated layer removed the seams but introduced a worse fault: it
 * animated `background`, and a layered set of radial gradients is re-rastered
 * by the CPU on *every frame* it changes. Four gradients across a full
 * viewport, re-drawn on every scroll tick, is exactly the jerk you feel.
 *
 * Nothing animates `background` here. Two static fields are stacked, and the
 * only animated properties are `transform` and `opacity` — the two the
 * compositor can interpolate on its own thread without repainting anything.
 * Movement and rotation come from the transform on the lower field; the colour
 * change comes from cross-fading the upper one over it. The result is the same
 * effect, carried by the GPU.
 *
 * `inset: -45%` with a scale that never drops below 1 is what keeps the
 * rotation safe: no corner of either field can swing into view. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -45%;
  z-index: -1;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
/* The field the page starts in: violet high on the left, a cold edge to the
   right, a warm one at the foot. */
body::before {
  background:
    radial-gradient(44% 32% at 18% 8%, rgba(140, 66, 255, .95), transparent 64%),
    radial-gradient(38% 28% at 82% 28%, rgba(88, 232, 238, .48), transparent 66%),
    radial-gradient(42% 30% at 52% 86%, rgba(255, 60, 150, .70), transparent 66%),
    radial-gradient(34% 26% at 8% 62%, rgba(255, 154, 60, .34), transparent 68%),
    linear-gradient(178deg, var(--night-lit) 0%, var(--night) 46%, var(--night-deep) 100%);
  animation: sky-turn 70s ease-in-out infinite alternate;
}
/* The field it arrives in, faded over the first. Different hues and different
   centres, so the cross-fade reads as the light changing rather than dimming. */
body::after {
  background:
    radial-gradient(46% 34% at 78% 6%, rgba(255, 60, 150, .92), transparent 64%),
    radial-gradient(40% 30% at 12% 40%, rgba(140, 66, 255, .90), transparent 66%),
    radial-gradient(42% 32% at 66% 90%, rgba(88, 232, 238, .58), transparent 66%),
    radial-gradient(34% 26% at 94% 64%, rgba(255, 154, 60, .40), transparent 68%);
  opacity: 0;
  animation: sky-fade 70s ease-in-out infinite alternate;
}
@supports (animation-timeline: scroll()) {
  /* Scroll drives it where the browser can, so the light turns and changes as
     the reader moves rather than on a clock they are not watching. */
  body::before {
    animation: sky-turn linear both;
    animation-timeline: scroll(root block);
  }
  body::after {
    animation: sky-fade linear both;
    animation-timeline: scroll(root block);
  }
}
/* Wide travel on purpose. Both fields are far larger than the viewport, so a
   big rotation and a long slide cost the compositor exactly what a small one
   does — and the colour actually goes somewhere as the reader scrolls. */
@keyframes sky-turn {
  from { transform: rotate(-8deg) scale(1.02) translate3d(-6%, -5%, 0); }
  to { transform: rotate(24deg) scale(1.28) translate3d(9%, 8%, 0); }
}
@keyframes sky-fade {
  from { opacity: 0; transform: rotate(12deg) scale(1.24) translate3d(7%, -6%, 0); }
  to { opacity: 1; transform: rotate(-16deg) scale(1.02) translate3d(-8%, 7%, 0); }
}

/* Printed over the sky and under everything that is read. It never animates:
   a rotating dot grid is the one thing on this page that would actually make
   a reader feel sick. */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 243, 201, .075) 0 1px, transparent 1.5px);
  background-size: 8px 8px;
}

img { max-width: 100%; height: auto; }
a { color: inherit; }

/* Hidden by clipping to nothing rather than by a large negative offset: at
   -9999px the link still occupies that space and the document reports itself
   as wider than the viewport, which is indistinguishable from a real layout
   overflow when auditing. */
.skip-link {
  position: absolute;
  z-index: 60;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  padding: 12px 18px;
  overflow: visible;
  clip-path: none;
}

:focus-visible { outline: 4px solid var(--cyan); outline-offset: 3px; }

/* The ground is violet, so body copy on it is light — and everything sitting
   inside a cream panel inherits that light colour and disappears. The reset
   goes on the containers, so nothing inside one has to remember to opt out. */
.lede,
.tally,
.door,
.cover-frame,
.plate,
.card,
.steps li,
.why-card,
.status-grid,
.faq-list details { color: var(--ink); }

/* ---- the bar ---- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px var(--gutter);
  background: linear-gradient(180deg, #221338, #120a22);
  border-bottom: 5px solid var(--cyan);
  box-shadow: 0 14px 30px rgba(6, 2, 16, .6);
}
.brand { flex: none; line-height: 0; }
.brand img { width: clamp(102px, 14vw, 142px); height: auto; }

.topnav {
  display: none;
  flex: 1 1 auto;
  gap: 30px;
  justify-content: center;
  font: 400 clamp(13px, 1.5vw, 16px)/1 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.topnav a { color: var(--paper); text-decoration: none; }
.topnav a:hover { color: var(--cyan); }

/* The app's button: ink outline, hard offset, no blur, and it presses in. */
.pill {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 20px;
  border: var(--border-3);
  background: var(--lit-cyan);
  color: var(--ink);
  font: 700 14px/1 var(--font-ui);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}
.pill:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.pill:active { transform: translate(2px, 2px); box-shadow: 1px 2px 0 var(--ink); }
.pill-lg {
  padding: 16px 30px;
  border: var(--border);
  font: 400 clamp(19px, 2.2vw, 25px)/1 var(--font-display);
  letter-spacing: .045em;
  text-transform: uppercase;
  box-shadow: 7px 8px 0 var(--ink);
}
.pill-lg:hover { box-shadow: 9px 10px 0 var(--ink); }

/* ---- the masthead: the app's own burst, torn along the bottom ---- */

.masthead {
  position: relative;
  overflow: hidden;
  overflow: clip;
  min-height: clamp(230px, 34vw, 340px);
  margin: 0;
  padding: clamp(26px, 4vw, 44px) var(--gutter) clamp(52px, 7vw, 84px);
  display: grid;
  place-items: center;
  isolation: isolate;
  background: var(--ray-deep);
  /* Anchored in pixels, not percentages: as a percentage the tear deepens with
     the header it cuts, so a wrapped title changes the shape of the rip.
   *
   * The spacing and the depths are deliberately uneven. Evenly pitched peaks
   * of equal depth read as pinking shears — a machine cut, which is the one
   * thing a torn page is not. These wander between 6px and 38px and the gaps
   * between them run 6% to 13%, so the eye finds no repeat. */
  clip-path: polygon(0 0, 100% 0,
    100% calc(100% - 17px), 96% calc(100% - 31px), 90% calc(100% - 9px),
    85% calc(100% - 22px), 78% calc(100% - 38px), 72% calc(100% - 14px),
    66% calc(100% - 26px), 59% calc(100% - 7px), 54% calc(100% - 20px),
    47% calc(100% - 35px), 41% calc(100% - 12px), 35% calc(100% - 29px),
    28% calc(100% - 6px), 23% calc(100% - 24px), 16% calc(100% - 37px),
    10% calc(100% - 13px), 5% calc(100% - 27px), 0 calc(100% - 10px));
}
/* The rays turn. A conic gradient cannot itself be animated, so the burst is
   an oversized square that rotates behind everything — far wider than the
   masthead, so no edge of it ever comes into view. One transform on one
   composited layer; the clip-path above trims it to the torn shape. */
.masthead::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 320%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg,
    var(--ray-lit) 0 8deg, var(--ray-deep) 8deg 14deg);
  will-change: transform;
  animation: rays 150s linear infinite;
}
@keyframes rays { to { rotate: 360deg; } }

/* The lit centre and the seated bottom edge, over the rays and under the type. */
.masthead::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(56% 60% at 50% 44%, var(--ray-glow), transparent 62%);
  box-shadow: inset 0 -70px 100px -60px rgba(18, 4, 40, .92);
}
/* Both of the above are positioned, so the masthead's own children have to be
   lifted or the burst paints straight over the wordmark. */
.masthead > * { position: relative; z-index: 1; }

/* Five bursts, one picked per visit by the runtime. Every one of them lives in
   violet's own family: the page never has to referee a clash. */
[data-cover="1"] { --ray-lit: #e8479f; --ray-deep: #6d24a6; --ray-glow: rgba(255, 176, 206, .5);  --spike: #ff9d70; --word: #58e8ee; }
[data-cover="2"] { --ray-lit: #5ad4f5; --ray-deep: #2f2f9e; --ray-glow: rgba(186, 240, 255, .52); --spike: #ffc46b; --word: #2f2f9e; }
[data-cover="3"] { --ray-lit: #ff5d9e; --ray-deep: #3b1e8f; --ray-glow: rgba(255, 198, 224, .5);  --spike: #8df4f8; --word: #ff2f86; }
[data-cover="4"] { --ray-lit: #b06bf5; --ray-deep: #3a1670; --ray-glow: rgba(226, 200, 255, .52); --spike: #ffb894; --word: #58e8ee; }
[data-cover="5"] { --ray-lit: #ffb03a; --ray-deep: #7a2a6b; --ray-glow: rgba(255, 226, 172, .5);  --spike: #8df4f8; --word: #a8215f; }

.issue-tag {
  grid-area: 1 / 1;
  justify-self: center;
  align-self: start;
  margin: 0;
  padding: 7px 18px 6px;
  color: var(--paper);
  background: var(--ink);
  font: 400 clamp(13px, 1.7vw, 17px)/1 var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(-1deg);
  box-shadow: var(--shadow-sm) var(--cyan);
  box-shadow: 4px 4px 0 var(--cyan);
}
/* The peach spike behind the wordmark, and the printed dots inside it. */
.edition {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  place-items: center;
  width: min(94%, 620px);
  padding: clamp(34px, 6vw, 62px) clamp(20px, 4vw, 44px);
  transform: rotate(-2deg);
  isolation: isolate;
}
.edition::before,
.edition::after {
  content: "";
  position: absolute;
  clip-path: polygon(0 40%, 13% 34%, 5% 20%, 25% 26%, 26% 5%, 42% 22%, 52% 0,
    60% 22%, 82% 5%, 79% 28%, 100% 22%, 89% 43%, 100% 60%, 82% 58%, 89% 83%,
    65% 71%, 56% 100%, 43% 76%, 24% 94%, 27% 69%, 3% 78%, 14% 57%);
}
.edition::before {
  z-index: -2;
  inset: 6px -10px -10px;
  background: var(--spike);
  filter: drop-shadow(7px 8px 0 var(--ink));
}
.edition::after {
  z-index: -1;
  inset: 18px 14px 2px;
  background: radial-gradient(circle, #cf4a3c 0 2px, transparent 2.5px);
  background-size: 15px 15px;
  opacity: .4;
}
.edition b {
  position: relative;
  color: var(--paper);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  font: 400 clamp(42px, 8.4vw, 88px)/.78 var(--font-display);
  letter-spacing: -.01em;
  text-shadow: 5px 7px 0 var(--ink), 9px 11px 0 rgba(255, 255, 255, .28);
  white-space: nowrap;
}
.edition b i { color: var(--word); font-style: normal; }
.edition-note {
  grid-area: 1 / 1;
  justify-self: end;
  align-self: end;
  margin: 0;
  padding: 6px 13px 5px;
  border: var(--border-3);
  color: var(--ink);
  background: var(--lit-paper);
  font: 400 clamp(11px, 1.4vw, 14px)/1 var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(3deg);
  box-shadow: var(--shadow-sm);
}

/* The offer is a poster collage rather than five equal strips. Like the film
   pages that inspired its pacing, one visual carries the main promise and the
   supporting facts sit in unequal caption panels around it. The materials are
   still Spider's: hard ink, offset shadow, loud house colours and the shipped
   server mascot. */
.hero-perks {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: minmax(250px, 1.7fr) minmax(88px, .5fr) minmax(140px, .78fr) minmax(132px, .72fr);
  align-content: center;
  gap: 11px;
  margin: 0;
  padding: 0;
  max-width: 100%;
  list-style: none;
}
.hero-perks li {
  position: relative;
  min-width: 0;
  border: 4px solid var(--ink);
  color: var(--ink);
  box-shadow: 6px 7px 0 var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.hero-perks .perk-copy {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: flex-start;
  padding: 16px 17px 14px;
}
.hero-perks .perk-copy > small {
  display: block;
  margin-bottom: 7px;
  font-size: 10.5px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.hero-perks b {
  display: block;
  font: 400 clamp(17px, 1.9vw, 24px)/.98 var(--font-display);
  letter-spacing: .015em;
  text-transform: uppercase;
}
.hero-perks em {
  display: block;
  margin-top: auto;
  padding-top: 8px;
  font: 700 11px/1.35 var(--font-ui);
}
.perk-unlimited { grid-column: 1 / -1; color: var(--paper) !important; }
.perk-unlimited > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}
.perk-unlimited::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 3, 18, .96) 0%, rgba(8, 3, 18, .62) 45%, rgba(8, 3, 18, .08) 80%);
}
.perk-unlimited .perk-copy { max-width: 520px; padding: 24px 24px 21px; }
.perk-unlimited small { color: var(--cyan); }
.perk-unlimited b { font-size: clamp(28px, 3.5vw, 45px); text-shadow: 3px 4px 0 var(--ink); }
.perk-unlimited em { max-width: 44ch; color: var(--paper); font-size: 12px; }
.hero-perks .perk-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 88px;
  background: linear-gradient(145deg, #211038, #12091f);
  color: var(--paper);
}
.hero-perks .perk-stats[hidden] { display: none; }
.perk-stat {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 10px 14px;
  border-left: 3px solid var(--cyan);
}
.perk-stat:nth-child(2) { border-color: var(--peach); }
.perk-stat:nth-child(3) { border-color: #ff5d9e; }
.hero-perks .perk-stat b {
  color: var(--paper);
  font-size: clamp(27px, 3.4vw, 40px);
  line-height: .86;
}
.hero-perks .perk-stat b small {
  display: inline;
  margin: 0 0 0 2px;
  color: inherit;
  font: inherit;
  font-size: .5em;
  letter-spacing: 0;
}
.hero-perks .perk-stat small {
  margin: 8px 0 0;
  color: #d9cee9;
  font-size: 7.5px;
  line-height: 1.2;
}
.perk-world,
.perk-install,
.perk-device,
.perk-direct { background: linear-gradient(150deg, #fff9e2, var(--paper) 58%, #f0d99c); color: var(--ink) !important; }
.perk-world { grid-column: 1 / 4; }
.perk-install { grid-column: 4 / 7; }
.perk-device { grid-column: 1 / 3; }
.perk-direct { grid-column: 3 / 7; }
.perk-world small,
.perk-install small,
.perk-device small,
.perk-direct small { color: #087985; }

/* Pink is "this leaves for Telegram"; paper is "this stays on the page". The
   two are never the same colour anywhere, so the distinction survives a reader
   who is scanning rather than reading. */
.pill-pink { background: linear-gradient(155deg, #ff8dbe, #ff4d97 52%, #d61f6d); color: var(--paper); }
.pill-paper { background: var(--lit-paper); color: var(--ink); }

/* ---- bands ---- */

.band {
  position: relative;
  width: min(100%, var(--measure));
  margin: 0 auto;
  padding: clamp(44px, 6vw, 82px) var(--gutter);
}
.strip {
  display: inline-flex;
  align-items: stretch;
  margin: 0 0 18px;
  background: var(--ink);
  box-shadow: 5px 5px 0 var(--red);
  transform: rotate(-.4deg);
}
.strip em {
  padding: 10px 14px;
  color: var(--cyan);
  font: 400 clamp(15px, 1.9vw, 19px)/1 var(--font-display);
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.strip small {
  align-self: center;
  padding: 10px 14px 10px 0;
  color: var(--paper-deep);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.band-title {
  margin: 0 0 18px;
  max-width: 22ch;
  font: 400 clamp(30px, 5vw, 58px)/.98 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  transform: skew(-3deg);
  transform-origin: left center;
  color: var(--paper);
  -webkit-text-stroke: .02em var(--ink);
  paint-order: stroke fill;
  text-shadow: .045em .055em 0 var(--cyan);
}
.band-note {
  max-width: 68ch;
  margin: 0 0 26px;
  color: var(--text-lit);
  font-size: clamp(14.5px, 1.7vw, 16.5px);
  line-height: 1.6;
}
.band-note b { color: var(--cyan); }
.band-cta { margin: 26px 0 0; }
.band-cta .pill { margin-left: 0; }

/* ---- the way in ----
 *
 * A full-width bar under the masthead rather than a card inside the hero. The
 * reader it exists for cannot open Telegram at all; asking them to scroll past
 * an advertisement to reach the thing that fixes that is the wrong order. */
.doorbar { margin: 22px 0 0; max-width: 530px; }
.doorbar[hidden] { display: none; }
.doorbar-inner {
  display: grid;
  gap: 9px;
  padding: 12px 14px;
  border: 4px solid var(--ink);
  background: linear-gradient(165deg, #ffe27e, var(--yellow) 55%, #f0ac1f);
  box-shadow: 6px 7px 0 var(--ink), 14px 20px 34px rgba(6, 2, 16, .5);
  color: var(--ink);
}
.doorbar-head {
  margin: 0;
  font: 400 clamp(15px, 1.8vw, 19px)/1 var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  transform: skew(-3deg);
  transform-origin: left center;
}
.doorbar-button {
  padding: 11px 16px;
  border: 3px solid var(--ink);
  background: var(--lit-paper);
  color: var(--ink);
  font: 400 clamp(13px, 1.6vw, 17px)/1.1 var(--font-display);
  letter-spacing: .035em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 3px 4px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.doorbar-button:hover { transform: translate(-2px, -2px); box-shadow: 5px 6px 0 var(--ink); }
.doorbar-button:active { transform: translate(2px, 2px); box-shadow: 1px 2px 0 var(--ink); }
.doorbar-button[aria-disabled="true"] {
  opacity: .58;
  cursor: not-allowed;
  box-shadow: 2px 3px 0 var(--ink);
}
.doorbar-button[aria-disabled="true"]:hover,
.doorbar-button[aria-disabled="true"]:active { transform: none; box-shadow: 2px 3px 0 var(--ink); }
.doorbar-warn,
.doorbar-hint {
  margin: 0;
  color: var(--muted-2);
  font-size: 10.5px;
  line-height: 1.4;
}

/* ---- the hero ---- */

.hero {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

.hero h1 {
  margin: 0 0 20px;
  max-width: 14ch;
  font: 400 clamp(40px, 7.4vw, 84px)/.9 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  transform: skew(-4deg);
  transform-origin: left bottom;
  color: var(--paper);
  -webkit-text-stroke: .022em var(--ink);
  paint-order: stroke fill;
  text-shadow: .042em .056em 0 var(--ink);
}
.hero h1 em { font-style: normal; color: var(--cyan); }

.hero-deck {
  max-width: 38ch;
  margin: 0 0 18px;
  color: var(--text-lit);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.5;
}
.hero-trial {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 12px;
  margin: 0 0 22px;
  padding: 9px 13px;
  border-left: 6px solid var(--red);
  background: #fff3c914;
}
.hero-trial b {
  color: var(--yellow);
  font: 400 clamp(18px, 2.2vw, 23px)/1 var(--font-display);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.hero-trial span {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* Three figures in the app's two-cell summary shape: cream, ink-divided, one
   cell cyan. */
/* Three figures set on the page rather than in a box: boxed they read as a
   third card competing with the lede and the door beneath them, when they are
   a caption to the headline. */
.tally {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.tally li { position: relative; padding-left: 17px; }
.tally li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 6px;
  background: var(--cyan);
}
.tally li.is-live::before { background: var(--peach); }
.tally b {
  display: block;
  color: var(--paper);
  font: 400 clamp(34px, 4.6vw, 52px)/1 var(--font-display);
  letter-spacing: .01em;
  text-shadow: .035em .045em 0 rgba(9, 11, 12, .75);
}
.tally b small { font-size: .44em; opacity: .85; }
.tally span {
  display: block;
  margin-top: 5px;
  color: var(--text-lit);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 26px; }
.hero-actions .pill { margin-left: 0; }

/* The door: the free way in, boxed off so it never competes with the product
   it exists to lead people to. Yellow is the app's own "read this" panel. */
.door {
  max-width: 470px;
  padding: 12px 14px;
  border: 4px solid var(--ink);
  background: linear-gradient(165deg, #ffe27e, var(--yellow) 55%, #f0ac1f);
  box-shadow: 7px 8px 0 var(--ink), 16px 22px 38px rgba(6, 2, 16, .6);
}
.door-head {
  margin: 0 0 9px;
  font: 400 clamp(15px, 1.8vw, 18px)/1 var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  transform: skew(-3deg);
  transform-origin: left center;
}
.door-button {
  display: block;
  padding: 10px 13px;
  border: 3px solid var(--ink);
  background: var(--lit-paper);
  color: var(--ink);
  font: 400 clamp(13px, 1.5vw, 15px)/1.1 var(--font-display);
  letter-spacing: .035em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}
.door-button:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.door-button:active { transform: translate(2px, 2px); box-shadow: 1px 2px 0 var(--ink); }
.door-hint { margin: 8px 0 0; color: var(--muted-2); font-size: 11px; line-height: 1.4; }
.door-warn {
  margin: 7px 0 0;
  padding: 6px 9px;
  border-left: 4px solid var(--red);
  background: #ffffff8c;
  color: var(--muted-2);
  font-size: 10.5px;
  line-height: 1.4;
}
.door-warn a { color: var(--red); font-weight: 700; }

/* ---- the drifting faces ----
 *
 * A row of small marks between the hero and the plan, sliding forever. Only
 * two of them, both the Mini App's own: the face its map shows while you are
 * on your own network, and the spider mask it swaps in once the tunnel is up.
 * The mask is that SVG verbatim — same path data, same three fills — so the
 * page and the app are drawing the identical object.
 *
 * No plate, no ring, no shadow: they sit straight on the ground. They also do
 * not stop for the pointer — a strip that halts under the cursor reads as
 * broken when the cursor merely crossed it on the way somewhere else. */
.faces {
  margin: 0 0 clamp(44px, 6vw, 82px);
  padding: 18px 0;
  overflow: hidden;
  overflow: clip;
}
.faces-run {
  display: flex;
  align-items: center;
  gap: 30px;
  width: max-content;
  animation: faces-drift 52s linear infinite;
}
@keyframes faces-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
.face {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
}
.face:nth-child(4n+1) { rotate: -7deg; }
.face:nth-child(4n+2) { rotate: 5deg; }
.face:nth-child(4n+3) { rotate: -3deg; }
.face:nth-child(4n+4) { rotate: 8deg; }
.face-head { width: 100%; height: 100%; object-fit: contain; }
.face-mask { width: 92%; height: 100%; display: block; overflow: visible; shape-rendering: crispEdges; }
.mask-head { fill: #c23d55; stroke: #030509; stroke-width: 2.3; }
.mask-web { fill: none; stroke: #1a0a10; stroke-width: 1.25; }
.mask-eye { fill: #fff4d8; stroke: #030509; stroke-width: 1.8; }

@media (min-width: 860px) {
  .face { width: 54px; height: 54px; }
  .faces-run { gap: 38px; }
}

/* ---- the plan picker ----
 *
 * The Mini App's shop, widened: the same steppers, the same non-linear traffic
 * scale and the same period buttons, in the same ink-outlined panels. Nothing
 * is bought here — the total carries the choice into the bot, which is where
 * the catalogue, the disclosures and the payment actually live. */

.picker { display: grid; gap: 18px; align-items: start; }
.picker-form { display: grid; gap: 14px; }
.field {
  padding: 18px 20px;
  border: var(--border);
  background: var(--lit-paper);
  box-shadow: var(--shadow);
  color: var(--ink);
}
.field-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
  margin: 0 0 14px;
}
.field-head b {
  font: 400 clamp(17px, 2vw, 21px)/1 var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  transform: skew(-3deg);
}
.field-head small {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.field-explainer {
  margin: -3px 0 16px;
  max-width: 64ch;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.stepper { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; gap: 12px; }
.stepper button {
  height: 52px;
  border: var(--border-3);
  background: var(--lit-cyan);
  color: var(--ink);
  font: 400 26px/1 var(--font-display);
  cursor: pointer;
  box-shadow: 3px 4px 0 var(--ink);
}
.stepper button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.stepper button:disabled { opacity: .4; cursor: default; }
.stepper span { text-align: center; }
.stepper span > b { display: block; font: 400 clamp(26px, 3.4vw, 34px)/1 var(--font-display); }
.stepper small { display: block; margin-top: 5px; color: var(--muted); font-size: 11.5px; }

.slider { width: 100%; height: 34px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.slider::-webkit-slider-runnable-track { height: 14px; border: var(--border-3); background: var(--lit-cyan); }
.slider::-moz-range-track { height: 14px; border: var(--border-3); background: var(--lit-cyan); }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -11px;
  border: var(--border-3);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--ink);
}
.slider::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border: var(--border-3);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--ink);
}
.field-read { display: flex; align-items: baseline; gap: 12px; margin: 10px 0 0; }
.field-read b { font: 400 clamp(22px, 2.8vw, 28px)/1 var(--font-display); }
.field-read small { color: var(--muted); font-size: 12.5px; }

/* The unlimited band. It was a grey caption in the field header, where it read
   as a footnote — and it is the line that makes the metered number above it
   safe to ignore, so it gets the loudest treatment in the panel. */
.unlimited {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 14px 0 0;
  padding: 11px 14px;
  border: 3px solid var(--ink);
  background: var(--lit-cyan);
  box-shadow: 4px 5px 0 var(--ink);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.35;
}
/* The set's own traffic mark rather than a typed ∞: every other badge on this
   page is one of the Mini App's comic icons, and a bare glyph among them read
   as a character that had lost its picture. */
.unlimited > .smash-icon {
  flex: none;
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(2px 3px 0 var(--ink));
}
.unlimited span b { font-weight: 700; }

/* The Telegram-proxy choice, as the Mini App draws a choice: an option plate
   that presses in when it is taken, not a browser checkbox sitting in a comic.
   The selected state is an inset ink ring plus the cyan fill — the app's own
   `.option-grid button.selected`. */
.option {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 12px 14px;
  border: var(--border);
  background: var(--lit-paper);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.option i { display: grid; place-items: center; }
.option .smash-icon { width: 54px; height: 54px; object-fit: contain; }
.option b {
  display: block;
  font: 400 clamp(16px, 1.9vw, 20px)/1 var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  transform: skew(-3deg);
  transform-origin: left center;
}
.option small { display: block; margin-top: 6px; color: var(--muted); font-size: 12.5px; }
/* The tick box: empty until the option is taken, then an ink check on cyan. */
.option em {
  justify-self: end;
  width: 30px;
  height: 30px;
  border: 3px solid var(--ink);
  background: #ffffffa6;
  font-style: normal;
}
.option[aria-pressed="true"] {
  background: var(--lit-cyan);
  box-shadow: inset 0 0 0 3px var(--ink), var(--shadow);
}
.option[aria-pressed="true"] small { color: #0e3a3c; }
.option[aria-pressed="true"] em {
  background: var(--paper);
  background-image: linear-gradient(45deg, transparent 44%, var(--ink) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--ink) 44% 56%, transparent 56%);
}
.option:active { transform: translate(2px, 2px); box-shadow: 1px 2px 0 var(--ink); }

.periods { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
.periods button {
  padding: 13px 8px;
  border: var(--border-3);
  background: var(--lit-paper);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 3px 4px 0 var(--ink);
}
.periods button b { display: block; font: 400 17px/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.periods button small { display: block; margin-top: 6px; color: var(--muted); font-size: 10.5px; font-weight: 700; }
.periods button.selected { background: var(--lit-cyan); box-shadow: inset 0 0 0 3px var(--ink), 3px 4px 0 var(--ink); }

.picker-total {
  padding: clamp(22px, 3vw, 32px);
  border: 5px solid var(--ink);
  background: var(--lit-paper);
  box-shadow: 8px 9px 0 var(--ink), 16px 22px 38px rgba(6, 2, 16, .55);
  color: var(--ink);
}
.total-eyebrow { margin: 0 0 8px; color: var(--red); font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.total-plan { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.total-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 18px; }
.total-price b { font: 400 clamp(40px, 6vw, 60px)/.95 var(--font-display); }
.total-price small { color: var(--muted); font-size: 13px; font-weight: 700; }
.total-lines { margin: 0 0 20px; padding: 0; list-style: none; border-top: 3px solid var(--ink); }
.total-lines li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid #0000001f; font-size: 13.5px; }
.total-lines li span { color: var(--muted); }
.total-lines li b { white-space: nowrap; }
.total-lines .is-note { border-bottom: 0; color: var(--muted); font-size: 11.5px; }
.picker-total .pill { width: 100%; margin-left: 0; }
.total-note { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

/* ---- plates and cards ----
 *
 * The geometry is a good product page's, measured off one: a wide plate whose
 * copy sits beside its art, and a grid of art-on-top cards under it. Within
 * each, the text runs in the same four steps every time — a tiny tracked
 * eyebrow, a display heading, at most three lines of body, and an optional
 * action. That repetition is what makes a page scannable; the ink outlines and
 * hard offsets are what keep it ours.
 */

.band-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: clamp(22px, 3vw, 38px);
}
.band-head > div { min-width: 0; }
.band-head .band-title { margin-bottom: 0; }
.band-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 4px;
  border-bottom: 3px solid var(--red);
  color: var(--paper);
  font: 400 clamp(14px, 1.6vw, 17px)/1 var(--font-display);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
}
.band-link:hover { border-bottom-color: var(--cyan); }

/* The eyebrow: the smallest type on the page, and the one that tells a reader
   what kind of thing they are about to read. */
.eyebrow {
  margin: 0 0 10px;
  color: var(--red);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.plate {
  display: grid;
  gap: 0;
  margin: 0 0 18px;
  border: var(--border);
  background: var(--lit-paper);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.plate-copy { padding: clamp(22px, 3vw, 40px); }
.plate-copy h3 {
  margin: 0 0 14px;
  max-width: 18ch;
  font: 400 clamp(24px, 3.4vw, 42px)/.98 var(--font-display);
  letter-spacing: .015em;
  text-transform: uppercase;
  transform: skew(-3deg);
  transform-origin: left center;
}
.plate-copy p:not(.eyebrow) {
  margin: 0 0 22px;
  max-width: 54ch;
  color: var(--muted);
  font-size: clamp(14.5px, 1.7vw, 16.5px);
  line-height: 1.55;
}
.plate-copy p b { color: var(--red); }
.plate-copy .pill { margin-left: 0; }
.plate-art { position: relative; min-height: 220px; border-left: 4px solid var(--ink); overflow: hidden; }
.plate-art::after,
.card-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(9, 11, 12, .08));
  pointer-events: none;
}
.plate-art img { width: 100%; height: 100%; object-fit: cover; }

/* Large story beats borrow their pacing from a film page, but every object is
   still Smash: paper, hard ink, printed art and one loud line at a time. */
.cinematic { padding-top: clamp(72px, 10vw, 136px); }
.cinematic .band-title {
  max-width: 15ch;
  font-size: clamp(42px, 7vw, 84px);
  text-shadow: .04em .05em 0 var(--cyan), .08em .09em 0 var(--ink);
}
.plate-feature { min-height: clamp(430px, 46vw, 570px); }
.plate-feature .plate-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.plate-feature .plate-copy h3 { max-width: 13ch; font-size: clamp(34px, 5vw, 62px); }
.plate-feature .plate-art { min-height: 360px; }
.plate-feature .plate-art img {
  transform: scale(1.04);
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.plate-feature.is-in .plate-art img { transform: scale(1); }

/* The story panels now carry their own full Spider palette and print texture.
   The tint classes remain as resilient loading backgrounds, while the final
   bitmaps render without a blend mode so the mascot's shipped cream, red and
   cyan colors stay exact. */
.art-violet { background: linear-gradient(155deg, #5c33a6, #381c69 58%, #251145); }
.art-magenta { background: linear-gradient(155deg, #7a2a6e, #4c1746 58%, #310e2c); }
.art-indigo { background: linear-gradient(155deg, #36409a, #202557 58%, #151843); }
.art-orchid { background: linear-gradient(155deg, #6b37a4, #40196c 58%, #2a104a); }
.art-plum { background: linear-gradient(155deg, #822f74, #4e1745 58%, #340f2f); }
.art-cyan { background: linear-gradient(155deg, #1f7683, #114851 58%, #0b3038); }
.art-violet img, .art-magenta img, .art-indigo img,
.art-orchid img, .art-plum img, .art-cyan img,
.card-art > img:first-child {
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
}

.punch { background: var(--lit-cyan); }
.punch .plate-copy p:not(.eyebrow) { color: #0e3a3c; }
.punch .plate-copy p b { color: var(--ink); }
.punch .eyebrow { color: var(--ink); }
.punch .pill { background: var(--lit-paper); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 18px;
  margin: 0 0 18px;
}
.card {
  display: flex;
  flex-direction: column;
  border: var(--border);
  background: var(--lit-paper);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .13s ease, box-shadow .13s ease;
}
.card:nth-child(even) { transform: rotate(.3deg); }
.card:nth-child(odd) { transform: rotate(-.28deg); }
.card:hover { transform: translate(-2px, -2px); box-shadow: 8px 9px 0 var(--ink); }
.card-art {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-bottom: 4px solid var(--ink);
  overflow: hidden;
}
.card-art > img:first-child { width: 100%; height: 100%; object-fit: cover; }
/* A sticker slapped in the corner of the plate. It sits fully inside because
   the plate clips — straddling the edge would simply delete half of it. */
.card-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(3px 4px 0 var(--ink));
  mix-blend-mode: normal;
}
.card-copy { padding: 20px 18px; }
.card-copy h3 {
  margin: 0 0 9px;
  font: 400 clamp(17px, 2vw, 21px)/1.05 var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  transform: skew(-3deg);
  transform-origin: left center;
}
.card-copy p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }

/* A lived-in product moment among the abstract route diagrams. Gamer keeps
   the game on the ordinary connection, so the art is a room someone would
   actually play in rather than another tunnel metaphor. */
.gaming-plate { margin: clamp(34px, 6vw, 72px) 0; }
.gaming-plate .plate-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(155deg, #fff7dc, var(--paper) 58%, #ffd89a);
}
.gaming-plate .plate-copy h3 { max-width: 14ch; font-size: clamp(30px, 4.4vw, 52px); }
.gaming-plate .plate-art { min-height: 360px; }
.gaming-plate .plate-art img { object-position: 50% 50%; }

/* A single oversized trial reveal replaces another small feature card. Its
   scale is cinematic; its materials are the Mini App's gift panel. */
.trial-stage {
  position: relative;
  display: grid;
  gap: 0;
  margin: clamp(34px, 6vw, 72px) 0;
  border: 5px solid var(--ink);
  background: linear-gradient(145deg, #ffe27e 0%, var(--yellow) 52%, var(--peach) 100%);
  box-shadow: 10px 12px 0 var(--ink), 20px 30px 48px rgba(6, 2, 16, .58);
  color: var(--ink);
  overflow: hidden;
}
.trial-stage-copy {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 5vw, 64px);
}
.trial-stage-copy > p:not(.eyebrow, .trial-number) {
  max-width: 48ch;
  margin: 0 0 26px;
  color: var(--muted-2);
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.55;
}
.trial-number {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  margin: 0 0 18px;
}
.trial-number > b {
  font: 400 clamp(92px, 15vw, 180px)/.72 var(--font-display);
  letter-spacing: -.03em;
  text-shadow: .035em .045em 0 var(--paper), .07em .085em 0 var(--ink);
}
.trial-number > span {
  font: 400 clamp(27px, 4vw, 50px)/.88 var(--font-display);
  text-transform: uppercase;
  transform: skew(-4deg);
}
.trial-stage-copy .pill { margin-left: 0; }
.trial-stage-art {
  position: relative;
  min-height: 300px;
  display: grid;
  place-items: center;
  border-top: 5px solid var(--ink);
  background: radial-gradient(circle at 50% 50%, #58e8ee 0 28%, #2e2994 29% 43%, #e32932 44% 58%, #160e29 59%);
  isolation: isolate;
}
.trial-burst {
  position: absolute;
  inset: 10%;
  z-index: -1;
  background: var(--paper);
  clip-path: polygon(50% 0, 58% 24%, 76% 7%, 75% 31%, 100% 25%, 82% 47%, 100% 60%, 75% 62%, 80% 91%, 59% 73%, 48% 100%, 40% 74%, 13% 94%, 22% 65%, 0 57%, 20% 43%, 2% 25%, 27% 30%, 25% 6%, 42% 25%);
  filter: drop-shadow(8px 10px 0 var(--ink));
}
.trial-stage-art img {
  width: clamp(130px, 20vw, 230px);
  filter: drop-shadow(8px 10px 0 var(--ink));
  transform: rotate(-7deg);
}
.trial-stage-art > b {
  position: absolute;
  right: clamp(12px, 3vw, 38px);
  bottom: clamp(14px, 3vw, 36px);
  padding: 10px 14px 7px;
  border: 4px solid var(--ink);
  background: var(--lit-cyan);
  font: 400 clamp(23px, 3.5vw, 42px)/.82 var(--font-display);
  text-align: center;
  transform: rotate(5deg);
  box-shadow: 5px 6px 0 var(--ink);
}

/* ---- steps ---- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps li {
  padding: 22px 20px;
  border: var(--border);
  background: var(--lit-paper);
  box-shadow: var(--shadow);
}
.steps li:nth-child(2) { transform: rotate(.35deg); }
.steps li:nth-child(3) { transform: rotate(-.3deg); }
.step-no {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 16px;
  border: var(--border-3);
  border-radius: 50%;
  background: var(--lit-red);
  color: var(--paper);
  font: 400 27px/1 var(--font-display);
  box-shadow: 3px 4px 0 var(--ink);
}
.steps .eyebrow { margin-bottom: 8px; }
.steps b {
  display: block;
  margin-bottom: 9px;
  font: 400 clamp(18px, 2.1vw, 23px)/1 var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  transform: skew(-3deg);
  transform-origin: left center;
}
.steps small { display: block; color: var(--muted); font-size: 14.5px; line-height: 1.55; }

/* ---- seven-day status ----
 *
 * The Mini App leads with compact measurements rather than an explanation.
 * The public page has only aggregate data, so these are four matching summary
 * cards — no invented per-country history and no incident narrative. */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
  gap: 16px;
}
.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 150px;
  padding: 20px;
  border: var(--border);
  background: var(--lit-paper);
  box-shadow: var(--shadow);
  color: var(--ink);
  overflow: hidden;
}
.stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--cyan); }

.stat-eyebrow {
  margin: 0 0 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #087985;
}
.stat b {
  display: block;
  font: 400 clamp(38px, 5.4vw, 54px)/.92 var(--font-display);
  letter-spacing: .01em;
}
.stat b small { font-size: .38em; letter-spacing: .01em; }
.stat span {
  display: block;
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---- faq ---- */

.faq-list { display: grid; gap: 12px; }
.faq-list details {
  border: var(--border);
  background: var(--lit-paper);
  box-shadow: var(--shadow);
}
.faq-list summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 20px;
  cursor: pointer;
  font: 400 clamp(16px, 2vw, 21px)/1.15 var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  margin-left: auto;
  font: 700 24px/1 var(--font-ui);
  color: var(--red);
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list details[open] { box-shadow: 8px 9px 0 var(--cyan); }
.faq-list details p {
  margin: 0;
  padding: 0 20px 20px;
  max-width: 76ch;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---- footer ---- */

.footer {
  margin-top: clamp(30px, 5vw, 60px);
  padding: clamp(38px, 6vw, 68px) var(--gutter) clamp(30px, 5vw, 52px);
  border-top: 6px solid var(--ink);
  background: radial-gradient(96% 130% at 50% 0%, #241640, var(--night-deep) 62%);
  text-align: center;
}
.footer > * { width: min(100%, var(--measure)); margin-inline: auto; }
.footer-mark { width: 158px; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin: 22px auto;
  font: 400 clamp(12px, 1.4vw, 15px)/1 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.footer-links a { color: var(--paper-deep); text-decoration: none; }
.footer-links a:hover { color: var(--cyan); }
.footer-note { margin: 0 auto 12px; max-width: 70ch; color: #9a8e7f; font-size: 12.5px; line-height: 1.55; }
.footer-note a { color: var(--cyan); }

/* ---- phone composition ----
 * Mobile is not the desktop poster squeezed into a narrow strip. The value
 * story comes before the configurator, illustrated cards become short comic
 * rows, and the trial reveal stays inside one screen-height beat. */
@media (max-width: 600px) {
  :root { --gutter: 18px; }

  body { font-size: 15px; }
  [id] { scroll-margin-top: 78px; }

  main {
    display: flex;
    flex-direction: column;
  }
  .masthead { order: 1; }
  .hero { order: 2; }
  .faces { order: 3; }
  #what { order: 4; }
  #plan { order: 5; }
  #how { order: 6; }
  #status { order: 7; }
  #faq { order: 8; }

  .topbar {
    gap: 10px;
    min-height: 66px;
    padding: 9px 14px 10px;
    border-bottom-width: 4px;
  }
  .brand img { width: 94px; }
  .topbar > .pill {
    min-height: 42px;
    padding: 9px 13px;
    border-width: 2px;
    font-size: 12px;
    box-shadow: 3px 4px 0 var(--ink);
  }

  .masthead {
    min-height: 176px;
    padding: 18px var(--gutter) 42px;
  }
  .issue-tag { padding: 5px 11px 4px; font-size: 11px; }
  .edition { width: 94%; padding: 29px 10px; }
  .edition b {
    font-size: clamp(43px, 15.5vw, 61px);
    -webkit-text-stroke-width: 2px;
    text-shadow: 3px 4px 0 var(--ink), 6px 7px 0 rgba(255, 255, 255, .24);
  }
  .edition-note { padding: 5px 8px 4px; font-size: 9px; }

  .band { padding: 42px var(--gutter); }
  .hero { gap: 27px; padding-top: 35px; }
  .hero h1 {
    margin-bottom: 16px;
    font-size: clamp(43px, 13vw, 54px);
    line-height: .92;
  }
  .hero-deck { margin-bottom: 14px; font-size: 16px; line-height: 1.46; }
  .hero-trial {
    display: grid;
    gap: 5px;
    width: 100%;
    margin-bottom: 20px;
    padding: 10px 12px;
  }
  .hero-trial b { font-size: 18px; }
  .hero-trial span { font-size: 10px; line-height: 1.35; }
  .tally { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
  .tally li:last-child { grid-column: 1 / -1; }
  .tally b { font-size: 37px; }
  .hero-actions { display: grid; gap: 12px; }
  .hero-actions .pill { width: 100%; min-height: 55px; padding: 14px 17px; font-size: 18px; }
  .doorbar { margin-top: 18px; }
  .doorbar-inner { padding: 11px; }
  .doorbar-button { padding: 11px 9px; font-size: 12px; }

  .hero-perks {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 9px;
    margin-bottom: 0;
  }
  .hero-perks li { min-height: 130px; border-width: 3px; box-shadow: 3px 4px 0 var(--ink); }
  .hero-perks .perk-copy { padding: 12px 11px 11px; }
  .hero-perks .perk-copy > small { margin-bottom: 6px; font-size: 9px; }
  .hero-perks b { font-size: 16px; line-height: 1; }
  .hero-perks em { margin-top: auto; padding-top: 7px; font-size: 9.5px; line-height: 1.3; }
  .hero-perks .perk-unlimited {
    grid-column: 1 / -1;
    min-height: 260px;
  }
  .perk-unlimited .perk-copy { max-width: 100%; padding: 18px 16px 16px; }
  .perk-unlimited b { max-width: 10ch; font-size: 31px; }
  .perk-unlimited em { max-width: 31ch; font-size: 10px; }
  .hero-perks .perk-stats { grid-column: 1 / -1; min-height: 84px; }
  .perk-stat { padding: 9px 8px; }
  .hero-perks .perk-stat b { font-size: 29px; }
  .hero-perks .perk-stat small { font-size: 6.5px; letter-spacing: .12em; }
  .hero-perks .perk-world { grid-column: 1; min-height: 138px; }
  .hero-perks .perk-install { grid-column: 2; min-height: 138px; }
  .hero-perks .perk-device,
  .hero-perks .perk-direct { grid-column: 1 / -1; min-height: 115px; }

  .faces { margin-bottom: 4px; padding: 10px 0; }
  .faces-run { gap: 22px; }
  .face { width: 36px; height: 36px; }

  .strip { margin-bottom: 14px; max-width: 100%; }
  .strip em { flex: none; padding: 8px 10px; font-size: 13px; }
  .strip small { min-width: 0; padding: 8px 9px 8px 0; font-size: 9px; line-height: 1.15; }
  .band-head { display: block; margin-bottom: 22px; }
  .band-title { max-width: 18ch; font-size: 34px; line-height: .96; }
  .band-link { margin-top: 17px; font-size: 13px; }
  .band-note { margin-bottom: 20px; font-size: 14px; line-height: 1.5; }

  .cinematic { padding-top: 55px; }
  .cinematic .band-title { max-width: 12ch; font-size: 43px; line-height: .9; }
  .plate,
  .card,
  .field,
  .picker-total,
  .steps li,
  .stat,
  .faq-list details { box-shadow: 4px 5px 0 var(--ink), 9px 13px 24px rgba(6, 2, 16, .42); }

  .plate-feature { min-height: 0; }
  .plate-copy { padding: 22px 19px 24px; }
  .plate-feature .plate-copy h3 { max-width: 12ch; font-size: 35px; line-height: .93; }
  .plate-copy p:not(.eyebrow) { margin-bottom: 19px; font-size: 14px; line-height: 1.5; }
  .plate-copy .pill { width: 100%; min-height: 49px; padding: 11px 12px; white-space: normal; text-align: center; }
  .plate-art,
  .plate-feature .plate-art { min-height: 210px; border-top: 4px solid var(--ink); border-left: 0; }
  .gaming-plate { margin: 28px 0 34px; }
  .gaming-plate .plate-copy h3 { font-size: 32px; }
  .gaming-plate .plate-art { min-height: 250px; }

  .card-grid { gap: 12px; }
  .card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: 148px;
    transform: none !important;
  }
  .card-art {
    height: 100%;
    aspect-ratio: auto;
    border-right: 4px solid var(--ink);
    border-bottom: 0;
  }
  .card-art > img:first-child { object-position: 50% 50%; }
  .card-device .card-art > img:first-child { object-position: 29% 50%; }
  .card-youtube .card-art > img:first-child { object-position: 27% 50%; }
  .card-badge { left: 8px; bottom: 8px; width: 42px; height: 42px; }
  .card-copy { align-self: center; padding: 15px 13px; }
  .card-copy .eyebrow { margin-bottom: 6px; font-size: 8.5px; }
  .card-copy h3 { margin-bottom: 6px; font-size: 17px; line-height: 1; }
  .card-copy p:not(.eyebrow) { font-size: 12px; line-height: 1.38; }

  .trial-stage {
    grid-template-columns: minmax(0, 1fr) 118px;
    min-height: 314px;
    margin: 30px 0 0;
    border-width: 4px;
    box-shadow: 5px 6px 0 var(--ink), 11px 16px 27px rgba(6, 2, 16, .46);
  }
  .trial-stage-copy { padding: 23px 8px 23px 17px; }
  .trial-number { display: block; margin-bottom: 13px; }
  .trial-number > b { display: block; font-size: 80px; line-height: .72; }
  .trial-number > span { display: block; margin-top: 9px; font-size: 26px; line-height: .86; }
  .trial-stage-copy > p:not(.eyebrow, .trial-number) { margin-bottom: 17px; font-size: 13px; line-height: 1.42; }
  .trial-stage-copy .pill { width: 100%; padding: 11px 7px; font-size: 14px; white-space: normal; text-align: center; }
  .trial-stage-art {
    min-height: 100%;
    border-top: 0;
    border-left: 4px solid var(--ink);
    background: radial-gradient(circle at 50% 50%, #58e8ee 0 26%, #2e2994 27% 43%, #e32932 44% 59%, #160e29 60%);
  }
  .trial-burst { inset: 13% 5%; filter: drop-shadow(4px 5px 0 var(--ink)); }
  .trial-stage-art img { width: 86px; filter: drop-shadow(4px 5px 0 var(--ink)); }
  .trial-stage-art > b {
    right: 6px;
    bottom: 10px;
    padding: 7px 7px 5px;
    border-width: 3px;
    font-size: 20px;
    box-shadow: 3px 4px 0 var(--ink);
  }

  #plan { padding-top: 54px; }
  .picker-form { gap: 11px; }
  .field { padding: 15px 14px; }
  .field-head { margin-bottom: 11px; }
  .field-head b { font-size: 17px; }
  .field-head small { font-size: 10px; }
  .field-explainer { margin-bottom: 12px; font-size: 11.5px; }
  .stepper { grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 8px; }
  .stepper button { height: 46px; }
  .unlimited { padding: 9px 10px; font-size: 12px; }
  .unlimited > .smash-icon { width: 38px; height: 38px; }
  .option { grid-template-columns: 45px minmax(0, 1fr) 27px; gap: 9px; padding: 10px; }
  .option .smash-icon { width: 43px; height: 43px; }
  .periods { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .picker-total { padding: 20px 16px; border-width: 4px; }
  .total-price b { font-size: 44px; }

  .steps { gap: 11px; }
  .steps li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 0 13px; padding: 16px; }
  .step-no { grid-row: 1 / span 3; width: 42px; height: 42px; margin: 0; font-size: 22px; }
  .steps .eyebrow { margin: 0 0 5px; }
  .steps b { margin-bottom: 6px; font-size: 17px; }
  .steps small { font-size: 12.5px; line-height: 1.42; }

  .status-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { min-height: 126px; padding: 15px 13px; }
  .stat b { font-size: 38px; }
  .stat span { font-size: 9.5px; line-height: 1.25; }

  .faq-list { gap: 9px; }
  .faq-list summary { padding: 14px 13px; font-size: 15px; line-height: 1.12; }
  .faq-list details p { padding: 0 13px 15px; font-size: 13px; line-height: 1.5; }
  .footer { padding-inline: 18px; }
}

/* ---- wider screens ---- */

@media (min-width: 920px) {
  .topnav { display: flex; }
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
  .picker { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: 22px; }
  .plate { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .plate-feature { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
  .gaming-plate { grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); }
  .plate-flip .plate-copy { order: 2; border-left: 4px solid var(--ink); }
  .plate-flip .plate-art { order: 1; border-left: 0; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-art { aspect-ratio: 16 / 7; }
  .trial-stage { grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr); }
  .trial-stage-art { min-height: 100%; border-top: 0; border-left: 5px solid var(--ink); }
}

/* The reveal is added by the runtime, so the untouched state must be the
   readable one — never `opacity: 0` in the stylesheet, or a page whose script
   failed to load is blank. */
.will-rise {
  opacity: 1;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
}
.will-rise.is-in { opacity: 1; transform: none; }

/* Someone who has asked the system to stop moving things has asked for all of
   this too. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pill, .door-button, .card, .will-rise { transition: none; }
  .masthead::before, body::before, body::after, .faces-run { animation: none; }
}