/* LeagueBeacon public homepage.

   Loaded last so the landing page can extend the shared hero/analyze-card
   markup that the signed-in app also uses. Everything specific to the landing
   page is prefixed `lb-` and lives inside `#marketing`, which is hidden as
   soon as a league opens and the dashboard becomes visible. */

html {
  scroll-behavior: smooth;
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

.hero {
  min-height: auto;
  padding: clamp(60px, 6.5vw, 104px) max(calc((100% - 1240px) / 2), 6vw);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(36px, 4.5vw, 72px);
  align-items: center;
  background: var(--grad-navy);
}

/* Faint measurement grid: reads as an analytics surface without adding
   imagery or extra requests. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148, 205, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 205, 255, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 20% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 20% 0%, #000 0%, transparent 72%);
  pointer-events: none;
}

.hero:after {
  width: 520px;
  height: 520px;
  right: -180px;
  top: -210px;
  border-color: rgba(95, 212, 244, .22);
  box-shadow:
    0 0 0 80px rgba(95, 212, 244, .04),
    0 0 0 170px rgba(95, 212, 244, .025);
}

.hero h1 {
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -2.4px;
  margin: 0 0 var(--s-4);
}

/* Supporting statement, not a second headline: it keeps the cyan emphasis but
   drops well below the h1 in size and weight, and the rule marks it as a
   caption to the headline rather than a peer of it. */
.hero-positioning {
  max-width: 520px;
  margin: 0 0 var(--s-5);
  padding-left: var(--s-4);
  border-left: 2px solid rgba(95, 212, 244, .45);
  color: var(--on-dark);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.2px;
}

.hero-positioning em {
  font-style: normal;
  color: var(--cyan);
}

.hero-text {
  max-width: 540px;
  font-size: var(--fs-base);
  color: #b9c9de;
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}

.hero-points li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #cbdaee;
  font-size: var(--fs-sm);
  font-weight: 650;
}

.hero-points li::before {
  content: "\2713";
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(95, 212, 244, .14);
  box-shadow: inset 0 0 0 1px rgba(95, 212, 244, .42);
  color: var(--cyan);
  font-size: 10px;
  font-weight: 900;
}

/* ------------------------------------------------------------------ */
/* Analyze card                                                        */
/* ------------------------------------------------------------------ */

.analyze-card {
  padding: var(--s-7) var(--s-6) var(--s-6);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, #fff 0%, #f7faff 100%);
  box-shadow:
    0 30px 70px rgba(4, 16, 35, .42),
    0 2px 0 rgba(255, 255, 255, .5) inset;
}

.analyze-card-head {
  margin: 0 0 var(--s-5);
  padding: 0 0 var(--s-5);
  border-bottom: 1px solid var(--line);
}

.analyze-card-head p {
  margin: 0 0 6px;
}

/* The card sits inside .hero, so styles.css would tint this eyebrow cyan for
   a dark background. The card surface is white. */
.analyze-card-head .eyebrow {
  color: var(--blue);
}

.analyze-card-head strong {
  display: block;
  color: var(--navy);
  font-size: var(--fs-xl);
  line-height: 1.25;
  letter-spacing: -.7px;
}

#league-id {
  min-height: 52px;
  padding: 0 var(--s-4);
  font-size: var(--fs-base);
}

#analyze-button {
  min-height: 52px;
  padding: 0 var(--s-6);
  border-radius: var(--r-sm);
  background: var(--grad-cta);
  font-size: var(--fs-sm);
  letter-spacing: .3px;
  box-shadow: 0 10px 22px rgba(37, 96, 230, .3);
}

#analyze-button:hover {
  background: var(--grad-cta-hover);
}

.analyze-card .form-hint {
  margin-top: var(--s-3);
  line-height: 1.6;
}

/* Once a league is open the hero stops being a pitch. The marketing column
   goes away entirely and the analyze card collapses into a league-switch
   strip, so the dashboard starts near the top of the viewport. Everything
   app.js writes into — #status, #my-leagues-entry, #free-league-recovery,
   #resume-workspace, #league-chooser — stays in the flow below the strip. */
main:has(#dashboard:not(.hidden)) .lb-landing {
  display: none;
}

body:has(#dashboard:not(.hidden)) .lb-footer-top {
  display: none;
}

/* The public hero is a navy marketing surface. Leaving that chrome in place
   after a league opens (even with the headline hidden) still reads as the
   landing page. This restyle keeps the existing form in the DOM so public
   league-switch / recovery still work, but drops every marketing cue. */
main:has(#dashboard:not(.hidden)) .hero {
  display: block;
  padding: 10px max(calc((100% - 1240px) / 2), 24px);
  background: var(--paper);
  min-height: 0;
}

main:has(#dashboard:not(.hidden)) .hero-copy {
  display: none;
}

main:has(#dashboard:not(.hidden)) .hero::before,
main:has(#dashboard:not(.hidden)) .hero::after {
  display: none;
}

main:has(#dashboard:not(.hidden)) .analyze-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px var(--s-4);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: none;
}

main:has(#dashboard:not(.hidden)) .analyze-card > * {
  grid-column: 1 / -1;
}

main:has(#dashboard:not(.hidden)) .analyze-card > label[for="league-id"] {
  grid-column: 1;
  margin: 0;
  white-space: nowrap;
}

main:has(#dashboard:not(.hidden)) .analyze-card > .input-row {
  grid-column: 2;
  max-width: 540px;
}

/* The card head sells the free tier and the hint explains what a public
   league is; neither belongs in front of someone already using the product. */
main:has(#dashboard:not(.hidden)) .analyze-card-head,
main:has(#dashboard:not(.hidden)) .analyze-card .form-hint {
  display: none;
}

main:has(#dashboard:not(.hidden)) #league-id,
main:has(#dashboard:not(.hidden)) #analyze-button {
  min-height: 40px;
}

/* The label is a full sentence, so below this the two-up strip leaves the
   input too narrow to hold its own button on one line. */
@media (max-width: 900px) {
  main:has(#dashboard:not(.hidden)) .analyze-card {
    grid-template-columns: minmax(0, 1fr);
  }

  main:has(#dashboard:not(.hidden)) .analyze-card > label[for="league-id"],
  main:has(#dashboard:not(.hidden)) .analyze-card > .input-row {
    grid-column: 1 / -1;
    max-width: none;
  }
}

/* ------------------------------------------------------------------ */
/* Landing section rhythm                                              */
/* ------------------------------------------------------------------ */

.lb-section {
  padding: clamp(64px, 6vw, 104px) max(calc((100% - 1240px) / 2), 6vw);
}

.lb-section-tinted {
  background:
    radial-gradient(90% 120% at 88% 0%, rgba(37, 96, 230, .07) 0%, transparent 62%),
    linear-gradient(180deg, #f4f7fd 0%, var(--paper) 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ------------------------------------------------------------------ */
/* Proof strip                                                         */
/* ------------------------------------------------------------------ */

.lb-proof {
  padding: var(--s-6) max(calc((100% - 1240px) / 2), 6vw) var(--s-7);
  background: linear-gradient(180deg, #0f2a4c 0%, #0b1e39 100%);
  border-top: 1px solid rgba(148, 205, 255, .12);
}

.lb-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(148, 205, 255, .14);
  border: 1px solid rgba(148, 205, 255, .14);
  border-radius: var(--r-md);
  overflow: hidden;
}

.lb-proof-grid > div {
  padding: var(--s-5);
  background: rgba(8, 21, 39, .55);
}

.lb-proof-grid strong {
  display: block;
  color: #fff;
  font-size: var(--fs-xl);
  letter-spacing: -.6px;
}

.lb-proof-grid span {
  display: block;
  margin-top: 6px;
  color: var(--on-dark-muted);
  font-size: var(--fs-xs);
  line-height: 1.55;
}

/* ------------------------------------------------------------------ */
/* Product showcase                                                    */
/* ------------------------------------------------------------------ */

.lb-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
}

.lb-showcase-item {
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* Sample screens differ in height. The frame absorbs the slack so all three
   captions share a baseline, and the panel inside absorbs it in turn so the
   slack never shows up as an empty band of frame gradient. */
.lb-showcase-item .lb-mock {
  flex: 1;
}

.lb-mock,
.lb-mock .panel {
  display: flex;
  flex-direction: column;
}

.lb-mock .panel,
.lb-mock-rows,
.lb-mock-board,
.lb-mock-trade {
  flex: 1;
}

.lb-showcase-item figcaption {
  padding: var(--s-5) 2px 0;
}

.lb-showcase-item h3 {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: var(--fs-lg);
  letter-spacing: -.35px;
}

.lb-showcase-item p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

/* Sample screens are assembled from the product's own panel, chip and
   table styles rather than static images, so they stay in sync with the
   real UI. */
.lb-mock {
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, #e8eefa 0%, #f6f9ff 60%);
  box-shadow: var(--shadow-md);
}

.lb-mock-chrome {
  display: flex;
  gap: 6px;
  padding: 0 2px var(--s-3);
}

.lb-mock-chrome span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c3cfe2;
}

.lb-mock .panel {
  box-shadow: var(--shadow-xs);
}

.lb-mock .panel-title {
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
}

.lb-mock .panel-title h3 {
  font-size: var(--fs-sm);
}

.lb-mock-rows {
  display: grid;
  gap: 1px;
  background: var(--line);
}

.lb-mock-row {
  padding: var(--s-3) var(--s-4);
  background: #fff;
}

.lb-mock-row strong {
  display: block;
  margin: 7px 0 3px;
  color: var(--ink);
  font-size: var(--fs-sm);
  letter-spacing: -.1px;
}

.lb-mock-row span {
  display: block;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.lb-mock-trade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4);
}

.lb-mock-trade > div span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.lb-mock-trade > div strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.lb-mock-swap {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 900;
}

.lb-mock-deal {
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-top: 1px solid var(--line);
  background: var(--navy);
}

.lb-mock-deal-label {
  display: block;
  margin-bottom: 7px;
  color: var(--cyan);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.lb-mock-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}

.lb-mock-dual div {
  padding: var(--s-2) var(--s-3);
  border: 1px solid #2b4162;
  border-radius: var(--r-xs);
  background: #102544;
}

.lb-mock-deal small {
  display: block;
  color: #9eb6d8;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.lb-mock-deal strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: var(--fs-xs);
}

/* Purpose-built miniature of the graded Weekly Top 10 board. A scaled-down
   copy of the real table needs horizontal scroll at this width, so the
   preview keeps the same four columns on a grid that cannot overflow. */
.lb-mock-board {
  display: grid;
  gap: 1px;
  background: var(--line);
}

/* The two right-hand tracks are sized to the widest word in their heading, so
   "Projected Pts" wraps onto two lines instead of forcing the row wider than
   the frame. The player name is the only elastic column. */
.lb-mock-board-head,
.lb-mock-board-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 56px 56px;
  align-items: center;
  gap: 7px;
  padding: 8px var(--s-3);
  background: var(--white);
}

.lb-mock-board-head {
  background: var(--surface-muted);
}

.lb-mock-board-head span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.lb-mock-board-head span:nth-child(3),
.lb-mock-board-head span:nth-child(4),
.lb-mock-pts,
.lb-mock-result {
  text-align: right;
}

.lb-mock-rank {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.lb-mock-player {
  overflow: hidden;
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 750;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lb-mock-pts {
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.lb-mock-result {
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--good-ink);
}

.lb-mock-result.is-miss {
  color: var(--danger);
}

/* ------------------------------------------------------------------ */
/* Differentiators                                                     */
/* ------------------------------------------------------------------ */

.lb-why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}

.lb-why-card {
  position: relative;
  overflow: hidden;
  padding: var(--s-7) var(--s-6) var(--s-6);
}

.lb-why-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--grad-brand);
}

.lb-why-card .lb-chip {
  margin-bottom: var(--s-4);
}

.lb-why-card h3 {
  font-size: var(--fs-xl);
  letter-spacing: -.5px;
}

.lb-why-card p {
  font-size: var(--fs-base);
}

/* ------------------------------------------------------------------ */
/* How it works                                                        */
/* ------------------------------------------------------------------ */

.lb-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
  counter-reset: lb-step;
}

.lb-step {
  position: relative;
  padding-top: var(--s-6);
  border-top: 2px solid var(--line-strong);
  counter-increment: lb-step;
}

.lb-step::before {
  content: "0" counter(lb-step);
  display: block;
  margin-bottom: var(--s-3);
  color: var(--blue);
  font-size: var(--fs-2xl);
  font-weight: 900;
  letter-spacing: -1.5px;
}

.lb-step h3 {
  margin: 0 0 var(--s-2);
  color: var(--navy);
  font-size: var(--fs-lg);
  letter-spacing: -.35px;
}

.lb-step p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

/* ------------------------------------------------------------------ */
/* Pricing                                                             */
/* ------------------------------------------------------------------ */

.lb-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  align-items: stretch;
}

.lb-plan {
  display: flex;
  flex-direction: column;
  padding: var(--s-7) var(--s-6);
}

.lb-plan-featured {
  border-color: #b9cffa;
  background: linear-gradient(180deg, #fff 0%, #eff5ff 100%);
  box-shadow: var(--shadow-md);
}

.lb-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.lb-plan-head h3 {
  margin: 0;
}

.lb-plan .lb-plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 var(--s-2);
  color: var(--navy);
  font-size: var(--fs-3xl);
  font-weight: 900;
  letter-spacing: -1.6px;
}

.lb-plan .lb-plan-price span {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0;
}

.lb-plan .lb-plan-note {
  margin: 0 0 var(--s-5);
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.lb-plan ul {
  flex: 1;
  margin: 0 0 var(--s-6);
  padding: 0;
  list-style: none;
}

.lb-plan li {
  position: relative;
  padding: 7px 0 7px var(--s-6);
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.lb-plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--good);
  border-bottom: 2px solid var(--good);
  transform: rotate(-45deg);
}

.lb-plan .lb-btn {
  width: 100%;
}

.lb-pricing-footnote {
  margin: var(--s-6) 0 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.7;
}

/* ------------------------------------------------------------------ */
/* Closing CTA                                                         */
/* ------------------------------------------------------------------ */

.lb-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 5.5vw, 88px) max(calc((100% - 1240px) / 2), 6vw);
  background: var(--grad-navy);
  text-align: center;
}

.lb-cta::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -260px;
  width: 620px;
  height: 620px;
  transform: translateX(-50%);
  border: 1px solid rgba(95, 212, 244, .16);
  border-radius: 50%;
  pointer-events: none;
}

.lb-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

.lb-cta h2 {
  margin: 0 0 var(--s-4);
  color: #fff;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -1.6px;
}

.lb-cta h2 em {
  font-style: normal;
  color: var(--cyan);
}

.lb-cta p {
  margin: 0 auto var(--s-7);
  max-width: 560px;
  color: #b9c9de;
  font-size: var(--fs-base);
  line-height: 1.7;
}

.lb-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 1050px) {
  .lb-showcase-grid,
  .lb-steps,
  .lb-pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lb-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    padding: clamp(48px, 8vw, 68px) 6vw;
  }

  .hero:after {
    display: none;
  }

  .lb-why-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lb-showcase-grid,
  .lb-steps,
  .lb-pricing-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lb-section-head h2 {
    font-size: var(--fs-2xl);
    letter-spacing: -1px;
  }
}

@media (max-width: 430px) {
  .hero {
    padding: 44px 16px;
  }

  .hero h1 {
    font-size: 38px;
    letter-spacing: -1.8px;
  }

  .hero-positioning {
    font-size: 18px;
  }

  .analyze-card {
    padding: 22px 18px;
  }

  .lb-proof-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lb-section {
    padding: 56px 16px;
  }

  .lb-plan,
  .lb-why-card {
    padding: var(--s-6) var(--s-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}