/* Docs, legal, changelog and newsletter pages. Loaded after site.css, which brings the tokens,
   nav, buttons and footer; this file adds the cloud band the title sits in and the reading sheet.
   Deliberately plain inside the sheet, because these pages are read, not scanned. */

/* Names the newsletter pages' inline styles still use, mapped onto the cobalt palette. */
:root{--acc:var(--blue-2);--bg-1:var(--page);--bg-2:var(--page-2);--line-2:#d3d0ef;--ink-3:#69669a}

.page-hero{position:relative;overflow:hidden;color:#fff;padding:116px 0 230px;background:linear-gradient(180deg,#1a1394 0%,var(--blue) 45%,#2a20dc 72%,#7a74ee 90%,var(--page) 100%)}
.page-hero.slim{padding:96px 0 200px}
.page-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1.4px);background-size:62px 62px;opacity:.25;pointer-events:none}
.page-hero .sky{position:absolute;left:0;right:0;bottom:0;height:250px;overflow:hidden;pointer-events:none}
.page-hero .sky img{width:100%;min-width:900px;margin-left:50%;transform:translateX(-50%);opacity:.9;-webkit-mask-image:linear-gradient(180deg,#000 35%,transparent 85%);mask-image:linear-gradient(180deg,#000 35%,transparent 85%)}
.page-hero .sky::after{content:"";position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(transparent,var(--page))}
.page-hero .wrap{position:relative;z-index:1;max-width:820px}
.crumb{font-size:13.5px;color:#cfcbff;margin-bottom:14px}
.crumb a{color:#fff;text-decoration:none}
.crumb a:hover{text-decoration:underline}
.page-hero h1{font-size:clamp(36px,5vw,56px);letter-spacing:-.045em;line-height:1.02;max-width:14em}
.page-hero .updated{margin-top:14px;font-size:16px;color:#dcd9ff;max-width:40em}
.page-hero .lang{margin-top:10px;font-size:13.5px;color:#c3beff}
.page-hero .lang a{color:#fff}
.js .page-hero .wrap>*{animation:rise .9s var(--ease) both}
.js .page-hero .wrap>:nth-child(2){animation-delay:.08s}
.js .page-hero .wrap>:nth-child(3){animation-delay:.16s}
.js .page-hero .wrap>:nth-child(4){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}

.page-main{position:relative;z-index:2;margin-top:-130px;padding-bottom:clamp(70px,9vw,110px)}
.sheet{width:min(820px,100% - 2*var(--gut));margin:0 auto;background:#fff;border-radius:28px;padding:clamp(26px,4.5vw,52px);box-shadow:0 1px 2px rgba(17,12,88,.05),0 30px 60px -30px rgba(17,12,88,.3);line-height:1.7;font-size:15.5px;color:var(--ink-2)}
.sheet>:first-child{margin-top:0}
.sheet h2{font-size:22px;letter-spacing:-.025em;line-height:1.25;color:var(--ink);margin:40px 0 12px;padding-top:28px;border-top:1px solid var(--line)}
.sheet h2:first-child,.sheet .box+h2{border-top:0;padding-top:0}
.sheet h3{font-size:16.5px;letter-spacing:-.01em;color:var(--ink);margin:24px 0 8px}
.sheet p{margin-bottom:14px}
.sheet strong,.sheet b{color:var(--ink);font-weight:600}
.sheet a{color:var(--blue-2);text-decoration:underline;text-decoration-color:rgba(26,16,184,.3);text-underline-offset:3px}
.sheet a:hover{text-decoration-color:currentColor}
.sheet ul,.sheet ol{margin:0 0 16px 22px}
.sheet li{margin-bottom:7px}
.sheet li::marker{color:var(--blue-hi)}
.sheet dl{margin-bottom:16px}
.sheet dt{color:var(--ink);font-weight:600;margin-top:12px}
.sheet table{width:100%;border-collapse:collapse;margin:6px 0 20px;font-size:14px}
.sheet th,.sheet td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.sheet th{color:var(--ink-3);font-weight:600;font-size:12.5px;white-space:nowrap;background:var(--page);border-bottom:0}
.sheet th:first-child{border-radius:10px 0 0 10px}
.sheet th:last-child{border-radius:0 10px 10px 0}
.sheet td:first-child{color:var(--ink);white-space:nowrap}
/* The legal pages use a short label column, so nowrap suits them. A docs table
   whose first column carries prose opts out with class="wide". */
.sheet table.wide td:first-child{white-space:normal}
.box{border-radius:18px;background:var(--page);padding:18px 20px;margin-bottom:24px}
.box p:last-child{margin-bottom:0}
.sheet code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:var(--page);color:var(--ink);border-radius:6px;padding:2px 6px;overflow-wrap:anywhere}
.sheet pre{background:var(--navy);color:#e6e4ff;border-radius:16px;padding:18px 20px;overflow-x:auto;margin:18px 0}
.sheet pre code{background:none;color:inherit;padding:0;white-space:pre;font-size:12.5px;line-height:1.6}
.sheet .cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:0 0 10px;padding:0;list-style:none}
.cards li{margin:0}
.sheet .cards a{display:block;height:100%;padding:20px 22px;border-radius:20px;background:linear-gradient(180deg,#1f14de,#1a10c4 55%,#130c9a);color:#fff;text-decoration:none;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.sheet .cards a:hover{transform:translateY(-4px);box-shadow:0 22px 40px -20px rgba(17,12,88,.6)}
.cards strong{display:block;color:#fff;font-size:16.5px;letter-spacing:-.015em;margin-bottom:6px}
.cards span{color:#cfcbff;font-size:13.5px;line-height:1.5}
.rel{display:flex;gap:10px;flex-wrap:wrap;font-size:13.5px;margin-top:36px;padding-top:22px;border-top:1px solid var(--line)}
.sheet .rel a{text-decoration:none;background:var(--page);padding:7px 14px;border-radius:99px;font-weight:600}
.sheet .rel a:hover{background:var(--page-2)}
.lang{font-size:13px}

@media (max-width:600px){
  .page-hero{padding:92px 0 210px}
  .page-hero .sky{height:200px}
  .sheet{border-radius:22px}
  .sheet table{display:block;overflow-x:auto}
}

/* Newsletter pages keep their own small inline styles; these win over them where the palette changed. */
.nav .btn-nav{height:36px;border:0;border-radius:11px;background:var(--blue-2);color:#fff;text-decoration:none}
.nav.dark .btn-nav{background:#fff;color:var(--blue-2)}
.foot .btn-white{height:40px;border:0;border-radius:12px;background:#fff;color:var(--blue-2);text-decoration:none}
.sheet .card .btn{height:42px;border-radius:12px;border-color:transparent;text-decoration:none}
.sheet .card .btn.primary{background:var(--blue-2);color:#fff}
.sheet .card h1{color:var(--ink);font-size:28px;letter-spacing:-.03em}

.page-hero.slim .sky{height:170px}