:root {
  --bg: #f2f5f7;
  --surface: #ffffff;
  --ink: #18232d;
  --muted: #55636f;
  --line: #d5dde3;
  --accent: #0b6e6a;
  --accent-ink: #ffffff;
  --trail: #0b6e6a;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f161c;
    --surface: #17212a;
    --ink: #e4ebf0;
    --muted: #9aa8b3;
    --line: #2a3742;
    --accent: #4cc2b6;
    --accent-ink: #062523;
    --trail: #4cc2b6;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Seravek", "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); background: var(--surface); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; font-weight: 700; letter-spacing: -.01em; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.site-header nav { display: flex; gap: 1.25rem; font-size: .95rem; }
.site-header nav a { color: var(--muted); text-decoration: none; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--ink); }

/* Hero */
.hero { position: relative; padding-block: clamp(3rem, 9vw, 7rem) clamp(2rem, 6vw, 4rem); overflow: hidden; }
.hero h1 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(2.6rem, 7.5vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 800;
}
.hero p { max-width: 46ch; margin: 1.5rem 0 0; font-size: 1.2rem; color: var(--muted); }
.hero .trail {
  position: absolute;
  right: 1.5rem;
  bottom: 0;
  width: min(48vw, 520px);
  height: auto;
  pointer-events: none;
}
.trail path { stroke: var(--trail); }
.trail circle { fill: var(--trail); }
.hint { margin-top: 2rem; display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; }
.hint-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: pulse 2.4s ease-out 3; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@media (prefers-reduced-motion: reduce) { .hint-dot { animation: none; } }

/* Steps + details */
.split { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); padding-block: 2rem 5rem; border-top: 1px solid var(--line); }
.split h2 { font-size: 1.35rem; margin: 2rem 0 1rem; letter-spacing: -.01em; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.5rem 1fr; gap: .25rem 1rem; padding-block: 1rem; border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(step); grid-row: span 2; font-size: 1.75rem; font-weight: 800; line-height: 1; color: var(--accent); }
.steps strong { display: block; }
.steps span { color: var(--muted); }
.details { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.5rem 1.75rem; align-self: start; margin-top: 2rem; }
.details h2 { margin-top: 0; }
.details dl { margin: 0; }
.details dt { font-size: .9rem; color: var(--muted); margin-top: 1rem; }
.details dd { margin: .15rem 0 0; }
.small { font-size: .92rem; color: var(--muted); }

/* Legal pages */
.legal { padding-block: 3rem 5rem; max-width: 46rem; }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.03em; line-height: 1.1; margin: 0 0 .5rem; }
.legal h2 { font-size: 1.25rem; margin: 2.25rem 0 .5rem; }
.legal .callout { background: var(--surface); border-left: 4px solid var(--accent); padding: 1rem 1.25rem; border-radius: 0 10px 10px 0; }
.legal li { margin-bottom: .35rem; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); font-size: .95rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; padding-block: 2rem 6rem; }
.site-footer address { font-style: normal; color: var(--muted); line-height: 1.7; }
.site-footer nav { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: flex-start; }
.site-footer strong { color: var(--ink); }

@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; }
  .hero .trail { display: none; }
  .site-header nav { gap: .9rem; }
}