/* =====================================================================
   cssHome26.css - the shared look of the pages that introduce the club to new people (KG/Claude 10/2/2026)
   Used by Home26.ascx, GameIntro26.ascx and HomeCta26.ascx, which sit inside MasterPages/HomeMaster.master (shell, top bar, night surface).
   Colors come from cssPalette26.css (--sw-*) only. A game card or page wears its game color by carrying data-theme="fantasy|dynasty|pickem|poker|squares";
   on the night surface the theme color is lightened (mixed with white) for borders and glows, and never used for text.
   Everything is scoped to .hm26c / .hm26-* so the older global stylesheets cannot leak in.
   ===================================================================== */

.hm26c { color: var(--sw-on-night); text-align: left; }
.hm26c *, .hm26c *::before, .hm26c *::after { box-sizing: border-box; }
.hm26c h1, .hm26c h2, .hm26c h3, .hm26c p, .hm26c ul, .hm26c ol { margin-top: 0; }
.hm26c a { color: inherit; }

/* a lightened game color: readable on the night surface */
.hm26c [data-theme], .hm26c { --hm-accent: color-mix(in srgb, var(--sw-theme) 55%, white); }

/* ---------- buttons ---------- */
.hm26c .hm26-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 26px;
  font: 700 17px var(--sw-font-sans);
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--sw-radius);
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.hm26c .hm26-btn:active { transform: translateY(1px); }
.hm26c .hm26-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--sw-gold) 55%, transparent); outline-offset: 3px; }
.hm26c a.hm26-btn--primary {
  color: var(--sw-surface);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sw-red) 92%, white), color-mix(in srgb, var(--sw-red) 82%, black));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--sw-red) 38%, transparent);
}
.hm26c a.hm26-btn--primary:hover, .hm26c a.hm26-btn--primary:focus { color: var(--sw-surface); text-decoration: none; background: linear-gradient(180deg, color-mix(in srgb, var(--sw-red) 82%, white), var(--sw-red)); }
.hm26c a.hm26-btn--ghost { color: var(--sw-on-night); border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .04); }
.hm26c a.hm26-btn--ghost:hover, .hm26c a.hm26-btn--ghost:focus { color: var(--sw-surface); text-decoration: none; border-color: var(--sw-gold); background: color-mix(in srgb, var(--sw-gold) 14%, transparent); }
.hm26c .hm26-btn--sm { height: 44px; padding: 0 20px; font-size: 15px; }

/* ---------- hero ---------- */
.hm26-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  column-gap: 48px;
  align-items: center;
  padding: 18px 0 6px;
}
.hm26-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font: 700 12px/1 var(--sw-font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sw-gold);
}
.hm26-kicker svg { width: 22px; height: 22px; fill: none; stroke: var(--sw-gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hm26c .hm26-hero h1 {
  margin: 0 0 18px;
  font: 700 clamp(44px, 6.2vw, 80px)/.94 var(--sw-font-cond);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--sw-surface);
}
.hm26c .hm26-hero h1 em { font-style: normal; color: var(--sw-gold); }
.hm26c .hm26-lede { max-width: 33em; margin: 0 0 26px; font-size: 19px; line-height: 1.55; color: var(--sw-on-night-soft); }
.hm26-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hm26-fine { margin: 14px 0 0; font-size: 14px; color: var(--sw-on-night-faint); }
.hm26-fine a { color: var(--sw-on-night-soft); font-weight: 600; text-decoration: underline; }
.hm26-fine a:hover { color: var(--sw-surface); }

.hm26-hero-art { position: relative; text-align: center; }
.hm26-hero-art::before {                       /* a soft gold-and-red glow behind the art */
  content: "";
  position: absolute;
  inset: 8% 4% 4%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sw-gold) 26%, transparent), color-mix(in srgb, var(--sw-red) 14%, transparent) 55%, transparent 75%);
  filter: blur(8px);
}
.hm26-hero-art img { position: relative; display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .5)); }
.hm26-hero-art img.is-genie { max-width: 400px; }

/* a game page's hero: the game's own icon badge sits in front of the genie */
.hm26-badge {
  position: absolute;
  right: 6%;
  bottom: 4%;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--sw-theme) 62%, var(--sw-night));
  border: 2px solid color-mix(in srgb, var(--sw-theme) 55%, white);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
}
.hm26-badge svg { width: 50px; height: 50px; fill: none; stroke: var(--sw-surface); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- proof strip ---------- */
.hm26-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
}
.hm26-proof li { padding: 18px 20px; background: color-mix(in srgb, var(--sw-night) 88%, white); text-align: center; }
.hm26-proof strong { display: block; font: 700 40px/1 var(--sw-font-cond); color: var(--sw-gold); }
.hm26-proof span { display: block; margin-top: 6px; font-size: 14px; color: var(--sw-on-night-soft); }

/* ---------- sections ---------- */
.hm26-section { margin: 64px 0 0; }
.hm26-section > header { max-width: 40em; margin: 0 0 24px; }
.hm26c h2.hm26-h2 { margin: 0 0 8px; font: 700 clamp(32px, 4vw, 46px)/1 var(--sw-font-cond); text-transform: uppercase; letter-spacing: .01em; color: var(--sw-surface); }
.hm26-section .hm26-sub { margin: 0; font-size: 17px; color: var(--sw-on-night-soft); }
.hm26-section.is-centered > header { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- game cards ---------- */
.hm26-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.hm26-games li { margin: 0; padding: 0; }
.hm26c a.hm26-game {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 20px 18px;
  text-decoration: none;
  color: var(--sw-on-night);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  border-top: 4px solid var(--hm-accent);
  border-radius: 14px;
  transition: background .15s, border-color .15s, transform .12s, box-shadow .15s;
}
.hm26c a.hm26-game:hover, .hm26c a.hm26-game:focus {
  color: var(--sw-surface);
  text-decoration: none;
  background: color-mix(in srgb, var(--hm-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--hm-accent) 70%, transparent);
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(0, 0, 0, .35);
}
.hm26c a.hm26-game:focus-visible { outline: 3px solid color-mix(in srgb, var(--sw-gold) 55%, transparent); outline-offset: 2px; }
.hm26-game .hm26-ico { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px; border-radius: 12px; background: color-mix(in srgb, var(--sw-theme) 55%, var(--sw-night)); }
.hm26-game .hm26-ico svg { width: 26px; height: 26px; fill: none; stroke: var(--sw-surface); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hm26c .hm26-game h3 { margin: 0 0 6px; font: 700 26px/1.05 var(--sw-font-cond); text-transform: uppercase; letter-spacing: .01em; color: var(--sw-surface); }
.hm26c .hm26-game p { flex: 1 1 auto; margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--sw-on-night-soft); }
.hm26-game .hm26-more { font-size: 14px; font-weight: 700; color: var(--sw-gold); }
.hm26-game .hm26-more span { display: inline-block; transition: transform .15s; }
.hm26c a.hm26-game:hover .hm26-more span { transform: translateX(4px); }

/* ---------- feature tiles ---------- */
.hm26-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.hm26-tile { margin: 0; padding: 22px 22px 20px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; }
.hm26-tile .hm26-ico { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 12px; border-radius: 11px; background: color-mix(in srgb, var(--sw-gold) 16%, transparent); }
.hm26-tile .hm26-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--sw-gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hm26c .hm26-tile h3 { margin: 0 0 6px; font: 700 24px/1.1 var(--sw-font-cond); letter-spacing: .01em; color: var(--sw-surface); }
.hm26c .hm26-tile p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--sw-on-night-soft); }
.hm26-tile b { color: var(--sw-surface); }

/* ---------- how it works / a season ---------- */
.hm26-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: hmstep; }
.hm26-steps li { position: relative; margin: 0; padding: 22px 22px 20px 22px; counter-increment: hmstep; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; }
.hm26-steps li::before { content: counter(hmstep); display: block; margin-bottom: 8px; font: 700 54px/1 var(--sw-font-cond); color: var(--sw-gold); }
.hm26c .hm26-steps h3 { margin: 0 0 6px; font: 700 24px/1.1 var(--sw-font-cond); color: var(--sw-surface); }
.hm26c .hm26-steps p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--sw-on-night-soft); }
.hm26-steps.is-season li::before { content: attr(data-when); font-size: 34px; text-transform: uppercase; letter-spacing: .02em; }

/* ---------- a quote / pull statement ---------- */
.hm26-pull {
  margin: 64px 0 0;
  padding: 28px 30px;
  border-left: 5px solid var(--sw-gold);
  background: rgba(255, 255, 255, .05);
  border-radius: 0 14px 14px 0;
}
.hm26c .hm26-pull p { margin: 0; max-width: 40em; font: 600 clamp(22px, 2.6vw, 30px)/1.25 var(--sw-font-cond); letter-spacing: .01em; color: var(--sw-surface); }
.hm26c .hm26-pull p + p { margin-top: 10px; font: 400 16px/1.55 var(--sw-font-sans); color: var(--sw-on-night-soft); }

/* ---------- the white card: prices and open leagues (the existing, working modules sit inside it) ---------- */
.hm26-card {
  margin: 0;
  padding: 24px 26px;
  text-align: left;
  color: var(--sw-ink);
  background: var(--sw-surface);
  border-top: 4px solid var(--sw-red);
  border-radius: 16px;
  box-shadow: 0 26px 64px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .25);
}
.hm26-card + .hm26-card { margin-top: 16px; }
.hm26c .hm26-card h3 { margin: 0 0 12px; font: 700 28px/1.05 var(--sw-font-cond); letter-spacing: .01em; color: var(--sw-navy); }
.hm26-card .hm26-card-note { margin: 0 0 14px; font-size: 14px; color: var(--sw-muted); }
.hm26-card a { color: var(--sw-blue-dark); }
/* the legacy modules: keep them working, tidy the worst of the old table look */
.hm26-card table { width: 100%; max-width: 100%; border-collapse: collapse; color: var(--sw-ink); font-size: 15px; }
.hm26-card td { padding: 4px 6px; vertical-align: top; text-align: left; background: transparent; border-color: var(--sw-line); }
.hm26-card tr.Head, .hm26-card tr.Head td { display: none; }
.hm26-card input[type="submit"], .hm26-card input[type="button"], .hm26-card button {
  height: 40px;
  padding: 0 16px;
  font: 700 14px var(--sw-font-sans);
  color: var(--sw-surface);
  background: var(--sw-blue);
  border: 0;
  border-radius: var(--sw-radius);
  cursor: pointer;
}
.hm26-card input[type="submit"]:hover, .hm26-card input[type="button"]:hover { background: var(--sw-blue-dark); }
.hm26-card .swamiAlert { color: var(--sw-warning); font-weight: 600; }
.hm26-card img { max-width: 100%; height: auto; }

.hm26-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.hm26-plans.has-two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

/* ---------- final call to action ---------- */
.hm26-final {
  position: relative;
  margin: 64px 0 0;
  padding: 36px 36px 32px;
  overflow: hidden;
  background:
    radial-gradient(520px 260px at 100% 0, color-mix(in srgb, var(--sw-gold) 22%, transparent), transparent 70%),
    radial-gradient(520px 260px at 0 100%, color-mix(in srgb, var(--sw-red) 30%, transparent), transparent 70%),
    color-mix(in srgb, var(--sw-night) 80%, white);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
}
.hm26-final-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.hm26c .hm26-final h2 { margin: 0 0 8px; font: 700 clamp(34px, 4.4vw, 52px)/.98 var(--sw-font-cond); text-transform: uppercase; color: var(--sw-surface); }
.hm26c .hm26-final p { margin: 0 0 20px; max-width: 32em; font-size: 17px; color: var(--sw-on-night-soft); }
.hm26-final img { display: block; width: 250px; height: auto; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .45)); }
.hm26-others { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.hm26-others > span { margin-right: 6px; font: 700 12px/1 var(--sw-font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sw-on-night-faint); }
.hm26c .hm26-others a { padding: 7px 14px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--sw-on-night); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .15); border-radius: var(--sw-radius-pill); transition: background .15s, border-color .15s; }
.hm26c .hm26-others a:hover, .hm26c .hm26-others a:focus { color: var(--sw-surface); text-decoration: none; background: color-mix(in srgb, var(--sw-gold) 14%, transparent); border-color: var(--sw-gold); }
.hm26c .hm26-others a:focus-visible { outline: 3px solid color-mix(in srgb, var(--sw-gold) 55%, transparent); outline-offset: 2px; }

/* ---------- narrower screens ---------- */
@media (max-width: 900px) {
  .hm26-hero { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .hm26-hero-art { order: -1; }
  .hm26-hero-art img { max-width: 360px; }
  .hm26-hero-art img.is-genie { max-width: 300px; }
  .hm26-badge { width: 76px; height: 76px; right: 10%; }
  .hm26-badge svg { width: 42px; height: 42px; }
  .hm26-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm26-plans.has-two { grid-template-columns: minmax(0, 1fr); }
  .hm26-final-grid { grid-template-columns: minmax(0, 1fr); }
  .hm26-final img { display: none; }
}
@media (max-width: 640px) {
  .hm26c .hm26-lede { font-size: 17px; }
  .hm26c .hm26-btn { width: 100%; }
  .hm26-section, .hm26-pull, .hm26-final { margin-top: 48px; }
  .hm26-final { padding: 26px 20px 24px; }
  .hm26-card { padding: 18px 16px; border-radius: 14px; }
  .hm26-proof strong { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm26c a.hm26-game, .hm26-game .hm26-more span { transition: none; }
  .hm26c a.hm26-game:hover { transform: none; }
}

/* the gold word in the closing headline */
.hm26c .hm26-final h2 em { font-style: normal; color: var(--sw-gold); }

/* two cards side by side: no stacking margin, and the old buttons carry an inline width that clips their text */
.hm26-plans .hm26-card + .hm26-card { margin-top: 0; }
.hm26-card input[type="submit"], .hm26-card input[type="button"] { width: auto !important; min-width: 120px; padding: 0 18px; white-space: nowrap; }

/* the cost card sits under the open-leagues cards */
.hm26-plans { margin-top: 20px; }

/* a game's own league logo in the hero (Pick'em, Poker): the art has its own background, so it is shown as a card */
.hm26-hero-art img.is-logo { max-width: 560px; border: 0; border-radius: 18px; box-shadow: none; }

/* the official transparent-background logo (Images/Collateral): no card, just a soft shadow like the stadium logo */
.hm26-hero-art img.is-logo.is-art { border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .5)); }

/* a hero whose buttons are its last line (a signed-in member's Home has no fine print under them) still needs air before what follows */
.hm26-hero .hm26-cta:last-child { margin-bottom: 18px; }

/* ---------- "The club right now" (ClubPulse26): this week, the all-time scoreboard, and a few funny lines about the numbers ---------- */
.hm26-pulse-label { margin: 22px 0 10px; font: 700 12px/1 var(--sw-font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sw-gold); }
.hm26-pulse-week, .hm26-pulse-all { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.hm26-pulse-week { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.hm26-pulse-all  { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.hm26-pulse-week li, .hm26-pulse-all li { margin: 0; padding: 16px 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; }
.hm26-pulse-week li { border-top: 4px solid var(--sw-gold); background: color-mix(in srgb, var(--sw-gold) 9%, transparent); }
.hm26-pulse-week strong, .hm26-pulse-all strong { display: block; font: 700 40px/1 var(--sw-font-cond); letter-spacing: .01em; color: var(--sw-surface); }
.hm26-pulse-week strong { color: var(--sw-gold); }
.hm26-pulse-week span, .hm26-pulse-all span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.35; color: var(--sw-on-night-soft); }

.hm26-pulse-quips { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.hm26-pulse-quips li { margin: 0; padding: 14px 18px; font-size: 16px; line-height: 1.5; color: var(--sw-on-night-soft); background: rgba(255, 255, 255, .05); border-left: 4px solid var(--sw-gold); border-radius: 0 12px 12px 0; }
.hm26-pulse-quips b { color: var(--sw-gold); font-weight: 700; }

@media (max-width: 640px) {
  .hm26-pulse-week, .hm26-pulse-all { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hm26-pulse-week strong, .hm26-pulse-all strong { font-size: 32px; }
  .hm26-pulse-quips li { font-size: 15px; padding: 12px 14px; }
}
.hm26-pulse-week + .hm26-pulse-label { margin-top: 30px; }
.hm26-pulse-quips { margin-top: 28px; }
/* the funny lines now sit first, right under the section heading */
.hm26-pulse-quips { margin: 4px 0 6px; }
.hm26-pulse-quips + .hm26-pulse-label { margin-top: 26px; }