/* Signed-out home page. The hero reuses the sign-up page's "stage" (.signup in
   indicator_and_scout.css: pale green panel, wave, form card), so the two pages
   read as one family. Below it: full sections for the portfolios, the Congress
   leaderboard and the funds, a small strip of links, and a closing sign-up. The
   watch chips keep their base rules in homepage_dashboard.css. */

/* One 1080px column for every section. --shell-max is 2400px site-wide, so the
   page sets its own limit, and the inner sections drop their own side gutters
   so every card edge lines up. */
.home-landing {
  /* The home page palette (picked in the color picker): one green family for
     the hero and every section. */
  --c-headline: #40a635;
  --c-hero-btn: #34862a;
  --c-hero-btn-hover: #296b21;
  --c-section-btn: #34862a;
  --c-section-btn-hover: #296b21;
  --c-link: #326e2b;
  --c-eyebrow: #326e2b;
  --c-stage-bg: #f8fcf8;
  --c-stage-wave: #ddf1da;
  --c-wash: #edf9ec;
  --c-wash-border: #c6e4c3;
  --c-wash-wave: #dbf0d8;
  --c-strip: #edf9ec;
  --c-closing: #e4f5e2;
  --c-chip-bg: #e8f6e7;
  --c-chip-border: #57be4b;
  --c-buy-bg: #ddf3db;
  --c-buy-text: #276520;
  --c-sell-bg: #fde6e2;
  --c-sell-text: #a8322a;
  --c-page: #fff;
  --c-card: #fff;
  --c-ink: #0b1a14;

  /* Dark theme keeps the site palette for the sections. */
  --wash: color-mix(in srgb, var(--accent) 9%, var(--bg));
  --wash-line: color-mix(in srgb, var(--accent) 22%, var(--bg));
  --wash-wave: color-mix(in srgb, var(--accent) 18%, transparent);
  --wash-head: var(--accent);
  --wash-strong: color-mix(in srgb, var(--accent) 12%, var(--bg));

  width: 100%;
  max-width: calc(1080px + 2rem);
  margin-inline: auto;
  padding-inline: 1rem;
  box-sizing: border-box;
}

/* ---- Hero: the sign-up stage. ---- */

/* The stage is light in every theme and carries its own palette (--su-*), so
   the page tokens the form and chips read are pointed at it here. */
.home-hero {
  --su-bg: var(--c-stage-bg);
  --su-green-wash: var(--c-stage-wave);
  --su-ink: var(--c-ink);
  --ink: var(--su-ink);
  --ink-soft: #3d4a40;
  --ink-mute: var(--su-mute);
  --muted: var(--su-mute);
  --text: var(--su-ink);
  --panel: var(--c-card);
  --surface: var(--c-card);
  --surface-inset: var(--su-bg);
  --border: var(--su-line);
  --hairline: var(--su-line);
  --hairline-strong: var(--su-line);
  --accent: var(--c-link);
  --link: var(--c-link);
  --btn-bg: var(--c-hero-btn);
  --btn-hover-bg: var(--c-hero-btn-hover);
  --btn-ink: #fff;

  max-width: none;
  margin: 0 0 1.5rem;
  /* Just enough room under the content to clear the wave; the sign-up page's
     own 8rem leaves a gap here. */
  padding-bottom: 5rem;
  /* Markup order is the phone order: intro, card, benefits, explore. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "intro"
    "card"
    "proof"
    "links";
  gap: 1.4rem;
}

.home-hero__intro { grid-area: intro; }
.home-hero .home-hero__card { grid-area: card; order: 0; }
.home-hero__proof { grid-area: proof; }
.home-hero__links { grid-area: links; }

@media (min-width: 860px) {
  .home-hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    grid-template-areas:
      "intro card"
      "proof card"
      "links card";
    grid-template-rows: auto auto 1fr;
    column-gap: 3.5rem;
    padding-bottom: 5rem;
  }
}

.home-hero .signup__headline {
  font-size: clamp(2rem, 3.4vw, 2.7rem);
}

.home-hero__pitch {
  margin: 0;
  max-width: 32rem;
  color: var(--su-mute);
  font-size: 1.02rem;
  line-height: 1.5;
}

.home-hero__intro,
.home-hero__proof,
.home-hero__links {
  min-width: 0;
}

/* The real alert email, the proof that comes before the first scroll. */
.home-hero__proof {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
}

.home-hero .home-hero__proof-image {
  margin: 0;
  max-width: 34rem;
  border: 1px solid var(--su-line);
  box-shadow: 0 10px 30px rgba(20, 40, 20, 0.1);
}

.home-hero__proof figcaption {
  color: var(--su-mute);
  font-size: 0.85rem;
}

.home-hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  font-size: 0.92rem;
}

.home-hero__links a {
  color: var(--su-green-deep);
  font-weight: 700;
}

/* The form card is the stage's .signup__panel. */
.home-hero__card {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-width: 0;
  max-width: none;
  margin: 0;
}

.home-hero__card-title {
  margin: 0;
  color: var(--su-ink);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.home-hero__card .watch-signup__label,
.home-hero__card .watch-signup__note {
  text-align: left;
}

.home-hero .signup__headline-accent {
  color: var(--c-headline);
}

.home-hero__card .watch-chips {
  justify-content: flex-start;
}

.home-hero__card .watch-signup__more {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: left;
}

.home-hero__card .watch-signup__more summary {
  color: var(--c-link);
}

.home-hero__card .watch-signup__more .watch-chips {
  margin: 0.6rem 0 0;
}

.home-hero__card .watch-signup__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--su-line);
  border-radius: 12px;
  background: var(--su-bg);
  color: var(--su-ink);
}

.home-hero__card .watch-signup__more .watch-signup__input {
  margin-top: 0.6rem;
}

.home-hero__card .watch-signup__input:focus {
  outline: 2px solid color-mix(in srgb, var(--c-chip-border) 55%, transparent);
  outline-offset: 1px;
}

.watch-signup__email-label {
  margin-bottom: -0.4rem;
  color: var(--su-mute);
  font-size: 0.85rem;
}

.home-hero__card .watch-signup__submit {
  padding: 0.85rem 1rem;
  border-radius: 12px;
  font-size: 1rem;
  box-shadow: 0 6px 16px rgba(46, 139, 60, 0.28);
}

.home-hero__card .watch-signup__submit:hover {
  background: var(--btn-hover-bg);
}

.home-hero__card .watch-chip__face {
  border-color: var(--su-line);
  color: var(--su-ink);
}

.home-hero__card .watch-chip__box:checked + .watch-chip .watch-chip__face {
  border-color: var(--c-chip-border);
  background: var(--c-chip-bg);
  color: var(--su-ink);
}

.home-hero__card .watch-chip__box:focus-visible + .watch-chip .watch-chip__face,
.home-hero__card .watch-signup__more summary:focus-visible {
  outline: 2px solid var(--c-chip-border);
  outline-offset: 2px;
}

/* The Magnificent Seven as one ticked block, tickers inside it. */
.watch-chips--starter .watch-chip-item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.8rem 0.95rem;
  border: 1.5px solid var(--su-line);
  border-radius: 0.75rem;
}

.watch-chips--starter .watch-chip-item:has(.watch-chip__box:checked) {
  border-color: var(--c-chip-border);
  background: var(--c-chip-bg);
}

.watch-chips--starter .watch-chip-item:has(.watch-chip__box:focus-visible) {
  outline: 2px solid var(--c-chip-border);
  outline-offset: 2px;
}

.home-hero__card .watch-chips--starter .watch-chip__face,
.home-hero__card .watch-chips--starter .watch-chip__box:checked + .watch-chip .watch-chip__face {
  padding: 0;
  border: 0;
  background: none;
  color: var(--su-ink);
  font-size: 1rem;
}

.watch-chips--starter .watch-chip {
  display: block;
}

.watch-chips--starter .watch-chip__list {
  display: block;
  margin: 0.25rem 0 0;
  color: var(--su-mute);
  font-size: 0.8rem;
}

.watch-chips--starter .watch-chip__list strong {
  display: none;
}

/* ---- Below the hero: full sections, a small strip, a closing sign-up. ---- */

/* Text on the left in a white card, the numbers on the right in a quiet green
   one. Text leads: it is the only white box in the row. */
.landing-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  margin: 0 0 3rem;
}

@media (min-width: 52rem) {
  .landing-feature {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 2.75rem;
  }
}

.landing-feature__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  padding: 1.5rem 1.4rem;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: 0 18px 50px rgba(20, 40, 20, 0.13);
}

@media (min-width: 52rem) {
  .landing-feature__text { padding: 1.9rem 2rem; }
}

.landing-feature__eyebrow {
  margin: 0;
  color: var(--c-eyebrow);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.landing-feature h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-wrap: balance;
}

.landing-feature__blurb {
  margin: 0;
  max-width: 34rem;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.5;
}

.landing-feature__button {
  margin-top: 0.4rem;
  padding: 0.85rem 1.5rem;
  border-radius: 12px;
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--btn-bg) 35%, transparent);
}

.landing-feature__button:hover {
  background: var(--btn-hover-bg);
}

.landing-feature__card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 1.1rem 1.25rem 3.3rem;
  border: 1px solid var(--wash-line);
  border-radius: 16px;
  background: var(--wash);
}

/* The sign-up page's wave, along the foot of the card. */
.landing-feature__card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2.4rem;
  background: var(--wash-wave);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0 96 C240 40 420 150 720 96 C1000 46 1200 130 1440 70 L1440 160 L0 160 Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0 96 C240 40 420 150 720 96 C1000 46 1200 130 1440 70 L1440 160 L0 160 Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  pointer-events: none;
}

.landing-feature__card > * {
  position: relative;
  z-index: 1;
}

.landing-feature__card h3 {
  margin: 0 0 0.4rem;
  color: var(--wash-head);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-feature__note {
  margin: 0.6rem 0 0;
  color: var(--ink-mute);
  font-size: 0.78rem;
}

.landing-feature__note a {
  color: var(--link);
  font-weight: 600;
}

.landing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.landing-table th,
.landing-table td {
  padding: 0.5rem 0.3rem;
  border-bottom: 1px solid var(--wash-line);
  color: var(--ink-mute);
  text-align: left;
  vertical-align: baseline;
}

.landing-table th {
  white-space: nowrap;
  color: var(--wash-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-table tr:last-child td { border-bottom: 0; }

.landing-table td:first-child {
  color: var(--ink);
  font-weight: 600;
}

.landing-table td:last-child,
.landing-table th:last-child { text-align: right; }

.landing-table__name {
  color: var(--ink-mute);
  font-size: 0.8rem;
  font-weight: 400;
}

.landing-table td a { color: var(--link); }

.landing-pill {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.landing-pill--buy {
  background: color-mix(in srgb, var(--gain) 20%, transparent);
  color: var(--gain);
}

.landing-pill--sell {
  background: color-mix(in srgb, var(--loss) 20%, transparent);
  color: var(--loss);
}

.landing-pill--hold {
  background: color-mix(in srgb, var(--ink-mute) 18%, transparent);
  color: var(--ink-mute);
}

/* Three small links. */
.landing-strip { margin: 0 0 3rem; }

.landing-strip h2 {
  margin: 0 0 0.9rem;
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 700;
}

.landing-strip ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .landing-strip ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.landing-strip a {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  height: 100%;
  box-sizing: border-box;
  padding: 1rem 1.1rem;
  border: 1px solid var(--wash-line);
  border-radius: 14px;
  background: var(--wash);
  color: inherit;
  text-decoration: none;
}

.landing-strip strong { color: var(--ink); }
.landing-strip span { color: var(--ink-mute); font-size: 0.86rem; line-height: 1.4; }
.landing-strip em { margin-top: auto; padding-top: 0.3rem; color: var(--wash-head); font-size: 0.86rem; font-style: normal; font-weight: 700; }

/* Closing sign-up. */
.landing-close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin: 0 0 1.5rem;
  padding: 1.6rem 1.75rem;
  border-radius: 18px;
  background: var(--wash-strong);
}

.landing-close h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.landing-close p {
  margin: 0.25rem 0 0;
  color: var(--ink-mute);
}

.landing-close__form {
  display: flex;
  flex: 1 1 20rem;
  gap: 0.5rem;
  max-width: 29rem;
}

.landing-close__form input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}

.landing-close__form input[type="submit"] {
  padding: 0.8rem 1.15rem;
  border: 0;
  border-radius: 12px;
  background: var(--btn-bg);
  color: var(--btn-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.landing-close__form input[type="submit"]:hover { background: var(--btn-hover-bg); }

.landing-ask {
  margin: 0 0 2rem;
  color: var(--ink-mute);
  text-align: center;
}

.landing-ask__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Light theme: the sections below the hero take the sign-up page's deeper
   green and cooler borders. Dark keeps the site palette. */
:root[data-theme="light"] .home-landing {
  --accent: var(--c-link);
  --link: var(--c-link);
  --btn-bg: var(--c-section-btn);
  --btn-hover-bg: var(--c-section-btn-hover);
  --btn-ink: #fff;
  --on-accent: #fff;
  --ink: var(--c-ink);
  --panel: var(--c-card);
  --surface: var(--c-card);
  --surface-inset: #f5f8f6;
  --hairline: #dfe7e3;
  --hairline-strong: #dfe7e3;
  --wash: var(--c-wash);
  --wash-line: var(--c-wash-border);
  --wash-wave: var(--c-wash-wave);
  --wash-head: var(--c-link);
  --wash-strong: var(--c-closing);
}

:root[data-theme="light"] .home-landing .landing-strip a { background: var(--c-strip); }

:root[data-theme="light"] .home-landing .landing-pill--buy {
  background: var(--c-buy-bg);
  color: var(--c-buy-text);
}

:root[data-theme="light"] .home-landing .landing-pill--sell {
  background: var(--c-sell-bg);
  color: var(--c-sell-text);
}

:root[data-theme="light"] body:has(.home-hero) { background: var(--c-page, #fff); }