/* Keep the hero's text metrics stable when the optional global font arrives. */
    .studio-door .hero {
        --nsk-font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        --nsk-font-body: var(--nsk-font-display);
        font-family: var(--nsk-font-display);
    }

    /* Page layout only — every color, radius, and rhythm token comes from the kit.
       box-sizing guard is page-level by kit law (the kit ships no resets). */
    .studio-door *, .studio-door *::before, .studio-door *::after { box-sizing: border-box; }
    .studio-door .wrap { max-width: 1120px; margin: 0 auto; }
    .studio-door a { color: inherit; }

    /* Line 8976: bootstrap (:root) and landing.css (html) animate every root scroll;
       a jump to the end of this long page glided ~1.4 s and the sticky top menu
       painted 40-155 px down over an empty band meanwhile. The page has no in-page
       anchors, so jumps land at once. :root matches bootstrap's weight and follows it. */
    :root { scroll-behavior: auto; }

    /* nav (rendered into the layout header) */
    .studio-nav-links { display: inline-flex; flex-wrap: wrap; gap: var(--nsk-space-2); align-items: center; }
    .studio-nav-links .label-short { display: none; }
    @media (max-width: 767px) {
        /* phones: nav stays brand + actions; the doors, road, and footer carry the
           same links. The register label shortens so brand + two 44px actions hold
           one row at 375. */
        .studio-nav-links .nsk-nav-pill { display: none; }
        .studio-nav-links .nsk-cta { padding-left: var(--nsk-space-4); padding-right: var(--nsk-space-4); }
        .studio-nav-links .label-long { display: none; }
        .studio-nav-links .label-short { display: inline; }
    }

    /* hero */
    .studio-door .hero { padding: var(--nsk-space-10) var(--nsk-space-4) var(--nsk-space-8); }
    @media (min-width: 768px) {
        /* Rider 2: match .nsk-section's 24px gutter so the hero edge lines up with
           every band below it. */
        .studio-door .hero { padding-left: var(--nsk-space-5); padding-right: var(--nsk-space-5); }
    }
    .studio-door .hero-inner { max-width: 760px; }
    .studio-door .hero h1 {
        font-family: var(--nsk-font-display);
        font-size: clamp(2rem, 5.5vw, var(--nsk-text-3xl));
        font-weight: 800;
        line-height: var(--nsk-leading-tight);
        letter-spacing: -0.015em;
        color: var(--nsk-ink);
        margin: var(--nsk-space-3) 0 var(--nsk-space-4);
    }
    .studio-door .hero h1 em { font-style: normal; color: var(--nsk-accent); }
    .studio-door .hero-sub {
        font-size: var(--nsk-text-lg);
        line-height: var(--nsk-leading-normal);
        color: var(--nsk-sub);
        margin: 0 0 var(--nsk-space-5);
        max-width: 620px;
    }
    .studio-door .hero-ctas { display: flex; flex-wrap: wrap; gap: var(--nsk-space-3); align-items: center; }
    .studio-door .hero-truth { margin: var(--nsk-space-4) 0 0; font-size: var(--nsk-text-sm); color: var(--nsk-sub); }
    .studio-door .hero-picked { margin: 0 0 var(--nsk-space-3); font-size: var(--nsk-text-sm); color: var(--nsk-ink); }
    .studio-door .hero-steps { margin: var(--nsk-space-3) 0 0; font-size: var(--nsk-text-sm); font-weight: 600; color: var(--nsk-ink); }
    .studio-door .hero-truth strong { color: var(--nsk-accent-2); font-weight: 600; }
    @media (max-width: 480px) {
        /* Line 7156: on a phone the hero gives one first step. The filled button takes the row and
           the secondary buttons turn into one quiet text-link row under it: the same anchors in the
           same order, 44px tall. The middle dot sits in the gap before each link; the clip trims
           the dot of a link that starts a line (its dot falls outside the row's left edge), and its
           4px side slack keeps the primary's focus ring. 481px and wider: no rule here. */
        .studio-door .hero-ctas-phone-one { column-gap: var(--nsk-space-5); row-gap: var(--nsk-space-1); clip-path: inset(-12px -4px); }
        .studio-door .hero-ctas-phone-one .nsk-cta-primary { flex: 1 1 100%; margin-bottom: var(--nsk-space-2); }
        .studio-door .hero-ctas-phone-one .nsk-cta-secondary { position: relative; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; font-size: var(--nsk-text-sm); font-weight: 600; white-space: nowrap; color: var(--nsk-ink); text-decoration: underline; text-underline-offset: 3px; }
        .studio-door .hero-ctas-phone-one .nsk-cta-secondary:hover { background: none; color: var(--nsk-ink); text-decoration-thickness: 2px; }
        .studio-door .hero-ctas-phone-one .nsk-cta-secondary::before { content: "·"; position: absolute; left: calc(var(--nsk-space-5) / -2); transform: translateX(-50%); color: var(--nsk-sub); pointer-events: none; }
    }

    /* doors */
    .studio-door .doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nsk-space-4); }
    @media (max-width: 900px) { .studio-door .doors { grid-template-columns: 1fr; } }
    .studio-door .door-step {
        font-family: var(--nsk-font-mono);
        font-size: var(--nsk-label-size);
        font-weight: var(--nsk-label-weight);
        letter-spacing: var(--nsk-label-tracking);
        text-transform: uppercase;
        color: var(--nsk-accent);
    }
    .studio-door .door-title {
        font-family: var(--nsk-font-display);
        font-size: var(--nsk-text-xl);
        font-weight: 700;
        color: var(--nsk-ink);
        margin: var(--nsk-space-2) 0 var(--nsk-space-2);
        line-height: var(--nsk-leading-tight);
    }
    .studio-door .door-text { font-size: var(--nsk-text-sm); color: var(--nsk-sub); margin: 0; }
    .studio-door .door-go { margin-top: var(--nsk-space-4); font-size: var(--nsk-text-sm); font-weight: 600; color: var(--nsk-accent); }
    .studio-door a.nsk-card:hover .door-go { text-decoration: underline; }

    /* one-product band */
    .studio-door .band-head { max-width: 700px; margin-bottom: var(--nsk-space-6); }
    .studio-door .band-head h2 {
        font-family: var(--nsk-font-display);
        font-size: var(--nsk-text-2xl);
        font-weight: 700;
        line-height: var(--nsk-leading-tight);
        color: var(--nsk-ink);
        margin: var(--nsk-space-3) 0 var(--nsk-space-3);
    }
    .studio-door .band-head p { color: var(--nsk-sub); margin: 0; }
    .studio-door .pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--nsk-space-4); }
    @media (max-width: 1000px) { .studio-door .pillars { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 540px) { .studio-door .pillars { grid-template-columns: 1fr; } }
    .studio-door .pillar h3 {
        font-family: var(--nsk-font-display);
        font-size: var(--nsk-text-base);
        font-weight: 700;
        color: var(--nsk-ink);
        margin: 0 0 var(--nsk-space-2);
    }
    .studio-door .pillar p { font-size: var(--nsk-text-sm); color: var(--nsk-sub); margin: 0 0 var(--nsk-space-3); }
    .studio-door .pillar a {
        display: inline-flex; align-items: center;
        min-height: var(--nsk-touch);
        font-size: 13px; font-weight: 600; color: var(--nsk-accent); text-decoration: none;
    }
    .studio-door .pillar a:hover { text-decoration: underline; }
    .studio-door .pillar a:focus-visible { outline: 2px solid var(--nsk-focus); outline-offset: 2px; }

    /* Eight looks: four across desktop, two at tablet, one at phone width. */
    .studio-door .spectrum-grid { grid-template-columns: repeat(4, 1fr); }
    @media (max-width: 1000px) { .studio-door .spectrum-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 540px) { .studio-door .spectrum-grid { grid-template-columns: 1fr; } }
    .studio-door .spectrum-grid .pillar a { margin-right: var(--nsk-space-4); }
    .studio-door .spectrum-admin-row { margin: var(--nsk-space-5) 0 0; font-size: var(--nsk-text-sm); }
    .studio-door .spectrum-admin-row a { color: var(--nsk-accent); font-weight: 600; text-decoration: none; }
    .studio-door .spectrum-admin-row a:hover { text-decoration: underline; }
    .studio-door .spectrum-keep { margin: var(--nsk-space-5) 0 0; font-size: var(--nsk-text-sm); color: var(--nsk-sub); line-height: 1.6; }
    .studio-door .spectrum-keep a { color: var(--nsk-accent); font-weight: 600; text-decoration: none; }
    .studio-door .spectrum-keep a:hover { text-decoration: underline; }

    /* U2 Door 1 — the ladder band above the look bays. Grid + kit tokens
       only: no new colour, no new radius, no new font, no price. */
    .studio-door .ladder { display: grid; gap: var(--nsk-space-4); margin-bottom: var(--nsk-space-6); }
    @media (min-width: 900px) { .studio-door .ladder { grid-template-columns: 1.45fr 1fr; } }
    .studio-door .ladder-rungs { display: grid; gap: var(--nsk-space-4); align-content: start; }
    @media (min-width: 560px) and (max-width: 899px) { .studio-door .ladder-rungs { grid-template-columns: 1fr 1fr; } }
    .studio-door a.ladder-lead,
    .studio-door a.ladder-rung {
        display: flex; flex-direction: column; gap: var(--nsk-space-2);
        padding: var(--nsk-space-5);
        border: 1px solid var(--nsk-bd);
        border-radius: var(--nsk-radius-lg);
        background: var(--nsk-surface);
        text-decoration: none;
    }
    .studio-door a.ladder-lead { border-color: var(--nsk-accent); }
    .studio-door a.ladder-lead:hover,
    .studio-door a.ladder-rung:hover { border-color: var(--nsk-bd-strong); }
    .studio-door a.ladder-lead:focus-visible,
    .studio-door a.ladder-rung:focus-visible { outline: 2px solid var(--nsk-focus); outline-offset: 2px; }
    .studio-door .ladder-k {
        font-family: var(--nsk-font-mono);
        font-size: var(--nsk-label-size);
        font-weight: var(--nsk-label-weight);
        letter-spacing: var(--nsk-label-tracking);
        text-transform: uppercase;
        color: var(--nsk-accent);
    }
    .studio-door .ladder-t {
        font-family: var(--nsk-font-display);
        font-weight: 700;
        line-height: var(--nsk-leading-tight);
        color: var(--nsk-ink);
    }
    .studio-door a.ladder-lead .ladder-t { font-size: var(--nsk-text-xl); }
    .studio-door a.ladder-rung .ladder-t { font-size: var(--nsk-text-base); }
    .studio-door .ladder-s { font-size: var(--nsk-text-sm); line-height: var(--nsk-leading-normal); color: var(--nsk-sub); margin: 0; }
    .studio-door .ladder-go {
        margin-top: auto;
        display: inline-flex; align-items: center;
        min-height: var(--nsk-touch);
        font-size: 13px; font-weight: 600; color: var(--nsk-accent);
    }
    .studio-door a.ladder-lead:hover .ladder-go,
    .studio-door a.ladder-rung:hover .ladder-go { text-decoration: underline; }

    /* the road */
    .studio-door .road { counter-reset: step; display: grid; gap: 0; max-width: 760px; }
    .studio-door .road-step {
        display: flex;
        gap: var(--nsk-space-4);
        padding: var(--nsk-space-4) 0;
        border-bottom: 1px solid var(--nsk-bd-soft);
    }
    .studio-door .road-step:last-child { border-bottom: 0; }
    .studio-door .road-num {
        counter-increment: step;
        flex: 0 0 auto;
        width: 32px; height: 32px;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--nsk-bd);
        border-radius: 50%;
        font-family: var(--nsk-font-mono);
        font-size: 12px; font-weight: 600;
        color: var(--nsk-accent);
        background: var(--nsk-surface);
    }
    .studio-door .road-num::before { content: counter(step); }
    .studio-door .road-body h3 {
        font-family: var(--nsk-font-display);
        font-size: var(--nsk-text-base);
        font-weight: 700;
        color: var(--nsk-ink);
        margin: 4px 0 4px;
    }
    .studio-door .road-body p { font-size: var(--nsk-text-sm); color: var(--nsk-sub); margin: 0; }
    .studio-door .road-body a { color: var(--nsk-accent); font-weight: 600; text-decoration: none; }
    .studio-door .road-body a:hover { text-decoration: underline; }
    .studio-door .road-body a:focus-visible { outline: 2px solid var(--nsk-focus); outline-offset: 2px; }

    /* plans band */
    .studio-door .plans-inner { max-width: 620px; text-align: left; }
    .studio-door .plans-inner h2 {
        font-family: var(--nsk-font-display);
        font-size: var(--nsk-text-2xl);
        font-weight: 700;
        color: var(--nsk-ink);
        margin: var(--nsk-space-3) 0 var(--nsk-space-3);
        line-height: var(--nsk-leading-tight);
    }
    .studio-door .plans-inner p { color: var(--nsk-sub); margin: 0 0 var(--nsk-space-5); }

    /* footer row (rendered into the layout footer) */
    .studio-footer-row { display: flex; flex-wrap: wrap; gap: var(--nsk-space-3) var(--nsk-space-5); align-items: center; justify-content: center; }
    .studio-footer-row a {
        font-size: 13px; color: var(--nsk-sub); text-decoration: none;
        min-height: var(--nsk-touch); display: inline-flex; align-items: center;
    }
    .studio-footer-row a:hover { color: var(--nsk-ink); }
    .studio-footer-row a:focus-visible { outline: 2px solid var(--nsk-focus); outline-offset: 2px; }
    .studio-footer-copy { font-size: 12px; color: var(--nsk-sub); margin-top: var(--nsk-space-3); text-align: center; }

    /* Line 15023: every label on the door reads at 12px (the kit's walk counted 34 at
       10.5-11px at every width). Size only: the mono family, weight, tracking, uppercase
       and colour stay the kit's, and ui-kit.css's shared --nsk-label-size and chip size,
       which the marketplace and other pages read, are untouched. */
    .studio-door .nsk-kicker,
    .studio-door .nsk-panel-title,
    .studio-door .nsk-chip,
    .studio-door .door-step,
    .studio-door .ladder-k { font-size: 12px; }

    /* Line 8151: phones only. The road and keep-what-you-make links sit in running
       text at 19px tall; at 375 each lays out in a 32px box. 768 and up keep their
       inline flow untouched. Line 15023: the target is 44px on both sides; the 6px
       margin gives the growth back, so the line box and every word stay where
       line 8151 put them. */
    @media (max-width: 480px) {
        .studio-door .road-body a,
        .studio-door .spectrum-keep a {
            display: inline-flex; align-items: center; justify-content: center;
            min-height: 44px; min-width: 44px;
            padding-inline: 6px;
            margin: -6px;
        }
    }

    /* Line 15125: under 768 px the selling panel's chips and door links (ns-chat-widget's .ns-pill, 26 px tall on 12 px
       text with 6 px padding) are 44 px tall boxes, text centred and unchanged; 768 and up keep line 14138's floor. The
       body prefix outweighs the widget's own #ns-chat-root .ns-pill{display:inline-block}, injected after this sheet. */
    @media (max-width: 767.98px) {
        body #ns-chat-root .ns-pill { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; }
    }

    /* Line 12152 (studio_hero_clear_of_fold_tablet): the hero's ask (data-alive-dock-yield-compact) folds the guide to
       line 9741's 56 px round face, 4 px from the inline-end edge (css/door-voice-first.css). Between 768 and 1023 px the
       column can run under it, so the steps line and 'Free to meet, free to try.' keep their text 8 px clear of her:
       56 px face + 4 px edge offset + 8 px - the hero's 24 px gutter = 44 px. A hero without the ask matches nothing. */
    @media (min-width: 768px) and (max-width: 1023.98px) {
        .studio-door .hero[data-alive-dock-yield-compact="1"] .hero-steps,
        .studio-door .hero[data-alive-dock-yield-compact="1"] .hero-truth { padding-inline-end: calc(56px + 4px + 8px - var(--nsk-space-5)); }
    }

    /* Line 12452: the selling launcher is separate from the alive dock. Reuse its reserved
       end gutter while the lit hero is visible; phones, wide screens and open panels keep their layout. */
    @media (min-width: 768px) and (max-width: 1023.98px) {
        #ns-chat-root.ns-studio-hero-compact:not(.ns-open) { inset-inline-start: auto; inset-inline-end: 4px; }
        #ns-chat-root.ns-studio-hero-compact:not(.ns-open) .ns-tip { display: none; }
    }

    /* Line 14634: past the hero the selling launcher parks as the widget's 56 px face, fixed 18 px in from the
       bottom-left corner (js/ns-chat-widget.js), and from 700 to 1099 px the look grid's left column ran under it
       (live check 757a9c0997 saw her on card 3's 'SKETCHLINE COLOR' label mid-scroll at 768). The grid reserves
       her column the way /ai-employees reserves his corner (line 14052), so every card starts 8 px right of her
       face at every scroll offset: 18 px inset + 56 px face + 8 px - the section's gutter. A page without her
       launcher matches nothing; phones and 1100 px up keep their grid. */
    @media (min-width: 700px) and (max-width: 767.98px) {
        body:has(#ns-chat-root) .studio-door .spectrum-grid { padding-left: calc(18px + 56px + 8px - var(--nsk-space-4)); }
    }
    @media (min-width: 768px) and (max-width: 1099.98px) {
        body:has(#ns-chat-root) .studio-door .spectrum-grid { padding-left: calc(18px + 56px + 8px - var(--nsk-space-5)); }
    }