/* Support, privacy, terms and 404 — the landing page's design carried onto the text pages.
   Loaded AFTER styles.css, so the header, footer, buttons, colours and all three themes are the
   landing page's own; this file only adds what a page of reading needs. Reading sizes are in rem
   so they follow the reader's own text-size setting (support pages are disproportionately read by
   people who have turned it up). */

.page-shell{position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line)}
.page-leaf{position:absolute;width:320px;right:-50px;top:40px;transform:rotate(26deg);opacity:.22;z-index:-1;pointer-events:none}
.theme-d .page-leaf{opacity:.5}
.theme-e .page-shell{border-bottom:0}
.theme-e .page-leaf{opacity:.23}

.page-hero{padding:18px 0 72px}
.back{display:inline-flex;align-items:center;gap:10px;font-size:.9375rem;color:var(--muted);padding:12px 0;margin:0 0 22px}
.back:hover{color:var(--ink)}
.back span{transition:transform .18s}
.back:hover span{transform:translateX(-3px)}
.page-hero .eyebrow{margin-bottom:20px}
.page-hero h1{font:clamp(46px,5.2vw,76px)/1.04 var(--serif);letter-spacing:-.045em;margin:0 0 22px;max-width:16ch}
.page-hero .lead{margin:0;font-size:1.1875rem}
.stamp{margin:26px 0 0;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:650;color:var(--muted)}

.theme-e .page-hero .lead,.theme-e .page-hero .back,.theme-e .page-hero .stamp{color:#ebdfe8}
.theme-e .page-hero .back:hover{color:#fff9ef}

.prose{padding:64px 0 96px}
.prose>*{max-width:46rem}
.prose h2{font:clamp(30px,2.7vw,38px)/1.15 var(--serif);letter-spacing:-.03em;margin:64px 0 18px}
.prose>h2:first-child{margin-top:0}
.prose>.card:first-child+h2{margin-top:48px}
.prose p,.prose li,.prose dd{font-size:1.0625rem;line-height:1.7}
.prose p{margin:0 0 16px}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}
.prose ul{margin:0 0 16px;padding-left:1.25em}
.prose li{margin:0 0 10px;padding-left:.25em}
.prose li::marker{color:var(--accent)}
.prose strong{font-weight:650}
.muted{color:var(--muted)}

.card{background:#fffdfb;border:1px solid var(--line);border-radius:20px;padding:26px 30px;box-shadow:0 12px 30px #2a1c2b0a}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.card li a{display:inline-block;padding-block:4px}

dl.qa{margin:0}
dl.qa dt{font:1.4375rem/1.3 var(--serif);letter-spacing:-.01em;margin:36px 0 10px}
dl.qa dt:first-child{margin-top:0}
dl.qa dd{margin:0;color:var(--muted)}
dl.qa dd p{color:var(--muted)}

header nav a[aria-current="page"],footer nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:1px}

/* "What changed" under a version stamp — the terms promise to say what changed, in one line. */
.page-hero .changed{margin:8px 0 0;font-size:.9375rem;line-height:1.6;color:var(--muted);max-width:38rem}
.page-hero .changed a{text-decoration:underline;text-underline-offset:.2em}
.theme-e .page-hero .changed{color:#ebdfe8}
.prose .closing-note{margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}

@media(max-width:760px){
  .page-hero{padding:4px 0 44px}
  .page-hero h1{font-size:clamp(40px,11vw,56px)}
  .page-hero .lead{font-size:1.0625rem}
  .page-leaf{width:220px;right:-80px;top:70px}
  .prose{padding:44px 0 72px}
  .prose h2{margin-top:52px}
  .card{padding:22px}
}
@media(prefers-reduced-motion:reduce){.back span{transition:none}}