/* ============================================================================
   site.css — the redesigned marketing document shell's CHROME.

   Moved byte-for-byte from the approved marketing draft (page-benchmark.html,
   itself extracted from lander-APPROVED-2026-09-07): the reset, the fixed top
   bar, the wordmark and Deploy control, the full-screen menu overlay, the page
   gutter and the footer. Values resolve against static/marketing-tokens.css,
   which SiteMarketingLayout links immediately before this sheet; neither
   tokens.css nor app.css is linked by that shell, so the core Neo Cabinet roster
   never reaches this :root. This sheet is CHROME only — the content typography a
   marketing page renders inside <main> (headline, lede, sections, charts, tables,
   chains) is a later phase and lives in its own sheet.

   The draft's display-face weight normalisation (design-system.html:90 sets its
   h1-em subtitle to a light display weight the plan lifts to 400) is a CONTENT
   rule, not chrome: it is absent from this
   subset and applies wherever that content typography is homed later. Nothing
   here sets a display-face weight below 400.
   ========================================================================== */

/* ---------- reset ---------- */
:where(*,*::before,*::after){box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body.marketing{
  margin:0;color:var(--ink);background:var(--ground);
  font-family:var(--fd);font-size:16px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
:where(img){max-width:100%}
:where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure,table){margin:0}
:where(ul,ol){padding:0;list-style:none}
:where(a){color:inherit;text-decoration:none}
:where(button,input){font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:1px}
::selection{background:var(--ink);color:#000}

/* ---------- chrome ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:#000;padding:10px 16px;font-family:var(--fm);font-size:12px}
.skip:focus{left:8px;top:8px}
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;gap:clamp(14px,2vw,34px);padding:23px var(--gut);
  font-family:var(--fm);
  background:linear-gradient(180deg,rgba(0,0,0,.97),rgba(0,0,0,.92) 80%,transparent);
}



.topact{display:flex;align-items:center;gap:12px;margin-left:auto}
.deploy{
  font-family:var(--fm);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:#000;background:var(--ink);border:0;padding:12px 20px;cursor:pointer;display:inline-block;
  clip-path:var(--action-cut);
}
.deploy:hover{background:var(--mute)}
.menubtn{background:none;border:1px solid var(--line2);color:var(--mute);font-family:var(--fm);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:11px 16px;cursor:pointer}
.menubtn:hover{border-color:var(--ink);color:var(--ink)}

/* Desktop quick-nav: the main public destinations exposed directly in the top
   bar (the full-screen Menu still carries the complete set). Right-aligned
   before the Deploy control; drops the least-load-bearing item at 900px and
   hides entirely below 700px, where the Menu takes over. */
.quick-nav{display:flex;gap:28px;margin-left:auto;font-family:var(--fd);font-size:14px;align-items:center}
.quick-nav a{color:var(--mute);transition:color .12s}
.quick-nav a:hover,.quick-nav a[aria-current]{color:var(--ink)}
.quick-nav+.topact{margin-left:20px}

.menu{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.97);display:none;padding:20px var(--gut) 40px;overflow:auto}
.menu.on{display:block}
/* When the menu overlay is open it is a full-screen modal, so hide the top bar
   beneath it: at 0.97 opacity the wordmark and the Menu/Deploy controls ghost
   through the panel and collide with its own MENU eyebrow. The panel carries its
   own header band (.mtop), so nothing is lost. Menu open requires JS (it adds
   .on), so a :has() rule is sufficient and needs no separate script hook. */
body:has(.menu.on) .topbar{visibility:hidden}
.menu .mtop{display:flex;align-items:center;justify-content:space-between;padding-bottom:26px;border-bottom:1px solid var(--line2)}
.menu .mtop span{font-family:var(--fm);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.menu .mclose{background:none;border:1px solid var(--line2);color:var(--ink);font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;cursor:pointer}
.menu nav a{display:block;padding:16px 0;border-bottom:1px solid var(--line);font-size:clamp(26px,4vw,56px);letter-spacing:-.04em;}
.menu .mfoot{font-family:var(--fm);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-top:26px}

/* ---------- page container ---------- */
main{position:relative;z-index:10}
.wrap{padding-inline:var(--gut)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line2);padding-block:clamp(44px,6vh,72px) 34px;position:relative;z-index:12;background:var(--ground)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:32px 26px}
.fmark b{font-family:var(--fd);font-weight:900;font-size:22px;letter-spacing:-.04em;text-transform:uppercase;display:block}
.fmark p{font-family:var(--fm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:11px;line-height:1.9}
.fcol h3{font-family:var(--fm);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);font-weight:400;margin-bottom:13px}
.fcol li{margin-bottom:9px}
.fcol a{font-size:15px;color:var(--mute)}
.fcol a:hover{color:var(--ink)}
.fbot{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:46px;padding-top:20px;border-top:1px solid var(--line);font-family:var(--fm);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.fbot a:hover{color:var(--ink)}

/* ---------- responsive (chrome) ---------- */
@media (max-width:1120px){.fgrid{grid-template-columns:minmax(0,1fr) repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}
@media (max-width:900px){.quick-nav{gap:17px}.quick-nav a:first-child{display:none}.quick-nav+.topact{margin-left:0}}
@media (max-width:700px){.quick-nav{display:none}.quick-nav+.topact{margin-left:auto}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}