/* ==========================================================================
   Nero & Associates — design system
   Built to Website Architecture Specification v1.6 §9.

   The five governing rules are enforced here, in the token layer, not page by
   page (§0 Rule 4). In particular:

   Rule 4 — the colour law. Nothing in this file hard-codes mint or violet on a
   component. Components paint with var(--accent), and --accent is set by the
   [data-eco] scope on <body>: beneco→violet, reveco→mint, none→sand. A page
   that belongs to neither ecosystem physically cannot render an ecosystem
   colour, because the token resolves to sand.

   Rule 5 — no gradient-filled text. background-clip:text appears nowhere. The
   6px top bar is the only gradient.
   ========================================================================== */

/* Manrope, §9.1 — the real typeface, all four specified weights.
   Recovered un-subsetted (740 glyphs each) from the embedded fonts in the
   brand guidelines PDF, so this is the genuine article rather than a stand-in.
   Self-hosted per §6.1. Convert to WOFF2 before production for ~40% of these
   bytes; TTF is used here only because no converter exists in this
   environment. */
@font-face{font-family:"Manrope";src:url("../fonts/Manrope-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/Manrope-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/Manrope-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/Manrope-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}

:root{
  /* ---- brand constants, §9.1 — fills, rules, icons, large display only ---- */
  --violet:#7B61FF;
  --mint:#5FD19A;
  --sand:#DECFB2;
  --ink:#222222;

  /* ---- dark surfaces, §9.1 ---- */
  --page:#282828;
  --card:#2E2E2E;
  --well:#252525;
  --rule:#3C3C3C;
  --body:#B4B4B8;
  --muted:#9A9AA2;          /* raised from #8A8A90, which failed AA */
  --white:#FFFFFF;

  /* ---- accessible text variants, §9.2 — body-size text only ---- */
  --violet-text-on-dark:#9B85FF;   /* 5.05:1 on #282828 */
  --violet-text-on-light:#5B3FD1;  /* 6.83:1 on #FFFFFF */
  --mint-text-on-light:#157A4E;    /* 5.35:1 on #FFFFFF */
  --mint-text-on-dark:#5FD19A;     /* 7.77:1 — brand value passes as-is */

  /* ---- interactive, §9.2 ---- */
  --btn-primary-bg:#5B3FD1;
  --btn-primary-text:#FFFFFF;
  --btn-secondary-bg:#5FD19A;
  --btn-secondary-text:var(--ink);

  /* ---- the only sanctioned gradient, §9.1 ---- */
  --gradient-bar:linear-gradient(90deg,#7B61FF 0%,#6A8FD8 45%,#5FD19A 100%);

  /* ---- type scale --------------------------------------------------------
     One ratio: 1.2, anchored on the 17px body, rounded to whole pixels.
       12 · 14 · 17 · 20 · 24 · 29 · 35 · 42 · 51 · 61 · 73
     Every font-size on this site resolves to one of these steps, and every
     fluid size clamps between two steps — never between arbitrary numbers,
     which is what makes it a scale rather than a collection of sizes.
     ---------------------------------------------------------------------- */
  --fs-1:.75rem;      /* 12 */
  --fs-2:.875rem;     /* 14 */
  --fs-3:1.0625rem;   /* 17 — body, the anchor */
  --fs-4:1.25rem;     /* 20 */
  --fs-5:1.5rem;      /* 24 */
  --fs-6:1.8125rem;   /* 29 */
  --fs-7:2.1875rem;   /* 35 */
  --fs-8:2.625rem;    /* 42 */
  --fs-9:3.1875rem;   /* 51 */
  --fs-10:3.8125rem;  /* 61 */
  --fs-11:4.5625rem;  /* 73 */

  /* Roles. Fluid sizes interpolate between two scale steps. */
  --fs-micro:var(--fs-1);
  --fs-fine:var(--fs-2);
  --fs-body:var(--fs-3);
  --fs-lede:var(--fs-3);
  --fs-h3:var(--fs-5);
  --fs-h2:var(--fs-6);
  --fs-display-sm:var(--fs-7);
  --fs-display:var(--fs-8);

  /* ---- leading: tightens as size grows, which is how optical sizing works */
  --lh-display:1.02;
  --lh-h2:1.12;
  --lh-h3:1.3;
  --lh-lede:1.5;
  --lh-body:1.6;
  --lh-fine:1.5;
  --lh-micro:1.4;

  /* ---- tracking: negative on display, positive on uppercase micro ------- */
  --ls-display:-.03em;
  --ls-h2:-.022em;
  --ls-h3:-.012em;
  --ls-lede:-.005em;
  --ls-body:0;
  --ls-caps:.16em;        /* eyebrows, micro labels */
  --ls-caps-tight:.1em;   /* buttons and larger uppercase */

  /* ---- spacing rhythm (SDI's generous section cadence) ---- */
  --gut:clamp(1.25rem,4.5vw,4.5rem);

  /* ---- vertical rhythm ---------------------------------------------------
     Section padding was measured cramped: band-tight, the CTA block and the
     footer all sat at 44-48px against 35px headings — roughly 1.2x the type,
     where a section needs 2-3x to read as a section. The hero was worst: it
     had LESS air (54px) than the body sections it introduces (73px).
     Doubled below; --band raised so the hierarchy still holds above tight.
     ---------------------------------------------------------------------- */
  --band:clamp(4rem,13.2vw,9rem);          /* was 4.5/8vw/7.5 -> 73px @908 */
  --band-tight:calc(var(--band) * .72);    /* was .6 -> 44px @908 */

  /* Internal rhythm. One value per relationship, so the same pairing is not
     16px in one section and 28px in another. */
  --sp-label:1.25rem;   /* eyebrow -> heading */
  --sp-head:1.25rem;    /* heading -> lede */
  --sp-block:2rem;      /* lede -> action, block -> block */
  --sp-group:3rem;      /* heading group -> content grid */
  /* ---- motion ------------------------------------------------------------
     One easing curve, and it decelerates into rest: both control-point y
     values sit inside 0..1, so nothing can overshoot and settle back — no
     bounce is structurally impossible here, not just avoided by taste.
     Every duration lives in the 200-300ms band.
     ---------------------------------------------------------------------- */
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur-fast:200ms;   /* colour-only shifts */
  --dur:250ms;        /* the default: lifts, borders, panels */
  --dur-slow:300ms;   /* scroll reveal, the largest move on screen */

  /* Default scope: neither ecosystem. Sand. */
  --accent:var(--sand);
  --accent-text:var(--sand);
  --accent-ink:var(--ink);
}

/* Responsive type steps discretely rather than interpolating with vw.
   A vw clamp passes through every value between its endpoints — at 908px the
   old h2 clamp rendered 30.9px, which is on no step at all. Stepping at
   breakpoints keeps every rendered size on the scale at every viewport. */
@media(min-width:768px){
  :root{--fs-lede:var(--fs-4);--fs-h2:var(--fs-7);
        --fs-display-sm:var(--fs-8);--fs-display:var(--fs-9)}
}
@media(min-width:1100px){
  :root{--fs-h2:var(--fs-8);--fs-display-sm:var(--fs-9);--fs-display:var(--fs-10)}
}
@media(min-width:1400px){
  :root{--fs-display:var(--fs-11)}
}

/* ---- RULE 4: the colour law, resolved once, structurally ---- */
[data-eco="beneco"]{
  --accent:var(--violet);
  --accent-text:var(--violet-text-on-dark);
  --accent-ink:var(--white);
}
[data-eco="reveco"]{
  --accent:var(--mint);
  --accent-text:var(--mint-text-on-dark);
  --accent-ink:var(--ink);
}
[data-eco="none"]{
  --accent:var(--sand);
  --accent-text:var(--sand);
  --accent-ink:var(--ink);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--body);
  font-family:"Manrope",system-ui,-apple-system,sans-serif;
  font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
/* Superscripts take the micro step rather than the UA's relative default,
   which rendered them at 9.8px — off-scale and below a legible floor for a
   marker reviewers have to notice. line-height:0 keeps the line box intact. */
sup{font-size:var(--fs-micro);line-height:0;vertical-align:super}
fieldset{border:0;margin:0;padding:0;min-inline-size:0}
legend{padding:0;display:block;width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--accent);color:var(--accent-ink)}

/* ---- GradientBar — the only gradient in the brand ---- */
.gradient-bar{height:6px;background:var(--gradient-bar)}

/* ---- layout ---- */
.shell{max-width:1320px;margin-inline:auto;padding-inline:var(--gut)}
.band{padding-block:var(--band)}
.band-tight{padding-block:var(--band-tight)}
.rule-top{border-top:1px solid var(--rule)}

/* Asymmetric rail (Phobos's label-plus-content discipline). Never centred. */
.split{display:grid;gap:1.75rem}
@media(min-width:980px){
  .split{grid-template-columns:13rem minmax(0,1fr);gap:clamp(2.5rem,5vw,5.5rem)}
}
.split-wide{display:grid;gap:2.5rem}
@media(min-width:980px){
  .split-wide{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:clamp(2.5rem,5vw,5rem);align-items:start}
}

/* ---- type ---- */
.eyebrow{
  font-family:"Manrope",sans-serif;font-size:var(--fs-micro);
  line-height:var(--lh-micro);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted);
  display:block;font-weight:700;
}
.eyebrow-accent{color:var(--accent-text)}
.display{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);
  font-weight:800;color:var(--white);text-wrap:balance}
.h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);
  font-weight:800;color:var(--white);text-wrap:balance}
.h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);
  font-weight:700;color:var(--white)}
.lede{font-size:var(--fs-lede);line-height:var(--lh-lede);
  letter-spacing:var(--ls-lede);color:var(--body);max-width:62ch}
.prose{max-width:68ch}
.prose p+p{margin-top:1.1rem}
.muted{color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}

/* Per-word colour in the hero. Solid colour only — never background-clip. */
.w-beneco{color:var(--violet-text-on-dark)}
.w-reveco{color:var(--mint-text-on-dark)}
.w-sand{color:var(--sand)}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;border:0;cursor:pointer;
  padding:1rem 1.6rem;border-radius:3px;font-weight:700;
  font-size:var(--fs-fine);letter-spacing:var(--ls-caps-tight);text-transform:uppercase;
  transition:transform var(--dur) var(--ease),filter var(--dur) var(--ease);
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn svg{transition:transform var(--dur) var(--ease);flex:none}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--btn-primary-bg);color:var(--btn-primary-text)}
.btn-secondary{background:var(--btn-secondary-bg);color:var(--btn-secondary-text)}
.btn-ghost{background:transparent;color:var(--white);
  box-shadow:inset 0 0 0 1px var(--rule);
  transition:box-shadow var(--dur-fast) var(--ease)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.btn-sm{padding:.65rem 1.1rem;font-size:var(--fs-micro)}


/* ---- Header + MegaMenu ---- */
.header{position:sticky;top:0;z-index:50;background:var(--page);
  border-bottom:1px solid var(--rule)}
.header-in{display:flex;align-items:center;gap:1.25rem;padding-block:.9rem}
.logo img{height:34px;width:auto}
.nav{display:none;gap:1.5rem;margin-left:1rem}
@media(min-width:1080px){.nav{display:flex}}
.nav-item{position:relative}
.nav-link{font-size:var(--fs-fine);font-weight:700;line-height:var(--lh-fine);
  letter-spacing:var(--ls-body);
  color:var(--body);padding-block:1.5rem;display:inline-block;white-space:nowrap;
  transition:color var(--dur-fast) var(--ease)}
.nav-link:hover,.nav-item:focus-within .nav-link{color:var(--white)}
.mega{
  position:absolute;top:100%;left:-1rem;min-width:20rem;background:var(--card);
  border:1px solid var(--rule);border-top:2px solid var(--accent);
  border-radius:0 0 4px 4px;padding:.65rem;opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:opacity var(--dur-fast) var(--ease),
  transform var(--dur-fast) var(--ease),visibility var(--dur-fast);
}
.nav-item:hover .mega,.nav-item:focus-within .mega{opacity:1;visibility:visible;
  transform:none}
.mega a{display:block;padding:.5rem .7rem;border-radius:3px;font-size:var(--fs-fine);
  color:var(--body)}
.mega a:hover{background:var(--well);color:var(--white)}
.mega .mega-sep{height:1px;background:var(--rule);margin:.45rem .7rem}
.mega .mega-start{color:var(--accent-text);font-weight:700}
.header-cta{margin-left:auto}

/* ---- Hero ---- */
.hero{padding-block:clamp(4rem,11.9vw,8rem) clamp(3.5rem,9.9vw,7rem)}
.hero .display{margin-top:var(--sp-label)}
.hero .lede{margin-top:var(--sp-head)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--sp-block)}

/* ---- TrustBar ---- */
.trustbar{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--well)}
.trustbar-in{padding-block:3.2rem}
.trustbar p{font-size:var(--fs-fine);color:var(--muted);margin-bottom:1rem}
.logos{display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:center}
/* Placeholder wordmarks — real partner SVGs to be supplied (see README). */
.logo-ph{
  font-weight:700;font-size:var(--fs-fine);line-height:var(--lh-fine);
  letter-spacing:var(--ls-body);color:var(--muted);
  padding:.4rem .75rem;border:1px dashed var(--rule);border-radius:3px;
  filter:grayscale(1);
}
/* inline-flex, not inline-block: svg{display:block} otherwise drops the
   trailing arrow onto its own line. Same applies to .tile .more below. */
.trustbar .roster-link{font-size:var(--fs-fine);color:var(--sand);margin-top:1rem;
  display:inline-flex;align-items:center;gap:.4rem}
.trustbar .roster-link:hover{color:var(--white)}

/* ---- EcosystemCard ---- */
.eco-grid{display:grid;gap:1.5rem;margin-top:2.5rem}
@media(min-width:900px){.eco-grid{grid-template-columns:1fr 1fr}}
.eco-card{background:var(--card);border:1px solid var(--rule);border-radius:4px;
  padding:clamp(1.5rem,2.6vw,2.25rem);border-top:3px solid var(--accent)}
.eco-card .h2{font-size:var(--fs-6);margin:.75rem 0 .5rem}
.eco-card .tagline{color:var(--white);font-weight:700;margin-bottom:.75rem}


/* ---- LeverGrid / SolutionCard (NexHealth's card clarity) ---- */
.grid-3{display:grid;gap:1rem;margin-top:2.5rem}
@media(min-width:720px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.tile{background:var(--card);border:1px solid var(--rule);border-radius:4px;
  padding:1.4rem;transition:border-color var(--dur) var(--ease),
  transform var(--dur) var(--ease)}
.tile:hover{border-color:var(--accent);transform:translateY(-2px)}
.tile .h3{margin-bottom:.45rem}
.tile p{font-size:var(--fs-fine);color:var(--body);line-height:var(--lh-fine)}
.tile .more{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:var(--ls-caps-tight);text-transform:uppercase;
  color:var(--accent-text)}

/* ---- MethodSteps — all four sand (30 Oct 2026) ----
   The method spans both ecosystems, so no step takes an ecosystem colour. */
.steps{display:grid;gap:0;border-top:1px solid var(--rule);margin-top:2.5rem}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{padding:1.75rem 0;border-bottom:1px solid var(--rule)}
@media(min-width:900px){
  .step{padding:1.9rem 1.5rem 2.25rem;border-bottom:0;
    border-left:1px solid var(--rule)}
  .step:first-child{border-left:0;padding-left:0}
}
.step-phase{font-size:var(--fs-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;
  font-weight:700;display:block;margin-bottom:.6rem}
.step .step-phase{color:var(--sand)}
.step-n{font-size:var(--fs-7);font-weight:700;line-height:var(--lh-display);display:block;
  margin-bottom:.6rem;letter-spacing:var(--ls-display)}
.step .step-n{color:var(--sand)}
.step p{font-size:var(--fs-fine);color:var(--body);margin-top:.4rem;line-height:var(--lh-fine)}

/* ---- TwoStepEntry — locked component (§9.3) ---- */
.twostep{background:var(--well);border:1px solid var(--rule);
  border-left:3px solid var(--sand);border-radius:4px;
  padding:clamp(1.35rem,2.4vw,2rem)}
.twostep .h3{margin-bottom:.85rem}
.ts-list{counter-reset:ts}
.ts-list li::before{counter-increment:ts;
  content:counter(ts,decimal-leading-zero);
  grid-column:1/-1;font-size:var(--fs-micro);font-weight:700;
  letter-spacing:var(--ls-caps);color:var(--sand)}
.twostep .free{color:var(--violet-text-on-dark);font-weight:700}
.twostep .paid{color:var(--mint-text-on-dark);font-weight:700}

/* ---- ProblemCards ---- */
.problems{display:grid;gap:1rem;margin-top:2.25rem}
@media(min-width:640px){.problems{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.problems{grid-template-columns:repeat(4,1fr)}}
.problem{background:var(--card);border:1px solid var(--rule);border-radius:4px;
  padding:1.25rem;border-top:2px solid var(--tone,var(--sand))}
.problem[data-tone="beneco"]{--tone:var(--violet)}
.problem[data-tone="reveco"]{--tone:var(--mint)}
/* Split: two solid halves, BenECO first, like the split stage numeral — not a gradient. */
.problem[data-tone="split"]{border-top-color:transparent;position:relative}
.problem[data-tone="split"]::before,.problem[data-tone="split"]::after{content:"";position:absolute;top:-2px;height:2px;width:calc(50% + 1px)}
.problem[data-tone="split"]::before{left:-1px;background:var(--violet)}.problem[data-tone="split"]::after{right:-1px;background:var(--mint)}
.problem[data-tone="sand"]{--tone:var(--sand)}
.problem .h3{font-size:var(--fs-body);margin-bottom:.4rem}
.problem p{font-size:var(--fs-fine);color:var(--body);line-height:var(--lh-fine)}

/* ---- AudienceCards — sand only, always (§0 Rule 4) ---- */
.audiences{--accent:var(--sand);--accent-text:var(--sand);
  display:grid;gap:1rem;margin-top:2.25rem}
@media(min-width:820px){.audiences{grid-template-columns:repeat(3,1fr)}}

/* ---- ProofBlock ---- */
.proof{background:var(--card);border:1px solid var(--rule);border-radius:4px;
  padding:clamp(1.35rem,2.4vw,2rem);border-left:3px solid var(--accent)}
.proof .quote{color:var(--white);font-size:var(--fs-body);line-height:var(--lh-lede)}

/* ---- solution detail ---- */
.sol-field{padding:1.35rem 0;border-bottom:1px solid var(--rule)}
.sol-field:last-child{border-bottom:0}
.sol-field .lab{font-size:var(--fs-micro);letter-spacing:var(--ls-caps);
  text-transform:uppercase;font-weight:700;color:var(--muted);
  display:block;margin-bottom:.5rem}
.sol-field p{color:var(--body)}
.flag{display:inline-block;font-size:var(--fs-micro);letter-spacing:var(--ls-caps-tight);
  text-transform:uppercase;font-weight:700;padding:.25rem .55rem;
  border-radius:2px;background:var(--well);color:var(--sand);
  border:1px solid var(--rule)}
/* Unsourced metric marker — must be visible, never silently published (§3.4) */
.needs-source{color:var(--sand);border-bottom:1px dotted var(--sand);
  cursor:help;transition:color var(--dur-fast) var(--ease)}
.needs-source:hover{color:var(--white)}

/* ---- CTABlock ---- */
.ctablock{background:var(--well);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}

/* ---- GateForm ---- */
.form-wrap{max-width:34rem}
.field{display:block;margin-bottom:1.25rem}
.field .lab{display:block;font-size:var(--fs-micro);letter-spacing:var(--ls-caps);
  text-transform:uppercase;font-weight:700;color:var(--muted);
  margin-bottom:.45rem}
.input{width:100%;background:var(--card);color:var(--white);
  border:1px solid var(--rule);border-radius:3px;padding:.75rem .9rem}
.input:hover{border-color:var(--muted)}
.input:focus{outline:2px solid var(--accent);outline-offset:1px}
.hint{display:block;color:var(--muted);font-size:var(--fs-fine);
  line-height:var(--lh-fine);margin-top:.35rem}

/* ---- Footer ---- */
.footer{background:var(--well);border-top:1px solid var(--rule);
  padding-block:6rem 5rem;margin-top:0}
.footer-grid{display:grid;gap:2rem}
@media(min-width:900px){
  /* Five children, so five tracks — with four the Resources column wrapped to
     a second row on its own. The brand column keeps a wider share; the four
     link columns split the rest evenly. */
  .footer-grid{grid-template-columns:minmax(0,1.15fr) repeat(4,minmax(0,1fr));
    gap:1.75rem}
}
@media(min-width:1180px){.footer-grid{gap:2rem}}
.footer h4{font-size:var(--fs-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:.9rem}
.footer li{margin-bottom:.5rem;font-size:var(--fs-fine);line-height:var(--lh-fine)}
.footer a:hover{color:var(--white)}
.footer .legal{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--rule);
  font-size:var(--fs-fine);color:var(--muted);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}

/* ---- breadcrumb ---- */
.crumb{font-size:var(--fs-fine);line-height:var(--lh-fine);color:var(--muted);
  padding-block:1rem;display:flex;flex-wrap:wrap;gap:.4rem}
.crumb a:hover{color:var(--white)}
.crumb .sep{color:var(--rule)}

/* Text links shift colour on hover; without this the change is instant while
   every other hover on the page eases. Grouped so a new link class cannot be
   added with a hover state and no transition. */
.mega a,.trustbar .roster-link,.footer a,.crumb a,.qback{
  transition:color var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease);
}

/* ---- reveal ---- */
/* 600ms read as a page loading rather than content arriving; 300ms with a
   10px rise is present without being watched. */
.reveal{opacity:0;transform:translateY(10px);
  transition:opacity var(--dur-slow) var(--ease),
             transform var(--dur-slow) var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  /* transition-delay too: the reveal sweep writes an inline stagger delay, and
     a zero-duration transition that still waits 120ms is not "no motion". */
  *,*::before,*::after{animation:none!important;
    transition-duration:.01ms!important;transition-delay:0ms!important}
  .reveal{opacity:1;transform:none}
}

/* ---- MegaMenu two-column, §2.1: pillars left, ecosystem statement + DNA
   entry point right. The panel border already takes the ecosystem accent. ---- */
/* Sized to the content, not to a guess. The longest lever name renders at
   226px, so the list column needs ~16rem including link padding; the side
   column holds one short sentence. 34rem was sized for the two-line items
   that carried descriptors, and left the panel looking half-empty without
   them. */
.mega-2col{min-width:30rem;display:grid;grid-template-columns:minmax(16rem,1fr) 13rem;
  gap:.5rem}
.mega-2col .mega-side{border-left:1px solid var(--rule);padding:.5rem .75rem;
  display:flex;flex-direction:column;justify-content:space-between;gap:1rem}
.mega-2col .mega-side p{font-size:var(--fs-fine);line-height:var(--lh-micro);color:var(--muted)}
.mega-start{display:inline-flex;align-items:center;gap:.4rem}
.foot-tag{margin-top:2.25rem;font-weight:800;color:var(--white);
  font-size:var(--fs-body);letter-spacing:var(--ls-h3)}

/* Canonical two-step construction, quoted verbatim from Brand Architecture
   v1.6. Set apart so an editor can see it is governed copy, not page prose. */
.twostep-canon{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--white);
  padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid var(--rule)}

/* ==========================================================================
   Emblem watermark
   The emblem is a master-brand element belonging to neither ecosystem, so the
   colour law puts it in sand — never mint, never violet, and never tinted per
   page. Opacity is kept very low and verified against body-text contrast: at
   these values the lift on #282828 is under one step and every text pair still
   clears WCAG AA (see README).
   Decorative only: aria-hidden via CSS pseudo-element, pointer-events off.
   ========================================================================== */
.wm{position:relative;overflow:hidden}
.wm > *{position:relative;z-index:1}
.wm::after{
  content:"";position:absolute;pointer-events:none;z-index:0;
  background:url("../img/nero-emblem-sand.svg") no-repeat center/contain;
  opacity:.035;
  width:min(46rem,70vw);aspect-ratio:1;
  right:-14rem;top:50%;transform:translateY(-50%);
}
/* alternate the anchor so the mark reads as a rhythm, not a repeated stamp */
.wm-left::after{right:auto;left:-15rem}
.wm-top::after{top:-10rem;transform:none}
.wm-sm::after{width:min(26rem,46vw);opacity:.03}

/* Hero carries the largest instance, bled off the right edge.
   Opacity is capped at .035, not raised for emphasis: at .045 the composite
   pushes violet body text (#9B85FF) to 4.53:1 — only 0.03 above the AA floor.
   .035 restores real margin (4.66:1). See WM_MAX_OPACITY in audit.py. */
.hero.wm::after{width:min(62rem,86vw);right:-20rem;opacity:.035}

/* Footer anchors the page with a large, low mark. */
.footer.wm::after{width:min(40rem,64vw);right:-12rem;opacity:.035}

/* Inverted pine/well panels sit on a darker ground — nudge up very slightly. */
.ctablock.wm::after,.trustbar.wm::after{opacity:.035}

@media (prefers-reduced-motion:reduce){.wm::after{transition:none}}
@media (max-width:640px){
  .wm::after{width:min(30rem,88vw);right:-9rem}
  .hero.wm::after{width:min(34rem,96vw);right:-11rem}
}

/* Larger sand lockup in the header, per brand direction. */
/* The lockup is a link home. Static cards deliberately get no hover — a
   hover state on something unclickable is a false affordance. */
.logo img{height:46px;width:auto;
  transition:opacity var(--dur-fast) var(--ease)}
.logo:hover img{opacity:.82}
@media (max-width:900px){.logo img{height:38px}}

/* ==========================================================================
   Mobile — 375px audit fixes
   Three real breaks below 1080px: the primary nav was display:none with no
   replacement (zero reachable nav links), the header CTA took 53% of the bar
   and wrapped to two lines, and 36 inline links sat under the 24x24 minimum
   in WCAG 2.2 AA 2.5.8, which §9.2 commits the site to.
   ========================================================================== */

/* ---- disclosure toggle (hidden at desktop, where the bar nav takes over) -- */
.nav-toggle{
  display:none;align-items:center;gap:.5rem;margin-left:auto;
  background:transparent;border:1px solid var(--rule);border-radius:3px;
  color:var(--white);cursor:pointer;
  min-height:44px;padding:0 .8rem;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:var(--ls-caps);
  text-transform:uppercase;line-height:var(--lh-micro);
  transition:border-color var(--dur-fast) var(--ease);
}
.nav-toggle:hover{border-color:var(--sand)}
.cta-wide{display:inline}
.cta-narrow{display:none}
/* One line per tab: below 1280px the header button takes its short form so all six fit. */
@media(min-width:1080px) and (max-width:1279px){.cta-wide{display:none}.cta-narrow{display:inline}}
.nav-toggle-bars{display:grid;gap:3px;width:16px}
.nav-toggle-bars i{display:block;height:2px;background:currentColor;border-radius:1px}

@media(max-width:1079px){
  .nav-toggle{display:inline-flex}
  .header-in{flex-wrap:wrap;gap:.6rem}

  /* The desktop nav becomes the mobile panel — same links, no second markup. */
  .nav{
    display:none;flex-direction:column;gap:0;margin:0;
    order:5;width:100%;
    border-top:1px solid var(--rule);
    max-height:min(70vh,32rem);overflow-y:auto;
  }
  .nav[data-open="true"]{display:flex}
  .nav-item{border-bottom:1px solid var(--rule-soft)}
  .nav-item:last-child{border-bottom:0}
  .nav-link{display:block;padding:.85rem 0;min-height:44px;
    font-size:var(--fs-body);color:var(--white)}

  /* Sub-menus sit inline rather than as hover panels — there is no hover. */
  .mega,.mega-2col{
    position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;display:block;background:transparent;border:0;
    border-left:2px solid var(--rule);border-radius:0;
    margin:0 0 .7rem .2rem;padding:0 0 0 .9rem;
  }
  .mega-2col .mega-side{border-left:0;padding:.2rem 0 0}
  .mega-2col .mega-side p{display:none}   /* blurb is desktop affordance only */
  .mega a{padding:.6rem .4rem;min-height:44px;display:flex;align-items:center}

  /* CTA: 197px and two lines at 375px. Compact and locked to one line. */
  /* "Start Assessment" cannot fit beside the logo and toggle at 375px. The
     short label is "Pre-work", not "Assessment": on this site "assessment"
     means the paid BenDNA/RevDNA, and a header button reading Assessment that
     lands on the no-cost questionnaire blurs exactly the line Rule 2 draws. */
  .header-cta .btn{
    padding:.6rem .85rem;font-size:var(--fs-micro);
    letter-spacing:var(--ls-caps-tight);
    white-space:nowrap;gap:.45rem;min-height:44px;
  }
  .header-cta .btn svg{width:14px}
  .cta-wide{display:none}
  .cta-narrow{display:inline}
  .nav-toggle-txt{display:none}          /* icon-only; aria-label carries it */
  .nav-toggle{padding:0;width:44px;justify-content:center}
}

/* ---- tap targets: WCAG 2.2 AA 2.5.8 wants 24x24 minimum ----------------- */
@media(max-width:900px){
  .footer li a,.foot .legal a,.legal a{
    display:inline-flex;align-items:center;min-height:24px;
  }
  .footer li{margin-bottom:.35rem}
  .trustbar .roster-link{display:inline-flex;align-items:center;min-height:24px}
}

/* ==========================================================================
   Homepage hero art — isometric health-system campus
   Generated by make_hero_art.py. Anchored right and bled off the edge, the way
   the SDI reference hangs its illustration beside the headline.

   The mask is the load-bearing part: the art fades to nothing across the left
   two-thirds so the H1 and lede sit on flat #282828 and keep their measured
   contrast. Nothing here is decorative colour — violet volumes are the workforce
   estate, mint the revenue estate, neutral stock stays sand (Rule 4).
   ========================================================================== */
/* Below the two-column threshold the text runs full width, so the art moves
   behind it — drop it well back rather than letting it fight the headline. */
/* Below 1081px the text runs full width and the art is genuinely behind it,
   so opacity becomes an accessibility parameter. At .30 a mint building face
   drops violet body text (#9B85FF) to 4.40:1 — under the AA floor. .20 holds
   every text colour at 4.6:1 or better over any face in the illustration. */
/* SDI sets headline and illustration side by side, not stacked. Constraining
   the hero text to a column does that, and it also keeps every body-size
   string clear of the art — measured, the lede otherwise crossed the opaque
   edge by 47px. */
}

/* ==========================================================================
   v2.0 components
   ========================================================================== */

/* ---- three stages. Stage 02 is deliberately NOT lighter than 01 and 03 —
   it is the stage people misread as no-cost, and visual weight corrects that
   before the copy has to (copy deck block 5). ---- */
.stages{display:flex;flex-direction:column;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.stage{display:grid;grid-template-columns:auto 1fr;gap:.75rem 1.25rem;
  background:var(--card);padding:1.5rem 1.35rem;align-items:start}
@media(min-width:820px){
  .stage{grid-template-columns:3.5rem minmax(0,1fr) 7rem;
    gap:1.75rem;align-items:center;padding:1.75rem}
}
.stage-n{font-size:var(--fs-6);font-weight:800;line-height:var(--lh-display);
  letter-spacing:var(--ls-display);color:var(--sand)}
/* Stage 02/03 belong to both ecosystems. Rule 6 bans background-clip:text,
   so the split is drawn as a solid violet numeral with a two-colour rule beneath
   it rather than as gradient-filled type. */
.stage[data-tone="split"] .stage-n{color:var(--violet);position:relative}
.stage[data-tone="split"] .stage-n::after,
.stage[data-tone="split"] .stage-n::before{content:"";position:absolute;
  bottom:-6px;height:2px;width:50%}
.stage[data-tone="split"] .stage-n::before{left:0;background:var(--violet)}
.stage[data-tone="split"] .stage-n::after{right:0;background:var(--mint)}
.stage-body p{color:var(--body);font-size:var(--fs-fine);
  line-height:var(--lh-fine);margin-top:.35rem}
.stage-price{grid-column:1/-1;font-family:inherit;font-weight:800;
  font-size:var(--fs-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--white)}
@media(min-width:820px){.stage-price{grid-column:auto;text-align:right}}
.stage-price[data-free="1"]{color:var(--violet-text-on-dark)}
.stage-price[data-free="0"]{color:var(--mint-text-on-dark)}
.twostep-short{margin-top:var(--sp-head);font-weight:700;color:var(--white);
  font-size:var(--fs-fine);letter-spacing:var(--ls-body)}

/* ---- foundation band: the floor the other six stand on, so it is
   drawn as a floor rather than a sixth card (§2.1 "the geometry is the
   argument"). ---- */
.lever-band{display:block;margin-top:1rem;background:var(--card);
  border:1px solid var(--rule);border-top:3px solid var(--accent);
  border-radius:4px;padding:clamp(1.35rem,2.4vw,2rem);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.lever-band:hover{border-color:var(--accent);transform:translateY(-2px)}
.lever-band .h2{font-size:var(--fs-6);margin:.6rem 0 .5rem}
.lever-band p{color:var(--body);max-width:70ch}
.lever-band .more{display:inline-block;margin-top:var(--sp-head);
  font-size:var(--fs-micro);font-weight:700;letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--accent-text)}

/* ---- ecosystem card lever lists (replaced the removed stat rows) ---- */
.lever-found{margin-top:var(--sp-head);color:var(--white)}
.lever-found .muted{font-weight:400;font-size:var(--fs-fine)}
.lever-list{margin-top:.5rem;color:var(--body);font-size:var(--fs-fine);
  line-height:var(--lh-fine)}
.lever-list li{padding-left:1rem;position:relative}
.lever-list li::before{content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:1px;background:var(--accent)}

/* ---- Payvider dual block — the ONE sanctioned exception to
   one-accent-per-page (§4.6b). No other page may use .dual. ---- */
.dual-grid{display:grid;gap:1rem;margin-top:var(--sp-group)}
@media(min-width:760px){.dual-grid{grid-template-columns:1fr 1fr}}
.dual{background:var(--card);border:1px solid var(--rule);
  border-top:3px solid var(--accent);border-radius:4px;padding:1.5rem}
.dual .h3{margin:.5rem 0 .4rem}
.dual p{color:var(--body);font-size:var(--fs-fine);line-height:var(--lh-fine)}

.flag-note{margin-top:var(--sp-block);max-width:60ch;color:var(--body);
  font-size:var(--fs-fine);line-height:var(--lh-fine)}

/* Callout — a designation raised inside a page rather than promoted to a peer
   in the nav. Sand rail: the subject belongs to neither ecosystem. */
.callout{background:var(--well);border:1px solid var(--rule);
  border-left:3px solid var(--sand);border-radius:4px;
  padding:clamp(1.35rem,2.4vw,2rem)}

/* Nested nav items — the three healthcare organisation types sit under
   Healthcare Organizations rather than beside it. Indent plus a hairline rail
   carries the hierarchy without a second flyout, which is fragile on touch and
   unnecessary for three items. */
.mega-sub{padding-left:1.5rem!important;position:relative;
  font-size:var(--fs-fine)!important;color:var(--muted)!important}
.mega-sub::before{content:"";position:absolute;left:.7rem;top:.55rem;bottom:.55rem;
  width:1px;background:var(--rule)}
.mega a.mega-sub:hover{color:var(--white)!important}

/* ---- §4.4b placement 1: six cards in two rows of three, then the
   shared foundation as a full-width band beneath. NOT seven equal cards —
   a seven-card grid says "seven options", and the whole claim is that one of
   them is the floor the other six stand on. The geometry is the argument. */
.lever-grid{display:grid;gap:1rem}
@media(min-width:720px){.lever-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.lever-grid{grid-template-columns:repeat(3,1fr)}}

/* §4.4b sets a 1.5x-a-card minimum. CSS cannot read a sibling's height, and
   cards grow taller as the grid narrows to three columns, so the floor is set
   per breakpoint against measured card heights (163px at 2-col, 215px at
   3-col) rather than as one fixed guess. */
.lever-band{min-height:16.5rem}
@media(min-width:1040px){.lever-band{min-height:21rem}}
.band-claim{color:var(--white);font-weight:700;font-size:var(--fs-4);
  line-height:var(--lh-h3);margin-top:var(--sp-head);max-width:52ch}

/* A single-solution lever renders its one card at natural width. A 3-col grid
   with one card in it reads as four missing cards (§4.4b). */
.grid-solo{display:grid;gap:1rem;max-width:26rem}

.lever-body{max-width:68ch}
.lever-body .h3{color:var(--white)}

/* ---- §4.4b placement 4: the dependency cross-link.
   Deliberately a single slim line, not a card. It appears on twelve pages, and
   at card weight twelve of them would read as clutter rather than as a spine.
   The accent rail is the only ornament. */
.assumes{display:flex;align-items:center;gap:.85rem;margin-top:var(--sp-block);
  padding:.85rem 1.1rem;background:var(--well);border:1px solid var(--rule);
  border-left:3px solid var(--accent);border-radius:3px;max-width:52rem;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.assumes:hover{border-color:var(--accent);transform:translateY(-1px)}
.assumes-label{font-size:var(--fs-micro);font-weight:700;
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--accent-text);
  white-space:nowrap}
.assumes-text{font-size:var(--fs-fine);line-height:var(--lh-fine);color:var(--body)}
.assumes-text strong{color:var(--white)}
.assumes svg{margin-left:auto;flex:none;color:var(--accent-text)}
@media(max-width:640px){
  .assumes{flex-wrap:wrap;gap:.5rem}
  .assumes svg{margin-left:0}
}

/* Closing CTA — the button carries the same visual weight as the heading it
   sits beside, rather than reading as a footnote to it. */
.cta-major .btn{padding:1.35rem 2.1rem;font-size:var(--fs-fine);
  letter-spacing:var(--ls-caps-tight)}
@media(max-width:979px){.cta-major .btn{width:100%;justify-content:center}}

/* ---- ThreeStageEntry as three labelled stages. The price label is a real
   element rather than a clause, so it cannot be edited out of the sentence —
   which is the failure mode Appendix C names. */
.ts-list{margin-top:var(--sp-head)}
.ts-list li{display:grid;grid-template-columns:auto auto;gap:.25rem .6rem;
  padding:.9rem 0;border-bottom:1px solid var(--rule)}
.ts-list li:last-child{border-bottom:0;padding-bottom:0}
.ts-name{font-weight:700;color:var(--white);font-size:var(--fs-body)}
.ts-price{justify-self:start;align-self:center;font-size:var(--fs-micro);
  font-weight:700;letter-spacing:var(--ls-caps);text-transform:uppercase;
  padding:.15rem .5rem;border-radius:2px;border:1px solid var(--rule)}
.ts-price.free{color:var(--violet-text-on-dark)}
.ts-price.paid{color:var(--mint-text-on-dark)}
.ts-desc{grid-column:1/-1;font-size:var(--fs-fine);line-height:var(--lh-fine);
  color:var(--body)}

/* ---- The Foundation (§4.4b placement 1) -----------------------------------
   The shared foundation sits directly under the six cards, in the same
   section, using the same inset panel as "Where it starts". §4.4b asked for a
   full-width band at least 1.5x a card tall; the panel treatment plus the
   heading does that work, and it does it without a section break — which read
   as a different subject rather than as the floor under this one. */
.foundation-head{margin-bottom:var(--sp-head)}
.foundation-block{margin-top:0}
.found-row{display:grid;grid-template-columns:auto auto;gap:.35rem .7rem;
  align-items:baseline}
.found-name{font-weight:700;color:var(--white);font-size:var(--fs-4);
  line-height:var(--lh-h3)}
.found-tag{justify-self:start;align-self:center;font-size:var(--fs-micro);
  font-weight:700;letter-spacing:var(--ls-caps);text-transform:uppercase;
  padding:.15rem .5rem;border-radius:2px;border:1px solid var(--rule);
  color:var(--accent-text)}
.found-claim{grid-column:1/-1;color:var(--white);font-weight:700;
  font-size:var(--fs-body);line-height:var(--lh-lede);max-width:52ch}
.found-row .more{grid-column:1/-1;margin-top:.35rem}
.found-row:hover .more{color:var(--accent-text)}

/* A sentence set on its own line. display:block rather than <br> so the
   sentence still wraps inside itself at narrow widths instead of breaking
   twice in the same place. */
.sentence{display:block}

/* A visible stand-in for copy that cannot publish yet — unmistakable on the
   page and greppable in the build, so it can never ship by accident. */
.placeholder{color:var(--sand);border-bottom:1px dashed currentColor;
  font-style:normal;white-space:nowrap}