@charset "UTF-8";

/* ==========================================================================
   Power of the Word — components.

   Loaded after base.css, which defines every token this file consumes and
   carries the full sourcing notes (HIG type ramp, colour roles, grouping,
   contrast and motion). See that file first.
   ========================================================================== */


/* --------------------------------------------------------------------------
   5. Top bar — sticky, translucent (vibrancy-style)
   -------------------------------------------------------------------------- */

.bar {
    position: sticky;
    top: 0;
    z-index: 50;
    /* Solid fallback first; the translucent wash only applies where
       backdrop-filter actually works. */
    background-color: var(--bar-solid);
    border-bottom: 1px solid var(--separator);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bar {
        background-color: var(--bar);
        /* saturate + blur is the system material's recipe: content behind the
           bar stays legible as colour, not as detail. */
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
    }
}

.bar__inner {
    min-height: var(--bar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Brand: icon + wordmark. A link on every page, including the one it points
   at, so the bar behaves the same everywhere. */
.bar__brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--text);
    font-size: var(--subheadline);
    font-weight: 600;
    line-height: var(--lh-ui);
    letter-spacing: -0.01em;
}

.bar__mark {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 22.5%;
    /* Defines the icon's edge where the artwork meets a light bar. */
    box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.08);
}

.bar__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar__nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
}

.bar__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
    padding-inline: 10px;
    color: var(--subtext);
    font-size: var(--subheadline);
    font-weight: 500;
    line-height: var(--lh-ui);
    border-radius: 8px;
    transition: color var(--duration-fast) var(--ease-fast);
}

.bar__link:hover {
    color: var(--text);
}

/* The current page is marked, not merely coloured — colour is never the only
   channel (DS §4.1, HIG-COL-01). aria-current carries it to assistive tech.
   With a near-monochrome accent the mark is weight plus the primary label
   colour, which is exactly the text-led hierarchy the accent asks for. */
.bar__link[aria-current="page"] {
    color: var(--text);
    font-weight: 600;
}


/* --------------------------------------------------------------------------
   6. Page header
   -------------------------------------------------------------------------- */

.page-header {
    padding-block: 40px 8px;
    text-align: center;
}

.page-header--doc {
    text-align: start;
    padding-block: 32px 8px;
}

/* The icon and the only warm thing on the page: a soft glow sampled from the
   artwork's own gold/rose. It is scoped to this wrapper, so it exists in the
   hero and nowhere else. Decorative — `glow-tint`'s peak is composited into
   the contrast gate, and the copy over it still clears 4.5:1. */
.page-header__mark {
    position: relative;
    width: max-content;
    margin: 0 auto 20px;
    isolation: isolate;
}

.page-header__mark::before {
    content: "";
    position: absolute;
    /* A halo three times the mark, so the warmth reads past the icon's own
       edge rather than hiding underneath it. */
    inset: -100%;
    border-radius: 50%;
    /* Two-stop fallback first, for anything without color-mix(). */
    background: radial-gradient(circle closest-side,
            var(--glow-tint) 0%,
            transparent 72%);
    background: radial-gradient(circle closest-side,
            var(--glow-tint) 0%,
            color-mix(in srgb, var(--glow-tint) 45%, transparent) 40%,
            transparent 72%);
    pointer-events: none;
    z-index: 0;
}

/* The app's icon, at the HIG's app-icon proportions. */
.app-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto;
    border-radius: 22.5%;
    box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.08), var(--shadow-section);
    position: relative;
    z-index: 1;
}

h1 {
    font-size: var(--large-title);
    line-height: var(--lh-large-title);
    font-weight: 700;
    letter-spacing: -0.021em;
    color: var(--text);
    /* Large Title is 34pt; it does not need a wide column. */
    text-wrap: balance;
}

/* The one-sentence description of the app (id="app-description"). One
   element, one sentence: `title3` is the HIG step below the Large Title, so
   the hero is a two-step type hierarchy and nothing else. */
.page-header__lede {
    max-width: 44ch;
    margin: 12px auto 0;
    font-size: var(--title3);
    line-height: 1.4;
    font-weight: 400;
    color: var(--subtext);
    text-wrap: pretty;
}

.page-header__meta {
    margin-top: 10px;
    font-size: var(--footnote);
    line-height: var(--lh-footnote);
    color: var(--subtext);
}

.page-header__meta strong {
    font-weight: 600;
    color: var(--subtext);
}


/* --------------------------------------------------------------------------
   7. Grouped sections — the backbone (DS §2.6, §5.2)
   -------------------------------------------------------------------------- */

/* A section is a header sitting *outside* a filled, rounded container. The
   fill and the radius are the boundary: a grouped section gets no border
   (DS §4.3). */
.group {
    margin-top: var(--section-gap);
}

/* A standalone heading introducing a section: `title3`, primary label colour
   (DS §3.2). Indented by the row padding so it lines up with the row text
   below it (DS §2.6 diagram).

   Title case, never all-caps: iOS 26 renders section headers in title-style
   capitalisation regardless of what you supply, and all-caps at a small size
   is also a contrast squeeze. No letter-spacing either — the face adjusts its
   own tracking at every size (DS §3.2). */
.group__header {
    padding-inline: var(--row-padding);
    padding-bottom: 8px;
    /* DS §2.3 layout.headerGap */
    font-size: var(--title3);
    line-height: var(--lh-title3);
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--text);
}

.group__body {
    background-color: var(--card);
    border-radius: var(--radius-group);
    box-shadow: var(--shadow-section);
    /* Clips the first/last row's own corners to the container's. */
    overflow: hidden;
}

/* A prose section: running copy rather than rows. */
.group__body--prose {
    padding: var(--row-padding);
}

.group__body--prose>*+* {
    margin-top: 12px;
}

.group__body--prose p {
    font-size: var(--body);
    line-height: var(--lh-prose);
    color: var(--text);
}

.group__body--prose p.muted {
    color: var(--subtext);
    font-size: var(--subheadline);
}

/* A second container in the same section — a lead-in paragraph above its own
   row list. The gap keeps them two containers rather than one box inside
   another (DS §4.2: never a fourth tier). */
.group__body--continued {
    margin-top: 8px;
}

/* A footer note under a section, mirroring the header. */
.group__footer {
    padding: 8px var(--row-padding) 0;
    font-size: var(--footnote);
    line-height: var(--lh-footnote);
    color: var(--subtext);
}


/* --------------------------------------------------------------------------
   8. Rows
   -------------------------------------------------------------------------- */

/* Rows are separated by a hairline inset to the text edge, and the last row
   of a section has no separator (DS §5.2). Implemented with a top border on
   every row but the first, which gets both of those for free. */
.row {
    padding: 10px var(--row-padding);
    /* DS §5.2 ItemTopSpace/ItemBottomSpace */
    min-height: var(--touch-target);
    /* minHeight, never height (DS §3.3) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.row+.row {
    border-top: 1px solid var(--separator);
}

.row__title {
    font-size: var(--body);
    line-height: var(--lh-ui);
    font-weight: 400;
    color: var(--text);
}

/* A row whose title is the emphasised lead-in of a sentence. */
.row__title strong,
.row__title>b {
    font-weight: 600;
}

.row__subtitle {
    font-size: var(--subheadline);
    line-height: var(--lh-prose);
    color: var(--subtext);
}

/* A row that carries a whole short paragraph: title over body copy. Used for
   the policy's choice list and the question list. */
.row--stacked {
    gap: 4px;
    padding-block: 14px;
}

.row--stacked .row__title {
    font-size: var(--headline);
    font-weight: 600;
    line-height: var(--lh-ui);
}

.row--stacked p {
    font-size: var(--subheadline);
    line-height: var(--lh-prose);
    color: var(--subtext);
}

.row--stacked p+p {
    margin-top: 10px;
}

/* A plain bulleted statement row — "What we do not do". Rows carry the
   structure, so no bullet glyph is needed. */
.row--statement {
    font-size: var(--body);
    line-height: var(--lh-prose);
    color: var(--text);
    display: block;
}


/* --------------------------------------------------------------------------
   9. Links in copy
   -------------------------------------------------------------------------- */

/* An inline link in running text is underlined: it must be identifiable
   without relying on colour (HIG-COL-01). */
.link {
    color: var(--primary);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--duration-fast) var(--ease-fast);
}

.link:hover {
    color: var(--primary-alt);
}


/* --------------------------------------------------------------------------
   10. Buttons
   -------------------------------------------------------------------------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--touch-target);
    padding: 11px 20px;
    font-size: var(--body);
    /* A button label is `body` at medium weight (DS §3.2). */
    font-weight: 500;
    line-height: var(--lh-ui);
    border-radius: var(--radius-control);
    transition: background-color var(--duration-fast) var(--ease-fast),
        color var(--duration-fast) var(--ease-fast);
}

.button--filled {
    background-color: var(--primary);
    color: var(--text-on-primary);
    box-shadow: var(--shadow-button);
}

.button--filled:hover {
    background-color: var(--primary-alt);
}

/* A quiet action — a neutral fill plus a hairline. With a near-monochrome
   accent there is no coloured wash to lean on, so the boundary does the work:
   `control-edge` clears 3:1 against both `bg` and `card`, in both modes, which
   is what a control's edge needs (WCAG 1.4.11, DS §4.9). The label is the
   primary label colour, not the accent. */
.button--quiet {
    background-color: var(--quiet-fill);
    color: var(--text);
    border: 1px solid var(--control-edge);
    /* Keeps a quiet and a filled button the same height side by side. */
    padding-block: 10px;
}

.button--quiet:hover {
    background-color: var(--card);
}

.button__glyph {
    width: 20px;
    height: 20px;
    flex: none;
    /* The glyph's weight matches the adjacent text's (DS §7.2, HIG-TYP-12). */
    stroke-width: 1.75;
}

/* A button stack. One column at 320px, side by side once there is room. */
.actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.actions .button {
    width: 100%;
}

@media (min-width: 30rem) {
    .actions--split {
        flex-direction: row;
    }

    .actions--split .button {
        flex: 1 1 0;
    }
}


/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.footer {
    padding-block: 24px 40px;
    border-top: 1px solid var(--separator);
    margin-top: 8px;
}

.footer__text {
    font-size: var(--footnote);
    line-height: var(--lh-footnote);
    color: var(--subtext);
    text-align: center;
}

.footer__nav {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 8px;
    font-size: var(--footnote);
}


/* --------------------------------------------------------------------------
   12. 404
   -------------------------------------------------------------------------- */

.notfound {
    padding-block: 64px 40px;
    text-align: center;
}

/* No glow here — the warm halo is the hero's, and only the hero's. */
.notfound .app-icon {
    margin-bottom: 20px;
}

.notfound__code {
    font-size: var(--footnote);
    line-height: var(--lh-footnote);
    font-weight: 600;
    color: var(--subtext);
}

.notfound__body {
    margin-top: 12px;
    font-size: var(--callout);
    line-height: var(--lh-prose);
    color: var(--subtext);
}

.notfound .actions {
    margin-top: 28px;
    text-align: start;
}


/* --------------------------------------------------------------------------
   13. Medium and up (DS §2.3: margins go 16 → 24)
   -------------------------------------------------------------------------- */

@media (min-width: 37.5rem) {
    :root {
        --gutter: 24px;
    }

    .page-header {
        padding-block: 56px 8px;
    }

    .app-icon {
        width: 88px;
        height: 88px;
    }
}


/* --------------------------------------------------------------------------
   14. Reduced motion
   -------------------------------------------------------------------------- */

/* Motion here is only ever press/hover feedback, but Reduce Motion still
   removes it (DS §6.6). The skip link keeps a transition-free jump so it is
   still reachable. */
@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;
    }
}


/* --------------------------------------------------------------------------
   15. Print — people print privacy policies
   -------------------------------------------------------------------------- */

@media print {

    /* Black on white, no chrome, no ink-wasting fills. */
    :root {
        --bg: #FFFFFF;
        --card: #FFFFFF;
        --elevated: #FFFFFF;
        --quiet-fill: #FFFFFF;
        --control-edge: #999999;
        --glow-tint: transparent;
        --text: #000000;
        --subtext: #000000;
        --separator: #999999;
        --border: #999999;
        --primary: #000000;
        --primary-alt: #000000;
        --shadow-section: none;
        --shadow-button: none;
    }

    body {
        background-color: #FFFFFF;
        color: #000000;
        font-size: 11pt;
        line-height: 1.45;
    }

    .bar,
    .footer__nav,
    .skip-link,
    .app-icon,
    .actions {
        display: none !important;
    }

    .group__body {
        box-shadow: none;
        border-radius: 0;
        padding-inline: 0;
    }

    .group__body--prose {
        padding: 0;
    }

    .row {
        padding-inline: 0;
    }

    .row+.row {
        border-top: 1px solid #CCCCCC;
    }

    .wrap {
        max-width: none;
        padding-inline: 0;
    }

    /* Keep each clause intact, and never strand a heading at the foot of a
       page. Deliberately NOT applied to `.group`: a section such as "What we
       collect" is taller than a sheet, and `break-inside: avoid` on it pushes
       the whole section to the next page, leaving most of the previous one
       blank. Rows are short enough to hold together. */
    .row {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .group__header,
    .row__title,
    h1 {
        break-after: avoid;
        page-break-after: avoid;
    }

    /* A printed page loses hrefs; print the destination of a real link. */
    .link[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
    }

    .link[href^="mailto:"]::after {
        content: "";
    }
}