/* Sieve design system (design.md). Night ultramarine, starlight text, one amber answer. */
:root { --deep:#16307a; --deeper:#10255f; --star:#eef2ff; --haze:#a8b9ec; --amber:#ffb547;
        --rule:rgb(238 242 255 / .14); --ease:cubic-bezier(.16,1,.3,1); --wrap:1240px; }
* { box-sizing:border-box; margin:0; }
html { background:var(--deep); color:var(--star); font:400 17px/1.55 "Schibsted Grotesk", system-ui, sans-serif; -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
body { background:var(--deep); overflow-x:clip; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(520px circle at var(--mx, 50%) var(--my, -40%), rgb(120 170 255 / .10), transparent 70%); }
main, footer { position:relative; z-index:1; }
.wrap { width:min(var(--wrap), 100% - 48px); margin-inline:auto; }
h1, h2, h3 { font-family:"Syne", system-ui, sans-serif; font-weight:700; letter-spacing:-.03em; line-height:.98; }
h1 i, h2 i { font-style:normal; color:var(--haze); }
.mono { font:500 12.5px/1.5 "JetBrains Mono", ui-monospace, monospace; letter-spacing:.02em; color:var(--haze); }
a { color:inherit; }
:focus-visible { outline:2px solid var(--amber); outline-offset:3px; }

.btn { display:inline-flex; align-items:center; gap:10px; background:var(--amber); color:var(--deeper); padding:15px 24px; border-radius:2px;
       font-weight:500; text-decoration:none; border:0; font-size:16px; cursor:pointer; transition:transform .25s var(--ease), background .15s; }
.btn:hover { background:#ffc970; }
.btn::after { content:"→"; transition:transform .15s; }
.btn:hover::after { transform:translateX(4px); }
.link { text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:3px; transition:border-color .15s; }
.link:hover { border-color:var(--amber); }

/* nav */
.nav { position:fixed; inset:0 0 auto; z-index:20; padding:18px 0; transition:background .4s, padding .4s; }
.nav.solid { background:rgb(16 37 95 / .86); backdrop-filter:blur(10px); padding:12px 0; }
.nav .wrap { display:flex; align-items:center; gap:36px; }
.logo { display:flex; align-items:center; gap:10px; font:700 22px "Syne", sans-serif; letter-spacing:-.03em; text-decoration:none; }
.logo svg { width:26px; height:26px; }
.links { display:flex; gap:28px; margin-left:auto; align-items:center; }
.links a { text-decoration:none; color:var(--haze); transition:color .15s; }
.links a:hover, .links a[aria-current] { color:var(--star); }
.links .btn { color:var(--deeper); padding:10px 18px; }
.menu { display:none; margin-left:auto; background:none; border:1px solid var(--rule); color:var(--star); padding:8px 14px; font:inherit; border-radius:2px; }

/* word reveals */
[data-words] .w { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; }
[data-words] .w > span { display:inline-block; transform:translateY(105%); transition:transform .9s var(--ease) calc(var(--i) * 60ms); }
[data-words].on .w > span, .f-still [data-words] .w > span { transform:none; }

/* sections */
.sec { padding:18vh 0; border-top:1px solid var(--rule); }
.split { display:grid; grid-template-columns:1fr 1.15fr; gap:6vw; align-items:start; }
.sec h2 { font-size:clamp(2.2rem, 4.6vw, 4.2rem); }
.lede { color:var(--haze); font-size:1.15rem; max-width:34ch; margin-top:22px; }

/* list with a line that draws itself */
.steps { list-style:none; padding:0; display:grid; position:relative; counter-reset:s; }
.steps li { display:grid; grid-template-columns:72px 1fr; padding:26px 0; border-top:1px solid var(--rule); counter-increment:s; }
.steps li::before { content:"0" counter(s); font:500 13px "JetBrains Mono", monospace; color:var(--amber); padding-top:6px; }
.steps h3 { font-size:1.55rem; margin-bottom:6px; }
.steps p { color:var(--haze); max-width:46ch; }

/* faq */
.faq details { border-top:1px solid var(--rule); }
.faq details:last-child { border-bottom:1px solid var(--rule); }
.faq summary { list-style:none; cursor:pointer; padding:24px 0; display:flex; justify-content:space-between; gap:24px; font-size:1.2rem; font-weight:500; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font:400 1.6rem/1 "JetBrains Mono", monospace; color:var(--amber); transition:transform .3s var(--ease); }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { color:var(--haze); padding:0 0 26px; max-width:60ch; }

/* waitlist form */
.join { background:var(--deeper); }
.join form { display:grid; gap:14px; max-width:520px; }
.join label { display:grid; gap:6px; font-size:14px; color:var(--haze); }
.join input, .join select { font:inherit; color:var(--star); background:rgb(238 242 255 / .06); border:1px solid var(--rule); border-radius:2px; padding:14px 16px; }
.join input:focus, .join select:focus { border-color:var(--amber); outline:none; }
.join select option { background:var(--deeper); }
.join .ok { padding:22px; border:1px solid var(--amber); color:var(--star); }
.join .ok b { color:var(--amber); font-family:"Syne"; font-size:1.4rem; display:block; margin-bottom:4px; }
.join form.sent > :not(.ok) { display:none; }

/* footer */
footer { background:var(--deeper); padding:12vh 0 32px; border-top:1px solid var(--rule); }
.cols { display:grid; grid-template-columns:2fr repeat(3, 1fr); gap:40px; }
.cols h4 { font:500 13px "JetBrains Mono", monospace; color:var(--haze); margin-bottom:14px; font-weight:500; }
.cols ul { list-style:none; padding:0; display:grid; gap:10px; }
.cols a { text-decoration:none; color:var(--star); }
.cols a:hover { color:var(--amber); }
.cols p { color:var(--haze); max-width:30ch; margin-top:14px; }
.small { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:10vh; padding-top:24px; border-top:1px solid var(--rule); color:var(--haze); font-size:14px; }

@media (max-width:860px) {
  .menu { display:block; }
  .links { position:fixed; inset:60px 0 auto; background:var(--deeper); flex-direction:column; align-items:flex-start; padding:24px; gap:18px; display:none; border-bottom:1px solid var(--rule); }
  .nav.open .links { display:flex; }
  .nav.open { background:var(--deeper); }
  .split { grid-template-columns:1fr; }
  .sec { padding:12vh 0; }
  .cols { grid-template-columns:1fr 1fr; }
  .cols > div:first-child { grid-column:1 / -1; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }