/*
 * Velara frontend foundation
 * Pure white canvas, #111111 structure, restrained #A8862E accents.
 * Final licensed font files can be self-hosted later without changing roles.
 */

:root {
    --color-canvas: #ffffff;
    --color-ink: #111111;
    --color-gold: #82691e;
    --color-gold-brand: #a8862e;
    --color-body: #4a4a4a;
    --color-muted: #6e6e6e;   /* darkened during the block pass; 5.10:1 on white, comfortably clear of AA */
    --color-disclaimer: #666666;
    --color-hairline: #e5e5e5;
    --color-error: #8a2f2f;
    --color-success: #2d6347;

    /*
     * Sanctioned hero-band ink. The owner's hero exception is the ONLY place a dark
     * surface is permitted; it ends at the bottom edge of the band. Also backs image
     * elements while they decode, where it is never visible as a surface.
     */
    --color-night: #101412;

    /*
     * Gold is type and hairlines only, never a fill. Two tints because one value cannot
     * clear WCAG AA on both grounds:
     *   --color-gold        #82691E  small gold type on white          (5.5:1)
     *   --color-gold-brand  #A8862E  the brand mark and hairline rules
     *   --color-gold-on-dark #D9C07A gold type inside the hero band    (measured, see
     *                                docs/HERO_ART_DIRECTION.md)
     */
    --color-gold-on-dark: #d9c07a;

    /*
     * Floating blocks. Owner direction: blocks stay white and lift off the canvas on a
     * shadow rather than sitting on a tint. Two layers - a tight contact shadow so the edge
     * reads, and a wide soft one for the lift. Kept low-opacity: this has to say "considered
     * paper", not "SaaS card".
     */
    --shadow-block: 0 1px 2px rgba(17, 17, 17, 0.05), 0 12px 32px rgba(17, 17, 17, 0.07);
    --shadow-block-raised: 0 2px 4px rgba(17, 17, 17, 0.06), 0 20px 48px rgba(17, 17, 17, 0.1);

    --font-serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --step--1: clamp(0.78rem, 0.75rem + 0.12vw, 0.86rem);
    --step-0: clamp(0.94rem, 0.9rem + 0.2vw, 1.05rem);
    --step-1: clamp(1.15rem, 1.02rem + 0.5vw, 1.4rem);
    --step-2: clamp(1.45rem, 1.18rem + 1vw, 2rem);
    --step-3: clamp(1.9rem, 1.4rem + 2vw, 3rem);
    --step-4: clamp(2.35rem, 1.55rem + 3.4vw, 4.5rem);

    --space-1: 0.35rem;
    --space-2: 0.6rem;
    --space-3: 0.9rem;
    --space-4: 1.25rem;
    --space-5: 1.75rem;
    --space-6: 2.5rem;
    --space-7: 3.5rem;
    --space-8: clamp(3rem, 5.5vw, 5rem);

    --shell: 87.5rem;
    --shell-narrow: 52rem;
    --gutter: clamp(1.1rem, 4vw, 2.5rem);
    --measure: 42rem;
    --hairline: 1px solid var(--color-hairline);
    --hairline-ink: 1px solid var(--color-ink);
    --hairline-gold: 1px solid var(--color-gold-brand);
    --focus-ring: 3px solid var(--color-gold);
    --focus-offset: 4px;
    --transition: 160ms ease;
    --transition-considered: 260ms cubic-bezier(0.22, 1, 0.36, 1);
    --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
}

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

[hidden] {
    display: none !important;
}

html {
    color-scheme: light;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 20rem;
    overflow-x: clip;
    background: var(--color-canvas);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.7;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    border-radius: 0;
    color: inherit;
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    touch-action: manipulation;
}

a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

p,
h1,
h2,
h3,
blockquote,
figure {
    margin-block-start: 0;
}

figure {
    margin-inline: 0;
    margin-block-end: 0;
}

p,
li,
blockquote,
figcaption,
code {
    overflow-wrap: anywhere;
}

:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

main:focus {
    outline: 0;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link {
    position: fixed;
    z-index: 100;
    inset: 0 auto auto 0;
    padding: 0.8rem 1rem;
    translate: 0 -130%;
    background: var(--color-ink);
    color: var(--color-canvas);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-decoration: none;
}

.skip-link:focus {
    translate: 0;
}

.shell {
    width: min(100% - (var(--gutter) * 2), var(--shell));
    margin-inline: auto;
}

.shell--narrow {
    max-width: var(--shell-narrow);
}

.section-space {
    padding-block: var(--space-8);
}

.environment-banner {
    padding: 0.55rem var(--gutter);
    border-bottom: var(--hairline-ink);
    background: var(--color-ink);
    color: var(--color-canvas);
    font-size: 0.69rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-align: center;
    text-transform: uppercase;
}

.site-header {
    position: relative;
    z-index: 20;
    background: var(--color-canvas);
}

.site-header__inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    min-height: 4.75rem;
}

.wordmark {
    color: var(--color-ink);
    font-family: var(--font-serif);
    font-size: 1.02rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
}

.wordmark span {
    color: var(--color-gold);
}

.nav-toggle {
    display: none;
    min-width: 3.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 0;
    border: 0;
    background: transparent;
    color: var(--color-ink);
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.nav-toggle__line {
    display: block;
    width: 1.4rem;
    height: 1px;
    margin-left: 0.55rem;
    background: currentColor;
    box-shadow: 0 0.35rem currentColor;
    transition: rotate var(--transition), box-shadow var(--transition);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line {
    rotate: 45deg;
    box-shadow: 0 0 currentColor;
}

.site-nav {
    display: grid;
    width: 100%;
    padding-block: var(--space-4) var(--space-5);
    border-top: var(--hairline);
    background: var(--color-canvas);
}

.site-nav__list,
.site-footer ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.site-nav__list {
    display: grid;
    gap: 0;
}

.site-nav__list a,
.site-nav__apply {
    display: block;
    padding-block: 0.7rem;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-decoration: none;
}

.site-nav__list a {
    border-bottom: var(--hairline);
}

.site-nav__list a[aria-current="page"] {
    color: var(--color-gold);
}

.site-nav__apply {
    display: inline-flex;
    width: 100%;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-4);
    padding: 0.72rem 1rem;
    border: 1px solid var(--color-ink);
    background: var(--color-ink);
    color: var(--color-canvas);
    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;
    transition: background-color var(--transition-considered), border-color var(--transition-considered), color var(--transition-considered), transform var(--transition-considered);
}

.site-nav__apply:hover {
    border-color: var(--color-gold-brand);
    background: var(--color-gold-brand);
    color: var(--color-ink);
}

.site-nav__apply:active {
    transform: scale(0.98);
}

.js .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

.js .site-nav[data-open="false"] {
    display: none;
}

.js .site-nav[data-open="true"] {
    display: grid;
}

.campaign-header {
    display: flex;
    min-height: 4.75rem;
    align-items: center;
    justify-content: center;
}

.eyebrow {
    margin-bottom: var(--space-3);
    color: var(--color-gold);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    line-height: 1.5;
    text-transform: uppercase;
}

.editorial-heading {
    max-width: 22ch;
    margin-bottom: var(--space-4);
    color: var(--color-ink);
    font-family: var(--font-serif);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.12;
}

.editorial-heading em {
    color: var(--color-gold);
    font-weight: 400;
}

.editorial-heading--section {
    font-size: var(--step-3);
}

.editorial-heading--hero {
    font-size: var(--step-4);
}

.editorial-heading--display {
    max-width: 18ch;
    font-size: var(--step-4);
}

.section-intro {
    max-width: var(--measure);
}

.section-intro--center {
    margin-inline: auto;
    text-align: center;
}

.section-intro--center .editorial-heading,
.section-intro--center .section-intro__copy {
    margin-inline: auto;
}

.section-intro__copy {
    max-width: 58ch;
    margin-bottom: 0;
    color: var(--color-body);
}

.editorial-copy {
    max-width: 62ch;
    color: var(--color-body);
}

.editorial-copy p + p {
    margin-top: var(--space-4);
}

.action {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color var(--transition-considered), color var(--transition-considered), border-color var(--transition-considered), transform var(--transition-considered);
}

.action:active {
    transform: scale(0.98);
}

.action--primary,
.action--outline,
.action--text,
.action--gold-link {
    padding: 0.85rem 1.35rem;
    border: 1px solid currentColor;
}

.action--primary {
    border: 1px solid var(--color-ink);
    background: var(--color-ink);
    color: var(--color-canvas);
}

.action--primary:hover {
    background: var(--color-canvas);
    color: var(--color-ink);
}

.action--outline {
    border: 1px solid var(--color-ink);
    color: var(--color-ink);
}

.action--outline:hover {
    background: var(--color-ink);
    color: var(--color-canvas);
}

.action--text {
    color: var(--color-ink);
}

.action--gold-link {
    color: var(--color-gold);
}

.action--text:hover,
.action--gold-link:hover {
    border-color: var(--color-ink);
    background: var(--color-ink);
    color: var(--color-canvas);
}

.media-placeholder {
    display: grid;
    min-width: 0;
    margin-bottom: 0;
    place-content: center;
    padding: var(--space-5);
    border-block: var(--hairline);
    background: var(--color-canvas);
    color: var(--color-muted);
    text-align: center;
}

.media-placeholder--landscape {
    width: 100%;
    min-height: 18rem;
    aspect-ratio: auto;
}

.media-placeholder--portrait {
    width: 100%;
    aspect-ratio: 4 / 5;
    border: var(--hairline);
}

.media-placeholder--square {
    aspect-ratio: 1;
    border: var(--hairline);
}

.media-placeholder__mark {
    width: 2.8rem;
    height: 2.8rem;
    margin: 0 auto var(--space-4);
    border: var(--hairline-gold);
}

.media-placeholder figcaption {
    display: grid;
    gap: var(--space-1);
    max-width: 32rem;
    font-size: var(--step--1);
}

.media-placeholder strong {
    color: var(--color-ink);
    font-size: 0.7rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: clamp(1.5rem, 5vw, 2.6rem);
    border: var(--hairline);
    background: var(--color-canvas);
}

.card--emphasis {
    border-color: var(--color-gold);
}

.card__title,
.product-summary__title {
    margin-bottom: var(--space-3);
    font-family: var(--font-serif);
    font-size: var(--step-2);
    font-weight: 500;
    line-height: 1.22;
}

.card__copy {
    max-width: 48ch;
    margin-bottom: var(--space-5);
    color: var(--color-body);
}

.card__action {
    margin-top: auto;
}

.path-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.stat-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-block: var(--hairline-ink);
}

.stat {
    min-width: 0;
    padding: var(--space-5) var(--space-3);
    text-align: center;
}

.stat + .stat {
    border-left: var(--hairline);
}

.stat__value {
    margin-bottom: var(--space-2);
    color: var(--color-gold);
    font-family: var(--font-serif);
    font-size: var(--step-2);
    line-height: 1.15;
}

.stat__label {
    margin-bottom: var(--space-1);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.stat__context {
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: 0.73rem;
}

.testimonial {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 0;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: var(--hairline);
}

.testimonial blockquote {
    margin-bottom: var(--space-4);
    font-family: var(--font-serif);
    font-size: var(--step-1);
    font-style: italic;
    line-height: 1.55;
}

.testimonial figcaption {
    display: grid;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.testimonial__detail {
    color: var(--color-gold);
}

.placeholder-label {
    width: fit-content;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-1);
    border-bottom: var(--hairline-gold);
    color: var(--color-gold);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fine-print {
    margin-bottom: 0;
    color: var(--color-disclaimer);
    font-size: 0.72rem;
    line-height: 1.6;
}

.product-list {
    display: grid;
    border-top: var(--hairline);
}

.product-summary {
    display: grid;
    min-width: 0;
    gap: var(--space-5);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: var(--hairline);
    border-top: 0;
}

.product-summary--featured {
    border-color: var(--color-gold);
    border-top: var(--hairline-gold);
}

.product-summary__content p:last-child {
    margin-bottom: 0;
    color: var(--color-body);
}

.product-summary__purchase {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-4);
}

.price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
}

.price__current {
    font-family: var(--font-serif);
    font-size: var(--step-2);
    line-height: 1;
}

.price__comparison {
    color: var(--color-muted);
    font-size: var(--step--1);
    text-decoration: line-through;
}

.price__note {
    flex-basis: 100%;
    color: var(--color-disclaimer);
    font-size: 0.68rem;
}

.field {
    min-width: 0;
}

.field label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-ink);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 3rem;
    padding: 0.72rem 0.85rem;
    border: 1px solid #b7b7b7;
    background: var(--color-canvas);
    color: var(--color-ink);
}

.field textarea {
    min-height: 8rem;
    resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
    border-color: var(--color-ink);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
    border-color: var(--color-ink);
    outline: var(--focus-ring);
    outline-offset: 1px;
}

.field--error input,
.field--error select,
.field--error textarea {
    border-color: var(--color-error);
}

.field__hint,
.field__error {
    margin: var(--space-1) 0 0;
    font-size: 0.73rem;
    line-height: 1.5;
}

.field__hint {
    color: var(--color-muted);
}

.field__error {
    color: var(--color-error);
    font-weight: 600;
}

.checkbox-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
}

.checkbox-field input {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.1rem 0 0;
    border-radius: 0;
    accent-color: var(--color-ink);
}

.checkbox-field label {
    display: block;
    color: var(--color-ink);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.5;
}

.checkbox-field__detail {
    margin: var(--space-1) 0 0;
    color: var(--color-muted);
    font-size: 0.72rem;
}

.checkbox-field__detail a {
    color: var(--color-gold);
}

.validation-summary {
    padding: var(--space-4);
    border: 1px solid var(--color-error);
}

.validation-summary h3 {
    margin-bottom: var(--space-2);
    font-family: var(--font-serif);
    font-size: var(--step-1);
}

.validation-summary ul {
    margin-bottom: 0;
}

.state-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-top: var(--hairline);
}

.state {
    display: grid;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-5);
    border: var(--hairline);
    border-top: 0;
}

.state__indicator {
    width: 0.85rem;
    height: 0.85rem;
    margin-top: 0.35rem;
    border: 1px solid var(--color-ink);
}

.state--loading .state__indicator {
    border-color: var(--color-gold);
    animation: quiet-pulse 1.4s ease-in-out infinite;
}

.state--success .state__indicator {
    border-color: var(--color-success);
    background: var(--color-success);
}

.state--error .state__indicator {
    border-color: var(--color-error);
}

.state h3 {
    margin-bottom: var(--space-1);
    font-family: var(--font-serif);
    font-size: var(--step-1);
    font-weight: 500;
}

.state p {
    margin-bottom: 0;
    color: var(--color-body);
    font-size: var(--step--1);
}

@keyframes quiet-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

.site-footer {
    border-top: var(--hairline-ink);
}

.site-footer__grid {
    display: grid;
    gap: var(--space-6);
    padding-block: var(--space-7);
}

.site-footer__brand p {
    max-width: 30ch;
    margin: var(--space-4) 0 0;
    color: var(--color-body);
    font-size: var(--step--1);
}

.site-footer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.site-footer__actions .action {
    min-height: 2.75rem;
    padding: 0.68rem 0.85rem;
    font-size: 0.62rem;
}

.wordmark--footer {
    font-size: 0.9rem;
}

.site-footer__heading {
    margin-bottom: var(--space-3);
    color: var(--color-gold);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.site-footer__nav ul {
    display: block;
    columns: 2;
    column-gap: var(--space-5);
}

.site-footer__nav li {
    break-inside: avoid;
}

.site-footer__nav a {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    color: var(--color-body);
    font-size: 0.78rem;
    text-decoration-color: transparent;
}

.site-footer__nav a:hover {
    color: var(--color-ink);
    text-decoration-color: currentColor;
}

/* Two stacked disclosure lines on the left, the agency credit on the right. */
.site-footer__disclosure {
    display: grid;
    gap: 0.2rem;
}

.site-footer__disclosure p,
.site-footer__credit {
    margin: 0;
}

.site-footer__credit {
    white-space: nowrap;
}

.site-footer__company {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    align-items: baseline;
    justify-content: space-between;
    padding-block: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.66rem;
}

.site-footer__company p {
    margin-bottom: 0;
}

.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-5);
    align-items: center;
}

.section-actions,
.faq-group__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    margin-top: var(--space-5);
}

.section-actions--center {
    justify-content: center;
}

.reference-media {
    width: 100%;
}

.reference-content {
    padding-block: var(--space-8);
}

.reference-section {
    padding-block: var(--space-7);
    border-top: var(--hairline-ink);
}

.reference-section > .section-intro {
    margin-bottom: var(--space-6);
}

.token-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: var(--hairline);
    border-left: var(--hairline);
}

.token {
    display: grid;
    min-width: 0;
    gap: var(--space-1);
    padding: var(--space-4);
    border-right: var(--hairline);
    border-bottom: var(--hairline);
}

.token__sample {
    display: block;
    width: 100%;
    height: 0.3rem;
    margin-bottom: var(--space-2);
    border: var(--hairline);
    background: var(--color-canvas);
}

.token--black .token__sample {
    border-color: var(--color-ink);
    background: var(--color-ink);
}

.token--gold .token__sample {
    border-color: var(--color-gold);
    background: var(--color-gold);
}

.token--hairline .token__sample {
    background: var(--color-hairline);
}

.token strong {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.token code {
    color: var(--color-muted);
    font-family: var(--font-sans);
    font-size: 0.7rem;
}

.type-specimen {
    display: grid;
    gap: var(--space-6);
    margin-top: var(--space-7);
}

.type-specimen__label {
    display: block;
    margin-bottom: var(--space-3);
    color: var(--color-gold);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.type-specimen__display {
    margin-bottom: 0;
    font-family: var(--font-serif);
    font-size: var(--step-3);
    line-height: 1.2;
}

.type-specimen p:last-child {
    max-width: 52ch;
    margin-bottom: 0;
    color: var(--color-body);
}

.editorial-grid,
.proof-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    align-items: center;
}

.reference-form {
    display: grid;
    gap: var(--space-5);
    max-width: 58rem;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    border: var(--hairline);
}

.form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
}

.consent-group {
    display: grid;
    gap: var(--space-4);
    padding-block: var(--space-5);
    border-block: var(--hairline);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
}

.demo-form-response:empty {
    display: none;
}

.demo-form-response:not(:empty) {
    padding: var(--space-4);
    border: 1px solid var(--color-success);
    color: var(--color-success);
    font-size: var(--step--1);
    font-weight: 600;
}

.route-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-top: var(--hairline-ink);
    border-bottom: var(--hairline-ink);
}

.route-summary p {
    display: grid;
    gap: var(--space-2);
    margin-bottom: 0;
    padding: var(--space-5);
    text-align: center;
}

.route-summary p + p {
    border-top: var(--hairline);
}

.route-summary strong {
    color: var(--color-gold);
    font-family: var(--font-serif);
    font-size: var(--step-3);
    font-weight: 400;
    line-height: 1;
}

.route-summary span {
    color: var(--color-body);
    font-size: var(--step--1);
}

.phase-placeholder {
    min-height: 55vh;
    text-align: center;
}

.phase-placeholder__action {
    margin-top: var(--space-6);
}

.page-section,
.application-section,
.faq-page,
.legal-layout,
.founder-story,
.contact-layout {
    padding-block: var(--space-8);
}

.page-section > .section-intro,
.application-section > .section-intro {
    margin-bottom: var(--space-7);
}

.split-section,
.founder-intro,
.founder-story,
.contact-layout,
.case-study-layout {
    display: grid;
    min-width: 0;
    gap: clamp(2.5rem, 7vw, 6rem);
    align-items: center;
    padding-block: var(--space-8);
    border-bottom: var(--hairline);
}

.split-section h2,
.content-with-notice h2,
.closing-cta h2,
.founder-intro h2,
.founder-story h2,
.partner-profile h2,
.engagement-band h2,
.contact-layout h2,
.contact-boundary h2,
.case-study-layout h2,
.case-study-evidence h2,
.split-copy h2 {
    max-width: 22ch;
    margin-bottom: var(--space-4);
    font-family: var(--font-serif);
    font-size: var(--step-3);
    font-weight: 500;
    line-height: 1.15;
}

.split-section p,
.content-with-notice p,
.closing-cta p,
.founder-intro p,
.founder-story p,
.partner-profile p,
.engagement-band p,
.contact-boundary p,
.case-study-layout p,
.case-study-evidence p,
.split-copy p {
    color: var(--color-body);
}

.pillar-grid,
.review-grid,
.fit-grid,
.standalone-product-grid,
.case-study-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
}

.fit-grid {
    gap: var(--space-3);
}

.pillar-grid,
.review-grid {
    margin-top: var(--space-7);
    gap: var(--space-3);
}

.pillar-item,
.review-placeholder {
    min-width: 0;
    padding: clamp(1.75rem, 4.5vw, 2.75rem);
    background: var(--color-canvas);
    box-shadow: var(--shadow-block);
}

.pillar-item__number,
.feature-list__number,
.legal-document__number {
    margin-bottom: var(--space-4);
    color: var(--color-gold);
    font-family: var(--font-serif);
    font-size: var(--step-1);
}

.pillar-item__title,
.feature-list__title,
.timeline__title {
    margin-bottom: var(--space-3);
    font-family: var(--font-serif);
    font-size: var(--step-2);
    font-weight: 500;
    line-height: 1.25;
}

.pillar-item p:last-child,
.feature-list__item p:last-child,
.timeline__step p:last-child {
    margin-bottom: 0;
    color: var(--color-body);
}

.notice {
    min-width: 0;
    padding: var(--space-5);
    border: var(--hairline);
    border-left: 2px solid var(--color-gold);
}

.notice--medical {
    border-color: var(--color-ink);
}

.notice--trust {
    border-left-color: var(--color-ink);
}

.notice__label {
    margin-bottom: var(--space-2) !important;
    color: var(--color-gold) !important;
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.notice p:last-child {
    margin-bottom: 0;
    color: var(--color-body);
    font-size: var(--step--1);
}

.content-with-notice,
.partner-profile,
.engagement-band,
.contact-boundary,
.case-study-evidence,
.split-copy {
    display: grid;
    min-width: 0;
    gap: var(--space-6);
    align-items: center;
}

.feature-list {
    display: grid;
    border-top: var(--hairline-ink);
}

.feature-list__item {
    display: grid;
    min-width: 0;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: var(--space-4);
    padding-block: var(--space-5);
    border-bottom: var(--hairline);
}

.timeline {
    display: grid;
    padding: 0;
    gap: var(--space-3);
    margin: 0;
    list-style: none;
}

.timeline__step {
    min-width: 0;
    padding: clamp(1.75rem, 4.5vw, 2.75rem);
    background: var(--color-canvas);
    box-shadow: var(--shadow-block);
}

.timeline__period {
    margin-bottom: var(--space-4);
    color: var(--color-gold);
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.calculator-callout,
.engagement-band,
.contact-boundary,
.case-study-evidence,
.program-value {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    align-items: center;
    justify-content: space-between;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    background: var(--color-canvas);
    box-shadow: var(--shadow-block);
}

.engagement-band,
.contact-boundary,
.case-study-evidence {
    margin-block: var(--space-5);
}

.calculator-callout > div,
.program-value > div {
    max-width: 48rem;
}

.calculator-callout h2,
.program-value h2 {
    margin-bottom: 0;
    font-family: var(--font-serif);
    font-size: var(--step-2);
    font-weight: 500;
    line-height: 1.25;
}

.calculator-callout h2 em,
.program-value h2 em {
    color: var(--color-gold);
    font-weight: 400;
}

.recognition-strip {
    padding-block: var(--space-6);
    text-align: center;
}

.home-method,
.proof-section,
.home-paths,
.home-reviews {
    padding-block: var(--space-8);
}

.section-link {
    margin-top: var(--space-6);
    text-align: center;
}

.proof-section > .section-intro,
.home-paths > .section-intro,
.home-reviews > .section-intro {
    margin-bottom: var(--space-7);
}

.proof-feature {
    display: grid;
    min-width: 0;
    border: var(--hairline-ink);
}

/* --------------------------------------------------------------------------
   Consented client video
   -------------------------------------------------------------------------- */

.client-video {
    display: grid;
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 2rem);
    margin: 0;
    gap: var(--space-3);
    background: var(--color-night);
}

/* Vertical source: cap the width so a 9:16 clip does not tower over the copy beside it. */
.client-video__player {
    width: 100%;
    max-width: 22rem;
    height: auto;
    justify-self: center;
    background: #000000;
    object-fit: contain;
}

.client-video__caption {
    display: grid;
    gap: var(--space-1);
    justify-self: center;
    max-width: 30ch;
    text-align: center;
}

.client-video__label {
    color: var(--color-gold-on-dark);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.client-video__caption .fine-print {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
}
.proof-feature__copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.8rem, 6vw, 4rem);
}

.proof-feature__copy blockquote,
.case-study-quote {
    margin-bottom: var(--space-5);
    font-family: var(--font-serif);
    font-size: var(--step-2);
    font-style: italic;
    line-height: 1.45;
}

.proof-marker,
.case-study-evidence__marker p {
    margin-bottom: var(--space-5);
    color: var(--color-gold);
    font-family: var(--font-serif);
    font-size: var(--step-3);
    line-height: 1.1;
}

.proof-marker span,
.case-study-evidence__marker span {
    display: block;
    margin-top: var(--space-2);
    color: var(--color-muted);
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.review-placeholder__status,
.review-placeholder__source {
    color: var(--color-gold);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.review-placeholder__quote {
    min-height: 6rem;
    margin-block: var(--space-5);
    font-family: var(--font-serif);
    font-size: var(--step-1);
    font-style: italic;
    line-height: 1.55;
}

.home-reviews__disclaimer {
    margin-top: var(--space-4);
    text-align: center;
}

.founder-intro,
.founder-story {
    grid-template-columns: minmax(0, 1fr);
}

.founder-intro .media-placeholder,
.founder-story .media-placeholder,
.case-study-layout .media-placeholder {
    max-width: 29rem;
}

.featured-product {
    margin-bottom: var(--space-5);
}

.standalone-product-grid .product-summary {
    border-top: var(--hairline);
}

.program-value {
    margin-block: var(--space-4) var(--space-8);
}

.program-value p {
    margin: var(--space-2) 0 0;
    color: var(--color-muted);
    font-size: var(--step--1);
}

.case-study-card {
    display: grid;
    min-width: 0;
    border: var(--hairline-ink);
}

.case-study-card .media-placeholder {
    border: 0;
    border-bottom: var(--hairline);
}

.case-study-card__content {
    padding: clamp(1.6rem, 5vw, 2.7rem);
}

.case-study-card__content h3 {
    margin-bottom: var(--space-3);
    font-family: var(--font-serif);
    font-size: var(--step-2);
    font-weight: 500;
}

.results-disclaimer {
    margin-top: var(--space-4);
}

.case-study-evidence {
    margin-block: var(--space-4);
}

.case-study-quote {
    padding-left: var(--space-5);
    border-left: var(--hairline-gold);
}

.case-study-quote cite {
    display: block;
    margin-top: var(--space-4);
    color: var(--color-gold);
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.faq-page {
    max-width: 61rem;
}

.faq-group + .faq-group {
    margin-top: var(--space-7);
}

.faq-group__title {
    padding-bottom: var(--space-4);
    border-bottom: var(--hairline-ink);
    margin-bottom: 0;
    font-family: var(--font-serif);
    font-size: var(--step-2);
    font-weight: 500;
}

.faq-item {
    border-bottom: var(--hairline);
}

.faq-item summary {
    position: relative;
    padding: var(--space-5) 3rem var(--space-5) 0;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    position: absolute;
    top: 50%;
    right: 0.2rem;
    color: var(--color-gold);
    content: "+";
    font-family: var(--font-serif);
    font-size: var(--step-2);
    font-weight: 400;
    translate: 0 -50%;
}

.faq-item[open] summary::after {
    content: "−";
}

.faq-item__answer {
    max-width: 48rem;
    padding: 0 3rem var(--space-5) 0;
    color: var(--color-body);
}

.faq-item__answer p:last-child {
    margin-bottom: 0;
}

.fit-card {
    min-width: 0;
    padding: clamp(1.75rem, 4.5vw, 2.75rem);
    border: 0;
    background: var(--color-canvas);
    box-shadow: var(--shadow-block);
}

.fit-card--emphasis {
    box-shadow: var(--shadow-block-raised);
    outline: 1px solid var(--color-gold);
    outline-offset: 0;
}

.fit-card h3 {
    margin-bottom: var(--space-4);
    font-family: var(--font-serif);
    font-size: var(--step-2);
    font-weight: 500;
}

.editorial-list {
    padding-left: 1.25rem;
    margin: 0;
    color: var(--color-body);
}

.editorial-list li + li {
    margin-top: var(--space-3);
}

.engagement-band,
.partner-profile,
.contact-boundary {
    margin-block: var(--space-4);
}

.application-section {
    padding-top: clamp(2.5rem, 5vw, 3.5rem);
    max-width: 66rem;
}

.application-form,
.contact-form {
    display: grid;
    gap: var(--space-6);
    padding: clamp(1.4rem, 5vw, 3rem);
    border: var(--hairline-ink);
}

.application-form fieldset {
    display: grid;
    min-width: 0;
    gap: var(--space-5);
    padding: 0;
    border: 0;
    margin: 0;
}

.application-form fieldset + fieldset {
    padding-top: var(--space-6);
    border-top: var(--hairline);
}

.application-form legend {
    margin-bottom: var(--space-5);
    color: var(--color-gold);
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.contact-layout {
    align-items: start;
}

.contact-details dl {
    margin-block: var(--space-5);
    border-top: var(--hairline-ink);
}

.contact-details dl div {
    display: grid;
    gap: var(--space-2);
    padding-block: var(--space-4);
    border-bottom: var(--hairline);
}

.contact-details dt {
    color: var(--color-muted);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.contact-details dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.contact-form-wrap > .section-intro {
    margin-bottom: var(--space-5);
}

.legal-layout {
    display: grid;
    min-width: 0;
    gap: var(--space-7);
    align-items: start;
}

.legal-navigation {
    border-block: var(--hairline-ink);
}

.legal-navigation__label {
    padding-block: var(--space-4);
    border-bottom: var(--hairline);
    margin-bottom: 0;
    color: var(--color-gold);
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.legal-navigation ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.legal-navigation a {
    display: block;
    padding-block: var(--space-3);
    color: var(--color-body);
    font-size: var(--step--1);
    text-decoration: none;
}

.legal-navigation a:hover,
.legal-navigation a[aria-current="page"] {
    color: var(--color-ink);
    text-decoration: underline;
}

.legal-document > .notice {
    margin-bottom: var(--space-7);
}

.legal-document > section {
    padding-block: var(--space-6);
    border-top: var(--hairline);
}

.legal-document > section h2 {
    margin-bottom: var(--space-3);
    font-family: var(--font-serif);
    font-size: var(--step-2);
    font-weight: 500;
}

.legal-document > section p:last-child {
    max-width: 48rem;
    margin-bottom: 0;
    color: var(--color-body);
}

.legal-document__status {
    padding: var(--space-5);
    border: var(--hairline-ink);
    margin-top: var(--space-5);
}

.legal-document__status p {
    margin-bottom: var(--space-2);
    color: var(--color-body);
    font-size: var(--step--1);
}

.legal-document__status p:last-child {
    margin-bottom: 0;
}

/* Phase 3: conversion flows, assessment and social-feed presentation */

.campaign-header__inner {
    display: flex;
    min-height: 4.75rem;
    align-items: center;
    justify-content: space-between;
}

.campaign-header__label {
    color: var(--color-gold);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-align: right;
    text-transform: uppercase;
}

.campaign-trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: center;
    justify-content: center;
    padding-block: var(--space-5);
    border-top: var(--hairline);
    margin-top: var(--space-6);
}

.campaign-trust a {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    color: var(--color-muted);
    font-size: 0.67rem;
    text-underline-offset: 0.25em;
}

.campaign-section,
.campaign-form-section,
.calculator-layout,
.social-journal {
    padding-block: var(--space-8);
}

.campaign-section > .section-intro,
.campaign-form-section > .section-intro {
    margin-bottom: var(--space-7);
}

.campaign-offer,
.campaign-value,
.product-purchase-band,
.guide-delivery,
.results-offer,
.upsell-offer {
    padding-block: var(--space-7);
    border-block: var(--hairline-ink);
}

.campaign-offer,
.campaign-value,
.product-purchase-band,
.guide-delivery {
    display: grid;
    min-width: 0;
    gap: var(--space-6);
    align-items: center;
}

.campaign-offer h2,
.campaign-value h2,
.product-purchase-band h2,
.product-detail-layout h2,
.guide-delivery h2,
.results-offer h2,
.calculator-guide-preview h2,
.checkout-payment h2,
.upsell-offer h2,
.social-feed__heading h2 {
    margin-bottom: var(--space-4);
    font-family: var(--font-serif);
    font-size: var(--step-3);
    font-weight: 500;
    line-height: 1.16;
}

.campaign-offer p,
.campaign-value p,
.product-detail-layout p,
.guide-delivery p,
.results-offer p,
.calculator-guide-preview p,
.checkout-payment p,
.upsell-offer p {
    color: var(--color-body);
}

.campaign-boundary {
    padding-block: var(--space-6);
}

.value-stack {
    border-top: var(--hairline-ink);
    margin: 0;
}

.value-stack > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-bottom: var(--hairline);
}

.value-stack dt,
.value-stack dd {
    margin: 0;
}

.value-stack dd {
    color: var(--color-muted);
    text-align: right;
}

.value-stack__included {
    color: var(--color-gold) !important;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lead-form,
.calculator-form {
    display: grid;
    gap: var(--space-5);
    padding: clamp(1.4rem, 5vw, 3rem);
    border: var(--hairline-ink);
}

.product-detail-layout {
    display: grid;
    min-width: 0;
    gap: clamp(2.5rem, 7vw, 6rem);
    align-items: center;
    padding-block: var(--space-8);
}

.product-detail-layout .media-placeholder {
    width: min(100%, 25rem);
}

.product-detail__audience {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: var(--hairline);
}

.product-purchase-band {
    margin-bottom: var(--space-4);
}

.product-purchase-band h2 {
    margin-bottom: 0;
    color: var(--color-gold);
    font-size: var(--step-4);
}

.calculator-layout {
    display: grid;
    min-width: 0;
    gap: var(--space-7);
    align-items: start;
}

.calculator-layout > div > .section-intro {
    margin-bottom: var(--space-6);
}

.calculator-guide-preview {
    padding: clamp(1.5rem, 5vw, 2.7rem);
    border: var(--hairline-gold);
}

.calculator-guide-preview .notice {
    margin-top: var(--space-6);
}

.calculator-form__status:empty {
    display: none;
}

/* Slots filled from the server response. Hidden until there is something to show. */
.calculator-state__guidance {
    max-width: 58ch;
    margin-top: var(--space-3);
    color: var(--color-body);
}

.calculator-state__errors {
    max-width: 58ch;
    padding-left: 1.1rem;
    margin-top: var(--space-3);
    color: var(--color-error);
    font-size: var(--step--1);
}

.calculator-state__errors li + li {
    margin-top: 0.3rem;
}

/* dd before dt in the DOM so the figure reads first; reversed visually. */
.calculator-state__estimates {
    display: grid;
    margin: var(--space-4) 0 0;
    gap: var(--space-3);
}

.calculator-state__estimates dd {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    line-height: 1.1;
}

.calculator-state__estimates dt {
    color: var(--color-muted);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.calculator-state__reference {
    margin-top: var(--space-3);
    color: var(--color-muted);
}

@media (min-width: 40rem) {
    .calculator-state__estimates {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }
}

.calculator-state {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
    padding: var(--space-5);
    border: var(--hairline-ink);
}

.calculator-state__indicator {
    width: 1rem;
    height: 1rem;
    border: var(--hairline-gold);
    margin-top: 0.25rem;
}

.calculator-state--loading .calculator-state__indicator {
    border-right-color: transparent;
    animation: phase-three-spin 900ms linear infinite;
}

.calculator-state--success .calculator-state__indicator {
    background: var(--color-gold);
}

.calculator-state--red-flag,
.calculator-state--unavailable,
.calculator-state--validation,
.calculator-state--consent {
    border-left: 2px solid var(--color-gold);
}

.calculator-state__label {
    margin-bottom: var(--space-2);
    color: var(--color-gold);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.calculator-state h3 {
    margin-bottom: var(--space-2);
    font-family: var(--font-serif);
    font-size: var(--step-1);
    font-weight: 500;
}

.calculator-state p:last-of-type {
    margin-bottom: var(--space-3);
    color: var(--color-body);
    font-size: var(--step--1);
}

@keyframes phase-three-spin {
    to { rotate: 360deg; }
}

.calculator-results__figures {
    padding-block: clamp(2.5rem, 6vw, 4rem);
    border-bottom: var(--hairline);
    text-align: center;
}

.result-metrics {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-block: var(--space-7) var(--space-5);
    border-block: var(--hairline-ink);
}

.result-metrics > div {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-5);
    text-align: center;
}

.result-metrics > div + div {
    border-top: var(--hairline);
}

.result-metrics strong {
    color: var(--color-gold);
    font-family: var(--font-serif);
    font-size: var(--step-3);
    font-weight: 400;
}

.result-metrics span {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.result-path {
    margin-bottom: var(--space-2);
}

.result-path strong {
    color: var(--color-gold);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.guide-delivery {
    margin-block: var(--space-7);
}

.results-offer {
    max-width: 58rem;
    margin-bottom: var(--space-7);
    text-align: center;
}

.results-offer h2,
.results-offer > p {
    margin-inline: auto;
}

.results-offer__price {
    margin-block: var(--space-5);
}

.results-offer__price del {
    margin-right: var(--space-3);
    color: var(--color-muted);
}

.results-offer__price strong {
    color: var(--color-gold);
    font-family: var(--font-serif);
    font-size: var(--step-2);
    font-weight: 500;
}

.checkout-layout {
    display: grid;
    min-width: 0;
    gap: var(--space-7);
    align-items: start;
    padding-block: var(--space-7);
}

.checkout-product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4);
    padding: var(--space-5);
    border: var(--hairline);
}

.checkout-product h3 {
    margin-bottom: var(--space-1);
    font-family: var(--font-serif);
    font-size: var(--step-1);
    font-weight: 500;
}

.checkout-product p {
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: var(--step--1);
}

.checkout-product strong {
    font-family: var(--font-serif);
    font-size: var(--step-1);
    font-weight: 500;
}

.order-bump {
    padding: var(--space-5);
    border: var(--hairline-gold);
    margin-top: var(--space-4);
}

.order-bump__control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
}

.order-bump__control input {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.1rem;
    accent-color: var(--color-ink);
}

.order-bump__control label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.order-bump__headline {
    margin-block: var(--space-4);
    font-family: var(--font-serif);
    font-size: var(--step-1);
}

.order-bump__headline strong,
.order-bump__saving {
    color: var(--color-gold);
}

.order-bump__saving {
    margin: var(--space-4) 0 0;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-align: right;
    text-transform: uppercase;
}

.order-totals {
    margin-block: var(--space-5) 0;
}

.order-totals > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4);
    padding-block: var(--space-2);
}

.order-totals dt,
.order-totals dd {
    margin: 0;
}

.order-totals__total {
    padding-block: var(--space-4) !important;
    border-block: var(--hairline-ink);
    margin-top: var(--space-2);
    font-family: var(--font-serif);
    font-size: var(--step-1);
}

.checkout-payment {
    display: grid;
    gap: var(--space-5);
    padding: clamp(1.4rem, 5vw, 2.5rem);
    border: var(--hairline-ink);
}

.checkout-payment h2,
.checkout-payment > p {
    margin-bottom: 0;
}

.gateway-placeholder {
    padding: var(--space-5);
    border: var(--hairline);
    color: var(--color-muted);
    text-align: center;
}

.gateway-placeholder p {
    margin-bottom: var(--space-2);
    color: var(--color-gold);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.gateway-placeholder span {
    font-size: var(--step--1);
}

.checkout-payment .campaign-trust {
    margin-top: 0;
}

.upsell-page .hero-band {
    border-bottom: 0;
}

.upsell-offer {
    margin-bottom: var(--space-7);
    text-align: center;
}

.upsell-offer .value-stack {
    margin-block: var(--space-6);
    text-align: left;
}

.upsell-offer__price {
    margin-bottom: var(--space-5);
}

.upsell-offer__price strong {
    color: var(--color-gold);
    font-family: var(--font-serif);
    font-size: var(--step-2);
    font-weight: 500;
}

.assessment-shell {
    padding-block: var(--space-7);
}

.assessment-progress {
    margin-bottom: var(--space-5);
}

.assessment-progress p {
    margin-bottom: var(--space-2);
    color: var(--color-gold);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.assessment-progress progress {
    display: block;
    width: 100%;
    height: 0.35rem;
    border: 0;
    background: var(--color-hairline);
    color: var(--color-gold);
}

.assessment-progress progress::-webkit-progress-bar { background: var(--color-hairline); }
.assessment-progress progress::-webkit-progress-value { background: var(--color-gold); }
.assessment-progress progress::-moz-progress-bar { background: var(--color-gold); }

[data-assessment-form] {
    padding: clamp(1.4rem, 5vw, 3rem);
    border: var(--hairline-ink);
}

.assessment-step {
    min-width: 0;
    padding: 0;
    border: 0;
    margin: 0;
}

.assessment-step legend {
    max-width: 32ch;
    margin-bottom: var(--space-5);
    font-family: var(--font-serif);
    font-size: var(--step-2);
    line-height: 1.25;
}

.choice-list {
    display: grid;
    gap: var(--space-2);
}

.choice-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: stretch;
    border: var(--hairline);
}

.choice-field:focus-within {
    border-color: var(--color-gold);
}

.choice-field input {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0 var(--space-4);
    align-self: center;
    accent-color: var(--color-ink);
}

.choice-field label {
    padding: var(--space-4) var(--space-4) var(--space-4) 0;
    cursor: pointer;
}

.assessment-consent {
    margin-top: var(--space-6);
}

.assessment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-6);
    border-top: var(--hairline);
    margin-top: var(--space-6);
}

.assessment-skip {
    display: block;
    padding: var(--space-3) 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    margin: var(--space-5) auto 0;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 0.7rem;
}

.assessment-response:not(:empty) {
    padding: var(--space-5);
    border: var(--hairline-gold);
    color: var(--color-body);
}

.assessment-privacy {
    margin-top: var(--space-4);
    text-align: center;
}

.social-journal > .notice {
    margin-bottom: var(--space-8);
}

.social-feed + .social-feed {
    margin-top: var(--space-8);
}

.social-feed__heading {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: end;
    justify-content: space-between;
    padding-bottom: var(--space-5);
    border-bottom: var(--hairline-ink);
}

.social-feed__heading h2 {
    margin-bottom: 0;
}

.social-feed__attribution,
.social-feed__cache-note {
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
}

.social-feed__profile {
    display: grid;
    gap: var(--space-1);
    justify-items: end;
    text-align: right;
}

.social-feed__profile a,
.social-feed__profile span {
    font-size: 0.75rem;
}

.social-feed__profile a {
    color: var(--color-gold);
    text-underline-offset: 0.25em;
}

.social-feed__profile span {
    color: var(--color-muted);
}

.social-feed__cache-note {
    padding-block: var(--space-3);
    border-bottom: var(--hairline);
}

.social-feed__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    padding-top: var(--space-5);
}

.social-card {
    min-width: 0;
    border: var(--hairline);
}

.social-card__media {
    position: relative;
    display: grid;
    min-width: 0;
    aspect-ratio: 1;
    place-content: center;
    border-bottom: var(--hairline);
    color: var(--color-muted);
    font-size: var(--step--1);
    text-align: center;
}

.social-card__media--video {
    aspect-ratio: 16 / 9;
}

.social-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.social-card__badge {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    padding-bottom: var(--space-1);
    border-bottom: var(--hairline-gold);
    color: var(--color-gold);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.social-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    place-content: center;
    padding-left: 0.2rem;
    border: var(--hairline-gold);
    color: var(--color-gold);
    translate: -50% -50%;
}
.social-card__body {
    padding: var(--space-5);
}

.social-card__meta,
.social-card__pending {
    color: var(--color-gold);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.social-card__body > p:not(.social-card__meta) {
    color: var(--color-body);
}

.social-card__body a {
    color: var(--color-gold);
    font-size: var(--step--1);
}

.social-card--skeleton {
    display: grid;
    gap: var(--space-3);
    min-height: 20rem;
    align-content: end;
    padding: var(--space-5);
    animation: phase-three-pulse 1.5s ease-in-out infinite;
}

.social-card--skeleton span {
    display: block;
    height: 0.7rem;
    background: var(--color-hairline);
}

.social-card--skeleton span:first-child {
    min-height: 12rem;
}

.social-card--skeleton span:last-child {
    width: 65%;
}

@keyframes phase-three-pulse {
    50% { opacity: 0.45; }
}

.social-state-reference {
    margin-top: var(--space-8);
    border-block: var(--hairline-ink);
}

.social-state-reference > summary {
    padding-block: var(--space-4);
    cursor: pointer;
    color: var(--color-gold);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.social-state-reference > div {
    padding-block: var(--space-6);
}

.social-state-reference .social-feed + .social-feed {
    margin-top: var(--space-6);
}

@media (min-width: 38rem) {
    .token-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .form-grid,
    .state-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .type-specimen {
        grid-template-columns: 1.25fr 1fr;
    }

    .route-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .route-summary p + p {
        border-top: 0;
        border-left: var(--hairline);
    }

    .pillar-grid,
    .review-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fit-grid,
    .standalone-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .standalone-product-grid .product-summary:nth-child(even) {
        border-left: 0;
    }

    .timeline {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .result-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .result-metrics > div + div {
        border-top: 0;
        border-left: var(--hairline);
    }

    .social-feed__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 52rem) {
    .media-placeholder--landscape {
        min-height: 0;
        aspect-ratio: 16 / 7;
    }

    .site-header__inner {
        flex-wrap: nowrap;
        min-height: 4.75rem;
    }

    .nav-toggle,
    .js .nav-toggle {
        display: none;
    }

    .site-nav,
    .js .site-nav[data-open="false"],
    .js .site-nav[data-open="true"] {
        display: flex;
        width: auto;
        align-items: center;
        padding: 0;
        border-top: 0;
    }

    .site-nav__list {
        display: flex;
        gap: clamp(0.75rem, 1.55vw, 1.3rem);
        align-items: center;
    }

    .site-nav__list a {
        padding-block: 0.65rem;
        border-bottom: 1px solid transparent;
    }

    .site-nav__list a:hover,
    .site-nav__list a[aria-current="page"] {
        border-bottom-color: currentColor;
    }

    .site-nav__apply {
        width: auto;
        margin: 0 0 0 clamp(0.9rem, 2vw, 1.5rem);
    }

    .path-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .path-grid .card + .card {
        border-left: 0;
    }

    .product-summary {
        grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.38fr);
        align-items: center;
    }

    .editorial-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(17rem, 0.65fr);
    }

    .proof-grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }

    .site-footer__grid {
        grid-template-columns: minmax(15rem, 1fr) minmax(18rem, 1.15fr) minmax(11rem, 0.7fr);
    }


    /*
     * WCAG 2.5.8 asks for 24x24 CSS px on pointer devices, so 2.25rem rows are comfortably
     * clear here; touch sizes keep the 2.75rem default.
     */
    .site-footer__nav a {
        min-height: 2.25rem;
    }

    .site-footer__nav--legal ul {
        columns: 1;
    }

    /* Two stacked disclosure lines on the left, the agency credit on the right. */
.site-footer__disclosure {
    display: grid;
    gap: 0.2rem;
}

.site-footer__disclosure p,
.site-footer__credit {
    margin: 0;
}

.site-footer__credit {
    white-space: nowrap;
}

.site-footer__company {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer__company p:last-child {
        text-align: right;
    }

    .proof-feature,
    .founder-intro,
    .founder-story,
    .split-section,
    .case-study-layout,
    .contact-layout,
    .case-study-evidence,
    .split-copy {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .proof-feature {
        grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
    }
    .content-with-notice,
    .partner-profile,
    .engagement-band,
    .contact-boundary {
        grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
    }

    .legal-layout {
        grid-template-columns: minmax(12rem, 0.35fr) minmax(0, 1fr);
    }

    .legal-layout__aside {
        position: sticky;
        top: var(--space-5);
    }

    .campaign-offer,
    .campaign-value,
    .product-purchase-band,
    .guide-delivery {
        grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 0.75fr);
    }

    .product-detail-layout,
    .calculator-layout,
    .checkout-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calculator-layout {
        grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
    }

    .calculator-guide-preview {
        position: sticky;
        top: var(--space-5);
    }

    .checkout-layout {
        grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
    }
}

/* ==========================================================================
   Phase 4 - hero band system, editorial rhythm, restrained motion.

   Hero art direction is DATA, not CSS. Which photograph a route gets, its focal
   point, overlay strength, height and alignment all come from the `hero` key in
   app/routes.php via app/support/hero.php. There are deliberately no `.page--*`
   selector lists in this file: adding or swapping a hero must never require a
   CSS edit.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Chrome
   -------------------------------------------------------------------------- */

.wordmark {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.72rem;
}

.wordmark__mark {
    width: 2.3rem;
    height: 2.1rem;
    flex: 0 0 auto;
    object-fit: contain;
}

.wordmark .wordmark__name {
    color: var(--color-ink);
}

.site-header__inner,
.campaign-header__inner {
    min-height: 4.75rem;
}

.site-nav__list a,
.site-nav__apply {
    min-height: 2.75rem;
}

.site-nav__list a {
    display: inline-flex;
    align-items: center;
}

/* --------------------------------------------------------------------------
   Image bands

   One implementation of "photograph with text on it", shared by the hero at the
   top of a route and the feature bands that break up the page below it.
   `.image-band` carries the photograph, overlay and inverted type; `.hero-band`
   and `.feature-band` only add what differs.
   -------------------------------------------------------------------------- */

.image-band {
    position: relative;
    display: grid;
    align-items: end;
    overflow: hidden;
    padding: 0;
    background: var(--color-night);
    color: var(--color-canvas);
    isolation: isolate;
}

.image-band__media {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
}

.image-band__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--band-focal, var(--hero-focal, center));
}

.image-band::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
    pointer-events: none;
}

.image-band__inner {
    position: relative;
    z-index: 2;
    padding-block: clamp(3.25rem, 6.5vw, 5.75rem);
}

.image-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.image-band__footnote {
    max-width: 52ch;
    margin-top: var(--space-4);
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: var(--step--1);
    letter-spacing: 0.02em;
}

/* Overlays ----------------------------------------------------------------- */

/*
 * Tuned against the darkest AND lightest pixels that actually fall behind the
 * headline safe area of each crop. Measured by tools/check-hero-contrast.py.
 */
.image-band--overlay-standard::after {
    background:
        linear-gradient(
            90deg,
            rgba(10, 13, 12, 0.92) 0%,
            rgba(10, 13, 12, 0.86) 34%,
            rgba(10, 13, 12, 0.46) 72%,
            rgba(10, 13, 12, 0.3) 100%
        ),
        linear-gradient(0deg, rgba(10, 13, 12, 0.5) 0%, transparent 58%);
}

.image-band--overlay-strong::after {
    background:
        linear-gradient(
            90deg,
            rgba(10, 13, 12, 0.95) 0%,
            rgba(10, 13, 12, 0.91) 38%,
            rgba(10, 13, 12, 0.66) 74%,
            rgba(10, 13, 12, 0.52) 100%
        ),
        linear-gradient(0deg, rgba(10, 13, 12, 0.55) 0%, transparent 60%);
}

/* Centred headlines sit over the middle of the frame, so the wash must be even. */
.hero-band--center.image-band--overlay-standard::after,
.feature-band--center.image-band--overlay-standard::after {
    background: linear-gradient(0deg, rgba(10, 13, 12, 0.88) 0%, rgba(10, 13, 12, 0.8) 100%);
}

.hero-band--center.image-band--overlay-strong::after,
.feature-band--center.image-band--overlay-strong::after {
    background: linear-gradient(0deg, rgba(10, 13, 12, 0.92) 0%, rgba(10, 13, 12, 0.88) 100%);
}

.image-band--overlay-none::after {
    background: none;
}

/* A band with no photograph still reads as a dark editorial pause. */
.image-band--flat {
    background: var(--color-night);
}

/* Type and actions inside any band ---------------------------------------- */

.image-band .editorial-heading {
    color: var(--color-canvas);
    text-wrap: balance;
}

.image-band .editorial-heading em,
.image-band .eyebrow {
    color: var(--color-gold-on-dark);
}

.image-band .section-intro__copy {
    max-width: 52ch;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.65;
}

.image-band .action--primary {
    border-color: var(--color-canvas);
    background: var(--color-canvas);
    color: var(--color-ink);
}

.image-band .action--primary:hover,
.image-band .action--primary:focus-visible {
    border-color: var(--color-gold-on-dark);
    background: var(--color-gold-on-dark);
    color: var(--color-ink);
}

.image-band .action--outline,
.image-band .action--text,
.image-band .action--gold-link {
    border-color: rgba(255, 255, 255, 0.68);
    background: transparent;
    color: var(--color-canvas);
}

.image-band .action--outline:hover,
.image-band .action--text:hover,
.image-band .action--gold-link:hover {
    border-color: var(--color-canvas);
    background: var(--color-canvas);
    color: var(--color-ink);
}

.image-band .action:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

/* Heights ------------------------------------------------------------------ */

.image-band--h-full {
    min-height: clamp(33rem, calc(100svh - 5rem), 52rem);
}

.image-band--h-tall {
    min-height: clamp(26rem, 60svh, 38rem);
}

.image-band--h-standard {
    min-height: clamp(21rem, 46svh, 31rem);
}

.image-band--h-compact {
    min-height: clamp(14rem, 30svh, 20rem);
}

/* --------------------------------------------------------------------------
   Hero band
   -------------------------------------------------------------------------- */

/*
 * No background or colour here: the image variant inherits them from `.image-band`, the
 * plain variant sets its own below. Declaring them at this specificity would beat
 * `.image-band` on source order and paint the photographic hero white.
 */
.hero-band {
    position: relative;
    display: grid;
    align-items: center;
    overflow: hidden;
    padding: 0;
}

.hero-band__inner {
    position: relative;
    z-index: 2;
    padding-block: clamp(3.25rem, 6.5vw, 5.75rem);
}

.hero-band .section-intro {
    margin-bottom: 0;
}

.hero-band--left .section-intro,
.hero-band--left .editorial-heading,
.hero-band--left .section-intro__copy {
    margin-inline: 0;
    text-align: left;
}

.hero-band--left .image-band__actions {
    justify-content: flex-start;
}

.hero-band--center .hero-band__inner {
    max-width: var(--shell-narrow);
}

.hero-band--center .image-band__actions {
    justify-content: center;
}

.hero-band--center .section-intro__copy,
.hero-band--center .editorial-heading {
    margin-inline: auto;
}

.hero-band--center .image-band__footnote {
    margin-inline: auto;
    text-align: center;
}

.hero-band.image-band--h-full .editorial-heading {
    max-width: 14ch;
    font-size: clamp(2.6rem, 6.8vw, 5.4rem);
    letter-spacing: -0.042em;
    line-height: 1;
}

.hero-band.image-band--h-standard .editorial-heading {
    max-width: 16ch;
    font-size: clamp(2.25rem, 5.2vw, 4.15rem);
    letter-spacing: -0.036em;
    line-height: 1.04;
}

/*
 * Compact heroes sit on pages with a single job (the application, the calculator). Trim the
 * band padding so the form is not pushed a full viewport down the page.
 */
.hero-band.image-band--h-compact .hero-band__inner {
    padding-block: clamp(2.25rem, 4vw, 3.25rem);
}

.hero-band.image-band--h-compact .section-intro__copy {
    max-width: 46ch;
}

.hero-band.image-band--h-compact .editorial-heading {
    max-width: 20ch;
    font-size: clamp(1.85rem, 4vw, 3rem);
    letter-spacing: -0.03em;
    line-height: 1.1;
}

/* Plain variant - the typographic hero on the white canvas ----------------- */

.hero-band--plain {
    border-bottom: var(--hairline-ink);
    background: var(--color-canvas);
    color: var(--color-ink);
}

.hero-band--plain .hero-band__inner {
    padding-block: clamp(2.75rem, 5.5vw, 4.75rem);
}

.hero-band--plain .section-intro__copy {
    color: var(--color-body);
}

.hero-band--plain .image-band__footnote {
    color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   Feature band - the mid-page photographic interruption
   -------------------------------------------------------------------------- */

.feature-band {
    align-items: center;
    margin-block: clamp(3rem, 5vw, 4.5rem);
}

.feature-band .editorial-heading {
    max-width: 18ch;
    font-size: clamp(1.95rem, 4.4vw, 3.4rem);
    letter-spacing: -0.032em;
    line-height: 1.08;
}

.feature-band--left .section-intro,
.feature-band--left .editorial-heading,
.feature-band--left .section-intro__copy {
    margin-inline: 0;
    text-align: left;
}

.feature-band--left .image-band__actions {
    justify-content: flex-start;
}

.feature-band--center .image-band__inner {
    max-width: var(--shell-narrow);
}

.feature-band--center .editorial-heading,
.feature-band--center .section-intro__copy {
    margin-inline: auto;
}

.feature-band--center .image-band__actions {
    justify-content: center;
}

.feature-band--center .image-band__footnote {
    margin-inline: auto;
    text-align: center;
}

/* A short list of supporting points inside a band. Hairline rules, no icons. */
.band-points {
    display: grid;
    max-width: 60ch;
    padding: 0;
    margin: var(--space-4) 0 0;
    gap: 0;
    list-style: none;
}

.band-points li {
    padding-block: var(--space-2);
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--step-0);
}

.band-points li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.feature-band--center .band-points {
    margin-inline: auto;
}

.band-points--ink li {
    border-top-color: var(--color-hairline);
    color: var(--color-body);
}

.band-points--ink li:last-child {
    border-bottom-color: var(--color-hairline);
}

/* --------------------------------------------------------------------------
   Split band - full-bleed photograph beside a white content column
   -------------------------------------------------------------------------- */

.split-band {
    display: grid;
    min-width: 0;
    margin-block: clamp(3rem, 5vw, 4.5rem);
    grid-template-columns: minmax(0, 1fr);
}

/*
 * The two path bands are a matched pair, and the intro above belongs to them. Collapse the
 * gaps so they read as one unit instead of three stranded sections.
 */
.home-paths-intro + .split-band,
.home-paths-intro + .feature-band,
.split-band + .split-band,
.feature-band + .split-band {
    margin-top: 0;
}

/* Adjacent margins collapse to the larger value, so the leading band must give up its
   bottom margin too. Without :has() support this degrades to a normal gap, not a break. */
.split-band:has(+ .split-band),
.feature-band:has(+ .split-band) {
    margin-bottom: 0;
}

/*
 * A band that closes a page must sit flush against the footer. Its bottom margin was
 * painting a white bar between two dark surfaces. :last-child is relative to the parent,
 * so this also covers bands nested inside a page wrapper.
 */
.feature-band:last-child,
.split-band:last-child {
    margin-bottom: 0;
}

/* Same rule for any other trailing section, including ones inside a page wrapper. */
main > :last-child,
main > :last-child > :last-child {
    margin-bottom: 0;
}

.split-band__media {
    position: relative;
    min-width: 0;
    padding: clamp(1.25rem, 5vw, 2.5rem);
}

.split-band__picture {
    display: block;
    overflow: hidden;
    background: var(--color-night);
    aspect-ratio: 16 / 9;
}

.split-band__picture,
.split-band__picture img {
    width: 100%;
    height: 100%;
}

.split-band__picture img {
    object-fit: cover;
    object-position: var(--band-focal, center);
}

.split-band__content {
    display: grid;
    min-width: 0;
    align-items: center;
    padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}

.split-band__inner {
    width: min(100% - (var(--gutter) * 2), calc(var(--shell) / 2));
    margin-inline: auto;
}

.split-band__copy {
    margin-top: var(--space-4);
}

.split-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.split-band__footnote {
    margin-top: var(--space-4);
    margin-bottom: 0;
}

@media (min-width: 52rem) {
    .split-band {
        align-items: center;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /*
     * Fills the column width but at a fixed, capped height. Previously this stretched to
     * match the copy column, producing photographs two-thirds of the viewport tall.
     */
    .split-band__media {
        display: grid;
        align-self: stretch;
        place-content: center;
        height: auto;
        padding: clamp(1.75rem, 3.5vw, 3rem);
    }

    /*
     * Square beside the copy column, sized to sit close to the text block's height. A wide
     * 16:9 crop next to a tall paragraph read as an afterthought.
     */
    .split-band__picture {
        width: auto;
        max-width: 100%;
        height: clamp(20rem, 34vw, 30rem);
        max-height: 100%;
        aspect-ratio: 1;
    }

    /* Media on the right: swap the visual order, keep the DOM order for readers. */
    .split-band--media-right .split-band__media {
        order: 2;
    }

    .split-band__inner {
        width: min(100% - (var(--gutter) * 2), 34rem);
        margin-inline: 0;
        padding-inline: var(--gutter);
    }

    .split-band--media-left .split-band__inner {
        margin-inline: 0 auto;
    }

    .split-band--media-right .split-band__inner {
        margin-inline: auto 0;
    }
}

/* --------------------------------------------------------------------------
   Editorial imagery in the body
   -------------------------------------------------------------------------- */

.action--primary,
.action--outline,
.action--text,
.action--gold-link {
    min-height: 3.25rem;
    padding: 0.9rem 1.55rem;
}

.editorial-media {
    position: relative;
    min-width: 0;
    overflow: hidden;
    margin: 0;
    background: var(--color-night);
}

.editorial-media picture,
.editorial-media img {
    width: 100%;
    height: 100%;
}

.editorial-media img {
    object-fit: cover;
    filter: saturate(0.86) contrast(1.03);
}

.editorial-media--landscape {
    aspect-ratio: 3 / 2;
}

.editorial-media--cinematic {
    aspect-ratio: 16 / 9;
}

.editorial-media--portrait {
    aspect-ratio: 4 / 5;
}

.editorial-media--square {
    aspect-ratio: 1;
}

.editorial-media figcaption {
    position: absolute;
    inset: auto 0 0;
    padding: 3.75rem clamp(1rem, 3vw, 1.75rem) 1rem;
    margin: 0;
    background: linear-gradient(transparent, rgba(10, 13, 12, 0.78));
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.68rem;
    letter-spacing: 0.035em;
}

.split-section .editorial-media--portrait,
.founder-intro .editorial-media,
.product-detail-layout .editorial-media {
    width: min(100%, 31rem);
    justify-self: center;
}

/* --------------------------------------------------------------------------
   Homepage rhythm
   -------------------------------------------------------------------------- */

/*
 * The calculator strip is the sanctioned second action. It sits high on the page as a
 * floating panel, but keeps a gold-type link rather than a filled button so it cannot
 * compete with the hero's one primary action.
 */
.calculator-callout {
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

/*
 * Measure. Long-form prose was running to 121-174ch on wide viewports because these
 * blocks sit directly in the 87.5rem shell with nothing constraining them. 68ch keeps
 * every reading column inside the 65-75ch target without narrowing the shell itself.
 * Centred blocks keep their centring; left-aligned blocks stay left.
 */
.notice p,
.checkbox-field__detail,
.fine-print,
.feature-list__item p,
.legal-document p,
.content-with-notice p,
.faq-item__answer p,
.assessment-page > .shell > p,
.shell > p,
.shell > div > p {
    max-width: 58ch;
}

.campaign-page > .shell > p,
.campaign-page > .shell > p.fine-print {
    max-width: 58ch;
    margin-inline: auto;
}

/* Headings and hero copy set their own measure and must not inherit the body one. */
.hero-band .section-intro__copy,
.shell > div > p.editorial-heading {
    max-width: 52ch;
}

/*
 * The recognition statement. Each thing that failed her gets its own block, then the
 * payoff line lands underneath as the turn.
 */
.recognition-strip {
    padding-block: clamp(3rem, 5.5vw, 5rem);
    text-align: center;
}

.recognition-grid {
    display: grid;
    padding: 0;
    margin: 0;
    gap: var(--space-3);
    grid-template-columns: minmax(0, 1fr);
    list-style: none;
}

.recognition-grid li {
    display: grid;
    min-width: 0;
    padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2rem);
    align-content: center;
    background: var(--color-canvas);
    box-shadow: var(--shadow-block);
    font-family: var(--font-serif);
    font-size: clamp(1.3rem, 2.5vw, 1.9rem);
    line-height: 1.2;
    text-wrap: balance;
}

/* Outranks the global `.shell > p` measure rule, which is otherwise more specific. */
.recognition-strip p.recognition-strip__payoff {
    max-width: 24ch;
    margin: clamp(2.25rem, 5vw, 3.5rem) auto 0;
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 3.4vw, 2.8rem);
    line-height: 1.24;
    text-wrap: balance;
}

.recognition-strip p.recognition-strip__payoff em {
    color: var(--color-gold);
    font-style: italic;
}

@media (min-width: 46rem) {
    .recognition-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.home-method,
.proof-section,
.home-reviews {
    padding-block: clamp(3rem, 5.5vw, 5rem);
}

/* Intro that sets up the two path bands below it. */
.home-paths-intro {
    padding-block: clamp(3rem, 5.5vw, 5rem) clamp(1.5rem, 3vw, 2.25rem);
}

.home-method .section-intro--center,
.home-reviews .section-intro--center {
    margin-inline: 0;
    text-align: left;
}

.home-method .section-intro--center .editorial-heading,
.home-method .section-intro--center .section-intro__copy,
.home-reviews .section-intro--center .editorial-heading,
.home-reviews .section-intro--center .section-intro__copy {
    margin-inline: 0;
}

.pillar-item {
    position: relative;
}

.pillar-item__number {
    font-size: clamp(1.55rem, 3vw, 2.4rem);
}

.proof-feature {
    border-color: var(--color-ink);
}
.review-placeholder__quote {
    min-height: 0;
}

/* --------------------------------------------------------------------------
   Footer - inverted. The one dark surface below the fold, by owner direction.
   -------------------------------------------------------------------------- */

.site-footer {
    border-top: 0;
    background: var(--color-night);
    color: var(--color-canvas);
}

.site-footer .wordmark__name,
.site-footer .wordmark--footer {
    color: var(--color-canvas);
}

.site-footer__heading {
    color: var(--color-gold-on-dark);
}

.site-footer__brand p {
    color: rgba(255, 255, 255, 0.72);
}

.site-footer__nav a {
    color: rgba(255, 255, 255, 0.8);
}

.site-footer__nav a:hover,
.site-footer__nav a[aria-current="page"] {
    color: var(--color-canvas);
    text-decoration-color: currentColor;
}

.site-footer .action--primary {
    border-color: var(--color-canvas);
    background: var(--color-canvas);
    color: var(--color-ink);
}

.site-footer .action--primary:hover {
    border-color: var(--color-gold-on-dark);
    background: var(--color-gold-on-dark);
    color: var(--color-ink);
}

.site-footer .action--outline,
.site-footer .action--text,
.site-footer .action--gold-link {
    border-color: rgba(255, 255, 255, 0.62);
    background: transparent;
    color: var(--color-canvas);
}

.site-footer .action--outline:hover,
.site-footer .action--text:hover,
.site-footer .action--gold-link:hover {
    border-color: var(--color-canvas);
    background: var(--color-canvas);
    color: var(--color-ink);
}

.site-footer .action:focus-visible {
    outline: 3px solid var(--color-gold-on-dark);
    outline-offset: var(--focus-offset);
}

.site-footer__grid {
    padding-block: clamp(2.75rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
}

/* Two stacked disclosure lines on the left, the agency credit on the right. */
.site-footer__disclosure {
    display: grid;
    gap: 0.2rem;
}

.site-footer__disclosure p,
.site-footer__credit {
    margin: 0;
}

.site-footer__credit {
    white-space: nowrap;
}

.site-footer__company {
    padding-bottom: var(--space-5);
}

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

   The hero HEADLINE never animates. LCP text paints on first frame on every route,
   including the ad destinations. Only the hero photograph eases out of a 1.03 scale,
   and only below-the-fold sections fade in.
   -------------------------------------------------------------------------- */

.motion-enabled .image-band__media img {
    transform: scale(1.03);
    transition: transform 900ms var(--ease-editorial);
}

.motion-enabled .hero-band.is-visible .image-band__media img {
    transform: scale(1);
}

.motion-enabled [data-motion-reveal] {
    opacity: 0;
    transform: translateY(1.4rem);
    transition:
        opacity 700ms var(--ease-editorial) var(--reveal-delay, 0ms),
        transform 700ms var(--ease-editorial) var(--reveal-delay, 0ms);
}

.motion-enabled [data-motion-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Mobile conversion bar - white surface, ink hairline, one filled primary
   -------------------------------------------------------------------------- */

#application-form,
#contact-form {
    scroll-margin-top: 1.5rem;
}

.mobile-conversion-bar {
    position: fixed;
    z-index: 50;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 0.55rem;
    padding: 0.55rem max(0.65rem, env(safe-area-inset-right)) calc(0.55rem + env(safe-area-inset-bottom)) max(0.65rem, env(safe-area-inset-left));
    border-top: var(--hairline-ink);
    background: var(--color-canvas);
}

.mobile-conversion-bar a {
    display: inline-flex;
    min-width: 0;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    padding: 0.68rem 0.55rem;
    border: 1px solid var(--color-ink);
    color: var(--color-ink);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.mobile-conversion-bar .mobile-conversion-bar__primary {
    background: var(--color-ink);
    color: var(--color-canvas);
}

@media (max-width: 51.99rem) {
    body.has-mobile-conversion {
        padding-bottom: calc(4.7rem + env(safe-area-inset-bottom));
    }
}

@media (min-width: 38rem) {
    .action {
        white-space: nowrap;
    }
}

/* Tablet only: brand across the top, the two link lists paired beneath it. */
@media (min-width: 40rem) and (max-width: 51.99rem) {
    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer__brand {
        grid-column: 1 / -1;
    }
}

@media (min-width: 52rem) {
    .mobile-conversion-bar {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .image-band__media img {
        transform: none !important;
    }
}

@media print {
    .environment-banner,
    .site-header,
    .site-footer,
    .mobile-conversion-bar,
    .image-band__media,
    .image-band__actions,
    .action {
        display: none !important;
    }

    .image-band {
        background: none;
        color: #000000;
    }

    .image-band::after {
        display: none;
    }

    .image-band .editorial-heading,
    .image-band .section-intro__copy,
    .image-band .eyebrow {
        color: #000000;
    }

    body {
        color: #000000;
        font-size: 11pt;
    }

    .reference-section {
        break-inside: avoid;
    }
}