/* ==========================================================================
   AgnCred site chrome: the header bar, the menu, the footer and the tokens
   they use. One file, two consumers. The static pages link it beside
   site.css, and the React app imports it (apps/web/src/main.tsx), so the
   verify and receipt views wear the same header and footer as the home page.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Type stacks

   Round 126 (fixlist 8, tag 08): Segoe UI is the platform's default face, on
   agncred.com as on slobal.com and in the workspace chrome, and the marketing
   webfonts are retired from the live pages. Four families went: Onest (body),
   two condensed display faces, Geist Mono (code and
   small caps). Nothing loads over the network for type any more, so the
   @font-face blocks and the four rel=preload lines went with them.

   The preload half of that sentence was FALSE until round 127. The script
   that was supposed to strip those four lines from each of the six pages
   matched on a pattern ending `>\n`, the files are CRLF, so it matched
   nothing, removed nothing, reported nothing, and left every page still
   preloading four fonts it no longer uses - four wasted requests on first
   paint, and a comment here asserting the opposite. The lines are gone now,
   counted out four per file. The lesson is not about line endings: a rewrite
   that cannot say how many things it changed cannot be believed when it says
   it changed them.

   The condensed display font files are deleted from public/fonts, because nothing
   referenced them. CSP font-src 'self' is unchanged.

   Display face: headings, the hero, plan names and legal page
   titles set in Space Grotesk, weight 600, small caps labels at 500. It is a
   self-hosted variable file, /fonts/space-grotesk-latin-variable.woff2, under
   the SIL Open Font Licence (public/fonts/OFL.txt), so no third-party call
   is made and font-src 'self' still holds. The @font-face below is the only
   one for it: this file serves the static pages and the React app both.
   Body text is unchanged. --font-display is the one token that names the face.

   Three stacks now, and only three. Everything that is prose, a label, a
   button, an eyebrow or a legal line is --sans. --mono is for text where the character
   grid carries meaning: code, receipt payloads, hashes, key identifiers,
   the terminal transcript, dates in a receipt table.
   -------------------------------------------------------------------------- */

@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("/fonts/space-grotesk-latin-variable.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root {
  --sans: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* --- The header bar (round 127, tag 06) --------------------------------
     White, and in AgnCred's OWN colours.

     Round 126 drew this bar dark and put Slobal's cyan and sky on it, which
     was wrong twice over. BRAND.md colour rule 3 is explicit - "Never use
     Slobal cyan or sky as AgnCred UI colours. That is the brand boundary
     between parent and product." - and on a white bar those same values are
     also unreadable: the cyan-300 link colour measured 1.45:1 on white and the
     off-white ink beside it 1.19:1. Round 144 widened the cyan gate to the
     whole family, so the two values are named by role here rather than spelled
     out: a rule cannot be written in the thing it forbids.

     So the two sites' headers are identical in FORM and each keeps its own
     accent: slobal.com stays teal and cyan, AgnCred returns to pine. Every
     value below is from the BRAND.md palette, and the contrast of each
     against the surface it is drawn on is in the comment beside it.

     These are NAV tokens, not shared chrome tokens. The footer below is
     still dark and had been borrowing the same accent, so retuning one
     palette silently retuned the other - the names now make that impossible.
     ---------------------------------------------------------------------- */
  --nav-bar: rgba(255, 255, 255, 0.94);
  /* Opaque, for the scrolled state the script writes. */
  --nav-bar-solid: #FFFFFF;
  --nav-line: #E0DED6;                 /* shared Slobal neutral: line */
  --nav-ink: #374151;                  /* ink-soft, 10.3:1 on white   */
  --nav-accent: #03625A;               /* pine-700, 7.2:1 on white    */
  --nav-accent-deep: #02423D;          /* pine-900, hovers            */
  --nav-accent-tint: #DDF0ED;          /* pine-100, ghost hover bed   */
  --nav-on-fill: #FFFFFF;              /* 7.2:1 on pine-700           */

  /* --- The footer ---------------------------------------------------------
     Still #0F172A, so it needs a DARK-surface accent and cannot share the
     bar's. pine-300 is the palette's own answer for that ("Highlights,
     dark-mode mark"), and it is 8.2:1 on the footer's ground.
     ---------------------------------------------------------------------- */
  --foot-bg: #0F172A;
  --foot-ink: #C3C7D2;
  --foot-accent: #5FBFB4;              /* pine-300, 8.2:1 on #0F172A  */

  /* --- Target size (systemic 2.2) -----------------------------------------
     One token for the smallest button or standalone link, and one for the
     space between two of them. 32px with a fine pointer, 44px with a coarse
     one. qa/a11y/axe-gate.mjs measures every interactive element against
     --hit-min in a real browser, so a control cannot quietly fall under it.
     The app styles (apps/web/src/styles.css) define the same two names. */
  --hit-min: 32px;
  --hit-gap: 8px;
}
@media (pointer: coarse) {
  :root { --hit-min: 44px; }
}


/* --------------------------------------------------------------------------
   3. Header and footer chrome, and the interaction classes

   Round 126 (fixlist 8, tags 04 and 05): the header and the footer are the two
   pieces of this site a visitor also meets on slobal.com, and they were the
   two that looked like a different company. Both now follow the slobal.com
   Home conventions - a dark blurred sticky bar with uppercase letterspaced
   links, and a single-row footer on #0F172A - while the link SET and the brand
   stay AgnCred's own.

   Unlike everything else on this page, the chrome's own type, colour and
   geometry live HERE rather than inline: there is no include mechanism, the
   same bar is hand-copied into six files, and six copies of a colour is how
   the last drift happened. What stays inline is only what differs per page
   (the hrefs) or what the scroll script writes (the bar's background).
   The rest of the page keeps its inline styles, so the state rules below it
   still carry !important to beat them.
   -------------------------------------------------------------------------- */

.skip-link:focus{left:12px !important}
.skip-link:focus-visible{left:12px !important}

/* --- Header --------------------------------------------------------------- */

.nav-bar{position:sticky;top:0;z-index:60;background:var(--nav-bar);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--nav-line);transition:background-color 240ms ease,border-color 240ms ease}
/* 39.5px, and the fraction is not a typo. Tag 04 is about the two sites'
   headers being the SAME HEIGHT, and the reference is slobal.com's
   `.site-head .bar`, which totals 56.5px: a 55.5px bar plus its 1px border.
   This box is content-box with 8px of padding above and below, so the content
   has to be 39.5 for the bar to be 55.5 and the whole thing to be 56.5. The
   tallest thing in the row is now the filled button at 37.5px (round 127), so
   this min-height still sets the height at every width with 2px to spare -
   which is the point: one number, no breakpoint, and no way for the two sites
   to drift apart by a pixel and a half again. The hero's fold offset in
   index.html is derived from the same 56.5. */
.nav-row{max-width:1180px;margin:0 auto;padding:8px clamp(20px,4vw,48px);min-height:39.5px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-brand{display:flex;align-items:center;min-height:var(--hit-min);text-decoration:none}
/* One flex row. The flex gap is the link gap. The e2e suite counts
   `.nav-links > a` as direct children, so the buttons share the row with the
   links and no wrapper groups them. */
.nav-links{display:flex;align-items:center;gap:12px}

/* Uppercase in CSS, never in the markup: the accessible name, the e2e
   assertions and anyone reading the source all keep the sentence-case word. */
.nav-link{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--nav-ink);text-decoration:none;white-space:nowrap;
  /* Tap targets: the row's links are 17px tall at their font size, so they
     take the --hit-min token as a minimum height. The row centres its items,
     so the rendered layout does not move. */
  display:inline-flex;align-items:center;min-height:var(--hit-min);padding:0 2px;margin:0 -2px}
.nav-link:hover{color:var(--nav-accent)}

/* Header buttons (UX-14, UX-16, A3). Get started is an outline. Sign in is a
   borderless text button, so the row has one outlined call to action beside
   the one filled Get started in the hero. Both take the --hit-min token as
   their minimum height: 32px with a fine pointer, 44px with a coarse one. They
   never shrink to fit. When the row runs out of width the links fold into the
   menu button below instead.

   The casing is CSS only, so the DOM, the accessible name and the e2e suite
   keep the sentence case words. Height: 13px at 1.5 line height is 19.5px,
   plus 8px and 8px of padding and 1px and 1px of border is 37.5px, above the
   fine pointer token. */
.btn-ghost,.btn-line{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--hit-min);font-family:var(--sans);font-size:13px;font-weight:700;line-height:1.5;letter-spacing:0.06em;text-transform:uppercase;color:var(--nav-accent);text-decoration:none;white-space:nowrap;border:1px solid transparent;border-radius:8px;padding:8px 14px;transition:background-color 160ms ease,color 160ms ease}
.btn-line{border-color:var(--nav-accent)}
.btn-ghost:hover,.btn-line:hover{background:var(--nav-accent-tint);color:var(--nav-accent-deep)}
.btn-ghost:active,.btn-line:active{transform:translateY(1px)}

/* --- Menu button and panel (UX-11, A4) ------------------------------------
   Below 960px the section links fold away. The button opens a panel that
   holds them, and below 680px it also holds Get started. The panel repeats
   those links, and account-nav.js drops its Get started when the visitor has
   a portal hint. The button and panel need the script in nav-menu.js. The
   footer carries every link too. */
.nav-menu-btn{display:none;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:var(--hit-min);font-family:var(--sans);font-size:13px;font-weight:700;line-height:1.5;letter-spacing:0.06em;text-transform:uppercase;color:var(--nav-accent);background:transparent;border:1px solid var(--nav-line);border-radius:8px;padding:8px 12px;cursor:pointer}
.nav-menu-btn:hover{background:var(--nav-accent-tint);color:var(--nav-accent-deep)}
.nav-menu-btn svg{display:block;flex:none}
.nav-menu{position:absolute;top:100%;left:0;right:0;background:var(--nav-bar-solid);border-bottom:1px solid var(--nav-line);box-shadow:0 8px 16px rgba(10,14,26,0.08)}
.nav-menu[hidden]{display:none}
.nav-menu-inner{max-width:1180px;margin:0 auto;padding:8px clamp(14px,4vw,48px) 14px;display:flex;flex-direction:column;align-items:stretch;gap:var(--hit-gap)}
.nav-menu-link{display:flex;align-items:center;min-height:var(--hit-min);padding:6px 4px;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--nav-ink);text-decoration:none}
.nav-menu-link:hover{color:var(--nav-accent)}
.nav-menu-cta{align-self:flex-start}
.nav-menu [data-signout]{display:none}

/* --- Signed-in account pill (F07, operator decision D01) ------------------
   Portal then Sign Out, the same object slobal.com draws in its header when
   the person is signed in. The operator asked for it to be identical to
   slobal.com, colour included, so the values below are slobal.com's own and
   not AgnCred pine: one 999px outline (--pill-line) holding two segments, a
   32px segment inside a 1px outline (34px), Onest 800 12px/1 uppercase with
   .08em tracking, 13px side padding, a 1px divider, teal outline on hover.
   Portal carries the tint, Sign Out is transparent. Markup and class names
   are slobal.com's (.slgroup, .slbadge, .signout) so the two stay diffable.
   The face is Onest, as on slobal.com, scoped to this one control: the rest
   of the bar stays on the platform stack. It is registered as "Onest Pill", not
   "Onest": the round 123 nav gate waits on document.fonts.check() for a stack
   that names Onest, and a declared but unused Onest face would never load on the
   signed-out page, so the wait would never end. It is the local file the SPA
   already ships (font-src 'self'), and swap keeps text visible while it
   loads. */
@font-face{font-family:"Onest Pill";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/onest-100-900-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --pill-line: #E0DED6;  /* slobal --line, the outline and the divider */
  --pill-tint: #E3F1F5;  /* slobal --primary-tint, the Portal segment */
  --pill-ink: #0A0E1A;   /* slobal --ink */
  --pill-hover: #0E7490; /* slobal --teal, the outline on hover */
}
.nav-bar .slgroup{display:inline-flex;align-items:center;flex:none;border:1px solid var(--pill-line);border-radius:999px;overflow:hidden;transition:border-color 150ms ease}
.nav-bar .slgroup:hover{border-color:var(--pill-hover)}
.nav-bar .slbadge{display:inline-flex;align-items:center;height:var(--hit-min);padding:0 13px;margin-block:0;background:var(--pill-tint);color:var(--pill-ink);font-family:"Onest Pill","Segoe UI","Segoe UI Variable Text",system-ui,-apple-system,sans-serif;font-size:12px;font-weight:800;line-height:1;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background-color 150ms ease,color 150ms ease}
.nav-bar .slbadge+.slbadge{border-left:1px solid var(--pill-line)}
.nav-bar .slbadge.signout{background:transparent;color:var(--pill-ink)}
.nav-bar a.slbadge:hover{background:var(--pill-tint);color:var(--pill-ink)}
@media (max-width:640px){
  .nav-bar .slbadge{height:var(--hit-min);padding:0 9px;font-size:clamp(9.5px,2.75vw,12px);letter-spacing:.06em}
}

/* --- Footer -------------------------------------------------------------- */

/* The footer did NOT go white with the bar: it is the page's dark foot on both
   sites and stays #0F172A. It had been borrowing the bar's accent for its
   hovers, which meant retuning the bar to pine would have quietly repainted
   these links to 1.4:1 on their own ground - unreadable, and nothing in the
   suite asserts a colour, so nothing would have caught it. Its palette is its
   own now, and pine-300 is the brand's declared dark-surface highlight. */
.site-footer{background:var(--foot-bg)}
.site-footer-inner{max-width:1080px;margin:0 auto;padding:32px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.site-footer-brand{display:inline-flex;align-items:center;min-height:var(--hit-min);text-decoration:none}
.site-footer-brand img{display:block;height:22px;width:auto}
.site-footer-nav{display:flex;flex-wrap:wrap;align-items:center;gap:18px;min-width:0}
.footer-link{display:inline-flex;align-items:center;min-height:var(--hit-min);font-family:var(--sans);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--foot-ink);text-decoration:none;white-space:nowrap;
  /* Same borrowed hit area as the header links. */
  padding:5px 2px;margin:-5px -2px}
.footer-link:hover{color:var(--foot-accent)}
.site-footer-legal{width:100%;margin:0;font-family:var(--sans);font-size:12px;letter-spacing:0.06em;color:var(--foot-ink)}
.site-footer-legal a{color:var(--foot-ink)}
.site-footer-legal a:hover{color:var(--foot-accent)}


/* --------------------------------------------------------------------------
   6. Responsive nav. One row at every width, and the row never wraps.

   The buttons and links keep their type size and their --hit-min height at
   every width. What gives, in order: the wordmark steps down, the section
   links fold into the menu button (960px), and Get started folds into the menu
   panel (680px). Market and Sign in stay in the row at every width.

   The row is set in a system font stack, so its width depends on the face the
   visitor's machine picks first. The e2e suite measures the headroom in the
   face it draws in, and the widths below were chosen with that margin.
   -------------------------------------------------------------------------- */
.nav-row{flex-wrap:nowrap;min-width:0}
.nav-links{flex-wrap:nowrap;min-width:0;flex-shrink:0}
.nav-brand{flex:0 1 auto;min-width:0}
/* object-fit contain lets the wordmark shrink without stretching. */
.nav-brand img{height:30px;width:auto;max-width:100%;object-fit:contain}
@media (max-width:960px){
  #navLinks a[data-sec]{display:none}
  .nav-menu-btn{display:inline-flex}
}
@media (min-width:961px){.nav-menu{display:none !important}}
@media (max-width:900px){.nav-brand img{height:28px}}
@media (max-width:680px){
  #navGetStarted{display:none}
  .nav-menu-btn{width:var(--hit-min);padding:0}
  .nav-menu-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}
@media (min-width:681px){.nav-menu [data-acct]{display:none}}
@media (max-width:500px){
  .nav-bar .slbadge.signout{display:none}
  .nav-menu [data-signout]{display:flex}
}
@media (max-width:560px){
  .nav-brand img{height:26px}
  .nav-row{gap:12px}
  .nav-links{gap:10px}
}
@media (max-width:500px){
  .nav-brand img{height:20px}
  .nav-row{gap:10px}
  .nav-links{gap:var(--hit-gap)}
}
@media (max-width:430px){.nav-row{padding-left:14px;padding-right:14px}}
@media (max-width:400px){
  .nav-brand img{height:18px}
  .nav-row{gap:var(--hit-gap)}
}
@media (max-width:360px){.nav-brand img{height:16px}}
@media (max-width:374px){.nav-row{padding-left:8px;padding-right:8px}}