/* ==========================================================================
   Veda design system
   --------------------------------------------------------------------------
   One stylesheet for the whole marketing site.

   Type is Inter: a neutral UI face that stays quiet at every size. The site was
   on Lexend, which is rounded and characterful — fine in an app icon, but it
   reads playful across a page of body copy when the goal is calm and clean.

   Restraint rules here: heading weight tops out at 600, borders are 1px, there
   is one shadow, and colour is almost entirely neutral with teal used only to
   point at something. Anything decorative has been removed rather than tuned.
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;          /* one variable file covers every weight used */
    font-display: swap;
    src: url('/assets/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                   U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Brand — taken from the app, not re-picked */
    --primary: #005860;
    --primary-600: #00474E;
    --deep: #003E44;
    --primary-tint: #EDF4F4;

    /* Ink and surfaces — a calm neutral ramp, slightly cool to sit with teal */
    --ink: #16181D;
    --ink-soft: #3F454F;
    --muted: #6B7280;
    --faint: #9AA1AC;
    --line: #E8EAED;
    --line-soft: #F1F3F5;
    --bg: #FFFFFF;
    --bg-alt: #FAFBFC;
    --surface: #FFFFFF;

    /* Type scale — modest steps; nothing shouts */
    --t-display: clamp(2rem, 4.2vw, 3rem);
    --t-h1: clamp(1.75rem, 3.4vw, 2.375rem);
    --t-h2: clamp(1.375rem, 2.4vw, 1.75rem);
    --t-h3: 1.0625rem;
    --t-body: 1rem;
    --t-small: 0.9375rem;
    --t-tiny: 0.8125rem;
    --t-label: 0.75rem;

    /* Spacing */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 20px; --s-6: 28px; --s-7: 40px; --s-8: 56px; --s-9: 72px;

    /* Radii — restrained; the app's big pills read heavy on a wide screen */
    --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 16px; --r-pill: 999px;

    /* One shadow. If something needs more emphasis, use space, not depth. */
    --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .04);

    --wrap: 1120px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #F2F4F7;
        --ink-soft: #CDD3DC;
        --muted: #949BA6;
        --faint: #6B7280;
        --line: #22262E;
        --line-soft: #1A1E25;
        --bg: #0D0F13;
        --bg-alt: #111419;
        --surface: #14181E;
        --primary-tint: #10262A;
    }
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--t-body);
    line-height: 1.7;
    color: var(--ink-soft);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Inter's optical sizing and contextual alternates — sharper at display
       sizes without loading a second file. */
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 3px; }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-5); }
/* 104px top AND bottom put over 200px of nothing between every pair of
   sections, and the same value applied on a phone where it is most of a
   screen. Tighter, and tighter again on small viewports. */
.section { padding-block: var(--s-9); }
.section--tight { padding-block: var(--s-8); }
@media (max-width: 720px) {
    .section { padding-block: var(--s-7); }
    .section--tight { padding-block: var(--s-6); }
}
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line-soft); }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

/* ── Type ────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
    color: var(--ink);
    font-weight: 600;          /* never heavier — 700+ is what made it shout */
    line-height: 1.22;
    letter-spacing: -0.021em;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.011em; }

.display {
    font-size: var(--t-display);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.032em;  /* tighter only at display size */
    color: var(--ink);
}

.lede { font-size: 1.0625rem; color: var(--muted); line-height: 1.65; }
.muted { color: var(--muted); }
.small { font-size: var(--t-small); }
.tiny { font-size: var(--t-tiny); }

.eyebrow {
    display: inline-block;
    font-size: var(--t-label);
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--faint);
}

/* Measure — long paragraphs are unreadable full width */
.measure { max-width: 56ch; }
.measure-tight { max-width: 44ch; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    padding: 11px 20px;
    border-radius: var(--r-md);
    font-size: .9375rem; font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; }

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-600); color: #fff; }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-soft); color: var(--ink); }

.btn-quiet { background: transparent; color: var(--muted); padding-inline: 4px; }
.btn-quiet:hover { color: var(--primary); }

.btn-invert { background: #fff; color: var(--deep); }
.btn-invert:hover { background: #F1F3F5; color: var(--deep); }

.btn-lg { padding: 14px 26px; font-size: 1rem; }

/* ── Surfaces ────────────────────────────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--s-5);
}
.card--pad { padding: var(--s-5); }
.card--lift { box-shadow: var(--shadow); }
.card--flat { border-color: var(--line-soft); }

/* ── Icons ───────────────────────────────────────────────────────────────── */
/* Line icons via one inline SVG sprite. Emoji were doing this job and they are
   the single biggest reason a page reads as playful rather than considered —
   they also render differently on every platform. */
.icon { width: 20px; height: 20px; stroke: currentColor; fill: none;
        stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-lg { width: 24px; height: 24px; }

.icon-badge {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    background: var(--primary-tint);
    color: var(--primary);
    flex: none;
}

.step-num {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: var(--t-tiny);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.tag {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 11px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    font-size: var(--t-tiny);
    font-weight: 500;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line-soft);
}
.site-header .wrap { display: flex; align-items: center; gap: var(--s-5); height: 62px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 1.0625rem; color: var(--ink); letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand img { height: 26px; width: auto; }

.nav { display: flex; align-items: center; gap: var(--s-5); margin-left: auto; }
/* :not(.btn) matters. `.nav a` is (0,1,1) and `.btn-primary` is (0,1,0), so an
   unscoped rule here beat the button's own colour and painted "Get the app"
   in muted grey on the teal fill — the label was there, just at almost no
   contrast against its own background. */
.nav a:not(.btn) { color: var(--muted); font-size: .9375rem; font-weight: 450; }
.nav a:not(.btn):hover { color: var(--ink); text-decoration: none; }

/* Current page — a nav that never says where you are makes a multi-page site
   feel like a set of unrelated documents. */
.nav a.is-current { color: var(--ink); font-weight: 500; }

/* ── Mobile menu ─────────────────────────────────────────────────────────── */
/* Hidden on desktop, where the links are already in the row. */
.menu { display: none; position: relative; }
.menu > summary {
    list-style: none;
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--ink);
    cursor: pointer;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { border-color: var(--ink-soft); }

.menu-panel {
    position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 190px;
    display: flex; flex-direction: column;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    z-index: 60;
}
.menu-panel a {
    padding: 10px 12px;
    border-radius: var(--r-sm);
    color: var(--ink-soft);
    font-size: .9375rem;
    font-weight: 450;
}
.menu-panel a:hover { background: var(--bg-alt); color: var(--ink); text-decoration: none; }

@media (max-width: 860px) {
    .nav .nav-hide { display: none; }
    .menu { display: block; }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer { background: var(--bg-alt); border-top: 1px solid var(--line); padding-block: var(--s-8) var(--s-5); }
.site-footer a { color: var(--muted); font-size: var(--t-small); }
.site-footer a:hover { color: var(--ink); text-decoration: none; }
.site-footer h4 { color: var(--ink); font-size: var(--t-tiny); font-weight: 500; margin-bottom: var(--s-3); }
.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: var(--s-6); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-bottom {
    margin-top: var(--s-7); padding-top: var(--s-4);
    border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
    font-size: var(--t-tiny); color: var(--faint);
}

/* ── Motion — one rule, deliberately subtle ──────────────────────────────── */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
}

/* ── Split rows ──────────────────────────────────────────────────────────── */
/* Alternating text / screenshot rows, used by the audience pages. The old
   markup carried `order:-1` inline on every other row, which reversed on mobile
   too and put the image above the heading it belonged to. Here the reversal is
   a modifier that only applies at desktop width. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
.split + .split { margin-top: var(--s-9); }
@media (max-width: 900px) {
    .split { grid-template-columns: 1fr; gap: var(--s-6); }
    .split + .split { margin-top: var(--s-8); }
}
@media (min-width: 901px) {
    .split--flip .split-media { order: -1; }
}

/* ── Check list ──────────────────────────────────────────────────────────── */
.checks { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-5); }
.checks li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--ink-soft); font-size: var(--t-small); }
.checks .tick {
    flex: none; width: 20px; height: 20px; margin-top: 3px;
    display: grid; place-items: center;
    border-radius: var(--r-pill);
    background: var(--primary-tint); color: var(--primary);
}
.checks .tick svg { width: 12px; height: 12px; stroke-width: 2.2; }

/* ── Phone frame ─────────────────────────────────────────────────────────── */
/* Screenshots are raw app captures. A thin frame stops them reading as loose
   images dropped on the page. */
.phone {
    max-width: 268px; margin-inline: auto;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 7px;
    background: var(--surface);
    box-shadow: var(--shadow);
}
.phone img { border-radius: 16px; display: block; width: 100%; }
.phone-pair { display: flex; gap: var(--s-4); justify-content: center; }
.phone-pair .phone { max-width: 218px; }
@media (max-width: 520px) { .phone-pair .phone:last-child { display: none; } }

/* ── Prose ───────────────────────────────────────────────────────────────── */
/* Long-form legal and article text. The legal pages carried their own inline
   typography, which is how they drifted from the rest of the site — same
   content, different everything. */
.prose { max-width: 72ch; }
.prose h2 {
    font-size: 1.25rem;
    margin-top: var(--s-7);
    margin-bottom: var(--s-3);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line-soft);
}
.prose h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 1rem; margin-top: var(--s-5); margin-bottom: var(--s-2); }
.prose p { margin-bottom: var(--s-4); color: var(--ink-soft); }
.prose ul, .prose ol { margin: 0 0 var(--s-4) var(--s-5); }
.prose li { margin-bottom: var(--s-2); color: var(--ink-soft); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--s-4); }
.prose th, .prose td {
    text-align: left; padding: 10px 12px;
    border-bottom: 1px solid var(--line); vertical-align: top;
    font-size: var(--t-small);
}
.prose th { color: var(--muted); font-weight: 500; }

/* ── Blog ────────────────────────────────────────────────────────────────── */
.post {
    display: flex; flex-direction: column; gap: var(--s-2);
    padding: var(--s-4);
    color: inherit;
    transition: border-color .15s ease;
}
.post:hover { border-color: var(--line); text-decoration: none; }
.post:hover .post-title { color: var(--primary); }
.post-cover {
    width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
    border-radius: var(--r-sm);
    margin-bottom: var(--s-2);
}
.post-title { font-size: 1.0625rem; line-height: 1.3; transition: color .15s ease; }

/* Selected filter — .tag is the neutral chip; this is its "on" state. */
.tag--on { background: var(--primary); border-color: var(--primary); color: #fff; }
.tag--on:hover { color: #fff; text-decoration: none; }

/* ── v4: the colour layer ─────────────────────────────────────────────────
   The app went colourful (per-feature accents everywhere); the site follows.
   rgba tints work on both light and dark surfaces, so no dark overrides. */
:root {
    --a-indigo:#6366F1; --a-amber:#F59E0B; --a-emerald:#10B981;
    --a-pink:#EC4899;   --a-violet:#8B5CF6; --a-cyan:#06B6D4;
    --a-orange:#D97706; --a-teal:#0EA5A5;
}
.icon-badge.a-indigo  { background:rgba(99,102,241,.14);  color:var(--a-indigo); }
.icon-badge.a-amber   { background:rgba(245,158,11,.16);  color:var(--a-amber); }
.icon-badge.a-emerald { background:rgba(16,185,129,.14);  color:var(--a-emerald); }
.icon-badge.a-pink    { background:rgba(236,72,153,.13);  color:var(--a-pink); }
.icon-badge.a-violet  { background:rgba(139,92,246,.14);  color:var(--a-violet); }
.icon-badge.a-cyan    { background:rgba(6,182,212,.14);   color:var(--a-cyan); }
.icon-badge.a-orange  { background:rgba(217,119,6,.15);   color:var(--a-orange); }
.icon-badge.a-teal    { background:rgba(14,165,165,.14);  color:var(--a-teal); }

/* Feature card with a coloured hairline on top. */
.card--accent { position:relative; overflow:hidden; }
.card--accent::before { content:""; position:absolute; inset:0 0 auto 0; height:3px;
    background:var(--card-accent, var(--primary)); }
.card--accent.a-indigo  { --card-accent:var(--a-indigo); }
.card--accent.a-amber   { --card-accent:var(--a-amber); }
.card--accent.a-emerald { --card-accent:var(--a-emerald); }
.card--accent.a-pink    { --card-accent:var(--a-pink); }
.card--accent.a-violet  { --card-accent:var(--a-violet); }
.card--accent.a-cyan    { --card-accent:var(--a-cyan); }
.card--accent.a-orange  { --card-accent:var(--a-orange); }
.card--accent.a-teal    { --card-accent:var(--a-teal); }

/* Input-type chips ("Type a topic · PDF · Photo…"). */
.chip { display:inline-flex; align-items:center; gap:.4rem; padding:.34rem .8rem;
    border:1px solid var(--line); border-radius:999px; background:var(--surface);
    font-size:.78rem; font-weight:600; color:var(--ink-soft); }
.chip .dot { width:7px; height:7px; border-radius:50%; background:var(--chip-dot, var(--primary)); }
.chip.a-indigo  { --chip-dot:var(--a-indigo); }
.chip.a-amber   { --chip-dot:var(--a-amber); }
.chip.a-emerald { --chip-dot:var(--a-emerald); }
.chip.a-pink    { --chip-dot:var(--a-pink); }
.chip.a-violet  { --chip-dot:var(--a-violet); }
.chip.a-cyan    { --chip-dot:var(--a-cyan); }

/* Night hero — the app's dark identity, on the web. */
.hero-night { position:relative; overflow:hidden; border-radius:var(--r-lg);
    background:linear-gradient(160deg,#04181B 0%,#0B3B40 55%,#0E4A52 100%);
    color:#fff; padding:var(--s-7) var(--s-6); }
.hero-night h1, .hero-night h2 { color:#fff; }
.hero-night .lede { color:rgba(255,255,255,.78); }
.hero-night .glow { position:absolute; border-radius:50%; pointer-events:none; }
.hero-night .eyebrow { background:rgba(255,255,255,.12); color:#FFD54F; }
.pill-light { display:inline-flex; align-items:center; gap:.4rem;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
    border-radius:999px; padding:.32rem .75rem; font-size:.76rem; font-weight:600; color:#fff; }

/* Category tiles (Arena strip). */
.cat-tile { display:flex; align-items:center; gap:.5rem; padding:.5rem .8rem;
    border-radius:var(--r-sm); font-size:.8rem; font-weight:650;
    background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.14); }

/* ═══ v6: the fancy layer ═════════════════════════════════════════════════
   One colourful canvas behind every page, motion that respects
   prefers-reduced-motion, and a header that carries the full app name.
   Pure CSS over the existing hooks — no page markup changes needed beyond
   the brand stack in the layout. */

/* 1 ── Aurora canvas: every page sits on the same soft multi-colour wash. */
body {
    background:
        radial-gradient(1100px 540px at 12% -4%, rgba(14,165,165,.11), transparent 62%),
        radial-gradient(900px 500px at 88% -2%, rgba(99,102,241,.10), transparent 62%),
        radial-gradient(780px 500px at 82% 38%, rgba(245,158,11,.07), transparent 60%),
        radial-gradient(820px 540px at 4% 70%, rgba(236,72,153,.06), transparent 60%),
        radial-gradient(900px 560px at 90% 96%, rgba(6,182,212,.07), transparent 62%),
        linear-gradient(180deg, #F3FAFA 0%, #F7F7FD 48%, #FDF9F3 100%);
}

/* Two live blobs drifting behind the top of the page, inside a fixed
   full-viewport layer so nothing ever widens the page or creates a second
   scroll container (overflow-x on html/body silently breaks viewport
   scrolling — learned the hard way). */
.bg-blobs {
    position: fixed; inset: 0; z-index: -1;
    overflow: hidden; pointer-events: none;
}
.bg-blobs::before, .bg-blobs::after {
    content: ''; position: absolute; border-radius: 50%;
    filter: blur(70px);
}
.bg-blobs::before {
    width: 440px; height: 440px; top: -140px; left: -130px;
    background: radial-gradient(circle, rgba(14,165,165,.32), transparent 70%);
    animation: blob-a 18s ease-in-out infinite alternate;
}
.bg-blobs::after {
    width: 400px; height: 400px; top: -110px; right: -120px;
    background: radial-gradient(circle, rgba(99,102,241,.28), transparent 70%);
    animation: blob-b 22s ease-in-out infinite alternate;
}
@keyframes blob-a { to { transform: translate(70px, 50px) scale(1.18); } }
@keyframes blob-b { to { transform: translate(-60px, 70px) scale(1.12); } }

/* Alt sections become translucent panes so the wash glows through. */
.section--alt { background: rgba(255,255,255,.55); }

/* 2 ── Header: rainbow hairline, glassier bar, pill nav, full app name. */
.site-header { background: rgba(255,255,255,.72); }
.site-header::before {
    content: ''; display: block; height: 3px;
    background: linear-gradient(90deg,
        var(--a-teal), var(--a-cyan), var(--a-indigo), var(--a-violet),
        var(--a-pink), var(--a-amber), var(--a-emerald), var(--a-teal));
    background-size: 200% 100%;
    animation: rainbow-slide 14s linear infinite;
}
@keyframes rainbow-slide { to { background-position: -200% 0; } }

.brand-stack { display: flex; flex-direction: column; line-height: 1.12; }
.brand-name { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--ink); }
.brand-tag {
    font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    background: linear-gradient(90deg, var(--primary), var(--a-indigo) 55%, var(--a-pink));
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    white-space: nowrap;
}
.brand img { border-radius: 8px; }

.nav a:not(.btn) {
    padding: 7px 13px; border-radius: 999px;
    transition: background .15s ease, color .15s ease;
}
.nav a:not(.btn):hover { background: rgba(0,88,96,.07); }
.nav a.is-current {
    color: var(--primary); font-weight: 600;
    background: linear-gradient(120deg, rgba(14,165,165,.13), rgba(99,102,241,.12));
}

/* 3 ── Display headlines get a deep-teal→indigo gradient ink. */
.display {
    background: linear-gradient(118deg, var(--ink) 0%, var(--deep) 42%, var(--primary) 68%, var(--a-indigo) 105%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}
/* Dark heroes keep their white type — a dark gradient there would vanish. */
.hero-night .display, .hero-night h1 {
    background: linear-gradient(115deg, #fff 30%, #C8F5EE 70%, #C7D2FE 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}

/* 4 ── Buttons: gradient fill, lift on hover. */
.btn { transition: background .15s ease, border-color .15s ease, color .15s ease,
                   transform .18s ease, box-shadow .18s ease; }
.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, #0B4E58 55%, #3B4CC0 140%);
    box-shadow: 0 4px 16px rgba(0,88,96,.26);
}
.btn-primary:hover {
    background: linear-gradient(135deg, #006B75 0%, #0B4E58 55%, #4553C9 140%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,88,96,.32);
}
.btn-invert:hover, .btn-ghost:hover { transform: translateY(-2px); }

/* 5 ── Cards and chips come alive on hover. */
.card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card--accent:hover, .card--lift:hover, a.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--card-accent, var(--primary)) 16%, rgba(22,24,29,.06));
}
.icon-badge { transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.card:hover .icon-badge { transform: scale(1.12) rotate(-4deg); }
.chip { transition: transform .15s ease, box-shadow .15s ease; }
.chip:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(22,24,29,.08); }

/* 6 ── Reveal gains a stagger: children of a revealed grid rise in turn. */
.grid.reveal > * { opacity: 0; transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease; }
.grid.reveal.is-in > * { opacity: 1; transform: none; }
.grid.reveal.is-in > *:nth-child(1) { transition-delay: .04s; }
.grid.reveal.is-in > *:nth-child(2) { transition-delay: .11s; }
.grid.reveal.is-in > *:nth-child(3) { transition-delay: .18s; }
.grid.reveal.is-in > *:nth-child(4) { transition-delay: .25s; }
.grid.reveal.is-in > *:nth-child(5) { transition-delay: .32s; }
.grid.reveal.is-in > *:nth-child(6) { transition-delay: .39s; }
.grid.reveal.is-in > *:nth-child(7) { transition-delay: .46s; }
.grid.reveal.is-in > *:nth-child(8) { transition-delay: .53s; }

/* 7 ── Footer sits on frosted glass so the wash ends cleanly. */
.site-footer { background: rgba(255,255,255,.62); backdrop-filter: blur(8px); }

/* 8 ── Every animation bows out for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
    .bg-blobs::before, .bg-blobs::after, .site-header::before { animation: none; }
    .btn, .card, .chip, .icon-badge { transition: none; }
    .btn-primary:hover, .card--accent:hover, .card--lift:hover, a.card:hover,
    .chip:hover, .btn-invert:hover, .btn-ghost:hover { transform: none; }
    .grid.reveal > * { opacity: 1; transform: none; transition: none; }
}

/* 9 ── Dark scheme: same aurora, night sky. Without this the light wash
   above would override the dark tokens and paint light pages under light
   text. */
@media (prefers-color-scheme: dark) {
    body {
        background:
            radial-gradient(1100px 540px at 12% -4%, rgba(14,165,165,.13), transparent 62%),
            radial-gradient(900px 500px at 88% -2%, rgba(99,102,241,.13), transparent 62%),
            radial-gradient(780px 500px at 82% 38%, rgba(245,158,11,.06), transparent 60%),
            radial-gradient(820px 540px at 4% 70%, rgba(236,72,153,.06), transparent 60%),
            linear-gradient(180deg, #0C1114 0%, #0E1017 48%, #12100C 100%);
    }
    .bg-blobs::before { background: radial-gradient(circle, rgba(14,165,165,.16), transparent 70%); }
    .bg-blobs::after  { background: radial-gradient(circle, rgba(99,102,241,.15), transparent 70%); }
    .section--alt { background: rgba(20,24,31,.55); }
    .site-header { background: rgba(13,15,19,.72); }
    .site-footer { background: rgba(13,15,19,.6); }
    .nav a:not(.btn):hover { background: rgba(255,255,255,.07); }
    .nav a.is-current { background: linear-gradient(120deg, rgba(14,165,165,.18), rgba(99,102,241,.16)); }
    .display {
        background: linear-gradient(118deg, var(--ink) 0%, #9BE8DE 55%, #A5B4FC 105%);
        -webkit-background-clip: text; background-clip: text;
    }
    .brand-tag { background: linear-gradient(90deg, #5EEAD4, #A5B4FC 55%, #F9A8D4);
        -webkit-background-clip: text; background-clip: text; }
    .card--accent:hover, .card--lift:hover, a.card:hover {
        box-shadow: 0 14px 34px rgba(0,0,0,.5);
    }
}

/* ═══ v7: mobile header + menu ════════════════════════════════════════════
   The five-link nav plus the stacked brand name outgrew small screens: at
   phone widths the brand, button and burger collided. Everything below
   exists to make the same header breathe at 360px. */

@media (max-width: 860px) {
    .site-header .wrap { gap: var(--s-3); }
    .nav { gap: var(--s-3); }
}
@media (max-width: 520px) {
    .site-header .wrap { height: 56px; gap: var(--s-2); }
    .brand { gap: 7px; min-width: 0; }
    .brand img { height: 24px; }
    .brand-name { font-size: .95rem; }
    .brand-tag { font-size: .5rem; letter-spacing: .07em; }
    .nav { gap: var(--s-2); }
    .nav .btn-primary { padding: 8px 12px; font-size: .8125rem; }
}
@media (max-width: 350px) {
    /* Below this even the shrunk tag collides with the button — the wordmark
       alone carries the brand, the full name lives one tap away in the menu. */
    .brand-tag { display: none; }
}

/* The menu itself: grouped, colourful, with the CTA inside — a small command
   palette instead of a bare link list. */
.menu > summary {
    background: var(--surface);
    transition: border-color .15s ease, transform .15s ease;
}
.menu[open] > summary { border-color: var(--primary); color: var(--primary); }

.menu-panel {
    min-width: 232px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    padding: 8px;
    animation: menu-pop .18s ease;
}
@keyframes menu-pop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
.menu-label {
    padding: 10px 12px 3px;
    font-size: .625rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--faint);
}
.menu-label:first-child { padding-top: 4px; }
.menu-panel a { display: flex; align-items: center; gap: 9px; }
.menu-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--menu-dot, var(--primary));
    flex-shrink: 0;
}
.menu-dot.d-teal   { --menu-dot: var(--a-teal); }
.menu-dot.d-violet { --menu-dot: var(--a-violet); }
.menu-dot.d-amber  { --menu-dot: var(--a-amber); }
.menu-panel .menu-cta {
    margin-top: 10px;
    justify-content: center;
    color: #fff; font-weight: 600;
}
.menu-panel .menu-cta:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .menu-panel { animation: none; } }

/* ═══ v8: the library system ══════════════════════════════════════════════
   Category rails, richer kit cards, the Veda Bites strip, MCQ option pills
   and 3D flip flashcards for the public kit pages. */

/* Filter rails */
.lib-rail { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.lib-rail--sub { margin-top: calc(var(--s-2) * -1); }
.cat-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 999px;
    font-size: .875rem; font-weight: 550;
    color: var(--cat, var(--ink-soft));
    background: color-mix(in srgb, var(--cat, var(--muted)) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--cat, var(--muted)) 26%, transparent);
    transition: transform .15s ease, background .15s ease;
    text-decoration: none;
}
.cat-chip:hover { transform: translateY(-2px); text-decoration: none;
    background: color-mix(in srgb, var(--cat, var(--muted)) 16%, transparent); }
.cat-chip--on { background: var(--cat, var(--primary)); color: #fff;
    border-color: transparent; }
.cat-chip--on:hover { background: var(--cat, var(--primary)); color: #fff; }
.cat-count {
    font-size: .6875rem; font-weight: 700; padding: 1px 7px; border-radius: 999px;
    background: rgba(255,255,255,.55); color: inherit;
}
.cat-chip--on .cat-count { background: rgba(255,255,255,.22); color: #fff; }

/* Kit cards */
.kit-card { display: flex; flex-direction: column;
    border-top: 3px solid var(--card-accent, var(--primary)); }
.kit-type {
    font-size: .6875rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--card-accent, var(--primary));
}
.kit-inside { gap: 8px; }
.kit-inside span { font-size: .75rem; color: var(--muted); white-space: nowrap; }

/* Veda Bites strip — horizontal snap scroll of dark slide cards */
.bites-strip {
    display: flex; gap: var(--s-4);
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: var(--s-3);
    -webkit-overflow-scrolling: touch;
}
.bite-card {
    flex: 0 0 300px; scroll-snap-align: start;
    background: linear-gradient(150deg, #0B3B40 0%, #0E4A52 55%, #123A5C 120%);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--r-xl);
    padding: var(--s-5);
    color: rgba(255,255,255,.85);
}
.bite-type {
    display: inline-block; font-size: .6875rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: #FCD34D; background: rgba(252,211,77,.12);
    border-radius: 999px; padding: 3px 10px;
}
.bite-hook { font-size: .8125rem; color: #7DD3C8; font-weight: 600; margin-top: 6px; }
.bite-text { font-size: .875rem; line-height: 1.6; margin-top: var(--s-3); color: rgba(255,255,255,.78); }
.bite-text strong { color: #fff; }
.bite-takeaway {
    font-size: .8125rem; font-weight: 600; color: #C7D2FE;
    margin-top: var(--s-3); padding-top: var(--s-3);
    border-top: 1px solid rgba(255,255,255,.12);
}

/* MCQ options as labelled pills */
.mcq-opts { display: grid; gap: 8px; }
@media (min-width: 640px) { .mcq-opts { grid-template-columns: 1fr 1fr; } }
.mcq-opt {
    display: flex; align-items: baseline; gap: 8px;
    padding: 9px 12px; border-radius: var(--r-md);
    background: var(--bg-alt); border: 1px solid var(--line-soft);
    font-size: .875rem; color: var(--ink-soft);
}
.mcq-opt b { color: var(--primary); font-weight: 700; }

/* Flashcards that actually flip */
.flip {
    all: unset; box-sizing: border-box; cursor: pointer;
    perspective: 900px; min-height: 190px; display: block; width: 100%;
}
.flip:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--r-lg); }
.flip-inner {
    position: relative; display: block; width: 100%; height: 100%; min-height: 190px;
    transform-style: preserve-3d; transition: transform .55s cubic-bezier(.4,.1,.2,1);
}
.flip--on .flip-inner { transform: rotateY(180deg); }
.flip-face {
    position: absolute; inset: 0; backface-visibility: hidden;
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-3);
    border-radius: var(--r-lg); padding: var(--s-5);
}
.flip-front { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.flip-back {
    background: linear-gradient(150deg, var(--primary) 0%, #0B4E58 70%);
    color: #fff; transform: rotateY(180deg);
}
.flip-q { font-weight: 600; line-height: 1.45; }
.flip-a { font-size: .9375rem; line-height: 1.55; }
@media (prefers-reduced-motion: reduce) {
    .flip-inner { transition: none; }
    .cat-chip, .cat-chip:hover { transition: none; transform: none; }
}

/* ═══ v9: colourful article components ════════════════════════════════════
   Blog posts were plain running text — headings, paragraphs, lists. These
   give a post structure a reader can skim: tinted callouts, numbered step
   cards, takeaway panels and do/don't columns. Every class is opt-in from
   the post's own HTML, so old posts render exactly as before. */

/* Lead paragraph — the first line of a post carries more weight. */
.prose > p:first-of-type { font-size: 1.0625rem; color: var(--ink-soft); }

/* Section headings get a coloured tick instead of a grey rule. */
.prose h2 {
    border-top: 0; padding-top: 0;
    display: flex; align-items: baseline; gap: 10px;
}
.prose h2::before {
    content: ''; flex: 0 0 auto;
    width: 8px; height: 8px; border-radius: 3px;
    background: linear-gradient(135deg, var(--a-teal), var(--a-indigo));
    transform: translateY(-2px);
}

/* ── Callouts ─────────────────────────────────────────────────────────── */
.callout {
    --c: var(--a-teal);
    position: relative;
    margin: var(--s-5) 0;
    padding: var(--s-4) var(--s-5) var(--s-4) calc(var(--s-5) + 6px);
    border-radius: var(--r-lg);
    border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
    background: color-mix(in srgb, var(--c) 7%, var(--surface));
}
.callout::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    border-radius: var(--r-lg) 0 0 var(--r-lg); background: var(--c);
}
.callout p:last-child { margin-bottom: 0; }
.callout .callout-title {
    display: block; font-weight: 700; font-size: .8125rem;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--c); margin-bottom: 6px;
}
.callout.tip   { --c: var(--a-emerald); }
.callout.warn  { --c: var(--a-orange); }
.callout.note  { --c: var(--a-indigo); }
.callout.time  { --c: var(--a-violet); }
.callout.free  { --c: var(--a-teal); }

/* ── Numbered step cards ──────────────────────────────────────────────── */
.steps { list-style: none; margin: var(--s-5) 0; padding: 0; counter-reset: step; }
.steps > li {
    counter-increment: step;
    position: relative;
    margin-bottom: var(--s-3);
    padding: var(--s-4) var(--s-5) var(--s-4) 58px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
}
.steps > li::before {
    content: counter(step);
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: .8125rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--a-indigo));
}
.steps > li strong { display: block; margin-bottom: 2px; }

/* ── Takeaway panel ───────────────────────────────────────────────────── */
.takeaway {
    margin: var(--s-6) 0;
    padding: var(--s-5);
    border-radius: var(--r-xl);
    background: linear-gradient(150deg, #0B3B40 0%, #0E4A52 55%, #123A5C 120%);
    color: rgba(255,255,255,.85);
}
.takeaway h3, .takeaway strong { color: #fff; }
.takeaway .callout-title { color: #FCD34D; display: block; font-size: .8125rem;
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.takeaway p:last-child { margin-bottom: 0; }
.takeaway ul { margin-bottom: 0; }
.takeaway li { color: rgba(255,255,255,.82); }
.takeaway a { color: #7DD3C8; }

/* ── Do / don't columns ───────────────────────────────────────────────── */
.vs { display: grid; gap: var(--s-4); margin: var(--s-5) 0; }
@media (min-width: 700px) { .vs { grid-template-columns: 1fr 1fr; } }
.vs > div { padding: var(--s-4); border-radius: var(--r-lg); border: 1px solid var(--line); }
.vs .vs-old { background: color-mix(in srgb, var(--a-orange) 6%, var(--surface));
              border-color: color-mix(in srgb, var(--a-orange) 26%, transparent); }
.vs .vs-new { background: color-mix(in srgb, var(--a-emerald) 6%, var(--surface));
              border-color: color-mix(in srgb, var(--a-emerald) 26%, transparent); }
.vs h4 { font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 8px; }
.vs .vs-old h4 { color: var(--a-orange); }
.vs .vs-new h4 { color: var(--a-emerald); }
.vs ul { margin: 0 0 0 var(--s-4); }
.vs li:last-child { margin-bottom: 0; }

/* ── Feature pills inside a post ──────────────────────────────────────── */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s-4) 0 var(--s-5); }
.pills span {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px; border-radius: 999px;
    font-size: .8125rem; font-weight: 550;
    background: var(--bg-alt); border: 1px solid var(--line);
    color: var(--ink-soft);
}

/* Tables get a tinted header so long comparisons stay readable. */
.prose thead th {
    background: color-mix(in srgb, var(--primary) 7%, transparent);
    color: var(--ink); font-weight: 600;
}
.prose tbody tr:hover { background: var(--bg-alt); }

/* ── Topic index (/learn) ─────────────────────────────────────────────── */
.topic-letter {
    font-size: 1.5rem; font-weight: 700; margin-bottom: var(--s-4);
    background: linear-gradient(120deg, var(--primary), var(--a-indigo));
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}
.topic-letter::before { content: none; }
.topic-grid { display: grid; gap: var(--s-2); grid-template-columns: 1fr; }
@media (min-width: 620px) { .topic-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .topic-grid { grid-template-columns: repeat(3, 1fr); } }
.topic-link {
    display: flex; flex-direction: column; gap: 2px;
    padding: 11px 14px; border-radius: var(--r-md);
    border: 1px solid var(--line-soft); background: var(--surface);
    color: var(--ink); text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.topic-link:hover {
    text-decoration: none; transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}
.topic-name { font-size: .9375rem; font-weight: 550; line-height: 1.35; }
.topic-kit { font-size: var(--t-tiny); color: var(--faint); }
@media (prefers-reduced-motion: reduce) { .topic-link:hover { transform: none; } }