/* First Hello research pages (2026-10-25): one page per report his coaches read to him, each opening with the
   coaches talking it over (the human part), then what the studies found, with sources and how strong each finding
   is. Same warm palette and type as the main page (golden hour in daylight, night and amber in dark mode). */
:root {
  --paper: #fbf6ef; --panel: #ffffff; --tint: #f6ebe0; --ink: #2a1f1a; --muted: #6f6158; --line: #e8dccf;
  --go: #c94f24; --go-ink: #ffffff; --go-soft: #f8e1d4; --accent: #d65a2c; --phone: #2a1f1a;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15161f; --panel: #1d1f2b; --tint: #1b1c27; --ink: #f3ede4; --muted: #b3aa9f; --line: #2d2f3d;
    --go: #f2a541; --go-ink: #1a1308; --go-soft: #3a2e1c; --accent: #f2a541; --phone: #0d0e14;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #15161f; --panel: #1d1f2b; --tint: #1b1c27; --ink: #f3ede4; --muted: #b3aa9f; --line: #2d2f3d;
  --go: #f2a541; --go-ink: #1a1308; --go-soft: #3a2e1c; --accent: #f2a541; --phone: #0d0e14;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--paper); color: var(--ink); font: 400 17px/1.65 var(--body); margin: 0; }
.wrap { max-width: 1080px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px)); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--go); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.1;
  text-wrap: balance; margin: 0; }
h2 { font-size: clamp(28px, 3.6vw, 40px); }
h3 { font-size: 20px; font-weight: 600; line-height: 1.3; }
p { margin: 0; }
em { font-style: normal; color: var(--accent); }
.eyebrow { font: 600 13px/1.2 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.eyebrow a { text-decoration: none; }
.eyebrow a:hover { color: var(--ink); }
.fine { font-size: 14px; color: var(--muted); }

header { padding-block: 22px; }
header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mark { font: 700 21px/1 var(--display); text-decoration: none; display: flex; align-items: center; gap: 10px; }
.mark i { width: 12px; height: 12px; border-radius: 50%; background: var(--go); box-shadow: 0 0 0 4px var(--go-soft); }
.navlink { font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 2px solid var(--go); padding-bottom: 2px; }
a.go { font: 700 17px/1 var(--body); padding: 15px 22px; border-radius: 12px; background: var(--go); color: var(--go-ink);
  text-decoration: none; display: inline-block; }

/* the top: the question, the short answer, and the coaches talking it over */
.top { padding-block: 20px 64px; }
.top .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 56px; align-items: center; }
.top h1 { font-size: clamp(38px, 5.2vw, 62px); line-height: 1.04; margin-top: 14px; }
.short { font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 34em; margin-top: 20px; }
.meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-size: 14px; color: var(--muted); }
.meta span { display: inline-flex; align-items: center; gap: 8px; }
.meta span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--go); }
.phone { justify-self: center; width: 100%; max-width: 300px; margin: 0; padding: 11px; position: relative;
  background: var(--phone); border-radius: 34px; box-shadow: 0 34px 70px -30px rgba(60, 30, 15, .55); }
.phone video { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 24px; background: #0d0e14; object-fit: cover; }
.phone figcaption { text-align: center; font-size: 14px; color: var(--muted); margin-top: 12px; }
.phone figcaption b { color: var(--ink); font-weight: 600; }

section { padding-block: 64px; border-top: 1px solid var(--line); }
section.tint { background: var(--tint); }
.intro { max-width: 42em; display: grid; gap: 12px; }
.intro p { color: var(--muted); font-size: 18px; }

/* what the studies found: a number, the finding, the source and how strong it is */
.findings { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px; }
.finding { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 24px 26px;
  display: grid; gap: 10px; align-content: start; }
.finding .big { font: 700 40px/1 var(--display); color: var(--go); }
.finding p { color: var(--muted); font-size: 16px; }
.src { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13px; color: var(--muted); }
.src a { text-decoration-color: var(--line); text-underline-offset: 3px; }
.src a:hover { text-decoration-color: var(--go); }
.tag { font: 600 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px;
  border-radius: 999px; border: 1px solid var(--line); }
.tag.strong { background: var(--go-soft); color: var(--go); border-color: transparent; }

/* a coach's line, in her words from the clip */
.said { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-items: center; margin: 40px 0 0;
  max-width: 46em; }
.said img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--go-soft); }
.said blockquote { margin: 0; font: 600 20px/1.45 var(--display); }
.said cite { display: block; margin-top: 6px; font: 500 13px var(--body); color: var(--muted); font-style: normal; }

/* try this: numbered steps */
.steps { list-style: none; padding: 0; margin: 30px 0 0; display: grid; max-width: 50em; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding: 16px 0;
  border-bottom: 1px solid var(--line); counter-increment: step; }
.steps li::before { content: counter(step); font: 700 30px/1 var(--display); color: var(--go); }
.steps b { display: block; font-weight: 600; font-size: 18px; margin-bottom: 2px; }
.steps span { color: var(--muted); }

/* tables (where to try, good vs bad boldness): stacked on a phone */
.table { width: 100%; border-collapse: collapse; margin-top: 30px; font-size: 15px; }
.table th { text-align: left; font: 600 12px/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding: 0 14px 10px 0; border-bottom: 1.5px solid var(--ink); }
.table td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--muted); }
.table td:first-child { color: var(--ink); font-weight: 600; }
.table .yes { color: var(--go); font-weight: 600; }

/* myths against the evidence */
.myths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 30px; }
.myth { border: 1.5px solid var(--line); border-radius: 20px; padding: 22px 24px; display: grid; gap: 8px; align-content: start; }
.myth h3 { font-size: 19px; }
.myth h3::before { content: "\201C"; color: var(--go); }
.myth h3::after { content: "\201D"; color: var(--go); }
.myth p { color: var(--muted); font-size: 16px; }

/* how the coach uses it */
.uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 30px; }
.use { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px; display: grid;
  gap: 8px; align-content: start; }
.use p { color: var(--muted); font-size: 16px; }

.sources { columns: 2 320px; column-gap: 40px; margin: 26px 0 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
.sources li { break-inside: avoid; margin-bottom: 8px; }
.sources a { text-underline-offset: 3px; text-decoration-color: var(--line); }
.sources a:hover { text-decoration-color: var(--go); }
.note { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); max-width: 52em; }

/* the end: practise it, and the other reports */
.cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.cta h2 { max-width: 16em; }
.more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.more a { display: grid; gap: 6px; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--line);
  background: var(--panel); text-decoration: none; }
.more a b { font: 600 18px/1.3 var(--display); }
.more a span { font-size: 14px; color: var(--muted); }
.more a:hover { border-color: var(--go); }
footer { padding-block: 36px 48px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; }

@media (max-width: 860px) {
  .top .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .findings, .myths, .uses, .more { grid-template-columns: minmax(0, 1fr); }
  .cta { grid-template-columns: minmax(0, 1fr); }
  section { padding-block: 52px; }
  .table thead { display: none; }
  .table tr { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .table td { padding: 0; border: 0; }
  .table td[data-h]::before { content: attr(data-h) ": "; font-weight: 600; color: var(--ink); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
  .js .reveal.in { opacity: 1; transform: none; }
  .phone { animation: floatin .8s ease .1s both; }
  @keyframes floatin { from { opacity: 0; transform: translateY(20px) scale(.985); } to { opacity: 1; transform: none; } }
  a.go { transition: transform .12s ease, box-shadow .25s ease; }
  a.go:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -12px var(--go); }
}