/* =====================================================================
   OTHER PAGES: legal pages and the 404 page.
   Loaded after site.css, which already gives them the nav, footer, buttons,
   colours and type. Keep these pages quiet: no canvases except the 404 swirl.
   ===================================================================== */

/* ---------- legal pages ----------
   One narrow column: the Terms / Privacy / Refunds switch, the title and date,
   then every section inside a single card. */
.legal{position:relative;padding:calc(env(safe-area-inset-top,0px) + 140px) 0 110px}
.legal .wrap--md{max-width:860px}
.legal__head{text-align:center}

/* the switch: three equal tabs and one pill that slides between them */
.legal__tabs{position:relative;display:inline-grid;grid-template-columns:repeat(3,96px);padding:5px;border-radius:999px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);margin-bottom:34px}
.legal__pill{position:absolute;left:5px;top:5px;width:96px;height:34px;border-radius:999px;background:#f4f6f7;transform:translateX(calc(var(--i,0) * 96px));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.legal__tabs a{position:relative;z-index:1;height:34px;display:grid;place-items:center;border-radius:999px;font-size:13.5px;font-weight:500;color:rgba(237,237,237,.6);transition:color .25s ease}
@media (hover:hover){.legal__tabs a:hover{color:#fff}}
.legal__tabs a:focus{outline:none}
.legal__tabs a:focus-visible{box-shadow:0 0 0 2px rgba(166,228,245,.55)}
.legal__tabs a[aria-current="page"]{color:#0a0a0a;transition:color .3s ease .05s}

.legal__title{font-family:var(--hero);font-weight:700;font-size:clamp(36px,5vw,54px);letter-spacing:-.05em;line-height:1.05;color:#f4f4f6}
.legal__meta{margin-top:14px;font-size:13px;color:rgba(237,237,237,.62)}

.legal__card{margin-top:46px;padding:44px 48px 48px;border-radius:24px;background:linear-gradient(180deg,#111214,#0c0d0f);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 40px 80px -50px #000}
.legal__card::before{content:"";display:block;height:0}

.prose{font-size:15.5px;line-height:1.75;color:rgba(237,237,237,.72)}
.prose h2{scroll-margin-top:110px;font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:#f4f4f6;margin:40px 0 12px;padding-top:36px;border-top:1px solid rgba(255,255,255,.06)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose p+p{margin-top:14px}
.prose b{color:#f2f2f2;font-weight:600}
.prose a{color:#f2f2f2;text-decoration:underline;text-decoration-color:rgba(166,228,245,.45);text-underline-offset:3px;transition:text-decoration-color .2s ease}
@media (hover:hover){.prose a:hover{text-decoration-color:var(--acc)}}
.prose code{font-size:.86em;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.07);color:#e8f6fb}
.prose ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.prose li{position:relative;padding-left:22px}
.prose li::before{content:"";position:absolute;left:4px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--acc);opacity:.7}
.prose__defs li{padding:14px 16px 14px 18px;border-radius:14px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.prose__defs li::before{display:none}
.prose__defs b{margin-right:4px}

@media (max-width:640px){
  .legal{padding-top:calc(env(safe-area-inset-top,0px) + 112px)}
  .legal__tabs{grid-template-columns:repeat(3,88px);margin-bottom:26px}
  .legal__pill{width:88px;transform:translateX(calc(var(--i,0) * 88px))}
  .legal__card{margin-top:34px;padding:28px 22px 30px;border-radius:20px}
  .prose{font-size:15px}
  .prose h2{font-size:18.5px;margin-top:32px;padding-top:28px}
}

/* ---------- 404 ---------- */
.nf{position:relative;min-height:100svh;display:grid;place-items:center;padding:60px 20px;overflow:hidden;text-align:center}
.is-bare #main{min-height:100vh;min-height:100svh}
.nf::before{content:"";position:absolute;left:50%;top:46%;width:min(820px,140vw);aspect-ratio:1.6;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(166,228,245,.08),transparent 72%);pointer-events:none}
.nf__swirl{position:absolute;left:0;right:0;top:50%;width:100%;height:220px;transform:translateY(-10%);opacity:.9;pointer-events:none}
.nf__in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.nf__code{display:flex;align-items:center;gap:.07em;font-family:var(--hero);font-weight:800;font-size:clamp(110px,22vw,200px);letter-spacing:0;line-height:1;color:#f4f4f6}
.nf__code span{display:block}
.nf__gear{width:.753em;height:.753em;margin:0 -.005em 0 .005em;position:relative;top:-.0125em;fill:#f4f4f6;animation:turn 14s linear infinite}
.nf__title{margin-top:18px;font-family:var(--hero);font-weight:700;font-size:clamp(28px,4vw,40px);letter-spacing:-.045em;color:#f4f4f6}
.nf__text{margin-top:12px;font-size:16px;color:rgba(237,237,237,.6)}
.nf__act{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.nf__act svg{width:16px;height:16px}
@media (max-width:480px){.nf__act{flex-direction:column;width:100%;max-width:320px}.nf__act .btn{width:100%}}
@media (prefers-reduced-motion:reduce){.nf__gear{animation:none}}