:root {
  --carbon: #0a0b0d;
  --shell: #14161b;
  --shell2: #1c1f26;
  --shell3: #262a33;
  --seam: #333844;
  --seam2: #4a515f;
  --ivory: #f1f3f6;
  --haze: #a3a9b6;
  --mint: #0afe87;
  --mint2: #12d676;
  --mint-ink: #04170d;
  --ruby: #e81f74;
  --reach: 1200px;
  --curve2: 6px;
  --gutter: 20px;
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: Tahoma, Verdana, Geneva, "DejaVu Sans", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; font: 16px/1.6 var(--sans); color: var(--ivory); background: var(--carbon); overflow-x: hidden; max-width: 100%; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.hit:focus-visible, a:focus-visible, label:focus-visible, input:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
h1, h2, h3 { margin: 0 0 15px; font-family: var(--serif); font-weight: 700; line-height: 1.24; color: var(--ivory); overflow-wrap: break-word; }
h1 { font-size: 40px; }
h2 { font-size: 28px; }
h3 { font-size: 20px; }
p { margin: 0 0 15px; overflow-wrap: break-word; }
ul, ol { margin: 0 0 15px; padding-left: 20px; }
li { margin-bottom: 7px; }
strong { color: #fff; }
table { width: 100%; border-collapse: collapse; margin: 0 0 6px; font-size: 15px; }
th, td { padding: 13px 15px; border: 1px solid var(--seam); text-align: left; vertical-align: middle; }
th { background: var(--shell3); color: #fff; font-weight: 700; }
td { background: var(--shell); }
tr:nth-child(even) td { background: var(--shell2); }
td:first-child { font-weight: 700; }
.boxwrap5 { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 28px; border-radius: var(--curve2); }

.court { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }
.slab5, .rack5, .talk, .quiz, .scale5, .base5, .getapp5, .edited { content-visibility: auto; contain-intrinsic-size: auto 600px; }
.hold5 { max-width: calc(var(--reach) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter) 48px; }
.hit { cursor: pointer; -webkit-user-select: none; user-select: none; }

@keyframes pulse5 {
  0%, 100% { transform: scale(1); box-shadow: 0 10px 22px rgba(10,254,135,.2); }
  50% { transform: scale(1.03); box-shadow: 0 10px 30px rgba(10,254,135,.44); }
}
.play-btn, .signup, .talk__btn { animation: pulse5 2.9s ease-in-out infinite; will-change: transform; }
.play-btn:hover, .signup:hover, .talk__btn:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .play-btn, .signup, .talk__btn { animation: none; } }

.play-btn { display: flex; align-items: center; justify-content: center; text-align: center; max-width: 360px; width: 100%; min-height: 56px; margin: 12px auto 0; padding: 12px 26px; border-radius: var(--curve2); background: linear-gradient(180deg,#1dff95,#06d274); color: var(--mint-ink); font-family: var(--serif); font-size: 19px; font-weight: 700; text-decoration: none; transition: filter .2s, transform .1s; }
.play-btn:hover { filter: brightness(1.08); }
.play-btn:active { transform: scale(.98); }

.crown { position: sticky; top: 0; z-index: 60; background: var(--shell); border-bottom: 1px solid var(--seam); }
.crown__in { max-width: calc(var(--reach) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); height: 72px; display: flex; align-items: center; gap: 16px; }
.wordmark5 { margin-right: auto; display: flex; align-items: center; }
.wordmark5 img { height: 46px; width: auto; max-width: none; display: block; }
.mainnav__list { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.mainnav__list li { margin: 0; }
.mainnav__list .hit { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px 8px 11px; font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none; color: var(--ivory); background: var(--shell2); border: 1px solid var(--seam); border-left: 3px solid var(--seam2); border-radius: var(--curve2); transition: border-left-color .2s, background .2s; }
.mainnav__list .hit svg { width: 16px; height: 16px; fill: var(--mint); flex: none; }
.mainnav__list .hit:hover { background: var(--shell3); border-left-color: var(--mint); }
.mainnav__cta { display: none; }
.crown__cta { display: flex; gap: 9px; }
.signin, .signup { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 18px; border-radius: var(--curve2); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; transition: filter .2s, background .2s; }
.signin { background: transparent; color: var(--mint); border: 1px solid var(--mint); }
.signin:hover { background: rgba(10,254,135,.1); }
.signup { background: linear-gradient(180deg,#1dff95,#06d274); color: var(--mint-ink); }
.signup:hover { filter: brightness(1.08); }
.burgflag { position: absolute; opacity: 0; pointer-events: none; }
.burg { display: none; width: 44px; height: 44px; padding: 10px; flex-direction: column; justify-content: space-between; cursor: pointer; border-radius: var(--curve2); border: 1px solid var(--seam); background: var(--shell2); }
.burg span { display: block; height: 3px; border-radius: 2px; background: var(--ivory); transition: transform .25s, opacity .25s; }

.opener5 { padding: 34px 0 46px; text-align: center; }
.opener5__h1 { margin-bottom: 18px; }
.opener5__shot { display: block; margin: 0 auto 22px; border-radius: var(--curve2); overflow: hidden; border: 1px solid var(--seam); }
.opener5__shot img { width: 100%; display: block; }
.opener5__text { text-align: left; font-size: 16.5px; margin: 0 auto; }
.opener5__text p:last-child { margin-bottom: 0; }

.shotbar { margin: 8px 0 46px; }
.shotbar .hit { display: block; border-radius: var(--curve2); overflow: hidden; border: 1px solid var(--seam); }
.shotbar img { width: 100%; }

.snapcard { margin: 0 0 46px; }
.snapcard__cap { display: flex; align-items: center; justify-content: center; min-height: 64px; margin: 0 0 22px; padding: 12px 22px; border-radius: var(--curve2); background: linear-gradient(120deg,var(--mint),#06c46a); text-align: center; font-family: var(--serif); font-size: 23px; font-weight: 700; color: var(--mint-ink); }
.snapcard td:first-child { width: 33%; }

.slab5 { margin: 0 0 46px; min-width: 0; }
.slab5--mid h2 { text-align: center; }
.text5 p, .text5 li { font-size: 16.5px; }
.text5 h3 { margin-top: 26px; }
.text5 table { font-size: 15px; }

.scale5__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.scale5__col { padding: 24px; border-radius: var(--curve2); background: var(--shell); border: 1px solid var(--seam); min-width: 0; }
.scale5__col h3 { margin-bottom: 14px; }
.scale5__col ul { margin: 0; padding: 0; list-style: none; }
.scale5__col li { position: relative; padding-left: 26px; margin-bottom: 11px; }
.scale5__col li::before { position: absolute; left: 0; top: 1px; font-weight: 700; font-size: 17px; }
.scale5__col--up li::before { content: "\2714"; color: var(--mint); }
.scale5__col--down li::before { content: "\2718"; color: var(--ruby); }

.rack5 { margin: 0 0 50px; }
.rack5 > h2 { text-align: center; margin-bottom: 22px; }
.rack5__tabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; list-style: none; margin: 0 0 22px; padding: 0; }
.rack5__tabs li { margin: 0; }
.rack5__tab { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: var(--curve2); background: var(--shell2); border: 1px solid var(--seam); color: var(--ivory); font-weight: 700; font-size: 15px; cursor: pointer; transition: border-color .2s, background .2s; }
.rack5__tab svg { fill: currentColor; flex: none; }
.rack5__tab:hover, .rack5__tab.open { background: var(--shell3); border-color: var(--mint); color: #fff; }
.sheet { display: none; }
.sheet.open { display: block; }
.rack5__grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 18px 14px; }
.plate { display: block; text-decoration: none; color: var(--ivory); min-width: 0; }
.plate__pic { display: block; position: relative; border-radius: var(--curve2); overflow: hidden; background: var(--shell2); border: 1px solid var(--seam); aspect-ratio: 360/472; }
.plate__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.plate:hover .plate__pic img { transform: scale(1.05); }
.plate__name { display: block; margin-top: 9px; font-size: 13.5px; font-weight: 700; font-family: var(--serif); line-height: 1.3; }
.plate__name .credit5 { display: block; font-family: var(--sans); font-size: 12px; font-weight: 400; color: var(--haze); }
.plate--logo .plate__pic { aspect-ratio: 240/120; display: flex; align-items: center; justify-content: center; padding: 16px; }
.plate--logo .plate__pic img { width: 100%; height: 100%; object-fit: contain; }
.plate--logo .plate__name { text-align: center; }

.getapp5 { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.getapp5-btn { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 20px; border-radius: var(--curve2); background: var(--shell2); border: 1px solid var(--seam); text-decoration: none; color: var(--ivory); transition: border-color .2s, background .2s; }
.getapp5-btn:hover { border-color: var(--mint); background: var(--shell3); }
.getapp5-btn svg { width: 26px; height: 26px; flex: none; fill: var(--ivory); }
.getapp5-btn b { display: block; font-size: 15px; line-height: 1.1; font-family: var(--serif); }
.getapp5-btn span { display: block; font-size: 11px; color: var(--haze); }

.talk { margin: 0 0 50px; }
.talk__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; margin-bottom: 20px; border-radius: var(--curve2); background: var(--shell); border: 1px solid var(--seam); }
.talk__cap { font-size: 14px; color: var(--haze); margin-bottom: 4px; }
.talk__score { display: flex; align-items: center; gap: 10px; }
.talk__score > span { font-size: 26px; font-weight: 700; font-family: var(--serif); }
.talk__score small { color: var(--haze); font-size: 13px; }
.rate5 { display: inline-flex; gap: 2px; }
.rate5 svg { width: 18px; height: 18px; fill: var(--mint); }
.talk__btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border-radius: var(--curve2); background: linear-gradient(180deg,#1dff95,#06d274); color: var(--mint-ink); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; cursor: pointer; }
.talk__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.talkbox { padding: 20px; border-radius: var(--curve2); background: var(--shell); border: 1px solid var(--seam); min-width: 0; }
.talkbox__who { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.talkbox__face { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--curve2); background: linear-gradient(120deg,var(--mint),var(--mint2)); font-weight: 700; font-size: 18px; color: var(--mint-ink); flex: none; font-family: var(--serif); }
.talkbox__id span { display: block; font-weight: 700; }
.talkbox__id small { color: var(--haze); font-size: 12px; }
.talkbox__stars { margin-bottom: 10px; }
.talkbox__text p { margin: 0; font-size: 15px; }

.quiz { margin: 0 0 44px; }
.quiz__item { padding: 18px 22px; margin-bottom: 12px; border-radius: var(--curve2); background: var(--shell); border: 1px solid var(--seam); }
.quiz__item h3 { font-size: 18px; margin-bottom: 8px; }
.quiz__item p { margin: 0; font-size: 16px; }

.edited { margin: 0 0 18px; }
.edited__box { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-radius: var(--curve2); background: var(--shell); border: 1px solid var(--seam); font-size: 15px; color: var(--haze); }
.edited__box svg { width: 26px; height: 26px; fill: var(--mint); flex: none; }
.edited__box strong { color: var(--ivory); }

.base5 { background: var(--shell); border-top: 1px solid var(--seam); }
.base5__top { max-width: calc(var(--reach) + var(--gutter)*2); margin: 0 auto; padding: 40px var(--gutter); display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.base5__brand { max-width: 360px; }
.base5__brand img.markf { height: 50px; width: auto; max-width: none; margin-bottom: 16px; }
.base5__desc { font-size: 14px; color: var(--haze); margin-bottom: 18px; }
.base5__social { display: flex; gap: 10px; }
.base5__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--curve2); background: var(--shell2); border: 1px solid var(--seam); transition: border-color .2s, background .2s; }
.base5__social a:hover { border-color: var(--mint); background: var(--shell3); }
.base5__social svg { width: 19px; height: 19px; fill: var(--ivory); }
.base5__cols { display: flex; gap: 56px; flex-wrap: wrap; }
.base5__cap { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--haze); margin-bottom: 12px; font-family: var(--serif); }
.base5__nav ul { list-style: none; margin: 0; padding: 0; }
.base5__nav li { margin-bottom: 9px; }
.base5__nav .hit { font-size: 14px; text-decoration: none; color: var(--ivory); cursor: pointer; }
.base5__nav .hit:hover { color: var(--mint); }
.base5__pay { border-top: 1px solid var(--seam); }
.base5__payrow { max-width: calc(var(--reach) + var(--gutter)*2); margin: 0 auto; padding: 24px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; }
.base5__payrow img { height: 30px; width: auto; opacity: .92; }
.base5__seals { border-top: 1px solid var(--seam); }
.base5__sealrow { max-width: calc(var(--reach) + var(--gutter)*2); margin: 0 auto; padding: 24px var(--gutter); display: grid; grid-template-columns: repeat(6,1fr); gap: 16px; align-items: center; justify-items: center; }
.base5__sealrow img { height: 48px; width: auto; opacity: .92; transition: opacity .2s; }
.base5__sealrow a:hover img { opacity: 1; }
.plus18 { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--curve2); border: 3px solid var(--ruby); color: var(--ruby); font-weight: 700; font-size: 15px; font-family: var(--serif); }
.base5__foot { border-top: 1px solid var(--seam); }
.base5__fine { max-width: calc(var(--reach) + var(--gutter)*2); margin: 0 auto; padding: 22px var(--gutter); font-size: 12.5px; line-height: 1.7; color: var(--haze); }
.base5__fine p { margin: 0 0 8px; }

@media (max-width: 1180px) {
  .burg { display: flex; order: 3; }
  .crown__cta { order: 2; margin-left: auto; }
  .wordmark5 { margin-right: 0; }
  .mainnav { display: none; position: absolute; left: 0; right: 0; top: 72px; padding: 12px var(--gutter) 20px; background: var(--shell); border-bottom: 1px solid var(--seam); }
  .burgflag:checked ~ .mainnav { display: block; }
  .burgflag:checked ~ .burg span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
  .burgflag:checked ~ .burg span:nth-child(2) { opacity: 0; }
  .burgflag:checked ~ .burg span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
  .mainnav__list { flex-direction: column; gap: 6px; }
  .mainnav__list .hit { padding: 12px 14px; font-size: 15px; }
  .mainnav__cta { display: flex; gap: 10px; margin-top: 14px; }
  .mainnav__cta > * { flex: 1; }
  .talk__grid { grid-template-columns: repeat(2,1fr); }
  .base5__top { flex-direction: column; gap: 30px; }
  .rack5__grid { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 900px) {
  .rack5__grid { grid-template-columns: repeat(3,1fr); }
  .base5__sealrow { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 767px) {
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
  h3 { font-size: 18px; }
  .text5 p, .text5 li, .opener5__text { font-size: 16px; }
  th, td { padding: 10px 9px; font-size: 13px; }
  .snapcard td:first-child { width: 40%; }
  .snapcard__cap { font-size: 18px; min-height: 54px; }
  .rack5__tabs { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .rack5__tab { height: 44px; font-size: 14px; }
  .rack5__grid { grid-template-columns: repeat(2,1fr); gap: 14px 12px; }
  .scale5__grid { grid-template-columns: 1fr; }
  .talk__bar { flex-direction: column; align-items: flex-start; }
  .talk__btn { width: 100%; }
  .talk__grid { grid-template-columns: 1fr; }
  .slab5, .rack5, .talk { margin-bottom: 36px; }
}
@media (max-width: 480px) {
  .crown__in { gap: 6px; padding: 0 12px; }
  .crown__cta { gap: 5px; }
  .signin, .signup { height: 34px; padding: 0 8px; font-size: 11.5px; }
  .wordmark5 img { height: 32px; }
  .burg { width: 36px; padding: 8px; }
  .rack5__grid { grid-template-columns: repeat(2,1fr); }
  .base5__sealrow { grid-template-columns: repeat(2,1fr); }
  .getapp5 { flex-direction: column; }
  .getapp5-btn { width: 100%; }
}
@media (max-width: 360px) {
  .crown__cta { display: none; }
  .wordmark5 img { height: 30px; }
}
