@font-face {
  font-family:Manrope;
  src:url('/assets/fonts/manrope-regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap}
@font-face {
  font-family:Manrope;
  src:url('/assets/fonts/manrope-semibold.ttf') format('truetype');
  font-weight:500 650;
  font-style:normal;
  font-display:swap}
@font-face {
  font-family:Manrope;
  src:url('/assets/fonts/manrope-extrabold.ttf') format('truetype');
  font-weight:700 900;
  font-style:normal;
  font-display:swap}
:root {
  --paper:#fcfcfd;
  --white:#ffffff;
  --ink:#141820;
  --muted:#69717f;
  --line:#dfe3eb;
  --soft:#f0f3f9;
  --accent:#285af4;
  --radius:12px;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none}
* {
  box-sizing:border-box}
body {
  margin:0;
  font-size:15px;
  line-height:1.55}
a {
  color:inherit;
  text-decoration:none}
button,input,select {
  font:inherit}
button,a,input,select,summary {
  -webkit-tap-highlight-color:transparent}
button,a {
  touch-action:manipulation}
button {
  cursor:pointer}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:2px solid var(--focus-visible-ink);
  outline-offset:3px;
  border-radius:3px}
input:focus,select:focus {
  outline:none;
  border-color:var(--focus-line);
  box-shadow:var(--focus-ring)}
button:disabled {
  opacity:.5;
  cursor:not-allowed}
h1,h2,h3,p {
  margin:0}
h1,h2,h3 {
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.04em}
p {
  color:var(--muted)}
main,.site-header,.site-footer {
  max-width:1376px;
  margin:auto;
  padding-left:56px;
  padding-right:56px}
.site-header {
  height:105px;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line);
  gap:60px}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap}
.brand>span {
  font-size:27px;
  font-weight:650;
  letter-spacing:-1.4px}
.site-header nav {
  display:flex;
  gap:30px;
  font-size:13px}
.site-header nav a:hover,.site-footer a:hover {
  text-decoration:underline;
  text-underline-offset:5px}
.header-note {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  font:10px "SFMono-Regular",Consolas,monospace;
  letter-spacing:.04em}
.header-note i,.status-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#285af4}
.skip {
  position:absolute;
  top:-100px;
  left:15px;
  padding:12px;
  background:white;
  z-index:20}
.skip:focus {
  top:10px}
.eyebrow {
  font:10px/1.6 "SFMono-Regular",Consolas,monospace;
  letter-spacing:.12em;
  color:var(--muted)}
.hero {
  display:grid;
  grid-template-columns:1.02fr 1fr;
  gap:54px;
  align-items:center;
  padding:72px 0 64px}
.hero-copy>.eyebrow {
  display:flex;
  gap:10px;
  align-items:center}
.small-line {
  width:27px;
  height:1px;
  background:var(--accent)}
.hero h1 {
  font-size:clamp(40px,4.7vw,68px);
  line-height:1.04;
  margin:25px 0 24px;
  letter-spacing:-.055em}
.hero h1>span {
  color:#285af4}
.hero-lead {
  font-size:17px;
  line-height:1.65;
  max-width:390px;
  margin-bottom:27px}
.primary {
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--white);
  min-height:47px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:38px;
  padding:12px 20px;
  border-radius:6px;
  font-size:13px;
  font-weight:550;
  transition:background .2s,transform .2s,box-shadow .2s}
.primary:hover {
  background:#1d48d4;
  transform:translateY(-1px)}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:23px}
.section-heading h2 {
  font-size:25px}
.tool-section {
  padding:12px 0 58px}
.tool-cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px}
.tool-card {
  border:1px solid var(--line);
  padding:25px 27px 20px;
  border-radius:10px;
  background:var(--white);
  transition:border-color .2s,transform .2s}
.tool-card:hover {
  border-color:#9badcf;
  transform:translateY(-4px)}
.card-top {
  display:flex;
  align-items:center;
  justify-content:space-between}
.card-number {
  font:11px monospace;
  color:#8a91a0}
.card-arrow {
  font-size:21px;
  font-weight:300}
.tool-card h3 {
  font-size:23px;
  margin-bottom:12px}
.tool-card p {
  font-size:13px;
  line-height:1.65;
  min-height:65px;
  max-width:260px}
.tool-link {
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:15px;
  font-size:11px;
  display:flex;
  justify-content:space-between;
  gap:8px}
.tool-link b {
  font-weight:400}
.manifest {
  border-top:1px solid var(--line);
  padding:36px 0 60px;
  display:grid;
  grid-template-columns:1fr 1.1fr 1.1fr;
  gap:40px}
.manifest h2 {
  font-size:35px}
.manifest p {
  font-size:14px;
  margin-bottom:19px;
  line-height:1.75}
.manifest>.eyebrow {
  font-size:10px;
  padding-top:5px}
.text-link {
  display:inline-block;
  font-size:12px;
  border-bottom:1px solid #a2aec9;
  padding-bottom:5px}
.text-link:hover {
  border-color:var(--ink)}
.site-footer {
  border-top:1px solid var(--line);
  padding-top:31px;
  padding-bottom:30px;
  display:flex;
  gap:50px;
  align-items:center}
.footer-brand>span {
  font-size:20px;
  letter-spacing:-1px}
.site-footer p {
  font-size:11px;
  margin-top:10px}
.site-footer nav {
  display:flex;
  gap:22px;
  font-size:11px;
  margin-left:auto;
  flex-wrap:wrap}
.copyright {
  font:10px monospace;
  color:var(--muted);
  white-space:nowrap}
.page-heading {
  padding:48px 0 36px;
  display:flex;
  gap:50px;
  align-items:flex-end;
  justify-content:space-between}
.page-heading h1 {
  font-size:42px;
  max-width:740px;
  margin-top:14px;
  letter-spacing:-.05em}
.page-heading>p {
  font-size:13px;
  line-height:1.7;
  max-width:290px}
.tool-nav {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  background:#f1f3f7;
  border:1px solid var(--line);
  border-radius:8px;
  padding:4px;
  gap:4px;
  margin-bottom:29px}
.tool-nav a {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 17px;
  font-size:12px;
  border-radius:5px;
  white-space:nowrap}
.tool-nav a>span {
  font:10px monospace;
  color:#7b8497}
.tool-nav a>b {
  margin-left:auto;
  font-size:16px;
  font-weight:400}
.tool-nav a[aria-current] {
  background:var(--white);
  box-shadow:0 2px 5px #14182009}
.tool-nav a[aria-current]>span {
  color:var(--accent)}
.workbench {
  display:grid;
  grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);
  gap:28px;
  align-items:start}
form {
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  padding:27px;
  min-width:0}
.section-title {
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:18px}
.section-title>span {
  width:23px;
  height:23px;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  font:9px monospace;
  color:var(--muted)}
.section-title h2 {
  font-size:20px;
  letter-spacing:-.03em}
.section-title:not(:first-child) {
  margin-top:29px;
  padding-top:25px;
  border-top:1px solid var(--line)}
.field-help {
  font-size:11px;
  line-height:1.7;
  margin:10px 0 17px}
.fields {
  display:grid;
  gap:15px;
  margin-bottom:15px}
.two {
  grid-template-columns:repeat(2,minmax(0,1fr))}
.three {
  grid-template-columns:repeat(3,minmax(0,1fr))}
.field {
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0}
.field>span {
  font-size:12px;
  color:var(--label-ink)}
.field input,.field select {
  width:100%;
  min-width:0;
  border:1px solid var(--control-line);
  background:var(--control-bg);
  border-radius:8px;
  padding:10px 13px;
  color:var(--ink);
  font-size:14px;
  height:46px;
  box-shadow:var(--control-shadow);
  transition:border-color .18s,box-shadow .18s}
.field input {
  font-variant-numeric:tabular-nums}
.field select {
  appearance:none;
  -webkit-appearance:none;
  padding-right:34px;
  text-overflow:ellipsis;
  background-image:var(--chevron);
  background-repeat:no-repeat;
  background-position:right 13px center;
  cursor:pointer}
.field input:hover,.field select:hover {
  border-color:var(--control-hover-line)}
.carton-row {
  padding:16px 0;
  border-top:1px solid var(--line)}
.row-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:11px monospace;
  margin-bottom:12px}
.row-title button {
  font-size:11px;
  border:0;
  background:none;
  color:var(--muted-ctrl);
  padding:4px 0}
.row-title button:hover {
  color:var(--muted-ctrl-hover);
  text-decoration:underline;
  text-underline-offset:3px}
.carton-row .fields {
  margin-bottom:0}
.five {
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px}
.five .field input {
  padding-left:9px;
  padding-right:4px}
.add-row {
  border:1px dashed var(--addrow-line);
  width:100%;
  padding:12px;
  background:var(--addrow-bg);
  border-radius:8px;
  font-size:12px;
  color:var(--addrow-ink);
  margin-top:8px;
  transition:background .18s,border-color .18s}
.add-row:hover {
  background:var(--addrow-hover-bg);
  border-color:var(--addrow-hover-line)}
.form-actions {
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:26px;
  flex-wrap:wrap}
.quiet {
  border:0;
  background:none;
  font-size:12px;
  color:var(--quiet-ink);
  padding:10px 0}
.quiet:hover {
  color:var(--quiet-hover);
  text-decoration:underline;
  text-underline-offset:3px}
.result-card {
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--ink);
  padding:25px;
  border-radius:12px;
  position:sticky;
  top:22px;
  overflow:hidden;
  min-width:0}
.result-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:22px;
  border-bottom:1px solid #d4dcea}
.result-top .eyebrow {
  color:#6e7b95;
  font-size:12px}
.status-dot {
  background:#285af4}
.result-kicker {
  font-size:12px;
  color:#6d7689;
  margin-top:23px}
.hero-number {
  font-size:64px;
  line-height:1.05;
  letter-spacing:-.055em;
  font-weight:400;
  margin:7px 0 9px;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere}
.hero-number small {
  font-size:24px;
  letter-spacing:-.02em;
  color:#65728c}
.result-card p {
  color:#626e84}
.result-sub {
  font-size:12px;
  margin:4px 0 21px}
.result-metrics {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:17px 20px;
  margin:22px 0;
  padding-top:20px;
  border-top:1px solid #d4dcea}
.metric span {
  display:block;
  font-size:10px;
  color:#697990}
.metric strong {
  display:block;
  font-weight:450;
  font-size:22px;
  letter-spacing:-.025em;
  margin-top:4px;
  overflow-wrap:anywhere}
.metric small {
  font-size:11px;
  color:#71819b}
.result-note {
  font-size:10px;
  line-height:1.7;
  padding:13px 15px;
  background:#f0f4ff;
  border-radius:5px}
.result-actions {
  display:flex;
  gap:7px;
  margin-top:24px;
  flex-wrap:wrap}
.result-actions button {
  background:transparent;
  border:1px solid #ced7eb;
  color:#20365e;
  border-radius:5px;
  padding:8px 12px;
  font-size:10px;
  flex:1}
.result-actions button:hover {
  background:#e5edff}
.result-card #action-status {
  font-size:11px;
  margin:12px 0 0;
  min-height:0}
.local-note {
  font-size:10px;
  line-height:1.8;
  margin-top:13px!important;
  color:#738099!important}
.local-note button {
  padding:0;
  background:none;
  border:0;
  text-decoration:underline;
  text-underline-offset:3px;
  color:inherit;
  font-size:inherit}
.compare-inputs {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px}
fieldset {
  border:1px solid var(--line);
  padding:14px;
  border-radius:6px;
  min-width:0;
  margin:0}
legend {
  font-size:10px;
  padding:0 5px}
legend span {
  color:var(--accent);
  margin-right:4px}
.compare-inputs .fields {
  gap:10px;
  margin-bottom:0}
.compare-inputs .field input {
  padding-left:8px}
.compare-results {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
  margin:24px 0 18px}
.compare-result {
  border:1px solid #d7deec;
  padding:13px;
  border-radius:6px;
  min-width:0}
.compare-result span {
  font-size:10px;
  color:#697791}
.compare-result strong {
  font-size:24px;
  font-weight:450;
  display:block;
  margin:4px 0}
.compare-result small {
  font-size:11px;
  color:#626e84;
  display:block}
.compare-result.proposed {
  background:#edf2ff;
  color:var(--ink);
  border-color:#edf2ff}
.compare-result.proposed span,.compare-result.proposed small {
  color:#596f9c}
.preset-line {
  display:flex;
  gap:10px;
  align-items:flex-end}
.preset-line .field {
  flex:1}
.secondary {
  background:var(--secondary-bg);
  border:1px solid var(--secondary-line);
  border-radius:8px;
  color:var(--secondary-ink);
  height:46px;
  padding:9px 16px;
  font-size:12px;
  transition:background .18s,border-color .18s}
.secondary:hover {
  background:var(--secondary-hover-bg);
  border-color:var(--secondary-hover-line)}
.additional {
  margin:18px 0 22px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:13px 0}
.additional summary {
  cursor:pointer;
  font-size:11px}
.additional summary span {
  float:right;
  color:#7b879e;
  font-size:11px}
.additional .fields {
  margin-top:15px}
.additional p {
  margin-bottom:0}
.checkbox {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:11px}
.checkbox input {
  accent-color:var(--ink);
  width:16px;
  height:16px}
.diagram {
  background:#f2f5fb;
  border-radius:7px;
  padding:14px;
  margin:20px 0 15px;
  color:var(--ink)}
.diagram svg {
  display:block;
  width:100%;
  max-height:260px;
  margin:auto;
  overflow:visible}
.diagram rect.carton {
  fill:#aac0ff;
  stroke:#fff;
  stroke-width:1.5;
  vector-effect:non-scaling-stroke;
  animation:layout-in .35s ease both}
.diagram rect.carton:nth-of-type(3n) {
  fill:#7398f8}
.diagram p {
  color:#5d7097;
  font:9px monospace;
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  gap:10px}
.diagram .frame {
  fill:#e1e7f2;
  stroke:#829bc9;
  stroke-width:1;
  vector-effect:non-scaling-stroke}
.diagram text {
  fill:#233b70;
  font:11px monospace}
.diagram-caption {
  font-size:10px;
  line-height:1.6;
  color:#71819d}
.load-line {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid #d4dcea;
  padding:10px 0;
  font-size:11px}
.load-line span {
  color:#6a7893}
.load-line b {
  font-weight:450}
.result-table {
  overflow:auto;
  margin-top:20px}
.result-table table {
  width:100%;
  border-collapse:collapse;
  font-size:11px;
  white-space:nowrap;
  text-align:left}
.result-table td,.result-table th {
  padding:9px 5px;
  border-bottom:1px solid #d4dcea}
.result-table th {
  font-weight:400;
  color:#6c7991}
.guide {
  padding:48px 0 60px;
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:65px}
.guide h2 {
  font-size:32px;
  margin:15px 0 20px;
  max-width:330px}
.guide-copy h3 {
  font-size:17px;
  letter-spacing:-.02em;
  margin:0 0 12px}
.guide-copy p {
  font-size:13px;
  line-height:1.75}
.guide-copy a {
  text-decoration:underline;
  text-underline-offset:3px}
.worked-example {
  margin:22px 0;
  padding:18px 20px;
  border-left:2px solid #285af4;
  background:#f1f4fc}
.worked-example>span {
  font:9px/1.5 monospace;
  color:var(--muted)}
.worked-example p {
  margin-top:10px;
  font-size:12px}
.worked-example strong {
  display:block;
  font-weight:500;
  color:var(--ink);
  margin-top:6px}
.document {
  max-width:900px;
  margin:0 auto;
  padding-bottom:65px}
.document .page-heading {
  display:block}
.document .page-heading h1 {
  max-width:750px;
  font-size:50px}
.document .page-heading>p {
  max-width:100%;
  margin-top:22px}
.document h2 {
  font-size:24px;
  margin:29px 0 13px}
.document>p,.document li {
  font-size:14px;
  line-height:1.8}
.document>p+p {
  margin-top:12px}
.sources {
  list-style:none;
  margin:0;
  padding:0}
.sources li {
  padding:17px 0;
  border-bottom:1px solid var(--line)}
.sources a {
  font-size:13px;
  text-decoration:underline;
  text-underline-offset:4px}
.sources p {
  font-size:12px;
  margin-top:6px}
.document .text-link {
  margin-top:25px}
#error,.notice {
  padding:13px 16px;
  margin-top:18px;
  background:#fff0d9;
  border:1px solid #e5bf86;
  border-radius:5px;
  color:#7b4c1e;
  font-size:12px}
.error-sheet {
  padding:20px 0!important;
  color:#a04816!important}
.dirty .result-top .status-dot {
  background:#ff9254}
.dirty .result-top:after {
  content:'UPDATE NEEDED';
  font:11px Manrope,sans-serif;
  font-weight:600;
  letter-spacing:.04em;
  color:#fff;
  background:#ff9254;
  padding:4px 8px;
  border-radius:20px}
.dirty .result-top>.status-dot {
  display:none}
#results[hidden] {
  display:none}
@keyframes layout-in {
  from {
  opacity:.3}
to {
  opacity:1}
}
@media(min-width:1500px) {
  main,.site-header,.site-footer {
  max-width:1440px;
  padding-left:65px;
  padding-right:65px}
}
@media(max-width:1050px) {
  main,.site-header,.site-footer {
  padding-left:30px;
  padding-right:30px}
.header-note {
  display:none}
.site-header nav {
  margin-left:auto}
.hero {
  gap:25px}
.hero h1 {
  font-size:48px}
.hero-lead {
  font-size:15px}
.page-heading {
  gap:25px}
.page-heading h1 {
  font-size:35px}
.tool-card {
  padding:22px}
.workbench {
  gap:18px;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
form,.result-card {
  padding:22px}
.five {
  grid-template-columns:repeat(3,minmax(0,1fr))}
.site-footer {
  gap:25px}
.copyright {
  display:none}
.manifest {
  grid-template-columns:1fr 1fr}
.manifest>.eyebrow {
  grid-column:1/-1;
  margin:0}
.compare-inputs {
  grid-template-columns:1fr}
.compare-inputs .fields {
  grid-template-columns:repeat(4,minmax(0,1fr))}
.hero-number {
  font-size:55px}
}
@media(max-width:760px) {
  main,.site-header,.site-footer {
  padding-left:20px;
  padding-right:20px}
.site-header {
  height:80px;
  gap:20px}
.brand>span {
  font-size:24px}
.brand img {
  width:32px;
  height:32px}
.site-header nav {
  gap:10px;
  font-size:12px}
.nav-cta {
  padding:8px 13px;
  font-size:12px}
.hero {
  grid-template-columns:1fr;
  padding:39px 0;
  gap:33px}
.hero h1 {
  font-size:clamp(42px,8vw,60px)}
.hero-lead {
  max-width:390px;
  font-size:15px}
.hero-copy {
  max-width:510px}
.section-heading {
  align-items:flex-start}
.section-heading h2 {
  font-size:22px}
.section-heading .eyebrow {
  display:none}
.tool-cards {
  grid-template-columns:1fr;
  gap:14px}
.workbench-tools .tool-card {
  display:flex;
  padding:20px 18px 18px}
.workbench-tools .tool-card p {
  font-size:14px}
.card-top {
  display:flex;
  justify-content:space-between;
  align-items:center}
.tool-card h3 {
  font-size:20px;
  margin-top:10px}
.tool-card p {
  max-width:100%;
  min-height:0;
  font-size:14px;
  margin-top:6px}
.tool-link {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:14px}
.tool-section {
  padding-bottom:35px}
.manifest {
  gap:22px;
  padding:27px 0 40px}
.manifest h2 {
  font-size:28px}
.manifest div p {
  font-size:12px}
.site-footer {
  display:block;
  padding-top:26px}
.site-footer nav {
  margin-top:25px;
  gap:20px}
.site-footer p {
  font-size:11px}
.page-heading {
  display:block;
  padding:34px 0 25px}
.page-heading h1 {
  font-size:36px}
.page-heading>p {
  max-width:390px;
  margin-top:17px;
  font-size:12px}
.tool-nav {
  gap:1px;
  padding:3px;
  margin-bottom:20px}
.tool-nav a {
  display:block;
  padding:10px 8px;
  font-size:10px;
  white-space:normal;
  line-height:1.5}
.tool-nav a>span {
  display:block;
  font-size:9px;
  margin-bottom:5px}
.tool-nav a>b {
  display:none}
.workbench {
  grid-template-columns:1fr;
  gap:20px}
form,.result-card {
  padding:22px}
.result-card {
  position:static}
.hero-number {
  font-size:64px}
.five {
  grid-template-columns:repeat(3,minmax(0,1fr))}
.result-metrics {
  grid-template-columns:1fr 1fr}
.compare-inputs {
  grid-template-columns:1fr 1fr}
.compare-inputs .fields {
  grid-template-columns:1fr 1fr}
.three {
  gap:10px}
.field>span {
  font-size:10px;
  min-height:16px}
.field input {
  font-size:16px}
.field select {
  font-size:16px}
.preset-line .field select {
  font-size:16px}
.guide {
  grid-template-columns:1fr;
  gap:24px;
  padding:35px 0 45px}
.guide h2 {
  font-size:29px;
  max-width:100%;
  margin-bottom:15px}
.document .page-heading h1 {
  font-size:38px}
.document h2 {
  font-size:23px}
.document>p {
  font-size:13px}
}
@media(max-width:390px) {
  main,.site-header,.site-footer {
  padding-left:15px;
  padding-right:15px}
form,.result-card {
  padding:18px}
.hero h1 {
  font-size:41px}
.page-heading h1 {
  font-size:32px}
.compare-inputs {
  grid-template-columns:1fr}
.compare-inputs .fields {
  grid-template-columns:repeat(2,minmax(0,1fr))}
.three {
  grid-template-columns:repeat(2,minmax(0,1fr))}
.manifest {
  grid-template-columns:1fr}
.manifest>.eyebrow {
  grid-column:auto}
.tool-card {
  grid-template-columns:65px 1fr}
.preset-line {
  align-items:stretch}
.preset-line .secondary {
  align-self:flex-end}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important}
}
@media print {
  @page {
  size:A4;
  margin:12mm}
:root {
  background:white;
  color:#141820}
body {
  font-size:10px}
main,.site-header,.site-footer {
  padding:0;
  max-width:none}
.site-header {
  height:45px}
.site-header nav,.header-note,.site-footer,.tool-nav,.guide,.form-actions,.result-actions,.local-note,#action-status,#add-row,.row-title button,.preset-line,.field-help,#clear-saved {
  display:none!important}
.page-heading {
  padding:15px 0}
.page-heading h1 {
  font-size:24px}
.page-heading .eyebrow,.page-heading>p {
  font-size:10px;
  margin-top:5px}
.workbench {
  display:block}
form {
  padding:12px;
  border:1px solid #aaa}
.fields {
  gap:8px;
  margin-bottom:8px}
.field input,.field select {
  height:25px;
  padding:3px 6px;
  font-size:10px;
  background:white}
.field>span {
  font-size:12px}
.section-title {
  margin-bottom:9px}
.section-title:not(:first-child) {
  margin-top:12px;
  padding-top:10px}
.section-title h2 {
  font-size:14px}
.section-title>span {
  height:16px;
  width:16px;
  font-size:7px}
.carton-row {
  padding:8px 0}
.five {
  grid-template-columns:repeat(5,minmax(0,1fr))}
.three {
  grid-template-columns:repeat(3,minmax(0,1fr))}
.compare-inputs {
  grid-template-columns:1fr 1fr}
.compare-inputs .fields {
  grid-template-columns:repeat(4,minmax(0,1fr))}
.additional {
  margin:8px 0;
  padding:8px 0}
.additional .fields {
  margin-top:8px}
.result-card {
  position:static;
  margin-top:13px;
  background:white;
  color:#141820;
  border:1px solid #aaa;
  padding:15px;
  break-inside:avoid;
  overflow:visible}
.result-card p,.result-card span,.result-card small,.result-top .eyebrow {
  color:#56627a!important}
.hero-number {
  font-size:38px;
  line-height:1}
.hero-number small {
  font-size:18px}
.result-top {
  padding-bottom:8px}
.result-kicker {
  margin-top:10px}
.result-metrics {
  margin:10px 0;
  padding-top:8px;
  gap:8px}
.metric strong {
  font-size:17px}
.result-note {
  background:#f0f3fa;
  font-size:11px}
.result-sub {
  font-size:10px;
  margin-bottom:8px}
.result-table {
  overflow:visible}
.result-table td,.result-table th {
  color:#141820;
  border-color:#aaa;
  padding:5px}
.diagram {
  max-width:340px;
  margin:10px auto;
  background:#f4f6fa;
  print-color-adjust:exact;
  -webkit-print-color-adjust:exact}
.diagram svg {
  max-height:165px}
.compare-results {
  margin:10px 0}
.compare-result {
  border-color:#aaa;
  padding:8px}
.compare-result.proposed {
  background:#edf2fa}
.compare-result strong {
  font-size:19px}
.load-line {
  font-size:9px;
  padding:5px 0}
.result-top .status-dot {
  display:none}
#error {
  border:2px solid #9d4f19;
  color:#6f3000;
  background:white}
.checkbox {
  font-size:11px}
}

/* Freight Layout visual system — bright editorial default, optional night mode. */
:root {
  font-family:Manrope,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
  --paper:#fcfcfd;
  --white:#fff;
  --ink:#141820;
  --muted:#69717f;
  --line:#dfe3eb;
  --accent:#285af4}
/* Semantic component tokens (light defaults; dark redefines below) */
:root {
  --control-bg:#fff;
  --control-line:#d4dae5;
  --control-hover-line:#9fabc4;
  --control-shadow:0 1px 2px #12161f0a;
  --focus-line:#285af4;
  --focus-ring:0 1px 2px #12161f0a,0 0 0 4px #285af424;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 5.25 7 8.75l3.5-3.5' fill='none' stroke='%2356617a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --label-ink:#5b6474;
  --muted-ctrl:#5c6478;
  --muted-ctrl-hover:#141820;
  --quiet-ink:#69717f;
  --quiet-hover:#141820;
  --addrow-bg:#f7f9fe;
  --addrow-line:#b4bfda;
  --addrow-ink:#141820;
  --addrow-hover-bg:#edf2ff;
  --addrow-hover-line:#8fa5e8;
  --secondary-bg:#f0f4ff;
  --secondary-line:#d2ddf3;
  --secondary-ink:#141820;
  --secondary-hover-bg:#e4ecff;
  --secondary-hover-line:#b3c4ec;
  --primary-bg:#285af4;
  --primary-ink:#fff;
  --primary-hover-bg:#1d48d4;
  --ra-ink:#355081;
  --ra-line:#d4def1;
  --ra-hover-bg:#edf2ff;
  --ra-hover-line:#b8c9ee;
  --ctrlpill-line:#dfe3eb;
  --ctrlpill-ink:#141820;
  --ctrlpill-hover-bg:#f0f3f9;
  --ctrlpill-hover-line:#c7cede;
  --focus-visible-ink:#416afd}
h1,h2,h3 {
  font-family:Manrope,"Helvetica Neue",Arial,sans-serif;
  font-weight:600;
  letter-spacing:-.035em}
.site-header {
  height:90px;
  gap:55px;
  border-bottom:1px solid var(--line)}
.brand>span {
  font-family:Manrope,Arial,sans-serif;
  font-weight:800;
  font-size:26px;
  letter-spacing:-1.7px}
.brand {
  gap:9px}
.brand img {
  height:31px;
  width:31px}
.site-header nav {
  font-size:12px;
  letter-spacing:.01em;
  gap:28px}
.header-controls {
  display:flex;
  align-items:center;
  gap:30px;
  margin-left:auto}
.header-note {
  font-size:10px;
  letter-spacing:.05em;
  color:#89919e}
.header-controls button {
  display:flex;
  gap:7px;
  align-items:center;
  border:1px solid var(--ctrlpill-line);
  padding:8px 13px;
  border-radius:25px;
  background:transparent;
  color:var(--ctrlpill-ink);
  font-size:11px;
  min-height:38px;
  transition:background .18s,border-color .18s}
.header-controls button:hover {
  background:var(--ctrlpill-hover-bg);
  border-color:var(--ctrlpill-hover-line)}.hero-lead {
  font-size:14px;
  line-height:1.8;
  margin-bottom:22px}
.primary {
  background:var(--primary-bg);
  border-color:var(--primary-bg);
  border-radius:8px;
  font-size:13px;
  min-height:46px;
  padding:13px 18px;
  box-shadow:0 1px 2px #1d3f9e1f}
.primary:hover {
  background:var(--primary-hover-bg);
  border-color:var(--primary-hover-bg);
  box-shadow:0 3px 10px #1d48d433;
  transform:translateY(-1px)}
.primary:active {
  transform:translateY(0);
  box-shadow:0 1px 3px #1d48d42e}.hero-study {
  position:relative;
  margin:0;
  align-self:center;
  min-width:0}
.hero-study>img {
  display:block;
  width:100%;
  height:auto;
  mix-blend-mode:multiply;
  border-radius:0}.section-heading h2 {
  font-size:29px;
  font-weight:600}
.blue-period {
  color:var(--accent)}
.section-heading .eyebrow {
  font-size:10px}.card-number {
  font-size:10px;
  color:var(--accent)}
.card-arrow {
  font-size:22px;
  color:var(--accent)}.manifest {
  padding-top:37px;
  grid-template-columns:.8fr 1.2fr 1.1fr}
.manifest h2 {
  font-size:32px}
.manifest div p {
  font-size:12px}
.page-heading h1 {
  font-size:39px;
  letter-spacing:-.055em}
.page-heading>p {
  font-size:12px}
.tool-nav {
  background:#f0f3f9;
  border:0;
  border-radius:5px;
  padding:5px}
.tool-nav a {
  font-size:11px;
  border-radius:3px}
.tool-nav a[aria-current] {
  box-shadow:0 1px 5px #1420380a;
  color:var(--accent)}
.tool-nav a[aria-current]>span {
  color:var(--accent)}
form {
  border-radius:6px;
  box-shadow:0 4px 16px #14203803}
.section-title h2 {
  font-size:19px}
.section-title>span {
  border-radius:6px;
  color:var(--accent);
  border-color:#d6dffb;
  background:#f4f7ff}
.field input,.field select {
  border-radius:8px}
.result-card {
  background:var(--white);
  border:1px solid #cdd8f2;
  border-top:3px solid var(--accent);
  border-radius:12px;
  color:var(--ink);
  box-shadow:0 4px 18px #234ea009}
.result-card p {
  color:#65728b}
.hero-number {
  color:var(--accent);
  font-family:Manrope,Arial,sans-serif;
  font-weight:400;
  letter-spacing:-.06em}
.result-top .eyebrow {
  color:#6e7b95}
.result-top {
  border-bottom-color:#e1e6f0}
.result-sub {
  font-size:12px}
.result-card .result-note {
  font-size:11px;
  line-height:1.85;
  color:#667893;
  background:#f2f5fc;
  border-radius:8px}
.result-actions button {
  color:var(--ra-ink);
  border-color:var(--ra-line);
  font-size:11px;
  border-radius:8px;
  transition:background .18s,border-color .18s}
.result-actions button:hover {
  background:var(--ra-hover-bg);
  border-color:var(--ra-hover-line)}
.metric strong {
  font-size:22px;
  color:#202a3d;
  font-weight:500}
.metric span {
  font-size:10px}
.result-metrics {
  border-top-color:#e2e7f1}
.compare-result {
  border-radius:8px}
.compare-result.proposed {
  border-color:#abc0fb;
  background:#edf2ff}
.compare-result.proposed strong {
  color:var(--accent)}
.diagram {
  background:#f2f5fa;
  border-radius:8px}
.diagram .frame {
  fill:#e2e9f5;
  stroke:#7d97cb}
.diagram rect.carton {
  fill:#b3c8ff;
  stroke:#fff}
.diagram rect.carton:nth-of-type(3n) {
  fill:#6f99ff}
.diagram text {
  fill:#173768}
.diagram p {
  color:#71809b}
.result-table th {
  color:#7c889d}
.result-table td,.result-table th,.load-line {
  border-bottom-color:#dfe5ef}
.load-line b {
  color:#24334e}
.load-line span {
  color:#718099}
.guide h2 {
  font-size:29px}
.worked-example {
  background:#f1f4fb;
  border-left-color:var(--accent)}
.site-footer {
  background:transparent}
.footer-brand>span {
  font-size:21px}
.footer-brand img {
  width:26px;
  height:26px}
.site-footer nav {
  font-size:11px}
.document .page-heading h1 {
  font-size:47px}
.document>p {
  line-height:1.9}
.checkbox input {
  accent-color:var(--accent)}
/* Tool page type scale — raised after feedback that labels read too small */
.eyebrow {
  font-size:12px}
.page-heading .eyebrow,
.page-heading>p {
  font-size:12px}
.tool-nav a {
  font-size:14px;
  font-weight:500}
.tool-nav a>span {
  font-size:11px}
.section-title h2 {
  font-size:23px}
.field>span {
  font-size:13px}
.field input,.field select {
  font-size:15px}
.field-help {
  font-size:13px;
  line-height:1.7}
.row-title,
.row-title button {
  font-size:12px}
.checkbox {
  font-size:13px}
.checkbox input {
  width:18px;
  height:18px}
.result-kicker {
  font-size:14px}
.result-sub {
  font-size:13px}
.metric span {
  font-size:12px}
.metric strong {
  font-size:24px}
.metric small {
  font-size:12px}
.result-actions button {
  font-size:12.5px}
.result-card .result-note {
  font-size:12px}
.result-table table {
  font-size:12.5px}
.load-line {
  font-size:12.5px}
.add-row {
  font-size:13px}
.additional summary {
  font-size:14px}
.site-header nav a {
  font-size:13px}
.nav-cta {
  font-size:13px}

/* Tool-first layout & weight pass */
body {
  font-weight:500}
h1,h2,h3,.section-heading h2 {
  font-weight:650}
.nav-cta {
  background:var(--primary-bg);
  color:var(--primary-ink);
  padding:9px 16px;
  border-radius:8px;
  font-weight:600}
.nav-cta:hover {
  background:var(--primary-hover-bg);
  text-decoration:none}
.hero-compact {
  display:grid;
  grid-template-columns:1.18fr .82fr;
  gap:56px;
  align-items:center;
  padding:40px 0 34px}
.hero-compact h1 {
  font-size:clamp(34px,3.6vw,50px);
  letter-spacing:-.03em;
  line-height:1.08;
  margin:18px 0 14px}
.hero-compact h1>span {
  color:var(--accent)}
.hero-compact .hero-lead {
  font-size:16px;
  line-height:1.75;
  margin-bottom:0;
  max-width:52ch}
.hero-compact .hero-study>img {
  height:264px;
  object-fit:cover;
  border-radius:12px;
  mix-blend-mode:normal}
.workbench-tools {
  padding:28px 0 48px;
  border-top:1px solid var(--line)}
.workbench-tools .tool-cards {
  gap:20px}
.workbench-tools .tool-card {
  background:var(--white);
  border:1px solid #d9deea;
  border-radius:12px;
  padding:22px 22px 20px;
  display:flex;
  flex-direction:column;
  box-shadow:0 1px 3px #12161f0d;
  transition:box-shadow .2s,transform .2s,border-color .2s}
.workbench-tools .tool-card:hover {
  transform:translateY(-3px);
  border-color:#9db6f5;
  box-shadow:0 12px 28px #234ea024}
.workbench-tools .tool-card h3 {
  font-size:23px;
  margin:12px 0 8px}
.workbench-tools .tool-card p {
  flex:1;
  font-size:14px}
.workbench-tools .tool-link {
  margin-top:18px;
  background:#eef3ff;
  border:1px solid #d6e0fa;
  border-radius:8px;
  padding:12px 14px;
  color:#274fd9;
  font-weight:600;
  font-size:13px;
  justify-content:space-between;
  align-items:center;
  transition:background .18s,color .18s,border-color .18s}
.workbench-tools .tool-link:hover {
  background:var(--accent);
  border-color:var(--accent);
  color:#fff}
.tool-link {
  font-weight:600}
.page-heading {
  padding:28px 0 18px}
.page-heading h1,
.document .page-heading h1 {
  font-size:34px;
  letter-spacing:-.03em}
.field>span {
  font-weight:600}
.field input,.field select {
  font-weight:500}
.metric strong {
  font-weight:650}
.hero-number {
  font-weight:550}
.primary,.secondary,.result-actions button,.add-row {
  font-weight:600}
.eyebrow {
  font-size:11px}
.header-note {
  font-size:11px}
.copyright {
  font-size:11px}
.tool-nav a>span {
  font-size:10px}
@media screen {
  html[data-theme="dark"] {
  color-scheme:dark;
  --paper:#14171f;
  --white:#1c202a;
  --ink:#e8ecf6;
  --muted:#a2acc1;
  --line:#323948;
  --soft:#252c3a;
  --accent:#88a5ff;
  background:var(--paper);
  color:var(--ink)}
:root[data-theme="dark"] {
  --control-bg:#161c27;
  --control-line:#3b455b;
  --control-hover-line:#4d5a72;
  --control-shadow:0 1px 3px #0000002e;
  --focus-line:#7c9bff;
  --focus-ring:0 1px 3px #0000002e,0 0 0 4px #5278f83d;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 5.25 7 8.75l3.5-3.5' fill='none' stroke='%2394a2c4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --label-ink:#b3bdd1;
  --muted-ctrl:#a4aecb;
  --muted-ctrl-hover:#e4e9f5;
  --quiet-ink:#a2b2cf;
  --quiet-hover:#e4e9f5;
  --addrow-bg:#1d2637;
  --addrow-line:#3d4a66;
  --addrow-ink:#cdd8f0;
  --addrow-hover-bg:#26324a;
  --addrow-hover-line:#54688f;
  --secondary-bg:#25334d;
  --secondary-line:#445a83;
  --secondary-ink:#b9caff;
  --secondary-hover-bg:#2d3d5c;
  --secondary-hover-line:#54688f;
  --primary-bg:#4c77f8;
  --primary-ink:#fff;
  --primary-hover-bg:#3c65e0;
  --ra-ink:#b7c9f0;
  --ra-line:#4b5e82;
  --ra-hover-bg:#283654;
  --ra-hover-line:#4b5e82;
  --ctrlpill-line:#39435a;
  --ctrlpill-ink:#cdd6ea;
  --ctrlpill-hover-bg:#232c3d;
  --ctrlpill-hover-line:#4a5670;
  --focus-visible-ink:#7c9bff}
html[data-theme="dark"] .hero-study>img {
  mix-blend-mode:normal;
  border-radius:3px;
  filter:brightness(.85)}html[data-theme="dark"] .tool-card:hover {
  background:#202633}
html[data-theme="dark"] .workbench-tools .tool-card {
  background:#1a2130;
  border-color:#39445c;
  box-shadow:0 1px 3px #00000033}
html[data-theme="dark"] .workbench-tools .tool-card:hover {
  border-color:#5f7cd8;
  box-shadow:0 12px 30px #00000059}
html[data-theme="dark"] .workbench-tools .tool-link {
  background:#24314c;
  border-color:#3c4d75;
  color:#a9c0ff}
html[data-theme="dark"] .workbench-tools .tool-link:hover {
  background:#4c77f8;
  border-color:#4c77f8;
  color:#fff}
html[data-theme="dark"] .tool-nav {
  background:#222937}
html[data-theme="dark"] .tool-nav a[aria-current] {
  background:#30394c}
html[data-theme="dark"] html[data-theme="dark"] .secondary,html[data-theme="dark"] .result-card .result-note {
  border-radius:8px}
html[data-theme="dark"] .section-title>span {
  background:#202d49;
  border-color:#3a5080;
  color:#a3baff}
html[data-theme="dark"] .result-card {
  border-color:#435576;
  border-top-color:#88a5ff}
html[data-theme="dark"] .result-card p,html[data-theme="dark"] .result-top .eyebrow {
  color:#a7b5d0}
html[data-theme="dark"] .result-metrics,html[data-theme="dark"] .result-top,html[data-theme="dark"] .load-line,html[data-theme="dark"] .result-table td,html[data-theme="dark"] .result-table th {
  border-color:#374359}
html[data-theme="dark"] .metric strong,html[data-theme="dark"] .load-line b {
  color:#e1e8f9}
html[data-theme="dark"] .metric span,html[data-theme="dark"] .load-line span {
  color:#a2b2cf}
html[data-theme="dark"] .result-note,html[data-theme="dark"] .worked-example {
  background:#242e41;
  color:#acbad4}
html[data-theme="dark"] .compare-result {
  border-color:#425473}
html[data-theme="dark"] .compare-result.proposed {
  background:#26395f;
  border-color:#4b6fae}
html[data-theme="dark"] .compare-result span,html[data-theme="dark"] .compare-result small {
  color:#a7b8d8}
html[data-theme="dark"] #error {
  background:#37271d;
  border-color:#936538;
  color:#ffd0a5}
}
@media(max-width:1050px) {
  .site-header {
  gap:30px}
.header-controls {
  gap:15px}
.header-controls .header-note {
  display:none}.hero-compact {
  gap:32px}
.hero-compact h1 {
  font-size:40px}
.hero-compact .hero-study>img {
  height:220px}.page-heading h1 {
  font-size:34px}
}
@media(max-width:760px) {
  .site-header {
  height:78px;
  gap:15px}
.brand>span {
  font-size:24px}
.site-header nav {
  display:flex;
  gap:10px;
  margin-left:auto}
.site-header nav a:not(.nav-cta) {
  display:none}
.nav-cta {
  padding:8px 13px;
  font-size:12px}
.header-controls {
  margin-left:0}
.header-controls button {
  min-height:38px}
.hero-compact {
  grid-template-columns:1fr;
  padding:26px 0 22px;
  gap:20px}
.hero-compact h1 {
  font-size:clamp(30px,8.6vw,40px);
  margin-top:14px}
.hero-compact .hero-lead {
  font-size:15px}
.hero-compact .hero-study {
  display:none}.hero-study {
  max-width:480px;
  width:100%;
  justify-self:center}
.hero-study>img {
  max-height:none}.hero-lead {
  font-size:13px}.section-heading h2 {
  font-size:27px}.tool-card:hover {
  transform:none}
.manifest {
  grid-template-columns:1fr;
  gap:21px;
  padding:28px 0 40px}
.manifest h2 {
  font-size:32px}
.manifest .eyebrow {
  grid-column:auto}
.manifest div p {
  font-size:12px;
  max-width:420px}
.page-heading h1 {
  font-size:34px}
.result-card {
  box-shadow:none}
.document .page-heading h1 {
  font-size:36px}
.hero-number {
  font-size:59px}
.result-card .result-actions button {
  min-height:36px}
.tool-nav a {
  font-size:10px}
}
@media print {

/* Shared mark and readable working-sheet details. */
.brand-mark { flex: 0 0 auto; }
.mark-letter { fill: var(--accent); }
.mark-cut { fill: var(--ink); }
.footer-brand .brand-mark { width: 26px; height: 26px; }
.billing-units { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.result-card .metric span, .result-table th, .load-line span { color: #586983; }
.result-card .result-note { color: #536680; }
.result-card .diagram p { color: #435b80; }
.result-actions button { min-height: 40px; }
.row-title button { min-height: 32px; padding: 6px 2px; }
.error-sheet { line-height: 1.7; }
}
@media screen {
  html[data-theme="dark"] .hero-number small,
  html[data-theme="dark"] .metric small,
  html[data-theme="dark"] .result-table th,
  html[data-theme="dark"] .local-note { color: #adbcd6 !important; }
    html[data-theme="dark"] .diagram { background: #202c42; }
  html[data-theme="dark"] .diagram .frame { fill: #30415d; stroke: #7f9acb; }
  html[data-theme="dark"] .diagram rect.carton { stroke: #202c42; }
  html[data-theme="dark"] .result-card .diagram p { color: #b1c2e2; }
  html[data-theme="dark"] .error-sheet { color: #ffd0a5 !important; }
}
@media screen and (max-width: 480px) {
  .site-header { gap: 10px; }
  .nav-cta { padding: 7px 11px; font-size: 12px; }
  .header-controls button { padding: 7px 10px; font-size: 12px; min-height: 38px; }
  .billing-units { grid-template-columns: 1fr; }
  .preset-line { display: grid; grid-template-columns: 1fr; }
  .preset-line .secondary { justify-self: start; min-width: 84px; }
  .preset-line .field select { font-size: 16px; }
  .five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field > span { font-size: 11px; }
  .field input, .field select { min-height: 46px; }
  .result-actions button { min-height: 44px; font-size: 11px; }
  .header-controls button { min-height: 42px; }
  .section-title { align-items: flex-start; }
  .section-title > span { flex-shrink: 0; }
  .section-title h2 { line-height: 1.3; }
}
@media print {
  .result-card .diagram p, .result-card .metric span, .result-table th,
  .load-line span, .metric small, .hero-number small { color: #354663 !important; }
  .row-title button { display: none; }
}