/* ══════════════════════════════════════════════════════════════════
   Self-hosted webfonts — added 12 Aug 2026.
   Replaces the Google Fonts CDN so the site makes NO third-party
   requests and no visitor IP leaves the EU. Do not reintroduce the
   <link> tags to fonts.googleapis.com. See wendel-platform in memory.
   Archivo is a variable font: one file covers weights 100–900.
   ══════════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'Archivo';
  src:url('fonts/archivo-var.woff') format('woff-variations'),
      url('fonts/archivo-var.woff') format('woff');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/plexmono-400.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/plexmono-500.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/plexmono-600.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/plexmono-700.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}

/* ══════════════════════════════════════════════════════════════════
   WENDEL CONSULT — shared stylesheet
   Green Glow direction. Palette drawn from the training decks.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* ── Ground ── */
  --ground:#05090f;
  --panel:#101822;      /* fault 1: was #0c1119 — a 1.055 luminance step off the page ground, below what the eye resolves. 1.117 now. */
  --navy:#0F1D33;          /* training-deck navy (intro video background) */
  --navy-deep:#0A1526;

  /* ── Training palette ── */
  --green:#22C55E;
  --green-lt:#37C871;
  --green-dp:#2FB866;
  --graphite:#3D3D3D;      /* structural hairlines */

  /* ── Track accents (default: Safety Core / green) ── */
  --accent:var(--green);
  --accent-lt:var(--green-lt);
  --accent-dp:var(--green-dp);
  --accent-glow-1:rgba(55,200,113,.30);
  --accent-glow-2:rgba(47,184,102,.09);
  --accent-soft:rgba(34,197,94,.08);

  --pad:48px;
  --white:#fff;
  --body:rgba(255,255,255,.72);
  --body-2:rgba(255,255,255,.68);
  --body-3:rgba(255,255,255,.62);
  --body-4:rgba(255,255,255,.6);
  --muted:rgba(255,255,255,.55);
  --muted-2:rgba(255,255,255,.55);

  /* Damped, non-bouncy — the CSS analogue of Remotion's damping:200 */
  --ease:cubic-bezier(.22,1,.36,1);
}

/* Safety Leadership track — blue accent, same layout */
[data-track="leadership"]{
  --accent:#38BDF8;
  --accent-lt:#5CCBFA;
  --accent-dp:#22A5E8;
  --accent-glow-1:rgba(56,189,248,.24);
  --accent-glow-2:rgba(56,189,248,.06);
  --accent-soft:rgba(56,189,248,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ground);
  color:var(--white);
  font-family:Archivo,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}

/* ══════════════════════════════════════════════════════════════════
   BRAND LOCKUP — ported from the intro video's wordmark
   The rule stays green on every page: it is the company mark,
   not the track accent.
   ══════════════════════════════════════════════════════════════════ */
.lockup{display:inline-flex;flex-direction:column;align-items:flex-start}
.lockup .word{
  font:600 16px/1 Archivo,sans-serif;
  letter-spacing:.34em;color:#fff;white-space:nowrap;
  padding-left:.34em;                       /* optically balance the tracking */
}
.lockup .rule{
  width:100%;height:2px;margin:7px 0 6px;
  background:linear-gradient(90deg,var(--green),var(--green-lt));
  transform-origin:left center;
}
.lockup .sub{
  font:500 9px/1 Archivo,sans-serif;
  letter-spacing:.48em;color:var(--green);white-space:nowrap;
  padding-left:.48em;
}

/* ── Header ── */
.header{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px var(--pad);
}
.nav{display:flex;align-items:center;gap:34px;font:500 13.5px/1 Archivo,sans-serif;color:var(--body)}
.nav a{transition:color .15s ease}
.nav a:hover{color:#fff}
.nav a.active{color:var(--accent)}
.nav .login{border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:9px 17px;color:#fff}
.nav .login:hover{border-color:var(--accent);background:var(--accent-soft)}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;font:600 15px/1 Archivo,sans-serif;
  font-family:Archivo,sans-serif;                 /* <button> would use the UA font */
  cursor:pointer;border:1px solid transparent;
  -webkit-appearance:none;appearance:none;        /* <button> would use buttonface */
  background:transparent;
  transition:filter .15s ease,background .15s ease,border-color .15s ease;
}
.btn-primary{background:linear-gradient(135deg,var(--accent-lt),var(--accent-dp));color:var(--ground)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{border-color:rgba(255,255,255,.3);color:var(--white)}
.btn-ghost:hover{border-color:var(--accent);background:var(--accent-soft)}
a:focus-visible,.btn:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;
}

/* ══════════════════════════════════════════════════════════════════
   HERO — homepage (tall) and track pages (short)
   ══════════════════════════════════════════════════════════════════ */
/* ⚠ `.hero` MUST NOT be `overflow:hidden`. 25 Aug 2026.
   The header — and therefore the About roll-down panel — lives inside
   this box. On `about.html` the hero is only ~220px tall and the panel
   is 400px, so `overflow:hidden` sliced the panel in half (Bo: "on the
   about page the bar hides behind the page box"). Same on `privacy/`.
   The clip only ever existed to stop the glow bleeding past the hero;
   the glow now carries its own bounds via `background-size`, so the
   clip is no longer needed. If you reintroduce it, the menu breaks. */
.hero{position:relative}

/* The glow fills the hero exactly (inset:0) and paints its gradient into
   a fixed-height area anchored at the top. Identical picture to the old
   `height:880px` + parent clip — but nothing overflows, so nothing needs
   clipping. Override `background-size` per hero variant, not `height`. */
.hero .glow{
  position:absolute;inset:0;pointer-events:none;
  background-repeat:no-repeat;
  background-position:top center;
  background-size:100% 880px;
  background-image:
    radial-gradient(ellipse 980px 660px at 50% 44%,
      var(--accent-glow-1), var(--accent-glow-2) 46%, rgba(5,9,15,0) 72%),
    radial-gradient(ellipse 520px 340px at 50% 40%,
      rgba(34,197,94,.16), rgba(5,9,15,0) 70%);
}
/* Background geometry lifted from the intro video */
.hero .geo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.9}

.hero-inner{
  position:relative;z-index:1;min-height:640px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:26px;padding:0 var(--pad) 40px;text-align:center;
}
.eyebrow{font:500 12px/1 'IBM Plex Mono',monospace;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.hero h1{font:700 72px/1.02 Archivo,sans-serif;letter-spacing:-.03em;color:#fff;max-width:15em}
.hero .lede{font:400 19px/1.6 Archivo,sans-serif;color:rgba(255,255,255,.66);max-width:36em}
.hero .cta-row{display:flex;gap:14px;padding-top:6px;flex-wrap:wrap;justify-content:center}
.hero .btn{padding:16px 28px}

/* ── Track-page hero: 520px glow region, centred, smaller type ── */
.hero-track .glow{
  background-size:100% 520px;
  background-image:radial-gradient(ellipse 900px 500px at 50% 20%,
    var(--accent-glow-1), var(--accent-glow-2) 46%, rgba(5,9,15,0) 74%);
}
.hero-track .hero-inner{
  min-height:0;padding:56px var(--pad) 0;gap:20px;justify-content:flex-start;
}
.hero-track h1{font:700 54px/1.08 Archivo,sans-serif;letter-spacing:-.025em;max-width:20em}
.hero-track .lede{font:400 18px/1.65 Archivo,sans-serif;color:var(--body-2);max-width:38em}
.hero-track .btn{margin-top:6px}

/* Dot + mono label pair */
.tagline{display:flex;align-items:center;gap:10px}
.tagline .dot{width:10px;height:10px;display:block;background:var(--accent)}
.tagline .label{font:500 11.5px/1 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ══════════════════════════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════════════════════════ */
section{padding:80px var(--pad)}
.section-dark{background:var(--panel);border-top:1px solid var(--graphite)}
/* ── Fault 1, second move: ONE band that is a different KIND of place ──
   Alternating two near-blacks gives rhythm but not hierarchy. The
   free-module callout is the page's one offer and now carries a real
   slide, so it gets the deck's own navy — the same radial the module
   player uses. Value AND hue change, once, where it earns its keep.
   ── */
.section-dark.band-navy{
  background:radial-gradient(1100px 620px at 78% 22%,#16385a 0%,var(--navy) 46%,var(--navy-deep) 100%);
}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.section-head h2{font:700 30px/1.1 Archivo,sans-serif;letter-spacing:-.015em;color:#fff}
.link-accent{font:500 13.5px/1 Archivo,sans-serif;color:var(--accent);transition:opacity .15s ease}
.link-accent:hover{opacity:.75}

/* Track pages: content panel sits tighter than a homepage section */
.panel-content{padding:56px var(--pad);margin-top:60px}
.panel-content h2{font:700 26px/1.1 Archivo,sans-serif;letter-spacing:-.01em;color:#fff;margin-bottom:28px}

/* ── Module name grid (hairline cells) ── */
.module-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--graphite);border:1px solid var(--graphite);
}
.module-grid .cell{
  background:var(--panel);padding:18px 20px;
  font:400 14.5px/1.4 Archivo,sans-serif;color:#fff;
  transition:background .15s ease;
}
.module-grid a.cell:hover{background:#111823}
.module-grid .cell.more{color:var(--accent)}
.roadmap-note{
  font:400 14.5px/1.6 Archivo,sans-serif;color:var(--muted);
  max-width:44em;margin-top:28px;
}

/* ── Homepage: two-track cards ── */
.tracks{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.track{border:1px solid var(--graphite);padding:34px;display:flex;flex-direction:column;gap:14px;transition:border-color .15s ease}
.track:hover{border-color:rgba(255,255,255,.28)}
.track .tag{display:flex;align-items:center;gap:10px}
.track .dot{width:10px;height:10px;display:block}
.track .tag .mono{font:500 11.5px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.track h3{font:700 24px/1.2 Archivo,sans-serif;color:#fff}
.track p{font:400 15.5px/1.55 Archivo,sans-serif;color:var(--body-3)}

/* ── Homepage: trust reasons ── */
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
/* ── Fault 4: the 01/02/03 columns are objects, not loose text ──
   They had no border, no background and no padding, so NN/g's F-pattern
   finding applied literally: a small group of related content needs a
   border or a background to read as one thing. Geometry follows the
   house cards (.track 34px, .tier 30px, 1px graphite) rather than
   inventing a third. The lift is a translucent white so the same rule
   works on the #05090f ground and on the .section-dark panel.
   ── */
.reason{
  display:flex;flex-direction:column;gap:10px;
  border:1px solid var(--graphite);
  background:rgba(255,255,255,.022);
  padding:26px 26px 28px;
}
.reason .num{margin-bottom:2px}
.reason .num{font:500 12px/1 'IBM Plex Mono',monospace;letter-spacing:.16em;color:var(--accent)}
.reason h3{font:600 18px/1.3 Archivo,sans-serif;color:#fff}
.reason p{font:400 15px/1.55 Archivo,sans-serif;color:var(--body-4)}

/* ── Homepage: free-sample callout ── */
.callout{display:flex;gap:60px;align-items:center}
.callout .copy{flex:1;display:flex;flex-direction:column;gap:16px}
.callout .kicker{font:500 11.5px/1 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.callout h2{font:700 28px/1.15 Archivo,sans-serif;color:#fff}
.callout p{font:400 15.5px/1.6 Archivo,sans-serif;color:var(--body-3);max-width:34em}
.callout .btn{padding:15px 24px;align-self:flex-start}
/* Poster frame uses the intro video's own background gradient */
.video{
  width:420px;height:236px;flex-shrink:0;position:relative;cursor:pointer;
  border:1px solid var(--graphite);
  background:radial-gradient(1200px 800px at 78% 18%,#16385a 0%,var(--navy) 55%,var(--navy-deep) 100%);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s ease;
}
.video:hover{border-color:rgba(255,255,255,.3)}
.video .play{width:58px;height:58px;border-radius:999px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:background .15s ease}
.video:hover .play{background:rgba(255,255,255,.18)}
.video .tri{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:16px solid #fff;margin-left:4px}
.video .stamp{position:absolute;bottom:14px;left:16px;font:500 11px/1 'IBM Plex Mono',monospace;color:rgba(255,255,255,.5)}

/* ══════════════════════════════════════════════════════════════════
   PRICING
   ══════════════════════════════════════════════════════════════════ */
/* Pricing uses a ruled header instead of a glow */
.header-ruled{border-bottom:1px solid var(--graphite)}

.page-head{
  padding:48px var(--pad) 0;display:flex;flex-direction:column;
  align-items:center;gap:22px;text-align:center;
}
.page-head h1{font:700 42px/1.1 Archivo,sans-serif;letter-spacing:-.02em;color:#fff}
.page-head .lede{font:400 16.5px/1.6 Archivo,sans-serif;color:rgba(255,255,255,.66);max-width:36em}

/* ── Segmented control (Individual / Company) ── */
.segmented{
  display:inline-flex;border:1px solid rgba(255,255,255,.2);
  border-radius:999px;padding:4px;gap:4px;
}
.segmented button{
  font:600 14px/1 Archivo,sans-serif;color:var(--muted);
  background:none;border:0;padding:11px 26px;border-radius:999px;
  cursor:pointer;font-family:Archivo,sans-serif;
  transition:color .15s ease,background .15s ease;
}
.segmented button:hover{color:#fff}
.segmented button[aria-selected="true"]{background:var(--accent);color:var(--ground)}
.segmented button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── Tier cards ── */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:38px var(--pad) 0}
.tier{border:1px solid var(--graphite);padding:30px;display:flex;flex-direction:column;gap:14px}
.tier .band{font:500 11.5px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.tier .price{font:700 38px/1 Archivo,sans-serif;color:#fff}
.tier .price .per{font:400 16px/1 Archivo,sans-serif;color:rgba(255,255,255,.5)}
.tier .price.words{font-size:32px}
.tier p{font:400 14.5px/1.5 Archivo,sans-serif;color:var(--body-4)}
.tier.featured{border-color:var(--accent);background:rgba(34,197,94,.06)}
.tier.featured .band{color:var(--accent)}

/* ── Individual view: one card, no seat tiers ── */
.solo-wrap{padding:38px var(--pad) 0;display:flex;justify-content:center}
.solo{
  width:100%;max-width:560px;border:1px solid var(--accent);
  background:rgba(34,197,94,.06);padding:34px 36px;
  display:flex;flex-direction:column;gap:14px;text-align:center;align-items:center;
}
.solo .band{font:500 11.5px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.solo .price{font:700 44px/1 Archivo,sans-serif;color:#fff}
.solo .price .per{font:400 17px/1 Archivo,sans-serif;color:rgba(255,255,255,.5)}
.solo p{font:400 14.5px/1.55 Archivo,sans-serif;color:var(--body-4);max-width:34em}
.solo .alt{
  width:100%;border-top:1px solid rgba(255,255,255,.14);
  padding-top:16px;margin-top:4px;
  font:400 14.5px/1.55 Archivo,sans-serif;color:var(--body-4);
}
.solo .alt strong{color:var(--accent);font-weight:600}
.solo .btn{padding:14px 26px;margin-top:4px}

/* ── Dashed cross-sell hint ── */
.hint{
  margin:44px var(--pad) 0;padding:24px 30px;
  border:1px dashed rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.hint .band{font:500 11px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:4px;display:block}
.hint .copy{font:400 15px/1.5 Archivo,sans-serif;color:#fff}
.hint .copy strong{color:var(--accent);font-weight:600}
.hint .btn{padding:12px 20px;font-size:13.5px;white-space:nowrap}

/* ── What every licence includes ── */
.licence{padding:44px var(--pad) 80px}
.licence .band{font:500 11px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:14px}
.licence-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--graphite);border:1px solid var(--graphite);
}
.licence-grid .row{
  background:var(--ground);padding:16px 20px;
  display:flex;justify-content:space-between;gap:20px;
  font:400 14.5px/1.35 Archivo,sans-serif;color:rgba(255,255,255,.75);
}
.licence-grid .row .val{color:#fff;text-align:right}

/* ══════════════════════════════════════════════════════════════════
   ABOUT
   ══════════════════════════════════════════════════════════════════ */
.hero-about .glow{
  background-size:100% 460px;
  background-image:radial-gradient(ellipse 800px 460px at 50% 10%,
    rgba(34,197,94,.22), rgba(34,197,94,.05) 46%, rgba(5,9,15,0) 74%);
}
.hero-about .hero-inner{min-height:0;padding:50px var(--pad) 0;gap:18px;justify-content:flex-start}
.hero-about h1{font:700 48px/1.1 Archivo,sans-serif;letter-spacing:-.02em;max-width:22em}
.hero-about .eyebrow{letter-spacing:.2em;color:rgba(255,255,255,.5)}

.bio{
  padding:34px var(--pad) 0;display:grid;grid-template-columns:340px 1fr;
  gap:50px;max-width:1200px;margin:0 auto;
}
.bio .side{display:flex;flex-direction:column;gap:14px}
.portrait{
  position:relative;overflow:hidden;
  width:100%;aspect-ratio:1;background:var(--navy);
  border:1px solid var(--graphite);
  display:flex;align-items:center;justify-content:center;
  font:500 12px/1 'IBM Plex Mono',monospace;letter-spacing:.1em;color:var(--muted-2);
}
/* Photo sits over the placeholder label; if the file is missing the <img>
   removes itself (see about.html) and the label shows through again. */
.portrait img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center 22%;   /* headshot-safe crop */
  /* Black & white: the site is monochrome + one accent, so a colour
     photo would be the only full-colour object on it. Delete this
     line to go back to colour. */
  filter:grayscale(1) contrast(1.06) brightness(1.02);
}
.bio .ident{display:flex;flex-direction:column;gap:5px}
.bio .name{font:700 19px/1.25 Archivo,sans-serif;letter-spacing:-.01em;color:#fff}
.bio .role{font:500 14.5px/1.4 Archivo,sans-serif;color:var(--body)}
.bio .cred{font:400 14px/1.5 Archivo,sans-serif;color:var(--muted)}
.bio .prose{display:flex;flex-direction:column;gap:16px}
.bio .prose p{font:400 17px/1.65 Archivo,sans-serif;color:var(--body)}

/* ── Signup / lead capture ── */
.signup-band{
  margin-top:60px;background:var(--panel);border-top:1px solid var(--graphite);
  padding:56px var(--pad);display:flex;justify-content:center;
}
.signup{
  width:100%;max-width:760px;border:1px solid rgba(34,197,94,.35);
  padding:36px 40px;display:flex;flex-direction:column;gap:16px;text-align:center;
}
.signup .band{font:500 11.5px/1 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.signup h2{font:700 24px/1.2 Archivo,sans-serif;color:#fff}
.signup p{font:400 15px/1.55 Archivo,sans-serif;color:var(--body-3)}
.signup form{display:flex;gap:10px;justify-content:center;margin-top:6px;flex-wrap:wrap}
.signup input{
  width:320px;font:400 14.5px/1 Archivo,sans-serif;color:#fff;
  background:transparent;border:1px solid rgba(255,255,255,.2);
  padding:14px 16px;
}
.signup input::placeholder{color:var(--muted-2)}
.signup input:hover{border-color:rgba(255,255,255,.35)}
.signup button{
  font:600 14.5px/1 Archivo,sans-serif;color:var(--ground);
  background:linear-gradient(135deg,var(--accent-lt),var(--accent-dp));
  border:0;padding:14px 22px;cursor:pointer;font-family:Archivo,sans-serif;
  transition:filter .15s ease;
}
.signup button:hover:not(:disabled){filter:brightness(1.08)}
.signup button:disabled{opacity:.6;cursor:default}
.signup .msg{
  font:400 14px/1.5 Archivo,sans-serif;min-height:1.5em;margin-top:2px;
}
.signup .msg.ok{color:var(--accent)}
.signup .msg.err{color:#F87171}

/* ── Stat strip ── */
.stats{
  padding:56px var(--pad);display:flex;justify-content:center;gap:50px;flex-wrap:wrap;
  font:500 12.5px/1 'IBM Plex Mono',monospace;letter-spacing:.06em;color:var(--muted-2);
  border-top:1px solid var(--graphite);
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — design is a 1440px desktop comp; this degrades it.
   No mobile layout was designed; see README note.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  :root{--pad:32px}
  .hero h1{font-size:56px}
  .hero-track h1{font-size:42px}
  .reasons{grid-template-columns:1fr 1fr}
  .module-grid{grid-template-columns:repeat(2,1fr)}
  .page-head h1{font-size:34px}
  .hero-about h1{font-size:38px}
  .bio{grid-template-columns:260px 1fr;gap:36px}
}
@media (max-width:768px){
  :root{--pad:22px}
  .nav{display:none}
  section{padding:56px var(--pad)}
  .panel-content{padding:44px var(--pad);margin-top:44px}
  .hero h1{font-size:40px}
  .hero-track h1{font-size:32px}
  .hero .lede{font-size:17px}
  .tracks,.reasons{grid-template-columns:1fr}
  .module-grid{grid-template-columns:1fr}
  .callout{flex-direction:column;align-items:flex-start;gap:32px}
  .video{width:100%;height:auto;aspect-ratio:420/236}
  .stats{gap:22px 34px}

  .page-head h1{font-size:28px}
  .hero-about h1{font-size:30px}
  .tier-grid{grid-template-columns:1fr;padding-top:28px}
  .licence-grid{grid-template-columns:1fr}
  .licence-grid .row{flex-direction:column;gap:4px}
  .licence-grid .row .val{text-align:left}
  .hint{flex-direction:column;align-items:flex-start;margin-top:28px}
  .bio{grid-template-columns:1fr;gap:28px}
  .portrait{max-width:280px}
  .bio .prose p{font-size:15.5px}
  .signup{padding:28px 22px}
  .signup input{width:100%}
  .signup form{flex-direction:column}
  .signup button{width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ══════════════════════════════════════════════════════════════════
   SITE FOOTER — legal identity + contact (added Aug 2026)
   ══════════════════════════════════════════════════════════════════ */
.site-footer{
  border-top:1px solid rgba(255,255,255,.08);
  padding:28px var(--pad) 34px;
  display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;
  font:400 12px/1.6 'IBM Plex Mono',ui-monospace,monospace;
  color:var(--muted);
  background:var(--ground);
}
.site-footer a{color:var(--body-3);transition:color .15s var(--ease)}
.site-footer a:hover{color:var(--accent)}
.site-footer .sep{opacity:.35}

/* ══════════════════════════════════════════════════════════════════
   SEO/AEO additions (Aug 2026): hero spec bar · answer-first paras · FAQ
   ══════════════════════════════════════════════════════════════════ */
.spec-bar{
  list-style:none;margin:26px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:0 34px;
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
  padding:16px 0;
}
.spec-bar li{display:flex;flex-direction:column;gap:4px}
.spec-bar .k{
  font:500 10px/1 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
}
.spec-bar .v{font:500 13.5px/1.35 Archivo,sans-serif;color:var(--white)}
@media (max-width:760px){ .spec-bar{gap:14px 22px} }

p.answer{
  max-width:72ch;margin:0 0 8px;
  font:400 17px/1.62 Archivo,sans-serif;color:var(--body);
}
p.answer strong{color:var(--white);font-weight:600}
p.answer a{color:var(--accent);border-bottom:1px solid rgba(34,197,94,.35)}

/* ── Fault 5: the FAQ was a wall ──
   Eight questions, three columns, ~500 words, every one open, ~700px of
   page. Native <details>, so it works with scripting off and the browser
   finds the text when a panel is open. One column — an accordion in three
   columns is a shape nobody can scan.
   ⚠ It also retires a W2 offender: the old minmax(320px,1fr) tracks
   overflowed a 320px viewport on their own.
   ── */
.faq{display:flex;flex-direction:column;padding:0;border-top:1px solid var(--graphite)}
.faq .qa{border-bottom:1px solid var(--graphite)}
.faq .qa summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;padding:17px 0;
}
.faq .qa summary::-webkit-details-marker{display:none}
.faq .qa summary h3{
  font:600 16px/1.45 Archivo,sans-serif;color:#fff;margin:0;flex:1 1 auto;
  transition:color .15s ease;
}
.faq .qa summary::after{
  content:'';flex:0 0 9px;width:9px;height:9px;margin-top:7px;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:rotate(45deg);transition:transform .18s var(--ease);
}
.faq .qa[open] summary::after{transform:rotate(-135deg);margin-top:10px}
.faq .qa summary:hover h3{color:var(--accent-lt)}
.faq .qa summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.faq .qa p{
  font:400 14.5px/1.62 Archivo,sans-serif;color:var(--body-3);
  max-width:72ch;margin:0;padding:0 34px 20px 0;
}
.faq .qa a{color:var(--accent)}
@media (prefers-reduced-motion:reduce){
  .faq .qa summary::after{transition:none}
}

/* ══════════════════════════════════════════════════════════════════
   HOMEPAGE TRACK SPLIT — added 21 Aug 2026
   Bo's brief: one headline, then two columns, each owning its colour.
   Green = Safety Core, blue = Safety Leadership.
   The column carries its accent locally via [data-track], so the
   page-level --accent stays green — the lockup rule is the COMPANY
   mark and must not turn blue. Do not lift --accent to the <html>.
   The colour is a wash over the dark ground, not a flat block: a
   pastel panel would be the only light object on a dark site.
   ══════════════════════════════════════════════════════════════════ */
.hero-split .glow{background-size:100% 620px}
.hero-split .hero-inner{min-height:0;padding:76px var(--pad) 0;gap:22px;justify-content:flex-start}
.hero-split h1{font:700 58px/1.06 Archivo,sans-serif;letter-spacing:-.03em;max-width:17em}
.hero-split .lede{max-width:40em}

.track-split{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--graphite);
  border-top:1px solid var(--graphite);
  border-bottom:1px solid var(--graphite);
  margin-top:60px;
}
.split{
  position:relative;background:var(--ground);
  padding:40px var(--pad) 38px;
  display:flex;flex-direction:column;gap:18px;
  isolation:isolate;
  transition:background .18s var(--ease);
}
.split::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,var(--accent-soft),rgba(0,0,0,0) 64%),
    radial-gradient(ellipse 640px 320px at 50% -10%,var(--accent-glow-2),rgba(0,0,0,0) 72%);
}
.split::after{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-dp));
}
.split:hover{background:#080d14}
.split .split-tag{display:flex;align-items:center;gap:10px}
.split .split-tag .dot{width:10px;height:10px;display:block;background:var(--accent)}
.split .split-tag .mono{font:500 11.5px/1 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.split h2{font:700 34px/1.1 Archivo,sans-serif;letter-spacing:-.02em;color:#fff}
.split .split-facts{display:flex;flex-direction:column;gap:15px;margin:2px 0 2px}
.split .fact{display:flex;flex-direction:column;gap:5px}
.split .fact .k{font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.split .fact .v{font:400 15.5px/1.55 Archivo,sans-serif;color:var(--body-2)}
.split .fact .v strong{color:#fff;font-weight:600}
.split .split-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:auto;padding-top:10px}
.split .split-cta .btn{padding:15px 26px}
.split .split-more{font:500 14px/1 Archivo,sans-serif;color:var(--accent);transition:opacity .15s ease}
.split .split-more:hover{opacity:.75}
.split .split-note{font:400 12px/1.5 'IBM Plex Mono',monospace;color:var(--muted-2)}

@media (max-width:1024px){ .hero-split h1{font-size:46px} }
@media (max-width:768px){
  .hero-split h1{font-size:34px}
  .hero-split .hero-inner{padding-top:52px}
  .track-split{grid-template-columns:1fr;margin-top:44px}
  .split{padding:34px var(--pad) 32px}
  .split h2{font-size:28px}
}

/* ══════════════════════════════════════════════════════════════════
   TRACK PAGE — the curriculum spine. Chosen by Bo 21 Aug 2026 from
   three options; the other two are gone. The argument the layout
   makes is that the track is a SEQUENCE, which is what justifies
   licensing all of it rather than picking three modules. If the
   stage order ever stops being real, this layout stops being honest
   — change the layout, don't fake the order.
   Accent comes from [data-track] on <html>, so the same markup is
   green on Safety Core and blue on Safety Leadership.
   ══════════════════════════════════════════════════════════════════ */
.band{font:500 10px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.pill{
  font:500 9.5px/1 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 8px;white-space:nowrap;
}
.pill-prod{color:var(--muted-2);border:1px solid rgba(255,255,255,.2)}

/* ── The stage rail: four cards, one per stage, anchor-linked down ── */
.stage-rail{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--graphite);
  border-top:1px solid var(--graphite);border-bottom:1px solid var(--graphite);
  margin-top:56px;
}
.stage-card{
  background:var(--ground);padding:20px 22px;
  display:flex;flex-direction:column;gap:7px;transition:background .15s ease;
}
.stage-card:hover{background:#0a1119}
.stage-n{font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.stage-name{font:600 17px/1.25 Archivo,sans-serif;color:#fff}
.stage-meta{font:500 11.5px/1 'IBM Plex Mono',monospace;letter-spacing:.08em;color:var(--muted-2)}

/* ── A stage: heading, then its modules down a spine ── */
.stage-sec{border-top:1px solid rgba(255,255,255,.06);scroll-margin-top:20px}
.stage-sec:first-of-type{border-top:0}
.stage-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding:26px var(--pad) 4px}
.stage-head h3{font:700 22px/1.15 Archivo,sans-serif;color:#fff}
.stage-status{
  font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2);border:1px solid rgba(255,255,255,.18);padding:5px 8px;
}
.clist{
  list-style:none;margin:0 0 0 var(--pad);padding:6px var(--pad) 16px;
  display:flex;flex-direction:column;border-left:2px solid var(--accent);
}
.crow{display:flex;gap:16px;padding:12px 0}
.cnum{font:500 11.5px/1.7 'IBM Plex Mono',monospace;color:var(--accent);min-width:2.2em}
.cbody{flex:1}
.ctitle{font:600 16px/1.35 Archivo,sans-serif;color:#fff;margin-right:8px}
.mdesc{font:400 14.5px/1.55 Archivo,sans-serif;color:var(--body-3);margin-top:3px;max-width:70ch}

/* ── Evidence: the trust block. Credentials, not learner counts —
     we have no learners yet, and an empty stat is worse than none. ── */
.evidence{border-top:1px solid var(--graphite);background:var(--panel);padding:34px var(--pad) 0;display:flex;flex-direction:column;gap:18px}
.ev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ev h4{font:600 15.5px/1.3 Archivo,sans-serif;color:#fff;margin-bottom:6px}
.ev p{font:400 14px/1.55 Archivo,sans-serif;color:var(--body-3)}
.ev a{color:var(--accent)}
.ctaband{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  padding:26px 0 34px;margin-top:8px;border-top:1px solid rgba(255,255,255,.07);
}
.ctaband .btn{padding:13px 22px;font-size:14px}
.ctaband .note{font:400 12.5px/1.5 'IBM Plex Mono',monospace;color:var(--muted-2)}

@media (max-width:1024px){
  .stage-rail{grid-template-columns:1fr 1fr}
  .ev-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .stage-rail{grid-template-columns:1fr;margin-top:40px}
  .ev-grid{grid-template-columns:1fr}
  .clist{margin-left:12px;padding-left:18px}
}

/* ══════════════════════════════════════════════════════════════════
   THE LEGAL BASIS BAR — added 21 Aug 2026 on Bo's instruction that the
   EU-legislation foundation must be stated on the front page and carried
   "the way through" the subpages and the PDF.
   It sits immediately under the hero on the homepage and both track
   pages, and a short version rides in the footer of every page.
   This is the product's whole claim — if it ever stops being true of a
   module, the module is the thing to fix, not this bar.
   ══════════════════════════════════════════════════════════════════ */
.legal-bar{
  position:relative;background:var(--panel);
  border-bottom:1px solid var(--graphite);
  padding:26px var(--pad) 28px;
  display:flex;gap:30px;align-items:flex-start;flex-wrap:wrap;
}
.legal-bar::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:1px;
  background:linear-gradient(90deg,var(--accent),rgba(255,255,255,.06) 42%);
}
.legal-bar .lb-label{
  flex:0 0 150px;
  font:500 10px/1.5 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  padding-top:2px;
}
.legal-bar .lb-body{flex:1;min-width:280px;max-width:72ch}
.legal-bar p{font:400 15px/1.62 Archivo,sans-serif;color:var(--body-2);margin:0}
.legal-bar p + p{margin-top:8px}
.legal-bar strong{color:#fff;font-weight:600}
.legal-bar .cites{
  margin-top:11px;display:flex;flex-wrap:wrap;gap:6px 8px;
}
.legal-bar .cite{
  font:400 11px/1 'IBM Plex Mono',ui-monospace,monospace;
  color:var(--muted);border:1px solid var(--graphite);padding:6px 9px;
}
.legal-bar .cite.key{color:var(--accent);border-color:var(--accent);opacity:.9}
@media (max-width:768px){
  .legal-bar{flex-direction:column;gap:12px;padding:22px var(--pad) 24px}
  .legal-bar .lb-label{flex:none}
  .legal-bar p{font-size:14.5px}
}
/* the rail sits straight under the legal bar — the bar already rules it off */
.legal-bar + .stage-rail{margin-top:0;border-top:0}

/* the short version, in every page footer */
.site-footer .legal{color:var(--body-3)}
.site-footer .legal strong{color:var(--accent);font-weight:400}

/* The honest line under the stage rail. Added 21 Aug 2026 after the site was
   found to publish three different module counts. It is derived from the
   module data at build time, never typed by hand — that is what stopped the
   numbers drifting in the first place. */
.roadmap-line{
  padding:20px var(--pad) 4px;margin:0;
  font:400 14.5px/1.6 Archivo,sans-serif;color:var(--muted);max-width:66em;
}
.roadmap-line strong{color:#fff;font-weight:600}

/* ── The records clause and the how-to-buy band. Added 21 Aug 2026.
     The records question is the one that decides an ISO 45001 sale, and the
     page previously answered it three different ways. It gets prose, not a
     table row, because a buyer has to be able to forward the paragraph. ── */
.clause{border:1px solid var(--graphite);border-left:3px solid var(--accent);padding:22px 26px;margin-top:22px;display:flex;flex-direction:column;gap:10px}
.clause .band{font:500 10px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:2px}
.clause p{font:400 15px/1.65 Archivo,sans-serif;color:var(--body-2);margin:0;max-width:74ch}
.clause strong{color:#fff;font-weight:600}
.clause .clause-note{font:400 13.5px/1.6 'IBM Plex Mono',ui-monospace,monospace;color:var(--muted-2);padding-top:4px;border-top:1px solid rgba(255,255,255,.08)}

.buy-band{
  margin:26px var(--pad) 0;padding:24px 26px;
  border:1px solid var(--accent);background:var(--accent-soft);
  display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.buy-band .band{font:500 10px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:8px}
.buy-band p{font:400 15px/1.62 Archivo,sans-serif;color:var(--body-2);margin:0;max-width:60ch}
.buy-band strong{color:#fff;font-weight:600}
.buy-cta{display:flex;gap:12px;flex-wrap:wrap}
.buy-cta .btn{padding:14px 24px}
@media (max-width:768px){ .buy-band{flex-direction:column;align-items:flex-start;gap:18px} }

/* ── CONTACT ROUTES. Added 21 Aug 2026. Three doors rather than one address,
     because "email us" makes the visitor compose the first sentence, and that
     is where most enquiries die. Each route carries a structured mailto so the
     reply already has the facts in it. ── */
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:34px var(--pad) 0}
.route{
  border:1px solid var(--graphite);padding:26px 26px 24px;
  display:flex;flex-direction:column;gap:10px;
  transition:border-color .15s ease,background .15s ease;
}
.route:hover{border-color:var(--accent);background:var(--accent-soft)}
.route .r-k{font:500 10px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.route h2{font:700 21px/1.2 Archivo,sans-serif;color:#fff}
.route p{font:400 14.5px/1.6 Archivo,sans-serif;color:var(--body-3)}
.route .r-go{margin-top:auto;padding-top:8px;font:500 13.5px/1 Archivo,sans-serif;color:var(--accent)}
@media (max-width:1024px){ .routes{grid-template-columns:1fr} }

/* ── Nav: Portal login demoted from a bordered pill to a quiet link, and a
     language switch that is on every page rather than only the homepage.
     The most prominent item in a nav should not be the one only existing
     customers click. ── */
.nav .login{
  border:0;border-radius:0;padding:0;color:var(--muted);
  font-size:13px;
}
.nav .login:hover{background:none;color:#fff}
.nav .lang{
  font:500 11.5px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.12em;
  border:1px solid rgba(255,255,255,.22);padding:7px 10px;color:var(--body-3);
}
.nav .lang:hover{border-color:var(--accent);color:#fff}

/* ══════════════════════════════════════════════════════════════════
   HOMEPAGE H1 — held to two lines, 23 Aug 2026
   The sentence is 71 characters. At 58px it needs ~1030px of line to
   fall in two, so the measure is set in em and the size in vw, and
   the two track together. Do not narrow the max-width without
   dropping the size, or it goes back to three lines.
   ══════════════════════════════════════════════════════════════════ */
.hero-split h1{
  font-size:clamp(26px,4.3vw,58px);
  max-width:19.5em;
  text-wrap:balance;
}
@media (max-width:768px){ .hero-split h1{max-width:none} }

/* ══════════════════════════════════════════════════════════════════
   INFO TABS — the About / Legal strip under "At a glance"
   Replaces the old .legal-bar block. Same content, one panel at a
   time, so the law list can be complete without owning the page.
   ⚠ Progressive enhancement: the first panel is the only one without
   [hidden], so with JavaScript off the page still reads. The script
   only ever ADDS hidden — it never removes content.
   ══════════════════════════════════════════════════════════════════ */
.info-tabs{background:var(--ground)}
.it-strip{
  display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-bottom:1px solid var(--graphite);margin-bottom:34px;
  scrollbar-width:none;
}
.it-strip::-webkit-scrollbar{display:none}
.it-tab{
  appearance:none;-webkit-appearance:none;background:none;border:0;cursor:pointer;
  white-space:nowrap;position:relative;padding:15px 24px 16px;
  font:500 11px/1 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  transition:color .18s var(--ease);
}
.it-tab:first-child{padding-left:0}
.it-tab::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--ease);
}
.it-tab:hover{color:var(--body-2)}
.it-tab[aria-selected="true"]{color:#fff}
.it-tab[aria-selected="true"]::after{transform:scaleX(1)}
.it-tab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.it-panel[hidden]{display:none}
.it-panel p{font:400 15.5px/1.65 Archivo,sans-serif;color:var(--body-2);max-width:74ch}
.it-panel p + p{margin-top:12px}
.it-panel strong{color:#fff;font-weight:600}
.it-panel .it-lead{font-size:17px;color:var(--body)}
.it-panel .it-more{margin-top:20px}
.it-panel .cites{margin-top:20px;display:flex;flex-wrap:wrap;gap:6px 8px}
.it-panel .cite{
  font:400 11px/1 'IBM Plex Mono',ui-monospace,monospace;color:var(--muted);
  border:1px solid var(--graphite);padding:6px 9px;
}
.it-panel .cite.key{color:var(--accent);border-color:var(--accent);opacity:.9}
.it-panel .it-foot{margin-top:26px;font-size:13.5px;color:var(--muted);max-width:82ch}

/* the framework, given its own line above the grid */
.lawframe{
  margin-top:24px;display:flex;gap:22px;align-items:baseline;flex-wrap:wrap;
  border-left:2px solid var(--accent);padding:14px 0 14px 20px;
  background:linear-gradient(90deg,var(--accent-soft),rgba(255,255,255,0) 60%);
}
.lawframe .lf-n{
  font:600 15px/1.3 'IBM Plex Mono',ui-monospace,monospace;color:#fff;letter-spacing:.02em;
}
.lawframe .lf-t{font:400 14.5px/1.55 Archivo,sans-serif;color:var(--body-2);max-width:70ch}

.lawgrid{
  margin-top:30px;display:grid;gap:32px 44px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.lawgroup.wide{grid-column:1/-1}
.lawgroup.wide .lawlist{columns:2;column-gap:44px}
.lawgroup.wide .lawlist li{break-inside:avoid}
.lawgroup h3{
  font:600 11px/1.4 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:12px;
}
.lawlist{list-style:none;margin:0;padding:0}
.lawlist li{
  display:flex;gap:14px;align-items:baseline;padding:8px 0;
  border-top:1px solid rgba(255,255,255,.06);
}
.lawlist b{
  flex:0 0 124px;font:500 12px/1.45 'IBM Plex Mono',ui-monospace,monospace;
  color:#fff;letter-spacing:.01em;
}
.lawlist span{font:400 13.5px/1.45 Archivo,sans-serif;color:var(--body-3)}
@media (max-width:900px){
  .lawgroup.wide .lawlist{columns:1}
}
@media (max-width:600px){
  .it-tab{padding:14px 16px 15px;letter-spacing:.12em}
  .lawlist li{flex-direction:column;gap:2px}
  .lawlist b{flex:none}
  .lawframe{gap:8px}
}

/* The homepage's problem statement, moved onto the two track pages
   23 Aug 2026 — it was deleted from the index hero and lives here now. */
.hero-track .lede.lede-gap{margin-top:2px;color:var(--body-3)}
.hero-track .lede.lede-gap strong{color:rgba(255,255,255,.88);font-weight:600}

/* The Danish h1 is 79 characters against the English 71, and Danish
   compounds are longer — at the shared size it falls in three lines.
   ⚠ And the binding constraint is NOT the sentence length — it is the
   23-character compound "arbejdsmiljøkompetencer". The first line
   cannot break inside it, so the measure has to be wide enough to
   hold everything up to and including that word. Verified two lines
   from 1440 down to 600px; three below, as in English.
   If the Danish headline is ever reworded without that compound,
   delete this block rather than leaving two rules fighting. */
html[lang="da"] .hero-split h1{
  font-size:clamp(23px,3.55vw,52px);
  max-width:24.5em;
}
@media (max-width:768px){ html[lang="da"] .hero-split h1{max-width:none} }

/* ══════════════════════════════════════════════════════════════════
   NAV ROLL-DOWN — "About" drops a panel, mst.dk style. 24 Aug 2026
   Bo asked for a "roll bar" and meant THIS — a roll-DOWN menu in the
   top navigation — not the mid-page tab strip that was built first.
   ⚠ CSS ONLY, deliberately. It opens on :hover and on :focus-within,
   so it works with JavaScript disabled and it works from the keyboard:
   tabbing onto "About" opens the panel, which makes the links inside
   focusable. Do not "improve" this with a JS toggle without keeping
   both of those true. The trigger is still a real link to about.html,
   so clicking it goes to the About page as before.
   ══════════════════════════════════════════════════════════════════ */
.navdrop{position:relative;display:inline-flex}
.navdrop-t{display:inline-flex;align-items:center;gap:7px}
.navdrop .chev{
  width:7px;height:7px;display:inline-block;margin-top:-3px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);opacity:.55;transition:transform .2s var(--ease),opacity .2s var(--ease);
}
.navdrop:hover .chev,.navdrop:focus-within .chev{opacity:1;transform:rotate(-135deg);margin-top:2px}

/* the hover bridge — without it the panel closes in the gap below the link */
.navdrop::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}

.navdrop-panel{
  position:absolute;top:calc(100% + 12px);left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:340px;max-width:min(400px,90vw);
  display:flex;flex-direction:column;
  background:#0b1320;border:1px solid var(--graphite);border-top:2px solid var(--accent);
  box-shadow:0 26px 64px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;pointer-events:none;z-index:80;
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.navdrop:hover .navdrop-panel,
.navdrop:focus-within .navdrop-panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.navdrop-panel > a{
  display:block;padding:13px 20px;border-top:1px solid rgba(255,255,255,.06);
  transition:background .15s var(--ease);
}
.navdrop-panel > a:first-child{border-top:0}
.navdrop-panel > a:hover,.navdrop-panel > a:focus-visible{background:rgba(255,255,255,.05);outline:0}
.navdrop-panel > a:focus-visible{box-shadow:inset 3px 0 0 var(--accent)}
.navdrop-panel b{
  display:block;font:600 14px/1.3 Archivo,sans-serif;color:#fff;letter-spacing:-.005em;
}
.navdrop-panel em{
  display:block;margin-top:3px;font-style:normal;
  font:400 12.5px/1.45 Archivo,sans-serif;color:var(--muted);
}
.navdrop-panel > a:hover b{color:var(--accent)}

/* the whole nav is hidden below 768px already; keep the panel out of the way */
@media (max-width:768px){ .navdrop-panel,.navdrop .chev{display:none} }

/* ══════════════════════════════════════════════════════════════════
   STICKY BAR — the way back. 24 Aug 2026
   Bo: "when you get into About you need a navigation rout back —
   e.g. logo to entrance page". Landing on a deep link scrolls you
   past the header, and there was then no logo and no nav anywhere.
   ⚠ WHY A SECOND BAR RATHER THAN A STICKY HEADER: the real header
   lives INSIDE `.hero` on seven pages — `position:sticky` there can
   only stick within the hero's own box, so it scrolls away with it —
   and on `pricing.html` / `contact.html` it is a direct child of
   <body> instead. Fixing the real header would need different layout
   compensation on three different page shapes.
   This bar is built by cloning the page's own header in intro.js, so
   it inherits the right links and the right language automatically,
   and NOTHING in the existing layout moves.
   ══════════════════════════════════════════════════════════════════ */
.stickybar{
  position:fixed;top:0;left:0;right:0;z-index:90;
  background:rgba(5,9,15,.90);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--graphite);
  transform:translateY(-101%);
  transition:transform .3s var(--ease);
}
.stickybar.in{transform:translateY(0)}
.stickybar .header{position:static;padding-top:11px;padding-bottom:11px}
.stickybar .lockup .sub{display:none}
.stickybar .lockup .word{font-size:13px}
.stickybar .lockup .rule{margin-top:5px}
.stickybar .nav{font-size:14px}
/* the panel hangs off a fixed bar, so it needs its own stacking room */
.stickybar .navdrop-panel{z-index:95}
@media (prefers-reduced-motion:reduce){ .stickybar{transition:none} }

/* ── Visually hidden, still announced ──
   Site-wide utility. Was inline in verify/index.html only, which left
   about.html's newsletter label with no styling and no accessible name.
   ── */
.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}

/* ── Homepage: the product, shown ──
   Replaced the dead "MODULE INTRO · 0:12" play block (a role=button with no
   handler anywhere) in the free-module callout. The image is a real shipped
   slide from Core_02, so the site's central claim is visible, not asserted.
   ── */
.proof-shot{width:420px;flex-shrink:0;display:flex;flex-direction:column;gap:10px;margin:0}
.proof-shot img{width:100%;height:auto;display:block;border:1px solid var(--graphite)}
.proof-shot figcaption{font:500 11px/1.45 'IBM Plex Mono',monospace;letter-spacing:.06em;color:var(--muted-2)}
@media(max-width:768px){ .proof-shot{width:100%} }

/* ── Answer sections: heading holds the left edge, prose fills the right ──
   Fault 3 of the 21 Aug diagnosis. Head sat at x=48 and the answer at
   x=96, and the answer stopped at 856 of 1440 — three left edges and
   584px of empty right page. The heading column is the same 340px
   .hero-about already uses, so this is not a new measure.
   ⚠ The numbered rail and the FAQ grid BREAK OUT to full width on row 2 —
   squeezing them into the right column costs more than the header gains.
   ── */
.section-split{
  display:grid;grid-template-columns:340px minmax(0,1fr);
  column-gap:56px;row-gap:34px;align-items:start;
}
.section-split > .section-head{grid-column:1;grid-row:1;margin-bottom:0;display:block}
.section-split > .section-head h2{font-size:27px;line-height:1.18}
.section-split > .section-head .link-accent{display:inline-block;margin-top:14px}
/* ⚠ column only, NEVER an explicit row — #legal-basis has TWO p.answer
   siblings and pinning both to row 1 stacked them on top of each other. */
.section-split > p.answer{grid-column:2;min-width:0}
.section-split > .reasons{grid-column:1 / -1;padding-left:0;padding-right:0}
/* the accordion is one column, so it belongs BESIDE the heading, not under it */
.section-split > .faq{grid-column:2}
@media(max-width:1000px){
  .section-split{grid-template-columns:1fr;row-gap:24px}
  .section-split > .section-head{grid-row:auto;margin-bottom:0}
  .section-split > .section-head h2{font-size:30px}
  .section-split > p.answer{grid-column:1}
  .section-split > .reasons,.section-split > .faq{grid-column:1;grid-row:auto}
}