/* legal pages: the same tarmac, type and pills as the app, laid out for reading */
body.legal{background:linear-gradient(rgba(17,17,19,.80),rgba(17,17,19,.94) 700px,#111113 1200px),url("assets/tarmac-tall.webp") center top/cover no-repeat,#111113;min-height:100vh}
@media (min-width:760px){body.legal{background-image:linear-gradient(rgba(17,17,19,.80),rgba(17,17,19,.94) 700px,#111113 1200px),url("assets/tarmac-wide.webp")}}
.legal main{position:relative;max-width:720px;margin:0 auto;padding:max(84px,calc(env(safe-area-inset-top) + 72px)) 20px max(64px,env(safe-area-inset-bottom)) 34px}
/* the double yellows run down the kerb (left edge), below the header */
.legal .kerb{position:fixed;top:76px;left:0;width:22px;height:calc(100vh - 76px);pointer-events:none;opacity:.9}
.legal .kerb path{fill:none;stroke:#FFCF00;stroke-width:3.4;stroke-linecap:butt;opacity:.94}
@media (min-width:760px){.legal main{padding-left:20px}}
.legal h1{margin:0 0 var(--s-3);font-size:clamp(2.6rem,11vw,4rem)}
.legal h2{margin:var(--s-10) 0 var(--s-2);font-family:var(--font-display);font-weight:var(--fw-display);font-stretch:var(--stretch-display);font-size:1.7rem;line-height:var(--lh-heading);letter-spacing:-.015em}
.legal p,.legal li{max-width:65ch;line-height:1.55}
.legal ul{padding-left:1.2em}.legal li{margin:6px 0}
.legal main a{color:var(--text);text-decoration-color:var(--accent);text-underline-offset:3px}
.legal .card p:first-child{margin-top:0}.legal .card p:last-child{margin-bottom:0}
.legal .updated{color:var(--text-muted);font-size:var(--fs-small)}
.legal .others{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s-6)}
.legal table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.legal td,.legal th{text-align:left;vertical-align:top;padding:10px 8px;border-bottom:1px solid var(--border-glass)}
.legal th{color:var(--text-muted);font-weight:var(--fw-semibold)}
.legal .scroll{overflow-x:auto}
/* guide pages (/guides, /codes): the same cards, tags and pills, arranged for reading */
.guide .crumbs ol{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--s-3);padding:0;list-style:none;font-size:var(--fs-micro);color:var(--text-muted)}
.guide .crumbs li+li::before{content:"›";margin-right:6px;color:var(--text-muted)}
.guide .crumbs a{color:var(--text-muted)}
.guide .card .bul{margin:8px 0 0;padding-left:1.2em;list-style:disc}
.guide .card .bul li{margin:6px 0}
.guide .steps{margin:0;padding:0;list-style:none}
.guide .h4{margin:8px 0 0;font-family:var(--font-display);font-weight:var(--fw-display);font-stretch:var(--stretch-display);font-size:1.45rem;line-height:1.05;letter-spacing:-.01em}
.guide .card .h3{margin-top:4px}
.guide .card.cta{margin-top:var(--s-8)}
.guide .card.cta .pill{width:100%;margin-top:var(--s-4)}
.guide .card.cta .f-hint{margin-top:10px}
.guide .faq summary{cursor:pointer;list-style-position:outside}
.guide .faq summary b{font-size:var(--fs-body)}
.guide .where{display:grid;gap:6px;margin:10px 0 0!important}
.guide .where li{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:var(--fs-small)}
.guide .jump ul{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--s-5);padding:0;list-style:none}
.guide .jump a{display:inline-grid;place-items:center;min-width:44px;min-height:44px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 2px var(--border-strong);text-decoration:none;font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
.guide .code{scroll-margin-top:90px}
.guide .code-n{font-family:var(--font-display);font-weight:var(--fw-black);font-stretch:var(--stretch-display);font-size:1.9rem;line-height:1;color:var(--text-accent);font-variant-numeric:tabular-nums}
.guide .code .h4{font-size:1.3rem}
.guide-list{display:grid;gap:var(--s-3);margin:0;padding:0;list-style:none}
.guide-list .card{display:grid;gap:4px;margin:0;text-decoration:none;color:var(--text)}
.guide-list .card b{font-family:var(--font-display);font-weight:var(--fw-display);font-stretch:var(--stretch-display);font-size:1.45rem;line-height:1.05}
.guide-list .card span{color:var(--text-muted);font-size:var(--fs-small)}
.guide th[scope=row]{color:var(--text);font-weight:var(--fw-semibold)}
.guide main a.pill:not(.pill-ghost){color:var(--text-on-accent);text-decoration:none}