/* ─────────────────────────────────────────────────────────────
   Groundwork by Cortado Group — shared site chrome
   Brand tokens lifted from cortadogroup.com. Gotham is the
   licensed brand face; Montserrat is the web fallback. Drop
   Gotham webfont files in and it takes over automatically.
   ───────────────────────────────────────────────────────────── */

/* ── Heading scheme (WCAG 1.3.1) ──────────────────────────────
   Levels are chosen by position in the document outline, never by
   the font-size a heading happens to need — size is always set with
   CSS on a class/selector, not by picking a bigger or smaller tag.

   h1 — page title. Exactly one per page.
   h2 — every top-level section in reading order, including
        sidebar/aside blocks that stand alongside the main content
        flow (a table of contents, a share panel, a "keep reading"
        block) when nothing else precedes them but the h1. Where a
        page has a purely visual section (e.g. a card grid) with no
        visible section title, a `.sr-only` h2 documents it instead
        of letting the outline skip straight to h3.
   h3 — a subsection nested one level inside its enclosing h2: card
        titles, glossary terms, stat-card asides, and the footer's
        navigation column headings (Product/Resources/Customers/
        Company — footer always follows a same-page h2, so h3 here
        never skips a level).
   h4 — reserved for a further level genuinely nested inside an h3
        (e.g. link cards inside an h3 "Keep reading" block). Not
        used as a shortcut for "small text".
   No h5/h6 in use; if content ever needs a fifth level, add it here
   first rather than reaching for the tag with the right size.
   ───────────────────────────────────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:root{
  --ink:#051C2C; --ink-2:#43535F; --ink-3:#8E99A1;
  /* Token derivation method: every text/UI colour below is checked against the
     DARKEST background it is actually used on, not against white — white is
     the easy case and passing it proves nothing about --sage (the darkest of
     the light surfaces) or --grey. Ratios noted per token; small text needs
     4.5:1, large text (>=24px, or >=18.66px bold — checked at the SMALL end
     of any clamp()) needs 3:1, non-text UI (borders, focus rings, icons)
     needs 3:1.

     --ink-3-lo: muted body/caption text on light backgrounds. Its darkest
     actual use is --grey (.gloss/.demo-t/.tools background), so it is
     derived against --sage instead for headroom against anything darker
     added later: #566169 is 4.99:1 on --sage, 5.72:1 on --grey, 6.35:1 on
     white. --ink-3 (#8E99A1, 2.91:1 on white) is kept ONLY for the one
     dark-footer tagline (.fbrand .brand .tx span, 5.97:1 on --ink); do not
     reuse it on any light background. */
  --ink-3-lo:#566169;
  --deep:#0D2C41; --deep-line:#1B3648;
  /* --lime (#97D700) is 1.75:1 on white and must never be used for text on a
     light background.

     --lime-ink is for LARGE TEXT ONLY (h1/h2 accent spans, >=24px) and for
     non-text UI (focus rings, input-focus outlines) — both only need 3:1,
     and it has to survive on the one DARK background those spans also
     appear on (.deep, .hero-c). #4F7A00 is 5.10:1 on white / 4.62:1 on
     --sage / 3.40:1 on --ink — clears 3:1 everywhere it is used, but does
     NOT clear 4.5:1 on --sage, so it must never be used for small text.

     --lime-ink-sm is for every SMALL bold caption/tag/label (eyebrows,
     card tags, band labels, glossary abbreviations, etc.) — these only
     appear on light backgrounds, darkest of which is --sage, so it is
     derived against --sage: #3F6600 is 5.30:1 on --sage, 5.72:1 on --grey,
     6.75:1 on white. The one small-caption instance that DOES sit on a dark
     background (.eyebrow inside .deep) is overridden back to bright --lime
     (9.96:1 on --ink) rather than reusing either lime-ink token. */
  --lime:#97D700; --lime-ink:#4F7A00; --lime-ink-sm:#3F6600; --lime-wash:#F2F9E2;
  --sage:#E1E6D7; --grey:#F3F3F3; --line:#D7DBDE; --line-soft:#E9ECEE;
  --white:#FFFFFF;
  --ease:cubic-bezier(.16,1,.3,1); --fast:200ms var(--ease);
  --pad:clamp(1.25rem,4.5vw,5rem);
  --font:'Gotham','Montserrat',ui-sans-serif,sans-serif;
  --serif:'Newsreader',Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--white);color:var(--ink);font-size:16px;
  line-height:1.55;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--lime-ink);outline-offset:3px}
.wrap{max-width:1400px;margin-inline:auto;padding-inline:var(--pad)}
.wrap-n{max-width:1080px;margin-inline:auto;padding-inline:var(--pad)}
h1,h2,h3,h4{letter-spacing:-.03em;line-height:1.06;font-weight:700}

/* ── announce ── */
.announce{background:var(--ink);color:var(--white)}
.announce .wrap{display:flex;align-items:center;gap:1rem;padding-block:.7rem;font-size:.8rem}
.announce b{font-weight:600}
.announce a{color:var(--lime);font-weight:700;display:inline-flex;align-items:center;gap:.35rem;
  margin-left:auto;white-space:nowrap}
.announce a::after{content:"→";transition:transform var(--fast)}
.announce a:hover::after{transform:translateX(3px)}
@media(max-width:720px){.announce b{display:none}}

/* ── nav ── */
nav.site{position:sticky;top:0;z-index:60;background:var(--white);border-bottom:1px solid var(--line)}
nav.site .wrap{display:flex;align-items:stretch;gap:clamp(1rem,3vw,2.75rem);padding-inline-end:0}
.brand{display:flex;align-items:center;gap:.7rem;padding-block:1.15rem;flex:0 0 auto}
.brand .mk{width:26px;height:26px;background:var(--lime);flex:0 0 auto;
  clip-path:polygon(50% 0,100% 26%,100% 74%,50% 100%,0 74%,0 26%)}
.brand .tx b{display:block;font-size:.95rem;font-weight:700;letter-spacing:-.02em;line-height:1}
.brand .tx span{display:block;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3-lo);margin-top:.18rem}
nav.site ul{list-style:none;display:flex;align-items:center;gap:clamp(.9rem,2vw,1.9rem);margin-left:auto}
nav.site ul > li > a{font-size:.85rem;font-weight:500;color:var(--ink-2);transition:color var(--fast);
  display:flex;align-items:center;gap:.3rem;padding-block:1.15rem}
nav.site ul > li > a:hover,nav.site ul > li > a[aria-current]{color:var(--ink)}
nav.site ul .car::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.navcta{display:flex;align-items:stretch;margin-left:1.5rem}
.navcta .signin{display:flex;align-items:center;padding-inline:1.1rem;font-size:.85rem;
  font-weight:500;color:var(--ink-2)}
.navcta .demo{display:flex;align-items:center;background:var(--ink);color:var(--white);
  padding-inline:clamp(1.1rem,2.5vw,2rem);font-size:.85rem;font-weight:600;transition:background var(--fast)}
.navcta .demo:hover{background:var(--lime);color:var(--ink)}
@media(max-width:1080px){nav.site ul{display:none}}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-size:.88rem;font-weight:600;
  padding:.95rem 1.6rem;transition:all var(--fast);border:2px solid transparent;white-space:nowrap}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-lime:hover{background:var(--ink);color:var(--white)}
.btn-ink{background:var(--ink);color:var(--white)}
.btn-ink:hover{background:var(--lime);color:var(--ink)}
.btn-out{border-color:var(--line);color:var(--ink)}
.btn-out:hover{border-color:var(--ink)}

/* ── section furniture ── */
section{padding-block:clamp(3.5rem,8vh,6.5rem)}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime-ink-sm);margin-bottom:1rem;display:flex;align-items:center;gap:.7rem}
.eyebrow::after{content:"";width:clamp(20px,4vw,52px);height:2px;background:var(--lime)}
/* .eyebrow inside .deep (dark) sits on --ink: --lime-ink-sm (sage-derived) only
   clears ~2.3:1 there, so this section is the one place the small-caption
   token can't be reused — fall back to bright --lime (9.96:1 on --ink). */
.deep .eyebrow{color:var(--lime)}
h2{font-size:clamp(1.95rem,4.2vw,3.4rem);max-width:22ch;text-wrap:balance}
h2 span,h1 span{color:var(--lime-ink)}
.sub{font-size:1.02rem;color:var(--ink-2);max-width:56ch;margin-top:1.1rem}
.head-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:2rem;
  align-items:end;margin-bottom:clamp(2rem,4vh,3rem)}
@media(max-width:820px){.head-row{grid-template-columns:1fr}}

/* ── interior page masthead ── */
.mast{border-bottom:1px solid var(--line);padding-block:clamp(2.25rem,5vh,3.75rem) clamp(1.75rem,4vh,2.75rem)}
.mast.tint{background:var(--grey)}
.crumb{display:flex;gap:.5rem;align-items:center;font-size:.76rem;color:var(--ink-3-lo);margin-bottom:1.1rem}
.crumb a:hover{color:var(--ink)}
.crumb span{color:var(--line)}
.mast h1{font-size:clamp(2.1rem,5vw,3.9rem);max-width:20ch;text-wrap:balance}
.mast p{font-size:1.02rem;color:var(--ink-2);max-width:60ch;margin-top:1.1rem}

/* ── cta band ── */
.cta{background:var(--sage)}
.cta .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2.5rem;align-items:center}
.cta h2{max-width:16ch}
.cta p{font-size:1.05rem;color:var(--ink-2);max-width:44ch;margin-top:1rem}
.cta .acts{display:flex;gap:.7rem;flex-wrap:wrap}
@media(max-width:860px){.cta .wrap{grid-template-columns:1fr}}

/* ── footer ── */
footer.site{background:var(--ink);color:#A9B6BF;padding-block:clamp(2.5rem,5vh,4rem)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);padding-bottom:2.5rem;border-bottom:1px solid var(--deep-line)}
@media(max-width:900px){.fgrid{grid-template-columns:repeat(2,1fr)}}
.fgrid h3{font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--white);margin-bottom:.9rem}
.fgrid ul{list-style:none}
.fgrid li{margin-bottom:.5rem}
.fgrid a{font-size:.85rem;transition:color var(--fast)}
.fgrid a:hover{color:var(--lime)}
.fbrand .tx b{color:var(--white)}
/* footer sits on --ink (dark); --ink-3-lo (tuned for white) would fail here,
   so this restores the lighter --ink-3 (5.97:1 on --ink) for the tagline. */
.fbrand .brand .tx span{color:var(--ink-3)}
.fbrand p{font-size:.85rem;margin-top:.9rem;max-width:30ch;line-height:1.55}
.fbot{display:flex;gap:1.5rem;padding-top:1.5rem;font-size:.78rem;flex-wrap:wrap}
.fbot ul{list-style:none;display:flex;gap:1.35rem;margin-left:auto}

@media(prefers-reduced-motion:reduce){
  *{transition-duration:1ms!important;animation-duration:1ms!important;
    animation-iteration-count:1!important;scroll-behavior:auto!important}
}