:root { color-scheme: light dark; --paper: #f4f7f3; --ink: #07101c; --muted: #4f6056; --card: #fff; --border: #65766d; --mint: #8cf2c3; --note: #e1f2e9; --focus: #124d36; }
@media (prefers-color-scheme: dark) { :root { --paper: #0b151b; --ink: #f0f7f3; --muted: #b5c8bc; --card: #15232b; --border: #7f998b; --note: #173c30; --focus: #8cf2c3; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif; font-size: 1rem; line-height: 1.65; }
a { color: inherit; text-underline-offset: .2em; overflow-wrap: anywhere; }
a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.skip { position: absolute; top: 1rem; left: 1rem; clip-path: inset(50%); pointer-events: none; }
.skip:focus { clip-path: none; pointer-events: auto; z-index: 2; padding: .75rem; background: var(--card); }
.shell { max-width: 72rem; margin-inline: auto; padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left)); }
header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
.brand { display: inline-flex; gap: .6rem; align-items: center; font-size: 1.6rem; font-weight: 800; text-decoration: none; }
.brand img { width: 44px; height: 44px; }
nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
nav a, .action { display: inline-flex; align-items: center; min-height: 44px; }
nav a[aria-current] { font-weight: 800; text-decoration-thickness: 3px; }
main { padding-block: clamp(2rem, 6vw, 4rem); }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-weight: 750; color: var(--muted); }
h1 { font-size: clamp(2.25rem, 6vw, 4rem); line-height: 1.12; max-width: 20ch; margin: .5rem 0 1.25rem; letter-spacing: -.035em; overflow-wrap: anywhere; }
h2 { overflow-wrap: anywhere; line-height: 1.25; margin-top: 0; }
.intro { font-size: 1.2rem; max-width: 60ch; }
p, li { overflow-wrap: anywhere; max-width: 72ch; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1.25rem; margin-block: 2rem; }
.card, .recovery { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--border); border-radius: 1.4rem; background: var(--card); }
.recovery { background: var(--note); margin-block: 2rem; }
.recovery p:last-child, .card p:last-child { margin-bottom: 0; }
.price { font-size: 2rem; font-weight: 800; margin: .5rem 0; }
.action { background: var(--mint); color: #07101c; border-radius: 1rem; padding: .6rem 1.2rem; font-weight: 750; }
.table-wrap { max-width: 100%; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
caption { text-align: left; font-weight: 750; margin-bottom: .75rem; }
th, td { padding: .8rem .5rem; border-bottom: 1px solid var(--border); text-align: left; overflow-wrap: anywhere; }
th:first-child { width: 60%; }
footer { border-top: 1px solid var(--border); padding-top: 1.25rem; color: var(--muted); }
@media (max-width: 400px) { th, td { padding-inline: .25rem; } }