/* ============================================================
   hellodilly.com homepage hero + home rhythm (scoped)
   Loaded only on index.html. Does not restyle /pricing.

   Stolen patterns (Mobbin — cite, do not copy art):
   Hero hierarchy / cream stage
   - Craft: centered stack, one headline, pill CTAs, product peeking from the fold
     https://mobbin.com/sites/sections/58c31ff2-407c-4d33-933f-3b0a08528728
     https://mobbin.com/sites/sections/f34cc0b7-ec0f-44e7-b188-b2df2f260b92
   - Headspace: centered H1, one CTA, product moment (not a dashboard dump), cream
     https://mobbin.com/sites/sections/7778c75a-7f4e-4f1d-91ca-13c70d1b041f
   - Linear: type scale, restraint, CTA not competing with the product
     https://mobbin.com/sites/sections/db0da4a6-735a-4fe8-8722-8fbd154d4496
   - Superhuman: icon → value line → single CTA, whitespace
     https://mobbin.com/sites/sections/78a16fee-cb98-4a46-8e8a-37f0ad915ff8
   - Figma: one headline, one subhead, one button, then large product window
     https://mobbin.com/sites/sections/9062465d-7247-4ae0-848a-9330cd39353c
   - Notion / ChatGPT: centered type, primary + text secondary, huge whitespace
     https://mobbin.com/sites/sections/f7ed85df-523e-4081-9262-b89c14793bde
     https://mobbin.com/sites/sections/29cc701c-0e80-4486-ae13-1224107820fa
   - Grammarly: result visual, not a dashboard dump
     https://mobbin.com/sites/sections/96d669a6-5755-4142-aadc-da1a28340c81
   - Zipline: punchy headline, App Store under the lede, phone in action
     https://mobbin.com/sites/sections/72430cf1-eea0-4855-956d-de0aac1e8454
   - Duolingo: one action, nothing competing with GET STARTED
     https://mobbin.com/sites/sections/ac10aadd-d55a-4144-ab7d-8777e3bb4e5e
   - Partiful: primary Get Started + secondary Try the App
     https://mobbin.com/sites/sections/6afbe47f-97c0-4d8b-b168-7798f2c35bc3
   - Slack: primary solid / secondary quieter
     https://mobbin.com/sites/sections/5aba136e-bba7-40a2-98e1-c827ecff9d7e
   - Calm: restraint, lifestyle not clutter
     https://mobbin.com/sites/sections/7c6850a8-7a9e-43d8-951a-0232d9cad5b8
   How it works
   - ClassPass: numbered circles, first filled, rest outline, “Here’s how it works”
     https://mobbin.com/sites/sections/193363c3-3373-49a5-a1d0-00ff01f07b4d
   Product beats
   - incident.io: screenshot + floating labels
     https://mobbin.com/sites/sections/c11ccc48-4f3a-41ae-a89b-62155ee8b946
   Close
   - Square: dark split, phone + download + App Store only
     https://mobbin.com/sites/sections/fad611b5-d51b-4419-9a48-4efa9cc451c1
   - DICE: GET THE APP + QR for desktop
     https://mobbin.com/sites/sections/f3231b90-c895-47aa-855f-597c52ecfa09
   - Craft: serif close line after the story
     https://mobbin.com/sites/sections/d2575917-32dd-426a-b9af-db4465948f3c
   ============================================================ */

body.hf-home {
  --hf-paper: #f7f5f0;
  --hf-paper-2: #efece5;
  --hf-well: #ffffff;
  --hc-bg: #f7f5f0;
  --hc-bg-2: #efece5;
  background: var(--hf-paper);
}

/* Pill CTAs — Headspace / Craft, not Duolingo 3D chunks */
body.hf-home .hf-hero .hc-cta,
body.hf-home .hf-how .hc-cta,
body.hf-home .hf-pay .hc-cta,
body.hf-home .hf-close .hc-cta,
body.hf-home .hf-sticky {
  border-radius: 999px;
  border-bottom: none;
  box-shadow: none;
  padding: 0.95rem 1.65rem;
}

body.hf-home .hf-hero .hc-cta:hover,
body.hf-home .hf-how .hc-cta:hover,
body.hf-home .hf-pay .hc-cta:hover,
body.hf-home .hf-close .hc-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 10px 24px rgba(22, 119, 255, 0.22);
}

body.hf-home .hf-hero .hc-cta:active,
body.hf-home .hf-how .hc-cta:active,
body.hf-home .hf-pay .hc-cta:active,
body.hf-home .hf-close .hc-cta:active {
  transform: none;
  border-bottom-width: 0;
}

/* ── Hero: Craft / Headspace / Linear centered stack ── */
body.hf-home .hf-hero {
  min-height: 0;
  height: auto;
  display: block;
  padding: calc(var(--hc-nav) + 40px) 24px 0;
  overflow: visible;
  background:
    radial-gradient(ellipse 70% 42% at 50% 0%, rgba(22, 119, 255, 0.11), transparent 62%),
    linear-gradient(180deg, #fbfaf7 0%, var(--hf-paper) 72%);
}

body.hf-home .hf-hero .hc-sky,
body.hf-home .hf-hero::after {
  display: none;
}

body.hf-home .hf-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0;
  text-align: center;
  overflow: visible;
}

body.hf-home .hf-copy {
  justify-items: center;
  text-align: center;
  max-width: 42rem;
  margin: 0 auto;
}

body.hf-home .hf-kicker {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-bottom: 16px;
  text-transform: none;
  letter-spacing: -0.02em;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--hc-muted);
}

body.hf-home .hf-face-btn {
  width: 56px;
  height: 56px;
}

body.hf-home .hf-face-orb {
  width: 56px;
  height: 56px;
  box-shadow: 0 12px 28px rgba(22, 119, 255, 0.18);
}

body.hf-home .hf-hero h1 {
  max-width: 13ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 18px;
  font-size: clamp(2.7rem, 7.2vw, 5.1rem);
  line-height: 0.96;
  letter-spacing: -0.052em;
}

body.hf-home .hf-lede {
  max-width: 36ch;
  margin: 0 auto 22px;
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
  color: var(--hc-muted);
}

body.hf-home .hf-cta-row {
  justify-content: center;
  margin-bottom: 14px;
}

body.hf-home .hf-ghost {
  text-decoration: none;
  padding: 0.9rem 0.35rem;
  color: var(--hc-ink);
  font-weight: 750;
}

body.hf-home .hf-ghost:hover {
  color: var(--hc-navy);
  text-decoration: underline;
  text-underline-offset: 5px;
}

body.hf-home .hf-note {
  margin-bottom: 0;
}

/* Product peek — phone sits flush on the hero sky (no white well/stage). */
body.hf-home .hf-stage {
  display: block;
  position: relative;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 10px 0 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

body.hf-home .hf-hero .hf-stage.hc-enter {
  opacity: 1;
  transform: none;
  animation: none;
}

/* Kill Craft product-well fill + glow behind the device */
body.hf-home .hf-stage::before {
  content: none;
  display: none;
}

/* Full device visible — no peek crop / overflow clip */
body.hf-home .hf-hero .hf-shot {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: min(460px, 92vw);
  height: auto;
  max-height: none;
  margin: 0 auto;
  padding-bottom: 1.25rem;
  overflow: visible;
}

body.hf-home .hf-hero .hf-phone,
body.hf-home .hf-hero .hf-phone--tilt {
  display: block;
  transform: none;
  width: min(300px, 68vw);
  height: auto;
  margin: 0;
  z-index: 1;
  filter: none;
  flex: 0 0 auto;
}

body.hf-home .hf-hero .hf-phone img {
  width: 100%;
  height: auto;
  max-width: none;
  display: block;
}

body.hf-home .hf-hero .hf-callout--a {
  top: 16%;
  left: -22%;
}

body.hf-home .hf-hero .hf-callout--b {
  bottom: auto;
  top: 54%;
  right: -20%;
}

/* Quiet loop under the product — not a dark billboard repeating the H1 */
body.hf-home .hf-share {
  background: transparent;
  color: inherit;
  padding: 1.1rem 24px 0.5rem;
}

body.hf-home .hf-share blockquote {
  display: none;
}

body.hf-home .hf-loop {
  color: var(--hc-muted);
  font-size: 0.95rem;
  font-weight: 750;
}

body.hf-home .hf-loop b {
  color: var(--hc-navy);
}

/* More air in the numbered loop */
body.hf-home .hf-how {
  padding: clamp(4.5rem, 10vh, 7.5rem) 24px 4rem;
}

body.hf-home .hf-beat {
  padding: clamp(5rem, 11vh, 8rem) 24px;
}

body.hf-home .hf-phone--tilt,
body.hf-home .hf-shot .hf-phone--tilt,
body.hf-home .hf-beat--flip .hf-shot .hf-phone--tilt {
  transform: none;
}

body.hf-home .hf-alt {
  background: var(--hf-paper-2);
}

/* Premium tease — one sentence, not a shop */
body.hf-home .hf-pay {
  padding: clamp(5rem, 11vh, 8rem) 24px;
  background: var(--hf-well);
}

body.hf-home .hf-pay h2 {
  max-width: 18ch;
}

body.hf-home .hf-pay-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  margin-top: 1.75rem;
}

body.hf-home .hf-pay-cta .hf-ghost {
  padding: 0.9rem 0.2rem;
}

@media (max-width: 820px) {
  body.hf-home .hf-hero {
    padding-top: calc(var(--hc-nav) + 36px);
  }

  body.hf-home .hf-hero h1 {
    max-width: 12ch;
  }

  body.hf-home .hf-stage {
    width: 100%;
    height: auto;
    min-height: 0;
    margin-top: 8px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.hf-home .hf-hero .hf-shot {
    width: min(100%, 92vw);
    height: auto;
    max-height: none;
    overflow: visible;
  }

  body.hf-home .hf-hero .hf-phone,
  body.hf-home .hf-hero .hf-phone--tilt {
    width: min(250px, 68vw);
  }

  body.hf-home .hf-how-cta {
    display: none;
  }

  body.hf-home .hf-cta-row {
    flex-direction: column;
    align-items: stretch;
    width: min(320px, 100%);
  }

  body.hf-home .hf-cta-row .hc-cta {
    width: 100%;
  }

  body.hf-home .hf-sticky {
    border-radius: 999px;
    border-bottom: none;
  }
}

@media (max-width: 560px) {
  body.hf-home .hf-hero h1 {
    max-width: 11ch;
    font-size: clamp(2.35rem, 11vw, 3.1rem);
  }
}