/* ==========================================================================
   Fonts — self-hosted (assets/fonts/README.md). Variable WOFF2, latin + latin-ext.
   No request goes to Google.
   ========================================================================== */
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/lexend-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/lexend-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fallbacks shaped like the real fonts: a local Arial / Courier New stretched to the same
   width and line height, so text doesn't reflow when the web fonts arrive (font-display: swap).
   Metrics computed from the WOFF2 files in fonts/, the way Next.js and Fontaine do it.
   Same unicode-range as the real fonts (latin + latin-ext), so a character they don't have
   (the → arrow) still falls through to the system font, exactly as before. */
@font-face {
  font-family: "Lexend Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 110.07%;
  ascent-override: 90.85%;
  descent-override: 22.71%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 106.64%;
  ascent-override: 90.84%;
  descent-override: 22.62%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono Fallback";
  src: local("Courier New"), local("CourierNewPSMT");
  size-adjust: 99.98%;
  ascent-override: 102.02%;
  descent-override: 30.01%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Acvium — design tokens
   Navy ink + teal→blue signal, on cool near-white. Lexend echoes the wordmark.

   Breakpoints (max-width; custom properties can't go in @media, so they're listed here):
     480 small phone · 640 phone · 820 tablet portrait · 960 tablet / small laptop
     1040 header menu button and footer columns (main.js uses the same 1040) · 1180 two-up cards
     · 1240 header's second button. Use one of these for any new rule.
   ========================================================================== */
:root {
  --ink: #1e2a3b;          /* ACE-NSI navy */
  --ink-2: #33415c;
  --muted: #5d6983;       /* 11 Oct: one shade darker so small grey text passes WCAG AA (4.5:1) on the light panels too */
  --line: #dfe4ee;
  --line-2: #eef1f6;
  --paper: #ffffff;
  --paper-2: #f6f8fb;
  /* ACE-NSI palette (Ben's interim zip, 20 Oct): --teal holds the brand orange and --blue the
     brand teal-blue; the token names are kept from the shared Acvium design system. */
  --teal: #f26a2e;         /* brand orange: dots, arrows, accents (not small text) */
  --teal-text: #b4461a;    /* orange for small text: the brand orange is 3.0:1 on white, this is 5.5:1 */
  --blue: #176a84;         /* brand teal-blue #1d7e9c, one shade darker for text (6.1:1 on white) */
  --focus: #cf5320;        /* focus rings: the orange, darker, so it shows (3:1+) on white and on navy */
  --field-line: #8590a8;   /* form field edges: 3.2:1 on white (the --line grey is 1.3:1) */
  --grad: linear-gradient(135deg, #f58340 0%, var(--teal) 45%, #d9531f 100%);
  --navy-deep: #141d2b;
  --ink-hover: #2b3a52;    /* primary button hover */
  --line-strong: #c3cbdb;  /* hover edges on cards and entries, dashed upload edge */
  --on-dark: #b9c3d8;      /* body text on navy */
  --on-dark-muted: #9fabc6;
  --on-dark-faint: #8fa0c2;
  --teal-on-dark: #8fd3e6; /* highlights and icons on navy (light teal-blue, 10:1) */
  --danger: #c02a40;       /* error text on white (5.6:1) */
  --danger-line: #d5334a;  /* error borders and icons */
  --danger-on-dark: #ff9aa8; /* error text on navy (9.2:1) */
  --teal-tint: #e3f0f4;
  --red-tint: #fdecee;
  --blue-tint: #e8ebf0;
  --teal-wash: #eaf4f7;    /* notes and the upload hover */

  --font-display: "Lexend", "Lexend Fallback", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Inter Fallback", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Spacing: a 4 px scale. Layout gaps, margins and padding use these; small component insides
     (pills, chips, inputs, the nav) keep the exact px they were tuned to. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 56px;
  --space-12: 64px;
  --space-13: 72px;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --shadow: 0 1px 2px rgba(30, 42, 59, .06), 0 8px 24px rgba(30, 42, 59, .06);
}

*, *::before, *::after { box-sizing: border-box; }
/* Keyboard focus and #anchors stop below the sticky header (WCAG 2.4.11). */
html { scroll-padding-top: 88px; }
/* Smooth only for jumps within a page: main.js adds the class once a page reached at an #anchor
   has landed there, so arriving from another page never glides down from the top. */
html.smooth-scroll { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; } /* a class's display (e.g. flex) must never show a hidden element */
img, svg { max-width: 100%; display: block; }
img { height: auto; } /* keeps the picture's shape when CSS sets the width */
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); font-weight: 400; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 400; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 120px); }
.section--tint { background: var(--paper-2); }
.section--flush-top { padding-top: 0; }
.section--dark { background: var(--navy-deep); color: var(--on-dark); }
.section--dark h2, .section--dark h3 { color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-5);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.section--dark .eyebrow { color: var(--on-dark-faint); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 60ch; }
.section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 64px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
h1, h2, h3, .footer-tag { text-wrap: balance; }
p, li { text-wrap: pretty; }
/* French: long words leave ragged lines in narrow columns, so body text there is hyphenated (the
   pages are lang fr-FR): in cards, steps and other narrow blocks at every width, and in all body
   text on phones. Never headings or buttons, and never links, code or placeholders (addresses). */
:lang(fr) :is(.card, .step, .doc, .stat, .faq, .contact-aside, .secure-note) :is(p, li) { hyphens: auto; }
@media (max-width: 640px) { :lang(fr) :is(p, li, td) { hyphens: auto; } }
:lang(fr) :is(a, code, .fill, .btn, .tagline, .footer-tag) { hyphens: manual; }
:lang(fr) { hyphenate-limit-chars: 8 4 3; } /* only words of 8+ letters, at least 4 before the hyphen and 3 after (Chromium; others ignore it) */
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Buttons ---------------------------------------------------------------- */
/* Inline text, not flex: when a label wraps, the arrow follows its last word instead of drifting
   to the far edge of the button. The space before the arrow plus its margin make the old 10 px gap. */
.btn {
  display: inline-block;
  font: 500 .95rem/1.25 var(--font-body); text-wrap: balance;
  padding: calc(14px - .125em) 22px; border-radius: var(--r-sm); /* same height as line-height 1 with 14 px padding; wrapped labels get room between lines */
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease, border-color .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn--primary { background: var(--ink); color: #fff; box-shadow: 0 6px 18px rgba(30, 42, 59, .18); }
.btn--primary:hover { background: var(--ink-hover); }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }
@media (max-width: 480px) { .hero .btn-row .btn, .cta-band .btn-row .btn { flex: 1 1 100%; text-align: center; } }
.btn--light { background: #fff; color: var(--ink); }
.btn .arrow { display: inline-block; margin-left: 6px; transition: transform .2s; }
.btn:hover .arrow { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Header ----------------------------------------------------------------- */
.skip-link {
  position: absolute; left: 12px; top: -200px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px var(--space-4); border-radius: var(--r-sm); text-decoration: none; font-weight: 500;
}
.skip-link:focus { top: 12px; }
main:focus { outline: none; } /* focused only by the skip link */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .96); /* .86 turned muddy grey over the navy bands */
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-2);
}
/* Until main.js fills it, the empty header holds its place (72 px nav + 1 px border), so the page
   doesn't jump down when it arrives. */
header[data-header]:empty {
  display: block; height: 73px; position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line-2);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: var(--space-4); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand, .brand svg { flex: none; } /* the logo never shrinks: when the nav runs out of room, main.js folds it into the menu */
.brand svg { width: 36px; height: 36px; }
.brand span { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); letter-spacing: -.01em; }
/* ACE-NSI wordmark: the name over a small spaced "Cybersecurity" (Ben's zip, 20 Oct). */
.brand .brand-name { display: grid; line-height: 1; font-weight: 500; font-size: 1.35rem; letter-spacing: .01em; }
.brand .brand-name small {
  font-family: var(--font-mono); font-size: .58rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--blue); margin-top: 4px;
}
.nav-links { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: block; padding: var(--space-2) 10px; border-radius: var(--r-sm);
  text-decoration: none; font-size: .93rem; color: var(--ink-2);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); background: var(--paper-2); }
.nav-cta { display: flex; gap: 10px; align-items: center; }
.nav-links a, .nav-cta .btn { white-space: nowrap; }
/* Longer (e.g. French) labels: drop the secondary header button before the nav gets cramped */
@media (max-width: 1240px) { .nav-cta .btn--ghost { display: none; } }
.lang-switch {
  display: inline-grid; place-items: center; min-width: 40px; height: 36px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 999px; text-decoration: none;
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; color: var(--ink);
}
.lang-switch:hover { border-color: var(--ink); background: var(--paper-2); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--space-2) 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); margin: var(--space-1) 0; }
/* Open: the three bars turn into a cross (6 px = one bar + the gap). Reduced motion drops the
   transition through the global rule at the end. */
.nav-toggle span { transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Compact header (the phone menu). main.js adds .compact at 1040 px and below, and at any width
   where the full nav doesn't fit (long labels, zoom, user text spacing). One set of rules for both. */
.site-header.compact .nav { gap: 10px; }
.site-header.compact .nav-toggle { display: block; order: 1; } /* first in the tab order, last on screen */
.site-header.compact .nav-cta { margin-left: auto; }
.site-header.compact .nav-links, .site-header.compact .nav-cta .btn--ghost { display: none; }
.site-header.compact.open .nav-links {
  display: flex; flex-direction: column; align-items: stretch;
  position: absolute; top: 72px; left: 0; right: 0;
  background: #fff; padding: var(--space-3) var(--gutter) var(--space-5); border-bottom: 1px solid var(--line);
  max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain;
}
.site-header.compact.open .nav-links a { padding: var(--space-3); }
/* Open, the menu covers the whole screen below the header: a dim backdrop under the list (a tap on
   it closes the menu, main.js), and the page behind doesn't scroll. z-index -1 keeps it under the
   list but over the page, inside the header's own stacking context. */
.site-header.compact.open::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; z-index: -1;
  height: 100vh; height: 100dvh; background: rgba(20, 29, 43, .45);
}
html:has(.site-header.compact.open) { overflow: hidden; }
/* The header buttons that don't fit on small screens go into the phone menu instead. */
.nav-extra { display: none; }
.site-header.compact.open .nav-extra--partner { display: block; }
@media (max-width: 480px) {
  .nav-cta .btn--primary { display: none; }
  .site-header.open .nav-extra--book { display: block; }
  /* The menu's "Book a consultation" looks like the header button it stands in for. */
  .site-header.open .nav-extra--book a {
    margin-top: var(--space-2); text-align: center; font-weight: 500;
    background: var(--ink); color: #fff; box-shadow: 0 6px 18px rgba(30, 42, 59, .18);
  }
  .site-header.open .nav-extra--book a:hover { background: var(--ink-hover); color: #fff; }
}

/* Hero ------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(56px, 8vw, 110px) clamp(56px, 8vw, 96px); }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(600px 400px at 85% 10%, rgba(242, 106, 46, .10), transparent 70%),
    radial-gradient(700px 500px at 100% 70%, rgba(29, 126, 156, .08), transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 65%);
  pointer-events: none; opacity: .7;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 .rotator { display: inline-block; position: relative; }
.rotator-word { display: inline-block; transition: opacity .35s ease, transform .35s ease, filter .35s ease; }
.rotator-word.out { opacity: 0; transform: translateY(-12px); filter: blur(4px); }
.tagline {
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); display: flex; flex-wrap: wrap; gap: 6px 14px; margin: var(--space-7) 0 0;
}
.tagline b { font-weight: 500; }
.tagline i { font-style: normal; color: var(--teal); }

/* Hero console cards (illustrative UI) */
.console { position: relative; display: grid; gap: 14px; }
.ui-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow); padding: var(--space-4) 18px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  animation: floatIn .7s both;
}
.ui-card:nth-child(2) { margin-left: clamp(0px, 6vw, 56px); animation-delay: .15s; }
.ui-card:nth-child(3) { margin-left: clamp(0px, 2vw, 20px); animation-delay: .3s; }
.ui-card:nth-child(4) { margin-left: clamp(0px, 8vw, 80px); animation-delay: .45s; }
@media (max-width: 640px) { .ui-card:nth-child(n) { margin-left: 0; } }
@keyframes floatIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ui-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; }
.ui-icon svg { width: 20px; height: 20px; }
.ui-icon--red { background: var(--red-tint); color: var(--danger-line); }
.ui-icon--teal { background: var(--teal-tint); color: #1d7e9c; }
.ui-icon--blue { background: var(--blue-tint); color: var(--blue); }
.ui-icon--navy { background: #e8ebf2; color: var(--ink); }
.ui-title { font-size: .92rem; color: var(--ink); font-weight: 500; line-height: 1.3; }
.ui-meta { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); letter-spacing: .04em; }
.pill {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px; white-space: nowrap;
}
/* Every pill-shaped label: size to its text and centre it, never stretch with its row */
.pill, .chip {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1.2; text-align: center;
}
.doc-row > .pill, .ui-card > .pill { align-self: center; }
.card > .pill, .card > .chip { align-self: flex-start; }
.pill--red { background: var(--red-tint); color: var(--danger); }
.pill--teal { background: var(--teal-tint); color: var(--blue); }
.pill--blue { background: var(--blue-tint); color: var(--blue); }

/* Partner marquee -------------------------------------------------------- */
.logos { border-block: 1px solid var(--line-2); padding-block: var(--space-7); overflow: hidden; }
.logos p { text-align: center; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-4); }
.marquee { display: flex; gap: var(--space-12); width: max-content; animation: marquee 38s linear infinite; }
.marquee span { font-family: var(--font-display); font-size: 1.35rem; color: var(--muted); white-space: nowrap; letter-spacing: -.01em; }
.logos:hover .marquee { animation-play-state: paused; }
.logos { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } /* names fade in and out at the edges instead of being cut */
@media (prefers-reduced-motion: reduce) {
  /* No scrolling: one centred, wrapping list of the partners, shown once. */
  .logos { -webkit-mask-image: none; mask-image: none; }
  .marquee { width: auto; flex-wrap: wrap; justify-content: center; gap: var(--space-4) var(--space-9); padding-inline: var(--space-4); animation: none; }
  .marquee .dup { display: none; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* Wheel section (Clutch-inspired) ---------------------------------------- */
.wheel-panel {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  min-height: 760px; background: #fff;
  display: grid; grid-template-columns: 1fr 1fr; align-items: end;
}
.beams {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 100% at 0% 40%, #000 45%, transparent 80%);
  mask-image: radial-gradient(120% 100% at 0% 40%, #000 45%, transparent 80%);
}
.beams svg { width: 100%; height: 100%; }
.beam-noise {
  position: absolute; inset: 0; pointer-events: none; opacity: .28; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -1.4 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.beam-sweep { transform-box: view-box; transform-origin: 230px 250px; animation: sweep 9s ease-in-out infinite alternate; }
@keyframes sweep { from { transform: rotate(-3deg); } to { transform: rotate(2deg); } }
/* Pause control for the moving parts (WCAG 2.2.2): a pill in the panel corner, shown by main.js
   only when motion is allowed. Pressed = paused: the marquee and the beam freeze here, and main.js
   stops the hero word and the wheel. */
.motion-toggle {
  position: absolute; top: 16px; right: 16px; z-index: 5;
  display: inline-grid; place-items: center; min-width: 40px; height: 36px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer;
}
.motion-toggle:hover { border-color: var(--ink); background: var(--paper-2); }
.motion-toggle[hidden] { display: none; }
.motion-icon { display: block; box-sizing: border-box; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.motion-toggle[aria-pressed="true"] .motion-icon { width: 0; height: 0; border-right: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.motion-paused .marquee, .motion-paused .beam-sweep { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none; } }
.wheel-copy { position: relative; z-index: 3; padding: 0 clamp(24px, 6vw, 80px) clamp(40px, 7vw, 88px); }
/* Capped at the size it reaches when the panel stops growing (1240 px): the panel is 1120 px from
   there on, so a bigger heading only wrapped to four lines and pushed the eyebrow into the beams. */
.wheel-copy h2 { margin-bottom: .35em; font-size: clamp(2rem, 3.4vw, 2.625rem); }
.wheel-copy p { color: var(--muted); max-width: 42ch; }
/* Side by side, the beams meet about 250 px down the panel: the text never starts above 300 px.
   A longer (French) text makes the panel taller instead, and the meeting point moves down less. */
@media (min-width: 961px) { .wheel-copy { padding-top: 300px; } }

.wheel {
  position: relative; z-index: 3; height: 100%; min-height: 760px;
  /* fade the top/bottom of the wheel into the panel */
  -webkit-mask-image: linear-gradient(transparent 4%, #000 30%, #000 70%, transparent 96%);
  mask-image: linear-gradient(transparent 4%, #000 30%, #000 70%, transparent 96%);
}
.pawl {
  position: absolute; left: 64px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; background: var(--ink);
  display: grid; place-items: center; z-index: 4;
  box-shadow: 0 0 0 8px rgba(242, 106, 46, .10);
}
.pawl::before { content: ""; width: 22px; height: 2px; background: #fff; border-radius: 2px; }
.pawl::after {
  content: ""; position: absolute; left: 60px; width: 22px; height: 2px; background: var(--ink);
}
/* The wheel's centre sits off-panel to the left; the pawl rests on its rim. */
.ticks { position: absolute; left: -144px; top: 50%; width: 0; height: 0; }
.ticks i {
  position: absolute; left: 0; top: 0; width: 14px; height: 1.5px; background: #c6ccd8;
  transform-origin: -86px 50%;
}
.wheel-items { position: absolute; left: -144px; top: 50%; width: 0; height: 0; }
.wheel-item {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 14px; white-space: nowrap;
  transform-origin: 0 0;
  transition: transform .8s cubic-bezier(.65, 0, .35, 1), opacity .8s ease, filter .8s ease;
  will-change: transform;
}
.wheel-item .mark {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 1rem;
  background: var(--ink); flex: none;
}
.wheel-item .name { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--ink); letter-spacing: -.02em; line-height: 1; }
.wheel-item .role { display: block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.wheel-item.is-active .mark { background: var(--grad); }
.wheel-brand { display: flex; flex-direction: column; align-items: flex-start; }
.wheel-item .logo {
  height: clamp(30px, 3.4vw, 44px); width: auto; max-width: 240px; object-fit: contain; object-position: left center;
  filter: grayscale(1) contrast(.9); transition: filter .8s ease;
  mix-blend-mode: multiply; /* drops off-white logo backgrounds into the white panel */
}
.wheel-item.is-active .logo { filter: none; }
.wheel-caption {
  position: absolute; right: clamp(16px, 4vw, 40px); bottom: clamp(20px, 4vw, 36px); z-index: 5;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  display: flex; gap: 10px; align-items: center;
}
.wheel-caption b { color: var(--ink); font-weight: 500; }

@media (max-width: 960px) {
  .wheel-panel { grid-template-columns: 1fr; min-height: 0; }
  .wheel { min-height: 460px; order: -1; }
  .wheel-copy { padding-top: 0; }
  .wheel-copy { padding-bottom: var(--space-5); }
  .wheel-caption { position: static; margin: 0 clamp(24px, 6vw, 80px) clamp(32px, 6vw, 56px); flex-wrap: wrap; }
  .pawl { left: 16px; }
  .ticks, .wheel-items { left: -190px; }
  .beams { display: none; } /* stacked, the wheel sits where the beams are: they crossed the logos and labels */
}

/* Stats ------------------------------------------------------------------ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.stat { padding: clamp(24px, 3vw, 36px); border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat-num { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--ink); line-height: 1; letter-spacing: -.03em; }
.stat-num sup { font-size: .45em; vertical-align: top; position: relative; top: .3em; margin-left: 2px; }
.stat p { margin: var(--space-3) 0 0; color: var(--muted); font-size: .95rem; }
@media (max-width: 960px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 480px) {
  .stat { padding: var(--space-5) var(--space-4); }
  .stat p { font-size: .88rem; overflow-wrap: anywhere; }
}

/* Cards / grids ---------------------------------------------------------- */
.grid > * { min-width: 0; }
.grid { display: grid; gap: var(--space-5); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
@media (min-width: 641px) and (max-width: 960px) { .grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Cards side by side share their rows (subgrid), so titles, text and the dashed foot line up across
   a row whatever wraps. Opt-in (.grid--rows) for grids whose cards all have the same parts (3 to 5).
   Each card spans exactly as many rows as it has parts: an empty last row would add half a gap. */
@supports selector(:has(*)) {
  @media (min-width: 641px) {
    .grid--rows > .card { display: grid; grid-template-rows: subgrid; row-gap: 0; }
    .grid--rows > .card:has(> :nth-child(3):last-child) { grid-row: span 3; }
    .grid--rows > .card:has(> :nth-child(4):last-child) { grid-row: span 4; }
    .grid--rows > .card:has(> :nth-child(5):last-child) { grid-row: span 5; }
    .grid--rows > .card > :is(.badge, .pill, .chip) { justify-self: start; }
    .grid--rows > .card > :is(.card-foot, .hub-more) { margin-top: 0; }
  }
}

.card {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(22px, 2.6vw, 32px); transition: border-color .2s, box-shadow .2s, transform .2s;
  display: flex; flex-direction: column;
}
a.card:hover, .card-link:hover, .reveal-on .card-link.in-view:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.card h3 { margin-top: var(--space-4); }
.card p { color: var(--muted); font-size: .96rem; }
.card .card-foot { margin-top: auto; padding-top: var(--space-4); border-top: 1px dashed var(--line); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.card .card-foot b { color: var(--ink); font-weight: 500; }
.card .card-foot .btn { text-transform: none; letter-spacing: normal; } /* buttons look the same everywhere */
.card-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); }
.card-icon svg { width: 22px; height: 22px; }
.card--feature { background: var(--navy-deep); border-color: var(--navy-deep); color: var(--on-dark); }
.card--feature h3 { color: #fff; }
.card--feature p { color: var(--on-dark-muted); }
.card--feature .card-icon { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: var(--teal-on-dark); }
.card--feature .card-foot { border-color: rgba(255,255,255,.14); color: var(--on-dark-faint); }
.card--feature .card-foot b { color: #fff; }
.card-link { text-decoration: none; }
.card-num { font-family: var(--font-mono); font-size: .75rem; color: var(--teal-text); letter-spacing: .1em; }
.list-check { list-style: none; padding: 0; margin: var(--space-2) 0 var(--space-4); display: grid; gap: var(--space-2); }
.list-check li { position: relative; padding-left: 26px; font-size: .94rem; color: var(--ink-2); }
.list-check li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 8px;
  border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg);
}
.section--dark .list-check li, .card--feature .list-check li { color: #c9d2e4; }

/* Process strip ---------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: step; position: relative; }
.steps { column-gap: clamp(16px, 3vw, 36px); } /* a gap, not padding on all but the last step, so the three bars are the same width */
.step { position: relative; }
.step-bar { height: 2px; background: var(--line); margin-bottom: var(--space-7); position: relative; overflow: hidden; }
.step-bar::after { content: ""; position: absolute; inset: 0; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 1.1s ease; }
.steps.in-view .step-bar::after { transform: scaleX(1); }
.steps.in-view .step:nth-child(2) .step-bar::after { transition-delay: .5s; }
.steps.in-view .step:nth-child(3) .step-bar::after { transition-delay: 1s; }
.step .card-num { display: block; margin-bottom: 10px; }
.step p { color: var(--muted); }
.section--dark .step-bar { background: rgba(255,255,255,.12); }
.section--dark .step p { color: var(--on-dark-muted); }
.section--dark .card-num, .card--feature .card-num { color: var(--teal); }   /* the bright teal reads fine on navy */
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; gap: var(--space-9); } }

/* Split / two-sided ------------------------------------------------------ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
@media (max-width: 960px) { .split { grid-template-columns: 1fr; } }
/* The AI Services hero: the text column as wide as the home hero's (1.15 : 1), so its two buttons
   and the three frameworks each fit on one line at full width. */
@media (min-width: 961px) { .page-hero .split { grid-template-columns: 1.15fr 1fr; } }
/* The hero cards (home and AI Services) stay beside the text down to 641 px, so a half-screen
   or small laptop window still shows them without scrolling (they used to drop under the text
   below 961). Narrow cards get room: equal columns, no stagger, the pill under the text, and the
   cards from the top of the column. */
@media (min-width: 641px) and (max-width: 960px) {
  .page-hero .split, .hero-grid { grid-template-columns: 1fr 1fr; }
  .console { align-self: start; }
  .ui-card { grid-template-columns: auto 1fr; }
  .ui-card:nth-child(n) { margin-left: 0; }
  .ui-card > .pill { grid-column: 2; justify-self: start; }
}
.duo { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.duo > div { padding: clamp(28px, 4vw, 48px); }
.duo > div + div { border-left: 1px solid var(--line); background: var(--paper-2); }
@media (max-width: 640px) { .duo { grid-template-columns: 1fr; } .duo > div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* Frameworks ------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em;
  padding: var(--space-2) 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.section--dark .chip { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); color: #dfe6f3; }

/* Deliverable document mock --------------------------------------------- */
.doc {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow);
  padding: var(--space-7); position: relative;
}
.doc-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: var(--space-4); }
.doc-head b { font-family: var(--font-display); color: var(--ink); font-weight: 500; }
.doc-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line-2); font-size: .9rem; }
.doc-row:last-child { border-bottom: 0; }
.doc-row > :first-child { min-width: 0; overflow-wrap: break-word; }
.doc-row .pill { white-space: normal; text-align: center; }
/* The two document mocks beside the frameworks text: one above the other at every width. Side by
   side they had 250 px each from 1181 px, and French labels broke mid-word. */
.split .grid-2 { grid-template-columns: 1fr; }
.bar { height: 6px; border-radius: 6px; background: var(--line-2); margin-top: 6px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--grad); border-radius: 6px; }

/* FAQ -------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--space-6) var(--space-9) var(--space-6) 0; position: relative;
  font-family: var(--font-display); font-size: 1.1rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--teal); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--muted); padding-bottom: var(--space-6); max-width: 75ch; }

/* CTA band --------------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: var(--navy-deep); color: var(--on-dark); padding: clamp(40px, 6vw, 80px);
  display: grid; grid-template-columns: minmax(0, 1fr) fit-content(45%); gap: var(--space-8); align-items: center;
}
.cta-band::before {
  content: ""; position: absolute; width: 520px; height: 520px; right: -140px; top: -220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 106, 46,.35), rgba(29, 126, 156,.15) 45%, transparent 70%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; margin-bottom: .3em; }
.cta-band .btn-row { justify-content: flex-end; }
/* Beside the text there is room for one button per line: stack them at one width, not ragged */
@media (min-width: 961px) { .cta-band .btn-row { flex-direction: column; align-items: stretch; text-align: center; } }
.cta-band--split { grid-template-columns: 1fr 1fr; }
@media (max-width: 960px) { .cta-band, .cta-band--split { grid-template-columns: 1fr; } .cta-band .btn-row { justify-content: flex-start; } }

/* Page hero (inner pages) ------------------------------------------------ */
.page-hero { position: relative; overflow: hidden; padding-block: clamp(56px, 8vw, 104px) clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--line-2); }
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 380px at 90% 0%, rgba(242, 106, 46,.12), transparent 70%), radial-gradient(600px 400px at 70% 100%, rgba(29, 126, 156,.07), transparent 70%);
}
.page-hero .wrap { position: relative; }
.proof { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); margin-top: var(--space-8); }
.proof div { font-size: .9rem; color: var(--muted); }
.proof b { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); font-weight: 500; }

/* Forms ------------------------------------------------------------------ */
.form-shell { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 960px) { .form-shell { grid-template-columns: 1fr; } }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3.4vw, 40px); box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field label, .field legend { display: block; font-size: .85rem; font-weight: 500; color: var(--ink); margin-bottom: 7px; }
.field .opt { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); /* 16px: iPhone zooms into smaller fields */
  padding: var(--space-3) 14px; border: 1px solid var(--field-line); border-radius: var(--r-sm); background: #fff;
  transition: border-color .15s;
}
.field textarea { min-height: 120px; resize: vertical; }
/* Selects the same height as text fields in every browser (Safari drew its own 25 px box), with
   one chevron instead of each browser's arrow. */
.field select {
  -webkit-appearance: none; appearance: none; line-height: inherit; padding-right: 40px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235d6983' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.field .err { display: none; color: var(--danger); font-size: .8rem; margin-top: 6px; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--danger-line); }
.field.invalid .err { display: block; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: var(--muted); }
.consent input { margin-top: var(--space-1); accent-color: var(--ink); width: 16px; height: 16px; flex: none; }

.tabs { display: inline-flex; gap: var(--space-1); padding: var(--space-1); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; margin-bottom: var(--space-7); flex-wrap: wrap; }
.tab { border: 0; background: none; font: 500 .9rem var(--font-body); color: var(--muted); padding: 10px 18px; border-radius: 999px; cursor: pointer; }
.tab[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(30, 42, 59,.12); }
@media (max-width: 640px) { .tabs { display: grid; grid-template-columns: 1fr; width: 100%; border-radius: var(--r-md); } .tab { border-radius: var(--r-sm); text-align: left; } }

.secure-note { display: flex; gap: var(--space-3); align-items: flex-start; padding: 14px var(--space-4); border-radius: var(--r-md); background: var(--teal-wash); border: 1px solid #cdeeee; font-size: .85rem; color: #245a5b; }
.secure-note svg { width: 20px; height: 20px; flex: none; color: var(--focus); margin-top: 2px; }

.form-success { display: none; text-align: center; padding: var(--space-9) var(--space-3); }
.form-success .tick { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px; display: grid; place-items: center; background: var(--grad); color: #fff; }
.form-success .tick svg { width: 30px; height: 30px; }
form.sent { display: none; }
form.sent + .form-success { display: block; }
/* Form sending: the error message (empty until a send fails) and the honeypot (off-screen, not display:none) */
.consent-err { color: var(--danger); font-size: .8rem; margin: -6px 0 0; }
.form-error { grid-column: 1 / -1; margin: 14px 0 0; color: var(--danger); font-size: .9rem; }
.form-error:empty { display: none; }
/* Shown only when main.js hasn't run (it hides it and enables the button). */
.form-js-note { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .9rem; }
.form-js-note a { color: inherit; text-decoration: underline; }
.form-error a { color: inherit; text-decoration: underline; }
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.contact-aside .item { display: flex; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--line-2); }
.contact-aside .item:last-child { border-bottom: 0; }
.contact-aside .card-icon { flex: none; } /* all three icons the same size, text lined up */
.contact-aside .item p { margin: 0; color: var(--muted); font-size: .92rem; }
.contact-aside .item h2 { font-size: 1.05rem; font-weight: 500; margin-bottom: var(--space-1); }

/* Footer ----------------------------------------------------------------- */
.site-footer { background: var(--navy-deep); color: var(--on-dark-faint); padding-block: var(--space-13) var(--space-8); margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--space-8); }
@media (max-width: 1040px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :nth-child(2) { grid-row: span 2; } } /* Services on the left, Company and Get started stacked on the right */
@media (max-width: 480px) { .footer-grid { gap: var(--space-7) var(--space-5); } }
.site-footer .brand span { color: #fff; }
.site-footer .brand .brand-name small { color: var(--teal-on-dark); }
.site-footer h2 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; font-weight: 500; margin-bottom: var(--space-4); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer a { text-decoration: none; font-size: .92rem; }
.site-footer a:hover { color: #fff; }
.footer-tag { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; margin-top: 18px; }
.footer-tag i { font-style: normal; color: var(--teal); }
.footer-bottom a { white-space: nowrap; } /* the legal links wrap between links, never inside one ('Politique / cookies') */
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: var(--space-11); padding-top: var(--space-6); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); font-size: .85rem; }

/* Platform showcase ------------------------------------------------------ */
.showcase { position: relative; }
.showcase-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-bottom: var(--space-6); }
@media (max-width: 960px) { .showcase-tabs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .showcase-tabs { grid-template-columns: 1fr; } }
.showcase-tab {
  display: grid; gap: 2px; align-content: start; grid-row: span 2; grid-template-rows: subgrid; text-align: left; cursor: pointer;
  padding: 14px 18px; border-radius: var(--r-md); border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03); color: var(--on-dark-muted); font: inherit; flex: 1 1 200px;
  transition: background .2s, border-color .2s, color .2s;
}
.showcase-tab b { font-family: var(--font-display); font-weight: 500; color: #fff; font-size: 1rem; }
.showcase-tab small { font-size: .82rem; line-height: 1.4; }
.showcase-tab[aria-selected="true"] { background: rgba(242, 106, 46,.12); border-color: rgba(242, 106, 46,.55); }
.showcase-tab:hover { border-color: rgba(255,255,255,.3); }
.browser {
  position: relative; border-radius: 14px; overflow: hidden; background: #f8fafc;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), 0 0 0 6px rgba(255,255,255,.03);
}
.browser-bar { display: flex; align-items: center; gap: var(--space-2); padding: 10px 14px; background: #eef2f7; border-bottom: 1px solid #dde3ec; }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #cfd6e1; }
.browser-bar span { margin-left: var(--space-3); font-family: var(--font-mono); font-size: .7rem; color: var(--muted); background: #fff; border-radius: 6px; padding: var(--space-1) 10px; }
.browser-view { position: relative; overflow-x: auto; }
/* The panel takes focus (tabs pattern, and it scrolls sideways): keep the ring inside the frame */
.browser-view:focus-visible { outline-offset: -3px; border-radius: 0; }
.browser-view img { width: 100%; height: auto; display: block; }
.browser-view img { animation: fadeUp .45s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.showcase-float {
  position: absolute; right: -18px; bottom: -34px; width: min(340px, 42%);
  border-radius: 12px; overflow: hidden; background: #fff;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.2);
}
.showcase-float img { width: 100%; display: block; }
.showcase-note { margin-top: var(--space-11); font-size: .78rem; color: #7d8aa6; font-family: var(--font-mono); letter-spacing: .04em; }
@media (max-width: 820px) { .showcase-float { position: static; width: 100%; margin-top: var(--space-4); } .showcase-note { margin-top: var(--space-5); } }

/* Legal pages ------------------------------------------------------------ */
.legal-shell { display: grid; grid-template-columns: 260px 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 960px) { .legal-shell { grid-template-columns: 1fr; } }
.legal-toc { position: sticky; top: 96px; font-size: .9rem; }
@media (max-width: 960px) { .legal-toc { position: static; border-bottom: 1px solid var(--line); padding-bottom: var(--space-5); } }
.legal-toc h2 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 14px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: grid; gap: var(--space-2); }
.legal-toc a { text-decoration: none; color: var(--ink-2); display: block; padding: 3px 0; }
.legal-toc a:hover { color: var(--blue); }
/* The section being read (main.js): darker, with a teal mark in the gutter */
.legal-toc a[aria-current="true"] { position: relative; color: var(--ink); font-weight: 500; }
.legal-toc a[aria-current="true"]::before { content: ""; position: absolute; left: -12px; top: 5px; bottom: 5px; width: 2px; border-radius: 2px; background: var(--teal); }
.legal-shell > * { min-width: 0; }
.prose { max-width: 66ch; min-width: 0; }
/* A long word breaks only when it can't fit at all, never mid-word to save space; names in
   code (cookie names) stay on one line. */
.prose th, .prose td { overflow-wrap: break-word; }
.prose td code { white-space: nowrap; }
.table-wrap table { min-width: 460px; }
.prose h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-top: 2.2em; scroll-margin-top: var(--space-2); } /* + the 88 px scroll padding = 96 px, as before */
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.05rem; margin-top: 1.8em; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { padding-left: var(--space-5); margin: 0 0 1em; display: grid; gap: var(--space-2); }
.prose a { color: var(--blue); }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .92rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: var(--space-3) 14px; border-bottom: 1px solid var(--line); }
.prose th { font-family: var(--font-body); font-weight: 600; color: var(--ink); background: var(--paper-2); font-size: .85rem; }
.table-wrap { overflow-x: auto; }
/* Phones and tablets in portrait: main.js marks each legal table (table--stack: column headings; table--pairs: name/value
   rows) and copies the headings into data-label. A row becomes a small card, each value under its
   heading; the heading row stays for screen readers (explicit table roles) but isn't shown. From
   820 px down (not 640): the French cookie table, with its names on one line, is 617 px wide. */
@media (max-width: 820px) {
  .prose :is(.table--stack, .table--pairs) { min-width: 0; }
  .prose :is(.table--stack, .table--pairs), .prose :is(.table--stack, .table--pairs) :is(tbody, tr, th, td) { display: block; }
  .prose .table--stack tr:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .prose .table--stack tr { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--space-1) var(--space-4); }
  .prose .table--stack tr + tr { margin-top: var(--space-3); }
  .prose .table--stack td { padding: var(--space-3) 0; border-bottom: 1px dashed var(--line); }
  .prose .table--stack td:last-child { border-bottom: 0; }
  .prose .table--stack td::before {
    content: attr(data-label); content: attr(data-label) / ""; /* the screen reader already has the heading */
    display: block; margin-bottom: var(--space-1);
    font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  }
  .prose .table--pairs th { background: none; padding: var(--space-3) 0 var(--space-1); border-bottom: 0; }
  .prose .table--pairs td { padding: 0 0 var(--space-3); }
}
.legal-meta { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em; color: var(--muted); margin-bottom: var(--space-4); }
.fill {
  background: #fff6d6; border-bottom: 1px dashed #d9a400; padding: 1px 5px; border-radius: 3px;
  font-family: var(--font-mono); font-size: .85em; color: #7a5c00;
}

/* Unticked consent on submit (4.5:1) */
.consent--invalid { color: var(--danger); }

/* Key phrases — shift from body colour to brand blue as they scroll into view */
.hl {
  font-weight: 600;
  transition: color .9s ease .15s;
}
.hl.in-view { color: var(--blue); }
.section--dark .hl.in-view, .cta-band .hl.in-view { color: var(--teal-on-dark); }
@media (prefers-reduced-motion: reduce) {
  .hl { color: var(--blue); }
  .section--dark .hl, .cta-band .hl { color: var(--teal-on-dark); }
}

/* Page-level pieces that used to be inline styles (18 Oct): one class each, so pages carry no
   style="" at all and the CSP can refuse inline styles. -------------------------------------- */
.page-hero-text { max-width: 820px; }
.page-hero--compact { padding-block: clamp(48px, 6vw, 80px) clamp(32px, 4vw, 48px); }
.page-hero--404 { min-height: 60vh; display: flex; align-items: center; }
.page-title--sm { font-size: clamp(2rem, 4vw, 3.2rem); }
.lead--sm { font-size: 1rem; }
.hero-actions { margin-top: var(--space-7); }
.section--compact { padding-block: clamp(56px, 7vw, 88px); }
.section--legal { padding-top: clamp(32px, 4vw, 48px); }
.section--dark .lead { color: var(--on-dark-muted); }
.split--top { align-items: start; }
.cta-text { margin: 0; max-width: 52ch; }
.cta-band--light { background: #fff; color: var(--ink-2); border: 1px solid var(--line); }
.cta-band--light h2 { color: var(--ink); }
.btn--outline-light { color: #fff; border-color: rgba(255, 255, 255, .3); }
.btn--outline-light:hover { border-color: #fff; }
.card--row { flex-direction: row; gap: var(--space-4); align-items: flex-start; }
.card--row > .ui-icon { flex: none; }
.card--row h3 { margin: 0 0 6px; }
.card--row p { margin: 0; }
.form-title { font-size: 1.6rem; margin-bottom: var(--space-5); }
.legal-links { margin-top: 2.5em; }
.showcase-stage { position: relative; }
.site-header .brand { color: var(--ink); }
.site-footer .brand { color: #fff; }
.footer-blurb { max-width: 34ch; font-size: .92rem; }
/* The illustrative score bars on the home page */
.bar .w-48 { width: 48%; } .bar .w-64 { width: 64%; } .bar .w-71 { width: 71%; } .bar .w-82 { width: 82%; } .bar .w-90 { width: 90%; }

/* Spacing and colour helpers, on the --space scale. !important like any utility class: a helper
   on an element must win over the component's own rule (e.g. .card h3), as the inline style did. */
.m-0 { margin: 0 !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.text-muted { color: var(--muted) !important; }
.nowrap { white-space: nowrap; } /* legal references like 6(1)(b), which browsers may break between brackets */

/* Visually hidden, still read by screen readers */
.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; }

/* Reveal on scroll ------------------------------------------------------- */
/* Hidden only once main.js has run (it adds .reveal-on to <html>), so the page never stays
   blank when the script is slow, blocked or broken. What's already on screen is shown at once,
   and the transition sits on .in-view, so only the showing animates. */
.reveal-on .reveal { opacity: 0; transform: translateY(18px); }
.reveal-on .reveal.in-view { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal-on .reveal { opacity: 1; transform: none; }
}

/* Print ------------------------------------------------------------------ */
/* Ink on white: no navigation, pop-ups, marquee or decorative glows; dark bands print as plain text. */
@media print {
  .nav-links, .nav-cta, .nav-toggle, .skip-link, dialog, .hp-field, .marquee, .cta-band .btn-row, .footer-grid > :not(:first-child) { display: none !important; }
  .hero::before, .hero::after, .cta-band::before { display: none; }
  .site-header { position: static; }
  .reveal, .reveal-on .reveal { opacity: 1 !important; transform: none !important; }
  .grad-text { background: none; color: var(--ink); -webkit-text-fill-color: currentColor; }
  .section--dark, .cta-band, .card--feature, .site-footer, .btn--primary { background: none !important; color: var(--ink-2) !important; box-shadow: none; }
  :is(.section--dark, .cta-band, .card--feature, .site-footer, .btn--primary) :is(h1, h2, h3, h4, p, li, a, b, strong, span, small, dt, dd, td, th) { color: var(--ink) !important; }
  .card, .doc, tr, .faq details { break-inside: avoid; }
}