/* LocoLink V5 site skin (2026-09-28) — brings the V5 homepage look to every
   other page: guides (seo-*), download, pricing, command stations, contact…
   Loaded after styles.css / seo-base.css / seo-landing.css and v5.css.
   Content and structure stay as they are; only the presentation changes. */

:root {
    --v5s-radius: 22px;
    --v5s-card: rgba(255, 255, 255, 0.035);
    --v5s-card-border: rgba(255, 255, 255, 0.08);
    --v5s-card-hover: rgba(245, 158, 11, 0.35);
    --v5s-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 60px rgba(0, 0, 0, 0.28);
    --v5s-glow: rgba(245, 158, 11, 0.16);
    --v5s-glow-2: rgba(99, 102, 241, 0.12);
}
[data-theme="light"] {
    --v5s-card: rgba(255, 255, 255, 0.78);
    --v5s-card-border: rgba(15, 23, 42, 0.08);
    --v5s-card-hover: rgba(217, 119, 6, 0.4);
    --v5s-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 44px rgba(15, 23, 42, 0.08);
    --v5s-glow: rgba(245, 158, 11, 0.14);
    --v5s-glow-2: rgba(99, 102, 241, 0.08);
}

/* ---------- Heroes ---------- */
.seo-hero, .page-header, .cs-hero, .ll-comparison-hero, .press-hero {
    position: relative; isolation: isolate;
}
.seo-hero::before, .page-header::before, .cs-hero::before, .press-hero::before {
    content: ""; position: absolute; inset: -120px 0 -40px; z-index: -1; pointer-events: none;
    background:
        radial-gradient(60% 55% at 18% 0%, var(--v5s-glow), transparent 70%),
        radial-gradient(50% 50% at 88% 12%, var(--v5s-glow-2), transparent 70%);
}
.page-header h1, .page-header .section-title, .press-hero h1 {
    font-size: clamp(40px, 6.2vw, 78px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 900;
    text-wrap: balance;
}
/* Two-column heroes: long words (Modellbahnsoftware, besturingssoftware) must
   wrap instead of being cut off. */
.seo-hero h1, .cs-title, .ll-comparison-hero h1 {
    font-size: clamp(36px, 4.7vw, 64px); line-height: 1.04; letter-spacing: -0.04em; font-weight: 900;
    text-wrap: balance; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto;
}
.seo-hero-grid > div:first-child, .cs-intro { min-width: 0; }
/* German and Dutch compounds (Modellbahnsoftware, besturingssoftware) need a
   size at which one word fits the hero column. */
html[lang^="de"] .seo-hero h1, html[lang^="nl"] .seo-hero h1 { font-size: clamp(32px, 3.9vw, 54px); }
.seo-gradient, .cs-title .gradient, .section-title .gradient {
    background: linear-gradient(95deg, var(--v5-amber) 5%, var(--v5-amber-2) 55%, #fde68a);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    padding: 0 .06em .14em .02em; margin: 0 -.06em -.14em -.02em;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.seo-eyebrow, .section-label, .seo-section-label, .press-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.seo-lead, .page-header .section-sub, .cs-lead {
    font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6;
}
.seo-proof { display: flex; flex-wrap: wrap; gap: 10px; }
.seo-proof span, .dl-free-strip > span {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
    background: var(--v5s-card); border: 1px solid var(--v5s-card-border); font-size: 14px; font-weight: 650;
}

/* Hero screenshots look like app windows. */
.seo-visual { position: relative; }
/* The width/height attributes must not fix the height: keep the 16:10 frame. */
.seo-visual img { height: auto; }
.seo-visual > img, .cs-visual > img {
    border-radius: 18px; border: 1px solid var(--v5s-card-border);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.35), 0 12px 30px rgba(0, 0, 0, 0.18);
}
.seo-visual-badge, .cs-visual-copy {
    backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border-radius: 16px;
}

/* ---------- Section heads ---------- */
.seo-section-head h2, .section-title:not(h1), .press-head h2, .ll-comparison-prose h2 {
    font-size: clamp(30px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -0.035em; font-weight: 900;
    text-wrap: balance;
}

/* ---------- Cards ---------- */
.seo-card, .seo-fact, .seo-step, .seo-alt, .seo-experience-card, .seo-app-review-card, .press-card, .asset-card,
.card, .dl-card, .platform-card, .contact-card, .trust-item, .pro-feature-item, .beta-platform, .beta-feat,
.ll-comparison-feature, .trial-hero-card, .cs-start-strip > span {
    background: var(--v5s-card); border: 1px solid var(--v5s-card-border); border-radius: var(--v5s-radius);
    box-shadow: var(--v5s-shadow);
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), border-color .25s, box-shadow .25s;
}
.seo-card:hover, .seo-alt:hover, .seo-experience-card:hover, .card:hover, .dl-card:hover, .platform-card:hover,
.contact-card:hover, .pro-feature-item:hover, .beta-platform:hover, .ll-comparison-feature:hover {
    transform: translateY(-3px); border-color: var(--v5s-card-hover);
}
.seo-card-icon, .dl-card-icon, .contact-card-icon, .dl-stat-icon {
    border-radius: 14px;
}

/* ---------- Buttons ---------- */
.btn, .dl-btn, .platform-btn {
    border-radius: 999px; font-weight: 750; letter-spacing: -0.01em;
    transition: transform .2s, box-shadow .2s, background .2s;
}
.btn-primary, .dl-btn-primary {
    background: linear-gradient(135deg, #fbbf24, #f59e0b 55%, #f97316); color: #1a1204; border: 0;
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.35), 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}
.btn-primary:hover, .dl-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(245, 158, 11, 0.45); }
.btn-secondary {
    background: var(--v5s-card); border: 1px solid var(--v5s-card-border);
}

/* ---------- Tables, FAQ, CTA ---------- */
.seo-table-wrap, .ll-comparison-table-wrap {
    border-radius: var(--v5s-radius); border: 1px solid var(--v5s-card-border); overflow: hidden;
    background: var(--v5s-card); box-shadow: var(--v5s-shadow);
}
.seo-table th { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.seo-table tr:nth-child(even) td { background: rgba(127, 127, 127, 0.04); }
.seo-faq-list details, .faq-item, .dl-faq-item {
    border-radius: 18px; border: 1px solid var(--v5s-card-border); background: var(--v5s-card);
    margin-bottom: 10px; overflow: hidden;
}
.seo-faq-list summary, .faq-item summary, .dl-faq-item summary { font-weight: 750; }
.seo-cta > .container, .seo-cta-card {
    border-radius: 32px;
}
.seo-cta {
    position: relative; isolation: isolate;
}
.seo-cta::before {
    content: ""; position: absolute; inset: 8% 6%; z-index: -1; border-radius: 40px; pointer-events: none;
    background: radial-gradient(70% 90% at 50% 0%, var(--v5s-glow), transparent 70%);
}

/* ---------- V5 visual band (real app screens under every hero) ---------- */
.v5-band { padding: clamp(24px, 4vw, 56px) 0 clamp(40px, 6vw, 88px); overflow-x: clip; }
.v5-band .v5-wrap { text-align: center; }
.v5-band-stage {
    position: relative; max-width: 1080px; margin: 18px auto 0; aspect-ratio: 16 / 8.6;
}
.v5-band-stage .dev-window { position: absolute; left: 9%; right: 9%; top: 0; }
.v5-band-stage .dev-tablet { position: absolute; width: 30%; left: 0; bottom: -2%; transform: rotate(-3deg); }
.v5-band-stage .dev-phone.a { position: absolute; width: 15%; right: 2%; bottom: -6%; transform: rotate(4deg); }
.v5-band-stage .dev-phone.b { position: absolute; width: 13.5%; right: 17%; bottom: -10%; transform: rotate(-2deg); }
.v5-band-stage.two .dev-window { left: 4%; right: 24%; }
.v5-band-stage.two .dev-phone.a { width: 17%; right: 3%; bottom: -4%; }
.v5-band-stage.two .dev-phone.b { width: 15%; right: 19%; bottom: -12%; }
.v5-band-cap { margin: clamp(44px, 7vw, 84px) auto 0; max-width: 40em; color: var(--text-secondary); font-size: 15px; }
@media (max-width: 760px) {
    .v5-band-stage { aspect-ratio: 4 / 4.4; }
    .v5-band-stage .dev-window, .v5-band-stage.two .dev-window { left: 0; right: 0; }
    .v5-band-stage .dev-tablet { width: 52%; left: -3%; bottom: 6%; }
    .v5-band-stage .dev-phone.a, .v5-band-stage.two .dev-phone.a { width: 30%; right: 0; bottom: 0; }
    .v5-band-stage .dev-phone.b, .v5-band-stage.two .dev-phone.b { display: none; }
}

/* ---------- Smooth scrolling on phones ---------- */
/* styles.css, mobile.css and seo-base.css set overflow-x: hidden on html AND
   body. That turns body into its own scroll box inside the page; iOS Safari
   then hangs now and then while you scroll long pages such as Features (Tom,
   28-09). clip cuts horizontal overflow the same way without creating a
   scroll box. Browsers without clip keep the old hidden. */
html, body { overflow-x: clip; }
/* Wide tables scroll sideways inside their own box without dragging the page. */
.compare-table-wrap, .seo-table-wrap, .ll-comparison-table-wrap { overscroll-behavior-x: contain; }

/* ---------- V5 heroes start below the fixed menu ---------- */
/* The menu is 65-76 px tall (more under an iPhone notch); the hero padding
   scaled with the width, so on phones and tablets the "2.0" / "New" pill
   was half hidden behind the menu (Tom, 28-09). */
.v5-hero { padding-top: max(calc(var(--v5-section) * .62), 104px); }
@media (max-width: 640px) {
    .v5-hero { padding-top: calc(92px + env(safe-area-inset-top, 0px)); }
}

/* ---------- Links to the Italian and Japanese guides ---------- */
/* generate-international-guides.js adds <nav data-international-guides> at
   the bottom of the guide family; the site-wide "nav" rule made it a second
   fixed menu bar on top of the real one. It is a plain line of links. */
html nav[data-international-guides] {
    position: static; inset: auto; z-index: auto; height: auto; min-height: 0;
    padding: 28px 16px 44px !important; background: none; border: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
html nav[data-international-guides] a { color: var(--text-secondary); font-weight: 650; text-decoration: none; }
html nav[data-international-guides] a:hover { color: var(--text-primary); }

/* ---------- Command stations: visual cards, less text (Tom 28-09) ---------- */
/* command-station-page.js draws a device per system and the connection as
   icons; one colour per system. */
.cs-station-card, .cs-rec-card { --st: #f59e0b; --st-rgb: 245, 158, 11; }
.cs-station-card.is-z21, .cs-rec-card.is-z21 { --st: #ef4444; --st-rgb: 239, 68, 68; }
.cs-station-card.is-ecos, .cs-rec-card.is-ecos { --st: #3b82f6; --st-rgb: 59, 130, 246; }
.cs-station-card.is-cs3, .cs-rec-card.is-cs3 { --st: #f59e0b; --st-rgb: 245, 158, 11; }
.cs-station-card.is-dcc-ex, .cs-rec-card.is-dcc-ex { --st: #10b981; --st-rgb: 16, 185, 129; }
.cs-station-card.is-yamorc, .cs-rec-card.is-yamorc { --st: #8b5cf6; --st-rgb: 139, 92, 246; }
.cs-station-card.is-bidib, .cs-rec-card.is-bidib { --st: #06b6d4; --st-rgb: 6, 182, 212; }
.cs-station-card.is-xpressnet, .cs-rec-card.is-xpressnet { --st: #64748b; --st-rgb: 100, 116, 139; }
.cs-station-card.is-nce, .cs-rec-card.is-nce { --st: #f97316; --st-rgb: 249, 115, 22; }
.cs-station-card.is-loconet, .cs-rec-card.is-loconet { --st: #ec4899; --st-rgb: 236, 72, 153; }

.cs-device {
    position: relative; display: grid; place-items: center; height: 124px; color: var(--st);
    background:
        radial-gradient(90% 100% at 50% 0%, rgba(var(--st-rgb), .26), transparent 70%),
        linear-gradient(180deg, rgba(var(--st-rgb), .10), transparent);
}
.cs-device svg {
    width: 104px; height: 78px; fill: rgba(var(--st-rgb), .08); stroke: currentColor; stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 10px 22px rgba(var(--st-rgb), .38));
}
.cs-device-family {
    position: absolute; left: 14px; top: 14px; padding: 4px 10px; border-radius: 999px;
    background: rgba(var(--st-rgb), .15); color: var(--st);
    font-size: 11px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase;
}
.cs-station-card { display: flex; flex-direction: column; padding: 0 !important; border-radius: 22px !important; }
.cs-station-card::before { height: 4px !important; background: var(--st) !important; }
.cs-station-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 16px 18px 18px; }
.cs-station-body h3 { margin: 0; font-size: 19px; line-height: 1.2; }
.cs-station-body p { margin: 0 !important; font-size: 14px !important; }
.cs-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.cs-link {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; border-radius: 999px;
    background: rgba(var(--st-rgb), .10); border: 1px solid rgba(var(--st-rgb), .26);
    color: var(--text-primary); font-size: 12.5px; font-weight: 750;
}
.cs-link svg { width: 16px; height: 16px; fill: none; stroke: var(--st); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The top three: a row with a small device tile, number, tags and icons. */
.cs-rec-card { display: grid !important; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px !important; border-radius: 18px !important; }
.cs-rec-card::before { background: var(--st) !important; }
.cs-rec-card .cs-device { height: 84px; border-radius: 14px; }
.cs-rec-card .cs-device svg { width: 60px; height: 45px; }
.cs-rec-card .cs-device-family { display: none; }
.cs-rec-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cs-rec-name { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px !important; }
.cs-rank {
    display: inline-grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
    background: var(--st); color: #fff; font-size: 12px; font-weight: 850;
}
.cs-rec-card .cs-links { margin-top: 0; }

/* Less text: the steps show only their title, no hint lines or notes. */
.cs-start-strip small, .cs-note, .cs-section-head p, .cs-visual-copy span:not(.cs-status-dot), .cs-segments button small { display: none !important; }
.cs-segments button { min-height: 44px; }

@media (max-width: 720px) {
    /* The choice buttons are short now: two per row. */
    .cs-segments, .cs-segments.is-wide { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .cs-device { height: 100px; }
    .cs-device svg { width: 86px; height: 64px; }
}

/* Sources and connection details: folded away. */
.cs-evidence-more { margin-top: 20px; border: 1px solid var(--v5s-card-border); border-radius: 18px; background: var(--v5s-card); }
.cs-evidence-more > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px; cursor: pointer; list-style: none; font-weight: 800;
}
.cs-evidence-more > summary::-webkit-details-marker { display: none; }
.cs-evidence-more > summary::after { content: "+"; color: var(--v5-amber); font-size: 24px; line-height: 1; }
.cs-evidence-more[open] > summary::after { content: "−"; }
.cs-evidence-more > :not(summary) { margin: 0 20px 20px; }

/* ---------- Pricing: clearer, less text, visual plans (Tom 28-09) ---------- */
/* The trial block repeated the hero; only its four promises stay, as chips. */
.trial-spotlight { padding: 8px 0 0 !important; }
.trial-spotlight .trial-hero-card { display: block !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.trial-spotlight .trial-hero-card > div:first-child, .trial-spotlight .trial-meter { display: none !important; }
.trial-spotlight .trial-checks { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 980px; margin: 0 auto; }
.trial-spotlight .trial-check { border-radius: 999px !important; padding: 10px 16px 10px 12px !important; }
/* Less text around the choices; the lifetime card itself says "every update". */
.platform-picker-sub, .billing-heading strong, .v5-lifetime-callout { display: none !important; }
/* Readable selected platform in dark mode (the dark tile rule won over the orange one). */
[data-theme="dark"] .pricing-section .platform-btn.active {
    border-color: rgba(255, 149, 0, 0.96);
    background: linear-gradient(145deg, #ffbf2f 0%, #ff9500 58%, #ee7d00 100%);
    color: #111827;
}
[data-theme="dark"] .pricing-section .platform-btn.active .platform-main,
[data-theme="dark"] .pricing-section .platform-btn.active .platform-sub { color: #111827; }
/* Each plan shows the app it unlocks; six key points, the rest in "Compare plans". */
.pricing-cards .price-card::before {
    /* styles.css turns .featured::before into an absolute badge: reset that. */
    position: static; top: auto; left: auto; transform: none; padding: 0; width: auto; white-space: normal;
    content: ""; display: block; aspect-ratio: 16 / 9; margin: -4px -4px 20px; border-radius: 12px;
    background: var(--plan-shot) center top / cover no-repeat, var(--bg-elevated);
    border: 1px solid var(--v5s-card-border); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}
.pricing-cards .trial-card { --plan-shot: url(/assets/v5/en/windows_workspace-1200.webp); }
.pricing-cards .plus-card { --plan-shot: url(/assets/v5/en/ipad_drive-1200.webp); }
.pricing-cards .pro-card { --plan-shot: url(/assets/v5/en/mac_switchboard_dark-1200.webp); }
html[lang^="nl"] .pricing-cards .trial-card { --plan-shot: url(/assets/v5/nl/windows_workspace-1200.webp); }
html[lang^="nl"] .pricing-cards .plus-card { --plan-shot: url(/assets/v5/nl/ipad_drive-1200.webp); }
html[lang^="nl"] .pricing-cards .pro-card { --plan-shot: url(/assets/v5/nl/mac_switchboard_dark-1200.webp); }
html[lang^="de"] .pricing-cards .trial-card { --plan-shot: url(/assets/v5/de/windows_workspace-1200.webp); }
html[lang^="de"] .pricing-cards .plus-card { --plan-shot: url(/assets/v5/de/ipad_drive-1200.webp); }
html[lang^="de"] .pricing-cards .pro-card { --plan-shot: url(/assets/v5/de/mac_switchboard_dark-1200.webp); }
.pricing-cards .price-features li:nth-child(n+7) { display: none !important; }
/* "Compare plans" folded away under the cards. */
.v5-compare { margin-top: 56px; }
.v5-compare > summary { display: flex; align-items: center; justify-content: center; gap: 14px; list-style: none; cursor: pointer; }
.v5-compare > summary::-webkit-details-marker { display: none; }
.v5-compare > summary h2 { margin: 0 !important; }
.v5-compare > summary::after {
    content: "+"; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: var(--v5s-card); border: 1px solid var(--v5s-card-border); color: var(--v5-amber); font-size: 24px; font-weight: 700;
}
.v5-compare[open] > summary::after { content: "−"; }
.v5-compare[open] > summary { margin-bottom: 20px; }
.pricing-section .v5-band { margin-top: 36px; }

/* ---------- Download page: the Android e-mail field on phones ---------- */
/* Field and button side by side cut the placeholder off ("Notify me when
   Androi…"); on phones they are stacked. */
@media (max-width: 480px) {
    .dl-notify { flex-direction: column; }
    .dl-notify input, .dl-notify button { width: 100%; }
}
/* Form fields at 16 px or more on phones: smaller text makes iOS zoom the
   whole page in when you tap a field (newsletter, contact, currency). */
@media (max-width: 640px) {
    input:not([type]), input[type="email"], input[type="text"], input[type="search"], input[type="tel"],
    input[type="url"], input[type="number"], select, textarea { font-size: max(16px, 1em); }
}

/* ---------- Phones: shorter lists ---------- */
@media (max-width: 480px) {
    .v5-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .v5-sources span { padding: 10px 12px; }
    .v5-sources b { font-size: 14px; }
}
/* Features page: the jump links in one row you can swipe, instead of three rows. */
@media (max-width: 640px) {
    .v5-jump {
        flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain;
        margin: 22px calc(-1 * var(--v5-gap)) 0; padding: 4px var(--v5-gap) 6px;
        scrollbar-width: none; scroll-snap-type: x proximity;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--v5-gap), #000 calc(100% - var(--v5-gap)), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 var(--v5-gap), #000 calc(100% - var(--v5-gap)), transparent 100%);
    }
    .v5-jump::-webkit-scrollbar { display: none; }
    .v5-jump a { flex: 0 0 auto; scroll-snap-align: start; }
}

/* ---------- Navigation on tablets and small laptops ---------- */
/* The full menu needs about 1000 px in German and Dutch and 1140 px in French,
   but the phone menu only starts at 640 px, so between those widths the
   Download button and the flags fell off the right edge. Up to 1023 px the
   phone menu (☰) is used; from 1024 px the menu is compacted. */
@media (min-width: 641px) and (max-width: 1023px) {
    nav:has(.nav-mobile-toggle) .nav-links:not(.open) { display: none; }
    nav .nav-mobile-actions { display: flex; align-items: center; gap: 8px; }
    nav .nav-mobile-theme, nav .nav-mobile-toggle {
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        width: 40px; height: 40px; padding: 0; border-radius: 10px;
        border: 1px solid var(--border-light); background: var(--bg-card); color: var(--text-primary); font-size: 18px;
    }
    nav .nav-mobile-theme svg { width: 18px; height: 18px; }
    [data-theme="light"] nav .nav-mobile-theme, [data-theme="light"] nav .nav-mobile-toggle {
        background: rgba(255, 255, 255, 0.86); border-color: rgba(0, 0, 0, 0.10); color: var(--text-secondary);
    }
    nav .nav-links.open {
        display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; z-index: 999;
        gap: 0; padding: 12px 0 16px; border-bottom: 1px solid var(--border);
        background: rgba(8, 8, 13, 0.98); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5);
    }
    [data-theme="light"] nav .nav-links.open { background: rgba(248, 248, 251, 0.98); border-bottom-color: rgba(0, 0, 0, 0.08); }
    nav .nav-links.open li { width: 100%; }
    nav .nav-links.open a { display: block; padding: 12px 28px; font-size: 16px; border-radius: 0; }
    nav .nav-links.open .lang-switcher { display: flex; gap: 6px; padding: 6px 22px; }
    nav .nav-links.open .lang-switcher a, nav .nav-links.open .lang-btn { width: auto; padding: 6px; }
    nav .nav-links.open li:has(.theme-toggle) { display: none; }
    nav .nav-links.open li:has(.nav-cta) { padding: 6px 22px 2px; }
    nav .nav-links.open .nav-cta {
        display: block !important; text-align: center !important; padding: 13px 20px !important;
        border-radius: 999px !important; font-size: 16px !important;
    }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    nav .nav-links { gap: 2px; }
    nav .nav-links a { padding: 8px 9px; font-size: 13.5px; }
    nav .nav-links .nav-cta { padding: 8px 15px !important; }
    nav .lang-switcher { gap: 0; }
    nav .lang-switcher .lang-btn { padding: 2px 3px; }
}

/* ---------- Footer: links wrap instead of running off the page ---------- */
.footer-right { min-width: 0; }
.footer-links { flex-wrap: wrap; row-gap: 10px; }
@media (min-width: 641px) and (max-width: 1100px) {
    .footer-content { flex-direction: column; gap: 18px; text-align: center; }
    .footer-right { flex-direction: column; gap: 16px; }
    .footer-social, .footer-links { justify-content: center; }
}

/* ---------- Long words in small buttons (command stations) ---------- */
.cs-segments button { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }

/* ---------- Download page: platform tiles on phones ---------- */
/* linux-release.css asks for two columns below 650 px while styles.css lays
   each tile out as a row there, so "NU BESCHIKBAAR" was cut off. Two columns
   of stacked tiles, Linux across the full width. */
@media (max-width: 560px) {
    .dl-page .dl-platform-picker .eco-switcher.eco-switcher { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .dl-page .dl-platform-picker .eco-tab.eco-tab {
        min-width: 0; min-height: 0; padding: 14px; gap: 12px;
        flex-direction: column; align-items: flex-start; justify-content: flex-start;
    }
    .dl-page .dl-platform-picker .eco-tab .dl-platform-logo { width: 42px; height: 42px; border-radius: 12px; }
    .dl-page .dl-platform-picker .eco-tab .dl-platform-logo svg { width: 22px; height: 22px; }
    .dl-page .dl-platform-copy { min-width: 0; }
    .dl-page .dl-platform-title { font-size: 18px; }
    .dl-page .dl-platform-status { max-width: 100%; white-space: normal; letter-spacing: .3px; font-size: 10.5px; line-height: 1.25; }
    .dl-page .dl-platform-picker .eco-switcher > .ll-linux-picker { grid-column: 1 / -1; justify-content: center; }
}