/* Dark-committed by design: the app itself is dark-only, and so is the category.
   Every colour is painted explicitly so the page holds on any host ground. */
:root{
  --black:#080808; --surface:#111113; --surface-2:#17171A; --line:#232328; --line-2:#32323A;
  --white:#FFFFFF; --text:#E6E7EA; --text-2:#9CA0A8; --text-3:#8C919C;
  --cyan:#10F9F9; --purple:#8800FF; --purple-dark:#4500C9;
  --birthday:#D6F400; --hometown:#10F9F9; --revenge:#FF350D; --college:#B37DFF;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important}}
body{
  margin:0; background:var(--black); color:var(--text);
  font-family:"Public Sans",ui-sans-serif,system-ui,sans-serif;
  font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Archivo,ui-sans-serif,system-ui,sans-serif; margin:0; color:var(--white); text-wrap:balance; letter-spacing:-.022em; line-height:1.05}
h1{font-size:clamp(2.4rem,7vw,4.1rem); font-weight:800}
h2{font-size:clamp(1.7rem,4vw,2.5rem); font-weight:700}
h3{font-size:1.12rem; font-weight:700; letter-spacing:-.01em}
p{margin:0; max-width:60ch}
a{color:var(--cyan)}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px}

/* Ported from the app's bg-hero-aurora utility and aurora-blob keyframes
   (packages/web/src/app/globals.css). Same colours, same timings, so the
   marketing entrance matches what a user sees at login and on the paywall. */
.aurora{
  position:relative; overflow:hidden; isolation:isolate;
  background-color:#050212;
  background-image:
    radial-gradient(circle at 50% 90%, rgba(0,0,255,.45) 0%, transparent 35%),
    linear-gradient(135deg,#050212 0%,#0000FF 50%,#8800FF 100%);
}
.aurora::before,.aurora::after{
  content:""; position:absolute; inset:-20%; pointer-events:none; will-change:transform; z-index:0;
}
.aurora::before{
  background:radial-gradient(closest-side, rgba(16,249,249,.55) 0%, transparent 70%);
  animation:aurora-blob-a 18s ease-in-out infinite;
}
.aurora::after{
  background:radial-gradient(closest-side, rgba(136,0,255,.6) 0%, transparent 70%);
  animation:aurora-blob-b 22s ease-in-out infinite;
}
.aurora > *{position:relative; z-index:1}
/* Settle into the page ground so the hero doesn't end on a hard edge. */
.aurora-fade{
  position:absolute; left:0; right:0; bottom:0; height:180px; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(8,8,8,0), var(--black));
}
@keyframes aurora-blob-a{
  0%,100%{transform:translate(0%,0%) scale(1)}
  33%{transform:translate(18%,12%) scale(1.15)}
  66%{transform:translate(-6%,22%) scale(.9)}
}
@keyframes aurora-blob-b{
  0%,100%{transform:translate(0%,0%) scale(1.05)}
  33%{transform:translate(-16%,18%) scale(.85)}
  66%{transform:translate(12%,-10%) scale(1.2)}
}
/* The hero screenshot is a dark UI sitting on a bright gradient, so it needs
   its own ground. A rectangular panel in the aurora's own base colour, feathered
   at the edges, separates the phone from the moving colour behind it. */
.aurora .phone{position:relative}
.aurora .phone::before{
  content:""; position:absolute; inset:-7% -13%; z-index:0; pointer-events:none;
  /* Rectangular panel, feathered by blur rather than a radial falloff — keeps
     a straight edge around the phone while staying soft against the aurora. */
  background:rgba(3,1,10,.72);
  border-radius:30px;
  filter:blur(24px);
}
.aurora .phone img{position:relative; z-index:1}

/* Over the aurora the ground is lighter, so lift the supporting text. */
.aurora .sub{color:#D7DAE4}
.aurora .cta-note{color:#AFB4C2}
.aurora .store{background:rgba(8,8,8,.42); border-color:rgba(255,255,255,.22); backdrop-filter:blur(6px)}
.aurora .store small{color:#B9BEC9}
.aurora .proof{color:#CBD0DA}
.aurora .proof a{border-bottom-color:rgba(255,255,255,.3)}
.aurora .nav-cta{background:rgba(255,255,255,.94)}

.wrap{max-width:1080px; margin:0 auto; padding:0 22px}
section{padding:68px 0; border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
.aurora section{border-top:0}
.aurora .hero{padding-bottom:96px}

/* ---------- nav ---------- */
nav{display:flex; align-items:center; justify-content:space-between; padding:20px 0}
.brand{font-family:Archivo,sans-serif; font-weight:800; font-size:.95rem; letter-spacing:.02em; line-height:1.05; color:var(--white); text-decoration:none}
.brand span{display:block}
.nav-cta{
  font-family:Archivo,sans-serif; font-weight:700; font-size:.82rem; text-decoration:none;
  color:var(--black); background:var(--white); padding:9px 17px; border-radius:8px; white-space:nowrap;
}

/* ---------- hero ---------- */
.hero{display:grid; gap:44px; align-items:center; padding-top:24px}
@media(min-width:900px){.hero{grid-template-columns:1.08fr .92fr; gap:56px}}
.hero-copy{display:flex; flex-direction:column; gap:22px; align-items:flex-start}
.kicker{
  font-family:Archivo,sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cyan);
}
.sub{font-size:1.12rem; color:var(--text-2); max-width:46ch}
.cta-primary{
  display:inline-flex; align-items:center; justify-content:center; min-height:52px;
  font-family:Archivo,sans-serif; font-weight:800; font-size:1.02rem; letter-spacing:-.01em;
  color:var(--black); text-decoration:none; padding:0 30px; border-radius:11px;
  background:linear-gradient(100deg,var(--cyan),#7CFFB2);
}
.cta-note{font-size:.85rem; color:var(--text-3)}
.stores{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.store{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 15px;
  border:1px solid var(--line-2); border-radius:9px; text-decoration:none;
  color:var(--text); font-size:.83rem; background:var(--surface);
}
.store b{font-family:Archivo,sans-serif; font-weight:700; font-size:.92rem; color:var(--white); display:block; line-height:1.1}
.store small{color:var(--text-3); font-size:.68rem; display:block; line-height:1.1}

/* phone */
.phone{justify-self:center; width:100%; max-width:286px}
.phone img{
  width:100%; height:auto; display:block; border-radius:26px;
  border:1px solid var(--line-2); box-shadow:0 30px 70px -30px rgba(16,249,249,.28), 0 18px 50px -24px rgba(0,0,0,.9);
}

/* ---------- signal types ---------- */
.grid-3{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:720px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.sig{
  border:1px solid var(--line); border-radius:13px; background:var(--surface);
  padding:20px; display:flex; flex-direction:column; gap:9px;
}
.sig .label{
  font-family:Archivo,sans-serif; font-size:.67rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase;
}
.sig p{font-size:.93rem; color:var(--text-2)}
.sig.soon{border-style:dashed; background:transparent}
.sig.soon p{color:var(--text-3)}
.sig .eg{font-size:.84rem; color:var(--text-3); border-top:1px solid var(--line); padding-top:9px; margin-top:2px}

/* ---------- split ---------- */
.split{display:grid; gap:40px; align-items:center}
@media(min-width:900px){.split{grid-template-columns:.92fr 1.08fr; gap:52px}}
.split.flip{direction:rtl} .split.flip>*{direction:ltr}
.split-copy{display:flex; flex-direction:column; gap:16px; align-items:flex-start}

/* ---------- pricing ---------- */
.tiers{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:720px){.tiers{grid-template-columns:1fr 1fr}}
.tier{border:1px solid var(--line); border-radius:13px; background:var(--surface); padding:24px; display:flex; flex-direction:column; gap:13px}
.tier.pro{border-color:rgba(16,249,249,.35); background:linear-gradient(170deg,rgba(16,249,249,.07),var(--surface) 55%)}
.tier .name{font-family:Archivo,sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-3)}
.tier .price{font-family:Archivo,sans-serif; font-weight:800; font-size:2.1rem; color:var(--white); line-height:1}
.tier .price small{font-size:.92rem; font-weight:600; color:var(--text-3)}
.tier ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
.tier li{font-size:.93rem; color:var(--text-2); padding-left:20px; position:relative}
.tier li::before{content:"›"; position:absolute; left:4px; color:var(--cyan); font-weight:700}

/* ---------- leagues ---------- */
.proof{display:flex; align-items:center; gap:9px; font-size:.88rem; color:var(--text-2)}
.proof a{color:var(--text); text-decoration:none; font-weight:600; border-bottom:1px solid var(--line-2)}
.proof a:hover{color:var(--cyan); border-bottom-color:var(--cyan)}
.ig-dot{width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF); flex-shrink:0}

.ig{
  border:1px solid var(--line); border-radius:16px; padding:30px;
  background:linear-gradient(150deg,rgba(221,42,123,.10),rgba(129,52,175,.06) 45%,var(--surface) 80%);
  display:flex; flex-direction:column; gap:16px; align-items:flex-start;
}
@media(min-width:760px){.ig{flex-direction:row; align-items:center; justify-content:space-between; gap:34px}}
.ig-copy{display:flex; flex-direction:column; gap:9px}
.ig-handle{font-family:Archivo,sans-serif; font-weight:800; font-size:1.45rem; color:var(--white); line-height:1.1}
.ig-cta{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; white-space:nowrap;
  font-family:Archivo,sans-serif; font-weight:700; font-size:.92rem; text-decoration:none;
  color:var(--white); padding:0 24px; border-radius:10px;
  background:linear-gradient(120deg,#F58529,#DD2A7B 55%,#8134AF);
}

.leagues{display:flex; gap:10px; flex-wrap:wrap}
.league{
  font-family:Archivo,sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.08em;
  padding:8px 15px; border:1px solid var(--line-2); border-radius:99px; color:var(--text);
  background:var(--surface);
}

/* ---------- closing ---------- */
.closing{text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px; padding:80px 0}
.closing p{margin:0 auto}

footer{border-top:1px solid var(--line); padding:34px 0 56px; display:flex; flex-direction:column; gap:16px}
.legal{font-size:.8rem; color:var(--text-3); max-width:70ch; line-height:1.62}
.f-links{display:flex; gap:18px; flex-wrap:wrap; font-size:.83rem}
.f-links a{color:var(--text-2); text-decoration:none}
.f-links a:hover{color:var(--white)}

:root{color-scheme:dark}
.nav-cta{display:inline-flex;align-items:center;min-height:44px}
.brand{display:flex;flex-direction:column;justify-content:center;min-height:44px}
.f-links a{display:inline-flex;align-items:center;min-height:44px}
.hero-copy,.split-copy,.ig-copy{min-width:0}
.ig-handle{overflow-wrap:anywhere}
.legal-page{max-width:850px;padding-top:48px;padding-bottom:64px;overflow-wrap:anywhere}
.legal-page h1{font-size:clamp(2rem,6vw,3.2rem);margin-bottom:24px}
.legal-page h2,.legal-page h3{margin:36px 0 16px;line-height:1.25}
.legal-page p{margin:14px 0;max-width:none}
.legal-page li{margin:8px 0}
.legal-page ul,.legal-page ol{padding-left:24px}