/* ============================================================
   Haut.AI — Body Analysis landing page
   Page-specific styles: base, interactive states (hover/focus),
   responsive rules. Design tokens live in colors_and_type.css.
   Same theme as the Hair Analysis page (hair-analysis-assets/styles.css),
   with the responsive hooks this page's sections need.
   ============================================================ */

html { scroll-behavior: smooth; }
body { margin: 0; background: #ffffff; }
*, *::before, *::after { box-sizing: border-box; }

/* ── Defensive shield against host-CSS leakage ─────────
   The host site's global styles can bleed into this page — a
   site-wide `text-align: center`, default element margins, default
   link colors — which centers the text-only sections and shifts
   spacing. Every rule below is scoped under `body` so it outranks
   the host's bare element selectors while staying weaker than this
   page's own class rules and inline styles.

   Keep this block in place regardless of what the current build
   computes: it is insurance against the host's CSS changing, not a
   patch for a defect visible today.

   Centered by design, and therefore deliberately NOT reset here
   (both set locally with inline `text-align: center`, which wins):
     · the logo-strip line ("Haut.AI powers skin and hair analysis…")
     · the final CTA band ("See your own skin…")
   Everything else on the page is left-aligned.                     */
body {
  text-align: left;
  color: var(--ink);
  background: var(--white);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
}

/* Zero out host-injected margins. Every heading and <p> on this page
   carries its own inline margin, so this only strips the host's. */
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body ul, body ol, body figure, body blockquote { margin: 0; }
body ul, body ol { padding: 0; list-style: none; }

/* Re-assert the display scale (mirrors colors_and_type.css) so a
   host heading rule can't resize our headings. */
body h1 { font-weight: 500; font-size: 64px; line-height: 1; letter-spacing: var(--tracking-display); }
body h2 { font-weight: 500; font-size: 40px; line-height: 1.1; letter-spacing: var(--tracking-display); }
body h3 { font-weight: 500; font-size: 32px; line-height: 1; letter-spacing: var(--tracking-display); }

body a { color: var(--brand-700); text-decoration: none; }
body img { max-width: 100%; display: block; }

/* Box-level guard (companion to the text-align reset above).
   With `text-align: left` in place the TEXT sits left, but the BOXES
   could still be centered by the host — either by an injected
   `margin: 0 auto` on block children, or by a flex column wrapper with
   `align-items: center`. This defeats both, so the section bands really
   do span the full width, edge to edge.

   It touches layout position only (width / margins / align-self); no
   colors, type, spacing, or content. The page's own centered inner
   wrappers keep their `margin: 0 auto` and are left alone.            */
body > div, body > footer {
  width: 100%;
  align-self: stretch;
  margin-left: 0;
  margin-right: 0;
}

/* Text-only prose sections ("Body is 90%…", "One system. Face to feet…").
   The band guard above makes the section span full width; this puts the copy
   inside it on the same left edge as the rest of the page.

   In the design handoff these were two nested levels — a centered
   `.container` (max-width 1200px) with a narrower `.problem-inner` /
   `.science-inner` (max-width 820px) sitting flush-left inside it. This page
   collapsed them into a single 820px wrapper, which centers the copy and
   indents it past the page grid. So we restore both levels here: the wrapper
   becomes the page container (1160px, matching every other section), and the
   820px reading measure moves to the copy inside it, flush left.

   `!important` is required only because the wrapper's max-width is set
   inline; the flush-left result itself needs no override.                  */
.ha-prose-band { max-width: 1160px !important; }

/* The reading measure, flush-left. Children that set a narrower measure
   inline (the problem section's 660px paragraph) keep it — inline wins. */
.ha-prose-band > * { max-width: 820px; margin-right: auto; }

/* ── Buttons ─────────────────────────────────────────── */
.ha-btn-primary { transition: background 0.15s ease, box-shadow 0.15s ease; }
.ha-btn-primary:hover { background: var(--brand-800); box-shadow: var(--shadow-cta-md); }

.ha-btn-secondary { transition: background 0.15s ease; }
.ha-btn-secondary:hover { background: var(--brand-o-100); }

/* white button on the blue / dark accent bands */
.ha-btn-invert { transition: opacity 0.15s ease; }
.ha-btn-invert:hover { opacity: 0.88; }

/* outlined button on the blue / dark accent bands */
.ha-btn-ghost-invert { transition: background 0.15s ease; }
.ha-btn-ghost-invert:hover { background: rgba(255,255,255,0.12); }

/* ── Nav ─────────────────────────────────────────────── */
.ha-nav-link { transition: background 0.15s ease; }
.ha-nav-link:hover { background: var(--ink-o-04); }

/* dropdowns open on hover (was onMouseEnter/Leave in the prototype) */
.ha-menu-panel { display: none; }
.ha-menu:hover .ha-menu-panel { display: block; }

.ha-menu-item { transition: background 0.15s ease, color 0.15s ease; }
.ha-menu-item:hover { background: var(--brand-o-100); color: var(--brand-700); }

/* ── Brand logo wall ─────────────────────────────────── */
.ha-brand-logo { transition: opacity 0.18s ease; }
.ha-brand-logo:hover { opacity: 1; }

/* ── Text / email / social links ─────────────────────── */
.ha-email, .ha-social, .ha-footer-link { transition: color 0.15s ease; }
.ha-email:hover, .ha-social:hover, .ha-footer-link:hover { color: var(--brand-700); }
.ha-social-img { transition: opacity 0.15s ease; }
.ha-social-img:hover { opacity: 0.78; }

.ha-textlink { transition: opacity 0.15s ease; }
.ha-textlink:hover { opacity: 0.75; }

/* ── Problem headline ────────────────────────────────── */
/* Each sentence is its own block. The size tracks the column width so the
   longer sentence ("Body is 90% of your consumer's skin.", ~17.2em) stays on
   one line down to ~530px wide; below that `balance` splits it evenly instead
   of dropping a single word onto its own line. */
.ha-problem-h { font-size: clamp(26px, calc((100vw - 84px) / 17.2), 44px); }
.ha-problem-h > span { display: block; text-wrap: balance; }

/* ── Step images (how it works) ──────────────────────── */
/* The <img> width/height attributes are kept for CLS; `height: auto`
   stops those attributes overriding the square aspect-ratio. */
.ha-step-img img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: var(--radius-2xl); }
.ha-step-img img.fit { object-fit: contain; background: #ffffff; }

/* ── FAQ accordion ───────────────────────────────────── */
.ha-faq-head { cursor: pointer; }
.ha-faq-icon { transition: transform 0.2s ease; }
.ha-faq-row.is-open .ha-faq-icon { transform: rotate(45deg); }
.ha-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.ha-faq-row.is-open .ha-faq-answer { grid-template-rows: 1fr; }
.ha-faq-answer > div { overflow: hidden; }

/* ── Contact form (HubSpot form, styled like the rest of the page) ─── */
.ha-contact-form { max-width: 560px; }
.ha-contact-form form { display: flex; flex-direction: column; gap: 18px; }
.ha-cf-submit:disabled { opacity: 0.6; cursor: default; }
.ha-contact-form .w-input {
  font-family: var(--font-sans); font-size: 17px; color: #0d2c6e;
  background: #fff; border: 1px solid var(--divider-soft); border-radius: 18px;
  padding: 20px 24px; outline: none; width: 100%; box-sizing: border-box;
  transition: border-color 0.15s ease;
}
.ha-contact-form .w-input::placeholder { color: rgba(13,44,110,0.5); }
.ha-contact-form textarea.w-input { resize: vertical; min-height: 120px; }
.ha-contact-form .w-input:focus { border-color: var(--brand-700); outline: 2px solid rgba(20,84,212,0.20); }
.ha-contact-form .honeypot { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ha-contact-form .w-embed { display: none; }
.ha-cf-foot { margin-top: 6px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.ha-cf-privacy { font-size: 14px; color: var(--ink); }
.ha-cf-privacy a { color: var(--ink); text-decoration: underline; }
.ha-cf-submit {
  font-family: var(--font-sans); background: #000000; color: #fff; font-size: 17px;
  font-weight: 500; letter-spacing: var(--tracking-btn); padding: 22px 42px;
  border-radius: 999px; border: none; cursor: pointer; transition: opacity 0.15s ease;
}
.ha-cf-submit:hover { opacity: 0.8; }
.ha-contact-form .w-form-done, .ha-contact-form .w-form-fail { margin-top: 16px; padding: 18px 22px; border-radius: var(--radius-lg); font-size: 15px; }
.ha-contact-form .w-form-done { background: var(--brand-o-100); color: var(--brand-700); }
.ha-contact-form .w-form-fail { background: rgba(248,68,104,0.08); color: var(--danger); }

/* ── Mobile nav (hamburger) ──────────────────────────── */
.ha-burger { display: none; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  #hero-row { flex-direction: column !important; gap: 40px !important; padding-top: 56px !important; padding-bottom: 64px !important; }
  #hero-row h1 { font-size: 36px !important; }
  #hero-img { width: 100% !important; max-width: 460px !important; }
  #catalog-row, #rnd-row, #science-row { flex-direction: column !important; gap: 40px !important; align-items: stretch !important; }
  .ha-step-row { flex-direction: column !important; gap: 28px !important; }
  /* image above the copy on every step, including the alternating rows */
  .ha-step-row .ha-step-img { order: -1; }
  #survey-grid { grid-template-columns: repeat(2, 1fr) !important; }
  #outcomes-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  #git-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  #git-right { padding-top: 0 !important; }
  #cred-stats { grid-template-columns: 1fr !important; }
  #survey-panel { padding: 56px 28px !important; }
  #rnd-card { padding: 44px 28px !important; }
  #rnd-charts { grid-template-columns: 1fr !important; }
  #cta-actions { flex-direction: column !important; align-items: stretch !important; }
  #cta-actions a { text-align: center; }

  /* hamburger shows; the desktop link group is hidden until toggled open */
  .ha-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 9px; border: none; background: transparent; cursor: pointer;
  }
  .ha-burger span { display: block; height: 2px; width: 22px; background: var(--ink); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
  body.ha-nav-open .ha-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.ha-nav-open .ha-burger span:nth-child(2) { opacity: 0; }
  body.ha-nav-open .ha-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* menu is hidden until toggled, so the actions group holds the right edge */
  .ha-nav-actions { margin-left: auto; }
  #main-nav-links { display: none !important; }
  body.ha-nav-open #main-nav-links {
    display: flex !important;
    flex-direction: column; align-items: stretch; gap: 2px;
    position: fixed; top: 72px; left: 0; right: 0;
    max-height: calc(100vh - 72px); overflow-y: auto;
    background: #ffffff; border-bottom: 1px solid var(--divider-soft);
    box-shadow: var(--shadow-lift); padding: 12px 24px 20px; z-index: 120;
  }
  /* inline the dropdowns so every link is reachable on touch (no hover).
     !important overrides the panels' inline absolute-position styles. */
  body.ha-nav-open #main-nav-links .ha-menu { position: static; }
  body.ha-nav-open #main-nav-links .ha-nav-link { justify-content: flex-start; }
  body.ha-nav-open #main-nav-links .ha-menu-panel {
    display: block !important; position: static !important;
    top: auto !important; left: auto !important; padding-top: 0 !important;
  }
  body.ha-nav-open #main-nav-links .ha-menu-panel > div {
    border: none !important; box-shadow: none !important;
    min-width: 0 !important; border-radius: 0 !important; padding: 0 0 0 12px !important;
  }
}
@media (max-width: 560px) {
  #hero-row h1 { font-size: 32px !important; }
  #survey-grid, #rnd-stats { grid-template-columns: 1fr !important; }
}