/* ============================================================
   CargoMath — design system
   Light, data-dense B2B UI for trade cost calculators.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}

:root{
  --ink:#0f1b26;
  --ink-2:#33475b;
  --muted:#66798c;
  --line:#e3e9f0;
  --line-2:#eef2f7;
  --bg:#f5f8fa;
  --card:#ffffff;
  --navy:#0a2136;
  --navy-2:#12324f;
  --brand:#1163a5;
  --brand-dk:#0b4a7e;
  --brand-lt:#e8f2fa;
  --accent:#e8940f;
  --accent-lt:#fef4e3;
  --ok:#0f7b52;
  --ok-lt:#e7f5ef;
  --bad:#bf2544;
  --bad-lt:#fceef1;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(16,35,52,.05),0 4px 16px rgba(16,35,52,.06);
  --shadow-lg:0 2px 6px rgba(16,35,52,.06),0 16px 48px rgba(16,35,52,.10);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --wrap:1180px;
}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.25;letter-spacing:-.015em;font-weight:700}
h1{font-size:clamp(1.75rem,3.4vw,2.6rem);letter-spacing:-.025em}
h2{font-size:clamp(1.3rem,2vw,1.7rem)}
h3{font-size:1.1rem}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.25em}
li{margin:.25em 0}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.narrow{max-width:820px}

/* ---------- header ---------- */
.site-header{
  background:var(--navy);color:#dce7f1;position:sticky;top:0;z-index:60;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{display:flex;align-items:center;gap:22px;min-height:62px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand-mark{
  width:34px;height:34px;border-radius:9px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--accent),#d8790a);
  color:#20160a;font-weight:800;font-size:.82rem;letter-spacing:.02em;
  display:grid;place-items:center;
}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text b{font-size:1.04rem;letter-spacing:-.02em;color:#fff}
.brand-text em{font-style:normal;font-size:.66rem;color:#8fa9c0;letter-spacing:.03em;text-transform:uppercase}
/* Nav: four top-level items, three of them dropdowns. Labels are
   full names now ("More Cost Calculator"), so the bar is taller
   than the old abbreviation row and the dropdown exists precisely
   to stop the bar growing again as tools are added. */
.nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap;align-items:center}
.nav a,.nav-btn{
  color:#c3d4e2;font-size:.855rem;font-weight:500;padding:8px 11px;border-radius:7px;white-space:nowrap;
}
.nav a:hover,.nav-btn:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.nav a[aria-current="page"]{background:rgba(255,255,255,.13);color:#fff}
.nav-grp{position:relative;display:flex}
.nav-btn{
  background:none;border:0;font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
}
.nav-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav-grp.has-current > .nav-btn{background:rgba(255,255,255,.13);color:#fff}
.caret{
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.65;transition:transform .15s ease;
}
.nav-grp.open > .nav-btn .caret{transform:rotate(180deg)}
.nav-menu{
  display:none;position:absolute;top:100%;left:0;z-index:70;min-width:262px;
  padding:7px;border-radius:11px;
  background:#0d2b45;border:1px solid rgba(255,255,255,.13);
  box-shadow:0 22px 38px rgba(4,14,24,.42);
}
.nav-grp.open > .nav-menu{display:block}
.nav-menu a{display:block;padding:8px 11px;font-size:.855rem;border-radius:6px;white-space:nowrap}
.nav-menu a:hover{background:rgba(255,255,255,.1)}
.nav-menu .nav-hub{
  font-weight:700;color:#fff;border-bottom:1px solid rgba(255,255,255,.12);
  border-radius:6px 6px 0 0;margin-bottom:4px;padding-bottom:9px;
}
.nav-toggle{
  display:none;margin-left:auto;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  color:#fff;border-radius:8px;padding:7px 11px;font-size:.85rem;cursor:pointer;
}
@media (max-width:1040px){
  .nav-toggle{display:block}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--navy-2);padding:10px 14px 16px;flex-direction:column;gap:2px;
    align-items:stretch;max-height:calc(100vh - 62px);overflow-y:auto;
    box-shadow:0 18px 30px rgba(6,18,30,.35);
  }
  .nav.open{display:flex}
  .nav a,.nav-btn{padding:10px 12px;font-size:.92rem;width:100%;text-align:left}
  .nav-btn{justify-content:space-between}
  .nav-grp{display:block}
  .nav-menu{
    position:static;display:none;min-width:0;box-shadow:none;border:0;
    background:rgba(0,0,0,.22);margin:2px 0 6px;padding:5px;
  }
  .nav-grp.open > .nav-menu{display:block}
  .nav-menu a{padding:9px 12px;font-size:.88rem;white-space:normal}
}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(1100px 420px at 12% -10%,rgba(240,160,30,.16),transparent 60%),
    linear-gradient(160deg,var(--navy) 0%,#0d2b45 55%,#113a5c 100%);
  color:#eaf2f8;padding:64px 0 72px;position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:58px 58px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 78%);
}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:#fff;max-width:18em}
.hero p.lede{font-size:1.1rem;color:#b8cbdb;max-width:44em;margin-bottom:1.6em}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#f3b64a;
  background:rgba(240,160,30,.13);border:1px solid rgba(240,160,30,.3);
  padding:5px 11px;border-radius:100px;margin-bottom:18px;
}
.hero-stats{display:flex;flex-wrap:wrap;gap:28px;margin-top:34px}
.hero-stats div{min-width:0}
.hero-stats b{display:block;font-size:1.6rem;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;line-height:1.2}
.hero-stats span{font-size:.78rem;color:#93aec4;letter-spacing:.02em}

/* page hero (tool pages) */
.page-head{
  background:linear-gradient(165deg,var(--navy),#123451);color:#e7f0f7;padding:34px 0 40px;
}
.page-head h1{color:#fff;font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:.35em}
.page-head p{color:#aec4d6;margin:0;max-width:56em;font-size:.95rem}
.crumbs{font-size:.78rem;color:#8ea9bf;margin-bottom:14px;display:flex;gap:7px;flex-wrap:wrap}
.crumbs a{color:#a8c1d5}
.crumbs span{opacity:.5}

/* ---------- cards / grid ---------- */
.section{padding:52px 0}
.section.tight{padding:34px 0}
.section-head{max-width:44em;margin-bottom:26px}
.section-head p{color:var(--ink-2);margin-bottom:0}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card-pad{padding:22px}
.grid{display:grid;gap:16px}
/* minmax(0,1fr) rather than 1fr: a track that can shrink below its
   content stops a long word or a wide table from pushing the grid
   past the viewport. Third time this has bitten on this site. */
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid-3,.grid-2{grid-template-columns:1fr}}

/* tool cards */
.tool-card{
  display:flex;flex-direction:column;gap:8px;padding:20px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  color:inherit;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.tool-card:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:#c9dcec}
.tool-card .ico{
  width:36px;height:36px;border-radius:9px;display:grid;place-items:center;
  background:var(--brand-lt);color:var(--brand);margin-bottom:4px;
}
.tool-card .ico svg{width:19px;height:19px}
.tool-card h3{margin:0;font-size:1.02rem}
.tool-card p{margin:0;font-size:.865rem;color:var(--muted);line-height:1.5}
.tool-card .go{margin-top:auto;padding-top:10px;font-size:.82rem;font-weight:700;color:var(--brand)}
.tool-card .tag{
  align-self:flex-start;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:var(--accent-lt);color:#96620a;border:1px solid #f6dfb4;padding:2px 7px;border-radius:5px;
}

/* ---------- calculator layout ---------- */
.calc-shell{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:22px;align-items:start}
@media (max-width:1000px){.calc-shell{grid-template-columns:minmax(0,1fr)}}
.calc-panel,.result-col,.result-body,.panel-body{min-width:0}
.calc-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.panel-head{
  padding:15px 20px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;
  justify-content:space-between;gap:12px;
}
.panel-head h2{margin:0;font-size:.95rem;letter-spacing:0;text-transform:uppercase;color:var(--ink-2);font-weight:700}
.panel-body{padding:20px}
.panel-foot{padding:14px 20px;border-top:1px solid var(--line-2);background:#fafcfd;border-radius:0 0 var(--radius) var(--radius)}

.field-row{display:grid;gap:14px;margin-bottom:14px}
.field-row.c2{grid-template-columns:1fr 1fr}
.field-row.c3{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){.field-row.c2,.field-row.c3{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field > label{font-size:.78rem;font-weight:600;color:var(--ink-2);letter-spacing:.01em}
.field .hint{font-size:.72rem;color:var(--muted);line-height:1.4}
.io{
  display:flex;align-items:center;background:#fff;border:1px solid #cfd9e3;border-radius:var(--radius-sm);
  transition:border-color .14s,box-shadow .14s;overflow:hidden;
}
.io:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(17,99,165,.12)}
.io input,.io select{
  border:0;background:transparent;font:inherit;font-size:.95rem;color:var(--ink);
  padding:9px 11px;width:100%;min-width:0;outline:none;font-variant-numeric:tabular-nums;
}
.io input::-webkit-outer-spin-button,.io input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.io input[type=number]{-moz-appearance:textfield}
.io .unit{
  padding:0 10px;font-size:.78rem;color:var(--muted);background:#f4f7fa;align-self:stretch;
  display:flex;align-items:center;border-left:1px solid var(--line);white-space:nowrap;
  flex:0 0 auto;
}
.io .unit select{width:auto;min-width:3.4em}
.io .unit.pre{border-left:0;border-right:1px solid var(--line);font-weight:600;color:var(--ink-2)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2366798c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:26px!important;cursor:pointer}

/* segmented control */
.seg{display:flex;background:#eef3f8;border-radius:9px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{
  flex:1 1 auto;border:0;background:transparent;font:inherit;font-size:.8rem;font-weight:600;
  color:var(--ink-2);padding:7px 8px;border-radius:7px;cursor:pointer;white-space:nowrap;
  font-family:var(--sans);
}
.seg button[aria-pressed="true"]{background:#fff;color:var(--brand-dk);box-shadow:0 1px 3px rgba(16,35,52,.14)}
.seg.sm button{font-size:.74rem;padding:6px 6px}

/* checkbox */
.check{display:flex;gap:9px;align-items:flex-start;font-size:.84rem;color:var(--ink-2);cursor:pointer}
.check input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--brand);flex:0 0 auto}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:inherit;font-size:.9rem;font-weight:600;padding:10px 18px;border-radius:9px;
  border:1px solid transparent;cursor:pointer;transition:.15s;text-decoration:none;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dk)}
.btn-ghost{background:#fff;color:var(--ink-2);border-color:#cfd9e3}
.btn-ghost:hover{background:#f5f9fc;border-color:#b9c9d8}
.btn-accent{background:var(--accent);color:#241703}
.btn-accent:hover{background:#d98a08}
.btn-sm{font-size:.8rem;padding:7px 12px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- results ---------- */
.result-col{position:sticky;top:80px}
@media (max-width:1000px){.result-col{position:static}}
.result-hero{
  background:linear-gradient(160deg,var(--navy),#123a5b);color:#fff;padding:20px 22px;
  border-radius:var(--radius) var(--radius) 0 0;
}
.result-hero .label{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:#9db8cd;font-weight:700}
.result-hero .value{
  font-size:2.1rem;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-top:4px;
  font-variant-numeric:tabular-nums;
}
.result-hero .sub{font-size:.83rem;color:#a9c2d6;margin-top:6px;display:flex;flex-wrap:wrap;gap:6px 14px}
.result-hero .sub b{color:#fff;font-weight:600}
.result-body{background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow)}

.kpi-grid{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line-2)}
.kpi{padding:13px 16px;border-right:1px solid var(--line-2)}
.kpi:nth-child(2n){border-right:0}
.kpi:nth-child(n+3){border-top:1px solid var(--line-2)}
.kpi .k{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700}
.kpi .v{font-size:1.12rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:2px}
.kpi .v.ok{color:var(--ok)}
.kpi .v.bad{color:var(--bad)}

/* table */
.tbl{width:100%;border-collapse:collapse;font-size:.855rem}
.tbl th,.tbl td{padding:8px 16px;text-align:right;border-bottom:1px solid var(--line-2)}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl th{
  font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  font-weight:700;background:#fafcfd;white-space:nowrap;
}
.tbl td{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.total td{font-weight:700;color:var(--ink);background:#f7fbfd;border-top:1px solid var(--line)}
.tbl td.name{color:var(--ink)}
.tbl .muted{color:var(--muted);font-size:.8rem}
.tbl td.dim{color:var(--muted)}
.tbl-wrap{overflow-x:auto}
/* wide comparison tables collapse into stacked cards on a phone,
   because a six-column table that scrolls sideways hides the answer */
/* the .prose prefix is load-bearing: ".prose td" sets a border and a cell
   padding, and it is declared later in this file, so an unprefixed
   ".tbl-cards td" loses the cascade and the card keeps its table borders */
@media (max-width:640px){
  .tbl-cards thead,.prose .tbl-cards thead{display:none}
  .tbl-cards,.tbl-cards tbody,.tbl-cards tr,.tbl-cards td{display:block;width:100%}
  .tbl-cards tr,.prose .tbl-cards tr{
    /* minmax(0,1fr), not 1fr: a long cell would otherwise push the column
       past the viewport instead of wrapping inside it */
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 14px;
    padding:12px 0;border-bottom:1px solid var(--line-2);
  }
  .prose .tbl-cards td,.tbl-cards td{
    border:0;padding:0;text-align:right;font-size:.85rem;min-width:0;overflow-wrap:anywhere;
  }
  .prose .tbl-cards td:first-child,.tbl-cards td:first-child{
    grid-column:1 / -1;text-align:left;font-weight:600;color:var(--ink);
    font-size:.9rem;margin-bottom:3px;
  }
  /* an odd number of value cells leaves the last one alone on its row —
     let it use the full width instead of half of it */
  .prose .tbl-cards td:last-child:nth-child(even):not(:first-child),
  .tbl-cards td:last-child:nth-child(even):not(:first-child){grid-column:1 / -1;text-align:left}
  .tbl-cards td[data-l]::before{
    content:attr(data-l);display:block;font-size:.66rem;letter-spacing:.04em;
    text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:1px;
  }
}
.tbl-compact th,.tbl-compact td{padding:6px 10px;font-size:.8rem}

/* stacked bar */
.stackbar{display:flex;height:10px;border-radius:100px;overflow:hidden;background:#eef3f8;margin:14px 0 10px}
.stackbar i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.74rem;color:var(--ink-2);margin-bottom:4px}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block}

/* badges, notes */
.badge{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:5px;vertical-align:middle;
}
.txt-ok{color:var(--ok)}
.txt-bad{color:var(--bad)}
.badge.ok{background:var(--ok-lt);color:var(--ok)}
.badge.warn{background:var(--accent-lt);color:#8f5c06}

/* ---------- input validation ----------
   The warning box sits above the result, not inside the form: the number is
   what people read, so the reason it may be wrong has to be in the same
   field of view. Amber = suspect input, red = the calculation cannot be
   trusted at all. */
.warn-box{
  background:var(--accent-lt);border:1px solid #f2d9a8;border-radius:var(--radius-sm);
  padding:12px 15px;margin-bottom:14px;font-size:.84rem;line-height:1.55;color:#7a4e05;
}
.warn-box ul{margin:0;padding-left:17px;list-style:disc}
.warn-box li+li{margin-top:6px}
.warn-box b{font-weight:700;color:#6b4300}
.warn-box.is-error{background:var(--bad-lt);border-color:#f3c6d0;color:#8c1a32}
.warn-box.is-error b{color:#7a1329}
/* a red rule down the side of the result when the inputs cannot be trusted,
   without dimming the hero — people still need to read why it is blank */
.result-col[data-invalid]{border-left:3px solid var(--bad);padding-left:16px;margin-left:-19px}
@media (max-width:900px){.result-col[data-invalid]{padding-left:13px;margin-left:-16px}}

/* the detail blocks stay legible but read as struck out: those figures came
   from the same bad input, and at full contrast they look like a second,
   usable answer sitting right under the blank one */
.result-col[data-invalid] .result-body{opacity:.35;transition:opacity .15s}

input[aria-invalid="true"],select[aria-invalid="true"]{
  border-color:var(--bad)!important;background:#fff8f9;
}
input[aria-invalid="true"]:focus,select[aria-invalid="true"]:focus{
  outline-color:var(--bad);box-shadow:0 0 0 3px rgba(191,37,68,.12);
}
.badge.bad{background:var(--bad-lt);color:var(--bad)}
.badge.info{background:var(--brand-lt);color:var(--brand-dk)}

.note{
  font-size:.8rem;line-height:1.55;color:var(--ink-2);background:#f7fafc;border:1px solid var(--line);
  border-left:3px solid var(--brand);border-radius:6px;padding:10px 13px;margin:14px 0 0;
}
.note.warn{border-left-color:var(--accent);background:var(--accent-lt);color:#6d4a09;border-color:#f4e2c2}
.note strong{color:inherit}

/* the tariff line this page's arithmetic rests on — shown as a code plate
   rather than buried in a sentence, because it is the one input a reader may
   want to check against their own customs declaration */
.hs-line{
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin:12px 0 0;
  padding:11px 14px;border:1px solid var(--line);border-radius:8px;background:#fbfcfd;
  font-size:.86rem;line-height:1.45;
}
.hs-code{
  font-weight:700;color:var(--ink);letter-spacing:.03em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.hs-desc{color:var(--ink-2);flex:1 1 220px;min-width:0}
.hs-src{width:100%;font-size:.76rem;color:var(--muted);border-top:1px solid var(--line-2);padding-top:7px}
.hs-note{font-size:.85rem;line-height:1.55;color:var(--ink-2);margin:8px 0 0}
@media (max-width:640px){
  .hs-line{padding:10px 12px}
  .hs-src{font-size:.74rem}
}

/* recommended-tool list: sits inside prose, reads as a list of jobs
   rather than a row of marketing cards */
.tool-links{display:grid;gap:10px;margin:1.3em 0 0}
.tool-links a{
  display:block;padding:13px 15px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow);text-decoration:none;
}
.tool-links a:hover{border-color:#c6d8e8;box-shadow:var(--shadow-lg);text-decoration:none}
.tool-links b{display:block;font-size:.95rem;color:var(--navy);margin-bottom:3px}
.tool-links b::after{content:" \2192";color:var(--accent)}
.tool-links span{display:block;font-size:.86rem;line-height:1.55;color:var(--muted)}

/* prose */
/* guides hub — "start here" reading order */
.start-list{
  list-style:none;counter-reset:s;padding:0;margin:0;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);background:var(--line);
}
.start-list li{
  counter-increment:s;background:#fff;display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:14px;padding:16px 20px;
  border-bottom:1px solid var(--line-2);
}
.start-list li:last-child{border-bottom:0}
.start-list li::before{
  content:counter(s);width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  background:var(--brand-lt);color:var(--brand);font-weight:800;font-size:.78rem;
  display:grid;place-items:center;font-variant-numeric:tabular-nums;
}
.start-list a{font-weight:700;color:var(--navy);font-size:.97rem;line-height:1.4}
.start-list a:hover{color:var(--brand)}
.start-list span{display:block;font-size:.86rem;color:var(--muted);margin-top:3px;line-height:1.5}

/* mistake list — a guide's "where the number goes wrong" block */
.prose .mistake-list{list-style:none;padding:0;margin:1.2em 0;display:grid;gap:12px}
.prose .mistake-list li{position:relative;padding-left:28px;font-size:.95rem;line-height:1.6}
.prose .mistake-list li::before{
  content:"!";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;
  display:grid;place-items:center;font-size:.72rem;font-weight:800;
  background:var(--accent-lt);color:#8a5a08;border:1px solid #f0d9ae;
}
.prose .mistake-list strong{display:block;color:var(--ink);margin-bottom:1px}

.prose{max-width:760px;font-size:1rem;color:var(--ink-2)}
.prose h2{margin-top:2em;color:var(--ink)}
.prose h3{margin-top:1.7em;color:var(--ink)}
.prose strong{color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;font-size:.88rem;margin:1.2em 0}
.prose th,.prose td{padding:8px 10px;border:1px solid var(--line);text-align:left}
.prose th{background:#f7fafc;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.prose code{font-family:var(--mono);font-size:.86em;background:#f1f5f9;padding:1px 5px;border-radius:4px;color:var(--brand-dk)}
.prose .num{text-align:right;font-variant-numeric:tabular-nums}
.prose tr.total td{font-weight:700;color:var(--ink);background:#f7fbfd;border-top:1px solid var(--line)}
.prose blockquote{margin:1.4em 0;padding:2px 0 2px 16px;border-left:3px solid var(--accent);color:var(--ink-2)}

details.faq{border-bottom:1px solid var(--line);padding:14px 0}
details.faq summary{
  cursor:pointer;font-weight:600;font-size:.95rem;color:var(--ink);list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:flex-start;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--brand);font-weight:400;font-size:1.2rem;line-height:1;flex:0 0 auto}
details.faq[open] summary::after{content:"–"}
details.faq p{margin:.7em 0 0;font-size:.9rem;color:var(--ink-2)}

/* CTA band */
.cta-band{
  background:linear-gradient(120deg,#0e4f83,#1163a5 55%,#1580c4);
  color:#fff;border-radius:var(--radius);padding:32px 34px;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:space-between;
}
.cta-band h3{margin:0 0 4px;color:#fff;font-size:1.25rem}
.cta-band p{margin:0;color:#c6dcf0;font-size:.9rem;max-width:46em}

/* footer */
.site-footer{background:var(--navy);color:#93aec4;padding:44px 0 26px;margin-top:56px;font-size:.85rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:26px}
@media (max-width:1080px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
@media (max-width:840px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.site-footer h4{color:#dce7f1;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.site-footer a{color:#a8c1d5;display:block;padding:3px 0;font-size:.85rem}
.site-footer a:hover{color:#fff;text-decoration:none}
.footer-note{border-top:1px solid rgba(255,255,255,.09);margin-top:28px;padding-top:18px;font-size:.76rem;color:#7a93a8;line-height:1.6}

/* toast */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);opacity:0;
  background:var(--ink);color:#fff;padding:10px 18px;border-radius:100px;font-size:.85rem;
  box-shadow:var(--shadow-lg);transition:.22s;z-index:200;pointer-events:none;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.center{text-align:center}
.mt-0{margin-top:0}.mt-1{margin-top:10px}.mt-2{margin-top:20px}.mt-3{margin-top:30px}
.mb-0{margin-bottom:0}
.small{font-size:.84rem;color:var(--muted)}

@media print{
  .site-header,.site-footer,.cta-band,.btn,.nav-toggle,.seg{display:none!important}
  body{background:#fff}
  .calc-shell{display:block}
  .result-col{position:static}
  .calc-panel,.result-body{box-shadow:none;border-color:#ccc}
}

/* dynamic multi-row item editor */
.item-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) 40px;gap:10px;align-items:end;margin-bottom:12px}
.item-row .field > label{font-size:.72rem}
.item-row .io input{padding:8px 9px;font-size:.88rem}
.item-row .kill{
  height:38px;border:1px solid #cfd9e3;background:#fff;border-radius:8px;cursor:pointer;
  color:var(--muted);font-size:1.05rem;line-height:1;padding:0;
}
.item-row .kill:hover{background:var(--bad-lt);border-color:#e9b7c2;color:var(--bad)}
.item-row.tiers{grid-template-columns:repeat(3,minmax(0,1fr)) 40px}
@media (max-width:720px){
  .item-row,.item-row.tiers{grid-template-columns:1fr 1fr;border-bottom:1px dashed var(--line);padding-bottom:12px}
  .item-row .kill,.item-row.tiers .kill{grid-column:1 / -1;width:auto;justify-self:end;padding:0 22px}
  .prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .prose table th,.prose table td{white-space:nowrap}
  .cta-band{padding:24px 20px}
}

/* a lone card on the final row fills it instead of leaving two gaps */
.tools-grid > :last-child:nth-child(3n+1){grid-column:1 / -1}
@media (max-width:720px){.tools-grid > :last-child:nth-child(3n+1){grid-column:auto}}