/* Area pages: a simple, flat background. No canvas, no 3D, no scripts besides the menu toggle. */
body{background:#0F1210}
.page.inner.area{
  --panel:rgba(30,36,32,.66);--panel-blur:0px;
  background:
    radial-gradient(1100px 640px at 88% -6%, rgba(76,122,94,.30), transparent 62%),
    radial-gradient(900px 560px at -8% 34%, rgba(255,90,31,.07), transparent 60%),
    radial-gradient(1000px 720px at 100% 80%, rgba(159,208,180,.10), transparent 60%),
    #0F1210;
}
/* with nothing behind them, drop the heavy text shadows the 3D pages needed */
.area .sky h1,.area .sky h2,.area .sky .lede,.area .glass,.area .glass .lede,.area .card,.area .wrap.box,.area .faq details,.area .sky .head p,.area .sky .text-link{text-shadow:none}
.area .page .glass,.area .glass{background:var(--panel)}

.area .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.88rem;color:var(--muted)}
.area .crumbs a{color:var(--on-dark-2);text-decoration:none;text-underline-offset:3px}
.area .crumbs a:hover{text-decoration:underline}
.area .crumbs span{opacity:.7}
.area .chips.big{gap:10px}
.area .chips.big span{padding:9px 16px;font-size:.95rem}
.area .chips.links a{padding:10px 16px;border-radius:999px;background:rgba(245,246,244,.1);color:var(--paper);text-decoration:none;font-size:.95rem;border:1px solid transparent}
.area .chips.links a:hover{border-color:rgba(159,208,180,.55)}
.area a.card .go{margin-top:auto}
.area .hero-inner h1{max-width:18em}

.area .glance{display:flex;flex-direction:column;gap:16px;align-self:center}
.area .glance h2{font-size:1.25rem;line-height:1.2}
.area .glance dl{margin:0;display:flex;flex-direction:column}
.area .glance dl div{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-top:1px solid var(--line-dark)}
.area .glance dt{font-size:.76rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--mint)}
.area .glance dd{margin:0;color:var(--on-dark-2)}