/* ============================================================
   MOLOADS — SHARED PAGE SHELL
   ------------------------------------------------------------
   Tokens, header, navigation and footer for every public page.

   This file exists because the shell used to be copy-pasted into each
   page, and the copies drifted: /privacy, /terms and /login ended up with
   a stripped header (wordmark + "back to site") and a one-line footer,
   while / had the pill nav, the burger menu and the four-column footer.
   They no longer looked like the same site.

   Served first-party from /assets/site.css, so the CSP needs no new
   origin. Cached for a year and immutable, same as the self-hosted fonts.

   NOTE: web/site.html still carries its own copy of these rules inline —
   it is the page this was extracted FROM, and its layout CSS is heavily
   interwoven with the hero and capability sections. Changing a shell rule
   here means changing it there too, until that page is migrated as well.
   ============================================================ */

@font-face{font-family:"General Sans";src:url("/assets/fonts/general-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("/assets/fonts/general-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("/assets/fonts/general-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("/assets/fonts/inter-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --plane:#f5f5f5;
  --card:#efefef;
  --surface:#ffffff;
  --sink:#e7e7e5;

  --ink:#1c1c1c;
  --ink-2:#4d4d4d;
  --ink-3:#6f6f6f;      /* 4.6:1 on plane — lowest we allow for text */
  --hair:rgba(28,28,28,.10);

  --bronze:#8a6a2b;     /* 4.6:1 on plane. THE accent. */
  --orange:#ff682c;
  --bordeaux:#6b1e1c;
  --brown:#331613;
  --slate:#1f3138;
  --ivory:#ebe6dd;
  --nude:#f0ddd5;
  --clay:#c9633f;

  --won:#2f6b3f;
  --lost:#9c4a44;

  --ff-head:"General Sans","PolySans",Inter,-apple-system,system-ui,sans-serif;
  --ff-body:Inter,-apple-system,system-ui,sans-serif;
  --ff-mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* full-bleed: the page uses the whole viewport, only prose is measured */
  --gut:20px;
  --r:20px;
  color-scheme:light;
}
@media (min-width:900px){:root{--gut:40px}}
@media (min-width:1600px){:root{--gut:56px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
body{margin:0;background:var(--plane);color:var(--ink);
  font:400 17px/1.6 var(--ff-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;border-radius:4px}

.rail{width:100%;padding-inline:var(--gut)}
.measure{max-width:58ch}
.mono{font-family:var(--ff-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.eyebrow{font-family:var(--ff-mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bronze)}

.skip{position:absolute;left:-9999px;top:0;padding:12px 18px;background:var(--ink);
  color:var(--plane);z-index:200}
.skip:focus{left:var(--gut);top:10px}

/* ---------- buttons ---------- */
.btn{--h:44px;display:inline-flex;align-items:center;gap:8px;height:var(--h);padding:0 22px;
  border-radius:999px;background:var(--ink);color:var(--plane);border:1px solid var(--ink);
  font:400 15px/1 var(--ff-head);cursor:pointer;
  transition:background-color .22s,color .22s,border-color .22s,transform .22s}
.btn:hover{background:var(--bronze);border-color:var(--bronze)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--hair)}
.btn.ghost:hover{background:var(--ink);color:var(--plane);border-color:var(--ink)}
.btn.sm{--h:38px;padding:0 18px;font-size:14px}
.btn .arw{transition:transform .25s}
.btn:hover .arw{transform:translateX(3px)}

/* ---------- header ---------- */
header.top{position:sticky;top:0;z-index:80;padding-block:16px;
  background:color-mix(in srgb,var(--plane) 82%,transparent);backdrop-filter:blur(12px)}
.topin{display:flex;align-items:center;gap:16px}
/* The wordmark is the REAL logo artwork (the swoosh over the "ol"), not type
   set in General Sans — that was only ever a stand-in. The font-size still
   matters: the chevron after it is sized in em, so it tracks this value. */
.wordmark{font:400 26px/1 var(--ff-head);letter-spacing:-.045em;display:flex;align-items:center;gap:4px}
.wordmark .mark{
  /* Height-driven so the logo's aspect ratio is never distorted; the width
     attribute on the tag reserves the right box so nothing reflows on load. */
  height:24px;width:auto;display:block;
}
@media (max-width:620px){.wordmark .mark{height:21px}}
/* The chevron after the "s". It used to be a fixed 9x16px box centred on the
   flex LINE BOX, which put its top above the l/d ascenders and left its point
   floating well clear of the baseline — it read as knocked upward.
   Now sized in em so it tracks the wordmark at any size, and nudged down so
   its bottom lands ON the text baseline, where a logotype mark belongs.
   Measured against General Sans at 26px: baseline sits 23.0px into the 26px
   line box, line-box centre is 13.0px, so the mark needs +2.6px = .10em. */
.wordmark i{display:inline-block;width:.35em;height:.58em;background:var(--ink);
  font-style:normal;flex:0 0 auto;transform:translateY(.10em);
  clip-path:polygon(0 0,100% 22%,38% 50%,100% 78%,0 100%,52% 50%)}
.navpill{margin-inline:auto;display:none;gap:2px;background:var(--card);border-radius:999px;padding:5px}
@media (min-width:1080px){.navpill{display:flex}}
.navpill a{display:flex;align-items:center;padding:9px 16px;border-radius:999px;
  font:400 15px/1 var(--ff-head);color:var(--ink-2);transition:background-color .22s,color .22s}
.navpill a:hover{background:var(--ink);color:var(--plane)}
.navpill a[aria-current="page"]{background:var(--ink);color:var(--plane)}
.topright{margin-left:auto;display:flex;align-items:center;gap:14px}
@media (max-width:620px){
  .topright{gap:9px}
  .topright .login{display:none}   /* in the burger menu instead */
}
.topright .login{font:400 15px/1 var(--ff-head);color:var(--ink-2)}
.topright .login:hover{color:var(--ink)}
.topright .login[aria-current="page"]{color:var(--ink);
  border-bottom:1px solid var(--bronze);padding-bottom:2px}
.burger{display:grid;gap:5px;padding:8px;background:none;border:0;cursor:pointer}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);
  transition:transform .22s cubic-bezier(.22,.61,.36,1),opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (min-width:1080px){.burger{display:none}}

/* mobile menu — below 1080px the pill nav is hidden, so this is the ONLY
   navigation. It opens from the burger, which used to have no handler. */
.mnav{display:none;padding:8px var(--gut) 18px}
.mnav.on{display:block}
@media (min-width:1080px){.mnav,.mnav.on{display:none}}
.mnav ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
/* scoped to the list, NOT `.mnav a` — that outranks .btn on specificity and
   painted the filled button's label in --ink on an --ink background */
.mnav ul a{display:block;padding:12px 14px;border-radius:12px;
  font:400 17px/1 var(--ff-head);color:var(--ink);transition:background-color .18s}
.mnav ul a:hover{background:var(--card)}
.mnav .sep{margin-top:12px;padding-top:14px;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:10px}
.mnav .sep .btn{flex:1 1 auto;justify-content:center}

/* ---------- footer ---------- */
footer{padding:0 var(--gut) var(--gut)}
.fin{background:var(--ink);color:var(--plane);border-radius:var(--r);position:relative;overflow:clip;
  padding:clamp(30px,3.4vw,60px)}
.fglyph{position:absolute;right:-46px;top:-30px;width:min(178px,18%);color:var(--orange);pointer-events:none}
.ftop{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.fin .wordmark{color:var(--plane)}
.fin .wordmark i{background:var(--plane)}
/* Two columns on phones, not one. The single-column stack made the footer
   ~1250px tall — on /login that was nearly twice the height of the sign-in
   form it sat under, so signing in meant scrolling past a wall of 24
   marketing links. */
.fcols{margin-top:clamp(34px,3.4vw,58px);display:grid;gap:30px 24px;
  grid-template-columns:repeat(2,minmax(0,1fr));position:relative;z-index:2}
@media (min-width:700px){.fcols{grid-template-columns:repeat(4,minmax(0,1fr));max-width:900px}}
.fcols h4{font:400 16px/1 var(--ff-head);margin:0 0 16px}
.fcols ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fcols a{font-size:15px;color:rgba(245,245,245,.62);transition:color .2s}
.fcols a:hover{color:var(--plane)}
.fbot{margin-top:clamp(40px,4vw,70px);display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  font-size:13.5px;color:rgba(245,245,245,.62);position:relative;z-index:2}
.fbot .sp{margin-left:auto}
/* .42 alpha put this at 3.81:1 on --ink, under AA for 12.5px text. .50 is
   4.84:1 and still reads as the quietest line in the footer. */
.legal{margin-top:26px;font-size:12.5px;line-height:19px;color:rgba(245,245,245,.5);
  max-width:86ch;position:relative;z-index:2}

/* ---------- cookie consent ----------
   Bottom-right card rather than a full-width bar: the bar covers the footer
   CTA on a laptop and eats a third of a phone screen, and this one has to
   sit there until answered. Built from the same tokens as the rest of the
   page — surface, hairline, --r, the .btn family — so it reads as part of
   the site instead of a bolted-on compliance widget. */
.consent{
  position:fixed;right:var(--gut);bottom:var(--gut);z-index:120;
  width:min(360px,calc(100vw - var(--gut) * 2));
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);
  padding:20px;
  box-shadow:0 12px 40px rgba(28,28,28,.14),0 2px 8px rgba(28,28,28,.06);
  /* Starts hidden and is revealed by .on so it cannot flash before the
     script decides whether a choice already exists. */
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .24s ease,transform .24s cubic-bezier(.22,.61,.36,1);
}
.consent.on{opacity:1;transform:none;pointer-events:auto}
.consent-t{
  margin:0 0 8px;font:400 15px/1 var(--ff-head);letter-spacing:-.01em;color:var(--ink);
}
.consent-b{margin:0 0 16px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.consent-b a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.consent-a{display:flex;gap:8px}
.consent-a .btn{flex:1 1 auto;justify-content:center}
@media (max-width:520px){
  .consent{left:var(--gut);right:var(--gut);width:auto}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .consent{opacity:1;transform:none}
}