/* ==========================================================================
   Home page (pick card, settled table and plan card live in components.css — shared via core/ui.js)
   ========================================================================== */

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow-x: clip; padding: clamp(48px, 6vw, 96px) 0 clamp(40px, 4vw, 64px); }
.hero__bg { position: absolute; inset: -140px 0 0; z-index: -1; pointer-events: none; }
.dial { position: absolute; left: 50%; top: 46%; width: clamp(620px, 64vw, 980px); aspect-ratio: 1; translate: calc(-50% + min(22vw, 340px)) -50%; -webkit-mask: radial-gradient(closest-side, #000 72%, transparent 100%); mask: radial-gradient(closest-side, #000 72%, transparent 100%); }
.dial__layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dial__rose { animation: spin 300s linear infinite; }
.dial__trail { animation: spin 42s linear infinite; }
.dial__trail--b { animation-duration: 68s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.hero__title { display: grid; margin: 26px 0 28px; font-size: clamp(2.5rem, 1.15rem + 4.25vw, 5.25rem); line-height: 1.08; letter-spacing: .01em; }
.hero__title span { display: block; }
:lang(en) .hero__title { letter-spacing: -.012em; line-height: 1.02; }
.hero__lead { max-width: 34em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero__proof { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 34px; list-style: none; font-size: var(--fs-sm); color: var(--stone); letter-spacing: .04em; }
.hero__proof li { display: inline-flex; align-items: center; gap: 10px; }
.hero__proof .icon { color: var(--gold-2); }

/* Model ledger card */
.ledger { display: grid; gap: 22px; padding: clamp(24px, 2.6vw, 34px); background: linear-gradient(180deg, rgba(24,27,37,.9), rgba(12,13,18,.94)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow-3), var(--shadow-gold); }
.ledger__head { display: flex; align-items: center; gap: 8px; }
.ledger__kicker { margin-right: auto; font: 600 11px/1 var(--font-ui); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-2); }
.ledger__title { font-size: var(--fs-h4); margin-top: -10px; }
.ledger__main { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.ledger__hit { font-size: clamp(3.25rem, 2.3rem + 2.8vw, 5rem); }
.ledger__na { font-size: var(--fs-h4); }
.ledger__gauge { --gauge: clamp(96px, 8vw, 120px); }
.ledger__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ledger__row .stat { padding: 0 14px; border-left: 1px solid var(--line); min-width: 0; }
.ledger__row .stat:first-child { padding-left: 0; border-left: 0; }
.ledger__row .stat__value { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); white-space: nowrap; }
.ledger__trend-label { font: 600 11px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
.ledger__spark { margin-top: 12px; --spark-h: 58px; }
.ledger__dates { display: flex; justify-content: space-between; margin-top: 8px; font: 500 11px/1 var(--font-mono); color: var(--text-3); }
.ledger__note { padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--fs-xs); line-height: 1.65; color: var(--text-3); }

.hero__strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--line-gold); }
.strip__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding: 26px 24px 0; border-left: 1px solid var(--line); }
.strip__item:first-child { border-left: 0; padding-left: 0; }
.strip__item dt { font: 600 11px/1.4 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--stone); }
.strip__item dd { font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); font-weight: 600; line-height: 1; }

@media (max-width: 1023px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .dial { top: 16%; width: 760px; translate: calc(-50% + 36vw) -50%; opacity: .7; }
  .ledger { max-width: 560px; }
}
@media (max-width: 767px) {
  .hero { padding-top: 36px; }
  .hero__title { margin: 18px 0 20px; }
  .hero__cta .btn { flex: 1 1 auto; }
  .hero__proof { gap: 8px 18px; }
  .hero__strip { grid-template-columns: 1fr 1fr; }
  .strip__item { padding: 22px 16px 0; }
  .strip__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .ledger__row .stat { padding: 0 10px; }
}

/* ---------- Upcoming picks teaser ---------- */
.up__summary { display: grid; gap: 14px; justify-items: end; }
.up__count { font: 500 var(--fs-sm)/1.4 var(--font-mono); color: var(--gold-1); letter-spacing: .02em; }
.up__note { display: flex; align-items: flex-start; gap: 10px; margin: -16px 0 24px; padding: 14px 18px; border: 1px solid var(--line-gold); border-radius: var(--r-md); background: var(--gold-bg); font-size: var(--fs-sm); line-height: 1.6; color: var(--gold-1); }
.up__note-ic { display: inline-flex; margin-top: 3px; color: var(--gold-2); }
.up__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.up__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }
.up__foot:empty { display: none; }
@media (max-width: 1023px) { .up__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .up__summary { justify-items: start; }
  .up__grid { grid-template-columns: minmax(0, 1fr); }
  .up__grid > .pick:nth-child(n+4) { display: none; }
}

/* ---------- Featured record cards (SPEC §13.2) ---------- */
.feats { margin-bottom: 20px; }
.feats__cap { margin-bottom: 14px; font: 600 11px/1.4 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2); }
.feats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.feat { display: grid; align-content: start; gap: 14px; padding: 24px 26px 22px; background: radial-gradient(120% 90% at 100% 0%, rgba(226,194,122,.09), transparent 62%), var(--ink-2); }
.feat__range { font: 500 var(--fs-xs)/1 var(--font-mono); letter-spacing: .04em; color: var(--gold-2); }
.feat__title { font-size: 1.3rem; line-height: 1.3; }
.feat__hit { display: flex; align-items: baseline; gap: 12px; }
.feat__big { font: 600 clamp(2.5rem, 2rem + 1.4vw, 3.25rem)/1 var(--font-display); }
.feat__big small { font-size: .5em; margin-left: .06em; }
.feat__lbl { font-size: var(--fs-xs); letter-spacing: .12em; color: var(--stone); }
.feat__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 14px; border-top: 1px solid var(--line); }
.feat__row div { display: grid; gap: 6px; padding-left: 14px; border-left: 1px solid var(--line); min-width: 0; }
.feat__row div:first-child { padding-left: 0; border-left: 0; }
.feat__row dt { font: 600 10px/1.2 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.feat__row dd { font-size: var(--fs-md); color: var(--ivory); white-space: nowrap; }
.feats__note { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: var(--fs-xs); line-height: 1.6; color: var(--text-3); }
.feats__note .icon { margin-top: 2px; }
@media (max-width: 1023px) { .feat { padding: 20px; } .feat__row div { padding-left: 10px; } .feat__row dd { font-size: var(--fs-sm); } }
@media (max-width: 767px) { .feats__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } }

/* ---------- Record ---------- */
.rec__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; }
.rec__chart { display: grid; gap: 20px; padding: clamp(20px, 2.4vw, 32px); }
.rec__chart-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.rec__label { font: 600 11px/1.4 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--stone); }
.rec__big { margin-top: 10px; font: 600 var(--fs-stat)/1 var(--font-display); }
.rec__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; font-size: var(--fs-xs); color: var(--stone); }
.rec__legend li { display: inline-flex; align-items: center; gap: 3px; }
.lg { display: inline-block; width: 16px; height: 2px; margin-right: 6px; background: var(--gold-2); border-radius: 2px; }
.lg--jade, .lg--garnet { width: 5px; height: 11px; margin-right: 0; background: var(--jade); }
.lg--garnet { margin-right: 6px; background: var(--garnet); }
.rec__area { min-height: 252px; }
.rec__bars { padding-top: 14px; border-top: 1px solid var(--line); }
.rec__side { display: grid; gap: 20px; align-content: start; }
.rec__kpis { display: grid; grid-template-columns: 1fr 1fr; }
.rec__kpis .stat { padding: 22px 24px; border-top: 1px solid var(--line); }
.rec__kpis .stat:nth-child(-n+2) { border-top: 0; }
.rec__kpis .stat:nth-child(even) { border-left: 1px solid var(--line); }
.rec__sports { display: grid; gap: 20px; padding: 24px; }
.rec__recent { margin-top: 20px; padding: clamp(20px, 2.4vw, 32px); }
.rec__recent-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
@media (max-width: 1023px) { .rec__grid { grid-template-columns: minmax(0, 1fr); } .rec__side { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .rec__side { grid-template-columns: minmax(0, 1fr); } .rec__area { min-height: 212px; } }

/* ---------- Strategy widget (SPEC §13.3 layout A = stacked, B = side by side) ---------- */
.explorer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); padding: clamp(28px, 4.5vw, 60px); background: radial-gradient(80% 120% at 100% 0%, rgba(226,194,122,.09), transparent 60%), var(--ink-2); }
.explorer .section-title { font-size: var(--fs-h3); margin-top: 16px; }
.explorer .section-sub { margin-top: 14px; font-size: var(--fs-md); }
.explorer__filters { display: grid; gap: 18px; margin-top: 30px; }
.explorer__group { display: grid; gap: 10px; }
.explorer__flabel { font: 600 11px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
.explorer__board { display: grid; gap: 16px; align-content: start; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-lg); background: rgba(5,5,7,.7); border: 1px solid var(--line); }
.explorer__cap { display: flex; align-items: center; gap: 8px; font: 600 11px/1.5 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.explorer__list { list-style: none; display: grid; align-content: start; min-height: 288px; }
.explorer--a { grid-template-columns: minmax(0, 1fr); }
.explorer--a .explorer__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 40px; }
.ex-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ex-row--skel { grid-template-columns: 1fr; }
.ex-rank { font: 600 1.375rem/1 var(--font-display); color: var(--gold-2); }
.ex-name { display: block; font-weight: 500; color: var(--ivory); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-sub { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--text-3); }
.ex-nums { display: flex; gap: 18px; text-align: right; font: 500 var(--fs-sm)/1.2 var(--font-mono); }
.ex-nums small { display: block; margin-bottom: 4px; font: 600 10px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.ex-empty { padding: 32px 0; color: var(--stone); font-size: var(--fs-sm); }
.explorer__board .btn { justify-self: start; }
@media (max-width: 1023px) { .explorer { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .explorer--a .explorer__filters { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .ex-row { grid-template-columns: 28px minmax(0, 1fr); } .ex-nums { grid-column: 2; justify-content: flex-start; text-align: left; } }

/* ---------- How it works ---------- */
.how { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; border-top: 1px solid var(--line-gold); }
.how__step { position: relative; padding: 44px 32px 0 0; }
.how__step::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; transform: rotate(45deg); background: var(--ink-1); border: 1px solid var(--gold-2); }
.how__num { display: block; margin-bottom: 18px; font: 500 clamp(3rem, 2.4rem + 1.6vw, 4.25rem)/1 var(--font-display); color: transparent; -webkit-text-stroke: 1px var(--gold-3); letter-spacing: .02em; }
.how__t { margin-bottom: 12px; font-size: var(--fs-h4); }
.how__d { font-size: var(--fs-sm); line-height: 1.85; color: var(--stone); }
@media (max-width: 1023px) { .how { grid-template-columns: 1fr 1fr; row-gap: 48px; } }
@media (max-width: 599px) {
  .how { grid-template-columns: minmax(0, 1fr); row-gap: 36px; border-top: 0; border-left: 1px solid var(--line-gold); padding-left: 28px; }
  .how__step { padding: 0; }
  .how__step::before { left: -33px; top: 14px; }
}

/* ---------- League coverage ---------- */
.leagues { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 28px 32px; list-style: none; }
.league { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line-gold); }
.league__code { font: 600 1.625rem/1 var(--font-display); letter-spacing: .03em; color: var(--ivory); }
.league__name { font-size: var(--fs-xs); color: var(--text-3); min-height: 1.5em; }
.league__bar { display: block; height: 2px; margin-top: 6px; background: rgba(255,255,255,.06); }
.league__bar i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--gold-4), var(--gold-2)); }
.league__n { font: 500 var(--fs-sm)/1 var(--font-mono); color: var(--gold-1); }
.leagues__foot { display: none; margin-top: 28px; text-align: center; }
@media (max-width: 767px) { .leagues__foot { display: block; } .leagues:not(.is-open) > .is-extra { display: none; } }
@media (max-width: 480px) { .leagues { grid-template-columns: 1fr 1fr; gap: 24px 20px; } }

/* ---------- Plans (cards in components.css) ---------- */
.plans__foot { margin-top: 28px; text-align: center; }

/* ---------- Testimonials ---------- */
.voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.voice { display: flex; flex-direction: column; gap: 22px; padding: 30px 28px 26px; }
.voice::before { content: "\201C"; position: absolute; top: 4px; right: 24px; font: 600 5.5rem/1 var(--font-display); color: rgba(226,194,122,.14); pointer-events: none; }
.voice__top { display: flex; align-items: center; gap: 10px; }
.voice__text { flex: 1; font: 500 var(--fs-lg)/1.8 var(--font-display); color: var(--ivory); }
:lang(en) .voice__text { font-size: 1.25rem; line-height: 1.6; }
.voice__who { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.voice__who img.avatar { object-fit: cover; }
.voice__name { font-size: var(--fs-sm); font-weight: 500; }
.voices__note { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: var(--fs-xs); color: var(--text-3); }
@media (max-width: 1023px) { .voices { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__intro { position: sticky; top: calc(var(--nav-h) + 48px); display: grid; gap: 18px; justify-items: start; }
.faq__intro .muted { margin-top: 8px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line-gold); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; padding: 18px 0; list-style: none; cursor: pointer; font: 500 var(--fs-lg)/1.5 var(--font-ui); color: var(--ivory); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--gold-1); }
.faq__plus { position: relative; flex: none; width: 14px; height: 14px; }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: var(--gold-2); transition: transform var(--dur-2) var(--ease); }
.faq__plus::after { transform: rotate(90deg); }
.faq__item[open] .faq__plus::after { transform: rotate(0deg) scaleX(0); }
.faq__item p { padding: 0 48px 26px 0; color: var(--stone); line-height: 1.9; }
@media (max-width: 1023px) { .faq { grid-template-columns: minmax(0, 1fr); } .faq__intro { position: static; } }
@media (max-width: 767px) { .faq__item summary { font-size: var(--fs-md); } .faq__item p { padding-right: 0; } }

/* ---------- Final CTA ---------- */
.final__panel { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 22px; padding: clamp(56px, 8vw, 112px) clamp(24px, 5vw, 80px); text-align: center; background: radial-gradient(70% 90% at 50% 100%, rgba(226,194,122,.13), transparent 70%), var(--ink-2); }
.final__rays { position: absolute; left: 50%; bottom: 0; width: max(1100px, 100%); translate: -50% 0; pointer-events: none; }
.final__panel > :not(svg) { position: relative; }
.final__title { font-size: clamp(2.5rem, 1.4rem + 3.8vw, 4.75rem); line-height: 1.08; }
.final__sub { margin-inline: auto; text-align: center; }
.final__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 10px; }
.final__note { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--fs-xs); color: var(--text-3); }
.final__note .icon { color: var(--gold-3); }

/* ---------- Ticker (stock-tape marquee, home only) ---------- */
.ticker { position: relative; display: flex; align-items: stretch; height: 52px; border-block: 1px solid var(--line-gold); background: linear-gradient(180deg, rgba(5,5,7,.78), rgba(10,11,15,.78)); overflow: hidden; }
.ticker__label { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 20px 0 var(--gutter); border-right: 1px solid var(--line-gold); background: var(--ink-0); color: var(--gold-2); font: 600 11px/1 var(--font-ui); letter-spacing: .22em; text-transform: uppercase; z-index: 1; }
.ticker__label::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--gold-2); background: rgba(226,194,122,.25); }
.ticker__viewport { position: relative; flex: 1; min-width: 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 64px), transparent); mask: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 64px), transparent); }
.ticker__track { display: flex; width: max-content; height: 100%; animation: tape var(--tape-dur, 70s) linear infinite; }
.ticker:hover .ticker__track, .ticker:focus-within .ticker__track { animation-play-state: paused; }
@keyframes tape { to { transform: translateX(-50%); } }
.tick { display: flex; align-items: center; gap: 12px; padding: 0 26px; white-space: nowrap; font-size: var(--fs-sm); color: var(--stone); position: relative; }
.tick::after { content: ""; position: absolute; right: 0; top: 50%; width: 4px; height: 4px; margin-top: -2px; transform: rotate(45deg); background: var(--gold-4); }
.tick__lg { font: 600 var(--fs-xs)/1 var(--font-mono); letter-spacing: .08em; color: var(--gold-2); }
.tick__teams { color: var(--ivory); }
.tick__val { font: 500 var(--fs-sm)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.tick__arrow { width: 0; height: 0; border-inline: 4px solid transparent; }
.tick__arrow--up { border-bottom: 6px solid var(--jade); }
.tick__arrow--down { border-top: 6px solid var(--garnet); }
.tick__time { font: 500 var(--fs-xs)/1 var(--font-mono); color: var(--sapphire); }
.ticker__group { display: flex; flex: none; }
.tick__pick { color: var(--stone); }
.tick__res { font: 700 11px/1 var(--font-mono); }
.tick__issued { font: 600 10px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-3); }
@media (prefers-reduced-motion: reduce) {
  .ticker__viewport { overflow-x: auto; -webkit-mask: none; mask: none; }
  .ticker__track { animation: none; }
}