/* Drop Studio — the app's own tokens, nothing else.
   Paper #FBFAF8, ink #141416, violet #5B3DF5: the palette the phone uses, so
   the site and the app read as one thing. */
:root{
  --paper:#FBFAF8; --surface:#FFFFFF; --sunken:#F1EFEA; --border:#E7E4DD;
  --ink:#141416; --muted:#6B6B73; --accent:#5B3DF5; --accent-soft:#EEE9FF;
  --on-accent:#FFFFFF; --max:64rem;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* header */
header{position:sticky; top:0; z-index:10; background:rgba(251,250,248,.85);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--border)}
header .wrap{display:flex; align-items:center; gap:24px; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink); letter-spacing:-.01em}
.brand img{width:30px; height:30px; border-radius:8px; display:block}
nav{margin-left:auto; display:flex; align-items:center; gap:22px; font-size:15px}
nav a{color:var(--muted)}
nav a:hover{color:var(--ink); text-decoration:none}
.btn{display:inline-block; background:var(--accent); color:var(--on-accent); font-weight:600;
  padding:12px 22px; border-radius:999px; font-size:15px}
.btn:hover{text-decoration:none; opacity:.92}
.btn.ghost{background:var(--accent-soft); color:var(--accent)}
@media(max-width:720px){nav .hide-sm{display:none}}

/* hero */
.hero{padding:88px 0 24px; text-align:center}
h1{font-size:clamp(2.2rem,6vw,3.6rem); line-height:1.05; letter-spacing:-.03em; margin:0 0 20px}
h1 em{font-style:normal; color:var(--accent)}
.lead{font-size:clamp(1.05rem,2.4vw,1.3rem); color:var(--muted); max-width:38rem; margin:0 auto 28px}
.cta-row{display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap}
.fineprint{color:var(--muted); font-size:14px; margin-top:18px}

/* proof strip */
.strip{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:44px 0 8px}
.shot{position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--border); background:var(--sunken); aspect-ratio:3/4}
.shot img{width:100%; height:100%; object-fit:cover; display:block}
.shot span{position:absolute; left:8px; bottom:8px; background:rgba(20,20,22,.72); color:#fff;
  font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding:4px 8px; border-radius:999px}
.shot.source span{background:var(--accent)}
@media(max-width:720px){.strip{grid-template-columns:repeat(2,1fr)}}

/* sections */
section{padding:64px 0}
h2{font-size:clamp(1.5rem,3.4vw,2.1rem); letter-spacing:-.02em; margin:0 0 12px}
.sub{color:var(--muted); max-width:42rem; margin:0 0 32px}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.stat{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px}
.stat b{display:block; font-size:1.7rem; letter-spacing:-.02em}
.stat span{color:var(--muted); font-size:14px}
@media(max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.step{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:26px}
.step b{display:block; margin-bottom:6px}
.step .n{width:28px;height:28px;border-radius:999px;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;margin-bottom:14px}
@media(max-width:720px){.steps{grid-template-columns:1fr}}

details{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px 20px; margin-bottom:12px}
details summary{cursor:pointer; font-weight:600; list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; float:right; color:var(--muted)}
details[open] summary::after{content:"–"}
details p{color:var(--muted); margin:12px 0 0}

/* footer */
footer{border-top:1px solid var(--border); padding:44px 0 60px; color:var(--muted); font-size:15px}
.fcols{display:flex; gap:56px; flex-wrap:wrap; margin-bottom:28px}
.fcol h4{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0 0 10px}
.fcol a{display:block; color:var(--ink); margin-bottom:7px; font-size:15px}
.legalnote{font-size:13px; line-height:1.6}

/* legal pages */
.doc{max-width:44rem; padding-top:40px}
.doc h1{font-size:2rem; text-align:left; margin-bottom:6px}
.doc .updated{color:var(--muted); margin:0 0 36px}
.doc h2{font-size:1.15rem; margin:2.2em 0 .4em}
.doc p,.doc li{color:#2a2a30}
.doc table{border-collapse:collapse; width:100%; margin:1em 0; font-size:.95rem}
.doc th,.doc td{text-align:left; padding:.6em .8em; border-bottom:1px solid var(--border); vertical-align:top}
.doc th{color:var(--muted); font-weight:600}
.callout{background:var(--accent-soft); border-radius:12px; padding:1em 1.2em; margin:2em 0}