/* --------------------------------------------------------------------------
   0 · Self-hosted webfonts — served from this server, so there is no
   round trip to Google and no late swap that reflows the page.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/CormorantGaramond-600-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/CormorantGaramond-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/Inter-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/Inter-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/Inter-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/Inter-800.woff2') format('woff2');
}

/* Metric-matched stand-ins.
   Until a webfont has loaded the browser draws with a local font, and a
   locally installed font has different proportions — Georgia sets the same
   sentence 33% wider than Cormorant Garamond. That is what made headlines
   appear too large and then visibly shrink.
   These faces re-scale the local font so it occupies exactly the space the
   real one will, using values measured from the actual font files. Declaring
   the weight on the face also stops the browser from faking a bold, which is
   what made the first paint look heavy and the final text look thin. */
@font-face {
    font-family: 'Cormorant Fallback';
    src: local('Georgia'), local('Times New Roman'), local('Times');
    font-weight: 600;
    font-style: normal;
    size-adjust: 75.45%;
    ascent-override: 121.94%;
    descent-override: 38.44%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Cormorant Fallback';
    src: local('Georgia Italic'), local('Georgia'), local('Times New Roman');
    font-weight: 600;
    font-style: italic;
    size-adjust: 75.45%;
    ascent-override: 121.94%;
    descent-override: 38.44%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Inter Fallback';
    src: local('Helvetica Neue'), local('Helvetica'), local('Arial');
    font-weight: 100 900;
    font-style: normal;
    size-adjust: 106.47%;
    ascent-override: 91.11%;
    descent-override: 22.54%;
    line-gap-override: 0%;
}

/* ==========================================================================
   toLook — application styles
   Modern AI software × editorial fashion magazine.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Neutral, 248 auf allen drei Kanälen. Vorher #fafbfc — dort lag Blau
       zwei Punkte über Rot, was auf der grössten Fläche der App als kühler
       Stich sichtbar wurde. Bei einer Modeseite soll die Farbe von den
       Looks kommen, nicht vom Hintergrund. */
    --background:        #f8f8f8;
    --surface:           #ffffff;
    --surface-secondary: #f2f4f6;
    --text-primary:      #111111;
    --text-secondary:    #666666;
    --border:            #e6e9ec;
    --accent:            #1a1a1a;
    --accent-hover:      #333333;
    --accent-soft:       #edeff3;
    --accent-contrast:   #f8f8f8;

    --danger:            #a03328;
    --danger-soft:       #f7e6e4;
    --success:           #454545;
    --success-soft:      #f0f2f5;
    --info-soft:         #f0f2f5;
    --band:              #edeff3;

    --shadow-sm: 0 1px 2px rgba(20, 20, 15, 0.05);
    --shadow-md: 0 6px 24px -8px rgba(20, 20, 15, 0.12);
    --shadow-lg: 0 24px 60px -16px rgba(20, 20, 15, 0.18);

    /* The *-Fallback families are metric-matched stand-ins declared above:
       they hold the exact space the real font will take, so the moment the
       webfont arrives nothing moves or changes size. */
    --font-serif: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
    --font-sans:  'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 10px;
    --radius-xl: 26px;

    --sidebar-width: 264px;
}

[data-theme="dark"] {
    --background:        #0f0f0f;
    --surface:           #181818;
    --surface-secondary: #1f1f1f;
    --text-primary:      #f2f4f6;
    --text-secondary:    #a8a8a8;
    --border:            #2c2c2c;
    --accent:            #e6e9ec;
    --accent-hover:      #f0f2f5;
    --accent-soft:       #262626;
    --accent-contrast:   #141414;

    --danger:            #d4796d;
    --danger-soft:       #3a2320;
    --success:           #b5b5b5;
    --success-soft:      #242424;
    --info-soft:         #1f1f1f;
    --band:              #121212;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 24px -8px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, 0.65);
}

/* --------------------------------------------------------------------------
   2 · Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--background);
    -webkit-font-smoothing: antialiased;
    transition: background-color .25s ease, color .25s ease;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

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

button {
    font-family: inherit;
    font-size: inherit;
    /* A button centres its text by default. Where a button is used as a card
       — the preview choices on the landing page — that centring is the one
       thing on an otherwise left-aligned page that looks wrong. Real buttons
       centre through .btn's flexbox, so they are unaffected. */
    text-align: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
    padding: 0;
}

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

.container {
    width: min(1120px, 100% - 48px);
    margin-inline: auto;
}
.container--narrow { width: min(760px, 100% - 48px); }
/* A phone needs a wider gutter than a desktop, not the same one: at 390px
   the old 24px each side left the headline touching both edges. */
@media (max-width: 520px) {

    .container,
    .container--narrow { width: min(1120px, 100% - 44px); }
}

/* --------------------------------------------------------------------------
   3 · Logo
   -------------------------------------------------------------------------- */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
}
.logo:hover { color: var(--text-primary); }

/* The word stays in the markup for screen readers and search engines; the
   mark alone carries the brand. */
.logo-word {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.logo-monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: var(--accent);
    color: var(--accent-contrast);
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 600;
    font-size: 25px;
    letter-spacing: -0.02em;
    line-height: 1;
    flex-shrink: 0;
}
.logo--sm .logo-monogram { width: 38px; height: 38px; border-radius: 10px; font-size: 20px; }
.logo--lg .logo-monogram { width: 64px; height: 64px; border-radius: 17px; font-size: 33px; }

/* --------------------------------------------------------------------------
   4 · Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    border: 1px solid transparent;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .1s ease;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn--primary { background: var(--accent); color: var(--accent-contrast); }
.btn--primary:hover { background: var(--accent-hover); color: var(--accent-contrast); }

.btn--secondary {
    background: var(--surface);
    color: var(--text-primary);
    border-color: var(--border);
}
.btn--secondary:hover { border-color: var(--text-secondary); color: var(--text-primary); }

.btn--ghost { background: transparent; color: var(--text-secondary); }
.btn--ghost:hover { color: var(--text-primary); background: var(--surface-secondary); }

.btn--danger { background: var(--danger); color: #fdf6f4; }
.btn--danger:hover { background: #b8453a; color: #fdf6f4; }

.btn--inverse { background: var(--accent-contrast); color: var(--accent); }
.btn--inverse:hover { background: var(--accent-contrast); color: var(--accent-hover); filter: brightness(1.08); }

.btn--sm { padding: 11px 19px; font-size: 15.5px; }
.btn--lg { padding: 13px 26px; font-size: 16px; }
.btn--block { width: 100%; }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--text-secondary);
    transition: background-color .18s ease, color .18s ease;
    flex-shrink: 0;
}
.icon-btn:hover { background: var(--surface-secondary); color: var(--text-primary); }
.icon-btn--xs { width: 26px; height: 26px; border-radius: 8px; }
.icon-btn--danger:hover { background: var(--danger-soft); color: var(--danger); }

.icon { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   5 · Forms
   -------------------------------------------------------------------------- */
.form-field { display: flex; flex-direction: column; gap: 6px; }

.form-label {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.form-input {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 15px;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .25s ease;
}
.form-input::placeholder { color: var(--text-secondary); opacity: .8; }
.form-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-input:disabled {
    background: var(--surface-secondary);
    color: var(--text-secondary);
    cursor: not-allowed;
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888880' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.form-error { font-size: 14.5px; color: var(--danger); }
.form-hint { font-size: 14px; color: var(--text-secondary); }
.has-error .form-input { border-color: var(--danger); }

.form-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--text-secondary);
    cursor: pointer;
}
.form-check input { accent-color: var(--accent); width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   6 · Small components: tags, palette, confidence, avatar
   -------------------------------------------------------------------------- */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }

.tag {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 500;
    background: var(--accent-soft);
    color: var(--accent);
    letter-spacing: .01em;
}
[data-theme="dark"] .tag { color: var(--accent-hover); }

.palette { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.palette-item { display: flex; align-items: center; gap: 6px; }
.palette-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}
.palette-name { font-size: 13.5px; color: var(--text-secondary); }

.confidence { display: flex; align-items: center; gap: 8px; min-width: 92px; }
.confidence-track {
    flex: 1;
    height: 4px;
    background: var(--surface-secondary);
    border-radius: 999px;
    overflow: hidden;
    min-width: 48px;
}
.confidence-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
}
.confidence-value {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .02em;
    flex-shrink: 0;
}
.avatar--lg { width: 56px; height: 56px; font-size: 19px; }

/* --------------------------------------------------------------------------
   7 · Flash messages & toasts
   -------------------------------------------------------------------------- */
.flash-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

.layout-public .flash-stack,
.layout-auth .flash-stack {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 90;
    width: min(480px, calc(100vw - 40px));
    margin: 0;
}

.flash {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-md);
    font-size: 15px;
    animation: flash-in .3s ease;
}
.flash span:first-of-type { flex: 1; }
.flash--success { border-color: transparent; background: var(--success-soft); color: var(--success); }
.flash--error   { border-color: transparent; background: var(--danger-soft);  color: var(--danger); }
.flash--info    { background: var(--info-soft); color: var(--text-primary); }
.flash-close { opacity: .6; display: inline-flex; }
.flash-close:hover { opacity: 1; }

@keyframes flash-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.toast-container {
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    background: var(--text-primary);
    color: var(--background);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    animation: toast-in .28s ease;
    pointer-events: auto;
    max-width: 340px;
}
.toast--error { background: var(--danger); color: #fdf6f4; }
.toast.is-leaving { opacity: 0; transform: translateY(8px); transition: all .25s ease; }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   8 · Modal & loading overlay
   -------------------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; }
.modal[hidden] { display: none; }

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 12, 10, 0.5);
    backdrop-filter: blur(3px);
}

.modal-panel {
    position: relative;
    width: min(420px, calc(100vw - 40px));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-lg);
    animation: flash-in .22s ease;
}
.modal-title { font-family: var(--font-serif); font-size: 23px; font-weight: 600; }
.modal-text { margin-top: 8px; color: var(--text-secondary); font-size: 15px; }
.modal-actions { margin-top: 22px; display: flex; justify-content: flex-end; gap: 10px; }

.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--background) 88%, transparent);
    backdrop-filter: blur(6px);
}
.loading-overlay[hidden] { display: none; }

.loading-panel { text-align: center; padding: 24px; }

.loading-mark { position: relative; width: 84px; height: 84px; margin: 0 auto 22px; }
.loading-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    animation: spin 1s linear infinite;
}
.loading-monogram {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 600;
    color: var(--accent);
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-stage {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 600;
    min-height: 30px;
    transition: opacity .2s ease;
}
.loading-stage.is-switching { opacity: 0; }

.loading-bar {
    width: 240px;
    height: 4px;
    margin: 18px auto 14px;
    background: var(--surface-secondary);
    border-radius: 999px;
    overflow: hidden;
}
.loading-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--accent);
    border-radius: 999px;
    transition: width .7s ease;
}
.loading-note { font-size: 14.5px; color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   9 · Panels & empty states
   -------------------------------------------------------------------------- */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
}
.panel-title { font-family: var(--font-serif); font-size: 24px; font-weight: 600; margin-bottom: 6px; }
.panel-text { color: var(--text-secondary); font-size: 15px; margin-bottom: 16px; }
.panel--danger { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 56px 28px;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
}
.empty-state-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    margin-bottom: 6px;
}
.empty-state-title { font-family: var(--font-serif); font-size: 25px; font-weight: 600; }
.empty-state-text { color: var(--text-secondary); max-width: 380px; font-size: 15px; }
.empty-state .btn { margin-top: 14px; }

/* --------------------------------------------------------------------------
   10 · Theme toggle
   -------------------------------------------------------------------------- */
.theme-toggle-sun, .theme-toggle-moon { display: none; line-height: 0; }
:root:not([data-theme="dark"]) .theme-toggle-moon { display: block; }
[data-theme="dark"] .theme-toggle-sun { display: block; }

.theme-choices { display: flex; gap: 10px; }
.theme-choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all .18s ease;
}
.theme-choice:hover { color: var(--text-primary); }
.theme-choice.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

/* --------------------------------------------------------------------------
   11 · Auth layout
   -------------------------------------------------------------------------- */
.layout-auth { min-height: 100vh; }

.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 22px;
}

.auth-card {
    width: min(420px, 100%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 40px 36px;
    box-shadow: var(--shadow-md);
}

.auth-logo { display: flex; justify-content: center; margin-bottom: 26px; }

.auth-title {
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 600;
    text-align: center;
}
.auth-subtitle {
    text-align: center;
    color: var(--text-secondary);
    font-size: 15px;
    margin: 6px 0 26px;
}

.auth-form { display: flex; flex-direction: column; gap: 16px; }

.auth-switch {
    margin-top: 22px;
    text-align: center;
    font-size: 15px;
    color: var(--text-secondary);
}
.auth-footnote { font-size: 14px; color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   12 · App shell
   -------------------------------------------------------------------------- */
.layout-app { min-height: 100vh; }

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    position: fixed;
    inset-block: 0;
    left: 0;
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 22px 16px;
    z-index: 100;
    transition: transform .28s ease, background-color .25s ease;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 22px;
}
.sidebar-close { display: none; }

.sidebar-nav { display: flex; flex-direction: column; gap: 3px; }

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 12px 13px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 17px;
    font-weight: 600;
    transition: background-color .16s ease, color .16s ease;
}
.sidebar-link:hover { background: #f8f8f8; color: var(--text-primary); }
.sidebar-link.is-active {
    background: #f8f8f8;
    color: var(--accent);
    font-weight: 600;
}

.sidebar-bottom { display: flex; flex-direction: column; gap: 8px; }

.sidebar-theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px;
}
.sidebar-theme-label { font-size: 14px; color: var(--text-secondary); }

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: #f8f8f8;
}
.sidebar-user-meta { min-width: 0; display: flex; flex-direction: column; }
.sidebar-user-name {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user-email {
    font-size: 13.5px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-logout { margin: 0; }
.sidebar-link--logout:hover { background: var(--danger-soft); color: var(--danger); }

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(12, 12, 10, 0.45);
    z-index: 99;
}
.sidebar-backdrop[hidden] { display: none; }

.app-main {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-topbar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 60;
}

.app-content {
    width: min(1060px, 100%);
    margin-inline: auto;
    padding: 44px 40px 80px;
}

/* --------------------------------------------------------------------------
   13 · Page headers & sections
   -------------------------------------------------------------------------- */
.page-head { margin-bottom: 30px; }
.page-title { font-size: 27px; font-weight: 700; letter-spacing: -0.01em; }
.page-title--serif { font-family: var(--font-serif); font-size: 36px; font-weight: 600; }
.page-subtitle { color: var(--text-secondary); margin-top: 7px; max-width: 640px; }

.page-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 14px;
}
.back-link:hover { color: var(--text-primary); }

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}
.section-title { font-family: var(--font-serif); font-size: 25px; font-weight: 600; }
.section-count { font-size: 14.5px; color: var(--text-secondary); }
.section-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   14 · Dashboard analyze hero
   -------------------------------------------------------------------------- */
.analyze-hero {
    text-align: center;
    padding: 42px 0 34px;
    margin-bottom: 40px;
}

.analyze-headline {
    font-family: var(--font-serif);
    font-size: clamp(32px, 5vw, 46px);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.analyze-subline {
    color: var(--text-secondary);
    margin: 12px auto 30px;
    max-width: 480px;
}

.analyze-form { max-width: 680px; margin: 0 auto; }

.analyze-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 8px 8px 18px;
    box-shadow: var(--shadow-md);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.analyze-input-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md);
}
.analyze-input-icon { color: var(--text-secondary); display: inline-flex; }

.analyze-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 16px;
    font-family: inherit;
    min-width: 0;
    padding: 8px 0;
}
.analyze-input:focus { outline: none; }
.analyze-input::placeholder { color: var(--text-secondary); opacity: .75; }

.analyze-submit { flex-shrink: 0; }

.analyze-error {
    margin-top: 12px;
    color: var(--danger);
    font-size: 15px;
    font-weight: 500;
}

.analyze-platforms {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 22px;
    flex-wrap: wrap;
}
.analyze-platform {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-secondary);
    font-size: 14.5px;
    font-weight: 500;
}

.analyze-stats {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 30px;
    flex-wrap: wrap;
}
.stat-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--surface-secondary);
    font-size: 14.5px;
    color: var(--text-secondary);
}
.stat-value { font-weight: 700; font-size: 16px; color: var(--text-primary); }

/* --------------------------------------------------------------------------
   15 · Analysis list & result header
   -------------------------------------------------------------------------- */
.analysis-list { display: flex; flex-direction: column; gap: 12px; }

.analysis-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.analysis-card:hover { border-color: var(--text-secondary); box-shadow: var(--shadow-md); }

.analysis-platform {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
    color: var(--text-secondary);
    flex-shrink: 0;
    overflow: hidden;
}
.analysis-thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.analysis-platform.has-thumb .icon { visibility: hidden; }
.analysis-platform--youtube   { color: #c4302b; background: color-mix(in srgb, #c4302b 10%, var(--surface-secondary)); }
.analysis-platform--tiktok    { color: var(--text-primary); }
.analysis-platform--instagram { color: #b13589; background: color-mix(in srgb, #b13589 10%, var(--surface-secondary)); }

.analysis-info { flex: 1; min-width: 0; }
.analysis-title { font-size: 16.5px; font-weight: 600; }
.analysis-title a { color: var(--text-primary); }
.analysis-title a:hover { color: var(--accent); }

.analysis-url {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    min-width: 0;
}
.analysis-url-text {
    font-size: 14px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 420px;
}
.analysis-meta {
    display: flex;
    gap: 6px;
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 3px;
    flex-wrap: wrap;
}

.analysis-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.analysis-summary-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}
.analysis-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 14.5px;
    color: var(--text-secondary);
    min-width: 0;
}
.analysis-chip--youtube   { color: #c4302b; }
.analysis-chip--instagram { color: #b13589; }
.analysis-chip--url { max-width: 100%; }
.analysis-chip-url {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.video-preview { margin: 28px 0 40px; }
.video-preview-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 220px;
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border);
    background:
        radial-gradient(ellipse at 30% 20%, var(--accent-soft), transparent 55%),
        var(--surface-secondary);
    text-align: center;
    padding: 30px;
}
.video-preview-play {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--accent);
    box-shadow: var(--shadow-md);
    margin-bottom: 8px;
}
.video-preview-title { font-weight: 600; font-size: 15.5px; }
.video-preview-note { font-size: 14.5px; color: var(--text-secondary); }

.video-preview-frame--thumb {
    position: relative;
    overflow: hidden;
    border-style: solid;
    color: #fff;
}
.video-preview-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.video-preview-frame--thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8, 8, 6, 0.65), rgba(8, 8, 6, 0.12) 55%);
    z-index: 1;
}
.video-preview-frame--thumb .video-preview-play,
.video-preview-frame--thumb .video-preview-title,
.video-preview-frame--thumb .video-preview-note { position: relative; z-index: 2; }
.video-preview-frame--thumb .video-preview-title { color: #fff; }
.video-preview-frame--thumb .video-preview-note { color: rgba(255, 255, 255, 0.75); }
.video-preview-frame--thumb .video-preview-play {
    transition: transform .18s ease;
}
.video-preview-frame--thumb:hover .video-preview-play { transform: scale(1.08); }

/* --------------------------------------------------------------------------
   16 · Look cards
   -------------------------------------------------------------------------- */
.look-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 22px;
    align-items: start;
}

.look-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease;
    display: flex;
    flex-direction: column;
}
.look-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.look-card.is-removing { opacity: 0; transform: scale(.97); transition: all .3s ease; }

/* A card that has not loaded its clip yet should read as a video waiting to
   start, not as a coloured placeholder. One quiet surface, no image to fetch. */
.look-media {
    position: relative;
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #17171a;
}
.look-media-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.look-timestamp {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(10, 10, 10, 0.55);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    backdrop-filter: blur(4px);
}
.look-category {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    color: #111;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
}

.look-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.look-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.look-title {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.15;
}
.look-description { color: var(--text-secondary); font-size: 15px; }

.look-section { display: flex; flex-direction: column; gap: 6px; }
.look-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-secondary);
}
.look-list { display: flex; flex-direction: column; gap: 3px; }
.look-list li {
    position: relative;
    padding-left: 14px;
    font-size: 15px;
}
.look-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    opacity: .6;
}

/* Teile mit genannter Marke führen zur Shop-Suche. Bewusst zurückhaltend:
   die Liste soll sich lesen wie eine Liste, nicht wie Werbung — der Strich
   kommt erst beim Darüberfahren, und der Pfeil ist blass. */
.look-shop {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    transition: border-color .15s ease, color .15s ease;
}
.look-shop::after {
    content: ' ↗';
    font-size: .82em;
    opacity: .4;
    white-space: nowrap;
}
.look-shop:hover,
.look-shop:focus-visible {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.look-shop:hover::after { opacity: .75; }

.look-meta { display: flex; gap: 22px; flex-wrap: wrap; }
.look-meta-item dt {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-secondary);
}
.look-meta-item dd { font-size: 15px; font-weight: 500; margin-top: 2px; }

.similar-products { display: flex; flex-direction: column; gap: 6px; }
.similar-product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: var(--surface-secondary);
    border-radius: var(--radius-sm);
    font-size: 14px;
}
.similar-product-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.similar-product-price { color: var(--text-secondary); flex-shrink: 0; font-weight: 600; }

.look-source {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}
.look-source-date { color: var(--text-secondary); }

.look-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
    flex-wrap: wrap;
}

.js-save-look.is-saved { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }

/* --------------------------------------------------------------------------
   17 · Lookbook filters
   -------------------------------------------------------------------------- */
.lookbook-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 14px;
}

.lookbook-search { position: relative; flex: 1; min-width: 220px; }
.lookbook-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    display: inline-flex;
    pointer-events: none;
}
.lookbook-search .form-input { padding-left: 38px; }

.lookbook-selects { display: flex; gap: 10px; flex-wrap: wrap; }
.lookbook-selects .form-select { min-width: 150px; }

.lookbook-count {
    font-size: 14.5px;
    color: var(--text-secondary);
    margin-bottom: 18px;
}

/* --------------------------------------------------------------------------
   18 · Settings
   -------------------------------------------------------------------------- */
.settings-stack {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 620px;
}
.settings-avatar-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.settings-avatar-name { font-weight: 600; }
.settings-avatar-note { font-size: 14.5px; color: var(--text-secondary); }
.settings-form { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.settings-form .form-field { width: 100%; }

/* --------------------------------------------------------------------------
   19 · Landing page
   -------------------------------------------------------------------------- */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 80;
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    backdrop-filter: blur(10px);
}
/* Logo, then the menu right beside it, then everything else pushed to the
   right by one auto margin. space-between left the links drifting in the
   middle with nothing to line up against. */
.site-nav-inner {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 14px 0;
}
.site-nav-links { display: flex; align-items: center; gap: 30px; }
/* A hairline between the name and the menu, so the two read as two things
   rather than one long row of words. It is a flex child of the list, which
   is why the gap on either side of it is even without being set twice. */
.site-nav-links::before {
    content: "";
    width: 1px;
    height: 20px;
    /* --border is nearly white and disappeared against the bar. This is the
       muted text colour at half strength: visible, still quiet. */
    background: color-mix(in srgb, var(--text-secondary) 55%, transparent);
}
.site-nav-links a {
    color: var(--text-secondary);
    font-size: 17px;
    font-weight: 600;
}
.site-nav-links a:hover { color: var(--text-primary); }
.site-nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* The band under the navigation. It arrives hidden and is shown by the script
   — so somebody who closed it yesterday never sees it flash back today. */
}

/* Hero: link on the left, the resulting look cards on the right */
.hero { padding: 64px 0 40px; overflow: hidden; }
/* One column, centred: the demo is the argument, so it sits under the headline
   at full width rather than squeezed into a half. */
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    justify-items: center;
    text-align: center;
}
.hero-grid .hero-copy { max-width: 720px; }
.hero-grid .hero-subline,
.hero-grid .hero-form,
.hero-grid .hero-meta { margin-left: auto; margin-right: auto; }
/* The centring above is for the block, not for what is typed into it: a input
   field reads from the left, placeholder included. */
.hero-grid .hero-form,
.hero-grid .hero-form-input,
.hero-grid .hero-form-placeholder { text-align: left; }
.hero-grid .hero-meta { justify-content: center; }
.hero-video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}

/* Landing hero: one column, centred. The headline makes the promise, the
   recording underneath keeps it — in that order, nothing beside either. */
.lp-hero { display: grid; gap: 28px; justify-items: center; text-align: center; }
.lp-hero-copy { max-width: 760px; }
/* .lp-b .b-standfirst sets `margin: 24px 0 28px` further down the file, which
   resets the side margins and leaves the 440px block sitting against the left
   edge of a centred column. These carry one more class so they win wherever
   they stand. */
.lp-b .lp-hero-copy .b-standfirst { margin-left: auto; margin-right: auto; }
.lp-b .lp-hero-copy .b-actions { justify-content: center; }
.lp-b .lp-hero-copy .hero-meta { justify-content: center; }
.lp-hero-share { justify-content: center; }
/* The guide cards line up with the video above them, and read left to right
   even though everything around them is centred. */
.lp-hero .hero-guides { max-width: 1040px; text-align: left; }

/* The three product previews are buttons; the chosen one has to look chosen. */
#product .preview-choice:hover,
#product .preview-choice:focus-visible,
#product .preview-choice[aria-pressed="true"] { border-color: var(--text-primary); }

/* The product video, directly under the headline. Wider than the text column
   and framed like a window, so it reads as the app rather than as an ad. */
.hero-promo {
    position: relative;
    width: 100%;
    max-width: 1040px;
    margin: 8px auto 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.hero-promo-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: transparent;
}
.hero-promo-bar {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity .18s ease;
}
/* Shown on hover, and always for anyone reaching them by keyboard. */
.hero-promo:hover .hero-promo-bar,
.hero-promo-bar:focus-within { opacity: 1; }
.hero-promo-bar .btn {
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    backdrop-filter: blur(6px);
}
@media (max-width: 600px) {
    .hero-promo { margin-top: 4px; }
    /* Always visible on a phone (there is no hover), but scaled down: at the
       desktop size it sat on the video's corner and read as a stray element. */
    .hero-promo-bar { right: 10px; bottom: 10px; opacity: 1; }
    .hero-promo-bar .btn {
        font-size: 13.5px;
        padding: 5px 12px;
        border-radius: 999px;
    }
}
/* The demo runs on somebody's real video, so she is named under it. */
.hero-credit {
    margin-top: 12px;
    text-align: center;
    font-size: 14.5px;
    color: var(--text-secondary);
}
.hero-credit a {
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--border);
}
.hero-credit a:hover { text-decoration-color: currentColor; }
.hero-copy { max-width: 560px; }
.hero-eyebrow {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.hero-headline {
    font-family: var(--font-serif);
    /* 40px was a fixed floor, so on a 390px screen the lines ran right into
       both edges. Scale with the viewport down there and only hold 40px once
       there is room for it. */
    font-size: clamp(29px, 7.4vw, 62px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.024em;
    /* Let the browser even out the lines instead of filling the first one and
       leaving a stub behind: it breaks after the comma rather than stranding
       "on" at the end of line one, away from the phrase it belongs to. */
    text-wrap: balance;
}
/* And never split the italic phrase itself across two lines. */
.hero-headline em { white-space: nowrap; }
.hero-headline em { font-style: italic; }
.hero-subline {
    color: var(--text-secondary);
    font-size: 17px;
    line-height: 1.6;
    margin: 18px 0 28px;
    max-width: 560px;
    text-wrap: balance;
}

/* The hero input mirrors the dashboard control */
.hero-form {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 7px 7px 7px 18px;
    box-shadow: var(--shadow-md);
    max-width: 480px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.hero-form:focus-within, .hero-form--link:hover { border-color: var(--text-secondary); box-shadow: var(--shadow-lg); }
.hero-form--link { text-decoration: none; cursor: pointer; }
.hero-form-icon { color: var(--text-secondary); display: inline-flex; flex-shrink: 0; }
.hero-form-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    font-family: var(--font-sans);
    font-size: 15.5px;
    color: var(--text-primary);
}
.hero-form-placeholder {
    flex: 1;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 15.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hero-form-btn { flex-shrink: 0; border-radius: 999px; padding: 10px 18px; }

.hero-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 20px; }
.hero-platforms { display: inline-flex; gap: 14px; flex-wrap: wrap; }
.hero-platform { display: inline-flex; align-items: center; gap: 5px; font-size: 14.5px; color: var(--text-secondary); }
.hero-note { font-size: 14.5px; color: var(--text-secondary); }

/* Result stage */
.hero-stage {
    position: relative;
    min-height: 520px;
    padding-top: 8px;
    max-width: 100%;
}
.hero-stage::before {
    content: '';
    position: absolute;
    inset: -12% -18% -8% -6%;
    background: radial-gradient(60% 55% at 60% 40%, var(--accent-soft), transparent 72%);
    opacity: .9;
    z-index: 0;
    /* Decoration only — it sat on top of the guide cards and swallowed their
       clicks, which made two working links look broken. */
    pointer-events: none;
}
.hero-source {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px 7px 10px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    font-size: 14px;
    color: var(--text-secondary);
    margin-left: 8px;
}
.hero-source-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--accent); color: var(--accent-contrast);
}
.hero-source-badge {
    padding: 2px 9px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent);
    font-weight: 600; font-size: 13px;
}

.hero-look {
    position: absolute;
    z-index: 1;
    width: 268px;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: heroRise .7s cubic-bezier(.22,.9,.3,1) backwards;
}
.hero-look--1 { top: 46px;  left: 0;     transform: rotate(-3deg);   animation-delay: .05s; }
.hero-look--2 { top: 126px; left: 282px;  transform: rotate(2.5deg);  animation-delay: .16s; z-index: 3; }
.hero-look--3 { top: 288px; left: 58px;   transform: rotate(-1.5deg); animation-delay: .27s; z-index: 2; }
@keyframes heroRise { from { opacity: 0; transform: translateY(22px) rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .hero-look { animation: none; } }

/* Product shot variant of the stage — one real screenshot instead of the cards. */
.hero-stage--shot {
    min-height: 0;
    display: flex;
    /* Column, not row: the guide cards belong under the demo, not beside it. */
    flex-direction: column;
    align-items: stretch;
    padding-top: 0;
    width: 100%;
    max-width: 800px;
}
.hero-shot {
    position: relative;
    z-index: 1;
    margin: 0;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    animation: heroRise .7s cubic-bezier(.22,.9,.3,1) backwards;
}
.hero-shot img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .hero-shot { animation: none; } }

.hero-look-media { position: relative; display: block; height: 104px; overflow: hidden; }
.hero-look-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-look-time, .hero-look-cat {
    position: absolute; top: 9px;
    padding: 2px 8px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
}
.hero-look-time { left: 9px; background: rgba(0,0,0,.62); color: #fff; }
.hero-look-cat  { right: 9px; background: rgba(255,255,255,.9); color: #1a1a1a; }
.hero-look-body { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px 13px; }
.hero-look-title { font-family: var(--font-serif); font-size: 18px; font-weight: 600; line-height: 1.2; }
.hero-look-garments { display: flex; flex-direction: column; gap: 3px; }
.hero-look-garment { font-size: 13.5px; color: var(--text-secondary); padding-left: 11px; position: relative; }
.hero-look-garment::before {
    content: ''; position: absolute; left: 0; top: 7px;
    width: 4px; height: 4px; border-radius: 50%; background: var(--text-secondary); opacity: .5;
}
.hero-look-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 3px; }
.hero-look-palette { display: inline-flex; gap: 4px; }
.hero-look-swatch { width: 13px; height: 13px; border-radius: 4px; border: 1px solid rgba(0,0,0,.08); }
.hero-look-confidence { font-size: 13px; font-weight: 600; color: var(--text-secondary); }

@media (max-width: 980px) {
    .hero { padding: 56px 0 64px; }
    .hero-grid { grid-template-columns: 1fr; gap: 30px; }
    .hero-copy { max-width: none; }
    /* Below the wide layout the fanned stack would cover its own text —
       show the same cards as a calm list instead. */
    .hero-stage {
        min-height: 0;
        max-width: 460px;
        margin-inline: auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-top: 14px;
    }
    .hero-stage::before { inset: -6% -8%; }
    .hero-source { margin: 0 0 4px; align-self: flex-start; }
    .hero-look { position: static; width: 100%; transform: none; box-shadow: var(--shadow-md); }
    .hero-stage--shot { max-width: 560px; padding-top: 0; }
}
@media (max-width: 560px) {
    .hero-form { flex-wrap: wrap; border-radius: 20px; padding: 14px; }
    .hero-form-input, .hero-form-placeholder { flex-basis: 100%; order: 2; }
    .hero-form-btn { width: 100%; order: 3; justify-content: center; }
    .hero-stage { max-width: 100%; }
    .hero-source { font-size: 13px; }
    .hero-look-media { height: 92px; }
}

.section { padding: 72px 0; }
.section--alt { background: var(--surface); border-block: 0px solid var(--border); }

.section-headline {
    font-family: var(--font-serif);
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 600;
    text-align: center;
}
.section-sub {
    text-align: center;
    color: var(--text-secondary);
    margin: 10px auto 44px;
    max-width: 480px;
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.step {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    box-shadow: var(--shadow-sm);
}
.section--alt .step, .section--alt .feature { background: var(--background); }
.step-number {
    position: absolute;
    top: 20px;
    right: 22px;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 34px;
    color: var(--border);
    line-height: 1;
}
.step-icon, .feature-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    color: var(--accent);
    margin-bottom: 16px;
}
.step h3, .feature h3 { font-size: 17px; font-weight: 600; margin-bottom: 7px; }
.step p, .feature p { color: var(--text-secondary); font-size: 15px; }

/* How-it-works, shown with real screenshots instead of icons. Large, full-width
   screens so the interface is actually readable — a thumbnail-sized screenshot
   of a text-heavy UI just shows noise. */
.how-rows { display: flex; flex-direction: column; gap: 56px; }
.how-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}
.how-row--reverse .how-shot { order: 2; }
.how-row--reverse .how-copy { order: 1; }
.how-shot {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--background);
    box-shadow: var(--shadow-md);
}
.how-shot img,
.how-shot video { display: block; width: 100%; height: auto; }
.how-copy .step-number {
    display: inline-block;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 34px;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 10px;
}
.how-copy h3 { font-size: 21px; font-weight: 600; margin-bottom: 10px; }
.how-copy p { color: var(--text-secondary); font-size: 16px; line-height: 1.6; }
@media (max-width: 860px) {
    .how-row, .how-row--reverse { grid-template-columns: 1fr; }
    .how-row--reverse .how-shot, .how-row--reverse .how-copy { order: initial; }
    .how-rows { gap: 36px; }
}

.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.feature {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 22px;
}

.example-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.example-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease;
}
.example-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.example-media {
    position: relative;
    aspect-ratio: 4 / 5;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.example-media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.example-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.example-body h3 { font-family: var(--font-serif); font-size: 21px; font-weight: 600; }
.example-body > p { color: var(--text-secondary); font-size: 15px; }
.example-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 4px;
}
.example-conf { color: var(--accent); font-weight: 600; }

.creators-inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: center;
}
.creators-copy .section-headline, .creators-copy .section-sub { text-align: left; margin-left: 0; }
.creators-copy .section-sub { margin-bottom: 28px; }

.benefit-list { display: flex; flex-direction: column; gap: 16px; }
.benefit-list li { display: flex; gap: 12px; font-size: 15px; color: var(--text-secondary); }
.benefit-list li strong { color: var(--text-primary); font-weight: 600; }
.benefit-list li .icon { color: var(--accent); margin-top: 3px; }

.creators-visual { position: relative; min-height: 300px; }
.creators-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    box-shadow: var(--shadow-md);
}
.creators-card p { font-family: var(--font-serif); font-size: 17px; font-weight: 600; margin-left: 8px; white-space: nowrap; }
.creators-card--a { top: 8%; left: 4%; transform: rotate(-3deg); }
.creators-card--b { top: 40%; right: 2%; transform: rotate(2deg); }
.creators-card--c { bottom: 6%; left: 14%; transform: rotate(-1deg); }

.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0 20px;
}
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 0;
    font-weight: 600;
    font-size: 15.5px;
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { color: var(--text-secondary); transition: transform .2s ease; flex-shrink: 0; }
.faq-item[open] summary .icon { transform: rotate(180deg); }
.faq-item p { padding: 0 0 18px; color: var(--text-secondary); font-size: 15px; }

.cta-final {
    background: var(--accent);
    color: var(--accent-contrast);
    padding: 84px 0;
}
.cta-final-inner { text-align: center; }
.cta-final h2 {
    font-family: var(--font-serif);
    font-size: clamp(32px, 5vw, 50px);
    font-weight: 600;
    max-width: 720px;
    margin-inline: auto;
}
.cta-final h2 em { font-style: italic; opacity: .85; }
.cta-final p { margin: 16px 0 32px; opacity: .8; font-size: 17px; }

.site-footer {
    border-top: 1px solid var(--border);
    padding: 56px 0 0;
    background: var(--surface);
}
.site-footer-inner {
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: 48px;
    padding-bottom: 44px;
}
.site-footer-brand p {
    margin-top: 14px;
    color: var(--text-secondary);
    font-size: 15px;
    max-width: 280px;
}
.site-footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.site-footer-links h4 {
    font-size: 13.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-secondary);
    margin-bottom: 14px;
}
.site-footer-links a {
    display: block;
    color: var(--text-secondary);
    font-size: 15px;
    padding: 4px 0;
}
.site-footer-links a:hover { color: var(--text-primary); }
.site-footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding-block: 20px;
    border-top: 1px solid var(--border);
    font-size: 14px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   20 · Error pages
   -------------------------------------------------------------------------- */
.error-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    gap: 10px;
}
.error-code {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 84px;
    line-height: 1;
    color: var(--border);
    margin-top: 26px;
}
.error-title { font-family: var(--font-serif); font-size: 32px; font-weight: 600; }
.error-text { color: var(--text-secondary); max-width: 380px; }
.error-actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }
.error-detail {
    margin-top: 30px;
    max-width: min(760px, 90vw);
    overflow-x: auto;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px;
    font-size: 13.5px;
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   21 · Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .steps, .features, .example-grid { grid-template-columns: repeat(2, 1fr); }
    .creators-inner { grid-template-columns: 1fr; gap: 40px; }
    .creators-visual { min-height: 260px; }
    .app-content { padding: 34px 28px 70px; }
}

@media (max-width: 768px) {
    body { font-size: 15.5px; }

    /* Collapsible sidebar */
    .sidebar { transform: translateX(-104%); box-shadow: var(--shadow-lg); }
    .sidebar.is-open { transform: translateX(0); }
    .sidebar-close { display: inline-flex; }
    .app-main { margin-left: 0; }
    .app-topbar { display: flex; }
    .app-content { padding: 26px 18px 60px; }

    .site-nav-inner { gap: 16px; }

    .hero { padding: 64px 0 40px; }
    .steps, .features, .example-grid { grid-template-columns: 1fr; }
    .site-footer-inner { grid-template-columns: 1fr; gap: 32px; }
    .site-footer-links { grid-template-columns: repeat(2, 1fr); }

    .analyze-input-wrap {
        flex-direction: column;
        align-items: stretch;
        border-radius: var(--radius-lg);
        padding: 14px;
        gap: 12px;
    }
    .analyze-input-icon { display: none; }
    .analyze-input { padding: 4px 2px; }
    .analyze-submit { width: 100%; }

    .page-head-row { flex-direction: column; }
    .page-head-row .btn { width: 100%; }

    .analysis-card { flex-wrap: wrap; }
    .analysis-info { flex-basis: calc(100% - 60px); }
    .analysis-actions { width: 100%; justify-content: flex-end; }
    .analysis-url-text { max-width: 220px; }
    .analysis-chip-url { max-width: 170px; }

    .look-grid { grid-template-columns: 1fr; }

    .lookbook-filters { flex-direction: column; align-items: stretch; }
    .lookbook-selects { flex-direction: column; }
    .lookbook-selects .form-select { width: 100%; }

    .auth-card { padding: 30px 22px; }

    .btn { padding: 11px 20px; }

    .creators-visual { display: none; }

    .toast-container { left: 18px; right: 18px; bottom: 18px; }
    .toast { max-width: none; width: 100%; }
}

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

/* --------------------------------------------------------------------------
   18 · Creator blog (dashboard management + public pages)
   -------------------------------------------------------------------------- */
.page-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.text-link { color: var(--accent); font-weight: 500; }
.text-link:hover { color: var(--accent-hover); text-decoration: underline; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .02em;
}
.badge--live  { background: var(--accent-soft); color: var(--accent); }
.badge--draft { background: var(--surface-secondary); color: var(--text-secondary); border: 1px solid var(--border); }

/* My Blog list */
.blog-list { display: flex; flex-direction: column; gap: 14px; }
.blog-item { display: flex; justify-content: space-between; gap: 18px; }
.blog-item-main { min-width: 0; }
.blog-item-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.blog-item-date { font-size: 14.5px; color: var(--text-secondary); }
.blog-item-title { font-family: var(--font-serif); font-size: 22px; font-weight: 600; line-height: 1.25; }
.blog-item-title a:hover { color: var(--accent); }
.blog-item-excerpt { color: var(--text-secondary); font-size: 15px; margin-top: 6px; max-width: 640px; }
.blog-item-url { display: inline-flex; align-items: center; gap: 5px; font-size: 14.5px; margin-top: 10px; }
.blog-item-actions { display: flex; align-items: flex-start; gap: 8px; flex-shrink: 0; }

/* Editor */
.blog-editor { display: flex; flex-direction: column; gap: 4px; margin-bottom: 22px; }
.blog-editor-textarea {
    min-height: 380px;
    resize: vertical;
    line-height: 1.65;
    font-family: var(--font-sans);
    font-size: 15.5px;
}
.blog-editor-actions { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.blog-editor-note { font-size: 14.5px; color: var(--text-secondary); }
.blog-preview .panel-title { margin-bottom: 14px; }
.blog-preview-state { font-family: var(--font-sans); font-size: 13.5px; font-weight: 400; color: var(--text-secondary); margin-left: 8px; }

/* The bar over the text area */
.editor-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 8px 10px; margin-bottom: 6px;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface-secondary);
}
.editor-bar[hidden] { display: none; }
.editor-bar-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.editor-tool {
    display: inline-flex; align-items: center; gap: 5px;
    height: 30px; padding: 0 10px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--surface);
    font-size: 14.5px; color: var(--text-primary); cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.editor-tool:hover { border-color: var(--text-secondary); }
.editor-tool:active { background: var(--surface-secondary); }
.editor-tool strong, .editor-tool em { font-size: 14.5px; }
.editor-bar-note { font-size: 13.5px; color: var(--text-secondary); white-space: nowrap; }

.editor-pop {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 12px; margin-bottom: 6px;
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
}
.editor-pop[hidden] { display: none; }
.editor-pop-label { font-size: 14.5px; color: var(--text-secondary); }
.editor-pop-input { flex: 1 1 260px; min-width: 0; height: 34px; padding: 0 10px; }
.editor-pop-input[hidden] { display: none; }
@media (max-width: 640px) {
    .editor-bar-note { display: none; }
}

/* Article body typography (editor preview + public page) */
.article-body { max-width: 680px; }
.article-body p { margin: 0 0 16px; line-height: 1.75; font-size: 16.5px; }
.article-body h2 {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 600;
    margin: 30px 0 12px;
    line-height: 1.3;
}
.article-body h3 {
    font-family: var(--font-serif);
    font-size: 21px;
    font-weight: 600;
    margin: 22px 0 8px;
    line-height: 1.3;
}
/* The global reset takes markers off every list; inside an article a list
   should look like one — the bar offers a List button for exactly that. */
.article-body ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.article-body li { margin-bottom: 6px; line-height: 1.6; font-size: 16px; list-style: inherit; }
.article-body a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--text-secondary); }
.article-body a:hover { text-decoration-color: var(--text-primary); }
.article-body strong { font-weight: 600; }
.article-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em;
    padding: 1px 5px; border-radius: 5px; background: var(--surface-secondary);
}
.article-body blockquote {
    margin: 0 0 16px; padding: 4px 0 4px 18px;
    border-left: 2px solid var(--border); color: var(--text-secondary);
}
.article-body blockquote p { margin-bottom: 8px; font-size: 16.5px; }
.article-body blockquote p:last-child { margin-bottom: 0; }

/* A video on a line of its own */
.article-embed { margin: 0 0 20px; }
.article-embed iframe {
    display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;
    border-radius: var(--radius-lg); background: #111;
}
/* Any other address on a line of its own */
.article-link-card {
    display: flex; flex-direction: column; gap: 2px;
    margin: 0 0 16px; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    text-decoration: none !important; background: var(--surface);
}
.article-link-card:hover { border-color: var(--text-secondary); }
.article-link-card-host { font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.article-link-card-url { font-size: 15px; color: var(--text-primary); word-break: break-all; }

/* Public profile page */
.profile-page { padding: 56px 20px 80px; max-width: 860px; }
.profile-head { text-align: center; margin-bottom: 44px; }
.profile-head .avatar { margin-bottom: 16px; }
.avatar--xl { width: 84px; height: 84px; font-size: 28px; }
.profile-name { font-family: var(--font-serif); font-size: 40px; font-weight: 600; line-height: 1.15; }
.profile-handle { color: var(--accent); font-weight: 600; margin-top: 6px; }
.profile-meta { color: var(--text-secondary); font-size: 15px; margin-top: 8px; }
.profile-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    padding: 60px 0;
    text-align: center;
}

.profile-articles { display: flex; flex-direction: column; gap: 18px; }
.profile-article-card {
    display: flex;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease;
}
.profile-article-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.profile-article-cover { flex: 0 0 220px; min-height: 160px; }
.profile-article-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-article-body { display: flex; flex-direction: column; gap: 7px; padding: 24px 26px; min-width: 0; }
.profile-article-date { font-size: 14px; color: var(--text-secondary); letter-spacing: .04em; text-transform: uppercase; }
.profile-article-title { font-family: var(--font-serif); font-size: 24px; font-weight: 600; line-height: 1.25; }
.profile-article-card:hover .profile-article-title { color: var(--accent); }
.profile-article-excerpt { color: var(--text-secondary); font-size: 15px; line-height: 1.55; }
.profile-article-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    font-size: 15px;
    font-weight: 600;
    margin-top: auto;
    padding-top: 6px;
}

/* Public article page */
.article-page { padding: 56px 20px 80px; max-width: 760px; }
.article-head { text-align: center; margin-bottom: 34px; }
.article-author { color: var(--accent); font-weight: 600; font-size: 15px; }
.article-author:hover { text-decoration: underline; }
.article-title { font-family: var(--font-serif); font-size: clamp(32px, 5vw, 46px); font-weight: 600; line-height: 1.15; margin-top: 12px; }
.article-meta { color: var(--text-secondary); font-size: 15px; margin-top: 12px; }
.article-excerpt {
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1.6;
    margin: 18px auto 0;
    max-width: 600px;
}
.article-cover {
    margin: 0 0 34px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
}
.article-cover img { width: 100%; display: block; }
.article-page .article-body { margin: 0 auto; }
.article-foot {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}

@media (max-width: 720px) {
    .blog-item { flex-direction: column; }
    .blog-item-actions { justify-content: flex-end; }
    .profile-article-card { flex-direction: column; }
    .profile-article-cover { flex-basis: auto; max-height: 200px; }
    .article-foot { flex-direction: column; }
    .article-foot .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   19 · Profile photos & account deletion
   -------------------------------------------------------------------------- */
.avatar--photo { object-fit: cover; padding: 0; background: var(--surface-secondary); }
.settings-avatar-row { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 22px; }
.settings-avatar-body { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.settings-avatar-body .settings-avatar-name { width: 100%; font-weight: 600; }
.settings-avatar-body .settings-avatar-note { width: 100%; font-size: 14.5px; color: var(--text-secondary); }
.settings-avatar-form { display: inline-flex; gap: 8px; }
.settings-avatar-pick { cursor: pointer; }
.settings-danger-form { max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
.settings-danger-form .btn { align-self: flex-start; }
.article-meta .avatar { width: 26px; height: 26px; font-size: 12.5px; vertical-align: middle; margin-right: 6px; }

/* --------------------------------------------------------------------------
   21 · Pricing page
   -------------------------------------------------------------------------- */
.pricing-hero { padding: 76px 0 20px; text-align: center; }
.pricing-hero .hero-headline { font-size: clamp(36px, 5.5vw, 58px); }
/* The subline is a 560px block. On the landing page a .hero-grid rule centres
   it; this hero is centred text in a full-width container, so without auto
   margins the block sat flush left under a centred headline. */
.pricing-hero .hero-subline { margin: 18px auto 24px; }

.pricing-note {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 15px;
    font-weight: 500;
}
[data-theme="dark"] .pricing-note { color: var(--accent-hover); }

.pricing-section { padding-top: 46px; }

.plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: start;
}

.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 30px 26px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease;
}
.plan-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.plan-card--featured {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    padding-top: 38px;
}

.plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 16px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.plan-head { display: flex; flex-direction: column; gap: 6px; }
.plan-name { font-family: var(--font-serif); font-size: 28px; font-weight: 600; }
.plan-tagline { color: var(--text-secondary); font-size: 15px; }

.plan-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
    padding-bottom: 4px;
}
.plan-currency { font-size: 17px; font-weight: 600; color: var(--text-secondary); letter-spacing: .02em; align-self: center; }
.plan-amount {
    font-family: var(--font-serif);
    font-size: 52px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
}
.plan-period { font-size: 15px; color: var(--text-secondary); margin-left: 4px; }

.plan-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    margin-top: 2px;
}
.plan-feature {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 15px;
    padding-top: 8px;
}
.plan-feature .icon { color: var(--accent); margin-top: 2px; flex-shrink: 0; }
.plan-feature.is-excluded { color: var(--text-secondary); }
.plan-feature.is-excluded .icon { color: var(--border); }

.pricing-footnote {
    text-align: center;
    margin-top: 28px;
    font-size: 14.5px;
    color: var(--text-secondary);
}

/* Comparison table */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.compare-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    font-size: 15px;
}
.section--alt .compare-table { background: var(--background); }

.compare-table th,
.compare-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.compare-table thead th {
    font-size: 13.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-secondary);
    background: var(--surface-secondary);
}
.compare-table thead th:not(:first-child),
.compare-table tbody td { text-align: center; }
.compare-table tbody th[scope="row"] { font-weight: 500; }

.compare-table .is-featured {
    background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
    font-weight: 600;
}
.compare-table thead th.is-featured { color: var(--accent); }

.compare-group th {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    background: var(--surface-secondary);
    text-align: left !important;
    padding-top: 14px;
    padding-bottom: 14px;
}

.compare-yes { display: inline-flex; color: var(--accent); }
.compare-no { color: var(--text-secondary); opacity: .6; }

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: none; }

@media (max-width: 900px) {
    .plan-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
    .plan-card--featured { order: -1; }
    .pricing-hero { padding-top: 52px; }
}

/* --------------------------------------------------------------------------
   20 · Looks inside articles & public look tiles
   -------------------------------------------------------------------------- */
.article-look { margin: 22px 0 26px; }
.article-look-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #17171a;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
}
.article-look-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-look-time {
    position: absolute;
    z-index: 2;
    left: 12px;
    bottom: 12px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
}
.article-look figcaption { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; font-size: 15px; }
.article-look figcaption strong { font-family: var(--font-serif); font-size: 19px; font-weight: 600; }
.article-look figcaption span { color: var(--text-secondary); }

.article-gallery { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--border); }
.article-gallery-title { font-family: var(--font-serif); font-size: 24px; font-weight: 600; margin-bottom: 18px; }

/* 280px, not 200: at 4:3 that is 210px tall, and YouTube refuses to render
   a player in anything smaller than 200x200. */
.look-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.look-tile {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease;
}
a.look-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.look-tile-media { position: relative; display: block; aspect-ratio: 4 / 3; background: #17171a; overflow: hidden; }
.look-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.look-tile-time {
    position: absolute;
    z-index: 2;
    left: 10px;
    bottom: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}
.look-tile-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.look-tile-title { font-family: var(--font-serif); font-size: 18px; font-weight: 600; line-height: 1.25; }
.look-tile-tags, .look-tile-source { font-size: 14px; color: var(--text-secondary); }
a.look-tile:hover .look-tile-title { color: var(--accent); }

.profile-section { margin-bottom: 44px; }
.profile-section-title { font-family: var(--font-serif); font-size: 26px; font-weight: 600; margin-bottom: 16px; }

/* --------------------------------------------------------------------------
   21 · Plan & billing
   -------------------------------------------------------------------------- */
.plan-summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.plan-summary-price { margin: 8px 0 0; }
.plan-summary-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.usage-row { border-top: 1px solid var(--border); padding-top: 18px; }
.usage-head { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 8px; }
.usage-bar { height: 8px; border-radius: 999px; background: var(--surface-secondary); overflow: hidden; }
.usage-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.usage-bar-fill.is-full { background: var(--danger, #b03a2e); }
.is-current-plan { cursor: default; opacity: .75; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.plan-card form { margin: 0; }

/* --------------------------------------------------------------------------
   22 · Landing: live lookbooks (published articles)
   -------------------------------------------------------------------------- */
/* Headline and subline keep the page's centered rhythm — no local override. */
.live-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 22px;
    font-size: 15px;
    font-weight: 600;
    color: var(--accent);
}
.live-more:hover { color: var(--accent-hover); }
.live-foot { text-align: center; }

.live-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.live-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 18px 14px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: inherit;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.live-item:hover { border-color: var(--text-secondary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.live-thumb {
    flex: 0 0 104px;
    height: 72px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface-secondary);
}
.live-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.live-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.live-title { font-family: var(--font-serif); font-size: 21px; font-weight: 600; line-height: 1.25; }
.live-item:hover .live-title { color: var(--accent); }
.live-excerpt {
    color: var(--text-secondary); font-size: 15px; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.live-meta { display: flex; gap: 6px; flex-wrap: wrap; font-size: 14px; color: var(--text-secondary); margin-top: 2px; }
.live-author { font-weight: 600; color: var(--accent); }
.live-open { flex-shrink: 0; color: var(--text-secondary); }
@media (min-width: 861px) and (max-width: 1120px) {
    .live-thumb { flex-basis: 84px; height: 62px; }
    .live-open { display: none; }
}
.live-item:hover .live-open { color: var(--accent); }

@media (max-width: 860px) {
    .live-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .live-item { align-items: flex-start; padding: 12px; gap: 12px; }
    .live-thumb { flex-basis: 76px; height: 76px; }
    .live-open { display: none; }
}

/* --------------------------------------------------------------------------
   23 · Landing designs B and C
   Both reuse the same tokens, fonts and components as design A. Every rule is
   scoped to .lp-b / .lp-c so design A is untouched.
   -------------------------------------------------------------------------- */

/* Dev-only design switcher */
.design-switch {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow-lg);
    font-size: 13.5px;
}
.design-switch-label { padding: 0 8px; color: var(--text-secondary); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }
.design-switch-btn { padding: 6px 12px; border-radius: 999px; color: var(--text-secondary); font-weight: 500; white-space: nowrap; }
.design-switch-btn:hover { background: var(--surface-secondary); color: var(--text-primary); }
.design-switch-btn.is-active { background: var(--accent); color: var(--accent-contrast); }
@media (max-width: 640px) { .design-switch { right: 10px; bottom: 10px; } .design-switch-label { display: none; } }

/* ---------- B · Editorial ---------- */
.lp-b .b-cover { padding: 40px 0 70px; }
.lp-b .b-cover-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 0; align-items: center; }
.lp-b .b-cover-figure { position: relative; margin: 0; }
.lp-b .b-cover-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); display: block; }
.lp-b .b-cover-caption {
    position: absolute; left: 16px; bottom: 16px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 13px; border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(8px);
    font-size: 13.5px; color: var(--text-secondary);
}
.lp-b .b-cover-time { padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--accent-contrast); font-weight: 600; font-size: 12.5px; }
.lp-b .b-masthead { position: relative; z-index: 2; padding: 40px 0 40px 44px; }
.lp-b .b-issue { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 20px; }
.lp-b .b-title {
    font-family: var(--font-serif);
    font-size: clamp(46px, 6.4vw, 88px);
    font-weight: 400;
    line-height: .96;
    letter-spacing: -.028em;
    margin-left: -78px;          /* the headline overlaps the cover, the body text does not */
    text-shadow: 0 1px 0 var(--background);
}
.lp-b .b-title em { font-style: italic; }
.lp-b .b-standfirst { color: var(--text-secondary); font-size: 19px; line-height: 1.58; margin: 26px 0 32px; max-width: 46ch; }
.lp-b .b-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.lp-b .b-form { display: flex; gap: 10px; max-width: 460px; }
.lp-b .b-form-input { flex: 1; min-width: 0; padding: 13px 18px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-family: var(--font-sans); font-size: 15.5px; color: var(--text-primary); }
.lp-b .b-form-input:focus { outline: none; border-color: var(--text-secondary); }

.lp-b .b-band { padding: 74px 0; border-top: 1px solid var(--border); }
.lp-b .b-band--alt { background: var(--surface-secondary); }
.lp-b .b-band-inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.lp-b .b-lede { font-family: var(--font-serif); font-size: clamp(23px, 2.6vw, 33px); line-height: 1.34; }
.lp-b .b-lede em { font-style: italic; color: var(--accent); }
.lp-b .b-facts { display: flex; flex-direction: column; gap: 18px; margin: 6px 0 0; }
.lp-b .b-facts div { display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.lp-b .b-facts dt { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); padding-top: 3px; }
.lp-b .b-facts dd { margin: 0; font-size: 16.5px; }

.lp-b .b-spread { padding: 74px 0; border-top: 1px solid var(--border); }
.lp-b .b-spread-title { font-family: var(--font-serif); font-size: clamp(30px, 3.8vw, 46px); font-weight: 400; line-height: 1.06; letter-spacing: -.025em; margin-bottom: 38px; }
.lp-b .b-spread-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.lp-b .b-look { position: relative; }
.lp-b .b-look-no { position: absolute; top: -14px; left: -6px; font-family: var(--font-serif); font-size: 46px; color: var(--border); line-height: 1; z-index: 0; }
.lp-b .b-look-media { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 14px; }
.lp-b .b-look-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-b .b-look-title { font-family: var(--font-serif); font-size: 23px; font-weight: 400; letter-spacing: -.015em; }
.lp-b .b-look-time { font-size: 14px; color: var(--text-secondary); margin: 3px 0 10px; }
.lp-b .b-look-list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 4px; }
.lp-b .b-look-list li { font-size: 15px; color: var(--text-secondary); padding-left: 12px; position: relative; }
.lp-b .b-look-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--text-secondary); opacity: .5; }
.lp-b .b-look-palette { display: inline-flex; gap: 5px; }
.lp-b .b-look-palette span { width: 15px; height: 15px; border-radius: 4px; border: 1px solid rgba(0,0,0,.08); }

.lp-b .b-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.lp-b .b-post { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: inherit; }
.lp-b .b-post:hover { border-color: var(--text-secondary); }
.lp-b .b-post-meta { font-size: 13.5px; color: var(--accent); font-weight: 600; }
.lp-b .b-post-title { font-family: var(--font-serif); font-size: 20px; font-weight: 600; line-height: 1.3; }

.lp-b .b-outro { background: var(--accent); color: var(--accent-contrast); padding: 80px 0; text-align: center; }
.lp-b .b-outro-title { font-family: var(--font-serif); font-size: clamp(30px, 4.4vw, 52px); font-weight: 600; line-height: 1.12; margin-bottom: 28px; }
.lp-b .b-outro-title em { font-style: italic; }

@media (max-width: 900px) {
    .lp-b .b-cover-inner { grid-template-columns: 1fr; }
    .lp-b .b-masthead { padding: 26px 0 0; }
    .lp-b .b-title { margin-left: 0; text-shadow: none; }
    .lp-b .b-band-inner { grid-template-columns: 1fr; gap: 32px; }
    .lp-b .b-spread-grid { grid-template-columns: 1fr; gap: 34px; }
}

/* ---------- C · Focus ---------- */
.lp-c .c-hero { padding: 76px 0 0; text-align: center; }
.lp-c .c-title { font-family: var(--font-serif); font-size: clamp(38px, 5.2vw, 62px); font-weight: 600; line-height: 1.06; letter-spacing: -.018em; }
.lp-c .c-title em { font-style: italic; color: var(--accent); }
.lp-c .c-sub { color: var(--text-secondary); font-size: 18px; line-height: 1.6; margin: 20px auto 32px; max-width: 560px; }
.lp-c .c-form {
    display: flex; align-items: center; gap: 10px;
    max-width: 620px; margin: 0 auto;
    padding: 8px 8px 8px 20px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
    box-shadow: var(--shadow-lg);
}
.lp-c .c-form--link { text-decoration: none; }
.lp-c .c-form:focus-within, .lp-c .c-form--link:hover { border-color: var(--text-secondary); }
.lp-c .c-form-icon { color: var(--text-secondary); display: inline-flex; flex-shrink: 0; }
.lp-c .c-form-input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-family: var(--font-sans); font-size: 16px; color: var(--text-primary); }
.lp-c .c-form-placeholder { flex: 1; min-width: 0; text-align: left; color: var(--text-secondary); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-c .c-form-btn { flex-shrink: 0; border-radius: 999px; padding: 11px 20px; }
.lp-c .c-note { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; font-size: 14.5px; color: var(--text-secondary); }
.lp-c .c-note span { display: inline-flex; align-items: center; gap: 5px; }
.lp-c .c-note-sep { padding-left: 16px; border-left: 1px solid var(--border); }

.lp-c .c-result { text-align: left; margin-top: 54px; padding: 34px 0 64px; background: var(--surface-secondary); border-top: 1px solid var(--border); }
.lp-c .c-result-head { text-align: center; display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 15px; color: var(--text-secondary); margin-bottom: 22px; }
.lp-c .c-result-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.lp-c .c-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lp-c .c-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.lp-c .c-card-media { position: relative; display: block; aspect-ratio: 4 / 3; }
.lp-c .c-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-c .c-card-time { position: absolute; left: 9px; bottom: 9px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.62); color: #fff; font-size: 12.5px; font-weight: 600; }
.lp-c .c-card-body { display: flex; flex-direction: column; gap: 5px; padding: 13px 14px 14px; }
.lp-c .c-card-title { font-family: var(--font-serif); font-size: 18px; font-weight: 600; line-height: 1.22; }
.lp-c .c-card-garment { font-size: 14px; color: var(--text-secondary); }
.lp-c .c-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.lp-c .c-card-palette { display: inline-flex; gap: 4px; }
.lp-c .c-card-palette span { width: 13px; height: 13px; border-radius: 4px; border: 1px solid rgba(0,0,0,.08); }
.lp-c .c-card-conf { font-size: 13px; font-weight: 600; color: var(--text-secondary); }

.lp-c .c-steps { padding: 72px 0; }
.lp-c .c-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.lp-c .c-step { text-align: center; }
.lp-c .c-step-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); margin-bottom: 14px; }
.lp-c .c-step h3 { font-family: var(--font-serif); font-size: 21px; font-weight: 600; margin-bottom: 6px; }
.lp-c .c-step p { color: var(--text-secondary); font-size: 15px; max-width: 280px; margin-inline: auto; }

.lp-c .c-posts { padding: 0 0 78px; }
.lp-c .c-posts-title { font-family: var(--font-serif); font-size: clamp(26px, 3vw, 34px); font-weight: 600; text-align: center; margin-bottom: 26px; }
.lp-c .c-posts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.lp-c .c-post { display: flex; align-items: center; gap: 14px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: inherit; }
.lp-c .c-post:hover { border-color: var(--text-secondary); }
.lp-c .c-post-thumb { flex: 0 0 76px; height: 56px; border-radius: 6px; overflow: hidden; background: var(--surface-secondary); }
.lp-c .c-post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-c .c-post-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lp-c .c-post-title { font-family: var(--font-serif); font-size: 18px; font-weight: 600; line-height: 1.25; }
.lp-c .c-post-meta { font-size: 13.5px; color: var(--text-secondary); }

@media (max-width: 980px) { .lp-c .c-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
    .lp-c .c-strip { grid-template-columns: 1fr; }
    .lp-c .c-steps-grid { grid-template-columns: 1fr; gap: 30px; }
    .lp-c .c-form { flex-wrap: wrap; border-radius: 20px; padding: 14px; }
    .lp-c .c-form-input, .lp-c .c-form-placeholder { flex-basis: 100%; order: 2; }
    .lp-c .c-form-btn { width: 100%; order: 3; justify-content: center; }
}

/* --------------------------------------------------------------------------
   24 · Share row and explore page
   -------------------------------------------------------------------------- */
.share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 36px 0 0; padding-top: 22px; padding-bottom: 30px; border-top: 1px solid var(--border); }
.share-label { font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); margin-right: 4px; }
.share-btn {
    display: inline-flex; align-items: center; gap: 6px;
    /* Ohne Mindestbreite richtet sich die Pille nach ihrem Inhalt, und „X"
       steht als einzelner Buchstabe wie ein Stummel neben „WhatsApp". */
    min-width: 64px; justify-content: center;
    padding: 11px 20px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface);
    font-size: 15px; font-weight: 500; color: var(--text-secondary);
    cursor: pointer; font-family: var(--font-sans);
}
.share-btn:hover { border-color: var(--text-secondary); color: var(--text-primary); }

.explore-page { padding: 56px 20px 84px; }
.explore-head { text-align: center; margin-bottom: 40px; }
.explore-title { font-family: var(--font-serif); font-size: clamp(34px, 4.6vw, 50px); font-weight: 600; }
.explore-sub { color: var(--text-secondary); margin: 12px auto 0; max-width: 520px; }
.explore-stats { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; margin-top: 20px; font-size: 15px; color: var(--text-secondary); }
.explore-stats strong { color: var(--text-primary); font-size: 17px; }

.explore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.explore-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.explore-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.explore-card-media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--surface-secondary); }
.explore-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.explore-card-count { position: absolute; right: 10px; bottom: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.62); color: #fff; font-size: 13px; font-weight: 600; }
.explore-card-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.explore-card-title { font-family: var(--font-serif); font-size: 21px; font-weight: 600; line-height: 1.25; }
.explore-card:hover .explore-card-title { color: var(--accent); }
.explore-card-excerpt { font-size: 15px; color: var(--text-secondary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.explore-card-meta { font-size: 14px; color: var(--text-secondary); margin-top: 2px; }

.explore-authors { margin-top: 54px; padding-top: 30px; border-top: 1px solid var(--border); }
.explore-authors-title { font-family: var(--font-serif); font-size: 26px; font-weight: 600; margin-bottom: 16px; text-align: center; }
.explore-authors-list { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.explore-author { display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: inherit; font-size: 15px; }
.explore-author:hover { border-color: var(--text-secondary); }
.explore-author span { color: var(--text-secondary); font-size: 14px; }

/* --------------------------------------------------------------------------
   25 · Queued analysis — waiting state on the results page
   -------------------------------------------------------------------------- */
.analysis-pending { max-width: 520px; margin: 60px auto; text-align: center; }
.analysis-pending-spinner {
    display: block;
    width: 38px; height: 38px;
    margin: 0 auto 24px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: pendingSpin .9s linear infinite;
}
@keyframes pendingSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .analysis-pending-spinner { animation-duration: 3s; } }
.analysis-pending-title { font-family: var(--font-serif); font-size: 30px; font-weight: 600; }
.analysis-pending-stage { color: var(--text-secondary); margin: 10px 0 22px; min-height: 22px; }
.analysis-pending-bar { height: 4px; border-radius: 999px; background: var(--surface-secondary); overflow: hidden; }
/* Der Balken lief frueher als Schleife hin und her — Bewegung ohne Aussage.
   Jetzt fuellt er sich nach der Prozentzahl. Die Schleife bleibt als Rueckfall
   fuer den Fall, dass kein Wert ankommt: dann steht kein Balken bei 0 %. */
.analysis-pending-fill { display: block; height: 100%; width: 38%; border-radius: 999px; background: var(--accent); animation: pendingSlide 1.8s ease-in-out infinite; }
.analysis-pending-fill[style*="width"] { animation: none; transition: width .5s cubic-bezier(.3, .7, .4, 1); }
@keyframes pendingSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }

.analysis-pending-percent {
    margin: 0 0 10px;
    font-family: var(--font-serif);
    font-size: 40px;
    line-height: 1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.analysis-pending-percent span { font-size: 20px; color: var(--text-secondary); margin-left: 2px; }
.analysis-pending-note { color: var(--text-secondary); font-size: 15px; margin-top: 20px; line-height: 1.6; }
.analysis-pending-note a { color: var(--accent); font-weight: 500; }

/* ==========================================================================
   Admin — user management
   ========================================================================== */
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}
.admin-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.admin-stat-icon {
    display: inline-flex;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.admin-stat-value { font-size: 26px; font-weight: 600; line-height: 1.1; }
.admin-stat-label { font-size: 14px; color: var(--text-secondary); }

.admin-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.admin-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 280px;
    max-width: 380px;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
}
.admin-search:focus-within { border-color: var(--text-secondary); }
.admin-search-icon { display: inline-flex; color: var(--text-secondary); flex-shrink: 0; }
.admin-search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 15px;
    color: var(--text-primary);
    outline: none;
}
.admin-search-input::-webkit-search-cancel-button { display: none; }
.admin-search-clear {
    display: inline-flex;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.admin-search-clear:hover { color: var(--text-primary); }

.admin-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-filter {
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 14px;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
}
.admin-filter:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.admin-filter.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

.admin-count { font-size: 14px; color: var(--text-secondary); margin-bottom: 10px; }

.admin-table-wrap {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.admin-table th {
    text-align: left;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.admin-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: var(--surface-secondary); }
/* Dim the data of a blocked row, but never its actions — unblocking has to
   stay obvious and clickable. */
.admin-table tr.is-blocked .admin-user,
.admin-table tr.is-blocked .admin-plan,
.admin-table tr.is-blocked .admin-num,
.admin-table tr.is-blocked .admin-date { opacity: .6; }
.admin-num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-date { white-space: nowrap; color: var(--text-secondary); font-size: 14px; }

.admin-user { display: flex; align-items: center; gap: 11px; min-width: 210px; }
.admin-user-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.admin-user-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    flex-wrap: wrap;
}
.admin-user-email,
.admin-user-handle {
    font-size: 13.5px;
    color: var(--text-secondary);
    text-decoration: none;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-user-email:hover, .admin-user-handle:hover { color: var(--text-primary); }
.admin-user-handle { display: inline-flex; align-items: center; gap: 3px; }
.admin-user-handle--none { opacity: .6; }

.admin-tag {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surface-secondary);
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--text-secondary);
    text-transform: uppercase;
}
.admin-tag--admin { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.admin-tag--blocked { background: var(--danger-soft); border-color: transparent; color: var(--danger); }

.admin-plan {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 13px;
    white-space: nowrap;
}
.admin-plan--creator, .admin-plan--studio {
    background: var(--accent-soft);
    border-color: transparent;
    color: var(--text-primary);
    font-weight: 500;
}

.admin-actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.admin-inline-form { display: inline-flex; margin: 0; }

.admin-note-row td { padding-top: 0; border-bottom: 1px solid var(--border); }
.admin-note { font-size: 13.5px; color: var(--danger); }

.admin-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}
.admin-pager-info { font-size: 14px; color: var(--text-secondary); }

@media (max-width: 720px) {
    .admin-toolbar { flex-direction: column; align-items: stretch; }
    .admin-search { max-width: none; }
    .admin-table { font-size: 14.5px; }
}

/* ==========================================================================
   Upgrade dialog — shown instead of an error toast when a plan limit is hit
   ========================================================================== */
.modal-panel--upgrade {
    width: min(440px, calc(100vw - 32px));
    padding: 32px 30px 26px;
    text-align: center;
    border-radius: 16px;
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
}
.modal-close:hover { background: var(--surface-secondary); color: var(--text-primary); }

.upgrade-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--text-primary);
}

.upgrade-eyebrow {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.modal-panel--upgrade .modal-title { font-size: 26px; line-height: 1.2; }
.modal-panel--upgrade .modal-text {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.6;
    max-width: 34ch;
    margin-inline: auto;
}

.modal-actions--upgrade {
    margin-top: 26px;
    justify-content: center;
    flex-wrap: wrap;
}
.modal-actions--upgrade .btn { min-width: 128px; justify-content: center; }

body.has-modal { overflow: hidden; }

@media (max-width: 440px) {
    .modal-actions--upgrade { flex-direction: column-reverse; }
    .modal-actions--upgrade .btn { width: 100%; }
}

/* ==========================================================================
   Legal pages — terms & privacy
   ========================================================================== */
.legal-page { padding: 56px 0 80px; }
.legal-container { max-width: 760px; }

.legal-head { margin-bottom: 36px; }
.legal-eyebrow {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 10px;
}
.legal-title {
    font-family: var(--font-serif);
    font-size: clamp(34px, 5vw, 46px);
    font-weight: 600;
    line-height: 1.1;
}
.legal-updated { margin-top: 10px; font-size: 14.5px; color: var(--text-secondary); }

.legal-body { font-size: 16px; line-height: 1.72; }
.legal-lead {
    font-size: 18px;
    line-height: 1.65;
    padding-bottom: 26px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.legal-body h2 {
    font-family: var(--font-serif);
    font-size: 23px;
    font-weight: 600;
    margin: 38px 0 12px;
}
.legal-body p { margin-bottom: 14px; }
.legal-body ul { margin: 0 0 16px; padding-left: 20px; }
.legal-body li { margin-bottom: 7px; }
.legal-body a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.legal-body a:hover { color: var(--text-secondary); }
.legal-body code {
    font-size: 14.5px;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--surface-secondary);
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 18px;
    font-size: 15px;
}
.legal-table th {
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
}
.legal-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    line-height: 1.55;
}
.legal-table tr td:first-child { font-weight: 500; width: 38%; }
.legal-table tbody tr:last-child td { border-bottom: 0; }

.legal-address {
    font-style: normal;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    line-height: 1.7;
}

.legal-crosslink {
    margin-top: 38px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    font-size: 15px;
    color: var(--text-secondary);
}

.site-footer-operator { font-size: 14px; color: var(--text-secondary); }
.site-footer-operator a { color: inherit; }

@media (max-width: 600px) {
    .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
    .legal-table thead { display: none; }
    .legal-table tr { padding: 12px 0; border-bottom: 1px solid var(--border); }
    .legal-table td { border: 0; padding: 2px 0; }
    .legal-table tr td:first-child { width: auto; }
}

/* Admin — measured Google spend */
.admin-cost {
    margin-bottom: 22px;
    padding: 18px 20px 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.admin-cost-head { margin-bottom: 14px; }
.admin-cost-title {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}
.admin-cost-sub { display: block; margin-top: 2px; font-size: 14px; color: var(--text-secondary); }

.admin-cost-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.admin-cost-item { display: flex; flex-direction: column; gap: 2px; }
.admin-cost-value { font-size: 21px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.admin-cost-label { font-size: 13.5px; color: var(--text-secondary); }

.admin-table--compact { margin-top: 4px; border: 0; }
.admin-table--compact th { padding: 10px 10px 8px; }
.admin-table--compact td { padding: 8px 10px; }
.admin-table--compact code { font-size: 13.5px; }

.admin-cost-cell { font-weight: 500; font-variant-numeric: tabular-nums; }
.admin-dim { color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Sign-in row: remember me on the left, the reset link on the right */
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-forgot { font-size: 14.5px; color: var(--text-secondary); text-decoration: none; }
.auth-forgot:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Consent checkbox on the sign-up form — multi-line, so the box stays top-aligned */
.form-check--terms { align-items: flex-start; gap: 9px; line-height: 1.5; font-size: 15px; }
.form-check--terms input { margin-top: 2px; flex-shrink: 0; }
.form-check--terms a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Waiting page gave up polling — calm it down instead of spinning forever */
.analysis-pending.is-stalled .analysis-pending-spinner { animation: none; opacity: .3; }
.analysis-pending.is-stalled .analysis-pending-fill { animation: none; }
.analysis-pending.is-stalled .analysis-pending-stage a { text-decoration: underline; text-underline-offset: 3px; }

/* Inline notice inside a settings panel */
.notice {
    padding: 14px 16px;
    margin-bottom: 18px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface-secondary);
    font-size: 15px;
    line-height: 1.6;
}
.notice p { margin: 0 0 10px; }
.notice p:last-child { margin-bottom: 0; }
.notice--warn { background: var(--danger-soft); border-color: transparent; }
.notice--warn strong { color: var(--danger); }

/* Admin — system health and open alerts -------------------------------- */
.admin-health {
    margin-bottom: 22px;
    padding: 18px 20px 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.admin-health.is-alarmed { border-color: var(--danger); }
.admin-cost-value.is-bad { color: var(--danger); }

.admin-alerts { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 10px; }
.admin-alert {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
}
.admin-alert--urgent  { border-left-color: var(--danger); }
.admin-alert--warning { border-left-color: var(--text-secondary); }
.admin-alert--info    { border-left-color: var(--border); }
.admin-alert-main { min-width: 0; }
.admin-alert-title { font-size: 15px; font-weight: 600; line-height: 1.3; }
.admin-alert-count {
    margin-left: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}
.admin-alert-meta { margin-top: 2px; font-size: 13.5px; color: var(--text-secondary); }
.admin-alert-body {
    margin-top: 8px;
    max-height: 160px;
    overflow: auto;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-secondary);
    white-space: pre-wrap;
}

/* Quota line above the analyse form ------------------------------------ */
.analyze-quota {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 14px auto 0;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 14.5px;
    color: var(--text-secondary);
}
.analyze-quota strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.analyze-quota a { margin-left: 2px; font-weight: 500; text-decoration: underline; }
.analyze-quota--low  { border-color: var(--text-secondary); }
.analyze-quota--warn { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.analyze-quota--warn strong,
.analyze-quota--warn a { color: var(--danger); }

/* Status of an analysis in the list ------------------------------------ */
.analysis-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge--queued  { background: var(--surface-secondary); color: var(--text-secondary); border: 1px solid var(--border); }
.badge--running { background: var(--accent-soft); color: var(--accent); }
.badge--failed  { background: var(--danger-soft); color: var(--danger); }
.analysis-error { margin-top: 4px; font-size: 14px; color: var(--danger); }

/* Renewal / cancellation date in Settings ------------------------------ */
.plan-renewal {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
    font-size: 15px;
}
.plan-renewal svg { flex: none; margin-top: 2px; }
.plan-renewal.is-ending { border-color: var(--danger); color: var(--danger); }

.sidebar-help { margin-bottom: 6px; }

/* /creators — the explainer page ---------------------------------------- */
.cr-hero { padding: 74px 0 54px; text-align: center; }
.cr-hero-inner { max-width: 780px; }
.cr-eyebrow {
    font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-secondary); margin-bottom: 14px;
}
.cr-headline {
    font-family: var(--font-serif); font-size: clamp(30px, 5vw, 50px);
    line-height: 1.1; font-weight: 600;
}
.cr-headline em { font-style: italic; color: var(--text-secondary); }
.cr-sub {
    max-width: 620px; margin: 20px auto 0;
    font-size: 17px; line-height: 1.65; color: var(--text-secondary);
}
.cr-actions { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.cr-actions-note { font-size: 14.5px; color: var(--text-secondary); }

.cr-h2 {
    font-family: var(--font-serif); font-size: clamp(23px, 3.4vw, 32px);
    line-height: 1.2; text-align: center; margin-bottom: 30px;
}
.cr-h2 em { font-style: italic; color: var(--text-secondary); }

.cr-demo { padding: 56px 0; background: var(--surface-secondary); }
.cr-demo-grid {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 30px; align-items: start;
}
@media (max-width: 900px) { .cr-demo-grid { grid-template-columns: 1fr; } }

.cr-player-frame {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden;
    border-radius: var(--radius-lg); background: #000;
    border: 1px solid var(--border);
}
.cr-player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cr-player-meta { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.cr-player-meta strong { color: var(--text-primary); font-size: 16px; }

.cr-looks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cr-look {
    position: relative;
    padding: 15px 16px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.cr-look-jump {
    position: absolute; right: 12px; top: 13px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 999px;
    background: var(--accent); color: var(--accent-contrast);
    font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.cr-look-jump:hover { background: var(--accent-hover); color: var(--accent-contrast); }
.cr-look-title { font-size: 16px; font-weight: 600; line-height: 1.3; padding-right: 70px; }
.cr-look-line { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--text-secondary); }
.cr-look-line--muted { font-size: 14px; opacity: .82; }
.cr-look-colors { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.cr-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12); flex: none; }
.cr-look-colornames { margin-left: 4px; font-size: 13px; color: var(--text-secondary); }

.cr-demo-note {
    max-width: 640px; margin: 28px auto 0; text-align: center;
    font-size: 15px; line-height: 1.6; color: var(--text-secondary);
}

.cr-compare { padding: 60px 0; }
.cr-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 700px) { .cr-compare-grid { grid-template-columns: 1fr; } }
.cr-col { padding: 24px 26px 26px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.cr-col h3 { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.cr-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cr-col li { position: relative; padding-left: 24px; font-size: 15.5px; line-height: 1.5; }
.cr-col li::before {
    position: absolute; left: 0; top: 0;
    font-size: 16px; line-height: 1.5;
}
.cr-col--before { background: var(--surface); }
.cr-col--before h3 { color: var(--text-secondary); }
.cr-col--before li { color: var(--text-secondary); }
.cr-col--before li::before { content: "×"; }
.cr-col--after { background: var(--surface); border-color: var(--accent); }
.cr-col--after li::before { content: "→"; }

.cr-price { padding: 60px 0 76px; background: var(--surface-secondary); }
.cr-price-inner { max-width: 660px; text-align: center; }
.cr-price-sub { font-size: 17px; line-height: 1.65; color: var(--text-secondary); }
.cr-actions--center { margin-top: 26px; }

/* /look/{token} — the page you send someone ----------------------------- */
.shared { padding: 40px 0 70px; }
.shared-head { max-width: 780px; margin: 0 auto 26px; text-align: center; }
.shared-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; color: var(--text-secondary);
}
.shared-title {
    font-family: var(--font-serif); font-size: clamp(26px, 4vw, 40px);
    line-height: 1.15; font-weight: 600; margin-top: 10px;
}
.shared-summary {
    margin-top: 12px; font-size: 17px; line-height: 1.65; color: var(--text-secondary);
}

.shared-player {
    position: relative; max-width: 860px; margin: 0 auto 40px;
    aspect-ratio: 16 / 9; overflow: hidden;
    border-radius: var(--radius-lg); background: #000; border: 1px solid var(--border);
}
.shared-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.shared-cover { display: block; max-width: 860px; margin: 0 auto 40px; border-radius: var(--radius-lg); overflow: hidden; }
.shared-cover img { display: block; width: 100%; }

.shared-looks { display: grid; gap: 18px; max-width: 860px; margin: 0 auto; }
.shared-look {
    display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px;
    padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface);
}
@media (max-width: 640px) { .shared-look { grid-template-columns: 1fr; } }

.shared-look-media {
    position: relative; overflow: hidden; border-radius: var(--radius-md);
    background: #17171a; aspect-ratio: 4 / 3;
}
.shared-look-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shared-look-no {
    position: absolute; z-index: 2; left: 8px; top: 8px;
    display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(20, 20, 20, .72); color: #fff; font-size: 12.5px; font-weight: 600;
}
.shared-look-time {
    position: absolute; z-index: 2; right: 8px; bottom: 8px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 999px;
    background: rgba(20, 20, 20, .78); color: #fff;
    font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.shared-look-time:hover { background: var(--accent); color: var(--accent-contrast); }

.shared-look-title { font-family: var(--font-serif); font-size: 21px; line-height: 1.25; font-weight: 600; }
.shared-look-desc { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.shared-look-label {
    margin-top: 12px; font-size: 12.5px; letter-spacing: .09em;
    text-transform: uppercase; color: var(--text-secondary);
}
.shared-look-list { margin: 5px 0 0; padding-left: 17px; display: grid; gap: 3px; }
.shared-look-list li { font-size: 15px; line-height: 1.5; }
.shared-look-colors { display: flex; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.shared-swatch { width: 17px; height: 17px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12); flex: none; }
.shared-colornames { margin-left: 4px; font-size: 13.5px; color: var(--text-secondary); }
.shared-look-tags {
    margin-top: 9px; font-size: 13px; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-secondary);
}

.shared-cta {
    max-width: 620px; margin: 52px auto 0; padding: 34px 30px 36px;
    text-align: center; border: 1px solid var(--border);
    border-radius: var(--radius-lg); background: var(--surface-secondary);
}
.shared-cta h2 { font-family: var(--font-serif); font-size: 25px; font-weight: 600; }
.shared-cta p { margin: 10px auto 20px; max-width: 440px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.shared-cta-note { display: block; margin-top: 12px; font-size: 14px; color: var(--text-secondary); }

/* /creators — a look card is a chapter of the video --------------------- */
.cr-look { display: block; cursor: default; }
.cr-look-text { display: block; min-width: 0; }
.cr-look-jump {
    position: absolute; right: 12px; top: 13px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border: 0; border-radius: 999px;
    background: var(--accent); color: var(--accent-contrast);
    font-family: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums;
    cursor: pointer; transition: background .15s ease;
}
.cr-look-jump:hover { background: var(--accent-hover); }
.cr-look:hover { border-color: var(--text-secondary); }

/* The still is now cut from the video at the look's own timestamp, so it is
   the outfit the card describes — worth showing again. */
.cr-look { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; }
.cr-look-media {
    display: block; overflow: hidden; border-radius: var(--radius-md);
    background: var(--surface-secondary); aspect-ratio: 16 / 10;
}
.cr-look-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 480px) { .cr-look { grid-template-columns: 78px minmax(0, 1fr); } }

/* /creators — the page performs the transformation ---------------------- */
.cr-replay-row { text-align: center; margin: -18px 0 26px; }
.cr-replay {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text-secondary);
    font-family: inherit; font-size: 14px; cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.cr-replay:hover { color: var(--text-primary); border-color: var(--text-secondary); }

/* Before the run, and between runs, the cards are simply not there yet. */
.js-demo-stage.is-playing .cr-look {
    opacity: 0;
    transform: translateY(14px);
    animation: cr-arrive .5s cubic-bezier(.22, .68, .36, 1) forwards;
    animation-delay: calc(var(--step) * .26s + .15s);
}
@keyframes cr-arrive {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.js-demo-stage.is-playing .cr-look-media img {
    animation: cr-reveal .6s ease forwards;
    animation-delay: calc(var(--step) * .26s + .3s);
    opacity: 0;
}
@keyframes cr-reveal {
    from { opacity: 0; filter: blur(6px); transform: scale(1.05); }
    to   { opacity: 1; filter: none; transform: none; }
}

/* A still is only ever near the right moment; the timestamp is exact, so the
   image is a door into the video rather than a picture to trust. */
.look-media--jump { cursor: pointer; }
.look-media--jump::after {
    content: "";
    position: absolute; inset: 0; z-index: 2;
    background: rgba(20, 20, 20, 0);
    transition: background .15s ease;
}
.look-media--jump:hover::after { background: rgba(20, 20, 20, .18); }
.look-media--jump:hover .look-timestamp { background: var(--accent); color: var(--accent-contrast); }

/* A button that is working says so — a disabled one just looks broken. */
.btn.is-working { position: relative; padding-left: 38px; opacity: 1; cursor: progress; }
.btn.is-working svg { opacity: 0; }
.btn.is-working::before {
    content: "";
    position: absolute; left: 15px; top: 50%; width: 14px; height: 14px;
    margin-top: -7px; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* A look picture is a door into the video, not a picture to trust. */
.article-look-media--jump { display: block; cursor: pointer; position: relative; }
.article-look-media--jump::after {
    content: ""; position: absolute; inset: 0;
    background: rgba(20, 20, 20, 0); transition: background .15s ease;
}
.article-look-media--jump:hover::after { background: rgba(20, 20, 20, .16); }
.article-look-media--jump:hover .article-look-time { background: var(--accent); color: var(--accent-contrast); }
.look-tile[target] .look-tile-time { transition: background .15s ease, color .15s ease; }
.look-tile[target]:hover .look-tile-time { background: var(--accent); color: var(--accent-contrast); }

/* The article's source video — one click from the top of the page. */
/* Der Kopf des Artikels ist mittig gesetzt — Titel, Verfasserin, Anriss.
   Die Knopfreihe darunter gehoert dazu und stand vorher als einzige links.
   Der Hinweissatz bekommt eine eigene Zeile (flex-basis: 100%), sonst haengt
   er neben dem zweiten Knopf und die Reihe steht wieder aus der Mitte. */
.article-source {
    display: flex; align-items: center; justify-content: center;
    gap: 14px; flex-wrap: wrap; margin-top: 18px;
}
.article-source-note {
    flex-basis: 100%; text-align: center;
    font-size: 14px; color: var(--text-secondary);
}
.article-cover-link { position: relative; display: block; }
.article-cover-play {
    position: absolute; inset: 0; display: grid; place-items: center; color: #fff;
}
.article-cover-play svg {
    padding: 14px; border-radius: 50%; box-sizing: content-box;
    background: rgba(20, 20, 20, .58); transition: background .15s ease, transform .15s ease;
}
.article-cover-link:hover .article-cover-play svg { background: rgba(20, 20, 20, .8); transform: scale(1.06); }

/* Look mini players ---------------------------------------------------------
   A published thumbnail is only ever *near* the right moment — YouTube offers
   three per video, so eleven looks used to share three pictures and a red dress
   ended up under a black one. The timestamp is exact, so the card stops showing
   a picture of the outfit and shows the outfit: muted, six to twenty-five
   seconds from its own second, over and over.

   A player needs a few seconds to produce its first frame, and for those
   seconds the card has to already look like a video — a bare colour gradient
   reads as unfinished. So the poster and the play mark are in the HTML from the
   first paint, and the clip fades in over them. Clicks pass straight through to
   the card's link into the video. */
.look-embed {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}
.look-embed-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    background: rgba(12, 12, 12, .55);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    transition: opacity .4s ease;
}
.look-embed-play::after {
    content: "";
    position: absolute;
    left: 17px;
    top: 13px;
    border-left: 14px solid rgba(255, 255, 255, .92);
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}
.look-embed iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    opacity: 0;
    transition: opacity .4s ease;
    /* The pointer must never reach the player. A mouse resting over a YouTube
       frame brings up its whole apparatus — video title, channel name, pause
       button, "More videos", the logo — straight over the outfit, and no embed
       parameter turns that off. Clicks still land, on the card's own link
       underneath, which is where they belonged anyway. */
    pointer-events: none;
    /* The player is 16:9 and the cards are not; scaling up crops the letterbox
       the way object-fit: cover would, and hides the player's own edges. */
    transform: translate(-50%, -50%) scale(var(--embed-cover, 1.06));
}
.look-embed.is-playing iframe { opacity: 1; }
.look-embed.is-playing .look-embed-play { opacity: 0; }

/* While the clip jumps back to its own second, the player draws its pause
   mark and its logo over the outfit. Hide the frame for those few hundred
   milliseconds and let the still underneath hold the card — quicker out than
   in, so the seam is gone before it registers and the return is soft. */
.look-embed.is-seeking iframe { opacity: 0; transition: opacity .12s ease; }

.look-media .look-embed         { --embed-cover: 1.14; }  /* 16:10 */
.look-tile-media .look-embed    { --embed-cover: 1.36; }  /* 4:3   */
.shared-look-media .look-embed  { --embed-cover: 1.36; }  /* 4:3   */
.article-look-media .look-embed { --embed-cover: 1.04; }  /* 16:9  */

/* Shorts are filmed upright: fit them by height instead of cropping a 9:16
   video into a 16:9 hole, which would leave a strip of outfit between bars. */
.look-embed--portrait { background: #0c0c0c; }
.look-embed--portrait iframe {
    width: auto;
    height: 100%;
    aspect-ratio: 9 / 16;
    transform: translate(-50%, -50%);
}

/* No autoplay wanted: the card is still a video, just a still one. */
@media (prefers-reduced-motion: reduce) { .look-embed iframe { display: none; } }


/* Password field with a reveal, in place of a confirmation field ------------- */
.field-password { position: relative; }
.field-password .form-input { padding-right: 62px; }
.field-password-toggle {
    position: absolute;
    right: 10px;
    top: 33px;
    padding: 5px 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.field-password-toggle:hover { color: var(--text-primary); background: var(--surface-secondary); }

/* Cookie notice --------------------------------------------------------------
   Along the bottom, quiet, and out of the way of the page it sits on. */
.cookie-bar {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    max-width: 780px;
    margin: 0 auto;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    animation: cookie-rise .35s ease both;
}
/* The class sets display:flex, which outranks the browser's own
   [hidden] { display:none } — same guard as .modal and .loading-overlay. */
.cookie-bar[hidden] { display: none; }
@keyframes cookie-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .cookie-bar { animation: none; } }
.cookie-bar-text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text-secondary);
}
.cookie-bar-text a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px; }
.cookie-bar-actions { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 620px) {
    .cookie-bar { flex-direction: column; align-items: stretch; gap: 12px; }
    .cookie-bar-actions { justify-content: flex-end; }
}

/* Search guides ---------------------------------------------------------------
   Pages written for what people type into Google. Set like an article and not
   like a landing page: one column, generous measure, nothing in the margin to
   distract from reading. */
.guide { padding: 48px 0 72px; }

/* Two columns: the sidebar stays in view so a long guide can be navigated
   without scrolling back to the top. Title, video and text share one column so
   they line up on the same left edge. */
.guide-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}
.guide-inner { max-width: 720px; }
.guide-aside { position: sticky; top: 88px; display: grid; gap: 22px; }
.guide .guide-toc h2, .guide .guide-aside-more h2 {
    font-family: var(--font-sans, inherit);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 10px;
}
.guide-toc ul, .guide-aside-more ul { list-style: none; margin: 0; padding: 0; }
.guide-toc li, .guide-aside-more li { margin: 0 0 7px; }
.guide-toc a, .guide-aside-more a {
    display: block;
    font-size: 15px;
    line-height: 1.45;
    color: var(--text-secondary);
    text-decoration: none;
    padding-left: 11px;
    border-left: 2px solid var(--border);
}
.guide-toc a:hover, .guide-aside-more a:hover { color: var(--text-primary); }
.guide-toc a.is-here { color: var(--text-primary); border-left-color: var(--accent); font-weight: 600; }
.guide-aside-card {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.guide-aside-card p { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.guide-aside-card p strong { color: var(--text-primary); }
@media (max-width: 900px) {
    .guide-layout { grid-template-columns: 1fr; gap: 26px; }
    .guide-aside { position: static; order: 2; }
    .guide-inner { order: 1; }
}
.guide-eyebrow {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 10px;
}
.guide-title {
    font-family: var(--font-serif);
    font-size: clamp(30px, 4.4vw, 44px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0 0 18px;
    text-wrap: balance;
}
.guide-lead { font-size: 19px; line-height: 1.65; color: var(--text-secondary); margin: 0 0 32px; }
.guide h2 {
    font-family: var(--font-serif);
    font-size: 25px;
    font-weight: 600;
    margin: 40px 0 12px;
}
.guide p { font-size: 17px; line-height: 1.75; margin: 0 0 16px; }
.guide ul, .guide ol { margin: 0 0 18px; padding-left: 22px; }
.guide li { font-size: 17px; line-height: 1.7; margin-bottom: 10px; }
.guide strong { font-weight: 600; color: var(--text-primary); }

.guide-shot { margin: 30px 0 34px; }
.guide-shot video {
    display: block;
    width: 100%;
    height: auto;
    /* A demo that fills the whole first screen buries the article it belongs to. */
    max-height: 46vh;
    object-fit: cover;
    object-position: top;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}
.guide-shot figcaption {
    margin-top: 10px;
    font-size: 14.5px;
    color: var(--text-secondary);
    text-align: center;
}

.guide-cta {
    margin: 44px 0 8px;
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    text-align: center;
}
.guide-cta h2 { margin: 0 0 8px; font-size: 22px; }
.guide-cta p { color: var(--text-secondary); margin: 0 0 18px; }

.guide-more { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--border); }
.guide-more h2 { font-size: 19px; margin: 0 0 10px; }
.guide-more ul { list-style: none; padding: 0; margin: 0; }
.guide-more li { margin-bottom: 8px; }
.guide-more a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Mini guides under the hero demo ---------------------------------------------
   Somebody who has just watched the demo is the most likely person to read how
   it fits their own work, so the two guides sit here rather than in a footer. */
.hero-guides { position: relative; z-index: 2; width: 100%; margin-top: 34px; }
.hero-guides-label {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: left;
}
.hero-guides-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hero-guide {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    text-decoration: none;
    text-align: left;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.hero-guide:hover { border-color: var(--text-secondary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.hero-guide-thumb {
    flex: 0 0 124px;
    height: 84px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface-secondary);
}
.hero-guide-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.hero-guide-body { display: block; min-width: 0; }
.hero-guide-body strong { display: block; font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 5px; }
.hero-guide-body span { display: block; font-size: 16px; line-height: 1.5; color: var(--text-secondary); }
@media (max-width: 640px) { .hero-guides-row { grid-template-columns: 1fr; } }

/* The line that goes under her video ----------------------------------------
   Sits between the video and the looks, where somebody who has just seen the
   result is deciding what to do with it. */
.yt-line {
    margin: 26px 0 30px;
    padding: 20px 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}
.yt-line-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.yt-line-icon {
    flex: 0 0 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent);
}
.yt-line-title { margin: 0 0 3px; font-size: 17px; font-weight: 600; }
.yt-line-sub { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-secondary); }
.yt-line-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--background);
}
.yt-line-text {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.yt-line-foot { margin: 10px 0 0; font-size: 13px; color: var(--text-secondary); }
@media (max-width: 620px) {
    .yt-line-box { flex-direction: column; align-items: stretch; }
    .yt-line-text { white-space: normal; overflow: visible; }
}

/* The creator programme — the band on the landing pages and the application
   page. Two columns from 960px up: the argument on the left, the form on the
   right, both visible without scrolling. ---------------------------------- */
.apply-band { padding: 46px 0; background: var(--surface-secondary); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.apply-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.apply-band-copy { flex: 1 1 420px; }
.apply-band-eyebrow { font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px; }
.apply-band-title { font-family: var(--font-serif); font-size: clamp(22px, 3.2vw, 30px); line-height: 1.18; margin-bottom: 10px; }
.apply-band-text { font-size: 16.5px; line-height: 1.6; color: var(--text-secondary); max-width: 62ch; }
.apply-band-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.apply-band-note { font-size: 14.5px; color: var(--text-secondary); }
.apply-band-note a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px; }

/* --- the application page ------------------------------------------------ */
.ap-hero { position: relative; padding: 0 0 64px; }

.ap-grid {
    display: grid; grid-template-columns: 1fr; gap: 40px;
    padding-top: 52px; align-items: start;
}
@media (min-width: 960px) {
    .ap-grid { grid-template-columns: minmax(0, 1fr) minmax(430px, 480px); gap: 64px; }
    .ap-form-col { position: sticky; top: 24px; }
}

.ap-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px 6px 10px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface);
    font-size: 14px; letter-spacing: .01em; color: var(--text-secondary);
    margin-bottom: 22px;
}
.ap-badge-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 0 3px var(--surface-secondary);
}
/* Arriving from her own profile page: the badge carries her name, so it is
   longer than the usual one and has to be allowed to wrap. */
.ap-badge--claim {
    color: var(--text-primary); font-weight: 600;
    max-width: 100%;
}

.ap-headline {
    font-family: var(--font-serif); font-size: clamp(32px, 4.6vw, 52px);
    line-height: 1.06; font-weight: 600; letter-spacing: -.015em;
}
.ap-headline em { font-style: italic; color: var(--text-secondary); }

.ap-sub { margin-top: 20px; font-size: 18px; line-height: 1.62; color: var(--text-secondary); max-width: 54ch; }
.ap-sub strong { color: var(--text-primary); font-weight: 600; }

.ap-gets { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; max-width: 56ch; }
.ap-gets li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.55; color: var(--text-secondary); }
.ap-gets strong { color: var(--text-primary); font-weight: 600; }
.ap-gets-icon {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px;
    background: var(--surface-secondary); color: var(--text-primary);
}

.ap-proof {
    display: flex; flex-wrap: wrap; gap: 34px;
    margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--border);
}
.ap-proof-item { display: flex; flex-direction: column; gap: 4px; }
.ap-proof-value { font-family: var(--font-serif); font-size: 28px; line-height: 1; }
.ap-proof-label { font-size: 14px; color: var(--text-secondary); max-width: 18ch; line-height: 1.4; }

/* The form card: the one raised surface on the page. */
.ap-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; padding: 30px 30px 26px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 34px -18px rgba(0,0,0,.28);
}
.ap-card-head { margin-bottom: 22px; }
.ap-form { display: grid; gap: 16px; }
.ap-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ap-textarea { min-height: 84px; resize: vertical; line-height: 1.55; font-family: inherit; }
.ap-fine { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); text-align: center; }
/* Shortened to one line, the fine print sat against the second choice. */
.ap-choices + .ap-fine { margin-top: 16px; }
.ap-fine a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.ap-alt { margin-top: 16px; text-align: center; font-size: 15px; color: var(--text-secondary); }

/* Off-screen rather than display:none, which some bots skip. */
.ap-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The colours really read out of the last videos, as a thin ribbon. */
.ap-ribbon { display: flex; height: 4px; width: 100%; }
.ap-ribbon span { flex: 1 1 auto; }

/* The application card, step by step ------------------------------------- */
.ap-card-kicker {
    font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--text-secondary); margin-bottom: 14px;
}
.ap-step-pane { display: block; }
.ap-step-pane[hidden] { display: none; }
.ap-card-title {
    font-family: var(--font-serif); font-size: 26px; line-height: 1.12;
    margin-bottom: 14px;
}
.ap-card-sub { margin: 8px 0 18px; font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.ap-hint { font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin-top: 8px; }
.ap-fields { display: grid; gap: 14px; margin-bottom: 20px; }
.ap-back {
    appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
    font-size: 14.5px; color: var(--text-secondary); margin-bottom: 12px;
}
.ap-back:hover { color: var(--text-primary); }

/* The two ways in, as cards you press. */
.ap-choices { display: grid; gap: 10px; margin-top: 20px; }
.ap-choice {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 15px 16px; cursor: pointer; text-align: left;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.ap-choice:hover { border-color: var(--text-secondary); transform: translateY(-1px); }
.ap-choice-icon {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px; font-size: 18px;
    background: var(--surface); border: 1px solid var(--border);
}
.ap-choice-text { flex: 1 1 auto; font-size: 15px; line-height: 1.45; color: var(--text-secondary); }
.ap-choice-text strong { display: block; font-size: 15.5px; color: var(--text-primary); margin-bottom: 2px; }
.ap-choice-arrow { color: var(--text-secondary); font-size: 19px; }

/* The steps of the application, stacked: the one she is on is open, the ones
   still to come stay visible but quiet. */
.ap-block {
    margin-top: 12px; padding: 16px; border-radius: 12px;
    border: 1px solid var(--border); background: var(--surface);
}
.ap-block.is-open { background: var(--surface-secondary); }
.ap-block.is-quiet,
.ap-block.is-done {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; color: var(--text-secondary); font-size: 15px;
}
.ap-block.is-quiet { background: var(--surface-secondary); opacity: .62; }
.ap-block-head { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.ap-block-n {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); color: var(--surface); font-size: 13.5px;
}
.ap-block.is-quiet .ap-block-n { background: var(--border); color: var(--text-secondary); }
.ap-block.is-done .ap-block-n { background: var(--surface-secondary); color: var(--text-secondary); border: 1px solid var(--border); }
.ap-block .ap-fields { margin-bottom: 16px; }

/* The post she publishes. */
.ap-post {
    margin-top: 18px; padding: 16px; border-radius: 12px;
    border: 1px solid var(--border); background: var(--surface-secondary);
}
.ap-post-head { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.ap-post-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); color: var(--surface); font-size: 13.5px;
}
.ap-post-image { display: block; width: 100%; border-radius: 9px; margin-bottom: 12px; }
.ap-post-image--empty {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 130px; padding: 18px; border: 1px dashed var(--border);
    background: var(--surface); color: var(--text-secondary); font-size: 14px; line-height: 1.5;
}
.ap-caption { font-size: 15px; line-height: 1.55; min-height: 150px; resize: vertical; font-family: inherit; background: var(--surface); }
.ap-post-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ap-post-actions .btn { flex: 1 1 auto; justify-content: center; }

.ap-steps { padding: 52px 0 72px; background: var(--surface-secondary); border-top: 1px solid var(--border); }
.ap-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.ap-step h3 { font-size: 17px; margin: 12px 0 6px; }
.ap-step p { font-size: 15.5px; line-height: 1.6; color: var(--text-secondary); }
.ap-step-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface);
    font-size: 14.5px; color: var(--text-secondary);
}

@media (max-width: 560px) {
    .ap-row { grid-template-columns: 1fr; }
    .ap-card { padding: 24px 20px 22px; border-radius: 14px; }
    .ap-proof { gap: 22px; }
}

.admin-applications { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.admin-application {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
    padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface); flex-wrap: wrap;
}
.admin-application-main { flex: 1 1 380px; min-width: 0; }
.admin-application-name { font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.admin-application-when { font-weight: 400; font-size: 14px; color: var(--text-secondary); margin-left: 8px; }
.admin-application-meta { font-size: 14.5px; color: var(--text-secondary); line-height: 1.6; word-break: break-word; }
.admin-application-message {
    margin-top: 10px; padding: 10px 12px; border-radius: 8px;
    background: var(--surface-secondary); font-size: 15px; line-height: 1.55;
    white-space: pre-wrap;
}
.admin-application-actions { display: flex; gap: 8px; align-items: center; }

/* "How it works" shows the app's own output, so it needs its own small pieces.
   Three cards of equal height: the demo box grows, the words above it do not. */
.how-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; align-items: stretch; }
.how-step { display: flex; flex-direction: column; }
.how-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.how-n {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--accent); color: var(--surface); font-size: 14.5px; font-weight: 600;
}
.how-step h3 { font-size: 18px; line-height: 1.3; }
.how-say { font-size: 15.5px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 14px; min-height: 46px; }
.how-demo {
    flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px;
    padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface);
}
.how-note { font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin-top: auto; }
.how-note strong { color: var(--text-primary); font-weight: 600; }

/* The app's own field, at rest */
.how-field {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 9px 9px 13px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface-secondary); color: var(--text-secondary);
}
.how-field code {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; color: var(--text-primary);
}
.how-field-go {
    flex: 0 0 auto; padding: 6px 14px; border-radius: 999px;
    background: var(--accent); color: var(--surface); font-size: 14px; font-weight: 500;
}

.how-looks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.how-looks li { display: flex; align-items: flex-start; gap: 10px; }
.how-look-time {
    flex: 0 0 auto; padding: 2px 7px; border-radius: 999px; background: var(--surface-secondary);
    font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.how-look-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.how-look-body strong { font-size: 15px; font-weight: 600; }
.how-look-body span { font-size: 14px; line-height: 1.45; color: var(--text-secondary); }
.how-look-colors { flex: 0 0 auto; display: flex; gap: 3px; padding-top: 4px; }
.how-look-colors span { width: 11px; height: 11px; border-radius: 3px; border: 1px solid var(--border); }

.how-post { display: flex; flex-direction: column; gap: 6px; text-decoration: none; height: 100%; }
.how-post-site { font-size: 13px; letter-spacing: .03em; color: var(--text-secondary); }
.how-post-title { font-family: var(--font-serif); font-size: 19px; line-height: 1.25; color: var(--text-primary); }
.how-post-excerpt { font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); }
.how-post-open {
    display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 10px;
    font-size: 14.5px; color: var(--text-primary);
}
.how-post:hover .how-post-open { text-decoration: underline; text-underline-offset: 3px; }

/* The hero centres its own text; the card inside it reads as a form, not as
   a headline, so it keeps its own alignment. */
/* The stage's decorative gradient was designed for the fanned look cards.
   Behind the application card it only muddied the surface, so this variant
   drops it and the card stands on the page's own background. The z-index
   guard stays: the gradient is positioned and would otherwise paint OVER
   static children. */
.hero-stage--shot::before { display: none; }
.hero-stage--shot .ap-form-col { position: relative; z-index: 1; }
.hero-stage--shot .ap-form-col,
.hero-stage--shot .ap-card { text-align: left; }
.hero-stage--shot .ap-card { max-width: 520px; margin: 0 auto; }
.hero-stage--shot .ap-alt { text-align: center; }

/* Creator profile — a page about somebody who has not arrived yet -------------
   It has to read as a finished page rather than a stub, or the invitation to
   claim it means nothing. */
.creator-profile { padding: 40px 0 72px; }
.cp-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 36px;
    align-items: start;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
}
.cp-eyebrow {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.cp-name {
    margin: 0 0 10px;
    font-family: var(--font-serif);
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 600;
    line-height: 1.1;
}
.cp-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 15px; color: var(--text-secondary); }
.cp-meta a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }

.cp-claim {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.cp-claim-title { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.cp-claim-text { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.cp-claim-foot { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.cp-claim-foot a { color: var(--text-secondary); text-decoration: underline; }
.cp-claim-beispiel { margin: 12px 0 0; font-size: 14.5px; }
.cp-claim-beispiel a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.cp-claim-beispiel a:hover { color: var(--text-primary); }

/* Nach dem Claim steht an derselben Stelle, wem die Seite gehoert. Dieselbe
   Schachtel wie der Claim-Kasten, damit die Kopfzeile ihre zweite Spalte
   behaelt — und ein Weg hinueber zu /@handle, wo ihre Artikel stehen. */
.cp-owner {
    display: block;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cp-owner:hover { border-color: var(--text-primary); box-shadow: var(--shadow-md); }
.cp-owner-title {
    display: block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.cp-owner-card { display: flex; gap: 14px; align-items: flex-start; }
.cp-owner-card .avatar { flex: none; }
.cp-owner-body { display: block; min-width: 0; }
.cp-owner-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}
.cp-owner-handle { display: block; margin-top: 2px; font-size: 14px; color: var(--text-secondary); }
.cp-owner-bio { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.cp-owner-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 15px;
    font-weight: 600;
}
.cp-owner:hover .cp-owner-cta { text-decoration: underline; text-underline-offset: 3px; }

.cp-section { margin-top: 38px; }
.cp-section-title { font-family: var(--font-serif); font-size: 24px; font-weight: 600; margin: 0 0 16px; }
.cp-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cp-video {
    display: flex; align-items: center; gap: 13px;
    padding: 11px; border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface); text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.cp-video:hover { border-color: var(--text-secondary); transform: translateY(-2px); }
.cp-video-thumb { flex: 0 0 92px; height: 60px; border-radius: var(--radius-md); overflow: hidden; background: #17171a; }
.cp-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-video-body strong { display: block; font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.cp-video-body span { font-size: 14px; color: var(--text-secondary); }

/* One video, then its looks in a single row of three. The rest are in the
   page but folded away, so "see more" costs no request and no wait. */
.cp-vid { margin-bottom: 30px; }
.cp-vid .cp-video { margin-bottom: 14px; }
.cp-vid-looks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cp-vid-looks[data-collapsed="true"] > *:nth-child(n+4) { display: none; }
.cp-more {
    margin-top: 12px;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}
.cp-more:hover { color: var(--text-primary); }
.cp-more::after { content: " \203A"; }
@media (max-width: 900px) { .cp-vid-looks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cp-vid-looks { grid-template-columns: minmax(0, 1fr); } }

.cp-foot {
    margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border);
    max-width: 640px;
}
.cp-foot h2 { font-size: 17px; font-weight: 600; margin: 0 0 10px; }
.cp-foot p { font-size: 15px; line-height: 1.7; color: var(--text-secondary); margin: 0 0 12px; }
.cp-ende { margin-top: 36px; }

/* --------------------------------------------------------------------------
   Die Uebersicht unter /c

   Eine Liste, kein Schaufenster: sie ist von nirgends verlinkt und dient uns
   und den Suchmaschinen. Darum schlicht — Bild, Name, Haken, Zahl.
   -------------------------------------------------------------------------- */
.creator-index { padding: 48px 0 80px; }
.ci-head { max-width: 640px; margin-bottom: 36px; }
.ci-title {
    margin: 0 0 12px;
    font-family: var(--font-serif);
    font-size: clamp(28px, 3.6vw, 38px);
    font-weight: 600;
    line-height: 1.15;
}
.ci-lead { margin: 0; font-size: 16px; line-height: 1.65; color: var(--text-secondary); }
.ci-leer { color: var(--text-secondary); }

.ci-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.ci-karte {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ci-karte:hover { border-color: var(--text-primary); box-shadow: var(--shadow-md); }
.ci-bild {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-secondary);
}
.ci-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ci-text { display: block; min-width: 0; }
.ci-name {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
}
.ci-handle { display: block; margin-top: 1px; font-size: 13.5px; color: var(--text-secondary); }
.ci-zahl { display: block; margin-top: 4px; font-size: 13px; color: var(--text-secondary); }

@media (max-width: 860px) {
    .cp-head { grid-template-columns: 1fr; gap: 22px; }
}

/* Landing page rhythm -------------------------------------------------------
   One section type for the whole page, and bands that alternate on a fixed
   beat: plain, tinted, plain, tinted, plain. The repetition is what makes a
   page read as one page instead of a stack of separate blocks — three section
   types with two column ratios and a single tinted band did the opposite.
   Scoped to .lp-b so the other landing designs and /creators keep theirs. */
.lp-b .b-sec { padding: 72px 0 96px; }
.lp-b .b-sec--tint { background: var(--band); }
.lp-b .b-sec-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 52px;
    align-items: start;
}
@media (max-width: 860px) { .lp-b .b-sec-grid { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 720px) { .lp-b .b-sec { padding: 64px 0; } }

/* The three preview choices ------------------------------------------------
   They share .cr-look with the lookbook cards, but here the image is the
   point: full card width instead of a 96px thumbnail nobody can read.
   Scoped to .preview-choice so the lookbook cards keep their own shape. */
.lp-b .cr-looks { gap: 18px; }
.lp-b .cr-look.preview-choice {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    overflow: hidden;
}
.lp-b .cr-look.preview-choice .cr-look-media {
    aspect-ratio: 16 / 9;
    border-radius: 0;
}
.lp-b .cr-look.preview-choice .cr-look-media img { object-position: top center; }

.lp-b .cr-look.preview-choice .cr-look-text { padding: 18px 22px 20px; }
.lp-b .cr-look.preview-choice .cr-look-line { margin-top: 7px; }

/* --------------------------------------------------------------------------
   Design reference (/design)
   The page to open before changing anything visual. Styles stay local to
   .ds so nothing here can leak into the app itself.
   -------------------------------------------------------------------------- */
.ds { padding: 56px 0 96px; }
.ds-container { max-width: 900px; }
.ds-head { margin-bottom: 48px; }
.ds-eyebrow {
    margin: 0 0 8px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.ds-title { font-family: var(--font-serif); font-size: 44px; font-weight: 600; margin: 0 0 10px; }
.ds-lead { margin: 0; font-size: 18px; line-height: 1.6; color: var(--text-secondary); }
.ds-h2 {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 600;
    margin: 44px 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.ds-row { display: flex; align-items: center; gap: 28px; }
.ds-row--wrap { flex-wrap: wrap; gap: 14px; }
.ds-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.ds-cell--ink { background: var(--text-primary); border-color: var(--text-primary); }
.ds-cell--ink .logo-monogram { background: var(--background); color: var(--text-primary); }
.ds-note { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.ds-note--ink { color: var(--background); opacity: .8; }
.ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.ds-swatch { display: flex; flex-direction: column; gap: 6px; }
.ds-chip { display: block; height: 52px; border-radius: var(--radius-md); border: 1px solid var(--border); }
.ds-swatch code { font-size: 14px; color: var(--text-primary); }
.ds-type > * { margin: 0 0 14px; }
.ds-spec { line-height: 1.35; }
.ds-spec--serif { font-family: var(--font-serif); font-weight: 600; }
.ds-form { max-width: 420px; }
.ds-box {
    display: grid;
    place-items: center;
    width: 92px;
    height: 62px;
    font-size: 14.5px;
    color: var(--text-secondary);
    background: var(--surface);
    border: 1px solid var(--border);
}
@media (max-width: 640px) { .ds-row { flex-wrap: wrap; gap: 16px; } }

/* Burger menu ---------------------------------------------------------------
   Below 768px the links used to be hidden with nothing in their place. Now
   they collapse into a panel under the header, opened by this button. */
.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    margin-left: 10px;
    padding: 0 9px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.nav-burger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--text-primary);
    border-radius: 2px;
    transition: transform .18s ease, opacity .18s ease;
}
.nav-burger:hover { background: var(--surface-secondary); }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
    .site-nav { position: relative; }
    .nav-burger { display: flex; }
    .site-nav-links {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 0;
        background: var(--surface);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-md);
        z-index: 40;
    }
    .site-nav-links.is-open { display: flex; }
    .site-nav-links::before { display: none; }
    .site-nav-links a {
        padding: 13px 22px;
        font-size: 16px;
        color: var(--text-primary);
    }
    .site-nav-links a:hover { background: var(--surface-secondary); }

    /* Auf dem Handy passten Logo, „Sign in", „Try looklogue" und der
       Burger-Knopf nicht nebeneinander: die Leiste wurde 418 px breit in
       einem 390-px-Fenster, und die ganze Seite liess sich seitlich schieben.
       „Sign in" wandert deshalb ins Klappfeld. */
    .site-nav-inner { gap: 12px; min-width: 0; }
    .site-nav-actions .btn--ghost { display: none; }

    /* Auf dem Handy steht in der Leiste nur noch: Logo, Profilbild,
       „Try looklogue", die drei Striche. Der Name der Creatorin faellt weg —
       er ist das Einzige, dessen Breite man nicht kennt, und genau er hat die
       Leiste ueber den Rand geschoben. Das Bild verlinkt weiterhin auf ihr
       Profil, der Name steht auf der Seite darunter ohnehin. */
    .nav-creator-text { display: none; }
    .site-nav-creator { flex: none; }
    .nav-creator { padding: 0; }

    /* Steht nur im Klappfeld, nie in der Leiste. */
    .nav-only-small { display: block; }
}

/* „Sign in" gehoert auf dem Rechner in die Leiste rechts, nicht ins Klappfeld.
   Dort ist es nur der Ersatz dafuer, dass die Leiste auf dem Handy keinen
   Platz mehr hat. */
.nav-only-small { display: none; }

/* Auf einer Creator-Seite bleiben „How it works" und „Pricing" auf dem
   Rechner verborgen: ueber ihrem Artikel waere das eine Werbeleiste. Auf dem
   Handy sind sie das, was der Knopf aufklappt. */
@media (min-width: 769px) {
    .site-nav--creator .site-nav-links { display: none; }
}




/* ==========================================================================
   26 · Landing: Hero
   --------------------------------------------------------------------------
   Eigener Namensraum .lp-hero-*, damit nichts mit dem älteren .hero-Block aus
   Abschnitt 19 kollidiert: beide beschreiben einen Kopfbereich, meinen aber
   verschiedene Seiten.

   Alle Farben und Abstände über die Tokens von ganz oben — der Abschnitt geht
   damit im Dunkelmodus von selbst mit.
   ========================================================================== */

.lp-hero {
    position: relative;
    z-index: 1;
    padding: 132px 0 150px;
    /* hero-wave.svg IST das dunkle Feld samt Wellenkante, nicht bloss ein
       Hintergrund — darunter scheint die Seite durch. Deshalb steht hier die
       helle Seitenfarbe und die Grafik obendrauf.

       Originalgrösse (1781 x 796), NICHT auf die Breite gezogen: die Form ist
       ein organisches Feld, dessen dunkle Fläche die oberen Ecken nur in ihrer
       eigenen Grösse ausfüllt. Zieht man sie schmaler, werden die Ecken hell —
       und die Kopfzeile steht dann weiss auf weiss. */
    background-color: #ffffff;
    background-image: url('../images/hero-wave.svg');
    background-position: top center;
    background-repeat: no-repeat;
    /* Das Produktbild läuft rechts hinaus und wird hier abgeschnitten, statt
       die ganze Seite seitlich scrollbar zu machen. */
    overflow: hidden;
}

.lp-hero-inner {
    /* Etwas breiter als der übliche Container der App (1120px): sonst bricht
       "Every outfit in the video," auf drei Zeilen statt zwei. */
    width: min(1240px, 100% - 48px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

/* -- Text -------------------------------------------------------------- */
.lp-hero-copy { max-width: none; text-align: left; }

.lp-hero-title {
    margin: 0 0 22px;
    /* Serif wie die Überschriften der Abschnitte darunter und wie der Schluss
       — damit der Hero nicht als einziges Stück in der Groteske steht. */
    font-family: var(--font-serif);
    font-size: 44px;
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.02em;
    /* Fest hell, nicht --text-primary: der Hero ist in beiden Farbmodi eine
       dunkle Fläche. Mit dem Token stünde im Dunkelmodus Hell auf Hell. */
    color: #ffffff;
}

.lp-hero-lede {
    margin: 0 0 36px;
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
}

.lp-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 30px;
    border-radius: 999px;
    background: #ffffff;
    color: #111111;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.16s ease, transform 0.16s ease;
}
.lp-hero-btn:hover { background: #ededed; color: #111111; }
.lp-hero-btn:active { transform: translateY(1px); }

/* -- Produktbild ------------------------------------------------------- */
.lp-hero-shot { margin: 0; }

.lp-hero-shot img {
    /* 833px ist die Breite, auf die das Layout der Vorlage gebaut ist. Ohne
       height:auto gewinnt das height="987" aus dem Markup und das Bild wird
       in die Länge gezogen. */
    width: 833px;
    max-width: none;
    height: auto;
    aspect-ratio: 1303 / 987;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.65);
}

/* -- Pfeil nach unten -------------------------------------------------- */
.lp-hero-scroll {
    position: absolute;
    left: max(24px, calc((100% - 1240px) / 2));
    bottom: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ffffff;
    color: #111111;
    border: 2px solid #111111;
}
.lp-hero-scroll:hover { background: #ededed; color: #111111; }

/* -- Navigation über dem dunklen Feld ---------------------------------- */
/* Nur auf der Startseite: der Kopf steht durchsichtig über dem Hero und wird
   beim Scrollen zur gewohnten hellen Leiste. Die Komponente public-nav.php
   selbst bleibt unangetastet — Burger-Menü und Logo arbeiten weiter. */
.lp-home .site-nav {
    /* fixed statt sticky: die Leiste liegt ÜBER dem Hero. Bliebe sie im Fluss,
       begänne das dunkle Feld erst unter ihr, und die Navigation stünde weiss
       auf weissem Grund. Der Hero hat oben entsprechend Luft. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    backdrop-filter: none;
    transition: background 0.2s ease, backdrop-filter 0.2s ease;
}
.lp-home .site-nav .site-nav-links a,
.lp-home .site-nav .logo,
.lp-home .site-nav .btn,
.lp-home .site-nav .logo-monogram,
.lp-home .site-nav .nav-burger span {
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.lp-home .site-nav .site-nav-links a,
.lp-home .site-nav .logo { color: rgba(255, 255, 255, 0.82); }
.lp-home .site-nav .site-nav-links a:hover,
.lp-home .site-nav .logo:hover { color: #ffffff; }
.lp-home .site-nav .site-nav-links::before {
    background: rgba(255, 255, 255, 0.35);
}
.lp-home .site-nav .logo-monogram { background: #f8f8f8; color: #141414; }
.lp-home .site-nav .btn--ghost {
    border-color: rgba(255, 255, 255, 0.45);
    color: #ffffff;
    background: transparent;
}
.lp-home .site-nav .btn--primary { background: #ffffff; color: #111111; }
.lp-home .site-nav .nav-burger span { background: #ffffff; }

/* Ab etwa der Hero-Mitte: ein schwarz durchscheinender Balken. Die Schrift
   bleibt hell — sie steht ja weiter auf Dunkel. Die Haarlinie unten gibt der
   Leiste eine Kante, sonst verschwimmt sie mit dem Feld darunter. */
.lp-home .site-nav.is-dim {
    background: rgba(17, 17, 17, 0.72);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

/* Sobald der Hero durchgescrollt ist, die normale Leiste. */
.lp-home .site-nav.is-scrolled {
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    backdrop-filter: blur(10px);
}
.lp-home .site-nav.is-scrolled .site-nav-links a,
.lp-home .site-nav.is-scrolled .logo { color: var(--text-secondary); }
.lp-home .site-nav.is-scrolled .site-nav-links a:hover,
.lp-home .site-nav.is-scrolled .logo:hover { color: var(--text-primary); }
.lp-home .site-nav.is-scrolled .site-nav-links::before {
    background: color-mix(in srgb, var(--text-secondary) 55%, transparent);
}
.lp-home .site-nav.is-scrolled .logo-monogram {
    background: var(--accent);
    color: var(--accent-contrast);
}
.lp-home .site-nav.is-scrolled .btn--ghost {
    border-color: var(--border);
    color: var(--text-primary);
}
.lp-home .site-nav.is-scrolled .btn--primary {
    background: var(--accent);
    color: var(--accent-contrast);
}
.lp-home .site-nav.is-scrolled .nav-burger span { background: var(--text-primary); }

/* -- Schmalere Schirme -------------------------------------------------- */
@media (max-width: 1100px) {
    .lp-hero-title { font-size: 38px; }
    .lp-hero-shot img { width: 100%; }
}

@media (max-width: 860px) {
    .lp-hero {
        padding: 108px 0 96px;
        /* Die Wellengrafik ist 1781px breit. Auf einem schmalen Schirm sieht
           man nur ihre Mitte, und die dunkle Fläche deckt den Text nicht mehr —
           weisse Schrift stünde auf weissem Grund. Hier deshalb eine
           durchgehend dunkle Fläche mit weicher Unterkante statt der Welle. */
        background-image: none;
        background-color: #141414;
        border-bottom-left-radius: 28px;
        border-bottom-right-radius: 28px;
    }
    .lp-hero-inner { grid-template-columns: 1fr; gap: 36px; }
    .lp-hero-copy { max-width: none; }
    .lp-hero-title { font-size: 32px; }
    .lp-hero-scroll { display: none; }
}

/* ==========================================================================
   27 · Landing: Abschnitt 02 „How it works"
   --------------------------------------------------------------------------
   Inhalt aus views/landing/index-classic.php (222–316), Form neu. Eigene
   Namen (.lp-how-*) statt der alten .how-* — die hängen dort an einem anderen
   Raster und würden sich hier gegenseitig ins Gehege kommen.

   Alle Farben über Tokens, damit der Abschnitt im Dunkelmodus mitgeht.
   ========================================================================== */

/* Folgt auf die Überschrift eine Unterzeile, rückt die Überschrift näher an
   sie heran. Der Abstand von dort zum Inhalt bleibt die 38px, die
   .b-spread-title auch in Abschnitten ohne Unterzeile setzt — damit haben alle
   Abschnitte denselben Rhythmus. */
.lp-b .b-spread-title:has(+ .lp-how-sub) { margin-bottom: 14px; }

.lp-how-sub {
    max-width: 52ch;
    margin: 0 0 38px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.lp-how-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    /* Gleich hohe Karten: nur so greift das margin-top:auto der Demo-Fläche
       und die drei Beweise beginnen auf einer Linie. */
    align-items: stretch;
}

.lp-how-step {
    display: flex;
    flex-direction: column;
    /* Damit die Karte auch dann schrumpfen darf, wenn das Raster es erlaubt —
       ohne das setzt ein langes Wort darin die Mindestbreite. */
    min-width: 0;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.lp-how-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.lp-how-step h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.lp-how-say {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Die Beweisfläche sitzt unten bündig, damit die drei Karten trotz
   unterschiedlich langer Sätze auf einer Linie beginnen. */
.lp-how-demo { margin-top: auto; }

/* -- 1 · Das Eingabefeld ------------------------------------------------ */
.lp-how-field {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 9px 9px 14px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 999px;
}
.lp-how-field code {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-secondary);
}
.lp-how-go {
    flex: none;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 13px;
    font-weight: 600;
}

.lp-how-note {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.lp-how-note strong { color: var(--text-primary); font-weight: 600; }

/* -- 2 · Die Look-Karten ------------------------------------------------ */
.lp-how-looks {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 2px;
}
.lp-how-looks li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 11px 12px;
    background: var(--background);
    border-radius: var(--radius-sm);
}
.lp-how-time {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    padding-top: 1px;
}
.lp-how-body { display: grid; gap: 2px; min-width: 0; }
.lp-how-body strong { font-size: 13px; font-weight: 600; }
.lp-how-body span {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
}
.lp-how-colors { display: flex; gap: 4px; padding-top: 3px; }
.lp-how-colors span {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    border: 1px solid var(--border);
}

/* -- 3 · Die Artikelvorschau -------------------------------------------- */
.lp-how-post {
    display: grid;
    gap: 6px;
    padding: 16px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.16s ease;
}
.lp-how-post:hover { border-color: var(--text-secondary); color: inherit; }
.lp-how-post-site {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--text-secondary);
}
.lp-how-post-title {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
}
.lp-how-post-excerpt {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lp-how-post-open {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
}

/* -- Schmalere Schirme -------------------------------------------------- */
@media (max-width: 980px) {
    .lp-how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    /* minmax(0, 1fr) statt 1fr: ein blosses 1fr schrumpft nie unter die
       Eigenbreite seines Inhalts. Die Video-Adresse im ersten Schritt hat
       keine Leerzeichen, ist also ein einziges langes Wort — die Spalte wuchs
       mit und die Karte lief über den Rand. */
    .lp-how-steps { grid-template-columns: minmax(0, 1fr); }
    .lp-how-step { padding: 22px; }
}

/* ==========================================================================
   28 · Landing: Abschnitt 03 „Pricing"
   --------------------------------------------------------------------------
   Form aus der Play-Vorlage: drei Karten nebeneinander, mittig gesetzt, die
   mittlere schwarz und etwas höher. Alle Farben über Tokens, damit der
   Abschnitt im Dunkelmodus mitgeht — die hervorgehobene Karte behält ihr
   festes Dunkel, weil sie dort ja gerade der Kontrast sein soll.
   ========================================================================== */

.lp-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: center;
}

.lp-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

/* Die mittlere Karte ist die Empfehlung: dunkel, etwas grösser, mit Schatten.
   Das ist die einzige Stelle im Abschnitt mit festen Farben — sie soll in
   beiden Farbmodi dieselbe dunkle Karte sein. */
.lp-plan--best {
    padding: 56px 32px;
    background: #141414;
    border-color: #141414;
    color: #ffffff;
    box-shadow: var(--shadow-lg);
}

.lp-plan-badge {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 18px;
    margin-bottom: 20px;
    border-radius: 999px;
    background: #ffffff;
    color: #111111;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lp-plan-name {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.lp-plan--best .lp-plan-name { color: rgba(255, 255, 255, 0.7); }

.lp-plan-price {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 42px;
    font-weight: 600;
    line-height: 1;
}
.lp-plan-price span {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.lp-plan-per {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}
.lp-plan--best .lp-plan-per { color: rgba(255, 255, 255, 0.6); }

.lp-plan-list {
    margin: 28px 0 32px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 13px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-secondary);
}
.lp-plan--best .lp-plan-list { color: rgba(255, 255, 255, 0.82); }

/* Der Knopf sitzt unten bündig, damit die drei Karten trotz unterschiedlich
   langer Listen auf einer Linie abschliessen. */
.lp-plan-btn {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 26px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.lp-plan-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}
.lp-plan--best .lp-plan-btn {
    background: #ffffff;
    border-color: #ffffff;
    color: #111111;
}
.lp-plan--best .lp-plan-btn:hover { background: #ededed; color: #111111; }

/* -- Schmalere Schirme -------------------------------------------------- */
@media (max-width: 900px) {
    .lp-plans { grid-template-columns: 1fr; gap: 18px; }
    .lp-plan--best { padding: 40px 28px; }
}

/* --------------------------------------------------------------------------
   Abschnitt 02: der weiche Schatten unter den Karten
   --------------------------------------------------------------------------
   Sehr gross, sehr weich, weit unterhalb der Karte — er wirkt weniger wie ein
   Schlagschatten als wie ein Lichthof, auf dem die Karte steht. Der Farbwert
   ist ein neutrales Schwarz mit wenig Deckkraft, damit er im Dunkelmodus
   nicht als heller Fleck stehen bleibt.
   -------------------------------------------------------------------------- */
.lp-how-step {
    box-shadow: 0 60px 120px -30px rgba(20, 20, 15, 0.14);
}

[data-theme="dark"] .lp-how-step {
    box-shadow: 0 60px 120px -30px rgba(0, 0, 0, 0.55);
}

/* --------------------------------------------------------------------------
   Die hervorgehobene Preiskarte im Dunkelmodus
   --------------------------------------------------------------------------
   Hell ist sie dunkel und sticht damit heraus. Im Dunkelmodus liegt dasselbe
   Dunkel zu nah am Seitenhintergrund — die Karte verschwindet. Also dreht sie
   sich dort um: hell auf dunkel. Der Kontrast bleibt, die Rolle auch.
   -------------------------------------------------------------------------- */
[data-theme="dark"] .lp-plan--best {
    background: #f2f4f6;
    border-color: #f2f4f6;
    color: #141414;
}
[data-theme="dark"] .lp-plan--best .lp-plan-name { color: rgba(20, 20, 20, 0.65); }
[data-theme="dark"] .lp-plan--best .lp-plan-per  { color: rgba(20, 20, 20, 0.6); }
[data-theme="dark"] .lp-plan--best .lp-plan-list { color: rgba(20, 20, 20, 0.78); }
[data-theme="dark"] .lp-plan--best .lp-plan-badge {
    background: #141414;
    color: #ffffff;
}
[data-theme="dark"] .lp-plan--best .lp-plan-btn {
    background: #141414;
    border-color: #141414;
    color: #ffffff;
}
[data-theme="dark"] .lp-plan--best .lp-plan-btn:hover { background: #2a2a2a; color: #ffffff; }

/* ==========================================================================
   29 · Landing: der Schluss
   --------------------------------------------------------------------------
   Eigene Namen (.lp-end-*) statt der vorhandenen .cta-final-Regeln — die
   hängen am Raster der alten Fassung und würden dort mitziehen, sobald hier
   etwas geändert wird.

   Feste dunkle Fläche in beiden Farbmodi, wie der Hero. Damit klammert die
   Seite: dunkel oben, dunkel unten, hell dazwischen.
   ========================================================================== */

.lp-end {
    background: #141414;
    color: #ffffff;
    /* Unten wie .lp-b .b-sec (app.css:4448), oben mehr Luft: der Schluss
       beginnt mit einer dunklen Kante, und die braucht mehr Abstand nach
       oben als ein Abschnitt, der nur auf Weiss weitergeht. */
    padding: 124px 0 96px;
}
@media (max-width: 720px) {
    .lp-end { padding: 64px 0; }
}

.lp-end-inner {
    width: min(1120px, 100% - 48px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.lp-end-title {
    margin: 0 0 14px;
    max-width: 20ch;
    font-family: var(--font-serif);
    font-size: clamp(32px, 4.4vw, 52px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.015em;
}
.lp-end-title em { font-style: italic; font-weight: 400; }

.lp-end-say {
    margin: 0 0 32px;
    max-width: 46ch;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}

.lp-end-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 52px;
    padding: 0 30px;
    border-radius: 999px;
    background: #ffffff;
    color: #111111;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.16s ease, transform 0.16s ease;
}
.lp-end-btn:hover { background: #ededed; color: #111111; }
.lp-end-btn:active { transform: translateY(1px); }
.lp-end :focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

/* ==========================================================================
   30 · Bewerbungsseite: dunkler Kopf
   --------------------------------------------------------------------------
   Derselbe Auftritt wie der Hero der Startseite: schwarze Fläche, weisse
   Schrift. Fest, nicht über Tokens — der Kopf ist in beiden Farbmodi dunkel,
   genau wie .lp-hero und .lp-end.

   Angefasst wird nur, was im Kopf steht. Die Formularkarte (.ap-card) bleibt
   unverändert: sie ist die eine helle Fläche und soll es bleiben.
   ========================================================================== */

.ap-hero {
    background: #141414;
    color: #ffffff;
    padding-bottom: 96px;
}

/* -- Abzeichen „10 places this round" ---------------------------------- */
.ap-hero .ap-badge {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.82);
}
.ap-hero .ap-badge-dot {
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16);
}
.ap-hero .ap-badge--claim { color: #ffffff; }

/* -- Überschrift und Fliesstext ---------------------------------------- */
.ap-hero .ap-headline { color: #ffffff; }
.ap-hero .ap-headline em { color: rgba(255, 255, 255, 0.55); }

.ap-hero .ap-sub { color: rgba(255, 255, 255, 0.72); }
.ap-hero .ap-sub strong { color: #ffffff; }

/* -- Die vier Punkte ---------------------------------------------------- */
.ap-hero .ap-gets li { color: rgba(255, 255, 255, 0.72); }
.ap-hero .ap-gets strong { color: #ffffff; }
.ap-hero .ap-gets-icon {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* -- Die Zahlenreihe ---------------------------------------------------- */
.ap-hero .ap-proof { border-top-color: rgba(255, 255, 255, 0.18); }
.ap-hero .ap-proof-value { color: #ffffff; }
.ap-hero .ap-proof-label { color: rgba(255, 255, 255, 0.6); }

/* -- Der Satz unter der Karte ------------------------------------------- */
.ap-hero .ap-alt { color: rgba(255, 255, 255, 0.7); }
.ap-hero .ap-alt a,
.ap-hero .ap-alt strong { color: #ffffff; }

.ap-hero :focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

/* Die Karte steht auf dem dunklen Kopf, ist selbst aber hell — sie muss ihre
   Schriftfarbe zurücksetzen. Ohne das erbt sie das Weiss von .ap-hero, und
   alles darin, was keine eigene Farbe hat (die Überschrift, die Pfeile),
   steht weiss auf weiss. */
.ap-hero .ap-card,
.ap-hero .ap-card-title,
.ap-hero .ap-choice,
.ap-hero .ap-choice strong {
    color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   Hero: die Zeile zwischen Text und Knopf
   --------------------------------------------------------------------------
   Plattform und Gratis-Hinweis. Leise gesetzt — sie beantwortet eine Frage,
   die jemand vor dem Klick hat, soll aber dem Knopf nicht die Aufmerksamkeit
   nehmen.
   -------------------------------------------------------------------------- */
.lp-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    margin: 0 0 30px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.62);
}
.lp-hero-platform {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.82);
}
.lp-hero-note { white-space: nowrap; }

@media (max-width: 520px) {
    /* Auf sehr schmalen Schirmen dürfen die beiden Teile untereinander. */
    .lp-hero-note { white-space: normal; }
}

/* --------------------------------------------------------------------------
   Chromes Ausfüll-Hervorhebung
   --------------------------------------------------------------------------
   Felder, die Chrome selbst ausgefüllt hat, bekommen von ihm eine hellblaue
   Fläche — und er ignoriert dabei background-color. Der einzige Weg dagegen
   ist ein sehr grosser innerer Schatten, der die Fläche übermalt.

   Die Schriftfarbe braucht eine eigene Angabe (-webkit-text-fill-color),
   sonst bleibt sie Chromes Schwarz und stimmt im Dunkelmodus nicht. Die
   absurd lange Übergangszeit ist der übliche Kniff dagegen, dass die Farbe
   beim Anklicken kurz aufblitzt.
   -------------------------------------------------------------------------- */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
            box-shadow: 0 0 0 1000px var(--surface) inset;
    -webkit-text-fill-color: var(--text-primary);
    caret-color: var(--text-primary);
    transition: background-color 9999s ease-in-out 0s;
}

/* Beim Fokus muss der Ring erhalten bleiben — sonst übermalt der innere
   Schatten ihn mit. */
.form-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--surface) inset, 0 0 0 3px var(--accent-soft);
            box-shadow: 0 0 0 1000px var(--surface) inset, 0 0 0 3px var(--accent-soft);
    -webkit-text-fill-color: var(--text-primary);
    caret-color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   Die Kopfzeile schrumpft beim Scrollen
   --------------------------------------------------------------------------
   Ab dem ersten Scrollen wird die Leiste kompakter: weniger Luft, kleineres
   Zeichen, kleinere Schrift, flachere Knöpfe. Sie nimmt damit weniger vom
   Bild weg, sobald man liest.

   Gebunden an .is-dim und .is-scrolled — beide Zustände setzt heroNav() in
   app.js, der erste schon nach acht Pixeln. Es braucht also kein zusätzliches
   JavaScript.

   Alle Werte bekommen eine Übergangszeit, sonst springt die Leiste.
   -------------------------------------------------------------------------- */
.site-nav-inner,
.site-nav .logo-monogram,
.site-nav .site-nav-links a,
.site-nav .btn {
    transition: padding 0.22s ease, width 0.22s ease, height 0.22s ease,
                font-size 0.22s ease, border-radius 0.22s ease,
                color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

/* Weniger Luft ober- und unterhalb: von 14px auf 8px. */
.site-nav.is-dim .site-nav-inner,
.site-nav.is-scrolled .site-nav-inner {
    padding: 8px 0;
}

/* Das Zeichen auf die Masse, die es als kleine Variante ohnehin schon hat
   (.logo--sm, app.css:272) — 48 auf 38, Radius 13 auf 10. */
.site-nav.is-dim .logo-monogram,
.site-nav.is-scrolled .logo-monogram {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 20px;
}

/* Menüschrift von 17 auf 15,5. */
.site-nav.is-dim .site-nav-links a,
.site-nav.is-scrolled .site-nav-links a {
    font-size: 15.5px;
}

/* Knöpfe flacher und schmaler: von 11/19 auf 8/16, Schrift von 15,5 auf 14,5. */
.site-nav.is-dim .btn--sm,
.site-nav.is-scrolled .btn--sm {
    padding: 8px 16px;
    font-size: 14.5px;
}

/* Die Haarlinie zwischen Zeichen und Menü schrumpft mit. */
.site-nav.is-dim .site-nav-links::before,
.site-nav.is-scrolled .site-nav-links::before {
    height: 16px;
}

/* Wer weniger Bewegung eingestellt hat, bekommt den Wechsel ohne Übergang —
   die Leiste ist dann sofort klein, statt zu wachsen und zu schrumpfen. */
@media (prefers-reduced-motion: reduce) {
    .site-nav-inner,
    .site-nav .logo-monogram,
    .site-nav .site-nav-links a,
    .site-nav .btn {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Kopfzeile auf den Seiten einer Creatorin
   --------------------------------------------------------------------------
   Statt „How it works" und „Pricing" steht dort sie: rundes Bild, Name,
   Handle. Ein Klick führt auf ihr Profil.
   -------------------------------------------------------------------------- */
.nav-creator {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.16s ease;
}
.nav-creator:hover { opacity: .78; color: inherit; }

.nav-creator-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.nav-creator-text strong {
    /* Flex statt Fliesstext: das Siegel ist ein eigenes Kaestchen und rutschte
       sonst in die naechste Zeile, sobald der Name lang genug war. Nebeneinander
       gehoert es, nicht darunter. */
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}
.nav-creator-text strong .vbadge { margin-left: 0; top: 0; }
.nav-creator-text span {
    font-size: 12.5px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Die Haarlinie, die sonst Zeichen und Menü trennt, steht hier ebenso. */
.site-nav-creator::before { content: ""; }

/* Schrumpft beim Scrollen mit, wie der Rest der Leiste. */
.site-nav .nav-creator .avatar,
.site-nav .nav-creator-text strong,
.site-nav .nav-creator-text span {
    transition: width 0.22s ease, height 0.22s ease, font-size 0.22s ease;
}
.site-nav.is-dim .nav-creator .avatar,
.site-nav.is-scrolled .nav-creator .avatar { width: 30px; height: 30px; }
.site-nav.is-dim .nav-creator-text strong,
.site-nav.is-scrolled .nav-creator-text strong { font-size: 14px; }
.site-nav.is-dim .nav-creator-text span,
.site-nav.is-scrolled .nav-creator-text span { font-size: 11.5px; }

/* Auf schmalen Schirmen reicht das Bild — der Name würde den Knopf wegdrängen. */
@media (max-width: 560px) {
    .nav-creator-text { display: none; }
}

/* --------------------------------------------------------------------------
   31 · Startseite, Abschnitt 02 — die drei breiten Karten
   Vorher standen links drei kleine Karten und rechts ein Vorschaufeld, das
   nur wiederholte, was die gewählte Karte ohnehin zeigte. Das Feld ist weg;
   die Karte trägt ihr Bild jetzt selbst und über die ganze Breite, damit man
   die Oberfläche darauf lesen kann. Ein Klick legt sie gross über die Seite.
   -------------------------------------------------------------------------- */
.lp-shots { display: flex; flex-direction: column; gap: 26px; }

.lp-shot {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
    box-shadow: 0 34px 70px -46px rgba(20, 20, 15, .22);
}

/* Der Bildbereich ist ein Verweis auf die Datei: ohne Javascript öffnet er
   sie, mit Javascript fängt app.js den Klick ab und zeigt das Fenster. */
.lp-shot-media {
    position: relative;
    display: block;
    aspect-ratio: 5 / 3;
    background: var(--surface-secondary);
    overflow: hidden;
    cursor: zoom-in;
}
.lp-shot-media img,
.lp-shot-media video {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
}
/* Der Film liegt im Verweis und darf den Klick nicht abfangen. */
.lp-shot-clip { pointer-events: none; }

.lp-shot-zoom {
    position: absolute; right: 14px; bottom: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--text-primary);
    box-shadow: 0 6px 18px -6px rgba(20, 20, 15, .45);
    opacity: 0; transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}
.lp-shot-media:hover .lp-shot-zoom,
.lp-shot-media:focus-visible .lp-shot-zoom { opacity: 1; transform: none; }

.lp-shot-copy {
    display: flex; flex-direction: column; justify-content: center;
    padding: 34px 38px;
}
/* Dieselbe Schrift wie die Schritte in Abschnitt 01: serifenlos und fett.
   Zwei Abschnitte untereinander, die gleich gebaute Karten zeigen, sollen
   ihre Titel nicht in zwei verschiedenen Schriften setzen. */
.lp-shot-copy h3 {
    font-size: 21px; font-weight: 600; line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
}
.lp-shot-copy p {
    margin: 0; color: var(--text-secondary);
    font-size: 16px; line-height: 1.62;
}
@media (max-width: 900px) {
    .lp-shot { grid-template-columns: minmax(0, 1fr); }
    .lp-shot-copy { padding: 24px 24px 28px; }
    .lp-shot-copy h3 { font-size: 23px; }
    .lp-shots { gap: 20px; }
}

/* Das Fenster für die grosse Ansicht ---------------------------------------
   Teilt sich .modal mit dem Bestätigungsdialog, braucht aber die ganze
   Breite und keinen Innenabstand — das Bild ist der Inhalt.              */
.modal-panel--shot {
    width: min(1180px, calc(100vw - 40px));
    padding: 0;
    overflow: hidden;
}
.modal-shot-stage { background: #0c0c0a; display: block; }
.modal-shot-stage img,
.modal-shot-stage video {
    display: block; margin: 0 auto;
    width: 100%; height: auto;
    max-height: calc(100vh - 160px);
    object-fit: contain;
}
.modal-shot-caption {
    margin: 0; padding: 14px 20px 16px;
    font-size: 14.5px; line-height: 1.5; color: var(--text-secondary);
}
.modal-shot-caption:empty { display: none; }
.modal--shot .modal-close {
    top: 14px; right: 14px;
    background: rgba(255, 255, 255, .92);
    color: #16160f;
    box-shadow: 0 6px 18px -6px rgba(20, 20, 15, .5);
}
.modal--shot .modal-close:hover { background: #ffffff; color: #000000; }

/* --------------------------------------------------------------------------
   32 · Das Verifizierungs-Siegel neben dem Namen
   --------------------------------------------------------------------------
   Eine Form, zwei Zustände. Blau ist hier bewusst gesetzt und kommt nicht aus
   den Tokens: ein Verifizierungszeichen wird überall blau erwartet, ein graues
   oder schwarzes Siegel läse niemand als solches. Der offene Zustand nimmt
   dagegen die Tokens, damit er sich im Dunkelmodus mitbewegt.
   -------------------------------------------------------------------------- */
.vbadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    /* Hebt das Siegel auf die Höhe der Versalien, statt auf die Grundlinie. */
    margin-left: 6px;
    position: relative;
    top: -.06em;
    flex: none;
}
.vbadge svg { display: block; }
.vbadge-mark { stroke: #ffffff; }

.vbadge.is-verified .vbadge-seal { fill: #1d9bf0; }

/* Feste Grautöne statt Tokens, wie das Blau daneben. Der Strich innen muss
   dann mitfixiert werden: mit var(--text-secondary) würde er im Dunkelmodus
   hell und verschwände auf der hellen Fläche. */
.vbadge.is-open .vbadge-seal {
    fill: #dbdbdb;
    stroke: #6c6c6c;
    stroke-width: 1;
}
.vbadge.is-open .vbadge-mark { stroke: #6c6c6c; }

@media (prefers-reduced-motion: no-preference) {
    .vbadge { transition: opacity .15s ease; }
}

/* --------------------------------------------------------------------------
   33 · Shop-Karte im Artikel (LTK)
   --------------------------------------------------------------------------
   Ein Link auf eine LTK-Seite, der allein auf einer Zeile steht, wird zur
   Karte. Die Daten kommen aus link_previews, geholt beim Speichern.

   Alles ueber Tokens, damit die Karte im Dunkelmodus mitgeht. Nur das Zeichen
   bleibt fest schwarz auf weiss — es steht fuer eine fremde Marke und soll
   überall gleich aussehen.
   -------------------------------------------------------------------------- */
.ltk-mark {
    display: inline-flex; align-items: center; justify-content: center;
    height: 20px; padding: 0 7px; border-radius: 4px;
    background: #16160f; color: #ffffff;
    font-family: var(--font-sans); font-size: 11.5px; font-weight: 700;
    letter-spacing: .08em; flex: none;
}
.ltk-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.ltk-eyebrow span:not(.ltk-mark) {
    font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-secondary);
}

.ltk-card {
    display: flex; align-items: center; gap: 18px;
    padding: 18px 20px; margin: 26px 0;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface); color: inherit; text-decoration: none;
    transition: border-color .15s ease;
}
.ltk-card:hover { border-color: var(--text-secondary); }
.ltk-avatar {
    width: 60px; height: 60px; border-radius: 50%;
    object-fit: cover; flex: none; background: var(--surface-secondary);
}
.ltk-body { flex: 1 1 auto; min-width: 0; }
.ltk-name { display: block; font-size: 18px; font-weight: 600; line-height: 1.3; }
.ltk-go {
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 18px; border-radius: 999px;
    background: var(--text-primary); color: var(--background);
    font-size: 14.5px; font-weight: 500;
}

.ltk-post {
    display: grid; grid-template-columns: 168px minmax(0, 1fr);
    margin: 26px 0; overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface); color: inherit; text-decoration: none;
    transition: border-color .15s ease;
}
.ltk-post:hover { border-color: var(--text-secondary); }
.ltk-post-bild {
    width: 100%; height: 100%; min-height: 168px;
    object-fit: cover; display: block; background: var(--surface-secondary);
}
.ltk-post-body { padding: 20px 22px; display: flex; flex-direction: column; justify-content: center; }
.ltk-post-title { font-family: var(--font-serif); font-size: 21px; line-height: 1.25; }
.ltk-by { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14.5px; color: var(--text-secondary); }
.ltk-by img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.ltk-post-go { margin-top: 14px; font-size: 15px; font-weight: 500; color: var(--text-primary); }

@media (max-width: 560px) {
    .ltk-card { flex-wrap: wrap; }
    .ltk-go { width: 100%; justify-content: center; }
    .ltk-post { grid-template-columns: minmax(0, 1fr); }
    .ltk-post-bild { min-height: 220px; }
}

/* Das Zeichen im Kopieren-Knopf oben im Artikel: dieselbe Kachel wie im Logo,
   nur klein. Fest schwarz auf weiss, damit sie in beiden Farbschemata als
   Marke lesbar bleibt und nicht mit der Schaltflaeche verschwimmt. */
.article-share-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px; flex: none;
    border-radius: 5px; background: #16160f; color: #fafafa;
    font-family: var(--font-serif); font-style: italic; font-weight: 600;
    font-size: 11px; line-height: 1;
}

/* --------------------------------------------------------------------------
   34 · Hero: die Store-Zeichen
   --------------------------------------------------------------------------
   Sie stehen unter dem Knopf, nicht ueber dem Text: „Start free" ist das, was
   heute geht, die Badges sind ein Versprechen. Gedaempft und ohne Verweis,
   solange es die App nicht gibt — ein Zeichen, das in einen leeren Store
   fuehrt, kostet mehr Vertrauen als er bringt.
   -------------------------------------------------------------------------- */
.lp-hero-apps { margin-top: 26px; }
.lp-hero-apps-note {
    display: block;
    margin-bottom: 9px;
    font-size: 12.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.lp-hero-apps-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lp-hero-apps-row img {
    height: 40px;
    width: auto;
    display: block;
    /* Noch nicht da: sichtbar, aber nicht wie ein Knopf, der wartet. */
    opacity: .5;
}

/* Im Dunkelmodus sind die Zeichen selbst schwarz und verschwaenden auf dem
   dunklen Grund — heller Rahmen drum, statt die Marke umzufaerben. */
[data-theme="dark"] .lp-hero-apps-row img {
    opacity: .75;
    background: #ffffff;
    border-radius: 7px;
    padding: 1px 2px;
}

@media (max-width: 720px) {
    .lp-hero-apps-row img { height: 36px; }
}

/* Die Geraete in Schritt 3: klein, oberhalb des Artikel-Ausschnitts. Sie
   fuellen die Luecke, die dadurch entstand, dass der Ausschnitt per
   margin-top:auto nach unten rutscht. */
.lp-how-devices {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 4px auto 18px;
}

/* --------------------------------------------------------------------------
   35 · Die stille Bahn zwischen „Take a look inside" und den Preisen
   --------------------------------------------------------------------------
   Kein eigener Abschnitt mit Nummer: die Seite zaehlt 01, 02, 03, und ein
   vierter haette diesen Faden zerschnitten. Hier steht nur ein Satz und ein
   Bild, damit vor der Preisfrage einmal Luft ist.
   -------------------------------------------------------------------------- */
.lp-devices { padding: 20px 0 40px; text-align: center; }
.lp-devices-line {
    margin: 0 0 6px;
    font-family: var(--font-serif);
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: -.02em;
    color: var(--text-primary);
}
.lp-devices-shot {
    display: block;
    width: 100%;
    max-width: 940px;
    height: auto;
    margin: 0 auto;
}
@media (max-width: 720px) {
    .lp-devices { padding: 8px 0 26px; }
}

/* Die Teilen-Leiste auf dem Profil steht am Ende und mittig — oben trennte
   sie den Namen von den Looks. */
.profile-share .share { justify-content: center; margin-top: 46px; }

/* Der Weg zur eigenen oeffentlichen Seite, direkt aus den Einstellungen. */
.settings-public { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 0; }

/* Kurztext und Links in den Einstellungen */
.form-group-title {
    margin: 26px 0 12px;
    font-size: 12.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
textarea.form-input { min-height: 84px; resize: vertical; line-height: 1.55; font-family: inherit; }
.settings-custom-link { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 560px) { .settings-custom-link { grid-template-columns: minmax(0, 1fr); } }

/* Kurztext und Links auf der oeffentlichen Profilseite */
.profile-bio {
    max-width: 46ch;
    margin: 10px auto 0;
    color: var(--text-secondary);
    font-size: 16.5px;
    line-height: 1.6;
}
.profile-links {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: 8px; margin: 16px 0 0;
}
.profile-links a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-secondary); text-decoration: none;
    font-size: 14.5px; font-weight: 500;
    transition: border-color .15s ease, color .15s ease;
}
.profile-links a:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.profile-link-mark {
    display: inline-flex; align-items: center; justify-content: center;
    height: 17px; padding: 0 5px; border-radius: 4px;
    background: #16160f; color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: .06em;
}

/* Die Adressprüfung bei einer Profil-Übernahme */
.admin-claim-check {
    margin: 12px 0 0; padding: 12px 14px;
    border-radius: var(--radius-md); font-size: 14px; line-height: 1.6;
}
.admin-claim-check p { margin: 0; }
.admin-claim-check code { font-size: 13px; }
.admin-claim-check.is-match    { background: #eef7ee; color: #1f4d2a; }
.admin-claim-check.is-mismatch { background: #fdf0e8; color: #7a3a15; }
.admin-claim-note { margin-top: 6px !important; opacity: .85; }
[data-theme="dark"] .admin-claim-check.is-match    { background: #1c2a1e; color: #bfe2c6; }
[data-theme="dark"] .admin-claim-check.is-mismatch { background: #2e2118; color: #f0c6a6; }

/* Ein Feld, ein Knopf — nebeneinander, solange Platz ist. */
.cp-claim-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.cp-claim-form .form-input { flex: 1 1 220px; min-width: 0; }
.cp-claim-form .btn { flex: none; }

/* Das Zeichen vor dem Titel im Claim-Fenster: 30 px, damit es neben der
   23-px-Schrift steht, ohne sie zu ueberragen. Feste Zahl mit Absicht —
   Dehnen auf die Zeilenhoehe hat das Quadrat zerdrueckt. */
.modal-panel--claim .modal-title { display: flex; align-items: center; gap: 12px; }
.modal-title-mark { flex: none; width: 30px; height: 30px; border-radius: 9px; font-size: 16px; }

/* Das Fenster für „Claim this profile" — Form vom Bestätigungsdialog,
   nur etwas breiter, damit Adresse und Knöpfe nebeneinander Platz haben. */
.modal-panel--claim { width: min(460px, calc(100vw - 32px)); padding: 28px 28px 24px; }
.modal-panel--claim .form-input { width: 100%; margin-top: 18px; }

/* ----------------------------------------------------------------------
   Journal — die Artikel von looklogue
   ---------------------------------------------------------------------- */

.jr-wrap { padding: 64px 0 96px; }

.jr-head { max-width: 620px; margin-bottom: 48px; }
.jr-eyebrow {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 14px;
}
.jr-eyebrow a { color: inherit; text-decoration: none; }
.jr-eyebrow a:hover { color: var(--accent); }

.jr-title {
    font-family: var(--font-serif);
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 0 0 18px;
}
.jr-lead { font-size: 17px; line-height: 1.65; color: var(--text-secondary); margin: 0; }

/* Leer ist ein Zustand, kein Fehler — deshalb ein ruhiger Satz statt einer
   Box mit Rahmen, die nach Panne aussieht. */
.jr-empty { color: var(--text-secondary); font-size: 16px; margin: 0; }

.jr-list { list-style: none; margin: 0; padding: 0; max-width: 720px; }
.jr-item + .jr-item { border-top: 1px solid var(--border); }
.jr-link {
    display: block;
    padding: 26px 0;
    color: inherit;
    text-decoration: none;
}
.jr-item-title {
    font-family: var(--font-serif);
    font-size: 23px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 8px;
    transition: color .15s ease;
}
.jr-link:hover .jr-item-title { color: var(--accent); }
.jr-item-excerpt { color: var(--text-secondary); font-size: 15.5px; line-height: 1.6; margin: 0 0 10px; }
.jr-item-date { font-size: 13px; color: var(--text-secondary); }

.jr-article { padding: 56px 0 96px; }
.jr-article-head { margin-bottom: 36px; }
.jr-article-title {
    font-family: var(--font-serif);
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -.02em;
    margin: 0 0 12px;
    max-width: 680px;
}
.jr-article-date { font-size: 13.5px; color: var(--text-secondary); }

.jr-article-cta {
    max-width: 680px;
    margin-top: 48px;
    padding: 26px 28px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}
.jr-article-cta p { margin: 0 0 16px; color: var(--text-secondary); line-height: 1.6; }

@media (max-width: 640px) {
    .jr-wrap { padding: 44px 0 64px; }
    .jr-article { padding: 36px 0 64px; }
    .jr-article-cta { padding: 22px 20px; }
}

/* Das „New"-Abzeichen am Menüpunkt.
   Hochgestellt an der rechten oberen Ecke, nicht daneben: so liest sich der
   Menüpunkt weiter als ein Wort und die Leiste wird nicht breiter. */
.nav-link--badged { position: relative; }
.nav-badge {
    position: absolute;
    top: -7px;
    right: -20px;
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--text-primary);
    color: var(--background);
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .03em;
    text-transform: uppercase;
    pointer-events: none;
}

/* Ein Bild im Artikel. Läuft über die Textbreite hinaus, weil ein Screenshot
   erst etwas zeigt, wenn man die Schrift darauf lesen kann. */
.article-figure { margin: 32px 0; }
.article-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.article-figure figcaption {
    margin-top: 10px;
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.5;
}
@media (min-width: 900px) {
    .article-body .article-figure { width: min(860px, 92vw); margin-left: calc((680px - min(860px, 92vw)) / 2); }
}

/* Vorschaubild in der News-Übersicht.
   Bild links, Text rechts — auf dem Handy untereinander, weil ein 120px
   breites Bild neben drei Zeilen Text nichts mehr zeigt. */
.jr-item--cover .jr-link { display: flex; gap: 20px; align-items: flex-start; }
.jr-thumb {
    flex: 0 0 200px;
    display: block;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    aspect-ratio: 16 / 9;
    background: var(--surface-secondary);
}
.jr-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jr-text { flex: 1 1 auto; min-width: 0; }

@media (max-width: 640px) {
    .jr-item--cover .jr-link { flex-direction: column; gap: 14px; }
    .jr-thumb { flex: none; width: 100%; }
}

/* Ein Video im Artikel — dieselbe Breite wie ein Bild. */
.article-figure--video video {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #000;
}