/* home-v6.css — homepage sections redesigned on 2026-10-16 (Tom):
   - "Never miss an update" directly under the hero screens, compact but with
     every option (e-mail, language, 10% welcome discount, social links);
   - "Find the right workflow" as four themed cards instead of a wall of links;
   - "Your railway. In 3D." as a large stage with the newest 3D renders.
   Built on the styles.css tokens (--bg-*, --text-*, --border*) and v5.css. */

:root {
    --h6-card: #ffffff;
    --h6-line: rgba(15, 23, 42, .08);
    --h6-soft: rgba(15, 23, 42, .04);
    --h6-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 48px rgba(15, 23, 42, .08);
    --h6-field: #ffffff;
    --h6-ink: #111118;
    --h6-muted: #55556a;
}
[data-theme="dark"] {
    --h6-card: #13131c;
    --h6-line: rgba(255, 255, 255, .08);
    --h6-soft: rgba(255, 255, 255, .04);
    --h6-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 48px rgba(0, 0, 0, .35);
    --h6-field: #0c0c13;
    --h6-ink: #f0f0f5;
    --h6-muted: #9a9aae;
}

/* ───────────────── Newsletter, compact under the hero ───────────────── */
.v5 .wl5 { padding: 28px 0 24px; }
.wl5-card {
    position: relative; overflow: hidden; border-radius: 28px; padding: 26px 30px;
    background: var(--h6-card); border: 1px solid var(--h6-line); box-shadow: var(--h6-shadow);
}
.wl5-card::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(520px 220px at 0% 0%, rgba(245, 158, 11, .13), transparent 70%),
                radial-gradient(420px 220px at 100% 100%, rgba(139, 92, 246, .09), transparent 70%);
}
.wl5-grid { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 34px; align-items: center; }
.wl5-grid[hidden] { display: none; }
.wl5-badge {
    display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 999px;
    background: rgba(245, 158, 11, .12); color: #b45309; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
[data-theme="dark"] .wl5-badge { color: #fbbf24; background: rgba(245, 158, 11, .14); }
.wl5-badge .waitlist-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .2); }
.wl5-title { margin: 12px 0 8px; font-size: clamp(26px, 2.6vw, 34px); font-weight: 900; letter-spacing: -.035em; line-height: 1.05; color: var(--h6-ink); }
.wl5-title em { font-style: normal; background: linear-gradient(92deg, #f59e0b, #fbbf24 60%, #fde68a); -webkit-background-clip: text; background-clip: text; color: transparent;
    padding: 0 .06em .12em .02em; margin: 0 -.06em -.12em -.02em; }
.wl5-sub { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--h6-muted); max-width: 32em; }
.wl5-offer {
    display: inline-flex; align-items: center; gap: 9px; margin: 14px 0 0; padding: 8px 14px 8px 9px; border-radius: 999px;
    background: linear-gradient(135deg, rgba(245, 158, 11, .14), rgba(249, 115, 22, .1)); border: 1px solid rgba(245, 158, 11, .3);
    font-size: 13.5px; font-weight: 650; color: var(--h6-ink);
}
.wl5-offer i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; font-style: normal; }
.wl5-offer i svg { width: 14px; height: 14px; }
.wl5-offer b { font-weight: 850; color: #c2410c; }
[data-theme="dark"] .wl5-offer b { color: #fbbf24; }

.wl5-form { position: relative; margin: 0; }
.wl5-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.wl5-field {
    display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 999px;
    background: var(--h6-field); border: 1.5px solid var(--h6-line); transition: border-color .18s ease, box-shadow .18s ease;
}
.wl5-field:focus-within { border-color: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .16); }
.wl5-field > svg { flex: none; width: 19px; height: 19px; color: var(--h6-muted); }
.wl5 .wl5-field input[type="email"] {
    flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 4px; margin: 0; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important;
    font: 600 16px/1.2 Inter, system-ui, sans-serif; color: var(--h6-ink);
}
.wl5 .wl5-field input[type="email"]::placeholder { color: var(--h6-muted); opacity: .75; font-weight: 500; }
.wl5-submit {
    flex: none; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
    background: linear-gradient(135deg, #f59e0b, #f97316); color: #1a1204; font: 800 15px/1 Inter, system-ui, sans-serif; letter-spacing: -.01em; white-space: nowrap;
    box-shadow: 0 8px 22px rgba(245, 158, 11, .3); transition: transform .15s ease, box-shadow .15s ease;
}
.wl5-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(245, 158, 11, .4); }
.wl5-submit:disabled { opacity: .65; cursor: progress; }
.wl5-submit svg { width: 16px; height: 16px; }
.wl5-submit:focus-visible { outline: 2px solid #f59e0b; outline-offset: 3px; }

.wl5-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; margin-top: 14px; }
.wl5-langs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; padding: 0; border: 0; min-width: 0; }
.wl5-langs legend { float: left; margin: 0 2px 0 0; padding: 0; font-size: 12.5px; font-weight: 700; color: var(--h6-muted); }
.wl5-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: var(--h6-soft); border: 1px solid var(--h6-line); }
.wl5-lang { position: relative; margin: 0; cursor: pointer; }
.wl5-lang input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.wl5-lang span {
    display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 9px; border-radius: 999px;
    font-size: 13px; font-weight: 750; color: var(--h6-muted); transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.wl5-lang:hover span { color: var(--h6-ink); }
.wl5-lang input:checked + span { background: var(--h6-card); color: var(--h6-ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .1), 0 0 0 1.5px rgba(245, 158, 11, .75); }
.wl5-lang input:focus-visible + span { outline: 2px solid #f59e0b; outline-offset: 2px; }
.wl5-flag { flex: none; width: 18px; height: 12px; border-radius: 2.5px; background-position: center; background-size: cover; background-repeat: no-repeat; box-shadow: 0 0 0 1px rgba(15, 23, 42, .14); }

.wl5-social { display: flex; align-items: center; gap: 6px; }
.wl5-social > span { margin-right: 4px; font-size: 12.5px; font-weight: 700; color: var(--h6-muted); white-space: nowrap; }
.wl5-social a {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--h6-muted);
    background: var(--h6-soft); border: 1px solid var(--h6-line); text-decoration: none; transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.wl5-social a:hover { color: #f97316; border-color: rgba(245, 158, 11, .5); transform: translateY(-1px); }
.wl5-social a svg { width: 15px; height: 15px; }
.wl5-error { margin: 10px 0 0 16px; font-size: 13px; color: #ef4444; }

.wl5-success { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, auto); gap: 18px 26px; align-items: center; text-align: left; }
.wl5-success[hidden] { display: none; }
.wl5-success-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(16, 185, 129, .12); }
.wl5-success h3 { margin: 0 0 4px; font-size: 22px; font-weight: 900; letter-spacing: -.02em; color: var(--h6-ink); }
.wl5-success p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--h6-muted); }
.wl5-coupon { padding: 14px 16px; border-radius: 18px; border: 1.5px dashed rgba(245, 158, 11, .55); background: rgba(245, 158, 11, .07); }
.wl5-coupon-label { display: block; margin-bottom: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #b45309; }
[data-theme="dark"] .wl5-coupon-label { color: #fbbf24; }
.wl5-coupon-row { display: flex; align-items: center; gap: 10px; }
.wl5-coupon-row code { font: 800 15px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; color: var(--h6-ink); }
.wl5-coupon-row button { height: 32px; padding: 0 14px; border-radius: 999px; border: 0; cursor: pointer; background: var(--h6-ink); color: var(--h6-card); font: 750 13px/1 Inter, system-ui, sans-serif; }
.wl5-coupon-row button.copied { background: #10b981; color: #fff; }
.wl5-coupon-foot { margin: 8px 0 0 !important; font-size: 12.5px !important; }
.wl5-coupon-foot a { color: #c2410c; font-weight: 700; }
[data-theme="dark"] .wl5-coupon-foot a { color: #fbbf24; }

@media (max-width: 960px) {
    .wl5-grid { grid-template-columns: 1fr; gap: 20px; }
    .wl5-success { grid-template-columns: auto minmax(0, 1fr); }
    .wl5-coupon { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .wl5-card { padding: 20px 16px; border-radius: 22px; }
    .wl5-field { flex-wrap: wrap; padding: 6px; border-radius: 22px; }
    .wl5-field > svg { margin-left: 10px; }
    .wl5 .wl5-field input[type="email"] { flex-basis: calc(100% - 40px); height: 44px; }
    .wl5-submit { flex: 1 1 100%; justify-content: center; }
    .wl5-row { flex-direction: column; align-items: stretch; }
    .wl5-langs { justify-content: space-between; }
    .wl5-social { justify-content: center; }
    .wl5-lang span { padding: 0 10px 0 8px; }
}

/* ───────────────── Guides as four themed cards ───────────────── */
.g6-head { max-width: 760px; }
.g6-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 34px; align-items: stretch; }
.g6-card {
    --g6: #f59e0b; --g6-tint: rgba(245, 158, 11, .13);
    position: relative; display: flex; flex-direction: column; padding: 20px 14px 12px; border-radius: 24px;
    background: var(--h6-card); border: 1px solid var(--h6-line); box-shadow: var(--h6-shadow); overflow: hidden;
}
.g6-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 120px; pointer-events: none;
    background: radial-gradient(260px 120px at 20% 0%, var(--g6-tint), transparent 75%); }
.g6-card.is-blue { --g6: #3b82f6; --g6-tint: rgba(59, 130, 246, .13); }
.g6-card.is-green { --g6: #10b981; --g6-tint: rgba(16, 185, 129, .13); }
.g6-card.is-violet { --g6: #8b5cf6; --g6-tint: rgba(139, 92, 246, .13); }
.g6-ic { position: relative; display: grid; place-items: center; width: 46px; height: 46px; margin: 0 6px 14px; border-radius: 14px; color: #fff;
    background: var(--g6); box-shadow: 0 8px 20px var(--g6-tint), inset 0 1px 0 rgba(255, 255, 255, .25); }
.g6-ic svg { width: 22px; height: 22px; }
.g6-card h3 { position: relative; margin: 0 6px 4px; font-size: 19px; font-weight: 850; letter-spacing: -.02em; line-height: 1.2; color: var(--h6-ink); }
.g6-card > p { position: relative; margin: 0 6px 12px; font-size: 14px; line-height: 1.45; color: var(--h6-muted); }
.g6-links { position: relative; display: flex; flex-direction: column; margin: 4px 0 0; padding: 0; list-style: none; }
.g6-links li { margin: 0; padding: 0; }
.g6-links li + li { border-top: 1px solid var(--h6-line); }
.g6-links a {
    position: relative; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 9px 34px 9px 8px; border-radius: 12px;
    color: var(--h6-ink); font-size: 14.5px; font-weight: 650; line-height: 1.3; letter-spacing: -.005em; text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.g6-links a::after {
    content: ""; position: absolute; right: 10px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--g6); opacity: .55;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .15s ease, opacity .15s ease;
}
.g6-links a:hover { background: var(--g6-tint); }
.g6-links a:hover::after { opacity: 1; transform: translateX(3px); }
.g6-links a:focus-visible { outline: 2px solid var(--g6); outline-offset: -2px; }
.g6-links a[data-flag]::before { content: ""; flex: none; width: 20px; height: 14px; border-radius: 3px; background-position: center; background-size: cover; background-repeat: no-repeat; box-shadow: 0 0 0 1px rgba(15, 23, 42, .14); }
.g6-lang { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; font-size: 13.5px; color: var(--h6-muted); }
.g6-lang > span { margin-right: 4px; font-weight: 700; }
.g6-lang a {
    display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px 0 8px; border-radius: 999px; font-size: 13px;
    background: var(--h6-card); border: 1px solid var(--h6-line); color: var(--h6-ink); font-weight: 650; text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.g6-lang a:hover { border-color: rgba(245, 158, 11, .55); transform: translateY(-1px); }
.g6-lang a[data-flag]::before { content: ""; flex: none; width: 18px; height: 12px; border-radius: 2.5px; background-position: center; background-size: cover; background-repeat: no-repeat; box-shadow: 0 0 0 1px rgba(15, 23, 42, .14); }
@media (max-width: 1180px) { .g6-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .g6-grid { grid-template-columns: 1fr; gap: 12px; } .g6-card { padding: 18px 10px 8px; } }

/* Drawn flags (same art as lang-menu.css) for links and language pills. */
[data-flag="nl"]::before, .wl5-flag[data-flag="nl"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath fill='%2321468B' d='M0 0h9v6H0z'/%3E%3Cpath fill='%23fff' d='M0 0h9v4H0z'/%3E%3Cpath fill='%23AE1C28' d='M0 0h9v2H0z'/%3E%3C/svg%3E"); }
[data-flag="de"]::before, .wl5-flag[data-flag="de"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Cpath fill='%23FFCE00' d='M0 0h5v3H0z'/%3E%3Cpath fill='%23DD0000' d='M0 0h5v2H0z'/%3E%3Cpath fill='%23000' d='M0 0h5v1H0z'/%3E%3C/svg%3E"); }
[data-flag="fr"]::before, .wl5-flag[data-flag="fr"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23EF4135' d='M0 0h3v2H0z'/%3E%3Cpath fill='%23fff' d='M0 0h2v2H0z'/%3E%3Cpath fill='%230055A4' d='M0 0h1v2H0z'/%3E%3C/svg%3E"); }
[data-flag="gb"]::before, .wl5-flag[data-flag="gb"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30' preserveAspectRatio='xMidYMid slice'%3E%3Cpath fill='%23012169' d='M0 0h60v30H0z'/%3E%3Cpath stroke='%23fff' stroke-width='6' d='M0 0l60 30M60 0L0 30'/%3E%3Cpath stroke='%23C8102E' stroke-width='2.4' d='M0 0l60 30M60 0L0 30'/%3E%3Cpath stroke='%23fff' stroke-width='10' d='M30 0v30M0 15h60'/%3E%3Cpath stroke='%23C8102E' stroke-width='6' d='M30 0v30M0 15h60'/%3E%3C/svg%3E"); }
[data-flag="us"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 10' preserveAspectRatio='xMidYMid slice'%3E%3Cpath fill='%23fff' d='M0 0h19v10H0z'/%3E%3Cpath fill='%23B22234' d='M0 0h19v.77H0zM0 1.54h19v.77H0zM0 3.08h19v.77H0zM0 4.62h19v.77H0zM0 6.15h19v.77H0zM0 7.69h19v.77H0zM0 9.23h19v.77H0z'/%3E%3Cpath fill='%233C3B6E' d='M0 0h7.6v5.38H0z'/%3E%3C/svg%3E"); }

/* ───────────────── 3D track plan: one big stage ───────────────── */
.spatial-showcase.s6 { padding: clamp(64px, 9vw, 120px) 0 clamp(56px, 8vw, 104px); color: var(--h6-ink); }
.s6-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 18px 40px; align-items: end; margin-bottom: 28px; }
.s6 .spatial-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #f59e0b; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.s6 .spatial-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.s6 .v5-h2 { margin: 12px 0 14px; }
.s6 .spatial-description { margin: 0; max-width: 36em; font-size: clamp(16px, 1.45vw, 19px); line-height: 1.55; color: var(--h6-muted); }
.s6-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.s6-actions .v5-btn { min-height: 48px; padding: 0 22px; font-size: 15px; }

.s6-frame { position: relative; isolation: isolate; }
.s6-frame::before {
    content: ""; position: absolute; inset: 8% 4% -6%; z-index: -1; filter: blur(60px); opacity: .9; pointer-events: none;
    background: radial-gradient(50% 60% at 25% 40%, rgba(245, 158, 11, .32), transparent 70%),
                radial-gradient(45% 55% at 80% 55%, rgba(59, 130, 246, .26), transparent 70%);
}
.s6 .spatial-stage {
    position: relative; margin: 0; border-radius: 28px; overflow: hidden; background: #0f141a;
    box-shadow: 0 2px 4px rgba(15, 23, 42, .08), 0 30px 80px rgba(15, 23, 42, .22), 0 0 0 1px rgba(15, 23, 42, .08);
}
[data-theme="dark"] .s6 .spatial-stage { box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); }
.s6 .spatial-expand { display: block; position: relative; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: zoom-in; color: #fff; }
.s6 .spatial-expand img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: opacity .35s ease; }
.s6 .spatial-expand img.is-swapping { opacity: .25; }
.s6 .spatial-expand-hint { position: absolute; right: 18px; top: 18px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
    background: rgba(8, 8, 13, .55); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.s6 .spatial-expand-hint svg { width: 18px; height: 18px; }
.s6-live { position: absolute; left: 18px; top: 18px; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 11px; border-radius: 999px;
    background: rgba(8, 8, 13, .55); border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-size: 12.5px; font-weight: 750; letter-spacing: .01em;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: none; }
.s6-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .25); }
.s6 .spatial-caption {
    position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
    padding: 70px 22px 20px; background: linear-gradient(transparent, rgba(6, 8, 12, .78)); color: #fff; pointer-events: none;
}
.s6 .spatial-caption strong { display: block; font-size: clamp(18px, 1.8vw, 24px); font-weight: 850; letter-spacing: -.02em; color: #fff; }
.s6 .spatial-caption small { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .78); max-width: 46em; }
.s6-nav { display: flex; align-items: center; gap: 8px; pointer-events: auto; }
.s6 .spatial-counter { min-width: 52px; text-align: center; color: rgba(255, 255, 255, .8); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.s6-arrow { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); cursor: pointer;
    background: rgba(255, 255, 255, .12); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .15s ease, transform .15s ease; }
.s6-arrow:hover { background: rgba(255, 255, 255, .24); transform: translateY(-1px); }
.s6-arrow svg { width: 18px; height: 18px; }
.s6-arrow:focus-visible { outline: 2px solid #fbbf24; outline-offset: 2px; }

.s6 .spatial-thumbs { display: grid; grid-template-columns: repeat(var(--s6-count, 6), minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.s6 .spatial-thumb { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 6px 6px 10px; border-radius: 18px; cursor: pointer; text-align: left;
    background: var(--h6-card); border: 1px solid var(--h6-line); color: var(--h6-muted); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.s6 .spatial-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; opacity: .85; transition: opacity .18s ease; }
.s6 .spatial-thumb span.s6-thumb-t { padding: 0 6px; font-size: 13px; font-weight: 750; letter-spacing: -.005em; line-height: 1.25; }
.s6 .spatial-thumb:hover { transform: translateY(-2px); color: var(--h6-ink); }
.s6 .spatial-thumb:hover img, .s6 .spatial-thumb[aria-pressed="true"] img { opacity: 1; }
.s6 .spatial-thumb[aria-pressed="true"] { color: var(--h6-ink); border-color: rgba(245, 158, 11, .8); box-shadow: 0 0 0 3px rgba(245, 158, 11, .16), var(--h6-shadow); }
.s6 .spatial-thumb:focus-visible { outline: 2px solid #f59e0b; outline-offset: 3px; }

.s6-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; }
.s6-points li { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 16px; border-radius: 18px; background: var(--h6-card); border: 1px solid var(--h6-line); }
.s6-points i { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(245, 158, 11, .13); color: #d97706; font-style: normal; }
[data-theme="dark"] .s6-points i { color: #fbbf24; }
.s6-points i svg { width: 19px; height: 19px; }
.s6-points b { display: block; margin: 1px 0 3px; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; color: var(--h6-ink); }
.s6-points span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--h6-muted); }

.spatial-dialog { width: min(1800px, calc(100vw - 40px)); max-height: calc(100dvh - 40px); margin: auto; padding: 0; border: 1px solid rgba(255, 255, 255, .12); border-radius: 22px;
    background: #0b0b11; color: #f0f0f5; box-shadow: 0 30px 100px rgba(0, 0, 0, .55); overflow: hidden; }
.spatial-dialog::backdrop { background: rgba(3, 7, 17, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.spatial-dialog .spatial-dialog-head { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 10px 12px 10px 20px; }
.spatial-dialog .spatial-dialog-head p { margin: 0; font: 750 15px/1.4 Inter, system-ui, sans-serif; color: inherit; }
.spatial-dialog .spatial-close { flex: 0 0 40px; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, .06); color: inherit; font-size: 24px; line-height: 1; }
.spatial-dialog .spatial-close:focus-visible { outline: 2px solid #f59e0b; outline-offset: 3px; }
.spatial-dialog > img { display: block; width: 100%; height: auto; max-height: calc(100dvh - 110px); object-fit: contain; background: #0f141a; }

@media (max-width: 1100px) { .s6-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
    .s6-head { grid-template-columns: 1fr; align-items: start; }
    .s6-actions { justify-content: flex-start; }
    .s6 .spatial-thumbs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 6px; scrollbar-width: none; }
    .s6 .spatial-thumbs::-webkit-scrollbar { display: none; }
    .s6 .spatial-thumb { flex: 0 0 42%; scroll-snap-align: start; }
}
@media (max-width: 600px) {
    .s6 .spatial-stage { border-radius: 20px; }
    .s6 .spatial-caption { padding: 46px 14px 12px; }
    .s6 .spatial-caption small { display: none; }
    .s6-arrow { width: 36px; height: 36px; }
    .s6-live { left: 12px; top: 12px; height: 30px; font-size: 11.5px; }
    .s6 .spatial-expand-hint { right: 12px; top: 12px; width: 36px; height: 36px; }
    .s6 .spatial-thumb { flex-basis: 58%; }
    .s6-points { grid-template-columns: 1fr; gap: 10px; }
    .spatial-dialog { width: calc(100vw - 16px); }
}
@media (prefers-reduced-motion: reduce) {
    .wl5-submit, .wl5-social a, .g6-links a, .g6-links a::after, .g6-lang a, .s6 .spatial-thumb, .s6 .spatial-thumb img, .s6 .spatial-expand img, .s6-arrow { transition: none; }
}