/* =====================================================================
   ListMailing — standalone marketing page stylesheet
   No Tailwind, no Flux, no Vite. Self-contained.
   ===================================================================== */

/* === Tokens ========================================================= */
:root {
    --bg:          #08080f;
    --bg-2:        #0d0d1a;
    --bg-card:     rgba(255, 255, 255, 0.04);
    --bg-card-h:   rgba(255, 255, 255, 0.07);
    --border:      rgba(255, 255, 255, 0.07);
    --border-h:    rgba(255, 255, 255, 0.16);
    --text:        #f0eeff;
    --muted:       rgba(240, 238, 255, 0.55);
    --accent:      #7c3aed;
    --accent-2:    #a855f7;
    --accent-glow: rgba(124, 58, 237, 0.28);
    --radius:      1rem;
    --radius-sm:   0.5rem;
    --max-w:       1120px;
    --transition:  0.22s ease;
    /* The tallest thing the nav can hold is the primary button: its 0.95rem
       text at line-height 1.6 plus 0.7rem of padding top and bottom. Every
       page's bar matches it, so the logo and the links sit at the same height
       whether or not that button is on the page. */
    --nav-item-h:  2.92rem;
    /* The nav is position: fixed, so every page below it has to reserve this
       much room itself: the bar plus .lm-nav's own 1rem padding either side. */
    --nav-h:       calc(var(--nav-item-h) + 2rem);
}

/* === Reset =========================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* Keyboard users land here first; visible only while focused. */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0.75rem;
    z-index: 1000;
    padding: 0.6rem 1rem;
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 600;
}
.skip-link:focus { left: 0.75rem; outline: 2px solid #fff; outline-offset: 2px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }

/* === Base ============================================================ */
html {
    overflow-x: clip;
}
body {
    font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* === Container ======================================================= */
.container {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* === Typography ====================================================== */
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
h1 { font-size: clamp(2.2rem, 5vw, 3.75rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: 1.1rem; font-weight: 600; }
p  { color: var(--muted); }

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-2);
    margin-bottom: 1rem;
}

/* === Buttons ========================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.5rem;
    border-radius: 100px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), opacity var(--transition);
    border: none;
    white-space: nowrap;
}

.btn-primary {
    /* Both ends of the gradient keep white text above 4.5:1 (#7c3aed 5.7, #6d28d9 7.6). */
    background: linear-gradient(135deg, #6d28d9, var(--accent));
    color: #fff;
    box-shadow: 0 4px 24px var(--accent-glow);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.45);
}

.btn-emerald {
    /* #047857 and #065f46 keep white text at 5.5:1 and 7.7:1; the lighter emeralds sat below 4:1. */
    background: linear-gradient(135deg, #047857, #065f46);
    color: #fff;
    box-shadow: 0 4px 24px rgba(16, 185, 129, 0.35);
}
.btn-emerald:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.5);
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--border-h);
    transform: translateY(-1px);
}

.btn-lg { padding: 0.85rem 2rem; font-size: 1.05rem; }

/* === Nav ============================================================= */
.lm-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 1rem 0;
    transition: background 0.3s, backdrop-filter 0.3s, border-color 0.3s;
    border-bottom: 1px solid transparent;
}
.lm-nav.scrolled {
    background: rgba(8, 8, 15, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: var(--border);
}
.lm-nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--nav-item-h);
}
.lm-nav .brand {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #fff 0%, var(--accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.lm-nav .nav-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.lm-nav .nav-login {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(240, 238, 255, 0.8);
    padding: 0.45rem 0.9rem;
    border-radius: 100px;
    transition: color var(--transition);
}
.lm-nav .nav-login:hover { color: var(--text); }

/* The language link stays a touch softer than the other links. */
.lm-nav .lang-switch { color: var(--muted); }

/* === Hero ============================================================ */
.lm-hero {
    padding: 9rem 0 4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.lm-hero::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 600px;
    background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

.hero-text {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
}

.hero-text h1 {
    margin-bottom: 1.25rem;
    background: linear-gradient(160deg, #fff 40%, rgba(168, 85, 247, 0.85) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-text p {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    max-width: 580px;
    margin: 0 auto 2.25rem;
    color: var(--muted);
    line-height: 1.7;
}

.hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 4rem;
}

/* Browser chrome screenshot wrapper */
.screenshot-browser {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 0 0 1px rgba(124, 58, 237, 0.18),
        0 0 80px rgba(124, 58, 237, 0.18),
        0 32px 80px rgba(0, 0, 0, 0.5),
        0 8px 24px rgba(0, 0, 0, 0.3);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.screenshot-browser::before {
    content: '';
    display: block;
    height: 28px;
    background: #23233a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    background-image:
        radial-gradient(circle 4px at 14px 14px, #10b981 0%, #10b981 100%),
        radial-gradient(circle 4px at 28px 14px, #febc2e 0%, #febc2e 100%),
        radial-gradient(circle 4px at 42px 14px, #28c840 0%, #28c840 100%),
        linear-gradient(to right, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.06) 100%);
    background-repeat: no-repeat;
    background-size: auto, auto, auto, calc(100% - 160px) 16px;
    background-position: left center, left center, left center, 80px center;
    flex-shrink: 0;
}

.screenshot-browser img {
    display: block;
    width: 100%;
}

.hero-screenshot {
    max-width: 900px;
    margin: 0 auto;
    transform: perspective(1200px) rotateX(6deg);
    transition: transform 0.6s ease;
}
.hero-screenshot:hover {
    transform: perspective(1200px) rotateX(1deg);
}

/* === Features ======================================================== */
.lm-features {
    padding: 6rem 0;
    border-top: 1px solid var(--border);
    scroll-margin-top: 5rem;
}

.lm-features .section-head {
    text-align: center;
    margin-bottom: 3.5rem;
}
.lm-features .section-head p {
    margin-top: 0.75rem;
    font-size: 1.05rem;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.feature-card:hover {
    background: var(--bg-card-h);
    border-color: rgba(124, 58, 237, 0.3);
    transform: translateY(-3px);
}

.feature-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.6rem;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(168, 85, 247, 0.15));
    border: 1px solid rgba(124, 58, 237, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    flex-shrink: 0;
}
.feature-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    stroke: var(--accent-2);
    fill: none;
}

.feature-card h3 { margin-bottom: 0.4rem; color: var(--text); }
.feature-card p  { font-size: 0.9rem; line-height: 1.65; }

/* === Screenshot sections ============================================= */
.lm-screen {
    padding: 5rem 0;
    border-top: 1px solid var(--border);
}
.lm-screen:nth-child(even) { background: var(--bg-2); }

.screen-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
}
.screen-inner.reverse { direction: rtl; }
.screen-inner.reverse > * { direction: ltr; }

.screen-text h2 { margin-bottom: 1rem; }
.screen-text p  { font-size: 1rem; line-height: 1.75; margin-bottom: 1.5rem; }

.screen-shot {
    position: relative;
}
.screen-shot::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: calc(var(--radius) + 1px);
    background: linear-gradient(135deg, rgba(124,58,237,0.15), transparent 60%);
    pointer-events: none;
}

/* === How it works ==================================================== */
.lm-how {
    padding: 6rem 0;
    border-top: 1px solid var(--border);
    text-align: center;
    scroll-margin-top: 5rem;
}
.lm-how h2 { margin-bottom: 3.5rem; }

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    position: relative;
}

.steps::before {
    content: '';
    position: absolute;
    top: 2rem;
    left: calc(16.66% + 1rem);
    right: calc(16.66% + 1rem);
    height: 1px;
    background: linear-gradient(to right, var(--accent), var(--accent-2));
    opacity: 0.35;
}

.step { position: relative; }

.step-number {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.12), 0 8px 24px var(--accent-glow);
}

.step h3 { margin-bottom: 0.5rem; }
.step p  { font-size: 0.9rem; max-width: 240px; margin: 0 auto; }

/* === Final CTA ======================================================= */
.lm-cta {
    padding: 6rem 0;
    border-top: 1px solid var(--border);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.lm-cta::before {
    content: '';
    position: absolute;
    bottom: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 500px;
    background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.2) 0%, transparent 70%);
    pointer-events: none;
}
.lm-cta h2 {
    margin-bottom: 0.75rem;
    position: relative;
}
.lm-cta p {
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
    position: relative;
}
.lm-cta .btn { position: relative; }

/* === Contact ========================================================= */
.lm-contact {
    padding: 6rem 0;
    border-top: 1px solid var(--border);
    text-align: center;
    scroll-margin-top: 5rem;
}
.lm-contact .section-head {
    margin-bottom: 2.5rem;
}
.lm-contact .section-head p {
    margin-top: 0.75rem;
    font-size: 1.05rem;
}

/* === Pricing ========================================================= */
.lm-pricing {
    padding: 6rem 0;
    border-top: 1px solid var(--border);
    scroll-margin-top: 5rem;
}
.lm-pricing .section-head {
    text-align: center;
    margin-bottom: 3.5rem;
}
.lm-pricing .section-head p {
    margin-top: 0.75rem;
    font-size: 1.05rem;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}

.price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem 1.5rem;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.price-card:hover {
    background: var(--bg-card-h);
    border-color: rgba(124, 58, 237, 0.3);
    transform: translateY(-3px);
}
.price-card.featured {
    border-color: var(--accent);
    box-shadow: 0 8px 32px var(--accent-glow);
}

.price-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    padding: 0.25rem 0.65rem;
    border-radius: 100px;
}

/* Sits on the top border so card content does not shift between plans. */
.price-card .price-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

.price-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.price-amount {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}
.price-amount span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--muted);
    margin-left: 0.15rem;
}

.price-feats {
    list-style: none;
    margin: 1.25rem 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.price-feats li {
    font-size: 0.875rem;
    color: var(--muted);
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}
.price-feats li::before {
    content: '✓';
    color: var(--accent-2);
    font-weight: 700;
}

.price-card .btn {
    margin-top: auto;
    width: 100%;
    justify-content: center;
}

.pricing-credits {
    margin-top: 3rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    text-align: center;
}
.pricing-credits .price-badge {
    margin-bottom: 1.25rem;
}
.pricing-credits h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}
.pricing-credits > p {
    max-width: 540px;
    margin: 0 auto 1.5rem;
}

.credit-bundles {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.credit-bundle {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.9rem 0.5rem;
    transition: background var(--transition), border-color var(--transition);
}
.credit-bundle:hover {
    background: var(--bg-card-h);
    border-color: rgba(124, 58, 237, 0.3);
}
.credit-bundle .cb-count {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}
.credit-bundle .cb-unit {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.credit-bundle .cb-price {
    margin-top: 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent-2);
}
.lm-pricing .cc-custom {
    text-align: center;
    font-size: 0.9rem;
    margin: 2rem 0;
}

/* === Footer ========================================================== */
/* Language switch lives in the nav on desktop, only shown here on mobile. */
.lm-footer .lang-switch { display: none; }

.lm-footer {
    border-top: 1px solid var(--border);
    padding: 2rem 0;
}
.lm-footer .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.lm-footer .brand {
    font-weight: 700;
    font-size: 0.95rem;
    background: linear-gradient(135deg, #fff, var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.lm-footer p {
    font-size: 0.85rem;
    color: var(--muted);
}
.lm-footer .footer-links {
    display: flex;
    gap: 1.25rem;
    font-size: 0.85rem;
}
.lm-footer .footer-links a {
    color: var(--muted);
    transition: color var(--transition);
}
.lm-footer .footer-links a:hover { color: var(--text); }

/* === Scroll-reveal animations ======================================== */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-left {
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}
.reveal-right {
    opacity: 0;
    transform: translateX(32px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Stagger children */
.stagger > *:nth-child(1) { transition-delay: 0.05s; }
.stagger > *:nth-child(2) { transition-delay: 0.12s; }
.stagger > *:nth-child(3) { transition-delay: 0.19s; }
.stagger > *:nth-child(4) { transition-delay: 0.26s; }
.stagger > *:nth-child(5) { transition-delay: 0.33s; }
.stagger > *:nth-child(6) { transition-delay: 0.40s; }
.stagger > *:nth-child(7) { transition-delay: 0.47s; }
.stagger > *:nth-child(8) { transition-delay: 0.54s; }
.stagger > *:nth-child(9) { transition-delay: 0.61s; }

/* Hero initial animation */
@keyframes heroFade {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-anim-1 { animation: heroFade 0.7s ease 0.1s both; }
.hero-anim-2 { animation: heroFade 0.7s ease 0.25s both; }
.hero-anim-3 { animation: heroFade 0.7s ease 0.4s both; }
.hero-anim-4 { animation: heroFade 0.85s ease 0.55s both; }

/* Pulse glow on primary btn */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 4px 24px rgba(124, 58, 237, 0.4); }
    50%       { box-shadow: 0 4px 40px rgba(168, 85, 247, 0.65); }
}
.btn-primary { animation: glowPulse 3s ease-in-out infinite; }
.btn-primary:hover { animation: none; }

/* === Lightbox ========================================================= */
#lm-lightbox-close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
#lm-lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.screenshot-browser:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 4px; }
#lm-lightbox {
    padding: 0;
    background: transparent;
    border: none;
    max-width: 100vw;
    max-height: 100vh;
    outline: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#lm-lightbox::backdrop {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(6px);
}
#lm-lightbox img {
    display: block;
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    cursor: zoom-out;
}

/* === Embed demo ====================================================== */
.embed-demo {
    background: var(--bg-card);
    border: 1px solid var(--border-h);
    border-radius: var(--radius);
    padding: 2rem;
}

.listmailing-signup__heading {
    font-family: 'Instrument Sans', ui-sans-serif, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 1rem;
}

.listmailing-signup__label {
    display: block;
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 0.35rem;
}

.listmailing-signup__input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-h);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.9rem;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text);
    transition: border-color var(--transition);
}
.listmailing-signup__input:focus {
    outline: 2px solid var(--accent-2);
    outline-offset: 2px;
    border-color: var(--accent);
}
.listmailing-signup__input::placeholder { color: rgba(240, 238, 255, 0.3); }

.listmailing-signup__button {
    display: block;
    width: 100%;
    margin-top: 0.85rem;
    padding: 0.65rem 1rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: 100px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    transition: opacity var(--transition);
}
.listmailing-signup__button:hover { opacity: 0.85; }
.listmailing-signup__button:disabled { opacity: 0.5; cursor: default; }

.listmailing-signup__message {
    font-size: 0.875rem;
    margin-top: 0.6rem;
    color: var(--muted);
    display: none;
}
.listmailing-signup__message--error { color: #f87171; }
.listmailing-signup__message--success { color: #34d399; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; }
    .hero-screenshot { transform: none; }
}

/* === Responsive ====================================================== */
@media (max-width: 900px) {
    .screen-inner,
    .screen-inner.reverse {
        grid-template-columns: 1fr;
        direction: ltr;
        gap: 2.5rem;
    }
    .screen-inner.reverse .screen-text { order: -1; }
    .steps { grid-template-columns: 1fr; gap: 2.5rem; }
    .steps::before { display: none; }
    .hero-screenshot { transform: none; }
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .credit-bundles { grid-template-columns: repeat(3, 1fr); }
}

/* Drop the wider content anchors first; Prijzen stays until the phone breakpoint. */
@media (max-width: 900px) {
    .lm-nav .nav-links .nav-anchor-wide { display: none; }
}

@media (max-width: 600px) {
    .lm-hero { padding: 7rem 0 3rem; }
    /* Keep only login + CTA in the nav; anchors and language live in the footer. */
    .lm-nav .nav-links .nav-anchor,
    .lm-nav .nav-links .lang-switch { display: none; }
    .lm-footer .lang-switch { display: inline-flex; }
    .lm-footer .container { flex-direction: column; align-items: flex-start; }
    .lm-footer .footer-links { flex-direction: column; gap: 0.75rem; }
    .pricing-grid { grid-template-columns: 1fr; }
    .credit-bundles { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   Manual (/help)
   Shared by every brand, like the legal pages: this file is the public
   stylesheet, despite its ListMailing-era name.
   ===================================================================== */

.docs {
    max-width: 820px;
    margin: 0 auto;
    padding: calc(var(--nav-h) + 2rem) 1.25rem 4rem;
}

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

.docs-header h1 { font-size: 2.25rem; line-height: 1.15; }
.docs-lead { color: var(--muted); font-size: 1.05rem; margin-top: 0.5rem; }
.docs-actions { margin-top: 1.5rem; }

.docs-search { margin: 2.5rem 0 1rem; }
.docs-search input {
    width: 100%;
    padding: 0.8rem 1rem;
    font: inherit;
    color: var(--text);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition);
}
.docs-search input:focus { outline: 2px solid var(--accent-2); outline-offset: 2px; border-color: var(--border-h); }
.docs-search input::placeholder { color: var(--muted); }
.docs-no-results { color: var(--muted); margin-top: 1rem; }

.docs-section { margin-top: 2.5rem; }
.docs-section h2 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--muted);
    margin-bottom: 0.9rem;
}

.docs-cards { list-style: none; display: grid; gap: 0.6rem; }
.docs-card a {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: background var(--transition), border-color var(--transition);
}
.docs-card a:hover { background: var(--bg-card-h); border-color: var(--border-h); }
.docs-card-icon { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; margin-top: 0.15rem; color: var(--accent-2); }
.docs-card-text { min-width: 0; }
.docs-card-title { display: block; font-weight: 600; }
.docs-card-summary { display: block; color: var(--muted); font-size: 0.93rem; margin-top: 0.2rem; }

.docs-breadcrumb {
    display: flex;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--muted);
    margin-bottom: 1.5rem;
}
.docs-breadcrumb a { text-decoration: underline; }

.docs-article h1 { font-size: 2.1rem; line-height: 1.15; }
.docs-article h2 { font-size: 1.35rem; margin: 2.5rem 0 0.75rem; }
.docs-article h3 { font-size: 1.08rem; margin: 1.75rem 0 0.5rem; }
.docs-article p, .docs-article li { line-height: 1.75; }
.docs-article p { margin-bottom: 1rem; }
.docs-article ul, .docs-article ol { padding-left: 1.3rem; margin-bottom: 1.25rem; }
.docs-article li { margin-bottom: 0.4rem; }
.docs-article a { color: var(--accent-2); text-decoration: underline; }
.docs-article strong { color: var(--text); }
.docs-article code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88em;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 0.3rem;
    padding: 0.1rem 0.35rem;
}
.docs-article pre {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    overflow-x: auto;
    margin-bottom: 1.25rem;
}
.docs-article pre code { background: none; border: 0; padding: 0; }
.docs-article blockquote {
    border-left: 3px solid var(--accent);
    padding: 0.25rem 0 0.25rem 1rem;
    color: var(--muted);
    margin-bottom: 1.25rem;
}
.docs-article table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.93rem; }
.docs-article th, .docs-article td {
    text-align: left;
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.docs-article th { color: var(--muted); font-weight: 600; }

.doc-anchor {
    opacity: 0;
    margin-left: 0.4rem;
    color: var(--muted);
    transition: opacity var(--transition);
}
h2:hover .doc-anchor, h3:hover .doc-anchor, h2:focus-within .doc-anchor, h3:focus-within .doc-anchor, .doc-anchor:focus { opacity: 1; }

.docs-applink { margin: 1.75rem 0; }
.docs-applink a {
    display: inline-block;
    padding: 0.6rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-h);
    border-radius: var(--radius-sm);
}
.docs-applink a:hover { background: var(--bg-card-h); }

.docs-updated { color: var(--muted); font-size: 0.85rem; margin-top: 2.5rem; }

.docs-related {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.docs-related h2 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--muted);
    margin-bottom: 0.75rem;
}
.docs-related ul { list-style: none; display: grid; gap: 0.4rem; }
.docs-related a { text-decoration: underline; }

.docs-back { margin-top: 2.5rem; }
.docs-back a { color: var(--muted); text-decoration: underline; }

@media (max-width: 640px) {
    .docs { padding: calc(var(--nav-h) + 1.25rem) 1rem 3rem; }
    .docs-header h1 { font-size: 1.8rem; }
    .docs-article h1 { font-size: 1.7rem; }
}

/* The manual's own nav link is noise while you are already reading it, and
   dropping it keeps the bar on one line on a phone. */
@media (max-width: 600px) {
    .lm-nav .nav-links .nav-docs { display: none; }
}