:root {
  --brand-anchor: #1b2236;
  --brand-spark: #f0b429;
  --brand-spark-pressed: #d79b0f;
  --brand-spark-tint: #fbf1d3;
  --focus-ring: rgba(240, 180, 41, 0.45);
  --surface-paper: #faf7f0;
  --surface-card: #ffffff;
  --border-subtle: #e6dfd3;
  --text-primary: #1f2328;
  --text-secondary: #5c5856;
  --max: 62rem;
  --measure: 34em;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--surface-paper);
  color: var(--text-primary);
  line-height: 1.6;
}

.shell {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.shell.narrow {
  max-width: 40rem;
}

.skip-link {
  position: absolute;
  left: -10000px;
  top: 0;
  background: var(--brand-anchor);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0 0 8px 0;
  z-index: 10;
}

.skip-link:focus {
  left: 0;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.site-header {
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-paper);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* The status pill is nowrap by design, so a non-wrapping row overflows the
     viewport at 320px once the root font-size is bumped (Chrome's "Large"
     text setting renders this page at a 20px root, not 16px). */
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--brand-anchor);
  text-decoration: none;
}

.brand img {
  border-radius: 8px;
}

.status-pill {
  background: var(--brand-spark-tint);
  border: 1px solid var(--brand-spark);
  color: var(--brand-anchor);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  white-space: nowrap;
}

.hero {
  padding: 4rem 0 3rem;
  text-align: center;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand-anchor);
  margin: 0 0 0.75rem;
}

/* `text-wrap: balance` is what keeps the headline off a one-word last line.
   Without it "Every answer sparks the next why." strands "why." on its own row
   at almost every width, because the type scales with the viewport while the
   shell is capped at 960px. Balanced, it reads as the intended two-line lockup
   ("Every answer sparks" / "the next why.") and collapses to one line when it
   genuinely fits. Browsers without support fall back to normal wrapping. */
/* One continuous curve, no breakpoint. 4.6vw keeps the headline on a single
   row from ~640px up (measured at both a 16px and a 20px root); the 1.5rem
   floor is what phones actually get, and it is deliberately low enough that
   375px wraps to two rows rather than three. A higher floor looked fine on a
   laptop and pushed phones to three rows. */
h1 {
  font-size: clamp(1.5rem, 4.6vw, 3.4rem);
  line-height: 1.1;
  margin: 0 0 1rem;
  color: var(--brand-anchor);
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1.2;
  margin: 0 0 0.75rem;
  color: var(--brand-anchor);
  text-wrap: balance;
}

h3 {
  text-wrap: balance;
}

/* Body copy gets `pretty` instead: it keeps last-line orphans out without
   re-balancing every line of a paragraph. */
.hero-copy,
.section-lede,
.card p,
.steps p,
.turn {
  text-wrap: pretty;
}

.hero-copy,
.section-lede {
  font-size: 1.1rem;
  color: var(--text-secondary);
  /* `em` measures against this element's own size, so the line length stays a
     readable ~60-70 characters whatever the reader's root font-size is. A
     fixed 620px turned a three-sentence lede into four short rows the moment
     the root went from 16px to 20px. */
  max-width: var(--measure);
  margin: 0 auto 1.5rem;
}

/* Two all-caps lines stacked above the headline compete with each other, so
   the hero's category line drops the caps treatment and lets the safety line
   own that slot. Section eyebrows elsewhere keep the uppercase style. */
.hero .eyebrow {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 1.4rem;
}

/* The safety half of the promise sits directly above the headline and stays
   deliberately small: the curiosity line is the largest thing on the page, and
   inverting that turns the hero into a defence of the category. */
.hero-safety {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 0 0 0.85rem;
}

.hero-status {
  margin: 1.5rem 0 0.9rem;
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.trust-strip {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem 0.9rem;
  padding: 0;
  margin: 0;
  color: var(--brand-anchor);
  font-size: 0.95rem;
  font-weight: 600;
}

.trust-strip li + li::before {
  content: "·";
  color: var(--brand-spark);
  font-weight: 700;
  margin-right: 0.9rem;
}

/* Once the strip wraps, a mid-dot would open a line. Stack instead. */
@media (max-width: 479px) {
  .trust-strip {
    flex-direction: column;
    gap: 0.3rem;
  }

  .trust-strip li + li::before {
    content: none;
  }
}

.actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.button {
  display: inline-block;
  border-radius: 999px;
  padding: 0.7rem 1.6rem;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
}

.button.primary {
  background: var(--brand-spark);
  color: var(--brand-anchor);
}

.button.primary:hover {
  background: var(--brand-spark-pressed);
}

.button.ghost {
  color: var(--brand-anchor);
  border-color: var(--border-subtle);
  background: transparent;
}

.button.ghost:hover {
  border-color: var(--brand-anchor);
}

.button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.mantra {
  background: var(--brand-anchor);
  color: #fff;
  text-align: center;
  padding: 1.4rem 1.25rem;
}

.mantra p {
  margin: 0;
  font-size: clamp(1rem, 2.6vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.section {
  padding: 3.5rem 0;
}

.section-header {
  text-align: center;
  margin-bottom: 2rem;
}

/* A three-item row has only two honest states: 1-up or 3-up. `auto-fit` gave
   a 2+1 orphan across the whole tablet range (600-860px), which reads as a
   broken layout rather than a deliberate one. */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 860px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

.card .stripe {
  display: block;
  width: 2.5rem;
  height: 4px;
  border-radius: 2px;
  background: var(--brand-spark);
  margin-bottom: 1rem;
}

.card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  color: var(--brand-anchor);
}

.card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.97rem;
}

.signup {
  background: var(--surface-card);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  text-align: center;
}

.signup form {
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
}

.field {
  margin-bottom: 1rem;
}

.field label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
  color: var(--brand-anchor);
}

.field .optional {
  font-weight: 400;
  color: var(--text-secondary);
}

.field input,
.field select {
  width: 100%;
  padding: 0.65rem 0.8rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}

.signup .button {
  width: 100%;
  margin-top: 0.25rem;
}

.form-note {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-top: 1rem;
  text-align: center;
}

.form-note a,
.site-footer a {
  color: var(--brand-anchor);
}

.site-footer {
  padding: 1.5rem 0 2rem;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.footer-row p {
  margin: 0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
}

.footer-note {
  margin: 0.75rem 0 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* --- How it works ------------------------------------------------------- */

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

@media (min-width: 860px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--brand-spark-tint);
  border: 1px solid var(--brand-spark);
  color: var(--brand-anchor);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.85rem;
}

.steps h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  color: var(--brand-anchor);
}

.steps p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.97rem;
}

/* --- The curiosity loop ------------------------------------------------- */

.loop {
  background: var(--surface-card);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.exchange {
  margin: 0;
  background: var(--surface-paper);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 1.5rem;
}

.exchange figcaption {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.turn {
  margin: 0 0 1rem;
  color: var(--text-primary);
  font-size: 1rem;
}

.turn:last-child {
  margin-bottom: 0;
}

.turn .who {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-anchor);
  margin-bottom: 0.2rem;
}

.turn.device {
  border-left: 3px solid var(--brand-spark);
  padding-left: 0.9rem;
}

.turn.next {
  color: var(--text-secondary);
  font-size: 0.95rem;
  border-top: 1px solid var(--border-subtle);
  padding-top: 1rem;
}

.legal .section-lede {
  margin-bottom: 2rem;
}

.legal h2 {
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  margin: 2.25rem 0 0.65rem;
}

.legal p {
  color: var(--text-secondary);
  line-height: 1.65;
}

.legal ul {
  color: var(--text-secondary);
  line-height: 1.65;
  padding-left: 1.15rem;
}

.legal li {
  margin-bottom: 0.4rem;
}

.legal strong {
  color: var(--text-primary);
}

.legal a {
  color: var(--brand-anchor);
}

.legal .actions {
  margin-top: 2.5rem;
}