/* ============================================================================
   XINNACE v3 — base.css   THE SHARED LAYER
   /home/xinnacr5j4s0/src/Xinnace-Marketing/v3/assets/css/base.css
   ----------------------------------------------------------------------------
   v3 is the ten committed artifacts, assembled. Every page loads THIS file and
   then its own page-*.css, which is that artifact's stylesheet with the chrome
   rules taken out. So:

     base.css      the grid, the type ramp, the buttons, the top bar and the
                   footer — one definition, identical on all ten pages.
     page-X.css    everything else from artifact X, verbatim, and it loads
                   second so the page's own tokens and components always win.

   WHY THE CHROME IS PINNED TO LITERALS
   The artifacts write the bar and the footer in tokens — var(--ink-faint) and
   friends — which works inside a single artifact because its :root is the dark
   palette. Here ten different :root blocks land on the same bar, and they do
   not all define the same names: the home artifact has no --surface-2 and no
   --eyebrow at all, so a tokenised bar loses its hover pill and its footer
   link colour on exactly one page. The chrome below therefore carries the dark
   values as literals. It is navy on every page by construction, which is what
   every artifact draws and what "uniform" has to mean.

   AND WHY GEOMETRY IS SHARED
   --maxw, --gutter and --head-h are stripped from each page's :root so all ten
   share one column width (1180px) and one bar height (72px). Nine artifacts
   already agree on those; only the home artifact differed, at 1100/76, and a
   bar that changes height as you navigate is the thing this file exists to
   stop. Every other token stays per-page.

   Regenerate rather than edit: this file is assembled from the artifacts.
   ========================================================================== */


:root{
  --ground:#07111F;
  --ground-2:#0B182A;
  --surface:#101E31;
  --surface-2:#152640;
  --line:#223651;
  --line-2:#39516D;
  --ink:#F5F8FC;
  --ink-soft:#C9D4E2;
  --ink-faint:#AFBDD0;
  --brand:#12B5AB;
  --brand-2:#0FA39A;
  --on-brand:#041816;
  --eyebrow:#46D0C7;
  --manage:#2C8FD6;
  --empower:#1FAE6B;
  --engage:#F59331;
  --manage-text:#7FC0EF;
  --empower-text:#71D19E;
  --engage-text:#FFB66B;
  --manage-wash:rgba(44,143,214,.14);
  --empower-wash:rgba(31,174,107,.14);
  --engage-wash:rgba(245,147,49,.14);
  --good:#4ADE9B;
  --shadow-2:0 18px 44px rgba(0,0,0,.42),0 4px 12px rgba(0,0,0,.30);

  --maxw:1180px;
  --gutter:clamp(20px,5vw,44px);
  --head-h:72px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --f-display:"Poppins","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-body:"Archivo","Helvetica Neue",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
.light{
  --ground:#FFFFFF;
  --ground-2:#ECF2F8;
  --surface:#FFFFFF;
  --surface-2:#F2F6FA;
  --line:#DCE6EF;
  --line-2:#C3D2E0;
  --ink:#172235;
  --ink-soft:rgba(23,34,53,.72);
  --ink-faint:#617086;
  --eyebrow:#0E8F87;
  --brand:#1C8A83;
  --brand-2:#146D67;
  --on-brand:#FFFFFF;
  --manage-text:#1F6FA8;
  --empower-text:#157A4C;
  --engage-text:#AF620C;
  --manage-wash:rgba(44,143,214,.10);
  --empower-wash:rgba(31,174,107,.10);
  --engage-wash:rgba(245,147,49,.10);
  --good:#16794A;
  --shadow-2:0 18px 44px rgba(23,34,53,.10),0 4px 12px rgba(23,34,53,.05);
  background:var(--ground);
  color:var(--ink);
}
.light--white{--ground:#FFFFFF;--surface:#FFFFFF;}
.light--grey{--ground:#EFF3F8;--surface:#FFFFFF;--line:#DCE5EE;}
*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0;background:#07111F;color:#F5F8FC;
  font-family:var(--f-body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
svg{display:block;}
a{color:inherit;}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:4px;}
.shell{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;margin:0;text-wrap:balance;}
h1{font-size:clamp(34px,4.6vw,56px);line-height:1.08;}
h2{font-size:clamp(27px,3.4vw,42px);line-height:1.12;}
h3{font-size:22px;letter-spacing:-.025em;line-height:1.25;}
h4{font-size:16.5px;letter-spacing:-.015em;}
p{margin:0;}
.eyebrow{
  font-family:var(--f-body);font-stretch:75%;font-size:11.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--eyebrow);
  display:flex;align-items:center;gap:11px;
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--line-2);flex:none;}
.lede{font-size:clamp(16.5px,1.4vw,19px);line-height:1.62;color:var(--ink-soft);max-width:62ch;}
/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.rv.is-in{opacity:1;transform:none;}

/* ---------- chrome ---------- */
/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-body);font-size:15.5px;font-weight:600;
  padding:13px 25px;border-radius:999px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .2s var(--ease),background-color .2s var(--ease),
             border-color .2s var(--ease),color .2s var(--ease);
}
.btn--ghost{border-color:var(--line-2);color:var(--ink);}
.btn--ghost:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px);}
.btn--sm{padding:10px 20px;font-size:14.5px;}
/* ---------- header ---------- */
.head{
  position:sticky;top:0;z-index:60;height:var(--head-h);
  background:#07111F;
  border-bottom:1px solid transparent;transition:border-color .25s var(--ease);
}
.head.is-stuck{border-bottom-color:#223651;}
.head__in{height:100%;display:flex;align-items:center;gap:16px;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;color:#F5F8FC;}
.brand svg{width:36px;height:30px;flex:none;color:#FFFFFF;}
.brand__word{font-family:var(--f-display);font-weight:700;font-size:21px;letter-spacing:-.008em;}
.brand__word b{color:#12B5AB;font-weight:700;}
.nav{display:flex;align-items:center;gap:2px;}
.nav a{
  font-size:15px;font-weight:450;text-decoration:none;color:#AFBDD0;
  padding:8px 13px;border-radius:8px;
  transition:color .18s var(--ease),background-color .18s var(--ease);
}
.nav a:hover,.nav a.is-on{color:#F5F8FC;background:#152640;}
.head__cta{display:flex;align-items:center;gap:10px;}
.burger{
  display:none;order:3;background:none;border:1px solid #39516D;
  border-radius:9px;padding:8px 10px;cursor:pointer;color:#F5F8FC;
}
.burger svg{width:18px;height:18px;}
@media (max-width:940px){
  .nav{
    position:fixed;inset:var(--head-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:#101E31;border-bottom:1px solid #223651;
    padding:12px var(--gutter) 20px;box-shadow:var(--shadow-2);
    transform:translateY(-10px);opacity:0;pointer-events:none;
    transition:opacity .2s var(--ease),transform .2s var(--ease);
  }
  .nav.is-open{opacity:1;transform:none;pointer-events:auto;}
  .nav a{padding:13px 2px;font-size:17px;border-radius:0;border-bottom:1px solid #223651;}
  .burger{display:block;}
  .head__cta .btn--ghost{display:none;}
}
/* THE BAR ON A NARROW PHONE. Brand + Book a Demo + burger is a fixed 297px of
   content at the default sizes; a 320px screen has 280px between the gutters,
   so the row pushed 36px past the viewport and the WHOLE PAGE scrolled
   sideways — every v3 page, only under ~356px, which is why it read as the
   home page alone. Nothing here is display:none: the row is tightened in two
   steps so the wordmark and the call to action both survive at 320px. Measured
   at 320/330/344/360/390: fits with the 20px gutter intact at every one.
   Raise any size below and check 320px again. */
@media (max-width:399px){
  .head__in{gap:10px;}
  .brand{gap:8px;}
  .brand svg{width:31px;height:26px;}
  .brand__word{font-size:18px;}
  .head__cta{gap:8px;}
  .head__cta .btn--sm{padding:9px 14px;font-size:13.5px;}
}
@media (max-width:339px){
  .head__in{gap:8px;}
  .brand svg{width:28px;height:23px;}
  .brand__word{font-size:16.5px;}
  .head__cta .btn--sm{padding:8px 11px;font-size:12.5px;}
  .burger{padding:7px 8px;}
}

/* An address is one unbreakable word to the line breaker and the longest one
   on the estate (POPIAComplaints@inforegulator.org.za) is 297px wide, which is
   wider than a 320px screen's text column. Only these break mid-word. */
a[href^="mailto:"]{overflow-wrap:anywhere;}
/* ---------- footer ---------- */
.foot{background:#07111F;color:#AFBDD0;padding:clamp(42px,5vw,58px) 0 32px;}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:30px 22px;}
@media (max-width:960px){.foot__grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.foot h4{font-family:var(--f-body);font-stretch:75%;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#AFBDD0;margin-bottom:12px;}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.foot a{font-size:15px;color:#C9D4E2;text-decoration:none;}
.foot a:hover{color:#46D0C7;}
.foot__blurb{font-size:15px;color:#C9D4E2;max-width:32ch;margin-top:12px;}
.foot__base{margin-top:34px;padding-top:21px;border-top:1px solid #223651;display:flex;flex-wrap:wrap;
  gap:12px 24px;align-items:center;justify-content:space-between;font-size:13.5px;color:#AFBDD0;}
.foot__sig{font-family:var(--f-body);font-stretch:75%;font-size:11px;letter-spacing:.18em;text-transform:uppercase;}
.foot__sig b{font-weight:500;}
.foot__sig b:nth-child(1){color:#7FC0EF;}
.foot__sig b:nth-child(2){color:#71D19E;}
.foot__sig b:nth-child(3){color:#FFB66B;}
.nav a.is-on{color:#F5F8FC;background:#152640;}

/* ---------- the primary button, from the brand kit at xinnace.com --------
   The artifacts fill this with the bright teal #12B5AB and set near-black text
   on it. In the live brand kit that combination is .btn--accent; the PRIMARY
   button is the logo's own teal with white text:

       assets/css/site.css   --brand: #3493a7;  --brand-2: #2a818c;
                             .btn--primary { background: var(--brand);
                                             color: #fff; }
                             .btn--primary:hover { background: var(--brand-2) }

   so that is what this is. #3493a7 is the colour of the mark in logo.svg, and
   both values are pinned rather than tokenised, so no page's :root can repaint
   the button and it is identical on all eleven pages.

   White on #3493a7 measures 3.57:1 — AA for large text, under the 4.5:1 a
   15.5px label wants. It is the brand kit's own pairing and the live site
   ships it. Resting on --brand-2 instead would read 4.55:1 and pass. */
.btn--primary{background:#3493A7;color:#FFFFFF;}
.btn--primary:hover{background:#2A818C;transform:translateY(-2px);}
.btn--block{width:100%;}


/* ---------- in-page anchors ------------------------------------------------
   No artifact sets this, so every anchor jumped: "See how it works" on the home
   page, the module links on Features, and the whole contents list on each legal
   page all landed with no sense of having travelled.

   scroll-padding-top is the safety net, not the mechanism. Most targets already
   carry their own scroll-margin-top, but a sticky 72px bar covers whatever it
   lands on, and a target that grows one without would sit under the bar. One
   value here means that cannot happen anywhere.

   Off under reduced motion: a long smooth scroll is the exact motion people
   turn that setting on for. */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 14px);}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* ---------- skip link (the one thing no artifact needs and every site does) */
.skip{
  position:absolute;top:-100%;left:var(--gutter);z-index:90;
  padding:10px 16px;border-radius:8px;background:#12B5AB;color:#041816;
  font-family:var(--f-body);font-size:14.5px;font-weight:600;text-decoration:none;
}
.skip:focus,.skip:focus-visible{top:10px;}