/* ==========================================================================
   VNYX IT — Fees (P-sheets) + Schedule of work (H-sheets)
   Page-specific styles for pricing.html and how-it-works.html.
   Builds on site.css tokens; no overrides of shared components.
   ========================================================================== */

:root {
  --cobalt-light: #9AA6FF;   /* cobalt that passes AA on night/ink */
  --rust-light: #E58A57;     /* rust that passes AA on night */
}

/* ---------- Shared: hero ---------- */
.fs-hero { padding: calc(var(--nav-h) + 3.5rem) 0 clamp(4rem, 8vw, 7rem); overflow: hidden; }
.fs-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}
.fs-hero__copy .display { max-width: 11ch; }
.fs-hero__copy .lede { max-width: 42ch; }

.fs-hero__facts { list-style: none; padding: 0; margin-bottom: 0; display: flex; flex-wrap: wrap; border-top: 1px solid var(--rule-strong); max-width: 34rem; }
.fs-hero__facts li { display: grid; gap: 0.15rem; padding: 0.9rem 1.4rem 0 0; margin-right: 1.4rem; border-right: 1px solid var(--rule); }
.fs-hero__facts li:last-child { border-right: 0; margin-right: 0; }
.fs-k { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }
.fs-v { font-family: var(--f-display); font-variation-settings: "opsz" 36; font-size: 1.2rem; line-height: 1.3; }

/* Title-block bars (schedule, calculator, sheet index) */
.fs-schedule__head, .fs-calc__head, .hw-index__head {
  display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 1.1rem;
  background: var(--ink); color: var(--paper);
  font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
}

/* ---------- P-01: fee schedule card ---------- */
.fs-schedule {
  position: relative; background: var(--card); border: 1px solid var(--ink);
  box-shadow: 10px 10px 0 var(--paper-3);
}
.fs-schedule__block { padding: 1rem 1.1rem 0.85rem; border-top: 1px solid var(--rule-strong); }
.fs-schedule__block:first-of-type { border-top: 0; }
.fs-schedule__h { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); margin-bottom: 0.35rem; }
.fs-schedule__rows { list-style: none; padding: 0; margin: 0; }
.fs-schedule__rows li { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.28rem 0; font-size: 0.975rem; }
.fs-schedule__rows small { font-family: var(--f-mono); font-size: 0.6875rem; color: var(--graphite); margin-left: 0.35rem; letter-spacing: 0.04em; }
.fs-schedule__rows .num { font-size: 1rem; font-weight: 500; color: var(--ink); }
.fs-dots { flex: 1; min-width: 1rem; border-bottom: 1px dotted var(--rule-strong); transform: translateY(-0.3em); }
.fs-schedule__foot { padding: 0.8rem 1.1rem; background: var(--paper-2); border-top: 1px solid var(--rule-strong); font-size: 0.85rem; color: var(--ink-2); }
.fs-schedule__foot a { color: var(--cobalt-ink); font-weight: 500; }
.fs-schedule__stamp { position: absolute; top: -1.4rem; right: -1rem; background: var(--paper); }

/* ---------- P-01: Detail A — when you pay ---------- */
.fs-pay {
  margin: clamp(3.5rem, 7vw, 5.5rem) 0 0; padding: clamp(1.1rem, 2.6vw, 2rem);
  border: 1px solid var(--rule-strong); background: rgba(248, 246, 240, 0.78);
}
.fs-pay__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; margin-bottom: 2.25rem; }
.fs-pay__ex { font-family: var(--f-mono); font-size: 0.75rem; color: var(--graphite); letter-spacing: 0.02em; }
.fs-pay__plot { --p: 18%; --c: 54%; --w: calc(var(--c) - var(--p) - 2%); position: relative; }
.fs-pay__cut { position: absolute; left: var(--c); top: -1.4rem; bottom: 0; border-left: 1.5px dashed var(--cobalt); z-index: 1; pointer-events: none; }
.fs-pay__cut span { position: absolute; top: -0.25rem; left: 0.4rem; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cobalt-ink); white-space: nowrap; }
.fs-pay__row + .fs-pay__row { margin-top: 1.25rem; }
.fs-pay__rowlabel { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); margin-bottom: 0.45rem; }
.fs-pay__track { position: relative; height: 58px; }
.fs-pay__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule-strong); }
.fs-seg {
  position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.1rem;
  padding: 0 0.85rem; overflow: hidden; white-space: nowrap; border-radius: 2px;
  font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease-out) var(--sd, 0s);
}
.fs-pay.is-in .fs-seg { transform: none; }
.fs-seg .num { font-size: 1rem; letter-spacing: 0; text-transform: none; font-weight: 500; }
.fs-seg--now { left: var(--p); width: var(--w); background: var(--cobalt); color: #fff; --sd: 0.2s; }
.fs-seg--after { left: calc(var(--c) + 0.6%); width: var(--w); background: var(--ink); color: var(--paper); --sd: 0.6s; }
.fs-seg--before { left: var(--p); width: calc(var(--c) - var(--p) - 0.6%); border: 1px dashed var(--rule-strong); color: var(--graphite); background: var(--card); --sd: 0.4s; }
.fs-seg--monthly {
  left: calc(var(--c) + 0.6%); right: 0; color: var(--cobalt-ink); border: 1px solid var(--cobalt-line);
  background: repeating-linear-gradient(90deg, var(--cobalt-tint) 0 calc(20% - 1px), var(--cobalt-line) calc(20% - 1px) 20%), var(--card);
  --sd: 0.9s;
}
.fs-months { display: flex; gap: 0; font-size: 0.6875rem; color: var(--graphite); }
.fs-months i { font-style: normal; width: 20%; min-width: 2.4rem; }

.fs-pay__axis {
  list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid;
  grid-template-columns: var(--p) calc(var(--c) - var(--p)) minmax(0, 1fr);
  border-top: 1px solid var(--ink);
}
.fs-pay__ev { position: relative; padding: 1rem 1.25rem 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--ink-2); }
.fs-pay__ev::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); }
.fs-pay__ev--buy::before { background: var(--cobalt); border-color: var(--cobalt); }
.fs-pay__ev--cut::before { background: var(--ink); }
.fs-pay__ev b { display: block; font-family: var(--f-display); font-variation-settings: "opsz" 36; font-weight: 500; font-size: 1.1rem; color: var(--ink); margin-bottom: 0.2rem; }

/* ---------- P-02: packages ---------- */
.fs-pkg-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.fs-ruler { position: relative; }
.fs-ruler__cap { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); margin-bottom: 0.6rem; }
.fs-ruler__bar { position: relative; height: 54px; border: 1px solid var(--ink); background: var(--card); }
.fs-ruler__seg { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); display: flex; flex-direction: column; justify-content: center; padding: 0 0.7rem; border-right: 1px solid var(--ink); overflow: hidden; }
.fs-ruler__seg:last-child { border-right: 0; }
.fs-ruler__seg b { font-weight: 600; font-size: 0.875rem; line-height: 1.2; }
.fs-ruler__seg i { font-style: normal; font-family: var(--f-mono); font-size: 0.6875rem; color: var(--graphite); }
.fs-ruler__seg.is-f { background: var(--cobalt-tint); }
.fs-ruler__seg.is-f b { color: var(--cobalt-ink); }
.fs-ruler__ticks { position: relative; height: 1.4rem; }
.fs-ruler__ticks span { position: absolute; top: 0; left: var(--x); transform: translateX(-50%); padding-top: 0.45rem; font-family: var(--f-mono); font-size: 0.6875rem; color: var(--graphite); }
.fs-ruler__ticks span::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 6px; background: var(--ink); }
.fs-ruler__ticks span:first-child { transform: none; }
.fs-ruler__ticks span:first-child::before { left: 0; }
.fs-ruler__ticks span:last-child { transform: translateX(-100%); }
.fs-ruler__ticks span:last-child::before { left: auto; right: 0; }

.fs-pkgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); align-items: stretch; }
.fs-pkg {
  position: relative; display: flex; flex-direction: column; gap: 0.85rem;
  padding: clamp(1.4rem, 2.4vw, 2rem); background: var(--card); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  transition: box-shadow 0.4s var(--ease-out), border-color 0.3s;
}
.fs-pkg:hover { border-color: var(--ink); box-shadow: 0 28px 50px -38px rgba(21, 24, 29, 0.55); }
.fs-pkg__top { display: flex; justify-content: space-between; align-items: center; min-height: 26px; }
.fs-pkg__code { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--graphite); }
.fs-pkg__size { font-family: var(--f-mono); font-size: 0.8125rem; color: var(--ink-2); letter-spacing: 0.02em; }
.fs-pkg__size b { font-weight: 500; color: var(--ink); }
.fs-pkg__scale { position: relative; height: 6px; background: repeating-linear-gradient(90deg, var(--rule-strong) 0 1px, transparent 1px calc(100% / 6)); border-bottom: 1px solid var(--rule-strong); }
.fs-pkg__scale span { position: absolute; top: 0; bottom: -1px; left: var(--l); width: var(--w); background: var(--cobalt); }
.fs-pkg__price { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 0.4rem; }
.fs-amt { font-family: var(--f-display); font-variation-settings: "opsz" 144, "SOFT" 30; font-weight: 380; font-size: clamp(2.6rem, 2rem + 2vw, 3.5rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: lining-nums; }
.fs-pkg__price small { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }
.fs-pkg__split { font-family: var(--f-mono); font-size: 0.75rem; color: var(--graphite); padding-bottom: 0.85rem; border-bottom: 1px solid var(--rule); }
.fs-pkg__sum { color: var(--ink-2); font-size: 0.975rem; }
.fs-pkg .checklist { font-size: 0.925rem; margin-bottom: 0.5rem; }
.fs-pkg .btn { margin-top: auto; }

/* "Most offices": a quiet note on the sheet, not a highlighted tier */
.fs-pkg--featured { border-top: 2px solid var(--ink); }
.fs-pkg__most { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }
.fs-pkg__wl { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); margin-bottom: -0.35rem; }
.fs-micro { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }

.fs-note-strip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: baseline; margin-top: clamp(2rem, 4vw, 3rem); padding: 1.1rem 0; border-block: 1px dashed var(--rule-strong); }
.fs-note-strip__k { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.2rem 0.5rem; border: 1px solid var(--ink); }
.fs-note-strip p { color: var(--ink-2); }
.fs-note-strip .link-arrow { margin-left: 0.35rem; white-space: nowrap; }

/* ---------- P-03: Operation fee ---------- */
.fs-tone-2 { background: var(--paper-2); }
.fs-plan { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.fs-plan__list { font-size: 1rem; }
.fs-aside { font-size: 0.9rem; color: var(--graphite); padding-left: 1rem; border-left: 2px solid var(--rule-strong); max-width: 46ch; }

.fs-calc { background: var(--card); border: 1px solid var(--ink); box-shadow: 10px 10px 0 var(--paper-3); }
.fs-calc__body { padding: clamp(1.1rem, 2.5vw, 1.75rem); }
.fs-calc__input { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.fs-calc__label { font-weight: 500; font-size: 0.95rem; padding-bottom: 0.6rem; }
.fs-calc__people { font-family: var(--f-display); font-variation-settings: "opsz" 144; font-weight: 380; font-size: clamp(3rem, 2.4rem + 2vw, 4rem); line-height: 1; color: var(--cobalt); letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; }
.fs-calc__scale { position: relative; height: 1.1rem; margin-top: -0.35rem; }
.fs-calc__scale span { position: absolute; top: 0; left: calc(var(--v) * (100% - 26px) + 13px); transform: translateX(-50%); font-family: var(--f-mono); font-size: 0.6875rem; color: var(--graphite); }

.fs-calc__chart { position: relative; margin: 1.25rem 0 0; padding: 0.75rem 0 0; border-top: 1px dashed var(--rule); }
.fs-calc__chart svg { width: 100%; height: 110px; overflow: visible; }
.fs-calc__chart rect { transition: fill 0.25s, opacity 0.25s; }
.fs-calc__chart .b-min { fill: var(--paper-3); }
.fs-calc__chart .b-per { fill: var(--cobalt-line); }
.fs-calc__chart .is-you { fill: var(--cobalt); }
.fs-calc__chart .b-min.is-you { fill: var(--rust); }
.fs-calc__chart .minline { stroke: var(--rust); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.fs-calc__chart .base { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fs-calc__minlabel { position: absolute; left: 0; transform: translateY(-120%); font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rust); background: var(--card); padding-right: 0.4rem; }
.fs-calc__legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.6rem; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--graphite); }
.fs-lg::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 0.4rem; vertical-align: -1px; }
.fs-lg--min::before { background: var(--paper-3); }
.fs-lg--per::before { background: var(--cobalt-line); }
.fs-lg--you::before { background: var(--cobalt); }

.fs-calc__ledger { margin: 1.25rem 0 0; }
.fs-calc__line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px dotted var(--rule-strong); }
.fs-calc__line dt { font-size: 0.925rem; color: var(--ink-2); }
.fs-calc__line dt small { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); margin-left: 0.3rem; }
.fs-calc__line dd { margin: 0; white-space: nowrap; }
.fs-calc__line dd .num { font-size: 1rem; font-weight: 500; }
.fs-calc__line--main { border-bottom: 0; padding-bottom: 0.2rem; }
.fs-calc__line--main dt { font-weight: 600; color: var(--ink); }
.fs-calc__line--main dd .num { font-family: var(--f-display); font-variation-settings: "opsz" 144; font-weight: 400; font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3rem); letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; }
.fs-calc__line--main dd small { font-family: var(--f-mono); font-size: 0.75rem; color: var(--graphite); margin-left: 0.25rem; }
.fs-calc__formula { font-family: var(--f-mono); font-size: 0.75rem; color: var(--graphite); padding-bottom: 0.8rem; border-bottom: 1px dotted var(--rule-strong); min-height: 2.2em; }
.fs-calc__formula.is-min { color: var(--rust); }
.fs-calc__line--sub dt { color: var(--graphite); }
.fs-calc__line--total { border-top: 2px solid var(--ink); border-bottom: 0; margin-top: 0.4rem; }
.fs-calc__line--total dt { font-weight: 600; color: var(--ink); }
.fs-calc__line--total dd .num { font-family: var(--f-display); font-variation-settings: "opsz" 72; font-size: 1.6rem; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.fs-calc__fine { font-size: 0.8125rem; line-height: 1.55; color: var(--graphite); margin-top: 0.4rem; }
.fs-calc__fine b { color: var(--ink); font-weight: 600; }

/* ---------- P-04: not in the price (night) ---------- */
.fs-out { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.fs-dnote { padding: 1.5rem 0; border-top: 1px solid var(--night-rule); }
.fs-dnote:first-child { border-top: 0; padding-top: 0; }
.fs-dnote__no { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
.fs-dnote .h4 { margin: 0.35rem 0 0.55rem; color: var(--night-text); }
.fs-dnote p { color: var(--night-muted); max-width: 52ch; }
.theme-night .checklist--x li { color: var(--night-text); }
.theme-night .checklist--x li svg { color: var(--rust-light); }

.fs-scope {
  position: relative; margin: 0; display: grid; gap: 1.5rem 2rem;
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "in side" "out out";
  padding: 2.25rem 1.5rem 3.25rem; border: 1px solid var(--night-rule);
  background-image: linear-gradient(rgba(236,233,225,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(236,233,225,.04) 1px, transparent 1px);
  background-size: 24px 24px;
}
.fs-scope__tag { position: absolute; top: -0.65rem; left: 0.9rem; padding: 0 0.45rem; background: var(--night); font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cobalt-light); white-space: nowrap; }
.fs-scope__tag--dash { color: var(--night-muted); }
.fs-scope__tag--rust { color: var(--rust-light); }
.fs-scope__boundary { grid-area: in; position: relative; padding: 1.6rem 1.1rem 1.1rem; border: 1.5px solid var(--cobalt-light); border-radius: 4px; }
.fs-scope__in { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.fs-scope__in li { padding: 0.6rem 0.65rem; border: 1px solid rgba(154, 166, 255, 0.35); background: rgba(154, 166, 255, 0.06); font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--night-text); }
.fs-scope__in li b { display: block; font-weight: 500; font-size: 0.6875rem; color: var(--cobalt-light); margin-bottom: 0.2rem; }
.fs-scope__in li small { display: block; margin-top: 0.2rem; font-size: 0.6875rem; color: var(--night-muted); letter-spacing: 0; }
.fs-scope__ms { display: block; margin-top: 0.9rem; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--night-muted); }
.fs-scope__side { grid-area: side; position: relative; align-self: center; padding: 1.4rem 1rem 1rem; border: 1.5px dashed rgba(236, 233, 225, 0.35); border-radius: 4px; max-width: 11rem; }
.fs-scope__side::before { content: ""; position: absolute; right: 100%; top: 50%; width: 2rem; border-top: 1.5px dashed rgba(236, 233, 225, 0.35); }
.fs-scope__side p { font-size: 0.9rem; color: var(--night-text); }
.fs-scope__outside { grid-area: out; position: relative; padding: 1.5rem 1rem 1rem; border: 1.5px dashed rgba(229, 138, 87, 0.55); border-radius: 4px; }
.fs-scope__outside ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.fs-scope__outside li { font-family: var(--f-mono); font-size: 0.75rem; color: var(--night-muted); }
.fs-scope__outside li::before { content: "\00D7"; color: var(--rust-light); margin-right: 0.4rem; font-size: 0.9rem; }
.fs-scope__cap { position: absolute; right: 1.25rem; bottom: 0.9rem; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--night-muted); }

/* ---------- Ledger tables (P-05 comparison, H-09 duties) ---------- */
.fs-cmp-intro { margin-bottom: clamp(2rem, 4vw, 3rem); }
.fs-cmp-wrap { border: 1px solid var(--ink); background: var(--card); box-shadow: 10px 10px 0 var(--paper-2); }
.fs-cmp { width: 100%; border-collapse: collapse; }
.fs-cmp th, .fs-cmp td { text-align: left; vertical-align: top; padding: 1rem 1.15rem; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); font-size: 0.925rem; line-height: 1.5; }
.fs-cmp tr > :last-child { border-right: 0; }
.fs-cmp tbody tr:last-child > * { border-bottom: 0; }
.fs-cmp thead th { vertical-align: bottom; background: var(--paper-2); border-bottom: 1px solid var(--ink); font-weight: 600; font-size: 0.95rem; }
.fs-cmp tbody th { font-weight: 500; width: 22%; color: var(--ink); }
.fs-cmp td { color: var(--ink-2); }
.fs-cmp td.is-us { background: var(--cobalt-tint); color: var(--ink); }
.fs-cmp thead th.is-us { background: var(--ink); color: var(--paper); }
.fs-cmp__us { font-family: var(--f-display); font-variation-settings: "opsz" 48; font-weight: 500; font-size: 1.35rem; }
.fs-cmp__no { display: block; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--graphite); margin-bottom: 0.2rem; font-weight: 400; }
.fs-mark { display: block; width: fit-content; margin-bottom: 0.45rem; padding: 0.15em 0.5em; border: 1px solid currentColor; border-radius: 2px; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; }
.fs-mark--yes { color: var(--ok); background: var(--ok-tint); }
.fs-mark--mid { color: var(--graphite); }
.fs-mark--no { color: var(--rust); background: var(--rust-tint); }
.hw-duties tbody th { width: 18%; }

/* ---------- P-06: FAQ ---------- */
.fs-faq-grid { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.6fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.fs-faq-side .body-lg { font-size: 1rem; }

/* ---------- CTA sheet ---------- */
.fs-cta__inner { position: relative; max-width: 900px; }
.fs-cta__inner .display { max-width: 13ch; }
.fs-cta__stamp { position: absolute; right: -8rem; top: 2rem; }

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */
.hw-hero__grid { align-items: end; }
.hw-hero__line { max-width: 46ch; }

.hw-index { background: var(--card); border: 1px solid var(--ink); box-shadow: 10px 10px 0 var(--paper-3); }
.hw-index ol { list-style: none; margin: 0; padding: 0; }
.hw-index li + li { border-top: 1px solid var(--rule); }
.hw-index a { display: flex; gap: 1rem; align-items: baseline; padding: 0.6rem 1.1rem; text-decoration: none; font-size: 0.95rem; transition: background 0.2s, color 0.2s; }
.hw-index a .num { font-size: 0.75rem; color: var(--graphite); min-width: 2.6rem; }
.hw-index a:hover { background: var(--cobalt-tint); color: var(--cobalt-ink); }

.hw-route { list-style: none; padding: 0; margin: clamp(3.5rem, 7vw, 5.5rem) 0 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hw-route li { position: relative; border-top: 1px solid var(--ink); }
.hw-route a { position: relative; display: grid; gap: 0.15rem; padding: 1.3rem 1rem 0.4rem 0; text-decoration: none; }
.hw-route a::before { content: ""; position: absolute; top: -7px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); transition: background 0.25s, transform 0.3s var(--ease-out); }
.hw-route a:hover::before, .hw-route a:focus-visible::before { background: var(--cobalt); border-color: var(--cobalt); transform: scale(1.25); }
.hw-route__n { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--graphite); }
.hw-route__t { font-family: var(--f-display); font-variation-settings: "opsz" 48; font-weight: 500; font-size: 1.3rem; line-height: 1.2; }
.hw-route__s { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--graphite); }
.hw-route a:hover .hw-route__t { color: var(--cobalt-ink); }

/* Timeline + rail */
.hw-timeline { position: relative; }
.hw-rail { position: absolute; top: 0; bottom: 0; left: calc(max(0px, (100% - var(--wrap)) / 2) + var(--gutter) / 2); width: 1px; background: var(--rule-strong); z-index: 2; }
.hw-rail__fill { position: absolute; top: 0; left: -0.5px; width: 2px; height: 100%; background: var(--cobalt); transform-origin: 0 0; transform: scaleY(var(--p, 0)); }

.hw-step { position: relative; padding-block: clamp(4.5rem, 9vw, 8rem); border-top: 1px solid var(--rule-strong); }
.hw-step:nth-of-type(even) { background: rgba(233, 229, 218, 0.45); }
.hw-step::before {
  content: ""; position: absolute; z-index: 3; top: clamp(4.5rem, 9vw, 8rem); margin-top: 20px;
  left: calc(max(0px, (100% - var(--wrap)) / 2) + var(--gutter) / 2 - 6px);
  width: 13px; height: 13px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink);
  transition: background 0.3s, border-color 0.3s, transform 0.4s var(--ease-out);
}
.hw-step.is-active::before { background: var(--cobalt); border-color: var(--cobalt); transform: scale(1.2); }

.hw-step__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.hw-step--flip .hw-step__copy { order: 2; }
.hw-step__head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hw-step .h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3.1rem); }
.hw-step .body-lg { font-size: 1.0625rem; }

.hw-duty { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-inline: 0; margin-bottom: 0; border-top: 1px solid var(--ink); }
.hw-duty > div { padding-top: 0.9rem; }
.hw-duty dt { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); margin-bottom: 0.3rem; }
.hw-duty > div:last-child dt { color: var(--cobalt-ink); }
.hw-duty dd { margin: 0; font-size: 0.925rem; line-height: 1.55; color: var(--ink-2); }
.hw-caption { font-size: 1rem; line-height: 1.55; padding-left: 0.9rem; border-left: 2px solid var(--cobalt); color: var(--ink-2); max-width: 48ch; }
.hw-caption b { color: var(--ink); font-weight: 600; }

/* ---------- Mock frames ---------- */
.hw-mock {
  position: relative; margin: 0; background: var(--card); border: 1px solid var(--ink); border-radius: 6px; overflow: hidden;
  box-shadow: 0 40px 70px -50px rgba(21, 24, 29, 0.55), 10px 10px 0 var(--paper-3);
  font-size: 0.875rem; min-width: 0;
}
.hw-mock__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.6rem 0.9rem;
  background: var(--paper-2); border-bottom: 1px solid var(--rule-strong);
  font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
}
.hw-mock__bar > span:first-child { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.hw-ill { flex: none; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.15rem 0.4rem; border: 1px dashed var(--rule-strong); color: var(--graphite); border-radius: 2px; }
.hw-live { width: 7px; height: 7px; border-radius: 50%; background: #2E9E62; box-shadow: 0 0 0 3px rgba(46, 158, 98, 0.18); animation: hwPulse 2s ease-in-out infinite; }
@keyframes hwPulse { 50% { box-shadow: 0 0 0 6px rgba(46, 158, 98, 0); } }

/* 01 — map */
.hw-map__panes { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.9rem; padding: 1.6rem 1.2rem 1.2rem; }
.hw-map__pane { position: relative; padding: 1.25rem 0.9rem 0.8rem; border: 1px solid; border-radius: 3px; }
.hw-map__pane--old { border-color: rgba(177, 74, 22, 0.45); color: var(--rust); background: var(--rust-tint); }
.hw-map__pane--new { border-color: rgba(43, 63, 224, 0.4); color: var(--cobalt); background: var(--cobalt-tint); }
.hw-map__tag { position: absolute; top: -0.6rem; left: 0.7rem; padding: 0 0.35rem; background: var(--card); font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; }
.hw-map__pict { width: 100%; height: 64px; margin-bottom: 0.5rem; }
.hw-map__pane ul { list-style: none; padding: 0; margin: 0; }
.hw-map__pane li { padding: 0.32rem 0; border-top: 1px dashed var(--rule); font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.02em; color: var(--ink-2); opacity: 0; transform: translateY(4px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.hw-map.is-live li { opacity: 1; transform: none; }
.hw-map__pane--old li:nth-child(2) { transition-delay: 0.1s; } .hw-map__pane--old li:nth-child(3) { transition-delay: 0.2s; } .hw-map__pane--old li:nth-child(4) { transition-delay: 0.3s; }
.hw-map__pane--new li:nth-child(1) { transition-delay: 0.7s; } .hw-map__pane--new li:nth-child(2) { transition-delay: 0.8s; } .hw-map__pane--new li:nth-child(3) { transition-delay: 0.9s; } .hw-map__pane--new li:nth-child(4) { transition-delay: 1s; } .hw-map__pane--new li:nth-child(5) { transition-delay: 1.1s; } .hw-map__pane--new li:nth-child(6) { transition-delay: 1.2s; }
.hw-map__pane li b { font-weight: 500; color: var(--cobalt); margin-right: 0.45rem; }
.hw-map__layers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.6rem; }
.hw-map__arrow { align-self: center; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ink); color: var(--cobalt); background: var(--card); }
.hw-map__tb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--ink); }
.hw-map__tb > div { padding: 0.75rem 0.9rem; border-right: 1px solid var(--rule); opacity: 0; transition: opacity 0.6s var(--ease-out); }
.hw-map__tb > div:last-child { border-right: 0; }
.hw-map.is-live .hw-map__tb > div { opacity: 1; }
.hw-map__tb > div:nth-child(1) { transition-delay: 1.3s; } .hw-map__tb > div:nth-child(2) { transition-delay: 1.45s; } .hw-map__tb > div:nth-child(3) { transition-delay: 1.6s; } .hw-map__tb > div:nth-child(4) { transition-delay: 1.75s; }
.hw-map__tb dt { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); }
.hw-map__tb dd { margin: 0.15rem 0 0; font-family: var(--f-display); font-variation-settings: "opsz" 36; font-size: 1.15rem; font-weight: 500; }
.hw-map__tb dd.num { font-family: var(--f-mono); font-size: 1rem; }

/* 02 — approve & pay */
.hw-pay__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; padding: 1.1rem; }
.hw-pay__row { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.8rem; border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--paper); font-size: 0.8125rem; line-height: 1.4; }
.hw-pay__row + .hw-pay__row { margin-top: 0.5rem; }
.hw-pay__perm { justify-content: space-between; flex-wrap: wrap; }
.hw-pay__k { font-weight: 500; }
.hw-check { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--ink-2); border-radius: 3px; color: #fff; transition: background 0.3s 0.4s, border-color 0.3s 0.4s; }
.hw-check svg { width: 14px; height: 14px; }
.hw-check path { stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset 0.5s var(--ease-out) 0.5s; }
.hw-pay.is-live .hw-check { background: var(--cobalt); border-color: var(--cobalt); }
.hw-pay.is-live .hw-check path { stroke-dashoffset: 0; }
.hw-pill { display: inline-grid; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 0.25rem 0.6rem; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); background: var(--card); transition: background 0.4s 1.3s, color 0.4s 1.3s, border-color 0.4s 1.3s; }
.hw-pill > span { grid-area: 1 / 1; transition: opacity 0.4s 1.3s; text-align: center; }
.hw-pill__b { opacity: 0; }
.hw-pay.is-live .hw-pill { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.hw-pay.is-live .hw-pill__a { opacity: 0; }
.hw-pay.is-live .hw-pill__b { opacity: 1; }
.hw-pay__split { display: grid; grid-template-columns: 1fr 1fr; margin-top: 0.7rem; border: 1px solid var(--ink); border-radius: 3px; overflow: hidden; }
.hw-pay__seg { display: grid; gap: 0.1rem; padding: 0.6rem 0.75rem; }
.hw-pay__seg span { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; }
.hw-pay__seg b { font-family: var(--f-display); font-variation-settings: "opsz" 36; font-weight: 500; font-size: 1.2rem; }
.hw-pay__seg--now { color: #fff; background: linear-gradient(var(--cobalt), var(--cobalt)) 0 0 / 0% 100% no-repeat, var(--cobalt-ink); transition: background-size 0.9s var(--ease-out) 1.9s; }
.hw-pay.is-live .hw-pay__seg--now { background-size: 100% 100%, auto; }
.hw-pay__seg--after { color: var(--ink-2); border-left: 1px solid var(--ink); background: repeating-linear-gradient(-45deg, var(--rule) 0 1px, transparent 1px 7px), var(--card); }
.hw-pay__btn { display: block; margin-top: 0.7rem; padding: 0.65rem; border-radius: 3px; text-align: center; background: var(--ink); color: var(--paper); font-weight: 500; font-size: 0.8125rem; }
.hw-pay__fine { display: block; margin-top: 0.4rem; text-align: center; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--graphite); }
.hw-cal { padding: 0.75rem; border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--paper); align-self: start; }
.hw-cal__head { display: flex; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.55rem; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; }
.hw-cal__head span:last-child { color: var(--graphite); }
.hw-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.hw-cal__grid span { display: grid; place-items: center; aspect-ratio: 1; font-family: var(--f-mono); font-size: 0.6875rem; color: var(--ink-2); border-radius: 50%; }
.hw-cal__grid .dow { aspect-ratio: auto; padding-bottom: 0.2rem; font-size: 0.6875rem; color: var(--graphite); border-radius: 0; }
.hw-cal__grid .we { background: var(--cobalt-tint); color: var(--cobalt-ink); border-radius: 2px; }
.hw-cal__grid .dow.we { background: none; }
.hw-cal__grid .pick { position: relative; background: var(--cobalt); color: #fff; border-radius: 50%; font-weight: 500; transform: scale(0.4); opacity: 0; transition: transform 0.5s var(--ease-out) 2.6s, opacity 0.3s 2.6s; }
.hw-pay.is-live .hw-cal__grid .pick { transform: none; opacity: 1; }
.hw-cal__legend { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.55rem; font-family: var(--f-mono); font-size: 0.6875rem; color: var(--graphite); }
.hw-cal__sw { width: 10px; height: 10px; background: var(--cobalt-tint); border: 1px solid var(--cobalt-line); }

/* 03 — conversion status */
.hw-status__top { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.15rem 0.6rem; }
.hw-status__pct { font-family: var(--f-display); font-variation-settings: "opsz" 72; font-size: 2rem; font-weight: 400; min-width: 4.2ch; color: var(--ink); }
.hw-status__meter { flex: 1; height: 6px; background: var(--paper-3); border-radius: 3px; overflow: hidden; }
.hw-status__meter span { display: block; height: 100%; width: var(--pct, 0%); background: var(--cobalt); transition: width 0.6s var(--ease-out); }
.hw-status.is-done .hw-status__meter span { background: var(--ok); }
.hw-status__list { list-style: none; padding: 0 1.15rem; margin: 0; }
.hw-status__list li { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto 5.2rem; gap: 0.7rem; align-items: center; padding: 0.68rem 0; border-top: 1px dashed var(--rule-strong); }
.hw-status__no { font-size: 0.6875rem; color: var(--graphite); }
.hw-status__name { font-weight: 500; font-size: 0.875rem; color: var(--graphite); transition: color 0.3s; }
.hw-status__list li[data-state="running"] .hw-status__name, .hw-status__list li[data-state="done"] .hw-status__name { color: var(--ink); }
.hw-tested { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.18rem 0.4rem; border: 1px solid var(--cobalt-line); background: var(--cobalt-tint); color: var(--cobalt-ink); border-radius: 2px; white-space: nowrap; }
.hw-state { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.35rem; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }
.hw-state::after { content: "Queued"; }
li[data-state="running"] .hw-state { color: var(--cobalt-ink); }
li[data-state="running"] .hw-state::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--cobalt-line); border-top-color: var(--cobalt); animation: hwSpin 0.8s linear infinite; }
li[data-state="running"] .hw-state::after { content: "Running"; }
li[data-state="done"] .hw-state { color: var(--ok); }
li[data-state="done"] .hw-state::before { content: ""; width: 10px; height: 6px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg) translateY(-2px); }
li[data-state="done"] .hw-state::after { content: "Done"; }
@keyframes hwSpin { to { transform: rotate(360deg); } }
.hw-status__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.15rem 1.15rem; border-top: 1px solid var(--rule); font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }
.hw-status__stamp { background: var(--card); opacity: 0; transform: rotate(-6deg) scale(1.5); transition: opacity 0.35s, transform 0.5s var(--ease-out); }
.hw-status.is-done .hw-status__stamp { opacity: 0.92; transform: rotate(-6deg); }

/* 04 — client panel */
.hw-panel__body { display: grid; grid-template-columns: 7rem minmax(0, 1fr); }
.hw-panel__nav { list-style: none; margin: 0; padding: 0.8rem 0; background: var(--paper); border-right: 1px solid var(--rule); }
.hw-panel__nav li { padding: 0.45rem 0.9rem; font-size: 0.8125rem; color: var(--graphite); }
.hw-panel__nav li.is-on { color: var(--ink); font-weight: 500; background: var(--card); box-shadow: inset 2px 0 0 var(--cobalt); }
.hw-panel__main { padding: 1.1rem 1.15rem 1.15rem; min-width: 0; }
.hw-panel__req { font-family: var(--f-display); font-variation-settings: "opsz" 48; font-size: 1.35rem; font-weight: 500; line-height: 1.2; }
.hw-panel__id { display: block; font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--graphite); margin-bottom: 0.15rem; }
.hw-panel__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin: 0.8rem 0 0; padding-bottom: 0.8rem; border-bottom: 1px solid var(--rule); }
.hw-panel__fields dt { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); }
.hw-panel__fields dd { margin: 0.1rem 0 0; font-size: 0.8125rem; font-weight: 500; }
.hw-panel__plabel { margin-top: 0.8rem; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); }
.hw-diff { list-style: none; padding: 0; margin: 0.45rem 0 0; display: grid; gap: 2px; }
.hw-diff li { padding: 0.36rem 0.6rem; border-left: 2px solid var(--ok); background: var(--ok-tint); font-family: var(--f-mono); font-size: 0.6875rem; color: var(--ink); opacity: 0; transform: translateX(-6px); transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); }
.hw-diff i { font-style: normal; color: var(--ok); margin-right: 0.5rem; font-weight: 500; }
.hw-panel.is-live .hw-diff li { opacity: 1; transform: none; }
.hw-diff li:nth-child(2) { transition-delay: 0.15s; } .hw-diff li:nth-child(3) { transition-delay: 0.3s; } .hw-diff li:nth-child(4) { transition-delay: 0.45s; } .hw-diff li:nth-child(5) { transition-delay: 0.6s; }
.hw-panel__actions { position: relative; display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.9rem; }
.hw-panel__btn { padding: 0.55rem 0.95rem; border-radius: 3px; font-size: 0.8125rem; font-weight: 500; border: 1px solid var(--rule-strong); transition: background 0.3s, transform 0.15s, border-color 0.3s; }
.hw-panel__btn--go { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.hw-panel.is-done .hw-panel__btn--go { background: var(--ok); border-color: var(--ok); }
.hw-panel.is-press .hw-panel__btn--go { transform: scale(0.95); }
.hw-cursor { position: absolute; right: 2.2rem; bottom: -0.4rem; color: var(--ink); opacity: 0; transform: translate(-90px, 50px); pointer-events: none; }
.hw-panel.is-live .hw-cursor { animation: hwCursor 1.3s var(--ease-out) 1.4s forwards; }
@keyframes hwCursor { 0% { opacity: 0; transform: translate(-90px, 50px); } 25% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.hw-panel.is-done .hw-cursor { opacity: 0; transition: opacity 0.4s 1s; }
.hw-panel__state { margin-top: 0.7rem; display: grid; justify-items: end; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; }
.hw-panel__state > span { grid-area: 1 / 1; transition: opacity 0.35s; }
.hw-panel__wait { color: var(--rust); }
.hw-panel__done { color: var(--ok); opacity: 0; }
.hw-panel.is-done .hw-panel__wait { opacity: 0; }
.hw-panel.is-done .hw-panel__done { opacity: 1; }

/* 05 — monitoring */
.hw-mon__route { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; padding: 1rem 1.15rem; border-bottom: 1px dashed var(--rule-strong); }
.hw-mon__src { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.35rem 0.6rem; border: 1px solid var(--amber); color: #8A4A0C; background: rgba(233, 138, 44, 0.12); border-radius: 2px; }
.hw-mon__lines { width: 100%; height: 60px; color: var(--rule-strong); }
.hw-mon__lines path { vector-effect: non-scaling-stroke; }
.hw-mon__pulse { stroke: var(--cobalt); stroke-dasharray: 14 400; stroke-dashoffset: 14; opacity: 0; }
.hw-mon.is-live .hw-mon__pulse { animation: hwRoute 2.6s var(--ease-in-out) 0.4s infinite; }
@keyframes hwRoute { 0% { stroke-dashoffset: 14; opacity: 1; } 70% { stroke-dashoffset: -230; opacity: 1; } 71%, 100% { opacity: 0; stroke-dashoffset: -230; } }
.hw-mon__dst { display: grid; gap: 1rem; }
.hw-mon__dst b { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; padding: 0.3rem 0.6rem; border: 1px solid var(--ink); border-radius: 2px; text-align: center; }
.hw-mon__dst b:first-child { background: var(--ink); color: var(--paper); }
.hw-mon__dst b:last-child { border-color: var(--cobalt); color: var(--cobalt-ink); }
.hw-mon__feed { list-style: none; padding: 0; margin: 0; }
.hw-mon__feed li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.75rem 1.15rem; border-bottom: 1px solid var(--rule); border-left: 3px solid var(--cobalt); opacity: 0; transform: translateY(-6px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.hw-mon__feed li:last-child { border-bottom: 0; }
.hw-mon__feed li.is-warn { border-left-color: var(--amber); }
.hw-mon__feed li.is-ok { border-left-color: var(--ok); }
.hw-mon.is-live .hw-mon__feed li { opacity: 1; transform: none; }
.hw-mon__feed li:nth-child(1) { transition-delay: 0.2s; } .hw-mon__feed li:nth-child(2) { transition-delay: 0.55s; } .hw-mon__feed li:nth-child(3) { transition-delay: 0.9s; } .hw-mon__feed li:nth-child(4) { transition-delay: 1.25s; }
.hw-mon__t { font-size: 0.6875rem; color: var(--graphite); }
.hw-mon__msg { font-weight: 500; font-size: 0.85rem; line-height: 1.35; }
.hw-mon__msg small { display: block; font-weight: 400; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.02em; color: var(--graphite); margin-top: 0.1rem; }
.hw-mon__to { display: flex; gap: 0.3rem; }
.hw-mon__to i { font-style: normal; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.15rem 0.4rem; border: 1px solid var(--rule-strong); border-radius: 2px; color: var(--ink-2); }
.hw-mon__to i:first-child { border-color: var(--ink); }
.hw-mon__to i + i { border-color: var(--cobalt-line); color: var(--cobalt-ink); }

/* 06 — monthly report */
.hw-report { background: transparent; border: 0; box-shadow: none; overflow: visible; padding: 0.5rem 0.75rem 1rem 0; }
.hw-report__sheet {
  position: relative; padding: clamp(1.1rem, 2.4vw, 1.6rem); background: #FBFAF6; border: 1px solid var(--rule-strong);
  box-shadow: 0 40px 70px -50px rgba(21, 24, 29, 0.55), 12px 12px 0 var(--paper-3);
  transform: rotate(-0.8deg);
}
.hw-report__sheet::after { content: ""; position: absolute; top: -1px; right: -1px; width: 28px; height: 28px; background: linear-gradient(225deg, var(--paper) 50%, var(--paper-3) 50%); border-left: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); }
.hw-report__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 0 1.5rem 0.85rem 0; border-bottom: 2px solid var(--ink); }
.hw-report__org { font-family: var(--f-display); font-variation-settings: "opsz" 48; font-size: 1.4rem; font-weight: 500; line-height: 1.2; margin-top: 0.2rem; }
.hw-report__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 1rem; align-items: center; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }
.hw-report__k { font-weight: 500; font-size: 0.875rem; }
.hw-report__v { font-size: 0.875rem; }
.hw-report__bar { grid-column: 1 / -1; height: 4px; background: var(--paper-3); border-radius: 2px; overflow: hidden; }
.hw-report__bar span { display: block; height: 100%; width: var(--w); background: var(--ok); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s var(--ease-out) 0.3s; }
.hw-report.is-live .hw-report__bar span { transform: none; }
.hw-report__changes { grid-column: 1 / -1; list-style: none; padding: 0; margin: 0; }
.hw-report__changes li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.32rem 0; border-top: 1px dashed var(--rule); font-family: var(--f-mono); font-size: 0.6875rem; color: var(--ink-2); }
.hw-report__changes li span:last-child { color: var(--ok); white-space: nowrap; }
.hw-report__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }
.hw-report__stamp { background: #FBFAF6; opacity: 0; transform: rotate(-8deg) scale(1.5); transition: opacity 0.35s 1.3s, transform 0.5s var(--ease-out) 1.3s; }
.hw-report.is-live .hw-report__stamp { opacity: 0.92; transform: rotate(-8deg); }
@media (max-width: 720px) { .hw-report__stamp { transform-origin: 100% 50%; margin-right: 14px; max-width: calc(100% - 14px); } }

/* ---------- H-08: the rule (night) ---------- */
.hw-flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem minmax(0, 1fr) 4.5rem minmax(0, 1fr); align-items: stretch; }
.hw-flow__node { position: relative; display: flex; flex-direction: column; gap: 0.6rem; padding: 1.5rem; background: var(--night-2); border: 1px solid var(--night-rule); border-radius: 4px; opacity: 0.35; transition: opacity 0.6s var(--ease-out), border-color 0.6s; }
.hw-flow.is-live .hw-flow__node { opacity: 1; }
.hw-flow.is-live .hw-flow__node:nth-child(3) { transition-delay: 0.9s; }
.hw-flow.is-live .hw-flow__node:nth-child(5) { transition-delay: 1.8s; }
.hw-flow__node--you { border-color: rgba(233, 138, 44, 0.6); box-shadow: inset 0 0 0 1px rgba(233, 138, 44, 0.25); }
.hw-flow__no { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--night-text); font-size: 0.875rem; }
.hw-flow__node--you .hw-flow__no { border-color: var(--amber); color: var(--amber); }
.hw-flow__node .h4 { font-family: var(--f-display); font-variation-settings: "opsz" 48; font-weight: 500; font-size: 1.5rem; }
.hw-flow__node p { color: var(--night-muted); font-size: 0.95rem; }
.hw-flow__out { margin-top: auto; padding-top: 0.75rem; border-top: 1px dashed var(--night-rule); font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--night-muted); }
.hw-flow__link { position: relative; align-self: center; height: 2px; }
.hw-flow__link span { position: absolute; inset: 0; background: var(--night-rule); overflow: hidden; }
.hw-flow__link span::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--amber) 0 8px, transparent 8px 16px); background-size: 16px 100%; opacity: 0; transition: opacity 0.5s; }
.hw-flow.is-live .hw-flow__link span::after { opacity: 1; animation: hwFlowX 0.9s linear infinite; }
.hw-flow.is-live .hw-flow__link:nth-child(2) span::after { transition-delay: 0.5s; }
.hw-flow.is-live .hw-flow__link:nth-child(4) span::after { transition-delay: 1.4s; }
.hw-flow__link::after { content: ""; position: absolute; right: -1px; top: 50%; width: 8px; height: 8px; border-top: 1.5px solid var(--night-muted); border-right: 1.5px solid var(--night-muted); transform: translateY(-50%) rotate(45deg); }
@keyframes hwFlowX { to { background-position: 16px 0; } }

.hw-never { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--night-rule); }
.hw-never__list { font-size: 1.0125rem; gap: 0.9rem; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fs-seg, .hw-mock *, .hw-flow *, .hw-mon__pulse { transition-delay: 0s !important; animation-delay: 0s !important; }
  .hw-mon__pulse, .hw-flow__link span::after { animation: none !important; }
  .hw-live { animation: none; }
  .hw-cursor { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .fs-cta__stamp { right: 0; top: -1rem; }
  .hw-route { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.5rem; }
}

@media (max-width: 960px) {
  .fs-hero__grid, .fs-pkg-intro, .fs-plan, .fs-out, .fs-faq-grid, .hw-step__grid, .hw-never { grid-template-columns: minmax(0, 1fr); }
  .fs-schedule { max-width: 34rem; }
  .hw-index { max-width: 34rem; }
  .fs-pkgs { grid-template-columns: minmax(0, 1fr); max-width: 34rem; }
  .hw-step--flip .hw-step__copy { order: 0; }
  .hw-flow { grid-template-columns: minmax(0, 1fr); }
  .hw-flow__link { height: 2.5rem; width: 2px; justify-self: start; margin-left: 2.25rem; }
  .hw-flow__link span::after { background: repeating-linear-gradient(180deg, var(--amber) 0 8px, transparent 8px 16px); background-size: 100% 16px; }
  .hw-flow__link::after { right: auto; top: auto; bottom: -1px; left: 50%; transform: translateX(-50%) rotate(135deg); }
  @keyframes hwFlowY { to { background-position: 0 16px; } }
  .hw-flow.is-live .hw-flow__link span::after { animation-name: hwFlowY; }
}

@media (max-width: 760px) {
  /* Ledger tables become stacked records */
  .fs-cmp, .fs-cmp tbody, .fs-cmp tr, .fs-cmp th, .fs-cmp td { display: block; width: 100%; }
  .fs-cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fs-cmp tbody tr { border-bottom: 1px solid var(--ink); }
  .fs-cmp tbody tr:last-child { border-bottom: 0; }
  .fs-cmp tbody th { width: 100%; background: var(--paper-2); border-right: 0; font-size: 1rem; padding: 0.85rem 1rem; }
  .hw-duties tbody th { width: 100%; }
  .fs-cmp td { border-right: 0; padding: 0.75rem 1rem; }
  .fs-cmp tbody tr:last-child > * { border-bottom: 1px solid var(--rule); }
  .fs-cmp tbody tr:last-child > :last-child { border-bottom: 0; }
  .fs-cmp td::before { content: attr(data-col); display: block; margin-bottom: 0.3rem; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); }
  .fs-cmp td.is-us::before { color: var(--cobalt-ink); }
  .fs-mark { display: inline-block; margin: 0 0.5rem 0.25rem 0; }
  .fs-cmp-wrap { box-shadow: 6px 6px 0 var(--paper-2); }
}

@media (max-width: 720px) {
  .fs-hero { padding-top: calc(var(--nav-h) + 2.25rem); }
  .fs-schedule__stamp { right: 0.25rem; top: -2.6rem; }
  .fs-calc .btn { text-align: center; }
  .fs-schedule, .fs-calc, .hw-index { box-shadow: 6px 6px 0 var(--paper-3); }
  .fs-pay__plot { --p: 0%; --c: 50%; --w: 48%; }
  .fs-pay__ev--diag { display: none; }
  .fs-pay__axis { grid-template-columns: 50% minmax(0, 1fr); }
  .fs-pay__ev--cut { padding-left: 0.6rem; }
  .fs-pay__ev--cut::before { left: -4px; }
  .fs-pay__ev { padding-right: 0.75rem; font-size: 0.8125rem; }
  .fs-seg { padding: 0 0.6rem; font-size: 0.6875rem; }
  .fs-seg .num { font-size: 0.875rem; }
  .fs-months i { min-width: 1.9rem; }
  .fs-pay__cut span { left: 0.3rem; }
  .fs-note-strip { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .fs-note-strip__k { justify-self: start; }
  .fs-scope { grid-template-columns: minmax(0, 1fr); grid-template-areas: "in" "side" "out"; padding: 2rem 1rem 3rem; }
  .fs-scope__side { max-width: none; }
  .fs-scope__side::before { right: auto; left: 1.5rem; top: auto; bottom: 100%; width: 0; height: 1.5rem; border-top: 0; border-left: 1.5px dashed rgba(236, 233, 225, 0.35); }
  .fs-scope__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-cta__stamp { position: static; margin-top: 2.5rem; }
  .hw-rail, .hw-step::before { display: none; }
  .hw-route { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-route__t { font-size: 1.125rem; }
  .hw-map__tb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-map__tb > div:nth-child(2) { border-right: 0; }
  .hw-map__tb > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .hw-pay__grid { grid-template-columns: minmax(0, 1fr); }
  .hw-cal { max-width: 20rem; }
  .hw-report__sheet { transform: none; }
  .hw-report { padding-right: 0.5rem; }
}

@media (max-width: 480px) {
  .fs-hero__facts li { padding-right: 1rem; margin-right: 1rem; }
  .hw-map__panes { grid-template-columns: minmax(0, 1fr); padding: 1.4rem 1rem 1rem; }
  .hw-map__arrow { justify-self: center; transform: rotate(90deg); }
  .hw-status__list li { grid-template-columns: 1.6rem minmax(0, 1fr) auto; row-gap: 0.3rem; }
  .hw-status__list .hw-tested { grid-column: 2; grid-row: 2; justify-self: start; }
  .hw-status__list .hw-state { grid-column: 3; grid-row: 1; }
  .hw-panel__body { grid-template-columns: minmax(0, 1fr); }
  .hw-panel__nav { display: flex; overflow: hidden; padding: 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .hw-panel__nav li { padding: 0.55rem 0.75rem; }
  .hw-panel__nav li.is-on { box-shadow: inset 0 -2px 0 var(--cobalt); }
  .hw-panel__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-mon__feed li { grid-template-columns: 2.6rem minmax(0, 1fr); row-gap: 0.4rem; }
  .hw-mon__to { grid-column: 2; }
  .hw-duty { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fs-scope__in li { font-size: 0.6875rem; padding: 0.5rem; }
}

/* ---------- Rev. C: every-move list, three ways in, servers input ---------- */
.fs-every { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.4rem; border-top: 1px solid var(--rule-strong); }
.fs-every .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
.fs-doors { margin-top: clamp(2.5rem, 5vw, 4rem); }
.fs-doors .h3 em { font-style: italic; color: var(--cobalt); }
.fs-doors__who { display: block; margin-top: 0.4rem; font-weight: 400; font-size: 0.85rem; color: var(--graphite); line-height: 1.45; }
.fs-doors__table td small { color: var(--graphite); font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; }
@media (min-width: 761px) {
  .fs-doors__table tbody th { width: 24%; }
  .fs-doors__table td:nth-child(3) { width: 11rem; }
  .fs-doors__table td:nth-child(4) { width: 15rem; }
}
.fs-doors__fee { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.fs-doors__fee + .fs-doors__fee { margin-top: 0.2rem; }
.fs-doors__fee .num { color: var(--ink); font-weight: 500; }
.fs-doors__note { display: block; margin-top: 0.45rem; }
.fs-calc__input--sm .fs-calc__people { font-size: clamp(2rem, 1.7rem + 1vw, 2.6rem); }
@media (max-width: 760px) {
  .fs-every .checklist { grid-template-columns: minmax(0, 1fr); }
}