/* LAMPA pay site — components. Tokens: tokens.css. The lamp rig: web/landing/src/lamp/lamp.css.
   Nothing here hides content unless a state says so in markup; every page reads with scripting off. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ground); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--ground); color: var(--text);
  font: 400 1.0625rem/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased; text-wrap: pretty; overflow-wrap: anywhere;
}
h1, h2, h3, p, ol, ul, dl, dd, figure, fieldset { margin: 0; }
ol, ul { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* A hook with no behaviour stays hidden (SPEC §2.3): a component's own display (.btn is inline-flex) must not outrank the
   hidden attribute. Measured 2026-09-15: without this, «Скопировать код» showed before any binding. */
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- band: the night letterhead ---------- */
.band { background: var(--band); color: var(--band-text); border-bottom: 1px solid var(--band-line); }
.band__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; min-height: 4rem; padding-block: .75rem; }
.lockup { display: inline-flex; align-items: center; gap: .625rem; text-decoration: none; color: var(--band-text); flex: none; }
.lockup__tile { width: 36px; height: 36px; border-radius: 10px; flex: none; } /* a mark, fixed: it does not grow with text */
.lockup__word { height: 18px; width: auto; }
.band__label { display: none; color: var(--band-text2); font-size: .9375rem; padding-left: 1rem; margin-left: .375rem; border-left: 1px solid var(--band-line); }
.band__side { display: flex; align-items: center; gap: 1.25rem; font-size: .9375rem; }
.band__seller { display: none; color: var(--band-text2); }
.band__seller b { color: var(--band-text); font-weight: 600; }
.band__help { color: var(--band-text); }
.band__seller-row { color: var(--band-text2); font-size: .875rem; padding-bottom: .75rem; margin-top: -.25rem; }
.band__seller-row b { color: var(--band-text); font-weight: 600; }
@media (min-width: 60rem) {
  .band__label, .band__seller { display: inline; }
  .band__seller-row { display: none; }
}

/* ---------- main grid ---------- */
.main { flex: 1; padding-block: 2rem 4rem; }
.grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 60rem) {
  .main { padding-block: 3.5rem 6rem; }
  .grid { grid-template-columns: minmax(0, 1fr) 23.5rem; gap: 4.5rem; }
}

/* ---------- stage: the moment ---------- */
.stage { display: grid; gap: 1.75rem; max-width: 40rem; }
.stage__head { display: grid; gap: .75rem; }
.back { display: inline-flex; gap: .5rem; color: var(--text2); font-size: .9375rem; }
.eyebrow { color: var(--text2); font-size: .9375rem; letter-spacing: .01em; }
.h1 { font: 400 min(calc(1.25rem + 2.2vw), 8.4vw)/1.18 var(--font-display); letter-spacing: -.005em; text-wrap: balance; }
.lede { color: var(--text2); font-size: 1.0625rem; max-width: 36rem; }
.lede + .lede { margin-top: -.25rem; }
@media (min-width: 48rem) { .h1 { font-size: min(2.75rem, calc(1.375rem + 2.4vw)); line-height: 1.13; } .lede { font-size: 1.1875rem; } }
.h2 { font: 400 min(1.375rem, 7vw)/1.25 var(--font-display); }
.h3 { font-weight: 600; font-size: min(1.0625rem, 6.4vw); line-height: 1.35; }
.small { font-size: .9375rem; color: var(--text2); }

/* the lamp's window — night in both themes; the rig is sized off --v */
.window {
  --v: 88px; position: relative; width: var(--v); height: var(--v); border-radius: var(--r-tile); overflow: hidden; flex: none;
  background: radial-gradient(120% 90% at 50% 18%, var(--window-top) 0%, var(--window-bottom) 70%);
  box-shadow: inset 0 0 0 1px rgb(243 238 228 / .06);
}
.window .lamp { position: absolute; width: calc(var(--v) * 1.636); left: calc(var(--v) * -.318); top: calc(var(--v) * .073); }
@media (min-width: 48rem) { .window { --v: 104px; } }

/* ---------- actions ---------- */
.actions { display: grid; gap: .75rem; }
@media (min-width: 36rem) { .actions--row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; } }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-align: center;
  min-height: 3.5rem; padding: .875rem min(1.75rem, 6vw); border-radius: var(--r-control);
  font: 600 1.0625rem/1.3 var(--font-body); text-decoration: none; cursor: pointer; border: 0; white-space: normal;
}
.btn--primary { background: var(--action); color: var(--on-action); }
.btn--primary:hover { background: var(--action-hover); }
.btn--quiet { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.btn--quiet:hover { box-shadow: inset 0 0 0 1.5px var(--text2); }
.link { color: var(--text); text-decoration: underline; font-weight: 500; }
.link--muted { color: var(--text2); }
@media (max-width: 35.99rem) { .actions .btn { width: 100%; } }

/* ---------- quote ---------- */
.amount { display: grid; gap: .25rem; }
.amount__label { color: var(--text2); font-size: .9375rem; }
.amount__value { font: 600 calc(1.5rem + 4vw)/1.1 var(--font-body); letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; }
.amount__per { color: var(--text2); font-size: 1rem; }
@media (min-width: 48rem) { .amount__value { font-size: min(3rem, calc(1.5rem + 4vw)); } }
.facts { display: grid; }
.facts > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .125rem 1rem; padding-block: .75rem; border-top: 1px solid var(--line); }
.facts > div:last-child { border-bottom: 1px solid var(--line); }
.facts dt { color: var(--text2); flex: 0 1 auto; overflow-wrap: normal; word-break: normal; }
.facts dd { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; margin-left: auto; overflow-wrap: anywhere; }
/* a row whose value is prose (an address): label above, value below, both left */
.facts--stack > div { display: grid; gap: .125rem; }
.facts--stack dd { text-align: left; margin-left: 0; }
.facts--total > div:last-child dt { color: var(--text); font-weight: 600; }
.facts--total > div:last-child dd { font-size: 1.25rem; }
.facts .credit { font-weight: 600; }

/* the terms the buyer agrees to, said before the button */
.terms { background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-inset); padding: 1rem min(1.125rem, 4.5vw); display: grid; gap: .5rem; }
.terms__title { font-weight: 600; }
.terms p { color: var(--text2); }
.terms p.terms__lead { color: var(--text); }

/* ---------- choices: plan, devices, method ---------- */
.choices { display: grid; gap: .75rem; }
.choices__legend { font-weight: 600; margin-bottom: .75rem; }
.choices--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 36rem) { .choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.choice { position: relative; display: block; cursor: pointer; }
.choice__input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice__body {
  display: grid; gap: .25rem; height: 100%; padding: 1rem min(1.125rem, 4.5vw); border-radius: var(--r-inset);
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line);
}
.choice__input:checked + .choice__body { background: var(--choice-fill); box-shadow: inset 0 0 0 2px var(--choice-line); }
.choice__input:focus-visible + .choice__body { outline: 2px solid var(--focus); outline-offset: 3px; }
.choice__title { font-weight: 600; display: flex; align-items: center; gap: .625rem; }
.choice__price { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.choice__note { color: var(--text2); font-size: .9375rem; }
.choice__title svg { width: 24px; height: 24px; flex: none; }
.seats { display: flex; flex-wrap: wrap; gap: .5rem; }
.seats .choice__body { min-width: 3.25rem; min-height: 3.25rem; place-items: center; padding: .5rem .875rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- waiting: never amber, never a promise ---------- */
.wait { display: inline-flex; gap: .45rem; align-items: center; height: 1.5rem; }
.wait i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--text2); animation: wait 1.4s var(--e-out) infinite; }
.wait i:nth-child(2) { animation-delay: .2s; } .wait i:nth-child(3) { animation-delay: .4s; }
@keyframes wait { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wait i { animation: none; opacity: .6; } }

/* ---------- notes and steps ---------- */
.note { background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-inset); padding: 1rem min(1.125rem, 4.5vw); display: grid; gap: .375rem; }
.note__title { font-weight: 600; }
.note p { color: var(--text2); }
.note--plain { background: transparent; border: 0; padding: 0; }
.steps { display: grid; gap: .875rem; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; counter-increment: step; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-strong); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums;
}
.steps li span { padding-top: .2rem; }
.support { color: var(--text2); font-size: .9375rem; }
.support a { color: var(--text); }
.ref { color: var(--text2); font-size: .875rem; font-variant-numeric: tabular-nums; }

/* ---------- the access code ---------- */
.code { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); padding: min(1.25rem, 5vw); display: grid; gap: 1rem; }
.code__label { color: var(--text2); font-size: .9375rem; }
.code__value {
  font: 600 1.5rem/1.25 var(--font-code); letter-spacing: .02em; font-variant-numeric: tabular-nums;
  user-select: all; -webkit-user-select: all; word-break: normal; overflow-wrap: normal; /* breaks only at the <wbr> after each hyphen */
}
@media (min-width: 26rem) { .code__value { font-size: 1.75rem; } }
@media (min-width: 48rem) { .code { padding: 1.75rem; } .code__value { font-size: 2.25rem; } }
.code__row { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }
.code__hint { color: var(--text2); font-size: .9375rem; }
.cross { display: grid; gap: 1.25rem; }
@media (min-width: 60rem) { .cross { grid-template-columns: minmax(0, 1fr) 12rem; align-items: start; gap: 2rem; } }
.qr { display: none; }
@media (min-width: 60rem) {
  .qr { display: grid; gap: .5rem; justify-items: center; text-align: center; }
  .qr__img { width: 9.5rem; height: 9.5rem; padding: .5rem; background: #FFFFFF; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
  .qr__img svg { width: 100%; height: 100%; }
  .qr figcaption { color: var(--text2); font-size: .875rem; }
}

/* ---------- aside: what is sold, and by whom ---------- */
.offer { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); padding: min(1.5rem, 5.4vw); display: grid; gap: 1.5rem; }
@media (min-width: 60rem) { .offer { position: sticky; top: 1.5rem; padding: 1.75rem; } }
.offer__block { display: grid; gap: .75rem; }
.offer__block + .offer__block { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.offer p { color: var(--text2); }
.ticks { display: grid; gap: .5rem; }
.ticks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; }
.ticks svg { width: 20px; height: 20px; margin-top: .15rem; color: var(--text2); }
.marks { display: flex; flex-wrap: wrap; gap: .5rem; }
.mark { display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .75rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); font-size: .9375rem; font-weight: 600; }
.mark svg { width: 18px; height: 18px; }
.seller { display: grid; gap: .125rem; }
.seller b { font-weight: 600; }
.seller span { color: var(--text2); font-size: .9375rem; }
.doclinks { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .9375rem; }
.doclinks a { color: var(--text); }

/* ---------- foot ---------- */
.foot { background: var(--foot); border-top: 1px solid var(--line); padding-block: 2.5rem 2rem; font-size: .9375rem; }
.foot__grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .foot__grid { grid-template-columns: 1.3fr 1.2fr 1fr 1.1fr; gap: 2.5rem; } }
.foot__title { font-weight: 600; margin-bottom: .625rem; }
.foot p, .foot li { color: var(--text2); }
.foot li + li { margin-top: .375rem; }
.foot a { color: var(--text); }
.foot__base { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; color: var(--text2); }

/* ---------- legal documents ---------- */
.doc { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .doc { grid-template-columns: 15rem minmax(0, 44rem); gap: 4.5rem; } }
.doc__toc { display: grid; gap: .5rem; align-content: start; font-size: .9375rem; }
@media (min-width: 60rem) { .doc__toc { position: sticky; top: 1.5rem; } }
.doc__toc a { color: var(--text2); text-decoration: none; }
.doc__toc a[aria-current="page"] { color: var(--text); font-weight: 600; }
.doc__body { display: grid; gap: 2rem; }
.doc__meta { color: var(--text2); font-size: .9375rem; }
.doc section { display: grid; gap: .75rem; scroll-margin-top: 1.5rem; }
.doc section p { color: var(--text); }
.slot {
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-inset); padding: .875rem min(1rem, 4.5vw);
  color: var(--text2); font-size: .9375rem; background: var(--inset);
}
.slot b { color: var(--text); font-weight: 600; }
.card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); padding: 1.5rem; }

/* ---------- additions the templates rely on ---------- */
.skip { position: absolute; left: .75rem; top: -4rem; z-index: 10; padding: .625rem 1rem; border-radius: 10px; background: var(--action); color: var(--on-action); font-weight: 600; text-decoration: none; }
.skip:focus { top: .75rem; }
.band__brand { display: flex; align-items: center; min-width: 0; }
.band { --wm-counter: var(--band); }
.lockup__word .wm-counter { fill: var(--wm-counter); }
.stage__form { display: grid; gap: 1.75rem; }
.seats__note { margin-top: .75rem; }
button.link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 500; }
.actions .link { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
.foot__name { color: var(--text); font-weight: 600; }
.foot__line { margin-top: .625rem; }
.doc__contents { display: grid; gap: .375rem; padding-left: 0; font-size: .9375rem; }
.doc__contents a { color: var(--text2); }
.slot--inline { display: inline-block; padding: .25rem .625rem; }
.contacts { display: grid; gap: 1.5rem; }
@media (max-width: 35.99rem) { .code__row .btn { width: 100%; } }

/* ---------- the largest text sizes ----------
   Under ~17em of measure an 18-letter Russian word («конфиденциальности») cannot sit on one line at any layout, so
   long words may be hyphenated there and only there. The query's em is the container's own font size: 375 px at
   100 % text is 23.4em (no hyphenation at all), at 200 % it is 11.7em.
   hyphens:auto alone was wrong — measured 2026-09-15, Chromium hyphenates to fill lines and split «се-/годня»,
   «ко-/личество» and «Лам-/па», all of which fit a line. The word-length limit is what stops that; the
   before/after minimums are NOT enforced by the engine (measured: «автопродле-/ние,» 8|5, «конфиденциально-/сти»
   14|4 under a 6|6 setting; 16|2 under 3|3), so they are set to the Russian orthographic rule itself — a single
   letter is never left or carried, two may be («-ти»): 15+ characters, 2+ letters a side. verify.mjs measures every
   break against the same rule. WebKit, Android unverified. */
.main, .foot { container-type: inline-size; }
@container (max-width: 17em) {
  p, li, dt, dd, a, span, legend, label, h1, h2, h3, .btn {
    -webkit-hyphens: auto; hyphens: auto;
    hyphenate-limit-chars: 15 2 2;
    -webkit-hyphenate-limit-before: 2; -webkit-hyphenate-limit-after: 2;
  }
}

/* information only: what the provider's own page will offer (external-checkout S1 — a purchase takes no method here) */
.methods-info { display: grid; gap: .625rem; }
/* disabled = flat ground and the note that says why; never opacity, which took «Сейчас недоступен» to 2.93:1 (measured) */
.choice__input:disabled + .choice__body { background: var(--inset); box-shadow: inset 0 0 0 1.5px var(--line); cursor: not-allowed; }
.choice__input:disabled + .choice__body .choice__title { color: var(--text2); }

/* OD-66 (owner, 2026-09-16): the terms, charges, cancellation and documents are in the page, collapsed, small and grey.
   --text2 on the page's own background is the colour .small already passes the 4.5:1 text gate with; verify opens every
   <details> before measuring, so the open fine print is judged too, at 200 % text as well. */
.fineprint { margin-top: .25rem; font-size: .8125rem; line-height: 1.45; color: var(--text2); }
.fineprint__summary { display: inline-flex; align-items: center; min-height: 2.75rem; cursor: pointer; color: var(--text2); text-decoration: underline; text-underline-offset: .15em; list-style: none; }
.fineprint__summary::-webkit-details-marker { display: none; }
.fineprint__summary::after { content: "\25BE"; margin-left: .35em; text-decoration: none; }
.fineprint[open] > .fineprint__summary::after { content: "\25B4"; }
.fineprint__body { display: grid; gap: .375rem; padding-bottom: .5rem; }
.fineprint__body p { color: var(--text2); }
.fineprint a, .fineprint .link { color: var(--text2); }
.fineprint .doclinks { font-size: inherit; }
.fineprint--foot { margin-top: 0; }
.fineprint--foot > .fineprint__summary { min-height: 2.75rem; }

/* OD-67 (owner, 2026-09-17): the payer's e-mail AFTER payment — below the code, quiet, optional. The save button is quiet: the
   page's one lit capsule stays «Открыть приложение». The field's edge is --text2, not --line-strong: a control's boundary
   needs 3:1 against its surface (WCAG 1.4.11), and --line-strong is 1.8:1 on the day surface. The status line keeps room for
   its longest refusal at every text size, so a refusal appearing under the field moves nothing on the page. */
.contact { background: var(--surface); border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line); padding: min(1.25rem, 5vw); display: grid; gap: .875rem; }
@media (min-width: 48rem) { .contact { padding: 1.5rem 1.75rem; } }
.contact__title { font-weight: 600; }
.field { display: grid; gap: .375rem; }
.field__label { font-size: .9375rem; color: var(--text2); }
.field__input {
  width: 100%; min-height: 3rem; padding: .625rem .875rem; border: 0; border-radius: 12px;
  background: var(--ground); color: var(--text); font: 400 1.0625rem/1.4 var(--font-body);
  box-shadow: inset 0 0 0 1.5px var(--text2);
}
.field__input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.check { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .625rem; align-items: start; font-size: .9375rem; color: var(--text); cursor: pointer; }
.check__input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--choice-line); }
.contact__status { min-height: calc(3 * 1.45em); font-size: .9375rem; line-height: 1.45; color: var(--text); }
@media (min-width: 48rem) { .contact__status { min-height: calc(2 * 1.45em); } }
.contact--saved { gap: .375rem; }