/* ==========================================================================
   TrustLayer website - design system
   Evolved brand: dark-first, teal-led (off blue), Sora display type.
   Every colour and size is defined once here, then reused everywhere.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Onest:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   1. TOKENS
   Change a value here and it updates across the whole site.
   -------------------------------------------------------------------------- */
:root {
  /* Base */
  --bg:          #0B0F12;   /* warm near-black, the page base */
  --surface:     #141A20;   /* raised dark surfaces */

  /* Accents */
  --teal:        #00C6A2;   /* PRIMARY accent and CTA. The hero colour. */
  --teal-deep:   #009E82;   /* hover and pressed */
  --coral:       #FF6A3D;   /* sparing warm accent, never a large fill */
  --alert:       #E63946;   /* RESERVED: blocked or alert states only */

  /* Text */
  --text:        #EEF3F6;   /* near-white */
  --muted:       #8695A2;

  /* Light panels */
  --panel:       #FFFFFF;
  --ink:         #0B1620;   /* dark text on light panels */
  --ink-muted:   #566370;
  --card-light:  #EEF1F5;   /* testimonial card fill */

  /* Dark gradient card */
  --grad-card:   radial-gradient(120% 120% at 85% 12%, #0F3A34 0%, #0B1416 62%);

  /* Type */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;

  /* Shape and space */
  --r-card:   18px;
  --r-panel:  38px;
  --r-pill:   999px;
  --maxw:     1180px;
  --pad-y:    clamp(64px, 8vw, 80px);
  --gut:      clamp(20px, 4vw, 32px);
}

/* --------------------------------------------------------------------------
   2. RESET AND BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; }
p.lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--muted); max-width: 62ch; }

a { color: inherit; text-decoration: none; }

img, svg { max-width: 100%; display: block; }

::selection { background: var(--teal); color: var(--bg); }

/* --------------------------------------------------------------------------
   3. LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: var(--pad-y); position: relative; }

/* A large white rounded panel floating on the dark base.
   This alternation of dark and white-panel is the signature rhythm. */
.panel {
  background: var(--panel);
  color: var(--ink);
  border-radius: var(--r-panel);
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
}
.panel h2, .panel h3, .panel h4 { color: var(--ink); }
.panel p, .panel p.lead { color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   4. SECTION INTRO (centred: muted label with a teal dot, then a big heading)
   -------------------------------------------------------------------------- */
.intro { text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: clamp(36px, 5vw, 56px); }
.intro p.lead { margin-inline: auto; }

.label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-bottom: 1.1em;
}
.label::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
  flex: none;
}

/* --------------------------------------------------------------------------
   5. BUTTONS AND LINKS
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.97rem;
  border-radius: var(--r-pill);
  padding: 0.82em 1.5em;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--teal); color: #06231D; }
.btn-primary:hover { background: var(--teal-deep); }

.btn-ghost { border-color: rgba(238,243,246,0.28); color: var(--text); }
.btn-ghost:hover { border-color: var(--text); }

/* Ghost button sitting on a white panel */
.panel .btn-ghost { border-color: rgba(11,22,32,0.22); color: var(--ink); }
.panel .btn-ghost:hover { border-color: var(--ink); }

.link-chevron {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--text);
}
.link-chevron::after { content: "\203A"; font-size: 1.25em; line-height: 1; transition: transform 0.18s ease; }
.link-chevron:hover::after { transform: translateX(3px); }
.panel .link-chevron { color: var(--ink); }

/* --------------------------------------------------------------------------
   6. UTILITY BAR AND NAVIGATION
   -------------------------------------------------------------------------- */
.utility {
  border-bottom: 1px solid rgba(238,243,246,0.08);
  font-size: 0.82rem;
  color: var(--muted);
}
.utility .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: 16px; }
.utility a:hover { color: var(--text); }

.nav-outer {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11,15,18,0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(238,243,246,0.08);
}
.nav { display: flex; align-items: center; gap: 28px; min-height: 72px; }

.brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.22rem;
  letter-spacing: -0.03em;
  margin-right: auto;
  display: inline-flex; align-items: center; gap: 0.5em;
}
.brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); }

.nav-links { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links > li { position: relative; }
.nav-links > li > a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.7em 0.9em;
  display: inline-block;
  color: var(--text);
  border-radius: 10px;
}
.nav-links > li > a:hover { background: rgba(238,243,246,0.06); }

/* Mega dropdown */
.mega {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 300px;
  background: var(--surface);
  border: 1px solid rgba(238,243,246,0.1);
  border-radius: var(--r-card);
  padding: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.nav-links > li:hover .mega,
.nav-links > li:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega .mega-title {
  font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); font-family: var(--font-display); font-weight: 600;
  margin-bottom: 14px; display: block;
}
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega ul a { display: block; padding: 0.5em 0.7em; border-radius: 8px; font-size: 0.93rem; color: var(--text); }
.mega ul a:hover { background: rgba(0,198,162,0.1); color: var(--teal); }
.mega.wide { min-width: 580px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.mega.right { left: auto; right: 0; }

.nav-toggle { display: none; background: none; border: 0; color: var(--text); font-size: 1.5rem; cursor: pointer; }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(72px, 10vw, 128px) clamp(56px, 7vw, 88px); position: relative; overflow: hidden; }

/* Soft blurred colour blobs for depth. Decorative only. */
.blob {
  position: absolute; pointer-events: none; border-radius: 50%;
  filter: blur(90px); opacity: 0.5;
}
.blob-teal  { width: 620px; height: 620px; background: rgba(0,198,162,0.22); top: -220px; right: -140px; }
.blob-coral { width: 320px; height: 320px; background: rgba(255,106,61,0.10); bottom: -160px; left: -80px; }

.hero .wrap { position: relative; z-index: 1; }
.hero h1 { max-width: 17ch; }
.hero p.lead { margin-top: 1.2em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.2em; }

/* --------------------------------------------------------------------------
   8. FORK (two routes: buyers and partners)
   -------------------------------------------------------------------------- */
.fork { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: clamp(48px, 6vw, 72px); }
.fork-card {
  background: var(--grad-card);
  border: 1px solid rgba(0,198,162,0.16);
  border-radius: var(--r-card);
  padding: 30px 28px;
  display: flex; flex-direction: column;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.fork-card:hover { border-color: rgba(0,198,162,0.42); transform: translateY(-2px); }
.fork-card .label { margin-bottom: 0.7em; }
.fork-card h3 { margin-bottom: 0.3em; }
.fork-card p { color: var(--muted); margin-bottom: 1.1em; font-size: 0.96rem; }
.fork-card .link-chevron { margin-top: auto; color: var(--teal); }

/* --------------------------------------------------------------------------
   9. DARK GRADIENT STAT CARDS
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stat {
  background: var(--grad-card);
  border: 1px solid rgba(0,198,162,0.14);
  border-radius: var(--r-card);
  padding: 30px 26px;
  position: relative; overflow: hidden;
}
.stat::after {
  content: ""; position: absolute; width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(0,198,162,0.28), transparent 68%);
  top: -70px; right: -60px; pointer-events: none;
}
.stat .num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.1rem, 3.6vw, 2.9rem); line-height: 1;
  color: var(--text); letter-spacing: -0.03em;
  position: relative; z-index: 1;
}
.stat .lbl { color: var(--muted); font-size: 0.92rem; margin-top: 0.7em; position: relative; z-index: 1; }

/* Placeholder marker, so nothing unsourced ever reads as real */
.ph {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.7rem; letter-spacing: 0.06em;
  color: var(--coral);
  border: 1px dashed rgba(255,106,61,0.5);
  border-radius: 6px; padding: 0.3em 0.6em;
  display: inline-block; text-transform: uppercase;
  line-height: 1.4;
}
.panel .ph { color: #C24A22; border-color: rgba(194,74,34,0.45); }

/* --------------------------------------------------------------------------
   10. FEATURE GRID (teal line icons, faint crosshair dividers, no card fills)
   -------------------------------------------------------------------------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); }
.feature { padding: 34px 30px; position: relative; }
.feature::before, .feature::after { content: ""; position: absolute; background: rgba(238,243,246,0.09); }
.feature::before { top: 0; left: 0; right: 0; height: 1px; }
.feature::after  { top: 0; bottom: 0; left: 0; width: 1px; }
.features .feature:nth-child(-n+3)::before { display: none; }
.features .feature:nth-child(3n+1)::after { display: none; }
.feature .ico { width: 28px; height: 28px; stroke: var(--teal); fill: none; stroke-width: 1.6; margin-bottom: 18px; }
.feature h4 { margin-bottom: 0.45em; }
.feature p { color: var(--muted); font-size: 0.95rem; margin: 0; }

/* --------------------------------------------------------------------------
   11. SOLUTION ROW (one emphasised item rendered as a solid teal card)
   -------------------------------------------------------------------------- */
.solutions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sol {
  border: 1px solid rgba(238,243,246,0.1);
  border-radius: var(--r-card);
  padding: 26px 24px;
  display: flex; flex-direction: column;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.sol:hover { border-color: rgba(0,198,162,0.4); transform: translateY(-2px); }
.sol h3 { font-size: 1.16rem; margin-bottom: 0.35em; }
.sol p { color: var(--muted); font-size: 0.94rem; margin-bottom: 1.2em; }
.sol .link-chevron { margin-top: auto; }

/* The one emphasised solution */
.sol-lead { background: var(--teal); border-color: var(--teal); color: #06231D; }
.sol-lead h3 { color: #06231D; }
.sol-lead p { color: rgba(6,35,29,0.78); }
.sol-lead .link-chevron { color: #06231D; }
.sol-lead:hover { border-color: var(--teal-deep); background: var(--teal-deep); }

/* --------------------------------------------------------------------------
   12. LAYER CARDS (deep teal-toned gradient, cross-sell)
   -------------------------------------------------------------------------- */
.layers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.layer {
  background: var(--grad-card);
  border: 1px solid rgba(0,198,162,0.16);
  border-radius: var(--r-card);
  padding: 28px 24px;
  display: flex; flex-direction: column;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.layer:hover { border-color: rgba(0,198,162,0.44); transform: translateY(-2px); }
.layer h3 { font-size: 1.2rem; margin-bottom: 0.3em; }
.layer p { color: var(--muted); font-size: 0.93rem; margin-bottom: 1.4em; }
.layer .btn-ghost { margin-top: auto; align-self: flex-start; font-size: 0.86rem; padding: 0.6em 1.1em; }

/* --------------------------------------------------------------------------
   13. TESTIMONIAL MASONRY (light-grey cards on a white panel)
   -------------------------------------------------------------------------- */
.masonry { columns: 3; column-gap: 16px; }
.quote {
  background: var(--card-light);
  border-radius: var(--r-card);
  padding: 26px 24px;
  break-inside: avoid;
  margin-bottom: 16px;
}
.quote p { color: var(--ink); font-size: 0.97rem; margin-bottom: 1em; }
.quote .who { font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; color: var(--ink-muted); }

.logos { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 8px; }
.logo-slot {
  border: 1px dashed rgba(11,22,32,0.2);
  border-radius: 10px;
  padding: 0.8em 1.6em;
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   14. CTA BANDS
   -------------------------------------------------------------------------- */
.cta-dark { text-align: center; overflow: hidden; }
.cta-dark .wrap { position: relative; z-index: 1; }
.cta-dark h2 { max-width: 20ch; margin-inline: auto; }
.cta-dark p.lead { margin-inline: auto; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 1.8em; }

.cta-wash { background: linear-gradient(180deg, #FFFFFF 0%, #EAF7F4 100%); text-align: center; }

/* --------------------------------------------------------------------------
   15. PARTNER BAND
   -------------------------------------------------------------------------- */
.partner-band { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.partner-points { list-style: none; margin: 0 0 1.6em; padding: 0; display: grid; gap: 14px; }
.partner-points li { display: flex; gap: 0.8em; align-items: flex-start; color: var(--ink-muted); font-size: 0.97rem; }
.partner-points li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal); flex: none; margin-top: 0.55em;
}

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.footer { border-top: 1px solid rgba(238,243,246,0.08); padding-block: 56px 36px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.footer h4 { font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.1em; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer ul a { font-size: 0.92rem; color: var(--text); opacity: 0.8; }
.footer ul a:hover { opacity: 1; color: var(--teal); }
.footer-base {
  margin-top: 42px; padding-top: 24px;
  border-top: 1px solid rgba(238,243,246,0.08);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  color: var(--muted); font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   17. SCROLL REVEAL (gentle, and off if the visitor prefers less motion)
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .sol:hover, .layer:hover, .fork-card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   18. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .layers { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 940px) {
  .stats, .solutions { grid-template-columns: repeat(2, 1fr); }
  .masonry { columns: 2; }
  .partner-band { grid-template-columns: 1fr; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .features .feature::before { display: block; }
  .features .feature:nth-child(-n+2)::before { display: none; }
  .features .feature::after { display: block; }
  .features .feature:nth-child(odd)::after { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .utility { display: none; }
  .fork, .stats, .solutions, .features, .layers { grid-template-columns: 1fr; }
  .masonry { columns: 1; }
  .features .feature::after { display: none; }
  .features .feature::before { display: block; }
  .features .feature:first-child::before { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   19. VISUAL COMPONENTS
   Added after first review. The page was all words in boxes.
   These are the things you actually look at.
   ========================================================================== */

/* --- Split hero: copy on the left, a product visual on the right ---------- */
.hero-split {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero-split h1 { max-width: 14ch; }
.hero-split p.lead { max-width: 46ch; }
.hero-split p.lead b { color: var(--text); font-weight: 600; }

/* --- Product UI mock ------------------------------------------------------
   A fake console built in plain HTML and CSS. Swap for a real screenshot
   when one is available. --------------------------------------------------- */
.mock {
  background: linear-gradient(168deg, #131C21 0%, #0C1215 100%);
  border: 1px solid rgba(238,243,246,0.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,198,162,0.06);
  position: relative;
}
.mock-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(238,243,246,0.08);
  background: rgba(255,255,255,0.02);
}
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(238,243,246,0.16); }
.mock-bar span {
  margin-left: 8px; font-family: var(--font-display); font-weight: 600;
  font-size: 0.78rem; color: var(--muted); letter-spacing: 0.04em;
}
.mock-body { padding: 20px 18px 22px; }
.mock-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.mock-head .big {
  font-family: var(--font-display); font-weight: 800;
  font-size: 2.5rem; line-height: 1; letter-spacing: -0.035em; color: var(--text);
}
.mock-head .cap { font-size: 0.78rem; color: var(--muted); margin-top: 0.5em; }
.mock-head .delta {
  font-size: 0.72rem; color: var(--teal);
  font-family: var(--font-display); font-weight: 600;
  background: rgba(0,198,162,0.12); border: 1px solid rgba(0,198,162,0.3);
  border-radius: var(--r-pill); padding: 0.3em 0.7em; white-space: nowrap;
}
.mock-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 11px 0;
  border-top: 1px solid rgba(238,243,246,0.07);
  font-size: 0.85rem;
}
.mock-row .name { display: flex; align-items: center; gap: 10px; color: var(--text); }
.mock-row .glyph {
  width: 24px; height: 24px; border-radius: 7px; flex: none;
  background: rgba(238,243,246,0.07);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; color: var(--muted);
}
.mock-row .seats { color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

.pill {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.68rem; letter-spacing: 0.04em;
  padding: 0.32em 0.7em; border-radius: var(--r-pill);
  border: 1px solid transparent; white-space: nowrap;
}
.pill-allow { background: rgba(0,198,162,0.13); color: var(--teal); border-color: rgba(0,198,162,0.32); }
.pill-coach { background: rgba(255,106,61,0.13); color: var(--coral); border-color: rgba(255,106,61,0.32); }
.pill-block { background: rgba(230,57,70,0.13); color: var(--alert); border-color: rgba(230,57,70,0.34); }

/* So a mock never reads as a real screenshot */
.mock-tag {
  position: absolute; top: 12px; right: 14px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--coral); border: 1px dashed rgba(255,106,61,0.45);
  border-radius: 5px; padding: 0.25em 0.5em;
}

/* --- Versus block: the positioning drawn, not described ------------------- */
.versus { display: grid; grid-template-columns: 1fr 1.18fr 1fr; gap: 16px; align-items: stretch; }
.vs {
  border: 1px solid rgba(238,243,246,0.1);
  border-radius: var(--r-card);
  padding: 30px 26px;
  display: flex; flex-direction: column;
}
.vs h3 { font-size: 1.08rem; margin-bottom: 0.7em; }
.vs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.vs li { font-size: 0.89rem; color: var(--muted); display: flex; gap: 0.65em; align-items: flex-start; line-height: 1.5; }
.vs li::before { content: "\00D7"; color: var(--alert); font-weight: 700; flex: none; opacity: 0.8; }
.vs .vs-cap {
  font-family: var(--font-display); font-weight: 600; font-size: 0.68rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 1.3em;
}
.vs-us {
  background: var(--grad-card);
  border-color: rgba(0,198,162,0.42);
  box-shadow: 0 24px 60px rgba(0,198,162,0.08);
  transform: scale(1.035);
}
.vs-us h3 { font-size: 1.34rem; }
.vs-us .vs-cap { color: var(--teal); }
.vs-us li { color: var(--text); }
.vs-us li::before { content: "\2713"; color: var(--teal); opacity: 1; }

/* --- Bento solution grid: varied sizes, not identical tiles --------------- */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bento .sol-lead { grid-column: span 2; }
.bento .sol-lead h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.bento .sol-lead p { max-width: 44ch; font-size: 1rem; }

/* Mini bar chart inside the lead tile */
.spark { display: flex; align-items: flex-end; gap: 5px; height: 44px; margin: 2px 0 18px; max-width: 240px; }
.spark i { flex: 1; background: rgba(6,35,29,0.26); border-radius: 3px 3px 0 0; }
.spark i:nth-child(1) { height: 20%; }
.spark i:nth-child(2) { height: 32%; }
.spark i:nth-child(3) { height: 28%; }
.spark i:nth-child(4) { height: 50%; }
.spark i:nth-child(5) { height: 66%; }
.spark i:nth-child(6) { height: 59%; }
.spark i:nth-child(7) { height: 86%; }
.spark i:nth-child(8) { height: 100%; background: #06231D; }

/* --- Platform stack diagram ----------------------------------------------- */
.stack { display: grid; gap: 0; max-width: 940px; margin-inline: auto; }
.stack-layers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stack-layer {
  background: var(--grad-card);
  border: 1px solid rgba(0,198,162,0.2);
  border-radius: 14px;
  padding: 22px 18px;
  text-align: center;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.stack-layer:hover { border-color: rgba(0,198,162,0.55); transform: translateY(-3px); }
.stack-layer .lname { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.stack-layer .ldesc { color: var(--muted); font-size: 0.81rem; margin-top: 0.4em; line-height: 1.45; }

.stack-connectors { display: grid; grid-template-columns: repeat(4, 1fr); height: 28px; }
.stack-connectors i { border-left: 1px dashed rgba(0,198,162,0.3); margin-inline: auto; height: 100%; width: 1px; }

.stack-base {
  border: 1px solid rgba(0,198,162,0.34);
  border-radius: 14px;
  padding: 20px 24px;
  text-align: center;
  background: linear-gradient(90deg, rgba(0,198,162,0.1), rgba(0,198,162,0.03));
}
.stack-base .bname { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--teal); }
.stack-base .bdesc { color: var(--muted); font-size: 0.86rem; margin-top: 0.3em; }

/* --- Asymmetric two-column section (breaks the centred rhythm) ------------ */
.split { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split .intro { text-align: left; margin: 0; max-width: none; }
.split .intro p.lead { margin-inline: 0; }

/* --- Logo strip ------------------------------------------------------------ */
.logo-strip { display: flex; gap: 40px; align-items: center; justify-content: center; flex-wrap: wrap; }
.logo-strip span {
  font-family: var(--font-display); font-weight: 700; font-size: 0.92rem;
  color: var(--ink-muted); opacity: 0.6;
}

@media (max-width: 940px) {
  .hero-split, .split { grid-template-columns: 1fr; }
  .versus { grid-template-columns: 1fr; }
  .vs-us { transform: none; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .stack-layers { grid-template-columns: repeat(2, 1fr); }
  .stack-connectors { display: none; }
}

@media (max-width: 720px) {
  .bento { grid-template-columns: 1fr; }
  .bento .sol-lead { grid-column: span 1; }
  .stack-layers { grid-template-columns: 1fr; }
}

/* ==========================================================================
   20. THE WOW PASS
   Techno-futurist: bigger type, real depth, layered visuals, motion.
   Committing to the aesthetic rather than hedging it.
   ========================================================================== */

/* --- Bigger, tighter display type ----------------------------------------- */
.hero-split h1 {
  font-size: clamp(3.1rem, 7.2vw, 5.4rem);
  letter-spacing: -0.042em;
  line-height: 0.98;
  max-width: 13ch;
}
.hero-split h1 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--teal) 0%, #6FE7CE 55%, var(--teal) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.section > .wrap > .intro h2, .split .intro h2 {
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  letter-spacing: -0.035em;
}

/* --- Faint engineering grid behind the dark sections ---------------------- */
.gridded::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(238,243,246,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,243,246,0.035) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 34%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 78% 62% at 50% 34%, #000 25%, transparent 78%);
  pointer-events: none;
}

/* --- Layered hero visual: the mock plus a card floating over it ----------- */
.mock-stack { position: relative; padding-bottom: 42px; padding-left: 26px; }

/* Glow ring behind the console */
.mock-stack::before {
  content: "";
  position: absolute; inset: 6% 2% 18% 10%;
  background: radial-gradient(closest-side, rgba(0,198,162,0.4), transparent 72%);
  filter: blur(58px);
  pointer-events: none;
}
.mock-stack .mock { position: relative; z-index: 1; }

/* The small alert card overlapping the bottom-left corner */
.mock-float {
  position: absolute; z-index: 2;
  left: 0; bottom: 0; width: min(280px, 74%);
  background: linear-gradient(160deg, #17222A 0%, #0D1418 100%);
  border: 1px solid rgba(230,57,70,0.34);
  border-radius: 14px;
  padding: 15px 16px;
  box-shadow: 0 26px 60px rgba(0,0,0,0.66);
  animation: floaty 6.5s ease-in-out infinite;
}
.mock-float .ftop {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--alert); margin-bottom: 9px;
}
.mock-float .ftop i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--alert);
  box-shadow: 0 0 0 0 rgba(230,57,70,0.6); animation: ping 2.2s ease-out infinite;
}
.mock-float .fbody { font-size: 0.83rem; color: var(--text); line-height: 1.45; }
.mock-float .fmeta { font-size: 0.72rem; color: var(--muted); margin-top: 7px; }

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(230,57,70,0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(230,57,70,0); }
  100% { box-shadow: 0 0 0 0 rgba(230,57,70,0); }
}

/* Live indicator on the console header */
.livedot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); display: inline-block; margin-right: 5px; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Rows light up on hover, so the console feels alive */
.mock-row { transition: background 0.18s ease; border-radius: 8px; padding-inline: 8px; margin-inline: -8px; }
.mock-row:hover { background: rgba(0,198,162,0.055); }

/* --- Social proof bar, straight under the hero ---------------------------- */
.proofbar { border-block: 1px solid rgba(238,243,246,0.09); padding-block: 34px; }
.proofbar .pb-note {
  text-align: center; color: var(--muted); font-size: 0.83rem;
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 26px;
}

/* Marquee of customer logos */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 56px; width: max-content; animation: slide 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--font-display); font-weight: 700; font-size: 0.98rem;
  color: var(--muted); opacity: 0.55; white-space: nowrap;
}
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Hard-metric row */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
.metric { text-align: center; }
.metric .mv {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -0.035em;
  color: var(--teal); line-height: 1;
}
.metric .ml { color: var(--muted); font-size: 0.82rem; margin-top: 0.6em; line-height: 1.4; }

/* --- Section eyebrow numbering, for rhythm -------------------------------- */
.step-no {
  font-family: var(--font-display); font-weight: 800;
  font-size: 0.72rem; color: var(--teal); opacity: 0.6;
  letter-spacing: 0.14em; display: block; margin-bottom: 0.9em;
}

/* --- Richer hover on the bento tiles -------------------------------------- */
.sol { position: relative; overflow: hidden; }
.sol::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(0,198,162,0.09), transparent 62%);
  opacity: 0; transition: opacity 0.28s ease; pointer-events: none;
}
.sol:hover::after { opacity: 1; }
.sol-lead::after { display: none; }

/* --- Stronger layer cards ------------------------------------------------- */
.stack-layer { position: relative; overflow: hidden; }
.stack-layer::after {
  content: ""; position: absolute; top: -40%; left: -30%; width: 90px; height: 190%;
  background: linear-gradient(90deg, transparent, rgba(0,198,162,0.14), transparent);
  transform: skewX(-18deg); opacity: 0; transition: opacity 0.3s ease;
}
.stack-layer:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mock-float, .livedot, .mock-float .ftop i { animation: none; }
  .marquee-track { animation: none; }
}

@media (max-width: 940px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .mock-stack { padding-left: 0; padding-bottom: 56px; }
  .mock-float { width: min(260px, 82%); }
}

/* ==========================================================================
   21. DEPTH PASS
   The page read flat because everything sat on one plane: one background
   colour, hairline borders, almost no shadow, nothing overlapping.
   This adds elevation, texture, ambient light and surface changes.
   ========================================================================== */

:root {
  /* Layered elevation. The inset top highlight is what makes a dark card
     read as a physical object rather than a rectangle of slightly
     different colour. */
  --elev-1:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 2px 4px rgba(0,0,0,0.3),
    0 12px 28px rgba(0,0,0,0.38);
  --elev-2:
    inset 0 1px 0 rgba(255,255,255,0.09),
    0 4px 10px rgba(0,0,0,0.4),
    0 30px 70px rgba(0,0,0,0.55);
  --elev-teal:
    inset 0 1px 0 rgba(140,255,230,0.16),
    0 4px 10px rgba(0,0,0,0.4),
    0 30px 70px rgba(0,0,0,0.5),
    0 0 60px rgba(0,198,162,0.1);
}

/* --- Film grain over everything. Kills the flat digital look. ------------- */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9998;
  pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Ambient aurora behind the whole page -------------------------------- */
body { position: relative; }
.aurora {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}
.aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(120px);
}
.aurora i:nth-child(1) { width: 900px; height: 700px; background: rgba(0,198,162,0.11); top: 4%;  left: -18%; }
.aurora i:nth-child(2) { width: 760px; height: 620px; background: rgba(0,198,162,0.07); top: 38%; right: -16%; }
.aurora i:nth-child(3) { width: 620px; height: 520px; background: rgba(255,106,61,0.045); top: 66%; left: 8%; }
.aurora i:nth-child(4) { width: 840px; height: 640px; background: rgba(0,198,162,0.09); bottom: -6%; right: -10%; }

/* Keep real content above the aurora */
main, .nav-outer, .utility, .footer { position: relative; z-index: 1; }

/* --- Surface alternation. Not every band is the same colour any more. ----- */
.surface-raised {
  background: linear-gradient(180deg, #101820 0%, #0B0F12 100%);
  border-top: 1px solid rgba(238,243,246,0.07);
  border-bottom: 1px solid rgba(238,243,246,0.05);
}
.surface-sunken {
  background: linear-gradient(180deg, #080B0E 0%, #0B0F12 100%);
  box-shadow: inset 0 18px 40px rgba(0,0,0,0.5);
}

/* Hairline teal divider with a glow at its centre */
.divider-glow { position: relative; height: 1px; background: rgba(238,243,246,0.08); }
.divider-glow::after {
  content: ""; position: absolute; left: 50%; top: -1px;
  width: 340px; height: 3px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0,198,162,0.75), transparent);
  filter: blur(2px);
}

/* --- Give every card real elevation --------------------------------------- */
.fork-card, .stat, .layer, .vs, .stack-layer, .sol:not(.sol-lead) {
  box-shadow: var(--elev-1);
  background-color: #0E1419;
}
.vs-us, .sol-lead { box-shadow: var(--elev-teal); }
.mock { box-shadow: var(--elev-2), 0 0 0 1px rgba(0,198,162,0.08); }
.panel {
  box-shadow: 0 40px 90px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.7);
}
.quote { box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 6px rgba(11,22,32,0.06); }

.fork-card:hover, .layer:hover, .stack-layer:hover, .sol:not(.sol-lead):hover {
  box-shadow: var(--elev-2), 0 0 40px rgba(0,198,162,0.09);
}

/* --- Hero console gets perspective, so it sits in space ------------------- */
.mock-stack .mock {
  transform: perspective(2000px) rotateY(-8deg) rotateX(2.5deg) translateZ(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mock-stack:hover .mock { transform: perspective(2000px) rotateY(-2deg) rotateX(0.5deg); }
.mock-float { transform-origin: left bottom; }

/* --- Sections that pull up and overlap the one above --------------------- */
.pull-up { margin-top: clamp(-96px, -7vw, -56px); position: relative; z-index: 3; }

/* --- Trust strip, for the procurement, legal and compliance seats -------- */
.trust {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.trust-item {
  background: linear-gradient(160deg, rgba(20,26,32,0.9), rgba(11,15,18,0.9));
  border: 1px solid rgba(238,243,246,0.1);
  border-radius: 14px;
  padding: 20px 18px;
  box-shadow: var(--elev-1);
  display: flex; flex-direction: column; gap: 0.35em;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.trust-item:hover { border-color: rgba(0,198,162,0.4); transform: translateY(-2px); }
.trust-item .ti-role {
  font-family: var(--font-display); font-weight: 600; font-size: 0.68rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--teal);
}
.trust-item .ti-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text); }
.trust-item .ti-desc { color: var(--muted); font-size: 0.85rem; line-height: 1.45; }
.trust-item .link-chevron { margin-top: auto; padding-top: 0.8em; font-size: 0.84rem; color: var(--teal); }

/* --- More saturated moments. The restraint had gone too far. ------------- */
.stack-base {
  background: linear-gradient(96deg, rgba(0,198,162,0.2), rgba(0,198,162,0.06) 60%, rgba(0,198,162,0.14));
  box-shadow: var(--elev-teal);
}
.btn-primary { box-shadow: 0 6px 18px rgba(0,198,162,0.28), inset 0 1px 0 rgba(255,255,255,0.28); }
.btn-primary:hover { box-shadow: 0 10px 28px rgba(0,198,162,0.38), inset 0 1px 0 rgba(255,255,255,0.3); }

/* Section headings get a faint glow so they lift off the base */
.intro h2 { text-shadow: 0 0 60px rgba(0,198,162,0.14); }

@media (prefers-reduced-motion: reduce) {
  .mock-stack .mock { transform: none; }
}

@media (max-width: 940px) {
  .trust { grid-template-columns: repeat(2, 1fr); }
  .mock-stack .mock { transform: none; }
  .pull-up { margin-top: 0; }
}

@media (max-width: 720px) {
  .trust { grid-template-columns: 1fr; }
}

/* ==========================================================================
   22. SHADOW AI RISK CHECK
   The low-friction lead magnet. Seven questions, runs entirely in the
   browser, instant score. Competitors all have one of these; we did not.
   ========================================================================== */

.quiz-wrap { max-width: 760px; margin-inline: auto; }

.quiz-progress { height: 3px; background: rgba(238,243,246,0.1); border-radius: 3px; overflow: hidden; margin-bottom: 40px; }
.quiz-progress i { display: block; height: 100%; width: 0; background: var(--teal); border-radius: 3px; transition: width 0.4s cubic-bezier(0.2,0.7,0.2,1); box-shadow: 0 0 14px rgba(0,198,162,0.6); }

.q-step { display: none; }
.q-step.active { display: block; animation: qin 0.35s ease; }
@keyframes qin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.q-count { font-family: var(--font-display); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.12em; color: var(--teal); text-transform: uppercase; margin-bottom: 1em; display: block; }
.q-text { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2.1rem); letter-spacing: -0.03em; line-height: 1.14; margin-bottom: 1.4em; }

.q-options { display: grid; gap: 10px; }
.q-opt {
  text-align: left; width: 100%;
  background: linear-gradient(160deg, rgba(20,26,32,0.9), rgba(11,15,18,0.9));
  border: 1px solid rgba(238,243,246,0.12);
  border-radius: 14px; padding: 17px 20px;
  color: var(--text); font-family: var(--font-body); font-size: 1rem;
  cursor: pointer; box-shadow: var(--elev-1);
  transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
  display: flex; align-items: center; gap: 14px;
}
.q-opt:hover { border-color: rgba(0,198,162,0.55); transform: translateX(4px); }
.q-opt .key {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  border: 1px solid rgba(238,243,246,0.2);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; color: var(--muted);
}
.q-opt:hover .key { border-color: var(--teal); color: var(--teal); }

.q-back { background: none; border: 0; color: var(--muted); font-family: var(--font-display); font-weight: 600; font-size: 0.86rem; cursor: pointer; margin-top: 26px; padding: 0; }
.q-back:hover { color: var(--text); }

/* --- Result ---------------------------------------------------------------- */
.result { display: none; }
.result.active { display: block; animation: qin 0.45s ease; }

.score-ring { display: grid; place-items: center; margin-bottom: 30px; }
/* overflow:visible matters here. SVG clips to its viewBox by default, so
   the ring's glow was being sliced off square at the edges instead of
   fading out. The padding gives the glow somewhere to go. */
.score-ring svg { width: 190px; height: 190px; transform: rotate(-90deg); overflow: visible; }
.score-ring { padding: 18px 0 26px; }
.score-ring .track { fill: none; stroke: rgba(238,243,246,0.09); stroke-width: 12; }
.score-ring .bar { fill: none; stroke: var(--teal); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(0.2,0.7,0.2,1), stroke 0.4s ease; filter: drop-shadow(0 0 12px rgba(0,198,162,0.5)); }
.score-num { position: absolute; text-align: center; }
.score-num .n { font-family: var(--font-display); font-weight: 800; font-size: 3.4rem; line-height: 1; letter-spacing: -0.04em; }
.score-num .of { color: var(--muted); font-size: 0.8rem; margin-top: 0.4em; }

.score-band { text-align: center; margin-bottom: 34px; }
.score-band .bandname { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem,3vw,2.2rem); letter-spacing: -0.03em; }
.score-band .bandtext { color: var(--muted); max-width: 52ch; margin: 0.7em auto 0; }

.gaps { display: grid; gap: 12px; margin-bottom: 34px; }
.gap {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid rgba(238,243,246,0.1); border-radius: 14px;
  padding: 18px 20px; background: linear-gradient(160deg, rgba(20,26,32,0.85), rgba(11,15,18,0.85));
  box-shadow: var(--elev-1);
}
.gap .gmark { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; font-size: 0.8rem; }
.gap.bad  .gmark { background: rgba(230,57,70,0.16); color: var(--alert); }
.gap.warn .gmark { background: rgba(255,106,61,0.16); color: var(--coral); }
.gap.ok   .gmark { background: rgba(0,198,162,0.16); color: var(--teal); }
.gap h4 { margin: 0 0 0.25em; font-size: 0.99rem; }
.gap p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }

/* --- Email capture --------------------------------------------------------- */
.capture {
  border: 1px solid rgba(0,198,162,0.34); border-radius: var(--r-card);
  padding: 30px 28px; background: var(--grad-card); box-shadow: var(--elev-teal);
}
.capture h3 { margin-bottom: 0.35em; }
.capture p { color: var(--muted); font-size: 0.94rem; }
.capture-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1.3em; }
.capture-form input {
  flex: 1 1 240px; min-width: 0;
  background: rgba(11,15,18,0.7); border: 1px solid rgba(238,243,246,0.2);
  border-radius: var(--r-pill); padding: 0.82em 1.3em;
  color: var(--text); font-family: var(--font-body); font-size: 0.97rem;
}
.capture-form input::placeholder { color: var(--muted); }
.capture-form input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,198,162,0.16); }
.capture-note { font-size: 0.78rem; color: var(--muted); margin-top: 1em; }

/* --- Inline email capture in the hero -------------------------------------- */
.inline-capture { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2em; max-width: 460px; }
.inline-capture input {
  flex: 1 1 220px; min-width: 0;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(238,243,246,0.22);
  border-radius: var(--r-pill); padding: 0.85em 1.3em;
  color: var(--text); font-family: var(--font-body); font-size: 0.97rem;
  backdrop-filter: blur(8px);
}
.inline-capture input::placeholder { color: var(--muted); }
.inline-capture input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,198,162,0.16); }

/* --- Sticky CTA bar --------------------------------------------------------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(11,15,18,0.9); backdrop-filter: blur(16px);
  border-top: 1px solid rgba(0,198,162,0.28);
  box-shadow: 0 -14px 40px rgba(0,0,0,0.5);
  transform: translateY(110%); transition: transform 0.35s cubic-bezier(0.2,0.7,0.2,1);
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .wrap { display: flex; align-items: center; gap: 18px; padding-block: 14px; flex-wrap: wrap; }
.sticky-cta .sc-text { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; margin-right: auto; }
.sticky-cta .sc-text small { display: block; font-family: var(--font-body); font-weight: 400; color: var(--muted); font-size: 0.83rem; }
.sticky-cta .sc-close { background: none; border: 0; color: var(--muted); font-size: 1.3rem; cursor: pointer; line-height: 1; }

/* --- Competitor comparison table -------------------------------------------- */
.compare-scroll { overflow-x: auto; }
.compare {
  width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0;
  font-size: 0.93rem;
}
.compare th, .compare td { padding: 16px 18px; text-align: left; border-bottom: 1px solid rgba(238,243,246,0.09); }
.compare thead th {
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
  color: var(--muted); letter-spacing: 0.03em; vertical-align: bottom;
}
.compare thead th.us { color: var(--teal); font-size: 1rem; }
.compare tbody th { font-weight: 500; color: var(--text); font-family: var(--font-body); }
.compare td { color: var(--muted); }
.compare .us-col {
  background: linear-gradient(180deg, rgba(0,198,162,0.09), rgba(0,198,162,0.03));
  color: var(--text);
  border-left: 1px solid rgba(0,198,162,0.28);
  border-right: 1px solid rgba(0,198,162,0.28);
}
.compare tr:first-child .us-col { border-top: 1px solid rgba(0,198,162,0.28); border-radius: 12px 12px 0 0; }
.compare tr:last-child .us-col { border-bottom: 1px solid rgba(0,198,162,0.28); border-radius: 0 0 12px 12px; }
.tick { color: var(--teal); font-weight: 700; }
.cross { color: var(--alert); font-weight: 700; opacity: 0.8; }

@media (max-width: 720px) {
  .sticky-cta .sc-text { margin-right: 0; flex-basis: 100%; }
}

/* ==========================================================================
   23. THE SIGNATURE DEVICE
   "Direct" is a spatial idea, so the site draws it. Straight lines against
   detours, a continuous spine down the page, and one full-bleed moment.
   This is the bit no competitor can copy, because it is our positioning.
   ========================================================================== */

/* --- The route diagram: detour versus direct ----------------------------- */
.routes { width: 100%; height: auto; overflow: visible; }
.routes .lane-label {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.routes .lane-note { font-family: var(--font-body); font-size: 12.5px; }
.routes .node-label { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; }

.routes .path-detour { fill: none; stroke: #55636E; stroke-width: 2; stroke-dasharray: 7 6; }
.routes .path-direct { fill: none; stroke: var(--teal); stroke-width: 3; filter: drop-shadow(0 0 8px rgba(0,198,162,0.75)); }

.routes .proxy-box { fill: rgba(230,57,70,0.07); stroke: rgba(230,57,70,0.45); stroke-width: 1.5; }
.routes .endpoint  { fill: #101820; stroke: rgba(238,243,246,0.28); stroke-width: 1.5; }
.routes .endpoint-live { fill: #0B2A25; stroke: var(--teal); stroke-width: 2; }

.routes .packet-slow { fill: #8695A2; }
.routes .packet-fast { fill: var(--teal); filter: drop-shadow(0 0 6px rgba(0,198,162,0.9)); }

/* --- Scroll spine. One continuous line down the page. -------------------- */
.spine {
  position: fixed; left: 26px; top: 0; bottom: 0; width: 2px;
  background: rgba(238,243,246,0.08); z-index: 40; pointer-events: none;
}
.spine i {
  position: absolute; top: 0; left: 0; width: 100%; height: 0;
  background: linear-gradient(180deg, var(--teal), rgba(0,198,162,0.35));
  box-shadow: 0 0 14px rgba(0,198,162,0.55);
}
.spine i::after {
  content: ""; position: absolute; bottom: -4px; left: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 14px 3px rgba(0,198,162,0.7);
}
@media (max-width: 1320px) { .spine { display: none; } }

/* --- Full-bleed statement. The one loud moment on the page. -------------- */
.statement {
  background: linear-gradient(112deg, #00C6A2 0%, #00A98B 48%, #009E82 100%);
  color: #06231D;
  padding-block: clamp(80px, 11vw, 150px);
  position: relative; overflow: hidden;
}
.statement::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(6,35,29,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,35,29,0.07) 1px, transparent 1px);
  background-size: 54px 54px;
}
/* An oversized straight line, drawn across the statement */
.statement::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; background: rgba(6,35,29,0.16);
}
.statement .wrap { position: relative; z-index: 1; }
.statement h2 {
  color: #06231D;
  font-size: clamp(2.6rem, 8.5vw, 6.4rem);
  line-height: 0.93; letter-spacing: -0.05em;
  margin: 0; max-width: 15ch;
}
.statement .st-sub {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 1.7vw, 1.24rem);
  color: rgba(6,35,29,0.72); max-width: 46ch; margin-top: 1.5em;
}
.statement .st-meta {
  font-family: var(--font-display); font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(6,35,29,0.6); margin-bottom: 1.6em; display: block;
}

/* --- Oversized ghost numerals behind section intros ---------------------- */
.section { overflow: hidden; }
.ghost-num {
  position: absolute; right: 2%; top: -14px;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(7rem, 17vw, 15rem); line-height: 1;
  color: rgba(238,243,246,0.022);
  letter-spacing: -0.06em; pointer-events: none; user-select: none;
}

/* --- Corner ticks. A small repeated mark that becomes recognisable. ------ */
.ticked { position: relative; }
.ticked::before, .ticked::after {
  content: ""; position: absolute; width: 11px; height: 11px;
  border-color: rgba(0,198,162,0.5); border-style: solid; border-width: 0;
}
.ticked::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.ticked::after  { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

@media (prefers-reduced-motion: reduce) {
  .routes animateMotion { display: none; }
}

/* ==========================================================================
   24. PRECISION PASS
   Measured against Supercut, CodeRabbit, Arrakis and Darktrace. Three
   consistent differences: their corners are far sharper, their display type
   is smaller and lighter, and their neutrals are warm rather than blue.
   Premium reads as restraint plus craft, not scale.
   ========================================================================== */

:root {
  /* Sharp corners. This is the single biggest change. */
  --r-card:  6px;
  --r-panel: 10px;

  /* Warm the neutrals. Cool blue-black reads colder and cheaper. */
  --bg:      #0F0E0E;
  --surface: #17161A;
  --text:    #F4F6EC;
  --muted:   #8C9490;
  --ink:     #14100F;
}

/* Smaller radii on the components that set their own */
.mock, .mock-float, .trust-item, .q-opt, .gap, .stack-layer,
.flow-in, .flow-out, .flow-hub, .logo-slot, .quote { border-radius: 6px; }
.mock-bar { border-radius: 6px 6px 0 0; }
.statement, .capture { border-radius: 8px; }
.btn, .pill, .mega ul a { border-radius: 4px; }
.btn-primary, .btn-ghost { border-radius: 4px; }
.brand .dot, .label::before, .partner-points li::before,
.spine i::after, .gap .gmark, .metric .mv { border-radius: 50%; }

/* Display type: smaller, lighter, tighter. Three of the four references
   sit at roughly 40px and weight 300 to 500. */
.hero-split h1 {
  font-size: clamp(2.4rem, 4.6vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.06;
  max-width: 19ch;
}
.hero-split h1 em { font-weight: 600; }

.section > .wrap > .intro h2,
.split .intro h2,
.intro h2 {
  font-size: clamp(1.75rem, 3.1vw, 2.35rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  text-shadow: none;
}
.statement h2 {
  font-size: clamp(2.2rem, 5.6vw, 4.1rem);
  font-weight: 500;
  letter-spacing: -0.038em;
  max-width: 19ch;
}
h3 { font-weight: 600; letter-spacing: -0.02em; }
.stat .num, .metric .mv, .mock-head .big { font-weight: 600; letter-spacing: -0.035em; }

/* Quieter glow. The references use crisp edges, not haze. */
.path-direct { filter: drop-shadow(0 0 4px rgba(0,198,162,0.5)); }
.btn-primary { box-shadow: inset 0 1px 0 rgba(255,255,255,0.22); }
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 4px 14px rgba(0,198,162,0.22); }
.aurora i { opacity: 0.72; }
.ghost-num { color: rgba(244,246,236,0.018); font-weight: 600; }

/* Crisper borders throughout */
.sol, .vs, .trust-item, .layer, .fork-card, .stat {
  border-color: rgba(244,246,236,0.11);
}

/* Labels and step numbers: smaller, wider tracked. Precision cue. */
.label, .step-no {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  font-weight: 500;
}

/* ==========================================================================
   25. THE WORDMARK
   The supplied PNGs are 1200x630 with the wordmark floating in a lot of
   transparent space. Rather than crop and risk clipping the letterforms,
   the image is oversized inside a fixed-height box that hides the overhang.
   Swap for an SVG when one is available and this can all go.
   ========================================================================== */
.brand {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  font-size: 0;           /* kills any stray text node spacing */
}
.brand img {
  height: 21px;
  width: auto;
  display: block;
  /* The official artwork is navy. On the dark bar it needs to be white,
     and a flat single-colour mark inverts cleanly. Keeps one asset. */
  filter: brightness(0) invert(1);
}

.footer .brand img { height: 24px; opacity: 0.9; }

@media (max-width: 720px) {
  .brand img { height: 18px; }
}

/* ==========================================================================
   26. THE MIDDLE GROUND
   The warm near-black read as a different company to the navy master brand,
   which matters more now that both sites will run at once. The base moves
   back into the navy family. Everything that made the last pass work stays:
   sharp corners, restrained type, teal as the single accent.

   TO DIAL: --bg and --surface below are the whole control. Lighter and
   bluer reads closer to the old brand; darker reads more premium.
   ========================================================================== */

:root {
  /* Measured from trustlayer.co.uk rather than assumed. The live site is a
     warm charcoal dark theme, not navy: body #1F2025, darker bands #16171B,
     light sections #D9DCE3 and #F4F4F4. These are those exact values. */
  --tl-charcoal:  #1F2025;   /* the live site's body colour */
  --tl-charcoal-lo: #16171B; /* its darker bands */
  --tl-greyblue:  #D9DCE3;   /* its light section fill */
  --navy:         #0E2841;   /* master brand navy, kept for accents */

  --bg:      #16171B;   /* the live site's own darker band, as our base */
  --surface: #1F2025;   /* and its body colour, as our raised surface */
  --text:    #FFFFFF;   /* the live site uses pure white */
  --muted:   #9AA0AB;
  --ink:     #16171B;

  /* Cards: charcoal lifting toward teal, rather than pure teal */
  --grad-card: radial-gradient(120% 120% at 85% 12%, #14343A 0%, #16171B 64%);

  /* Corners: the references sit at 1 to 16px, the live brand at 12 to 24px.
     10px is inside both, so it reads precise without breaking continuity. */
  --r-card:  10px;
  --r-panel: 14px;

  /* Type bridge. Sora stays on display, because that was the deliberate
     evolution. Body moves to Onest, the actual brand face, so the reading
     texture matches the live site. Distinctive headlines, familiar prose. */
  --font-display: "Sora", "Onest", system-ui, sans-serif;
  --font-body:    "Onest", "Inter", system-ui, sans-serif;
}

/* Display weight moves to 600, matching the live site's h1 exactly */
.hero-split h1 {
  font-weight: 600;
  font-size: clamp(2.3rem, 4.2vw, 3.2rem);
}
.hero-split h1 em { font-weight: 700; }
.intro h2, .split .intro h2, .section > .wrap > .intro h2 { font-weight: 600; }
.statement h2 { font-weight: 600; }

/* Borders: neutral charcoal, matching the live site's restraint */
.sol, .vs, .trust-item, .layer, .fork-card, .stat,
.mock, .flow-in, .flow-out, .q-opt, .gap {
  border-color: rgba(255,255,255,0.11);
}
.fork-card, .stat, .layer, .sol:not(.sol-lead), .trust-item, .vs { background-color: #1C1D22; }

/* Nav, dividers and rules follow suit */
.nav-outer { background: rgba(22,23,27,0.88); border-bottom-color: rgba(255,255,255,0.1); }
.utility { border-bottom-color: rgba(255,255,255,0.09); }
.footer, .footer-base { border-top-color: rgba(255,255,255,0.1); }
.mega { background: #1F2025; border-color: rgba(255,255,255,0.13); }
.divider-glow { background: rgba(255,255,255,0.1); }
.spine { background: rgba(255,255,255,0.09); }
.feature::before, .feature::after { background: rgba(255,255,255,0.1); }

.gridded::before {
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
}

/* Surface alternation, built from the live site's own two darks */
.surface-raised {
  background: linear-gradient(180deg, #1F2025 0%, #16171B 100%);
  border-top-color: rgba(255,255,255,0.09);
  border-bottom-color: rgba(255,255,255,0.06);
}
.surface-sunken { background: linear-gradient(180deg, #0E0F12 0%, #16171B 100%); }

/* Light panels use the brand grey-blue rather than pure white, which is
   the strongest single continuity cue with the live site. */
.panel { background: var(--tl-greyblue); }
.quote { background: #FFFFFF; }
.cta-wash { background: linear-gradient(180deg, #D9DCE3 0%, #C9E6E0 100%); }

/* Ambient light stays subtle against charcoal */
.aurora i:nth-child(3) { background: rgba(47,74,205,0.09); }

/* Route diagram tuned to the charcoal ground */
.routes .path-detour { stroke: #6A6E78; }
.routes .endpoint { fill: #1F2025; }

.ghost-num { color: rgba(255,255,255,0.022); }
.mock { background: linear-gradient(168deg, #24262C 0%, #131418 100%); }
.mock-float { background: linear-gradient(160deg, #282A31 0%, #141519 100%); }

/* ==========================================================================
   27. SHARING AND PRINT
   ========================================================================== */

/* --- Policy console: a drawn interface, not a screenshot ----------------
   Built in HTML and CSS so it stays sharp at any resolution and matches
   the page. The structure mirrors the real app catalogue: pick a service
   on the left, set policy per action on the right. Labelled as a
   representation, because that is what it is. */
.ui {
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(168deg, #1A1D24 0%, #101318 100%);
  box-shadow: var(--elev-2), 0 0 60px rgba(0,198,162,0.08);
  position: relative;
}
.ui-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 15px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
}
.ui-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.ui-bar span {
  margin-left: 6px; font-family: var(--font-display); font-weight: 500;
  font-size: 0.74rem; color: var(--muted); letter-spacing: 0.03em;
}
.ui-tag {
  position: absolute; top: 11px; right: 14px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.58rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--coral); border: 1px dashed rgba(255,106,61,0.45);
  border-radius: 4px; padding: 0.24em 0.5em;
}

.ui-body { display: grid; grid-template-columns: 208px 1fr; min-height: 340px; }

/* Left rail */
.ui-rail { border-right: 1px solid rgba(255,255,255,0.08); padding: 14px 0; background: rgba(0,0,0,0.16); }
.ui-search {
  margin: 0 12px 14px; padding: 7px 10px;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 5px;
  font-size: 0.74rem; color: #6E747E; background: rgba(0,0,0,0.25);
}
.ui-group {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.64rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: #6E747E; padding: 10px 16px 6px;
}
.ui-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 16px; font-size: 0.8rem; color: var(--muted);
  border-left: 2px solid transparent;
}
.ui-item .dot { width: 6px; height: 6px; border-radius: 50%; background: #48505A; flex: none; }
.ui-item.on {
  color: var(--text); background: rgba(0,198,162,0.09);
  border-left-color: var(--teal);
}
.ui-item.on .dot { background: var(--teal); box-shadow: 0 0 8px rgba(0,198,162,0.8); }
.ui-item .count { margin-left: auto; font-size: 0.7rem; color: #5C636D; font-variant-numeric: tabular-nums; }

/* Main panel */
.ui-main { padding: 16px 18px 18px; }
.ui-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding-bottom: 14px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ui-title { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
.ui-sub { font-size: 0.76rem; color: var(--muted); margin-top: 3px; }
.ui-score { text-align: right; flex: none; }
.ui-score .v {
  font-family: var(--font-display); font-weight: 600; font-size: 1.5rem;
  line-height: 1; color: var(--coral); letter-spacing: -0.02em;
}
.ui-score .l { font-size: 0.66rem; color: var(--muted); margin-top: 4px; letter-spacing: 0.05em; text-transform: uppercase; }

.ui-cols {
  display: grid; grid-template-columns: 1fr 92px 96px;
  gap: 12px; padding: 10px 0 8px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: #6E747E;
}
.ui-row {
  display: grid; grid-template-columns: 1fr 92px 96px;
  gap: 12px; align-items: center;
  padding: 9px 0; font-size: 0.83rem;
  border-top: 1px solid rgba(255,255,255,0.055);
  transition: background 0.16s ease;
}
.ui-row:hover { background: rgba(255,255,255,0.02); }
.ui-row .act { color: var(--text); }
.ui-risk { font-size: 0.72rem; font-weight: 600; font-family: var(--font-display); }
.ui-risk.hi  { color: #FF7A6B; }
.ui-risk.med { color: var(--coral); }
.ui-risk.low { color: #7C8894; }

.ui-foot {
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; gap: 10px;
  font-size: 0.72rem; color: var(--muted);
}
.ui-foot .saved { color: var(--teal); font-weight: 600; font-family: var(--font-display); }

@media (max-width: 720px) {
  .ui-body { grid-template-columns: 1fr; }
  .ui-rail { display: none; }
  .ui-cols, .ui-row { grid-template-columns: 1fr 70px 84px; gap: 8px; font-size: 0.78rem; }
}

/* --- Real product screenshots ------------------------------------------
   The source captures are low resolution and the interface is dense, so
   the treatment does three things: crops hard to one meaningful region so
   the dated chrome never shows, frames it in dark browser furniture so it
   sits on the page rather than floating, and fades the edges so the crop
   does not read as a rectangle cut out of a bigger picture.

   This is presentation. It cannot fix resolution. Higher-res captures at
   2x, cropped in advance, would beat all of it. */
.shot {
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--elev-2), 0 0 50px rgba(0,198,162,0.07);
  background: #12141A;
}
.shot-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.03);
}
.shot-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.shot-bar span {
  margin-left: 6px; font-family: var(--font-display); font-weight: 500;
  font-size: 0.74rem; color: var(--muted); letter-spacing: 0.04em;
}

/* The crop window. Height is fixed and the image is scaled and offset so
   only the region worth showing is visible. */
.shot-view { position: relative; height: 300px; overflow: hidden; }
.shot-view img {
  position: absolute;
  width: 190%;
  max-width: none;
  image-rendering: -webkit-optimize-contrast;
}
/* Focus on the risk columns, which are the legible, meaningful part */
.shot-catalogue img { top: -58px; left: -62%; }

.shot-view::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(18,20,26,0.85) 0%, transparent 12%, transparent 88%, rgba(18,20,26,0.85) 100%),
              linear-gradient(180deg, transparent 70%, rgba(18,20,26,0.9) 100%);
}
.shot-cap {
  padding: 13px 16px; font-size: 0.82rem; color: var(--muted);
  border-top: 1px solid rgba(255,255,255,0.09);
}
.shot-cap b { color: var(--text); font-weight: 600; }

@media (max-width: 720px) { .shot-view { height: 220px; } .shot-view img { width: 260%; } }

/* --- Mobile header ------------------------------------------------------
   The CTA was wrapping to two lines, which doubled the header height and
   pushed the hamburger off the edge. Buttons should never wrap. */
.btn { white-space: nowrap; }

@media (max-width: 720px) {
  .nav { gap: 10px; min-height: 58px; }
  .nav .btn-primary { font-size: 0.8rem; padding: 0.58em 0.95em; }
  .nav-toggle { font-size: 1.35rem; padding: 0 2px; line-height: 1; }
  .brand img { height: 17px; }
}

/* Below this the CTA and the menu button together are too much, so the
   CTA moves into the menu and the header keeps just brand and toggle. */
@media (max-width: 420px) {
  .nav .btn-primary { display: none; }
}

/* Menu-only items, such as the CTA once it leaves the header */
.menu-only { display: none; }

/* The mobile menu sits in the normal flow and the header simply grows to
   contain it. The earlier version positioned it absolutely inside a header
   that already had backdrop-filter, will-change and position:sticky, each
   of which creates a containing block. The menu ended up transparent and
   behind the page. In-flow is less clever and reliably correct. */
@media (max-width: 720px) {
  .wrap.nav { flex-wrap: wrap; }

  .nav-outer { background: #16171B; backdrop-filter: none; }

  nav:has(.nav-links) { order: 3; width: 100%; }

  .nav-links {
    display: none;
    width: 100%;
    flex-direction: column; gap: 2px;
    padding: 6px 0 14px;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 4px;
  }
  .nav-links.open { display: flex; }
  .nav-links > li { width: 100%; }
  .nav-links > li > a {
    display: block; width: 100%;
    padding: 0.8em 0.7em; font-size: 1rem;
    border-radius: 6px;
  }
  .nav-links > li > a.is-current { background: rgba(0,198,162,0.12); color: var(--teal); }

  .menu-only { display: block; margin-top: 8px; }
  .menu-only a {
    background: var(--teal); color: #06231D !important;
    text-align: center; font-weight: 600;
  }

  /* Hover dropdowns do not belong on touch */
  .mega { display: none !important; }
}

/* Fallback for browsers without :has(), which would otherwise leave the
   menu inline beside the logo instead of below it. */
@supports not (selector(:has(*))) {
  @media (max-width: 720px) {
    .wrap.nav > nav { order: 3; width: 100%; }
  }
}

/* --- Exit prompt --------------------------------------------------------
   One offer, one visible close button, Escape works, clicking the backdrop
   works. No countdown, no guilt-trip decline label. */
.exit {
  position: fixed; inset: 0; z-index: 220;
  background: rgba(8,9,11,0.72);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: 24px;
  opacity: 0; transition: opacity 0.24s ease;
}
.exit.show { opacity: 1; }
.exit-box {
  position: relative;
  max-width: 440px; width: 100%;
  background: linear-gradient(168deg, #20222A 0%, #16171B 100%);
  border: 1px solid rgba(0,198,162,0.3);
  border-radius: var(--r-panel);
  padding: 32px 32px 30px;
  box-shadow: var(--elev-2), 0 0 70px rgba(0,198,162,0.08);
  transform: translateY(10px) scale(0.985);
  transition: transform 0.28s cubic-bezier(0.2,0.7,0.2,1);
}
.exit.show .exit-box { transform: none; }
.exit-box h3 { font-size: 1.35rem; margin: 0 0 0.5em; letter-spacing: -0.02em; }
.exit-box p { color: var(--muted); font-size: 0.94rem; margin: 0 0 1.5em; }
.exit-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.exit-actions .btn { flex: 1 1 auto; justify-content: center; }
.exit-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: 1.5rem; line-height: 1; padding: 4px 8px;
}
.exit-close:hover { color: var(--text); }

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

/* --- Start band ---------------------------------------------------------
   Sits above the hero. Deliberately shorter than a hero so the page does
   not read as two front doors: it is an invitation to do something, and
   the hero underneath is the argument for why. */
.startband {
  position: relative; overflow: hidden;
  padding-block: clamp(38px, 5vw, 60px);
  background: linear-gradient(180deg, #1B1D22 0%, #16171B 100%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.startband .wrap { position: relative; z-index: 1; }
.startband-inner {
  display: grid; grid-template-columns: 1fr 0.9fr;
  gap: clamp(28px, 5vw, 60px); align-items: center;
}
.startband-h {
  font-size: clamp(1.7rem, 3.1vw, 2.4rem);
  font-weight: 600; letter-spacing: -0.035em; line-height: 1.08;
  max-width: 14ch; margin: 0 0 0.5em;
}
.startband-h em {
  font-style: normal;
  background: linear-gradient(96deg, var(--teal) 0%, #6FE7CE 60%, var(--teal) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.startband-p { color: var(--muted); font-size: 0.96rem; margin: 0; max-width: 40ch; }

.hq-card {
  background: #1C1D22;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-card);
  padding: 22px 22px 24px;
  box-shadow: var(--elev-2);
}
.hq-step { display: flex; align-items: center; gap: 14px; }
.hq-num {
  font-family: var(--font-display); font-weight: 600; font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); flex: none;
}
.hq-bar { flex: 1; height: 3px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.hq-bar i { display: block; height: 100%; width: 0; background: var(--teal); box-shadow: 0 0 10px rgba(0,198,162,0.6); }
.hq-q {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.02rem; line-height: 1.32; margin: 14px 0 16px;
}
.hq { display: grid; gap: 8px; }
.hq-opt {
  display: flex; align-items: center; gap: 12px;
  background: #23252B; border: 1px solid rgba(255,255,255,0.13);
  border-radius: 6px; padding: 12px 15px;
  color: var(--text); font-size: 0.93rem;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.hq-opt:hover { border-color: var(--teal); transform: translateX(3px); }
.hq-opt .k {
  width: 22px; height: 22px; border-radius: 5px; flex: none;
  border: 1px solid rgba(255,255,255,0.2); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.64rem; color: var(--muted);
}
.hq-opt:hover .k { border-color: var(--teal); color: var(--teal); }

@media (max-width: 820px) {
  .startband-inner { grid-template-columns: 1fr; }
  .startband-h { max-width: none; }
}

.hq-foot { font-size: .78rem; color: var(--muted); margin: 14px 0 0; }

/* --- Lit ghost button ---------------------------------------------------
   A bordered button on a dark ground reads flat when it stands alone.
   A soft pool of light behind it gives it somewhere to sit, and the border
   picks up a hint of teal so it is not purely an outline. */
.btn-lit {
  position: relative;
  isolation: isolate;
  border-color: rgba(0,198,162,0.35);
  background: rgba(0,198,162,0.06);
}
.btn-lit::before {
  content: "";
  position: absolute; inset: -14px -20px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(0,198,162,0.3), transparent 72%);
  filter: blur(14px);
  opacity: 0.65;
  transition: opacity 0.24s ease;
  pointer-events: none;
}
.btn-lit:hover {
  border-color: rgba(0,198,162,0.75);
  background: rgba(0,198,162,0.12);
}
.btn-lit:hover::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .btn-lit::before { transition: none; }
}

/* --- Consent banner -----------------------------------------------------
   Deliberately plain. Two buttons of equal prominence, no pre-ticked
   anything, and declining is one click rather than buried behind
   "manage preferences". */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: rgba(22,23,27,0.97);
  border-top: 1px solid rgba(0,198,162,0.3);
  box-shadow: 0 -14px 40px rgba(0,0,0,0.5);
  transform: translateY(110%);
  transition: transform 0.32s cubic-bezier(0.2,0.7,0.2,1);
}
.consent.show { transform: translateY(0); }
.consent-inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: 18px var(--gut);
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.consent-text {
  margin: 0; flex: 1 1 380px;
  font-size: 0.88rem; color: var(--muted); line-height: 1.55;
}
.consent-text a { color: var(--teal); }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.consent-actions .btn { font-size: 0.88rem; padding: 0.62em 1.3em; }

@media (max-width: 560px) {
  .consent-inner { gap: 14px; }
  .consent-actions { width: 100%; }
  .consent-actions .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; }
}

/* --- Header that gets out of the way -----------------------------------
   Slides away on the way down, returns the moment you scroll up. The
   transform is on the header itself rather than changing position, so
   nothing below it reflows and the page never jumps. */
/* No will-change here. It creates a containing block and a stacking
   context on an element that is already sticky and backdrop-filtered,
   which is what broke the menu. The transition alone is smooth enough. */
.nav-outer {
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.28s ease,
              background 0.28s ease;
}
/* Never tuck while the mobile menu is open, or it takes the menu with it */
.nav-outer.tucked:not(.menu-open) { transform: translateY(-100%); }

/* Once away from the very top it needs a little more presence, because it
   is now floating over content rather than sitting above it. */
.nav-outer.floating {
  background: rgba(22,23,27,0.94);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

@media (prefers-reduced-motion: reduce) {
  .nav-outer { transition: none; }
  .nav-outer.tucked { transform: none; }
}

/* --- Customer logo wall ------------------------------------------------
   Sits on the light panel. The source files are already greyscaled, so the
   filter here only evens out the last of the variation and lifts them on
   hover. Fixed row height with contain keeps wildly different aspect
   ratios optically similar in size. */
/* On dark, with every logo forced to flat white. The source files are a
   mix of dark, mid-grey and white artwork, so on a light panel the white
   ones were invisible. brightness(0) crushes any colour to black and
   invert(1) lifts it to white, which normalises all eight regardless of
   what they started as. */
/* Flex rather than a fixed grid, so an odd number of logos still centres
   instead of leaving a hole in the last row. */
.logo-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 4vw, 52px);
  max-width: 940px;
  margin-inline: auto;
}
.logo-wall span {
  display: grid;
  place-items: center;
  height: 52px;
  flex: 0 1 auto;
  min-width: 120px;
}
.logo-wall img {
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.logo-wall img:hover { opacity: 1; }

/* The source files have been auto-cropped to their artwork, so a shared
   width cap with a height guard now produces optically even logos.
   Capping height alone was the original mistake: it sized a 4:1 wordmark
   and a 1:1 badge to the same height and wildly different presence. */
.logo-wall img { max-width: 140px; max-height: 44px; }

/* National Portrait Gallery stacks three lines, so it is nearly square and
   would read tiny against the wordmarks at the same height. */
.lg-npg { max-height: 58px; max-width: 90px; }

/* NHS is a filled navy box with the letters knocked out of it, so any
   invert turns it into a solid white rectangle and loses the word. Left
   unfiltered: the navy sits almost flat against the charcoal and the white
   lettering carries it, which is the effect we want anyway. Sized down
   because a filled block reads heavier than a wordmark. */
.lg-nhs { filter: none; opacity: 0.9; max-height: 40px; }
.lg-nhs:hover { opacity: 1; }

@media (max-width: 820px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .logo-wall { grid-template-columns: repeat(2, 1fr); } }

.share-row {
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: var(--r-card);
  padding: 22px 24px;
  margin-bottom: 20px;
  background: #1C1D22;
}

/* Spacing between the result blocks. The share row used to come first and
   carried only a bottom margin, so swapping the order left them touching. */
.result .capture { margin-top: 30px; }
.result .share-row { margin-top: 18px; margin-bottom: 0; }
.share-label {
  font-family: var(--font-display); font-weight: 500;
  font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--muted); display: block; margin-bottom: 14px;
}
.share-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.share-actions .btn { font-size: 0.88rem; padding: 0.66em 1.15em; }

/* A <button> carries a default background that an <a> does not, so ghost
   buttons were rendering white-on-white. Reset it explicitly. */
button.btn { background: transparent; -webkit-appearance: none; appearance: none; }
.btn-ghost { background: transparent; }
button.btn-primary { background: var(--teal); }
.share-note { color: var(--muted); font-size: 0.79rem; margin: 14px 0 0; line-height: 1.5; }

/* ==========================================================================
   28. THE PRINTED REPORT
   Printing the web page produced a screenshot of a dark website, which is
   not a document. Instead a separate report is built in the markup, hidden
   on screen, and it is the only thing that prints. Proper A4 layout, navy
   wordmark, real tabular answers.
   ========================================================================== */

#report { display: none; }

@media print {
  @page { size: A4; margin: 15mm 14mm 14mm; }

  /* Only the report prints */
  body > * { display: none !important; }
  body > #report { display: block !important; }

  html, body {
    background: #FFFFFF !important;
    color: #16171B !important;
    font-family: "Onest", "Inter", system-ui, sans-serif;
    font-size: 10.5pt;
    line-height: 1.5;
  }

  #report * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .rp-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    border-bottom: 2px solid #16171B; padding-bottom: 10pt; margin-bottom: 18pt;
  }
  .rp-head img { height: 34pt; width: auto; }
  .rp-head .rp-meta { text-align: right; font-size: 8.5pt; color: #5B6168; line-height: 1.45; }

  .rp-title {
    font-family: "Sora", "Onest", sans-serif;
    font-size: 20pt; font-weight: 600; letter-spacing: -0.02em;
    margin: 0 0 4pt;
  }
  .rp-sub { color: #5B6168; font-size: 9.5pt; margin: 0 0 18pt; }

  /* Score block */
  .rp-score {
    display: flex; align-items: center; gap: 18pt;
    border: 1pt solid #D2D7DC; border-radius: 4pt;
    padding: 14pt 16pt; margin-bottom: 18pt;
  }
  .rp-score .rp-num {
    font-family: "Sora", sans-serif; font-weight: 600;
    font-size: 40pt; line-height: 1; letter-spacing: -0.03em;
  }
  .rp-score .rp-outof { font-size: 8.5pt; color: #5B6168; }
  .rp-score .rp-band { font-family: "Sora", sans-serif; font-weight: 600; font-size: 13pt; margin-bottom: 3pt; }
  .rp-score .rp-bandtext { font-size: 9.5pt; color: #3C4148; margin: 0; }

  .rp-h2 {
    font-family: "Sora", sans-serif; font-weight: 600; font-size: 11.5pt;
    margin: 0 0 8pt; padding-bottom: 4pt; border-bottom: 1pt solid #D2D7DC;
  }

  /* Answers table */
  .rp-table { width: 100%; border-collapse: collapse; margin-bottom: 18pt; font-size: 9pt; }
  .rp-table th {
    text-align: left; font-size: 7.5pt; letter-spacing: 0.08em; text-transform: uppercase;
    color: #5B6168; font-weight: 600; padding: 0 8pt 5pt 0; border-bottom: 1pt solid #D2D7DC;
  }
  .rp-table td { padding: 7pt 8pt 7pt 0; border-bottom: 0.5pt solid #E4E8EB; vertical-align: top; }
  .rp-table td:first-child { width: 42%; color: #16171B; }
  .rp-table td:nth-child(2) { color: #3C4148; }
  .rp-table td:last-child { width: 68pt; text-align: right; }
  .rp-tag {
    display: inline-block; font-size: 7.5pt; font-weight: 600;
    padding: 2pt 6pt; border-radius: 3pt; letter-spacing: 0.03em;
  }
  .rp-tag.good { background: #DEF3EE; color: #00614F; }
  .rp-tag.part { background: #FCEAE0; color: #93411A; }
  .rp-tag.gap  { background: #FBE2E4; color: #9E1D26; }

  /* Priority actions */
  .rp-action {
    border-left: 2.5pt solid #16171B; padding: 2pt 0 2pt 10pt;
    margin-bottom: 11pt; break-inside: avoid;
  }
  .rp-action.p1 { border-left-color: #C0392B; }
  .rp-action.p2 { border-left-color: #C87434; }
  .rp-action.p3 { border-left-color: #5B6168; }
  .rp-action h4 { font-family: "Sora", sans-serif; font-size: 10pt; font-weight: 600; margin: 0 0 2pt; }
  .rp-action p { margin: 0; font-size: 9pt; color: #3C4148; }

  .rp-next {
    border: 1pt solid #D2D7DC; border-radius: 4pt;
    padding: 12pt 14pt; margin-bottom: 14pt; break-inside: avoid;
  }
  .rp-next h4 { font-family: "Sora", sans-serif; font-size: 10pt; margin: 0 0 5pt; }
  .rp-next ol { margin: 0; padding-left: 14pt; font-size: 9pt; color: #3C4148; }
  .rp-next li { margin-bottom: 3pt; }

  .rp-foot {
    border-top: 1pt solid #D2D7DC; padding-top: 8pt; margin-top: 4pt;
    font-size: 7.5pt; color: #7A8087; line-height: 1.5;
  }
}

/* ---------------------------------------------------------------------------
   29. SAVE AS PDF PROMPT
   A web page cannot choose the destination in the browser's print window: it
   opens on whatever the machine last used, which on most work laptops is a
   physical printer. So we say what to pick, before the window appears.
   --------------------------------------------------------------------------- */
.saveas {
  position: fixed; inset: 0; z-index: 240;
  background: rgba(8,9,11,0.72);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: 24px;
  opacity: 0; transition: opacity 0.2s ease;
}
.saveas.show { opacity: 1; }
.saveas-box {
  position: relative;
  max-width: 430px; width: 100%;
  background: linear-gradient(168deg, #20222A 0%, #16171B 100%);
  border: 1px solid rgba(0,198,162,0.3);
  border-radius: var(--r-panel);
  padding: 30px 30px 26px;
  box-shadow: var(--elev-2), 0 0 70px rgba(0,198,162,0.08);
  transform: translateY(8px) scale(0.99);
  transition: transform 0.24s cubic-bezier(0.2,0.7,0.2,1);
}
.saveas.show .saveas-box { transform: none; }
.saveas-box h3 { font-size: 1.24rem; margin: 0 0 0.5em; letter-spacing: -0.02em; }
.saveas-box p { color: var(--muted); font-size: 0.93rem; margin: 0 0 1.3em; }
.saveas-box p strong { color: var(--text); font-weight: 600; }

/* A small picture of the row they are looking for in the print window. */
.saveas-hint {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 7px; padding: 10px 12px; margin: 0 0 1.4em;
  font-size: 0.84rem;
}
.saveas-hint .k { color: var(--muted); }
.saveas-hint .v {
  margin-left: auto; color: var(--teal); font-weight: 600;
  border: 1px solid rgba(0,198,162,0.35); border-radius: 5px;
  padding: 3px 9px; background: rgba(0,198,162,0.08);
}
.saveas-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.saveas-actions .btn { flex: 1 1 auto; justify-content: center; }

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