/* ============================================================
   LO — hellolo.app marketing site
   Design tokens from design_handoff_lo_homepage. Two typefaces:
   Cormorant Garamond (display) + DM Sans (UI). Single warm light
   look — a deliberate brand commitment, no dark mode.
   ============================================================ */

:root {
  --sage:        #3A5A40;   /* primary: headlines, frames, buttons, body */
  --coastal:     #AEBCC7;   /* nav + statement bg, bunting, blue frames */
  --cream:       #F0E8D8;   /* hero + privacy bg */
  --cream-light: #FAF6EE;   /* text on dark, button text */
  --numeral:     #95ABBE;   /* the big 2,752 only */
  --blush:       #EDA898;   /* eyebrows, sign-off, policy link */

  --sage-65: rgba(58,90,64,0.65);
  --sage-50: rgba(58,90,64,0.5);
  --sage-15: rgba(58,90,64,0.15);
  --sage-12: rgba(58,90,64,0.12);
  --cream-80: rgba(250,246,238,0.8);
  --cream-15: rgba(250,246,238,0.15);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --tex-cream: repeating-linear-gradient(0deg, transparent 0 31px, rgba(140,110,70,0.045) 31px 32px);
  --tex-blue:  repeating-linear-gradient(0deg, transparent 0 31px, rgba(58,90,64,0.03) 31px 32px);
  --tex-sage:  repeating-linear-gradient(0deg, transparent 0 31px, rgba(0,0,0,0.04) 31px 32px);
  --bunting:   repeating-linear-gradient(90deg, var(--coastal) 0 20px, #fff 20px 40px);

  --pad: clamp(24px, 5vw, 72px);
  --nav-h: 58px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--sage);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
h1, h2 { font-weight: 400; margin: 0; }

.wrap { max-width: 1280px; margin-inline: auto; padding-inline: var(--pad); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 100;
  background: var(--sage); color: var(--cream-light);
  padding: 10px 16px; border-radius: 8px; font: 600 14px var(--sans);
  transition: top .18s ease;
}
.skip-link:focus { top: 8px; }

:focus-visible { outline: 3px solid var(--blush); outline-offset: 3px; border-radius: 3px; }

/* ── Shared ornaments ── */
.bunting { height: 6px; background: var(--bunting); }

.floret { fill: var(--sage); }
.floret--corner {
  position: absolute; right: clamp(24px, 4vw, 48px); bottom: 28px;
  width: 43px; height: 40px; opacity: 0.6;
}

.eyebrow {
  font: 600 clamp(15px, 2vw, 20px)/1 var(--sans);
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--blush);
  margin: 0 0 clamp(28px, 4vw, 48px);
}
.eyebrow--founder {
  font-family: var(--serif);
  font-size: clamp(28px, 5vw, 50px);
  letter-spacing: 0.22em;
}

.rule { border: 0; border-top: 1px solid var(--sage-12); margin: 0 0 clamp(36px, 5vw, 64px); }
.rule--light { border-top-color: var(--cream-15); margin: clamp(32px, 5vw, 64px) 0; }

/* ── Framed photos ── */
.frame {
  margin: 0; overflow: hidden; outline: 6px solid var(--sage);
  background: var(--cream-light);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--blue {
  outline: 10px solid var(--coastal); border-radius: 2px;
  box-shadow: 0 12px 48px rgba(28,22,16,0.18);
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--coastal);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h); padding-inline: var(--pad);
}
.nav__logo {
  font: 700 28px/1 var(--serif); letter-spacing: 0.2em; color: var(--cream-light);
}
.nav__links { display: flex; gap: clamp(24px, 4vw, 44px); }
.nav__links a {
  font: 500 clamp(14px, 1.6vw, 16px)/1 var(--sans);
  letter-spacing: 0.04em; color: var(--cream-80);
  transition: color .15s ease;
}
.nav__links a:hover { color: var(--cream-light); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; background: var(--cream) var(--tex-cream); }
.hero__grid { padding: clamp(24px, 4vw, 40px) var(--pad) clamp(56px, 7vw, 96px); }

.hero__count {
  font: 600 clamp(96px, 20vw, 240px)/0.82 var(--serif);
  letter-spacing: -0.055em; color: var(--numeral);
  margin: 0; pointer-events: none;
}
.hero__count-sub {
  font: 400 clamp(27px, 5vw, 46px)/1.1 var(--serif);
  letter-spacing: -0.02em; color: var(--sage);
  margin: 8px 0 0; max-width: 24ch;
}

/* Photo collage — self-contained aspect box, overlapping frames.
   Per-frame position lives in CSS vars so it's easy to nudge. */
.collage { position: relative; }
.collage .frame { position: absolute; }
.collage--hero {
  width: 100%; margin-top: clamp(28px, 4vw, 40px);
  aspect-ratio: 5 / 5.2;
}
.collage--hero .frame { outline-width: 5px; box-shadow: 0 12px 48px rgba(28,22,16,0.14); }
.collage--hero__a { top: 0; right: 6%;  width: 46%; aspect-ratio: 162/181; z-index: 1; }
.collage--hero__b { top: 20%; left: 10%; width: 46%; aspect-ratio: 162/167; z-index: 2; }
.collage--hero__c { top: 42%; right: 9%; width: 44%; aspect-ratio: 154/158; z-index: 3; }
.collage--hero__d { display: none; }
.collage--hero__floret {
  position: absolute; left: 4%; bottom: 6%; width: 40px; height: 37px; opacity: 0.7; z-index: 4;
}

.hero__finally {
  font: 400 clamp(30px, 5vw, 48px)/1.12 var(--serif);
  letter-spacing: -0.02em; color: var(--sage); margin: clamp(32px,5vw,44px) 0 0;
}
.hero__signup { margin-top: clamp(24px, 4vw, 32px); }
.hero__meet {
  font: 700 clamp(42px, 9vw, 80px)/1 var(--serif);
  letter-spacing: -0.02em; color: var(--sage); margin: 0 0 14px;
}

/* ── Waitlist form ── */
.waitlist { display: flex; flex-direction: column; gap: 12px; max-width: 360px; }
.waitlist__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.waitlist__email {
  height: 48px; width: 100%; padding: 0 4px;
  border: 0; border-bottom: 1.5px solid var(--sage);
  background: transparent; font: 500 15px var(--sans); color: var(--sage);
  border-radius: 0; /* iOS */
}
.waitlist__email::placeholder { color: var(--sage-50); font-weight: 600; }
.waitlist__email:focus { outline: 0; border-bottom-width: 2.5px; }
.waitlist__btn {
  height: 50px; width: 100%; border: 0; border-radius: 100px; cursor: pointer;
  background: var(--sage); color: var(--cream-light);
  font: 700 11px var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
  transition: transform .12s ease, opacity .15s ease, background-color .15s ease;
}
.waitlist__btn:hover { background: #33513a; }
.waitlist__btn:active { transform: translateY(1px); }
.waitlist__btn[disabled] { opacity: 0.55; cursor: progress; }
.waitlist__msg {
  min-height: 1.2em; margin: 2px 0 0; font: 500 13.5px/1.5 var(--sans);
  color: var(--sage-65);
}
.waitlist__msg[data-state="error"]   { color: #A23B2C; }
.waitlist__msg[data-state="success"] { color: var(--sage); font-weight: 600; }
.waitlist.is-done .waitlist__email,
.waitlist.is-done .waitlist__btn { display: none; }

/* ============================================================
   SECTION 2 — STATEMENT (coastal)
   ============================================================ */
.statement { position: relative; background: var(--coastal) var(--tex-blue); }
.statement__wrap { padding-block: clamp(64px, 9vw, 108px); }
.statement__head {
  font: 600 clamp(56px, 13vw, 140px)/0.9 var(--serif);
  letter-spacing: -0.04em; color: var(--sage);
}
.statement__head span { display: block; }
.statement__head span:nth-child(1) { text-align: left; }
.statement__head span:nth-child(2) { text-align: left; padding-left: 0.15em; }
.statement__head span:nth-child(3) { text-align: left; }
.statement__body {
  margin-top: clamp(32px, 5vw, 52px); padding-top: clamp(24px, 4vw, 36px);
  border-top: 1px solid rgba(58,90,64,0.2); max-width: 560px;
}
.statement__body p {
  font: 400 clamp(18px, 2.4vw, 22px)/1.7 var(--sans); color: var(--sage-65); margin: 0;
}

/* ============================================================
   SECTION 3 — FOUNDER (sage)
   ============================================================ */
.founder { background: var(--sage) var(--tex-sage); color: var(--cream-light); }
.founder .wrap { padding-block: clamp(64px, 9vw, 100px); }
.founder__grid { display: grid; gap: clamp(40px, 6vw, 80px); }
.founder__name {
  font: 400 clamp(36px, 5vw, 54px)/1 var(--serif);
  letter-spacing: -0.02em; color: var(--cream-light); margin: 0 0 20px;
}
.founder__text p:not(.founder__name):not(.founder__welcome):not(.founder__sig) {
  font: 400 clamp(18px, 2.2vw, 20px)/1.75 var(--serif);
  color: var(--cream-80); margin: 0 0 20px; max-width: 42ch;
}
.founder__signoff { margin-top: clamp(20px, 3vw, 36px); padding-top: 32px; border-top: 1px solid var(--cream-15); }
.founder__welcome {
  font: italic 400 clamp(40px, 5vw, 52px)/1 var(--serif);
  letter-spacing: -0.02em; color: var(--cream-light); margin: 0;
}
.founder__sig {
  font: 600 13px var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blush); margin: 12px 0 0;
}
.collage--founder { width: 100%; max-width: 460px; margin-inline: auto; aspect-ratio: 5/7.2; }
.collage--founder__a { top: 0;   right: 8%; width: 58%; aspect-ratio: 310/400; transform: rotate(-2.5deg); z-index: 1; }
.collage--founder__b { top: 33%; left: 0;  width: 50%; aspect-ratio: 268/348; transform: rotate(2deg);   z-index: 2; }
.collage--founder__c { top: 62%; right: 2%; width: 48%; aspect-ratio: 252/340; transform: rotate(-1deg);  z-index: 3; }

/* ============================================================
   SECTION 4 — PRIVACY (cream)
   ============================================================ */
.privacy { position: relative; background: var(--cream) var(--tex-cream); }
.privacy .wrap { padding-block: clamp(64px, 9vw, 100px); }
.privacy__head {
  font: 400 clamp(60px, 10vw, 96px)/0.88 var(--serif);
  letter-spacing: -0.04em; color: var(--sage); margin: 0 0 clamp(40px,6vw,72px); max-width: 12ch;
}
.privacy__grid { display: grid; gap: clamp(40px, 6vw, 120px); }
.privacy__copy p {
  font: 400 clamp(18px, 2.4vw, 22px)/1.75 var(--serif); color: var(--sage); margin: 0 0 24px;
}
.link-arrow {
  display: inline-block; margin-top: 12px;
  font: 600 clamp(16px,2vw,20px) var(--sans); letter-spacing: 0.08em; color: var(--blush);
  border-bottom: 1.5px solid rgba(58,90,64,0.3); padding-bottom: 3px;
  transition: opacity .15s ease;
}
.link-arrow:hover { opacity: 0.75; }
.pillars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pillars li { border-top: 1px solid var(--sage-15); padding: 28px 0; }
.pillars li:last-child { border-bottom: 1px solid var(--sage-15); }
.pillars__label {
  font: italic 400 clamp(28px, 4vw, 38px)/1 var(--serif);
  letter-spacing: -0.02em; color: var(--sage); margin: 0 0 8px;
}
.pillars__sub { font: 400 clamp(16px,2vw,20px)/1.6 var(--sans); color: var(--sage-50); margin: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { background: var(--sage) var(--tex-sage); color: var(--cream-light); }
.foot__inner {
  display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between;
  align-items: flex-end; padding-block: clamp(40px, 6vw, 64px) 20px;
}
.foot__logo { font: 700 32px/1 var(--serif); letter-spacing: 0.2em; margin: 0 0 8px; }
.foot__tag { font: italic 400 22px var(--serif); color: var(--cream-80); margin: 0; }
.foot__links { display: flex; flex-wrap: wrap; gap: 20px 28px; }
.foot__links a {
  font: 500 15px var(--sans); letter-spacing: 0.03em; color: var(--cream-80);
  transition: color .15s ease;
}
.foot__links a:hover { color: var(--cream-light); }
.foot__legal {
  font: 400 13px var(--sans); color: rgba(250,246,238,0.45);
  /* margin-inline:auto (not 0) so it centers with .wrap like .foot__inner —
     otherwise it hugs the padding edge and sits left of the logo >1280px. */
  padding-bottom: clamp(28px, 4vw, 40px); margin: 0 auto;
}

/* ============================================================
   DESKTOP — two-column hero + founder + privacy
   ============================================================ */
@media (min-width: 1000px) {
  .hero__grid {
    display: grid; grid-template-columns: 1.35fr 1fr;
    column-gap: clamp(40px, 5vw, 88px); align-items: center;
    max-width: 1440px; margin-inline: auto;
    min-height: min(84vh, 840px); padding-block: 40px 0;
  }
  .hero__lede { position: relative; min-height: 600px; }
  /* Numeral + subheadline straddle the collage — they must paint ON TOP
     (design intent), so give them a higher stacking order than photos. */
  .hero__count { position: relative; z-index: 3; font-size: clamp(160px, 15vw, 240px); }
  .hero__count-sub { position: relative; z-index: 3; max-width: 12ch; }

  .collage--hero { position: absolute; inset: 0; margin-top: 0; aspect-ratio: auto; z-index: 1; }
  .collage--hero .frame { outline-width: 6px; }
  /* echo the handoff canvas: dominant centre portrait, left bleed, upper-right pair */
  .collage--hero__a { top: 6%;  left: 37%;  right: auto; width: 38%; aspect-ratio: 380/590; }
  .collage--hero__b { top: 60%; left: 0;    right: auto; width: 19%; aspect-ratio: 200/290; }
  .collage--hero__c { top: 2%;  left: 77%;  right: auto; width: 22%; aspect-ratio: 210/300; }
  .collage--hero__d { display: none; }
  .collage--hero__floret { left: 30%; bottom: 12%; width: 48px; height: 44px; z-index: 2; }

  .hero__pitch { justify-self: end; max-width: 360px; }
  .hero__finally { margin-top: 0; }

  .founder__grid { grid-template-columns: 1fr 540px; align-items: start; }
  .collage--founder { margin: 0; }

  .privacy__grid { grid-template-columns: 1fr 420px; align-items: start; }
}

@media (min-width: 1000px) and (max-width: 1200px) {
  /* keep the far-right photo from overflowing on mid widths */
  .collage--hero__d { display: none; }
  .collage--hero__c { left: 72%; width: 26%; }
}

/* ============================================================
   DOC PAGES (privacy) — long-form editorial reading
   ============================================================ */
.doc { background: var(--cream) var(--tex-cream); }
.doc__main { max-width: 720px; margin-inline: auto; padding: clamp(48px,7vw,80px) var(--pad) clamp(64px,8vw,96px); }
.doc__title { font: italic 400 clamp(38px,6vw,52px)/1.05 var(--serif); color: var(--sage); margin: 0 0 8px; }
.doc__meta { font: 400 14px var(--sans); color: var(--sage-65); margin: 0 0 clamp(36px,5vw,48px); }
.doc__meta a { color: var(--sage); border-bottom: 1px solid var(--sage-15); }
.doc h2 {
  font: 600 clamp(24px,3vw,30px)/1.15 var(--serif); color: var(--sage);
  margin: clamp(40px,5vw,56px) 0 12px;
}
.doc h3 { font: 600 17px var(--sans); color: var(--sage); margin: 26px 0 6px; letter-spacing: 0.01em; }
.doc p, .doc li { font: 400 clamp(16px,1.9vw,17.5px)/1.7 var(--sans); color: #33302B; }
.doc p { margin: 0 0 14px; }
.doc ul { padding-left: 22px; margin: 0 0 14px; }
.doc li { margin-bottom: 8px; }
/* Underline only links inside the policy body — NOT the nav/footer links. */
.doc__main a { color: var(--sage); border-bottom: 1px solid var(--sage-15); }
.doc__main a:hover { border-bottom-color: var(--sage); }
.doc .promise {
  background: var(--cream-light); border: 1px solid var(--sage-12);
  border-radius: 14px; padding: 22px 26px; margin: 28px 0;
}
.doc .promise p:last-child { margin: 0; }
.doc__tablewrap { overflow-x: auto; margin: 16px 0; }
.doc table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 14.5px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid #E4DCCC; }
.doc th { font-weight: 600; color: var(--sage); font-family: var(--sans); }
.doc td { font-family: var(--sans); color: #33302B; }
.doc__fine { font-size: 13.5px; color: var(--sage-65); margin-top: 40px; }

/* ============================================================
   MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.001ms !important; }
}