/* Instant tool kit (tools/shared/static/kit.css) - landing form, result sheet, email gate.
   Loaded by instant/_layout.html after base.css. Every color is a base.css storefront token
   or derived from one; the three status inks below are the only additions, because the
   storefront palette has no word for "problem" and a diagnostic cannot do without one.
   Class names carry the kit- prefix so they never collide with a tool's own stylesheet. */

:root {
    --kit-good: oklch(47% 0.1 170);
    --kit-warn: oklch(52% 0.12 65);
    --kit-bad: oklch(50% 0.17 27);
    --kit-good-soft: oklch(95.5% 0.03 170);
    --kit-warn-soft: oklch(96% 0.04 80);
    --kit-bad-soft: oklch(95.5% 0.03 27);
    --kit-shadow: 0 1px 2px oklch(20% 0.025 235 / 6%), 0 12px 32px -8px oklch(20% 0.025 235 / 12%);
    --kit-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --kit-measure: 65ch;
}

/* Browser surfaces the page did not draw. */
.kit-landing, .kit-result, .kit-empty {
    caret-color: var(--brand);
    accent-color: var(--brand);
}

html { scrollbar-color: var(--line) var(--bg); }

.site-main a { text-underline-offset: 0.18em; }

.site-main h1, .site-main h2, .site-main h3 {
    font-family: var(--font-display);
    text-wrap: balance;
    letter-spacing: -0.015em;
}

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

/* --- Landing: the tool is the page ---------------------------------------------------- */

.kit-landing {
    display: grid;
    grid-template-areas: "intro" "form" "checks";
    gap: var(--s8);
    align-items: start;
}

.kit-intro { grid-area: intro; }
.kit-form { grid-area: form; }
.kit-checks { grid-area: checks; }

@media (min-width: 820px) {
    .kit-landing {
        grid-template-columns: minmax(0, 1fr) minmax(0, 384px);
        grid-template-areas: "intro form" "checks form";
        grid-template-rows: auto 1fr;
        gap: 0 var(--s10);
    }
}

.kit-intro h1 {
    font-size: clamp(2rem, 1.35rem + 2.2vw, 2.625rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin: 0 0 var(--s4);
}

.kit-lede {
    font-size: 1.125rem;
    color: var(--muted);
    max-width: 34em;
    margin: 0;
}

@media (min-width: 820px) {
    .kit-lede { margin-bottom: var(--s8); }
}

.kit-checks {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}

.kit-checks li {
    position: relative;
    padding: var(--s3) 0 var(--s3) var(--s8);
    border-bottom: 1px solid var(--line);
}

/* A drawn tick, two borders on a rotated box, so it matches the SVG stroke weight. */
.kit-checks li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 1.05em;
    width: 6px;
    height: 11px;
    border: solid var(--brand);
    border-width: 0 1.75px 1.75px 0;
    transform: rotate(45deg);
}

.kit-checks strong { font-weight: 600; }

.kit-checks span {
    display: block;
    color: var(--muted);
    font-size: 0.9375rem;
}

/* --- Form -------------------------------------------------------------------------- */

.kit-form {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: var(--s6);
    box-shadow: var(--kit-shadow);
}

@media (min-width: 820px) {
    .kit-form { position: sticky; top: var(--s6); }
}

.kit-field {
    margin: 0 0 var(--s5);
    padding: 0;
    border: 0;
    min-width: 0;
}

.kit-field > label:not(.kit-choice-option),
.kit-field > legend {
    display: block;
    font-weight: 600;
    font-size: 0.9375rem;
    margin: 0 0 var(--s2);
    padding: 0;
}

.kit-hint {
    margin: calc(var(--s2) * -0.5) 0 var(--s2);
    font-size: 0.875rem;
    color: var(--muted);
}

.kit-input {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kit-input:hover { border-color: oklch(80% 0.02 220); }

.kit-input:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.kit-input:has([aria-invalid="true"]) {
    border-color: var(--kit-bad);
    box-shadow: 0 0 0 3px var(--kit-bad-soft);
}

.kit-input input,
.kit-input select {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: 0 var(--s4);
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-variant-numeric: tabular-nums;
}

.kit-input input:focus,
.kit-input select:focus { outline: none; }

.kit-input input::placeholder { color: oklch(56% 0.02 230); }

.kit-affix {
    display: flex;
    align-items: center;
    padding: 0 var(--s3);
    color: var(--muted);
    font-size: 0.9375rem;
}

.kit-input.has-prefix input { padding-left: 0; }
.kit-input.has-suffix input { padding-right: 0; }

.kit-select { position: relative; }

.kit-select select {
    appearance: none;
    padding-right: var(--s10);
    cursor: pointer;
}

/* Chevron drawn in CSS so the select matches the input height and stroke. */
.kit-select::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 7px;
    height: 7px;
    border: solid var(--muted);
    border-width: 0 1.75px 1.75px 0;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.kit-select select:invalid { color: oklch(56% 0.02 230); }

.kit-choice-option {
    display: flex;
    gap: var(--s3);
    align-items: flex-start;
    padding: var(--s3) var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    margin-bottom: var(--s2);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.kit-choice-option:hover { border-color: oklch(80% 0.02 220); }

.kit-choice-option:has(input:checked) {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.kit-choice-option:has(input:focus-visible) {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.kit-choice-option input {
    margin: 3px 0 0;
    width: 18px;
    height: 18px;
    flex: none;
}

.kit-choice-text strong {
    display: block;
    font-weight: 600;
    font-size: 0.9375rem;
}

.kit-choice-text span {
    display: block;
    font-size: 0.875rem;
    color: var(--muted);
}

.kit-choice:has([aria-invalid="true"]) .kit-choice-option,
.kit-choice.is-invalid .kit-choice-option { border-color: var(--kit-bad); }

.kit-field-error,
.kit-form-error {
    margin: var(--s2) 0 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--kit-bad);
}

.kit-form-error {
    margin: 0 0 var(--s5);
    padding: var(--s3) var(--s4);
    border-radius: var(--radius-control);
    background: var(--kit-bad-soft);
}

.kit-field-error[hidden], .kit-form-error[hidden] { display: none; }

.kit-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    min-height: 52px;
    font-weight: 600;
    transition: background-color 0.15s ease, transform 0.15s var(--kit-ease);
}

.kit-form .kit-submit { width: 100%; }

.button-cta:hover { background: oklch(64% 0.18 52); }

.kit-submit:active { transform: translateY(1px); }

.kit-submit[disabled] {
    cursor: progress;
    opacity: 0.85;
}

.kit-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: kit-spin 0.7s linear infinite;
}

.is-busy .kit-spinner { display: inline-block; }

@keyframes kit-spin { to { transform: rotate(360deg); } }

.kit-status {
    margin: var(--s3) 0 0;
    font-size: 0.875rem;
    color: var(--muted);
    min-height: 1.3em;
}

.kit-status:empty { margin: 0; min-height: 0; }

/* Run progress: bar + steps shown while analyze() works, so the visitor does not leave mid-load. */
.kit-progress {
    margin: var(--s4) 0 0;
    padding: var(--s4);
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface, transparent);
}

.kit-progress-track {
    height: 8px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}

.kit-progress-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--brand);
    transition: width 0.4s ease-out;
}

.kit-progress-steps {
    list-style: none;
    margin: var(--s3) 0 0;
    padding: 0;
    display: grid;
    gap: 6px;
    font-size: 0.9375rem;
    color: var(--muted);
}

.kit-progress-step {
    position: relative;
    padding-left: 26px;
    transition: color 0.2s ease;
}

.kit-progress-step::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.35em;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--line);
    box-sizing: border-box;
}

.kit-progress-step.is-current { color: var(--ink); font-weight: 600; }

.kit-progress-step.is-current::before {
    border-color: var(--brand);
    border-right-color: transparent;
    animation: kit-spin 0.8s linear infinite;
}

.kit-progress-step.is-done { color: var(--ink); }

.kit-progress-step.is-done::before {
    background: var(--brand);
    border-color: var(--brand);
}

.kit-progress-notify {
    margin: var(--s4) 0 0;
    padding-top: var(--s4);
    border-top: 1px solid var(--line);
}

.kit-progress-notify-title { margin: 0; font-weight: 600; color: var(--ink); }

.kit-progress-notify-text { margin: 4px 0 var(--s3); font-size: 0.9rem; color: var(--muted); }

.kit-progress-notify-row { display: flex; gap: var(--s2); flex-wrap: wrap; }

.kit-progress-notify-row input {
    flex: 1 1 180px;
    min-width: 0;
    min-height: 44px;
    padding: 0 var(--s3);
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    background: #fff;
    color: var(--ink);
}

.kit-progress-notify-row .button { min-height: 44px; flex: 0 0 auto; }

.kit-progress-notify-row .button[hidden] { display: none; }

.kit-progress-notify-msg { margin: var(--s2) 0 0; font-size: 0.875rem; color: var(--muted); min-height: 1.2em; }

.kit-progress-notify.is-saved .kit-progress-notify-msg { color: var(--ink); font-weight: 600; }

.kit-progress-note {
    margin: var(--s3) 0 0;
    font-size: 0.8125rem;
    color: var(--muted);
}

.kit-form-note {
    margin: var(--s3) 0 0;
    font-size: 0.8125rem;
    color: var(--muted);
    text-align: center;
}

/* --- Landing details ----------------------------------------------------------------- */

.kit-details {
    margin-top: var(--s10);
    padding-top: var(--s10);
    border-top: 1px solid var(--line);
    max-width: var(--kit-measure);
}

.kit-details h2 {
    font-size: 1.375rem;
    font-weight: 700;
    margin: var(--s10) 0 var(--s3);
}

.kit-details h2:first-child { margin-top: 0; }

.kit-details p { margin: 0 0 var(--s4); }

.kit-details h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: var(--s6) 0 var(--s2);
}

.kit-details ol {
    margin: 0 0 var(--s4);
    padding-left: 1.75em;
    max-width: var(--kit-measure);
}

.kit-details ol li { margin: 0 0 var(--s2); }

.kit-toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    list-style: none;
    margin: 0 0 var(--s4);
    padding: 0;
}

.kit-toc a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 var(--s3);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.875rem;
    text-decoration: none;
}

.kit-toc a:hover { border-color: var(--brand); }

.kit-details h3[id] { scroll-margin-top: 88px; }

.kit-library {
    margin: 0 0 var(--s4);
    padding-left: 1.25em;
    max-width: var(--kit-measure);
}

.kit-library li { margin: 0 0 var(--s2); }

.kit-library-groups { margin: 0 0 var(--s10); }

.kit-library-group summary {
    display: flex;
    align-items: baseline;
    gap: var(--s3);
}

.kit-library-count {
    margin-left: auto;
    padding-right: var(--s8);
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--muted);
    white-space: nowrap;
}

.kit-library-group .kit-library { margin-top: var(--s4); }

.kit-details details {
    border-bottom: 1px solid var(--line);
    padding: var(--s4) 0;
}

.kit-details details:first-of-type { border-top: 1px solid var(--line); }

.kit-details summary {
    position: relative;
    display: block;
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    min-height: 28px;
    padding-right: var(--s8);
}

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

/* Drawn chevron in place of the browser's triangle; it turns when the answer opens. */
.kit-details summary::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 0.45em;
    width: 7px;
    height: 7px;
    border: solid var(--muted);
    border-width: 0 1.75px 1.75px 0;
    transform: rotate(45deg);
    transition: transform 0.2s var(--kit-ease);
}

.kit-details details[open] summary::after { transform: translateY(3px) rotate(-135deg); }

.kit-details summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

.kit-details details p { margin: var(--s3) 0 0; color: var(--muted); }

/* --- Result sheet --------------------------------------------------------------------- */

.kit-result { max-width: 760px; }

.kit-result-head h1 {
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 0 var(--s3);
}

.kit-result-head.tone-good h1 { color: var(--kit-good); }
.kit-result-head.tone-warn h1 { color: var(--kit-warn); }
.kit-result-head.tone-bad h1 { color: var(--kit-bad); }

.kit-verdict-text {
    font-size: 1.125rem;
    max-width: var(--kit-measure);
    margin: 0 0 var(--s3);
}

.kit-run-meta {
    margin: 0 0 var(--s8);
    font-size: 0.875rem;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.kit-sent {
    display: flex;
    gap: var(--s3);
    align-items: flex-start;
    background: var(--brand-soft);
    border-radius: var(--radius-control);
    padding: var(--s4);
    margin: 0 0 var(--s8);
    color: var(--brand-dark);
}

.kit-sent p { margin: 0; overflow-wrap: anywhere; }
.kit-sent .kit-icon { flex: none; margin-top: 2px; }

.kit-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 0 var(--s6);
    margin: 0 0 var(--s8);
}

.kit-metric {
    border-top: 1px solid var(--line);
    padding: var(--s4) 0;
}

.kit-metric dt {
    font-size: 0.875rem;
    color: var(--muted);
}

.kit-metric dd {
    margin: var(--s2) 0 0;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.kit-metric p {
    margin: var(--s2) 0 0;
    font-size: 0.8125rem;
    color: var(--muted);
}

/* Bars: the one moving part of the page. They grow once, from zero, when it loads. */
.kit-bars {
    margin: 0 0 var(--s10);
    padding: var(--s6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
}

.kit-bars figcaption {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.0625rem;
    margin-bottom: var(--s4);
}

.kit-bars ul { list-style: none; margin: 0; padding: 0; }

.kit-bar {
    display: grid;
    grid-template-columns: minmax(0, 12em) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s4);
    padding: var(--s2) 0;
    font-size: 0.9375rem;
}

.kit-bar-track {
    height: 12px;
    border-radius: 999px;
    background: var(--surface-soft);
    overflow: hidden;
}

.kit-bar-fill {
    display: block;
    height: 100%;
    width: var(--bar);
    border-radius: inherit;
    background: oklch(72% 0.03 225);
    animation: kit-grow 0.9s var(--kit-ease) both;
}

.kit-bar.is-current .kit-bar-label { font-weight: 600; }
.kit-bar.is-current .kit-bar-fill { background: var(--ink); }
.kit-bar.is-best .kit-bar-fill { background: var(--brand); }

.kit-bar-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 7.5em;
}

.kit-bars-caption {
    margin: var(--s4) 0 0;
    font-size: 0.8125rem;
    color: var(--muted);
}

@keyframes kit-grow { from { width: 0; } }

@media (max-width: 560px) {
    .kit-bars { padding: var(--s4); }
    .kit-bar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--s2) var(--s3);
    }
    .kit-bar-track { grid-column: 1 / -1; grid-row: 2; }
    .kit-bar-value { min-width: 0; }
}

.kit-section { margin: 0 0 var(--s10); }

.kit-section > h2 {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0 0 var(--s4);
}

.kit-findings {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}

.kit-finding {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: var(--s4);
    padding: var(--s5) 0;
    border-bottom: 1px solid var(--line);
}

.kit-finding > .kit-icon { margin-top: 1px; }

.kit-finding h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 var(--s2);
}

.kit-finding-body p { margin: 0; max-width: var(--kit-measure); }

.kit-finding-body .kit-status-word {
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.status-pass .kit-icon, .status-pass .kit-status-word { color: var(--kit-good); }
.status-warn .kit-icon, .status-warn .kit-status-word { color: var(--kit-warn); }
.status-fail .kit-icon, .status-fail .kit-status-word { color: var(--kit-bad); }
.status-info .kit-icon, .status-info .kit-status-word { color: var(--brand); }

.kit-finding-body .kit-locked-line {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: 0.875rem;
    color: var(--muted);
}

.kit-locked-line .kit-icon { width: 16px; height: 16px; color: var(--muted); }

/* --- Question sections (survey-style results) --------------------------------------- */

.kit-qsection > h2 { margin-bottom: var(--s2); }

.kit-verdict-quote {
    margin: 0 0 var(--s2);
    font-style: italic;
    color: var(--muted);
    max-width: var(--kit-measure);
    overflow-wrap: anywhere;
}

.kit-qsection-intro {
    margin: 0 0 var(--s4);
    color: var(--muted);
    max-width: var(--kit-measure);
}

.kit-qlist {
    margin: 0;
    padding: 0 0 0 1.75em;
    border-top: 1px solid var(--line);
}

.kit-qlist li {
    padding: var(--s4) 0;
    border-bottom: 1px solid var(--line);
}

.kit-qlist li::marker {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}

.kit-q {
    margin: 0 0 var(--s1, 4px);
    font-weight: 600;
    font-size: 1.0625rem;
    max-width: var(--kit-measure);
}

.kit-q-tag {
    margin: 0 0 var(--s2);
    font-size: 0.8125rem;
    color: var(--muted);
}

.kit-q-detail {
    margin: 0;
    font-size: 0.9375rem;
    max-width: var(--kit-measure);
}

.kit-textarea textarea {
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: var(--s3) var(--s4);
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    resize: vertical;
}

.kit-textarea textarea:focus { outline: none; }
.kit-textarea textarea::placeholder { color: oklch(56% 0.02 230); }

.kit-optional { font-weight: 400; color: var(--muted); }

.kit-gate-fields {
    display: grid;
    gap: 0 var(--s4);
}

@media (min-width: 600px) {
    .kit-gate-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Gate ------------------------------------------------------------------------------ */

.kit-gate {
    margin: 0 0 var(--s10);
    padding: var(--s6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--kit-shadow);
}

.kit-gate h2 {
    font-size: 1.375rem;
    font-weight: 800;
    margin: 0 0 var(--s2);
}

.kit-gate-copy p { margin: 0 0 var(--s5); max-width: var(--kit-measure); }

.kit-gate-form > label {
    display: block;
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: var(--s2);
}

.kit-gate-row {
    display: grid;
    gap: var(--s3);
}

@media (min-width: 600px) {
    .kit-gate-row { grid-template-columns: minmax(0, 1fr) auto; }
    .kit-gate-row .kit-submit { padding-inline: var(--s6); }
}

.kit-gate-support {
    margin: var(--s3) 0 0;
    font-size: 0.8125rem;
    color: var(--muted);
}

/* --- Actions, notes, more ------------------------------------------------------------ */

.kit-actions {
    list-style: none;
    counter-reset: kit-step;
    margin: 0;
    padding: 0;
}

.kit-actions li {
    counter-increment: kit-step;
    position: relative;
    padding: var(--s5) 0 var(--s5) var(--s10);
    border-top: 1px solid var(--line);
}

.kit-actions li::before {
    content: counter(kit-step);
    position: absolute;
    left: 0;
    top: var(--s5);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}

.kit-actions h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 var(--s2);
}

.kit-actions p { margin: 0; max-width: var(--kit-measure); }

.kit-actions .kit-partner { margin-top: var(--s3); }

.kit-partner a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-weight: 600;
}

.kit-partner .kit-icon { width: 16px; height: 16px; transition: transform 0.2s var(--kit-ease); }
.kit-partner a:hover .kit-icon { transform: translateX(3px); }

.kit-notes {
    border-top: 1px solid var(--line);
    padding-top: var(--s4);
    margin: 0 0 var(--s6);
}

.kit-notes p {
    margin: 0 0 var(--s2);
    font-size: 0.8125rem;
    color: var(--muted);
    max-width: var(--kit-measure);
}

.kit-again { margin: 0 0 var(--s10); }

.kit-again a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
}

.kit-more .tool-card strong { font-family: var(--font-display); }

.kit-empty { max-width: 34em; }
.kit-empty p { color: var(--muted); margin: 0 0 var(--s6); }

.kit-footer-links { margin: 0 0 var(--s2); }

@media (max-width: 560px) {
    .site-main { padding: var(--s8) var(--s4); }
    .kit-form, .kit-gate { padding: var(--s5); }
}

@media (prefers-reduced-motion: reduce) {
    .kit-bar-fill, .kit-spinner, .kit-progress-step.is-current::before { animation: none; }
    .kit-progress-fill { transition: none; }
    .kit-input, .kit-choice-option, .kit-submit, .kit-partner .kit-icon { transition: none; }
}