/*
 * MK CoC — Ciara survey
 * AAA-target stylesheet. Palette and ratios mirror docs/accessibility-spec.md §9.
 */

@font-face {
    font-family: "Neue Haas Grotesk Display Round";
    src: url("fonts/NeueHaasGrotDispRound-55Roman.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Neue Haas Grotesk Display Round";
    src: url("fonts/NeueHaasGrotDispRound-56RomanItalic.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Neue Haas Grotesk Display Round";
    src: url("fonts/NeueHaasGrotDispRound-65Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
/* Helvetica Neue LT Pro 53 Extended — display face for large headings. */
@font-face {
    font-family: "Helvetica Neue Display";
    src: url("fonts/HelveticaNeueLTPro-53-Extended.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --mk-white: #FFFFFF;
    --mk-black: #000000;
    --mk-green:  #7AA638;
    --mk-coral:  #F26D78;
    --mk-purple: #BF739D;
    --mk-teal:   #63BFB6;
    --mk-yellow: #F2CB07;
    /* Back-compat alias — older selectors/JS still reference --mk-mauve. */
    --mk-mauve:  var(--mk-purple);

    --mkcoc-bg: var(--mk-white);
    --mkcoc-bg-muted: #F6F6F6;
    --mkcoc-text: var(--mk-black);
    --mkcoc-text-muted: #404040;
    --mkcoc-accent: #1B4B8F;
    --mkcoc-accent-hover: #0F3266;
    --mkcoc-error: #8B1A1A;
    --mkcoc-success: #1F5C2E;
    --mkcoc-border: #767676;

    --mkcoc-radius: 6px;
    --mkcoc-spacing: 1rem;
    --mkcoc-max-w: 900px;
    --mkcoc-target: 44px;
    --mkcoc-rail-w: 11rem;
    --mkcoc-rail-gap: 1.5rem;
}

/* Light-only theme — dark-mode override intentionally removed. */

/* Thanks page — soft whitesmoke surface so the generative artwork reads
   against a neutral light grey. The JS `applyPageBg()` writes
   `body.style.backgroundColor` inline, so the override needs !important
   to beat it. Palette tokens stay defined so the export still picks a
   random colour for the saved share image. */
body:has(.mkcoc-share) {
    background-color: whitesmoke !important;
    --mkcoc-bg: whitesmoke;
}

/* Lock both html and body so panning the page never reveals the
   transform: translateX overflow of the dot row (or any other element
   that extends past the body). `clip` is the modern, scrolling-safe
   choice; older Safari/Firefox fall through to the legacy fallbacks. */
html, body {
    overflow-x: clip;
    overflow-x: -moz-hidden-unscrollable;
}
body {
    background: var(--mkcoc-bg);
    color: var(--mkcoc-text);
    font-family: "Neue Haas Grotesk Display Round", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.125rem;
    line-height: 1.75;
    letter-spacing: 0.012em;
    margin: 0;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Single-column container: every direct content child of body shares one centred 900px column */
body > .site-header,
body > .mkcoc-progress-band,
body > .mkcoc-question-prompt,
body > .mkcoc-card-shell,
body > main,
body > .mkcoc-shell,
body > .mkcoc-footer-links {
    width: 100%;
    max-width: var(--mkcoc-max-w);
    box-sizing: border-box;
}
@supports not (height: 100svh) {
    body { min-height: 100vh; }
}

.site-header,
.mkcoc-progress-band {
    flex-shrink: 0;
}

.site-header {
    background: transparent;
}

main {
    flex: 1 0 auto;
    min-height: 0;
}

/* Programmatic-focus targets (tabindex="-1" wrappers like #mkcoc-main
   and the active card) — survey.js focuses these after every SPA swap
   for screen-reader continuity, but a keyboard user can't tab to them,
   so the default focus ring would just flash for nothing. Suppress it
   here while leaving real :focus-visible rings intact everywhere else. */
[tabindex="-1"]:focus { outline: none; }

.mkcoc-footer-links {
    flex-shrink: 0;
}

.mkcoc-shell {
    max-width: var(--mkcoc-max-w);
    margin: 2rem auto;
    padding: 0 1.25rem 4rem;
    /* Standard two-column layout — shared with .mkcoc-landing and
       .mkcoc-form-grid so every page (homepage, question, thanks) lines
       up on the same vertical seams. Children span both columns by
       default; opt into a single side with .mkcoc-shell__main (left),
       .mkcoc-shell__rail (right), or sit across both with
       .mkcoc-shell__intro. */
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.5fr);
    column-gap: 2rem;
    row-gap: 1.5rem;
    align-items: start;
    /* `main { flex: 1 0 auto }` stretches the shell to fill remaining
       viewport height. On tall screens default grid `align-content`
       distributes the extra space evenly between rows — the dots row
       drifts down, gap blows out, layout reads as different per window
       size. Packing rows at the top makes the layout viewport-height-
       independent: same composition on a laptop and a 4K display. */
    align-content: start;
}
.mkcoc-shell > *           { grid-column: 1 / -1; min-width: 0; }
.mkcoc-shell__intro        { grid-column: 1 / -1; }
/* Hero treatment for the heading in any shell intro (review, thanks,
   resume, etc.) — matches .mkcoc-landing__title so every page that
   opens with a title + lede pair reads at the same scale. */
.mkcoc-shell__intro > h1 {
    margin: 0 0 1.5rem;
    max-width: 23ch;
    text-wrap: balance;
    font-size: clamp(2.25rem, 1.05rem + 2.25vw, 3.5rem);
}
.mkcoc-shell__main         { grid-column: 1; min-width: 0; }
.mkcoc-shell__rail {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    /* Rail container has no view-transition-name — each individual button
       inside owns its own VT name so the browser can track them across
       pages (advance button morphs in place, back button slides in/out). */
}
.mkcoc-shell__rail .mkcoc-btn--primary {
    width: 100%;
    margin-left: 0;
}
/* `display: contents` lets a wrapper element disappear from layout so its
   children participate in the parent grid directly. Used to keep semantic
   wrappers (<form>, <article>) without breaking the 2-column shell. */
.mkcoc-shell__contents { display: contents; }
/* `.mkcoc-shell > *` only matches direct DOM children, so a wrapper with
   display: contents drops its grandchildren into the grid without the
   default full-span placement. Force the span here so any wrapper using
   __contents behaves like its children are real shell rows. */
.mkcoc-shell__contents > * { grid-column: 1 / -1; min-width: 0; }
@media (max-width: 48rem) {
    .mkcoc-shell {
        grid-template-columns: 1fr;
        column-gap: 0;
        /* Horizontal padding kept at 1.25rem to align with the site
           header's `padding: 1.5rem 1.25rem` — the shell's content edge
           sits flush under the header's logo edge. */
    }
    .mkcoc-shell__main,
    .mkcoc-shell__rail { grid-column: 1; }
}

/* Global H1 spec — used by the question heading, review page heading,
   accessibility/glossary/privacy headings, etc. The display face and the
   fluid clamp size live here so every <h1> on the site reads as one type. */
h1 {
    font-family: "Helvetica Neue Display", "Neue Haas Grotesk Display Round", "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* Fluid clamp — scales from 1.5rem (≈24px) on tiny phones up to
       3.5rem (≈56px) once the viewport hits ~1742px. The middle term
       `1.05rem + 2.25vw` is the linear growth in between. Clamp args
       MUST be ordered min < pref < max for the function to produce a
       fluid value (a clamped min > max collapses to the max). */
    font-size: clamp(1.5rem, 1.05rem + 2.25vw, 3.5rem);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.005em;
    margin: 0 0 1rem;
    text-wrap: pretty;
    /* Long words (e.g. "interpretation") on narrow viewports were
       overflowing the column; allow them to break across lines. */
    overflow-wrap: break-word;
    word-break: break-word;
}

.mkcoc-shell h2 {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 1.5rem 0 0.5rem;
}

.mkcoc-shell p { margin: 0.75rem 0; }

/* ====================================================================
   Global link treatment — every <a> on the site inherits its surrounding
   text colour and underlines with a proportional offset + thickness, so
   the underline tracks the font size cleanly (small captions get a fine
   underline close to the baseline; the larger leads get a heavier one
   sitting further below).
   The body-scoped selector means any class that paints its own colour
   (.mkcoc-btn, .site-header__title, the share-image card buttons, the
   jargon link's currentColor override, etc.) keeps winning — we only set
   the default for everything else.
   ==================================================================== */
body a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.18em;
    text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
    transition: text-decoration-color 200ms ease;
}
body a:hover {
    text-decoration-color: currentColor;
}
/* Buttons, header logo, footer mark, etc. opt out of the underline by
   their own rules already (text-decoration: none). */

.mkcoc-jargon,
.mkcoc-jargon .mkcoc-word {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
    text-underline-offset: 4px;
    transition: text-decoration-color 320ms ease;
}
/* Jargon spans are allowed to wrap at whitespace BETWEEN words inside
   the term (so longer phrases like "rooted in the story of place" don't
   force horizontal overflow on narrow viewports). The opening / closing
   quotes the PHP regex absorbs into the link stay glued to the first
   and last words because they sit inside the SAME word-span (e.g.
   `<span>'rooted</span> … <span>place'</span>`) — there's no whitespace
   between the quote and the adjacent letter, so the browser never picks
   that as a break opportunity. */
/* Hide the underline inside the animated heading until each word's own
   reveal finishes — JS adds .is-done to each .mkcoc-word at the moment
   its tween completes, so per-word underlines fade in alongside the
   per-word fade-in rather than waiting for the full stagger. */
.mkcoc-card__heading .mkcoc-jargon,
.mkcoc-card__heading .mkcoc-jargon .mkcoc-word {
    text-decoration-color: transparent;
}
.mkcoc-card__heading .mkcoc-jargon .mkcoc-word.is-done {
    text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
}
.mkcoc-jargon:hover,
.mkcoc-jargon:focus-visible,
.mkcoc-jargon:hover .mkcoc-word,
.mkcoc-jargon:focus-visible .mkcoc-word {
    text-decoration-color: currentColor;
}
.mkcoc-jargon:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

abbr[title] {
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;
    cursor: help;
}

/* Jargon preview tooltip (Wikipedia-style hovercard, WCAG 1.4.13) */
/* Glossary popover (jargon-tip). Always-white surface, no border, with
   the same soft drop-shadow as the active question dot. The <strong>
   inside is the glossary word — set in the extended display face so it
   reads as a card title; everything else is the description, in Neue
   Haas Grotesk Display Round Medium, small. */
.mkcoc-jargon-tip {
    position: fixed;
    z-index: 100;
    background: var(--mk-white);
    color: var(--mk-black);
    border: 0;
    border-radius: 0.625rem;
    corner-shape: squircle;
    box-shadow:
        rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset,
        rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    padding: 1.975rem 1.425rem;
    font-family: "Neue Haas Grotesk Display Round", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.012em;
    max-width: 320px;
}
.mkcoc-jargon-tip[hidden] { display: none; }
.mkcoc-jargon-tip strong {
    display: block;
    margin: 0 0 0.975rem;
    /* Extended display face for the glossary word — same family as the
       big landing/page <h1>s, so the popover feels like a tiny card. */
    font-family: "Helvetica Neue Display", "Neue Haas Grotesk Display Round", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.005em;
}

.mkcoc-lede {
    font-size: 1.25rem;
    color: var(--mkcoc-text);
}

.mkcoc-note {
    background: var(--mkcoc-bg-muted);
    border-left: 4px solid var(--mkcoc-accent);
    padding: 0.75rem 1rem;
    margin-top: 1rem;
}

.mkcoc-flash {
    background: var(--mkcoc-bg-muted);
    border-left: 4px solid var(--mkcoc-success);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
}

.mkcoc-error {
    background: var(--mkcoc-bg-muted);
    border-left: 4px solid var(--mkcoc-error);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
}
.mkcoc-error p { margin: 0; }

.mkcoc-error-summary {
    background: var(--mkcoc-bg-muted);
    border: 3px solid var(--mkcoc-error);
    border-radius: var(--mkcoc-radius);
    padding: 1rem 1.25rem;
    margin: 1rem 0 1.5rem;
}
.mkcoc-error-summary:focus-visible { outline: 3px solid var(--mkcoc-accent); outline-offset: 2px; }
.mkcoc-error-summary__heading {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    color: var(--mkcoc-error);
}
.mkcoc-error-summary__list {
    margin: 0;
    padding-left: 1.25rem;
}
.mkcoc-error-summary__list a {
    color: var(--mkcoc-error);
    font-weight: 700;
}

.mkcoc-field--error input[type="email"],
.mkcoc-field--error textarea {
    border-color: var(--mkcoc-error) !important;
    border-width: 3px !important;
}
.mkcoc-field__error {
    color: var(--mkcoc-error);
    font-weight: 700;
    margin: 0.25rem 0 0.5rem;
}

/* Email inputs on the resume + review pages — IDENTICAL declarations
   to .mkcoc-landing__input input so all three pages render the same
   field chrome (light grey fill, no border, ~64px tall, fluid clamp
   font-size up to 1.75rem). */
.mkcoc-shell input[type="email"] {
    width: 100%;
    box-sizing: border-box;
    background: #ECECEC;
    border: none;
    border-radius: 0.625rem;
    min-height: 3.5rem;
    padding: 1rem 1.5rem;
    font-family: inherit;
    font-size: clamp(1.125rem, 0.9rem + 0.8vw, 1.75rem);
    font-weight: 400;
    color: var(--mk-black);
    line-height: 1.3;
    -webkit-appearance: none;
            appearance: none;
}
.mkcoc-shell input[type="email"]::placeholder {
    color: var(--mk-black);
    opacity: 0.6;
}
.mkcoc-shell input[type="email"]:focus-visible {
    outline: 3px solid var(--mk-black);
    outline-offset: 2px;
}

/* Skip link */
.mkcoc-skip {
    position: absolute;
    left: -10000px;
    top: 1rem;
    background: var(--mkcoc-text);
    color: var(--mkcoc-bg);
    padding: 0.75rem 1rem;
    text-decoration: none;
    z-index: 100;
}
.mkcoc-skip:focus-visible {
    left: 1rem;
    outline: 3px solid var(--mkcoc-accent);
    outline-offset: 2px;
}

/* Screen-reader-only text (matches WP's helper) */
.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* Card-shell holds the single active card, centred within the page */
.mkcoc-card-shell {
    display: block;
    padding: 1rem 1.25rem 2rem;
    width: 100%;
    max-width: var(--mkcoc-max-w);
    margin: 0 auto;
    box-sizing: border-box;
}

.mkcoc-card,
.mkcoc-card--active {
    box-sizing: border-box;
    color: var(--mkcoc-text);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    width: 100%;
    max-width: none;
    max-height: none;
    overflow: visible;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: block;
}
.mkcoc-card--active .mkcoc-field { margin: 0; }
.mkcoc-card--active .mkcoc-field__hint { margin: 0.5rem 0 0; padding: 0; }
.mkcoc-card--active .mkcoc-flash {
    margin: 1rem 0 0;
    border-left: none;
    border-bottom: 0;
}
.mkcoc-card--active .mkcoc-actions { padding: 0; margin-top: 2.5rem; }

.mkcoc-card__q { display: flex; flex-direction: column; }
.mkcoc-card__a { display: flex; flex-direction: column; }

/* 2-column form layout: textarea + secondary actions on the left,
   primary Next button anchored to the right rail (matches the Review
   pill's rail in the progress band above). */
.mkcoc-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.5fr);
    column-gap: 2rem;
    align-items: stretch;
}
.mkcoc-form-grid__main { min-width: 0; }
.mkcoc-form-grid__rail {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.75rem;
    /* Buttons inside own their own VT names — the container isn't named
       so the browser tracks each button individually across SPA navs. */
}
/* Mobile rail layout — placed AFTER the base rule so source order beats
   it at the @media break. Lays Previous + Next side-by-side, source
   order (Previous → Next) gives left → right naturally. */
@media (max-width: 48rem) {
    .mkcoc-form-grid {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 1.5rem;
        /* Lock the grid (and every child column) to its container width so
           wide intrinsic sizes from the textarea/buttons can't push the
           layout past the shell's padding-right. */
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .mkcoc-form-grid__main,
    .mkcoc-form-grid__rail {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    /* On phones, stack the buttons with Next on TOP so the thumb hits
       the forward path first. column-reverse keeps the source order
       (Previous → Next) intact for accessibility/keyboard. */
    .mkcoc-form-grid__rail { flex-direction: column-reverse; }
    /* Min-width on the Next button was driving the column wider than
       the shell on the narrowest phones — let it shrink with its rail. */
    .mkcoc-form-grid__rail .mkcoc-btn--primary { min-width: 0; }
}
.mkcoc-form-grid__rail .mkcoc-btn--primary {
    width: 100%;
    margin-left: 0;
}
/* In the form rail, the Review pill takes on the Next button's geometry
   (same height/padding/radius/alignment) but keeps its outlined treatment
   to read as a secondary action. The default --review pill has a 0.5rem
   left margin from the in-row layout — kill it here so it aligns flush
   with the Next button above. */
.mkcoc-form-grid__rail .mkcoc-circles__item--review {
    width: 100%;
    margin: 0;
}
.mkcoc-form-grid__rail .mkcoc-circles__item--review a {
    width: 100%;
    height: auto;
    min-height: 6rem;
    padding: 1.125rem 1.5rem;
    border-radius: 0.625rem;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    box-sizing: border-box;
    background: var(--mkcoc-text);
    color: var(--mkcoc-bg);
    box-shadow: none;
}

/* Question prompt sits between the progress dots and the answer card */
.mkcoc-question-prompt {
    /* Now lives as .mkcoc-shell__intro — shell controls width/padding. */
    text-align: left;
}
.mkcoc-question-prompt .mkcoc-card__heading {
    text-align: left;
    align-content: end;
    /* Higher mobile floor (1.65rem) so the question stays generous on
       small screens; ramps to 1.85rem on larger viewports. */
    font-size: clamp(1.65rem, 0.735rem + 1.575vw, 1.85rem);
    text-wrap: pretty;
}

.mkcoc-card__step {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

/* Question heading — inherits the global <h1> spec above and only adds
   layout-specific bits (longer bottom margin, reading max-width).
   Height is now reserved by .mkcoc-card__heading-stack via CSS Grid
   (see below) — no JS measurement, no min-height var. */
.mkcoc-card__heading {
    margin: 0;
    max-width: 31.4ch;
    text-wrap: pretty;
    line-height: 1.35;
}

/* HEIGHT LOCK — the rock-solid version. Stack the active heading on top
   of one hidden probe per OTHER question, all sharing the same 1×1 grid
   cell via `grid-area: 1 / 1`. The cell's intrinsic height is whichever
   child wraps tallest, so the prompt block ALWAYS reserves room for the
   longest question. The active heading fills the cell (align/justify-self
   stretch is grid default). Probes are visibility:hidden (don't paint,
   don't get announced) but still contribute to layout sizing. No JS
   measurement, no font-loading race, no probe drift. */
.mkcoc-card__heading-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
}
.mkcoc-card__heading-stack > * {
    grid-area: 1 / 1;
    min-width: 0;
}
.mkcoc-card__heading-probe {
    /* Mirror every property that affects how the heading wraps so the
       probe's rendered height matches what the active heading would be
       if it carried that text. */
    visibility: hidden;
    pointer-events: none;
    margin: 0;
    max-width: 31.4ch;
    font-family: "Helvetica Neue Display", "Neue Haas Grotesk Display Round", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(1.05rem, 0.735rem + 1.575vw, 1.85rem);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.005em;
    text-wrap: pretty;
    overflow-wrap: break-word;
    word-break: break-word;
    text-align: left;
    display: block;
}
/* Other places that want the display face but aren't an <h1>. */
.mkcoc-review-card__q,
.mkcoc-share__title {
    font-family: "Helvetica Neue Display", "Neue Haas Grotesk Display Round", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Word-by-word reveal — anime.js animates each span in. Hidden by
   default so there's no flash of fully-painted heading before the JS
   stagger kicks in. */
.mkcoc-card__heading .mkcoc-word {
    display: inline-block;
    opacity: 0;
    will-change: opacity, transform;
}
/* Probes mirror the live heading's per-word inline-block structure so
   `text-wrap: pretty` picks the SAME line breaks (and therefore the
   same height) for probe and live. Without this the cell's intrinsic
   height changes between pages — dots jump. Probes stay invisible via
   their visibility:hidden on the wrapper, so no opacity:0 here. */
.mkcoc-card__heading-probe .mkcoc-word {
    display: inline-block;
}
/* Footer links inside the card-shell get standard layout */
.mkcoc-card-shell + .mkcoc-footer-links,
.mkcoc-card-shell .mkcoc-footer-links {
    max-width: var(--mkcoc-max-w);
    margin: 0 auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

@media (max-width: 30rem) {
    .mkcoc-card--active {
        max-height: none;
        overflow-y: visible;
        width: 100%;
    }
}

/* Index nav (<details> disclosure, open by default) — kept for non-question pages */
.mkcoc-index {
    max-width: var(--mkcoc-max-w);
    margin: 2rem auto 0;
    padding: 1rem 1.25rem;
    background: var(--mkcoc-bg-muted);
    border-radius: var(--mkcoc-radius);
}

.mkcoc-index__summary {
    cursor: pointer;
    font-weight: 700;
    list-style: none;
    min-height: var(--mkcoc-target);
    display: flex;
    align-items: center;
}
.mkcoc-index__summary::-webkit-details-marker { display: none; }
.mkcoc-index__summary::after {
    content: "▾";
    margin-left: 0.5rem;
    font-size: 0.8em;
    color: var(--mkcoc-text-muted);
}
.mkcoc-index[open] .mkcoc-index__summary::after { content: "▴"; }
.mkcoc-index__summary:focus-visible {
    outline: 3px solid var(--mkcoc-accent);
    outline-offset: 2px;
}

.mkcoc-index__progress {
    margin: 0.5rem 0 0.75rem;
    font-size: 1rem;
}

.mkcoc-index__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mkcoc-index__item a {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--mkcoc-radius);
    min-height: var(--mkcoc-target);
    align-items: center;
}

.mkcoc-index__item--answered a::before,
.mkcoc-index__item--current_answered a::before {
    content: "✓";
    font-weight: 700;
    color: var(--mkcoc-success);
    margin-right: 0.25rem;
}

.mkcoc-index__item--current a,
.mkcoc-index__item--current_answered a {
    background: var(--mkcoc-bg);
    outline: 2px solid var(--mkcoc-accent);
    outline-offset: -2px;
}

.mkcoc-index__num { font-weight: 700; }
.mkcoc-index__status { color: var(--mkcoc-text-muted); font-size: 0.9375rem; }

/* Context-sensitive help disclosure (per WCAG 3.3.5) */
.mkcoc-question-help {
    margin: 1rem 0 1.5rem;
    border: 1px solid var(--mkcoc-border);
    border-radius: var(--mkcoc-radius);
    background: var(--mkcoc-bg);
}
.mkcoc-question-help > summary {
    padding: 0.625rem 1rem;
    cursor: pointer;
    font-weight: 600;
    min-height: var(--mkcoc-target);
    display: flex;
    align-items: center;
}
.mkcoc-question-help > summary:focus-visible {
    outline: 3px solid var(--mkcoc-accent);
    outline-offset: -3px;
}
.mkcoc-question-help[open] > summary {
    border-bottom: 1px solid var(--mkcoc-border);
}
.mkcoc-question-help__list {
    margin: 0;
    padding: 0.75rem 1rem;
}
.mkcoc-question-help__list dt {
    font-weight: 700;
    margin-top: 0.75rem;
}
.mkcoc-question-help__list dt:first-child { margin-top: 0; }
.mkcoc-question-help__list dd { margin: 0.25rem 0 0; }
.mkcoc-question-help p { padding: 0 1rem 0.75rem; margin: 0.25rem 0 0; }

/* Question helper */
.mkcoc-progress {
    margin: 0 0 0.5rem;
    color: var(--mkcoc-text-muted);
    font-size: 0.9375rem;
}

.mkcoc-helper {
    background: var(--mkcoc-bg-muted);
    padding: 1rem 1.25rem;
    border-radius: var(--mkcoc-radius);
    margin: 1rem 0 1.5rem;
}
.mkcoc-helper__label {
    display: block;
    font-size: 0.875rem;
    color: var(--mkcoc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
    font-weight: 700;
}

/* Forms */
/* Review-page email opt-in row: circular checkbox sits to the LEFT of
   the email input, both inline. Together they read as one composed
   control — click the circle to opt in, type to add your email. */
.mkcoc-email-opt-in {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    /* When Tab moves keyboard focus into the opt-in from the review deck
       above, the browser auto-scrolls the page; the margin gives the
       checkbox + input some breathing room from the viewport edge so
       the focus ring isn't flush against the top of the screen. */
    scroll-margin-top: 6rem;
    scroll-margin-bottom: 6rem;
}
/* Big round checkbox. Default: solid white with a black border. When
   checked: the supplied SVG (a black-filled circle with a check cut
   out) is overlaid on top of the white surface — the cutout reveals
   white through, so the visible result is "black circle, white check". */
.mkcoc-email-opt-in__check[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    border: 0;
    border-radius: 50%;
    background-color: var(--mk-white);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0;
    cursor: pointer;
    transition:
        background-size 240ms cubic-bezier(0.34, 1.56, 0.64, 1),
        transform       120ms ease;
}
.mkcoc-email-opt-in__check[type="checkbox"]:checked {
    background-size: 100% 100%;
}
.mkcoc-email-opt-in__check[type="checkbox"]:focus-visible {
    outline: 3px solid var(--mk-black);
    outline-offset: 3px;
}
.mkcoc-email-opt-in__check[type="checkbox"]:active {
    transform: scale(0.94);
}
/* Email input takes the remaining row width — same chrome as the
   homepage / resume input. */
.mkcoc-email-opt-in__email {
    flex: 1 1 auto;
    min-width: 0;
}
/* Static variant for users with a session email on file — same chrome
   as the input but rendered as plain text. */
.mkcoc-email-opt-in__email--static {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    background: #ECECEC;
    border-radius: 0.625rem;
    min-height: 3.5rem;
    padding: 1rem 1.5rem;
    font-family: inherit;
    font-size: clamp(1.125rem, 0.9rem + 0.8vw, 1.75rem);
    font-weight: 400;
    color: var(--mk-black);
    line-height: 1.3;
}

/* Soft-card fieldset — mirrors the homepage input chrome (light fill,
   no border, rounded corners). Used for the "Get a copy of your
   answers" optional block on the review page. */
.mkcoc-fieldset {
    border: 0;
    background: #ECECEC;
    border-radius: 0.625rem;
    corner-shape: squircle;
    padding: 1.25rem 1.5rem 1.5rem;
    margin: 1.5rem 0;
}
/* When a fieldset is the only content of a form-grid main column the
   intrinsic top + bottom margin doubles up against the grid's row-gap
   — collapse it so the Submit button in the rail sits at the expected
   distance on mobile (stacked layout). */
.mkcoc-form-grid__main > .mkcoc-fieldset {
    margin: 0;
}
/* Dev tools panel (generative-v1-ink-dots dev UI) — hide on mobile,
   it's only useful on a desktop where there's space to inspect. */
@media (max-width: 48rem) {
    .mkcoc-gen-dev { display: none !important; }
}
.mkcoc-fieldset legend {
    padding: 0;
    font-family: "Neue Haas Grotesk Display Round", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mk-black);
    opacity: 0.7;
}
/* Custom checkbox — native control is visually hidden but kept
   accessible; we draw a styled box + checkmark in its place. */
.mkcoc-checkbox {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    min-height: var(--mkcoc-target);
    padding: 0.625rem 0;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--mk-black);
}
.mkcoc-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    border: 2px solid var(--mk-black);
    border-radius: 0.375rem;
    corner-shape: squircle;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-content: center;
    transition:
        background-color 180ms ease,
        border-color     180ms ease,
        transform        120ms ease;
}
.mkcoc-checkbox input[type="checkbox"]::before {
    content: '';
    width: 0.75rem;
    height: 0.75rem;
    transform: scale(0);
    transform-origin: center;
    transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
    background: var(--mk-white);
    clip-path: polygon(
        14% 44%,  0  60%, 40% 100%, 100% 20%, 86% 8%, 38% 70%
    );
}
.mkcoc-checkbox input[type="checkbox"]:checked {
    background: var(--mk-black);
    border-color: var(--mk-black);
}
.mkcoc-checkbox input[type="checkbox"]:checked::before {
    transform: scale(1);
}
.mkcoc-checkbox input[type="checkbox"]:hover {
    border-color: var(--mk-black);
}
.mkcoc-checkbox input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--mk-black);
    outline-offset: 2px;
}
.mkcoc-checkbox input[type="checkbox"]:active {
    transform: scale(0.92);
}

.mkcoc-field { margin: 1rem 0; }
.mkcoc-field__label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.mkcoc-field__hint {
    margin: 0.5rem 0 0;
    color: var(--mkcoc-text-muted);
    font-size: 0.9375rem;
}
.mkcoc-field__required {
    font-weight: 400;
    color: var(--mkcoc-text-muted);
}

textarea#mkcoc_response {
    width: 100%;
    /* Without `min-width: 0` the textarea inherits `min-width: auto`,
       which equals its intrinsic min-content (~ longest unbroken word).
       On narrow viewports that can be wider than the column → textarea
       overflows right. Zero lets it shrink with the column. */
    min-width: 0;
    min-height: 16rem;
    margin: 0;
    border: 0;
    border-radius: 0;
    /* No white card — just the faint line ruling on the page background.
       Bottom padding still reserves one full line-height as a spare row
       beneath the cursor. */
    background-color: transparent;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(2.25rem - 1px),
        color-mix(in srgb, var(--mkcoc-text) 28%, transparent) calc(2.25rem - 1px),
        color-mix(in srgb, var(--mkcoc-text) 28%, transparent) 2.25rem
    );
    background-size: 100% 2.25rem;
    background-position: 0 0;
    background-repeat: repeat;
    background-attachment: local;
    color: var(--mkcoc-text);
    font-family: inherit;
    font-size: 1.14rem; /* was 1.425rem — 20% smaller */
    line-height: 2.25rem;
    letter-spacing: 0.021rem;
    font-weight: 400;
    -webkit-font-smoothing: auto;
    padding: 0 0 2.25rem;
    /* Auto-grow is JS-driven (see survey.js #mkcoc_response autoresize) —
       disable the native vertical resize handle and hide overflow so the
       textarea hugs its content height exactly. */
    resize: none;
    overflow: hidden;
    display: block;
    box-sizing: border-box;
    outline: none;
    /* Native auto-grow enhancement — supporting browsers (Chrome / Edge
       123+, Safari 18+) size the textarea to its content height without
       any JS. The survey.js autoresize handler stays in place as the
       fallback for Firefox and older Safari, where this property is
       silently ignored. When both are active the values agree (both
       target the content height) and the inline style the JS writes
       wins by specificity, so there's no fight. */
    field-sizing: content;
}
textarea#mkcoc_response:focus,
textarea#mkcoc_response:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Idle blinker — when the textarea is empty AND unfocused, paint a
   text-cursor at the top-left of the field to nudge the user to type.
   Detection: `:has(:placeholder-shown:not(:focus))` (the textarea carries
   a single-space placeholder so :placeholder-shown matches the empty
   state). Disappears the instant the user focuses or types. CSS-only —
   no JS state, no listeners. */
.mkcoc-field { position: relative; }
.mkcoc-field::before {
    content: '';
    position: absolute;
    /* Textarea now has no horizontal padding — cursor sits at the very
       left, vertically centred in the first line ((2.25 - 1.75) / 2 = 0.25rem). */
    top: 0.25rem;
    left: 0;
    width: 2px;
    height: 1.75rem;
    background: var(--mkcoc-text);
    opacity: 0;
    pointer-events: none;
}
/* Breathing cursor — slow ease-in-out cycle that never goes fully dark.
   Reads as inviting (alive, waiting) rather than a hard digital blink. */
.mkcoc-field:has(textarea:placeholder-shown:not(:focus))::before {
    animation: mkcoc-cursor-breathe 2400ms ease-in-out infinite;
}
@keyframes mkcoc-cursor-breathe {
    0%, 100% { opacity: 1;   }
    50%      { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
    .mkcoc-field:has(textarea:placeholder-shown:not(:focus))::before {
        animation: none;
        opacity: 1;
    }
}

/* ====================================================================
   Buttons — Müller-Brockmann monochrome
   - Primary (Next): chunky asymmetric block, "label" top-left, arrow
     bottom-right. Draws the eye, signals the main action.
   - Secondary (Previous): tight pill with leading arrow.
   - Text: quiet, underlined.
   ==================================================================== */
.mkcoc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem 1.5rem;
    margin-top: 2.5rem;
}

.mkcoc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: var(--mkcoc-target);
    padding: 0.625rem 1.25rem;
    border-radius: var(--mkcoc-radius);
    /* Squircle corners (CSS Borders & Backgrounds L4) — gives the
       superellipse "iOS app icon" curve in supporting browsers (Chrome
       144+, Safari 26.1+). Falls back gracefully to the regular
       circular-arc border-radius elsewhere. */
    corner-shape: squircle;
    border: 0;
    background: var(--mkcoc-text);
    color: var(--mkcoc-bg);
    font-size: 1rem;
    font-family: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition:
        background-color 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
        color            260ms cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow       260ms cubic-bezier(0.22, 0.61, 0.36, 1),
        transform        120ms ease;
}
.mkcoc-btn:hover {
    background: var(--mk-white);
    color: var(--mk-black);
    opacity: 1;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
/* Invert the circular icon so a black-on-white treatment reads cleanly
   when the button itself becomes white. */
.mkcoc-btn:hover .mkcoc-btn__icon       { background: var(--mk-black); }
.mkcoc-btn:hover .mkcoc-btn__icon path  { fill: var(--mk-white); }
.mkcoc-btn:active { transform: translateY(1px); }
.mkcoc-btn:focus-visible {
    outline: 3px solid var(--mkcoc-text);
    outline-offset: 3px;
}

/* Primary (Next) — chunky asymmetric block, icon on the LEFT */
.mkcoc-btn--primary {
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    min-width: 11rem;
    min-height: 6rem;
    padding: 1.125rem 1.5rem;
    border-radius: 0.625rem;
    font-size: 1.25rem;
    font-weight: 400;
    text-align: left;
    line-height: 1.1;
    margin-left: auto;          /* push to the right of the actions row */
}

/* --advance: the chunky, square-ish vertical advance button (Next / Start /
   Submit / Save). Label stacks above the arrow icon. */
.mkcoc-btn--advance {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    min-height: 9rem;
    padding: 1.25rem 1.5rem;
    /* Shared VT name across every page the advance button appears on
       (landing Start/Continue → question Next → review Submit → thanks
       Save). The browser captures it as a single morphing element so
       the box-shape + position glide between pages while the label
       crossfades inside. Only one advance button per page so the name
       stays unique. */
    view-transition-name: mkcoc-advance-btn;
}
.mkcoc-btn--advance .mkcoc-btn__label {
    font-size: clamp(1.25rem, 0.9rem + 1.2vw, 1.875rem);
    line-height: 1;
}
.mkcoc-btn--advance .mkcoc-btn__icon {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.5rem;
}
/* Sub-label that sits between the .mkcoc-btn__label and the icon inside
   the chunky advance button (used on the landing CTA when the user has
   a survey already in progress). Quiet supporting text — small, narrower
   max-width, normal weight, sits on its own line. */
.mkcoc-btn--advance .mkcoc-btn__sub {
    font-family: "Neue Haas Grotesk Display Round", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.8125rem;
    line-height: 1.35;
    font-weight: 500;
    max-width: 22ch;
    margin: 0.25rem 0 0;
    opacity: 0.85;
}

/* --back: the compact horizontal counterpart that pairs with --advance in
   the rail (Previous). Same surface, smaller footprint. */
.mkcoc-btn--back {
    min-height: 3.25rem;
    padding: 0.5rem 1rem;
    gap: 0.75rem;
    font-family: "Neue Haas Grotesk Display Round", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    /* Owns its own VT name so the browser can slide it down/out when
       leaving Q1 → landing (or any page without Previous) and fade it
       back in on Q2+ navigations. */
    view-transition-name: mkcoc-back-btn;
}
.mkcoc-btn--back .mkcoc-btn__icon {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0.3rem;
}

/* Secondary (Previous) — tight pill, icon on the LEFT */
.mkcoc-btn--secondary {
    gap: 0.625rem;
    padding: 0.5rem 1.25rem 0.5rem 0.5rem;
    border-radius: 999px;
    background: var(--mkcoc-text);
    color: var(--mkcoc-bg);
    font-size: 1rem;
    font-weight: 400;
}

/* Inline SVG icon — circular badge with arrow inside.
   On dark buttons (primary/secondary) currentColor is light, so
   `background: currentColor` paints a light circle; the path keeps
   its default dark fill, so the arrow reads inverted against the button. */
.mkcoc-btn__icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    padding: 0.375rem;
    box-sizing: border-box;
    border-radius: 50%;
    background: currentColor;
    overflow: visible;
    transition:
        background-color 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
        transform        260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Nudge the right-facing arrow forward on hover — the small motion sells
   the "advance" action. Left arrow nudges back for parity. */
.mkcoc-btn:hover .mkcoc-btn__icon--right { transform: translateX(0.375rem); }
.mkcoc-btn:hover .mkcoc-btn__icon--left  { transform: translateX(-0.375rem); }

/* Down + up variants reuse the right-arrow SVG, rotated via the `rotate`
   longhand (composes with any future transform). No hover translate —
   the parent actions (Save image / Share) are vertical, so a nudge would
   read against the direction. */
.mkcoc-btn__icon--down { rotate: 90deg; }
.mkcoc-btn__icon--up   { rotate: -90deg; }
.mkcoc-btn__icon path {
    fill: var(--mkcoc-text);
    transition: fill 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mkcoc-btn--secondary:hover {
    background: var(--mkcoc-text);
    color: var(--mkcoc-bg);
    opacity: 0.88;
}

/* Text (Save for later) — quiet inline link */
.mkcoc-btn--text {
    background: transparent;
    color: var(--mkcoc-text);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    padding: 0.5rem 0.25rem;
    min-height: auto;
    font-weight: 400;
}
.mkcoc-btn--text:hover {
    background: transparent;
    color: var(--mkcoc-text);
    opacity: 0.7;
}

/* Review — collapsed rows of dot + question; expand to see the answer */
.mkcoc-review {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}
.mkcoc-review__item {
    background: var(--mkcoc-bg-muted);
    border-radius: var(--mkcoc-radius);
    margin-bottom: 0.5rem;
    overflow: hidden;
}
.mkcoc-review__details summary {
    list-style: none;
    cursor: pointer;
}
.mkcoc-review__details summary::-webkit-details-marker { display: none; }
.mkcoc-review__head {
    display: grid;
    grid-template-columns: var(--mkcoc-target) 1fr auto;
    gap: 0.875rem;
    align-items: center;
    padding: 0.75rem 1.25rem;
    transition: background-color 150ms ease;
}
.mkcoc-review__details summary:hover .mkcoc-review__head,
.mkcoc-review__details summary:focus-visible .mkcoc-review__head {
    background: rgba(0, 0, 0, 0.04);
}
.mkcoc-review__details summary:focus-visible {
    outline: 3px solid var(--mkcoc-accent);
    outline-offset: -3px;
}
.mkcoc-review__dot {
    width: var(--mkcoc-target);
    height: var(--mkcoc-target);
    border-radius: 50%;
    border: 2px solid var(--mkcoc-accent);
    background: transparent;
    color: var(--mkcoc-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    box-sizing: border-box;
    flex-shrink: 0;
}
.mkcoc-review__dot.is-done {
    background: var(--mkcoc-accent);
    color: var(--mkcoc-bg);
}
.mkcoc-review__qtext {
    font-size: 1rem;
    line-height: 1.4;
    color: var(--mkcoc-text);
}
.mkcoc-review__toggle {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mkcoc-accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.25rem 0.5rem;
}
.mkcoc-review__toggle-close { display: none; }
.mkcoc-review__details[open] .mkcoc-review__toggle-open { display: none; }
.mkcoc-review__details[open] .mkcoc-review__toggle-close { display: inline; }
.mkcoc-review__body {
    padding: 0.25rem 1.25rem 1rem calc(var(--mkcoc-target) + 1.25rem + 0.875rem);
}
.mkcoc-review__answer { white-space: pre-wrap; margin: 0.5rem 0 0.75rem; }
.mkcoc-review__empty { color: var(--mkcoc-text-muted); margin: 0.5rem 0 0.75rem; }
.mkcoc-review__actions { margin: 0; }
@media (max-width: 30rem) {
    .mkcoc-review__body { padding-left: 1.25rem; }
}

/* Review deck — horizontal scroll-snap carousel of vertical cards.
   Native swipe on touch, scroll on trackpad. No JS required. */
.mkcoc-review-deck {
    list-style: none;
    margin: 1.1rem 0;
    padding: 0 max(1.15rem, calc((100vw - var(--mkcoc-max-w)) / 2 + 1.25rem)) 20px;
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    overflow-y: visible;
    /* Proximity (not mandatory) — only snaps when the user is already
       close to a card, so the post-animation auto-centre that "snapped
       back" the cards no longer happens. */
    scroll-snap-type: x proximity;
    scroll-padding-inline: max(1.25rem, calc((100vw - var(--mkcoc-max-w)) / 2 + 1.25rem));
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Break out of the parent shell so the deck can scroll edge-to-edge */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
}
.mkcoc-review-deck::-webkit-scrollbar { display: none; }

.mkcoc-review-card {
    flex: 0 0 min(26rem, 80vw);
    scroll-snap-align: start;
    background: var(--mk-white);
    color: var(--mk-black);
    border: 0;
    border-radius: 1rem;
    corner-shape: squircle;
    padding: 2.25rem 2.25rem 2rem;
    box-sizing: border-box;
    box-shadow:
        rgba(0, 0, 0, 0.1)  0px 10px 15px -3px,
        rgba(0, 0, 0, 0.05) 0px 4px  6px  -2px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-height: 28rem;
}
/* (Card number disc removed — the question-dot row above the deck
   already indicates which card is which.) */
.mkcoc-review-card__q {
    margin: 0;
    font-family: "Helvetica Neue Display", "Neue Haas Grotesk Display Round", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(1.25rem, 0.95rem + 0.6vw, 1.5rem);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.005em;
    text-wrap: pretty;
}
/* Lined-paper answer area — faint horizontal rules tied to a 2.25rem
   rhythm, same pattern as the question-page textarea. Content paragraphs
   render at the same rhythm so the text sits cleanly on the lines. */
.mkcoc-review-card__a {
    flex: 1 1 auto;
    overflow-y: auto;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(2.25rem - 1px),
        color-mix(in srgb, var(--mk-black) 14%, transparent) calc(2.25rem - 1px),
        color-mix(in srgb, var(--mk-black) 14%, transparent) 2.25rem
    );
    background-size: 100% 2.25rem;
    background-position: 0 0;
    color: var(--mk-black);
    font-size: 1rem;
    line-height: 2.25rem;
    letter-spacing: 0.021rem;
    font-weight: 400;
    -webkit-font-smoothing: auto;
}
.mkcoc-review-card__a p { margin: 0; }
.mkcoc-review-card__empty {
    margin: 0;
    color: var(--mkcoc-text-muted);
}
/* Card action row — Edit Response + (optional) Show more, side-by-side
   pinned to the bottom of the card. */
.mkcoc-review-card__actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.mkcoc-review-card__edit,
.mkcoc-review-card__expand {
    margin-top: 0;
}
@media (max-width: 30rem) {
    .mkcoc-review-card {
        min-height: 24rem;
        padding: 1.75rem 1.5rem 1.5rem;
    }
}

/* Sequential slide-in from the right on review-page load. Longer travel
   and duration for a more cinematic glide.
   `animation-play-state: paused` keeps every card pinned at its keyframe-0
   (opacity:0, translateX(50vw)) until JS adds .is-ready to the parent deck
   — done AFTER the View Transition finishes so the cards don't animate
   during the crossfade and jitter. */
.mkcoc-review-card {
    opacity: 0;
    transform: translateX(50vw);
    animation: mkcoc-review-card-in 1400ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-play-state: paused;
}
.mkcoc-review-deck.is-ready .mkcoc-review-card {
    animation-play-state: running;
}
.mkcoc-review-card:nth-child(1) { animation-delay:  350ms; }
.mkcoc-review-card:nth-child(2) { animation-delay:  510ms; }
.mkcoc-review-card:nth-child(3) { animation-delay:  670ms; }
.mkcoc-review-card:nth-child(4) { animation-delay:  830ms; }
.mkcoc-review-card:nth-child(5) { animation-delay:  990ms; }
.mkcoc-review-card:nth-child(6) { animation-delay: 1150ms; }
.mkcoc-review-card:nth-child(7) { animation-delay: 1310ms; }
.mkcoc-review-card:nth-child(8) { animation-delay: 1470ms; }
@keyframes mkcoc-review-card-in {
    to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .mkcoc-review-card {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ====================================================================
   Question progress dots — monochrome track, native-scroll, locked.
   The band is a horizontal scroll container; JS sets scrollLeft so the
   current dot's CENTRE lands at the page title's left edge. User can
   scroll horizontally to browse other dots. Animation between question
   loads uses browser-native smooth-scroll (works reliably on every
   navigation, not just hard refresh).
   ==================================================================== */
.mkcoc-progress-band {
    background: transparent;
    padding: 0.75rem 1.25rem;
    overflow: visible;
    min-height: var(--mkcoc-band-h, 3rem);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--mkcoc-rail-w);
    column-gap: var(--mkcoc-rail-gap);
    align-items: center;
    /* Persist the band across SPA navigations as its own VT element instead
       of being caught in the root cross-fade (which made the dots flash
       in/out). The dot row updates in place via reconcileProgressBand +
       the shift JS, so the visible change is the leftward slide. */
    view-transition-name: mkcoc-progress;
}
/* Suppress every part of the VT pipeline for the progress band so it stays
   100% under JS-driven control: no snapshot crossfade (old/new), no
   group-pseudo position/size morph. Without these the old + new snapshots
   sit stacked for the VT duration AND the live DOM also runs its own slide,
   reading as a doubled fade/slide. */
::view-transition-old(mkcoc-progress),
::view-transition-new(mkcoc-progress),
::view-transition-group(mkcoc-progress) {
    animation: none !important;
}
::view-transition-old(mkcoc-progress) { opacity: 0; }
/* Question pages don't render a Review rail; collapse to single column so the
   circles row can be horizontally centred via JS shift without phantom rail
   space on the right. */
.mkcoc-progress-band--no-rail {
    grid-template-columns: 1fr;
    column-gap: 0;
}
.mkcoc-progress-band > * { grid-column: 1; }
.mkcoc-progress-band__rail {
    grid-column: 2;
    grid-row: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.mkcoc-progress-band__inner {
    max-width: none;
    margin: 0;
}
.mkcoc-circles {
    list-style: none;
    margin: 0;
    padding: 0;
    /* 10 dots × 32px + 9 × 1rem gaps ≈ 464px of intrinsic min-content.
       Without `min-width: 0` here, that min-content travels up through
       the band → shell grid item → shell, and refuses to let the page
       shrink below ~550px on mobile. Forcing 0 lets the row extend past
       its parent (body has `overflow-x: clip` so it's safely clipped)
       while the parent layouts shrink as small as the actual content. */
    min-width: 0;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    overflow: visible;
    font-variant-numeric: tabular-nums;
    transform: translateX(var(--mkcoc-shift, 0));
    will-change: transform;
}
.mkcoc-circles.is-animating {
    transition: transform 600ms cubic-bezier(0.22, 0.62, 0.18, 1);
}
.mkcoc-circles__item { flex-shrink: 0; }

/* Base — "not started": muted gray fill, dark numeral */
.mkcoc-circles__item a {
    --mkcoc-dot: 16px;
    width: var(--mkcoc-dot);
    height: var(--mkcoc-dot);
    border-radius: 50%;
    background: #E5E5E5;
    color: var(--mkcoc-text);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    /* Width/height intentionally NOT transitioned — sizes snap, only the
       row's translateX slides. Keeps the new current dot's centre locked
       to the title throughout the navigation. */
    transition:
        background-color 220ms ease,
        color 220ms ease;
}
.mkcoc-circles__item a:focus-visible {
    outline: 3px solid var(--mkcoc-text);
    outline-offset: 4px;
}
.mkcoc-circles__num {
    font-family: "Neue Haas Grotesk Display Round", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.625rem;
    font-weight: 500;
    line-height: 1;
}

/* Current — solid black, anchored point of the track */
.mkcoc-circles__item.is-current a {
    --mkcoc-dot: 22px;
    background: var(--mkcoc-text);
    color: var(--mk-white);
}
.mkcoc-circles__item.is-current .mkcoc-circles__num {
    font-size: 0.75rem;
    font-weight: 500;
}

/* Start + Review tokens — outlined pills at the ends of the row */
.mkcoc-circles__item--start { margin-right: 0.5rem; }
.mkcoc-circles__item--review { margin-left: 0.5rem; }

/* Review pill appended to the end of the question-dot row — sits after
   the last numeric dot. Outlined pill, "Review" label, links to the
   review page. */
.mkcoc-circles__item--review-link {
    margin-left: 0.875rem;
    flex-shrink: 0;
    transition: opacity 360ms ease;
}
.mkcoc-circles__item--review-link a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 32px;
    min-width: 5.5rem;
    padding: 0 1rem;
    border-radius: 999px;
    background: rgba(0,0,0,.1);
    color: var(--mkcoc-text);
    /* box-shadow: inset 0 0 0 1px var(--mkcoc-text); */
    font-family: neue haas grotesk display round,helvetica neue,Helvetica,Arial,sans-serif;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .02em;
    text-decoration: none;
    transition: background-color 220ms ease,color 220ms ease;
}
.mkcoc-circles__icon--eye {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    display: block;
}
.mkcoc-circles__item--review-link a:hover {
    background: rgba(0, 0, 0, 0.18);
}
/* On the review page (.mkcoc-review-deck only exists there) the pill is
   redundant — fade it out and disable clicks. */
body:has(.mkcoc-review-deck) .mkcoc-circles__item--review-link {
    opacity: 0;
    pointer-events: none;
}
.mkcoc-circles__item--start a,
.mkcoc-circles__item--review a {
    width: auto;
    padding: 0 0.625rem;
    gap: 0.4rem;
    border-radius: 999px;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--mkcoc-text);
    color: var(--mkcoc-text);
}
/* Review pill matches the standard button corner radius, not the full pill. */
.mkcoc-circles__item--review a {
    border-radius: var(--mkcoc-radius);
}
/* Pills do NOT grow when current — keep the same size, just invert fill. */
.mkcoc-circles__item--start.is-current a,
.mkcoc-circles__item--review.is-current a {
    --mkcoc-dot: 22px;
    padding: 0 0.625rem;
}
.mkcoc-circles__item--review.is-current a {
    background: var(--mkcoc-text);
    box-shadow: none;
    color: var(--mk-white);
}
.mkcoc-circles__item--start .mkcoc-circles__num,
.mkcoc-circles__item--review .mkcoc-circles__num,
.mkcoc-circles__item--start.is-current .mkcoc-circles__num,
.mkcoc-circles__item--review.is-current .mkcoc-circles__num {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1;
}

/* Progress band when rendered INSIDE the question shell (below the heading,
   in the main column). Aligns the dots row with the question text's left
   edge, fades any questions earlier than the current one so the eye is drawn
   forward, and bumps the dot size up for prominence. */
.mkcoc-progress-band--no-rail {
    background: transparent;
    padding: 0.5rem 0 1.5rem;
    margin: 0;
    min-height: 0;
    display: block;
}
.mkcoc-progress-band--no-rail .mkcoc-circles {
    justify-content: flex-start;
    gap: 1rem;
}
.mkcoc-progress-band--no-rail .mkcoc-circles__item a {
    --mkcoc-dot: 32px;
    background: var(--mkcoc-bg);
    color: var(--mkcoc-text);
}
/* Active dot — white surface with black numeral, lifted by a soft
   drop-shadow so it reads as "you are here". */
.mkcoc-progress-band--no-rail .mkcoc-circles__item.is-current a {
    --mkcoc-dot: 65px;
    background: var(--mk-white);
    color: var(--mk-black);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.10);
}
.mkcoc-progress-band--no-rail .mkcoc-circles__num {
    font-size: 0.9375rem;
    font-weight: 500;
}
.mkcoc-progress-band--no-rail .mkcoc-circles__item.is-current .mkcoc-circles__num {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--mk-black);
}
/* Fade items earlier than the current one fully out — :has() with general-
   sibling matches any item that has the current item LATER in the row. The
   row still reserves their width so the leftward slide stays in sync with
   the geometry the shift JS computed. */
.mkcoc-progress-band--no-rail .mkcoc-circles__item:has(~ .mkcoc-circles__item.is-current) {
    opacity: 0.12;
    transition: opacity 480ms ease;
}

/* Subtle hover affordance — non-active dots paint a dark circle at 0.2
   opacity behind the numeral (the dot itself is already circular, so
   swapping its background colour gives the "dark disc on hover" cue
   without an extra element). */
.mkcoc-progress-band--no-rail .mkcoc-circles__item:not(.is-current) a {
    transition:
        background-color 220ms ease,
        color            220ms ease;
}
.mkcoc-progress-band--no-rail .mkcoc-circles__item:not(.is-current) a:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* Review progress dots — 4×2 grid, half-opacity by default; PHP renders
   .is-lit on the first $answered circles for a fade-in as the survey
   progresses. Default fill tracks the active text colour (used in the
   progress-band Review pill, which is outlined). */
.mkcoc-review-dots {
    width: 1.5em;
    height: 0.75em;
    background: transparent;
    fill: currentColor;
    flex-shrink: 0;
    overflow: visible;
}
.mkcoc-review-dots circle {
    stroke: none;
    opacity: 0.5;
    transition: opacity 220ms ease;
}
.mkcoc-review-dots circle.is-lit { opacity: 1; }

/* In the form rail the Review pill is filled with --mkcoc-text, so dots
   take on --mkcoc-bg (the page colour). No whites/glow — circles render
   as cut-outs blending with whatever theme bg is active. Sized up so
   they read on the 6rem-tall button. */
.mkcoc-form-grid__rail .mkcoc-review-dots {
    width: 4.5em;
    height: 2.25em;
    fill: var(--mkcoc-bg);
}

@media (prefers-reduced-motion: reduce) {
    .mkcoc-circles,
    .mkcoc-circles__item a {
        transition: none;
    }
}

/* Generative WebGL canvas. The live render is suppressed visually — only
   the final exported share image is shown on the thanks page. The canvas
   still needs to exist (and the script must still run) so the offscreen
   export can pull from its organism state, but it sits offscreen at 1×1. */
.mkcoc-gen-canvas {
    position: fixed;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    pointer-events: none;
    opacity: 0;
}


/* Dev panel — only injected when URL has ?dev=1 */
.mkcoc-gen-dev {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 200;
    background: rgba(20, 20, 20, 0.92);
    color: #F5F5F4;
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    max-width: 22rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.mkcoc-gen-dev__h {
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 11px;
    color: #ABCDEF;
}
.mkcoc-gen-dev__r {
    display: grid;
    grid-template-columns: 5rem 1fr 3.5rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.125rem 0;
}
.mkcoc-gen-dev__n { color: #C5C5C5; }
.mkcoc-gen-dev__v { text-align: right; color: var(--mk-white); font-weight: 600; }
.mkcoc-gen-dev__r input[type="range"] {
    width: 100%;
    accent-color: #8AB6F0;
}
.mkcoc-gen-dev__btns {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.mkcoc-gen-dev__btns button {
    background: #1B4B8F;
    color: var(--mk-white);
    border: 1px solid #1B4B8F;
    border-radius: 4px;
    padding: 4px 10px;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}
.mkcoc-gen-dev__btns button:hover { background: #2A66B5; }
.mkcoc-gen-dev__out {
    margin: 0.75rem 0 0;
    padding: 0.5rem;
    background: rgba(0,0,0,0.4);
    border-radius: 4px;
    font-size: 11px;
    color: #C5C5C5;
    max-height: 8rem;
    overflow: auto;
    white-space: pre-wrap;
}

/* Main content sits above the generative canvas + grain overlay */
.site-header,
.mkcoc-progress-band,
.mkcoc-question-prompt,
.mkcoc-card-shell,
main,
.mkcoc-footer-mark,
.mkcoc-footer-links {
    position: relative;
    z-index: 2;
}

/* The cross-page fade for #mkcoc-main is now handled entirely by the View
   Transitions API (see the choreography block above). The old
   .mkcoc-navigating opacity dance ran underneath the VT snapshots and
   doubled-up the animation. Left blank intentionally. */

@media (prefers-reduced-motion: reduce) {
    .mkcoc-gen-canvas { display: none; }
}

/* Share-image card on the thanks page. Hero image + vertical action
   column sit side-by-side; description copy flows below. */
.mkcoc-share {
    margin: 2.5rem 0 1rem;
    margin-bottom: 1.5rem;
    margin-top: 0.2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background: 0 0;
    border: 0;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
/* Top row: image | (description + action card). The body column holds
   both the explanatory copy and the grey actions card so the buttons
   sit alongside the artwork, not beneath it. align-items must be
   `start` so the media's aspect-ratio drives its height — stretching
   would let the body column's height take over and the box would snap
   sizes the moment the artwork finishes loading. */
.mkcoc-share__row {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}
@media (max-width: 38rem) {
    .mkcoc-share__row { grid-template-columns: 1fr; }
}
/* Reserved 9:16 portrait stage for the generated artwork. width/aspect
   pair locks the box at first paint; the <img> inside is absolutely
   positioned so it can never affect layout when its src lands. */
.mkcoc-share__media {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    background: var(--mkcoc-bg-muted);
    overflow: hidden;
    border-radius: 1.25rem;
    corner-shape: squircle;
    /* Lifted card shadow — same three-layer treatment as the glossary
       popover so the artwork reads as a tactile object on the page. */
    box-shadow:
        rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset,
        rgba(50, 50, 93, 0.25)   0px 50px 100px -20px,
        rgba(0, 0, 0, 0.3)       0px 30px 60px -30px;
}
/* Stacked action buttons — no enclosure, the dark tiles carry their
   own weight against the page surface. Single 1fr column locks both
   buttons to the same intrinsic width: the grid track sizes to the
   widest button (Save image > Share), then both stretch to fill it.
   Without the explicit `1fr` template the [hidden] Share button was
   sometimes computed at content width before the JS reveal, so the
   two buttons rendered different widths the moment Share appeared. */
.mkcoc-share__actions {
    margin-top: 0.75rem;
    display: grid;
    grid-template-columns: max-content;
    gap: 0.75rem;
    width: fit-content;
}
.mkcoc-share__actions > .mkcoc-btn { width: 100%; }
@media (max-width: 38rem) {
    .mkcoc-share__actions {
        width: 100%;
        grid-template-columns: 1fr;
    }
}

.mkcoc-share__preview {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 280ms ease;
}
.mkcoc-share[data-state="ready"] .mkcoc-share__preview { opacity: 1; }
.mkcoc-share__loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--mkcoc-text-muted);
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: opacity 200ms ease;
}
.mkcoc-share[data-state="ready"] .mkcoc-share__loader,
.mkcoc-share[data-state="error"] .mkcoc-share__loader {
    opacity: 0;
    pointer-events: none;
}
.mkcoc-share__loader-dots {
    display: inline-flex;
    gap: 0.25rem;
}
.mkcoc-share__loader-dots > span {
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--mkcoc-accent);
    animation: mkcoc-share-pulse 1.05s ease-in-out infinite;
}
.mkcoc-share__loader-dots > span:nth-child(2) { animation-delay: 0.15s; }
.mkcoc-share__loader-dots > span:nth-child(3) { animation-delay: 0.30s; }
@keyframes mkcoc-share-pulse {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .mkcoc-share__loader-dots > span { animation: none; opacity: 0.8; }
}
.mkcoc-share__body {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}
.mkcoc-share__desc {
    margin: 0;
    color: var(--mk-black);
    font-family: neue haas grotesk display round,helvetica neue,Helvetica,Arial,sans-serif;
    font-size: .8125rem;
    line-height: 1.5;
    letter-spacing: .01em;
    font-weight: 500;
    -webkit-font-smoothing: auto;
    max-width: 45ch;
}
.mkcoc-share__desc strong { font-weight: 700; }
.mkcoc-share__status {
    margin: 0;
    color: var(--mkcoc-text-muted);
    font-size: 0.875rem;
}
.mkcoc-share__status[hidden] { display: none; }

.mkcoc-progress-band__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
    .mkcoc-stepper__item { background: rgba(255, 255, 255, 0.12); }
    .mkcoc-stepper__item.is-current { background: rgba(138, 182, 240, 0.2); }
}
@media (prefers-reduced-motion: reduce) {
    .mkcoc-stepper__item { transition: none; }
}
@media (forced-colors: active) {
    .mkcoc-stepper__item { border-color: currentColor; }
    .mkcoc-stepper__item.is-done { background: currentColor; }
    .mkcoc-stepper__item.is-current { outline: 2px solid currentColor; outline-offset: 1px; }
}

/* Footer mark + links on every survey page */
/* Footer row — logo on the left, nav on the right, baseline-aligned. */
.mkcoc-footer__row {
    width: 100%;
    max-width: var(--mkcoc-max-w);
    box-sizing: border-box;
    margin: 2rem auto 0.5rem;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.mkcoc-footer-mark {
    flex: 0 0 auto;
    margin: 0;
}
.mkcoc-footer-mark svg {
    display: block;
    width: 224px;
    height: auto;
    fill: currentColor;
    /* Path glyphs extend a hair past the viewBox bounds on some letterforms;
       browsers' default SVG clipping crops them — opt out so the mark
       renders in full. */
    overflow: visible;
}
.mkcoc-footer-links {
    margin: 0;
    flex: 0 1 auto;
}
.mkcoc-footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}
/* Bottom-of-footer credit line. */
.mkcoc-footer__credit {
    width: 100%;
    max-width: var(--mkcoc-max-w);
    box-sizing: border-box;
    margin: 1rem auto 0;
    padding: 2.25rem 1.25rem;
    /* border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); */
    font-family: "Neue Haas Grotesk Display Round", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mk-black);
    text-align: right;
}

/* Accessibility bar — High-contrast toggle + text-size controls. Sits in
   the footer, sized to read as supporting UI rather than primary nav.
   Buttons reuse the standard `.mkcoc-btn` + `.mkcoc-btn--small` so they
   share the same fill/hover/focus treatment as the rest of the site. */
.mkcoc-a11y {
    width: 100%;
    max-width: var(--mkcoc-max-w);
    box-sizing: border-box;
    margin: 0.5rem auto 0;
    padding: 0.5rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    color: var(--mk-black);
}
.mkcoc-a11y__label {
    display: inline-block;
    font-weight: 500;
    font-size: 0.8125rem;
    opacity: 0.7;
    margin-right: 0.25rem;
}
.mkcoc-a11y__sizes {
    display: inline-flex;
    gap: 0.25rem;
}

/* Mobile footer — every row left-aligned across the whole standard
   mobile breakpoint (≤48rem). At ≤30rem we additionally collapse the
   display settings onto a single line with an icon-only contrast pill
   so the four controls fit on the narrowest phones. */
@media (max-width: 48rem) {
    .mkcoc-footer          { align-items: flex-start; }
    .mkcoc-footer__row     { justify-content: flex-start; }
    .mkcoc-footer-links ul { justify-content: flex-start; }
    .mkcoc-footer__credit  { text-align: left; }
    .mkcoc-a11y            { justify-content: flex-start; }
}
@media (max-width: 30rem) {
    .mkcoc-a11y {
        flex-wrap: nowrap;
        gap: 0.375rem;
    }
    .mkcoc-a11y__label { display: none; }
    /* Visually hide the "High contrast" wording so the contrast button
       reads as an icon-only pill on phones, but keep the text in the
       DOM so screen readers + Forced Colors users still get a name. */
    .mkcoc-a11y .mkcoc-btn[data-a11y="contrast"] .mkcoc-btn__label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
    .mkcoc-a11y .mkcoc-btn[data-a11y="contrast"] {
        width: 2.25rem;
        min-width: 0;
        padding: 0;
        border-radius: 50%;
        corner-shape: auto;
        justify-content: center;
        gap: 0;
    }
}

/* Small button modifier — a tighter version of the standard button for
   the footer a11y bar. Outlined by default (faint 0.2 black border),
   filled solid black when active. Strictly mono, no drop shadow. */
.mkcoc-btn--small {
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    background: transparent;
    color: var(--mk-black);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    corner-shape: squircle;
    box-shadow: none;
}
.mkcoc-btn--small .mkcoc-btn__icon {
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    /* No circular badge for the small variant — glyph reads directly. */
    background: transparent;
    transition: transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mkcoc-btn--small .mkcoc-btn__icon path { fill: currentColor; }
/* Contrast icon spins 180° on toggle so the visible "half-filled circle"
   flips orientation — a small, legible cue that the mode has changed. */
.mkcoc-btn--small[aria-pressed="true"] .mkcoc-btn__icon--contrast {
    transform: rotate(180deg);
}

/* Override the base button's hover (palette flip + shadow). Small
   buttons just deepen their outline on hover — no surface flip. */
.mkcoc-btn--small:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--mk-black);
    border-color: rgba(0, 0, 0, 0.4);
    box-shadow: none;
    opacity: 1;
}
.mkcoc-btn--small:hover .mkcoc-btn__icon       { background: transparent; }
.mkcoc-btn--small:hover .mkcoc-btn__icon path  { fill: currentColor; }

/* Pressed/active state — solid black fill, white text. Border collapses
   into the fill so the silhouette stays clean. */
.mkcoc-btn--small[aria-pressed="true"] {
    background: var(--mk-black);
    color: var(--mk-white);
    border-color: var(--mk-black);
    box-shadow: none;
    opacity: 1;
}
.mkcoc-btn--small[aria-pressed="true"]:hover {
    background: var(--mk-black);
    color: var(--mk-white);
    border-color: var(--mk-black);
    opacity: 0.88;
}
.mkcoc-btn--small[aria-pressed="true"] .mkcoc-btn__icon path { fill: var(--mk-white); }

/* Text-size buttons — A-/A/A+ render as perfect circles. */
.mkcoc-a11y__sizes .mkcoc-btn--small {
    width: 2.25rem;
    height: 2.25rem;
    min-height: 0;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    corner-shape: auto;
    justify-content: center;
    line-height: 1;
}

/* --- HIGH-CONTRAST MODE ---------------------------------------------- */
/* Triggered by .mkcoc-a11y-contrast on <html>. Locks the page to pure
   white + black across every surface. !important is justified because we
   need to beat:
     - survey.js writing `--mkcoc-bg: var(--mk-green)` inline on <html>
     - survey.js writing `body.style.backgroundColor = '#7AA638'` inline
     - the random palette tokens consumed all over the stylesheet
   The custom-property overrides have !important so they win the cascade
   even against inline-set values (which lack !important from the JS). */
html.mkcoc-a11y-contrast {
    /* Flatten every palette token to mono. Anything that previously
       resolved to a colour now resolves to white (or black for text). */
    --mk-green:   #ffffff !important;
    --mk-coral:   #ffffff !important;
    --mk-teal:    #ffffff !important;
    --mk-yellow:  #ffffff !important;
    --mk-purple:  #ffffff !important;
    --mk-mauve:   #ffffff !important;
    --mkcoc-bg:           #ffffff !important;
    --mkcoc-bg-muted:     #f2f2f2 !important;
    --mkcoc-text:         #000000 !important;
    --mkcoc-text-muted:   #000000 !important;
    --mkcoc-accent:       #000000 !important;
    --mkcoc-accent-hover: #000000 !important;
    --mkcoc-border:       #000000 !important;
}
html.mkcoc-a11y-contrast,
html.mkcoc-a11y-contrast body {
    background: #ffffff !important;
    color: #000000 !important;
}
html.mkcoc-a11y-contrast :focus-visible {
    outline: 3px solid #000000 !important;
    outline-offset: 3px;
}
/* The generative WebGL canvas on /thanks/ is inherently colourful — hide
   it entirely in HC mode so it can't bleed through the share preview. */
html.mkcoc-a11y-contrast .mkcoc-gen-canvas {
    display: none !important;
}

/* --- TEXT-SIZE MODES ------------------------------------------------- */
/* Adjusts the ROOT font-size so every rem-based dimension scales with it
   — type, padding, button heights, everything. Default (md) is 100%. */
html.mkcoc-a11y-text-sm { font-size: 87.5%; }
html.mkcoc-a11y-text-lg { font-size: 118.75%; }
.mkcoc-footer-links a {
    display: inline-block;
    min-height: var(--mkcoc-target);
    padding: 0.5rem 0;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
    text-underline-offset: 4px;
    transition: text-decoration-color 320ms ease;
}
.mkcoc-footer-links a:hover,
.mkcoc-footer-links a:focus-visible {
    text-decoration-color: currentColor;
}

/* Glossary */
.mkcoc-glossary-toc {
    background: var(--mkcoc-bg-muted);
    padding: 1rem 1.25rem;
    border-radius: var(--mkcoc-radius);
    margin: 1.5rem 0;
}
.mkcoc-glossary-toc ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    columns: 2;
    column-gap: 1.5rem;
}
@media (max-width: 30rem) {
    .mkcoc-glossary-toc ul { columns: 1; }
}
.mkcoc-glossary-toc li {
    break-inside: avoid;
    padding: 0.25rem 0;
}

.mkcoc-glossary {
    margin: 1.5rem 0;
}
.mkcoc-glossary__entry {
    margin-bottom: 2rem;
    padding-top: 0.5rem;
    scroll-margin-top: 1rem;
}
.mkcoc-glossary dt {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.mkcoc-glossary dd {
    margin: 0;
}
.mkcoc-glossary dd p { margin: 0.5rem 0; }
.mkcoc-glossary__usage {
    color: var(--mkcoc-text-muted);
}

/* Accessibility statement headings */
.mkcoc-shell h2 + p,
.mkcoc-shell h3 + p { margin-top: 0.5rem; }
.mkcoc-shell h3 {
    font-size: 1.125rem;
    margin: 1.25rem 0 0.25rem;
}

/* ====================================================================
   Long-form info pages — privacy, accessibility, glossary, workshops.
   Modernist single-column document set in Neue Haas Round Medium. No
   rules, no borders, no card chrome — the rhythm comes from type and
   margin alone. Every paragraph reads in the same calm "lede" voice as
   the page intro so the document feels uniform, not stacked.
   ==================================================================== */
.mkcoc-shell--info {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    max-width: 44rem;
    padding-top: 1rem;
}
.mkcoc-shell--info > * { grid-column: 1; }

/* Body / list / dd — single lede style for every paragraph and bullet.
   Same family + weight + line-height as .mkcoc-landing__lede so the
   whole page reads in one voice. */
.mkcoc-shell--info p,
.mkcoc-shell--info li,
.mkcoc-shell--info dd {
    font-family: "Neue Haas Grotesk Display Round", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 1.0625rem;
    line-height: 1.55;
    letter-spacing: 0.015rem;
    color: var(--mk-black);
    -webkit-font-smoothing: auto;
    text-wrap: pretty;
}
.mkcoc-shell--info p { margin: 0 0 1rem; max-width: 38rem; }

/* Section headings — same Neue Haas Round Medium, just larger and with
   plenty of vertical breathing room. No display-face override, no
   hairline rules, no padded gutter. */
.mkcoc-shell--info h2 {
    font-family: "Neue Haas Grotesk Display Round", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.25;
    margin: 3rem 0 0.75rem;
    padding: 0;
    border: 0;
    color: var(--mk-black);
}
.mkcoc-shell--info h3 {
    font-family: "Neue Haas Grotesk Display Round", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.3;
    margin: 1.75rem 0 0.5rem;
    color: var(--mk-black);
}

/* Lists — comfortable rhythm, default markers, nothing fancy. */
.mkcoc-shell--info ul,
.mkcoc-shell--info ol {
    margin: 0 0 1.5rem;
    padding-left: 1.25rem;
    max-width: 38rem;
}
.mkcoc-shell--info li { margin: 0 0 0.5rem; }
.mkcoc-shell--info li::marker { color: var(--mk-black); }

/* Glossary — clean term/definition pairs, no bordered cards, no grey
   TOC box. Just type and whitespace. */
.mkcoc-shell--info .mkcoc-glossary-toc {
    margin: 0 0 2.5rem;
    padding: 0;
    background: transparent;
    border-radius: 0;
    max-width: 38rem;
}
.mkcoc-shell--info .mkcoc-glossary-toc > p {
    margin: 0 0 0.5rem;
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--mk-black);
    text-transform: none;
    letter-spacing: 0;
}
.mkcoc-shell--info .mkcoc-glossary-toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.mkcoc-shell--info .mkcoc-glossary-toc li {
    padding: 0.15rem 0;
    margin: 0;
}
.mkcoc-shell--info .mkcoc-glossary {
    margin: 0;
    max-width: 38rem;
}
.mkcoc-shell--info .mkcoc-glossary__entry {
    margin: 0 0 2.5rem;
    padding: 0;
    border: 0;
    scroll-margin-top: 1.5rem;
}
.mkcoc-shell--info .mkcoc-glossary dt {
    font-family: "Neue Haas Grotesk Display Round", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    margin: 0 0 0.5rem;
}
.mkcoc-shell--info .mkcoc-glossary dd { margin: 0; }
.mkcoc-shell--info .mkcoc-glossary dd p { margin: 0 0 0.5rem; }
.mkcoc-shell--info .mkcoc-glossary__usage { margin-top: 0.5rem; }
.mkcoc-shell--info .mkcoc-glossary__usage small {
    font-family: "Neue Haas Grotesk Display Round", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #606060;
    letter-spacing: 0;
}

@media (max-width: 30rem) {
    .mkcoc-shell--info { padding-top: 0.5rem; }
    .mkcoc-shell--info h2 { margin-top: 2.5rem; }
    .mkcoc-shell--info .mkcoc-glossary-toc ul { columns: 1; }
}

/* Live region (visually hidden, screen-reader audible) */
.mkcoc-live-region {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Forced colors mode */
@media (forced-colors: active) {
    .mkcoc-btn { border: 2px solid currentColor; }
    .mkcoc-index__item--current a,
    .mkcoc-index__item--current_answered a { outline: 2px solid currentColor; }
}

/* Small viewport */
@media (max-width: 30rem) {
    .mkcoc-shell { padding: 0 1.25rem 3rem; margin-top: 1rem; }
    .mkcoc-actions { flex-direction: column; align-items: stretch; }
    .mkcoc-btn { width: 100%; }
}

/* ====================================================================
   Landing page — two-column hero. Intro top-left, form fields bottom-left,
   chunky Start button bottom-right. Fills the .mkcoc-stage exactly.
   ==================================================================== */
.mkcoc-landing {
    width: 100%;
    max-width: var(--mkcoc-max-w);
    box-sizing: border-box;
    padding: 2rem 1.25rem;
    display: grid;
    /* Shared split with .mkcoc-shell + .mkcoc-form-grid. */
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.5fr);
    grid-template-rows: auto auto;
    column-gap: 2rem;
    row-gap: 2.5rem;
    align-items: start;
    /* main { flex: 1 0 auto } stretches the landing to viewport height,
       which (with default `normal` align-content) distributes the extra
       space evenly between the rows and blows out the gaps. Pack the
       rows tight at the top. */
    align-content: start;
}
.mkcoc-landing__intro {
    grid-column: 1 / -1;
    grid-row: 1;
}
.mkcoc-landing__title {
    margin: 0 0 1.5rem;
    max-width: 23ch;
    text-wrap: balance;
    /* Bigger mobile floor than the global h1 spec so the hero stays
       commanding on phones; same 3.5rem ceiling for large viewports. */
    font-size: clamp(2.25rem, 1.05rem + 2.25vw, 3.5rem);
}
/* Body-copy "lede" typography — the standard look for any introductory or
   conversational paragraph across the survey. Applied to the landing
   lede AND every paragraph inside .mkcoc-shell__intro / direct paragraphs
   of .mkcoc-shell__main so the thanks page, review page, etc. all read
   in the same voice. */
.mkcoc-landing__lede,
.mkcoc-shell__intro > p,
.mkcoc-shell__main > p {
    margin: 0 0 1rem;
    letter-spacing: 0.021rem;
    max-width: 45ch;
    text-wrap: balance;
    font-weight: 400;
    -webkit-font-smoothing: auto;
    line-height: 1.53;
}
.mkcoc-landing__form {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.5fr);
    column-gap: 2rem;
    /* Top-aligned so the Start/Continue CTA sits flush with the top of
       the fields column — same pattern as the question page's
       Previous/Next rail aligning with the top of the textarea. */
    align-items: start;
    /* Hidden by default — question-animate.js adds .is-revealed AFTER the
       title word-stagger and lede paragraphs have finished. Slow slide-up
       + fade. */
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity   1100ms cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mkcoc-landing__form.is-revealed {
    opacity: 1;
    transform: none;
}

/* Lede paragraphs cascade in sequentially after the title lands. Each
   paragraph delayed by 600ms via the JS scheduler. Pure opacity fade —
   no translateY drift — so they read as a calm appearance rather than
   "rising into view". */
.mkcoc-landing__lede,
.mkcoc-shell__intro > p {
    opacity: 0;
    transition: opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mkcoc-landing__lede.is-revealed,
.mkcoc-shell__intro > p.is-revealed {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .mkcoc-landing__lede,
    .mkcoc-shell__intro > p,
    .mkcoc-landing__form {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Workshops list — used on the dedicated /workshops/ page. Cards
   mirror the review-card chrome (squircle, soft shadow, generous
   padding) with a clear hierarchy: small uppercase date label, venue
   set in the display face, address as supporting copy. */
.mkcoc-landing__workshops-list {
    list-style: none;
    margin: 1.5rem 0 2rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1.5rem;
}
.mkcoc-workshop {
    background: var(--mk-white);
    border: 0;
    border-radius: 1rem;
    corner-shape: squircle;
    padding: 2rem 2rem 1.75rem;
    box-shadow:
        rgba(0, 0, 0, 0.1)  0px 10px 15px -3px,
        rgba(0, 0, 0, 0.05) 0px 4px  6px  -2px;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
.mkcoc-workshop p { margin: 0; color: var(--mk-black); }
/* Date / time — small uppercase tag, sits as a label above the venue. */
.mkcoc-workshop__when {
    font-family: "Neue Haas Grotesk Display Round", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mk-black);
}
.mkcoc-workshop__when strong { font-weight: 600; }
/* Venue name — display face, same hierarchy as a review card's question. */
.mkcoc-workshop__venue {
    font-family: "Helvetica Neue Display", "Neue Haas Grotesk Display Round", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: clamp(1.25rem, 0.95rem + 0.6vw, 1.5rem);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.005em;
    margin-top: 0.25rem;
}
.mkcoc-workshop__address {
    color: var(--mkcoc-text-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
    letter-spacing: 0.012em;
    max-width: 32ch;
}
.mkcoc-landing__fields {
    grid-column: 1;
    min-width: 0;
}
.mkcoc-landing__row {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.8fr);
    gap: 1rem;
}
.mkcoc-landing__input { min-width: 0; }
.mkcoc-landing__input input {
    width: 100%;
    box-sizing: border-box;
    background: #ECECEC;
    border: none;
    border-radius: 0.625rem;
    /* WCAG 2.2 AAA target size (44×44px min). Padding + font sets the
       intrinsic height to ~64px on desktop — well above the threshold and
       generous on touch. Identical declarations for every input → all three
       fields render at the same height. */
    min-height: 3.5rem;
    padding: 1rem 1.5rem;
    font-family: inherit;
    font-size: clamp(1.125rem, 0.9rem + 0.8vw, 1.75rem);
    font-weight: 400;
    color: var(--mk-black);
    line-height: 1.3;
    -webkit-appearance: none;
            appearance: none;
}
.mkcoc-landing__input input::placeholder {
    color: var(--mk-black);
    opacity: 0.6;
}
.mkcoc-landing__input input:focus-visible {
    outline: 3px solid var(--mk-black);
    outline-offset: 2px;
}
.mkcoc-landing__hint {
    margin: 0.625rem 0 1.5rem;
    max-width: 44ch;
}
/* Accessible fine-print pattern — wrap helper text in <small> for the
   semantic "side note" cue, then style at full readable size in our
   Medium weight (Neue Haas 500). */
.mkcoc-landing__hint small {
    display: block;
    font-size: 0.8rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--mk-black);
}
.mkcoc-landing__cta {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    /* Independent reveal — the parent form fades the input fields in,
       then question-animate.js adds .is-revealed here after a beat so
       the Start / Continue button arrives last in the choreography. */
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity   720ms cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mkcoc-landing__cta.is-revealed {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .mkcoc-landing__cta {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* The landing "Start" button uses the standard .mkcoc-btn--primary —
   identical visual + class to the question-page Next button (the
   "advance" pattern). Stretch it to the column width and undo the
   right-pushing margin that primary normally has when it sits in a
   flex actions row. */
.mkcoc-landing__cta .mkcoc-btn--primary {
    width: 100%;
    margin-left: 0;
}
.mkcoc-landing__resume {
    margin: 0;
    max-width: 30ch;
}
.mkcoc-landing__resume small {
    display: block;
    font-size: 0.9375rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--mkcoc-text-muted);
}
.mkcoc-landing__resume a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
    text-underline-offset: 4px;
}
.mkcoc-landing__resume a:hover { text-decoration-color: currentColor; }

/* Hide the progress-band intro pip on landing — clean hero. */
.mkcoc-stage:has(.mkcoc-landing) .mkcoc-progress-band { display: none; }

/* Mobile collapse — single column, Start sits below the fields. */
@media (max-width: 48rem) {
    .mkcoc-landing,
    .mkcoc-landing__form {
        grid-template-columns: 1fr;
    }
    .mkcoc-landing__form { row-gap: 1.5rem; }
    .mkcoc-landing__cta { grid-column: 1; }
    .mkcoc-landing__start { max-width: none; }
    /* Narrow viewports squeeze the postcode field — give it more room
       so "MK15 0AA" fits comfortably without crowding the placeholder. */
    .mkcoc-landing__row {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }
}

/* TEMP — viewport-tall stage that vertically centres the survey content.
   Pushes footer below 100svh. Drop together with the wp_body_open hook
   in class-plugin.php once layout is settled. */
.mkcoc-stage {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
}
.mkcoc-stage > .site-header,
.mkcoc-stage > .mkcoc-progress-band,
.mkcoc-stage > .mkcoc-question-prompt,
.mkcoc-stage > .mkcoc-card-shell,
.mkcoc-stage > main,
.mkcoc-stage > .mkcoc-shell {
    width: 100%;
    max-width: var(--mkcoc-max-w);
    box-sizing: border-box;
}


/* Footer band — full-width white surface that sits below the .mkcoc-stage,
   so it's only revealed on scroll. Inner elements stay constrained to the
   900px column via their own max-width rules. */
.mkcoc-footer {
    background: var(--mk-white);
    color: var(--mk-black);
    width: 100%;
    padding: 2rem 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ====================================================================
   Button transition choreography. The advance button (Start/Continue/
   Next/Review/Submit/Save) shares one VT name across every page, so the
   browser auto-morphs its box from one position/size to the next while
   its label crossfades inside. The back button (Previous) owns its own
   name — when going to Q1 / landing it slides DOWN as it leaves; when
   arriving on Q2+ it fades IN.

   Pseudo-element rules of thumb (CSS View Transitions):
   - ::view-transition-group(name) — the morphing wrapper. Animation
     applies when both old + new snapshots exist (button persists).
   - ::view-transition-old/new(name):only-child — runs when ONLY one
     snapshot exists, i.e. the button is appearing or disappearing.
   ==================================================================== */

/* Smooth morph for the advance button as it moves between pages. */
::view-transition-group(mkcoc-advance-btn),
::view-transition-group(mkcoc-back-btn) {
    animation-duration: 520ms;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Crossfade the label/inner content inside the morphing advance button so
   "Continue" → "Next" → "Submit" reads as a soft swap rather than a snap. */
::view-transition-old(mkcoc-advance-btn),
::view-transition-new(mkcoc-advance-btn) {
    animation-duration: 520ms;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Back button — only on the page going TO a question that has Previous.
   When it's appearing (only-new), fade in. When it's leaving (only-old),
   slide down + fade out so it reads as exiting the rail. */
@keyframes mkcoc-btn-slide-down-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(48px); }
}
@keyframes mkcoc-btn-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
::view-transition-new(mkcoc-back-btn):only-child {
    animation: mkcoc-btn-fade-in 360ms 160ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
::view-transition-old(mkcoc-back-btn):only-child {
    animation: mkcoc-btn-slide-down-out 360ms cubic-bezier(0.4, 0, 1, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(mkcoc-advance-btn),
    ::view-transition-group(mkcoc-back-btn),
    ::view-transition-old(mkcoc-advance-btn),
    ::view-transition-new(mkcoc-advance-btn),
    ::view-transition-old(mkcoc-back-btn):only-child,
    ::view-transition-new(mkcoc-back-btn):only-child {
        animation-duration: 1ms;
        animation-delay: 0ms;
    }
}

/* ====================================================================
   Question-page transition choreography. Goal: kill the default crossfade
   clash. The question heading is the lead element — it fades fully OUT,
   then the next question fades IN. The textarea fades out fast and the
   new one fades in late (at ~80% of the timeline), so it doesn't flicker
   underneath the heading swap.
   Total VT length: 600ms. Browser uses the longest snapshot animation as
   the transition duration, so the textarea's delayed fade-in (ending at
   600ms) sets the runway for everything else.
   ==================================================================== */
@keyframes mkcoc-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes mkcoc-fade-in  { from { opacity: 0; } to { opacity: 1; } }

.mkcoc-question-prompt {
    view-transition-name: mkcoc-question;
}
::view-transition-old(mkcoc-question) {
    animation: mkcoc-fade-out 520ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
::view-transition-new(mkcoc-question) {
    animation: mkcoc-fade-in 640ms 520ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.mkcoc-form-grid__main {
    view-transition-name: mkcoc-textarea;
}
/* Hidden + nudged-down reveal applies ONLY to the question-page form.
   Other pages (review, etc.) use the same `.mkcoc-form-grid__main`
   class but no JS reveals them — leaving them at opacity 0 = invisible
   gap. Scoping to `.mkcoc-form--question` keeps the question textarea
   animation while letting review's email fieldset render normally. */
.mkcoc-form--question .mkcoc-form-grid__main {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity   760ms cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 760ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mkcoc-form--question .mkcoc-form-grid__main.is-revealed {
    opacity: 1;
    transform: none;
}
/* VT fades the OLD textarea out so the exit reads smoothly alongside the
   heading exit. The NEW textarea snapshot stays static (it's captured at
   opacity 0 since the CSS default hides it) — JS adds .is-revealed once
   the heading word-stagger has finished, so the fade-in is the JS one,
   not a VT crossfade. */
::view-transition-old(mkcoc-textarea) {
    animation: mkcoc-fade-out 520ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
::view-transition-new(mkcoc-textarea) {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(mkcoc-question),
    ::view-transition-new(mkcoc-question) {
        animation-duration: 1ms;
        animation-delay: 0ms;
    }
    .mkcoc-form--question .mkcoc-form-grid__main {
        opacity: 1;
        transform: none;
        transition: none;
    }
}