/* ==========================================================================
   PROCESS — the sales-pipeline site. Tokens only; no literal colours.
   Reads as a document, works as a runbook.
   ========================================================================== */

/* ------------------------------------------------------------------ shell -- */

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-wide { max-width: 1420px; margin: 0 auto; padding: 0 var(--gutter); }

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--hair);
}
.topbar-in {
  display: flex; align-items: center; gap: 20px;
  height: 62px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand .milo-mark { --mark: 26px; }
.brand b { font-size: 13.5px; }
.brand .wordmark { font-size: 13px; }
.brand .sep { color: var(--faint); }
.brand span.t { font-size: 13px; color: var(--muted); font-weight: 450; letter-spacing: -0.01em; }

.nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.nav a {
  font-size: 12.5px; color: var(--muted); text-decoration: none;
  padding: 7px 12px; border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: color var(--t-micro) ease, background var(--t-micro) ease, border-color var(--t-micro) ease;
}
.nav a:hover { color: var(--text); background: var(--panel); }
.nav a.on { color: var(--text-hi); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* ------------------------------------------------------------------- hero -- */

.hero { padding: clamp(56px, 9vh, 104px) 0 clamp(30px, 5vh, 52px); }
.hero h1 { max-width: 16ch; }
.hero .lead { max-width: 62ch; margin-top: 20px; }
.hero .lbl { display: block; margin-bottom: 18px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }

/* ----------------------------------------------------------------- funnel -- */

.funnel { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 40px; }
.fstep {
  position: relative; padding: 16px 16px 18px;
  border-radius: var(--r-panel); border: 1px solid var(--hair);
  background: linear-gradient(180deg, var(--panel-2), transparent);
  overflow: hidden;
}
.fstep::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--fc, var(--accent)));
  opacity: 0.8;
}
.fstep .fn { font-size: 26px; font-weight: 650; letter-spacing: -0.04em; color: var(--text-hi); }
.fstep .fu { font-size: var(--fs-micro); color: var(--faint); margin-top: 2px; }
.fstep .fnm { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.fstep .fc {
  margin-top: 9px; font-size: 11px; font-weight: 600;
  color: var(--accent-ink); letter-spacing: 0.02em;
}
.fstep .fc.bad { color: var(--neg); }

/* ------------------------------------------------------------------- rail -- */

.railbar {
  position: sticky; top: 62px; z-index: 30;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--hair);
  padding: 10px 0;
}
.rail { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.rail::-webkit-scrollbar { height: 5px; }
.rnode {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--hair); background: var(--panel);
  font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap;
  transition: color var(--t-micro) ease, border-color var(--t-micro) ease, background var(--t-micro) ease;
}
.rnode:hover { color: var(--text); border-color: var(--hair-2); background: var(--panel-2); }
.rnode.on { color: var(--text-hi); border-color: color-mix(in srgb, var(--pc, var(--accent)) 60%, transparent); background: color-mix(in srgb, var(--pc, var(--accent)) 16%, transparent); }
.rnode i {
  display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
  font-size: 10.5px; font-style: normal; font-weight: 650;
  background: color-mix(in srgb, var(--pc, var(--accent)) 26%, transparent);
  color: var(--text-hi);
}
.rnode.done { opacity: 1; }
.rnode.done i::after { content: ""; }

.filters { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.filters .lbl { margin-right: 2px; }
.fchip {
  font-size: 11.5px; padding: 5px 12px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--hair); background: transparent; color: var(--muted);
  transition: all var(--t-micro) ease;
}
.fchip:hover { color: var(--text); border-color: var(--hair-2); }
.fchip.on { color: var(--text-hi); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.filters .spacer { margin-left: auto; }

/* ------------------------------------------------------------------ phase -- */

.phase-head { margin: clamp(56px, 8vh, 92px) 0 22px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.phase-head .pnum {
  font-size: 11px; font-weight: 700; letter-spacing: var(--track-label);
  color: var(--pc, var(--accent)); text-transform: uppercase;
}
.phase-head h2 { letter-spacing: -0.035em; }
.phase-head .pb { color: var(--muted); font-size: 14px; }
.phase-line { height: 2px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--pc, var(--accent)), transparent); opacity: 0.55; }

/* ------------------------------------------------------------------ stage -- */

.stage { scroll-margin-top: 168px; margin-bottom: 20px; }
.stage-card {
  border-radius: var(--r-card);
  border: 1px solid var(--hair);
  background: linear-gradient(162deg, color-mix(in srgb, var(--pc, var(--accent)) 6%, rgba(255,255,255,0.035)), rgba(255,255,255,0.015));
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.stage-top { display: flex; gap: 18px; padding: 24px 26px 20px; align-items: flex-start; flex-wrap: wrap; }
.stage-num {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 14px;
  font-size: 16px; font-weight: 650; color: var(--text-hi);
  background: color-mix(in srgb, var(--pc, var(--accent)) 24%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc, var(--accent)) 45%, transparent);
}
.stage-id { flex: 1 1 320px; min-width: 260px; }
.stage-id h3 { font-size: 23px; }
.stage-id .goal { color: var(--muted); margin-top: 8px; max-width: 74ch; }
.stage-facts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }

.stage-vol { flex: none; text-align: right; min-width: 116px; }
.stage-vol .v { font-size: 27px; font-weight: 650; letter-spacing: -0.04em; color: var(--text-hi); }
.stage-vol .u { font-size: var(--fs-micro); color: var(--faint); }
.stage-vol .c { font-size: 11px; font-weight: 600; color: var(--accent-ink); margin-top: 4px; }
.stage-vol .c.bad { color: var(--neg); }

.gates { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--divider); border-top: 1px solid var(--divider); }
.gate { padding: 15px 26px; background: color-mix(in srgb, var(--bg) 55%, transparent); }
.gate .lbl { display: block; margin-bottom: 5px; }
.gate p { font-size: 13.5px; color: var(--text); margin: 0; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--divider); border-top: 1px solid var(--divider); }
.col { padding: 20px 26px 24px; background: color-mix(in srgb, var(--bg) 42%, transparent); }
.col > header { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.col > header .lbl { color: var(--text); }
.col .who { font-size: var(--fs-micro); color: var(--faint); }

.acts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.acts li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; }
.acts li > .mk {
  flex: none; margin-top: 6px; width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--mkc, var(--accent)) 85%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--mkc, var(--accent)) 45%, transparent);
}
.acts li .note { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.acts li .sys { display: inline-block; margin-left: 6px; font-size: 10.5px; color: var(--faint); border: 1px solid var(--hair); border-radius: var(--r-pill); padding: 1px 7px; }

/* ------------------------------------------------------------ lower decks -- */

.decks { border-top: 1px solid var(--divider); display: grid; grid-template-columns: 1.15fr 1fr; gap: 1px; background: var(--divider); }
.deck { padding: 20px 26px 24px; background: color-mix(in srgb, var(--bg) 30%, transparent); }
.deck > .lbl { display: block; margin-bottom: 13px; }
.deck + .deck { }

.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.checks li { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; }
.checks input { display: none; }
.checks label { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.checks .box {
  flex: none; margin-top: 2px; width: 17px; height: 17px; border-radius: 6px;
  border: 1px solid var(--hair-2); background: rgba(255, 255, 255, 0.04);
  display: grid; place-items: center;
  transition: all var(--t-micro) ease;
}
.checks .box::after {
  content: ""; width: 8px; height: 4.5px; margin-top: -2px;
  border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg);
  transform: rotate(-45deg) scale(0.5); opacity: 0;
  transition: all 0.16s var(--ease-spring);
}
.checks input:checked + .box { background: var(--pos); border-color: var(--pos); }
.checks input:checked + .box::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.checks input:checked ~ .ct { color: var(--faint); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--faint) 60%, transparent); }
.checks .ct { transition: color var(--t-micro) ease; }

.autotable { display: flex; flex-direction: column; gap: 10px; }
.autorow { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: start; }
.autorow .a-do { font-size: 13.5px; }
.autorow .a-next { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); padding-left: 0; }
.autorow .a-next::before { content: "→ "; color: var(--faint); }

.taglist { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: 11.5px; padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.035); color: var(--muted);
}
.tag.best { color: var(--text-hi); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 13%, transparent); }

.risk { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.55; }
.risk + .risk { margin-top: 10px; }
.risk .rm { flex: none; margin-top: 5px; width: 6px; height: 6px; border-radius: 2px; background: var(--warn); box-shadow: 0 0 8px color-mix(in srgb, var(--warn) 50%, transparent); }

.marker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 650; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--gold); border: 1px dashed color-mix(in srgb, var(--gold) 45%, transparent);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  padding: 5px 12px; border-radius: var(--r-pill);
}

/* ---------------------------------------------------------------- sections -- */

.section { padding: clamp(60px, 9vh, 108px) 0 0; scroll-margin-top: 168px; }
#timeline { scroll-margin-top: 168px; }
.section > header { max-width: 70ch; margin-bottom: 30px; }
.section > header .lbl { display: block; margin-bottom: 14px; }
.section > header .lead { margin-top: 14px; font-size: 15.5px; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 14px; }

.formcard { padding: 24px 26px 26px; }
.formcard .fh { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.formcard h3 { font-size: 20px; }
.formcard .when { font-size: 12px; color: var(--accent-ink); }
.formcard .purpose { font-size: 13.5px; color: var(--muted); margin: 10px 0 0; }
.formcard .frule { margin: 14px 0 20px; font-size: 13px; }
.fgroup + .fgroup { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--divider); }
.fgroup > .lbl { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.fields { display: flex; flex-wrap: wrap; gap: 6px; }
.field-pill {
  font-size: 12px; padding: 5px 11px; border-radius: var(--r-tiny);
  border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.03); color: var(--text);
}
.field-pill.req { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

.syscard { padding: 20px 22px 22px; }
.syscard .sh { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.syscard h4 { font-size: 15.5px; color: var(--text-hi); font-weight: 600; }
.syscard .role { font-size: var(--fs-micro); color: var(--accent-ink); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 600; margin-top: 8px; }
.syscard p { font-size: 13px; color: var(--muted); margin: 8px 0 14px; }
.syscard .stagerefs { display: flex; flex-wrap: wrap; gap: 5px; }
.stageref {
  font-size: 10.5px; padding: 3px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--hair); color: var(--faint); background: transparent;
  cursor: pointer; text-decoration: none;
}
.stageref:hover { color: var(--text); border-color: var(--hair-2); }

.qcard { padding: 22px 24px 24px; }
.qcard h4 { font-size: 17px; font-weight: 550; letter-spacing: -0.02em; color: var(--text-hi); }
.qcard p { font-size: 13.5px; color: var(--muted); margin: 10px 0 14px; }
.qcard .qfoot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.autoboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.autocol { padding: 18px 20px 20px; }
.autocol > header { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.autocol h4 { font-size: 14px; font-weight: 600; }
.autocol .n { margin-left: auto; font-size: 12px; color: var(--faint); }
.autolist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.autolist li { font-size: 13px; line-height: 1.5; }
.autolist li .st { display: block; font-size: 11.5px; color: var(--faint); margin-top: 3px; }

/* ---------------------------------------------------------------- footer -- */

.foot { margin-top: clamp(70px, 11vh, 130px); padding: 34px 0 60px; border-top: 1px solid var(--hair); }
.foot-in { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.foot .meta { margin-left: auto; }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 900px) {
  .funnel { grid-template-columns: repeat(3, 1fr); }
  .cols, .gates, .decks { grid-template-columns: 1fr; }
  .stage-vol { text-align: left; }
}
@media (max-width: 560px) {
  .funnel { grid-template-columns: repeat(2, 1fr); }
  .topbar-in { height: auto; padding: 10px 0; flex-wrap: wrap; }
  .railbar { top: 0; position: static; }
}

/* ---------------------------------------------------------------- print -- */

@media print {
  .backdrop, .topbar, .railbar, .filters { display: none !important; }
  html { background: #fff; color: #111; }
  .stage-card, .glass, .glass-deep, .tile { break-inside: avoid; border-color: #ccc; background: #fff; box-shadow: none; }
  .col, .gate, .deck { background: #fff; }
  h1, h2, h3, h4, .hi { color: #000; }
  .lead, .muted, .meta, .micro { color: #444; }
  .section, .stage { page-break-inside: avoid; }
}