/* ==========================================================================
   Certant Flat — the stylesheet.
   White field, Figtree, flat tint blocks, pill actions, zero shadows.
   Single file, no imports. Tokens on :root; base styles on html/body;
   `.flat-ink` is the only scope class (footers, inverse moments).

   Section 2 is the only place a hex / rgba literal may appear.
   ========================================================================== */


/* == 1. Font faces ======================================================= */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('fonts/figtree-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallback so the swap does not reflow: Figtree is 950/-250/0
   on 1000 UPM and its average advance equals Arial's (0.4677em measured). */
@font-face {
  font-family: 'Figtree Fallback';
  src: local('Arial');
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
  size-adjust: 100%;
}


/* == 2. Colour tokens ==================================================== */

:root {
  /* Base */
  --paper:        #FFFFFF;
  --cloud:        #E9EBE5;
  --cloud-deep:   #DDE1D8;
  --ink:          #1E2622;
  --ink-2:        #49534C;
  --ink-3:        #6C766F;

  /* The five Register hues, applied flat. Colour means something:
     the three pillars own three hues — Understand = green, Act = teal,
     Ask = blue — and everything that belongs to a pillar wears its hue.
     Teal is also Certant itself (primary action); green is also sovereign;
     blue is also data & numbers; bronze = highlight & pending;
     claret = destructive only. Tints are lively, not grey. */
  --teal:         #1F5A64;
  --teal-deep:    #17454E;
  --teal-bright:  #2F7A89; /* charts only, never text */
  --teal-tint:    #CBE6EA;
  --green:        #1F644C;
  --green-deep:   #18503C;
  --green-tint:   #CFEBDC;
  --blue:         #1F3764;
  --blue-deep:    #182A4E;
  --blue-tint:    #D3DDF5;
  --yellow:       #644C1F;
  --yellow-deep:  #4E3B17;
  --yellow-tint:  #F3E5C4;
  --pink:         #641F37;
  --pink-deep:    #501931;
  --pink-tint:    #F3D6E0;

  /* Text on a hue's tint block */
  --teal-text:    var(--teal-deep);
  --green-text:   var(--green-deep);
  --blue-text:    var(--blue-deep);
  --yellow-text:  var(--yellow-deep);
  --pink-text:    var(--pink-deep);

  /* Text on a saturated solid */
  --on-solid:        #FFFFFF;
  --on-solid-muted:  rgba(255, 255, 255, 0.86);
  --on-solid-tint:   rgba(255, 255, 255, 0.18);
  --on-yellow:       var(--on-solid);
  --tile-bg:         rgba(255, 255, 255, 0.70);

  /* Semantic roles */
  --bg-page:      var(--paper);
  --bg-tint:      var(--cloud);
  --bg-sunken:    var(--cloud-deep);
  --bg-inverse:   #161D19;
  --fg-1:         var(--ink);
  --fg-2:         var(--ink-2);
  --fg-3:         var(--ink-3);
  --fg-inverse:   #EDEFE9;
  --fg-accent:    var(--teal);
  --link-default: var(--teal);
  --link-hover:   var(--teal-deep);
  --selection-bg: var(--teal-tint);
  --focus-ring:   0 0 0 2px var(--bg-page), 0 0 0 4px var(--fg-accent);
  --scrim:        rgba(30, 38, 34, 0.45);

  /* Status */
  --ok:           var(--green);
  --ok-text:      var(--green-deep);
  --ok-tint:      var(--green-tint);
  --warn:         var(--yellow);
  --warn-text:    var(--yellow-deep);
  --warn-tint:    var(--yellow-tint);
  --danger:       var(--pink);
  --danger-text:  var(--pink-deep);
  --danger-tint:  var(--pink-tint);

  /* Hairlines — inputs and table rules only */
  --line:         rgba(30, 38, 34, 0.12);
  --line-strong:  rgba(30, 38, 34, 0.28);

  /* Agent Builder grouping colours — the product's own palette for its component
     categories, and the connectors' brand colours. Used only as icon-tile colour
     on the Agent Builder page, never as a band, ground or text. */
  --cat-flow:      #22A05B;
  --cat-knowledge: #0E9F8E;
  --cat-ai:        #6366F1;
  --cat-data:      #DB2777;
  --cat-database:  #2563EB;
  --cat-ml:        #EA7317;
  --brand-xero:       #13B5EA;
  --brand-imis:       #1B3D6D;
  --brand-sharepoint: #036C70;
  --brand-jira:       #0052CC;
  --brand-confluence: #1868DB;
  --brand-obsidian:   #7C3AED;
  --brand-notion:     #1E2622;
  --brand-wordpress:  #21759B;
  --brand-drupal:     #0678BE;

  /* Chart inks — flat, teal leads */
  --chart-1: #1F5A64;
  --chart-2: #1F3764;
  --chart-3: #1F644C;
  --chart-4: #644C1F;
  --chart-5: #641F37;
  --chart-1-pastel: #8FB3B9;
  --chart-2-pastel: #8F9CB9;
  --chart-3-pastel: #8FB9A8;
  --chart-4-pastel: #B9A88F;
  --chart-5-pastel: #B98F9E;
  --chart-alpha-strong: 60%;
  --chart-alpha-mid:    30%;
  --chart-alpha-faint:  12%;
}

/* Ink register — the scope paints itself. */
.flat-ink {
  --bg-page:      #161D19;
  --bg-tint:      #1E2622;
  --bg-sunken:    #101613;
  --fg-1:         #EDEFE9;
  --fg-2:         #B9C1B8;
  --fg-3:         #8A948B;
  --fg-accent:    #7FB5BE;
  --link-default: #7FB5BE;
  --link-hover:   #A3CDD4;
  --line:         rgba(237, 239, 233, 0.14);
  --line-strong:  rgba(237, 239, 233, 0.34);
  --teal-tint:    rgba(127, 181, 190, 0.14);
  --teal-text:    #7FB5BE;
  --selection-bg: rgba(127, 181, 190, 0.25);
  --yellow:       #C9A55E;
  --yellow-deep:  #B8944F;
  --on-yellow:    #1E2622;
  --tile-bg:      rgba(237, 239, 233, 0.10);
  --scrim:        rgba(0, 0, 0, 0.60);
  background: var(--bg-page);
  color: var(--fg-1);
}


/* == 3. Type tokens ====================================================== */

:root {
  --font-sans: 'Figtree', 'Figtree Fallback', Arial, sans-serif;

  --fs-display: clamp(44px, 5.2vw, 72px);
  --fs-h1:      40px;
  --fs-h2:      30px;
  --fs-h3:      22px;
  --fs-h4:      18px;
  --fs-lead:    19px;
  --fs-body:    16px;
  --fs-ui:      15px;   /* nav, buttons, inputs, panel body */
  --fs-sm:      14px;
  --fs-micro:   12.5px;

  --lh-display: 1.02;
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --track-display: -0.022em;
  --track-tight:   -0.012em;
  --track-normal:  0;
}


/* == 4. Space, radii, motion, layout ==================================== */

:root {
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  --r-mark:    4px;
  --r-control: 8px;
  --r-card:    12px;
  --r-panel:   16px;
  --r-pill:    999px;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur:  150ms;

  --measure:     62ch;
  --page-max:    1264px;  /* border-box with 32px side padding = 1200px of content */
  --page-pad:    32px;
  --section-gap: 88px;
  --nav-h:       72px;
}


/* == 5. Base ============================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg-page);
  color: var(--fg-1);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol, figure { margin: 0; padding: 0; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Spam honeypot: stays in the DOM, out of view, and out of the a11y tree's way.
   Not .visually-hidden — that is for text a screen reader must still read. */
.offscreen { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

::selection { background: var(--selection-bg); color: var(--fg-1); }

h1, h2, h3, h4 { margin: 0; color: var(--fg-1); text-wrap: balance; }
.display {
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}
h1, .h1 { font-size: var(--fs-h1); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: var(--track-tight); }
h2, .h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold);  line-height: var(--lh-tight); letter-spacing: var(--track-tight); }
h3, .h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold);  line-height: var(--lh-snug); }
h4, .h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }

p, .body { margin: 0; font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-2); }
.lead    { font-size: var(--fs-lead); line-height: 1.55; color: var(--fg-2); }
small, .caption { font-size: var(--fs-micro); line-height: var(--lh-normal); color: var(--fg-3); }
.meta    { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--fg-3); }
.meta .sep, .kicker .sep { margin-inline: var(--sp-2); } /* middot between meta items */
.kicker  { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--fg-accent); }
.figure  { font-weight: var(--fw-black); font-variant-numeric: tabular-nums; letter-spacing: var(--track-tight); }
mark     { background: var(--yellow-tint); color: var(--ink); border-radius: var(--r-mark); padding: 0 3px; } /* ink stays dark inside .flat-ink too */

a { color: var(--link-default); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--link-hover); }
.link { font-weight: var(--fw-semibold); display: inline-flex; align-items: center; gap: 6px; }
.link--on-solid { color: var(--on-solid); }
.link.btn--lg { height: 48px; padding: 0; background: none; font-size: var(--fs-body); }
.link--on-solid:hover { color: var(--on-solid); opacity: 0.85; }

/* Focus: the ring follows the element's own radius. */
:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
a:not([class]):focus-visible { border-radius: var(--r-mark); }
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
}

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


/* == 6. Layout =========================================================== */

.site {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.section { padding-top: var(--section-gap); }
.section--hero  { padding-top: 72px; }
.section--tight { padding-top: 56px; }
.section--ink   { margin-top: var(--sp-9); padding: 80px 0; }

.split {
  display: grid;
  grid-template-columns: var(--cols, 1fr 1fr);
  gap: var(--gap, var(--sp-4));
  align-items: center;
}
.split > * { min-width: 0; }
.split--lead  { --cols: 1.1fr 1fr; --gap: var(--sp-7); }
.split--trail { --cols: 1fr 1.1fr; --gap: 36px; }
.split--start { align-items: start; }
.split--3 { --cols: repeat(3, 1fr); }
.split--5 { --cols: repeat(5, minmax(0, 1fr)); --gap: var(--sp-3); } /* plan tiers; collapses to two-up at 1100 */
.split--cards { align-items: stretch; }
.split--cards > .tint { display: flex; flex-direction: column; }
.split--cards > .tint > .link { margin-top: auto; padding-top: var(--sp-4); }
/* Inside a stretched card the paper sub-card fills and the caption pins to the bottom,
   so paired demo panels share top and bottom edges. */
.split--cards > .tint > .tint--paper { flex: 1; }
.split--cards > .tint > .caption { margin-top: auto; padding-top: var(--sp-3); }

.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.stack--sm { gap: var(--sp-2); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.cluster--md { gap: var(--sp-3); }
.cluster--lg { gap: 30px; }
.push { margin-left: auto; }

/* Breadcrumb — a product page's "where am I", never an eyebrow over the headline */
.crumbs { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--fg-2); }
.crumbs a { color: var(--fg-2); }
.crumbs a:hover { color: var(--fg-1); }
.crumbs .icon { width: 14px; height: 14px; color: var(--fg-3); }
.crumbs [aria-current] { color: var(--fg-1); font-weight: var(--fw-semibold); }

.measure { max-width: var(--measure); }
.measure--narrow { max-width: 46ch; }
.measure--h { max-width: 22ch; }

.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }   /* the 48px step: a lead-in paragraph after a full band */


/* == 7. Components ======================================================= */

/* Icons (Lucide keeps the class on the generated <svg>) */
.icon { width: 16px; height: 16px; flex-shrink: 0; }
.icon--lg { width: 18px; height: 18px; }

/* Buttons — always pills */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 20px;
  border: 0; border-radius: var(--r-pill);
  font-size: var(--fs-ui); font-weight: var(--fw-semibold); line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn .icon { width: 16px; height: 16px; }
.btn--sm { height: 32px; padding: 0 16px; font-size: var(--fs-sm); }
.btn--lg { height: 48px; padding: 0 26px; font-size: var(--fs-body); }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

.btn--primary   { background: var(--teal); color: var(--on-solid); }
.btn--primary:hover { background: var(--teal-deep); color: var(--on-solid); }
.btn--secondary { background: var(--bg-tint); color: var(--fg-1); }
.btn--secondary:hover { background: var(--bg-sunken); color: var(--fg-1); }
.btn--ghost     { background: transparent; color: var(--link-default); }
.btn--ghost:hover { background: var(--teal-tint); color: var(--link-hover); }
.btn--danger    { background: var(--pink); color: var(--on-solid); }
.btn--danger:hover { background: var(--pink-deep); color: var(--on-solid); }
.btn--yellow    { background: var(--yellow); color: var(--on-yellow); }
.btn--yellow:hover { background: var(--yellow-deep); color: var(--on-yellow); }

/* Chips — status, citations, tags */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-micro); font-weight: var(--fw-semibold); line-height: 1.3;
  white-space: nowrap;
  /* Set --_bg/--_text rather than fall back to them: a hued .tint sets the same
     properties on the panel and they inherit, so a plain chip on a blue tint
     would otherwise paint itself the panel's colour and vanish. */
  --_bg: var(--bg-tint);
  --_text: var(--fg-2);
  background: var(--_bg);
  color: var(--_text);
}
.chip--paper  { --_bg: var(--paper); --_text: var(--fg-2); } /* before the hues so `chip--paper chip--green` keeps green text */
.chip--teal   { --_bg: var(--teal-tint);   --_text: var(--teal-text); }
.chip--green  { --_bg: var(--green-tint);  --_text: var(--green-text); }
.chip--blue   { --_bg: var(--blue-tint);   --_text: var(--blue-text); }
.chip--yellow { --_bg: var(--yellow-tint); --_text: var(--yellow-text); }
.chip--pink   { --_bg: var(--pink-tint);   --_text: var(--pink-text); }
/* A paper chip on a tint of its own hue: the hue keeps the text, paper wins the ground. */
.chip--paper.chip--teal, .chip--paper.chip--green, .chip--paper.chip--blue,
.chip--paper.chip--yellow, .chip--paper.chip--pink { --_bg: var(--paper); }
.chip--ink    { --_bg: var(--ink); --_text: var(--on-solid); }
.chip--on-solid { --_bg: var(--on-solid-tint); --_text: var(--on-solid); }
.chip .icon { width: 12px; height: 12px; }   /* status chips carry a contextual icon, never a dot */
.chip--sm { padding: 4px 12px; font-size: 12px; }
.chip--sm .icon { width: 11px; height: 11px; }
.chip--lg { padding: 10px 18px; font-size: var(--fs-sm); white-space: normal; line-height: 1.35; }
.flat-ink .chip--cloud { --_bg: var(--bg-sunken); }
/* A chip wrapping a visually-hidden radio/checkbox. On a tint panel the resting
   pill must not match the panel it sits on (same hazard as .tab). The focus ring
   is drawn on the label because the input is hidden. */
.chip--control { cursor: pointer; }
.tint .chip--control { --_bg: var(--paper); }
.tint .chip--control:not(:has(input:checked)):hover { --_bg: var(--bg-sunken); }
.chip--control:has(input:checked) { --_bg: var(--teal); --_text: var(--on-solid); }
.chip--control:has(input:focus-visible) { box-shadow: var(--focus-ring); }

/* Pill chain (workflow steps) */
.flow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.flow > .icon { color: var(--on-solid); }

/* Tint blocks — the signature element */
.tint {
  background: var(--_bg, var(--bg-tint));
  border-radius: var(--r-card);
  padding: var(--pad, var(--sp-5));
  transition: background var(--dur) var(--ease);
}
.tint--teal   { --_bg: var(--teal-tint);   --_hue: var(--teal);   --_text: var(--teal-text); }
.tint--green  { --_bg: var(--green-tint);  --_hue: var(--green);  --_text: var(--green-text); }
.tint--blue   { --_bg: var(--blue-tint);   --_hue: var(--blue);   --_text: var(--blue-text); }
.tint--yellow { --_bg: var(--yellow-tint); --_hue: var(--yellow); --_text: var(--yellow-text); }
.tint--pink   { --_bg: var(--pink-tint);   --_hue: var(--pink);   --_text: var(--pink-text); }
.tint--paper  { --_bg: var(--paper); }
/* Hue carrier without a hue ground: a neutral cloud or paper block whose tile,
   kicker and bold lead take the pillar hue. This is how a page stays inside
   the Hue Budget (three hued grounds) while every row still says which pillar
   it belongs to. Sets the same private hue tokens as .tint--<hue>, no ground. */
.hue--teal  { --_hue: var(--teal);  --_text: var(--teal-text); }
.hue--green { --_hue: var(--green); --_text: var(--green-text); }
.hue--blue  { --_hue: var(--blue);  --_text: var(--blue-text); }
.tint--panel  { border-radius: var(--r-panel); --pad: var(--sp-6); }
.pad-md { --pad: 36px; }
.pad-lg { --pad: 48px; }
a.tint, .tint--link { display: block; color: inherit; }
a.tint:hover, .tint--link:hover {
  color: inherit;
  background: color-mix(in srgb, var(--_bg, var(--bg-tint)), var(--_hue, var(--ink)) 8%);
}
.tint .caption, .tint .meta { color: var(--fg-2); } /* never --fg-3 on a tint: contrast */

/* Solid blocks — one saturated hue per moment */
.solid {
  --_text: var(--on-solid);
  background: var(--_bg, var(--teal));
  color: var(--on-solid);
  border-radius: var(--r-panel);
  padding: var(--pad, var(--sp-6));
  transition: background var(--dur) var(--ease);
}
.solid--teal  { --_bg: var(--teal);  --_deep: var(--teal-deep); }
.solid--green { --_bg: var(--green); --_deep: var(--green-deep); }
.solid--blue  { --_bg: var(--blue);  --_deep: var(--blue-deep); }
.solid--pink  { --_bg: var(--pink);  --_deep: var(--pink-deep); }
.solid--yellow { --_bg: var(--yellow); --_deep: var(--yellow-deep); color: var(--on-yellow); --_text: var(--on-yellow); }
.solid :is(h1, h2, h3, h4) { color: inherit; }
.solid p, .solid .caption, .solid .meta { color: var(--on-solid-muted); }
.solid .kicker { color: var(--on-solid-muted); }
.solid a { color: inherit; }
/* A secondary pill inside a solid panel keeps its own ink text: inheriting the
   panel's white gave white on cloud. */
.solid .btn--secondary { color: var(--fg-1); }
.solid .btn--secondary:hover { color: var(--fg-1); }
/* A paper/tint card nested in a solid returns to page colours;
   `--_text: initial` stops the solid's white text token inheriting into chips. */
.solid .tint { color: var(--fg-1); --_text: initial; }
.solid .tint :is(h1, h2, h3, h4), .solid .tint .answer__text { color: var(--fg-1); }
.solid .tint p, .solid .tint .caption, .solid .tint .meta, .solid .tint .answer__quote { color: var(--fg-2); }
.solid .tint .kicker { color: var(--fg-accent); }
.solid .tint a { color: var(--link-default); }
a.solid:hover, .solid--link:hover { background: var(--_deep); color: var(--on-solid); }
.solid:focus-visible, .solid :focus-visible { box-shadow: 0 0 0 2px var(--_bg), 0 0 0 4px var(--on-solid); }
.solid .tint :focus-visible { box-shadow: var(--focus-ring); }
.link:focus-visible { border-radius: var(--r-mark); }

/* 40px round icon tile */
.tile {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--tile-bg);
  color: var(--_text, var(--fg-accent));
}
.tile .icon, .tile svg { width: 18px; height: 18px; }

/* Hue row — list row anchored by a tile */
.hue-row { display: flex; align-items: center; gap: 18px; padding: 18px 22px; }
.hue-row__body { flex: 1; color: var(--fg-1); line-height: var(--lh-normal); }
.hue-row__body b { color: var(--_text, var(--fg-accent)); font-weight: var(--fw-bold); }
.hue-row__hint { font-size: var(--fs-sm); color: var(--fg-2); }
.hue-rows { max-width: 820px; }

/* Callout — the numbered marker that ties a point on a drawing or screenshot
   to the row that explains it. The pairing must read without a hover: the same
   glyph, at the same size, in the same hue, sits on the image and leads the
   row, and the numbers run in the order the rows are read. Colour and linked
   hover only reinforce what the number already says. A solid disc of the
   page's pillar hue with a white numeral and a 2px paper rim survives a dark
   product shot and a hued tint alike; 24px is the pointer-target floor. Inside
   a hued .tint the disc inherits the tint's hue; elsewhere name it with
   --teal/--green/--blue. The lit end of a linked pair turns bronze (the
   highlight hue), never a size change. SVG twin: <circle r="11" fill=hue
   stroke=var(--paper) stroke-width="2"/> + <text font-size="11"
   font-weight="700" fill=var(--on-solid) text-anchor="middle" dy=".38em">. */
.callout {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--paper);
  background: var(--_hue, var(--teal)); color: var(--on-solid);
  font-family: var(--font-sans); font-size: 11px; font-weight: var(--fw-bold); line-height: 1;
  letter-spacing: 0; font-variant-numeric: tabular-nums;
  transition: background var(--dur) var(--ease);
}
.callout--teal  { --_hue: var(--teal); }
.callout--green { --_hue: var(--green); }
.callout--blue  { --_hue: var(--blue); }
.callout.is-hot, .is-hot .callout { background: var(--yellow); }
/* On an image the callout is a positioned button; the page sets its coordinates. */
button.callout { padding: 0; cursor: pointer; position: absolute; transform: translate(-50%, -50%); }
.table .table__callout { width: 1%; padding-right: 0; white-space: nowrap; vertical-align: top; }

/* Tick list — icon-led feature list under a plan or tier card */
.ticks { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.ticks li { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--fg-2); }
.ticks .icon { color: var(--_hue, var(--fg-accent)); flex-shrink: 0; margin-top: 2px; }

/* Stat — one number, one label */
.stat { color: var(--_text, var(--fg-1)); }
.stat__value {
  font-size: 32px; font-weight: var(--fw-black); line-height: 1.05;
  letter-spacing: -0.015em; font-variant-numeric: tabular-nums;
  color: var(--_text, var(--fg-1));
}
.stat__value--xl { font-size: 48px; }
.stat__label { font-size: var(--fs-sm); color: var(--fg-2); margin-top: var(--sp-1); }
.stat--teal   { --_text: var(--teal-text); }
.stat--blue   { --_text: var(--blue-text); }
.stat--green  { --_text: var(--green-text); }
.stat--yellow { --_text: var(--yellow-text); }
.stat--row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

/* Answer demo (hero + final CTA) */
.demo__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.demo__note { font-size: var(--fs-micro); margin-top: var(--sp-3); padding-left: var(--sp-1); color: var(--on-solid); }
.answer { --pad: 18px 20px; }
.answer__label { font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--teal-text); margin-bottom: var(--sp-2); }
.answer__text { font-size: var(--fs-ui); line-height: var(--lh-relaxed); color: var(--fg-1); }
.answer__cites { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: 14px; }
.answer__quote { font-size: var(--fs-sm); line-height: 1.55; color: var(--fg-2); }

/* Logo strip */
.logo-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; }
.logo-strip__label { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--fg-3); }
.logo-strip img { height: 24px; width: auto; filter: grayscale(1); opacity: 0.55; transition: opacity var(--dur) var(--ease); }
.logo-strip img:hover { opacity: 1; filter: grayscale(0); } /* the mark returns to its own colour */
.logo-strip .logo--sm { height: 20px; }
.logo-strip .logo--lg { height: 26px; }

/* Tabs — pill tablist */
.tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tab {
  height: 38px; padding: 0 18px;
  border: 0; border-radius: var(--r-pill);
  background: var(--bg-tint); color: var(--fg-2);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tab:hover { background: var(--bg-sunken); }
/* On a tint panel the resting tab must not match the panel it sits on. */
.tint .tab:not([aria-selected="true"]) { background: var(--paper); }
.tint .tab:not([aria-selected="true"]):hover { background: var(--bg-sunken); }
.tab[aria-selected="true"], .tab[aria-checked="true"] { background: var(--ink); color: var(--on-solid); font-weight: var(--fw-semibold); } /* tablist or pill radiogroup */
.tab-panel { margin-top: 20px; }

/* Table — hairline rules only */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th {
  text-align: left; padding: 8px 12px;
  font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--fg-3);
  border-bottom: 1px solid var(--line);
}
.table td { padding: 12px; border-bottom: 1px solid var(--line); color: var(--fg-2); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table__key { font-weight: var(--fw-semibold); color: var(--fg-1); }
.table__key--w { width: 280px; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table--flush th:first-child, .table--flush td:first-child { padding-left: 0; }
.table--flush th:last-child,  .table--flush td:last-child  { padding-right: 0; text-align: right; }
/* A two-column key/description table has no trailing link, so its last cell is prose. */
.table--keys th:last-child, .table--keys td:last-child { text-align: left; }
/* Spec list — a keys table used for things and their properties: an icon-led
   label in the key column, one sentence in the value column, then fact chips
   (nouns and numbers, never adjectives) the reader can scan without the
   sentence. The label column is the scan axis; the chips are the evidence.
   Replaces a hue-row list whenever the rows have properties. */
.table__key--icon .icon { display: inline-block; vertical-align: -4px; margin-right: var(--sp-2); color: var(--_hue, var(--fg-accent)); }
/* Numbered spec list: a callout disc leads the label instead of an icon. */
.table__key .callout { margin-right: var(--sp-2); vertical-align: -6px; }
/* Flow on a light ground: a chip chain (in → does → out) whose arrows are
   quiet ink rather than the on-solid white the default .flow uses. The chip
   for "does" takes the pillar hue; in and out stay neutral. */
.flow--ink > .icon { color: var(--fg-3); }
/* On a phone the chain stacks and the arrows point down, so no arrow ever opens a line. */
@media (max-width: 600px) {
  .flow--ink { flex-direction: column; align-items: flex-start; gap: 6px; }
  .flow--ink > .icon { transform: rotate(90deg); margin-left: 12px; }
}
.table--dense td, .table--dense th { padding-block: 8px; }
.table--hover tbody tr td { transition: background var(--dur) var(--ease); }
.table--hover tbody tr:hover td { background: var(--bg-tint); }
.table--roomy td { padding-block: 14px; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* A table of full sentences has no narrow layout: floor it so .scroll-x scrolls. */
.table--wide { min-width: 680px; }

/* Inputs — the one rectangular control */
.label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--fg-1); margin-bottom: var(--sp-1); } /* field label */
.input {
  display: block; width: 100%; height: 44px; padding: 0 14px;
  font-size: var(--fs-ui); color: var(--fg-1);
  background: var(--bg-page);
  border: 1.5px solid var(--line); border-radius: var(--r-control);
  transition: border-color var(--dur) var(--ease);
}
.input::placeholder { color: var(--fg-3); }
.input:focus { border-color: var(--teal); outline: 0; }
.input[aria-invalid="true"] { border-color: var(--pink); }
.input:disabled { background: var(--bg-tint); opacity: 0.6; }
.input--pill { border-radius: var(--r-pill); padding-inline: 18px; }
.input--lg { height: 48px; }
.input--area { height: auto; min-height: 120px; padding: 12px 14px; line-height: var(--lh-relaxed); resize: vertical; } /* a textarea has to grow */
.capture { display: flex; gap: 10px; max-width: 460px; }
.capture .input { flex: 1 1 auto; } /* basis auto so the field keeps its height once .capture stacks */
/* Inline form feedback. Semantic status tokens, never a raw hue. */
.status { border-radius: var(--r-control); padding: 12px 14px; font-size: var(--fs-sm); background: var(--bg-tint); color: var(--fg-2); }
.status--success { background: var(--ok-tint); color: var(--ok-text); }
.status--error   { background: var(--danger-tint); color: var(--danger-text); }
.status--bare    { padding: 0; background: none; } /* text-only feedback under a field */


/* == 7b. Diagrams (flat/viz.js web components) =========================== */

.viz-svg { width: 100%; height: auto; display: block; }
.viz-svg--fill { height: 100%; }
.viz-svg--rounded { border-radius: var(--r-panel); overflow: hidden; }
/* A drawn SVG whose labels fall under the 9.5 px floor when the frame narrows:
   pin its drawn width and let the frame scroll it (per-diagram width via --viz-pin). */
.viz-frame--wide { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--fg-3) transparent; }
.viz-svg--pin { min-width: var(--viz-pin, 440px); }
/* A caption under a scrolling frame that says so. scripts/nav.js measures every .viz-frame--wide
   and sets is-clipped when the drawing is wider than the frame; the hint shows only then. */
.viz-frame__scroll-hint { display: none; }
.viz-frame--wide.is-clipped .viz-frame__scroll-hint { display: block; margin-top: var(--sp-2); }
.viz-frame { --pad: var(--sp-4); }
.viz-frame--hero { --pad: var(--sp-5); }
.pillar-viz {
  height: 260px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; --pad: var(--sp-3);
}
.pillar-viz cert-three-pillars { display: block; width: 100%; height: 100%; }

/* Mini chat used by the Ask pillar */
.viz-chat { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-2); width: 100%; height: 100%; padding: var(--sp-2); }
.viz-chat__tag { align-self: flex-start; margin-bottom: var(--sp-1); }
.viz-bubble { max-width: 88%; padding: 8px 12px; border-radius: var(--r-card); font-size: var(--fs-sm); line-height: 1.45; }
.viz-bubble--user { align-self: flex-end; background: var(--blue); color: var(--on-solid); border-radius: var(--r-pill); }
.viz-bubble--answer { align-self: flex-start; background: var(--bg-tint); color: var(--fg-1); opacity: 0; }
.viz-bubble--static { opacity: 1; } /* a figure with no viz.js instance behind it shows the resting state */
.viz-cite { display: inline-flex; margin-top: var(--sp-2); }

/* Custom elements are block-level; the page ports in flat/pages/*.js are on this list too */
cert-deployment-toggle, cert-agent-canvas, cert-workflow-showcase, cert-component-explorer,
cert-knowledge-graph-inspector { display: block; }
/* Deployment toggle */
.dt-toggle { margin-bottom: var(--sp-4); }
.dt-stage { position: relative; flex: 1; min-height: 220px; }
/* In a stretched card the toggle fills the panel and the drawing centres in it. */
.split--cards > .viz-frame { justify-content: stretch; }
.viz-frame > cert-deployment-toggle { flex: 1; display: flex; flex-direction: column; }
.dt-pane { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.dt-pane.is-on { opacity: 1; pointer-events: auto; }

/* Citation tooltip */
.ct { position: relative; display: inline-block; }
.ct-pop { position: absolute; top: 100%; left: 0; z-index: 60; width: 340px; margin-top: var(--sp-2); --pad: var(--sp-4); }
/* Near the right edge of a narrow panel the 340 px pop would push the page wider
   than a phone; below 700 px anchor it to the nearest .ct-scope and fill that width. */
.ct-scope { position: relative; }
/* Inside a scope the pop is pinned to the panel at every width, so a citation near
   the right edge never pushes the page wider than the viewport. */
.ct-scope .ct { position: static; }
.ct-scope .ct-pop { left: var(--sp-5); right: var(--sp-5); width: auto; max-width: 340px; }
@media (max-width: 700px) {
  .ct { position: static; }
  .ct-pop { left: 0; right: 0; width: auto; }
}


/* Simple flow — five steps in a row, the summary version of a diagram */
.flow-frame { cursor: pointer; }
.flow-steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-7); counter-reset: step; }
.flow-step { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); background: var(--paper); border-radius: var(--r-card); }
.flow-step .tile { background: var(--teal-tint); color: var(--teal-deep); }
.flow-step b { font-size: var(--fs-ui); font-weight: var(--fw-bold); color: var(--fg-1); line-height: 1.3; }
.flow-step span:last-child { font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.45; }
/* Arrow between steps: a Lucide arrow-right drawn through a mask so the colour is a token */
.flow-step + .flow-step::before {
  content: ""; position: absolute; left: calc(-1 * var(--sp-7)); top: 24px; width: var(--sp-7); height: 32px;
  background: var(--teal);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>") center / 28px 28px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>") center / 28px 28px no-repeat;
}
.flow-frame__foot { align-items: center; }
.flow-frame .btn--secondary { background: var(--paper); }
.flow-frame .btn--secondary:hover { background: var(--bg-sunken); }

/* Lightbox — native dialog, flat panel on a scrim, no shadow */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1264px, 96vw); width: 100%; margin: auto; }
.lightbox::backdrop { background: var(--scrim); }
.lightbox__panel { --pad: var(--sp-5); max-height: 92vh; overflow: auto; }
.lightbox__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.lightbox .viz-frame { --pad: var(--sp-3); background: var(--paper); border-radius: var(--r-card); }
.lightbox cert-strata-loop { display: block; min-width: 1000px; }

/* Disclosure — native <details> for FAQs and progressive reveals. No page-local copies. */
.disclosure { --pad: 18px 22px; }
.disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); font-weight: var(--fw-semibold); color: var(--fg-1); cursor: pointer; list-style: none; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary .icon { flex: 0 0 auto; color: var(--fg-accent); transition: transform var(--dur) var(--ease); }
.disclosure[open] > summary .icon { transform: rotate(180deg); }
.disclosure > summary:focus-visible { border-radius: var(--r-mark); }
.disclosure > :not(summary) { margin-top: var(--sp-3); }
.disclosure[open] > :not(summary) { animation: disclosure-in var(--dur) var(--ease) both; } /* details cannot animate height; fade the answer in */
@keyframes disclosure-in { from { opacity: 0; } }
.disclosure:hover { background: color-mix(in srgb, var(--_bg, var(--bg-tint)), var(--ink) 4%); }
@media (prefers-reduced-motion: reduce) { .disclosure[open] > :not(summary) { animation: none; } }


/* == 7c. Prose (articles, legal, running documents) ====================== */

/* Base zeroes p/ul/ol margins for the .mt-* marketing rhythm. A running document
   cannot carry a utility class on every paragraph, and the list reset clips its
   own markers. Sizes and colours still come from the element rules. */
.prose { overflow-wrap: break-word; }
.prose :is(h2, h3, h4) { scroll-margin-top: calc(var(--nav-h) + var(--sp-5)); }
.prose h2 { margin: var(--sp-7) 0 var(--sp-3); }
.prose h3 { margin: var(--sp-6) 0 var(--sp-2); }
.prose h4 { margin: var(--sp-5) 0 var(--sp-2); }
.prose > :is(h2, h3, h4):first-child { margin-top: 0; }
.prose p + p { margin-top: var(--sp-4); }
.prose ul, .prose ol { margin-top: var(--sp-3); padding-left: var(--sp-5); }
.prose li { margin-bottom: var(--sp-2); color: var(--fg-2); }
.prose li::marker { color: var(--fg-3); }
.prose strong { color: var(--fg-1); font-weight: var(--fw-bold); }
.prose a { color: var(--link-default); text-decoration: underline; text-underline-offset: 3px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-7) 0; }


/* == 8. Navigation (class contract shared with scripts/nav.js) =========== */

.nav-wrap { position: sticky; top: 0; z-index: 50; background: var(--bg-page); }
.nav-inner {
  max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-pad);
  height: var(--nav-h);
  display: flex; align-items: center; gap: 36px;
}
.nav-logo { height: 28px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links > * { display: inline-flex; align-items: center; }
.nav-links a {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 0; line-height: 1;
  font-size: var(--fs-ui); font-weight: var(--fw-medium); color: var(--fg-2);
  border-radius: var(--r-mark);
}
.nav-links a:hover, .nav-links a.active, .nav-links a[aria-current="page"] { color: var(--fg-1); }
.nav-links .chev { width: 12px; height: 12px; opacity: 0.55; }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.nav-signin { font-size: var(--fs-ui); font-weight: var(--fw-medium); color: var(--fg-1); }

/* Mega menu — a flat tint panel, no shadow */
.has-mega { position: relative; }
.mega {
  /* Left-aligned to the trigger, not centred: the trigger sits close to the
     logo, and a centred 740px panel ran off the left edge of the viewport
     at ordinary desktop widths, making the first column unreachable. */
  position: absolute; top: 100%; left: 0; z-index: 10;
  width: 740px; padding: var(--sp-4);
  background: var(--bg-tint); border-radius: var(--r-panel);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2);
  opacity: 0; pointer-events: none; transform: translateY(6px);
  transition: opacity var(--dur) var(--ease);
}
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.has-mega:hover .mega, .has-mega:focus-within .mega, .has-mega.is-open .mega { opacity: 1; pointer-events: auto; }
.mega-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px; border-radius: var(--r-card);
  color: inherit;
  transition: background var(--dur) var(--ease);
}
.mega-card:hover { background: var(--bg-sunken); color: inherit; }
.mega-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 2px; }
.mega-card .t { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--fg-1); line-height: 1.35; }
.mega-card .s { font-size: var(--fs-micro); color: var(--fg-2); line-height: 1.45; }

/* Mobile drawer (markup injected by scripts/nav.js) */
.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -8px; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--fg-1);
  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
}
.nav-toggle:hover { background: var(--bg-tint); }
.nav-toggle svg { width: 26px; height: 26px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.nav-mobile {
  position: fixed; left: 0; right: 0; top: var(--nav-h); bottom: 0; z-index: 40;
  display: flex; flex-direction: column;
  padding: 8px var(--page-pad) max(32px, env(safe-area-inset-bottom, 0px));
  background: var(--bg-page);
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.nav-mobile.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease), visibility 0s; }
.nm-link, .nm-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; padding: 16px 6px;
  font-size: 17px; font-weight: var(--fw-semibold); color: var(--fg-1);
  border: 0; border-bottom: 1px solid var(--line); background: transparent;
}
.nm-group { display: flex; flex-direction: column; }
.nm-trigger .chev { width: 18px; height: 18px; color: var(--fg-3); flex-shrink: 0; transition: transform var(--dur) var(--ease); }
.nm-group.is-open .nm-trigger .chev { transform: rotate(180deg); }
.nm-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms var(--ease); }
.nm-group.is-open .nm-sub { grid-template-rows: 1fr; }
.nm-sub-inner { overflow: hidden; }
.nm-sub a { display: block; padding: 12px 10px; border-radius: var(--r-card); color: var(--fg-2); }
.nm-sub a:active { background: var(--bg-tint); }
.nm-sub .t { display: block; font-size: var(--fs-ui); font-weight: var(--fw-semibold); color: var(--fg-1); }
.nm-sub .s { display: block; font-size: var(--fs-sm); color: var(--fg-3); margin-top: 2px; }
.nm-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.nm-cta .btn { width: 100%; }
.nm-cta .nav-signin { text-align: center; padding: 13px; font-size: var(--fs-ui); font-weight: var(--fw-semibold); background: var(--bg-tint); border-radius: var(--r-pill); }
body.nav-open { overflow: hidden; }


/* == 9. Footer =========================================================== */

.footer { border-top: 1px solid var(--line); }
.footer__cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--sp-6); padding: 56px 0 40px; }
.footer__brand img { height: 24px; width: auto; }
.footer__brand p { font-size: var(--fs-sm); color: var(--fg-3); margin-top: 14px; max-width: 30ch; }
.footer__heading { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--fg-3); }
.footer__cols ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.footer__cols li a { font-size: var(--fs-sm); color: var(--fg-2); }
.footer__cols li a:hover { color: var(--fg-1); }
.footer__base {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  padding: 18px 0 28px; border-top: 1px solid var(--line);
  font-size: var(--fs-micro); color: var(--fg-3);
}
.footer__base > :last-child { margin-left: auto; }


/* == 10. Responsive ====================================================== */

@media (max-width: 1100px) {
  .split--5 { --cols: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  :root { --nav-h: 64px; }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
}

@media (max-width: 800px) {
  :root { --section-gap: 64px; }
  .split { grid-template-columns: 1fr; gap: var(--sp-5); }
  .stats { grid-template-columns: 1fr 1fr; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .flow-steps { grid-template-columns: 1fr; }
  .flow-steps { gap: var(--sp-6); }
  .flow-step + .flow-step::before {
    left: 24px; top: calc(-1 * var(--sp-6)); width: 32px; height: var(--sp-6);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14'/><path d='m19 12-7 7-7-7'/></svg>") center / 24px 24px no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14'/><path d='m19 12-7 7-7-7'/></svg>") center / 24px 24px no-repeat;
  }
  .pillar-viz { height: 200px; }
  /* keep the drawn diagrams legible; their .viz-frame--wide frame scrolls */
  cert-strata-loop, cert-knowledge-graph-inspector { display: block; min-width: 1000px; }
  /* cert-agent-canvas and cert-workflow-showcase pin their own drawings with --viz-pin inside their own scrolling frames */
  cert-three-layers { display: block; min-width: 1160px; } /* drawn width, so its 9.5-unit labels hold 9.5 px */
  cert-brain-assembly { display: block; min-width: 560px; } /* hero labels stay above the 9.5 px floor */
  .logo-strip { gap: 20px; }
  .section--ink { margin-top: var(--sp-8); padding: 64px 0; }
  .display { font-size: clamp(36px, 9vw, 56px); }
}

@media (max-width: 600px) {
  :root { --page-pad: 20px; }
  .hue-row { flex-wrap: wrap; }
  .hue-row__hint { flex-basis: 100%; padding-left: 58px; }
  .capture { flex-direction: column; }
  .capture .btn { width: 100%; }
  .footer__cols { grid-template-columns: 1fr; }
  .footer__base > :last-child { margin-left: 0; }
  .pad-md, .pad-lg { --pad: var(--sp-5); }
  .stats { grid-template-columns: 1fr; }
  .stat--row { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  /* Key/description/link tables stack into one block per row */
  .table--flush tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .table--flush tbody tr:last-child { border-bottom: 0; }
  .table--flush td { display: block; padding: 2px 0; border-bottom: 0; text-align: left; }
  .table--flush .table__key--w { width: auto; }
  .table--flush td:last-child { padding-top: 6px; }
}