/* ==========================================================================
   PAGES: legal, support, answers and reference pages (built by tools/build-pages.py).
   Shared parts, so every page reads like the homepage:
   .pg-hero     eyebrow, display title, lede, actions
   .pg-sec      a section; .pg-h2 its heading, .pg-intro its lede
   .pg-grid     cards (.pg-card with h3 and p); .pg-grid.two for two across
   .pg-stats    a row of figures (b and span)
   .pg-steps    a numbered list of steps
   .pg-prose    long-form text (blog posts, notes)
   .pg-legal    a framed legal document from the legal center
   .pg-cta      the closing call to action
   ========================================================================== */
.mpage main { position: relative; }
.pg-hero { position: relative; padding: calc(64px + 12vh) 0 7vh; }
.pg-hero .wrap { max-width: calc(64rem + var(--gutter) * 2); }
.pg-hero.center { text-align: center; }
.pg-hero.center .lede, .pg-hero.center .pg-sub { margin-left: auto; margin-right: auto; }
.pg-hero h1 { margin: 1rem 0 0; font-size: clamp(2.6rem, 6vw, 5rem); line-height: .98; letter-spacing: -.04em; }
.pg-hero h1 .hl { background: none; color: #85809a; -webkit-text-fill-color: currentColor; }
.pg-hero .lede { margin-top: 1.4rem; max-width: 40rem; font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.pg-sub { margin-top: .9rem; max-width: 40rem; font-size: .95rem; color: var(--text-ghost); }
.pg-hero .cta-row { margin-top: 2rem; }
.pg-hero.center .cta-row { justify-content: center; }

.pg-sec { position: relative; padding: 9vh 0; }
.pg-sec .wrap { max-width: calc(72rem + var(--gutter) * 2); }
.pg-h2 { margin: .8rem 0 0; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -.035em; }
.pg-h2 .hl { background: none; color: #85809a; -webkit-text-fill-color: currentColor; }
.pg-intro { margin-top: 1.1rem; max-width: 42rem; color: var(--muted-foreground); font-size: 1.05rem; line-height: 1.6; }

.pg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 2.6rem; }
.pg-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-card { position: relative; padding: 1.4rem 1.4rem 1.5rem; border-radius: 20px; background: linear-gradient(160deg, rgb(36 30 52 / .6), rgb(24 20 31 / .5)); box-shadow: inset 0 0 0 1px rgb(244 243 247 / .08); }
.pg-card h3 { margin: 0; font: 600 1.15rem/1.25 var(--font-display); letter-spacing: -.01em; }
.pg-card p { margin: .55rem 0 0; font-size: .95rem; line-height: 1.55; color: var(--muted-foreground); }
.pg-card .k { display: block; margin-bottom: .7rem; font: 500 .75rem/1 "JetBrains Mono", ui-monospace, monospace; color: var(--text-ghost); }
.pg-card ul { margin: .7rem 0 0; padding: 0; list-style: none; display: grid; gap: .4rem; font-size: .92rem; color: var(--muted-foreground); }
.pg-card li { position: relative; padding-left: 1.1rem; }
.pg-card li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: #a78bfa; }

.pg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.4rem; margin-top: 2.4rem; }
.pg-stats p { margin: 0; padding-top: 1rem; border-top: 1px solid var(--hair); font-size: .9rem; color: var(--muted-foreground); }
.pg-stats b { display: block; margin-bottom: .3rem; font: 600 clamp(1.8rem, 3vw, 2.4rem)/1 var(--font-display); letter-spacing: -.03em; color: var(--foreground); }

.pg-steps { counter-reset: s; margin: 2.4rem 0 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.pg-steps li { counter-increment: s; position: relative; padding: 1.1rem 1.2rem 1.1rem 3.6rem; border-radius: 16px; background: rgb(24 20 31 / .5); box-shadow: inset 0 0 0 1px var(--hair); color: var(--muted-foreground); line-height: 1.55; }
.pg-steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 1.2rem; top: 1.15rem; font: 500 .8rem/1.4 "JetBrains Mono", ui-monospace, monospace; color: #a78bfa; }
.pg-steps b { color: var(--foreground); font-weight: 600; }

.pg-prose { max-width: 44rem; margin: 0 auto; font-size: 1.08rem; line-height: 1.75; color: #d9d3e6; }
.pg-prose > * + * { margin-top: 1.2rem; }
.pg-prose h2 { margin-top: 2.6rem; font: 600 1.7rem/1.2 var(--font-display); letter-spacing: -.02em; color: var(--foreground); }
.pg-prose h3 { margin-top: 2rem; font: 600 1.25rem/1.3 var(--font-display); color: var(--foreground); }
.pg-prose a { color: var(--link); text-decoration: underline; text-decoration-color: rgb(196 181 253 / .4); text-underline-offset: 3px; }
.pg-prose ul, .pg-prose ol { padding-left: 1.3rem; }
.pg-prose li + li { margin-top: .4rem; }
.pg-prose blockquote { margin-left: 0; padding: .4rem 0 .4rem 1.2rem; border-left: 2px solid #a78bfa; color: var(--foreground); font-style: italic; }
.pg-prose strong { color: var(--foreground); }
.pg-prose hr { border: 0; border-top: 1px solid var(--hair); margin: 2.4rem 0; }
.pg-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: 1.3rem; font-size: .9rem; color: var(--text-ghost); }

.pg-list { display: grid; gap: 12px; margin-top: 2.4rem; }
.pg-post { display: block; padding: 1.5rem 1.6rem; border-radius: 20px; background: linear-gradient(160deg, rgb(36 30 52 / .6), rgb(24 20 31 / .5)); box-shadow: inset 0 0 0 1px rgb(244 243 247 / .08); transition: box-shadow .2s ease, transform .2s ease; }
.pg-post:hover { box-shadow: inset 0 0 0 1px rgb(167 139 250 / .45); transform: translateY(-2px); }
.pg-post h3 { margin: .4rem 0 0; font: 600 1.4rem/1.25 var(--font-display); letter-spacing: -.02em; }
.pg-post p { margin: .5rem 0 0; color: var(--muted-foreground); }
.pg-post small { font-size: .82rem; color: var(--text-ghost); }

.pg-legal .wrap { max-width: calc(60rem + var(--gutter) * 2); }
.pg-doc { overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 40px 100px -40px rgb(76 29 149 / .6), 0 0 0 1px rgb(255 255 255 / .1); }
.pg-doc iframe { display: block; width: 100%; height: max(720px, 82vh); border: 0; background: #fff; }
.pg-note { margin-top: 1rem; font-size: .9rem; color: var(--text-ghost); }
.pg-note a { color: var(--link); }

.pg-contact { max-width: 32rem; margin: 2.4rem auto 0; padding: 2rem; border-radius: 22px; text-align: center; background: linear-gradient(160deg, rgb(36 30 52 / .6), rgb(24 20 31 / .5)); box-shadow: inset 0 0 0 1px rgb(244 243 247 / .08); }
.pg-contact .k { font: 500 .78rem/1 "JetBrains Mono", ui-monospace, monospace; color: var(--text-ghost); }
.pg-contact p { margin: .8rem 0 1.3rem; font: 500 1.15rem/1.3 "JetBrains Mono", ui-monospace, monospace; color: var(--foreground); }

.pg-cta { position: relative; padding: 12vh 0 14vh; text-align: center; }
.pg-cta .pg-h2 { max-width: 40rem; margin-left: auto; margin-right: auto; }
.pg-cta .pg-intro { margin-left: auto; margin-right: auto; }
.pg-cta .cta-row { justify-content: center; margin-top: 2rem; }

/* Answers and reference pages: questions that each stand on their own, a dated line, topic links and a data table */
.pg-hero.wide .wrap { max-width: calc(72rem + var(--gutter) * 2); }
.pg-updated { margin-top: 1.2rem; font-size: .85rem; color: var(--text-ghost); }
.pg-toc { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem; }
.pg-toc a { padding: .5rem .95rem; border-radius: 999px; font-size: .9rem; color: var(--muted-foreground); box-shadow: inset 0 0 0 1px var(--hair); transition: color .2s ease, box-shadow .2s ease; }
.pg-toc a:hover { color: var(--foreground); box-shadow: inset 0 0 0 1px rgb(167 139 250 / .5); }
.pg-qas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 2.2rem; }
.pg-qa { scroll-margin-top: 90px; padding: 1.4rem 1.5rem 1.5rem; border-radius: 20px; background: linear-gradient(160deg, rgb(36 30 52 / .6), rgb(24 20 31 / .5)); box-shadow: inset 0 0 0 1px rgb(244 243 247 / .08); }
.pg-qa:target { box-shadow: inset 0 0 0 1px rgb(167 139 250 / .6); }
.pg-qa h3 { margin: 0; font: 600 1.15rem/1.3 var(--font-display); letter-spacing: -.01em; }
.pg-qa p { margin: .6rem 0 0; font-size: .97rem; line-height: 1.6; color: var(--muted-foreground); }
.pg-sec[id] { scroll-margin-top: 70px; }
.pg-table-wrap { margin-top: 2.2rem; overflow-x: auto; border-radius: 20px; box-shadow: inset 0 0 0 1px rgb(244 243 247 / .08); background: rgb(24 20 31 / .5); }
.pg-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .97rem; }
.pg-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pg-table th, .pg-table td { padding: 1rem 1.3rem; text-align: left; border-bottom: 1px solid var(--hair); vertical-align: top; }
.pg-table thead th { font: 500 .78rem/1 "JetBrains Mono", ui-monospace, monospace; color: var(--text-ghost); letter-spacing: .02em; }
.pg-table tbody th { font: 600 1.02rem/1.3 var(--font-display); color: var(--foreground); }
.pg-table td { color: var(--muted-foreground); }
.pg-table td:nth-child(2) { color: var(--foreground); font-weight: 500; white-space: nowrap; }
.pg-table tbody tr:last-child > * { border-bottom: 0; }

@media (max-width: 900px) {
  .pg-qas { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pg-table { min-width: 0; font-size: .88rem; }
  .pg-table th, .pg-table td { padding: .85rem .75rem; }
  .pg-table td:nth-child(2) { white-space: normal; }
  .pg-grid, .pg-grid.two { grid-template-columns: 1fr; }
}

/* Letters and essays on the blog */
.pg-prose .pull-quote { margin: 2.2rem 0; padding: .2rem 0 .2rem 1.3rem; border-left: 2px solid #a78bfa; font: 600 clamp(1.35rem, 2.6vw, 1.7rem)/1.3 var(--font-display); letter-spacing: -.015em; color: var(--foreground); }
.pg-prose .pull-quote strong { background: linear-gradient(90deg, #c4b5fd, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pg-prose .signature { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--hair); color: var(--foreground); font-weight: 500; line-height: 1.5; }

/* Blog pages read as one sheet: no seam of light between sections (js/texture.js adds them). */
main:has(.pg-prose, .pg-list) .tx-seam { display: none; }