/* The shell every page outside the landing page wears.

   The landing page keeps its own stylesheet — it is a long sales page with a
   video hero and nothing else on the site looks like it, and prising the two
   apart would be a rewrite of the page that earns the money. What lives here
   is the rest of the site: the bar across the top, the footer, and the column
   of readable text between them. The palette and the display face are lifted
   from the landing page exactly, so the two read as one site. */

:root{
  --bg:#0a0b14; --panel:#141620; --raised:#181a26; --line:#26283a;
  --ink:#f5f5f7; --dim:#9a9cb0; --faint:#6a6c82;
  --accent:#0a84ff; --accentSoft:#4da3ff; --gold:#ffcc00; --good:#30d158;
  --measure:70ch;
}

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brandName{ font-family:Archivo,-apple-system,sans-serif; letter-spacing:-.02em }
a{ color:var(--accentSoft) }

/* ---- the bar ---------------------------------------------------------- */
/* Sticky, because these pages are long enough to lose the way out of. The
   blur keeps the hairline honest over anything that scrolls beneath it. */
.bar{
  position:sticky; top:0; z-index:50;
  background:#0a0b14e6; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.barIn{
  max-width:1080px; margin:0 auto; padding:0 20px;
  height:60px; display:flex; align-items:center; gap:22px;
}
.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); flex:none }
.brand img{ width:32px; height:32px; display:block }
.brandName{ font-weight:800; font-size:15.5px; letter-spacing:-.01em }
.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; flex-wrap:wrap }
.nav a{
  color:var(--dim); text-decoration:none; font-size:14.5px; font-weight:600;
  padding:8px 11px; border-radius:9px; white-space:nowrap;
}
.nav a:hover{ color:var(--ink); background:#ffffff0d }
.nav a.here{ color:var(--ink) }
.nav a.cta{
  color:#fff; background:var(--accent); padding:8px 15px;
  box-shadow:0 6px 18px #0a84ff33;
}
.nav a.cta:hover{ background:#0a84ff; filter:brightness(1.08) }
/* Same on a phone as on the landing page: the text links go and the mark
   grows into the room. Plans stays, because it is the only route to buying on
   a page that is otherwise all reading, and because a filled button is not
   what was crowding the bar — three grey words were. */
@media (max-width:560px){
  .barIn{ height:62px; padding:0 14px; gap:10px; flex-wrap:nowrap }
  .brand img{ width:38px; height:38px }
  .brandName{ font-size:16px }
  .nav{ margin-left:auto; gap:4px }
  .nav a{ display:none }
  .nav a.cta, .nav a[href="/account.html"]{ display:inline-flex; padding:9px 14px; font-size:14px }
}

/* ---- the page --------------------------------------------------------- */
.page{ max-width:1080px; margin:0 auto; padding:0 20px 90px }
.lede{ padding:64px 0 30px; border-bottom:1px solid var(--line); margin-bottom:38px }
.lede .kicker{
  color:var(--faint); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; margin-bottom:14px;
}
.lede h1{ margin:0; font-size:clamp(30px,5vw,46px); line-height:1.1; font-weight:800; text-wrap:balance }
.lede p{ color:var(--dim); font-size:18px; margin:16px 0 0; max-width:var(--measure) }
@media (max-width:560px){ .lede{ padding:38px 0 24px } }

.prose{ max-width:var(--measure) }
.prose h2{ font-size:23px; margin:44px 0 12px; font-weight:700; text-wrap:balance }
.prose h3{ font-size:17px; margin:28px 0 7px; font-weight:700 }
.prose p{ color:var(--dim); margin:0 0 15px }
.prose strong{ color:var(--ink); font-weight:650 }
.prose ul{ color:var(--dim); margin:0 0 15px; padding-left:20px }
.prose li{ margin:0 0 7px }
.prose li::marker{ color:var(--faint) }
.prose a{ color:var(--accentSoft) }

/* A statement that should stop the eye — used once or twice a page, never as
   decoration on every other paragraph. */
.pull{
  border-left:2px solid var(--accent); padding:2px 0 2px 18px;
  margin:26px 0; color:var(--ink); font-size:18px; line-height:1.5;
}

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:22px 24px; margin:0 0 14px;
}
.card h3{ margin:0 0 8px; font-size:17px }
.card p:last-child{ margin-bottom:0 }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:none }
@media (max-width:720px){ .grid2{ grid-template-columns:1fr } }

/* ---- the footer ------------------------------------------------------- */
.foot{ border-top:1px solid var(--line); margin-top:70px }
.footIn{
  max-width:1080px; margin:0 auto; padding:30px 20px 46px;
  display:flex; gap:18px; flex-wrap:wrap; align-items:center;
  color:var(--faint); font-size:13.5px;
}
.footIn a{ color:var(--dim); text-decoration:none }
.footIn a:hover{ color:var(--ink) }
.footIn .sep{ margin-left:auto }
@media (max-width:560px){ .footIn .sep{ margin-left:0; width:100% } }

/* ---- focus ------------------------------------------------------------ */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accentSoft); outline-offset:2px; border-radius:6px;
}
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important } }