/* ============================================================
   ezpztrader.com — public home (templates/marketing/home.html,
   ECOSYSTEM_REDESIGN.md §9.5): the sections below the product-flow
   hero, story and bento (pages/flow.css, pages/flow-story.css).
   Loaded non-blocking. Builds on the component classes (.sec-head*,
   .card, .pill, .cta-band*) and on pages/showcase.css for the
   Signal Router and the execution log.
   ============================================================ */

@layer page {

/* ---------- shared section rhythm: tighter than the default .section ---------- */

.home-section { padding-block: var(--section-y-tight); }
.home-section--alt { background: var(--sunken); border-block: 1px solid var(--border); }
.home-section [id] { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.home-fine { margin: var(--space-4) auto 0; max-width: 75ch; text-align: center; font-size: var(--text-xs); line-height: var(--leading-relaxed); color: var(--ink-3); }

/* ---------- 4. try it yourself: the Signal Router simulator ---------- */

.home-try { padding-block: 0 var(--section-y-tight); }
.home-try .sr { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

/* ---------- 5. ecosystem: the outer ring turns slowly, icons stay upright ---------- */

@media (prefers-reduced-motion: no-preference) {
  .home-eco .eco-hub-node { animation: home-eco-orbit 90s linear infinite; }
  .home-eco .eco-hub:hover .eco-hub-node { animation-play-state: paused; }
}
@keyframes home-eco-orbit {
  from { transform: rotate(var(--a)) translateY(-38cqw) rotate(calc(var(--a) * -1)); }
  to { transform: rotate(calc(var(--a) + 360deg)) translateY(-38cqw) rotate(calc(var(--a) * -1 - 360deg)); }
}

/* ---------- 6. safety and 7. order controls (.home-controls) ---------- */

.home-controls {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-5) var(--space-6); margin: 0; padding: 0; list-style: none;
}
.home-control { padding-left: var(--space-4); border-left: 2px solid var(--border-brand); }
.home-control p { margin: var(--space-2) 0 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--ink-2); }
.home-control-title { margin: 0; font-size: var(--text-base); font-weight: var(--weight-semi); line-height: var(--leading-heading); color: var(--ink); }
.home-log { margin-top: var(--space-10); }

/* ---------- 8. journal ---------- */

.home-journal { max-width: 52rem; margin-inline: auto; }
@media (min-width: 640px) {
  .home-journal-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-6); }
}

/* ---------- 9. brokers: logo wall ----------
   Two rows of logo chips. With enough brokers (.is-marquee) each row holds
   its list twice and slides by one copy's width, so the loop is seamless;
   the edges fade out, and hover or keyboard focus pauses the row. Reduced
   motion (and a short list) shows still, centred rows instead. */

.home-logos { display: grid; gap: var(--space-3); }
.home-logos-row { display: flex; justify-content: center; min-width: 0; }
.home-logos-track {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3);
  margin: 0; padding: 0; list-style: none;
}
.home-broker {
  display: inline-flex; align-items: center; gap: var(--space-3);
  height: var(--space-14); padding: 0 var(--space-5) 0 var(--space-2);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); box-shadow: var(--shadow-inset);
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.home-broker:hover { border-color: var(--border-brand); background: var(--surface-hover); }
.home-broker:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.home-broker-logo {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--space-10); height: var(--space-10); overflow: hidden; border-radius: var(--radius-pill);
  background: var(--raised); border: 1px solid var(--border);
}
.home-broker-logo img { width: 70%; height: 70%; object-fit: contain; }
/* no logo uploaded: a brand-tinted monogram tile, same size as a logo tile */
.home-broker-logo--mono {
  background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 22%, var(--surface)), color-mix(in srgb, var(--action) 10%, var(--surface)));
  border-color: var(--border-brand);
  font: var(--weight-semi) var(--text-sm) / 1 var(--font-display); letter-spacing: -0.02em; color: var(--action-ink);
}
.home-broker:hover .home-broker-logo--mono { border-color: var(--brand); }
.home-broker-name { font-weight: var(--weight-semi); }
.home-logos-cta { display: flex; justify-content: center; margin-top: var(--space-8); }

@media (prefers-reduced-motion: no-preference) {
  .home-logos.is-marquee .home-logos-row {
    justify-content: flex-start; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink) 10%, var(--ink) 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, var(--ink) 10%, var(--ink) 90%, transparent);
  }
  .home-logos.is-marquee .home-logos-track {
    flex: none; flex-wrap: nowrap; padding-right: var(--space-3);
    animation: home-logos-slide calc(var(--n) * 3.2s) linear infinite;
  }
  .home-logos.is-marquee .home-logos-row.is-reverse .home-logos-track { animation-direction: reverse; }
  .home-logos.is-marquee .home-logos-row:hover .home-logos-track,
  .home-logos.is-marquee .home-logos-row:focus-within .home-logos-track { animation-play-state: paused; }
  .home-broker { transition: border-color var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-out); }
}
@keyframes home-logos-slide { to { transform: translateX(-100%); } }
/* still rows: the duplicate track is only there for the loop */
@media (prefers-reduced-motion: reduce) {
  .home-logos-track[aria-hidden="true"] { display: none; }
}
/* filter chips (static/js/pages/home-brokers.js): any chip but "All" drops
   .is-marquee, so only the matching chips show, still and centred */
.home-broker-filters { justify-content: center; gap: var(--space-2); margin-bottom: var(--space-6); }
.home-broker-filter-count {
  margin-left: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-3);
}
.filter-pill.is-active .home-broker-filter-count { color: var(--action-ink); }
.home-broker-filters[hidden], .home-logos-row[hidden], .home-logos-track > li[hidden],
.home-logos.is-filtered .home-logos-track[aria-hidden="true"] { display: none; }

/* ---------- 11. pricing teaser: as many columns as there are plans ---------- */

.home-plans {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-4); margin: 0; padding: 0; list-style: none;
}
.home-plan { display: flex; flex-direction: column; }
.home-plan.is-popular { border-color: var(--border-brand); box-shadow: var(--shadow-1); }
.home-plan-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.home-plan-name { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semi); line-height: var(--leading-heading); color: var(--ink); }
.home-plan-price { margin: var(--space-4) 0 0; color: var(--ink-3); font-size: var(--text-sm); }
.home-plan-amount { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-semi); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.home-plan-billing { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--ink-3); }
.home-plan-specs { display: grid; gap: var(--space-2); margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border); }
.home-plan-specs div { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); }
.home-plan-specs dt { color: var(--ink-3); }
.home-plan-specs dd { margin: 0; color: var(--ink); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }

/* ---------- 12. honest fit ---------- */

.home-fit { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.home-fit-title { margin: 0 0 var(--space-3); font-size: var(--text-lg); font-weight: var(--weight-semi); line-height: var(--leading-heading); color: var(--ink); }
.home-fit-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.home-fit-list li { position: relative; padding-left: var(--space-6); color: var(--ink-2); }
.home-fit-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--ok);
}
.home-fit-card--skip .home-fit-list li::before { background: var(--neutral); }

/* ---------- 13. FAQ ---------- */

.home-faq { display: grid; gap: var(--space-2); max-width: 52rem; margin-inline: auto; }
.home-faq-item { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.home-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: var(--control-lg); padding: var(--space-4) var(--space-5);
  cursor: pointer; list-style: none; font-weight: var(--weight-semi); color: var(--ink);
}
.home-faq-item summary::-webkit-details-marker { display: none; }
.home-faq-item summary::after {
  content: ""; flex-shrink: 0; width: var(--space-2); height: var(--space-2);
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg); transition: transform var(--dur-quick) var(--ease-out);
}
.home-faq-item[open] summary::after { transform: rotate(-135deg); }
.home-faq-item summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-lg); }
.home-faq-body { padding: 0 var(--space-5) var(--space-4); color: var(--ink-2); }
.home-faq-body p { margin: 0 0 var(--space-3); }
.home-faq-body p:last-child { margin-bottom: 0; }

/* ---------- breakpoints ---------- */

@media (min-width: 640px) {
  .home-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .home-broker { height: var(--space-12); padding-right: var(--space-4); }
  .home-broker-logo { width: var(--space-8); height: var(--space-8); }
  /* chips scroll sideways instead of wrapping into several rows */
  .home-broker-filters { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); }
  .home-broker-filters .filter-pill { flex: none; }
}

.firms-table .firm-name { font-weight: var(--weight-semi); color: var(--ink); }
} /* @layer page */