* { margin: 0; padding: 0; box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    :root {
        --bg: #0a0a09;
        --surface: #121211;
        --border: #1e1e1c;
        --text: #e0dcd4;
        --text-muted: #a09888;
        --text-dim: #706860;
        --text-minimal: #4a4840;
        --accent: #b8c964;
        --accent-glow: #b8c96410;
        --warm: #fbbf24;
    }

    body {
        font-family: 'Inter', -apple-system, sans-serif;
        background: var(--bg);
        color: var(--text);
        line-height: 1.7;
        -webkit-font-smoothing: antialiased;
    }

    .serif { font-family: 'Crimson Pro', Georgia, serif; }

    /* --- Hero --- */
    .hero {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 60px 24px;
        position: relative;
    }
    .hero::before {
        content: '';
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translateX(-50%);
        width: 600px;
        height: 600px;
        background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%);
        pointer-events: none;
    }
    .hero-logo { width: 100px; height: 100px; margin-bottom: 32px; position: relative; }

    /* Scroll indicator */
    .scroll-hint {
        position: absolute;
        bottom: 32px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        color: var(--text-minimal);
        font-size: 0.7em;
        letter-spacing: 0.1em;
        animation: scrollPulse 2.5s ease-in-out infinite;
    }
    .scroll-hint svg {
        opacity: 0.4;
    }
    @keyframes scrollPulse {
        0%, 100% { opacity: 0.3; transform: translateX(-50%) translateY(0); }
        50% { opacity: 0.7; transform: translateX(-50%) translateY(6px); }
    }
    .hero h1 {
        font-family: 'Crimson Pro', Georgia, serif;
        font-size: clamp(2.2em, 5vw, 3.5em);
        font-weight: 300;
        letter-spacing: 0.02em;
        color: #e8e4dc;
        margin-bottom: 20px;
        position: relative;
    }
    .hero .tagline {
        font-family: 'Crimson Pro', Georgia, serif;
        font-size: clamp(1.05em, 2vw, 1.3em);
        font-weight: 300;
        color: var(--text-muted);
        max-width: 480px;
        margin-bottom: 48px;
        font-style: italic;
        line-height: 1.8;
    }
    .hero .sub {
        font-size: 0.8em;
        color: var(--text-dim);
        margin-top: 12px;
    }

    /* --- Waitlist --- */
    .waitlist {
        display: flex;
        gap: 10px;
        margin-bottom: 12px;
        position: relative;
        z-index: 1;
    }
    .waitlist input {
        padding: 13px 18px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
        font-size: 16px; /* >=16px: verhindert iOS-Safari-Zoom beim Fokus */
        width: 280px;
        outline: none;
        transition: border-color 0.3s;
        font-family: inherit;
    }
    .waitlist input:focus { border-color: var(--accent); }
    .waitlist input::placeholder { color: var(--text-dim); }
    .waitlist button {
        padding: 13px 24px;
        border-radius: 10px;
        border: none;
        background: var(--accent);
        color: #0a0a0a;
        font-size: 0.95em;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        font-family: inherit;
    }
    .waitlist button:hover { background: #c8d874; }
    .success-msg { display: none; color: var(--accent); font-size: 0.9em; margin-top: 8px; }

    /* --- Store buttons (span = coming soon, a = live/clickable) --- */
    .store-row {
        display: flex;
        gap: 10px;
        justify-content: center;
        margin-top: 20px;
        flex-wrap: wrap;
    }
    .store-btn {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 9px 16px;
        border-radius: 10px;
        background: rgba(255,255,255,0.03);
        border: 1px solid var(--border);
        color: var(--text-muted);
        text-decoration: none;
        cursor: default;
        opacity: 0.85;
    }
    .store-btn .store-icon { width: 20px; height: 20px; flex-shrink: 0; opacity: 0.85; }
    .store-btn .store-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
    .store-btn .store-soon { font-size: 0.62em; color: var(--text-dim); letter-spacing: 0.08em; text-transform: uppercase; }
    .store-btn .store-name { font-size: 0.92em; color: var(--text); font-weight: 500; }
    a.store-btn {
        cursor: pointer;
        opacity: 1;
        transition: border-color 0.2s, background 0.2s;
    }
    a.store-btn:hover { border-color: var(--text-dim); background: rgba(255,255,255,0.06); }
    a.store-btn .store-icon { opacity: 1; }

    /* --- Subscribe widget (homepage checkout) --- */
    .plan-toggle {
        display: flex;
        gap: 10px;
        justify-content: center;
        margin-bottom: 24px;
        flex-wrap: wrap;
    }
    .plan-btn {
        position: relative;
        min-width: 150px;
        padding: 14px 20px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: transparent;
        color: var(--text-muted);
        cursor: pointer;
        font-family: inherit;
        transition: border-color 0.2s, background 0.2s, color 0.2s;
    }
    .plan-btn:hover { border-color: var(--text-dim); }
    .plan-btn.selected {
        border-color: var(--accent);
        background: var(--accent-glow);
        color: var(--text);
    }
    .plan-btn .plan-price { display: block; font-size: 1.1em; font-weight: 600; }
    .plan-btn .plan-period { display: block; font-size: 0.78em; color: var(--text-dim); margin-top: 2px; }
    .plan-btn .plan-badge {
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--accent);
        color: #0a0a0a;
        font-size: 0.62em;
        font-weight: 700;
        padding: 2px 10px;
        border-radius: 999px;
        white-space: nowrap;
    }
    .checkout-error { display: none; color: #e07a5f; font-size: 0.9em; margin-top: 8px; }
    .subscribe-form button:disabled { opacity: 0.5; cursor: wait; }

    /* --- App screenshot --- */
    .app-shot-wrap { text-align: center; margin-top: 56px; }
    .app-shot {
        width: 100%;
        max-width: 300px;
        height: auto;
        border-radius: 28px;
        border: 1px solid var(--border);
        box-shadow: 0 24px 60px rgba(0,0,0,0.5);
    }
    .app-shot-caption {
        font-family: 'Crimson Pro', Georgia, serif;
        color: var(--text-dim);
        font-style: italic;
        font-size: 0.9em;
        margin-top: 18px;
    }

    /* --- Sections --- */
    section {
        max-width: 680px;
        margin: 0 auto;
        padding: 100px 24px;
    }
    section h2 {
        font-family: 'Crimson Pro', Georgia, serif;
        font-size: 1.8em;
        font-weight: 300;
        color: #e8e4dc;
        margin-bottom: 16px;
    }
    /* Blog: mehr Luft zwischen Fließtext und Zwischenüberschrift */
    article h2 {
        margin-top: 56px;
    }
    section .section-sub {
        font-family: 'Crimson Pro', Georgia, serif;
        color: var(--text-muted);
        font-style: italic;
        font-size: 1.05em;
        margin-bottom: 40px;
        line-height: 1.8;
    }

    /* --- Divider --- */
    .divider {
        max-width: 680px;
        margin: 0 auto;
        border: none;
        border-top: 1px solid var(--border);
    }

    /* --- Quote blocks --- */
    .mirror-quote {
        background: linear-gradient(135deg, #14191408, #10141908);
        border-radius: 10px;
        padding: 24px 28px;
        border-left: 3px solid var(--accent);
        margin: 28px 0;
    }
    .mirror-quote p {
        font-family: 'Crimson Pro', Georgia, serif;
        color: var(--text);
        font-size: 1.05em;
        line-height: 1.8;
        font-style: italic;
    }
    .mirror-quote .label {
        font-family: 'Inter', sans-serif;
        font-size: 0.65em;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--accent);
        margin-bottom: 10px;
    }

    /* --- Entry example --- */
    .entry-example {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 24px;
        margin: 28px 0;
    }
    .entry-example .label {
        font-size: 0.65em;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--text-dim);
        margin-bottom: 12px;
    }
    .entry-example p {
        font-family: 'Crimson Pro', Georgia, serif;
        color: var(--text-muted);
        font-size: 0.95em;
        line-height: 1.9;
    }

    /* --- Timeline --- */
    .timeline-section {
        margin: 40px 0;
        padding-left: 28px;
        border-left: 2px solid var(--border);
        position: relative;
    }
    .tl-item {
        margin-bottom: 28px;
        position: relative;
    }
    .tl-item::before {
        content: '';
        position: absolute;
        left: -34px;
        top: 5px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent);
        opacity: 0.6;
    }
    .tl-item .tl-label {
        font-size: 0.65em;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--text-dim);
    }
    .tl-item .tl-text {
        font-family: 'Crimson Pro', Georgia, serif;
        color: var(--text-muted);
        font-style: italic;
        font-size: 0.95em;
        margin-top: 2px;
    }

    /* --- Prose --- */
    .prose {
        font-family: 'Crimson Pro', Georgia, serif;
        color: var(--text-muted);
        font-size: 1.05em;
        line-height: 2;
    }
    .prose strong { color: var(--text); font-weight: 400; }

    /* --- Steps --- */
    .steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin: 40px 0;
    }
    .step {
        text-align: center;
        padding: 28px 16px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
    }
    .step .num {
        font-family: 'Crimson Pro', Georgia, serif;
        font-size: 2em;
        font-weight: 300;
        color: var(--accent);
        opacity: 0.6;
        margin-bottom: 8px;
    }
    .step h3 {
        font-family: 'Crimson Pro', Georgia, serif;
        font-size: 1em;
        font-weight: 400;
        color: var(--text);
        margin-bottom: 6px;
    }
    .step p { color: var(--text-dim); font-size: 0.8em; line-height: 1.6; }

    /* --- Founder --- */
    .founder-section {
        max-width: 680px;
        margin: 0 auto;
        padding: 100px 24px;
    }
    .founder-section h2 {
        font-family: 'Crimson Pro', Georgia, serif;
        font-size: 1.8em;
        font-weight: 300;
        color: #e8e4dc;
        margin-bottom: 32px;
    }
    .founder-section blockquote {
        font-family: 'Crimson Pro', Georgia, serif;
        color: var(--text-muted);
        font-size: 1.05em;
        line-height: 1.95;
        font-style: italic;
        margin-bottom: 20px;
        padding-left: 20px;
        border-left: 2px solid var(--border);
    }
    .founder-section .attribution {
        color: var(--text-dim);
        font-size: 0.85em;
        margin-top: 8px;
        padding-left: 20px;
    }

    /* --- CTA --- */
    .cta-bottom {
        text-align: center;
        padding: 80px 24px;
        border-top: 1px solid var(--border);
    }
    .cta-bottom h2 {
        font-family: 'Crimson Pro', Georgia, serif;
        font-size: 1.5em;
        font-weight: 300;
        color: #e8e4dc;
        margin-bottom: 8px;
    }
    .cta-bottom p {
        font-family: 'Crimson Pro', Georgia, serif;
        color: var(--text-dim);
        font-style: italic;
        margin-bottom: 32px;
    }

    /* --- Footer --- */
    footer {
        text-align: center;
        padding: 40px 24px;
        color: var(--text-minimal);
        font-size: 0.75em;
    }

    /* --- Research --- */
    .research-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 40px 0;
    }
    .research-fact {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 24px 28px;
        border-left: 3px solid var(--warm);
    }
    .research-fact .label {
        font-family: 'Inter', sans-serif;
        font-size: 0.65em;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--warm);
        margin-bottom: 10px;
    }
    .research-fact p {
        font-family: 'Crimson Pro', Georgia, serif;
        color: var(--text);
        font-size: 1em;
        line-height: 1.8;
    }
    .research-fact cite {
        display: block;
        margin-top: 8px;
        font-family: 'Inter', sans-serif;
        font-size: 0.7em;
        color: var(--text-dim);
        font-style: normal;
        letter-spacing: 0.02em;
    }

    /* --- Pricing --- */
    .pricing-section {
        max-width: 720px;
        margin: 0 auto;
        padding: 100px 24px;
        text-align: center;
    }
    .pricing-section h2 {
        font-family: 'Crimson Pro', Georgia, serif;
        font-size: 1.8em;
        font-weight: 300;
        color: #e8e4dc;
        margin-bottom: 16px;
    }
    .pricing-section .section-sub {
        font-family: 'Crimson Pro', Georgia, serif;
        color: var(--text-muted);
        font-style: italic;
        font-size: 1.05em;
        margin-bottom: 48px;
        line-height: 1.8;
    }
    .pricing-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 40px;
    }
    .pricing-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 36px 28px;
        position: relative;
        text-align: center;
        transition: border-color 0.3s;
    }
    .pricing-card.featured {
        border-color: var(--accent);
        box-shadow: 0 0 40px #b8c96408;
    }
    .pricing-badge {
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--accent);
        color: #0a0a0a;
        font-size: 0.65em;
        font-weight: 600;
        padding: 4px 14px;
        border-radius: 20px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .pricing-card .plan-name {
        font-family: 'Crimson Pro', Georgia, serif;
        font-size: 1.2em;
        font-weight: 400;
        color: var(--text);
        margin-bottom: 16px;
    }
    .pricing-card .price {
        font-family: 'Crimson Pro', Georgia, serif;
        font-size: 2.4em;
        font-weight: 300;
        color: #e8e4dc;
        line-height: 1.2;
    }
    .pricing-card .price-period {
        font-size: 0.85em;
        color: var(--text-dim);
        margin-top: 4px;
        margin-bottom: 20px;
    }
    .pricing-card .price-detail {
        font-size: 0.8em;
        color: var(--text-dim);
        margin-bottom: 20px;
    }
    .pricing-cta {
        display: inline-block;
        padding: 13px 32px;
        border-radius: 10px;
        border: none;
        background: var(--accent);
        color: #0a0a0a;
        font-size: 0.95em;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        font-family: inherit;
        text-decoration: none;
    }
    .pricing-cta:hover { background: #c8d874; }
    .pricing-cta-outline {
        display: inline-block;
        padding: 13px 32px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: transparent;
        color: var(--text);
        font-size: 0.95em;
        font-weight: 400;
        cursor: pointer;
        transition: all 0.2s;
        font-family: inherit;
        text-decoration: none;
    }
    .pricing-cta-outline:hover { border-color: var(--text-dim); }
    .pricing-note {
        font-family: 'Crimson Pro', Georgia, serif;
        color: var(--text-dim);
        font-size: 0.9em;
        font-style: italic;
        margin-top: 8px;
        line-height: 1.8;
    }
    .pricing-principles {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-top: 48px;
        text-align: left;
    }
    .pricing-principle {
        padding: 16px 20px;
        border-left: 2px solid var(--border);
    }
    .pricing-principle .pp-title {
        font-size: 0.75em;
        font-weight: 500;
        color: var(--text);
        margin-bottom: 4px;
    }
    .pricing-principle .pp-text {
        font-size: 0.75em;
        color: var(--text-dim);
        line-height: 1.6;
    }

    /* --- Eyebrow im Hero --- */
    .eyebrow {
        font-size: 0.7em;
        color: var(--text-dim);
        letter-spacing: 0.22em;
        text-transform: uppercase;
        margin-bottom: 18px;
        font-weight: 400;
    }

    /* --- Invocation: Hand & Spiegel --- */
    .invocation {
        max-width: 680px;
        margin: 0 auto;
        padding: 90px 24px 50px;
        text-align: center;
    }
    .invocation p {
        font-family: 'Crimson Pro', Georgia, serif;
        font-style: italic;
        color: var(--text);
        font-size: 1.7em;
        line-height: 1.7;
        font-weight: 300;
        letter-spacing: 0.01em;
    }

    /* --- Negative Definition --- */
    .not-block {
        margin: 36px 0 24px;
    }
    .not-block p {
        font-family: 'Crimson Pro', Georgia, serif;
        color: var(--text);
        font-size: 1.15em;
        line-height: 2.4;
        font-weight: 300;
    }
    .not-coda {
        margin-top: 12px;
        font-family: 'Crimson Pro', Georgia, serif;
        font-style: italic;
        color: var(--text-muted);
        font-size: 1.05em;
        line-height: 1.9;
    }

    /* --- Research bridge --- */
    .research-bridge {
        text-align: center;
        font-family: 'Crimson Pro', Georgia, serif;
        font-style: italic;
        color: var(--text);
        font-size: 1.1em;
        line-height: 1.8;
        margin: 32px 0 16px;
    }

    /* --- Sync paths --- */
    .sync-paths {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        margin: 36px 0 24px;
    }
    .sync-path {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 22px 26px;
    }
    .sp-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 10px;
    }
    .sp-name {
        font-family: 'Crimson Pro', Georgia, serif;
        font-size: 1.15em;
        color: var(--text);
    }
    .sp-status {
        font-size: 0.6em;
        padding: 2px 9px;
        border-radius: 8px;
        letter-spacing: 0.06em;
        font-family: 'Inter', sans-serif;
    }
    .sp-status-live {
        background: var(--accent);
        color: #0a0a0a;
        font-weight: 500;
    }
    .sp-status-planned {
        border: 1px solid var(--text-dim);
        color: var(--text-dim);
    }
    .sp-text {
        font-family: 'Crimson Pro', Georgia, serif;
        color: var(--text-muted);
        font-size: 1em;
        line-height: 1.9;
    }

    /* --- Privacy claims --- */
    .privacy-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin: 36px 0 16px;
    }
    .privacy-claim {
        padding: 18px 22px;
        border-left: 2px solid var(--accent);
        background: var(--surface);
        border-radius: 0 8px 8px 0;
    }
    .pc-title {
        font-family: 'Crimson Pro', Georgia, serif;
        font-size: 1.05em;
        color: var(--text);
        margin-bottom: 6px;
    }
    .pc-text {
        font-family: 'Crimson Pro', Georgia, serif;
        color: var(--text-muted);
        font-size: 0.95em;
        line-height: 1.8;
    }
    .pc-text strong {
        color: var(--text);
        font-weight: 500;
    }

    @media (max-width: 640px) {
        .waitlist { flex-direction: column; width: 100%; max-width: 320px; }
        .waitlist input { width: 100%; }
        .steps { grid-template-columns: 1fr; }
        .pricing-cards { grid-template-columns: 1fr; max-width: 340px; margin-left: auto; margin-right: auto; }
        .pricing-principles { grid-template-columns: 1fr; }
        .privacy-grid { grid-template-columns: 1fr; }
    }

    /* ===================================================================
       Template / Lead-Magnet pages ("Eine Zeile pro Tag" & friends)
       Used by /eine-zeile-pro-tag, /en/one-line-a-day, etc.
       =================================================================== */

    /* Shorter hero than the product landing (no forced 100vh) */
    .tpl-hero {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 96px 24px 56px;
    }
    .tpl-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 600px;
        height: 500px;
        background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%);
        pointer-events: none;
    }
    .tpl-hero h1 {
        font-family: 'Crimson Pro', Georgia, serif;
        font-size: clamp(2em, 4.5vw, 3em);
        font-weight: 300;
        letter-spacing: 0.02em;
        color: #e8e4dc;
        margin-bottom: 14px;
        position: relative;
    }
    .tpl-hero .tpl-sub-title {
        font-family: 'Crimson Pro', Georgia, serif;
        font-size: clamp(1.05em, 2vw, 1.35em);
        font-weight: 300;
        font-style: italic;
        color: var(--text-muted);
        margin-bottom: 28px;
    }

    /* Back-to-home wordmark, top-left, mirrors the language switcher */
    .tpl-home {
        position: fixed;
        top: 20px;
        left: 24px;
        z-index: 100;
        font-family: 'Crimson Pro', Georgia, serif;
        font-size: 1em;
        color: var(--text-muted);
        text-decoration: none;
        letter-spacing: 0.02em;
        transition: color 0.2s;
    }
    .tpl-home:hover { color: var(--text); }

    /* Framed preview pages — white "paper" floating on the dark surface */
    .tpl-preview-row {
        display: flex;
        gap: 22px;
        justify-content: center;
        flex-wrap: wrap;
        margin: 8px 0 36px;
        position: relative;
    }
    .tpl-preview {
        width: 240px;
        max-width: 44vw;
        height: auto;
        aspect-ratio: 157.5 / 210;
        object-fit: contain;
        border-radius: 6px;
        border: 1px solid var(--border);
        box-shadow: 0 18px 50px rgba(0,0,0,0.55);
        display: block;
        background: #fff;
    }
    .tpl-preview-caption {
        text-align: center;
        font-size: 0.7em;
        color: var(--text-dim);
        letter-spacing: 0.04em;
        margin-top: 10px;
    }

    /* Primary download button — larger sibling of the waitlist button */
    .tpl-download {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 15px 30px;
        border-radius: 12px;
        border: none;
        background: var(--accent);
        color: #0a0a0a;
        font-family: 'Inter', sans-serif;
        font-size: 1em;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.2s;
        position: relative;
        z-index: 1;
    }
    .tpl-download:hover { background: #c8d874; transform: translateY(-1px); }
    .tpl-download svg { width: 19px; height: 19px; }
    .tpl-download-note {
        font-size: 0.8em;
        color: var(--text-dim);
        margin-top: 14px;
        position: relative;
        z-index: 1;
    }

    /* Two-column: download card + optional newsletter card */
    .tpl-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin: 40px 0;
    }
    .tpl-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 32px 28px;
        text-align: center;
    }
    .tpl-card .tpl-card-label {
        font-family: 'Inter', sans-serif;
        font-size: 0.65em;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--accent);
        margin-bottom: 14px;
    }
    .tpl-card.optional .tpl-card-label { color: var(--text-dim); }
    .tpl-card h3 {
        font-family: 'Crimson Pro', Georgia, serif;
        font-size: 1.25em;
        font-weight: 400;
        color: var(--text);
        margin-bottom: 10px;
    }
    .tpl-card p {
        font-family: 'Crimson Pro', Georgia, serif;
        color: var(--text-muted);
        font-size: 0.95em;
        line-height: 1.8;
        margin-bottom: 20px;
    }
    .tpl-card .waitlist { flex-direction: column; align-items: stretch; }
    .tpl-card .waitlist input { width: 100%; }

    /* Format specs — clean bordered rows */
    .tpl-specs {
        margin: 36px 0 8px;
        border-top: 1px solid var(--border);
    }
    .tpl-spec {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        padding: 14px 4px;
        border-bottom: 1px solid var(--border);
    }
    .tpl-spec .tpl-spec-k {
        font-family: 'Inter', sans-serif;
        font-size: 0.7em;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--text-dim);
        flex-shrink: 0;
        padding-top: 3px;
    }
    .tpl-spec .tpl-spec-v {
        font-family: 'Crimson Pro', Georgia, serif;
        color: var(--text-muted);
        font-size: 1em;
        line-height: 1.7;
        text-align: right;
    }

    /* All-languages download list */
    .tpl-langs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin: 32px 0 8px;
    }
    .tpl-lang {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 18px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        text-decoration: none;
        transition: border-color 0.2s;
    }
    .tpl-lang:hover { border-color: var(--accent); }
    .tpl-lang .tpl-lang-name {
        font-family: 'Crimson Pro', Georgia, serif;
        color: var(--text);
        font-size: 1.05em;
    }
    .tpl-lang .tpl-lang-arrow { color: var(--accent); font-size: 0.9em; opacity: 0.7; }
    .tpl-lang.current { border-color: var(--accent); background: var(--accent-glow); }
    .tpl-lang.current .tpl-lang-arrow { opacity: 1; }

    /* FAQ */
    .tpl-faq { margin: 36px 0 0; }
    .tpl-faq details {
        border-bottom: 1px solid var(--border);
        padding: 18px 0;
    }
    .tpl-faq summary {
        font-family: 'Crimson Pro', Georgia, serif;
        font-size: 1.1em;
        color: var(--text);
        cursor: pointer;
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
    }
    .tpl-faq summary::-webkit-details-marker { display: none; }
    .tpl-faq summary::after {
        content: '+';
        color: var(--accent);
        font-size: 1.3em;
        font-weight: 300;
        flex-shrink: 0;
    }
    .tpl-faq details[open] summary::after { content: '\2013'; }
    .tpl-faq details p {
        font-family: 'Crimson Pro', Georgia, serif;
        color: var(--text-muted);
        font-size: 0.98em;
        line-height: 1.9;
        margin-top: 12px;
    }
    .tpl-faq details p a { color: var(--accent); text-decoration: none; }
    .tpl-faq details p a:hover { text-decoration: underline; }

    /* License note */
    .tpl-license {
        font-family: 'Crimson Pro', Georgia, serif;
        color: var(--text-dim);
        font-size: 0.9em;
        font-style: italic;
        line-height: 1.8;
        text-align: center;
        margin-top: 20px;
    }
    .tpl-license a { color: var(--text-muted); text-decoration: underline; }

    /* Subtle bridge back to the product */
    .tpl-bridge {
        text-align: center;
        font-family: 'Crimson Pro', Georgia, serif;
        font-style: italic;
        color: var(--text-muted);
        font-size: 1.1em;
        line-height: 1.9;
        margin: 8px auto 0;
        max-width: 520px;
    }
    .tpl-bridge a { color: var(--accent); text-decoration: none; }
    .tpl-bridge a:hover { text-decoration: underline; }

    @media (max-width: 640px) {
        .tpl-grid { grid-template-columns: 1fr; }
        .tpl-langs { grid-template-columns: 1fr; }
        .tpl-preview { max-width: 60vw; }
    }