/* Recs logged-out landing page */
html { scroll-behavior:smooth; }
body.recs-landing {
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}
body.recs-landing.modal-open { overflow:hidden; }
.landing-shell { position:relative; z-index:1; }
.landing-nav {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:300;
  height:72px;
  padding:max(env(safe-area-inset-top),0px) clamp(1rem,4vw,3.5rem) 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  background:color-mix(in srgb,var(--bg) 84%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--border2) 68%,transparent);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
}
.landing-brand {
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  color:var(--text);
  text-decoration:none;
  min-width:max-content;
}
.landing-brand-mark {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  border:1px solid var(--border2);
  background:linear-gradient(145deg,var(--surface2),var(--input-bg));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 26px rgba(0,0,0,.18);
  font-size:1.12rem;
  font-weight:950;
  letter-spacing:-.08em;
}
.landing-brand-name { font-size:1.05rem; font-weight:950; letter-spacing:.16em; }
.landing-nav-links { display:flex; align-items:center; justify-content:center; gap:.25rem; }
.landing-nav-links a {
  color:var(--text2);
  text-decoration:none;
  font-size:.82rem;
  font-weight:760;
  border-radius:999px;
  padding:.5rem .78rem;
  transition:background .15s,color .15s;
}
.landing-nav-links a:hover { background:var(--surface2); color:var(--text); }
.landing-nav-actions { display:flex; align-items:center; gap:.55rem; }
.landing-btn {
  appearance:none;
  border:1px solid var(--border2);
  border-radius:13px;
  min-height:40px;
  padding:.66rem 1rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  background:var(--surface2);
  color:var(--text);
  font:800 .84rem/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  letter-spacing:-.01em;
  cursor:pointer;
  text-decoration:none;
  transition:transform .15s, border-color .15s, box-shadow .15s, opacity .15s, background .15s;
}
.landing-btn:hover { transform:translateY(-1px); border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.landing-btn:active { transform:scale(.98); }
.landing-btn.primary { background:var(--accent); color:var(--accent-btn-text); border-color:var(--accent); }
.landing-btn.quiet { background:transparent; }
.landing-btn.large { min-height:48px; padding:.84rem 1.25rem; border-radius:15px; font-size:.91rem; }
.landing-btn.full { width:100%; }
.landing-main { width:min(1240px,calc(100% - 2rem)); margin:0 auto; padding:108px 0 4.5rem; }
.landing-section { margin:0 0 clamp(4.6rem,9vw,8.2rem); scroll-margin-top:92px; }
.landing-hero {
  min-height:min(760px,calc(100vh - 108px));
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);
  gap:clamp(2rem,5vw,5.5rem);
  align-items:center;
  padding:clamp(2rem,5vw,5.4rem) 0 clamp(3rem,7vw,6rem);
}
.landing-kicker {
  display:inline-flex;
  align-items:center;
  gap:.48rem;
  width:max-content;
  max-width:100%;
  border:1px solid color-mix(in srgb,var(--accent) 52%,var(--border2));
  background:var(--accent-dim);
  color:var(--accent);
  border-radius:999px;
  padding:.46rem .72rem;
  font-size:.7rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:1.2rem;
}
.landing-kicker-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px var(--accent-dim); }
.landing-hero h1 {
  max-width:760px;
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","Segoe UI",Arial,sans-serif;
  font-size:clamp(3.15rem,7vw,6.7rem);
  line-height:1.045;
  letter-spacing:-.008em;
  word-spacing:.055em;
  font-weight:820;
  text-wrap:balance;
}
.landing-hero h1 span { color:var(--accent); }
.landing-hero-copy {
  max-width:650px;
  margin:1.5rem 0 0;
  color:var(--text2);
  font-size:clamp(1rem,1.8vw,1.22rem);
  line-height:1.58;
  font-weight:650;
}
.landing-hero-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.7rem; }
.landing-proof { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem; }
.landing-proof span {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:31px;
  border:1px solid color-mix(in srgb,var(--accent) 52%,var(--border2));
  background:var(--accent-dim);
  box-shadow:none;
  border-radius:999px;
  padding:.42rem .74rem;
  color:var(--accent);
  font-size:.68rem;
  font-weight:900;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align:center;
}
.landing-stage { position:relative; min-height:590px; }
.landing-stage-glow {
  position:absolute;
  width:75%;
  aspect-ratio:1;
  right:3%;
  top:12%;
  border-radius:50%;
  background:var(--accent);
  opacity:.13;
  filter:blur(90px);
}
.product-window {
  position:absolute;
  inset:4% 0 4% 7%;
  border:1px solid var(--border2);
  border-radius:30px;
  background:linear-gradient(150deg,#17181c 0%,#111216 100%);
  box-shadow:0 40px 100px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
  transform:rotate(1.7deg);
}
[data-theme="light"] .product-window { background:linear-gradient(150deg,#f1f2f5,#c7cad1); }
.product-topbar { height:48px; padding:0 1rem; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); }
.product-dots { display:flex; gap:5px; }
.product-dots i { width:7px; height:7px; border-radius:50%; background:var(--border2); }
.product-title { color:var(--text2); font-size:.68rem; font-weight:900; letter-spacing:.14em; }
.product-body { padding:1rem; }
.product-for-you { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:.9rem; }
.product-for-you h3 { font-size:1.35rem; margin:0; letter-spacing:-.04em; }
.product-for-you p { color:var(--text2); font-size:.7rem; font-weight:700; margin:.2rem 0 0; }
.product-match { border:1px solid var(--accent); background:var(--accent-dim); color:var(--accent); border-radius:999px; padding:.35rem .58rem; font-size:.68rem; font-weight:900; white-space:nowrap; }
.preview-feature-card {
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:1rem;
  border:1px solid var(--border2);
  background:rgba(255,255,255,.035);
  border-radius:22px;
  padding:.8rem;
}
.poster-art {
  position:relative;
  overflow:hidden;
  border-radius:15px;
  aspect-ratio:2/3;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 14px 28px rgba(0,0,0,.3);
  isolation:isolate;
}
.poster-art::before,.poster-art::after { content:""; position:absolute; pointer-events:none; }
.poster-art::after { inset:0; background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.84)); z-index:2; }
.poster-art .poster-name { position:absolute; left:.55rem; right:.55rem; bottom:.55rem; z-index:3; color:#fff; font-size:.76rem; font-weight:950; line-height:1.02; letter-spacing:-.035em; }
.poster-art .poster-small { display:block; margin-top:.22rem; font-size:.52rem; font-weight:800; opacity:.66; letter-spacing:.05em; }
.poster-severance { background:linear-gradient(145deg,#e8e8e5 0 48%,#c94337 49% 58%,#325b79 59% 100%); }
.poster-severance::before { width:62%; height:72%; left:19%; top:8%; border-radius:50% 50% 42% 42%; background:linear-gradient(90deg,#222 0 48%,#eee 49% 52%,#222 53%); opacity:.72; transform:skew(-4deg); }
.poster-silo { background:radial-gradient(circle at 50% 26%,#f1b86c 0 8%,transparent 9%),linear-gradient(180deg,#6f7c83 0 45%,#2c3337 46% 100%); }
.poster-silo::before { width:55%; height:92%; left:22.5%; top:12%; border:6px solid rgba(244,228,191,.7); border-bottom:0; border-radius:50% 50% 0 0; box-shadow:inset 0 0 40px rgba(0,0,0,.55); }
.poster-menu { background:radial-gradient(circle at 50% 34%,#d9b27b 0 10%,transparent 11%),linear-gradient(160deg,#2e090c,#0b0b0c 70%); }
.poster-menu::before { width:72%; aspect-ratio:1; left:14%; top:10%; border:2px solid rgba(239,191,131,.72); border-radius:50%; box-shadow:0 0 0 10px rgba(255,255,255,.035),0 0 0 18px rgba(239,191,131,.14); }
.poster-ex { background:linear-gradient(145deg,#a6d8df 0%,#28516a 48%,#0d1721 100%); }
.poster-ex::before { width:54%; height:74%; left:23%; top:7%; border:2px solid rgba(217,252,255,.8); border-radius:48% 48% 38% 38%; background:linear-gradient(90deg,transparent 45%,rgba(255,255,255,.45) 46% 48%,transparent 49%); box-shadow:inset 0 0 24px rgba(148,231,242,.45); }
.poster-mrrobot { background:linear-gradient(155deg,#881b20,#16090b 58%,#050506); }
.poster-mrrobot::before { width:68%; height:70%; left:15%; top:9%; border-radius:50% 48% 42% 44%; background:#121214; box-shadow:0 0 0 2px rgba(255,255,255,.05); }
.poster-arrival { background:radial-gradient(ellipse at 50% 38%,#111 0 21%,transparent 22%),linear-gradient(180deg,#d8d1bd,#7a7c78 55%,#323532); }
.preview-feature-info { padding:.25rem .15rem .2rem; display:flex; flex-direction:column; min-width:0; }
.preview-meta { color:var(--text2); font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.preview-feature-info h4 { margin:.4rem 0 .45rem; font-size:1.42rem; letter-spacing:-.045em; }
.preview-feature-info p { color:var(--text2); font-size:.76rem; line-height:1.5; font-weight:650; margin:0; }
.preview-progress { margin-top:auto; padding-top:.9rem; }
.preview-progress-label { display:flex; justify-content:space-between; gap:.5rem; color:var(--text2); font-size:.66rem; font-weight:800; margin-bottom:.38rem; }
.preview-progress-bar { height:8px; background:var(--input-bg); border-radius:999px; overflow:hidden; }
.preview-progress-bar i { display:block; width:62%; height:100%; border-radius:inherit; background:var(--accent); }
.product-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; margin-top:.7rem; }
.product-mini { display:grid; grid-template-columns:44px minmax(0,1fr); align-items:center; gap:.55rem; border:1px solid var(--border); border-radius:15px; padding:.45rem; background:rgba(255,255,255,.025); min-width:0; }
.product-mini .poster-art { width:44px; border-radius:9px; }
.product-mini-title { min-width:0; font-size:.66rem; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.product-mini-meta { color:var(--text2); font-size:.56rem; margin-top:.15rem; }
.stage-floating {
  position:absolute;
  z-index:5;
  border:1px solid var(--border2);
  background:color-mix(in srgb,#17181c 94%,transparent);
  box-shadow:0 24px 50px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
[data-theme="light"] .stage-floating { background:rgba(236,238,243,.94); }
.stage-dna { left:0; bottom:0; width:215px; border-radius:20px; padding:.85rem; transform:rotate(-4deg); }
.stage-dna-top { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.7rem; }
.stage-dna-title { font-size:.72rem; font-weight:950; letter-spacing:.08em; text-transform:uppercase; }
.stage-dna-score { color:var(--accent); font-size:.68rem; font-weight:950; }
.stage-dna-row { display:grid; grid-template-columns:66px 1fr 24px; gap:.45rem; align-items:center; margin-top:.43rem; color:var(--text2); font-size:.57rem; font-weight:800; }
.stage-dna-bar { height:6px; border-radius:999px; background:var(--input-bg); overflow:hidden; }
.stage-dna-bar i { display:block; height:100%; border-radius:inherit; background:var(--accent); }
.stage-friend { right:-2%; top:0; width:176px; border-radius:18px; padding:.72rem; transform:rotate(4deg); }
.stage-friend-top { display:flex; align-items:center; gap:.55rem; }
.stage-avatar { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--accent-dim); border:1px solid var(--accent); color:var(--accent); font-size:.67rem; font-weight:950; }
.stage-friend-name { font-size:.67rem; font-weight:900; }
.stage-friend-copy { color:var(--text2); font-size:.57rem; margin-top:.12rem; }
.stage-stars { margin-top:.55rem; color:#facc15; font-size:.72rem; letter-spacing:.06em; }
.section-heading { max-width:760px; margin-bottom:2rem; }
.section-label { color:var(--accent); font-size:.69rem; font-weight:950; letter-spacing:.15em; text-transform:uppercase; margin-bottom:.7rem; }
.section-heading h2 { margin:0; font-size:clamp(2.2rem,5vw,4.7rem); line-height:.95; letter-spacing:-.06em; }
.section-heading p { margin:1rem 0 0; max-width:670px; color:var(--text2); font-size:clamp(.95rem,1.7vw,1.08rem); line-height:1.6; font-weight:620; }
.landing-card {
  border:1px solid var(--border2);
  border-radius:26px;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 26px 70px rgba(0,0,0,.18);
}
.track-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.track-card { min-height:470px; padding:clamp(1.25rem,3vw,1.75rem); overflow:hidden; position:relative; }
.track-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; }
.track-card-head h3 { margin:0; font-size:1.52rem; letter-spacing:-.04em; }
.track-card-head p { margin:.38rem 0 0; color:var(--text2); font-size:.8rem; line-height:1.5; max-width:390px; }
.feature-icon { width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; border-radius:13px; border:1px solid var(--accent); background:var(--accent-dim); color:var(--accent); }
.feature-icon svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; }
.movie-log { display:grid; grid-template-columns:102px minmax(0,1fr); gap:1rem; align-items:start; border:1px solid var(--border); background:rgba(255,255,255,.028); border-radius:21px; padding:.8rem; }
.movie-log .poster-art { width:102px; }
.movie-log h4 { margin:.25rem 0 .3rem; font-size:1.15rem; letter-spacing:-.03em; }
.movie-log p { color:var(--text2); font-size:.73rem; line-height:1.5; }
.pill-line { display:flex; flex-wrap:wrap; gap:.42rem; margin-top:.8rem; }
.ui-pill { min-height:28px; display:inline-flex; align-items:center; gap:.3rem; padding:.35rem .62rem; border-radius:999px; border:1px solid var(--border2); background:var(--input-bg); color:var(--text2); font-size:.65rem; font-weight:850; }
.ui-pill.accent { color:var(--accent); border-color:var(--accent); background:var(--accent-dim); }
.ui-pill.stars { color:#facc15; }
.movie-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; margin-top:.75rem; }
.movie-stat { padding:.75rem; border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,.022); }
.movie-stat strong { display:block; font-size:1rem; }
.movie-stat span { display:block; margin-top:.2rem; color:var(--text2); font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.tv-stack { display:grid; gap:.6rem; }
.tv-progress-row { display:grid; grid-template-columns:54px minmax(0,1fr) auto; align-items:center; gap:.7rem; border:1px solid var(--border); background:rgba(255,255,255,.025); border-radius:17px; padding:.55rem; }
.tv-progress-row .poster-art { width:54px; border-radius:10px; }
.tv-progress-info { min-width:0; }
.tv-progress-info strong { display:block; font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tv-progress-info span { display:block; color:var(--text2); font-size:.6rem; margin-top:.2rem; }
.tv-progress-info .mini-bar { height:5px; margin-top:.48rem; background:var(--input-bg); border-radius:999px; overflow:hidden; }
.tv-progress-info .mini-bar i { display:block; height:100%; background:var(--accent); border-radius:inherit; }
.episode-pill { border:1px solid var(--accent); background:var(--accent-dim); color:var(--accent); border-radius:999px; padding:.38rem .55rem; font-size:.62rem; font-weight:950; white-space:nowrap; }
.calendar-mini { margin-top:.7rem; border:1px solid var(--border); border-radius:18px; padding:.75rem; }
.calendar-mini-top { display:flex; justify-content:space-between; align-items:center; font-size:.67rem; font-weight:900; margin-bottom:.55rem; }
.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:.28rem; }
.calendar-grid span { aspect-ratio:1; display:grid; place-items:center; border-radius:8px; color:var(--text2); font-size:.54rem; font-weight:800; }
.calendar-grid span.hit { background:var(--accent-dim); color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 65%,transparent); }
.dna-section { position:relative; padding:clamp(1.2rem,3vw,2rem); overflow:hidden; }
.dna-section::before { content:""; position:absolute; width:440px; height:440px; border-radius:50%; background:var(--accent); filter:blur(110px); opacity:.14; right:-120px; top:-180px; pointer-events:none; }
.dna-grid { position:relative; display:grid; grid-template-columns:minmax(0,.88fr) minmax(480px,1.12fr); gap:clamp(1.5rem,4vw,4rem); align-items:center; }
.dna-copy { padding:clamp(.8rem,2vw,1.5rem); }
.dna-copy h2 { margin:0; font-size:clamp(2.5rem,5.3vw,5rem); line-height:.92; letter-spacing:-.065em; }
.dna-copy h2 span { color:var(--accent); }
.dna-copy p { margin:1.1rem 0 0; color:var(--text2); font-size:1rem; line-height:1.65; font-weight:620; }
.dna-points { display:grid; gap:.65rem; margin-top:1.25rem; }
.dna-point { display:flex; gap:.65rem; align-items:flex-start; color:var(--text2); font-size:.78rem; line-height:1.45; font-weight:700; }
.dna-point i { width:20px; height:20px; flex:0 0 20px; display:grid; place-items:center; border-radius:50%; background:var(--accent-dim); color:var(--accent); font-style:normal; font-size:.66rem; font-weight:950; }
.dna-dashboard { border:1px solid var(--border2); background:rgba(10,10,12,.52); border-radius:24px; padding:1rem; box-shadow:0 28px 70px rgba(0,0,0,.26); }
[data-theme="light"] .dna-dashboard { background:rgba(255,255,255,.28); }
.dna-dashboard-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.35rem .25rem 1rem; }
.dna-dashboard-head h3 { margin:0; font-size:1rem; letter-spacing:-.03em; }
.dna-dashboard-head span { color:var(--text2); font-size:.63rem; font-weight:800; }
.dna-traits { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
.dna-trait { border:1px solid var(--border); border-radius:17px; padding:.8rem; background:rgba(255,255,255,.025); }
.dna-trait-top { display:flex; justify-content:space-between; gap:.5rem; font-size:.67rem; font-weight:900; }
.dna-trait-top b { color:var(--accent); }
.dna-trait p { margin:.4rem 0 0; color:var(--text2); font-size:.6rem; line-height:1.4; }
.dna-trait-bar { height:7px; margin-top:.65rem; border-radius:999px; background:var(--input-bg); overflow:hidden; }
.dna-trait-bar i { display:block; height:100%; border-radius:inherit; background:var(--accent); }
.dna-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.65rem; }
.dna-tags span { border:1px solid var(--border2); border-radius:999px; padding:.35rem .55rem; color:var(--text2); background:var(--input-bg); font-size:.58rem; font-weight:850; }
.dna-reason { margin-top:.65rem; display:grid; grid-template-columns:66px minmax(0,1fr) auto; gap:.75rem; align-items:center; border:1px solid var(--border); border-radius:18px; padding:.58rem; }
.dna-reason .poster-art { width:66px; border-radius:11px; }
.dna-reason strong { display:block; font-size:.78rem; }
.dna-reason p { color:var(--text2); font-size:.59rem; line-height:1.4; margin:.25rem 0 0; }
.match-ring { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; border:5px solid var(--accent); border-left-color:var(--accent-dim); color:var(--accent); font-size:.7rem; font-weight:950; }
.discovery-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr); gap:1rem; }
.recs-demo,.smart-demo { padding:clamp(1.2rem,3vw,1.75rem); }
.demo-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.demo-head h3 { margin:0; font-size:1.42rem; letter-spacing:-.04em; }
.demo-head p { margin:.35rem 0 0; color:var(--text2); font-size:.76rem; line-height:1.5; max-width:440px; }
.demo-chip { border:1px solid var(--accent); color:var(--accent); background:var(--accent-dim); border-radius:999px; padding:.38rem .58rem; font-size:.61rem; font-weight:950; white-space:nowrap; }
.prompt-box { border:1px solid var(--border2); border-radius:17px; background:var(--input-bg); padding:.85rem; color:var(--text); font-size:.76rem; line-height:1.55; font-weight:720; }
.prompt-controls { display:flex; gap:.42rem; margin:.55rem 0 .8rem; }
.prompt-controls span { flex:1; text-align:center; border:1px solid var(--border); border-radius:10px; padding:.38rem; color:var(--text2); font-size:.58rem; font-weight:850; }
.prompt-controls span.active { border-color:var(--accent); background:var(--accent); color:var(--accent-btn-text); }
.rec-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; }
.rec-tile { min-width:0; border:1px solid var(--border); border-radius:15px; padding:.45rem; background:rgba(255,255,255,.023); }
.rec-tile .poster-art { width:100%; border-radius:11px; }
.rec-tile strong { display:block; margin:.48rem .1rem 0; font-size:.67rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rec-tile span { display:block; color:var(--text2); margin:.16rem .1rem .08rem; font-size:.55rem; }
.tag-search { display:flex; align-items:center; gap:.5rem; border:1px solid var(--border2); border-radius:15px; background:var(--input-bg); padding:.65rem .75rem; color:var(--text2); font-size:.72rem; font-weight:750; }
.tag-search svg { width:16px; height:16px; stroke:var(--accent); fill:none; stroke-width:2; }
.tag-list { display:grid; gap:.55rem; margin-top:.65rem; }
.tag-card { border:1px solid var(--border); border-radius:15px; padding:.72rem; background:rgba(255,255,255,.022); }
.tag-card-top { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.tag-card strong { font-size:.73rem; }
.tag-card b { color:var(--accent); font-size:.58rem; }
.tag-card p { margin:.3rem 0 0; color:var(--text2); font-size:.61rem; line-height:1.45; }
.social-layout { display:grid; grid-template-columns:minmax(0,.92fr) minmax(500px,1.08fr); gap:clamp(1.5rem,4vw,4rem); align-items:center; }
.social-copy h2 { margin:0; font-size:clamp(2.4rem,5vw,4.8rem); line-height:.94; letter-spacing:-.06em; }
.social-copy p { margin:1rem 0 0; color:var(--text2); font-size:1rem; line-height:1.65; font-weight:620; }
.social-cards { display:grid; gap:.7rem; }
.activity-card { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:.7rem; align-items:center; border:1px solid var(--border2); border-radius:18px; background:rgba(255,255,255,.03); padding:.72rem; }
.activity-avatar { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--accent-dim); color:var(--accent); border:1px solid var(--accent); font-size:.67rem; font-weight:950; }
.activity-main { min-width:0; }
.activity-main strong { display:block; font-size:.75rem; }
.activity-main p { color:var(--text2); font-size:.62rem; margin:.22rem 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.activity-score { display:flex; align-items:center; gap:.35rem; }
.heart-pill,.rating-pill { min-height:29px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-size:.63rem; font-weight:950; }
.heart-pill { width:29px; border:1px solid var(--accent); color:var(--accent); background:var(--accent-dim); }
.rating-pill { padding:.35rem .55rem; border:1px solid var(--border2); color:#facc15; background:var(--input-bg); }
.compare-card { display:grid; grid-template-columns:1fr auto 1fr; gap:.8rem; align-items:center; border:1px solid var(--border2); border-radius:20px; padding:.9rem; background:linear-gradient(135deg,var(--accent-dim),rgba(255,255,255,.025)); }
.compare-user { display:flex; align-items:center; gap:.55rem; min-width:0; }
.compare-user:last-child { justify-content:flex-end; text-align:right; }
.compare-user .activity-avatar { width:38px; height:38px; flex:0 0 38px; }
.compare-user strong { font-size:.7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.compare-match { text-align:center; }
.compare-match strong { display:block; color:var(--accent); font-size:1.4rem; letter-spacing:-.04em; }
.compare-match span { display:block; color:var(--text2); font-size:.53rem; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.mini-features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.mini-feature { padding:1.25rem; min-height:215px; display:flex; flex-direction:column; }
.mini-feature h3 { margin:1rem 0 .45rem; font-size:1.15rem; letter-spacing:-.035em; }
.mini-feature p { margin:0; color:var(--text2); font-size:.74rem; line-height:1.55; }
.mini-feature .feature-icon { width:38px; height:38px; flex-basis:38px; }
.mini-preview { margin-top:auto; padding-top:1rem; }
.list-preview { display:flex; align-items:flex-end; gap:.38rem; }
.list-preview .poster-art { width:43px; border-radius:8px; }
.list-preview .poster-art + .poster-art { margin-left:-10px; }
.profile-preview { display:flex; align-items:center; gap:.55rem; }
.profile-preview .activity-avatar { width:36px; height:36px; flex:0 0 36px; }
.profile-preview-text strong { display:block; font-size:.68rem; }
.profile-preview-text span { display:block; color:var(--text2); font-size:.55rem; margin-top:.18rem; }
.final-cta {
  position:relative;
  overflow:hidden;
  text-align:center;
  padding:clamp(2rem,6vw,5rem) 1rem;
  border:1px solid var(--border2);
  border-radius:32px;
  background:linear-gradient(145deg,var(--accent-dim),rgba(255,255,255,.025));
  box-shadow:0 28px 80px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.08);
}
.final-cta::before { content:""; position:absolute; width:420px; height:420px; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; background:var(--accent); filter:blur(120px); opacity:.13; }
.final-cta > * { position:relative; }
.final-cta h2 { margin:0 auto; max-width:760px; font-size:clamp(2.5rem,5.6vw,5.2rem); line-height:.92; letter-spacing:-.065em; }
.final-cta p { max-width:610px; margin:1rem auto 1.5rem; color:var(--text2); font-size:.95rem; line-height:1.6; font-weight:650; }
.final-cta-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:.65rem; }
.landing-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; color:var(--text2); font-size:.67rem; font-weight:700; padding:1.4rem .2rem 0; }
.landing-footer-links { display:flex; gap:.8rem; }
.landing-footer button { border:0; background:none; color:var(--text2); font:inherit; cursor:pointer; }
.landing-footer button:hover { color:var(--text); }
.auth-overlay {
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.auth-overlay.open { opacity:1; pointer-events:auto; }
.auth-dialog {
  width:min(430px,100%);
  max-height:min(760px,calc(100dvh - 2rem));
  overflow:auto;
  border:1px solid var(--border2);
  border-radius:25px;
  padding:1.35rem;
  background:#17181c;
  color:var(--text);
  box-shadow:0 35px 100px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(14px) scale(.985);
  transition:transform .2s ease;
  position:relative;
}
[data-theme="light"] .auth-dialog { background:#eef0f4; }
.auth-overlay.open .auth-dialog { transform:none; }
.auth-close { position:absolute; top:.85rem; right:.85rem; width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--border2); border-radius:50%; background:var(--input-bg); color:var(--text2); cursor:pointer; font-size:.9rem; }
.auth-view { padding:.3rem; }
.auth-title { font-size:1.65rem; font-weight:950; letter-spacing:-.04em; margin-bottom:.3rem; }
.auth-sub { font-size:.83rem; color:var(--text2); margin-bottom:1.4rem; line-height:1.45; }
.auth-field { margin-bottom:.85rem; }
.auth-field label { display:block; margin-bottom:.38rem; color:var(--text2); font-size:.67rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.auth-field input { width:100%; min-height:46px; border:1px solid var(--border2); border-radius:13px; background:var(--input-bg); color:var(--text); padding:.72rem .85rem; font:700 .9rem/1.2 inherit; outline:none; }
.auth-field input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.keep-logged-row { display:flex; align-items:center; gap:.55rem; margin:.15rem 0 .85rem; cursor:pointer; }
.keep-logged-row input { width:17px; height:17px; accent-color:var(--accent); }
.keep-label { color:var(--text2); font-size:.76rem; font-weight:700; }
.auth-submit { width:100%; min-height:46px; border:1px solid var(--accent); border-radius:13px; background:var(--accent); color:var(--accent-btn-text); font:900 .88rem/1 inherit; cursor:pointer; }
.auth-submit:disabled { opacity:.45; cursor:not-allowed; }
.auth-error { min-height:1.1em; margin-top:.65rem; color:#f87171; text-align:center; font-size:.73rem; font-weight:750; }
.auth-switch { text-align:center; margin-top:.9rem; color:var(--text2); font-size:.75rem; }
.auth-switch button,.reset-link-btn { border:0; background:none; color:var(--accent); font:850 .75rem/1 inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.reset-link-wrap { text-align:center; margin-top:.65rem; }
.auth-divider { display:flex; align-items:center; gap:.7rem; color:var(--text2); font-size:.65rem; font-weight:800; margin:1rem 0 .75rem; }
.auth-divider::before,.auth-divider::after { content:""; height:1px; flex:1; background:var(--border); }
.guest-auth-btn { width:100%; min-height:43px; border:1px solid var(--border2); border-radius:13px; background:var(--input-bg); color:var(--text); font:850 .8rem/1 inherit; cursor:pointer; }
.auth-success { color:#34d399 !important; }
@media (max-width:980px) {
  .landing-nav-links { display:none; }
  .landing-hero { grid-template-columns:1fr; min-height:auto; padding-top:3.5rem; }
  .landing-hero-copy { max-width:720px; }
  .landing-stage { min-height:570px; width:min(680px,100%); margin:0 auto; }
  .dna-grid,.social-layout { grid-template-columns:1fr; }
  .dna-dashboard { width:min(720px,100%); }
  .social-cards { width:min(720px,100%); }
  .discovery-grid { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  /* The native iOS app uses a translucent status bar. Give the landing header
     a full-height content lane below that safe area so its buttons never hang
     over the page background. */
  .landing-nav {
    height:calc(env(safe-area-inset-top, 0px) + 58px);
    min-height:calc(env(safe-area-inset-top, 0px) + 58px);
    padding:env(safe-area-inset-top, 0px) .85rem 0;
  }
  .landing-brand-name { display:none; }
  .landing-nav-actions .landing-guest-nav { display:inline-flex; }
  .landing-main { width:min(100% - 1rem,1240px); padding-top:calc(env(safe-area-inset-top, 0px) + 76px); }
  .landing-hero { gap:2rem; padding-top:2.2rem; }
  .landing-hero h1 { font-size:clamp(2.85rem,13.2vw,4.65rem); line-height:1.06; letter-spacing:0; word-spacing:.07em; }
  .landing-stage { min-height:520px; }
  .product-window { inset:2% 0 5% 2%; transform:none; border-radius:24px; }
  .stage-friend { right:0; top:-9px; }
  .stage-dna { left:50%; bottom:-4px; transform:translateX(-50%) rotate(-4deg); }
  .preview-feature-card { grid-template-columns:88px 1fr; gap:.75rem; }
  .preview-feature-info h4 { font-size:1.05rem; }
  .product-strip { gap:.35rem; }
  .product-mini { grid-template-columns:34px minmax(0,1fr); gap:.35rem; padding:.35rem; }
  .product-mini .poster-art { width:34px; }
  .track-grid,.mini-features { grid-template-columns:1fr; }
  .track-card { min-height:auto; }
  .dna-grid { gap:1rem; }
  .dna-copy { padding:.5rem; }
  .dna-dashboard { padding:.75rem; }
  .dna-reason { grid-template-columns:54px minmax(0,1fr) auto; }
  .dna-reason .poster-art { width:54px; }
  .rec-row { gap:.4rem; }
  .social-layout { gap:1.4rem; }
  .landing-footer { align-items:flex-start; flex-direction:column; }
}
@media (max-width:520px) {
  .landing-btn { min-height:38px; padding:.6rem .75rem; font-size:.76rem; }
  .landing-nav-actions { gap:.28rem; }
  .landing-nav-actions .landing-btn { min-height:36px; padding:.52rem .62rem; border-radius:11px; font-size:.68rem; white-space:nowrap; }
  .landing-main { width:calc(100% - .75rem); }
  .landing-section { margin-bottom:4.5rem; }
  .landing-hero-actions .landing-btn { flex:1; min-width:145px; }
  .landing-proof { gap:.35rem; }
  .landing-proof span { font-size:.64rem; padding:.35rem .56rem; }
  .landing-stage { min-height:500px; }
  .product-window { right:0; left:0; }
  .product-body { padding:.7rem; }
  .preview-feature-card { grid-template-columns:78px 1fr; padding:.6rem; border-radius:18px; }
  .preview-feature-info p { font-size:.66rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .product-mini-title { font-size:.58rem; }
  .stage-friend { width:150px; padding:.58rem; }
  .stage-dna { width:180px; padding:.68rem; }
  .track-card,.recs-demo,.smart-demo { border-radius:22px; padding:1rem; }
  .movie-log { grid-template-columns:82px 1fr; gap:.75rem; }
  .movie-log .poster-art { width:82px; }
  .movie-stats { gap:.35rem; }
  .movie-stat { padding:.58rem; }
  .dna-section { border-radius:24px; padding:.8rem; }
  .dna-traits { grid-template-columns:1fr 1fr; gap:.38rem; }
  .dna-trait { padding:.58rem; border-radius:13px; }
  .dna-reason { grid-template-columns:48px minmax(0,1fr) auto; gap:.55rem; }
  .dna-reason .poster-art { width:48px; }
  .match-ring { width:43px; height:43px; border-width:4px; font-size:.62rem; }
  .activity-card { grid-template-columns:37px minmax(0,1fr) auto; padding:.58rem; gap:.55rem; }
  .activity-avatar { width:37px; height:37px; }
  .activity-main p { max-width:165px; }
  .compare-card { gap:.45rem; padding:.7rem; }
  .compare-user span { display:none; }
  .final-cta { border-radius:25px; }
  .auth-dialog { border-radius:22px; padding:1.1rem; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
}

@media (max-width:390px) {
  .landing-nav { padding-left:.55rem; padding-right:.55rem; gap:.45rem; }
  .landing-brand-mark { width:31px; height:31px; border-radius:10px; }
  .landing-nav-actions { gap:.2rem; }
  .landing-nav-actions .landing-btn { min-height:34px; padding:.48rem .52rem; font-size:.63rem; }
}