@import url("https://fonts.googleapis.com/css2?family=Anton&family=Work+Sans:wght@400;500;600;700&display=swap");

:root {
  --canvas: #F3EDE2; --surface: #FBF7F0; --sunken: #EAE2D2;
  --ink: #1A150F; --ink-2: #6B6055; --ink-3: #9C8F80; --ink-inverse: #F3EDE2;
  --line: rgba(26,21,15,0.16); --line-strong: #1A150F;
  --accent: #D9522A; --accent-pressed: #B8421F; --on-accent: #FFFFFF;
  --radius-md: 8px; --radius-lg: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #15110D; --surface: #201A14; --sunken: #0F0C09;
    --ink: #F3EDE2; --ink-2: #A89C8E; --ink-3: #776B5E; --ink-inverse: #15110D;
    --line: rgba(243,237,226,0.18); --line-strong: #F3EDE2;
    --accent: #F07A3A; --accent-pressed: #D9622A; --on-accent: #15110D;
  }
}
* { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--canvas); color: var(--ink);
  font-family: "Work Sans", system-ui, sans-serif; font-size: 16px; line-height: 24px;
}
main { flex: 1; width: 100%; max-width: 520px; margin: 0 auto; padding: 32px 16px; }
.logo { font-family: "Anton", Impact, sans-serif; text-transform: uppercase; font-size: 24px; line-height: 25px; margin: 0 0 24px; }
.logo a { color: inherit; text-decoration: none; }
.display { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; font-size: 46px; line-height: 45px; margin: 0 0 16px; overflow-wrap: anywhere; }
.display.xl { font-size: 60px; line-height: 57px; }
.eyebrow { display: inline-block; font-size: 12px; line-height: 14px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; padding: 6px 10px; border-radius: var(--radius-md); background: var(--ink); color: var(--ink-inverse); margin: 0 0 16px; }
.card { background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-lg); padding: 20px; }
.facts { list-style: none; margin: 16px 0 24px; padding: 0; display: grid; gap: 12px; }
.facts li { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: 12px; }
.facts li:first-child { border-top: 0; padding-top: 0; }
.facts .k { font-size: 12px; line-height: 14px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-2); }
.facts .v { font-size: 16px; font-weight: 500; }
.muted { color: var(--ink-2); }
.actions { display: grid; gap: 12px; margin-top: 8px; }
.btn { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: var(--radius-md); font: 600 16px "Work Sans", system-ui, sans-serif; text-decoration: none; border: 1.5px solid var(--line-strong); color: var(--ink); background: transparent; cursor: pointer; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:active { background: var(--accent-pressed); }
.btn:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
footer { padding: 24px 16px 32px; text-align: center; font-size: 14px; line-height: 20px; color: var(--ink-2); }
footer a { color: inherit; display: inline-block; padding: 12px 8px; }
@media (min-width: 600px) { main { padding-top: 56px; } }