/* credix.bg - one small first-party stylesheet. The tokens below are recorded in DESIGN.md, and
   tests/Feature/DesignTest.php checks that the two agree and that every text pair passes WCAG AA. */
:root {
    --navy: #0b1f3a;
    --navy-soft: #16305a;
    --on-dark: #ffffff;
    --on-dark-muted: #c3cde0;
    --color-text: #0b1f3a;
    --color-muted: #4a5568;
    --color-bg: #ffffff;
    --color-surface: #f4f6f9;
    --color-tint: #e9eef6;
    --color-line: #e3e8ef;
    --color-border: #7b8494;
    --brand-red: #f5373b;
    --cta-red: #d62329;
    --action-red: #b3141a;
    --action-text: #ffffff;
    --font-stack: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --text-display: clamp(2.375rem, 1.5rem + 3vw, 3.75rem);
    --text-h1: clamp(2rem, 1.5rem + 1.8vw, 2.875rem);
    --text-h2: clamp(1.625rem, 1.3rem + 1vw, 2.25rem);
    --text-h3: 1.1875rem;
    --text-body: 1.0625rem;
    --text-small: 0.9375rem;
    --leading: 1.65;
    --leading-tight: 1.15;
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-6: 3rem;
    --space-8: 4rem;
    --space-12: 6rem;
    --radius: 10px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 2px rgba(11, 31, 58, 0.05), 0 2px 6px rgba(11, 31, 58, 0.05);
    --shadow-md: 0 2px 6px rgba(11, 31, 58, 0.05), 0 12px 32px rgba(11, 31, 58, 0.08);
    --shadow-lg: 0 4px 12px rgba(11, 31, 58, 0.05), 0 32px 64px rgba(11, 31, 58, 0.12);
    --max-width: 75rem;
    --measure: 72ch;
    --header-height: 4.75rem;
    --ease: 160ms ease-out;
}

/* Inter, the variable font (SIL Open Font License 1.1, public/fonts/LICENSE), self-hosted from the two
   subsets fontsource ships; unicode-range lets a browser fetch only the subset a page uses. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-cyrillic-wght-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-wght-normal.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;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-stack);
    font-size: var(--text-body);
    line-height: var(--leading);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-3); }

h1, h2, h3 { line-height: var(--leading-tight); letter-spacing: -0.022em; color: var(--color-text); }
h1 { font-size: var(--text-h1); font-weight: 750; margin: 0 0 var(--space-2); }
h2 { font-size: var(--text-h2); font-weight: 720; margin: var(--space-6) 0 var(--space-2); }
h3 { font-size: var(--text-h3); font-weight: 650; letter-spacing: -0.012em; margin: var(--space-3) 0 var(--space-1); }
p, ul, ol, dl, blockquote { margin: 0 0 var(--space-2); }

a { color: var(--action-red); text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color var(--ease), text-decoration-thickness var(--ease); }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--brand-red); outline-offset: 3px; border-radius: 4px; }

[id] { scroll-margin-top: calc(var(--header-height) + var(--space-3)); }

.skip-link {
    position: absolute; left: var(--space-2); top: -4rem; z-index: 30;
    background: var(--color-bg); color: var(--action-red); font-weight: 600;
    padding: var(--space-1) var(--space-2); border: 2px solid var(--brand-red); border-radius: var(--radius);
}
.skip-link:focus { top: var(--space-2); }

.icon { width: 1.5rem; height: 1.5rem; flex: none; }

.kicker {
    margin: 0 0 0.75rem; color: var(--action-red); font-size: 0.8125rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
}

/* ---------- Header and menu ---------- */

.site-header {
    position: sticky; top: 0; z-index: 20;
    background: rgba(255, 255, 255, 0.92); color: var(--color-text);
    -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--color-line);
}
.header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--header-height); }
.brand { display: block; border-radius: var(--radius); }
.brand img { display: block; width: 120px; height: auto; }

.nav { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.25rem; }
.nav a {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--space-2);
    color: var(--color-text); font-weight: 560; font-size: 0.9875rem; text-decoration: none; border-radius: var(--radius);
    transition: background-color var(--ease), color var(--ease);
}
.nav a:hover { background: var(--color-surface); }
.nav a[aria-current="page"] { color: var(--action-red); }
.nav a.nav-cta { background: var(--cta-red); color: var(--action-text); margin-left: var(--space-2); padding: 0 1.375rem; font-weight: 650; }
.nav a.nav-cta:hover { background: var(--action-red); }
.nav a.nav-cta[aria-current="page"] { color: var(--action-text); box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.6); }

.header-phone {
    display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; min-height: 2.75rem; padding: 0 0.75rem;
    color: var(--color-text); text-decoration: none; border-radius: var(--radius); white-space: nowrap;
    transition: background-color var(--ease);
}
.header-phone:hover { background: var(--color-surface); }
.header-phone .icon { width: 1.125rem; height: 1.125rem; color: var(--action-red); }
.header-phone strong { font-weight: 750; font-size: 1.0625rem; letter-spacing: 0.01em; }
.header-phone-label { display: none; color: var(--color-muted); font-size: 0.8125rem; font-weight: 550; }
@media (min-width: 72rem) {
    .header-phone-label { display: inline; }
}

.nav-wide { display: none; }
.menu { position: static; }
.menu-button {
    display: inline-flex; align-items: center; gap: var(--space-1); min-height: 2.75rem; padding: 0 var(--space-2);
    color: var(--color-text); font-weight: 600; cursor: pointer; list-style: none;
    border: 1px solid var(--color-line); border-radius: var(--radius);
    transition: background-color var(--ease), border-color var(--ease);
}
.menu-button::-webkit-details-marker { display: none; }
.menu-button:hover, .menu[open] .menu-button { background: var(--color-surface); border-color: var(--color-border); }
.menu-panel {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--color-bg); border-bottom: 1px solid var(--color-line);
    padding: var(--space-1) var(--space-3) var(--space-3); box-shadow: var(--shadow-md);
}
.nav-stacked { flex-direction: column; align-items: stretch; gap: 0.25rem; }
.nav-stacked a { display: flex; }
.nav-stacked a.nav-cta { margin: var(--space-1) 0 0; justify-content: center; }

@media (min-width: 56rem) {
    .nav-wide { display: block; }
    .menu { display: none; }
}

/* ---------- Page body and sections ---------- */

main:focus { outline: none; }
.page-body { padding-top: var(--space-8); padding-bottom: var(--space-12); }
.section { margin-top: var(--space-12); }
.section > h2:first-child, .section-head h2 { margin-top: 0; }
.section-head { margin-bottom: var(--space-6); max-width: 40rem; }
.section-head p { color: var(--color-muted); }
.section-head-center { margin-left: auto; margin-right: auto; text-align: center; }

/* A full-width light band behind a section, drawn from inside the content column. */
.section-band {
    background: var(--color-surface);
    box-shadow: 0 0 0 100vmax var(--color-surface); clip-path: inset(0 -100vmax);
    padding: var(--space-12) 0;
}

/* ---------- Cards ---------- */

.card {
    background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); padding: var(--space-4);
    transition: box-shadow var(--ease), transform var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.cards { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) {
    .cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Buttons ---------- */

.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
    font: inherit; font-weight: 650; line-height: 1.2; text-decoration: none; cursor: pointer;
    min-height: 3rem; padding: 0.75rem var(--space-3); border-radius: var(--radius);
    color: var(--action-text); background: var(--cta-red); border: 1px solid transparent;
    transition: background-color var(--ease), color var(--ease), border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.button:hover { background: var(--action-red); box-shadow: 0 8px 20px rgba(179, 20, 26, 0.22); }
.button .icon { width: 1.125rem; height: 1.125rem; transition: transform var(--ease); }
.button:hover .icon { transform: translateX(3px); }
.button-primary { font-size: 1.0625rem; min-height: 3.5rem; padding: var(--space-2) var(--space-4); }
.button-hero { min-height: 3.5rem; padding: var(--space-2) var(--space-4); }
.button-secondary { color: var(--color-text); background: var(--color-bg); border-color: var(--color-border); }
.button-secondary:hover { background: var(--color-surface); border-color: var(--color-text); color: var(--color-text); box-shadow: none; }

/* ---------- Notices ---------- */

.warning {
    display: flex; gap: var(--space-1); align-items: center;
    border: 1px solid #f3c4c5; background: #fff5f5; border-radius: var(--radius);
    padding: 0.75rem var(--space-2); font-weight: 650; font-size: var(--text-small); margin: 0 0 var(--space-2);
}
.warning::before { content: "!"; display: grid; place-items: center; flex: none; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--action-red); color: var(--action-text); font-size: 0.8125rem; font-weight: 800; }
.errors { border-left: 4px solid var(--action-red); background: var(--color-surface); border-radius: 0 var(--radius) var(--radius) 0; padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.errors h2 { font-size: var(--text-h3); margin: 0 0 var(--space-1); }
.errors ul { margin: 0; }
.notice { border-left: 4px solid var(--navy); background: var(--color-surface); border-radius: 0 var(--radius) var(--radius) 0; padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.notice p { margin: 0; }

/* ---------- Forms ---------- */

.field { margin-bottom: var(--space-4); }
.field label { display: block; font-weight: 600; margin-bottom: 0.75rem; }
.field-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.field-row input[type="range"] { flex: 1 1 12rem; min-width: 0; min-height: 2.75rem; }
.field-row input[type="number"] { width: 8rem; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.unit { color: var(--color-muted); font-weight: 500; }
.hint { color: var(--color-muted); font-size: var(--text-small); margin: var(--space-1) 0 0; }

/* The range sliders: a thin navy-tinted track and a red thumb with a white ring. */
input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--cta-red) 0, var(--cta-red) var(--fill, 0%), var(--color-tint) var(--fill, 0%)); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--color-tint); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--cta-red); }
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; margin-top: -9px; width: 24px; height: 24px; border-radius: 50%;
    background: var(--cta-red); border: 4px solid var(--color-bg); box-shadow: 0 0 0 1px var(--color-line), 0 2px 8px rgba(11, 31, 58, 0.25);
}
input[type="range"]::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%; background: var(--cta-red); border: 4px solid var(--color-bg);
    box-shadow: 0 0 0 1px var(--color-line), 0 2px 8px rgba(11, 31, 58, 0.25);
}

input[type="number"], input[type="text"], input[type="tel"], select {
    font: inherit; color: var(--color-text); background: var(--color-bg);
    border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.625rem 0.875rem; min-height: 3rem;
    transition: border-color var(--ease), box-shadow var(--ease);
}
input[type="number"]:hover, input[type="text"]:hover, input[type="tel"]:hover, select:hover { border-color: var(--color-text); }
input[type="number"]:focus-visible, input[type="text"]:focus-visible, input[type="tel"]:focus-visible, select:focus-visible { border-color: var(--navy); box-shadow: 0 0 0 4px var(--color-tint); }
input[type="text"], input[type="tel"], select { width: 100%; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--action-red); border-width: 2px; }
input[type="checkbox"] { width: 1.375rem; height: 1.375rem; accent-color: var(--cta-red); }

.consent { display: flex; gap: 0.75rem; align-items: flex-start; }
.consent input { margin-top: 0.2rem; flex: none; }
.consent label { font-weight: 400; margin: 0; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.error { color: var(--action-red); font-weight: 600; margin: var(--space-1) 0 0; }

/* ---------- Figures and the example ---------- */

.figures { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.625rem var(--space-2); }
.figures dt { color: var(--color-muted); }
.figures dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.example { background: var(--color-surface); padding: var(--space-3); border-radius: var(--radius); }
.example h3 { margin-top: 0; font-size: var(--text-body); color: var(--color-text); }
.example p { margin: 0; }
.condition { margin: var(--space-1) 0 0; font-size: var(--text-small); }

/* ---------- Legal text ---------- */

.legal ol, .legal ul { padding-left: 1.75rem; }
.legal h2 { font-size: 1.25rem; margin-top: var(--space-4); }

/* ---------- Home: hero ---------- */

.hero {
    position: relative; overflow: hidden;
    background: radial-gradient(1200px 600px at 85% 10%, var(--color-tint) 0%, rgba(233, 238, 246, 0) 60%), linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
}
.hero-inner { display: grid; gap: var(--space-6); align-items: center; grid-template-columns: minmax(0, 1fr); padding-top: var(--space-4); padding-bottom: var(--space-8); }
.hero-copy { max-width: 36rem; }
.hero h1 { font-size: var(--text-display); font-weight: 780; letter-spacing: -0.032em; line-height: 1.05; margin: 0 0 var(--space-3); }
.eyebrow {
    display: inline-flex; align-items: center; gap: 0.625rem; margin: 0 0 var(--space-2);
    padding: 0.375rem 0.875rem; border-radius: 999px; background: var(--color-bg); border: 1px solid var(--color-line);
    color: var(--color-text); font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.02em;
}
.eyebrow::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--brand-red); }
.hero-lead { font-size: 1.1875rem; color: var(--color-muted); margin: 0 0 var(--space-3); max-width: 32rem; }
.hero-points { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: 0.625rem; color: var(--color-text); font-weight: 550; }
.hero-points li { display: flex; align-items: center; gap: 0.75rem; }
.hero-points .icon { stroke: var(--action-red); width: 1.125rem; height: 1.125rem; padding: 0.25rem; box-sizing: content-box; border-radius: 50%; background: #fde8e8; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; }
.hero-phone { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--color-text); text-decoration: none; font-weight: 500; }
.hero-phone .icon { width: 1.25rem; height: 1.25rem; padding: 0.625rem; box-sizing: content-box; border-radius: 50%; background: var(--color-bg); border: 1px solid var(--color-line); }
.hero-phone:hover strong { text-decoration: underline; }

.hero-figure { position: relative; margin: 0; }
.hero-media {
    display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 70% 40%;
    border-radius: 28px; box-shadow: var(--shadow-lg);
}
.hero-badge {
    position: absolute; left: var(--space-2); top: var(--space-2);
    display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem var(--space-3) 0.875rem var(--space-2);
    background: var(--color-bg); border-radius: 16px; box-shadow: var(--shadow-md);
}
.hero-badge-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: var(--color-tint); color: var(--navy); }
.hero-badge-text { display: grid; gap: 0.125rem; }
.hero-badge-label { font-size: 0.8125rem; color: var(--color-muted); font-weight: 550; }
.hero-badge-value { font-size: 1.125rem; font-weight: 720; letter-spacing: -0.01em; color: var(--color-text); line-height: 1.2; }

@media (min-width: 64rem) {
    .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-8); padding-top: var(--space-6); padding-bottom: var(--space-12); }
    .hero-badge { top: auto; left: calc(-1 * var(--space-6)); bottom: var(--space-6); }
}

/* ---------- Home: the calculator card ---------- */

.calculator {
    position: relative; z-index: 2;
    margin-top: calc(-1 * var(--space-4));
    background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: var(--space-4) var(--space-3);
    display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "controls" "result" "example";
}
.calc-controls { grid-area: controls; }
.calc-result { grid-area: result; }
.calc-example { grid-area: example; }
.calculator h2 { margin: 0 0 var(--space-1); }
.calc-lead { color: var(--color-muted); margin-bottom: var(--space-4); }
.calculator [data-recalculate] { min-height: 2.75rem; padding: 0.5rem var(--space-3); font-size: var(--text-small); }
.result-box {
    background: linear-gradient(160deg, var(--navy-soft) 0%, var(--navy) 70%); color: var(--on-dark);
    border-radius: 16px; padding: var(--space-4); margin-bottom: var(--space-3);
}
.result-box h3 { margin: 0 0 var(--space-1); font-size: var(--text-small); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-dark-muted); }
.result-box .figures dt { color: var(--on-dark-muted); }
.result-box .figures dd { color: var(--on-dark); }
.result-box .figures dt:first-of-type { grid-column: 1 / -1; }
.result-box .figures dd:first-of-type {
    grid-column: 1 / -1; text-align: left; font-size: clamp(2.75rem, 2rem + 2vw, 3.5rem); font-weight: 780; line-height: 1.05; letter-spacing: -0.03em;
    padding-bottom: var(--space-3); margin-bottom: var(--space-1); border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.calc-apply { margin: var(--space-3) 0 0; }
.calc-apply .button { width: 100%; }

@media (min-width: 64rem) {
    .calculator {
        margin-top: calc(-1 * var(--space-8));
        padding: var(--space-6);
        column-gap: var(--space-8);
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        grid-template-areas: "controls result" "example example";
    }
}

/* ---------- Home: steps, trust, closing ---------- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); counter-reset: step; }
.step { padding: 0; overflow: hidden; display: flex; flex-direction: column; border: 0; box-shadow: var(--shadow-sm); }
.step:hover { transform: translateY(-2px); }
.step img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.step-body { position: relative; padding: var(--space-6) var(--space-4) var(--space-4); }
.step-number {
    position: absolute; top: calc(-1 * var(--space-3)); left: var(--space-4);
    display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px;
    background: var(--cta-red); color: var(--action-text); font-weight: 750; font-size: 1.125rem;
    box-shadow: 0 8px 20px rgba(179, 20, 26, 0.28);
}
.step h3 { margin: 0 0 var(--space-1); font-size: 1.25rem; }
.step p { margin: 0; color: var(--color-muted); }
@media (min-width: 48rem) {
    .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.trust { padding: 0; }
.trust a { color: var(--color-text); }
.trust-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
.trust-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
    padding: var(--space-4) var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-bg);
}
.trust-icon { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 14px; background: var(--color-tint); color: var(--navy); }
.trust-item strong { display: block; color: var(--color-text); font-size: 1.0625rem; line-height: 1.35; margin-bottom: 0.375rem; }
.trust-note { display: block; color: var(--color-muted); font-size: var(--text-small); }
@media (min-width: 36rem) {
    .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
    .trust-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.checks { list-style: none; padding: 0; margin: 0; }
.checks li { position: relative; padding-left: 2.25rem; margin-bottom: 0.875rem; }
.checks li::before {
    content: ""; position: absolute; left: 0; top: 0.2em; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: #fde8e8;
}
.checks li::after {
    content: ""; position: absolute; left: 0.5rem; top: 0.42em; width: 0.375rem; height: 0.6875rem;
    border: solid var(--action-red); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.closing { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.closing-conditions h2 { font-size: var(--text-h2); margin-bottom: var(--space-3); }
.cta-card {
    position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: var(--space-6) var(--space-4);
    background: radial-gradient(600px 300px at 100% 0%, rgba(214, 35, 41, 0.35) 0%, rgba(214, 35, 41, 0) 60%), var(--navy);
    color: var(--on-dark-muted);
}
.cta-card h2 { color: var(--on-dark); margin: 0 0 var(--space-2); }
.cta-card a { color: var(--on-dark); }
.cta-card .button { color: var(--action-text); text-decoration: none; }
.cta-actions { margin: var(--space-4) 0 0; }
@media (min-width: 56rem) {
    .closing { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
    .cta-card { padding: var(--space-6); }
}

/* ---------- Inner pages: the band, the readable column, the form card ---------- */

.band { background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%); border-bottom: 1px solid var(--color-line); }
.band-inner { display: grid; gap: var(--space-4); align-items: center; grid-template-columns: minmax(0, 1fr); padding-top: var(--space-6); padding-bottom: var(--space-6); }
.band h1 { margin: 0; font-size: var(--text-display); letter-spacing: -0.03em; }
.band .eyebrow { margin-bottom: var(--space-3); }
.band-media {
    display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
@media (min-width: 48rem) {
    .band-inner { padding-top: var(--space-8); padding-bottom: var(--space-8); }
    .band-with-media .band-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
    .band-media { aspect-ratio: 16 / 10; }
}

.prose { max-width: var(--measure); overflow-wrap: break-word; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.375rem; }
.prose h3 { margin-top: var(--space-4); }
blockquote { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); background: var(--color-surface); border-left: 4px solid var(--navy); border-radius: 0 var(--radius) var(--radius) 0; }
blockquote p:last-child { margin-bottom: 0; }
.section-tight { margin-top: var(--space-4); }
.card ul { padding-left: 1.25rem; }
.card ul.checks { padding-left: 0; }
.card h2 { font-size: var(--text-h3); }

.form-layout { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
.form-intro { max-width: var(--measure); }
.form-card {
    background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); padding: var(--space-4) var(--space-3);
}
.form-card .button-primary { width: 100%; }
@media (min-width: 64rem) {
    .form-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-8); align-items: start; }
    .form-card { padding: var(--space-6); }
}

/* ---------- Footer ---------- */

.site-footer { background: var(--navy); color: var(--on-dark-muted); font-size: var(--text-small); padding: var(--space-12) 0 var(--space-6); }
.site-footer strong { color: var(--on-dark); }
.site-footer a { color: var(--on-dark); }
.site-footer a:hover { color: var(--on-dark); text-decoration-thickness: 2px; }
.site-footer p { margin: 0 0 var(--space-1); }
.footer-grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
.footer-brand { display: block; width: 120px; height: auto; margin-bottom: var(--space-3); }
.footer-links { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.footer-links a { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (min-width: 48rem) {
    .footer-grid { grid-template-columns: 1.1fr 1.2fr 1fr; gap: var(--space-8); }
}

/* ---------- Motion ---------- */

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