/* =========================================================
   BrandVerita — legal pages stylesheet
   Extracted from the inline <style> block so privacy-policy,
   terms and refund-policy share one cached file.
   ========================================================= */

:root, [data-theme="light"] {
    --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-lg:   clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
    --text-xl:   clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
    --text-2xl:  clamp(2rem, 1.2rem + 2.5vw, 3rem);

    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    --color-bg:            #f7f6f2;
    --color-surface:       #faf9f6;
    --color-surface-2:     #f1efe9;
    --color-border:        #d8d4cb;
    --color-divider:       #e2ddd4;
    --color-text:          #26231d;
    --color-text-muted:    #706d66;
    --color-text-faint:    #aca79d;
    --color-text-inverse:  #f8f7f4;
    --color-primary:       #0d6771;
    --color-primary-hover: #0b5058;
    --color-primary-soft:  #dbe7e6;
    --color-warning:       #8b4b18;
    --color-error:         #912f5d;

    --shadow-sm: 0 1px 2px oklch(0.2 0.01 80 / 0.06);
    --shadow-md: 0 12px 28px oklch(0.2 0.01 80 / 0.08);

    --radius-sm:   0.5rem;
    --radius-md:   0.75rem;
    --radius-lg:   1rem;
    --radius-xl:   1.25rem;
    --radius-full: 9999px;   /* was referenced but never defined */

    --content: 920px;

    --font-body:    'Instrument Sans', 'Inter', system-ui, sans-serif;
    --font-display: 'Merriweather', Georgia, serif;

    --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* ---------------------------------------------------------
   Dark theme.
   Also adds color-scheme so native form controls, scrollbars
   and the browser UI follow the theme.
   --------------------------------------------------------- */

[data-theme="dark"] {
    color-scheme: dark;

    --color-bg:            #171614;
    --color-surface:       #1d1b19;
    --color-surface-2:     #24221f;
    --color-border:        #3a3733;
    --color-divider:       #2b2824;
    --color-text:          #d5d2cc;
    --color-text-muted:    #a4a097;
    --color-text-faint:    #7a766e;
    --color-text-inverse:  #1b1917;
    --color-primary:       #64a7af;
    --color-primary-hover: #4b939b;
    --color-primary-soft:  #263537;
    --color-warning:       #d18b4a;
    --color-error:         #db6ea2;

    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.18);
    --shadow-md: 0 18px 36px oklch(0 0 0 / 0.3);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;

        --color-bg:            #171614;
        --color-surface:       #1d1b19;
        --color-surface-2:     #24221f;
        --color-border:        #3a3733;
        --color-divider:       #2b2824;
        --color-text:          #d5d2cc;
        --color-text-muted:    #a4a097;
        --color-text-faint:    #7a766e;
        --color-text-inverse:  #1b1917;
        --color-primary:       #64a7af;
        --color-primary-hover: #4b939b;
        --color-primary-soft:  #263537;
        --color-warning:       #d18b4a;
        --color-error:         #db6ea2;

        --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.18);
        --shadow-md: 0 18px 36px oklch(0 0 0 / 0.3);
    }
}


/* =========================
   Base
========================= */

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

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

body {
    min-height: 100dvh;

    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.65;

    color: var(--color-text);

    background:
        radial-gradient(
            circle at top right,
            color-mix(in oklab, var(--color-primary) 10%, transparent),
            transparent 24%
        ),
        var(--color-bg);
}

img, svg {
    display: block;
    max-width: 100%;
}

button, input, textarea, select {
    font: inherit;
    color: inherit;
}

a {
    color: var(--color-primary);
    text-underline-offset: 0.18em;

    transition:
        color var(--transition-interactive),
        background var(--transition-interactive),
        border-color var(--transition-interactive),
        box-shadow var(--transition-interactive);
}

a:hover {
    color: var(--color-primary-hover);
}

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


/* =========================
   Skip link
========================= */

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -3rem;

    padding: var(--space-3) var(--space-4);

    color: var(--color-text-inverse);
    background: var(--color-primary);

    border-radius: var(--radius-sm);

    z-index: 20;
}

.skip-link:focus {
    top: var(--space-4);
}


/* =========================
   Shell & topbar
========================= */

.page-shell {
    width: min(calc(100% - 2rem), 1120px);
    margin: 0 auto;
    padding: var(--space-6) 0 var(--space-16);
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);

    margin-bottom: var(--space-8);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);

    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
}

.brand-mark {
    width: 2.5rem;
    height: 2.5rem;

    display: grid;
    place-items: center;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            var(--color-primary),
            color-mix(in oklab, var(--color-primary) 72%, white)
        );

    border-radius: 0.8rem;
    box-shadow: var(--shadow-sm);
}

.brand-mark svg {
    width: 1.35rem;
    height: 1.35rem;
}

.theme-toggle {
    min-width: 44px;
    min-height: 44px;

    display: inline-grid;
    place-items: center;

    color: var(--color-text);
    background: var(--color-surface);

    border:
        1px solid color-mix(in oklab, var(--color-text) 12%, transparent);
    border-radius: var(--radius-full);

    box-shadow: var(--shadow-sm);

    cursor: pointer;
}


/* =========================
   Shared card surfaces
========================= */

.hero,
.toc,
.legal-card {
    background:
        color-mix(in oklab, var(--color-surface) 94%, transparent);

    border:
        1px solid color-mix(in oklab, var(--color-text) 10%, transparent);

    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-md);

    backdrop-filter: blur(8px);
}


/* =========================
   Hero
========================= */

.hero {
    padding: clamp(var(--space-6), 5vw, var(--space-12));
    margin-bottom: var(--space-8);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);

    margin-bottom: var(--space-4);
    padding: var(--space-2) var(--space-3);

    color: var(--color-primary);
    background: var(--color-primary-soft);

    border-radius: var(--radius-full);

    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

h1 {
    /* was max-width: 14ch, which broke a 7-word title onto 5 cramped lines */
    max-width: 34ch;

    margin-bottom: var(--space-4);

    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.lede {
    max-width: 68ch;
    margin-bottom: var(--space-6);

    color: var(--color-text-muted);
}

.meta-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
}

.meta-item {
    padding: var(--space-4);

    background: var(--color-surface-2);

    border:
        1px solid color-mix(in oklab, var(--color-text) 8%, transparent);
    border-radius: var(--radius-lg);
}

.meta-label {
    display: block;

    margin-bottom: var(--space-1);

    color: var(--color-text-muted);

    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}


/* =========================
   Layout: TOC + document
========================= */

.grid {
    display: grid;
    grid-template-columns:
        minmax(0, 260px) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.toc {
    position: sticky;
    top: var(--space-4);

    /* keeps a long contents list scrollable instead of overflowing tall pages */
    max-height: calc(100dvh - var(--space-8));
    overflow-y: auto;

    padding: var(--space-5);
}

.toc h2 {
    margin-bottom: var(--space-4);

    color: var(--color-text-muted);

    font-size: var(--text-sm);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.toc ol {
    list-style: none;
    display: grid;
    gap: var(--space-2);
}

.toc a {
    display: block;

    padding: var(--space-2) var(--space-3);

    color: var(--color-text-muted);

    border-radius: var(--radius-md);

    text-decoration: none;
}

.toc a:hover,
.toc a:focus-visible {
    color: var(--color-text);
    background: var(--color-surface-2);
}


/* =========================
   The legal document
========================= */

.legal-card {
    padding: clamp(var(--space-6), 4vw, var(--space-10));

    /* content-visibility without an intrinsic size estimate makes the
       scrollbar jump and can land in-page anchors in the wrong place */
    content-visibility: auto;
    contain-intrinsic-size: auto 8000px;
}

.legal-card section + section {
    margin-top: var(--space-8);
    padding-top: var(--space-8);

    border-top: 1px solid var(--color-divider);
}

.legal-card h2 {
    margin-bottom: var(--space-4);

    font-family: var(--font-display);
    font-size: var(--text-xl);

    scroll-margin-top: var(--space-8);
}

.legal-card p {
    max-width: 72ch;
}

.legal-card p + p,
.legal-card ul + p,
.legal-card p + ul,
.legal-card ul + ul {
    margin-top: var(--space-4);
}

.legal-card ul {
    padding-left: 1.2rem;
    color: var(--color-text-muted);
}

.legal-card li + li {
    margin-top: var(--space-2);
}

.updated {
    display: block;

    margin-bottom: var(--space-6);

    color: var(--color-text-muted);

    font-size: var(--text-sm);
}


/* =========================
   Callout
========================= */

.callout {
    margin-top: var(--space-4);
    padding: var(--space-4);

    background:
        color-mix(in oklab, var(--color-warning) 10%, var(--color-surface));

    border:
        1px solid color-mix(in oklab, var(--color-warning) 22%, transparent);
    border-radius: var(--radius-lg);
}

.callout strong {
    color: var(--color-text);
}


/* =========================
   Contact details
   Replaces the old .placeholder style, which rendered real
   legal details in a dashed monospace box that read as an
   unfilled template.
========================= */

.legal-card address {
    font-style: normal;
}

.contact-detail {
    font-weight: 600;
    color: var(--color-text);
}


/* =========================
   Footer
========================= */

.site-footer {
    margin-top: var(--space-8);

    color: var(--color-text-muted);

    font-size: var(--text-sm);
    text-align: center;
}

.site-footer nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-4);

    margin-bottom: var(--space-3);
}


/* =========================
   Responsive
========================= */

@media (max-width: 920px) {
    .grid {
        grid-template-columns: 1fr;
    }

    .toc {
        position: static;
        max-height: none;
    }

    .toc ol {
        grid-template-columns:
            repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 640px) {
    .page-shell {
        width: min(calc(100% - 1rem), 1120px);
        padding-top: var(--space-4);
    }

    .hero,
    .toc,
    .legal-card {
        border-radius: var(--radius-lg);
    }

    .meta-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}