:root {
  --background: #f3f4f2;
  --surface: #ffffff;
  --surface-subtle: #e8eceb;
  --text: #18252c;
  --text-muted: #51616a;
  --border: #b8c2c4;
  --border-strong: #728187;
  --primary: #b94712;
  --primary-hover: #a83e0d;
  --on-primary: #ffffff;
  --focus-ring: #176b87;
  --error-background: #fff1eb;
  --error-text: #8c2f0b;
  --paper: var(--background);
  --ink: var(--text);
  --muted: var(--text-muted);
  --orange: var(--primary);
  --white: var(--surface);
  --line: var(--border);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --content-width: 75rem;
  --reading-width: 46rem;
  --heading-font: Georgia, "Times New Roman", serif;
  --body-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  overflow-wrap: break-word;
  background: var(--background);
  color: var(--text);
  font: 1rem/1.65 var(--body-font);
}

header,
footer,
main {
  padding-left: max(5vw, var(--space-5));
  padding-right: max(5vw, var(--space-5));
}

header {
  min-height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

main > * {
  width: min(100%, var(--content-width));
  margin-left: auto;
  margin-right: auto;
}

nav {
  display: flex;
  gap: var(--space-5);
}

.brand {
  flex: none;
  color: var(--text);
  font-weight: 850;
  font-size: 1.2rem;
  letter-spacing: -.02em;
}

a {
  color: var(--text);
  text-underline-offset: .18em;
}

a:hover {
  color: var(--primary-hover);
}

header a,
footer a {
  text-decoration: none;
}

.language-switcher {
  max-width: 24rem;
  gap: .25rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: .8rem;
  line-height: 1.25;
}

.language-switcher a {
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  min-width: 2.25rem;
  padding: .25rem .45rem;
  text-align: center;
}

.language-switcher a:hover,
.language-switcher a[aria-current="true"] {
  border-color: var(--primary);
  color: var(--primary-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  font-family: var(--heading-font);
  line-height: 1.15;
  text-wrap: balance;
}

h2,
h3 {
  letter-spacing: -.015em;
}

.hero,
.pagehead {
  /* max-width: 53rem; */
  padding: var(--space-8) 0 var(--space-7);
}

.hero h1,
.pagehead h1 {
  margin: var(--space-2) 0 var(--space-4);
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  letter-spacing: -.035em;
}

.pagehead > p:last-child,
.hero > p:not(.eyebrow) {
  max-width: 44rem;
  color: var(--text-muted);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}

.eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--primary);
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .15em;
}

.button,
button,
.primary-continuation a {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--primary);
  background: var(--primary);
  color: var(--on-primary);
  padding: .7rem 1.2rem;
  font: 800 1rem/1.25 var(--body-font);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button:hover,
button:hover,
.primary-continuation a:hover {
  border-color: var(--primary-hover);
  background: var(--primary-hover);
  color: var(--on-primary);
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.card {
  min-width: 0;
  min-height: 13rem;
  padding: var(--space-5);
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
}

.card span {
  color: var(--primary);
  font-size: .8rem;
  font-weight: 750;
}

.link-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.calculator-index-card {
  min-width: 0;
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: var(--space-4);
  font-weight: 800;
  text-decoration: none;
}

.calculator-index-card span:last-child {
  flex: none;
  color: var(--primary);
  font-size: 1.25rem;
}

.calculator-index-card:hover {
  border-color: var(--primary);
  background: var(--surface-subtle);
  color: var(--primary-hover);
}

.calculator-index-card:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.band {
  margin: var(--space-7) auto;
  padding: var(--space-7);
  background: var(--text);
  color: var(--surface);
}

.band a {
  color: var(--surface);
}

.breadcrumb {
  padding-top: var(--space-5);
  gap: var(--space-2);
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: .875rem;
}

.breadcrumb a {
  color: inherit;
}

.tool-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(17rem, .75fr);
  gap: var(--space-5);
  align-items: start;
}

.calculator,
.results {
  min-width: 0;
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  border: 1px solid var(--border);
  background: var(--surface);
}

.calculator {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(12rem, 1.35fr);
  gap: var(--space-3) var(--space-5);
  align-items: center;
}

.calculator h2,
.calculator .error,
.calculator .primary-action {
  grid-column: 1 / -1;
}

.calculator h2,
.results h2 {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}

.calculator label {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  font-weight: 750;
  line-height: 1.35;
}

.calculator label span {
  float: none;
  color: var(--text-muted);
  font-size: .875rem;
  font-weight: 500;
  text-align: right;
}

input,
select {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
  padding: .65rem .75rem;
  font: inherit;
}

input[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--error-text);
  border-width: 2px;
}

.field-error {
  grid-column: 2;
  margin-top: calc(-1 * var(--space-2));
  color: var(--error-text);
  font-size: .875rem;
  font-weight: 700;
}

.calculator .primary-action {
  width: 100%;
  margin-top: var(--space-3);
}

.error {
  margin-bottom: var(--space-2);
  border-left: 4px solid var(--error-text);
  background: var(--error-background);
  color: var(--error-text);
  padding: var(--space-3) var(--space-4);
  font-weight: 700;
}

.results {
  border-top: 4px solid var(--primary);
}

.results .eyebrow {
  margin-bottom: var(--space-3);
}

.result-number {
  max-width: 100%;
  color: var(--primary);
  font-family: var(--heading-font);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1;
}

dl {
  margin-bottom: 0;
}

dl div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}

dd {
  margin-left: var(--space-4);
  font-weight: 800;
  text-align: right;
}

.prose {
  max-width: var(--reading-width);
  margin: var(--space-8) auto;
}

.prose > section {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border);
}

.prose h2 {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.65rem, 3vw, 2.25rem);
}

.prose h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: 1.25rem;
}

.prose p {
  max-width: 42rem;
}

.supplier-confirmation {
  border-top-width: 4px !important;
  border-top-color: var(--text) !important;
}

.primary-continuation p {
  margin-bottom: 0;
}

footer {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
  background: var(--text);
  color: var(--surface);
}

footer nav a {
  color: var(--surface);
}

@media (max-width: 56.25rem) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tool-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 46.875rem) {
  header {
    min-height: 4.25rem;
  }

  header nav {
    gap: var(--space-4);
  }

  .language-switcher {
    max-width: 10rem;
  }

  header nav a:not(:first-child) {
    display: none;
  }

  header .language-switcher a:not(:first-child) {
    display: inline;
  }

  .grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .link-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero,
  .pagehead {
    padding-top: var(--space-7);
  }

  .calculator {
    grid-template-columns: minmax(0, 1fr);
  }

  .calculator h2,
  .calculator .error,
  .calculator .primary-action,
  .field-error {
    grid-column: 1;
  }

  .calculator label {
    margin-top: var(--space-2);
  }

  .field-error {
    margin-top: calc(-1 * var(--space-2));
  }

  dl div {
    align-items: baseline;
  }
}

@media (max-width: 25rem) {
  header,
  footer,
  main {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .calculator,
  .results {
    padding: var(--space-4);
  }

  .calculator label {
    align-items: baseline;
    flex-wrap: wrap;
  }

  .calculator label span {
    text-align: left;
  }

  dl div {
    display: block;
  }

  dd {
    margin-left: 0;
    text-align: left;
  }
}