/* HeartWell / Astra — staging styles. Stage B (11 Oct 2026).
   Shared base first, then landing-only (body.landing), then inner pages (body.page), then form. */
:root { --ink:#142028; --muted:#4f5a64; --accent:#2f6f6a; --accent-dark:#245854; --cream:#f3efe6; --line:#e8e2d8; --focus:#f2b705; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:Georgia,"Times New Roman",serif; color:var(--ink); background:#fff; font-size:18px; line-height:1.5; }
img { max-width:100%; }
a { color:var(--accent-dark); }
.sans, label, input, select, textarea, button, .note, .staging-banner, footer { font-family:"Segoe UI",system-ui,-apple-system,sans-serif; }
.wrap { width:min(1100px,92vw); margin:0 auto; }
.narrow { width:min(760px,92vw); margin:0 auto; }
.staging-banner { background:#fff3cd; color:#664d03; text-align:center; padding:8px 12px; font-size:.85rem; border-bottom:1px solid #ffe69c; }
.note { font-size:.88rem; color:var(--muted); }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.visually-hidden { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Header — default (inner pages): solid, legible */
header.site { background:#1a2a28; color:#fff; padding:14px 0; }
header.site .wrap { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.brand { font-family:"Segoe UI",system-ui,sans-serif; font-weight:700; font-size:.95rem; letter-spacing:.03em; color:#fff; text-decoration:none; }
.btn.small { padding:10px 16px; font-size:.88rem; margin:0; }

/* Buttons */
.btn {
  display:inline-block; background:var(--accent); color:#fff !important; text-decoration:none; border:2px solid var(--accent);
  padding:14px 22px; border-radius:999px; font-weight:700; font-family:"Segoe UI",system-ui,sans-serif;
  font-size:.98rem; margin:0 8px 8px 0; cursor:pointer; line-height:1.2; min-height:48px;
}
.btn:hover { background:var(--accent-dark); border-color:var(--accent-dark); }
.btn.secondary { background:transparent; border:2px solid rgba(255,255,255,.9); }        /* for dark backgrounds */
.btn.secondary:hover { background:rgba(255,255,255,.12); }
.btn.outline { background:#fff; color:var(--accent-dark) !important; border:2px solid var(--accent); } /* for light backgrounds */
.btn.outline:hover { background:#eef6f5; }
.btn.dark { background:var(--ink); border-color:var(--ink); }
.btn[disabled] { opacity:.65; cursor:wait; }
.text-link { font-family:"Segoe UI",system-ui,sans-serif; font-weight:600; }
.hero-copy .text-link { color:#fff; }

/* ===== Landing page only ===== */
.landing header.site { position:absolute; top:40px; left:0; right:0; z-index:5; background:transparent; padding:0; }
.landing .hero { display:grid; grid-template-columns:1.05fr .95fr; min-height:100vh; background:var(--cream); }
@media (max-width:900px) { .landing .hero { grid-template-columns:1fr; min-height:auto; } }
.hero-copy {
  padding:120px 6vw 48px; display:flex; flex-direction:column; justify-content:center;
  background:linear-gradient(180deg,#1a2a28 0%, #2f6f6a 100%); color:#fff;
}
.hero-copy h1 { font-size:clamp(2rem,4.5vw,3.1rem); line-height:1.12; margin:0 0 14px; }
.hero-copy .lead { margin:0 0 22px; font-size:1.08rem; opacity:.95; max-width:28em; }
.hero-faces { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:28px; }
.hero-faces img { width:100%; height:160px; object-fit:cover; border-radius:12px; }
.hero-visual { position:relative; min-height:420px; background:#111 center/cover no-repeat; }
.hero-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(20,40,42,.55), transparent 45%); }
.hero-visual .faces-overlay { position:absolute; right:18px; bottom:18px; z-index:2; display:flex; gap:8px; }
.hero-visual .faces-overlay img { width:110px; height:140px; object-fit:cover; border-radius:12px; border:3px solid #fff; box-shadow:0 10px 30px rgba(0,0,0,.35); }
@media (max-width:480px) { .landing header.site .btn.small { padding:8px 12px; font-size:.8rem; } .hero-copy { padding-top:100px; } }
.video-now { padding:28px 0 22px; background:#0f1a1c; color:#fff; }
.video-now h2 { margin:0 0 6px; font-size:1.45rem; }
.video-now .sub { margin:0 0 16px; opacity:.85; font-family:"Segoe UI",system-ui,sans-serif; font-size:.92rem; }
.video-frame { position:relative; padding-top:56.25%; border-radius:14px; overflow:hidden; background:#000; }
.video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.hook { padding:36px 0; background:#fff; border-bottom:1px solid var(--line); }
.hook h2 { margin:0 0 8px; font-size:1.5rem; }
.hook p { margin:0 0 16px; color:var(--muted); max-width:40em; }
.section { padding:36px 0; }
.section h2 { margin:0 0 14px; font-size:1.45rem; }
.section .intro-label { font-family:"Segoe UI",system-ui,sans-serif; font-size:.9rem; color:var(--muted); max-width:46em; margin:0 0 16px; }
.cards { display:grid; gap:12px; }
@media (min-width:720px) { .cards.three { grid-template-columns:repeat(3,1fr); } }
.card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; }
.card h3 { margin:0 0 6px; font-size:1.1rem; }
.card p { margin:0; color:var(--muted); font-size:.95rem; }
.tag { display:inline-block; font-family:"Segoe UI",system-ui,sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:#fff3cd; color:#664d03; border-radius:999px; padding:3px 10px; margin-bottom:8px; }
.footnote { font-family:"Segoe UI",system-ui,sans-serif; font-size:.85rem; color:var(--muted); margin:14px 0 0; }
.privacy { border-left:5px solid var(--accent); background:#eef6f5; padding:20px 22px; border-radius:0 14px 14px 0; }
.privacy ul { margin:8px 0 0; padding-left:1.2em; }
.privacy li { margin-bottom:6px; }
.their-choice { margin-top:18px; background:#fff; border:1px solid #cfe3e0; border-radius:12px; padding:16px 18px; }
.their-choice h3 { margin:0 0 6px; font-size:1.2rem; }
.their-choice p { margin:0; }
.cta-band {
  margin:10px 0 40px; border-radius:18px; overflow:hidden; color:#fff; text-align:center; padding:40px 24px;
  background:linear-gradient(120deg,rgba(20,40,42,.85),rgba(47,111,106,.8)), url("img/garden-home.jpg?v=8") center/cover;
}
.cta-band h2 { margin:0 0 10px; font-size:1.7rem; }
.cta-band p { margin:0 0 18px; opacity:.95; }

/* ===== Inner pages (interest, thanks, guide) ===== */
.page main { background:var(--cream); padding-bottom:40px; }
.page-hero { padding:36px 0 20px; }
.page-hero h1 { font-size:clamp(1.7rem,4vw,2.4rem); line-height:1.15; margin:0 0 12px; }
.page-hero .lead { margin:0 0 12px; font-size:1.05rem; max-width:40em; }
.page-hero p { max-width:40em; }
.panel { background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:0 4px 18px rgba(20,32,40,.05); }
@media (max-width:600px) { .panel { padding:18px 16px; border-radius:12px; } }
.guide-body h2 { font-size:1.3rem; margin:28px 0 8px; }
.guide-body h2:first-of-type { margin-top:8px; }
.guide-body ul.clean { padding-left:1.2em; }
.guide-body ul.checklist { list-style:none; padding-left:0; }
.guide-body ul.checklist li { margin-bottom:8px; }
.guide-body .privacy { margin-top:10px; }

/* ===== Form ===== */
form .row { margin:0 0 18px; }
form label { display:block; font-weight:600; font-size:1rem; margin:0 0 6px; }
form .req { font-weight:400; color:var(--muted); font-size:.9rem; }
form .hint { display:block; font-size:.86rem; color:var(--muted); margin-top:4px; font-family:"Segoe UI",system-ui,sans-serif; }
form input[type=text], form input[type=email], form input[type=tel], form input:not([type]), form select, form textarea {
  display:block; width:100%; font-size:1rem; padding:12px 14px; min-height:48px;
  border:1.5px solid #b9c2c8; border-radius:10px; background:#fff; color:var(--ink);
}
form select { appearance:auto; }
form textarea { min-height:120px; resize:vertical; }
form input:focus, form select:focus, form textarea:focus { border-color:var(--accent); outline:3px solid var(--focus); outline-offset:1px; }
form input:user-invalid, form select:user-invalid { border-color:#b3261e; }
.check { display:flex; gap:10px; align-items:flex-start; font-weight:400 !important; font-size:1rem; }
.check input { width:22px; height:22px; margin-top:2px; flex:0 0 auto; }
.collection-notice { background:#f6f8f8; border:1px solid var(--line); border-radius:10px; padding:14px 16px; font-size:.9rem; color:var(--muted); font-family:"Segoe UI",system-ui,sans-serif; margin:18px 0 8px; }
.collection-notice strong { color:var(--ink); }
.honey { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.tbc { background:#fff3cd; color:#664d03; padding:0 4px; border-radius:4px; }

footer { border-top:1px solid var(--line); padding:24px 0 40px; color:var(--muted); font-size:.9rem; background:#fff; }
footer p { margin:0 0 8px; }

/* v9: stacked demonstration videos (original first, FLOW B second) */
.video-stack { display:flex; flex-direction:column; gap:26px; }
.video-block { width:100%; margin:0 auto; }
.video-block--primary { max-width:960px; }
.video-block--secondary { max-width:760px; }
.video-label { margin:0 0 10px; font-size:1.05rem; font-weight:600; font-family:"Segoe UI",system-ui,sans-serif; color:#fff; }
.video-block--secondary .video-label { font-size:.95rem; opacity:.9; }
@media (max-width:640px) {
  .video-stack { gap:20px; }
  .video-block--primary, .video-block--secondary { max-width:100%; }
  .video-label { font-size:.95rem; }
  .video-frame { border-radius:10px; }
}