/* Support and privacy pages: a dark hero over the aurora, then the text on the Button Guide's paper sheet.
   Loaded after site.css, which supplies the tokens, nav, footer, paper, keycaps and download button. */

.doc-hero{padding:calc(var(--nav-h) + var(--safe-t) + clamp(48px, 9vw, 128px)) 0 clamp(40px, 6vw, 88px)}
.doc-hero h1{font-size:clamp(2.5rem, 1.1rem + 5.2vw, 5.75rem); margin-top:clamp(16px, 2vw, 24px)}
.doc-hero .lead{margin-top:clamp(16px, 2vw, 26px); max-width:44ch}
.doc-meta{margin-top:20px; font:500 14px/1.4 var(--font-mono); color:var(--faint); letter-spacing:.02em}

.doc-sheet{margin-bottom:clamp(24px, 3vw, 48px); padding-block:clamp(40px, 6vw, 104px)}
.doc-grid{display:grid; gap:clamp(28px, 4vw, 48px)}
@media (min-width:1100px){
  .doc-grid{grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--col-gap)}
  .doc-toc{grid-column:1 / 4}
  .doc-main{grid-column:4 / 12}
}

/* On this page */
.doc-toc{min-width:0}
.doc-toc__title{font-weight:700; font-size:var(--fs-eyebrow); letter-spacing:var(--tr-eyebrow); text-transform:uppercase; color:var(--paper-muted); margin-bottom:12px}
.doc-toc ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.doc-toc a{display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:var(--r-pill); background:#fff;
  border:1px solid var(--paper-line-2); color:var(--paper-text); font-size:var(--fs-small); font-weight:600; text-decoration:none}
@media (hover:hover){ .doc-toc a:hover{border-color:rgba(107,59,255,.45); color:var(--violet)} }
@media (min-width:1100px){
  .doc-toc nav{position:sticky; top:calc(var(--nav-h) + var(--safe-t) + 28px)}
  .doc-toc ul{flex-direction:column; flex-wrap:nowrap; gap:0; border-left:1px solid var(--paper-line-2)}
  .doc-toc a{min-height:40px; padding:0 0 0 18px; margin-left:-1px; border:0; border-left:2px solid transparent; border-radius:0; background:none; color:var(--paper-muted)}
  @media (hover:hover){ .doc-toc a:hover{border-left-color:var(--violet); color:var(--paper-text)} }
}

/* Body text */
.doc-main{min-width:0}
.prose{max-width:68ch; font-size:clamp(1.0625rem, 1rem + .2vw, 1.125rem); line-height:1.68; color:var(--paper-text)}
.prose > * + *{margin-top:18px}
.prose h2{font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); line-height:1.12; letter-spacing:-.025em; margin-top:clamp(48px, 6vw, 72px); scroll-margin-top:calc(var(--nav-h) + var(--safe-t) + 24px)}
.prose > h2:first-child{margin-top:0}
.prose h2 + *{margin-top:14px}
.prose p, .prose li{color:#2A2547}
.prose strong{color:var(--paper-text); font-weight:700}
.prose a{color:#5A2DE8; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:rgba(90,45,232,.45); overflow-wrap:anywhere}
@media (hover:hover){ .prose a:hover{text-decoration-color:currentColor} }
.prose ul, .prose ol{padding-left:1.25em}
.prose li + li{margin-top:8px}
.prose .key{font-size:14px; min-width:28px; height:28px; padding:0 7px}
.prose .combo{margin-inline:2px}
.prose .path{font-weight:600; color:var(--paper-text)}
.doc-note{font-size:var(--fs-small); color:var(--paper-muted)}

/* Support: contact card and the closing download */
.doc-card{background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-paper-card); padding:clamp(22px, 3vw, 32px); display:grid; gap:12px}
.doc-card__label{font-weight:700; font-size:var(--fs-eyebrow); letter-spacing:var(--tr-eyebrow); text-transform:uppercase; color:var(--paper-muted)}
.doc-card__mail{justify-self:start; display:inline-flex; align-items:center; gap:12px; min-height:52px; padding:0 22px 0 14px; border-radius:var(--r-pill);
  background:var(--grad-cta); color:#fff; font-weight:700; font-size:clamp(1rem, .95rem + .3vw, 1.125rem); text-decoration:none; box-shadow:var(--sh-cta); overflow-wrap:anywhere}
.prose .doc-card__mail{color:#fff; text-decoration:none}
@media (hover:hover){ .prose .doc-card__mail:hover{box-shadow:var(--sh-cta-hover)} }
.doc-card__mail svg{width:28px; height:28px; flex:none; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.doc-card .doc-note{max-width:56ch}
.doc-cta{margin-top:clamp(56px, 7vw, 88px); padding-top:clamp(32px, 4vw, 48px); border-top:1px solid var(--paper-line-2); display:grid; justify-items:start; gap:18px}
.doc-cta h2{font-size:clamp(1.75rem, 1.2rem + 2vw, 2.75rem); letter-spacing:-.03em; line-height:1.05}
.doc-cta .cta-frame{margin:var(--vf-pad)}
@media (max-width:639.98px){ .doc-cta .cta-frame{width:min(100% - 2 * var(--vf-pad) - 8px, 400px)} .doc-card__mail{width:100%; justify-content:center} }