:root {
  color-scheme: light;
  --ink: #173b38;
  --muted: #556866;
  --jade: #0d6b5d;
  --jade-dark: #084a42;
  --jade-soft: #dcebe5;
  --paper: #fbf8f0;
  --surface: #fffdf8;
  --line: #c9d5cf;
  --warning: #8a3b2d;
  --warning-soft: #fff0eb;
  --shadow: 0 1rem 2.5rem rgb(19 55 51 / 8%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; line-height: 1.55; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 3px solid #d68d2f;
  outline-offset: 3px;
}

[hidden] { display: none !important; }

.site-header,
.section-shell,
.hero,
footer {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

.site-header {
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
}

.brand,
.header-link {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  padding-block: .55rem;
}
.brand { color: var(--ink); font-weight: 800; text-decoration: none; letter-spacing: -.02em; }
.header-link { color: var(--jade-dark); font-weight: 700; text-underline-offset: .25rem; }

.hero { padding-block: clamp(4.5rem, 11vw, 8rem); max-width: 62rem; margin-left: max(1rem, calc((100% - 72rem) / 2)); }
.eyebrow { margin: 0 0 .75rem; color: var(--jade); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3, h4 { margin-block: 0; line-height: 1.08; letter-spacing: -.035em; }
h1 { max-width: 17ch; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.55rem, 7vw, 5.6rem); font-weight: 600; }
h2 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 600; }
h3 { font-size: 1.55rem; }
h4 { font-size: 1.05rem; margin-top: 1.75rem; }
.hero-copy { max-width: 43rem; margin: 1.5rem 0 2rem; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.3rem); }

.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.15rem;
  border: 2px solid var(--jade-dark);
  border-radius: .35rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.button-primary { color: #fff; background: var(--jade-dark); }
.button-secondary { color: var(--jade-dark); background: var(--surface); }
.button:hover { filter: brightness(.94); }

.section-shell { margin-bottom: 2rem; padding: clamp(1.25rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: .75rem; background: var(--surface); box-shadow: var(--shadow); }
.section-heading { max-width: 48rem; margin-bottom: 2rem; }
.section-heading > p:not(.eyebrow), .launch p, .limits p { color: var(--muted); }
.privacy-note { padding-left: .9rem; border-left: 3px solid var(--jade); }

.supplier-grid { display: grid; gap: 1rem; }
fieldset { min-width: 0; margin: 0; padding: 1.1rem; border: 1px solid var(--line); border-radius: .6rem; background: #fff; }
legend { padding-inline: .35rem; font-size: 1.25rem; font-weight: 800; }
.field { margin-bottom: 1.1rem; }
.field:last-child { margin-bottom: .25rem; }
label { display: block; margin-bottom: .35rem; font-size: .95rem; font-weight: 750; }
input, select { width: 100%; min-height: 44px; border: 1px solid #8ba09a; border-radius: .3rem; padding: .6rem .7rem; color: var(--ink); background: var(--surface); }
input:hover, select:hover { border-color: var(--jade); }
[aria-invalid="true"] { border-color: var(--warning); box-shadow: 0 0 0 1px var(--warning); }
.field-help { margin: .3rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.compare-button { width: 100%; margin-top: 1.25rem; }

.form-errors { margin-top: 1.5rem; padding: 1rem 1.2rem; border: 1px solid #dba99e; border-left: 5px solid var(--warning); border-radius: .4rem; color: #67271c; background: var(--warning-soft); }
.form-errors ul { margin-bottom: 0; padding-left: 1.25rem; }
.form-errors a { min-height: 44px; display: inline-flex; align-items: center; color: inherit; font-weight: 700; text-underline-offset: .2rem; }

.results { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.results-heading { margin-bottom: 1.5rem; }
.result-grid { display: grid; gap: 1rem; }
.result-card { min-width: 0; padding: clamp(1rem, 3vw, 1.75rem); border: 1px solid var(--line); border-top: 5px solid var(--jade); border-radius: .55rem; background: #fff; }
.rank { margin: 0 0 .6rem; color: var(--jade); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.metrics { display: grid; gap: .65rem; margin: 1.5rem 0 0; }
.metrics div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .6rem; border-bottom: 1px solid #e3e9e6; }
.metrics dt { color: var(--muted); }
.metrics dd { margin: 0; font-weight: 800; text-align: right; }
.risk-list { display: grid; gap: .75rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.risk-card { padding: .9rem; border-left: 4px solid #bf7c32; background: #fff7e9; }
.risk-card strong { font-size: .78rem; color: #714514; text-transform: uppercase; letter-spacing: .05em; }
.risk-card p { margin: .2rem 0 .65rem; }
.risk-card p:last-child { margin-bottom: 0; }

.launch { display: grid; gap: 1.5rem; align-items: center; background: var(--jade-soft); }
.launch-action { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.launch-status { min-height: 1.6em; margin: 0; font-weight: 700; }
.limits { box-shadow: none; border-left: 5px solid var(--jade-dark); }
footer { padding-block: 2rem 3rem; color: var(--muted); font-size: .9rem; }

@media (min-width: 52rem) {
  .supplier-grid, .result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .launch { grid-template-columns: minmax(0, 1fr) auto; }
  .launch-action { align-items: flex-end; }
}

@media (max-width: 24rem) {
  .site-header { align-items: flex-start; flex-direction: column; padding-block: 1rem; }
  .hero { padding-block: 3.5rem; }
  .section-shell { width: min(100% - 1rem, 72rem); padding: 1rem; }
  fieldset { padding: .8rem; }
  .metrics div { display: block; }
  .metrics dd { margin-top: .15rem; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}