/* =============================================================================
   ImproveCV pre-launch legal documents
   =============================================================================
   Shared by waitlist-privacy.html and waitlist-terms.html. Self-contained on
   purpose, exactly like waitlist.css: these pages are served while the rest of
   the site is gated, so styles.css is NOT reachable and the palette below is
   copied from waitlist.css. Keep the two in sync if the brand palette moves.

   Deliberately NOT built on waitlist.css. That file exists to hold the score
   page to one screen with no scrollbar, and every size there derives from --u,
   a unit clamped against the viewport. A legal document has the opposite job:
   it is long, it scrolls, and its type has to stay readable at a fixed size no
   matter how tall the window is. So the sizes here are plain pixels.

   These pages link back to the waitlist and to each other, and NOWHERE else.
   Before launch the rest of the site is gated, so any link into it would just
   bounce the reader back to the waitlist, which reads as a broken page.
   ========================================================================== */

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

:root {
    /* Brand — dark palette, from waitlist.css */
    --brand: #38bdf8;
    --brand-deep: #0ea5e9;
    --brand-08: rgba(56, 189, 248, 0.08);
    --brand-30: rgba(56, 189, 248, 0.30);

    /* Surfaces */
    --bg-page: #22242b;
    --bg-card: #282c33;
    --bg-tile: #32363e;

    /* Text */
    --text: #f7f9fc;
    --text-2: #ccd5e0;
    --text-3: #b3bdc9;
    --text-4: #828c9b;

    /* Lines */
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.14);

    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --radius: 10px;
    --radius-lg: 16px;

    /* One gutter, shared by the bar, the document and the footer. */
    --wl-gutter: 24px;
}

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

body {
    font-family: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-page);
    color: var(--text-2);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ── Top bar ──────────────────────────────────────────────────────────────
   Mirrors .wl-top on the waitlist: the logo on the left, a quiet marker on
   the right. The logo is a link, but only ever back to the waitlist. */
.wll-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px var(--wl-gutter);
    border-bottom: 1px solid var(--line);
}

.wll-logo { display: inline-flex; align-items: center; }
.wll-logo img { height: 26px; width: auto; display: block; }

.wll-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-3);
    text-decoration: none;
    padding: 7px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    transition: color 0.16s var(--ease-out),
                border-color 0.16s var(--ease-out),
                background-color 0.16s var(--ease-out),
                transform 0.16s var(--ease-out);
}
.wll-back:hover { color: var(--text); border-color: var(--brand-30); background: var(--brand-08); }
.wll-back:active { transform: scale(0.97); }
.wll-back:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.wll-back svg { flex: none; }

/* ── Document ─────────────────────────────────────────────────────────── */
.wll-doc {
    max-width: 760px;
    margin: 0 auto;
    padding: 56px var(--wl-gutter) 72px;
}

.wll-title {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text);
}

.wll-updated {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-4);
}

/* The scope note. Every one of these documents covers the pre-launch page and
   nothing else, and saying so up front is the whole point of them existing
   separately from privacy.html / terms.html.

   NO coloured rule down the side. A blue bar on the edge of a grey box is a
   callout cliché and reads cheap on a legal page. This note earns its place by
   sitting first and being set a size up from the body, not by being tinted. */
.wll-scope {
    margin-top: 28px;
    padding: 22px 24px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--text-2);
}
.wll-scope strong { color: var(--text); font-weight: 600; }

.wll-doc h2 {
    margin: 44px 0 14px;
    font-size: 20px;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--text);
}

.wll-doc h3 {
    margin: 28px 0 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.wll-doc p { margin: 0 0 14px; }
.wll-doc p:last-child { margin-bottom: 0; }

.wll-doc ul { margin: 0 0 16px; padding-left: 20px; }
.wll-doc li { margin-bottom: 9px; padding-left: 4px; }
.wll-doc li::marker { color: var(--text-4); }
.wll-doc li:last-child { margin-bottom: 0; }

.wll-doc strong { color: var(--text); font-weight: 600; }

.wll-doc a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color 0.16s var(--ease-out);
}
.wll-doc a:hover { color: var(--text); }
.wll-doc a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }

/* A boxed block for the things a reader scans for rather than reads: the exact
   fields we store, the contact addresses. */
.wll-card {
    margin: 0 0 16px;
    padding: 18px 20px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.wll-card p { margin: 0 0 8px; font-size: 15px; }
.wll-card p:last-child { margin-bottom: 0; }
.wll-card ul { margin: 0; }

/* Key/value rows for "what we store" and "who processes what". */
.wll-rows { display: grid; gap: 12px; }
.wll-row { display: grid; grid-template-columns: 190px 1fr; gap: 8px 18px; align-items: start; }
.wll-row dt { font-size: 14px; font-weight: 600; color: var(--text); }
.wll-row dd { font-size: 15px; color: var(--text-2); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.wll-foot {
    border-top: 1px solid var(--line);
    padding: 22px var(--wl-gutter) 32px;
    text-align: center;
    font-size: 13px;
    color: var(--text-4);
}
.wll-foot a {
    color: var(--text-3);
    text-decoration: none;
    transition: color 0.16s var(--ease-out);
}
.wll-foot a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.wll-foot a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }

/* ── Narrow ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    :root { --wl-gutter: 18px; }
    body { font-size: 15px; }
    .wll-doc { padding-top: 40px; }
    .wll-title { font-size: 27px; }
    .wll-scope { padding: 18px 18px; font-size: 15.5px; }
    .wll-doc h2 { font-size: 18px; margin-top: 36px; }
    /* Two columns of 190px + text do not fit; stack the label over its value. */
    .wll-row { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}