/* ClickTV long-term landing — "the show is about to start".
   See DESIGN.md for the contract. Warm theatre dark, velvet curtain, plans
   standing in the spotlights; Click blue is reserved for actions only. */

/* ── Fonts ────────────────────────────────────────────────────────────── */
@font-face { font-family: 'Euclid'; src: url('/fonts/euclid-Regular.woff2') format('woff2');  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Euclid'; src: url('/fonts/euclid-Medium.woff2') format('woff2');   font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Euclid'; src: url('/fonts/euclid-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Euclid'; src: url('/fonts/euclid-Bold.woff2') format('woff2');     font-weight: 700; font-style: normal; font-display: swap; }

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root {
  --ink-900: #0B0910;
  --ink-850: #100D16;
  --ink-800: #15111C;
  --ink-700: #1C1624;
  --ink-600: #261E30;
  --line: rgba(255, 244, 232, .10);
  --line-strong: rgba(255, 244, 232, .2);

  --text: #F5F0EA;
  --muted: #BCB2C2;
  --dim: #8E8598;

  --brand: #0065FF;
  --brand-lift: #7DB2FF;
  --gain: #5BE3AC;
  --gain-soft: rgba(91, 227, 172, .14);
  --spot: #FFD9A0;
  --spot-soft: rgba(255, 217, 160, .13);
  --danger: #FF8A78;

  /* The curtain wears the product's colours, not a generic theatre red:
     Click blue deepened to navy, with the plans' gold trim. */
  --velvet-1: #1E5BD6;
  --velvet-2: #0B2C7A;
  --velvet-3: #06143C;
  --velvet-deep: #030A22;
  --velvet-trim: #E8C07A;

  --wrap: 1240px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 11px;

  --ease: cubic-bezier(.32, .72, 0, 1);
  --shadow-popular: 0 -20px 70px -30px rgba(255, 217, 160, .5), 0 40px 90px -50px rgba(0, 0, 0, .9);
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  background: var(--ink-900);
  color: var(--text);
  font-family: 'Euclid', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(1.0625rem, 1.02rem + .18vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a, button, label, summary, input { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
s { text-decoration-thickness: 1px; }
:target { scroll-margin-top: 96px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--brand-lift); outline-offset: 3px; border-radius: 5px; }

.skip-link {
  position: absolute; top: 8px; left: 8px; z-index: 300;
  padding: 12px 18px; border-radius: var(--r-sm);
  background: var(--brand); color: #fff; font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ── Typography ───────────────────────────────────────────────────────── */
h1, h2, h3 { font-weight: 700; letter-spacing: -.025em; line-height: 1.12; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4.1rem); line-height: 1.05; }
h2 { font-size: clamp(1.8rem, 1.25rem + 2vw, 2.75rem); }
h3 { font-size: 1.1875rem; letter-spacing: -.012em; line-height: 1.35; }
p { text-wrap: pretty; }

.eyebrow {
  font-size: .875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--spot);
}
.lead { font-size: clamp(1.125rem, 1.02rem + .45vw, 1.375rem); line-height: 1.55; color: var(--muted); }

/* ── Layout ───────────────────────────────────────────────────────────── */
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
section { padding-block: clamp(64px, 8vw, 120px); }
.section-head {
  max-width: 52ch; margin-inline: auto; margin-bottom: clamp(32px, 3.4vw, 52px);
  text-align: center;
}
.section-head p { color: var(--muted); margin-top: 14px; font-size: 1.0625rem; }

/* ── Icons ────────────────────────────────────────────────────────────── */
.ico { width: 1.3em; height: 1.3em; flex: none; }
.ico-yes { color: var(--gain); }
.ico-no  { color: var(--dim); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px;
  border: 1px solid transparent; border-radius: var(--r-md);
  background: var(--btn-bg);
  font-weight: 600; font-size: 1rem; letter-spacing: -.01em;
  cursor: pointer; text-align: center;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), color .18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { --btn-bg: var(--brand); color: #fff; box-shadow: 0 14px 34px -14px rgba(0, 101, 255, .95); }
.btn-primary:hover { --btn-bg: #2079ff; }
.btn-outline { border-color: var(--line-strong); color: var(--text); }
.btn-outline:hover { border-color: var(--spot); color: var(--spot); }
.btn-ghost { border-color: var(--line); color: var(--text); min-height: 44px; padding: 10px 18px; font-size: .9375rem; }
.btn-ghost:hover { border-color: var(--line-strong); }
.btn-quiet { color: var(--muted); padding-inline: 0; }
.btn-quiet:hover { color: var(--text); }
.btn-lg { min-height: 60px; padding-inline: 32px; font-size: 1.0625rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ── Curtain ──────────────────────────────────────────────────────────
   Shown once per session by app.js. Without JavaScript it never appears, so
   the page can never be hidden behind it. */
.curtain { position: fixed; inset: 0; z-index: 250; pointer-events: none; }
/* The scrim covers the whole curtain, not just the text block: velvet is bright
   and a partial gradient left lit patches above the poster. It lives on the
   curtain itself so it cannot add scrollable height to anything. */
.curtain::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(66% 60% at 50% 46%,
    rgba(2, 6, 20, .88), rgba(2, 6, 20, .64) 58%, rgba(2, 6, 20, .52) 100%);
  transition: opacity .6s var(--ease);
}
.curtain.is-open::before { opacity: 0; }
.curtain-panel {
  position: absolute; top: 0; bottom: 0; width: 51%;
  /* Real velvet, drawn by a designer. The gradient underneath is the fallback
     if the image ever fails to load — the curtain must never be a blank box. */
  background-image: url('/assets/curtain/left.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--velvet-2);
  box-shadow: inset 0 -70px 110px -50px rgba(0, 0, 0, .7), 0 0 90px rgba(0, 0, 0, .6);
  transition: transform 2.6s cubic-bezier(.6, 0, .16, 1) .55s;
  will-change: transform;
}
/* The inner edges carry the gold piping, so they are the edges to pin: the
   outer edges are the ones that slide off screen. */
.curtain-left { left: 0; background-position: right center; }
.curtain-right { right: 0; background-image: url('/assets/curtain/right.webp'); background-position: left center; }

.curtain-valance {
  position: absolute; top: 0; left: 0; right: 0;
  height: clamp(104px, 11vw, 172px);
  /* One swag, tiled: the artwork keeps its own proportions and a wide screen
     simply gets more scallops. Stretching a single band flattened the drape
     and left a transparent gap above it. */
  background: url('/assets/curtain/valance.webp') top center / auto 100% repeat-x;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6));
  transition: transform 2.2s cubic-bezier(.6, 0, .16, 1) .55s;
}

/* The poster printed on the curtain: who we are, in one screen. A dark scrim
   sits under it so the text stays readable over the brightest folds. */
.curtain-poster {
  position: absolute; inset: clamp(104px, 11vw, 172px) 0 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 28px 24px 32px;
  overflow-y: auto; overscroll-behavior: contain;
  text-align: center; pointer-events: auto;
  transition: opacity .6s var(--ease), transform .8s var(--ease);
}

/* На афише логотип крупный: это первое, что видит человек, открывший сайт. */
.curtain-logo { display: block; width: auto; height: clamp(38px, 4.4vw, 58px); margin-bottom: 4px; }
.curtain-title {
  max-width: 17ch;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.25rem); font-weight: 700;
  line-height: 1.08; letter-spacing: -.025em; text-wrap: balance;
  text-shadow: 0 4px 26px rgba(0, 0, 0, .55);
}
/* ── The playbill on the curtain ────────────────────────────────────────
   Three numbers on brass plates, the sport line, then the line-up of
   services. Everything sits on the scrim, so it stays legible over velvet. */
.poster-stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  list-style: none; padding: 0; margin: 6px 0 2px;
}
.poster-stats li {
  display: grid; gap: 2px; align-content: center;
  min-width: clamp(120px, 13vw, 168px); padding: 12px 18px;
  border: 1px solid rgba(232, 192, 122, .34); border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 232, 190, .10), rgba(0, 0, 0, .28));
  box-shadow: inset 0 1px 0 rgba(255, 240, 214, .18);
}
.stat-value {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); font-weight: 700;
  letter-spacing: -.02em; color: #FFF3DE; font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat-label { font-size: .875rem; color: rgba(255, 240, 225, .72); line-height: 1.3; }

.poster-sport {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(232, 192, 122, .3); background: rgba(0, 0, 0, .3);
  font-size: .9375rem; font-weight: 500; color: rgba(255, 244, 230, .92);
}
.poster-sport .ico { color: var(--velvet-trim); }

.poster-libs { width: 100%; max-width: 720px; }
/* The label sits on a gold rule, the way a playbill separates its sections. */
.poster-libs-label {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
  font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(232, 192, 122, .85);
}
.poster-libs-label::before, .poster-libs-label::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 192, 122, .45), transparent);
}
/* Three fixed columns rather than wrapping: the line-up is a block on a
   playbill, and a last row with one lonely logo in it reads as a mistake. */
.poster-libs ul {
  display: grid; grid-template-columns: repeat(3, 138px); justify-content: center; gap: 8px;
  list-style: none; padding: 0; margin: 0;
}
.poster-libs li {
  display: grid; place-items: center;
  height: 52px; padding: 0 12px;
  border: 1px solid rgba(255, 244, 232, .14); border-radius: 12px;
  background: rgba(0, 0, 0, .34);
}
/* Every logo ships on the same 300×64 canvas, already balanced by ink area and
   centred on its optical centre — so one rule is enough and no mark needs a
   correction of its own. */
.poster-libs img { width: 100%; height: auto; opacity: .95; }

.curtain-poster .btn { margin-top: 18px; min-width: 220px; }
.curtain-hint { font-size: .9375rem; color: rgba(232, 192, 122, .8); }

.curtain.is-open .curtain-poster { opacity: 0; transform: translateY(-20px); pointer-events: none; }
.curtain.is-open .curtain-left { transform: translateX(-102%); }
.curtain.is-open .curtain-right { transform: translateX(102%); }
.curtain.is-open .curtain-valance { transform: translateY(-102%); }
body.is-curtained { overflow: hidden; }

/* The house is dark until the fixtures come up. Rather than covering the page
   with a black veil — which would hide the lamps too — the *content* is turned
   off: header, sections and footer sit at zero opacity over the near-black
   page, so while the curtain parts there is nothing to see. Then the beams glow
   in the dark, and the stage fades up inside their light.

   Timeline from the press: 0.55s panels start · ~3.15s panels gone ·
   2.9s fixtures start to glow · 3.4s the stage fades up · ~5.6s fully lit.
   Applied by app.js only, so a page without JavaScript is lit from the start. */
body.is-dark .site-header,
body.is-dark .stage-inner,
body.is-dark .inside,
body.is-dark .compare,
body.is-dark .buy,
body.is-dark .faq,
body.is-dark .site-footer {
  opacity: 0;
  transition: opacity 2.2s ease 3.4s;
}
body.is-dark.lights-up .site-header,
body.is-dark.lights-up .stage-inner,
body.is-dark.lights-up .inside,
body.is-dark.lights-up .compare,
body.is-dark.lights-up .buy,
body.is-dark.lights-up .faq,
body.is-dark.lights-up .site-footer { opacity: 1; }

/* The fixtures themselves come up first — they are what makes the stage
   visible, so they must glow before anything else does. */
body.is-dark .spotlights, body.is-dark .stage-floor {
  opacity: 0;
  transition: opacity 1.8s ease 2.9s;
}
body.is-dark.lights-up .spotlights, body.is-dark.lights-up .stage-floor { opacity: 1; }
body.is-dark .plan-popular { box-shadow: none; transition: box-shadow 2s ease 3.6s; }
body.is-dark.lights-up .plan-popular { box-shadow: var(--shadow-popular); }

/* ── Header ───────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--ink-900) 86%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
/* Три колонки, а не flex: средняя стоит по оси страницы независимо от того,
   насколько широки логотип слева и кнопки справа. При flex с margin-left:auto
   разделы «плавали» бы вслед за длиной надписи на кнопке — в трёх языках она
   разной длины. */
.header-inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 20px; height: 70px;
}
.logo { display: inline-flex; align-items: center; justify-self: start; }
.logo img { display: block; height: 26px; width: auto; }

.site-nav { display: flex; gap: 28px; justify-self: center; font-size: 1rem; color: var(--muted); }
.site-nav a { transition: color .15s var(--ease); }
.site-nav a:hover { color: var(--text); }

.header-actions { display: flex; align-items: center; gap: 10px; justify-self: end; }
.header-cta { flex: none; }

/* ── Меню (языки, а на узком экране и разделы) ────────────────────────────
   Построено на <details>: открывается без JavaScript, доступно с клавиатуры
   и объявляется скринридером как раскрывающийся список. */
.menu { position: relative; }
.menu-btn {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  list-style: none; color: var(--muted);
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.menu-btn::-webkit-details-marker { display: none; }
.menu-btn:hover { color: var(--text); border-color: rgba(255, 244, 232, .22); }
.menu-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Три полоски, средняя гаснет и крайние сходятся в крест при открытии. */
.burger, .burger::before, .burger::after {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .18s var(--ease), opacity .18s var(--ease);
}
.burger { position: relative; }
.burger::before, .burger::after { content: ''; position: absolute; left: 0; }
.burger::before { top: -6px; }
.burger::after { top: 6px; }
.menu[open] .burger { background: transparent; }
.menu[open] .burger::before { transform: translateY(6px) rotate(45deg); }
.menu[open] .burger::after { transform: translateY(-6px) rotate(-45deg); }

.menu-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 70;
  /* На узком экране панель не должна вылезти за край: она прижата к правому
     краю кнопки, а кнопка — к краю страницы. */
  min-width: 210px; max-width: calc(100vw - 24px); padding: 10px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--ink-800);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.menu-title {
  margin: 8px 10px 6px; font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--dim);
}
.menu-nav { display: none; flex-direction: column; }
.menu-nav a, .menu-langs a {
  display: block; padding: 9px 10px; border-radius: 10px;
  font-size: .9375rem; color: var(--muted);
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.menu-nav a:hover, .menu-langs a:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.menu-langs { list-style: none; padding: 0; margin: 0; }
.menu-langs a[aria-current] { color: var(--text); background: rgba(255, 255, 255, .08); }

/* ── Hero: the poster outside the venue ───────────────────────────────── */
.hero { position: relative; padding-block: clamp(56px, 8vw, 110px) clamp(40px, 5vw, 72px); overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: -40% 10% auto -5%; height: 700px;
  background: radial-gradient(46% 46% at 40% 40%, rgba(255, 217, 160, .12), transparent 70%);
  pointer-events: none;
}
.hero-inner { position: relative; text-align: center; }
/* Measure lives on the text, not on the container — the container is the page
   grid and must keep its full width. */
.hero h1 { margin: 18px auto 22px; max-width: 16ch; }
.hero .lead { max-width: 52ch; margin-inline: auto; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; margin-top: 34px; }

/* ── Stage ────────────────────────────────────────────────────────────── */
.stage {
  position: relative; isolation: isolate;
  padding-block: clamp(76px, 7.2vw, 108px) clamp(56px, 6vw, 92px);
  background: linear-gradient(180deg, var(--ink-900), var(--ink-850) 40%, var(--ink-900));
  overflow: hidden;
}
.spotlights { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* The rig: same width and same three columns as the plans below, so each
   fixture is centred over its own card instead of over a share of the viewport. */
.rig {
  position: absolute; inset: 0; left: 0; right: 0;
  width: min(100% - 40px, var(--wrap)); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.fixture { position: relative; }

/* Light cones from above: soft, warm and wide enough to wash over a plan card
   without ever competing with the text sitting inside it. Drawn with a conic
   gradient rather than clip-path — a clip would cut the blur back into a hard
   edge, and hard-edged light looks like a shape, not like a spotlight. */
.beam {
  position: absolute; top: 0; left: 50%; translate: -50% 0;
  width: 260%; height: 104%;
  background: conic-gradient(from 172deg at 50% -2%,
    transparent 0deg,
    rgba(255, 217, 160, .26) 5deg,
    rgba(255, 217, 160, .26) 11deg,
    transparent 17deg);
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .45) 52%, transparent 84%);
  mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .45) 52%, transparent 84%);
  filter: blur(26px);
  mix-blend-mode: screen;
  /* Brightness is the only thing that changes when the pointer moves between
     plans, so the fixtures can cross-fade smoothly. */
  transition: opacity .55s ease;
}

/* Resting state: the middle fixture lights the recommended plan. */
.beam-1, .beam-3 { opacity: .5; }
.beam-2 { opacity: 1; }

/* The lighting truss the beams come from. */
.truss {
  position: absolute; top: 14px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 244, 232, .16) 10%, rgba(255, 244, 232, .16) 90%, transparent);
}
/* Real fixtures hanging off the truss; the glow underneath is the lens. */
.lamp {
  position: absolute; top: 0; left: 50%; translate: -50% 0;
  width: clamp(40px, 3.8vw, 58px); aspect-ratio: 260 / 396;
  background: url('/assets/curtain/lamp.webp') center top / contain no-repeat;
}
.lamp::after {
  content: ''; position: absolute; left: 50%; bottom: 4%;
  width: 62%; aspect-ratio: 1; translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 235, 200, .85), rgba(255, 217, 160, .35) 45%, transparent 72%);
  filter: blur(6px);
}
.lamp { transition: opacity .55s ease; }
.lamp::after { transition: opacity .55s ease; }
.lamp-1, .lamp-3 { opacity: .55; }
.lamp-2 { opacity: 1; }

/* ── The light follows the plan under the pointer ──────────────────────
   Hover or keyboard focus on a card turns its fixture up and dims the other
   two. With nothing pointed at, the rest state above stands: Optimum stays lit.
   Pure CSS, so there is nothing to keep in sync in JavaScript. */
.stage:has(#plan-lite:hover) .beam-1,
.stage:has(#plan-lite:focus-within) .beam-1,
.stage:has(#plan-premium:hover) .beam-3,
.stage:has(#plan-premium:focus-within) .beam-3 { opacity: 1; }

.stage:has(#plan-lite:hover) .lamp-1,
.stage:has(#plan-lite:focus-within) .lamp-1,
.stage:has(#plan-premium:hover) .lamp-3,
.stage:has(#plan-premium:focus-within) .lamp-3 { opacity: 1; }
.stage:has(#plan-lite:hover) .lamp-1::after,
.stage:has(#plan-lite:focus-within) .lamp-1::after,
.stage:has(#plan-premium:hover) .lamp-3::after,
.stage:has(#plan-premium:focus-within) .lamp-3::after { filter: blur(9px); opacity: 1; }

.stage:has(#plan-lite:hover) .beam-2,
.stage:has(#plan-lite:focus-within) .beam-2,
.stage:has(#plan-premium:hover) .beam-2,
.stage:has(#plan-premium:focus-within) .beam-2 { opacity: .34; }

.stage:has(#plan-lite:hover) .lamp-2,
.stage:has(#plan-lite:focus-within) .lamp-2,
.stage:has(#plan-premium:hover) .lamp-2,
.stage:has(#plan-premium:focus-within) .lamp-2 { opacity: .5; }
.stage:has(#plan-lite:hover) .lamp-2::after,
.stage:has(#plan-lite:focus-within) .lamp-2::after,
.stage:has(#plan-premium:hover) .lamp-2::after,
.stage:has(#plan-premium:focus-within) .lamp-2::after { opacity: .35; }

.stage:has(#plan-lite:hover) .beam-3,
.stage:has(#plan-lite:focus-within) .beam-3,
.stage:has(#plan-premium:hover) .beam-1,
.stage:has(#plan-premium:focus-within) .beam-1 { opacity: .28; }

.stage:has(#plan-optimum:hover) .beam-1,
.stage:has(#plan-optimum:focus-within) .beam-1,
.stage:has(#plan-optimum:hover) .beam-3,
.stage:has(#plan-optimum:focus-within) .beam-3 { opacity: .28; }
/* The pool of light the plans stand in. */
.stage-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 260px; z-index: -1;
  background:
    radial-gradient(60% 100% at 50% 100%, rgba(255, 217, 160, .12), transparent 70%),
    linear-gradient(180deg, transparent, rgba(255, 217, 160, .05));
  border-bottom: 1px solid rgba(255, 217, 160, .14);
}
/* Explicit column flow: the sticky rail and the note below it were overlapping
   when they were plain blocks. */
.stage-inner { display: flex; flex-direction: column; align-items: center; }
.stage-inner > .plans, .stage-inner > .term-rail-wrap { width: 100%; }


/* ── Term rail ────────────────────────────────────────────────────────── */
.term-input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
/* Not sticky, and not by omission: the stage clips its light cones with
   `overflow: hidden`, which makes the section a scroll container. A sticky
   child inside it never actually sticks — it only gets displaced downwards by
   its own `top`, which is what used to push the rail on top of the link below.
   No background either: the rail carries its own, and a band across the page
   under a floating pill looked like a seam. */
.term-rail-wrap { display: flex; justify-content: center; padding-block: 2px; margin-bottom: 14px; }
.term-rail {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4px; padding: 6px; margin: 0; border: 1px solid var(--line);
  border-radius: 999px; background: rgba(11, 9, 16, .8);
  backdrop-filter: blur(8px);
  width: min(620px, 100%);
}
.term-rail legend { padding: 0; }
.term-option {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 52px; border-radius: 999px; cursor: pointer;
  font-weight: 600; font-size: 1rem; color: var(--muted);
  transition: color .18s var(--ease);
}
.term-option:hover { color: var(--text); }
.term-pct { font-size: .8125rem; font-weight: 600; color: var(--gain); }
.term-indicator {
  position: absolute; top: 6px; left: 6px; z-index: 0;
  width: calc((100% - 12px - 8px) / 3); height: calc(100% - 12px);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 217, 160, .16), rgba(255, 217, 160, .06));
  border: 1px solid rgba(255, 217, 160, .34);
  transition: transform .3s var(--ease);
}
.term-input:focus-visible + .term-option { outline: 2px solid var(--brand-lift); outline-offset: 2px; }
/* Two rails, one radio group: the term lives in a single group so the browser
   keeps them in sync, and the highlight is driven by the page-wide state rather
   than by a sibling — otherwise only the rail holding the checked input would
   look selected. */
main:has(.term-input[value="3"]:checked)  .term-indicator { transform: translateX(0); }
main:has(.term-input[value="6"]:checked)  .term-indicator { transform: translateX(calc(100% + 4px)); }
main:has(.term-input[value="12"]:checked) .term-indicator { transform: translateX(calc(200% + 8px)); }

main:has(.term-input[value="3"]:checked)  .term-input[value="3"]  + .term-option,
main:has(.term-input[value="6"]:checked)  .term-input[value="6"]  + .term-option,
main:has(.term-input[value="12"]:checked) .term-input[value="12"] + .term-option { color: var(--text); }

.no-has main[data-term="3"]  .term-indicator { transform: translateX(0); }
.no-has main[data-term="6"]  .term-indicator { transform: translateX(calc(100% + 4px)); }
.no-has main[data-term="12"] .term-indicator { transform: translateX(calc(200% + 8px)); }
.no-has main[data-term="3"]  .term-input[value="3"]  + .term-option,
.no-has main[data-term="6"]  .term-input[value="6"]  + .term-option,
.no-has main[data-term="12"] .term-input[value="12"] + .term-option { color: var(--text); }

/* ── Term-driven visibility ───────────────────────────────────────────── */
/* Every term's price is already in the HTML; the checked radio decides what
   shows, so the page re-prices with JavaScript disabled. `.no-has` is the
   fallback for engines without :has(), where app.js mirrors the state onto
   <main data-term>. */
.price, .summary, .plan-option-price span { display: none; }

main:has(.term-input[value="3"]:checked)  .price[data-months="3"],
main:has(.term-input[value="6"]:checked)  .price[data-months="6"],
main:has(.term-input[value="12"]:checked) .price[data-months="12"] { display: block; }
main:has(.term-input[value="3"]:checked)  .plan-price-mini .price[data-months="3"],
main:has(.term-input[value="6"]:checked)  .plan-price-mini .price[data-months="6"],
main:has(.term-input[value="12"]:checked) .plan-price-mini .price[data-months="12"] { display: inline; }

main:has(.term-input[value="3"]:checked)  .plan-option-price span[data-months="3"],
main:has(.term-input[value="6"]:checked)  .plan-option-price span[data-months="6"],
main:has(.term-input[value="12"]:checked) .plan-option-price span[data-months="12"] { display: inline; }

main:has(.term-input[value="3"]:checked):has(#choose-lite:checked)     .summary[data-months="3"][data-plan="lite"],
main:has(.term-input[value="6"]:checked):has(#choose-lite:checked)     .summary[data-months="6"][data-plan="lite"],
main:has(.term-input[value="12"]:checked):has(#choose-lite:checked)    .summary[data-months="12"][data-plan="lite"],
main:has(.term-input[value="3"]:checked):has(#choose-optimum:checked)  .summary[data-months="3"][data-plan="optimum"],
main:has(.term-input[value="6"]:checked):has(#choose-optimum:checked)  .summary[data-months="6"][data-plan="optimum"],
main:has(.term-input[value="12"]:checked):has(#choose-optimum:checked) .summary[data-months="12"][data-plan="optimum"],
main:has(.term-input[value="3"]:checked):has(#choose-premium:checked)  .summary[data-months="3"][data-plan="premium"],
main:has(.term-input[value="6"]:checked):has(#choose-premium:checked)  .summary[data-months="6"][data-plan="premium"],
main:has(.term-input[value="12"]:checked):has(#choose-premium:checked) .summary[data-months="12"][data-plan="premium"] { display: grid; }

.no-has main[data-term="3"]  .price[data-months="3"],
.no-has main[data-term="6"]  .price[data-months="6"],
.no-has main[data-term="12"] .price[data-months="12"] { display: block; }
.no-has main[data-term="3"]  .plan-price-mini .price[data-months="3"],
.no-has main[data-term="6"]  .plan-price-mini .price[data-months="6"],
.no-has main[data-term="12"] .plan-price-mini .price[data-months="12"] { display: inline; }
.no-has main[data-term="3"]  .plan-option-price span[data-months="3"],
.no-has main[data-term="6"]  .plan-option-price span[data-months="6"],
.no-has main[data-term="12"] .plan-option-price span[data-months="12"] { display: inline; }
.no-has main[data-term="3"][data-plan="lite"]     .summary[data-months="3"][data-plan="lite"],
.no-has main[data-term="6"][data-plan="lite"]     .summary[data-months="6"][data-plan="lite"],
.no-has main[data-term="12"][data-plan="lite"]    .summary[data-months="12"][data-plan="lite"],
.no-has main[data-term="3"][data-plan="optimum"]  .summary[data-months="3"][data-plan="optimum"],
.no-has main[data-term="6"][data-plan="optimum"]  .summary[data-months="6"][data-plan="optimum"],
.no-has main[data-term="12"][data-plan="optimum"] .summary[data-months="12"][data-plan="optimum"],
.no-has main[data-term="3"][data-plan="premium"]  .summary[data-months="3"][data-plan="premium"],
.no-has main[data-term="6"][data-plan="premium"]  .summary[data-months="6"][data-plan="premium"],
.no-has main[data-term="12"][data-plan="premium"] .summary[data-months="12"][data-plan="premium"] { display: grid; }

/* ── Plans on stage ───────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; padding-top: 14px; }

/* Two-sided cards: the composition on the front, the money on the back. Both
   faces live in the same grid cell, so the card is as tall as the taller face
   and nothing is measured in fixed pixels. */
/* Column, not a bare block: on phones the "most popular" badge sits in the flow
   above the card, and a card with height:100% of the plan would then hang 50px
   past its own grid cell — straight over the next plan. */
.plan { position: relative; display: flex; flex-direction: column; perspective: 1600px; }
.plan-card {
  display: grid; flex: 1 1 auto; min-height: 0;
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.4, .12, .2, 1);
}
.plan-face {
  grid-area: 1 / 1;
  display: flex; flex-direction: column;
  padding: clamp(20px, 1.8vw, 26px);
  background: linear-gradient(180deg, rgba(255, 217, 160, .05), rgba(255, 255, 255, .012) 40%), var(--ink-700);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: border-color .45s ease, box-shadow .45s ease;
}
/* The offer is face up; the spec is the turn. Both faces carry the same button
   in the same place: the card turns on hover, so a button that lived on one
   face only would run away from the pointer reaching for it. */
/* Both faces pin the button to the bottom edge, so it occupies the very same
   spot on either side: the card can turn under the pointer without the target
   moving. */
.plan-offer { justify-content: flex-start; }
.plan-offer .plan-tagline { margin-bottom: 26px; }
.plan-offer .price-stack { margin-top: 0; }
.plan-details { transform: rotateY(180deg); }

/* Hover on a pointer device, focus for the keyboard, and a class toggled by a
   tap on touch screens — all three end up in the same place. */
@media (hover: hover) {
  .plan:hover .plan-card { transform: rotateY(180deg); }
}
/* Focus must NOT flip: tabbing to the button would turn the button away. The
   spec stays in the DOM, so a screen reader reads it either way. */
.plan.is-flipped .plan-card { transform: rotateY(180deg); }

.plan-popular .plan-face {
  background: linear-gradient(180deg, rgba(255, 217, 160, .14), rgba(255, 255, 255, .015) 46%), var(--ink-700);
  border-color: rgba(255, 217, 160, .34);
  box-shadow: var(--shadow-popular);
}
/* Standing in the beam: the card the light is on picks up a warm edge. */
.plan:hover .plan-face, .plan:focus-within .plan-face {
  border-color: rgba(255, 217, 160, .32); box-shadow: var(--shadow-popular);
}

.plan-badge {
  position: absolute; top: -14px; left: 50%; translate: -50% 0; z-index: 2;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 217, 160, .4);
  background: #241a16; color: var(--spot);
  font-size: .8125rem; font-weight: 600; letter-spacing: .01em;
}
.plan-name { font-size: 1.875rem; text-align: center; }
.plan-tagline {
  margin-top: 8px; color: rgba(245, 240, 234, .78); font-size: 1.0625rem;
  line-height: 1.45; min-height: 2lh; text-align: center;
}

/* Front: the contents as blocks, not a paragraph. */
/* The spec: six tiles, two per row, identical on every card — the number is
   what you compare, so it leads; the label names it and the note says what it
   means, because "с архивом" on its own is only legible to someone who already
   knows the product. Values come from the catalogue, so a card can never
   contradict the poster. */
.plan-spec {
  list-style: none; padding: 0; margin: 16px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.plan-spec li {
  display: grid; gap: 1px; align-content: start;
  padding: 11px 12px 12px;
  border: 1px solid var(--line); border-radius: 15px;
  background: rgba(255, 255, 255, .035);
}
.plan-spec .ico { width: 17px; height: 17px; color: var(--spot); opacity: .7; margin-bottom: 2px; }
.plan-spec b {
  font-size: 1.375rem; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  min-height: 1.15em;
}
.plan-spec span { font-size: .9375rem; font-weight: 600; line-height: 1.25; color: var(--text); }
/* The line-up, one logo at a time. Fixed height so the tile never resizes as
   the carousel turns; the timing comes from the generated plans.css. */
.lib-cycle {
  position: relative; display: block;
  /* 300×64 artwork: the strip's height fixes the logo size for good. */
  height: 30px; margin-top: 8px;
}
.lib-cycle img {
  position: absolute; left: 0; top: 50%;
  width: 100%; height: auto;
  translate: 0 -50%;
  opacity: 0;
  /* animation-name and the keyframes come from the generated plans.css: the
     loop length depends on how many services the plan carries. */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.plan-spec em {
  font-style: normal; font-size: .8125rem; line-height: 1.3;
  color: var(--dim); margin-top: 2px;
}
.plan-spec b .ico { width: 24px; height: 24px; opacity: 1; margin: 0; }
.spec-on b .ico { color: var(--gain); }
.spec-off { opacity: .66; }
.spec-off b .ico { color: var(--dim); }

/* Back: the money, and the one action. */
.price-stack { text-align: center; }
.price-main { display: flex; align-items: baseline; justify-content: center; gap: 9px; flex-wrap: wrap; }
.price-num { font-size: clamp(2.1rem, 1.5rem + 1.6vw, 2.75rem); font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.price-unit { color: var(--muted); font-size: 1rem; font-weight: 500; }
.price-total { margin-top: 10px; font-size: 1rem; font-weight: 500; }
.price-save { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; font-size: .9375rem; }
.price-save s { color: var(--dim); font-variant-numeric: tabular-nums; }
.save-pill {
  padding: 5px 12px; border-radius: 999px;
  background: var(--gain-soft); color: var(--gain); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.plan-cta { margin-top: auto; width: 100%; }
.plan-face .plan-cta { margin-top: auto; }
.plan-price-mini {
  margin: 16px 0 14px; text-align: center; font-size: .9375rem; color: var(--muted);
}
.plan-price-mini b {
  font-size: 1.375rem; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.plan-price-mini .price { display: none; }

.pricing-note { margin-top: 28px; font-size: .9375rem; color: var(--dim); max-width: 70ch; margin-inline: auto; text-align: center; }

/* ── What you get ─────────────────────────────────────────────────────── */

/* ── Comparison ───────────────────────────────────────────────────────── */

/* ── Checkout ─────────────────────────────────────────────────────────── */
.buy { background: var(--ink-850); border-top: 1px solid var(--line); }
/* Single centred column: on a theatre page the audience faces the middle, and
   a centred heading over an off-centre form reads as a mistake. */
.buy-grid { display: grid; gap: clamp(32px, 4vw, 56px); justify-items: center; }
.buy-form-col { width: min(100%, 580px); }
.buy .section-head { text-align: center; }
.how { width: min(100%, 760px); }
.order { display: grid; gap: 26px; }
.plan-choice { border: 0; padding: 0; margin: 0; }
/* The same control as on the stage, repeated inside the form: the radios share
   one name and one form, so the browser keeps them in sync by itself — no
   JavaScript, no second source of truth. */
.term-rail-form { width: 100%; max-width: none; margin-bottom: 4px; }

.plan-choice legend, .field label {
  padding: 0; margin-bottom: 12px;
  font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.plan-choice-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.plan-input { position: absolute; opacity: 0; width: 0; height: 0; }
.plan-option {
  display: grid; gap: 4px; padding: 16px 18px; min-height: 76px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-700);
  cursor: pointer; transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.plan-option:hover { border-color: var(--line-strong); }
.plan-option-name { font-weight: 600; font-size: 1.0625rem; }
.plan-option-price { font-size: .9375rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.plan-input:checked + .plan-option { border-color: var(--brand); background: rgba(0, 101, 255, .14); }
.plan-input:focus-visible + .plan-option { outline: 2px solid var(--brand-lift); outline-offset: 2px; }

.phone-input {
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--ink-700);
  transition: border-color .18s var(--ease);
}
.phone-input:focus-within { border-color: var(--brand); }
.phone-input:has(input:focus-visible) { outline: 2px solid var(--brand-lift); outline-offset: 2px; }
.phone-prefix { color: var(--muted); font-weight: 500; font-size: 1.0625rem; }
.phone-input input {
  flex: 1; min-width: 0; min-height: 60px; padding: 0;
  background: none; border: 0; outline: none;
  font-size: 1.1875rem; font-weight: 500; letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.phone-input input::placeholder { color: var(--dim); font-weight: 400; }
.field:has(.error:not([hidden])) .phone-input { border-color: var(--danger); }
.hint { margin-top: 10px; font-size: .9375rem; color: var(--dim); }
.error { margin-top: 10px; font-size: 1rem; color: var(--danger); font-weight: 500; }

.order-summary { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-700); }
.summary { gap: 10px; }
.summary-line { display: flex; justify-content: space-between; gap: 18px; font-size: 1rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.summary-gain span:last-child { color: var(--gain); }
.summary-total { padding-top: 14px; margin-top: 6px; border-top: 1px solid var(--line); color: var(--text); font-weight: 700; font-size: 1.1875rem; }
.legal { font-size: .875rem; color: var(--dim); line-height: 1.55; text-align: center; }

/* ── How it works ─────────────────────────────────────────────────────── */
.how { padding: clamp(28px, 2.8vw, 38px); background: var(--ink-800); border: 1px solid var(--line); border-radius: var(--r-lg); }
.how h2 { font-size: 1.375rem; margin-bottom: 26px; text-align: center; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; counter-reset: step; }
.steps li { position: relative; padding-left: 50px; counter-increment: step; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--spot-soft); color: var(--spot);
  font-size: .9375rem; font-weight: 700;
}
.steps li:not(:last-child)::after {
  content: ''; position: absolute; left: 15.5px; top: 38px; bottom: -24px;
  width: 1px; background: var(--line);
}
.steps p { margin-top: 6px; font-size: 1rem; color: var(--muted); line-height: 1.55; }
.how-note {
  display: flex; gap: 13px; align-items: flex-start;
  margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line);
  font-size: .9375rem; color: var(--muted); line-height: 1.55;
}
.how-note .ico { color: var(--spot); margin-top: .1em; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq { background: var(--ink-800); border-top: 1px solid var(--line); }
.faq-list { display: grid; gap: 12px; max-width: 880px; margin-inline: auto; }
.faq-item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-700); overflow: hidden; }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 24px; cursor: pointer; font-weight: 600; font-size: 1.0625rem; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq-answer { padding: 0 24px 24px; color: var(--muted); max-width: 66ch; font-size: 1rem; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer { padding-block: 48px; border-top: 1px solid var(--line); }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.footer-brand { display: flex; flex-direction: column; align-items: center; }
.footer-note { margin-top: 10px; font-size: .9375rem; color: var(--dim); max-width: 42ch; }
.footer-nav { display: flex; gap: 26px; font-size: 1rem; color: var(--muted); }
.footer-nav a:hover { color: var(--text); }
.footer-copy { font-size: .9375rem; color: var(--dim); }

/* ── Status page ──────────────────────────────────────────────────────── */
.status-page { display: grid; place-items: center; min-height: 100dvh; padding: 40px 20px; }
.status-card {
  width: min(100%, 500px); padding: clamp(30px, 4vw, 44px); text-align: center;
  background: var(--ink-700); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.status-mark { width: 68px; height: 68px; margin: 0 auto 26px; border-radius: 50%; display: grid; place-items: center; }
.status-mark.is-wait { background: rgba(125, 178, 255, .14); color: var(--brand-lift); }
.status-mark.is-ok { background: var(--gain-soft); color: var(--gain); }
.status-mark.is-warn { background: var(--spot-soft); color: var(--spot); }
.status-mark.is-bad { background: rgba(255, 138, 120, .14); color: var(--danger); }
.status-mark .ico { width: 32px; height: 32px; }
.status-card h1 { font-size: 1.625rem; margin-bottom: 12px; }
.status-card p { color: var(--muted); font-size: 1.0625rem; }
.status-details { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 12px; text-align: left; }
.status-details div { display: flex; justify-content: space-between; gap: 18px; font-size: 1rem; }
.status-details dt { color: var(--muted); }
.status-details dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.status-actions { margin-top: 30px; display: grid; gap: 12px; }
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2.5px solid rgba(125, 178, 255, .25); border-top-color: var(--brand-lift);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  /* Разделы уезжают в меню — там они уже лежат, просто до сих пор были скрыты
     как дубль центральной навигации. */
  .site-nav { display: none; }
  .menu-nav { display: flex; }
  .header-inner { grid-template-columns: auto 1fr; }
  .header-actions { grid-column: 2; }
}

@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; }

  /* Порядок как в прайсе: Lite → Optimum → Premium. Раньше рекомендованный
     тариф поднимался наверх, но в столбце это читается не как совет, а как
     сбитая последовательность — цена скачет вниз и обратно вверх. */

  /* Ферма стоит над тремя колонками, а карточки идут в одну — «средний» софит
     больше ни над чем конкретным не висит. Поэтому на узком экране светят все
     три одинаково, это просто заливка сцены. */
  .beam-1, .beam-2, .beam-3 { opacity: .62; }
  .lamp-1, .lamp-2, .lamp-3 { opacity: .8; }
  /* Back in the flow — and the centring translate from the absolute state must
     be undone, or the badge hangs off the left edge. */
  /* Back in the flow: the badge is a block-level <p> inside a block card, so it
     needs an explicit width, not align-self. */
  .plan-badge { position: static; translate: none; width: fit-content; margin: 0 auto 14px; }
  /* No hover on a touch screen — the hint says what actually works there. */
  .plan-tagline { min-height: 0; }
  .term-rail { max-width: none; }
  .plan-choice-options { grid-template-columns: 1fr; }
  .plan-option { display: flex; align-items: baseline; justify-content: space-between; min-height: 62px; }
  .beam { filter: blur(16px); }

  /* На телефоне карточка занимает почти весь экран, и тёплая полупрозрачная
     заливка на такой площади читается как муть: рядом с чётким рельсом сроков
     карточка выглядела размытой. Здесь поверхность плотная, а тёплый отсвет
     оставлен только у верхней кромки. */
  .plan-face {
    background: linear-gradient(180deg, rgba(255, 217, 160, .05), transparent 18%), var(--ink-700);
    border-color: rgba(255, 244, 232, .16);
  }
  .plan-popular .plan-face {
    background: linear-gradient(180deg, rgba(255, 217, 160, .1), transparent 20%), var(--ink-700);
    border-color: rgba(255, 217, 160, .4);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  }
}

@media (max-width: 560px) {
  .header-cta { display: none; }
  /* Phones: the offer side is what people land on, so the price gets the room
     and the button is a full-width target. */
  .stage { padding-block: 64px 44px; }
  .plan-face { padding: 20px 18px 22px; }
  .plan-name { font-size: 1.625rem; }
  .price-num { font-size: 2.375rem; }
  .price-total { font-size: 1.0625rem; }
  .plan-cta { margin-top: 22px; min-height: 56px; }
  /* The card is as tall as its spec side, so on a phone the spec is what
     decides how much empty room the offer side has. Tighten it, and cap the
     note at two lines instead of letting one long sentence stretch the card. */
  .plan-spec { gap: 7px; }
  .plan-spec li { padding: 8px 10px 9px; }
  .plan-spec .ico { width: 15px; height: 15px; margin-bottom: 0; }
  .plan-spec b { font-size: 1.125rem; }
  .plan-spec span { font-size: .8125rem; }
  /* The line-up, one logo at a time. Fixed height so the tile never resizes as
   the carousel turns; the timing comes from the generated plans.css. */
.lib-cycle {
  position: relative; display: block;
  /* 300×64 artwork: the strip's height fixes the logo size for good. */
  height: 30px; margin-top: 8px;
}
.lib-cycle img {
  position: absolute; left: 0; top: 50%;
  width: 100%; height: auto;
  translate: 0 -50%;
  opacity: 0;
  /* animation-name and the keyframes come from the generated plans.css: the
     loop length depends on how many services the plan carries. */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.plan-spec em {
    font-size: .75rem; line-height: 1.25;
    /* Three lines, not two: on a phone the cards stack, so the height is
       affordable — and a truncated explanation explains nothing. */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .plan-offer .plan-tagline { margin-bottom: 20px; }
  .lamp { width: 36px; }
  .truss { top: 12px; }
  .header-inner { height: 62px; gap: 12px; }
  .hero-inner { max-width: none; }
  .term-option { min-height: 62px; font-size: .9375rem; }
  .lamp { width: 42px; }
  /* Narrow phones: the two short plates share the first row and the long one
     takes the second on its own. Left as written, the wide "films and series"
     label forced the wrap and stranded "5 devices" alone below. */
  .poster-stats { gap: 8px; }
  .poster-stats li { flex: 1 1 42%; min-width: 0; padding: 9px 12px; }
  .poster-stats li:nth-child(1) { order: 1; }
  .poster-stats li:nth-child(3) { order: 2; }
  .poster-stats li:nth-child(2) { order: 3; flex-basis: 100%; }
  .poster-libs ul { grid-template-columns: repeat(3, 108px); }
  .poster-libs li { height: 44px; padding: 0 9px; }
  .poster-libs img { width: 100%; }
  .poster-sport { font-size: .8125rem; padding: 6px 12px; }

  .curtain-left { background-image: url('/assets/curtain/left-mobile.webp'); }
  .curtain-right { background-image: url('/assets/curtain/right-mobile.webp'); }
}

/* On short viewports the playbill scales down instead of scrolling: a poster
   you have to scroll is no longer a poster. */
@media (max-height: 900px) {
  .curtain-poster { gap: 10px; padding-block: 14px 20px; }
  .curtain-logo { margin-bottom: 0; height: 34px; }
  .curtain-title { font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem); }
  .poster-stats li { min-width: 112px; padding: 9px 14px; }
  .stat-value { font-size: 1.5rem; }
  .stat-label { font-size: .8125rem; }
  .poster-sport { padding: 6px 14px; font-size: .875rem; }
  .poster-libs-label { margin-bottom: 10px; }
  .poster-libs ul { grid-template-columns: repeat(3, 124px); }
  .poster-libs li { height: 46px; }
  .poster-libs img { width: 100%; }
  .curtain-poster .btn { margin-top: 6px; min-height: 54px; }
  .curtain-hint { display: none; }
}

/* The plans must fit the first screen: a card you have to scroll to finish
   reading is a card you compare badly. On shorter viewports the tagline goes
   (the tiles say the same thing in numbers) and the tiles tighten. */
@media (max-height: 840px) {
  .stage { padding-block: 64px 48px; }
  .plan-name { font-size: 1.625rem; }
  .plan-spec { margin-top: 14px; gap: 7px; }
  .plan-spec li { padding: 9px 11px 10px; }
  .plan-spec b { font-size: 1.25rem; }
  /* The line-up, one logo at a time. Fixed height so the tile never resizes as
   the carousel turns; the timing comes from the generated plans.css. */
.lib-cycle {
  position: relative; display: block;
  /* 300×64 artwork: the strip's height fixes the logo size for good. */
  height: 30px; margin-top: 8px;
}
.lib-cycle img {
  position: absolute; left: 0; top: 50%;
  width: 100%; height: auto;
  translate: 0 -50%;
  opacity: 0;
  /* animation-name and the keyframes come from the generated plans.css: the
     loop length depends on how many services the plan carries. */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.plan-spec em { font-size: .75rem; }
  .term-option { min-height: 46px; font-size: .9375rem; }
  .lamp { width: 44px; }
}

/* Only a laptop needs the tagline gone: on a phone the cards stack, so height
   is not scarce there. */
@media (max-height: 840px) and (min-width: 900px) {
  .plan-tagline { display: none; }
}

/* Laptops at 700px of viewport — 13" screens with a browser chrome — still get
   the whole card above the fold. Below this the page simply scrolls; a phone in
   landscape is not the case worth optimising for. */
@media (max-height: 740px) {
  .stage { padding-block: 48px 36px; }
  .plan-name { font-size: 1.5rem; }
  .plan-spec { margin-top: 12px; gap: 6px; }
  .plan-spec li { padding: 8px 10px 9px; }
  .plan-spec .ico { width: 15px; height: 15px; margin-bottom: 1px; }
  .plan-spec b { font-size: 1.125rem; }
  .plan-spec span { font-size: .875rem; }
  /* The line-up, one logo at a time. Fixed height so the tile never resizes as
   the carousel turns; the timing comes from the generated plans.css. */
.lib-cycle {
  position: relative; display: block;
  /* 300×64 artwork: the strip's height fixes the logo size for good. */
  height: 30px; margin-top: 8px;
}
.lib-cycle img {
  position: absolute; left: 0; top: 50%;
  width: 100%; height: auto;
  translate: 0 -50%;
  opacity: 0;
  /* animation-name and the keyframes come from the generated plans.css: the
     loop length depends on how many services the plan carries. */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.plan-spec em { font-size: .6875rem; line-height: 1.25; }
  .term-option { min-height: 42px; }
  .lamp { width: 38px; }
  .pricing-note { margin-top: 18px; font-size: .875rem; }
}

/* ── Motion preferences ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* No carousel: the first logo stays put. */
  .lib-cycle img { animation: none; opacity: 0; }
  .lib-cycle img:first-child { opacity: 1; }
  .curtain { display: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ── Legal documents ──────────────────────────────────────────────────
   The offer is the one page here nobody reads for pleasure, so it is set
   for reading endurance rather than atmosphere: one column at 68ch, plain
   dark background, no curtain, no stage. */
.doc-page { background: var(--ink-900); }

.doc-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 820px; margin: 0 auto; padding: 20px 20px 0;
}
.doc-bar .logo img { height: 24px; }
.doc-back { color: var(--muted); text-decoration: none; font-size: .9375rem; }
.doc-back:hover { color: var(--text); }

.doc { max-width: 820px; margin: 0 auto; padding: 32px 20px 80px; }
.doc h1 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); margin: 0 0 12px; }
.doc-lead { font-size: 1.0625rem; color: var(--text); max-width: 68ch; margin: 0 0 8px; }
.doc-meta { color: var(--muted); font-size: .875rem; margin: 0 0 32px; }

/* The global section rhythm is built for a landing page; inside a document
   it would put a screen of air between clauses. */
.doc-section { padding-block: 0; margin-bottom: 28px; }
.doc-section h2 {
  font-size: 1.0625rem; margin: 0 0 10px;
  color: var(--spot); letter-spacing: .01em;
}
.doc-section p { max-width: 68ch; margin: 0 0 10px; color: var(--muted); }

.doc-req { display: grid; gap: 8px; margin: 0; }
.doc-req div { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.doc-req dt { color: var(--muted); min-width: 140px; }
.doc-req dd { margin: 0; }

@media (max-width: 600px) {
  .doc-req dt { min-width: 0; font-size: .875rem; }
}