/* ============================================================
   IT Sincennes — cybersecurity, risk & IT consulting
   Dark-navy theme
   ============================================================ */

/* Self-hosted webfonts (Inter + Plus Jakarta Sans), served from our own origin: no third-party
   request, no visitor IP sent to Google.

   Both families are VARIABLE fonts (confirmed: fvar + gvar tables present), so ONE file per
   family+subset covers every weight we use — declared here as a weight RANGE. This used to be 14
   @font-face rules pointing at 14 files, but only 4 of those files were distinct: every Inter
   weight was the same 48 KB download under a different name, every Plus Jakarta weight the same
   27 KB one. That cost ~145 KB of duplicate transfer on a first visit (680 KB on disk vs 182 KB
   now) and left Inter 600/700 — the nav links, buttons and language pills — fetching late because
   only the 400 face is preloaded. Rendering is unchanged: the browser was already resolving every
   weight from these same bytes.

   Ranges are set to the weights actually used (Inter 400-700, Jakarta 600-800); anything outside
   clamps, exactly as the discrete declarations did before. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-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;
}

/* ---- Metric-matched fallbacks (CLS) --------------------------------------------------------------
   While the webfonts load, text renders in a local face whose metrics are adjusted to match the
   webfont, so the swap does not reflow the page (measured 0.29 CLS on the EN article under Fast 3G
   without these). One face PER local font: a single @font-face with two local() sources can carry
   only one metric set. Values are DERIVED from the shipped woff2 with @capsizecss/unpack +
   createFontStack (scratchpad/fontmetrics/gen.mjs) — never hand-typed; regenerate if a font file
   changes. Fallback faces sit in each stack AHEAD of the plain system fonts. */
/* ---- Inter: metric-matched local fallbacks (derived, do not hand-edit) ---- */
@font-face {
  font-family: "Inter Fallback: Segoe UI";
  src: local('Segoe UI'), local('SegoeUI');
  ascent-override: 89.9412%;
  descent-override: 22.3946%;
  size-adjust: 107.7093%;
}
@font-face {
  font-family: "Inter Fallback: Arial";
  src: local('Arial'), local('ArialMT');
  ascent-override: 90.4365%;
  descent-override: 22.518%;
  line-gap-override: 0%;
  size-adjust: 107.1194%;
}
/* stack: Inter, "Inter Fallback: Segoe UI", "Inter Fallback: Arial", "Segoe UI", Arial */

/* ---- Plus Jakarta Sans: metric-matched local fallbacks (derived, do not hand-edit) ---- */
@font-face {
  font-family: "Plus Jakarta Sans Fallback: Segoe UI";
  src: local('Segoe UI'), local('SegoeUI');
  ascent-override: 98.3348%;
  descent-override: 21.0311%;
  size-adjust: 105.5577%;
}
@font-face {
  font-family: "Plus Jakarta Sans Fallback: Arial";
  src: local('Arial'), local('ArialMT');
  ascent-override: 98.8763%;
  descent-override: 21.147%;
  line-gap-override: 0%;
  size-adjust: 104.9796%;
}
/* stack: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback: Segoe UI", "Plus Jakarta Sans Fallback: Arial", "Segoe UI", Arial */

:root {
  --navy:      #0b1c39;   /* page background */
  --navy-2:    #102a4d;   /* section bands */
  --card:      #15294b;   /* cards / panels */
  --header:    #091434;   /* header + footer (logo navy) */
  --ink:       #cdd8ea;   /* body text */
  --muted:     #93a3c0;   /* secondary text */
  --white:     #ffffff;
  --accent:    #2bb6c4;   /* teal */
  --accent-2:  #3ec7d4;
  --accent-600:#1f97a4;
  --line:      rgba(255,255,255,.10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font-family: 'Inter', "Inter Fallback: Segoe UI", "Inter Fallback: Arial", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Plus Jakarta Sans', "Plus Jakarta Sans Fallback: Segoe UI", "Plus Jakarta Sans Fallback: Arial", 'Inter', sans-serif;
  color: var(--white);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
}

p { margin: 0 0 1rem; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { color: #8fdde6; }

/* Visible keyboard focus everywhere (mouse/touch focus stays clean via :focus-visible). */
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 4px; }

/* Sticky 76px header — keep in-page anchor targets from hiding underneath it. */
/* Sticky header is 77px. scroll-padding-top on the scroll container offsets EVERY scroll-into-view
   — anchor jumps AND focus() — so Shift+Tab can no longer land an element under the header. This
   replaced [id]{scroll-margin-top:90px}, which only covered anchors; do not reintroduce it
   alongside, the two are additive (measured: anchors pushed to 180px). */
html { scroll-padding-top: 90px; }

/* Skip-to-content link: off-screen until keyboard-focused. */
.skip-link {
  position: absolute; left: 8px; top: -52px; z-index: 200;
  background: var(--accent); color: #062330; padding: .65em 1.1em;
  border-radius: 0 0 10px 10px; font-weight: 700; transition: top .15s ease;
}
.skip-link:focus { top: 0; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.accent { color: var(--accent-2); }
.muted { color: var(--muted); }

/* Screen-reader-only text (e.g. structural headings that would be visual noise). */
.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;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; cursor: pointer;
  padding: .85em 2em; border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: .98rem; letter-spacing: .01em;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary { background: var(--accent); color: #062330; }
.btn-primary:hover { color: #062330; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(43,182,196,.35); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.30); color: var(--white); }
.btn-ghost:hover { background: rgba(255,255,255,.06); color: var(--white); border-color: var(--white); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Header / nav ---------- */
.site-header {
  background: var(--header);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 16px rgba(0,0,0,.35);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; position: relative; }
.brand { display: flex; align-items: center; gap: .65rem; color: var(--white); font-family: 'Plus Jakarta Sans', "Plus Jakarta Sans Fallback: Segoe UI", "Plus Jakarta Sans Fallback: Arial", sans-serif; font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; }
.brand:hover { color: var(--white); }
.brand .mark { width: 36px; height: 36px; flex: none; }
.brand small { display: block; font-size: .58rem; font-weight: 600; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; margin-top: 2px; }

.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--white); text-transform: uppercase; font-size: .82rem; font-weight: 600; letter-spacing: .04em; padding: .55rem .9rem; border-radius: 6px; }
.nav-links a:hover, .nav-links a.active { color: var(--accent-2); }
/* The header CTA is a .btn-primary inside .nav-links, and .nav-links a (0,1,1) beats .btn-primary
   (0,1,0), painting the button text white-on-teal at 2.44:1 (1.20:1 on hover). Re-assert the
   button's own dark text at equal-or-higher specificity. */
.nav-links a.btn-primary, .nav-links a.btn-primary:hover { color: #062330; }

/* Right-hand header controls: sister-site mark, language toggle, menu button. These have to
   stay ONE flex child of .nav — it is justify-content: space-between, so a fourth direct child
   would redistribute every gap in the header instead of just adding one. */
.nav-end { display: flex; align-items: center; gap: 12px; }

/* Sister-site link to cactus.net. Styled quieter than a nav item on purpose: it leaves the
   site, so it should read as a companion mark rather than another destination in this one. */
.cactus-link { display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .4em .75em; border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
  color: var(--ink); font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease; }
.cactus-link:hover, .cactus-link:focus-visible {
  color: var(--white); border-color: #34d399; background: rgba(52,211,153,.12); }
.cactus-mark { width: 18px; height: 18px; flex: none; }

/* Language toggle */
.lang { display: inline-flex; }
.lang a { padding: .4em .85em; font-size: .76rem; font-weight: 700; letter-spacing: .06em; color: var(--ink); border: 1px solid rgba(255,255,255,.24); }
.lang a:first-child { border-radius: 999px 0 0 999px; border-right: 0; }
.lang a:last-child { border-radius: 0 999px 999px 0; }
.lang a.on { background: var(--accent); color: #062330; border-color: var(--accent); }

.nav-toggle { display: none; font: inherit; }
.nav-toggle:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 52px 0 60px; text-align: center; overflow: hidden;
  background: radial-gradient(1200px 520px at 50% -10%, rgba(43,182,196,.16), transparent 60%), var(--navy); }
.hero h1 { font-size: clamp(1.95rem, 4vw, 2.95rem); font-weight: 800; max-width: 860px; margin: 0 auto .7rem; }
.hero .lead { font-size: 1.08rem; color: var(--muted); max-width: 620px; margin: 0 auto 1.6rem; }
.hero .cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* The service list under the buttons. Deliberately small and muted: it is there to be scanned,
   not read, and it replaces eight lines of hero prose with one. */
.hero-meta { max-width: 640px; margin: 1.35rem auto 0; color: var(--muted); font-size: .88rem;
  line-height: 1.65; text-wrap: balance; }
.eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .18em; font-size: .76rem; font-weight: 700; color: var(--accent-2); margin-bottom: .7rem; }
/* Uppercase + letter-spacing is where size-adjust over-corrects. The fallback faces are tuned to
   lowercase x-width, and Inter's capitals are narrower relative to its lowercase than Segoe's or
   Arial's, so tracked all-caps strings render WIDER in the adjusted fallback than in Inter and wrap
   differently on swap — measured: /fr CLS went 0.06 -> 0.10 from exactly these two elements when
   they used the adjusted faces. They take the plain system stack instead; everything else keeps
   the metric-matched fallbacks (article CLS 0.29 -> 0.003). */
.eyebrow, .nav-links a { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
/* The trust-band is a centred flex-wrap row of six pills. Its row composition flips when a pill's
   width crosses a threshold, and centring then moves every pill on the row by ~half a pill and the
   crossing pill by a whole one — measured 126-148px jumps on /fr at the font swap, the single
   largest CLS source on the French home page. The plain stack keeps the fallback on the same rows
   Inter lands on. */
.trust-band li { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }

/* ---------- Sections ---------- */
.section { padding: 80px 0; }
/* Alternating bands are given a gentle top-lit gradient + hairline edges so the long dark page
   reads as distinct sections rather than one flat wall of navy. */
.section--band {
  background: linear-gradient(180deg, #123158 0%, var(--navy-2) 55%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* The trust strip carries its own bottom hairline — don't stack a second one on the band below. */
.trust-strip + .section--band { border-top: 0; }
.section-head { text-align: center; max-width: 700px; margin: 0 auto 48px; }
.section-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.section-head p { color: var(--muted); font-size: 1.08rem; }

/* ---------- Service cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 32px 28px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-6px); border-color: rgba(43,182,196,.7); box-shadow: 0 18px 42px rgba(0,0,0,.40); }
.card .ico { width: 48px; height: 48px; border-radius: 12px; background: rgba(43,182,196,.14); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--accent-2); }
.card h3 { font-size: 1.22rem; margin-bottom: .5rem; }
.card p { color: var(--muted); margin: 0; font-size: .98rem; }
.card .card-link { margin-top: 16px; font-weight: 700; font-size: .92rem; }
.card .card-link a { color: var(--accent-2); }
.card:hover .card-link a { color: #8fdde6; }

/* ---------- Split / feature list ---------- */
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.checks li { position: relative; padding-left: 2rem; }
.checks li::before { content: ""; position: absolute; left: 0; top: .55em; width: .7em; height: .7em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(43,182,196,.18); }
.checks strong { color: var(--white); }

/* ---------- CTA band ---------- */
/* The conversion moment gets a faint teal glow (echoing the hero) so it reads as a deliberate
   highlight, not just another dark band. */
.cta-band {
  text-align: center; padding: 76px 0;
  background: radial-gradient(900px 420px at 50% 118%, rgba(43,182,196,.16), transparent 62%),
              linear-gradient(180deg, var(--navy-2), var(--navy));
}
.cta-band h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.cta-band p { color: var(--muted); max-width: 560px; margin: 0 auto 1.8rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--header); border-top: 1px solid var(--line); padding: 54px 0 28px; color: var(--muted); }
.footer-grid { display: flex; flex-wrap: wrap; gap: 36px; justify-content: space-between; }
.site-footer h3 { color: var(--white); font-size: 1rem; margin-bottom: .8rem; }
.site-footer p { margin: 0 0 .35rem; }
/* 23 services + About + How we work as one stack was a 1,155px column (footer 1,701px at 1280,
   2,939px at 390). Two CSS columns halve it with no markup churn; the heading spans both. */
.footer-services { columns: 2; column-gap: 28px; }
.footer-services h3 { column-span: all; }
.footer-services p { break-inside: avoid; }
.site-footer a { color: var(--ink); }
.footer-bottom { border-top: 1px solid var(--line); margin-top: 36px; padding-top: 20px; font-size: .85rem; text-align: center; }

/* ---------- Forms ---------- */
.form-card { max-width: 640px; margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 36px; }
/* Turnstile renders a fixed 300px iframe. Inside the 36px-padded card that overran the column by
   31px at 390 and clipped the widget's own "Privacy · Help" at 360. Tighter card padding first;
   below 380 the widget itself is scaled (it cannot be resized, only transformed). */
@media (max-width: 480px) { .form-card { padding: 20px; } }
@media (max-width: 380px) { .cf-turnstile { transform: scale(.88); transform-origin: 0 0; } }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .86rem; color: var(--ink); margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; padding: .8em 1em; background: rgba(255,255,255,.04); border: 1px solid var(--line);
  border-radius: 10px; color: var(--white); font-family: inherit; font-size: 1rem;
}
.field select option { background: var(--navy); color: var(--white); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); background: rgba(43,182,196,.06); }
.field-error { display: block; margin-top: 6px; font-size: .82rem; color: #ff9b9b; }
.field input.input-validation-error, .field textarea.input-validation-error { border-color: #ff9b9b; }
.validation-summary-errors { color: #ff9b9b; font-size: .9rem; margin-bottom: 1rem; }
.validation-summary-errors ul { margin: 0; padding-left: 1.2rem; }

/* Honeypot anti-spam field. Pushed off-screen rather than display:none/visibility:hidden,
   since some bots deliberately skip non-rendered inputs. Humans never see or tab to it. */
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Trust strip + credentials band (home) */
.trust-strip { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 0; }
.trust-band { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; list-style: none; margin: 0; padding: 0; }
.trust-band li { font-size: .84rem; font-weight: 600; color: var(--ink); background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 999px; padding: .45em .95em; }
.trust-strip .trust-cta { text-align: center; margin: 16px 0 0; font-size: .92rem; }

/* ---------- Contact details + social ---------- */
.contact-details { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: center; align-items: center; max-width: 640px; margin: 0 auto 28px; font-size: 1.02rem; }
.contact-details > a { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); font-weight: 600; }
.contact-details > a:hover { color: var(--white); }
.contact-details > a svg { color: var(--accent-2); flex: none; }
.social { display: inline-flex; gap: 10px; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink); }
.social a:hover { border-color: var(--accent); color: var(--accent-2); background: rgba(43,182,196,.08); }
.site-footer .social { margin-top: 10px; }
.site-footer .social a { width: 34px; height: 34px; }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; transition: border-color .2s ease; }
.faq details[open] { border-color: rgba(43,182,196,.5); }
.faq summary { cursor: pointer; font-weight: 600; color: var(--white); list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-2); font-size: 1.4rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: 14px 0 0; color: var(--muted); }

/* ---------- Article table of contents ---------- */
.toc { margin: 34px 0; padding: 20px 24px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.toc-h { margin: 0 0 12px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--accent-2); font-family: 'Plus Jakarta Sans', "Plus Jakarta Sans Fallback: Segoe UI", "Plus Jakarta Sans Fallback: Arial", sans-serif; }
.toc ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.toc a { color: var(--ink); }
.toc a:hover { color: var(--accent-2); }

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
  .cactus-label { display: none; }
  .cactus-link { padding: .4em .55em; }
}

/* Below ~1000px the brand tagline was already wrapping onto two lines (French from 900px), and
   the sister-site mark costs the row another ~45px. Same trade the phone-width block makes: drop
   the decoration rather than let the brand break. Hidden, not shrunk — a wrapped two-line tagline
   under a one-line wordmark reads as a layout bug. */
@media (max-width: 1000px) { .brand small { display: none; } }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
  .nav-toggle { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; color: var(--white);
    background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 999px; padding: .45em 1em; font-weight: 700; font-size: .85rem; }
  .nav-links { position: absolute; left: -24px; right: -24px; top: 76px; flex-direction: column; align-items: stretch;
    background: var(--header); border-bottom: 1px solid var(--line); padding: 12px 24px 20px; gap: 2px;
    max-height: 0; overflow: hidden; visibility: hidden; opacity: 0;
    /* visibility is discrete, so a .25s transition on it holds the panel unfocusable for the
       whole animation — which silently defeated site.js focusing the first link on open (it
       worked only under prefers-reduced-motion). Delay the flip on CLOSE so the panel stays
       visible while it collapses, and make it instant on OPEN (see .nav-links.open below). */
    transition: max-height .25s ease, opacity .2s ease, visibility 0s .25s; }
  .nav-links a { padding: .85rem .4rem; }
  /* No delay on open: the panel must be focusable in the same frame site.js focuses it. */
  .nav-links.open { max-height: 460px; visibility: visible; opacity: 1;
    transition: max-height .25s ease, opacity .2s ease, visibility 0s 0s; }
}

/* Phone-width header: the full brand block, language pills and labelled menu button can't share
   one 76px row — flexbox squeezes the brand until its tagline wraps. Shed the decorations
   instead: drop the tagline, tighten the brand, and let the menu button go icon-only. */
@media (max-width: 600px) {
  .brand { font-size: clamp(.98rem, 4.6vw, 1.1rem); gap: .5rem; }
  .brand .mark { width: 30px; height: 30px; }
  .brand small { display: none; }
  .brand span { white-space: nowrap; }
  .lang a { padding: .4em .7em; }
  .nav-toggle { padding: .55em .7em; }
  .nav-toggle-label { display: none; }
  .nav-end { gap: 8px; }
  /* Border off, but keep the box: a 20px mark alone is too small a tap target. */
  .cactus-link { padding: 0; border-color: transparent; min-width: 34px; min-height: 34px; }
  .cactus-mark { width: 21px; height: 21px; }
}

/* Narrow phones (<=344px): with the sister-site mark in .nav-end the row is 22px short at 320 and
   still ~1px short at 342. Trade container padding, not control size (tap targets). The .nav-links
   offsets MUST track the container padding — the panel is full-bleed via ±24px. */
@media (max-width: 344px) {
  .site-header .container { padding: 0 12px; }
  .nav-links { left: -12px; right: -12px; padding-left: 12px; padding-right: 12px; }
  .nav-end { gap: 6px; }
}

/* Respect the user's reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .card:hover, .btn:hover { transform: none; }
}

/* ---------- Pricing cards ---------- */
.card--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 18px 42px rgba(0,0,0,.40); }
.price-badge { display: inline-block; background: var(--accent); color: #062330; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .3em .8em; border-radius: 999px; margin-bottom: 14px; }
.price-features { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 9px; }
.price-features li { position: relative; padding-left: 1.6rem; font-size: .92rem; color: var(--ink); }
.price-features li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--accent-2); font-weight: 800; }

/* General-purpose table for in-article data (framework mappings, comparisons). Distinct from
   .fee-table below, which is tuned for a small grid of large monetary figures; this one is for
   prose in cells. Scrolls inside its own wrapper so the page body never scrolls sideways. */
.table-wrap { overflow-x: auto; margin: 20px 0; }
.data-table { width: 100%; min-width: 480px; border-collapse: collapse; text-align: left; font-size: .95rem; }
.data-table th, .data-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table thead th { color: var(--accent-2); font-size: .76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; border-bottom-color: rgba(255,255,255,.22); }
.data-table tbody th { font-weight: 600; color: var(--ink); }
.data-table tbody td { color: var(--muted); }
.data-table tbody td:first-child { color: var(--ink); font-weight: 600; }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }

/* Fixed-fee table: seat tiers across, engagement depth down. A real <table> because it is
   genuinely two-dimensional data — a grid of divs would leave the row/column relationship
   unreadable to a screen reader. Scrolls inside its own wrapper so the page never scrolls
   sideways on a phone. */
.fee-wrap { max-width: 900px; margin: 0 auto; overflow-x: auto; }
.fee-table { width: 100%; min-width: 560px; border-collapse: collapse; text-align: left; }
.fee-table th, .fee-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.fee-table thead th { color: var(--accent-2); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; }
/* The corner cell is an empty <td>, not a <th> — correct, since it labels neither axis — so the
   brighter header rule has to name both or the underline steps down where the axes meet. */
.fee-table thead th, .fee-table thead td { border-bottom-color: rgba(255,255,255,.22); }
.fee-table tbody th { font-weight: 600; color: var(--ink); }
/* tabular-nums so the dollar figures line up as a column instead of drifting. */
.fee-table tbody td { font-family: 'Plus Jakarta Sans', "Plus Jakarta Sans Fallback: Segoe UI", "Plus Jakarta Sans Fallback: Arial", sans-serif; font-weight: 800;
  font-size: 1.18rem; color: var(--white); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fee-table tbody tr:last-child th, .fee-table tbody tr:last-child td { border-bottom: 0; }
.fee-tax { max-width: 900px; margin: 10px auto 0; color: var(--muted); font-size: .82rem; }
.fee-note { max-width: 900px; margin: 18px auto 0; font-size: .92rem; }
.fee-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 26px 0 0; }

/* Drata Alliance Partner strip (homepage). Same card treatment as the trust strip so it reads
   as a credential rather than another service pitch, and stays out of the .section--band
   alternation either side of it. */
.partner-strip { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 30px 0; }
.partner-row { display: flex; align-items: center; gap: 28px; max-width: 900px; margin: 0 auto; }
/* Proportional scale of the official asset — width only, height auto, so the width/height
   attributes still reserve the right box and nothing shifts on load. */
.partner-row img { flex: none; width: 86px; height: auto; }
.partner-row .eyebrow { margin-bottom: .35rem; }
.partner-row h2 { font-size: 1.32rem; margin: 0 0 .45rem; }
.partner-row p { margin: 0; }
.partner-row .partner-link { margin-top: .7rem; font-weight: 700; font-size: .92rem; }
@media (max-width: 700px) {
  .partner-row { flex-direction: column; text-align: center; gap: 18px; }
}

/* ---------- Compact self-checks strip (homepage, kept small on purpose) ---------- */
.selfchecks { padding: 40px 0; }
.selfchecks-lead { text-align: center; color: var(--muted); margin: 0 auto 18px; max-width: 660px; font-size: .98rem; }
/* Four compact cards: one row on desktop, a balanced 2×2 on tablet, single column on mobile.
   Explicit column counts (not auto-fit) so four cards never land on an unbalanced 3 + 1 row. */
.selfchecks-grid { max-width: 940px; margin: 0 auto; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.selfcheck-card { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
@media (max-width: 860px) { .selfchecks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .selfchecks-grid { grid-template-columns: minmax(0, 1fr); } }
.selfcheck-card h3 { font-size: 1.02rem; margin: 0; }
.selfcheck-card .card-link { margin: 0; white-space: nowrap; }

/* ---------- Comparison table ---------- */
.compare-wrap { overflow-x: auto; margin-top: 26px; }
.compare-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 540px; }
.compare-table th, .compare-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare-table thead th { color: var(--white); font-family: 'Plus Jakarta Sans', "Plus Jakarta Sans Fallback: Segoe UI", "Plus Jakarta Sans Fallback: Arial", 'Inter', sans-serif; font-size: .9rem; }
.compare-table tbody th { color: var(--ink); font-weight: 600; }
.compare-table td { color: var(--muted); }
.compare-table td.yes { color: #8fe3c6; }
.compare-table td.yes::before { content: "\2713 "; color: var(--accent-2); font-weight: 800; }
.compare-table td.no::before { content: "\2715 "; color: #ff9b9b; font-weight: 800; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- Self-check stepper ---------- */
.sc-progress { height: 6px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; margin-bottom: 12px; }
.sc-progress-bar { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.sc-counter { color: var(--muted); font-size: .85rem; margin: 0 0 16px; }
.sc-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }
.sc-card { padding: 28px; }
.sc-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
/* Render the question (a <legend>, kept for screen-reader grouping) as a normal full-width block
   so long question text wraps cleanly instead of breaking across the old fieldset border. */
.sc-question { display: block; width: 100%; padding: 0; margin: 0 0 16px; font-weight: 600; color: var(--white); font-size: 1.05rem; line-height: 1.45; }
.sc-question:focus { outline: none; } /* focused programmatically each step; not a keyboard control */
.sc-option { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 11px; cursor: pointer; line-height: 1.5; }
.sc-option input { margin-top: .35em; flex: none; }

/* ---------- Subtle scroll-reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Services dropdown ---------- */
.has-dropdown { position: relative; }
.nav-services .caret { font-size: .7em; margin-left: 2px; }
.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 720px; max-width: min(720px, calc(100vw - 32px));
  background: var(--header); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 42px rgba(0,0,0,.45); padding: 24px 26px; z-index: 200;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .18s ease, transform .18s ease;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(4px); }
.dropdown-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 26px; }
.dropdown-col .dropdown-h { color: var(--accent-2); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 11px; font-family: 'Plus Jakarta Sans', "Plus Jakarta Sans Fallback: Segoe UI", "Plus Jakarta Sans Fallback: Arial", sans-serif; }
.dropdown-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.dropdown-col a { color: var(--ink); font-size: .9rem; font-weight: 500; text-transform: none; letter-spacing: 0; padding: 0; display: block; }
.dropdown-col a:hover { color: var(--accent-2); }
.dropdown-all { display: inline-block; margin-top: 18px; font-weight: 700; font-size: .85rem; color: var(--accent-2); }
@media (min-width: 861px) and (max-width: 1120px) {
  /* static, so the dropdown's containing block becomes .nav rather than the narrow <li> */
  .has-dropdown { position: static; }
  .dropdown { left: 0; right: auto; }
}

/* ---------- Whole-card click target (stretched link) ---------- */
.card--link { position: relative; }
.card--link .card-link a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.card--link:hover { cursor: pointer; }
.card:focus-within { border-color: rgba(43,182,196,.7); }

/* ---------- Sticky scroll CTA ---------- */
.sticky-cta {
  position: fixed; right: 20px; bottom: 20px; z-index: 150;
  background: var(--accent); color: #062330; font-weight: 700; font-size: .95rem;
  padding: .8em 1.5em; border-radius: 999px; box-shadow: 0 12px 28px rgba(43,182,196,.40);
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease;
}
.sticky-cta.show { opacity: 1; visibility: visible; transform: none; }
.sticky-cta:hover { color: #062330; }
@media (max-width: 640px) {
  .sticky-cta { right: 12px; left: 12px; bottom: 12px; text-align: center; }
  /* Edge-to-edge and fixed at this width, so without clearance the bar sits on top of the
     footer's own phone and email links — the very things it exists to drive traffic to. */
  .site-footer { padding-bottom: 84px; }
  html { scroll-padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }

/* ---------- Services dropdown — mobile (inline, inside the hamburger panel) ---------- */
@media (max-width: 860px) {
  .has-dropdown { display: block; }
  /* Collapsed by default; site.js toggles .open on the <li>. The caret stays visible as the
     disclosure cue and flips when open. */
  .has-dropdown:not(.open) .dropdown { display: none; }
  .nav-services .caret { display: inline-block; transition: transform .15s ease; }
  .has-dropdown.open .nav-services .caret { transform: rotate(180deg); }
  .dropdown {
    /* inherit (not visible): follow the closed nav panel's visibility so the service links
       leave the tab order when the hamburger is closed. A hard "visible" here would keep all
       ~23 links keyboard-focusable while invisible (WCAG 2.4.3/2.4.7). */
    position: static; opacity: 1; visibility: inherit; transform: none;
    box-shadow: none; border: 0; background: transparent; min-width: 0; max-width: none;
    padding: 4px 0 8px 12px;
  }
  .dropdown-grid { grid-template-columns: 1fr; gap: 12px; }
  /* The desktop rule .dropdown-col a { padding: 0 } (same 0,1,1 specificity as .nav-links a, later
     in source) leaks into the inline panel and leaves 24 service links 24px tall with ~10px dead
     gaps between rows. 24 + 2x8 = 40px rows; gap 0 so the pitch goes 33 -> 40, not 49. */
  .dropdown-col a { padding: .5rem 0; }
  .dropdown-col ul { gap: 0; }
  .dropdown-all { margin-top: 10px; }
  .nav-links.open { max-height: calc(100vh - 76px); overflow-y: auto; }
}

/* ---------- Glossary ---------- */
.glossary { margin: 0; }
.glossary .g-entry { padding: 18px 0 4px; border-bottom: 1px solid var(--line); }
.glossary .g-entry:last-child { border-bottom: 0; }
.glossary dt { color: var(--white); font-family: 'Plus Jakarta Sans', "Plus Jakarta Sans Fallback: Segoe UI", "Plus Jakarta Sans Fallback: Arial", 'Inter', sans-serif; font-weight: 700; font-size: 1.05rem; margin-bottom: .45rem; }
.glossary dd { margin: 0; }
.glossary .g-link { margin-top: .5rem; font-size: .9rem; }

/* ---------- Print ---------- */
/* Buyers print/save-as-PDF compliance content and self-check results: drop the chrome,
   flip to ink-friendly light, and expand external link targets on paper. */
@media print {
  .site-header, .site-footer, .sticky-cta, .skip-link, .nav-toggle, .cta-band { display: none !important; }
  body, .section, .section--band, .hero, .trust-strip, .selfchecks {
    background: #fff !important; color: #1a1a1a !important;
    border-color: #ddd !important; box-shadow: none !important;
  }
  .card, .form-card, .faq details { background: #fff !important; border: 1px solid #ccc !important; box-shadow: none !important; }
  h1, h2, h3, h4, .checks strong, .faq summary { color: #000 !important; }
  p, li, .muted, .card p, .faq details p { color: #222 !important; }
  a { color: #000 !important; text-decoration: underline; }
  .eyebrow { color: #444 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #444; }
}

/* ---------- Utilities ---------- */
/* These replaced the former style="…" attributes so the CSP style-src can drop
   'unsafe-inline'. Kept LAST in the file: they must win same-specificity ties
   everywhere, exactly as the inline styles they replaced always did. */
.crumbs { padding: 22px 24px 0; font-size: .85rem; }
.mw-320 { max-width: 320px; }
.mw-680 { max-width: 680px; }
.mw-760 { max-width: 760px; }
.mw-880 { max-width: 880px; }
.ta-c { text-align: center; }
.mx-auto { margin: 0 auto; }
.grid-fit-240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-fit-260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; }
.mt-22 { margin-top: 22px; }
.mt-24 { margin-top: 24px; }
.mt-06r { margin-top: .6rem; }
.mt-09r { margin-top: .9rem; }
.pt-18 { padding-top: 18px; }
.fs-85 { font-size: .85rem; }
.fs-88 { font-size: .88rem; }
.fs-90 { font-size: .9rem; }
.fs-150 { font-size: 1.5rem; }

/* ---------- Print ----------
   The guides (Law 25, EFVP, cyber-insurance) get printed and passed around inside client
   organizations — Ctrl+P should produce clean ink-on-white pages, not a dark screenshot. */
@media print {
  @page { margin: 18mm; }

  /* Dark theme -> ink on paper. Blanket strip, then re-add the little that matters. */
  *, *::before, *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  body { font-size: 11pt; line-height: 1.55; }

  /* Chrome and interaction-only elements have no meaning on paper. */
  .site-header, .site-footer, .sticky-cta, .skip-link, .crumbs, .no-print,
  .cta, .cta-band, .btn, .form-card, .toc, .nav-toggle, .lang { display: none !important; }

  /* The check-list bullets are background-painted dots — repaint them printable. */
  .checks li::before { background: #444 !important; }

  /* Scroll-reveal keeps unscrolled content at opacity 0 — never let that reach paper. */
  .reveal { opacity: 1 !important; transform: none !important; }

  a { color: #000 !important; text-decoration: underline; }
  /* Cited sources keep their address on paper (external links only — internal nav stays clean). */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }

  /* Collapsed FAQ answers must print. Belt and suspenders: the child-display override
     (Firefox) plus the ::details-content reveal (Chromium 131+). */
  details > :not(summary) { display: block !important; }
  details::details-content { content-visibility: visible !important; height: auto !important; }
  .faq details, .card, .checks li { break-inside: avoid; border: 1px solid #bbb !important; }
  .checks li { border: none !important; }
  .faq summary::after { content: "" !important; }

  h1, h2, h3 { break-after: avoid; }
  .hero { padding: 0 0 12px !important; }
  .section { padding: 12px 0 !important; }
  .section--band { border: none !important; }
}