/* VERSION: hva-site.css, 2026-10-15
   PURPOSE: Shared styles for the Reset Kit funnel pages (/reset/, /reset/thanks/, /reset/kit/, /privacy/, /terms/).
   Palette and type from the HVA Brand Book (white, sage, ink; Lora headlines, Inter body). Phone first. */

:root {
  --white:#ffffff; --bg:#f5f6f4; --soft:#e8ede9; --border:#e2e5e0;
  --ink:#252826; --ink-mid:#4a524c; --ink-light:#6f7a72;
  --sage:#6b8f71; --sage-dark:#4a6b50; --sage-light:#8a9e8f; --error:#9b3b30;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink-mid); font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; font-weight:400; font-size:17px; line-height:1.6; }
a { color:var(--sage-dark); }
a:focus-visible, button:focus-visible, input:focus-visible { outline:3px solid var(--sage); outline-offset:2px; }
img { max-width:100%; height:auto; }
.wrap { max-width:600px; margin:0 auto; padding:40px 20px 24px; }
.card { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:32px 24px; }
.eyebrow { font-size:12px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--sage-dark); margin:0 0 12px; }
h1, h2, h3 { font-family:"Lora",Georgia,serif; font-weight:500; color:var(--ink); }
h1 { font-size:32px; line-height:1.2; margin:0 0 14px; }
h2 { font-size:22px; line-height:1.3; margin:0 0 12px; }
h3 { font-size:19px; margin:0 0 4px; }
.lead { font-size:18px; margin:0 0 22px; }
.notice { background:var(--soft); border-left:3px solid var(--sage); border-radius:8px; padding:12px 14px; font-size:15px; margin:0 0 22px; color:var(--ink); }

/* Benefits */
.benefits { list-style:none; padding:0; margin:0 0 26px; }
.benefits li { position:relative; padding-left:26px; margin-bottom:12px; }
.benefits li::before { content:""; position:absolute; left:4px; top:10px; width:9px; height:9px; border-radius:50%; background:var(--sage); }
.benefits strong { color:var(--ink); font-weight:600; }

/* Form */
.form-box { background:var(--bg); border-radius:12px; padding:20px 18px; }
.form-box h2 { font-size:20px; }
label { display:block; font-size:14px; font-weight:500; color:var(--ink); margin:0 0 6px; }
input[type=email] { width:100%; font:inherit; font-size:17px; padding:14px 14px; border:1px solid #c9d0ca; border-radius:10px; background:var(--white); color:var(--ink); }
input[type=email][aria-invalid=true] { border-color:var(--error); }
.btn { display:inline-block; width:100%; margin-top:12px; font:inherit; font-size:17px; font-weight:600; color:var(--white); background:var(--sage-dark); border:0; border-radius:999px; padding:15px 22px; cursor:pointer; text-align:center; text-decoration:none; }
.btn:hover { background:#3f5c44; }
.btn[disabled] { opacity:0.7; cursor:default; }
.btn-outline { background:transparent; color:var(--sage-dark); border:1.5px solid var(--sage); }
.btn-outline:hover { background:var(--soft); }
.form-msg { min-height:1.2em; font-size:15px; margin:10px 0 0; }
.form-msg.error { color:var(--error); }
.consent { font-size:14px; line-height:1.5; color:var(--ink-mid); margin:12px 0 0; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Inside list */
.inside { margin-top:26px; }
.inside h2 { font-size:16px; font-family:"Inter",sans-serif; font-weight:600; letter-spacing:0.04em; }
.inside ul { list-style:none; padding:0; margin:0; }
.inside li { padding:9px 0; border-top:1px solid var(--border); font-size:15.5px; }
.inside li span { color:var(--ink-light); }

/* Kit page */
.track { border-top:1px solid var(--border); padding:20px 0; }
.track:first-of-type { border-top:0; padding-top:4px; }
.track .meta { font-size:14px; color:var(--ink-light); margin:0 0 4px; }
.track p.for { margin:0 0 10px; font-size:15.5px; }
.track audio { width:100%; margin:4px 0 10px; }
.dl { display:inline-block; font-size:15px; font-weight:600; color:var(--sage-dark); border:1.5px solid var(--sage); border-radius:999px; padding:8px 16px; text-decoration:none; }
.dl:hover { background:var(--soft); }
.small { font-size:14.5px; color:var(--ink-light); }

/* Thank-you */
.yt { margin-top:22px; padding-top:20px; border-top:1px solid var(--border); }

/* Legal pages */
.legal h2 { font-size:19px; margin-top:26px; }
.legal p, .legal li { font-size:16px; }

/* Footer */
.site-footer { max-width:600px; margin:0 auto; padding:8px 20px 96px; text-align:center; font-size:13.5px; color:var(--ink-light); }
.site-footer p { margin:6px 0; }
.site-footer a { color:var(--ink-light); }
.site-footer .social a { margin:0 5px; white-space:nowrap; }
.site-footer button.linklike { font:inherit; color:var(--ink-light); background:none; border:0; padding:0; text-decoration:underline; cursor:pointer; }

/* Cookie banner */
.cookie-bar { position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--white); border-top:1px solid var(--border); box-shadow:0 -4px 16px rgba(37,40,38,0.06); padding:12px 16px; display:none; }
.cookie-bar.show { display:block; }
.cookie-bar .inner { max-width:600px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-size:14px; color:var(--ink-mid); }
.cookie-bar p { margin:0; flex:1 1 260px; }
.cookie-bar .actions { display:flex; gap:8px; }
.cookie-bar button { font:inherit; font-size:14px; font-weight:600; border-radius:999px; padding:8px 16px; cursor:pointer; }
.cookie-bar .accept { background:var(--sage-dark); color:var(--white); border:0; }
.cookie-bar .decline { background:var(--white); color:var(--sage-dark); border:1.5px solid var(--sage); }

@media (min-width:640px) {
  .wrap { padding-top:64px; }
  .card { padding:44px 44px; }
  h1 { font-size:38px; }
}

/* Kit page track titles: h2 for document order, sized like h3 */
.h3 { font-size:19px; margin:0 0 4px; }

/* Wide screens: the cookie bar becomes a small corner card so it never covers the form button. */
@media (min-width:900px) {
  .cookie-bar { left:auto; right:20px; bottom:20px; width:360px; border:1px solid var(--border); border-radius:14px; }
  .cookie-bar .inner { flex-direction:column; align-items:flex-start; }
  .cookie-bar p { flex:none; }
}

/* Landing page, Gate 3 decision B (2026-10-16): phones show the form first, then the benefits.
   From 640px up the approved order returns: benefits, then the form. */
.landing .benefits { margin-top:40px; }
@media (min-width:640px) {
  .landing { display:flex; flex-direction:column; }
  .landing > * { order:0; }
  .landing .benefits { order:1; margin-top:0; }
  .landing .form-box { order:2; }
  .landing .inside { order:3; }
}

/* Home screen steps on /reset/kit/ (style B, approved 2026-10-16) */
.steps { border:1px solid var(--border); border-radius:12px; padding:16px; margin:0 0 22px; background:#fff; }
.steps h2 { font:600 16px Inter,sans-serif; margin:0 0 12px; color:var(--ink); }
.steps .s { display:flex; gap:12px; align-items:flex-start; margin:0 0 12px; font-size:15.5px; line-height:1.45; }
.steps .s:last-child { margin:0; }
.steps .n { flex:none; width:26px; height:26px; border-radius:50%; background:var(--sage); color:#fff; font:600 14px/26px Inter,sans-serif; text-align:center; }
.steps .n.done { background:#fff; color:var(--sage); border:2px solid var(--sage); line-height:22px; }
.ic { display:inline-flex; vertical-align:-5px; width:24px; height:24px; border:1px solid #cfd6cf; border-radius:6px; background:#fff; align-items:center; justify-content:center; margin:0 2px; }
.ic svg { width:15px; height:15px; stroke:#2f6fd6; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ic.dots { font:700 17px/1 Inter,sans-serif; color:#2f6fd6; }