/*
 * Website Studio — hand-authored, buildless stylesheet.
 * Served as a static file (no bundler). Linked from
 * resources/views/components/layouts/studio.blade.php.
 *
 * Design direction: a faithful port of the "SBM IDX Order Flow" prototype —
 * a light, product-grade order funnel on a lavender-grey canvas, indigo
 * accent, deep-navy ink, Manrope throughout, white cards with a soft shadow,
 * a numbered step rail, and a docked live-preview panel that iframes the real
 * deployed demo site. Exact palette / type / spacing lifted from the
 * prototype's own inline styles.
 */

/* ---------------------------------------------------------------------- *
 * Tokens (from the prototype, "split" layout / "light" tone)
 * ---------------------------------------------------------------------- */
:root {
    --sx-canvas: #F5F5FA;         /* page background */
    --sx-panel: #ECEBF4;          /* docked preview panel */
    --sx-lav: #EDEBFB;            /* chips, info notes */
    --sx-complete: #E7E4FB;       /* completed step dot */
    --sx-empty-dot: #EFEEF6;      /* unselected check circle */

    --sx-ink: #14124C;            /* headings, primary text */
    --sx-label: #413E77;          /* form labels */

    --sx-ink-70: rgba(20, 18, 76, 0.70);
    --sx-ink-65: rgba(20, 18, 76, 0.65);
    --sx-ink-60: rgba(20, 18, 76, 0.60);
    --sx-ink-55: rgba(20, 18, 76, 0.55);
    --sx-ink-50: rgba(20, 18, 76, 0.50);
    --sx-ink-45: rgba(20, 18, 76, 0.45);
    --sx-ink-34: rgba(20, 18, 76, 0.34);   /* placeholders */

    --sx-line: rgba(20, 18, 76, 0.12);     /* card / panel borders */
    --sx-line-16: rgba(20, 18, 76, 0.16);  /* input borders */
    --sx-line-07: rgba(20, 18, 76, 0.07);  /* row dividers, toggle track */

    --sx-accent: #6F5CF1;         /* indigo accent */
    --sx-accent-2: #3B4EF8;       /* gradient partner */
    --sx-accent-ink: #4F46C8;     /* links, pill text, hints */
    --sx-accent-ink-hover: #3B34A8;
    --sx-grad: linear-gradient(135deg, #6F5CF1 0%, #3B4EF8 100%);
    --sx-focus-ring: rgba(111, 92, 241, 0.14);

    --sx-live: #12A150;
    --sx-error: #B4232A;
    --sx-disabled: #C9C7DE;

    --sx-card-shadow: 0 1px 3px rgba(20, 18, 76, 0.06);
    --sx-card-shadow-sel: 0 10px 26px rgba(78, 70, 220, 0.20);
    --sx-btn-shadow: 0 8px 20px rgba(78, 70, 220, 0.30);
    --sx-stage-shadow: 0 10px 30px rgba(20, 18, 76, 0.16);

    --sx-header-h: 61px;

    /* Desktop preview zoom: the iframe renders a (1/zoom)× wider desktop
       viewport, scaled down to fill the stage — so the whole homepage shows,
       shrunk, instead of just its top strip. 0.5 = 50%. */
    --sx-preview-zoom: 0.5;

    --sx-font: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    color-scheme: light;
}

/* ---------------------------------------------------------------------- *
 * Reset + base
 * ---------------------------------------------------------------------- */
* { box-sizing: border-box; }

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

body.studio-body {
    margin: 0;
    font-family: var(--sx-font);
    background: var(--sx-canvas);
    color: var(--sx-ink);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

[x-cloak] { display: none !important; }

a { color: var(--sx-accent-ink); text-decoration: none; }
a:hover { color: var(--sx-accent-ink-hover); }

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

a.studio-skip-link {
    position: absolute;
    left: 1rem;
    top: -3rem;
    background: #fff;
    color: var(--sx-ink);
    padding: 0.6rem 1rem;
    border-radius: 10px;
    box-shadow: var(--sx-card-shadow);
    transition: top 0.15s ease;
    z-index: 100;
}
a.studio-skip-link:focus { top: 1rem; }

:focus-visible {
    outline: 2px solid var(--sx-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ---------------------------------------------------------------------- *
 * Top bar: brand + numbered step rail + "delivered" pill
 * ---------------------------------------------------------------------- */
.studio-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--sx-line);
    flex-wrap: wrap;
}

.studio-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}
.studio-brand__logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}
.studio-brand__name {
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.02em;
    color: var(--sx-ink);
    line-height: 1.1;
}
.studio-brand__sub {
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sx-ink-55);
}

.studio-rail {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.studio-rail__step {
    display: flex;
    align-items: center;
    gap: 7px;
}
/* The rail is navigation, not decoration: each step is a button (goToStep),
   disabled until everything before it validates. */
.studio-rail__btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.studio-rail__btn:disabled { cursor: default; opacity: 0.55; }
.studio-rail__btn:not(:disabled):hover .studio-rail__label { color: var(--sx-ink); }
.studio-rail__btn:focus-visible {
    outline: 2px solid var(--sx-accent);
    outline-offset: 4px;
    border-radius: 10px;
}

.studio-rail__dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 11.5px;
    flex-shrink: 0;
    background: transparent;
    color: var(--sx-ink-55);
    border: 1.5px solid var(--sx-line);
}
.studio-rail__label {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--sx-ink-55);
    white-space: nowrap;
}
.studio-rail__step.is-current .studio-rail__dot {
    background: var(--sx-grad);
    color: #fff;
    border: none;
}
.studio-rail__step.is-current .studio-rail__label {
    font-weight: 800;
    color: var(--sx-ink);
}
.studio-rail__step.is-complete .studio-rail__dot {
    background: var(--sx-complete);
    color: var(--sx-accent-ink);
    border: none;
}

.studio-pill {
    font-weight: 700;
    font-size: 12px;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--sx-lav);
    color: var(--sx-accent-ink);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------- *
 * Two-column shell: scrolling form column + docked preview panel
 * ---------------------------------------------------------------------- */
.studio-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(520px, 44%);
    align-items: start;
}

.studio-form-col { min-width: 0; }

.studio-form-inner {
    padding: 30px 36px 90px;
    max-width: 780px;
    margin: 0 auto;
    width: 100%;
}

.studio-flash {
    background: #EAF7EF;
    border: 1px solid #BFE6CE;
    color: #1B6B45;
    border-radius: 10px;
    padding: 12px 14px;
    font-weight: 600;
    font-size: 13px;
    margin: 0 0 18px;
}

/* The account step's "Next: make Coastal yours" — what a link picked before
   the visitor got here. A neutral pill rather than green: it's a promise of
   what's next, not a confirmation of something done. */
.studio-pending {
    display: inline-block;
    background: var(--sx-line-07);
    color: var(--sx-ink);
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 700;
    font-size: 13px;
    margin: -4px 0 18px;
}

/* ---------------------------------------------------------------------- *
 * Step heading block: eyebrow → h1 → lede → section eyebrows
 * ---------------------------------------------------------------------- */
.studio-eyebrow {
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.16em;
    color: var(--sx-ink-45);
    margin: 0;
}

.studio-form-inner h1 {
    font-weight: 800;
    font-size: 27px;
    line-height: 1.15;
    margin: 8px 0 8px;
    color: var(--sx-ink);
}

.studio-lede {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.6;
    color: var(--sx-ink-60);
    margin: 0 0 26px;
    max-width: 58ch;
}

.studio-section-eyebrow {
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sx-ink-50);
    margin: 28px 0 12px;
}
.studio-section-eyebrow:first-of-type { margin-top: 0; }

/* ---------------------------------------------------------------------- *
 * Form fields
 * ---------------------------------------------------------------------- */
.studio-field { margin-bottom: 16px; max-width: 620px; }
.studio-field:last-child { margin-bottom: 0; }

.studio-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 620px;
    margin-bottom: 16px;
}
@media (max-width: 520px) {
    .studio-field-grid { grid-template-columns: 1fr; }
}
.studio-field-grid .studio-field { margin-bottom: 0; max-width: none; }

.studio-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 12px;
    color: var(--sx-label);
}
.studio-label-optional {
    font-weight: 500;
    color: var(--sx-ink-45);
}

.studio-help {
    margin: 6px 0 0;
    font-weight: 500;
    font-size: 12px;
    color: var(--sx-ink-55);
    line-height: 1.45;
}

.studio-input,
.studio-textarea,
.studio-select {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--sx-line-16);
    border-radius: 10px;
    font-family: var(--sx-font);
    font-weight: 500;
    font-size: 14px;
    color: var(--sx-ink);
    background: #fff;
    outline: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.studio-input::placeholder,
.studio-textarea::placeholder { color: var(--sx-ink-34); }

.studio-input:focus,
.studio-textarea:focus,
.studio-select:focus {
    border-color: var(--sx-accent);
    box-shadow: 0 0 0 3px var(--sx-focus-ring);
}

.studio-textarea { resize: vertical; min-height: 4.5rem; }

/* File inputs read a touch lighter than text inputs. */
input.studio-input[type="file"] {
    padding: 9px 12px;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--sx-ink-65);
}

.studio-color-field {
    display: flex;
    align-items: center;
    gap: 12px;
}
.studio-color-swatch {
    -webkit-appearance: none;
    appearance: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--sx-line-16);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
}
.studio-color-swatch::-webkit-color-swatch-wrapper { padding: 4px; }
.studio-color-swatch::-webkit-color-swatch { border: none; border-radius: 6px; }
.studio-color-value {
    font-weight: 600;
    font-size: 13px;
    color: var(--sx-label);
    font-variant-numeric: tabular-nums;
}
.studio-color-reset {
    background: none;
    border: none;
    padding: 0;
    color: var(--sx-accent-ink);
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
}
.studio-color-reset:hover { color: var(--sx-accent-ink-hover); }

.studio-upload-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.studio-upload-preview img {
    max-height: 3.4rem;
    max-width: 8rem;
    border-radius: 8px;
    border: 1px solid var(--sx-line);
    object-fit: contain;
    background: #fff;
    padding: 4px;
}

.studio-error {
    color: var(--sx-error);
    font-weight: 600;
    font-size: 12px;
    margin: 6px 0 0;
}

.studio-fieldset {
    border: 1px solid var(--sx-line);
    border-radius: 12px;
    padding: 14px 14px 16px;
    margin: 0 0 16px;
    max-width: 620px;
}
.studio-fieldset legend {
    padding: 0 6px;
    font-weight: 700;
    font-size: 12px;
    color: var(--sx-label);
}

.studio-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.studio-row:last-of-type { margin-bottom: 10px; }
.studio-row .studio-input { flex: 1 1 auto; }

.studio-row-add {
    background: #fff;
    border: 1.5px solid var(--sx-line);
    color: var(--sx-accent-ink);
    border-radius: 9px;
    padding: 7px 13px;
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color 0.12s ease;
}
.studio-row-add:hover { border-color: var(--sx-accent); }

/* Inline info note (steps 3 & 4). */
.studio-note {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    background: var(--sx-lav);
    border-radius: 10px;
    padding: 11px 14px;
    margin: 0 0 26px;
    max-width: 620px;
    font-weight: 500;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--sx-label);
}
.studio-note > span:first-child {
    font-weight: 800;
    color: var(--sx-accent-ink);
    flex-shrink: 0;
    margin-top: 1px;
}

.studio-field-grid--account { max-width: 560px; }
.studio-col-span { grid-column: 1 / -1; }
.studio-help--wide { max-width: 620px; }

/* Terms / consent checkbox (account step). */
.studio-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 20px;
    max-width: 560px;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.55;
    color: var(--sx-ink-65);
}
.studio-check input {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--sx-accent);
    cursor: pointer;
}

/* Brand-color swatch pills (branding step). */
.studio-swatches {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 620px;
}
.studio-swatch-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border-radius: 999px;
    border: 2px solid var(--sx-line);
    background: #fff;
    cursor: pointer;
    font-family: var(--sx-font);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--sx-ink);
    transition: border-color 0.12s ease;
}
.studio-swatch-pill:hover { border-color: rgba(111, 92, 241, 0.5); }
.studio-swatch-pill.is-active { border-color: var(--sx-accent); }
/* Compact rhythm for the brand step: four groups (business, colour, logos,
   actions) only stay on one screen if the gaps are tight. */
.studio-swatches { gap: 8px; align-items: center; }
.studio-section-eyebrow { margin: 22px 0 10px; }
.studio-dropzones { gap: 10px; }
.studio-drop { min-height: 74px; padding: 12px 10px; gap: 2px; }
.studio-drop__preview { max-height: 40px; }

/* Colour-only swatches: the colour IS the label (the name lives in
   aria-label/title), so a row of them reads as a palette, not a word list. */
.studio-swatch {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(20, 18, 76, 0.16);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.studio-swatch:hover { transform: scale(1.08); }
.studio-swatch.is-active { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--sx-accent); }
.studio-swatch:focus-visible { outline: 2px solid var(--sx-accent); outline-offset: 3px; }

/* The "anything else" swatch — a colour wheel that opens the OS picker. */
.studio-swatch-custom {
    position: relative;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    background: conic-gradient(#EF4444, #EAB308, #22C55E, #3B82F6, #A855F7, #EF4444);
    box-shadow: inset 0 0 0 1px rgba(20, 18, 76, 0.16);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.studio-swatch-custom:hover { transform: scale(1.08); }
.studio-swatch-custom.is-active { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--sx-accent); }
.studio-swatch-custom:focus-within { outline: 2px solid var(--sx-accent); outline-offset: 3px; }
.studio-swatch-custom__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}
.studio-swatch-custom__plus { pointer-events: none; }

.studio-swatch-value {
    align-self: center;
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: var(--sx-ink-55);
}

.studio-swatch-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

/* Logo & photo dropzones (branding step). */
.studio-dropzones {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 620px;
}
.studio-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 96px;
    padding: 18px 12px;
    text-align: center;
    background: #fff;
    border: 1.5px dashed rgba(20, 18, 76, 0.22);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.12s ease;
}
.studio-drop:hover { border-color: var(--sx-accent); }
.studio-drop-wrap { min-width: 0; max-width: 620px; }
.studio-drop--wide { max-width: 620px; }

/* Files attached on the submit step: a plain list, name + size + remove. */
.studio-attachments {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    max-width: 620px;
}
.studio-attachment {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--sx-line);
    border-radius: 10px;
    background: #fff;
    margin-bottom: 6px;
}
.studio-attachment__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--sx-ink);
}
.studio-attachment__size {
    flex-shrink: 0;
    font-weight: 500;
    font-size: 11.5px;
    color: var(--sx-ink-45);
}
.studio-attachment__remove {
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    font: 600 12px var(--sx-font);
    color: var(--sx-accent-ink);
    cursor: pointer;
}
.studio-attachment__remove:hover { color: var(--sx-accent-ink-hover); }
.studio-drop__loading { font-weight: 600; font-size: 11px; color: var(--sx-accent-ink); }
.studio-drop__remove {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    font: 600 12px var(--sx-font);
    color: var(--sx-accent-ink);
    cursor: pointer;
}
.studio-drop__remove:hover { color: var(--sx-accent-ink-hover); }
.studio-account-intro { margin: 0 0 12px; }
.studio-drop__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.studio-drop__title { font-weight: 700; font-size: 12.5px; color: var(--sx-ink-65); }
.studio-drop__hint { font-weight: 500; font-size: 11px; color: var(--sx-ink-45); }
.studio-drop__preview { max-height: 56px; max-width: 100%; object-fit: contain; }

/* ---------------------------------------------------------------------- *
 * Custom-track entry (Theme step)
 *
 * One option above the theme grid, shaped as a choice: a small tag, a title,
 * and the theme cards' own check circle (.studio-theme-card__check, which it
 * reuses — the selected rule below fills it). No price and no package — this screen only answers "template or custom?". A tinted
 * gradient ground sets it apart from the white template cards without
 * competing with their thumbnails: the product is still the template.
 * (History: a dashed row read as a dropzone; priced cards answered the
 * package step's question two screens early.)
 * ---------------------------------------------------------------------- */
.studio-custom-choice {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    padding: 16px 18px;
    margin: 0 0 6px;
    background: linear-gradient(135deg, #F3F1FE 0%, #E9ECFE 100%);
    border: 1.5px solid rgba(111, 92, 241, 0.22);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.studio-custom-choice:hover {
    border-color: rgba(111, 92, 241, 0.55);
    box-shadow: var(--sx-card-shadow);
}
.studio-custom-choice:focus-visible {
    outline: 2px solid var(--sx-accent);
    outline-offset: 2px;
}
.studio-custom-choice.is-selected,
.studio-custom-choice.is-picking {
    border-color: var(--sx-accent);
    box-shadow: var(--sx-card-shadow-sel);
}
.studio-custom-choice .studio-theme-card__check { background: #fff; }
.studio-custom-choice.is-selected .studio-theme-card__check,
.studio-custom-choice.is-picking .studio-theme-card__check {
    background: var(--sx-accent);
    color: #fff;
}
/* Another option was just clicked: the server's .is-selected is stale until
   the round-trip lands, so it stops looking chosen now (see theme.blade.php). */
.studio-custom-choice.is-selected.is-unpicked {
    border-color: rgba(111, 92, 241, 0.22);
    box-shadow: none;
}
.studio-custom-choice.is-selected.is-unpicked .studio-theme-card__check {
    background: #fff;
    color: transparent;
}

.studio-custom-choice__body { min-width: 0; flex: 1; }
.studio-custom-choice__tag {
    display: inline-block;
    margin-bottom: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sx-accent-ink);
}
.studio-custom-choice__title {
    display: block;
    font-weight: 800;
    font-size: 15.5px;
    color: var(--sx-ink);
}
.studio-custom-choice__desc {
    display: block;
    margin-top: 2px;
    font-weight: 500;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--sx-ink-60);
}

/* ---------------------------------------------------------------------- *
 * Scope step (custom track): "already have" chips + timeline cards, and the
 * domain question (Brand / Brief steps)
 *
 * Real checkboxes / radios, visually hidden, inside labels — so keyboard and
 * screen readers get native controls — with the selected state rendered by
 * the server after each live round-trip, and focus shown via :has().
 * ---------------------------------------------------------------------- */
/* Multi-select: a small square box (a checkbox, not the radios' circle). */
.studio-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 620px;
}
.studio-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 11px;
    background: #fff;
    border: 1.5px solid var(--sx-line);
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    color: var(--sx-ink-70);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.studio-chip:hover { border-color: rgba(111, 92, 241, 0.5); }
.studio-chip:has(input:focus-visible) {
    outline: 2px solid var(--sx-accent);
    outline-offset: 2px;
}
.studio-chip__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 4px;
    border: 2px solid var(--sx-line-16);
    background: #fff;
    font-size: 10px;
    font-weight: 800;
    color: transparent;
}
.studio-chip.is-selected {
    background: var(--sx-lav);
    border-color: var(--sx-accent);
    color: var(--sx-accent-ink);
}
.studio-chip.is-selected .studio-chip__box {
    border-color: var(--sx-accent);
    background: var(--sx-accent);
    color: #fff;
}

.studio-timeline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 620px;
}
@media (max-width: 620px) {
    .studio-timeline { grid-template-columns: 1fr; }
}

/* The domain field: a muted "www." affix inside the input's frame, so the
   visitor types just the name — which is also what normalizeDomain() keeps. */
.studio-domain {
    display: flex;
    align-items: stretch;
    max-width: 620px;
    background: #fff;
    border: 1px solid var(--sx-line-16);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.studio-domain:focus-within {
    border-color: var(--sx-accent);
    box-shadow: 0 0 0 3px var(--sx-focus-ring);
}
.studio-domain__prefix {
    display: flex;
    align-items: center;
    padding: 0 4px 0 13px;
    font-weight: 600;
    font-size: 14px;
    color: var(--sx-ink-45);
    user-select: none;
}
.studio-domain .studio-domain__input {
    flex: 1;
    min-width: 0;
    border: 0;
    box-shadow: none;
    padding-left: 2px;
    background: transparent;
}
.studio-domain .studio-domain__input:focus { box-shadow: none; outline: none; }

.studio-domain-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.studio-domain-status__option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    background: #fff;
    border: 1.5px solid var(--sx-line);
    border-radius: 999px;
    font-weight: 700;
    font-size: 12.5px;
    color: var(--sx-ink-70);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.studio-domain-status__option:hover { border-color: rgba(111, 92, 241, 0.5); }
.studio-domain-status__option:has(input:focus-visible) {
    outline: 2px solid var(--sx-accent);
    outline-offset: 2px;
}
.studio-domain-status__dot {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--sx-line-16);
    background: #fff;
}
.studio-domain-status__option.is-selected {
    background: var(--sx-lav);
    border-color: var(--sx-accent);
    color: var(--sx-accent-ink);
}
.studio-domain-status__option.is-selected .studio-domain-status__dot {
    border-color: var(--sx-accent);
    background: var(--sx-accent);
    box-shadow: inset 0 0 0 2px #fff;
}
.studio-timeline__option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1.5px solid var(--sx-line);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.studio-timeline__option:hover { border-color: rgba(111, 92, 241, 0.5); }
.studio-timeline__option:has(input:focus-visible) {
    outline: 2px solid var(--sx-accent);
    outline-offset: 2px;
}
.studio-timeline__option.is-selected {
    border-color: var(--sx-accent);
    box-shadow: var(--sx-card-shadow-sel);
}
.studio-timeline__dot {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    border-radius: 50%;
    border: 2px solid var(--sx-line-16);
    background: #fff;
}
.studio-timeline__option.is-selected .studio-timeline__dot {
    border-color: var(--sx-accent);
    background: var(--sx-accent);
    box-shadow: inset 0 0 0 3px #fff;
}
.studio-timeline__body { min-width: 0; }
.studio-timeline__label {
    display: block;
    font-weight: 800;
    font-size: 13.5px;
    color: var(--sx-ink);
}
.studio-timeline__hint {
    display: block;
    margin-top: 2px;
    font-weight: 500;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--sx-ink-55);
}

/* The brief is the longest thing anyone types in this funnel — give it room
   and let it match the width of the contact grid above it. */
.studio-field--wide { max-width: 620px; }
.studio-textarea--tall { min-height: 9rem; }

/* ---------------------------------------------------------------------- *
 * Plan cards (Package step)
 *
 * Compact by necessity: three tiers of ten feature lines will not fit three
 * columns inside the 780px form column, and full-height stacked cards meant
 * one plan filled the whole viewport — you could not compare two without
 * scrolling. So the card goes horizontal where it can: name + seats left of
 * the header, price hard right, features in two columns, and the AI lines
 * lifted out of the list into their own tinted block (the pricing doc's lead
 * differentiator, present on every tier). Cards are radios, not toggles.
 * ---------------------------------------------------------------------- */
.studio-plan-term {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.studio-plan-term__note {
    font-weight: 600;
    font-size: 12px;
    color: var(--sx-ink-55);
}

.studio-plans {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 700px;
    margin: 0 0 10px;
}

.studio-plan {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    padding: 15px 18px 16px;
    background: #fff;
    border: 1.5px solid var(--sx-line);
    border-radius: 14px;
    cursor: pointer;
    box-shadow: var(--sx-card-shadow);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.studio-plan:hover { border-color: rgba(111, 92, 241, 0.5); }
.studio-plan.is-selected {
    border-color: var(--sx-accent);
    box-shadow: var(--sx-card-shadow-sel);
}

.studio-plan__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* A real radio: ring when unselected, filled with a white core when chosen. */
.studio-plan__dot {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--sx-line-16);
    background: #fff;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.studio-plan.is-selected .studio-plan__dot {
    border-color: var(--sx-accent);
    background: var(--sx-accent);
    box-shadow: inset 0 0 0 3px #fff;
}

.studio-plan__id { min-width: 0; }
.studio-plan__name {
    display: block;
    font-weight: 800;
    font-size: 15px;
    color: var(--sx-ink);
}
.studio-plan__seats {
    display: block;
    margin-top: 1px;
    font-weight: 600;
    font-size: 12px;
    color: var(--sx-ink-55);
}
.studio-plan__badge {
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--sx-lav);
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sx-accent-ink);
}

.studio-plan__pricing {
    margin-left: auto;
    text-align: right;
    flex-shrink: 0;
}
.studio-plan__price {
    display: block;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.15;
    color: var(--sx-ink);
}
.studio-plan__per {
    display: block;
    font-weight: 600;
    font-size: 11.5px;
    color: var(--sx-ink-55);
}
.studio-plan__per--extra { color: var(--sx-accent-ink); }

/* Highlighted features: whatever staff lifted out of the list, in its own
   tinted block at the top of the card. Carries no heading — the slot is
   generic, so anything hardcoded there would eventually be wrong. */
.studio-plan__highlights {
    display: block;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--sx-lav);
}
.studio-plan__highlights-label {
    display: block;
    margin-bottom: 4px;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sx-accent-ink);
}
.studio-plan__highlights-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1px 16px;
}
.studio-plan__highlights-item {
    font-weight: 700;
    font-size: 12.5px;
    color: var(--sx-ink-70);
}
.studio-plan__highlights-item::before {
    content: '\2726';
    margin-right: 5px;
    color: var(--sx-accent);
}

/* Two columns, so ten features cost five rows instead of ten. */
.studio-plan__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
    margin-top: 11px;
}
.studio-plan__feature {
    font-weight: 500;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--sx-ink-65);
}
.studio-plan__feature::before {
    content: '\2713';
    margin-right: 6px;
    font-weight: 800;
    color: var(--sx-accent);
}
/* A bullet ending in a colon is a lead-in ("Everything in Agent, plus:"), not
   a feature: full width, no tick. */
.studio-plan__feature--lead {
    grid-column: 1 / -1;
    font-weight: 700;
    color: var(--sx-ink-55);
}
.studio-plan__feature--lead::before { content: none; }

/* Setup fee + footnote: a term of the offer, not one of its features. */
.studio-plan__note {
    display: block;
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px solid var(--sx-line-07);
    font-weight: 600;
    font-size: 11.5px;
    color: var(--sx-ink-45);
}

/* ---------------------------------------------------------------------- *
 * Segmented control — shared by the Grid/Stack + Desktop/Mobile toggles
 * ---------------------------------------------------------------------- */
.studio-seg {
    display: inline-flex;
    background: var(--sx-line-07);
    border-radius: 9px;
    padding: 3px;
    flex-shrink: 0;
}
.studio-seg__btn {
    font-family: var(--sx-font);
    font-weight: 700;
    font-size: 11.5px;
    padding: 5px 12px;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    background: transparent;
    color: var(--sx-ink-55);
    user-select: none;
    transition: background 0.12s ease, color 0.12s ease;
}
.studio-seg__btn.is-active {
    background: #fff;
    color: var(--sx-ink);
    box-shadow: 0 1px 3px rgba(20, 18, 76, 0.15);
}

/* ---------------------------------------------------------------------- *
 * Account-mode switch (the account step) — Create account / Sign in
 * Same segmented-control language as .studio-seg, sized for the form: two
 * equal tabs on a full-width track aligned to .studio-field-grid--account.
 * ---------------------------------------------------------------------- */
.studio-authswitch {
    display: flex;
    max-width: 560px;
    background: var(--sx-line-07);
    border-radius: 10px;
    padding: 3px;
    margin: 0 0 22px;
}
.studio-authswitch__btn {
    flex: 1;
    font-family: var(--sx-font);
    font-weight: 700;
    font-size: 13px;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
    color: var(--sx-ink-55);
    user-select: none;
    transition: background 0.12s ease, color 0.12s ease;
}
.studio-authswitch__btn.is-active {
    background: #fff;
    color: var(--sx-ink);
    box-shadow: 0 1px 3px rgba(20, 18, 76, 0.15);
}

/* Signed-in identity card (the account and submit steps, once signed in). */
.studio-signedin {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 560px;
    padding: 16px 18px;
    background: var(--sx-line-07);
    border-radius: 12px;
    margin: 0 0 8px;
}
.studio-signedin__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #1B6B45;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}
.studio-signedin__id {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.studio-signedin__email {
    font-weight: 700;
    font-size: 14px;
    color: var(--sx-ink);
    word-break: break-all;
}
.studio-signedin__signout {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sx-ink-55);
    font-family: var(--sx-font);
    font-weight: 600;
    font-size: 12.5px;
    text-decoration: underline;
    cursor: pointer;
}
.studio-signedin__signout:hover { color: var(--sx-ink); }

/* ---------------------------------------------------------------------- *
 * Sticky nav footer (Back · hint · Continue)
 * ---------------------------------------------------------------------- */
.studio-actions {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 36px;
    padding: 14px 0 18px;
    background: linear-gradient(to top, var(--sx-canvas) 78%, rgba(245, 245, 250, 0));
}
.studio-actions__hint {
    flex: 1;
    font-weight: 500;
    font-size: 12.5px;
    color: var(--sx-ink-50);
    text-align: right;
    padding-right: 4px;
}

.studio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: var(--sx-font);
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid transparent;
    user-select: none;
    transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.12s ease;
}
.studio-btn:active { transform: translateY(1px); }

.studio-btn--primary {
    font-size: 14.5px;
    padding: 13px 30px;
    border-radius: 12px;
    background: var(--sx-grad);
    color: #fff;
    box-shadow: var(--sx-btn-shadow);
}
.studio-btn--primary:hover { box-shadow: 0 10px 26px rgba(78, 70, 220, 0.42); }

.studio-btn--ghost {
    font-size: 14px;
    padding: 12px 22px;
    border-radius: 12px;
    background: #fff;
    color: var(--sx-ink-70);
    border-color: var(--sx-line);
}
.studio-btn--ghost:hover { border-color: var(--sx-ink-34); }

.studio-btn--block { width: 100%; }

/* ---------------------------------------------------------------------- *
 * Step 1 — theme grid (preset cards)
 * ---------------------------------------------------------------------- */
.studio-theme-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 520px) {
    .studio-theme-grid { grid-template-columns: 1fr; }
    .studio-dropzones { grid-template-columns: 1fr 1fr; }
    /* One column each: two feature columns at phone width wrap every line. */
    .studio-plan__features { grid-template-columns: 1fr; }
    .studio-review { grid-template-columns: 1fr; }
}

.studio-theme-card {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0;
    font: inherit;
    color: inherit;
    background: #fff;
    border: 2px solid var(--sx-line);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--sx-card-shadow);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.studio-theme-card:hover { border-color: rgba(111, 92, 241, 0.5); }
.studio-theme-card.is-selected,
.studio-theme-card.is-picking {
    border-color: var(--sx-accent);
    box-shadow: var(--sx-card-shadow-sel);
}
/* The optimistic pick (theme.blade.php): the previously selected card lets go
   the moment another is clicked, not when the server answers. */
.studio-theme-card.is-selected.is-unpicked {
    border-color: var(--sx-line);
    box-shadow: var(--sx-card-shadow);
}

/* Covers the gradient box completely (which owns the ratio and the border), so
   the preset name behind it only shows if the image never loads. */
.studio-theme-card__thumb {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
/* The gradient is the floor; the thumbnail covers it when it loads. */
.studio-theme-card__thumb-fallback {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    aspect-ratio: 16 / 10;
    padding: 12px;
    font-weight: 700;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(20, 18, 76, 0.08);
}

.studio-theme-card__body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
}
.studio-theme-card__label {
    display: block;
    font-weight: 800;
    font-size: 14.5px;
    color: var(--sx-ink);
}
.studio-theme-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.4;
    color: var(--sx-ink-55);
    margin-top: 2px;
}
.studio-theme-card__check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 800;
    font-size: 12px;
    background: var(--sx-empty-dot);
    color: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}
.studio-theme-card.is-selected .studio-theme-card__check,
.studio-theme-card.is-picking .studio-theme-card__check {
    background: var(--sx-accent);
    color: #fff;
}
.studio-theme-card.is-selected.is-unpicked .studio-theme-card__check {
    background: var(--sx-empty-dot);
    color: transparent;
}

/* ---------------------------------------------------------------------- *
 * Step 5 — review card + "what happens next" timeline
 * ---------------------------------------------------------------------- */
.studio-review {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    max-width: 700px;
    background: var(--sx-line-07);
    border: 1px solid var(--sx-line);
    border-radius: 14px;
    overflow: hidden;
}
.studio-review__cell {
    background: #fff;
    padding: 11px 16px;
    min-width: 0;
}
.studio-review__cell--wide { grid-column: 1 / -1; }
.studio-review__k {
    display: block;
    margin-bottom: 2px;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sx-ink-45);
}
.studio-review__v {
    display: block;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.45;
    color: var(--sx-ink);
    overflow-wrap: anywhere;
}
.studio-review__v--muted { font-weight: 600; color: var(--sx-ink-45); }
/* The visitor's own prose (brief, agent bio): their line breaks kept, and a
   reading weight — a paragraph in the labels' bold 700 was a wall. The
   value must sit flush inside the span: pre-line keeps template newlines. */
.studio-review__v--prose { font-weight: 500; white-space: pre-line; }
/* "Sites you like": one block per line as typed, the addresses underlined so
   they read as links among the notes beside them. */
.studio-review__v--lines { font-weight: 500; }
.studio-review__line { display: block; }
.studio-review__line + .studio-review__line { margin-top: 2px; }
.studio-review__v a { text-decoration: underline; text-underline-offset: 2px; }

/* The plan is the one commercial decision on this page, so it sits above the
   grid in its own bar with a way straight back to the step that owns it. */
.studio-plan-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    max-width: 700px;
    margin: 0 0 12px;
    padding: 13px 16px;
    background: var(--sx-lav);
    border-radius: 12px;
}
.studio-plan-summary__k {
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sx-accent-ink);
    flex-shrink: 0;
}
.studio-plan-summary__v {
    font-weight: 800;
    font-size: 13.5px;
    color: var(--sx-ink);
    min-width: 0;
}

/* A section heading with its own way back to the step that owns it — the
   review step's job is to let someone fix one thing, not restart the funnel. */
.studio-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    max-width: 700px;
    margin: 26px 0 0;
}
.studio-section-head .studio-section-eyebrow { margin: 0 0 10px; }

.studio-linkbtn {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    font: 700 12px var(--sx-font);
    color: var(--sx-accent-ink);
    cursor: pointer;
    flex-shrink: 0;
}
.studio-linkbtn:hover { color: var(--sx-accent-ink-hover); }

.studio-timeline {
    display: grid;
    gap: 14px;
    max-width: 640px;
}
.studio-timeline__item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.studio-timeline__num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--sx-lav);
    color: var(--sx-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12.5px;
    flex-shrink: 0;
    margin-top: 1px;
}
.studio-timeline__title {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--sx-ink);
}
.studio-timeline__desc {
    font-weight: 500;
    font-size: 13px;
    line-height: 1.55;
    color: var(--sx-ink-60);
    margin-top: 2px;
}

.studio-expectation {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--sx-ink-55);
    margin: 18px 0 0;
}

/* ---------------------------------------------------------------------- *
 * Live preview panel (docked right column)
 * ---------------------------------------------------------------------- */
.studio-preview-col {
    position: sticky;
    top: var(--sx-header-h);
    height: calc(100vh - var(--sx-header-h));
    display: flex;
    flex-direction: column;
    background: var(--sx-panel);
    border-left: 1px solid var(--sx-line);
    min-width: 0;
}

.studio-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(20, 18, 76, 0.1);
    flex-shrink: 0;
}
.studio-preview-head__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    /* The actions beside this are flex-shrink:0, so when the head runs out of
       room this box is what gets squeezed. Its children are white-space:nowrap,
       so without this they spill out and paint ON TOP of the "View live demo"
       button instead of being clipped. */
    overflow: hidden;
}
.studio-preview-head__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Escape hatch out of the framed preview — the demo, full size, new tab. */
.studio-preview-open {
    /* Padding tuned so the link stands the same height as the device toggle
       beside it (3px group padding + 5px button padding). */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border: 1px solid var(--sx-line);
    border-radius: 9px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sx-ink);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.studio-preview-open:hover {
    border-color: var(--sx-accent);
    color: var(--sx-accent);
}
.studio-preview-open:focus-visible {
    outline: 2px solid var(--sx-accent);
    outline-offset: 2px;
}
.studio-preview-chip {
    font-weight: 800;
    font-size: 12px;
    padding: 5px 11px;
    border-radius: 8px;
    background: var(--sx-ink);
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* "Theme demo" (muted) until the framed page answers the preview handshake,
   then "● Live preview" (green) — the badge never claims more than is true. */
.studio-preview-live {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--sx-ink-50);
    white-space: nowrap;
}
.studio-preview-live.is-bridged { color: var(--sx-live); }

/* The <980px "Show preview" toggle; hidden while the preview is docked. */
.studio-preview-toggle { display: none; }

.studio-preview-body {
    overflow: auto;
    padding: 20px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.studio-preview-stage {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--sx-line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--sx-stage-shadow);
    transition: width 0.2s ease;
}
.studio-preview-stage.is-mobile {
    width: 390px;
    max-width: 100%;
}

.studio-preview-iframe {
    /* Render the demo at a wider desktop viewport, then scale it down so the
       full-width homepage fits the stage (zoomed out) rather than showing 1:1
       with only the hero visible. */
    width: calc(100% / var(--sx-preview-zoom));
    height: calc(100% / var(--sx-preview-zoom));
    transform: scale(var(--sx-preview-zoom));
    transform-origin: 0 0;
    border: 0;
    display: block;
    position: relative;
    z-index: 1;
    background: #fff;
}

/* Mobile toggle = a true ~390px phone viewport, shown 1:1 (not zoomed). */
.studio-preview-stage.is-mobile .studio-preview-iframe {
    width: 100%;
    height: 100%;
    transform: none;
}

/* The skeleton: a rough page (bar, hero, cards) drawn over the frame while a
   demo loads — on the first pick AND on every switch, when the old demo would
   otherwise sit there and then flash to blank white for many seconds. It
   covers the iframe (z 1) and lifts once the demo answers the handshake or
   loads (Alpine.store('preview').loading). */
.studio-preview-loading {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    background: #fff;
    transition: opacity 0.2s ease;
}
.studio-preview-loading__bar,
.studio-preview-loading__hero,
.studio-preview-loading__card {
    border-radius: 8px;
    background: linear-gradient(90deg, #eef0f5 0%, #f7f8fb 50%, #eef0f5 100%);
    background-size: 200% 100%;
    animation: studio-skeleton 1.4s ease-in-out infinite;
}
.studio-preview-loading__bar { height: 28px; flex: none; }
.studio-preview-loading__hero {
    flex: 1 1 45%;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.studio-preview-loading__label {
    font-weight: 600;
    font-size: 13px;
    color: var(--sx-ink-45);
}
.studio-preview-loading__row {
    flex: 1 1 25%;
    min-height: 50px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@keyframes studio-skeleton {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .studio-preview-loading__bar,
    .studio-preview-loading__hero,
    .studio-preview-loading__card { animation: none; }
}

.studio-preview-empty {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 2rem;
    background: #fff;
}
.studio-preview-empty strong {
    font-weight: 800;
    font-size: 15px;
    color: var(--sx-ink);
}
.studio-preview-empty span {
    font-weight: 500;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--sx-ink-55);
    max-width: 22rem;
}

/* ---------------------------------------------------------------------- *
 * Responsive — one column; the preview becomes a full-screen sheet behind a
 * sticky "Show preview" toggle (not a 70vh block under every step)
 * ---------------------------------------------------------------------- */
@media (max-width: 980px) {
    .studio-main { grid-template-columns: 1fr; }

    .studio-form-inner { padding: 26px 20px 40px; }

    /* display:none keeps the iframe (and its bridge) alive; the frame just isn't
       painted until the sheet opens. Sits above the sticky topbar (z 40). */
    .studio-preview-col {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 50;
        height: auto;
        border-left: 0;
    }
    .studio-preview-col.is-open { display: flex; }
    .studio-preview-body { align-items: stretch; padding: 12px 12px 84px; }
    .studio-preview-stage { width: 100%; }
    .studio-preview-stage.is-mobile { width: 390px; align-self: center; }

    /* Floats just above the sticky step actions (Back / Continue, ~80px tall),
       so the two never overlap. */
    .studio-preview-toggle {
        display: inline-flex;
        align-items: center;
        position: fixed;
        left: 50%;
        bottom: calc(92px + env(safe-area-inset-bottom, 0px));
        transform: translateX(-50%);
        z-index: 60;
        padding: 12px 22px;
        border: 0;
        border-radius: 999px;
        background: var(--sx-ink);
        color: #fff;
        font: 700 13px/1 var(--sx-font);
        box-shadow: var(--sx-stage-shadow);
        cursor: pointer;
    }
}

@media (max-width: 620px) {
    .studio-topbar { padding: 10px 16px; gap: 10px; }
    .studio-rail { gap: 10px; }
    .studio-rail__label { display: none; }
    .studio-rail__step.is-current .studio-rail__label { display: inline; }
    .studio-pill { display: none; }

    /* The preview head carries four things — theme chip, preview badge, "View live
       demo" and the device toggle. On a phone the two controls alone are ~277px
       of ~347px, so on one row the label is crushed to a couple of characters
       and the badge overlaps the button. Give them a row each instead: the
       controls spread across the full width and every label stays readable. */
    .studio-preview-head { flex-wrap: wrap; row-gap: 8px; }
    .studio-preview-head__meta { flex: 1 1 100%; }
    .studio-preview-head__actions { flex: 1 1 100%; justify-content: space-between; }
}

/* ---------------------------------------------------------------------- *
 * Motion
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* ---------------------------------------------------------------------- *
 * Submit step — checkout layout
 *
 * By step 5 the preview has done its job. It is hidden rather than removed
 * (so stepping Back doesn't reload the demo site) and the form column takes
 * the whole width, which buys a two-column checkout: what you're getting on
 * the left, the one form that is actually required on the right. Before this
 * the account panel sat below the fold under two optional sections, while the
 * sticky "Create account & submit" bar was visible from the top — you could
 * press submit without ever having seen the fields it submits.
 *
 * These rules live at the end of the file on purpose: they have the same
 * specificity as the <980px preview rules above and must win over them.
 * ---------------------------------------------------------------------- */
.studio-main--wide { grid-template-columns: minmax(0, 1fr); }
.studio-main--wide .studio-preview-col { display: none; }
.studio-preview-toggle.is-hidden { display: none; }
.studio-main--wide .studio-form-inner { max-width: 1040px; }
.studio-main--wide .studio-plan-summary { max-width: none; }

.studio-submit-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-top: 20px;
}
.studio-submit-col { min-width: 0; }

/* The account side gets a card so the two columns read as equals — the review
   side is already one. */
.studio-submit-card {
    padding: 18px;
    background: #fff;
    border: 1px solid var(--sx-line);
    border-radius: 14px;
}
.studio-submit-card .studio-authswitch,
.studio-submit-card .studio-field-grid--account,
.studio-submit-card .studio-check,
.studio-submit-card .studio-signedin { max-width: none; }
.studio-submit-card .studio-authswitch { margin-bottom: 16px; }
.studio-submit-card .studio-account-intro { margin-top: 0; }

/* Notes and extra files are genuinely optional and usually skipped, so they
   fold away instead of pushing the required work off-screen. */
.studio-disclosure {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--sx-line-07);
}
.studio-disclosure__btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    font: 700 12.5px var(--sx-font);
    color: var(--sx-accent-ink);
    cursor: pointer;
}
.studio-disclosure__btn:hover { color: var(--sx-accent-ink-hover); }
.studio-disclosure__chev {
    display: inline-block;
    font-size: 15px;
    line-height: 1;
    transition: transform 0.15s ease;
}
.studio-disclosure__btn[aria-expanded="true"] .studio-disclosure__chev { transform: rotate(90deg); }
.studio-disclosure__body { margin-top: 14px; }

/* "What happens next" as one line instead of three stacked cards: it is
   reassurance, and reassurance should not outweigh the form beside it. */
.studio-nextline {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 16px 0 0;
    font-weight: 600;
    font-size: 12px;
    color: var(--sx-ink-55);
}
.studio-nextline span::before {
    content: '\2192';
    margin-right: 5px;
    color: var(--sx-accent);
}

/* ---------------------------------------------------------------------- *
 * Package step, wide layout — a real three-up pricing table
 *
 * With the preview gone there is room for the conventional shape: three
 * columns, equal height, price stacked under the tier name rather than pushed
 * to the right of a 330px card, and one feature column per card (two would
 * wrap every line at this width). The setup-fee footnote is pinned to the
 * bottom so the three cards' dividers line up.
 * ---------------------------------------------------------------------- */
.studio-main--wide .studio-plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    align-items: stretch;
}
.studio-main--wide .studio-plan {
    display: flex;
    flex-direction: column;
}
.studio-main--wide .studio-plan__head { flex-wrap: wrap; }
/* In the three-up layout the price drops to its own row, leaving the top-right
   of the card empty — so the badge goes to the corner instead of floating
   mid-header beside the name. It stays inline in the stacked layout below,
   where the price already owns that corner. */
.studio-main--wide .studio-plan__badge {
    margin-left: auto;
    align-self: flex-start;
}
.studio-main--wide .studio-plan__pricing {
    flex: 1 1 100%;
    /* Lines the price up under the name, clear of the radio (20px + 12px). */
    margin: 10px 0 0 32px;
    text-align: left;
}
.studio-main--wide .studio-plan__features { grid-template-columns: minmax(0, 1fr); }
.studio-main--wide .studio-plan__note { margin-top: auto; }
/* Brokerage carries a third line here ("+ $14 per agent / mo"); without a floor
   its AI block and feature list sit lower than the other two cards' and the row
   loses its baseline. Reserves the taller of the two shapes for all three. */
.studio-main--wide .studio-plan__pricing { min-height: 62px; }

/* ---------------------------------------------------------------------- *
 * Narrow variant — the account step, and the custom track's Brief,
 * Package and Scope steps
 *
 * Still no preview, but these are one form column, not a checkout: in the
 * 1040px wide column their 620px fields sat hard left while the actions bar
 * ran the full width, putting Continue 400px from the form it submits. One
 * centred 700px column instead, with the fields filling it, so the heading,
 * the form and the buttons share one edge on each side. The custom Package
 * step has two offers, not three, so its cards go two-up.
 *
 * Before the <900px block on purpose: .studio-plans has the same specificity
 * as the wide rule there, which must still collapse it to one column.
 * ---------------------------------------------------------------------- */
.studio-main--narrow .studio-form-inner { max-width: 700px; }
.studio-main--narrow .studio-field,
.studio-main--narrow .studio-field--wide,
.studio-main--narrow .studio-field-grid,
.studio-main--narrow .studio-help--wide,
.studio-main--narrow .studio-drop--wide,
.studio-main--narrow .studio-domain,
.studio-main--narrow .studio-chips,
.studio-main--narrow .studio-timeline,
/* The account step: its switch, check and signed-in card are capped at
   560px for the old two-column submit step; here they span the column like
   the fields beside them. */
.studio-main--narrow .studio-authswitch,
.studio-main--narrow .studio-field-grid--account,
.studio-main--narrow .studio-check,
.studio-main--narrow .studio-signedin { max-width: none; }
.studio-main--narrow .studio-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Below 900px the wide layout is one column again, so the cards go back to the
   stacked shape: price right of the name, features in two columns. Every
   narrow-screen override for this layout lives here, last in the file, so the
   cascade order is the media query order and nothing earlier can out-rank it. */
@media (max-width: 900px) {
    .studio-submit-grid { grid-template-columns: minmax(0, 1fr); }

    .studio-main--wide .studio-plans { grid-template-columns: minmax(0, 1fr); }
    .studio-main--wide .studio-plan { display: block; }
    .studio-main--wide .studio-plan__head { flex-wrap: nowrap; }
    .studio-main--wide .studio-plan__pricing {
        flex: 0 0 auto;
        margin: 0 0 0 auto;
        text-align: right;
    }
    .studio-main--wide .studio-plan__features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .studio-main--wide .studio-plan__features { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------- *
 * Validation states.
 *
 * A field with an error says so itself (aria-invalid, set by
 * FieldErrors::aria()), not only through the red line under it — the border
 * is what the eye looks for when focus jumps to the first problem.
 * ---------------------------------------------------------------------- */
.studio-input[aria-invalid="true"],
.studio-textarea[aria-invalid="true"],
.studio-select[aria-invalid="true"] {
    border-color: var(--sx-error);
}
.studio-input[aria-invalid="true"]:focus,
.studio-textarea[aria-invalid="true"]:focus,
.studio-select[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(180, 35, 42, 0.18);
}
.studio-error[tabindex="-1"]:focus { outline: none; }

/* Continue while the step isn't done (partials/continue.blade.php): a flat,
   muted fill with no glow, so it no longer reads as ready. Still a pointer —
   a click is what lists what's missing — and still focusable (aria-disabled,
   not disabled). Solid rather than a translucent ink so the white label keeps
   a readable contrast. */
.studio-btn--primary.is-incomplete,
.studio-btn--primary.is-incomplete:hover {
    background: #8C89B3;
    box-shadow: none;
}