/* =============================================================================
   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 }

/* ---- 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) }
  .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, made obvious (2026-09-15) -----------------
   Seven fields down a navy block ended in a button the same size as the
   fields above it. It is now the widest and tallest thing in the block, with
   three chevrons walking into it from the left.
   The chevrons are the real icon masked in, not a rotated square and not a
   Unicode glyph: the identity is straight, so the shape has to come from the
   drawn geometry. They travel 3px and fade — a nudge toward the button, not
   a blink — and they hold still for anyone who asked for less motion. */
/* 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; gap:var(--space-3); 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) }
.gs-go-arrows{ flex:none; display:flex; align-items:center; gap:1px }
.gs-go-arrows i{ display:block; width:19px; height:28px; background:var(--flash-500);
  -webkit-mask:url("/icons/chevron-right.svg") center / contain no-repeat;
          mask:url("/icons/chevron-right.svg") center / contain no-repeat;
  opacity:.35; animation:gs-nudge 1.5s var(--ease-standard) infinite }
.gs-go-arrows i:nth-child(2){ animation-delay:.15s }
.gs-go-arrows i:nth-child(3){ animation-delay:.3s }
@keyframes gs-nudge{
  0%, 100%{ opacity:.35; transform:translateX(0) }
  45%     { opacity:1;   transform:translateX(4px) }
}
@media (prefers-reduced-motion:reduce){
  .gs-go-arrows i{ animation:none; opacity:.75 }
}
/* At 375px the button needs the whole row, so the chevrons stand above it and
   point down into it instead of eating its width. */
@media (max-width:520px){
  .gs-go{ flex-direction:column; align-items:center; gap:var(--space-3) }
  .gs-go-arrows{ flex-direction:column; gap:0 }
  .gs-go-arrows i{ width:28px; height:17px;
    -webkit-mask-image:url("/icons/chevron-down.svg");
            mask-image:url("/icons/chevron-down.svg") }
  .gs-btn-lg{ width:100%; flex:none }
  /* A SECOND NAME, not the same one redefined inside the media query: a
     re-declared @keyframes is resolved globally by declaration order in some
     engines rather than by which query matches, so the horizontal nudge would
     win on desktop and lose on a phone at random. */
  .gs-go-arrows i{ animation-name:gs-nudge-down }
}
@keyframes gs-nudge-down{
  0%, 100%{ opacity:.35; transform:translateY(0) }
  45%     { opacity:1;   transform:translateY(4px) }
}
.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:2px }
.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) }
.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.
   ========================================================================== */
.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-sm);
  padding:var(--space-7); margin:var(--space-2) 0 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-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:48px; 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:36px; 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 }