/* DealShield site. Brand tokens come from soul.md. No inline styles anywhere (the live CSP may block them). */
:root {
  --emerald: #0E8F5E;
  --emerald-deep: #0A6B47;
  --pine: #0B2E22;
  --sand: #F6F4EE;
  --paper: #FFFDF8;
  --honey: #E0A23B;
  --amber: #E8902B;
  --clay: #D4503E;
  --teal: #1B9E8A;
  --ink: var(--pine);
  --muted: #3F544B;
  --line: rgba(11, 46, 34, .16);
  --serif: "Iowan Old Style", "New York", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  --round: ui-rounded, "SF Pro Rounded", "Nunito", var(--sans);
}
* { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--sand); color: var(--ink); font: 17px/1.55 var(--sans); overflow-x: clip; }
[hidden] { display: none !important; }
a { color: var(--emerald-deep); text-underline-offset: 3px; }
a:hover { color: var(--pine); }
:focus-visible { outline: 3px solid var(--honey); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* top bar */
.bar { border-bottom: 1px solid var(--line); background: var(--sand); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }
.mark { font: 700 26px/1 var(--serif); color: var(--pine); text-decoration: none; letter-spacing: -.01em; }
.mark b { color: var(--emerald); font-weight: 700; }
.nav { display: flex; gap: 4px 18px; flex-wrap: wrap; font-size: 15px; }
.nav a { color: var(--pine); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--emerald); }

/* page head */
.head { padding: 40px 0 12px; display: grid; grid-template-columns: 1fr; gap: 12px; }
.kicker { font: 600 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--emerald-deep); margin: 0; }
h1 { font: 700 clamp(34px, 6vw, 56px)/1.04 var(--serif); letter-spacing: -.02em; margin: 0; max-width: 18ch; }
.lede { font-size: 19px; max-width: 58ch; margin: 4px 0 0; color: var(--muted); }
h2 { font: 700 clamp(24px, 3.4vw, 32px)/1.15 var(--serif); letter-spacing: -.01em; margin: 0 0 10px; }
h3 { font: 700 19px/1.25 var(--serif); margin: 0 0 6px; }

/* calculator: the "deal sheet" */
.calc { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 28px; align-items: start; padding: 20px 0 36px; }
.sheet { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 8px 20px 20px; box-shadow: 0 1px 0 rgba(11, 46, 34, .05); }
.sheet h2 { font-size: 15px; font-family: var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--emerald-deep); margin: 16px 0 4px; }
.row { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px dotted var(--line); }
.row label { flex: 1 1 auto; font-size: 16px; }
.row label small { display: block; font-size: 13.5px; color: var(--muted); margin-top: 1px; }
.field { flex: 0 0 auto; display: inline-flex; align-items: center; background: var(--sand); border: 1.5px solid #76887F; border-radius: 9px; padding: 0 10px; min-width: 132px; }
.field:focus-within { border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(14, 143, 94, .22); }
.field span { color: var(--muted); font-family: var(--round); }
.field input { width: 100%; min-width: 0; border: 0; background: transparent; padding: 10px 6px; font: 600 17px/1.2 var(--round); color: var(--pine); text-align: right; }
.field input:focus { outline: none; }
.field input::placeholder { color: #556A60; font-weight: 500; }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; font-size: 15.5px; border-bottom: 1px dotted var(--line); }
.check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--emerald); flex: 0 0 auto; }
.check small { display: block; color: var(--muted); font-size: 13.5px; }
.or { margin: 0; padding: 6px 0 0; font-size: 13.5px; color: var(--muted); }
.btns { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.btn { appearance: none; border: 0; cursor: pointer; font: 700 16px/1 var(--sans); padding: 13px 18px; border-radius: 10px; text-decoration: none; display: inline-block; }
.btn.go { background: var(--emerald-deep); color: #fff; }
.btn.go:hover { background: var(--pine); color: #fff; }
.btn.ghost { background: transparent; color: var(--pine); border: 1.5px solid var(--line); }
.btn.ghost:hover { border-color: var(--pine); }

/* result */
.result { position: sticky; top: 16px; background: var(--pine); color: var(--sand); border-radius: 16px; padding: 22px 22px 20px; }
.result .label { font: 600 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #BFE3D2; margin: 0 0 8px; }
.result .big { font: 800 clamp(40px, 7vw, 58px)/1 var(--round); letter-spacing: -.02em; margin: 0 0 4px; word-break: break-word; }
.result .sub { margin: 0 0 14px; color: #CFE4DA; font-size: 15px; }
.result dl { margin: 0; }
.result .line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(246, 244, 238, .18); font-size: 15.5px; }
.result dt { color: #CFE4DA; }
.result dd { margin: 0; font: 700 16px/1.3 var(--round); text-align: right; }
.result .warn { margin: 12px 0 0; padding: 10px 12px; background: rgba(232, 144, 43, .18); border-left: 4px solid var(--amber); border-radius: 6px; font-size: 14.5px; }
.result .empty { color: #CFE4DA; margin: 0; font-size: 15.5px; }
.verdict { margin: 12px 0 0; font: 700 18px/1.3 var(--serif); color: var(--sand); }

/* Dex note */
.dex { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: end; margin: 18px 0 0; }
.dex img { width: 96px; height: auto; display: block; }
.dex p { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 12px 14px; font-size: 15.5px; position: relative; }
.dex p b { font-family: var(--serif); }

/* prose */
.prose { padding: 8px 0 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 48px; }
.prose .wide { grid-column: 1 / -1; }
.prose p, .prose li { max-width: 62ch; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin: 6px 0; }
.terms dt { font: 700 17px/1.3 var(--serif); margin-top: 14px; }
.terms dd { margin: 2px 0 0; color: var(--muted); }
.example { background: var(--paper); border: 1px dashed var(--line); border-radius: 12px; padding: 14px 16px; font-size: 15.5px; }
.example code { font-family: var(--round); font-weight: 700; }

/* app band */
.app { background: var(--pine); color: var(--sand); }
.app .wrap { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; padding-top: 36px; padding-bottom: 36px; }
.app img { width: 100%; max-width: 220px; height: auto; display: block; }
.app h2 { color: var(--sand); }
.app p { max-width: 56ch; color: #D8E8DF; margin: 0 0 14px; }
.app .btn.go { background: var(--honey); color: var(--pine); }
.app .btn.go:hover { background: #F0B550; color: var(--pine); }

/* sources */
.src { border-top: 1px solid var(--line); padding: 14px 0; }
.src:first-of-type { border-top: 0; }
.src p { margin: 4px 0; }
.src .tag { display: inline-block; font: 700 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--pine); background: rgba(224, 162, 59, .35); padding: 4px 7px; border-radius: 5px; margin-right: 6px; }

/* footer */
.foot { border-top: 1px solid var(--line); padding: 26px 0 40px; font-size: 14.5px; color: var(--muted); }
.foot .wrap { display: grid; gap: 10px; }
.foot nav { display: flex; gap: 6px 18px; flex-wrap: wrap; }
.foot p { margin: 0; max-width: 78ch; }

@media (max-width: 820px) {
  .calc { grid-template-columns: minmax(0, 1fr); }
  .calc > div { order: -1; }   /* result first on a phone, so the total is not buried under the form */
  .dex { display: none; }
  .result { position: static; }
  .prose { grid-template-columns: minmax(0, 1fr); }   /* minmax(0,..): a bare 1fr has an auto minimum, so a wide table grew the column past the phone */
  .app .wrap { grid-template-columns: minmax(0, 1fr); }
  .app img { max-width: 160px; }
}
@media (max-width: 480px) {
  body { font-size: 16.5px; }
  .row { flex-wrap: wrap; }
  .row label { flex: 1 1 100%; }
  .field { flex: 1 1 100%; }
  .sheet { padding: 4px 14px 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .btn, .nav a, .field { transition: background-color .15s ease-out, border-color .15s ease-out, box-shadow .15s ease-out; }
}

/* state hub table */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
table.grid { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 16px; }
table.grid th, table.grid td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
table.grid thead th { font: 700 14px/1.3 var(--sans); color: var(--muted); background: var(--sand); }
table.grid tbody th { font: 700 16px/1.3 var(--serif); }
table.grid tr:last-child > * { border-bottom: 0; }