/* ─── HALO SHARED STYLES ──────────────────────────── */

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

:root {
  --bg:      #fdfaf6;
  --linen:   #f4efe6;
  --sand:    #ede5d8;
  --border:  #e2d8ca;
  --light:   #cbbaa6;
  --mid:     #a89278;
  --dark:    #3a3230;
  --ink:     #1a1618;
  --rose:    #c9897a;
  --rose-l:  #e8c4bb;
  --rose-ll: #f7ede8;
  /* App-mockup card surfaces (white cards on cream in light mode) */
  --card:        #ffffff;
  --card-border: rgba(226,216,202,.55);
  --ok-bg:       #e8f0e0;
  --ok-fg:       #5a7a4a;
  /* Text sitting on the rose-tinted "Plus" pricing column — a bit darker
     than --rose so it reads clearly on the pale rose-ll fill. */
  --plus-text:   #8a6a5c;
  /* Halo Plus pricing card — a faint rose wash + rose-tinted border, distinct
     from both the neutral Free card and the fully-filled Pay Once callout. */
  --plus-card-bg:     rgba(201,137,122,.06);
  --plus-card-border: rgba(201,137,122,.4);
}

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  background: var(--bg);
  color: var(--dark);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

/* ─── CURSOR (glow blob + visible pointer) ─── */
#glow {
  position: fixed;
  width: 180px; height: 180px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(201,137,122,.16) 0%, rgba(201,137,122,.06) 40%, transparent 70%);
  transition: width .55s ease, height .55s ease, opacity .4s ease;
  mix-blend-mode: multiply;
  will-change: left, top;
}
#glow.on-link { width: 280px; height: 280px; }

/* ─── AMBIENT DAPPLED LIGHT ───────────────────── */
.ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.blob-1 { width:700px;height:500px;background:rgba(201,137,122,.12);top:-100px;left:-200px;animation:drift1 22s ease-in-out infinite; }
.blob-2 { width:500px;height:600px;background:rgba(232,196,187,.09);top:20%;right:-180px;animation:drift2 28s ease-in-out infinite; }
.blob-3 { width:800px;height:400px;background:rgba(237,229,216,.16);bottom:0;left:10%;animation:drift3 20s ease-in-out infinite; }
.blob-4 { width:400px;height:400px;background:rgba(196,164,110,.07);top:55%;left:40%;animation:drift4 25s ease-in-out infinite; }
.blob-5 { width:350px;height:550px;background:rgba(201,137,122,.06);bottom:20%;right:5%;animation:drift5 32s ease-in-out infinite; }

@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(60px,50px) scale(1.08)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-50px,70px) scale(.92)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(40px,-40px) scale(1.06)} }
@keyframes drift4 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-70px,-30px) scale(1.1)} }
@keyframes drift5 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(30px,60px) scale(.95)} }

/* ─── NAV ─────────────────────────────────────── */
/* Logo + both link groups form a single centred cluster (flex, not a
   1fr/auto/1fr grid) — a fixed gap sits between each group and the logo,
   and any leftover space splits evenly on the outer edges. The earlier
   grid approach anchored links to the inner column edges, which pushed
   ALL leftover space to the page's outer edges instead — that's what
   made the bar look either edge-to-edge stretched or squeezed into the
   middle depending on the gap value; it could never look "centred with
   normal breathing room" like the Mirabelle reference. */
nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  display: flex; align-items: center; justify-content: center;
  gap: 48px;
  padding: 22px 60px;
  background: rgba(253,250,246,.96);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  transition: padding .3s;
}
nav.scrolled { padding: 14px 60px; }
.nav-logo {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  text-decoration: none;
}
/* Wordmark is the nav's home link, no icon next to it (dropped per
   Jehane's call: icon + script word competed with each other).
   Echoes the hero's italic serif "Halo" treatment at nav scale. */
.nav-logo-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 400;
  font-size: 22px; line-height: 1.2; letter-spacing: .3px;
  color: var(--rose);
}
/* Paw+halo mark, still used by the footer (and favicon). Plain <img>,
   not a CSS mask, masks were an unreliable extra rendering step. */
.site-logo {
  display: block;
  width: 40px; height: 40px;
  object-fit: contain;
}
.nav-links {
  display:flex; gap:28px; list-style:none; align-items:center;
}
.nav-link {
  font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--mid); text-decoration: none; transition: color .2s;
  position: relative; padding-bottom: 3px;
}
.nav-link:hover { color: var(--dark); }
/* Active page — colour shift + thin underline, no box/pill */
.nav-link.active { color: var(--rose); }
.nav-link.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px; background: var(--rose);
}
.nav-cta {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: #fff; background: var(--rose); text-decoration: none;
  padding: 8px 16px; border-radius: 20px; font-weight: 600;
  transition: background .2s;
}
.nav-cta:hover { background: var(--dark); }
.nav-mobile-link.nav-cta {
  display: inline-block; margin-top: 8px;
  color: #fff !important;
}

/* Mobile hamburger — hidden on desktop, swapped in for the two link
   groups below 640px. Absolutely positioned against nav (itself
   position:fixed, a valid containing block) so it sits pinned to the
   left edge independent of the logo, which stays centred via the nav's
   own flex justify-content:center once it's the only visible child.
   Panel drops down from the nav bar itself for the same reason. */
.nav-hamburger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 32px; height: 32px;
  background: none; border: none; cursor: pointer; padding: 0;
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
}
.nav-hamburger span {
  display: block; width: 100%; height: 1.5px;
  background: var(--dark); transition: transform .25s ease, opacity .2s ease;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-mobile-panel { display: none; }

@media(max-width:640px){
  .nav-links-left, .nav-links-right { display: none; }
  .nav-hamburger { display: flex; }
  /* Slimmer bar on phones so the hero copy + phone fit in one screen,
     but not so slim it reads as an afterthought — Jehane's call. */
  nav { padding: 13px 16px; }
  nav.scrolled { padding: 10px 16px; }
  .nav-logo-text { font-size: 20px; }
  .nav-mobile-panel {
    display: block;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(253,250,246,.98);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
    max-height: 0; overflow: hidden;
    transition: max-height .3s ease;
  }
  .nav-mobile-panel.open { max-height: 320px; }
  .nav-mobile-link {
    display: block;
    padding: 16px 24px;
    font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--mid); text-decoration: none;
    border-top: 1px solid var(--border);
  }
  .nav-mobile-link.active { color: var(--rose); }
}

/* ─── FOOTER ──────────────────────────────────── */
footer {
  background: var(--linen);
  border-top: 1px solid var(--border);
  padding: 44px 60px;
  display: flex; justify-content: space-between; align-items: center;
  position: relative; z-index: 1;
}
.foot-logo { font-family:'Cormorant Garamond',serif; font-size:16px; letter-spacing:2px; color:var(--light); }
/* Footer logo mark — same rose-tinted mask as the nav, sized to match the
   footer's previous 28px-tall image logo. */
.foot-logo-mark { width: 28px; height: 28px; flex-shrink: 0; }
.foot-links { display:flex; gap:28px; }
.foot-links a { font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--light); text-decoration:none; transition:color .2s; }
.foot-links a:hover { color:var(--rose); }
.foot-r { font-size:10px; color:var(--light); line-height:1.9; text-align:right; }
.foot-r a { color:var(--light); text-decoration:none; transition:color .2s; }
.foot-r a:hover { color:var(--rose); }

/* ─── LEGAL PAGES — MOBILE ────────────────────── */
/* Responsive tables: stacked card style on mobile */
@media(max-width:640px) {
  /* Hide column headers — labels come from data-label on each td */
  .legal-table thead,
  .cookie-table thead { display: none; }

  /* Each row becomes a card */
  .legal-table tbody tr,
  .cookie-table tbody tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg);
  }

  /* Each cell stacks as a labelled block */
  .legal-table td,
  .cookie-table td {
    display: block;
    padding: 11px 14px;
    font-size: 13px;
    line-height: 1.65;
    border-bottom: 1px solid var(--border);
    color: var(--mid);
  }
  .legal-table td:last-child,
  .cookie-table td:last-child { border-bottom: none; }

  /* Column label above each value */
  .legal-table td::before,
  .cookie-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--dark);
    font-weight: 500;
    margin-bottom: 3px;
  }

  /* Legal page body */
  .legal-body h2 { margin: 32px 0 10px; font-size: 20px; }
  .legal-body p, .legal-body li { font-size: 13px; line-height: 1.8; }
  .legal-body ul { margin: 0 0 14px 16px; }
  .ico-block { font-size: 12px; padding: 14px 16px; line-height: 1.75; }
  .disclaimer-box { padding: 16px 18px; }
  .disclaimer-box p { font-size: 13px; line-height: 1.75; }
}

/* ─── FOOTER DISCLAIMER ──────────────────────── */
.foot-disclaimer {
  background: var(--sand);
  border-top: 1px solid var(--border);
  padding: 14px 60px;
  font-size: 10px; color: var(--light);
  line-height: 1.7; text-align: center;
  position: relative; z-index: 1;
}
@media(max-width:600px) { .foot-disclaimer { padding: 12px 24px; } }


/* ─── SHARED TYPOGRAPHY ───────────────────────── */
.label { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--rose); display:block; margin-bottom:14px; }
.label.lt { color:rgba(232,196,187,.55); }
.sec-title { font-family:'Cormorant Garamond',serif; font-size:clamp(34px,4vw,56px); font-weight:300; line-height:1.1; letter-spacing:.3px; }
.sec-title em { font-style:italic; color:var(--rose); }
.pull-q { font-family:'Cormorant Garamond',serif; font-size:clamp(18px,2vw,24px); font-style:italic; font-weight:300; color:var(--rose); padding:20px 0 20px 20px; border-left:2px solid var(--rose-l); line-height:1.5; margin:26px 0; }

/* ─── HALO RING (concentric ovals, one unit) ─── */
.halo-anim {
  display: inline-block;
  position: relative;
  animation: haloFloat 3.8s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(201,137,122,.35));
}
.halo-outer {
  border: 1.5px solid var(--rose);
  border-radius: 50%;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
.halo-inner {
  border: 1px solid rgba(201,137,122,.32);
  border-radius: 50%;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
@keyframes haloFloat { 0%,100%{transform:translateY(0) scaleX(1)} 50%{transform:translateY(-10px) scaleX(1.05)} }
@keyframes haloFloatMobile { 0%,100%{transform:translateY(0) scaleX(1)} 50%{transform:translateY(-3px) scaleX(1.02)} }

/* ─── FORM ────────────────────────────────────── */
.form-row { display:flex; }
.form-row input {
  flex:1; padding:14px 18px;
  border:1px solid var(--border); border-right:none;
  background:rgba(255,255,255,.7); backdrop-filter:blur(8px);
  font-family:'Inter',sans-serif; font-size:12px; color:var(--dark);
  outline:none; border-radius:2px 0 0 2px; transition:border-color .2s;
}
.form-row input:focus { border-color:var(--rose-l); }
.form-row input::placeholder { color:var(--light); }
.form-row button {
  padding:14px 22px; background:var(--rose); color:var(--bg);
  border:1px solid var(--rose); font-family:'Inter',sans-serif;
  font-size:9px; letter-spacing:2.5px; text-transform:uppercase;
  border-radius:0 2px 2px 0; transition:background .25s, border-color .25s; white-space:nowrap;
}
.form-row button:hover { background:var(--dark); border-color:var(--dark); }
.form-note { font-size:10px; color:var(--light); margin-top:10px; }
.form-success { font-size:12px; color:var(--rose); min-height:18px; margin-top:8px; }

/* ─── MARQUEE — soft linen curtain ───────────── */
.marquee-wrap {
  overflow: hidden;
  background: linear-gradient(to right, var(--linen), rgba(244,239,230,.6), var(--linen));
  padding: 16px 0;
  position: relative; z-index: 1;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* soft veil sweeping over */
.marquee-wrap::before, .marquee-wrap::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2;
  pointer-events: none;
}
.marquee-wrap::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.marquee-wrap::after  { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.marquee-track { display:flex; width:max-content; animation:marquee 35s linear infinite; }
.marquee-track span { font-size:9px; letter-spacing:2.5px; text-transform:uppercase; color:var(--mid); padding:0 32px; white-space:nowrap; }
.marquee-track span.dot { color:var(--rose-l); padding:0 10px; letter-spacing:0; font-size:8px; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ─── REVEAL ──────────────────────────────────── */
.rv  { opacity:0; transform:translateY(26px); transition:opacity .85s ease,transform .85s ease; }
.rvl { opacity:0; transform:translateX(-32px); transition:opacity .9s ease,transform .9s ease; }
.rvr { opacity:0; transform:translateX(32px);  transition:opacity .9s ease,transform .9s ease; }
.rv.on, .rvl.on, .rvr.on { opacity:1; transform:translate(0); }

/* ─── LINK ARROW ──────────────────────────────── */
.link-arrow { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--rose); text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:gap .2s; }
.link-arrow:hover { gap:14px; }
.link-arrow::after { content:'→'; }

/* ─── STORY CTA BUTTON (matches nav Join Waitlist) ─── */
.story-cta-btn {
  display: inline-block;
  padding: 11px 22px;
  background: var(--rose);
  color: var(--bg);
  font-family: 'Inter', sans-serif;
  font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background .2s;
  margin-top: 10px;
}
.story-cta-btn:hover { background: var(--dark); color: var(--bg); }

/* ─── PAGE HERO ───────────────────────────────── */
.page-hero { padding:160px 60px 80px; text-align:center; position:relative; z-index:1; }
.page-hero .sec-title { font-size:clamp(42px,5.5vw,74px); margin-bottom:16px; }
.page-hero p { font-size:14px; color:var(--mid); max-width:520px; margin:0 auto; line-height:1.95; }

/* ─── RESPONSIVE ──────────────────────────────── */
@media(max-width:960px){
  #glow { display:none; }
  nav { padding:16px 20px; gap:24px; }
  nav.scrolled { padding:12px 20px; }
  .nav-links { gap:14px; }
  .nav-link { font-size: 9px !important; letter-spacing: 1.8px !important; }
  .nav-logo-text { font-size: 19px; }
  footer { flex-direction:column; gap:18px; padding:32px 24px; text-align:center; }
  .foot-links { justify-content:center; flex-wrap:wrap; gap:16px; }
  .foot-r { text-align:center; }
  .page-hero { padding:110px 24px 60px; }
}

/* Keep the slightly-bigger slim bar on the smallest phones too (this
   block loads after the 640px one, so it must not re-shrink it back). */
@media(max-width:480px){
  nav { padding:13px 16px; }
  nav.scrolled { padding:10px 16px; }
  .nav-hamburger { left: 16px; }
}

/* Mobile halo: reduce float amplitude so rings stay aligned with HALO text */
@media(max-width:640px){ .halo-anim { animation-name: haloFloatMobile; } }

/* ─── DARK MODE ───────────────────────────────── */
@media (prefers-color-scheme: dark) {
  /* Dark-mode logo variant (Jehane's own retouch, 2026-07-14): the light
     asset's swirl highlight relies on a light backdrop and breaks apart
     on dark, so dark mode swaps in a solid-swirl version of the mark.
     content:url() swap works on <img> in all current browsers. */
  .welcome-mark, .foot-logo-mark { content: url("images/logo-dark-2.png"); }
  :root {
    --bg:      #1c1916;
    --linen:   #231f1b;
    --sand:    #2c2822;
    --border:  #3c342c;
    --light:   #8a7868;
    --mid:     #a8927a;
    --dark:    #e0d5c8;
    --ink:     #f5f0e8;
    --rose:    #c9897a;
    --rose-l:  #c07e6e;
    --rose-ll: #2e1e16;
    /* App-mockup card surfaces render the app's DARK palette in dark mode */
    --card:        #2c2822;
    --card-border: #3c342c;
    --ok-bg:       rgba(124,154,106,.16);
    --ok-fg:       #8fae7d;
    /* Light warm tone so it reads on the near-black --rose-ll fill in dark mode */
    --plus-text:   #e0c9be;
    /* Needs more saturation than the light-mode wash to read against the
       near-black page background — otherwise it disappears next to --bg. */
    --plus-card-bg:     rgba(201,137,122,.10);
    --plus-card-border: rgba(201,137,122,.45);
  }

  /* Nav */
  nav {
    background: rgba(28, 25, 22, .96);
  }
  nav.scrolled {
    background: rgba(28, 25, 22, .94);
  }
  .nav-mobile-panel {
    background: rgba(28, 25, 22, .98);
  }

  /* iPhone mockup — the phone now inherits the dark root variables so the
     website's dark mode shows the app's real dark mode. Card backgrounds and
     borders come from --card / --card-border above; the physical bezel stays
     dark in both modes. No variable lock, no brightness dim. */

  /* Cursor glow — screen blend works on dark backgrounds */
  #glow {
    background: radial-gradient(circle, rgba(201,137,122,.28) 0%, rgba(201,137,122,.10) 40%, transparent 70%);
    mix-blend-mode: screen;
  }

  /* Ambient blobs — warmer, slightly stronger on dark */
  .blob-1 { background: rgba(201,137,122,.20); }
  .blob-2 { background: rgba(200,155,130,.14); }
  .blob-3 { background: rgba(80,60,40,.28); }
  .blob-4 { background: rgba(140,100,60,.12); }
  .blob-5 { background: rgba(201,137,122,.12); }

  /* Form input */
  .form-row input {
    background: rgba(255,255,255,.05);
    border-color: var(--border);
    color: var(--dark);
  }
  .form-row input:focus { border-color: var(--rose); }

  /* Marquee — kill the hardcoded cream gradient, use flat dark surface */
  .marquee-wrap {
    background: var(--linen);
  }
  .marquee-wrap::before { background: linear-gradient(to right, var(--bg), transparent); }
  .marquee-wrap::after  { background: linear-gradient(to left,  var(--bg), transparent); }

  /* Problem chaos pills — warm brown */
  .chaos-item {
    background: rgba(72,48,32,.82);
    color: var(--dark);
    border-color: rgba(200,140,90,.15);
  }

  /* Mobile single cycling chip — warm brown to blend with the section */
  #problem-pill-cycle .cycle-chip {
    background: rgba(72,48,32,.82);
    border-color: rgba(200,140,90,.15);
    color: var(--dark);
  }

}

/* Testimonials — same one-at-a-time carousel as desktop, just tightened */
@media(max-width:640px){
  #testimonials { padding: 52px 20px 56px; }
  .test-carousel { gap: 12px; }
  .test-arrow-btn { width: 32px; height: 32px; font-size: 13px; }
  .test-q { font-size: 16px; line-height: 1.6; margin-bottom: 14px; }
  .test-q::before, .test-q::after { font-size: 26px; line-height: 1; }
}