/* Hero banner (home + /worth/), 2026-10-15. Builds up once in ~6 s and ends on a complete static graphic. */
.hero { text-align: left; margin: 1.6rem 0 2rem; padding: 1.8rem 1.8rem 1.3rem; border: 1px solid var(--line); border-radius: 14px;
  background: radial-gradient(120% 140% at 0% 0%, #1b2029 0%, var(--ink) 70%); display: flex; flex-direction: column; justify-content: center; position: relative; }
main .hero p { margin: 0; text-align: left; }
.hero p.h-q { font-size: 1.7rem; font-weight: 800; line-height: 1.15; color: var(--paper); text-wrap: balance; }
.hero p.h-sub { margin: .5rem 0 1.3rem; font-size: 1rem; color: var(--body, #e4e5e8); }
.hero .h-row { display: grid; grid-template-columns: 9.5rem 1fr 5.2rem; align-items: center; gap: .9rem; margin: 0 0 .9rem; }
.hero .h-label { font-weight: 700; font-size: 1.05rem; color: var(--paper); }
.hero .h-bar { height: 1.1rem; border-radius: 6px; background: var(--field); overflow: hidden; }
.hero .h-bar i { display: block; height: 100%; background: var(--accent); border-radius: 6px; transform-origin: left; }
.hero .h-dash i { width: 100%; background: repeating-linear-gradient(135deg, #8a4a2e 0 8px, #6b3a25 8px 16px); }
.hero .h-val { font-weight: 800; font-size: 1.35rem; color: var(--accent); text-align: right; }
.hero .h-r2 .h-val { color: var(--paper); }
.hero p.h-end { margin-top: .6rem; font-size: 1.35rem; font-weight: 800; color: var(--paper); }
.hero p.h-end em { font-style: normal; color: var(--accent); }
.hero .h-we { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.hero p.h-we-title { font-size: 1.15rem; font-weight: 800; color: var(--accent); }
.hero .h-we ul { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.hero .h-we li { margin: 0; padding: .4rem .8rem; border: 1px solid var(--accent); border-radius: 999px; font-size: .95rem; font-weight: 600; color: var(--paper); }
.hero .h-we li::before { content: "✓ "; color: var(--accent); }
@keyframes pf-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pf-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero .h-q { animation: pf-in .6s ease-out .1s both; }
.hero .h-sub { animation: pf-in .6s ease-out .9s both; }
.hero .h-r1 { animation: pf-in .5s ease-out 1.8s both; }
.hero .h-r1 .h-bar i { animation: pf-grow .9s ease-out 2.1s both; }
.hero .h-r2 { animation: pf-in .5s ease-out 3.1s both; }
.hero .h-r2 .h-bar i { animation: pf-grow 1.1s ease-out 3.4s both; }
.hero .h-end { animation: pf-in .6s ease-out 4.8s both; }
.hero .h-we { animation: pf-in .6s ease-out 5.6s both; }
/* Reduce Motion on (common on iPhones): no sliding or growing, but the same build-up as gentle fades. */
@keyframes pf-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero .h-q, .hero .h-sub, .hero .h-r1, .hero .h-r2, .hero .h-end, .hero .h-we { animation-name: pf-fade; animation-duration: .8s; }
  .hero .h-r1 .h-bar i, .hero .h-r2 .h-bar i { animation: none; }
}

@media (max-width: 600px) {
  .hero { aspect-ratio: auto; padding: 1.4rem 1.1rem 1rem; }
  .hero p.h-q { font-size: 1.45rem; }
  .hero .h-we li { font-size: .9rem; }
    .hero .h-row { grid-template-columns: 1fr auto; gap: .3rem .8rem; }
  .hero .h-label { grid-column: 1; }
  .hero .h-val { grid-column: 2; grid-row: 1; font-size: 1.25rem; }
  .hero .h-bar { grid-column: 1 / -1; }
  .hero p.h-end { font-size: 1.2rem; }
}
/* Home page: the banner is wider than the narrow signup column. */
.home-hero { width: min(42rem, calc(100vw - 2.5rem)); position: relative; left: 50%; transform: translateX(-50%); }
.home-hero .hero { margin: 1.4rem 0 .45rem; }

/* Home "Coming up" scroller (2026-10-16). Items twice for a seamless loop; pauses on hover; static for reduced motion. */
.ticker { width: min(42rem, calc(100vw - 2.5rem)); position: relative; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; margin: 1.8rem 0 2.2rem; border: 1px solid var(--line); border-radius: 999px; background: var(--field); overflow: hidden; text-align: left; }
.ticker .tk-label { flex: none; align-self: stretch; display: flex; align-items: center; padding: 0 .95rem; background: var(--accent); color: #fff;
  font: 700 .68rem/1 ui-monospace, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
.ticker .tk-window { overflow: hidden; flex: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker .tk-track { display: inline-flex; gap: 2.6rem; padding: .62rem 1.3rem; white-space: nowrap; animation: pf-tick 55s linear infinite; }
.ticker:hover .tk-track, .ticker:focus-within .tk-track { animation-play-state: paused; }
.ticker .tk-item { font-size: .9rem; color: var(--body, #e4e5e8); }
.ticker .tk-item b { color: var(--accent); margin-right: .45rem; }
@keyframes pf-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Reduce Motion: no scrolling; items fade in one at a time instead (delays set per item by the build). */
/* pf-cycle keyframes are written by the build, sized to the number of items. */
@media (prefers-reduced-motion: reduce) {
  .ticker .tk-window { -webkit-mask-image: none; mask-image: none; }
  .ticker .tk-track { animation: none; display: grid; padding: .62rem 1rem; white-space: normal; }
  .ticker .tk-item { grid-area: 1 / 1; opacity: 0; animation: pf-cycle calc(var(--n) * 4s) linear calc(var(--i) * 4s) infinite; }
  .ticker .tk-item[aria-hidden="true"] { display: none; }
}