/* Heartly landing page — tokens from DESIGN.md v2 */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --bg-deep: #0C0907;
  --bg: #17120E;
  --bg-raised: #221B15;
  --line: rgba(255, 236, 214, 0.10);
  --line-strong: rgba(255, 236, 214, 0.20);
  --text: #F5EEE4;
  --text-2: #BDB1A1;
  --text-3: #857A6C;
  --gold: #CDA565;
  --ember: #E2A24F;
  --ember-deep: #B8551F;
  --violet: #A98BFF;
  --violet-deep: #4E2F8A;
  --cream: #EFE6D9;
  --cream-hover: #F7F0E5;
  --cream-active: #E6DCCE;
  --cream-ink: #1A140F;

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px;
  --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-32: 128px;

  --gutter: 20px;
  --content: 1120px;
  --prose: 640px;

  --r-card: 12px;
  --r-pill: 999px;
  --r-phone: 44px;
  --r-phone-in: 34px;
  --shadow-phone: 0 50px 100px -30px rgba(0, 0, 0, 0.8);
  --glow-violet: 0 0 80px rgba(169, 139, 255, 0.18);
  --glow-ember: 0 0 80px rgba(226, 162, 79, 0.22);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (min-width: 640px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}
/* grain over everything, like the app's screens */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: rgba(205,165,101,0.18); }
p { text-wrap: pretty; }
h1[id], h2[id], h3[id] { scroll-margin-top: var(--s-8); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: var(--s-4); top: -60px; z-index: 100; padding: var(--s-3) var(--s-4); background: var(--cream); color: var(--cream-ink); border-radius: var(--r-pill); text-decoration: none; font-weight: 500; }
.skip:focus { top: var(--s-4); }

.wrap { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }

/* type */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px/1 var(--ui);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 var(--s-4);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 12px var(--violet); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; color: var(--text); text-wrap: balance; }
h1 { font-size: 48px; line-height: 1.0; letter-spacing: -0.015em; max-width: 16ch; }
h2 { font-size: 36px; line-height: 1.05; max-width: 16ch; }
h3 { font-size: 26px; line-height: 1.2; font-weight: 500; }
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--text); }
.lede { font-size: 18px; line-height: 1.5; color: var(--text-2); max-width: 60ch; margin: 0; text-wrap: pretty; }
.small { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.legal { font-size: 14px; line-height: 1.5; color: var(--text-3); }
@media (min-width: 900px) {
  .eyebrow { font-size: 13px; }
  h1 { font-size: 76px; }
  h2 { font-size: 56px; }
  h3 { font-size: 30px; }
  .lede { font-size: 21px; }
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 56px; padding: 0 32px; width: 100%;
  border-radius: var(--r-pill); border: 1px solid transparent;
  font: 500 17px/1 var(--ui); text-decoration: none;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), transform 150ms var(--ease), box-shadow 150ms var(--ease);
}
@media (min-width: 640px) { .btn { width: auto; } }
.btn-primary { background: var(--cream); color: var(--cream-ink); box-shadow: 0 10px 40px -10px rgba(226,162,79,0.45); }
.btn-primary:hover { background: var(--cream-hover); transform: translateY(-1px); }
.btn-primary:active { background: var(--cream-active); transform: scale(0.97); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--violet); }
.btn-secondary:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }

/* top: wordmark only */
.top { position: absolute; inset: 0 0 auto 0; z-index: 3; padding-top: var(--s-6); text-align: center; }
.wordmark { font: 500 22px/1 var(--display); letter-spacing: 0.08em; color: var(--text-2); text-decoration: none; padding: var(--s-3); transition: color 150ms var(--ease); }
.wordmark:hover { color: var(--text); }

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--bg-deep);
  padding-top: 120px;
  min-height: 100svh;
}
.hero-inner { display: grid; justify-items: center; text-align: center; gap: var(--s-8); position: relative; z-index: 1; }
.hero-copy { display: grid; justify-items: center; gap: var(--s-6); }
.hero-copy .lede { max-width: 36ch; }
.hero-cta { display: grid; justify-items: center; gap: var(--s-3); width: 100%; max-width: 360px; }
.hero-cta .small { margin: 0; }

/* the light */
.light {
  position: absolute; left: 50%; z-index: 0; pointer-events: none;
  width: 160vw; max-width: 1600px; aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 50%,
    var(--ember) 0%,
    var(--ember-deep) 20%,
    rgba(78,47,138,0.9) 42%,
    rgba(78,47,138,0.35) 58%,
    rgba(12,9,7,0) 70%);
  filter: blur(28px);
  opacity: 0.95;
}
.hero .light { bottom: -55vw; }
@media (min-width: 640px) { .hero .light { width: 1200px; bottom: -480px; } }
@media (min-width: 900px) { .hero .light { width: 1500px; bottom: -600px; } }
/* horizon line glow */
.hero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: 0;
  background: linear-gradient(to top, rgba(226,162,79,0.12), transparent);
  pointer-events: none;
}
/* dissolve into the next section */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 2;
  background: linear-gradient(to bottom, rgba(23,18,14,0), var(--bg));
  pointer-events: none;
}

/* phones */
.phone {
  padding: 10px; border: 1px solid var(--line); border-radius: var(--r-phone);
  background: var(--bg-deep); box-shadow: var(--shadow-phone);
}
.phone img { border-radius: var(--r-phone-in); outline: 1px solid rgba(255,236,214,0.06); outline-offset: -1px; }

.fan {
  position: relative; z-index: 1;
  width: 100%; display: flex; justify-content: center; align-items: flex-end;
  margin-top: var(--s-6);
  height: 360px;
}
.fan .phone { position: absolute; bottom: -160px; }
.fan .p-centre { width: 250px; z-index: 3; box-shadow: var(--shadow-phone), var(--glow-ember); }
.fan .p-left, .fan .p-right { width: 200px; z-index: 2; opacity: 0.75; display: none; }
.fan .p-left  { transform: translateX(-210px) rotate(-9deg); bottom: -200px; }
.fan .p-right { transform: translateX(210px) rotate(9deg); bottom: -200px; }
@media (min-width: 640px) {
  .fan { height: 440px; }
  .fan .p-centre { width: 300px; }
  .fan .p-left, .fan .p-right { display: block; width: 240px; }
  .fan .p-left  { transform: translateX(-270px) rotate(-9deg); }
  .fan .p-right { transform: translateX(270px) rotate(9deg); }
}
@media (min-width: 900px) {
  .hero { padding-top: 120px; }
  .hero-inner { gap: var(--s-12); }
  .hero-copy { gap: var(--s-8); }
  .fan { height: 420px; margin-top: 0; }
  .fan .p-left  { transform: translateX(-300px) rotate(-9deg); }
  .fan .p-right { transform: translateX(300px) rotate(9deg); }
}

/* motion */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy, .fan .phone { animation: rise 600ms var(--ease) both; }
  .fan .p-centre { animation-delay: 80ms; }
  .fan .p-left, .fan .p-right { animation-delay: 160ms; }
  .fan .p-left  { animation-name: rise-l; }
  .fan .p-right { animation-name: rise-r; }
  .hero .light { animation: breathe 14s ease-in-out infinite; }
  @keyframes rise   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes rise-l { from { opacity: 0; transform: translateX(-270px) rotate(-9deg) translateY(16px); } to { opacity: .75; transform: translateX(-270px) rotate(-9deg); } }
  @keyframes rise-r { from { opacity: 0; transform: translateX(270px) rotate(9deg) translateY(16px); } to { opacity: .75; transform: translateX(270px) rotate(9deg); } }
  @keyframes breathe { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.06); } }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  @keyframes rise-l { from { opacity: 0; transform: translateX(-300px) rotate(-9deg) translateY(16px); } to { opacity: .75; transform: translateX(-300px) rotate(-9deg); } }
  @keyframes rise-r { from { opacity: 0; transform: translateX(300px) rotate(9deg) translateY(16px); } to { opacity: .75; transform: translateX(300px) rotate(9deg); } }
}

/* ---------- sections ---------- */
.section { padding-block: var(--s-24); position: relative; overflow: hidden; }
@media (min-width: 900px) { .section { padding-block: var(--s-32); } }
.section-head { display: grid; justify-items: center; text-align: center; margin-bottom: var(--s-16); }
.section-head.left { justify-items: start; text-align: left; }
.section-head .eyebrow { margin-bottom: var(--s-4); }
@media (min-width: 900px) { .section-head { margin-bottom: var(--s-24); } }

/* small lights for later sections: ember only, no violet (the hero owns the violet) */
.glow {
  position: absolute; left: 50%; top: 50%; z-index: 0; pointer-events: none;
  transform: translate(-50%, -50%);
  border-radius: 50%; filter: blur(30px);
  background: radial-gradient(circle, rgba(226,162,79,0.55) 0%, rgba(184,85,31,0.35) 35%, rgba(23,18,14,0) 70%);
}
.glow-sm { width: 420px; height: 420px; opacity: .55; }
.glow-md { width: 560px; height: 560px; opacity: .7; }
.glow-lg { width: 760px; height: 760px; opacity: .9; }

/* reveal on scroll */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
  html.js .reveal.in { opacity: 1; transform: none; }
}

/* How it works */
.how { padding-top: 64px; }
@media (min-width: 640px) { .how { padding-top: 96px; } }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-24); }
.step { display: grid; gap: var(--s-8); align-items: center; }
.step-copy { max-width: 440px; }
.step-copy p { margin: 0; color: var(--text-2); }
.step-copy h3 { margin: var(--s-4) 0 var(--s-3); }
.step-n { display: flex; }
.step-n span {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line-strong); font: 500 14px/1 var(--ui); color: var(--gold);
}
.step-visual { position: relative; display: grid; justify-items: center; isolation: isolate; }
.step-visual .phone { position: relative; z-index: 1; width: 250px; }
.step-visual .glow { z-index: 0; }
@media (min-width: 900px) {
  .steps { gap: var(--s-32); }
  .step { grid-template-columns: 1fr 1fr; gap: var(--s-16); }
  .step:nth-child(even) .step-copy { order: 2; justify-self: start; }
  .step:nth-child(even) .step-visual { order: 1; }
  .step:nth-child(odd) .step-copy { justify-self: end; }
  .step-visual .phone { width: 300px; }
}

/* What people bring */
.bring-grid { display: grid; gap: var(--s-12); align-items: center; }
.bring-copy .lede { margin: var(--s-4) 0 var(--s-8); }
.doors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.doors li {
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--s-6) var(--s-4); font: 500 22px/1.2 var(--display); color: var(--text);
}
.bring-visual { display: grid; justify-items: center; }
.bring-visual .phone { width: 250px; }
@media (min-width: 900px) {
  .bring-grid { grid-template-columns: 1.2fr 1fr; gap: var(--s-24); }
  .doors { gap: var(--s-4); }
  .doors li { font-size: 26px; padding: var(--s-6); }
  .bring-visual .phone { width: 300px; }
}
.single { display: grid; justify-items: center; margin-top: var(--s-24); }
.single figure { margin: 0; display: grid; justify-items: center; gap: var(--s-6); text-align: center; }
.single .phone { width: 250px; }
.single figcaption { max-width: 36ch; margin: 0; }
@media (min-width: 900px) { .single { margin-top: var(--s-32); } .single .phone { width: 300px; } }

/* Honest */
.honest { border-top: 1px solid var(--line); }
.honest-grid { display: grid; gap: var(--s-4); }
.card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-8) var(--s-6); }
.card h3 { margin: 0 0 var(--s-4); }
.card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); color: var(--text-2); }
.card li { padding-left: var(--s-6); position: relative; }
.card li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 10px; height: 1px; background: var(--gold); }
.privacy { max-width: var(--prose); margin-top: var(--s-12); color: var(--text-2); }
.privacy p { margin: 0 0 var(--s-3); }
.safety { max-width: var(--prose); margin: var(--s-8) 0 0; padding-top: var(--s-6); border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--text-2); }
.safety a { color: var(--text); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.safety a:hover { text-decoration-color: var(--gold); }
@media (min-width: 900px) { .honest-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); } .card { padding: var(--s-8); } }

/* Close */
.close { isolation: isolate; overflow: hidden; text-align: center; }
.close-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--s-8); }
.glow-close { width: 700px; height: 700px; opacity: .8; top: 85%; }
.close h2 { max-width: 14ch; }

/* Footer */
.footer { background: var(--bg-deep); border-top: 1px solid var(--line); padding-block: var(--s-12); }
.footer-inner { display: grid; gap: var(--s-6); }
.footer nav { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); }
.footer nav a { color: var(--text-2); text-decoration: none; padding-block: var(--s-2); }
.footer nav a:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.footer .legal { margin: 0; }
@media (min-width: 900px) { .footer-inner { grid-template-columns: 1fr auto; align-items: center; } }

/* ---------- legal pages ---------- */
.legal-page { background: var(--bg); }
.legal-page .top { position: static; padding-top: var(--s-6); }
.legal-main { max-width: var(--prose); padding-block: var(--s-12) var(--s-24); }
.legal-main h1 { font-size: 40px; line-height: 1.05; margin-bottom: var(--s-3); }
.legal-main h1 + p { font-size: 19px; color: var(--text-2); margin: 0 0 var(--s-8); }
.legal-main h2 { font: 500 26px/1.2 var(--display); margin: var(--s-12) 0 var(--s-3); max-width: none; }
.legal-main p, .legal-main li { color: var(--text-2); margin: 0 0 var(--s-4); }
.legal-main strong { color: var(--text); font-weight: 500; }
.legal-main ul { padding-left: 1.2em; margin: 0 0 var(--s-4); }
.legal-main li { margin-bottom: var(--s-2); }
.legal-main a { color: var(--text); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.legal-main a:hover { text-decoration-color: var(--gold); }
.legal-main .muted { margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid var(--line); font-size: 14px; color: var(--text-3); }
@media (min-width: 900px) { .legal-main { padding-block: var(--s-16) var(--s-32); } .legal-main h1 { font-size: 56px; } }