/* Layout: frame, the raised top bar, the floating menu, sections, sub-page heroes, pager, footer. */
.wrap{max-width:var(--max);margin-inline:auto;padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
.sect{padding-block:var(--sect)}
.sect.rule{border-top:1px solid var(--line)}
.grid-bg{background:none}

/* Top bar: a raised titanium bar with an edge and a shadow, so content never runs into it */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:linear-gradient(180deg,var(--panel-a) 0%,var(--panel-b) 100%);border-bottom:1px solid var(--edge);box-shadow:var(--sh-bar)}
.hdr-row{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--hdr-h)}
.brand{display:inline-flex;align-items:center;gap:12px;flex:none;color:var(--fg)}
.brand:hover{color:var(--fg)}
.brand img{display:block;width:40px;height:40px;flex:none}
.brand b{font-size:19px;font-weight:700;font-stretch:var(--wide);letter-spacing:.08em;line-height:1;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand b span{background:none;-webkit-text-fill-color:var(--signal);color:var(--signal)}
.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);font-size:15px;font-weight:550}
.nav a{position:relative;padding-block:8px;color:var(--fg-2);transition:color .2s}
.nav a:hover{color:var(--fg)}
.nav a[aria-current="page"]{color:var(--fg)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--signal);box-shadow:0 0 10px rgba(98,225,239,.6)}
.hdr-end{display:flex;align-items:center;gap:10px}
.menu-btn{display:none;align-items:center;gap:10px;height:44px;padding:0 15px;border:1px solid var(--edge);border-radius:var(--radius-key);background:linear-gradient(180deg,var(--key-a) 0%,var(--key-b) 100%);box-shadow:var(--sh-key);color:var(--fg);font-family:var(--f-sans);font-size:15px;font-weight:650;cursor:pointer}
.menu-btn:active{box-shadow:var(--sh-key-down);transform:translateY(1px)}
.menu-btn i{display:grid;gap:4px;width:14px}
.menu-btn i::before,.menu-btn i::after{content:"";height:1.6px;border-radius:1px;background:currentColor;transition:transform .2s}
.menu-btn[aria-expanded="true"] i::before{transform:translateY(2.8px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i::after{transform:translateY(-2.8px) rotate(-45deg)}

/* Floating menu over the page, as in the app */
.menu{position:absolute;left:0;right:0;top:100%;padding-top:10px}
.menu .wrap{display:grid}
.menu .sheet{display:grid;padding:8px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,var(--panel-a) 0%,var(--panel-b) 100%);box-shadow:var(--sh-panel),0 30px 60px -20px rgba(0,0,0,.9)}
.menu a{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:54px;padding:0 14px;border-radius:12px;color:var(--fg);font-size:17px;font-weight:550}
.menu a+a{box-shadow:inset 0 1px 0 var(--line)}
.menu a:hover{background:rgba(255,255,255,.04)}
.menu a .label{font-size:12.5px;font-weight:600;color:var(--muted)}
.menu a[aria-current="page"]{color:var(--signal)}
.menu a.btn{justify-content:center;margin-top:8px;box-shadow:var(--sh-silver);color:var(--silver-ink)}
.menu a.btn.btn-ghost{box-shadow:var(--sh-key);color:var(--fg)}
@media (max-width:1080px){.nav{display:none}.menu-btn{display:inline-flex}}
@media (min-width:1081px){.menu{display:none!important}}
@media (max-width:620px){.hdr-end>.btn{display:none}:root{--hdr-h:68px}.brand img{width:36px;height:36px}.brand b{font-size:17px}}

/* Section heads */
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 48px;margin-bottom:clamp(32px,4vw,52px)}
.head>div{display:grid;gap:16px;max-width:780px}
.head .lede{max-width:460px}
.head.center{flex-direction:column;align-items:center;text-align:center}
.head.center>div{justify-items:center}
.head.center .lede{max-width:760px}

/* Splits */
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 24px;align-items:start}
.split>.text{grid-column:span 5;display:grid;gap:26px;align-content:start;min-width:0}
.split>.visual{grid-column:7 / span 6;min-width:0}
.split.rev>.visual{grid-column:1 / span 6;grid-row:1}
.split.rev>.text{grid-column:8 / span 5}
@media (max-width:980px){.split>.text,.split>.visual,.split.rev>.text,.split.rev>.visual{grid-column:1/-1;grid-row:auto}}

/* Sub-page hero */
.page-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.page-hero .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px 24px;align-items:center;padding-block:clamp(48px,6.4vw,92px)}
.page-hero .text{grid-column:span 6;display:grid;gap:26px;align-content:center;min-width:0}
.page-hero .visual{grid-column:7 / span 6;min-width:0}
.page-hero h1{font-size:clamp(36px,4.4vw,62px);line-height:1.02;letter-spacing:-.02em;font-weight:600}
.page-hero h1 span{font-weight:650}
.page-hero h1 .steel{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:980px){.page-hero .text,.page-hero .visual{grid-column:1/-1}}
.crumbs{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;color:var(--muted)}
.crumbs a{color:var(--fg-2)}
.crumbs a:hover{color:var(--fg)}
.facts-row{display:flex;flex-wrap:wrap;gap:10px;padding-top:6px;font-size:var(--fs-small);color:var(--fg)}
.facts-row>span{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 14px;border:1px solid rgba(0,0,0,.42);border-radius:12px;background:var(--bg-2);box-shadow:var(--sh-well)}
.facts-row b{font-size:12.5px;font-weight:650;color:var(--muted)}

/* Layer pager: two keys */
.pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding-block:8px}
.pager a{display:grid;gap:6px;padding:22px 24px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel-a) 0%,var(--panel-b) 100%);box-shadow:var(--sh-panel);color:var(--fg);transition:transform .2s}
.pager a+a{text-align:right}
.pager a:hover{transform:translateY(-2px)}
.pager b{font-size:clamp(20px,2.2vw,28px);font-weight:620;font-stretch:var(--wide);letter-spacing:-.01em;transition:color .2s}
.pager a:hover b{color:var(--signal)}
@media (max-width:560px){.pager{grid-template-columns:minmax(0,1fr)}.pager a+a{text-align:left}}

/* Footer */
.ftr{margin-top:56px;padding-block:52px 44px;border-top:1px solid var(--edge);background:var(--bg-3);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.ftr .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px}
.ftr-id{display:grid;gap:14px}
.ftr-id .brand img{width:44px;height:44px}
.ftr-id .brand b{font-size:21px}
.ftr-id p{color:var(--muted);font-size:var(--fs-small)}
.ftr nav{display:flex;flex-wrap:wrap;gap:12px 30px;font-size:var(--fs-small)}
.ftr nav a{color:var(--fg-2)}
.ftr nav a:hover{color:var(--fg)}
.ftr-end{display:grid;justify-items:end;gap:10px}
.replay{height:44px;padding:0;border:0;background:none;color:var(--fg-2);font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.replay:hover{color:var(--fg)}
.legal{color:var(--muted);font-size:12.5px}
.disclaim{max-width:var(--max);margin:26px auto 0;padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px));color:var(--muted);font-size:12.5px}
@media (max-width:760px){.ftr .wrap{flex-direction:column;align-items:flex-start}.ftr-end{justify-items:start}}

/* Two equal columns */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px;align-items:start}
.two>*{min-width:0}
.page-hero .text.wide{grid-column:span 9}
@media (max-width:980px){.two{grid-template-columns:minmax(0,1fr)}.page-hero .text.wide{grid-column:1/-1}}