/* ═══════════════════════════════════════════════════════════════════════════
   AI FACTORY WEB SHELL — factory-shell.css
   AI Factory Design System 1.0.0 · 2026-10-27
   Contract: web/factory-web-shell.spec.md · Checker: scripts/check-design-system.js

   The page chassis for AI Factory: bands, fluid column, one flat deck, the
   locked/flowing page, legibility floors. The mechanics come from the
   Getamazednow AI Assure Web Shell 6.0.1; the brand is AI Factory's —
   Circuit Lime is the one accent, the AI Factory mark leads the header, and
   the Getamazednow AI lattice appears only in the footer.

   Pages consume this file; they do not override it. A change to the shell is
   a design-system change: edit here, bump the version, re-run the checker.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · TOKENS (design-tokens.json — do not edit per page) ───────────────── */
:root{
  /* Brand */
  --gai-ink:#2A363B; --gai-ink-2:#1F282C; --gai-ink-3:#212B2F;
  /* AI Factory accent — Circuit Lime. base: on Ink (7.09:1) · deep: on white (5.18:1) · core: decorative */
  --aif-lime-base:#B3CF55; --aif-lime-deep:#5C7614; --aif-lime-core:#DCEAA8;
  --gai-stone:#A8A17B; --gai-white:#FFFFFF;

  /* Neutrals */
  --gai-neutral-50:#F6F7F7;  --gai-neutral-100:#EBEDEE; --gai-neutral-200:#D5DADB;
  --gai-neutral-300:#B7BEC2; --gai-neutral-400:#909CA1; --gai-neutral-500:#6B797E;
  --gai-neutral-600:#545E63; --gai-neutral-700:#3F474A; --gai-neutral-800:#2C3234;
  --gai-neutral-900:#1C1F21;

  /* Type */
  --gai-font-display:'Poppins','Montserrat','Segoe UI',sans-serif;
  --gai-font-body:'Inter','Segoe UI',Roboto,sans-serif;
  --gai-font-mono:'JetBrains Mono','Courier New',monospace;

  /* Shell geometry — RULE ZERO lives here */
  --gz-col:min(92vw,1680px);             /* the one content column, all bands — fluid (6.0.0); the cap only guards ultrawide */
  --gz-gutter:clamp(20px,4vw,44px);      /* identical left margin header→footer */
  --gz-radius:14px;
  --gz-rail:40px;                        /* reserved dot rail inside the stage */
  /* Vertical rhythm scales with SCREEN HEIGHT (6.0.0), so the panel grows and shrinks with the device */
  --gz-pad-y:clamp(10px,2.4vh,30px);     /* stage vertical padding */
  --gz-chrome-y:clamp(8px,1.5vh,16px);   /* header + footer vertical padding */
  --gz-mark-h:clamp(44px,7.2vh,58px);    /* header company mark — never below --gz-mark-min */
  --gz-band-rule:2px;

  /* ---- LEGIBILITY FLOORS (new at shell 2.0.0) ------------------------------
     A brand that cannot be read cannot be recalled. Every brand-carrying
     element — product name, endorsement, tagline, glyph, marks —
     has a size BELOW WHICH IT MUST NOT FALL, at any viewport, in any context.
     Applied as max(floor, relative) so the relative size still scales up but
     can never scale down past the floor. Shell 1.x had nine declarations under
     12px, including the company byline at 9.6px. */
  --gz-type-min:12px;                    /* nothing brand-carrying below this */
  --gz-type-brand:17px;                  /* the company/product name lockup */
  --gz-type-meta:11px;                   /* chips and metadata — not brand */
  --gz-icon-min:18px;                    /* product icon floor */
  --gz-mark-min:28px;                    /* company mark floor, any band */
}

/* ── 2 · PRODUCT ACCENT ─────────────────────────────────────────────────────
   One accent, Circuit Lime. The two hue variables keep the shell's naming so
   the name, italics and icon rules below read the same way they always have. */
body{ --gz-hue-on-ink:var(--aif-lime-base); --gz-hue-on-white:var(--aif-lime-deep); }

/* the accent on the product name, italics and the glyph.
   .gz-picon inherits via currentColor, so a conformant icon SVG uses
   stroke="currentColor" (or fill="currentColor") and NEVER a literal hex. */
.gz-lockup__name em{ color:var(--gz-hue-on-ink); font-style:italic; font-weight:700; }
em.gz-product{ color:var(--gz-hue-on-white); font-style:italic; font-weight:600; }
.gz-card--ink em.gz-product{ color:var(--gz-hue-on-ink); }
.gz-picon{
  color:var(--gz-hue-on-white);
  /* Geometry belongs to the shell too. A hue carrier with no size forces every
     page to size it locally, which P8 forbids — so the shell owns both. Sized
     in em so the icon tracks the text it travels with. */
  width:max(var(--gz-icon-min),1.15em); height:max(var(--gz-icon-min),1.15em);
  flex:0 0 auto; vertical-align:-.15em;
}
.gz-topbar .gz-picon, .gz-card--ink .gz-picon{ color:var(--gz-hue-on-ink); }

/* ── 3 · PAGE FRAME — single view, page never scrolls (spec D6) ───────────── */
*{ box-sizing:border-box; margin:0; }
html{ height:100%; }
body{
  min-height:100dvh; display:flex; flex-direction:column;
  font-family:var(--gai-font-body); font-size:15px; line-height:1.55;
  color:var(--gai-ink); background:var(--gai-neutral-50);
  -webkit-font-smoothing:antialiased;
}
/* LOCKED SHELL — a desktop-class screen (>=1100px wide AND >=640px tall).
   The page never scrolls. Header, tabs and footer are pinned; the stage fills what is
   left and a card that exceeds it scrolls INSIDE ITSELF (or is held to fit, see
   data-gz-scroll below). Everywhere else the page FLOWS (section 9). */
@media(min-width:1100px) and (min-height:640px){
  html,body{ overflow:hidden; }
  body{ height:100dvh; }
}
a{ color:inherit; }

/* RULE ZERO — every band's content sits on this one column. Nothing escapes. */
.gz-col{
  width:100%; max-width:var(--gz-col); margin-inline:auto;
  padding-inline:var(--gz-gutter);
}

/* ── 4 · BAND 1 · HEADER ──────────────────────────────────────────────────── */
.gz-topbar{
  flex:0 0 auto; background:var(--gai-ink);
  border-bottom:var(--gz-band-rule) solid var(--aif-lime-base);  
}
.gz-topbar__inner{ display:flex; align-items:center; gap:16px; padding-block:max(6px,calc(var(--gz-chrome-y) * .7)); }
.gz-mark{ width:auto; height:var(--gz-mark-h); min-height:var(--gz-mark-min); flex:0 0 auto; display:block; }
.gz-lockup{ display:flex; flex-direction:column; line-height:1.18; min-width:0; }
.gz-lockup__name{
  font-family:var(--gai-font-display); font-weight:800; letter-spacing:-.3px; line-height:1.05;
  font-size:max(var(--gz-type-brand),1.5rem); color:var(--gai-white);
}
.gz-lockup__tagline{ color:var(--gai-neutral-300); font-size:max(var(--gz-type-min),.9rem); margin-top:5px; }
/* the endorsement line, sentence case, exactly as design-tokens.json -> product.endorsementLine */
.gz-lockup__byline{ color:var(--gai-stone); font-size:max(var(--gz-type-min),.8rem); margin-top:3px; }
/* PROHIBITED: any pill/chip/badge in the header band. Kept as a loud tripwire
   so a stray paste is visible in the browser. */
.gz-topbar .pill,.gz-topbar .chip,.gz-topbar .badge,.gz-topbar [class*="pill"]{
  outline:3px dashed #A02E2E !important; content:"REMOVE — header pills are prohibited";
}

/* ── 5 · BAND 2 · SECTION TABS ────────────────────────────────────────────── */
.gz-tabs{ flex:0 0 auto; background:var(--gai-white); border-bottom:1px solid var(--gai-neutral-200); }
.gz-tabs__inner{ display:flex; align-items:stretch; gap:2px; overflow-x:auto; scrollbar-width:none; }
.gz-tabs__inner::-webkit-scrollbar{ display:none; }
.gz-tab{
  font-family:var(--gai-font-display); font-weight:600; font-size:max(var(--gz-type-min),13.5px);
  color:var(--gai-neutral-500); background:none; border:0; cursor:pointer;
  padding:12px 12px; white-space:nowrap; border-bottom:3px solid transparent;
}
.gz-tab:hover{ color:var(--gai-ink); }
.gz-tab[aria-selected="true"]{ color:var(--gai-ink); border-bottom-color:var(--aif-lime-base); }
.gz-tabs__spacer{ flex:1 1 auto; }
/* the one link permitted in the tab band: back to Getamazednow AI */
.gz-tabs__suite{
  align-self:center; font-family:var(--gai-font-display); font-weight:600;
  font-size:max(var(--gz-type-min),13.5px); color:var(--aif-lime-deep); text-decoration:none; white-space:nowrap;
  padding-left:16px;
}
.gz-tabs__suite:hover{ text-decoration:underline; }
/* on every page but the homepage: "← AI Factory | Getamazednow AI →" — a thin rule divides the pair */
.gz-tabs__home{ padding-right:16px; border-right:1px solid var(--gai-neutral-300); }

/* ── 6 · BAND 3 · STAGE + CAROUSEL ────────────────────────────────────────── */
.gz-stage{ flex:1 1 auto; min-height:0; display:flex; padding-block:var(--gz-pad-y); }
.gz-stage__col{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }

/* THE STAGE IS WHITE. Cards render as white panels on neutral-50, and so do the
   panels inside them — figures and callouts are light too. An Ink hero card
   (.gz-card--ink) is supported by the shell but switched off for AI Factory:
   design-tokens.json -> artefactApplication.webShell.inkHero (spec §4). */
.gz-carousel{
  position:relative; flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
  background:transparent; overflow:hidden;
}
.gz-progress{ position:absolute; top:0; left:0; height:3px; width:0; background:var(--aif-lime-deep); z-index:5; border-radius:999px; }

.gz-deck{ flex:1 1 auto; min-height:0; display:flex; transition:transform .5s cubic-bezier(.6,.05,.25,1); }
.gz-card{ flex:0 0 100%; min-width:100%; min-height:0; position:relative; display:flex; }

/* the white panel IS the scroll region — the page never scrolls, the card does (D6) */
.gz-card__scroll,.gz-doc__scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  background:var(--gai-white); border:1px solid var(--gai-neutral-200);
  border-radius:var(--gz-radius); box-shadow:0 10px 30px rgba(31,40,44,.08);
  padding:clamp(20px,min(3.6vw,4.6vh),48px) clamp(26px,3.4vw,52px) clamp(14px,min(2vw,2.4vh),26px);
  scrollbar-width:thin; scrollbar-color:var(--gai-neutral-300) var(--gai-neutral-100);
}
/* persistent slim scrollbar — never auto-hiding, so the reader can see there is more */
.gz-card__scroll::-webkit-scrollbar,.gz-doc__scroll::-webkit-scrollbar{ width:9px; }
.gz-card__scroll::-webkit-scrollbar-track,.gz-doc__scroll::-webkit-scrollbar-track{ background:var(--gai-neutral-100); }
.gz-card__scroll::-webkit-scrollbar-thumb,.gz-doc__scroll::-webkit-scrollbar-thumb{ background:var(--gai-neutral-300); border-radius:999px; }
.gz-card__scroll::-webkit-scrollbar-thumb:hover,.gz-doc__scroll::-webkit-scrollbar-thumb:hover{ background:var(--aif-lime-deep); }

/* SCROLL TOGGLE (6.0.0) — data-gz-scroll="on|off" on the .gz-carousel (default on).
   on  : a card taller than the stage scrolls inside itself.
   off : the card never scrolls; its content must fit, so overflow belongs on the next
         card. factory-shell.js marks any card that does not fit .is-clipped and warns.
   Applies in the LOCKED shell only — a flowing page scrolls as one document. */
@media(min-width:1100px) and (min-height:640px){
  .gz-carousel[data-gz-scroll="off"] .gz-card__scroll{ overflow-y:hidden; }
  .gz-carousel[data-gz-scroll="off"] .gz-card__fade{ display:none; }
}

/* bottom fade — only while the card is scrollable AND not yet at the end */
.gz-card__fade{
  position:absolute; left:1px; right:1px; bottom:calc(var(--gz-rail) + 1px); height:56px;
  pointer-events:none; border-radius:0 0 var(--gz-radius) var(--gz-radius);
  background:linear-gradient(to bottom,rgba(255,255,255,0),var(--gai-white));
  opacity:0; transition:opacity .18s ease; z-index:3;
}
.gz-card.is-scrollable:not(.is-end) .gz-card__fade{ opacity:1; }

/* ── 6a · THE HERO CARD — the ONE permitted Ink card per page ──────────────── */
.gz-card--ink > .gz-card__scroll{
  background:var(--gai-ink); border-color:rgba(179,207,85,.25);
  box-shadow:0 18px 46px rgba(31,40,44,.28);
  scrollbar-color:rgba(220,234,168,.55) rgba(255,255,255,.06);
}
.gz-card--ink > .gz-card__scroll::-webkit-scrollbar-track{ background:rgba(255,255,255,.06); }
.gz-card--ink > .gz-card__scroll::-webkit-scrollbar-thumb{ background:rgba(220,234,168,.55); }
.gz-card--ink .gz-card__fade{ background:linear-gradient(to bottom,rgba(42,54,59,0),var(--gai-ink)); }
.gz-card.gz-card--ink h2,.gz-card.gz-card--ink h3{ color:var(--gai-white); }
.gz-card--ink p,.gz-card--ink .gz-lead{ color:var(--gai-neutral-300); }
.gz-card--ink .gz-kicker,.gz-card--ink .gz-eyebrow{ color:var(--aif-lime-base); }
.gz-card--ink .gz-eyebrow::before{ background:var(--aif-lime-base); }
.gz-card--ink .gz-tags .gz-tag{ color:var(--gai-neutral-300); border-color:rgba(255,255,255,.2); }

/* card content grid — text left, image slot right (spec §6) */
.gz-card__grid{
  display:grid; grid-template-columns:1.25fr .95fr; gap:clamp(20px,3.4vw,46px);
  align-items:start;
}
.gz-card__grid--wide{ grid-template-columns:1fr; }
/* a page's opening card: more room for the headline, a narrower figure */
.gz-card__grid--hero{ grid-template-columns:1.6fr .8fr; }
.gz-kicker{
  font-family:var(--gai-font-mono); font-size:max(var(--gz-type-min),.78rem); letter-spacing:.16em;
  text-transform:uppercase; color:var(--aif-lime-deep); margin-bottom:10px;
}
.gz-card h2,.gz-doc h2{
  font-family:var(--gai-font-display); font-weight:800; color:var(--gai-ink);
  font-size:clamp(1.55rem,3.2vw,2.6rem); line-height:1.08; letter-spacing:-.5px;
}
.gz-card h2 em,.gz-doc h1 em,.gz-doc h2 em{ font-style:italic; color:var(--aif-lime-deep); }
.gz-card--ink h2 em{ color:var(--aif-lime-base); }
.gz-card h3,.gz-doc h3{
  font-family:var(--gai-font-display); font-weight:600; font-size:1.02rem;
  color:var(--gai-ink); margin-bottom:6px;
}
.gz-lead{ color:var(--gai-neutral-700); font-size:clamp(.95rem,1.25vw,1.08rem); margin-top:14px; max-width:62ch; }
.gz-card p,.gz-doc p{ color:var(--gai-neutral-700); }

/* the image slot — one per card, top-right of the stage (spec §6).
   A light panel: diagrams draw in Ink, neutrals and lime deep on white. */
.gz-figure{
  background:var(--gai-neutral-50); border:1px solid var(--gai-neutral-200);
  border-radius:14px; padding:20px; position:sticky; top:0;
}
.gz-figure > svg,.gz-figure > img{ width:100%; height:auto; display:block; }
.gz-figure__cap{ color:var(--gai-neutral-600); font-size:.8rem; margin-top:10px; }

/* cards / grids reused inside a card */
.gz-grid{ display:grid; gap:16px; margin-top:24px; }
.gz-g2{ grid-template-columns:repeat(2,1fr); }
.gz-g3{ grid-template-columns:repeat(3,1fr); }
.gz-g4{ grid-template-columns:repeat(4,1fr); }
.gz-tile{
  background:var(--gai-white); border:1px solid var(--gai-neutral-200);
  border-top:3px solid var(--aif-lime-base);          
  border-radius:12px; padding:16px 18px;
}
.gz-card--ink .gz-tile{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14); }
.gz-tile .gz-kicker{ font-size:max(var(--gz-type-min),.7rem); margin-bottom:6px; }
.gz-tile p{ font-size:.86rem; }

/* the callout — a light panel with a lime-deep rule, set apart by its rule, not by Ink */
.gz-callout{
  background:var(--gai-neutral-50); border-left:3px solid var(--aif-lime-deep);
  border-radius:0 10px 10px 0; padding:14px 18px; margin-top:22px;
  font-family:var(--gai-font-mono); font-size:.78rem; color:var(--gai-neutral-700);
}
.gz-callout b,.gz-callout strong{ color:var(--gai-ink); }

/* ── 6b · CONTENT COMPONENTS ───────────────────────────────────────────────
   The shell owns the content vocabulary too, so a page never needs a local
   <style> block. Need something new? Add it here, not in the page (spec §11). */
.gz-eyebrow{
  font-family:var(--gai-font-mono); font-size:max(var(--gz-type-min),.75rem); letter-spacing:.14em;
  text-transform:uppercase; color:var(--aif-lime-deep);
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
}
.gz-eyebrow::before{ content:""; width:22px; height:1px; background:var(--aif-lime-deep); }
.gz-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.gz-tags .gz-tag{
  font-family:var(--gai-font-mono); font-size:max(var(--gz-type-meta),.7rem); letter-spacing:.12em;
  text-transform:uppercase; color:var(--gai-neutral-700);
  border:1px solid var(--gai-neutral-200); border-radius:999px; padding:5px 12px;
}
.gz-num{ font-family:var(--gai-font-display); font-weight:800; font-size:1.1rem; color:var(--aif-lime-deep); }
.gz-code{
  font-family:var(--gai-font-mono); font-size:.86em; color:var(--aif-lime-deep);
  background:var(--gai-neutral-100); border-radius:4px; padding:1px 5px;
}
.gz-card--ink .gz-code{ color:var(--aif-lime-core); background:rgba(179,207,85,.12); }
.gz-surf{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.gz-surf span{
  font-family:var(--gai-font-mono); font-size:max(var(--gz-type-meta),.68rem); letter-spacing:.06em;
  color:var(--gai-neutral-500); border:1px solid var(--gai-neutral-200);
  border-radius:4px; padding:3px 7px;
}
.gz-anat{ display:grid; grid-template-columns:1.15fr .85fr; gap:22px; margin-top:22px; }
.gz-frow{ display:grid; grid-template-columns:190px 1fr; gap:14px; padding:9px 0; border-bottom:1px solid var(--gai-neutral-200); }
.gz-frow .gz-k{ font-family:var(--gai-font-mono); font-size:max(var(--gz-type-min),.78rem); color:var(--aif-lime-deep); }
.gz-frow .gz-v{ font-size:.84rem; color:var(--gai-neutral-700); }
.gz-steps h3{ margin-bottom:10px; }
.gz-step{ display:grid; grid-template-columns:28px 1fr; gap:12px; margin-top:10px; }
.gz-step .gz-b{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--gai-font-display); font-weight:700; font-size:.78rem;
  background:rgba(92,118,20,.10); border:1px solid rgba(92,118,20,.35); color:var(--aif-lime-deep);
}
.gz-step .gz-t{ font-size:.84rem; color:var(--gai-neutral-700); }
.gz-step .gz-t b{ display:block; color:var(--gai-ink); font-family:var(--gai-font-display); margin-bottom:2px; }

/* ── 6c · THE CONTENT VOCABULARY ON INK (new at shell 2.0.0) ───────────────
   6b's components are authored for a white card: neutral-700 text, neutral-200
   rules, a light step badge. Dropped into the Ink hero they rendered dark text
   on a dark ground — unreadable, and no rule existed to correct it, so any page
   that put detail in its hero produced an unreadable hero. The hero is a
   first-class card and the shell owns how it renders, so the Ink variants live
   here rather than being patched per page. */
.gz-card--ink .gz-tile h3{ color:var(--gai-white); }
.gz-card--ink .gz-tile p{ color:var(--gai-neutral-300); }
.gz-card--ink .gz-frow{ border-bottom-color:rgba(255,255,255,.14); }
.gz-card--ink .gz-frow .gz-k{ color:var(--aif-lime-base); }
.gz-card--ink .gz-frow .gz-v{ color:var(--gai-neutral-300); }
.gz-card--ink .gz-step .gz-t{ color:var(--gai-neutral-300); }
.gz-card--ink .gz-step .gz-t b{ color:var(--gai-white); }
.gz-card--ink .gz-step .gz-b{
  background:rgba(220,234,168,.14); border-color:rgba(220,234,168,.45);
  color:var(--aif-lime-core);
}
.gz-card--ink .gz-callout{
  background:var(--gai-ink-3); border-left-color:var(--aif-lime-base);
  color:var(--gai-neutral-300);
}
.gz-card--ink .gz-surf span{ color:var(--gai-neutral-300); border-color:rgba(255,255,255,.18); }
.gz-card--ink .gz-figure{ background:var(--gai-ink-3); }

/* the call to action — one per card at most. Lime deep with white text on a light card
   (5.18:1); lime base with Ink text on the hero (7.09:1). Never in the header band. */
.gz-cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:22px;
  font-family:var(--gai-font-display); font-weight:600; font-size:max(var(--gz-type-min),.92rem);
  background:var(--aif-lime-deep); color:var(--gai-white); text-decoration:none;
  padding:10px 18px; border-radius:10px; border:0; cursor:pointer;
}
.gz-cta:hover{ background:var(--gai-ink); }
.gz-card--ink .gz-cta{ background:var(--aif-lime-base); color:var(--gai-ink); }
.gz-card--ink .gz-cta:hover{ background:var(--aif-lime-core); }
/* a plain text link inside a card */
.gz-card a.gz-link,.gz-doc a.gz-link{ color:var(--aif-lime-deep); font-weight:600; text-decoration:none; }
.gz-card a.gz-link:hover,.gz-doc a.gz-link:hover{ text-decoration:underline; }
.gz-card--ink a.gz-link{ color:var(--aif-lime-base); }


/* ── 6d · OVERVIEW COMPONENTS ──────────────────────────────────────────────── */
/* a display headline for a page's opening card */
.gz-card h2.gz-display{ font-size:clamp(1.9rem,3.3vw,3rem); line-height:1.04; letter-spacing:-.9px; }
/* a strip of headline numbers: the number, then what it means */
.gz-stats{
  display:grid; grid-template-columns:repeat(4,1fr); margin-top:26px;
  border-top:1px solid var(--gai-neutral-200); border-bottom:1px solid var(--gai-neutral-200);
}
.gz-stat{ padding:14px 18px 14px 0; }
.gz-stat + .gz-stat{ padding-left:18px; border-left:1px solid var(--gai-neutral-200); }
.gz-stat b{
  display:block; font-family:var(--gai-font-display); font-weight:800; line-height:1;
  font-size:clamp(1.6rem,2.6vw,2.3rem); color:var(--aif-lime-deep); margin-bottom:6px;
}
.gz-stat span{ display:block; font-size:max(var(--gz-type-min),.8rem); color:var(--gai-neutral-700); line-height:1.4; }
/* a comparison table; .gz-hl marks the AI Factory column with a faint lime tint */
.gz-table{ width:100%; border-collapse:collapse; margin-top:22px; font-size:.86rem; }
.gz-table th{
  text-align:left; padding:10px 14px; border-bottom:2px solid var(--gai-neutral-200);
  font-family:var(--gai-font-mono); font-size:max(var(--gz-type-min),.72rem); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gai-neutral-600);
}
.gz-table td{ padding:11px 14px; border-bottom:1px solid var(--gai-neutral-200); color:var(--gai-neutral-700); vertical-align:top; }
.gz-table td:first-child{ font-family:var(--gai-font-display); font-weight:600; color:var(--gai-ink); width:24%; }
.gz-table .gz-hl{ background:rgba(179,207,85,.12); color:var(--gai-ink); }
.gz-table th.gz-hl{ color:var(--aif-lime-deep); border-bottom-color:var(--aif-lime-deep); }

/* ── 6e · THE DOCUMENT PAGE (spec §4a) ────────────────────────────────────────
   One long white panel instead of a deck: for policies and statements that are
   read top to bottom. In the locked shell the panel scrolls between the pinned
   header and footer; on a flowing page the whole page scrolls. The tab band
   becomes the contents: a.gz-tab links to each section, highlighted as you read. */
.gz-doc{ position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.gz-doc__scroll{ position:relative; scroll-behavior:smooth; }
.gz-doc__body{ max-width:920px; }
.gz-doc h1{
  font-family:var(--gai-font-display); font-weight:800; color:var(--gai-ink);
  font-size:clamp(2rem,3.8vw,3.1rem); line-height:1.04; letter-spacing:-.8px;
}
.gz-doc__meta{ font-family:var(--gai-font-mono); font-size:max(var(--gz-type-min),.78rem); color:var(--gai-neutral-600); margin-top:12px; }
.gz-doc__section{ margin-top:38px; padding-top:30px; border-top:1px solid var(--gai-neutral-200); scroll-margin-top:12px; }
.gz-doc__section h2{ font-size:clamp(1.35rem,2.2vw,1.85rem); }
.gz-doc p{ margin-top:12px; max-width:75ch; }
.gz-doc .gz-frow .gz-v{ font-size:.9rem; }
.gz-doc__fade{
  position:absolute; left:1px; right:1px; bottom:1px; height:56px; pointer-events:none;
  border-radius:0 0 var(--gz-radius) var(--gz-radius);
  background:linear-gradient(to bottom,rgba(255,255,255,0),var(--gai-white));
  opacity:0; transition:opacity .18s ease;
}
.gz-doc.is-scrollable:not(.is-end) .gz-doc__fade{ opacity:1; }

/* ── 7 · CAROUSEL CONTROLS — arrows on the carousel edges, dots on the stage ─ */
.gz-arrow{
  position:absolute; top:calc(50% - var(--gz-rail)/2); transform:translateY(-50%); z-index:4;
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  border:1px solid var(--gai-neutral-200); background:var(--gai-white);
  color:var(--aif-lime-deep); font-size:20px; line-height:1;
  box-shadow:0 4px 14px rgba(31,40,44,.14);
  display:flex; align-items:center; justify-content:center;
}
.gz-arrow:hover{ background:var(--gai-neutral-50); border-color:var(--aif-lime-base); color:var(--gai-ink); }
.gz-arrow:disabled{ opacity:.3; cursor:default; box-shadow:none; }
.gz-arrow--prev{ left:14px; } .gz-arrow--next{ right:14px; }

/* reserved rail — dots sit on the stage, below the panel, never overlaying content */
.gz-dots{
  flex:0 0 auto; height:var(--gz-rail); z-index:4;
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:transparent;
}
.gz-dot{
  width:9px; height:9px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:var(--gai-neutral-300); transition:.2s;
}
.gz-dot:hover{ background:var(--gai-neutral-500); }
.gz-dot[aria-selected="true"]{ background:var(--aif-lime-deep); width:26px; border-radius:999px; }

/* ── 8 · BAND 4 · FOOTER (legal identity + copyright — nothing else is permitted) ── */
.gz-footer{ flex:0 0 auto; background:var(--gai-ink-2); color:var(--gai-neutral-300); }
.gz-footer__inner{
  display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap;
  font-size:max(var(--gz-type-min),.85rem); line-height:1.45; padding-block:var(--gz-chrome-y);
}
.gz-footer__mark{ width:var(--gz-mark-min); height:var(--gz-mark-min); flex:0 0 auto; }
/* two lines, nothing else: the legal identity line, then the copyright line.
   NO TAGLINE in the footer (6.0.0). Text comes from design-tokens.json -> brand.legal. */
.gz-footer__legal{ min-width:0; }
.gz-footer__legal p{ margin:0; }
.gz-footer__name{ font-family:var(--gai-font-display); font-weight:700; color:var(--gai-white); }
.gz-footer__copy{ color:var(--gai-stone); margin-top:2px; }
.gz-footer__spacer{ flex:1 1 auto; }
.gz-footer__links{ display:flex; gap:16px; flex-wrap:wrap; }
.gz-footer__links a{ color:var(--gai-neutral-300); text-decoration:none; }
.gz-footer__links a:hover{ color:var(--gai-white); }

/* ── 9 · RESPONSIVE + MOTION ──────────────────────────────────────────────── */
@media(max-width:900px){
  .gz-card__grid,.gz-anat{ grid-template-columns:1fr; }
  .gz-stats{ grid-template-columns:repeat(2,1fr); }
  .gz-stat:nth-child(3){ padding-left:0; border-left:0; }
  .gz-frow{ grid-template-columns:1fr; gap:2px; }
  .gz-figure{ display:none; }              /* text first on small screens */
  .gz-g3,.gz-g4{ grid-template-columns:repeat(2,1fr); }
}
/* FLOWING PAGE — phones, tablets, narrow windows, short windows (6.0.0).
   The page scrolls as one document; header, tabs and footer are NOT pinned, because
   real estate is limited. No scrollbar appears inside a panel. Arrows are hidden; dots
   and tabs remain. The inverse of the locked-shell query in section 3. */
@media(max-width:1099px),(max-height:639px){
  .gz-arrow{ display:none; }
  .gz-card__scroll,.gz-doc__scroll{ overflow-y:visible; }
  .gz-card__fade,.gz-doc__fade{ display:none; }
}
@media(max-width:600px){
  .gz-g2,.gz-g3,.gz-g4{ grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce){
  .gz-deck{ transition:none; }
  .gz-progress{ display:none; }
  .gz-card__fade{ transition:none; }
}