/* =========================================================
   FILE: public.css
   PURPOSE: Public marketing layout on Shared.UI foundations.
   NOTES: Theme -> primitives -> plane. Comfortable density for public & sign-in forms.
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--vx-space-6); }
body { margin: 0; font-family: var(--vx-font); font-size: var(--vx-font-size-lg); line-height: var(--vx-leading-body); color: var(--vx-color-text); background: var(--vx-color-surface-sunken); }
a { color: var(--vx-color-link); text-underline-offset: var(--vx-space-1); }
a:focus-visible, main:focus-visible { outline: var(--vx-focus-width) solid var(--vx-color-focus); outline-offset: var(--vx-space-1); border-radius: var(--vx-radius-sm); }
h1, h2, h3 { line-height: var(--vx-leading-heading); text-wrap: balance; overflow-wrap: anywhere; }
h1, h2 { letter-spacing: var(--vx-tracking-heading); }
h1 { font-size: var(--vx-font-size-heading); margin: 0 0 var(--vx-space-6); }
h2 { font-size: var(--vx-font-size-2xl); margin: 0 0 var(--vx-space-4); }
h3 { font-size: var(--vx-font-size-xl); margin: 0 0 var(--vx-space-3); }
p { margin: 0 0 var(--vx-space-4); }
.pub-skip { position: absolute; inset-inline-start: -999em; }
.pub-skip:focus { inset-inline-start: var(--vx-space-4); top: var(--vx-space-4); z-index: 10; padding: var(--vx-space-3) var(--vx-space-5); background: var(--vx-color-surface); box-shadow: var(--vx-shadow-3); }
.pub-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vx-space-6); padding: var(--vx-space-5) max(var(--vx-space-6), calc((100% - var(--vx-content-wide)) / 2)); background: var(--vx-color-surface); border-bottom: var(--vx-border-width) solid var(--vx-color-border); }
.pub-brand { display: inline-flex; align-items: center; gap: var(--vx-space-3); font-weight: 700; font-size: var(--vx-font-size-2xl); letter-spacing: var(--vx-tracking-heading); color: var(--vx-color-text); text-decoration: none; }
.pub-brand img { display: block; }
.pub-nav, .pub-languages { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vx-space-2); }
.pub-nav a, .pub-languages a, .pub-languages span { display: inline-flex; align-items: center; min-height: var(--vx-form-control-height, 40px); padding: var(--vx-space-2) var(--vx-space-3); font-size: var(--vx-font-size-md); font-weight: 500; text-decoration: none; border-radius: var(--vx-radius-sm); }
.pub-nav a { color: var(--vx-color-text-muted); }
.pub-nav a:hover, .pub-languages a:hover { color: var(--vx-color-link); background: var(--vx-color-primary-soft); }
.pub-languages { margin-inline-start: auto; gap: 0; }
.pub-languages [aria-current] { color: var(--vx-color-link); background: var(--vx-color-primary-soft); font-weight: 700; }
.pub-main { max-width: var(--vx-content-wide); min-height: 60vh; margin-inline: auto; padding: 0 var(--vx-space-6) var(--vx-space-16); }
.pub-hero { position: relative; padding: var(--vx-space-24) 0 var(--vx-space-20); border-bottom: var(--vx-border-width) solid var(--vx-color-border); background: radial-gradient(ellipse at right top, var(--vx-color-primary-soft), transparent 65%); }
.pub-hero h1 { max-width: var(--vx-content-reading); font-size: var(--vx-font-size-display); }
.pub-eyebrow { display: inline-flex; padding: var(--vx-space-2) var(--vx-space-3); margin-bottom: var(--vx-space-6); border: var(--vx-border-width) solid var(--vx-color-border); border-radius: var(--vx-radius-full); color: var(--vx-color-link); background: var(--vx-color-surface); font-weight: 700; letter-spacing: var(--vx-tracking-label); text-transform: uppercase; font-size: var(--vx-font-size-xs); }
.pub-lead { font-size: var(--vx-font-size-xl); color: var(--vx-color-text-muted); max-width: var(--vx-content-reading); text-wrap: pretty; }
.pub-actions { display: flex; flex-wrap: wrap; gap: var(--vx-space-3); margin-block: var(--vx-space-8); }
.pub-section { padding-block: var(--vx-space-16); }
.pub-section + .pub-section { border-top: var(--vx-border-width) solid var(--vx-color-border); }
.pub-section--narrow { max-width: var(--vx-content-reading); margin-inline: auto; }
.pub-grid, .pub-plans, .pub-list { list-style: none; padding: 0; margin: var(--vx-space-8) 0 0; display: grid; gap: var(--vx-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--vx-grid-card-min)), 1fr)); }
.pub-list { grid-template-columns: 1fr; }
.pub-tile, .pub-plan { min-width: 0; padding: var(--vx-space-8); }
.pub-tile p { margin-bottom: 0; color: var(--vx-color-text-muted); }
.pub-tile h3::before { content: ''; display: block; width: var(--vx-space-8); height: var(--vx-space-1); margin-bottom: var(--vx-space-6); border-radius: var(--vx-radius-full); background: var(--vx-color-link); }
.pub-steps { counter-reset: flow; display: grid; gap: var(--vx-space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--vx-grid-step-min)), 1fr)); padding: 0; margin-top: var(--vx-space-8); list-style: none; }
.pub-steps li { counter-increment: flow; color: var(--vx-color-text-muted); }
.pub-steps li::before { content: counter(flow, decimal-leading-zero); display: inline-grid; place-items: center; min-width: var(--vx-form-control-height, 40px); min-height: var(--vx-form-control-height, 40px); margin-bottom: var(--vx-space-5); border-radius: var(--vx-radius-full); background: var(--vx-color-primary-soft); color: var(--vx-color-link); font-weight: 700; font-variant-numeric: tabular-nums; }
.pub-steps h3 { color: var(--vx-color-text); }
.pub-plan { display: flex; flex-direction: column; align-items: flex-start; gap: var(--vx-space-3); }
.pub-plan > p { margin: 0; }
.pub-plan > a { margin-top: auto; width: 100%; }
.pub-price { font-size: var(--vx-font-size-2xl); font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.pub-plan__facts { padding-inline-start: var(--vx-space-5); margin-block: var(--vx-space-5) var(--vx-space-8); color: var(--vx-color-text-muted); }
.pub-plan__facts li { padding-block: var(--vx-space-2); }
.pub-plan__facts li::marker, .pub-feature li::marker { color: var(--vx-color-link); }

/* =========================================================
   COMFORTABLE FORM SYSTEM (UX Brief 2026-10-20 & ADR-0013)
   - Height: 40px inputs, selects, and buttons
   - Card padding: 20px - 24px
   - Gap between fields: 16px horizontal, 12px vertical
   - Multi-column content-sized grid (4 to 6 columns desktop)
   - Labels above fields, primary action bottom-left
   ========================================================= */
:root {
    --vx-form-control-height: 40px;
    --vx-form-gap-x: 16px;
    --vx-form-gap-y: 12px;
    --vx-form-card-padding: 24px;
}

.pub-form {
    display: grid;
    column-gap: var(--vx-form-gap-x);
    row-gap: var(--vx-form-gap-y);
    max-width: var(--vx-content-form);
    padding: var(--vx-form-card-padding);
    background: var(--vx-color-surface);
    border: var(--vx-border-width) solid var(--vx-color-border);
    border-radius: var(--vx-radius-lg);
    box-shadow: var(--vx-shadow-1);
    box-sizing: border-box;
}

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

.pub-form fieldset {
    min-width: 0;
    border: var(--vx-border-width) solid var(--vx-color-border);
    border-radius: var(--vx-radius-md);
    padding: var(--vx-space-5);
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--vx-form-gap-x);
    row-gap: var(--vx-form-gap-y);
    margin: 0;
    box-sizing: border-box;
}

.pub-form legend {
    padding-inline: var(--vx-space-2);
    font-size: var(--vx-font-size-md);
    font-weight: 600;
    color: var(--vx-color-text);
}

.pub-form > p { margin: 0; }

/* Input and Select Controls */
.pub-form .vx-input,
.pub-form input[type="text"],
.pub-form input[type="email"],
.pub-form input[type="tel"],
.pub-form input[type="number"],
.pub-form input[type="date"],
.pub-form select.vx-input {
    width: 100%;
    min-width: 0;
    height: var(--vx-form-control-height);
    min-height: var(--vx-form-control-height);
    box-sizing: border-box;
    padding: 0 12px;
    font: inherit;
    font-size: 15px;
    border: 1px solid var(--vx-color-border-control);
    border-radius: var(--vx-radius-sm);
    background: var(--vx-color-surface);
    color: var(--vx-color-text);
    transition: border-color var(--vx-transition-fast), box-shadow var(--vx-transition-fast);
}

.pub-form textarea.vx-input {
    width: 100%;
    min-width: 0;
    min-height: 96px;
    padding: 10px 12px;
    font: inherit;
    font-size: 15px;
    line-height: 1.5;
    box-sizing: border-box;
    border: 1px solid var(--vx-color-border-control);
    border-radius: var(--vx-radius-sm);
    background: var(--vx-color-surface);
    color: var(--vx-color-text);
    resize: vertical;
}

.pub-form .vx-input:focus-visible,
.pub-form textarea.vx-input:focus-visible {
    outline: 2px solid var(--vx-color-focus);
    outline-offset: 1px;
    border-color: var(--vx-color-focus);
}

/* Field Container & Labels */
.vx-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    margin: 0;
}

.vx-label {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--vx-color-text);
}

.vx-required {
    color: var(--vx-color-danger);
    margin-left: 2px;
}

.pub-hint,
.vx-hint {
    color: var(--vx-color-text-subtle);
    font-size: 13px;
    line-height: 1.4;
    margin: 2px 0 0;
}

/* Multi-Column Grid Utilities (Section 2 Content Sizing) */
.pub-field--name     { grid-column: span 3; }
.pub-field--address  { grid-column: span 4; }
.pub-field--full     { grid-column: 1 / -1; }
.pub-field--phone    { grid-column: span 2; }
.pub-field--postal   { grid-column: span 2; }
.pub-field--city     { grid-column: span 2; }
.pub-field--state    { grid-column: span 2; }
.pub-field--country  { grid-column: span 2; }
.pub-field--slug     { grid-column: span 3; }
.pub-field--short    { grid-column: span 2; }
.pub-field--half     { grid-column: span 3; }
.pub-field--email    { grid-column: span 4; }

@media (max-width: 1024px) {
    .pub-form--grid,
    .pub-form fieldset {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pub-field--name,
    .pub-field--address,
    .pub-field--slug,
    .pub-field--half,
    .pub-field--email {
        grid-column: span 2;
    }
    .pub-field--phone,
    .pub-field--postal,
    .pub-field--city,
    .pub-field--state,
    .pub-field--country,
    .pub-field--short {
        grid-column: span 1;
    }
    .pub-field--full {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .pub-form--grid,
    .pub-form fieldset {
        grid-template-columns: 1fr;
    }
    .pub-field--name,
    .pub-field--address,
    .pub-field--full,
    .pub-field--phone,
    .pub-field--postal,
    .pub-field--city,
    .pub-field--state,
    .pub-field--country,
    .pub-field--slug,
    .pub-field--short,
    .pub-field--half,
    .pub-field--email {
        grid-column: 1 / -1;
    }
}

/* Buttons and Actions */
.vx-button,
a.vx-button,
button.vx-button {
    height: var(--vx-form-control-height);
    min-height: var(--vx-form-control-height);
    padding: 0 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vx-space-2);
    border: 1px solid var(--vx-color-border-control);
    border-radius: var(--vx-radius-sm);
    background: var(--vx-color-surface);
    color: var(--vx-color-text);
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;
    transition: background-color var(--vx-transition-fast), border-color var(--vx-transition-fast), color var(--vx-transition-fast);
}

.vx-button:hover:not(:disabled) {
    background-color: var(--vx-color-surface-sunken);
    border-color: var(--vx-color-border-control);
}

.vx-button.vx-button--primary {
    background-color: var(--vx-color-link);
    border: 1px solid var(--vx-color-link);
    color: #ffffff;
}

.vx-button.vx-button--primary:hover:not(:disabled) {
    background-color: var(--vx-color-primary-hover);
    border-color: var(--vx-color-primary-hover);
    color: #ffffff;
}

.vx-button.vx-button--subtle {
    background: transparent;
    border: 1px solid transparent;
    color: var(--vx-color-text-muted);
}

.vx-button.vx-button--subtle:hover:not(:disabled) {
    background: var(--vx-color-primary-soft);
    color: var(--vx-color-link);
}

.vx-button:focus-visible {
    outline: 2px solid var(--vx-color-focus);
    outline-offset: 2px;
}

.vx-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Primary Action Bottom-Left */
.pub-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 8px;
    grid-column: 1 / -1;
    width: 100%;
}

.pub-form .vx-button,
.pub-form button[type="submit"] {
    width: auto;
    align-self: flex-start;
}

/* Read-Only Facts Grid (.vx-facts, Section 3) */
.vx-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px 20px;
    margin: 0;
    padding: 0;
}

.vx-facts > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vx-facts dt {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vx-color-text-muted);
    margin: 0;
}

.vx-facts dd {
    font-size: 15px;
    font-weight: 600;
    color: var(--vx-color-text);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* Plan Radio Selection */
.pub-plan-radio-group {
    display: grid;
    gap: 10px;
    width: 100%;
}

.pub-plan-radio-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--vx-color-border);
    border-radius: var(--vx-radius-sm);
    background: var(--vx-color-surface);
    cursor: pointer;
    transition: border-color var(--vx-transition-fast), background var(--vx-transition-fast);
}

.pub-plan-radio-option:hover {
    border-color: var(--vx-color-link);
    background: var(--vx-color-primary-soft);
}

.pub-plan-radio-option:has(input[type="radio"]:checked) {
    border-color: var(--vx-color-link);
    background: var(--vx-color-primary-soft);
}

.pub-plan-radio-option input[type="radio"] {
    accent-color: var(--vx-color-link);
    width: 18px;
    height: 18px;
    margin: 0;
}

.pub-plan-radio-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--vx-color-text);
}

/* Inline Email Forms */
.pub-form-actions-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pub-form-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    width: 100%;
}

.pub-form-inline .vx-field {
    flex: 1 1 240px;
}

.pub-form-inline .pub-form__actions {
    width: auto;
    margin-top: 0;
    padding-bottom: 0;
}

/* Step Navigation */
.pub-steps-nav { display: flex; flex-wrap: wrap; gap: var(--vx-space-3); list-style: none; padding: 0; margin-block: var(--vx-space-6); font-size: var(--vx-font-size-md); color: var(--vx-color-text-muted); }
.pub-steps-nav li { padding: var(--vx-space-2) var(--vx-space-3); border-bottom: var(--vx-border-width) solid var(--vx-color-border); }
.pub-steps-nav [aria-current] { font-weight: 700; color: var(--vx-color-link); border-color: var(--vx-color-link); }

/* Editorial & Marketing Sections */
.pub-feature { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vx-space-5) var(--vx-space-12); }
.pub-feature h2 { grid-column: 1 / -1; }
.pub-feature p, .pub-feature ul { margin: 0; color: var(--vx-color-text-muted); }
.pub-feature li + li { margin-top: var(--vx-space-3); }
.pub-closing { margin-top: var(--vx-space-8); padding: var(--vx-space-16) var(--vx-space-6); border-radius: var(--vx-radius-lg); background: var(--vx-color-primary-soft); text-align: center; }
.pub-closing .pub-actions { justify-content: center; margin-bottom: 0; }
.pub-footer { padding: var(--vx-space-12) max(var(--vx-space-6), calc((100% - var(--vx-content-wide)) / 2)); border-top: var(--vx-border-width) solid var(--vx-color-border); background: var(--vx-color-surface); display: grid; grid-template-columns: 1fr auto; gap: var(--vx-space-6); font-size: var(--vx-font-size-md); color: var(--vx-color-text-muted); }
.pub-footer p { margin: 0; max-width: var(--vx-content-reading); }
.pub-footer nav { display: flex; flex-wrap: wrap; align-items: start; gap: var(--vx-space-5); }
.pub-footer a { display: inline-flex; align-items: center; min-height: var(--vx-form-control-height, 40px); }
.pub-footer__copy { grid-column: 1 / -1; padding-top: var(--vx-space-6); border-top: var(--vx-border-width) solid var(--vx-color-border); color: var(--vx-color-text-subtle); }
.pub-pre { white-space: pre-line; overflow-wrap: anywhere; }

@media (max-width: 1024px) {
    .pub-header { gap: var(--vx-space-3); }
    .pub-nav { order: 3; width: 100%; }
    .pub-cta { margin-inline-start: auto; }
    .pub-languages { margin-inline-start: 0; }
}

@media (max-width: 640px) {
    .pub-header { padding: var(--vx-space-4); }
    .pub-main { padding-inline: var(--vx-space-4); }
    .pub-hero { padding-block: var(--vx-space-12); }
    .pub-section { padding-block: var(--vx-space-12); }
    .pub-brand { flex: 1; }
    .pub-languages { margin-inline-start: auto; }
    .pub-nav { justify-content: space-between; gap: 0; }
    .pub-nav a { padding-inline: var(--vx-space-2); }
    .pub-cta { order: 4; width: 100%; }
    .pub-actions { flex-direction: column; align-items: stretch; }
    .pub-actions > a { width: 100%; }
    .pub-form, .pub-tile, .pub-plan { padding: var(--vx-space-5); }
    .pub-feature, .pub-footer { grid-template-columns: 1fr; }
    .pub-footer { padding-inline: var(--vx-space-4); }
}

/* Decorative logistics photography */
.pub-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: var(--vx-space-12);
    align-items: start;
}
.pub-hero > * { grid-column: 1; min-width: 0; }
.pub-hero h1 { font-size: var(--vx-font-size-heading); }
.pub-hero::after {
    content: '';
    grid-column: 2;
    grid-row: 1 / span 6;
    align-self: stretch;
    border-radius: var(--vx-radius-lg);
    background: url('../images/warehouse-scanning.webp') center / cover no-repeat;
    box-shadow: var(--vx-shadow-3);
}
.pub-section:has(> #home-flow)::before {
    content: '';
    display: block;
    aspect-ratio: 16 / 5;
    margin-bottom: var(--vx-space-12);
    border-radius: var(--vx-radius-lg);
    background: url('../images/morning-dispatch.webp') center / cover no-repeat;
}
@media (max-width: 1024px) {
    .pub-hero { grid-template-columns: minmax(0, 1fr); }
    .pub-hero::after { grid-column: 1; grid-row: auto; aspect-ratio: 16 / 10; margin-top: var(--vx-space-6); }
    .pub-section:has(> #home-flow)::before { aspect-ratio: 16 / 7; }
}
@media (max-width: 640px) {
    .pub-hero::after { aspect-ratio: 4 / 3; }
    .pub-section:has(> #home-flow)::before { aspect-ratio: 4 / 3; }
}

/* Feature specific photography */
.pub-feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    align-items: start;
}
.pub-feature > h2, .pub-feature > p, .pub-feature > ul { grid-column: 1; }
.pub-feature::after {
    content: '';
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    aspect-ratio: 16 / 10;
    border-radius: var(--vx-radius-lg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: var(--vx-shadow-2);
}
.pub-feature:has(> #feature-shipments)::after { background-image: url('../images/feature-shipments.webp'); }
.pub-feature:has(> #feature-parcels)::after { background-image: url('../images/warehouse-scanning.webp'); }
.pub-feature:has(> #feature-dispatch)::after { background-image: url('../images/morning-dispatch.webp'); }
.pub-feature:has(> #feature-warehouse)::after { background-image: url('../images/warehouse-inventory.webp'); }
.pub-feature:has(> #feature-billing)::after { background-image: url('../images/feature-billing.webp'); }
.pub-feature:has(> #feature-customers)::after { background-image: url('../images/feature-customers.webp'); }
.pub-feature:has(> #feature-organization)::after { background-image: url('../images/feature-organization.webp'); }
@media (max-width: 768px) {
    .pub-feature { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
    .pub-feature::after { grid-column: 1; grid-row: auto; margin-top: var(--vx-space-4); }
}

/* Contact sales editorial layout */
.pub-section--narrow:has(#contact-company) {
    max-width: var(--vx-content-wide);
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-areas: "title form" "lead form" "art form" "direct form";
    column-gap: var(--vx-space-12);
    row-gap: var(--vx-space-4);
    align-items: start;
}
.pub-section--narrow:has(#contact-company) > h1 { grid-area: title; font-size: var(--vx-font-size-heading); margin: 0; }
.pub-section--narrow:has(#contact-company) > .pub-lead { grid-area: lead; margin: 0; }
.pub-section--narrow:has(#contact-company)::after {
    content: '';
    grid-area: art;
    display: block;
    aspect-ratio: 4 / 3;
    width: 100%;
    border-radius: var(--vx-radius-lg);
    background: url('../images/contact-logistics-sketch.webp') center / contain no-repeat;
}
.pub-section--narrow:has(#contact-company) > .pub-hint { grid-area: direct; overflow-wrap: anywhere; }
.pub-section--narrow:has(#contact-company) > [role="alert"] { grid-area: error; }
.pub-section--narrow:has(#contact-company):has(> [role="alert"]) { grid-template-areas: "error error" "title form" "lead form" "art form" "direct form"; }
.pub-form:has(#contact-company) {
    grid-area: form;
    max-width: none;
    width: 100%;
    min-width: 0;
    padding: var(--vx-form-card-padding);
    border-radius: var(--vx-radius-md);
    box-shadow: var(--vx-shadow-1);
}
@media (max-width: 1024px) {
    .pub-section--narrow:has(#contact-company) { column-gap: var(--vx-space-6); }
}
@media (max-width: 768px) {
    .pub-section--narrow:has(#contact-company),
    .pub-section--narrow:has(#contact-company):has(> [role="alert"]) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "title" "lead" "art" "error" "form" "direct";
    }
    .pub-section--narrow:has(#contact-company)::after { aspect-ratio: 2 / 1; max-height: var(--vx-table-viewport); }
    .pub-form:has(#contact-company) { padding: var(--vx-space-5); }
}

/* Registration start layout */
.pub-section--narrow:has(#reg-legal) {
    max-width: var(--vx-content-wide);
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-rows: min-content 1fr;
    grid-template-areas: "heading registration" "sketch registration";
    gap: var(--vx-space-6) var(--vx-space-12);
    align-items: start;
}
.pub-section--narrow:has(#reg-legal) > h1 { grid-area: heading; margin: 0; font-size: var(--vx-font-size-heading); }
.pub-section--narrow:has(#reg-legal)::after {
    content: '';
    grid-area: sketch;
    position: sticky;
    top: var(--vx-space-6);
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: var(--vx-radius-lg);
    background: url('../images/registration-workspace-sketch.webp') center / contain no-repeat;
}
.pub-form:has(#reg-legal) {
    grid-area: registration;
    counter-reset: registration-section;
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: var(--vx-form-card-padding);
    gap: var(--vx-space-6);
    border-radius: var(--vx-radius-md);
    box-shadow: var(--vx-shadow-1);
}
.pub-form:has(#reg-legal) fieldset {
    counter-increment: registration-section;
    margin: 0;
    padding: 0 0 var(--vx-space-6);
    border: 0;
    border-bottom: var(--vx-border-width) solid var(--vx-color-border);
    border-radius: 0;
}
.pub-form:has(#reg-legal) legend { display: flex; align-items: center; gap: var(--vx-space-3); width: 100%; padding: 0; margin-bottom: var(--vx-space-4); font-size: var(--vx-font-size-lg); color: var(--vx-color-text); }
.pub-form:has(#reg-legal) legend::before { content: counter(registration-section, decimal-leading-zero); display: inline-grid; place-items: center; min-width: var(--vx-space-8); min-height: var(--vx-space-8); border-radius: var(--vx-radius-sm); background: var(--vx-color-primary-soft); color: var(--vx-color-link); font-family: var(--vx-font-mono); font-size: var(--vx-font-size-sm); }
.pub-form:has(#reg-legal) fieldset > label { padding: var(--vx-space-3); border-radius: var(--vx-radius-sm); background: var(--vx-color-primary-soft); }
.pub-form:has(#reg-legal) label:has(input[type="checkbox"]) { font-size: var(--vx-font-size-md); line-height: var(--vx-leading-body); }
.pub-form:has(#reg-legal) input[type="checkbox"] { margin-inline-end: var(--vx-space-2); accent-color: var(--vx-color-primary); }
.pub-form:has(#reg-legal) .pub-hint { font-size: var(--vx-font-size-sm); margin: 0; }

/* Offer and refusal details keep their natural reading order above the form */
.pub-section--narrow:has(#reg-legal):has(> .vx-message),
.pub-section--narrow:has(#reg-legal):has(> .vx-card) { display: block; }
.pub-section--narrow:has(#reg-legal):has(> .vx-message)::after,
.pub-section--narrow:has(#reg-legal):has(> .vx-card)::after { display: none; }
.pub-section--narrow:has(#reg-legal):has(> .vx-message) > h1,
.pub-section--narrow:has(#reg-legal):has(> .vx-card) > h1 { margin-bottom: var(--vx-space-6); }
@media (max-width: 1024px) {
    .pub-section--narrow:has(#reg-legal) { gap: var(--vx-space-6); }
}
@media (max-width: 768px) {
    .pub-section--narrow:has(#reg-legal) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "heading" "sketch" "registration"; }
    .pub-section--narrow:has(#reg-legal)::after { position: static; aspect-ratio: 8 / 5; }
    .pub-form:has(#reg-legal) { padding: var(--vx-space-5); }
}
@media (max-width: 640px) {
    .pub-form:has(#reg-legal) { padding: var(--vx-space-4); }
    .pub-form:has(#reg-legal) .cf-turnstile { max-width: 100%; overflow-x: auto; }
}

/* Illustrated public story: homepage modules and the feature journey */
.pub-hero { background: none; padding-block: var(--vx-space-16); }
.pub-hero > .pub-eyebrow { justify-self: start; }
.pub-hero::after { background-image: url('../images/sketch-hero.webp'); background-size: contain; aspect-ratio: 3 / 2; align-self: center; box-shadow: none; }
.pub-section:has(> #home-flow)::before { background-image: url('../images/sketch-dispatch.webp'); background-size: contain; background-color: var(--vx-color-surface); }
.pub-section[aria-labelledby="home-modules"] > .pub-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; }
.pub-section[aria-labelledby="home-modules"] .pub-tile { flex: 0 1 calc((100% - 3 * var(--vx-space-5)) / 4); display: flex; flex-direction: column; padding: var(--vx-space-5); border-radius: var(--vx-radius-md); transition: transform var(--vx-transition-normal), box-shadow var(--vx-transition-normal); }
.pub-section[aria-labelledby="home-modules"] .pub-tile h3 { font-size: var(--vx-font-size-lg); }
.pub-section[aria-labelledby="home-modules"] .pub-tile h3::before { margin-bottom: var(--vx-space-4); }
.pub-section[aria-labelledby="home-modules"] .pub-tile > p { flex: 1; }
.pub-module-sketch { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; margin-top: var(--vx-space-5); border-radius: var(--vx-radius-sm); }
.pub-feature-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--vx-space-8); align-items: center; padding-block: var(--vx-space-12); }
.pub-feature-intro > div { min-width: 0; }
.pub-feature-intro > img { display: block; width: 100%; height: auto; border-radius: var(--vx-radius-lg); }
.pub-feature-intro h1 { font-size: var(--vx-font-size-heading); }
.pub-feature-route { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: var(--vx-space-8); max-width: var(--vx-content-form); }
.pub-feature-route::before { content: ''; position: absolute; inset-inline: 0; top: 50%; border-top: var(--vx-border-width) dashed var(--vx-color-link); transform-origin: left; }
.pub-feature-route span { position: relative; width: var(--vx-space-3); height: var(--vx-space-3); border-radius: var(--vx-radius-full); background: var(--vx-color-link); outline: var(--vx-space-2) solid var(--vx-color-surface-sunken); }
.pub-feature-index { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--vx-space-1); padding: var(--vx-space-2); background: var(--vx-color-surface); border: var(--vx-border-width) solid var(--vx-color-border); border-radius: var(--vx-radius-md); box-shadow: var(--vx-shadow-1); }
.pub-feature-index a { display: flex; flex-direction: column; gap: var(--vx-space-2); padding: var(--vx-space-3); min-width: 0; font-size: var(--vx-font-size-sm); text-decoration: none; line-height: var(--vx-leading-body); border-radius: var(--vx-radius-sm); color: var(--vx-color-text-muted); transition: background var(--vx-transition-fast), color var(--vx-transition-fast); }
.pub-feature-index a > span { font-family: var(--vx-font-mono); font-size: var(--vx-font-size-xs); color: var(--vx-color-link); }
.pub-feature-index a:hover, .pub-feature-index a:focus-visible { color: var(--vx-color-link); background: var(--vx-color-primary-soft); }
.pub-feature-journey { position: relative; display: grid; gap: var(--vx-space-8); padding-block: var(--vx-space-12); }
.pub-feature-journey::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 50%; border-inline-start: var(--vx-border-width) dashed var(--vx-color-link); opacity: 0.25; }
.pub-feature-chapter { scroll-margin-top: calc(3 * var(--vx-form-control-height, 40px) + var(--vx-space-6)); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--vx-space-8); align-items: center; padding: var(--vx-space-8); border: var(--vx-border-width) solid var(--vx-color-border); border-radius: var(--vx-radius-lg); background: var(--vx-color-surface); box-shadow: var(--vx-shadow-1); }
.pub-feature-chapter:nth-child(even) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.pub-feature-chapter:nth-child(even) .pub-feature-chapter__copy { grid-column: 2; grid-row: 1; }
.pub-feature-chapter:nth-child(even) .pub-feature-chapter__art { grid-column: 1; grid-row: 1; }
.pub-feature-chapter__copy { min-width: 0; }
.pub-feature-chapter__number { display: inline-flex; align-items: center; margin-bottom: var(--vx-space-4); padding: var(--vx-space-2) var(--vx-space-3); color: var(--vx-color-link); background: var(--vx-color-primary-soft); border-radius: var(--vx-radius-full); font-family: var(--vx-font-mono); font-size: var(--vx-font-size-sm); }
.pub-feature-chapter h2 { font-size: var(--vx-font-size-2xl); scroll-margin-top: calc(3 * var(--vx-form-control-height, 40px) + var(--vx-space-6)); }
.pub-feature-chapter__copy > p { color: var(--vx-color-text-muted); }
.pub-feature-chapter ul { display: grid; gap: var(--vx-space-3); list-style: none; padding: 0; margin: var(--vx-space-5) 0 0; font-size: var(--vx-font-size-md); color: var(--vx-color-text-muted); }
.pub-feature-chapter li { position: relative; padding-inline-start: var(--vx-space-5); }
.pub-feature-chapter li::before { content: ''; position: absolute; inset-inline-start: 0; top: var(--vx-space-2); width: var(--vx-space-2); height: var(--vx-space-2); border-radius: var(--vx-radius-full); background: var(--vx-color-link); }
.pub-feature-chapter__art { min-width: 0; margin: 0; overflow: hidden; border-radius: var(--vx-radius-md); }
.pub-feature-chapter__art img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; transition: transform var(--vx-transition-normal); }
@media (prefers-reduced-motion: no-preference) {
    .pub-feature-intro > img { animation: pub-story-arrive 650ms ease-out both; }
    .pub-feature-route::before { animation: pub-route-draw 850ms ease-out both; }
    .pub-feature-route span { animation: pub-story-arrive 650ms ease-out both; }
    .pub-feature-route span:nth-child(2) { animation-delay: 100ms; }
    .pub-feature-route span:nth-child(3) { animation-delay: 200ms; }
    .pub-feature-route span:nth-child(4) { animation-delay: 300ms; }
    .pub-feature-route span:nth-child(5) { animation-delay: 400ms; }
    .pub-section[aria-labelledby="home-modules"] .pub-tile:hover { transform: translateY(calc(-1 * var(--vx-space-1))); box-shadow: var(--vx-shadow-2); }
    .pub-feature-chapter:hover img { transform: scale(1.025); }
    @supports (animation-timeline: view()) {
        .pub-feature-chapter { animation: pub-story-arrive linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    }
}
@keyframes pub-story-arrive { from { transform: translateY(var(--vx-space-5)); } to { transform: translateY(0); } }
@keyframes pub-route-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 1024px) {
    .pub-section[aria-labelledby="home-modules"] .pub-tile { flex-basis: calc((100% - var(--vx-space-5)) / 2); }
    .pub-feature-intro { gap: var(--vx-space-6); }
    .pub-feature-index { display: flex; overflow-x: auto; overscroll-behavior-inline: contain; }
    .pub-feature-index a { flex: 0 0 auto; max-width: var(--vx-grid-card-min); min-width: var(--vx-form-control-height, 40px); }
}
@media (max-width: 768px) {
    .pub-feature-intro, .pub-feature-chapter, .pub-feature-chapter:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
    .pub-feature-chapter:nth-child(even) .pub-feature-chapter__copy,
    .pub-feature-chapter:nth-child(even) .pub-feature-chapter__art { grid-column: auto; grid-row: auto; }
    .pub-feature-chapter { padding: var(--vx-space-5); gap: var(--vx-space-5); }
    .pub-feature-index a { min-width: var(--vx-grid-step-min); }
    .pub-feature-journey { gap: var(--vx-space-6); padding-block: var(--vx-space-8); }
    .pub-feature-intro { padding-block: var(--vx-space-8); }
    .pub-feature-intro .pub-feature-route { margin-bottom: var(--vx-space-5); }
}
@media (max-width: 640px) {
    .pub-section[aria-labelledby="home-modules"] .pub-tile { flex-basis: 100%; }
    .pub-hero::after { aspect-ratio: 3 / 2; }
}
@media (prefers-reduced-motion: reduce) {
    .pub-feature-intro *, .pub-feature-journey *, .pub-feature-index *, .pub-module-sketch { animation: none !important; transition: none !important; }
    .pub-feature-route::before, .pub-feature-chapter { animation: none !important; }
}

/* Public in-app help (ADR-0023). */
.pub-help { max-width: var(--vx-content-reading); margin-inline: auto; }
.pub-help-search { display: flex; flex-wrap: wrap; align-items: end; gap: var(--vx-space-3); margin-block: var(--vx-space-6); }
.pub-help-search label { flex-basis: 100%; font-weight: 600; }
.pub-help-search input { flex: 1 1 12rem; min-width: 0; }
.pub-help-list { list-style: none; padding: 0; display: grid; gap: var(--vx-space-4); }
.pub-help-list li { border-bottom: var(--vx-border-width) solid var(--vx-color-border); padding-block: var(--vx-space-3); }
.pub-help-list a { font-weight: 600; color: var(--vx-color-link); }
.pub-help-list p { margin-block: var(--vx-space-2) 0; color: var(--vx-color-text-muted); }
.pub-help-section { margin-block-start: var(--vx-space-8); }
.pub-help .vx-help-article__body img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-block: var(--vx-space-5);
    border: var(--vx-border-width) solid var(--vx-color-border);
    border-radius: var(--vx-radius-md);
}
.pub-help .vx-help-article__body a:has(img) {
    display: block;
    cursor: zoom-in;
}

/* Sales Offer (registration with an offer link; production review 2026-10-25) */
.pub-offer,
.pub-offer-accept {
    width: 100%;
    max-width: var(--vx-content-form);
    box-sizing: border-box;
}

.pub-offer .vx-card {
    padding: var(--vx-form-card-padding);
    box-sizing: border-box;
}

.pub-offer .vx-facts {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.pub-offer .vx-facts dd {
    overflow-wrap: anywhere;
}

.pub-offer__expires {
    grid-column: 1 / -1;
}

.pub-offer__email {
    margin: var(--vx-space-4) 0 0;
    padding-top: var(--vx-space-3);
    border-top: var(--vx-border-width) solid var(--vx-color-border);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.pub-offer-accept {
    margin-top: var(--vx-space-4);
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}