/* ==========================================================
   PAIRO — website
   Same palette and type as the app, so the site and the
   product feel like one thing. Coral = your side.
   Teal = their side. That is the whole idea, encoded.
   ========================================================== */

:root{
  --ink:#0E0D14;
  --surface:#17161F;
  --line:#302D40;
  --text:#EEEBF5;
  --text-dim:#9A96AC;
  --text-faint:#6B677D;
  --coral:#FF6B54;
  --coral-soft:#FF6B5426;
  --teal:#35D6C4;
  --teal-soft:#35D6C426;
  --warn:#FFC65C;
  --f-display:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-body:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --maxw:660px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

/* ---------- wordmark ---------- */
.mark{
  font-family:var(--f-display);
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--coral);
  text-decoration:none;
  display:inline-block;
}
.mark i{ color:var(--teal); font-style:normal; }

/* ---------- site header ---------- */
.site-head{
  padding:28px 0;
  border-bottom:1px solid var(--line);
}
.site-head .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.site-head .mark{ font-size:26px; }
.site-nav{ display:flex; gap:22px; flex-wrap:wrap; }
.site-nav a{
  color:var(--text-dim);
  text-decoration:none;
  font-size:15px;
  font-weight:500;
}
.site-nav a:hover,.site-nav a:focus-visible{ color:var(--text); }

/* ---------- hero ---------- */
.hero{ padding:96px 0 76px; text-align:center; }
.hero .mark{ font-size:clamp(56px,15vw,104px); line-height:.95; }
.tagline{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(26px,6vw,36px);
  letter-spacing:-.02em;
  margin:28px 0 10px;
}
.subline{ color:var(--text-dim); margin:0; font-size:18px; }

.badge{
  display:inline-block;
  margin-top:34px;
  padding:7px 16px;
  border-radius:999px;
  background:var(--teal-soft);
  color:var(--teal);
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* ---------- sections ---------- */
section{ padding:64px 0; border-top:1px solid var(--line); }
h2{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(24px,5vw,30px);
  letter-spacing:-.02em;
  margin:0 0 26px;
}
h3{
  font-family:var(--f-display);
  font-weight:600;
  font-size:20px;
  letter-spacing:-.01em;
  margin:36px 0 10px;
}
p{ margin:0 0 18px; }
a{ color:var(--teal); }

/* ---------- the four steps ---------- */
.steps{ list-style:none; margin:0; padding:0; counter-reset:s; }
.steps li{
  counter-increment:s;
  position:relative;
  padding:0 0 26px 56px;
}
.steps li::before{
  content:counter(s);
  position:absolute;
  left:0; top:-2px;
  width:36px; height:36px;
  border-radius:50%;
  display:grid; place-items:center;
  background:var(--coral-soft);
  color:var(--coral);
  font-family:var(--f-display);
  font-weight:800;
  font-size:16px;
}
.steps li:nth-child(even)::before{
  background:var(--teal-soft);
  color:var(--teal);
}
.steps b{ display:block; font-weight:600; font-size:18px; margin-bottom:2px; }
.steps span{ color:var(--text-dim); font-size:16px; }

/* ---------- waitlist ---------- */
.signup{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:30px;
  margin-top:8px;
}
.signup h2{ margin-bottom:8px; }
.signup p.lede{ color:var(--text-dim); font-size:16px; }

.row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
input[type=email]{
  flex:1 1 220px;
  min-width:0;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:12px;
  padding:15px 16px;
  color:var(--text);
  font-family:inherit;
  font-size:16px; /* 16px stops iOS zooming on focus */
}
input[type=email]::placeholder{ color:var(--text-faint); }
input[type=email]:focus-visible{
  outline:2px solid var(--coral);
  outline-offset:1px;
  border-color:transparent;
}
button{
  flex:0 0 auto;
  background:var(--coral);
  color:#1A0A06;
  border:0;
  border-radius:12px;
  padding:15px 26px;
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
}
button:hover{ filter:brightness(1.07); }
button:disabled{ opacity:.55; cursor:default; }
button:focus-visible{ outline:2px solid var(--text); outline-offset:2px; }

.msg{ margin:14px 0 0; font-size:15px; min-height:1.5em; }
.msg.ok{ color:var(--teal); }
.msg.bad{ color:var(--warn); }

/* ---------- age notice ---------- */
.gate{
  margin-top:44px;
  padding:18px 20px;
  border-left:3px solid var(--coral);
  background:var(--coral-soft);
  border-radius:0 12px 12px 0;
  color:var(--text-dim);
  font-size:15px;
}
.gate b{ color:var(--text); }

/* ---------- legal pages ---------- */
.doc{ padding:56px 0 24px; }
.doc h1{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(32px,7vw,44px);
  letter-spacing:-.03em;
  margin:0 0 8px;
}
.doc .updated{ color:var(--text-faint); font-size:15px; margin-bottom:40px; }
.doc h2{
  font-size:22px;
  margin:44px 0 14px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.doc h2:first-of-type{ border-top:0; padding-top:0; }
.doc ul{ margin:0 0 18px; padding-left:22px; color:var(--text); }
.doc li{ margin-bottom:9px; }
.doc li::marker{ color:var(--coral); }

.callout{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:20px 22px;
  margin:26px 0;
}
.callout p:last-child{ margin-bottom:0; }

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:40px 0 64px;
  color:var(--text-faint);
  font-size:15px;
}
footer .links{ display:flex; gap:20px; flex-wrap:wrap; margin-bottom:16px; }
footer a{ color:var(--text-dim); text-decoration:none; }
footer a:hover{ color:var(--text); }

/* ---------- light mode ---------- */
@media (prefers-color-scheme:light){
  :root{
    --ink:#F6F4FA;
    --surface:#FFFFFF;
    --line:#DCD7E8;
    --text:#171523;
    --text-dim:#615D73;
    --text-faint:#8C88A0;
    --coral:#E24A32;
    --coral-soft:#E24A3218;
    --teal:#0E9E8C;
    --teal-soft:#0E9E8C18;
    --warn:#8A5C00;
  }
  button{ color:#FFF; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none!important; animation:none!important; }
}