/* =============================================================================
   Fleming Life Group — onboarding
   =============================================================================
   Standalone on purpose. Loaded AFTER console.css (console pages) or site.css
   (/get-started/), so it can lean on the design tokens without editing either
   file while the site styling is being reworked. Fold into console.css as its
   own numbered section when that settles — every selector here is prefixed
   .onb- or .gs- and nothing overrides an existing rule.
   ========================================================================== */

.onb-wrap{ }
/* /get-started/ only — the console supplies this with its own .page. */
.onb-page{ padding:var(--space-7); max-width:var(--measure-page); margin:0 auto }

/* --page-gutter is the wrapper's own horizontal padding, published as a
   variable so a full-bleed band inside it can cancel exactly that and reach
   the page edge. The two pages that render the course block have different
   gutters — /get-started/ uses .onb-page, the console its own .page — and the
   band must not have to know which one it is in. */
.onb-page{ --page-gutter:var(--space-7) }
.page.onb-wrap{ --page-gutter:var(--space-8) }

/* ---- The gate. One number, because one number is the question. ---- */
.onb-gate{ display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--space-4);
  background:var(--surface-card); border:1px solid var(--line-rule);
  border-left:3px solid var(--flash-500);
  border-radius:var(--radius-sm); padding:var(--space-6); margin-bottom:var(--space-6) }
.onb-gate.ok{ border-left-color:var(--text-positive) }
.onb-gate b{ font-family:var(--font-statement); font-variant-numeric:tabular-nums;
  font-size:clamp(28px,5vw,40px); line-height:.9; color:var(--flash-500); letter-spacing:-.02em }
.onb-gate.ok b{ color:var(--text-positive); font-family:var(--font-sans); font-size:var(--body-md) }
.onb-gate span{ font-size:var(--body-sm); color:var(--text-body) }
.onb-gate .onb-count{ margin-left:auto; color:var(--text-muted); font-variant-numeric:tabular-nums }

/* ---- Next action. The only card on the page, so it reads as the instruction. ---- */
.onb-next{ background:var(--surface-raised); border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); padding:var(--space-6); margin-bottom:var(--space-6) }
.onb-next .eyebrow{ font-weight:700; font-size:var(--eyebrow);
  letter-spacing:var(--eyebrow-tracking); text-transform:uppercase;
  color:var(--flash-400); margin:0 }
.onb-next h2{ font-family:var(--font-sans); font-size:var(--body-lg); font-weight:600;
  color:var(--text-display); margin:var(--space-3) 0 0 }
.onb-next p{ font-size:var(--body-sm); color:var(--text-body); margin:var(--space-3) 0 0 }
.onb-next a{ color:var(--flash-400) }

/* Self-contained so a console.css rewrite cannot take these with it. */
.onb-msg{ margin-top:var(--space-5); font-size:var(--body-sm); display:none }
.onb-msg.on{ display:block }
.onb-msg.ok{ color:var(--text-positive) }
.onb-msg.bad{ color:var(--text-alert) }
.onb-hint{ font-size:var(--body-xs); color:var(--text-muted); margin-top:var(--space-2) }
.onb-empty{ font-size:var(--body-sm); color:var(--text-muted); padding:var(--space-6) 0 }
.onb-bar-row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3);
  padding:var(--space-4) 0; border-bottom:1px solid var(--line-rule);
  margin-bottom:var(--space-6) }
.onb-bar-row .grow{ flex:1 }

.onb-tabs{ display:flex; gap:var(--space-2) }
.onb-tab{ background:var(--surface-sunken); border:1px solid var(--line-rule);
  color:var(--text-heading); border-radius:var(--radius-xs); padding:9px 14px; cursor:pointer;
  font-family:var(--font-sans); font-weight:600; font-size:var(--body-sm) }
.onb-tab:hover{ background:var(--surface-card); border-color:var(--line-strong) }
.onb-tab.on{ background:var(--surface-card); border-color:var(--line-strong);
  color:var(--text-display) }
.onb-toggle{ display:inline-flex; align-items:center; gap:var(--space-3);
  font-size:var(--body-sm); color:var(--text-muted); cursor:pointer }

/* ---- Phases and steps. Ruled, never boxed. ---- */
.onb-phase{ margin-bottom:var(--space-8) }
.onb-phase-head{ display:flex; align-items:baseline; gap:var(--space-4);
  border-bottom:1px solid var(--line-rule); padding-bottom:var(--space-3);
  margin-bottom:var(--space-2) }
.onb-phase-head h2{ font-family:var(--font-display); font-size:15px; line-height:1;
  letter-spacing:-.01em; text-transform:uppercase; color:var(--text-display); margin:0 }
.onb-phase-count{ margin-left:auto; font-variant-numeric:tabular-nums;
  font-size:var(--body-xs); color:var(--text-muted) }

.onb-list{ list-style:none; margin:0; padding:0 }
.onb-step{ display:grid; grid-template-columns:34px 1fr auto; gap:var(--space-4);
  align-items:start; padding:var(--space-5) 0; border-bottom:1px solid var(--line-hairline) }
.onb-step.s-done .onb-title{ color:var(--text-muted); text-decoration:line-through }
.onb-step.s-na{ opacity:.55 }
.onb-step.s-blocked{ border-left:2px solid var(--flash-500); padding-left:var(--space-4);
  margin-left:calc(var(--space-4) * -1) }

.tickbtn{ width:24px; height:24px; border:1px solid var(--line-strong);
  border-radius:var(--radius-xs); background:var(--surface-sunken); cursor:pointer;
  color:var(--text-display); font-size:13px; line-height:1; display:grid; place-items:center }
.tickbtn:hover:not(:disabled){ border-color:var(--flash-500) }
.tickbtn[aria-pressed="true"]{ background:var(--text-positive); border-color:var(--text-positive);
  color:var(--surface-page) }
.tickbtn:disabled{ opacity:.4; cursor:not-allowed }

.onb-title{ font-size:var(--body-md); font-weight:600; color:var(--text-heading); margin:0 }
.onb-detail{ font-size:var(--body-sm); color:var(--text-body); margin:var(--space-2) 0 0 }
/* The thing nobody tells you. Flash red is the only accent, so it earns it here. */
.onb-gotcha{ font-size:var(--body-xs); color:var(--flash-400); margin:var(--space-2) 0 0 }
.onb-link{ margin:var(--space-3) 0 0; font-size:var(--body-sm) }
.onb-link a{ color:var(--flash-400) }
.onb-flag{ font-weight:700; font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--flash-400); border:1px solid var(--flash-500); border-radius:var(--radius-xs);
  padding:2px 5px; vertical-align:2px }

.onb-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-2);
  font-size:var(--body-xs); color:var(--text-muted) }
.onb-when,.onb-days{ font-variant-numeric:tabular-nums }
.onb-days.warn{ color:var(--flash-400) }
select.onb-sel{ font-size:var(--body-xs); padding:5px 8px;
  background:var(--surface-sunken); border:1px solid var(--line-rule);
  border-radius:var(--radius-xs); color:var(--text-heading); font-family:var(--font-sans) }

/* ---- Team view ---- */
table.onb-team{ width:100%; border-collapse:collapse; font-size:var(--body-sm) }
table.onb-team th{ text-align:left; font-weight:700; font-size:var(--eyebrow);
  letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--text-muted);
  padding:0 var(--space-4) var(--space-3) 0; border-bottom:1px solid var(--line-rule) }
table.onb-team td{ padding:var(--space-4) var(--space-4) var(--space-4) 0;
  border-bottom:1px solid var(--line-hairline); color:var(--text-body); vertical-align:middle }
table.onb-team td.warn{ color:var(--flash-400) }
.onb-bar{ display:inline-block; width:96px; height:4px; background:var(--surface-raised);
  margin-right:var(--space-3); vertical-align:middle }
.onb-bar i{ display:block; height:100%; background:var(--flash-500) }
.onb-pct{ font-variant-numeric:tabular-nums; color:var(--text-muted) }

@media (max-width:640px){
  /* The status control drops under the text rather than squeezing it. */
  .onb-page{ padding:var(--space-5); --page-gutter:var(--space-5) }
  .onb-step{ grid-template-columns:28px 1fr; gap:var(--space-3) }
  .onb-meta{ grid-column:2; flex-direction:row; align-items:center; flex-wrap:wrap;
    justify-content:flex-start; gap:var(--space-3); margin-top:var(--space-3) }
  .onb-gate .onb-count{ margin-left:0; width:100% }
  table.onb-team{ font-size:var(--body-xs) }
  .onb-bar{ width:60px }
}


/* =============================================================================
   /get-started/ — recruit-facing
   =============================================================================
   Recruit-site rules: white page ground, navy as BLOCK colour only (the hero
   and the sign-up block, two of them, alternating with white), Archivo Black
   uppercase for the recruiting headline, one flash-red button per view.
   ========================================================================== */

.gs-inner{ max-width:var(--measure-page); margin:0 auto; padding:0 var(--gutter-page) }
@media(min-width:900px){ .gs-inner{ padding:0 var(--gutter-page-lg) } }

.gs-hero,.gs-signup{ background:var(--mid-1000); color:var(--text-body);
  padding:var(--space-9) 0 }
@media(min-width:900px){ .gs-hero,.gs-signup{ padding:var(--space-11) 0 } }
/* The wordmark bar above the hero, on white. Same header the careers page
   wears; the wordmark IS the mark (there is no logo). */
.gs-signin{ font-size:var(--body-sm); font-weight:600; color:var(--mid-900); text-decoration:none; flex:none }
.gs-signin:hover{ color:var(--flash-600) }
.gs-cta{ display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap; margin:var(--space-7) 0 0 }
.gs-cta .gs-btn{ text-decoration:none; display:inline-block }
.gs-cta .gs-hint{ margin:0 }

.gs-eyebrow{ font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking);
  text-transform:uppercase; color:var(--flash-400); margin:0 0 var(--space-5);
  padding-top:var(--space-5); border-top:2px solid var(--flash-500); display:inline-block }
.gs-h1{ font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(34px,7vw,72px); line-height:.9; letter-spacing:-.02em;
  color:var(--paper-100); margin:0 0 var(--space-6) }
.gs-h2{ font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(24px,4vw,40px); line-height:.92; letter-spacing:-.015em;
  color:var(--paper-100); margin:0 0 var(--space-5) }
.gs-lede{ font-size:var(--body-lg); line-height:1.55; color:var(--text-body);
  max-width:var(--body-measure); margin:0 0 var(--space-7) }
.gs-stat{ display:flex; align-items:baseline; gap:var(--space-4); margin:0 }
.gs-stat b{ font-family:var(--font-statement); font-variant-numeric:tabular-nums;
  font-size:clamp(40px,8vw,80px); line-height:.82; color:var(--flash-500) }
.gs-stat span{ font-size:var(--body-sm); color:var(--text-muted) }
.gs-stat span b{ font-family:var(--font-statement); font-variant-numeric:tabular-nums;
  font-size:var(--body-lg); color:var(--flash-500); line-height:1 }

/* ---- The path, on white ----
   Sits tight under the hero: the navy block and the first tile were a full
   screen apart on a phone (Truman, 2026-09-13). */
.gs-path{ padding-top:var(--space-7); padding-bottom:var(--space-9) }
#gs-modcount{ margin-bottom:var(--space-4) }
.gs-phase{ border-top:1px solid var(--line-rule); padding:var(--space-7) 0 }
.gs-num{ font-family:var(--font-statement); font-variant-numeric:tabular-nums;
  font-size:var(--body-sm); color:var(--flash-500); margin:0 0 var(--space-3) }
.gs-phase h2{ font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(19px,3vw,26px); line-height:.95; letter-spacing:-.01em;
  color:var(--text-display); margin:0 0 var(--space-6) }
.gs-list{ margin:0; padding:0; list-style:none; counter-reset:gs }
.gs-list li{ counter-increment:gs; position:relative; padding:var(--space-4) 0 var(--space-4) 34px;
  border-bottom:1px solid var(--line-hairline) }
.gs-list li::before{ content:counter(gs,decimal-leading-zero); position:absolute; left:0; top:19px;
  font-family:var(--font-data); font-variant-numeric:tabular-nums; font-size:var(--body-xs);
  color:var(--text-muted) }
.gs-step-t{ display:block; font-size:var(--body-md); font-weight:600; color:var(--text-heading) }
.gs-step-d{ display:block; font-size:var(--body-sm); color:var(--text-body); margin-top:3px }

/* ---- Sign-up ---- */
.gs-fields{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--space-5); margin-bottom:var(--space-6) }
.gs-wide{ grid-column:1/-1; max-width:420px }
.gs-signup label{ display:block; font-weight:600; font-size:var(--body-sm);
  color:var(--text-heading); margin-bottom:var(--space-2) }
.gs-opt{ font-weight:400; color:var(--text-muted) }
.gs-signup input,.gs-signup select{ width:100%; background:var(--mid-900);
  border:1px solid var(--line-strong); border-radius:var(--radius-xs);
  color:var(--text-display); font-family:var(--font-sans); font-size:var(--body-md);
  padding:11px 12px }
.gs-signup input:focus,.gs-signup select:focus{ outline:2px solid var(--focus-ring);
  outline-offset:1px; border-color:var(--flash-500) }
/* One primary button per view, and this is it. */
.gs-btn{ background:var(--flash-500); border:0; border-radius:var(--radius-xs); color:#fff;
  font-family:var(--font-sans); font-weight:700; font-size:var(--body-md);
  padding:13px 22px; cursor:pointer }
.gs-btn:hover{ background:var(--flash-400) }

/* ---- The create-account button ------------------------------------------
   Seven fields down a navy block used to end in a button the same size as the
   fields above it. It is now the widest and tallest thing in the block.
   Capped rather than full-bleed: the field grid above runs four columns wide,
   and a red bar across all of it reads as a banner rather than a button. This
   width lines up with the password field's own cap, so the eye travels down
   the same edge the button ends on. */
.gs-go{ display:flex; align-items:stretch; margin-top:var(--space-7); max-width:500px }
.gs-btn-lg{ flex:1; min-height:58px; font-size:var(--body-lg); padding:16px 26px;
  box-shadow:var(--shadow-card) }
@media (max-width:520px){
  .gs-btn-lg{ width:100%; flex:none }
}
.gs-hint{ font-size:var(--body-sm); color:var(--text-muted); margin:var(--space-4) 0 0 }
.gs-hint a{ color:var(--flash-400) }
.gs-pot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* ---- Show password (2026-09-15) -------------------------------------------
   Built by /pw-eye.js over markup that already worked: the input keeps its id,
   name and autocomplete so password managers see no change, and all this adds
   is a wrapper and a sibling button. `.pw-input` carries the extra class the
   script sets, which is what lets the right-hand padding beat the page's own
   input rule without an !important.
   The icon is masked here rather than through the .ic system, so the same
   twelve lines drop into any stylesheet on the site unchanged. */
.pw-wrap{ position:relative; display:block }
.pw-wrap > input.pw-input{ padding-right:46px }
.pw-eye{ position:absolute; top:0; right:0; width:44px; height:100%;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; border:0; background:transparent; cursor:pointer;
  color:var(--text-muted);
  transition:color var(--dur-fast) var(--ease-standard) }
.pw-eye:hover{ color:var(--text-heading) }
.pw-eye:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:-3px }
.pw-eye[aria-pressed="true"]{ color:var(--flash-500) }
.pw-eye i{ --pw-ic:url("/icons/eye.svg");
  display:block; width:19px; height:19px; background:currentColor;
  -webkit-mask:var(--pw-ic) center / contain no-repeat;
          mask:var(--pw-ic) center / contain no-repeat }
.pw-eye[aria-pressed="true"] i{ --pw-ic:url("/icons/eye-off.svg") }


/* ---- Signed-in bar ---- */
.gs-bar{ border-bottom:1px solid var(--line-rule); padding:var(--space-5) 0 }
.gs-barrow{ display:flex; align-items:center; gap:var(--space-4) }
.gs-barrow .grow{ flex:1 }
.gs-mark{ display:inline-grid; place-items:center; width:34px; height:34px;
  background:var(--flash-500); color:#fff; font-family:var(--font-display);
  font-size:12px; text-transform:uppercase }
.gs-who{ font-weight:600; color:var(--text-display) }
.gs-link{ background:none; border:0; color:var(--text-muted); cursor:pointer;
  font-family:var(--font-sans); font-size:var(--body-sm) }
.gs-link:hover{ color:var(--flash-500) }


/* =============================================================================
   Phase 1 — hand-holding on each step, feedback, admin recruits
   ========================================================================== */

/* How-to: an ordered list under the step. Open on the "next" card, folded
   elsewhere so the list stays scannable. */
.onb-howto{ margin:var(--space-3) 0 0; padding-left:22px; font-size:var(--body-sm);
  color:var(--text-body); line-height:1.55 }
.onb-howto li{ margin:0 0 var(--space-2) }
.onb-howto li::marker{ font-family:var(--font-data); font-variant-numeric:tabular-nums;
  color:var(--text-muted) }
.onb-howto-p{ font-size:var(--body-sm); color:var(--text-body); margin:var(--space-2) 0 0 }
details.onb-more{ margin-top:var(--space-3) }
details.onb-more > summary{ list-style:none; cursor:pointer; font-size:var(--body-xs);
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted);
  display:inline-flex; align-items:center; gap:6px }
details.onb-more > summary::-webkit-details-marker{ display:none }
details.onb-more > summary::before{ content:"+"; font-family:var(--font-data); width:12px }
details.onb-more[open] > summary::before{ content:"\2013" }
details.onb-more > summary:hover{ color:var(--flash-400) }

.onb-facts{ display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5);
  margin:var(--space-3) 0 0; font-size:var(--body-xs); color:var(--text-muted) }
.onb-facts b{ font-weight:600; color:var(--text-heading) }

.onb-res{ list-style:none; margin:var(--space-3) 0 0; padding:0; display:grid; gap:var(--space-2) }
.onb-res li{ font-size:var(--body-sm) }
.onb-res a{ color:var(--flash-400); font-weight:600 }
.onb-res .k{ display:inline-block; min-width:44px; font-size:9px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); margin-right:6px }
.onb-res .n{ color:var(--text-muted) }

/* "Anything trip you up?" — appears once, under the step just finished. */
.onb-fb{ grid-column:2/-1; display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center;
  margin-top:var(--space-3); padding:var(--space-4); background:var(--surface-raised);
  border:1px solid var(--line-rule); border-radius:var(--radius-xs) }
.onb-fb label{ flex:1 1 100%; font-size:var(--body-sm); font-weight:600; color:var(--text-heading) }
.onb-fb input{ flex:1 1 240px; font-family:var(--font-sans); font-size:var(--body-sm);
  color:var(--text-heading); background:var(--surface-card); border:1px solid var(--line-rule);
  border-radius:var(--radius-xs); padding:9px 11px }
.onb-fb button{ font-family:var(--font-sans); font-weight:600; font-size:var(--body-xs);
  border:1px solid var(--line-rule); border-radius:var(--radius-xs); background:var(--surface-card);
  color:var(--text-heading); padding:8px 12px; cursor:pointer }
.onb-fb button.go{ background:var(--flash-500); border-color:var(--flash-500); color:#fff }
.onb-fb button:hover{ border-color:var(--flash-500) }

/* Ask line on the next card */
.onb-next .onb-facts{ margin-top:var(--space-4) }

/* ---- Admin: recruits ---- */
.rc-link{ display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center;
  margin-top:var(--space-5); padding:var(--space-4); background:var(--surface-raised);
  border:1px solid var(--line-rule); border-radius:var(--radius-xs) }
.rc-link code{ flex:1 1 260px; font-family:var(--font-data); font-size:var(--body-xs);
  color:var(--text-heading); word-break:break-all }
.rc-tabs{ display:flex; gap:var(--space-2); margin-bottom:var(--space-6) }
.rc-acts{ display:flex; flex-wrap:wrap; gap:6px }
.rc-acts button{ font-family:var(--font-sans); font-weight:600; font-size:var(--body-xs);
  border:1px solid var(--line-rule); border-radius:var(--radius-xs); background:var(--surface-card);
  color:var(--text-heading); padding:6px 10px; cursor:pointer; white-space:nowrap }
.rc-acts button:hover{ border-color:var(--flash-500) }
.rc-acts button.danger:hover{ color:var(--flash-400) }
.rc-sub{ display:block; font-size:var(--body-xs); color:var(--text-muted); margin-top:2px }
table.onb-team td.rc-name{ color:var(--text-display); font-weight:600 }
.rc-empty{ padding:var(--space-7); text-align:center }

/* ---- Admin: steps editor ---- */
.st-row{ display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-4); align-items:start;
  padding:var(--space-4) 0; border-bottom:1px solid var(--line-hairline) }
.st-row .seq{ font-family:var(--font-data); font-variant-numeric:tabular-nums;
  font-size:var(--body-xs); color:var(--text-muted); padding-top:3px; min-width:28px }
.st-row .t{ font-size:var(--body-md); font-weight:600; color:var(--text-heading); margin:0 }
.st-row .m{ font-size:var(--body-xs); color:var(--text-muted); margin:3px 0 0 }
.st-row .m b{ color:var(--flash-400); font-weight:600 }
.st-edit{ grid-column:1/-1; margin-top:var(--space-3) }
.st-edit textarea{ width:100%; min-height:150px; font-family:var(--font-sans);
  font-size:var(--body-sm); line-height:1.5; color:var(--text-heading);
  background:var(--surface-raised); border:1px solid var(--line-rule);
  border-radius:var(--radius-xs); padding:11px 12px; resize:vertical }
.st-edit .wide{ grid-column:1/-1 }
.st-fb{ margin-top:var(--space-4); padding:var(--space-4); background:var(--surface-accent-soft);
  border-left:3px solid var(--flash-500); border-radius:var(--radius-xs) }
.st-fb p{ margin:0; font-size:var(--body-sm); color:var(--text-heading) }
.st-fb .who{ font-size:var(--body-xs); color:var(--text-muted); margin-top:4px }
.st-fb .rc-acts{ margin-top:var(--space-3) }
.st-res{ list-style:none; margin:var(--space-3) 0 0; padding:0; display:grid; gap:6px }
.st-res li{ display:flex; gap:var(--space-3); align-items:center; font-size:var(--body-sm) }
.st-res li a{ color:var(--flash-400) }
.st-res li .k{ font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-muted); min-width:44px }
.st-res li button{ margin-left:auto }
/* display:flex / inline-flex would otherwise beat the hidden attribute */
.rc-link[hidden],.btn[hidden],.onb-fb[hidden]{ display:none }


/* =============================================================================
   Hub + wizard. The default view. The list survives as an opt-in.
   ========================================================================== */

/* ---- Hub header: one livery number, one sentence ---- */
.hub-head{ display:grid; grid-template-columns:auto 1fr; gap:var(--space-6) var(--space-8);
  align-items:end; padding-bottom:var(--space-6); border-bottom:1px solid var(--line-rule);
  margin-bottom:var(--space-6) }
.hub-pct{ display:flex; align-items:baseline; gap:6px; line-height:.85 }
.hub-pct b{ font-family:var(--font-statement); font-variant-numeric:tabular-nums;
  font-size:clamp(64px,12vw,120px); letter-spacing:-.03em; color:var(--flash-500) }
.hub-pct i{ font-style:normal; font-family:var(--font-statement); font-size:clamp(22px,4vw,36px);
  color:var(--flash-500) }
.hub-sub{ font-size:var(--body-md); color:var(--text-body); margin:0; max-width:36ch }
.hub-sub b{ color:var(--text-display) }
.hub-sub .ok{ color:var(--text-positive); font-weight:700 }
@media (max-width:640px){ .hub-head{ grid-template-columns:1fr; align-items:start } }

/* ---- Up next: the one card with the one button ---- */
.hub-next{ display:grid; grid-template-columns:1fr auto; gap:var(--space-5); align-items:center;
  background:var(--surface-card); border:1px solid var(--line-strong);
  border-left:4px solid var(--flash-500); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-card); padding:var(--space-6); margin-bottom:var(--space-7) }
.hub-next .eyebrow{ font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking);
  text-transform:uppercase; color:var(--flash-400); margin:0 0 var(--space-2) }
.hub-next h2{ font-family:var(--font-sans); font-size:var(--body-lg); font-weight:700;
  color:var(--text-display); margin:0 }
.hub-next p{ font-size:var(--body-sm); color:var(--text-body); margin:var(--space-2) 0 0 }
.hub-next .facts{ font-size:var(--body-xs); color:var(--text-muted); margin-top:var(--space-3) }
.hub-next.done{ border-left-color:var(--text-positive) }
@media (max-width:640px){ .hub-next{ grid-template-columns:1fr } }

/* ---- Module tiles ---- */
.hub-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:var(--space-4); margin-bottom:var(--space-6) }
.tile{ position:relative; text-align:left; display:flex; flex-direction:column; gap:var(--space-2);
  background:var(--surface-card); border:1px solid var(--line-rule); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-card); padding:var(--space-5); cursor:pointer;
  font-family:var(--font-sans); color:var(--text-heading);
  transition:border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard) }
.tile:hover{ border-color:var(--flash-500); transform:translateY(-1px) }
.tile:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px }
.tile .top{ display:flex; align-items:center; gap:var(--space-3);
  font-family:var(--font-data); font-variant-numeric:tabular-nums; font-size:var(--body-xs);
  color:var(--text-muted) }
.tile .state{ margin-left:auto; font-weight:700; font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; padding:3px 7px; border-radius:var(--radius-pill);
  background:var(--surface-sunken); color:var(--text-muted) }
.tile.is-next .state{ background:var(--flash-500); color:#fff }
.tile.is-done .state{ background:var(--jade-100); color:var(--text-positive) }
.tile.is-live .state{ background:var(--surface-accent-soft); color:var(--text-alert) }
.tile .pct{ font-family:var(--font-statement); font-variant-numeric:tabular-nums;
  font-size:44px; line-height:.9; letter-spacing:-.02em; color:var(--text-display); margin-top:var(--space-2) }
.tile .pct i{ font-style:normal; font-size:18px; margin-left:2px }
.tile.is-next .pct{ color:var(--flash-500) }
.tile.is-done .pct{ color:var(--text-positive) }
.tile h3{ font-family:var(--font-display); text-transform:uppercase; font-size:14px; line-height:1.05;
  letter-spacing:-.01em; color:var(--text-display); margin:0 }
.tile .bar{ height:4px; background:var(--surface-raised); margin-top:var(--space-2) }
.tile .bar i{ display:block; height:100%; background:var(--text-display) }
.tile.is-next .bar i{ background:var(--flash-500) }
.tile.is-done .bar i{ background:var(--text-positive) }
.tile .sub{ font-size:var(--body-xs); color:var(--text-muted); font-variant-numeric:tabular-nums }
.tile .sub b{ color:var(--text-heading); font-weight:600 }
.tile.is-next{ border-color:var(--flash-500) }

.hub-foot{ display:flex; gap:var(--space-4); align-items:center; flex-wrap:wrap }
.link-btn{ background:none; border:0; padding:0; cursor:pointer; font-family:var(--font-sans);
  font-size:var(--body-sm); color:var(--text-muted); text-decoration:underline;
  text-underline-offset:3px }
.link-btn:hover{ color:var(--flash-400) }

/* ---- Wizard: one step, one card ----
   Narrow, the card is a single column and the three wrappers are invisible
   (display:contents), so the order is head → what to do → watch out →
   where to go → good to know → actions, unchanged.
   Wide, it splits: instructions keep their ~760px reading measure on the left,
   and the reference material moves into a rail on the right instead of leaving
   the right half of the page empty. */
/* Centred, not left-aligned: between the reading measure and the two-column
   breakpoint the leftover space belongs on both sides, or the column reads as
   having lost something off its right edge. */
.wiz{ max-width:760px; margin-inline:auto }
.wiz-main, .wiz-rail, .wiz-foot{ display:contents }

@media (min-width:1120px){
  .wiz{ max-width:none }
  .wiz-card{ display:grid; grid-template-columns:minmax(0,1fr) 320px;
    column-gap:var(--space-8); align-items:start }
  .wiz-main{ display:block; grid-column:1; grid-row:1 }
  .wiz-foot{ display:block; grid-column:1; grid-row:2 }
  .wiz-rail{ display:block; grid-column:2; grid-row:1 / span 2;
    padding-left:var(--space-8); border-left:1px solid var(--line-rule) }
  .wiz-rail > .wiz-sec:first-of-type{ border-top:0; padding-top:0; margin-top:0 }
  /* A step with no links and no facts keeps the whole width rather than
     ruling off an empty column. */
  .wiz-card:has(> .wiz-rail:empty){ grid-template-columns:minmax(0,1fr) }
  .wiz-card > .wiz-rail:empty{ display:none }
  /* Stacked in a 320px rail, the links read as a list, not a button row. */
  .wiz-rail .wiz-links{ flex-direction:column; align-items:flex-start }
  .wiz-rail .wiz-links > *{ max-width:100% }
}
.wiz-top{ display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-5) }
.wiz-top .link-btn{ text-decoration:none; font-weight:600; color:var(--text-heading) }
.wiz-top .link-btn:hover{ color:var(--flash-400) }
.wiz-top .crumb{ font-size:var(--body-xs); color:var(--text-muted); font-variant-numeric:tabular-nums }
.wiz-top .crumb b{ color:var(--text-heading); font-weight:600 }
.wiz-track{ display:flex; gap:4px; margin-bottom:var(--space-6) }
.wiz-track i{ flex:1; height:4px; background:var(--surface-raised); border-radius:var(--radius-pill) }
.wiz-track i.d{ background:var(--text-positive) }
.wiz-track i.c{ background:var(--flash-500) }
.wiz-track i.b{ background:var(--flash-300, #F2A6A0) }

.wiz-card{ background:var(--surface-card); border:1px solid var(--line-rule);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-card); padding:var(--space-7) }
.wiz-card .eyebrow{ font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking);
  text-transform:uppercase; color:var(--flash-400); margin:0 0 var(--space-3);
  display:flex; gap:var(--space-3); align-items:center }
.wiz-card .eyebrow .onb-flag{ vertical-align:0 }
.wiz-card .eyebrow .st{ margin-left:auto; color:var(--text-muted); letter-spacing:.08em }
.wiz-card .eyebrow .st.done{ color:var(--text-positive) }
.wiz-card h2{ font-family:var(--font-sans); font-size:clamp(20px,3vw,26px); line-height:1.2;
  font-weight:700; color:var(--text-display); margin:0 0 var(--space-3); letter-spacing:-.01em }
.wiz-card .detail{ font-size:var(--body-md); color:var(--text-body); margin:0 0 var(--space-4); line-height:1.55 }
.wiz-card .onb-howto{ font-size:var(--body-md); line-height:1.6; margin-bottom:var(--space-4) }
.wiz-card .onb-howto li{ margin-bottom:var(--space-3) }
.wiz-card .onb-gotcha{ font-size:var(--body-sm); padding:var(--space-4);
  background:var(--surface-accent-soft); border-left:3px solid var(--flash-500);
  border-radius:var(--radius-xs); margin:0 0 var(--space-4) }
.wiz-card .onb-gotcha b{ color:var(--flash-400); margin-right:6px }
.wiz-link{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:var(--body-md);
  color:var(--text-display); border:1px solid var(--line-strong); border-radius:var(--radius-xs);
  padding:11px 16px; text-decoration:none; margin:0 0 var(--space-4) }
.wiz-link:hover{ border-color:var(--flash-500); color:var(--flash-400) }
.wiz-card .onb-res{ margin-bottom:var(--space-4) }
.wiz-card .onb-facts{ padding-top:var(--space-4); border-top:1px solid var(--line-hairline); margin:0 }

.wiz-acts{ display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center;
  margin-top:var(--space-6); padding-top:var(--space-5); border-top:1px solid var(--line-rule) }
.wiz-acts .grow{ flex:1 }
.wiz-acts .btn.primary.undo{ background:var(--surface-card); color:var(--text-heading);
  border-color:var(--line-rule) }
/* wrap, and never mid-phrase. Without flex-wrap these shrank instead of
   moving down, so "I have started this" broke across two lines and took its
   underline with it - which is what made the row look like damage rather than
   three links (Truman, 2026-09-13). Shortened the labels in the same pass. */
.wiz-acts .more{ display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-5);
  flex-basis:100%; margin-top:var(--space-2) }
.wiz-acts .more .link-btn{ display:inline-flex; align-items:center; gap:6px;
  white-space:nowrap }
/* The icon is not underlined with the words; an underlined flag reads as a
   rendering fault. */
.wiz-acts .more .link-btn .ic{ width:14px; height:14px; text-decoration:none }
.wiz-nav{ display:flex; justify-content:space-between; gap:var(--space-4); margin-top:var(--space-5) }
.wiz-nav .link-btn{ text-decoration:none }
.wiz-nav .link-btn b{ color:var(--text-heading); font-weight:600 }

/* After "Done": a small panel where the actions were. */
.wiz-fb{ display:grid; gap:var(--space-3); margin-top:var(--space-6); padding:var(--space-5);
  background:var(--surface-raised); border:1px solid var(--line-rule); border-radius:var(--radius-xs) }
.wiz-fb .h{ font-size:var(--body-md); font-weight:700; color:var(--text-display); margin:0 }
.wiz-fb .h span{ color:var(--text-positive) }
.wiz-fb p{ font-size:var(--body-sm); color:var(--text-body); margin:0 }
.wiz-fb input{ width:100%; font-family:var(--font-sans); font-size:var(--body-md);
  color:var(--text-heading); background:var(--surface-card); border:1px solid var(--line-rule);
  border-radius:var(--radius-xs); padding:11px 12px }
.wiz-fb .row{ display:flex; gap:var(--space-3); flex-wrap:wrap }

/* Finished everything */
.wiz-end{ text-align:center; padding:var(--space-9) var(--space-6) }
.wiz-end b{ display:block; font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(24px,4vw,40px); color:var(--text-display); margin-bottom:var(--space-4) }

@media (max-width:640px){
  .wiz-card{ padding:var(--space-5) }
  .hub-tiles{ grid-template-columns:repeat(2,1fr) }
  .tile .pct{ font-size:34px }
}

/* Public overview on /get-started/: same tiles, static */
.gs-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:var(--space-4); margin:var(--space-8) 0 }
.gs-tiles .tile{ cursor:default }
.gs-tiles .tile:hover{ transform:none; border-color:var(--line-rule) }
/* On a phone seven stacked cards were a long scroll before the first real
   content. One ruled row per module instead: number, name, steps. */
@media (max-width:640px){
  .gs-hero{ padding:var(--space-7) 0 var(--space-8) }
  .gs-h1{ font-size:clamp(30px,9.5vw,40px) }
  .gs-lede{ font-size:var(--body-md); margin-bottom:var(--space-5) }
  .gs-stat b{ font-size:44px }
  .gs-path{ padding-top:var(--space-6); padding-bottom:var(--space-7) }
  .gs-tiles{ display:block; border-top:1px solid var(--line-rule); margin-bottom:var(--space-5) }
  .gs-tiles .gs-tile{ display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center;
    gap:var(--space-4); padding:var(--space-4) 0; border:0; border-bottom:1px solid var(--line-hairline);
    border-radius:0; box-shadow:none; background:transparent }
  .gs-tiles .gs-tile .top{ display:contents }
  .gs-tiles .gs-tile .top > span:first-child{ grid-column:1; grid-row:1 / span 2; font-size:var(--body-sm);
    color:var(--flash-500); font-weight:600 }
  .gs-tiles .gs-tile .state{ display:none }
  .gs-tiles .gs-tile h3{ grid-column:2; grid-row:1; font-size:15px }
  .gs-tiles .gs-tile .sub{ grid-column:2; grid-row:2 }
  .gs-tiles .gs-tile .pct{ grid-column:3; grid-row:1 / span 2; font-size:22px; margin:0;
    font-family:var(--font-data); font-weight:600; color:var(--text-heading) }
  .gs-tiles .gs-tile .pct i{ font-size:var(--body-xs); font-weight:400; color:var(--text-muted) }
  .gs-tiles .gs-tile .bar{ display:none }
}
.gs-tiles .tile .pct{ color:var(--text-display) }
details.gs-all > summary{ list-style:none; cursor:pointer; font-family:var(--font-display);
  text-transform:uppercase; font-size:15px; color:var(--text-display);
  display:inline-flex; gap:10px; align-items:center; padding:var(--space-4) 0 }
details.gs-all > summary::-webkit-details-marker{ display:none }
details.gs-all > summary::before{ content:"+"; color:var(--flash-500); font-family:var(--font-data) }
details.gs-all[open] > summary::before{ content:"\2013" }


/* =============================================================================
   Wizard, second pass: structure instead of a wall of text.
   ========================================================================== */
.wiz-card h2{ font-size:clamp(24px,3.4vw,32px); margin-bottom:var(--space-4) }
.wiz-card .detail{ font-size:var(--body-lg); color:var(--text-body); line-height:1.5;
  margin:0 0 var(--space-6); max-width:56ch }

/* Section label + rule, once per block */
.wiz-sec{ margin-top:var(--space-6); padding-top:var(--space-5); border-top:1px solid var(--line-rule) }
/* Scoped to the column, not the card: stacked on a phone, "Where to go" is the
   fourth thing down and still needs the rule above it. */
.wiz-main > .wiz-sec:first-of-type{ border-top:0; padding-top:0; margin-top:0 }
.wiz-sec > .lbl{ display:flex; align-items:center; gap:var(--space-3);
  font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking);
  text-transform:uppercase; color:var(--text-muted); margin:0 0 var(--space-4) }
.wiz-sec > .lbl::before{ content:""; width:22px; height:2px; background:var(--flash-500) }

/* Numbered instructions: livery digit, bold lead, plain rest */
.wiz-steps{ list-style:none; margin:0; padding:0 }
.wiz-steps li{ display:grid; grid-template-columns:52px 1fr; gap:var(--space-4);
  align-items:start; padding:var(--space-4) 0; border-bottom:1px solid var(--line-hairline) }
.wiz-steps li:last-child{ border-bottom:0 }
.wiz-steps .n{ font-family:var(--font-statement); font-variant-numeric:tabular-nums;
  font-size:30px; line-height:1; letter-spacing:-.02em; color:var(--flash-500); padding-top:2px }
.wiz-steps .lead{ display:block; font-size:var(--body-lg); font-weight:700; color:var(--text-display);
  line-height:1.3 }
.wiz-steps .rest{ display:block; font-size:var(--body-md); color:var(--text-body); line-height:1.55;
  margin-top:4px; max-width:60ch }

/* Watch out, as a proper block */
.wiz-card .wiz-sec .onb-gotcha{ margin:0; font-size:var(--body-md); line-height:1.5 }
.wiz-card .wiz-sec .onb-gotcha b{ display:block; margin:0 0 4px; font-size:var(--eyebrow);
  letter-spacing:var(--eyebrow-tracking); text-transform:uppercase }

/* Links and resources in one row of chips */
.wiz-links{ display:flex; flex-wrap:wrap; gap:var(--space-3) }
.wiz-links .wiz-link{ margin:0 }
.wiz-links .res{ display:inline-flex; align-items:center; gap:8px; font-size:var(--body-sm);
  font-weight:600; color:var(--text-heading); border:1px solid var(--line-rule);
  border-radius:var(--radius-xs); padding:10px 14px; text-decoration:none }
.wiz-links .res:hover{ border-color:var(--flash-500); color:var(--flash-400) }

/* "Add to calendar" — the secondary link beside a step's room link. Kept a
   step down from .wiz-link on purpose: the room is where you go, this is
   housekeeping you do once. Bare outline, flash border and a 6% flash wash on
   hover, --radius-xs like every other control. The days and times ride
   underneath in muted tabular figures, because a download nobody can read
   before clicking is a download nobody clicks. */
.wiz-links .wiz-link.cal{ flex-direction:column; align-items:flex-start; gap:2px;
  font-size:var(--body-sm); border-color:var(--line-rule); padding:9px 14px }
.wiz-links .wiz-link.cal small{ font-weight:600; font-size:var(--body-xs);
  font-variant-numeric:tabular-nums; color:var(--text-muted); letter-spacing:.01em }
.wiz-links .wiz-link.cal:hover{ border-color:var(--flash-500); color:var(--flash-400);
  background:color-mix(in srgb, var(--flash-500) 6%, transparent) }
.wiz-links .wiz-link.cal:hover small{ color:var(--flash-400) }
.wiz-links .wiz-link.cal[aria-expanded="true"]{ border-color:var(--flash-500); color:var(--flash-400) }

/* The choice behind that button. A disclosure panel, not an overlay: three
   links do not earn a scrim and a body scroll lock (see BUILD-QUEUE E4).
   flex-basis:100% breaks it onto its own line inside the .wiz-links row, so
   it sits under the button on a wide rail and in the column on a phone. */
.cal-panel{ flex-basis:100%; display:flex; flex-direction:column; gap:var(--space-2);
  padding:var(--space-3); margin-top:calc(-1 * var(--space-2));
  border:1px solid var(--line-rule); border-radius:var(--radius-sm);
  background:var(--surface-sunken) }
.cal-row{ display:flex; flex-direction:column; gap:1px; padding:10px 12px; min-height:44px;
  text-decoration:none; border:1px solid var(--line-hairline); border-radius:var(--radius-xs);
  justify-content:center }
.cal-row b{ font-size:var(--body-sm); font-weight:700; color:var(--text-display) }
.cal-row span{ font-size:var(--body-xs); font-weight:600; color:var(--text-muted);
  font-variant-numeric:tabular-nums }
.cal-row:hover{ border-color:var(--flash-500); background:color-mix(in srgb, var(--flash-500) 6%, transparent) }
.cal-row:hover b{ color:var(--flash-400) }
/* Added is a state, not a reward: the rule goes quiet rather than green, so
   the one still to do is the one that stands out. */
.cal-row.added{ opacity:.6 }
.cal-row.added b::after{ content:" ✓"; color:var(--flash-500) }
.cal-note{ font-size:var(--body-xs); font-weight:600; color:var(--text-muted);
  margin:var(--space-1) 0 0; line-height:1.45 }
.wiz-links .res .k{ font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-muted) }

/* Cost / usually / ask as three stats */
.wiz-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--space-5) }
.wiz-stats .k{ font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking);
  text-transform:uppercase; color:var(--text-muted); margin:0 0 4px }
.wiz-stats .v{ font-size:var(--body-lg); font-weight:700; color:var(--text-display); margin:0; line-height:1.3 }
.wiz-stats .v.long{ font-size:var(--body-md); font-weight:600 }

.wiz-acts{ margin-top:var(--space-7) }
.wiz-acts .btn{ padding:14px 24px; font-size:var(--body-lg) }

@media (max-width:640px){
  .wiz-steps li{ grid-template-columns:40px 1fr }
  .wiz-steps .n{ font-size:24px }
}

/* "Flag something": opened on purpose, sits inside the action area, no fanfare */
.wiz-note{ margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--line-hairline) }
.wiz-note label{ display:block; font-size:var(--body-sm); font-weight:600; color:var(--text-heading);
  margin-bottom:var(--space-2) }
.wiz-note .row{ display:flex; gap:var(--space-3); flex-wrap:wrap }
.wiz-note input{ flex:1 1 260px; font-family:var(--font-sans); font-size:var(--body-md);
  color:var(--text-heading); background:var(--surface-card); border:1px solid var(--line-rule);
  border-radius:var(--radius-xs); padding:10px 12px }
.wiz-note .onb-hint{ margin-top:var(--space-2) }


/* =============================================================================
   The course block on the hub. Navy, because it is the one thing on the page
   that deserves a block: people come back to it every day for weeks.

   A BAND, NOT A CARD (Truman, 2026-09-17: "for some reason this card is
   black"). It was navy AND inset AND rounded, which is a contradiction the
   brand rules are explicit about: navy is a block colour for full-bleed
   sections, never a ground for one card sitting in a run of white ones. It
   read correctly on the two pages that have other navy — the signed-out
   /get-started/ with its navy hero and signup, and the console with its navy
   rail and header — and wrong on the SIGNED-IN /get-started/, where the hero
   is gone and this was the only dark thing on the page. A lone dark card in a
   light grid does not read as emphasis, it reads as a mistake.

   So: square, edge to edge, and tall enough to break the page in two. The
   negative inline margin cancels the wrapper's own gutter (--page-gutter) and
   the padding puts it back inside, so the band reaches the page edge while
   its text stays on the same line as every other heading in the column. On
   the console that edge is the content area beside the rail, which is the
   right edge there — the rail is furniture, not page.
   ========================================================================== */
.hub-course{ display:grid; grid-template-columns:1.4fr 1fr; gap:var(--space-7);
  background:var(--mid-1000); color:var(--paper-100);
  border-radius:var(--radius-sharp);
  margin:var(--space-7) calc(-1 * var(--page-gutter, 0px));
  /* Generous vertically on purpose: a band is a break in the page, and 40px
     of padding on a 260px block still reads as a wide card. --space-9 is the
     top of the scale and gets it to a third of the page, which is as close to
     the 40-50% the brand rules want as one component can honestly get. */
  padding:var(--space-9) var(--page-gutter, var(--space-7)) }
.hub-course[hidden]{ display:none }
.hub-course .eyebrow{ font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking);
  text-transform:uppercase; color:var(--flash-400); margin:0 0 var(--space-3);
  padding-top:var(--space-3); border-top:2px solid var(--flash-500); display:inline-block }
.hub-course h2{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(20px,3vw,28px); line-height:1; color:#fff; margin:0 0 var(--space-3) }
.hub-course .hc-l > p:not(.eyebrow){ font-size:var(--body-md); color:var(--paper-300, #C9D1DE);
  margin:0 0 var(--space-5); max-width:44ch; line-height:1.5 }
.hub-course .btn.primary{ text-decoration:none }
.hub-course .hc-all{ display:inline-block; margin-left:var(--space-5); font-size:var(--body-sm);
  color:var(--paper-300, #C9D1DE); text-decoration:underline; text-underline-offset:3px }
.hub-course .hc-all:hover{ color:#fff }
.hub-course .hc-r{ display:flex; flex-direction:column; justify-content:flex-end }
.hub-course .hc-pct{ display:flex; align-items:baseline; gap:4px; line-height:.85 }
.hub-course .hc-pct b{ font-family:var(--font-statement); font-variant-numeric:tabular-nums;
  font-size:clamp(56px,9vw,88px); letter-spacing:-.03em; color:#fff }
.hub-course .hc-pct i{ font-style:normal; font-family:var(--font-statement); font-size:24px; color:var(--flash-400) }
.hub-course.mode-practice .hc-pct b{ color:var(--flash-400) }
.hub-course .bar{ height:6px; background:rgba(255,255,255,.14); margin:var(--space-4) 0 var(--space-3) }
.hub-course .bar i{ display:block; height:100%; background:var(--flash-500) }
.hub-course .hc-sub{ font-size:var(--body-sm); color:var(--paper-300, #C9D1DE); margin:0;
  font-variant-numeric:tabular-nums }
.hub-course .hc-sub b{ color:#fff; font-weight:700 }
.hub-course .hc-name{ font-size:var(--body-xs); color:var(--paper-500, #8A97AD); margin:var(--space-3) 0 0 }
@media (max-width:700px){
  .hub-course{ grid-template-columns:1fr;
    padding:var(--space-7) var(--page-gutter, var(--space-5)) }
  .hub-course .hc-r{ order:-1 }
  .hub-course .hc-pct b{ font-size:56px }
}


/* ---- Admin: team licences ---- */
.lic-strip{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2);
  padding:var(--space-4) var(--space-5); margin-bottom:var(--space-6);
  background:var(--surface-accent-soft); border-left:3px solid var(--flash-500); border-radius:var(--radius-xs) }
.lic-strip .lbl{ flex-basis:100%; margin:0 0 var(--space-2); font-weight:700; font-size:var(--eyebrow);
  letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--flash-400) }
.lic-agent{ padding:var(--space-5) 0; border-bottom:1px solid var(--line-rule) }
.lic-head{ display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:flex-start; margin-bottom:var(--space-3) }
.lic-head .nm{ margin:0; font-size:var(--body-md); font-weight:700; color:var(--text-display) }
.lic-head .sub{ margin:2px 0 0; font-size:var(--body-xs); color:var(--text-muted); font-variant-numeric:tabular-nums }
.lic-head .sub .link-btn{ font-size:var(--body-xs) }
.lic-nums{ margin-left:auto; display:flex; flex-wrap:wrap; gap:var(--space-4); font-size:var(--body-xs);
  color:var(--text-muted); font-variant-numeric:tabular-nums }
.lic-nums b{ color:var(--text-display); font-family:var(--font-statement); font-size:15px }
.lic-nums .alert, .lic-nums .alert b{ color:var(--flash-400) }
.lic-chips{ display:flex; flex-wrap:wrap; gap:6px }
.lic-chip{ display:inline-flex; align-items:baseline; gap:6px; font-family:var(--font-sans);
  font-size:var(--body-xs); padding:6px 9px; border:1px solid var(--line-rule); border-radius:var(--radius-xs);
  background:var(--surface-card); color:var(--text-body); cursor:pointer; font-variant-numeric:tabular-nums }
.lic-chip:hover{ border-color:var(--flash-500) }
.lic-chip b{ font-family:var(--font-statement); font-size:13px; color:var(--text-display); letter-spacing:.02em }
.lic-chip .n{ font-family:var(--font-data); color:var(--text-heading) }
.lic-chip .e{ color:var(--text-muted) }
.lic-chip.pending{ border-style:dashed }
.lic-chip.pending b{ color:var(--text-muted) }
.lic-chip.expired b,.lic-chip.lapsed b{ color:var(--flash-400); text-decoration:line-through }
.lic-chip.soon .e{ color:var(--flash-400); font-weight:700 }
.lic-chip.act{ box-shadow:inset 3px 0 0 var(--flash-500) }

/* Buttons the hub and wizard use, defined here so /get-started/ (site.css) and
   the console (console.css) render them the same. Borderless, red, one per view. */
.onb-wrap .btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3);
  font-family:var(--font-sans); font-weight:700; font-size:var(--body-md); line-height:1;
  border:1px solid var(--line-rule); border-radius:var(--radius-xs); background:var(--surface-card);
  color:var(--text-heading); padding:13px 22px; cursor:pointer; text-decoration:none }
.onb-wrap .btn:hover{ border-color:var(--flash-500) }
.onb-wrap .btn.primary{ background:var(--flash-500); border-color:var(--flash-500); color:#fff }
.onb-wrap .btn.primary:hover{ background:var(--flash-600, #B50500); border-color:var(--flash-600, #B50500) }
.onb-wrap .btn[disabled]{ opacity:.45; cursor:not-allowed }

/* ---- Locked modules ---- */
.tile.is-locked{ opacity:.7; border-style:dashed }
.tile.is-locked .pct{ color:var(--text-muted) }
.tile.is-locked .state{ background:var(--surface-sunken); color:var(--text-muted) }
.wiz-lock{ margin-top:var(--space-6); padding:var(--space-5); border:1px dashed var(--line-strong);
  border-radius:var(--radius-xs); font-size:var(--body-md); color:var(--text-body) }
.wiz-lock b{ color:var(--text-display) }

/* ---- Form steps inside the wizard ---- */
.wiz-form{ margin-top:var(--space-6); padding:var(--space-5); background:var(--surface-raised);
  border:1px solid var(--line-rule); border-radius:var(--radius-xs) }
.wiz-form .lbl{ font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking);
  text-transform:uppercase; color:var(--text-muted); margin:0 0 var(--space-3) }
.wiz-form .lbl + .lbl{ margin-top:var(--space-5) }
.wiz-form .row{ display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; margin-bottom:var(--space-3) }
.wiz-form .row + .lbl{ margin-top:var(--space-4) }
.wiz-form input[type=text],.wiz-form input[type=tel],.wiz-form input[type=date]{ flex:1 1 200px;
  font-family:var(--font-sans); font-size:var(--body-md); color:var(--text-heading);
  background:var(--surface-card); border:1px solid var(--line-rule); border-radius:var(--radius-xs); padding:11px 12px }
.wiz-form input[type=date]{ flex:0 1 180px }
.wiz-form input[type=file]{ flex:1 1 220px; font-family:var(--font-sans); font-size:var(--body-sm); color:var(--text-body) }
.wiz-form .have{ font-size:var(--body-sm); color:var(--text-positive); margin:0 0 var(--space-3) }
.wiz-form .have a{ color:var(--text-positive); font-weight:600 }
.wiz-form .onb-hint{ margin:0 }
.sig-shot{ display:block; width:96px; height:96px; border-radius:var(--radius-pill); object-fit:cover; margin:0 0 var(--space-3);
  border:1px solid var(--line-rule) }

/* ---- The headshot picker (2026-09-14) --------------------------------
   Replaces a bare <input type="file"> sitting next to an Upload button, which
   looked like unfinished work beside the rest of the console and let an agent
   choose a photo without ever pressing Upload.

   The input is visually hidden but NOT display:none - it stays focusable and
   stays the element the <label for> drives, so the keyboard and screen-reader
   path is the real input rather than a div imitating one. */
.sig-pick{ display:flex; align-items:center; gap:var(--space-5); margin-bottom:var(--space-5) }
.sig-thumb{ flex:none; width:72px; height:72px; border-radius:var(--radius-pill); overflow:hidden;
  background:var(--surface-sunken); border:1px solid var(--line-rule);
  display:grid; place-items:center }
.sig-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
/* The empty state carries the agent's initials, which is exactly what the
   generated signature falls back to - so the placeholder previews the real
   outcome instead of shrugging. */
.sig-thumb.empty{ background:var(--mid-900); border-color:var(--mid-900) }
.sig-thumb.empty span{ font-family:var(--font-display); font-size:22px; line-height:1;
  color:var(--paper-100); letter-spacing:.02em }
.sig-pick-b{ min-width:0 }
.sig-pick-b .onb-hint{ margin:var(--space-3) 0 0 }
.sig-pick input[type="file"]{ position:absolute; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; flex:none }
/* The label is doing the button's job, so it has to show the input's focus. */
.sig-pick:focus-within label.btn{ outline:2px solid var(--flash-500); outline-offset:2px }
.sig-preview{ margin:var(--space-4) 0; padding:var(--space-4); background:#fff; border:1px solid var(--line-rule);
  border-radius:var(--radius-xs); overflow-x:auto }
.onb-wrap .btn.sm{ padding:9px 14px; font-size:var(--body-sm) }
.wiz-top .wiz-back{ flex:none }

/* The carriers gate step: the lineup as marks, each with where the agent
   stands. Grey until appointed; the required one carries the sector rule. */
.onb-carriers{ margin:var(--space-3) 0 var(--space-2) }
.onb-carrier{ display:inline-flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none; color:inherit }
.onb-carrier .st{ font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted) }
.onb-carrier.st-appointed .st{ color:var(--text-positive) }
.onb-carrier.st-submitted .st{ color:var(--text-heading) }
.onb-carrier.st-declined .st{ color:var(--text-alert, var(--flash-500)) }
.onb-carrier.st-not_submitted img{ filter:grayscale(1); opacity:.55 }
.onb-carrier:hover img{ filter:none; opacity:1 }