/* SapphicTides — site styles. One file, no framework, no trackers. */
:root{
  --ink:#1d1a33; --ink2:#3b3658; --muted:#6c6789; --faint:#9b96b3;
  --line:rgba(120,100,180,.14); --card:#fff;
  --accent:#6f5ce0; --deep:#4f3fbe; --night:#1e1852;
  --grad:linear-gradient(115deg,#ffc2e2 0%,#e9a8e0 34%,#9b7ff0 62%,#4f3fbe 84%,#1e1852 100%);
  --r:20px;
  --shadow:0 4px 20px rgba(90,60,150,.07);
  --shadow-lg:0 18px 50px rgba(80,50,140,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
html{scroll-behavior:smooth}
body{
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--ink);line-height:1.62;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 620px at 6% -4%, #ffe4f3 0%, transparent 58%),
    radial-gradient(820px 620px at 98% 3%, #e2e6ff 0%, transparent 55%),
    radial-gradient(900px 720px at 50% 101%, #ece0ff 0%, transparent 60%),
    #faf8fd;
  background-attachment:fixed;
}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
.narrow{max-width:720px}
a{color:var(--deep)}

/* nav */
.top{position:sticky;top:0;z-index:20;backdrop-filter:blur(16px);
  background:rgba(250,248,253,.82);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.logo svg{height:26px;width:auto;display:block}
.logo b{font-size:16.5px;font-weight:800;letter-spacing:-.02em}
.top nav{margin-left:auto;display:flex;gap:6px;align-items:center}
.top nav a{font-size:13.5px;font-weight:650;color:var(--ink2);text-decoration:none;padding:8px 12px;border-radius:10px}
.top nav a:hover{background:rgba(120,100,180,.07)}
.top nav a.cta{background:var(--grad);color:#fff;font-weight:750;box-shadow:var(--shadow)}
@media(max-width:640px){.top nav a:not(.cta){display:none}}

/* hero */
.hero{padding:74px 0 20px;text-align:center}
.eyebrow{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--deep);background:rgba(155,127,240,.1);border:1px solid rgba(155,127,240,.22);
  border-radius:999px;padding:7px 15px;margin-bottom:22px}
h1{font-size:clamp(34px,6vw,58px);line-height:1.06;letter-spacing:-.035em;font-weight:850}
h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#e0559f;
  margin-right:9px;vertical-align:middle;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
.stores{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.store{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:11px 20px;
  border-radius:14px;background:rgba(255,255,255,.66);border:1px solid var(--line);
  box-shadow:var(--shadow);cursor:default}
.store .sl{font-size:10.5px;font-weight:700;color:var(--faint);letter-spacing:.02em}
.store b{font-size:15px;font-weight:800;letter-spacing:-.015em;color:var(--ink2)}
.herocta{display:inline-block;margin-top:26px;font-size:15px;font-weight:750;text-decoration:none;
  color:#fff;background:var(--grad);padding:14px 28px;border-radius:15px;box-shadow:var(--shadow-lg)}
.herocta:active{transform:translateY(1px)}
.statuscard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 32px;box-shadow:var(--shadow);max-width:720px;margin:0 auto}
.statuscard .st-h{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--deep);margin-bottom:14px}
.statuscard p{font-size:15.5px;margin-bottom:12px}
.statuscard .st-sub{font-size:14px;color:var(--muted);margin-bottom:0}
#status{padding-top:20px;padding-bottom:20px}
.hero p.lede{font-size:clamp(16px,2.1vw,19px);color:var(--muted);max-width:600px;margin:22px auto 0;line-height:1.6}
/* Show the phones big enough to actually read, then clip the strip and fade it
   out. Full-height screenshots at a readable width would make the hero three
   screens tall; this keeps it to one and shows the part that matters. */
.shots{display:flex;justify-content:center;align-items:flex-start;gap:22px;
  margin:52px 0 0;position:relative;max-height:470px;overflow:hidden}
.shots::after{content:'';position:absolute;left:0;right:0;bottom:0;height:150px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(250,248,253,0) 0%,rgba(250,248,253,.75) 55%,#faf8fd 100%)}
.shots img{width:min(310px,25vw);height:auto;border-radius:28px;box-shadow:var(--shadow-lg)}
.shots img:nth-child(1),.shots img:nth-child(3){margin-top:40px;width:min(276px,22vw);opacity:.95}
/* Below ~1024px three phones would each be too small to read, so drop to one
   and give it the room instead. */
@media(max-width:1023px){
  .shots img:nth-child(1),.shots img:nth-child(3){display:none}
  .shots img{width:min(330px,72vw)}
  .shots{max-height:430px}
}
@media(max-width:760px){
  .shots{max-height:390px;margin-top:38px}
  .shots img{width:min(300px,80vw)}
  .shots::after{height:118px}
}

/* sections */
section{padding:54px 0}
@media(max-width:760px){
  section{padding:44px 0}
  .hero{padding:48px 0 12px}
  .grid{gap:12px;margin-top:28px}
  .feat{padding:20px}
  .band{padding:38px 22px}
  .signup{padding:32px 22px}
  .statuscard{padding:24px 22px}
}
h2{font-size:clamp(25px,3.4vw,34px);letter-spacing:-.028em;font-weight:820;line-height:1.16}
h3{font-size:17px;font-weight:800;letter-spacing:-.014em;margin-bottom:7px}
.sec-lede{color:var(--muted);font-size:16px;max-width:620px;margin-top:14px}
p{margin-bottom:14px;color:var(--ink2)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:38px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;
  box-shadow:var(--shadow)}
.feat .e{font-size:24px;line-height:1;display:block;margin-bottom:13px}
.feat p{font-size:14px;color:var(--muted);margin:0;line-height:1.62}

.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split h2{max-width:15ch}
.shotbox{max-width:320px;margin:0 auto;border-radius:26px;overflow:hidden;box-shadow:var(--shadow-lg);
  max-height:455px;position:relative}
.shotbox img{width:100%;height:auto}
.shotbox::after{content:'';position:absolute;left:0;right:0;bottom:0;height:90px;
  background:linear-gradient(to bottom,rgba(250,248,253,0),rgba(250,248,253,.92))}
@media(max-width:760px){.split{grid-template-columns:1fr;gap:32px}}

/* privacy band */
.band{background:linear-gradient(150deg,#241b47 0%,#3d2a63 44%,#5c3566 76%,#7d3f60 100%);
  color:#fff;border-radius:30px;padding:56px 44px;position:relative;overflow:hidden}
.band::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 260px at 84% 8%,rgba(255,255,255,.14),transparent 70%)}
.band > *{position:relative}
.band h2{color:#fff}
.band .sec-lede{color:rgba(255,255,255,.72)}
.band .grid{margin-top:34px}
.band .feat{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);
  backdrop-filter:blur(8px);box-shadow:none}
.band .feat h3{color:#fff}
.band .feat p{color:rgba(255,255,255,.7)}
@media(max-width:640px){.band{padding:42px 24px;border-radius:24px}}

/* waitlist */
.signup{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:40px 36px;
  box-shadow:var(--shadow-lg);text-align:center}
.signup h2{margin-bottom:10px}
form{max-width:440px;margin:26px auto 0;text-align:left}
.row{display:flex;gap:10px}
input[type=email]{flex:1;min-width:0;padding:15px 17px;border-radius:15px;font-size:16px;
  border:1px solid rgba(160,150,190,.28);background:#fff;font-family:inherit;color:inherit}
input[type=email]:focus{outline:none;border-color:#b9a9e8;box-shadow:0 0 0 3px rgba(155,127,240,.14)}
button.go{padding:15px 24px;border-radius:15px;border:0;background:var(--grad);color:#fff;
  font-weight:800;font-size:15px;cursor:pointer;font-family:inherit;box-shadow:var(--shadow);white-space:nowrap}
button.go:active{transform:translateY(1px)}
button.go[disabled]{opacity:.6;cursor:default}
.consent{display:flex;gap:11px;align-items:flex-start;margin-top:16px;font-size:12.5px;
  color:var(--muted);line-height:1.55}
.consent input{width:17px;height:17px;margin-top:2px;flex-shrink:0;accent-color:var(--accent)}
.formnote{font-size:11.5px;color:var(--faint);margin-top:14px;line-height:1.6;text-align:center}
#msg{min-height:22px;font-size:13.5px;margin-top:14px;text-align:center;font-weight:650}
#msg.ok{color:#2f8f6a} #msg.err{color:#b93f57}

/* legal pages */
.doc{padding:52px 0 80px}
.doc h1{font-size:clamp(28px,4.6vw,40px);margin-bottom:8px}
.doc .updated{color:var(--faint);font-size:13px;margin-bottom:36px}
.doc h2{font-size:21px;margin:40px 0 12px}
.doc h3{font-size:15.5px;margin:26px 0 8px}
/* Long-form pages get a proper measure. ~65 characters is the readable range;
   the 720px column was running to 100, which is what makes a policy page feel
   like homework. Tables and headings stay full width. */
.doc p,.doc li{font-size:16px;line-height:1.68;color:var(--ink2);max-width:64ch}
.doc .callout p{max-width:none}
.doc h2,.doc h3{max-width:30ch}
.doc ul,.doc ol{margin:0 0 16px 22px}
.doc li{margin-bottom:8px}
.doc table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px}
.doc th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  padding:0 12px 9px;border-bottom:1.5px solid var(--line)}
.doc td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink2)}
.callout{border-radius:16px;padding:18px 20px;margin:22px 0;font-size:14.5px;line-height:1.62}
.callout b{display:block;margin-bottom:5px}
.callout.v{background:#f4f1ff;border:1px solid #ddd4fb;color:#3f2f8f}
.callout.a{background:#fff8ea;border:1px solid #f0dcb8;color:#75561a}

footer{border-top:1px solid var(--line);padding:44px 0 60px;margin-top:60px}
footer .wrap{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start}
footer .fl{display:flex;flex-wrap:wrap;gap:18px;margin-left:auto}
footer a{font-size:13px;color:var(--muted);text-decoration:none}
footer a:hover{color:var(--deep)}
footer .fine{font-size:11.5px;color:var(--faint);width:100%;line-height:1.7;margin-top:8px}