:root{
  color-scheme:light;
  --bg:#f9f9f7; --panel:#fcfcfb; --ink:#0b0b0b; --muted:#52514e;
  --faint:#898781; --rule:#e5e4dd; --edge:#c3c2b7;
  --accent:#2069c4; --warm:#ec835a; --concern:#d8653a; --ok:#2f8f5b;
  /* Marine, not black. Deep enough to read as near black, blue enough
     that the mark's gold sits warm against it instead of flat. */
  --dark:#0a1626; --dark-2:#0e1d30; --dark-ink:#ffffff; --dark-muted:#a9b6c6;
  --shell:min(100% - 44px,1080px);
  --narrow:min(100% - 44px,760px);
}

/* Dark tokens live in one block, applied two ways: by the system setting
   unless the reader has explicitly chosen light, and by the toggle. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#081220; --panel:#0e1d2e; --ink:#ffffff; --muted:#b4c2d2;
    --faint:#7e8d9e; --rule:#1b2d42; --edge:#2b4058;
    --accent:#5aa0f0; --concern:#f0845c; --ok:#54b37f;
    --dark:#060e18; --dark-2:#0b1726;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#081220; --panel:#0e1d2e; --ink:#ffffff; --muted:#b4c2d2;
  --faint:#7e8d9e; --rule:#1b2d42; --edge:#2b4058;
  --accent:#5aa0f0; --concern:#f0845c; --ok:#54b37f;
  --dark:#060e18; --dark-2:#0b1726;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,
       Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit}

.shell{width:var(--shell);margin-inline:auto}
.narrow{width:var(--narrow);margin-inline:auto}

/* ---- nav ------------------------------------------------------------ */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--rule);
}

/* ---- the sticky banner ---------------------------------------------- */
.banner{background:var(--dark);color:var(--dark-ink)}
.banner-off .banner{display:none}
.banner-in{display:flex;align-items:center;gap:11px;
           min-height:40px;padding:7px 0;font-size:14px}
.banner .dot{width:7px;height:7px;border-radius:50%;flex:none;
  background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.22)}
.banner-txt{color:var(--dark-muted);line-height:1.4}
.banner-txt b{color:var(--dark-ink);font-weight:700}
.banner-go{margin-left:auto;color:#fff;text-decoration:none;font-weight:650;
  white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.45);
  padding-bottom:1px}
.banner-go:hover{border-color:#fff}
.banner-x{appearance:none;background:none;border:0;color:var(--dark-muted);
  font-size:20px;line-height:1;cursor:pointer;padding:2px 2px 4px;flex:none}
.banner-x:hover{color:#fff}

/* ---- the light and dark toggle --------------------------------------- */
.theme-btn{appearance:none;background:none;border:1px solid var(--rule);
  color:var(--muted);border-radius:999px;width:34px;height:34px;flex:none;
  cursor:pointer;display:grid;place-items:center;padding:0}
.theme-btn:hover{border-color:var(--edge);color:var(--ink)}
.theme-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:1.7}
.ico-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ico-sun{display:none}
  :root:not([data-theme="light"]) .ico-moon{display:block}
}
:root[data-theme="dark"] .ico-sun{display:none}
:root[data-theme="dark"] .ico-moon{display:block}
:root[data-theme="light"] .ico-sun{display:block}
:root[data-theme="light"] .ico-moon{display:none}
.nav-in{display:flex;align-items:center;gap:14px;height:56px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand svg{width:26px;height:26px;color:var(--ink)}
.brand b{font-size:15.5px;font-weight:800;letter-spacing:-.035em}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav-links a{
  color:var(--muted);text-decoration:none;font-size:14px;
  transition:color .15s;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-cta{
  background:var(--ink);color:var(--bg);border-radius:999px;
  padding:8px 17px;font-size:14px;font-weight:650;text-decoration:none;
  white-space:nowrap;
}
.nav-cta:hover{opacity:.85}
.nav-toggle{display:none}

/* ---- the dark hero band --------------------------------------------- */
.hero{background:var(--dark);color:var(--dark-ink);text-align:center;
      padding:84px 0 92px}
.hero .mark{width:212px;height:212px;margin-inline:auto}
.hero h1{
  font-size:clamp(34px,5.4vw,60px);line-height:1.08;letter-spacing:-.04em;
  font-weight:800;margin:34px 0 0;
}
.hero .lede{
  color:var(--dark-muted);font-size:clamp(17px,2vw,20px);line-height:1.55;
  max-width:46ch;margin:20px auto 0;
}
/* The opening statement. It sits between the headline and the buttons
   because it is the first thing a stranger needs, not the third. */
.hero .intro{margin:34px auto 0;max-width:46ch;padding-top:28px;
  border-top:1px solid rgba(255,255,255,.16)}
.hero .intro-k{font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;
  font-weight:800;color:#fff;margin:0 0 12px}
.hero .intro-t{color:var(--dark-muted);font-size:17px;line-height:1.6;margin:0}
.hero .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
               margin-top:34px}
@media (max-width:680px){
  .hero .intro{padding-top:22px;margin-top:26px}
  .hero .intro-t{font-size:16px}
}
.btn{
  display:inline-block;border-radius:999px;padding:13px 26px;
  font-size:16px;font-weight:650;text-decoration:none;white-space:nowrap;
  transition:opacity .15s,background .15s;
}
.btn-solid{background:#fff;color:#0b0b0b}
.btn-ghost{border:1px solid rgba(255,255,255,.3);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-solid:hover{opacity:.86}
.btn-ink{background:var(--ink);color:var(--bg)}
.btn-line{border:1px solid var(--edge);color:var(--ink)}
.btn-line:hover{background:var(--panel)}

/* ---- page head for inner pages -------------------------------------- */
.phead{padding:72px 0 10px}
.phead .eyebrow{
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);font-weight:800;margin:0 0 14px;
}
.phead h1{
  font-size:clamp(30px,4.6vw,50px);line-height:1.1;letter-spacing:-.035em;
  font-weight:800;margin:0;
}
.phead .lede{color:var(--muted);font-size:19px;max-width:58ch;margin:18px 0 0}

/* ---- sections -------------------------------------------------------- */
section{padding:60px 0}
.sec-title{
  font-size:clamp(25px,3.2vw,36px);line-height:1.15;letter-spacing:-.03em;
  font-weight:800;margin:0 0 16px;
}
.sec-sub{color:var(--muted);max-width:62ch;margin:0 0 30px;font-size:17px}
.rule{border:0;border-top:1px solid var(--rule);margin:0}

/* ---- numbers band ---------------------------------------------------- */
.numbers{background:var(--panel);border-block:1px solid var(--rule)}
.num-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));
  gap:34px 24px;padding:12px 0 6px;
}
.num .v{
  font-size:clamp(38px,5vw,56px);line-height:1;letter-spacing:-.045em;
  font-weight:800;
}
.num .v small{font-size:.42em;font-weight:700;letter-spacing:-.02em;
              margin-left:.18em;color:var(--muted)}
.num p{color:var(--muted);font-size:14.5px;line-height:1.5;margin:11px 0 0;
       max-width:30ch}
.cited{margin-top:46px;padding-top:26px;border-top:1px solid var(--rule)}
.cited h3{font-size:12px;letter-spacing:.13em;text-transform:uppercase;
          color:var(--faint);font-weight:800;margin:0 0 18px}
.cited-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
            gap:22px}
.cited .v{font-size:23px;font-weight:800;letter-spacing:-.025em}
.cited p{color:var(--muted);font-size:13.5px;line-height:1.5;margin:5px 0 0}
.cited .src{color:var(--faint);font-size:12.5px;margin-top:22px}
.cited .src a{color:var(--faint)}

/* ---- cards and doors -------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(286px,1fr));
       gap:18px}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:15px;
      padding:26px 26px 28px}
.card .k{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
         color:var(--faint);font-weight:800}
.card h3{font-size:21px;letter-spacing:-.02em;margin:11px 0 9px;font-weight:750}
.card p{color:var(--muted);font-size:15.5px;line-height:1.6;margin:0}

.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(286px,1fr));
       gap:18px}
.door{
  display:block;text-decoration:none;background:var(--panel);
  border:1px solid var(--rule);border-radius:15px;padding:28px 26px 30px;
  transition:border-color .15s,transform .15s;
}
.door:hover{border-color:var(--edge);transform:translateY(-2px)}
.door h3{font-size:21px;letter-spacing:-.02em;margin:0 0 9px;font-weight:750}
.door p{color:var(--muted);font-size:15.5px;line-height:1.6;margin:0}
.door .go{color:var(--accent);font-size:15px;font-weight:650;margin-top:16px;
          display:block}

/* ---- lists ------------------------------------------------------------ */
.pts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
     gap:30px 40px}
/* Four items orphan on a three column grid, so sets of four get two. */
.pts.two{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.pt h3{font-size:18px;letter-spacing:-.015em;margin:0 0 7px;font-weight:700}
.pt p{color:var(--muted);font-size:15.5px;line-height:1.6;margin:0}
.ticks{list-style:none;padding:0;margin:0}
.ticks li{position:relative;padding-left:26px;margin-bottom:11px;
          color:var(--muted);font-size:15.5px;line-height:1.55}
.ticks li::before{content:"";position:absolute;left:3px;top:.62em;
  width:9px;height:9px;border-radius:50%;background:var(--ok)}
.ticks.no li::before{background:var(--concern)}

/* ---- call-out ---------------------------------------------------------- */
.callout{
  border-left:3px solid var(--edge);padding:4px 0 4px 22px;
  color:var(--muted);font-size:16px;line-height:1.65;max-width:68ch;
}
.callout strong{color:var(--ink)}
.floor{
  background:var(--panel);border:1px solid var(--rule);border-radius:15px;
  padding:30px 30px 32px;display:flex;gap:28px;align-items:flex-start;
  flex-wrap:wrap;
}
.floor .big{font-size:62px;line-height:1;font-weight:800;letter-spacing:-.05em}
.floor div p{margin:0;color:var(--muted);max-width:60ch;font-size:16px}
.floor div h3{margin:0 0 9px;font-size:20px;font-weight:750;
              letter-spacing:-.02em}

/* ---- pricing ----------------------------------------------------------- */
.tiers{width:100%;border-collapse:collapse;font-size:16px}
.tiers th,.tiers td{text-align:left;padding:15px 18px 15px 0;
                    border-bottom:1px solid var(--rule)}
.tiers th{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
          color:var(--faint);font-weight:800}
.tiers td b{font-weight:750}
.tiers td.n{color:var(--muted)}
.plan{background:var(--panel);border:1px solid var(--rule);border-radius:15px;
      padding:28px}
.plan .k{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
         color:var(--faint);font-weight:800}
.plan .price{font-size:40px;font-weight:800;letter-spacing:-.04em;margin:10px 0 2px}
.plan .per{color:var(--faint);font-size:14px}
.plan ul{margin:18px 0 0;padding:0;list-style:none}
.plan li{color:var(--muted);font-size:15px;line-height:1.55;padding-left:20px;
         position:relative;margin-bottom:9px}
.plan li::before{content:"";position:absolute;left:2px;top:.6em;width:7px;
  height:7px;border-radius:50%;background:var(--edge)}

/* ---- diagram ------------------------------------------------------------ */
.diagram{overflow-x:auto}
.diagram figure{margin:0;min-width:0}
.diagram svg{width:100%;height:auto;border:1px solid var(--rule);
  border-radius:14px;background:var(--panel);padding:14px;color:var(--ink)}
.diagram figcaption{font-size:15px;color:var(--muted);line-height:1.65;
  margin-top:18px;max-width:80ch}
.diagram figcaption strong{color:var(--ink)}
.d-ink{stroke:currentColor;fill:none}
.d-fill{fill:currentColor}
.d-faint{stroke:var(--edge);fill:none}
.d-key{stroke:var(--accent);fill:none}
.d-keyfill{fill:var(--accent)}
.d-t{fill:currentColor;font:13px system-ui,-apple-system,"Segoe UI",sans-serif}
.d-t.sm{font-size:11.5px;fill:var(--muted)}
.d-t.hd{font-size:11px;font-weight:700;letter-spacing:.09em;fill:var(--faint)}
.d-t.b{font-weight:600}
.d-stop{stroke:var(--concern);fill:none}
.d-stopt{fill:var(--concern);font:11.5px system-ui,sans-serif}
.d-stoph{fill:var(--concern);font:700 11px system-ui,sans-serif;
         letter-spacing:.07em}

/* ---- closing band and footer --------------------------------------------- */
.close{background:var(--dark-2);color:var(--dark-ink);text-align:center;
       padding:76px 0 82px}
.close h2{font-size:clamp(27px,3.6vw,40px);line-height:1.15;
          letter-spacing:-.035em;font-weight:800;margin:0}
.close p{color:var(--dark-muted);max-width:50ch;margin:18px auto 0;font-size:17px}
.close .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
                margin-top:30px}

footer{border-top:1px solid var(--rule);padding:34px 0 46px;
       color:var(--faint);font-size:14px}
.foot-in{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.foot-in a{color:var(--faint);text-decoration:none}
.foot-in a:hover{color:var(--ink)}
.foot-links{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}

/* ---- phone ---------------------------------------------------------------- */
@media (max-width:860px){
  .nav-links{gap:18px}
  .nav-links a{font-size:13.5px}
}
/* Hard breaks are for wide screens. On a phone they make nonsense of a
   headline that is already wrapping. */
br.wide{display:inline}
@media (max-width:680px){
  br.wide{display:none}
  :root{--shell:min(100% - 32px,1080px);--narrow:min(100% - 32px,760px)}
  body{font-size:16px}
  section{padding:46px 0}
  .hero{padding:58px 0 64px}
  .hero .mark{width:150px;height:150px}
  .nav-in{height:52px}
  .nav-links{display:none}
  .nav-cta{margin-left:auto}
  .num-grid{gap:28px 22px}
  .floor{gap:18px}
  .floor .big{font-size:48px}
  .btn{padding:12px 22px;font-size:15px}
}


/* ---- the animated explainer ------------------------------------------- */
.explain-wrap{background:var(--panel);border-block:1px solid var(--rule)}
.explain{margin:0}
.explain svg{width:100%;height:auto;display:block;
  border:1px solid var(--rule);border-radius:16px;background:var(--bg);
  padding:10px}
.explain figcaption{color:var(--faint);font-size:13px;margin-top:14px;
  max-width:74ch}
/* These need the same weight as ".explain svg" above or they lose. */
.explain svg.ex-tall{display:none}
@media (max-width:700px){
  .explain svg.ex-wide{display:none}
  .explain svg.ex-tall{display:block}
  .explain svg{padding:6px}
  .explain figcaption{font-size:12.5px}
}