/* Shared shell for the legal and support pages. Same tokens and type as the
   landing page, set for long-form reading rather than for a pitch. */
:root {
    --cream: #fff6e5;
    --surface: #ffffff;
    --ink: #1c1917;
    --ink-soft: #44403c;
    --ink-faint: #8a7f70;
    --rule: #e8dcc6;
    --amber: #f7a837;
    --amber-deep: #e08900;
    --amber-soft: #ffe9c4;
}
@media (prefers-color-scheme: dark) {
    :root {
        --cream: #17130d;
        --surface: #221c14;
        --ink: #fdf6e9;
        --ink-soft: #d6c9b4;
        --ink-faint: #9c8f7c;
        --rule: #372f23;
        --amber: #ffb347;
        --amber-deep: #ffc978;
        --amber-soft: #3a2b12;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: 48rem; margin-inline: auto; padding-inline: 22px; }

.topbar {
    border-block-end: 1px solid var(--rule);
    padding-block: 16px;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--ink);
    font-family: "Bricolage Grotesque", Roboto, sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: .02em;
}
.topbar nav { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .92rem; }
.topbar nav a { color: var(--ink-soft); text-decoration: none; }
.topbar nav a:hover, .topbar nav a[aria-current="page"] { color: var(--ink); }
.topbar nav a[aria-current="page"] { font-weight: 700; }

main { padding-block: clamp(38px, 6vw, 68px) clamp(50px, 8vw, 90px); }

h1 {
    font-family: "Bricolage Grotesque", Roboto, sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
    letter-spacing: -.025em;
    line-height: 1.08;
    margin: 0 0 10px;
    text-wrap: balance;
}
.updated { color: var(--ink-faint); font-size: .88rem; margin: 0 0 32px; }

h2 {
    font-family: "Bricolage Grotesque", Roboto, sans-serif;
    font-weight: 700;
    font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem);
    letter-spacing: -.015em;
    line-height: 1.25;
    margin: 38px 0 10px;
    text-wrap: balance;
}
h3 {
    font-family: "Bricolage Grotesque", Roboto, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    margin: 24px 0 6px;
}
p, li { color: var(--ink-soft); }
p { margin: 0 0 14px; }
ul, ol { margin: 0 0 16px; padding-inline-start: 22px; }
li { margin-block-end: 7px; }
strong { color: var(--ink); }
a { color: var(--amber-deep); }
a:hover { color: var(--ink); }

.lede { font-size: 1.09rem; color: var(--ink-soft); }

.card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 16px;
    padding: 20px 22px;
    margin-block: 22px;
}
.card p:last-child, .card ul:last-child { margin-block-end: 0; }

.toc {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 16px;
    padding: 18px 22px;
    margin-block-end: 34px;
}
.toc h2 { margin: 0 0 8px; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-deep); }
.toc ol { margin: 0; padding-inline-start: 20px; }
.toc a { color: var(--ink-soft); text-decoration: none; }
.toc a:hover { color: var(--ink); text-decoration: underline; }

table { width: 100%; border-collapse: collapse; margin-block: 16px 22px; font-size: .95rem; }
th, td { text-align: start; padding: 11px 12px; border-block-end: 1px solid var(--rule); vertical-align: top; }
th { color: var(--ink); font-weight: 700; }
td { color: var(--ink-soft); }
.table-scroll { overflow-x: auto; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--amber);
    color: #1c1917;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 20px -8px rgba(224, 137, 0, .7);
}
.btn:hover { color: #1c1917; transform: translateY(-2px); }

footer {
    border-block-start: 1px solid var(--rule);
    padding-block: 30px 42px;
    color: var(--ink-faint);
    font-size: .9rem;
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: space-between; align-items: center; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer a { color: var(--ink-faint); text-decoration: none; }
footer a:hover { color: var(--ink); }

:where(a, button):focus-visible { outline: 3px solid var(--amber-deep); outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------------- FAQ accordions ----------------
   Native <details>, so it works with no JS: keyboard operable, findable by
   the browser's own in-page search, and open by default if scripting fails. */

.faq { margin-block-start: 34px; }
.faq h2 { margin-block-end: 12px; }

.qa {
    border-block-end: 1px solid var(--rule);
}
.faq .qa:first-of-type { border-block-start: 1px solid var(--rule); }

.qa summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 2px;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.45;
    transition: color .18s ease-out;
}
/* the default disclosure triangle, removed in both engines */
.qa summary::-webkit-details-marker { display: none; }
.qa summary::marker { content: ""; }
.qa summary:hover { color: var(--amber-deep); }
.qa summary:focus-visible {
    outline: 3px solid var(--amber-deep);
    outline-offset: 2px;
    border-radius: 6px;
}

/* a plus that becomes a minus, drawn rather than a glyph so it stays crisp */
.qa-mark {
    position: relative;
    width: 18px;
    height: 18px;
    flex: none;
    margin-block-start: 3px;
}
.qa-mark::before,
.qa-mark::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 13px;
    height: 2px;
    border-radius: 2px;
    background: var(--amber-deep);
    translate: -50% -50%;
    transition: transform .22s ease-out, opacity .22s ease-out;
}
.qa-mark::after { transform: rotate(90deg); }
.qa[open] .qa-mark::after { transform: rotate(0deg); opacity: 0; }

.qa-body {
    padding: 0 2px 18px;
    max-width: 62ch;
}
.qa-body p { margin: 0; }
.qa-body p + p { margin-block-start: 10px; }

@media (prefers-reduced-motion: reduce) {
    .qa-mark::before, .qa-mark::after { transition: none; }
}

/* ---------------- emergency numbers table ---------------- */

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.en-search { margin-block: 14px 6px; }
.en-search input {
    width: 100%;
    max-width: 22rem;
    padding: 11px 15px;
    border-radius: 999px;
    border: 1.5px solid var(--rule);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: .95rem;
}
.en-search input::placeholder { color: var(--ink-faint); }
.en-search input:focus-visible {
    outline: 3px solid var(--amber-deep);
    outline-offset: 2px;
    border-color: var(--amber);
}

.en-table { font-variant-numeric: tabular-nums; }
.en-table th[scope="col"] {
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: 700;
}
.en-table th[scope="row"] {
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
}
.en-table td { color: var(--ink-soft); }
.en-table tbody tr:hover th[scope="row"],
.en-table tbody tr:hover td { background: var(--surface); }

/* a secondary line: the per-service numbers behind a general one */
.en-note {
    font-size: .88rem;
    color: var(--ink-faint);
}
td .en-note { display: inline; }

.en-empty {
    color: var(--ink-faint);
    font-size: .93rem;
    margin-block-start: 14px;
}

/* ---------------- embedded mode (?app=1) ----------------
   Opened inside the app's web view, which supplies its own chrome. The site
   header and footer would duplicate it, and the footer links would strand the
   reader inside the web view. */
:root[data-embed] .topbar,
:root[data-embed] footer { display: none; }
:root[data-embed] main { padding-block-start: clamp(24px, 4vw, 40px); }