/* The public homepage (PRED-892), from the owner's locked design docs/mockups/homepage.html
   (option K2). Plum and ember, never green. Every class starts pub- so nothing here touches
   the rest of the site. Phones first: the two-column layouts start at 981px. */

/* The page */
body.pub { margin: 0; background: #1a0f1f; color: #1a0f1f; font-family: var(--body); }
.pub main { display: block; }
.pub-wrap { max-width: 1240px; margin: 0 auto; }
.pub-s { padding: 44px 22px; }
.pub-dark { color: #fff; background: linear-gradient(135deg, #2a1033, #1a0f1f); }
.pub-dark .pub-muted { color: rgba(255, 255, 255, .72); }
.pub-light { background: #fff6ee; color: #1a0f1f; }
.pub-muted { color: #6a5c66; }
.pub-center { text-align: center; }
.pub-two, .pub-three { display: grid; grid-template-columns: 1fr; gap: 50px; align-items: center; }
.pub-dark a:not(.pub-btn) { color: #fff; }

/* Words */
.pub-disp, .pub h3 { color: inherit; }
.pub-disp { font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .01em; line-height: .92; margin: 0; }
.pub-h1 { font-size: clamp(52px, 8vw, 84px); margin: 14px 0; }
.pub-h2 { font-size: clamp(38px, 5vw, 56px); margin: 10px 0 8px; }
.pub-h-org { font-size: clamp(38px, 4.6vw, 52px); }
.pub-h-ask { font-size: clamp(36px, 4.2vw, 48px); }
.pub-grad { background: linear-gradient(90deg, #ffd76a, #f5a623 55%, #ff7a59); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pub-eyebrow { font: 600 12px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; margin: 0; }
.pub-ember-ink { color: #d4572e; }
.pub-lead { font-size: 20px; max-width: 540px; margin: 0 0 26px; }
.pub-intro { font-size: 17px; max-width: 62ch; margin: 0 0 26px; }

/* Buttons */
.pub-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 15px 26px; font: 600 16px/1 var(--body); cursor: pointer; text-decoration: none; }
.pub-btn-sm { padding: 11px 20px; }
.pub-gold { background: linear-gradient(135deg, #ffd76a, #f5a623); color: #2b1d00; box-shadow: 0 10px 30px rgba(245, 166, 35, .35); }
.pub-gold:hover { color: #2b1d00; }
@media (hover: hover) { .pub-gold:hover { filter: brightness(1.05); } }
.pub-ember { background: linear-gradient(135deg, #ff7a59, #e39b2a); color: #fff; justify-content: center; }
.pub-line { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.pub-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* The top bar */
.pub-hero { background: radial-gradient(1000px 600px at 70% 10%, rgba(255, 122, 89, .42), transparent 60%), radial-gradient(800px 500px at 10% 100%, rgba(227, 155, 42, .3), transparent 60%), linear-gradient(160deg, #2a1033, #1a0f1f 70%); }
.pub-nav { display: flex; align-items: center; gap: 22px; padding: 18px 22px; font: 600 14px/1 var(--body); }
.pub-nav a { text-decoration: none; }
.pub-logo { display: flex; align-items: center; gap: 10px; font: 500 24px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; margin-right: auto; }
.pub-logo .flare-logo { width: 40px; height: 40px; }
.pub-nav-link { display: none; }

/* The hero's picture: the desktop Home with a phone over its corner */
.pub-hero-s { padding-top: 30px; }
.pub-hero-pic { position: relative; padding: 20px 0 60px; }
.pub-hero-desk { width: 92%; }
.pub-hero-phone { position: absolute; right: 0; bottom: 0; }
.pub-ribbon { display: flex; gap: 50px; justify-content: center; flex-wrap: wrap; padding: 24px; border-top: 1px solid rgba(255, 255, 255, .1); }
.pub-stat { text-align: center; }
.pub-stat b { display: block; font: 500 50px/1 var(--display); }
.pub-stat span { font-size: 14px; opacity: .75; }

/* Real screens: a phone frame and a browser window */
.pub-shot { width: 250px; flex: none; border-radius: 38px; padding: 9px; background: linear-gradient(160deg, #3a3036, #0e0a0d); box-shadow: 0 30px 70px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .1); position: relative; }
.pub-shot img { display: block; width: 100%; height: auto; border-radius: 30px; }
.pub-shot.pub-sm { width: 200px; border-radius: 30px; padding: 7px; }
.pub-shot.pub-sm img { border-radius: 24px; }
.pub-browser { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .12); }
.pub-bar { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #2b2230; }
.pub-bar span { flex: 1; height: 20px; border-radius: 6px; background: rgba(255, 255, 255, .08); font: 500 11px/20px var(--body); color: rgba(255, 255, 255, .6); padding-left: 10px; overflow: hidden; white-space: nowrap; }
.pub-browser img { display: block; width: 100%; height: auto; }

/* Ticked lists */
.pub-tick { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pub-tick li { display: flex; gap: 10px; align-items: flex-start; }
.pub-tick .bi { color: #e39b2a; }
.pub-tick-lg { margin-top: 18px; font-size: 17px; }

/* Six games: the list of games beside a slide for each */
.pub-games { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
.pub-list { display: grid; gap: 8px; }
.pub-pick { text-align: left; border: 1px solid #eadfe3; background: #fff; border-radius: 16px; padding: 14px 16px; cursor: pointer; font: 600 15px/1.2 var(--body); display: flex; gap: 10px; align-items: center; }
.pub-pick small { display: block; font-weight: 400; color: #6a5c66; margin-top: 3px; }
.pub-pick .bi { font-size: 20px; color: #d4572e; }
.pub-pick:has(input:checked) { border-color: #e39b2a; box-shadow: 0 8px 24px rgba(227, 155, 42, .2); }
.pub-pick:has(input:focus-visible) { outline: 2px solid #d4572e; outline-offset: 2px; }
.pub-slides { overflow: hidden; border-radius: 26px; min-width: 0; }
.pub-track { display: flex; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.pub-slide { flex: 0 0 100%; min-width: 0; overflow: hidden; display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; padding: 26px 22px; }
.pub-slide > * { min-width: 0; }
.pub-game { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: #d4572e; }
.pub-slide h3 { font: 500 clamp(38px, 4.4vw, 46px)/.92 var(--display); text-transform: uppercase; margin: 12px 0; }
.pub-cols { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 18px 0 0; font-size: 14px; }
.pub-cols b { font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; display: block; margin-bottom: 8px; opacity: .65; }
.pub-setup { margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px dashed #e7b48a; font-size: 14px; color: #5a3e2e; }
.pub-setup b { color: #a8431f; }

/* The chosen game: its slide in view, its screens and notes moved into place */
.pub-games:has(.pub-pick:nth-child(2) input:checked) .pub-track { transform: translateX(-100%); }
.pub-games:has(.pub-pick:nth-child(3) input:checked) .pub-track { transform: translateX(-200%); }
.pub-games:has(.pub-pick:nth-child(4) input:checked) .pub-track { transform: translateX(-300%); }
.pub-games:has(.pub-pick:nth-child(5) input:checked) .pub-track { transform: translateX(-400%); }
.pub-games:has(.pub-pick:nth-child(6) input:checked) .pub-track { transform: translateX(-500%); }
.pub-games:has(.pub-pick:nth-child(1) input:checked) .pub-slide:nth-child(1) .pub-comp > *,
.pub-games:has(.pub-pick:nth-child(2) input:checked) .pub-slide:nth-child(2) .pub-comp > *,
.pub-games:has(.pub-pick:nth-child(3) input:checked) .pub-slide:nth-child(3) .pub-comp > *,
.pub-games:has(.pub-pick:nth-child(4) input:checked) .pub-slide:nth-child(4) .pub-comp > *,
.pub-games:has(.pub-pick:nth-child(5) input:checked) .pub-slide:nth-child(5) .pub-comp > *,
.pub-games:has(.pub-pick:nth-child(6) input:checked) .pub-slide:nth-child(6) .pub-comp > * { opacity: 1; translate: 0 0; scale: 1; }

/* Each game's picture, composed its own way (the mockup's K2 scenes) */
.pub-comp { position: relative; height: 360px; width: 100%; }
.pub-comp > * { position: absolute; opacity: 0; transition: opacity .6s ease, translate .8s cubic-bezier(.2, .8, .2, 1), scale .8s cubic-bezier(.2, .8, .2, 1); }
.pub-comp .pub-browser { translate: 70px 0; }
.pub-comp .pub-shot { width: 140px; border-radius: 24px; padding: 6px; z-index: 3; translate: 0 60px; transition-delay: .2s; }
.pub-comp .pub-shot img { border-radius: 19px; }
.pub-comp.pub-dh .pub-shot { width: 90px; padding: 5px; border-radius: 20px; }
.pub-comp.pub-dh .pub-shot img { border-radius: 16px; }
.pub-comp.pub-ph .pub-shot { width: 180px; border-radius: 34px; padding: 8px; translate: 0 0; scale: .85; transition-delay: .1s; }
.pub-comp.pub-ph .pub-shot img { border-radius: 27px; }
.pub-frames { position: relative; aspect-ratio: 1568 / 735; }
.pub-frames img { position: absolute; inset: 0; }
.pub-glow { width: 360px; height: 360px; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 122, 89, .45), rgba(227, 155, 42, .12) 45%, transparent 68%); }
.pub-chip { display: inline-flex; gap: 8px; align-items: center; background: #fff; color: #1a0f1f; border-radius: 999px; padding: 10px 15px; font: 600 13px/1 var(--body); box-shadow: 0 14px 34px rgba(26, 15, 31, .2); white-space: nowrap; z-index: 5; translate: 0 16px; transition-delay: .55s; }
.pub-chip.pub-c1 { transition-delay: .75s; }
.pub-chip .bi { color: #d4572e; font-size: 15px; }
.pub-k2a .pub-browser { left: 0; top: 50px; width: 98%; } .pub-k2a .pub-shot { right: 0; top: 0; } .pub-k2a .pub-c0 { left: 4%; bottom: 14px; } .pub-k2a .pub-c1 { right: 6%; bottom: 40px; }
.pub-k2b .pub-shot { right: 6%; top: 0; } .pub-k2b .pub-browser { left: 0; top: 90px; width: 54%; translate: -70px 0; } .pub-k2b .pub-c0 { left: 2%; top: 30px; } .pub-k2b .pub-c1 { left: 6%; bottom: 40px; }
.pub-k2c .pub-browser { right: 0; bottom: 40px; width: 96%; translate: 0 60px; } .pub-k2c .pub-shot { left: 4%; top: 0; } .pub-k2c .pub-c0 { right: 4%; top: 30px; } .pub-k2c .pub-c1 { left: 30%; bottom: 0; }
.pub-k2d .pub-shot, .pub-k2f .pub-shot { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(3deg); }
.pub-k2d .pub-c0, .pub-k2f .pub-c0 { left: 0; top: 24%; } .pub-k2d .pub-c1, .pub-k2f .pub-c1 { right: 0; bottom: 24%; }
.pub-k2e .pub-browser { left: 0; top: 0; width: 96%; translate: 0 -50px; } .pub-k2e .pub-shot { right: 3%; bottom: 0; transform: rotate(-3deg); } .pub-k2e .pub-c0 { left: 2%; bottom: 90px; } .pub-k2e .pub-c1 { left: 16%; bottom: 24px; }

/* The predictor's desktop shows its live scores, the table and stats in turn, 3 seconds each */
.pub-frames img { opacity: 1; }
.pub-cycle img { opacity: 0; animation: pub-cycle 9s infinite; }
.pub-cycle img:nth-child(2) { animation-delay: -6s; }
.pub-cycle img:nth-child(3) { animation-delay: -3s; }
@keyframes pub-cycle { 0%, 29% { opacity: 1; } 33.33%, 95.67% { opacity: 0; } 100% { opacity: 1; } }

/* Everything included */
.pub-feats { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
.pub-fp { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); }
.pub-fp .bi { font-size: 18px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: rgba(255, 122, 89, .18); color: #ffb08f; }
.pub-fp b { display: block; font: 600 15px/1.2 var(--body); color: #fff; }
.pub-fp small { display: block; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .68); margin-top: 3px; }
.pub-fp.pub-more { border-style: dashed; background: transparent; align-items: center; }
.pub-fp.pub-more .bi { background: rgba(255, 215, 106, .16); color: #ffd76a; }
.pub-grp { font: 600 11px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: #ffd76a; margin: 26px 0 10px; display: flex; align-items: center; gap: 8px; }
.pub-devices { display: flex; gap: 10px; flex-wrap: wrap; }
.pub-dev { display: inline-flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); font: 600 14px/1.2 var(--body); }
.pub-dev .bi { font-size: 20px; color: #ffd76a; }
.pub-dev small { display: block; font-weight: 400; font-size: 12px; color: rgba(255, 255, 255, .65); }
.pub-stack { display: flex; gap: 10px; justify-content: center; }
.pub-stack .pub-shot { width: 30%; max-width: 200px; padding: 5px; border-radius: 22px; }
.pub-stack .pub-shot img { border-radius: 18px; }

/* For the organiser: two phones side by side */
.pub-pair { display: flex; gap: 18px; justify-content: center; align-items: flex-end; }
.pub-pair .pub-shot { width: 45%; max-width: 250px; }

/* Prices */
.pub-prices { background: linear-gradient(135deg, #2a1033, #3b1430); }
.pub-plans { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 34px; }
.pub-pl { border-radius: 20px; padding: 20px 16px; display: flex; flex-direction: column; gap: 6px; }
.pub-glass { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.pub-n { font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.pub-p { font: 500 46px/1 var(--display); }
.pub-ps { font-size: 13px; opacity: .75; }
.pub-pl ul { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; display: grid; gap: 5px; }
.pub-pl li::before { content: "\F26E"; font-family: bootstrap-icons; margin-right: 6px; color: #e39b2a; }
.pub-star { background: #fff; color: #1a0f1f; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.pub-badge { align-self: flex-start; font: 600 10px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: linear-gradient(135deg, #ffd76a, #f5a623); color: #2b1d00; }
.pub-after { font-size: 13px; font-weight: 600; color: #a8431f; }
.pub-small-print { margin: 22px 0 0; }

/* Want to know more? */
.pub-ask { display: grid; grid-template-columns: 1fr; gap: 10px; }
.pub-ask-field { display: grid; gap: 4px; }
.pub-ask input, .pub-ask textarea { width: 100%; border-radius: 12px; border: 1px solid rgba(26, 15, 31, .18); padding: 14px; font: inherit; background: #fff; color: #1a0f1f; }
.pub-ask-error { color: #b3261e; font-size: 13px; }
.pub-ask-note, .pub-thanks { grid-column: 1 / -1; font-size: 15px; }
.pub-thanks { background: #fff1e6; color: #5a3e2e; }
.pub-thanks > .bi { color: #d4572e; }
.pub-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* The footer, on the page's plum */
.pub .site-foot { background: #1a0f1f; color: rgba(255, 255, 255, .72); border-top-color: rgba(255, 255, 255, .1); }
.pub .site-foot a { color: #fff; }

/* Wider screens */
@media (min-width: 640px) {
  .pub-nav-link { display: inline; }
  .pub-feats, .pub-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-comp { height: 400px; }
  .pub-comp.pub-dh .pub-shot { width: 108px; }
  .pub-comp.pub-ph .pub-shot { width: 230px; }
}
@media (min-width: 981px) {
  .pub-s { padding: 72px 56px; }
  .pub-nav { padding: 18px 40px; }
  .pub-two { grid-template-columns: 1fr 1fr; }
  .pub-two-included { grid-template-columns: .85fr 1.15fr; }
  .pub-games { grid-template-columns: 300px 1fr; }
  .pub-slide { grid-template-columns: .9fr 1.3fr; padding: 30px 20px 30px 34px; }
  .pub-cols { grid-template-columns: 1fr 1fr; }
  .pub-comp { height: 420px; }
  .pub-comp.pub-ph { height: 440px; }
  .pub-plans { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pub-star { transform: translateY(-10px); }
  .pub-ask { grid-template-columns: 1fr 1fr 1fr auto; align-items: start; }
  .pub-ask-msg { grid-column: 1 / 4; }
  .pub-ask .pub-btn { grid-column: 4; grid-row: 2; align-self: end; }
  .pub-stack { position: relative; height: 470px; display: block; }
  .pub-stack .pub-shot { position: absolute; width: 200px; max-width: none; padding: 7px; border-radius: 30px; }
  .pub-stack .pub-shot img { border-radius: 24px; }
  .pub-stack .pub-shot:nth-child(1) { left: 0; top: 40px; transform: rotate(-6deg); }
  .pub-stack .pub-shot:nth-child(2) { left: 120px; top: 0; z-index: 2; }
  .pub-stack .pub-shot:nth-child(3) { left: 240px; top: 40px; transform: rotate(6deg); }
  .pub-pair .pub-shot { width: 250px; }
}

/* Visitors who ask for less motion get still pictures and no sliding */
@media (prefers-reduced-motion: reduce) {
  .pub-track, .pub-comp > * { transition: none; }
  .pub-cycle img { animation: none; }
  .pub-cycle img:first-child { opacity: 1; }
}

/* Phones: a smaller phone over the hero's desktop */
@media (max-width: 639.98px) {
  .pub-hero-phone .pub-shot.pub-sm { width: 120px; padding: 5px; border-radius: 20px; }
  .pub-hero-phone .pub-shot.pub-sm img { border-radius: 16px; }
  .pub-ribbon { gap: 24px 36px; }
}