/* ==========================================================================
   Burp Baby: the public pages (landing, privacy, terms, support)

   One stylesheet, no build step, no external font, no script. It is served
   under the app's Content-Security-Policy (see .htaccess), which allows
   same-origin styles and images and nothing else, and it is deliberately NOT
   app.css: a visitor to the front page should not download the app's 5,000
   lines, and the app should not be able to restyle the front page by accident.

   It borrows the app's design language (tokens, accents, radii) so the page
   looks like the product. The tokens are the app's own values (assets/css/
   app.css §1) with the semantic names kept, so the two can be compared side
   by side.

   Light and dark come from the visitor's system (prefers-color-scheme), the
   same way the app's "Auto" theme does. Every token is declared in :root and
   re-pointed once in the dark media block; nothing below names a raw colour.

   Contents
     1. Tokens                 2. Base                   3. Layout
     4. Header                 5. Buttons                6. Hero + phone frame
     7. Sections               8. Questions              9. Features
    10. Gallery               11. Pledges               12. Plans
    13. Steps                 14. FAQ                   15. Footer
    16. Documents (legal, support)                      17. Motion and print
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    --paper:       #FBFAF9;
    --paper-2:     #F2EFEB;
    --surface:     #FFFFFF;
    --surface-2:   #F4F2EF;
    --ink:         #16182A;
    --ink-soft:    #4C5068;
    --line:        rgba(22, 24, 42, 0.10);
    --line-2:      rgba(22, 24, 42, 0.17);
    --header-bg:   rgba(251, 250, 249, 0.86);

    /* The product's colour. #6867E0 carries white at 4.58:1; the darker link
       indigo carries itself on the paper at 6:1 for body-size text. */
    --brand:       #6867E0;
    --brand-ink:   #FFFFFF;
    --brand-soft:  rgba(108, 107, 232, 0.13);
    --link:        #4F4ED0;
    --focus:       #3B3AB8;
    /* The primary button on hover. A brightness filter LIGHTENS the indigo and
       takes white text on it from 4.56:1 to 4.14:1; a darker indigo keeps it
       above 5:1 (white on #5F5ED8 is 5.15:1). */
    --brand-hover: #5F5ED8;

    --ok:          #1E9E6A;
    --warn-s:      rgba(217, 134, 42, 0.18);

    /* The gradient of the app icon, indigo to rose (assets/images/make-icons.js). */
    --grad-from:   #6C6BE8;
    --grad-to:     #EC6A8C;

    /* The app's tracker accents, light set (app.css §1). */
    --c-feeding:     #F59E42;
    --c-diaper:      #3FBF9F;
    --c-sleep:       #6C6BE8;
    --c-medicine:    #EC6A8C;
    --c-temperature: #DC4C4C;
    --c-growth:      #57A773;
    --c-vaccine:     #4A90D9;
    --c-bath:        #2AA9C4;
    --c-labor:       #A15CC4;

    --shadow-1: 0 1px 2px rgba(16, 18, 34, 0.05), 0 6px 16px -8px rgba(16, 18, 34, 0.14);
    --shadow-2: 0 2px 5px rgba(16, 18, 34, 0.06), 0 18px 40px -18px rgba(16, 18, 34, 0.24);
    --shadow-phone: 0 2px 6px rgba(16, 18, 34, 0.12), 0 30px 60px -24px rgba(34, 30, 90, 0.45);
    --bezel:       #1B1C27;
    --bezel-ring:  rgba(255, 255, 255, 0);

    --r-sm: 14px;
    --r:    18px;
    --r-lg: 24px;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto,
            "Helvetica Neue", Arial, sans-serif;

    --header-h: 60px;
    --gutter: clamp(16px, 4vw, 32px);

    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper:       #101018;
        --paper-2:     #14141E;
        --surface:     #1A1A24;
        --surface-2:   #23232F;
        --ink:         #E7E6EE;
        --ink-soft:    #A7A7BC;
        --line:        rgba(255, 255, 255, 0.075);
        --line-2:      rgba(255, 255, 255, 0.145);
        --header-bg:   rgba(16, 16, 24, 0.82);

        /* The app's dark brand lifts and takes near-black ink, because white
           falls off a lifted indigo (app.css §1, "the ink on a filled brand
           button"). */
        --brand:       #7B7AD8;
        --brand-ink:   #0B0B12;
        --brand-soft:  rgba(123, 122, 216, 0.19);
        --link:        #A9A8F2;
        --focus:       #B8B7FF;
        /* Near-black ink on a lifted indigo: 5.81:1 (5.25:1 at rest). */
        --brand-hover: #8281E5;

        --ok:          #3BB584;
        --warn-s:      rgba(223, 163, 81, 0.2);

        --c-feeding:     #E29456;
        --c-diaper:      #45AE97;
        --c-sleep:       #7B7AD8;
        --c-medicine:    #DD7691;
        --c-temperature: #E8706F;
        --c-growth:      #68B382;
        --c-vaccine:     #609BD6;
        --c-bath:        #51B2C8;
        --c-labor:       #B37ECE;

        --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 20px -10px rgba(0, 0, 0, 0.65);
        --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.50), 0 22px 46px -20px rgba(0, 0, 0, 0.80);
        --shadow-phone: 0 2px 6px rgba(0, 0, 0, 0.5), 0 30px 60px -24px rgba(0, 0, 0, 0.9);
        --bezel:       #2B2C3A;
        --bezel-ring:  rgba(255, 255, 255, 0.14);
    }
}


/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }

a { color: var(--link); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

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

.skip {
    position: absolute;
    left: 12px;
    top: -100px;
    z-index: 100;
    padding: 12px 18px;
    border-radius: var(--r-sm);
    background: var(--ink);
    color: var(--paper);
    font-weight: 700;
    text-decoration: none;
}
.skip:focus { top: 12px; }

.icon { width: 1.25em; height: 1.25em; flex: none; }


/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
}
/* The FAQ reads best at a shorter measure, but it keeps the page's own left
   edge: only its contents are narrowed, not the container. */
.wrap--narrow > .faq,
.wrap--narrow > .more-link { max-width: 800px; }

.section { padding-block: clamp(48px, 8vw, 92px); }
.section--tint {
    background: var(--paper-2);
    border-block: 1px solid var(--line);
}

h2 {
    max-width: 22em;
    font-size: clamp(1.625rem, 1.15rem + 1.8vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.section-lede {
    max-width: 40em;
    margin-top: 14px;
    color: var(--ink-soft);
    font-size: 1.125rem;
}


/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    padding-top: env(safe-area-inset-top);
    background: var(--header-bg);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid var(--line);
}
/* The bar WRAPS instead of overflowing: with the visitor's text size raised
   (Android font scale, a larger browser default) the name, the language link and
   the button no longer fit on one line, and a row that cannot wrap puts "Get
   started" off the edge of the screen (WCAG 1.4.4 and 1.4.10). At the default
   size nothing wraps and the bar is one row, 60px high. */
.site-header__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 4px;
    row-gap: 4px;
    min-height: var(--header-h);
}
@media (min-width: 540px) {
    .site-header__bar { column-gap: 12px; }
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--ink);
    font-weight: 800;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
    text-decoration: none;
}
.brand__mark { border-radius: 9px; box-shadow: var(--shadow-1); }
.brand__name { white-space: nowrap; }

.site-nav { display: none; gap: 4px; margin-left: 12px; }
.site-nav a {
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--ink-soft);
    font-weight: 600;
    text-decoration: none;
}
.site-nav a:hover { background: var(--surface-2); color: var(--ink); }

.site-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-left: auto;
}
.lang-switch {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 10px;
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
}
.lang-switch:hover { background: var(--surface-2); color: var(--ink); }

/* Two classes, not one: .btn (section 5) sets display later in the file and
   would otherwise win over a single-class rule here. */
.site-header .site-header__signin { display: none; }

.site-header .btn,
.lang-switch { white-space: nowrap; }

@media (min-width: 540px) {
    .site-header .site-header__signin { display: inline-flex; }
}
/* 60em, not 880px: the Spanish links ("Qué hace", "Preguntas") need about 930px
   beside the brand and the buttons, and an em query also moves with the visitor's
   default font size, which a px one does not. 60em is 960px at the default. */
@media (min-width: 60em) {
    .site-nav { display: flex; }
}

/* The narrowest phones: the mark alone stands for the brand, so the language
   switch and the one button still fit on a 320px line. The name stays in the
   page for screen readers and for the link's accessible name. */
@media (max-width: 359px) {
    .site-header .brand__name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}


/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.16s ease, filter 0.16s ease, transform 0.16s ease;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: scale(0.98); }

.btn--primary {
    border-color: transparent;
    background: var(--brand);
    color: var(--brand-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 18px -10px rgba(16, 18, 34, 0.55);
}
.btn--primary:hover { background: var(--brand-hover); filter: none; }

.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--surface-2); }

.btn--quiet {
    border-color: transparent;
    background: transparent;
    color: var(--ink-soft);
}
.btn--quiet:hover { background: var(--surface-2); color: var(--ink); }

.btn--sm { min-height: 44px; padding: 0 14px; font-size: 0.9375rem; }
.btn--lg { min-height: 54px; padding: 0 26px; font-size: 1.0625rem; }


/* --------------------------------------------------------------------------
   6. Hero and the phone frame
   -------------------------------------------------------------------------- */
.hero {
    padding-block: clamp(28px, 6vw, 84px) clamp(40px, 7vw, 92px);
    background:
        radial-gradient(60% 55% at 85% 20%, rgba(236, 106, 140, 0.16), transparent 70%),
        radial-gradient(55% 60% at 10% 0%, rgba(108, 107, 232, 0.17), transparent 70%);
    overflow-x: clip;
}
.hero__grid {
    display: grid;
    /* minmax(0, 1fr), not the implicit auto track: an auto track is as wide as its
       widest unbreakable word, so at a 300% text size on a 320px phone a long word
       in the (Spanish) headline pushed the whole column past the screen. */
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(32px, 6vw, 64px);
    align-items: center;
}
.hero__copy { overflow-wrap: anywhere; }
.eyebrow {
    margin-bottom: 14px;
    color: var(--link);
    font-size: 0.9375rem;
    font-weight: 700;
}
.hero h1 {
    max-width: 14em;
    font-size: clamp(2.125rem, 1.2rem + 3.8vw, 3.75rem);
    font-weight: 800;
    line-height: 1.07;
    letter-spacing: -0.028em;
    text-wrap: balance;
}
.lede {
    max-width: 36em;
    margin-top: 20px;
    color: var(--ink-soft);
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    line-height: 1.55;
}
.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 26px;
    padding: 0;
    list-style: none;
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 0.9375rem;
}
.checks li { display: inline-flex; align-items: center; gap: 8px; }
.checks .icon { color: var(--ok); }

.hero__art { display: flex; justify-content: center; }

@media (min-width: 900px) {
    .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

/* The frame. The picture inside is a REAL screenshot of the app (rendered from
   the test rig's fixtures, see tools/pwtest/landing-shots.js); the bezel, the
   island and the shadow are CSS. */
.phone {
    position: relative;
    width: min(280px, 100%);
    margin-inline: auto;
    padding: 9px;
    border-radius: 42px;
    background: var(--bezel);
    box-shadow: 0 0 0 1px var(--bezel-ring), var(--shadow-phone);
}
.phone::before {
    content: "";
    position: absolute;
    top: 19px;
    left: 50%;
    z-index: 2;
    width: 25%;
    height: 7px;
    border-radius: 999px;
    background: #000;
    transform: translateX(-50%);
}
.phone img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 520 / 1126;
    border-radius: 33px;
    background: var(--paper);
}


/* --------------------------------------------------------------------------
   7. Sections: problem, trust, links
   -------------------------------------------------------------------------- */
.more-link { margin-top: 28px; font-weight: 700; }
.more-link a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }

.questions {
    display: grid;
    gap: 16px;
    margin-top: 32px;
    padding: 0;
    list-style: none;
}
@media (min-width: 820px) {
    .questions { grid-template-columns: repeat(3, 1fr); }
}
.question {
    position: relative;
    padding: 22px 22px 22px 26px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}
.question::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--grad-from), var(--grad-to));
}
.question__q { font-size: 1.1875rem; font-weight: 750; line-height: 1.3; letter-spacing: -0.01em; }
.question__a { margin-top: 10px; color: var(--ink-soft); }


/* --------------------------------------------------------------------------
   8. Features
   -------------------------------------------------------------------------- */
.group-title {
    margin-top: clamp(36px, 5vw, 56px);
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.015em;
}
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: 16px;
    margin-top: 18px;
    padding: 0;
    list-style: none;
}
.feature {
    --accent: var(--brand);
    --accent-soft: var(--brand-soft);
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}
.feature__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--accent-soft);
    color: var(--accent);
}
.feature__icon .icon { width: 26px; height: 26px; }
.feature__title { margin-top: 14px; font-size: 1.0625rem; font-weight: 750; letter-spacing: -0.01em; }
.feature__text { margin-top: 6px; color: var(--ink-soft); font-size: 0.96875rem; line-height: 1.55; }

.feature[data-accent="feeding"]     { --accent: var(--c-feeding);     --accent-soft: rgba(245, 158, 66, 0.15); }
.feature[data-accent="diaper"]      { --accent: var(--c-diaper);      --accent-soft: rgba(63, 191, 159, 0.15); }
.feature[data-accent="sleep"]       { --accent: var(--c-sleep);       --accent-soft: rgba(108, 107, 232, 0.14); }
.feature[data-accent="medicine"]    { --accent: var(--c-medicine);    --accent-soft: rgba(236, 106, 140, 0.14); }
.feature[data-accent="temperature"] { --accent: var(--c-temperature); --accent-soft: rgba(220, 76, 76, 0.13); }
.feature[data-accent="growth"]      { --accent: var(--c-growth);      --accent-soft: rgba(87, 167, 115, 0.16); }
.feature[data-accent="vaccine"]     { --accent: var(--c-vaccine);     --accent-soft: rgba(74, 144, 217, 0.14); }
.feature[data-accent="bath"]        { --accent: var(--c-bath);        --accent-soft: rgba(42, 169, 196, 0.15); }
.feature[data-accent="labor"]       { --accent: var(--c-labor);       --accent-soft: rgba(161, 92, 196, 0.14); }

/* Darker strokes in the light theme: the pastel accents are for the tints,
   and a glyph in amber on pale amber would be hard to see. */
@supports (color: color-mix(in srgb, red, blue)) {
    .feature__icon { color: color-mix(in srgb, var(--accent) 72%, var(--ink)); }
}
@media (prefers-color-scheme: dark) {
    .feature[data-accent] .feature__icon { color: var(--accent); }
}


/* --------------------------------------------------------------------------
   9. Gallery of screens
   -------------------------------------------------------------------------- */
.gallery {
    margin-top: 36px;
    margin-inline: calc(-1 * var(--gutter));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.gallery__list {
    display: flex;
    gap: 22px;
    width: max-content;
    margin: 0;
    padding: 10px var(--gutter) 28px;
    list-style: none;
}
.gallery__item {
    flex: none;
    width: min(250px, 68vw);
    scroll-snap-align: center;
}
.gallery figcaption {
    margin-top: 16px;
    color: var(--ink-soft);
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: center;
}
@media (min-width: 1000px) {
    .gallery { margin-inline: 0; overflow: visible; }
    .gallery__list {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 28px;
        width: auto;
        padding: 10px 0 0;
    }
    .gallery__item { width: auto; }
}


/* --------------------------------------------------------------------------
   10. Pledges (safety and privacy)
   -------------------------------------------------------------------------- */
.pledges {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 32px;
    padding: 0;
    list-style: none;
}
@media (min-width: 720px) {
    .pledges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pledge {
    overflow-wrap: anywhere;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}
.pledge__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--brand-soft);
    color: var(--link);
}
.pledge__icon .icon { width: 26px; height: 26px; }
.pledge__title { margin-top: 14px; font-size: 1.1875rem; font-weight: 750; letter-spacing: -0.01em; }
.pledge p:last-child { margin-top: 8px; color: var(--ink-soft); }


/* --------------------------------------------------------------------------
   11. Plans
   -------------------------------------------------------------------------- */
.plans {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 32px;
}
@media (min-width: 720px) {
    .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.plan {
    overflow-wrap: anywhere;
    padding: 26px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}
.plan--plus {
    border-color: transparent;
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        linear-gradient(135deg, var(--grad-from), var(--grad-to)) border-box;
    border: 2px solid transparent;
}
.plan__badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--link);
    font-size: 0.8125rem;
    font-weight: 750;
}
.plan__title { margin-top: 14px; font-size: 1.625rem; font-weight: 800; letter-spacing: -0.02em; }
.plan p:not(.plan__badge) { margin-top: 10px; color: var(--ink-soft); }
.plan__price { color: var(--ink) !important; font-size: 1.25rem; font-weight: 800; }
.plan__list { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.plan__list li { display: flex; gap: 10px; align-items: flex-start; }
.plan__list .icon { margin-top: 0.15em; color: var(--ok); }


/* --------------------------------------------------------------------------
   12. Steps
   -------------------------------------------------------------------------- */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 16px;
    margin-top: 32px;
    padding: 0;
    list-style: none;
    counter-reset: step;
}
.step {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}
.step::before {
    counter-increment: step;
    content: counter(step);
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--brand-ink);
    font-weight: 800;
}
.step__title { margin-top: 14px; font-size: 1.125rem; font-weight: 750; letter-spacing: -0.01em; }
.step p { margin-top: 8px; color: var(--ink-soft); }

.app-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    color: var(--ink-soft);
    font-weight: 600;
}
.app-note .icon { color: var(--link); }


/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.faq { margin-top: 28px; border-top: 1px solid var(--line-2); }
.faq__item { border-bottom: 1px solid var(--line-2); }
.faq__item summary {
    position: relative;
    display: block;
    min-height: 44px;
    padding: 18px 40px 18px 0;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    cursor: pointer;
    list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--ink-soft);
    border-bottom: 2px solid var(--ink-soft);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.18s ease;
}
.faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__item p { padding: 0 0 20px; color: var(--ink-soft); max-width: 42em; }


/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    padding-block: 48px calc(32px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--surface);
}
.site-footer__grid {
    display: grid;
    gap: 28px;
}
@media (min-width: 760px) {
    .site-footer__grid { grid-template-columns: 1.2fr 1.4fr 1fr; align-items: start; }
}
.site-footer__brand p { margin-top: 10px; color: var(--ink-soft); }
.site-footer__nav { display: grid; gap: 4px; }
.site-footer__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.site-footer__nav a:hover { text-decoration: underline; }
.site-footer__lang { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--ink-soft); font-weight: 600; }
.site-footer__lang a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__lang [aria-current] { color: var(--ink); }
.site-footer__fine { margin-top: 20px; color: var(--ink-soft); font-size: 0.875rem; max-width: 52em; }
.site-footer__grid + .site-footer__fine { margin-top: 32px; }


/* --------------------------------------------------------------------------
   15. Documents: privacy, terms, support
   -------------------------------------------------------------------------- */
.doc { padding-block: clamp(32px, 6vw, 72px) clamp(48px, 8vw, 96px); }
.doc h1 {
    max-width: 20em;
    font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
.doc__meta { margin-top: 12px; color: var(--ink-soft); font-weight: 600; }
.doc__lede { max-width: 40em; margin-top: 18px; color: var(--ink-soft); font-size: 1.1875rem; }
.doc__back { margin-bottom: 22px; font-weight: 700; }
.doc__back a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.doc__back .icon { transform: scaleX(-1); }

.doc__body { max-width: 44rem; margin-top: 32px; font-size: 1.0625rem; line-height: 1.7; }
.doc__body h2 {
    max-width: none;
    margin-top: 2.2em;
    font-size: 1.5rem;
    letter-spacing: -0.015em;
}
.doc__body h3 { margin-top: 1.6em; font-size: 1.125rem; font-weight: 750; }
.doc__body p, .doc__body ul, .doc__body ol, .doc__body dl { margin-top: 0.9em; }
.doc__body ul, .doc__body ol { padding-left: 1.3em; }
.doc__body li { margin-top: 0.4em; }
.doc__body dt { margin-top: 0.9em; font-weight: 750; }
.doc__body dd { margin: 0.2em 0 0; color: var(--ink-soft); }

.toc {
    max-width: 44rem;
    margin-top: 32px;
    padding: 20px 24px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
}
.toc h2 { margin: 0; font-size: 1.0625rem; letter-spacing: 0; }
.toc ol { margin: 10px 0 0; padding-left: 1.3em; columns: 2 220px; column-gap: 32px; }
.toc li { margin-top: 0.3em; break-inside: avoid; }

.notice {
    max-width: 44rem;
    margin-top: 28px;
    padding: 18px 22px;
    border: 1px solid var(--line-2);
    border-left: 5px solid var(--c-temperature);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-weight: 600;
}
/* The English-only note sits ABOVE the page title on the Spanish legal pages, so
   it needs room below it as well as above (it was touching the h1). */
.notice--note { border-left-color: var(--brand); margin-bottom: 28px; }

/* A value the operator has not filled in yet. Visible on purpose: an unfilled
   [TBD] must never be mistaken for a real answer. */
.tbd {
    padding: 0 6px;
    border-radius: 6px;
    background: var(--warn-s);
    font-weight: 700;
}

.contact-card {
    max-width: 44rem;
    margin-top: 40px;
    padding: 26px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}
.contact-card h2 { margin: 0; max-width: none; font-size: 1.375rem; }
.contact-card p { margin-top: 10px; color: var(--ink-soft); }
.contact-card .btn { margin-top: 18px; }
.contact-card address { margin-top: 10px; font-style: normal; white-space: pre-line; }

.doc .faq { max-width: 44rem; }


/* --------------------------------------------------------------------------
   16. Motion and print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

@media (forced-colors: active) {
    .btn { border: 1px solid ButtonText; }
    .phone { border: 1px solid CanvasText; }
}

@media print {
    /* Paper is light whatever the screen was. A browser that keeps
       prefers-color-scheme: dark while printing would otherwise print pale grey
       text on a dark panel, so the light tokens are restated here, after the dark
       block, where they win. (The dark screenshots in <picture> still print dark.) */
    :root {
        color-scheme: light;
        --paper:       #FFFFFF;
        --paper-2:     #FFFFFF;
        --surface:     #FFFFFF;
        --surface-2:   #FFFFFF;
        --ink:         #000000;
        --ink-soft:    #333333;
        --line:        rgba(0, 0, 0, 0.25);
        --line-2:      rgba(0, 0, 0, 0.35);
        --header-bg:   #FFFFFF;
        --brand:       #4F4ED0;
        --brand-ink:   #FFFFFF;
        --brand-soft:  rgba(108, 107, 232, 0.13);
        --link:        #3B3AB8;
        --shadow-1:    none;
        --shadow-2:    none;
        --shadow-phone: none;
        --bezel:       #1B1C27;
        --bezel-ring:  rgba(255, 255, 255, 0);
    }
    .site-header, .site-footer__nav, .site-footer__lang, .skip, .doc__back { display: none; }
    body { background: #fff; color: #000; }
    .doc__body { max-width: none; }
    a { color: inherit; }

    /* The screenshots scroll sideways on a phone and would be cut off at the
       edge of the paper: print them all, wrapped, and keep a phone in one piece. */
    .gallery { overflow: visible; margin-inline: 0; }
    .gallery__list { width: auto; flex-wrap: wrap; }
    .gallery__item { break-inside: avoid; }
}