:root {
  color-scheme: light;
  --paper:#f5f5f3;
  --ink:#18191b;
  --muted:#5a6256;
  --border:#dededb;
  --white:#fff;
  --grid:#303236;
  --quiet:#c5c7ca;
  --accent:#e7e7e3;
  --edge:clamp(20px,5.2vw,84px);
  --round:28px;
  --ease:cubic-bezier(.23,1,.32,1);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:clip; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.5 system-ui,sans-serif; overflow-x:clip; }
h1,h2,h3,p,figure { margin:0; }
a { color:inherit; }
button,input { color:inherit; font:inherit; }
button { cursor:pointer; }
:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.frame { width:min(100%,1560px); margin-inline:auto; padding-inline:var(--edge); }
.skip { position:absolute; top:8px; left:8px; background:var(--white); padding:12px; z-index:10; }
.skip:not(:focus) { clip-path:inset(50%); }
.top { min-height:88px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; }
.brand { text-decoration:none; font-size:26px; font-weight:800; letter-spacing:-.06em; width:max-content; }
.brand span { display:inline-block; width:7px; height:7px; border-radius:50%; margin-left:6px; background:var(--accent); border:1px solid var(--muted); }
.top nav { display:flex; gap:32px; }
.top nav a { text-decoration:none; }
.top nav a:hover { text-decoration:underline; }
.top > .button { justify-self:end; }
.button { min-height:48px; display:inline-flex; justify-content:center; align-items:center; gap:12px; border:1px solid transparent; padding:8px 18px; border-radius:999px; font-weight:650; text-decoration:none; white-space:nowrap; transition:background-color 180ms,color 180ms; }
.outline { border-color:var(--border); }
.outline:hover { background:var(--white); }
.primary { background:var(--accent); color:var(--ink); }
.primary:hover { background:var(--ink); color:var(--white); }
.hero { min-height:min(760px,85svh); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); align-items:center; gap:clamp(24px,5vw,80px); padding-block:40px 84px; }
.label { font-size:14px; margin-bottom:20px; color:var(--muted); }
h1,h2 { font-weight:620; line-height:.99; letter-spacing:-.068em; overflow-wrap:anywhere; }
h1 { font-size:clamp(46px,6vw,100px); }
h1 span { color:var(--muted); }
h2 { font-size:clamp(42px,5.5vw,76px); }
.lead { color:var(--muted); max-width:40ch; font-size:clamp(16px,1.6vw,21px); margin:26px 0; }
.atlas { padding:clamp(18px,2vw,30px); border-radius:var(--round); background:var(--ink); color:var(--white); min-width:0; }
.atlas figcaption { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.atlas figcaption strong { font-weight:600; font-size:20px; }
.atlas figcaption span,.atlas-foot p { color:var(--quiet); font-size:13px; }
.plot { position:relative; max-width:580px; margin:16px auto; background:radial-gradient(circle,var(--grid) 1px,transparent 1.5px) 0 0/18px 18px; }
.plot img { width:100%; height:auto; display:block; }
.map-tag { position:absolute; left:58.35%; top:42.48%; transform:translate(-50%,-110%); border-radius:999px; padding:4px 10px; background:var(--accent); color:var(--ink); font-size:13px; font-weight:750; transition:left 420ms var(--ease),top 420ms var(--ease); }
.map-tag::after { content:""; position:absolute; top:100%; left:50%; width:1px; height:9px; background:var(--accent); }
.atlas-foot { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:center; }
.samples { display:flex; gap:5px; }
.samples button { min-height:44px; border-radius:999px; border:1px solid var(--grid); background:transparent; padding:4px 12px; }
.samples button[aria-pressed=true] { background:var(--accent); color:var(--ink); }
.workflow { background:var(--white); border-block:1px solid var(--border); padding-block:clamp(52px,7vw,108px); }
.workflow .frame,.start { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); gap:clamp(28px,7vw,90px); }
.workflow ol { list-style:none; margin:0; padding:0; }
.workflow li { display:grid; grid-template-columns:28px minmax(0,1fr) 44px; gap:14px; align-items:start; padding:20px 0; border-top:1px solid var(--border); }
.workflow li span { color:var(--muted); font-size:13px; padding-top:5px; }
.workflow li p { color:var(--muted); margin-top:5px; max-width:48ch; }
.workflow li a { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--border); border-radius:50%; text-decoration:none; }
.workflow li a:hover { background:var(--accent); }
.start { padding-block:clamp(52px,8vw,120px); }
.start p { color:var(--muted); max-width:45ch; margin:14px 0; }
.access-card { border:1px solid var(--border); border-radius:var(--round); padding:clamp(20px,3vw,40px); background:var(--white); }
.access-card label { display:block; margin:14px 0; }
.access-card input { width:100%; min-height:44px; border:1px solid var(--border); border-radius:10px; padding:8px 12px; }
.access-card button { margin-right:12px; }
.access-card button:disabled { opacity:.5; }
.access-card details { margin-top:20px; }
.access-card details summary { cursor:pointer; }
footer.frame { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--border); padding-block:22px; }
@media(max-width:850px) {
  .hero,.workflow .frame,.start { grid-template-columns:minmax(0,1fr); }
  .hero { padding-block:32px 54px; }
  .top { grid-template-columns:1fr auto; min-height:70px; }
  .top nav { display:none; }
  h1 { max-width:14ch; }
}
@media(max-width:430px) {
  .atlas-foot { grid-template-columns:minmax(0,1fr); }
  .atlas figcaption span { font-size:12px; }
  h1 { font-size:clamp(37px,11vw,47px); }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .map-tag,.button { transition:none; }
}