:root {
  color-scheme: light;
  --ink: #0d2410;
  --muted: #4f665e;
  --paper: #f3f6ef;
  --line: #d8e2d9;
  --green: #1b5e20;
  --lime: #ffc107;
  --danger: #a62232;
  font-family: system-ui, sans-serif;
}
* { box-sizing: border-box; }
body.site { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); line-height: 1.65; }
.site a { color: var(--green); text-underline-offset: .22em; }
.site :focus-visible { outline: 3px solid #168568; outline-offset: 4px; }
.site h1, .site h2, .site p { overflow-wrap: anywhere; }
.site h1, .site h2 { line-height: 1.08; letter-spacing: -.045em; }
.site h1 { font-size: clamp(2.25rem, 6vw, 4.8rem); margin: .35em 0 .25em; }
.site h2 { font-size: clamp(1.3rem, 3vw, 1.65rem); margin: 1.45em 0 .4em; }
.site p { margin: .55em 0 1em; }
.site-bar, .site-footer {
  max-width: 1120px; margin: auto; padding: 1.15rem clamp(1rem, 4vw, 2.5rem);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; flex-wrap: wrap;
}
.site-bar { border-bottom: 1px solid var(--line); }
.site-bar a, .site-footer a { font-weight: 650; }
.site-bar nav, .site-footer nav { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink) !important; }
.brand-mark { background: var(--ink); color: var(--lime); border-radius: 10px; padding: .25rem .55rem; font: 700 .85rem/1.7 ui-monospace, monospace; }
.site-footer { color: var(--muted); font-size: .875rem; border-top: 1px solid var(--line); }
.site .site-main { width: min(100%, 1120px); max-width: none; margin: auto; padding: clamp(1rem, 4vw, 2.5rem); }
.hero {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center;
  border-radius: 28px; padding: clamp(1.4rem, 5vw, 4rem); background: #0d3e10; color: white;
}
.hero p { color: #cfddd4; max-width: 46ch; }
.eyebrow { display: inline-block; font: 700 .75rem/1.5 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.hero .eyebrow { color: var(--lime); }
.score-illustration { background: #1a382c; border: 1px solid #426051; border-radius: 20px; padding: clamp(1rem, 4vw, 2rem); min-width: 0; }
.score-illustration .score { display: block; color: var(--lime); font: 700 clamp(2.6rem, 7vw, 5rem)/1.15 ui-monospace, monospace; letter-spacing: -.1em; }
.deliveries { display: flex; flex-wrap: wrap; gap: .35rem; padding-top: 1rem; border-top: 1px solid #426051; }
.deliveries span { min-width: 2rem; padding: .2rem; text-align: center; border-radius: 6px; background: #2a4a3c; font: 700 .875rem/1.7 ui-monospace, monospace; }
.lookup, .policy, .auth-card { background: white; border: 1px solid var(--line); border-radius: 22px; padding: clamp(1.15rem, 4vw, 2.75rem); }
.lookup { margin-top: 1rem; }
.lookup h2 { margin-top: 0; }
.site .policy { max-width: 760px; margin-inline: auto; }
.policy h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
.policy p { max-width: 68ch; }
.site .form-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; align-items: end; }
.site label { display: grid; gap: .35rem; font-weight: 650; }
.site input {
  display: block; width: 100%; min-width: 0; border: 1px solid #a4b8aa; border-radius: 10px;
  color: var(--ink); background: #fafcf8; padding: .75rem .85rem; font: inherit;
}
.site button { min-height: 44px; border: 1px solid transparent; border-radius: 10px; padding: .65rem 1rem; font: inherit; font-weight: 700; background: var(--green); color: white; cursor: pointer; }
.site button:hover:not(:disabled) { background: #0b4937; }
.site button:disabled { opacity: .55; cursor: default; }
.site .secondary { border-color: #a4b8aa; background: white; color: var(--ink); }
.site .secondary:hover:not(:disabled) { background: #e9f2e8; }
.site .danger { background: var(--danger); }
.site .danger:hover:not(:disabled) { background: #801826; }
.site fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.auth-card { margin-top: 1.4rem; background: var(--paper); }
.auth-card h2 { margin-top: 0; }
.auth-card form { margin-bottom: 1rem; }
.auth-card #confirm { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; }
.auth-card #status:empty { display: none; }
.site .match-header { border-radius: 22px; padding: clamp(1rem, 4vw, 2.5rem); background: var(--ink); color: white; }
.site .match-header h1 { font-size: clamp(1.85rem, 5vw, 3.4rem); }
.site .match-header p { color: #d2e1d8; }
.site #content { max-width: 840px; padding: 1rem 0 0; }
.site .score-main { font-family: ui-monospace, monospace; }
.site .team-row { gap: .65rem; overflow-wrap: anywhere; }
.site .state { border-radius: 18px; background: white; border: 1px solid var(--line); }
@media (max-width: 700px) {
  .hero, .site .form-grid { grid-template-columns: minmax(0, 1fr); }
  .site-bar, .site-footer { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .site .live-dot { animation: none; }
}