/* Saintara — "multilingual publishing tool" design foundation (preview).
 * Tokens first, then reusable components (.site-header, .btn, .field, .notice,
 * .code, .lang-chip, .site-footer), then page sections.
 * One sans-serif (Rubik, self-hosted; other scripts fall back to the system
 * font for that script). Monospace only for real code.
 */

:root {
    /* Colour */
    --canvas: #f7f8f5;
    --surface: #ffffff;
    --ink: #17201d;
    --ink-2: #525e58;
    --accent: #244fd6;
    --accent-ink: #ffffff;
    --accent-soft: #e8edfb;
    --rule: #dce2dd;
    --rule-strong: #748078;
    --ok: #1d6b47;
    --danger: #a52a2a;

    /* Type */
    --font-sans: 'Rubik', system-ui, -apple-system, 'Segoe UI', 'Noto Sans', 'Noto Sans SC', 'Noto Sans Arabic', 'Hiragino Sans', 'Microsoft YaHei', sans-serif;
    --font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    --step--1: 0.875rem;
    --step-0: 1rem;
    --step-1: 1.125rem;
    --step-2: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    --step-3: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
    --step-4: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);

    /* Space */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4.5rem;
    --s-9: 7rem;
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --measure: 62ch;
    --page: 72rem;

    /* Shape, focus, motion */
    --radius: 6px;
    --border: 1px solid var(--rule);
    --focus: 0 0 0 3px var(--canvas), 0 0 0 5px var(--accent);
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --dur: 180ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font: 400 var(--step-0)/1.6 var(--font-sans);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.15; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid transparent; outline-offset: 3px; box-shadow: var(--focus); border-radius: var(--radius); }
.skip-link { position: absolute; left: var(--s-4); top: -4rem; background: var(--ink); color: #fff; padding: var(--s-2) var(--s-4); border-radius: var(--radius); z-index: 50; }
.skip-link:focus { top: var(--s-3); }
.page { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow { font-size: var(--step--1); font-weight: 600; color: var(--ink-2); letter-spacing: 0.01em; }

/* ---------- Components ---------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: 2.75rem; padding: var(--s-2) var(--s-5);
    font: 600 var(--step-0)/1 var(--font-sans);
    border-radius: var(--radius); border: 1px solid transparent;
    text-decoration: none; cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #1b3fb0; text-decoration: none; }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-quiet:hover { border-color: var(--ink); text-decoration: none; }
.btn-sm { min-height: 2.5rem; padding: var(--s-2) var(--s-4); font-size: var(--step--1); }

.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--canvas) 94%, transparent); border-bottom: var(--border); backdrop-filter: none; }
.launch-banner { margin: 0; padding: var(--s-2) var(--gutter); background: var(--accent); color: var(--accent-ink); font-size: var(--step--1); font-weight: 500; text-align: center; }
.site-header .page { display: flex; align-items: center; gap: var(--s-5); min-height: 4rem; }
.brand { display: inline-flex; align-items: center; min-height: 2.75rem; gap: var(--s-2); color: var(--ink); font-weight: 700; font-size: var(--step-1); text-decoration: none; margin-inline-end: auto; }
.brand .tld { color: var(--ink-2); font-weight: 500; margin-inline-start: -0.4rem; }
.brand img { display: block; box-sizing: content-box; padding: 5px; background: #12204f; border-radius: 8px; }
.nav { display: flex; align-items: center; gap: var(--s-5); }
.nav a:not(.btn) { color: var(--ink-2); text-decoration: none; font-size: var(--step--1); font-weight: 500; padding: var(--s-2) 0; }
.nav a:not(.btn):hover { color: var(--ink); text-decoration: underline; }
.nav-toggle { display: none; min-height: 2.75rem; min-width: 2.75rem; background: transparent; border: 1px solid var(--rule-strong); border-radius: var(--radius); color: var(--ink); font: 600 var(--step--1) var(--font-sans); cursor: pointer; padding: 0 var(--s-3); }

.field { display: block; width: 100%; min-height: 2.75rem; padding: 0 var(--s-3); font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.field:focus-visible { border-color: var(--accent); }

.notice { padding: var(--s-3) var(--s-4); border: 1px solid var(--rule-strong); background: var(--surface); font-size: var(--step--1); color: var(--ink-2); }
.notice[data-kind="error"] { border-color: var(--danger); color: var(--ink); }

.code { position: relative; background: var(--ink); color: #e9efe9; border-radius: var(--radius); }
.code-bar { display: flex; justify-content: space-between; align-items: center; padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5); border-bottom: 1px solid rgba(255,255,255,0.14); font: 500 0.8125rem var(--font-mono); color: #9fb0a6; }
.code pre { margin: 0; padding: var(--s-4) var(--s-5); overflow-x: auto; font: 400 0.875rem/1.7 var(--font-mono); tab-size: 2; }
.code .tok-tag { color: #9db7ff; }
.code .tok-attr { color: #8fd6c4; }
.code .tok-val { color: #f2d48a; }
.code .tok-com { color: #8fa39a; font-style: italic; }
.code .tok-sel { color: #9db7ff; }
.code .tok-prop { color: #8fd6c4; }
.code .tok-num { color: #ffb48a; }
.code .tok-fn { color: #d5b8ff; }
.code .tok-id { background: rgba(242, 212, 138, 0.16); color: #f2d48a; padding: 0 0.2em; border-radius: 3px; }
.copy-btn { min-height: 2.75rem; padding: var(--s-1) var(--s-3); font: 600 0.8125rem var(--font-sans); color: #e9efe9; background: transparent; border: 1px solid rgba(255,255,255,0.3); border-radius: var(--radius); cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.copy-btn:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.copy-btn:focus-visible { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #9db7ff; }

.lang-chip { min-height: 2.75rem; padding: var(--s-2) var(--s-4); font: 500 var(--step--1) var(--font-sans); color: var(--ink); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius); cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.lang-chip:hover { border-color: var(--ink); }
.lang-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.lang-chip[aria-pressed="true"]::before { content: "\2713\00a0"; }
.lang-chip .native { display: block; color: var(--accent); font-weight: 400; font-style: italic; }
.lang-chip[aria-pressed="true"] .native { color: inherit; }
.lang-chip .native:lang(ar), .lang-chip .native:lang(zh) { font-style: normal; }   /* no true italics in these scripts; browsers fake a slant */

/* ---------- Opening ---------- */

.opening { padding-block: var(--s-8) var(--s-9); }
.opening-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); align-items: center; }
.opening h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.02em; }
.opening .lede { margin-top: var(--s-5); font-size: var(--step-1); color: var(--ink-2); max-width: 34rem; }
.opening .actions a:not(.btn), .trial .actions a:not(.btn) { display: inline-flex; align-items: center; min-height: 2.75rem; }
.opening .actions, .trial .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); }
.opening .fine, .trial .fine { margin-top: var(--s-4); font-size: var(--step--1); color: var(--ink-2); max-width: 34rem; }

.demo { border: var(--border); background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.demo-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); border-bottom: var(--border); font-size: var(--step--1); color: var(--ink-2); }
.demo-bar strong { color: var(--ink); font-weight: 600; }
.demo-bar #demo-title { color: var(--accent); }
.demo-caption { padding: var(--s-3) var(--s-4) 0; font-size: var(--step--1); color: var(--ink-2); }
.demo-controls { padding: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.demo-controls .spacer { flex: 1 1 0; min-width: 0.5rem; }
.link-btn { background: none; border: 0; padding: var(--s-2) var(--s-1); min-height: 2.75rem; font: 500 var(--step--1) var(--font-sans); color: var(--accent); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.link-btn:hover { text-decoration-thickness: 2px; }
.link-btn[disabled] { color: var(--ink-2); text-decoration: none; cursor: default; }
.demo-status:empty { display: none; }
.demo-status { padding: 0 var(--s-4) var(--s-4); }
.demo-status .notice { margin: 0; border-radius: var(--radius); }



/* ---------- Sections ---------- */

.section { padding-block: var(--s-9); border-top: var(--border); }
.section-head { max-width: 42rem; margin-bottom: var(--s-7); }
.section-head h2 { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.015em; }
.section-head p { margin-top: var(--s-4); color: var(--ink-2); font-size: var(--step-1); }

.install { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s-8); align-items: start; }
.rail { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.rail li { position: relative; padding-inline-start: 3.25rem; padding-bottom: var(--s-6); counter-increment: step; }
.rail li:last-child { padding-bottom: 0; }
.rail li::before { content: counter(step); position: absolute; inset-inline-start: 0; top: 0; width: 2rem; height: 2rem; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-weight: 600; font-size: var(--step--1); background: var(--canvas); }
.rail li::after { content: ""; position: absolute; inset-inline-start: 1rem; top: 2.25rem; bottom: 0.25rem; width: 1px; background: var(--rule-strong); }
.rail li:last-child::after { display: none; }
.rail h3 { font-size: var(--step-1); }
.rail p { margin-top: var(--s-2); color: var(--ink-2); max-width: 40ch; }
.install-code .code { margin-top: 0; }
.install-code figcaption { margin-top: var(--s-3); font-size: var(--step--1); color: var(--ink-2); }
.install-code .alt { margin-top: var(--s-5); padding-top: var(--s-4); border-top: var(--border); font-size: var(--step--1); color: var(--ink-2); }

.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--border); background: var(--surface); border-radius: var(--radius); }
.way { padding: var(--s-6); display: flex; flex-direction: column; align-items: flex-start; }
.way + .way { border-inline-start: var(--border); }
.way h3 { font-size: var(--step-2); }
.way > p { margin-top: var(--s-4); color: var(--ink-2); max-width: 44ch; }
.way > p:last-of-type { margin-bottom: var(--s-5); }
.way .btn { margin-top: auto; }
.ways-foot { margin-top: var(--s-4); font-size: var(--step--1); color: var(--ink-2); max-width: 70ch; }

.facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-8); }
.facts > div { padding-block: var(--s-5); border-top: var(--border); }
.facts dt { font-weight: 600; }
.facts dd { margin: var(--s-2) 0 0; color: var(--ink-2); max-width: 46ch; }

.trial { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); align-items: start; }
.trial-terms { margin: var(--s-5) 0 0; padding: 0; list-style: none; border: var(--border); background: var(--surface); border-radius: var(--radius); }
.trial-terms li { padding: var(--s-3) var(--s-4); display: flex; justify-content: space-between; gap: var(--s-4); }
.trial-terms li + li { border-top: var(--border); }
.trial-terms li span:last-child { font-weight: 600; text-align: end; }
.faq { margin: 0; }
.faq div { padding-block: var(--s-5); border-top: var(--border); }
.faq div:first-child { padding-top: 0; border-top: 0; }
.faq dt { font-weight: 600; }
.faq dd { margin: var(--s-2) 0 0; color: var(--ink-2); max-width: 52ch; }

.closing { padding-block: var(--s-9); border-top: var(--border); background: var(--surface); }
.closing .page { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5) var(--s-7); }
.closing h2 { font-size: var(--step-3); font-weight: 700; max-width: 22ch; letter-spacing: -0.015em; }
.closing p { margin-top: var(--s-3); color: var(--ink-2); }

.site-footer { padding-block: var(--s-6); border-top: var(--border); font-size: var(--step--1); color: var(--ink-2); }
.site-footer .page { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); justify-content: space-between; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.site-footer a { color: var(--ink-2); padding-block: var(--s-3); display: inline-block; }
.site-footer a:hover { color: var(--ink); }

/* Type and spacing establish hierarchy; blue identifies actions and selection. */
main b, main strong, main h1, main h2, main h3,
.facts dt, .faq dt, .trial-terms li span:last-child, .plans thead th { color: var(--ink); }

/* ---------- Pricing page ---------- */

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.page-head { padding-block: var(--s-8) var(--s-7); }
.page-head h1 { margin-top: var(--s-3); font-size: var(--step-4); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; max-width: 18ch; }
.page-head .lede { margin-top: var(--s-4); font-size: var(--step-1); color: var(--ink-2); max-width: 46ch; }
.plans .corner { padding: var(--s-3); border-bottom: 1px solid var(--rule-strong); }
.billing-toggle { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.toggle-label { min-height: 2.75rem; font: 500 var(--step--1)/1.3 var(--font-sans); color: var(--ink-2); background: var(--surface); border: 1px solid var(--rule-strong); cursor: pointer; padding: 0.5rem 0.75rem; border-radius: var(--radius); }
.toggle-label.active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 -3px var(--accent); }
.toggle-label:focus-visible { box-shadow: var(--focus); }
.billing-toggle[hidden] { display: none; }
.product-toggle { margin-top: var(--s-6); gap: var(--s-4); }
.product-toggle .toggle-label { font-size: var(--step-0); }
.plan-note { margin-top: var(--s-3); font-size: var(--step--1); color: var(--ink-2); }
.plan-stack > .plan-block[hidden] { display: none; }
.plan-stack { display: grid; gap: var(--s-8); min-width: 0; }
.plan-block { min-width: 0; }
.table-hint { display: none; }
.plan-block h3 { font-size: var(--step-2); }
.plan-sub { margin-top: var(--s-2); color: var(--ink-2); max-width: 60ch; }
.table-wrap { margin-top: var(--s-5); overflow-x: auto; border: var(--border); border-radius: var(--radius); background: var(--surface); }
.table-wrap:focus-visible { box-shadow: var(--focus); }
.plans { min-width: 40rem; width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.plans thead th { text-align: start; font-size: var(--step-0); padding: var(--s-4); border-bottom: 1px solid var(--rule-strong); }
.plans tbody th { text-align: start; font-weight: 500; color: var(--ink-2); padding: var(--s-4); width: 28%; }
.plans td { padding: var(--s-4); }
.plans tbody tr + tr > * { border-top: var(--border); }
.plans .price b { font-size: var(--step-2); font-weight: 700; }
.section .notice { margin-top: var(--s-7); max-width: 62ch; }


/* Pricing page: centred, wider measure (scoped so the homepage preview is unchanged) */
.page-centred .page-head .page { text-align: center; }
.page-centred .page-head h1 { max-width: 26ch; margin-inline: auto; }
.page-centred .page-head .lede { max-width: 62ch; margin-inline: auto; }
.page-centred .product-toggle { justify-content: center; }
.page-centred .plan-block h3 { text-align: center; }
.page-centred .plan-sub { max-width: 72ch; margin-inline: auto; text-align: center; }
.page-centred .plan-note { text-align: center; max-width: none; }
.page-centred .section .notice { max-width: none; margin-inline: auto; text-align: center; }
.page-centred .section-head { max-width: 52rem; margin-inline: auto; text-align: center; }
.page-centred .facts { max-width: 60rem; margin-inline: auto; }
.page-centred .facts dd, .page-centred .faq dd { max-width: none; }
.page-centred .faq { max-width: 52rem; margin-inline: auto; }
.page-centred .closing .page { flex-direction: column; text-align: center; }
.page-centred .closing h2 { max-width: 30ch; margin-inline: auto; }

/* ---------- Responsive ---------- */

@media (max-width: 48rem) {
    .table-hint { display: block; margin-bottom: var(--s-4); font-size: var(--step--1); color: var(--ink-2); }
    .product-toggle { gap: var(--s-2); }
    .product-toggle .toggle-label { flex: 1 1 10rem; }
}
@media (max-width: 62rem) {
    .plans .billing-toggle { flex-direction: column; align-items: flex-start; gap: 0; flex-wrap: nowrap; }
    .opening-grid, .install, .trial { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
    .facts { grid-template-columns: minmax(0, 1fr); }
    .opening { padding-block: var(--s-7) var(--s-8); }
    .section, .closing { padding-block: var(--s-8); }
}
@media (max-width: 64rem) {
    .nav-toggle[data-menu-ready] { display: inline-flex; align-items: center; }
    .nav { display: flex; position: absolute; top: 100%; inset-inline: 0; flex-direction: column; align-items: stretch; gap: 0; padding: var(--s-2) var(--gutter) var(--s-5); background: var(--canvas); border-bottom: var(--border); }
    .nav:not([data-menu-ready]) { position: static; width: 100%; }
    .site-header:has(.nav:not([data-menu-ready])) { position: static; }
    .site-header .page:has(.nav:not([data-menu-ready])) { flex-wrap: wrap; }
    .nav[data-menu-ready] { display: none; max-height: 75vh; max-height: 75dvh; overflow-y: auto; }
    .nav[data-open="true"] { display: flex; }
    .nav a:not(.btn) { padding: var(--s-3) 0; border-bottom: var(--border); font-size: var(--step-0); }
    .nav .btn { margin-top: var(--s-4); }
}
@media (max-width: 52rem) {
    .ways { grid-template-columns: minmax(0, 1fr); }
    .way + .way { border-inline-start: 0; border-top: var(--border); }
}
@media (max-width: 30rem) {
    .way { padding: var(--s-5) var(--s-4); }
    .way .btn { width: 100%; }
    .trial-terms li { padding-inline: var(--s-4); }
}
/* The consent script appends this after the footer. Keep it in normal flow. */
#cookie-banner { padding: var(--s-5) var(--gutter); border-top: var(--border); background: var(--surface); color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
#cookie-banner p { flex: 1 1 32rem; }
#cookie-dismiss { min-height: 2.75rem; padding: var(--s-2) var(--s-4); font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius); cursor: pointer; }

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

/* Demo links in plan copy: accent and a touch heavier so they read as the next step */
.plan-sub a { color: var(--accent); font-weight: 600; }

/* Hero highlight: the one place the accent colours a headline */
.hl { color: var(--accent); }

/* Plan-table action row: one centred button across the whole box */
.plans td.get-started { text-align: center; padding: var(--s-5) 0; }
.plans td.get-started span { display: block; margin-top: var(--s-2); font-size: var(--step--1); color: var(--ink-2); }
/* On narrow screens the table scrolls sideways; keep the action centred in the visible box, not the full scroll width */
.table-wrap { container-type: inline-size; }
.plans .gs-inner { position: sticky; inset-inline-start: 0; width: 100cqw; }

/* Pricing on phones: the plan table re-flows into a compact three-column comparison
 * instead of scrolling sideways. Billing switch across the top, plan names with their
 * prices straight under them, then each fact's label spanning the box above its three
 * values. Same DOM as desktop, so the billing script, data-sb-skip and the translation
 * engine see exactly the same content. Desktop styles above are untouched.
 * 47.99rem, not 48rem: max-width is inclusive, and a 768px tablet in portrait keeps
 * the desktop table. */
@media (max-width: 47.99rem) {
    .table-hint { display: none; }
    /* Pull the plans closer to the product choice (pricing page only) */
    .page-head:has(.product-toggle) { padding-bottom: var(--s-6); }
    .section:has(.plan-stack) { padding-top: var(--s-6); }
    .plans { min-width: 0; display: block; }
    .plans thead, .plans tbody { display: block; }
    .plans tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .plans th, .plans td { min-width: 0; }

    /* Billing period: a full-width segmented switch, roomy enough for a thumb */
    .plans .corner { grid-column: 1 / -1; padding: var(--s-3); border-bottom: var(--border); }
    .plans .corner:has(> .billing-toggle[hidden]) { display: none; }
    .plans .billing-toggle:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; background: var(--canvas); border: 1px solid var(--rule-strong); border-radius: calc(var(--radius) + 3px); }
    .plans .billing-toggle .toggle-label { min-height: 2.75rem; font-size: var(--step-0); font-weight: 600; background: transparent; border-color: transparent; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
    .plans .billing-toggle .toggle-label:not(.active):hover { color: var(--ink); }
    .plans .billing-toggle .toggle-label.active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
    .plans .billing-toggle .toggle-label.active:focus-visible { box-shadow: inset 0 -3px var(--accent), var(--focus); }

    /* Plan names, then prices directly beneath: the "Price" label is self-evident here,
     * so it is visually hidden but kept for screen readers and translation. */
    /* Plan names and fact labels may be translated into longer words: wrap rather than
     * overlap the next column. */
    .plans thead th { padding: var(--s-3) var(--s-3) 0; border-bottom: 0; font-size: var(--step-0); overflow-wrap: anywhere; hyphens: auto; }
    .plans tbody th { grid-column: 1 / -1; width: auto; padding: var(--s-3) var(--s-3) 0; font-size: var(--step--1); line-height: 1.3; overflow-wrap: anywhere; hyphens: auto; }
    .plans tbody td { padding: var(--s-1) var(--s-3) var(--s-3); overflow-wrap: anywhere; }
    .plans tbody tr:first-child th { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .plans tbody tr:first-child td { padding-bottom: var(--s-4); }
    .plans .price { display: block; line-height: 1.25; }
    /* An amount never splits across lines ($1,990 on a 320px phone) */
    .plans .price b { display: block; font-variant-numeric: tabular-nums; white-space: nowrap; }

    /* Rules: hairline dividers between the plan heads (name + price), one strong line
     * under the prices, then hairlines between facts. */
    .plans tbody tr + tr > * { border-top: 0; }
    .plans tbody tr + tr { border-top: var(--border); }
    .plans tbody tr:nth-child(2) { border-top-color: var(--rule-strong); }
    .plans thead th + th, .plans tbody tr:first-child td + td { border-inline-start: var(--border); }

    /* The action row: one full-width button */
    .plans td.get-started { grid-column: 1 / -1; padding: var(--s-4) var(--s-3); }
    .plans .gs-inner { position: static; width: auto; }
    .plans td.get-started .btn { width: 100%; min-height: 2.75rem; font-size: var(--step-0); }
}

/* The narrowest phones (320–359px): tighter cell padding so three prices and
 * allowances like 1,500,000 fit their columns. */
@media (max-width: 22.49rem) {
    .plans thead th, .plans tbody th, .plans tbody td { padding-inline: var(--s-2); }
}

/* How-it-works: numbered flow */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); counter-reset: flow; }
.steps li { counter-increment: flow; padding-top: var(--s-4); border-top: 2px solid var(--rule-strong); }
.steps li::before { content: counter(flow); display: block; margin-bottom: var(--s-2); font-weight: 600; color: var(--ink-2); }
.steps h3 { font-size: var(--step-1); color: var(--ink); }
.steps p { margin-top: var(--s-2); color: var(--ink-2); font-size: var(--step--1); }
.steps-foot { margin: var(--s-6) auto 0; max-width: 62ch; text-align: center; color: var(--ink-2); }
@media (max-width: 62rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* FAQ page */
.faq-index { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; margin-top: var(--s-6); }
.faq-index a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--s-4); border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-weight: 500; font-size: var(--step--1); text-decoration: none; }
.faq-index a:hover { border-color: var(--accent); color: var(--accent); }
.faq-group { padding-block: var(--s-8); border-top: var(--border); scroll-margin-top: 4.5rem; }
.faq-group > .page > h2 { max-width: 52rem; margin: 0 auto var(--s-6); font-size: var(--step-3); font-weight: 700; letter-spacing: -0.015em; }
.faq-group .faq div { scroll-margin-top: 5rem; }
.faq dd code { font-size: 0.875em; background: var(--accent-soft); padding: 0.1em 0.35em; border-radius: 4px; }
.faq-link { margin-top: var(--s-5); text-align: center; }
.faq-pointers { list-style: none; margin: 0 auto; padding: 0; max-width: 52rem; }
.faq-pointers li { padding-block: var(--s-3); border-top: var(--border); }
.faq-pointers li:first-child { border-top: 0; }
.faq-pointers a { font-weight: 600; }
.faq-pointers span { display: block; color: var(--ink-2); font-size: var(--step--1); }

/* WordPress page */
.download-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3) var(--s-5); margin: var(--s-6) auto 0; padding: var(--s-4) var(--s-5); max-width: 52rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); }
.download-bar p { margin: 0; color: var(--ink-2); font-size: var(--step--1); }
.rail-wide { max-width: 52rem; margin-inline: auto; }
.rail code, .facts code { font-size: 0.875em; background: var(--accent-soft); padding: 0.1em 0.35em; border-radius: 4px; }

/* HTML install guide */
.opts-wrap { max-width: 60rem; margin-inline: auto; }
.opts { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.opts th, .opts td { padding: var(--s-3) var(--s-4); text-align: start; vertical-align: top; }
.opts thead th { border-bottom: 1px solid var(--rule-strong); font-weight: 600; }
.opts tbody tr + tr > * { border-top: var(--border); }
.opts tbody th { font-weight: 500; white-space: nowrap; }
.opts code, .section-head code { font-size: 0.875em; background: var(--accent-soft); padding: 0.1em 0.35em; border-radius: 4px; }
.guide-sub { max-width: 52rem; margin: var(--s-7) auto 0; font-size: var(--step-1); }
.guide-note { max-width: 52rem; margin: var(--s-2) auto var(--s-4); color: var(--ink-2); }
.install-code .code pre { max-height: 28rem; overflow: auto; }
@media (max-width: 40rem) { .opts tbody th { white-space: normal; } .opts th, .opts td { padding: var(--s-3) var(--s-2); } }

/* Install hub */
.guide-list { list-style: none; margin: 0 auto; padding: 0; max-width: 52rem; border: var(--border); border-radius: var(--radius); background: var(--surface); }
.guide-list li { padding: var(--s-5) var(--s-6); }
.guide-list li + li { border-top: var(--border); }
.guide-list h3 { font-size: var(--step-2); }
.guide-list h3 a { text-decoration: none; }
.guide-list h3 a:hover { text-decoration: underline; }
.guide-list p { margin-top: var(--s-2); color: var(--ink-2); max-width: 60ch; }
.guide-list p.guide-meta { margin-top: var(--s-3); font-size: var(--step--1); font-weight: 500; color: var(--ink); }
.back-link { margin-top: var(--s-3); font-size: var(--step--1); }
@media (max-width: 40rem) { .guide-list li { padding: var(--s-4); } }

/* About page */
.about-copy { max-width: 46rem; margin: var(--s-4) auto 0; color: var(--ink-2); font-size: var(--step-1); text-align: center; }
.about-copy:first-of-type { margin-top: 0; }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; max-width: 60rem; }
.contact-form { display: grid; gap: var(--s-5); }
.form-row label { display: block; margin-bottom: var(--s-2); font-weight: 500; }
.form-row .req { color: var(--danger); }
.form-row .opt { color: var(--ink-2); font-weight: 400; }
.form-row textarea.field { min-height: 9rem; padding-block: var(--s-3); resize: vertical; }
.field[aria-invalid="true"] { border-color: var(--danger); }
.field-err { margin-top: var(--s-2); color: var(--danger); font-size: var(--step--1); font-weight: 500; }
.field-hint { margin-top: var(--s-2); color: var(--ink-2); font-size: var(--step--1); }
.form-actions { display: grid; gap: var(--s-3); justify-items: start; }
.form-actions .field-hint { margin-top: 0; }
.form-status { padding: var(--s-3) var(--s-4); border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); }
.form-status[data-kind="ok"] { border-color: var(--ok); }
.form-status[data-kind="error"] { border-color: var(--danger); }
.contact-side { display: grid; gap: var(--s-6); }
.contact-side h2 { font-size: var(--step-1); }
.contact-side p { margin-top: var(--s-2); color: var(--ink-2); }
.contact-side .side-note { font-size: var(--step--1); }
.page-centred .contact-side, .page-centred .contact-form { text-align: start; }
.page-centred .contact-grid { margin-inline: auto; }
@media (max-width: 52rem) { .contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); } }

/* Current page in the nav */
.nav a[aria-current="page"]:not(.btn) { color: var(--ink); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 2px; }

/* FAQ permalinks */
.faq dt .q-link { margin-inline-start: var(--s-2); font-weight: 400; color: var(--ink-2); text-decoration: none; }
.faq dt .q-link:hover, .faq dt .q-link:focus-visible { color: var(--accent); text-decoration: underline; }

/* Legal pages (terms, privacy): long-form reading column */
.legal-archive-note { margin-top: var(--s-3); font-size: var(--step--1); color: var(--ink-2); }
.legal { max-width: 70ch; overflow-wrap: anywhere; }
.legal h2 { margin: var(--s-8) 0 var(--s-4); font-size: var(--step-2); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; scroll-margin-top: 5rem; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { margin: var(--s-6) 0 var(--s-3); font-size: var(--step-1); font-weight: 600; scroll-margin-top: 5rem; }
.legal p, .legal li { color: var(--ink-2); line-height: 1.7; }
.legal p { margin: 0 0 var(--s-4); }
.legal ul, .legal ol { margin: 0 0 var(--s-4); padding-inline-start: var(--s-5); }
.legal li + li { margin-top: var(--s-2); }
.legal strong { color: var(--ink); }