/* =========================================================
   DMS Training Services Intake — styles.css
   "Technical Specification" — clinical authority, hairline rules,
   navy ink on cool neutral, IBM Plex throughout.
   ========================================================= */

:root {
  /* DMS palette */
  --navy-900: #0b223a;
  --navy-800: #102d4c;
  --navy-700: #15466d;
  --navy-500: #226ea5;
  --navy-400: #2b7bbd;
  --sky-200:  #cfe4f7;
  --sky-100:  #e7f3fc;
  --sky-50:   #f3f8fd;

  /* Surface / ink */
  --bg:           #eef3f9;     /* navy-tinted page neutral */
  --bg-grid:      #e3ecf4;     /* slightly deeper for surface accents */
  --surface:      #ffffff;     /* card / form surface */
  --surface-alt:  #f6fafd;
  --rule:         #d4dde7;     /* hairline */
  --rule-strong:  #b9c4d2;     /* slightly heavier hairline */
  --ink:          #0b223a;
  --ink-soft:     #2f4258;
  --ink-faint:    #6c7a8a;
  --ink-mute:     #8c98a6;
  --danger:       #b6342c;
  --focus:        rgba(34,110,165,.32);

  /* Type */
  --sans: "IBM Plex Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Rhythm */
  --max-w:  1180px;
  --gutter: 2rem;

  /* Slider geometry */
  --thumb:   18px;
  --thumb-r: 9px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02", "tnum" 1, "lnum" 1;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--navy-500);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color .15s, border-color .15s;
}
a:hover { color: var(--navy-700); }

p { margin: 0 0 1rem; color: var(--ink-soft); }

::selection { background: var(--navy-900); color: #fff; }

:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus);
  border-radius: 0;
}

.hidden { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* utility: caps label */
.mono-label {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}

/* ========================================================= */
/*  TOP BAR                                                    */
/* ========================================================= */

.topbar {
  position: relative;
  z-index: 5;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(to right, var(--navy-900) 0%, var(--navy-500) 35%, var(--navy-400) 60%, transparent 100%);
}

.topbar-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: .85rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: .85rem;
  border-bottom: 0;
  color: var(--ink);
}
.topbar-logo { height: 26px; width: auto; }
.topbar-divider {
  width: 1px; height: 20px;
  background: var(--rule);
}
.topbar-name {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink);
}
.topbar-doc {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

/* ========================================================= */
/*  COVER (hero)                                               */
/* ========================================================= */

.cover {
  position: relative;
  background:
    radial-gradient(ellipse 1100px 380px at 88% -10%, rgba(43,123,189,.08), transparent 60%),
    radial-gradient(ellipse 800px 320px at 0% 110%, rgba(11,34,58,.05), transparent 65%),
    var(--surface);
  border-bottom: 1px solid var(--rule);
  padding: 0;
}

.cover-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Title block */
.cover-title-block {
  padding: 4rem 0 3.5rem;
}

.cover-eyebrow {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy-700);
  margin-bottom: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
}
.cover-eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: linear-gradient(to right, var(--navy-700) 0%, var(--navy-700) 50%, var(--navy-400) 50%, var(--navy-400) 100%);
}

.cover-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(2.1rem, 4.5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 1.25rem;
  max-width: 22ch;
  font-feature-settings: "ss01", "ss02", "tnum" 1;
}

.cover-sub {
  max-width: 50ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* TOC strip below title */
.cover-toc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
  overflow: hidden;
}
.cover-toc-label {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .66rem;
  color: var(--ink-faint);
  padding: .85rem 1.25rem;
  border-right: 1px solid var(--rule);
  background: var(--bg-grid);
  flex-shrink: 0;
}
.cover-toc a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .85rem 1.25rem;
  border-right: 1px solid var(--rule);
  color: var(--ink);
  border-bottom: 0;
  position: relative;
  transition: color .15s, background .15s;
}
.cover-toc a:hover {
  color: var(--navy-700);
  background: var(--sky-50);
}
.cover-toc a:hover .a-num { color: var(--navy-500); }
.cover-toc .a-num {
  color: var(--navy-400);
  font-weight: 500;
}

/* ========================================================= */
/*  PAGE / FORM                                                */
/* ========================================================= */

.page {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 3rem var(--gutter) 5rem;
}

.brief {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Section structure (rail + body) ────────────────────── */
.sec {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--rule);
  background: var(--surface);
  margin-bottom: -1px;       /* collapse hairlines between sections */
  scroll-margin-top: 1.5rem;
}

.sec-rail {
  border-right: 1px solid var(--rule);
  background: var(--surface-alt);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  position: relative;
}
.sec-rail::before {
  content: "";
  position: absolute;
  top: 2.05rem; left: 0;
  width: 3px; height: 36px;
  background: linear-gradient(to bottom, var(--navy-900) 0%, var(--navy-500) 60%, var(--navy-400) 100%);
}

.sec-num {
  font-family: var(--mono);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--navy-500);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.sec-rail-label {
  font-family: var(--sans);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.sec-body {
  padding: 2rem 2.5rem 2.25rem;
}

.sec-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 .35rem;
}

.sec-kicker {
  font-size: .94rem;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
  max-width: 60ch;
}

.sec-hint {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: .75rem 0 0;
}

.req {
  display: inline-block;
  margin-left: .35rem;
  font-family: var(--sans);
  font-size: .62em;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--danger);
  text-transform: uppercase;
  vertical-align: 2px;
}
.opt {
  display: inline-block;
  margin-left: .55rem;
  font-family: var(--sans);
  font-size: .62em;
  letter-spacing: .12em;
  color: var(--ink-faint);
  text-transform: uppercase;
  vertical-align: 2px;
  font-weight: 400;
}

/* ========================================================= */
/*  FIELDS                                                     */
/* ========================================================= */

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 2rem;
}

.field { display: flex; flex-direction: column; }

.field label {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .55rem;
  font-weight: 500;
}

.field-hint {
  font-size: .85rem;
  color: var(--ink-faint);
  margin: -.15rem 0 .65rem;
  line-height: 1.55;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field select,
.field textarea {
  font: inherit;
  font-family: var(--sans);
  width: 100%;
  padding: .65rem .85rem;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--ink);
  border-radius: 0;
  transition: border-color .15s, box-shadow .15s;
  font-variant-numeric: tabular-nums;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-mute);
}

.field textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.55;
  padding: .8rem .85rem;
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2315466d' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  padding-right: 2rem;
  cursor: pointer;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--navy-700);
  box-shadow: 0 0 0 3px var(--focus);
}

.field input.invalid,
.field select.invalid,
.field textarea.invalid {
  border-color: var(--danger);
}

.field-error {
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .04em;
  color: var(--danger);
  margin: .4rem 0 0;
  min-height: 1rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.field-error::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: var(--danger);
  color: #fff;
  font-weight: 600;
  font-size: .7rem;
  font-family: var(--sans);
}
.field-error:empty { display: none; }

/* Reveal — conditional context (industry-other, custom, referral-other) */
.reveal {
  margin-top: 1.25rem;
  padding-left: 1rem;
  border-left: 2px solid var(--navy-700);
  animation: revealIn .25s ease both;
}
@keyframes revealIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.custom-prompt .field-hint {
  background: var(--sky-50);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--navy-500);
  padding: .8rem 1rem;
  color: var(--navy-700);
  font-size: .85rem;
  margin-bottom: .85rem;
}

.bare { border: 0; padding: 0; margin: 0; }

/* ========================================================= */
/*  INDUSTRY CHIPS                                             */
/* ========================================================= */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .85rem .5rem .75rem;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  font: inherit;
  font-family: var(--sans);
  font-size: .9rem;
  color: var(--ink);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}

.chip:hover {
  border-color: var(--navy-700);
  background: var(--sky-50);
}

.chip-marker {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: .04em;
}

.chip.selected {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #fff;
}
.chip.selected .chip-marker { color: var(--sky-200); }

/* ========================================================= */
/*  ORG SIZE SLIDER                                            */
/* ========================================================= */

.size-readout {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.size-figure {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.size-unit {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}

.size-track {
  position: relative;
  margin-top: 1.5rem;
  padding-top: .5rem;
}

.size-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  margin: 0;
  background: var(--rule-strong);
  border-radius: 0;
  outline: none;
  cursor: pointer;
}

.size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 0;
  background: var(--navy-900);
  border: 0;
  cursor: grab;
  transition: transform .12s, background .15s;
}
.size-slider::-webkit-slider-thumb:hover { background: var(--navy-700); }
.size-slider:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.05); }

.size-slider::-moz-range-thumb {
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 0;
  background: var(--navy-900);
  border: 0;
  cursor: grab;
}

/* Tick marks behind the labels — engineering rule */
.size-track-ticks {
  position: relative;
  height: 8px;
  margin-top: 4px;
}
.size-track-ticks span {
  position: absolute;
  top: 0;
  width: 1px;
  height: 6px;
  background: var(--rule-strong);
  transform: translateX(-50%);
}
.size-track-ticks span[data-tick="0"] { left: var(--thumb-r); }
.size-track-ticks span[data-tick="1"] { left: calc(var(--thumb-r) + (100% - 2 * var(--thumb-r)) * 1 / 5); }
.size-track-ticks span[data-tick="2"] { left: calc(var(--thumb-r) + (100% - 2 * var(--thumb-r)) * 2 / 5); }
.size-track-ticks span[data-tick="3"] { left: calc(var(--thumb-r) + (100% - 2 * var(--thumb-r)) * 3 / 5); }
.size-track-ticks span[data-tick="4"] { left: calc(var(--thumb-r) + (100% - 2 * var(--thumb-r)) * 4 / 5); }
.size-track-ticks span[data-tick="5"] { left: calc(100% - var(--thumb-r)); }

/*  Stop labels — absolute-positioned to match thumb center positions */
.size-stops {
  position: relative;
  height: 1.4rem;
  margin-top: .5rem;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--ink-soft);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.size-stops span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s, font-weight .15s;
  padding: .15rem 0;
}

.size-stops span[data-stop="0"] { left: var(--thumb-r); }
.size-stops span[data-stop="1"] { left: calc(var(--thumb-r) + (100% - 2 * var(--thumb-r)) * 1 / 5); }
.size-stops span[data-stop="2"] { left: calc(var(--thumb-r) + (100% - 2 * var(--thumb-r)) * 2 / 5); }
.size-stops span[data-stop="3"] { left: calc(var(--thumb-r) + (100% - 2 * var(--thumb-r)) * 3 / 5); }
.size-stops span[data-stop="4"] { left: calc(var(--thumb-r) + (100% - 2 * var(--thumb-r)) * 4 / 5); }
.size-stops span[data-stop="5"] { left: calc(100% - var(--thumb-r)); }

.size-stops span.active {
  color: var(--navy-500);
  font-weight: 500;
}

/* ========================================================= */
/*  TRAINING SERVICES — spec-doc cards                         */
/* ========================================================= */

.prog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: -1px 0;
  border: 1px solid var(--rule);
}

.prog-card {
  position: relative;
  text-align: left;
  padding: 1.5rem 1.5rem 1.4rem;
  background: var(--surface);
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  font: inherit;
  font-family: var(--sans);
  color: var(--ink);
  transition: background .15s;
  margin: 0;
}

.prog-card:nth-child(2n) { border-right: 0; }
.prog-card:nth-last-child(-n+2) { border-bottom: 0; }

.prog-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .85rem;
  gap: 1rem;
}

.prog-num {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}

.prog-check {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--rule-strong);
  background: var(--surface);
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}

.prog-card:hover {
  background: var(--sky-50);
}
.prog-card:hover .prog-check {
  border-color: var(--navy-700);
}

.prog-card.selected {
  background: var(--sky-50);
}
.prog-card.selected::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--navy-900) 0%, var(--navy-500) 60%, var(--navy-400) 100%);
}
.prog-card.selected .prog-check {
  background: var(--navy-900);
  border-color: var(--navy-900);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5l2.5 2.5 5-6' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-size: 78%;
  background-repeat: no-repeat;
  background-position: center;
}

.prog-title {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-bottom: .4rem;
}

.prog-desc {
  display: block;
  font-size: .9rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
  max-width: 38ch;
}

/* ========================================================= */
/*  SUBMIT                                                     */
/* ========================================================= */

.sec--submit {
  border: 0;
  background: transparent;
  margin-top: 1rem;
}
.sec--submit .sec-rail {
  background: transparent;
  border-right: 0;
}
.sec--submit .sec-rail::before { display: none; }
.sec--submit .sec-body {
  padding: 1rem 0 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  font-family: var(--sans);
  font-size: .94rem;
  font-weight: 500;
  letter-spacing: .005em;
  padding: .8rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: var(--navy-900);
  color: #fff;
  border-color: var(--navy-900);
}
.btn-primary:hover:not(:disabled) {
  background: var(--navy-700);
  border-color: var(--navy-700);
  box-shadow: 0 8px 22px -10px rgba(11,34,58,.45);
}

.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn-ghost:hover:not(:disabled) {
  border-color: var(--navy-700);
  background: var(--sky-50);
}

.btn-arrow {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 400;
  transition: transform .2s;
}
.btn:hover .btn-arrow { transform: translateX(3px); }

.btn-submit {
  font-size: 1rem;
  padding: 1rem 2.25rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-weight: 500;
}

.submit-fineprint {
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--ink-faint);
}
.submit-fineprint a {
  color: var(--ink-soft);
  border-color: var(--rule-strong);
}
.submit-fineprint a:hover { color: var(--navy-700); }

.submit-error {
  margin-top: 1rem;
  font-size: .9rem;
  font-family: var(--sans);
  color: var(--danger);
  background: rgba(182,52,44,.06);
  border: 1px solid rgba(182,52,44,.3);
  border-left: 3px solid var(--danger);
  padding: .65rem .9rem;
  display: inline-block;
}

/* ========================================================= */
/*  CONFIRMATION — technical receipt                           */
/* ========================================================= */

.confirm {
  max-width: 720px;
  margin: 5rem auto 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  position: relative;
}

.confirm-head {
  padding: .85rem 2rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--bg-grid);
}
.confirm-status {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy-700);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.confirm-status::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--navy-700);
  display: inline-block;
}
.confirm-ref {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.confirm-body {
  padding: 3rem 2rem 2rem;
  text-align: center;
}

.confirm-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 .9rem;
  line-height: 1.15;
}

.confirm-msg {
  max-width: 52ch;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: .95rem;
}

.confirm-back {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.75rem;
  padding: .7rem 1.25rem;
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--navy-700);
  background: var(--sky-50);
  border: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transition: background .15s, color .15s, border-color .15s, transform .2s;
}
.confirm-back:hover {
  background: var(--navy-900);
  color: #fff;
  border-color: var(--navy-900);
}
.confirm-back-arrow {
  font-family: var(--mono);
  font-weight: 400;
  transition: transform .2s;
}
.confirm-back:hover .confirm-back-arrow { transform: translateX(-3px); }

.confirm-foot {
  border-top: 1px solid var(--rule);
  padding: .85rem 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  background: var(--surface-alt);
}
.confirm-foot-cell {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.confirm-foot-cell .mono-label { font-size: .62rem; }
.confirm-foot-cell-value {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ========================================================= */
/*  PAGE FOOTER                                                */
/* ========================================================= */

.page-foot {
  position: relative;
  z-index: 1;
  padding: 1.5rem var(--gutter);
  background: var(--navy-900);
  color: #cfd8e3;
  display: flex;
  justify-content: center;
  gap: .75rem;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.page-foot::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--navy-400) 30%, var(--navy-500) 65%, transparent 100%);
}
.page-foot a {
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.25);
}
.page-foot a:hover {
  color: #fff;
  border-bottom-color: var(--navy-400);
}
.page-foot-dot { color: rgba(255,255,255,.3); }

/* ========================================================= */
/*  MODALS — clinical, sharp, no flourish                      */
/* ========================================================= */

.modal-veil {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(11,34,58,.7);
  backdrop-filter: blur(4px);
}
.modal-veil.hidden { display: none; }

.modal-sheet {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 0;
  width: 100%;
  max-width: 760px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 60px -20px rgba(11,34,58,.55);
  position: relative;
  animation: sheetIn .25s ease both;
}
.modal-sheet--narrow { max-width: 580px; }

@keyframes sheetIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal-head {
  padding: 1.25rem 2rem 1.25rem;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-grid);
}
.modal-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .85rem;
}
.modal-meta::before {
  content: "";
  flex-shrink: 0;
  width: 8px; height: 8px;
  background: var(--navy-700);
}
.modal-head h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.2vw, 1.7rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 .3rem;
}
.modal-sub {
  font-size: .9rem;
  color: var(--ink-soft);
  margin: 0;
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 2rem;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
}
.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--rule-strong); }

.modal-body h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy-700);
  margin: 1.75rem 0 .6rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--rule);
}
.modal-body h3:first-of-type { margin-top: 0; }
.modal-body p {
  margin: 0 0 .85rem;
  color: var(--ink);
  font-size: .92rem;
  line-height: 1.65;
}
.modal-body .lede {
  font-size: 1.02rem;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
  padding: 1rem 1.1rem;
  background: var(--bg-grid);
  border-left: 3px solid var(--navy-700);
}

.callout {
  background: var(--sky-50);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--navy-500);
  padding: .85rem 1.1rem;
  margin: 1rem 0;
}
.callout p {
  margin: 0;
  color: var(--navy-700);
}

.consent-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--rule);
}
.consent-list li {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: .9rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  transition: background .15s;
}
.consent-list li:last-child { border-bottom: 0; }
.consent-list li:has(input:checked) {
  background: var(--sky-50);
}
.consent-list input[type="checkbox"] {
  width: 16px; height: 16px;
  margin-top: 2px;
  accent-color: var(--navy-900);
  flex-shrink: 0;
  cursor: pointer;
}
.consent-list label {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink);
  cursor: pointer;
}

.gdpr-note {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--bg-grid);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--navy-900);
}
.gdpr-tag {
  font-family: var(--sans);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .14em;
  background: var(--navy-900);
  color: #fff;
  padding: .2rem .55rem;
  height: fit-content;
  flex-shrink: 0;
  margin-top: 1px;
}
.gdpr-note p {
  margin: 0;
  font-size: .85rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

.modal-foot {
  padding: 1rem 2rem;
  border-top: 1px solid var(--rule);
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.modal-stamp {
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
  flex: 1;
}
.modal-actions {
  display: flex;
  gap: .55rem;
}
.modal-actions .btn { min-width: 130px; }

/* ========================================================= */
/*  RESPONSIVE                                                 */
/* ========================================================= */

@media (max-width: 880px) {
  .grid-2          { grid-template-columns: 1fr; }
  .prog-grid       { grid-template-columns: 1fr; }
  .prog-card       { border-right: 0 !important; border-bottom: 1px solid var(--rule) !important; }
  .prog-card:last-child { border-bottom: 0 !important; }

  .sec             { grid-template-columns: 1fr; }
  .sec-rail        {
    flex-direction: row;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1.5rem;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .sec-rail::before {
    top: 0; left: 1.5rem;
    width: 36px; height: 3px;
    background: linear-gradient(to right, var(--navy-900) 0%, var(--navy-500) 60%, var(--navy-400) 100%);
  }
  .sec-num { font-size: 1.15rem; }
  .sec-rail-label { font-size: .58rem; }
  .sec-body { padding: 1.5rem 1.5rem 1.75rem; }

  .cover-title-block {
    padding: 2.5rem 0 2rem;
  }
  .cover-toc { font-size: .66rem; }
  .cover-toc a, .cover-toc-label { padding: .65rem .85rem; }

  .modal-head      { padding: 1rem 1.5rem; }
  .modal-body      { padding: 1.25rem 1.5rem; }
  .modal-foot      { padding: .85rem 1.5rem; flex-direction: column; gap: .85rem; }
  .modal-stamp     { text-align: center; }
  .modal-actions   { width: 100%; flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }

  .confirm-foot { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  :root { --gutter: 1.25rem; }
  .topbar-name { display: none; }
  .cover-toc-label { display: none; }
  .size-stops { font-size: .62rem; }
  .btn-submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}