/* ============================================================================
   SENTINEL COST CALCULATOR — /resources/sentinel-cost-calculator/
   Loaded by that route alone, via `pageCss` in layouts/base.njk. See the note
   there for why this is not appended to home.css.

   EVERY COLOUR, FONT, RADIUS AND SHADOW HERE IS A TOKEN FROM main.css. Nothing
   below invents a value: a tool page that drifts half a shade from the rest of
   the site is the thing visitors notice without being able to name. The two
   exceptions are both documented where they appear.

   The ink tiers matter and are easy to get wrong — see the long note in
   main.css section 1. --fg-mut is the smallest text allowed on light;
   --fg-faint is DECORATION ONLY and never carries type.

   Everything is prefixed .sc- and nothing is declared bare that main.css or
   home.css also declares. `npm run css:check` enforces it; this file is
   registered in the `public` bundle there.

   Sections: 1 Shell · 2 Controls · 3 Sources · 4 Servers · 5 Results
             6 Gate · 7 Explainer · 8 Print · 9 Responsive
             10 Modes, steps, Analyse, Optimisation, chart, summary
   ============================================================================ */

/* ---------- 1. SHELL ---------- */

.sc-hero .sub{max-width:660px}

.sc-sec{padding-top:clamp(36px,5vw,64px)}

/* ---- THE TOOL IS WIDER THAN THE REST OF THE SITE, deliberately ----
   Adam, 9 Oct 2026: "lets make the calculator wider than the menu, even at
   1920x1080 there is plenty of room either side".

   --wrap is 1240px and that is the right measure for PROSE: a service page is
   paragraphs, and a line of text past about 75 characters is harder to read,
   not easier. This is not prose. It is a three-column tool — inputs, a flow
   diagram and a sticky results panel — and at 1240 the diagram was 760px wide
   inside a 500px column and had to grow its own horizontal scrollbar. A
   scrollbar inside a page that is already two thirds empty either side is the
   layout admitting it got the measure wrong.

   ONLY THIS SECTION WIDENS. The hero, the explainer, the FAQ and the CTA keep
   --wrap, because they ARE prose and because a page whose every band is a
   different width reads as broken rather than as spacious. The header stays
   narrower too — the tool overhanging the menu is the point, not an accident.

   The ceiling is 1680 rather than none: past that the inputs column gets wide
   enough that the eye loses the line between a control and its label, and the
   results panel ends up a long way from what it is describing. */
.sc-sec>.wrap{max-width:min(1680px,calc(100vw - 48px))}

.sc-bar{
  display:flex;gap:20px;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;margin:0 0 26px;padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.sc-h{font-family:var(--display);font-size:clamp(22px,2.4vw,30px);font-weight:700;color:var(--ink);margin:0}
.sc-sub{color:var(--fg-mut);font-size:13.5px;margin:6px 0 0;max-width:62ch;line-height:1.5}
.sc-bar-l{min-width:0}
.sc-bar-r{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.sc-cur{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;background:var(--paper)}
.sc-cur button{
  font-family:var(--display);font-weight:700;font-size:14px;
  padding:7px 15px;border:0;background:transparent;color:var(--fg-mut);cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.sc-cur button.is-on{background:var(--red);color:#fff}

.sc-act{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--display);font-weight:600;font-size:13px;color:var(--fg);
  padding:8px 14px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--paper);cursor:pointer;
  transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease);
}
.sc-act svg{width:15px;height:15px;flex:none}
.sc-act:hover{border-color:var(--red);color:var(--red)}
/* The confirmed state is a COLOUR ONLY; the label is swapped in JavaScript.
   It was `content:'ed'` appended to the label, which turns "Copy link" into
   "Copy linked" rather than "Copied" — cute, and wrong in the one place the
   user is checking that something happened. */
.sc-act.is-done{border-color:var(--green-ink);color:var(--green-ink)}

.sc-unlocked{
  display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--green-ink);
  border-radius:var(--radius-sm);padding:14px 18px;margin:0 0 24px;box-shadow:var(--shadow-sm);
}
.sc-unlocked .k{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--green-ink);
}
.sc-unlocked p{margin:0;color:var(--fg);font-size:14.5px}

/* The two-column tool. The results column is sticky on desktop because the
   whole point of a calculator is watching the number move while you change an
   input — if the total scrolls away, every change costs a scroll up and back. */
.sc{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:30px;align-items:start}
.sc-inputs{display:grid;gap:20px;min-width:0}
/* Declared ONCE, here, including its dark surface. It was two rules a hundred
   and seventy lines apart until `npm run css:check` named it — the exact
   shape the .rec and .stat collisions took, and the reason that check exists.

   STICKY ALONE WAS NOT ENOUGH, and the reason is worth writing down because it
   looks like the property simply not working. `position:sticky` pins the TOP
   EDGE of a box. When the box is TALLER THAN THE VIEWPORT there is no scroll
   range left to pin it through: the top edge is already above the viewport, so
   the panel scrolls out of view exactly like a static one and the feature
   silently does nothing. This panel runs past 1,100px once the line-by-line
   table is in it, which is taller than most laptops.

   So the panel is capped to the viewport and scrolls INSIDE itself, with the
   cost headline pinned to the top of that scroll (below). The result is what
   was wanted: the number is on screen the whole way down the inputs, and the
   detail is still reachable without leaving it.

   ONE SCROLL REGION, NOT TWO. .sc-tablewrap had its own max-height and its own
   scrollbar; nesting that inside this one gives two bars side by side and a
   wheel that stops at an invisible boundary. It is now a plain block and this
   is the only thing that scrolls. */
.sc-sticky{
  position:sticky;top:88px;
  max-height:calc(100vh - 104px);
  overflow-y:auto;
  /* Stops the page lurching once the panel hits its end — the panel is a
     destination, not a passthrough. */
  overscroll-behavior:contain;
  background:var(--dk);border:1px solid var(--dk-line);border-radius:var(--radius);
  box-shadow:var(--shadow);
  /* A default light scrollbar on a near-black card reads as a rendering
     fault. Firefox takes the two-value form; WebKit needs the pseudo-elements
     below. */
  scrollbar-width:thin;
  scrollbar-color:var(--dk-line-2) transparent;
}
.sc-sticky::-webkit-scrollbar{width:10px}
.sc-sticky::-webkit-scrollbar-track{background:transparent}
.sc-sticky::-webkit-scrollbar-thumb{
  background:var(--dk-line-2);border-radius:999px;
  border:3px solid var(--dk);   /* inset, so the thumb reads as a slim pill */
}
.sc-sticky::-webkit-scrollbar-thumb:hover{background:var(--dk-mut)}

.sc-panel{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(18px,2.4vw,26px);box-shadow:var(--shadow-sm);
}
.sc-panel>h3{
  font-family:var(--display);font-size:17px;font-weight:700;color:var(--ink);
  margin:0 0 4px;letter-spacing:-.01em;
}
.sc-panel-sub{color:var(--fg-mut);font-size:13px;line-height:1.55;margin:0 0 18px;max-width:70ch}
.sc-panel-h{display:flex;gap:20px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;margin-bottom:16px}
.sc-panel-h>div:first-child{min-width:0;flex:1 1 320px}
.sc-panel-ctl{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- 2. CONTROLS ---------- */

.sc-field{margin:0 0 20px}
.sc-field:last-child{margin-bottom:0}
.sc-field>label,.sc-lab{
  display:block;font-family:var(--display);font-weight:600;font-size:13.5px;
  color:var(--ink);margin:0 0 8px;
}
.sc-hint{color:var(--fg-mut);font-size:12.5px;line-height:1.5;margin:8px 0 0;max-width:68ch}
.sc-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.sc select,.sc-gate select,.sc input[type=number]{
  width:100%;font-family:var(--body);font-size:14px;color:var(--ink);
  background:var(--mist);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  padding:9px 11px;transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.sc select:focus-visible,.sc-gate select:focus-visible,.sc input[type=number]:focus-visible{
  outline:0;border-color:var(--red);box-shadow:0 0 0 3px var(--red-wash);
}

.sc-slider{display:flex;align-items:center;gap:16px}
.sc-slider input[type=range]{flex:1;min-width:0;accent-color:var(--red);height:22px}
.sc-out{
  font-family:var(--mono);font-weight:700;font-size:17px;color:var(--ink);
  min-width:5.5ch;text-align:right;font-variant-numeric:tabular-nums;
}

.sc-profiles{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.sc-prof{
  display:flex;flex-direction:column;gap:3px;text-align:left;
  padding:11px 12px;border:1px solid var(--line-2);border-radius:var(--radius-sm);
  background:var(--paper);cursor:pointer;
  transition:border-color .16s var(--ease),background .16s var(--ease),box-shadow .16s var(--ease);
}
.sc-prof:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.sc-prof.is-on{border-color:var(--red);background:var(--red-wash);box-shadow:inset 0 0 0 1px var(--red)}
.sc-prof-k{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--red)}
.sc-prof-n{font-family:var(--display);font-weight:700;font-size:14px;color:var(--ink)}
.sc-prof-b{font-size:12px;color:var(--fg-soft);line-height:1.4;margin-top:3px}
.sc-prof-t{font-size:11.5px;color:var(--fg-mut);line-height:1.4;font-style:italic}
.sc-profiles.is-compact{grid-template-columns:repeat(4,1fr)}
.sc-profiles.is-compact .sc-prof{align-items:center;text-align:center;padding:9px 6px}

.sc-check{
  display:flex;gap:11px;align-items:flex-start;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--mist);margin:0 0 9px;cursor:pointer;
  transition:border-color .16s var(--ease);
}
.sc-check:last-child{margin-bottom:0}
.sc-check:hover{border-color:var(--line-2)}
.sc-check input{margin-top:2px;accent-color:var(--red);width:16px;height:16px;flex:none}
.sc-check span{font-size:12.5px;color:var(--fg-soft);line-height:1.5}
.sc-check strong{display:block;font-family:var(--display);font-size:13.5px;color:var(--ink);margin-bottom:2px}

.sc-warn{
  background:var(--red-wash);border:1px solid rgba(195,0,23,.22);border-radius:var(--radius-sm);
  padding:12px 15px;font-size:13px;color:var(--fg);line-height:1.5;margin:0 0 20px;
}
.sc-warn strong{color:var(--red-dk)}

/* ---------- 3. SOURCES ---------- */

.sc-cat{margin:0 0 22px}
.sc-cat:last-child{margin-bottom:0}
.sc-cat-h{margin:0 0 10px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.sc-cat-h h4{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--red);margin:0;
}
.sc-cat-h p{font-size:12.5px;color:var(--fg-mut);margin:5px 0 0;line-height:1.5}

.sc-list{display:grid;gap:8px}

.sc-src{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;background:var(--mist);
  transition:border-color .16s var(--ease),background .16s var(--ease),opacity .16s var(--ease);
}
.sc-src.is-on{background:var(--paper);border-color:var(--line-2)}
.sc-src:not(.is-on){opacity:.62}
.sc-src:not(.is-on) .sc-src-ctl,.sc-src:not(.is-on) .sc-src-note{display:none}

.sc-src-top{display:flex;align-items:center;gap:10px}
.sc-tick{display:flex;align-items:center;gap:9px;cursor:pointer;flex:1;min-width:0}
.sc-tick input{accent-color:var(--red);width:16px;height:16px;flex:none}
.sc-src-name{font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink);line-height:1.3}
.sc-src-gb{
  font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--fg);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.sc-src:not(.is-on) .sc-src-gb{color:var(--fg-mut);font-weight:400}
.sc-src-note{font-size:12px;color:var(--fg-mut);line-height:1.5;margin:7px 0 0;padding-left:25px}

.sc-src-ctl{display:flex;gap:10px;flex-wrap:wrap;margin:11px 0 0;padding-left:25px}
.sc-num,.sc-sel{display:flex;flex-direction:column;gap:4px;min-width:140px}
.sc-num>span,.sc-sel>span{
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-mut);
}
.sc-num input,.sc-sel select{padding:6px 9px;font-size:13px}

/* The "Free" flag. Scoped under .sc so it cannot collide with anything that
   already owns .pill elsewhere on the site. */
.sc .pill,.sc-gate .pill{
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:2px 7px;border-radius:999px;
  background:rgba(18,161,80,.12);color:var(--green-ink);white-space:nowrap;
}
.sc .pill.free{background:rgba(18,161,80,.12);color:var(--green-ink)}

/* ---------- 4. SERVERS ---------- */

.sc-os{margin:0 0 22px}
.sc-os:last-child{margin-bottom:0}
.sc-os h4{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--red);margin:0 0 10px;
}
.sc-levels{display:flex;gap:7px;margin:0 0 12px;flex-wrap:wrap}
.sc-lv{
  padding:6px 13px;border:1px solid var(--line-2);border-radius:999px;
  font-family:var(--display);font-weight:600;font-size:12.5px;color:var(--fg-soft);
  background:var(--paper);cursor:pointer;transition:all .16s var(--ease);
}
.sc-lv input{position:absolute;opacity:0;pointer-events:none}
.sc-lv.is-on{border-color:var(--red);background:var(--red);color:#fff}

.sc-roles{display:grid;gap:6px}
.sc-role{
  display:grid;grid-template-columns:minmax(0,1fr) auto 92px;gap:12px;align-items:center;
  padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--mist);
}
.sc-role-n{font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--ink);min-width:0}
.sc-role-n em{display:block;font-family:var(--body);font-weight:400;font-size:11.5px;color:var(--fg-mut);font-style:normal;line-height:1.4;margin-top:2px}
.sc-role-gb{
  font-family:var(--mono);font-size:12px;color:var(--fg);text-align:right;
  font-variant-numeric:tabular-nums;
}

.sc-step{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;background:var(--paper)}
.sc-step button{
  width:28px;height:28px;border:0;background:transparent;cursor:pointer;
  font-size:16px;line-height:1;color:var(--fg-soft);
  transition:background .16s var(--ease),color .16s var(--ease);
}
.sc-step button:hover{background:var(--red-wash);color:var(--red)}
.sc-step input{
  width:46px;border:0;background:transparent;text-align:center;padding:5px 0;
  font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink);
  -moz-appearance:textfield;appearance:textfield;
}
.sc-step input::-webkit-outer-spin-button,.sc-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---------- 5. RESULTS ---------- */

/* THE SECOND HALF OF MAKING THE PANEL STICK, and the half that stays invisible
   until you measure it.

   A sticky element travels inside ITS OWN CONTAINING BLOCK — here .sc-results,
   the grid cell. `align-items:start` on .sc sizes every cell to its content, so
   this cell was exactly as tall as the panel inside it: no spare height, no
   range to travel through, and the panel scrolled away with the page while
   reporting `position:sticky` the whole time. Measured at four scroll offsets:
   its top went to -2982px.

   Stretching this ONE cell to the row height — which the inputs column sets —
   gives the panel the whole length of the form to stay pinned through. The
   inputs cell keeps the start alignment it wants. */
.sc-results{min-width:0;align-self:stretch}
/* Pinned to the top of the panel's own scroll. The cost is the one thing that
   must never leave the screen, and without this it scrolls away inside the
   very panel that exists to keep it visible. Opaque background is load-bearing
   — the rows pass underneath it. */
.sc-headline{
  position:sticky;top:0;z-index:3;
  padding:22px 22px 20px;
  background:
    radial-gradient(70% 110% at 85% -10%,var(--bd-red),transparent 60%),
    radial-gradient(60% 100% at 0% 0%,var(--bd-blue),transparent 55%),
    var(--void);
  border-bottom:1px solid var(--dk-line);
}
.sc-k{
  display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--dk-mut);margin-bottom:6px;
}
.sc-big{
  display:block;font-family:var(--display);font-weight:800;color:#fff;
  font-size:clamp(34px,4.4vw,44px);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.sc-alt{display:block;font-family:var(--mono);font-size:12px;color:var(--dk-soft);margin-top:8px}

.sc-vol{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--dk-line)}
.sc-vol>div{padding:13px 14px;text-align:center;border-right:1px solid var(--dk-line)}
.sc-vol>div:last-child{border-right:0}
.sc-vol span{
  display:block;font-family:var(--mono);font-size:17px;font-weight:700;color:var(--dk-fg);
  font-variant-numeric:tabular-nums;
}
.sc-vol em{display:block;font-style:normal;font-size:10.5px;color:var(--dk-mut);margin-top:3px;line-height:1.3}

.sc-block{padding:16px 20px;border-bottom:1px solid var(--dk-line)}
.sc-block h4{
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dk-mut);margin:0 0 10px;
}
.sc-plan{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 10px}
.sc-plan strong{font-family:var(--display);font-size:15px;font-weight:700;color:#fff}
.sc-plan span{font-family:var(--mono);font-size:11.5px;color:var(--blue-dk)}

.sc-tiers{width:100%;border-collapse:collapse;font-size:12px}
.sc-tiers th{
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--dk-mut);text-align:left;padding:0 0 6px;font-weight:700;
}
.sc-tiers td{padding:5px 0;color:var(--dk-soft);border-top:1px solid var(--dk-line)}
.sc-tiers .num,.sc-rows .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.sc-tiers tr.is-best td{color:#fff;font-weight:600}
.sc-tiers .pill{background:var(--red);color:#fff;margin-left:6px}

.sc-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:10px 0 0}
.sc-row .k{font-size:12px;color:var(--dk-mut)}
.sc-row b{font-family:var(--mono);font-size:12.5px;color:var(--green-dk);text-align:right}

.sc-split{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.sc-split li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:baseline}
.sc-split .k{font-size:12.5px;color:var(--dk-soft);min-width:0}
.sc-split b{font-family:var(--mono);font-size:12.5px;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-split em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--dk-mut);white-space:nowrap}

/* A caveat under a figure, inside the dark results panel. Smaller and dimmer
   than the rows above it, but still over 4.5:1 on --dk — see the ink-tier note
   in main.css section 1: --dk-mut is the floor for type on this surface.

   RENAMED FROM .sc-note, 9 Oct 2026. The Analyse step added a <details>
   component that wanted the same name, and `npm run css:check` called it: one
   name, two components, the later quietly reshaping the earlier. This is the
   caveat paragraph; .sc-note is the collapsible. */
.sc-caveat{margin:10px 0 0;font-size:11.5px;line-height:1.55;color:var(--dk-mut)}

.sc-credits{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sc-credits li{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.sc-credits .k{font-size:12.5px;color:var(--dk-soft)}
.sc-credits b{font-family:var(--mono);font-size:12.5px;color:var(--green-dk)}
.sc-credits li.muted{color:var(--dk-mut);font-size:12.5px;display:block}

.sc-tablewrap{margin:0 -4px}
.sc-rows{width:100%;border-collapse:collapse;font-size:12px}
/* NOT sticky any more. It used to pin against .sc-tablewrap's own scroll; with
   that gone it would pin against the panel instead and collide with the cost
   headline, which is sticky in the same container and must win. */
.sc-rows th{
  background:var(--dk);
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--dk-mut);text-align:left;padding:4px 4px 6px;
}
.sc-rows td{padding:5px 4px;color:var(--dk-soft);border-top:1px solid var(--dk-line);vertical-align:top}
.sc-rows tr.grp th{
  color:var(--red-3);padding-top:12px;background:var(--dk);letter-spacing:.09em;
}
.sc-rows td.muted{color:var(--dk-mut)}
.sc-rows .pill{background:rgba(18,161,80,.18);color:var(--green-dk)}

.sc-disclaim{
  padding:14px 20px;font-size:11.5px;line-height:1.55;color:var(--dk-mut);
  border-bottom:1px solid var(--dk-line);margin:0;
}
.sc-cta{margin:16px 20px 20px;display:inline-flex;width:calc(100% - 40px);justify-content:center}

/* ---------- 6. GATE ---------- */

.sc-gate{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:28px;align-items:start}

.sc-preview{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);
}
.sc-pv-h{padding:22px clamp(18px,2.4vw,26px) 0}
.sc-pv-h h2{font-family:var(--display);font-size:clamp(20px,2.2vw,25px);font-weight:700;color:var(--ink);margin:0}
.sc-pv-h p{color:var(--fg-mut);font-size:13.5px;margin:7px 0 0;line-height:1.5}
.sc-pv-body{padding:20px clamp(18px,2.4vw,26px) clamp(18px,2.4vw,26px)}

.sc-pv-out{
  margin:22px 0 0;border-radius:var(--radius-sm);overflow:hidden;
  background:var(--dk);border:1px solid var(--dk-line);
}
.sc-pv-big{
  padding:18px 20px;
  background:
    radial-gradient(70% 110% at 85% -10%,var(--bd-red),transparent 60%),
    radial-gradient(60% 100% at 0% 0%,var(--bd-blue),transparent 55%),
    var(--void);
}
.sc-pv-big strong{
  display:block;font-family:var(--display);font-weight:800;color:#fff;
  font-size:clamp(30px,3.8vw,40px);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.sc-pv-out .sc-vol{border-top:1px solid var(--dk-line);border-bottom:1px solid var(--dk-line);grid-template-columns:repeat(2,1fr)}
.sc-pv-out .sc-row{padding:0 20px;margin:10px 0}
.sc-pv-out .sc-row:first-of-type{margin-top:14px}
.sc-pv-out .sc-row b{color:#fff}
.sc-pv-rate{
  padding:10px 20px 14px;margin:0;font-family:var(--mono);
  font-size:11px;color:var(--dk-mut);border-top:1px solid var(--dk-line);
}

/* The locked panel. NOT a blur over real content — there is no real content
   behind it to blur. It is a list of what the form buys, because a lock that
   does not say what it holds converts on curiosity, and curiosity is the
   wrong reason and the wrong lead. */
.sc-locked{
  display:flex;gap:15px;align-items:flex-start;margin:22px 0 0;padding:18px 20px;
  border:1px dashed var(--line-2);border-radius:var(--radius-sm);background:var(--mist);
}
.sc-lock{
  flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--red-wash);color:var(--red);
}
.sc-lock svg{width:17px;height:17px}
.sc-locked h3{font-family:var(--display);font-size:14.5px;font-weight:700;color:var(--ink);margin:0 0 9px}
.sc-locked ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.sc-locked li{font-size:12.5px;color:var(--fg-soft);line-height:1.55;padding-left:17px;position:relative}
.sc-locked li::before{
  content:'';position:absolute;left:0;top:7px;width:6px;height:6px;
  border-radius:50%;background:var(--red);
}
.sc-locked strong{color:var(--ink);font-weight:600}

.sc-form .formcard{position:sticky;top:96px}

/* ---------- 7. EXPLAINER ---------- */

.sc-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sc-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow-sm);position:relative;
}
.sc-card-n{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--red);display:block;margin-bottom:10px;
}
.sc-card h3{font-family:var(--display);font-size:16px;font-weight:700;color:var(--ink);margin:0 0 8px;line-height:1.3}
.sc-card p{font-size:13.5px;color:var(--fg-soft);line-height:1.6;margin:0}

/* ---------- 8. PRINT ----------
   A printed estimate is something somebody carries into a budget meeting, so
   it drops the controls entirely and keeps the summary. The dark results panel
   is inverted rather than printed black — a solid dark rectangle is most of a
   toner cartridge and reads worse on paper than it does on screen. */
@media print{
  .sc-inputs,.sc-bar-r,.sc-cta,.sc-explain,.sc-hero .aura,
  /* The skip link and the cookie banner belong to main.css. Naming either
     class here is a collision by the rule in check-css-collisions.js even
     though all this does is hide them, so both are reached another way: the
     banner by its id, the skip link by its attribute. Chrome is already
     told not to print either via main.css's own print rules if it has them;
     this is belt and braces for a page people WILL print. */
  .sc-gate,.sc-locked,#cbar,[class~="skiplink"]{display:none !important}
  .sc{display:block}
  .sc-sticky{position:static;max-height:none;overflow:visible;background:#fff;border:1px solid #bbb;box-shadow:none}
  .sc-headline{position:static}
  .sc-headline,.sc-pv-big{background:#fff;border-bottom:1px solid #bbb}
  .sc-big{color:#000}
  .sc-k,.sc-alt,.sc-vol em,.sc-block h4,.sc-row .k,.sc-split em,.sc-disclaim{color:#444}
  .sc-vol span,.sc-split b,.sc-plan strong,.sc-rows td,.sc-tiers td{color:#000}
  .sc-vol,.sc-block,.sc-vol>div,.sc-rows td,.sc-tiers td,.sc-disclaim{border-color:#ddd}
  .sc-tablewrap{max-height:none;overflow:visible}
  .sc-rows th{background:#fff;color:#444}
}

/* ---------- 9. RESPONSIVE ---------- */

@media (max-width:1180px){
  .sc,.sc-gate{grid-template-columns:1fr}
  /* Sticky is pointless once the results sit below the inputs — it would pin
     the panel to the top of a viewport the inputs have already scrolled past.
     The viewport cap goes with it: a panel in normal flow that scrolls inside
     itself traps the wheel on a phone, which is the worst version of this. */
  .sc-sticky,.sc-form .formcard{position:static}
  .sc-sticky{max-height:none;overflow:visible}
  .sc-headline{position:static}
  .sc-results{order:-1}
  .sc-cards{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:760px){
  .sc-profiles{grid-template-columns:repeat(2,1fr)}
  .sc-two{grid-template-columns:1fr}
  .sc-cards{grid-template-columns:1fr}
  .sc-role{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .sc-role-gb{grid-column:1/-1;text-align:left}
  .sc-src-ctl,.sc-src-note{padding-left:0}
  .sc-num,.sc-sel{min-width:0;flex:1 1 140px}
  .sc-bar{gap:14px}
  .sc-vol{grid-template-columns:1fr 1fr}
  .sc-vol>div:last-child{grid-column:1/-1;border-top:1px solid var(--dk-line)}

  /* THREE COLUMNS DO NOT FIT ON A PHONE. At 375px the label column was being
     squeezed to a few characters, so "Retention beyond 90 days" wrapped over
     three lines into the row above it while the cost column clipped off the
     right edge. Label on its own line, figures on the next. */
  .sc-split li{grid-template-columns:auto 1fr;row-gap:2px}
  .sc-split .k{grid-column:1/-1}
  .sc-split em{text-align:right}

  /* The line-by-line table is the one thing here that genuinely needs width.
     Let it scroll inside its own box rather than squeezing four columns into
     a phone — the rule the site already applies to wide content. */
  .sc-tablewrap{overflow:auto}
  .sc-rows{min-width:330px}
}

@media (prefers-reduced-motion:reduce){
  .sc-prof,.sc-act,.sc-lv,.sc-src,.sc-check,.sc-step button,.sc-cur button{transition:none}
}

/* ============================================================================
   10. MODES, STEPS, ANALYSE, OPTIMISATION — added 9 Oct 2026
   Same rules as the rest of this file: every value is a main.css token, every
   class is .sc- prefixed, nothing bare that main.css or home.css declares.
   ============================================================================ */

/* ---------- 10a. mode and step tabs ---------- */

.sc-modes{display:inline-flex;gap:4px;padding:4px;margin:0 0 22px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:999px}
.sc-mode{
  display:inline-flex;align-items:baseline;gap:7px;
  padding:8px 18px;border:0;border-radius:999px;background:transparent;cursor:pointer;
  font-family:var(--display);font-size:13.5px;color:var(--fg-mut);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.sc-mode strong{font-weight:700;color:var(--fg)}
.sc-mode span{font-size:12px}
.sc-mode.is-on{background:var(--red);color:#fff;box-shadow:var(--shadow-sm)}
.sc-mode.is-on strong,.sc-mode.is-on span{color:#fff}

.sc-steps{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 22px}
.sc-step-tab{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px 9px 10px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--paper);cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:13px;color:var(--fg-soft);
  transition:border-color .16s var(--ease),color .16s var(--ease),background .16s var(--ease);
}
.sc-step-tab:hover{border-color:var(--red);color:var(--red)}
.sc-step-n{
  display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--bg-2);color:var(--fg-mut);
  font-family:var(--mono);font-size:11px;font-weight:700;
}
.sc-step-tab.is-on{border-color:var(--red);background:var(--red);color:#fff}
.sc-step-tab.is-on .sc-step-n{background:rgba(255,255,255,.22);color:#fff}

/* THE STEP WRAPPERS ARE GRID ITEMS, and a grid item defaults to
   `min-width:auto` — meaning it refuses to shrink below the intrinsic width of
   its content. The KQL block is a <pre> whose longest line is about 560px, so
   on a 375px phone the panel grew to 604px and took the page with it, despite
   the <pre> already having overflow:auto. The overflow could never engage
   because nothing was ever narrower than the content.

   One line, and it has to be on the wrapper rather than the panel: the
   constraint has to exist at the point the grid sizes the track. */
.sc-inputs>[data-panel]{min-width:0}
.sc-kql pre{max-width:100%}

/* ---------- 10b. analyse: the query and the paste ---------- */

.sc-kql{position:relative;margin:0 0 16px}
.sc-kql pre{
  margin:0;padding:16px 18px;overflow:auto;
  background:var(--dk);border:1px solid var(--dk-line);border-radius:var(--radius-sm);
  font-family:var(--mono);font-size:12px;line-height:1.65;color:var(--dk-fg);
  scrollbar-width:thin;scrollbar-color:var(--dk-line-2) transparent;
}
/* The KQL comments carry the two gotchas that stop the query running at all,
   so they are dimmed rather than hidden — readable, clearly secondary. */
.sc-kql code{color:inherit}
.sc-kql-copy{position:absolute;top:10px;right:10px;z-index:1;padding:5px 12px;font-size:12px}

.sc-notes{display:grid;gap:4px}
.sc-note{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--mist);overflow:hidden;
}
.sc-note>summary{
  cursor:pointer;list-style:none;padding:11px 14px;
  font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink);
  display:flex;align-items:center;gap:9px;
}
.sc-note>summary::-webkit-details-marker{display:none}
.sc-note>summary::before{
  content:'';width:0;height:0;flex:none;
  border-left:5px solid var(--red);border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform .16s var(--ease);
}
.sc-note[open]>summary::before{transform:rotate(90deg)}
.sc-note>p,.sc-note>div{margin:0;padding:0 14px 13px 28px;font-size:12.5px;line-height:1.6;color:var(--fg-soft)}

.sc textarea{
  width:100%;font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--ink);
  background:var(--mist);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  padding:11px 13px;resize:vertical;
}
.sc textarea:focus-visible{outline:0;border-color:var(--red);box-shadow:0 0 0 3px var(--red-wash)}

.sc-paste-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:12px 0 0}
.sc-upload{cursor:pointer}
.sc-days{min-width:120px}

.sc-parse{
  margin:12px 0 0;padding:11px 14px;border-radius:var(--radius-sm);
  font-size:12.5px;line-height:1.55;color:var(--fg-mut);
  background:var(--mist);border:1px solid var(--line);
}
.sc-parse.is-ok{background:rgba(18,161,80,.07);border-color:rgba(18,161,80,.3);color:var(--green-ink)}
.sc-parse.is-bad{background:var(--red-wash);border-color:rgba(195,0,23,.28);color:var(--red-dk)}

/* ---------- 10c. tier placement ---------- */

.sc-rec-bar{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:12px 16px;margin:0 0 16px;border-radius:var(--radius-sm);
  background:rgba(18,161,80,.08);border:1px solid rgba(18,161,80,.3);
}
.sc-rec-bar .k{font-size:13px;color:var(--fg)}
.sc-rec-bar b{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--green-ink)}

.sc-tiers-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 18px}
.sc-legend-item{
  padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--mist);
}
.sc-legend-item strong{display:block;font-family:var(--display);font-size:13px;color:var(--ink);margin-bottom:3px}
.sc-legend-item span{display:block;font-size:12px;color:var(--fg-soft);line-height:1.5}
.sc-legend-item em{display:block;font-style:normal;font-size:11.5px;color:var(--red-dk);line-height:1.45;margin-top:5px}

.sc-trow{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;background:var(--paper);
}
.sc-trow.is-rec{border-left:3px solid var(--green-ink)}
.sc-trow-h{display:flex;align-items:baseline;gap:10px;justify-content:space-between}
.sc-trow-n{font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--ink);min-width:0}
.sc-trow-gb{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--fg);white-space:nowrap;font-variant-numeric:tabular-nums}
.sc-trow-p{margin:6px 0 0;font-size:12px;line-height:1.55;color:var(--fg-mut)}
.sc-trow-ctl{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:11px 0 0}
.sc-trow-free{font-size:12px;color:var(--green-ink);font-style:italic}
.sc-rec{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;
  color:var(--green-ink);align-self:center;
}
.sc-rec b{color:var(--green-ink)}
.sc .pill.warn{background:rgba(229,161,58,.16);color:var(--amber-ink)}
.sc-empty{padding:26px 0;text-align:center;color:var(--fg-mut);font-size:13.5px}

/* ---------- 10d. optimisation ---------- */

.sc-lics{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.sc-lic{
  display:block;padding:12px;border:1px solid var(--line-2);border-radius:var(--radius-sm);
  background:var(--paper);cursor:pointer;transition:border-color .16s var(--ease),background .16s var(--ease);
}
.sc-lic input{position:absolute;opacity:0;pointer-events:none}
.sc-lic.is-on{border-color:var(--red);background:var(--red-wash);box-shadow:inset 0 0 0 1px var(--red)}
.sc-lic-n{display:block;font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--ink)}
.sc-lic-n em{
  display:inline-block;font-style:normal;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--green-ink);margin-left:4px;
}
.sc-lic-b{display:block;font-size:11.5px;color:var(--fg-mut);line-height:1.4;margin-top:3px}

.sc-benefit{list-style:none;margin:18px 0 0;padding:14px 16px;display:grid;gap:8px;
  background:var(--mist);border:1px solid var(--line);border-radius:var(--radius-sm)}
.sc-benefit li{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.sc-benefit .k{font-size:12.5px;color:var(--fg-soft)}
.sc-benefit b{font-family:var(--mono);font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
.sc-benefit b.is-good{color:var(--green-ink)}

.sc-compute{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
  margin:0 0 10px;padding:12px 14px;background:var(--mist);
  border:1px solid var(--line);border-radius:var(--radius-sm)}
.sc-compute-sum{
  width:100%;margin:0;font-family:var(--mono);font-size:11.5px;color:var(--fg-mut);line-height:1.5;
}

.sc-alltiers{margin:18px 0 0}
.sc-fulltiers th,.sc-fulltiers td{color:var(--fg)}
.sc-fulltiers thead th{color:var(--fg-mut)}
.sc-fulltiers tr.is-best td{font-weight:700;color:var(--ink)}
.sc-fulltiers .is-good{color:var(--green-ink)}
.sc-fulltiers .is-bad{color:var(--red-dk)}
.sc-alltiers .sc-tablewrap{max-height:340px;overflow:auto}
/* This table is on PAPER, not on the dark panel, so it cannot inherit the dark
   header treatment .sc-rows carries. */
.sc-alltiers .sc-rows th{background:var(--paper)}
.sc-alltiers .sc-rows td{border-top:1px solid var(--line)}

/* ---------- 10e. the chart ----------
   Two series, brand red and brand blue, validated for CVD: deutan ΔE 33.6,
   normal ΔE 39.0, both inside the lightness band against paper. Both are
   direct-labelled as well as legended, so identity never rests on colour. */
.sc-chart-wrap{margin:4px 0 0;overflow:hidden}
.sc-svg{width:100%;height:auto;display:block;overflow:visible}
.sc-grid{stroke:var(--line);stroke-width:1}
.sc-axis{font-family:var(--mono);font-size:10px;fill:var(--fg-mut)}
.sc-axis-y{text-anchor:end}
.sc-axis-x{text-anchor:middle}
.sc-axis-t{font-size:10.5px;fill:var(--fg-mut)}
.sc-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.sc-line-payg{stroke:var(--blue)}
.sc-line-best{stroke:var(--red)}
.sc-dl{font-family:var(--display);font-size:11px;font-weight:600}
.sc-dl-payg{fill:var(--blue-ink)}
.sc-dl-best{fill:var(--red)}
.sc-here{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:3 3;opacity:.55}
.sc-here-t{fill:var(--ink);font-weight:700}
.sc-dot{fill:var(--red);stroke:var(--paper);stroke-width:2}
.sc-xover{stroke:var(--line-2);stroke-width:1;stroke-dasharray:2 4}
.sc-xover-t{fill:var(--fg-faint);font-size:9px}

.sc-legend{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0 0;font-size:12px;color:var(--fg-soft)}
.sc-legend span{display:inline-flex;align-items:center;gap:7px}
.sc-sw{width:14px;height:3px;border-radius:2px;display:inline-block}
.sc-sw-payg{background:var(--blue)}
.sc-sw-best{background:var(--red)}
.sc-sw-here{background:var(--ink);height:0;border-top:2px dashed var(--ink);border-radius:0}

/* ---------- 10f. summary ---------- */

.sc-sumtable{width:100%;border-collapse:collapse;font-size:13px}
.sc-sumtable th{text-align:left;font-family:var(--display);font-weight:600;color:var(--ink);padding:9px 0}
.sc-sumtable td{padding:9px 0;color:var(--fg-soft);border-top:1px solid var(--line)}
.sc-sumtable th{border-top:1px solid var(--line)}
.sc-sumtable tbody tr:first-child th,.sc-sumtable tbody tr:first-child td{border-top:0}
.sc-sum-q{font-family:var(--mono);font-size:11.5px;color:var(--fg-mut)}
.sc-sumtable .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.sc-sumtable tfoot th,.sc-sumtable tfoot td{border-top:2px solid var(--line-2);font-weight:700}
.sc-sum-tot th,.sc-sum-tot .num{font-size:16px;color:var(--ink)}

.sc-sum-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0 0}
.sc-sumcard{
  padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--mist);
}
.sc-sumcard.is-good{border-color:rgba(18,161,80,.35);background:rgba(18,161,80,.06)}
.sc-sumcard span{display:block;font-size:11.5px;color:var(--fg-mut);margin-bottom:5px}
.sc-sumcard strong{display:block;font-family:var(--display);font-size:19px;font-weight:700;color:var(--ink)}
.sc-sumcard.is-good strong{color:var(--green-ink)}
.sc-sum-note{padding:0;margin:18px 0 0;color:var(--fg-mut);border:0}

.sc-act.is-primary{border-color:var(--red);background:var(--red);color:#fff}
.sc-act.is-primary:hover{background:var(--red-2);border-color:var(--red-2);color:#fff}

/* ---------- 10g. responsive ---------- */
@media (max-width:760px){
  .sc-modes{display:flex;width:100%;border-radius:var(--radius-sm)}
  .sc-mode{flex:1;justify-content:center;flex-wrap:wrap;gap:2px;padding:8px 10px}
  .sc-mode span{display:none}
  .sc-steps{gap:5px}
  .sc-step-tab{padding:7px 12px 7px 8px;font-size:12px}
  .sc-tiers-legend,.sc-lics,.sc-sum-grid{grid-template-columns:1fr}
  .sc-trow-ctl .sc-sel{flex:1 1 140px}
}
@media print{
  .sc-modes,.sc-steps,.sc-kql-copy,.sc-paste-row,.sc-rec-bar{display:none !important}
  .sc-note{border-color:#ddd}
}

/* ---------- 10h. the staff bypass ----------
   Deliberately quiet. A prominent "skip this form" control on a lead magnet is
   an invitation to skip the form, so this reads as a utility rather than an
   alternative: closed by default, muted, and below the fold of the card.
   Anyone with a studio session never sees it — the route counts that as
   unlocked on its own. */
.sc-staff{margin:18px 0 0;border-top:1px solid var(--line);padding-top:14px}
.sc-staff>summary{
  cursor:pointer;list-style:none;font-size:12.5px;color:var(--fg-mut);
  display:inline-flex;align-items:center;gap:7px;
}
.sc-staff>summary::-webkit-details-marker{display:none}
.sc-staff>summary::before{
  content:'';width:0;height:0;flex:none;
  border-left:5px solid var(--fg-faint);border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform .16s var(--ease);
}
.sc-staff[open]>summary::before{transform:rotate(90deg)}
.sc-staff>summary:hover{color:var(--red)}
.sc-staff form{margin:12px 0 0}
.sc-staff-p{font-size:12.5px;color:var(--fg-mut);line-height:1.55;margin:0 0 12px}

/* ---------- 10i. the flow diagram ----------
   Cards, not labels. Rebuilt 9 Oct 2026 after a side-by-side with Lockbase's
   planner: the difference was never styling, it was that their nodes carry a
   rate, a description, a share bar and chips naming what feeds them. The one
   thing kept from the first attempt is that RIBBON THICKNESS IS VOLUME —
   theirs are decorative curves of equal weight, which looks calm and says
   nothing.

   DARK SURFACE, with its own palette. --blue-dk and --green-dk both fail the
   dark lightness band (L 0.48–0.67) so the two steps below are specific to
   this diagram; red is --red-3, which passes. Worst adjacent pair is tritan
   ΔE 5.6 — inside the floor band, legal ONLY with secondary encoding, which
   is why every node is named in text and every ribbon carries a <title>. */
.sc-flow{
  margin:0 0 22px;padding:18px 20px 20px;border-radius:var(--radius);
  background:
    radial-gradient(70% 120% at 88% -20%,var(--bd-red),transparent 60%),
    radial-gradient(60% 110% at 2% 0%,var(--bd-blue),transparent 55%),
    var(--dk);
  border:1px solid var(--dk-line);

  --fl-an:var(--red-3);
  --fl-ba:#4a86f0;
  --fl-la:#1fae68;
  --fl-fr:var(--dk-mut);
}
.sc-flow-h h4{font-family:var(--display);font-size:15px;font-weight:700;color:#fff;margin:0}
.sc-flow-h p{font-size:12px;color:var(--dk-mut);line-height:1.5;margin:4px 0 16px;max-width:72ch}

.sc-flow-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 18px}
.sc-ftile{
  padding:12px 14px;background:rgba(255,255,255,.035);
  border:1px solid var(--dk-line);border-left-width:3px;border-radius:var(--radius-sm);
}
.sc-ftile-an{border-left-color:var(--fl-an)}
.sc-ftile-ba{border-left-color:var(--fl-ba)}
.sc-ftile-la{border-left-color:var(--fl-la)}
.sc-ftile-fr{border-left-color:var(--fl-fr)}
.sc-ftile-n{
  display:block;font-family:var(--display);font-size:22px;font-weight:700;color:#fff;
  line-height:1.1;font-variant-numeric:tabular-nums;
}
.sc-ftile-n em{font-style:normal;font-family:var(--mono);font-size:10px;font-weight:400;color:var(--dk-mut);margin-left:5px}
.sc-ftile-k{display:block;font-family:var(--display);font-size:12.5px;font-weight:600;color:var(--dk-fg);margin-top:5px}
.sc-ftile-s{display:block;font-family:var(--mono);font-size:10px;color:var(--dk-mut);margin-top:3px;line-height:1.45}

/* Three columns and one SVG underneath them. The wires are painted from
   measured card positions, so the svg is pinned over the whole grid rather
   than being something the layout has to reason about. */
/* The scroller is a FALLBACK now, not the normal case. With the section
   widened the diagram fits its column on any desktop; this keeps it usable on
   a phone, where 760px of Sankey genuinely cannot be shown any other way. */
.sc-flow-canvas{overflow-x:auto;overflow-y:hidden}
.sc-fl-grid{
  position:relative;display:grid;grid-template-columns:1fr 132px 1.15fr;
  /* 660, not 700. At a 1280 laptop the inputs column measures 686px, so 700
     reintroduced the scrollbar for the sake of fourteen pixels — on the most
     common desktop width there is. Below the 1180 breakpoint the layout goes
     single-column and the diagram gets the whole page anyway. */
  gap:0 24px;align-items:start;min-width:620px;
}
.sc-fl-wires{position:absolute;inset:0;pointer-events:none;overflow:visible}
.sc-fl-col{display:grid;gap:8px;position:relative;z-index:1}
.sc-fl-colh{
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dk-mut);margin-bottom:2px;
}
.sc-fl-colh b{color:var(--dk-fg);margin-left:4px}
.sc-fl-right .sc-fl-colh{text-align:right}

.sc-fl-card{
  background:var(--dk-panel);border:1px solid var(--dk-line);
  border-radius:var(--radius-sm);padding:9px 12px;
  transition:border-color .16s var(--ease),opacity .16s var(--ease);
}
.sc-fl-srccard{display:grid;gap:2px;outline:none}
.sc-fl-srccard:hover,.sc-fl-srccard:focus-visible{border-color:var(--dk-line-2)}
.sc-fl-srccard:focus-visible{box-shadow:0 0 0 2px var(--red-3)}
.sc-fl-nm{font-family:var(--display);font-size:12.5px;font-weight:600;color:var(--dk-fg);line-height:1.3}
.sc-fl-gb{font-family:var(--mono);font-size:11px;color:var(--dk-soft);font-variant-numeric:tabular-nums}
.sc-fl-gb em{font-style:normal;font-size:9px;color:var(--dk-mut)}

/* The underline on a source card is its own split across destinations, so a
   source feeding two tiers says so without being hovered. */
.sc-fl-split{display:flex;gap:2px;height:3px;margin-top:4px;border-radius:2px;overflow:hidden}
.sc-fl-seg{display:block;border-radius:2px}
.sc-fl-an{background:var(--fl-an)}
.sc-fl-ba{background:var(--fl-ba)}
.sc-fl-la{background:var(--fl-la)}
.sc-fl-fr{background:var(--fl-fr)}

.sc-fl-midwrap{display:flex;align-items:center;justify-content:center;align-self:stretch;position:relative;z-index:1}
.sc-fl-mid{
  text-align:center;padding:14px 10px;width:100%;
  background:var(--dk-panel);border:1px solid var(--dk-line-2);border-radius:var(--radius);
}
.sc-fl-mid-i{
  display:grid;place-items:center;width:34px;height:34px;margin:0 auto 8px;
  border-radius:9px;background:rgba(195,0,23,.18);color:var(--red-3);
}
.sc-fl-mid-i svg{width:17px;height:17px}
.sc-fl-mid strong{display:block;font-family:var(--display);font-size:12.5px;font-weight:700;color:#fff}
.sc-fl-mid>span{display:block;font-family:var(--mono);font-size:9.5px;color:var(--dk-mut);margin-top:2px}
.sc-fl-mchips{display:grid;gap:4px;margin-top:10px}
.sc-fl-mchip{
  display:flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:9.5px;color:var(--dk-soft);
  background:rgba(255,255,255,.04);border-radius:999px;padding:3px 8px;
}
.sc-fl-mchip b{margin-left:auto;color:var(--dk-fg)}
.sc-fl-dot{width:6px;height:6px;border-radius:50%;flex:none;display:inline-block}

.sc-fl-destcard{display:grid;gap:5px;border-left-width:3px}
.sc-fl-b-an{border-left-color:var(--fl-an)}
.sc-fl-b-ba{border-left-color:var(--fl-ba)}
.sc-fl-b-la{border-left-color:var(--fl-la)}
.sc-fl-b-fr{border-left-color:var(--fl-fr)}
.sc-fl-destcard header{display:flex;align-items:center;gap:7px}
.sc-fl-destcard .sc-fl-gb{margin-left:auto;font-size:14px;font-weight:700}
.sc-fl-t-an{color:var(--fl-an)}
.sc-fl-t-ba{color:var(--fl-ba)}
.sc-fl-t-la{color:var(--fl-la)}
.sc-fl-t-fr{color:var(--dk-soft)}
.sc-fl-blurb{font-size:11px;color:var(--dk-mut);line-height:1.45;margin:0}
.sc-fl-rate{font-family:var(--mono);font-size:10px;color:var(--dk-soft);margin:0}
.sc-fl-bar{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden}
.sc-fl-bar i{display:block;height:100%;border-radius:2px}
.sc-fl-chips{display:flex;gap:4px;flex-wrap:wrap}
.sc-fl-chips em{
  font-style:normal;font-family:var(--mono);font-size:9px;color:var(--dk-soft);
  background:rgba(255,255,255,.05);border-radius:4px;padding:2px 6px;
}
.sc-fl-more{color:var(--dk-mut)}

.sc-fl-rib{fill-opacity:.34;stroke:none;transition:fill-opacity .15s var(--ease)}
.sc-fl-r-an{fill:var(--fl-an)}
.sc-fl-r-ba{fill:var(--fl-ba)}
.sc-fl-r-la{fill:var(--fl-la)}
.sc-fl-r-fr{fill:var(--fl-fr)}

/* Dim the rest rather than highlight the one — the eye finds the survivor. */
.sc-fl-grid.is-focus .sc-fl-rib{fill-opacity:.06}
.sc-fl-grid.is-focus .sc-fl-rib.is-lit{fill-opacity:.7}
.sc-fl-grid.is-focus .sc-fl-card{opacity:.4}
.sc-fl-grid.is-focus .sc-fl-card.is-lit{opacity:1;border-color:var(--dk-line-2)}

@media (max-width:760px){
  .sc-flow-tiles{grid-template-columns:1fr 1fr}
  .sc-flow{padding:14px 12px 16px}
}
@media (prefers-reduced-motion:reduce){
  .sc-fl-rib,.sc-fl-card{transition:none}
}
@media print{
  .sc-flow{background:#fff;border-color:#bbb}
  .sc-flow-h h4,.sc-ftile-n{color:#000}
}