/*
  adhd.paddock.so: one tightly controlled page.

  Palette: the ADHD flag (color-hex.com/color-palette/96109). Every color
  has one job. Dark brown #520100 is the dark ground. Gold #fec262 is the
  single accent: the headline's second line, the word "Free", the buttons,
  the focus ring, the checkmarks. Orange #ff7c52 and red #ce3c3c mark the
  second and third sections so each is recognisably its own. Burgundy
  #8c002d sits under the footer. Light mode is derived from the gold: a
  warm cream ground with the dark brown as ink. The five colors appear
  together exactly once, as the thin rule above the sections.

  Bubbles, the way Messages shows them to the person holding the phone:
  the visitor's own texts are Apple's blue, #007AFF (light) / #0A84FF
  (dark), on the right; Paddock's replies are Apple's light gray on the
  left, with black text, on both grounds. 18px radius, tails. Apple
  devices render the system font, which is SF; everything else gets
  Inter.
*/

:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #520100;
  --surface: #641510;
  --border: rgba(254, 194, 98, 0.18);
  --border-strong: rgba(254, 194, 98, 0.36);
  --ink: #fff3e6;
  --dim: #f0c9a8;
  --mute: #d3a58a;
  --accent: #fec262;
  --accent-ink: #520100;
  --orange: #ff7c52;
  --red: #ce3c3c;
  --burgundy: #8c002d;
  --footer-bg: #3a0014;
  --footer-ink: #f5d7de;
  --bubble-you: #0a84ff;
  --bubble-you-ink: #ffffff;
  --bubble-paddock: #e5e5ea;
  --bubble-paddock-ink: #000000;
  --typing-dot: rgba(0, 0, 0, 0.45);
  --composer-bg: #3d0a05;
  --composer-border: rgba(255, 243, 230, 0.26);
  --composer-placeholder: #c9a08a;
  --send: #0a84ff;
  --glow: rgba(254, 194, 98, 0.28);
  --example-bg: #0a84ff;
  --example-ink: #ffffff;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #fdf6ea;
  --surface: #ffffff;
  --border: rgba(82, 1, 0, 0.12);
  --border-strong: rgba(82, 1, 0, 0.28);
  --ink: #3a0a00;
  --dim: #6b2a1c;
  --mute: #8a5545;
  --accent: #b76e00;
  --accent-ink: #ffffff;
  --orange: #d9532c;
  --red: #b52f2f;
  --burgundy: #8c002d;
  --footer-bg: #520100;
  --footer-ink: #f5d7de;
  --bubble-you: #007aff;
  --bubble-you-ink: #ffffff;
  --bubble-paddock: #e9e9eb;
  --bubble-paddock-ink: #000000;
  --typing-dot: rgba(0, 0, 0, 0.45);
  --composer-bg: #ffffff;
  --composer-border: rgba(58, 10, 0, 0.24);
  --composer-placeholder: #8e8e93;
  --send: #007aff;
  --glow: rgba(183, 110, 0, 0.18);
  --example-bg: #007aff;
  --example-ink: #ffffff;
}

* {
  box-sizing: border-box;
}

/*
  Below the footer, and in the overscroll at the bottom of a phone, the
  window shows the html background. Split it: page ground above, footer
  color below, so the footer never stops short of the bottom edge.
*/
html {
  -webkit-text-size-adjust: 100%;
  background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) 50%, var(--footer-bg) 50%, var(--footer-bg) 100%);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---------- header, shared with paddock.so */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
  padding: 18px 20px 6px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink);
}

.mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: block;
  box-shadow: 0 0 22px var(--glow);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  transition: border-color 160ms ease, transform 120ms ease;
}

.theme-toggle:hover { border-color: var(--border-strong); }
.theme-toggle:active { transform: scale(0.92); }

.theme-toggle svg {
  width: 17px;
  height: 17px;
  stroke: var(--dim);
  fill: none;
  stroke-width: 1.6;
}

.theme-toggle .tt-moon {
  fill: var(--dim);
  stroke: none;
}

html[data-theme="dark"] .tt-moon { display: none; }
html[data-theme="light"] .tt-sun { display: none; }

main {
  flex: 1;
}

/* ---------- hero */

.hero {
  max-width: 760px;
  margin: 0 auto;
  padding: 52px 20px 28px;
}

/* Names the audience in one row; the headline still does the talking. */
.hero-eyebrow {
  margin: 0 0 16px;
}

.hero h1 {
  margin: 0;
  font-size: clamp(46px, 12vw, 104px);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero h1 .accent {
  color: var(--accent);
}

/* The price, stated once, right under the headline. */
.free {
  margin: 22px 0 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--dim);
}

.free-word {
  display: inline-block;
  padding: 3px 12px;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* ---------- the conversation */

.convo {
  margin-top: 40px;
}

/*
  A fixed box: bubbles stack up from the composer the way Messages does,
  and nothing below ever moves. Earlier bubbles rise out of the top under a
  fade rather than hard-stopping on the edge. The side padding keeps the
  tails inside the composer's own width.
*/
.thread {
  list-style: none;
  margin: 0;
  padding: 0 12px;
  height: 250px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 64px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 64px);
}

.msg {
  position: relative;
  max-width: 78%;
  padding: 11px 16px 12px;
  border-radius: 20px;
  font-size: 18px;
  line-height: 1.32;
  word-wrap: break-word;
  animation: land 320ms cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
  transform-origin: bottom;
}

.msg-you {
  align-self: flex-end;
  background: var(--bubble-you);
  color: var(--bubble-you-ink);
  border-bottom-right-radius: 6px;
}

.msg-paddock {
  align-self: flex-start;
  background: var(--bubble-paddock);
  color: var(--bubble-paddock-ink);
  border-bottom-left-radius: 6px;
}

/* Tails, the Messages way: a colored blob and a background-colored cutout. */
.msg-you::before,
.msg-paddock::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 18px;
  height: 20px;
}

.msg-you::before {
  right: -7px;
  background: var(--bubble-you);
  border-bottom-left-radius: 16px 14px;
}

.msg-paddock::before {
  left: -7px;
  background: var(--bubble-paddock);
  border-bottom-right-radius: 16px 14px;
}

.msg-you::after,
.msg-paddock::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 20px;
  background: var(--bg);
}

.msg-you::after {
  right: -10px;
  border-bottom-left-radius: 10px;
}

.msg-paddock::after {
  left: -10px;
  border-bottom-right-radius: 10px;
}

@keyframes land {
  from { opacity: 0; transform: translateY(12px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Typing indicator: Paddock's gray bubble with three breathing dots. */
.typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 15px 17px;
  min-width: 66px;
}

.typing span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--typing-dot);
  animation: breathe 1.3s ease-in-out infinite;
}

.typing span:nth-child(2) { animation-delay: 0.18s; }
.typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes breathe {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* The composer: Messages' input bar, for real. */
.composer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 0;
  padding: 4px 4px 4px 6px;
  min-height: 48px;
  border-radius: 999px;
  background: var(--composer-bg);
  border: 1px solid var(--composer-border);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.composer:focus-within {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 4px var(--glow);
}

.composer-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  line-height: 1.2;
}

.composer-input::placeholder {
  color: var(--composer-placeholder);
}

.composer-input:focus-visible {
  outline: none;
}

.send {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: var(--send);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.send svg {
  width: 20px;
  height: 20px;
}

.send:active {
  transform: scale(0.94);
}

.subhead {
  margin: 34px 0 0;
  max-width: 34em;
  font-size: 19px;
  line-height: 1.45;
  color: var(--dim);
  text-wrap: pretty;
}


/* ---------- examples: the visitor's own words, blue, right, that send themselves */

.examples {
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 20px 52px;
}

.examples-title {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}

.example-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  padding: 0 12px;
}

.example {
  position: relative;
  display: inline-block;
  max-width: 88%;
  padding: 11px 16px 12px;
  border-radius: 20px;
  border-bottom-right-radius: 6px;
  background: var(--example-bg);
  color: var(--example-ink);
  font-size: 18px;
  line-height: 1.32;
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 160ms ease;
}

.example::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: -7px;
  width: 18px;
  height: 20px;
  background: var(--example-bg);
  border-bottom-left-radius: 16px 14px;
}

.example::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -10px;
  width: 10px;
  height: 20px;
  background: var(--bg);
  border-bottom-left-radius: 10px;
}

.example:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px var(--glow);
}

/* ---------- the flag, once, as a rule */

.flag-rule {
  display: flex;
  height: 4px;
  max-width: 1120px;
  margin: 0 auto;
}

.flag-rule span { flex: 1; }
.flag-rule span:nth-child(1) { background: #8c002d; }
.flag-rule span:nth-child(2) { background: #ce3c3c; }
.flag-rule span:nth-child(3) { background: #ff7c52; }
.flag-rule span:nth-child(4) { background: #fec262; }
.flag-rule span:nth-child(5) { background: #520100; outline: 1px solid var(--border); }

/* ---------- sections */

.band {
  padding: 64px 20px;
}

.band + .band {
  border-top: 1px solid var(--border);
}

.band-inner {
  max-width: 760px;
  margin: 0 auto;
}

.eyebrow {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow-gold { color: var(--accent); }
.eyebrow-orange { color: var(--orange); }
.eyebrow-red { color: var(--red); }

.band h2 {
  margin: 0;
  font-size: clamp(32px, 6vw, 52px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Checkmarked bullets, one line each. */
.checks {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.checks li {
  position: relative;
  padding-left: 36px;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink);
}

/* A filled circle, and the check drawn on it in the page's own ground color. */
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
}

.checks li::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  width: 5px;
  height: 11px;
  border-right: 2.5px solid var(--bg);
  border-bottom: 2.5px solid var(--bg);
  transform: rotate(45deg);
}

#couples .checks li::before { background: var(--red); }

/* Numbered steps, for the section that is a sequence. */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 44px;
  font-size: 19px;
  line-height: 1.4;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--orange);
  color: #2a0a00;
  font-size: 15px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* One statistic per section, the one that points at the button. */
.stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 30px;
  padding: 22px 22px 18px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.stat .figure {
  font-size: 30px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stat p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--dim);
}

.stat .source {
  font-size: 13px;
  line-height: 1.4;
  color: var(--mute);
  text-decoration: none;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.stat .source:hover { color: var(--accent); }

/* A source on a bullet, quiet. */
.source-inline {
  font-size: 13px;
  color: var(--mute);
  text-decoration: none;
  white-space: nowrap;
}

.source-inline:hover { color: var(--accent); }

#adults .stat { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
#coaches .stat { border-color: color-mix(in srgb, var(--orange) 30%, transparent); }
#couples .stat { border-color: color-mix(in srgb, var(--red) 32%, transparent); }

.section-cta {
  margin: 28px 0 0;
}

.cta-link,
.cta-btn {
  display: inline-block;
  padding: 14px 22px;
  border-radius: 999px;
  border: 0;
  background: var(--send);
  color: #ffffff;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.cta-link:hover,
.cta-btn:hover:not(:disabled) { filter: brightness(1.08); }

.cta-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cta-btn {
  white-space: nowrap;
}

/* Group chat: the other person's number, then the button. */
.group-form {
  margin-top: 28px;
}

.group-label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--dim);
}

.group-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.group-input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--composer-border);
  background: var(--composer-bg);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
}

.group-input::placeholder {
  color: var(--composer-placeholder);
}

.group-input:focus-visible {
  outline: 3px solid var(--send);
  outline-offset: 2px;
  border-radius: 999px;
}

.group-note {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--red);
}

/* ---------- footer */

footer {
  background: var(--footer-bg);
  color: var(--footer-ink);
  border-top: 4px solid var(--burgundy);
  padding: 34px 20px calc(44px + env(safe-area-inset-bottom, 0px));
  font-size: 14px;
  line-height: 1.6;
}

.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.footer-title {
  font-weight: 700;
  margin-bottom: 6px;
  color: #fff;
}

footer a {
  color: var(--footer-ink);
  text-decoration: none;
}

footer a:hover { color: #fec262; }

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ---------- motion and size */

@media (prefers-reduced-motion: reduce) {
  .msg { animation: none; }
  .typing span { animation: none; }
  .theme-toggle, .composer, .example { transition: none; }
}

@media (max-width: 480px) {
  .hero { padding-top: 34px; }
  .msg, .example { max-width: 86%; }
  .band { padding: 48px 18px; }
}

@media (min-width: 900px) {
  .msg, .example, .composer-input { font-size: 20px; }
  .thread { height: 230px; }
}