/* HoopCue website. Same colours and type as the app (app/css/app.css). No files from other servers. */
:root {
  --ink: #21302E; --muted: #59645E; --canvas: #FFFFFF; --tint: #F3F6F5; --line: #E3E8E6; --line-strong: #CCD4D1;
  --orange: #E7882E; --orange-deep: #B4621A; --orange-soft: #FDEEE0;
  --blue: #246C91; --blue-soft: #E2EDF3; --green: #2F7D57; --green-soft: #E0F0E5; --sand: #F4E7D3; --red: #B4443A;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --wrap: 1120px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--tint); color: var(--ink); font: 400 17px/1.55 var(--font-ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: #fff; }
.skip:focus { left: 8px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(40px, 9.5vw, 76px); }
h2 { font-size: clamp(28px, 5.4vw, 44px); }
/* The highlighted part of a headline: a pressed-in tile like the buttons in the app. */
.chip { display: inline-block; margin: .12em 0 .16em; padding: .04em .32em .1em; border-radius: .34em; background: var(--orange); color: var(--ink); box-shadow: 0 .11em 0 var(--orange-deep); transform: rotate(-1.6deg); white-space: nowrap; }
.eyebrow { color: var(--blue); font: 800 13px/1 var(--font-display); letter-spacing: .09em; text-transform: uppercase; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 14px 26px; border: 0; border-radius: 16px; background: var(--orange); color: var(--ink); box-shadow: 0 5px 0 var(--orange-deep); cursor: pointer; text-decoration: none; font: 800 18px/1.1 var(--font-display); transition: transform .08s ease, box-shadow .08s ease; }
.btn:active { transform: translateY(5px); box-shadow: 0 0 0 var(--orange-deep); }
.btn--small { min-height: 44px; padding: 10px 16px; border-radius: 13px; font-size: 15px; box-shadow: 0 4px 0 var(--orange-deep); }
.btn--block { width: 100%; }
.btn:disabled { background: #E6EBE9; color: var(--muted); box-shadow: 0 5px 0 var(--line-strong); cursor: default; }

.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(10px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 10px max(18px, env(safe-area-inset-left)); background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 22px/1 var(--font-display); letter-spacing: -.02em; }
.brand img { width: 40px; height: 40px; }

main > section, .facts { width: min(100% - 36px, var(--wrap)); margin-inline: auto; }

/* hero */
.hero { display: grid; gap: 28px; padding: 36px 0 8px; }
.hero-copy { display: grid; gap: 18px; justify-items: start; }
.lead { max-width: 34ch; font-size: clamp(18px, 2.4vw, 21px); color: var(--muted); }
.hero-cta { display: grid; gap: 12px; justify-items: start; }
.note { color: var(--muted); font-size: 14.5px; max-width: 36ch; }
.hero-art { position: relative; justify-self: center; width: min(78vw, 330px); padding-bottom: 20px; }
.hero-cue { position: absolute; left: -17%; bottom: -8px; width: 46%; filter: drop-shadow(0 12px 14px rgba(33, 48, 46, .2)); animation: bob 3.2s ease-in-out infinite; }
.float { position: absolute; z-index: 3; padding: 9px 14px; border-radius: 14px; font: 800 16px/1 var(--font-display); white-space: nowrap; }
.float--xp { right: -11%; top: 30%; background: var(--blue); color: #fff; box-shadow: 0 4px 0 #174D69; transform: rotate(5deg); animation: bob 3.6s ease-in-out .4s infinite; }
.float--streak { left: -13%; top: -2%; background: #fff; color: var(--orange-deep); box-shadow: 0 4px 0 var(--line-strong); transform: rotate(-5deg); animation: bob 4s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 -7px; } }

/* phone frame around real screenshots */
.phone { position: relative; border: 9px solid #16201E; border-radius: 13.5% / 6.6%; background: #16201E; box-shadow: 0 30px 50px -26px rgba(33, 48, 46, .55), 0 0 0 1px rgba(255, 255, 255, .08) inset; overflow: hidden; }
.phone img { width: 100%; border-radius: 9.5% / 4.7%; background: #fff; }
.phone--hero { transform: rotate(2deg); }

/* facts */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 34px; }
.facts li { display: grid; gap: 2px; padding: 16px 12px; border-radius: 18px; background: var(--canvas); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); text-align: center; }
.facts b { font: 800 30px/1 var(--font-display); letter-spacing: -.02em; }
.facts span { color: var(--muted); font-size: 14.5px; }

/* panels: one idea each, with the real screen cut off at the bottom like a store picture */
.panels { display: grid; gap: 18px; margin-top: 46px; }
.panel { position: relative; display: grid; grid-template-rows: auto auto 1fr; gap: 12px; padding: 30px 22px 0; border-radius: 30px; overflow: hidden; text-align: center; justify-items: center; }
.panel h2 { font-size: clamp(27px, 6.6vw, 34px); }
.panel p { max-width: 30ch; color: var(--muted); font-size: 16px; }
.panel .phone { width: min(74%, 290px); margin-top: 14px; margin-bottom: -44%; align-self: end; }
.panel-cue { position: absolute; right: 2%; bottom: 14px; width: 26%; max-width: 120px; filter: drop-shadow(0 10px 12px rgba(33, 48, 46, .22)); }
.tone-sand { background: var(--sand); } .tone-green { background: var(--green-soft); } .tone-blue { background: var(--blue-soft); } .tone-orange { background: var(--orange-soft); }
.tone-blue .chip { background: var(--blue); color: #fff; box-shadow: 0 .11em 0 #174D69; }
.tone-green .chip { background: var(--green); color: #fff; box-shadow: 0 .11em 0 #1E5A3D; }

/* who */
.who { margin-top: 64px; text-align: center; }
.who-list { display: grid; gap: 12px; margin-top: 26px; }
.who-list li { display: grid; gap: 4px; padding: 20px 18px; border-radius: 20px; background: var(--canvas); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.who-list b { font: 800 21px/1.1 var(--font-display); }
.who-list span { color: var(--muted); }

/* waitlist */
.join { margin-top: 64px; padding: 28px 20px 26px; border-radius: 30px; background: var(--ink); color: #fff; scroll-margin-top: 80px; }
.join-head { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; }
.join-head img { width: 84px; }
.join-head p { margin-top: 10px; color: #D5DDD9; }
.form, .done { margin-top: 22px; padding: 20px 16px; border-radius: 22px; background: var(--canvas); color: var(--ink); display: grid; gap: 16px; }
.field { display: grid; gap: 7px; font: 800 15px/1.2 var(--font-display); }
.field input { width: 100%; min-height: 56px; padding: 12px 14px; border: 2px solid var(--line-strong); border-radius: 14px; background: #fff; color: var(--ink); font: 400 17px/1.3 var(--font-ui); }
.field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.optional { margin: 0; padding: 14px; border: 2px dashed var(--line-strong); border-radius: 16px; display: grid; gap: 14px; min-width: 0; }
.optional legend { padding: 0 6px; font: 800 14px/1.25 var(--font-display); color: var(--muted); }
.q > p { font-weight: 650; font-size: 15.5px; }
.q small { display: block; margin-top: 2px; color: var(--muted); font-weight: 400; font-size: 13.5px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pills label { position: relative; cursor: pointer; }
.pills input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pills span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 2px solid var(--line-strong); border-radius: 999px; background: #fff; box-shadow: 0 3px 0 var(--line-strong); font: 700 15px/1 var(--font-display); }
.pills input:checked + span { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); box-shadow: 0 3px 0 var(--blue); }
.pills input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 3px; }
.check { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.45; cursor: pointer; }
.check input { width: 26px; height: 26px; margin: 1px 0 0; accent-color: var(--green); cursor: pointer; }
.form-msg { padding: 12px 14px; border-radius: 12px; background: #F8E3E0; color: #872D26; font-weight: 600; font-size: 15px; }
.form-msg[hidden], .done[hidden], .form[hidden] { display: none; }
.small { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.done { justify-items: center; text-align: center; padding: 28px 18px; }
.done h3 { font-size: 30px; }
.done:focus { outline: none; }

.foot { display: grid; gap: 16px; justify-items: center; width: min(100% - 36px, var(--wrap)); margin: 46px auto 0; padding: 26px 0 max(30px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line-strong); }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; color: var(--muted); font-size: 15px; }
.foot .brand { font-size: 19px; } .foot .brand img { width: 32px; height: 32px; }

/* legal and result pages */
.page { width: min(100% - 36px, 760px); margin: 34px auto 0; padding: 26px 20px; border-radius: 24px; background: var(--canvas); border: 2px solid var(--line); }
.page h1 { font-size: clamp(30px, 6vw, 42px); margin-bottom: 14px; }
.page h2 { font-size: 22px; margin: 26px 0 8px; letter-spacing: -.01em; }
.page p, .page li { margin: 0 0 10px; }
.page ul { list-style: disc; padding-left: 22px; }
.page--center { text-align: center; display: grid; justify-items: center; gap: 12px; }

@media (min-width: 700px) {
  .facts { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .panels { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .panel .phone { margin-bottom: -38%; }
  .who-list { grid-template-columns: repeat(3, 1fr); }
  .join { padding: 44px 40px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 34px; align-items: start; }
  .join-head { grid-template-columns: 1fr; position: sticky; top: 100px; }
  .join-head img { width: 130px; }
  .form, .done { margin-top: 0; padding: 26px 24px; }
  .foot { grid-template-columns: auto 1fr; justify-items: start; } .foot nav { justify-self: end; }
}
@media (min-width: 940px) {
  .hero { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 40px; padding: 64px 0 20px; }
  .hero-art { width: 340px; }
  .panels { grid-template-columns: repeat(3, 1fr); }
  .panel h2 { font-size: 30px; }
}
/* ---------- motion: things come in as you scroll, numbers count up, Cue and the tiles pop ----------
   Only with JavaScript (class "js" on <html>, set by anim.js); without it everything is simply visible. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.js .stagger.is-in > * { opacity: 1; transform: none; }
.js .stagger.is-in > :nth-child(2) { transition-delay: .08s; } .js .stagger.is-in > :nth-child(3) { transition-delay: .16s; }
.js .stagger.is-in > :nth-child(4) { transition-delay: .24s; } .js .stagger.is-in > :nth-child(5) { transition-delay: .32s; }
.js .facts.reveal, .js .who-list.reveal { opacity: 1; transform: none; }
.js .pop-in { opacity: 0; transform: translateY(30px) scale(.94); transition: opacity .6s var(--ease) .15s, transform .8s var(--spring) .15s; }
.js .pop-in.is-in { opacity: 1; transform: none; }
.js .pop-in .float, .js .pop-in .hero-cue { scale: 0; transition: scale .55s var(--spring) .75s; }
.js .pop-in .float--xp { transition-delay: .95s; }
.js .pop-in .hero-cue { transition-delay: .6s; }
.js .pop-in.is-in .float, .js .pop-in.is-in .hero-cue { scale: 1; }
/* in a panel: the highlighted words stamp in, the phone slides up, Cue hops in last */
.js .panel .chip { scale: .6; opacity: 0; transition: scale .5s var(--spring) .25s, opacity .25s ease .25s; }
.js .panel.is-in .chip { scale: 1; opacity: 1; }
.js .panel .phone { translate: 0 46px; transition: translate .8s var(--ease) .15s; }
.js .panel.is-in .phone { translate: 0 0; }
.js .panel .panel-cue { scale: 0; rotate: -18deg; transition: scale .55s var(--spring) .7s, rotate .55s var(--spring) .7s; }
.js .panel.is-in .panel-cue { scale: 1; rotate: 0deg; }
.js .panel.is-in .panel-cue { animation: bob 3.4s ease-in-out 1.4s infinite; }
.js .join .join-head img { scale: 0; transition: scale .55s var(--spring) .3s; }
.js .join.is-in .join-head img { scale: 1; animation: bob 3.4s ease-in-out 1s infinite; }
.facts b.is-counting { color: var(--blue); }
/* things you can touch answer */
.panel, .who-list li, .facts li { transition: translate .25s var(--ease), box-shadow .25s var(--ease); }
@media (hover: hover) {
  .panel:hover { translate: 0 -6px; }
  .who-list li:hover, .facts li:hover { translate: 0 -4px; box-shadow: 0 8px 0 var(--line); }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--orange-deep); }
  .btn--small:hover { box-shadow: 0 6px 0 var(--orange-deep); }
  .btn:disabled:hover { transform: none; box-shadow: 0 5px 0 var(--line-strong); }
  .pills label:hover span { translate: 0 -2px; }
}
.pills span { transition: translate .15s ease, background-color .15s ease, border-color .15s ease; }
.pills input:checked + span { animation: pill-pop .3s var(--spring); }
@keyframes pill-pop { 40% { scale: 1.1; } }
.form-msg:not([hidden]) { animation: shake .35s ease; }
@keyframes shake { 25% { translate: -5px 0; } 50% { translate: 5px 0; } 75% { translate: -3px 0; } }
.done:not([hidden]) { animation: done-in .5s var(--spring); }
.done:not([hidden]) img { animation: hop .7s var(--spring) .15s both, bob 3.2s ease-in-out 1s infinite; }
@keyframes done-in { from { opacity: 0; scale: .9; } }
@keyframes hop { from { scale: 0; rotate: -25deg; } }
.page--center img { animation: hop .6s var(--spring) both; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .stagger > *, .js .pop-in, .js .pop-in .float, .js .pop-in .hero-cue, .js .panel .chip, .js .panel .phone, .js .panel .panel-cue, .js .join .join-head img { opacity: 1 !important; transform: none !important; scale: 1 !important; translate: 0 0 !important; rotate: 0deg !important; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }