/*
 * site.css — the public (pre-login) marketing system: "Soft Studio".
 *
 * Direction approved 2026-09-06 from the mockup canvas:
 *   - LIGHT and elegant, in the register Photoroom / Canva work in. An earlier
 *     dark "atelier" version of this file was rejected as too sci-fi; do not
 *     bring it back.
 *   - Palette is the LOGO MARK's own gradient, sampled from
 *     staticfiles/logomainreduce.png: violet #7C67EE -> purple #AC66D8 ->
 *     pink #FF8695 -> peach #FFA776 -> amber #FFD150. The dashboard's teal
 *     (--sh-accent) governs the app only and never appears out here.
 *   - Headline face is Bricolage Grotesque, body Instrument Sans — chosen
 *     deliberately over Inter / Poppins / Plus Jakarta, which every other
 *     imaging tool defaults to.
 *   - The hero is a full-bleed looping video with the nav riding on it.
 *
 * Prefix: --st-* / .st-*  (site). Never --sh-* / .sh-* (app), and no Bootstrap.
 * Loaded only by templates/base/base_site.html.
 */

/* =========================================================================
 * 1. Tokens
 * ========================================================================= */
:root {
    /* --- ground --- */
    --st-ground:      #FBF8F6;   /* warm off-white page */
    --st-surface:     #FFFFFF;
    --st-sunk:        #F5F0EC;

    /* --- brand tints, straight off the logo gradient --- */
    --st-tint-peach:  #FDEDE6;
    --st-tint-rose:   #F9E9F1;
    --st-tint-violet: #EFECFD;
    --st-tint-amber:  #FDF6E7;

    /* --- text (contrast measured on #FBF8F6) --- */
    --st-ink:         #1A1523;   /* 15.9:1 */
    --st-body:        #56506A;   /*  7.6:1 */
    --st-muted:       #6A6379;   /*  5.4:1 on ground, 5.0:1 on sunk — lightest permitted on body copy */
    --st-label:       #6E6780;   /*  5.1:1 on ground, 4.7:1 on sunk (was #8B8398 = 3.4:1, failed AA; 2026-09-24) */
    --st-faint:       #A29BAD;   /*  3.0:1 — NEVER on text that must be read */

    /* --- lines --- */
    --st-line:        #EDE5E0;
    --st-line-hi:     #E2DAD4;

    /* --- actions --- */
    --st-violet:      #6B5BE0;   /* white on it 5.63:1 */
    --st-violet-hi:   #5546C9;
    --st-violet-soft: #EEEBFC;

    /* --- accents, decorative only --- */
    --st-pink:        #FF8695;
    --st-rose:        #E8657C;
    --st-amber:       #FFD150;
    --st-gold:        #D99727;

    /* --- type --- */
    --st-display: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
    --st-sans:    'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* --- rhythm --- */
    --st-gutter: 40px;
    --st-max: 1360px;
    --st-nav-h: 74px;

    --st-r-sm: 12px;
    --st-r:    18px;
    --st-r-lg: 28px;
    --st-r-xl: 36px;

    --st-shadow-sm: 0 16px 36px -22px rgba(56, 33, 71, .35);
    --st-shadow:    0 20px 44px -24px rgba(56, 33, 71, .40);
    --st-shadow-lg: 0 30px 70px -30px rgba(56, 33, 71, .42);

    --st-ease: cubic-bezier(.22, .61, .36, 1);
}

/* =========================================================================
 * 2. Base
 * ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

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

body.st-site {
    margin: 0;
    background: var(--st-ground);
    color: var(--st-body);
    font-family: var(--st-sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* :where() zeroes these resets' specificity so any .st-* rule below wins —
 * without it `body.st-site a` (0,1,2) outranks `.st-btn--primary` (0,1,0) and
 * the primary button renders body-grey text on its violet fill. */
:where(body.st-site) img { max-width: 100%; display: block; }
:where(body.st-site) a { color: inherit; text-decoration: none; }
:where(body.st-site) :is(h1, h2, h3, h4, p, figure, ul, ol) { margin: 0; padding: 0; }
:where(body.st-site) :is(ul, ol) { list-style: none; }
:where(body.st-site) button { font: inherit; color: inherit; }

::selection { background: rgba(107, 91, 224, .18); }

:where(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--st-violet);
    outline-offset: 3px;
    border-radius: 6px;
}

/* =========================================================================
 * 3. Layout primitives
 * ========================================================================= */
.st-wrap {
    width: 100%;
    max-width: var(--st-max);
    margin-inline: auto;
    padding-inline: var(--st-gutter);
}

.st-section { position: relative; padding-block: clamp(72px, 8vw, 124px); }
.st-section--tight { padding-block: clamp(48px, 5vw, 80px); }
.st-section--sunk { background: var(--st-sunk); }

.st-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 32px;
    padding-inline: 15px;
    border: 1px solid var(--st-line-hi);
    border-radius: 999px;
    background: var(--st-surface);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--st-body);
}
.st-eyebrow::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7C67EE, #FF8695);
}

.st-h1 {
    font-family: var(--st-display);
    font-weight: 600;
    font-size: clamp(44px, 5.4vw, 78px);
    line-height: .99;
    letter-spacing: -.04em;
    color: var(--st-ink);
}
.st-h2 {
    font-family: var(--st-display);
    font-weight: 600;
    font-size: clamp(32px, 3.6vw, 52px);
    line-height: 1.04;
    letter-spacing: -.035em;
    color: var(--st-ink);
}
.st-h3 {
    font-family: var(--st-sans);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--st-ink);
}
.st-lede {
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.6;
    color: var(--st-body);
    max-width: 58ch;
}

.st-head { max-width: 720px; }
.st-head .st-eyebrow { margin-bottom: 22px; }
.st-head .st-h2 + .st-lede { margin-top: 20px; }

/* =========================================================================
 * 4. Buttons
 * ========================================================================= */
.st-btn {
    --btn-bg: var(--st-surface);
    --btn-fg: var(--st-ink);
    --btn-bd: var(--st-line-hi);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 46px;
    padding-inline: 22px;
    border: 1px solid var(--btn-bd);
    border-radius: 999px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .22s var(--st-ease), border-color .22s var(--st-ease),
                color .22s var(--st-ease), transform .22s var(--st-ease),
                box-shadow .22s var(--st-ease);
}
.st-btn:hover { transform: translateY(-1px); }

.st-btn--primary {
    --btn-bg: var(--st-violet);
    --btn-fg: #FFFFFF;
    --btn-bd: transparent;
}
.st-btn--primary:hover {
    --btn-bg: var(--st-violet-hi);
    box-shadow: 0 14px 30px -14px rgba(107, 91, 224, .7);
}
.st-btn--glass {
    --btn-bg: rgba(255, 255, 255, .82);
    --btn-bd: rgba(255, 255, 255, .95);
}
.st-btn--glass:hover { --btn-bg: #FFFFFF; }
.st-btn--lg { height: 54px; padding-inline: 30px; font-size: 16px; }

.st-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--st-ink);
    transition: gap .22s var(--st-ease);
}
.st-link::after { content: "\2192"; color: var(--st-violet); }
.st-link:hover { gap: 12px; }

.st-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* =========================================================================
 * 5. Navigation — rides on the hero video, solidifies on scroll
 * ========================================================================= */
.st-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 800;
    height: var(--st-nav-h);
    display: flex;
    align-items: center;
    border-bottom: 1px solid transparent;
    transition: background .3s var(--st-ease), border-color .3s var(--st-ease),
                backdrop-filter .3s var(--st-ease);
}
.st-nav.is-stuck {
    background: rgba(251, 248, 246, .86);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border-bottom-color: var(--st-line);
}
.st-nav__inner {
    width: 100%;
    max-width: var(--st-max);
    margin-inline: auto;
    padding-inline: var(--st-gutter);
    display: flex;
    align-items: center;
    gap: 30px;
}
.st-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--st-display);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--st-ink);
}
.st-brand img { width: 30px; height: 30px; object-fit: contain; }

.st-nav__menu { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.st-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding-inline: 13px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 500;
    color: var(--st-body);
    transition: color .2s var(--st-ease), background .2s var(--st-ease);
}
.st-nav__link:hover { color: var(--st-ink); background: rgba(26, 21, 35, .05); }
.st-nav__caret { width: 9px; height: 9px; opacity: .5; transition: transform .25s var(--st-ease); }

.st-nav__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.st-nav__right .st-btn { height: 42px; padding-inline: 20px; font-size: 14.5px; }

/* --- mega menu --- */
.st-mega-host { position: relative; }
.st-mega {
    position: absolute;
    top: calc(100% + 12px);
    left: -18px;
    width: min(780px, calc(100vw - 48px));
    padding: 22px;
    border: 1px solid var(--st-line);
    border-radius: var(--st-r-lg);
    background: var(--st-surface);
    box-shadow: var(--st-shadow-lg);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .22s var(--st-ease), transform .22s var(--st-ease), visibility .22s;
}
.st-mega-host:hover .st-mega,
.st-mega-host:focus-within .st-mega,
.st-mega-host.is-open .st-mega { opacity: 1; visibility: visible; transform: translateY(0); }
.st-mega-host:hover .st-nav__caret,
.st-mega-host.is-open .st-nav__caret { transform: rotate(180deg); }
.st-mega__col-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--st-label);
    padding: 4px 10px 10px;
}
.st-mega__item {
    display: block;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--st-ink);
    transition: background .18s var(--st-ease);
}
.st-mega__item span { display: block; font-size: 12.5px; font-weight: 400; color: var(--st-muted); margin-top: 1px; }
.st-mega__item:hover { background: var(--st-tint-violet); }

.st-nav__burger {
    display: none;
    width: 42px; height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--st-line-hi);
    border-radius: 11px;
    background: var(--st-surface);
    cursor: pointer;
}

/* =========================================================================
 * 6. Hero — the video is the top of the page
 * ========================================================================= */
.st-hero {
    position: relative;
    min-height: 700px;
    overflow: hidden;
    background: var(--st-tint-peach);
}
.st-hero__media, .st-hero__media video, .st-hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Two layers, and the split matters: a HORIZONTAL wash protects the
 * left-aligned copy while leaving the right half of the footage untouched, and
 * a VERTICAL one lifts the nav and dissolves the foot of the video into the page
 * ground. A single flat vertical veil (the first attempt) washed the whole
 * frame out to a plain peach rectangle. */
.st-hero__veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(255, 252, 250, .95) 0%,
            rgba(255, 252, 250, .88) 34%,
            rgba(255, 250, 246, .34) 62%,
            rgba(255, 250, 246, 0) 82%),
        linear-gradient(180deg,
            rgba(255, 253, 251, .58) 0%,
            rgba(255, 250, 246, 0) 24%,
            rgba(255, 250, 246, 0) 72%,
            rgba(251, 248, 246, .82) 93%,
            var(--st-ground) 100%);
}
.st-hero__inner {
    position: relative;
    padding-top: calc(var(--st-nav-h) + clamp(56px, 7vw, 92px));
    padding-bottom: 84px;
}
/* Only a hero that actually has footage reserves room for the transport and the
 * provenance chip; a poster-only hero would otherwise end in dead space. */
.st-hero--video .st-hero__inner { padding-bottom: 120px; }
.st-hero__copy { max-width: 830px; }
.st-hero__copy .st-h1 { margin-top: 26px; max-width: 13ch; }
.st-hero__copy .st-lede { margin-top: 24px; max-width: 52ch; }
.st-hero__copy .st-actions { margin-top: 34px; }
.st-hero__note { margin-top: 16px; font-size: 13.5px; color: var(--st-muted); }
.st-hero__note b { color: var(--st-body); font-weight: 600; }

/* --- transport: the only thing that says "this moves" --- */
.st-transport {
    position: absolute;
    left: var(--st-gutter);
    bottom: 30px;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 46px;
    padding-inline: 8px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 10px 26px -14px rgba(56, 33, 71, .4);
}
/* The pill holds two real buttons now -- play/pause, and mute on a video that
 * has an audio track -- because a decorative speaker cannot be clicked. */
.st-transport__btn {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.st-transport__play {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--st-ink);
    display: grid;
    place-items: center;
    flex: none;
}
.st-transport__play svg { width: 11px; height: 11px; fill: #fff; }
.st-transport__track {
    display: block;
    width: 108px; height: 3px;
    border-radius: 2px;
    background: rgba(26, 21, 35, .16);
    position: relative;
    overflow: hidden;
}
.st-transport__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 34%;
    border-radius: 2px;
    background: var(--st-ink);
}
.st-transport__t { font-size: 12px; font-weight: 500; color: var(--st-body); font-variant-numeric: tabular-nums; }
.st-transport__sep { width: 1px; height: 18px; background: rgba(26, 21, 35, .12); }
.st-transport__mute {
    width: 32px; height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    padding: 0;
    background: none;
    color: var(--st-body);
    cursor: pointer;
}
.st-transport__mute svg { width: 16px; height: 16px; }

.st-provenance {
    position: absolute;
    right: var(--st-gutter);
    bottom: 30px;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 34px;
    padding-inline: 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--st-body);
}
.st-provenance img { width: 15px; height: 15px; }

/* =========================================================================
 * 7. The plan pill + the output row it introduces
 * ========================================================================= */
.st-pill-row {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin-top: -26px;
    padding-inline: var(--st-gutter);
}
.st-pill {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 52px;
    padding-inline: 24px;
    border-radius: 999px;
    background: var(--st-surface);
    box-shadow: 0 20px 44px -18px rgba(56, 33, 71, .3);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--st-ink);
}
.st-pill svg { width: 16px; height: 16px; color: var(--st-violet); }
.st-pill__sep { width: 1px; height: 20px; background: var(--st-line); }
.st-pill__soft { color: var(--st-muted); font-weight: 500; }

.st-outputs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: end;
    margin-top: clamp(44px, 5vw, 64px);
}
.st-output { display: flex; flex-direction: column; gap: 12px; }
.st-output__frame {
    border-radius: var(--st-r);
    background: var(--st-surface);
    padding: 8px;
    box-shadow: var(--st-shadow-sm);
}
.st-output__frame img { border-radius: var(--st-r-sm); object-fit: cover; width: 100%; }
.st-output--tall .st-output__frame img { height: 232px; }
.st-output--short .st-output__frame img { height: 176px; }
.st-output__label { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--st-label); }

.st-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px 34px;
    margin-top: clamp(44px, 5vw, 62px);
}
.st-logos__k { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--st-label); }
.st-logos__set { display: flex; align-items: center; gap: 34px; }
.st-logos__set span { font-size: 15px; font-weight: 700; color: #CFC9D6; }

/* =========================================================================
 * 8. The bundle plan
 * ========================================================================= */
.st-plan {
    margin-top: clamp(38px, 4vw, 56px);
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: clamp(20px, 2.5vw, 36px);
    align-items: start;
}
.st-plan__list { display: flex; flex-direction: column; gap: 8px; }
.st-plan__row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--st-line);
    border-radius: var(--st-r);
    background: var(--st-surface);
    text-align: left;
    cursor: pointer;
    transition: border-color .22s var(--st-ease), background .22s var(--st-ease), transform .22s var(--st-ease);
}
.st-plan__row:hover { transform: translateX(3px); border-color: var(--st-line-hi); }
.st-plan__row.is-on { border-color: #D9D2FA; background: var(--st-tint-violet); }
.st-plan__n { font-size: 12px; font-weight: 600; color: var(--st-faint); width: 20px; flex: none; }
.st-plan__row.is-on .st-plan__n { color: var(--st-violet); }
.st-plan__name { font-size: 15px; font-weight: 600; color: var(--st-ink); }
.st-plan__where { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--st-label); margin-top: 3px; }
.st-plan__toggle {
    margin-left: auto;
    width: 36px; height: 20px;
    border-radius: 999px;
    background: #E4DEE9;
    position: relative;
    flex: none;
    transition: background .22s var(--st-ease);
}
.st-plan__toggle::after {
    content: "";
    position: absolute;
    top: 3px; left: 3px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(26, 21, 35, .25);
    transition: transform .22s var(--st-ease);
}
.st-plan__row.is-on .st-plan__toggle { background: var(--st-violet); }
.st-plan__row.is-on .st-plan__toggle::after { transform: translateX(16px); }

.st-plan__panel {
    border: 1px solid var(--st-line);
    border-radius: var(--st-r-lg);
    background: var(--st-surface);
    overflow: hidden;
    box-shadow: var(--st-shadow-sm);
}
.st-plan__panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--st-line);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--st-label);
}
.st-code {
    margin: 0;
    padding: 22px 20px;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.95;
    color: var(--st-body);
    overflow-x: auto;
}
.st-code .k { color: var(--st-violet); font-weight: 600; }
.st-code .c { color: var(--st-faint); }
.st-code .w { color: var(--st-rose); }
.st-plan__note {
    padding: 16px 20px;
    border-top: 1px solid var(--st-line);
    background: var(--st-tint-peach);
    font-size: 13.5px;
    color: var(--st-body);
}
.st-plan__note b { color: var(--st-ink); font-weight: 600; }
.st-plan__note code { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }

/* =========================================================================
 * 9. Auto layout
 * ========================================================================= */
.st-layout {
    margin-top: clamp(38px, 4vw, 56px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2.5vw, 32px);
}
.st-shot {
    display: flex;
    flex-direction: column;
    padding: 22px;
    border: 1px solid var(--st-line);
    border-radius: var(--st-r-lg);
    background: var(--st-surface);
}
.st-shot--after { border-color: #D9D2FA; background: var(--st-tint-violet); }
.st-shot__tag { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--st-label); margin-bottom: 18px; }
.st-shot--after .st-shot__tag { color: var(--st-violet); }
.st-shot__stage {
    position: relative;
    flex: 1;
    min-height: 320px;
    display: grid;
    place-items: center;
    border-radius: var(--st-r);
    background: var(--st-sunk);
    overflow: hidden;
}
.st-shot--after .st-shot__stage {
    background-color: #FFFFFF;
    background-image:
        linear-gradient(to right, rgba(107, 91, 224, .10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(107, 91, 224, .10) 1px, transparent 1px);
    background-size: 32px 32px;
}
.st-shot__stage img { max-height: 330px; width: auto; border-radius: 8px; }
.st-shot__caption { margin-top: 18px; font-size: 14px; color: var(--st-muted); }
.st-shot__caption b { display: block; margin-bottom: 5px; font-size: 15px; font-weight: 600; color: var(--st-ink); }

.st-ratios { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.st-ratio {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border: 1px solid var(--st-line-hi);
    border-radius: 999px;
    background: var(--st-surface);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--st-body);
}
.st-ratio i { display: block; border: 1.5px solid var(--st-violet); border-radius: 2px; opacity: .8; flex: none; }

/* =========================================================================
 * 10. The studio — dark artwork framed as artwork on a light page
 * ========================================================================= */
.st-gallery {
    margin-top: clamp(38px, 4vw, 56px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.st-tile {
    display: block;
    padding: 10px 10px 16px;
    border: 1px solid var(--st-line);
    border-radius: var(--st-r-lg);
    background: var(--st-surface);
    transition: transform .3s var(--st-ease), box-shadow .3s var(--st-ease), border-color .3s var(--st-ease);
}
.st-tile:hover { transform: translateY(-3px); box-shadow: var(--st-shadow); border-color: var(--st-line-hi); }
.st-tile__art {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--st-r);
    overflow: hidden;
    background: var(--st-sunk);
}
.st-tile__art img {
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform .6s var(--st-ease);
}
.st-tile:hover .st-tile__art img { transform: scale(1.07); }
.st-tile__name { margin: 14px 4px 0; font-size: 15px; font-weight: 600; color: var(--st-ink); letter-spacing: -.01em; }
.st-tile__desc { margin: 4px 4px 0; font-size: 13px; line-height: 1.5; color: var(--st-muted); }

/* =========================================================================
 * 11. Automation
 * ========================================================================= */
.st-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 60px);
    align-items: center;
}
.st-canvas {
    border: 1px solid var(--st-line);
    border-radius: var(--st-r-lg);
    background: var(--st-surface);
    box-shadow: var(--st-shadow);
    overflow: hidden;
}
.st-canvas__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--st-line);
    background: var(--st-tint-peach);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--st-body);
}
.st-canvas__dot { width: 9px; height: 9px; border-radius: 50%; background: #E3D9D3; }
.st-canvas__body {
    padding: 22px 20px;
    background-image: radial-gradient(rgba(26, 21, 35, .08) 1px, transparent 1px);
    background-size: 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.st-node {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--st-line);
    border-radius: 14px;
    background: var(--st-surface);
    box-shadow: 0 6px 16px -12px rgba(56, 33, 71, .5);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--st-ink);
}
.st-node__arg { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--st-muted); }
.st-node__mark { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.st-node--trigger { border-color: #D9D2FA; background: var(--st-tint-violet); }
.st-node--branch { border-color: #F6D9DF; background: var(--st-tint-rose); }
.st-node--indent { margin-left: 26px; }
.st-node--indent2 { margin-left: 52px; }
.st-canvas__foot { padding: 14px 20px; border-top: 1px solid var(--st-line); font-size: 12.5px; color: var(--st-muted); }

.st-features { margin-top: 30px; display: flex; flex-direction: column; gap: 22px; }
.st-feature { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; }
.st-feature__icon {
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--st-tint-violet);
    color: var(--st-violet);
}
.st-feature__icon svg { width: 18px; height: 18px; }
.st-feature p { margin-top: 5px; font-size: 14px; line-height: 1.55; color: var(--st-muted); }

/* =========================================================================
 * 12. Cards
 * ========================================================================= */
.st-cards {
    margin-top: clamp(34px, 4vw, 52px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.st-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.st-card {
    padding: 26px 24px 28px;
    border: 1px solid var(--st-line);
    border-radius: var(--st-r-lg);
    background: var(--st-surface);
    transition: transform .3s var(--st-ease), box-shadow .3s var(--st-ease);
}
.st-card:hover { transform: translateY(-2px); box-shadow: var(--st-shadow-sm); }
.st-card__k {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding-inline: 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.st-card__k--violet { background: var(--st-tint-violet); color: #5A49CE; }
.st-card__k--rose   { background: var(--st-tint-rose);   color: var(--st-rose); }
.st-card__k--amber  { background: var(--st-tint-amber);  color: var(--st-gold); }
.st-card__k--peach  { background: var(--st-tint-peach);  color: #C2603A; }
.st-card p { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--st-muted); }
.st-card ul { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.st-card li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--st-body); }
.st-card li::before {
    content: "";
    width: 6px; height: 6px;
    margin-top: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7C67EE, #FF8695);
    flex: none;
}

/* =========================================================================
 * 13. Closing CTA
 * ========================================================================= */
.st-cta { position: relative; overflow: hidden; }
.st-cta__inner {
    position: relative;
    border-radius: var(--st-r-xl);
    padding: clamp(48px, 6vw, 84px) clamp(28px, 5vw, 72px);
    background: linear-gradient(122deg, #F4EFFE 0%, #FBEDF3 46%, #FDF1E6 78%, #FDF7E9 100%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.st-cta__inner .st-h2 { max-width: 17ch; }
.st-cta__inner .st-lede { margin-top: 18px; text-align: center; }
.st-cta__inner .st-actions { margin-top: 32px; justify-content: center; }
.st-cta__fine { margin-top: 18px; font-size: 13px; color: var(--st-muted); }

/* =========================================================================
 * 14. Footer
 * ========================================================================= */
.st-footer {
    border-top: 1px solid var(--st-line);
    background: var(--st-surface);
    padding-top: clamp(48px, 5vw, 72px);
    padding-bottom: 30px;
}
.st-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 40px 28px;
}
.st-footer__about { max-width: 340px; }
.st-footer__about p { margin-top: 16px; font-size: 13.5px; line-height: 1.6; color: var(--st-muted); }
.st-footer__addr { margin-top: 16px; font-size: 12.5px; line-height: 1.7; color: var(--st-muted); font-style: normal; }
.st-footer__coltitle {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--st-label);
    margin-bottom: 16px;
}
.st-footer ul { display: flex; flex-direction: column; gap: 10px; }
.st-footer li a { font-size: 13.5px; color: var(--st-body); transition: color .2s var(--st-ease); }
.st-footer li a:hover { color: var(--st-violet); }

.st-footer__bar {
    margin-top: clamp(36px, 4vw, 56px);
    padding-top: 22px;
    border-top: 1px solid var(--st-line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: 12.5px;
    color: var(--st-muted);
}
.st-social { margin-left: auto; display: flex; gap: 8px; }
.st-social a {
    width: 34px; height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--st-line);
    border-radius: 10px;
    color: var(--st-muted);
    transition: color .2s var(--st-ease), border-color .2s var(--st-ease), background .2s var(--st-ease);
}
.st-social a:hover { color: var(--st-violet); border-color: #D9D2FA; background: var(--st-tint-violet); }
.st-social svg { width: 15px; height: 15px; }

/* =========================================================================
 * 15. Scroll reveal
 * ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
    .st-reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--st-ease), transform .7s var(--st-ease); }
    .st-reveal.is-in { opacity: 1; transform: none; }
    .st-reveal[data-d="1"] { transition-delay: .07s; }
    .st-reveal[data-d="2"] { transition-delay: .14s; }
    .st-reveal[data-d="3"] { transition-delay: .21s; }
    .st-reveal[data-d="4"] { transition-delay: .28s; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation: none !important; transition-duration: .01ms !important; }
}

/* =========================================================================
 * 16. Responsive
 * ========================================================================= */
@media (max-width: 1120px) {
    .st-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .st-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 940px) {
    :root { --st-gutter: 24px; }
    .st-nav__menu { display: none; }
    .st-nav__burger { display: inline-flex; }
    .st-nav.is-open { background: var(--st-ground); border-bottom-color: var(--st-line); }
    .st-nav.is-open .st-nav__menu {
        display: flex;
        position: absolute;
        top: var(--st-nav-h);
        left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin: 0;
        padding: 14px var(--st-gutter) 22px;
        background: var(--st-ground);
        border-bottom: 1px solid var(--st-line);
        max-height: calc(100vh - var(--st-nav-h));
        overflow-y: auto;
    }
    /* Collapsed by default (this used to unconditionally force it open --
       the tap-to-toggle handler in site.js had nothing left to toggle, so
       "Products" looked dead: no navigation, no visible change). Only
       .st-mega-host.is-open reveals it now, same trigger as desktop hover. */
    .st-nav.is-open .st-mega {
        display: none;
        position: static; width: auto; opacity: 1; visibility: visible; transform: none;
        grid-template-columns: 1fr; box-shadow: none; border: 0; background: transparent; padding: 4px 0 10px;
    }
    /* Capped and independently scrollable so opening the ~13-item product
       list can't push Pricing/Blog/Log in out of reach below it. */
    .st-nav.is-open .st-mega-host.is-open .st-mega {
        display: grid;
        max-height: min(45vh, 320px);
        overflow-y: auto;
    }
    .st-plan, .st-layout, .st-split, .st-cards, .st-cards--4 { grid-template-columns: minmax(0, 1fr); }
    .st-outputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-hero { min-height: 0; }
    .st-hero__inner { padding-bottom: 56px; }
    .st-hero--video .st-hero__inner { padding-bottom: 150px; }
    .st-transport { left: var(--st-gutter); bottom: 80px; }
    .st-hero__veil {
        background: linear-gradient(180deg,
            rgba(255, 253, 251, .90) 0%,
            rgba(255, 250, 246, .78) 46%,
            rgba(251, 248, 246, .88) 88%,
            var(--st-ground) 100%);
    }
    .st-provenance { left: var(--st-gutter); right: auto; bottom: 30px; }
}

@media (max-width: 760px) {
    .st-pill {
        flex-wrap: wrap;
        justify-content: center;
        height: auto;
        padding: 14px 20px;
        border-radius: 22px;
        gap: 8px 12px;
        text-align: center;
    }
    .st-pill__sep { display: none; }
}

@media (max-width: 620px) {
    .st-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-output--tall .st-output__frame img,
    .st-output--short .st-output__frame img { height: 150px; }
    .st-footer__grid { grid-template-columns: minmax(0, 1fr); }
    .st-logos { flex-direction: column; }
    .st-logos__set { flex-wrap: wrap; justify-content: center; gap: 20px; }
}

/* =========================================================================
 * 17. Homepage, rebuilt 2026-09-06
 *
 * The page anatomy is the one the owner approved from the canvas: a CENTRED
 * hero with one repeated action, then a full-width video band UNDER it (the
 * photoroom.com pattern -- their hero mp4 sits below the headline, not behind
 * it), then alternating splits, a card grid, a trust band, the journal and a
 * dark closing panel.
 *
 * NO PINK. `--st-tint-peach` / `--st-tint-rose` / `--st-pink` stay defined in
 * section 1 because sections 5-14 still reference them, but nothing added
 * below may use them: the accent here is `--st-violet`, with `--st-amber`
 * allowed once per screen. The coral hero-poster.jpg is deliberately NOT the
 * band's still either -- see `demo_homepage.html`.
 * ========================================================================= */
.st-top {
    padding-top: calc(var(--st-nav-h) + clamp(40px, 4.5vw, 72px));
    text-align: center;
}
.st-top__inner { display: flex; flex-direction: column; align-items: center; }
.st-top .st-h1 {
    font-size: clamp(40px, 5.8vw, 84px);
    line-height: .95;
    letter-spacing: -.045em;
    max-width: 15ch;
}
.st-top .st-lede { margin-top: 26px; max-width: 640px; }
.st-top .st-actions { margin-top: 36px; justify-content: center; }

/* --- the video band --- */
.st-band { margin-top: clamp(32px, 3.5vw, 48px); }
.st-band__frame {
    position: relative;
    aspect-ratio: 2.25 / 1;
    border-radius: var(--st-r-lg);
    overflow: hidden;
    background: #0C1430;
    box-shadow: var(--st-shadow-lg);
}
.st-band__frame > video,
.st-band__frame > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* The transport and the provenance chip are section 6's -- the same control,
 * the same design. Only their anchoring changes: section 6 pinned them to the
 * page gutter of a full-bleed hero; here they sit inside the band's rounded
 * frame, so they hug its corners instead. */
.st-band__frame .st-transport { left: 26px; bottom: 24px; }
.st-band__frame .st-provenance { right: 26px; bottom: 24px; }
/* The launch film is 16:9 with copy near every edge; a cover crop to 2.25:1
 * (or 4:3 on phones) cuts its logo and step rail, so it keeps its own ratio.
 * Doubled class so it outranks the phone rule below. */
.st-band__frame.st-band__frame--video { aspect-ratio: 16 / 9; }
/* A product page's film sits below a headline, so at the full page width it
 * fills a laptop screen top to bottom; a narrower, centred frame leaves air. */
.st-band__frame--film { max-width: 960px; margin-inline: auto; }
/* Its step rail runs along the bottom-left; the bottom-right stays empty. */
.st-band__frame--video .st-transport { left: auto; right: 26px; }
@media (max-width: 760px) {
    /* A ~200px-tall frame: keep only the pause button (WCAG 2.2.2). */
    .st-band__frame--video .st-transport { right: 10px; bottom: 10px; height: auto; padding: 4px; gap: 4px; }
    .st-band__frame--video .st-transport__btn > :not(.st-transport__play) { display: none; }
    .st-band__frame--video .st-transport__sep { display: none; }
}

/* --- centred thesis line --- */
.st-thesis { display: flex; flex-direction: column; align-items: center; text-align: center; }
.st-thesis .st-h2 { max-width: 17ch; }
.st-thesis .st-lede { margin-top: 24px; max-width: 720px; }

/* --- alternating splits --- */
.st-duo { display: flex; align-items: center; gap: clamp(32px, 4vw, 56px); }
.st-duo--rev { flex-direction: row-reverse; }
.st-duo__copy { width: 480px; flex: none; }
.st-duo__copy .st-h2 { margin-top: 16px; font-size: clamp(28px, 3.1vw, 44px); }
.st-duo__copy p { margin-top: 20px; font-size: 17px; line-height: 1.65; color: var(--st-body); }
.st-duo__copy .st-btn { margin-top: 28px; }
/* Short fact lists inside a split (2026-09-19): the paragraph says what it is,
 * the list says what you get — easier to scan than one long paragraph. */
.st-ticks { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; padding: 0; }
.st-ticks li { display: flex; gap: 12px; font-size: 15.5px; line-height: 1.55; color: var(--st-body); }
.st-ticks li::before {
    content: "";
    width: 7px; height: 7px;
    margin-top: 9px;
    border-radius: 50%;
    background: var(--st-violet);
    flex: none;
}
.st-ticks b { color: var(--st-ink); font-weight: 600; }
.st-duo__copy .st-ticks + p { margin-top: 18px; }
.st-duo__art { position: relative; flex: 1 1 auto; min-width: 0; }
.st-duo__art > img, .st-duo__art > video { width: 100%; height: 420px; object-fit: cover; border-radius: 20px; display: block; }
.st-duo__art > .st-duo__campaign-art { height: auto; }
/* A real UI screenshot: never crop it, and give its white edge a frame. */
.st-duo__art > .st-duo__shot { height: auto; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 18px 40px -24px rgba(40,20,80,.35); }
.st-duo__art .st-transport { left: 16px; bottom: 16px; }
.st-duo__badge {
    position: absolute;
    left: 22px;
    top: 22px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    height: 46px;
    padding-inline: 18px;
    border-radius: 14px;
    background: var(--st-surface);
    box-shadow: 0 16px 40px -16px rgba(56, 33, 71, .5);
    font-size: 15px;
    font-weight: 600;
    color: var(--st-ink);
    white-space: nowrap;
}
.st-duo__badge svg { width: 17px; height: 17px; color: var(--st-violet); }
.st-duo__badge span { color: var(--st-label); font-weight: 500; }
.st-duo__sizes {
    position: absolute;
    right: 22px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding-inline: 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(26, 21, 35, .08);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--st-body);
    white-space: nowrap;
}

/* --- the label used above every section head --- */
.st-lab {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--st-label);
}

/* --- tool grid --- */
.st-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 48px; }
.st-grid3 img { width: 100%; height: 300px; object-fit: cover; border-radius: 20px; display: block; }
.st-grid3 h3 { margin-top: 20px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--st-ink); }
.st-grid3 p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--st-body); }

/* --- trust band --- */
.st-trust { background: var(--st-sunk); padding-block: clamp(64px, 7vw, 120px); }
.st-trust__wrap { display: flex; align-items: flex-start; gap: clamp(32px, 5vw, 80px); }
.st-trust__head { width: 400px; flex: none; }
.st-trust__head .st-h2 { margin-top: 16px; font-size: clamp(28px, 3.2vw, 46px); }
.st-trust__head p { margin-top: 20px; font-size: 17px; line-height: 1.65; color: var(--st-body); }
.st-trust__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; flex: 1 1 auto; min-width: 0; }
.st-trust__card { background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 20px; padding: 30px; }
.st-trust__card svg { width: 22px; height: 22px; color: var(--st-violet); }
.st-trust__card h3 { margin-top: 18px; font-size: 17.5px; font-weight: 600; letter-spacing: -.01em; color: var(--st-ink); }
.st-trust__card p { margin-top: 9px; font-size: 15px; line-height: 1.65; color: var(--st-body); }

/* --- journal --- */
.st-journal__head { display: flex; align-items: flex-end; gap: 40px; }
.st-journal__head .st-h2 { margin-top: 16px; font-size: clamp(28px, 3.2vw, 46px); }
.st-post { border: 1px solid var(--st-line); border-radius: 22px; overflow: hidden; background: var(--st-surface); }
.st-post__art { height: 168px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.st-post__art img { width: 100%; height: 100%; object-fit: cover; }
.st-post__art svg { width: 46px; height: 46px; }
.st-post__body { padding: 24px 24px 28px; }
.st-post__body h3 {
    margin-top: 10px;
    font-family: var(--st-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--st-ink);
}
.st-post__body p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--st-body); }

/* --- dark closing panel --- */
.st-panel {
    border-radius: var(--st-r-xl);
    background: var(--st-ink);
    padding: clamp(56px, 6vw, 88px) 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.st-panel .st-h2 { color: #FFFFFF; max-width: 18ch; }
.st-panel p { margin-top: 22px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: rgba(255,255,255,.72); max-width: 620px; }
.st-panel .st-actions { margin-top: 36px; justify-content: center; }
.st-panel .st-btn--ghost { --btn-bg: transparent; --btn-fg: #FFFFFF; --btn-bd: rgba(255,255,255,.28); }
.st-panel__fine { margin-top: 18px; font-size: 13.5px; color: rgba(255,255,255,.55); }

@media (max-width: 1080px) {
    .st-duo, .st-trust__wrap { flex-direction: column; align-items: stretch; }
    .st-duo--rev { flex-direction: column; }
    .st-duo__copy, .st-trust__head { width: auto; }
    .st-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .st-band__frame { aspect-ratio: 4 / 3; }
    .st-band__frame .st-provenance { display: none; }
    .st-grid3, .st-trust__grid { grid-template-columns: minmax(0, 1fr); }
    .st-journal__head { flex-direction: column; align-items: flex-start; gap: 18px; }
    .st-duo__art > img, .st-duo__art > video { height: 300px; }
}

/* =========================================================================
 * 18. The rest of the public site, 2026-09-06
 *
 * Contact, pricing, the six auth screens and the journal, moved off
 * base/base.html onto this system. Same rules as section 17: violet is the
 * only action colour, amber appears once, and nothing here touches the
 * peach/rose tints.
 *
 * The auth screens deliberately keep base_site's full navigation rather than
 * the reduced logo-only bar the canvas drew: there is no block in
 * base_site.html to suppress the header, and a second base template for six
 * short pages is not worth the divergence.
 * ========================================================================= */

/* --- page head, used by every page below --- */
.st-page { padding-top: calc(var(--st-nav-h) + clamp(46px, 5vw, 92px)); }
.st-page--centre { display: flex; flex-direction: column; align-items: center; text-align: center; }
.st-page--centre .st-lede { margin-top: 24px; }

/* --- forms --- */
.st-field { display: block; margin-top: 20px; }
.st-field:first-child { margin-top: 0; }
.st-field > label,
.st-field__aside > label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--st-ink);
    margin-bottom: 8px;
}
.st-input, .st-textarea, .st-select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
    border: 1px solid var(--st-line-hi);
    border-radius: 12px;
    background: var(--st-surface);
    font-family: inherit;
    font-size: 15px;
    color: var(--st-ink);
    transition: border-color .2s var(--st-ease), box-shadow .2s var(--st-ease);
}
.st-input, .st-select { height: 50px; }
.st-textarea { padding: 14px 16px; min-height: 128px; line-height: 1.6; resize: vertical; }
.st-input::placeholder, .st-textarea::placeholder { color: var(--st-faint); }
.st-input:focus, .st-textarea:focus, .st-select:focus {
    outline: none;
    border-color: var(--st-violet);
    box-shadow: 0 0 0 3px var(--st-violet-soft);
}
.st-field__err { margin-top: 7px; font-size: 13px; color: var(--st-rose); }
.st-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.st-form__row .st-field { margin-top: 0; }
.st-form .st-btn { margin-top: 26px; }

.st-usecases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.st-usecases__item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border: 1px solid var(--st-line-hi);
    border-radius: var(--st-r-sm);
    background: var(--st-sunk);
    font-size: 14px;
    font-weight: 500;
    color: var(--st-ink);
    cursor: pointer;
    transition: border-color .2s var(--st-ease), background .2s var(--st-ease);
}
.st-usecases__item:has(input:checked) { border-color: var(--st-violet); background: var(--st-violet-soft); }
.st-usecases__item input { width: 16px; height: 16px; flex: none; accent-color: var(--st-violet); }
@media (max-width: 560px) { .st-usecases { grid-template-columns: 1fr; } }

/* --- contact --- */
.st-contact { display: flex; align-items: flex-start; gap: clamp(32px, 5vw, 80px); }
.st-contact__copy { width: 470px; flex: none; padding-top: 8px; }
.st-contact__copy .st-h1 { margin-top: 18px; font-size: clamp(34px, 4vw, 54px); line-height: 1.02; }
.st-contact__copy > p { margin-top: 22px; font-size: 18px; line-height: 1.65; color: var(--st-body); }
.st-contact__points { display: flex; flex-direction: column; gap: 18px; margin-top: 34px; }
.st-contact__point { display: flex; align-items: flex-start; gap: 13px; }
.st-contact__point svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--st-violet); }
.st-contact__point p { font-size: 15.5px; line-height: 1.6; color: var(--st-body); }
.st-contact__point b { color: var(--st-ink); font-weight: 600; }
.st-contact__form {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--st-surface);
    border: 1px solid var(--st-line);
    border-radius: 26px;
    padding: clamp(26px, 3vw, 40px);
    box-shadow: 0 20px 44px -30px rgba(56, 33, 71, .4);
}
.st-contact__note { margin-top: 14px; font-size: 13.5px; color: var(--st-muted); }

/* --- pricing --- */
.st-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; margin-top: 56px; }
.st-plan-card {
    background: var(--st-surface);
    border: 1px solid var(--st-line);
    border-radius: 26px;
    padding: 34px;
}
.st-plan-card--lead { background: var(--st-ink); border-color: var(--st-ink); box-shadow: 0 30px 70px -34px rgba(56, 33, 71, .6); }
.st-plan-card__name {
    font-family: var(--st-display);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--st-ink);
}
.st-plan-card__for { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--st-body); }
.st-plan-card__price { display: flex; align-items: baseline; gap: 7px; margin-top: 24px; }
.st-plan-card__price b { font-family: var(--st-display); font-size: 52px; font-weight: 600; line-height: 1; letter-spacing: -.04em; color: var(--st-ink); }
.st-plan-card__price span { font-size: 15px; color: var(--st-muted); }
.st-plan-card__rule { height: 1px; background: var(--st-line); margin-block: 26px; }
.st-plan-card ul { display: flex; flex-direction: column; gap: 13px; }
.st-plan-card li { font-size: 15.5px; color: var(--st-body); }
.st-plan-card li b { color: var(--st-ink); font-weight: 600; }
.st-plan-card .st-btn { display: flex; width: 100%; box-sizing: border-box; height: 50px; margin-top: 30px; }
.st-plan-card--lead .st-plan-card__name,
.st-plan-card--lead .st-plan-card__price b,
.st-plan-card--lead li b { color: #FFFFFF; }
.st-plan-card--lead .st-plan-card__for,
.st-plan-card--lead .st-plan-card__price span,
.st-plan-card--lead li { color: rgba(255, 255, 255, .66); }
.st-plan-card--lead .st-plan-card__rule { background: rgba(255, 255, 255, .15); }
.st-plan-card--lead .st-btn { --btn-bg: #FFFFFF; --btn-fg: var(--st-ink); --btn-bd: transparent; }
.st-plan-tag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    margin-left: 10px;
    padding-inline: 10px;
    border-radius: 999px;
    background: var(--st-amber);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--st-ink);
    vertical-align: middle;
}
.st-volume {
    margin-top: 28px;
    border: 1px solid var(--st-line);
    border-radius: 26px;
    background: var(--st-sunk);
    padding: 40px 44px;
    display: flex;
    align-items: center;
    gap: 40px;
}
.st-volume :is(h2, h3) { font-family: var(--st-display); font-size: 24px; font-weight: 600; letter-spacing: -.025em; color: var(--st-ink); }
.st-volume p { margin-top: 8px; max-width: 62ch; font-size: 17px; line-height: 1.65; color: var(--st-body); }
.st-volume .st-btn { margin-left: auto; flex: none; }

/* --- auth --- */
.st-auth { position: relative; overflow: hidden; }
.st-auth::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(58% 46% at 14% 6%, var(--st-tint-violet) 0%, rgba(239, 236, 253, 0) 62%),
        radial-gradient(52% 44% at 88% 92%, var(--st-tint-amber) 0%, rgba(253, 246, 231, 0) 64%);
    pointer-events: none;
}
.st-auth__inner { position: relative; display: flex; justify-content: center; padding-bottom: clamp(64px, 7vw, 110px); }
.st-auth__col { width: 100%; max-width: 466px; }
.st-auth__col--wide { max-width: 478px; }
.st-auth__head { text-align: center; }
.st-auth__head h1 { font-family: var(--st-display); font-size: clamp(28px, 3vw, 38px); font-weight: 600; line-height: 1.05; letter-spacing: -.035em; color: var(--st-ink); }
.st-auth__head p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--st-body); }
.st-authcard {
    margin-top: 30px;
    background: var(--st-surface);
    border: 1px solid var(--st-line);
    border-radius: 26px;
    padding: clamp(26px, 3vw, 34px);
    box-shadow: 0 24px 56px -34px rgba(56, 33, 71, .45);
}
.st-authcard .st-btn { display: flex; width: 100%; box-sizing: border-box; height: 52px; }
.st-oauth { display: flex; align-items: center; justify-content: center; gap: 11px; height: 52px; border: 1px solid var(--st-line-hi); border-radius: 999px; background: var(--st-surface); font-size: 15.5px; font-weight: 600; color: var(--st-ink); }
.st-oauth:hover { border-color: var(--st-violet); background: var(--st-violet-soft); }
.st-oauth svg { width: 18px; height: 18px; }
.st-or { display: flex; align-items: center; gap: 14px; margin-block: 24px; }
.st-or::before, .st-or::after { content: ""; flex-grow: 1; height: 1px; background: var(--st-line); }
.st-or span { font-size: 13px; color: var(--st-label); }
.st-auth__foot { margin-top: 22px; font-size: 15px; text-align: center; color: var(--st-body); }
.st-auth__foot a { font-weight: 600; color: var(--st-violet); }
.st-auth__fine { margin-top: 14px; font-size: 13px; text-align: center; color: var(--st-muted); }
.st-field__aside { display: flex; align-items: baseline; }
.st-field__aside a { margin-left: auto; font-size: 13.5px; font-weight: 500; color: var(--st-muted); }
.st-authmark {
    display: grid;
    place-items: center;
    width: 62px; height: 62px;
    border-radius: 20px;
    background: var(--st-violet-soft);
    margin-inline: auto;
}
.st-authmark svg { width: 28px; height: 28px; color: var(--st-violet); }
.st-authmark--done { background: var(--st-tint-amber); }
.st-authmark--done svg { color: var(--st-gold); }
.st-check { display: flex; align-items: center; gap: 18px; margin-top: 22px; border: 1px solid var(--st-line); border-radius: 14px; background: var(--st-sunk); padding: 18px 20px; }
.st-check b { display: block; font-size: 13.5px; font-weight: 600; color: var(--st-ink); }
.st-check p { margin-top: 2px; font-size: 14px; color: var(--st-body); }
.st-check .st-input { margin-left: auto; width: 96px; flex: none; text-align: center; }

/* --- journal --- */
.st-feature-post {
    display: flex;
    gap: 44px;
    align-items: center;
    border: 1px solid var(--st-line);
    border-radius: 28px;
    background: var(--st-surface);
    padding: 22px;
    box-shadow: 0 24px 56px -38px rgba(56, 33, 71, .4);
    margin-top: 56px;
}
.st-feature-post img { width: 620px; height: 380px; object-fit: cover; border-radius: 20px; flex: none; display: block; }
.st-feature-post__body { padding-right: 22px; min-width: 0; }
.st-feature-post__meta { display: flex; align-items: center; gap: 10px; }
.st-feature-post__meta time { font-size: 13.5px; color: var(--st-label); }
.st-feature-post h2 { margin-top: 16px; font-family: var(--st-display); font-size: clamp(26px, 2.8vw, 38px); font-weight: 600; line-height: 1.08; letter-spacing: -.032em; color: var(--st-ink); }
.st-feature-post p { margin-top: 14px; max-width: 46ch; font-size: 17px; line-height: 1.65; color: var(--st-body); }
.st-badge {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding-inline: 12px;
    border-radius: 999px;
    background: var(--st-violet-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--st-violet);
}
.st-postgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 72px; }
.st-postgrid img { width: 100%; height: 240px; object-fit: cover; border-radius: 20px; display: block; }
.st-postgrid time { display: block; margin-top: 18px; font-size: 13.5px; color: var(--st-label); }
.st-postgrid h3 { margin-top: 8px; font-family: var(--st-display); font-size: 23px; font-weight: 600; line-height: 1.14; letter-spacing: -.024em; color: var(--st-ink); }
.st-postgrid p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--st-body); }
.st-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 64px; }
.st-pager a, .st-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding-inline: 12px;
    border: 1px solid var(--st-line-hi);
    border-radius: 12px;
    background: var(--st-surface);
    font-size: 15px;
    font-weight: 600;
    color: var(--st-body);
}
.st-pager .is-here { background: var(--st-ink); border-color: var(--st-ink); color: #FFFFFF; }

/* --- one article --- */
.st-article__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.st-article__head h1 { margin-top: 22px; font-family: var(--st-display); font-size: clamp(32px, 4vw, 56px); font-weight: 600; line-height: 1.02; letter-spacing: -.04em; color: var(--st-ink); max-width: 19ch; }
.st-article__head .st-lede { margin-top: 24px; max-width: 660px; }
.st-article__head time { margin-top: 22px; font-size: 14px; color: var(--st-label); }
.st-article__hero { width: min(1100px, 100%); margin: 48px auto 0; }
.st-article__hero img { width: 100%; max-height: 480px; object-fit: cover; border-radius: 26px; display: block; }
.st-article__body { width: min(700px, 100%); margin: 64px auto 0; }
.st-article__body > * + * { margin-top: 22px; }
.st-article__body p, .st-article__body li { font-size: 18.5px; line-height: 1.75; color: #3D3752; }
.st-article__body h2 { margin-top: 46px; font-family: var(--st-display); font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; line-height: 1.14; letter-spacing: -.028em; color: var(--st-ink); }
.st-article__body h3 { margin-top: 36px; font-family: var(--st-display); font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -.022em; color: var(--st-ink); }
.st-article__body ul, .st-article__body ol { padding-left: 22px; list-style: disc; }
.st-article__body ol { list-style: decimal; }
.st-article__body li { margin-bottom: 10px; }
.st-article__body a { color: var(--st-violet); text-decoration: underline; text-underline-offset: 3px; }
.st-article__body img { width: 100%; height: auto; border-radius: 18px; margin-block: 40px; }
.st-article__body figcaption { margin-top: 12px; font-size: 14px; color: var(--st-label); }
.st-article__body blockquote {
    margin-top: 40px;
    padding: 4px 0 4px 26px;
    border-left: 3px solid var(--st-violet);
}
.st-article__body blockquote p { font-family: var(--st-display); font-size: 25px; font-weight: 600; line-height: 1.32; letter-spacing: -.02em; color: var(--st-ink); }
.st-article__body table { width: 100%; border-collapse: collapse; font-size: 16px; }
.st-article__body th, .st-article__body td { padding: 12px 14px; border-bottom: 1px solid var(--st-line); text-align: left; }
.st-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--st-muted); }
.st-back svg { width: 14px; height: 14px; }

@media (max-width: 1080px) {
    .st-contact, .st-volume { flex-direction: column; align-items: stretch; }
    .st-contact__copy { width: auto; }
    .st-volume .st-btn { margin-left: 0; align-self: flex-start; }
    .st-plans { grid-template-columns: minmax(0, 1fr); }
    .st-feature-post { flex-direction: column; align-items: stretch; }
    .st-feature-post img { width: 100%; height: 300px; }
    .st-feature-post__body { padding-right: 0; }
    .st-postgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .st-form__row { grid-template-columns: minmax(0, 1fr); }
    .st-postgrid { grid-template-columns: minmax(0, 1fr); }
}

/* --- the contact page's photo drop (section 18 continued) --- */
.st-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.st-drop {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 26px;
    border: 1px dashed #C9BEE8;
    border-radius: 16px;
    background: #F8F6FE;
    cursor: pointer;
    transition: border-color .2s var(--st-ease), background .2s var(--st-ease);
}
.st-drop:hover { border-color: var(--st-violet); background: var(--st-violet-soft); }
.st-drop > svg { width: 26px; height: 26px; flex: none; color: var(--st-violet); }
.st-drop b { display: block; font-size: 15px; font-weight: 600; color: var(--st-ink); }
.st-drop span span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.6; color: var(--st-body); }
.st-visually-hidden:focus-visible + .st-drop,
.st-drop:has(+ .st-visually-hidden:focus-visible) { border-color: var(--st-violet); box-shadow: 0 0 0 3px var(--st-violet-soft); }

/* --- article byline (section 18 continued) --- */
.st-byline { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 14px; color: var(--st-label); }
.st-byline b { font-weight: 600; color: var(--st-body); }
.st-byline__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--st-faint); }
.st-article__head .st-badge { margin-top: 18px; }
.st-article__hero video { width: 100%; max-height: 480px; border-radius: 26px; display: block; background: #0C1430; }
.st-article__hero--embed { aspect-ratio: 16 / 9; border-radius: 26px; overflow: hidden; background: #0C1430; }
.st-article__hero--embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* =========================================================================
 * 19. Platform pages — /products/ and /products/<slug>/
 * ========================================================================= */
.st-proof img { width: 100%; height: clamp(280px, 36vw, 520px); object-fit: cover; border-radius: var(--st-r-lg); display: block; }

.st-enhancer { margin: 0; overflow: hidden; border-radius: var(--st-r-lg); box-shadow: var(--st-shadow-lg); background: #f7f3f0; }
.st-enhancer img { display: block; width: 100%; height: auto; object-fit: contain; }

/* A before/after pair as ONE frame split by a hard seam. Two images side by
 * side with a gap read as two pictures; a seam reads as one picture changing. */
.st-seam {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: clamp(280px, 36vw, 520px);
    border-radius: var(--st-r-lg);
    overflow: hidden;
    box-shadow: var(--st-shadow-lg);
    margin: 0;
}
.st-seam__half { position: relative; overflow: hidden; }
.st-seam__half img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-seam__half + .st-seam__half { border-left: 2px solid var(--st-surface); }
.st-seam figcaption {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    justify-content: space-between;
    padding: 16px 22px;
    background: linear-gradient(180deg, rgba(12, 20, 48, 0), rgba(12, 20, 48, .72));
    font-size: 12.5px;
    font-weight: 600;
    color: #FFFFFF;
}

/* Product pages (2026-09-19): one rhythm between sections. Two stacked
 * paddings (80px under the picture + 124px over the text) made ~200px gaps;
 * a section that follows another now keeps only the previous one's bottom. */
.st-pp > .st-section { padding-block: clamp(44px, 5vw, 72px); }
.st-pp > .st-section + .st-section { padding-top: 0; }
.st-pp > .st-section:last-child { padding-bottom: clamp(72px, 8vw, 124px); }
.st-pp .st-card .st-link { display: inline-flex; }

.st-prose { max-width: 70ch; }
.st-prose p { font-size: 18px; line-height: 1.7; color: var(--st-body); }
/* Every block after the first gets air, not only p + p: h2 -> p and ul -> p
 * sat flush (2026-09-24 audit). Headings and lists keep their own margins. */
.st-prose > * + * { margin-top: 18px; }
.st-prose h2 { margin-top: 40px; font-family: var(--st-display); font-size: clamp(26px, 2.8vw, 40px); font-weight: 600; line-height: 1.08; letter-spacing: -.032em; color: var(--st-ink); }
.st-prose h3 { margin-top: 30px; font-size: 20px; font-weight: 600; color: var(--st-ink); }
.st-prose ul, .st-prose ol { margin-top: 16px; padding-left: 22px; list-style: disc; }
.st-prose li { font-size: 18px; line-height: 1.7; color: var(--st-body); margin-bottom: 8px; }
.st-prose a { color: var(--st-violet); text-decoration: underline; text-underline-offset: 3px; }

.st-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 52px; }
.st-steps__n {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 13px;
    background: var(--st-violet-soft);
    font-family: var(--st-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--st-violet);
}
.st-steps h3 { margin-top: 18px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--st-ink); }
.st-steps p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--st-body); }

.st-faq__list { margin-top: 34px; border-top: 1px solid var(--st-line); max-width: 860px; }
.st-faq details { border-bottom: 1px solid var(--st-line); }
.st-faq summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-block: 22px;
    font-size: 18px;
    font-weight: 600;
    color: var(--st-ink);
    cursor: pointer;
    list-style: none;
}
.st-faq summary::-webkit-details-marker { display: none; }
.st-faq summary::after {
    content: "";
    margin-left: auto;
    width: 10px; height: 10px;
    border-right: 2px solid var(--st-violet);
    border-bottom: 2px solid var(--st-violet);
    transform: rotate(45deg);
    transition: transform .22s var(--st-ease);
    flex: none;
}
.st-faq details[open] summary::after { transform: rotate(-135deg); }
.st-faq details p { padding-bottom: 24px; max-width: 68ch; font-size: 17px; line-height: 1.7; color: var(--st-body); }

.st-hubgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 32px; }
.st-hubgrid img, .st-hubgrid video { width: 100%; height: 260px; object-fit: cover; border-radius: 20px; display: block; }
.st-hubgrid h3 { margin-top: 20px; font-family: var(--st-display); font-size: 24px; font-weight: 600; line-height: 1.12; letter-spacing: -.024em; color: var(--st-ink); }
.st-hubgrid__blurb { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--st-body); }
.st-hubgrid .st-link { margin-top: 16px; }

@media (max-width: 1080px) {
    .st-steps, .st-hubgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .st-steps, .st-hubgrid { grid-template-columns: minmax(0, 1fr); }
    .st-seam { height: 280px; }
}

/* =========================================================================
 * 20. Public site pass, 2026-09-18 (PUBLIC_SITE_PLAN.md, SEO_UX_RULES.md)
 *
 * Built only from the tokens and component language above: the grouped
 * Products menu, the language switcher, breadcrumbs, the product-page spec
 * list, and the pricing page's "best for / typical month / what each plan
 * makes" additions. No new colours, no new type.
 * ========================================================================= */

/* --- Products mega menu: one column per group (Photo / Video / Workflow) --- */
.st-mega__col { display: flex; flex-direction: column; min-width: 0; }
.st-mega__item--more { margin-top: 6px; color: var(--st-violet); font-weight: 600; }

/* --- language switcher: a <details> dropdown, no JS needed --- */
.st-lang { position: relative; }
.st-lang summary {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding-inline: 12px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--st-body);
    cursor: pointer;
    list-style: none;
}
.st-lang summary::-webkit-details-marker { display: none; }
.st-lang summary:hover { background: rgba(26, 21, 35, .05); color: var(--st-ink); }
.st-lang ul {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 170px;
    padding: 8px;
    border: 1px solid var(--st-line);
    border-radius: var(--st-r);
    background: var(--st-surface);
    box-shadow: var(--st-shadow);
    z-index: 5;
}
.st-lang a { display: block; padding: 9px 12px; border-radius: 10px; font-size: 14.5px; color: var(--st-ink); }
.st-lang a:hover { background: var(--st-tint-violet); }
.st-lang a[aria-current] { font-weight: 600; color: var(--st-violet); }
.st-lang button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 14.5px; color: var(--st-ink); cursor: pointer; }
.st-lang button:hover { background: var(--st-tint-violet); }
.st-lang button[aria-current] { font-weight: 600; color: var(--st-violet); }

.st-footer__grid { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); }
.st-footer__langs { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.st-footer__langs a { color: var(--st-muted); }
.st-footer__langs a:hover, .st-footer__langs a[aria-current] { color: var(--st-violet); }

/* --- product pages --- */
.st-crumbs { display: flex; gap: 10px; align-items: center; font-size: 13px; font-weight: 600; color: var(--st-muted); }
.st-crumbs a { color: var(--st-violet); }

.st-specs {
    margin-top: 34px;
    max-width: 860px;
    border-top: 1px solid var(--st-line);
}
.st-specs > div {
    display: grid;
    grid-template-columns: minmax(150px, 240px) minmax(0, 1fr);
    gap: 8px 32px;
    padding-block: 18px;
    border-bottom: 1px solid var(--st-line);
}
.st-specs dt { font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--st-ink); }
.st-specs dd { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--st-body); }
.st-specs__note { margin-top: 18px; font-size: 14.5px; color: var(--st-muted); }
.st-specs__note a { color: var(--st-violet); text-decoration: underline; text-underline-offset: 3px; }

.st-hubgroup + .st-hubgroup { margin-top: clamp(56px, 6vw, 88px); }

/* --- pricing additions --- */
.st-plan-card__best { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--st-muted); }
.st-plan-card--lead .st-plan-card__best { color: rgba(255, 255, 255, .7); }
.st-plan-card__typical {
    margin-top: 22px;
    padding: 16px 18px;
    border-radius: var(--st-r-sm);
    background: var(--st-sunk);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--st-body);
}
.st-plan-card__typical b { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--st-label); }
.st-plan-card--lead .st-plan-card__typical { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .78); }
.st-plan-card--lead .st-plan-card__typical b { color: rgba(255, 255, 255, .6); }

.st-usage-wrap { margin-top: 34px; overflow-x: auto; border: 1px solid var(--st-line); border-radius: var(--st-r-lg); background: var(--st-surface); }
.st-usage { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.st-usage caption { caption-side: bottom; padding: 14px 20px; text-align: left; font-size: 13.5px; color: var(--st-muted); }
.st-usage th, .st-usage td { padding: 14px 20px; border-bottom: 1px solid var(--st-line); text-align: right; white-space: nowrap; }
.st-usage th:first-child, .st-usage td:first-child { text-align: left; white-space: normal; }
.st-usage thead th { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--st-label); background: var(--st-sunk); }
.st-usage tbody th { font-weight: 500; color: var(--st-ink); }
.st-usage tbody th span { display: block; font-size: 12.5px; font-weight: 400; color: var(--st-muted); }
.st-usage td { font-variant-numeric: tabular-nums; color: var(--st-body); }
.st-usage tbody tr:last-child th, .st-usage tbody tr:last-child td { border-bottom: 0; }
.st-usage td.is-lead, .st-usage th.is-lead { background: var(--st-tint-violet); color: var(--st-ink); }

@media (max-width: 1080px) {
    .st-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .st-footer__about { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 940px) {
    .st-nav.is-open .st-mega__col + .st-mega__col { margin-top: 10px; }
    .st-nav__right .st-lang { display: none; }
}
@media (max-width: 700px) {
    .st-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-specs > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
.st-panel__fine a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
/* The hero H1 now carries the keyword sentence rather than a two-word slogan
 * (SEO_UX_RULES.md §2.6); balanced lines keep it from breaking at a hyphen or
 * leaving one word alone on the last line. */
.st-h1, .st-h2 { text-wrap: balance; }
.st-top .st-h1 { max-width: 20ch; font-size: clamp(38px, 5.2vw, 76px); }
.st-nav__right .st-nav__link { white-space: nowrap; }
@media (max-width: 420px) {
    .st-nav__right { gap: 4px; }
    .st-nav__right .st-btn { padding-inline: 14px; }
}
/* Mobile header: longer languages ("Registrieren", "Iniciar sesión") do not
 * fit beside Log in and the burger at phone width, so Log in and the language
 * list move into the open menu there. */
.st-nav__link--mobile { display: none; }
@media (max-width: 940px) {
    .st-nav.is-open .st-nav__link--mobile { display: flex; }
    .st-nav__langs { flex-wrap: wrap; gap: 6px; padding: 12px 10px 0; border-top: 1px solid var(--st-line); margin-top: 8px; }
    .st-nav__langs a { padding: 6px 10px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--st-body); }
    .st-nav__langs a[aria-current] { background: var(--st-tint-violet); color: var(--st-violet); }
}
@media (max-width: 560px) {
    .st-nav__right .st-nav__login { display: none; }
}
/* Button labels are longer in German, French and Dutch than in English; at
 * phone width a label wraps inside its pill instead of pushing the page wider. */
@media (max-width: 560px) {
    .st-btn { white-space: normal; height: auto; min-height: 46px; padding-block: 11px; text-align: center; max-width: 100%; line-height: 1.25; }
}

/* A button (or row of buttons) that follows running text needs air above it;
 * without this a CTA under a list sat flush against the last item (home
 * managed-service block, 2026-09-24 spacing audit). Zero specificity, so any
 * section that sets its own margin still wins. */
:where(p, ul, ol, .st-ticks) + :where(.st-btn, .st-actions) { margin-top: 28px; }
:where(.st-lab) + :is(h2) { margin-top: 14px; }
:where(.st-h2) + :is(p, ul) { margin-top: 20px; }  /* (0,0,1): must outrank the :where(body.st-site) reset at the top */
/* A product page's hero picture follows its headline as closely as a film
 * band does (.st-band), instead of a full section's 80px top padding. */
.st-page + .st-section--tight { padding-top: clamp(32px, 3.5vw, 48px); }

/* Touch screens (2026-09-24 mobile audit): the footer's language row was 20px
 * tall, its links 20px, the social squares 34px, the breadcrumb 21px and the
 * video transport 30px -- below the 44px a thumb needs. Hit areas grow; the
 * negative margins keep every visible layout exactly where it was. */
@media (pointer: coarse) {
    .st-footer ul { gap: 0; }
    .st-footer li a, .st-footer__langs a { display: inline-block; padding-block: 12px; }
    .st-footer__langs { row-gap: 0; }
    .st-social a { width: 44px; height: 44px; }
    .st-crumbs a { display: inline-block; padding-block: 12px; margin-block: -12px; }
    .st-link { padding-block: 10px; margin-bottom: -10px; }
    .st-transport__btn, .st-transport__mute { padding: 7px; margin: -7px; box-sizing: content-box; }
}