/* Auto DigitID Africa - portal stylesheet.
 *
 * Extracted from an inline <style> in base.html. It was 56.5KB of
 * a 94.5KB document and was re-sent on every page; as a static
 * file the browser caches it once and every later navigation is
 * ~56KB lighter. That trade - one extra request on first load
 * against nothing on all the others - is the right way round for
 * an estate that assumes constrained bandwidth.
 *
 * Font URLs are plain /static/ paths here because a static file
 * is not rendered by Jinja.
 */
/* ------------------------------------------------------------------ *
 * Auto DigitID Africa - portal stylesheet
 *
 * Palette from the brand record: navy #0B1F33 authority and titles,
 * teal #2FB6C4 structure and progression, orange #F7931E attention,
 * pale #F3F7F9 ground. Tier colours follow the award artwork, which is
 * the authority on what a certificate looks like.
 *
 * TWO THINGS WORTH KNOWING BEFORE EDITING
 *
 * 1. Brand teal is a STRUCTURE colour, not a text colour. #2FB6C4 on
 *    white is about 2.2:1 - below the 4.5:1 body text needs and below
 *    the 3:1 large text needs. Rules, chips and fills use --teal; any
 *    teal-coloured WORDS use --teal-ink, which is the same hue darkened
 *    until it passes. Never set colour:var(--teal) on text.
 *
 * 2. The type is IBM Plex, SELF-HOSTED - 79KB of woff2 served from this
 *    origin, never a font CDN. The estate is built for intermittent
 *    power and constrained bandwidth, so a third-party request in the
 *    critical path is the wrong trade; a local file with font-display
 *    swap and a real fallback stack is not. Plex is chosen rather than
 *    decorated onto the brand: it is the type of engineering and
 *    standards documents, and the Mono cut has an actual job here
 *    setting certificate IDs, which are machine-readable identity.
 * ------------------------------------------------------------------ */
@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:400 700;
  font-display:swap;
  src:url("/static/fonts/plex-sans.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Serif"; font-style:normal; font-weight:600;
  font-display:swap;
  src:url("/static/fonts/plex-serif.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:500;
  font-display:swap;
  src:url("/static/fonts/plex-mono.woff2") format("woff2");
}
/* ---------------------------------------------------------------- *
 * TOKENS - the single source of truth.
 *
 * Values are taken from the approved source document:
 *   Framework and Guidelines/University and TVET/
 *   AutoDigitID_BTech_AIDC_Accreditation_Curriculum_2026.docx
 * measured by counting every w:color, w:shd and border colour in it.
 * Where this file previously differed - a navy-biased ink, a cooler
 * line - it was wrong, and the difference was mine rather than the
 * brand's.
 *
 * Names follow the redesign brief (--adi-*). The short aliases below
 * them (--navy, --teal, --ink ...) are what the rest of this sheet
 * already uses; keeping both means the brief's locked palette governs
 * while nine templates keep working unchanged. Add new code against
 * the --adi-* names.
 *
 * No magic numbers past this block. If a value is not here, it is
 * either wrong or it needs a token.
 * ---------------------------------------------------------------- */
:root{
  /* --- brand ---------------------------------------------------- */
  --adi-navy-950:#0B1F33;   /* authority, headings, dark bands       */
  --adi-navy-800:#0F2A44;   /* navy raised surface                   */
  --adi-teal-500:#2FB6C4;   /* STRUCTURE only - never a text colour  */
  --adi-teal-700:#12707C;   /* the teal that may be a text colour    */
  --adi-cyan-100:#E6F6F8;   /* teal-tinted fill                      */
  --adi-orange-500:#F7931E; /* attention; recommended/active only    */
  --adi-orange-700:#A65C06; /* the orange that may be a text colour.  */
                            /* The LIGHTEST value clearing 4.5:1 on    */
                            /* every ground it is used on - white 5.05,*/
                            /* neutral 4.59, cyan 4.55 - so it stays as*/
                            /* orange as the rules allow. #8A4E00 also */
                            /* passed but read as brown, which is not  */
                            /* the brand; #B16306 passed on white only.*/
  --adi-orange-100:#FFF4E6;
  --adi-neutral-100:#F2F4F7;/* section ground                        */
  --adi-neutral-050:#F2F4F7;/* same ground; the source uses only one */
  --adi-white:#FFFFFF;
  --adi-ink-900:#1A1A1A;    /* body text                             */
  --adi-ink-600:#555555;    /* secondary text, 7.5:1 on white        */
  --adi-line:#D5DBE0;       /* hairlines - the most used colour in    */
                            /* the source, 1,377 occurrences         */
  --adi-line-strong:#B9C2CA;/* derived: one step down from --adi-line */

  /* --- semantic ------------------------------------------------- */
  --adi-ok:#1D7A4C; --adi-bad:#B3261E; --adi-warn:#8A5A00;

  /* --- spacing: 8px scale, 4px only where optical --------------- */
  --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px;
  --space-4:16px; --space-5:24px; --space-6:32px; --space-7:40px;
  --space-8:48px; --space-9:64px; --space-10:80px; --space-11:96px;
  --space-12:128px;

  /* --- radius: buttons 6-8, cards 8-12, containers 12 max -------- */
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px;
  --radius-lg:12px; --radius-pill:999px;

  /* --- elevation: borders first, shadows barely there ----------- */
  --shadow-0:none;
  --shadow-1:0 1px 2px rgba(11,31,51,.04);
  --shadow-2:0 2px 6px rgba(11,31,51,.06);
  --shadow-3:0 8px 24px rgba(11,31,51,.08);

  /* --- motion: 150-250ms, ease-out in, ease-in out -------------- */
  --dur-fast:120ms; --dur:180ms; --dur-slow:240ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1);

  /* --- layering ------------------------------------------------- */
  --z-base:0; --z-raised:10; --z-sticky:20; --z-menu:40;
  --z-overlay:60; --z-modal:80; --z-toast:100;

  /* --- measure -------------------------------------------------- */
  --shell:1280px;          /* institutional container               */
  --shell-editorial:760px; /* prose measure                         */
  --pad-inline:clamp(20px,4vw,64px);

  /* --- type ----------------------------------------------------- */
  --step--1:.86rem;
  --step-0:1rem;
  --step-1:1.08rem;
  --step-2:clamp(1.18rem,1.05rem + .55vw,1.4rem);
  --step-3:clamp(1.45rem,1.2rem + 1.1vw,1.9rem);
  --step-4:clamp(1.85rem,1.35rem + 2.2vw,2.9rem);
  --step-5:clamp(2.2rem,1.5rem + 3vw,3.5rem);   /* hero display     */

  --font-sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,
    "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-serif:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,
    Consolas,monospace;

  /* --- aliases the existing sheet uses -------------------------- */
  --navy:var(--adi-navy-950); --navy-2:var(--adi-navy-800);
  --teal:var(--adi-teal-500); --teal-ink:var(--adi-teal-700);
  --teal-soft:var(--adi-cyan-100);
  --orange:var(--adi-orange-500); --orange-ink:var(--adi-orange-700);
  --orange-soft:var(--adi-orange-100);
  --pale:var(--adi-neutral-050); --paper:var(--adi-white);
  --ink:var(--adi-ink-900); --muted:var(--adi-ink-600);
  --line:var(--adi-line); --line-2:var(--adi-line-strong);
  --ok:var(--adi-ok); --bad:var(--adi-bad); --warn:var(--adi-warn);
  --gap:var(--space-4); --radius:var(--radius-lg);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:var(--step-0)/1.65 var(--font-sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--navy)}
a:hover{color:var(--teal-ink)}

/* One focus treatment for everything focusable. The default outline was
   invisible against navy surfaces, which makes the site unusable by
   keyboard on exactly the pages that matter most. */
:focus-visible{
  outline:3px solid var(--teal-ink); outline-offset:2px; border-radius:var(--radius-xs);
}
header.top :focus-visible{outline-color:#8FD9E2}

.skip{
  /* The link is ~49px tall with its padding, so -3rem left a sliver of
     white showing above the header on every page. */
  position:absolute; left:.6rem; top:-4.5rem; z-index:20;
  background:var(--paper); color:var(--navy); font-weight:700;
  padding:.7rem 1rem; border-radius:var(--radius-md); text-decoration:none;
  transition:top var(--dur-fast) var(--ease-out);
}
.skip:focus{top:.6rem}

/* ------------------------------------------------------------ header */
header.top{background:var(--navy); color:#fff}
header.top .bar{
  max-width:var(--shell); margin:0 auto;
  padding:var(--space-2) var(--pad-inline);
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
}
header.top img{height:34px; width:auto; display:block}
header.top .brand{display:flex; align-items:center; gap:.6rem;
  text-decoration:none; color:inherit; padding:.4rem .1rem}
header.top .name{font-family:var(--font-serif); font-weight:600;
                 letter-spacing:0; font-size:1.12rem; line-height:1.15}
header.top .name span{font-family:var(--font-sans); color:#7FD3DD;
                      display:block; font-size:.75rem; letter-spacing:.2em;
                      font-weight:600; margin-top:.1rem}
/* The primary nav and the three mega menus.
 *
 * The menus are <details>/<summary>. That is a deliberate choice over a
 * scripted dropdown: it gives keyboard operation, screen-reader state
 * and Escape-to-close from the browser, it is identical markup on
 * desktop and mobile, and it works with JavaScript switched off - which
 * matters on an estate that assumes constrained bandwidth. The script
 * at the end of this file only adds click-outside and one-at-a-time
 * behaviour; nothing depends on it. */
header.top nav.primary{margin-left:auto; display:flex; align-items:center;
  gap:var(--space-1); flex-wrap:wrap}
header.top nav.primary > a,
header.top summary{
  color:#CFE4EA; text-decoration:none; font-size:.9rem;
  padding:var(--space-3) var(--space-3); border-radius:var(--radius-sm);
  line-height:1.2; display:inline-flex; align-items:center; gap:.35rem;
  min-height:44px; cursor:pointer; white-space:nowrap;
  transition:background var(--dur) var(--ease-out),
             color var(--dur) var(--ease-out);
}
header.top summary{list-style:none}
header.top summary::-webkit-details-marker{display:none}
header.top summary::after{
  content:""; width:.42em; height:.42em; margin-top:-.22em;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); opacity:.75;
  transition:transform var(--dur) var(--ease-out);
}
header.top details[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
header.top nav.primary > a:hover,
header.top summary:hover,
header.top details[open] > summary{color:#fff; background:rgba(255,255,255,.10)}
header.top nav.primary > a[aria-current]{
  color:#fff; box-shadow:inset 0 -2px 0 var(--teal)}

header.top details{position:relative}
.mega{
  position:absolute; z-index:var(--z-menu); top:calc(100% + var(--space-2));
  left:0; background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-3); padding:var(--space-5);
  display:grid; gap:var(--space-6) var(--space-7);
  /* Not wrapped in min(100%) like the other grids: inside the mega
     panel that resolves against a container the panel itself sizes to,
     which collapses the tracks and spills the group headings. The panel
     is full-width below 1080px anyway, so it never overflowed. */
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  min-width:min(94vw,640px);
}
.mega h3{
  font-family:var(--font-sans); font-size:.75rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  margin:0 0 var(--space-3); padding-bottom:var(--space-2);
  border-bottom:1px solid var(--line);
}
.mega ul{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.mega a{
  display:block; text-decoration:none; color:var(--navy);
  font-size:.93rem; line-height:1.35; padding:.5rem .6rem;
  border-radius:var(--radius-sm); min-height:44px;
  transition:background var(--dur) var(--ease-out);
}
.mega a:hover{background:var(--teal-soft); color:var(--navy)}

/* utility cluster: the two things every visitor is allowed to want
   without reading a menu first */
header.top .utility{display:flex; align-items:center; gap:var(--space-2);
  margin-left:var(--space-3)}
header.top a.verify{
  color:#FFC97A; font-weight:600; font-size:.9rem; text-decoration:none;
  padding:var(--space-3); border-radius:var(--radius-sm);
  min-height:44px; display:inline-flex; align-items:center;
  white-space:nowrap;
}
header.top a.verify:hover{color:#FFE0B2; background:rgba(255,255,255,.10)}
header.top a.talk{
  background:var(--orange); color:#20160A; font-weight:700; font-size:.9rem;
  text-decoration:none; padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-sm); min-height:44px; white-space:nowrap;
  display:inline-flex; align-items:center;
  transition:background var(--dur) var(--ease-out);
}
header.top a.talk:hover{background:#FFA83C}

/* -------------------------------------------------------------- main */
main{max-width:var(--shell); margin:0 auto;
     padding-inline:var(--pad-inline);
     padding-block:var(--space-6) var(--space-10)}
body{display:flex; flex-direction:column; min-height:100vh}
/* margin-inline:auto on a flex item overrides stretch, so main sized
   to max-content and forced 860px of horizontal scroll at 375px.
   width:100% restores the fill; min-width:0 lets it shrink. */
body > header,body > main,body > footer{width:100%; min-width:0}
main{flex:1 0 auto}
/* Prose measure. Long-form copy sets this so a 1280px shell never
   produces a 150-character line. */
.editorial{max-width:var(--shell-editorial)}
section{scroll-margin-top:1.5rem}
h1{font-family:var(--font-serif); font-weight:600;
   font-size:var(--step-4); line-height:1.12; margin:.15rem 0 .7rem;
   color:var(--navy); text-wrap:balance; max-width:26ch;
   letter-spacing:-.015em}
h2{font-family:var(--font-serif); font-weight:600;
   font-size:var(--step-3); margin:3rem 0 .7rem; color:var(--navy);
   text-wrap:balance; letter-spacing:-.01em; max-width:36ch}
h3{margin:.1rem 0 .3rem; font-size:var(--step-1); color:var(--navy)}
p.lede{font-size:var(--step-2); color:var(--muted); max-width:60ch;
       margin:0 0 1.4rem; line-height:1.5}
/* Orange, as in every source document: the section-level eyebrow is
   orange and the smaller sub-labels stay teal. It was teal here, which
   removed orange from the one place the brand uses it most often. */
.eyebrow{font-size:.75rem; letter-spacing:.15em; text-transform:uppercase;
         color:var(--orange-ink); font-weight:700; margin:0 0 .4rem}
/* On navy the darkened text-orange is too close to the ground, so the
   eyebrow reverts to the brand orange itself - 7.27:1 there. */
.band .eyebrow,.finalcta .eyebrow,.ind .eyebrow{color:var(--orange)}
.sectionnote{color:var(--muted); font-size:.95rem; max-width:64ch;
             margin:0 0 .2rem}

/* ------------------------------------------------------------- cards */
.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}
/* Every auto-fit track floor is wrapped in min(100%, ...). A bare
   minmax(280px,1fr) cannot shrink below 280px, so at a 320px viewport
   with 20px of page padding the track is wider than the space and the
   whole page scrolls sideways. min() lets the track collapse to the
   column width when that is smaller. */
.grid{display:grid; gap:var(--gap);
      grid-template-columns:repeat(auto-fit,minmax(min(100%,238px),1fr))}
.card{border:1px solid var(--line); border-radius:var(--radius);
      padding:1.15rem 1.25rem; background:var(--paper)}
.card{display:flex; flex-direction:column}
.card p{margin:0 0 .4rem; font-size:.94rem; color:var(--muted)}
.card .lbtn{margin-top:auto; align-self:flex-start}
.ctarow{margin:1.1rem 0 0}
.card h3{margin-bottom:.35rem}
.card.link{text-decoration:none; display:block; transition:border-color var(--dur) var(--ease-out)}
.card.link:hover{border-color:var(--teal)}
.card.link .go{color:var(--teal-ink); font-weight:600; font-size:.88rem}
.tier{border-top:4px solid var(--tier,var(--teal))}
.tier .meta{color:var(--ink); font-weight:600; font-size:.87rem}
.tier .price{font-size:1.3rem; font-weight:700; color:var(--navy);
             margin:.3rem 0 0}

ul.points{list-style:none; padding:0; margin:1.2rem 0 0}
ul.points li{border-top:1px solid var(--line); padding:1rem 0}
ul.points li:first-child{border-top:0}
ul.points strong{display:block; color:var(--navy); margin-bottom:.2rem}
ul.points span{color:var(--muted); font-size:.95rem}

/* --------------------------------------------------------- buttons */
.lbtn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; background:var(--navy); color:#fff; text-decoration:none;
  padding:.7rem 1.25rem; border-radius:var(--radius-md); font-weight:600;
  font-size:.95rem; line-height:1.2; text-align:center;
  transition:background var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out);
}
.lbtn:hover{background:var(--navy-2); color:#fff}
.lbtn.ghost{background:transparent; color:var(--navy);
            border:1.5px solid var(--line-2)}
.lbtn.ghost:hover{background:var(--pale); color:var(--navy);
                  border-color:var(--navy)}
.lbtn.full{display:flex; width:100%}
.lbtn.quiet{background:transparent; color:var(--navy); border:1.5px solid var(--line-2);
            font-weight:600}
.lbtn.quiet:hover{border-color:var(--navy); background:var(--pale); color:var(--navy)}

/* ------------------------------- solutions / programs / insights */
/* Reuses .grid, .card, .lbtn and ul.points. Only the shapes those
   cannot express are defined here. */

/* A capability is three claims in a fixed order - what it is, where it
   breaks, what we teach. The order is the argument, so it is markup
   rather than a style choice. */
.caps{display:grid; gap:var(--space-4); margin-top:var(--space-5);
      grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.cap{border:1px solid var(--line); border-left:3px solid var(--teal);
     border-radius:var(--radius-lg); padding:var(--space-5); scroll-margin-top:var(--space-8)}
.cap h3{margin:0 0 var(--space-3)}
.cap p{margin:0 0 var(--space-3); font-size:.94rem; line-height:1.6}
.cap p:last-child{margin-bottom:0}
.cap .what{color:var(--ink)}
.cap .breaks,.cap .does{color:var(--muted)}
.cap b{color:var(--navy)}

.progs{display:grid; gap:var(--space-4); margin-top:var(--space-5);
       grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.prog{border:1px solid var(--line); border-radius:var(--radius-lg);
      padding:var(--space-5); background:var(--paper); scroll-margin-top:var(--space-8)}
.prog h3{margin:0 0 var(--space-4)}
.prog dl{margin:0}
.prog dt{font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
         color:var(--teal-ink); font-weight:700; margin-top:var(--space-4)}
.prog dt:first-child{margin-top:0}
.prog dd{margin:var(--space-1) 0 0; font-size:.94rem; color:var(--muted);
         line-height:1.6}

/* A navy band is how a section closes without becoming another card.
   Also the main carrier of the brief's navy share of the page. */
/* The orange top rule is how every navy block is finished in the source
   documents - see the Partner one-pager's header and next-steps bands.
   It was missing, and it is most of why the portal read as navy-and-teal
   with an orange button rather than as the brand. */
.band{background:var(--navy); color:#DCE9EE; border-radius:var(--radius-lg);
  border-top:4px solid var(--orange);
      padding:var(--space-7) var(--space-6); margin:var(--space-9) 0 0}
.band h2{color:#fff; margin-top:0}
.band .lede{color:#AFC4D0}
.band ul.points li{border-top-color:rgba(255,255,255,.14)}
.band ul.points strong{color:#fff}
.band ul.points span{color:#AFC4D0}
.band .lbtn{background:var(--orange); color:#20160A; margin-top:var(--space-4)}
.band .lbtn:hover{background:#FFA83C; color:#20160A}
.band .lbtn.ghost{background:transparent; color:#fff;
                  border-color:rgba(255,255,255,.35)}
.band .lbtn.ghost:hover{background:rgba(255,255,255,.10); color:#fff;
                        border-color:#fff}

/* Design signature 1: orange numbered tab on a navy section bar. */
.sechead{display:flex; align-items:stretch; margin:var(--space-9) 0 var(--space-4);
  border-radius:var(--radius-md); overflow:hidden}
.sechead .tab{
  background:var(--orange); color:#20160A; font-family:var(--font-mono);
  font-weight:700; font-size:.95rem; letter-spacing:.04em;
  padding:var(--space-4) var(--space-5); display:grid; place-items:center;
  font-variant-numeric:tabular-nums; flex:0 0 auto;
}
.sechead h2{
  margin:0; flex:1 1 auto; background:var(--navy); color:#fff;
  font-family:var(--font-sans); font-weight:600; font-size:var(--step-2);
  letter-spacing:.01em; padding:var(--space-4) var(--space-5);
  display:flex; align-items:center; text-wrap:balance;
}
.band .sechead,.tinted .sechead{margin-top:0}
.band .sechead h2,.tinted .sechead h2{color:#fff}
.tinted .sechead{margin-bottom:var(--space-4)}
@media (max-width:560px){
  .sechead h2{font-size:var(--step-1); padding:var(--space-3) var(--space-4)}
  .sechead .tab{padding:var(--space-3) var(--space-4); font-size:.85rem}
}

/* -------------------------------------- enterprise / government */
.capsecs{display:grid; gap:var(--space-4); margin-top:var(--space-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.capsec{border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-5); display:flex; flex-direction:column}
.capsec h3{margin:0 0 var(--space-3)}
.capsec .q{margin:0 0 var(--space-3); font-family:var(--font-serif);
  font-size:1.05rem; color:var(--navy); line-height:1.45}
.capsec .w{margin:0 0 var(--space-4); font-size:.93rem; color:var(--muted);
  line-height:1.6}
.capsec .go{margin-top:auto; color:var(--teal-ink); font-weight:600;
  font-size:.9rem; text-decoration:none; display:inline-flex;
  align-items:center; min-height:44px}
.capsec .go:hover{text-decoration:underline}

/* The government programme architecture. Numbered because the order is
   the argument - you cannot certify what you did not design. */
.stages{list-style:none; margin:var(--space-6) 0 0; padding:0;
  display:grid; gap:var(--space-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.stages li{border:1px solid var(--line); border-radius:var(--radius-lg);
  border-left:3px solid var(--teal); padding:var(--space-5)}
.stages .st-n{font-family:var(--font-mono); font-size:.8rem;
  color:var(--teal-ink); font-weight:600; font-variant-numeric:tabular-nums}
.stages h3{margin:var(--space-2) 0 var(--space-3); font-size:1.05rem;
  font-family:var(--font-sans)}
.stages p{margin:0; font-size:.92rem; color:var(--muted); line-height:1.6}

/* Sector workflows */
.flows{display:grid; gap:var(--space-4); margin-top:var(--space-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.flow{border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-5)}
.flow h4{margin:0 0 var(--space-4); font-size:.95rem;
  font-family:var(--font-sans); color:var(--navy)}
.flow ol{list-style:none; margin:0; padding:0; counter-reset:f}
.flow li{counter-increment:f; position:relative; padding:0 0 var(--space-4) var(--space-6);
  font-size:.9rem; color:var(--ink); line-height:1.4}
.flow li:last-child{padding-bottom:0}
.flow li::before{content:counter(f); position:absolute; left:0; top:-1px;
  width:20px; height:20px; border-radius:var(--radius-pill);
  background:var(--teal-soft); color:var(--teal-ink);
  font-family:var(--font-mono); font-size:.7rem; font-weight:600;
  display:grid; place-items:center}
.flow li:not(:last-child)::after{content:""; position:absolute;
  left:9.5px; top:20px; bottom:2px; width:1px; background:var(--line-2)}

/* --------------------------------------------------- tier identity */
/* The award certificates are the model. On the Professional
   certificate the frame, the tier name, the rules, the seal and every
   small-caps label are teal; on the Expert one they are all orange; on
   the Specialist one navy. Only "CERTIFICATION AWARD" is orange on all
   three - which is why .eyebrow is orange site-wide and everything
   below follows the tier.
   Before this the tier colour reached a card border and a dot, so the
   Expert page carried almost no orange while its certificate is orange
   from edge to edge. */
.tierpage .tname{color:var(--tier-ink,var(--navy))}
.tierpage h2{
  padding-bottom:var(--space-3);
  border-bottom:2px solid var(--tier,var(--line));
}
.tierpage .valuebar li::before{background:var(--tier,var(--teal))}
.tierpage .lprice{color:var(--tier-ink,var(--navy))}
.tierpage .ratekey strong{color:var(--tier-ink,var(--navy))}
.tierpage .switch a[aria-current]{border-color:var(--tier,var(--navy))}
/* The certificate's inner rule, at the head of the page. */
.tierpage .tierhead{border-left-width:6px}


/* One rule set, three certifications. The colour arrives as --tier on
   the element, so nothing here knows how many tiers exist. */
.tierhead{
  border-left:4px solid var(--tier,var(--navy));
  padding-left:var(--space-5); margin-bottom:var(--space-7);
}
.tierhead .eyebrow{display:flex; align-items:center; gap:var(--space-2);
  color:var(--tier-ink,var(--muted))}
.tierdot{
  width:9px; height:9px; border-radius:var(--radius-pill);
  background:var(--tier,var(--navy)); flex:0 0 auto;
}
.tierhead h1{margin-top:var(--space-2)}

/* ------------------------------------------------------- downloads */
/* Each row carries format, length and size. Somebody on a metered
   connection is entitled to know what a tap will cost them before they
   make it. */
.dls{list-style:none; margin:var(--space-5) 0 0; padding:0;
  display:grid; gap:var(--space-3)}
.dls a{
  display:grid; gap:var(--space-2); text-decoration:none;
  background:var(--paper); border:1px solid #CBE4E9;
  border-radius:var(--radius-lg); padding:var(--space-5);
  color:var(--ink); position:relative;
  transition:border-color var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out);
}
.dls a:hover{border-color:var(--teal); box-shadow:var(--shadow-2)}
.dl-t{font-weight:700; color:var(--navy); font-size:1.02rem;
  padding-right:2rem}
/* A downward chevron over a baseline - reads as "download" rather than
   the corner bracket the first attempt drew. */
.dl-t::after{
  content:""; position:absolute; right:var(--space-5); top:var(--space-5);
  width:11px; height:11px; border-right:2px solid var(--teal-ink);
  border-bottom:2px solid var(--teal-ink); transform:rotate(45deg);
}
.dls a::after{
  content:""; position:absolute; right:calc(var(--space-5) - 3px);
  top:calc(var(--space-5) + 17px); width:17px; height:2px;
  background:var(--teal-ink); opacity:.55;
}
.dl-b{font-size:.93rem; color:var(--muted); line-height:1.6;
  max-width:70ch}
.dl-m{font-family:var(--font-mono); font-size:.78rem; color:var(--teal-ink);
  letter-spacing:.04em}

/* ------------------------------------------------------- mailboxes */
.mailboxes{margin-top:var(--space-8)}
.mailboxes ul{list-style:none; margin:var(--space-5) 0 0; padding:0;
  display:grid; gap:var(--space-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.mailboxes li{border-left:3px solid var(--teal);
  padding:0 0 0 var(--space-4); display:grid; gap:var(--space-1)}
.mb-l{font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-weight:700}
.mb-a{font-weight:600; color:var(--teal-ink); text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px;
  font-size:1rem; word-break:break-word; align-self:start}
.mb-a:hover{text-decoration:underline}
.mb-d{font-size:.88rem; color:var(--muted); line-height:1.55}

/* ------------------------------------------- university programme */
.facts{list-style:none; margin:var(--space-6) 0 0; padding:0;
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.facts li{background:var(--paper); padding:var(--space-5)}
.facts b{display:block; font-family:var(--font-serif); font-weight:600;
  font-size:var(--step-3); color:var(--navy); line-height:1.1}
.facts span{display:block; font-size:.8rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
  margin-top:var(--space-2)}
.facts em{display:block; font-style:normal; font-size:.78rem;
  color:var(--teal-ink); margin-top:var(--space-2)}
.principle{
  border-left:3px solid var(--teal); padding:var(--space-2) 0 var(--space-2) var(--space-5);
  margin:var(--space-5) 0 0; font-size:var(--step-1); line-height:1.7;
  color:var(--navy); max-width:64ch;
}

/* Two pathways, equal weight. Neither column is styled as the senior
   one, which is the entire point of the section. */
.twoway{display:grid; gap:var(--space-4); margin-top:var(--space-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
/* Navy for the academic pathway, orange for the certification pathway -
   exactly the pairing the Partner one-pager uses for the same idea
   ("UNIVERSITY / THINK" against "CERTIFICATION / DO"). This is where
   the brand's orange actually lives: a filled panel carrying meaning,
   not a button accent.
   Text on the orange panel is navy, not white. The source sets it in
   white, which is 2.30:1 and would fail here; navy on orange is 7.27:1
   and reads as the same design. */
.way{border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-6) var(--space-5)}
.way:first-child{background:var(--navy); border-color:var(--navy)}
.way:first-child h3,.way:first-child li{color:#fff}
.way:first-child .owner{color:#7FD3DD}
.way:first-child li::before{color:#7FD3DD}
.way:nth-child(2){background:var(--orange); border-color:var(--orange)}
.way:nth-child(2) h3,.way:nth-child(2) li{color:var(--navy)}
.way:nth-child(2) .owner{color:#5C3400}
.way h3{margin:0 0 var(--space-2)}
.way .owner{color:var(--teal-ink); font-weight:600; font-size:.88rem;
  margin:0 0 var(--space-5)}
.way ol{list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2);
  counter-reset:v}
.way li{counter-increment:v; font-weight:600; color:var(--navy);
  font-size:1.02rem; display:grid; grid-template-columns:2.2rem 1fr;
  align-items:baseline}
.way li::before{content:counter(v,decimal-leading-zero);
  font-family:var(--font-mono); font-size:.78rem; color:var(--muted);
  font-weight:500}
.way:nth-child(2) li::before{color:#5C3400}

/* The cognitive ladder - the strongest IP in the curriculum, so it
   gets the most weight on the page. */
.ladder4{list-style:none; margin:var(--space-6) 0 0; padding:0;
  display:grid; gap:var(--space-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.ladder4 li{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-6) var(--space-5); position:relative;
  background:var(--paper);
}
.ladder4 li::before{content:""; position:absolute; left:0; right:0; top:0;
  height:4px; background:var(--teal); border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.ladder4 li:nth-child(2)::before{background:linear-gradient(90deg,var(--teal),#1E7F94)}
.ladder4 li:nth-child(3)::before{background:linear-gradient(90deg,#1E7F94,var(--navy))}
.ladder4 li:nth-child(4)::before{background:linear-gradient(90deg,var(--navy),var(--orange))}
.ladder4 .yr{margin:0; font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); font-weight:700}
.ladder4 .verb{margin:var(--space-2) 0 var(--space-3);
  font-family:var(--font-serif); font-weight:600; font-size:var(--step-3);
  color:var(--navy); line-height:1.1}
.ladder4 h3{font-size:1rem; font-family:var(--font-sans); margin:0 0 var(--space-3)}
.ladder4 .out{margin:0; font-size:.91rem; color:var(--muted); line-height:1.6}
.ladder4 .exit{margin:var(--space-4) 0 0; font-size:.85rem;
  color:var(--teal-ink); border-top:1px solid var(--line);
  padding-top:var(--space-3)}

ol.outcomes{margin:var(--space-5) 0 0; padding-left:1.4rem;
  display:grid; gap:var(--space-3); max-width:78ch}
ol.outcomes li{line-height:1.65}
ul.outcomes{margin:var(--space-5) 0 0; padding-left:1.4rem;
  display:grid; gap:var(--space-3); max-width:78ch}
ul.outcomes li{line-height:1.65}

/* in scope / out of scope */
.split2{display:grid; gap:var(--space-4); margin-top:var(--space-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.split2 > div{border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-5)}
.split2 .in{border-left:3px solid var(--ok)}
.split2 .out{border-left:3px solid var(--bad)}
.split2 h3{margin:0 0 var(--space-4); font-size:1rem;
  font-family:var(--font-sans)}
.split2 ul{margin:0; padding-left:1.2rem; display:grid; gap:var(--space-2)}
.split2 li{font-size:.91rem; color:var(--muted); line-height:1.55}

/* A tinted section ground. --adi-cyan-100 is the brief's own fill
   token: it carries the teal identity at a value that text can sit on,
   which neat teal (2.2:1 on white) cannot. Used to break long runs of
   white without adding a third navy block. */
.tinted{
  background:var(--teal-soft); border:1px solid #D3ECF0;
  border-radius:var(--radius-lg);
  padding:var(--space-8) var(--space-6); margin-top:var(--space-9);
}
.tinted > h2{margin-top:0}
.tinted .card,.tinted .path{background:var(--paper); border-color:#CBE4E9}
.tinted .path{border-top-color:var(--navy)}

/* .band carrying cards and lists. Extending the existing component
   rather than writing a second navy section type - one navy surface,
   whatever sits on it. */
.band .card{background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16)}
.band .card h3{color:#fff}
.band .card p{color:#AFC4D0}
.band .card.link:hover{border-color:var(--teal)}
.band .card .go{color:#7FD3DD}
.band h3{color:#fff}
.band .sectionnote{color:#AFC4D0}
.band ul.trust li{border-left-color:var(--teal)}
.band ul.trust strong{color:#fff}
.band ul.trust span{color:#AFC4D0}
.band ul.stds li{background:rgba(47,182,196,.14); color:#DCF3F6;
  border-color:rgba(127,211,221,.35)}
.band .subh{color:#fff}

.figs{font-size:.94rem; color:var(--muted); line-height:1.8}
.figs b{color:var(--navy); font-variant-numeric:tabular-nums}

.cardlist{display:grid; gap:var(--space-4); margin-top:var(--space-5);
          grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
/* The whole card is the link. Two small anchors per card - a heading
   and a "read more" - gave two sub-44px targets and one destination;
   one card-sized target is both easier to hit and easier to announce. */
.icard{border:1px solid var(--line); border-radius:var(--radius-lg);
       padding:var(--space-5); display:flex; flex-direction:column;
       text-decoration:none; color:var(--ink);
       transition:border-color var(--dur) var(--ease-out),
                  box-shadow var(--dur) var(--ease-out)}
.icard:hover{border-color:var(--teal); box-shadow:var(--shadow-2); color:var(--ink)}
.icard .kicker{font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
               color:var(--teal-ink); font-weight:700; margin:0 0 var(--space-3)}
.icard .ititle{font-family:var(--font-serif); font-weight:600;
               font-size:var(--step-2); line-height:1.25; color:var(--navy);
               margin:0 0 var(--space-3); text-wrap:balance}
.icard .stand{font-size:.94rem; color:var(--muted); line-height:1.6;
              margin:0 0 var(--space-4)}
.icard .meta{margin-top:auto; display:flex; justify-content:space-between;
  align-items:baseline; gap:var(--space-3); padding-top:var(--space-4);
  border-top:1px solid var(--line)}
.icard .date{font-size:.82rem; color:var(--muted)}
.icard .more{color:var(--teal-ink); font-weight:600; font-size:.9rem}
.byline{margin:var(--space-3) 0 var(--space-6); font-size:.85rem;
  color:var(--muted)}
.icard:hover .more{text-decoration:underline}

.crumbs{font-size:.86rem; color:var(--muted); margin:0 0 var(--space-4)}
.crumbs a{color:var(--teal-ink)}
.crumbs span{margin:0 .3rem}
.backlink{margin-top:var(--space-7)}
.backlink a{color:var(--teal-ink); font-weight:600;
  display:inline-flex; align-items:center; min-height:44px;
  padding-right:var(--space-3); border-radius:var(--radius-sm)}
.editorial p{max-width:var(--shell-editorial); line-height:1.75}

/* ------------------------------------------------- enquiry form */
.enq{display:grid; gap:var(--space-5); margin-top:var(--space-6);
     grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
     max-width:900px}
.field{display:flex; flex-direction:column}
.field.wide,.submit{grid-column:1 / -1}
.field label{font-weight:600; color:var(--navy); font-size:.93rem;
             margin-bottom:var(--space-2)}
.field .req{color:var(--bad)}
/* Helper text sits under its control. Above it, the fields in a row
   with help were pushed down and the row lost its shared baseline. */
.field .help{font-size:.85rem; color:var(--muted); margin:var(--space-2) 0 0}
.field label{margin-bottom:var(--space-2)}
.field input,.field select,.field textarea{
  font:inherit; font-size:1rem; color:var(--ink); background:var(--paper);
  border:1.5px solid var(--line-2); border-radius:var(--radius-md);
  padding:.7rem .8rem; min-height:48px; width:100%;
  transition:border-color var(--dur) var(--ease-out);
}
.field textarea{min-height:130px; resize:vertical; line-height:1.6}
.field input:hover,.field select:hover,.field textarea:hover{
  border-color:var(--line-2)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--teal-ink)}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--bad)}
.field .err{color:var(--bad); font-size:.87rem; margin:var(--space-2) 0 0;
            font-weight:600}
.submit{display:flex; flex-direction:column; gap:var(--space-3);
        align-items:flex-start}
.submit .help{margin:0; max-width:60ch}
button.lbtn{border:0; cursor:pointer; font-family:inherit}
.done{max-width:var(--shell-editorial)}
.done .lbtn{margin-top:var(--space-4); margin-right:var(--space-3)}

/* ---------------------------------------------------------- the hero */
/* ---------------------------------------------------- homepage 01-12 */

.hero.enterprise{
  max-width:none; padding:var(--space-6) 0 var(--space-7);
  display:grid; gap:var(--space-8);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
}
.hero.enterprise h1{max-width:18ch; font-size:var(--step-5)}
.hero.enterprise .lede{max-width:52ch}
.tertiary{margin:var(--space-4) 0 0; font-size:.94rem}
.tertiary a{color:var(--teal-ink); font-weight:600;
  display:inline-flex; align-items:center; min-height:44px}

/* The system map. An ordered list, because the order is the content -
   a screen reader gets the same six layers in the same sequence that a
   sighted reader sees, which an SVG would not have given without a
   parallel description to keep in sync. */
.sysmap{margin:0}
.sysmap ol{
  list-style:none; margin:0; padding:0;
  display:grid; gap:2px;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; background:var(--line);
}
.sysmap li{
  background:var(--paper); padding:var(--space-4) var(--space-5);
  display:grid; grid-template-columns:auto 1fr; gap:0 var(--space-4);
  align-items:baseline; position:relative;
}
.sysmap li::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--teal); opacity:calc(.25 + (var(--i,1) * .125));
}
.sysmap li:nth-child(1){--i:1} .sysmap li:nth-child(2){--i:2}
.sysmap li:nth-child(3){--i:3} .sysmap li:nth-child(4){--i:4}
.sysmap li:nth-child(5){--i:5} .sysmap li:nth-child(6){--i:6}
.sm-n{font-family:var(--font-mono); font-size:.8rem; color:var(--teal-ink);
      font-weight:600; font-variant-numeric:tabular-nums}
.sm-name{font-weight:700; color:var(--navy); font-size:1rem}
.sm-t{grid-column:2; font-size:.84rem; color:var(--muted); margin-top:2px}
.sysmap figcaption{
  font-size:.85rem; color:var(--muted); margin-top:var(--space-3);
  max-width:46ch; line-height:1.6;
}

/* 02 choose your path */
.paths{display:grid; gap:var(--space-4); margin-top:var(--space-5);
       grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.path{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  border-top:4px solid var(--navy);
  padding:var(--space-6) var(--space-5); display:flex; flex-direction:column;
}
/* All three carry the same navy rule. They were navy / teal / orange,
   which differentiated them prettily and lied: orange is reserved for
   recommended and active states, so the third card read as the
   endorsed one when the whole point of the section is that these are
   three equal doors. */
.path h3{margin:0 0 var(--space-2); font-size:var(--step-2)}
.path .who{color:var(--teal-ink); font-weight:600; font-size:.88rem;
           margin:0 0 var(--space-4)}
.path ul{list-style:none; margin:0 0 var(--space-5); padding:0;
         display:grid; gap:var(--space-2)}
.path li{font-size:.93rem; color:var(--muted); padding-left:1.1rem;
         position:relative}
.path li::before{content:""; position:absolute; left:0; top:.6em;
  width:5px; height:5px; border-radius:var(--radius-pill);
  background:var(--line-2)}
.path .lbtn{margin-top:auto; align-self:flex-start}

/* 03 the intelligence stack */
.stack{display:grid; gap:2px; margin-top:var(--space-5);
       border:1px solid var(--line); border-radius:var(--radius-lg);
       overflow:hidden; background:var(--line)}
.layer{background:var(--paper)}
.layer > summary{
  list-style:none; cursor:pointer; padding:var(--space-4) var(--space-5);
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-4);
  align-items:center; min-height:56px;
  transition:background var(--dur) var(--ease-out);
}
.layer > summary::-webkit-details-marker{display:none}
.layer > summary:hover{background:var(--pale)}
.layer[open] > summary{background:var(--navy); color:#fff}
.ly-n{font-family:var(--font-mono); font-weight:600; color:var(--teal-ink);
      font-variant-numeric:tabular-nums}
.layer[open] .ly-n{color:#7FD3DD}
.ly-name{font-weight:700; color:var(--navy); font-size:1.05rem;
  margin:0; font-family:var(--font-sans); line-height:1.3}
.layer[open] .ly-name{color:#fff}
.ly-t{font-size:.85rem; color:var(--muted); text-align:right}
.layer[open] .ly-t{color:#AFC4D0}
.ly-body{
  padding:var(--space-5); background:var(--pale);
  display:grid; gap:var(--space-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.ly-body h4{
  margin:0 0 var(--space-2); font-family:var(--font-sans);
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--teal-ink); font-weight:700;
}
.ly-body p{margin:0; font-size:.93rem; line-height:1.65; color:var(--ink)}

/* 05 industry coverage */
/* Navy. Measured against the brief's colour distribution the page was
   80% white and 7% navy against a 20-25% navy target - it read as a
   document rather than an institution. This matrix is the largest
   single block mid-page, so it is where navy buys the most. */
.inds{display:grid; gap:1px; margin-top:var(--space-5);
      background:rgba(255,255,255,.10); border:1px solid var(--navy);
      border-radius:var(--radius-lg); overflow:hidden;
      grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.ind{background:var(--navy); padding:var(--space-6) var(--space-5)}
.ind h3{margin:0 0 var(--space-2); font-size:1rem; font-family:var(--font-sans);
        font-weight:700; color:#fff}
.ind p{margin:0; font-size:.89rem; color:#AFC4D0; line-height:1.55}

/* a sub-heading inside a section that already owns the h2 */
.subh{margin-top:var(--space-8); font-size:var(--step-2)}

/* 11 trust and standards */
ul.trust{list-style:none; padding:0; margin:var(--space-5) 0 0;
  display:grid; gap:var(--space-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
ul.trust li{border-left:3px solid var(--teal); padding:0 0 0 var(--space-4)}
ul.trust strong{display:block; color:var(--navy); margin-bottom:.15rem}
ul.trust span{color:var(--muted); font-size:.93rem; line-height:1.6}
ul.stds{list-style:none; padding:0; margin:var(--space-5) 0 0;
  display:flex; flex-wrap:wrap; gap:var(--space-2)}
ul.stds li{
  font-family:var(--font-mono); font-size:.82rem; font-weight:500;
  letter-spacing:.06em; color:var(--navy); background:var(--teal-soft);
  border:1px solid #CBE9ED; border-radius:var(--radius-sm);
  padding:.45rem .8rem;
}

/* 12 final cta */
.finalcta{
  background:var(--navy); color:#DCE9EE; border-radius:var(--radius-lg);
  border-top:4px solid var(--orange);
  padding:var(--space-9) var(--space-7); margin-top:var(--space-10);
}
.finalcta h2{color:#fff; margin:0 0 var(--space-7); max-width:24ch;
             font-size:var(--step-3)}
.finalcta .routes{display:grid; gap:var(--space-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.finalcta .who{color:#7FD3DD; font-weight:600; font-size:.88rem;
               margin:0 0 var(--space-3)}
.finalcta .lbtn{background:var(--orange); color:#20160A; width:100%}
.finalcta .lbtn:hover{background:#FFA83C; color:#20160A}
.finalcta .verifynote{margin:var(--space-7) 0 0; font-size:.9rem;
  color:#AFC4D0; max-width:60ch}
.finalcta .verifynote a{color:#8FD9E2}

@media (max-width:900px){
  .hero.enterprise{grid-template-columns:1fr; gap:var(--space-6)}
  .ly-t{display:none}
  .layer > summary{grid-template-columns:auto 1fr}
}

.hero{padding:1.2rem 0 .4rem; max-width:44rem}
.herobtns{display:flex; gap:.7rem; flex-wrap:wrap; margin:1.5rem 0 0}

/* audience switch - individuals vs organisations */
.switch{display:inline-flex; background:var(--pale); border:1px solid var(--line);
        border-radius:var(--radius-pill); padding:.25rem; gap:.25rem; margin:.2rem 0 0}
.switch a{
  text-decoration:none; color:var(--muted); font-size:.88rem; font-weight:600;
  padding:.6rem 1rem; border-radius:var(--radius-pill); min-height:44px;
  display:inline-flex; align-items:center;
}
.switch a[aria-current]{background:var(--paper); color:var(--navy);
  box-shadow:var(--shadow-2)}
.switch a:hover{color:var(--navy)}

/* -------------------------------------------------------- the ladder
   A prerequisite sequence, so it is drawn as one: a rail the three
   stages sit on, with the level marker doing the numbering. Three
   detached price cards would read as competing subscriptions, which is
   the opposite of what these credentials are. */
.ladder{
  list-style:none; padding:50px 0 0;
  display:grid; gap:1.15rem; margin:1.4rem 0 0; position:relative;
  grid-template-columns:repeat(3,1fr); align-items:stretch;
}
.ladder::before{
  content:""; position:absolute; top:24px; height:2px; z-index:0;
  left:calc(1.3rem + 17px);
  right:calc((100% - 2.3rem)/3 - 1.3rem - 17px);
  background:linear-gradient(90deg,var(--teal),var(--navy) 52%,var(--orange));
  opacity:.4;
}
.lcard{
  position:relative; z-index:1; display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--radius);
  padding:1.35rem 1.3rem 1.4rem; background:var(--paper);
}
.lcard.featured{border:1.5px solid var(--tier,var(--teal));
  box-shadow:var(--shadow-3)}
/* The certification's own colour along the top of its card - the thing
   that makes three levels legible at a glance. It must come AFTER the
   blocks above: both set the `border` shorthand, which resets
   border-top no matter how specific this rule is. */
.lcard,.lcard.featured{border-top:4px solid var(--tier,var(--navy))}
.level{
  position:absolute; top:-42px; left:1.3rem; margin:0;
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--paper); padding-right:.75rem;
}
.level b{
  width:34px; height:34px; border-radius:50%; display:grid;
  place-items:center; background:var(--navy); color:#fff;
  font-size:.82rem; font-weight:800; letter-spacing:.02em;
  box-shadow:0 0 0 5px var(--paper);
}
/* Driven by the card's own --tier-ink, not by its position. The
   nth-child version coloured markers 1 and 3 and left 2 to a default,
   which meant the colours were a property of the ORDER rather than of
   the certification - reorder the ladder and Professional turns
   orange. */
.level b{background:var(--tier-ink,var(--navy))}
.level em{font-style:normal; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); font-weight:700}
.flag{
  display:inline-block; background:var(--teal-soft); color:var(--teal-ink);
  font-size:.75rem; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; padding:.32rem .6rem; border-radius:var(--radius-sm);
  margin:0 0 .7rem; border:1px solid #BFE6EC;
}
.flag.alt{background:var(--orange-soft); color:var(--orange-ink);
  border-color:#F3D6AE}
.flag.ghost{visibility:hidden}
.lname{font-family:var(--font-serif); font-weight:600;
  font-size:var(--step-2); margin:.1rem 0 .05rem; color:var(--navy)}
.lrole{font-weight:700; margin:0 0 .5rem;
  font-size:.95rem}
/* Was nth-child(2)/(3), which made the colour a property of the card's
   POSITION rather than of the certification. */
.lrole{color:var(--tier-ink,var(--teal-ink))}
.lwho,.lcovers{color:var(--muted); font-size:.88rem; margin:0 0 .5rem}
.lpromise{color:var(--ink); font-weight:600; margin:.5rem 0 .5rem;
  font-size:.96rem}
ul.lstats{list-style:none; padding:.7rem 0 0; margin:.6rem 0 .9rem;
  font-size:.85rem; color:var(--muted); border-top:1px solid var(--line)}
ul.lstats li{padding:.14rem 0}
.lspacer{flex:1 1 auto}
.lprice{font-family:var(--font-serif); font-size:var(--step-3); font-weight:800; color:var(--navy);
  margin:.4rem 0 .05rem; font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.lprice.small{font-size:var(--step-2)}
.lterm{color:var(--muted); font-size:.86rem; margin:0 0 .2rem}
.lprereq{color:var(--muted); font-size:.76rem; margin:.85rem 0 0;
  text-transform:uppercase; letter-spacing:.08em; font-weight:600;
  border-top:1px solid var(--line); padding-top:.7rem}
p.lede.tight{margin-bottom:.8rem}
.fields .explain{font-weight:500}
.lfrom{margin:0; font-size:.75rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); font-weight:700}
.lrates{margin:.55rem 0 0; font-size:.87rem}
.lrates a{color:var(--teal-ink); font-weight:600;
  display:inline-flex; align-items:center; min-height:44px}
.lcard .lbtn{margin-top:.85rem}
.was{color:var(--muted); text-decoration:line-through; font-size:.92rem}
.save{color:var(--orange-ink); font-weight:700; font-size:.9rem;
      margin:.1rem 0 .3rem}

/* ------------------------------------------------------- proof strip */
.valuebar{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.2rem 0 .5rem;
          list-style:none; padding:0}
.valuebar li{background:var(--pale); border:1px solid var(--line);
  border-radius:var(--radius-pill); padding:.4rem .85rem; font-size:.86rem;
  color:var(--navy); font-weight:600; font-variant-numeric:tabular-nums}

/* ------------------------------------------------------ prepare grid */
.prep{display:grid; gap:1rem; align-items:stretch; margin:1.3rem 0 0;
  grid-template-columns:repeat(3,1fr)}
.pcard{border:1px solid var(--line); border-radius:var(--radius);
  padding:1.3rem; background:var(--paper); display:flex;
  flex-direction:column}
.pcard.recommended{border:2px solid var(--teal); background:#FCFEFE;
  box-shadow:var(--shadow-3)}
.pcard h3{font-size:var(--step-1); letter-spacing:.01em}
/* Reserve the flag row in every column. Without it only the
   recommended card has one, and the feature rows it exists to make
   comparable no longer line up across the grid. */
.pcard .flag.ghost{visibility:hidden}
.pfor{min-height:3.3em}
.ptag{font-size:.9rem; color:var(--ink); font-weight:600; margin:.1rem 0 .5rem}
.pfor{color:var(--muted); font-size:.88rem; margin:.1rem 0 .5rem}
ul.plist{list-style:none; padding:0; margin:.85rem 0 1rem; font-size:.88rem}
ul.plist li{padding:.38rem 0; border-top:1px solid var(--line);
  display:flex; gap:.5rem; align-items:baseline}
ul.plist .y{color:var(--teal-ink); font-weight:800; flex:0 0 auto}
ul.plist .n{color:var(--muted); font-weight:800; flex:0 0 auto}
ul.plist .off{color:var(--muted)}
.pspacer{flex:1 1 auto}
.reassure{background:var(--pale); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.15rem 1.35rem; margin:1.5rem 0 0}
.reassure p{margin:0 0 .3rem; color:var(--navy); font-weight:700}
.reassure p+p{color:var(--muted); font-weight:400; font-size:.94rem}

/* ---------------------------------------------------------- pathways */
.paths{display:grid; gap:1.15rem; margin:1.4rem 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.pathcard{border:1px solid var(--line); border-radius:var(--radius);
  padding:1.35rem; background:var(--paper); display:flex;
  flex-direction:column}
.pathcard.best{border:1.5px solid var(--orange)}
ol.chain{list-style:none; padding:0; margin:.3rem 0 1rem; display:flex;
  flex-wrap:wrap; align-items:center; gap:.45rem; font-size:.86rem}
ol.chain li{display:flex; align-items:center; gap:.45rem; color:var(--navy);
  font-weight:700}
ol.chain li::after{content:"\2192"; color:var(--teal-ink); font-weight:700}
ol.chain li:last-child::after{content:""}
.pricepair{display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap;
  margin:.2rem 0 0}

/* -------------------------------------------------------------- CTAs */
.cta{background:var(--pale); border:1px solid var(--line);
     border-radius:var(--radius); padding:1.25rem 1.35rem; margin:1.8rem 0 0}
.cta p{margin:0; color:var(--navy); font-weight:600}
.cta .sub{font-weight:400; color:var(--muted); font-size:.93rem;
          margin-top:.35rem; max-width:62ch}
.cta .lbtn{margin-top:.9rem}
.cta.founding{border:1px solid #EEC894; background:var(--orange-soft)}
.cta.accent{border-color:var(--line-2); background:var(--paper)}

/* --------------------------------------------------------------- FAQ */
.faq{margin:1.2rem 0 0; max-width:74ch; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; padding:.95rem .3rem .95rem 0; font-weight:600;
  color:var(--navy); font-size:1rem; list-style:none;
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:1rem; min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--teal-ink); font-weight:800;
  font-size:1.2rem; line-height:1.2; flex:0 0 auto}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--teal-ink)}
.faq .answer{margin:0 0 1.05rem; color:var(--muted); font-size:.95rem;
  max-width:68ch}

/* ------------------------------------------------------------ tables */
.tablewrap{overflow-x:auto; margin:1.2rem 0 .8rem}
table.rates{border-collapse:collapse; width:100%; min-width:34rem;
            font-size:.95rem}
table.rates th,table.rates td{padding:.7rem .8rem; text-align:right;
  border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums}
table.rates thead th{text-align:right; color:var(--navy); font-size:.8rem;
  text-transform:uppercase; letter-spacing:.06em;
  border-bottom:2px solid var(--navy)}
table.rates th[scope=row],table.rates thead th:first-child{text-align:left;
  color:var(--navy); font-weight:700}
table.rates td.best{background:var(--teal-soft); font-weight:700;
  color:var(--navy)}
table.rates .save{display:block; font-size:.75rem; font-weight:600;
  color:var(--orange-ink); letter-spacing:.02em}

/* A rates table on a navy .band.
   These must sit AFTER the table.rates block and out-specify it. The
   first attempt used .band .rates th, which ties with
   table.rates th[scope=row] on specificity and therefore lost on source
   order - navy row headers on a navy ground, 1:1 contrast, invisible.
   Same failure mode as the bare input[type=text] rule. */
.band table.rates th,.band table.rates td{color:#DCE9EE;
  border-bottom-color:rgba(255,255,255,.16)}
.band table.rates thead th{color:#7FD3DD;
  border-bottom-color:rgba(255,255,255,.30)}
.band table.rates tfoot th,.band table.rates tfoot td{color:#fff;
  font-weight:700}

ul.ratekey{list-style:none; padding:0; margin:1.1rem 0 0; display:grid;
  gap:.55rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,248px),1fr))}
ul.ratekey li{border-top:1px solid var(--line); padding:.65rem 0;
  font-size:.89rem; color:var(--muted)}
ul.ratekey strong{display:block; color:var(--navy)}

/* ------------------------------------------------------------ footer */
/* Navy, five columns, and outside <main> - it was previously a single
   line of small print INSIDE main, which is both a weak close and a
   document-outline error. */
/* No top margin: main already carries its own bottom padding, and the
   two stacked to 176px of dead white above the footer. */
footer.site{background:var(--navy); color:#C6D6DE}
footer.site .cols{
  max-width:var(--shell); margin:0 auto;
  padding:var(--space-9) var(--pad-inline) var(--space-7);
  display:grid; gap:var(--space-7) var(--space-6);
  grid-template-columns:1.6fr repeat(4,1fr);
}
footer.site .about p{margin:var(--space-3) 0 0; font-size:.9rem;
  line-height:1.6; max-width:34ch; color:#A9BecC}
footer.site .name{font-family:var(--font-serif); font-weight:600;
  font-size:1.12rem; line-height:1.15; color:#fff; display:block}
footer.site .name span{font-family:var(--font-sans); color:#7FD3DD;
  display:block; font-size:.75rem; letter-spacing:.2em; font-weight:600;
  margin-top:.15rem}
footer.site h2{
  font-family:var(--font-sans); font-size:.75rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:#7FD3DD;
  margin:0 0 var(--space-4); font-family:var(--font-sans);
}
footer.site ul{list-style:none; margin:0; padding:0; display:grid; gap:2px}
footer.site a{
  color:#C6D6DE; text-decoration:none; font-size:.9rem;
  display:inline-flex; align-items:center; min-height:44px;
  transition:color var(--dur) var(--ease-out);
}
footer.site a:hover{color:#fff; text-decoration:underline}
footer.site .legal{
  border-top:1px solid rgba(255,255,255,.12);
  max-width:var(--shell); margin:0 auto;
  padding:var(--space-5) var(--pad-inline) var(--space-8);
}
footer.site .legal p{margin:0 0 var(--space-2); font-size:.8rem;
  line-height:1.6; color:#93A7B4; max-width:80ch}

.foot{border-top:1px solid var(--line); margin-top:3.4rem; padding-top:1.3rem;
      color:var(--muted); font-size:.85rem; max-width:78ch}
.foot a{color:var(--muted)}

/* --------------------------------------------------------- verify UI */
.notice{background:#FFF7E8; border:1px solid #F0DCB4; color:var(--warn);
        padding:.8rem 1rem; border-radius:var(--radius-md); margin:0 0 1.4rem;
        font-size:.93rem}
form.check{display:flex; gap:.6rem; flex-wrap:wrap; margin:1rem 0 .4rem}
/* Scoped to the certificate lookup. These were bare element selectors,
   which is fine while a site has exactly one form and a latent bug the
   moment it has two: input[type=text] has the same specificity as
   .field input but sits later in the sheet, so it won - and flex-basis
   22rem became a 352px-tall HEIGHT inside the enquiry form's column
   flex. Scoping is the fix; raising the other rule's specificity would
   only have hidden it until the third form. */
form.check input[type=text]{flex:1 1 22rem; padding:.8rem .9rem; font-size:1.02rem;
  border:1px solid var(--line-2); border-radius:var(--radius-md); min-height:44px;
  font-family:var(--font-mono); letter-spacing:.04em; color:var(--ink); background:var(--paper)}
form.check input[type=text]:focus-visible{outline:3px solid var(--teal-ink);
  outline-offset:1px; border-color:var(--teal-ink)}
form.check button{padding:.8rem 1.4rem; font-size:1rem; font-weight:600; cursor:pointer;
  background:var(--navy); color:#fff; border:0; border-radius:var(--radius-md);
  min-height:44px}
form.check button:hover{background:var(--navy-2)}
.hint{color:var(--muted); font-size:.87rem; margin:.35rem 0 0; max-width:64ch}
.result{border:1px solid var(--line); border-radius:var(--radius);
        overflow:hidden; margin:1.4rem 0}
.result .banner{padding:.9rem 1.15rem; color:#fff; font-weight:700;
                display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.result .banner small{font-weight:500; opacity:.94}
.b-ok{background:var(--ok)} .b-bad{background:var(--bad)}
.b-warn{background:var(--warn)}
dl.fields{margin:0; padding:1rem 1.15rem; display:grid;
          grid-template-columns:max-content 1fr; gap:.5rem 1.4rem}
dl.fields dt{color:var(--muted); font-size:.82rem; text-transform:uppercase;
             letter-spacing:.07em}
dl.fields dd{margin:0; font-weight:600}
dl.fields dd.mono{font-family:var(--font-mono); letter-spacing:.03em}

/* ------------------------------------------------------------ motion
   Progression is the story, so the ladder arrives in sequence rather
   than all at once. It runs ONCE on load and moves nothing afterwards -
   pricing that shifts while someone is comparing it is a usability
   defect, not a delight. */
@media (prefers-reduced-motion:no-preference){
  .reveal{animation:rise .42s cubic-bezier(.22,.61,.36,1) both}
  .reveal:nth-child(2){animation-delay:.09s}
  .reveal:nth-child(3){animation-delay:.18s}
  @keyframes rise{
    from{opacity:0; transform:translateY(12px)}
    to{opacity:1; transform:none}
  }
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ------------------------------------------------------- breakpoints */
/* ------------------------------------------------- responsive shell */
/* Below 1080px the nav no longer fits on the brand row. It moves to its
   own full-width row and the mega panels stop being floating cards and
   become in-flow grouped disclosures - the brief's grouped mobile menu,
   with no second markup path to keep in sync. */
@media (max-width:1080px){
  header.top .bar{flex-wrap:wrap}
  header.top nav.primary{margin-left:0; width:100%;
    border-top:1px solid rgba(255,255,255,.12);
    padding-top:var(--space-2); margin-top:var(--space-1)}
  header.top details{position:static}
  .mega{
    position:static; min-width:0; width:100%;
    margin:var(--space-2) 0 var(--space-3);
    background:rgba(255,255,255,.05); color:#fff;
    border-color:rgba(255,255,255,.14); box-shadow:none;
    padding:var(--space-4); gap:var(--space-5);
  }
  .mega h3{color:#7FD3DD; border-bottom-color:rgba(255,255,255,.14)}
  .mega a{color:#DCE9EE}
  .mega a:hover{background:rgba(255,255,255,.10); color:#fff}
  header.top .utility{margin-left:auto}
}
@media (max-width:640px){
  /* One column, source order preserved: Solutions, Programs,
     Certifications, Universities, Insights, About. A two-column split
     put the three plain links above the three menus, which inverted
     the brief order and buried the primary offering below About. */
  header.top nav.primary{display:flex; flex-direction:column;
    align-items:stretch; gap:0}
  header.top nav.primary > a,header.top summary{width:100%}
  header.top .utility{margin-left:0; padding-top:var(--space-3);
    margin-top:var(--space-2); border-top:1px solid rgba(255,255,255,.12)}
  header.top a.talk{flex:1; justify-content:center}
  footer.site .cols{grid-template-columns:1fr 1fr}
  footer.site .about{grid-column:1 / -1}
}
@media (max-width:900px){
  footer.site .cols{grid-template-columns:repeat(2,1fr)}
  footer.site .about{grid-column:1 / -1}
  .ladder,.prep{grid-template-columns:1fr}
  .ladder{padding-top:0}
  /* The reserved flag row exists so three side-by-side cards line up.
     Stacked, there is nothing to line up with and it is just a hole. */
  .flag.ghost{display:none}
  .pfor{min-height:0}
  /* The rail becomes a spine down the left of the stack. */
  .ladder::before{left:17px; right:auto; top:1.6rem; bottom:1.6rem;
    width:2px; height:auto;
    background:linear-gradient(180deg,var(--teal),var(--navy) 52%,var(--orange))}
  .lcard{margin-left:3rem}
  .level{position:static; background:none; padding:0; min-height:34px;
    margin:0 0 .8rem}
  .level b{position:absolute; left:-3rem; top:1.35rem}
  .pcard.recommended{order:-1}
}
@media (max-width:560px){
  main{padding:1.5rem 1rem 2.75rem}
  h2{margin-top:2.4rem}
  header.top nav{gap:.15rem; margin-left:0; width:100%;
    padding-top:.35rem; border-top:1px solid rgba(255,255,255,.14)}
  header.top nav a{font-size:.84rem; padding:.6rem .45rem}
  dl.fields{grid-template-columns:1fr; gap:.15rem}
  dl.fields dd{margin-bottom:.55rem}
  .herobtns .lbtn{flex:1 1 100%}
  .lcard{margin-left:3rem}
  .level b{left:-3rem}
}
@media print{
  header.top,.herobtns,.skip{display:none}
  .lcard,.pcard,.card{break-inside:avoid}
}