, which puts its paragraphs one level deeper than a direct-child selector can reach — without the second line here they collapse against each other with no leading. :where() keeps this at (0,1,0) so the heading rules below, which are more specific by an element, still win their larger margins. */ .prose > * + *, .prose > :where([lang]) > * + * { margin-top: 16px; } .prose h2 { margin-top: 46px; font-family: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 26px; font-weight: 600; line-height: 1.15; } .prose h3 { margin-top: 32px; font-family: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 20px; font-weight: 600; } .prose ul, .prose ol { margin: 16px 0 0; padding-left: 22px; } .prose li + li { margin-top: 10px; } .prose a { font-weight: 700; } .prose code { padding: 1px 5px; border: 1px solid rgba(23, 24, 26, .25); background: var(--teal); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; } /* Inline email/link call-out — the thing we most want people to reach for on the support page. Deliberately NOT scoped under .prose: it lives in a .page-card there. */ .lede-link { display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 21px; font-weight: 700; overflow-wrap: anywhere; } /* ── Panels ─────────────────────────────────────────────────────────── */ .page-card { margin-top: 30px; padding: 26px 28px; border: var(--line); background: var(--teal); } .page-card--paper { background: #fff; } .page-card > :first-child { margin-top: 0; } .page-card__title { margin-bottom: 14px; font-size: 22px; font-weight: 600; } /* Quiet aside used for "no hard feelings" / retention footnotes. */ .page-note { margin-top: 22px; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.5; color: var(--muted); } .page-note a { color: var(--ink); font-weight: 700; } /* ── Forms outside the bulletin flow ────────────────────────────────── */ .page-form { margin-top: 8px; } /* .field-grid is single-column by default in site.css; these pages want a two-up above the fold-width so short fields pair off. */ @media (min-width: 620px) { .page-form .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 24px; } } .page-form .field-grid { margin-top: 26px; } .page-form .submit-button { margin-top: 38px; } /* site.css's .form-status is always teal (it only ever announced success in the purchase flow). These pages report failures too, so the state is explicit and never colour-only — the border weight and the leading label carry it for forced-colors and colour-blind readers alike. */ .status-note { width: 100%; margin-top: 26px; padding: 16px 18px; border: var(--line); font-size: 17px; font-weight: 600; line-height: 1.45; } .status-note--ok { background: var(--teal); } .status-note--err { border-width: 3px; background: #ffd9df; } .status-note::before { display: block; margin-bottom: 4px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; } .status-note--ok::before { content: "Sent"; } .status-note--err::before { content: "Not sent"; } /* Failures that aren't a form submission (a receipt that wouldn't load) want the same alarm treatment without the "Not sent" verdict. */ .status-note--nolabel::before { content: none; } /* Honeypot pair — off-screen but not display:none, so bots that skip hidden fields still fill them. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Turnstile's iframe has its own fixed size; just give it air. */ .captcha { margin-top: 30px; } /* ── Tables (receipt, schedule) ─────────────────────────────────────── */ .data-table-wrap { overflow-x: auto; margin-top: 16px; } .data-table { width: 100%; border-collapse: collapse; font-family: Arial, Helvetica, sans-serif; font-size: 16px; } .data-table th, .data-table td { padding: 9px 12px; border-bottom: 1px solid rgba(23, 24, 26, .28); text-align: left; } .data-table th { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .data-table tr:last-child td { border-bottom: 0; } .kv-label { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .kv-value { margin-top: 3px; margin-bottom: 18px; font-family: Arial, Helvetica, sans-serif; font-size: 19px; overflow-wrap: anywhere; } .kv-value:last-child { margin-bottom: 0; } .pill { display: inline-block; padding: 5px 14px; border: var(--line); border-radius: 50%; background: var(--teal); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .pill--dark { background: var(--dark); color: var(--teal); } .pill--quiet { background: transparent; } .muted { color: var(--muted); } /* ── Footer nav gains a fourth link in the "More" column; no geometry change, so the landing footer's measured columns still hold. ───── */ @media (max-width: 767px) { .page-shell { padding: 24px 20px 64px; } .page-header { margin-bottom: 28px; } .page-card { padding: 22px 20px; } .prose { font-size: 17px; } .prose h2 { margin-top: 38px; font-size: 23px; } .page-form .submit-button { min-width: 0; width: min(90%, 360px); } /* site.css caps a field label at 55% on mobile to leave room for the character-count span beside it. Most fields here have no such span, so the cap only forces a label to wrap for no reason. */ .page-form .field-heading > label:only-child { max-width: 100%; } } @media (max-width: 359px) { .page-shell { padding: 20px 14px 56px; } }