/* Tating — bencrawford.dev
   One committed dark theme, taken from the app's own screen: near-black ground,
   cyan accent, and the five drum-row colours used only as small marks. */

:root{
  --bg:#0F1216;
  --bg-2:#141920;
  --card:#1A2029;
  --line:#28313C;
  --ink:#ECEFF2;
  --muted:#A7B0B9;
  --faint:#6E7984;
  --cyan:#4CC9E0;
  --cyan-deep:#2FA9C0;
  --on-cyan:#08161A;
  --yellow:#E8CC3C;
  --pink:#E25A72;
  --green:#8ED24A;
  --blue:#2E67E0;
  --purple:#7E5FE8;
  --display:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --body:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
  --max:1080px;
  --radius:14px;
}

*{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:18px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.015em;line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:clamp(34px,5.6vw,58px)}
h2{font-size:clamp(26px,3.6vw,38px)}
h3{font-size:20px;font-weight:700;letter-spacing:-.005em}
p{margin:0 0 1em;max-width:62ch}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.eyebrow{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin:0 0 14px}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* masthead */
.mast{border-bottom:1px solid var(--line);background:var(--bg)}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:66px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.01em}
.brand img{width:30px;height:30px;border-radius:7px}
.brand:hover{text-decoration:none}
.nav{display:flex;align-items:center;gap:22px;font-size:16px}
.nav a{color:var(--muted)}
.nav a:hover{color:var(--ink);text-decoration:none}
/* buttons inside the nav must keep their own text colour (the two rules above outrank .btn-*) */
.nav a.btn-primary,.nav a.btn-primary:hover{color:var(--on-cyan)}
.nav a.btn-ghost,.nav a.btn-ghost:hover{color:var(--ink)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:.01em;
  padding:13px 20px;border-radius:12px;border:1px solid transparent;white-space:nowrap;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--cyan);color:var(--on-cyan)}
.btn-primary:hover{background:#63D5E9}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--muted)}
.btn svg{width:18px;height:18px;flex:none}

/* hero */
.hero{padding:64px 0 40px}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero p.lede{font-size:21px;color:var(--muted);margin:22px 0 30px}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px}
.hero .fine{margin:18px 0 0;font-size:15px;color:var(--faint)}

/* phone frames */
.phone{
  width:min(300px,100%);margin:0 auto;border-radius:26px;overflow:hidden;
  border:1px solid var(--line);background:#000;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9),0 0 0 6px #0B0E12;
}
.phone img{width:100%;aspect-ratio:9/16}
.hero .phone{transform:rotate(-2deg)}
@media (prefers-reduced-motion:reduce){.hero .phone{transform:none}}

/* facts strip */
.facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.facts ul{list-style:none;margin:0;padding:18px 0;display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:center;font-family:var(--display);font-weight:700;font-size:15px}
.facts li{display:flex;align-items:center;gap:10px}
.dot{width:10px;height:10px;border-radius:50%;flex:none}
.dot.y{background:var(--yellow)} .dot.p{background:var(--pink)} .dot.g{background:var(--green)} .dot.b{background:var(--blue)} .dot.v{background:var(--purple)}

/* feature rows */
.feature{padding:72px 0}
.feature .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.feature.flip .text{order:2}
.feature h2{margin-bottom:16px}
.feature p{color:var(--muted)}
.feature ul{margin:0 0 1em;padding-left:20px;color:var(--muted)}
.feature li{margin-bottom:6px}
.feature strong{color:var(--ink);font-weight:600}
.feature + .feature{border-top:1px solid var(--line)}

/* two text cards */
.cards{padding:24px 0 72px}
.cards .wrap{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px 28px 20px}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:17px}

/* closing CTA */
.get{padding:72px 0 80px;border-top:1px solid var(--line);text-align:center}
.get h2{margin-bottom:12px}
.get p{margin:0 auto 26px;color:var(--muted)}
.get .actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}

/* footer */
footer{border-top:1px solid var(--line);padding:30px 0 40px;color:var(--faint);font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px}
footer a{color:var(--muted)}
footer nav{display:flex;gap:18px;flex-wrap:wrap}

/* document pages (privacy, support) */
.doc{padding:56px 0 80px}
.doc .wrap{max-width:760px}
.doc h1{font-size:clamp(30px,4.6vw,44px);margin-bottom:8px}
.doc .dateline{color:var(--faint);font-size:15px;margin:0 0 34px}
.doc h2{font-size:24px;margin:40px 0 12px}
.doc p,.doc li{color:var(--muted);max-width:none}
.doc strong{color:var(--ink);font-weight:600}
.doc ul{padding-left:22px}
.doc li{margin-bottom:8px}
.doc .summary{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:var(--radius);padding:20px 22px;margin:0 0 30px}
.doc .summary p{color:var(--ink);margin:0}
.doc .summary p + p{margin-top:10px}
.doc code{font-family:ui-monospace,Consolas,monospace;font-size:.92em;background:var(--card);padding:1px 6px;border-radius:5px}

@media (max-width:820px){
  .hero{padding:44px 0 32px}
  .hero .wrap,.feature .wrap,.cards .wrap{grid-template-columns:1fr;gap:34px}
  .feature.flip .text{order:0}
  .hero .phone{transform:none;width:min(260px,80%)}
  .phone{width:min(260px,80%)}
  .feature{padding:52px 0}
  body{font-size:17px}
  .nav{gap:16px;font-size:15px}
  .nav .btn{padding:10px 14px;font-size:14px}
}
@media (max-width:480px){
  .nav a.textlink{display:none}
}