/* ==========================================================================
   page-legal.css — policies, terms, disclosures, the policy index and contact
   ==========================================================================
   Rewritten light, to match the homepage. It previously used the application's
   dark tokens, which meant somebody reading your refund policy went from a
   light marketing site to a dark document and back — and a signed-in visitor
   saw a third variation with the app rail beside it.

   These are PUBLIC documents. One look for everyone, independent of app.css so
   a change made for the application cannot alter them.

   WHAT THESE PAGES ARE FOR
   Nobody browses a refund policy. They arrive with one question and want the
   paragraph that answers it. So this is set for SCANNING and then READING:
   a real measure, generous line-height, numbered sections with anchors, and a
   contents block at the top.
   ========================================================================== */

.legal-page {
    --l-bg:      #FFFFFF;
    --l-bg-2:    #F7F8F7;
    --l-line:    #E3E6E4;
    --l-line-2:  #CFD4D1;
    --l-ink:     #12171A;
    --l-ink-2:   #4E585E;
    --l-ink-3:   #7C868C;
    --l-accent:  #2F6FDB;
    --l-accent-2:#2563C9;

    margin: 0;
    background: var(--l-bg);
    color: var(--l-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.legal-page *, .legal-page *::before, .legal-page *::after { box-sizing: border-box; }
html { overflow-x: hidden; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.legal-hero {
    padding: clamp(48px, 8vw, 88px) 0 clamp(32px, 5vw, 52px);
    border-bottom: 1px solid var(--l-line);
}
.legal-hero .container { max-width: 1080px; margin: 0 auto; padding: 0 32px; }

.legal-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--l-bg-2);
    color: var(--l-ink-2);
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.legal-title {
    margin: 0 0 14px;
    max-width: 22ch;
    font-size: clamp(32px, 5vw, 50px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.035em;
    color: var(--l-ink);
}

.legal-lede {
    margin: 0 0 20px;
    max-width: 68ch;
    font-size: clamp(15px, 1.6vw, 17px);
    line-height: 1.6;
    color: var(--l-ink-2);
}

/* The date is the first thing a lawyer or a careful reader looks for. */
.legal-updated {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--l-ink-3);
}
.legal-updated b { color: var(--l-ink-2); font-weight: 600; }

/* --------------------------------------------------------------------------
   Body — contents rail beside the text
   -------------------------------------------------------------------------- */

.legal-body {
    /* ONE centred reading column. The first version put the contents in a
       sticky rail beside the text; on a wide screen that rail followed you down
       the page and read as clutter rather than help. Contents is now a compact
       block at the top — there when you arrive looking for a clause, gone once
       you start reading. */
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 48px) 32px clamp(56px, 8vw, 96px);
}

.legal-toc {
    margin: 0 0 clamp(32px, 5vw, 48px);
    padding: 18px 20px;
    border: 1px solid var(--l-line);
    border-radius: 12px;
    background: var(--l-bg);
}
.legal-toc h2 {
    margin: 0 0 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--l-ink-3);
}
.legal-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: toc;
    columns: 2;
    column-gap: 40px;
}
.legal-toc li { counter-increment: toc; break-inside: avoid; }
.legal-toc a {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 8px;
    padding: 5px 6px;
    border-radius: 7px;
    color: var(--l-ink-2);
    text-decoration: none;
    font-size: 13.5px;
    line-height: 1.4;
}
.legal-toc a::before {
    content: counter(toc);
    color: var(--l-ink-3);
    font-variant-numeric: tabular-nums;
}
.legal-toc a:hover { background: var(--l-bg-2); color: var(--l-ink); }

.legal-content { min-width: 0; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.legal-section {
    padding-top: 8px;
    margin-bottom: clamp(32px, 4vw, 48px);
    counter-increment: legal;
    scroll-margin-top: 24px;   /* so an anchor does not land under the top edge */
}
.legal-content { counter-reset: legal; }

.legal-section > h2 {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 12px;
    margin: 0 0 14px;
    font-size: clamp(18px, 2.2vw, 22px);
    font-weight: 680;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--l-ink);
}
/* The number is generated, so sections can be reordered without renumbering
   anything by hand — and it gives support something to quote. */
.legal-section > h2::before {
    content: counter(legal);
    font-size: 12px;
    font-weight: 700;
    color: var(--l-ink-3);
    font-variant-numeric: tabular-nums;
    padding-top: 4px;
}

.legal-section h3 {
    margin: 26px 0 8px;
    font-size: 15px;
    font-weight: 650;
    color: var(--l-ink);
}

/* The COLUMN is wide so the page does not look like a strip; the MEASURE is
   held here instead, so lines stay at a readable ~74 characters however wide
   the window gets. Headings, the contents block and tables use the full width. */
.legal-section p,
.legal-section li {
    max-width: 74ch;
    font-size: 15.5px;
    line-height: 1.72;
    color: var(--l-ink-2);
}
.legal-section p { margin: 0 0 15px; }
.legal-section p:last-child { margin-bottom: 0; }

.legal-section ul,
.legal-section ol { margin: 0 0 15px; padding-left: 20px; }
.legal-section li { margin-bottom: 7px; }
.legal-section li::marker { color: var(--l-ink-3); }

.legal-section a { color: var(--l-ink); text-decoration: underline; text-underline-offset: 2px; }
.legal-section a:hover { text-decoration-thickness: 2px; }

.legal-section strong { color: var(--l-ink); font-weight: 620; }

/* A pulled-out block for the sentence that actually matters in a section —
   the refund window, the notice period. */
.legal-callout {
    margin: 0 0 15px;
    padding: 14px 16px;
    border-left: 2px solid var(--l-ink-3);
    border-radius: 0 10px 10px 0;
    background: var(--l-bg-2);
}
.legal-callout p:last-child { margin-bottom: 0; }

.legal-table-wrap { overflow-x: auto; margin: 0 0 15px; }
.legal-section table { width: 100%; border-collapse: collapse; font-size: 14px; }
.legal-section th,
.legal-section td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--l-line);
    color: var(--l-ink-2);
    vertical-align: top;
}
.legal-section th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--l-ink-3);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Footer note + accessibility helpers
   -------------------------------------------------------------------------- */

.legal-foot-note {
    margin-top: clamp(40px, 6vw, 64px);
    padding-top: 20px;
    border-top: 1px solid var(--l-line);
    font-size: 13px;
    line-height: 1.65;
    color: var(--l-ink-3);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 10px 16px;
    background: var(--l-accent);
    color: #fff;
    border-radius: 0 0 10px 0;
    font-weight: 650;
}
.skip-link:focus { left: 0; }

.noscript-notice {
    padding: 12px 16px;
    background: #FFF7E8;
    color: #8A5A00;
    font-size: 13px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 56px);
    align-items: start;
}

.contact-methods { display: flex; flex-direction: column; gap: 10px; }
.contact-method {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--l-line);
    border-radius: 12px;
    background: var(--l-bg);
    text-decoration: none;
    color: inherit;
}
.contact-method:hover { border-color: var(--l-ink-3); }
.contact-method-icon {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--l-bg-2);
    color: var(--l-ink-2);
    font-size: 14px;
}
.contact-method-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--l-ink-3);
}
.contact-method-value {
    display: block;
    margin-top: 2px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--l-ink);
    overflow-wrap: anywhere;
}

.contact-form {
    padding: clamp(20px, 3vw, 28px);
    border: 1px solid var(--l-line);
    border-radius: 14px;
    background: var(--l-bg);
}
.contact-field { margin-bottom: 16px; }
.contact-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--l-ink-2);
}
.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--l-line-2);
    border-radius: 10px;
    background: var(--l-bg-2);
    color: var(--l-ink);
    font: inherit;
    font-size: 14.5px;
}
.contact-field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    outline: none;
    border-color: var(--l-ink-3);
}
.contact-field .hint { margin: 6px 0 0; font-size: 12px; color: var(--l-ink-3); }

.contact-submit {
    width: 100%;
    padding: 13px 18px;
    border: 0;
    border-radius: 10px;
    background: var(--l-accent);
    color: #fff;
    font: inherit;
    font-size: 14.5px;
    font-weight: 650;
    cursor: pointer;
}
.contact-submit:hover { opacity: .9; }
.contact-submit:disabled { opacity: .5; cursor: not-allowed; }

.contact-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--l-ink-3); }

.form-message { padding: 12px 14px; border-radius: 10px; font-size: 13.5px; margin-bottom: 16px; }
.form-message.is-ok { background: #EDF3FF; color: var(--l-accent); }
.form-message.is-bad { background: #FCEEED; color: #B3261E; }

/* --------------------------------------------------------------------------
   RESPONSIVE — KEEP LAST
   A plain rule written after a media query beats it at equal specificity.
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
    .contact-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
    .legal-toc ol { columns: 1; }
    .legal-hero .container,
    .legal-body { padding-left: 18px; padding-right: 18px; }
}

/* --------------------------------------------------------------------------
   Public footer
   These pages sit OUTSIDE the app shell, so page-foot.php (which closes the
   rail and needs $NAV) does not belong here — and the old marketing footer
   dragged its own competing styles in. This is a small self-contained one.
   -------------------------------------------------------------------------- */
.legal-foot {
    border-top: 1px solid var(--l-line);
    padding: clamp(32px, 5vw, 48px) 0 clamp(28px, 4vw, 40px);
    background: var(--l-bg);
}
.legal-foot .container { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
.legal-foot-brand {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--l-ink);
    text-decoration: none;
}
.legal-foot-top p {
    margin: 6px 0 20px;
    max-width: 52ch;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--l-ink-3);
}
.legal-foot-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--l-line);
}
.legal-foot-links a {
    font-size: 13px;
    color: var(--l-ink-2);
    text-decoration: none;
}
.legal-foot-links a:hover { color: var(--l-ink); text-decoration: underline; }
.legal-foot .legal-foot-note {
    margin: 16px 0 0;
    padding: 0;
    border: 0;
    font-size: 12.5px;
    color: var(--l-ink-3);
}

/* --------------------------------------------------------------------------
   Public top bar
   Signed-in visitors get the normal app rail. Someone who is signed OUT and
   reading the refund policy has no use for a rail full of links they cannot
   open, so they get this instead: brand, sign in, and a way to start.
   -------------------------------------------------------------------------- */
.legal-topbar {
    border-bottom: 1px solid var(--l-line);
    background: var(--l-bg);
}
.legal-topbar .container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 14px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.legal-topbar-mark {
    /* THE LOGO IS A CIRCLE IN A SQUARE FILE.

       favicon.png is 348x348 with the disc touching the LEFT and RIGHT edges
       but 12px of transparency at the TOP and BOTTOM. On a dark header that
       gap let the background through as two thin dark lines above and below
       the mark — which is what you were seeing. The homepage looked fine
       only because its bar is light, so the gap was invisible.

       Rather than re-cut the artwork, the mark is drawn as a circular badge
       with its own white face. The transparent strip is filled by the badge,
       the disc sits inside it, and it reads as deliberate on any background.
       One asset, still the same file as the tab icon. */
    display: block;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #FFFFFF;
    object-fit: cover;      /* fill the badge — the 12px strip is empty anyway */
}
/* THE MARK SITS BESIDE THE NAME, NOT ABOVE IT.

   This was a plain anchor with no display set, so the mark — which I made
   display:block when I turned it from a lettered badge into an image — dropped
   onto its own line and pushed the words underneath.

   The flex rule DID exist, but only inside the mobile media query further down,
   so it looked correct on a phone and wrong on a desktop. That is a confusing
   way to find a bug and worth stating plainly here. */
.legal-topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--l-ink);
    text-decoration: none;
}
.legal-topbar-links { display: flex; align-items: center; gap: 8px; }
.legal-topbar-links a {
    padding: 8px 13px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--l-ink-2);
    text-decoration: none;
}
.legal-topbar-links a:hover { background: var(--l-bg-2); color: var(--l-ink); }
.legal-topbar-links a.is-cta {
    background: var(--l-accent);
    color: #fff;
}
.legal-topbar-links a.is-cta:hover { opacity: .9; background: var(--l-accent); }

/* When the app rail IS present the page sits inside the shell, which already
   supplies its own left inset — so the legal container must not add another. */
.app + .legal-hero .container,
.app ~ .legal-hero .container { padding-left: 32px; }

@media (max-width: 620px) {
    .legal-topbar .container { padding: 12px 18px; }
    .legal-topbar-links a { padding: 7px 10px; font-size: 13px; }
}

/* --------------------------------------------------------------------------
   Policies index
   Thirteen policies is too many for a plain list — you would open three before
   finding the right one. Cards with a one-line summary let you pick correctly
   the first time.
   -------------------------------------------------------------------------- */
.policy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: clamp(40px, 6vw, 64px);
}
.policy-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    border: 1px solid var(--l-line);
    border-radius: 12px;
    background: var(--l-bg);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.policy-card:hover { border-color: var(--l-ink-3); transform: translateY(-1px); }
.policy-card-title { font-size: 15px; font-weight: 650; color: var(--l-ink); }
.policy-card-desc {
    flex: 1 1 auto;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--l-ink-2);
}
.policy-card-go {
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 620;
    color: var(--l-ink-3);
}
.policy-card:hover .policy-card-go { color: var(--l-ink); }

/* <details> rather than JavaScript: it opens without a script, works with
   find-in-page in most browsers, and cannot get stuck shut if the JS fails. */
.policy-faq-block { margin-bottom: clamp(40px, 6vw, 64px); }
.policy-faq-block > h2 {
    margin: 0 0 14px;
    font-size: clamp(18px, 2.2vw, 22px);
    font-weight: 680;
    letter-spacing: -.02em;
    color: var(--l-ink);
}
.policy-faq {
    border: 1px solid var(--l-line);
    border-radius: 12px;
    background: var(--l-bg);
    margin-bottom: 8px;
    overflow: hidden;
}
.policy-faq summary {
    padding: 14px 16px;
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--l-ink);
    list-style: none;
}
.policy-faq summary::-webkit-details-marker { display: none; }
.policy-faq summary::after {
    content: "+";
    float: right;
    color: var(--l-ink-3);
    font-weight: 400;
}
.policy-faq[open] summary::after { content: "\2212"; }
.policy-faq summary:hover { background: var(--l-bg-2); }
.policy-faq p {
    margin: 0;
    padding: 0 16px 16px;
    max-width: 74ch;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--l-ink-2);
}

.policy-cta {
    padding: clamp(22px, 3vw, 30px);
    border: 1px solid var(--l-line);
    border-radius: 14px;
    background: var(--l-bg);
}
.policy-cta h2 {
    margin: 0 0 8px;
    font-size: clamp(17px, 2vw, 20px);
    font-weight: 680;
    letter-spacing: -.02em;
    color: var(--l-ink);
}
.policy-cta p { margin: 0 0 16px; max-width: 60ch; font-size: 14.5px; line-height: 1.65; color: var(--l-ink-2); }
.policy-cta-btn {
    display: inline-block;
    padding: 11px 18px;
    border-radius: 10px;
    background: var(--l-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
}
.policy-cta-btn:hover { opacity: .9; }

/* --------------------------------------------------------------------------
   TOUCH DEVICES

   Same rule as the homepage: tap-target size is about the INPUT DEVICE, not the
   screen width, so a 768px tablet gets it too. These pages are mostly links —
   a contents list, a footer, an accordion — and inline text links with no
   padding are a precise mouse click and a miss with a thumb.
   -------------------------------------------------------------------------- */
@media (pointer: coarse), (max-width: 900px) {
    .legal-page a, .legal-page button, .legal-page summary { touch-action: manipulation; }

    .legal-toc a { min-height: 44px; align-items: center; }
    .legal-topbar-links a { display: inline-flex; align-items: center; min-height: 44px; }
    .legal-topbar-brand { display: inline-flex; align-items: center; min-height: 44px; }

    .policy-faq summary { padding: 18px 16px; min-height: 48px; }
    .policy-card { padding: 20px; }

    .legal-foot-links a { display: flex; align-items: center; min-height: 44px; font-size: 14px; }
    .legal-foot-brand { display: inline-flex; align-items: center; min-height: 44px; }
    .legal-section a { padding: 2px 0; }
    .contact-method { min-height: 64px; }
    .policy-cta-btn { min-height: 48px; display: inline-flex; align-items: center; }
    .contact-submit { min-height: 48px; }
    /* the contact form fields: 16px or iOS Safari zooms the page on focus */
    .contact-field input, .contact-field select, .contact-field textarea { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   THE BLUE                                              (Aug 2026)

   Two shades, on purpose.

   #4B90FF is the exact blue sampled out of favicon.png, and it is used only on
   the brand mark, where it is a logo rather than something you read.

   Everything that carries text — buttons, links, the accordion marker — uses
   #2F6FDB. The logo blue against white is 3.12:1, and normal-size text needs
   4.5:1 to be legible for someone with ordinary eyesight, let alone anyone
   with a mild sight impairment. The deeper shade is 4.75:1 both ways: dark
   enough to read as a link on white, light enough that white text sits on it.

   Same family, so the brand still reads as one colour.
   -------------------------------------------------------------------------- */
.brand-blue { color: #4B90FF; }