@font-face{
  font-family:"Permanent Marker";
  src:url("/fonts/permanent-marker.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
*{box-sizing:border-box}
html{
  height:100%;
  scroll-behavior:smooth;
  font-size:max(15px,0.9vw + 0.65rem);
}
body{
  min-height:100dvh;
  margin:0;
  background-color:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
.mini-mark{display:block;width:max-content;text-decoration:none}
.mini-mark:hover{color:var(--ink)}
.mini-mark:focus-visible{outline:2px solid var(--tag);outline-offset:.3rem}
.heading-emoji{display:inline-block;margin-right:.2em;font-size:.62em;vertical-align:.15em;letter-spacing:0}

/* ── APP SHELL ────────────────────────────────────────────────
   A CSS grid, not a two-column flex split — the document is the
   center of this layout, not one half of a divided viewport. Three
   named areas, only some of which are active at any given width:

     narrow  "nav"           — single column, nav collapsed above .doc
     normal  "nav doc"       — nav a fixed-width pinned card, .doc
                                takes the remaining space and centers
                                itself in it via its own max-width
     wide    "nav doc aside" — a second pane (future: page summary,
                                or a "second document") joins right
                                of .doc, and .doc's own centered
                                column shifts left to make room

   .rail and any future .aside are fixed-width grid tracks; .doc is
   the only `1fr` track, so it's the one that grows or shrinks as the
   viewport does. Centering the document — not filling a fixed split
   — is the point: extra width goes to breathing room and the aside
   track, never to stretching the reading column past a comfortable
   line length. */
.app{
  --app-gap:1.25rem;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"nav" "doc" "aside" "terminal";
  align-items:start;
  gap:var(--app-gap);
  /* No max-width here on purpose — .app spans the full viewport.
     .doc's own max-width (below) is what actually bounds the
     reading column; capping .app on top of that just doubled up as
     a second, redundant ceiling that left dead symmetric margins
     outside the whole layout once a wide viewport hit it — .doc was
     already done growing on its own. One cap, on the thing that
     actually needs one. */
  min-height:100dvh;
  padding:1.25rem clamp(1rem,3vw,2.5rem) 0;
  overflow-x:clip;
}

/* Medium: the pane sits beneath the rail in the nav column. The rail
   row is sized to the rail, so the pane's cell takes the rest of the
   document's height and its sticky top holds while .doc scrolls. */
@media (min-width:56rem){
  .app{
    --app-gap:clamp(1.5rem,3vw,3rem);
    /* max-content, not a fixed 256px: the nav track only holds
       "Sign in"/"Start free" now that the brand row is gone, so it
       has no reason to claim a fixed width wider than that content
       — every px it doesn't need is a px .doc doesn't get. */
    grid-template-columns:max-content minmax(0,1fr);
    grid-template-rows:auto 1fr;
    grid-template-areas:"nav doc" "aside doc" "terminal terminal";
    gap:var(--app-gap);
  }
}

@media (min-width:100rem){
  .app{
    grid-template-columns:max-content minmax(0,1fr) minmax(288px,416px);
    grid-template-rows:auto;
    grid-template-areas:"nav doc aside" "terminal terminal terminal";
  }
  html{
    font-size:max(15px,0.7vw + 0.55rem);
  }
}

/* ── RAIL ─────────────────────────────────────────────────────
   A floating card pinned top-left of the document — rounded
   corners, no border, sticky so it holds its position while .doc
   scrolls past it. Same nav surface the session and web apps share,
   just worn as a card here instead of a rail.

   Frosted, not opaque, and neutral grey rather than the page's own
   tinted --surface — this page has nothing behind the rail today, but
   the surface is built for the case that does: a full-screen
   document or map running edge-to-edge underneath, the way the
   session/web apps' own chrome floats over live content. Grey reads
   as chrome regardless of what's under it; --surface would tint
   whatever shows through toward this page's own palette instead of
   staying neutral. No border: the blur plus the ground color shift
   is the seam now, not a hairline. */
.rail{
  grid-area:nav;
  position:sticky;
  z-index:30;
  top:1.25rem;
  display:flex;
  flex-direction:column;
  padding:1.1rem 1.25rem 1.25rem;
  border-radius:1rem;
  background-color:var(--frost);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
}
/* The nav's own first child now that the brand row is gone, so its
   top space comes from .rail's own padding — no margin-top here. */
.rail-nav{
  display:flex;
  flex-direction:column;
  gap:0.15rem;
}
.marketing-session-frame{display:contents}
/* Classic app-nav links, not terminal prompts: sans, plain cream —
   no mono, no leading ">", no dimmed/accent split between the
   two. A hover chip (background + radius) is the only affordance,
   the same vocabulary as any other app sidebar. Negative margin
   cancels the padding so the chip's edges align with .rail's own
   content column instead of bleeding wider or sitting inset. */
.rail-link{
  display:flex;
  align-items:center;
  gap:0.5rem;
  margin:0 -0.6rem;
  padding:0.2rem 0.6rem;
  border-radius:0.5rem;
  font-family:var(--sans);
  font-size:0.72rem;
  font-weight:var(--rail-link-weight);
  color:var(--ink);
  transition:background-color .15s ease;
}
.rail-link:hover{background-color:color-mix(in srgb, var(--ink) 14%, transparent)}
.rail-link-icon{
  width:0.9em;
  height:0.9em;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.icon-rail{
  position:sticky;
  top:1.25rem;
  width:3rem;
  padding:0;
  border-radius:0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.icon-rail .rail-nav{gap:.55rem}
.icon-rail .rail-link{
  position:relative;
  justify-content:center;
  width:3rem;
  height:3rem;
  margin:0;
  padding:0;
  border-radius:.65rem;
  background-color:var(--frost);
  font-size:1rem;
}
.icon-rail .rail-link:hover{background-color:color-mix(in srgb,var(--ink) 18%,var(--frost))}
.icon-rail .rail-link:focus-visible{outline:2px solid var(--tag);outline-offset:3px}
.icon-rail .rail-link-icon{width:1.15rem;height:1.15rem}
@media(min-width:56rem){
  .icon-rail .rail-link::after{
    content:attr(aria-label);
    position:absolute;
    left:calc(100% + .65rem);
    z-index:2;
    padding:.35em .6em;
    border:0;
    border-radius:1px;
    background:var(--frost);
    box-shadow:0 8px 24px var(--frost-shadow);
    color:var(--ink);
    font-family:var(--font-system);
    font-size:.72rem;
    font-weight:650;
    letter-spacing:0;
    line-height:1.4;
    text-transform:none;
    white-space:nowrap;
    opacity:0;
    transform:translateX(-4px);
    transition:opacity .15s ease,transform .15s ease;
    pointer-events:none;
  }
  .icon-rail .rail-link:hover::after,
  .icon-rail .rail-link:focus-visible::after{opacity:1;transform:translateX(0)}
}
@media(max-width:55.9375rem){
  .icon-rail{position:relative;top:0;width:auto}
  .icon-rail .rail-nav{flex-direction:row}
}
.marketing-rail .rail-nav{gap:.45rem}
.marketing-rail{
  --marketing-rail-surface:#ece7d8;
  --marketing-rail-surface-hover:#f7f1e2;
}
.marketing-rail.is-past-hero{
  --marketing-rail-surface:var(--paper);
  --marketing-rail-surface-hover:var(--surface);
}
.marketing-rail .rail-link{
  height:3rem;
  background-color:var(--marketing-rail-surface);
  box-shadow:0 8px 24px rgba(23,19,15,.08);
}
.marketing-rail .rail-link:hover{background-color:var(--marketing-rail-surface-hover)}
.marketing-rail.is-over-map .rail-link{
  background-color:rgba(236,231,216,.68);
  backdrop-filter:blur(16px) saturate(75%);
  -webkit-backdrop-filter:blur(16px) saturate(75%);
  box-shadow:0 8px 28px rgba(0,0,0,.22);
}
.marketing-rail.is-over-map .rail-link:hover{background-color:rgba(247,241,226,.82)}
.marketing-rail .rail-link-icon{
  width:1.3rem;
  height:1.3rem;
  fill:currentColor;
  stroke:none;
}
@media(min-width:64rem){
  .marketing-rail{width:9.5rem}
  .marketing-rail .rail-link{justify-content:flex-start;width:100%;gap:.7rem;padding:0 .85rem}
  .marketing-rail .rail-link::after{display:none}
  .marketing-rail .rail-label{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:nowrap;font-size:.72rem}
}
@media(max-width:55.9375rem){
  .marketing-rail{width:100%}
  .marketing-rail .rail-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem}
  .marketing-rail .rail-link{justify-content:flex-start;width:100%;height:2.65rem;gap:.7rem;padding:0 .85rem}
  .marketing-rail .rail-label{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:nowrap;font-size:.72rem}
}

/* Toggle button — only meaningful (and only shown) below the
   normal-width breakpoint, where the rail collapses. */
.nav-toggle{
  display:none;
  position:absolute;
  top:1.1rem;
  right:1.25rem;
  align-items:center;
  justify-content:center;
  width:2rem;
  height:2rem;
  padding:0;
  border:1px solid var(--line);
  border-radius:0.4rem;
  background:transparent;
  cursor:pointer;
}
.nav-toggle-glyph{
  position:relative;
  display:block;
  width:0.7rem;
  height:0.55rem;
}
.nav-toggle-glyph,
.nav-toggle-glyph:before,
.nav-toggle-glyph:after{
  border-top:1.5px solid var(--muted);
}
.nav-toggle-glyph:before,
.nav-toggle-glyph:after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
}
.nav-toggle-glyph:before{top:0.22rem}
.nav-toggle-glyph:after{top:0.44rem}
.nav-toggle:hover .nav-toggle-glyph,
.nav-toggle:hover .nav-toggle-glyph:before,
.nav-toggle:hover .nav-toggle-glyph:after{border-color:var(--tag)}
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (max-width:55.9375rem){
  /* Rail collapses to a single bar above the document: brand +
     toggle visible, .rail-nav folded to zero height until tapped
     open. `.rail-collapsed` is added by JS before first paint, so a
     no-JS visitor instead gets the nav links open and always
     visible — degrading to more content shown, never less. */
  .nav-toggle{display:inline-flex}
  .rail-collapsed .rail-nav{
    margin-top:0;
    overflow:hidden;
    max-height:0;
    opacity:0;
    transition:max-height .3s ease, opacity .25s ease, margin-top .3s ease;
  }
  .rail-collapsed.rail-open .rail-nav{
    margin-top:1.1rem;
    max-height:10rem;
    opacity:1;
  }
}

.pane{grid-area:aside;position:sticky;top:1.25rem;min-width:0;border:1px solid var(--line);border-radius:1rem;background:var(--surface);overflow:hidden}
.pane-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;position:relative;z-index:2}
.pane-title{font:650 .78rem/1 var(--font-system);color:var(--ink);white-space:nowrap}
.pane-title small{display:block;margin-top:.5rem;font-size:.68rem;color:var(--muted);font-weight:450;text-transform:none;letter-spacing:0}
.pane-expand{appearance:none;padding:.55rem .7rem;border:1px solid var(--line);border-radius:.5rem;background:var(--surface);color:var(--ink);font:600 .75rem/1 var(--font-system);cursor:pointer;white-space:nowrap}
.pane-expand:focus-visible,.doc-return:focus-visible,.map-controls button:focus-visible,.route-horizon button:focus-visible,.route-manifest button:focus-visible,.route-map-marker:focus-visible{outline:2px solid var(--tag);outline-offset:3px}
.map-pane{border-color:rgba(244,241,234,.35);background:rgba(4,4,4,.94);box-shadow:0 18px 55px rgba(0,0,0,.32);color:#f4f1ea}
.map-pane .pane-head{background:rgba(4,4,4,.9);backdrop-filter:blur(16px) saturate(70%);-webkit-backdrop-filter:blur(16px) saturate(70%)}
.map-pane .pane-title,.map-pane .pane-title small{color:#f4f1ea}
.map-pane .pane-expand{border-color:rgba(244,241,234,.35);background:rgba(244,241,234,.08);color:#f4f1ea}
.field-map{position:relative;height:480px;overflow:hidden;background:#070706;touch-action:pan-y;cursor:grab}
.field-map:active{cursor:grabbing}
.field-map > .field-map-canvas{position:absolute;inset:0;width:100%;height:100%}
.field-map .maplibregl-canvas{width:100%!important;height:100%!important;touch-action:pan-y!important}
.field-map::before,.field-map::after{content:"";position:absolute;inset:0;z-index:1;opacity:var(--technical-grid-opacity,1);transition:opacity .18s linear;pointer-events:none}
.field-map::before{background-image:linear-gradient(rgba(244,241,234,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(244,241,234,.13) 1px,transparent 1px),linear-gradient(rgba(244,241,234,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(244,241,234,.28) 1px,transparent 1px);background-size:40px 40px,40px 40px,160px 160px,160px 160px;mix-blend-mode:screen}
.field-map::after{inset:33% 0 auto;height:1px;background:repeating-linear-gradient(90deg,rgba(244,241,234,.55) 0 7px,transparent 7px 13px);box-shadow:0 160px 0 rgba(244,241,234,.35)}
.map-controls{position:absolute;z-index:3;left:16px;top:16px;display:grid;gap:4px}
.map-controls button{width:38px;height:38px;border:1px solid rgba(244,241,234,.42);border-radius:4px;background:rgba(4,4,4,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#f4f1ea;font:22px var(--font-system);cursor:pointer}
.map-unavailable .map-controls{display:none}
.map-caption{position:absolute;z-index:3;bottom:20px;left:20px;right:20px;width:fit-content;display:flex;gap:10px;align-items:center;padding:14px 16px;border:1px solid rgba(244,241,234,.38);border-radius:4px;background:rgba(4,4,4,.86);backdrop-filter:blur(18px) saturate(60%);-webkit-backdrop-filter:blur(18px) saturate(60%);color:#f4f1ea;font:12px/1.5 var(--font-system);pointer-events:none}
.map-caption small{display:block;color:rgba(244,241,234,.65);font-size:10px;margin-top:4px}
.map-dot{width:8px;height:8px;border-radius:50%;background:#f4f1ea;box-shadow:0 0 0 1px #070706,0 0 0 2px #f4f1ea}
.route-demo{--route-accent:#c43b0b;position:absolute;z-index:4;top:1rem;right:1rem;bottom:1rem;display:flex;width:min(23rem,calc(100% - 7rem));flex-direction:column;overflow:hidden;border:1px solid rgba(244,241,234,.42);border-radius:.35rem;background:rgba(7,7,6,.9);backdrop-filter:blur(18px) saturate(70%);-webkit-backdrop-filter:blur(18px) saturate(70%);box-shadow:0 18px 55px rgba(0,0,0,.34);color:#f4f1ea}
html:not(.pane-expanded) .map-pane:not(.is-map-docked) .route-demo{display:none}
.route-demo-head{padding:1rem 1rem .8rem;border-bottom:1px solid rgba(244,241,234,.25)}
.route-demo-head h2{margin:0 0 .75rem;font:800 1.25rem/.95 var(--font-display);letter-spacing:-.035em;white-space:nowrap}
.route-horizon{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(244,241,234,.35)}
.route-horizon button{min-height:2.35rem;padding:.45rem .65rem;border:0;background:transparent;color:rgba(244,241,234,.65);font:700 .68rem/1 var(--font-system);cursor:pointer}
.route-horizon button + button{border-left:1px solid rgba(244,241,234,.35)}
.route-horizon button.is-active{background:#ece7d8;color:#11100e}
.route-demo-summary{margin:0;padding:.8rem 1rem;border-bottom:1px solid rgba(244,241,234,.25);color:rgba(244,241,234,.72);font:550 .72rem/1.35 var(--font-system)}
.route-manifest{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;list-style:none;margin:0;padding:0;scrollbar-color:rgba(244,241,234,.35) transparent;scrollbar-width:thin}
.route-manifest li + li{border-top:1px solid rgba(244,241,234,.16)}
.route-manifest button{display:grid;width:100%;grid-template-columns:1.8rem minmax(0,1fr);gap:.65rem;align-items:start;padding:.7rem 1rem;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.route-manifest button:hover{background:rgba(244,241,234,.07)}
.route-manifest button.is-active{background:rgba(244,241,234,.12)}
.route-manifest strong,.route-manifest small{display:block}
.route-manifest strong{overflow:hidden;font:700 .77rem/1.15 var(--font-system);text-overflow:ellipsis;white-space:nowrap}
.route-manifest small{margin-top:.26rem;color:rgba(244,241,234,.58);font:500 .63rem/1.25 var(--font-system)}
.route-stop-number{display:grid;width:1.6rem;height:1.6rem;place-items:center;border:1px solid #f4f1ea;border-radius:50%;font:750 .62rem/1 var(--font-system)}
.route-stop-number-rush{border-color:var(--route-accent);background:var(--route-accent);color:#f4f1ea}
.route-stop-number-attention{border-color:var(--route-accent);border-radius:0;color:var(--route-accent);transform:rotate(45deg)}
.route-stop-number-attention > span{transform:rotate(-45deg)}
.route-decision{padding:.9rem 1rem 1rem;border-top:1px solid rgba(244,241,234,.35)}
.route-decision-state{display:block;width:max-content;margin-bottom:.5rem;padding:.28rem .42rem;background:#ece7d8;color:#11100e;font:750 .58rem/1 var(--font-system)}
.route-decision[data-state="rush"] .route-decision-state,.route-decision[data-state="attention"] .route-decision-state{background:var(--route-accent);color:#f4f1ea}
.route-decision strong{display:block;font:750 .86rem/1.1 var(--font-system)}
.route-decision p{margin:.4rem 0 0;color:rgba(244,241,234,.72);font:500 .69rem/1.35 var(--font-system)}
.route-legend{display:flex;flex-wrap:wrap;gap:.5rem .8rem;padding:.65rem 1rem;border-top:1px solid rgba(244,241,234,.2);color:rgba(244,241,234,.6);font:600 .56rem/1 var(--font-system)}
.route-legend span{display:flex;align-items:center;gap:.35rem}
.route-legend i{display:block;width:.55rem;height:.55rem;border:1px solid #f4f1ea;border-radius:50%}
.route-legend .route-legend-rush{border-color:var(--route-accent);background:var(--route-accent)}
.route-legend .route-legend-attention{border-color:var(--route-accent);border-radius:0;transform:rotate(45deg)}
.route-map-marker{display:grid;width:1.9rem;height:1.9rem;place-items:center;border:2px solid #f4f1ea;border-radius:50%;background:#070706;color:#f4f1ea;box-shadow:0 5px 16px rgba(0,0,0,.4);font:800 .65rem/1 var(--font-system);cursor:pointer;transition:transform .16s ease,background-color .16s ease,color .16s ease}
.route-map-marker:hover,.route-map-marker.is-active{transform:scale(1.2);background:#f4f1ea;color:#070706}
.route-map-marker[data-state="rush"]{border-color:#c43b0b;background:#c43b0b;color:#f4f1ea}
.route-map-marker[data-state="attention"]{border-color:#c43b0b;border-radius:0;color:#c43b0b;transform:rotate(45deg)}
.route-map-marker[data-state="attention"] span{transform:rotate(-45deg)}
.route-map-marker[data-state="attention"]:hover,.route-map-marker[data-state="attention"].is-active{transform:rotate(45deg) scale(1.2);background:#c43b0b;color:#f4f1ea}
:root[data-motion="reduced"] .route-map-marker{transition:none}
.map-scroll-hint{
  position:absolute;
  z-index:5;
  top:50%;
  left:50%;
  display:grid;
  width:min(22rem,calc(100% - 2rem));
  gap:.7rem;
  padding:1rem 1.1rem;
  border:1px solid rgba(244,241,234,.52);
  border-radius:.3rem;
  background:rgba(236,231,216,.78);
  backdrop-filter:blur(18px) saturate(55%);
  -webkit-backdrop-filter:blur(18px) saturate(55%);
  box-shadow:0 16px 55px rgba(0,0,0,.3);
  color:#11100e;
  font:650 .78rem/1.25 var(--font-system);
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.map-scroll-hint[hidden]{display:none}
.map-scroll-hint strong{font-size:.68rem;letter-spacing:.04em;text-transform:uppercase}
.map-scroll-hint-command{display:flex;align-items:center;gap:.55rem;font-size:.92rem}
.map-scroll-hint small{color:#4a463e;font-size:.68rem;font-weight:550}
.map-scroll-hint kbd{
  padding:.38rem .48rem .32rem;
  border:1px solid #11100e;
  background:#11100e;
  color:#ece7d8;
  font:700 .68rem/1 var(--mono);
  text-transform:uppercase;
}
.map-pane .maplibregl-ctrl-attrib{background:rgba(4,4,4,.78);color:#f4f1ea;font-size:9px}
.map-pane .maplibregl-ctrl-attrib a{color:#f4f1ea}
.map-dock{
  position:relative;
  height:145svh;
  margin:0;
  background-color:#a9aaa2;
  background-image:linear-gradient(rgba(17,16,14,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(17,16,14,.12) 1px,transparent 1px),radial-gradient(circle,rgba(17,16,14,.24) 0 .7px,transparent .9px);
  background-size:64px 64px,64px 64px,19px 23px;
  box-shadow:0 0 0 100vmax #a9aaa2;
  clip-path:inset(0 -100vmax);
}
.map-dock-idle{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.map-dock-idle-mark{
  position:sticky;
  top:calc(50svh - 3.75rem);
  display:flex;
  width:max-content;
  margin:0 auto;
  align-items:center;
  gap:1.1rem;
  color:#11100e;
}
.map-dock-idle-icon{
  --map-dock-paper:#ece7d8;
  width:7.5rem;
  height:7.5rem;
  padding:.75rem;
  background:#ece7d8;
  fill:currentColor;
}
.map-dock-idle-mark strong,
.map-dock-idle-mark small{display:block}
.map-dock-idle-mark strong{font:800 1.45rem/.95 var(--font-display);letter-spacing:-.035em}
.map-dock-idle-mark small{margin-top:.55rem;color:var(--tag);font:700 .66rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.map-dock-slot{
  position:sticky;
  z-index:1;
  top:0;
  left:0;
  width:100vw;
  height:100svh;
  transform:translateX(calc(-1 * var(--map-dock-left,0px)));
}
html:not(.pane-expanded) .map-dock .map-pane{
  position:relative;
  top:auto;
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.map-dock .pane-head{
  flex:none;
  min-height:4.5rem;
  padding:1rem clamp(1.25rem,3vw,3rem) 1rem calc(var(--map-dock-left,0px) + .5rem);
  border-bottom:1px solid rgba(244,241,234,.28);
}
.map-dock .field-map{flex:1;height:auto;min-height:0}
.map-dock .map-controls{left:clamp(1.25rem,3vw,3rem)}
.map-dock .map-caption{left:clamp(1.25rem,3vw,3rem);bottom:clamp(1.25rem,3vw,3rem)}
.doc-return{display:none}
.pane-expanded{overflow:hidden}
.pane-expanded .pane{position:fixed;inset:0;z-index:20;border-radius:0;border:0}
.pane-expanded .pane-head{position:absolute;z-index:5;right:0;top:0;padding:20px}
.pane-expanded .pane-title{display:none}
.pane-expanded .field-map{height:100dvh}
.pane-expanded .map-controls{top:90px}
.pane-expanded .rail{z-index:40}
.pane-expanded .doc{position:fixed;z-index:40;left:50%;top:20px;width:300px;height:64px;margin:0;padding:0;max-width:none;transform:translateX(-50%);overflow:hidden;border-radius:16px}
.pane-expanded :is(.doc,.pane-expand,.map-controls button,.map-caption){
  background:var(--frost-light);
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  border:1px solid var(--frost-border);
  box-shadow:0 12px 48px var(--frost-shadow);
  color:var(--ink);
}
.pane-expanded :is(.doc,.map-pane .pane-expand,.map-controls button,.map-caption){background:#070706;border-color:rgba(244,241,234,.35);box-shadow:0 12px 48px rgba(0,0,0,.38);color:#f4f1ea}
.pane-expanded .marketing-rail .rail-link{background-color:rgba(236,231,216,.68);backdrop-filter:blur(16px) saturate(75%);-webkit-backdrop-filter:blur(16px) saturate(75%);box-shadow:0 8px 28px rgba(0,0,0,.22);color:var(--ink)}
.pane-expanded .doc .doc-return{color:#f4f1ea}
.pane-expanded .doc:not(.doc-motion) > :not(.doc-return){visibility:hidden}
.doc-motion{overflow:visible!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}
.pane-expanded .doc-return{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;height:100%;padding:16px 20px;border:0;background:transparent;color:var(--ink);cursor:pointer;font:600 12px var(--font-system)}
.doc-return strong{font-size:16px;letter-spacing:0}
.pane-expanded .gimbal-rail{visibility:hidden}
@media(max-width:99.99rem){
  .app:has(.map-pane){grid-template-columns:max-content minmax(0,1fr);grid-template-areas:"nav doc" "terminal terminal";grid-template-rows:auto auto}
  html:not(.pane-expanded) .map-pane:not(.is-map-docked){position:fixed;top:20px;right:20px;z-index:40;border:0;border-radius:10px;background:transparent}
  html:not(.pane-expanded) .map-pane:not(.is-map-docked) .pane-head{padding:0}
  html:not(.pane-expanded) .map-pane:not(.is-map-docked) :is(.pane-title,.field-map){display:none}
  html:not(.pane-expanded) .map-pane:not(.is-map-docked) .pane-expand{width:44px;height:44px;padding:0;font-size:0;background:rgba(4,4,4,.86);backdrop-filter:blur(12px) saturate(70%);-webkit-backdrop-filter:blur(12px) saturate(70%);border-color:rgba(244,241,234,.35);color:#f4f1ea}
  html:not(.pane-expanded) .map-pane:not(.is-map-docked) .pane-expand::after{content:"↗";font:24px/1 var(--font-system)}
  .map-dock{height:auto;min-height:0;padding:clamp(2.5rem,7vh,4.5rem) 0}
  .map-dock-idle{display:none}
  .map-dock-slot{position:relative;height:auto;min-height:calc(clamp(30rem,68svh,40rem) + 4.5rem)}
  html:not(.pane-expanded) .map-dock .map-pane{height:auto}
  .map-dock .field-map{flex:none;height:clamp(30rem,68svh,40rem);min-height:0}
}
@media(max-width:55.99rem){
  .app:has(.map-pane){grid-template-columns:minmax(0,1fr);grid-template-areas:"nav" "doc" "terminal"}
  .app:has(.map-pane) .rail{max-width:calc(100% - 64px)}
  .pane-expanded .doc{top:90px;width:240px;height:56px}
  .pane-expanded .app:has(.map-pane) .rail{max-width:calc(100% - 145px)}
  .pane-expanded .pane-head{padding:20px 12px}
  .route-demo{top:auto;right:.75rem;bottom:.75rem;left:.75rem;width:auto;max-height:min(52%,21rem)}
  .route-demo-head{display:flex;gap:.75rem;align-items:center;justify-content:space-between;padding:.75rem}
  .route-demo-head h2{display:none}
  .route-horizon{min-width:12rem}
  .route-demo-summary{padding:.6rem .75rem}
  .route-manifest button{padding:.58rem .75rem}
  .route-decision{padding:.7rem .75rem .75rem}
  .route-legend{display:none}
  .map-dock .map-caption{top:1rem;bottom:auto}
  .map-controls{top:5.2rem}
  .pane-expanded .map-dock .map-caption{top:165px;bottom:auto}
  .pane-expanded .map-controls{top:225px}
}

/* ── DOC ──────────────────────────────────────────────────────
   The document itself — wide, not letter-column-narrow: this is
   the flagship page's own content, not long-form reading prose, so
   its cap sits well past a classic ~34–44rem measure. It still
   centers itself in the doc track below the wide breakpoint (where
   that track is wider than the cap), and once the aside track
   opens it simply fills what's left of the row instead. */
.doc{
  grid-area:doc;
  min-width:0;
  width:100%;
  max-width:66ch;
  margin:0 auto;
  padding:1.1rem clamp(1rem,3vw,2rem) 0;
}

/* Wide: the aside track is live, so .doc no longer needs to reserve
   center-of-viewport space for it — it settles against the nav
   column instead of floating mid-grid. */
@media (min-width:100rem){
  .doc{margin:0}
}

/* ── HERO ─────────────────────────────────────────────────────
   Wordmark, feature list, headline, watch button — the top
   of .doc, in ordinary document flow now rather than pinned to the
   bottom of a height-clamped row. */

.retype-h1{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  font-stretch:var(--display-width);
  text-transform:uppercase;
  color:var(--ink);
  font-size:clamp(4rem,2rem + 8vw,9rem);
  line-height:.82;
  letter-spacing:-.055em;
}
.wordmark-cursor{
  display:inline-block;
  width:.38em;
  height:.72em;
  margin-left:.16em;
  background:currentColor;
  vertical-align:-.015em;
  animation:retype-cursor-blink 1.6s steps(1) infinite;
}
:root[data-motion="reduced"] .wordmark-cursor{animation:none}
@media(prefers-reduced-motion:reduce){.wordmark-cursor{animation:none}}

.feature-list{
  list-style:none;
  margin:clamp(1.5rem,4vh,2.5rem) 0 0;
  padding:0;
  /* Wider than the old 34rem column, and — unlike most of this
     file's type — capped rather than left to grow forever with vw:
     .doc itself is wide now (72rem), and a short two/three-word
     phrase per line reads as broken, not spacious, once the font
     outgrows a column that stayed a fixed rem width. clamp() ceils
     both together so the ratio between them holds at any width. */
  max-width:42rem;
  display:flex;
  flex-direction:column;
  gap:clamp(0.6rem,0.94vw,0.9rem);
  font-size:clamp(0.72rem,0.5rem + 0.5vw,0.95rem);
  line-height:1.3;
  color:var(--ink);
}
.feature-list li{position:relative}
.feature-icon{
  position:absolute;
  top:50%;
  right:calc(100% + .7rem);
  width:1.15rem;
  height:1.15rem;
  fill:currentColor;
  opacity:0;
  transform:translate(.3rem,-50%);
  transition:opacity .15s ease,transform .15s ease;
  pointer-events:none;
}
.feature-list li:hover .feature-icon,
.feature-list li:focus-within .feature-icon{
  opacity:1;
  transform:translate(0,-50%);
}
.feature-list a{
  color:var(--tag);
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:var(--tag);
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  transition:color .15s ease,text-decoration-color .15s ease;
}
.feature-list a:hover,
.feature-list a:focus-visible{color:var(--tag-ink);text-decoration-color:var(--tag-ink)}
@media (prefers-reduced-motion:reduce){
  .feature-icon{transition:none;transform:translate(0,-50%)}
}

/* Demoted from h1 to a plain paragraph, visually unchanged, when
   .retype-h1 (above) took over as the page's one h1. */
.hero-h2{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  font-stretch:var(--display-width);
  line-height:var(--display-leading);
  margin:clamp(3rem,9vh,5.5rem) 0 0;
  max-width:13ch;
  color:var(--ink);
  font-size:clamp(3rem,min(1.4rem + 5.8vw,12svh),7rem);
  letter-spacing:var(--display-tracking);
}

/* ── WATCH BUTTON ─────────────────────────────────────────────
   Opening the intro video full screen, as a call to action under
   .hero-h2. Plain CSS play-triangle, same mono voice as the rest
   of the rail/doc. */
.watch-btn{
  display:inline-flex;
  align-items:center;
  gap:0.85em;
  margin-top:2rem;
  padding:1em 1.6em 1em 1em;
  border:1px solid var(--tag);
  border-radius:var(--radius,2px);
  background:transparent;
  color:var(--ink);
  font-family:var(--sans);
  font-size:max(0.85rem,0.6rem + 0.7vw);
  font-weight:700;
  letter-spacing:0;
  cursor:pointer;
}
.watch-btn:hover{background:var(--tag);color:var(--paper)}
.watch-btn-play{
  width:2.4em;
  height:2.4em;
  border-radius:50%;
  border:1px solid var(--tag);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
}
.watch-btn-play:before{
  content:"";
  border-style:solid;
  border-width:0.55em 0 0.55em 0.9em;
  border-color:transparent transparent transparent var(--tag);
  margin-left:0.2em;
}
.watch-btn:hover .watch-btn-play{border-color:var(--paper)}
.watch-btn:hover .watch-btn-play:before{border-left-color:var(--paper)}

/* ── BLOCK ────────────────────────────────────────────────────
   What used to be .split's two-column label/copy pairing is now
   a single-column block: a heading sits directly above its own
   prose, the way a regular HTML document reads. Paragraphs still
   cap their own width for a readable line length — the block
   itself doesn't, so it can sit anywhere in .doc's flow. */
.block{
  margin-top:clamp(3rem,8vh,6rem);
}
[data-gimbal]{scroll-margin-top:clamp(2.5rem,7vh,5rem)}
.surface-letter,
.founder-letter{
  --surface-letter-paper:#ece7d8;
  --ink:#17130f;
  --muted:#575248;
  --tag:#17130f;
  position:relative;
  background:var(--surface-letter-paper);
  box-shadow:0 0 0 100vmax var(--surface-letter-paper);
  clip-path:inset(0 -100vmax);
}
.founder-letter{
  margin-top:clamp(5rem,13vh,9rem);
  padding:clamp(9rem,24vh,16rem) 0 clamp(4.5rem,11vh,8rem);
}
.surface-letter::before,
.surface-letter::after,
.founder-letter::before,
.founder-letter::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:0 -100vmax;
  pointer-events:none;
}
.surface-letter::before,
.founder-letter::before{
  background-image:
    radial-gradient(circle at 17% 23%,rgba(23,19,15,.1) 0 .32px,transparent .72px),
    radial-gradient(circle at 73% 61%,rgba(23,19,15,.08) 0 .38px,transparent .78px),
    radial-gradient(circle at 41% 84%,rgba(23,19,15,.07) 0 .28px,transparent .68px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' seed='19' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:337px 281px,419px 367px,503px 431px,180px 180px;
  background-position:19px 11px,97px 43px,211px 29px,0 0;
  mix-blend-mode:multiply;
  opacity:.032;
}
.surface-letter::after,
.founder-letter::after{
  background:
    radial-gradient(ellipse at 42% 38%,rgba(255,255,255,.018),transparent 66%),
    linear-gradient(to bottom,rgba(23,19,15,.025),transparent 5rem,transparent calc(100% - 5rem),rgba(23,19,15,.03));
}
.founder-letter-layout{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(13rem,.72fr) minmax(20rem,1.28fr);
  grid-template-areas:"profile message";
  align-items:end;
  gap:clamp(3rem,7vw,6.5rem);
}
.founder-message{grid-area:message}
.founder-message p{
  max-width:44ch;
  font-size:clamp(.92rem,.86rem + .1vw,1rem);
  line-height:1.38;
}
.block-tight{
  /* The letter → support pairing reads closer together than the
     rest of the run — a smaller gap, not the shared default. */
  margin-top:clamp(1.5rem,4vh,3rem);
}
h2{font-family:inherit}
.block h2{
  font-family:var(--font-display);
  font-weight:800;
  font-stretch:82%;
  line-height:.96;
  margin:0 0 0.9em;
  color:var(--ink);
  font-size:clamp(2rem,1.2rem + 3vw,4rem);
  letter-spacing:-.035em;
}
.block p{
  max-width:65ch;
  margin:0 0 1.3em;
  color:var(--ink);
  font-size:clamp(0.85rem,0.7rem + 0.4vw,1.15rem);
  line-height:1.7;
}
.block p:last-child{margin-bottom:0}
.block p a{
  color:var(--tag);
  text-decoration:underline;
  text-decoration-color:var(--tag);
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  transition:color .15s ease,text-decoration-color .15s ease;
}
.block p a:hover,
.block p a:focus-visible{color:var(--tag-ink);text-decoration-color:var(--tag-ink)}

.support-block{
  --ink:#ece7d8;
  --muted:#aaa391;
  --tag:#b33d0c;
  --tag-ink:#f7f1e2;
  position:relative;
  margin-top:0;
  padding:clamp(5rem,14vh,9rem) 0;
  background:#080807;
  box-shadow:0 0 0 100vmax #080807;
  clip-path:inset(0 -100vmax);
  color:var(--ink);
}
.support-channel{
  display:grid;
  grid-template-columns:minmax(9rem,.55fr) minmax(18rem,1.45fr);
  align-items:start;
  gap:clamp(2.5rem,7vw,6rem);
  padding-top:1.25rem;
  border-top:1px solid color-mix(in srgb,var(--ink) 48%,transparent);
}
.support-mark{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1.35rem;
}
.support-icon{
  width:clamp(4.5rem,8vw,7rem);
  height:auto;
  fill:var(--ink);
}
.support-status{
  display:inline-block;
  padding:.38em .62em .3em;
  border-radius:1px;
  background:var(--tag);
  box-shadow:1px 2px 0 rgba(236,231,216,.22);
  color:var(--tag-ink);
  font-family:var(--mono);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.045em;
  line-height:1;
  text-transform:uppercase;
  transform:rotate(-1deg);
}
.support-block .support-message h2{
  max-width:11.5ch;
  margin-bottom:.55em;
  color:var(--ink);
  font-size:clamp(3rem,1.8rem + 3vw,5.25rem);
}
.support-block .support-message p{
  max-width:45ch;
  color:var(--muted);
  font-size:clamp(.9rem,.78rem + .35vw,1.1rem);
  line-height:1.55;
}
.support-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin-top:.6rem;
}
.support-call{
  display:inline-flex;
  align-items:center;
  min-height:3rem;
  padding:.75rem 1rem;
  border:1px solid color-mix(in srgb,var(--ink) 55%,transparent);
  border-radius:.25rem;
  color:var(--ink);
  font-size:.85rem;
  font-weight:700;
  text-decoration:none;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.support-page{
  border-color:transparent;
  background:color-mix(in srgb,var(--ink) 8%,transparent);
  color:var(--muted);
}
.support-call:is(:hover,:focus-visible){
  border-color:var(--tag);
  background:var(--tag);
  color:var(--tag-ink);
  outline:none;
}
@media(max-width:55.9375rem){
  .support-channel{grid-template-columns:minmax(0,1fr);gap:2.25rem}
  .support-mark{flex-direction:row;align-items:center}
  .support-icon{width:4rem}
}

/* ── SIGNATURE ────────────────────────────────────────────────
   The letter's sign-off — name, title, and contact. Mono, not the
   body sans, so it reads as a signature block rather than more
   prose, and smaller than the letter's own type — a signature is
   quieter than the letter it closes. */
.signature{
  margin-top:0.6em;
  display:flex;
  flex-direction:column;
  font-family:var(--sans);
  font-size:0.85em;
}
.signature-row{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-top:0.9rem;
}
.signature-photo{
  flex:none;
  width:4.5rem;
  height:4.5rem;
  border-radius:50%;
  object-fit:cover;
  background:var(--line-soft);
}
.signature-details{
  display:flex;
  flex-direction:column;
  gap:0.2em;
}
.signature p{
  max-width:none;
  margin:0;
}
.signature-sig{
  /* Stand-in for a scanned signature: real <text> in a marker face,
     spelling the actual name — not an abstract scribble — but
     locked against selection so it still can't be highlighted
     character by character and give away that it's typeset. */
  display:block;
  width:11rem;
  height:auto;
  margin:0.2em 0 0 -0.1em;
  transform:rotate(-2deg);
  user-select:none;
  -webkit-user-select:none;
}
.signature-sig text{
  font-family:"Permanent Marker",cursive;
  font-size:29px;
  fill:var(--ink);
}
.founder-invite{
  position:relative;
  font-family:var(--font-display)!important;
  font-size:clamp(2.6rem,1.7rem + 2.5vw,4.5rem)!important;
  font-weight:var(--display-weight)!important;
  font-stretch:var(--display-width);
  line-height:var(--display-leading)!important;
  letter-spacing:var(--display-tracking);
}
.founder-wave{
  position:absolute;
  top:.03em;
  right:calc(100% + .16em);
  display:block;
  width:.72em;
  height:.72em;
  overflow:visible;
  color:currentColor;
  transform:rotate(14deg);
  transform-origin:55% 72%;
  vertical-align:-.07em;
}
.founder-wave .wave-hand{fill:currentColor;stroke:none}
.founder-wave .wave-motion{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:square}
.signature-name{
  margin-top:0.3em;
  color:var(--ink);
}
.signature-title{
  color:var(--muted);
}
.signature-contact a{
  color:var(--tag);
}
.founder-letter .signature{
  grid-area:profile;
  width:100%;
  max-width:17rem;
  margin:0;
  font-size:.8rem;
}
.founder-letter .signature-photo{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1;
  border-radius:0;
  filter:grayscale(1) contrast(1.28) brightness(.96) blur(.12px);
  transform:scale(1.003);
}
.founder-letter .signature-photo-plate{
  position:relative;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--ink) 78%,transparent);
  background:#d8d2c3;
  isolation:isolate;
}
.founder-letter .signature-photo-plate::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle,rgba(23,19,15,.34) 0 .42px,transparent .62px),
    linear-gradient(to bottom,rgba(255,255,255,.06),rgba(23,19,15,.035));
  background-size:3px 3px,100% 100%;
  mix-blend-mode:multiply;
  opacity:.2;
  pointer-events:none;
}
.founder-letter .signature-details{
  gap:.15rem;
  margin-top:.9rem;
  text-align:center;
}
.founder-letter .signature-sig{
  width:9rem;
  margin:.7rem auto .1rem;
}
.founder-letter .signature-name{
  margin-top:0;
  font-size:1rem!important;
  line-height:1.35!important;
}
.founder-letter .signature-title{
  font-style:italic;
  line-height:1.35!important;
}
.founder-letter .signature-contact{
  text-align:center;
}
.founder-letter .signature-contact a{
  color:var(--ink);
}
@media(max-width:55.9375rem){
  .founder-letter{padding:clamp(5rem,16vh,8rem) 0 4.5rem}
  .founder-letter-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"message" "profile";gap:3.5rem}
  .founder-letter .signature{justify-self:center;max-width:15rem}
  .founder-invite{display:flex;align-items:flex-start;gap:.12em}
  .founder-invite .founder-wave{position:static;flex:none;width:.72em;height:.72em;margin-top:.04em}
}

/* ── QA LIST ──────────────────────────────────────────────────
   The capabilities section: 21 short "Can I...?" questions, all
   answered by the headline ("Yes. All of that.") rather than
   individually.

   Each item leads with a .qa-badge — a small solid "PASS" tag in
   the accent fill, mono/uppercase — instead of an icon. Two icon
   directions (a bracket-checkmark, then a council-picked terminal
   caret) both read as decoration; a status tag reads as an actual
   instrument readout, the same register as the diode dots and the
   CRT texture elsewhere on the page. */
.qa-list{
  list-style:none;
  margin:0;
  padding:0;
  max-width:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid rgba(8,8,7,.72);
  font-family:var(--sans);
  font-size:clamp(.76rem,.67rem + .22vw,.94rem);
  line-height:1.35;
  color:var(--ink);
}
.qa-list li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start;
  gap:.72rem;
  break-inside:avoid;
  min-height:4.15rem;
  margin:0;
  padding:.85rem 1.15rem .85rem 0;
  border-bottom:1px solid rgba(8,8,7,.38);
}
.qa-list li:nth-child(odd){border-right:1px solid rgba(8,8,7,.72)}
.qa-list li:nth-child(even){padding-left:1.15rem}
.capability-block{
  --ink:#11100e;
  --muted:#403e38;
  --tag:#b33d0c;
  --tag-ink:#11100e;
  position:relative;
  margin-top:0;
  padding:clamp(4.5rem,12vh,7.5rem) 0 clamp(5rem,14vh,9rem);
  background:#b9b8ad;
  box-shadow:0 0 0 100vmax #b9b8ad;
  clip-path:inset(0 -100vmax);
  color:var(--ink);
}
.capability-block::before{
  content:"";
  position:absolute;
  inset:0 -100vmax;
  background:
    linear-gradient(90deg,transparent calc(50% - .5px),rgba(8,8,7,.12) 50%,transparent calc(50% + .5px)),
    radial-gradient(circle at 18% 23%,rgba(8,8,7,.13) 0 .45px,transparent .8px),
    radial-gradient(circle at 77% 68%,rgba(8,8,7,.09) 0 .4px,transparent .75px);
  background-size:100% 100%,17px 19px,23px 29px;
  pointer-events:none;
}
.capability-header,
.capability-block .qa-list{position:relative}
.capability-header{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:clamp(2rem,6vw,5rem);
  padding:1.2rem 0 1.5rem;
  border-top:3px solid var(--ink);
}
.capability-block .capability-header h2{
  max-width:8ch;
  margin:0;
  font-size:clamp(3.5rem,2rem + 5vw,7rem);
}
.capability-score{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  padding-left:clamp(1.5rem,4vw,3.5rem);
  border-left:1px solid rgba(8,8,7,.72);
}
.capability-score strong{
  font-family:var(--font-display);
  font-size:clamp(3.5rem,2rem + 3vw,6rem);
  font-weight:var(--display-weight);
  font-stretch:var(--display-width);
  letter-spacing:-.05em;
  line-height:.82;
}
.capability-score span{
  margin-top:.7rem;
  padding:.38em .55em .28em;
  background:var(--paper);
  color:#080807;
  font-family:var(--mono);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.045em;
  line-height:1;
  text-transform:uppercase;
}
.qa-badge{
  flex:none;
  margin-left:auto;
  padding:.28em .42em .2em;
  border-radius:1px;
  background:#080807;
  color:#f66b25;
  font-family:var(--mono);
  font-size:.62em;
  font-weight:700;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.qa-caret{
  width:.9em;
  height:.9em;
  flex:none;
  margin-top:.14em;
  fill:none;
  stroke:var(--tag);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@media(max-width:55.9375rem){
  .capability-header{grid-template-columns:minmax(0,1fr)}
  .capability-score{align-items:flex-start;padding:0;border-left:0}
  .qa-list{grid-template-columns:minmax(0,1fr)}
  .qa-list li:nth-child(odd){border-right:0}
  .qa-list li:nth-child(even){padding-left:0}
}
.icon-defs{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

.webinar-block{
  --ink:#ece7d8;
  --muted:#aaa391;
  --tag:#f66b25;
  position:relative;
  margin-top:0;
  padding:clamp(5rem,14vh,9rem) 0;
  background:#11100e;
  box-shadow:0 0 0 100vmax #11100e;
  clip-path:inset(0 -100vmax);
  color:var(--ink);
}
.webinar-layout{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(18rem,.85fr);
  align-items:center;
  gap:clamp(3rem,8vw,7rem);
}
.webinar-message{position:relative}
.webinar-beacon{
  position:relative;
  width:clamp(7rem,12vw,10rem);
  aspect-ratio:1;
  margin-bottom:clamp(2rem,5vh,3.5rem);
  border:1px solid rgba(236,231,216,.65);
  border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 1rem,rgba(236,231,216,.26) 1.04rem 1.1rem);
}
.webinar-beacon::before,
.webinar-beacon::after{
  content:"";
  position:absolute;
  background:rgba(236,231,216,.48);
}
.webinar-beacon::before{
  top:50%;
  left:50%;
  width:50%;
  height:1px;
  background:linear-gradient(90deg,rgba(246,107,37,.9),rgba(246,107,37,0));
  transform-origin:left center;
  animation:webinar-beacon-scan 9s linear infinite;
}
.webinar-beacon::after{top:-12%;left:50%;width:1px;height:124%}
.webinar-beacon-core{
  position:absolute;
  z-index:1;
  top:50%;
  left:50%;
  width:1.15rem;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--tag);
  box-shadow:0 0 0 .45rem #11100e,0 0 0 .52rem var(--tag);
  transform:translate(-50%,-50%);
  animation:webinar-beacon-pulse 3.2s ease-in-out infinite;
}
.webinar-beacon-label{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:-.7rem;
  padding:.38em .58em .28em;
  background:var(--paper);
  color:#080807;
  font-family:var(--mono);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.05em;
  line-height:1;
  text-transform:uppercase;
  transform:translateX(-50%) rotate(-1deg);
  white-space:nowrap;
}
.webinar-block .webinar-message h2{
  max-width:10ch;
  margin-bottom:.55em;
  color:var(--ink);
  font-size:clamp(3.4rem,2rem + 3vw,5.3rem);
}
.webinar-block .webinar-message p{
  max-width:41ch;
  color:var(--muted);
  font-size:clamp(.9rem,.8rem + .25vw,1.05rem);
  line-height:1.55;
}
.webinar-card{
  position:relative;
  container-type:inline-size;
  display:flex;
  min-height:clamp(20rem,42vh,27rem);
  padding:clamp(1.5rem,3vw,2.5rem);
  flex-direction:column;
  background:#ece7d8;
  box-shadow:.8rem .8rem 0 var(--paper);
  color:#11100e;
  overflow:hidden;
  transition:background-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.webinar-card::before{
  content:"";
  position:absolute;
  top:0;
  right:clamp(1.5rem,3vw,2.5rem);
  width:1.35rem;
  height:4.5rem;
  background:#11100e;
}
.webinar-card-label{
  width:fit-content;
  padding:.38em .58em .28em;
  background:#11100e;
  color:#ece7d8;
  font-family:var(--mono);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.05em;
  line-height:1;
  text-transform:uppercase;
}
.webinar-event-title{
  max-width:100%;
  margin-top:auto;
  font-family:var(--font-display);
  font-size:min(clamp(2.5rem,1.8rem + 1.5vw,3.6rem),19.5cqi);
  font-weight:var(--display-weight);
  font-stretch:var(--display-width);
  letter-spacing:var(--display-tracking);
  line-height:.88;
}
.webinar-time{
  max-width:26ch;
  margin-top:1.25rem;
  color:#403e38;
  font-size:.9rem;
  line-height:1.35;
}
.webinar-action{
  width:fit-content;
  margin-top:2rem;
  border-bottom:2px solid currentColor;
  font-size:.82rem;
  font-weight:700;
}
.webinar-card:is(:hover,:focus-visible){
  background:var(--paper);
  box-shadow:.3rem .3rem 0 #ece7d8;
  transform:translate(.5rem,.5rem);
}
.webinar-card:is(:hover,:focus-visible) .webinar-card-label{background:#ece7d8;color:#11100e}
.webinar-card:is(:hover,:focus-visible) .webinar-action{padding:.3rem .45rem .24rem;background:#11100e;color:#ece7d8;border-bottom:0}
.webinar-card:focus-visible{outline:2px solid #ece7d8;outline-offset:4px}
@keyframes webinar-beacon-scan{to{transform:rotate(360deg)}}
@keyframes webinar-beacon-pulse{
  0%,100%{opacity:.78;transform:translate(-50%,-50%) scale(.9)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@media(max-width:55.9375rem){
  .webinar-layout{grid-template-columns:minmax(0,1fr)}
  .webinar-card{min-height:19rem}
}
@media(prefers-reduced-motion:reduce){
  .webinar-card{transition:none}
  .webinar-beacon::before,
  .webinar-beacon-core{animation:none}
}

.footer{
  --footer-stock:#a9aaa2;
  --footer-ink:#11100e;
  position:relative;
  isolation:isolate;
  margin-top:0;
  padding:clamp(4rem,10vh,7rem) 0 clamp(2.5rem,6vh,4rem);
  background:var(--footer-stock);
  box-shadow:0 0 0 100vmax var(--footer-stock);
  clip-path:inset(0 -100vmax);
  font-family:var(--sans);
  font-size:0.85rem;
  color:var(--footer-ink);
}
.footer::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 -100vmax;
  background:
    linear-gradient(var(--footer-ink),var(--footer-ink)) top,
    radial-gradient(ellipse at 18% 24%,rgba(255,255,255,.028),transparent 42%),
    radial-gradient(ellipse at 79% 71%,rgba(17,16,14,.024),transparent 44%),
    repeating-linear-gradient(7deg,transparent 0 5px,rgba(255,255,255,.018) 5px 5.5px,transparent 5.5px 11px),
    repeating-linear-gradient(96deg,transparent 0 8px,rgba(17,16,14,.012) 8px 8.5px,transparent 8.5px 15px),
    linear-gradient(90deg,transparent calc(50% - .5px),rgba(17,16,14,.11) 50%,transparent calc(50% + .5px)),
    radial-gradient(circle at 16% 34%,rgba(17,16,14,.1) 0 .35px,transparent .7px),
    radial-gradient(circle at 71% 72%,rgba(17,16,14,.075) 0 .4px,transparent .75px);
  background-size:100% .65rem,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,23px 29px,31px 37px;
  background-repeat:no-repeat,repeat,repeat,repeat,repeat,repeat,repeat,repeat;
  pointer-events:none;
}
.footer .manual-index{
  position:relative;
  display:grid;
  grid-template-columns:minmax(13rem,.72fr) minmax(0,1.28fr);
  gap:clamp(2.5rem,7vw,6rem);
  width:100%;
  margin:0 0 2rem;
  padding:0 0 clamp(2.5rem,6vh,4rem);
  border-bottom:2px solid var(--footer-ink);
  color:var(--footer-ink);
}
.footer .manual-index h2{
  max-width:7ch;
  margin:0;
  color:var(--footer-ink);
  font-family:var(--font-display);
  font-size:clamp(3.2rem,2rem + 4vw,6rem);
  font-weight:800;
  font-stretch:82%;
  letter-spacing:-.035em;
  line-height:.96;
}
.footer .manual-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-self:start;
  gap:0;
  margin:0;
  border-top:1px solid rgba(17,16,14,.68);
}
.footer .manual-link{
  display:block!important;
  width:100%;
  padding:.72rem .8rem .68rem;
  border-bottom:1px solid rgba(17,16,14,.48);
  color:var(--footer-ink)!important;
}
.footer .manual-link:nth-child(odd){border-right:1px solid rgba(17,16,14,.68)}
.footer .manual-link:not(:last-child)::after{content:none}
.footer .manual-link strong{
  color:var(--footer-ink);
  font-size:.78rem;
  text-decoration:none;
}
.footer .manual-link:is(:hover,:focus-visible){background:var(--footer-ink);outline:none}
.footer .manual-link:is(:hover,:focus-visible) strong{color:#ece7d8;text-decoration:none}
.footer .manual-link:focus-visible{box-shadow:inset 0 0 0 2px var(--tag)}
.footer-copyright,
.footer-links{
  position:relative;
}
.footer-copyright{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin:0 0 0.9rem;
  color:var(--footer-ink);
  font-weight:650;
}
.footer-place-icon{
  width:1.15rem;
  height:1.15rem;
  flex:none;
  fill:currentColor;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.6rem;
  margin:0;
}
.footer-links a{color:var(--footer-ink);transition:color .15s ease}
.footer-links a:hover,
.footer-links a:focus-visible{color:var(--tag)}
.footer-links>a{display:inline-flex;align-items:center;gap:.45em}
.footer-link-icon{width:1.2em;height:1.2em;flex:none;fill:currentColor;stroke:none}
.footer-status{
  display:inline-flex;
  align-items:center;
  gap:0.5em;
}
.footer-status-signal{
  position:relative;
  display:inline-grid;
  width:1.2em;
  height:1.2em;
  flex:none;
  place-items:center;
}
.footer-status-signal::before{
  content:"";
  position:absolute;
  inset:-.35em;
  border:1px solid var(--tag);
  border-radius:50%;
  opacity:0;
  transform:scale(.45);
  animation:footer-status-ring 3.8s cubic-bezier(.18,.68,.3,1) infinite;
}
.footer-status-signal .footer-link-icon{
  width:100%;
  height:100%;
  animation:footer-status-pulse 3.8s cubic-bezier(.3,.8,.3,1) infinite;
}
@keyframes footer-status-ring{
  0%,8%{opacity:0;transform:scale(.45)}
  13%{opacity:.55}
  28%{opacity:0;transform:scale(1.15)}
  100%{opacity:0;transform:scale(1.15)}
}
@keyframes footer-status-pulse{
  0%,8%,30%,100%{color:var(--footer-ink);transform:scale(1)}
  14%{color:var(--tag);transform:scale(1.12)}
  21%{color:var(--footer-ink);transform:scale(.96)}
}
:root[data-motion="reduced"] .footer-status-signal::before{display:none}
:root[data-motion="reduced"] .footer-status-signal .footer-link-icon{animation:none}
.terminal-shell{
  --terminal-phosphor:var(--terminal-amber);
  --terminal-amber:#78e3ff;
  --terminal-line:#389effb3;
  --terminal-halo:#278fff;
  --terminal-cycle:1.6s;
  position:relative;
  left:50%;
  grid-area:terminal;
  display:grid;
  grid-template-columns:var(--terminal-doc-left,25vw) var(--terminal-doc-width,50vw) minmax(0,1fr);
  width:100vw;
  min-height:clamp(22rem,45svh,36rem);
  margin-top:calc(-1 * var(--app-gap));
  margin-left:-50vw;
  overflow:hidden;
  border-top:1px solid color-mix(in srgb,var(--terminal-amber) 28%,transparent);
  background:radial-gradient(ellipse 90% 100% at 50% 45%,color-mix(in srgb,var(--terminal-amber) 6.5%,transparent) 0 40%,color-mix(in srgb,var(--terminal-amber) 3%,transparent) 75%,transparent 100%),#050604;
  box-shadow:inset 0 1.5rem 3rem rgba(0,0,0,.6);
}
body>.terminal-shell{
  left:0;
  margin-left:0;
}
body:has(>.terminal-shell){overflow-x:clip}
.terminal-wing{
  position:relative;
  display:grid;
  grid-auto-columns:minmax(5.5rem,8.5rem);
  grid-auto-flow:column;
  justify-content:space-evenly;
  align-content:start;
  gap:clamp(.75rem,2vw,2rem);
  min-width:0;
  padding:clamp(2.75rem,6vh,4.5rem) clamp(.75rem,2vw,2rem);
  overflow:hidden;
  color:var(--terminal-amber);
  font-family:var(--mono);
  background:
    linear-gradient(90deg,transparent 49.75%,color-mix(in srgb,var(--terminal-line) 18%,transparent) 50%,transparent 50.25%),
    linear-gradient(color-mix(in srgb,var(--terminal-line) 10%,transparent) 1px,transparent 1px),
    transparent;
  background-size:4.5rem 100%,100% 2.5rem,auto;
}
.terminal-wing-left{border-right:1px solid color-mix(in srgb,var(--terminal-amber) 24%,transparent)}
.terminal-wing-right{border-left:1px solid color-mix(in srgb,var(--terminal-amber) 24%,transparent)}
.terminal-bank{
  display:grid;
  align-content:start;
  gap:.7rem;
  padding:.85rem .75rem .7rem;
  border-block:1px solid color-mix(in srgb,var(--terminal-amber) 22%,transparent);
  background:color-mix(in srgb,var(--terminal-amber) 2.5%,transparent);
}
.terminal-number{
  font:700 clamp(1.35rem,1.75vw,2.15rem)/.9 var(--mono);
  letter-spacing:.1em;
  text-shadow:0 0 2px color-mix(in srgb,var(--terminal-amber) 65%,transparent),0 0 .4rem color-mix(in srgb,var(--terminal-halo) 48%,transparent);
}
.terminal-number.is-updating{animation:terminal-readout-refresh 800ms steps(2,end)}
@keyframes terminal-readout-refresh{
  0%{opacity:.45;text-shadow:0 0 1rem color-mix(in srgb,var(--terminal-amber) 75%,transparent)}
  45%{opacity:1}
  100%{opacity:1;text-shadow:0 0 2px color-mix(in srgb,var(--terminal-amber) 65%,transparent),0 0 .4rem color-mix(in srgb,var(--terminal-halo) 48%,transparent)}
}
.terminal-lamps{
  display:grid;
  grid-template-columns:repeat(4,minmax(.45rem,1fr));
  gap:.32rem;
}
.terminal-lamps i{
  height:.42rem;
  background:var(--terminal-amber);
  box-shadow:0 0 .55rem color-mix(in srgb,var(--terminal-amber) 68%,transparent);
  transition:opacity 320ms steps(2,end),box-shadow 320ms steps(2,end);
}
.terminal-lamps i.is-dim{opacity:.18;box-shadow:none}
.terminal-bank small{
  color:color-mix(in srgb,var(--terminal-amber) 58%,transparent);
  font:700 .52rem/1 var(--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.terminal-echo{
  position:relative;
  isolation:isolate;
  grid-column:2;
  min-width:0;
  min-height:100%;
  padding:clamp(2.75rem,6vh,4.5rem) 1.5rem;
  color:var(--terminal-phosphor);
  font-family:var(--mono);
  font-size:0.72rem;
  line-height:1.6;
  text-shadow:0 0 .28rem color-mix(in srgb,var(--terminal-phosphor) 48%,transparent);
}
.terminal-echo::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  border-block:1px solid color-mix(in srgb,var(--terminal-phosphor) 20%,transparent);
  background:
    radial-gradient(ellipse 100% 120% at 50% 48%,transparent 60%,rgba(0,0,0,.2) 100%),
    radial-gradient(circle,color-mix(in srgb,var(--terminal-phosphor) 5.5%,transparent) 0 .45px,transparent .7px),
    repeating-linear-gradient(180deg,rgba(255,255,255,.018) 0 1px,rgba(0,0,0,.08) 1px 3px),
    transparent;
  background-size:100% 100%,4px 4px,100% 3px,auto;
  box-shadow:inset 0 1rem 2.5rem rgba(0,0,0,.32),inset 0 -1rem 2.5rem rgba(0,0,0,.4);
  pointer-events:none;
}
.terminal-echo::after{
  content:"EOF";
  position:absolute;
  top:clamp(2.75rem,6vh,4.5rem);
  right:1.5rem;
  color:var(--terminal-phosphor);
  font:700 .58rem/1 var(--mono);
  letter-spacing:.12em;
}
.terminal-echo p{margin:0;min-height:1.6em}
.terminal-echo p:first-child{color:var(--terminal-phosphor)}
.terminal-echo .terminal-cursor{
  display:inline-block;
  margin-left:0.15em;
  opacity:0;
}
.terminal-echo .terminal-cursor.terminal-cursor-on{
  animation:retype-cursor-blink var(--terminal-cycle) steps(1) infinite;
}
:root[data-motion="reduced"] .terminal-echo .terminal-cursor{opacity:1}
@keyframes retype-cursor-blink{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .footer-status-signal::before{display:none}
  .footer-status-signal .footer-link-icon{animation:none}
  .terminal-number.is-updating{animation:none}
  .terminal-lamps i{transition:none}
  .terminal-echo .terminal-cursor{opacity:1;animation:none}
}
@media(max-width:55.9375rem){
  .footer .manual-index{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .footer .manual-index h2{max-width:9ch}
  .terminal-wing{visibility:hidden;padding:0}
}
@media(max-width:36rem){
  .footer .manual-links{grid-template-columns:minmax(0,1fr)}
  .footer .manual-link:nth-child(odd){border-right:0}
  .footer-links{gap:.9rem 1.2rem}
  .terminal-shell{min-height:clamp(18rem,42svh,24rem)}
  .terminal-echo{padding-right:3.4rem;font-size:.64rem}
}

/* ── GIMBAL RAIL ──────────────────────────────────────────────
   A vertical strip of horizon-marker ticks pinned to the right edge,
   one per major section (any element carrying `data-gimbal="Label"`)
   — built by each page's own script, not hand-authored, so it can't
   drift out of sync with the sections it points at. Reads as an
   altimeter scale: short dim ticks at rest, the one over the section
   currently in view brightens and lengthens, hovering any tick does
   the same plus reveals its label. Clicking jumps to that section
   (native anchor scroll — html already sets scroll-behavior:smooth).
   Hidden below the width where .aside would also be live, so it
   never competes with a narrow viewport for space. */
.gimbal-rail{
  --gimbal-rest:color-mix(in srgb,var(--muted) 55%,transparent);
  --gimbal-neighbor:color-mix(in srgb,var(--ink) 70%,transparent);
  --gimbal-emphasis:var(--tag);
  --gimbal-label:#ded6b8;
  --gimbal-label-ink:#1a1a1a;
  --gimbal-label-shadow:rgba(0,0,0,.38);
  --gimbal-label-angle:-2deg;
  position:fixed;
  top:50%;
  left:1.5rem;
  transform:translateY(-50%);
  z-index:20;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
/* .gimbal-rail's `left` is overridden inline by JS, anchored to
   .doc's own left edge rather than the viewport's — so it tracks
   .doc as the nav column and (on very wide screens) the aside track
   change how much space .doc has. The static 1.5rem above is only
   the pre-JS/no-JS fallback. */
@media (max-width:74rem){
  .gimbal-rail{display:none}
}
.gimbal-tick{
  position:relative;
  display:flex;
  align-items:center;
  padding:0.5rem 0.75rem 0.5rem 0;
}
.gimbal-tick-line{
  width:0.55rem;
  height:1.5px;
  background:var(--gimbal-rest);
  transition:width .2s ease,height .2s ease,background-color .2s ease;
}
/* Active (current section) tick — suppressed the moment the pointer
   is anywhere in the rail, so hovering a different tick doesn't
   leave two ticks lit at once. `:not(:hover)` on the rail means this
   rule simply stops matching while hovering, no specificity fight
   needed against the hover rules below. */
.gimbal-rail:not(:hover) .gimbal-tick.is-active .gimbal-tick-line{
  width:1.1rem;
  background:var(--gimbal-emphasis);
}
/* Fisheye falloff — the hovered tick itself gets the longest mark,
   its immediate neighbors grow partway, everything else stays put. */
.gimbal-tick:has(+ .gimbal-tick:hover) .gimbal-tick-line,
.gimbal-tick:hover + .gimbal-tick .gimbal-tick-line{
  width:0.85rem;
  background:var(--gimbal-neighbor);
}
.gimbal-tick:hover .gimbal-tick-line{
  width:1.3rem;
  background:var(--gimbal-emphasis);
}
.gimbal-tick-label{
  position:absolute;
  right:calc(100% + 0.65rem);
  padding:0.35em 0.6em;
  border:0;
  border-radius:1px;
  background:var(--gimbal-label);
  box-shadow:1px 2px 0 var(--gimbal-label-shadow);
  white-space:nowrap;
  font-family:var(--mono);
  font-size:0.62rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--gimbal-label-ink);
  opacity:0;
  transform:translateX(4px) rotate(var(--gimbal-label-angle));
  transition:opacity .15s ease, transform .15s ease;
  pointer-events:none;
}
.gimbal-tick:hover .gimbal-tick-label,
.gimbal-tick:focus .gimbal-tick-label{
  opacity:1;
  transform:translateX(0) rotate(var(--gimbal-label-angle));
}
.gimbal-rail.labels-inward .gimbal-tick-label{
  right:auto;
  left:calc(100% + 0.65rem);
  transform:translateX(-4px) rotate(var(--gimbal-label-angle));
}
.gimbal-rail.labels-inward .gimbal-tick:hover .gimbal-tick-label,
.gimbal-rail.labels-inward .gimbal-tick:focus .gimbal-tick-label{
  transform:translateX(0) rotate(var(--gimbal-label-angle));
}
.gimbal-tick.is-active .gimbal-tick-label{color:var(--gimbal-label-ink)}
.gimbal-rail.is-over-dark{
  --gimbal-rest:color-mix(in srgb,#f66b25 62%,transparent);
  --gimbal-neighbor:#f66b25;
  --gimbal-emphasis:#f66b25;
}
.gimbal-rail.is-over-dark .gimbal-tick-line{height:2px}
.gimbal-rail.is-over-dark:not(:hover) .gimbal-tick.is-active .gimbal-tick-line{
  width:1.45rem;
  height:3px;
}
.gimbal-rail.is-over-dark .gimbal-tick:hover .gimbal-tick-line{
  width:1.55rem;
  height:3px;
}