/* The app's own tokens, so the site and the product read as one thing. */
:root {
  --bg:#f6f5f1; --fg:#191813; --fg2:#514f48; --fg3:#6c6a63;
  --line:#e5e3dc; --surface:#fff; --accent:#2F4DA0;
  --ease: cubic-bezier(.2,.85,.25,1);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#100f0d; --fg:#f4f3ef; --fg2:#a19f96; --fg3:#908d83;
          --line:#2a2925; --surface:#1a1917; --accent:#7FA0F0; }
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5;
  padding:0 24px; overflow-x:hidden;
}
.wrap { max-width:560px; margin:0 auto; }
.mono { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; }
.kick { font-family:ui-monospace,Menlo,monospace; font-size:10px; font-weight:600;
        letter-spacing:.16em; color:var(--fg3); text-transform:uppercase; }

/* --- the mark: same gesture as the app's launch screen ------------------- */
.mark {
  width:60px; height:60px; border-radius:13px; background:var(--fg);
  transform:rotate(135deg) scale(1.4); opacity:0;
  animation:settle .9s var(--ease) .1s forwards;
}
@keyframes settle {
  0%   { transform:rotate(135deg) scale(1.4); opacity:0; }
  60%  { opacity:1; }
  75%  { transform:rotate(38deg) scale(.97); }
  100% { transform:rotate(45deg) scale(1); opacity:1; }
}

/* --- everything arrives, staggered --------------------------------------- */
.up { opacity:0; transform:translateY(14px); animation:up .7s var(--ease) forwards; }
@keyframes up { to { opacity:1; transform:none; } }
.d1{animation-delay:.30s}.d2{animation-delay:.40s}.d3{animation-delay:.50s}
.d4{animation-delay:.60s}.d5{animation-delay:.70s}.d6{animation-delay:.80s}

/* Sections further down wait until they are actually looked at. */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.seen { opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce) {
  .mark,.up { animation:none; opacity:1; transform:rotate(45deg); }
  .up { transform:none; }
  .reveal { opacity:1; transform:none; transition:none; }
}

/* --- type ---------------------------------------------------------------- */
header { padding:16vh 0 0; }
h1 { font-size:clamp(38px,10vw,58px); font-weight:800; letter-spacing:-.035em;
     line-height:1.02; margin:44px 0 0; }
.lead { color:var(--fg2); font-size:17px; line-height:1.6; margin-top:18px; }
h2 { font-size:22px; font-weight:700; letter-spacing:-.02em; margin-bottom:6px; }

/* --- the rules ----------------------------------------------------------- */
.rules { margin-top:16px; border-top:1px solid var(--line); }
.rule { display:flex; gap:18px; padding:20px 2px; border-bottom:1px solid var(--line); }
.rule b { font-family:ui-monospace,Menlo,monospace; font-size:12px; font-weight:600;
          color:var(--fg3); padding-top:3px; min-width:20px; }
.rule p { color:var(--fg2); font-size:15px; }
.rule strong { color:var(--fg); font-weight:600; }

/* --- call to action ------------------------------------------------------ */
.cta { display:flex; align-items:center; justify-content:center; gap:10px;
       height:58px; border-radius:999px; background:var(--fg); color:var(--bg);
       text-decoration:none; font-weight:600; font-size:16.5px; margin-top:36px;
       transition:transform .18s var(--ease); }
.cta:active { transform:scale(.975); }
.cta[aria-disabled="true"] { background:transparent; color:var(--fg3);
       border:1px solid var(--line); cursor:default; }

/* --- socials ------------------------------------------------------------- */
.social { display:flex; gap:9px; margin-top:14px; }
.social a { flex:1; display:flex; align-items:center; justify-content:center; height:52px;
  border:1px solid var(--line); border-radius:15px; background:var(--surface);
  color:var(--fg2); text-decoration:none; transition:border-color .2s, color .2s, transform .18s var(--ease); }
.social a:hover { border-color:var(--fg3); color:var(--fg); }
.social a:active { transform:scale(.96); }
.social svg { width:21px; height:21px; fill:currentColor; display:block; }

footer { margin:72px 0 56px; padding-top:26px; border-top:1px solid var(--line);
         font-size:13px; color:var(--fg3); line-height:1.9; }
footer a { color:var(--fg3); text-decoration:none; border-bottom:1px solid var(--line); }
footer a:hover { color:var(--fg); }
.sep { opacity:.45; padding:0 7px; }