/* ============================================================
   FONTS — self-hosted, latin subset
   Geist: variable wght 300-800 (60KB) — single font, used everywhere.
   No DM Mono. Code blocks rendered in Geist with tabular-nums + amber accent
   (see "CODE BLOCKS — amber-accented Geist" section below).
   ============================================================ */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 300 800;
  src: url('../fonts/geist-latin-wght-normal.woff2') format('woff2');
}

@layer base {

/* ============================================================
   pentest [systems] — extracted base CSS
   Whitelist subset of pentest-systems.css for overrides.css use
   ============================================================ */

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  /* 100dvh adapts to mobile browser chrome show/hide (iOS Safari).
     100vh fallback for older browsers (Safari < 15.4). */
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.5; -webkit-font-smoothing: antialiased;
}
img, picture, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs:    0.75rem;     /* 12 */
  --text-sm:    0.8125rem;   /* 13 */
  --text-base:  0.9375rem;   /* 15 */
  --text-lg:    1.0625rem;   /* 17 */
  --text-xl:    1.25rem;     /* 20 */
  --text-2xl:   clamp(1.5rem, 2.5vw, 1.75rem);
  --text-3xl:   clamp(1.75rem, 3vw, 2.25rem);
  --text-4xl:   clamp(2.25rem, 4vw, 3rem);
  --text-5xl:   clamp(2.5rem, 6vw, 4.5rem);

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-base:  1.5;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.06em;

  /* colors — neutrals */
  --color-bg:           #0a0a0a;
  --color-surface:      #131313;
  --color-surface-2:    #1a1a1a;
  --color-surface-3:    #222222;
  --color-border:       rgb(255 255 255 / 0.08);
  --color-border-strong:rgb(255 255 255 / 0.16);
  --color-text:         #ededed;
  --color-text-muted:   #8a8a8a;   /* AA-pass on bg (5.73:1) */
  --color-text-dim:     #7a7a7a;   /* AA on bg only (4.61:1); AA-large on surfaces */
  --color-text-inverse: #0a0a0a;

  /* colors — brand */
  --color-accent:       #b6f500;
  --color-accent-soft:  color-mix(in srgb, #b6f500 14%, transparent);
  --color-accent-hover: color-mix(in srgb, #b6f500 88%, white);
  --color-accent-press: color-mix(in srgb, #b6f500 75%, black);

  /* colors — semantic */
  --color-success: #00e676;
  --color-warning: #ffb020;
  --color-danger:  #ff4d4d;
  --color-info:    #4d9fff;


  /* colors — severity (CVSS 4.0, 5 distinguishable tiers) */
  --color-sev-none:     var(--color-text-dim);
  --color-sev-low:      var(--color-info);
  --color-sev-medium:   #ffc847;     /* amber  — hue 42° */
  --color-sev-high:     #ff8c1a;     /* orange — hue 30° */
  --color-sev-critical: var(--color-danger);

  --color-sev-critical-soft: color-mix(in srgb, #ff4d4d 14%, transparent);

  /* colors — syntax highlighting (legitimised from orphan hex) */

  /* spacing — 4px grid */
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */

  /* radius */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;

  /* opacity scale */
  --opacity-disabled:  0.4;

  /* z-index scale (only the levels actually used by the system) */
  --z-sticky:   20;
  --z-overlay:  90;
  --z-drawer:   100;
  --z-toast:    500;

  /* elevation */

  /* motion */
  --dur-fast:    120ms;
  --dur-normal:  220ms;
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);

  /* layout */
  --content-width: 1240px;

  color-scheme: dark;
}

@media (min-width: 1441px) {
  :root {
    --content-width: 1440px;
    --text-2xl:  clamp(1.5rem, 2.5vw, 1.875rem);
    --text-3xl:  clamp(1.75rem, 3vw, 2.5rem);
    --text-4xl:  clamp(2.25rem, 4vw, 3.5rem);
    --text-5xl:  clamp(2.5rem, 6vw, 5rem);
  }
}
@media (min-width: 1921px) {
  :root {
    --content-width: 1680px;
    --text-2xl:  clamp(1.5rem, 2.5vw, 2rem);
    --text-3xl:  clamp(1.75rem, 3vw, 2.75rem);
    --text-4xl:  clamp(2.25rem, 4vw, 3.75rem);
    --text-5xl:  clamp(2.5rem, 6vw, 5.5rem);
    /* generous large-screen spacing on full sections */
    --space-12: 4rem;   /* was 3rem */
    --space-16: 5rem;   /* was 4rem */
    --space-20: 6rem;   /* was 5rem */
    --space-24: 7.5rem; /* was 6rem */
  }
}
@media (min-width: 2401px) {
  :root {
    --content-width: 1920px;
    --text-5xl:  clamp(2.5rem, 6vw, 6rem);
  }
}

/* ============================================================
   LARGE-UI / SMOOTH PROPORTIONAL SCALING
   ============================================================ */

/* ──── COLOR + CASCADE OVERRIDES ──── */
.page-header .page-nav a:not(.btn)       { color: var(--color-text); }
@media (hover: hover) and (pointer: fine) {
  .page-header .page-nav a:not(.btn):hover { color: var(--color-accent); }
}
.page-header .page-nav a.is-current      { color: var(--color-accent); }
.pattern-footer .footer-col a       { color: var(--color-text); }
@media (hover: hover) and (pointer: fine) {
  .pattern-footer .footer-col a:hover { color: var(--color-accent); }
}
.pattern-footer .footer-brand p     { color: var(--color-text-muted); }


/* ──── HEADER ──── */
.page-header .page-brand { font-size: clamp(1.25rem, 1.08rem + 0.26vw, 1.5rem); }
.page-header .page-nav a:not(.btn) { font-size: clamp(0.9375rem, 0.7rem + 0.25vw, 1.0625rem); }
@media (min-width: 1441px) { .page-header-inner { height: 72px; } }
@media (min-width: 1921px) { .page-header-inner { height: 80px; } }
@media (min-width: 2401px) { .page-header-inner { height: 88px; } }


/* ──── FOOTER ──── */
.pattern-footer .footer-brand .brand-mark { font-size: clamp(1.25rem, 1.08rem + 0.26vw, 1.5rem); }
.pattern-footer .footer-brand p { font-size: clamp(0.9375rem, 0.7rem + 0.25vw, 1.0625rem); }
.pattern-footer .footer-col h3 { font-size: clamp(0.875rem, 0.7rem + 0.1vw, 0.9375rem); }
@media (max-width: 1023px) {
  .pattern-footer .footer-col h3 { font-size: 13px; }
}
.pattern-footer .footer-col a { font-size: clamp(0.9375rem, 0.7rem + 0.25vw, 1.0625rem); padding: 6px 0; }
.pattern-footer .footer-bottom { font-size: clamp(0.875rem, 0.7rem + 0.1vw, 0.9375rem); }


/* ──── FEATURE CARDS ──── */
.feature h3 { font-size: clamp(1.0625rem, 0.78rem + 0.46vw, 1.5rem); }
.feature p  { font-size: clamp(0.9375rem, 0.7rem + 0.25vw, 1.0625rem); }

.feature.is-icon-inline h3 { font-size: clamp(0.9375rem, 0.6rem + 0.5vw, 1.5rem); line-height: 1.35; }
.feature.is-accented h3 { font-size: clamp(0.9375rem, 0.7rem + 0.25vw, 1.0625rem); }

@media (min-width: 1441px) {
  .feature.is-icon-inline .feature-icon { width: 36px; height: 36px; }
  .feature.is-icon-inline .feature-icon svg { width: 20px; height: 20px; }
  .feature.is-icon-inline { padding: var(--space-6); column-gap: var(--space-4); row-gap: var(--space-4); }
}
@media (min-width: 1921px) {
  .feature.is-icon-inline .feature-icon { width: 40px; height: 40px; }
  .feature.is-icon-inline .feature-icon svg { width: 22px; height: 22px; }
  .feature.is-icon-inline { padding: var(--space-8); column-gap: var(--space-5); row-gap: var(--space-5); }
}
@media (min-width: 2401px) {
  .feature.is-icon-inline .feature-icon { width: 44px; height: 44px; }
}


/* ──── SERVICE CARDS ──── */
.service-card h3 { font-size: clamp(1.25rem, 1.08rem + 0.26vw, 1.5rem); }
.service-card .svc-meta .svc-tag { font-size: clamp(0.875rem, 0.7rem + 0.1vw, 0.9375rem); }
.service-card .svc-desc { font-size: clamp(0.9375rem, 0.7rem + 0.25vw, 1.0625rem); }
.service-card .svc-deliverables li { font-size: clamp(0.9375rem, 0.7rem + 0.25vw, 1.0625rem); }
@media (min-width: 1441px) { .service-card { padding: 1.75rem; gap: var(--space-5); } }
@media (min-width: 1921px) { .service-card { padding: var(--space-8); gap: var(--space-6); } }


/* ──── VULN CARD (FINDINGS) ──── */
.vuln-card h3 { font-size: clamp(1.0625rem, 0.73rem + 0.52vw, 1.5625rem); }
.vuln-card .vuln-asset { font-size: clamp(0.875rem, 0.74rem + 0.16vw, 1rem); }
.vuln-card .vuln-desc { font-size: clamp(0.9375rem, 0.7rem + 0.25vw, 1.0625rem); }
.vuln-card .vuln-poc summary { font-size: clamp(0.875rem, 0.7rem + 0.1vw, 0.9375rem); padding: var(--space-3) var(--space-4); }
.vuln-card .vuln-poc .poc-body { font-size: clamp(0.875rem, 0.7rem + 0.1vw, 0.9375rem); }
.vuln-card .vuln-footer { font-size: clamp(0.875rem, 0.7rem + 0.1vw, 0.9375rem); }
.vuln-card .vuln-footer-grid .vfg-label { font-size: clamp(0.875rem, 0.73rem + 0.04vw, 0.9375rem); }
.vuln-card .vuln-footer-grid .vfg-value { font-size: clamp(0.875rem, 0.74rem + 0.16vw, 1rem); }


/* ──── PROCESS FLOW ──── */
.process-flow .pf-step .pf-num { font-size: clamp(0.875rem, 0.7rem + 0.1vw, 0.9375rem); }
.process-flow .pf-step h3 { font-size: clamp(1.0625rem, 0.78rem + 0.46vw, 1.5rem); }
.process-flow .pf-step p  { font-size: clamp(0.9375rem, 0.7rem + 0.25vw, 1.0625rem); }
@media (min-width: 1921px) {
  .process-flow .pf-icon { width: 56px; height: 56px; }
  .process-flow .pf-icon svg { width: 28px; height: 28px; }
}


/* ──── FAQ ──── */
.faq-item .faq-q { font-size: clamp(0.9375rem, 0.78rem + 0.26vw, 1.25rem); }
.faq-item .faq-a { font-size: clamp(0.9375rem, 0.78rem + 0.26vw, 1.25rem); }


/* ──── EYEBROWS ──── */
.eyebrow,
.eyebrow-line,
.page-section-head .eyebrow,
.hero-eyebrow { font-size: clamp(0.8125rem, 0.78rem + 0.06vw, 0.9375rem); }


/* ──── PAGE SECTION LEAD ──── */
.page-section-lead { font-size: clamp(0.9375rem, 0.85rem + 0.21vw, 1.1875rem); max-width: 68ch; }


/* ──── COOKIE BANNER ──── */
@media (min-width: 601px) {
  .cookie-banner .cb-text { font-size: clamp(0.9375rem, 0.7rem + 0.25vw, 1rem); }
}


/* ──── BUTTONS ──── */
.btn  { font-size: clamp(0.875rem, 0.79rem + 0.1vw, 1rem); }
@media (min-width: 1441px) { .btn { height: 48px; padding: 0 var(--space-6); } }
@media (min-width: 1921px) { .btn { height: 52px; } }


/* ============================================================
   BASE
   ============================================================ */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  /* Prevent fixed-positioned off-screen elements (mobile nav drawer,
     overlays) from contributing to page scrollWidth. */
  overflow-x: hidden;
}

a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  a:not(.btn):not(.page-brand):not(.brand-mark):hover {
    color: var(--color-accent);
    text-decoration-thickness: 2px;
  }
}

/* ============================================================
   COMPONENTS
   ============================================================ */

/* ---- layout primitives ---- */
.wrapper {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 2.5rem);
}
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  z-index: var(--z-sticky);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

/* ---- accent utility ---- */
.accent { color: var(--color-accent); }

/* ---- mono prefixes ---- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.eyebrow::before { content: "// "; color: var(--color-accent); }

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: 1;
  padding: 0 var(--space-5);
  height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { text-decoration: none; }
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: var(--opacity-disabled); cursor: not-allowed; pointer-events: none;
}

.btn-primary {
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
}
/* No hover highlight — single amber accent, per design call.
   Visual affordance comes from cursor pointer + focus ring on keyboard nav. */
.btn-primary:active { transform: translateY(1px); }
.btn-primary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px var(--accent);
}

.btn-secondary {
  background: var(--color-surface-2);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
@media (hover: hover) and (pointer: fine) {
  .btn-secondary:hover {
    background: var(--color-surface-3);
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
}
@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover {
    color: var(--color-text);
    background: var(--color-surface-2);
  }
}

/* ---- BADGES ---- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-mono); font-size: clamp(0.875rem, 0.7rem + 0.1vw, 0.9375rem); font-weight: 500;
  line-height: 1; padding: 4px 8px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  letter-spacing: var(--tracking-wide); white-space: nowrap;
}
.badge-neutral { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text-muted); }

/* severity-tier badges */
.badge-sev-critical { background: var(--color-sev-critical-soft); border-color: color-mix(in srgb, var(--color-sev-critical) 30%, transparent); color: var(--color-sev-critical);}

/* ---- mobile navigation (burger + drawer) ---- */
.nav-burger {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  display: inline-flex; align-items: center; justify-content: center;
  transition:
    background 220ms cubic-bezier(0.4, 0, 0.2, 1),
    color 220ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .nav-burger:hover { background: var(--color-surface-2); }
}
.nav-burger:active { transform: scale(0.94); }
.nav-burger svg {
  width: 20px; height: 20px;
  stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none;
  overflow: visible;
}
.nav-burger svg line {
  transform-box: fill-box; transform-origin: center;
  transition:
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-burger[aria-expanded="true"] { color: var(--color-accent); }
.nav-burger[aria-expanded="true"] svg line.top    { transform: translateY(6px)  rotate(45deg); }
.nav-burger[aria-expanded="true"] svg line.middle { opacity: 0; transform: scaleX(0.4); }
.nav-burger[aria-expanded="true"] svg line.bottom { transform: translateY(-6px) rotate(-45deg); }

.nav-drawer {
  position: fixed; inset: 0 0 0 auto;
  width: min(360px, 90vw);
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
  transform: translateX(100%);
  transition:
    transform 320ms cubic-bezier(0.4, 0, 0.6, 0.6),
    visibility 0s linear 320ms;
  visibility: hidden;
  display: flex; flex-direction: column;
  z-index: var(--z-drawer);
  will-change: transform;
}
.nav-drawer[data-open="true"] {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform 480ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}
.nav-drawer .drawer-head {
  height: 56px; padding-inline: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0;
}
.nav-drawer .drawer-title {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-dim);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
}
.nav-drawer .drawer-title::before { content: "// "; color: var(--color-accent); }
.nav-drawer .drawer-close {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm); color: var(--color-text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav-drawer .drawer-close:hover { color: var(--color-text); background: var(--color-surface-2); }
}
.nav-drawer .drawer-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.nav-drawer .drawer-list { padding: var(--space-2) 0; flex: 1; overflow-y: auto; }
.nav-drawer .drawer-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-sans); font-size: var(--text-base);
  color: var(--color-text);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .nav-drawer .drawer-list a:hover { background: var(--color-surface-2); text-decoration: none; }
}
.nav-drawer .drawer-list a.is-current { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.nav-drawer .drawer-list a::after {
  content: "→"; font-family: var(--font-mono); color: var(--color-text-dim);
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav-drawer .drawer-list a:hover::after { color: var(--color-accent); transform: translateX(2px); }
}
.nav-drawer .drawer-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: var(--space-3);
  flex-shrink: 0;
}
.nav-drawer .drawer-footer .meta {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-dim); letter-spacing: var(--tracking-wide);
}
.nav-overlay {
  position: fixed; inset: 0;
  background: rgb(0 0 0 / 0.5); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition:
    opacity 320ms cubic-bezier(0.4, 0, 0.6, 0.6),
    visibility 0s linear 320ms;
  z-index: var(--z-overlay);
}
.nav-overlay[data-open="true"] {
  opacity: 1; visibility: visible;
  transition:
    opacity 480ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

/* desktop drawer behavior */
@media (min-width: 1024px) {
  body:not(:has(.page-header)) .nav-burger { display: none; }
  body:not(:has(.page-header)) .nav-drawer {
    position: static; transform: none; visibility: visible;
    width: auto; flex-direction: row;
    background: transparent; border: 0;
  }
  body:not(:has(.page-header)) .nav-drawer .drawer-head,
  body:not(:has(.page-header)) .nav-drawer .drawer-footer { display: none; }
  body:not(:has(.page-header)) .nav-drawer .drawer-list {
    display: flex; padding: 0; overflow: visible;
  }
  body:not(:has(.page-header)) .nav-drawer .drawer-list a { padding: var(--space-2) var(--space-3); }
  body:not(:has(.page-header)) .nav-drawer .drawer-list a::after { display: none; }
  body:not(:has(.page-header)) .nav-overlay { display: none; }
}

/* ---- VULNERABILITY CARD ---- */
.vuln-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
}
@media (min-width: 640px) { .vuln-card { padding: var(--space-6); } }
.vuln-card .vuln-head { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 640px) {
  .vuln-card .vuln-head { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
}
.vuln-card .vuln-meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.vuln-card h3 { font-size: var(--text-lg); font-weight: 600; color: var(--color-text); line-height: var(--leading-snug); margin-top: var(--space-1); }
.vuln-card .vuln-asset { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent); }
.vuln-card .vuln-desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-base); }
.vuln-card .vuln-poc {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.vuln-card .vuln-poc summary {
  list-style: none; cursor: pointer;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center;
  transition: color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .vuln-card .vuln-poc summary:hover { color: var(--color-text); }
}
.vuln-card .vuln-poc summary::-webkit-details-marker { display: none; }
.vuln-card .vuln-poc summary::after { content: "+"; font-size: var(--text-base); color: var(--color-accent); }
.vuln-card .vuln-poc[open] summary::after { content: "−"; }
.vuln-card .vuln-poc .poc-body {
  padding: 0 var(--space-4) var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text); line-height: var(--leading-snug);
  white-space: pre; overflow-x: auto;
}
.vuln-card .vuln-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--space-3); border-top: 1px solid var(--color-border);
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-dim);
  flex-wrap: wrap; gap: var(--space-3);
}
.vuln-card .vuln-footer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
@media (min-width: 640px) {
  .vuln-card .vuln-footer-grid { grid-template-columns: repeat(4, 1fr); }
}
.vuln-card .vuln-footer-grid .vfg-cell {
  display: flex; flex-direction: column; gap: var(--space-1);
  min-width: 0;
}
.vuln-card .vuln-footer-grid .vfg-label {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-dim);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
}
.vuln-card .vuln-footer-grid .vfg-value {
  font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- HERO PATTERN ---- */
.pattern-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
@media (min-width: 1441px) {
  .pattern-hero { padding: clamp(3rem, 6vw, 6rem) clamp(2rem, 4vw, 4rem); }
}
@media (min-width: 1921px) {
  .pattern-hero { padding: clamp(3.5rem, 6vw, 7rem) clamp(2.5rem, 4vw, 5rem); }
}
.pattern-hero .eyebrow-line {
  font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--color-text-dim);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  margin-bottom: var(--space-5);
}
.pattern-hero .eyebrow-line::before { content: "// "; color: var(--color-accent); }
.pattern-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 600;
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  max-width: 32ch; margin-bottom: var(--space-5);
  overflow-wrap: break-word;
}
@media (min-width: 1441px) {
  .pattern-hero h1 { font-size: clamp(2rem, 4.5vw, 4rem); max-width: 34ch; }
}
@media (min-width: 1921px) {
  .pattern-hero h1 { font-size: clamp(2rem, 4vw, 4.5rem); max-width: 36ch; }
}
@media (min-width: 2401px) {
  .pattern-hero h1 { font-size: clamp(2rem, 4vw, 5.5rem); max-width: 40ch; }
}
.pattern-hero h1 .accent { color: var(--color-accent); }
.pattern-hero p.lead {
  font-size: var(--text-lg); color: var(--color-text-muted);
  line-height: var(--leading-base);
  max-width: 60ch; margin-bottom: var(--space-6);
}
.pattern-hero p.lead strong { color: var(--color-text); font-weight: 500; }
@media (min-width: 1441px) {
  .pattern-hero p.lead { font-size: 1.1875rem; max-width: 64ch; }
}
@media (min-width: 1921px) {
  .pattern-hero p.lead { font-size: 1.3125rem; max-width: 68ch; }
}
@media (min-width: 2401px) {
  .pattern-hero p.lead { font-size: 1.4375rem; max-width: 72ch; }
}
.pattern-hero .cta-row {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
}

/* ---- FOOTER PATTERN ---- */
.pattern-footer {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
}
.pattern-footer.is-flush {
  border: 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2rem);
}
.pattern-footer.is-flush > .footer-grid,
.pattern-footer.is-flush > .footer-bottom {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 2.5rem);
}
.pattern-footer .footer-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8);
}
.pattern-footer .footer-brand { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .pattern-footer .footer-grid { grid-template-columns: 1.5fr repeat(3, 1fr); }
  .pattern-footer .footer-brand { grid-column: auto; }
}
.pattern-footer .footer-brand .brand-mark {
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--text-xl); color: var(--color-text);
  margin-bottom: var(--space-3);
}
.pattern-footer .footer-brand .brand-mark .accent { color: var(--color-accent); }
.pattern-footer .footer-brand p {
  font-size: var(--text-sm); color: var(--color-text-muted);
  line-height: var(--leading-base); max-width: 40ch;
}
.pattern-footer .footer-col h3 {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-normal); text-transform: uppercase;
  font-weight: 500; margin-bottom: var(--space-3);
}
.pattern-footer .footer-col h3::before {
  content: "// "; color: var(--color-accent);
}
.pattern-footer .footer-col ul {
  display: flex; flex-direction: column;
  gap: 0;
}
.pattern-footer .footer-col a {
  color: var(--color-text-muted); font-size: var(--text-sm);
  text-decoration: none;
  display: block;
  padding: 6px 0;
  line-height: var(--leading-snug);
  transition: color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pattern-footer .footer-col a:hover { color: var(--color-accent); }
}
.pattern-footer .footer-bottom {
  margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.pattern-footer .footer-bottom .legal { letter-spacing: var(--tracking-wide); }

/* ---- FEATURE GRID ---- */
.feature-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
}
@media (min-width: 640px) { .feature-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.feature {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
@media (min-width: 1441px) {
  .feature { padding: var(--space-8); gap: var(--space-5); }
}
@media (hover: hover) and (pointer: fine) {
  .feature:hover { border-color: var(--color-border-strong); }
}
.feature.is-accented {
  border-left-width: 3px;
  border-left-color: var(--color-accent);
}
@media (hover: hover) and (pointer: fine) {
  .feature.is-accented:hover { border-left-color: var(--color-accent); }
}
.feature.is-accented h3 {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-accent);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.feature .feature-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  color: var(--color-accent);
}
.feature .feature-icon svg {
  width: 20px; height: 20px; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.feature h3 { font-size: var(--text-lg); font-weight: 600; color: var(--color-text); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
.feature p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-base); }

.feature.is-icon-inline {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  row-gap: var(--space-3);
  align-items: center;
  padding: var(--space-5);
}
.feature.is-icon-inline .feature-icon {
  grid-row: 1;
  grid-column: 1;
  width: 32px; height: 32px;
}
.feature.is-icon-inline .feature-icon svg {
  width: 18px; height: 18px;
}
.feature.is-icon-inline h3 {
  grid-row: 1;
  grid-column: 2;
  font-size: var(--text-sm);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
  overflow-wrap: normal;
  word-break: normal;
}
@media (min-width: 1024px) {
  .feature.is-icon-inline h3 { font-size: var(--text-base); }
}
.feature.is-icon-inline p {
  grid-row: 2;
  grid-column: 1 / -1;
  margin: 0;
}

/* ---- SERVICE CARD ---- */
.service-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
  justify-items: center;
}
.service-grid > .service-card { width: 100%; max-width: 560px; }
@media (min-width: 1024px) {
  .service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    justify-items: stretch;
  }
  .service-grid > .service-card { max-width: none; }
}
.service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-5);
  transition: border-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .service-card:hover { border-color: var(--color-border-strong); }
}
.service-card .svc-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.service-card .svc-meta .svc-tag {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  padding: 4px 8px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.service-card .svc-meta .svc-tag.is-duration { color: var(--color-accent); }
.service-card h3 { font-size: var(--text-xl); font-weight: 600; color: var(--color-text); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
.service-card .svc-desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-base); }
.service-card .svc-deliverables {
  list-style: none;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}
.service-card .svc-deliverables li {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--color-text);
  line-height: var(--leading-base);
}
.service-card .svc-deliverables li::before {
  content: "→"; color: var(--color-accent);
  font-family: var(--font-mono); flex-shrink: 0; margin-top: 1px;
}

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.page-header-inner {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 2.5rem);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.page-header .page-brand {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-lg);
  color: var(--color-text);
  text-decoration: none;
  flex-shrink: 0;
}
.page-header .page-brand .accent { color: var(--color-accent); }
.page-header .page-nav {
  display: none;
  gap: var(--space-1);
  align-items: center;
}
.page-header .page-nav a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .page-header .page-nav a:hover {
    color: var(--color-text);
    background: var(--color-surface);
  }
}
.page-header .page-nav a.is-current {
  color: var(--color-accent);
}
.page-header .page-nav a.btn {
  color: var(--color-text-inverse);
  padding: 0 var(--space-3);
}
/* No hover background swap on header nav buttons — single amber accent. */
.page-header .page-nav a.btn-secondary {
  color: var(--color-text);
  background: var(--color-surface-2);
}
@media (hover: hover) and (pointer: fine) {
  .page-header .page-nav a.btn-secondary:hover {
    color: var(--color-accent);
    background: var(--color-surface-3);
  }
}
.page-header .page-nav .page-nav-cta {
  margin-left: var(--space-3);
}
@media (min-width: 1024px) {
  .page-header .page-nav { display: flex; }
  .page-header .nav-burger { display: none; }
}

/* ============================================================
   PAGE SECTION
   ============================================================ */
.page-section-head {
  margin-bottom: var(--space-8);
}
.page-section-head .eyebrow { margin-bottom: var(--space-3); }
.page-section-head h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin-bottom: var(--space-4);
  max-width: 44ch;
}
@media (min-width: 1441px) {
  .page-section-head h2 { font-size: clamp(1.75rem, 4vw, 3rem); }
}
@media (min-width: 1921px) {
  .page-section-head h2 { font-size: clamp(1.75rem, 4vw, 3.5rem); max-width: 48ch; }
}
@media (min-width: 2401px) {
  .page-section-head h2 { font-size: clamp(1.75rem, 4vw, 4rem); }
}
.page-section-lead {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-base);
  max-width: 60ch;
}
.page-section-lead strong { color: var(--color-text); font-weight: 500; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  padding-block: clamp(4rem, 9vw, 7rem);
  padding-inline: clamp(1rem, 3vw, 2rem);
  background: var(--color-bg);
}
.final-cta h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-5);
}
@media (min-width: 1441px) {
  .final-cta h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); max-width: 26ch; }
}
@media (min-width: 1921px) {
  .final-cta h2 { font-size: clamp(2rem, 4vw, 4.25rem); max-width: 32ch; }
}
@media (min-width: 2401px) {
  .final-cta h2 { font-size: clamp(2rem, 4vw, 5rem); max-width: 34ch; }
}
.final-cta h2 .accent { color: var(--color-accent); }
.final-cta p {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 50ch;
  margin: 0 auto var(--space-8);
  line-height: var(--leading-base);
}
@media (min-width: 1441px) {
  .final-cta p { font-size: 1.1875rem; max-width: 56ch; }
}
@media (min-width: 1921px) {
  .final-cta p { font-size: 1.3125rem; max-width: 60ch; }
}
.final-cta .cta-row {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   PROCESS FLOW
   ============================================================ */
.process-flow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) var(--space-10);
  list-style: none;
  padding: 0; margin: 0;
}
.process-flow > li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-5);
  align-items: start;
}
.process-flow .pf-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-accent);
  flex-shrink: 0;
}
.process-flow .pf-icon svg {
  width: 28px; height: 28px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.process-flow .pf-step .pf-num {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.process-flow .pf-step h3 {
  font-size: var(--text-lg);
  color: var(--color-text);
  margin-bottom: var(--space-2);
  line-height: var(--leading-tight);
}
.process-flow .pf-step p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-base);
}
@media (max-width: 768px) {
  .process-flow { grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (min-width: 1441px) {
  .process-flow { grid-template-columns: repeat(3, 1fr); gap: var(--space-10) var(--space-8); }
}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  background: var(--color-surface);
  border-top: 1px solid var(--color-accent);
  padding: var(--space-3) var(--space-4);
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform var(--dur-normal) var(--ease-out);
  box-shadow: 0 -8px 32px rgb(0 0 0 / 0.4);
}
@media (min-width: 640px) {
  .cookie-banner {
    padding: var(--space-5) var(--space-6);
    padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
  }
}
.cookie-banner[data-cb-open="true"] { transform: translateY(0); }
.cookie-banner[aria-hidden="true"]:not([data-cb-open="true"]) { display: none; }
.cookie-banner .cb-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
}
.cookie-banner .cb-text {
  flex: 1 1 280px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-base);
}
@media (min-width: 640px) {
  .cookie-banner .cb-text { font-size: var(--text-sm); }
}
.cookie-banner .cb-text strong {
  color: var(--color-text);
  font-weight: 500;
}
.cookie-banner .cb-text a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1px;
}
.cookie-banner .cb-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Settings modal */
.cb-modal {
  position: fixed; inset: 0;
  z-index: calc(var(--z-toast) + 10);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-normal) var(--ease-out), visibility 0s linear var(--dur-normal);
}
.cb-modal[data-cb-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-normal) var(--ease-out);
}
.cb-modal-backdrop {
  position: absolute; inset: 0;
  background: rgb(0 0 0 / 0.6);
  backdrop-filter: blur(2px);
}
.cb-modal-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 520px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
}
.cb-modal-card h2 {
  font-size: var(--text-xl);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.cb-modal-card .cb-modal-intro {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-base);
  margin-bottom: var(--space-5);
}
.cb-modal-card fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: flex; flex-direction: column;
  gap: var(--space-3);
}
.cb-modal-card legend { display: none; }
.cb-modal-card .cb-cat {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  align-items: start;
}
.cb-modal-card .cb-cat-info {
  display: flex; flex-direction: column;
  gap: 2px;
}
.cb-modal-card .cb-cat-name {
  font-size: var(--text-sm); font-weight: 500;
  color: var(--color-text);
}
.cb-modal-card .cb-cat-name .cb-required {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text-dim);
  margin-left: var(--space-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
.cb-modal-card .cb-cat-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-base);
}
.cb-modal-card .cb-toggle {
  position: relative;
  width: 36px; height: 20px;
  flex-shrink: 0;
}
.cb-modal-card .cb-toggle input {
  opacity: 0;
  position: absolute; inset: 0;
  margin: 0;
  cursor: pointer;
}
.cb-modal-card .cb-toggle .cb-toggle-track {
  position: absolute; inset: 0;
  background: var(--color-border-strong);
  border-radius: 10px;
  transition: background var(--dur-fast) var(--ease-out);
}
.cb-modal-card .cb-toggle .cb-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--color-text);
  border-radius: 50%;
  transition: transform var(--dur-fast) var(--ease-out);
}
.cb-modal-card .cb-toggle input:checked ~ .cb-toggle-track { background: var(--color-accent); }
.cb-modal-card .cb-toggle input:checked ~ .cb-toggle-thumb { transform: translateX(16px); background: var(--color-text-inverse); }
.cb-modal-card .cb-toggle input:disabled ~ .cb-toggle-track { opacity: var(--opacity-disabled); cursor: not-allowed; }
.cb-modal-card .cb-toggle input:focus-visible ~ .cb-toggle-track {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.cb-modal-card .cb-modal-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Mobile: compact cookie banner */
@media (max-width: 600px) {
  .cookie-banner { padding: var(--space-2) var(--space-3); }
  .cookie-banner .cb-content {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .cookie-banner .cb-text {
    font-size: 14px;
    line-height: var(--leading-snug);
    flex: 1 1 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cookie-banner .cb-actions {
    gap: var(--space-2);
    flex-wrap: nowrap;
    width: 100%;
  }
  .cookie-banner .cb-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    height: 36px;
    font-size: 14px;
    padding: 0 var(--space-2);
    white-space: nowrap;
  }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 100%;
}
.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    border-left-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
.faq-item[open] {
  border-left-color: var(--color-accent);
  background: var(--color-surface-2);
}
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  min-height: 56px;
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  transition: color var(--dur-fast) var(--ease-out);
}
.faq-item > summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
  .faq-item > summary:hover { color: var(--color-text); }
}
.faq-item > summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}
.faq-item .faq-q {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-snug);
  flex: 1 1 auto;
}
.faq-item > summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--color-accent);
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
  width: 16px;
  text-align: center;
}
.faq-item[open] > summary::after { content: "−"; }
.faq-item .faq-icon { display: none; }
.faq-item .faq-a {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-base);
}
.faq-item .faq-a p {
  margin: 0;
}
.faq-item .faq-a p + p { margin-top: var(--space-3); }
.faq-item .faq-a a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.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;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .nav-overlay { backdrop-filter: none; }
}

/* Forced-colors */
@media (forced-colors: active) {
  .btn, .vuln-card, .feature, .service-card {
    border: 1px solid CanvasText;
  }
  .btn-primary { forced-color-adjust: none; }
}

/* Tap target compliance */
.page-header .page-brand {
  position: relative;
}
.page-header .page-brand::before {
  content: '';
  position: absolute;
  inset: -10px -8px;
}
.nav-drawer .drawer-close {
  min-width: 44px;
  min-height: 44px;
}

.skip-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

@media (pointer: coarse) {
  .pattern-footer .footer-col a {
    min-height: 44px;
    display: flex;
    align-items: center;
    width: 100%;
  }
}

.cookie-banner .cb-actions button,
.cookie-banner .cb-actions a {
  min-height: 44px;
}

.cb-modal-card .cb-toggle {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
}

.pattern-hero p a,
.cookie-banner .cb-text a {
  position: relative;
}
.pattern-hero p a::before,
.cookie-banner .cb-text a::before {
  content: '';
  position: absolute;
  inset: -16px -6px;
}

/* Print styles */
@media print {
  :root {
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-surface-2: #ffffff;
    --color-text: #000000;
    --color-text-muted: #333333;
    --color-text-dim: #555555;
    --color-border: #cccccc;
    --color-border-strong: #999999;
  }
  body { background: #fff; color: #000; }

  .page-header,
  .pattern-footer,
  .cookie-banner,
  .nav-drawer,
  .nav-overlay,
  .skip-link {
    display: none !important;
  }

  a[href]:not([href^="#"])::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
    word-break: break-all;
  }

  .service-card, .vuln-card, .feature, .faq-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

  body, p {
    font-family: Georgia, "Times New Roman", serif;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   SECTION REDESIGN — #when, #deliverables, #stats use feature.is-accented
   in non-card layouts (ledger / editorial). Kept because they target
   .feature.is-accented which is whitelisted.
   ════════════════════════════════════════════════════════════════════════ */

#when .feature-grid,
#deliverables .feature-grid {
  display: block;
  counter-reset: ledger-item;
  margin-top: var(--space-6);
  max-width: 80ch;
}

#when .feature.is-accented,
#deliverables .feature.is-accented {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-left: 0;
  border-radius: 0;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 6px 24px;
  padding: 22px 0;
  counter-increment: ledger-item;
  transition: none;
}
@media (min-width: 768px) {
  #when .feature.is-accented,
  #deliverables .feature.is-accented {
    grid-template-columns: 72px 1fr;
    gap: 8px 32px;
    padding: 26px 0;
  }
}

#when .feature.is-accented:first-child,
#deliverables .feature.is-accented:first-child {
  border-top: 0;
  padding-top: 4px;
}

@media (hover: hover) and (pointer: fine) {
  #when .feature.is-accented:hover,
  #deliverables .feature.is-accented:hover {
    border-color: var(--color-border);
  }
}

#when .feature.is-accented::before,
#deliverables .feature.is-accented::before {
  content: counter(ledger-item, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--color-text-dim);
  grid-row: 1 / span 2;
  letter-spacing: 0.06em;
  align-self: start;
  padding-top: 2px;
}

#when .feature.is-accented h3,
#deliverables .feature.is-accented h3 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
  margin: 0 0 6px;
  line-height: 1.3;
}
@media (min-width: 768px) {
  #when .feature.is-accented h3,
  #deliverables .feature.is-accented h3 {
    font-size: 19px;
  }
}

#when .feature.is-accented p,
#deliverables .feature.is-accented p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 65ch;
}

#stats .feature-grid {
  display: block;
  max-width: 65ch;
  margin-top: var(--space-6);
}

#stats .feature.is-accented {
  background: transparent;
  border: 0;
  border-left: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: block;
  max-width: 65ch;
  transition: none;
}

#stats .feature.is-accented:last-child {
  margin-bottom: 0;
}

@media (hover: hover) and (pointer: fine) {
  #stats .feature.is-accented:hover {
    border-color: transparent;
  }
}

#stats .feature.is-accented h3 {
  display: inline;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
  margin: 0;
  line-height: 1.55;
}

#stats .feature.is-accented h3::after {
  content: ". ";
}

#stats .feature.is-accented p {
  display: inline;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}
} /* end @layer base */

/* ════════════════════════════════════════════════════════════════════════
   37SIGNALS-STYLE — v4 (comprehensive responsive overhaul)
   
   Goals:
   1. Mobile-first responsive (works 320 → 1920px without overflow)
   2. Pleasant typography on every viewport (fluid clamp, proper line-height)
   3. 37signals principles preserved (typography-first, opacity hierarchy,
      single font, soft surfaces, full-width content)
   4. responsive-web-design skill compliance (touch targets, skip-link,
      prefers-reduced-motion, safe areas, print, logical properties)
   5. Warm-dark palette with amber accent
   
   Architecture (mobile-first):
   - Base: mobile (no media query)
   - Extend up: @media (min-width: 480px / 768px / 1024px / 1280px / 1440px)
   - Touch targets handled via @media (pointer: coarse)
   - Hover effects gated via @media (hover: hover) and (pointer: fine)
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   FOUNDATIONS
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* Palette */
  --bg:           #0c0b08;    /* warm near-black */
  --fg:           rgba(255, 255, 255, 0.85);
  --fg-strong:    #ffffff;
  --fg-muted:     rgba(255, 255, 255, 0.55);
  --fg-faint:     rgba(255, 255, 255, 0.35);

  --accent:       #ffb000;
  --accent-2:     #ffc233;
  --accent-soft:  rgba(255, 176, 0, 0.10);

  --border:       rgba(255, 255, 255, 0.10);
  --border-strong:rgba(255, 255, 255, 0.18);
  --surface:      rgba(255, 255, 255, 0.04);
  --surface-card: rgba(255, 255, 255, 0.06);

  --danger:       #ec4343;

  /* Font — one-font policy. Geist for everything; --font-mono is an alias kept
     for legacy class names (.poc-body, .vuln-asset, .meta-id, .vfg-value etc).
     Real visual differentiation for code blocks comes from the amber accent
     treatment below, not from a typeface switch. */
  --font-sans: 'Geist', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist', system-ui, -apple-system, sans-serif;

  /* 37signals-inspired fluid type — keeps growing on wide screens.
     Floor protects readability on 320px phones; ceiling kicks in only
     at 2560px+ so 4K/5K monitors don't go absurd. */
  --t-2xs:  clamp(11px, 6px + 0.4vw,    18px);
  --t-xs:   clamp(13px, 7px + 0.5vw,    22px);
  --t-sm:   clamp(15px, 8px + 0.7vw,    28px);
  --t-base: clamp(17px, 10px + 0.8vw,   32px);
  --t-lg:   clamp(19px, 11px + 1vw,     40px);
  --t-xl:   clamp(22px, 12px + 1.4vw,   52px);
  --t-3xl:  clamp(28px, 12px + 1.5vw,   56px);   /* section h2 — was 88px, cut to keep hero primary */
  --t-4xl:  clamp(36px, 12px + 3vw,     80px);
  --t-5xl:  clamp(36px, 6px + 5vw,      96px);   /* hero h1 — floor lowered 44→36 for narrow phones, desktop unchanged (~80px @1440) */

  /* Fluid section rhythm — uniform across all sections. Gap between any two
     adjacent sections = 2 × --section-py (top of B + bottom of A). */
  --section-py:   clamp(32px, 12px + 1.5vw, 56px);
  --section-gap:  clamp(32px, 12px + 2vw, 80px);

  /* Layout — fluid padding */

  /* Override our existing tokens so base CSS uses the new palette */
  --color-bg: var(--bg);
  --color-text: var(--fg);
  --color-text-muted: var(--fg-muted);
  --color-text-dim: var(--fg-faint);
  --color-accent: var(--accent);
  --color-accent-soft: var(--accent-soft);
  --color-border: var(--border);
  --color-border-strong: var(--border-strong);
  --color-surface: var(--surface-card);
}

/* No discrete breakpoint overrides for section-py — clamp handles it. */

/* ════════════════════════════════════════════════════════════════════════
   BASE — body, headings, links
   ════════════════════════════════════════════════════════════════════════ */

html {
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.45;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* defensive — no horizontal scroll at any viewport */
}

h1, h2, h3, h4, h5, h6,
strong, b {
  color: var(--fg-strong);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-weight: 700;
}

.accent { color: var(--accent); }

/* ::selection — amber */
::selection {
  background: var(--accent);
  color: #1a1200;
}

/* ════════════════════════════════════════════════════════════════════════
   SKIP LINK — keyboard-only, slides in on focus
   ════════════════════════════════════════════════════════════════════════ */

.skip-link {
  position: fixed;
  top: -100px;
  inset-inline-start: 12px;
  background: var(--accent);
  color: #1a1200;
  padding: 12px 18px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  z-index: 999;
  transition: top 0.15s ease;
  border-radius: 4px;
}
.skip-link:focus {
  top: 12px;
  outline: 2px solid var(--fg-strong);
  outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════════
   ONE-FONT POLICY — sans everywhere except real code semantics
   ════════════════════════════════════════════════════════════════════════ */

.eyebrow, .eyebrow-line, .hero-eyebrow,
.page-section-head .eyebrow,
.pattern-footer .footer-col h3,
.stat .stat-label,
.callout .callout-mark,
.nav-drawer .drawer-title,
.pricing-card .price-name,
.badge,
.aligned-with .aligned-label,
.aligned-with .aligned-list li,
.service-card .svc-meta .svc-tag,
.service-card .svc-meta .svc-tag-muted,
.process-flow .pf-step .pf-num,
.vuln-card .vuln-footer-grid .vfg-label,
.cb-modal-card .cb-cat-name .cb-required {
  font-family: var(--font-sans);
  font-weight: 500;
}

.brand-mark, .page-brand, .pattern-footer .brand-mark {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ════════════════════════════════════════════════════════════════════════
   CODE BLOCKS — amber-accented Geist (one-font policy)
   ----------------------------------------------------------------------------
   Site uses Geist for everything, including code semantics. Visual
   differentiation comes from amber accent treatment, not from a typeface
   switch:
     · inline code refs (asset, ID, footer-grid value, severity vector)
       → amber color, tabular-nums, slight letter-spacing
     · block code (PoC body, code-block) → amber left rule, amber-tinted
       surface, tabular-nums
   `font-family: var(--font-mono)` resolves to Geist via the alias above.
   ════════════════════════════════════════════════════════════════════════ */

/* inline code refs — tabular nums + slight letter-tightening */
.vuln-card .meta-id,
.vuln-card .vfg-value,
.cve-badge,
.severity-meter .sev-vector,
.vuln-asset {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "ss01", "tnum";
  letter-spacing: -0.01em;
}

/* amber-coloured: identifiers + asset names + accent-marked status */
.vuln-card .meta-id,
.cve-badge,
.severity-meter .sev-vector,
.vuln-asset,
.vuln-card .vfg-value.is-accent {
  color: var(--accent);
}

/* ----------------------------------------------------------------------------
   Block code — surface card with optional code-head, syntax-highlighted body.
   Token spans (tk-*, tok-*) carry color; text default = neutral white.
   ---------------------------------------------------------------------------- */

/* syntax color tokens */
:root {
  --syntax-keyword:  #ff7eb6;            /* keywords, booleans, null */
  --syntax-string:   var(--accent);      /* strings, urls — amber */
  --syntax-number:   #4d9fff;            /* numbers — blue */
  --syntax-function: var(--accent-2);    /* commands, function names */
  --syntax-comment:  var(--fg-faint);    /* comments — italic, faint white */
  --syntax-operator: var(--fg-muted);    /* flags, pipes, prompts */
}

.code-block,
.poc-body {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss01";
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  overflow: hidden;
  letter-spacing: -0.005em;
}

/* code-head bar — "// lang" label + optional actions, mirrors legacy DS */
.code-block .code-head,
.poc-body  .code-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.code-block .code-lang,
.poc-body  .code-lang { font-weight: 500; }
.code-block .code-lang::before,
.poc-body  .code-lang::before { content: "// "; color: var(--accent); }

.code-block pre, .poc-body pre {
  margin: 0; padding: 14px 18px;
  overflow-x: auto;
  line-height: 1.65;
  color: var(--fg);
  white-space: pre;
  background: transparent;
}
.code-block code, .poc-body code {
  background: none; color: inherit; padding: 0;
  font-family: inherit; font-size: inherit; border-radius: 0;
}

/* syntax tokens — short tk-* (legacy) + tok-* aliases for HTML samples */
.tk-key, .tok-prop { color: var(--syntax-keyword); }
.tk-str, .tok-val  { color: var(--syntax-string); }
.tk-num            { color: var(--syntax-number); }
.tk-fn             { color: var(--syntax-function); }
.tk-op             { color: var(--syntax-operator); }
.tk-com, .tok-com  { color: var(--syntax-comment); font-style: italic; }
.tk-out            { color: var(--fg-muted); }

/* Inline `…` inside prose — amber backdrop, amber color, sharp UI feel */
:not(pre) > code {
  background: rgba(255, 176, 0, 0.10);
  color: var(--accent);
  padding: 0.05em 0.4em;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "tnum";
}

/* Tabular numbers wherever numeric metadata sits next to similar values —
   keeps columns aligned and feels engineered rather than wordy. */
.service-card .svc-meta .svc-tag,
.service-card .svc-meta .svc-tag-muted,
.process-flow .pf-step .pf-num,
.faq-q,
.poc-body,
.cvss,
.feature-grid .feature.is-accented h3::before,
.process-flow .pf-step h3::before {
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════════════
   LINKS — 37signals underline style for inline content links
   ════════════════════════════════════════════════════════════════════════ */

main p a:not(.btn),
.faq-item p a, details > p a {
  color: var(--fg-strong);
  text-decoration: underline;
  text-decoration-thickness: 0.085em;
  text-underline-offset: 0.0875em;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  transition: text-decoration-color 0.15s;
}
@media (hover: hover) and (pointer: fine) {
  main p a:not(.btn):hover {
    text-decoration-color: var(--accent);
  }
}

/* Card title links (service / feature / faq / vuln / ds-card / article cards) →
   amber, no underline. Match the un-linked h3 amber styling so wrapping a title
   in <a> doesn't break the visual. */
.service-card h3 a,
.feature-card h3 a,
.feature h3 a,
.faq-item h3 a,
.faq-item .faq-q a,
.vuln-card h3 a,
.ds-card h3 a,
.article-link {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .service-card h3 a:hover,
  .feature-card h3 a:hover,
  .feature h3 a:hover,
  .faq-item h3 a:hover,
  .faq-item .faq-q a:hover,
  .vuln-card h3 a:hover,
  .ds-card h3 a:hover,
  .article-link:hover { color: var(--accent-2); }
}
.service-card h3 a:focus-visible,
.feature-card h3 a:focus-visible,
.feature h3 a:focus-visible,
.faq-item h3 a:focus-visible,
.faq-item .faq-q a:focus-visible,
.vuln-card h3 a:focus-visible,
.ds-card h3 a:focus-visible,
.article-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Service-page hero — iconic SVG top-right (triggered by .hero-icon child)
   + tiny number bottom-right (triggered by data-svc-num attribute).
   These compose independently:
     - Sub-pages: icon only, no number
     - Top-level service pages: icon + number
   Hero text gets right-padding to clear the icon area. Decorative;
   AT sees the eyebrow line with the same number. */
.pattern-hero:has(.hero-icon) {
  position: relative;
  overflow: hidden;
  padding-right: clamp(120px, 18vw, 220px);
}
.pattern-hero .hero-icon {
  position: absolute;
  top: clamp(16px, 3vw, 40px);
  right: clamp(16px, 3vw, 40px);
  width: clamp(90px, 14vw, 160px);
  height: clamp(90px, 14vw, 160px);
  color: var(--accent);
  opacity: 0.28; /* design-critique: was 0.20 — too faint on dark bg */
  pointer-events: none;
  z-index: 0;
}
.pattern-hero .hero-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.pattern-hero[data-svc-num]::after {
  content: attr(data-svc-num);
  position: absolute;
  bottom: 12px;
  right: 18px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--accent);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  font-variant-numeric: tabular-nums;
}
.pattern-hero:has(.hero-icon) > *:not(.hero-icon) {
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .pattern-hero:has(.hero-icon) { padding-right: clamp(1.5rem, 4vw, 3rem); }
  .pattern-hero .hero-icon { opacity: 0.18; width: 80px; height: 80px; top: 12px; right: 12px; }
}

/* ----------------------------------------------------------------------------
   .is-process — numbered step cards matching .is-cards visual pattern.
   Each <li> renders as a card with amber numbered prefix on the title.
   Format: <li><strong>Title</strong><span>Body</span></li>
   ---------------------------------------------------------------------------- */
.section.is-process .process-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  counter-reset: ledger-item;
}
@media (min-width: 720px) {
  .section.is-process .process-flow {
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 12px + 0.4vw, 24px);
  }
}
.section.is-process .process-flow > li {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: clamp(20px, 12px + 0.8vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  transition: background 160ms ease;
  /* Reset the broken @layer-base 2-col 64px-icon grid layout */
  grid-template-columns: none !important;
  align-items: normal;
}
/* Counter-increment on strong (not li) — works around a cascade quirk
   where li-level increment failed to take effect against the @layer-base
   .process-flow > li rule. Increment on strong; ::before reads same value. */
.section.is-process .process-flow > li > strong {
  counter-increment: ledger-item;
}
@media (hover: hover) and (pointer: fine) {
  .section.is-process .process-flow > li:hover { background: rgba(255, 255, 255, 0.07); }
}
.section.is-process .process-flow > li > strong {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--fg-strong);
  font-size: clamp(20px, 16px + 0.5vw, 26px); /* pricing-tier */
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
  min-height: 2.4em;
}
.section.is-process .process-flow > li > strong[data-step]::before {
  content: attr(data-step) "  ";
  color: var(--accent);
  font-family: var(--font-sans);
  font-weight: 700;
  margin-inline-end: 6px;
  letter-spacing: -0.01em;
}
.section.is-process .process-flow > li > span {
  display: block;
  font-family: var(--font-sans);
  color: var(--fg);
  font-size: clamp(16px, 13px + 0.3vw, 19px); /* pricing-tier */
  line-height: 1.55;
}

/* ----------------------------------------------------------------------------
   .faq-list / .faq-item — card-style Q&A blocks, matching .is-cards rhythm.
   Each Q&A is its own card with padding + soft surface.
   Higher-specificity selectors to override the legacy @layer-base
   .faq-item { background, border, padding } rules. */
.section .faq-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.section .faq-list > .faq-item {
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  border-left: 0;
  border-radius: 8px;
  padding: clamp(20px, 12px + 0.8vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: visible;
  transition: background 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .section .faq-list > .faq-item:hover { background: rgba(255, 255, 255, 0.07); }
}
.section .faq-list > .faq-item .faq-q,
.section .faq-list > .faq-item > h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(20px, 16px + 0.5vw, 26px); /* pricing-tier — same as card h3 */
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--fg-strong);
  margin: 0;
  padding: 0;
}
.section .faq-list > .faq-item .faq-a {
  padding: 0;
  margin: 0;
}
.section .faq-list > .faq-item .faq-a p {
  font-family: var(--font-sans);
  font-size: clamp(16px, 13px + 0.3vw, 19px); /* pricing-tier */
  line-height: 1.55;
  color: var(--fg);
  margin: 0;
}
.section .faq-list > .faq-item .faq-a p + p { margin-top: 8px; }
.section .faq-list > .faq-item .faq-a a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(255, 176, 0, 0.4);
  text-underline-offset: 0.2em;
}

/* External text links in body content → amber. Header nav, footer links,
   and hero CTA buttons keep their existing color (header/footer are outside
   <main>; :not(.btn) excludes hero CTAs). */
main a[href^="http"]:not(.btn) {
  color: var(--fg);
  font-weight: 700;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  main a[href^="http"]:not(.btn):hover {
    color: var(--fg-strong);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   SECTION LAYOUT — consistent vertical rhythm
   Mobile: 64px py · Tablet: 88px · Desktop: 112px
   ════════════════════════════════════════════════════════════════════════ */

section.section,
section.pattern-hero,
section.final-cta {
  padding-block: var(--section-py);
}

/* Hero gets minimal top padding — header → hero directly */
.pattern-hero {
  padding-block: clamp(12px, 1.5vw, 24px) var(--section-py);
}

/* Safe area: bottom padding picks up env(safe-area-inset-bottom) on iPhone */
@supports (padding: max(0px)) {
  main {
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Note: .wrapper, .page-header-inner, .footer-grid all inherit
     padding-inline: clamp(1rem, 5vw, 2.5rem) from production base CSS.
     Don't add another rule on .page-header (outer) — it stacks with
     .page-header-inner padding and produces double-inset on narrow
     viewports, breaking left-edge alignment with body and footer. */
}

/* ════════════════════════════════════════════════════════════════════════
   HEADER + FOOTER — keep mostly as base CSS sets, just refine type
   ════════════════════════════════════════════════════════════════════════ */

.page-header,
.pattern-footer {
  font-family: var(--font-sans);
}

/* Footer touch targets on coarse pointer */
@media (pointer: coarse) {
  .pattern-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Header tap area: brand-mark + nav links */
@media (pointer: coarse) {
  .page-header .brand-mark,
  .page-header .page-brand,
  .page-header .nav-link,
  .page-header .nav-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   HERO — drop card chrome, pure typography
   ════════════════════════════════════════════════════════════════════════ */

.pattern-hero,
.pattern-hero .hero-card,
section.hero .hero-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  overflow: visible;
}
@media (min-width: 1441px) {
  .pattern-hero { padding: 0; }
}
@media (min-width: 1921px) {
  .pattern-hero { padding: 0; }
}

.pattern-hero .eyebrow-line,
.pattern-hero .hero-eyebrow {
  font-size: var(--t-xs);
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-bottom: 24px;
}
.pattern-hero .eyebrow-line::before,
.pattern-hero .hero-eyebrow::before {
  color: var(--accent);
}

.pattern-hero h1,
section.hero h1 {
  font-size: var(--t-5xl);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--fg-strong);
  margin: 0 0 28px;
  max-width: none;
}

.pattern-hero .lead,
section.hero p.lead {
  font-size: var(--t-lg);
  line-height: 1.4;
  color: var(--fg);
  margin: 0 0 32px;
  max-width: 36em;  /* cap reading width on desktop, full on mobile */
  font-weight: 400;
}

/* Drop specimen panel — it reads as "AI demo screenshot",
   conflicts with the typography-first approach. */
.pattern-hero .specimen-stamp { display: none; }

/* Hero stats row (4 crit · 5 hi · 5 med · 1 lo) — move from corner to meta row */
.pattern-hero .vuln-stats-strip,
.pattern-hero .hero-meta-row {
  font-size: var(--t-xs);
  color: var(--fg-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 32px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

/* Hero button row — base CSS uses .cta-row */
.pattern-hero .btn-row,
.pattern-hero .hero-actions,
.pattern-hero .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  align-items: flex-start;
}
.pattern-hero .btn {
  width: auto;
  flex: 0 0 auto;
}

/* Specimen-stamp (the "// specimen ps-2026-0042 / F-001 SSRF CRIT" panel)
   — keep it as a subtle right-aligned technical accent, mono and small.
   On mobile (<1024px) it shows the compact .ss-mob line only. */
.pattern-hero .specimen-stamp {
  font-size: var(--t-2xs);
  color: var(--fg-faint);
}
.pattern-hero .specimen-stamp .ss-crit {
  color: var(--accent);
  font-style: normal;
}

/* Aligned-with strip below buttons */
.pattern-hero .aligned-with,
.pattern-hero .aligned-with.is-marquee {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  overflow: visible;  /* override is-marquee overflow:hidden */
}
/* Kill marquee animation + mask + container query */
.pattern-hero .aligned-with .aligned-track,
.pattern-hero .aligned-with.is-marquee .aligned-track {
  display: contents;
  animation: none;
  overflow: visible;
  -webkit-mask-image: none;
          mask-image: none;
  container-type: normal;
  gap: 0;
  flex: 0 0 auto;
}
.pattern-hero .aligned-with .aligned-track .aligned-list,
.pattern-hero .aligned-with.is-marquee .aligned-track .aligned-list {
  animation: none;
  flex-wrap: wrap;
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
  transform: none;
}
/* Hide duplicate aria-hidden list completely */
.pattern-hero .aligned-with .aligned-list[aria-hidden="true"] {
  display: none;
}
.pattern-hero .aligned-with .aligned-label {
  font-size: var(--t-xs);
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  flex: 0 0 auto;
}
.pattern-hero .aligned-with .aligned-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pattern-hero .aligned-with .aligned-list li {
  font-size: var(--t-xs);
  color: var(--fg-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ════════════════════════════════════════════════════════════════════════
   SECTION HEADS — numbered prelude + tighter h2 (clear hierarchy under hero)
   ════════════════════════════════════════════════════════════════════════ */

main { /* counter-reset removed — numbering now hardcoded in HTML for max-compat */ }
main > section.section { /* counter-increment removed */ }

.section-head,
.page-section-head {
  margin-bottom: var(--section-gap);
  max-width: none;
}

/* Bigger eyebrow with section number prefix —
   gives each section a visual marker like 37signals' homepage 00.-37. list.
   Number is now hardcoded in HTML as <span class="eb-num"> for browser-compat
   reasons (CSS counter() was rendering "00" in some browsers despite proper
   counter-increment on the parent section). */
main > section.section .section-head .eyebrow {
  font-size: var(--t-sm);
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 20px;
  display: block;
}
main > section.section .section-head .eyebrow .eb-num {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-inline-end: 4px;
  font-variant-numeric: tabular-nums;
}
/* Hide the base `//` ::before — replaced by inline .eb-num span */
main > section.section .section-head .eyebrow::before {
  content: none;
  display: none;
}

/* h2 — smaller than hero h1 so primary visual stays the hero */
.section-head h2,
.page-section-head h2,
main > section.section h2 {
  font-size: var(--t-3xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  color: var(--fg-strong);
  max-width: none;
}
/* Final-CTA h2 — one tier larger than mid-section h2. Conversion moment
   deserves more weight than "yet another section". Sits between section
   h2 (--t-3xl ~50px) and hero h1 (--t-5xl ~80px). */
main > section.section#contact .section-head h2 {
  font-size: var(--t-4xl);
}

/* Lead caps at readable width on desktop */
.section-head .lead,
.page-section-head .lead,
.section-head p.lead {
  font-size: var(--t-lg);
  line-height: 1.4;
  color: var(--fg);
  margin: 0;
  max-width: 36em;
  font-weight: 400;
}

/* ════════════════════════════════════════════════════════════════════════
   BODY TEXT — opacity hierarchy
   ════════════════════════════════════════════════════════════════════════ */

main p,
.feature p, .svc-desc, .vuln-desc,
.faq-item p, details > p,
.testimonial blockquote {
  color: var(--fg);
}

/* ════════════════════════════════════════════════════════════════════════
   #when, #deliverables — inline-numbered titles, hairline list pattern.
   Pattern: "01 — Title" as h3 inline (counter-driven), description below.
   Reverted from card chrome to hairline list per user request (v11.16):
   card chrome reserved for SERVICES + OFFERINGS only.
   ════════════════════════════════════════════════════════════════════════ */

/* Ledger pattern: numbered inline-h3 + hairline rows. Used by sections
   #when, #deliverables (index.html) and #drivers, #included, #why-fixed
   (pricing.html). Add new section IDs here when adding new ledger sections. */
#when .feature-grid,
#deliverables .feature-grid,
#drivers .feature-grid,
#included .feature-grid,
#quote .feature-grid,
#worksheet .feature-grid,
#why-fixed .feature-grid,
.is-ledger .feature-grid {
  display: block;
  counter-reset: ledger-item;
  max-width: none;
}

#when .feature.is-accented,
#deliverables .feature.is-accented,
#drivers .feature.is-accented,
#included .feature.is-accented,
#quote .feature.is-accented,
#worksheet .feature.is-accented,
#why-fixed .feature.is-accented,
.is-ledger .feature.is-accented {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  display: block;
  padding: 16px 0;
  counter-increment: ledger-item;
  transition: none;
  max-width: none;
}
@media (min-width: 768px) {
  #when .feature.is-accented,
  #deliverables .feature.is-accented,
  #drivers .feature.is-accented,
  #included .feature.is-accented,
  #quote .feature.is-accented,
  #worksheet .feature.is-accented,
  #why-fixed .feature.is-accented,
  .is-ledger .feature.is-accented {
    padding: 20px 0;
  }
}

#when .feature.is-accented:first-child,
#deliverables .feature.is-accented:first-child,
#drivers .feature.is-accented:first-child,
#included .feature.is-accented:first-child,
#quote .feature.is-accented:first-child,
#worksheet .feature.is-accented:first-child,
#why-fixed .feature.is-accented:first-child,
.is-ledger .feature.is-accented:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Kill the base CSS ::before — it creates a duplicate grey number above */
#when .feature.is-accented::before,
#deliverables .feature.is-accented::before,
#drivers .feature.is-accented::before,
#included .feature.is-accented::before,
#quote .feature.is-accented::before,
#worksheet .feature.is-accented::before,
#why-fixed .feature.is-accented::before,
.is-ledger .feature.is-accented::before {
  content: none;
  display: none;
}

#when .feature.is-accented h3,
#deliverables .feature.is-accented h3,
#drivers .feature.is-accented h3,
#included .feature.is-accented h3,
#quote .feature.is-accented h3,
#worksheet .feature.is-accented h3,
#why-fixed .feature.is-accented h3,
.is-ledger .feature.is-accented h3 {
  font-family: var(--font-sans);
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--fg-strong);
  margin: 0 0 8px;
  line-height: 1.15;
  display: block;
}

/* The inline number prefix — "01" in amber before the title */
#when .feature.is-accented h3::before,
#deliverables .feature.is-accented h3::before,
#drivers .feature.is-accented h3::before,
#included .feature.is-accented h3::before,
#quote .feature.is-accented h3::before,
#worksheet .feature.is-accented h3::before,
#why-fixed .feature.is-accented h3::before,
.is-ledger .feature.is-accented h3::before {
  content: counter(ledger-item, decimal-leading-zero) "  ";
  color: var(--accent);
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-inline-end: 4px;
}

#when .feature.is-accented p,
#deliverables .feature.is-accented p,
#drivers .feature.is-accented p,
#included .feature.is-accented p,
#quote .feature.is-accented p,
#worksheet .feature.is-accented p,
#why-fixed .feature.is-accented p,
.is-ledger .feature.is-accented p {
  font-size: var(--t-base);
  line-height: 1.45;
  color: var(--fg);
  margin: 0;
  max-width: 56em;
}

/* ───────────────── Article pages ───────────────── */

/* Hero h1 on article pages: capped at --t-3xl (vs --t-5xl for landing
   heroes). Reading mode wants modest title + prominent lead, not a huge
   marquee. */
.pattern-hero .article-meta + h1,
.pattern-hero h1.article-h1,
body:has(.article-body) .pattern-hero h1 {
  font-size: var(--t-3xl);
  max-width: 22ch;
}
body:has(.article-body) .pattern-hero p.lead {
  max-width: 60ch;
}

/* ───────────────── Unified .is-cards .feature-card pattern ─────────────────
   Applies to all service pages (services/* and services/pentest/*).
   Matches the pricing-page card look: soft surface, amber numbered
   prefix on h3, uniform card layout so 6 cards in a row read as a
   calm list, not jumbled boxes of different heights. */

/* counter setup on every .is-cards section's feature-grid (generic, not
   id-bound). Existing id-bound rules above keep their counter setup;
   this just covers all the new service pages. */
.section.is-cards > .wrapper > .feature-grid {
  counter-reset: ledger-item;
}
.section.is-cards .feature-card {
  counter-increment: ledger-item;
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  border-radius: 8px;
  padding: clamp(20px, 12px + 0.8vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background 160ms ease;
  height: 100%;
}
@media (hover: hover) and (pointer: fine) {
  .section.is-cards .feature-card:hover { background: rgba(255, 255, 255, 0.07); }
}
.section.is-cards .feature-card h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(20px, 16px + 0.5vw, 26px); /* pricing-tier — matches #drivers/#types card h3 */
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--fg-strong);
  margin: 0;
  min-height: 2.4em; /* aligns 1-line and 2-line titles across the row */
  text-transform: none;
  display: block;
}
.section.is-cards .feature-card h3::before {
  content: counter(ledger-item, decimal-leading-zero) "  ";
  color: var(--accent);
  font-family: var(--font-sans);
  font-weight: 700;
  margin-inline-end: 6px;
  letter-spacing: -0.01em;
}
/* When h3 contains a link (service hub, articles index), let the link color
   inherit instead of forcing white — keeps the amber title pattern. */
.section.is-cards .feature-card h3 a {
  color: var(--accent);
}
.section.is-cards .feature-card h3 a:hover { color: var(--accent-2); }
.section.is-cards .feature-card p {
  font-family: var(--font-sans);
  font-size: clamp(16px, 13px + 0.3vw, 19px); /* pricing-tier — matches #drivers/#types card p */
  line-height: 1.55;
  color: var(--fg);
  margin: 0;
  max-width: none;
}
.section.is-cards .feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: none;
  list-style: none;
  padding: 0;
}
@media (min-width: 720px) {
  .section.is-cards .feature-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 12px + 0.4vw, 24px);
    align-items: stretch;
  }
}
/* Articles index — 3-col on wide viewports so 5 cards lay out as 3+2
   (instead of 2+2+1 with a lone-orphan bottom row). */
@media (min-width: 1100px) {
  #articles-list.is-cards .feature-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* Article meta row — author, date, read-time row beneath h1 in hero */
.article-meta {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-muted);
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 12px;
}
/* Article meta row separator dots — amber accent, not faint grey.
   Ties meta to brand without shouting. */
.article-meta .dot,
.article-card-meta .dot,
.article-featured-meta .dot,
.article-featured-foot .dot {
  color: var(--accent);
  opacity: 0.45;
}

/* ───────────────── Article body prose ─────────────────
   Single source of truth for /articles/*.html prose styling.
   Drop the per-article inline <style> block. Same rules,
   centralized — fix once, applies everywhere. */
.article-body {
  max-width: 68ch;
  margin: 0 auto;
  padding: 0 var(--content-pad);
  counter-reset: article-h2;
}
.article-body p {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--fg);
  margin: 0 0 24px;
}
.article-body h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-xl);
  line-height: 1.2;
  color: var(--fg-strong);
  margin: 48px 0 16px;
  letter-spacing: -0.015em;
  counter-increment: article-h2;
}
/* Auto-numbered h2 — amber decimal-leading-zero prefix matches the
   site-wide card pattern (services, pricing). Counter runs on every h2
   inside .article-body, so all 6 article pages render the same visual
   rhythm regardless of whether the headings are a "list of N" or a
   sectioned narrative. */
.article-body h2::before {
  content: counter(article-h2, decimal-leading-zero) "  ";
  color: var(--accent);
  font-weight: 700;
  margin-inline-end: 6px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
/* .no-num — summary h2s after a numbered list (e.g. "What to prepare" after
   the six SOC 2 examples). Skip counter, drop amber prefix so the reader
   does not mistake them for "the seventh item in the list of six". */
.article-body h2.no-num {
  counter-increment: none;
}
.article-body h2.no-num::before {
  content: none;
}
.article-body h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-lg);
  line-height: 1.3;
  color: var(--fg-strong);
  margin: 32px 0 12px;
  letter-spacing: -0.01em;
}
.article-body ul,
.article-body ol {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--fg);
  margin: 0 0 24px;
  padding-inline-start: 24px;
}
.article-body li { margin-bottom: 8px; }
.article-body li::marker { color: var(--accent); }
/* Blockquote — soft card chrome matches the site's .is-cards .feature-card
   pattern, plus the amber left border keeps the editorial pull-quote feel. */
.article-body blockquote {
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  margin: 32px 0;
  padding: clamp(16px, 12px + 0.4vw, 24px) clamp(20px, 16px + 0.4vw, 28px);
  color: var(--fg);
  font-style: italic;
  font-size: clamp(16px, 14px + 0.2vw, 18px);
  line-height: 1.55;
}
.article-body blockquote::before {
  content: "“";
  display: block;
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 2.2em;
  line-height: 0.6;
  margin-bottom: 8px;
}
.article-body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--accent);
  background: rgba(255, 176, 0, 0.10);
  padding: 0.05em 0.4em;
  border-radius: 3px;
}
.article-body strong {
  color: var(--fg-strong);
  font-weight: 600;
}

/* Articles index — filter chips above grid */
.article-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 12px;
}
.article-chips .chip {
  display: inline-flex; align-items: center;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.article-chips .chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.article-chips .chip.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* Featured article card — full-width, larger type than grid cards */
.article-featured {
  display: flex; flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 3vw, 40px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
}
.article-featured-meta,
.article-featured-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-muted);
}
.article-featured .article-meta-tag {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  padding: 2px 8px;
  border-radius: 3px;
}
.article-featured h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(24px, 1.5vw + 18px, 36px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
  margin: 0;
}
.article-featured h2 a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s ease;
}
.article-featured h2 a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}
.article-featured p.lead {
  font-family: var(--font-sans);
  font-size: clamp(15px, 0.4vw + 14px, 17px);
  color: var(--fg);
  line-height: 1.55;
  margin: 0;
  max-width: 70ch;
}

/* Per-card meta (topic · date) — above title in grid cards */
.article-card-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-muted);
  margin-bottom: 6px;
  text-transform: lowercase;
}

/* Pricing-page cards (ENGAGEMENT TYPES, WHAT'S INCLUDED, drivers, principles,
   worksheet) — bump body font size for better readability across viewports.
   Sentence-case for visual consistency with services + articles.
   Cap min-floor at 16px; ramp narrower than --t-base. */
#drivers .feature.is-accented p,
#types .feature.is-accented p,
#included .feature.is-accented p,
#principles .feature.is-accented p,
#quote .feature.is-accented p,
#worksheet .feature.is-accented p {
  font-size: clamp(16px, 13px + 0.3vw, 19px);
  line-height: 1.55;
}
#drivers .feature.is-accented h3,
#types .feature.is-accented h3,
#included .feature.is-accented h3,
#principles .feature.is-accented h3,
#quote .feature.is-accented h3,
#worksheet .feature.is-accented h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(20px, 16px + 0.5vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--fg-strong);
}

/* ════════════════════════════════════════════════════════════════════════
   #stats (WHY US) — numbered like other sections (consistent pattern)
   ════════════════════════════════════════════════════════════════════════ */

/* Metrics ledger — 4-row proof-by-numbers strip above the feature grid.
   Horizontal ledger: number left (amber, fixed width), label right (full fg).
   Hairline separators, no card chrome. */
#stats .stats-ledger,
.is-stats .stats-ledger {
  list-style: none;
  margin: 0 0 var(--section-gap, 32px);
  padding: 0;
  border-top: 1px solid var(--border);
}
#stats .stats-ledger li,
.is-stats .stats-ledger li {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
#stats .stats-ledger .stat-num,
.is-stats .stats-ledger .stat-num {
  font-family: var(--font-sans);
  font-size: clamp(36px, 3vw + 16px, 52px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 52px;
  flex-shrink: 0;
  text-align: right;
}
#stats .stats-ledger .stat-label,
.is-stats .stats-ledger .stat-label {
  font-family: var(--font-sans);
  font-size: clamp(14px, 0.5vw + 12px, 16px);
  font-weight: 400;
  color: var(--fg);
  line-height: 1.4;
}
@media (max-width: 540px) {
  #stats .stats-ledger .stat-num,
  .is-stats .stats-ledger .stat-num { font-size: 36px; min-width: 40px; }
}

#stats .feature-grid {
  display: block;
  max-width: none;
  counter-reset: why-item;
}

#stats .feature.is-accented {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 16px 0;
  display: block;
  max-width: none;
  transition: none;
  counter-increment: why-item;
}
@media (min-width: 768px) {
  #stats .feature.is-accented { padding: 20px 0; }
}
#stats .feature.is-accented:first-child {
  border-top: 0;
  padding-top: 0;
}
#stats .feature.is-accented:last-child { margin-bottom: 0; }

/* Disable any base ::before that could double-up */
#stats .feature.is-accented::before {
  content: none;
  display: none;
}

#stats .feature.is-accented h3 {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--fg-strong);
  margin: 0 0 8px;
  line-height: 1.15;
}
#stats .feature.is-accented h3::after { content: none; }

/* Amber inline number prefix — same pattern as WHEN/DELIVERABLES/PROCESS */
#stats .feature.is-accented h3::before {
  content: counter(why-item, decimal-leading-zero) "  ";
  color: var(--accent);
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-inline-end: 4px;
}

#stats .feature.is-accented p {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.45;
  color: var(--fg);
  margin: 0;
  max-width: 56em;
}

/* ════════════════════════════════════════════════════════════════════════
   #three-services (OFFERINGS) — 3-col grid like SERVICES
   ════════════════════════════════════════════════════════════════════════ */

/* Same container-query pattern as SERVICES grid. */
#three-services > .wrapper {
  container-type: inline-size;
}
#three-services .service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: none;
}
@container (min-width: 680px) {
  #three-services .service-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}
@container (min-width: 920px) {
  #three-services .service-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

/* Same 37s signup.css chrome as SERVICES — subtle surface, soft radius,
   generous padding. svc-deliverables keeps its internal border-top hairline
   as an in-card divider between description and bullet list. */
#three-services .service-card {
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  border-radius: 8px;
  padding: clamp(20px, 12px + 0.8vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background 160ms ease;
  max-width: none;
}
@media (hover: hover) and (pointer: fine) {
  #three-services .service-card:hover {
    background: rgba(255, 255, 255, 0.07);
  }
}

#three-services .service-card .svc-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
}
#three-services .service-card .svc-meta .svc-tag {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--fg-muted);
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#three-services .service-card .svc-meta .svc-tag + .svc-tag::before {
  content: "·";
  margin-inline-end: 8px;
  color: var(--fg-faint);
}

#three-services .service-card h3 {
  font-family: var(--font-sans);
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--accent);
  line-height: 1.1;
  margin: 0;
}

#three-services .service-card .svc-desc {
  font-size: var(--t-base);
  line-height: 1.45;
  color: var(--fg);
  margin: 0;
  max-width: none;
}

#three-services .service-card .svc-deliverables {
  margin: 0;
  margin-top: auto;  /* push to bottom of card → all 3 cards align deliverables row */
  padding: 14px 0 0;
  /* No border-top: card chrome's subtle background already separates the
     deliverables block visually. Hairline was sitting at different y-positions
     across the 3 cards (descriptions vary 4–6 lines), creating visual noise. */
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: none;
}
#three-services .service-card .svc-deliverables li {
  position: relative;
  padding-inline-start: 24px;
  color: var(--fg);
  font-size: var(--t-sm);
  line-height: 1.45;
}
#three-services .service-card .svc-deliverables li::before {
  content: "+";
  position: absolute;
  inset-inline-start: 0;
  color: var(--accent);
  font-weight: 600;
  font-size: 1.1em;
  top: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   #process (METHODOLOGY) — inline-numbered titles, no separate left column
   Same pattern as #when/#deliverables. Content per stage is now expanded
   so each row looks substantive, not sparse.
   ════════════════════════════════════════════════════════════════════════ */

/* #process and #quote use the new card pattern (defined in earlier
   .section.is-process rule). Old hairline-row treatment removed. */

/* Hide decorative svg icons + the old "stage 01" label —
   the inline number on h3 ::before now carries that signal. */
#process .process-flow .pf-icon,
#quote .process-flow .pf-icon,
.is-process .process-flow .pf-icon { display: none; }
#process .process-flow .pf-num,
#quote .process-flow .pf-num,
.is-process .process-flow .pf-num { display: none; }
#process .process-flow .pf-step,
#quote .process-flow .pf-step,
.is-process .process-flow .pf-step { display: block; }

#process .process-flow .pf-step h3,
#quote .process-flow .pf-step h3,
.is-process .process-flow .pf-step h3 {
  font-family: var(--font-sans);
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--fg-strong);
  margin: 0 0 8px;
  line-height: 1.15;
  display: block;
}
/* Counter setup — was missing, all titles rendered "00". Reset on the
   .process-flow container, increment on each <li>. */
#process .process-flow,
#quote .process-flow,
.is-process .process-flow {
  counter-reset: stage-counter;
}
#process .process-flow > li,
#quote .process-flow > li,
.is-process .process-flow > li {
  counter-increment: stage-counter;
}
/* Amber inline number prefix */
#process .process-flow .pf-step h3::before,
#quote .process-flow .pf-step h3::before,
.is-process .process-flow .pf-step h3::before {
  content: counter(stage-counter, decimal-leading-zero) "  ";
  color: var(--accent);
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-inline-end: 4px;
}

#process .process-flow .pf-step p,
#quote .process-flow .pf-step p,
.is-process .process-flow .pf-step p {
  font-size: var(--t-base);
  line-height: 1.45;
  color: var(--fg);
  margin: 0;
  max-width: 56em;
}

/* ════════════════════════════════════════════════════════════════════════
   #services (9 CAPABILITIES) — responsive 1/2/3-col with bigger icons
   ════════════════════════════════════════════════════════════════════════ */

/* Container query: grid adapts to its parent wrapper's width, not viewport.
   container-type goes on the WRAPPER (the containing block), and @container
   rules apply to the grid DESCENDANT — an element cannot be its own container.
   Breakpoints: wrapper >=680px → 2-col, wrapper >=920px → 3-col. */
#services > .wrapper {
  container-type: inline-size;
}
#services .feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: none;
  counter-reset: cap-counter;
}
@container (min-width: 680px) {
  #services .feature-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}
@container (min-width: 920px) {
  #services .feature-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

/* 37s signup.css paradigm: rgba(white, 0.08) background, soft radius,
   generous internal padding. Cards stand apart visually via background,
   not hairlines — no more :first-child / nth-child border resets needed. */
#services .feature.is-icon-inline {
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  border-radius: 8px;
  padding: clamp(20px, 12px + 0.8vw, 32px);
  display: block;
  counter-increment: cap-counter;
  transition: background 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  #services .feature.is-icon-inline:hover {
    background: rgba(255, 255, 255, 0.07);
  }
}

#services .feature.is-icon-inline .feature-icon {
  display: none;  /* icons removed per design call */
}

#services .feature.is-icon-inline h3 {
  font-family: var(--font-sans);
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--accent);
  margin: 0 0 8px;
  line-height: 1.15;
}

#services .feature.is-icon-inline p {
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--fg);
  margin: 0;
  max-width: none;
}

/* ════════════════════════════════════════════════════════════════════════
   VULN CARD — soft surface, no left stripe acid
   ════════════════════════════════════════════════════════════════════════ */

.vuln-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-left: 4px solid var(--danger);
  border-radius: 0;
  padding-block: clamp(20px, 12px + 0.6vw, 28px);
  padding-inline-start: clamp(16px, 8px + 0.6vw, 24px);
}
.vuln-card h3 {
  font-size: var(--t-xl);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.vuln-card .vuln-desc {
  font-size: var(--t-base);
  line-height: 1.45;
  color: var(--fg);
  max-width: none;
}

/* ════════════════════════════════════════════════════════════════════════
   FAQ — typography focused, touch targets
   ════════════════════════════════════════════════════════════════════════ */

.faq-item summary,
.faq-item summary > * {
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg-strong);
}
.faq-item p, details > p {
  font-size: var(--t-base);
  line-height: 1.45;
  color: var(--fg);
  max-width: none;
}
@media (pointer: coarse) {
  .faq-item summary {
    min-height: 44px;
    padding-block: 8px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   CTA
   ════════════════════════════════════════════════════════════════════════ */

.final-cta h2 {
  font-size: var(--t-3xl);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.final-cta p {
  font-size: var(--t-lg);
  line-height: 1.4;
  color: var(--fg);
  max-width: none;
}

/* ════════════════════════════════════════════════════════════════════════
   BUTTONS — touch-friendly
   ════════════════════════════════════════════════════════════════════════ */

.btn {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  padding: 14px 24px;
  min-height: 44px;
  letter-spacing: 0;
  border-radius: 6px;
}

/* ════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY — prefers-reduced-motion + prefers-contrast
   ════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   PRINT — clean B&W, hide chrome
   ════════════════════════════════════════════════════════════════════════ */

@media print {
  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }
  .page-header,
  .pattern-footer,
  .cookie-banner,
  .btn,
  .skip-link {
    display: none !important;
  }
  section {
    padding-block: 24pt !important;
    page-break-inside: avoid;
  }
  h1, h2, h3, h4, h5, h6,
  .accent {
    color: #000 !important;
  }
  .vuln-card {
    background: #f4f4f4 !important;
    border: 1pt solid #ccc !important;
    border-left: 3pt solid #ec4343 !important;
  }
  .feature, .service-card, .vuln-card {
    page-break-inside: avoid;
  }
  /* Append URL after each link so the printed page is useful */
  a[href^="http"]::after,
  a[href^="mailto"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   HEADER + FOOTER — 37signals plain-text treatment
   No button chrome on nav. Plain text links, white, underline on hover.
   Footer flattens to single horizontal wrap row of links.
   ════════════════════════════════════════════════════════════════════════ */

/* HEADER NAV — only visible on desktop (≥1024px). Burger handles mobile. */
@media (min-width: 1024px) {
  .page-header .page-nav {
    display: flex;
    align-items: center;
    gap: 28px;
  }
}
.page-header .page-nav a {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--fg-strong);
  text-decoration: none;
  letter-spacing: -0.005em;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  transition: opacity 0.15s;
}
@media (hover: hover) and (pointer: fine) {
  .page-header .page-nav a:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.085em;
    text-underline-offset: 0.25em;
  }
}

/* Restore amber accent on "Book a call" CTA — single visual emphasis in nav */
.page-header .page-nav .page-nav-cta,
.page-header .page-nav a.btn,
.page-header .page-nav a.btn-primary,
.page-header .page-nav a.page-nav-cta {
  background: var(--accent);
  color: #1a1200;
  border: 0;
  box-shadow: none;
  padding: 8px 16px;
  font-weight: 600;
  font-size: var(--t-sm);
  min-height: 0;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
/* No hover highlight on header CTA button — single amber accent, per design call. */

/* Brand stays as wordmark, no other style change beyond earlier */
.page-header .page-brand {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-base);
  letter-spacing: -0.02em;
}

/* Burger touch target on mobile */
@media (pointer: coarse) {
  .nav-burger {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   BRACKET BURGER — [ ≡ ] / [ × ]
   The brackets echo the brand wordmark "pentest [systems]" — same shape
   language. Dashes in the middle morph to an X on open. Brackets stay
   put through the animation so the geometry reads as a single bracketed
   token throughout (open and closed).
   ════════════════════════════════════════════════════════════════════════ */

.nav-burger.is-bracket svg {
  width: 28px;
  height: 24px;
}
.nav-burger.is-bracket svg .br-left,
.nav-burger.is-bracket svg .br-right {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.nav-burger.is-bracket svg line {
  /* Three vertical bars ||| inside the brackets, all visible by default.
     On open: outer two rotate to cross, middle fades. */
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Default: all three bars visible, no transform */
.nav-burger.is-bracket svg line.top,
.nav-burger.is-bracket svg line.middle,
.nav-burger.is-bracket svg line.bottom {
  opacity: 1;
  transform: none;
}

/* Open state: amber brackets, outer bars rotate to ×, middle fades */
.nav-burger.is-bracket[aria-expanded="true"] {
  color: var(--accent);
}
.nav-burger.is-bracket[aria-expanded="true"] svg line.top {
  /* Was at x=11 (left bar); rotate 45° around its center to form left diagonal of × */
  transform: rotate(45deg) translateX(3px);
}
.nav-burger.is-bracket[aria-expanded="true"] svg line.middle {
  opacity: 0;
}
.nav-burger.is-bracket[aria-expanded="true"] svg line.bottom {
  /* Was at x=17 (right bar); rotate -45° around center to form right diagonal */
  transform: rotate(-45deg) translateX(-3px);
}

/* DRAWER — section headings + dividers between groups */
.nav-drawer .drawer-divider {
  height: 1px;
  background: var(--border);
  margin: 12px 20px;
}
/* ════════════════════════════════════════════════════════════════════════
   DRAWER COMPACT MODE — fit 19 links + 3 groups + 2 dividers + header/footer
   into one mobile fold (iPhone 16 Pro 852px) without scroll.
   ════════════════════════════════════════════════════════════════════════ */

.nav-drawer .drawer-list {
  padding: 4px 0;  /* was --space-2 */
}
.nav-drawer .drawer-list a {
  padding: 8px 16px;  /* horizontal 16 instead of 20, gives links more room */
  font-size: var(--t-sm);  /* was --text-base */
  line-height: 1.3;
  /* Base CSS uses justify-content: space-between with an arrow ::after —
     remove that wide gap, keep arrow tight against the link text. */
  justify-content: flex-start;
  gap: 8px;
}
.nav-drawer .drawer-list a::after {
  /* Push arrow to right edge naturally via margin-left auto */
  margin-left: auto;
}
.nav-drawer .drawer-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 16px;
}
.nav-drawer .drawer-group {
  display: block;
  padding: 8px 16px 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}
/* Drawer header (menu label + close button) — tighten too */
.nav-drawer .drawer-head {
  padding: 12px 16px 8px;
}
.nav-drawer .drawer-footer {
  padding: 14px 16px;
  gap: 8px;
}

/* ════════════════════════════════════════════════════════════════════════
   DRAWER CTA — single primary action, drawer-native styling
   Outline-style amber link with right-arrow; hover inverts to filled.
   Matches drawer-list link rhythm (text + ::after arrow), but stands out
   via amber border and 700-weight type so it reads as the primary action.
   ════════════════════════════════════════════════════════════════════════ */

.nav-drawer .drawer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 4px;
  text-decoration: none;
  transition:
    background 200ms cubic-bezier(0.4, 0, 0.2, 1),
    color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-drawer .drawer-cta::after {
  content: "→";
  font-family: var(--font-sans);
  font-weight: 500;
  color: currentColor;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .nav-drawer .drawer-cta:hover,
  .nav-drawer .drawer-cta:focus-visible {
    background: var(--accent);
    color: #1a1200;  /* dark amber-shaded text on solid bg, matches hero btn */
  }
}
@media (hover: hover) and (pointer: fine) {
  .nav-drawer .drawer-cta:hover::after {
    transform: translateX(3px);
  }
}

/* Email + assurance — single mono-mute line under CTA, no bullet div */
.nav-drawer .drawer-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  line-height: 1.4;
  padding: 0 2px;  /* tiny inset for optical alignment with CTA */
}

/* ════════════════════════════════════════════════════════════════════════
   FOOTER — 2-column flex: brand block (left) + links container (right).
   Links wrap WITHIN the right column so an overflowing link lands at the
   left edge of the links column (= column of "Penetration testing" link 1),
   not at the page-left edge.
   ════════════════════════════════════════════════════════════════════════ */

.pattern-footer {
  background: transparent;
  border-top: 1px solid var(--border);
  padding-block: clamp(24px, 10px + 1.2vw, 56px);
}

.pattern-footer .footer-grid {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px clamp(32px, 16px + 1.5vw, 64px);
  grid-template-columns: none;
  /* max-width: var(--content-width) and padding-inline come from base CSS
     .pattern-footer.is-flush > .footer-grid — kept to match header brand
     and section .wrapper left/right edges exactly. */
}

/* LEFT — brand block. Wordmark only (no description/copyright). */
.pattern-footer .footer-brand {
  flex: 0 0 auto;
  margin: 0;
  min-width: 0;
}
.pattern-footer .footer-brand .brand-mark {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-base);
  letter-spacing: -0.02em;
  color: var(--fg-strong);
  margin: 0;
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.2);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
/* Narrow viewport: brand block takes full footer row so addresses wrap below */
@container (max-width: 599px) {
  .pattern-footer .footer-brand {
    flex-basis: 100%;
  }
}

/* RIGHT — two office addresses (US + PL).
   Compact column layout on mobile, side-by-side on tablet+. */
.pattern-footer .footer-addresses {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
}
@container (min-width: 600px) {
  .pattern-footer .footer-addresses {
    grid-template-columns: auto auto;
    gap: 0 clamp(20px, 14px + 0.5vw, 40px);
    justify-content: end;
    margin-left: auto;
  }
}
.pattern-footer .footer-addresses li {
  display: block;
}
.pattern-footer .footer-addresses address {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-style: normal;
  line-height: 1.5;
  color: var(--fg-muted);
  text-align: end;
}
/* Mobile: addresses stacked under brand, left-aligned to keep readable rhythm */
@container (max-width: 599px) {
  .pattern-footer .footer-addresses address {
    text-align: start;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   #operator — lead operator profile card (anti-marketing transparency block)
   Hairline meta-grid (name / years / CVEs / based / certs / prior) +
   bio paragraph. Same restraint as DELIVERABLES list pattern.
   ════════════════════════════════════════════════════════════════════════ */

#operator .operator-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  max-width: none;
}
#operator .op-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 600px) {
  #operator .op-meta {
    grid-template-columns: minmax(180px, 1fr) 3fr;
    gap: 24px;
    align-items: baseline;
    padding: 16px 0;
  }
}
#operator .op-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}
#operator .op-value {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--fg-strong);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
#operator .op-bio {
  padding: 20px 0 4px;
  border-bottom: 0;
}
#operator .op-bio p {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--fg);
  margin: 0 0 12px;
  max-width: 56em;
}
#operator .op-bio p:last-child {
  margin-bottom: 0;
}
#operator .op-links {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--fg-muted);
}
#operator .op-links a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
}
@media (hover: hover) and (pointer: fine) {
  #operator .op-links a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   OFFERINGS — emphasize duration tags (2-4 WEEKS, 4-8 WEEKS, MONTHLY)
   ════════════════════════════════════════════════════════════════════════ */
#three-services .service-card .svc-meta .svc-tag.is-duration {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ════════════════════════════════════════════════════════════════════════
   FAQ — strip card chrome + amber-left-on-open. 37s-style minimal accordion.
   Hairline above each item, plain text question, + glyph that flips to −.
   ════════════════════════════════════════════════════════════════════════ */
.faq-item {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  margin: 0;
}
.faq-item:first-of-type {
  border-top: 0;
}
/* Critical: drop the amber-left + background highlight on open */
.faq-item[open] {
  background: transparent;
  border-left: 0;
  border-left-color: transparent;
}

.faq-item > summary {
  padding: 12px 0;
  min-height: 44px;
  cursor: pointer;
  background: transparent;
  align-items: center;
}
@media (hover: hover) and (pointer: fine) {
  .faq-item > summary:hover {
    background: transparent;
  }
}
.faq-item > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.faq-item .faq-q {
  font-family: var(--font-sans);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--fg-strong);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
/* + / − toggle — rebuilt from .faq-icon span (base CSS draws via summary::after
   with width: 16px and font-size: var(--text-xl), which clips at our --t-xl
   scale). We hide the base ::after and use the .faq-icon span instead. */
.faq-item > summary::after {
  display: none;
}
.faq-item .faq-icon {
  display: inline-block;
  position: relative;
  flex: 0 0 auto;
  inline-size: 14px;
  block-size: 14px;
  margin-inline-start: 16px;
  color: var(--accent);
  transition: color 0.15s ease;
}
.faq-item .faq-icon::before,
.faq-item .faq-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transition: transform 0.2s ease;
}
.faq-item .faq-icon::before {
  inline-size: 14px;
  block-size: 2px;
  transform: translate(-50%, -50%);
}
.faq-item .faq-icon::after {
  inline-size: 2px;
  block-size: 14px;
  transform: translate(-50%, -50%);
}
.faq-item[open] .faq-icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}
@media (hover: hover) and (pointer: fine) {
  .faq-item[open] .faq-icon,
  .faq-item > summary:hover .faq-icon {
    color: var(--accent-2);
  }
}
.faq-item .faq-a {
  padding: 0 0 24px;
  max-width: 56em;
}
.faq-item .faq-a p {
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--fg);
  margin: 0;
}

/* Cookie modal: title was <h2>, now <div role=heading> to keep it out of
   document outline. Restore the visual properties the production .cb-modal-card h2
   rule used to provide. */
.cb-modal-card .cb-modal-title {
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
  line-height: 1.2;
  margin: 0 0 var(--space-2);
}

/* Inline button-as-link inside the banner copy (opens settings modal).
   Styled as a regular text link so it reads as part of the sentence. */
.cb-inline-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .cb-inline-link:hover {
    color: var(--accent-2, var(--accent));
  }
}

/* Modal: rights paragraph — small mono-meta block listing GDPR + CCPA rights */
.cb-modal-card .cb-modal-rights {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.cb-modal-card .cb-modal-rights strong {
  color: var(--fg-strong);
  font-weight: 700;
}
.cb-modal-card .cb-modal-rights a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .cb-modal-card .cb-modal-rights a:hover {
    color: var(--accent);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE QUIRKS RESET (responsive-web-design skill compliance)
   ════════════════════════════════════════════════════════════════════════ */

/* iOS Safari tap highlight removal (default teal flash on tap) */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Long URL / word break protection — break-word preserves hyphenation
   on regular words and only breaks unbreakable strings (long URLs). */
body, p, a, li {
  overflow-wrap: break-word;
  word-break: normal;
}
h1, h2, h3 {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

/* iOS form input zoom prevention (inputs <16px trigger autozoom) */
input:not([type="hidden"]),
textarea,
select {
  font-size: max(1rem, 16px);
}

/* Flex/grid sizing protection — children that can't shrink cause overflow */
.wrapper > *,
main > section.section > .wrapper {
  min-width: 0;
}

/* dvh fallback for future full-height components — declared globally
   so any future hero/modal using 100vh gets the modern unit */
@supports (height: 100dvh) {
  .full-height,
  .modal-fullscreen {
    height: 100dvh;
  }
}

/* Focus-visible — explicit ring for keyboard navigation */
.faq-item > summary:focus-visible,
.btn:focus-visible,
.page-nav a:focus-visible,
.nav-burger:focus-visible,
.drawer-close:focus-visible,
.drawer-list a:focus-visible,
.skip-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ════════════════════════════════════════════════════════════════════════
   HERO + SECTION WRAPPER GEOMETRY (ported from inline <style>, now centralised)
   ════════════════════════════════════════════════════════════════════════ */

/* Section wrapper padding matches the production .wrapper exactly
   (clamp(1rem, 5vw, 2.5rem) → 40px max), so header brand and section
   content share the same inline edge. */
.section .wrapper {
  padding-inline: clamp(1rem, 5vw, 2.5rem);
}
.section-head .eyebrow { margin-bottom: var(--space-3); }

/* Baseline .section padding + bottom hairline (preview uses .section,
   production uses .page-section — preview ships its own rule). */
main > section.section {
  padding-block: var(--section-py);
  border-bottom: 1px solid var(--border);
}
main > section.section:last-of-type { border-bottom: 0; }

/* Hero outer wrapper. Inherits the same max-width / padding-inline as
   .page-header-inner, .wrapper, and .footer-grid → all surfaces align
   on left/right edges across every viewport tier. */
.hero-section {
  padding: clamp(12px, 1vw, 24px) clamp(1rem, 5vw, 2.5rem) 0;
  max-width: var(--content-width);
  margin-inline: auto;
}

/* Feature-grid baseline overridden per-section above, but #services and
   #deliverables still rely on this. Mobile 1 col, tablet 2 col, desktop 3. */
.feature-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .feature-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════════════
   .is-cards modifier — soft-surface cards (like #services) for sections
   that previously rendered as hairline ledger rows. Used by index.html
   sections 03-06 (#deliverables, #process, #stats, #when). Compound with
   section ID for specificity to beat existing #ID-prefixed ledger rules.
   Numbered amber title prefix preserved (counter on h3::before).
   ════════════════════════════════════════════════════════════════════════ */

#deliverables.is-cards > .wrapper,
#process.is-cards > .wrapper,
#stats.is-cards > .wrapper,
#when.is-cards > .wrapper,
#principles.is-cards > .wrapper,
#drivers.is-cards > .wrapper,
#types.is-cards > .wrapper,
#included.is-cards > .wrapper,
#worksheet.is-cards > .wrapper,
#quote.is-cards > .wrapper {
  container-type: inline-size;
}

/* Container — grid layout (matches #services 1/2/3-col container query) */
#deliverables.is-cards .feature-grid,
#stats.is-cards .feature-grid,
#when.is-cards .feature-grid,
#principles.is-cards .feature-grid,
#drivers.is-cards .feature-grid,
#types.is-cards .feature-grid,
#included.is-cards .feature-grid,
#worksheet.is-cards .feature-grid,
#process.is-cards .process-flow,
#quote.is-cards .feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  list-style: none;
  padding: 0;
  max-width: none;
}
@container (min-width: 560px) {
  #deliverables.is-cards .feature-grid,
  #stats.is-cards .feature-grid,
  #when.is-cards .feature-grid,
  #principles.is-cards .feature-grid,
  #drivers.is-cards .feature-grid,
  #types.is-cards .feature-grid,
  #included.is-cards .feature-grid,
  #worksheet.is-cards .feature-grid,
  #process.is-cards .process-flow,
  #quote.is-cards .feature-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 12px + 0.4vw, 24px);
    align-items: stretch;
  }
}

/* Card item — soft surface, rounded, padded; flex column for uniform layout
   regardless of title/content length. Cards in same row stretch to row height
   via grid; flex column aligns title at top, content fills below. */
#deliverables.is-cards .feature.is-accented,
#stats.is-cards .feature.is-accented,
#when.is-cards .feature.is-accented,
#principles.is-cards .feature.is-accented,
#drivers.is-cards .feature.is-accented,
#types.is-cards .feature.is-accented,
#included.is-cards .feature.is-accented,
#worksheet.is-cards .feature.is-accented,
#process.is-cards .process-flow > li,
#quote.is-cards .feature.is-accented {
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  border-top: 0;
  border-radius: 8px;
  padding: clamp(20px, 12px + 0.8vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background 160ms ease;
  max-width: none;
  height: 100%;
}

/* Title reserves 2 lines so 1-line and 2-line titles align across cards.
   2.3em = 2 lines × 1.15 line-height, font-size = --t-xl. */
#deliverables.is-cards .feature.is-accented h3,
#stats.is-cards .feature.is-accented h3,
#when.is-cards .feature.is-accented h3,
#principles.is-cards .feature.is-accented h3,
#drivers.is-cards .feature.is-accented h3,
#types.is-cards .feature.is-accented h3,
#included.is-cards .feature.is-accented h3,
#worksheet.is-cards .feature.is-accented h3,
#process.is-cards .process-flow .pf-step h3,
#quote.is-cards .feature.is-accented h3 {
  min-height: 2.3em;
  margin: 0;
}
#deliverables.is-cards .feature.is-accented:first-child,
#stats.is-cards .feature.is-accented:first-child,
#when.is-cards .feature.is-accented:first-child,
#principles.is-cards .feature.is-accented:first-child,
#drivers.is-cards .feature.is-accented:first-child,
#types.is-cards .feature.is-accented:first-child,
#included.is-cards .feature.is-accented:first-child,
#worksheet.is-cards .feature.is-accented:first-child,
#process.is-cards .process-flow > li:first-child,
#quote.is-cards .feature.is-accented:first-child {
  border-top: 0;
  padding: clamp(20px, 12px + 0.8vw, 32px);
}
@media (hover: hover) and (pointer: fine) {
  #deliverables.is-cards .feature.is-accented:hover,
  #stats.is-cards .feature.is-accented:hover,
  #when.is-cards .feature.is-accented:hover,
  #principles.is-cards .feature.is-accented:hover,
  #drivers.is-cards .feature.is-accented:hover,
  #types.is-cards .feature.is-accented:hover,
  #included.is-cards .feature.is-accented:hover,
  #worksheet.is-cards .feature.is-accented:hover,
  #process.is-cards .process-flow > li:hover,
  #quote.is-cards .feature.is-accented:hover {
    background: rgba(255, 255, 255, 0.07);
  }
}

/* Hide process-flow icons + "stage 01" label — title carries the number */
#process.is-cards .pf-icon,
#process.is-cards .pf-num,
#quote.is-cards .pf-icon,
#quote.is-cards .pf-num { display: none; }

/* .pf-step inside process-flow > li (which is flex column) — fill width, no max */
#process.is-cards .pf-step,
#quote.is-cards .pf-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: none;
  flex: 1;
}
/* h3 inside .pf-step gets the same min-height treatment as ledger card titles */
#process.is-cards .pf-step h3 {
  margin: 0;
}
#process.is-cards .pf-step p {
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE FIXES — FINDING-001/002/004/005 from /design-review 2026-05-14
   ════════════════════════════════════════════════════════════════════════ */

/* FINDING-001 + 004: narrow-mobile hero — relax letter-spacing, stack CTAs vertically.
   !important on cta-row direction + btn width because overrides upstream lock these. */
@media (max-width: 480px) {
  .pattern-hero h1,
  section.hero h1 {
    letter-spacing: -0.02em;
  }
  .pattern-hero .cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .pattern-hero .btn {
    width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
}

/* FINDING-002: stats-ledger 2-col earlier (was @media 600 → now 400) so 4 stats
   become 2x2 on narrow mobile instead of 1-col tall stack. Uses @media to match
   existing stats-ledger rules (which are @media-based, not @container). */
@media (min-width: 400px) {
  #stats .stats-ledger,
  .is-stats .stats-ledger {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 24px;
  }
  #stats .stats-ledger li,
  .is-stats .stats-ledger li {
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
  }
  #stats .stats-ledger li:nth-last-child(-n+2),
  .is-stats .stats-ledger li:nth-last-child(-n+2) {
    border-bottom: 0;
  }
}

/* FINDING-005: email link in footer — subtle hover affordance.
   Was no hover rule at all (ambiguous clickability). */
@media (hover: hover) and (pointer: fine) {
  .pattern-footer .footer-brand .brand-mark:hover {
    color: var(--accent);
  }
  .pattern-footer .footer-brand .brand-mark:hover .accent {
    color: var(--accent-2);
  }
}

/* FINDING (priority #2): active page indicator on header nav.
   Existing .is-current sets only amber color (ambiguous against accents elsewhere).
   Add underline marker for clear wayfinding. */
.page-header .page-nav a.is-current,
.page-header .page-nav a[aria-current="page"] {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}