/* ============================================================================
   Gistil — the signed-in side of the product.

   ONE SYSTEM. This file is the landing's design system (public/landing/assets/
   css/main.css) applied to the app: same near-black ground, same gold, same
   three typefaces loaded from the same four font files. A visitor who clicks
   the gold "Sign in" pill on the landing must not feel they changed products.

   Direction:
   · TYPE IS THREE ROLES, exactly as on the landing. Bricolage Grotesque is the
     display face (headings, figures, the score-sized numbers). Source Serif 4
     carries the argument — anything you actually read as prose. JetBrains Mono
     carries every measurement and every piece of chrome: labels, eyebrows,
     timecodes, axis ticks, buttons. An autopsy report sets its measurements in
     a different face from its prose; so does this.
   · ONE LOUD THING PER SCREEN. On the personal record that used to be a
     waterline across the top; since round 2 (see the bottom of this file) it is
     the box a person types a link into, and the gold tally moved down to a
     quarter of its size.
   · COLOR IS ONE WARM FAMILY. Gold, bone and graphite, and the charts speak it
     too. The marks used to be a validated blue ramp — the only cool hue in the
     product, chosen so a measurement could not be mistaken for the brand — and
     on the finished page, beside baked metal everywhere else, it read as flat
     blue on near-black (owner, 2026-09-09). The ordinal ramp is now warm ink
     #E9E2D4 / #A8A092 / #6E6960: still monochrome, still monotone in lightness,
     still never gold. GOLD IS STILL CHROME — the mark, the tally figure, the
     one live button — and the single exception is a METER, which is a plan or a
     goal running down rather than a measurement of a video, and which wears the
     baked gold plate through CSS. The landing's own worth/skim/skip trio
     (#3FA96A / #C9A227 / #D2564A) was re-run as a categorical set on this
     surface and FAILED — gold sits at L 0.728, outside the dark lightness band,
     and gold↔green is ΔE 7.2 under protanopia — which is why the ordinal set is
     monochrome, then and now.
   ========================================================================== */

/* The landing bundle holds the one copy of these four files on disk; the app
   reaches them through Propshaft (see config/initializers/assets.rb), so each
   arrives digested and immutably cached. No second copy to drift out of sync
   with the front door. */
@font-face { font-family: "Bricolage Grotesque";
  src: url("/assets/BricolageGrotesque-var-b86257e5.woff2") format("woff2");
  font-weight: 200 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono";
  src: url("/assets/JetBrainsMono-var-8a992d39.woff2") format("woff2");
  font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Source Serif 4";
  src: url("/assets/SourceSerif4-400-aa808dcb.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4";
  src: url("/assets/SourceSerif4-400i-8545965a.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* surfaces — the landing's four steps, unchanged */
  --bg: #07080A;
  --panel: #0F1116;
  --panel-2: #14171C;
  --panel-3: #1A1E25;

  /* hairlines carry the depth; no borderless shadows anywhere */
  --edge: #22262C;
  --edge-2: #2E333B;

  /* ink: bone for what matters, two demotions. If everything is bone, nothing is. */
  --bone: #F2EEE6;
  --bone-dim: #C9C4BA;
  --mute: #8A9099;
  --mute-2: #697077;

  /* CHROME. Never a chart mark. */
  --gold: #C9A227;
  --gold-bright: #DFBC55;
  --gold-deep: #8A6D1C;

  /* DATA. See the header: warm ink, never gold. --accent is single-series
     magnitude, and it is the same value DashboardChartsHelper::ACCENT writes
     into an SVG fill — two places, one number, and they must not drift. */
  --accent: #E9E2D4;
  --track: #22262C;

  /* status — reserved, always shipped with words beside it */
  --worth: #3FA96A;
  --alarm: #D2564A;

  --r-lg: 14px;
  --r-md: 12px;
  --r-sm: 7px;
  --r-pill: 999px;

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* hairline + inner top highlight + one deep shadow — the landing's card */
  --depth:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 14px 34px -20px rgba(0, 0, 0, 0.85);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: dark; }

/* Prose is the default because prose is what a person reads; every piece of
   chrome below opts out of it explicitly. */
body.gistil {
  background: var(--bg);
  color: var(--bone-dim);
  min-height: 100vh;
  font: 400 15px/1.6 var(--serif);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--display); color: var(--bone); margin: 0;
  font-weight: 800; letter-spacing: -0.015em; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.mono { font-family: var(--mono); }
::selection { background: var(--gold); color: #0A0803; }

.shell { max-width: 1120px; margin: 0 auto; padding: 0 24px 110px; }

/* ---------------------------------------------------------------- topbar --
   The topbar is not here any more. This side of the product renders
   app/views/shared/_site_nav.html.erb, the same header as the landing, the
   blog and the legal pages, styled by public/landing/assets/css/nav.css and
   loaded beside this file. What stood here (.top, .mark, .who) was a third
   header offering one destination, which is what the owner reported as the
   header disappearing on /pricing.

   It is position:fixed, exactly as it is on the landing bundle, so this side
   reserves the same height for it — the one line below is the whole cost.
   The number itself lives on :root in nav.css since 2026-09-12; the fallback
   is what this sheet would have used on its own. */
.gistil { padding-top: var(--nav-h, 64px); }

/* --------------------------------------------------------------- buttons --
   THREE STATES, EVERYWHERE, IN THE EXTENSION'S LANGUAGE.

   The owner reviewed the site beside the extension he had just accepted and
   said the buttons "имеют другой стиль, я бы сделал как в расширении — мы
   имели три состояния: обычное, наведено, нажатое" (2026-09-12). The panel's
   card had already been through this exact argument on 2026-09-11 and the
   reasoning is written out in extension/src/consent.js, above `.gc-b`: a
   button has to say two things before it says anything else — the pointer is
   on me, and I took your press. What was here said the first quietly and the
   second almost not at all (a 1px nudge, no press colour on the quiet or bare
   variants at all).

   The grammar, lifted from that file so the two surfaces are one product:
     rest    — the variant's own fill
     hover   — a clear step brighter, a gold halo around it, and a 1px lift.
               Three signals, because the owner missed a one-signal hover.
     press   — down 1px, a hair smaller, deeper fill, inset shadow. The press
               rules come AFTER the hover rules at the same specificity, so a
               held button cannot be repainted by the hover underneath it.
     focus   — a ring, and NOT the hover: a keyboard user must be able to see
               where the caret is while the mouse rests elsewhere.
   `prefers-reduced-motion` keeps every state and drops only the movement. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 17px; border: 1px solid transparent;
  border-radius: var(--r-pill); white-space: nowrap; cursor: pointer;
  font: 600 12px/1 var(--mono); letter-spacing: .03em;
  transition: background .18s ease, background-color .18s ease,
    background-position .55s ease, border-color .18s ease, box-shadow .18s ease,
    color .18s ease, transform .08s ease;
}

/* THE live control, inlaid rather than filled — a seat cut into the dark with a
   bevelled gold edge, bright top facet and deep bottom facet. Lifted verbatim
   from the landing's .acct so the button you press on the front door and the
   button you press inside are one object. No sheen, no metallic gradient:
   neither file fakes material. */
.btn--primary {
  --acct-edge: color-mix(in srgb, var(--gold) 54%, transparent);
  --acct-wash: color-mix(in srgb, var(--gold) 9%, transparent);
  color: var(--gold-bright); background: var(--acct-wash); border-color: var(--acct-edge);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 34%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--gold-deep) 60%, transparent),
    0 10px 24px -18px color-mix(in srgb, var(--gold) 75%, transparent);
}
.btn--primary:hover {
  --acct-edge: color-mix(in srgb, var(--gold-bright) 82%, transparent);
  --acct-wash: color-mix(in srgb, var(--gold) 17%, transparent);
  color: color-mix(in srgb, var(--gold-bright) 62%, var(--bone));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 55%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--gold-deep) 70%, transparent),
    0 12px 30px -16px color-mix(in srgb, var(--gold) 95%, transparent),
    0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent);
}
/* The hover also gains the halo the extension's buttons wear — the inlaid
   variant had a brighter rim and nothing around it, which on a dark page is
   the "просто белеет" the owner objected to one control over, in the header. */
.btn--primary:hover {
  transform: translateY(-1px);
}
.btn--primary:active {
  transform: translateY(1px) scale(.985);
  --acct-wash: color-mix(in srgb, var(--gold) 22%, transparent);
  box-shadow:
    inset 0 2px 5px -2px rgba(0, 0, 0, .85),
    inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 22%, transparent);
}
/* THE SECONDARY ACTION — a rim, never a fill. Same three states as the gold
   one, in the quiet register: the extension's `.gc-no`, which answers a hover
   with a gold-tinted surface, a gold hairline and a gold ring rather than with
   a slightly different grey. */
.btn--quiet { background: var(--panel-2); border-color: var(--edge-2); color: var(--bone-dim); }
.btn--quiet:hover {
  background: color-mix(in srgb, var(--gold) 9%, var(--panel-3));
  border-color: color-mix(in srgb, var(--gold) 42%, transparent); color: var(--bone);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 14%, transparent);
  transform: translateY(-1px);
}
.btn--quiet:active {
  background: color-mix(in srgb, var(--gold) 14%, var(--panel-2));
  border-color: color-mix(in srgb, var(--gold) 42%, transparent); color: var(--bone);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .16);
  transform: translateY(1px) scale(.985);
}

/* THE THIRD REGISTER — a label that happens to be pressable. It had a hover
   and no press at all. It still does not grow a border (that is the whole
   point of it), so the press is carried by a surface and a shift. */
.btn--bare { background: transparent; color: var(--mute); padding: 0 10px; }
.btn--bare:hover {
  color: var(--bone); background: color-mix(in srgb, var(--gold) 8%, transparent);
}
.btn--bare:active {
  color: var(--bone); background: color-mix(in srgb, var(--gold) 13%, transparent);
  transform: translateY(1px) scale(.985);
}

.btn--wide { width: 100%; }
.btn--tall { height: 48px; font-size: 13px; letter-spacing: .05em; }

/* ONE THING ON A SCREEN IS SOLID GOLD, AND IT IS THE WAY IN.
   The rule is the consent card's, verbatim: "exactly ONE thing on the card is
   solid gold: the button that starts Gistil. Everything else is rim, ink or
   hairline, so the eye lands on it." That is why this is a separate class and
   not a repaint of .btn--primary — twenty-nine buttons wear that one, several
   of them two to a screen, and gold that appears twice is gold that means
   nothing. It dresses the single hero action of a page: today, "Continue with
   Google", the button the owner was looking at when he said the site's buttons
   were not the extension's.

   The band of light is one gradient parked off the right edge; hover slides it
   across (background-position, half a second). No image, no font, no request. */
.btn--hero {
  --hero-ink: #1A1206;
  /* The reference is not only gold, it is a VOICE: the extension's button is
     15px semibold in the interface face, not letterspaced mono caps. Mono is
     this product's face for measurements, and the way into the product is not
     a measurement. Sitting the two buttons side by side — which is exactly
     what the owner did — the type was the remaining tell. */
  font: 600 15px/1 var(--display); letter-spacing: .01em;
  color: var(--hero-ink); background-color: var(--gold-bright);
  border-color: var(--gold-bright);
  background-image: linear-gradient(105deg, transparent 37%, rgba(255, 255, 255, .62) 48%, transparent 59%);
  background-size: 280% 100%; background-position: 135% 0; background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28),
    0 8px 20px color-mix(in srgb, var(--gold) 30%, transparent);
}
.btn--hero:hover {
  color: var(--hero-ink); background-color: #FFD98C; border-color: #FFD98C;
  background-position: -35% 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34),
    0 0 0 3px color-mix(in srgb, var(--gold) 38%, transparent),
    0 12px 30px color-mix(in srgb, var(--gold) 38%, transparent);
  transform: translateY(-1px);
}
.btn--hero:active {
  color: var(--hero-ink); background-color: #DCB35C; border-color: #DCB35C;
  background-position: -35% 0;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .22);
  transform: translateY(1px) scale(.985);
}
/* Gold on gold outside the fill read as a second frame, so this one ring is
   drawn just INSIDE it, in the button's own ink — the extension makes the same
   exception for the same reason. */
.btn--hero:focus-visible { outline: 2px solid var(--hero-ink); outline-offset: -3px; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}
/* Disabled must not answer a hover either — a button that lights up under the
   pointer and then refuses the click is worse than one that never moved. */
.btn[disabled]:hover, .btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; }

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

/* Every state above survives; only the movement goes. Colour, fill and ring do
   all the talking for somebody who asked the system for less motion. */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color .01s, color .01s, border-color .01s, box-shadow .01s; }
  .btn:hover, .btn:active { transform: none; }
  .btn--hero, .btn--hero:hover, .btn--hero:active { background-image: none; }
}
form.inline { display: inline; }

/* segmented range control — the sliding thumb is CSS-only (no layout JS) */
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--panel);
  border: 1px solid var(--edge); border-radius: var(--r-pill); }
.seg a { padding: 5px 13px; border-radius: var(--r-pill); color: var(--mute-2);
  font: 500 11.5px/1 var(--mono); letter-spacing: .04em;
  transition: color .16s ease, background .16s ease; }
.seg a:hover { color: var(--bone-dim); }
.seg a[aria-current="page"] { background: var(--panel-3); color: var(--bone);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset; }

/* ------------------------------------------------------- what's covered --- */
/* A stacked block, not a status strip: the count, the bar under it at full
   width, and the plain sentence about what happens when it runs out. The bar
   spans the block because a runway drawn 120px wide beside a paragraph reads as
   decoration, and this one is the answer. */
.planbar {
  display: flex; flex-direction: column; gap: 11px;
  margin: 22px 0 0; padding: 15px 18px 16px;
  border: 1px solid var(--edge); border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: var(--depth);
}
.planbar__top { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.planbar__badge {
  font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: var(--panel-3); color: var(--mute); border: 1px solid var(--edge-2);
}
.planbar__badge--pro { background: color-mix(in srgb, var(--gold) 11%, transparent);
  color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
/* The count carries the line, so it is set in the reading face at reading size
   and the digits step up into the display face — same move as the hero, an
   octave down. */
.planbar__lead { font: 400 15px/1.4 var(--serif); color: var(--bone-dim); }
.planbar__lead b { font: 800 26px/1 var(--display); letter-spacing: -0.03em;
  color: var(--bone); margin-right: 3px; }
.planbar__note { margin: 0; max-width: 78ch; font: 400 13px/1.6 var(--serif); color: var(--mute); }
.planbar__ends { font: 400 13px/1.4 var(--serif); color: var(--mute); }
.planbar__cta { margin-left: auto; }
/* Kept: the pricing page and the account panel still use .planbar__text. */
.planbar__text { font: 400 13.5px/1.5 var(--serif); color: var(--mute); }
.planbar__text b { color: var(--bone-dim); font-family: var(--mono); font-weight: 500;
  font-size: 12.5px; }

/* --------------------------------------------------------------- hero ----- */
.hero { padding: 48px 0 8px; }
.hero__eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
  font: 500 11.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--mute);
}
.hero__eyebrow::after { content: ""; flex: 0 1 64px; height: 1px; background: var(--edge-2); }
/* Gold at its loudest, once per page. */
.hero__figure {
  font: 800 clamp(56px, 9vw, 92px)/.92 var(--display); letter-spacing: -0.045em;
  color: var(--gold); margin: 0;
  /* proportional figures on purpose: tabular-nums makes a display number loose */
  text-shadow: 0 12px 60px color-mix(in srgb, var(--gold) 22%, transparent);
}
/* The unit is demoted, not raised: <small> must sit on the same baseline as the
   digits or "2h 10m" reads as a subscript. */
.hero__figure small { font-size: .34em; font-weight: 700; letter-spacing: -0.01em;
  vertical-align: baseline; margin-left: .06em; color: var(--gold-deep); }
.hero__title { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.05;
  letter-spacing: -0.03em; margin: 0; max-width: 20ch; }
.hero__sub { margin: 16px 0 0; font: 400 16.5px/1.62 var(--serif); color: var(--bone-dim);
  max-width: 56ch; }
.hero__sub b { color: var(--bone); font-family: var(--mono); font-weight: 500;
  font-size: 14.5px; }
/* THE SPLIT HERO. A measured headline (20ch) beside a measured paragraph (56ch)
   fills about half of a 1072px page and leaves the other half looking like a
   column somebody forgot to fill — which is exactly how the owner read it
   (2026-09-09). Nothing is added to say it: the two blocks that were stacked are
   set side by side, so both measures are kept and the width is used. One column
   again below 900px, where two would break the measure. */
.hero--split .hero__body { display: grid; gap: 12px 48px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.hero--split .hero__title { max-width: 18ch; }
.hero--split .hero__aside { min-width: 0; }
.hero--split .hero__aside .hero__sub:first-child { margin-top: 0; }
@media (max-width: 900px) {
  .hero--split .hero__body { grid-template-columns: 1fr; gap: 16px; }
  .hero--split .hero__title { max-width: 20ch; }
}
.hero__android { font: 400 13.5px/1.5 var(--mono); color: var(--mute); }
.hero__android a { color: var(--bone-dim); text-decoration: underline;
  text-decoration-color: var(--edge-2); text-underline-offset: 3px; }
.hero__android a:hover { text-decoration-color: var(--gold); }


/* --------------------------------------------------------------- layout --- */
/* Section headers speak the landing's eyebrow: a gold tick, mono at .22em, and
   a hairline running out to the edge of the column. */
.rule { display: flex; align-items: center; gap: 12px; margin: 52px 0 16px; }
.rule::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); }
.rule h2 { margin: 0; font: 500 11.5px/1 var(--mono); letter-spacing: .22em;
  text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.rule > span:not(.seg) { font: 400 11.5px/1 var(--mono); color: var(--mute);
  letter-spacing: .04em; white-space: nowrap; }
.rule::after { content: ""; flex: 1; height: 1px; background: var(--edge); }
.rule .seg { margin-left: 4px; }

.grid { display: grid; gap: 14px; }
.grid > * { min-width: 0; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--wide { grid-template-columns: 1.55fr 1fr; }

.panel {
  min-width: 0;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--edge); border-radius: var(--r-md);
  padding: 18px 20px 20px; box-shadow: var(--depth);
}
.panel__head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 4px; }
.panel h3 { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -0.012em; }
.panel__sub { margin: 0 0 16px; font: 400 13.5px/1.5 var(--serif); color: var(--mute); }
.panel__body { font: 400 14px/1.6 var(--serif); color: var(--mute); margin: 0; }
.panel__empty { font: 400 13.5px/1.55 var(--serif); color: var(--mute); margin: 0; }
.panel__note { font: 400 11.5px/1.4 var(--mono); color: var(--mute-2); margin: 14px 0 0; }

/* ---- goals ----------------------------------------------------------------- */
.goals { display: flex; flex-direction: column; gap: 16px; }
.goal { display: flex; flex-direction: column; gap: 7px; }
.goal__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.goal__title { font: 700 14px/1.35 var(--display); letter-spacing: -0.012em; color: var(--bone-dim); }
.goal__title--done { color: var(--mute); text-decoration: line-through;
  text-decoration-color: var(--edge-2); }
.goal__pct { font: 500 12px/1 var(--mono); color: var(--mute-2); flex: none;
  font-variant-numeric: tabular-nums; }
.goal .meter { height: 5px; }
.goal__note { font: 400 11px/1.3 var(--mono); color: var(--mute-2); letter-spacing: .02em; }

/* ---- chips (picked categories) --------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font: 400 12.5px/1 var(--serif);
  color: var(--bone-dim); padding: 7px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--edge-2); background: var(--panel-3);
}

/* ---- stat tiles ---------------------------------------------------------- */
.tile {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--edge); border-radius: var(--r-md);
  padding: 15px 16px 16px; box-shadow: var(--depth);
  display: flex; flex-direction: column; gap: 10px; min-height: 106px;
}
.tile__label { font: 500 10.5px/1.3 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute-2); }
.tile__row { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 10px; margin-top: auto; }
.tile__value { font: 800 30px/1 var(--display); letter-spacing: -0.035em; color: var(--bone); }
.tile__unit { font-size: .45em; font-weight: 700; color: var(--mute-2); margin-left: .12em; }
.tile__note { font: 400 11px/1.3 var(--mono); color: var(--mute-2); letter-spacing: .03em;
  text-align: right; }
.spark { width: 92px; height: 26px; }

/* ---- charts -------------------------------------------------------------- */
.dc-wrap { width: 100%; }
.dc { width: 100%; height: auto; display: block; overflow: visible; }
.dc__tick { font-family: var(--mono); font-size: 10.5px; fill: var(--mute-2); }
.dc__peak { font-family: var(--mono); font-size: 11px; fill: var(--bone-dim); font-weight: 500; }
.dc__rowlabel { font-family: var(--serif); font-size: 14px; fill: var(--bone-dim); }
.dc__rowvalue { font-family: var(--mono); font-size: 12px; fill: var(--mute-2); }
.dc__bar, .dc__seg { transition: opacity .12s ease; cursor: default; }
.dc__bar--zero { opacity: .3; }          /* a day with nothing on it, still drawn */
.dc:hover .dc__bar, .dc:hover .dc__seg { opacity: .5; }
.dc:hover .dc__bar--zero { opacity: .18; }
.dc .dc__bar:hover, .dc .dc__seg:hover { opacity: 1; }
.dc__empty { font: 400 14px/1.5 var(--serif); color: var(--mute); margin: 8px 0 2px; }

.tip {
  position: fixed; z-index: 60; pointer-events: none; opacity: 0;
  transform: translate(-50%, -125%); transition: opacity .1s ease;
  background: var(--panel-3); border: 1px solid var(--edge-2); border-radius: 8px;
  padding: 7px 11px; font: 500 11.5px/1 var(--mono); letter-spacing: .02em; color: var(--bone);
  box-shadow: 0 12px 34px -12px rgba(0, 0, 0, .85); white-space: nowrap;
}
.tip[data-open="true"] { opacity: 1; }

/* legend — always present for ≥2 series, never color-alone */
.legend { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }
.legend__row { display: flex; align-items: center; gap: 10px; }
.legend__dot { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.legend__name { font: 400 13.5px/1.4 var(--serif); color: var(--bone-dim); }
.legend__val { margin-left: auto; font: 500 12px/1 var(--mono); color: var(--bone);
  font-variant-numeric: tabular-nums; }
.legend__pct { color: var(--mute-2); margin-left: 9px; display: inline-block;
  min-width: 4ch; text-align: right; }

.dtable { margin-top: 14px; }
.dtable summary { font: 400 11.5px/1 var(--mono); letter-spacing: .04em; color: var(--mute-2);
  cursor: pointer; list-style: none; padding: 4px 0; }
.dtable summary::before { content: "▸ "; }
.dtable[open] summary::before { content: "▾ "; }
.dtable summary:hover { color: var(--bone-dim); }
.dtable table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.dtable th, .dtable td { text-align: left; padding: 6px 8px;
  font: 400 12px/1.4 var(--mono); border-bottom: 1px solid var(--edge); }
.dtable th { color: var(--mute-2); font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; font-size: 10.5px; }
.dtable td { color: var(--bone-dim); }
.dtable td.num, .dtable th:not(:first-child) { text-align: right;
  font-variant-numeric: tabular-nums; }

/* ---- meters -------------------------------------------------------------- */
.meter { width: 100%; border-radius: var(--r-pill); overflow: hidden; }
.meter__fill { height: 100%; border-radius: var(--r-pill); transition: width .5s ease; }

/* ---- the record (history) ------------------------------------------------ */
.record { display: flex; flex-direction: column; }
.rec {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--edge);
}
.rec:last-child { border-bottom: 0; padding-bottom: 0; }
.rec__thumb { width: 96px; height: 54px; border-radius: var(--r-sm); object-fit: cover;
  background: #000; border: 1px solid var(--edge); }
.rec__thumb--none { display: grid; place-items: center; color: var(--mute-2); font-size: 16px; }
.rec__body { min-width: 0; }
.rec__title { font: 700 15px/1.35 var(--display); letter-spacing: -0.012em; margin: 0 0 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec__title a:hover { color: var(--gold-bright); }
.rec__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font: 400 12px/1.4 var(--serif); color: var(--mute); }
.rec__meta .mono { font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em; }
.rec__water { display: flex; align-items: center; gap: 9px; margin-top: 8px; max-width: 240px; }
.rec__water .meter { height: 4px; }
.rec__water span { font: 400 11px/1 var(--mono); color: var(--mute-2); flex: none; }
.rec__right { text-align: right; }
.rec__saved { font: 500 14px/1 var(--mono); color: var(--gold);
  font-variant-numeric: tabular-nums; }
.rec__client { font: 400 10.5px/1.4 var(--mono); color: var(--mute-2); margin-top: 5px;
  letter-spacing: .04em; }

/* Verdict chips: shape and box here, material and colour at the bottom of this
   file (round 2). Every one carries its word, so the material is never the
   only signal. */

/* ---- the content map: one video's runtime as a strip --------------------- */
/* The extension's water map in the dashboard's vocabulary: substance in the
   product's own gold, water cut as milled graphite, and the same strip
   half — "empty runtime" reads identically at both scales. The caret is gold
   because it is chrome: the product's hand saying "start here". */
.cmap { position: relative; width: 100%; padding-bottom: 6px; }
.cmap__bar { display: flex; gap: 1px; height: var(--cmap-h, 8px);
  border-radius: 3px; overflow: hidden; background: var(--panel-3); }
.cmap__seg { display: block; min-width: 2px; }
.cmap__seg--water {
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 6px),
    var(--panel-3);
}
.cmap__jump {
  position: absolute; bottom: 0; transform: translateX(-50%);
  width: 0; height: 0; border-left: 4px solid transparent;
  border-right: 4px solid transparent; border-bottom: 5px solid var(--gold);
}


/* ---- saved for later: the backlog, priced honestly ----------------------- */
.sq__ledger { margin: 2px 0 14px; font: 400 14.5px/1.6 var(--serif); color: var(--mute); }
.sq__ledger b { color: var(--bone-dim); font-family: var(--mono); font-weight: 500;
  font-size: 13px; }
.sq__ledger b.sq__true { color: var(--gold); }
.sq { display: flex; flex-direction: column; }
.sq__row {
  display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--edge);
}
.sq__row:first-child { padding-top: 0; }
.sq__row:last-child { border-bottom: 0; padding-bottom: 0; }
.sq__thumb { width: 72px; height: 41px; border-radius: var(--r-sm); object-fit: cover;
  background: #000; border: 1px solid var(--edge); }
.sq__thumb--none { display: grid; place-items: center; color: var(--mute-2); }
.sq__body { min-width: 0; }
.sq__title { margin: 0 0 6px; font: 700 14px/1.3 var(--display); letter-spacing: -0.012em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq__title a:hover { color: var(--gold-bright); }
.sq__meta { display: flex; align-items: center; gap: 12px; min-width: 0;
  font: 400 12px/1.4 var(--serif); color: var(--mute); }
.sq__meta > span { flex: none; max-width: 14em; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.sq__meta .cmap { max-width: 220px; }
.sq__right { text-align: right; display: flex; flex-direction: column; gap: 5px; }
.sq__cost { font: 500 12.5px/1 var(--mono); color: var(--bone-dim);
  font-variant-numeric: tabular-nums; }
.sq__cost s { color: var(--mute-2); text-decoration-color: var(--mute-2); }
.sq__jump { font: 500 10.5px/1 var(--mono); color: var(--gold);
  letter-spacing: .04em; font-variant-numeric: tabular-nums; }

/* ---- reactions on record rows: the signals you gave back ------------------ */
.react { font: 500 var(--fs-label)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--r-pill); flex: none;
  border: 1px solid var(--edge-2); background: var(--panel-3); color: var(--mute); }
/* Bone rather than the old blue: this is the last chip on the record and it was
   the last cool hue on the page. It is a signal the person gave back, not a
   measurement, so it takes ink and not a material.

   THE MODIFIER IS THE KIND, NOT THE WORD. It used to be built by running the
   English label through `parameterize` — .react--liked, .react--watched — which
   worked for exactly as long as the label was English. From 2026-09-12 the
   label is translated, and `parameterize` on 「高評価」 or «переглянуто» returns
   an empty string: every chip in Japanese would have landed on `.react--` and
   worn the grey default, in Ukrainian on a Cyrillic class no sheet declares.
   The kind is stable in every language, so the kind is what dresses it. */
.react--like, .react--completed { color: var(--ink-1);
  border-color: var(--mute-2); background: var(--panel-3); }
.react--saved { color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 34%, transparent);
  background: color-mix(in srgb, var(--gold) 7%, transparent); }

/* record rows: the mini map + its entry point */
.rec__map { display: flex; align-items: center; gap: 10px; margin-top: 9px; max-width: 320px; }
.rec__map .cmap { flex: 1; }
.rec__jump { font: 500 10.5px/1 var(--mono); color: var(--gold); flex: none;
  letter-spacing: .04em; font-variant-numeric: tabular-nums; }

/* ---- plans: two ladders, five materials --------------------------------- */
/* The product is gold, so the web till is a ladder of METALS — copper, silver,
   gold — with gold at the top; the app till is the SMART line, set as screens
   rather than plates so nobody reads the two shelves as one. Each material is a
   baked texture (script/bake_plan_textures.py: brushed noise dragged into
   streaks, lit by two environment sweeps), never a gradient pretending to be
   metal. The texture is at full strength on ONE element — the nameplate — and
   on the band across the top of each ladder's best card; everywhere else it is
   a tint under the dark, so the card stays a card. Every colour below is read
   through four custom properties a material sets; the layout never names one. */
.ladders { display: grid; gap: 38px; }
/* THE NOTE WRAPS, THE NAME DOES NOT. Both were `white-space: nowrap`, and the
   sixth cell's note is a whole sentence ("un seul paiement · rien ne se
   renouvelle") — on a 390px screen it pushed the shelf 144px past the right
   edge in eight of the nine languages, so the whole page scrolled sideways.
   The name is two words and stays on one line; the note is allowed to break,
   and the head wraps under it, taking the hairline to its own row. */
.ladder__head { display: flex; align-items: baseline; gap: 4px 12px; margin: 0 0 16px;
  flex-wrap: wrap; }
.ladder__head h3 { margin: 0; font: 800 15px/1 var(--display); letter-spacing: -0.01em;
  color: var(--bone); white-space: nowrap; }
.ladder__head span { min-width: 0; font: 500 11.5px/1.35 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--mute); }
.ladder__head::after { content: ""; flex: 1 0 40px; height: 1px; background: var(--edge);
  align-self: center; }

.plans { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); align-items: stretch; }
/* The app shelf is two cards; in three columns that is two thirds and a hole. */
.plans--2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
.plans--1 { grid-template-columns: 1fr; max-width: 380px; }

.plan {
  /* a material sets these four; the card reads nothing else */
  --m-base: #3A3F47; --m-mid: #8A9099; --m-bright: #D6D2CA; --m-ink: #0A0803;
  --m-tex: none;
  /* how much light the nameplate wash puts over the texture; copper is the
     darkest metal and needs more of it to keep its ink above 4.5:1 */
  --m-lift: .34; --m-lift-2: .22;
  position: relative; min-width: 0;
  display: flex; flex-direction: column; gap: 16px;
  padding: 22px 22px 22px; border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--m-mid) 26%, var(--edge));
  /* the tint: the material's base colour bleeding into the top of the dark
     panel, gone by the middle — the reference card's colour, the house's ground */
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--m-base) 34%, var(--panel-2)) 0%,
      color-mix(in srgb, var(--m-base) 10%, var(--panel)) 42%, var(--panel) 100%);
  box-shadow: var(--depth);
}
.plan--current { border-color: color-mix(in srgb, var(--m-mid) 42%, var(--edge-2)); }

/* the five materials — colour and texture, nothing else */
.plan--copper { --m-base: #6E3F22; --m-mid: #B5683A; --m-bright: #ECA878; --m-ink: #160A03;
  --m-tex: url("/assets/plans/copper-d45fccf3.webp"); --m-lift: .46; --m-lift-2: .34; }
.plan--silver { --m-base: #4E5661; --m-mid: #9AA3AE; --m-bright: #E4E8EE; --m-ink: #0A0C0F;
  --m-tex: url("/assets/plans/silver-fea607da.webp"); }
.plan--gold   { --m-base: #7A5F16; --m-mid: #C9A227; --m-bright: #EED27C; --m-ink: #171002;
  --m-tex: url("/assets/plans/gold-97f53701.webp"); }
.plan--smart  { --m-base: #0E5E5A; --m-mid: #21A89C; --m-bright: #8CF0E3; --m-ink: #041A19;
  --m-tex: url("/assets/plans/smart-0ced926b.webp"); }
.plan--super  { --m-base: #3B2FA0; --m-mid: #7D6EF0; --m-bright: #C6BCFF; --m-ink: #0D0A28;
  --m-tex: url("/assets/plans/super-5a4c6c6c.webp"); }
/* SLATE — the sixth cell. Machined graphite with a milled scale: cooler and
   flatter than silver, and its grain runs the other way, because a top-up is a
   different KIND of purchase and must not read as a sixth rung on the ladder.
   `--m-lift` is high for the same reason copper's is — a dark material needs
   more light under the nameplate to keep the ink above 4.5:1. */
.plan--slate  { --m-base: #49566A; --m-mid: #8B95A2; --m-bright: #D3DAE3; --m-ink: #0B0E12;
  --m-tex: url("/assets/plans/slate-dfb1b285.webp"); --m-lift: .42; --m-lift-2: .30; }

/* THE SHELF IS LEVEL. Every card on a ladder starts on the same line and ends
   on the same line (owner, 2026-09-09: the stepped tops "read as silly"). The
   best card is told apart by its band of material, its stronger edge and its
   glow — never by sitting higher than its neighbours. */

/* the best card on each ladder: a full band of its material across the top,
   a stronger edge, and a glow in its own colour instead of the house shadow */
.plan--top { border-color: color-mix(in srgb, var(--m-mid) 62%, var(--edge)); padding-top: 30px;
  box-shadow: var(--depth), 0 0 0 1px color-mix(in srgb, var(--m-mid) 18%, transparent),
    0 26px 70px -34px color-mix(in srgb, var(--m-mid) 80%, transparent); }
.plan--top::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 7px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--m-tex) center / 720px auto, var(--m-mid);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .35); }

/* head: the plate, and the one flag the card carries */
.plan__head { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; }

/* THE NAMEPLATE — the material, stamped, and READABLE (owner, 2026-09-09: the
   engraved names were too small and too thin against the metal). The texture
   is still at full strength under the name, but lit: a translucent wash over
   it lifts the plate so the brushed streaks stay visible without ever dropping
   under the ink's contrast floor — measured, not guessed: copper went from 3.1
   (worst pixels 2.0) to over 4.5 in the worst 5% of pixels. The name is set
   larger, tighter and in near-black, a bright top facet and a dark bottom
   facet giving the plate its edge. */
.plan__plate {
  display: inline-flex; align-items: center; min-height: 30px;
  padding: 7px 13px 7px 12px; border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, var(--m-lift)), rgba(255, 255, 255, var(--m-lift-2)) 55%,
      rgba(255, 255, 255, calc(var(--m-lift-2) - .04))),
    var(--m-tex) center / 420px auto, var(--m-mid);
  color: var(--m-ink);
  font: 800 14px/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    0 1px 0 rgba(0, 0, 0, .7),
    0 8px 18px -10px color-mix(in srgb, var(--m-base) 90%, transparent);
}
.plan--top .plan__plate { min-height: 34px; padding: 8px 15px 8px 14px; font-size: 15px; }

.plan__flag {
  font: 700 10.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  padding: 6px 11px; border-radius: var(--r-pill);
  background: var(--panel-3); color: var(--bone-dim); border: 1px solid var(--edge-2);
  white-space: nowrap;
}
.plan__flag--app { color: var(--m-bright); border-color: color-mix(in srgb, var(--m-mid) 40%, transparent); }
.plan__flag--best { color: var(--m-ink); border-color: transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, calc(var(--m-lift) + .10)), rgba(255, 255, 255, calc(var(--m-lift-2) + .08))),
    var(--m-tex) center / 420px auto, var(--m-mid);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .45); }

/* THE TERM — what a person is buying, set as the hero: a week, a month, six
   months, a year. In the material's bright, so the four words on the shelf
   read in four colours before any price is read at all. */
.plan__term { margin: 0; font: 800 clamp(28px, 2.5vw, 36px)/1 var(--display);
  letter-spacing: -0.035em; text-transform: uppercase; color: var(--m-bright);
  overflow-wrap: anywhere; }
.plan__tag { font: 400 13.5px/1.5 var(--serif); color: var(--mute); margin: 6px 0 0; }

/* WHAT IS INSIDE — the reference's inset box: the allowance in the display
   face, then the shared facts as a short list. A box, not bullets, because a
   figure in a box is compared across a row and a bullet is read. */
.plan__box { border: 1px solid color-mix(in srgb, var(--m-mid) 20%, var(--edge));
  border-radius: 10px; padding: 12px 14px 13px;
  background: color-mix(in srgb, var(--m-base) 12%, rgba(0, 0, 0, .28)); }
.plan__box-lead { margin: 0; display: flex; gap: 9px; align-items: baseline;
  font: 700 15px/1.3 var(--display); letter-spacing: -0.01em; color: var(--bone); }
.plan__box-lead::before { content: "\2726"; flex: none; font-size: 12px; color: var(--m-bright); }
.plan__box-list { list-style: none; margin: 9px 0 0; padding: 0; display: flex;
  flex-direction: column; gap: 5px; }
.plan__box-list li { font: 400 13px/1.45 var(--serif); color: var(--bone-dim);
  padding-left: 15px; position: relative; }
.plan__box-list li::before { content: "+"; position: absolute; left: 1px; top: 0;
  font: 500 12px/1.45 var(--mono); color: var(--m-mid); }

/* the money: the figure large, the period small, the tax line under both */
.plan__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.plan__amount { font: 800 40px/1 var(--display); letter-spacing: -0.04em; color: var(--bone);
  font-variant-numeric: tabular-nums; }
.plan__per { font: 400 11.5px/1.4 var(--mono); color: var(--mute); letter-spacing: .03em; }
/* THE TAX LINE. Under every paid price, quietly, in the reader's language — and
   it is the one line on the card the browser may rewrite: the server states the
   general truth ("tax for your country is added at the checkout"), Paddle states
   the particular one ("includes $1.90 tax · our price $10.00"). Two lines' worth
   of room is left for it on purpose: the particular one is longer than the
   general one in every language, and a card must not change height when the
   answer arrives. */
.plan__tax { margin: -9px 0 0; font: 500 11px/1.4 var(--mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--mute); min-height: calc(2 * 1.4 * 11px); }

/* AN APP PLAN HAS NO PRICE ON THIS SHELF (owner, 2026-09-09) — the store sets it.
   Set in the display face like the figure it replaces, but smaller: it occupies
   the price's slot without pretending to be a price. */
.plan__inapp { font: 700 19px/1.15 var(--display); letter-spacing: -0.01em;
  color: var(--bone); }
.plan__foot { }

/* ---- the app shelf: screens, not plates ---------------------------------- */
/* A plan bought in the app is not a lesser plan; it is a different object, and
   the card says so with its shape: the corners of a phone, a bezel drawn as an
   inner ring, a notch at the top, and the material glowing from inside the
   glass instead of stamped on a plate. */
.plan--screen { border-radius: 26px; padding: 34px 22px 22px;
  box-shadow: var(--depth), inset 0 0 0 1px color-mix(in srgb, var(--m-mid) 22%, transparent),
    inset 0 0 0 6px var(--panel);
  background:
    radial-gradient(120% 60% at 30% -10%, color-mix(in srgb, var(--m-base) 55%, transparent), transparent 60%),
    var(--m-tex) center top / cover no-repeat,
    var(--panel); }
.plan--screen::after { content: ""; position: absolute; top: 12px; left: 50%; width: 52px; height: 6px;
  margin-left: -26px; border-radius: 3px; background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--edge-2); }
.plan--screen.plan--top::before { display: none; }
.plan--screen.plan--top { padding-top: 34px;
  border-color: color-mix(in srgb, var(--m-mid) 55%, var(--edge));
  box-shadow: var(--depth), inset 0 0 0 1px color-mix(in srgb, var(--m-mid) 34%, transparent),
    inset 0 0 0 6px var(--panel), 0 26px 70px -34px color-mix(in srgb, var(--m-mid) 85%, transparent); }
.plan--screen .plan__plate { background: color-mix(in srgb, var(--m-base) 45%, var(--panel-3));
  color: var(--m-bright); border: 1px solid color-mix(in srgb, var(--m-mid) 45%, transparent);
  text-shadow: 0 0 14px color-mix(in srgb, var(--m-mid) 70%, transparent);
  box-shadow: inset 0 0 18px -8px color-mix(in srgb, var(--m-mid) 60%, transparent); }
.plan--screen .plan__flag--best { background: color-mix(in srgb, var(--m-mid) 85%, var(--bone));
  color: var(--m-ink); text-shadow: none; box-shadow: 0 0 22px -6px var(--m-mid); }
.plan--screen .plan__box { background: color-mix(in srgb, var(--m-base) 22%, rgba(0, 0, 0, .3)); }
/* the glass is brighter than the metal card's ground, so the tagline that reads
   at 5:1 on copper read at 3.3:1 on smart — one step of ink up, measured */
.plan--screen .plan__tag { color: var(--bone-dim); }

/* Where the money is taken. Deliberately quiet: it answers a question, it does
   not make a claim. */
.plan__till { margin: 9px 0 0; font: 400 11.5px/1.45 var(--mono);
  color: var(--mute); letter-spacing: .02em; }

/* Two store buttons where the device is unknown, one where it is not. `wrap`
   plus a min-width is what keeps "App Store" and "Google Play" from being
   squeezed into two illegible slivers on a 320px screen — they stack instead. */
.plan__install { display: flex; flex-wrap: wrap; gap: 8px; }
.btn--half { flex: 1 1 120px; min-width: 120px; }

/* ---- the sixth cell: an instrument, not a rung ---------------------------- */
/* Five cards sell a RATE and cost a fixed price. This one sells a QUANTITY the
   buyer chooses, so it is built as a dial: one wide card across the shelf, the
   figure it produces set as the hero, and the machined material under the
   nameplate. The width is not decoration — a seventeen-notch slider inside a
   third of a row would be a slider nobody can aim. */
.ladder--topup .ladder__head h3 { color: var(--bone); }
/* THE FACEPLATE. The other five wear their material on a nameplate; this one is
   an instrument, so the milled surface is also laid across the whole card — very
   faint, screened over the dark, so it is felt as a texture rather than seen as
   a picture. It is what stops a wide card in a neutral grey from reading as an
   empty panel somebody forgot to style. */
.plan--dial { padding: 24px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--m-base) 46%, var(--panel-2)) 0%,
      color-mix(in srgb, var(--m-base) 16%, var(--panel)) 46%, var(--panel) 100%),
    var(--m-tex) center top / 720px auto;
  background-blend-mode: normal, soft-light; }
/* the milled edge along the top: a real instrument has one, and it says "this
   card is made of something" at a glance, without borrowing the ladder's
   best-value band (which is thicker, brighter and means something else) */
.plan--dial::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--m-tex) center / 720px auto, var(--m-mid); opacity: .8;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .5); }
/* on a 1022px row, space-between throws the flag to the far edge where it reads
   as a stray label rather than as this card's own; it belongs beside the plate */
.plan--dial .plan__head { justify-content: flex-start; gap: 12px; }
.topup { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  /* start, not stretch (п. 229): stretching the dial column to the facts
     column's height is what left ~150px of empty graphite under the slider */
  gap: 28px; align-items: start; }
.topup__dial { min-width: 0; display: flex; flex-direction: column; }
.topup__facts { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* The recessed dial face: the milled material at strength, sunk into the card —
   and only as tall as the sum, its answer and the slider it holds. */
.topup__face { margin: 14px 0 0; padding: 18px 20px 16px; border-radius: 12px;
  display: flex; flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--m-mid) 20%, var(--edge));
  /* The wash is heavy on purpose. The milled surface has to be FELT under the
     control and never compete with the words on top of it: the tick labels are
     11px mono, and at the texture's own brightness they measured under 3:1. */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .80), rgba(0, 0, 0, .72)),
    var(--m-tex) center / 720px auto,
    color-mix(in srgb, var(--m-base) 18%, rgba(0, 0, 0, .3));
  box-shadow: inset 0 2px 6px -2px rgba(0, 0, 0, .7); }
/* one step of ink up inside the face, for the same reason */
.topup__face .topup__ticks { color: var(--mute); }
.topup__face .topup__ticks span.on { color: var(--gold-bright); }
/* a narrow face (phone, or the credits page's column): the sum takes the row */
.topup__face { container-type: inline-size; }
@container (max-width: 400px) {
  .topup__amount { width: 100%; }
  .topup__amount input { flex: 1; }
}

/* THE SUM — the hero figure, and the field itself (п. 229: one field, typed
   straight into, no "or type an amount" beside a second small box). It looks
   like the card's price figure and behaves like an input: a milled well, a
   caret on click, a ring on focus. */
.topup__sum { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; }
.topup__amount { display: inline-flex; align-items: baseline; gap: 2px; flex: none;
  padding: 6px 14px 8px 12px; border-radius: 12px; cursor: text;
  border: 1px solid color-mix(in srgb, var(--m-mid) 34%, var(--edge-2));
  background: rgba(0, 0, 0, .38);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .04);
  transition: border-color .15s ease, box-shadow .15s ease; }
.topup__amount:hover { border-color: color-mix(in srgb, var(--m-mid) 55%, var(--edge-2)); }
.topup__amount:focus-within { border-color: var(--m-bright);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55), 0 0 0 3px color-mix(in srgb, var(--m-mid) 30%, transparent); }
.topup__cur { font: 700 30px/1 var(--display); color: var(--bone-dim); letter-spacing: -0.02em; }
/* 4ch: the largest sum the dial sells is four digits ("1000") */
.topup__amount input { width: 4ch; min-width: 0; border: 0; background: transparent; padding: 0;
  margin: 0; font: 800 48px/1.05 var(--display); letter-spacing: -0.04em; color: var(--bone);
  font-variant-numeric: tabular-nums; caret-color: var(--m-bright); }
.topup__amount input:focus { outline: none; }
/* the number field's little up/down arrows are 20px of browser chrome nobody
   needs next to a slider that does the same job better. (The word for them is
   banned in this file: login_screen_spec guards it, so that nobody quietly
   adds a loading widget to the sign-in gate.) */
.topup__amount input::-webkit-outer-spin-button,
.topup__amount input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.topup__amount input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* THE ANSWER, live beside the sum: what it buys and until when, then what it
   costs with tax once the rate is known. */
.topup__result { flex: 1 1 260px; min-width: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 176px), 1fr)); }
/* п. 235: "you get" in a gold-washed well, "you pay" in a neutral one. Colour
   roles — gold-bright: the two answers; bone: the unit; bone-dim: the facts that
   qualify an answer (date, tax, our price); mute: joining words and labels. */
.tgrp { min-width: 0; border-radius: 10px; padding: 10px 13px 11px; position: relative; }
.tgrp--get { background: color-mix(in srgb, var(--gold) 8%, rgba(0,0,0,.35));
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 12%, transparent); }
.tgrp--pay { background: rgba(255,255,255,.035); border: 1px solid color-mix(in srgb, var(--m-mid) 30%, var(--edge-2)); }
.tgrp__label { margin: 0 0 5px; display: flex; align-items: center; gap: 7px;
  font: 600 10px/1.2 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--mute); }
.tgrp--get .tgrp__label { color: color-mix(in srgb, var(--gold) 70%, var(--mute)); }
.tgrp__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--mute-2); }
.tgrp--get .tgrp__label::before { background: var(--gold); box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 70%, transparent); }
.tgrp__main { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 7px; }
.tgrp__num { font: 800 30px/1.05 var(--display); letter-spacing: -0.03em; color: var(--gold-bright);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.tgrp__unit { font: 700 15px/1.2 var(--display); color: var(--bone); letter-spacing: -0.005em; }
.tgrp__sub { margin: 6px 0 0; font: 400 12.5px/1.45 var(--serif); color: var(--mute); }
.tgrp__sub b { font: 600 12px/1 var(--mono); color: var(--bone-dim); letter-spacing: .01em; white-space: nowrap; }
.tgrp__sub + .tgrp__sub { margin-top: 1px; }
.topup__gets { margin: 0; font: 700 18px/1.35 var(--display); letter-spacing: -0.01em;
  color: var(--bone); }
.topup__pay { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.topup__price { font: 800 22px/1.1 var(--display); letter-spacing: -0.02em; color: var(--m-bright);
  font-variant-numeric: tabular-nums; }
.topup__pay .plan__tax { margin: 0; min-height: 0; }

/* THE SLIDER. Drawn rather than left to the platform: a native range control is
   a different object in every browser, and this one has to look milled. */
.topup__range { appearance: none; -webkit-appearance: none; width: 100%;
  margin: 20px 0 0; height: 26px; background: transparent; cursor: pointer; }
.topup__range::-webkit-slider-runnable-track { height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 70%, var(--gold-deep)) 0 var(--fill, 0%), transparent var(--fill, 0%)),
    linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .2)),
    color-mix(in srgb, var(--m-base) 55%, var(--panel-3));
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .6), inset 0 -1px 0 rgba(255, 255, 255, .07); }
.topup__range::-moz-range-progress { height: 8px; border-radius: 4px;
  background: color-mix(in srgb, var(--gold) 70%, var(--gold-deep)); }
.topup__range::-moz-range-track { height: 8px; border-radius: 4px;
  background: color-mix(in srgb, var(--m-base) 55%, var(--panel-3));
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .6); }
.topup__range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px;
  margin-top: -7px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .6);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .16) 55%, rgba(0, 0, 0, .12)),
    var(--m-tex) center / 420px auto, var(--m-mid);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .6); }
.topup__range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .6);
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .12)), var(--m-mid);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.topup__range:focus-visible { outline: 2px solid var(--m-bright); outline-offset: 4px; }

.topup__ticks { display: flex; justify-content: space-between; margin: 6px 2px 0;
  font: 400 11px/1 var(--mono); color: var(--mute); letter-spacing: .04em; }

/* ONE PAYMENT — the flag that says this is not a subscription. Quiet: it states
   a fact, it does not compete with "Best value" two shelves up. */
.plan__flag--once { color: var(--m-bright);
  border-color: color-mix(in srgb, var(--m-mid) 40%, transparent); }

/* NOTHING HERE FITS? Kept, unrendered. The line moved into the small print at
   the very bottom of /pricing on 2026-09-09 (.fine__contact) — it addresses the
   one reader who got all the way down and still has a question, and standing
   first under the shelf it spent the page's most expensive place on "write to
   us". The rule stays because nothing about it was wrong; if the line is ever
   wanted as a panel again, it is here. */
.plans__nofit { display: flex; align-items: baseline; gap: 8px 14px; flex-wrap: wrap;
  margin: 22px 0 0; padding: 16px 18px; border-radius: var(--r-lg);
  border: 1px solid var(--edge); background: var(--panel); }
.plans__nofit h3 { margin: 0; font: 700 15px/1.3 var(--display); letter-spacing: -0.01em;
  color: var(--bone); }
.plans__nofit p { margin: 0; font: 400 14.5px/1.6 var(--serif); color: var(--bone-dim); }
.plans__nofit a { color: var(--bone); text-decoration: underline;
  text-decoration-color: var(--edge-2); text-underline-offset: 3px; }
.plans__nofit a:hover { text-decoration-color: var(--gold); }

/* The two section labels over weights 1 and 2 are the only ones on the site
   set larger than the house 11.5px: at 100% the house size is smaller than a
   photo caption, and these two head the page's whole argument. The third is
   quieter than the house — a grey dot instead of the gold one — because the
   small print should not be announced. Scoped to the modifiers, so every other
   `.rule` in the product is untouched. */
.rule--loud h2 { font-size: 13px; letter-spacing: .2em; color: var(--bone-dim); }
.rule--loud > span:not(.seg) { font-size: 13px; }
.rule--quiet::before { background: var(--edge-2); }

/* ---- under the shelf: three weights ------------------------------------- */
/* Ten identical dark cards in five sections, all 14px grey serif, is one wall
   of legal text — the sentence the product is sold on ("judged once, then free
   for everyone") sat at exactly the size of the merchant-of-record notice. So
   what follows the price list is graded, and the grade is the point:

     WEIGHT 1 .keystone — one thought, in the material. The only block on the
       page that is made of something.
     WEIGHT 2 .tips     — three hints towards the choice. No boxes: a hint must
       not read as a term of an agreement.
     WEIGHT 3 .fine     — the small print. One honest line visible, the full
       checked paragraph one press away. Nothing removed, only demoted.

   Sizes are for 100%, which is where the owner sits. */

/* ── weight 1 ── */
.keystone { position: relative; overflow: hidden; border-radius: var(--r-lg);
  padding: 26px 28px; margin: 0;
  border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  background:
    linear-gradient(170deg, color-mix(in srgb, var(--gold) 8%, transparent), transparent 58%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: var(--depth), 0 0 0 1px rgba(0, 0, 0, .6),
    0 30px 80px -40px color-mix(in srgb, var(--gold) 45%, transparent); }
/* The gold edge is the REAL metal — the same baked webp as the gold plan card,
   never a gradient standing in for a surface. */
.keystone::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: url("/assets/plans/gold-97f53701.webp") center / 720px 240px repeat-x;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--gold-bright) 40%, transparent); }
.keystone__h { margin: 0 0 12px; font: 700 27px/1.14 var(--display);
  letter-spacing: -0.024em; color: var(--bone); max-width: 32ch; text-wrap: balance; }
.keystone__lead { margin: 0; font: 400 16.5px/1.6 var(--serif);
  color: var(--bone-dim); max-width: 66ch; }

.ledger { display: grid; grid-template-columns: 1.05fr 1.05fr .95fr; gap: 0;
  margin: 24px 0 20px; border-top: 1px solid var(--edge-2);
  border-bottom: 1px solid var(--edge-2); }
.ledger > div { min-width: 0; padding: 20px 22px 22px 0;
  display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-content: start; }
.ledger > div + div { border-left: 1px solid var(--edge-2); padding-left: 22px; }
/* THE NUMERALS ARE FILLED WITH THE METAL, and lit the same way the nameplates
   are: a brushed texture has dark streaks, and on bare texture the graphite
   measured 2.3:1. A translucent wash over the texture plus a little brightness
   puts the worst 5% of glyph pixels above 5.7 (graphite) and 6.5 (gold).
   Graphite is deliberately duller than gold — "0" stays the one that matters. */
.ledger__n { grid-row: 1 / 4; align-self: start; margin-top: -2px;
  font: 800 52px/0.9 var(--display); letter-spacing: -0.05em;
  background: linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .16)),
    url("/assets/plans/slate-dfb1b285.webp") center / 220px 120px;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: brightness(1.4); }
.ledger__n--gold { filter: brightness(1.1);
  background-image: linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .18)),
    url("/assets/plans/gold-97f53701.webp"); }
.ledger__t { margin: 0; font: 700 18px/1.2 var(--display); letter-spacing: -0.015em;
  color: var(--bone); }
.ledger__s { margin: 5px 0 10px; font: 500 12.5px/1.35 var(--mono);
  letter-spacing: .04em; color: var(--mute); }
.ledger__s--gold { color: var(--gold-bright); }
.ledger__b { margin: 0; font: 400 15px/1.58 var(--serif); color: var(--bone-dim); }
.keystone__close { display: flex; gap: 14px; align-items: flex-start; margin: 0; }
/* /apps shows the argument without the ledger, and then the closing line has
   nothing between it and the lead. */
.keystone__lead + .keystone__close { margin-top: 20px; }
.keystone__close::before { content: ""; flex: none; width: 3px; align-self: stretch;
  border-radius: 2px; background: url("/assets/plans/gold-97f53701.webp") center / 200px 100px; }
.keystone__close span { font: italic 400 16px/1.55 var(--serif); color: var(--bone); }

/* ── weight 2 ── */
.hints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; margin: 0; }
.hint { min-width: 0; padding: 18px 0 4px; border-top: 1px solid var(--edge-2);
  position: relative; }
.hint::before { content: ""; position: absolute; left: 0; top: -1px; width: 44px;
  height: 1px; background: var(--gold); }
.hint__v { margin: 0; font: 800 30px/1 var(--display); letter-spacing: -0.035em;
  color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.hint__v small { margin-left: .4em; vertical-align: .18em; text-transform: uppercase;
  font: 600 12.5px/1 var(--mono); letter-spacing: .06em; color: var(--mute); }
.hint__t { margin: 12px 0 6px; font: 700 16.5px/1.25 var(--display);
  letter-spacing: -0.012em; color: var(--bone); }
.hint__b { margin: 0; font: 400 14.5px/1.55 var(--serif); color: var(--mute); }

/* ── weight 3 ── */
.fine { margin: 0; padding: 4px 0 0; border-top: 1px solid var(--edge); }
.fine > details { border-bottom: 1px solid var(--edge); margin: 0; }
.fine summary { list-style: none; cursor: pointer; padding: 13px 0;
  display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: baseline; }
.fine summary::-webkit-details-marker { display: none; }
.fine summary:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -2px; }
.fine__k { padding-top: 2px; font: 500 11.5px/1.4 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute); }
.fine__one { margin: 0; font: 400 14.5px/1.5 var(--serif); color: var(--bone-dim); }
.fine__more { white-space: nowrap; border: 1px solid var(--edge-2); border-radius: var(--r-pill);
  padding: 6px 10px; font: 400 11.5px/1 var(--mono); letter-spacing: .06em; color: var(--mute);
  transition: color .15s, border-color .15s; }
.fine summary:hover .fine__more,
.fine details[open] .fine__more { color: var(--gold-bright);
  border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.fine__full { margin: 0 0 16px 112px; font: 400 14.5px/1.6 var(--serif);
  color: var(--mute); max-width: 74ch; }
.fine__contact { display: grid; grid-template-columns: 96px 1fr; gap: 16px;
  align-items: baseline; padding: 13px 0 14px; }
.fine__contact p { margin: 0; font: 400 14.5px/1.5 var(--serif); color: var(--bone-dim); }
.fine__contact a { color: var(--bone); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--gold) 60%, transparent);
  text-underline-offset: 3px; }
.fine__contact a:hover { text-decoration-color: var(--gold-bright); }

@media (max-width: 900px) {
  .ledger { grid-template-columns: 1fr; }
  .ledger > div { padding: 18px 0; }
  .ledger > div + div { border-left: 0; border-top: 1px solid var(--edge-2); padding-left: 0; }
  .hints { grid-template-columns: 1fr; gap: 0; }
  .hint { padding: 16px 0 18px; }
}
@media (max-width: 620px) {
  /* The two loud labels are 13px, and "Ce que les chiffres ne disent pas" is
     5px too wide for a 390px phone at 110%. They wrap; the hairline takes its
     own row rather than being squeezed to nothing. Only these two modifiers —
     every other `.rule` in the product keeps the house behaviour. */
  .rule--loud, .rule--quiet { flex-wrap: wrap; }
  .rule--loud h2, .rule--quiet h2 { white-space: normal; }
  .rule--loud::after, .rule--quiet::after { flex-basis: 100%; }
  .keystone { padding: 22px 18px; }
  .keystone__h { font-size: 23px; }
  .ledger__n { font-size: 44px; }
  .fine summary { grid-template-columns: 1fr auto; row-gap: 6px; }
  .fine__k { grid-column: 1 / -1; }
  .fine__full { margin-left: 0; }
  .fine__contact { grid-template-columns: 1fr; row-gap: 6px; }
}

.plans__note { margin: 18px 0 0; font: 400 14px/1.6 var(--serif);
  color: var(--bone-dim); max-width: 78ch; }

.store-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }

.panel--wide { max-width: none; }
/* The library-is-free panel. The one claim on the page that is a difference
   rather than a number, so it gets the gold edge the featured plan gets. */
.panel--loud { border-color: color-mix(in srgb, var(--gold) 34%, transparent);
  background: linear-gradient(170deg, color-mix(in srgb, var(--gold) 7%, transparent),
    transparent 60%), linear-gradient(180deg, var(--panel-2), var(--panel)); }
.panel--loud .panel__body { color: var(--bone-dim); font-size: 15px; }

/* ---- the checkout window ------------------------------------------------- */
.checkout { border: none; background: transparent; padding: 0; max-width: 100%; }
.checkout::backdrop { background: rgba(4, 5, 7, .72); }
.checkout__box {
  border: 1px solid var(--edge-2); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: var(--depth); padding: 26px; width: min(92vw, 400px);
  display: flex; flex-direction: column; gap: 14px;
}
.checkout__h { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.checkout__price { margin: 0; font: 800 32px/1 var(--display);
  letter-spacing: -0.035em; color: var(--bone); }
.checkout__note { margin: 0; font: 400 13.5px/1.55 var(--serif); color: var(--mute); }


/* ---- empty state: an invitation, not an apology -------------------------- */
.blank { padding: 64px 0 20px; max-width: 62ch; }
.blank h1 { font-size: clamp(30px, 4.6vw, 44px); letter-spacing: -0.03em;
  margin: 0 0 16px; line-height: 1.06; }
.blank p { font: 400 16.5px/1.62 var(--serif); color: var(--bone-dim); margin: 0 0 28px; }

.steps { display: flex; flex-direction: column; gap: 10px; }
.step {
  display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--edge); border-radius: var(--r-md);
  padding: 16px 20px 18px; box-shadow: var(--depth);
}
.step__n { font: 500 10.5px/1 var(--mono); color: var(--gold); letter-spacing: .18em;
  padding-top: 5px; }
.step h4 { margin: 0 0 5px; font-size: 16px; font-weight: 700; letter-spacing: -0.012em; }
.step p { margin: 0; font: 400 14.5px/1.55 var(--serif); color: var(--mute); }
.step a.deep { color: var(--gold); text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.step a.deep:hover { color: var(--gold-bright); }

/* ---- sign-in ------------------------------------------------------------- */
/* One door, one control. The page is the landing's hero at card scale: the
   logo file, a display line, a serif argument, and the gold pill.

   AND IT IS ONE SCREEN. It was not. The card was centred in a box a full
   viewport tall, the footer came after it and the language switcher after
   that, so the page was about two and a half screens of which the second and
   third were mostly black. The owner arrived from the extension in Ukrainian,
   saw a black sheet, and reported it as the worst thing on the site: "всё
   занято чёрным, но если я проскролю, я увижу языки, но тут на этой странице
   существования языков я даже не подозреваю. Зачем такой глупый дизайн?"

   The fix is a column, not a crop: the shell becomes exactly one viewport
   tall, the door takes the space that is left after the language row and the
   footer have taken theirs, and the two of them are therefore ON the first
   screen by construction rather than by a guessed height. Nothing is hidden —
   every footer link a crawler and a reader could reach before is still there,
   which is the whole reason this footer was flattened in the first place. */
body.gistil--gate .shell {
  min-height: calc(100vh - var(--nav-h, 64px));
  display: flex; flex-direction: column; padding-bottom: 26px;
}
body.gistil--gate .gate { min-height: 0; flex: 1 1 auto; padding: 26px 20px 20px; }
/* The footer stops being a destination at the bottom of a long page and
   becomes a baseline: no 64px gap above it, and the signature line — a
   sentence about the product — is not what somebody at a sign-in screen is
   reading, so it goes. The LINKS stay. */
body.gistil--gate .foot { margin-top: 18px; padding-top: 14px; }
body.gistil--gate .foot__sig { display: none; }

.gate { min-height: calc(100vh - var(--nav-h, 64px)); display: grid; place-items: center;
  padding: 48px 20px 80px; }
.gate__card { width: 100%; max-width: 420px; }

/* THE LANGUAGES, ON THE SCREEN THE READER IS ACTUALLY ON.
   The switcher itself is untouched — the flag SVGs, the chips, the rim, the
   gold fill on the active one are the one thing in this review the owner
   praised ("а языки круто подсвечены и с крутым дизайном"), so not a colour
   of it changes. It is only somewhere else now: above the footer instead of
   below it, and inside the viewport. `order` does the moving, so the markup
   and the tab order stay in the sequence they read in. */
body.gistil--gate .foot { order: 3; }
body.gistil--gate .gate { order: 1; }

/* Short windows — a laptop at 1280x720 with a browser bar, which is what the
   owner's screenshot is — get the door tightened rather than scrolled. The
   mark is the first thing to give: it is decoration until the button is
   pressed, and the ring keeps working at any size. */
@media (max-height: 760px) {
  body.gistil--gate .gate { padding: 14px 20px 10px; }
  body.gistil--gate .gate__mark { width: 66px; height: 66px; margin-bottom: 16px; }
  body.gistil--gate .gate__mark .gate__ring { width: 66px; height: 66px; }
  body.gistil--gate .gate__logo { width: 42px; height: 42px; }
  body.gistil--gate .gate h1 { font-size: 25px; }
  body.gistil--gate .gate p.lede { font-size: 14.5px; margin-bottom: 20px; }
}
/* THE MARK SITS IN THE MIDDLE OF THE FORM (owner, 2026-09-17, п. 186: "лого на
   формі зараз зліва, а має бути по центру цієї форми і всіх схожих форм").

   One rule for every single-form screen there is — sign in, the extension's
   sign-in confirmation, /billing/success, /billing/checkout, /billing/change and
   the sign-in-unavailable fallback — because they all draw the mark with these
   two classes and the owner asked for the same arrangement on all of them.

   ONLY THE MARK CENTRES. The heading, the sentence under it and the small print
   stay left-aligned: they are prose, and prose centred over three or four lines
   comes out ragged on both edges and reads worse — while the buttons are already
   full-width, so the column still looks centred as a whole. A centred mark over
   left-aligned text is the arrangement, and it is now the arrangement everywhere. */
.gate__logo { width: 56px; height: 56px; display: block; margin-inline: auto;
  filter: drop-shadow(0 10px 34px rgba(0, 0, 0, .6)); }

/* ---------------------------------------------- the mark, while it is working --
   The sign-in has one moving part and it is the mark. A gold arc — the mark's
   own gold, not a second accent — travels the ring around it while the handshake
   runs, and there is nothing else on the page that moves.

   Built from a conic-gradient behind a ring-shaped mask rather than a bordered
   circle: a border gives a hard-ended segment, the gradient gives an arc that
   fades out along its tail. Rotating a conic gradient by exactly one turn has no
   seam — the frame after 1turn is identical to the frame at 0. */
/* `margin-inline: auto` in place of the old -18px nudge. That nudge existed to
   pull the 56px glyph inside this 92px box flush with the left edge of the text;
   centred, there is nothing to pull it to, and the glyph is concentric with the
   box, so centring the box centres the glyph. */
.gate__mark { position: relative; display: grid; place-items: center;
  width: 92px; height: 92px; margin: 0 auto 26px; }
.gate__mark .gate__logo { grid-area: 1 / 1; margin: 0; }

.gate__ring { grid-area: 1 / 1; width: 92px; height: 92px; border-radius: 50%;
  opacity: 0; transition: opacity .28s ease; }
.gate__ring::before, .gate__ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  /* the ring is 2px of the outer edge, and nothing else */
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 calc(100% - 2px));
}
/* the track it travels on — barely there, but the arc needs a path to be on */
.gate__ring::before { background: var(--edge-2); opacity: .55; }
/* the arc itself: a quarter turn of gold with a tail that fades to nothing */
.gate__ring::after {
  background: conic-gradient(from 0turn,
    var(--gold-bright) 0turn,
    color-mix(in srgb, var(--gold) 70%, transparent) .10turn,
    #0000 .28turn, #0000 1turn);
}

/* Busy is a state of the whole form, set the instant the button is pressed —
   before the Firebase popup, so nothing waits on the network to start moving. */
[data-busy="true"] .gate__ring { opacity: 1; }
[data-busy="true"] .gate__ring::after { animation: gate-arc 1.15s linear infinite; }

@keyframes gate-arc { to { transform: rotate(1turn); } }

/* Reduced motion: the arc stops travelling and simply breathes. Same element,
   same gold, no rotation — the page still says "something is happening". */
@media (prefers-reduced-motion: reduce) {
  [data-busy="true"] .gate__ring::after {
    animation: gate-breathe 1.9s ease-in-out infinite;
    background: conic-gradient(from 0turn,
      color-mix(in srgb, var(--gold) 60%, transparent) 0turn, var(--gold-bright) 1turn);
  }
  .gate__ring { transition: none; }
  @keyframes gate-breathe { 0%, 100% { opacity: .18; } 50% { opacity: 1; } }
}
.gate h1 { font-size: 30px; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 12px; }
.gate p.lede { font: 400 15.5px/1.62 var(--serif); color: var(--mute); margin: 0 0 28px; }
.gate .steps { margin-top: 24px; }
.gate__g { width: 17px; height: 17px; flex: none; }
.gate__note { margin: 14px 0 0; font: 400 12px/1.6 var(--mono); color: var(--mute-2);
  letter-spacing: .02em; }
/* WHAT THE PAGE SAYS BACK.
   It was 12px mono at --mute-2, and in the one state anybody actually reaches
   it turned red: "сообщение об ошибке максимально нечитаемое" (owner,
   2026-09-12, having simply closed the Google window). Three things were
   wrong. It was small. It was monospace — the face this product uses for
   measurements, set here to carry two lines of prose. And it was red for an
   event that is not a fault.

   Now: serif at 14.5px, the same face the lede above it argues in, in a seat
   with a tinted surface and a bar down its leading edge, so the line is a
   thing on the page rather than a stray caption under the button. It carries
   `hidden` until there is something to say — see the view — so it costs no
   reserved gap.

   THREE TONES, AND THE MIDDLE ONE IS THE POINT:
     info  — gold. Working: "you are in, one moment".
     note  — bone on a neutral seat. Something happened, nobody did anything
             wrong. Closing the Google window lands here.
     error — red, and now only for things that really are broken. */
.status { margin: 18px 0 0; padding: 12px 14px; border-radius: var(--r-lg);
  font: 400 14.5px/1.55 var(--serif); letter-spacing: 0; color: var(--bone-dim);
  border: 1px solid var(--edge); border-left: 3px solid var(--edge-2);
  background: var(--panel-2); text-wrap: pretty; }
.status[hidden] { display: none; }
.status[data-tone="error"] { color: #F0BDB6; border-color: color-mix(in srgb, #E08B82 34%, transparent);
  border-left-color: #E08B82; background: color-mix(in srgb, #E08B82 9%, var(--panel-2)); }
.status[data-tone="info"] { color: var(--gold-bright); border-color: color-mix(in srgb, var(--gold) 34%, transparent);
  border-left-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, var(--panel-2)); }
.status[data-tone="note"] { color: var(--bone); border-color: var(--edge-2);
  border-left-color: var(--bone-dim); background: var(--panel-3); }

/* ------------------------------------------------------ the screen after ----
   What replaces the door once somebody is through it. The h1, the lede, the
   Google pill and the note are REMOVED from the document by the controller —
   this is not a banner underneath them — and these four elements take their
   place inside the same card, under the same mark.

   The joke heading is deliberately smaller than the door's h1. The door's line
   is four words; a joke is a sentence, and at 30px a sentence takes four lines
   on a 390px phone and stops reading like a quip. 22px is where the longest
   line in the library (German, 103 characters) still lands in three.

   The block animates in because it appears in place of something that was
   already on screen; without the movement it reads as a page that flickered.
   `hidden` is display:none, so the animation starts when the attribute comes
   off and not before — no class to add, nothing to reset. */
/* ------------------------------------ "you are signed in as …, connect?" --
   GISTIL_BUGS 164b. The account is shown the way the extension shows it: a
   gold letter and the address beside it, on one quiet rim. One gold thing on
   the screen — the Connect button; the other account is the quiet rim. */
.gate__who[hidden] { display: none; }
.gate__who { animation: rise .42s cubic-bezier(.22, .68, .3, 1) both; }
.gate__who-label { margin: 0 0 8px; font: 500 12px/1.4 var(--mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--mute-2); }
.gate__who-card { display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
  padding: 12px 14px; border: 1px solid var(--edge-2); border-radius: 14px; background: var(--panel-2); }
.gate__who-avatar { flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; background: var(--gold); color: #1a1408; font-weight: 700; font-size: 16px; }
.gate__who-email { min-width: 0; overflow-wrap: anywhere; font-weight: 600; font-size: 16px; color: var(--bone); }
.gate__who-question { margin-bottom: 18px; }
.gate__who-other { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .gate__who { animation: none; } }

.gate__done { animation: rise .42s cubic-bezier(.22, .68, .3, 1) both; }
.gate__done[hidden] { display: none; }

/* Sized by the markup (360x210) so the layout does not jump when it decodes;
   there is no artwork in the tree yet and the screen is composed without it. */
.gate__done-art { display: block; width: 100%; height: auto; max-width: 360px;
  margin: 0 0 22px; border-radius: var(--r-lg);
  border: 1px solid var(--edge); background: var(--panel); }

.gate h1.gate__done-line { font-size: 22px; line-height: 1.28; letter-spacing: -0.02em;
  margin: 0 0 18px; text-wrap: balance; }

/* The countdown, and the two sentences that replace it when there is nothing
   to count down to. Mono and gold, the same voice the status line already
   speaks in — this IS the status line's job, done properly. The digits are
   tabular so 3 -> 2 -> 1 does not shift the words after them. */
.gate__done-next { margin: 0; min-height: 20px;
  font: 400 12.5px/1.6 var(--mono); letter-spacing: .02em;
  color: var(--gold); font-variant-numeric: tabular-nums; }

.gate__done-back { display: inline-block; margin: 18px 0 0;
  font: 400 12.5px/1.6 var(--mono); letter-spacing: .02em; color: var(--mute);
  border-bottom: 1px solid var(--edge-2); padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease; }
.gate__done-back:hover { color: var(--bone-dim); border-color: var(--mute-2); }

@media (prefers-reduced-motion: reduce) {
  .gate__done { animation: none; }
}

/* The consent checkbox on checkout is the only field left in the app. */
.field { display: flex; gap: 11px; align-items: flex-start; margin: 0 0 18px;
  font: 400 13.5px/1.5 var(--serif); color: var(--mute); cursor: pointer; }
.field input[type="checkbox"] { accent-color: var(--gold); width: 15px; height: 15px;
  margin-top: 3px; flex: none; }

/* ---- flashes ------------------------------------------------------------- */
.flash { margin: 20px 0 0; padding: 11px 16px; border-radius: var(--r-md);
  font: 400 14px/1.5 var(--serif);
  border: 1px solid var(--edge-2); background: var(--panel); color: var(--bone-dim); }
.flash--ok { border-color: color-mix(in srgb, var(--gold) 34%, transparent);
  background: color-mix(in srgb, var(--gold) 7%, transparent); color: var(--gold-bright); }
.flash--warn { border-color: color-mix(in srgb, var(--alarm) 40%, transparent);
  background: color-mix(in srgb, var(--alarm) 8%, transparent); color: #F0A69C; }

/* A signature, then a list — not one running sentence. The links used to sit
   in the same flex row and the same colour as the tagline, which is why the
   first of them read as prose. The row of links keeps wrapping as one row; it
   does not go back to a column of stubs. */
.foot { margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--edge);
  font: 400 11.5px/1.6 var(--mono); color: var(--mute-2); letter-spacing: .03em; }
.foot__sig { margin: 0 0 11px; color: var(--mute-2); }
.foot__nav { display: flex; gap: 8px 20px; flex-wrap: wrap; }
.foot__nav a { color: var(--mute); }
.foot__nav a:hover { color: var(--gold-bright); }

/* shared/_locale_switcher, rendered straight into <main class="shell"> on
   /pricing and /login — this stylesheet is the ONLY one those two pages
   load (see layouts/dashboard). It never had a rule of its own here, so the
   switcher fell back to the browser default for a bare <ul>: bulleted,
   block-level <li>s, one language per line. That default is what made the
   same partial look like a ROW on the landing/blog (styled in the landing
   bundle's main.css) and a COLUMN on pricing — not two different widgets,
   one styled and one not. Mirrors main.css's version chip-for-chip so the
   switcher is the same object everywhere; the values differ only because
   this file's custom properties carry a hyphen (--panel-2, --edge-2) where
   the landing bundle's do not (--panel2, --edge2).
   Note also: this file's global `img { display: block; }` reset (see the
   top of the sheet) is what turned the flag into its own line above the
   label with no rule here at all — `display: inline-flex` on `.flangs a`
   fixes that as a side effect, because a flex container lays out its
   children in the flex direction regardless of each child's own display. */

/* Where Gistil publishes — mirrored from main.css chip-for-chip, for the same
   reason .flangs is mirrored here: this sheet dresses /pricing, /login and the
   account pages, and a partial that is styled in only one of the two bundles
   is the bug that made the language switcher a bare bulleted column on
   /pricing while it was a row everywhere else. The values differ from
   main.css only where this file's custom properties carry a hyphen
   (--panel-2, --edge-2) and the landing bundle's do not.
   Note also the global `img, svg { display: block; }` reset at the top of this
   sheet: it is harmless here because the chip is a flex container and the mark
   is its only child, but .fsocial__mark keeps the explicit `display:block`
   anyway so the two sheets stay literally the same rules. */
.fsocial { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px; padding-top: 22px; border-top: 1px solid var(--edge); }
.fsocial h4 { font: 500 11px/1 var(--mono); letter-spacing: .24em; color: var(--mute);
  margin: 0 8px 0 0; text-transform: uppercase; }
.fsocial ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fsocial a { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; color: var(--bone-dim); background: var(--panel-2);
  border: 1px solid var(--edge-2); border-radius: var(--r-pill);
  transition: background .15s, border-color .15s, color .15s; }
.fsocial a:hover { color: var(--gold-bright); border-color: var(--gold-deep); background: var(--panel-3); }
.fsocial a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.fsocial__mark { display: block; flex: 0 0 auto; }

/* Inside the dashboard layout's own footer the row follows .foot__nav rather
   than standing alone under a rule of its own — .foot already draws that rule
   above the whole block, and a second hairline 11px under the first is a seam,
   not a section. Same chips, no border, tighter lead-in. */
.foot .fsocial { margin-top: 14px; padding-top: 0; border-top: 0; }
.foot .fbar { margin-top: 18px; padding-top: 16px; }
.foot__legal { margin: 12px 0 0; font-size: 11px; color: var(--mute); }

/* ---- entrance: ONE orchestrated sequence, nothing on scroll -------------- */
.rise { animation: rise .5s cubic-bezier(.22, .68, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.tally__got { animation: fill .85s cubic-bezier(.22, .68, .3, 1) .2s both; }
@keyframes fill { from { width: 0 !important; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 940px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--wide, .plans, .plans--2 { grid-template-columns: 1fr; max-width: none; }
  .topup { grid-template-columns: 1fr; gap: 20px; }
  .topup__face { padding: 16px 16px 14px; }
  /* the watch-next rail keeps two-up until a phone; one giant card reads worse */
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  /* on a phone the best card's plate and its flag share 312px: Italian's
     "SUPER SMART" + "IL PIÙ CONVENIENTE" measured 148 + 154 + 10 and wrapped;
     the top plate steps down to the size of the others and both fit */
  .plan--top .plan__plate { font-size: 14px; min-height: 30px; padding: 7px 13px 7px 12px; }
}
/* A fixed viewBox scaled to a 380px screen would render 13px labels at 7px.
   Scroll the chart instead of shrinking its type past the point of reading. */
@media (max-width: 700px) {
  .dc-wrap { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; }
  .dc { min-width: 520px; }
}

@media (max-width: 620px) {
  .sq__row { grid-template-columns: 56px 1fr; row-gap: 6px; }
  .sq__thumb { width: 56px; height: 32px; }
  .sq__right { grid-column: 2; flex-direction: row; align-items: baseline; gap: 12px;
    text-align: left; }
  .sq__meta .cmap { display: none; }
  .rec__map { max-width: none; }
  .shell { padding: 0 16px 80px; }
  .grid--4 { grid-template-columns: 1fr; }
  .rec { grid-template-columns: 72px 1fr; row-gap: 8px; }
  .rec__thumb { width: 72px; height: 41px; }
  .rec__right { grid-column: 2; text-align: left; }
  /* .mark__ctx and .who used to be hidden here. The chip is not this file's
     any more (nav.css keeps it, and drops the name rather than the whole
     control at this width), and the context label no longer exists — the
     header marks the current page instead of naming it twice. */
  .planbar__cta { margin-left: 0; width: 100%; }
  .planbar__cta .btn { width: 100%; }
  .rule { margin: 40px 0 14px; flex-wrap: wrap; }
  .rule > span:not(.seg) { display: none; }
  /* the range control drops to its own full-width line rather than vanishing */
  .rule .seg { order: 3; width: 100%; margin: 12px 0 0; justify-content: space-between; }
  /* The header is 64px at every width now, so this no longer needs a phone
     value of its own — the base rule already says 64. */
  /* One step down again on a phone: the longest joke in the library is a full
     sentence, and 22px would give it four lines here. */
  .gate h1.gate__done-line { font-size: 20px; margin-bottom: 16px; }
  .gate__done-art { margin-bottom: 18px; }
}


/* ============================================================================
   ACCOUNT (/account)
   The page the name chip finally leads to. Same panels and hairlines as the
   dashboard — this is not a settings app bolted on the side, it is one more
   screen of the same product. The only new idea is `--danger`, and it is spent
   in exactly one place: the box you leave through.
   ========================================================================== */
/* stretch, not start: the plan panel is always the shorter of the two, and
   letting it end early leaves a 300px hole in the middle of the page. */
.acctgrid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; align-items: stretch; }
.acctgrid > .panel { display: flex; flex-direction: column; }
.acctgrid > .panel .acctactions { margin-top: auto; }
@media (max-width: 860px) { .acctgrid { grid-template-columns: 1fr; } }

.acctform { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.acctfield { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.acctfield__k { font: 500 10.5px/1.3 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute-2); }
.acctfield__k b { color: var(--bone-dim); font-weight: 700; letter-spacing: .1em; }
.acctfield__hint { margin: 0; font: 400 12.5px/1.5 var(--serif); color: var(--mute); }

.acctinput {
  width: 100%; height: 38px; padding: 0 12px;
  background: var(--panel-2); border: 1px solid var(--edge); border-radius: var(--r-sm);
  color: var(--bone); font: 400 14px/1 var(--serif);
  transition: border-color .16s, background .16s;
}
.acctinput::placeholder { color: var(--mute-2); }
.acctinput:hover { border-color: var(--edge-2); }
.acctinput:focus { outline: none; border-color: var(--gold); background: var(--panel-3); }

.acctfacts { margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--edge);
  display: flex; flex-direction: column; gap: 15px; }
.acctfacts > div { display: grid; gap: 3px; }
.acctfacts dt { font: 500 10.5px/1.3 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute-2); }
.acctfacts dd { margin: 0; font: 400 14.5px/1.45 var(--serif); color: var(--bone-dim);
  overflow-wrap: anywhere; }
.acctfacts__note { margin: 2px 0 0; font: 400 12.5px/1.5 var(--serif); color: var(--mute); }

.acctplan { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.acctplan__note { font: 400 13px/1.4 var(--serif); color: var(--mute); }

.acctquota { display: flex; flex-direction: column; gap: 10px; }
.acctquota__row { display: flex; align-items: baseline; gap: 9px; }
.acctquota__n { font: 800 34px/1 var(--display); letter-spacing: -0.035em; color: var(--bone); }
.acctquota__k { font: 400 13.5px/1.4 var(--serif); color: var(--mute); }
.acctquota__note { margin: 2px 0 0; font: 400 13px/1.55 var(--serif); color: var(--mute); }

.acctactions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--edge); }
.acctactions .inline { display: inline; margin: 0; }

.acctlist { margin: 0 0 20px; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 10px; }
.acctlist li { position: relative; padding-left: 16px;
  font: 400 14px/1.6 var(--serif); color: var(--mute); }
.acctlist li::before { content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--edge-2); }
/* These lead-ins are prose, not measurements — serif, per the type rule at the
   top of this file. Mono made "Your free allowance does not come back" read
   like a log line. */
.acctlist b { color: var(--bone); font-weight: 600; }

/* The one red in the product. Reserved for the box that ends the account, so
   that when it appears it is unambiguous rather than decorative. */
.panel--danger { --danger: #D2564A; border-color: color-mix(in srgb, var(--danger) 26%, var(--edge)); }
.panel--danger h3 { color: var(--bone); }
.acctdanger { display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
  max-width: 380px; }
.acctinput--danger:focus { border-color: var(--danger); }
.btn--danger {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  border-color: color-mix(in srgb, var(--danger) 42%, transparent);
  color: #F0A79F;
}
.btn--danger:hover { background: color-mix(in srgb, var(--danger) 24%, transparent);
  border-color: var(--danger); color: #FFD9D4; }
.btn--danger:active { transform: translateY(1px); }


/* --------------------------------------------------------- allowance table -- */
/* Three rows, one number each. The point of the block is that the two paid plans
   count over different periods, so the period sits next to the number instead of
   in a footnote nobody reads. */
.allow { display: flex; flex-direction: column; border: 1px solid var(--edge);
  border-radius: var(--r-md); background: var(--panel); overflow: hidden; }
.allow__row { display: flex; align-items: baseline; gap: 14px; padding: 15px 20px;
  border-bottom: 1px solid var(--edge); }
.allow__row:last-child { border-bottom: 0; }
/* The plan name is content, not chrome, and it sits on the lighter --panel,
   where --mute-2 measures 3.76:1. --mute puts it over the 4.5 bar. */
.allow__plan { flex: none; min-width: 108px; font: 500 11.5px/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.allow__n { flex: none; min-width: 54px; font: 800 26px/1 var(--display);
  letter-spacing: -0.03em; color: var(--bone); }
.allow__k { font: 400 14.5px/1.5 var(--serif); color: var(--mute); }
.allow__note { margin: 14px 0 0; font: 400 14.5px/1.65 var(--serif); color: var(--mute);
  max-width: 74ch; }
@media (max-width: 620px) {
  .allow__row { flex-wrap: wrap; gap: 6px 12px; }
  .allow__plan { min-width: 0; width: 100%; }
}


/* --- /account#extension: the extension's settings (was /settings, п. 240) ----
   Borrows the account page's field vocabulary wholesale (.acctfield, .acctinput,
   .acctgrid, .panel) so the two signed-in pages are visibly one screen. Only the
   switch is new: nothing else on the site asks a yes/no question of a person. */
.setform { display: block; }
.setswitch { margin: 4px 0 0; }
.setswitch__row { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.setswitch__row + .setswitch__row { margin-top: 12px; }
/* п. 240: the block lives on /account now; the sticky header must not cover
   its heading when /account#extension is opened. */
.acctext-rule { scroll-margin-top: 90px; }
.setform .acctfield + .acctfield { margin-top: 16px; }
.setswitch__row input[type="checkbox"],
.setswitch__row input[type="radio"] {
  flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0;
  accent-color: var(--gold); cursor: pointer;
}
.setswitch__txt { display: flex; flex-direction: column; gap: 4px; }
.setswitch__txt b { font: 700 14.5px/1.35 var(--serif); color: var(--bone-dim); }
.setswitch__txt span { font: 400 13px/1.55 var(--serif); color: var(--mute); }
select.acctinput { appearance: none; padding-right: 32px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--mute-2) 50%),
                    linear-gradient(135deg, var(--mute-2) 50%, transparent 50%);
  background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

/* ============================================================================
   THE RECORD, RE-WEIGHTED — round 2 of the personal dashboard.
   Owner, 2026-09-09: "мне нравится дашборда, внедряй" (the second mock,
   output_to_user/dashboard_proposal2_fable_2026-09-09.html).

   Nothing here re-invents the design system above it; it changes what carries
   the WEIGHT, and it settles one argument the file's own header started.

   FOUR WEIGHTS, TOLD BY MATERIAL:
     A  the act        — the box a person types into, and the plan beside it.
     B  what to watch  — cards with a picture; the score stamped on a plate of
                         the verdict's own metal, the same ladder the storefront
                         sells (gold on top).
     C  the tally      — the gold figure, a quarter of its old size.
     D  record & setup — no box at all: rows on the ground, hairlines only. The
                         eye learns that boxed means "act on it".

   AND THE TYPE FLOOR (owner, at 100%: "very small, hard to read"). Nothing that
   is READ is under 13px and nothing that is MEASURED is under 12.5px. Several
   rules below exist only to raise sizes the first draft set at 10.5–11.5px.
   ========================================================================== */

:root {
  /* THE MATERIALS, as files. Every metal pixel in this product is baked
     (script/bake_plan_textures.py) — no CSS gradient pretends to be metal, which
     is the standing rule since the Gistil landing was called a cheap imitation.
     Same four files the storefront's cards already use, so "gold" is one object
     across the whole product. */
  --tex-au: url("/assets/plans/gold-97f53701.webp");
  --tex-ag: url("/assets/plans/silver-fea607da.webp");
  --tex-sl: url("/assets/plans/slate-dfb1b285.webp");
  --tex-cu: url("/assets/plans/copper-d45fccf3.webp");

  --au-mid: #C9A227; --au-bright: #EED27C; --au-ink: #171002;
  --ag-mid: #9AA3AE; --ag-bright: #E4E8EE; --ag-ink: #0A0C0F;
  --sl-mid: #8B95A2; --sl-bright: #D3DAE3; --sl-ink: #0B0E12; --sl-base: #49566A;
  --cu-mid: #B5683A; --cu-bright: #ECA878; --cu-ink: #160A03; --cu-base: #6E3F22;

  /* WARM INK — data that is not "time you got back". Three validated steps,
     monotone in lightness; see DashboardChartsHelper for why the blue ramp it
     replaces lost. */
  --ink-1: #E9E2D4; --ink-2: #A8A092; --ink-3: #6E6960;

  --fs-label: 12.5px;
  --fs-eyebrow: 13px;
}

/* ---------------------------------------------------------------- A: act -- */
.act { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px 40px;
  align-items: start; margin: 34px 0 0; padding: 26px 28px;
  border: 1px solid var(--edge); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: var(--depth); }
.act__main { min-width: 0; }
.act turbo-frame { display: block; min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  font: 500 var(--fs-eyebrow)/1 var(--mono); letter-spacing: .22em;
  text-transform: uppercase; color: var(--mute); }
.eyebrow::after { content: ""; flex: 0 1 64px; height: 1px; background: var(--edge-2); }
.act h1 { font: 800 clamp(26px, 3vw, 34px)/1.15 var(--display);
  letter-spacing: -.025em; margin: 6px 0 16px; color: var(--bone); }
.act__form { display: flex; gap: 10px; min-width: 0; }
.act__input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--edge-2); background: var(--bg); color: var(--bone);
  font: 400 16px/1 var(--serif); outline: none;
  transition: border-color .16s ease, box-shadow .16s ease; }
.act__input::placeholder { color: var(--mute); }
.act__input:focus { border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
.act__hint { margin: 14px 0 0; max-width: 62ch; font: 400 15px/1.55 var(--serif);
  color: var(--mute); }
.act__plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px;
  border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--edge); }
.act__plan .plate { align-self: flex-start; }
.act__left { margin: 4px 0 0; font: 400 15px/1.4 var(--serif); color: var(--bone-dim); }
.act__left b { font: 800 24px/1 var(--display); letter-spacing: -.03em;
  color: var(--bone); margin-right: 3px; }
.act__note { margin: 0; font: 400 13.5px/1.5 var(--serif); color: var(--mute); }
.act__plans { align-self: flex-start; margin-top: 2px; font: 600 13px/1 var(--mono);
  letter-spacing: .03em; color: var(--gold-bright); }
.act__plans:hover { color: var(--bone); }
.act--first h1 { font-size: clamp(28px, 3.4vw, 38px); }
.act--first .act__hint { font-size: 16px; color: var(--bone-dim); }

/* THE NAMEPLATE, at dashboard scale. Same recipe as the storefront's
   `.plan__plate`: the texture at full strength with a translucent wash over it,
   so the brushed streaks survive and the ink still clears 4.5:1. */
.plate { display: inline-flex; align-items: center; min-height: 28px;
  padding: 6px 12px; border-radius: 6px;
  --m-tex: var(--tex-au); --m-mid: var(--au-mid); --m-ink: var(--au-ink);
  --m-lift: .34; --m-lift-2: .22;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, var(--m-lift)),
      rgba(255, 255, 255, var(--m-lift-2)) 55%,
      rgba(255, 255, 255, calc(var(--m-lift-2) - .04))),
    var(--m-tex) center / 420px auto, var(--m-mid);
  color: var(--m-ink); font: 800 13.5px/1 var(--display); letter-spacing: .06em;
  text-transform: uppercase; text-shadow: 0 1px 0 rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(0, 0, 0, .5), 0 1px 0 rgba(0, 0, 0, .7); }
.plate--copper { --m-tex: var(--tex-cu); --m-mid: var(--cu-mid); --m-ink: var(--cu-ink);
  --m-lift: .46; --m-lift-2: .34; }
.plate--silver { --m-tex: var(--tex-ag); --m-mid: var(--ag-mid); --m-ink: var(--ag-ink); }
.plate--gold   { --m-tex: var(--tex-au); --m-mid: var(--au-mid); --m-ink: var(--au-ink); }
.plate--smart  { --m-mid: #21A89C; --m-ink: #041A19; --m-tex: url("/assets/plans/smart-0ced926b.webp");
  --m-lift: .40; --m-lift-2: .28; }
.plate--super  { --m-mid: #7D6EF0; --m-ink: #0D0A28; --m-tex: url("/assets/plans/super-5a4c6c6c.webp");
  --m-lift: .40; --m-lift-2: .28; }

/* the allowance, in the plan's own metal — it is what the plan grants, not a
   measurement of anything, so it wears copper rather than ink */
.runway { height: 8px; border-radius: var(--r-pill); overflow: hidden;
  background: var(--tex-sl) center / 720px auto, var(--panel-3);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.runway__fill { height: 100%; border-radius: var(--r-pill);
  background: var(--tex-cu) center / 720px auto, var(--cu-mid);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); transition: width .5s ease; }

.btn--gold { height: 48px; padding: 0 22px; font-size: 14px; color: var(--au-ink);
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .18) 55%,
      rgba(255, 255, 255, .12)),
    var(--tex-au) center / 420px auto, var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .45);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .22); font-weight: 700; }
.btn--gold:hover { filter: brightness(1.06); color: var(--au-ink); }
.btn--go { height: 38px; padding: 0 16px; font-size: 13px; color: var(--gold-bright);
  border-color: color-mix(in srgb, var(--gold) 50%, transparent);
  background: color-mix(in srgb, var(--gold) 8%, transparent); }
.btn--go:hover { background: color-mix(in srgb, var(--gold) 18%, transparent);
  color: var(--bone); }

/* ---- the answer to the box ---------------------------------------------- */
.chk { display: grid; margin: 20px 0 0; border-radius: var(--r-md);
  border: 1px solid var(--edge-2); background: var(--bg); padding: 16px 18px; }
.chk--found { grid-template-columns: 160px 1fr; gap: 18px; align-items: start;
  border-color: color-mix(in srgb, var(--gold) 34%, var(--edge-2));
  transition: border-color .18s ease; }
.chk--found:hover { border-color: color-mix(in srgb, var(--gold) 62%, transparent); }
.chk--found:hover .chk__title { color: var(--gold-bright); }
.chk__media img { width: 160px; height: 90px; object-fit: cover;
  border-radius: var(--r-sm); background: #000; border: 1px solid var(--edge); }
.chk__media-none { display: grid; place-items: center; width: 160px; height: 90px;
  border-radius: var(--r-sm); background: var(--panel-3); color: var(--mute-2);
  font-size: 20px; }
.chk__body { min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.chk__k { margin: 0; font: 500 var(--fs-label)/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); }
.chk--none .chk__k { color: var(--mute); }
.chk__title { font: 700 17px/1.3 var(--display); letter-spacing: -.012em;
  color: var(--bone); margin: 0; }
.chk__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0;
  font: 400 14px/1.3 var(--serif); color: var(--mute); }
.chk__foot { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0; }
.chk__start { font: 600 13px/1 var(--mono); letter-spacing: .03em; color: var(--gold-bright); }
.chk__water { font: 400 var(--fs-label)/1.3 var(--mono); color: var(--mute); }
.chk__why { margin: 0; font: 400 14.5px/1.55 var(--serif); color: var(--bone-dim); }
.chk__b { margin: 0; max-width: 66ch; font: 400 14.5px/1.55 var(--serif); color: var(--bone-dim); }
.chk__go { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 0; }
.chk--none { gap: 10px; }
.chk__back { margin: 26px 0 0; font: 500 13px/1 var(--mono); letter-spacing: .03em;
  color: var(--mute); }
.chk__back a:hover { color: var(--bone); }

/* ------------------------------------------------------- B: what to watch -- */
.card { display: flex; flex-direction: column; min-width: 0;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--edge); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--depth);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.card:hover { border-color: var(--edge-2); transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 22px 44px -22px rgba(0, 0, 0, .9); }
.card:hover .card__title { color: var(--gold-bright); }
.card__media { position: relative; aspect-ratio: 16 / 9; background: #000;
  border-bottom: 1px solid var(--edge); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__media-none { display: grid; place-items: center; width: 100%; height: 100%;
  color: var(--mute-2); font-size: 22px; }
.card__len { position: absolute; bottom: 10px; right: 10px;
  font: 500 var(--fs-label)/1 var(--mono); letter-spacing: .04em; color: var(--bone);
  padding: 5px 8px; border-radius: 5px; background: rgba(7, 8, 10, .82); }
.card__body { display: flex; flex-direction: column; gap: 11px; padding: 16px 18px 18px; }
.card__title { margin: 0; font: 700 17px/1.3 var(--display); letter-spacing: -.012em;
  color: var(--bone); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.card__meta { display: flex; align-items: center; gap: 10px; margin: 0; min-width: 0;
  flex-wrap: wrap; }
.card__ch { font: 400 14px/1.3 var(--serif); color: var(--mute); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.card__novel { font: 500 var(--fs-label)/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold); }
.card__foot { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin: 0; flex-wrap: wrap; }
.card__start { font: 600 13px/1 var(--mono); letter-spacing: .03em; color: var(--gold-bright); }
.card__water { font: 400 var(--fs-label)/1.3 var(--mono); color: var(--mute); }
.card__why { margin: 0; font: 400 14.5px/1.55 var(--serif); color: var(--bone-dim);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; }

/* THE SCORE, on a plate of the verdict's own metal — so the number and the word
   say the same thing, and "gold" means on this card what it means on the price
   list. Never the only signal: the verdict chip is always beside it. */
.score { display: inline-flex; align-items: baseline; gap: 2px; padding: 6px 10px 5px;
  border-radius: 6px; flex: none;
  --m-tex: var(--tex-au); --m-mid: var(--au-mid); --m-ink: var(--au-ink);
  font: 800 20px/1 var(--display); letter-spacing: -.03em; color: var(--m-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .22) 55%,
      rgba(255, 255, 255, .18)),
    var(--m-tex) center / 420px auto, var(--m-mid);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .5),
    0 2px 8px rgba(0, 0, 0, .6);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25); }
.score b { font-weight: 800; }
.score small { font: 700 12px/1 var(--mono); letter-spacing: 0; opacity: .75; }
.score--skim { --m-tex: var(--tex-ag); --m-mid: var(--ag-mid); --m-ink: var(--ag-ink); }
.score--skip { --m-tex: var(--tex-sl); --m-mid: var(--sl-mid); --m-ink: var(--sl-ink); }

/* THE VERDICT CHIP, re-cut. It used to be three shades of the blue ramp at
   10.5px — under the floor, and the last blue left on the page. Now it is a
   plate with a swatch of its own material, and it is 12.5px. */
.verdict { display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 5px 11px 5px 7px; border-radius: var(--r-pill);
  border: 1px solid var(--edge-2); background: var(--panel-3);
  font: 600 var(--fs-label)/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--bone-dim); }
.verdict::before { content: ""; width: 12px; height: 12px; border-radius: 3px; flex: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(0, 0, 0, .4);
  background: var(--tex-sl) center / 240px auto, var(--sl-base); }
.verdict--watch { border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  background: color-mix(in srgb, var(--gold) 9%, transparent); color: var(--gold-bright); }
.verdict--watch::before { background: var(--tex-au) center / 240px auto, var(--au-mid); }
.verdict--skim { border-color: color-mix(in srgb, var(--ag-mid) 50%, transparent);
  background: var(--panel-3); color: var(--ag-bright); }
.verdict--skim::before { background: var(--tex-ag) center / 240px auto, var(--ag-mid); }
.verdict--skip { border-color: var(--edge-2); color: var(--mute); }

/* ---- the content map, in material ---------------------------------------- */
/* Substance in gold, dimmed by band; water cut as milled graphite. The strip is
   the product's core artifact, and it was the last place the blue ramp showed. */
.cmap { padding-bottom: 7px; }
.cmap__bar { gap: 1px; }
.cmap__seg--high { background: var(--tex-au) center / 420px auto, var(--au-mid);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.cmap__seg--mid { background: var(--tex-au) center / 420px auto, var(--gold-deep); }
.cmap__seg--low { background: var(--tex-au) center / 420px auto, #6A5316; }
.cmap__seg--water { background:
  repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 5px),
  var(--panel-3); }
.cmap__jump { border-bottom-color: var(--gold-bright); border-bottom-width: 6px; }

/* ---------------------------------------------------------- 2: continue --- */
.cw { display: flex; flex-direction: column; }
.cw__row { display: grid; grid-template-columns: 96px 1fr auto; gap: 16px;
  align-items: center; padding: 13px 0; border-bottom: 1px solid var(--edge); }
.cw__row:first-child { padding-top: 0; }
.cw__row:last-child { border-bottom: 0; padding-bottom: 0; }
.cw__thumb { width: 96px; height: 54px; border-radius: var(--r-sm); object-fit: cover;
  background: #000; border: 1px solid var(--edge); }
.cw__thumb--none { display: grid; place-items: center; color: var(--mute-2); font-size: 16px; }
.cw__body { min-width: 0; }
.cw__title { font: 700 16px/1.35 var(--display); letter-spacing: -.012em; margin: 0 0 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bone); }
.cw__title a:hover { color: var(--gold-bright); }
.cw__meta { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin: 0;
  font: 400 13.5px/1.4 var(--serif); color: var(--mute); }
.cw__meta .mono { font-size: var(--fs-label); letter-spacing: .03em; }
.cw__map { margin-top: 8px; max-width: 320px; }
.sq__ledger { margin: 0 0 14px; font: 400 14.5px/1.55 var(--serif); color: var(--bone-dim); }
.panel__note { font-size: 13.5px; }
.panel__sub { font-size: 14.5px; }

/* ------------------------------------------------------- C: what you got -- */
.got { padding: 4px 0 0; }
.got__head { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: end; }
.figure { margin: 0; font: 800 clamp(52px, 6vw, 68px)/.9 var(--display);
  letter-spacing: -.05em; width: max-content; max-width: 100%;
  background: var(--tex-au) center / 900px auto, var(--gold);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 26px rgba(201, 162, 39, .14)); }
.figure small { font-size: .36em; font-weight: 700; letter-spacing: -.01em; margin-left: .06em; }
.got__lead { margin: 0 0 10px; font: 700 20px/1.2 var(--display); letter-spacing: -.015em;
  color: var(--bone); }
.got__sub { margin: 0 0 10px; font: 400 15.5px/1.55 var(--serif); color: var(--bone-dim);
  max-width: 60ch; }
.got__sub b { color: var(--bone); font-family: var(--mono); font-weight: 500; font-size: 14px; }
.got__facts { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
  margin: 18px 0 0; font: 500 13px/1 var(--mono); color: var(--mute); letter-spacing: .03em; }
.got__facts b { color: var(--bone); font-weight: 600; }
.got__facts .verdict { padding: 4px 9px 4px 6px; }

/* THE TALLY — the whole history as one run of time: gold for what came back,
   milled graphite for what was spent. (`.ledger` is taken: it is the price
   list's "what is counted" block.) */
.tally { margin: 22px 0 0; }
.tally__bar { position: relative; display: flex; gap: 2px; height: 22px; border-radius: 6px;
  overflow: hidden; background: var(--panel-2);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .04); }
.tally__got { background: var(--tex-au) center / 900px auto, var(--gold);
  border-radius: 5px 3px 3px 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .4),
    0 0 30px -4px rgba(201, 162, 39, .55); }
.tally__spent { flex: 1; border-radius: 3px 5px 5px 3px;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .055) 0 2px, transparent 2px 8px),
    var(--tex-sl) center / 720px auto, var(--sl-base); }
.tally__scale { display: flex; justify-content: space-between; margin-top: 9px;
  font: 400 var(--fs-label)/1 var(--mono); color: var(--mute); letter-spacing: .04em; }
.tally__scale span { position: relative; padding-top: 8px; }
.tally__scale span::before { content: ""; position: absolute; top: 0; left: 0; width: 1px;
  height: 5px; background: var(--edge-2); }
.tally__scale span:last-child::before { left: auto; right: 0; }
.tally__key { display: flex; gap: 22px; margin-top: 14px; flex-wrap: wrap;
  font: 400 13px/1 var(--mono); color: var(--bone-dim); letter-spacing: .03em; }
.tally__key i { font-style: normal; display: inline-flex; align-items: center; gap: 8px; }
.tally__key i::before { content: ""; width: 12px; height: 12px; border-radius: 3px;
  background: var(--tex-au) center / 240px auto, var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.tally__key i.is-spent::before { background:
  repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 4px),
  var(--tex-sl) center / 240px auto, var(--sl-base); }

/* FOLDED, NOT DELETED. On four videos the 30-day chart is two bars and 28 empty
   days: a shape that says nothing and takes the height of the block that does. */
.fold { margin-top: 22px; border-top: 1px solid var(--edge); }
.fold summary { cursor: pointer; list-style: none; display: flex; align-items: center;
  gap: 10px; padding: 14px 0; font: 500 13px/1 var(--mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--mute); }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::before { content: "\25B8"; color: var(--gold); width: 10px; }
.fold[open] summary::before { content: "\25BE"; }
.fold summary:hover { color: var(--bone-dim); }
.fold__body { padding: 6px 0 4px; }
.fold__head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; }
.fold__head .panel__sub { margin: 0 0 12px; }
.fold__h { margin: 26px 0 12px; font-size: 16px; font-weight: 700; }

/* ------------------------------------------ D: the record, on the ground -- */
/* No card, no box. The eye learns that boxed means "act on it" and unboxed
   means "look it up". Sizes here are all floor-raises on the first draft. */
.rec { grid-template-columns: 108px 1fr auto; gap: 18px; }
.rec__thumb { width: 108px; height: 61px; }
.rec__title { font-size: 16px; }
.rec__meta { font: 400 14px/1.4 var(--serif); color: var(--mute); }
.rec__meta .mono { font-size: var(--fs-label); }
.rec__map { max-width: 360px; margin-top: 9px; }
.rec__jump { font: 500 var(--fs-label)/1 var(--mono); color: var(--gold-bright);
  font-variant-numeric: tabular-nums; }
.rec__saved { font: 600 16px/1 var(--mono); color: var(--gold-bright);
  font-variant-numeric: tabular-nums; }
.rec__client { font: 400 var(--fs-label)/1.4 var(--mono); color: var(--mute); margin-top: 6px; }
.rec__water span { font: 400 var(--fs-label)/1 var(--mono); color: var(--mute); }

.setup { display: grid; grid-template-columns: 1.55fr 1fr; gap: 40px; }
.setup h3 { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; font-size: 17px; font-weight: 700; margin: 0 0 14px; }
.setup h3 a { font: 500 var(--fs-label)/1 var(--mono); letter-spacing: .03em;
  color: var(--gold-bright); text-transform: none; }
.setup h3 a:hover { color: var(--bone); }
.setup__note { margin: 14px 0 0; font: 400 13.5px/1.5 var(--serif); color: var(--mute); }
.goal__pct.is-zero { color: var(--mute); font-weight: 400; }
.goal__note { font: 400 var(--fs-label)/1.4 var(--mono); color: var(--mute); }
.goal__hint { display: block; margin-top: 2px; font: 400 13.5px/1.5 var(--serif);
  color: var(--mute); }
.chip { display: inline-flex; align-items: center; gap: 8px; font: 400 14px/1.2 var(--serif);
  color: var(--bone-dim); padding: 8px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--edge-2); background: var(--panel-2); }
.empty { margin: 0; font: 400 15px/1.55 var(--serif); color: var(--bone-dim); max-width: 50ch; }
.empty small { display: block; margin-top: 6px; font: 400 13.5px/1.5 var(--serif);
  color: var(--mute); }
.ext { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 26px 0 0;
  padding-top: 18px; border-top: 1px solid var(--edge); font: 400 14px/1.5 var(--serif);
  color: var(--mute); }
.ext b { font: 500 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--bone-dim); }
.ext a { color: var(--gold-bright); font: 600 13px/1 var(--mono); letter-spacing: .03em; }
.ext a:hover { color: var(--bone); }

/* ------------------------------------------------ the first visit: doors -- */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.door { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 18px;
  border: 1px solid var(--edge); border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: var(--depth); min-width: 0; }
.door__n { font: 500 var(--fs-label)/1 var(--mono); letter-spacing: .2em; color: var(--gold); }
.door h4 { font-size: 17px; font-weight: 700; letter-spacing: -.012em; }
.door p { margin: 0; font: 400 14.5px/1.55 var(--serif); color: var(--bone-dim); flex: 1; }
.door .btn { align-self: flex-start; height: 36px; padding: 0 15px; font-size: 13px;
  color: var(--gold-bright);
  border-color: color-mix(in srgb, var(--gold) 50%, transparent);
  background: color-mix(in srgb, var(--gold) 8%, transparent); }
.door .btn:hover { background: color-mix(in srgb, var(--gold) 18%, transparent);
  color: var(--bone); }
.door--now { border-color: color-mix(in srgb, var(--gold) 40%, var(--edge)); }

/* ---- the meter, in material --------------------------------------------- */
/* The track is milled graphite and the fill is the baked gold plate. The one
   mark in this product allowed to be metal — a plan or a goal running down is
   the product's own promise, not a measurement of a video. */
.meter { background: var(--tex-sl) center / 720px auto, var(--panel-3);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.meter__fill--accent { background: var(--tex-au) center / 720px auto, var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.meter__fill--warn { background: var(--alarm); }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 940px) {
  .act, .doors, .setup { grid-template-columns: 1fr; }
  .cards > .card:nth-child(3) { display: none; }
}
@media (max-width: 620px) {
  .act { padding: 20px 16px; margin-top: 20px; }
  .act__form { flex-direction: column; }
  .btn--gold { width: 100%; }
  .cards > .card:nth-child(3) { display: flex; }
  .chk--found { grid-template-columns: 1fr; }
  .chk__media img, .chk__media-none { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .cw__row { grid-template-columns: 76px 1fr; row-gap: 8px; }
  .cw__thumb { width: 76px; height: 43px; }
  .cw__row .btn--go { grid-column: 2; justify-self: start; }
  .cw__map { max-width: none; }
  .got__head { grid-template-columns: 1fr; }
  .rec { grid-template-columns: 84px 1fr; }
  .rec__thumb { width: 84px; height: 47px; }
  .rec__map { max-width: none; }
  .tally__scale span:nth-child(2n) { display: none; }
}

/* the shelf marks: one line drawing per category, in whatever colour they land
   in — see CategoryIconHelper for why they are not emoji */
.ico { flex: none; color: var(--gold); }
.chip .ico { width: 17px; height: 17px; }

/* The plan block's one action (2026-09-16): buy credits, in gold. */
.act__buy { align-self: stretch; justify-content: center; margin-top: 4px; }

/* ------------------------------------------------ the page after paying ----
   One line and one button under the mark. The line is the fact itself
   ("Срібний активний до 16 жовтня"), so it is set a size down from the door's
   four-word h1 to stay on two lines in every language. */
.billing-done h1 { font-size: 26px; line-height: 1.22; margin: 0 0 26px; text-wrap: balance; }
.billing-done .lede { margin: -12px 0 24px; }
.billing-done [hidden] { display: none; }

/* ------------------------------------------------------- the notice pop ----
   A billing result (owner, 2026-09-17: the old strip "на повідомлення не
   схоже"). Over the page, never pushing it: a status mark, one sentence, the
   one action it offers, and a close. The checkbox is the close — no script. */
.note-pop { position: fixed; z-index: 60; top: 84px; left: 50%; transform: translateX(-50%);
  width: min(640px, calc(100vw - 24px)); animation: note-in .22s ease-out both; }
.note-pop:has(.note-pop__shut:checked), .note-pop__shut:checked + .note-pop__box { display: none; }
.note-pop + .note-pop { top: 170px; }
.note-pop__box { display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 18px;
  border-radius: var(--r-lg); background: var(--panel-2); border: 1px solid var(--edge-2);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04); }
.note-pop--ok .note-pop__box { border-color: color-mix(in srgb, var(--worth) 45%, var(--edge-2)); }
.note-pop--warn .note-pop__box { border-color: color-mix(in srgb, var(--alarm) 50%, var(--edge-2)); }
.note-pop__mark { flex: none; display: grid; place-items: center; color: var(--worth); }
.note-pop--warn .note-pop__mark { color: #F0A69C; }
.note-pop__text { flex: 1; margin: 0; font: 400 16px/1.45 var(--serif); color: var(--bone); }
.note-pop__form { margin: 0; flex: none; }
.note-pop__act { height: 38px; padding: 0 14px; font-size: 13.5px; white-space: nowrap; }
.note-pop__x { flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--r-pill); color: var(--mute); cursor: pointer;
  transition: background .15s, color .15s, transform .1s; }
.note-pop__x:hover { background: var(--panel-3); color: var(--bone); }
.note-pop__x:active { transform: scale(.92); }
@keyframes note-in { from { opacity: 0; transform: translate(-50%, -8px); } }

/* A GOOD-NEWS NOTICE SHOWS ITSELF OUT (owner, 2026-09-17, п. 188: "ці
   повідомлення не повинні висіти вічно, вони мають зникати через час").

   Six seconds of stillness, then a short fade, and after it the notice is not
   just transparent but `visibility: hidden` — an invisible box that still ate
   clicks over the top of the page would be worse than one you can see.

   NO SCRIPT, on purpose: the close is already a checkbox and the whole notice
   is already plain HTML, so adding a timer in JavaScript would make one
   behaviour depend on two mechanisms.

   IT PAUSES WHEN SOMEBODY IS READING IT. :hover for the pointer, :focus-within
   for the keyboard — reach the × or the action button and the clock stops.

   WHAT DOES **NOT** FADE, and this is the whole point of the class being put on
   from the template rather than on every .note-pop here:
     - `.note-pop--warn`  — an alert. A refusal, a failed payment, a warning
       about money: those wait to be dismissed by the person they concern.
     - a notice carrying an ACTION (`--act`, the "resume" button) — fading it
       would take the action away with it. */
.note-pop--fade { animation: note-in .22s ease-out both, note-out .5s ease-in 6s both; }
.note-pop--fade:hover, .note-pop--fade:focus-within { animation-play-state: running, paused; }
@keyframes note-out { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .note-pop { animation: none; }
  /* Still goes away — it just goes away without moving. Same six seconds, then
     one step. "Reduce motion" is a request about movement, not a request to be
     left with a notice on the screen for the rest of the visit. */
  .note-pop--fade { animation: note-gone .01s steps(1, end) 6s both; }
  .note-pop--fade:hover, .note-pop--fade:focus-within { animation-play-state: paused; }
  @keyframes note-gone { to { opacity: 0; visibility: hidden; } }
}
@media (max-width: 620px) {
  .note-pop { top: 12px; }
  .note-pop__box { flex-wrap: wrap; }
  .note-pop__text { flex-basis: calc(100% - 90px); }
  .note-pop__form { order: 3; flex-basis: 100%; }
  .note-pop__act { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------- the diamond button ----
   "Розширити план" (owner, 2026-09-17: "кнопку треба зробити діамантовою").
   Cold, faceted, clear — never mistaken for the gold of "Купити кредити". The
   facets are gradients cut at hard stops; the gleam crosses on hover. */
.btn--diamond { position: relative; overflow: hidden; height: 48px; padding: 0 22px;
  font-size: 14px; color: #06121C; border-color: rgba(214, 238, 255, .7);
  background:
    linear-gradient(115deg, transparent 0 22%, rgba(255, 255, 255, .55) 22% 30%, transparent 30% 100%),
    linear-gradient(62deg, rgba(255, 255, 255, .0) 0 48%, rgba(255, 255, 255, .35) 48% 56%, rgba(255, 255, 255, 0) 56%),
    conic-gradient(from 210deg at 62% 40%, #EAF6FF, #B7DDF6, #F6FBFF, #9ECDEB, #DDF1FF, #C4E6FA, #EAF6FF);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(20, 60, 90, .45),
    0 0 0 1px rgba(160, 210, 240, .15), 0 6px 22px rgba(120, 190, 235, .18);
  transition: filter .15s, transform .1s, box-shadow .15s; }
.btn--diamond::after { content: ""; position: absolute; inset: -40% auto -40% -60%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: skewX(-20deg); transition: left .6s ease; pointer-events: none; }
.btn--diamond:hover { color: #06121C; filter: brightness(1.05) saturate(1.1);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(20, 60, 90, .45),
    0 0 0 1px rgba(180, 225, 250, .35), 0 8px 28px rgba(140, 205, 245, .32); }
.btn--diamond:hover::after { left: 130%; }
.btn--diamond:active { transform: translateY(1px); filter: brightness(.94); }
@media (prefers-reduced-motion: reduce) { .btn--diamond::after { display: none; } }
.act__up { align-self: stretch; justify-content: center; }

/* ------------------------------------------------- the last four events ----
   Under the credit count on /account: what moved, by how much, and when. */
.chist { margin: 16px 0 4px; padding: 0; list-style: none; border-top: 1px solid var(--edge); }
.chist__row { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 10px 0;
  border-bottom: 1px solid var(--edge); }
.chist__what { font: 400 14.5px/1.4 var(--serif); color: var(--bone-dim); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chist__what a { color: var(--bone); text-decoration: underline; text-decoration-color: var(--edge-2);
  text-underline-offset: 3px; }
.chist__what a:hover { text-decoration-color: var(--gold); }
.chist__n { font: 700 15px/1.4 var(--mono); text-align: right; color: var(--mute); }
.chist__n--plus { color: var(--worth); }
.chist__when { grid-column: 1 / -1; font: 400 12.5px/1.3 var(--mono); color: var(--mute); }
.chist__h { margin: 18px 0 0; font: 600 12.5px/1 var(--mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--mute); }

/* THE PLAN-CHANGE CONFIRM (S3). One card, the two metals side by side, the
   figures as rows — the sum to pay is the one large number, the button the one
   gold thing. */
.gate__card.planchg { max-width: 520px; text-align: left; }
.planchg h1 { margin: 14px 0 12px; }
.planchg__plates { display: flex; align-items: center; gap: 10px; margin: 0; }
.planchg__arrow { color: var(--ink-2); font-size: 18px; }
.planchg__rows { margin: 0 0 20px; padding: 0; }
.planchg__rows > div { display: grid; grid-template-columns: minmax(96px, 30%) 1fr; gap: 12px;
  padding: 11px 0; border-top: 1px solid var(--edge); }
.planchg__rows dt { color: var(--ink-2); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; }
.planchg__rows dd { margin: 0; color: var(--bone); font-size: 15px; line-height: 1.45; }
.planchg__sum { font-size: 26px !important; font-weight: 700; color: var(--gold-bright) !important; }
.planchg__sum small { display: block; font-size: 13px; font-weight: 400; color: var(--ink-2); }
.planchg__warn { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--gold-deep);
  border-radius: 8px; background: rgba(201,162,39,.08); color: var(--bone); font-size: 15px; }
.planchg__warn p { margin: 0 0 6px; }
.planchg__stores { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 !important; }
.planchg__stores a { color: var(--gold-bright); }
.planchg__back { margin-top: 10px; }

/* ==========================================================================
   S5 (2026-09-17) — THE PLAQUE, THE "?" AND THE ACCOUNT PAGE
   ========================================================================== */

/* Defaults for anything that wears a `.plan--<material>` class without being a
   storefront card. :where() carries no specificity, so every material rule
   above (which sets the same five properties) wins over these. */
:where(.plaque, .acctplan, .paid, .paysheet) {
  --m-base: #49566A; --m-mid: #8B95A2; --m-bright: #D3DAE3; --m-ink: #0B0E12;
  --m-tex: url("/assets/plans/slate-dfb1b285.webp"); --m-lift: .42; --m-lift-2: .30;
}

/* THE PLAQUE — the plan, said in its own material (owner, п. 140.1: "красиво,
   гарно, можна з переливами — для всіх планів"). The storefront's nameplate
   recipe at the size of a card: baked texture, the white wash that keeps the
   ink above 4.5:1, a bright top facet and a dark bottom one. The light that
   crosses it is one soft band on a long, slow loop; with reduced motion it
   simply rests at the left edge of the plate. */
.plaque {
  position: relative; overflow: hidden; isolation: isolate; flex: none;
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 18px;
  width: min(100%, 380px); padding: 16px 20px 16px; border-radius: 14px;
  color: var(--m-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, var(--m-lift)), rgba(255, 255, 255, var(--m-lift-2)) 55%,
      rgba(255, 255, 255, calc(var(--m-lift-2) - .04))),
    var(--m-tex) center / 720px auto, var(--m-mid);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .5),
    0 1px 0 rgba(0, 0, 0, .7),
    0 22px 60px -30px color-mix(in srgb, var(--m-mid) 85%, transparent);
}
.plaque::after {
  content: ""; position: absolute; inset: -20% -60%; z-index: -1; pointer-events: none;
  background: linear-gradient(112deg, transparent 42%, rgba(255, 255, 255, .0) 44%,
    rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, 0) 56%, transparent 58%);
  transform: translateX(-38%); animation: plaque-sheen 7s cubic-bezier(.45, 0, .25, 1) infinite;
}
@keyframes plaque-sheen {
  0%, 18%  { transform: translateX(-38%); }
  62%, 100% { transform: translateX(38%); }
}
.plaque__k { grid-column: 1 / -1; font: 700 10.5px/1 var(--mono); letter-spacing: .2em;
  text-transform: uppercase; }
.plaque__name { font: 800 clamp(26px, 2.6vw, 34px)/1 var(--display); letter-spacing: -.02em;
  text-transform: uppercase; text-shadow: 0 1px 0 rgba(255, 255, 255, .28); overflow-wrap: anywhere; }
.plaque__term { justify-self: end; align-self: end; white-space: nowrap;
  font: 700 12.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  padding: 7px 11px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--m-ink) 88%, transparent); color: var(--m-bright);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.plaque__when { grid-column: 1 / -1; margin-top: 6px; padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--m-ink) 24%, transparent);
  font: 600 13px/1.35 var(--serif); }

.accthero__row { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 22px 40px; flex-wrap: wrap; }
.accthero__who { min-width: min(100%, 320px); flex: 1 1 320px; }
.accthero .hero__sub { max-width: 46ch; }

/* the pill in "Your plan": the plate in the plan's metal, and how long it is */
.acctplan .plan__plate { min-height: 32px; font-size: 14.5px; }
.acctplan__term { font: 700 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 8px 11px; border-radius: var(--r-pill); color: var(--m-bright);
  border: 1px solid color-mix(in srgb, var(--m-mid) 46%, transparent);
  background: color-mix(in srgb, var(--m-base) 26%, var(--panel-2)); }
.acctplan__note { font-size: 14px; color: var(--bone-dim); }
.acctfield__k, .acctfacts dt { display: flex; align-items: center; gap: 7px; font-size: 11.5px; }
.acctfacts dd { font-size: 15.5px; }
.acctquota__k, .acctquota__note { font-size: 14px; }
.panel--danger .acctlist li { font-size: 14.5px; }

/* leaving is a real button, on the far side of the row, quiet until touched */
.acctactions__leave { margin-left: auto !important; }
.btn--leave { height: 48px; padding: 0 20px; font-size: 14px; }
.btn--leave:hover { color: #FFD9D4; border-color: color-mix(in srgb, #D2564A 60%, transparent);
  background: color-mix(in srgb, #D2564A 14%, var(--panel-2)); }
@media (max-width: 560px) { .acctactions__leave { margin-left: 0 !important; } }

/* THE "?" (owner's principle, п. 134): the explanation costs the page one
   16px circle. The bubble is ours — inside the surface, styled, reachable by
   hover, focus and tap — not the browser's title="". */
.qtip { position: relative; display: inline-grid; place-items: center; flex: none;
  width: 17px; height: 17px; border-radius: 50%; cursor: help;
  border: 1px solid var(--edge-2); background: var(--panel-2); color: var(--bone-dim);
  font: 700 10.5px/1 var(--mono); letter-spacing: 0; text-transform: none;
  transition: color .15s, border-color .15s, background .15s; }
.qtip:hover, .qtip:focus-visible { color: #241C05; background: var(--gold-bright);
  border-color: var(--gold-bright); outline: none; }
.qtip__body { position: absolute; left: 50%; bottom: calc(100% + 9px); z-index: 20;
  width: max-content; max-width: min(300px, 72vw); transform: translateX(-24px);
  padding: 10px 13px; border-radius: 10px; text-align: left; white-space: normal;
  background: var(--panel-3); border: 1px solid var(--edge-2); color: var(--bone);
  font: 400 13.5px/1.5 var(--serif); letter-spacing: 0; text-transform: none;
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .9);
  opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none; }
.qtip:hover .qtip__body, .qtip:focus .qtip__body, .qtip:focus-within .qtip__body {
  opacity: 1; visibility: visible; }
/* п. 230: a card's own "?" — pinned to its top-right corner, level with the
   nameplate, and its bubble opens DOWN and to the LEFT: the card sits at the
   right edge of the page, and a bubble growing up and rightwards was cut off by
   the window. One line per item, not a run-on sentence. */
.qtip--corner { position: absolute; top: 18px; right: 16px; width: 20px; height: 20px;
  font-size: 11.5px; }
.qtip--corner .qtip__body { left: auto; right: -4px; bottom: auto; top: calc(100% + 9px);
  transform: none; width: max-content; max-width: min(300px, calc(100vw - 32px)); }
.qtip__line { display: block; }
.qtip__line + .qtip__line { margin-top: 4px; }

/* /billing/credits — the calculator and nothing else */
.creditsonly { margin-top: 34px; }
.creditsonly .ladder__head { display: none; }
.creditsonly__back { margin: 22px 0 0; font: 500 13px/1 var(--mono); letter-spacing: .03em; }
.creditsonly__back a { color: var(--mute); }
.creditsonly__back a:hover { color: var(--gold-bright); }

@media (prefers-reduced-motion: reduce) {
  .plaque::after { animation: none; }
}

/* ---------------------------------------------------------------------------
   /billing/success — THE MOMENT AFTER PAYING (owner, п. 130). Still one fact
   and one button; the fact now wears what was bought. Waiting: the dark seal
   with the turning arc, as before. Settled ([data-paid="true"]): the seal
   fills with the plan's baked material, light crosses it, a halo in the
   metal's colour opens behind it, the nameplate drops in, and twelve sparks
   leave once. Nothing loops except the slow sheen.
   --------------------------------------------------------------------------- */
.paid { text-align: center; max-width: 460px; }
.paid .btn--wide { width: 100%; }
.paid__stage { position: relative; display: grid; place-items: center; height: 176px; margin: 0 0 8px; }
.paid__halo { position: absolute; width: 330px; height: 330px; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--m-mid) 42%, transparent),
    color-mix(in srgb, var(--m-base) 16%, transparent) 55%, transparent 72%);
  transition: opacity .9s ease; pointer-events: none; }
body .paid.paid .paid__seal { position: relative; width: 132px; height: 132px; margin: 0; border-radius: 50%;
  overflow: hidden; isolation: isolate;
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--edge-2), 0 18px 50px -20px rgba(0, 0, 0, .9);
  transition: box-shadow .6s ease; }
body .paid.paid .paid__seal .gate__ring { width: 132px; height: 132px; }
body .paid.paid .paid__seal .gate__logo { position: relative; z-index: 2; width: 62px; height: 62px;
  padding: 17px; box-sizing: content-box; border-radius: 50%;
  background: radial-gradient(closest-side, #0B0D11 78%, #07080A);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 1px 0 1px rgba(255, 255, 255, .28),
    inset 0 2px 8px rgba(0, 0, 0, .8); filter: none; }

[data-paid="true"] .paid__halo { opacity: 1; }
body [data-paid="true"].paid.paid .paid__seal {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, calc(var(--m-lift) + .12)), rgba(255, 255, 255, var(--m-lift-2)) 52%,
      rgba(0, 0, 0, .12)),
    var(--m-tex) center / 420px auto, var(--m-mid);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .65), inset 0 -2px 0 rgba(0, 0, 0, .5),
    0 0 0 1px rgba(0, 0, 0, .7), 0 0 0 5px color-mix(in srgb, var(--m-mid) 26%, transparent),
    0 26px 70px -22px color-mix(in srgb, var(--m-mid) 90%, transparent);
  animation: paid-pop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
body [data-paid="true"].paid.paid .paid__seal::after { content: ""; position: absolute; inset: -30% -70%; z-index: 1;
  background: linear-gradient(112deg, transparent 43%, rgba(255, 255, 255, .55) 50%, transparent 57%);
  transform: translateX(-40%); animation: plaque-sheen 5.5s cubic-bezier(.45, 0, .25, 1) .5s infinite; }
@keyframes paid-pop { from { transform: scale(.82); } to { transform: scale(1); } }

/* twelve sparks, thirty degrees apart, leaving once */
.paid__sparks { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.paid__sparks i { grid-area: 1 / 1; width: 7px; height: 7px; opacity: 0; border-radius: 1.5px;
  background: var(--m-bright);
  box-shadow: 0 0 10px color-mix(in srgb, var(--m-bright) 80%, transparent);
  transform: rotate(calc(var(--n) * 30deg)) translateY(-70px) rotate(45deg) scale(.4); }
.paid__sparks i:nth-child(odd) { width: 5px; height: 5px; background: #fff; }
[data-paid="true"] .paid__sparks i {
  animation: paid-spark 1.5s cubic-bezier(.15, .7, .3, 1) calc(.12s + var(--n) * .025s) both; }
@keyframes paid-spark {
  0%   { opacity: 0; transform: rotate(calc(var(--n) * 30deg)) translateY(-62px) rotate(45deg) scale(.3); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(calc(var(--n) * 30deg)) translateY(-128px) rotate(45deg) scale(1); }
}

/* the nameplate: what was bought, and for how long */
.paid__plate { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: center; margin: 0 0 18px; animation: paid-rise .6s ease .15s both; }
.paid__plate[hidden] { display: none; }
.paid__name { display: inline-flex; align-items: center; min-height: 40px; padding: 9px 18px;
  border-radius: 8px; color: var(--m-ink);
  font: 800 19px/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, var(--m-lift)), rgba(255, 255, 255, var(--m-lift-2)) 55%,
      rgba(255, 255, 255, calc(var(--m-lift-2) - .04))),
    var(--m-tex) center / 420px auto, var(--m-mid);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .5),
    0 1px 0 rgba(0, 0, 0, .7), 0 10px 24px -12px color-mix(in srgb, var(--m-base) 90%, transparent); }
.paid__term { font: 700 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 9px 12px; border-radius: var(--r-pill); color: var(--m-bright);
  border: 1px solid color-mix(in srgb, var(--m-mid) 46%, transparent);
  background: color-mix(in srgb, var(--m-base) 26%, var(--panel-2)); }
.paid__term:empty { display: none; }
@keyframes paid-rise { from { opacity: 0; transform: translateY(8px); } }
.paid.billing-done h1 { font-size: 28px; margin-bottom: 28px; }

@media (max-height: 760px) {
  .paid__stage { height: 138px; }
  body .paid.paid .paid__seal, body .paid.paid .paid__seal .gate__ring { width: 104px; height: 104px; }
  body .paid.paid .paid__seal .gate__logo { width: 48px; height: 48px; padding: 13px; }
  .paid__halo { width: 250px; height: 250px; }
}
@media (prefers-reduced-motion: reduce) {
  body [data-paid="true"].paid.paid .paid__seal, body [data-paid="true"].paid.paid .paid__seal::after,
  [data-paid="true"] .paid__sparks i, .paid__plate { animation: none; }
}

/* ---------------------------------------------------------------------------
   THE PAY SHEET (owner, 2026-09-17, Q8) — ours around Paddle's inline form.
   Paddle's own fields cannot be styled from here (only theme: dark); what is
   ours is everything around them: the mark, the order on the plan's material,
   the sums. Two columns on a wide screen, the order above the form on a
   narrow one. The sheet scrolls as a whole, so Paddle's footer — which its
   terms require to stay visible — is never clipped.
   --------------------------------------------------------------------------- */
.paysheet {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0;
  border: 0; color: var(--bone); overflow-y: auto;
  background:
    radial-gradient(900px 480px at 18% -10%, color-mix(in srgb, var(--m-base) 38%, transparent), transparent 70%),
    var(--bg); }
.paysheet::backdrop { background: var(--bg); }
.paysheet__in { max-width: 1080px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px) 40px; }
.paysheet__head { display: flex; align-items: center; gap: 16px; height: 72px;
  border-bottom: 1px solid var(--edge); margin-bottom: clamp(20px, 4vh, 40px); }
.paysheet__brand { display: flex; align-items: center; gap: 11px;
  font: 800 17px/1 var(--display); letter-spacing: .14em; color: var(--bone); }
.paysheet__brand img { width: 30px; height: 30px; }
.paysheet__secure { margin-left: auto; font: 500 12px/1.3 var(--mono); letter-spacing: .04em;
  color: var(--mute); text-align: right; }
.paysheet__close { display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 50%; cursor: pointer; color: var(--bone-dim);
  background: var(--panel-2); border: 1px solid var(--edge-2);
  transition: color .15s, border-color .15s, background .15s, transform .08s; }
.paysheet__close:hover { color: var(--gold-bright); border-color: var(--gold-deep); background: var(--panel-3); }
.paysheet__close:active { transform: translateY(1px); }
.paysheet__close:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

.paysheet__grid { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px); align-items: start; }
.paysheet__order { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }
.paysheet__k { margin: 0; font: 500 11.5px/1 var(--mono); letter-spacing: .22em;
  text-transform: uppercase; color: var(--mute); }
.paysheet__plaque { width: 100%; }
.paysheet__sum { margin: 0; display: flex; flex-direction: column;
  border: 1px solid var(--edge); border-radius: var(--r-md); background: var(--panel); }
.paysheet__sum > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--edge); }
.paysheet__sum > div:first-child { border-top: 0; }
.paysheet__sum dt { font: 400 14.5px/1.3 var(--serif); color: var(--bone-dim); }
.paysheet__sum dd { margin: 0; font: 600 15px/1 var(--mono); color: var(--bone);
  font-variant-numeric: tabular-nums; }
.paysheet__total dt { color: var(--bone); font-weight: 600; }
.paysheet__total dd { font: 800 24px/1 var(--display); letter-spacing: -.02em; color: var(--m-bright); }
.paysheet__recur { margin: 0; font: 400 14px/1.5 var(--serif); color: var(--bone-dim); }
.paysheet__recur:empty { display: none; }
.paysheet__fine { margin: 0; font: 400 12.5px/1.55 var(--serif); color: var(--mute); }
.paysheet__fine a { color: var(--bone-dim); text-decoration: underline;
  text-decoration-color: var(--edge-2); text-underline-offset: 3px; }
.paysheet__fine a:hover { color: var(--gold-bright); }
.paysheet__form { min-width: 0; min-height: 460px; padding: clamp(10px, 2vw, 22px);
  border: 1px solid var(--edge); border-radius: var(--r-lg); background: var(--panel); }
/* S8 (п. 170): ONE white card for Paddle's light form — no dark field inside a
   light frame. Our labels on the left are larger and brighter. */
.paysheet__right { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.paysheet__lang { align-self: flex-end; display: inline-flex; align-items: center; gap: 9px;
  font: 500 13px/1 var(--mono); letter-spacing: .04em; color: #B4BAC2; }
.paysheet__lang select { height: 36px; padding: 0 30px 0 12px; border-radius: var(--r-sm);
  font: 500 14px/1 var(--serif); color: var(--bone); background-color: var(--panel-2);
  border: 1px solid var(--edge-2); cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-bright) 50%), linear-gradient(135deg, var(--gold-bright) 50%, transparent 50%);
  background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px; background-size: 5px 5px; background-repeat: no-repeat; }
.paysheet__lang select:hover { border-color: var(--gold-deep); }
.paysheet__lang select:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.paysheet .paysheet__form { background: #FFFFFF; border-color: #FFFFFF; }
.paysheet .paysheet__form .paysheet__wait { color: #4A4F57; }
.paysheet .paysheet__k { font-size: 12.5px; color: #B4BAC2; }
.paysheet .paysheet__sum dt { font-size: 15.5px; color: var(--bone); }
.paysheet .paysheet__sum dd { font-size: 16px; }
.paysheet .paysheet__recur { font: 400 15.5px/1.5 var(--display); color: var(--bone); }
.paysheet .paysheet__fine { font: 400 14px/1.55 var(--display); color: #C9C4BA; }
.paysheet .paysheet__fine a { color: var(--bone); text-decoration-color: var(--gold-deep); }
.paysheet .paysheet__secure { font-size: 13px; color: #B4BAC2; }
/* THE FRAME MUST DECLARE THE SCHEME OF WHAT IS INSIDE IT. This page is
   `color-scheme: dark`; Paddle's document is not. When the two differ the
   browser paints an OPAQUE WHITE canvas behind the iframe (CSS Color Adjust,
   so that a light document is never shown over a dark one by accident) — and
   Paddle's dark theme, which draws light labels on a transparent page, became
   light labels on white. Matching the embedded document's scheme makes the
   canvas transparent again, and the dark form sits on our panel. */
.gistil-paddle-frame iframe { color-scheme: light; display: block; background: #FFFFFF; }
.paysheet__wait { margin: 40px 0; text-align: center; font: 400 14.5px/1.5 var(--serif); color: var(--mute); }
.paysheet__wait[hidden] { display: none; }
@media (max-width: 820px) {
  .paysheet__grid { grid-template-columns: 1fr; }
  .paysheet__order { position: static; }
  .paysheet__secure { display: none; }
  .paysheet__form { padding: 6px; }
}

/* ============================================================
   CONFIRMATION WINDOW (п. 181) — app/javascript/controllers/lib/confirm_dialog.js
   ------------------------------------------------------------
   Replaces the browser's confirm(). A dark card over a dimmed page, a hairline
   of the plan's metal along the top, the question, one line of what happens
   and when, two buttons in the site's language. The gold one is "keep" — the
   answer that changes nothing — so the page still has one gold thing on it.
   ============================================================ */
.gdlg-lock, .gdlg-lock body { overflow: hidden; }
.gdlg {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px;
  background: rgba(4, 5, 8, .72); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .16s ease;
}
.gdlg.is-on { opacity: 1; }
.gdlg__card {
  --dl: var(--gold);
  position: relative; width: min(460px, 100%); padding: 28px 28px 24px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--dl) 7%, var(--panel-2)), var(--panel));
  border: 1px solid var(--edge-2); border-radius: 16px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .04);
  transform: translateY(8px) scale(.985); transition: transform .18s ease;
}
.gdlg__card::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--dl), transparent);
}
.gdlg.is-on .gdlg__card { transform: none; }
.gdlg__card--copper { --dl: #B5683A; }
.gdlg__card--silver { --dl: #9AA3AE; }
.gdlg__card--gold   { --dl: #C9A227; }
.gdlg__card--smart  { --dl: #21A89C; }
.gdlg__card--super  { --dl: #7D6EF0; }
.gdlg__title { font: 700 22px/1.25 var(--display); letter-spacing: -.01em; color: var(--bone); margin: 0; }
.gdlg__detail { margin: 12px 0 0; font: 400 16px/1.55 var(--serif, Georgia, serif); color: var(--bone-dim); }
.gdlg__row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.gdlg__row .btn { height: 42px; padding: 0 20px; font-size: 13px; }
@media (max-width: 480px) {
  .gdlg__row { flex-direction: column-reverse; }
  .gdlg__row .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .gdlg, .gdlg__card { transition: none; }
}

/* ---- S8 (п. 179): all credits, then the arithmetic --------------------------
   One bar in three parts — plan window, carried over by an upgrade, bought —
   in the order they are listed under it. The dot beside each line is the
   same colour as its part, so the bar reads without a legend. */
.cbar { display: flex; height: 8px; border-radius: var(--r-pill); overflow: hidden;
  background: var(--track); gap: 2px; }
.cbar__seg { display: block; height: 100%; min-width: 3px; }
.cbar__seg--plan    { background: var(--gold); }
.cbar__seg--carried { background: #B98A4E; }
.cbar__seg--bought  { background: var(--accent); }
.cmath { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; }
.cmath__row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; column-gap: 9px;
  align-items: baseline; font: 400 14px/1.45 var(--serif); color: var(--bone-dim); }
.cmath__dot { width: 9px; height: 9px; border-radius: 3px; align-self: center; }
.cmath__dot--plan    { background: var(--gold); }
.cmath__dot--carried { background: #B98A4E; }
.cmath__dot--bought  { background: var(--accent); }
.cmath__k { color: var(--bone-dim); }
.cmath__n { font: 700 14px/1.45 var(--mono); color: var(--bone); text-align: right; }
.cmath__when { grid-column: 2 / 4; font-size: 13px; color: #A3A9B1; }
.cmath__when:empty { display: none; }

/* ---- S8 (п. 183): the line that makes a button an agreement ----------------- */
.tconsent { margin: 10px 0 0; font: 400 13px/1.5 var(--serif); color: #A3A9B1; text-align: center; }
.tconsent a { color: var(--bone-dim); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.tconsent a:hover { color: var(--gold-bright); }
.tconsent--gate { margin-top: 12px; }
.tconsent--shelf { margin-top: 16px; }
.tnotice { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 16px;
  padding: 10px 14px; border: 1px solid var(--edge-2); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--gold) 5%, var(--panel)); }
.tnotice__text { flex: 1 1 280px; margin: 0; font: 400 14px/1.5 var(--serif); color: var(--bone-dim); }
.tnotice__text a { color: var(--bone); text-decoration: underline; text-underline-offset: 2px; }
.tnotice__form { margin: 0; }
.tnotice__ok { height: 34px; padding: 0 14px; font-size: 13px; }

/* ============================================================
   WHAT THIS PLAN GIVES (п. 192) — plan_info_controller.js + shared/_plan_info
   ------------------------------------------------------------
   The plate and the plaque are buttons now: a lift on hover, a press on
   :active, a ring for the keyboard. The card is the confirmation window's
   card (.gdlg__card) with a close cross and a short list of facts.
   ============================================================ */
.plate--btn, .plaque--btn {
  border: 0; cursor: pointer; text-align: left;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.plate--btn:hover, .plaque--btn:hover { transform: translateY(-1px); filter: brightness(1.08) saturate(1.05); }
.plate--btn:active, .plaque--btn:active { transform: translateY(1px); filter: brightness(.92); }
.plate--btn:focus-visible, .plaque--btn:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}
.pinfo { width: min(480px, 100%); padding-top: 26px; }
.pinfo__x {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--edge-2); background: transparent; color: var(--bone-dim);
  font: 400 20px/1 var(--display); cursor: pointer; transition: background .14s ease, color .14s ease;
}
.pinfo__x:hover { background: var(--panel-2); color: var(--bone); }
.pinfo__x:active { transform: translateY(1px); }
.pinfo__x:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pinfo__k { margin: 0 0 10px; font: 700 10.5px/1 var(--mono); letter-spacing: .2em;
  text-transform: uppercase; color: var(--dl); }
.pinfo__title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-right: 36px; }
.pinfo__title .plate { font-size: 15px; min-height: 32px; }
.pinfo__term { font: 700 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--bone-dim); }
.pinfo__list { margin: 18px 0 0; display: grid; gap: 0; }
.pinfo__list > div { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 14px;
  padding: 11px 0; border-top: 1px solid var(--edge); }
.pinfo__list dt { font: 600 13px/1.45 var(--display); color: var(--bone-dim); }
.pinfo__list dd { margin: 0; font: 400 15px/1.45 var(--serif, Georgia, serif); color: var(--bone); }
.pinfo__list dd a { color: var(--gold); }
@media (max-width: 480px) {
  .pinfo__list > div { grid-template-columns: 1fr; gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .plate--btn, .plaque--btn, .pinfo__x { transition: none; }
}


/* ============================================================================
   /account IN THREE BLOCKS (owner, 22.09.2026 — п. 252 "все блоки сливаются",
   п. 258 the leave button, п. 259 one form, п. 257 resume).
   Section headings a size up with room between sections; the plan card is the
   one with an accent (its material's rim and a warm wash); the settings card is
   one form with one Save; the deletion block sits apart after a wider gap.
   ========================================================================== */
.acctsec { margin-top: 64px; }
.acctsec--danger { margin-top: 88px; }
.rule--sec { margin: 0 0 18px; }
.rule--sec::before { width: 7px; height: 7px; }
.rule--sec h2 { font: 700 15px/1.1 var(--display); letter-spacing: .02em; text-transform: none; color: var(--bone); }
.rule--sec > span:not(.seg) { font-size: 12.5px; }
.rule--danger::before { background: #D2564A; }
.rule--danger h2 { color: #F0B4AC; }

.panel--plan { position: relative; overflow: hidden; padding: 28px 26px 22px; border-color: color-mix(in srgb, var(--m-mid, var(--gold)) 60%, var(--edge));
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--m-mid, var(--gold)) 10%, transparent), transparent 60%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: var(--depth), 0 0 0 1px color-mix(in srgb, var(--m-mid, var(--gold)) 10%, transparent), 0 18px 50px -24px color-mix(in srgb, var(--m-mid, var(--gold)) 45%, transparent); }
/* the plan card's milled edge, in the plan's own material (as on the storefront) */
.panel--plan::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--m-tex) center / 720px auto, var(--m-mid, var(--gold)); opacity: .9; }
.acctplancard { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.acctplancard__side { padding-left: 26px; border-left: 1px solid var(--edge); }
.acctplancard__side .chist__h { margin-top: 0; }

.acctactions--plan { justify-content: space-between; }
.acctactions__go { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* three buttons: the two that move you on, then «Відписатися» alone, centred */
.acctactions--three { flex-direction: column; align-items: stretch; gap: 14px; }
.acctactions--three .acctactions__go { justify-content: flex-start; }
.acctactions--three .acctactions__leave { margin: 0 auto !important; }

.panel--settings { padding: 24px 26px 22px; }
.acctsettings { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.acctsettings__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.acctsettings__col + .acctsettings__col { padding-left: 30px; border-left: 1px solid var(--edge); }
.acctsettings h3 { margin: 0; }
.acctfacts--tight { margin-top: 4px; padding-top: 14px; }
.acctfield__hint { display: block; margin-top: 2px; font: 400 12.5px/1.45 var(--serif); color: var(--mute); }
.acctfield--set { border: 0; padding: 0; margin: 0; min-width: 0; }
.acctfield--set legend { padding: 0; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.acctsave { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--edge); }
.acctsave__btn[disabled] { opacity: .45; cursor: default; filter: grayscale(.3); }
.acctsave__ok { font: 600 13px/1.2 var(--mono); color: #8fe3b9; letter-spacing: .04em; }

@media (max-width: 760px) {
  .acctplancard, .acctsettings { grid-template-columns: 1fr; gap: 22px; }
  .acctplancard__side { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--edge); }
  .acctsettings__col + .acctsettings__col { padding-left: 0; border-left: 0; padding-top: 20px; border-top: 1px solid var(--edge); }
  .acctsec { margin-top: 48px; }
  .acctsec--danger { margin-top: 64px; }
  .panel--plan, .panel--settings { padding: 20px 18px; }
  .acctactions--plan { flex-direction: column; align-items: stretch; }
  .acctactions__go > * { flex: 1 1 auto; text-align: center; }
  .acctactions__leave { margin: 0 auto !important; }
}


/* ============================================================================
   п. 251 — THE TOP-UP DIAL, variant C «Чиста рамка» (owner, 22.09.2026;
   mockups_2026-09-22/p251_topup_calculator.html). The field is the sum bought,
   quiet; «До сплати» with the buyer's tax is the card's biggest figure, white
   in a bright frame; «Отримуєш» gold and one step quieter. Copied from the
   approved mock (only variant C). The p.235 wells (.tgrp) above are unused now.
   ========================================================================== */
.nx-in { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.nx-in__lbl { font: 400 14px/1.3 var(--serif); color: var(--bone-dim); }
.nx-field { display: inline-flex; align-items: baseline; gap: 2px; padding: 5px 12px 6px 11px; border-radius: 9px; cursor: text;
  border: 1px solid color-mix(in srgb, var(--m-mid) 34%, var(--edge-2)); background: rgba(0,0,0,.38);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.04); transition: border-color .15s ease; }
.nx-field:hover { border-color: color-mix(in srgb, var(--m-mid) 55%, var(--edge-2)); }
.nx-field:focus-within { border-color: var(--m-bright); box-shadow: inset 0 2px 5px rgba(0,0,0,.55), 0 0 0 3px color-mix(in srgb, var(--m-mid) 30%, transparent); }
.nx-field span { font: 600 18px/1 var(--display); color: var(--mute); }
.nx-field input { width: 4.1ch; border: 0; background: transparent; padding: 0; margin: 0;
  font: 700 26px/1.1 var(--display); letter-spacing: -0.025em; color: var(--bone-dim); font-variant-numeric: tabular-nums; caret-color: var(--m-bright); }
.nx-in__hint { font: 500 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute-2); }
.nx .topup__range { margin-top: 12px; }

.nx-res { margin-top: 16px; display: grid; gap: 10px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: stretch; }
@container (max-width: 380px) { .nx-res { grid-template-columns: 1fr; } }

/* ---- Отримуєш: the secondary answer, gold kept but one step quieter ---- */
.get { min-width: 0; border-radius: 10px; padding: 11px 13px 12px;
  background: color-mix(in srgb, var(--gold) 5%, rgba(0,0,0,.30)); border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); }
.get__label, .pay__label { margin: 0 0 6px; display: flex; align-items: center; gap: 7px;
  font: 600 10px/1.2 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.get__label { color: color-mix(in srgb, var(--gold) 62%, var(--mute)); }
.get__label::before, .pay__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; }
.get__label::before { background: color-mix(in srgb, var(--gold) 75%, transparent); }
.get__main { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.get__num { font: 800 24px/1.1 var(--display); letter-spacing: -0.025em; color: var(--gold-bright); font-variant-numeric: tabular-nums; white-space: nowrap; }
.get__unit { font: 700 14px/1.2 var(--display); color: var(--bone); }
.get__sub { margin: 5px 0 0; font: 400 12.5px/1.45 var(--serif); color: var(--mute); }
.get__sub b { font: 600 11.5px/1 var(--mono); color: var(--bone-dim); white-space: nowrap; }

/* ---- До сплати: the main figure of the card. Geometry shared by all variants ---- */
.pay { min-width: 0; border-radius: 12px; padding: 12px 16px 13px; position: relative; overflow: hidden; }
.pay__main { margin: 0; height: 46px; display: flex; align-items: center; }
.pay__num { font: 800 42px/1.05 var(--display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay__sub { margin: 5px 0 0; min-height: 18px; font: 400 12.5px/1.45 var(--serif); }
.pay__sub b { font: 600 11.5px/1 var(--mono); white-space: nowrap; }
.pay__sub .nw { white-space: nowrap; }
.pay.is-in .pay__num, .pay.is-in .pay__sub { animation: payIn .32s cubic-bezier(.2,.7,.2,1) both; }
@keyframes payIn { from { opacity: 0; filter: blur(3px); transform: translateY(2px); } to { opacity: 1; filter: none; transform: none; } }

/* loading: the box keeps its exact size, the figure is a milled bar, nothing wrong is shown */
.sk { display: inline-block; height: 34px; width: 5.4ch; border-radius: 8px; font: 800 42px/1 var(--display);
  background: linear-gradient(90deg, var(--sk-a) 0%, var(--sk-b) 45%, var(--sk-a) 90%) 0 0 / 250% 100%;
  animation: skMove 1.4s linear infinite; }
.sk-line { display: inline; }
.sk-line::before { content: ""; display: inline-block; vertical-align: 1px; margin-right: 7px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: skPulse 1.1s ease-in-out infinite; }
@keyframes skMove { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes skPulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .sk, .sk-line::before, .pay.is-in .pay__num, .pay.is-in .pay__sub { animation: none; } }

/* ---------- C · «Чиста рамка»: dark well, bright bone frame, white figure ---------- */
.pay--c { --sk-a: rgba(242,238,230,.08); --sk-b: rgba(242,238,230,.22);
  background: rgba(0,0,0,.42);
  border: 1.5px solid color-mix(in srgb, var(--bone) 80%, transparent);
  box-shadow: 0 0 0 4px rgba(242,238,230,.06), inset 0 1px 0 rgba(255,255,255,.08); }
.pay--c .pay__label { color: var(--bone); }
.pay--c .pay__label::before { background: var(--bone); }
.pay--c .pay__num { color: #FFFFFF; }
.pay--c .pay__sub { color: var(--mute); }
.pay--c .pay__sub b { color: var(--bone-dim); }

/* п. 257: the dashboard plan card, renewal switched off — the date and the way back */
.act__ends { margin: 8px 0 8px; font: 400 13px/1.45 var(--serif); color: var(--mute); }
/* п. 263: last in the column, full width, the leave/resume look */
.act__resume-form { display: block; margin-top: 4px; }
.act__resume { width: 100%; justify-content: center; }
/* п. 251: the bar and the "working out" line have their own display; [hidden] must win */
.nx [hidden] { display: none !important; }

/* ============================================================================
   п. 261–262 (owner, 22.09.2026: "стрілочки, обводки не там, не стилізовані —
   сайт-однодневка"; "три різні тексти злиплися в одну кляксу"). /pricing,
   /billing/credits, /account and the checkout gate: no browser-drawn control
   left, one frame per field, one vertical rhythm.
   ========================================================================== */

/* The page's own scrollbar — graphite on the page ground, in both engines
   (Chrome 121+ reads the standard property too). Inherited by every scroller. */
html { scrollbar-color: var(--edge-2) var(--bg); }

/* ---- the sum field (п. 261) --------------------------------------------- */
/* No browser arrows: the slider under the field is the stepper. */
.nx-field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.nx-field input::-webkit-inner-spin-button,
.nx-field input::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
/* ONE frame. The input used to draw the site-wide gold :focus-visible ring
   3px outside itself, inside the field's own border — two rectangles, neither
   centred on the other. The field (the label around the input) is the frame;
   the input inside it never outlines. */
.nx-field input:focus, .nx-field input:focus-visible { outline: none; }
.nx-field { align-items: baseline; gap: 3px; padding: 6px 14px 7px 12px; border-radius: 10px;
  border-color: var(--edge-2); background: rgba(0, 0, 0, .42); }
.nx-field:hover { border-color: color-mix(in srgb, var(--gold) 30%, var(--edge-2)); }
.nx-field:focus-within { border-color: var(--gold);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55), 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
/* "$" is the same face at the same size as the figure, only quieter — so the
   two share one baseline in every engine instead of a smaller glyph floating
   on a line box of its own. */
.nx-field span, .nx-field input { font: 700 26px/1.15 var(--display); letter-spacing: -0.025em; }
.nx-field span { color: var(--mute-2); }
.nx-field:focus-within span { color: color-mix(in srgb, var(--gold) 70%, var(--mute)); }
.nx-field input { color: var(--bone); caret-color: var(--gold-bright); }

/* ---- the bottom of the shelf (п. 262) ----------------------------------- */
/* The legal line belongs to the cards: small, flush with their left edge,
   close under them — not centred in the page under a store shelf. */
.tconsent--shelf { margin: 14px 0 0; text-align: left; font-size: 12.5px; color: var(--mute); }
/* "One account…" is information, not a caption: its own block, set apart. */
.plans__note { margin: 28px 0 0; max-width: 760px; padding: 14px 18px 15px 18px;
  border: 1px solid var(--edge); border-left: 2px solid color-mix(in srgb, var(--gold) 60%, var(--edge-2));
  border-radius: var(--r-sm); background: var(--panel); font-size: 14.5px; line-height: 1.6; }
/* "Buy credits" opens a section: the same room above it as every .rule. */
.shelf-topup { margin-top: 52px; }

/* ---- the ledger numerals (0 · 1 · +) ------------------------------------ */
/* A column sized by its glyph put the three bodies at three different
   indents. One fixed column, the numeral centred in it. */
.ledger > div { grid-template-columns: 44px 1fr; }
.ledger__n { justify-self: center; }
@media (max-width: 760px) { .ledger > div { grid-template-columns: 38px 1fr; } }

/* ---- radios and checkboxes: drawn by the site, not the OS --------------- */
.setswitch__row input[type="radio"],
.setswitch__row input[type="checkbox"],
.field input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: 0 0 auto; display: inline-grid; place-content: center;
  width: 18px; height: 18px; margin: 2px 0 0; cursor: pointer;
  background: var(--panel-2); border: 1.5px solid var(--mute-2);
  transition: border-color .15s ease, background-color .15s ease; }
.setswitch__row input[type="radio"] { border-radius: 50%; }
.setswitch__row input[type="checkbox"], .field input[type="checkbox"] { border-radius: 5px; }
.setswitch__row input[type="radio"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-bright); transform: scale(0); transition: transform .15s ease; }
.setswitch__row input[type="checkbox"]::before, .field input[type="checkbox"]::before {
  content: ""; width: 10px; height: 10px; background: var(--hero-ink, #1A1206);
  clip-path: polygon(14% 44%, 0 58%, 38% 96%, 100% 22%, 86% 8%, 38% 68%);
  transform: scale(0); transition: transform .15s ease; }
.setswitch__row:hover input, .field:hover input[type="checkbox"] { border-color: var(--mute); }
.setswitch__row input[type="radio"]:checked { border-color: var(--gold); }
.setswitch__row input[type="checkbox"]:checked, .field input[type="checkbox"]:checked {
  background: var(--gold); border-color: var(--gold); }
.setswitch__row input:checked::before, .field input[type="checkbox"]:checked::before { transform: scale(1); }
.setswitch__row input:focus-visible, .field input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gold-bright); outline-offset: 2px; border-radius: 50%; }
.setswitch__row input[type="checkbox"]:focus-visible, .field input[type="checkbox"]:focus-visible { border-radius: 5px; }
.field input[type="checkbox"] { margin-top: 1px; }

/* ---- selects: the open list in the site's colours too ------------------- */
select.acctinput option { background: var(--panel-2); color: var(--bone); }
select.acctinput:focus-visible { outline: none; }

/* ---- the checkout gate: the mark sits on the column's edge, like the title */
.gate__logo--start { margin: 0 0 18px; }
@media (prefers-reduced-motion: reduce) {
  .setswitch__row input, .setswitch__row input::before, .field input, .field input::before { transition: none; }
}
/* Inside a card's foot the consent sits on the same left edge as the till
   line under it — one column, not a centred line between two flush ones. */
.plan__foot .tconsent { text-align: left; }
/* A "?" on the settings card, on a phone: its bubble was anchored to the
   mark and grew 24px left / 300px right of it — past the window even while
   hidden (visibility keeps the box), so /account scrolled sideways by ~40px
   at 390. There, the bubble hangs from the label's own left edge instead and
   is never wider than the screen. */
@media (max-width: 760px) {
  .acctsettings .acctfield__k, .acctsettings .acctfacts dt { position: relative; }
  .acctsettings .acctfield__k .qtip, .acctsettings .acctfacts dt .qtip { position: static; }
  .acctsettings .qtip__body { left: 0; transform: none; max-width: min(300px, calc(100vw - 56px)); }
}
/* п. 263: «Відновити підписку» wears the leave button's shape, but answers
   the pointer in gold — it gives a plan back, it does not take one away. */
.btn--resume:hover { color: var(--gold-bright); border-color: color-mix(in srgb, var(--gold) 60%, transparent);
  background: color-mix(in srgb, var(--gold) 10%, var(--panel-2)); }