/* ============================================================================
   PuckWeekly — Marketing site styles (light-first, static build)
   ----------------------------------------------------------------------------
   Ported from site.css. The design tokens that site.css used to pull from
   color_and_type.css are inlined into the :root block below, so this file has
   no external stylesheet dependency. Fonts load from Google Fonts in index.html
   (subset to only the weights this page actually uses).
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- TYPE  */
  --font-display: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;  /* headlines + wordmark */
  --font-sans:    'Instrument Sans', ui-sans-serif, system-ui, sans-serif; /* UI + body */
  --font-mono:    'DM Mono', ui-monospace, 'SF Mono', monospace;           /* clock, timers, numbers */

  /* ----------------------------------------------------------- NEUTRALS  */
  --ink-900: #1B2440;   /* deepest app background (sidebar)               */
  --ink-800: #24304D;   /* app background                                 */
  --ink-700: #2E3A59;   /* raised panel                                   */
  --ink-600: #364465;   /* card on dark                                   */
  --ink-500: #434F73;   /* hover / elevated card on dark                  */
  --line-dark: #4E6084; /* hairline borders on dark                       */

  --slate-500: #586A8C; /* muted text on light / disabled                 */
  --slate-400: #7888A8; /* secondary text on dark                         */
  --slate-300: #97A6C6; /* tertiary text on dark                          */
  --mist:      #B7C4DE; /* low-emphasis on dark                           */
  --fog:       #D5DEEF; /* light borders / dividers                       */
  --cloud:     #E6ECF8; /* light raised surface                           */
  --ice:       #EAF1FF; /* ice-tinted accent surface                      */
  --snow:      #F2F6FD; /* light app background                           */
  --white:     #FFFFFF;

  /* -------------------------------------------------------------- BRAND  */
  --electric-50:  #EAF1FF;
  --electric-100: #D2E0FF;
  --electric-300: #93B4FF;
  --electric-400: #5C8CFF;  /* used by the pricing hero card border */
  --electric-500: #2F6BFF;  /* PRIMARY */
  --electric-600: #1F54E6;  /* hover */
  --electric-700: #1842C0;  /* pressed */
  --electric-900: #0E2154;  /* tint surface on dark */

  /* ---------------------------------------------------------- SEMANTICS  */
  --goal-red:     #FF3B47;  /* live / goal light / destructive / alert    */
  --goal-red-600: #E11D2B;
  --goal-red-tint:#2A1018;

  --frost-green:     #1FCB8A; /* positive points / success / online       */
  --frost-green-600: #0E9E68;
  --frost-green-tint:#0A2A22;

  --gold-500: #F6B33C;      /* placement points / 1st / champion          */
  --gold-600: #D8920F;
  --gold-tint:#2A2110;

  /* --------------------------------------------------- SEMANTIC TOKENS  */
  --bg:        var(--snow);
  --bg-raised: var(--white);
  --surface:   var(--white);
  --surface-2: var(--cloud);
  --border:    var(--fog);
  --border-strong: #C9D2E3;

  --fg:   #0C1424;              /* primary text   */
  --fg-2: #3A465E;              /* secondary text */
  --fg-3: var(--slate-500);     /* muted text     */

  --primary:       var(--electric-500);
  --primary-hover: var(--electric-600);
  --primary-press: var(--electric-700);
  --on-primary:    var(--white);
  --primary-tint:  var(--electric-50);

  --positive: var(--frost-green-600);
  --negative: var(--goal-red-600);
  --live:     var(--goal-red);
  --accent-gold: var(--gold-600);

  /* ----------------------------------------------------------- RADIUS  */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---------------------------------------------------------- SPACING  */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* --------------------------------------------------------- SHADOWS  */
  --shadow-sm: 0 1px 2px rgba(13, 26, 56, 0.06), 0 1px 1px rgba(13, 26, 56, 0.04);
  --shadow-md: 0 4px 12px rgba(13, 26, 56, 0.08), 0 2px 4px rgba(13, 26, 56, 0.05);
  --shadow-lg: 0 16px 36px rgba(13, 26, 56, 0.12), 0 4px 10px rgba(13, 26, 56, 0.06);
  --shadow-dark: 0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255,255,255,0.03) inset;
  --glow-primary: 0 0 0 1px rgba(47,107,255,0.35), 0 8px 28px rgba(47,107,255,0.35);
  --glow-live:    0 0 0 1px rgba(255,59,71,0.4), 0 6px 22px rgba(255,59,71,0.35);

  /* --------------------------------------------------------- MOTION  */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
}

/* ==========================================================================
   BASE
   ========================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
/* Anchor targets sit under the 68px sticky bar. .sec's 80px top padding already
   clears it, but only by 12px — this adds breathing room and keeps the anchors
   correct if that padding ever changes. */
html { scroll-padding-top: 24px; }
body { font-family: var(--font-sans); background: var(--white); color: var(--fg); -webkit-font-smoothing: antialiased; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* buttons */
.mbtn { font-weight: 600; font-size: 15px; border-radius: var(--r-md); padding: 12px 22px; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 8px; transition: transform var(--t-fast) var(--ease-out), background var(--t-fast), box-shadow var(--t-fast); }
.mbtn:active { transform: scale(.98); }
.mbtn.primary { background: var(--electric-500); color: #fff; box-shadow: 0 6px 18px rgba(47,107,255,.28); }
.mbtn.primary:hover { background: var(--electric-600); }
.mbtn.ghost { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.mbtn.ghost:hover { background: var(--cloud); }
.mbtn.light { background: #fff; color: var(--ink-800); }
.mbtn.light:hover { background: var(--cloud); }
.mbtn.lg { font-size: 16px; padding: 14px 26px; }

/* ==========================================================================
   PRE-LAUNCH
   --------------------------------------------------------------------------
   RESTORE: re-enable this line only if you paste the app CTAs back in and want
   them hidden again. The markup itself was DELETED from index.html (see
   RESTORE.md), so today this rule matches nothing.
[href="https://app.puckweekly.ca"] { display: none !important; } */

/* RESTORE: same story — the Legal column was deleted from index.html, not hidden.
   Leave this commented out when you paste the column back, or it stays invisible.
.col-legal { display: none !important; } */

/* ==========================================================================
   NAV
   ========================================================================== */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--fog); }
.nav .inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo img { width: 46px; height: 46px; }  /* mark's ink fills ~47% of its 64x64 box, so the box runs larger than the old 30px placeholder to match the wordmark optically */
.logo .wm { font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -.025em; }
.logo .wm .b { color: var(--electric-500); }
.nav .links { display: flex; gap: 26px; margin-left: 14px; }
.nav .links a { font-size: 14.5px; font-weight: 500; color: var(--fg-2); }
.nav .links a:hover { color: var(--fg); }
.nav .spacer { flex: 1; }
/* RESTORE: .right / .signin match nothing today — the nav CTAs were removed
   (see RESTORE.md). Kept so the restored markup is styled correctly. .spacer is
   likewise inert until .right returns, when it pushes the group right. */
.nav .right { display: flex; align-items: center; gap: 12px; }
.nav .signin { font-size: 14.5px; font-weight: 600; color: var(--fg); }
@media (max-width: 760px){ .nav .links { display: none; } }

/* Added (not in site.css): at 760px the demo only hid the anchor links, which
   still left the logo + Sign in + CTA wider than a phone viewport and gave the
   whole document a horizontal scroll. Tighten the bar on small screens. */
@media (max-width: 480px){
  .wrap { padding: 0 18px; }
  .nav .inner { gap: 12px; }
  .nav .right { gap: 10px; }
  .nav .signin { font-size: 14px; }
  .nav .right .mbtn { padding: 10px 14px; font-size: 14px; }
  .logo img { width: 38px; height: 38px; }
  .logo .wm { font-size: 18px; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { background: linear-gradient(180deg, var(--snow), #fff); padding: 64px 0 72px; overflow: hidden; }
.hero .grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
@media (max-width: 920px){ .hero .grid { grid-template-columns: 1fr; gap: 36px; } }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--electric-700); background: var(--ice); padding: 6px 12px; border-radius: var(--r-pill); }
.hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 6vw, 62px); line-height: .98; letter-spacing: -.03em; margin: 18px 0 0; }
.hero h1 .b { color: var(--electric-500); }
.hero p.lead { font-size: 19px; line-height: 1.55; color: var(--fg-2); margin: 18px 0 28px; max-width: 480px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero .note { font-size: 13px; color: var(--fg-3); margin-top: 16px; display: flex; align-items: center; gap: 8px; }

/* hero product visual */
.visual { position: relative; }
.panel { border-radius: var(--r-xl); padding: 20px; }
.panel.dark { background: var(--ink-700); border: 1px solid var(--line-dark); }
.float { position: absolute; }

/* ==========================================================================
   SECTION HEADS
   ========================================================================== */
.sec { padding: 80px 0; }
.sec.tint { background: var(--snow); }
.sec-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.sec-head .kicker { margin-bottom: 14px; }
.sec-head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4vw, 40px); letter-spacing: -.025em; line-height: 1.05; margin: 0 0 14px; }
.sec-head p { font-size: 17px; line-height: 1.55; color: var(--fg-2); margin: 0; }

/* ==========================================================================
   HOW IT WORKS — steps
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 860px){ .steps { grid-template-columns: repeat(2, 1fr); } }
.step .n { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--electric-500); }
.step h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; margin: 12px 0 8px; }
.step p { font-size: 14.5px; line-height: 1.5; color: var(--fg-2); margin: 0; }
.step .bar { height: 2px; background: var(--fog); margin-top: 16px; position: relative; }
.step .bar i { position: absolute; left: 0; top: 0; height: 2px; width: 32px; background: var(--electric-500); }

/* ==========================================================================
   LIVE DRAFT BAND — dark
   ========================================================================== */
.darkband { background: var(--ink-900); color: #EEF2FB; }
.darkband .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 920px){ .darkband .grid { grid-template-columns: 1fr; } }
.darkband h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px,4vw,40px); letter-spacing: -.025em; line-height: 1.05; margin: 14px 0; }
.darkband p { font-size: 17px; line-height: 1.6; color: var(--mist); }
.flist { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.flist .fi { display: flex; gap: 12px; align-items: flex-start; }
.flist .fi .ic { width: 26px; height: 26px; border-radius: 7px; background: var(--electric-900); color: var(--electric-300); display: flex; align-items: center; justify-content: center; flex: none; }
.flist .fi b { font-weight: 600; }
.flist .fi span { color: var(--slate-300); }

/* ==========================================================================
   FEATURES — cards
   ========================================================================== */
.fcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 860px){ .fcards { grid-template-columns: 1fr; } }
.fcard { background: #fff; border: 1px solid var(--fog); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-sm); transition: box-shadow var(--t-base), transform var(--t-base); }
.fcard:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.fcard .ic { width: 42px; height: 42px; border-radius: var(--r-md); background: var(--ice); color: var(--electric-600); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.fcard h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.01em; margin: 0 0 8px; }
.fcard p { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); margin: 0; }

/* ==========================================================================
   PRICING
   --------------------------------------------------------------------------
   The .price / .toggle rules below are carried over from site.css. The demo's
   pricing cards were built from inline styles rather than these classes; the
   layout pieces that needed media queries have been lifted into the .pc-*
   classes underneath so the cards collapse properly on narrow screens.
   ========================================================================== */
.price { max-width: 460px; margin: 0 auto; background: #fff; border: 1px solid var(--fog); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.price .top { padding: 30px 32px; border-bottom: 1px solid var(--fog); }
.toggle { display: inline-flex; background: var(--cloud); border-radius: var(--r-pill); padding: 3px; gap: 2px; margin-bottom: 22px; }
.toggle button { border: none; background: none; padding: 7px 16px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--fg-2); }
.toggle button.on { background: #fff; color: var(--fg); box-shadow: var(--shadow-sm); }
.price .amt { font-family: var(--font-display); font-weight: 800; font-size: 52px; letter-spacing: -.03em; line-height: 1; }
.price .amt small { font-family: var(--font-sans); font-size: 16px; font-weight: 500; color: var(--fg-3); letter-spacing: 0; }
.price .per { color: var(--fg-2); font-size: 15px; margin-top: 8px; }
.price .split { padding: 20px 32px; border-bottom: 1px solid var(--fog); background: var(--cloud); }
.price .split-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.price .split-head > span:first-child { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); }
.price .split-out b { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -.02em; color: var(--electric-600); }
.price .split-out small { font-size: 13px; font-weight: 500; color: var(--fg-3); }
.price .split-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--r-pill); background: var(--fog); margin: 16px 0 10px; cursor: pointer; }
.price .split-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--electric-500); border: 3px solid #fff; box-shadow: var(--shadow-sm); cursor: pointer; }
.price .split-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--electric-500); border: 3px solid #fff; box-shadow: var(--shadow-sm); cursor: pointer; }
.price .split-foot { display: flex; justify-content: space-between; font-size: 13px; color: var(--fg-3); font-weight: 500; }
.price .body { padding: 26px 32px 32px; }
.price ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.price li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--fg); }
.price li .ck { color: var(--frost-green-600); flex: none; margin-top: 1px; }

/* --- pricing cards as built in the demo, made responsive --- */
.pc-hero { background: #fff; border: 2px solid var(--electric-400); border-radius: var(--r-xl); box-shadow: var(--glow-primary), var(--shadow-lg); padding: 36px 40px; margin-bottom: 16px; position: relative; }
.pc-hero .badge { position: absolute; top: 22px; right: 26px; background: var(--gold-500); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; padding: 5px 14px; border-radius: var(--r-pill); }
.pc-hero .row { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: start; }
.pc-name { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -.02em; color: var(--fg); margin-bottom: 4px; }
.pc-window { font-size: 14px; color: var(--fg-2); margin-bottom: 22px; }
.pc-feats { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 10px; }
.pc-feats li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fg-2); }
.pc-feats li .ck { color: var(--frost-green-600); flex: none; display: inline-flex; }
.pc-save { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.pc-save b { color: var(--gold-500); font-weight: 700; }
.pc-save span { color: var(--fg-3); }
.pc-buy { text-align: right; min-width: 160px; }
.pc-amt { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--fg); }
.pc-amt small { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--fg-3); letter-spacing: 0; }
.pc-per { color: var(--fg-2); font-size: 14px; margin-top: 6px; }
.pc-hero .pc-amt { font-size: 52px; margin-bottom: 2px; }
.pc-hero .pc-per { margin-bottom: 28px; }
.pc-hero .mbtn { white-space: nowrap; }

.pc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 14px; }
.pc-seg { background: #fff; border: 1px solid var(--fog); border-radius: var(--r-xl); box-shadow: var(--shadow-md); padding: 26px 28px; display: flex; flex-direction: column; }
.pc-seg .pc-name { font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.pc-seg .pc-window { font-size: 13px; margin-bottom: 20px; }
.pc-seg .foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pc-seg .pc-amt { font-size: 38px; }

.pc-playoff { background: var(--snow); border: 1px solid var(--fog); border-radius: var(--r-xl); padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; opacity: .82; }
.pc-playoff .pc-name { font-weight: 700; font-size: 17px; letter-spacing: -.01em; margin-bottom: 3px; }
.pc-playoff .pc-window { font-size: 13px; color: var(--fg-3); margin-bottom: 0; }
.pc-playoff .right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pc-playoff .amtline { display: flex; align-items: baseline; gap: 6px; }
.pc-playoff .amtline .pc-amt { font-size: 30px; }
.pc-playoff .amtline .cur { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--fg-3); }

/* --- beta notice (stands in for the pricing cards while pricing is unannounced).
       The .pc-* rules above are deliberately kept so the cards can be restored. --- */
.beta { max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid var(--fog); border-radius: var(--r-xl); box-shadow: var(--shadow-md); padding: 44px 40px; text-align: center; }
.beta-badge { display: inline-block; background: var(--electric-500); color: #fff; font-weight: 600; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; padding: 5px 14px; border-radius: var(--r-pill); margin-bottom: 18px; }
.beta h3 { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -.02em; color: var(--fg); margin: 0 0 10px; }
.beta p { font-size: 16px; line-height: 1.55; color: var(--fg-2); margin: 0; }

@media (max-width: 760px){
  .pc-hero { padding: 28px 24px; }
  .pc-hero .row { grid-template-columns: 1fr; gap: 24px; }
  .pc-hero .badge { position: static; display: inline-block; margin-bottom: 14px; }
  .pc-buy { text-align: left; min-width: 0; }
  .pc-hero .pc-per { margin-bottom: 18px; }
  .pc-grid { grid-template-columns: 1fr; }
  .beta { padding: 32px 24px; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--ink-900); color: var(--slate-300); padding: 56px 0 40px; }
.footer .grid { display: flex; gap: 40px; flex-wrap: wrap; justify-content: space-between; }
.footer .wm { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -.025em; color: #fff; }
.footer .wm .b { color: var(--electric-300); }
.footer .col h4 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-400); margin: 0 0 14px; font-weight: 600; }
.footer .col a { display: block; font-size: 14px; color: var(--slate-300); margin-bottom: 10px; }
.footer .col a:hover { color: #fff; }
.footer .base { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--ink-600); font-size: 13px; color: var(--slate-400); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.footer .fine { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--slate-400); }
.footer .blurb { max-width: 260px; }
.footer .blurb p { font-size: 14px; line-height: 1.55; color: var(--slate-400); margin: 0; }
.footer .blurb .logo { margin-bottom: 14px; }
.footer .blurb .logo img { width: 42px; height: 42px; margin-right: 6px; }