/*! Peak Web DS v0.23.1 | generated by scripts/build.mjs. Edit the sources, not this file */
/* ==========================================================================
   Peak Web DS: Tokens
   --------------------------------------------------------------------------
   Layer 1  Brand palette and scales   (identical to the Peak Brand Book 2026)
   Layer 2  Web primitives             (values the web layer adds on top)
   Layer 3  Theme tokens               (what components read; sections re-map them)
   Layer 4  Component tokens           (sizes and timings specific to one component)

   Components only read layer 3 and 4. Swapping a section from dark to light is
   done by re-mapping layer 3 on the section (see css/06-sections.css).
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- 1. Brand */
  --peak-green:   #A4FF93;   /* signature accent */
  --peak-black:   #020B00;   /* brand black, never #000 */
  --peak-ink:     #191914;   /* body ink on light */
  --peak-white:   #FFFFFF;
  --peak-magenta: #F0A5E7;
  --peak-blue:    #00BFFF;   /* FF Blue */
  --peak-orange:  #FC4503;   /* warning / danger only */
  --delta-yellow: #FFD633;   /* Peak Δ only */

  --green-50:  #D6FFCC;  --green-100: #B8FFA8;  --green-200: #A4FF93;  --green-300: #5BF700;
  --green-400: #50DD00;  --green-500: #45C000;  --green-600: #38A100;  --green-700: #287300;
  --green-800: #184400;  --green-900: #0B2100;  --green-950: #031000;

  --magenta-50:  #FBEAF9;  --magenta-100: #F5D3F1;  --magenta-200: #F0A5E7;  --magenta-300: #E579D5;
  --magenta-400: #D14EBD;  --magenta-500: #B53AA1;  --magenta-600: #932E82;  --magenta-700: #6F2361;
  --magenta-800: #4A1741;  --magenta-900: #280B22;

  --blue-50:  #E1F4FC;  --blue-100: #B9E4F8;  --blue-200: #8ED3F3;  --blue-300: #00BFFF;
  --blue-400: #0093C6;  --blue-500: #006D98;  --blue-600: #00556F;  --blue-700: #003F55;
  --blue-800: #002130;  --blue-900: #00131C;

  --orange-50:  #FFE9E0;  --orange-100: #FFC4B2;  --orange-200: #FF9F82;  --orange-300: #FF7354;
  --orange-400: #FC4503;  --orange-500: #C93403;  --orange-600: #972702;  --orange-700: #6A1B01;
  --orange-800: #3B0F01;  --orange-900: #1C0700;

  --neutral-0:   #FFFFFF;  --neutral-50:  #F1F1EF;  --neutral-100: #E4E4E0;  --neutral-200: #D2D9D3;
  --neutral-300: #D1D5DB;  --neutral-400: #C9C8C0;  --neutral-500: #9CA3AF;  --neutral-600: #3B3B3B;
  --neutral-700: #262626;  --neutral-800: #1E1E1E;  --neutral-900: #191914;  --neutral-950: #020B00;

  /* ------------------------------------------------------- 2. Web primitives */
  --green-hover:     #8DF079;   /* accent hover (brand book) */
  --green-700-hover: #1F5A00;   /* text-link hover on light, between green-700 and green-800 */
  --gray-500-cool:   #6B7280;   /* tertiary text on light surfaces */
  --disc-black:      #040D01;   /* the disc face: one step lifted from Peak Black */
  --pink-field:      #F6D3EF;   /* pink section ground (alternative section style) */
  --glass-green:     rgba(6, 26, 4, 0.80);  /* glass CTA hover fill */
  --danger:          #B42318;   /* form errors (sign-in); not a brand colour, used only for error text and field edges */
  --lavender-mid:    #B9B4F0;   /* the blend stop between magenta and blue in .grad */

  /* gradient text and washes */
  --gradient-display: linear-gradient(90deg, #F0A5E7 0%, #B9B4F0 38%, #00BFFF 66%, #A4FF93 100%);

  /* ------------------------------------------------------------- Typography */
  --font-sans: "AxiformaUI", "Axiforma", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-bold: 700;
  --weight-heavy: 900;

  /* type scale as used on the web pages (px values mirror the home page) */
  --fs-display:   80px;  --lh-display: 1.00;  --tr-display: -0.02em;   /* h1.hero, weight 300 */
  --fs-highlight: 52px;  --lh-highlight: 1.06; --tr-highlight: -0.024em; /* .hl-h, weight 300 + bold words */
  --fs-page-title: 50px; --lh-page-title: 1.10;                          /* sub-page h1, weight 400 */
  --fs-h2:        44px;  --lh-h2: 1.12;       --tr-h2: -0.02em;         /* section h2, weight 400 */
  --fs-stat-xl:   76px;                                                   /* slab stat numbers */
  --fs-stat-l:    56px;                                                   /* glass tile numbers */
  --fs-stat:      44px;                                                   /* proof / stats numbers */
  --fs-fstat:     34px;                                                   /* closing statement, weight 300 */
  --fs-pullquote: 28px;
  --fs-deck:      24px;  --lh-deck: 1.40;                                /* hero deck */
  --fs-h3:        22px;                                                   /* card titles, product names */
  --fs-intro:     22px;                                                   /* sub-page intro */
  --fs-cta-line:  19px;
  --fs-body:      18px;  --lh-body: 1.60;
  --fs-body-hl:   17px;  --lh-body-hl: 1.55;                             /* body in highlight sections */
  --fs-body-sm:   16px;
  --fs-link:      15px;
  --fs-caption:   14px;                                                   /* buttons, captions */
  --fs-eyebrow:   12px;  --tr-eyebrow: 0.14em;
  --fs-label:     11px;  --tr-label: 0.14em;                             /* footer heads, where-next labels */

  /* ------------------------------------------------------ Spacing and layout */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;  --space-5: 20px;
  --space-6: 24px; --space-7: 28px;  --space-8: 32px;  --space-10: 40px; --space-12: 48px;
  --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  --wrap-max: 1120px;          /* outer width incl. padding */
  --wrap-pad: 80px;            /* gutters -> 960px content column */
  --nav-h: 88px;
  --nav-pad-x: 56px;
  --section-pad: 56px;         /* plain body sections */
  --section-pad-hl: 110px;     /* highlight sections before angling */

  /* ------------------------------------------------------------------ Radii */
  --radius-pill:  999px;       /* buttons, capsule nav, chips, stack controls */
  --radius-slab:  40px;        /* slabs, card rows, governance box */
  --radius-panel: 28px;        /* proof and stats rows */
  --radius-menu:  26px;        /* the capsule when it grows into the mega menu */
  --radius-tile:  24px;        /* glass tiles in the 3D stack */
  --radius-item:  14px;        /* menu rows */
  --radius-icon:  11px;        /* mega-menu icon tiles */

  /* -------------------------------------------------------------- Separator */
  --angle-rise: 88px;          /* vertical rise of every slanted edge across the full width (~3.5deg at 1440px) */

  /* ------------------------------------------------------------------ Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);     /* the one easing curve */
  --dur-press: 100ms;          /* pointer-down feedback on small controls */
  --dur-btn-press: 120ms;      /* button scale on press */
  --dur-hover: 200ms;
  --dur-layout: 320ms;
  --dur-glass: 340ms;          /* glass CTA fill change */
  --dur-reveal: 380ms;
  --dur-expand: 480ms;         /* capsule -> mega menu */
  --dur-stack: 640ms;          /* CSS-driven stack fallback */

  /* ------------------------------------------------------------- Elevation */
  --shadow-panel: inset 0 1px 0 rgba(255,255,255,0.42), inset 0 -1px 0 rgba(255,255,255,0.10),
                  inset 0 -24px 40px rgba(255,255,255,0.045), 0 18px 40px rgba(2,11,0,0.40);
  --shadow-capsule: inset 0 1px 0 rgba(255,255,255,0.9), 0 10px 30px rgba(2,11,0,0.35);
  --shadow-slab: 0 44px 90px rgba(2,11,0,0.18);
  --shadow-tile: inset 0 1px 0 rgba(255,255,255,0.45), 0 30px 60px rgba(2,11,0,0.35);
  --shadow-chip: 0 10px 30px rgba(2,11,0,0.10);

  /* ------------------------------------------------ 3. Theme tokens (dark default) */
  --surface:    var(--peak-black);
  --text:       var(--peak-white);
  --text-2:     var(--neutral-400);   /* #C9C8C0 */
  --text-3:     var(--neutral-500);   /* #9CA3AF */
  --accent:     var(--peak-green);    /* stats, eyebrows, links */
  --accent-hover: var(--green-hover);
  --line:       rgba(255,255,255,0.12);
  --glass:      rgba(255,255,255,0.06);
  --focus:      var(--peak-green);
}

/* ---- css/01-fonts.css ---- */
/* ==========================================================================
   01 Fonts: AxiformaUI (Monotype, Peak's licensed cut). Paths are relative to
   css/ and dist/, which sit at the same depth.
   font-display:block keeps the hero headline from reflowing when the face lands.
   ========================================================================== */
@font-face { font-family: "AxiformaUI"; font-weight: 300; font-style: normal; font-display: block; src: url("../assets/fonts/AxiformaUI-Light.woff2") format("woff2"), url("../assets/fonts/AxiformaUI-Light.ttf") format("truetype"); }
@font-face { font-family: "AxiformaUI"; font-weight: 400; font-style: normal; font-display: block; src: url("../assets/fonts/AxiformaUI-Regular.woff2") format("woff2"), url("../assets/fonts/AxiformaUI-Regular.ttf") format("truetype"); }
@font-face { font-family: "AxiformaUI"; font-weight: 700; font-style: normal; font-display: block; src: url("../assets/fonts/AxiformaUI-Bold.woff2") format("woff2"), url("../assets/fonts/AxiformaUI-Bold.ttf") format("truetype"); }
@font-face { font-family: "AxiformaUI"; font-weight: 900; font-style: normal; font-display: block; src: url("../assets/fonts/AxiformaUI-Heavy.woff2") format("woff2"), url("../assets/fonts/AxiformaUI-Heavy.ttf") format("truetype"); }

/* ---- css/02-base.css ---- */
/* ==========================================================================
   02 Base: reset, page defaults, layout column, themes
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
}
img { max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
main { position: relative; }
[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }   /* anchor targets clear the fixed bar */

/* the content column: 1120px outer, 80px gutters, 960px of text */
.wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-pad); position: relative; z-index: 1; }

/* ---------- themes ----------------------------------------------------------
   A theme re-maps the layer-3 tokens. Put it on any section or block; every
   component inside follows. Dark is the page default (see tokens.css). */
.theme-dark {
  --surface: var(--peak-black);
  --text: var(--peak-white); --text-2: var(--neutral-400); --text-3: var(--neutral-500);
  --accent: var(--peak-green); --accent-hover: var(--green-hover);
  --line: rgba(255,255,255,0.12); --glass: rgba(255,255,255,0.06);
  --focus: var(--peak-green);
  --ghost-line: rgba(255,255,255,0.30); --ghost-line-hover: rgba(255,255,255,0.62); --ghost-fill-hover: rgba(255,255,255,0.05);
  --ghost-line-contrast: #FFFFFF;
  --panel-bg: transparent; --panel-border: rgba(255,255,255,0.16); --panel-shadow: var(--shadow-panel);
  --panel-backdrop: url(#peak-refract) blur(3px) saturate(170%) brightness(1.06);
  --panel-specular: linear-gradient(140deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.09));
  --panel-glow-opacity: 0.5; --logo: #FFFFFF;
  color: var(--text);
}
.theme-light {
  --surface: var(--peak-white);
  --text: var(--peak-ink); --text-2: var(--neutral-600); --text-3: var(--gray-500-cool);
  --accent: var(--green-700); --accent-hover: var(--green-700-hover);
  --line: rgba(2,11,0,0.12); --glass: rgba(2,11,0,0.03);
  --focus: var(--green-700);
  --ghost-line: rgba(2,11,0,0.28); --ghost-line-hover: rgba(2,11,0,0.60); --ghost-fill-hover: rgba(2,11,0,0.04);
  --ghost-line-contrast: var(--peak-black);
  --panel-bg: var(--neutral-50); --panel-border: var(--neutral-100); --panel-shadow: none;
  --panel-backdrop: none; --panel-specular: none; --panel-glow-opacity: 0.9; --logo: var(--peak-black);
  background: var(--surface);
  color: var(--text);
}
.theme-alt   { --surface: var(--neutral-50); background: var(--surface); }        /* light panel ground #F1F1EF */
.theme-pink  {
  --surface: var(--pink-field);
  --text: var(--peak-ink); --text-2: var(--neutral-600); --text-3: #5B5B5B;
  --accent: var(--green-700); --accent-hover: var(--green-700-hover);
  --line: rgba(2,11,0,0.12); --focus: var(--peak-black);
  --ghost-line: rgba(2,11,0,0.32); --ghost-line-hover: rgba(2,11,0,0.60); --ghost-fill-hover: rgba(2,11,0,0.04);
  --ghost-line-contrast: var(--peak-black);
  --panel-bg: var(--neutral-50); --panel-border: var(--neutral-100); --panel-shadow: none;
  --panel-backdrop: none; --panel-specular: none; --panel-glow-opacity: 0.9; --logo: var(--peak-black);
  background: var(--surface);
  color: var(--text);
}
/* dark defaults for the ghost tokens at the root */
:root {
  --ghost-line: rgba(255,255,255,0.30); --ghost-line-hover: rgba(255,255,255,0.62); --ghost-fill-hover: rgba(255,255,255,0.05);
  --ghost-line-contrast: #FFFFFF;
  --panel-bg: transparent; --panel-border: rgba(255,255,255,0.16); --panel-shadow: var(--shadow-panel);
  --panel-backdrop: url(#peak-refract) blur(3px) saturate(170%) brightness(1.06);
  --panel-specular: linear-gradient(140deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.09));
  --panel-glow-opacity: 0.5; --logo: #FFFFFF;
}

/* ---- css/03-typography.css ---- */
/* ==========================================================================
   03 Typography
   AxiformaUI only. Light (300) is the display voice, Regular (400) the reading
   weight, Bold (700) for labels, stats and emphasis. Tracking follows size:
   negative on display sizes, a hair positive on small body text.
   ========================================================================== */

/* ---------- labels --------------------------------------------------------- */
.eyebrow {                       /* hero and page eyebrow */
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase; color: var(--accent);
}
.hl-eye {                        /* eyebrow inside highlight sections: larger, tighter */
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 18px;
}
.label {                         /* footer column heads, small group labels */
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--text-3);
}

/* ---------- headings ------------------------------------------------------- */
.display {                       /* the hero voice */
  font-size: var(--fs-display); font-weight: 300; line-height: var(--lh-display);
  letter-spacing: var(--tr-display); margin: 22px 0 0; max-width: 1000px; text-wrap: balance;
}
.page-title {                    /* sub-page h1 */
  font-size: var(--fs-page-title); font-weight: 400; line-height: var(--lh-page-title);
  letter-spacing: -0.02em; margin: 0; max-width: 900px;
}
h2, .h2 {                        /* section heading on body sections */
  font-size: var(--fs-h2); font-weight: 400; line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2); margin: 18px 0 0; max-width: 820px;
}
.hl-h {                          /* highlight headline: light weight, key phrase in bold or gradient */
  font-size: var(--fs-highlight); font-weight: 300; line-height: var(--lh-highlight);
  letter-spacing: var(--tr-highlight); margin: 0; max-width: 760px; text-wrap: balance;
}
.hl-h b { font-weight: 700; }
h3, .h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.22; margin: 0; }
.subhead { font-size: var(--fs-h3); font-weight: 700; margin: 52px 0 0; }

/* ---------- gradient and highlight treatments ------------------------------ */
.grad {                          /* gradient words: magenta -> lavender -> FF Blue -> Peak Green */
  background: var(--gradient-display);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* the inline padding widens the paint box so descenders are not clipped; cloned per wrapped line */
  padding: 0.12em 0 0.22em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ul-green {                      /* a key word underlined with a thick Peak Green bar */
  background: linear-gradient(var(--peak-green), var(--peak-green)) no-repeat 0 92% / 100% 7px;
  padding-bottom: 3px;
}

/* ---------- running text --------------------------------------------------- */
.deck    { font-size: var(--fs-deck); line-height: var(--lh-deck); letter-spacing: -0.01em; margin-top: 26px; max-width: 700px; color: var(--text-2); }
.deck b  { font-weight: 700; color: var(--text); }
.page-intro { font-size: var(--fs-intro); line-height: 1.5; letter-spacing: -0.01em; color: var(--text-2); max-width: 760px; margin-top: 22px; }
.body    { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); max-width: 700px; margin-top: 24px; }
.body b  { color: var(--text); font-weight: 700; }
.hl-p    { font-size: var(--fs-body-hl); line-height: var(--lh-body-hl); letter-spacing: 0.003em; color: var(--text-2); max-width: 560px; margin-top: 22px; }
.fstat   { font-size: var(--fs-fstat); font-weight: 300; line-height: 1.28; letter-spacing: -0.01em; max-width: 900px; }
.closing { font-size: var(--fs-body); color: var(--text-2); max-width: 680px; margin-top: 44px; line-height: 1.6; }
.pullquote {
  font-size: var(--fs-pullquote); font-weight: 300; line-height: 1.3; letter-spacing: -0.01em; color: var(--text);
  max-width: 820px; margin: 34px 0; padding-left: 26px; border-left: 3px solid var(--accent);
}
.meta { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin-top: 12px; }
.hint { font-size: 15px; font-style: italic; color: var(--text-3); margin-top: 12px; }
.ilink { color: var(--accent); cursor: pointer; }
.ilink:hover { text-decoration: underline; text-underline-offset: 3px; }
sup { font-size: 11px; color: var(--accent); margin-left: 1px; }
.nm { font-size: var(--fs-h3); font-weight: 700; }   /* product or platform name set as a wordmark */

/* ---------- stat numbers ---------------------------------------------------- */
.stat-num    { font-size: var(--fs-stat); font-weight: 700; line-height: 1; letter-spacing: -0.01em; color: var(--accent); white-space: nowrap; }
.stat-num-l  { font-size: var(--fs-stat-l); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--accent); }
.stat-num-xl { font-size: var(--fs-stat-xl); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--accent); }

/* ---- css/04-buttons.css ---- */
/* ==========================================================================
   04 Buttons and CTAs
   .btn            pill base: 14px bold, 15/28 padding, press scale 0.97
   .btn-primary    solid Peak Green
   .gl .gl-a       glass CTA (canonical primary): green at rest, dark glass +
                   two-tone light under the pointer. Needs js/modules/cta-glass.js
   .gl-b / .gl-c   alternative glass surfaces (kept for exploration)
   .btn-ghost      outline pill, follows the section theme
   .cta-line       headline link with a trailing arrow, for long labels in narrow columns
   .tlink          text link with arrow, under body copy
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: var(--radius-pill); font-family: inherit; font-size: var(--fs-caption); font-weight: 700; line-height: 1.55;
  padding: 15px 28px; cursor: pointer; border: 0; text-decoration: none;
  transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease), transform var(--dur-btn-press) var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; cursor: default; }   /* a link with nowhere to go yet (a demo not live) */
.btn-sm { padding: 11px 22px; }            /* nav and footer "Get in touch" */

/* ---------- primary: solid green ------------------------------------------ */
.btn-primary { background: var(--peak-green); color: var(--peak-black); }
.btn-primary:hover { background: var(--green-hover); color: var(--peak-black); }

/* ---------- glass CTA ------------------------------------------------------
   Two pseudo layers read three custom properties the script writes each frame:
   --mx/--my  pointer position inside the pill (px), eased with a 160ms time constant
   --on       0..1 presence of the light, eased the same way (fades in and out)
   ::before  the two-tone light inside the pill (green core, FF Blue tail offset +48/+26px)
   ::after   a 1.5px rim, masked to the border, brightest where the pointer is */
.btn.gl { position: relative; isolation: isolate; overflow: hidden; --mx: 50%; --my: 50%; --on: 0; }
.btn.gl::before, .btn.gl::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--on); }
.btn.gl::before { z-index: -1; }
.btn.gl::after {
  padding: 1.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}

/* A: canonical: solid green at rest, turns to dark glass under the pointer */
.btn-primary.gl-a { background: var(--peak-green); color: var(--peak-black);
  transition: background var(--dur-glass) var(--ease), color var(--dur-glass) var(--ease), transform var(--dur-btn-press) var(--ease); }
.btn-primary.gl-a:hover, .btn-primary.gl-a[data-hover] { background: var(--glass-green); color: #FFFFFF; }
.btn.gl-a::before { background:
  radial-gradient(130px 90px at var(--mx) var(--my), rgba(164,255,147,0.85), rgba(164,255,147,0) 70%),
  radial-gradient(190px 130px at calc(var(--mx) + 48px) calc(var(--my) + 26px), rgba(0,191,255,0.78), rgba(0,191,255,0) 70%); }
.btn.gl-a::after { background: radial-gradient(210px 90px at var(--mx) var(--my), rgba(255,255,255,0.95), rgba(164,255,147,0.55) 45%, rgba(0,191,255,0.35) 75%, rgba(164,255,147,0.16) 100%); }

/* B: stays green; a cool light moves inside the surface */
.btn-primary.gl-b, .btn-primary.gl-b:hover { background: var(--peak-green); color: var(--peak-black); }
.btn.gl-b::before { background:
  radial-gradient(120px 84px at var(--mx) var(--my), rgba(255,255,255,0.78), rgba(255,255,255,0) 70%),
  radial-gradient(180px 120px at calc(var(--mx) + 44px) calc(var(--my) + 22px), rgba(0,191,255,0.62), rgba(0,191,255,0) 70%); }
.btn.gl-b::after { background: radial-gradient(210px 90px at var(--mx) var(--my), rgba(255,255,255,1), rgba(255,255,255,0.40) 50%, rgba(0,191,255,0.45) 80%, rgba(255,255,255,0.10) 100%); }

/* C: dark glass at rest with a green rim */
.btn-primary.gl-c, .btn-primary.gl-c:hover {
  background: rgba(6,26,4,0.62); color: #FFFFFF;
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(164,255,147,0.30), 0 10px 30px rgba(2,11,0,0.35);
}
.btn.gl-c::before { background:
  radial-gradient(130px 90px at var(--mx) var(--my), rgba(164,255,147,0.80), rgba(164,255,147,0) 70%),
  radial-gradient(190px 130px at calc(var(--mx) + 48px) calc(var(--my) + 26px), rgba(0,191,255,0.75), rgba(0,191,255,0) 70%); }
.btn.gl-c::after { background: radial-gradient(210px 90px at var(--mx) var(--my), rgba(255,255,255,0.95), rgba(164,255,147,0.6) 45%, rgba(0,191,255,0.35) 75%, rgba(164,255,147,0.18) 100%); }

/* ---------- ghost ----------------------------------------------------------- */
.btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--ghost-line); }
.btn-ghost:hover { color: var(--text); background: var(--ghost-fill-hover); box-shadow: inset 0 0 0 1px var(--ghost-line-hover); }

/* ---------- CTA rows -------------------------------------------------------- */
.fcta { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; margin-top: 44px; }
.fcta.lines, .cta-lines { flex-direction: column; align-items: flex-start; gap: 14px; }

/* ---------- headline link: long labels in narrow columns -------------------- */
.cta-line {
  display: inline-block; font-size: var(--fs-cta-line); font-weight: 700; line-height: 1.25;
  cursor: pointer; color: var(--text); max-width: 520px; text-decoration: none;
  transition: color var(--dur-hover) var(--ease);
}
.cta-line.primary { color: var(--accent); }
.cta-line:hover { color: var(--text); }
.cta-line.primary:hover { color: var(--accent-hover); }
/* the arrow is attached to the last word with a no-break space in the markup, so it never orphans */
.cta-line .arw { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin-left: 8px; transition: margin-left 220ms var(--ease); }
.cta-line:hover .arw { margin-left: 14px; }

/* ---------- text link ------------------------------------------------------- */
.tlink {
  display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-link); font-weight: 700;
  margin-top: 32px; cursor: pointer; color: var(--accent); text-decoration: none;
}
.tlink:hover { color: var(--accent-hover); }
.tlink.sub { font-weight: 400; }
.tlink.inrow { margin-top: 14px; font-weight: 400; font-size: var(--fs-caption); }
.arw { margin-left: 2px; flex-shrink: 0; }

/* ---------- press feedback: on pointer-down, everywhere --------------------- */
.cta-line:active, .tlink:active { opacity: 0.7; transition: opacity var(--dur-press) ease-out; }

/* ---- css/05-surfaces.css ---- */
/* ==========================================================================
   05 Surfaces: boxes and panels
   .panel        liquid-glass material on dark; flat #F1F1EF card on light
   .proof        3-up stat row (hero)           .stats   2/3/4-up stat row
   .cards        3/4-up card row                .card.nx where-next link card
   .offers       3-up offer row                 .gov     bordered governance box
   .panel-glow   pointer-chased magenta/blue light (added by js/modules/glass.js)
   .slab         dark rounded block set on a light section
   .disc + .rail neon-rimmed disc with a numbered rail
   .chip         white pill with name + line (pink section)
   The 3D glass tile stack lives in 09-tile-stack.css.
   ========================================================================== */

/* ---------- liquid glass material -------------------------------------------
   backdrop-filter carries the SVG displacement (#peak-refract, injected by the
   glass module) so only what is BEHIND the panel warps; the panel's own content
   stays sharp. blur+saturate sit in the same declaration as a floor for engines
   that no-op a bare url(). */
:is(.panel, .proof, .stats, .cards, .offers, .gov) {
  position: relative; isolation: isolate; overflow: hidden; contain: paint;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
}
:is(.panel, .proof, .stats, .cards, .offers, .gov)::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  -webkit-backdrop-filter: var(--panel-backdrop); backdrop-filter: var(--panel-backdrop);
}
/* specular edge: the lens highlight that sells the glass */
:is(.panel, .proof, .stats, .cards, .offers, .gov)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--panel-specular);
}
/* The material reads theme tokens (02-base.css): glass on dark, a flat #F1F1EF card with a #E4E4E0 edge
   on light. The nearest theme wins, so a glass row inside a dark section inside a light page stays glass. */
.panel { border-radius: var(--radius-slab); padding: 32px 30px; }

/* ---------- proof row (hero) ---------------------------------------------- */
.proof { display: flex; gap: 0; margin-top: 56px; border-radius: var(--radius-panel); }
.proof > div:not(.panel-glow) { flex: 1 1 0; padding: 26px 34px; }
.proof > div:not(.panel-glow) + div { border-left: 1px solid var(--line); }
.proof .n { font-size: var(--fs-stat); font-weight: 700; line-height: 1; letter-spacing: -0.01em; color: var(--accent); white-space: nowrap; }
.proof .c { font-size: var(--fs-caption); letter-spacing: 0.003em; color: var(--text-2); margin-top: 12px; }

/* ---------- stats row ------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; margin-top: 44px; border-radius: var(--radius-panel); }
.stats.two   { grid-template-columns: repeat(2, minmax(0,1fr)); }
.stats.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.stats > div:not(.panel-glow) { padding: 28px 26px; }
.stats > div:not(.panel-glow) + div { border-left: 1px solid var(--line); }
.stats .n { font-size: var(--fs-stat); font-weight: 700; line-height: 1; letter-spacing: -0.01em; color: var(--accent); }
.stats .c { font-size: var(--fs-body-sm); color: var(--text-2); margin-top: 14px; }
/* a stat that is a statement rather than a figure ("Since 2022" in the English copy, a sentence in a translation):
   heading size, wrapping, no caption */
.stats .n--text, .proof .n--text { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: 0; white-space: normal; }

/* ---------- card row -------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; margin-top: 44px; border-radius: var(--radius-slab); }
.cards.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.card { padding: 32px 30px; }
.card + .card { border-left: 1px solid var(--line); }
.card h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.22; margin: 0; }
.card p { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--text-2); margin: 14px 0 0; }
.card .m { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-top: 20px; }
/* wrapping rows: .two / .three / .four fix the column count; the row start loses its left rule, later rows gain a top rule */
.cards.two   { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cards.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
/* counted among the cards only ("of .card"): the glass module puts its .panel-glow layer first in the row */
.cards.two   .card:nth-child(2n+1 of .card), .cards.three .card:nth-child(3n+1 of .card), .cards.four .card:nth-child(4n+1 of .card) { border-left: 0; }
.cards.two   .card:nth-child(n+3 of .card), .cards.three .card:nth-child(n+4 of .card), .cards.four .card:nth-child(n+5 of .card) { border-top: 1px solid var(--line); }
.card .tlink { margin-top: 18px; font-size: var(--fs-caption); }
.card .logomark { margin-bottom: 14px; }
.card .logomark svg, .card .logomark img { height: 22px; }
.card .kicker { margin-top: 6px; }
/* where next: each card a glimpse of the page it opens */
.card.nx { display: flex; flex-direction: column; cursor: pointer; color: inherit; text-decoration: none; transition: background 220ms var(--ease); }
.card.nx:hover { background: var(--glass); }
.nx-l { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--accent); }
.card.nx h3 { margin-top: 14px; font-size: 20px; line-height: 1.25; text-wrap: balance; }
.card.nx p { flex: 1; font-size: var(--fs-link); margin-top: 12px; }
.nx-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: var(--fs-caption); font-weight: 700; color: var(--accent); transition: gap 220ms var(--ease); }
.card.nx:hover .nx-go { gap: 12px; }

/* ---------- offer row ------------------------------------------------------- */
.offers { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; margin-top: 44px; border-radius: var(--radius-slab); }
.offers > div:not(.panel-glow) { padding: 32px 30px; }
.offers > div:not(.panel-glow) + div { border-left: 1px solid var(--line); }
.offers h3 { font-size: var(--fs-h3); font-weight: 700; margin: 0; }
.offers p { font-size: var(--fs-body-sm); color: var(--text-2); margin: 12px 0 0; line-height: 1.5; }

/* ---------- governance box -------------------------------------------------- */
.gov { --panel-bg: var(--glass); border-radius: var(--radius-slab); padding: 52px 56px; }
.gov .row { padding: 24px 0; border-bottom: 1px solid var(--line); }
.gov .row:first-of-type { border-top: 1px solid var(--line); margin-top: 12px; }
.gov .rt { font-size: 19px; font-weight: 700; }
.gov .rb { font-size: var(--fs-body-sm); color: var(--text-2); margin-top: 8px; max-width: 760px; }

/* ---------- pointer-chased panel glow ----------------------------------------
   Two soft capsules straddle the top (magenta) and bottom (FF Blue) edges and
   chase the pointer horizontally; the bottom one trails. */
.panel-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 340ms var(--ease); }
.is-lit > .panel-glow { opacity: var(--panel-glow-opacity); }
.slab.is-lit > .panel-glow { opacity: 1; }
.panel-glow .pg { position: absolute; left: 0; width: 46%; height: 30px; border-radius: 50%; filter: blur(48px); will-change: transform; }
.panel-glow .pg-top { top: -15px; background: var(--peak-magenta); }
.panel-glow .pg-bot { bottom: -15px; background: var(--peak-blue); }

/* ---------- slab: a dark block on a light section --------------------------- */
.slab {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--peak-black); border-radius: var(--radius-slab);
  padding: 64px 72px 60px; box-shadow: var(--shadow-slab);
}
.slab-grid  { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 36px 48px; margin-top: 44px; }
.slab-strip { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 28px; margin-top: 44px; }
.slab-grid .it p, .slab-strip .it p { font-size: var(--fs-link); color: var(--text-2); margin: 12px 0 0; line-height: 1.5; }
.slab-strip .it .logomark svg, .slab-strip .it .logomark img { height: 22px; }
.slab-strip .it .nm { font-size: 18px; }
.slab-big { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px; margin-top: 40px; }
.slab-big .n { font-size: var(--fs-stat-xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--accent); }
.slab-big .c { font-size: var(--fs-link); color: var(--text-2); margin-top: 12px; }

/* ---------- disc: neon rim that turns toward the pointer ---------------------
   --ang   bearing of the conic rim (FF Blue arc faces the pointer)
   --gx/gy inner glow position (% of the disc)
   Written by js/modules/disc.js with a 550ms time constant. */
.disc {
  position: relative; width: 820px; height: 820px; border-radius: 50%;
  background: var(--disc-black); display: flex; align-items: center; justify-content: center; margin: -60px 0;
}
.disc::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; z-index: -1; filter: blur(14px);
  background: conic-gradient(from var(--ang, 170deg), transparent 0 28%, #00BFFF 44%, transparent 58%, transparent 68%, #A4FF93 86%, transparent 100%);
}
.disc::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
  background: radial-gradient(circle at var(--gx, 60%) var(--gy, 40%), rgba(164,255,147,0.16), rgba(0,191,255,0.06) 35%, transparent 60%);
}
.disc.sm { width: 600px; height: 600px; justify-self: center; margin: -20px 0; }
.disc.sm .rail { width: auto; }
.disc.sm .rail li { padding-bottom: 26px; }

/* ---------- numbered rail ---------------------------------------------------- */
.rail { list-style: none; margin: 0; padding: 0; width: 406px; }
.rail li { display: grid; grid-template-columns: 44px minmax(0,1fr); column-gap: 22px; align-items: start; position: relative; padding-bottom: 30px; }
.rail li:last-child { padding-bottom: 0; }
.rail li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 46px; bottom: 2px; width: 2px; background: rgba(164,255,147,0.30); }
.rail .num { width: 44px; height: 44px; border-radius: 50%; background: var(--peak-green); color: var(--peak-black); font-weight: 700; font-size: var(--fs-caption); display: grid; place-items: center; }
.rail li:active .num { transform: scale(0.94); transition: transform var(--dur-press) ease-out; }
.rail .t { line-height: 1.2; padding-top: 8px; }
.rail .t .nm { font-size: var(--fs-h3); }
.rail .t .logomark svg, .rail .t .logomark img { height: 24px; }
.rail .d { font-size: var(--fs-caption); letter-spacing: 0.003em; color: var(--text-2); margin-top: 8px; line-height: 1.45; max-width: 340px; }
.rail .n { font-size: 40px; font-weight: 700; color: var(--accent); line-height: 1; letter-spacing: -0.02em; padding-top: 2px; }

/* ---------- chip -------------------------------------------------------------- */
.chip { display: inline-flex; align-items: center; gap: 16px; background: #FFFFFF; border-radius: var(--radius-pill); padding: 14px 24px 14px 20px; color: var(--peak-ink); box-shadow: var(--shadow-chip); }
.chip .logomark svg, .chip .logomark img { height: 22px; }
.chip .nm { font-size: var(--fs-body-sm); }
.chip p { font-size: var(--fs-caption); color: var(--neutral-600); margin: 0; white-space: nowrap; }

/* ---------- logomarks --------------------------------------------------------- */
.logomark { display: block; color: var(--logo, var(--text)); margin-bottom: 20px; line-height: 0; }
.logomark svg, .logomark img { display: block; height: 34px; width: auto; }
.logomark.inline { display: inline-block; margin: 0; }

/* ---- css/06-separators.css ---- */
/* ==========================================================================
   06 Separators: the slanted section edge
   Every dark full-bleed block (hero, highlight sections, footer) is cut into a
   parallelogram that rises to the right. The slope is a fixed vertical rise
   (--angle-rise, 88px) across the full width, so top and bottom edges of every
   block stay parallel: about 3.5deg at 1440px, steeper on narrow screens.

   Built from wedges, not clip-path: a wedge in the NEIGHBOURING colour is laid
   over the block's corner. That keeps the block's own stacking and effects
   (the disc rim glow, backdrop filters) intact. Wedges overlap the seam by 1px
   so no hairline of the block can show along the slant at any zoom level.

   .angle-top      cut the top-left corner away   (edge rises left -> right)
   .angle-bottom   cut the bottom-right corner away
   --angle-color   the neighbour's colour (default white body)
   --angle-top-color, --angle-bottom-color   one slant's neighbour, when the two differ (fall back to --angle-color)
   Add at least --angle-rise to the padding on each angled side.
   ========================================================================== */
.angle-top, .angle-bottom { position: relative; }
.angle-top::before, .angle-bottom::after {
  content: ""; position: absolute; left: 0; right: 0;
  height: calc(var(--angle-rise) + 2px);
  z-index: 3; pointer-events: none;
}
.angle-top::before   { top: -1px;    clip-path: polygon(0 0, 100% 0, 0 100%); background: var(--angle-top-color, var(--angle-color, #FFFFFF)); }
.angle-bottom::after { bottom: -1px; clip-path: polygon(100% 0, 100% 100%, 0 100%); background: var(--angle-bottom-color, var(--angle-color, #FFFFFF)); }

/* ---- css/07-sections.css ---- */
/* ==========================================================================
   07 Sections
   .section            plain body section (56px rhythm)
   .section--disc      dark, text left + neon disc right          (angle both edges)
   .section--stack     dark, text left + 3D glass tile stack right (angle both edges)
   .section--band      dark, single column: eyebrow, headline, copy, a glass stats row (angle both edges)
   .section--slab      white, one dark slab inside
   .section--pink      pink field with chips or a two-column list  (alternative)
   .section--closing   closing statement before the footer
   .fan-glow           the soft green / magenta / blue washes behind a dark section
   ========================================================================== */
.section { padding: var(--section-pad) 0; position: relative; }

/* highlight sections: full-bleed, clipped atmosphere, content above it */
.section--hl { position: relative; overflow: hidden; overflow: clip; }   /* clip: never scrolled sideways by focus */
.section--hl > .wrap { position: relative; z-index: 1; }

/* disc */
.section--disc { background: var(--peak-black); padding: 120px 0; }
.section--disc > .wrap { display: grid; grid-template-columns: minmax(0,1fr) 520px; gap: 40px; align-items: center; }
.section--disc.angle-top    { padding-top: 176px; }
.section--disc.angle-bottom { padding-bottom: 200px; }

/* stack */
.section--stack { background: var(--peak-black); padding: 110px 0 120px; }
.section--stack > .wrap { display: grid; grid-template-columns: minmax(0,1.15fr) 540px; gap: 40px; align-items: center; }
.section--stack .hl-h { font-size: 46px; letter-spacing: -0.022em; }
.section--stack.angle-top    { padding-top: 166px; }
.section--stack.angle-bottom { padding-bottom: 200px; }

/* band: the dark highlight without a disc or stack, for sub-pages */
.section--band { background: var(--peak-black); padding: 120px 0; }
.section--band.angle-top    { padding-top: 176px; }
.section--band.angle-bottom { padding-bottom: 200px; }
.section--band .hl-h { max-width: 820px; }
.section--band .hl-p { max-width: 700px; }
.section--band .stats { margin-top: 52px; }

/* slab */
.section--slab { background: #FFFFFF; padding: 96px 0 110px; }

/* pink field */
.section--pink { padding: 110px 0 120px; }
.pink-list { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 34px 56px; }
.pink-list .it p { font-size: var(--fs-link); line-height: 1.5; color: var(--text-2); margin: 10px 0 0; }
.pink-chips { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; max-width: 880px; }

/* closing */
.section--closing { padding: 56px 0 96px; }

/* ---------- atmosphere: fan glows -------------------------------------------
   Three blurred ellipses; the section clips them. Values as on the stack section. */
.fan-glow { position: absolute; border-radius: 50%; filter: blur(110px); pointer-events: none; overflow-anchor: none; }   /* never a scroll anchor: it moves when its section grows */
.fan-glow.g { left: -6%;  bottom: -25%; width: 760px; height: 520px; background: rgba(164,255,147,0.30); }
.fan-glow.m { right: -8%; top: -20%;    width: 820px; height: 560px; background: rgba(240,165,231,0.34); }
.fan-glow.b { left: 40%;  top: 30%;     width: 520px; height: 420px; background: rgba(0,191,255,0.20); }

/* ---- css/08-hero.css ---- */
/* ==========================================================================
   08 Hero
   .peak-hero            dark hero (default): Peak Black, green + magenta washes, bright contour map
   .peak-hero--light     light hero: #F1F1EF ground, pink + blue washes, deep-toned contour map
   .peak-hero--page      sub-page header: shorter, with .page-title instead of the typewriter; light (with
                         .peak-hero--light) or dark (without it, 0.22.0)
   .peak-hero--lifted    room under the copy for a card lifted over the header's foot (.section--lift, 0.22.0)
   .typewriter           the headline: static lead word + lines typed out in turn
   .topo                 the drifting elevation map behind the copy (js/modules/topo.js)
   .wash / .hwash        atmosphere washes (px-placed on dark, tokenised on light)
   ========================================================================== */

.peak-hero {
  /* the hero carries its own theme, so it works anywhere (inside a light page, a demo stage, a CMS block) */
  --surface: var(--peak-black);
  --text: var(--peak-white); --text-2: var(--neutral-400); --text-3: var(--neutral-500);
  --accent: var(--peak-green); --accent-hover: var(--green-hover);
  --line: rgba(255,255,255,0.12); --glass: rgba(255,255,255,0.06); --focus: var(--peak-green);
  --ghost-line: rgba(255,255,255,0.30); --ghost-line-hover: rgba(255,255,255,0.62); --ghost-fill-hover: rgba(255,255,255,0.05);
  --ghost-line-contrast: #FFFFFF;
  --panel-bg: transparent; --panel-border: rgba(255,255,255,0.16); --panel-shadow: var(--shadow-panel);
  --panel-backdrop: url(#peak-refract) blur(3px) saturate(170%) brightness(1.06);
  --panel-specular: linear-gradient(140deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.09));
  --panel-glow-opacity: 0.5; --logo: #FFFFFF;
  position: relative; overflow: hidden; overflow: clip; padding: 212px 0 58px; background: var(--surface); color: var(--text);
  /* clip, not just hidden: the washes reach past the edges, and a hidden box can still be scrolled sideways when a field inside takes focus */
}
.peak-hero.angle-bottom { padding-bottom: 150px; }
.peak-hero > .wrap { position: relative; z-index: 1; }

/* ---------- light hero ------------------------------------------------------- */
.peak-hero--light {
  --surface: var(--neutral-50);
  --text: var(--peak-ink); --text-2: var(--neutral-600); --text-3: var(--gray-500-cool);
  --accent: var(--green-700); --accent-hover: var(--green-700-hover);
  --line: rgba(2,11,0,0.12); --glass: rgba(2,11,0,0.03); --focus: var(--green-700);
  --ghost-line: rgba(2,11,0,0.28); --ghost-line-hover: rgba(2,11,0,0.60); --ghost-fill-hover: rgba(2,11,0,0.04);
  --ghost-line-contrast: var(--peak-black);
  --logo: var(--peak-black); --panel-glow-opacity: 0.9;
  color: var(--text);
}
/* the proof row becomes a light card; figures in neutral ink rather than green */
.peak-hero--light .proof { background: rgba(255,255,255,0.62); border-color: var(--neutral-100); box-shadow: none; }
.peak-hero--light .proof::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
.peak-hero--light .proof::after { background: none; }
.peak-hero--light .proof .n { color: var(--peak-ink); }

/* ---------- atmosphere washes -------------------------------------------------
   Dark hero: two large soft blobs, placed in px exactly as on the home page. Each is a radial gradient on a ::before
   450px larger on every side (three times the old blur), not a filled shape under filter: blur(150px). That blur
   needs a drawing surface of over 100 MB on a phone: iOS loaded the dark contact page slowly or left it black. */
.wash { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.wash::before { content: ""; position: absolute; inset: -450px; pointer-events: none; }
.wash--green   { width: 1100px; height: 900px; left: -320px; top: -260px; }
.wash--magenta { width: 900px;  height: 760px; right: -300px; top: 520px; }
.wash--green::before   { background: radial-gradient(closest-side, rgba(164,255,147,0.11) 25%, rgba(164,255,147,0.055) 55%, rgba(164,255,147,0) 88%); }
.wash--magenta::before { background: radial-gradient(closest-side, rgba(240,165,231,0.20) 25%, rgba(240,165,231,0.10) 55%, rgba(240,165,231,0) 88%); }

/* Light hero: tokenised washes. Position = centre as % of the hero, size = width
   as % of the hero (height follows at 1.45x of the hero height), strength = opacity.
   Defaults are the placement approved on the V4 board. */
.hwash {
  position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
  transform: translate(-50%, -50%);
  left: var(--wx); top: var(--wy); width: var(--ws); height: calc(var(--ws) * 1.45);
  opacity: var(--wo); filter: blur(var(--wb, 70px));
}
.hwash--pink { --wx: var(--pink-x, -20%); --wy: var(--pink-y, 12%); --ws: var(--pink-s, 125%); --wo: var(--pink-o, 0.53);
  background: radial-gradient(closest-side, #F0A5E7, rgba(240,165,231,0)); }
.hwash--blue { --wx: var(--blue-x, 114%); --wy: var(--blue-y, 59%); --ws: var(--blue-s, 76%); --wo: var(--blue-o, 0.34);
  background: radial-gradient(closest-side, #00BFFF, rgba(0,191,255,0)); }

/* ---------- typewriter headline ----------------------------------------------
   Markup: <h1 class="display typewriter"><span class="tw-lead">We</span>
           <span class="tw-line" data-lines='["…","…"]'>first line</span></h1>
   Each character fades in from a 7px blur in Peak Green (--tw-type), settles to
   the text colour (--tw-settle) 520ms later; the caret rides the last letter.
   After the dwell the words dissolve right to left, then the next line types. */
.typewriter { text-wrap: wrap; min-height: 3em; }            /* reserves three lines: nothing below moves */
.typewriter .tw-lead, .typewriter .tw-line { display: inline; }
.typewriter .tw-lead { margin-right: 0.24em; }
.typewriter .tw-line .w { white-space: nowrap; }
.typewriter .ch { display: none; opacity: 0; }                /* no width until typed, so the caret follows */
.typewriter .ch.on { display: inline; color: var(--tw-type, var(--peak-green)); transition: color 720ms var(--ease); animation: tw-in 460ms var(--ease) forwards; }
.typewriter .ch.lit { color: var(--tw-settle, var(--text)); }
.typewriter .ch.del { animation: tw-out 480ms var(--ease) both; }   /* 'both' holds each word visible through its delay */
.typewriter .caret {
  display: inline-block; width: 3px; height: 0.74em; margin-left: 0.08em; vertical-align: -0.04em; border-radius: 2px;
  background: var(--tw-type, var(--peak-green));
  animation: tw-caret 1.05s steps(1) infinite; transition: opacity var(--dur-layout) var(--ease);
}
.typewriter .caret.typing { animation: none; }
.typewriter .caret.hide { opacity: 0; animation: none; }
@keyframes tw-in    { from { opacity: 0; filter: blur(7px); } to { opacity: 1; filter: blur(0); } }
@keyframes tw-out   { from { opacity: 1; filter: blur(0); } to { opacity: 0; filter: blur(5px); } }
@keyframes tw-caret { 50% { opacity: 0; } }

/* ---------- contour map --------------------------------------------------------
   The script builds a plane inside .topo and tilts it with the pointer
   (--px/--py in -1..1, eased with a 600ms time constant). */
.topo { position: absolute; inset: 0; overflow: hidden; overflow: clip; pointer-events: none; z-index: 0; }
.topo-plane { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; will-change: transform; }
.topo svg { display: block; }
.topo path { fill: none; stroke: rgba(164,255,147,0.30); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.topo path.idx { stroke: rgba(164,255,147,0.55); stroke-width: 1.8; }

/* flow (canonical): drifting lines, FF Blue valleys to Peak Green heights.
   Masks fade it out under the headline and keep the text column quiet. */
.topo[data-mode=flow] {
  perspective: 1400px; opacity: 0.9;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 6%, #000 46%, #000 90%, transparent), linear-gradient(to right, rgba(0,0,0,0.28), rgba(0,0,0,0.28) 36%, #000 60%);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 6%, #000 46%, #000 90%, transparent), linear-gradient(to right, rgba(0,0,0,0.28), rgba(0,0,0,0.28) 36%, #000 60%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.topo[data-mode=flow] .topo-plane {
  width: 2400px; height: 1600px; margin: -800px 0 0 -1200px;
  transform: translateY(120px) rotateX(calc(38deg + var(--py, 0) * 1.5deg)) rotateY(calc(var(--px, 0) * 2deg));
}
.topo[data-mode=flow] canvas { display: block; width: 100%; height: 100%; }

/* lines (alternative): one static sheet of contour lines, every fourth an index line */
.topo[data-mode=lines] {
  perspective: 1600px; opacity: 0.85;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28%, #000 88%, transparent), linear-gradient(to right, rgba(0,0,0,0.30), rgba(0,0,0,0.30) 38%, #000 62%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 28%, #000 88%, transparent), linear-gradient(to right, rgba(0,0,0,0.30), rgba(0,0,0,0.30) 38%, #000 62%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.topo[data-mode=lines] .topo-plane {
  width: 3200px; height: 2200px; margin: -1100px 0 0 -1600px;
  transform: translateY(380px) rotateX(calc(58deg + var(--py, 0) * 2deg)) rotateY(calc(var(--px, 0) * 2.5deg)) rotateZ(-6deg) translateX(calc(var(--px, 0) * -24px));
}

/* terraces (alternative): filled elevation levels stacked in real depth */
.topo[data-mode=terraces] {
  perspective: 1800px;
  -webkit-mask-image: radial-gradient(ellipse 58% 68% at 70% 56%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 58% 68% at 70% 56%, #000 35%, transparent 100%);
}
.topo[data-mode=terraces] .topo-plane {
  width: 960px; height: 600px; margin: -300px 0 0 -480px;
  transform: translate(370px, 150px) rotateX(calc(56deg + var(--py, 0) * 2deg)) rotateY(calc(var(--px, 0) * 3deg)) rotateZ(-14deg);
}
.topo[data-mode=terraces] .lv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: translateZ(calc(var(--l) * 11px)); backface-visibility: hidden; }
.topo[data-mode=terraces] .peak-glow {
  position: absolute; left: 62%; top: 48%; width: 220px; height: 160px; margin: -80px 0 0 -110px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(164,255,147,0.55), transparent); filter: blur(22px);
  transform: translateZ(calc(var(--l) * 11px + 8px));
}

/* ---------- sub-page header ---------------------------------------------------
   The light hero at page-header scale: eyebrow, .page-title, .page-intro, CTA
   row and an optional proof row. The map sits quieter behind reading copy. */
.peak-hero--page { padding: 172px 0 64px; }
.peak-hero--page.angle-bottom { padding-bottom: 148px; }
.peak-hero--page .page-title { margin-top: 20px; }
.peak-hero--page .fcta { margin-top: 36px; }
.peak-hero--page .proof { margin-top: 48px; }
.peak-hero--page .topo[data-mode=flow] { opacity: 0.55; }
/* the dark page header: the magenta wash rises into the shorter block (on the home hero it sits 520px down) */
.peak-hero--page:not(.peak-hero--light) .wash--magenta { top: 40px; right: -380px; }
/* a card lifted over the header's foot (.section--lift): the header keeps 80px between its copy and the card */
.peak-hero--page.peak-hero--lifted { --lift: 168px; padding-bottom: calc(var(--lift) + 80px); }

/* ---- css/09-tile-stack.css ---- */
/* ==========================================================================
   09 3D glass tile stack
   Frosted tiles layered up and back in depth. Each tile's depth is one number,
   --p (0 = front). js/modules/tile-stack.js drives --p per tile on a critically
   damped spring, so prev / next / dots / auto-advance interrupt each other
   mid-flight. The pointer tilts the whole stack (--mx/--my in -1..1).

   Depth formula (per tile, p = --p):
     translate  x = p*64px + mx*(10px + p*5px)     y = -p*54px + my*(8px + p*4px)
     scale      1 - p*0.045        rotate   p*1.6deg
     blur       p*1.1px (+ --pb while a tile materialises)
     opacity    (1 - p*0.16) * --o        z-index  10 - p
   ========================================================================== */
.stack-col { position: relative; }
.stack { position: relative; height: 500px; transform: translateX(40px); --mx: 0; --my: 0; }

.sc {
  position: absolute; left: 0; bottom: 40px; width: 380px; padding: 32px 34px 30px;
  border-radius: var(--radius-tile); color: #FFFFFF;
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.40);
  box-shadow: var(--shadow-tile);                                  /* bright top edge: light catching the glass */
  /* light frost: what sits behind the front tile stays readable, so every tile frosts alike */
  -webkit-backdrop-filter: blur(7px) saturate(160%); backdrop-filter: blur(7px) saturate(160%);
  transform:
    translate(calc(var(--p) * 64px + var(--mx) * (10px + var(--p) * 5px)), calc(var(--p) * -54px + var(--my) * (8px + var(--p) * 4px)))
    scale(calc(1 - var(--p) * 0.045)) rotate(calc(var(--p) * 1.6deg));
  filter: blur(calc(var(--p) * 1.1px + var(--pb, 0px)));
  opacity: calc((1 - var(--p) * 0.16) * var(--o, 1));
  z-index: calc(10 - var(--p));
  will-change: transform, filter, opacity;
}
.sc.stat { width: 340px; }
.sc .n  { font-size: var(--fs-stat-l); font-weight: 700; color: var(--peak-green); letter-spacing: -0.03em; line-height: 1; }
/* a long figure (more than eight characters, such as a Hungarian figure with its suffix: 70–85%-kal) a size down, on one line */
.sc .n--long { font-size: calc(var(--fs-stat-l) * 0.78); white-space: nowrap; }
.sc p   { font-size: var(--fs-caption); line-height: 1.5; color: rgba(255,255,255,0.92); font-weight: 500; letter-spacing: 0.005em; margin: 12px 0 0; }  /* vibrancy over glass */
.sc .nm { font-size: var(--fs-h3); }
.sc .logomark svg, .sc .logomark img { height: 24px; }

/* ---------- .sc.demo: a demo as a tile (the home's Demo Portal band): its icon and category, its name, its line
   and a link line; the whole tile is the link. Only the front tile can be reached: tile-stack.js makes the rest inert. */
.stack--demos .sc { width: 340px; }
.sc.demo { display: block; padding: 26px 28px 24px; text-decoration: none; color: #FFFFFF; }
.sc.demo .demo-head { display: flex; align-items: center; gap: 14px; }
.sc.demo .demo-icon { flex: none; width: 52px; height: 52px; border-radius: 14px; box-shadow: 0 10px 24px rgba(2,11,0,0.35); }
.sc.demo .demo-type { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--peak-green); line-height: 1.3; }
.sc.demo .demo-name { display: block; margin-top: 18px; font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.sc.demo p { margin-top: 8px; }
.sc.demo .demo-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: var(--fs-caption); font-weight: 700; color: var(--peak-green); }
.sc.demo .demo-go svg { width: 14px; height: 14px; transition: transform var(--dur-hover) var(--ease); }
.sc.demo:hover .demo-go svg { transform: translateX(3px); }
.sc.demo:focus-visible { outline: 2px solid var(--peak-green); outline-offset: 4px; }

/* ---------- controls: prev, dots, next in one glass capsule (same glass as the nav) ---------- */
.stack-nav {
  display: flex; align-items: center; gap: 10px; width: max-content; margin: 10px auto 0; padding: 6px 8px;
  background: rgba(255,255,255,0.46); border: 1px solid rgba(255,255,255,0.75); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-capsule);
}
.snav {
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--peak-ink);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.snav:hover { background: rgba(2,11,0,0.08); color: var(--peak-black); }
.snav:active { transform: scale(0.92); transition: transform var(--dur-press) ease-out; }
.sdots { display: flex; gap: 8px; padding: 0 6px; }
.sdot {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: rgba(2,11,0,0.22); cursor: pointer;
  transition: background var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
}
.sdot:hover { background: rgba(2,11,0,0.5); }
.sdot.on { background: var(--peak-black); transform: scale(1.3); }
.sdot:active { transform: scale(0.8); transition: transform var(--dur-press) ease-out; }

/* ---- css/10-nav.css ---- */
/* ==========================================================================
   10 Navigation
   .peak-nav        fixed 88px bar: logo left, actions right, the capsule absolutely centred between them
   .peak-logo       99x42 wordmark; flips to Peak Black over light ground (.is-on-light, set on the bar too)
   .nav-actions     the header CTAs: ghost secondary, the language switcher, then the glass primary (always last)
   .nav-lang        EN | HU, one pill on the right edge: the current code; hover rolls the other in, a click switches (also in the sheet)
   .nav-capsule     frosted glass pill holding the top-level items
   .nav-glow        three drifting glow pills (green, FF Blue, magenta) under the items
   .mega-wrap       the capsule itself grows into the mega menu (width + height, one motion)
   .crumb-wrap      after a sub item is chosen the capsule keeps a breadcrumb line
   State classes on .nav-capsule (set by js/modules/nav.js):
     .is-mega  panel open     .is-crumbed  breadcrumb shown     .is-following  glow chasing the pointer
   State classes on .peak-mega (set by the script per panel):
     .is-compact  under 900px of room: intro and featured link move under the columns
     .is-simple   a short list (About)      .no-quick  no left column
   Under 1280px: .nav-burger and .nav-sheet replace the capsule and the actions (see the end of this file).
   ========================================================================== */

.peak-nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 40;
  display: flex; align-items: center; justify-content: space-between; padding: 0 var(--nav-pad-x);
}
.peak-nav--static { position: relative; }        /* for embedding in docs and demos */
.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-actions .btn { white-space: nowrap; }
/* the bar is not themed: the ghost CTA reads white over dark ground and flips with the logo (logo-shade.js) */
.peak-nav.is-on-light { --text: var(--peak-ink); --ghost-line: rgba(2,11,0,0.28); --ghost-line-hover: rgba(2,11,0,0.60); --ghost-fill-hover: rgba(2,11,0,0.04); }
/* under 1600px the secondary action drops its pill and reads as a text link, so the capsule can stay centred */
@media (max-width: 1599px) {
  .nav-actions .btn-ghost { box-shadow: none; padding: 11px 10px; }
  .nav-actions .btn-ghost:hover { background: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; }
}

.peak-logo { display: block; width: 99px; height: 42px; color: #FFFFFF; flex-shrink: 0; cursor: pointer; transition: color 240ms var(--ease); }
.peak-logo svg { display: block; width: 100%; height: 100%; }
.peak-logo.is-on-light { color: var(--peak-black); }

/* ---------- language switcher: one white pill with the current language's code (0.19.0) --------------------------
   <div class="nav-lang" role="group" aria-label="Language" data-lang="en">
     <span class="nav-lang-opt" lang="en" aria-current="page">EN</span>
     <a class="nav-lang-opt" href="/hu/ecosystem/" hreflang="hu" lang="hu">HU</a>
   </div>
   The codes stand in a column, EN above HU, in a window one code tall: the pill shows the page's language, in ink.
   Hovering it (js/modules/lang-switch.js sets data-armed) rolls the other code in, grey: HU up from below, or EN down
   from above, pushing HU down. A click switches: the code turns ink at once (data-lang changes) and the page changes in
   place. Leaving it or Escape rolls it back. Keyboard focus on the link shows the other code, so Enter switches; a tap
   on a touch screen switches at once. In the bar it is the last item, a tab on the window's right edge (0.19.1). The column moves by EN's top margin (no transform), so
   the link's ::after stays the pill's size: without the script a click anywhere navigates. */
.nav-lang {
  --nl-row: 0; --nl-line: 38px;
  position: relative; display: inline-block; overflow: hidden; margin: 0 4px; padding: 0 16px; cursor: pointer;
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
}
.nav-lang[data-lang="hu"], .nav-lang[data-lang="en"][data-armed] { --nl-row: 1; }
.nav-lang[data-lang="hu"][data-armed] { --nl-row: 0; }
.nav-lang-opt {
  display: block; height: var(--nl-line); line-height: var(--nl-line); text-align: center; white-space: nowrap; text-decoration: none;
  color: color-mix(in srgb, var(--peak-ink) 40%, transparent);
  transition: color var(--dur-hover) var(--ease);
}
.nav-lang-opt:first-child { margin-top: calc(var(--nl-row) * -1 * var(--nl-line)); transition: margin-top 420ms var(--ease), color var(--dur-hover) var(--ease); }
.nav-lang[data-lang="en"] .nav-lang-opt[lang="en"], .nav-lang[data-lang="hu"] .nav-lang-opt[lang="hu"] { color: var(--peak-ink); }
.nav-lang a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-pill); }   /* the whole pill is the link's hit area */
.nav-lang a:hover { color: color-mix(in srgb, var(--peak-ink) 62%, transparent); }   /* the rolled-in code: a darker grey, not the links' green */
.nav-lang a:focus-visible { outline: none; }
.nav-lang a:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.nav-lang:hover { background: rgba(255,255,255,0.82); }
/* in the bar it is the last item, a tab on the window's right edge: past the bar's padding, rounded on the left only,
   24px from the primary action (the row's 10px gap + 14px) */
.nav-actions .nav-lang { margin: 0 calc(-1 * var(--nav-pad-x)) 0 14px; padding: 0 22px 0 18px; border-right: 0; border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
/* The switcher and the bar's quiet actions (.nav-glass: Sign out) sit on the capsule's own glass (0.17.0). The bar
   takes its light or dark mode from the ground under the logo, on the left; the actions, on the right, can sit over
   another ground (a dark card ending before them, a white window on a dark band), and white glass on white had no
   edge. On the capsule's material they read on any ground: light glass, ink labels, the capsule's shadow. */
.nav-lang, .nav-actions .nav-glass, .ns-actions .nav-glass {
  --text: var(--peak-ink); --focus: var(--green-700);
  height: 40px; box-sizing: border-box; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.62); border: 1px solid rgba(255,255,255,0.8); box-shadow: var(--shadow-capsule);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
}
.nav-actions .nav-glass, .ns-actions .nav-glass { display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; color: var(--peak-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background var(--dur-hover) var(--ease); }
.nav-actions .nav-glass:hover, .ns-actions .nav-glass:hover { background: rgba(255,255,255,0.82); }
.nav-actions .nav-glass:focus-visible, .ns-actions .nav-glass:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ns-actions .nav-glass { width: 100%; height: 48px; }                                  /* in the sheet: full width, as the other actions */
/* the switch in place (js/modules/lang-switch.js): while long text fades line by line, every word of it is in a
   <peak-w> (inline, so the lines break as before; positioned, so a line can rise), and the old text in a
   <peak-ghost> laid over the unit's content box while the new text comes in under it. Both exist only meanwhile. */
peak-w { position: relative; }
peak-ghost { position: absolute; display: block; margin: 0; padding: 0; border: 0; pointer-events: none; user-select: none; }

/* ---------- the capsule --------------------------------------------------- */
.nav-capsule {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);   /* js/modules/nav.js fixes top in px and keeps translateX(-50%) */
  display: flex; flex-direction: column;
  isolation: isolate; overflow: hidden; overflow: clip; contain: paint; box-sizing: border-box;   /* clip: focus or scrollIntoView can never scroll the row sideways */
  background: rgba(255,255,255,0.46); border: 1px solid rgba(255,255,255,0.75);
  border-radius: var(--radius-pill); padding: 7px 10px;
  box-shadow: var(--shadow-capsule);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  transition: border-radius var(--dur-layout) var(--ease), width var(--dur-expand) var(--ease), transform var(--dur-expand) var(--ease);
}
/* refraction and specular layers, as on the glass panels */
.nav-capsule::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  -webkit-backdrop-filter: url(#peak-refract) blur(3px) saturate(170%) brightness(1.06);
  backdrop-filter: url(#peak-refract) blur(3px) saturate(170%) brightness(1.06);
}
.nav-capsule::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(140deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.09));
}
.nav-capsule.is-mega, .nav-capsule.is-crumbed { border-radius: var(--radius-menu); }

.nav-items { display: flex; gap: 4px; justify-content: center; transition: transform var(--dur-expand) var(--ease); }   /* counter-shift: see nav.js */
.nav-items > a {
  position: relative; font-size: var(--fs-link); font-weight: 500; color: var(--peak-ink);
  padding: 9px 18px; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: color var(--dur-hover) var(--ease);
}
.nav-items > a:hover, .nav-items > a[aria-current] { color: var(--peak-black); }
.nav-items > a:active { opacity: 0.55; transition: opacity var(--dur-press) ease-out; }
/* the open item: Peak Black with a hairline under it, no weight change so the row never shifts */
.nav-items > a.mega-on { color: var(--peak-black); }
.nav-items > a.mega-on::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--peak-black); }

/* ---------- glow pills ---------------------------------------------------------
   Capsules, not circles. Each drifts on its own prime-ish loop so they never
   resynchronise; CSS transitions carry them between items, the script takes
   over (transition: none) while they chase the pointer. */
.nav-glow { position: absolute; inset: 0; z-index: -1; opacity: 0; filter: blur(11px); pointer-events: none; transition: opacity 300ms var(--ease); }
.nav-glow i { position: absolute; display: block; border-radius: var(--radius-pill); }
.nav-glow i:nth-child(1) { background: #A4FF93; animation: nav-drift-a 7.3s ease-in-out infinite;
  transition: left 430ms var(--ease), top 430ms var(--ease), width 430ms var(--ease), height 430ms var(--ease); }
.nav-glow i:nth-child(2) { background: #00BFFF; animation: nav-drift-b 9.7s ease-in-out infinite;
  transition: left 610ms var(--ease) 70ms, top 610ms var(--ease) 70ms, width 610ms var(--ease) 70ms, height 610ms var(--ease) 70ms; }
.nav-glow i:nth-child(3) { background: #F0A5E7; animation: nav-drift-c 11.9s ease-in-out infinite;
  transition: left 520ms var(--ease) 130ms, top 520ms var(--ease) 130ms, width 520ms var(--ease) 130ms, height 520ms var(--ease) 130ms; }
.nav-capsule.is-following .nav-glow i { transition: none; }
@keyframes nav-drift-a { 0%,100% { transform: translate(0,0) scale(1); } 27% { transform: translate(11%,9%) scale(1.16); } 58% { transform: translate(-9%,-7%) scale(.88); } 81% { transform: translate(5%,-4%) scale(1.06); } }
@keyframes nav-drift-b { 0%,100% { transform: translate(0,0) scale(1.05); } 31% { transform: translate(-10%,-8%) scale(.89); } 64% { transform: translate(9%,7%) scale(1.18); } 85% { transform: translate(-4%,4%) scale(.98); } }
@keyframes nav-drift-c { 0%,100% { transform: translate(0,0) scale(.95); } 35% { transform: translate(-8%,7%) scale(1.14); } 62% { transform: translate(10%,-8%) scale(1.03); } 88% { transform: translate(3%,5%) scale(.92); } }

/* ---------- mega menu: the capsule grows ---------------------------------------
   Height unfolds via grid-template-rows 0fr -> 1fr; width is set by the script
   (resting width -> 980px). The content fades in 150ms after the shape starts. */
.mega-wrap {
  display: grid; grid-template-rows: 0fr; margin-top: 0; padding-top: 0; border-top: 1px solid transparent;
  transition: grid-template-rows var(--dur-expand) var(--ease), margin-top var(--dur-expand) var(--ease), padding-top var(--dur-expand) var(--ease), border-color var(--dur-expand) var(--ease);
}
.nav-capsule.is-mega .mega-wrap { grid-template-rows: 1fr; margin-top: 7px; padding-top: 10px; border-top-color: rgba(2,11,0,0.10); }
.mega-in { overflow: hidden; min-height: 0; }
.peak-mega {
  display: grid; grid-template-columns: 240px 1fr; gap: 6px 22px; padding: 6px 8px; color: var(--peak-ink);
  opacity: 0; transform: translateY(-6px); transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.nav-capsule.is-mega .peak-mega { opacity: 1; transform: none; transition-delay: 150ms; }

/* left column: one-line intro, then quick links (icon tile + title + one line) */
.mg-quick { display: flex; flex-direction: column; gap: 4px; padding-right: 18px; border-right: 1px solid rgba(2,11,0,0.10); }
.mg-intro { margin: 0; padding: 10px 12px 14px; font-size: 15px; font-weight: 300; line-height: 1.45; color: rgba(25,25,20,0.80); }
.mg-quick .mg-intro + .mg-q { margin-top: auto; }                   /* the featured link sits at the foot of the column */
.mg-q { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--radius-item); cursor: pointer; color: inherit; text-decoration: none; transition: background 180ms var(--ease); }
.mg-q:hover { background: rgba(2,11,0,0.07); color: inherit; }
.mg-ico { width: 38px; height: 38px; border-radius: var(--radius-icon); background: var(--peak-black); color: var(--peak-green); display: grid; place-items: center; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; flex-shrink: 0; }
.mg-q b { display: block; font-size: var(--fs-caption); font-weight: 700; line-height: 1.25; }
.mg-q small { display: block; font-size: 12px; color: rgba(25,25,20,0.66); line-height: 1.3; margin-top: 2px; }
/* grouped columns */
.mg-cols { display: grid; gap: 8px 16px; align-content: start; }
.mg-eye { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(25,25,20,0.55); padding: 10px 12px 6px; }
.mg-it { display: block; padding: 7px 12px; border-radius: 12px; cursor: pointer; color: inherit; text-decoration: none; transition: background 180ms var(--ease); }
.mg-it:hover { background: rgba(2,11,0,0.07); color: inherit; }
.mg-it b { display: block; font-size: var(--fs-caption); font-weight: 600; line-height: 1.3; }
.mg-it small { display: block; font-size: 12px; color: rgba(25,25,20,0.62); line-height: 1.3; margin-top: 1px; }
/* "Explore all …" row at the foot of a group */
.mg-it.more { margin-top: 2px; }
.mg-it.more b { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--peak-black); }
.mg-it.more svg { transition: margin-left 220ms var(--ease); }
.mg-it.more:hover svg { margin-left: 4px; }
.mg-items[style*="column-count"] .mg-it { break-inside: avoid; }
/* a short list (About): the capsule grows to a fixed narrow width */
.peak-mega.is-simple { grid-template-columns: 1fr; padding: 4px 6px; }
.mg-simple { display: flex; flex-direction: column; gap: 2px; }
.mg-simple .mg-it { padding: 10px 14px; }
.mg-simple .mg-it b { font-size: var(--fs-link); font-weight: 500; }
.peak-mega.no-quick { grid-template-columns: 1fr; }
/* a prompt under the intro: a line and a button on a quiet tint (Industries: "Don't see your industry?") */
.mg-prompt { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 4px; padding: 14px 12px; border-radius: var(--radius-item); background: rgba(2,11,0,0.045); }
.mg-prompt p { margin: 0; font-size: var(--fs-caption); line-height: 1.45; color: rgba(25,25,20,0.80); }
.mg-prompt b, .ns-prompt b { font-weight: 700; color: var(--peak-ink); }
.mg-prompt .btn { flex: none; }
/* compact: intro and featured link move under the columns */
.peak-mega.is-compact { grid-template-columns: 1fr; }
.peak-mega.is-compact .mg-quick { grid-row: 2; flex-direction: row; align-items: center; gap: 16px; margin-top: 4px; padding: 10px 4px 0; border-right: 0; border-top: 1px solid rgba(2,11,0,0.10); }
.peak-mega.is-compact .mg-intro { flex: 1; padding: 6px 8px; }
.peak-mega.is-compact .mg-quick { flex-wrap: wrap; }
.peak-mega.is-compact .mg-prompt { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; margin: 2px 0 4px; padding: 12px 12px 12px 16px; }
.peak-mega.is-compact .mg-prompt p { max-width: 62ch; }
.peak-mega.is-compact .mg-quick .mg-intro + .mg-q { margin-top: 0; }
.peak-mega.is-compact .mg-q { padding: 6px 10px; }
.peak-mega.is-compact .mg-ico { width: 30px; height: 30px; font-size: 11px; border-radius: 9px; }
.peak-mega.is-compact .mg-q small { display: none; }
/* footer link + note */
.mg-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid rgba(2,11,0,0.10); margin-top: 8px; padding: 14px 12px 4px; font-size: 13px; }
.mg-all { font-weight: 700; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; color: var(--peak-black); text-decoration: none; }
.mg-all:hover { color: var(--peak-black); }
.mg-note { color: rgba(25,25,20,0.6); }

/* ---------- breadcrumb: a second line the capsule keeps ------------------------ */
.crumb-wrap {
  display: grid; grid-template-rows: 0fr; margin-top: 0; padding-top: 0; border-top: 1px solid transparent;
  transition: grid-template-rows 380ms var(--ease), margin-top 380ms var(--ease), padding-top 380ms var(--ease), border-color 380ms var(--ease);
}
.nav-capsule.is-crumbed .crumb-wrap { grid-template-rows: 1fr; margin-top: 5px; padding-top: 6px; border-top-color: rgba(2,11,0,0.10); }
.crumb-in { overflow: hidden; min-height: 0; }
.peak-crumb { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 3px 14px 5px; font-size: 13px; font-weight: 500; color: rgba(25,25,20,0.7); white-space: nowrap; }
.peak-crumb .cr { cursor: pointer; color: inherit; background: none; border: 0; font: inherit; padding: 0; transition: color 180ms var(--ease); }
.peak-crumb .cr:hover { color: var(--peak-black); }
.peak-crumb b { color: var(--peak-black); font-weight: 700; }
.peak-crumb .sep { width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.5; margin: 0 1px; }

/* ---------- small screens: the menu button and the sheet ----------------------------
   Under 1280px the capsule no longer clears the logo and the actions, so both give way to .nav-burger, which opens
   .nav-sheet: a full-screen light panel built by js/modules/nav.js from the same items and mega data. Each section is an
   accordion (.ns-top button + .ns-panel: overview link, quick links, groups); the header actions sit at the foot.
   State: .is-sheet on .peak-nav, .nav-sheet-open on <html> (no page scroll behind). */
.nav-burger, .nav-sheet { display: none; }
@media (max-width: 1279px) {
  .peak-nav > .nav-capsule, .peak-nav > .nav-actions { display: none; }
  .nav-burger {
    display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; cursor: pointer; flex-shrink: 0;
    color: var(--peak-ink); background: rgba(255,255,255,0.46); border: 1px solid rgba(255,255,255,0.75); box-shadow: var(--shadow-capsule);
    -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
    transition: background var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
  }
  .nav-burger:active { transform: scale(0.94); }
  .nav-sheet:not([hidden]) { display: block; }
  /* the bar gets a frosted ground, so the logo never sits on running text; it follows the ground under it
     (logo-shade.js sets .is-on-light) */
  /* on a pseudo-element: a backdrop-filter on the bar itself would make it the containing block of the fixed sheet */
  .peak-nav:not(.peak-nav--static)::before {
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background: rgba(2,11,0,0.58); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
    transition: background 240ms var(--ease);
  }
  .peak-nav.is-on-light:not(.peak-nav--static)::before { background: rgba(241,241,239,0.78); }
}
.nb-lines { position: relative; display: block; width: 18px; height: 12px; }
.nb-lines i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform 260ms var(--ease), top 260ms var(--ease); }
.nb-lines i:first-child { top: 2px; }
.nb-lines i:last-child { top: 8px; }
.peak-nav.is-sheet .nb-lines i { top: 5px; }
.peak-nav.is-sheet .nb-lines i:first-child { transform: rotate(45deg); }
.peak-nav.is-sheet .nb-lines i:last-child { transform: rotate(-45deg); }
.peak-nav.is-sheet .nav-burger { background: #FFFFFF; border-color: rgba(2,11,0,0.08); box-shadow: 0 6px 18px rgba(2,11,0,0.10); }
.peak-nav.is-sheet .peak-logo { color: var(--peak-black); }

.nav-sheet {                                         /* under the logo and the button (z-index -1 inside the bar) */
  position: fixed; inset: 0; z-index: -1; padding-top: var(--nav-h);
  background: var(--neutral-50); color: var(--peak-ink); opacity: 0; transition: opacity 240ms var(--ease);
}
.nav-sheet::before {                                 /* the light hero's pink and blue, faint */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 45% at 0% 0%, rgba(240,165,231,0.30), transparent 70%), radial-gradient(60% 40% at 100% 100%, rgba(0,191,255,0.16), transparent 70%);
}
.nav-sheet.is-open { opacity: 1; }
.ns-scroll { position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 32px; padding: 8px var(--nav-pad-x) 28px; }
.ns-list { display: flex; flex-direction: column; }
.ns-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 2px;
  font: inherit; font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; text-align: left;
  color: var(--peak-ink); background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; text-decoration: none;
}
.ns-top:hover { color: var(--peak-black); }
.ns-top svg { flex: none; color: var(--text-3); transition: transform 240ms var(--ease); }
.ns-top[aria-expanded="true"] { border-bottom-color: transparent; }
.ns-top[aria-expanded="true"] svg { transform: rotate(180deg); }
.ns-top.is-current, .ns-top[aria-current] { font-weight: 700; }
.ns-panel { padding: 0 0 18px; border-bottom: 1px solid var(--line); }
.ns-it { display: block; padding: 10px 2px; color: var(--peak-ink); text-decoration: none; }
.ns-it b { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; line-height: 1.35; }
.ns-it:hover { color: var(--peak-black); }
.ns-hub b, .ns-it.more b { font-weight: 700; color: var(--green-700); }
.ns-q { display: flex; align-items: center; gap: 12px; padding: 10px 2px; color: var(--peak-ink); text-decoration: none; }
.ns-q b { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; }
.ns-q small { display: block; font-size: 13px; line-height: 1.35; color: var(--text-2); margin-top: 2px; }
.ns-group { margin-top: 8px; }
.ns-prompt { margin-top: 14px; padding: 16px; border-radius: var(--radius-item); background: rgba(2,11,0,0.045); }
.ns-prompt p { margin: 0 0 14px; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.ns-eye { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); padding: 10px 2px 2px; }
.ns-actions { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.ns-actions .btn { width: 100%; justify-content: center; }
.ns-actions .nav-lang { display: block; width: max-content; margin: 0 auto; }   /* after the actions, as in the bar, centred */
html.nav-sheet-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nav-capsule, .nav-items, .mega-wrap, .crumb-wrap, .peak-mega { transition: none; }
  .nav-glow i { animation: none; }
  .nav-sheet, .nb-lines i, .ns-top svg, .nav-lang-opt { transition: none; }
}

/* ---- css/11-footer.css ---- */
/* ==========================================================================
   11 Footer
   Same slanted top edge and the same atmosphere as the dark highlight sections:
   Peak Black with a green wash low left, magenta high right, faint blue centre.
   Markup: <footer class="peak-footer angle-top theme-dark"><div class="wrap">
             <div class="ft-brand"> logo + tagline | .ft-actions </div>
             <div class="ft-cols"> five <nav class="ft-col"> columns </div>
             <div class="ft-bottom"> copyright | .ft-legal </div>
   .ft-top is the earlier three-column layout (logo column + 3), kept for small footers.
   ========================================================================== */
.peak-footer {
  position: relative; z-index: 1; overflow: hidden; overflow: clip; padding: 176px 0 40px;
  background:
    radial-gradient(760px 520px at -4% 112%, rgba(164,255,147,0.26), transparent 70%),
    radial-gradient(820px 560px at 104% -14%, rgba(240,165,231,0.30), transparent 70%),
    radial-gradient(560px 440px at 58% 40%, rgba(0,191,255,0.14), transparent 70%),
    var(--peak-black);
  color: #FFFFFF;
}
.ft-top { display: grid; grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,1fr)); gap: 40px; }
.ft-logo { display: block; width: 99px; height: 42px; color: #FFFFFF; cursor: pointer; }
.ft-logo svg { display: block; width: 100%; height: 100%; }
.ft-tag { margin-top: 18px; font-size: var(--fs-body-hl); line-height: 1.5; color: rgba(255,255,255,0.86); max-width: 340px; }
.ft-h { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 16px; }
.ft-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ft-col a { font-size: var(--fs-link); color: rgba(255,255,255,0.86); cursor: pointer; text-decoration: none; transition: color var(--dur-hover) var(--ease); }
.ft-col a:hover { color: #FFFFFF; }
/* brand row: logo and tagline left, the two site actions right */
.ft-brand { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.ft-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; padding-top: 4px; }
/* link columns: one per primary section */
.ft-cols { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 40px 28px; margin-top: 64px; }
.ft-cols .ft-col { gap: 9px; }
.ft-cols .ft-col a { font-size: 14px; line-height: 1.35; }
.ft-legal { display: flex; gap: 24px; }
.ft-legal a { color: rgba(255,255,255,0.6); text-decoration: none; transition: color var(--dur-hover) var(--ease); }
.ft-legal a:hover { color: #FFFFFF; }
.ft-bottom {
  display: flex; align-items: center; justify-content: space-between; margin-top: 56px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.14); font-size: 13px; color: rgba(255,255,255,0.6);
}

/* ---- css/12-content.css ---- */
/* ==========================================================================
   12 Content patterns: used on sub-pages and body sections
   ========================================================================== */

/* ---------- tables: rules only, no panel; the head row is always accent ---- */
.table { border-collapse: collapse; width: 100%; margin: 72px 0; font-size: var(--fs-body-sm); }
.table:has(+ .tlink) { margin-bottom: 0; }          /* a link that belongs to the table stays attached */
.table th, .table td { padding: 16px 24px 16px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); transition: border-color 260ms var(--ease); }
.table th { font-weight: 700; color: var(--accent); }
.table tr:last-child td { border-bottom-color: transparent; }
.table tr:hover th, .table tr:hover td { border-bottom-color: var(--text); }   /* hovering a row lifts its own rule */
.table td.k { font-weight: 700; width: 34%; }
/* a long list as a table (.table--list: the content's tables, the Solutions page): fixed columns, so the rows that open
   below line up with the first ones. Over five rows the rest sit in .table-more, a <details> right under the table whose
   summary ("See all solutions" and the number of rows, regular weight) goes once it is open. No script. */
.table--list { table-layout: fixed; margin-top: 32px; }
.table--list .tc-k { width: 30%; }                    /* <colgroup>: the rows that open below take the same widths */
.table--list .tc-last { width: 18%; }
.table:has(+ .table-more) { margin-bottom: 0; }
.table:has(+ .table-more) tr:last-child td { border-bottom-color: var(--line); }
.table-more { margin: 0 0 72px; }
.table-more > summary { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; cursor: pointer; list-style: none; }
.table-more > summary::-webkit-details-marker { display: none; }
.table-more-n { font-weight: 400; color: var(--text-2); }
.table-more[open] > summary { display: none; }
.table-more > .table { margin: 0; }
.table-more[open] > .table { animation: table-more-in 420ms var(--ease) both; }
@keyframes table-more-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- row list --------------------------------------------------------- */
.rowlist { margin-top: 40px; }
.rowlist .row { padding: 24px 0; border-bottom: 1px solid var(--line); }
.rowlist .row:first-child { border-top: 1px solid var(--line); }
.rowlist .rt { font-size: 19px; font-weight: 700; }
.rowlist .rb { font-size: var(--fs-body-sm); color: var(--text-2); margin-top: 8px; max-width: 820px; line-height: 1.55; }
.rt-mark { display: flex; align-items: center; gap: 14px; }
.rt-mark .logomark { margin-bottom: 0; }

/* ---------- numbered steps --------------------------------------------------- */
.steps { margin-top: 36px; }
.steps .step { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.steps .step:last-child { border-bottom: none; }
.steps .num { font-size: var(--fs-caption); font-weight: 700; color: var(--accent); padding-top: 3px; letter-spacing: 0.06em; }
.steps .st { font-size: var(--fs-body); font-weight: 700; }
.steps .sd { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--text-2); margin-top: 6px; }

/* ---------- FAQ -------------------------------------------------------------- */
.qa { padding: 22px 0; border-bottom: 1px solid var(--line); }
.qa:last-of-type { border-bottom: none; }
.qa .q { font-size: var(--fs-body); font-weight: 700; }
.qa .a { font-size: var(--fs-body-sm); line-height: 1.6; color: var(--text-2); margin-top: 8px; max-width: 760px; }

/* ---------- logo rows (client logos, awards) ---------------------------------- */
.logos { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 8px 0 40px; position: relative; z-index: 1; }
.logos .ph { width: 104px; height: 36px; border: 1px solid var(--line); border-radius: 12px; background: var(--glass); }   /* placeholder until real logos */
.logos .lb { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-3); margin-right: 12px; }
.awards { display: flex; gap: 18px; align-items: center; margin-top: 40px; flex-wrap: wrap; }
.awards .ph { width: 116px; height: 36px; border: 1px solid var(--line); border-radius: 12px; background: var(--glass); }

/* ---------- where next + footnotes -------------------------------------------- */
.wherenext { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.footnotes { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); }
.footnotes p { font-size: 13px; line-height: 1.55; color: var(--text-3); margin: 4px 0; }

/* ---------- bullet list ------------------------------------------------------- */
.list { margin: 22px 0 0; padding: 0 0 0 22px; max-width: 700px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); }
.list li { margin: 8px 0; padding-left: 4px; }
.list li::marker { color: var(--accent); }
.list b { color: var(--text); font-weight: 700; }

/* ---------- kicker: a small label under a heading (the platform type, a group name) ---- */
.kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--accent); margin-top: 12px; }
.h2-mark .logomark { margin: 18px 0 0; }
.h2-mark .logomark svg { height: 30px; }

/* ---------- "Powered by" line under a use case --------------------------------- */
.powered { font-size: var(--fs-caption); color: var(--text-3); margin-top: 18px; line-height: 1.5; }
.powered b { color: var(--text-2); font-weight: 700; margin-right: 6px; }
.powered a { color: var(--accent); font-weight: 700; }
.powered a:hover { color: var(--accent-hover); }

/* ---------- stacked subsections: h3 blocks too long for a card row -------------- */
.subsecs { margin-top: 40px; }
.subsec { padding: 30px 0; border-bottom: 1px solid var(--line); }
.subsecs .subsec:first-child { border-top: 1px solid var(--line); }
.subsec h3 { font-size: var(--fs-h3); }
.subsec .body { margin-top: 12px; }
.subsec .body + .body { margin-top: 14px; }
.subsec .tlink { margin-top: 18px; }
.subsec .logomark { margin-bottom: 14px; }
.subsec .logomark svg { height: 24px; }

/* ---------- inline links in running text ---------------------------------------- */
.body a, .list a, .deck a, .page-intro a { color: var(--accent); font-weight: 700; }
.body a:hover, .list a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- form (contact) -------------------------------------------------------- */
.form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 24px; margin-top: 36px; max-width: 760px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.form .hint.is-error { color: var(--danger); font-style: normal; }   /* a refused send: the message beside the button, in the field's red (0.23.1) */
.field label { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--text-2); }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--fs-link); color: var(--text); padding: 13px 16px; border-radius: var(--radius-item);
  border: 1px solid var(--line); background: var(--panel-bg); transition: border-color var(--dur-hover) var(--ease);
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text-3); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-item); }
.form .fcta { grid-column: 1 / -1; margin-top: 10px; }

/* ---------- form card: a form and its introduction on one white card, lifted over the foot of the page header ----
   (0.22.0; the website's contact page, so the form is in sight on arrival). The header takes .peak-hero--lifted, the
   next section .section--lift; both read --lift (168px). Under 900px the copy sits above the form. */
.section--lift { --lift: 168px; position: relative; z-index: 4; padding-top: 0; }
.section--lift .form-card { margin-top: calc(-1 * var(--lift)); }
.form-card {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: start;
  padding: 52px 56px 48px; background: var(--peak-white); color: var(--peak-ink);
  border: 1px solid var(--neutral-100); border-radius: var(--radius-slab); box-shadow: 0 44px 90px -44px rgba(2, 11, 0, 0.45);
}
.form-card-copy h2 { margin: 0; }
.form-card-copy .body { margin: 16px 0 0; }
.form-card-copy h3 { margin: 32px 0 0; font-size: var(--fs-body); font-weight: 700; }
.form-card-copy h3 + .body { margin-top: 8px; }
.form-card .form { margin-top: 0; max-width: none; }

/* ---------- small alignments for generated pages ------------------------------ */
.fcta .tlink { margin-top: 0; }                      /* stacked text links inside a .fcta.lines column */
.wherenext .label { display: block; margin-bottom: 4px; }
.wherenext .cards { margin-top: 28px; }
.stats + .stats { margin-top: 16px; }                /* a second row of stats */
.hint.ph { padding: 14px 18px; border: 1px dashed var(--line); border-radius: var(--radius-item); display: inline-block; }
/* text links inside cards and subsections wrap as text; the arrow is joined to the last word with &nbsp; */
.card .tlink, .subsec .tlink { display: block; }
.card .tlink .arw, .subsec .tlink .arw { display: inline-block; vertical-align: -2px; margin-left: 6px; }

/* ---- css/13-motion.css ---- */
/* ==========================================================================
   13 Motion: shared utilities
   One easing curve everywhere: cubic-bezier(0.2, 0, 0, 1).
   Continuous, pointer-driven motion (glass CTA light, nav glow, disc rim,
   contour tilt, tile stack) runs in JS as eased or spring values; CSS handles
   state transitions only.
   ========================================================================== */

/* page reveal: blocks fade up top to bottom, 50ms apart, capped at 16 steps.
   'backwards' fill hides a block only until its turn, then hands back to its own styles. */
.rv { animation: rv-in var(--dur-reveal) var(--ease) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes rv-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .rv { animation: none; }
  .btn, .cta-line, .tlink, .snav, .sdot, .card.nx, .nx-go, .table th, .table td { transition: none; }
  .table-more[open] > .table { animation: none; }
  .btn-primary.gl-a { transition: none; }
  .btn:active, .snav:active, .sdot:active { transform: none; }
  .typewriter .ch, .typewriter .caret, .peak-logo { transition: none; }
}

/* ---- css/14-a11y.css ---- */
/* ==========================================================================
   14 Accessibility: focus, skip link, and honest fallbacks for materials
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-pill);
  background: var(--peak-green); color: var(--peak-black); font-weight: 700; font-size: var(--fs-caption); text-decoration: none;
  transition: top 160ms var(--ease);
}
.skip-link:focus { top: 16px; outline: 2px solid var(--peak-black); outline-offset: 2px; color: var(--peak-black); }

/* focus ring follows the ground: Peak Green on dark, green-700 on light, Peak Black inside glass capsules */
:is(a, button, [tabindex="0"]):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.btn:focus-visible, .snav:focus-visible, .peak-logo:focus-visible { border-radius: var(--radius-pill); }
.nav-capsule :is(a, button, [tabindex="0"]):focus-visible,
.stack-nav button:focus-visible { outline-color: var(--peak-black); outline-offset: -2px; border-radius: var(--radius-pill); }
.peak-mega :is(a, [tabindex="0"]):focus-visible { border-radius: 12px; }

/* reduced transparency: frost becomes solid */
@media (prefers-reduced-transparency: reduce) {
  :root, .theme-dark { --panel-backdrop: blur(10px); }
  .sc, .stack-nav, .nav-capsule, .slab { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-capsule::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sc { background: #0B1F0A; }
  .stack-nav, .nav-capsule { background: rgba(255,255,255,0.96); }
}
/* more contrast: defined edges */
@media (prefers-contrast: more) {
  .sc { border-color: rgba(255,255,255,0.85); }
  .btn-ghost { box-shadow: inset 0 0 0 1px var(--ghost-line-contrast); }
  .rail li:not(:last-child)::after { background: rgba(164,255,147,0.7); }
}

/* ---- css/15-portal.css ---- */
/* ==========================================================================
   15 Demo Portal
   .section--portal   home section that previews the Demo Portal:
                      copy and three steps left, a portal window mock right
   .portal-window     the mock: title bar, category rail, demo tiles with screenshot slots
   .portal-modal      the sign-in popup (<dialog>): details or email, then a one-time code
   .gate-card         the card inside it; steps swap in place
   .otp-input         the 6-digit code field
   .demo-tile         a demo in the portal: screenshot slot, type, name, line, status chip
   ========================================================================== */

/* ---------- home section ------------------------------------------------------ */
.section--portal { padding: 88px 0 96px; }
/* on the home page it is a dark highlight: slanted edges, fan glows, the white portal window glowing on Peak Black */
.section--portal.section--hl { background: var(--peak-black); padding: 120px 0; }
.section--portal.angle-top { padding-top: 176px; }
.section--portal.angle-bottom { padding-bottom: 200px; }
.section--portal.theme-dark .hl-h { font-size: 46px; }
.section--portal.theme-dark .pp-stage::before { background: rgba(240,165,231,0.30); }
.section--portal.theme-dark .pp-stage::after { background: rgba(0,191,255,0.26); }
.section--portal .fan-glow.b { left: auto; right: -6%; top: 10%; }
.portal-peek { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.portal-peek .hl-eye { margin-bottom: 0; }
.portal-peek h2 { margin-top: 14px; }
.portal-peek .steps { margin-top: 28px; }
.portal-peek .steps .step { padding: 16px 0; }
.portal-peek .fcta { margin-top: 32px; }
.pp-stage { position: relative; }
.pp-stage::before, .pp-stage::after {               /* the light hero's pink and blue, softly behind the window */
  content: ""; position: absolute; border-radius: 50%; filter: blur(60px); z-index: 0; pointer-events: none;
}
.pp-stage::before { width: 70%; height: 70%; left: -12%; top: -10%; background: rgba(240,165,231,0.45); }
.pp-stage::after  { width: 60%; height: 60%; right: -10%; bottom: -12%; background: rgba(0,191,255,0.30); }

.portal-window {
  position: relative; z-index: 1; border-radius: var(--radius-tile); overflow: hidden;
  background: #FFFFFF; border: 1px solid var(--neutral-100);
  box-shadow: 0 30px 80px rgba(2,11,0,0.14), 0 2px 6px rgba(2,11,0,0.05);
}
.pw-bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; background: var(--neutral-50); border-bottom: 1px solid var(--neutral-100); }
.pw-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--neutral-200); }
.pw-bar b { margin-left: 10px; font-size: 12px; font-weight: 700; color: var(--gray-500-cool); }
/* the rail is as wide as its longest label, which keeps the same padding on both sides ("Complete demos", 15 Oct);
   the window reaches --pw-reach past the column on the right so the tiles keep their width (into the wrap's side
   padding; two-column layout only) */
.pw-body { display: grid; grid-template-columns: max-content minmax(0, 1fr); }
@media (min-width: 1081px) { .portal-peek .pp-stage { --pw-reach: 32px; margin-right: calc(-1 * var(--pw-reach)); } }
.pw-side { display: flex; flex-direction: column; gap: 3px; padding: 14px 10px; border-right: 1px solid var(--neutral-100); }
.pw-side span { font-size: 12px; padding: 7px 12px; border-radius: 10px; color: var(--neutral-600); white-space: nowrap; }
.pw-side span.on { background: var(--peak-black); color: var(--peak-green); font-weight: 700; }
.pw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; align-content: start; }
a.demo-tile { text-decoration: none; transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), border-color 240ms var(--ease); }
a.demo-tile:hover { transform: translateY(-2px); border-color: rgba(2,11,0,0.18); box-shadow: 0 10px 24px rgba(2,11,0,0.12); color: var(--peak-ink); }
a.demo-tile:focus-visible { outline: 2px solid var(--peak-black); outline-offset: 2px; border-radius: 16px; }

/* ---------- demo tile (portal window and the portal pages) ---------------------- */
.demo-tile { display: flex; flex-direction: column; border: 1px solid var(--neutral-100); border-radius: 16px; overflow: hidden; background: #FFFFFF; color: var(--peak-ink); }
.demo-shot {                                        /* screenshot slot: swap the gradient for an <img> when the screenshots exist */
  aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, rgba(240,165,231,0.40), rgba(0,191,255,0.22));
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(2,11,0,0.32);
}
.demo-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.demo-shot img.demo-icon { width: 30%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 22%; box-shadow: 0 8px 20px rgba(2,11,0,0.14); }   /* an app icon until screenshots exist */
.demo-tile:nth-child(4n+2) .demo-shot { background: linear-gradient(135deg, rgba(164,255,147,0.50), rgba(0,191,255,0.18)); }
.demo-tile:nth-child(4n+3) .demo-shot { background: linear-gradient(135deg, rgba(0,191,255,0.28), rgba(240,165,231,0.30)); }
.demo-meta { padding: 10px 12px 12px; }
.demo-type { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-700); }
.demo-meta b { display: block; font-size: 13px; font-weight: 700; margin-top: 3px; line-height: 1.25; }
.demo-meta small { display: block; font-size: 11px; color: var(--gray-500-cool); margin-top: 3px; line-height: 1.35; }
/* larger tiles on the portal pages */
.demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.demo-grid .demo-meta p { font-size: 15px; line-height: 1.55; color: var(--neutral-600); margin: 10px 0 0; }
.demo-grid .demo-meta .tlink { margin-top: 16px; }
.demo-grid .demo-meta { padding: 16px 18px 18px; }
.demo-grid .demo-meta b { font-size: 18px; margin-top: 6px; }
.demo-grid .demo-meta small { font-size: 14px; margin-top: 6px; }
.demo-grid .demo-shot { font-size: 11px; }
.demo-chip { display: inline-block; margin-top: 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 5px 10px; border-radius: var(--radius-pill); background: var(--neutral-50); color: var(--neutral-600); }

/* ---------- sign-in popup -----------------------------------------------------------
   A native <dialog class="portal-modal"> opened with showModal(): focus stays inside, Escape closes, the page
   behind is inert. The script adds .is-open a frame after opening and removes it before closing, so the card
   rises in and the backdrop fades. Steps (.gate-step) swap in place inside the card. */
.portal-modal {
  padding: 0; border: 0; background: transparent; color: inherit; overflow: visible;
  width: min(520px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
}
.portal-modal::backdrop { background: rgba(2,11,0,0.46); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 260ms var(--ease); }
.portal-modal.is-open::backdrop { opacity: 1; }
html:has(.portal-modal[open]) { overflow: hidden; }
.gate-card {
  position: relative; max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain;
  padding: 34px 36px 28px; border-radius: 28px;
  background: #FFFFFF; border: 1px solid rgba(255,255,255,0.95);
  box-shadow: 0 40px 100px rgba(2,11,0,0.35), 0 2px 6px rgba(2,11,0,0.08);
  opacity: 0; transform: translateY(14px) scale(0.98);
  transition: opacity 260ms var(--ease), transform 380ms var(--ease);
}
.portal-modal.is-open .gate-card { opacity: 1; transform: none; }
.gate-card::before {                                  /* the light hero's pink and blue, faint, across the top edge */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 120px; pointer-events: none; border-radius: 28px 28px 0 0;
  background: radial-gradient(60% 120% at 0% 0%, rgba(240,165,231,0.28), transparent 70%), radial-gradient(50% 120% at 100% 0%, rgba(0,191,255,0.18), transparent 70%);
}
.gate-card > * { position: relative; }
.pm-close {
  position: absolute; top: 16px; right: 16px; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; border: 0; background: var(--neutral-50); color: var(--peak-ink); cursor: pointer;
  transition: background var(--dur-hover) var(--ease);
}
.pm-close:hover { background: var(--neutral-100); }
.pm-close:active { transform: scale(0.94); }
.gate-step h2 { font-size: 28px; font-weight: 400; line-height: 1.18; letter-spacing: -0.015em; margin: 0; max-width: none; padding-right: 40px; }
.gate-sub { font-size: 15px; line-height: 1.5; color: var(--text-2); margin: 8px 0 0; }
.gate-sub b { color: var(--text); word-break: break-all; }
.gate-card .form { gap: 14px 16px; margin-top: 22px; max-width: none; }
.gate-card .form > .gate-note, .gate-card .form > .gate-switch, .gate-card .form > .gate-row { grid-column: 1 / -1; }
.gate-card .form .fcta { margin-top: 4px; gap: 16px; }
.gate-card .fcta .btn-primary { width: 100%; justify-content: center; }
.gate-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gate-switch { margin: 2px 0 0; font-size: 14px; color: var(--text-2); text-align: center; }
.gate-link { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--accent); cursor: pointer; }
.gate-link:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.gate-link:disabled { color: var(--text-3); cursor: default; text-decoration: none; }
.gate-note { font-size: 12.5px; line-height: 1.5; color: var(--text-3); margin: 0; }
.gate-note a { color: var(--accent); font-weight: 700; }
.gate-status { min-height: 21px; margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.gate-status:empty { margin-top: 0; min-height: 0; }
.gate-status.is-error { color: var(--danger); }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.otp-input { font-size: 30px !important; font-weight: 700; letter-spacing: 0.5em; text-align: center; padding: 12px 0 12px 0.5em !important; font-variant-numeric: tabular-nums; }
.gate-card .btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.gate-card .field input { background: #FFFFFF; }
@media (max-width: 560px) { .gate-card { padding: 28px 22px 22px; } .gate-card .form { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .gate-card, .portal-modal::backdrop { transition: none; } }

@media (prefers-reduced-transparency: reduce) { .portal-modal::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(2,11,0,0.7); } }

/* ---------- demo cards (the demo suite's product cards, same build) ------------------
   Hover anywhere on the card: it lifts 4px, a soft shadow drops under it, the border firms up, a coloured glow (--glow)
   blooms in the lower right, and the black circle CTA slides its label out ("Start the demo").
   Markup:
     <div class="demo-cards">
       <article class="demo-card" style="--glow: rgba(164,255,147,0.6)">
         <div class="demo-card-top"><div class="demo-mark demo-mark-app"><img src="…" alt=""></div><span class="demo-tag">Parent &amp; child</span></div>
         <h3>Family Banking</h3><div class="sub">Dedicated apps for parents and children</div><p>…</p>
         <div class="demo-card-cta"><a class="demo-cta" href="…" aria-label="Open Family Banking">
           <span class="demo-cta-label">Start the demo</span><span class="demo-cta-arrow"><svg…/></span></a></div>
       </article>
     </div> */
.section--demos { padding: 96px 0 120px; }
.section--demos h2 { margin-top: 14px; }
.demo-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.demo-card {
  position: relative; display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: var(--radius-panel);
  background: var(--neutral-50); border: 1px solid var(--neutral-100); overflow: hidden; overflow: clip; isolation: isolate; color: var(--peak-ink);
  /* clip: the glow reaches past the edge, and a hidden box could be scrolled sideways when its link is brought into view */
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
}
.demo-card::after {
  content: ""; position: absolute; inset: auto -30% -40% auto; width: 70%; height: 70%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, var(--glow, rgba(164,255,147,0.55)), transparent); filter: blur(40px);
  opacity: 0; transition: opacity 320ms var(--ease);
}
.demo-card:hover, .demo-card:focus-within { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(2,11,0,0.12); border-color: rgba(2,11,0,0.14); }
.demo-card:hover::after, .demo-card:focus-within::after { opacity: 1; }
.demo-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.demo-mark { width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; background: var(--peak-green); color: var(--peak-black); overflow: hidden; flex: none; }
.demo-mark img, .demo-mark svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.demo-mark.demo-mark-app { background: transparent; border-radius: 21px; }
.demo-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-700); padding: 7px 12px; border-radius: var(--radius-pill); background: rgba(164,255,147,0.35); }
.demo-card h3 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.demo-card .sub { font-size: 14px; font-weight: 700; color: var(--green-700); margin-top: -10px; letter-spacing: 0.02em; }
.demo-card p { margin: 0; font-size: var(--fs-link); line-height: 1.5; color: var(--neutral-600); flex: 1; }
.demo-card-cta { display: flex; justify-content: flex-end; margin-top: 6px; }
.demo-cta { display: inline-flex; align-items: center; height: 56px; border-radius: var(--radius-pill); background: var(--peak-black); color: var(--peak-green); text-decoration: none; overflow: hidden; transition: background 200ms var(--ease), transform 200ms var(--ease); }
.demo-cta:hover { background: #111A0E; color: var(--peak-green); }
.demo-cta:active { transform: scale(0.97); }
.demo-cta-arrow { width: 56px; height: 56px; display: grid; place-items: center; flex: none; color: var(--peak-green); }
.demo-cta-arrow svg { width: 22px; height: 22px; transition: transform 320ms var(--ease); }
.demo-cta-label {
  max-width: 0; padding-left: 0; overflow: hidden; white-space: nowrap; font-size: var(--fs-link); font-weight: 700; color: #FFFFFF;
  opacity: 0; transform: translateX(-6px);
  transition: max-width 380ms var(--ease), padding 380ms var(--ease), opacity 220ms var(--ease) 60ms, transform 380ms var(--ease);
}
.demo-card:hover .demo-cta-label, .demo-card:focus-within .demo-cta-label { max-width: 200px; padding-left: 22px; opacity: 1; transform: none; }
.demo-card:hover .demo-cta-arrow svg, .demo-card:focus-within .demo-cta-arrow svg { transform: translateX(2px); }
.demo-cta:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-pill); }
.demo-also { margin-top: 28px; font-size: var(--fs-link); color: var(--neutral-600); }
.demo-also .tlink { margin-top: 0; }

/* a light heading with its key phrase in bold ("Pick a product. <b>Hold it in your hand.</b>") */
.h2--light { font-weight: 300; line-height: 1.08; text-wrap: balance; }
.h2--light b { font-weight: 700; }

/* ---------- split band: copy left, numbered steps right (the demo suite's "How the demos work") ----------
   Dark as .section--band, or light as a plain .section--split; the steps follow the theme. */
.section--split > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 64px; align-items: start; }
.section--split .hl-h { font-size: 44px; line-height: 1.08; }
.band-steps { display: flex; flex-direction: column; }
.band-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; padding: 26px 0; border-top: 1px solid var(--line); }
.band-step:last-child { border-bottom: 1px solid var(--line); }
.band-num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--peak-black); background: var(--peak-green); }
.band-step h4 { margin: 0 0 8px; font-size: 22px; font-weight: 700; color: var(--text); }
.band-step p { margin: 0; font-size: var(--fs-link); line-height: 1.5; color: var(--text-2); }

@media (max-width: 1000px) {
  .demo-cards { grid-template-columns: 1fr; }
  .section--split > .wrap { grid-template-columns: 1fr; gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-card, .demo-card::after, .demo-cta, .demo-cta-label, .demo-cta-arrow svg { transition: none; }
  .demo-card:hover, .demo-card:focus-within { transform: none; }
}

/* ---------- the signed-in line on the portal home ---------- */
.portal-who { margin: 22px 0 0; font-size: 14px; color: var(--text-2); }
.portal-who b { color: var(--text); font-weight: 700; }
.portal-who .gate-link { margin-left: 6px; }
.peak-hero--page .page-title .grad { font-weight: 700; }

/* ---------- demo landing: the app icon above the eyebrow ---------- */
.demo-hero-mark { width: 72px; height: 72px; border-radius: 18px; margin-bottom: 22px; box-shadow: 0 12px 30px rgba(2,11,0,0.16); }

/* ---------- demo switcher: the portal's own navigation (the demo suite's "Choose a demo" menu, same build) ----------
   On pages inside the portal the main navigation gives way to this: the Peak logo left, the switcher right.
   <nav class="peak-nav peak-nav--portal" aria-label="Demo Portal">
     <a class="peak-logo" href="/">…</a>
     <div class="demo-switcher">
       <button class="dsw-trigger" aria-haspopup="true" aria-expanded="false" aria-controls="dsw-menu">glyph, label, chevron</button>
       <div class="dsw-menu" id="dsw-menu"> .dsw-cap, a.dsw-item × n (the current one aria-current with .dsw-active), .dsw-sep, back, sign out </div>
     </div>
   </nav>
   Opening, closing, outside click and Escape: the website's static/portal.js. */
.peak-nav--portal { justify-content: space-between; }
.peak-nav--portal .demo-switcher { margin-left: auto; }     /* the switcher keeps the right edge when the language switcher follows it */
.peak-nav--portal .nav-lang { margin-left: 14px; }
.demo-switcher { position: relative; }
.dsw-trigger, .dsw-menu {
  background: rgba(255,255,255,0.96); border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 18px 44px -18px rgba(0,0,0,0.28);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.dsw-trigger {
  display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px 0 8px; border-radius: 18px;
  font: inherit; color: var(--peak-ink); cursor: pointer; text-align: left;
}
.dsw-trigger:active { transform: scale(0.98); }
.dsw-glyph { width: 36px; height: 36px; border-radius: 10px; background: var(--neutral-50); display: grid; place-items: center; flex: none; }
.dsw-glyph svg { fill: var(--green-700); }
.dsw-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.dsw-label small { font-size: 12px; color: #5F6A6C; }
.dsw-label b { font-size: 14px; font-weight: 700; white-space: nowrap; }
.dsw-chev { display: flex; margin-left: 2px; color: #5F6A6C; transition: transform 200ms var(--ease); }
.demo-switcher.is-open .dsw-chev { transform: rotate(180deg); }
.dsw-menu {
  position: absolute; top: 60px; right: 0; min-width: 264px; padding: 6px; border-radius: 16px;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: top right;
  transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 0s linear 200ms;
}
.demo-switcher.is-open .dsw-menu { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms ease-out, transform 200ms ease-out; }
.dsw-cap { font-size: 12px; color: #5F6A6C; padding: 8px 10px 6px; }
.dsw-item {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; padding: 0 10px 0 8px; border-radius: 12px;
  color: var(--peak-ink); font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; text-align: left;
  background: none; border: 0; cursor: pointer;
}
.dsw-item:hover, .dsw-item:focus-visible { background: rgba(2,11,0,0.05); color: var(--peak-ink); outline: none; }
.dsw-item[aria-current] { background: #FFFFFF; cursor: default; }
.dsw-item img { width: 32px; height: 32px; border-radius: 9px; display: block; flex: none; }
.dsw-name { flex: 1; }
.dsw-go { display: flex; color: #5F6A6C; }
.dsw-active { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: #EBFFE9; color: #2C8100; font-size: 12px; font-weight: 700; }
.dsw-active i { width: 6px; height: 6px; border-radius: 3px; background: #2C8100; }
.dsw-sep { height: 1px; margin: 6px 4px; background: var(--neutral-100); }
.dsw-back { color: #5F6A6C; font-weight: 700; }
.dsw-ico { width: 32px; height: 32px; display: grid; place-items: center; flex: none; }
@media (prefers-reduced-motion: reduce) { .dsw-menu, .dsw-chev { transition: none; } }

/* ---- css/16-ecosystem.css ---- */
/* ==========================================================================
   16 Ecosystem map
   .section--eco      the dark band that carries the map (slanted edges, fan glows)
   .eco-map           the interactive map of what the products are built from:
                      the framework band on top, feature areas in four numbered
                      columns around the products in the middle, the platform band
                      underneath, and a detail panel. Behaviour: js/modules/eco-map.js
   .eco-bar           legend, the "every module" switch and the tour button
   .eco-band          a glass band of pills (.eco-band--core for the platform)
   .eco-node          a feature area: code tile, name, a line, who uses it, its modules
   .eco-prod          a product in the hub: app icon, name, line, its numbers
   .eco-detail        the panel under the map that explains the current focus
   States on nodes and products: .is-sel (picked), .is-lit (used by the focus),
   .is-dim (not part of it). Edges: .eco-edge.is-hi with a flowing .eco-flow.
   ========================================================================== */

.section--eco { position: relative; background: var(--peak-black); padding: 120px 0; overflow: hidden; overflow: clip; }
.section--eco.angle-top { padding-top: 176px; }
.section--eco.angle-bottom { padding-bottom: 200px; }
.section--eco > .wrap { position: relative; z-index: 1; }
.section--eco .fan-glow.b { left: auto; right: -10%; top: 6%; }
.section--eco .fan-glow.m { right: auto; left: 30%; top: auto; bottom: -30%; opacity: 0.55; }
.wrap--wide { max-width: 1440px; --wrap-pad: 48px; }
.eco-head { max-width: 820px; margin-bottom: 56px; }
.eco-head .hl-h { margin-top: 0; }
.eco-head .hl-h b { display: block; }   /* the bold phrase on its own line: "Different solutions." / "The same building blocks." */
.eco-head .hl-p { max-width: 680px; }

.eco-map {
  position: relative;
  --eco-card: #0A120A;                 /* opaque, so edges pass behind the cards and show only in the gutters */
  --eco-card-2: #0E170E;
  --eco-edge: rgba(255,255,255,0.18);
  --eco-on: var(--peak-green);
  --eco-rel: var(--peak-blue);
}

/* While the pointer or keyboard focus is inside a map (eco-map.js sets the class), the page does no scroll
   anchoring at all: the panels change height as the focus moves, and the browser would otherwise scroll the page
   to keep some anchor element in place, which reads as the whole section jumping. */
html.eco-noanchor, html.eco-noanchor body { overflow-anchor: none; }

/* ---------- bar: legend, switch, tour ------------------------------------------- */
.eco-bar { display: flex; justify-content: space-between; align-items: center; gap: 18px 28px; flex-wrap: wrap; margin-bottom: 22px; }
.eco-legend { display: flex; gap: 26px; flex-wrap: wrap; font-size: var(--fs-caption); color: var(--text-2); }
.eco-legend span { display: inline-flex; align-items: center; gap: 10px; }
.eco-key { width: 26px; height: 16px; border-radius: 6px; flex-shrink: 0; }
.eco-key--on { border: 1.5px solid var(--eco-on); box-shadow: 0 0 12px rgba(164,255,147,0.45); background: var(--eco-card-2); }
.eco-key--off { border: 1px solid rgba(255,255,255,0.16); background: var(--eco-card); opacity: 0.5; }
.eco-key--line { width: 34px; height: 2px; border-radius: 2px; background: var(--eco-on); box-shadow: 0 0 6px rgba(164,255,147,0.6); }
.eco-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.eco-switch { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-caption); font-weight: 700; color: var(--text); cursor: pointer; }
.eco-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.eco-switch-track { position: relative; width: 40px; height: 24px; border-radius: var(--radius-pill); background: var(--glass); box-shadow: inset 0 0 0 1px var(--ghost-line); transition: background var(--dur-hover) var(--ease); }
.eco-switch-track::after { content: ""; position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-2); transition: transform var(--dur-layout) var(--ease), background var(--dur-hover) var(--ease); }
.eco-switch input:checked + .eco-switch-track { background: var(--eco-on); box-shadow: none; }
.eco-switch input:checked + .eco-switch-track::after { transform: translateX(16px); background: var(--peak-black); }
.eco-switch input:focus-visible + .eco-switch-track { outline: 2px solid var(--focus); outline-offset: 3px; }
.eco-tour { display: inline-flex; align-items: center; gap: 10px; }
.eco-tour svg { width: 14px; height: 14px; }
.eco-tour .i-stop, .eco-tour[aria-pressed="true"] .i-play { display: none; }
.eco-tour[aria-pressed="true"] .i-stop { display: block; }

/* ---------- bands ----------------------------------------------------------------- */
.eco-band {
  display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap;
  padding: 16px 20px 16px 28px; border-radius: 40px;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--line);
}
.eco-band .label { flex-shrink: 0; min-width: 210px; color: var(--text-2); }
.eco-band--core { background: linear-gradient(90deg, rgba(164,255,147,0.10), rgba(0,191,255,0.07) 60%, rgba(240,165,231,0.07)); }
.eco-band--core .label { color: var(--accent); }
.eco-pills { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: 1; min-width: 0; }
.eco-pill { font-size: 13px; font-weight: 700; line-height: 1; padding: 9px 14px; border-radius: var(--radius-pill); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.eco-pill--stat { color: var(--peak-black); background: var(--eco-on); box-shadow: none; }
.eco-pill-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.eco-pgroup { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }   /* a platform group wraps as one unit */
.eco-band--core .eco-pills { gap: 10px 26px; }
.eco-pill-group { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-right: 4px; }

/* ---------- columns ----------------------------------------------------------------- */
.eco-cols {
  position: relative; display: grid; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px; padding: 40px 0 36px;
}
.eco-edges { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 0; overflow-anchor: none; }   /* redrawn on every change: never a scroll anchor */
.eco-col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; transition: opacity var(--dur-layout) var(--ease); }
.eco-col--hub { align-self: center; }
.eco-prods { display: flex; flex-direction: column; gap: 12px; }
.eco-col-head { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-bottom: 6px; transition: opacity var(--dur-layout) var(--ease); }
.eco-num { width: 34px; height: 34px; border-radius: 50%; background: var(--eco-on); color: var(--peak-black); display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.eco-num--hub { background: var(--peak-white); }
.eco-num--hub svg { width: 16px; height: 16px; }
.eco-col-name { font-size: 16px; font-weight: 700; line-height: 1.25; }
.eco-col.is-dim .eco-col-head { opacity: 0.4; }

/* ---------- a feature area ------------------------------------------------------------ */
.eco-node {
  position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 4px 12px;
  width: 100%; padding: 12px 14px 12px 12px; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  border-radius: var(--radius-item); border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, var(--eco-card-2), var(--eco-card));
  transition: opacity var(--dur-layout) var(--ease), border-color var(--dur-hover) var(--ease), box-shadow var(--dur-layout) var(--ease), transform var(--dur-layout) var(--ease);
}
.eco-node:hover { border-color: rgba(255,255,255,0.40); }
.eco-node:active { transform: scale(0.985); }
.eco-node:focus-visible, .eco-prod:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.eco-code {
  width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: var(--radius-icon);
  background: rgba(164,255,147,0.10); color: var(--eco-on); box-shadow: inset 0 0 0 1px rgba(164,255,147,0.34);
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; line-height: 1;
}
.eco-node-t { display: flex; flex-direction: column; min-width: 0; padding-top: 1px; }
.eco-node-t b { font-size: var(--fs-caption); font-weight: 700; line-height: 1.25; text-wrap: balance; }
.eco-node-t small { font-size: 12px; color: var(--text-3); line-height: 1.35; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* one line whatever it says, so a card never changes height */
.eco-users { grid-column: 2; display: flex; gap: 5px; margin-top: 6px; }
.eco-users img { width: 16px; height: 16px; border-radius: 5px; opacity: 0.18; filter: grayscale(1); transition: opacity var(--dur-layout) var(--ease), filter var(--dur-layout) var(--ease); }
.eco-users img.is-on { opacity: 1; filter: none; }
.eco-mods { grid-column: 1 / -1; display: none; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.eco-map.show-mods .eco-mods, .eco-node.is-open .eco-mods { display: flex; }

/* version 2: each card can open on its own. The button sits in the card's top-right corner, shows on hover or focus
   (always on touch screens), and turns into an X while the card is open. With "Show every module" on, every card is
   open already, so the buttons step aside. */
.eco-node-wrap { position: relative; }
.eco-node-wrap .eco-node-t { padding-right: 30px; }
.eco-node-x {
  position: absolute; top: 9px; right: 9px; z-index: 2; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,0.18); cursor: pointer;
  background: var(--eco-card-2); color: var(--text-2); opacity: 0;
  transition: opacity var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease);
}
.eco-node-x svg { width: 18px; height: 18px; }
.eco-node-x .i-close, .eco-node-x[aria-expanded="true"] .i-open { display: none; }
.eco-node-x[aria-expanded="true"] .i-close { display: block; }
.eco-node-wrap:hover .eco-node-x, .eco-node-x:focus-visible, .eco-node-x[aria-expanded="true"] { opacity: 1; }
.eco-node-x:hover { color: var(--peak-black); background: var(--peak-green); border-color: var(--peak-green); }
.eco-node-x:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.eco-node-x:active { transform: scale(0.94); }
.eco-map.show-mods .eco-node-x { display: none; }
@media (hover: none) { .eco-node-x { opacity: 1; } }
.eco-mod { font-size: 11px; font-weight: 700; line-height: 1.2; padding: 5px 8px; border-radius: var(--radius-pill); color: var(--text-3); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); transition: color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease), opacity var(--dur-hover) var(--ease); }
.eco-mod.is-on { color: var(--eco-on); box-shadow: inset 0 0 0 1px rgba(164,255,147,0.55); }
.eco-map.has-focus .eco-mod:not(.is-on) { opacity: 0.45; }

.eco-node.is-lit { border-color: rgba(164,255,147,0.70); box-shadow: 0 0 0 1px rgba(164,255,147,0.25), 0 0 30px rgba(164,255,147,0.16); }
.eco-node.is-sel { border-color: var(--eco-on); box-shadow: 0 0 0 1px var(--eco-on), 0 0 40px rgba(164,255,147,0.32); transform: translateY(-1px); }
.eco-node.is-dim { opacity: 0.30; }
.eco-node.is-shared { border-color: rgba(0,191,255,0.75); box-shadow: 0 0 28px rgba(0,191,255,0.22); }

/* ---------- a product in the hub ---------------------------------------------------------- */
.eco-prod {
  position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 4px 14px;
  width: 100%; padding: 14px 16px 14px 14px; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  border-radius: 18px; border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(160deg, #142014, var(--eco-card) 70%);
  transition: opacity var(--dur-layout) var(--ease), border-color var(--dur-hover) var(--ease), box-shadow var(--dur-layout) var(--ease), transform var(--dur-layout) var(--ease);
}
.eco-prod:hover { border-color: rgba(255,255,255,0.45); }
.eco-prod:active { transform: scale(0.985); }
.eco-prod img { width: 46px; height: 46px; border-radius: 13px; display: block; box-shadow: 0 6px 16px rgba(0,0,0,0.35); }
.eco-prod-t { display: flex; flex-direction: column; min-width: 0; }
.eco-prod-t b { font-size: 16px; font-weight: 700; line-height: 1.2; }
.eco-prod-t small { font-size: 12.5px; color: var(--text-3); line-height: 1.35; margin-top: 4px; }
.eco-prod-n { grid-column: 2; font-size: 12px; font-weight: 700; color: var(--eco-on); white-space: nowrap; margin-top: 2px; opacity: 0; transition: opacity var(--dur-layout) var(--ease); }   /* its line is always reserved: no height change */
.eco-prod.is-sel .eco-prod-n, .eco-prod.is-lit .eco-prod-n { opacity: 1; }
.eco-prod.is-sel { border-color: var(--eco-on); box-shadow: 0 0 0 1px var(--eco-on), 0 0 48px rgba(164,255,147,0.34); transform: translateY(-1px); }
.eco-prod.is-lit { border-color: rgba(0,191,255,0.75); box-shadow: 0 0 30px rgba(0,191,255,0.22); }
.eco-prod.is-dim { opacity: 0.34; }
.eco-hub-hint { font-size: 12px; color: var(--text-3); text-align: center; margin-top: 4px; transition: opacity var(--dur-layout) var(--ease); }
.eco-map.has-focus .eco-hub-hint { opacity: 0; }

/* ---------- edges -------------------------------------------------------------------------- */
.eco-edge path { fill: none; stroke: var(--eco-edge); stroke-width: 1.5; }
.eco-edge path:first-child { stroke: var(--eco-on); stroke-width: 2; filter: drop-shadow(0 0 5px rgba(164,255,147,0.55)); opacity: 0.9; }
.eco-edge--rel path:first-child { stroke: var(--eco-rel); filter: drop-shadow(0 0 5px rgba(0,191,255,0.5)); }
.eco-edge { animation: eco-draw 520ms var(--ease) both; }
@keyframes eco-draw { from { opacity: 0; } to { opacity: 1; } }
.eco-arrow { fill: var(--peak-white); }
.eco-flow { fill: none; stroke: var(--peak-white) !important; stroke-width: 2.2 !important; stroke-dasharray: 2 16; stroke-linecap: round; opacity: 0.85; animation: eco-flow 1.1s linear infinite; filter: none !important; }
@keyframes eco-flow { to { stroke-dashoffset: -18; } }

/* ---------- detail panel --------------------------------------------------------------------- */
.eco-detail { margin-top: 26px; padding: 32px 36px; border-radius: var(--radius-panel); min-height: 236px; }
.eco-detail-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; }
.eco-detail .hl-eye { margin-bottom: 12px; }
.eco-detail-h { font-size: var(--fs-deck); line-height: var(--lh-deck); letter-spacing: -0.01em; margin: 0; max-width: 580px; color: var(--text); text-wrap: pretty; }
.eco-detail-title { display: flex; align-items: center; gap: 14px; }
.eco-detail-title h3 { margin: 0; font-size: 28px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.15; }
.eco-detail-title img { width: 52px; height: 52px; border-radius: 15px; }
.eco-detail-title .eco-code { width: 52px; height: 52px; border-radius: var(--radius-item); font-size: 16px; }
.eco-detail p.hl-p { margin-top: 14px; max-width: 560px; }
.eco-stats { display: flex; gap: 32px; margin-top: 22px; flex-wrap: wrap; }
.eco-stats div { display: flex; flex-direction: column; }
.eco-stats b { font-size: 34px; font-weight: 300; line-height: 1; letter-spacing: -0.02em; color: var(--text); }
.eco-stats b em { font-style: normal; color: var(--text-3); font-size: 18px; margin-left: 4px; }
.eco-stats span { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-top: 8px; }
.eco-detail .fcta { margin-top: 24px; display: flex; gap: 14px 22px; align-items: center; flex-wrap: wrap; }
.eco-detail-side .label { margin-bottom: 12px; }
.eco-list { list-style: none; margin: 0; padding: 0; }
.eco-list li { display: flex; justify-content: space-between; align-items: center; gap: 14px; font-size: var(--fs-caption); padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--text-2); }
.eco-list li:last-child { border-bottom: 0; }
.eco-list button { font: inherit; font-weight: 700; color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; display: inline-flex; align-items: center; gap: 10px; }
.eco-list button:hover { color: var(--accent); }
.eco-list .eco-code { width: 24px; height: 24px; border-radius: 7px; font-size: 9px; }
.eco-list small { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.eco-list--cols { columns: 2; column-gap: 28px; }
.eco-list--cols li { break-inside: avoid; }
.eco-mx { display: flex; flex-direction: column; }
.eco-mx-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 58px); align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-caption); color: var(--text-2); }
.eco-mx-row:last-child { border-bottom: 0; }
.eco-mx-head { padding-top: 0; }
.eco-mx-head span { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.eco-mx-head img { width: 22px; height: 22px; border-radius: 6px; }
.eco-mx-row i { justify-self: center; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.18); }
.eco-mx-row i.is-on { background: var(--eco-on); box-shadow: 0 0 10px rgba(164,255,147,0.6); }
.eco-dots { display: flex; gap: 8px; margin-top: 22px; }
.eco-dot { width: 26px; height: 6px; border-radius: 3px; border: 0; padding: 0; background: rgba(255,255,255,0.18); cursor: pointer; transition: background var(--dur-hover) var(--ease), width var(--dur-layout) var(--ease); }
.eco-dot.is-on { background: var(--eco-on); width: 40px; }
.eco-detail-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.eco-detail-actions .btn:disabled { opacity: 0.4; cursor: default; }

/* ---------- tabs layout (V2): the products as tabs on top, the areas across the full width --------
   .eco-stage holds the tabs, the tab panel and the columns, and the wires are measured against it. */
.eco-stage { position: relative; }
.eco-stage > .eco-edges { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 0; overflow-anchor: none; }
/* The tabs stick under the site bar while the map scrolls, up to the end of the area panel (the stage's end). Once
   they stick (eco-map.js sets .is-stuck), a dark backdrop fades in behind them, so what scrolls underneath never
   shows between the cards; it reaches up behind the site bar and out to the wrap's edges. */
.eco-tabs {
  position: sticky; top: calc(var(--nav-h) + 6px); z-index: 6;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.eco-tabs::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: calc(-1 * (var(--nav-h) + 6px)); bottom: -20px; left: calc(-1 * var(--wrap-pad)); right: calc(-1 * var(--wrap-pad));
  background: rgba(2,11,0,0.90); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border-radius: 0 0 28px 28px; box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 20px 40px rgba(0,0,0,0.45);
  opacity: 0; transition: opacity var(--dur-hover) var(--ease);
}
.eco-tabs.is-stuck::before { opacity: 1; }
.eco-tab-short { display: none; font-style: normal; }
/* The tabs are light cards and never fade, so every product stays fully readable. What is active is marked, not
   what is not: Peak green for the product the map shows, the green marker under the selected tab, and a blue ring
   with a check (the colour of the lines in that view) on each product that uses the area in focus. */
.eco-tab {
  grid-template-columns: 52px minmax(0, 1fr); padding: 18px 18px 18px 16px; border-radius: 20px;
  background: var(--neutral-0); border: 1px solid var(--neutral-0); color: var(--peak-ink);
  box-shadow: 0 1px 2px rgba(2,11,0,0.25);
}
.eco-tab:hover { background: var(--neutral-50); border-color: var(--neutral-50); }
.eco-tab img { width: 52px; height: 52px; border-radius: 15px; box-shadow: none; }
.eco-tab .eco-prod-t { padding-right: 18px; }   /* room for the check badge */
.eco-tab .eco-prod-t b { font-size: 17px; color: var(--peak-ink); }
.eco-tab .eco-prod-t small { color: var(--neutral-600); }
.eco-tab .eco-prod-n { max-height: none; opacity: 1; margin-top: 6px; color: var(--green-700); }
.eco-tab.is-dim { opacity: 1; }
.eco-tab.is-sel { background: var(--peak-green); border-color: var(--peak-green); box-shadow: 0 0 0 1px var(--peak-green), 0 12px 34px rgba(164,255,147,0.32); transform: translateY(-2px); }
.eco-tab.is-sel .eco-prod-t small, .eco-tab.is-sel .eco-prod-n { color: var(--peak-black); }
.eco-tab.is-lit { border-color: var(--peak-blue); box-shadow: 0 0 0 3px var(--peak-blue), 0 0 28px rgba(0,191,255,0.30); }
.eco-tab-check {
  position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--peak-blue); color: var(--peak-black);
  opacity: 0; transform: scale(0.6); transition: opacity var(--dur-hover) var(--ease), transform var(--dur-layout) var(--ease);
}
.eco-tab-check svg { width: 14px; height: 14px; }
.eco-tab.is-lit .eco-tab-check { opacity: 1; transform: scale(1); }
.eco-tab-ink {                                      /* one marker for the selected tab; eco-map.js slides it across */
  position: absolute; left: 0; bottom: -11px; width: 0; height: 3px; border-radius: 3px; pointer-events: none;
  background: var(--eco-on); box-shadow: 0 0 12px rgba(164,255,147,0.7); opacity: 0;
  transition: opacity var(--dur-hover) var(--ease);
}
.eco-tab-ink.is-ready { transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1), width 460ms cubic-bezier(0.22, 1, 0.36, 1), opacity var(--dur-hover) var(--ease); }
.eco-tab:focus-visible { outline: 2px solid var(--peak-green); outline-offset: 4px; }
/* the tab panel, compact: the story on the left, its links (or the tour's dots and buttons) on the right */
.eco-tabpanel {
  position: relative; z-index: 1; margin-top: 22px; padding: 22px 28px 22px 32px; border-radius: var(--radius-panel);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 48px; align-items: center;
}
.eco-tp-side { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.eco-tp-story { font-size: 17px; line-height: 1.55; color: var(--text-2); margin: 0; max-width: 860px; text-wrap: pretty; min-height: calc(1.55em * 2); }   /* two lines reserved, so switching tabs keeps the panel's height */
.eco-tp-story b { color: var(--text); font-weight: 700; }
.eco-tabpanel .fcta { margin-top: 0; display: flex; gap: 14px 22px; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
.eco-tabpanel .eco-dots { margin-top: 0; }
.eco-tabpanel .eco-detail-actions { margin-top: 0; flex-wrap: nowrap; }
.eco-map--tabs .eco-bar { margin-bottom: 26px; }
.eco-actions--below { position: relative; z-index: 1; justify-content: flex-end; margin: 0 0 18px; }   /* the switch and the tour, right under the area cards */
.eco-map--tabs .eco-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px; padding: 70px 0 30px; }
.eco-map--tabs .eco-detail { margin-top: 8px; }
.eco-map--tabs .eco-band { margin-top: 14px; }
.eco-map--tabs .eco-stage + .eco-band { margin-top: 28px; }

/* wires: tab panel, bus, gutter spines, ticks into the cards; round dots at every joint */
.eco-wire-set { filter: drop-shadow(0 0 5px rgba(164,255,147,0.55)); animation: eco-draw 520ms var(--ease) both; }
.eco-wire-set--rel { filter: drop-shadow(0 0 5px rgba(0,191,255,0.5)); }
.eco-wire-set path { fill: none; }   /* the flow overlay too: a filled path would close itself with a diagonal */
.eco-wire-line { fill: none; stroke: var(--eco-on); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.eco-wire-set--rel .eco-wire-line { stroke: var(--eco-rel); }
.eco-node-dot { fill: var(--peak-black); stroke: var(--eco-on); stroke-width: 2; }
.eco-node-dot--end { fill: var(--eco-on); }
.eco-wire-set--rel .eco-node-dot { stroke: var(--eco-rel); }
.eco-wire-set--rel .eco-node-dot--end { fill: var(--eco-rel); }

/* ---------- smaller screens: the hub on top, areas below, no edges --------------------------- */
@media (max-width: 1240px) {
  .eco-cols { gap: 32px; }
  .wrap--wide { --wrap-pad: 32px; }
}
@media (max-width: 1080px) {
  .eco-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .eco-col--hub { grid-column: 1 / -1; order: -1; align-self: stretch; }
  .eco-col--hub .eco-prods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .eco-edges { display: none; }
  .eco-band .label { min-width: 0; width: 100%; }
  .eco-detail-grid { grid-template-columns: 1fr; gap: 28px; }
  .eco-tabs { gap: 10px; }
  .eco-tab { grid-template-columns: 40px minmax(0, 1fr); padding: 12px; gap: 2px 10px; border-radius: 16px; }
  .eco-tab img { width: 40px; height: 40px; border-radius: 11px; }
  .eco-tab .eco-prod-t b { font-size: 15px; }
  .eco-tab .eco-prod-t small { display: none; }
  .eco-tab .eco-prod-n { font-size: 11.5px; margin-top: 4px; }
  .eco-tab-check { top: 8px; right: 8px; width: 20px; height: 20px; }
  .eco-tab-check svg { width: 12px; height: 12px; }
  .eco-tabpanel { grid-template-columns: 1fr; }
  .eco-tp-side { align-items: flex-start; }
  .eco-map--tabs .eco-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; padding-top: 36px; }
  .eco-stage > .eco-edges { display: none; }
}
@media (max-width: 720px) {
  .wrap--wide { --wrap-pad: 20px; }
  .eco-cols { grid-template-columns: 1fr; }
  .eco-col--hub .eco-prods { grid-template-columns: 1fr; }
  .eco-band { border-radius: 26px; padding: 16px 18px; }
  .eco-legend { gap: 8px 18px; font-size: 13px; }
  .eco-tabs { gap: 8px; top: calc(var(--nav-h) + 4px); }
  .eco-tab { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 10px 4px 11px; gap: 6px; border-radius: 14px; }
  .eco-tab img { width: 34px; height: 34px; border-radius: 10px; }
  .eco-tab .eco-prod-t { padding-right: 0; align-items: center; }
  .eco-tab .eco-prod-t b, .eco-tab .eco-prod-n { display: none; }
  .eco-tab-short { display: block; font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--peak-ink); }
  .eco-tab-check { top: 5px; right: 5px; width: 18px; height: 18px; }
  .eco-tab-check svg { width: 11px; height: 11px; }
  .eco-tab-ink { bottom: -8px; }
  .eco-tabpanel { padding: 22px; }
  .eco-tabpanel .fcta, .eco-tabpanel .eco-detail-actions { flex-wrap: wrap; white-space: normal; }   /* the narrowest phones: the two links wrap */
  .eco-map--tabs .eco-cols { grid-template-columns: 1fr; }
  .eco-detail { padding: 26px 22px; }
  .eco-list--cols { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .eco-flow { animation: none; opacity: 0; }
  .eco-edge, .eco-wire-set { animation: none; }
  .eco-tab-ink.is-ready { transition: opacity var(--dur-hover) var(--ease); }
}

/* ---- css/17-case-study.css ---- */
/* ==========================================================================
   17 Case studies
   .case-chapters   the story in three numbered columns: the challenge, the
                    solution, the result. Each .case-ch has a number and a label
                    (.case-k), a title (h3) and points (.case-pt, bold lead-in)
   .case-compare    before and after, side by side (.case-side, .case-side--after)
   .case-nums       two key numbers on a case study card (.card.nx)
   .demo-mark--ai   the agentic AI demos' mark: the assistant sparkle on Peak green
                    (app demos use their app icon, .demo-mark-app)
   .dsw-ai          the same mark, small, in the demo switcher
   Stacks to one column under 900px.
   ========================================================================== */

/* ---------- the three chapters ------------------------------------------------- */
.case-chapters { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 48px; }
.case-ch { padding: 0 34px; border-left: 1px solid var(--line); }
.case-ch:first-child { padding-left: 0; border-left: 0; }
.case-ch:last-child { padding-right: 0; }
.case-k { display: flex; align-items: baseline; gap: 12px; }
.case-k .no { font-size: var(--fs-stat); font-weight: 700; line-height: 1; letter-spacing: -0.01em; color: var(--accent); }
.case-k .lb { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-3); }
.case-ch h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.22; margin: 22px 0 0; text-wrap: balance; }
.case-pt { font-size: var(--fs-body-sm); line-height: 1.6; color: var(--text-2); margin: 16px 0 0; }
.case-pt b { color: var(--text); font-weight: 700; }

/* the Powered by and Related lines under the story */
.case-chapters + .powered, .case-compare + .powered { margin-top: 48px; }
.powered + .powered { margin-top: 6px; }

/* ---------- before and after ----------------------------------------------------- */
.case-compare { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; margin-top: 40px; }
.case-side { padding: 28px 30px; border: 1px solid var(--line); border-radius: var(--radius-panel); }
.case-side .lb { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-3); }
.case-side--after { border-color: var(--accent); }
.case-side--after .lb { color: var(--accent); }
.case-side p { font-size: var(--fs-body-sm); line-height: 1.6; color: var(--text-2); margin: 12px 0 0; }

/* ---------- numbers on a case study card ----------------------------------------- */
.case-nums { display: flex; gap: 28px; margin-top: 22px; }
.case-nums .n { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -0.01em; color: var(--accent); white-space: nowrap; }
.case-nums .c { font-size: 13px; line-height: 1.4; color: var(--text-3); margin-top: 8px; max-width: 150px; }

/* ---------- the agentic AI demos' mark -------------------------------------------- */
.demo-mark--ai svg { width: 54%; height: 54%; }
.dsw-ai { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--peak-green); color: var(--peak-black); }
.dsw-ai svg { width: 18px; height: 18px; }
.dsw-item + .dsw-cap { margin-top: 8px; }   /* the second group's caption */

@media (max-width: 900px) {
  .case-chapters, .case-compare { grid-template-columns: minmax(0,1fr); }
  .case-ch, .case-ch:first-child, .case-ch:last-child { padding: 28px 0 0; border-left: 0; }
  .case-ch + .case-ch { margin-top: 28px; border-top: 1px solid var(--line); }
  .case-nums { gap: 20px; }
  .case-nums > div { flex: 1 1 0; min-width: 0; }   /* the two numbers share the row */
}

/* ---- css/18-responsive.css ---- */
/* ==========================================================================
   18 Responsive: tablets and phones
   The system was drawn at desktop width; this layer, last in the cascade, fits it to smaller screens.
     Tablet  1080px and down   tighter gutters and type, two-column grids where four were, media columns stack,
                               the disc becomes a rounded panel
     Phone    720px and down   20px gutters, a phone type scale, every row of cards, stats and proof stacks,
                               the tile stack shallows, the footer folds
     Small    480px and down   the last two-column grids go to one
   Most of it is token overrides (sizes, gutters, the bar, the separator rise), so components follow on their
   own; the rules below handle layout that tokens cannot. The navigation (under 1280px: the menu button and
   sheet) lives in 10-nav.css, the ecosystem map and case studies carry their own breakpoints.
   ========================================================================== */

/* ---------------------------------------------------------------- tablet */
@media (max-width: 1080px) {
  .form-card { gap: 28px 40px; padding: 44px 40px 40px; }
  :root {
    --wrap-pad: 48px; --nav-pad-x: 32px;
    --fs-display: 64px; --fs-highlight: 44px; --fs-page-title: 44px; --fs-h2: 38px;
    --fs-stat-xl: 60px; --fs-stat-l: 48px; --fs-stat: 38px; --fs-fstat: 30px;
    --angle-rise: 64px;
  }
  /* fixed-size headlines follow the scale */
  .section--stack .hl-h, .section--portal.theme-dark .hl-h { font-size: var(--fs-highlight); }
  .section--split .hl-h { font-size: var(--fs-h2); }

  /* four across becomes two (rows count real cards and stat cells only: the glass module puts .panel-glow first) */
  .cards.four, .stats:not(.two):not(.three) { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cards.four .card:nth-child(n of .card) { border-left: 0; border-top: 0; }
  .cards.four .card:nth-child(2n of .card) { border-left: 1px solid var(--line); }
  .cards.four .card:nth-child(n+3 of .card) { border-top: 1px solid var(--line); }
  .stats:not(.two):not(.three) > div:nth-child(n of :not(.panel-glow)) { border-left: 0; border-top: 0; }
  .stats:not(.two):not(.three) > div:nth-child(2n of :not(.panel-glow)) { border-left: 1px solid var(--line); }
  .stats:not(.two):not(.three) > div:nth-child(n+3 of :not(.panel-glow)) { border-top: 1px solid var(--line); }
  .proof > div:not(.panel-glow) { padding: 22px 24px; }

  /* text beside a disc, a stack or the portal window: one column */
  .section--disc > .wrap, .section--stack > .wrap { grid-template-columns: minmax(0,1fr); gap: 56px; }
  .portal-peek { grid-template-columns: minmax(0,1fr); gap: 48px; }
  /* the disc becomes a rounded panel with the same rim: a circle that holds the rail no longer fits */
  .disc, .disc.sm { display: block; width: 100%; max-width: 680px; height: auto; margin: 0 auto; padding: 48px 44px; border-radius: var(--radius-slab); }
  .disc::before, .disc::after { border-radius: inherit; }
  .rail, .disc.sm .rail { width: auto; }
  .stack-col { max-width: 560px; }
  .stack { transform: none; }

  .slab { padding: 52px 44px 48px; }
  .slab-strip { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .gov { padding: 40px 36px; }
  .ft-cols { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ----------------------------------------------------------------- phone */
@media (max-width: 720px) {
  :root {
    --wrap-pad: 20px; --nav-pad-x: 16px; --nav-h: 76px;
    --fs-display: 42px; --fs-highlight: 34px; --fs-page-title: 34px; --fs-h2: 30px; --lh-h2: 1.15;
    --fs-stat-xl: 48px; --fs-stat-l: 40px; --fs-stat: 34px; --fs-fstat: 24px; --fs-pullquote: 22px;
    --fs-deck: 19px; --fs-intro: 18px; --fs-body: 17px; --fs-h3: 20px; --fs-cta-line: 17px;
    --section-pad: 44px; --angle-rise: 40px;
  }
  h1, h2, h3, .display, .page-title, .hl-h { overflow-wrap: break-word; }
  .section--split .hl-h { font-size: var(--fs-highlight); }
  .typewriter { min-height: 4.2em; }                 /* narrow lines wrap more: keep the space so nothing below moves */
  .pullquote { padding-left: 18px; }
  .fcta { gap: 14px 22px; margin-top: 32px; }

  /* vertical rhythm: shorter heroes and bands, the slant follows --angle-rise */
  .peak-hero { padding: 124px 0 40px; }
  .peak-hero.angle-bottom { padding-bottom: calc(var(--angle-rise) + 64px); }
  .peak-hero--page { padding: 112px 0 40px; }
  .peak-hero--page.angle-bottom { padding-bottom: calc(var(--angle-rise) + 60px); }
  .peak-hero--page .proof, .proof { margin-top: 32px; }
  .section--disc, .section--stack, .section--band, .section--portal.section--hl { padding: 72px 0; }
  .section--disc.angle-top, .section--stack.angle-top, .section--band.angle-top, .section--portal.angle-top { padding-top: calc(var(--angle-rise) + 64px); }
  .section--disc.angle-bottom, .section--stack.angle-bottom, .section--band.angle-bottom, .section--portal.angle-bottom { padding-bottom: calc(var(--angle-rise) + 72px); }
  .section--slab { padding: 56px 0 64px; }
  .section--pink { padding: 64px 0 72px; }
  .section--closing { padding: 40px 0 64px; }
  .section--demos { padding: 56px 0 72px; }
  .peak-footer { padding-top: calc(var(--angle-rise) + 72px); }

  /* every row stacks: proof, stats, cards, offers */
  .proof { flex-direction: column; }
  .proof > div:not(.panel-glow) { padding: 18px 22px; }
  .proof > div:not(.panel-glow) + div:not(.panel-glow) { border-left: 0; border-top: 1px solid var(--line); }
  .stats, .stats.two, .stats.three { grid-template-columns: minmax(0,1fr); }
  .stats > div:nth-child(n of :not(.panel-glow)) { border-left: 0; border-top: 0; padding: 20px 22px; }
  .stats > div:nth-child(n+2 of :not(.panel-glow)) { border-top: 1px solid var(--line); }
  .cards, .cards.two, .cards.three, .cards.four, .offers { grid-template-columns: minmax(0,1fr); border-radius: var(--radius-panel); }
  :is(.cards.two, .cards.three, .cards.four, .cards) .card:nth-child(n of .card) { border-left: 0; border-top: 0; }        /* :is() matches the desktop rules' weight */
  :is(.cards.two, .cards.three, .cards.four, .cards) .card:nth-child(n+2 of .card) { border-top: 1px solid var(--line); }
  .card, .offers > div:not(.panel-glow) { padding: 24px 22px; }
  .offers > div:not(.panel-glow) + div:not(.panel-glow) { border-left: 0; border-top: 1px solid var(--line); }
  .card.nx h3 { font-size: 19px; }

  .disc, .disc.sm { padding: 36px 24px; }
  .rail li { column-gap: 16px; }

  /* the tile stack: shallower depth so the tiles fit the column */
  .stack { height: 360px; }
  .stack--demos { height: 420px; }                     /* a demo tile is taller than a figure */
  .sc, .sc.stat, .stack--demos .sc {
    width: calc(100% - 52px); padding: 26px 24px 24px;
    transform:
      translate(calc(var(--p) * 22px + var(--mx) * (6px + var(--p) * 3px)), calc(var(--p) * -38px + var(--my) * (6px + var(--p) * 3px)))
      scale(calc(1 - var(--p) * 0.04)) rotate(calc(var(--p) * 1.2deg));
  }

  .slab { padding: 36px 22px 32px; border-radius: var(--radius-panel); }
  .slab-grid, .slab-big { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .slab-strip { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 20px; }
  .gov { padding: 28px 22px; border-radius: var(--radius-panel); }
  .gov .rt, .rowlist .rt { font-size: 17px; }
  .pink-list { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .chip { flex-wrap: wrap; border-radius: 22px; }
  .chip p { white-space: normal; }

  .steps .step { grid-template-columns: 40px minmax(0,1fr); gap: 12px; }
  .band-step { grid-template-columns: 40px minmax(0,1fr); gap: 14px; }
  .band-step h4 { font-size: 19px; }
  .table { display: block; overflow-x: auto; margin: 40px 0; }
  .table th, .table td { padding-right: 16px; }
  /* a list table stacks on a phone: each row a block, the key on top, the rest under it; no sideways scroll */
  .table--list { display: block; overflow: visible; table-layout: auto; }
  .table--list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table--list tbody, .table--list tr, .table--list td { display: block; width: auto !important; }
  .table--list tr { padding: 18px 0; border-bottom: 1px solid var(--line); }
  .table--list td { padding: 0; border: 0; }
  .table--list td + td { margin-top: 6px; }
  .table--list td:last-child { color: var(--text-2); }
  .table-more { margin-bottom: 40px; }
  .form { grid-template-columns: minmax(0,1fr); }
  .form-card { grid-template-columns: minmax(0,1fr); gap: 16px; padding: 32px 22px 28px; }
  /* on a phone the form follows the card's heading at once; the rest of the copy goes under it */
  .form-card-copy { display: contents; }
  .form-card-copy > * { order: 2; margin-top: 0; }
  .form-card-copy > h2:first-child { order: 0; }
  .form-card-form { order: 1; margin-bottom: 16px; }
  .form-card-copy > h3 { margin-top: 8px; }
  .section--lift, .peak-hero--page.peak-hero--lifted { --lift: 96px; }
  .field input, .field select, .field textarea { font-size: 16px; }   /* under 16px iOS zooms the page on focus */

  .demo-grid { grid-template-columns: minmax(0,1fr); }
  .demo-card { padding: 22px; }
  .demo-card h3 { font-size: 22px; }

  /* footer folds */
  .ft-brand { flex-direction: column; gap: 24px; }
  .ft-actions { flex-wrap: wrap; }
  .ft-cols { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px 20px; margin-top: 44px; }
  .ft-bottom { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 44px; }
  .ft-legal { flex-wrap: wrap; gap: 10px 20px; }
}

/* ----------------------------------------------------------------- small */
@media (max-width: 480px) {
  .slab-strip { grid-template-columns: minmax(0,1fr); }
  .pw-side { display: none; }                         /* the portal window mock keeps its tiles, drops the rail */
  .pw-body { grid-template-columns: minmax(0,1fr); }
}

/* ---- css/19-careers.css ---- */
/* ==========================================================================
   19 Careers: three patterns first drawn for the careers page, usable on any sub-page
     .scards   stacked cards: each card sticks under the bar while the next slides over it; the covered card
               shrinks, blurs and fades out (gone once fully covered), and a column of dots says which one you are on
     .cardrail     a row of cards that runs off the right edge, moved with round previous and next buttons
               (and by scroll or swipe); visual cards (Peak Black with topo lines) sit between the text cards;
               product cards carry a Peak Black panel with the product's mark on top, and a card may be a link
     .faq      questions that open in place (native <details>), one white row each, the arrow turning over
   They sit on the light panel ground (.theme-alt, #F1F1EF) so the white cards read as cards.
   ========================================================================== */

/* ---------------------------------------------------------------- stacked cards */
.scards-wrap { position: relative; margin-top: 56px; }
.scards { display: grid; gap: 32px; padding-bottom: 6vh; }
.scard {
  position: sticky; top: calc(var(--nav-h) + 40px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 440px;
  border-radius: var(--radius-slab); overflow: hidden; background: var(--peak-white);
  border: 1px solid var(--neutral-100); box-shadow: 0 30px 70px rgba(2, 11, 0, 0.08);
  transform-origin: 50% 0; transform: scale(var(--s, 1)); opacity: var(--o, 1); filter: blur(var(--b, 0px));
  will-change: transform, opacity, filter;
}
.scard-copy { padding: 64px 64px 56px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.scard-k { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.scard h3 { margin: 18px 0 0; font-size: 34px; font-weight: 700; line-height: 1.12; letter-spacing: -0.015em; color: var(--text); text-wrap: balance; }
.scard p { margin: 20px 0 0; font-size: var(--fs-body); line-height: 1.55; color: var(--text-2); max-width: 460px; }
.scard-visual {
  position: relative; overflow: hidden; background: var(--peak-black); color: var(--peak-white);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 48px 52px; min-width: 0;
}
.scard-visual .topo { position: absolute; inset: 0; opacity: 0.9; }
.scard-visual .wash { position: absolute; width: 520px; height: 420px; right: -120px; top: -140px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(164, 255, 147, 0.30), transparent); filter: blur(40px); pointer-events: none; }
.scard-big { position: absolute; top: 40px; left: 52px; font-size: 112px; font-weight: 300; line-height: 1; letter-spacing: -0.04em; color: var(--peak-green); }
.scard-practice { position: relative; max-width: 420px; }
.scard-practice .lb { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--peak-green); }
.scard-practice p { margin: 12px 0 0; font-size: 19px; line-height: 1.45; color: rgba(255, 255, 255, 0.92); max-width: none; }

.scards-dots { position: absolute; top: 0; bottom: 0; right: -44px; width: 12px; pointer-events: none; }
.scards-dots-in { position: sticky; top: 50vh; display: flex; flex-direction: column; gap: 12px; pointer-events: auto; }
.scards-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--neutral-200); cursor: pointer;
  transition: background 0.2s, transform 0.2s; }
.scards-dot[aria-current="true"] { background: var(--accent); transform: scale(1.3); }
.scards-dot:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---------------------------------------------------------------- card rail (not the disc's numbered .rail) */
.cardrail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.cardrail-head .body { max-width: 640px; }
.cardrail-nav { display: flex; gap: 10px; flex: none; }
.cardrail-btn {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--peak-white); color: var(--peak-black); border: 1px solid var(--neutral-100);
  transition: background 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s;
}
.cardrail-btn:hover:not(:disabled) { border-color: var(--peak-black); transform: translateY(-1px); }
.cardrail-btn:disabled { opacity: 0.35; cursor: default; }
.cardrail-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.cardrail-btn svg { width: 18px; height: 18px; }
.cardrail {
  display: flex; gap: 20px; margin-top: 44px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  /* run to the right edge of the window, while the first card lines up with the text column */
  margin-right: calc(50% - 50vw); padding-right: var(--wrap-pad, 64px); padding-bottom: 6px;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.cardrail::-webkit-scrollbar { display: none; }
.cardrail-card {
  flex: 0 0 380px; scroll-snap-align: start; display: flex; flex-direction: column; min-height: 360px;
  background: var(--peak-white); border: 1px solid var(--neutral-100); border-radius: var(--radius-panel); padding: 36px 32px;
}
.cardrail-card h3 { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; text-wrap: balance; }
.cardrail-card p { margin: 18px 0 0; font-size: var(--fs-body-sm); line-height: 1.6; color: var(--text-2); }
.cardrail-card .cardrail-no { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-bottom: auto;
  font-size: 15px; font-weight: 700; background: var(--neutral-50); color: var(--text); }
.cardrail-card .cardrail-no + h3 { margin-top: 72px; }
.cardrail-card--visual {
  position: relative; overflow: hidden; flex-basis: 300px; background: var(--peak-black); color: var(--peak-white);
  border-color: transparent; justify-content: flex-end;
}
.cardrail-card--visual .topo { position: absolute; inset: 0; }
.cardrail-card--visual .n { position: relative; font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--peak-green); }
.cardrail-card--visual p { position: relative; color: rgba(255, 255, 255, 0.9); margin-top: 12px; }
/* a card that is a link: the edge firms and the card lifts on hover, the link line's arrow steps right */
a.cardrail-card { color: inherit; text-decoration: none; transition: border-color 0.2s, transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
a.cardrail-card:hover { border-color: var(--neutral-200); transform: translateY(-2px); box-shadow: 0 22px 44px -28px rgba(10, 18, 10, 0.35); }
a.cardrail-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.cardrail-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 24px; font-size: var(--fs-link); font-weight: 700; color: var(--text); }
.cardrail-go svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
a.cardrail-card:hover .cardrail-go svg { transform: translateX(3px); }
/* product card: a Peak Black panel with topo lines, a Peak Green glow and the product's mark (or its name) on top,
   the copy on white under it */
.cardrail-card--product { padding: 0; overflow: hidden; }
.cardrail-media {
  position: relative; overflow: hidden; height: 176px; flex: none; display: flex; align-items: flex-end; padding: 28px 32px;
  background: var(--peak-black); color: var(--peak-white); --logo: var(--peak-white);
}
.cardrail-media .topo { position: absolute; inset: 0; }
.cardrail-media::after {
  content: ""; position: absolute; right: -30%; bottom: -60%; width: 90%; height: 140%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--peak-green) 34%, transparent), transparent);
}
.cardrail-card--product h3 { position: relative; z-index: 1; margin: 0; font-size: 28px; color: inherit; }
.cardrail-media .logomark { display: block; margin: 0; }
.cardrail-media .logomark svg { display: block; height: 30px; width: auto; }
.cardrail-body { display: flex; flex-direction: column; flex: 1; padding: 28px 32px 30px; }
.cardrail-body p { margin: 0; }

/* ---------------------------------------------------------------- faq */
.faq { max-width: 920px; margin: 48px auto 0; display: grid; gap: 10px; }
.faq-item { background: var(--peak-white); border: 1px solid transparent; border-radius: 18px; transition: border-color 0.2s; }
.faq-item:hover { border-color: var(--neutral-100); }
.faq-item[open] { border-color: var(--neutral-200); }
.faq-item > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 26px; font-size: var(--fs-body); font-weight: 700; line-height: 1.4; color: var(--text); border-radius: 18px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.faq-ico { flex: none; width: 20px; height: 20px; color: var(--text-3); transition: transform 0.25s var(--ease), color 0.2s; }
.faq-item[open] .faq-ico { transform: rotate(180deg); color: var(--accent); }
.faq-a { padding: 0 26px 24px; font-size: var(--fs-body-sm); line-height: 1.65; color: var(--text-2); max-width: 780px; }
.faq-a p { margin: 0; }
.faq-a p + p { margin-top: 12px; }
.faq-a a { color: var(--accent); }
/* the answer slides open where the browser can animate to auto height; elsewhere it simply appears */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq-item::details-content { height: 0; overflow: hidden; transition: height 0.32s var(--ease), content-visibility 0.32s allow-discrete; }
  .faq-item[open]::details-content { height: auto; }
}

/* ---------------------------------------------------------------- small screens and reduced motion */
@media (max-width: 1240px) { .scards-dots { display: none; } }
@media (max-width: 900px) {
  /* cards taller than the screen cannot stick, so they simply stack */
  .scard { position: relative; top: auto; grid-template-columns: 1fr; min-height: 0; transform: none; opacity: 1; filter: none; }
  .scard-copy { padding: 36px 28px 32px; }
  .scard h3 { font-size: 26px; }
  .scard-visual { min-height: 0; padding: 28px; justify-content: flex-start; }
  .scard-big { position: relative; top: auto; left: auto; font-size: 64px; margin-bottom: 20px; }
  .cardrail-head { flex-direction: column; align-items: flex-start; }
  .cardrail-card { flex-basis: 300px; min-height: 0; padding: 28px 24px; }
  .cardrail-card .cardrail-no + h3 { margin-top: 40px; }
  .cardrail-card--product { padding: 0; }
  .cardrail-media { height: 148px; padding: 24px; }
  .cardrail-body { padding: 24px 24px 26px; }
  .faq-item > summary { padding: 18px 20px; }
  .faq-a { padding: 0 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .scard { transform: none; opacity: 1; filter: none; }
  .cardrail { scroll-behavior: auto; }
  a.cardrail-card, a.cardrail-card:hover, .cardrail-go svg { transform: none; transition: none; }
  .faq-item::details-content { transition: none; }
}

/* ---- css/20-team.css ---- */
/* ==========================================================================
   20 Team: people with portraits, first drawn for the About page ("Who owns what"), Figma xpVlaDQ5CJmaWtmCvpaHks 809:81
     .team          two staggered columns: the right one starts lower, as the second portrait sits lower and to the right
                    in the design; while the page scrolls the columns drift at different speeds (team.js)
     .member        a black-and-white portrait (2:3) with a frosted info panel over its lower left, hanging past the
                    photo's left edge: white at 80% with a 5px backdrop blur, a 16px bar on its left in a random Peak
                    primary; the portrait moves a little inside its frame and the panel floats over it
     .member-ph     the placeholder while a portrait is not in yet: initials on the light ground
     .member--join  the last tile, a link: Peak Black with topo lines instead of a portrait
     .pquote        a portrait quote: the speaker's portrait with the quote highlighted in its frosted panel, name and
                    role under it; .psplit sets it beside the section's text (team.js moves portrait and panel)
   ========================================================================== */
.team {
  --cols: 2; --stag: 200px;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: 96px; row-gap: 96px;
  margin-top: 56px; padding-bottom: var(--stag);
}
/* an odd count ends in the left column, below the lowered right one: the room kept for the stagger is not needed */
.team:has(> .member:last-child:nth-child(odd)) { padding-bottom: 0; }
.member { position: relative; --k: 0; transform: translate3d(0, calc(var(--k) * var(--stag) + var(--ty, 0px)), 0); will-change: transform; }
.member:nth-child(2n) { --k: 1; }
/* the panel bar: a Peak primary (green, magenta, FF Blue), picked at random per page load by team.js, never the same
   twice in a row; without the script the three take turns */
.member:nth-child(3n+2) { --bar: var(--peak-magenta); } .member:nth-child(3n) { --bar: var(--peak-blue); }
.member-photo { position: relative; margin: 0; aspect-ratio: 2 / 3; overflow: hidden; background: var(--neutral-100); }
.member-photo img {
  position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; object-position: 50% 20%;
  transform: translate3d(0, var(--iy, 0px), 0); will-change: transform;
}
.member-ph { position: absolute; inset: 0; display: grid; place-items: start center; padding-top: 22%; font-size: 120px; font-weight: 300;   /* above the panel */
  letter-spacing: -0.04em; color: var(--neutral-400); background: var(--neutral-50); }
.member-info {
  position: absolute; z-index: 1; left: -8%; bottom: calc(8% - var(--drop, 0px)); width: 75%;   /* --drop on a .member: its panel hangs lower, clear of the face */
  padding: 20px; border-left: 16px solid var(--bar, var(--peak-green));
  background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  color: var(--peak-black); transform: translate3d(0, var(--fy, 0px), 0); will-change: transform;
}
.member-info h3 { margin: 0; font-size: clamp(22px, 2.3vw, 30px); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: inherit; }
.member-role { margin-top: 6px; font-size: 14px; line-height: 1.35; text-transform: uppercase; letter-spacing: 0.03em; }
.member-info p { margin: 10px 0 0; font-size: var(--fs-body-sm); line-height: 1.5; color: inherit; }

.member--join { display: block; color: inherit; text-decoration: none; }
.member--join .member-photo { background: var(--peak-black); }
.member--join .topo { position: absolute; inset: 0; }
.member--join .member-big { position: absolute; top: 40px; left: 40px; right: 40px; font-size: clamp(36px, 4vw, 56px); font-weight: 300;
  line-height: 1.05; letter-spacing: -0.02em; color: var(--peak-green); }
.member--join .member-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 15px; font-weight: 700; color: var(--accent); }
.member--join .member-go svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease); }
.member--join:hover .member-go svg { transform: translateX(3px); }
.member--join:focus-visible { outline: none; }
.member--join:focus-visible .member-photo { outline: 2px solid var(--focus); outline-offset: 4px; }

/* ---------------------------------------------------------------- portrait quote */
/* .psplit: the section's text on the left, the portrait on the right; the quote sits in the portrait's frosted panel */
.psplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 88px; align-items: start; margin-top: 32px; }
.psplit-text > :first-child { margin-top: 0; }
.pquote { --pq-drop: 112px; position: relative; margin: 0 0 var(--pq-drop); }   /* room for the panel that hangs below */
/* the panel hangs --pq-drop below where it sat, so the quote covers less of the face (About, 15 Oct: "100-120 pixels") */
.pquote .member-info { left: -14%; bottom: calc(6% - var(--pq-drop)); width: 88%; padding: 22px 24px 22px 22px; }
.pquote-mark { display: block; height: 30px; font-size: 64px; font-weight: 300; line-height: 0.9; color: var(--peak-black); }
.pquote-text { margin: 0; }
.member-info .pquote-text p { margin: 0; font-size: clamp(21px, 2vw, 27px); font-weight: 300; line-height: 1.24; letter-spacing: -0.015em; color: var(--peak-black); }
.pquote-text b { font-weight: 700; }
.pquote-name { display: block; margin-top: 16px; font-size: 18px; font-weight: 700; line-height: 1.2; }
.pquote .member-role { margin-top: 2px; font-size: 13px; }

/* ---------------------------------------------------------------- tablets, phones, reduced motion */
@media (max-width: 1080px) { .team { column-gap: 64px; --stag: 160px; } .member-info { width: 82%; } .psplit { gap: 64px; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); } }
@media (max-width: 900px) { .psplit { grid-template-columns: 1fr; gap: 48px; } .pquote { width: min(88%, 420px); margin-left: auto; } .pquote .member-info { left: -10%; } }
@media (max-width: 720px) {
  /* one column, the portraits zig-zag left and right, the panel drops under the photo and overlaps it */
  .team { --cols: 1; --stag: 0px; row-gap: 56px; padding-bottom: 0; }
  .member { width: 88%; }
  .member:nth-child(2n) { margin-left: auto; }
  .member-photo { aspect-ratio: 4 / 5; }
  .member-info { position: relative; left: auto; bottom: auto; width: auto; margin: -72px 0 0 20px;
    box-shadow: 0 14px 36px rgba(2, 11, 0, 0.08); }   /* mostly on white here, so the shadow gives it an edge */
  .member:nth-child(2n) .member-info { margin: -72px 20px 0 -20px; }
  .member--join .member-big { top: 28px; left: 28px; right: 28px; }
  .pquote { --pq-drop: 0px; }                         /* here the panel already drops under the photo */
}
@media (prefers-reduced-motion: reduce) {
  .member, .member-photo img, .member-info, .pquote { --ty: 0px; --iy: 0px; --fy: 0px; }
}

/* ---- css/21-consent.css ---- */
/* ==========================================================================
   21 Consent: the cookie notice (0.23.0)
   .consent   (with .theme-light) a white card fixed to the bottom left of the window: one line of text with a settings link, then
              Decline and Accept as two equal buttons (declining is as easy as accepting). Hidden with the hidden
              attribute until the page's script finds no stored choice. On phones it spans the width.
   ========================================================================== */
.consent {
  position: fixed; left: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 70;
  display: flex; align-items: center; gap: 20px; width: min(620px, calc(100vw - 48px)); padding: 18px 18px 18px 22px;
  background: var(--peak-white); color: var(--peak-ink); border: 1px solid var(--neutral-100); border-radius: 22px;
  box-shadow: 0 24px 60px -24px rgba(2, 11, 0, 0.38);
  animation: consent-in 420ms var(--ease) both;
}
.consent[hidden] { display: none; }
.consent p { margin: 0; flex: 1; font-size: var(--fs-caption); line-height: 1.5; color: var(--neutral-700, rgba(25, 25, 20, 0.82)); }
.consent p a { color: var(--green-700); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.consent-actions { display: flex; gap: 10px; flex: none; }
.consent-actions .btn { min-width: 112px; justify-content: center; }
@keyframes consent-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) {
  .consent { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; }
  .consent-actions .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }