/* ===== Minimal white/black landing (mobile-first) ===== */

/* Base & tokens */
:root{
  --bg:#fff;
  --fg:#000;
  --muted:#444;
  --line:#000;
  --radius:14px;
  --headerH:64px; /* mobile header height for anchor offset */
}

*,
*::before,
*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }

a{ color:inherit; text-underline-offset:.18em; text-decoration-thickness:1px; }
a:hover{ text-decoration-thickness:2px; }
:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }

.container{ width:min(100% - 2rem, 72rem); margin-inline:auto; }

/* Sticky header */
.site-header{ position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1px solid var(--line); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.75rem 0; }
.brand{ font-weight:700; }

/* Mobile nav with <details> */
.nav-toggle{ margin-left:auto; }
.nav-toggle > summary{
  list-style:none; cursor:pointer; padding:.5rem .8rem; border:1px solid var(--line);
  border-radius:999px; user-select:none;
}
.nav-toggle[open] > summary{ background:var(--fg); color:var(--bg); }
.nav-toggle .site-nav{ padding:.5rem 0 0; }
.nav-toggle .site-nav ul{ list-style:none; margin:0; padding:0; display:grid; gap:.25rem; }
.nav-toggle .site-nav a{ display:block; padding:.5rem .6rem; border-radius:8px; }
.nav-toggle .site-nav a:hover{ background:#f2f2f2; }

/* Desktop nav (hidden on mobile) */
.desktop-nav{ display:none; }
.desktop-nav ul{ display:flex; gap:.75rem; list-style:none; margin:0; padding:0; align-items:center; }
.desktop-nav a{ padding:.4rem .8rem; border-radius:999px; }
.btn{ border:1px solid var(--line); padding:.5rem 1rem; border-radius:999px; text-decoration:none; display:inline-block; transition:transform .18s ease; }
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--fg); color:var(--bg); }
.btn-ghost{ background:transparent; }

/* Sections */
.hero{ padding:3.5rem 0 2.5rem; }
.section{ padding:2.5rem 0; border-top:1px solid var(--line); }
h1{ font-size:clamp(1.8rem, 3.5vw + .5rem, 2.8rem); line-height:1.1; margin:.2rem 0 1rem; }
h2{ font-size:clamp(1.35rem, 2vw + .6rem, 2rem); margin:0 0 .75rem; }
.lead{ font-size:1.05rem; color:var(--muted); max-width:65ch; }
.features{ padding-left:1.1em; }
.features li{ list-style:square; }
.muted{ color:var(--muted); }

.cta-row{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; }

/* Footer */
.site-footer{ border-top:1px solid var(--line); padding:1.5rem 0; text-align:center; color:var(--muted); }

/* Anchor offset for sticky header */
section{ scroll-margin-top: var(--headerH); }

/* Skip link */
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ left:1rem; top:.5rem; width:auto; height:auto; background:var(--fg); color:var(--bg);
  padding:.4rem .6rem; border-radius:8px; }

/* Larger screens */
@media (min-width: 800px){
  :root{ --headerH:72px; }
  .nav-toggle{ display:none; }
  .desktop-nav{ display:block; }
  .hero{ padding:5rem 0 3rem; }
  .section{ padding:3rem 0; }
}