/* ============================================================
   Intelica — marketing site (content-complete, single page)
   Plain CSS, no build step. Desktop-accurate at 1440px; fluid
   1280–1600 (--maxw cap). Design tokens as vars, light + dark.

   ORGANIZATION: grouped by page section, in page order. Each
   section block co-locates its own dark-theme overrides and
   media queries, and carries revert notes in its banner.

   TABLE OF CONTENTS (Ctrl+F the "§N ·" tags)
   §1  · Fonts (self-hosted Geist)
   §2  · Design tokens (light + dark)
   §3  · Reset / base + utilities (.container, .sr-only, focus)
   §4  · Navbar (+ nav dropdowns)
   §5  · Buttons
   §6  · Hero (visual layers → "CARD FACE", dash panel)
   §7  · Content — stat band + logo marquee ("STAT BAND" glass)
   §8  · Platform (monitor mockup → "MONITOR SCREEN DASHBOARD")
   §9  · Services (4 product cards)
   §10 · Tools (switcher → "DASHBOARD GLIDE", "INTERCHANGE DASHBOARD")
   §11 · Presence — globe + stats band
   §12 · Case studies — proof band (3 tabs: photo + 3 stats, pill switcher)
   §13 · Testimonials (slider)
   §14 · Closing CTA (email capture)
   §15 · Insights (blog cards)
   §16 · Footer
   §17 · Global motion — scroll reveal + reduced-motion
   ============================================================ */

/* ---------- §1 · Fonts (self-hosted Geist) ---------- */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/geist-400.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/geist-500.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/geist-600.woff2") format("woff2");
}
@font-face {
  font-family: "Crimson Text";   /* testimonial quotes (§13) — latin subset, SIL OFL */
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/crimson-text-400.woff2") format("woff2");
}

/* ---------- §2 · Design tokens ---------- */
:root {
  --bg: #fbfbfb;
  --surface: #ffffff;
  --headline: #0d0d0d;
  --text: #565656;
  --text-strong: #0a1733;
  --brand: #ff5f16;
  --brand-2: #fa573e;
  --brand-strong: var(--brand);       /* RETIRED 2026-10-13 (marketing corrections 9 + 10 put every former use on --brand); the alias stays
                                         only so the hand-written labs' inline CSS (blog-lab, case-studies-lab) keeps resolving — no site rule uses it */
  --focus-ring: var(--brand);         /* keyboard focus outline — the brand orange in both themes (3.05:1 on white, 5.8:1 on the navy footer;
                                         marketing's decision 2026-10-13 over the 4.6:1 AA shade) */
  --border: #d9d9d9;
  --on-brand: #ffffff;

  --hover: rgba(10, 23, 51, 0.06);
  --nav-bg: rgba(251, 251, 251, 0.62);
  --nav-border: rgba(10, 23, 51, 0.07);
  --nav-pill-bg: rgba(255, 95, 22, 0.10);  /* option C: whisper of brand orange */
  --nav-pill-border: transparent;
  --nav-backdrop: rgba(10, 23, 51, 0.06);
  --shadow: rgba(10, 23, 51, 0.12);

  --glow-1: rgba(250, 87, 62, 0.10);
  --glow-2: rgba(255, 95, 22, 0.05);
  --logo-filter: none;
  --logo-word: #0a1733;

  /* Radii */
  --r-pill: 999px;
  --r-nav: 40px;

  /* Responsive container (desktop/laptop: fluid 1280–1600, capped above) */
  --maxw: 1600px;                     /* raised 1440→1600 so wide screens (ultrawide) breathe */
  --gutter: clamp(32px, 4vw, 80px);   /* ~51px@1280 · ~58px@1440 · 80px cap */
  --mon-s: 1;                         /* platform monitor scale (see media query) */
  --fold-band: 140px;                 /* "Trusted by" line 48 + gap 32 + logo row 60 — the hero hands this height back so the band sits in the first viewport (the second logo row of 2026-10-14 sat just below it until correction 48, 2026-10-16) */
  --hero-art-h: 581px;                /* artwork height the fit math uses. Canvas is 551, but the Fee-library pill hangs 60px
                                         below it (552+59=611); the hero's 40px bottom padding absorbs 30 of that at max scale,
                                         so 581 keeps it inside .hero's overflow:hidden. ≤1700 wide: 561 (see the nudge tier). */
  --hero-s: .85;                      /* fallback for browsers without CSS trig (Chrome <111, Safari <15.4); overridden below */
                                      /* hero-visual scale, FLUID: (viewport − band − hero padding 98+40 − the nav's 1px border)
                                         ÷ --hero-art-h, clamped .70–1.16. tan(atan2(a,b)) = a/b as a plain number.
                                         Replaces the fixed height tiers. Keep the 139 in step with .hero__inner's min-height. */

}
@supports (width: calc(1px * tan(atan2(1px, 1px)))) {
  :root { --hero-s: clamp(.70, tan(atan2(calc(100vh - var(--fold-band) - 139px), var(--hero-art-h))), 1.16); }
}
:root {
  /* Globe (stats section) — brand-mapped palette, read by js/globe.js from :root.
     Fixed values (the stats band is always dark navy, in both page themes). */
  --globe-hub: #fa573e;    /* HQ marker + flight arcs — the accent coral (was --brand #ff5f16; Claude-Design dome recomposition 2026-08-18) */
  --globe-bright: #8ea6cf; /* arcs + city markers + focused-city sub-label */
  --globe-dot: #5674a6;    /* continent point-field */
  --globe-rim: #5a76ab;    /* sphere rim */
  --globe-ink: #0a1733;    /* label pill background — matches the stats bg */
}

:root[data-theme="dark"] {
  --bg: #080d1a;
  --surface: #111a2e;
  --headline: #f4f7fb;
  --text: #a6b0c3;
  --text-strong: #e7ecf5;
  --brand: #ff5f16;
  --brand-2: #ff6a4d;
  --border: #26314c;
  --on-brand: #ffffff;

  --hover: rgba(255, 255, 255, 0.08);
  --nav-bg: rgba(9, 14, 27, 0.55);
  --nav-border: rgba(255, 255, 255, 0.08);
  --nav-pill-bg: rgba(255, 255, 255, 0.07);
  --nav-pill-border: rgba(255, 255, 255, 0.12);
  --nav-backdrop: rgba(0, 0, 0, 0.42);
  --shadow: rgba(0, 0, 0, 0.45);

  --glow-1: rgba(250, 87, 62, 0.16);
  --glow-2: rgba(255, 95, 22, 0.10);
  --logo-filter: brightness(0) invert(1);
  --logo-word: #f4f7fb;
}

/* ---------- §3 · Reset / base + utilities ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 1280px;               /* desktop/laptop floor; scroll below (mobile layout later) */
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .3s ease, color .3s ease;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Visually hidden, but still exposed to assistive tech (e.g. form labels) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Icons */
.icon { width: 16px; height: 16px; flex: 0 0 auto; }
.icon--14 { width: 16px; height: 16px; }
.icon--16 { width: 16px; height: 16px; }

/* Accessible focus */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 6px; }

/* Responsive: capped, centred content wrapper (content caps at --maxw; section
   backgrounds/decoration bleed full-width outside it). */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ============================================================
   §4 · NAVBAR
   ============================================================ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nav-bg);                 /* full-bleed bar background */
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  border-bottom: 1px solid var(--nav-border);
}
.navbar__inner {
  width: 100%;
  max-width: var(--maxw);
  height: 74px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 60px);
  padding-inline: var(--gutter);
}
.navbar__brand { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; }
.navbar__logo { display: block; width: 113px; height: auto; overflow: visible; }
.logo-word path,
.logo-mark .mark-dark { fill: var(--logo-word); transition: fill .3s ease; }
.logo-mark .mark-orange { fill: var(--brand); }
.logo-mark { transition: filter .25s ease; }

/* the wordmark links back to the homepage; the swirl (see .logo-switch) stays
   the theme toggle — the toggle button sits on top of the swirl and keeps those
   clicks, so only the "intelica" letters navigate home */
.navbar__home { display: inline-flex; align-items: center; text-decoration: none; cursor: pointer; border-radius: 6px; }
.navbar__home:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* The circular swirl doubles as the light/dark switch */
.logo-switch {
  position: absolute;
  left: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.logo-switch:focus { outline: none; }
.logo-switch:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 50%; }
.navbar__brand:has(.logo-switch:hover) .logo-mark,
.navbar__brand:has(.logo-switch:focus-visible) .logo-mark {
  filter: drop-shadow(0 0 5px rgba(255, 95, 22, 0.6));
}

.navbar__links {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 10px 20px;
  border: 0;
  background: transparent;
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  line-height: 1.5;
  border-radius: var(--r-nav);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.nav-link .icon { color: var(--text-strong); transition: transform .2s ease; }
.nav-link:hover { background: var(--nav-pill-bg); }
.nav-link:hover .icon { transform: translateY(1px); }

.navbar__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 21px; }  /* Figma Frame 61612: 21px between wordmark/buttons */

/* Theme switch lives on the logo swirl — see .logo-switch */

/* ---------- Nav dropdowns ---------- */
.nav-item { position: relative; display: inline-flex; }
.nav-link__chev { transition: transform .25s ease; }
.nav-item.is-open .nav-link__chev { transform: rotate(180deg); }
.nav-item.is-open > .nav-link {
  background: var(--nav-pill-bg);
  box-shadow: inset 0 0 0 1px var(--nav-pill-border);
}

.nav-menu {
  position: absolute;
  top: calc(100% + 25px);
  left: 0;
  display: flex;
  gap: 24px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 48px var(--shadow);
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.nav-item.is-open .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .22s ease, transform .22s ease;
}
.nav-menu__col {
  display: flex;
  flex-direction: column;
  gap: 0;   /* was 8 — user spec 2026-09-02: title sits tight on its description in every dropdown item */
  width: 257px;                 /* 233 content + 24 padding = matches Figma spacing */
  padding: 12px;
  border-radius: 12px;
  transition: background-color .2s ease;
}
.nav-menu__col:hover { background: var(--hover); }
.nav-menu__title {
  color: var(--text-strong);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.36px;
  transition: color .2s ease;
}
.nav-menu__col:hover .nav-menu__title { color: var(--brand); }
.nav-menu__desc {
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.28px;
}

/* Resources menu: its one-line descs need a touch more than the shared 257
   ("Ideas and trends shaping the industry." measures 233.1px vs the 233px
   content box — it wrapped by a fraction of a pixel) */
#menu-resources .nav-menu__col { width: 268px; }

/* list variant: single column of title-only links (e.g. About) */
.nav-menu--list { flex-direction: column; gap: 2px; min-width: 265px; }
.nav-menu__link {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 10px;
  transition: background-color .2s ease;
}
.nav-menu__link:hover { background: var(--hover); }
.nav-menu__link:hover .nav-menu__title { color: var(--brand); }

/* mega variant: two columns split by a divider, with section headings (e.g. Solutions) */
.nav-menu--mega { align-items: stretch; gap: 20px; padding: 20px 24px; }
.nav-menu__group { display: flex; flex-direction: column; gap: 4px; }
.nav-menu__group--wide { min-width: 236px; }
.nav-menu__heading {   /* Solutions mega-menu column labels "By Business" / "By Solutions" — small caps eyebrow (user spec 2026-09-02: 12px / .04em / uppercase; was 14px / -0.28px sentence case) */
  margin: 2px 12px 8px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
}
.nav-menu__divider { flex: 0 0 1px; align-self: stretch; background: #f1f1f1; }   /* Solutions mega-menu column rule — user spec 2026-09-02 (was var(--border) #d9d9d9) */
:root[data-theme="dark"] .nav-menu__divider { background: var(--border); }   /* keep the dark hairline token on the dark menu */

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--nav-backdrop);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .25s ease;
}

/* ============================================================
   §5 · BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--r-pill);
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: -0.28px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn--primary {
  min-width: 110px;      /* Figma Frame 61612: "Get started" = 110x42 */
  padding: 0 20px;
  height: 42px;          /* fixed height + flex centring stands in for Figma's cap-trimmed text
                            (leading-trim isn't shippable CSS yet) */
  background: var(--brand);          /* #FF5F16 by marketing's decision (2026-10-13); the AA shade --brand-strong before it */
  color: var(--on-brand);
  border: none;          /* Figma has no border — the old same-colour 1px added 2px to both dims */
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px var(--shadow); }
.btn--ghost {
  width: 110px;          /* Figma Frame 61612: "See a demo" = 110x42 border-box */
  height: 42px;          /* fixed height + flex centring stands in for Figma's cap-trimmed text */
  background: var(--surface);
  color: var(--text-strong);
  border: 1px solid var(--text-strong);   /* Figma: 1px #0A1733 (= --text-strong in light) */
}
.btn--ghost:hover { transform: translateY(-2px); box-shadow: 0 8px 20px var(--shadow); }
/* incontrol wordmark link (chromeless, per Figma Frame 61612) — the supplied
   wordmark svg (weights baked in) fills currentColor so it themes via --logo-word */
.navbar__incontrol { display: inline-flex; align-items: center; color: var(--logo-word); transition: color .3s ease; }
.navbar__incontrol svg { display: block; transition: opacity .2s ease; }
.navbar__incontrol:hover svg { opacity: .7; }

/* ---------- Language selector (S13, I18N-PLAN.md §6 option B) ----------
   .lang-menu = the navbar disclosure (the globe + the current code + a chevron; two real links in a card),
   .lang-switch = the "EN | ES" pair at the right edge of the contact pages' brand-only bar (the footer pair lives with
   the footer rules, §16). The current language is the link carrying aria-current="true" — no class. The codes sit in
   fixed-width boxes so "EN" and "ES" render the same geometry (the twin gate). The widget's behaviour is in main.js
   (open / close), the links' in the head's language script. Dark theme through the tokens + the hover tints below. */
.lang-menu { position: relative; display: inline-flex; }
.lang-menu__btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 10px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-strong);
  font: inherit; font-size: 13px; font-weight: 500; letter-spacing: .02em; line-height: 1;
  cursor: pointer; transition: background-color .2s ease;
}
.lang-menu__btn:hover, .lang-menu__btn[aria-expanded="true"] { background: rgba(10, 23, 51, .05); }
.lang-menu__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 999px; }
.lang-menu__globe { color: var(--text-strong); }
.lang-menu__code { display: inline-block; width: 22px; text-align: center; }
.lang-menu__chev { color: var(--text-strong); transition: transform .25s ease; }
.lang-menu__btn[aria-expanded="true"] .lang-menu__chev { transform: rotate(180deg); }
.lang-menu__list {
  position: absolute; top: 40px; right: 0; z-index: 6;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 148px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 24px 48px var(--shadow);
}
.lang-menu__list[hidden] { display: none; }
.lang-menu__item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 32px; padding: 0 10px; border-radius: 8px;
  font-size: 13px; color: var(--text-strong); text-decoration: none;
  transition: background-color .2s ease;
}
.lang-menu__item:hover { background: rgba(10, 23, 51, .05); }
.lang-menu__item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: 8px; }
.lang-menu__check { color: var(--brand); }
.lang-menu__item:not([aria-current="true"]) .lang-menu__check { display: none; }
:root[data-theme="dark"] .lang-menu__btn:hover,
:root[data-theme="dark"] .lang-menu__btn[aria-expanded="true"],
:root[data-theme="dark"] .lang-menu__item:hover { background: rgba(255, 255, 255, .06); }
.lang-switch { display: inline-flex; align-items: center; gap: 8px; }
.lang-switch--bar { margin-left: auto; }
.lang-switch__opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; min-height: 24px; padding: 0 2px; border-radius: 6px;
  font-size: 13px; font-weight: 400; letter-spacing: .02em; line-height: 1;   /* 400 / 600: the contact pages preload only those two weights */
  color: var(--text); text-decoration: none; transition: color .2s ease;
}
.lang-switch__opt:hover { color: var(--text-strong); }
.lang-switch__opt[aria-current="true"] { color: var(--text-strong); font-weight: 600; }
.lang-switch__sep { width: 1px; height: 12px; background: var(--border); }

/* ============================================================
   §6 · HERO   (1440 x 755 canvas, absolute placement per Figma)
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  margin: -74px auto 0;   /* pull up under the sticky navbar (nav overlaps hero top) */
  overflow: hidden;
  background: var(--bg);
}
/* capped 2-column grid: copy (left) | visual (right), vertically centred.
   Replaces the old absolute left:129 / left:747 canvas placement. */
.hero__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: calc(74px + 24px) 40px;   /* clear the overlapped sticky nav */
  display: grid;
  grid-template-columns: minmax(0, 545px) minmax(0, 1fr);  /* 545 fits "schemes and interchange" on the h1's 3rd line (Figma break) */
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  /* Fill the first viewport MINUS the "Trusted by" band, so at scroll 0 the
     headline, card, coral line and logo carousel are all visible and the next
     section follows directly (no gap). On short viewports the card shrinks
     via the fluid --hero-s (see :root) so the content fits this box. */
  min-height: calc(100vh - var(--fold-band) - 1px);   /* -1px: the sticky nav is 74px + a 1px border, so the hero starts at y=1 */
}
.hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 620px at 66% 34%, var(--glow-1), transparent 62%),
    radial-gradient(1100px 700px at 88% 6%, var(--glow-2), transparent 60%);
}

.hero__copy {
  position: relative;   /* allows a laptop-only left/right nudge (see @media below); doesn't affect layout */
  max-width: 545px;
  z-index: 2;
}
.hero__title {
  margin: 0;
  max-width: 11.35em;   /* = 545px at 48px (fits "schemes and interchange" on line 3 per the Figma);
                           in em so the column shrinks with the fluid font and the 4-line break holds */
  color: var(--headline);
  font-size: clamp(40px, 5.6vh, 48px);   /* 48 on tall screens, ~41 on a 730px-tall laptop */
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1.2px;
}
.hero__lead {
  margin: 24px 0 0;
  max-width: 524px;   /* full copy column — the lead breaks after "efficiency" per the Figma */
  color: var(--text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.32px;
}
.cta {
  margin-top: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 16px 20px;
  background: var(--brand);          /* the brand orange again (2026-10-13), like every CTA button */
  color: var(--on-brand);
  border-radius: var(--r-pill);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.32px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cta .icon { transition: transform .2s ease; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px var(--shadow); }
.cta:hover .icon { transform: translateX(3px); }

/* ---- Hero email capture (Frame 480 — replaces the "Let's connect" CTA;
       same pill anatomy as the closing-CTA form, at the Figma's 449×58) ---- */
.hero__form { position: relative; margin-top: 40px; width: 449px; max-width: 100%; height: 58px;
  background: #FFFFFF; border: 1px solid #F7F7F7; border-radius: 999px;
  display: flex; align-items: center; }
.hero__input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent;
  padding: 0 155px 0 24px; font-family: inherit; font-size: 16px; letter-spacing: -0.02em;
  color: var(--text-strong); outline: none; border-radius: inherit; }   /* inherit = the pill's 999px: a browser-painted background (the autofill tint) stays inside the pill shape (correction 47) */
.hero__input::placeholder { color: #565656; opacity: 1; }
/* the input clears its own outline (above); surface keyboard focus on the whole pill instead */
.hero__form:has(.hero__input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.hero__btn { position: absolute; right: 5px; top: 5px; height: 48px; padding: 0 20px;
  display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 47px;
  background: var(--brand); color: #FFFFFF; font-family: inherit; font-size: 16px; letter-spacing: -0.02em;   /* #FF5F16 by marketing's decision (2026-10-13); --brand-strong before it */
  white-space: nowrap; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.hero__btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(255, 95, 22, .35); }
.hero__btn .icon { transition: transform .2s ease; }
.hero__btn:hover .icon { transform: translateX(3px); }
/* validation states (wired in main.js, same client-side handler as the closing CTA) */
.hero__form[hidden], .hero__done[hidden] { display: none; }  /* the flex displays beat [hidden] */
.hero__form.is-error { border-color: #d02e2e; }
.hero__form-error { position: absolute; top: calc(100% + 10px); left: 24px; right: 24px; margin: 0;
  font-size: 14px; line-height: 1.3; letter-spacing: -0.01em; color: #d02e2e; }
.hero__done { display: flex; align-items: center; gap: 10px; min-height: 58px; margin: 40px 0 0;
  font-size: 18px; letter-spacing: -0.02em; color: var(--text-strong); outline: none; }
.hero__done .icon { color: var(--brand); }
:root[data-theme="dark"] .hero__form { background: var(--surface); border-color: var(--border); }
:root[data-theme="dark"] .hero__input::placeholder { color: var(--text); }
:root[data-theme="dark"] .hero__form.is-error { border-color: #ff8f8f; }
:root[data-theme="dark"] .hero__form-error { color: #ff8f8f; }

/* ---- Hero visual: layered 3D scene (rebuilt from Figma layers) ---- */
/* .hero__visual reserves the box + carries the entrance reveal (opacity/translate).
   .hero__fit hosts the perspective + the responsive fixed-artwork scale, kept on a
   separate element so the scale never fights the reveal / reduced-motion transforms
   or the JS parallax transforms (which live on .hero__scene / .hlayer inside it). */
.hero__visual {
  position: relative;
  justify-self: end;         /* sits at the right of its column (capped-content look) */
  width: calc(592px * var(--hero-s));    /* the LAYOUT box now shrinks with the artwork */
  height: calc(var(--hero-art-h) * var(--hero-s));   /* box tracks the artwork incl. the pill overhang (was a fixed 592×551) */
  z-index: 1;
}
.hero__fit {
  position: absolute;
  top: 0; right: 0;
  width: 592px; height: 551px;      /* the artwork's native canvas — the six layers keep their Figma coords… */
  perspective: 1300px;
  perspective-origin: 55% 42%;
  transform: scale(var(--hero-s));  /* …and are scaled as ONE group into the box above */
  transform-origin: top right;      /* anchored at the column's right edge */
  will-change: transform;
}
/* scene tilts toward the pointer (JS sets rotateX/rotateY) */
.hero__scene {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
/* deck carries the gentle idle float, independent of the tilt */
.hero__deck {
  position: absolute;
  inset: 0;
  animation: heroFloat 7s ease-in-out infinite;
}
/* each exported layer, placed at its Figma coordinate */
.hlayer {
  position: absolute;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.hlayer > img { width: 100%; height: 100%; display: block; }

/* explicit stacking (2026-08-18): lines-t was DOM-last (painted on top of
   everything); its strokes were extended to tuck UNDER the dashboard panel and
   the card, so it now sits at the bottom of the stack while the pill still
   covers its top ends. Order: lines-t(1) < panel(2) < lines-b(3) < card(4) < pills(5,6). */
.hlayer--panel   { left: 0px; top: 240px; z-index: 2; }  /* was 268 — raised so the panel's top edge (right chart title + Search) shows above the card, per Figma */
.dash-skew { position: absolute; left: 0; top: 0; transform-origin: 0 0;
             transform: matrix(0.557, -0.162, 0.278, 0.510, 0, 0); will-change: transform; }
/* fee-library pill + its lines moved DOWN together (2026-08-18, +122px): the
   pill now sits fully BELOW the panel's skewed bottom edge (it used to sit on
   the graph), and the lines — now stacked UNDER the panel (z1 < panel z2) —
   emerge from beneath the graph's edge (long branch tucks 54px deep, stub
   24px; covers the .30-vs-.14 parallax drift). */
.hlayer--lines-b { left: 270.7px;  top: 434.2px; width: 181.2px; height: 136.6px; z-index: 1; }
.hlayer--card    { left: 159px;    top: 134.1px; width: 433px;   height: 281.4px; z-index: 4;
                   filter: drop-shadow(0 22px 30px rgba(10, 23, 51, .26));
                   transition: transform .5s cubic-bezier(.22, .61, .36, 1), filter .4s ease; }
.hlayer--pill-fee{ left: 222.75px; top: 552px; width: 119.7px; height: 59.12px; z-index: 5;
                   filter: drop-shadow(0 10px 16px rgba(10, 23, 51, .12)); }
.hlayer--pill-hub{ left: 279.32px; top: 43.34px; width: 154.77px; height: 69.72px; z-index: 6;
                   filter: drop-shadow(0 10px 16px rgba(10, 23, 51, .12)); }
/* lines-top: rebuilt as an SVG (from the Figma "Group 5809" source) with both
   branches extended along the iso direction — left tail ends ~25px below the
   panel's top edge, right tail well inside the card face, so they read as
   emerging from underneath (the depth-difference parallax drift is covered
   by the ~25px overlap margin). */
.hlayer--lines-t { left: 129.8px;  top: 109.5px; width: 212.6px; height: 189.6px; z-index: 1; }

.hero__visual:hover .hlayer--card {
  filter: drop-shadow(0 34px 46px rgba(10, 23, 51, .34));
}

/* glossy sheen, clipped to the card's exact shape via its own alpha */
.card-gloss {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 34%,
    rgba(255, 255, 255, .16) 44%,
    rgba(255, 255, 255, .62) 50%,
    rgba(255, 255, 255, .16) 56%,
    transparent 66%);   /* sheen peak .48→.62, shoulders .10→.16 (user 2026-09-02: "a bit more opaque") */
  background-size: 260% 260%;
  background-position: 130% 50%;
  opacity: 0;
  transition: opacity .3s ease;
}
.hero__visual:hover .card-gloss {
  opacity: 1;
  animation: gloss 1.6s cubic-bezier(.4, 0, .2, 1);
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes gloss {
  from { background-position: 135% 50%; }
  to   { background-position: -35% 50%; }
}

/* ============================================================
   CARD FACE — orange (brand) recolour of the reference card.
   Flat face rebuilt inside .hlayer--card, skewed with a 2D matrix
   onto the card's baked tilt so float / gloss / shadow / parallax
   stay identical. Warm brand-orange bloom (left) fading to a deep
   navy-teal corner (right) mirrors the reference's warm→cool fade.
   REVERT to the flat card.png: restore index.html.bak / styles.css.bak.
   ============================================================ */
.cardface {
  position: absolute;
  left: 0;
  top: 0;
  width: 337px;
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
  transform-origin: 0 0;
  transform: matrix(0.959, -0.280, 0.483, 0.879, 4.1, 97.5);
  color: #fff;
  font-family: "Geist", system-ui, sans-serif;
  isolation: isolate;
}
/* Old purple→blue V1 (kept for revert/compare):
   linear-gradient(110deg, #5b2a7e 0%, #7c3492 26%, #4a4f9c 52%, #2a6a9c 78%, #1c7d8b 100%); */
.cardface--v1 {
  background: linear-gradient(115deg,
    #7a2410 0%,
    #cf4415 11%,
    #ff5f16 23%,   /* brand orange bloom — left third */
    #e85f2c 36%,
    #87604f 49%,   /* warm-neutral crossover — lands mid-card */
    #2f6f8c 64%,   /* teal */
    #1c5170 81%,
    #12314c 100%); /* deep navy corner — right */
}
/* Soft-blue variant — near-mono deep navy, orange lives only in the logo.
   Shipped to the hero card 2026-08-14 (was .cardface--v1 orange). Revert = swap
   the markup class back to cardface--v1. */
.cardface--softblue {
  /* retoned 2026-10-13 to marketing's card export (card 2.svg, the corrections deck): a deep navy with a diagonal
     sheen — dark #030e2d down the left and along the bottom, a brighter navy band from the top-centre down the
     right edge, a soft highlight at the top; fitted in headless Chrome to the export's nine sample points
     (max 6/255 off). The export's engraved arcs are not reproduced (the colour was asked for). The 2026-08-18
     indigo bloom (radial 118% 132% at 55% 24%, #263768 -> #0a1128) is in git for revert. */
  background:
    radial-gradient(60% 110% at 55% -5%, rgba(28, 42, 74, .6), transparent 70%),
    linear-gradient(80deg,
      #030e2d 0%,    /* the dark left edge */
      #040f2f 36%,
      #0b1935 52%,   /* the centre */
      #162442 66%,
      #182646 100%); /* the brighter right edge */
}
.cardface--softblue .cardface__glow {
  /* no orange bloom — just a whisper of cool light behind the chip */
  background: radial-gradient(closest-side, rgba(135, 170, 215, .12), transparent 72%);
}
/* .cardface__map (the dotted world map on the hero card) removed 2026-10-13 per marketing's corrections deck. */
.cardface__arcs { position: absolute; inset: 0; width: 100%; height: 100%; }  /* the export's engraved arcs, drawn live (2026-10-13) */
.cardface__glow {
  position: absolute;
  left: 90px; top: 100px;
  width: 150px; height: 150px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 110, 40, .5), transparent 72%);
  filter: blur(4px);
}
.cardface__chip {
  position: absolute; left: 42px; top: 71px; width: 46px; height: 36px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}
.cardface__wave {
  position: absolute; left: 96px; top: 75px; width: 20px; height: 26px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
}
.cardface__logo {
  position: absolute; right: 20px; top: 22px; width: 104px; height: 22px;
  /* two-tone card logo: orange swirl (#FF5F16) + white wordmark, own fills */
  background: url("../assets/icons/logo-intelica-card.svg") right center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
}
.cardface__product {
  position: absolute; right: 20px; bottom: 16px;
  font-size: 17px; font-weight: 400; letter-spacing: .2px; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.cardface__product strong { font-weight: 600; }

/* Dark mode: keep the light "screen" reading as intentional, lift the card */
/* ---- Rebuilt dashboard (HTML/CSS, themeable) — sits in the card's plane ---- */
.dash {
  --field:#f3f4f7; --card:#ffffff; --ink:#0d0d0d; --ink-2:#3f4553; --muted:#9298a6;
  --line:#ececf1; --grid:#eef0f4; --total:#eaf1ff; --total-ink:#1f4fd1;
  --area-1:rgba(255,141,27,.35); --area-2:rgba(255,141,27,0);
  --area-b1:rgba(101,161,245,.16); --area-b2:rgba(101,161,245,0);
  --line-orange:#ff8d1b; --line-blue:#65a1f5; --chip:#f0f2f6;   /* line colours sampled from the Figma panel (2026-08-18 1:1 chart pass) */
  --d-elev:0 18px 40px rgba(16,24,40,.12); --d-elev-sm:0 6px 16px rgba(16,24,40,.06);
  width:760px; background:var(--field); border:1px solid var(--line);
  border-radius:22px; padding:20px; box-shadow:var(--d-elev);
  display:flex; flex-direction:column; gap:16px; color:var(--ink);
  font-family:"Geist",system-ui,sans-serif;
}
:root[data-theme="dark"] .dash {
  --field:#0d1526; --card:#111a2e; --ink:#f4f7fb; --ink-2:#c4ccdb; --muted:#79839a;
  --line:#223049; --grid:#1b2740; --total:rgba(91,141,239,.18); --total-ink:#9db9ff;
  --area-1:rgba(255,120,66,.42); --area-2:rgba(255,120,66,0);
  --area-b1:rgba(126,166,255,.20); --area-b2:rgba(126,166,255,0);
  --line-orange:#ff8a5c; --line-blue:#7ea6ff; --chip:#0c1426;
  --d-elev:0 24px 50px rgba(0,0,0,.55); --d-elev-sm:0 8px 20px rgba(0,0,0,.45);
}
.dash .card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--d-elev-sm);}
.dash .cap{margin:0;font-size:14px;font-weight:500;color:var(--ink-2);letter-spacing:-.2px;}
.dash .cap--muted{color:var(--muted);font-weight:400;}
.dash__top{display:grid;grid-template-columns:250px 1fr;gap:16px;}
.dash .fees{padding:18px;display:flex;flex-direction:column;gap:12px;}
.dash .fees__big{margin:0;display:flex;align-items:center;gap:8px;font-size:38px;font-weight:600;color:var(--ink);letter-spacing:-1.3px;line-height:1;}
.dash .fees__big small{font-size:20px;font-weight:500;}
.dash .glyph{color:var(--line-blue);flex:0 0 auto;}
.dash table.mini{width:100%;border-collapse:collapse;font-size:11.5px;}
.dash table.mini th,.dash table.mini td{padding:7px 5px;text-align:right;color:var(--ink-2);font-weight:400;white-space:nowrap;}
.dash table.mini thead th{color:var(--muted);font-weight:500;border-bottom:1px solid var(--line);}
.dash table.mini th.rowlab,.dash table.mini td.rowlab{text-align:left;color:var(--muted);}
.dash table.mini .col-total{background:var(--total);color:var(--total-ink);font-weight:600;}
.dash table.mini thead .col-total{border-radius:8px 8px 0 0;}
.dash table.mini tbody tr:last-child .col-total{border-radius:0 0 8px 8px;}
.dash .ico{width:15px;height:15px;display:inline-block;vertical-align:middle;color:var(--muted);}
.dash .chart{padding:16px 18px 12px;position:relative;display:flex;flex-direction:column;gap:10px;}
.dash .chart__head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.dash .search{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:var(--chip);border:1px solid var(--line);color:var(--muted);font-size:12px;}
.dash .chart__plot{display:grid;grid-template-columns:32px 1fr;gap:5px;}
.dash .yaxis{display:flex;flex-direction:column;justify-content:space-between;font-size:10px;color:var(--muted);text-align:right;padding:2px 0 16px;}
.dash .xaxis{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);padding-left:37px;}
.dash .dd{position:absolute;right:18px;top:48px;font-size:11px;color:var(--ink-2);display:inline-flex;gap:4px;align-items:center;}
.dash svg.plot{width:100%;height:auto;display:block;overflow:visible;}
.dash .gco{padding:18px;display:flex;flex-direction:column;gap:8px;position:relative;}
.dash .gco__head{display:flex;justify-content:space-between;align-items:flex-start;}
.dash .gco__big{margin:2px 0 0;font-size:34px;font-weight:600;color:var(--ink);letter-spacing:-1.2px;line-height:1;}
.dash .gco__big small{font-size:19px;}
.dash .gco__sub{margin:2px 0 0;font-size:11.5px;color:var(--muted);}
.dash .d-btn{align-self:flex-start;margin-top:4px;font-family:inherit;font-size:12px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);cursor:pointer;box-shadow:var(--d-elev-sm);}
.dash .gco .xaxis{padding-left:0;}
:root[data-theme="dark"] .hlayer--pill-hub,
:root[data-theme="dark"] .hlayer--pill-fee {
  filter: brightness(.97) drop-shadow(0 12px 20px rgba(0, 0, 0, .5));
}
:root[data-theme="dark"] .hlayer--card {
  filter: drop-shadow(0 26px 36px rgba(0, 0, 0, .62));
}
:root[data-theme="dark"] .hero__visual:hover .hlayer--card {
  filter: drop-shadow(0 36px 50px rgba(0, 0, 0, .72));
}

/* ============================================================
   §7 · CONTENT  (stat + logo marquee, 1440 x 167)
   ============================================================ */
.content {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: var(--bg);
}
.stats { text-align: center; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.stats__big {
  margin: 0;
  color: var(--brand-2);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.64px;
}
/* (2026-08-31: the old "450M+ cards | 3M+ merchants" glass-letters block +
   its "monitored for our clients" sub were replaced by the single coral
   "Trusted by 400+ industry leaders" line — the base .stats__big rule above
   IS the Figma spec (32/600/150%/-0.02em, #FA573E via --brand-2). The whole
   g-brandfrost glassmorphism system was removed with it; git has it.) */

.marquee {
  margin-top: 32px;
  width: 100%;
  height: 60px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 45s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; }
.marquee__item {
  flex: 0 0 107.8px;
  height: 60px;
  margin-right: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.marquee__item img {
  max-width: 107.8px;
  max-height: 53.9px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: var(--logo-filter);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   §8 · PLATFORM  (Figma section "1")  —  appended below Content.
   ISOLATED / EASY REVERT: delete this whole block + the
   <section class="platform"> in index.html to roll back.
   ============================================================ */
.platform {
  position: relative;
  width: 100%;
  min-height: 800px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--bg);
}
/* capped inner holds the copy AND the monitor: the monitor is positioned relative
   to this capped block (position:relative) so it bleeds off the CONTENT's right
   edge, staying next to the copy on ultrawide instead of drifting to the raw
   screen edge. .platform's overflow:hidden still clips the bleed at the viewport. */
.platform__inner {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: 800px;
  display: flex;
  align-items: center;
}
/* Curved orange wash across the platform → tools seam — SAME proven pattern as the
   closer→insights and testimonials→closer seams: the upper section shows cta-wash.svg
   (y0..600) pinned to its bottom, the lower section shows cta-wash-lower.svg (y600..1663)
   pinned to its top, both width:100% height:auto → the ribbon is contiguous at the seam
   (artwork y600) and flows straight down through the "Maximize card…" heading. Replaces
   the old bottom-left radial glow. overflow:hidden on both sections clips the bleed. */
.platform__wash {
  position: absolute; bottom: 0; left: 0; width: 100%; height: auto; z-index: 0;
  pointer-events: none; user-select: none; transform: scaleX(-1);   /* mirror → ribbon sweeps down-RIGHT */
  /* fade out the TOP so the wash sits off the platform heading but still feeds the
     flow into the tools section below (keeps the lower ~half toward the seam).
     This one may stay in % of the image: its ramp starts at 46% and the 800px section only
     cuts the (600·vw/1440)-tall img above that line beyond ~3500px wide — verified clean
     @1280/1920/2560 (the other washes needed px-from-the-seam fades, see .tm__wash). */
  -webkit-mask-image: linear-gradient(to bottom, transparent 46%, #000 78%);
          mask-image: linear-gradient(to bottom, transparent 46%, #000 78%);
}
:root[data-theme="dark"] .platform__wash { opacity: .75; }
.platform__copy {
  max-width: 524px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  z-index: 2;
}
.platform__info { display: flex; flex-direction: column; gap: 24px; }
.platform__title {
  margin: 0;
  color: var(--headline);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1px;
}
.platform__lead {
  margin: 0;
  max-width: 494px;
  color: var(--text);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.36px;
}
/* navy "Book a demo" CTA (auto-inverts in dark) */
.cta-demo {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 16px 20px;
  background: var(--text-strong);
  color: var(--bg);
  border-radius: var(--r-pill);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.32px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cta-demo:hover { transform: translateY(-2px); box-shadow: 0 10px 24px var(--shadow); }
.cta-demo .icon { transition: transform .2s ease; }
.cta-demo:hover .icon { transform: translateX(3px); }

/* --- Monitor mockup (right side; bleeds off the CONTENT's right edge) --- */
.monitor {
  position: absolute;
  right: -279px;         /* bleeds 279px past the capped content's right edge (anchored to .platform__inner) */
  left: auto;
  top: 123px;
  width: 991px;
  height: 577px;
  background: #0b0b0b;
  border-radius: 8px;
  transform: scale(var(--mon-s, 1)) rotate(-0.03deg);
  transform-origin: top right;   /* scaling keeps the right edge pinned → bleed preserved */
  box-shadow: 0 40px 80px rgba(10, 23, 51, .18);
  z-index: 1;
  pointer-events: none;
}
/* below ~1320 the monitor shrinks a touch so its left edge clears the copy
   (top-right origin keeps the right-edge bleed pinned) */
@media (max-width: 1320px) { :root { --mon-s: .93; } }

/* Hero artwork scale: --hero-s is now FLUID (see :root) — it derives from the
   viewport height so the card always fits above the "Trusted by" band, capped at
   1.16 on tall/wide screens and .78 on very short ones. The old fixed
   1.16 / 1.02 / .94 width+height tiers were retired with it. */

/* ---- Laptop-only hero-copy placement nudges ----
   Scoped to laptop-class widths (≤1700) so the LG (2560) is unaffected. Moves ONLY
   the hero copy block (title + lead + "Let's connect") via position offsets — the
   navbar, dropdowns and card visual are untouched. Tune the values here. */
@media (max-width: 1700px) {
  :root { --hero-art-h: 561px; }   /* the -25px nudge below lifts the artwork, absorbing 25px of the pill's overhang → a bigger card */
  .hero__copy { left: 76px; }/* align "interchange" end (~660px) with the "s" of "Resources" @1536 */
  .hero__visual { left: -85px; top: -25px; }
}
.monitor__screen {
  position: absolute;
  inset: 22px;
  border-radius: 10px;
  overflow: hidden;
  background: #0e1730;                 /* shows through if the image is missing */
}
.monitor__img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }

/* Progressive screen blur (user-requested 2026-08-31, per the Figma ref):
   the live dashboard stays crisp on top and blurs from ~mid-screen down.
   ⚠️ TECHNIQUE IS LOAD-BEARING: main.js overlays a blur()-ed CLONE of the
   dash, faded in with a smooth gradient mask — plain filter+mask compose
   fine. backdrop-filter approaches FAIL in Chromium: a mask on the same
   element is IGNORED (whole box blurs, crbug 1229700), a masked WRAPPER
   becomes a backdrop root (child blurs NOTHING), and stacked bands render
   visible seams. No JS → no clone → crisp screen (graceful). */
/* ============ TUNE THE SCREEN BLUR HERE — this ONE line ============
   Replicates Figma's PROGRESSIVE layer blur: the radius grows linearly
   from 0 at --blur-top to --blur-max px at --blur-bottom.
     --blur-top    = where the blur STARTS (screen height %)
     --blur-bottom = where it reaches FULL strength
     --blur-max    = the bottom radius in px, unitless (Figma file: 20)
   The five .monitor__blurclone--N layers below interpolate between these
   three values automatically — no need to touch them. */
.monitor__screen { --blur-top: 37%; --blur-bottom: 96%; --blur-max: 12; }   /* 2026-10-14 (marketing correction 14, the user: «more gradual and less
                                                                            aggressive»): the ramp runs to 96% instead of 78% and tops out at 12 px instead of the
                                                                            Figma file's 20 — the crisp line stays at 37% (through «Analytics & Reports») */

.monitor__blurclone {
  --blur-span: calc(var(--blur-bottom) - var(--blur-top));
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
}
/* five steps of the radius ramp: each layer = --blur-max × k, fading in
   exactly where the linear ramp reaches that radius */
.monitor__blurclone--1 {
  filter: blur(calc(var(--blur-max) * 0.125px));
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--blur-top), #000 calc(var(--blur-top) + var(--blur-span) * 0.12));
  mask-image: linear-gradient(to bottom, transparent var(--blur-top), #000 calc(var(--blur-top) + var(--blur-span) * 0.12));
}
.monitor__blurclone--2 {
  filter: blur(calc(var(--blur-max) * 0.25px));
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--blur-top) + var(--blur-span) * 0.12), #000 calc(var(--blur-top) + var(--blur-span) * 0.25));
  mask-image: linear-gradient(to bottom, transparent calc(var(--blur-top) + var(--blur-span) * 0.12), #000 calc(var(--blur-top) + var(--blur-span) * 0.25));
}
.monitor__blurclone--3 {
  filter: blur(calc(var(--blur-max) * 0.5px));
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--blur-top) + var(--blur-span) * 0.25), #000 calc(var(--blur-top) + var(--blur-span) * 0.5));
  mask-image: linear-gradient(to bottom, transparent calc(var(--blur-top) + var(--blur-span) * 0.25), #000 calc(var(--blur-top) + var(--blur-span) * 0.5));
}
.monitor__blurclone--4 {
  filter: blur(calc(var(--blur-max) * 0.75px));
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--blur-top) + var(--blur-span) * 0.5), #000 calc(var(--blur-top) + var(--blur-span) * 0.75));
  mask-image: linear-gradient(to bottom, transparent calc(var(--blur-top) + var(--blur-span) * 0.5), #000 calc(var(--blur-top) + var(--blur-span) * 0.75));
}
.monitor__blurclone--5 {
  filter: blur(calc(var(--blur-max) * 1px));
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--blur-top) + var(--blur-span) * 0.75), #000 var(--blur-bottom));
  mask-image: linear-gradient(to bottom, transparent calc(var(--blur-top) + var(--blur-span) * 0.75), #000 var(--blur-bottom));
}

/* Dark mode: the near-black bezel blended into the near-black bg. Lift it to a
   cool graphite + add a hairline rim-light so the monitor silhouette reads,
   and use a shadow that's actually visible on dark. */
:root[data-theme="dark"] .monitor {
  background: #1b2130;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .10),   /* rim-light traces the edge */
    0 26px 60px rgba(0, 0, 0, .55);        /* ambient depth on dark */
}

/* ============================================================
   MONITOR SCREEN DASHBOARD — rebuilt from the hero .dash system
   (reuses its tokens + .card/.cap/.mini/.plot/.d-btn/etc). Fills
   the 947x533 screen; themes light/dark with the rest of .dash.
   ============================================================ */
.dash--screen {
  position: absolute; inset: 0;
  width: auto; padding: 0; gap: 0;
  border: 0; border-radius: 0; box-shadow: none;
  background: var(--field);
  display: flex; flex-direction: column;
  overflow: hidden;
  font-size: 12px;
  /* design tokens for the screen, LIGHT (sampled from "incontrol dashboard
     (1).svg" 2026-08-31): #f4f4f4 window grey, #e5f0ff active pill,
     #006cff icon blue. The dark-theme .dash token block out-specifies
     these custom-property overrides, so dark keeps its own values. */
  --field: #f4f4f4; --total: #e5f0ff; --total-ink: #006cff;
}
/* the screen's cards float borderless on the grey window bg per the design */
.dash--screen .card { border: 0; box-shadow: none; }
/* card titles: bolder + near-black per the design */
.dash--screen .cap { font-weight: 600; color: var(--ink); }
.dash--screen .cap--muted { font-weight: 400; color: var(--muted); }
/* logo — now sits at the top of the sidebar (reuses .sbar__brand/mark/word) */
.sbar__brand { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--text-strong); font-size: 16px; font-weight: 600; letter-spacing: -.3px; }
.sbar__mark { width: 18px; height: 18px; flex: 0 0 auto; }   /* navy blades = currentColor (themes), orange fixed */
.sbar__word .o { color: #ff5f16; }                            /* "in" orange, "control" inherits --text-strong */
/* body split — the sidebar + main float on the grey window bg (design) */
.sbody { flex: 1 1 auto; display: flex; min-height: 0; padding: 12px; gap: 12px; }
/* sidebar: a floating white rounded card (logo + nav + pinned foot) */
.sside { flex: 0 0 172px; display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; background: var(--card); border-radius: 14px; }
.sside__brand { display: flex; align-items: center; padding: 2px 6px 14px; }
.scollapse { width: 13px; height: 13px; margin-left: auto; color: var(--muted); flex: 0 0 auto; }
.snav { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.snav__ico { width: 15px; height: 15px; flex: 0 0 auto; color: var(--total-ink); }   /* all nav icons blue (design) */
.snav .schev { width: 12px; height: 12px; margin-left: auto; color: var(--muted); }
.snav.is-active { background: var(--total); color: var(--ink); font-weight: 500; }
.snav.is-active .snav__ico { color: var(--total-ink); }
/* pinned sidebar foot: Settings (muted icon) + red Log out (shared with
   .dash--window) */
.sside .sside__foot { margin-top: auto; }
.sside .sside__foot .snav__ico { color: var(--muted); }
.sside .snav--danger,
.sside .snav--danger .snav__ico { color: #e5484d; }
/* main: a top bar (search + tabs/icons) sits above the cards */
.smain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 0; }
/* top bar shares the srow--3 grid so the search lines up with (and matches the
   width of) the first "Gross Fees by Scheme in EUR" card; tabs/icons on the right */
.stopbar { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1.55fr 1fr; gap: 14px; align-items: center; }
/* search + tabs = flat white pills on the grey window bg (no borders, design) */
.ssearch { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--card); border: 0; color: var(--muted); font-size: 12px; }
.ssearch .ico { width: 15px; height: 15px; flex: 0 0 auto; color: var(--muted); }
/* Nudge the tab group right so, within the part of the screen the 1440 canvas
   actually shows (clipped at ~screen-x 690), Fee Library + Fee Dashboard are fully
   visible and "Optional Services" is the one running off the edge. */
.sbar__actions { grid-column: 2 / 4; display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-right: -50px; }
.sbar__tabs { display: inline-flex; align-items: center; gap: 8px; }
.stab { padding: 8px 14px; border-radius: 999px; border: 0; background: var(--card); color: var(--ink-2); font-size: 11px; white-space: nowrap; }
/* the pencil + bell = small white rounded-square buttons (design) */
.sbar__icons { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); flex: 0 0 auto; }
.sbar__icons .ico { width: 29px; height: 29px; padding: 7px; box-sizing: border-box; background: var(--card); border-radius: 10px; }
.srow { display: grid; gap: 14px; min-height: 0; }
.srow--3 { grid-template-columns: 1fr 1.55fr 1fr; flex: 1.42; }
.srow--2 { grid-template-columns: 1.12fr 1fr; flex: 1; }
/* mini-dashboards: rounder corners per Figma */
.dash--screen .card { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; }
/* tighten the reused fees/chart cards for the denser screen */
.dash--screen .fees { padding: 14px 12px; gap: 8px; }
.dash--screen .fees { --fees-ink: #0e1624; }   /* correction 27: the design's navy-tinted near-black for the figure + table (the chart card beside it uses the same #0e1624) */
:root[data-theme="dark"] .dash--screen .fees { --fees-ink: var(--ink); }
.dash--screen .chart { padding: 12px 14px; gap: 8px; }
/* heading fits on one line */
.dash--screen .fees .cap { white-space: nowrap; font-size: 12px; }
/* the figure "27.6 M", 1:1 with "incontrol dashboard (2).svg" (correction 27,
   2026-10-14; the design's fees card is 663 px wide → this 225.5 px card at
   k = 0.3402): Geist 500 at the design's cap height (70 px × k = 23.8 px →
   33.5 px), its tighter tracking, the line-chart glyph 46 px × k = 15.65 px
   with its foot 2 px × k above the baseline. The figure sits in the room
   between the title and the table (auto margins), 5 px below its middle
   (padding-top 10.2 → its cap top sits where the design's does), the group
   1 px left of centre (padding-right) like the design's. The glyph and the
   gaps are in em, so the landing card sets only its font-size + padding-top. */
.dash--screen .fees__big { justify-content: center; align-items: baseline; gap: 0; margin: auto 0; padding: 10.2px .058em 0 0; font-size: 33.5px; font-weight: 500; letter-spacing: -.034em; color: var(--fees-ink); }
.dash--screen .fees__big .glyph { width: .467em; height: .467em; position: relative; top: -.02em; margin-right: .182em; color: var(--total-ink); }
.dash--screen .fees__big small { font-size: 1em; font-weight: inherit; margin-left: .221em; }
/* ---- fees stats table, SHARED look (hero panel per the Figma "Frame 7163"
   reference, 2026-08-18): pale-BLUE floating header band (fully rounded,
   $ icon over the row-label column), grey zebra band on the 2nd data row,
   bold row labels, plain Total (no blue block), empty 4th column hidden.
   The monitor screen's own block BELOW overrides where its Figma differs
   (grey header band, top-corner radii). ---- */
.dash .fees .mini { border-collapse: separate; border-spacing: 0; }
.dash .fees .mini th:nth-child(4), .dash .fees .mini td:nth-child(4) { display: none; }
.dash .fees .mini thead th,
.dash .fees .mini thead th.col-total { background: var(--total); border-bottom: none; color: var(--ink-2); }
.dash .fees .mini thead th:first-child { border-radius: 7px 0 0 7px; }
.dash .fees .mini thead th:last-child { border-radius: 0 7px 7px 0; }
.dash .fees .mini tbody tr:nth-child(even) td { background: var(--field); }
.dash .fees .mini tbody tr:nth-child(even) td:first-child { border-radius: 7px 0 0 7px; }
.dash .fees .mini tbody tr:nth-child(even) td:last-child { border-radius: 0 7px 7px 0; }
.dash .fees .mini td.rowlab { color: var(--ink-2); font-weight: 600; }
.dash .fees .mini .col-total { background: transparent; color: var(--ink-2); font-weight: 600; }

/* fees stats table, 1:1 with "incontrol dashboard (2).svg" (correction 27,
   2026-10-14; design px × k = 0.3402): the empty (—) 4th column dropped;
   four equal centred columns; four 85 px rows (× k = 28.9 px = 3.363em of
   the 8.6 px text, whose cap height is the design's 18 px × k); the table
   is 564 px wide in the 663 px card (16.8 px insets → 4.8 px inside the card
   padding) and pinned to the card's bottom with the design's 50 px × k = 17 px
   gap (card padding 14 + margin 3); labels, Total and the header in Geist
   500, the values 400, all in the near-black ink; the header icons are the
   design's Iconsax "dollar-circle" / "card" (#292d32, an 11 px box). */
.dash--screen .fees .mini { font-size: 8.6px; letter-spacing: -.026em; border-collapse: separate; border-spacing: 0; table-layout: fixed; width: calc(100% - 9.6px); margin: 0 auto .349em; }
.dash--screen .fees .mini th, .dash--screen .fees .mini td { width: 25%; height: 3.363em; padding: 0 1px; line-height: 1; text-align: center; vertical-align: middle; color: var(--fees-ink); font-weight: 400; }
.dash--screen .fees .mini th:nth-child(4), .dash--screen .fees .mini td:nth-child(4) { display: none; }
/* the two bands are painted ON THE TABLE (four equal rows → 25 % stops), not
   per cell, so they run unbroken (per-cell backgrounds left hairline seams
   on the landing monitor's slightly rotated screen): the grey header band =
   the design's #d9d9d9, rounded on its TOP corners only (the table's radius),
   no divider line; the YTD band = the window grey (#f4f4f4), full width, square.
   Dark lifts the header to a subtle alpha-white so it still reads. */
.dash--screen .fees .mini { --fees-head: #d9d9d9; border-radius: .64em .64em 0 0; background: linear-gradient(to bottom, var(--fees-head) 0 25%, transparent 25% 50%, var(--field) 50% 75%, transparent 75%); }
:root[data-theme="dark"] .dash--screen .fees .mini { --fees-head: rgba(255, 255, 255, .12); }
.dash--screen .fees .mini thead th,
.dash--screen .fees .mini thead th.col-total { background: transparent; border-bottom: none; border-radius: 0; color: var(--fees-ink); font-weight: 500; }
.dash--screen .fees .mini tbody tr:nth-child(even) td { background: transparent; border-radius: 0; }
.dash--screen .fees .mini thead .ico { display: block; margin: 0 auto; width: 1.28em; height: 1.28em; color: #292d32; }
:root[data-theme="dark"] .dash--screen .fees .mini thead .ico { color: var(--ink-2); }
/* the text sits on the row's middle like the design (a .116em top pad) */
.dash--screen .fees .mini td, .dash--screen .fees .mini thead th.col-total { padding-top: .116em; }
/* row labels (L12M/YTD/LM) and the Total column: Geist 500, plain (no block) */
.dash--screen .fees .mini td.rowlab { text-align: center; color: var(--fees-ink); font-weight: 500; }
.dash--screen .fees .mini .col-total { background: transparent; color: var(--fees-ink); font-weight: 500; }
/* the LANDING monitor's narrower fees card (192.7 px): the type and the rows
   at the landing screen's 0.89 (947 / 1064, as the chart card beside it,
   correction 25), the table 85 % of the card's width like the design */
.monitor__screen .dash--screen .fees__big { font-size: 29.8px; padding-top: 9.1px; }
.monitor__screen .dash--screen .fees .mini { font-size: 7.65px; width: calc(100% - 4.7px); }
.dash--screen .gco__big { font-size: 28px; }
.dash--screen .xaxis, .dash--screen .yaxis { font-size: 9px; }
/* ---- the big "Gross Fees by Scheme in EUR" chart card of the LANDING
   monitor, 1:1 with "incontrol dashboard (2).svg" (correction 25 =
   correction 24 on the landing, 2026-10-14). The design's 1064 screen
   maps onto this 947 screen at 0.89 (947 / 1064 — the neighbouring cards'
   type sits at the same ratio): every inset below = the products values
   (css/products.css, .dash--window .chart) × 0.89; the title is 12 px like
   the neighbouring fees card's identical title. The card keeps ITS size —
   title + pill keep the design's insets from the top, the month labels the
   design's distance from the bottom, the plot fills the room in between.
   Scoped .monitor__screen: hits the screen AND its five blur clones (they
   sit inside .monitor__screen), never the products window or the hero. ---- */
.monitor__screen .dash--screen .chart {
  --cm-ink: #0e1624; --cm-label: #565656; --cm-grid: #f1f1f1;
  --cm-pill-line: #f1f1f1; --cm-pill-ink: #7d7d7d;
  --cm-orange: #ff860d; --cm-blue: #006cff;
  --cm-oarea: rgba(255, 134, 13, .4); --cm-oarea-0: rgba(255, 134, 13, 0);
  --cm-barea: #dfe0e5; --cm-barea-0: var(--card);   /* the blue series' fill is opaque: it hides the orange area below it */
  position: relative; display: block; padding: 0; gap: 0;
}
:root[data-theme="dark"] .monitor__screen .dash--screen .chart {
  --cm-ink: var(--ink); --cm-label: var(--muted); --cm-grid: var(--grid);
  --cm-pill-line: var(--line); --cm-pill-ink: var(--muted);
  --cm-orange: var(--line-orange); --cm-blue: var(--line-blue);
  --cm-oarea: rgba(255, 120, 66, .4); --cm-oarea-0: rgba(255, 120, 66, 0);
  --cm-barea: #1e2a45;
}
.monitor__screen .dash--screen .chart .chart__head { display: block; }
.monitor__screen .dash--screen .chart .cap {
  position: absolute; left: 14.8px; top: 20.6px; margin: 0;
  font-size: 12px; font-weight: 600; line-height: 17.8px; letter-spacing: 0; color: var(--cm-ink); white-space: nowrap;
}
.monitor__screen .dash--screen .chart .search {
  position: absolute; right: 16px; top: 15.6px; width: 78.6px; height: 26.3px; box-sizing: border-box;
  padding: 0 0 0 8.8px; gap: 5.9px; background: var(--card); border: 1px solid var(--cm-pill-line);
  color: var(--cm-pill-ink); font-size: 8.9px; line-height: 1;
}
.monitor__screen .dash--screen .chart .search .ico { width: 10.7px; height: 10.7px; color: var(--cm-pill-ink); }
.monitor__screen .dash--screen .chart .chart__plot { display: block; }
.monitor__screen .dash--screen .chart .yaxis {
  position: absolute; left: 14.8px; top: 62.5px; bottom: 22.7px; padding: 0;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  font-size: 6.7px; line-height: 8.9px; color: var(--cm-label); text-align: left;
}
.monitor__screen .dash--screen .chart svg.plot {
  position: absolute; left: 43.8px; top: 62.3px;
  width: calc(100% - 64.4px); height: calc(100% - 88.6px); overflow: visible;   /* an inline svg sizes like a replaced element: no left+right stretch */
}
.monitor__screen .dash--screen .chart .plot line,
.monitor__screen .dash--screen .chart .plot polyline { vector-effect: non-scaling-stroke; }
.monitor__screen .dash--screen .chart .plot__line { stroke-width: 1; stroke-dasharray: 1.1 1.42; stroke-linejoin: round; }
.monitor__screen .dash--screen .chart .xaxis {
  position: absolute; left: 43.8px; right: 20.6px; bottom: 16.6px; height: 8.9px; padding: 0;
  display: block; font-size: 6.7px; line-height: 8.9px; color: var(--cm-label);
}
.monitor__screen .dash--screen .chart .xaxis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
/* penalties card — grey sub-cards + a hairline under the Brand header,
   month/value pairs centered per column (design) */
.pen { padding: 14px; gap: 10px; }
.pen__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: center; }
.pen__mo { margin: 0; font-size: 10px; color: var(--muted); }
.pen__val { margin: 3px 0 0; font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -.5px; line-height: 1; }
.pen__val small { font-size: 12px; font-weight: 500; }
.pen__box { background: var(--field); border: 0; border-radius: 12px; padding: 9px 10px; display: flex; flex-direction: column; gap: 6px; }
.pen__brand { margin: 0; display: flex; align-items: center; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 500; color: var(--ink-2); }
.pen__brand .ico { width: 14px; height: 14px; color: var(--muted); }
.pen__row { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); }
.pen__row b { color: var(--ink-2); font-weight: 600; }
/* penalties card content, 1:1 with "incontrol dashboard (2).svg" (correction 28,
   2026-10-14; the design's penalties card is 526.7 px wide → this 225.5 px card
   at k = 0.4282). HORIZONTAL + TYPE at k: the two figure columns centred
   113.5 px × k either side of the card's middle; "Oct 2025" Geist 400 #565656
   (the site's --text) at its cap height 20.6 × k, "17.29 K" Geist 500 at
   29.5 × k with the K full size after a space; the grey boxes (the window grey)
   inset 49.7 × k from the card's edges, radius 34.5 × k, 33.1 × k inside; the
   Iconsax "card" (#292d32, 33.2 × k, its middle .9 px above the text's) + "Brand"
   Geist 400; the #d9d9d9 hairline across the box's inner width; the row labels
   400 #565656, the values 600, all in the design's near-black #0e1624 (the fees
   card's ink; dark: the dash ink). VERTICAL: the design card is relatively taller
   (h / w 1.58 vs 1.28), so the box keeps its height (it sits in .srow--3) and the
   design's gaps (title → figures → boxes → bottom, and inside each box) are all
   scaled by the ONE factor that fills this card exactly (0.324 px per design px). */
.dash--screen .pen { --pen-ink: #0e1624; --pen-ico: #292d32; gap: 0; }
:root[data-theme="dark"] .dash--screen .pen { --pen-ink: var(--ink); --pen-ico: var(--ink-2); }
.dash--screen .pen > * { flex-shrink: 0; }
.dash--screen .pen__cols { gap: 0; margin: 21.86px 1.57px 0; }
.dash--screen .pen__mo { font-size: 12.44px; font-weight: 400; line-height: 1; letter-spacing: -.025em; color: var(--text); }
.dash--screen .pen__val { margin-top: 3.34px; font-size: 17.79px; font-weight: 500; line-height: 1; letter-spacing: .012em; color: var(--pen-ink); }
.dash--screen .pen__val small { font-size: 1em; font-weight: inherit; }   /* the K after a real space in the markup (the design's gap) */
.dash--screen .pen__box { margin: 17.95px 0 0; padding: 12.23px 21.49px 11.36px; border-radius: 14.77px; gap: 0; }   /* box edges on the title's 14 px line (the design's title and boxes share one left line); the padding carries the design's 7.3 px extra inset so the content keeps its place */
.dash--screen .pen__box + .pen__box { margin-top: 10.76px; }
.dash--screen .pen__brand { gap: .2892em; padding-bottom: 4.82px; border-bottom-color: var(--border); font-size: 12.36px; font-weight: 400; line-height: 1; letter-spacing: -.01em; color: var(--pen-ink); }
.dash--screen .pen__brand .ico { flex: 0 0 auto; width: 1.15em; height: 1.15em; position: relative; top: -1.46px; color: var(--pen-ico); }
.dash--screen .pen__row { font-size: 10.66px; line-height: 1; letter-spacing: -.03em; color: var(--text); }
.dash--screen .pen__brand + .pen__row { margin-top: 6.34px; }
.dash--screen .pen__row + .pen__row { margin-top: 6.92px; }
.dash--screen .pen__row b { font-weight: 600; letter-spacing: -.018em; color: var(--pen-ink); }
/* the LANDING monitor's narrower penalties card (192.7 × 264.7 px): the type at
   the landing screen's 0.89 (as the fees + chart cards beside it), the boxes and
   columns at the card's own width (k = 0.3658), the gaps at 0.297 per design px */
.monitor__screen .dash--screen .pen__cols { margin: 19.59px -.7px 0; }
.monitor__screen .dash--screen .pen__mo { font-size: 11.07px; }
.monitor__screen .dash--screen .pen__val { margin-top: 3.62px; font-size: 15.84px; }
.monitor__screen .dash--screen .pen__box { margin: 16.14px 0 0; padding: 11.05px 16.31px 10.43px; border-radius: 12.62px; }
.monitor__screen .dash--screen .pen__box + .pen__box { margin-top: 9.84px; }
.monitor__screen .dash--screen .pen__brand { padding-bottom: 4.55px; font-size: 11px; }
.monitor__screen .dash--screen .pen__brand .ico { top: -1.2px; }
.monitor__screen .dash--screen .pen__row { font-size: 9.49px; }
.monitor__screen .dash--screen .pen__brand + .pen__row { margin-top: 5.85px; }
.monitor__screen .dash--screen .pen__row + .pen__row { margin-top: 6.41px; }
/* GCO — side-by-side in the monitor (number left, chart right).
   Scoped as .dash--screen .sgco so it beats the hero's .dash .gco column layout. */
.dash--screen .sgco { position: relative; flex-direction: row; gap: 14px; padding: 14px; align-items: stretch; }
/* "Yearly ⌄" select chip pinned to the card's top-right (design) */
.gco__yearly { position: absolute; top: 14px; right: 16px; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-2); }
.gco__yearly .schev { width: 12px; height: 12px; color: var(--muted); }
.dash--screen .sgco__left { display: flex; flex-direction: column; flex: 0 0 33%; }
.dash--screen .sgco__left .gco__big { margin: 6px 0 0; }
.dash--screen .sgco__left .gco__sub { margin: 3px 0 0; }
.dash--screen .sgco__left .d-btn { margin-top: auto; }
.dash--screen .sgco__right { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; justify-content: flex-end; }
.dash--screen .sgco__right .plot { flex: 1 1 auto; min-height: 0; height: auto; }
/* forecast card */
.fc { padding: 14px; gap: 8px; }
.fc__body { flex: 1 1 auto; display: flex; gap: 16px; align-items: center; min-height: 0; }
.fc__lead { flex: 0 0 auto; }
.fc__big { margin: 0; font-size: 25px; font-weight: 600; color: var(--ink); letter-spacing: -.8px; line-height: 1; }
.fc__grid { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.fc__big em, .fc__n em { font-style: normal; font-size: .5em; font-weight: 500; color: var(--muted); vertical-align: middle; margin-right: 2px; }
.fc__n { margin: 0; font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -.5px; line-height: 1; }
.fc__l { margin: 3px 0 0; font-size: 10.5px; color: var(--muted); }
.fc .d-btn { margin-top: 0; align-self: flex-start; }

/* metallic stand/base — CSS rebuild from the Figma gradients (mostly clipped at the section bottom) */
.monitor-base {
  position: absolute;
  right: 92px;            /* was left:1100 on the 1440 canvas — keeps it centred under the monitor */
  top: 700px;
  width: 248px;
  height: 200px;
  z-index: 0;
  border-radius: 24px 24px 0 0 / 46px 46px 0 0;
  background: linear-gradient(180deg, #b7b8ba 0%, #cbccce 9%, #d8d8d8 29%, #dedede 51%, #d1d1d1 92%, #f4f4f4 96%, #cccccc 98%, #787a7e 99%, #696969 100%);
  box-shadow: inset 0 1.3px 1.3px rgba(0, 0, 0, .25), inset 0 1px 2px rgba(255, 255, 255, .5);
  pointer-events: none;
}
.monitor-base::before {                /* neck / hinge highlight */
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
  width: 70px;
  height: 82px;
  border-radius: 50%;
  background: radial-gradient(38% 38% at 50% 100%, #ffffff 0%, #e8e9ec 55%, #c0c1c3 100%);
}

/* ============================================================
   §9 · SERVICES  (Figma "services") — heading + 4 product cards.
   Built live (themeable). Card 1 = Scheme Fee Analytics.
   ============================================================ */
.services { position: relative; width: 100%; margin: 0 auto; overflow: hidden;
  background: linear-gradient(0deg, rgba(250, 87, 62, .01), rgba(250, 87, 62, .01)), var(--bg);
  padding: 50px var(--gutter) 110px; }   /* top: 160 → 110 (2026-09-01 swap, ribbon left) → 50 (user: lift the section; card→heading gap 230 → 170) */
/* grey flowing vector — blurred soft wash (matches Figma blur(15)), enters from the top */
.services__swoosh { position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 0; pointer-events: none; user-select: none; filter: blur(15px); }
:root[data-theme="dark"] .services__swoosh { opacity: .55; }   /* soften the grey wash on dark */
.services__head, .services__grid { position: relative; z-index: 1; }
/* Typography matched to Figma: Geist weight 400, -0.02em tracking. */
.services__head { display: flex; flex-direction: column; align-items: center; gap: 24px; margin: 0 auto 64px; max-width: var(--maxw); }
.services__title { margin: 0; width: 728px; max-width: 100%; text-align: center; font-weight: 400; font-size: 40px; line-height: 1.2; letter-spacing: -0.025em; color: var(--text-strong); }  /* 728 fits "Solutions to maximize card and merchant" on line 1 (hard <br>) */
.services__lead { margin: 0; width: 552px; max-width: 100%; text-align: center; font-weight: 400; font-size: 18px; line-height: 1.5; letter-spacing: -0.02em; color: var(--text); }  /* 552 fits "...to analyze, negotiate, and" on line 1 (hard <br>) */
.services__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin: 0 auto; max-width: 1500px; }  /* wide monitors: cards grow with the row (~356 @1920) — the user likes that there */
/* laptop-class widths (≤1700): the full-size cards felt too big → render the whole card
   (box + text + the pixel-tuned art) at 85% of the Figma 326×480 via zoom, columns capped at
   the design width and centred. Row = 4×326+45 = 1349 zoomed px ≈ 1147 real px → fits 1280+. */
@media (max-width: 1700px) {
  .services__grid { zoom: .85; grid-template-columns: repeat(4, minmax(0, 326px)); justify-content: center; }
}

/* product card shell (326x480, hairline #EDEDED border, 27px radius). Padding trimmed
   33.86→30 so card 4's desc keeps the Figma "…allocating / costs…" break down to 1440
   (our fluid cards run ~316px at 1440 vs the Figma's 326, leaving the desc 4px short). */
.pcard { position: relative; display: flex; flex-direction: column; width: auto; min-height: 480px; padding: 30px; background: var(--surface); border: 1px solid #EDEDED; border-radius: 27px; box-shadow: 0 12px 30px rgba(16, 24, 40, .04); transition: transform .2s ease, box-shadow .2s ease; }
/* whole-card link — stretched from the card title to its matching solutions section */
.pcard__link { color: inherit; text-decoration: none; }
.pcard__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.pcard:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(16, 24, 40, .12); }
/* the four card icons are marketing's own SVG files, served byte-identical as <img> (assets/img/services/icon-*.svg,
   2026-10-13 — their #FA573E colour is inside the files, both themes): a 31×31 frame like the two exports that carry one,
   the two tight groups (the 25×27 notes sheet, the 27×22 card with arrows) centred in it */
.pcard__icon { display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; }
.pcard__icon img { display: block; }
.pcard__title { margin: 19.47px 0 0; font-weight: 400; font-size: 20.3px; line-height: 1.1; letter-spacing: -0.02em; color: var(--text-strong); }
.pcard__desc { margin: 13.54px 0 0; font-weight: 400; font-size: 13.5px; line-height: 1.5; letter-spacing: -0.02em; color: var(--text); }
.pcard__art { margin: auto; width: 215px; }                   /* centred in the lower card */

/* card 1 art — savings badge + scheme-invoice panel (delicate ~10px type) */
.pfee__badge { display: flex; align-items: center; gap: 8.2px; padding: 16.9px 13.5px; background: var(--surface); border: 1px solid var(--border); border-radius: 6.77px; }
.pfee__check { flex: 0 0 auto; width: 20.3px; height: 20.3px; }
.pfee__check svg { width: 20.3px; height: 20.3px; display: block; }
.pfee__btxt { font-weight: 500; font-size: 10.2px; line-height: 1.28; letter-spacing: -0.02em; color: var(--text-strong); }
.pfee__pill { margin-left: auto; flex: 0 0 auto; padding: 5px; border-radius: 6.77px; background: rgba(104, 207, 119, .15); color: #4DB25C; font-weight: 400; font-size: 10.2px; letter-spacing: -0.02em; }
.pfee__invoice { margin-top: 12.3px; padding: 13.5px; border-radius: 6.77px; background: #F2F7FF; display: flex; flex-direction: column; gap: 8.2px; }
.pfee__ilabel { margin: 0; font-weight: 400; font-size: 10.2px; letter-spacing: -0.02em; color: var(--text); }
.pfee__rule { height: 1px; background: var(--border); }
.pfee__row { display: flex; align-items: center; }
.pfee__bar { height: 6.77px; border-radius: 1.7px; display: block; }
.pfee__bar--blue { background: #D9E8F5; }
.pfee__bar--white { background: #ffffff; }
.pfee__total { display: flex; justify-content: space-between; font-weight: 400; font-size: 10.2px; letter-spacing: -0.02em; color: var(--text-strong); }

/* dark mode */
:root[data-theme="dark"] .pcard { border-color: var(--border); box-shadow: 0 24px 50px rgba(0, 0, 0, .45); }
:root[data-theme="dark"] .pcard:hover { box-shadow: 0 30px 60px rgba(0, 0, 0, .6); }
:root[data-theme="dark"] .pfee__invoice { background: rgba(126, 166, 255, .08); }
:root[data-theme="dark"] .pfee__bar--white { background: rgba(255, 255, 255, .14); }
:root[data-theme="dark"] .pfee__bar--blue { background: rgba(126, 166, 255, .3); }
:root[data-theme="dark"] .pfee__pill { background: rgba(52, 199, 89, .18); color: #5fdd85; }

/* card 2 art — "Savings forecast" panel + total-savings bar */
.pcard__art--oe { width: 205px; position: relative; }
.pfc { width: 187px; margin: 0 auto; padding: 13.3px; background: #F2F7FF; border-radius: 7.8px; display: flex; flex-direction: column; }
.pfc__head { display: flex; align-items: center; gap: 6.7px; padding-bottom: 9px; border-bottom: 1px solid #E5E7EB; }
.pfc__coin { flex: 0 0 auto; width: 19px; height: 19px; }
.pfc__coin svg { width: 19px; height: 19px; display: block; }
.pfc__htext { display: flex; flex-direction: column; gap: 1px; line-height: 1.1; }
.pfc__htext em { font-style: normal; font-weight: 400; font-size: 6.7px; letter-spacing: .17px; text-transform: uppercase; color: #99A1AF; }
.pfc__htext b { font-family: "Inter", "Geist", system-ui, sans-serif; font-weight: 500; font-size: 7.8px; letter-spacing: -.08px; color: #4A5565; }
.pfc__rows { display: flex; flex-direction: column; gap: 5.5px; margin-top: 8px; }
.pfc__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4.4px; border-radius: 2.2px; font-size: 7.8px; letter-spacing: -.08px; white-space: nowrap; }
.pfc__row span { color: #0A1733; }
.pfc__row b { font-weight: 500; color: #0A1733; }
.pfc__row--card { background: #fff; box-shadow: 0 3.4px 5px rgba(0, 0, 0, .03), 0 10px 13.5px rgba(0, 0, 0, .08); }
.pfc__row--blue { background: #D9E8F5; box-shadow: 0 3.4px 5px rgba(0, 0, 0, .03), 0 10px 13.5px rgba(0, 0, 0, .08); }
.pfc__row--faded { filter: blur(.9px); padding: 4.4px 0; }
.pfc__row--faded span { color: #6A7282; }
.pfc__row--faded b { color: #364153; font-weight: 400; }
.pfc__lbl { display: flex; flex-direction: column; line-height: 1.15; }
.pfc__lbl em { font-style: normal; font-weight: 300; font-size: 6.7px; letter-spacing: 0; color: #6A7282; }
.pfc__total { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 215px; margin: -8px auto 0; padding: 6px 9px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; }
.pfc__total > span { font-weight: 400; font-size: 17px; letter-spacing: -.22px; color: var(--text-strong); white-space: nowrap; }
.pfc__pill { flex: 0 0 auto; padding: 3px 8px; border-radius: 6.77px; background: rgba(104, 207, 119, .15); color: #4DB25C; font-weight: 400; font-size: 17px; letter-spacing: -.31px; }

/* dark mode — card 2 */
:root[data-theme="dark"] .pfc { background: rgba(126, 166, 255, .08); }
:root[data-theme="dark"] .pfc__head { border-bottom-color: rgba(255, 255, 255, .1); }
:root[data-theme="dark"] .pfc__row span, :root[data-theme="dark"] .pfc__row b { color: var(--text-strong); }
:root[data-theme="dark"] .pfc__row--card { background: rgba(255, 255, 255, .1); box-shadow: 0 8px 16px rgba(0, 0, 0, .4); }
:root[data-theme="dark"] .pfc__row--blue { background: rgba(126, 166, 255, .22); box-shadow: 0 8px 16px rgba(0, 0, 0, .4); }
:root[data-theme="dark"] .pfc__row--faded span, :root[data-theme="dark"] .pfc__row--faded b { color: var(--muted); }
:root[data-theme="dark"] .pfc__pill { background: rgba(52, 199, 89, .18); color: #5fdd85; }

/* ============================================================
   card 3 art — "Portfolio Optimization": a faded, stacked
   "Client Incentives Agreement" behind a floating
   "$124 MM agreed incentives" search pill (orange magnifier).
   ============================================================ */
.pcard__art--po { width: 258px; height: 250px; position: relative; }
.ppo { position: absolute; inset: 0; }

/* stacked agreement sheets — the two back sheets are blurred + faded (empty
   #F2F7FF panels) so they read as a stack of papers behind; the front sheet
   is crisp and holds the tiny grey legal text (full 3-paragraph agreement).
   The whole stack is centred (like cards 1 & 2's art). No overall mask — the
   soft top is just the blurred back sheets peeking above the front panel. */
.ppo__stack { position: absolute; inset: 0; }
.ppo__sheet { position: absolute; left: 50%; transform: translateX(-50%);
  background: #F2F7FF; border-radius: 6.77px; filter: blur(1.7px); }
.ppo__sheet--a { top: 13px; width: 147px; height: 102px; opacity: .56; }  /* backmost, narrower */
.ppo__sheet--b { top: 24px; width: 174px; height: 121px; opacity: .8; }   /* middle */
/* front (readable) sheet — sizes to its text (text + 20px padding, per Figma) */
.ppo__doc { position: absolute; left: 50%; top: 36px; transform: translateX(-50%); width: 174px;
  background: #F2F7FF; border-radius: 6.77px; padding: 20px; }
.ppo__legal { margin: 0; font-family: "Geist", system-ui, sans-serif; font-weight: 700;
  font-size: 6.77px; line-height: 9px; letter-spacing: -0.02em; color: #D9D9D9; }

/* floating search pill — sits below the 2-line header, covering the first
   body line ("This Card Scheme Agreement…") */
.ppo__pill { position: absolute; left: 50%; top: 80px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8.2px; width: 226px; height: 47.4px; padding: 0 16.44px;
  background: var(--surface); border: 0.85px solid var(--border); border-radius: 6.77px;
  box-shadow: 0 10.16px 13.54px -3.39px rgba(0, 0, 0, .08), 0 3.39px 5.08px -1.69px rgba(0, 0, 0, .03); }
.ppo__search { flex: 0 0 auto; width: 20.31px; height: 20.31px; color: var(--brand); }
/* "agreed incentives" is muted; "$124 MM" pops (heavier + strong colour) */
.ppo__ptxt { font-family: "Geist", system-ui, sans-serif; font-weight: 500; font-size: 13.54px;
  line-height: 18px; letter-spacing: -0.02em; color: var(--text); white-space: nowrap; }
.ppo__ptxt strong { font-weight: 600; color: var(--text-strong); }

/* dark mode — card 3 */
:root[data-theme="dark"] .ppo__sheet,
:root[data-theme="dark"] .ppo__doc { background: rgba(126, 166, 255, .08); }
:root[data-theme="dark"] .ppo__legal { color: rgba(231, 236, 245, .20); }
:root[data-theme="dark"] .ppo__pill { box-shadow: 0 14px 24px rgba(0, 0, 0, .5); }

/* card 4 art — two overlapping interchange stat cards (cost + margin) */
.pcard__art--ia { width: 258px; height: 224px; position: relative; }
.pia { position: absolute; inset: 0; }
.pia__stat { position: absolute; box-sizing: border-box; width: 210px; height: 125px; padding: 16.5px 11px 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 5.5px; overflow: hidden; display: flex; flex-direction: column; }
.pia__stat--cost { left: 0; top: 0; z-index: 1; }
.pia__stat--margin { left: 48px; top: 96px; z-index: 2; box-shadow: 0 10px 22px rgba(16, 24, 40, .08); }
.pia__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pia__label { font-weight: 500; font-size: 10.2px; line-height: 1.28; letter-spacing: -0.02em; color: var(--text-strong); }
.pia__val { display: inline-flex; align-items: center; gap: 1.4px; white-space: nowrap; }
.pia__arw { flex: 0 0 auto; width: 20px; height: 20px; color: #4DB25C; }
.pia__val b { font-weight: 300; font-size: 31.6px; line-height: 1; letter-spacing: -0.02em; color: var(--text-strong); }
.pia__chart { margin: 8px 0 0; flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: 0 0 4px 4px; }
.pia__chart svg { width: 100%; height: 100%; display: block; }
:root[data-theme="dark"] .pia__stat--margin { box-shadow: 0 12px 26px rgba(0, 0, 0, .5); }

/* ============================================================
   §10 · TOOLS  (Figma "Features_V5") — "Specialized tools…" heading + a
   two-option switcher (Fee Manager / Interchange Hub) on the left and a
   live dashboard on the right. Built live (themeable). ISOLATED / easy
   revert: delete this block + the <section class="tools"> in index.html.
   SEGMENT 4 — Step 1 = left column (heading + lead + switcher). The
   dashboard (steps 2–3) and the toggle (step 4) come next.
   ============================================================ */
.tools { position: relative; width: 100%; margin: 0 auto; overflow: hidden;
  background: linear-gradient(0deg, rgba(250, 87, 62, .01), rgba(250, 87, 62, .01)), var(--bg); }
/* tools half of the platform seam wash — cta-wash-lower.svg pinned to the top (moved here from
   .services in the 2026-09-01 section swap; pairs with .platform__wash exactly as before) */
.tools__wash { position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 0;
  /* fade the img's BOTTOM so it can't hard-clip at the tools→services boundary; the top
     edge is the seam — never fade it. ⚠️ PX FROM THE SEAM, not % of the image (see .tm__wash):
     the img is 1063 tall @1440 → 1879 @2560 while the section is a fixed 820 (.tools__inner
     min-height), so the old 55%→96% ramp was 92% opaque at the cut @1920 — a hard band.
     Fully transparent by 790px < 820 → clean at every width. */
  -webkit-mask-image: linear-gradient(to bottom, #000 420px, transparent 790px);
          mask-image: linear-gradient(to bottom, #000 420px, transparent 790px);
  pointer-events: none; user-select: none; transform: scaleX(-1);   /* same mirror as .platform__wash → seam stays continuous */ }
:root[data-theme="dark"] .tools__wash { opacity: .75; }
/* capped inner: left copy | (dashboard bleeds off the right — added in step 2) */
.tools__inner { position: relative; z-index: 1; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter); min-height: 820px; display: flex; align-items: center; }

/* ---- left column: heading + lead + switcher ---- */
.tools__copy { position: relative; top: -20px; z-index: 2; max-width: 538px; display: flex; flex-direction: column; gap: 48px; }
.tools__head { display: flex; flex-direction: column; gap: 32px; }
.tools__title { margin: 0; max-width: 538px; font-weight: 400; font-size: 40px; line-height: 1.2;
  letter-spacing: -0.025em; color: var(--text-strong); }
.tools__lead { margin: 0; max-width: 538px; font-weight: 400; font-size: 18px; line-height: 1.5;
  letter-spacing: -0.02em; color: var(--text); }

/* ---- option switcher: vertical rail + stacked options ---- */
.tools__switch { display: flex; gap: 48px; }
/* rail = full-height grey track; orange bar marks the active option (slides via
   --bar-y / --bar-h when the toggle lands in step 4) */
.tools__rail { position: relative; flex: 0 0 1px; align-self: stretch; background: rgba(0, 0, 0, .25); }
.tools__bar { position: absolute; left: -1px; top: var(--bar-y, 0); width: 3px; height: var(--bar-h, 175px);
  background: var(--brand-2); transition: top .45s cubic-bezier(.22, .61, .36, 1), height .45s cubic-bezier(.22, .61, .36, 1); }
.tools__opts { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

/* each option — the title is a <button> that activates the option on click */
.topt { display: flex; flex-direction: column; }
.topt__icon { color: var(--brand); }
.topt__icon svg { width: 36px; height: 36px; display: block; }
.topt__info { display: flex; flex-direction: column; gap: 16px; }
.topt__title { margin: 0; padding: 0; border: 0; background: none; font-family: inherit; text-align: left;
  cursor: pointer; font-weight: 400; letter-spacing: -0.025em; color: var(--text-strong); transition: color .3s ease; }
.topt__desc { margin: 0; font-weight: 400; font-size: 18px; line-height: 1.5; letter-spacing: -0.02em; color: var(--text); }

/* ACTIVE (expanded): icon / (title + desc) / CTA, gap 32; title = H3 */
.topt.is-active { gap: 32px; }
.topt.is-active .topt__title { font-size: 32px; line-height: 1.2; cursor: default; }
/* Reserve 2 desc lines on the ACTIVE option so both tabs' expanded heights match.
   Without this, Interchange's 1-line desc makes its expanded block 27px shorter
   than Fee's (2-line desc); since .tools__copy is vertically centred, that
   re-centres the whole column and the heading jumps ~13.5px on toggle. */
.topt.is-active .topt__desc { min-height: 54px; }   /* 2 × (18px × 1.5 line-height) */
.topt__cta { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-weight: 500; font-size: 16px; line-height: 1.1; letter-spacing: -0.02em; color: var(--text-strong); }
.topt__cta .icon { color: var(--text-strong); transition: transform .2s ease; }
.topt__cta:hover .icon { transform: translateX(3px); }

/* COLLAPSED (not active): grey H6 title only — icon, desc, CTA hidden */
.topt:not(.is-active) { gap: 0; }
.topt:not(.is-active) .topt__icon,
.topt:not(.is-active) .topt__desc,
.topt:not(.is-active) .topt__cta { display: none; }
.topt:not(.is-active) .topt__title { font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; color: #7f7f7f; }
.topt:not(.is-active) .topt__title:hover { color: var(--text-strong); }

/* divider between options */
.topt__rule { height: 1px; background: #dfdfdf; }

/* dark theme */
:root[data-theme="dark"] .tools__rail { background: rgba(255, 255, 255, .18); }
:root[data-theme="dark"] .topt:not(.is-active) .topt__title { color: var(--muted, #79839a); }
:root[data-theme="dark"] .topt:not(.is-active) .topt__title:hover { color: var(--text-strong); }
:root[data-theme="dark"] .topt__rule { background: var(--border); }

/* ---- right: Fee Manager dashboard — "Opt-Outs Billings Evolution Graph" ----
   Fixed 631×511 artwork that bleeds off the content's right edge (like the
   monitor); internals placed at their exact Figma coords. Themeable via
   scoped --fg-* tokens. The KPI row is wider than the card so the 3rd stat
   ("Annual Forecast") clips at the right edge, per Figma. */
/* The card is built at its FULL width (768px — enough to hold the whole KPI row
   + chart) but anchored to hide the extra 137px past the content's right edge,
   so at the Figma design width exactly 631px shows (matching Figma's cut card)
   and the content clips at the edge. On a laptop (<1600) that edge is the
   viewport edge → reads as running off the page (unchanged from before). On a
   wide/ultrawide monitor the capped content centres and the hidden 137px is
   revealed, so the WHOLE dashboard shows, framed. 137 = 768 − 631.
   Card sits 67px below centre, per Figma. */
.tools__dash { position: absolute; top: 50%; right: -72px;  /* was -137; nudged 65px left in steps (user, 2026-09-01) */ transform: translateY(calc(-50% + 35px)); z-index: 1; }
.feegraph {
  --fg-title: var(--text-strong);
  --fg-sub: var(--text);
  --fg-blue: #ff8904;                      /* chart line + dots (was blue; now the "Expense Evolution" orange) */
  --fg-line: var(--border);
  --fg-grid: #f1f1f1;
  --fg-yaxis: #999999;
  --fg-area-1: rgba(255, 137, 4, .4);      /* area gradient top (per the Figma) */
  --fg-area-2: rgba(255, 137, 4, 0);
  --fg-today-line: #d9d9d9;                /* solid guide line down from the Sep peak */
  --fg-today-bg: var(--surface);           /* outline pill (white bg + orange border/text) */
  --fg-kpi-border: #f3f4f6;                /* KPI stat pills */
  position: relative; box-sizing: border-box;
  width: 690px; height: 511px;             /* 690 = the Figma frame's cut: the card's own edge clips pill 3 right
                                              after "USD" (number never visible) and cuts the chart just past Oct —
                                              the pill row + chart deliberately overflow (Figma "Expense Evolution") */
  background: var(--surface);
  border: 12px solid rgba(0, 0, 0, .02);
  border-radius: 24px;                      /* finished on all corners now (Figma cut the right side; we complete it) */
  box-shadow: 0 30px 70px rgba(10, 23, 51, .12);
  overflow: hidden;
  font-family: "Geist", system-ui, sans-serif;
}
:root[data-theme="dark"] .feegraph {
  --fg-blue: #ffa03a;
  --fg-grid: #223049;
  --fg-yaxis: #6b7488;
  --fg-area-1: rgba(255, 160, 58, .3);
  --fg-area-2: rgba(255, 160, 58, 0);
  --fg-today-line: rgba(255, 255, 255, .22);
  --fg-today-bg: var(--surface);
  --fg-kpi-border: var(--border);
  border-color: rgba(255, 255, 255, .05);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}
/* header */
.fg__head { position: absolute; left: 38px; top: 40px; display: flex; flex-direction: column; gap: 8px; }
.fg__title { margin: 0; font-weight: 400; font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; color: var(--fg-title); }
.fg__sub { margin: 0; font-weight: 400; font-size: 12px; line-height: 1.1; letter-spacing: -0.02em; color: var(--fg-sub); }
/* KPI stats row */
.fg__kpis { position: absolute; left: 38px; top: 108px; display: flex; align-items: stretch; gap: 24px; white-space: nowrap; }
/* each stat now sits in its own bordered pill (Figma "Expense Evolution") */
.fg__kpi { display: flex; align-items: center; gap: 12px;
  padding: 13px 18px; border: 1px solid var(--fg-kpi-border); border-radius: 16px; background: var(--surface); }
.fg__kpi-label { display: flex; flex-direction: column; align-items: flex-start; }
.fg__kpi-name { font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: -0.3px; color: var(--fg-sub); }
.fg__kpi-date { font-weight: 400; font-size: 10px; line-height: 13px; letter-spacing: -0.3px; color: var(--fg-sub); opacity: .6; }
.fg__val { margin: 0; display: flex; align-items: flex-start; gap: 8px; color: var(--fg-title); }
.fg__val em { font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: -0.3px; text-transform: uppercase; color: var(--fg-sub); }
.fg__val b { font-weight: 600; font-size: 24px; line-height: 1; letter-spacing: -1px; padding-top: 4px; }
/* area chart: y-axis (HTML) | plot (SVG, gridlines+area+line+dots+Today) with month labels below */
.fg__chart { position: absolute; left: 38px; top: 187px; width: 740px; height: 265px; display: grid; grid-template-columns: 44px 1fr; gap: 8px; }  /* wider than the card on purpose — the plot bleeds past the right edge and the card clips it (Figma cut between Oct and Nov) */
.fg__yaxis { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; height: 248px;
  font-weight: 400; font-size: 10px; line-height: 13px; letter-spacing: -0.3px; text-transform: uppercase; color: var(--fg-yaxis); }
.fg__yaxis b { font-weight: 600; color: var(--fg-sub); }   /* the 80K/60K/… values are bold per the Figma; "USD" stays light */
.fg__yaxis .fg__zero { color: var(--fg-sub); font-weight: 600; }
.fg__plotwrap { position: relative; min-width: 0; }
.fg__plot { display: block; width: 100%; height: 248px; overflow: visible; }
.fg__months { display: flex; justify-content: space-between; padding-top: 4px;
  font-weight: 500; font-size: 10px; line-height: 13px; letter-spacing: -0.3px; color: var(--fg-sub); }
/* "Today" pill under the Sep column (data x 455.24 / 640 = 71.1%) */
.fg__today { position: absolute; top: 268px; left: 71.1%; transform: translateX(-50%);
  padding: 4px 8px; border-radius: 40px; background: var(--fg-today-bg); border: 1px solid var(--fg-blue);
  font-weight: 500; font-size: 10px; line-height: 13px; letter-spacing: -0.3px; color: var(--fg-blue); white-space: nowrap; }

/* WIDE SCREENS (≥1700, the site's existing tier): the whole card is on-screen, so the
   690px "Figma cut" (pill 3 stops after USD, chart cut past Oct) would read as a broken
   edge. Complete the card instead: 810 wide, chart 722 → the 688-unit plot fits inside
   (all 12 months, all 3 KPIs incl. the 385,389, rounded right corner). ≤1700 keeps the 690 bleed card. */
@media (min-width: 1700px) {
  .feegraph { width: 810px; }     /* 810 (not the Figma's 768): our KPI pill 3 ends at ~792px from the card's left,
                                      so 768 would still clip its number — 810 leaves 6px inside the 12px border */
  .fg__chart { width: 722px; }    /* 38px left margin mirrored on the right (810 − 12 − 38 − 722 = 38) */
}

/* ============================================================
   DASHBOARD GLIDE — Fee Manager <-> Interchange cards swap with a
   left->right "conveyor" (2026-08-18, replaced the old symmetric
   translateX(±135%) transitions — the fee card used to exit LEFT over
   the copy text). Direction-aware keyframes: the LEAVING card drifts
   right + dissolves (toward the right bleed, .tools overflow:hidden
   clips it); the ENTERING card sweeps in from the left ~90ms later
   with a micro-overshoot settle. BOTH toggle directions flow
   left->right. JS (main.js activate()) sets .show-ix for the resting
   state + .swap-anim/.is-entering/.is-leaving for the ride.
   .feegraph stays in flow (defines the stage box); .ixgraph overlays
   it, centre-aligned. Keyframes compose transform via --ty (fee 0px /
   ix -50%) because keyframes overwrite the whole transform.
   ============================================================ */
.feegraph, .ixgraph { will-change: transform; --ty: 0px; }
.ixgraph { position: absolute; top: 50%; right: 0; --ty: -50%; transform: translateY(-50%); }
/* resting states — the active card sits at base, the inactive one is invisible */
.ixgraph { opacity: 0; pointer-events: none; }
.tools.show-ix .ixgraph { opacity: 1; pointer-events: auto; }
.tools.show-ix .feegraph { opacity: 0; pointer-events: none; }
/* the swap ride (animations out-cascade the resting rules above) */
@keyframes tools-card-exit {
  from { opacity: 1; transform: translateY(var(--ty)) translateX(0) scale(1); }
  to   { opacity: 0; transform: translateY(var(--ty)) translateX(7%) scale(.98); }
}
@keyframes tools-card-enter {
  0%   { opacity: 0; transform: translateY(var(--ty)) translateX(-6.5%) scale(.985); }
  72%  { opacity: 1; transform: translateY(var(--ty)) translateX(.55%) scale(1.002); }
  100% { opacity: 1; transform: translateY(var(--ty)) translateX(0) scale(1); }
}
.tools.swap-anim .is-leaving  { animation: tools-card-exit .42s cubic-bezier(.45, .05, .68, .35) both; }
.tools.swap-anim .is-entering { animation: tools-card-enter .62s cubic-bezier(.22, .61, .36, 1) .09s both; }
@media (prefers-reduced-motion: reduce) {
  .tools.swap-anim .is-leaving, .tools.swap-anim .is-entering { animation: none; }
}

/* ============================================================
   INTERCHANGE DASHBOARD card (2nd state) — built live from the Figma spec.
   Full-content width so it completes on a wide monitor (like the Fee card).
   ============================================================ */
.ixgraph {
  --ix-ink: #1e2939; --ix-mute: #99a1af; --ix-line: #f3f4f6; --ix-hl: #f1f5f9; --ix-hl-b: #e2e8f0;
  --ix-grid: #f0f0f4; --ix-orange: #ff6900; --ix-orange-b: #ff8904; --ix-bval: #374151;
  box-sizing: border-box; width: 768px;   /* matched to the Fee Manager card (user 2026-08-18; was 896) */
  background: var(--surface); border: 12px solid rgba(0, 0, 0, .02); border-radius: 24px;
  box-shadow: 0 30px 70px rgba(10, 23, 51, .12);
  padding: 20px 28px 0; display: flex; flex-direction: column; gap: 14px;
  font-family: "Geist", system-ui, sans-serif;
  /* the bottom is CUT like the Figma frame (marketing corrections, 2026-10-13): no bottom padding,
     overflow hidden, and the chart card below runs 11px past the edge (its 1px border + 10px of
     its 16px padding are clipped) so the bars' feet sit 6px above the card's 12px ring, with no
     x-axis labels under them — the reference ends there. */
  overflow: hidden;
}
/* header */
.ix__head { display: flex; flex-direction: column; gap: 3px; }
.ix__title { margin: 0; font-weight: 400; font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; color: var(--text-strong); }
.ix__sub { margin: 0; font-weight: 400; font-size: 12px; line-height: 1.1; letter-spacing: -0.02em; color: var(--text); }
/* filters */
.ix__filters { display: flex; align-items: center; gap: 14px; }
.ix__flabel { font-weight: 500; font-size: 14px; color: #6a7282; }
.ix__fbtn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  min-width: 140px; padding: 8px 16px; border-radius: 14px; background: var(--surface); border: 2px solid var(--ix-orange-b);
  color: var(--ix-orange); font-family: inherit; font-weight: 500; font-size: 14px; cursor: pointer; }
.ix__fbtn svg { width: 14px; height: 14px; flex: 0 0 auto; }
/* stat cards */
.ix__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ix__stat { box-sizing: border-box; padding: 18px 24px; border-radius: 16px; background: var(--surface); border: 1px solid var(--ix-line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1); display: flex; flex-direction: column; gap: 4px; }
.ix__stat--hl { background: var(--ix-hl); border-color: var(--ix-hl-b); }
.ix__stat b { font-weight: 700; font-size: 24px; line-height: 1.1; letter-spacing: -0.6px; color: var(--ix-ink); }
.ix__stat span { font-weight: 500; font-size: 12px; color: var(--ix-mute); }
/* chart card */
.ix__chartcard { box-sizing: border-box; padding: 16px; border-radius: 13.42px; background: var(--surface); border: 1px solid var(--ix-line);
  box-shadow: 0 1px 2.5px rgba(0, 0, 0, .1), 0 1px 1.7px -0.84px rgba(0, 0, 0, .1);
  margin-bottom: -11px; }   /* clipped by .ixgraph — see its comment */
.ix__chtitle { margin: 0 0 12px; font-weight: 600; font-size: 13.42px; color: var(--ix-ink); }
/* bar chart */
.ix__chart { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.ix__yaxis { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; height: 154px;
  font-weight: 400; font-size: 9.23px; color: var(--ix-mute); }
.ix__plot { position: relative; height: 154px; display: flex; align-items: flex-end; gap: 28px; padding: 0 10px; }
.ix__grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; z-index: 0; }
.ix__grid i { display: block; border-top: 1px dashed var(--ix-grid); }
.ix__bar { position: relative; z-index: 1; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.ix__bar > i { width: 100%; max-width: 74px; border-radius: 2px 2px 0 0; }
.ix__bval { display: flex; flex-direction: column; align-items: center; margin-bottom: 5px;
  font-weight: 700; font-size: 9.23px; line-height: 1.15; text-align: center; color: var(--ix-bval); }
.ix__bval em { font-style: normal; font-weight: 400; font-size: 8.4px; color: var(--ix-mute); }

/* dark theme — Interchange card */
:root[data-theme="dark"] .ixgraph {
  --ix-ink: #e7ecf5; --ix-mute: #79839a; --ix-line: #223049; --ix-hl: #0d1526; --ix-hl-b: #26314c;
  --ix-grid: #223049; --ix-bval: #c4ccdb;
  border-color: rgba(255, 255, 255, .05); box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}
:root[data-theme="dark"] .ix__flabel { color: var(--muted); }

/* ============================================================
   §11 · PRESENCE — flat map + proof numbers band
   (historically "SEGMENT 5 — STATS"; the globe dome lived here
   2026-08-14 → 2026-09-04, git has it: cd2ec1d and earlier)
   Full-width dark-navy band; a fixed 1440×800 canvas holds the heading +
   lead + legend (top-left), the dotted Natural-Earth world map with the
   six region callouts (painted live by js/flatmap.js — ported from the
   Claude-Design lab flatmap-3a-lab.html, option 3a; LOCKED settings live
   in that file's header), and the 4 proof numbers in one row under a
   hairline. Isolated block; revert = git.
   ============================================================ */
.presence {
  position: relative;
  width: 100%;
  background: #0A1733;   /* light theme: solid navy feature band — unchanged per user */
  overflow: hidden;
  display: flex;
  justify-content: center;
}
/* dark theme: (1) blend the band into the dark palette so it stops reading as a
   lighter/bluer block against #080d1a; (2) add a warm bottom-left bloom (drawn to
   meet the old case-study section's top-left glow at the seam; that section was
   rebuilt 2026-10-17, correction 56, and the bloom kept as it was). Dark-only:
   light keeps plain navy. */
:root[data-theme="dark"] .presence {
  background: radial-gradient(1100px 620px at 3% 104%, var(--glow-1), transparent 62%), var(--bg);
}
.presence__canvas {
  position: relative;
  width: 1440px;
  height: 800px;   /* user-tuned 2026-09-06: the lab stage was 700 (too short), the globe-era 895 was tried and rejected (hole under the map), 750 → 800 is the pick. The numbers row pins to the bottom; the map box is re-framed via ?tune */
  flex: none;
}
/* below 1440 the fixed canvas scales down to fit (never clips the heading) */
@media (max-width: 1439.98px) {
  .presence { height: calc(100vw * 800 / 1440); }
  .presence__canvas { transform: scale(calc(100vw / 1440px)); transform-origin: top center; }
}

/* heading + lead + legend (top-left). Position/gap = the lab (left 80, top 100,
   gap 28); the TEXT WIDTHS keep the site's user-approved values — title 440 so
   "Turning complex scheme / economics into results." stays 2 lines ("Turning
   complex scheme" measures 433px @40px; the lab's 400 made it 3 lines), lead 391
   (its 2-line break already matched the design, 2026-09-02). */
.presence__head {
  position: absolute; left: 80px; top: 100px;
  width: 440px; z-index: 4;
  display: flex; flex-direction: column; gap: 28px;
}
.presence__title {
  margin: 0; width: 440px;
  font-size: 40px; font-weight: 400; line-height: 120%;
  letter-spacing: -0.025em; color: #fff;
}
.presence__lead {
  margin: 0; width: 391px;
  font-size: 16px; font-weight: 400; line-height: 150%;
  letter-spacing: -0.02em; color: #D9D9D9;
}
.presence__legend {
  margin: 0;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 400; line-height: 1.2;
  letter-spacing: -0.01em; color: #D9D9D9;
}
.presence__legend i {
  flex: none; width: 10px; height: 10px; border-radius: 2px;
  background: #fa573e; box-shadow: 0 0 0 3px rgba(250,87,62,.22);
}

/* the map box — js/flatmap.js sizes its canvas from this box (880×550 in the
   1440 stage) and fades the canvas in on its first frame (.is-live). The canvas
   keeps its own compositor layer: without it every frame invalidates the whole
   transformed+clipped band (the globe dropped to ~25fps that way, 2026-08-19). */
.presence__map {
  position: absolute; left: 554px; top: 56px;   /* box re-framed by the user on the live 800-tall band via ?tune, locked 2026-09-06 (the lab had 500/56/880×440; CFG lon 5 · zoom 1.22 · pan -4/8 in flatmap.js v=8 — the 3a lab's framing, locked 2026-09-07) */
  width: 880px; height: 550px;
  z-index: 1;
}
.presence__map canvas {
  display: block; width: 100%; height: 100%;
  opacity: 0; transition: opacity .5s ease;
  will-change: transform; transform: translateZ(0);
}
.presence__map canvas.is-live { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .presence__map canvas { transition: none; }
}

/* proof numbers — one 4-column row pinned to the band's bottom, under a hairline
   (the ::before). Type = the lab: 30px numbers, 15px descs (max 250). */
.presence__stats {
  position: absolute; left: 120px; right: 40px; bottom: 60px;   /* 64 → 60 = the lab's locked number-block nudge (Y +4), 2026-09-07 */
  z-index: 3;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
  padding-top: 28px;
}
.presence__stats::before {
  content: ""; position: absolute; left: -44px; right: 44px; top: 0;   /* the lab's locked divider nudge (X −44): same width, shifted 44px left */
  height: 1px; background: rgba(255,255,255,.14);
}
.stat { min-width: 0; }
.stat__num {
  margin: 0;
  font-size: 30px; font-weight: 400; line-height: 110%;
  letter-spacing: -0.025em; color: #fff; white-space: nowrap;
}
.stat__num b { font-weight: 400; color: #FA573E; }   /* the "+" accent */
.stat__desc {
  margin: 10px 0 0;
  font-size: 15px; font-weight: 400; line-height: 120%;
  letter-spacing: -0.02em; color: #D9D9D9;
  max-width: 250px;
}

/* ============================================================
   §12 · CASE STUDIES — the landing's proof band (historically "SEGMENT 6"; the
   2026-09-23 «Direction 1b» ledger + study figures lived here until 2026-10-17,
   git has them). Rebuilt 2026-10-17 by marketing correction 56 from the Figma
   export (a 1440×1224 frame): a full-width navy band holding a FIXED 1440×1224
   canvas that scales below 1440 exactly like the presence band above it (§11,
   .presence / .presence__canvas). Inside the canvas: the export's background art
   (assets/img/proof/cs-bg.svg, verbatim: the blurred wave + two blurred ellipses,
   2560 wide at x −560), three tab panels as absolute layers (head top-left ·
   photo 685×518 · a column of three stats) and a centred glass pill switcher
   whose white thumb is placed by the case-study IIFE in js/main.js (.is-ready;
   without the script the thumb is hidden and the selected tab itself is white).
   The colours on the band are the export's literals (fixed on the navy); dark
   theme = var(--bg) under a warm top-left wash that continues the presence band's
   dark bloom across the seam, and no top line. Revert = git.
   ============================================================ */
.cs {
  position: relative;
  isolation: isolate;
  width: 100%;
  background: #0A1733;   /* light theme: the navy band, as the presence band above */
  overflow: hidden;
  display: flex;
  justify-content: center;
}
/* the export's 1px top edge: white at the centre, 10 % white at both ends, at 5 % opacity, full width */
.cs::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1;
  height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.1), #fff 50%, rgba(255,255,255,.1));
  opacity: .05;
}
/* dark theme: the band blends into the dark page (like .presence); everything inside keeps its colours.
   The radial 1100×620 at 3% 32px continues the presence band's dark bloom (its radial 1100×620 at
   3% 104% of its 800px height = 32px below its bottom edge), so the warm wash runs across the seam
   unbroken; the presence rule is frozen and untouched. */
:root[data-theme="dark"] .cs { background: radial-gradient(1100px 620px at 3% 32px, var(--glow-1), transparent 62%), var(--bg); }
/* dark theme: no top line — the export's 1px edge would mark a seam that does not exist on the dark page */
:root[data-theme="dark"] .cs::before { display: none; }
.cs__canvas {
  position: relative; z-index: 0;
  width: 1440px;
  height: 1224px;
  flex: none;
}
/* below 1440 the fixed canvas scales down to fit (the presence band's technique), on the layout
   width with the site's 1280 floor (body min-width 1280): identical at every viewport of 1280 CSS px
   or more; under browser zoom (WCAG 1.4.4) the canvas keeps the body's 1280 width instead of
   shrinking with the viewport. The presence band keeps its own rule (frozen). */
@media (max-width: 1439.98px) {
  .cs { height: calc(max(100vw, 1280px) * 1224 / 1440); }
  .cs__canvas { transform: scale(calc(max(100vw, 1280px) / 1440px)); transform-origin: top center; }
}
/* the background art — decorative; its viewBox x 0..1440 = the export frame */
.cs__bg {
  position: absolute; left: -560px; top: 0; z-index: 0;
  width: 2560px; height: 1224px; max-width: none;
  pointer-events: none; user-select: none;
}

/* the three tab panels — absolute layers over the whole canvas, so switching never moves the layout.
   Inside, a flex column (head, then photo) so the photo follows the head when the text grows
   (WCAG 1.4.12 text spacing); the default geometry is unchanged (the photo stays at 141, 382) */
.cs__panel {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  box-sizing: border-box; padding-left: 141px;
}
.cs__panel[hidden] { display: none; }   /* (0,2,0) beats .cs__panel's display: flex */
.cs__panel:focus-visible { outline-offset: -6px; }   /* tabindex 0: the ring stays inside the canvas (the band clips overflow) */
.cs__panel.is-entering { animation: cs-panel-in .3s cubic-bezier(.22,.61,.36,1) both; }
@keyframes cs-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* head — export: title box 99.45..195.45 (two 48px lines), lead box 231.45..285.45; a flex item
   of the panel: min-height 358 + the photo's 24px margin = the photo at y 382, and taller text
   pushes the photo down instead of running under it */
.cs__head {
  position: static; box-sizing: border-box;
  width: 732px; padding-top: 99.45px; min-height: 358px;
}
.cs__title {
  margin: 0; max-width: 732px;
  font-size: 40px; font-weight: 400; line-height: 48px;
  letter-spacing: -0.025em; color: #FFFFFF;
}
/* max-width 646: the project's wrap-matching rule caps a few px under the Figma box; 646 keeps the
   export's break «…scheme fees revealed» / «significant…» with a 5.4px margin */
.cs__lead {
  margin: 36px 0 0; max-width: 646px;
  font-size: 18px; font-weight: 400; line-height: 27px;
  letter-spacing: -0.02em; color: #D9D9D9;
}

/* photo — 685×518, r24, the image cover-filling it; in the panel's flex column under the head */
.cs__photo {
  position: relative; flex: none;
  width: 685px; height: 518px; margin: 24px 0 0;
  border-radius: 24px; overflow: hidden;
}
.cs__photo img { width: 100%; height: 100%; object-fit: cover; }
/* the export paints its two blurred ellipses OVER the photo: cs-shade.svg holds only those two
   (cs-bg.svg already shades the navy), placed at the photo's canvas position 141, 382 plus the
   viewBox's 560; the photo's overflow hidden + radius clip it */
.cs__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../assets/img/proof/cs-shade.svg") -701px -382px / 2560px 1224px no-repeat;
}

/* stats — three 132px boxes, 52px apart (y 419 / 603 / 787), each under a 1px rule on its left;
   the amount + desc block is centred vertically in its box (the export's 144px block
   overflows the 132px box by 6px top and bottom) */
.cs__stats {
  position: absolute; left: 968px; top: 419px; width: 341px;
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 52px;
}
.cs__stat {
  height: 132px;
  padding-left: 15px;   /* + the 1px rule = the export's content at x 16 of the box, 325 wide */
  border-left: 1px solid rgba(255,255,255,.16);
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.cs__amount {
  font-size: 80px; font-weight: 400; line-height: 88px;
  letter-spacing: -0.025em; color: #FFFFFF;
  white-space: nowrap;
}
.cs__desc {
  font-size: 16px; font-weight: 400; line-height: 24px;
  letter-spacing: -0.02em; color: #FFFFFF;
}
/* tabs 2–3 (2026-10-17, the exports «Case studies - PO.svg» / «Case studies - ITX.svg»): three wrap
   caps that keep the exports' line breaks (the nowrap probe, Chrome, layout px, the same at 1536 and
   1280): the Interchange title «…value for» 675 / «…for a» 705 → 690; its lead's first line 644 (2 px
   under 646) / «…than 3» 659 → 651; the Agreement stat 1 «…over the next» 284 / «…next 5» 297 → 290.
   Every other line breaks as exported at 732 / 646 / 325; the Spanish stays at 2 / 3 / 2 lines. */
#cs-panel-interchange .cs__title { max-width: 690px; }
#cs-panel-interchange .cs__lead { max-width: 651px; }
#cs-panel-agreement .cs__stat:first-child .cs__desc { max-width: 290px; }

/* the pill switcher — centred on the canvas, top 1023, 68 tall; a 16 % white glass pill
   whose tabs sit at +4 from its outer edge (1px border + 3px padding) */
.cs__tabs {
  position: absolute; left: 0; right: 0; top: 1023px; z-index: 2;
  width: max-content; height: 68px; margin: 0 auto;
  display: inline-flex; align-items: center;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 100px;
  background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* the white thumb under the selected tab — js/main.js sets its translateX + width from the
   tab's offsetLeft / offsetWidth (layout values, the canvas is scaled below 1440) */
.cs__thumb {
  position: absolute; left: 0; top: 3px; z-index: 0;
  width: 0; height: 60px;
  border-radius: 100px; background: #FFFFFF;
  pointer-events: none;
  display: none;   /* no script: hidden — the selected tab carries the white instead */
  transition: transform .35s cubic-bezier(.22,.61,.36,1), width .35s cubic-bezier(.22,.61,.36,1);
}
.cs__tabs.is-ready .cs__thumb { display: block; }
.cs__tab {
  position: relative; z-index: 1;
  height: 60px; margin: 0; padding: 0 24px;
  border: 0; border-radius: 47px;
  background: transparent;
  -webkit-appearance: none; appearance: none;
  font-family: inherit; font-size: 18px; font-weight: 400; line-height: 1.1;
  letter-spacing: -0.02em; color: #FFFFFF;
  white-space: nowrap; cursor: pointer;
  transition: color .35s cubic-bezier(.22,.61,.36,1);
}
.cs__tab[aria-selected="true"] { color: #0A1732; }
/* no script (.is-ready missing): the selected tab itself is the white pill */
.cs__tabs:not(.is-ready) .cs__tab[aria-selected="true"] { background: #FFFFFF; }
/* keyboard focus: the site's ring 2px outside the tab — it lands on the glass pill
   around the white thumb, so it reads on the thumb and on the navy alike */
.cs__tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 47px; }

@media (prefers-reduced-motion: reduce) {
  .cs__panel.is-entering { animation: none; }
  .cs__thumb, .cs__tab { transition: none; }
}

/* ============================================================
   §13 · TESTIMONIALS (historically "SEGMENT 7"). A single big quote card that
   slides between the 4 client testimonials via small ← / → arrows + pagination
   dots (bottom-right, on the logo row). Every quote is kept to the design's 4-line box.
   Built 1:1 from the Figma "Variation 2: Playful Gradient Stack" card
   (1304×512, r36, 0 4 12 shadow): avatar top-centre → centred serif quote
   (Crimson Text 30/36, 928 measure) → "Name · Role" / "at Bank" → utility bar
   (client logo left, dots right). Slides are a flex track translated by the
   slider IIFE in main.js; the card auto-fits the tallest testimonial so it
   never jumps, and each slide's blocks spread evenly (space-between) like the
   design's auto-layout. Revert = delete this block + the <section class="tm">
   markup + the testimonials IIFE in main.js.
   ============================================================ */
/* padding-top 100 (was 24): the band now starts right under the navy proof band (the old proof section
   was page-coloured with 100px bottom padding); 100 = the site's spacing under every full-width navy
   band (.pr-faq 100, .sol-cta 100) */
.tm { position: relative; width: 100%; background: var(--bg); padding: 100px 0 100px; overflow: hidden; }
/* upper slice of the SAME curved orange vector as the closing-CTA below, pinned to
   this section's bottom so the wash flows continuously UP across the seam (no break) */
.tm__wash { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; z-index: 0;
  /* fade the img's TOP so it can never hard-clip at the tm's top edge; the bottom edge is
     the seam — never fade it. ⚠️ The fade is in PX FROM THE SEAM (the pinned edge), NOT % of
     the image: the img scales with vw (680 tall @1440 → 900 @1920 → 1202 @2560) while the
     section is a fixed 636, so a %-of-image ramp got cut off mid-fade at wide/zoomed-out
     viewports (65% opaque at the cut @1920 = the "page break" the user saw, 2026-09-02).
     Fully transparent 600px above the seam < the 636 section → clean at every width. */
  -webkit-mask-image: linear-gradient(to top, #000 330px, transparent 600px);
          mask-image: linear-gradient(to top, #000 330px, transparent 600px);
  pointer-events: none; user-select: none; }
:root[data-theme="dark"] .tm__wash { opacity: .75; }
.tm__inner { position: relative; z-index: 1; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.tm__card { position: relative; overflow: hidden;
  background: #FFFFFF; border-radius: 36px; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }

.tm__track { display: flex; transition: transform .6s cubic-bezier(.5,0,.2,1); }
/* one slide = the design's 512px card: avatar / quote / attribution / utility bar
   spread top-to-bottom (space-between). min-height holds the 512 for the design's
   4-line quote (space-between then lands on the design's 35.67 block spacing → 512
   exactly); gap:35 is only a FLOOR — should a future quote outgrow the 4-line box the
   card grows instead of the blocks collapsing onto each other */
.tm__slide { flex: 0 0 100%; min-width: 0; box-sizing: border-box; min-height: 512px;
  padding: 44px 80px; display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; gap: 35px; }

/* avatar: 92px circle with the design's 4px ring in the card colour (white on white) */
.tm__avatar { width: 92px; height: 92px; flex: none; box-sizing: border-box; border-radius: 50%; overflow: hidden;
  border: 4px solid #FFFFFF; background: rgba(255, 95, 22, 0.1); }
.tm__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the quote — Crimson Text 30/36 centred on the design's 928px measure; the “ ” live in the text */
.tm__text { margin: 0; width: 100%; max-width: 928px;
  font-family: "Crimson Text", Georgia, "Times New Roman", serif; font-weight: 400;
  font-size: 30px; line-height: 1.2; text-align: center; color: #1C2126; text-wrap: pretty; }
.tm__text p { margin: 0; }   /* every quote is ONE paragraph kept to the design's 4-line box (see the markup note) */

/* attribution: "Name · Role" over "at Bank" */
.tm__who { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.tm__name { font-weight: 600; font-size: 15px; line-height: 20px; color: #1C2126; }   /* design: Geist 700 — the site ships 400/500/600 only, 600 chosen */
.tm__role { font-weight: 500; font-size: 14px; line-height: 18px; color: rgba(28, 33, 38, .667); }

/* utility bar: client logo left; the shared dots sit over its right end (see .tm__dots) */
.tm__bar { width: 100%; height: 39px; display: flex; align-items: center; justify-content: space-between; }
.tm__logo { display: flex; align-items: center; height: 39px; }
.tm__logo--brand img { display: block; max-height: 39px; max-width: 200px; width: auto; height: auto; }
.tm__logo--h33 img { max-height: 33px; }   /* APAP: the design sizes its wide logo to 33 tall (NBG's is 39) */

/* ← / → arrows + pagination dots — one shared control row over the card, centred on the
   utility bar's 39px line (bar centre = 44 + 39/2 = 63.5 from the card bottom; the buttons
   are 28 → bottom 49.5). Arrows sized down from the old 34.62 to sit inside the 39px logo row. */
.tm__nav { position: absolute; right: 80px; bottom: 49.5px; z-index: 3; display: flex; align-items: center; gap: 6px; }
.tm__navbtn { width: 28px; height: 28px; flex: none; border: 0; border-radius: 50%; cursor: pointer;
  background: #1C2126; color: #fff; display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, opacity .2s ease, background .2s ease; }
.tm__navbtn svg { width: 10px; height: 10px; display: block; }
.tm__navbtn--prev svg { transform: rotate(180deg); }
.tm__navbtn:hover:not(:disabled) { transform: translateY(-1px); }
.tm__navbtn:disabled { opacity: .32; cursor: default; }
.tm__dots { display: flex; align-items: center; gap: 8px; height: 10px; padding: 0 10px; }
.tm__dot { width: 8px; height: 8px; flex: none; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(28, 33, 38, .5);   /* AA 1.4.11: the design's .25 alpha = 1.7:1 on white → .5 = 3.3:1 */
  transition: background .25s ease, width .25s ease, height .25s ease; }
.tm__dot:hover:not(.is-active) { background: rgba(28, 33, 38, .75); }   /* darker than inactive = more prominent on hover */
.tm__dot.is-active { width: 10px; height: 10px; background: #1C2126; cursor: default; }   /* design 12 — user: "too big" → 10 */

/* ---- dark theme ---- */
:root[data-theme="dark"] .tm__card { background: var(--surface); box-shadow: 0 4px 12px rgba(0, 0, 0, .45); }
:root[data-theme="dark"] .tm__avatar { border-color: var(--surface); }
:root[data-theme="dark"] .tm__text,
:root[data-theme="dark"] .tm__name { color: var(--text-strong); }
:root[data-theme="dark"] .tm__role { color: var(--text); }
/* brand logos are multi-colour → seat them on a light plate so they read on the dark card
   (logo capped at 27 so the padded plate stays the bar's 39px) */
:root[data-theme="dark"] .tm__logo--brand { background: #fff; border-radius: 10px; padding: 6px 11px; }
:root[data-theme="dark"] .tm__logo--brand img { max-height: 27px; }
:root[data-theme="dark"] .tm__navbtn { background: #2b3a5c; }
:root[data-theme="dark"] .tm__dot { background: #66779e; }   /* AA 1.4.11: 3.9:1 on the dark card */
:root[data-theme="dark"] .tm__dot:hover:not(.is-active) { background: #8a99bd; }   /* lighter than inactive = more prominent on hover */
:root[data-theme="dark"] .tm__dot.is-active { background: var(--text-strong); }   /* the design's near-black ink → light ink on dark (out-specifies the line above) */

@media (prefers-reduced-motion: reduce) { .tm__track, .tm__dot { transition: none; } }

/* ============================================================
   §14 · CLOSING CTA (historically "SEGMENT 8"). Centered orange headline + a pill
   email capture ("Let's connect"), over a soft blurred orange wash
   (assets/img/cta-wash.svg — the Figma "1116962" curves with the
   solid background rects stripped so it overlays on either theme).
   Revert = delete this block + the <section class="closer"> markup.
   ============================================================ */
/* ⚠️ SEAM INVARIANT (2026-08-18, "fix forever"): the tm→closer→insights washes
   are contiguous slices of ONE artwork that all scale with viewport width. The
   closer is the fully-washed middle slice, so its BOX must track the artwork's
   aspect (600/1440 of the width) — a fixed height re-breaks both seams the
   moment the viewport is wider/narrower than the tuning width (that was the
   visible "page break" at max zoom-out). Content floats centred in the band. */
.closer { position: relative; width: 100%; height: calc(100vw * 440 / 1440); background: var(--bg);
  /* ⚠️ SEAM INVARIANT: this box shows the wash artwork band y80..520 (cta-wash.svg is 1440×600,
     object-fit:cover keeps it 1:1 and centres it → 80 cropped top + bottom). The neighbours' slices
     are cut to MEET it: .tm__wash = cta-wash-upper-b.svg (−600..80), .insights__wash =
     cta-wash-lower-b.svg (520..1663). Was 600 tall showing 0..600 (user 2026-09-01: too much empty
     space above/below the copy). Change the band → re-cut BOTH neighbour slices, never fade a seam edge. */
  overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 40px 0; }
.closer__wash { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none; user-select: none; }
.closer__inner { position: relative; z-index: 1; width: 100%; max-width: var(--maxw);
  margin-inline: auto; padding-inline: var(--gutter);
  display: flex; flex-direction: column; align-items: center; gap: 48px; }
.closer__title { margin: 0; max-width: 492px; text-align: center;
  font-size: 40px; font-weight: 400; line-height: 1.2; letter-spacing: -0.025em;
  color: #FA573E; text-wrap: balance; }

/* pill email capture — the button is seated inside, on the right */
.closer__form { position: relative; width: 493px; max-width: 100%; height: 58px;
  background: #FFFFFF; border: 1px solid #F7F7F7; border-radius: 999px;
  display: flex; align-items: center; box-shadow: 0 12px 32px rgba(10, 23, 51, .06); }
.closer__input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent;
  padding: 0 176px 0 24px; font-family: inherit; font-size: 16px; letter-spacing: -0.02em;
  color: var(--text-strong); outline: none; border-radius: inherit; }   /* inherit = the pill's 999px: a browser-painted background (the autofill tint) stays inside the pill shape (correction 47) */
.closer__input::placeholder { color: #565656; opacity: 1; }
/* the input clears its own outline (above); surface keyboard focus on the whole pill instead */
.closer__form:has(.closer__input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.closer__btn { position: absolute; right: 5px; top: 5px; height: 48px; padding: 0 20px;
  display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 47px;
  background: var(--brand); color: #FFFFFF; font-family: inherit; font-size: 16px; letter-spacing: -0.02em;   /* #FF5F16 by marketing's decision (2026-10-13); --brand-strong before it */
  white-space: nowrap; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.closer__btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(255, 95, 22, .35); }
.closer__btn .icon { transition: transform .2s ease; }
.closer__btn:hover .icon { transform: translateX(3px); }

/* validation states (client-side only for now — the submit handler in main.js
   carries a TODO(backend) where the real POST goes) */
.closer__form[hidden], .closer__done[hidden] { display: none; }  /* the flex displays above would beat [hidden] */
.closer__form.is-error { border-color: #d02e2e; }
.closer__error { position: absolute; top: calc(100% + 10px); left: 24px; right: 24px; margin: 0;
  text-align: center; font-size: 14px; line-height: 1.3; letter-spacing: -0.01em; color: #d02e2e; }
.closer__done { display: flex; align-items: center; gap: 10px; min-height: 58px; margin: 0;
  font-size: 18px; letter-spacing: -0.02em; color: var(--text-strong); outline: none; }
.closer__done .icon { color: var(--brand); }

/* dark theme: keep the orange headline + button; theme the pill and lift the wash */
:root[data-theme="dark"] .closer__form { background: var(--surface); border-color: var(--border);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .3); }
:root[data-theme="dark"] .closer__input::placeholder { color: var(--text); }
:root[data-theme="dark"] .closer__wash { opacity: .75; }
:root[data-theme="dark"] .closer__form.is-error { border-color: #ff8f8f; }
:root[data-theme="dark"] .closer__error { color: #ff8f8f; }

/* ============================================================
   §15 · INSIGHTS (historically "SEGMENT 9", blog cards). Centered two-line statement
   heading + 3 article cards (thumbnail → title → description, rebuilt 2026-09-02 from
   the Figma "Group 121286/7/8" exports — the old dark-photo cards with the gradient
   overlay + white title/date are gone) + a "See more" pill. Thumbnails = the supplied
   exports in assets/img/insights/. Revert = delete this block + the
   <section class="insights"> markup.
   ============================================================ */
.insights { position: relative; width: 100%; overflow: hidden;
  background: var(--bg);
  padding: 96px 0 110px; }
/* same curved orange vector as the closing-CTA section above, so the wash flows
   continuously across the seam (no page break) instead of a separate blob */
.insights__wash { position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 0;
  /* fade the img's BOTTOM so it can't hard-clip at the insights→footer boundary; the top
     edge is the seam — never fade it. ⚠️ PX FROM THE SEAM, not % of the image (see .tm__wash):
     the img is 1143 tall @1440 → 2020 @2560 while the section is ~1011 (1033 @1280), so the
     old 65%→98% ramp was still 29% opaque at the cut even @1440 and fully opaque @2560.
     Fully transparent by 950px < 1011 → clean at every width. */
  -webkit-mask-image: linear-gradient(to bottom, #000 600px, transparent 950px);
          mask-image: linear-gradient(to bottom, #000 600px, transparent 950px);
  pointer-events: none; user-select: none; }
:root[data-theme="dark"] .insights__wash { opacity: .75; }
.insights__inner { position: relative; z-index: 1; max-width: var(--maxw);
  margin-inline: auto; padding-inline: var(--gutter); }
.insights__head { display: flex; flex-direction: column; align-items: center; gap: 24px;
  text-align: center; margin: 0 auto 80px; }   /* heading → cards gap (was 56; user 2026-09-02: "a bit bigger") */
/* two-line statement heading (2026-09-02 copy: "What our experts are seeing. / Trending insights
   shaping the industry today." — one h2 with a hard <br>, both lines the same style per the Figma;
   the old 18px grey lead was removed). Figma "Platform Intro" dump: Geist 400 40/120% ls -0.025em
   #0A1733, box 828 wide — weight 400 (NOT the section-heading 500; user: "too thick"). */
.insights__title { margin: 0; max-width: 828px; font-size: 40px; font-weight: 400;
  line-height: 1.2; letter-spacing: -0.025em; color: var(--text-strong); }

/* 3 article cards, 1:1 from the Figma "Group 121286/7/8" handoff: 414-wide columns 61 apart
   (3×414 + 2×61 = 1364 in the 1440 frame), each = thumbnail 411×242 r12 → title 27/32 500
   #0A1733 (37 below the image) → description 18/27 400 #565656 (23 below the title, 3 lines).
   Columns shrink via minmax(0, 414px) so the 1280 floor never overflows. Thumbnails are the
   supplied exports in assets/img/insights/: clearing-book.svg (its embedded POS raster shrunk
   1024→256 — the export was 1.4 MB), stand-in.jpg (the 13 MB export's 4096px JPEG cropped to
   its pattern box + baked at 2× = 822×484), authorization-cards.svg (verbatim). Text wraps greedily
   (NO text-wrap:pretty) so the line breaks match the Figma — ⚠️ the caps sit 2–4px UNDER the
   Figma boxes (411/414) on purpose: "How Stand-In Processing ensures" measures 410.4 and
   "Learn how … manage the clearing" 414.0 in Chrome, i.e. exactly at the box edge, where Figma
   already wrapped them; the next-widest must-fit lines are 407.5 / 399.5, so 409 / 410
   reproduce every break of the handoff. */
.insights__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 414px)); gap: 61px; justify-content: center; }
.insights__card { display: flex; flex-direction: column; min-width: 0; }
/* 2026-10-19: the thumbnail + the title are one link to the article (src/pages/index.pug); it inherits the card's
   colours and draws no underline, so the card looks as before — the global :focus-visible ring (above) marks it */
.insights__link { display: block; color: inherit; text-decoration: none; }
.insights__media { border-radius: 12px; overflow: hidden; aspect-ratio: 411 / 242; }
.insights__img { display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1); }
/* hover: the thumbnail micro-zooms inside its rounded frame (the old whole-card lift + shadow
   belonged to the dark photo card — these cards have no surface to lift) */
.insights__card:hover .insights__img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  .insights__img { transition: none; }
  .insights__card:hover .insights__img { transform: none; }
}
.insights__ctitle { margin: 37px 0 0; max-width: 409px; font-size: 27px; font-weight: 500;
  line-height: 1.2; letter-spacing: -0.02em; color: var(--text-strong); }
.insights__desc { margin: 23px 0 0; max-width: 410px; font-size: 18px; font-weight: 400; line-height: 1.5;
  letter-spacing: -0.02em; color: var(--text); }

/* "See more" pill (Figma "Boton": 109×48, #0A1733, r999, 16/110% 500 white, 131 below the cards) */
.insights__foot { display: flex; justify-content: center; margin-top: 131px; }
.insights__cta { display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 20px; border-radius: 999px;
  background: var(--text-strong); color: var(--surface);
  font-size: 16px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease; }
.insights__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(10, 23, 51, .18); }

/* ============================================================
   §16 · FOOTER — always dark-navy band (Figma "Footer"), the page's last block,
   sits after the insights section. Ported from a DC export: style-hover →
   real :hover here, sc-if branches inlined (defaults), tool wrappers dropped.
   Fixed colours in BOTH page themes. Uses the site --gutter/--maxw tokens.
   Revert = delete this block + the <footer class="foot"> markup.
   ============================================================ */
.foot {
  box-sizing: border-box; width: 100%;
  background: #0a1733;
  color: rgba(255, 255, 255, .62);
  padding: 30px var(--gutter);   /* 30px top/bottom added 2026-09-02 (user spec) — the footer grows 300 → 360 tall */
  font-family: Geist, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.foot__inner { max-width: var(--maxw); margin: 0 auto; }
.foot__rule { height: 1px; background: rgba(255, 255, 255, .09); }

/* top: brand column | link columns */
.foot__top {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(620px, 1.55fr);
  gap: clamp(56px, 7vw, 120px);
  padding: 29px 0 25px;
}

/* brand column */
.foot__brand { display: flex; flex-direction: column; align-items: flex-start; }
.foot__logo { width: 158px; height: auto; transition: opacity .2s ease; }  /* dedicated footer asset: white wordmark + grey swirl (2026-08-18, replaced the brightness/invert flatten) */
/* the footer logo links home too — a second, more discoverable route than the navbar wordmark */
.foot__home { display: inline-flex; align-self: flex-start; border-radius: 6px; }
.foot__home:hover .foot__logo { opacity: .85; }
.foot__home:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.foot__contact { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.foot__label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .56);
}
.foot__email {
  display: inline-block; align-self: flex-start;
  font-size: 15px; font-weight: 400; letter-spacing: -0.01em; color: rgba(255, 255, 255, .9);
  padding-bottom: 3px; border-bottom: 1px solid rgba(255, 255, 255, .24);
  transition: border-color .25s ease;
}
.foot__email:hover { border-bottom-color: #ff5f16; }   /* brand orange */

.foot__social { display: flex; align-items: center; gap: 16px; margin-top: 14px; }   /* the LinkedIn button + the certification marks (2026-10-13) */
/* the certification marks — Bureau Veritas' ISO/IEC 27001:2022 mark (assets/img/certs/, a 500-px PNG shown at 100 px =
   the user's size, 2026-10-13 — the BV manual recommends ~200 on a desktop site; the frame and colours are the mark's
   own, the outside is transparent on the navy). A PCI mark joins the row later. */
.foot__certs { display: flex; align-items: center; gap: 12px; }
.foot__cert { display: block; width: 100px; height: auto; }
.foot__soc {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .72);
  transition: color .22s ease, border-color .22s ease, background .22s ease;
}
.foot__soc:hover { color: #ffffff; border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .06); }

/* link columns */
.foot__nav { display: grid; grid-template-columns: repeat(4, auto); justify-content: end; gap: clamp(36px, 4vw, 64px); padding-top: 4px; }  /* auto tracks + even fixed gap (~61px @1536), packed right; space-between's ~107px gaps felt too wide */
.foot__col { display: flex; flex-direction: column; gap: 20px; }
.foot__coltitle {
  margin: 0; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .56);
}
.foot__links { display: flex; flex-direction: column; gap: 13px; font-size: 15px; letter-spacing: -0.01em; }
.foot__link { color: rgba(255, 255, 255, .78); transition: color .2s ease; white-space: nowrap; }  /* one row per link ("Merchant profitability tool" used to wrap) */
.foot__link:hover { color: #ffffff; }

/* bottom bar */
.foot__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  padding: 12px 0 16px; font-size: 13px; letter-spacing: -0.01em; color: rgba(255, 255, 255, .5);
}
.foot__copy { margin: 0; }
.foot__legal { display: flex; gap: 30px; }
.foot__legal a { color: rgba(255, 255, 255, .5); transition: color .2s ease; }
.foot__legal a:hover { color: #ffffff; }
/* the language pair (S13, I18N-PLAN.md §6): "English · Español" first in the legal row — the current white, the other
   the row's .5 white, the dot .35. The 24 px target is padding pulled back by the same negative margin, so the row keeps
   its height (the footer must not move). The orange focus ring measures ≥ 3:1 on the navy, so it stays. */
.foot-lang { display: inline-flex; align-items: center; gap: 8px; }
.foot__legal .foot-lang__opt { display: inline-flex; align-items: center; padding-block: 4px; margin-block: -4px; color: rgba(255, 255, 255, .5); }
.foot__legal .foot-lang__opt[aria-current="true"] { color: #ffffff; }
.foot-lang__sep { color: rgba(255, 255, 255, .35); }

/* ============================================================
   §17 · GLOBAL MOTION — scroll reveal + reduced-motion.
   Page-wide utilities (relocated here 2026-08-17 from mid-file,
   between Content and Platform; rules verbatim, cascade-verified).
   Per-section reduced-motion blocks stay co-located with their
   sections (stat band, case-study figures, testimonials).
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
.hero__visual.reveal { transition-delay: .08s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__deck { animation: none; }
  .hero__scene, .hlayer { transition: none; }
  .card-gloss { display: none; }
  .nav-menu, .nav-backdrop, .nav-link__chev { transition-duration: .01ms; }
  .marquee__track { animation: none; }
  .pcard:hover { transform: none; }
  * { scroll-behavior: auto !important; }
}