/* Puck Party marketing pages — shared stylesheet.
   Follows the consumer app's citrus design system (puckparty-app
   apps/web/DESIGN.md): citrus is the target, bone white is the answer,
   graphite is everything else. Archivo for anything you read, Bebas Neue
   only for numbers and codes, sentence-case headlines, flat surfaces with
   hairline rules. Dark only, like the app. The homepage keeps its own inline
   CSS (the waitlist flow depends on it) with the same tokens. */

:root {
  --bg: #08090a;
  --bg-2: #121311;
  --bg-3: #1a1d17;
  --bg-4: #23281c;
  --ink: #f4f6f0;
  --ink-dim: #c9cdc2;
  --ink-mute: #9aa094;
  --ink-faint: #8a9084;
  --citrus: #e9ff4d;
  --citrus-tonal: rgba(233, 255, 77, 0.12);
  --on-light: #14170a;
  --line: #23281c;
  --line-strong: #2e3425;
  --ui: 'Archivo', system-ui, sans-serif;
  --num: 'Bebas Neue', 'Archivo', sans-serif;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: clip;
}
/* The app's one decorative gradient: a faint citrus glow, top right. */
body::before {
  content: ''; position: absolute; top: -220px; right: 0; width: min(620px, 100vw); height: 620px;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(233,255,77,.07), rgba(233,255,77,0) 68%);
}

.page {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

/* ---- App bar ---- */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 -20px; padding: 12px 20px;
  background: rgba(8, 9, 10, 0.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ui); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.03em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand-mark {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px;
  background: #08090a; border: 1px solid var(--line-strong); color: var(--citrus);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--num); font-size: 1.15rem; letter-spacing: 0.02em; line-height: 1; padding-top: 2px;
}
.bar-cta {
  font-family: var(--ui); font-weight: 800; font-size: 0.9rem; letter-spacing: -0.01em;
  text-decoration: none; color: var(--on-light); background: var(--citrus);
  padding: 9px 15px; border-radius: 11px; white-space: nowrap;
  transition: transform 120ms var(--ease);
}
.bar-cta:active { transform: scale(0.98); }
.bar-end { display: flex; align-items: center; gap: 6px; }
.bar-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; color: var(--ink-dim); transition: color 120ms ease;
}
.bar-social:hover { color: var(--ink); }

/* ---- Kickers: the only uppercase on the site ---- */
.eyebrow, .k, .kicker {
  font-family: var(--ui); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute);
}

/* ---- Hero: copy on the left, a phone mockup of the app on the right ---- */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  padding: 20px 0 8px;
  margin-bottom: 12px;
}
.hero-copy { max-width: 640px; }
.hero-wide .hero-copy { max-width: 760px; }
.hero-visual {
  display: flex; justify-content: center; align-items: center;
  position: relative; padding: 8px 0;
}
.hero-wide .hero-visual .phone { transform: scale(0.9); transform-origin: top center; }
.hero .btn { margin-top: 8px; }
.hero .hero-note { margin: 14px 0 0; font-size: 0.82rem; font-weight: 600; color: var(--ink-faint); }

/* ---- Article ---- */
.article { max-width: 720px; counter-reset: sec; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 14px; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--citrus); }
.article h1 {
  font-family: var(--ui);
  font-weight: 800;
  font-size: clamp(2.4rem, 9vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0 0 18px;
  text-wrap: balance;
}
.article h1 em { font-style: normal; color: var(--citrus); }
.article .summary {
  margin: 0 0 20px;
  font-weight: 500;
  font-size: clamp(1.02rem, 3.6vw, 1.14rem);
  line-height: 1.55;
  color: var(--ink);
}
.article .summary .k { display: none; }
.article .lead {
  font-weight: 400;
  font-size: clamp(1rem, 3.6vw, 1.1rem);
  line-height: 1.55;
  margin: 0 0 28px;
  color: var(--ink-dim);
}
.article > h2 {
  display: flex; align-items: baseline; gap: 12px;
}
.article > h2::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero);
  font-family: var(--num); font-weight: 400; font-size: 1.15rem; letter-spacing: 0.06em;
  color: var(--citrus); flex-shrink: 0; transform: translateY(-1px);
}
.article h2 {
  font-family: var(--ui);
  font-weight: 800;
  font-size: clamp(1.45rem, 4.6vw, 1.85rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 48px 0 14px;
}
.article h3 {
  font-family: var(--ui);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.025em;
  margin: 26px 0 8px;
  color: var(--ink);
}
.article p, .article li {
  font-size: 1.04rem;
  line-height: 1.62;
  color: var(--ink);
}
.article p { margin: 0 0 14px; }
.article p.dim, .article .dim { color: var(--ink-dim); }
.article a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(233,255,77,.55); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.article a:hover { color: var(--citrus); }
.article strong { font-weight: 700; }

.article ul, .article ol { padding: 0; margin: 0 0 18px; }
.article ul { list-style: none; display: grid; gap: 10px; }
.article ul li { position: relative; padding-left: 24px; }
.article ul li::before {
  content: '';
  position: absolute; left: 2px; top: 0.66em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink-mute);
}
.article ol { list-style: none; counter-reset: step; display: grid; gap: 12px; }
.article ol li { position: relative; padding-left: 38px; counter-increment: step; }
.article ol li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0.1em;
  font-family: var(--num); font-size: 1.35rem; line-height: 1; letter-spacing: 0.02em; color: var(--citrus);
}

/* Card grid: the five cards, feature tiles. Flat graphite, hairline border. */
.cards {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  margin: 18px 0 24px;
}
.card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 16px 16px 16px;
  transition: border-color 120ms var(--ease);
}
.card:hover { border-color: #454b3c; }
.card .k { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.card .n { font-family: var(--num); font-size: 1.05rem; letter-spacing: 0.06em; color: var(--citrus); }
.card h3, .card .t {
  font-family: var(--ui);
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}
.card p { margin: 0; font-size: 0.93rem; line-height: 1.5; color: var(--ink-dim); }
.card p + p { margin-top: 8px; }
.card .q { color: var(--ink); font-weight: 600; }
.card a.more { display: inline-block; margin-top: 10px; font-size: 0.88rem; font-weight: 700; }

/* Plain notice: a bone "!" disc beside a sentence with a bold lead. */
.notice { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 22px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; }
.notice::before {
  content: '!'; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: var(--on-light); display: grid; place-items: center;
  font-weight: 800; font-size: 0.8rem; margin-top: 2px;
}
.notice p { margin: 0; font-size: 0.97rem; color: var(--ink-dim); }
.notice strong { color: var(--ink); }

/* Rules table */
.table-wrap { overflow-x: auto; margin: 16px 0 24px; }
table.rules { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
table.rules th, table.rules td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line-strong); vertical-align: top; }
table.rules th { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
table.rules td { line-height: 1.5; }
table.rules td:first-child { font-weight: 700; }

/* CTA block */
.cta {
  position: relative; overflow: hidden;
  margin: 52px 0 8px;
  padding: 26px 22px;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
}
.cta::before {
  content: ''; position: absolute; top: -110px; right: -70px; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(233,255,77,.08), rgba(233,255,77,0) 68%); pointer-events: none;
}
.cta .k { margin: 0 0 10px; }
.cta h2 {
  font-family: var(--ui); font-weight: 800; letter-spacing: -0.04em;
  font-size: clamp(1.8rem, 6vw, 2.5rem); line-height: 1.02; margin: 0 0 10px;
}
.cta p { margin: 0 0 18px; color: var(--ink-dim); font-size: 0.98rem; line-height: 1.5; max-width: 520px; }
.btn {
  position: relative; overflow: hidden;
  background: var(--citrus);
  color: var(--on-light);
  border: none;
  border-radius: 15px;
  padding: 16px 28px;
  font-family: var(--ui);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 120ms var(--ease);
  white-space: nowrap;
  width: 100%;
  max-width: 420px;
}
.article .btn, .btn { color: var(--on-light); text-decoration: none; }
.btn:hover, .article .btn:hover { color: var(--on-light); }
.btn:active { transform: scale(0.985); }
.btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation: pp-sweep 2.6s var(--ease) infinite;
}
@keyframes pp-sweep { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
@media (prefers-reduced-motion: reduce) { .btn::after { display: none; } }
.cta .trust { margin: 14px 0 0; font-size: 0.82rem; font-weight: 600; color: var(--ink-faint); }

/* Related pages */
.related { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
.related .k { margin: 0 0 12px; }
.related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.related li { border-bottom: 1px solid var(--line); padding-left: 0; }
.article .related li::before { content: none; }
.related a {
  display: flex; justify-content: space-between; align-items: center; padding: 13px 0;
  font-family: var(--ui); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none;
}
.related a::after { content: '›'; color: var(--ink-mute); font-size: 1.3rem; }
.related a:hover { color: var(--citrus); }

/* Footer */
.footer {
  margin-top: auto;
  padding-top: 40px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.8rem;
  line-height: 1.5;
}
.footer-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  margin: 0 0 18px; padding: 0; list-style: none;
}
.footer-links a {
  font-family: var(--ui); font-size: 0.86rem; font-weight: 600;
  color: var(--ink-dim); text-decoration: none;
}
.footer-links a:hover { color: var(--ink); }
.footer-social { margin: 0 0 16px; }
.footer-x {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ui); font-size: 0.86rem; font-weight: 600;
  color: var(--ink-dim); text-decoration: none;
}
.footer-x:hover { color: var(--ink); }
.footer .copy {
  font-family: var(--ui); font-weight: 800; letter-spacing: -0.02em;
  font-size: 0.95rem; color: var(--ink); margin-bottom: 4px;
}
.footer .footer-game { margin: 4px 0 6px; font-weight: 600; font-size: 0.9rem; color: var(--ink-dim); }
.footer .footer-disclaimer {
  margin: 14px auto 0; max-width: 520px; font-size: 0.72rem; line-height: 1.55; color: var(--ink-faint);
}
.footer-legal { margin: 12px 0 0; font-size: 0.78rem; }
.footer-legal a { color: var(--ink-dim); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover { color: var(--ink); }
.legal-note { margin: 12px 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--ink-faint); }
.legal-note a { color: var(--ink-dim); text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 540px) {
  .page { padding: 0 24px 32px; }
  .bar { margin: 0 -24px; padding: 12px 24px; }
  .btn { width: auto; }
  .cards { grid-template-columns: 1fr 1fr; }
  .cards .wide { grid-column: 1 / -1; }
}
@media (min-width: 880px) {
  .bar { margin: 0 -48px; padding: 14px 48px; }
  .cards.three { grid-template-columns: 1fr 1fr 1fr; }
  .hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 48px; padding: 40px 0 24px; }
  .hero-wide { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr); gap: 24px; }
  .hero-visual { padding: 0; }
  .article { max-width: 760px; }
}
@media (min-width: 1024px) {
  .page { padding: 0 48px 56px; }
}

/* Inline phone mockup in an article body, and the Hockey IQ line. */
.mock-inline { display: flex; justify-content: center; margin: 22px 0 28px; }
.inline-card .iq-line { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; }
.inline-card .iq-v { font-family: var(--num); font-size: 3.4rem; line-height: 0.9; letter-spacing: 0.02em; color: var(--ink); }
.inline-card .iq-n { font-weight: 700; color: var(--ink-dim); }
.article .inline-card p { margin: 0; }
.article .inline-card .worth p { margin: 6px 0 0; }
.article .inline-card .worth .worth-foot { margin: 10px 0 0; }
.inline-card .worth { border: 0; padding: 0; margin: 0; }
html { overflow-x: clip; }

/* Blog: post byline, index cards, division clusters */
.byline { margin: 0 0 6px; font-size: 0.8rem; font-weight: 600; color: var(--ink-faint); }
.byline a { color: var(--ink-dim); text-decoration: none; }
.byline a:hover { color: var(--ink); }
.post .inline-card { margin: 18px 0 16px; }
.blog-section h2 { margin-top: 36px; }
.post-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.article .post-list li::before { content: none; }
.post-card { padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 16px; transition: border-color 120ms var(--ease); }
.post-card:hover { border-color: #454b3c; }
.post-card a { font-family: var(--ui); font-weight: 800; font-size: 1.1rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.post-card a:hover { color: var(--citrus); }
.post-card p { margin: 6px 0 4px; font-size: 0.92rem; color: var(--ink-dim); line-height: 1.45; }
.post-card time { font-family: var(--num); font-size: 0.9rem; letter-spacing: 0.06em; color: var(--ink-faint); }
.related.teams ul { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 18px; }
@media (min-width: 640px) {
  .post-list { grid-template-columns: repeat(2, 1fr); }
}

/* Contact form (/contact/). Submitted through Netlify Forms by assets/contact.js. */
.contact-form { margin: 8px 0 24px; max-width: 560px; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field-row { display: grid; gap: 0 14px; }
.article .field { margin: 0 0 16px; }
.field label { display: block; margin: 0 0 6px; font-size: 0.86rem; font-weight: 700; color: var(--ink); }
.field .field-hint { font-weight: 500; color: var(--ink-faint); }
.field input, .field select, .field textarea {
  display: block; width: 100%;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 12px 14px;
  transition: border-color 120ms var(--ease);
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-mute) 50%), linear-gradient(135deg, var(--ink-mute) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--citrus); }
.article .form-msg { margin: 0 0 12px; font-size: 0.92rem; font-weight: 600; color: var(--ink-dim); }
.article .form-msg:empty { margin: 0; }
.article .form-msg.error { color: #ff8a7a; }
.contact-form .btn:disabled { opacity: 0.6; }
.contact-sent { margin: 8px 0 24px; padding: 22px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--bg-2); outline: none; }
.contact-sent .k { margin: 0 0 8px; color: var(--citrus); }
.article .contact-sent h2 { margin: 0 0 8px; }
.article .contact-sent h2::before { content: none; }
.article .contact-sent p:last-child { margin: 0; color: var(--ink-dim); }
@media (min-width: 540px) { .field-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 880px) { .hero:has(> .hero-copy:only-child) { grid-template-columns: 1fr; } }