:root {
  color-scheme: light;
  --paper: #F5F5F5;
  --surface: #FFFFFF;
  --ink: #212121;
  --muted: #424242;
  --accent: #1565C0;
  --line: #757575;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --radius: .75rem;
  --measure: 72rem;
  --reading: 70ch;
  --target: 2.75rem;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-wrap: anywhere; }
a { color: var(--accent); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .15em; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: .2rem solid var(--accent); outline-offset: .25rem; }
.wrap { width: min(calc(100% - var(--space-3) * 2), var(--measure)); margin-inline: auto; }
.site-header { padding-block: var(--space-2); border-bottom: thin solid var(--line); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.brand { color: var(--ink); font-weight: 750; font-size: 1.25rem; text-decoration: none; display: inline-flex; align-items: center; min-height: var(--target); }
nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
nav a { min-height: var(--target); display: inline-flex; align-items: center; }
main { padding-block: var(--space-4) var(--space-5); }
h1, h2, h3, h4 { line-height: 1.25; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-top: 0; }
h2 { font-size: 1.65rem; }
h3 { font-size: 1.2rem; margin-top: var(--space-4); }
h4 { font-size: 1.05rem; margin-top: var(--space-3); }
p, li { max-width: var(--reading); }
.document { max-width: var(--reading); }
.document h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
.document h2 { margin-top: var(--space-5); }
.updated, .secondary { color: var(--muted); }
section { margin-bottom: var(--space-4); }
.card { padding: var(--space-4); border: thin solid var(--line); background: var(--surface); border-radius: var(--radius); }
.price { font-size: 3rem; font-weight: 750; line-height: 1; margin-block: var(--space-2); }
.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
button { font: inherit; padding: var(--space-1) var(--space-3); min-height: var(--target); border: thin solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--muted); }
button:disabled { cursor: default; }
.action { display: grid; gap: var(--space-1); }
.action-label { font-weight: 650; }
.site-footer { border-top: thin solid var(--line); padding-block: var(--space-4); }
.site-footer p { margin-block: var(--space-2) 0; }
.skip { position: absolute; left: var(--space-2); top: -10rem; padding: var(--space-1) var(--space-2); background: var(--surface); }
.skip:focus { top: var(--space-2); }
.promise-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--space-2); }
.promise-grid article { min-width: 0; }
details { padding-block: var(--space-2); border-bottom: thin solid var(--line); }
summary { cursor: pointer; min-height: var(--target); align-content: center; font-weight: 650; }