/*
 * Burn Time for Brands — public landing page (app/views/landing/show.html.erb).
 *
 * Scoped under .page-landing / .landing so nothing here can reach a signed-in
 * dashboard surface (the header's own "Log in" button is .site-nav__cta in
 * application.css, since it shows on every signed-out page). It adds no colour
 * of its own: every value is a semantic token from tokens.css. The only
 * departure from the dashboard is typography —
 * the landing page sets the app-referenced serif pair (--font-display,
 * --font-text) instead of the UI sans stack, recorded in docs/brand-system.md §7.
 *
 * Layout rule: the shared .page wrapper is replaced by full-bleed bands
 * (.band) each holding one centred .band__inner, so the page can alternate
 * surfaces without any element overflowing the viewport.
 */

/* ---- Page-level typography and shell ---------------------------------- */
.page-landing {
  font-family: var(--font-text);
  font-size: 1.0625rem;        /* Abhaya Libre runs small next to Inter */
  line-height: 1.65;
}
.page-landing h1,
.page-landing h2,
.page-landing h3,
.page-landing .btn,
.page-landing button,
.page-landing input[type="submit"] {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  letter-spacing: 0.005em;
}
/* The shell's nav and brand descriptor join the landing voice so the page
   does not mix two type systems above and below the header rule. */
.page-landing .site-nav__link,
.page-landing .brand-lockup__descriptor {
  font-family: var(--font-text);
  font-size: var(--text-md);
}
.page-landing .site-header { border-bottom-color: var(--color-border-soft); }

.landing { display: block; }
/* Serif body copy wants a little more air between paragraphs than the sans
   dashboard does. This default carries a type selector, so every component
   rule below that sets a paragraph margin is type-qualified too (p.band__lede,
   not .band__lede) — otherwise this rule would quietly win. */
.landing p { margin: 0 0 var(--space-4); }
.landing p:last-child { margin-bottom: 0; }

/* ---- Bands ------------------------------------------------------------- */
.band {
  border-bottom: var(--border-width) solid var(--color-border-soft);
  padding: var(--space-7) 0;
}
.band:last-of-type { border-bottom: 0; }
.band--surface { background: var(--color-surface); }
.band--muted { background: var(--color-surface-muted); }
.band__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Section headers: an eyebrow label, a display heading, one lede line. */
p.band__eyebrow {
  margin: 0 0 var(--space-4);
  font-family: var(--font-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-link);
}
.band__title {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  max-width: 30ch;
  /* The eyebrow immediately above sets the gap; drop the global h2 top margin. */
  margin: 0 0 var(--space-4);
}
p.band__lede {
  max-width: 62ch;
  margin-bottom: var(--space-6);
  font-size: 1.125rem;
  color: var(--color-text);
}
/* A lead-out line under a band's content. The sage rule on its own edge marks
   it as a conclusion for the whole band, not a footnote on the last column. */
p.band__note {
  margin-top: var(--space-6);
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-action-bg);
  font-size: 1.125rem;
  color: var(--color-text-strong);
  max-width: 70ch;
}

/* ---- Hero -------------------------------------------------------------- */
.hero {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
  /* A single soft sage wash, not a full-width gradient: it reads as the app's
     cream page with one lit corner. */
  background-image: radial-gradient(60rem 28rem at 88% -8%, rgb(169 193 163 / 0.35), transparent 70%);
}
.hero__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}
.hero h1 {
  font-size: clamp(2.25rem, 5.4vw, 3.75rem);
  line-height: 1.1;
  margin-bottom: var(--space-4);
  max-width: 22ch;
}
p.hero__lede {
  font-size: 1.25rem;
  max-width: 54ch;
  margin-bottom: var(--space-5);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.hero__actions .btn { font-size: 1.125rem; min-height: 3.25rem; }
p.hero__meta {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Hero side panel: what the evidence is, before any claim about it. */
.evidence-card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-soft);
  border-top: 4px solid var(--color-action-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}
.evidence-card h2 {
  /* As with .band__title: no global h2 top margin inside a card. */
  margin: 0 0 var(--space-4);
  font-size: var(--text-md);
  font-family: var(--font-text);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.evidence-card dl {
  margin: 0;
  display: grid;
  gap: var(--space-4);
}
.evidence-card dt {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-link);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.evidence-card dd {
  margin: var(--space-1) 0 0;
  color: var(--color-text-strong);
}

/* ---- Prose lists (the blind-spot band) --------------------------------- */
.reason-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-5);
}
.reason-list > li {
  border-top: 2px solid var(--color-action-bg);
  padding-top: var(--space-4);
}
.reason-list h3 {
  font-size: 1.375rem;
  margin-bottom: var(--space-2);
}
.reason-list p { margin: 0; color: var(--color-text); }

/* ---- Pillars ----------------------------------------------------------- */
.pillar-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--space-5);
}
.pillar {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}
.pillar__index {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--color-brand);
  margin-bottom: var(--space-2);
}
.pillar h3 {
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
}
/* The producer question in the producer's own words, set as a quotation. */
.pillar__question {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-action-bg);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--color-text-strong);
}
p.pillar__label {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.pillar__reads {
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}
.pillar__reads > li {
  padding-left: var(--space-4);
  margin-bottom: var(--space-2);
  position: relative;
}
/* A text glyph, not colour, marks each item (brand-system.md §4). */
.pillar__reads > li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--color-brand);
}
.pillar__decision {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border-soft);
}
.pillar__decision p.pillar__label { color: var(--color-link); }
.pillar__decision p {
  margin: 0;
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}

/* ---- Numbered steps ---------------------------------------------------- */
.step-list {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-5);
}
.step-list > li {
  counter-increment: step;
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.band--surface .step-list > li { background: var(--color-bg); }
.step-list > li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--color-brand);
  margin-bottom: var(--space-3);
}
.step-list h3 { font-size: 1.25rem; margin-bottom: var(--space-2); }
.step-list p { margin: 0; font-size: var(--text-sm); }

/* ---- Rules we keep (trust band) ---------------------------------------- */
.rule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--space-5) var(--space-6);
}
.rule-list > li {
  padding-left: var(--space-5);
  position: relative;
}
.rule-list > li::before {
  content: "\2713";                     /* check glyph: never colour alone */
  position: absolute;
  left: 0;
  top: 0;
  font-weight: var(--weight-bold);
  color: var(--color-success-text);
}
.rule-list h3 { font-size: 1.125rem; margin-bottom: var(--space-1); }
.rule-list p { margin: 0; font-size: var(--text-sm); }

/* ---- Today / planned columns ------------------------------------------- */
.scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--space-5);
}
.scope {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}
.scope--planned { background: var(--color-warn-bg); border-color: var(--color-warn-line); }
.scope h3 { font-size: 1.375rem; margin: 0 0 var(--space-2); }
.scope ul { margin: var(--space-4) 0 0; padding-left: var(--space-5); font-size: var(--text-sm); }
.scope li { margin-bottom: var(--space-2); }
.scope--planned ul { color: var(--color-warn-text); }

/* ---- Closing call to action -------------------------------------------- */
.closing {
  background: var(--color-action-bg);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}
.closing h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  color: var(--color-action-text);
  margin: 0 0 var(--space-3);
  max-width: 24ch;
}
.closing p { color: var(--bt-forest-deep); }
.closing .btn {
  background: var(--color-surface);
  border-color: var(--bt-forest);
  color: var(--color-text-strong);
  font-size: 1.125rem;
  min-height: 3.25rem;
}
.closing .btn:hover { background: var(--color-bg); color: var(--color-text-strong); }
.closing__access {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.closing__access h3 { font-size: 1.125rem; margin-bottom: var(--space-2); }
.closing__access p { color: var(--color-text); font-size: var(--text-sm); }

/* ---- Footer ------------------------------------------------------------ */
.landing-footer {
  background: var(--color-bg);
  border-top: var(--border-width) solid var(--color-border);
  padding: var(--space-6) 0 var(--space-7);
}
.landing-footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-5) var(--space-6);
  align-items: start;
}
.landing-footer__logo { width: 7.5rem; height: auto; aspect-ratio: 298 / 206; display: block; }
.landing-footer p { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 72ch; }
.landing-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
}

/* ---- Narrow viewports --------------------------------------------------- */
@media (max-width: 60rem) {
  .hero__inner,
  .closing,
  .landing-footer__inner { grid-template-columns: minmax(0, 1fr); }
  .hero { background-image: radial-gradient(28rem 18rem at 100% -10%, rgb(169 193 163 / 0.3), transparent 70%); }
}

@media (max-width: 40rem) {
  .band, .hero { padding: var(--space-6) 0; }
  .hero__actions { display: grid; }
  .hero__actions .btn { width: 100%; }
  .closing { padding: var(--space-5); border-radius: var(--radius-lg); }
  .closing .btn { width: 100%; }
}