:root {
  --bg: #EDF0F3; --surface: #FFFFFF; --soft: #E2E8F0; --ink: #13202D; --muted: #596777; --line: #D3DAE3;
  --accent: #1D4ED1; --accent-ink: #FFFFFF; --good: #1C7A4E; --warn: #A86200; --amber: #F2C14E;
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E141B; --surface: #17202A; --soft: #1E2935; --ink: #E4EAF1; --muted: #93A1B0; --line: #2A3644;
    --accent: #7097FF; --accent-ink: #0A1220; --good: #4FC48C; --warn: #F0A63E; color-scheme: dark;
  }
}
* { box-sizing: border-box }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--body) }
a { color: var(--accent) }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.wrap { max-width: 980px; margin: 0 auto; padding-block: 0; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)) }
h1, h2, h3 { font-family: var(--display); font-stretch: 112%; line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -.01em }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800 }
h2 { font-size: 1.5rem; font-weight: 800 }
h3 { font-size: 1.08rem; font-weight: 600 }
p { margin: 0 }
.label { font: 600 .74rem/1.2 var(--body); text-transform: uppercase; letter-spacing: .09em; color: var(--muted) }

header.site { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font: 800 1.15rem var(--display); font-stretch: 112% }
.brand img { width: 36px; height: 36px; border-radius: 9px }
nav.site { display: flex; gap: 18px; font-size: .95rem; flex-wrap: wrap }
nav.site a { color: var(--muted); text-decoration: none }
nav.site a[aria-current="page"], nav.site a:hover { color: var(--ink) }

.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 36px 56px }
.hero p.lede { font-size: 1.15rem; color: var(--muted); margin-top: 16px; max-width: 34em }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 600; text-decoration: none; border: 1px solid var(--line); color: var(--ink); background: var(--surface) }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) }
.status { margin-top: 14px; font-size: .9rem; color: var(--muted) }

.stamp { background: #0B1118; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 40px rgb(10 26 80 / .18) }
.stamp .photo { aspect-ratio: 4 / 3; background: linear-gradient(#8FA7BF, #4E5D6C); position: relative }
.stamp .photo::before { content: ""; position: absolute; left: 14%; right: 14%; top: 42%; height: 30%; background: #C8CED6; border-radius: 40px }
.stamp .photo::after { content: ""; position: absolute; left: 62%; top: 52%; width: 16%; height: 3px; background: #7A1F14; transform: rotate(8deg) }
.stamp .band { border-left: 6px solid var(--amber); padding: 12px 16px; font: .78rem/1.5 var(--mono); color: #AAB6C3 }
.stamp .band b { display: block; color: #fff; font-weight: 600 }

section.band-light { background: var(--surface); border-block: 1px solid var(--line); padding-block: 52px }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 28px }
.steps li { list-style: none; display: grid; gap: 8px; align-content: start }
.steps ol { padding: 0; margin: 0; display: contents }
.steps .n { font: 600 .85rem var(--mono); color: var(--accent) }
.steps p { color: var(--muted) }

.features { padding-block: 52px; display: grid; gap: 28px }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 36px }
.grid2 div { display: grid; gap: 6px; align-content: start }
.grid2 p { color: var(--muted) }

.prose { max-width: 720px; padding-block: 24px 64px; display: grid; gap: 18px }
.prose h2 { margin-top: 18px }
.prose ul { margin: 0; padding-left: 22px; display: grid; gap: 6px }
.prose .updated { color: var(--muted); font-size: .92rem }
.contact { font: 600 1.05rem var(--mono); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; user-select: all; overflow-wrap: anywhere }

footer.site { border-top: 1px solid var(--line); padding-block: 26px 40px; color: var(--muted); font-size: .88rem; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between }
footer.site a { color: var(--muted) }

@media (max-width: 760px) {
  .hero, .steps, .grid2 { grid-template-columns: 1fr }
  .hero { gap: 28px; padding-block: 16px 40px }
}