/* Daisy — daisyhealth.app
   Palette and type from the branding boards in /daisy branding.

   Note on the serif: the boards specify Playfair Display for headings and it is
   used here. The app itself deliberately uses SF Rounded instead, because a
   high-contrast serif read as sharp on a tool people open three times a day.
   A landing page is read once, in a browser, at a size where the serif is doing
   editorial work rather than interface work. If that ever feels wrong, it is
   one variable: --font-display. */

:root {
  --forest: #1e3d33;
  --forest-deep: #14291f;
  --teal: #0e6f5f;
  --sage: #a4c3a2;
  --mint: #ddebd8;
  --yellow: #ffc857;
  --cream: #fbf6ec;
  --cream-deep: #f5eddd;
  --card: #fffdf8;
  --stone: #e5e1d9;
  --ink: #1b1a17;
  --ink-2: #5d5749;
  --ink-3: #8b8474;
  --amber: #a85512;
  --danger: #bc4038;
  --line: rgba(30, 61, 51, 0.12);

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --wrap: 1120px;
  --radius: 18px;
  --radius-sm: 12px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

/* `height: auto` is not optional here. Every img carries width/height
   attributes so the browser can reserve space and avoid layout shift, and
   without this the attribute height wins: images keep their full intrinsic
   height while the width shrinks, and every screenshot renders stretched. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--forest); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.5rem, 6vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

p { margin: 0 0 1.1em; }
.lede { font-size: clamp(1.06rem, 1.7vw, 1.28rem); color: var(--ink-2); max-width: 34em; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.section--tint { background: var(--cream-deep); }
.section--forest { background: var(--forest); color: #f4f1e8; }
.section--forest h2 { color: #fff; }
.section--forest p { color: rgba(244, 241, 232, 0.82); }

.eyebrow {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--teal); margin: 0 0 0.9rem;
}
.section--forest .eyebrow { color: var(--sage); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  padding: 0.95rem 1.6rem; border-radius: 999px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--forest); color: #fff; }
.btn--primary:hover { background: var(--forest-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--forest); border-color: var(--line); }
.btn--ghost:hover { background: rgba(30, 61, 51, 0.05); color: var(--forest); }
.btn--light { background: var(--yellow); color: #4a3200; }
.btn--light:hover { background: #ffd47c; color: #4a3200; }

/* App Store badge.
   Apple's marketing guidelines require their official "Download on the App
   Store" artwork at final size and clear space. Swap this for the real badge
   before submitting anything to a press kit:
   https://developer.apple.com/app-store/marketing/guidelines/ */
.appstore {
  display: inline-flex; align-items: center; gap: 0.7rem;
  background: #000; color: #fff; text-decoration: none;
  padding: 0.6rem 1.25rem 0.65rem; border-radius: 12px;
  line-height: 1.1; transition: opacity 0.15s ease;
}
.appstore:hover { opacity: 0.85; color: #fff; }
.appstore svg { flex: none; }
.appstore span { display: block; }
.appstore .appstore__sm { font-size: 0.68rem; letter-spacing: 0.01em; opacity: 0.85; }
.appstore .appstore__lg { font-size: 1.16rem; font-weight: 600; letter-spacing: -0.01em; }
.section--forest .appstore { background: #fff; color: #000; }
.section--forest .appstore:hover { color: #000; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 246, 236, 0.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; gap: 1.5rem; padding: 0.85rem 0; }
.brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--forest); text-decoration: none; }
.brand:hover { color: var(--forest); }
.nav__links { display: flex; gap: 1.6rem; margin-left: auto; align-items: center; }
.nav__links a { color: var(--ink-2); text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.nav__links a:hover { color: var(--forest); }
.nav .btn { padding: 0.6rem 1.15rem; font-size: 0.92rem; }

/* Hero */
.hero { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }
.hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
/* A full phone screenshot is 1:2.2. At any generous width it makes the hero
   row taller than the viewport and pushes the headline under the fold, which
   is the one thing a hero must never do. Kept deliberately small here; the
   feature sections below are where the screens get room. */
.hero .phone { max-width: 248px; }
.hero h1 { margin-bottom: 0.35em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.9rem 0 1rem; }
.hero__note { font-size: 0.9rem; color: var(--ink-3); margin: 0; }

/* Phone frame */
.phone {
  position: relative; width: 100%; max-width: 300px; margin-inline: auto;
  border-radius: 42px; padding: 9px;
  background: linear-gradient(160deg, #2c2c2a, #4a4a46 40%, #1f1f1d);
  box-shadow: 0 28px 60px -22px rgba(30, 41, 34, 0.5);
}
.phone img { border-radius: 34px; width: 100%; }
.phone--tilt { transform: rotate(-2deg); }
.phone-pair { display: flex; gap: clamp(1rem, 3vw, 2rem); justify-content: center; align-items: flex-start; }
.phone-pair .phone { max-width: 250px; }
.phone-pair .phone:nth-child(2) { margin-top: 2.5rem; }

/* Trust strip */
.strip { background: var(--forest); color: #f4f1e8; padding: 1.15rem 0; }
.strip__inner { display: flex; flex-wrap: wrap; gap: 0.6rem 2.4rem; justify-content: center; font-size: 0.93rem; }
.strip span { display: inline-flex; align-items: center; gap: 0.5rem; color: rgba(244, 241, 232, 0.9); }
.strip svg { flex: none; }

/* Feature rows */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.feature + .feature { margin-top: clamp(4rem, 8vw, 7rem); }
.feature--flip .feature__media { order: -1; }
.feature__body h2 { margin-bottom: 0.4em; }

.callout {
  border-left: 3px solid var(--yellow); padding: 0.2rem 0 0.2rem 1.1rem;
  margin: 1.5rem 0; color: var(--ink-2); font-size: 1rem;
}
.callout strong { color: var(--ink); }

/* Cards */
.grid { display: grid; gap: 1.25rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.7rem;
}
.card h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.1rem; margin-bottom: 0.4em; }
.card p { margin: 0; color: var(--ink-2); font-size: 0.98rem; }
.card__num {
  font-family: var(--font-display); font-size: 2rem; color: var(--sage);
  line-height: 1; margin-bottom: 0.5rem;
}

.section--forest .card { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }
.section--forest .card h3 { color: #fff; }
.section--forest .card p { color: rgba(244, 241, 232, 0.78); }

/* Comparison table */
.compare { width: 100%; border-collapse: collapse; margin-top: 2rem; font-size: 0.97rem; background: var(--card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.compare th, .compare td { padding: 0.9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); }
.compare thead th { background: var(--mint); font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.02em; }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare .good { color: var(--teal); font-weight: 600; }
.compare .bad { color: var(--danger); font-weight: 600; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* FAQ */
.faq { max-width: 46rem; }
.faq details {
  border-bottom: 1px solid var(--line); padding: 1.15rem 0;
}
.faq summary {
  cursor: pointer; font-weight: 600; font-size: 1.05rem; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--teal); flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: 0.8rem 0 0; color: var(--ink-2); }

/* Signup */
.signup { display: flex; flex-wrap: wrap; gap: 0.7rem; max-width: 30rem; margin-top: 1.6rem; }
.signup input {
  flex: 1 1 15rem; padding: 0.9rem 1.1rem; font: inherit; font-size: 1rem;
  border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.signup input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.section--forest .signup input { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); color: #fff; }
.section--forest .signup input::placeholder { color: rgba(244,241,232,0.55); }

/* Prose (legal + blog) */
.prose { max-width: 44rem; }
.prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-top: 2.4em; }
.prose h3 { font-size: 1.15rem; font-family: var(--font-body); font-weight: 600; margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.1em; }
.prose li { margin-bottom: 0.45em; }
.prose__meta { color: var(--ink-3); font-size: 0.92rem; margin-bottom: 2.5rem; }
.prose blockquote {
  margin: 1.8rem 0; padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 3px solid var(--yellow); color: var(--ink-2); font-style: normal;
}

/* Blog list */
.post-card {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.8rem; text-decoration: none; color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.post-card:hover { border-color: var(--sage); transform: translateY(-2px); color: inherit; }
.post-card h3 { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 0.35em; }
.post-card p { color: var(--ink-2); margin: 0 0 0.9rem; }
.post-card time { font-size: 0.87rem; color: var(--ink-3); }

/* Footer */
.footer { background: var(--forest); color: rgba(244, 241, 232, 0.8); padding: 3.5rem 0 2.5rem; font-size: 0.94rem; }
.footer a { color: rgba(244, 241, 232, 0.8); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; }
.footer__grid h4 { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); margin: 0 0 0.9rem; font-weight: 600; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 0.55rem; }
.footer .brand { color: #fff; margin-bottom: 0.8rem; }
.footer__legal { margin-top: 2.8rem; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, 0.13); font-size: 0.86rem; color: rgba(244, 241, 232, 0.55); }

.disclaimer {
  background: var(--mint); border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem; font-size: 0.92rem; color: #24402f; margin-top: 2rem;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--forest); color: #fff; padding: 0.7rem 1.1rem; z-index: 100;
}
.skip:focus { left: 0.5rem; top: 0.5rem; color: #fff; }

@media (max-width: 860px) {
  .hero__grid, .feature { grid-template-columns: 1fr; }
  .feature--flip .feature__media { order: 0; }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .nav__links a:not(.btn) { display: none; }
  .phone-pair .phone:nth-child(2) { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .phone--tilt { transform: none; }
}