/* ============================================================
   PastePlate-AI · Premium Dark Website
   Kleurensysteem 1-op-1 overgenomen uit de Android-app
   (nl.voeding.logboek.ui.theme.Color.kt)
   ============================================================ */

:root {
    /* Base palette (PremiumPalette object in app) */
    --app-bg:          #0F1115;
    --content-bg:      #1A1D23;
    --surface-variant: #23262F;
    --text-primary:    #E5E7EB;
    --text-secondary:  #9CA3AF;
    --text-muted:      #838C99;
    --text-tertiary:   #6B7280;

    /* Semantic accent colours */
    --garmin-blue:     #2196F3;   /* primaire focus/actie */
    --brand-logo-blue: #40C4FF;   /* share footer / Logo1 wordmark accent */
    --plant-green:     #6BCF7E;   /* longevity / eco */
    --measurement:     #26A69A;   /* teal - metingen */
    --analysis:        #42A5F5;   /* blue - analyse */
    --month-analysis:  #7986CB;   /* indigo - maand */
    --energy:          #FFC107;   /* amber - energie */
    --ai:              #9575CD;   /* deep purple - AI */
    --library:         #7986CB;   /* indigo - bibliotheek */
    --profile:         #78909C;   /* bluegrey */
    --backup:          #66BB6A;   /* green */
    --danger:          #EF5350;
    --success:         #66BB6A;
    --warning:         #FFB74D;
    --info:            #42A5F5;

    /* Typography scale */
    --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
    --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* Spacing / radius */
    --r-sm: 8px;
    --r:    14px;
    --r-lg: 22px;
    --r-xl: 30px;

    --max-w: 1240px;

    /* Gradients */
    --grad-blue:   linear-gradient(135deg, #2196F3 0%, #42A5F5 100%);
    --grad-ai:     linear-gradient(135deg, #2196F3 0%, #9575CD 60%, #6BCF7E 100%);
    --grad-energy: linear-gradient(135deg, #FFC107 0%, #FFB74D 100%);
    --grad-green:  linear-gradient(135deg, #6BCF7E 0%, #26A69A 100%);
    --grad-surface: linear-gradient(180deg, rgba(33, 150, 243, 0.05) 0%, rgba(26, 29, 35, 0) 100%);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    background: var(--app-bg);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: var(--garmin-blue); text-decoration: none; transition: color .2s; }
a:hover { color: #64B5F6; }

::selection { background: rgba(33, 150, 243, 0.4); color: #fff; }

/* Ambient animated background glows */
body::before,
body::after {
    content: "";
    position: fixed;
    pointer-events: none;
    width: 55vw; height: 55vw;
    max-width: 900px; max-height: 900px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: .28;
    z-index: 0;
    animation: float 22s ease-in-out infinite;
}
body::before { background: radial-gradient(circle, var(--garmin-blue), transparent 65%); top: -15vw; left: -15vw; }
body::after  { background: radial-gradient(circle, var(--ai), transparent 65%); bottom: -20vw; right: -15vw; animation-delay: -11s; }

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(40px, -30px) scale(1.1); }
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 .6em;
    color: var(--text-primary);
}
h1 { font-size: clamp(2.4rem, 5vw + 1rem, 4.6rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.9rem, 2.4vw + 1rem, 3rem); }
h3 { font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem); }
h4 { font-size: 1.08rem; }

p { margin: 0 0 1em; color: var(--text-secondary); }
.lead {
    font-size: clamp(1.05rem, .4vw + 1rem, 1.25rem);
    color: var(--text-secondary);
    max-width: 60ch;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--garmin-blue);
    padding: 6px 14px;
    border-radius: 100px;
    background: rgba(33, 150, 243, 0.08);
    border: 1px solid rgba(33, 150, 243, 0.25);
    margin-bottom: 18px;
}
.eyebrow.ai    { color: var(--ai);    background: rgba(149,117,205,.1); border-color: rgba(149,117,205,.3); }
.eyebrow.green { color: var(--plant-green); background: rgba(107,207,126,.1); border-color: rgba(107,207,126,.3); }
.eyebrow.amber { color: var(--energy); background: rgba(255,193,7,.1); border-color: rgba(255,193,7,.3); }

.grad-text {
    background: var(--grad-ai);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---------- Layout helpers ---------- */
.container {
    width: min(100% - 40px, var(--max-w));
    margin-inline: auto;
    position: relative;
    z-index: 1;
}
section { position: relative; padding: 110px 0; z-index: 1; }
section.tight { padding: 70px 0; }

.grid { display: grid; gap: 28px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---------- Navigation ---------- */
.nav {
    position: sticky; top: 0;
    z-index: 50;
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    background: rgba(15, 17, 21, 0.72);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-inner {
    width: min(100% - 40px, var(--max-w));
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
}
.nav-brand {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
    color: var(--text-primary);
}
.nav-brand .mark {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--grad-blue);
    display: grid; place-items: center;
    box-shadow: 0 6px 18px rgba(33,150,243,.4);
    font-size: 1.05rem;
}
.nav-brand b { color: var(--garmin-blue); }
.nav-links { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.nav-links a {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: .95rem;
    position: relative;
    padding: 6px 0;
}
.nav-links a:hover { color: var(--text-primary); }
.nav-links a.active { color: var(--text-primary); }
.nav-links a.active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    background: var(--garmin-blue); border-radius: 2px;
}
.nav-cta {
    padding: 10px 18px;
    border-radius: 100px;
    background: var(--garmin-blue);
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(33,150,243,.35);
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(33,150,243,.5); }

/* ---------- Garmin Blue sparkle (SVG replacement for ✨) ---------- */
.ai-spark {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -3px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%232196F3' d='M9 1.4 L10.6 6.8 L16 8.4 L10.6 10 L9 15.4 L7.4 10 L2 8.4 L7.4 6.8 Z'/><path fill='%232196F3' d='M17.2 12.8 L18.1 15.7 L21 16.6 L18.1 17.5 L17.2 20.4 L16.3 17.5 L13.4 16.6 L16.3 15.7 Z'/><circle fill='%232196F3' cx='15.5' cy='4.5' r='0.8'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 0 6px rgba(33,150,243,.55))
            drop-shadow(0 0 14px rgba(33,150,243,.25));
}
/* Inside the circular AI icon badge, scale up */
.icon.ai .ai-spark {
    width: 1.4em;
    height: 1.4em;
    vertical-align: middle;
    filter: drop-shadow(0 0 10px rgba(33,150,243,.65))
            drop-shadow(0 0 22px rgba(33,150,243,.3));
}

/* ---------- Language switcher ---------- */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: 100px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    font-family: var(--font-display);
    font-size: .78rem;
    letter-spacing: .08em;
    font-weight: 600;
    margin-left: 4px;
}
.lang-switch a, .lang-switch span {
    padding: 6px 11px;
    border-radius: 100px;
    color: var(--text-tertiary);
    transition: all .2s ease;
    line-height: 1;
    display: inline-block;
}
.lang-switch a:hover { color: var(--text-primary); background: rgba(255,255,255,.06); }
.lang-switch .active {
    color: #fff;
    background: var(--garmin-blue);
    box-shadow: 0 0 0 1px rgba(33,150,243,.4);
}
.lang-switch .active::after { display: none; }

.nav-toggle {
    display: none; background: none; border: 0; color: var(--text-primary);
    font-size: 1.6rem; cursor: pointer;
}

@media (max-width: 880px) {
    .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0;
                 flex-direction: column; padding: 18px; gap: 16px;
                 background: var(--content-bg); border-bottom: 1px solid rgba(255,255,255,.06); }
    .nav-links.open { display: flex; }
    .nav-toggle { display: block; }
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 26px; border-radius: 100px;
    font-family: var(--font-body); font-weight: 600; font-size: 1rem;
    border: 0; cursor: pointer; color: #fff;
    transition: transform .2s ease, box-shadow .2s ease, background .2s;
    white-space: nowrap;
}
.btn-primary { background: var(--garmin-blue); box-shadow: 0 10px 30px rgba(33,150,243,.4); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(33,150,243,.55); color: #fff; }
.btn-ghost  { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: var(--text-primary); }
.btn-ghost:hover { background: rgba(255,255,255,.09); color: var(--text-primary); }
.btn-ai { background: var(--grad-ai); box-shadow: 0 10px 30px rgba(149,117,205,.4); }
.btn-ai:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(149,117,205,.55); color: #fff; }

/* ---------- Cards ---------- */
.card {
    background: var(--content-bg);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--r-lg);
    padding: 28px;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
}
.card:hover {
    transform: translateY(-4px);
    border-color: rgba(33,150,243,.25);
    box-shadow: 0 20px 40px -20px rgba(33,150,243,.25);
}
.card .icon {
    width: 46px; height: 46px; border-radius: 12px;
    display: grid; place-items: center;
    margin-bottom: 18px;
    font-size: 1.25rem;
    background: rgba(33,150,243,.14);
    color: var(--garmin-blue);
}
.card .icon.green  { background: rgba(107,207,126,.14); color: var(--plant-green); }
.card .icon.ai     { background: rgba(149,117,205,.14); color: var(--ai); }
.card .icon.teal   { background: rgba(38,166,154,.14); color: var(--measurement); }
.card .icon.amber  { background: rgba(255,193,7,.14);  color: var(--energy); }
.card .icon.indigo { background: rgba(121,134,203,.14); color: var(--library); }
.card .icon.danger { background: rgba(239,83,80,.14);  color: var(--danger); }
.card .icon.success{ background: rgba(102,187,106,.14); color: var(--success); }

.card h3 { margin-bottom: 10px; color: var(--text-primary); }
.card p:last-child { margin-bottom: 0; }

details.card.idea-card { cursor: pointer; padding-bottom: 20px; }
details.card.idea-card summary {
    list-style: none;
    cursor: pointer;
}
details.card.idea-card summary::-webkit-details-marker { display: none; }
details.card.idea-card .card-teaser { margin-bottom: 0; }
details.card.idea-card .idea-more {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: .88rem;
    color: var(--text-muted);
    line-height: 1.55;
}
details.card.idea-card .idea-more-hint {
    display: inline-block;
    margin-top: 12px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--garmin-blue);
}
details.card.idea-card[open] .idea-more-hint { display: none; }
details.card.idea-card[open] { border-color: rgba(33,150,243,.28); }
.idea-grid-hint {
    text-align: center;
    margin-top: 18px;
    font-size: .85rem;
    color: var(--text-muted);
}
.card.glass {
    background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
}

/* ---------- Hero ---------- */
.hero {
    min-height: calc(100vh - 72px);
    padding: 72px 0 52px;
    display: grid;
    align-items: center;
}
.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 60px;
    align-items: center;
}
@media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr; gap: 48px; text-align: center; }
    .hero-grid .hero-cta { justify-content: center; }
    .hero-grid .hero-stats { justify-content: center; }
    .eyebrow { align-self: center; }
    .hero { padding: 56px 0 44px; }
    .hero-share-logo {
        max-width: 320px;
        margin-inline: auto;
        padding: 10px;
    }
    .hero .lead {
        font-size: 1rem;
        margin-bottom: 20px;
    }
    .hero-stats {
        gap: 24px 32px;
        padding-top: 20px;
    }
    .hero-stat strong { font-size: 1.5rem; }
}
.hero-share-logo {
    max-width: 400px;
    margin: 8px 0 20px;
    padding: 12px;
    border-radius: calc(var(--r-lg) + 4px);
    background: linear-gradient(180deg, rgba(26, 29, 35, 0.95) 0%, rgba(15, 17, 21, 0.88) 100%);
    box-shadow: 0 0 0 1px rgba(64, 196, 255, 0.28),
                0 0 44px rgba(64, 196, 255, 0.14),
                0 24px 56px rgba(0, 0, 0, 0.55);
}
.hero-share-logo img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r);
}

/* ================================
   BRAND MOMENT (homepage)
   ================================ */
.brand-moment { padding-block: 40px; }
.brand-moment-inner {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 56px;
    align-items: center;
    padding: 40px;
    border-radius: var(--r-xl);
    background: linear-gradient(135deg,
                rgba(33,150,243,.08) 0%,
                rgba(16,22,34,.6) 55%,
                rgba(0,0,0,.3) 100%);
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 30px 80px rgba(0,0,0,.4),
                inset 0 0 0 1px rgba(33,150,243,.08);
}
.brand-mark {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(0,0,0,.55),
                0 0 0 1px rgba(33,150,243,.3);
    transition: transform .4s ease, box-shadow .4s ease;
}
.brand-mark::before {
    content: "";
    position: absolute; inset: -40px;
    background: radial-gradient(circle at 50% 50%, rgba(33,150,243,.5), transparent 65%);
    filter: blur(50px);
    z-index: -1;
}
.brand-mark:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 36px 90px rgba(33,150,243,.4),
                0 0 0 1px rgba(33,150,243,.55);
}
.brand-mark img {
    width: 100%; height: 100%; display: block; object-fit: cover;
}

.brand-moment-text h3 {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    margin-bottom: 10px;
}
.brand-moment-text .eyebrow { margin-bottom: 12px; }
.brand-moment-text p { max-width: 60ch; margin-bottom: 20px; }

.pillar-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.pillar-chips .chip {
    font-family: var(--font-display);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.03);
    color: var(--text-secondary);
    transition: transform .25s ease, border-color .25s ease, color .25s ease;
}
.pillar-chips .chip:hover { transform: translateY(-2px); }
.pillar-chips .chip-flame    { color: var(--energy);      border-color: rgba(255,193,7,.35); }
.pillar-chips .chip-ai       { color: var(--garmin-blue); border-color: rgba(33,150,243,.4); }
.pillar-chips .chip-leaf     { color: var(--plant-green); border-color: rgba(107,207,126,.4); }
.pillar-chips .chip-progress { color: var(--ai);          border-color: rgba(149,117,205,.4); }

@media (max-width: 820px) {
    .brand-moment-inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 24px;
        text-align: center;
    }
    .brand-mark { max-width: 260px; margin-inline: auto; }
    .brand-moment-text p { margin-inline: auto; }
    .pillar-chips { justify-content: center; }
}

.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0 40px; }
.hero-stats {
    display: flex; gap: 42px; flex-wrap: wrap;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,.08);
}
.hero-stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.9rem;
    color: var(--garmin-blue);
    margin-bottom: 2px;
}
.hero-stat span { color: var(--text-muted); font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; }

/* Phone mockup */
.phone {
    position: relative;
    max-width: 360px;
    margin-inline: auto;
    aspect-ratio: 9 / 19.5;
    border-radius: 44px;
    padding: 10px;
    background: linear-gradient(160deg, #2A2D35 0%, #111316 100%);
    box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.06);
    transform: rotate(-3deg);
    transition: transform .5s ease;
}
.phone:hover { transform: rotate(0deg) translateY(-6px); }
.phone::before {
    content: "";
    position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
    width: 110px; height: 22px; border-radius: 14px; background: #000; z-index: 2;
}
/* Screenshots with top UI (arrows, status bar): no fake notch, show full image */
.phone.no-notch::before { display: none; }
.phone.no-notch {
    aspect-ratio: auto;
    height: auto;
    padding: 8px;
}
.phone.no-notch img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 32px;
}
.phone img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 36px;
}
.phone.secondary {
    position: absolute;
    right: -25%;
    top: 8%;
    transform: rotate(6deg) scale(.8);
    z-index: -1;
    opacity: .85;
}
.phone-wrap {
    position: relative;
    padding: 30px 0;
}
.phone-wrap::after {
    content: "";
    position: absolute; inset: -40px;
    background: radial-gradient(circle at 60% 50%, rgba(33,150,243,.35), transparent 60%);
    filter: blur(40px);
    z-index: -2;
}
.phone-caption {
    margin-top: 22px;
    text-align: center;
    font-family: var(--font-display);
    font-size: .85rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.phone-caption .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--garmin-blue);
    box-shadow: 0 0 10px rgba(33,150,243,.8);
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .5; transform: scale(1.3); }
}

/* ---------- Auto-scrolling phone mockup ---------- */
.phone-scroll {
    position: relative;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    padding: 14px 12px 14px 12px;
    border-radius: 42px;
    background: linear-gradient(145deg, #1a1d24 0%, #0a0c10 100%);
    box-shadow: 0 30px 80px rgba(0,0,0,.7),
                0 0 0 1px rgba(33,150,243,.2),
                inset 0 0 0 2px rgba(255,255,255,.03);
}
.phone-scroll::before {
    content: "";
    position: absolute; inset: -50px;
    background: radial-gradient(circle at 50% 50%, rgba(107,207,126,.28), transparent 60%);
    filter: blur(55px);
    z-index: -1;
}
.phone-scroll-frame {
    position: relative;
    aspect-ratio: 9 / 19;
    border-radius: 30px;
    overflow: hidden;
    background: #0f1115;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.phone-scroll-frame::after {
    /* subtle gradient fade at top & bottom edges so the scroll feels framed */
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
                rgba(15,17,21,.6) 0%,
                rgba(15,17,21,0)   6%,
                rgba(15,17,21,0)   94%,
                rgba(15,17,21,.6) 100%);
    border-radius: inherit;
    z-index: 2;
}
.phone-scroll-frame img {
    width: 100%;
    display: block;
    animation: phone-auto-scroll 26s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes phone-auto-scroll {
    0%,  8%  { transform: translateY(0%); }
    50%, 58% { transform: translateY(-72%); }
    100%     { transform: translateY(0%); }
}
.phone-scroll:hover .phone-scroll-frame img { animation-play-state: paused; }

.phone-scroll-frame.is-scrollable {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(107,207,126,.5) transparent;
    cursor: grab;
}
.phone-scroll-frame.is-scrollable:active { cursor: grabbing; }
.phone-scroll-frame.is-scrollable.is-dragging {
    cursor: grabbing;
    user-select: none;
}
.phone-scroll-frame.is-scrollable img {
    animation: none;
    height: auto;
    object-fit: unset;
}
.phone-scroll-frame.is-scrollable::-webkit-scrollbar { width: 5px; }
.phone-scroll-frame.is-scrollable::-webkit-scrollbar-thumb {
    background: rgba(107,207,126,.45);
    border-radius: 999px;
}
.phone-scroll.green::before {
    background: radial-gradient(circle at 50% 50%, rgba(107,207,126,.32), transparent 60%);
}
.phone-scroll-hint {
    margin: 14px 0 0;
    text-align: center;
    font-size: .78rem;
    color: var(--text-muted);
    letter-spacing: .04em;
}

/* Counter-split layout (left phone, right text) */
.counter-split {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 70px;
    align-items: center;
}
.counter-txt h3 { margin: 10px 0 14px; }
.counter-txt ul.check li { margin-bottom: 10px; }

@media (max-width: 880px) {
    .counter-split { grid-template-columns: 1fr; gap: 40px; }
    .phone-scroll { max-width: 280px; }
}

/* Before / after week diversity comparison */
.before-after {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    max-width: 860px;
    margin: 40px auto 0;
}
.ba-card {
    text-align: center;
}
.ba-card .phone {
    max-width: 280px;
    margin: 0 auto 20px;
    transform: rotate(0deg);
}
.ba-card.low  .phone { box-shadow: 0 24px 60px rgba(255,193,7,.15), 0 0 0 1px rgba(255,193,7,.2); }
.ba-card.high .phone { box-shadow: 0 24px 60px rgba(107,207,126,.2), 0 0 0 1px rgba(107,207,126,.3); }
.ba-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .04em;
    margin-bottom: 8px;
}
.ba-label.low  { background: rgba(255,193,7,.12);  color: var(--energy);      border: 1px solid rgba(255,193,7,.3); }
.ba-label.high { background: rgba(107,207,126,.12); color: var(--plant-green); border: 1px solid rgba(107,207,126,.35); }
.ba-card .num-big {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    margin: 6px 0 4px;
}
.ba-card.low  .num-big { color: var(--energy); }
.ba-card.high .num-big { color: var(--plant-green); }
.ba-card p { color: var(--text-secondary); max-width: 32ch; margin: 6px auto 0; }

@media (max-width: 720px) {
    .before-after { grid-template-columns: 1fr; gap: 44px; }
}

/* ---------- Section headers ---------- */
.section-head { text-align: center; max-width: 760px; margin: 0 auto 64px; }
.section-head h2 { margin-bottom: 18px; }
.section-head p { color: var(--text-secondary); margin: 0 auto; }

/* ---------- Workflow timeline ---------- */
.workflow {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    counter-reset: step;
}
.workflow-step {
    background: var(--content-bg);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--r-lg);
    padding: 32px 28px;
    position: relative;
    counter-increment: step;
}
.workflow-step::before {
    content: counter(step, decimal-leading-zero);
    position: absolute; top: -14px; left: 22px;
    font-family: var(--font-mono);
    font-size: .85rem;
    padding: 4px 12px;
    background: var(--content-bg);
    border: 1px solid rgba(33,150,243,.35);
    color: var(--garmin-blue);
    border-radius: 100px;
    letter-spacing: .1em;
}
.workflow-step h3 { color: var(--text-primary); margin-bottom: 10px; }
.workflow-step .step-tag {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 14px;
}
.workflow-step.accent-blue .step-tag {
    color: var(--garmin-blue);
    background: rgba(33,150,243,.08);
    border: 1px solid rgba(33,150,243,.25);
}
.workflow-step.accent-ai .step-tag {
    color: var(--ai);
    background: rgba(149,117,205,.1);
    border: 1px solid rgba(149,117,205,.3);
}
.workflow-step.accent-green .step-tag {
    color: var(--plant-green);
    background: rgba(107,207,126,.1);
    border: 1px solid rgba(107,207,126,.3);
}
.workflow-step.accent-blue::before  { border-color: rgba(33,150,243,.5); color: var(--garmin-blue); }
.workflow-step.accent-ai::before    { border-color: rgba(149,117,205,.5); color: var(--ai); }
.workflow-step.accent-green::before { border-color: rgba(107,207,126,.5); color: var(--plant-green); }

/* ---------- BYOA workflow (vertical) ---------- */
.byoa-flow {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}
.byoa-flow::before {
    content: "";
    position: absolute;
    left: 40px;
    top: 20px; bottom: 20px;
    width: 2px;
    background: linear-gradient(180deg, var(--garmin-blue), var(--ai), var(--plant-green));
    opacity: .4;
}
@media (max-width: 680px) { .byoa-flow::before { left: 28px; } }

.byoa-step {
    position: relative;
    padding: 28px 0 28px 100px;
    display: block;
}
@media (max-width: 680px) { .byoa-step { padding-left: 72px; } }

.byoa-step .num {
    position: absolute;
    left: 0; top: 28px;
    width: 82px; height: 82px;
    border-radius: 50%;
    background: var(--content-bg);
    border: 2px solid var(--garmin-blue);
    color: var(--garmin-blue);
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-weight: 700; font-size: 2rem;
    box-shadow: 0 0 0 4px var(--app-bg), 0 0 0 5px rgba(33,150,243,.3);
}
@media (max-width: 680px) {
    .byoa-step .num { width: 58px; height: 58px; font-size: 1.4rem; top: 24px; }
}
.byoa-step.ai .num   { border-color: var(--ai); color: var(--ai); box-shadow: 0 0 0 4px var(--app-bg), 0 0 0 5px rgba(149,117,205,.3); }
.byoa-step.green .num{ border-color: var(--plant-green); color: var(--plant-green); box-shadow: 0 0 0 4px var(--app-bg), 0 0 0 5px rgba(107,207,126,.3); }
.byoa-step .panel {
    background: var(--content-bg);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--r-lg);
    padding: 32px 34px;
}
.byoa-step .panel h3 { margin-bottom: 6px; }
.byoa-step .panel .sub {
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 16px;
    display: block;
}
.byoa-step.ai    .panel .sub { color: var(--ai); }
.byoa-step.green .panel .sub { color: var(--plant-green); }
.byoa-step .panel ul { padding-left: 1.1em; color: var(--text-secondary); margin: 10px 0; }
.byoa-step .panel li { margin-bottom: 6px; }

/* ---------- Feature grid ---------- */
.feature-card {
    background: var(--content-bg);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--r-lg);
    padding: 32px;
    display: flex; flex-direction: column;
    gap: 18px;
    min-height: 100%;
    transition: all .25s ease;
    overflow: hidden;
    position: relative;
}
.feature-card::before {
    content: "";
    position: absolute; inset: 0;
    background: var(--grad-surface);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}
.feature-card:hover { border-color: rgba(33,150,243,.3); transform: translateY(-4px); }
.feature-card:hover::before { opacity: 1; }
.feature-card h3 { margin: 0; }
.feature-card .pill {
    display: inline-flex;
    align-items: center; gap: 6px;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .12em; text-transform: uppercase;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    padding: 4px 10px;
    border-radius: 100px;
    color: var(--text-secondary);
    align-self: flex-start;
}
.feature-card .ic {
    width: 54px; height: 54px; border-radius: 14px;
    display: grid; place-items: center;
    font-size: 1.6rem;
    background: rgba(33,150,243,.12);
}
.feature-card.teal   .ic { background: rgba(38,166,154,.14);  }
.feature-card.green  .ic { background: rgba(107,207,126,.14); }
.feature-card.amber  .ic { background: rgba(255,193,7,.14);   }
.feature-card.indigo .ic { background: rgba(121,134,203,.14); }
.feature-card.ai     .ic { background: rgba(149,117,205,.14); }
.feature-card.red    .ic { background: rgba(239,83,80,.14);   }

/* ---------- Category badges ---------- */
.plant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}
.plant-chip {
    background: var(--content-bg);
    border: 1px solid rgba(107,207,126,.25);
    padding: 18px 20px;
    border-radius: var(--r);
    display: flex; align-items: center; gap: 14px;
    transition: all .25s;
}
.plant-chip:hover {
    transform: translateY(-2px);
    border-color: var(--plant-green);
    background: linear-gradient(180deg, rgba(107,207,126,.08), var(--content-bg));
}
.plant-chip .num {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(107,207,126,.15); color: var(--plant-green);
    display: grid; place-items: center;
    font-family: var(--font-mono); font-size: .85rem; font-weight: 700;
    flex-shrink: 0;
}
.plant-chip .name { font-weight: 600; color: var(--text-primary); font-size: .95rem; line-height: 1.2; }
.plant-chip .name small { display: block; font-weight: 400; color: var(--text-muted); font-size: .78rem; margin-top: 2px; }

/* ---------- Showcase blocks ---------- */
.showcase {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 60px;
    align-items: center;
}
@media (max-width: 920px) {
    .showcase { grid-template-columns: 1fr; gap: 40px; }
    .showcase.reverse .showcase-img { order: -1; }
}
.showcase.reverse { grid-template-columns: .9fr 1.1fr; }
.showcase.reverse .showcase-txt { order: 2; }
.showcase.reverse .showcase-img { order: 1; }
@media (max-width: 920px) {
    .showcase.reverse { grid-template-columns: 1fr; }
    .showcase.reverse .showcase-txt { order: 1; }
    .showcase.reverse .showcase-img { order: 2; }
}
.showcase-img {
    position: relative;
    display: flex; justify-content: center;
}
.showcase-img .phone { max-width: 300px; margin: 0 auto; transform: rotate(-3deg); }
.showcase-img.double { min-height: 620px; }
.showcase-img.double .phone { position: absolute; top: 0; left: 50%; transform: translateX(-60%) rotate(-6deg); max-width: 270px; }
.showcase-img.double .phone.b { transform: translateX(-10%) rotate(4deg); top: 50px; max-width: 270px; z-index: -1; opacity: .9; }
@media (max-width: 920px) {
    .showcase-img.double { min-height: 540px; }
    .showcase-img.double .phone { max-width: 240px; }
}
.showcase-txt h2 { margin-bottom: 20px; }
.showcase-txt ul.check { list-style: none; padding: 0; margin: 24px 0; }
.showcase-txt ul.check li {
    position: relative;
    padding: 10px 0 10px 32px;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.showcase-txt ul.check li:last-child { border-bottom: 0; }

/* ---------- Logbook hub (option C) ---------- */
.logbook-hub {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    margin-top: 8px;
}
.logbook-hub-phone {
    position: sticky;
    top: 96px;
}
.logbook-hub-phone .phone-wrap {
    padding: 10px 0 0;
}
.logbook-hub-phone .phone.no-notch.logbook-phone {
    max-width: 300px;
    width: 100%;
    margin-inline: auto;
    height: auto;
    overflow: visible;
    transform: rotate(-3deg);
    transition: transform .35s ease;
}
.logbook-hub-phone .phone.no-notch.logbook-phone:hover {
    transform: rotate(0deg) translateY(-6px);
}
.logbook-hub-phone--analysis .phone.no-notch.logbook-phone img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top center;
    display: block;
    border-radius: 32px;
}
.logbook-phone-scroll {
    max-height: min(560px, 62vh);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    border-radius: 32px;
    scrollbar-width: thin;
    scrollbar-color: rgba(38,166,154,.45) transparent;
    cursor: grab;
}
.logbook-phone-scroll:active { cursor: grabbing; }
.logbook-phone-scroll.is-dragging {
    cursor: grabbing;
    user-select: none;
}
.logbook-phone-scroll img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
}
.logbook-phone-scroll::-webkit-scrollbar { width: 4px; }
.logbook-phone-scroll::-webkit-scrollbar-thumb {
    background: rgba(38,166,154,.45);
    border-radius: 999px;
}
.logbook-hub-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
@media (max-width: 960px) {
    .logbook-hub {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .logbook-hub-phone {
        position: static;
    }
    .logbook-hub-phone .phone.no-notch.logbook-phone {
        max-width: min(300px, 88vw);
    }
}
.logbook-card {
    background: var(--content-bg);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--r-lg);
    padding: 22px 24px;
    transition: border-color .2s, transform .2s;
}
.logbook-card:hover {
    border-color: rgba(33,150,243,.25);
    transform: translateY(-2px);
}
.logbook-card-body h3 {
    margin: 10px 0 8px;
    font-size: 1.05rem;
    line-height: 1.35;
}
.logbook-card-body p {
    margin: 0;
    font-size: .88rem;
    color: var(--text-secondary);
    line-height: 1.65;
}
.logbook-card .pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
}
.logbook-card .pill.teal  { background: rgba(38,166,154,.16);  color: #4db6ac; }
.logbook-card .pill.amber { background: rgba(255,193,7,.16);   color: #ffd54f; }
.logbook-card .pill.green { background: rgba(107,207,126,.16); color: var(--plant-green); }
@media (max-width: 560px) {
    .logbook-card {
        padding: 20px 18px;
    }
}

.logbook-plants {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(260px, 380px) minmax(220px, 280px);
    grid-template-areas: "week text explorer";
    gap: 32px 48px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 40px 0 0;
    padding-top: 40px;
    border-top: 1px solid rgba(255,255,255,.07);
    perspective: 1100px;
}
.logbook-plants-phone--week.reveal {
    opacity: 0;
    transform: rotate(-3deg) translateY(22px);
}
.logbook-plants-phone--week.reveal.in {
    opacity: 1;
    transform: rotate(-3deg) translateY(0);
}
.logbook-plants-phone--explorer.reveal {
    opacity: 0;
    transform: rotate(3deg) translateY(22px);
}
.logbook-plants-phone--explorer.reveal.in {
    opacity: 1;
    transform: rotate(3deg) translateY(0);
}
.logbook-plants-phone--week {
    grid-area: week;
    justify-self: end;
    transition: transform .45s ease, opacity .7s ease;
    transform-origin: center bottom;
}
.logbook-plants-phone--week:hover,
.logbook-plants-phone--week.reveal.in:hover {
    transform: rotate(0deg) translateY(-6px);
}
.logbook-plants-txt {
    grid-area: text;
    text-align: center;
    align-self: center;
    justify-self: center;
    max-width: 380px;
}
.logbook-plants-phone--explorer {
    grid-area: explorer;
    justify-self: start;
    transition: transform .45s ease, opacity .7s ease;
    transform-origin: center bottom;
}
.logbook-plants-phone--explorer:hover,
.logbook-plants-phone--explorer.reveal.in:hover {
    transform: rotate(0deg) translateY(-6px);
}
.logbook-plants-phone .phone-wrap {
    padding: 16px 0 0;
}
.logbook-plants-phone--week .phone-wrap::after {
    background: radial-gradient(circle at 50% 55%, rgba(107,207,126,.42), transparent 62%);
    filter: blur(48px);
}
.logbook-plants-phone--explorer .phone-scroll.green::before {
    background: radial-gradient(circle at 50% 50%, rgba(107,207,126,.42), transparent 58%);
    filter: blur(52px);
}
.logbook-plants-phone--week .phone.no-notch.logbook-phone {
    max-width: 280px;
    margin-inline: auto;
    padding: 8px;
    box-sizing: border-box;
    transform: none;
    box-shadow: 0 34px 90px rgba(0,0,0,.65),
                0 0 0 1px rgba(107,207,126,.18),
                inset 0 0 0 1px rgba(255,255,255,.06);
}
.logbook-plants-phone--week .phone.no-notch.logbook-phone:hover {
    transform: none;
}
.logbook-plants-phone--week .logbook-phone-scroll {
    max-height: min(520px, 58vh);
}
.logbook-plants-phone--explorer .phone-scroll {
    max-width: 280px;
    margin-inline: auto;
    transform: none;
    box-shadow: 0 34px 90px rgba(0,0,0,.7),
                0 0 0 1px rgba(107,207,126,.22),
                inset 0 0 0 2px rgba(255,255,255,.03);
}
.logbook-plants-phone--explorer .phone-scroll:hover {
    transform: none;
}
.logbook-plants-phone--explorer .phone-scroll-hint {
    margin-top: 14px;
}
.logbook-plants .phone-caption .dot {
    background: var(--plant-green);
    box-shadow: 0 0 10px rgba(107,207,126,.75);
}
.logbook-plants-txt h3 {
    margin: 12px 0 14px;
    font-size: clamp(1.25rem, 2.5vw, 1.55rem);
}
.logbook-plants-txt p {
    margin: 0 0 12px;
    font-size: .92rem;
    color: var(--text-secondary);
    line-height: 1.65;
}
.logbook-plants-txt .pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
    background: rgba(107,207,126,.16);
    color: var(--plant-green);
}
.logbook-plants-note {
    font-size: .85rem !important;
    margin-top: 16px !important;
}
@media (max-width: 960px) {
    .logbook-plants {
        grid-template-columns: 1fr;
        grid-template-areas:
            "text"
            "week"
            "explorer";
        gap: 32px;
        justify-content: stretch;
    }
    .logbook-plants-txt {
        text-align: left;
        max-width: none;
    }
    .logbook-plants-phone--week,
    .logbook-plants-phone--explorer,
    .logbook-plants-phone--week.reveal.in,
    .logbook-plants-phone--explorer.reveal.in {
        transform: none;
        justify-self: center;
        max-width: min(280px, 88vw);
        width: 100%;
    }
    .logbook-plants-phone--week:hover,
    .logbook-plants-phone--explorer:hover,
    .logbook-plants-phone--week.reveal.in:hover,
    .logbook-plants-phone--explorer.reveal.in:hover {
        transform: none;
    }
}

/* Strategy section — 7700 kcal examples */
.strategy-examples {
    margin-top: 22px;
    padding: 20px 22px;
    border-radius: var(--r);
    background: rgba(255,193,7,.06);
    border: 1px solid rgba(255,193,7,.18);
}
.strategy-formula {
    margin: 0 0 14px;
    font-size: .88rem;
    color: var(--text-secondary);
    line-height: 1.55;
}
.strategy-formula .muted,
.strategy-sub .muted {
    color: var(--text-muted);
    font-size: .82rem;
}
.strategy-block {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,193,7,.14);
}
.strategy-block:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.strategy-block h4 {
    margin: 0 0 10px;
    font-size: .72rem;
    font-family: var(--font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,193,7,.85);
    font-weight: 600;
}
.strategy-sub {
    margin: 10px 0 0;
    font-size: .82rem;
    color: var(--text-muted);
    line-height: 1.55;
}
.strategy-examples ul {
    margin: 0 0 14px;
    padding: 0 0 0 18px;
    font-size: .88rem;
    color: var(--text-secondary);
    line-height: 1.7;
}
.strategy-examples li { margin-bottom: 4px; }
.strategy-note {
    margin: 0;
    font-size: .82rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.showcase-txt ul.check li::before {
    content: "✓";
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(107,207,126,.15); color: var(--plant-green);
    display: grid; place-items: center;
    font-size: .8rem; font-weight: 700;
}

/* ---------- Strategy tabs ---------- */
.strategy-wrap {
    background: var(--content-bg);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--r-xl);
    padding: 48px;
    max-width: 1000px;
    margin: 0 auto;
}
@media (max-width: 720px) { .strategy-wrap { padding: 28px; border-radius: var(--r-lg); } }

.strategy-tabs {
    display: flex; gap: 10px; flex-wrap: wrap;
    background: var(--surface-variant);
    padding: 6px; border-radius: 100px;
    margin-bottom: 32px;
    max-width: 520px;
}
.strategy-tab {
    flex: 1 1 auto;
    padding: 12px 22px; border-radius: 100px;
    border: 0; background: transparent;
    color: var(--text-secondary); cursor: pointer;
    font-family: var(--font-body); font-weight: 600; font-size: .95rem;
    transition: all .2s;
    text-align: center;
    min-width: 100px;
}
.strategy-tab:hover { color: var(--text-primary); }
.strategy-tab.active {
    background: var(--garmin-blue); color: #fff;
    box-shadow: 0 6px 20px rgba(33,150,243,.4);
}
.strategy-panel { display: none; }
.strategy-panel.active { display: block; animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.strategy-panel h3 { color: var(--text-primary); margin-bottom: 8px; }
.strategy-panel .focus-list {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px; margin-top: 22px;
}
.strategy-panel .focus-list .focus-item {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r);
    padding: 18px;
    background: rgba(255,255,255,.02);
}
.strategy-panel .focus-list .focus-item b { display: block; color: var(--garmin-blue); margin-bottom: 4px; }
.strategy-panel .focus-list .focus-item small { color: var(--text-muted); font-size: .85rem; }

.tempo-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-top: 22px;
}
.tempo-cell {
    padding: 14px;
    border-radius: var(--r);
    background: rgba(33,150,243,.08);
    border: 1px solid rgba(33,150,243,.2);
    text-align: center;
}
.tempo-cell b { font-family: var(--font-display); font-size: 1.3rem; color: var(--garmin-blue); display: block; }
.tempo-cell small { color: var(--text-muted); font-size: .8rem; }

/* ---------- Metingen cards ---------- */
.meting-card {
    background: var(--content-bg);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--r-lg);
    padding: 28px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    transition: all .25s;
    position: relative;
    overflow: hidden;
}
.meting-card:hover { border-color: rgba(38,166,154,.3); transform: translateY(-3px); }
.meting-card .mic {
    flex-shrink: 0;
    width: 52px; height: 52px; border-radius: 14px;
    display: grid; place-items: center; font-size: 1.3rem;
    background: rgba(38,166,154,.12); color: var(--measurement);
}
.meting-card.amber  .mic { background: rgba(255,193,7,.14);  color: var(--energy); }
.meting-card.green  .mic { background: rgba(107,207,126,.14); color: var(--plant-green); }
.meting-card.indigo .mic { background: rgba(121,134,203,.14); color: var(--library); }
.meting-card.ai     .mic { background: rgba(149,117,205,.14); color: var(--ai); }
.meting-card.red    .mic { background: rgba(239,83,80,.14);  color: var(--danger); }

.meting-card h4 { margin: 0 0 6px; color: var(--text-primary); font-size: 1.1rem; }
.meting-card p { margin: 0; font-size: .94rem; color: var(--text-secondary); }

/* ---------- Callout / banner ---------- */
.callout {
    background: linear-gradient(135deg, rgba(33,150,243,.12) 0%, rgba(149,117,205,.1) 100%);
    border: 1px solid rgba(33,150,243,.3);
    border-radius: var(--r-xl);
    padding: 56px 48px;
    text-align: center;
}
@media (max-width: 680px) { .callout { padding: 32px 24px; border-radius: var(--r-lg); } }
.callout h2 { margin-bottom: 18px; }
.callout .lead { margin: 0 auto 30px; color: var(--text-primary); opacity: .9; }
.callout-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- JSON / prompt showcase ---------- */
.code-block {
    background: #0A0C10;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--r);
    padding: 22px 26px;
    font-family: var(--font-mono);
    font-size: .86rem;
    color: var(--text-primary);
    overflow: auto;
    position: relative;
    line-height: 1.7;
    margin: 16px 0;
}
.code-block .k { color: var(--garmin-blue); }
.code-block .s { color: var(--plant-green); }
.code-block .n { color: var(--energy); }
.code-block .c { color: var(--text-muted); font-style: italic; }
.code-block::before {
    content: attr(data-lang);
    position: absolute; top: 10px; right: 14px;
    font-size: .7rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    letter-spacing: .15em;
    text-transform: uppercase;
}

/* ---------- AI providers strip ---------- */
.providers {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 22px 0;
}
.provider-chip {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 22px;
    border-radius: 100px;
    background: var(--content-bg);
    border: 1px solid rgba(255,255,255,.1);
    color: var(--text-primary); font-weight: 500;
    transition: all .2s;
}
.provider-chip:hover {
    border-color: var(--garmin-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(33,150,243,.2);
}
.provider-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--plant-green); }

/* ---------- FAQ ---------- */
details.faq {
    background: var(--content-bg);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--r);
    padding: 4px 22px;
    margin-bottom: 12px;
    transition: all .2s;
}
details.faq[open] { border-color: rgba(33,150,243,.25); }
details.faq summary {
    cursor: pointer;
    padding: 18px 0;
    font-weight: 600;
    color: var(--text-primary);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
    content: "+";
    font-family: var(--font-mono);
    color: var(--garmin-blue);
    font-size: 1.4rem;
    transition: transform .2s;
}
details.faq[open] summary::after { content: "−"; }
details.faq p { padding: 0 0 18px; color: var(--text-secondary); margin: 0; }
details.faq p a { color: var(--garmin-blue); }
details.faq p code {
    font-family: var(--font-mono);
    font-size: .88em;
    background: rgba(255,255,255,.06);
    padding: 2px 6px;
    border-radius: 6px;
}
details.faq.is-hidden { display: none; }

.faq-panel {
    max-width: 860px;
    margin: 0 auto;
}
.faq-search-label {
    display: block;
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 10px;
}
.faq-search-input {
    width: 100%;
    padding: 16px 20px;
    border-radius: var(--r);
    border: 1px solid rgba(255,255,255,.1);
    background: var(--content-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: 1rem;
    margin-bottom: 10px;
    transition: border-color .2s, box-shadow .2s;
}
.faq-search-input:focus {
    outline: none;
    border-color: rgba(33,150,243,.45);
    box-shadow: 0 0 0 3px rgba(33,150,243,.12);
}
.faq-search-meta { margin: 0 0 28px; }
.faq-search-empty {
    margin: 0 0 24px;
    padding: 18px 20px;
    border-radius: var(--r);
    border: 1px dashed rgba(255,255,255,.12);
    text-align: center;
}
.faq-list { margin-top: 8px; }
.faq-category { margin-bottom: 36px; }
.faq-category.is-hidden { display: none; }
.faq-category-title {
    font-size: 1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--garmin-blue);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.faq-category-items details.faq:last-child { margin-bottom: 0; }

/* ---------- Page header ---------- */
.page-header {
    padding: 80px 0 50px;
    text-align: center;
}
.page-header .eyebrow { margin-bottom: 22px; }
.page-header h1 { max-width: 900px; margin: 0 auto 18px; }
.page-header p { max-width: 680px; margin: 0 auto; font-size: 1.1rem; }

/* ---------- Footer ---------- */
footer.site-footer {
    padding: 70px 0 40px;
    border-top: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.2);
    position: relative;
    z-index: 1;
}
footer.site-footer .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 50px;
}
@media (max-width: 780px) { footer.site-footer .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { footer.site-footer .footer-grid { grid-template-columns: 1fr; } }
footer.site-footer h4 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; }
footer.site-footer a { display: block; padding: 6px 0; color: var(--text-secondary); font-size: .95rem; }
footer.site-footer a:hover { color: var(--text-primary); }
footer.site-footer .foot-bottom {
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,.05);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
    color: var(--text-muted); font-size: .85rem;
}
footer.site-footer .foot-brand-desc { max-width: 340px; color: var(--text-secondary); font-size: .95rem; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.delay-1 { transition-delay: .08s; }
.reveal.delay-2 { transition-delay: .16s; }
.reveal.delay-3 { transition-delay: .24s; }
.reveal.delay-4 { transition-delay: .32s; }

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-l { margin-top: 36px; }
.mb-l { margin-bottom: 36px; }
.muted { color: var(--text-muted); }
.accent { color: var(--garmin-blue); }
.accent-green { color: var(--plant-green); }
.accent-ai { color: var(--ai); }
.tiny { font-size: .85rem; }

/* screen-reader only */
.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;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; transform: none; }
}

/* ---------- Workflow (short + extended) ---------- */
.workflow-stack {
    grid-template-columns: 1fr;
    max-width: 920px;
    margin-inline: auto;
    gap: 40px;
}
.workflow-step-inner {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 300px);
    gap: 40px;
    align-items: center;
}
.workflow-step:nth-child(even) .workflow-step-inner {
    grid-template-columns: minmax(260px, 300px) 1fr;
}
.workflow-step:nth-child(even) .workflow-step-txt { order: 2; }
.workflow-step:nth-child(even) .workflow-step-phone { order: 1; }
.workflow-step-phone {
    display: flex;
    justify-content: center;
}
.workflow-step-phone .phone.no-notch {
    max-width: 300px;
    width: 100%;
    transform: rotate(0deg);
    margin: 0;
}
.workflow-step-phone .phone.no-notch:hover {
    transform: translateY(-4px);
}
.workflow-step-phone .phone.no-notch img {
    max-height: none;
}
.workflow-step-txt ul.check-mini {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
}
.workflow-step-txt ul.check-mini li {
    position: relative;
    padding: 6px 0 6px 26px;
    color: var(--text-secondary);
    font-size: .92rem;
}
.workflow-step-txt ul.check-mini li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--garmin-blue);
    font-weight: 600;
}
.fi-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55em;
    height: 1.55em;
    min-width: 1.55em;
    margin: 0 0.15em;
    border: 2px solid #e53935;
    border-radius: 50%;
    color: #e53935;
    font-size: 0.95em;
    font-weight: 700;
    line-height: 1;
    vertical-align: -0.12em;
}

@media (max-width: 820px) {
    .workflow-step-inner,
    .workflow-step:nth-child(even) .workflow-step-inner {
        grid-template-columns: 1fr;
        gap: 28px;
        text-align: center;
    }
    .workflow-step:nth-child(even) .workflow-step-txt,
    .workflow-step:nth-child(even) .workflow-step-phone { order: unset; }
    .workflow-step-phone .phone.no-notch { max-width: 280px; }
    .workflow-step-txt ul.check-mini li { text-align: left; }
}

.workflow-expand {
    max-width: 920px;
    margin: 48px auto 0;
    background: var(--content-bg);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r-lg);
    overflow: visible;
}
.workflow-expand summary {
    cursor: pointer;
    padding: 22px 28px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-primary);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: background .2s;
}
.workflow-expand summary::-webkit-details-marker { display: none; }
.workflow-expand summary::after {
    content: "+";
    font-family: var(--font-mono);
    color: var(--garmin-blue);
    font-size: 1.4rem;
    flex-shrink: 0;
}
.workflow-expand[open] summary {
    background: rgba(33,150,243,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.workflow-expand[open] summary::after { content: "−"; }
.workflow-expand .workflow-expand-body {
    padding: 16px 20px 36px;
}
.workflow-extended {
    counter-reset: step;
    padding-top: 8px;
}
.workflow-extended .workflow-step-txt > p {
    margin: 0;
    color: var(--text-secondary);
    font-size: .95rem;
    line-height: 1.55;
}
.workflow-step.is-summary .workflow-step-inner {
    grid-template-columns: 1fr minmax(260px, 320px);
}
.workflow-step.is-summary .workflow-step-phone .phone.no-notch {
    max-width: 320px;
}

@media (max-width: 820px) {
    .workflow-step.is-summary .workflow-step-inner {
        grid-template-columns: 1fr;
    }
}

.install-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 0;
    max-width: 960px;
    margin-inline: auto;
}
.install-step {
    text-align: left;
    padding: 18px 16px;
    border-radius: var(--r);
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    cursor: pointer;
}
.install-step summary {
    list-style: none;
    cursor: pointer;
}
.install-step summary::-webkit-details-marker { display: none; }
.install-step .num {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--garmin-blue);
    margin-bottom: 6px;
}
.install-step .install-step-title {
    margin: 0 0 0;
    font-size: .92rem;
    font-weight: 600;
    color: var(--text-primary);
}
.install-step .install-more-hint {
    display: inline-block;
    margin-top: 10px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--garmin-blue);
}
.install-step[open] .install-more-hint { display: none; }
.install-step[open] { border-color: rgba(33,150,243,.28); }
.install-step-detail {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: .85rem;
    color: var(--text-secondary);
    line-height: 1.55;
}
.install-step-detail a { color: var(--garmin-blue); }
/* Welcome video (fi_intro — 1280×720 landscape, same clip as app onboarding) */
.install-intro-video {
    max-width: 860px;
    margin: 28px auto 32px;
}
.install-intro-video .intro-video-shell {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #000;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45),
                0 0 0 1px rgba(33, 150, 243, .18);
    aspect-ratio: 16 / 9;
    width: 100%;
    margin-inline: auto;
}
.install-intro-video video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    cursor: pointer;
    background: #000;
}
.install-intro-video .intro-video-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 72px;
    height: 72px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 17, 21, .72);
    color: #fff;
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5),
                0 0 0 1px rgba(255, 255, 255, .12);
    transition: transform .2s ease, background .2s ease;
}
.install-intro-video .intro-video-play::before {
    content: "";
    width: 0;
    height: 0;
    margin-left: 5px;
    border-style: solid;
    border-width: 14px 0 14px 22px;
    border-color: transparent transparent transparent #fff;
}
.install-intro-video .intro-video-play:hover {
    transform: scale(1.06);
    background: rgba(33, 150, 243, .85);
}
.install-intro-video .intro-video-shell.is-playing .intro-video-play { display: none; }
.install-intro-video figcaption {
    margin-top: 14px;
    text-align: center;
    font-size: .92rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.install-trial {
    max-width: 960px;
    margin: 0 auto 16px;
    padding: 14px 20px;
    border-radius: var(--r);
    text-align: center;
    font-size: .95rem;
    color: var(--text-primary);
    background: rgba(33,150,243,.08);
    border: 1px solid rgba(33,150,243,.22);
}
.install-grid-hint {
    text-align: center;
    margin-top: 18px;
    font-size: .85rem;
    color: var(--text-muted);
}
.install-wizard-preface {
    max-width: 860px;
    margin: 28px auto 0;
    text-align: center;
    font-size: .88rem;
    color: var(--text-muted);
    line-height: 1.55;
}
.install-wizard-preface em {
    font-style: normal;
    color: var(--text-secondary);
}
.install-wizard-expand {
    max-width: 860px;
    margin: 36px auto 0;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r-lg);
    background: rgba(255,255,255,.02);
    overflow: hidden;
}
.install-wizard-expand summary {
    padding: 18px 22px;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
    list-style: none;
}
.install-wizard-expand summary::-webkit-details-marker { display: none; }
.install-wizard-expand summary::after {
    content: "+";
    float: right;
    color: var(--garmin-blue);
    font-size: 1.2rem;
    line-height: 1;
}
.install-wizard-expand[open] summary::after { content: "−"; }
.install-wizard-expand[open] summary {
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.install-wizard-body {
    padding: 8px 22px 22px;
}
.install-wizard-group {
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.install-wizard-group:last-child { border-bottom: none; padding-bottom: 0; }
.install-wizard-group h4 {
    margin: 0 0 8px;
    font-size: .95rem;
    color: var(--garmin-blue);
}
.install-wizard-group p {
    margin: 0;
    font-size: .88rem;
    color: var(--text-secondary);
    line-height: 1.55;
}
.install-wizard-group a { color: var(--garmin-blue); }
.install-callout {
    max-width: 960px;
    margin: 36px auto 0;
    padding: 32px 30px;
    border-radius: var(--r-lg);
    background: linear-gradient(160deg, rgba(149,117,205,.16) 0%, rgba(33,150,243,.08) 100%);
    border: 1px solid rgba(149,117,205,.35);
    box-shadow: 0 20px 60px rgba(149,117,205,.12);
}
#rapporten .install-callout { margin-top: 0; max-width: none; }
.rapporten-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    gap: 32px;
    align-items: start;
}
.rapporten-layout-phone {
    position: sticky;
    top: 96px;
}
.rapporten-phone-wrap {
    padding: 10px 0 0;
}
.rapporten-layout-phone .phone.no-notch.rapporten-phone {
    max-width: 300px;
    margin-inline: auto;
}
.rapporten-phone-scroll {
    max-height: min(620px, 68vh);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    border-radius: 32px;
    scrollbar-width: thin;
    scrollbar-color: rgba(149,117,205,.45) transparent;
    cursor: grab;
}
.rapporten-phone-scroll:active { cursor: grabbing; }
.rapporten-phone-scroll.is-dragging {
    cursor: grabbing;
    user-select: none;
}
.rapporten-phone-scroll img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
}
.rapporten-phone-scroll::-webkit-scrollbar { width: 4px; }
.rapporten-phone-scroll::-webkit-scrollbar-thumb {
    background: rgba(149,117,205,.45);
    border-radius: 999px;
}
@media (max-width: 960px) {
    .rapporten-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .rapporten-layout-phone {
        position: static;
    }
    .rapporten-layout-phone .phone.no-notch.rapporten-phone {
        max-width: min(300px, 88vw);
    }
}
.install-callout .eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ai);
}
.install-callout h3 {
    margin: 0 0 14px;
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    line-height: 1.25;
    color: var(--text-primary);
}
.install-callout .lead-in {
    margin: 0 0 18px;
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.6;
    opacity: .95;
}
.install-callout p {
    margin: 0 0 14px;
    font-size: .92rem;
    color: var(--text-secondary);
    line-height: 1.65;
}
.install-callout p:last-child { margin-bottom: 0; }
.install-disclaimer {
    margin-top: 18px !important;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: .82rem !important;
    color: var(--text-muted) !important;
    line-height: 1.55 !important;
}
.install-disclaimer a {
    color: var(--accent-green);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.install-report-sections {
    margin: 22px 0 18px;
    padding: 20px 18px;
    border-radius: var(--r);
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.08);
}
.install-report-sections h4 {
    margin: 0 0 10px;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--garmin-blue);
}
.install-report-sections-intro {
    margin: 0 0 14px;
    font-size: .82rem;
    color: var(--text-muted);
    line-height: 1.55;
}
.install-report-sections ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px 16px;
}
.install-report-sections li {
    font-size: .84rem;
    color: var(--text-secondary);
    line-height: 1.45;
    padding-left: 0;
    position: relative;
}
.install-report-sections li .section-note {
    display: block;
    margin-top: 2px;
    font-size: .78rem;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.45;
}
.install-report-sections li strong { color: var(--text-primary); font-weight: 600; }
.install-callout-highlight {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: var(--r);
    background: rgba(107,207,126,.1);
    border: 1px solid rgba(107,207,126,.25);
    font-size: .88rem;
    color: var(--text-primary);
    line-height: 1.55;
}
.install-later {
    max-width: 960px;
    margin: 16px auto 0;
    text-align: center;
    font-size: .82rem;
    color: var(--text-muted);
    line-height: 1.55;
}

footer.site-footer .footer-grid.simple {
    grid-template-columns: 1.5fr 1fr;
}
@media (max-width: 500px) {
    footer.site-footer .footer-grid.simple { grid-template-columns: 1fr; }
}

/* ---------- Legal / privacy pages ---------- */
.legal-doc {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 0 80px;
}
.legal-doc h1 {
    font-size: clamp(2rem, 3vw, 2.6rem);
    margin-bottom: 12px;
}
.legal-doc .legal-updated {
    color: var(--text-muted);
    font-size: .9rem;
    margin-bottom: 36px;
}
.legal-doc h2 {
    font-size: 1.35rem;
    margin: 36px 0 12px;
    color: var(--text-primary);
}
.legal-doc p, .legal-doc li {
    color: var(--text-secondary);
    line-height: 1.65;
}
.legal-doc ul {
    padding-left: 1.2em;
    margin: 12px 0 20px;
}
.legal-doc li { margin-bottom: 8px; }
.legal-doc a { color: var(--garmin-blue); }
.legal-doc .legal-callout {
    margin: 28px 0;
    padding: 22px 24px;
    border-radius: var(--r);
    background: rgba(33,150,243,.08);
    border: 1px solid rgba(33,150,243,.25);
}
.legal-doc .legal-callout p:last-child { margin-bottom: 0; }

/* ---------- Pricing ---------- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 720px;
    margin: 0 auto 24px;
}
@media (max-width: 640px) {
    .pricing-grid { grid-template-columns: 1fr; max-width: 400px; }
}
.pricing-card {
    position: relative;
    padding: 32px 28px;
    border-radius: var(--r-lg);
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    text-align: center;
}
.pricing-card.featured {
    border-color: rgba(33,150,243,.45);
    background: linear-gradient(160deg, rgba(33,150,243,.12) 0%, rgba(255,255,255,.03) 100%);
    box-shadow: 0 16px 48px rgba(33,150,243,.15);
}
.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 14px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--garmin-blue);
    color: #fff;
}
.pricing-card .plan-name {
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.pricing-card .price {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.pricing-card .price-sub {
    font-size: .95rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}
.pricing-card .price-save {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--green);
    background: rgba(107,207,126,.12);
    border: 1px solid rgba(107,207,126,.25);
}
.pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}
.pricing-card li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    font-size: .92rem;
    color: var(--text-secondary);
    line-height: 1.45;
}
.pricing-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--green);
    font-weight: 700;
}
.pricing-trial {
    max-width: 560px;
    margin: 0 auto 36px;
    padding: 14px 20px;
    border-radius: var(--r);
    text-align: center;
    font-size: .95rem;
    color: var(--text-primary);
    background: rgba(107,207,126,.1);
    border: 1px solid rgba(107,207,126,.28);
}
.pricing-note {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    font-size: .82rem;
    color: var(--text-muted);
    line-height: 1.55;
}
.pricing-byoa {
    max-width: 640px;
    margin: 20px auto 0;
    text-align: center;
    font-size: .9rem;
    color: var(--text-secondary);
}