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

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

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

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

.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) 400px;gap:28px;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. */
.sc-sticky{
  position:sticky;top:96px;
  background:var(--dk);border:1px solid var(--dk-line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);
}

.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 ---------- */

.sc-results{min-width:0}
.sc-headline{
  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. */
.sc-note{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{max-height:320px;overflow:auto;margin:0 -4px}
.sc-rows{width:100%;border-collapse:collapse;font-size:12px}
.sc-rows th{
  position:sticky;top:0;background:var(--dk);z-index:1;
  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);
  position:static;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;background:#fff;border:1px solid #bbb;box-shadow:none}
  .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. */
  .sc-sticky,.sc-form .formcard{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}
}