*{box-sizing:border-box;margin:0;padding:0;}
  :root{--navy:#1F2A44;--ink:#23262B;--gray:#6B7482;--orange:#E4691E;--line:#E7EAF0;--canvas:#EBEEF2;
        /* Red / yellow / green — same values the four gear boards rate with, so a
           colour means the same thing everywhere on the site. */
        --r:#E5534B;--a:#E8B23A;--g:#46B36B;
        /* The audit's name column and the gap after it. Shared, because the training
           panel sits on its own line and has to indent past both to stay aligned
           with the statement it is answering. */
        --namecol:195px;--namegap:16px;}
  body{font-family:-apple-system,"Segoe UI","Helvetica Neue",Arial,"Liberation Sans",sans-serif;background:var(--canvas);padding:40px;-webkit-font-smoothing:antialiased;color:var(--ink);}
  .page{width:100%;max-width:1360px;background:#fff;border-radius:22px;box-shadow:0 18px 50px rgba(20,30,60,.10);padding:38px 42px 26px;margin:0 auto;}
  .tl-logo{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
  .tl-logo-img{height:30px;width:auto;display:block;}
  .tl-logo.foot{margin-bottom:0;} .tl-logo.foot .tl-logo-img{height:24px;}
  header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;gap:26px;}
  .kicker{font-size:12px;font-weight:700;letter-spacing:1.8px;color:var(--orange);text-transform:uppercase;margin-bottom:6px;}
  h1{font-family:Georgia,serif;font-size:31px;font-weight:700;color:var(--navy);letter-spacing:-.3px;}
  .subtitle{font-size:14.5px;color:var(--navy);font-weight:600;margin-top:7px;}
  /* One line on what the page is, one on what it does with you. The bold line keeps
     the shorthand/Longhand play; the grey line below it is where a first-time reader
     learns this is a rated board, not a reading list. */
  .headlede{font-size:13.5px;line-height:1.55;color:var(--gray);margin-top:7px;max-width:720px;}
  .head-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
  .head-action{display:inline-flex;min-height:44px;align-items:center;justify-content:center;border:1px solid var(--navy);border-radius:10px;padding:10px 15px;color:var(--navy);font-size:13px;font-weight:800;text-decoration:none;transition:transform .14s ease,background .14s ease,color .14s ease,box-shadow .14s ease;}
  .head-action.primary{background:var(--navy);color:#fff;box-shadow:0 8px 20px rgba(31,42,68,.16);}
  .head-action:hover{transform:translateY(-2px);background:#F4F6F9;}
  .head-action.primary:hover{background:#2A3757;}
  .head-action:focus-visible{outline:3px solid var(--orange);outline-offset:3px;}
  /* The gear model is its own first section rather than a hero-side illustration.
     Human judgement drives the train; each smaller, higher gear turns farther in
     the same amount of time, while the labels tie each gear to its problem terrain. */
  .gear-overview{position:relative;overflow:hidden;border:1px solid #D8DEE9;border-radius:20px;background:linear-gradient(145deg,#F8FAFC 0%,#FFF 52%,#FDF3EB 100%);padding:26px 28px 28px;margin-bottom:22px;}
  .gear-overview::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,#F0A46A 0 25%,#EBCB55 25% 50%,#5FC6D8 50% 75%,#77C58A 75%);}
  .gear-overview-head{max-width:760px;margin-bottom:8px;}
  /* The section is named by what it is. "Match the gear to the problem" is not lost —
     it still heads the label column inside the diagram, which is where it acts as an
     instruction rather than a title. */
  .gear-overview-title{font-family:Georgia,serif;font-size:32px;line-height:1.17;font-weight:700;color:var(--navy);letter-spacing:-.3px;}
  .gear-overview-lede{font-size:13.5px;line-height:1.55;color:var(--gray);margin-top:8px;max-width:720px;}
  .gear-system{width:100%;max-width:1180px;margin:0 auto;}
  .gear-system svg{width:100%;height:auto;display:block;overflow:visible;}
  .gear-number{font-family:Georgia,serif;font-weight:700;text-anchor:middle;dominant-baseline:central;}
  .gear-mobile{display:none;}
  .gear-rotor{transform-box:fill-box;transform-origin:center;}
  .gear-system.is-spinning .gear-rotor{animation:gear-turn 4.2s cubic-bezier(.22,.75,.2,1) var(--delay,0s) both;}
  .gear-human{--turn:38deg;--delay:0s;--mesh:30deg;}
  .gear-chat{--turn:-54deg;--delay:.08s;--mesh:-60deg;}
  .gear-assistant{--turn:72deg;--delay:.18s;--mesh:60deg;}
  .gear-agents{--turn:-94deg;--delay:.3s;--mesh:-90deg;}
  .gear-loops{--turn:124deg;--delay:.44s;--mesh:120deg;}
  @keyframes gear-turn{from{transform:rotate(0deg);}to{transform:rotate(var(--turn));}}
  .gear-training-paths{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:4px;}
  .gear-training-path{--from:#F0A46A;--to:#EBCB55;position:relative;overflow:hidden;display:flex;min-height:158px;flex-direction:column;border:1px solid var(--line);border-radius:15px;background:#fff;padding:17px 17px 15px;color:var(--ink);text-decoration:none;box-shadow:0 5px 18px rgba(20,30,60,.055);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,opacity .18s ease;}
  .gear-training-path::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--from),var(--to));}
  .gear-training-path:hover{transform:translateY(-3px);border-color:var(--to);box-shadow:0 14px 32px rgba(20,30,60,.11);}
  .gear-training-path:focus-visible{outline:3px solid var(--navy);outline-offset:3px;}
  .gear-training-path.g23{--from:#EBCB55;--to:#5FC6D8;}
  .gear-training-path.g34{--from:#5FC6D8;--to:#77C58A;}
  .gear-training-path.overview{--from:#1F2A44;--to:#F0A46A;}
  /* ===== Training → gear linking =====
     One direction only: pointing at a training lights the gears it covers and steps
     the other trainings back. The model itself is a diagram, not a control — reading
     it should not require discovering that its shapes are hoverable, and the cards
     already name their gears in words ("To go from Gear 1 → 2"), so the cards are
     the single place the link is offered. Keyboard focus does the same thing as
     hover, which is what keeps the link reachable without a pointer.
     Everything is opacity and colour on top of the resting layout: nothing reflows,
     so a pointer crossing the cards cannot shift what it is about to land on. */
  .gear-part{transition:opacity .18s ease;}
  .gear-system.is-linked .gear-part{opacity:.2;}
  .gear-system.is-linked .gear-part.is-lit{opacity:1;}
  /* Only the gears a card covers turn, and only while it is pointed at — the motion
     says "these two are what this training moves you through" rather than decorating
     the whole train. A separate keyframe name from the load animation is what makes
     it restart on every hover: an identical animation-name would be treated as the
     same, already-finished animation and never replay.
     It rides on its own nested rotor rather than sharing the one the load animation
     holds. Two animations on one element would fight over it: dropping back to the
     load animation's name on mouseleave counts as a new animation, and the whole
     four-second load turn would replay every time the pointer left a card.
     Every --mesh is a multiple of 30deg — one whole tooth pitch on a twelve-tooth
     gear — so the nested rotor ends rotationally identical to where it started, and
     snapping back to no rotation when the pointer leaves is invisible. Signs
     alternate along the train and magnitudes grow as the gears shrink, the same way
     the load turn does, so a lit pair reads as meshing rather than as two shapes
     spinning near each other. */
  .gear-mesh-rotor{transform-box:fill-box;transform-origin:center;}
  .gear-system.is-linked .gear-part.is-lit .gear-mesh-rotor{animation:gear-mesh 1.6s cubic-bezier(.24,.72,.3,1) both;}
  @keyframes gear-mesh{from{transform:rotate(0deg);}to{transform:rotate(var(--mesh));}}
  .gear-training-paths.is-linked .gear-training-path{opacity:.4;}
  /* Scoped to .is-linked rather than written bare: the dimming selector carries three
     classes, so a bare .gear-training-path.is-active would lose to it and the lit card
     would fade along with the rest. */
  .gear-training-paths.is-linked .gear-training-path.is-active{opacity:1;}
  .gear-training-path.is-active{transform:translateY(-3px);border-color:var(--to);box-shadow:0 14px 32px rgba(20,30,60,.13);}
  /* The pill already names the gears in words — "To go from Gear 2 → 3" — so it is
     the honest thing to light rather than inventing a second badge for the state. */
  .gear-training-path.is-active .gear-training-shift{background:var(--navy);color:#fff;}
  .gear-training-shift{align-self:flex-start;border-radius:999px;background:#F4F6F9;padding:5px 9px;font-size:10px;font-weight:850;letter-spacing:1px;text-transform:uppercase;color:var(--navy);transition:background .18s ease,color .18s ease;}
  .gear-training-path strong{display:block;margin-top:11px;font-family:Georgia,serif;font-size:19px;line-height:1.2;color:var(--navy);}
  .gear-training-path > span:not(.gear-training-shift):not(.gear-training-cta){display:block;margin-top:6px;font-size:12.5px;line-height:1.45;color:var(--gray);}
  .gear-training-cta{display:inline-flex;align-items:center;gap:5px;margin-top:auto;padding-top:12px;font-size:11.5px;font-weight:800;color:var(--navy);}
  .gear-training-cta i{font-style:normal;transition:transform .16s ease;}
  .gear-training-path:hover .gear-training-cta i{transform:translateX(3px);}
  /* ===== Core certification-preparation courses ===== */
  .core-courses{position:relative;overflow:hidden;border:1px solid #D8DEE9;border-radius:18px;background:#fff;padding:25px 26px 24px;margin-top:22px;}
  .core-courses::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--navy),var(--orange));}
  .section-kicker{font-size:10.5px;font-weight:850;letter-spacing:1.5px;text-transform:uppercase;color:var(--orange);}
  .section-title{margin-top:6px;font-family:Georgia,serif;font-size:30px;line-height:1.18;color:var(--navy);}
  .section-lede{max-width:850px;margin-top:8px;font-size:14px;line-height:1.6;color:var(--gray);}
  .core-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px;}
  .core-card{display:flex;min-width:0;flex-direction:column;border:1px solid var(--line);border-radius:14px;background:#FCFCFD;padding:17px 17px 15px;color:var(--ink);text-decoration:none;box-shadow:0 5px 16px rgba(20,30,60,.045);transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease;}
  .core-card:hover{transform:translateY(-2px);border-color:var(--orange);box-shadow:0 11px 24px rgba(20,30,60,.09);}
  .core-card:focus-visible{outline:3px solid var(--navy);outline-offset:3px;}
  .core-meta{display:flex;flex-wrap:wrap;gap:6px;}
  .core-chip{border-radius:999px;background:#EEF1F5;padding:4px 7px;font-size:9px;font-weight:850;letter-spacing:.65px;text-transform:uppercase;color:var(--navy);}
  .core-chip.live{background:#E1F2E5;color:#047857;}
  .core-card strong{margin-top:12px;font-family:Georgia,serif;font-size:18px;line-height:1.25;color:var(--navy);}
  .core-card > span:not(.core-meta):not(.core-cta){margin-top:7px;font-size:12.5px;line-height:1.48;color:var(--gray);}
  .core-cta{margin-top:auto;padding-top:13px;font-size:11.5px;font-weight:850;color:var(--orange);}
  .core-foot{border-top:1px solid var(--line);margin-top:16px;padding-top:13px;font-size:12.5px;line-height:1.5;color:var(--gray);}
  .core-foot strong{color:var(--navy);}
  /* ===== AI Gear Audit =====
     Rate all 27 techniques red/yellow/green; a red or yellow rating opens the
     training sections that close that particular gap.
     The dot component is ported from the four gear boards (chat.html et al) rather
     than rebuilt, so the gesture, the keyboard model and the ARIA are identical. */
  /* margin-top, not bottom: the audit now sits between the program outcomes and the
     coach CTA, and the CTA carries its own 22px above it. */
  .audit{border:1px solid var(--line);border-radius:18px;background:#FCFCFD;padding:20px 22px;margin-top:22px;}
  .audithead{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:14px;}
  .audittitle{font-family:Georgia,serif;font-size:32px;font-weight:700;color:var(--navy);letter-spacing:-.3px;}
  /* One sentence: what rating the board gives you back. It carries the section on
     its own now, so it is sized to be read rather than skimmed past. */
  .auditlede{font-size:14.5px;color:var(--gray);line-height:1.55;max-width:600px;margin-top:7px;}
  .legend{flex-shrink:0;border:1px solid var(--line);border-radius:14px;padding:11px 14px;background:#fff;min-width:186px;}
  .legend .lt{font-size:15px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--navy);margin-bottom:10px;}
  .legend .li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink);margin-bottom:6px;}
  .swatch{display:inline-flex;width:20px;height:20px;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0;color:#fff;font-size:9px;font-weight:900;}
  .swatch.yellow{color:var(--navy);}
  .tally{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--ink);}
  .tally .tc{display:inline-flex;align-items:center;gap:5px;font-weight:700;}
  .tally .tc i{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);}
  .tally .tot{margin-left:auto;color:var(--gray);font-weight:600;}
  .reset-btn{margin-top:7px;width:100%;background:none;border:1px solid var(--line);color:var(--gray);font:inherit;font-size:11px;font-weight:700;letter-spacing:.3px;padding:5px 9px;border-radius:8px;cursor:pointer;transition:border-color .12s ease,color .12s ease;}
  .reset-btn:hover{border-color:var(--orange);color:var(--orange);}
  .reset-btn:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
  .audit-tools{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;background:#F8FAFC;margin-bottom:12px;padding:11px 12px;}
  .audit-filter{display:flex;min-width:180px;flex:1 1 210px;flex-direction:column;gap:5px;color:var(--navy);font-size:10px;font-weight:850;letter-spacing:.7px;text-transform:uppercase;}
  .audit-filter select{min-height:42px;border:1px solid #CDD3DD;border-radius:9px;background:#fff;padding:8px 34px 8px 10px;color:var(--ink);font:inherit;font-size:12.5px;font-weight:700;letter-spacing:0;text-transform:none;}
  .audit-filter select:focus-visible,.next-unrated:focus-visible{outline:3px solid var(--orange);outline-offset:2px;}
  .next-unrated{min-height:42px;border:0;border-radius:9px;background:var(--navy);padding:9px 14px;color:#fff;font:inherit;font-size:12px;font-weight:800;cursor:pointer;}
  .next-unrated:disabled{background:#C8CED8;color:#fff;cursor:not-allowed;}
  .filter-summary{flex-basis:100%;font-size:11.5px;line-height:1.4;color:var(--gray);}
  /* One full-width list of every statement. Colour alone carries the grouping —
     each row keeps its gear's left accent and name colour — with a gap where one
     gear ends and the next begins. The gear name is still emitted for screen
     readers, which get no signal from colour at all. */
  .agroups{border:1px solid var(--line);border-radius:13px;background:#fff;padding:8px 20px 16px;}
  .agdiv{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
  /* Wraps so the training panel can be a third child sitting on its own line under
     the statement and the dots. It has to come after the dots in the DOM — it is
     what the dots reveal, and a keyboard lands on it by tabbing forward from the
     dot that opened it, not by reversing out of the row. */
  .row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:18px;padding:16px 0 16px 16px;border-top:1px solid #EEF1F5;border-left:4px solid var(--ga);}
  .row.gstart{margin-top:18px;border-top:none;}
  .agroups > .agdiv:first-child + .row{margin-top:8px;}
  .rowlab{flex:1;min-width:0;display:flex;align-items:flex-start;gap:var(--namegap);}
  .rowname{flex-shrink:0;width:var(--namecol);padding-top:3px;font-size:14px;font-weight:800;color:var(--gi);line-height:1.4;}
  .stmtwrap{flex:1;min-width:220px;}
  .stmt{max-width:850px;font-size:20px;line-height:1.42;font-weight:600;letter-spacing:-.1px;color:var(--navy);}
  /* Training links are the answer to a rating, not a permanent fixture. A statement
     shows its modules only once it is rated red or yellow: green needs no next step
     and unrated is still an open question. Withholding them until then is what buys
     the room to show two or three real module previews instead of one bare link —
     27 statements each carrying three cards up front would bury the statements. */
  .audit-next{flex-basis:100%;max-width:850px;margin-left:calc(var(--namecol) + var(--namegap));border:1px solid var(--line);border-left:3px solid var(--rc,var(--ga));border-radius:12px;background:#FBFCFD;padding:12px 14px 13px;animation:audit-next-in .18s ease both;}
  .audit-next[hidden]{display:none;}
  @keyframes audit-next-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
  .audit-next-head{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:850;letter-spacing:1.1px;text-transform:uppercase;color:var(--gray);}
  .audit-next-head i{flex-shrink:0;width:9px;height:9px;border-radius:50%;background:var(--rc,var(--ga));box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);}
  .audit-next-head em{margin-left:auto;font-style:normal;font-weight:700;letter-spacing:.5px;text-transform:none;font-size:11px;color:var(--gray);}
  /* auto-fit rather than a fixed count: two sources make two wide cards, three make
     three narrow ones, and a phone stacks all of them without a second rule. */
  .audit-next-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:9px;margin-top:10px;}
  .audit-module{display:flex;height:100%;flex-direction:column;border:1px solid var(--line);border-radius:10px;background:#fff;padding:11px 12px 10px;color:var(--ink);text-decoration:none;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease;}
  .audit-module:hover{transform:translateY(-2px);border-color:var(--ga);box-shadow:0 8px 20px rgba(20,30,60,.08);}
  .audit-module:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
  .audit-module-course{font-size:10px;font-weight:850;letter-spacing:1px;text-transform:uppercase;color:var(--gi);}
  .audit-module-section{margin-top:5px;font-size:14.5px;font-weight:800;line-height:1.3;color:var(--navy);}
  .audit-module-preview{margin-top:5px;font-size:12.5px;line-height:1.45;color:var(--gray);}
  .audit-module-cta{display:inline-flex;align-items:center;gap:4px;margin-top:auto;padding-top:9px;font-size:11.5px;font-weight:800;color:var(--gi);}
  .audit-module-cta i{font-style:normal;transition:transform .14s ease;}
  .audit-module:hover .audit-module-cta i{transform:translateX(3px);}
  .dots{display:flex;gap:12px;flex-shrink:0;padding-top:4px;}
  .dot{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);color:#fff;font:inherit;font-size:10px;font-weight:900;cursor:pointer;transition:transform .12s ease,opacity .12s ease,box-shadow .12s ease;}
  .dot.r{background:var(--r);}.dot.a{background:var(--a);color:var(--navy);}.dot.g{background:var(--g);}
  .dot:hover{transform:scale(1.18);}
  .dot:focus-visible{outline:2px solid var(--navy);outline-offset:3px;}
  .row[hidden],.agdiv[hidden]{display:none;}
  .dots.rated .dot{opacity:.24;}
  .dots.rated .dot.sel{opacity:1;box-shadow:inset 0 0 0 1px rgba(0,0,0,.10),0 0 0 3px rgba(31,42,68,.20);}
  .nojs{border:1px solid var(--line);border-radius:13px;padding:12px 15px;background:#FCFCFD;font-size:12.5px;color:var(--gray);line-height:1.5;margin-top:11px;}
  .nojs a{color:var(--navy);}
  /* ===== Program outcomes =====
     The audit rows are the evidence; these cards are the concise competency model
     they roll up into. Status is calculated from the same local ratings so the
     summary never becomes a second, conflicting assessment. */
  .program-outcomes{position:relative;overflow:hidden;border:1px solid #D8DEE9;border-radius:18px;background:linear-gradient(145deg,#F3F6FA 0%,#FFF 68%,#F1F7F5 100%);padding:25px 26px 24px;margin-top:22px;}
  .program-outcomes::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#7A869E,#F0A46A,#EBCB55,#5FC6D8,#77C58A);}
  .program-outcomes-kicker{font-size:10.5px;font-weight:850;letter-spacing:1.5px;text-transform:uppercase;color:var(--orange);}
  .program-outcomes h2{margin-top:6px;font-family:Georgia,serif;font-size:30px;line-height:1.18;color:var(--navy);}
  .program-outcomes-lede{max-width:820px;margin-top:8px;font-size:14px;line-height:1.6;color:var(--gray);}
  .program-outcomes-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:19px;}
  .program-outcome{--oc:#7A869E;display:flex;min-width:0;flex-direction:column;border:1px solid var(--line);border-left:4px solid var(--oc);border-radius:14px;background:#fff;padding:17px 18px 14px;box-shadow:0 5px 18px rgba(20,30,60,.045);}
  .program-outcome:nth-child(2){--oc:#F0A46A;}.program-outcome:nth-child(3){--oc:#EBCB55;}.program-outcome:nth-child(4){--oc:#5FC6D8;}.program-outcome:nth-child(5){--oc:#77C58A;}.program-outcome:nth-child(6){--oc:#4E9F67;}
  .program-outcome-head{display:flex;align-items:flex-start;gap:11px;}
  .program-outcome-number{display:inline-flex;width:28px;height:28px;flex:0 0 28px;align-items:center;justify-content:center;border:1px solid var(--oc);border-radius:9px;background:#F4F6F9;font-size:12px;font-weight:900;color:var(--navy);}
  .program-outcome h3{padding-top:2px;font-family:Georgia,serif;font-size:18px;line-height:1.25;color:var(--navy);}
  .program-outcome-statement{margin-top:9px;font-size:13.5px;line-height:1.55;color:var(--gray);}
  .program-outcome-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #EEF1F5;margin-top:auto;padding-top:11px;font-size:10.5px;font-weight:800;letter-spacing:.25px;color:var(--gray);}
  .program-outcome-count{text-transform:uppercase;letter-spacing:.8px;}
  .program-outcome-status{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;text-align:right;}
  .program-outcome-status::before{content:"";width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#C6CCD6;}
  .program-outcome-status.is-red::before{background:var(--r);}.program-outcome-status.is-yellow::before{background:var(--a);}.program-outcome-status.is-green::before{background:var(--g);}.program-outcome-status.is-partial::before{background:var(--navy);}
  .program-outcomes-note{border-top:1px solid #DDE2EA;margin-top:18px;padding-top:15px;font-size:13px;line-height:1.55;color:var(--gray);}
  .program-outcomes-note strong{color:var(--navy);}
  /* ===== Certification pathway ===== */
  .certification-path{position:relative;overflow:hidden;border:1px solid #D8DEE9;border-radius:18px;background:linear-gradient(145deg,#F8FAFC,#FFF);padding:25px 26px 24px;margin-top:22px;}
  .certification-path::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#7A869E,#F0A46A,#EBCB55,#77C58A);}
  .cert-status{display:inline-flex;align-items:center;border-radius:999px;background:#FCEBDE;margin-top:12px;padding:6px 9px;color:#9A3F0E;font-size:9.5px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;}
  .cert-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:17px;counter-reset:cert-step;}
  .cert-step{counter-increment:cert-step;border:1px solid var(--line);border-radius:13px;background:#fff;padding:15px 15px 14px;}
  .cert-step::before{content:counter(cert-step);display:inline-flex;width:25px;height:25px;align-items:center;justify-content:center;border-radius:8px;background:var(--navy);color:#fff;font-size:11px;font-weight:900;}
  .cert-step strong{display:block;margin-top:10px;color:var(--navy);font-size:14px;}
  .cert-step span{display:block;margin-top:5px;color:var(--gray);font-size:12px;line-height:1.45;}
  .cert-step em{display:inline-flex;border-radius:999px;background:#EEF1F5;margin-top:9px;padding:4px 7px;color:var(--gray);font-size:8.5px;font-style:normal;font-weight:850;letter-spacing:.65px;text-transform:uppercase;}
  .cert-step em.live{background:#E1F2E5;color:#047857;}
  .program-links{display:flex;flex-wrap:wrap;gap:9px;border-top:1px solid var(--line);margin-top:16px;padding-top:14px;}
  .program-link{display:inline-flex;min-height:40px;align-items:center;border:1px solid var(--navy);border-radius:9px;padding:8px 12px;color:var(--navy);font-size:12px;font-weight:800;text-decoration:none;}
  .program-link:hover{background:#F4F6F9;}.program-link:focus-visible{outline:3px solid var(--orange);outline-offset:2px;}
  /* ===== Personalized next lessons ===== */
  .next-lessons{position:relative;overflow:hidden;border:1px solid #D8DEE9;border-radius:18px;background:#fff;padding:24px 26px;margin-top:22px;}
  .next-lessons::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--r),var(--a),var(--g));}
  .next-lessons-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px;}
  .next-lesson{display:flex;min-width:0;flex-direction:column;border:1px solid var(--line);border-left:4px solid var(--rc,var(--orange));border-radius:12px;background:#FCFCFD;padding:14px;color:var(--ink);text-decoration:none;}
  .next-lesson:hover{border-color:var(--rc,var(--orange));box-shadow:0 8px 18px rgba(20,30,60,.07);}
  .next-lesson:focus-visible{outline:3px solid var(--navy);outline-offset:2px;}
  .next-lesson .next-lesson-rating{font-size:9px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;color:var(--rc,var(--orange));}
  .next-lesson strong{margin-top:7px;color:var(--navy);font-size:14px;line-height:1.3;}
  .next-lesson span{margin-top:5px;color:var(--gray);font-size:12px;line-height:1.45;}
  .next-lesson .next-lesson-cta{margin-top:auto;padding-top:10px;color:var(--navy);font-weight:850;}
  .next-lessons-empty{border:1px dashed #C9CFD9;border-radius:11px;background:#F8FAFC;margin-top:14px;padding:14px;color:var(--gray);font-size:13px;line-height:1.5;}
  /* ===== Ask a coach =====
     The board closes on a person rather than more links: whatever the audit turned
     up, one address answers it. It keeps the gradient rule and the panel treatment
     of the gear section so it reads as the end of this board, not an ad bolted on. */
  .help-cta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:22px;border:1px solid #D8DEE9;border-radius:18px;background:linear-gradient(145deg,#F8FAFC 0%,#FFF 60%,#FDF3EB 100%);padding:24px 26px 26px;margin-top:22px;}
  .help-cta::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#F0A46A,#5FC6D8,#77C58A);}
  .help-cta-copy{flex:1;min-width:290px;}
  .help-cta-kicker{font-size:10.5px;font-weight:850;letter-spacing:1.5px;text-transform:uppercase;color:var(--orange);}
  .help-cta h2{margin-top:6px;font-family:Georgia,serif;font-size:25px;line-height:1.2;color:var(--navy);}
  .help-cta-lede{max-width:640px;margin-top:7px;font-size:13.5px;line-height:1.55;color:var(--gray);}
  /* The address is spelled out in the sentence as well as sitting on the button, so
     it survives print and a plain-text read of the page. */
  .help-cta-lede a{color:var(--navy);font-weight:700;}
  .help-cta-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;border-radius:12px;background:var(--navy);padding:14px 20px;font-size:14px;font-weight:800;color:#fff;text-decoration:none;box-shadow:0 8px 22px rgba(20,30,60,.16);transition:transform .16s ease,box-shadow .16s ease,background .16s ease;}
  .help-cta-btn:hover{transform:translateY(-3px);background:#2A3757;box-shadow:0 14px 30px rgba(20,30,60,.22);}
  .help-cta-btn:focus-visible{outline:3px solid var(--navy);outline-offset:3px;}
  .help-cta-btn i{font-style:normal;transition:transform .16s ease;}
  .help-cta-btn:hover i{transform:translateX(3px);}
  footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:20px;padding-top:13px;}
  .fmeta{font-size:12px;color:var(--gray);} .pageno{font-size:13px;color:var(--gray);font-weight:600;}
  /* --- responsive: phones, tablets & small laptops. Desktop (>=1360) cascade above is untouched (every rule below is gated on max-width). --- */
  /* Four training cards across need the full desktop measure. Below it they pair up
     rather than shrinking to a column of one-word lines; the 820 rule further down
     takes them to a single column on a tablet. */
  @media(max-width:1100px){
    .gear-training-paths{grid-template-columns:repeat(2,minmax(0,1fr));}
    .core-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .cert-steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
  @media(max-width:820px){
    .rowname{width:auto;}
    .rowlab{flex-direction:column;gap:4px;}
    .stmtwrap{min-width:0;}
    /* The name is above the statement now rather than beside it, so there is no
       column left to indent past. */
    .audit-next{margin-left:0;}
    .legend{width:100%;min-width:0;}
    header{flex-direction:column;gap:14px;}
    .gear-training-paths{grid-template-columns:1fr;}
    .gear-training-path{min-height:0;}
    .program-outcomes-grid{grid-template-columns:1fr;}
    .next-lessons-grid{grid-template-columns:1fr;}
    /* The button stops sitting beside the copy and becomes the last line of it. */
    .help-cta{flex-direction:column;align-items:flex-start;gap:16px;}
    .help-cta-copy{min-width:0;}
  }
  @media(max-width:768px){body{padding:24px;}}
  @media(max-width:640px){
    .audit{padding:18px 15px;}
    /* 32px is a desktop size; on a phone it eats three lines before the board starts. */
    .audittitle{font-size:24px;}
    .legend .lt{font-size:13.5px;}
    .agroups{padding:6px 12px 12px;}
    .row{flex-direction:column;gap:11px;padding:15px 0 15px 12px;}
    .stmt{max-width:none;font-size:18px;line-height:1.48;letter-spacing:0;}
    /* The section count is a convenience on a wide row, where it sits far right of
       the heading. At this width it only crowds the heading into a second line, and
       the cards it counts are directly below it. */
    .audit-next-head em{display:none;}
    .audit-next{padding:11px 11px 12px;}
    /* Explicit single column. auto-fit still honours the 228px track minimum, and
       by 320px the nested page, audit, group, row, and panel padding has left less
       than that — the cards would overflow the page rather than stack. */
    .audit-next-list{grid-template-columns:1fr;}
    .dots{align-self:flex-start;padding-top:0;}
    .audit-tools{align-items:stretch;}
    .audit-filter{flex-basis:100%;}
    .next-unrated{width:100%;}
    .program-outcomes{padding:22px 17px 20px;}
    .program-outcomes h2{font-size:24px;}
    .program-outcome{padding:15px 14px 13px;}
    .program-outcome-meta{align-items:flex-start;flex-direction:column;gap:6px;}
    .program-outcome-status{text-align:left;}
    .gear-overview{padding:22px 17px 18px;}
    /* Kept level with .audittitle at both sizes — the two section headings are peers. */
    .gear-overview-title{font-size:24px;}
    .gear-system{width:100%;}
    .gear-desktop{display:none!important;}
    .gear-mobile{display:block;}
    .gear-mobile-train{width:min(100%,280px)!important;margin:0 auto;}
    .gear-mobile-kicker{margin-top:2px;text-align:center;font-size:9px;font-weight:800;letter-spacing:1.45px;color:var(--orange);text-transform:uppercase;}
    .gear-mobile-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px;}
    .gear-mobile-list li{min-width:0;border:1px solid var(--ga);border-left-width:3px;border-radius:9px;background:var(--gt);padding:7px 8px;}
    .gear-mobile-list li.human{grid-column:1/-1;}
    .gear-mobile-list strong{display:block;font-family:Georgia,serif;font-size:13px;line-height:1.15;color:var(--gi);}
    .gear-mobile-list span{display:block;margin-top:2px;font-size:9.5px;line-height:1.3;color:var(--gray);font-weight:600;}
    .core-courses,.certification-path,.next-lessons{padding:22px 17px 20px;}
    .core-grid,.cert-steps{grid-template-columns:1fr;}
    .section-title{font-size:24px;}
    .head-actions{flex-direction:column;align-items:stretch;}
    .head-action{width:100%;}
  }
  @media(max-width:560px){body{padding:16px;} .page{padding:24px 20px 20px;}}
  /* Print carries the whole curriculum, not just the summaries. A collapsed <details>
     hides its children at the UA level, so every panel is forced visible here; the
     beforeprint handler also sets the open attribute for engines that ignore this. */
  @media print{
    body{background:#fff;padding:0;}
    .page{box-shadow:none;border-radius:0;max-width:none;}
    /* The audit prints as a fillable rating sheet: unrated dots are something a
       leader can mark by hand on a printed board, and any ratings already made
       carry through. Only the controls come off, since a button on paper does
       nothing. */
    .reset-btn{display:none;}
    .head-actions,.audit-tools{display:none;}
    .dot{cursor:auto;}
    .program-outcomes{background:#fff;}
    .program-outcome{break-inside:avoid;box-shadow:none;}
    .core-card,.cert-step,.next-lesson{break-inside:avoid;box-shadow:none;}
  }
  @media(prefers-reduced-motion:reduce){
    .gear-system.is-spinning .gear-rotor{animation:none;}
    .gear-system.is-linked .gear-part.is-lit .gear-mesh-rotor{animation:none;}
    .audit-next{animation:none;}
    .audit-module{transition:none;}
    /* The highlight still happens — it is what makes the gear/training link legible.
       It just arrives at once rather than fading, and the lift is dropped. */
    .gear-part,.gear-training-path,.gear-training-shift{transition:none;}
    .gear-training-path.is-active{transform:none;}
  }

  /* ===== Roadmap-to-audit handoff ===== */
  .audit-invite{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid #D8DEE9;border-radius:18px;background:linear-gradient(145deg,#F8FAFC 0%,#FFF 62%,#FDF3EB 100%);padding:25px 26px 24px;margin-top:22px;}
  .audit-invite::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--r),var(--a),var(--g));}
  .audit-invite-copy{max-width:780px;}
  .audit-invite h2{margin-top:6px;font-family:Georgia,serif;font-size:28px;line-height:1.2;color:var(--navy);}
  .audit-invite p{margin-top:8px;font-size:13.5px;line-height:1.58;color:var(--gray);}
  .audit-invite-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;}
  .audit-invite-meta span{border-radius:999px;background:#EEF1F5;padding:5px 8px;color:var(--navy);font-size:9.5px;font-weight:850;letter-spacing:.45px;text-transform:uppercase;}
  .audit-invite-action{display:inline-flex;min-height:46px;flex:0 0 auto;align-items:center;justify-content:center;border-radius:11px;background:var(--navy);padding:11px 17px;color:#fff;font-size:13px;font-weight:850;text-decoration:none;box-shadow:0 8px 20px rgba(31,42,68,.16);transition:transform .14s ease,background .14s ease;}
  .audit-invite-action:hover{background:#2A3757;transform:translateY(-2px);}
  .audit-invite-action:focus-visible{outline:3px solid var(--orange);outline-offset:3px;}
  /* ===== Standalone Gear Audit page ===== */
  .audit-page-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;}
  .audit-page-topbar .tl-logo{margin-bottom:0;}
  .audit-back{display:inline-flex;min-height:42px;align-items:center;border:1px solid var(--navy);border-radius:9px;padding:8px 12px;color:var(--navy);font-size:12px;font-weight:800;text-decoration:none;}
  .audit-back:hover{background:#F4F6F9;}.audit-back:focus-visible{outline:3px solid var(--orange);outline-offset:3px;}
  .audit-page-hero{display:block;border-bottom:1px solid var(--line);margin-bottom:0;padding:25px 0 23px;}
  .audit-page-hero h1{font-size:42px;line-height:1.1;}
  .audit-page-hero .headlede{max-width:830px;font-size:14.5px;}
  .audit-page-facts{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;}
  .audit-page-facts span{border-radius:999px;background:#EEF1F5;padding:5px 8px;color:var(--navy);font-size:9.5px;font-weight:850;letter-spacing:.45px;text-transform:uppercase;}
  .audit-boundary{max-width:920px;margin-top:13px;color:var(--gray);font-size:12.5px;line-height:1.5;}
  .audit-boundary strong{color:var(--navy);}
  .audit-page .audit{margin-top:22px;}
  .audit-return{display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid var(--line);border-radius:15px;background:#F8FAFC;margin-top:22px;padding:18px 20px;}
  .audit-return h2{font-family:Georgia,serif;font-size:22px;color:var(--navy);}
  .audit-return p{max-width:680px;margin-top:5px;color:var(--gray);font-size:12.5px;line-height:1.5;}
  .audit-return-links{display:flex;flex-wrap:wrap;gap:8px;flex:0 0 auto;}
  .audit-return-links a{display:inline-flex;min-height:42px;align-items:center;border:1px solid var(--navy);border-radius:9px;padding:8px 12px;color:var(--navy);font-size:12px;font-weight:800;text-decoration:none;}
  .audit-return-links a.primary{background:var(--navy);color:#fff;}
  .audit-return-links a:focus-visible{outline:3px solid var(--orange);outline-offset:2px;}
  @media(max-width:820px){
    .audit-invite,.audit-return{align-items:flex-start;flex-direction:column;}
    .audit-invite-action{width:100%;}
    .audit-return-links{width:100%;}
  }
  @media(max-width:640px){
    .audit-page-topbar{align-items:flex-start;flex-direction:column;}
    .audit-page-hero h1{font-size:34px;}
    .audit-invite{padding:22px 17px 20px;}
    .audit-invite h2{font-size:24px;}
    .audit-return{padding:16px;}
    .audit-return-links{flex-direction:column;}
    .audit-return-links a{width:100%;justify-content:center;}
  }