@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Outfit:wght@300;400;500;600&display=swap');

        :root {
            --bg-deep: #050507;
            --accent-primary: #e11d48;
            --accent-rose: #f43f5e;
            --accent-violet: #a855f7;
            --accent-violet-light: #c084fc;
        }

        body {
            font-family: 'Outfit', system-ui, sans-serif;
            background: #050507;
            color: #e4e4e7;
            font-weight: 300;
            -webkit-font-smoothing: antialiased;
        }

        .display-serif {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-weight: 300;
            font-style: italic;
            letter-spacing: -0.015em;
            line-height: 0.95;
            background: linear-gradient(180deg, #fafafa 0%, #d4d4d8 55%, #a1a1aa 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .display-serif-accent {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-weight: 300;
            font-style: italic;
            background: linear-gradient(135deg, #fb7185 0%, #9f1239 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Atmosfääri (sama kuin index.html) */
        .home-bg-base {
            background:
                radial-gradient(ellipse 90% 60% at 50% 20%, rgba(120, 14, 38, 0.18) 0%, rgba(60, 8, 20, 0.08) 35%, transparent 70%),
                radial-gradient(ellipse 70% 55% at 50% 110%, rgba(50, 6, 16, 0.30) 0%, transparent 60%),
                #050507;
        }
        .home-vignette {
            background: radial-gradient(ellipse 100% 80% at 50% 50%, transparent 40%, rgba(0,0,0,0.55) 100%);
        }
        .home-noise {
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.4'/></svg>");
            opacity: 0.05;
            mix-blend-mode: overlay;
        }
        @keyframes aurora-drift {
            0%, 100% { transform: translateX(-4%) scale(1.05); opacity: 0.5; }
            50%      { transform: translateX(4%) scale(1.15); opacity: 0.75; }
        }
        .home-aurora {
            position: fixed;
            top: 5%;
            left: 50%;
            width: 90vw;
            max-width: 1200px;
            height: 70vh;
            transform: translateX(-50%);
            background:
                radial-gradient(ellipse 50% 60% at 30% 50%, rgba(190, 18, 57, 0.16), transparent 65%),
                radial-gradient(ellipse 45% 55% at 70% 45%, rgba(124, 28, 72, 0.12), transparent 65%);
            filter: blur(60px);
            animation: aurora-drift 18s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(24px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-up { animation: fadeInUp 0.9s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards; }
        .animate-fade-up.delay-1 { animation-delay: 0.1s; opacity: 0; }
        .animate-fade-up.delay-2 { animation-delay: 0.2s; opacity: 0; }
        .animate-fade-up.delay-3 { animation-delay: 0.3s; opacity: 0; }

        /* Hieno viiva */
        .home-rule {
            width: 80px; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(244, 63, 94, 0.5), transparent);
            margin: 0 auto;
        }
        .home-rule-wide {
            width: 200px; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(244, 63, 94, 0.35), transparent);
            margin: 0 auto;
        }

        /* Pillerit ja metarivit */
        .home-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: #a1a1aa;
            padding: 8px 18px;
            border-radius: 100px;
            border: 1px solid rgba(255,255,255,0.07);
            background: rgba(255,255,255,0.015);
            backdrop-filter: blur(12px);
        }
        .home-pill .dot {
            width: 5px; height: 5px; border-radius: 50%;
            background: #f43f5e;
            box-shadow: 0 0 8px rgba(244, 63, 94, 0.7);
            animation: dot-pulse 2.4s ease-in-out infinite;
        }
        @keyframes dot-pulse {
            0%, 100% { opacity: 0.6; }
            50%      { opacity: 1; }
        }

        .home-meta {
            display: inline-flex;
            align-items: center;
            gap: 22px;
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: #71717a;
            flex-wrap: wrap;
            justify-content: center;
        }
        .home-meta i { font-size: 8px; opacity: 0.7; }
        .home-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: #3f3f46; }

        /* Section label */
        .section-label {
            font-size: 10px;
            letter-spacing: 0.4em;
            text-transform: uppercase;
            color: #52525b;
            font-weight: 500;
        }

        /* Korttisysteemi (samaa DNA:ta kuin etusivun room-card) */
        .info-card {
            position: relative;
            display: flex; flex-direction: column;
            padding: 36px 32px;
            border-radius: 20px;
            background: linear-gradient(180deg, rgba(20,20,24,0.6), rgba(8,8,10,0.85));
            border: 1px solid rgba(255,255,255,0.05);
            overflow: hidden;
            transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1), border-color 0.4s ease;
        }
        .info-card::before {
            content: ''; position: absolute; inset: 0; border-radius: inherit;
            background: radial-gradient(ellipse 120% 80% at 50% 0%, var(--card-glow, rgba(225,29,72,0.10)), transparent 60%);
            opacity: 0.7; transition: opacity 0.5s ease; pointer-events: none;
        }
        .info-card:hover { border-color: var(--card-border, rgba(225,29,72,0.32)); }
        .info-card:hover::before { opacity: 1; }
        .info-card.crimson { --card-glow: rgba(225, 29, 72, 0.14); --card-border: rgba(225, 29, 72, 0.32); --card-accent: #f43f5e; }
        .info-card.amber   { --card-glow: rgba(245, 158, 11, 0.10); --card-border: rgba(245, 158, 11, 0.28); --card-accent: #fbbf24; }
        .info-card.violet  { --card-glow: rgba(168, 85, 247, 0.14); --card-border: rgba(168, 85, 247, 0.32); --card-accent: #c084fc; }
        .info-card.neutral { --card-glow: rgba(255,255,255,0.04); --card-border: rgba(255,255,255,0.10); --card-accent: #d4d4d8; }

        .card-tag {
            position: absolute; top: 22px; right: 22px;
            font-size: 9px; letter-spacing: 0.22em; font-weight: 600;
            text-transform: uppercase;
            padding: 5px 10px; border-radius: 4px;
            color: var(--card-accent);
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.08);
        }
        .card-icon {
            width: 36px; height: 36px;
            display: flex; align-items: center; justify-content: center;
            color: var(--card-accent);
            margin-bottom: 24px;
            opacity: 0.95;
        }
        .card-title {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-style: italic;
            font-weight: 300;
            font-size: 32px;
            line-height: 1;
            color: #fafafa;
            margin-bottom: 14px;
        }
        .card-body {
            font-size: 13.5px;
            color: #a1a1aa;
            line-height: 1.65;
            font-weight: 300;
        }

        /* Vaiheet (numbered steps) */
        .step-num {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-style: italic;
            font-weight: 300;
            font-size: 56px;
            line-height: 1;
            color: var(--step-color, #f43f5e);
            opacity: 0.85;
        }
        .step-tag {
            font-size: 9px;
            letter-spacing: 0.32em;
            text-transform: uppercase;
            color: var(--step-color, #f43f5e);
            font-weight: 600;
        }
        .step-title {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-style: italic;
            font-weight: 300;
            font-size: 28px;
            line-height: 1.05;
            color: #fafafa;
        }
        .step-body {
            font-size: 13.5px;
            color: #a1a1aa;
            line-height: 1.65;
            font-weight: 300;
        }

        .sub-card {
            padding: 18px 20px;
            border-radius: 14px;
            background: rgba(255,255,255,0.015);
            border: 1px solid rgba(255,255,255,0.06);
            transition: border-color 0.3s ease;
        }
        .sub-card:hover { border-color: rgba(255,255,255,0.12); }
        .sub-card .sub-label {
            font-size: 9px;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            font-weight: 600;
            color: var(--sub-accent, #f43f5e);
            display: block;
            margin-bottom: 6px;
        }
        .sub-card .sub-text {
            font-size: 12px;
            color: #a1a1aa;
            line-height: 1.55;
            font-weight: 300;
        }
        .sub-card.violet { --sub-accent: #c084fc; }
        .sub-card.crimson { --sub-accent: #f43f5e; }
        .sub-card.neutral { --sub-accent: #e4e4e7; }

        /* E2EE numerolista */
        .e2ee-step {
            position: relative;
            padding-left: 0;
        }
        .e2ee-step .num {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-style: italic;
            font-weight: 300;
            font-size: 42px;
            color: #f43f5e;
            line-height: 1;
            opacity: 0.85;
        }
        .e2ee-step .label {
            font-size: 9px;
            letter-spacing: 0.32em;
            text-transform: uppercase;
            color: #f43f5e;
            font-weight: 600;
            margin-top: 10px;
            margin-bottom: 8px;
        }
        .e2ee-step .body {
            font-size: 13px;
            color: #a1a1aa;
            line-height: 1.6;
            font-weight: 300;
        }

        /* Quote box */
        .pull-quote {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-style: italic;
            font-weight: 300;
            font-size: 18px;
            line-height: 1.5;
            color: #d4d4d8;
            text-align: center;
        }

        /* Linkit ja napit */
        .home-foot-link {
            display: inline-flex; align-items: center; gap: 10px;
            font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
            font-weight: 500;
            color: #71717a;
            padding: 12px 22px;
            border-radius: 100px;
            border: 1px solid rgba(255,255,255,0.06);
            background: rgba(255,255,255,0.015);
            backdrop-filter: blur(10px);
            transition: color 0.3s ease, border-color 0.3s ease;
            text-decoration: none;
        }
        .home-foot-link:hover { color: #f43f5e; border-color: rgba(225,29,72,0.3); }

        /* Sticky nav */
        .nav-bar {
            position: sticky; top: 0; z-index: 50;
            background: rgba(8, 8, 10, 0.7);
            backdrop-filter: blur(20px) saturate(180%);
            border-bottom: 1px solid rgba(255,255,255,0.04);
        }

        .nav-brand {
            display: inline-flex; align-items: center; gap: 12px;
            text-decoration: none;
        }
        .nav-brand .wordmark {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-style: italic;
            font-weight: 300;
            font-size: 22px;
            color: #fafafa;
            letter-spacing: -0.01em;
        }

        @keyframes rose-pulse-brand {
            0%,100% { filter: drop-shadow(0 0 6px rgba(190,18,57,0.25)); opacity: 0.85; }
            50%     { filter: drop-shadow(0 0 14px rgba(225,29,72,0.5)); opacity: 1; }
        }
        .rose-svg-brand { animation: rose-pulse-brand 6s ease-in-out infinite; }

        /* Yhteydenotto-kortit */
        .contact-card {
            display: inline-flex; align-items: center; gap: 16px;
            padding: 18px 26px;
            border-radius: 16px;
            background: rgba(255,255,255,0.015);
            border: 1px solid rgba(255,255,255,0.06);
            color: #a1a1aa;
            text-decoration: none;
            transition: all 0.3s ease;
            font-size: 13px;
            font-weight: 400;
        }
        .contact-card:hover {
            color: #f43f5e;
            border-color: rgba(225,29,72,0.3);
            background: rgba(225,29,72,0.04);
        }
        .contact-card .icon-bubble {
            width: 38px; height: 38px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background: rgba(0,0,0,0.4);
            border: 1px solid rgba(255,255,255,0.05);
            transition: all 0.3s ease;
        }
        .contact-card:hover .icon-bubble {
            border-color: rgba(225,29,72,0.4);
            background: rgba(225,29,72,0.08);
        }

        /* Highlight inline */
        .hl-rose { color: #fb7185; font-weight: 400; }
        .hl-violet { color: #c084fc; font-weight: 400; }
        .hl-white { color: #fafafa; font-weight: 400; }

        /* Nykyisen etusivun silkki, lämmin lasi ja ruusu-/amber-korostukset. */
        :root {
            --info-text: #F6E8EC;
            --info-muted: #CDBDC3;
            --info-rose: #E6A2B5;
            --info-amber: #F2A766;
        }
        html { scroll-padding-top: 110px; }
        body { background: #0C0408; color: var(--info-text); }
        .home-bg-base {
            background:
                linear-gradient(100deg, rgba(12,4,8,0.30), rgba(12,4,8,0.10)),
                linear-gradient(0deg, rgba(12,4,8,0.50), rgba(12,4,8,0.06) 42%, transparent 70%),
                url('/img/Tumminpunainen%20silkkinen%20eleganssi.png') center / cover no-repeat;
            z-index: 0;
            transform-origin: center;
            animation: info-silk-drift 100s ease-in-out infinite alternate;
        }
        @keyframes info-silk-drift {
            from { transform: scale(1.025) translate3d(0,0,0); }
            to { transform: scale(1.055) translate3d(-0.35%,-0.25%,0); }
        }
        .home-vignette {
            z-index: 0;
            background: radial-gradient(ellipse 100% 80% at 50% 50%, transparent 35%, rgba(12,4,8,0.52) 100%);
        }
        .home-noise { z-index: 0; opacity: 0.025; }
        .home-aurora {
            z-index: 0;
            top: 30%; left: 62%; width: 60vw; max-width: 900px; height: 54vh;
            background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(190,18,57,0.18), transparent 60%);
            animation: info-warm-light 78s ease-in-out infinite;
        }
        @keyframes info-warm-light {
            0%,100% { opacity: 0.30; transform: translate(-50%,0) scale(1); }
            50% { opacity: 0.48; transform: translate(-46%,2%) scale(1.06); }
        }
        /* Staattinen sisältö säilyttää lasikorttien sumennuksen myös Chromiumissa. */
        .animate-fade-up, .animate-fade-up.delay-1,
        .animate-fade-up.delay-2, .animate-fade-up.delay-3 { animation: none; opacity: 1; transform: none; }

        .display-serif, .display-serif-accent {
            background: none;
            -webkit-text-fill-color: currentColor;
            color: #FFF6F8;
            text-shadow: 0 2px 20px rgba(0,0,0,0.75);
        }
        .display-serif-accent { color: var(--info-rose); }
        .home-rule, .home-rule-wide {
            background: linear-gradient(90deg, transparent, rgba(242,167,102,0.4), transparent);
        }
        .home-pill {
            color: var(--info-muted);
            border-color: rgba(242,167,102,0.22);
            background: rgba(20,10,14,0.65);
        }
        .home-pill .dot { background: #F0768F; box-shadow: none; animation: none; }
        .home-meta { color: var(--info-muted); gap: 12px 20px; }
        .home-meta i { color: var(--info-amber); }
        .home-meta .sep { background: rgba(247,239,227,0.30); }
        .section-label { color: var(--info-amber); }

        .info-card {
            background: rgba(20,16,18,0.68);
            border-color: rgba(242,167,102,0.20);
            box-shadow: 0 18px 40px -24px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
        }
        .info-card:hover { border-color: rgba(242,167,102,0.35); }
        .info-card.crimson { --card-glow: rgba(240,118,143,0.10); --card-border: rgba(240,118,143,0.32); --card-accent: #F0768F; }
        .info-card.amber, .info-card.violet { --card-glow: rgba(242,167,102,0.08); --card-border: rgba(242,167,102,0.30); --card-accent: #F2A766; }
        .info-card.neutral { --card-glow: rgba(255,255,255,0.03); --card-accent: #E6D7DC; }
        .card-tag { background: rgba(242,167,102,0.10); border-color: rgba(242,167,102,0.22); }
        .card-title, .step-title { color: #F7EFE3; line-height: 1.1; }
        .card-body, .step-body, .e2ee-step .body, .sub-card .sub-text { color: var(--info-muted); }
        .text-zinc-200, .text-zinc-300, .text-zinc-400 { color: #E6D7DC; }
        .text-zinc-500, .text-zinc-600, .text-zinc-700 { color: #BFA8AF; }
        .text-rose-400, .text-rose-500, .hl-rose { color: #F0768F; }
        .text-amber-400, .hl-violet { color: var(--info-amber); }
        .text-white, .hl-white { color: #F7EFE3; }
        .step-num, .step-tag, .e2ee-step .num, .e2ee-step .label { color: var(--info-amber); }
        .sub-card {
            background: rgba(12,4,8,0.36);
            border-color: rgba(242,167,102,0.16);
        }
        .sub-card:hover { border-color: rgba(242,167,102,0.32); }
        .sub-card.crimson { --sub-accent: #F0768F; }
        .sub-card.violet { --sub-accent: #F2A766; }
        .sub-card.neutral { --sub-accent: #E6D7DC; }
        .pull-quote { color: #E6D7DC; }

        .home-foot-link, .contact-card {
            min-height: 44px;
            color: #E6D7DC;
            border-color: rgba(242,167,102,0.20);
            background: rgba(20,16,18,0.68);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
        }
        .home-foot-link:hover, .contact-card:hover {
            color: var(--info-amber);
            border-color: rgba(242,167,102,0.40);
            background: rgba(40,16,24,0.82);
        }
        .contact-card .icon-bubble { flex-shrink: 0; border-color: rgba(242,167,102,0.18); }
        .contact-card:hover .icon-bubble { background: rgba(227,92,135,0.10); border-color: rgba(227,92,135,0.35); }
        a:focus-visible { outline: 2px solid #E6A2B5; outline-offset: 4px; }

        /* Sama kelluva lasipalkki kuin etusivulla; nykyiset paluulinkit säilyvät. */
        .nav-bar {
            position: sticky; top: 18px; z-index: 50; flex-shrink: 0;
            width: calc(100% - 56px); max-width: 1280px; height: 72px;
            margin: 18px auto 0; padding: 0 24px;
            border: 1px solid rgba(186,92,120,0.22); border-radius: 18px;
            background: linear-gradient(180deg, rgba(18,10,14,0.88), rgba(10,8,10,0.84));
            backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
            box-shadow: 0 10px 32px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06);
        }
        .nav-inner { width: 100%; max-width: none; height: 100%; }
        .nav-brand { flex-shrink: 0; }
        .nav-brand .wordmark { color: var(--info-text); }
        .rose-svg-brand { width: 28px !important; height: 28px !important; animation: none; }
        .rose-svg-brand path { stroke: #F0768F; }
        .nav-bar .nav-back {
            flex-shrink: 0;
            min-height: 44px; padding: 12px 22px; gap: 8px;
            border: 1px solid rgba(227,92,135,0.50); border-radius: 12px;
            background: rgba(40,16,24,0.82); color: #F9EAF0;
            font-size: 13px; font-weight: 500; line-height: 1.2;
            text-transform: none; letter-spacing: 0;
            transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease, transform 250ms ease, box-shadow 250ms ease;
        }
        .nav-bar .nav-back:focus-visible { outline: 2px solid rgba(244,117,157,0.45); outline-offset: 2px; }
        @media (hover: hover) {
            .nav-bar .nav-back:hover {
                background: rgba(60,22,35,0.92); border-color: rgba(244,117,157,0.72); color: #FFF9FA;
                transform: translateY(-2px); box-shadow: 0 0 18px rgba(227,92,135,0.18);
            }
        }
        .nav-bar .nav-back:active { transform: scale(0.98); }
        @media (max-width: 1023px) {
            html { scroll-padding-top: 90px; }
            .nav-bar { top: 10px; width: calc(100% - 24px); height: 64px; margin-top: 10px; padding: 0 12px; border-radius: 14px; }
            .nav-brand { gap: 8px; }
            .nav-bar .nav-back { padding: 12px; font-size: 12px; }
        }
        @media (max-width: 640px) {
            main.max-w-5xl { padding: 48px 16px; }
            main.max-w-5xl > section { margin-bottom: 64px; }
            .info-card { padding: 28px 20px !important; }
            .card-title { font-size: 28px; }
            .home-meta { font-size: 9px; letter-spacing: 0.16em; gap: 10px; }
            .contact-card { max-width: 100%; padding: 16px 18px; gap: 12px; }
            .card-title, .step-title, .contact-card { overflow-wrap: anywhere; }
        }
        @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
            .nav-bar { background: #0E090C; }
            .info-card, .home-pill, .home-foot-link, .contact-card { background: #141012; }
        }
        @media (prefers-reduced-motion: reduce) {
            .home-bg-base, .home-aurora { animation: none; transform: none; }
            .info-card, .info-card::before, .sub-card, .home-foot-link, .contact-card,
            .contact-card .icon-bubble, .nav-bar .nav-back { transition: none; }
            .nav-bar .nav-back:hover, .nav-bar .nav-back:active { transform: none; }
        }

/* Kolmen tietosivun yhteinen navigaatio ja tiiviimpi aloitus. */
.page-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 36px; }
.page-tabs a {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 10px 18px; border-radius: 10px;
    color: #BFA8AF; font-size: 13px; font-weight: 400; text-decoration: none;
    transition: color 250ms ease, background-color 250ms ease;
}
.page-tabs a:hover { color: #F6E8EC; background: rgba(40,16,24,0.55); }
.page-tabs a[aria-current="page"] { color: #F7D8E2; }
.page-tabs a[aria-current="page"]::after {
    content: ''; position: absolute; bottom: 3px; left: calc(50% - 20px);
    width: 40px; height: 2px; border-radius: 2px; background: #E35C87;
}
.page-intro { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.page-intro .home-pill { margin-bottom: 24px; }
.page-intro h1 { font-size: clamp(42px, 6vw, 68px); line-height: 1.05; margin-bottom: 24px; }
.page-intro .page-lead { color: #E6D7DC; font-size: 16px; line-height: 1.75; }
.page-route-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.page-route-card { text-decoration: none; min-width: 0; }
.page-route-card .card-title { font-size: 30px; }
.page-route-card .card-body { margin-bottom: 24px; }
.page-route-action { margin-top: auto; color: #F2A766; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
footer .page-tabs { margin-bottom: 0; }
@media (max-width: 640px) {
    .page-tabs { margin-bottom: 28px; gap: 4px; }
    .page-tabs a { padding: 10px 16px; }
    main.max-w-5xl > .page-intro { margin-bottom: 44px; }
    .page-route-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .page-tabs a { transition: none; } }