/* Landing page, below the hero: bold colour blocks, big condensed type, a small animated cast. Flat shapes, no gradients, in the spirit of
   Nike Run Club: oversized type, saturated blocks, motion that means something. */
.lp { margin-top: 8px; }
.blk { background: var(--bk); color: var(--bt); box-shadow: 0 0 0 100vmax var(--bk); clip-path: inset(0 -100vmax); padding: clamp(52px, 9vw, 112px) 0; position: relative; }
.coral { --bk: #e26b3f; --bt: #1d1d1f; } .honey { --bk: #f0b232; --bt: #1d1d1f; } .teal { --bk: #2fa8a0; --bt: #1d1d1f; }
.violet { --bk: #7c5ad6; --bt: #ffffff; } .sky { --bk: #5aa9e6; --bt: #1d1d1f; } .leaf { --bk: #6db56d; --bt: #1d1d1f; } .ink { --bk: #1d1d1f; --bt: #f4f3e8; }
.blk + .blk, .blk + .how2, .faqwrap + .blk { margin-top: 0; }
.lp > * + * { margin-top: 0; }
.blk .in { display: grid; gap: 36px; align-items: center; }
.blk .in.col { gap: 32px; } .blk .in.center { justify-items: center; text-align: center; }
.blk h2 { font: 800 clamp(2.7rem, 9.5vw, 6.6rem)/.9 var(--num); text-transform: uppercase; letter-spacing: -.005em; margin: 12px 0 18px; overflow-wrap: anywhere; text-wrap: balance; }
.blk .copy p { font-size: clamp(1.02rem, 2.4vw, 1.2rem); line-height: 1.5; max-width: 40ch; }
.blk .copy.wide p { max-width: 58ch; }
.kick { font: 700 .85rem var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.tick { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.tick li { position: relative; padding-left: 28px; font-weight: 600; line-height: 1.35; }
.tick li::before { content: ""; position: absolute; left: 0; top: .32em; width: 14px; height: 14px; border-radius: 50%; background: currentColor; }

/* the band of questions */
.marquee { padding: 14px 0; overflow: hidden; white-space: nowrap; }
.marquee .track { display: inline-flex; gap: 28px; align-items: center; animation: marq 46s linear infinite; font: 800 clamp(1.5rem, 4.4vw, 2.5rem)/1 var(--num); text-transform: uppercase; }
.marquee i { font-style: normal; font-size: .6em; opacity: .7; }
@keyframes marq { to { transform: translateX(-50%); } }

/* the cast: 3D characters rendered in Blender, so just pictures here */
.ch3d { display: block; position: relative; flex: none; }
.ch3d img { width: 100%; height: auto; display: block; }
.ch3d::after { content: ""; position: absolute; left: 24%; right: 24%; bottom: 4%; height: 5%; border-radius: 50%; background: rgba(0, 0, 0, .2); filter: blur(5px); z-index: -1; }

/* 01 Sit */
.scene { position: relative; display: grid; gap: 14px; justify-items: start; }
.talkers { display: flex; align-items: flex-end; gap: 6px; }
.bubble { background: #fff; color: #1d1d1f; border-radius: 20px; padding: 12px 16px; max-width: 250px; font: 600 1.02rem/1.25 var(--sans); }
.bubble small { display: block; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin-bottom: 2px; }
.scene .bubble.q { animation: qa 9s ease-in-out infinite; }
.scene .bubble.a { animation: qa 9s ease-in-out infinite; animation-delay: -4.5s; margin-top: -76px; align-self: flex-end; }
@keyframes qa { 0% { opacity: 0; transform: translateY(8px) scale(.96); } 8%, 42% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; transform: translateY(-6px); } }
.bars { width: 100%; max-width: 360px; height: 40px; } .bars rect { fill: #1d1d1f; transform-box: fill-box; transform-origin: center; animation: bar 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * -60ms); }
@keyframes bar { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* 02 Play */
.welcome .games { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.gcard { background: var(--surface); color: var(--text); border-radius: 24px; padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gcard h3 { font: 800 2.2rem/1 var(--num); text-transform: uppercase; margin-top: 8px; }
.gcard p { color: var(--muted); font-size: .95rem; line-height: 1.4; }
.gcard .meta { margin-top: auto; padding-top: 6px; font: 700 .8rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.demo { min-height: 236px; border-radius: 16px; background: var(--surface2); padding: 12px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.demo svg { width: 100%; height: auto; max-height: 230px; background: var(--surface); }
.demo .dicebar { margin-top: 8px; justify-content: center; }
.demo .roll { width: 44px; height: 44px; border-width: 1.5px; border-radius: 8px; cursor: default; padding: 4px; } .demo .roll em { max-width: 7px; }
.demo .apits.mini { gap: 6px; } .demo .pit { min-height: 0; cursor: default; }
.demo .cap { margin-top: 10px; text-align: center; font: 600 .85rem var(--sans); color: var(--muted); min-height: 2.4em; }
.demo .whot .piles { margin: 4px 0 10px; gap: 14px; }
.demo .wc { width: 42px; height: 62px; border-radius: 6px; cursor: default; } .demo .wc.big { width: 60px; height: 88px; } .demo .wc .n { font-size: .8rem; top: 4px; left: 5px; } .demo .wc .n.b { top: auto; left: auto; bottom: 4px; right: 5px; } .demo .wc small { font-size: .5rem; bottom: 5px; }
.demo .hand { display: flex; justify-content: center; flex-wrap: nowrap; } .demo .hand .wc + .wc { margin-left: -16px; }
.botnote { display: flex; align-items: center; gap: 18px; max-width: 700px; } .botnote p { font-size: 1.05rem; line-height: 1.45; max-width: 46ch; }

/* 03 Make */
.arts { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); align-items: end; }
.art { border-radius: 20px; padding: 20px; min-height: 270px; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .35s var(--ease-out); }
.art small { font: 700 .75rem var(--sans); letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-bottom: auto; }
.art b { font: 800 2.3rem/.95 var(--num); text-transform: uppercase; }
.art p { font: 600 1.05rem/1.3 var(--sans); }
.art span { align-self: flex-start; margin-top: 14px; padding: 5px 12px; border-radius: 999px; background: rgba(0, 0, 0, .14); font: 600 .75rem var(--sans); }
.art.mag { background: #e26b3f; color: #1d1d1f; transform: rotate(-3deg); } .art.book { background: #fff; color: #1d1d1f; transform: rotate(2deg); min-height: 300px; } .art.film { background: #1d1d1f; color: #fff7ea; transform: rotate(-1.5deg); }
.art.film span, .art.mag span { background: rgba(255, 255, 255, .2); } .art.mag span { background: rgba(0, 0, 0, .14); }
.art.film i { width: 46px; height: 46px; border-radius: 50%; background: #fff7ea; position: relative; margin-bottom: auto; }
.art.film i::after { content: ""; position: absolute; left: 18px; top: 13px; border-left: 14px solid #1d1d1f; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.art:hover { transform: translateY(-8px) rotate(0); }

/* 04 Far away */
.calls { display: flex; align-items: center; justify-content: center; }
.phone { width: 150px; height: 250px; border-radius: 28px; border: 5px solid #1d1d1f; background: #fff; display: grid; align-items: end; justify-items: center; overflow: hidden; flex: none; }
.phone .ch3d { margin-bottom: -26px; }
.link { width: 92px; flex: none; margin: 0 -6px; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 22px 0 0; max-width: 420px; }
.steps li { counter-increment: s; display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-top: 2px solid rgba(29, 29, 31, .25); font: 600 1.05rem var(--sans); }
.steps li::before { content: counter(s); font: 800 1.7rem/1 var(--num); }

/* 05 Family */
.roster { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: flex-end; }
.mem { display: grid; justify-items: center; gap: 8px; background: rgba(255, 255, 255, .38); padding: 16px 16px 12px; border-radius: 22px; }
.mem b { font: 800 1.3rem/1 var(--num); text-transform: uppercase; letter-spacing: .02em; }
.mem .rg { width: 36px; height: 36px; }
.roster.shown .fill { animation: ring 1.4s var(--ease-out); }
@keyframes ring { from { stroke-dasharray: 0 88; } }

/* Private */
.pri { list-style: none; padding: 0; margin: 0; display: grid; }
.pri li { padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .22); display: grid; gap: 4px; }
.pri b { font: 700 1.25rem var(--sans); } .pri span { opacity: .75; }

/* How it works */
.how2 { padding: clamp(56px, 8vw, 100px) 0 24px; }
.how2 h2 { font: 800 clamp(2.4rem, 8vw, 5rem)/.92 var(--num); text-transform: uppercase; margin-bottom: 28px; }
.hw { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.hw li { padding: 22px 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.hw span { font: 800 2.6rem/1 var(--num); color: var(--accent-text); } .hw b { font: 700 1.25rem var(--display); letter-spacing: -.02em; } .hw p { color: var(--muted); max-width: 40ch; }
.faqwrap { padding: 24px 0 64px; }

/* the end */
.endblk h2 { font-size: clamp(3rem, 11vw, 7.6rem); max-width: 12ch; }
.endblk .cast { display: flex; gap: 2px; align-items: flex-end; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.endblk .cta { background: #1d1d1f; color: #fff7ea; min-height: 56px; font-size: 1.05rem; }

/* hero: a splash of colour */
.hero2 h1 mark { background: #f0b232; color: #1d1d1f; padding: 0 .1em; border-radius: 8px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.example-stage { transition: background .3s var(--ease-out), color .3s var(--ease-out); }
.example-stage[data-kind=ask] { background: #f0b232; color: #1d1d1f; } .example-stage[data-kind=keep] { background: #2fa8a0; color: #1d1d1f; } .example-stage[data-kind=make] { background: #7c5ad6; color: #fff; }
.example-stage[data-kind] .sample-label, .example-stage[data-kind] .fine { color: inherit; opacity: .78; }
.example-stage[data-kind] .btn { background: rgba(255, 255, 255, .88); color: #1d1d1f; }
.example-stage[data-kind=keep] .sample-wave { color: #1d1d1f; }
.example-stage[data-kind] .sample-seats i { background: rgba(255, 255, 255, .85); color: #1d1d1f; border-color: transparent; }
.example-stage[data-kind=make] .sample-spread { color: var(--text); }

@media (min-width: 860px) {
  .blk .in:not(.col) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
  .hw { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } .hw li { border-top: 2px solid var(--text); }
  .pri { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) { .phone { width: 128px; height: 214px; } .link { width: 64px; } }

/* reveal as you scroll */
.welcome.js [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.welcome.js [data-reveal].shown { opacity: 1; transform: none; }
.welcome.js .art[data-reveal].shown.mag { transform: rotate(-3deg); } .welcome.js .art[data-reveal].shown.book { transform: rotate(2deg); } .welcome.js .art[data-reveal].shown.film { transform: rotate(-1.5deg); }
.welcome .games .gcard:nth-child(2) { transition-delay: .1s; } .welcome .games .gcard:nth-child(3) { transition-delay: .2s; }
.arts .art:nth-child(2) { transition-delay: .1s; } .arts .art:nth-child(3) { transition-delay: .2s; }
@media (prefers-reduced-motion: reduce) {
  .marquee .track, .bars rect, .scene .bubble, .roster.shown .fill { animation: none; }
  .scene .bubble.a { display: none; }
  .welcome.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}