/* The public landing page (18 Sep 2026, TG 3417; rebranded the same day,
 * TG 3420).
 *
 * style.css owns the palette and the button shapes for the whole site, and
 * its `.brand` block is the app's own navy and gold, the icon that shipped in
 * 3.6.0+49. <body class="brand"> is what turns it on. This file is the
 * landing page's layout only, so the page reads as the same product as the
 * app on the phone.
 *
 * NO INLINE STYLE ANYWHERE. The site's Content-Security-Policy has
 * style-src 'self' with no 'unsafe-inline', so a `style=""` attribute or a
 * `<style>` block is dropped by the browser and the page loses its layout.
 * Everything here is a class.
 */

.landing {
  margin: 0 auto;
  max-width: 900px;
  padding: 0 20px calc(64px + env(safe-area-inset-bottom, 0px));
}

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

/* The hero is the icon blown up to page size: the same navy gradient, the
   same gold. It is navy in both themes, because the icon is, so everything
   sitting on it carries its own light colours instead of the page tokens
   (those flip with the theme and would go dark on a dark panel).
   #1B2340 and #616C8B are the two ends of the icon's own fitted gradient;
   the pale text is that light end lifted 60% toward white. */
.hero {
  margin: 20px 0 0;
  padding: calc(52px + env(safe-area-inset-top, 0px)) 24px 44px;
  border-radius: 28px;
  background: linear-gradient(210deg, #616C8B 0%, #3E4765 42%, #1B2340 100%);
  color: #F7F3EB;
  text-align: center;
}

.hero .mark {
  width: 96px;
  height: 96px;
  margin: 0 auto 22px;
}

.hero h1 {
  font-size: 44px;
  line-height: 1.06;
  letter-spacing: -.025em;
  color: #F7F3EB;
}

.hero .say {
  margin: 16px auto 0;
  max-width: 34ch;
  font-size: 18px;
  line-height: 1.45;
  color: #C0C4D1;
}

.hero .say strong { color: #F7F3EB; font-weight: 700; }

/* ------------------------------------------------------------------- cta */

.cta {
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.cta .btn {
  min-width: 280px;
  text-align: center;
  text-decoration: none;
}

.cta .note {
  max-width: 40ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--faint);
  text-align: center;
}

/* Inside the navy hero the note has to read off the gradient, not off the
   page. */
.hero .cta .note { color: #C0C4D1; }

/* --------------------------------------------------------------- section */

.band { padding: 44px 0 0; }

.band > h2 {
  margin-bottom: 14px;
  text-align: center;
}

.band > .intro {
  margin: 0 auto 20px;
  max-width: 52ch;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

/* ----------------------------------------------------------------- cards */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 14px;
}

.tile {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}

.tile h3 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: 7px;
}

.tile p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.tile .tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--gold-bg);
  color: var(--gold-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ list */

.steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.steps li {
  counter-increment: step;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 20px 18px 58px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 18px;
  top: 17px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green);
  color: var(--on-green);
  font-size: 13px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.steps li strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 4px;
}

/* --------------------------------------------------------------- sources */

.sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.sources li {
  background: var(--inset);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.sources li b {
  color: var(--ink);
  font-weight: 800;
}

/* ---------------------------------------------------------------- honest */

.plain {
  margin-top: 16px;
  background: var(--inset);
  border-radius: var(--radius);
  padding: 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.plain p + p { margin-top: 10px; }
.plain b { color: var(--ink); font-weight: 800; }

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

.foot-band {
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  text-align: center;
  color: var(--faint);
  font-size: 13px;
  line-height: 1.7;
}

.foot-band a { color: var(--green-ink); font-weight: 700; }
.foot-band p + p { margin-top: 8px; }

/* --------------------------------------------------------------- narrow */

@media (max-width: 460px) {
  .hero {
    margin-top: 12px;
    padding: calc(38px + env(safe-area-inset-top, 0px)) 18px 34px;
    border-radius: 24px;
  }
  .hero .mark { width: 78px; height: 78px; margin-bottom: 18px; }
  .hero h1 { font-size: 33px; }
  .hero .say { font-size: 16px; }
  .cta .btn { min-width: 0; width: 100%; }
  .landing { padding-left: 16px; padding-right: 16px; }
}