@charset "UTF-8";
/* ==========================================================================
   KIVO — design system, 2026 redesign
   --------------------------------------------------------------------------
   Light, premium, enterprise. White ground, soft grey bands, deep navy type and
   a single blue accent doing all the work. The brand crimson is kept for the
   logo mark alone, so the page has one accent rather than two competing.

   The component class names are carried over from the previous build on purpose:
   the content markup is the only surviving copy of the site, and re-skinning it
   is what guarantees nothing is lost in the move. Every value below is new.
   ========================================================================== */

/* ---------- Fonts (self-hosted, latin subset, variable) ------------------- */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  color-scheme: light;

  /* -- Colour ------------------------------------------------------------- */
  --navy: #061329;          /* brand navy — headings, inverted bands */
  --navy-800: #0b1f3d;
  --navy-700: #13294b;
  --ink: #1d2b40;           /* body text — 12.6:1 on white */
  --muted: #5a6b82;         /* secondary text — 4.9:1 on white */
  --faint: #5f728b;         /* captions — 4.9:1 on white, 4.6:1 on the grey band */

  --accent: #1159c4;        /* the one accent: buttons, links, highlights */
  --accent-700: #0d449a;
  --accent-300: #7fa9ee;    /* for use on the navy bands */
  --accent-50: #eef4ff;
  /* The button fill, kept out of the per-band remap below: on an inverted band
     --accent lightens for links, which would leave white text on pale blue. */
  --accent-fixed: #1159c4;
  --crimson: #96022d;       /* the logo mark, and nothing else */

  --bg: #ffffff;
  --bg-soft: #f6f8fb;       /* section bands */
  --card: #ffffff;          /* every raised panel, so one token flips them all */
  --hero-wash: linear-gradient(180deg, #fbfcfe 0%, #ffffff 70%);
  --hero-glow: rgba(17, 89, 196, .07);
  --bg-sunk: #eef2f7;
  --line: #e4e9f0;
  --line-2: #ccd6e2;
  --line-inv: rgba(255, 255, 255, 0.14);
  --line-inv-2: rgba(255, 255, 255, 0.26);

  /* Semantic pairs, so a component never names a colour directly. */
  --c-text: var(--ink);
  --c-text-muted: var(--muted);
  --c-heading: var(--navy);
  --c-surface: var(--bg);
  --c-line: var(--line);

  /* -- Type --------------------------------------------------------------- */
  --sans: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --t-display: clamp(2.3rem, 1.5rem + 3.1vw, 3.9rem);
  --t-h1: clamp(2.05rem, 1.45rem + 2.5vw, 3.3rem);
  --t-h2: clamp(1.8rem, 1.3rem + 1.9vw, 2.7rem);
  --t-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  --t-h4: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem);
  --t-lead: clamp(1.05rem, 1rem + 0.35vw, 1.26rem);
  --t-body: 1.0625rem;
  --t-sm: 0.945rem;
  --t-xs: 0.83rem;
  --t-eyebrow: 0.75rem;

  --lh-tight: 1.12;
  --lh-snug: 1.22;
  --lh-body: 1.62;

  /* -- Space -------------------------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;   --s-8: 2rem;     --s-10: 2.5rem;
  --s-12: 3rem;    --s-16: 4rem;    --s-20: 5rem;

  --gutter: clamp(1.25rem, 0.7rem + 2.4vw, 3.5rem);
  --container: 1240px;
  --container-narrow: 760px;
  --band: clamp(3.25rem, 2.3rem + 3.3vw, 5.25rem);
  --band-tight: clamp(2.25rem, 1.75rem + 1.8vw, 3.25rem);
  --header-h: 70px;

  /* -- Shape -------------------------------------------------------------- */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  --e-1: 0 1px 2px rgba(6, 19, 41, .05), 0 1px 3px rgba(6, 19, 41, .04);
  --e-2: 0 2px 4px rgba(6, 19, 41, .04), 0 12px 28px -12px rgba(6, 19, 41, .16);
  --e-3: 0 2px 6px rgba(6, 19, 41, .05), 0 40px 70px -32px rgba(6, 19, 41, .30);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --d: .2s;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--s-6)); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--c-text);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-700); }
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}
p { margin: 0; }
p + p { margin-top: var(--s-5); }
ul, ol { margin: 0; padding: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: var(--s-2); left: var(--s-2); z-index: 200;
  padding: var(--s-3) var(--s-5); background: var(--navy); color: #fff;
  border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 600;
  transform: translateY(-160%); transition: transform var(--d) var(--ease);
}
.skip-link:focus { transform: translateY(0); color: #fff; }
#kivo-top { position: absolute; top: 0; left: 0; width: 1px; height: 1px; outline: 0 !important; }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: var(--container); }
.wrap--narrow { max-width: var(--container-narrow); }

.sec { padding-block: var(--band); position: relative; }
.sec--tight { padding-block: var(--band-tight); }
.sec--flush-top { padding-top: 0; }
.sec--alt { background: var(--bg-soft); }
.sec--line { border-top: 1px solid var(--line); }
.sec--inv {
  background: var(--navy); color: rgba(255, 255, 255, .78);
  --c-text: rgba(255, 255, 255, .78);
  --c-text-muted: rgba(255, 255, 255, .62);
  --c-heading: #ffffff;
  --c-line: var(--line-inv);
  --accent: var(--accent-300);
}
.sec--inv a { color: var(--accent-300); }
.sec--inv a:hover { color: #fff; }

.split { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 3.75rem); align-items: start; }
@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--text-first { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}
.grid { display: grid; gap: var(--s-6); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.grid > * { min-width: 0; }

/* ==========================================================================
   4. TYPE
   ========================================================================== */
h1, h2, h3, h4, h5, h6, .display, .h1, .h2, .h3, .h4 {
  margin: 0; color: var(--c-heading); font-weight: 680; letter-spacing: -.022em;
  line-height: var(--lh-tight); text-wrap: balance;
}
.display { font-size: var(--t-display); }
.h1, h1 { font-size: var(--t-h1); }
.h2, h2 { font-size: var(--t-h2); line-height: var(--lh-snug); }
.h3, h3 { font-size: var(--t-h3); line-height: 1.3; letter-spacing: -.014em; }
.h4, h4 { font-size: var(--t-h4); line-height: 1.35; letter-spacing: -.008em; font-weight: 640; }

.eyebrow {
  display: block; font-size: var(--t-eyebrow); font-weight: 650; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s-4);
}
.eyebrow--muted { color: var(--c-text-muted); }
.lead { font-size: var(--t-lead); line-height: 1.58; color: var(--c-text-muted); }
.body { font-size: var(--t-body); color: var(--c-text); }
.sm { font-size: var(--t-sm); }
.xs { font-size: var(--t-xs); }
.muted { color: var(--c-text-muted); }

.sec-head { max-width: 48rem; }
.sec-head .lead { margin-top: var(--s-4); }
.sec-head--center { max-width: 44rem; margin-inline: auto; text-align: center; }
.sec-head--center .lead { margin-inline: auto; }

.link { font-weight: 600; font-size: var(--t-sm); display: inline-flex; align-items: center; gap: .4rem; }
.link::after { content: "→"; transition: transform var(--d) var(--ease); }
.link:hover::after { transform: translateX(3px); }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-6); border: 1px solid transparent;
  border-radius: 10px; background: var(--accent); color: #fff;
  font-family: inherit; font-size: var(--t-sm); font-weight: 620; letter-spacing: -.004em;
  cursor: pointer; text-align: center;
  transition: background var(--d) var(--ease), border-color var(--d) var(--ease),
    color var(--d) var(--ease), transform var(--d) var(--ease);
}
.btn:hover { background: var(--accent-700); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn--secondary { background: var(--card); color: var(--navy); border-color: var(--line-2); }
.btn--secondary:hover { background: var(--bg-soft); border-color: var(--faint); color: var(--navy); }
.btn--ghost { background: transparent; color: var(--navy); border-color: transparent; padding-inline: var(--s-3); }
.btn--ghost:hover { background: var(--bg-soft); color: var(--navy); }
/* Variants excluded by name: a bare descendant rule outranks .btn--ghost and
   would fill a ghost button with the accent while leaving its own text colour. */
.sec--inv .btn:not(.btn--secondary):not(.btn--ghost),
.cta-band .btn:not(.btn--secondary):not(.btn--ghost) { background: var(--accent-fixed); color: #fff; }
.sec--inv .btn:not(.btn--secondary):not(.btn--ghost):hover,
.cta-band .btn:not(.btn--secondary):not(.btn--ghost):hover { background: #2f74dd; color: #fff; }
.sec--inv .btn--secondary { background: transparent; color: #fff; border-color: var(--line-inv-2); }
.sec--inv .btn--secondary:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .42); color: #fff; }
.sec--inv .btn--ghost { color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); align-items: center; margin-top: var(--s-8); }
.sec > .wrap > :last-child, .sec > .wrap > :last-child > :last-child { margin-bottom: 0; }

/* ==========================================================================
   6. HEADER
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-bar { display: flex; align-items: center; gap: var(--s-4); min-height: var(--header-h); }
.wordmark { display: inline-flex; align-items: center; flex: none; min-height: 44px; }
.wordmark img { width: 92px; height: auto; }

.nav { display: none; margin-inline: auto; gap: 2px; list-style: none; }
.nav__link {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-3);
  border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 560; color: var(--ink);
}
.nav__link:hover, .nav__link[aria-current="page"] { background: var(--bg-soft); color: var(--navy); }
.nav__link[aria-current="page"] { color: var(--accent); }
@media (min-width: 64rem) { .nav { display: flex; } }

.header-actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; flex: none; }
.header-actions .btn { min-height: 42px; padding-inline: var(--s-4); font-size: .925rem; }
.header-actions .btn--secondary { display: none; }
@media (min-width: 64rem) { .header-actions { margin-left: 0; } }
@media (min-width: 78rem) { .header-actions .btn--secondary { display: inline-flex; } }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; margin-left: var(--s-2);
  width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--card); cursor: pointer; flex: none;
}
.nav-toggle__bars { display: block; width: 17px; height: 1.5px; background: var(--navy); position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--navy);
  transition: top var(--d) var(--ease), transform var(--d) var(--ease);
}
.nav-toggle__bars::before { top: -5px; } .nav-toggle__bars::after { top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }
@media (min-width: 64rem) { .nav-toggle { display: none; } }

/* The panel sits outside the header: the header carries a backdrop-filter, which makes
   it the containing block for any fixed descendant and would clip the panel to the bar. */
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0; background: var(--card); z-index: 90;
  overflow-y: auto; overscroll-behavior: contain; padding: var(--s-4) 0 var(--s-16);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--d) var(--ease), transform var(--d) var(--ease), visibility var(--d) step-end;
}
.mobile-nav[data-open="true"] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--d) var(--ease), transform var(--d) var(--ease), visibility 0s;
}
@media (min-width: 64rem) { .mobile-nav { display: none; } }
body[data-nav-open="true"] { overflow: hidden; }
.m-link {
  display: flex; align-items: center; min-height: 56px; padding: 0 var(--s-2);
  border-bottom: 1px solid var(--line); font-size: 1.1rem; font-weight: 620; color: var(--navy);
}
.mobile-nav__actions { display: grid; gap: var(--s-3); margin-top: var(--s-8); }
.mobile-nav__actions .btn { width: 100%; min-height: 52px; }

/* ==========================================================================
   7. BREADCRUMBS
   ========================================================================== */
.crumbs { padding-top: var(--s-6); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); list-style: none; }
.crumbs li { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); color: var(--muted); }
.crumbs li + li::before { content: "/"; color: var(--line-2); }
.crumbs a { color: var(--muted); min-height: 24px; display: inline-flex; align-items: center; }
.crumbs a:hover { color: var(--accent); }

/* ==========================================================================
   8. PAGE HERO
   ========================================================================== */
.page-hero {
  padding-top: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  padding-bottom: var(--band-tight);
  background: var(--hero-wash);
  border-bottom: 1px solid var(--line);
}
.page-hero .display, .page-hero .h1 { margin-top: var(--s-2); }
.page-hero .lead { max-width: 38rem; }

/* ==========================================================================
   9. CONTENT COMPONENTS
   ========================================================================== */
/* -- definition rows ------------------------------------------------------ */
.rule-list { list-style: none; border-top: 1px solid var(--line); }
.rule-list > li { border-bottom: 1px solid var(--line); }
.rule-list__row { display: grid; gap: var(--s-2); padding: var(--s-5) 0; align-items: baseline; }
@media (min-width: 52rem) {
  .rule-list__row { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--s-8); }
}
.rule-list__term { font-size: var(--t-h4); font-weight: 640; color: var(--c-heading); letter-spacing: -.008em; }
.rule-list__def { font-size: var(--t-sm); color: var(--c-text-muted); }
.rule-list__num {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--accent);
  letter-spacing: .06em; display: block; margin-bottom: var(--s-1);
}
.rule-list--action .rule-list__term { color: var(--c-heading); }

/* -- definition cards ----------------------------------------------------- */
.defs { display: grid; gap: var(--s-5); margin-top: var(--s-10); }
@media (min-width: 40rem) { .defs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .defs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .defs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.def {
  padding: var(--s-5) var(--s-6) var(--s-6); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r);
}
.sec--inv .def { background: rgba(255, 255, 255, .04); border-color: var(--line-inv); }
.sec--alt .def { background: var(--card); }
.def__title { font-size: var(--t-h4); font-weight: 640; color: var(--c-heading); letter-spacing: -.008em; }
.def__body { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--c-text-muted); }

/* -- check lists ---------------------------------------------------------- */
.check-list { list-style: none; display: grid; gap: var(--s-3); margin-top: var(--s-5); }
@media (min-width: 44rem) { .check-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .check-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.check-list li { position: relative; padding-left: 1.75rem; font-size: var(--t-sm); color: var(--c-text); }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .34em; width: 1.05rem; height: 1.05rem;
  border-radius: 50%; background: var(--accent-50); box-shadow: inset 0 0 0 1px rgba(17, 89, 196, .22);
}
.check-list li::after {
  content: ""; position: absolute; left: .31rem; top: .6em; width: .4rem; height: .21rem;
  border-left: 1.7px solid var(--accent); border-bottom: 1.7px solid var(--accent); transform: rotate(-45deg);
}
.sec--inv .check-list li::before { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.sec--inv .check-list li::after { border-color: var(--accent-300); }

/* -- tags ----------------------------------------------------------------- */
.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; }
.tag {
  display: inline-flex; align-items: center; padding: 5px var(--s-3);
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  font-size: var(--t-xs); color: var(--muted); background: var(--card);
}
.sec--inv .tag { color: rgba(255, 255, 255, .8); background: transparent; border-color: var(--line-inv-2); }

/* -- interface artwork ---------------------------------------------------- */
.screen { margin: 0; }
.screen__frame {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--card) center / cover no-repeat;
  box-shadow: var(--e-3);
}
.sec--inv .screen__frame { border-color: var(--line-inv); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55); }
.screen__img { width: 100%; height: auto; }
.screen__note {
  margin-top: var(--s-3); font-size: var(--t-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.sec--inv .screen__note { color: rgba(255, 255, 255, .55); }
.screen--phone .screen__frame { border-radius: 22px; }

/* -- callouts over a screen ----------------------------------------------- */
.shot { position: relative; }
.callout {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%, -50%);
  display: none; align-items: center; gap: var(--s-2); padding: .45rem .8rem;
  border-radius: var(--r-pill); border: 1px solid var(--line-2); background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: var(--t-xs); font-weight: 620; color: var(--navy); white-space: nowrap;
  box-shadow: var(--e-2);
}
@media (min-width: 62rem) { .callout { display: inline-flex; } }
.callout__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.callout__label { display: block; }

/* -- bento ---------------------------------------------------------------- */
.bento { display: grid; gap: var(--s-5); margin-top: var(--s-10); }
@media (min-width: 46rem) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bento__card--two { grid-column: span 2; }
}
.bento__card {
  display: flex; flex-direction: column; overflow: hidden; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e-1);
}
.bento__vis { border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.bento__vis .screen__frame { border: 0; border-radius: 0; box-shadow: none; aspect-ratio: 16 / 9; }
.bento__vis .screen__img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.bento__body { padding: var(--s-5); }
.bento__body .eyebrow { margin-bottom: var(--s-2); }

/* -- the connected workflow chain ----------------------------------------- */
.chain-strip { overflow-x: auto; margin-top: var(--s-10); padding-bottom: var(--s-3); }
.chain-strip__track { min-width: min-content; }
.chain { display: flex; align-items: stretch; gap: 0; list-style: none; }
.chain__step { display: flex; align-items: stretch; flex: 1 1 0; min-width: 7.25rem; }
.chain__tile {
  display: block; flex: 1; padding: var(--s-4); border-radius: var(--r);
  border: 1px solid var(--c-line); background: rgba(255, 255, 255, .05);
}
.sec--alt .chain__tile, body > .chain__tile { background: var(--card); }
.chain__bar { display: flex; gap: 3px; margin-bottom: var(--s-3); }
.chain__bar i { display: block; width: 14px; height: 3px; border-radius: 2px; background: var(--accent-300); opacity: .55; }
.chain__num { font-family: var(--mono); font-size: var(--t-xs); color: var(--accent-300); letter-spacing: .06em; }
.chain__label { display: block; margin-top: var(--s-2); font-size: var(--t-sm); font-weight: 620; color: var(--c-heading); line-height: 1.3; }
.chain__rows { display: block; margin-top: var(--s-3); }
.chain__rows i { display: block; height: 2px; border-radius: 2px; background: currentColor; opacity: .18; margin-top: 5px; }
.chain__rows i:first-child { width: 80%; } .chain__rows i:last-child { width: 55%; }
 /* The section's point is that one record leads to the next, so the join between two
    steps is drawn as direction rather than as a decorative hairline. */
.chain__link {
  position: relative; flex: none; align-self: center;
  width: var(--s-5); height: 1px; background: var(--c-line);
}
.chain__link::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 5px; height: 5px;
  border-top: 1px solid var(--c-line); border-right: 1px solid var(--c-line);
  transform: translateY(-50%) rotate(45deg);
}
.chain__step:last-child .chain__link { display: none; }
/* On the navy band the generic line token is almost invisible, and the join is the
   message here, so it takes the accent instead. */
.sec--inv .chain__link { background: var(--accent-300); opacity: .5; }
.sec--inv .chain__link::after { border-color: var(--accent-300); }

/* -- stages / numbered steps ---------------------------------------------- */
.stage { border-top: 1px solid var(--line); padding: var(--s-5) 0; }
.stage__num { font-family: var(--mono); font-size: var(--t-xs); color: var(--accent); letter-spacing: .06em; }

/* -- fact tiles ----------------------------------------------------------- */
.facts { display: grid; gap: var(--s-5); margin-top: var(--s-10); }
@media (min-width: 44rem) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 66rem) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.fact__value { font-size: var(--t-h3); font-weight: 680; color: var(--c-heading); letter-spacing: -.016em; }

/* -- module grid ---------------------------------------------------------- */
.modules {
  list-style: none; display: grid; gap: 1px; margin-top: var(--s-10);
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
@media (min-width: 38rem) { .modules { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .modules { grid-template-columns: repeat(3, 1fr); } }
.module { background: var(--card); }
.sec--inv .modules { background: var(--line-inv); border-color: var(--line-inv); }
.sec--inv .module { background: var(--navy-800); }
.module__link { display: flex; gap: var(--s-3); padding: var(--s-5); color: inherit; align-items: flex-start; }
.module__link:hover { background: var(--bg-soft); color: inherit; }
.sec--inv .module__link:hover { background: rgba(255, 255, 255, .05); }
.module__icon { width: 28px; height: 28px; flex: none; opacity: .85; }
.sec--inv .module__icon { filter: brightness(0) invert(1); }
.module__name { display: block; font-size: var(--t-h4); font-weight: 640; color: var(--c-heading); letter-spacing: -.008em; }
.module__line { display: block; margin-top: var(--s-1); font-size: var(--t-sm); color: var(--c-text-muted); }

/* -- solution / industry cards -------------------------------------------- */
.solutions { display: grid; gap: var(--s-5); margin-top: var(--s-10); list-style: none; }
@media (min-width: 46rem) { .solutions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .solutions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.solution {
  display: flex; flex-direction: column; overflow: hidden; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e-1);
  transition: box-shadow var(--d) var(--ease), transform var(--d) var(--ease), border-color var(--d) var(--ease);
}
@media (hover: hover) {
  .solution:hover { box-shadow: var(--e-2); transform: translateY(-2px); border-color: var(--line-2); }
}
.solution__link { display: block; color: inherit; }
.solution__banner { position: relative; display: block; height: clamp(8rem, 6rem + 7vw, 11rem); overflow: hidden; background: #06132a; }
.solution__banner .vis-frame { height: 100%; border: 0; border-radius: 0; }
.solution__banner .vis-photo { width: 100%; height: 100%; object-fit: cover; }
.solution__banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6, 19, 41, .88) 0%, rgba(6, 19, 41, .35) 55%, rgba(6, 19, 41, .1) 100%);
}
.solution__label, .solution__name { position: absolute; left: var(--s-5); z-index: 1; color: #fff; }
.solution__label { bottom: calc(var(--s-5) + 1.7rem); font-size: var(--t-xs); letter-spacing: .11em; text-transform: uppercase; opacity: .82; }
.solution__name { bottom: var(--s-5); font-size: var(--t-h3); font-weight: 650; letter-spacing: -.014em; }
.solution__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.solution__body .link { margin-top: var(--s-5); align-self: flex-start; }

/* -- ecosystem list ------------------------------------------------------- */
.eco { display: grid; gap: var(--s-4); margin-top: var(--s-8); list-style: none; }
@media (min-width: 46rem) { .eco { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .eco { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.eco__item { padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.sec--inv .eco__item { background: rgba(255, 255, 255, .04); border-color: var(--line-inv); }

/* -- cross links ---------------------------------------------------------- */
.xlinks { display: grid; gap: var(--s-8); }
@media (min-width: 52rem) { .xlinks--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) { .xlinks--3 { grid-template-columns: repeat(3, 1fr); } }
.xlinks__heading { font-size: var(--t-xs); font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.xlinks__list { list-style: none; margin-top: var(--s-4); display: grid; gap: 0; }
.xlinks__list li { border-top: 1px solid var(--line); }
.xlinks__list a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) 0; font-size: var(--t-sm); font-weight: 560; color: var(--ink);
}
.xlinks__list a::after { content: "→"; color: var(--accent); transition: transform var(--d) var(--ease); }
.xlinks__list a:hover { color: var(--accent); }
.xlinks__list a:hover::after { transform: translateX(3px); }
.sec--inv .xlinks__list a { color: rgba(255, 255, 255, .86); }

/* -- CTA band ------------------------------------------------------------- */
.cta-band { background: var(--navy); color: rgba(255, 255, 255, .78); padding-block: var(--band); text-align: center; }
.cta-band .eyebrow { color: var(--accent-300); }
.cta-band h2, .cta-band .h2, .cta-band .display { color: #fff; max-width: 24ch; margin-inline: auto; }
.cta-band .lead { color: rgba(255, 255, 255, .72); max-width: 42rem; margin-inline: auto; margin-top: var(--s-4); }
.cta-band .btn-row { justify-content: center; }
.cta-band__sig { margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid var(--line-inv); font-size: var(--t-h4); color: rgba(255, 255, 255, .62); }

/* -- accordion (FAQ) ------------------------------------------------------ */
.acc { border-top: 1px solid var(--line); margin-top: var(--s-8); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  width: 100%; padding: var(--s-5) 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: var(--t-h4); font-weight: 640; color: var(--navy); letter-spacing: -.008em;
}
.acc__btn::after { content: "+"; font-size: 1.3rem; font-weight: 400; color: var(--accent); flex: none; }
.acc__btn[aria-expanded="true"]::after { content: "–"; }
.acc__panel { padding-bottom: var(--s-5); font-size: var(--t-sm); color: var(--c-text-muted); max-width: 60ch; }

/* -- form ----------------------------------------------------------------- */
.block { padding: clamp(var(--s-6), 3vw, var(--s-10)); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e-1); }
.field { display: block; margin-top: var(--s-5); }
.field__label { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--navy); margin-bottom: var(--s-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4); font-family: inherit;
  font-size: var(--t-sm); color: var(--c-text); background: var(--card);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline-offset: 0; }
.field--check { display: flex; align-items: center; gap: var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); }
.field--check input { width: auto; min-height: 0; }

/* -- source note ---------------------------------------------------------- */
.note {
  padding: var(--s-4) var(--s-5); border-left: 3px solid var(--accent);
  background: var(--accent-50); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--t-sm); color: var(--ink);
}

/* -- drawn visuals (SVG) -------------------------------------------------- */
.vis { width: 100%; height: auto; display: block; }
.vis-frame { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.vis-frame--photo { border: 0; border-radius: var(--r-lg); }
.vis-photo { width: 100%; height: auto; display: block; object-fit: cover; }
.vis .v-bg { fill: var(--bg-soft); }
.vis .v-line { stroke: var(--line-2); stroke-width: 1; fill: none; }
.vis .v-dash { stroke-dasharray: 3 4; }
.vis .v-soft { fill: var(--card); stroke: var(--line-2); stroke-width: 1; }
.vis .v-brand { fill: var(--accent); }
.vis .v-brand-stroke { stroke: var(--accent); fill: none; stroke-width: 1.4; }
.vis .v-signal { fill: var(--accent-300); }
.vis .v-signal-stroke { stroke: var(--accent); fill: none; }
.vis .v-label { fill: var(--muted); font-family: var(--sans); font-size: 11px; }
.vis .v-micro { fill: var(--faint); font-family: var(--sans); font-size: 9px; }

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.site-footer { background: var(--navy); color: rgba(255, 255, 255, .72); padding-block: var(--s-16) var(--s-8); font-size: var(--t-sm); }
.footer-top { display: grid; gap: var(--s-10); }
@media (min-width: 52rem) { .footer-top { grid-template-columns: 1.5fr repeat(4, 1fr); } }
.footer-brand img { width: 96px; filter: brightness(0) invert(1); }
.footer-brand__tag { margin-top: var(--s-5); font-size: var(--t-h4); color: #fff; font-weight: 620; }
.footer-brand__desc { margin-top: var(--s-3); max-width: 32ch; color: rgba(255, 255, 255, .6); font-size: var(--t-sm); }
.footer-col__heading { font-size: var(--t-xs); font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.footer-col__list { list-style: none; margin-top: var(--s-4); display: grid; gap: var(--s-3); }
.site-footer a { color: rgba(255, 255, 255, .78); }
.site-footer a:hover { color: #fff; }
.footer-bottom {
  margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid var(--line-inv);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); justify-content: space-between;
  font-size: var(--t-xs); color: rgba(255, 255, 255, .55);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s-5); list-style: none; }

/* ==========================================================================
   11. HOMEPAGE
   ========================================================================== */
.hero {
  position: relative; border-bottom: 1px solid var(--line);
  padding-block: clamp(2.75rem, 1.8rem + 3.4vw, 4.75rem) clamp(2rem, 1.4rem + 2vw, 3rem);
  background:
    radial-gradient(60% 70% at 78% 10%, var(--hero-glow), transparent 70%),
    var(--hero-wash);
}
.hero__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: center; }
@media (min-width: 62rem) { .hero__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.hero .display { margin-top: var(--s-2); }
.hero .lead { margin-top: var(--s-5); max-width: 34rem; }
.hero__support { margin-top: var(--s-5); font-size: var(--t-sm); color: var(--faint); }
@media (max-width: 47.99rem) {
  /* The whole dashboard shrinks to a grey smudge on a phone, so the frame crops to its
     top-left corner — the summary tiles and the first chart, at a readable size. */
  .hero .screen__frame { aspect-ratio: 4 / 3; }
  .hero .screen__img { width: 178%; max-width: none; height: 100%; object-fit: cover; object-position: left top; }
}

.pcards { display: grid; gap: var(--s-5); margin-top: var(--s-10); list-style: none; }
@media (min-width: 46rem) { .pcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pcard {
  display: flex; flex-direction: column; overflow: hidden; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e-1);
  transition: box-shadow var(--d) var(--ease), transform var(--d) var(--ease), border-color var(--d) var(--ease);
}
@media (hover: hover) { .pcard:hover { box-shadow: var(--e-2); transform: translateY(-2px); border-color: var(--line-2); } }
/* The card shows the product's own interface, whole. An earlier version cropped into the
   top-left at 200% to make the detail bigger, which sliced the table through its own
   column headings and cut words in half at the card's edge — it read as a torn
   screenshot rather than a preview. The frame now matches the source's own 1344x752, so
   nothing is cut on any side; the detail at full size lives on the product page. No
   darkening gradient either: the screenshot is the subject, not a backdrop for a label. */
.pcard__media {
  display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--navy);
}
.pcard__media .vis-frame { height: 100%; border: 0; border-radius: 0; }
.pcard__media .vis-photo { width: 100%; height: 100%; object-fit: cover; }
/* The label sits on the photograph, so the foot of the image is darkened enough to
   carry white type at any crop. */
.pcard__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 19, 41, .14) 0%, rgba(6, 19, 41, .62) 100%);
}
.pcard__tag {
  display: block; position: absolute; left: var(--s-4); bottom: var(--s-4); z-index: 1;
  color: #fff; font-size: var(--t-xs); font-weight: 650; letter-spacing: .11em;
  text-transform: uppercase;
}
.pcard__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.pcard__body p { margin-top: var(--s-2); color: var(--c-text-muted); font-size: var(--t-sm); flex: 1; }
.pcard__body .link { margin-top: var(--s-5); align-self: flex-start; }

.flow { display: grid; gap: var(--s-2); margin-top: var(--s-10); list-style: none; }
@media (min-width: 40rem) { .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .flow { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.flow__step { position: relative; padding: var(--s-4) var(--s-3); border: 1px solid var(--line-inv); border-radius: var(--r); background: rgba(255, 255, 255, .05); }
.flow__n { display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; color: var(--accent-300); }
.flow__t { display: block; margin-top: var(--s-2); font-size: var(--t-sm); font-weight: 620; color: #fff; line-height: 1.3; }

/* ==========================================================================
   12. MOTION
   ========================================================================== */
/* Reveal-on-scroll, built to fail visible.
   The hidden state hangs off html.reveal-ready, which the inline head script sets and
   then takes back off again if kivo.js has not armed the observer within three seconds.
   The earlier version hid these elements whenever the page merely had JavaScript, so
   any failure to load or run kivo.js left most of the page permanently at opacity 0 —
   a white screen with no error to explain it. Content is never hidden now unless
   something is definitely running that will show it again. */
html.reveal-ready [data-reveal] {
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
html.reveal-ready [data-reveal].is-in, [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   13. PRINT
   ========================================================================== */
@media print {
  .site-header, .mobile-nav, .site-footer, .btn-row, .crumbs, .skip-link { display: none !important; }
  body { font-size: 11pt; }
  .sec, .sec--tight { padding-block: 1rem; }
  .sec--inv, .cta-band { background: none !important; color: #000 !important; }
}

/* ==========================================================================
   14. COMPONENTS CARRIED OVER FROM THE RECOVERED MARKUP
   --------------------------------------------------------------------------
   The content markup is the only surviving copy of the site's copy, so every
   class it uses is given a definition here in the new design language rather
   than the markup being rewritten to suit the stylesheet.
   ========================================================================== */

/* -- hero: the tag strip under the fold line ------------------------------- */
.hero-product__strip {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  padding-top: var(--s-6); border-top: 1px solid var(--line);
}
.hero-product__strip-label { margin-bottom: var(--s-3); letter-spacing: .1em; text-transform: uppercase; }

/* -- phones side by side --------------------------------------------------- */
.phones, .field__phones {
  display: flex; gap: var(--s-4); justify-content: center; align-items: flex-start;
}
.phones .screen, .field__phones .screen { flex: 1 1 0; max-width: 232px; margin: 0; }
.screen--phone .screen__frame { border-radius: 22px; }
@media (max-width: 29.99rem) { .screen--phone-back { display: none; } }

/* -- the tour: four panels, tabbed when the script runs -------------------- */
/* White, because the grey band that follows it would otherwise merge into one
   featureless block three screens tall. */
.sec--tour { border-top: 1px solid var(--line); }
.tabs { margin-top: var(--s-10); }
.tabs__list {
  display: flex; gap: var(--s-1); list-style: none; overflow-x: auto;
  border-bottom: 1px solid var(--line); margin-bottom: var(--s-8);
  scrollbar-width: none;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tab {
  appearance: none; border: 0; background: none; cursor: pointer; font-family: inherit;
  padding: var(--s-3) var(--s-4); min-height: 48px; white-space: nowrap;
  font-size: var(--t-sm); font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--navy); }
.tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tabs__panels { display: grid; gap: var(--band-tight); }
.js .tabs__panels { display: block; }
.js .tabp[hidden] { display: none; }
.tabp { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.25rem); align-items: center; }
@media (min-width: 62rem) { .tabp { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.tabp__copy .h3 { margin-top: var(--s-1); }
.tabp__vis { min-width: 0; }

/* -- the paired contract / project shot ------------------------------------ */
.pair { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.25rem); align-items: center; margin-top: var(--s-10); }
@media (min-width: 62rem) { .pair { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.pair__vis { min-width: 0; }
.pair__copy .h3, .pair__copy h3 { margin-bottom: var(--s-3); }

/* -- feature list beside a screen ------------------------------------------ */
.feat { align-items: center; }
.feat__grid { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 40rem) { .feat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feat__item { min-width: 0; }
.feat__title { font-size: var(--t-h4); font-weight: 640; color: var(--c-heading); letter-spacing: -.008em; }
.feat__body { margin-top: var(--s-1); font-size: var(--t-sm); color: var(--c-text-muted); }

/* -- numbered stages ------------------------------------------------------- */
.stages { list-style: none; margin-top: var(--s-8); border-bottom: 1px solid var(--line); }
.stage__title { margin-top: var(--s-1); font-size: var(--t-h4); font-weight: 640; color: var(--c-heading); letter-spacing: -.008em; }
.stage__body { margin-top: var(--s-1); font-size: var(--t-sm); color: var(--c-text-muted); }
@media (min-width: 52rem) {
  .stage { display: grid; grid-template-columns: 4rem minmax(0, 1fr); column-gap: var(--s-6); align-items: baseline; }
  .stage__num { grid-row: 1 / span 2; padding-top: .35em; }
  .stage__title { margin-top: 0; }
}

/* -- the product ecosystem ------------------------------------------------- */
.eco:has(.eco__grid) { display: block; }
.eco__foundation {
  display: block; padding: clamp(var(--s-6), 3vw, var(--s-10)); text-align: center;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--e-1); color: inherit;
}
.eco__foundation:hover { border-color: var(--accent); color: inherit; }
.eco__foundation .h3 { margin-top: var(--s-2); }
.eco__foundation .body { margin-top: var(--s-2); color: var(--c-text-muted); }
.eco__foundation .link { margin-top: var(--s-5); }
.eco__grid { display: grid; gap: var(--s-4); }
@media (min-width: 46rem) { .eco__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .eco__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
a.eco__item { color: inherit; transition: border-color var(--d) var(--ease), box-shadow var(--d) var(--ease); }
a.eco__item:hover { border-color: var(--line-2); box-shadow: var(--e-1); color: inherit; }
.eco__item p { margin-top: var(--s-1); font-size: var(--t-sm); color: var(--c-text-muted); }

/* -- callout pins over a screen -------------------------------------------- */
.shot__pins { position: absolute; inset: 0; pointer-events: none; }
.hero-pin {
  position: absolute; z-index: 2; display: none; align-items: center; gap: var(--s-2);
  padding: .4rem .75rem; border-radius: var(--r-pill); border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: var(--t-xs); font-weight: 620; color: var(--navy); white-space: nowrap; box-shadow: var(--e-2);
}
.hero-pin__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
@media (min-width: 62rem) { .hero-pin { display: inline-flex; } }
.hero-pin--a { top: 12%; right: -1.25rem; }
.hero-pin--b { top: 47%; left: -1.5rem; }
.hero-pin--c { bottom: 14%; right: -0.5rem; }

/* -- bento one-wide -------------------------------------------------------- */
@media (min-width: 70rem) { .bento__card--one { grid-column: span 1; } }
a.bento__card { color: inherit; transition: box-shadow var(--d) var(--ease), transform var(--d) var(--ease), border-color var(--d) var(--ease); }
@media (hover: hover) { a.bento__card:hover { box-shadow: var(--e-2); transform: translateY(-2px); border-color: var(--line-2); color: inherit; } }

/* -- module rows ----------------------------------------------------------- */
.module__body { display: block; min-width: 0; }

/* -- numbered rule list ---------------------------------------------------- */
@media (min-width: 52rem) {
  .rule-list--num .rule-list__row { grid-template-columns: 3.25rem minmax(0, 15rem) minmax(0, 1fr); column-gap: var(--s-6); }
  .rule-list--num .rule-list__num { grid-row: 1 / span 2; margin: 0; padding-top: .45em; }
  .rule-list--num .rule-list__term { grid-column: 2; }
  .rule-list--num .rule-list__def { grid-column: 3; grid-row: 1; }
  .rule-list--num .link { grid-column: 3; justify-self: start; }
}
a.rule-list__row { color: inherit; }
a.rule-list__row:hover { color: inherit; }
a.rule-list__row:hover .rule-list__term { color: var(--accent); }
a.rule-list__row:hover .link::after { transform: translateX(3px); }

/* -- single / double column card grids ------------------------------------- */
.defs--1 { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 40rem) { .defs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.check-list--1 { grid-template-columns: minmax(0, 1fr); }

/* -- accordion icon -------------------------------------------------------- */
.acc__btn:has(.acc__icon)::after { content: none; }
.acc__icon { position: relative; width: 14px; height: 14px; flex: none; }
.acc__icon::before, .acc__icon::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 1.6px;
  background: var(--accent); border-radius: 2px; transition: transform var(--d) var(--ease);
}
.acc__icon::after { transform: rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: rotate(0deg); }
.acc__panel[hidden] { display: none; }
html:not(.js) .acc__panel { display: block !important; }

/* -- forms ----------------------------------------------------------------- */
.form__grid { display: grid; gap: var(--s-5); }
@media (min-width: 40rem) { .form__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form__grid > .field { margin-top: 0; }
.form__status { margin-bottom: var(--s-5); font-size: var(--t-sm); font-weight: 600; }
.form__status:empty { display: none; }
.form__status[data-state="error"] { color: #96022d; }
.form__status[data-state="ok"] { color: #0b6b3a; }
.field__control {
  width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4); font-family: inherit;
  font-size: var(--t-sm); color: var(--c-text); background: var(--card);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
}
textarea.field__control { min-height: 8rem; resize: vertical; }
.field__control:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 0; }
.field__control[aria-invalid="true"] { border-color: #96022d; }
.field__req { color: var(--accent); margin-left: 2px; }
.field__error { margin-top: var(--s-2); font-size: var(--t-xs); color: #96022d; }
.field__error:empty { display: none; }
.checks { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
@media (min-width: 40rem) { .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.check {
  display: flex; align-items: center; gap: var(--s-3); min-height: 48px;
  padding: var(--s-2) var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-size: var(--t-sm); background: var(--card); cursor: pointer;
}
.check:hover { border-color: var(--faint); }
.check input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* -- notes ----------------------------------------------------------------- */
.note--status { background: var(--bg-soft); border-left-color: var(--line-2); color: var(--c-text-muted); }

/* -- misc ------------------------------------------------------------------ */
.vis-frame--flush { border: 0; border-radius: 0; height: 100%; }
.vis-frame--flush .vis-photo { height: 100%; }
.vis .v-brand-soft { fill: var(--accent-50); }

/* -- theme switch ---------------------------------------------------------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--card); color: var(--navy); cursor: pointer;
}
.theme-toggle:hover { background: var(--bg-soft); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }

/* ==========================================================================
   15. DARK THEME
   --------------------------------------------------------------------------
   One opt-in theme, set by the switch in the header and remembered per device.
   The light theme is the designed default; this remaps the same tokens rather
   than restating any component, so a component added above inherits it.
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --navy: #e8eef7;          /* headings invert: the "navy" token is the heading colour */
  --navy-800: #0f1b2e;
  --navy-700: #16263d;
  --ink: #d3dde9;
  --muted: #9bacc2;         /* 6.0:1 on the dark ground */
  --faint: #7e90a7;

  --accent: #74a8f5;        /* lifted so it carries on a dark ground */
  --accent-700: #9cc2fa;
  --accent-300: #74a8f5;
  --accent-50: rgba(116, 168, 245, .14);
  --accent-fixed: #74a8f5;

  --bg: #080f1b;
  --bg-soft: #0c1524;
  --bg-sunk: #0a1120;
  --card: #0e1927;
  --line: #1c2a3d;
  --line-2: #2a3b52;

  --c-text: var(--ink);
  --c-text-muted: var(--muted);
  --c-heading: var(--navy);
  --c-surface: var(--bg);
  --c-line: var(--line);

  --hero-wash: linear-gradient(180deg, #0b1422 0%, #080f1b 70%);
  --hero-glow: rgba(116, 168, 245, .10);

  --e-1: 0 1px 2px rgba(0, 0, 0, .4);
  --e-2: 0 2px 4px rgba(0, 0, 0, .34), 0 12px 28px -12px rgba(0, 0, 0, .6);
  --e-3: 0 2px 6px rgba(0, 0, 0, .36), 0 40px 70px -32px rgba(0, 0, 0, .75);
}
/* The inverted band is already the darkest surface in the light theme; in the dark
   theme it has to step *away* from the page instead of towards it. */
:root[data-theme="dark"] .sec--inv,
:root[data-theme="dark"] .cta-band,
:root[data-theme="dark"] .site-footer { background: #050a13; }
:root[data-theme="dark"] .sec--inv { --card: rgba(255, 255, 255, .04); }
:root[data-theme="dark"] .site-header { background: rgba(8, 15, 27, .86); }
:root[data-theme="dark"] .mobile-nav { background: var(--bg); }
:root[data-theme="dark"] .skip-link { background: var(--card); color: var(--navy); }
:root[data-theme="dark"] .skip-link:focus { color: var(--navy); }
:root[data-theme="dark"] .btn { color: #071020; }
:root[data-theme="dark"] .btn:hover { color: #071020; }
:root[data-theme="dark"] .btn--secondary,
:root[data-theme="dark"] .btn--ghost { color: var(--navy); }
:root[data-theme="dark"] .btn--secondary:hover,
:root[data-theme="dark"] .btn--ghost:hover { color: var(--navy); }
:root[data-theme="dark"] .sec--inv .btn--secondary,
:root[data-theme="dark"] .cta-band .btn--secondary { color: #fff; }
:root[data-theme="dark"] .nav-toggle, :root[data-theme="dark"] .theme-toggle { background: var(--card); color: var(--navy); }
:root[data-theme="dark"] .nav-toggle__bars,
:root[data-theme="dark"] .nav-toggle__bars::before,
:root[data-theme="dark"] .nav-toggle__bars::after { background: var(--navy); }
:root[data-theme="dark"] .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
/* The icon artwork is dark line work on transparent, so it disappears on a dark card. */
:root[data-theme="dark"] .module__icon { filter: brightness(0) invert(1); opacity: .78; }
:root[data-theme="dark"] .footer-brand img { filter: brightness(0) invert(1); }
:root[data-theme="dark"] .callout, :root[data-theme="dark"] .hero-pin {
  background: rgba(14, 25, 39, .92); color: var(--navy); border-color: var(--line-2);
}
:root[data-theme="dark"] .pcard__media::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .7) 100%);
}
:root[data-theme="dark"] .note { background: var(--accent-50); }
:root[data-theme="dark"] .field__error, :root[data-theme="dark"] .form__status[data-state="error"] { color: #ff9ab0; }
:root[data-theme="dark"] .form__status[data-state="ok"] { color: #6fd79c; }
:root[data-theme="dark"] .field__control[aria-invalid="true"] { border-color: #ff9ab0; }
/* The photography is dimmed a touch on the dark theme so it does not glare out of the
   page. The interface screenshots are NOT: a brightness/contrast filter over a
   screenshot is still an alteration of the screenshot, and these are meant to be shown
   exactly as the product renders them. The frame's border carries the edge instead. */
:root[data-theme="dark"] .vis-photo { filter: brightness(.92) contrast(1.02); }

/* ==========================================================================
   16. HEADER BAR AT SMALL WIDTHS
   --------------------------------------------------------------------------
   The bar carries five things at once on a phone — wordmark, theme switch,
   the demo button and the menu button — so each one is measured against the
   narrowest width it has to survive rather than left to wrap.
   ========================================================================== */
@media (max-width: 63.99rem) {
  /* The desktop list is hidden, but the <nav> around it still takes a flex gap. */
  .site-header nav[aria-label="Main"] { display: none; }
}
@media (max-width: 29.99rem) {
  .header-actions .btn { padding-inline: var(--s-3); font-size: .875rem; }
}
@media (max-width: 25.99rem) {
  .wordmark img { width: 80px; }
}
@media (max-width: 22.99rem) {
  /* Below about 368px there is no room for it; the menu carries it instead. */
  .header-actions .btn { display: none; }
}

/* ==========================================================================
   17. FIXES AGAINST THE RECOVERED MARKUP
   ========================================================================== */
/* The workflow strip carries a second, aria-hidden copy of the chain: it fed the
   marquee the old build ran. The marquee is gone, so the copy is hidden too. */
.chain-strip__track .chain[aria-hidden="true"] { display: none; }
/* Nine steps have to fit a 1148px container on a desktop and scroll below that;
   .chain__step sets that width where the component is defined. */
/* A standalone label following a section head needs its own air. */
.sec-head + .eyebrow { margin-top: var(--s-10); }
/* A <picture> is the flex child here, not the <img>, so it needs the size. */
.module__link > picture { display: block; flex: none; width: 28px; height: 28px; }
.module__link > picture > .module__icon { width: 100%; height: 100%; object-fit: contain; }
/* The wordmark is navy artwork with a crimson mark; inverting it would lose the
   mark's colour, so the dark theme swaps in a variant that only lifts the navy. */
:root[data-theme="dark"] .wordmark img,
:root[data-theme="dark"] .footer-brand img {
  content: url('../img/kivo-wordmark-dark.svg');
  filter: none;
}

/* The form is a stack of grids; each row needs the same air a single field gets. */
.form > * + * { margin-top: var(--s-5); }
.form fieldset { border: 0; padding: 0; margin: 0; }
.form .checks { margin-top: var(--s-3); }

/* The CTA band and the footer share a ground, so without a line they read as one
   very tall dark block with an unexplained gap in the middle. */
.site-footer { border-top: 1px solid var(--line-inv); }
.cta-band { padding-block: var(--band) var(--band-tight); }
.acc, .feat__grid { list-style: none; }
:root[data-theme="dark"] .sec--inv .btn:not(.btn--secondary):not(.btn--ghost):hover,
:root[data-theme="dark"] .cta-band .btn:not(.btn--secondary):not(.btn--ghost):hover { background: #9cc2fa; color: #071020; }
/* Matching the specificity of the inverted-band rule above, so the dark theme's
   dark-on-blue button text is not outranked by its white-on-blue default. */
:root[data-theme="dark"] .sec--inv .btn:not(.btn--secondary):not(.btn--ghost),
:root[data-theme="dark"] .cta-band .btn:not(.btn--secondary):not(.btn--ghost) { color: #071020; }

/* ==========================================================================
   18. COMPACT INDUSTRY LINKS (homepage)
   --------------------------------------------------------------------------
   Hairline rows rather than another grid of boxed cards, so the homepage does not
   show the same card shape four times before a visitor reaches the enquiry form.
   ========================================================================== */
.ind-grid { list-style: none; display: grid; gap: 0 var(--s-8); margin-top: var(--s-8); }
@media (min-width: 46rem) { .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .ind-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ind-grid > li { border-top: 1px solid var(--line); }
.ind {
  display: block; padding: var(--s-5) 0; color: inherit;
  transition: padding-left var(--d) var(--ease);
}
.ind__name {
  display: block; font-size: var(--t-h4); font-weight: 640; color: var(--c-heading);
  letter-spacing: -.008em;
}
.ind__name::after { content: " →"; color: var(--accent); white-space: nowrap; }
.ind__line { display: block; margin-top: var(--s-1); font-size: var(--t-sm); color: var(--c-text-muted); }
@media (hover: hover) {
  .ind:hover { padding-left: var(--s-2); color: inherit; }
  .ind:hover .ind__name { color: var(--accent); }
}

/* ==========================================================================
   19. CLOSING THE DEAD SPACE
   --------------------------------------------------------------------------
   Three different causes, all of which read to a visitor as the page having
   stopped: a grid row stretched to its tallest card, a short image column
   beside a tall text column, and a list with no closing rule.
   ========================================================================== */

/* A one-wide bento card sat next to a two-wide one inherits its row height, which
   left a hollow third under the text. The artwork takes up the slack instead. */
@media (min-width: 46rem) {
  .bento__card--one .bento__vis { flex: 1 1 auto; min-height: 0; display: flex; }
  .bento__card--one .bento__vis .screen { flex: 1; min-height: 11rem; }
  .bento__card--one .bento__vis .screen__frame { height: 100%; aspect-ratio: auto; }
  .bento__card--one .bento__vis .screen__img { height: 100%; object-fit: cover; object-position: left top; }
  .bento__card--one .bento__body { flex: none; }
}

/* The feature list runs taller than the screen beside it, so centring the pair left
   a half-screen of nothing under the artwork. Top-align and let it sit. */
.feat { align-items: start; }
.feat > :first-child { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
@media (max-width: 61.99rem) { .feat > :first-child { position: static; } }

/* Same for the contract-and-project pair: the copy is short, the screen is tall. */
.pair { align-items: center; }
.pair > :last-child { align-self: center; }

/* Six links in two complete rows: the grid needs a rule under the last one, or it
   reads as cut off rather than finished. */
.ind-grid { border-bottom: 1px solid var(--line); }
.ind-grid + .btn-row { margin-top: var(--s-6); }

/* ==========================================================================
   20. INTERACTION POLISH
   ========================================================================== */
/* The header earns its edge only once there is something behind it to separate from. */
.site-header { transition: box-shadow var(--d) var(--ease), border-color var(--d) var(--ease); }
.site-header[data-scrolled="true"] {
  border-bottom-color: var(--line-2);
  box-shadow: 0 1px 3px rgba(6, 19, 41, .05), 0 8px 24px -16px rgba(6, 19, 41, .22);
}
:root[data-theme="dark"] .site-header[data-scrolled="true"] {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 8px 24px -16px rgba(0, 0, 0, .8);
}

/* The current page gets a mark under it, not just a tint, so it reads at a glance. */
.nav__link { position: relative; }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--accent);
}

/* The screen beside a long list stays with the reader instead of scrolling away. */
@media (min-width: 62rem) {
  /* A sticky grid item has to be top-aligned: stretched or centred it is exactly as
     tall as its row and has nowhere to travel. */
  .tabp__vis, .pair__vis { position: sticky; top: calc(var(--header-h) + var(--s-6)); align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .feat > :first-child, .tabp__vis, .pair__vis { position: static; }
}

/* A card that can be clicked should say so under the cursor before it is clicked. */
@media (hover: hover) {
  .solution__link, .module__link, .eco__foundation, a.eco__item, a.bento__card, .pcard, .ind {
    transition: box-shadow var(--d) var(--ease), transform var(--d) var(--ease),
      border-color var(--d) var(--ease), background-color var(--d) var(--ease),
      padding-left var(--d) var(--ease);
  }
}

/* The eight-item list runs taller than a 16:9 screen beside it. Cropping the screen to
   a squarer frame both closes most of that gap and shows the interface larger. */
@media (min-width: 62rem) {
  .feat > :first-child .screen__frame { aspect-ratio: 4 / 3; }
  .feat > :first-child .screen__img { height: 100%; object-fit: cover; object-position: left top; }
}


/* ==========================================================================
   21. MEGA MENU — Products and Services
   --------------------------------------------------------------------------
   The panel lives inside <header>, so the pointer can travel from the bar into
   the cards without ever leaving the element that keeps the menu open. That is
   what stops the flicker that a sibling panel would produce.

   While a panel is open the bar takes the panel's own dark ground, so the two
   read as one surface rather than a light bar with a dark box hanging off it.
   Every override below is scoped to that state and reverses on close.
   ========================================================================== */
:root {
  --mega-bg: #0b1f3d;
  --mega-card: rgba(255, 255, 255, .055);
  --mega-card-hover: rgba(255, 255, 255, .105);
  --mega-line: rgba(255, 255, 255, .16);
  --mega-text: rgba(255, 255, 255, .66);
  --mega-tile: #eef2f8;
}
:root[data-theme="dark"] { --mega-bg: #0a1424; --mega-tile: #dfe7f2; }

/* -- the bar, while a panel is open ---------------------------------------- */
.site-header[data-mega-open="true"] {
  background: var(--mega-bg);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
.site-header[data-mega-open="true"] .wordmark img { content: url('../img/kivo-wordmark-dark.svg'); }
.site-header[data-mega-open="true"] .nav__link { color: rgba(255, 255, 255, .82); }
.site-header[data-mega-open="true"] .nav__link:hover,
.site-header[data-mega-open="true"] .nav__link[aria-expanded="true"] { background: none; color: #fff; }
.site-header[data-mega-open="true"] .nav__link[aria-current="page"],
.site-header[data-mega-open="true"] .nav__link[data-current="page"] { background: none; color: #fff; }
.site-header[data-mega-open="true"] .nav__link[aria-current="page"]::after { background: var(--accent-300); }
.site-header[data-mega-open="true"] .theme-toggle,
.site-header[data-mega-open="true"] .nav-toggle {
  background: rgba(255, 255, 255, .08); border-color: var(--mega-line); color: #fff;
}
.site-header[data-mega-open="true"] .nav-toggle__bars,
.site-header[data-mega-open="true"] .nav-toggle__bars::before,
.site-header[data-mega-open="true"] .nav-toggle__bars::after { background: #fff; }
.site-header[data-mega-open="true"] .btn--secondary {
  background: transparent; color: #fff; border-color: var(--mega-line);
}
.site-header[data-mega-open="true"] .btn--secondary:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* -- the trigger ----------------------------------------------------------- */
.nav__item--mega { position: static; }
.nav__link--mega { position: relative;
  appearance: none; border: 0; cursor: pointer; font-family: inherit; gap: 6px;
  background: none;
}
.nav__chev {
  width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--d) var(--ease); opacity: .62;
}
.nav__link--mega[aria-expanded="true"] .nav__chev { transform: translateY(1px) rotate(225deg); opacity: 1; }
/* The open trigger is marked under the bar, as the reference does. */
.nav__link--mega[aria-expanded="true"]::after {
  content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: -15px;
  height: 2px; border-radius: 2px; background: var(--accent-300);
}
/* A hidden panel must not be reachable by Tab even while the browser is mid-transition. */
.mega[hidden] { display: none; }

/* -- the panel ------------------------------------------------------------- */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--mega-bg); color: rgba(255, 255, 255, .82);
  border-bottom: 1px solid var(--mega-line);
  padding-block: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem) clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  max-height: calc(100vh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
}
.js .mega {
  opacity: 0; transform: translateY(-6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.js .mega[data-open="true"] { opacity: 1; transform: none; }
.mega__grid { display: grid; gap: 0; }
@media (min-width: 64rem) {
  .mega__grid { grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: auto auto; }
  .mega__side { grid-column: 1; grid-row: 1; }
  .mega__panes { grid-column: 2; grid-row: 1 / span 2; }
  .mega__links { grid-column: 1; grid-row: 2; align-self: end; padding-top: var(--s-8); }
}

/* -- sidebar --------------------------------------------------------------- */
.mega__side { display: flex; flex-direction: column; padding-right: var(--s-8); }
.mega__overview {
  font-size: 1.05rem; font-weight: 640; color: #fff; letter-spacing: -.01em;
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--mega-line); margin-bottom: var(--s-4);
}
.mega__overview:hover { color: var(--accent-300); }
.mega__cats { display: flex; flex-direction: column; align-items: flex-start; }
.mega__cat {
  appearance: none; background: none; border: 0; cursor: pointer; font-family: inherit;
  position: relative; width: 100%; text-align: left;
  padding: .72rem 0 .72rem var(--s-4); margin-left: calc(var(--s-4) * -1 + 0px);
  font-size: 1.02rem; font-weight: 560; color: rgba(255, 255, 255, .74);
  letter-spacing: -.008em; border-radius: var(--r-sm);
  transition: color var(--d) var(--ease);
}
.mega__cat::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(.2);
  width: 3px; height: 1.35em; border-radius: 2px; background: var(--accent-300);
  opacity: 0; transition: opacity var(--d) var(--ease), transform var(--d) var(--ease);
}
.mega__cat:hover { color: #fff; }
.mega__cat[aria-selected="true"] { color: #fff; font-weight: 620; }
.mega__cat[aria-selected="true"]::before { opacity: 1; transform: translateY(-50%) scaleY(1); }
.mega__links {
  padding-top: var(--s-6); display: flex; flex-direction: column;
  gap: var(--s-2); font-size: var(--t-sm); padding-right: var(--s-8);
}
.mega__links a { color: var(--mega-text); }
.mega__links a:hover { color: #fff; }

/* -- cards ----------------------------------------------------------------- */
.mega__panes { min-width: 0; }
@media (min-width: 64rem) {
  .mega__panes { border-left: 1px solid var(--mega-line); padding-left: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
}
.mega__pane[hidden] { display: none; }
.mega__cards { list-style: none; display: grid; gap: var(--s-4); }
@media (min-width: 46rem) { .mega__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .mega__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mcard {
  display: flex; align-items: flex-start; gap: var(--s-4); height: 100%;
  padding: var(--s-4); border-radius: var(--r); background: var(--mega-card);
  color: inherit; transition: background-color var(--d) var(--ease), transform var(--d) var(--ease);
}
.mcard:hover { background: var(--mega-card-hover); color: inherit; }
@media (hover: hover) { .mcard:hover { transform: translateY(-1px); } }
.mcard__icon {
  flex: none; width: 52px; height: 52px; border-radius: 11px; background: var(--mega-tile);
  display: grid; place-items: center;
}
.mcard__icon img { width: 29px; height: 29px; }
.mcard__text { min-width: 0; }
.mcard__title {
  display: block; font-size: 0.97rem; font-weight: 650; color: #fff; letter-spacing: -.008em;
  line-height: 1.3;
}
.mcard__desc { display: block; margin-top: 3px; font-size: var(--t-xs); color: var(--mega-text); line-height: 1.45; }

/* -- the ground behind ----------------------------------------------------- */
.mega-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(6, 19, 41, .3);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  opacity: 0; transition: opacity .16s var(--ease);
}
.mega-scrim[data-open="true"] { opacity: 1; }
body[data-mega-open="true"] { overflow: hidden; }

/* Hover is the desktop affordance only; below the nav breakpoint the panels are not
   reachable from the bar at all, and the mobile drawer carries the same cards. */
@media (max-width: 63.99rem) {
  .mega, .mega-scrim { display: none !important; }
}

/* ==========================================================================
   22. MEGA MENU ON A TOUCH SCREEN
   --------------------------------------------------------------------------
   No hover to work with, so the same cards become disclosures inside the panel
   that already exists. One column, full-size tap targets, nothing clipped.
   ========================================================================== */
.m-item { list-style: none; }
.m-link--toggle {
  appearance: none; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line);
  cursor: pointer; font-family: inherit; justify-content: space-between;
}
.m-chev {
  width: 9px; height: 9px; flex: none; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); transform: translateY(-3px) rotate(45deg);
  transition: transform var(--d) var(--ease);
}
.m-link--toggle[aria-expanded="true"] .m-chev { transform: translateY(2px) rotate(225deg); }
.m-panel { padding: var(--s-4) 0 var(--s-6); }
.m-panel[hidden] { display: none; }
.m-sub {
  display: inline-flex; align-items: center; min-height: 40px;
  font-size: var(--t-sm); font-weight: 620; color: var(--accent);
}
.m-group {
  margin: var(--s-5) 0 var(--s-3); font-size: var(--t-xs); font-weight: 650;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.m-cards { list-style: none; display: grid; gap: var(--s-2); }
.m-cards .mcard {
  background: var(--bg-soft); border: 1px solid var(--line); min-height: 56px; padding: var(--s-3);
}
.m-cards .mcard:hover { background: var(--bg-sunk); }
.m-cards .mcard__icon { width: 38px; height: 38px; background: #fff; border: 1px solid var(--line); }
.m-cards .mcard__icon img { width: 22px; height: 22px; }
.m-cards .mcard__title { color: var(--navy); }
.m-cards .mcard__desc { color: var(--c-text-muted); }
:root[data-theme="dark"] .m-cards .mcard__icon { background: var(--mega-tile); border-color: transparent; }

/* Without the script the triggers are buttons that nothing is listening to, so the
   panels fall back to a plain hover-and-focus reveal. The bar keeps its light ground
   in that case — there is no script to put it back afterwards. */
html:not(.js) .mega { opacity: 1; transform: none; }
html:not(.js) .nav__item--mega:hover .mega[hidden],
html:not(.js) .nav__item--mega:focus-within .mega[hidden] { display: block; }

/* ==========================================================================
   23. SEE HOW KIVO WORKS
   --------------------------------------------------------------------------
   Pick an operation, then step through four stages of a day's work with the
   screen each stage happens in. Two tab layers — the operation and the step —
   so a visitor can stop at either depth.
   ========================================================================== */
.how { margin-top: var(--s-8); }

/* -- choosing the operation ------------------------------------------------ */
.how__picks {
  display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--r-pill);
  background: var(--bg-sunk); border: 1px solid var(--line);
}
.how__pick {
  appearance: none; border: 0; cursor: pointer; font-family: inherit;
  min-height: 42px; padding: 0 var(--s-5); border-radius: var(--r-pill);
  background: none; font-size: var(--t-sm); font-weight: 620; color: var(--muted);
  transition: background-color var(--d) var(--ease), color var(--d) var(--ease);
}
.how__pick:hover { color: var(--navy); }
.how__pick[aria-selected="true"] {
  background: var(--card); color: var(--navy); box-shadow: var(--e-1);
}
:root[data-theme="dark"] .how__pick[aria-selected="true"] { color: #fff; }

.how__pane[hidden] { display: none; }
.how__who {
  margin-top: var(--s-6); font-size: var(--t-xs); font-weight: 650; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.how__lead { margin-top: var(--s-2); font-size: var(--t-h3); font-weight: 650; color: var(--c-heading); letter-spacing: -.014em; }

/* -- the steps beside the screen ------------------------------------------- */
.how__layout { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3rem); margin-top: var(--s-8); align-items: start; }
@media (min-width: 62rem) { .how__layout { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); } }

.how__steps { list-style: none; display: grid; gap: var(--s-2); }
.how__step {
  appearance: none; border: 1px solid transparent; cursor: pointer; font-family: inherit;
  display: flex; gap: var(--s-4); width: 100%; text-align: left;
  padding: var(--s-4); border-radius: var(--r); background: none;
  transition: background-color var(--d) var(--ease), border-color var(--d) var(--ease);
}
.how__step:hover { background: var(--card); }
.how__step[aria-selected="true"] { background: var(--card); border-color: var(--line); box-shadow: var(--e-1); }
.how__n {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 600;
  background: var(--bg-sunk); color: var(--muted);
  transition: background-color var(--d) var(--ease), color var(--d) var(--ease);
}
.how__step[aria-selected="true"] .how__n { background: var(--accent); color: #fff; }
:root[data-theme="dark"] .how__step[aria-selected="true"] .how__n { color: #071020; }
.how__body { min-width: 0; }
.how__title { display: block; font-size: var(--t-h4); font-weight: 640; color: var(--c-heading); letter-spacing: -.008em; }
.how__text { display: block; margin-top: var(--s-2); font-size: var(--t-sm); color: var(--c-text-muted); }
/* The capability each step rests on, named so the claim is checkable. */
.how__proof {
  display: none; margin-top: var(--s-3); font-size: var(--t-xs); color: var(--faint);
  font-family: var(--mono); letter-spacing: .01em;
}
.how__step[aria-selected="true"] .how__proof { display: block; }

.how__stage { position: relative; min-width: 0; }
/* On a phone the screen sits above the steps; a pinned one ended up drawn across them.
   Tapping a step scrolls it back into view instead — see kivo.js. */
@media (max-width: 61.99rem) {
  .how__layout { display: flex; flex-direction: column; }
  .how__stage { order: -1; margin-bottom: var(--s-5); scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
}
@media (min-width: 62rem) {
  .how__stage { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}
@media (prefers-reduced-motion: reduce) { .how__stage { position: static; } }
.how__shot[hidden] { display: none; }
.how__shot .screen { margin: 0; }
.how__shot .screen__note { display: none; }
.how__note {
  margin-top: var(--s-3); font-size: var(--t-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.how__more { margin-top: var(--s-8); }

/* -- what each product actually does, on its card -------------------------- */
.pcard__who {
  flex: none; margin-top: var(--s-2); font-size: var(--t-xs); font-weight: 620; color: var(--accent);
}
.pcard__does {
  list-style: none; display: grid; gap: var(--s-2); margin-top: var(--s-4); flex: 1;
}
.pcard__does li {
  position: relative; padding-left: 1.4rem; font-size: var(--t-sm); color: var(--c-text);
}
.pcard__does li::before {
  content: ""; position: absolute; left: 1px; top: .52em; width: .42rem; height: .22rem;
  border-left: 1.8px solid var(--accent); border-bottom: 1.8px solid var(--accent);
  transform: rotate(-45deg);
}
.pcard__body > p.pcard__who + .pcard__does { margin-top: var(--s-4); }
/* A phone capture in the wide stage: held to a phone's width and centred. */
.how__shot--phone { display: flex; justify-content: center; }
.how__shot--phone .screen { width: min(100%, 300px); }
.how__shot--phone .screen__frame { border-radius: 22px; }

/* ==========================================================================
   24. PRODUCTS PAGE — THREE TIERS
   The products page now reads in three tiers: the three products a business
   buys, the Core underneath them, then the four that extend the same platform.
   The fourth tier sits in one column of a split, so the three-up industry grid
   has to collapse to a single column there regardless of viewport width.
   ========================================================================== */
.ind-grid--1 { margin-top: var(--s-5); }
@media (min-width: 46rem) { .ind-grid--1 { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 70rem) { .ind-grid--1 { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   25. MEGA MENU — THE THREE PRODUCTS FIRST
   The Products panel opens on two groups, not one list of eight. The three
   products a business buys are the lead group: same cards, stronger ground and
   an accent rule, so the eye lands on them before it reads anything else. The
   foundation and the four that extend it keep the ordinary card treatment and
   stay one click away.
   ========================================================================== */
.mega__group {
  margin: 0 0 var(--s-3); font-size: var(--t-xs); font-weight: 650;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5);
}
.mega__cards + .mega__group { margin-top: var(--s-7); }
.mega__cards--lead .mcard {
  background: rgba(255, 255, 255, .085);
  box-shadow: inset 2px 0 0 var(--accent-300);
}
.mega__cards--lead .mcard:hover { background: rgba(255, 255, 255, .14); }
.mega__cards--lead .mcard__title { font-size: 1.04rem; }

/* The same two groups inside the touch drawer, where there is one column. */
.m-group--sub {
  margin: var(--s-4) 0 var(--s-2); letter-spacing: .1em;
  font-size: calc(var(--t-xs) * .94); color: var(--faint);
}
.m-group + .m-group--sub { margin-top: 0; }
.m-cards--lead .mcard { background: var(--bg-soft); box-shadow: inset 2px 0 0 var(--accent); }
.m-cards--lead .mcard__title { font-weight: 680; }

/* ==========================================================================
   26. WALKTHROUGH — WHO DOES IT, AND WHAT THE OWNER SEES
   A visitor's first question is not "what features are there" but "who in my
   company would use this, and what would I see". Each step now names the person
   who does that piece of work, and each walk ends with what the owner can read
   off it. The capability line under the owner block is the same one the walk's
   last step already rests on, so it carries the same proof as the steps.
   ========================================================================== */
.how__role {
  display: block; margin-top: var(--s-2);
  font-size: var(--t-xs); color: var(--c-text-muted);
}
.how__role-k {
  font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint); margin-right: .45em;
}
.how__step[aria-selected="true"] .how__role-k { color: var(--accent); }
.how__role + .how__text { margin-top: var(--s-3); }

.how__owner {
  margin-top: var(--s-6); padding: var(--s-5) var(--s-6);
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-soft);
}
.how__owner-h {
  font-size: var(--t-xs); font-weight: 650; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
}
.how__owner-t { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--c-text); max-width: 62ch; }
.how__owner .how__proof { display: block; margin-top: var(--s-3); }

/* ==========================================================================
   27. THE ASK, EARLIER
   One quiet row under the walkthrough: the heading and the two buttons on one
   line on a wide screen, stacked on a narrow one. No new colour, no new card —
   it is a line of the page, not a second hero.
   ========================================================================== */
.ask {
  display: flex; flex-direction: column; gap: var(--s-5);
}
@media (min-width: 52rem) {
  .ask { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-8); }
  .ask .btn-row { flex: none; margin-top: 0; }
}
.ask h2 { letter-spacing: -.012em; }
.ask p.sm { margin-top: var(--s-2); max-width: 46ch; }

/* ==========================================================================
   28. FULL-SIZE VIEW
   --------------------------------------------------------------------------
   Nothing is laid over the interface itself — no blur, no wash, no filter. The
   affordance is a small control in the corner of the frame that fades in on
   hover and is always there on a touch screen, where there is no hover to show
   it with. The dialog shows the picture at the source's own size and no larger;
   past that there is no more detail to reveal.
   ========================================================================== */
.screen__frame--zoomable { cursor: zoom-in; }
.screen__zoom {
  position: absolute; right: var(--s-3); bottom: var(--s-3); z-index: 2;
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 34px; padding: 0 var(--s-3); cursor: zoom-in;
  font-family: inherit; font-size: var(--t-xs); font-weight: 620; color: var(--navy);
  background: rgba(255, 255, 255, .94); border: 1px solid var(--line-2);
  border-radius: var(--r-pill); box-shadow: var(--e-1);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--d) var(--ease), transform var(--d) var(--ease);
}
.screen__frame--zoomable:hover .screen__zoom,
.screen__zoom:focus-visible { opacity: 1; transform: none; }
/* No hover to reveal it with, so it simply stays. */
@media (hover: none) { .screen__zoom { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .screen__zoom { transition: none; } }
.screen__zoom-glass {
  width: 13px; height: 13px; flex: none; position: relative;
  border: 1.6px solid currentColor; border-radius: 50%;
}
.screen__zoom-glass::after {
  content: ""; position: absolute; right: -4px; bottom: -3px;
  width: 6px; height: 1.6px; background: currentColor; transform: rotate(45deg);
}
@media (max-width: 29.99rem) { .screen__zoom-text { display: none; } }
@media (max-width: 29.99rem) { .screen__zoom { padding-inline: var(--s-2); } }

.lb[hidden] { display: none; }
.lb {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: clamp(.75rem, .4rem + 1.2vw, 1.5rem);
  background: rgba(4, 12, 26, .92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .18s var(--ease);
  overscroll-behavior: contain;
}
.lb[data-open="true"] { opacity: 1; }
body[data-lb-open="true"] { overflow: hidden; }
.lb__bar { display: flex; align-items: center; gap: var(--s-4); justify-content: space-between; flex: none; }
.lb__cap {
  font-size: var(--t-xs); font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.lb__close {
  display: inline-flex; align-items: center; gap: var(--s-2); flex: none;
  min-height: 40px; padding: 0 var(--s-4); cursor: pointer;
  font-family: inherit; font-size: var(--t-sm); font-weight: 620; color: #fff;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-pill);
}
.lb__close:hover { background: rgba(255, 255, 255, .2); }
.lb__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb__x { position: relative; width: 11px; height: 11px; }
.lb__x::before, .lb__x::after {
  content: ""; position: absolute; top: 50%; left: 0; width: 11px; height: 1.6px;
  background: currentColor;
}
.lb__x::before { transform: rotate(45deg); }
.lb__x::after { transform: rotate(-45deg); }

/* The picture fits the space that is left, and is never drawn larger than the file.
   --lb-w is set per image from the source's own width. */
/* flex-start with auto margins on the picture, not centred content: a centred flex item
   that overflows is cut off at BOTH ends and the near edge cannot be scrolled back to.
   The auto margins still centre it whenever there is room. */
.lb__stage {
  flex: 1 1 auto; min-height: 0; display: flex; align-items: flex-start; justify-content: flex-start;
  overflow: auto; overscroll-behavior: contain;
}
/* display:contents, so the <img> is the stage's own flex item: a percentage max-height
   on the image has to resolve against the stage, and inside a block <picture> it was
   resolving against the picture's own content height — which is the image — and so did
   nothing at all. That is what let the picture run 17px past the stage at 1440x900 and
   217px past it at 1440x700. */
.lb__stage picture { display: contents; }
.lb__img {
  display: block; margin: auto;
  width: auto; height: auto;
  /* Fitting a 1672px screenshot into a 366px phone shows the visitor nothing they could
     not already see, so on a narrow screen the picture is allowed to be bigger than the
     stage and the stage pans. It is never bigger than the file. */
  max-width: min(var(--lb-w, 100%), max(100%, 60rem));
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r); background: #fff;
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .7);
}
@media (min-width: 62rem) {
  .lb__img { max-width: min(100%, var(--lb-w, 100%)); }
}
.lb__img:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lb__note {
  flex: none; text-align: center; font-size: var(--t-xs);
  color: rgba(255, 255, 255, .55);
}
.lb__pan { display: none; }
@media (max-width: 61.99rem) { .lb__pan { display: inline; } }

/* ==========================================================================
   29. NOTHING OVER THE INTERFACE
   --------------------------------------------------------------------------
   The homepage carried three "pins" on the hero shot and four callout bubbles
   on each platform screenshot. They were drawn over the picture: on the new
   screens they cover the page title, a summary tile, both charts and the status
   column of the activity table.

   The brief for these screens is explicit that the images themselves stay clear
   and unobstructed, and the words the labels carried are in the copy beside each
   screenshot and in the hero's own tag strip, so nothing is lost by taking them
   off. The markup is untouched — this is one rule, and deleting it puts every
   label back exactly where it was.
   ========================================================================== */
.hero-pin, .callout { display: none !important; }

/* ==========================================================================
   30. BENTO TILES — NO CROPPED SCREENSHOTS
   --------------------------------------------------------------------------
   The one-wide tiles stretched their media to fill the card: a 270 x 325
   portrait box holding a 16:9 screenshot, with object-fit: cover anchored top
   left. That threw away 53% of the picture's width — the work orders, project,
   asset and contract tiles on the homepage and the Platform page were each
   showing a sliver of their own screenshot.

   The media area now keeps the same 16:9 frame the two-wide tiles use, so the
   whole screen is shown and the card body takes the remaining height.
   ========================================================================== */
@media (min-width: 70rem) {
  .bento__card--one .bento__vis { flex: none; }
  /* It still fills the card's width — flex: none here would size the figure to the
     image's intrinsic width and push it straight out of the card. */
  .bento__card--one .bento__vis .screen { flex: 1 1 auto; min-width: 0; min-height: 0; }
  .bento__card--one .bento__vis .screen__frame { height: auto; aspect-ratio: 16 / 9; }
  .bento__card--one .bento__vis .screen__img { height: auto; object-fit: contain; }
}

/* ==========================================================================
   31. THE THREE PRODUCTS, IN THE FIRST SCREEN
   --------------------------------------------------------------------------
   A strip of module tags used to sit here. It told a visitor what the software
   contains, which is not the question they arrive with — the question is "which
   one of these is mine". So the three products sit directly under the hero, each
   naming its trade and one thing the owner gets, each its own link.
   ========================================================================== */
.trio {
  list-style: none; display: grid; gap: var(--s-4);
  margin-top: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  padding-top: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 46rem) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trio__item { min-width: 0; display: flex; }
.trio__link {
  display: flex; flex-direction: column; flex: 1; gap: var(--s-1);
  padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); color: inherit; box-shadow: var(--e-1);
  transition: border-color var(--d) var(--ease), box-shadow var(--d) var(--ease),
    transform var(--d) var(--ease);
}
.trio__link:hover { color: inherit; border-color: var(--line-2); box-shadow: var(--e-2); }
@media (hover: hover) { .trio__link:hover { transform: translateY(-2px); } }
.trio__name {
  font-size: var(--t-h4); font-weight: 680; color: var(--c-heading); letter-spacing: -.012em;
}
.trio__who {
  font-size: var(--t-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent);
}
.trio__line { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--c-text); flex: 1; }
.trio__go {
  margin-top: var(--s-4); font-size: var(--t-sm); font-weight: 620; color: var(--accent);
  display: inline-flex; align-items: center; gap: .4rem;
}
.trio__go::after { content: "→"; transition: transform var(--d) var(--ease); }
.trio__link:hover .trio__go::after { transform: translateX(3px); }

/* The headline names three trades, so it is a sentence rather than a slogan: set one
   step down from display size and given a wider measure, it reads in four lines instead
   of six — which is what puts the three products inside the first screen on a laptop. */
.hero__head { max-width: 22ch; letter-spacing: -.026em; }
@media (min-width: 62rem) { .hero__head { max-width: 24ch; } }
.hero .lead { max-width: 30rem; }
/* Tighter above and below, for the same reason. */
.hero { padding-block: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem) clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); }
.trio { margin-top: clamp(1.25rem, .9rem + 1.2vw, 2rem); padding-top: clamp(1.25rem, .9rem + 1.2vw, 1.75rem); }

/* -- the first screen on a phone ------------------------------------------- */
/* Below the two-column breakpoint the hero artwork is what pushes the three products
   off the screen, so on a phone the order becomes headline, promise, buttons, the three
   products, then the artwork. The picture stays first in the markup — it is the largest
   paint and is preloaded — and only its visual order moves. The cards also lose their
   second label and their arrow row at this width: the whole card is the link, and the
   name plus one line is what makes a visitor recognise their own trade. */
@media (max-width: 61.99rem) {
  .hero .wrap--wide { display: flex; flex-direction: column; }
  .hero__grid { display: contents; }
  .hero__grid > div:not(.shot) { order: 1; }
  .trio { order: 2; }
  .hero .shot { order: 3; margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
  .trio { gap: var(--s-2); }
  .trio__link { padding: var(--s-3) var(--s-4); gap: 2px; }
  .trio__who, .trio__go { display: none; }
  .trio__line { margin-top: var(--s-1); }
}

/* ==========================================================================
   32. THE DEMO REQUEST
   --------------------------------------------------------------------------
   The long contact form asks nine questions. This asks three, and the product
   arrives already chosen from whichever card or page the visitor pressed. The
   WhatsApp option sits beside it rather than under it, because for a lot of
   operators in this region that is the way they would rather start.
   ========================================================================== */
.demo { display: grid; gap: clamp(1.75rem, 1.2rem + 2vw, 3rem); align-items: start; }
@media (min-width: 62rem) {
  .demo { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
.demo__form > .h3 { margin-bottom: var(--s-5); }
.demo__form .field + .form__grid, .demo__form .form__grid + .field { margin-top: var(--s-5); }

/* -- picking the product --------------------------------------------------- */
.field--picks { border: 0; padding: 0; margin: 0 0 var(--s-5); }
.field--picks legend { padding: 0; }
.picks { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
@media (min-width: 40rem) { .picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pick {
  display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer;
  padding: var(--s-3) var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--card); min-height: 56px;
  transition: border-color var(--d) var(--ease), background-color var(--d) var(--ease);
}
.pick:hover { border-color: var(--faint); }
/* Two classes, because the form's own `.field input` rule (one class, one type) would
   otherwise win and stretch the radio to the full width and 48px tall — which is exactly
   what pushed the label text out of the card. */
.pick .pick__input {
  flex: none; width: 18px; height: 18px; min-height: 0; padding: 0; margin: 3px 0 0;
  accent-color: var(--accent); border: 0; background: none; border-radius: 50%;
}
.pick__body { display: block; min-width: 0; }
.pick__name { display: block; font-size: var(--t-sm); font-weight: 650; color: var(--c-heading); }
.pick__who { display: block; margin-top: 1px; font-size: var(--t-xs); color: var(--c-text-muted); }
.pick:has(.pick__input:checked) { border-color: var(--accent); background: var(--accent-50); }
:root[data-theme="dark"] .pick:has(.pick__input:checked) { background: rgba(127, 169, 238, .1); }
.pick:has(.pick__input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.field__hint { margin-top: var(--s-5); font-size: var(--t-xs); color: var(--c-text-muted); }
.field__hint + .form__grid { margin-top: var(--s-2); }
.field__opt { font-weight: 500; color: var(--faint); font-size: var(--t-xs); }

/* -- the side column ------------------------------------------------------- */
.demo__side { display: grid; gap: var(--s-6); }
.demo__wa, .demo__next {
  padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-soft);
}
.demo__wa .btn-row { margin-top: var(--s-5); }
.demo__wa-btn { width: 100%; }
.demo__steps {
  list-style: none; counter-reset: s; margin-top: var(--s-4); display: grid; gap: var(--s-3);
}
.demo__steps li {
  counter-increment: s; position: relative; padding-left: 2rem;
  font-size: var(--t-sm); color: var(--c-text);
}
.demo__steps li::before {
  content: counter(s); position: absolute; left: 0; top: .05em;
  width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-50); color: var(--accent);
  font-size: var(--t-xs); font-weight: 700;
}
:root[data-theme="dark"] .demo__steps li::before { background: rgba(127, 169, 238, .14); }
.demo__caveat { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }

/* ==========================================================================
   33. THE PRODUCT PAGE'S FIRST SCREEN
   --------------------------------------------------------------------------
   Who it is for, what the day looks like without it, and three things the owner
   gets — set between the description and the buttons, so the whole decision is
   answerable without scrolling.
   ========================================================================== */
.phero__who {
  margin-top: var(--s-4); font-size: var(--t-xs); font-weight: 650;
  letter-spacing: .07em; text-transform: uppercase; color: var(--accent);
}
.phero__problem {
  margin-top: var(--s-4); font-size: var(--t-sm); color: var(--c-text-muted);
  max-width: 46ch; padding-left: var(--s-4); border-left: 2px solid var(--line-2);
}
.gains { list-style: none; margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.gains__item { position: relative; padding-left: 1.75rem; }
.gains__item::before {
  content: ""; position: absolute; left: 1px; top: .5em; width: .45rem; height: .24rem;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.gains__head {
  display: block; font-size: var(--t-sm); font-weight: 650; color: var(--c-heading);
}
.gains__tail { display: block; font-size: var(--t-xs); color: var(--c-text-muted); }

/* ==========================================================================
   34. FLOATING CONTACT BUTTON
   --------------------------------------------------------------------------
   One circle, bottom right, in the brand navy with the accent underneath it.
   Not a support widget: no bounce, no pulse, no auto-opening, no badge. It
   lifts 2px on hover and the icon swaps for a cross when the menu is open, and
   that is the whole of its animation.

   It sits above the page (95) but below the header (100), the drawer (90 with
   its own full-screen ground), and the full-size image view (200) — and it gets
   out of the way entirely while any of those is open, so it can never cover a
   menu the visitor just opened.
   ========================================================================== */
.fab {
  position: fixed; z-index: 95;
  right: max(var(--s-5), env(safe-area-inset-right, 0px));
  bottom: max(var(--s-5), env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-3);
}
/* Out of the way while the drawer, a mega panel or the full-size view is open. */
body[data-nav-open="true"] .fab,
body[data-mega-open="true"] .fab,
body[data-lb-open="true"] .fab { opacity: 0; pointer-events: none; }

.fab__toggle {
  position: relative; flex: none; width: 56px; height: 56px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; background: var(--navy); color: #fff;
  box-shadow: 0 10px 24px -8px rgba(6, 19, 41, .45), 0 2px 6px rgba(6, 19, 41, .18);
  transition: background-color var(--d) var(--ease), transform var(--d) var(--ease),
    box-shadow var(--d) var(--ease);
}
@media (max-width: 47.99rem) { .fab__toggle { width: 52px; height: 52px; } }
.fab__toggle:hover { background: var(--accent-700); }
@media (hover: hover) {
  .fab__toggle:hover { transform: translateY(-2px);
    box-shadow: 0 16px 30px -10px rgba(6, 19, 41, .5), 0 2px 6px rgba(6, 19, 41, .2); }
}
.fab__toggle:active { transform: translateY(0); }
.fab__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:root[data-theme="dark"] .fab__toggle { background: var(--accent); }
:root[data-theme="dark"] .fab__toggle:hover { background: var(--accent-300); color: #071020; }

/* The glyph swaps for a cross; both sit in the same grid cell so nothing shifts. */
.fab__glyph { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity var(--d) var(--ease); }
.fab__glyph--close { opacity: 0; }
.fab__toggle[aria-expanded="true"] .fab__glyph--phone { opacity: 0; }
.fab__toggle[aria-expanded="true"] .fab__glyph--close { opacity: 1; }

/* -- the tooltip, desktop only -------------------------------------------- */
.fab__tip {
  position: absolute; right: calc(100% + var(--s-3)); top: 50%;
  transform: translateY(-50%) translateX(4px);
  display: none; white-space: nowrap;
  padding: .3rem .6rem; border-radius: var(--r-sm);
  background: var(--navy); color: #fff; font-size: var(--t-xs); font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: opacity var(--d) var(--ease), transform var(--d) var(--ease);
}
@media (hover: hover) and (min-width: 48rem) { .fab__tip { display: block; } }
.fab__toggle:hover .fab__tip,
.fab__toggle:focus-visible .fab__tip { opacity: 1; transform: translateY(-50%); }
.fab__toggle[aria-expanded="true"] .fab__tip { display: none; }
:root[data-theme="dark"] .fab__tip { background: var(--bg-sunk); color: var(--c-heading); }

/* -- the menu -------------------------------------------------------------- */
.fab__menu[hidden] { display: none; }
.fab__menu {
  width: min(19rem, calc(100vw - 2 * var(--s-5)));
  padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--card); box-shadow: var(--e-3);
  display: grid; gap: 2px;
}
.js .fab__menu { opacity: 0; transform: translateY(6px) scale(.985); transform-origin: 100% 100%;
  transition: opacity .16s var(--ease), transform .16s var(--ease); }
.js .fab__menu[data-open="true"] { opacity: 1; transform: none; }

.fab__item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3); border-radius: var(--r); color: inherit; min-height: 56px;
  transition: background-color var(--d) var(--ease);
}
.fab__item:hover, .fab__item:focus-visible { background: var(--bg-soft); color: inherit; }
.fab__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fab__ico {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-50); color: var(--accent);
}
:root[data-theme="dark"] .fab__ico { background: rgba(127, 169, 238, .14); }
.fab__label { min-width: 0; }
.fab__title { display: block; font-size: var(--t-sm); font-weight: 650; color: var(--c-heading); }
.fab__sub { display: block; font-size: var(--t-xs); color: var(--c-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .fab__toggle, .fab__glyph, .fab__tip, .fab__menu { transition: none; }
  @media (hover: hover) { .fab__toggle:hover { transform: none; } }
}

/* Print has no use for it. */
@media print { .fab { display: none !important; } }