/* ==========================================================================
   Streamly4K — Design System
   Brand: warm-black canvas, Sunset Ember gradient (#FF4D2E → #FF9A3D), Outfit + Inter
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --brand:        #FF4D2E;
  --brand-2:      #FF9A3D;
  --brand-3:      #FFC7A8;
  --brand-grad:   linear-gradient(104deg, #FF4D2E 0%, #FF9A3D 100%);
  --brand-grad-r: linear-gradient(104deg, #FF9A3D 0%, #FF4D2E 100%);
  --accent:       #FFD66B;

  /* Dark surfaces (default) */
  --bg:           #080605;
  --bg-2:         #0D0A09;
  --surface:      #131010;
  --surface-2:    #1A1614;
  --surface-3:    #241E1B;
  --line:         rgba(255, 255, 255, .09);
  --line-strong:  rgba(255, 255, 255, .16);

  /* Text */
  --text:         #FAF4F2;
  --text-2:       #D6C9C4;
  --muted:        #9A8B85;
  --on-brand:     #FFF4F0;

  /* Effects */
  --glow:         0 0 0 1px color-mix(in srgb, var(--brand) 24%, transparent), 0 18px 50px -18px color-mix(in srgb, var(--brand) 48%, transparent);
  --shadow-sm:    0 1px 2px rgba(0,0,0,.4);
  --shadow:       0 18px 40px -20px rgba(0,0,0,.85);
  --shadow-lg:    0 40px 90px -40px rgba(0,0,0,.9);

  /* Shape */
  --r-xs: 8px;
  --r-sm: 12px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* Layout */
  --wrap: 1200px;
  --wrap-narrow: 820px;
  --gutter: 20px;
  --nav-h: 72px;

  /* Type */
  --font-display: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  color-scheme: dark;
}

/* Light theme */
:root[data-theme="light"] {
  --bg:          #FFFFFF;
  --bg-2:        #FAF7F5;
  --surface:     #FFFFFF;
  --surface-2:   #F7F2EF;
  --surface-3:   #EDE5E0;
  --line:        rgba(26, 12, 8, .11);
  --line-strong: rgba(26, 12, 8, .19);
  --text:        #1A1210;
  --text-2:      #4A3B36;
  --muted:       #6E5D57;
  --brand:       #D93A1B;
  --brand-2:     #E07A12;
  --brand-3:     #9E2A12;
  --brand-grad:  linear-gradient(104deg, #D93A1B 0%, #E07A12 100%);
  --on-brand:    #FFFFFF;
  --glow:        0 0 0 1px color-mix(in srgb, var(--brand) 24%, transparent), 0 18px 40px -20px color-mix(in srgb, var(--brand) 36%, transparent);
  --shadow:      0 18px 40px -24px rgba(10,20,35,.28);
  --shadow-lg:   0 40px 90px -45px rgba(10,20,35,.3);
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--brand); color: var(--on-brand); }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.d1 { font-size: clamp(2.5rem, 6.6vw, 4.9rem); font-weight: 800; letter-spacing: -.04em; }
.d2 { font-size: clamp(2.1rem, 5.2vw, 3.7rem); font-weight: 800; letter-spacing: -.035em; }
.d3 { font-size: clamp(1.55rem, 3.2vw, 2.3rem); font-weight: 700; }
.d4 { font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 700; letter-spacing: -.02em; }

.grad {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: var(--text-2);
  line-height: 1.7;
  max-width: 62ch;
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand);
}

.muted { color: var(--muted); }
.small { font-size: .875rem; }
.xsmall { font-size: .8rem; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding: clamp(60px, 9vw, 116px) 0; position: relative; }
.section--tight { padding: clamp(44px, 6vw, 74px) 0; }
.section--alt { background: var(--bg-2); }
.section-head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head .eyebrow { display: block; margin-bottom: 14px; }
.section-head .lede { margin-inline: auto; margin-top: 16px; }

.grid { display: grid; gap: 20px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row-center { justify-content: center; }
.divider { height: 1px; background: var(--line); border: 0; }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.01em;
  padding: 15px 28px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  overflow: hidden;              /* clips the sheen sweep */
  isolation: isolate;
  transition:
    transform .2s cubic-bezier(.2,.8,.3,1),
    box-shadow .26s, background .26s, border-color .26s, color .26s;
  white-space: nowrap;
  cursor: pointer;
}
/* A specular sweep that crosses the button on hover. Sits under the label
   (z-index 0 vs the content's auto stacking) so it never dims the text. */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(104deg, transparent 34%, rgba(255,255,255,.3) 50%, transparent 66%);
  transform: translateX(-130%);
  transition: transform .8s cubic-bezier(.2,.75,.3,1);
  pointer-events: none;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover::after { transform: translateX(130%); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); transition-duration: .08s; }
.btn svg { width: 19px; height: 19px; flex-shrink: 0; position: relative; z-index: 1; }
.btn--lg svg { width: 21px; height: 21px; }
.btn--sm svg { width: 17px; height: 17px; }
/* trailing arrows lean into the direction of travel */
.btn:hover svg:last-child { transform: translateX(3px); }
.btn svg:last-child { transition: transform .26s cubic-bezier(.2,.8,.3,1); }

.btn--primary {
  /* wider ramp than the pill so the gradient can travel on hover */
  background: linear-gradient(104deg, var(--brand) 0%, var(--brand-2) 48%, var(--brand) 100%);
  background-size: 210% 100%;
  background-position: 0% 50%;
  color: var(--on-brand);
  box-shadow:
    0 14px 34px -14px color-mix(in srgb, var(--brand) 62%, transparent),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.14);
  transition:
    transform .2s cubic-bezier(.2,.8,.3,1),
    box-shadow .26s, background-position .55s cubic-bezier(.3,.7,.3,1);
}
.btn--primary:hover {
  background-position: 100% 50%;
  box-shadow:
    0 22px 48px -14px color-mix(in srgb, var(--brand) 82%, transparent),
    0 0 0 1px color-mix(in srgb, var(--brand-2) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.16);
}

.btn--ghost {
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  border-color: var(--line-strong);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .btn--ghost {
    background: color-mix(in srgb, var(--surface-2) 42%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(1.25);
    backdrop-filter: blur(12px) saturate(1.25);
  }
}
.btn--ghost:hover {
  background: color-mix(in srgb, var(--surface-3) 78%, transparent);
  border-color: color-mix(in srgb, var(--brand) 62%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 12px 30px -16px color-mix(in srgb, var(--brand) 55%, transparent);
}
.btn--ghost::after { background: linear-gradient(104deg, transparent 34%, rgba(255,255,255,.12) 50%, transparent 66%); }

.btn--solid {
  background: var(--brand);
  color: #fff;
  padding: 15px 26px;
  box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--brand) 78%, transparent),
              inset 0 1px 0 rgba(255,255,255,.22);
}
.btn--solid:hover {
  background: color-mix(in srgb, var(--brand) 88%, #fff);
  box-shadow: 0 18px 42px -12px color-mix(in srgb, var(--brand) 92%, transparent),
              inset 0 1px 0 rgba(255,255,255,.32);
}

.btn--outline { background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn--outline:hover { border-color: var(--brand); color: var(--brand); }

.btn--wa {
  background: linear-gradient(104deg, #25D366 0%, #4ae08a 50%, #25D366 100%);
  background-size: 210% 100%;
  color: #052e16;
  box-shadow: 0 14px 34px -16px rgba(37,211,102,.7), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .26s, background-position .55s;
}
.btn--wa:hover { background-position: 100% 50%; box-shadow: 0 20px 44px -16px rgba(37,211,102,.85), inset 0 1px 0 rgba(255,255,255,.42); }

.btn--sm { padding: 10px 18px; font-size: .9rem; }
.btn--lg { padding: 18px 34px; font-size: 1.06rem; }
.btn--block { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .btn::after { display: none; }
  .btn:hover { transform: none; }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 700; color: var(--brand);
  transition: gap .2s;
}
.link-arrow:hover { gap: 12px; }
.link-arrow svg { width: 17px; height: 17px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   6. PILLS / BADGES / CARDS
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px 8px 13px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  font-family: var(--font-display);
  font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 60%, transparent); animation: pulse 2.4s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.badge {
  display: inline-block; padding: 4px 11px; border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--brand-grad); color: var(--on-brand);
}
.badge--soft { background: var(--surface-3); color: var(--text-2); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: border-color .25s, transform .25s, background .25s;
}
.card--hover:hover { border-color: color-mix(in srgb, var(--brand) 45%, transparent); transform: translateY(-4px); }
.card__icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center; margin-bottom: 18px;
  background: color-mix(in srgb, var(--brand) 13%, transparent);
  color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
}
.card__icon svg { width: 22px; height: 22px; }
.card h3 { font-size: 1.12rem; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: .94rem; }

/* --------------------------------------------------------------------------
   7. HEADER / NAV
   -------------------------------------------------------------------------- */
.header {
  position: fixed; inset: 14px 0 auto; z-index: 100;
  transition: inset .3s, transform .35s;
}
.header__inner {
  max-width: var(--wrap); margin-inline: auto;
  margin-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  display: flex; align-items: center; gap: 18px;
  height: var(--nav-h); padding: 0 14px 0 22px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.header.is-stuck .header__inner {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
}

.logo { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo__mark { width: 32px; height: 32px; flex-shrink: 0; }
.logo__text {
  font-family: var(--font-display); font-weight: 800; font-size: 1.24rem;
  letter-spacing: -.035em; color: var(--text);
}
.logo__text span { color: var(--brand); }

.nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nav__link {
  position: relative;
  padding: 9px 15px; border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  color: var(--text-2); transition: color .2s, background .2s;
}
.nav__link:hover { color: var(--text); background: var(--surface-2); }
.nav__link.is-active { color: var(--brand); background: color-mix(in srgb, var(--brand) 11%, transparent); }

.nav__group { position: relative; }
.nav__group > .nav__link { display: inline-flex; align-items: center; gap: 6px; }
.nav__group > .nav__link svg { width: 13px; height: 13px; transition: transform .25s; }
.nav__group:hover > .nav__link svg { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translate(-50%, 8px);
  min-width: 312px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s;
}
.nav__group:hover .nav__menu, .nav__group:focus-within .nav__menu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.nav__menu a {
  display: flex; align-items: center; gap: 11px; white-space: nowrap;
  padding: 10px 12px; border-radius: var(--r-xs);
  font-size: .92rem; font-weight: 500; color: var(--text-2);
  transition: background .18s, color .18s;
}
/* Brand marks for the setup guides. Fixed-width slot so one mark and two
   marks leave their labels on the same line; the marks inherit the row's
   colour, so nothing is recoloured — they just follow hover like the text. */
.navmarks {
  display: inline-flex; align-items: center; justify-content: flex-start;
  gap: 5px; width: 40px; flex-shrink: 0;
}
.navmarks .plat { display: inline-flex; }
.navmarks .plat svg { width: 16px; height: 16px; color: inherit; opacity: .85; }
.navmarks--glyph svg { width: 17px; height: 17px; opacity: .85; }
.nav__menu a:hover .navmarks .plat svg,
.nav__menu a:hover .navmarks--glyph svg { opacity: 1; }
/* the drawer's sub-rows carry the same marks */
.drawer a.sub { display: flex; align-items: center; gap: 11px; }
.drawer a.sub .navmarks { width: 30px; }
.drawer a.sub .navmarks .plat svg { width: 13px; height: 13px; }
.nav__menu a:hover { background: var(--surface-2); color: var(--brand); }
.nav__menu a svg { width: 17px; height: 17px; opacity: .7; flex-shrink: 0; }

.header__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text-2); transition: color .2s, border-color .2s, background .2s;
}
.icon-btn:hover { color: var(--brand); border-color: var(--brand); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn .i-sun { display: none; }
:root[data-theme="light"] .icon-btn .i-sun { display: block; }
:root[data-theme="light"] .icon-btn .i-moon { display: none; }

.burger { display: none; }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  padding: 22px var(--gutter) 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2,.8,.3,1);
  display: flex; flex-direction: column;
}
.drawer.is-open { transform: translateX(0); }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.drawer__nav { display: flex; flex-direction: column; gap: 2px; }
.drawer__nav a {
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--text);
}
.drawer__nav a.sub { font-size: 1rem; font-weight: 500; color: var(--muted); padding-left: 16px; }
.drawer__foot { margin-top: 30px; display: grid; gap: 12px; }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* Tall enough to fill the first screen and let the poster wall read as a
     wall. svh (not vh) so mobile browser chrome doesn't push the CTA under
     the fold; the vh line is the fallback for older engines. */
  min-height: 92vh;
  min-height: min(92svh, 1040px);
  display: grid;
  align-content: center;
  padding: calc(var(--nav-h) + 32px) 0 clamp(36px, 4vw, 54px);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
}

/* --- poster wall ------------------------------------------------------- */
.hero__wall { position: absolute; inset: 0; z-index: -5; overflow: hidden; }
/* duotone: grayscale source + brand hue laid over it in `color` blend mode */
/* a warm wash over the posters — tints, never flattens */
/* This layer used to carry a brand-gradient wash over the wall, which is
   what tinted the whole hero orange. Removed outright rather than swapped
   for a black one: the veil below already handles legibility, and a black
   wash here only costs poster brightness. */
.wallpar { position: absolute; inset: 0; }
.wallgrid {
  --wall-gap: 6px;
  position: absolute; inset: -20% -12%;
  display: flex; gap: var(--wall-gap);
  transform: scale(1.04);
  filter: brightness(1.06) saturate(1.05) contrast(1.02) blur(2.1px);
}
.wallcol {
  flex: 1 1 0; min-width: 0;
  /* Must hug its content, not stretch to the grid: wallDrift translates by
     -50% of this box, and that only equals one tile set if the box IS the
     two sets. Stretched (the flex default) the loop jumps every cycle. */
  align-self: flex-start;
  display: flex; flex-direction: column; gap: var(--wall-gap);
  animation: wallDrift var(--dur, 78s) linear infinite;
  will-change: transform;
}
.wallcol--rev { animation-direction: reverse; }
.walltile {
  flex: 0 0 auto; aspect-ratio: 2 / 3; border-radius: 3px;
  background: var(--tile); position: relative; overflow: hidden;
  box-shadow: 0 2px 10px -4px rgba(0,0,0,.7);
}
/* faux title + credit bars so the tiles read as a poster grid at a glance */
.walltile::before {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 13%; height: 7%;
  border-radius: 1px; background: rgba(255,255,255,.55);
  box-shadow: 0 10px 0 -2px rgba(255,255,255,.3), 0 17px 0 -3px rgba(255,255,255,.22);
  z-index: 1;
}
.walltile::after {
  content: ""; position: absolute; inset: auto 0 0; height: 26%;
  background: linear-gradient(to top, rgba(0, 0, 0, .82), transparent);
}
.walltile img { width: 100%; height: 100%; object-fit: cover; }

/* --- real poster art --------------------------------------------------
   With studio one-sheets in the wall the faux title bars are redundant —
   the posters carry their own type. The artwork is graded back so it reads
   as texture rather than a catalogue, but a little of each poster's own
   colour is left in — enough to feel like film, not enough to fight the
   headline. Tiles that fell back to a local file keep the old treatment.

   --wall-colour is the single dial: 0 = full monochrome, 1 = untouched
   poster colour. Past ~.5 the wall starts competing with the CTA. */
.walltile--art::before { content: none; }
.wallgrid--art {
  --wall-colour: .34;
  /* Tiles are small, so the blur stays light — enough to stop the eye
     reading titles, not so much that the grid turns to mush. */
  filter:
    grayscale(calc(1 - var(--wall-colour)))
    saturate(calc(1 + var(--wall-colour) * .9))
    contrast(1.12) brightness(.95) blur(1.8px);  /* was .82 — the removed
       soft-light wash used to lift the wall, so this makes that back */
  opacity: .92;
}
.wallgrid--art .walltile { box-shadow: 0 2px 9px -4px rgba(0,0,0,.85); }
.wallgrid--art .walltile::after { height: 34%; }
/* The brand wash sits over the wall; ease it off a touch so it tints the
   remaining colour instead of flattening it back towards orange. */

/* Light theme: the text is dark, so the posters have to go the other way —
   printed pale, like a poster wall behind frosted glass. Brightness up and
   contrast down lifts the artwork clear of the type instead of muddying it,
   and the tile's dark bottom scrim is flipped to white (on a light page it
   reads as grime). */
:root[data-theme="light"] .wallgrid--art {
  filter:
    grayscale(calc(1 - var(--wall-colour)))
    saturate(calc(1 + var(--wall-colour) * 1.15))
    contrast(.88) brightness(1.34) blur(1.8px);
}
:root[data-theme="light"] .wallgrid--art .walltile::after {
  background: linear-gradient(to top, rgba(255,255,255,.6), transparent);
}
:root[data-theme="light"] .wallgrid--art .walltile {
  box-shadow: 0 2px 9px -5px rgba(60,40,30,.45);
}
/* -50% minus half the gap keeps the duplicated tile set seamless */
@keyframes wallDrift {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-50% - var(--wall-gap, 6px) / 2)); }
}

/* --- veil: keeps the headline legible over the wall -------------------- */
.hero__veil {
  position: absolute; inset: 0; z-index: -4;
  background:
    radial-gradient(1020px 640px at 50% 44%,
      rgba(0,0,0,.90) 0%, rgba(0,0,0,.78) 34%, rgba(0,0,0,.52) 68%, rgba(0,0,0,.28) 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 46%, transparent) 0%,
      transparent 22%,
      transparent 62%,
      color-mix(in srgb, var(--bg) 70%, transparent) 86%,
      var(--bg) 100%);
}
/* Generated tiles stay whisper-faint on white — they were never meant to
   carry the section. Real poster art does, so it gets to show. */
:root[data-theme="light"] .hero__wall { opacity: .3; }
:root[data-theme="light"] .hero__wall:has(.wallgrid--art) { opacity: .9; }

:root[data-theme="light"] .hero__veil {
  background:
    radial-gradient(760px 420px at 50% 6%, rgba(255,255,255,.55), rgba(255,255,255,.86) 58%, var(--bg) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 70%, transparent) 0%, var(--bg) 100%);
}
/* With posters behind it the veil stops being a blanket and becomes a
   spotlight: near-solid white under the headline, thinning towards the
   edges so the wall is visible where nothing has to be read. */
:root[data-theme="light"] .hero:has(.wallgrid--art) .hero__veil {
  background:
    radial-gradient(900px 520px at 50% 42%,
      rgba(255,255,255,.94) 0%, rgba(255,255,255,.84) 38%,
      rgba(255,255,255,.54) 70%, rgba(255,255,255,.26) 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 58%, transparent) 0%,
      transparent 26%,
      transparent 60%,
      color-mix(in srgb, var(--bg) 74%, transparent) 86%,
      var(--bg) 100%);
}

.hero__bg {
  position: absolute; inset: 0; z-index: -3;
  /* Was two brand-coloured glows. Now a colourless lift, so the hero has
     depth without a hue. */
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(255,255,255,.055), transparent 70%),
    radial-gradient(700px 420px at 88% 18%, rgba(255,255,255,.03), transparent 66%);
}
.hero__grid {
  position: absolute; inset: 0; z-index: -2; opacity: .5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 80% 55% at 50% 30%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 30%, #000 20%, transparent 78%);
}
.hero h1 { margin: 18px auto 0; max-width: 960px; }
.hero h1 .grad { background-size: 220% 100%; animation: shimmer 9s ease-in-out infinite; }
@keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hero .lede { margin: 18px auto 0; }
.hero__cta { margin-top: 28px; justify-content: center; gap: 14px; }
/* Trust row: glass chips rather than loose text, so it reads as a set and
   picks up the same material as the stat bar below it. */
.hero__trust {
  margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 9px;
}
.hero__trust span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  font-size: .82rem; font-weight: 500; color: var(--text-2);
  transition: border-color .24s, background .24s, transform .24s cubic-bezier(.2,.8,.3,1);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .hero__trust span {
    background: color-mix(in srgb, var(--surface) 28%, transparent);
    -webkit-backdrop-filter: blur(11px) saturate(1.3);
    backdrop-filter: blur(11px) saturate(1.3);
  }
}
.hero__trust span:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
/* the icon gets its own tinted disc */
.hero__trust svg {
  width: 15px; height: 15px; color: var(--brand);
  box-sizing: content-box; padding: 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  flex-shrink: 0;
}
:root[data-theme="light"] .hero__trust span {
  background: color-mix(in srgb, #fff 62%, transparent);
  border-color: rgba(26,12,8,.13);
}
/* Phones: the four promises go 2x2 rather than wrapping into a ragged
   1/2/1 stack. Equal tiles, left-aligned, icon disc leading — the set reads
   as a block and gives back ~25px above the fold. */
@media (max-width: 620px) {
  .hero__trust {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px;
  }
  .hero__trust span {
    justify-content: flex-start; text-align: left; align-items: center;
    min-height: 52px; padding: 9px 11px 9px 9px; border-radius: 14px;
    font-size: .74rem; line-height: 1.25; gap: 9px;
  }
  .hero__trust svg { width: 14px; height: 14px; padding: 6px; }
}

.ratingcard {
  margin: 34px auto 0; display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 20px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
}
.ratingcard__stars { display: flex; gap: 2px; color: var(--accent); }
.ratingcard__stars svg { width: 16px; height: 16px; }
.ratingcard strong { font-family: var(--font-display); }

/* --- Trustpilot slot ---------------------------------------------------
   Shows an invitation until a verified score is configured, then the score.
   Trustpilot green (#00B67A) on the star only — the wordmark stays plain
   text, because reproducing their logo lockup needs their own TrustBox. */
.tp { margin-top: 14px; display: flex; justify-content: center; }
/* Solid Trustpilot green. Their brighter #00B67A only reaches 2.63:1 against
   white text — below the 4.5:1 readability floor — so the pill uses the
   darker green from the same family (4.55:1) and keeps #00B67A for the glow. */
.tp__link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(104deg, #009463 0%, #00875A 55%, #007A52 100%);
  background-size: 180% 100%;
  color: #fff;
  font-size: .9rem; font-weight: 500;
  box-shadow:
    0 12px 28px -14px rgba(0,182,122,.75),
    inset 0 1px 0 rgba(255,255,255,.24);
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .26s, background-position .5s;
}
.tp__link:hover {
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow:
    0 18px 38px -14px rgba(0,182,122,.9),
    0 0 0 1px rgba(0,182,122,.5),
    inset 0 1px 0 rgba(255,255,255,.34);
}
.tp__star { display: inline-flex; color: #fff; }
.tp__star svg { width: 18px; height: 18px; }
.tp__link strong { font-family: var(--font-display); font-weight: 700; color: #fff; }
.tp__score { display: inline-flex; align-items: center; gap: 8px; }
.tp__stars { display: inline-flex; gap: 2px; color: #fff; }
.tp__stars svg { width: 15px; height: 15px; }
.tp__of { color: rgba(255,255,255,.72); margin-left: -4px; }
.tp__count { font-size: .82rem; color: rgba(255,255,255,.8); }
.tp__score[hidden], .tp__rated[hidden] { display: none; }

/* --------------------------------------------------------------------------
   9. STATS
   -------------------------------------------------------------------------- */
/* The stat bar sits inside the hero, over the poster wall — frosted glass
   with a hairline border, so the numbers read without blacking out the art.
   backdrop-filter is progressive: browsers without it fall back to the flat
   translucent background below, which is why that background is opaque
   enough to carry the text on its own. */
.statbar {
  margin: clamp(18px, 2vw, 26px) auto 0;
  max-width: 980px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  box-shadow:
    0 24px 60px -30px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,255,255,.07);
  overflow: hidden;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .statbar {
    background: color-mix(in srgb, var(--surface) 34%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
  }
}
:root[data-theme="light"] .statbar {
  background: color-mix(in srgb, #fff 70%, transparent);
  border-color: rgba(26,12,8,.14);
  box-shadow:
    0 22px 50px -32px rgba(60,35,20,.4),
    inset 0 1px 0 rgba(255,255,255,.7);
}

.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats__item { padding: 30px 18px; text-align: center; border-left: 1px solid var(--line); }
.stats__item:first-child { border-left: 0; }
.statbar .stats__item { padding: clamp(13px, 1.5vw, 18px) 12px; }
.statbar .stats__num { font-size: clamp(1.45rem, 2.3vw, 2.05rem); }
.statbar .stats__label { margin-top: 6px; font-size: .68rem; letter-spacing: .13em; }
.stats__num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.9rem, 4.2vw, 3rem); letter-spacing: -.04em; line-height: 1;
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stats__label {
  margin-top: 10px; font-size: .74rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--muted);
}

/* --------------------------------------------------------------------------
   9b. FILM ROWS — two counter-scrolling poster rails over a poster wash
   -------------------------------------------------------------------------- */
.filmwrap {
  position: relative;
  padding: clamp(34px, 5vw, 62px) 0 clamp(30px, 4vw, 50px);
  isolation: isolate;
  overflow: hidden;
  border-block: 1px solid var(--line);
}

/* Backdrop: the hero's machinery, but the artwork is allowed to read —
   big soft tiles, real colour, vignette so the cards stay on top. */
.filmwrap__wall { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.filmwrap__wallgrid {
  --wall-gap: 8px;
  --wall-colour: .8;
  position: absolute; inset: -30% -8%;
  display: flex; gap: var(--wall-gap);
  transform: scale(1.06);
  filter: grayscale(calc(1 - var(--wall-colour))) saturate(1.1)
          contrast(1.04) brightness(.88) blur(11px);
  opacity: 1;
}
:root[data-theme="light"] .filmwrap__wallgrid {
  filter: grayscale(calc(1 - var(--wall-colour))) saturate(1.05)
          contrast(.95) brightness(1.12) blur(11px);
  opacity: .72;
}
.filmwrap__veil {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(115% 80% at 50% 46%,
      transparent 0%,
      color-mix(in srgb, var(--bg) 20%, transparent) 52%,
      color-mix(in srgb, var(--bg) 72%, transparent) 100%),
    linear-gradient(180deg, var(--bg) 0%,
      color-mix(in srgb, var(--bg) 22%, transparent) 12%,
      color-mix(in srgb, var(--bg) 22%, transparent) 86%, var(--bg) 100%);
}

/* ---- the two rails ---- */
.filmrows { position: relative; display: grid; gap: clamp(10px, 1.2vw, 18px); }

.frow { overflow: hidden; }
.frow__track {
  display: flex; gap: clamp(10px, 1.2vw, 18px);
  width: max-content;
  will-change: transform;
  /* Declared here, not inline: an inline `animation` shorthand also sets
     animation-play-state, which would beat the :hover pause rule below. */
  animation: fRowL var(--row-dur, 90s) linear infinite;
}
.frow--r .frow__track { animation-name: fRowR; }
/* second rail starts half a card along, so the two never line up in columns.
   --fcard-measured is written by main.js and is READ-ONLY here: the card's own
   width stays the fluid clamp below, so a resize reflows immediately instead
   of holding a stale pixel value until the debounce fires. */
.frow--l .frow__track { margin-left: calc(var(--fcard-measured, 176px) / -2); }

.frow:hover .frow__track,
.frow:focus-within .frow__track { animation-play-state: paused; }

@keyframes fRowL {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - clamp(10px, 1.2vw, 18px) / 2)); }
}
@keyframes fRowR {
  from { transform: translateX(calc(-50% - clamp(10px, 1.2vw, 18px) / 2)); }
  to   { transform: translateX(0); }
}

/* ---- edge shadows: cards fade out rather than being sliced ---- */
.filmrows__edge {
  position: absolute; top: -14px; bottom: -14px; z-index: 3;
  width: clamp(70px, 13vw, 260px); pointer-events: none;
}
.filmrows__edge--l {
  left: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 42%, transparent 100%);
}
.filmrows__edge--r {
  right: 0;
  background:
    linear-gradient(270deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 42%, transparent 100%);
}

/* ---- the card ---- */
.fcard {
  position: relative;
  flex: 0 0 auto;
  width: clamp(138px, 12.2vw, 182px);
  aspect-ratio: 2 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 20px 44px -18px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.25);
  transition: transform .34s cubic-bezier(.2,.8,.3,1), box-shadow .34s, border-color .34s;
}
:root[data-theme="light"] .fcard { border-color: rgba(26,12,8,.14); box-shadow: 0 16px 34px -22px rgba(50,30,20,.5); }
.fcard__art { width: 100%; height: 100%; object-fit: cover; }
.fcard__shade {
  position: absolute; inset: auto 0 0; height: 58%;
  background: linear-gradient(to top, rgba(6,4,3,.94) 8%, rgba(6,4,3,.72) 38%, transparent 100%);
}
/* a light sweep that crosses the poster on hover */
.fcard__sheen {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(104deg, transparent 32%, rgba(255,255,255,.26) 48%, transparent 64%);
  transform: translateX(-120%);
  transition: transform .75s cubic-bezier(.2,.75,.3,1);
}
.fcard__meta { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; }
.fcard__tag {
  display: inline-block; margin-bottom: 6px;
  padding: 3px 7px; border-radius: 4px;
  background: var(--brand-grad); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  font-size: .58rem; letter-spacing: .07em; text-transform: uppercase;
  line-height: 1.35;
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--brand) 85%, transparent);
}
.fcard__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: .82rem; line-height: 1.22; letter-spacing: -.01em; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.75);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fcard__sub {
  margin-top: 3px; display: flex; align-items: center; gap: 5px;
  font-size: .68rem; color: rgba(255,255,255,.7);
}
.fcard__sub svg { width: 12px; height: 12px; color: var(--brand-2); flex-shrink: 0; }

.fcard:hover, .fcard:focus-visible {
  transform: translateY(-8px) scale(1.035);
  border-color: color-mix(in srgb, var(--brand) 62%, transparent);
  box-shadow:
    0 30px 58px -20px rgba(0,0,0,.95),
    0 0 0 1px color-mix(in srgb, var(--brand) 42%, transparent),
    0 14px 46px -12px color-mix(in srgb, var(--brand) 52%, transparent);
  outline: none;
  z-index: 4;
}
.fcard:hover .fcard__sheen, .fcard:focus-visible .fcard__sheen { transform: translateX(120%); }

.filmgrid__notes {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 46px;
  margin-top: clamp(24px, 3vw, 38px);
  font-size: .9rem; color: var(--text-2);
}
.filmgrid__notes span { display: inline-flex; align-items: center; gap: 9px; }
.filmgrid__notes svg { width: 18px; height: 18px; color: var(--brand); flex-shrink: 0; }

@media (max-width: 620px) {
  .fcard { width: clamp(118px, 34vw, 150px); }
  .filmrows { gap: 10px; }
  .filmgrid__notes { gap: 8px 22px; font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .frow__track { animation: none !important; margin-left: 0 !important; }
  .frow { overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   10. MARQUEE (channel chips)
   -------------------------------------------------------------------------- */
.marquee { position: relative; overflow: hidden; padding: 6px 0; }
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(48px, 10vw, 170px); z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.section--alt .marquee::before { background: linear-gradient(90deg, var(--bg-2), transparent); }
.section--alt .marquee::after { background: linear-gradient(270deg, var(--bg-2), transparent); }

.marquee__track { display: flex; gap: 12px; width: max-content; animation: slide 46s linear infinite; }
.marquee__track--rev { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

/* A chip showing a supplied logo file instead of the channel name. The
   image is never recoloured — supply light/white artwork for the dark
   surface. See assets/img/logos/README.txt. */
.chip--logo { padding: 0 18px; }
.chip--logo img {
  max-width: 116px; max-height: 34px; width: auto; height: auto;
  object-fit: contain; opacity: .78;
  transition: opacity .22s;
}
.chip--logo:hover img { opacity: 1; }
:root[data-theme="light"] .chip--logo img { filter: brightness(.25) saturate(0); }

.chip {
  flex-shrink: 0;
  display: grid; place-items: center;
  min-width: 152px; height: 74px; padding: 0 22px;
  border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 700; font-size: .98rem;
  letter-spacing: -.01em; color: var(--text-2);
  text-align: center;
  transition: border-color .22s, color .22s, transform .22s;
}
.chip:hover { border-color: color-mix(in srgb, var(--brand) 50%, transparent); color: var(--text); transform: translateY(-3px); }
.chip img { max-height: 34px; width: auto; object-fit: contain; }

/* --------------------------------------------------------------------------
   11. POSTER GRID
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   12. SAVINGS / RECEIPT
   -------------------------------------------------------------------------- */
.savings { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(30px, 5vw, 70px); align-items: center; }

/* --- ambient orange wash behind the savings section ----------------------
   Two slow-drifting radials: a warm pool under the card stack on the left
   and a fainter one behind the heading. Purely decorative, sits under the
   content, and never touches the text's own contrast. */
.savingsec { position: relative; isolation: isolate; overflow: hidden; }
.savingsec > .wrap { position: relative; z-index: 1; }
.savingsec__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(56% 62% at 24% 58%,
      color-mix(in srgb, var(--brand) 44%, transparent) 0%,
      color-mix(in srgb, var(--brand-2) 22%, transparent) 34%,
      color-mix(in srgb, var(--brand) 9%, transparent) 60%,
      transparent 78%),
    radial-gradient(48% 54% at 80% 20%,
      color-mix(in srgb, var(--brand-2) 24%, transparent) 0%,
      transparent 70%),
    radial-gradient(70% 60% at 50% 110%,
      color-mix(in srgb, var(--brand) 14%, transparent) 0%,
      transparent 70%);
  filter: blur(18px);
  animation: savGlow 16s ease-in-out infinite alternate;
}
@keyframes savGlow {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1);    opacity: .9; }
  to   { transform: translate3d(1.5%, 1.5%, 0) scale(1.07); opacity: 1; }
}
/* grain, so the large soft gradients don't band on wide displays */
.savingsec__glow::after {
  content: ""; position: absolute; inset: -10%;
  background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,.028) 0.5px, transparent 0.6px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}
:root[data-theme="light"] .savingsec__glow { opacity: .5; filter: blur(26px); }
@media (prefers-reduced-motion: reduce) { .savingsec__glow { animation: none; } }

/* --- collapsing subscription stack --------------------------------------
   Six branded cards fanned out; on reveal (or replay) they fold away one
   after another and the Streamly4K card scales up. Each card's palette
   comes from data.STACK as --bg/--fg; there are no logos, so the colour
   and the type do all the identifying work. */
.stackfx {
  position: relative;
  min-height: clamp(492px, 50vw, 548px);
  display: grid; place-items: center;
  /* the caption is absolutely placed at the bottom — reserve its band so the
     centred list can never sit on top of it */
  padding-bottom: 96px;
  outline: none;
}

/* ---- the rows ----
   Each row wears its service's own palette (--bg/--fg from data.STACK).
   Aligned, never overlapping, so every name and price stays readable at any
   frame of the animation — which is the whole point of this treatment. */
/* Faded rows keep their layout box, so without this the surviving row would
   sit at the bottom of the list and collide with the caption. main.js
   measures the list and sets --shift; the container glides up by exactly the
   amount that re-centres the final row. */
.srows {
  display: flex; flex-direction: column; gap: 8px;
  width: min(100%, 330px);
  transition: transform .55s cubic-bezier(.3,.85,.35,1) .42s;
}
.stackfx.is-done .srows { transform: translateY(var(--shift, 0px)); }

.srow {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 15px;
  border-radius: 12px;
  background: var(--bg, #fff);
  color: var(--fg, #111);
  border: 1px solid rgba(255,255,255,.1);
  outline: 1px solid rgba(26,12,8,.07); outline-offset: -1px;
  box-shadow: 0 12px 26px -18px rgba(0,0,0,.9);
  transition:
    transform .44s cubic-bezier(.3,.85,.35,1),
    opacity .34s ease;
  transition-delay: 0s;
}
.srow__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: .95rem; letter-spacing: -.015em; line-height: 1.2;
}
.srow__price { font-family: var(--font-mono); font-size: .82rem; opacity: .72; white-space: nowrap; }
.srow__price i { font-style: normal; opacity: .7; margin-left: 2px; }

/* the line that strikes each row out, drawn left to right */
.srow__strike {
  position: absolute; left: 13px; right: 13px; top: 50%;
  height: 2px; border-radius: 2px; background: #E5484D;
  box-shadow: 0 0 10px rgba(229,72,77,.65);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
  transition-delay: 0s;
}
.stackfx.is-done .srow__strike { transition-delay: calc(var(--i, 0) * 85ms); }
.stackfx.is-done .srow__strike { transform: scaleX(1); }

/* struck, then slid away */
.stackfx.is-done .srow:not(.srow--us) {
  transform: translateX(-42px); opacity: 0;
  transition-delay: calc(var(--i, 0) * 85ms + 300ms);
}

.srow--us {
  --i: 6;
  background: var(--brand-grad);
  color: #fff; border: 0; outline: 0;
  padding: 15px 17px;
  box-shadow: 0 20px 44px -20px color-mix(in srgb, var(--brand) 75%, transparent);
  transform: scale(.94); opacity: .5;
  transition-delay: 0s;
}
.srow--us .srow__name { font-size: 1.05rem; }
.srow--us .srow__price { opacity: .9; }
.stackfx.is-done .srow--us {
  transform: scale(1.04); opacity: 1;
  transition-delay: .92s;
  animation: usGlow 3s ease-in-out infinite;
}
@keyframes usGlow {
  0%, 100% { box-shadow: 0 20px 44px -20px color-mix(in srgb, var(--brand) 75%, transparent); }
  50%      { box-shadow: 0 24px 54px -18px color-mix(in srgb, var(--brand) 95%, transparent); }
}
:root[data-theme="light"] .srow {
  box-shadow: 0 12px 24px -18px rgba(40,22,12,.5);
  outline-color: rgba(26,12,8,.14);
}

.stackfx__count {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; white-space: nowrap;
}
.stackfx__line { display: inline-flex; align-items: baseline; gap: 9px; }
.stackfx__n {
  font-family: var(--font-display); font-weight: 800; font-size: 2.3rem;
  letter-spacing: -.035em; line-height: 1;
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: transform .3s cubic-bezier(.2,1.6,.4,1);
}
.stackfx__w {
  font-family: var(--font-display); font-weight: 700; font-size: 1.12rem;
  letter-spacing: -.01em; color: var(--brand-2);
}
.stackfx__price {
  font-family: var(--font-display); font-weight: 700; font-size: 1.16rem;
  letter-spacing: -.015em; line-height: 1.2;
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stackfx.is-done .stackfx__n { transform: scale(1.14); }

@media (max-width: 560px) {
  .stackfx { min-height: 488px; padding-bottom: 104px; }
  .srow { padding: 10px 13px; }
  .srow__name { font-size: .88rem; }
  .stackfx__n { font-size: 1.95rem; }
  .stackfx__w { font-size: 1rem; }
  .stackfx__price { font-size: 1.02rem; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .srow, .srow__strike, .stackfx.is-done .srow--us { transition-duration: .001ms; transition-delay: 0s; }
}

.scribble { font-family: "Caveat", cursive; color: var(--brand); font-size: 1.35rem; line-height: 1.15; }

.mathtable { width: 100%; border-collapse: collapse; margin: 26px 0 0; }
.mathtable th {
  font-family: var(--font-display); font-size: .7rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
  text-align: right; padding-bottom: 12px;
}
.mathtable th:first-child { text-align: left; }
.mathtable td { padding: 15px 0; border-top: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
.mathtable td:first-child { text-align: left; color: var(--text-2); }
.mathtable tr.is-us td { font-family: var(--font-display); font-weight: 700; }
.mathtable tr.is-save td { color: var(--brand); font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; border-top: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); }

/* --------------------------------------------------------------------------
   13. PRICING BUILDER
   -------------------------------------------------------------------------- */
/* Shared controls used by the wizard (and the pricing page) — these were
   collateral damage when the old .builder block was replaced. */
.field-label { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.field-label h3 { font-size: 1.16rem; }
.field-label span { font-size: .85rem; color: var(--muted); }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg-2); }
.stepper button { width: 50px; height: 54px; display: grid; place-items: center; color: var(--text-2); transition: background .2s, color .2s; }
.stepper button:hover { background: var(--surface-3); color: var(--brand); }
.stepper button:disabled { opacity: .3; cursor: not-allowed; }
.stepper__val { min-width: 112px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; border-inline: 1.5px solid var(--line); height: 54px; display: grid; place-items: center; }
.devices { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 16px; color: var(--muted); font-size: .84rem; }
.devices svg { width: 19px; height: 19px; }

/* Platform marks heading a setup card — sized to match the icon tile the
   other cards use, so a row of mixed cards still lines up. */
.card__marks {
  display: flex; align-items: center; gap: 12px;
  height: 44px; margin-bottom: 16px;
}
.card__marks .plat svg {
  width: 30px; height: 30px;
  color: var(--brand);
  opacity: 1;
}
.card--hover:hover .card__marks .plat svg { color: var(--brand-2); transform: translateY(-2px); }
@media (max-width: 620px) { .card__marks .plat svg { width: 26px; height: 26px; } }

/* Platform compatibility marks. Monochrome by default so twelve different
   brand palettes don't turn the step into a sticker sheet; each lifts to
   full white and its own colour hint on hover. */
.plats {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 15px 18px;
  margin-top: 16px;
}
.plat { display: inline-flex; }
.plat svg {
  /* wordmarks (Samsung, Sony, Roku, LG) are drawn to fill a 24x24 box, so
     they need more px than a glyph mark to stay legible */
  width: 27px; height: 27px;
  color: var(--muted);
  opacity: .85;
  transition: color .22s, opacity .22s, transform .22s cubic-bezier(.2,.8,.3,1);
}
.plat:hover svg { color: var(--text); opacity: 1; transform: translateY(-2px) scale(1.08); }
.plats__note { margin-top: 14px; font-size: .82rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 680px) { .plats { gap: 12px 15px; } .plat svg { width: 24px; height: 24px; } }

/* --------------------------------------------------------------------------
   PLAN WIZARD — term, then screens, then total
   -------------------------------------------------------------------------- */
.wizard {
  position: relative;
  display: block;                 /* .wizcols owns the column split now */
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 40px 90px -46px rgba(0,0,0,.95);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .wizard { background: color-mix(in srgb, var(--surface) 62%, transparent);
            -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
}
:root[data-theme="light"] .wizard {
  background: color-mix(in srgb, #fff 82%, transparent);
  border-color: rgba(26,12,8,.14);
  box-shadow: 0 36px 76px -50px rgba(50,30,20,.5);
}
.wizard__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 70% at 88% 50%, color-mix(in srgb, var(--brand) 26%, transparent) 0%, transparent 72%),
    radial-gradient(44% 60% at 8% 18%, color-mix(in srgb, var(--brand-2) 13%, transparent) 0%, transparent 70%);
  filter: blur(14px);
}

.wstep { padding: clamp(22px, 2.6vw, 34px); border-right: 1px solid var(--line); min-width: 0; }
.wstep:last-child { border-right: 0; }

/* the step number, with a hairline running on to the next step */
.wstep__hd { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.wstep__n {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-grad); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: .84rem;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand) 85%, transparent);
  position: relative;
}
.wstep__hd h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.02em; line-height: 1.2; }
/* scoped to the text column: .wstep__n is also a <span> in this header and
   a bare `.wstep__hd span` rule outranks it, painting the number muted grey
   on an orange disc — invisible */
.wstep__hd > div > span { display: block; margin-top: 2px; font-size: .82rem; color: var(--muted); }
.wstep__note { margin-top: 12px; font-size: .84rem; color: var(--muted); }

/* ---- step 1: term rows ---- */
/* Three across once the column is wide enough; the card stacks its own
   contents so the price sits under the term name rather than beside it. */
.wterms { display: grid; gap: 10px; }
@media (min-width: 620px) {
  .wizcol--pick .wterms { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .wizcol--pick .wterm {
    flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 16px 16px 15px;
  }
  .wizcol--pick .wterm__main { flex: none; width: 100%; }
  .wizcol--pick .wterm__name { display: inline; font-size: .96rem; }
  .wizcol--pick .wterm__tag {
    display: inline; font-size: .78rem;
  }
  .wizcol--pick .wterm__tag::before { content: " · "; color: var(--muted); }
  .wizcol--pick .wterm__nums { text-align: left; width: 100%; }
  .wizcol--pick .wterm__price { font-size: 1.44rem; }
  .wizcol--pick .wterm__per { margin-top: 2px; }
  .wizcol--pick .wterm__tick { top: 16px; right: 14px; transform: scale(.6); }
  .wizcol--pick .wterm.is-on .wterm__tick { transform: scale(1); }
}
.wterm {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 14px 44px 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  color: var(--text); cursor: pointer;
  transition: border-color .22s, background .22s, transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s;
}
.wterm:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 55%, transparent); }
.wterm.is-on {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 13%, var(--surface-2));
  box-shadow: 0 0 0 1px var(--brand), 0 18px 40px -22px color-mix(in srgb, var(--brand) 90%, transparent);
}
.wterm__main { flex: 1; min-width: 0; }
.wterm__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -.015em; }
.wterm__tag { display: block; font-size: .78rem; color: var(--muted); }
.wterm__nums { text-align: right; flex: none; }
.wterm__price { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.24rem; letter-spacing: -.03em; line-height: 1.1; }
.wterm__per { display: block; font-size: .74rem; color: var(--muted); }
.wterm__tick {
  position: absolute; right: 15px; top: 50%; transform: translateY(-50%) scale(.6);
  width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: 50%; background: var(--brand); color: #fff;
  opacity: 0; transition: opacity .22s, transform .28s cubic-bezier(.2,1.6,.4,1);
}
.wterm__tick svg { width: 12px; height: 12px; }
.wterm.is-on .wterm__tick { opacity: 1; transform: translateY(-50%) scale(1); }
.wterm__flag {
  position: absolute; top: -9px; left: 14px;
  background: var(--brand-grad); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px;
  box-shadow: 0 6px 14px -5px color-mix(in srgb, var(--brand) 85%, transparent);
}

/* ---- step 3: total ---- */
.wstep--total { background: color-mix(in srgb, var(--brand) 9%, transparent); }
:root[data-theme="light"] .wstep--total { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.wtotal { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.wtotal__amount {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.5rem, 5.6vw, 3.5rem); letter-spacing: -.045em; line-height: 1;
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wtotal__per { color: var(--text-2); font-size: .95rem; }
.wtotal__meta { color: var(--muted); font-size: .88rem; margin-top: 8px; }

/* ---- footer strip under the wizard ---- */
.wizfoot {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(26px, 3vw, 40px);
}

@media (max-width: 1000px) {
  .wizfoot { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
}


.incl { display: grid; gap: 10px; }
.incl__item { display: flex; gap: 12px; padding: 13px 15px; border-radius: var(--r-sm); background: var(--bg-2); border: 1px solid var(--line); }
.incl__item svg { width: 19px; height: 19px; color: var(--brand); flex-shrink: 0; margin-top: 2px; }
.incl__item b { font-family: var(--font-display); font-size: .94rem; }
.incl__item span { color: var(--muted); font-size: .86rem; }
.incl-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.guarantees { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.guarantee { text-align: center; }
.guarantee svg { width: 21px; height: 21px; color: var(--muted); margin-inline: auto; }
.guarantee b { display: block; font-family: var(--font-display); font-size: .88rem; margin-top: 8px; }
.guarantee span { font-size: .78rem; color: var(--muted); }

.paylogos { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.paylogo {
  height: 40px; min-width: 62px; padding: 0 13px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .72rem; color: var(--text-2);
  letter-spacing: .02em;
  transition: border-color .2s, background .2s;
}
.paylogo:hover { border-color: var(--line-strong); background: var(--surface-3); }
/* Tile holding an official badge. The artwork keeps its own colours — no
   filters, recolouring or drop-shadows, which the card brand guidelines
   forbid. Several of the marks are black or dark blue, so the tile stays
   white in BOTH themes: that is the background the guidelines assume, and
   it is the only way the dark marks stay legible on the dark theme. */
.paylogo--art {
  padding: 0 12px; min-width: 84px;
  background: #fff; border-color: rgba(12,10,20,.16);
}
.paylogo--art:hover { background: #fff; border-color: rgba(12,10,20,.30); }
.paylogo--art img { max-height: 26px; max-width: 68px; width: auto; height: auto; object-fit: contain; }
/* Wise's primary mark is Bright Green, which their guidelines pair with the
   Forest Green background — on white it reads as washed out, so the tile
   carries the background the mark was drawn for. The mark itself is untouched. */
.paylogo--art[data-pay="wise"],
.paylogo--art[data-pay="wise"]:hover { background: #163300; border-color: #163300; }
:root[data-theme="light"] .paylogo:not(.paylogo--art) {
  background: #fff; border-color: rgba(26,12,8,.14); color: var(--text-2);
}

/* Plan cards (pricing page) */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 32px 28px; border-radius: var(--r-xl); border: 1.5px solid var(--line); background: var(--surface); }
.plan ul { flex: 1; }
.plan--best { border-color: var(--brand); box-shadow: var(--glow); }
.plan__flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); }
.plan__name { font-family: var(--font-display); font-weight: 700; font-size: 1.16rem; }
.plan__price { font-family: var(--font-display); font-weight: 800; font-size: 3rem; letter-spacing: -.04em; margin: 14px 0 2px; line-height: 1; }
.plan__per { color: var(--muted); font-size: .9rem; }
.plan ul { margin: 24px 0; display: grid; gap: 11px; }
.plan li { display: flex; gap: 10px; font-size: .92rem; color: var(--text-2); }
.plan li svg { width: 17px; height: 17px; color: var(--brand); flex-shrink: 0; margin-top: 4px; }

/* --------------------------------------------------------------------------
   14. STEPS
   -------------------------------------------------------------------------- */
.step { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, .95fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(34px, 5vw, 58px) 0; border-top: 1px solid var(--line); }
.step:first-of-type { border-top: 0; }
.step__num {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(3.4rem, 8vw, 6rem);
  line-height: .85; letter-spacing: -.06em;
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.step__body h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 12px; }
.step__body p { color: var(--muted); max-width: 46ch; }

.mini-plan { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); transition: border-color .2s, transform .2s; }
.mini-plan + .mini-plan { margin-top: 10px; }
.mini-plan:hover { border-color: var(--line-strong); transform: translateX(3px); }
.mini-plan.is-best { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.mini-plan b { font-family: var(--font-display); flex: 1; font-size: .98rem; }
.mini-plan > svg { width: 18px; height: 18px; color: var(--brand); flex-shrink: 0; }
.mini-plan .p { font-family: var(--font-display); font-weight: 800; font-size: 1.24rem; }
.mini-plan .t { font-size: .8rem; color: var(--muted); }

.mailcard { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); padding: 22px; box-shadow: var(--shadow); }
.mailcard__top { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.mailcard__avatar { width: 38px; height: 38px; border-radius: 11px; background: var(--brand-grad); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; color: var(--on-brand); }
.mailcard__from b { display: block; font-family: var(--font-display); font-size: .95rem; }
.mailcard__from span { font-size: .78rem; color: var(--muted); }
.mailcard__when { margin-left: auto; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mailcard__subj { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; }
.mailcard h4 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 16px; }
.credrow { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px dashed var(--line); font-family: var(--font-mono); font-size: .82rem; }
.credrow span:first-child { color: var(--muted); letter-spacing: .1em; font-size: .7rem; text-transform: uppercase; font-family: var(--font-body); }

/* --------------------------------------------------------------------------
   15. ACCORDION
   -------------------------------------------------------------------------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px; text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--text);
  transition: color .2s;
}
.acc__q:hover { color: var(--brand); }
.acc__q .ico { width: 26px; height: 26px; flex-shrink: 0; position: relative; }
.acc__q .ico::before, .acc__q .ico::after {
  content: ""; position: absolute; inset: 50% 4px auto; height: 2px; background: currentColor; border-radius: 2px; transition: transform .28s;
}
.acc__q .ico::after { transform: rotate(90deg); }
.acc__item.is-open .acc__q { color: var(--brand); }
.acc__item.is-open .ico::after { transform: rotate(0); }
.acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.2,.8,.3,1); }
.acc__item.is-open .acc__a { grid-template-rows: 1fr; }
.acc__a > div { overflow: hidden; }
.acc__a p { color: var(--muted); padding: 0 40px 24px 4px; max-width: 78ch; }

/* --------------------------------------------------------------------------
   16. REVIEWS
   -------------------------------------------------------------------------- */
.reviews { columns: 3; column-gap: 20px; }
.review { break-inside: avoid; margin-bottom: 20px; padding: 24px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.review__stars { display: flex; gap: 2px; color: var(--accent); margin-bottom: 14px; }
.review__stars svg { width: 15px; height: 15px; }
.review p { color: var(--text-2); font-size: .95rem; }
.review__who { display: flex; align-items: center; gap: 11px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.review__av { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .82rem; color: var(--text-2); }
.review__who b { font-family: var(--font-display); font-size: .88rem; display: block; }
.review__who span { font-size: .76rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   17. CTA BAND + FOOTER
   -------------------------------------------------------------------------- */
.ctaband {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-xl); padding: clamp(40px, 6vw, 76px) clamp(24px, 4vw, 60px);
  background: var(--surface); border: 1px solid var(--line); text-align: center;
}
.ctaband::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(700px 320px at 50% 0%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 70%);
}

/* --- photo-backed CTA band ---
   The scrim does the work: a photograph behind centred copy is only safe
   if something guarantees the contrast, and "the image happens to be dark
   there" is not a guarantee. Measured, not eyeballed. */
.ctaband--photo { background: #0b0807; border-color: var(--line-strong); }
.ctaband--photo::before { z-index: 1; opacity: .38; }
.ctaband__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  filter: saturate(.92) contrast(1.02);
}
.ctaband__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(74% 82% at 50% 50%, rgba(8,6,5,.74) 0%, rgba(8,6,5,.56) 44%, rgba(8,6,5,.3) 76%, rgba(8,6,5,.2) 100%),
    linear-gradient(180deg, rgba(8,6,5,.6) 0%, rgba(8,6,5,.26) 36%, rgba(8,6,5,.34) 70%, rgba(8,6,5,.74) 100%);
}
.ctaband--photo > *:not(.ctaband__bg):not(.ctaband__scrim) { position: relative; z-index: 2; }
.ctaband--photo .lede,
.ctaband--photo .xsmall { color: #E4D9D4; }
.ctaband--photo h2 { text-shadow: 0 2px 18px rgba(0,0,0,.6); }
:root[data-theme="light"] .ctaband--photo { background: #0b0807; }
:root[data-theme="light"] .ctaband--photo h2 { color: #fff; }
:root[data-theme="light"] .ctaband--photo .btn--outline { border-color: rgba(255,255,255,.35); color: #fff; }


.footer { border-top: 1px solid var(--line); background: var(--bg-2); padding: clamp(50px, 7vw, 78px) 0 34px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 36px; }
.footer__about p { color: var(--muted); font-size: .9rem; margin-top: 16px; max-width: 34ch; }
.footer h4 { font-family: var(--font-display); font-size: .75rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--text); margin-bottom: 16px; }
.footer ul { display: grid; gap: 10px; }
.footer a { color: var(--muted); font-size: .9rem; transition: color .2s; }
.footer a:hover { color: var(--brand); }
.footer__bottom { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; color: var(--muted); font-size: .84rem; }
.footer__disclaimer { margin-top: 20px; font-size: .78rem; color: var(--muted); line-height: 1.7; max-width: 96ch; opacity: .85; }

/* --------------------------------------------------------------------------
   18. FLOATING UI
   -------------------------------------------------------------------------- */
/* Chat launcher: a glass card carrying the mark plus what you get by tapping
   it. The reply-time line is the reason someone taps, so it is real markup
   rather than CSS content — screen readers and crawlers see it too. The dot
   is a plain "we're here" pip, deliberately NOT a red/orange badge: there is
   no unread message, and a badge that lies is a bad trade on a page asking
   for payment. */
.wa-float {
  position: fixed; right: 20px; bottom: 96px; z-index: 90;
  display: flex; align-items: center; gap: 11px;
  padding: 7px 18px 7px 7px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 44px -14px rgba(0,0,0,.6);
  transition: transform .25s cubic-bezier(.2,.8,.3,1), border-color .25s, box-shadow .25s;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .wa-float {
    background: color-mix(in srgb, var(--surface) 56%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
  }
}
.wa-float:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, #25D366 48%, var(--line-strong));
  box-shadow: 0 22px 52px -14px rgba(0,0,0,.66);
}
.wa-float svg {
  width: 42px; height: 42px; padding: 10px; box-sizing: border-box;
  border-radius: 50%; color: #fff; flex-shrink: 0;
  background: linear-gradient(145deg, #34E57A, #1EBE57);
  box-shadow: 0 6px 16px -6px rgba(37,211,102,.9);
}
.wa-float__label { font-family: var(--font-display); line-height: 1.15; }
.wa-float__label b {
  display: block; font-weight: 700; font-size: .88rem;
  letter-spacing: -.01em; color: var(--text); white-space: nowrap;
}
.wa-float__label small {
  display: block; font-weight: 500; font-size: .72rem;
  color: var(--muted); margin-top: 2px; white-space: nowrap;
}
.wa-float__label small::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #34E57A; margin-right: 6px; vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(52,229,122,.22);
}
:root[data-theme="light"] .wa-float { box-shadow: 0 18px 40px -16px rgba(26,12,8,.3); }

/* The chooser the launcher opens. Sits directly above the card, same glass,
   so the two read as one control rather than a page-level modal. */
.chatpop {
  position: fixed; right: 20px; bottom: 166px; z-index: 91;
  width: min(316px, calc(100vw - 32px));
  padding: 16px; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line-strong);
  box-shadow: 0 28px 64px -18px rgba(0,0,0,.7);
  opacity: 0; transform: translateY(10px) scale(.97); transform-origin: 100% 100%;
  transition: opacity .22s ease, transform .26s cubic-bezier(.2,.8,.3,1);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .chatpop {
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
  }
}
.chatpop.is-open { opacity: 1; transform: translateY(0) scale(1); }
.chatpop__hd { display: flex; align-items: center; gap: 11px; }
.chatpop__av svg {
  width: 38px; height: 38px; padding: 9px; box-sizing: border-box;
  border-radius: 50%; color: #fff; display: block;
  background: linear-gradient(145deg, #34E57A, #1EBE57);
}
.chatpop__hd b { display: block; font-family: var(--font-display); font-size: .92rem; color: var(--text); }
.chatpop__hd small { display: block; font-size: .72rem; color: var(--muted); margin-top: 1px; }
.chatpop__hd small::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #34E57A; margin-right: 6px; vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(52,229,122,.22);
}
.chatpop__x {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--muted); padding: 4px; border-radius: 8px; line-height: 0;
  transition: color .2s, background .2s;
}
.chatpop__x:hover { color: var(--text); background: var(--surface-3); }
.chatpop__intro { font-size: .84rem; color: var(--text-2); margin: 14px 0 12px; }
.chatpop__opts { display: grid; gap: 8px; }
.chatpop__opt {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: .84rem; font-weight: 600; color: var(--text);
  transition: border-color .2s, background .2s, transform .2s cubic-bezier(.2,.8,.3,1);
}
.chatpop__opt span { flex: 1; }
.chatpop__opt svg { color: var(--muted); flex-shrink: 0; transition: transform .22s, color .22s; }
.chatpop__opt:hover, .chatpop__opt:focus-visible {
  border-color: color-mix(in srgb, #25D366 52%, var(--line));
  background: var(--surface-3); transform: translateX(2px);
}
.chatpop__opt:hover svg, .chatpop__opt:focus-visible svg { color: #34E57A; transform: translateX(3px); }
@media (max-width: 620px) {
  .chatpop { right: 14px; bottom: 152px; }
}
@media (prefers-reduced-motion: reduce) {
  .chatpop, .chatpop__opt, .chatpop__opt svg { transition: none; }
}

/* Sticky order bar — a floating card rather than a full-bleed band, so the
   page still reads underneath it and the bar looks placed rather than stuck. */
.orderbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  padding: 0 var(--gutter) clamp(12px, 1.6vw, 18px);
  transform: translateY(130%); transition: transform .38s cubic-bezier(.2,.8,.3,1);
  pointer-events: none;
}
.orderbar.is-on { transform: translateY(0); }
.orderbar__inner {
  pointer-events: auto;
  max-width: 1040px; margin-inline: auto;
  display: flex; align-items: center; gap: 18px;
  padding: 13px 13px 13px 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 26px 60px -28px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .orderbar__inner {
    background: color-mix(in srgb, var(--surface) 62%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  }
}
:root[data-theme="light"] .orderbar__inner {
  background: color-mix(in srgb, #fff 78%, transparent);
  border-color: rgba(26,12,8,.14);
  box-shadow: 0 24px 50px -30px rgba(50,30,20,.45), inset 0 1px 0 rgba(255,255,255,.8);
}
.orderbar__info { min-width: 0; }
.orderbar__info b { font-family: var(--font-display); font-size: 1.02rem; display: block; letter-spacing: -.015em; }
.orderbar__meta {
  display: block; margin-top: 2px;
  font-size: .84rem; color: var(--muted);
}
.orderbar__meta strong { color: var(--text); font-weight: 600; }
.orderbar__meta i { font-style: normal; opacity: .55; margin: 0 5px; }
.orderbar .btn { margin-left: auto; flex-shrink: 0; }

@media (max-width: 620px) {
  .orderbar__inner { gap: 12px; padding: 11px 11px 11px 16px; }
  .orderbar__info b { font-size: .92rem; }
  .orderbar__meta { font-size: .74rem; }
  .orderbar .btn { padding: 12px 18px; font-size: .92rem; }
  .orderbar .btn svg { display: none; }
}

/* --------------------------------------------------------------------------
   19. PAGE HEADERS / PROSE / FORMS
   -------------------------------------------------------------------------- */
.pagehead { position: relative; padding: calc(var(--nav-h) + 64px) 0 clamp(36px, 5vw, 60px); text-align: center; overflow: hidden; isolation: isolate; }
.pagehead::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(760px 380px at 50% -20%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%), var(--bg);
}
.pagehead .lede { margin: 18px auto 0; }
.crumbs { display: flex; gap: 8px; justify-content: center; font-size: .82rem; color: var(--muted); margin-bottom: 18px; }
.crumbs a:hover { color: var(--brand); }

.prose { max-width: 74ch; margin-inline: auto; }
.prose > * + * { margin-top: 20px; }
.prose h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); margin-top: 48px; }
.prose h3 { font-size: 1.2rem; margin-top: 34px; }
.prose p, .prose li { color: var(--text-2); }
.prose ul, .prose ol { display: grid; gap: 10px; padding-left: 4px; }
.prose ul li { display: flex; gap: 12px; }
.prose ul li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex-shrink: 0; margin-top: 11px; }
.prose ol { counter-reset: n; }
.prose ol li { display: flex; gap: 14px; counter-increment: n; }
.prose ol li::before {
  content: counter(n); flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .8rem;
}
.prose a:not(.btn) { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text); }
.callout { padding: 20px 22px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand); }
.callout b { font-family: var(--font-display); }

.input, .select, .textarea {
  width: 100%; padding: 14px 16px; border-radius: var(--r-sm);
  background: var(--bg-2); border: 1.5px solid var(--line); color: var(--text);
  transition: border-color .2s, background .2s;
}
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); background: var(--surface); }
.label { display: block; font-family: var(--font-display); font-weight: 600; font-size: .88rem; margin-bottom: 8px; }
.field + .field { margin-top: 18px; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94A4' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 17px; padding-right: 42px; }

/* Blog */
.postcard { display: flex; flex-direction: column; height: 100%; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); overflow: hidden; transition: border-color .25s, transform .25s; }
.postcard:hover { border-color: color-mix(in srgb, var(--brand) 45%, transparent); transform: translateY(-4px); }
.postcard__img { aspect-ratio: 16/9; background: linear-gradient(140deg, color-mix(in srgb, var(--brand) 24%, var(--surface-2)), var(--surface-2)); display: grid; place-items: center; position: relative; }
.postcard__img svg { width: 42px; height: 42px; color: color-mix(in srgb, var(--brand) 70%, transparent); }
.postcard__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.postcard__meta { display: flex; gap: 10px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.postcard h3 { font-size: 1.12rem; line-height: 1.3; margin-bottom: 10px; }
.postcard p { color: var(--muted); font-size: .9rem; flex: 1; }
.postcard .link-arrow { margin-top: 18px; font-size: .9rem; }

/* Table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
table.data { width: 100%; border-collapse: collapse; min-width: 560px; }
table.data th, table.data td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); font-size: .93rem; }
table.data th { font-family: var(--font-display); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
table.data tr:last-child td { border-bottom: 0; }
table.data td svg { width: 17px; height: 17px; color: var(--brand); }

/* Channel category grid */
.catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.cat { padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); transition: border-color .22s, transform .22s; }
.cat:hover { border-color: color-mix(in srgb, var(--brand) 45%, transparent); transform: translateY(-3px); }
.cat__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cat__top svg { width: 20px; height: 20px; color: var(--brand); }
.cat__count { font-family: var(--font-display); font-size: .74rem; font-weight: 700; color: var(--muted); }
.cat h3 { font-size: 1.02rem; margin-bottom: 8px; }
.cat p { font-size: .86rem; color: var(--muted); line-height: 1.55; }

/* --------------------------------------------------------------------------
   20. REVEAL ANIMATION
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }

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

/* --------------------------------------------------------------------------
   21. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: grid; }
  .header__inner { padding-right: 10px; }
  .header__actions .btn { display: none; }
  .builder { grid-template-columns: 1fr; }
  .builder__right { border-left: 0; border-top: 1px solid var(--line); }
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__about { grid-column: 1 / -1; }
  .posters { grid-template-columns: repeat(4, 1fr); }
  .reviews { columns: 2; }
}

@media (max-width: 860px) {
  .savings { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 22px; }
  .step__num { font-size: 3.6rem; }
  .g-3, .g-4 { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats__item:nth-child(odd) { border-left: 0; }
  .stats__item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .incl-2 { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  :root { --nav-h: 62px; --gutter: 16px; }
  .header { inset: 10px 0 auto; }
  .logo__text { font-size: 1.1rem; }
  .hero { padding-top: calc(var(--nav-h) + 26px); }
  /* 2x2 on phones: tighten so the bar reads as "more below" rather than a
     sliver clipped by the fold. */
  .statbar { margin-top: 18px; border-radius: var(--r); }
  .statbar .stats__item { padding: 13px 8px; }
  .statbar .stats__num { font-size: 1.32rem; }
  .statbar .stats__label { font-size: .63rem; letter-spacing: .1em; margin-top: 5px; }
  .tp__link { font-size: .84rem; padding: 8px 15px; }
  .hero__cta { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 24px; }
  .hero__cta .btn { width: 100%; }
  /* squarer corners and a tighter height read better full-bleed than the
     long pill does; the secondary sits back a step from the primary */
  .hero__cta .btn--lg { padding: 17px 24px; font-size: 1.02rem; border-radius: 16px; }
  .hero__cta .btn--ghost { padding: 14px 24px; font-size: .95rem; }
  .hero__cta .btn--primary {
    box-shadow: 0 16px 40px -14px color-mix(in srgb, var(--brand) 85%, transparent),
                inset 0 1px 0 rgba(255,255,255,.34);
  }
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .posters { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .terms { grid-template-columns: 1fr; }
  .reviews { columns: 1; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .guarantees { grid-template-columns: 1fr; gap: 14px; text-align: left; }
  .guarantee { display: flex; align-items: center; gap: 12px; }
  .guarantee svg { margin: 0; }
  .guarantee b { margin-top: 0; }
  .orderbar__info span { display: none; }
  .orderbar__price { font-size: 1.25rem; }
  /* Phones: the card would eat a third of the screen, so it collapses to the
     mark alone and the live pip moves onto the button. */
  .wa-float { bottom: 88px; right: 14px; padding: 6px; gap: 0; }
  .wa-float__label { display: none; }
  .wa-float svg { width: 44px; height: 44px; }
  .wa-float::after {
    content: ""; position: absolute; top: 3px; right: 3px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #34E57A; border: 2px solid var(--bg);
  }
}

@media print {
  .header, .orderbar, .wa-float, .chatpop, .drawer { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   22. DEVICE RAIL  ("on any device")
   --------------------------------------------------------------------------
   Two rows of platform tiles travelling in opposite directions. The set is
   duplicated in the markup, so the loop is one CSS translate with no JS.
   The shift is -(50% + gap/2), not a flat -50%: with the set doubled, half
   the track falls half a gap short of one full set, and -50% leaves a jump
   at the seam. The track is width:max-content so its box hugs the tiles —
   a stretched box makes 50% mean something other than one set.            */
/* the lede carries a real link, so it has to look like one */
.devrail .lede a {
  color: var(--brand); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  transition: color .2s;
}
.devrail .lede a:hover { color: var(--brand-2); }
.devrail__note { margin-top: 18px; font-size: .92rem; color: var(--text-2); }
.devrail__note b { font-family: var(--font-display); color: var(--text); }

.drails {
  margin-top: 34px; display: grid; gap: 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.drail { overflow: hidden; }
.drails__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.drail__track {
  display: flex; gap: 14px; width: max-content;
  /* duration scales with the (now 3x longer) half so the speed is unchanged */
  animation: drailR 156s linear infinite;
}
.drail--l .drail__track { animation-name: drailL; }
.drail:hover .drail__track,
.drail:focus-within .drail__track { animation-play-state: paused; }
@keyframes drailR {
  from { transform: translateX(calc(-50% - 7px)); }
  to   { transform: translateX(0); }
}
@keyframes drailL {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 7px)); }
}

/* No card, no border, no fill — the marks sit straight on the section and
   the rhythm comes from the fixed cell width alone. Colour is held back
   until hover, so the row reads as one calm band rather than 18 competing
   boxes. */
.dtile {
  flex: 0 0 auto; width: 128px; height: 96px;
  display: grid; place-content: center; justify-items: center; gap: 13px;
  background: none; border: 0;
  transition: transform .24s cubic-bezier(.2,.8,.3,1);
}
.dtile:hover { transform: translateY(-3px); }
.dtile b {
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  color: var(--text-2); text-align: center; letter-spacing: -.01em;
  transition: color .24s;
}
.dtile .plat svg, .dtile > svg {
  width: 32px; height: 32px; color: var(--text-2); opacity: .8;
  transition: color .24s, opacity .24s;
}
.dtile:hover .plat svg, .dtile:hover > svg { color: var(--brand); opacity: 1; }
.dtile:hover b { color: var(--text); }

.dchecks {
  margin-top: 38px; display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px 34px; list-style: none; padding: 0;
}
.dchecks li { display: flex; align-items: flex-start; gap: 11px; }
.dchecks svg {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px;
  color: var(--brand); stroke-width: 2.6;
}
.dchecks span { font-size: .92rem; color: var(--text-2); line-height: 1.5; }

@media (max-width: 860px) { .dchecks { grid-template-columns: 1fr; gap: 14px; } }
@media (max-width: 620px) {
  .drails { gap: 10px; margin-top: 26px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .drail__track { gap: 10px; }
  @keyframes drailR { from { transform: translateX(calc(-50% - 5px)); } to { transform: translateX(0); } }
  @keyframes drailL { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 5px)); } }
  .dtile { width: 104px; height: 84px; gap: 11px; }
  .dtile b { font-size: .74rem; }
  .dtile .plat svg, .dtile > svg { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .drail__track { animation: none !important; }
  .drails { overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   23. ORDER CARD  (two columns: pick on the left, act on the right)
   --------------------------------------------------------------------------
   The right column has two faces — what's included, and the invoice form.
   Swapping it in place rather than opening a modal keeps the plan and the
   price on screen while the customer types, so they never have to remember
   what they picked.                                                        */
.wizcols {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.08fr .92fr;
}
.wizcol { padding: clamp(24px, 2.6vw, 34px); min-width: 0; }
.wizcol--side {
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
}

.wrow--div { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); }
.wrow__t {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  color: var(--text); margin-bottom: 16px;
}
.wrow__t span { font-weight: 500; font-size: .84rem; color: var(--muted); margin-left: 8px; }

.wdev { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.wdev__note { font-size: .88rem; color: var(--text-2); }
.wplats { margin-top: 18px; }
.wplats .plats { gap: 14px; }
.wplats .plats svg { width: 18px; height: 18px; }
.wplats .plats__note { margin-top: 10px; font-size: .8rem; }

.wrow--total .wtotal { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.wrow--total .wtotal__meta { margin-top: 4px; }

/* ---- right column, default face ---- */
.wside__foot { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.wfeats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.wfeat {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: .86rem; color: var(--text-2); line-height: 1.35;
}
.wfeat svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--muted); }
.wfeat b { color: var(--text); font-weight: 600; }
.wfeat--big { flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px; }
.wfeat--big b {
  font-family: var(--font-display); font-weight: 800; font-size: 1.32rem;
  letter-spacing: -.03em; color: var(--brand);
}
.wfeat--big span { font-size: .8rem; color: var(--muted); }

/* ---- right column, invoice face ---- */
.wside[hidden] { display: none; }
.wside--cko { animation: ckoIn .3s cubic-bezier(.2,.8,.3,1); }
@keyframes ckoIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

.cko__hd { display: flex; align-items: flex-start; gap: 14px; }
.cko__back {
  margin-left: auto; flex-shrink: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px 8px 10px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--text-2);
  transition: color .2s, background .2s, border-color .2s;
}
.cko__back:hover { color: var(--text); background: var(--surface-3); border-color: var(--line-strong); }
.cko__back svg { width: 15px; height: 15px; transform: rotate(90deg); }

.cko__order {
  margin-top: 20px; padding: 14px 16px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--line);
}
.cko__order-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cko__order-main {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px;
}
.cko__order-main b { font-family: var(--font-display); font-size: 1rem; }
.cko__amount {
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  letter-spacing: -.03em; color: var(--text);
}

.cko__form { margin-top: 22px; }
.cko__phone { display: grid; grid-template-columns: 116px 1fr; gap: 10px; }
.cko__phone .select { min-width: 0; }
.cko__err { margin-top: 7px; font-size: .78rem; color: var(--brand); }
.cko .input.is-bad, .input.is-bad { border-color: var(--brand); }
.cko__submit { justify-content: center; }
.cko__submit[disabled] { opacity: .65; pointer-events: none; }
.cko__note {
  margin-top: 14px; text-align: center; font-size: .78rem; color: var(--muted); line-height: 1.55;
}
.cko__note b { color: var(--text-2); }

.cko__done { text-align: center; padding: 14px 0 6px; }
.cko__tick {
  display: grid; place-items: center; width: 54px; height: 54px; margin: 6px auto 16px;
  border-radius: 50%; color: #fff;
  background: linear-gradient(145deg, #34E57A, #1EBE57);
  box-shadow: 0 12px 28px -10px rgba(37,211,102,.8);
}
.cko__tick svg { width: 26px; height: 26px; stroke-width: 2.6; }
.cko__ref { margin-top: 14px; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cko__ref b { color: var(--text); font-family: var(--font-display); letter-spacing: .04em; }

@media (max-width: 900px) {
  .wizcols { grid-template-columns: 1fr; }
  .wizcol--side { border-left: 0; border-top: 1px solid var(--line); }
  .wfeats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .wfeats { grid-template-columns: 1fr; }
  .cko__phone { grid-template-columns: 104px 1fr; }
  .cko__hd { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .wside--cko { animation: none; } }