/* Landing pages written by scripts/pages.mjs (decision 0010). Loaded after styles.css and uses its
   tokens only: no new colours, fonts or tokens. Long-form reading layout for body.page.
   CSP: no inline styles; every rule lives here. */

/* header: the wordmark is a link home; the twin-language link is a 44px target */
.page .brand-link{display:inline-flex;align-items:center;column-gap:9px;min-height:44px;color:inherit;text-decoration:none}
.page .brand-link:hover span{text-decoration:underline;text-underline-offset:3px}
.page .lang{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}

/* reading measure: about 65 characters; the base size comes from styles.css (18px) */
.article{padding-bottom:8px}
.article>*{max-width:65ch}
.article h1{margin-top:28px;overflow-wrap:break-word;hyphens:manual}
.article .lede{margin-top:16px;font-size:1.1667rem;line-height:1.5}
.article p.updated{margin-top:12px}
.article section{margin-top:48px;scroll-margin-top:16px}
.article h2{margin-bottom:12px}
.article h3{margin-top:24px}
.article h3+p{margin-top:4px}
.article li{overflow-wrap:break-word}

/* lists inside the prose: styles.css removes markers globally, so put them back here */
.article .bullets{list-style:disc;padding-left:1.3em;margin-top:12px}
.article .steps-list{list-style:decimal;padding-left:1.5em;margin-top:12px}
.article .bullets li,.article .steps-list li{padding:3px 0}
.article .steps-list li{padding:6px 0 6px 4px}
.article .steps-list li+li{border-top:1px solid var(--line)}
.article p+ul,.article p+ol,.article ul+p,.article ol+p{margin-top:12px}
/* a links block (related pages, outside sources): each link is a 44px target */
.article .links li{padding:0}
.article .links a{display:inline-flex;align-items:center;min-height:44px}

/* call to action: the one filled block on the first screen */
.cta{margin-top:28px;padding:18px 18px 20px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--r)}
.cta h2{margin:0 0 8px;font-size:1.3333rem}
.cta .cta-go{margin-top:16px}
.cta .btn-primary{margin-top:0;min-height:52px}

/* in-page navigation: a plain list on hairlines */
.toc{margin-top:36px}
.toc-title{font:600 .8889rem/1.4 var(--sans);color:var(--muted)}
.toc ul{margin-top:6px;border-top:1px solid var(--line)}
.toc li{border-bottom:1px solid var(--line)}
.toc a{display:flex;align-items:center;min-height:44px;padding:4px 0}

/* where to get help */
.callbox .call-go{margin-top:8px}
.callbox h3{margin-top:28px}
.contact{margin-top:10px;border-top:1px solid var(--line)}
.contact li{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;min-height:44px;padding:6px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.contact a{display:inline-flex;align-items:center;min-height:44px;margin:-6px 0}
.article .callbox .contact+p{margin-top:14px}
.form-link a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}

/* sources: the ledger rows from styles.css */
.sources .ledger{margin-top:14px}
.sources p.note{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:2px}
.sources p.note span{white-space:nowrap}
.sources a{overflow-wrap:anywhere}

@media (min-width:48rem){
  .article h1{margin-top:48px}
  .cta{padding:22px 26px 24px}
  .cta .btn-primary{min-width:16rem}
}

@media print{
  body.page{background:#fff;color:#000}
  .page .skip,.page .lang,.toc,.cta .cta-go,.foot-nav{display:none}
  .article>*{max-width:none}
  .cta{background:none;border:1px solid #000}
  .banner p{color:#000}
  .article section{margin-top:24px;break-inside:auto}
  .article h2,.article h3{break-after:avoid}
  .btn-call{background:none;color:#000;border:1px solid #000;width:auto;min-width:0}
  .sources a::after,.form-link a::after{content:" (" attr(href) ")";font-size:.8rem;overflow-wrap:anywhere}
}