/* PageFlow — lifewave-x39-uk template styles
   Palette: warm off-white background, deep slate/navy headings, one muted sage accent.
   Not medical blue, not MLM gold. Calm, compact, high readability. */

:root {
  --bg: hsl(40 14% 97%);
  --surface: #ffffff;
  --ink: hsl(215 25% 20%);
  --ink-soft: hsl(215 15% 38%);
  --ink-faint: hsl(215 12% 52%);
  --heading: hsl(217 33% 22%);
  --accent: hsl(108 16% 46%);
  --accent-strong: hsl(108 18% 38%);
  --accent-tint: hsl(108 22% 95%);
  --border: hsl(40 10% 88%);
  --radius: 10px;
  --maxw: 980px;
  --maxw-narrow: 680px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { color: var(--heading); line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.75rem, 4.5vw, 2.6rem); margin: 0 0 0.85rem; text-wrap: balance; }
h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 0 0 0.7rem; text-wrap: balance; }
p { margin: 0 0 0.85rem; max-width: 68ch; }

main { display: block; }

/* Visually hidden (still available to screen readers) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--heading); color: #fff; padding: 0.5rem 1rem; border-radius: 0 0 8px 0; z-index: 20;
}
.skip-link:focus { left: 0; }

/* Focus visibility */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: 2px;
  border-radius: 4px;
}

.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2.1rem 1.5rem;
}
.section--narrow { max-width: var(--maxw-narrow); }
.section__lead { color: var(--ink-soft); }

/* Hero — information-first: no call to action here */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2.75rem 1.5rem 1.75rem;
  display: flex;
  gap: 3rem;
  align-items: center;
}
.hero--textonly { max-width: var(--maxw-narrow); }
.hero__text { flex: 1 1 0; }
.hero__sub { color: var(--ink-soft); font-size: 1.05rem; max-width: 52ch; }
.hero__disclosure { color: var(--ink-faint); font-size: 0.93rem; max-width: 52ch; margin-top: 0.9rem; }
.hero__media { flex: 0 0 34%; }
.hero__media .photo { max-height: 460px; object-fit: cover; object-position: 50% 22%; }
.hero__br { display: none; }
@media (min-width: 560px) { .hero__br { display: inline; } }

/* Buttons */
.btn {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease, transform 0.05s ease;
  min-height: 44px;
}
.btn--primary {
  background: var(--accent);
  color: #fff;
  padding: 0.7rem 1.5rem;
  margin-top: 0;
}
.btn--primary:hover { background: var(--accent-strong); }
.btn--primary:active { transform: translateY(1px); }
.btn--channel {
  background: var(--surface);
  color: var(--heading);
  border: 1px solid var(--border);
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  text-align: center;
}
.btn--channel:hover { background: var(--accent-tint); border-color: var(--accent); }

/* Section grids */
.section__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 2.25rem;
  align-items: center;
}
.section__grid--single { grid-template-columns: 1fr; max-width: var(--maxw-narrow); margin: 0 auto; }
.section__media--inline { max-width: 420px; margin: 1rem 0; }

/* Photos — consistent radii, controlled heights, no awkward face crops */
.photo { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.section__media .photo { aspect-ratio: 4 / 3; object-fit: cover; }
.section__media--inline .photo { aspect-ratio: 4 / 5; object-position: 50% 22%; }

/* Inline reply prompts */
.prompt { margin-top: 1.1rem; }
.prompt a { color: var(--accent-strong); font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Personal note */
.why__note {
  margin: 1.1rem 0;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.05rem;
}
.why__note p { margin: 0 0 0.4rem; }
.why__note-source { color: var(--ink-faint); font-size: 0.9rem; }

/* Deeper information (details/summary) */
.deeper {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin: 0 0 0.75rem;
}
.deeper > summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-weight: 600;
  color: var(--heading);
  padding: 0.9rem 1.15rem;
  cursor: pointer;
  border-radius: var(--radius);
}
.deeper > summary::-webkit-details-marker { display: none; }
.deeper > summary::after { content: "+"; font-size: 1.3rem; color: var(--accent); line-height: 1; }
.deeper[open] > summary::after { content: "\2212"; }
@media (hover: hover) {
  .deeper > summary:hover { background: var(--accent-tint); }
}
.deeper__body { padding: 0 1.15rem 1rem; }

/* Links list */
.links { list-style: none; padding: 0; margin: 0; }
.links li { margin: 0.5rem 0; }
.links a { color: var(--accent-strong); }
.links__tag { color: var(--ink-faint); font-size: 0.8rem; font-weight: 400; }

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}

/* Reply component — compact interest choices + one shared selected-message panel */
.reply { scroll-margin-top: 1rem; }
.reply:focus { outline: none; }
.reply__intro { color: var(--ink-soft); }

.reply-choices { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.5rem; }
.reply-choice { position: relative; }
.reply-choice input {
  position: absolute;
  top: 50%; left: 1rem;
  width: 1.05rem; height: 1.05rem;
  transform: translateY(-50%);
  margin: 0;
  accent-color: var(--accent-strong);
}
.reply-choice label {
  display: block;
  padding: 0.7rem 1rem 0.7rem 2.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  font-weight: 600;
  color: var(--heading);
  cursor: pointer;
  min-height: 44px;
}
/* Hover styling ONLY on devices that truly support hover — prevents stale
   pale-green "hover" backgrounds lingering on touch devices, which could look
   like a second selected option. */
@media (hover: hover) {
  .reply-choice label:hover { background: var(--accent-tint); }
}
.reply-choice input:checked + label {
  border-color: var(--accent-strong);
  background: var(--surface);
  color: var(--accent-strong);
  box-shadow: inset 0 0 0 1px var(--accent-strong);
}
/* Keyboard focus stays visible but distinct from selection (outline, not fill) */
.reply-choice input:focus-visible + label { outline: 3px solid var(--accent-strong); outline-offset: 2px; }

/* Panels: all visible by default (usable without JS or modern CSS); when :has()
   is supported, only the panel for the selected interest is shown. */
.reply-panel {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: 1rem;
}
.reply-panel__label { font-size: 0.95rem; color: var(--ink-faint); font-weight: 600; margin: 0 0 0.6rem; }
@supports selector(:has(*)) {
  .reply-panel { display: none; }
  .reply:has(#choice-product:checked) #panel-product,
  .reply:has(#choice-science:checked) #panel-science,
  .reply:has(#choice-business:checked) #panel-business,
  .reply:has(#choice-question:checked) #panel-question { display: block; }
  /* With interactive switching, the repeated label heading is redundant noise */
  .reply:has(input[name="reply-interest"]) .reply-panel__label { display: none; }
}

.reply-panel__msg {
  margin: 0 0 0.6rem;
  padding: 0.8rem 1rem;
  background: var(--accent-tint);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  user-select: all;
}
.reply-panel__edit { color: var(--ink-faint); font-size: 0.88rem; margin: 0 0 0.85rem; }
.reply-panel__action { margin: 0 0 0.75rem; }
.reply-panel__primary { display: block; text-align: center; }

.reply-more {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.reply-more > summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-soft);
  padding: 0.7rem 1rem;
  cursor: pointer;
  border-radius: var(--radius);
  min-height: 44px;
}
.reply-more > summary::-webkit-details-marker { display: none; }
.reply-more > summary::after { content: "+"; font-size: 1.2rem; color: var(--accent); line-height: 1; }
.reply-more[open] > summary::after { content: "\2212"; }
@media (hover: hover) {
  .reply-more > summary:hover { background: var(--accent-tint); }
}
.reply-more__body { padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: 0.55rem; }

.reply-panel__note, .reply-panel__copyhint { color: var(--ink-faint); font-size: 0.88rem; margin: 0.2rem 0 0; }
.reply-panel__status { font-size: 0.9rem; color: var(--accent-strong); margin: 0.2rem 0 0; }
.reply-panel__status:empty { display: none; }

.reply__original { margin-top: 1.25rem; color: var(--ink-soft); }
.reply__privacy {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin: 1rem 0 0;
  border-top: 1px solid var(--border);
  padding-top: 0.9rem;
}

/* Footer */
.footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2rem 1.5rem;
  padding-bottom: calc(2.25rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  color: var(--ink-faint);
  font-size: 0.88rem;
  line-height: 1.6;
}
.footer p { margin: 0 0 0.55rem; }
.footer a { color: var(--ink-soft); }

/* Sticky mobile reply bar — hidden until JS enables it (JS shows it only after
   the reader has passed the "What is X39?" section, and hides it again around
   the reply section and footer). Without JS the in-page reply links are the path. */
.stickybar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 0.45rem 1rem;
  padding-bottom: calc(0.45rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--border);
  z-index: 10;
}
.stickybar__btn { display: block; text-align: center; margin: 0; padding: 0.65rem 1.5rem; }
.stickybar--hidden { display: none !important; }
@media (max-width: 700px) {
  .stickybar--enabled { display: block; }
  /* While the sticky bar exists, reserve space so it can never cover the final
     line of content, and keep anchored scrolls clear of it. */
  body.has-stickybar { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px)); }
  body.has-stickybar main > .section:last-of-type { scroll-margin-bottom: 4.5rem; }
  /* Keep the footer readable above the sticky bar */
  .footer { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
}

/* Responsive */
@media (max-width: 760px) {
  body { line-height: 1.55; }
  /* Mobile hero order: headline + explanation + disclosure first, photo after */
  .hero { flex-direction: column; gap: 1.25rem; padding-top: 1.9rem; padding-bottom: 1.25rem; align-items: stretch; }
  .hero__media { width: 100%; flex-basis: auto; }
  /* Controlled responsive crop: keeps Neil's face AND the patch on his arm visible,
     never near-full-viewport */
  .hero__media .photo { aspect-ratio: 4 / 5; max-height: 440px; }
  .section { padding: 1.6rem 1.15rem; }
  .section__grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .card { padding: 1.15rem; }
}