/* Hallmark · theme: custom · idea: "the marketer's neon module cards made into the storefront: one account working live on the first screen, every module one tap away in its group" · vibe: "night console, neon outlines, short and scannable" · paper: navy night oklch(13.5% 0.032 262), the cards' own ground · accent: signal cyan oklch(84% 0.14 205), the mark's colour; hot pink oklch(70% 0.24 355) only for the forever plan, as on the price poster · faces: Tektur (display, condensed like the cards), Onest (body) · posture: dark · axes: dark/condensed-technical/chromatic-cyan · hero: headline and one action beside the raven with a live account card on it · signature: the account card running checker, parser and mailing, then the group tabs with the marketer's card as the preview · imagery: the raven from the marketer's banner, 27 marketer module cards in the preview, the product drawn as one account card · sections: hero with three steps, module explorer, full version prices, support band, footer */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V5 · weakest: E, the account card is a scripted demo; captioned as a demo and drawn from the app's real statuses */
/* Hallmark · answered 29, F24 · .acc: the cyan outline and its glow are the marketer's neon card edge, the one lit object on the page */
/* Hallmark · waive 39b · .row: a module row carries its name, price and a two-line description, a list item rather than a control; the hit target stays above 44px */
/* Hallmark · waive 44c · login.html, register.html: the form and the banner fill the first screen side by side · «Вход» и «Создать аккаунт» with the login and password fields are the first screen, the banner beside them */
/* Hallmark · waive 77 · login.html, register.html: two halves, the form and the full-height banner · a sign-in screen has one job */
/* Hallmark · waive 79 · login.html, register.html: the form is centred in its half · the gap measured is the form's vertical centring beside a full-height picture */
@font-face { font-family: "Tektur"; font-style: normal; font-weight: 500 700; font-stretch: 75% 100%; font-display: swap; src: url("fonts/tektur-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Tektur"; font-style: normal; font-weight: 500 700; font-stretch: 75% 100%; font-display: swap; src: url("fonts/tektur-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/onest-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/onest-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  color-scheme: dark; --g: var(--color-signal);
  --color-paper: oklch(13.5% 0.032 262); --color-paper-2: oklch(18% 0.038 262); --color-paper-3: oklch(22.5% 0.045 262); --color-paper-deep: oklch(10.5% 0.028 262);
  --color-ink: oklch(97% 0.01 262); --color-ink-2: oklch(87% 0.02 262); --color-muted: oklch(74% 0.03 262);
  --color-rule: oklch(29% 0.045 262); --color-rule-2: oklch(42% 0.06 262);
  --color-signal: oklch(84% 0.14 205); --color-signal-2: oklch(90% 0.11 205); --color-signal-ink: oklch(18% 0.05 240); --color-focus: oklch(84% 0.14 205);
  --color-hot: oklch(70% 0.24 355); --color-glow: oklch(84% 0.14 205 / 0.18); --color-mask: oklch(10% 0.02 262);
  --color-ok: oklch(82% 0.17 150); --color-warn: oklch(85% 0.15 85); --color-bad: oklch(72% 0.19 25); --color-bad-soft: oklch(28% 0.08 25);
  --color-scrim: oklch(8% 0.03 262 / 0.8);
  --g-accounts: oklch(84% 0.14 205); --g-data: oklch(76% 0.14 250); --g-mass: oklch(72% 0.22 355); --g-mailing: oklch(76% 0.16 40);
  --g-content: oklch(73% 0.17 295); --g-moderation: oklch(82% 0.13 172); --g-ai: oklch(74% 0.22 325);
  --font-display: "Tektur", ui-sans-serif, system-ui, sans-serif; --font-body: "Onest", ui-sans-serif, system-ui, sans-serif;
  --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-md: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.75rem; --text-4xl: 4rem;
  --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 80px;
  --radius-row: 10px; --radius-card: 14px; --radius-panel: 18px; --container: 1240px; --gutter: 24px; --nav-h: 68px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-micro: 140ms; --dur-short: 260ms; --dur-long: 900ms;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--space-md)); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font: 400 var(--text-md)/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; overflow-wrap: break-word; min-width: 0; color: var(--color-ink); text-wrap: balance; }
h1, h2 { font-family: var(--font-display); font-stretch: 85%; letter-spacing: -0.01em; line-height: 1.02; }
p { margin: 0; }
.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 520px) { :root { --gutter: 16px; } }

/* Controls: eight states, focus instant */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg);
  border-radius: var(--radius-row); border: 1px solid var(--color-rule-2); background: var(--color-paper-2); color: var(--color-ink);
  font: 600 var(--text-md)/1 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { border-color: var(--color-ink-2); background: var(--color-paper-3); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, a:focus-visible, input:focus-visible, button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; transition: none; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--color-paper-deep); border-color: var(--color-rule); color: var(--color-muted); cursor: not-allowed; }
.btn.primary { background: var(--color-signal); border-color: var(--color-signal); color: var(--color-signal-ink); }
.btn.primary:hover { background: var(--color-signal-2); border-color: var(--color-signal-2); }
.btn.wide { width: 100%; }
.link { color: var(--color-signal); text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--color-signal-2); }
.chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-sm); border-radius: 999px; font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
  border: 1px solid var(--color-rule-2); color: var(--color-ink-2); }
.chip.ok { color: var(--color-ok); border-color: var(--color-ok); }
.chip.warn { color: var(--color-warn); border-color: var(--color-warn); }
.chip.bad { color: var(--color-bad); border-color: var(--color-bad); }
.chip.busy { color: var(--color-signal); border-color: var(--color-signal); }

/* Group colour: every component reads --g, the group class sets it */
.g-accounts { --g: var(--g-accounts); } .g-data { --g: var(--g-data); } .g-mass { --g: var(--g-mass); } .g-mailing { --g: var(--g-mailing); }
.g-content { --g: var(--g-content); } .g-moderation { --g: var(--g-moderation); } .g-ai { --g: var(--g-ai); }

/* Nav: one action stays in reach while scrolling */
.nav { position: sticky; top: 0; z-index: 20; background: var(--color-paper); border-bottom: 1px solid var(--color-rule); }
.nav .wrap { display: flex; align-items: center; gap: var(--space-lg); min-height: var(--nav-h); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); white-space: nowrap; font: 600 var(--text-xl)/1 var(--font-display); font-stretch: 85%; text-decoration: none; color: var(--color-ink); }
.wordmark svg { width: 28px; height: 28px; }
.wordmark .mark-body { fill: var(--color-signal); }
.wordmark .mark-pulse { fill: none; stroke: var(--color-signal-ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.nav-links { display: flex; gap: var(--space-lg); margin-left: var(--space-md); }
.nav-links a { color: var(--color-ink-2); text-decoration: none; font-weight: 500; }
.nav-links a:hover { color: var(--color-ink); }
.nav-actions { margin-left: auto; display: flex; gap: var(--space-xs); }
@media (max-width: 900px) { .nav-links { display: none; } }
@media (max-width: 520px) { .nav-actions .btn:not(.primary) { border-color: transparent; background: none; padding: 0 var(--space-xs); } .nav .wrap { gap: var(--space-sm); } .wordmark { font-size: var(--text-lg); } .nav-actions .btn { padding: 0 var(--space-md); font-size: var(--text-sm); } }

/* Hero: the headline beside the raven, one account working on it */
.hero { padding: var(--space-2xl) 0 var(--space-xl); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-areas: "copy art" "steps steps"; column-gap: var(--space-xl); align-items: center; }
.hero-copy { grid-area: copy; display: flex; flex-direction: column; gap: var(--space-lg); }
.hero h1 { font-size: var(--text-4xl); }
.hero .lead { font-size: var(--text-lg); color: var(--color-ink-2); max-width: 34ch; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.trial { color: var(--color-ink-2); }
.hero-art { grid-area: art; position: relative; margin: 0; min-width: 0; }
.hero-art > img { width: 100%; aspect-ratio: 900 / 844; max-height: 540px; object-fit: cover; object-position: 60% 40%;
  -webkit-mask-image: radial-gradient(closest-side, var(--color-mask) 62%, transparent); mask-image: radial-gradient(closest-side, var(--color-mask) 62%, transparent); }
.hero-art figcaption { position: absolute; right: 0; bottom: 0; color: var(--color-muted); font-size: var(--text-xs); }
.acc { position: absolute; left: -6%; bottom: 10%; width: min(360px, 82%); padding: var(--space-md); border-radius: var(--radius-panel);
  border: 1px solid var(--color-signal); background: var(--color-paper-2); box-shadow: 0 0 40px var(--color-glow); }
.acc-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.acc-head div { display: flex; flex-direction: column; min-width: 0; }
.acc-head strong { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-head div span { color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-paper-3); color: var(--color-signal); font: 600 var(--text-sm)/1 var(--font-display); }
.acc-tasks { list-style: none; margin: 0; padding: var(--space-sm) 0 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.acc-tasks li { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-xs); font-size: var(--text-sm); }
.acc-tasks span { color: var(--color-ink-2); }
.acc-tasks b { font-weight: 600; font-variant-numeric: tabular-nums; }
.acc-tasks li.paused b { color: var(--color-warn); }
.bar { grid-column: 1 / -1; display: block; height: 6px; border-radius: 999px; background: var(--color-paper-3); overflow: hidden; }
.bar::after { content: ""; display: block; height: 100%; background: var(--color-signal); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform var(--dur-short) var(--ease-out); }
.paused .bar::after { background: var(--color-warn); }
.acc-head.swap { animation: swap var(--dur-short) var(--ease-out); }
@keyframes swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.steps { grid-area: steps; list-style: none; margin: var(--space-xl) 0 0; padding: var(--space-lg) 0 0; border-top: 1px solid var(--color-rule);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); counter-reset: step; }
.steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-sm); counter-increment: step; }
.steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--color-signal); color: var(--color-signal); font: 600 var(--text-sm)/1 var(--font-display); }
.steps strong { font-weight: 600; }
.steps span { color: var(--color-muted); font-size: var(--text-sm); }
@media (max-width: 1100px) { .hero h1 { font-size: var(--text-3xl); } .acc { left: 0; bottom: 4%; width: min(320px, 74%); } .hero-art > img { object-position: 70% 30%; } }
@media (max-width: 900px) {
  .hero { padding-top: var(--space-xl); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "art" "steps"; }
  .hero-art { margin-top: var(--space-lg); }
  .hero-art > img { max-height: 340px; }
  .acc { position: relative; left: auto; bottom: auto; margin: -120px auto 0; width: min(400px, 100%); }
  .hero-art figcaption { position: static; text-align: center; margin-top: var(--space-xs); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
}
@media (max-width: 520px) { .hero h1 { font-size: var(--text-2xl); } .hero .actions .btn { flex: 1 1 auto; } }

/* Sections */
.section { padding: var(--space-3xl) 0; border-top: 1px solid var(--color-rule); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-md) var(--space-xl); margin-bottom: var(--space-lg); }
.section-head h2, .pricing-head h2, .closing h2 { font-size: var(--text-3xl); }
.section-head p { color: var(--color-ink-2); max-width: 44ch; }
@media (max-width: 900px) { .section { padding: var(--space-2xl) 0; } .section-head h2, .pricing-head h2, .closing h2 { font-size: var(--text-2xl); } }

/* Module explorer: group tabs, a short list, the marketer's card as the preview */
.tabs { display: flex; gap: var(--space-xs); border-bottom: 1px solid var(--color-rule); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
@media (max-width: 900px) { .tabs { -webkit-mask-image: linear-gradient(90deg, var(--color-mask) 82%, transparent); mask-image: linear-gradient(90deg, var(--color-mask) 82%, transparent); } }
.tabs button { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-md);
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--color-ink-2); font: 500 var(--text-md)/1 var(--font-body); cursor: pointer;
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.tabs button span { color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.tabs button:hover { color: var(--color-ink); background: var(--color-paper-2); }
.tabs button:active { background: var(--color-paper-3); }
.tabs button[aria-selected="true"] { color: var(--g); border-bottom-color: var(--g); font-weight: 600; }
.tabs button:focus-visible { outline-offset: -2px; }
.explorer-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); padding-top: var(--space-lg); align-items: start; }
.panel { grid-column: 1; grid-row: 1; }
.panel[hidden] { display: none; }
.panel-title { font: 600 var(--text-lg)/1.3 var(--font-body); color: var(--g); margin-bottom: var(--space-xs); }
.js .panel-title { display: none; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-md); align-items: center; text-align: left;
  min-height: 52px; padding: var(--space-sm) var(--space-md); border: 0; border-radius: var(--radius-row); background: none; color: var(--color-ink-2);
  font: 500 var(--text-md)/1.3 var(--font-body); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.row:hover { background: var(--color-paper-2); color: var(--color-ink); }
.row:active { background: var(--color-paper-3); }
.row[aria-pressed="true"] { background: var(--color-paper-2); color: var(--color-ink); box-shadow: inset 3px 0 0 var(--g); }
.row-price { font: 600 var(--text-md)/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--color-ink); white-space: nowrap; }
.row-price.ask { font: 500 var(--text-sm)/1 var(--font-body); color: var(--color-muted); }
.row-desc { grid-column: 1 / -1; margin-top: 4px; color: var(--color-muted); font-size: var(--text-sm); font-weight: 400; }
.js .row-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
html:not(.js) .row { cursor: default; }
html:not(.js) .row:hover { background: none; color: var(--color-ink-2); }
html:not(.js) .tabs { display: none; }
html:not(.js) .explorer-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html:not(.js) .panel { grid-column: auto; grid-row: auto; }

.preview { position: sticky; top: calc(var(--nav-h) + var(--space-lg)); inset: auto; grid-column: 2; grid-row: 1; margin: 0; width: auto; max-width: none; max-height: none;
  padding: var(--space-lg); border: 1px solid var(--g); border-radius: var(--radius-panel); background: var(--color-paper-2); color: var(--color-ink); }
.preview[open] { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-lg); }
.preview-card img, .card-stand { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-card); background: var(--color-paper-deep); object-fit: cover; }
.card-stand { display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-lg); border: 1px solid var(--g); }
.card-stand span { color: var(--g); font-weight: 600; font-size: var(--text-sm); }
.card-stand strong { font: 600 var(--text-2xl)/1.05 var(--font-display); font-stretch: 85%; overflow-wrap: break-word; }
.preview.no-card .preview-card img, .preview:not(.no-card) .card-stand { display: none; }
.preview-text { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }
.preview-group { color: var(--g); font-weight: 600; font-size: var(--text-sm); }
.preview-text h3 { font: 600 var(--text-2xl)/1.05 var(--font-display); font-stretch: 85%; }
.preview-text p { color: var(--color-ink-2); }
.preview-price { font: 600 var(--text-2xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.preview-price.ask { font: 500 var(--text-md)/1.3 var(--font-body); color: var(--color-muted); }
.preview-actions { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: auto; }
.preview-close { display: none; position: absolute; top: var(--space-sm); right: var(--space-sm); z-index: 1; min-width: 44px; min-height: 44px; border-radius: 50%;
  border: 1px solid var(--color-rule-2); background: var(--color-paper-deep); color: var(--color-ink); font: 600 var(--text-xl)/1 var(--font-body); cursor: pointer; }
.preview-close:hover { border-color: var(--color-ink-2); }
.preview.swap .preview-card, .preview.swap .preview-text { animation: swap var(--dur-short) var(--ease-out); }
@media (max-width: 1100px) { .preview[open] { grid-template-columns: 132px minmax(0, 1fr); } .card-stand { padding: var(--space-sm); } .card-stand strong { font-size: var(--text-md); } }
@media (max-width: 720px) {
  .explorer-body { display: block; padding-top: var(--space-sm); }
  .row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .row::after { content: ""; grid-column: 3; grid-row: 1; width: 8px; height: 8px; margin-left: var(--space-xs); border: solid var(--color-muted); border-width: 2px 2px 0 0; transform: rotate(45deg); }
  html:not(.js) .explorer-body { display: block; }
  .preview { display: none; }
  .preview:modal { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); position: fixed; inset: auto 0 0 0; width: 100%; max-height: 92dvh; overflow-y: auto;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0; border-bottom: 0; overscroll-behavior: contain; animation: sheet-in var(--dur-short) var(--ease-out); }
  html:has(.preview:modal) { overflow-y: clip; }
  .preview:modal::backdrop { background: var(--color-scrim); }
  .preview:modal .preview-close { display: inline-flex; align-items: center; justify-content: center; }
  .js .row-desc { -webkit-line-clamp: 1; }
  .preview:modal .preview-card { width: min(240px, 64%); margin: var(--space-xl) auto 0; }
}
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Full version: four terms in one rail */
.pricing { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl); align-items: center; }
.pricing-head { display: flex; flex-direction: column; gap: var(--space-md); }
.pricing-head p { color: var(--color-ink-2); max-width: 36ch; }
.periods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--color-rule-2); border-radius: var(--radius-panel); overflow: hidden; background: var(--color-paper-2); }
.period { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); border-left: 1px solid var(--color-rule); }
.period:first-child { border-left: 0; }
.period span { color: var(--color-ink-2); }
.period strong { font: 600 var(--text-3xl)/1 var(--font-display); font-stretch: 85%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.period small { color: var(--color-muted); font-size: var(--text-sm); }
.period .btn { margin-top: var(--space-xs); padding: 0 var(--space-md); }
.period.best { background: var(--color-paper-3); box-shadow: inset 0 0 0 1px var(--color-hot); border-radius: var(--radius-panel); }
.period.best span { color: var(--color-hot); font-weight: 600; }
@media (max-width: 1100px) { .pricing { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .periods { grid-template-columns: repeat(2, minmax(0, 1fr)); } .period:nth-child(odd) { border-left: 0; } .period:nth-child(n+3) { border-top: 1px solid var(--color-rule); } .period strong { font-size: var(--text-2xl); } }

/* Support band */
.closing { border-top: 1px solid var(--color-rule); background: var(--color-paper-deep); }
.closing .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg) var(--space-xl); padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.closing .wrap > div:first-child { display: flex; flex-direction: column; gap: var(--space-sm); }
.closing p { color: var(--color-ink-2); max-width: 52ch; }

/* Footer */
.footer { border-top: 1px solid var(--color-rule); padding: var(--space-xl) 0; color: var(--color-muted); }
.footer .wrap { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: center; }
.footer nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-left: auto; }
.footer a { color: var(--color-ink-2); text-decoration: none; }
.footer a:hover { color: var(--color-ink); }

/* Sign-in and sign-up */
.auth { min-height: calc(100dvh - var(--nav-h) - 1px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.auth-form { display: flex; flex-direction: column; justify-content: center; padding: var(--space-2xl) var(--gutter); max-width: 480px; width: 100%; margin: 0 auto; }
.auth-form h1 { font-size: var(--text-2xl); }
.auth-form .sub { margin-top: var(--space-xs); color: var(--color-ink-2); }
.auth-form form { margin-top: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); }
.auth-form label { display: flex; flex-direction: column; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); font-weight: 500; }
.auth-form input { min-height: 48px; padding: 0 var(--space-md); border-radius: var(--radius-row); border: 1px solid var(--color-muted); background: var(--color-paper-deep);
  color: var(--color-ink); font: 400 var(--text-md)/1 var(--font-body); }
.auth-form input:hover { border-color: var(--color-ink-2); }
.auth-form .btn { margin-top: var(--space-xs); }
.auth-form .alt { margin-top: var(--space-lg); color: var(--color-muted); }
.err { border: 1px solid var(--color-bad); background: var(--color-bad-soft); color: var(--color-ink); border-radius: var(--radius-row); padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); }
.auth-art { border-left: 1px solid var(--color-rule); background: var(--color-paper-deep); overflow: hidden; }
.auth-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
@media (max-width: 960px) { .auth { grid-template-columns: minmax(0, 1fr); } .auth-art { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}