/*
  Opening night. The page is a stage: deep blue, lit from above, with gold
  marquee bulbs for progress and the main action. White cards carry anything
  that has to be read closely. Two typefaces: Fredoka for headlines, buttons
  and numbers, Nunito for everything else.

  The stylesheets are joined in name order. 10 to 16 hold what every screen
  shares, 20 to 28 the screens in the order a visitor meets them.

  This file: fonts, colors, the stage and the type.
*/

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(fonts/fredoka.woff2) format('woff2-variations'), url(fonts/fredoka.woff2) format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(fonts/nunito.woff2) format('woff2-variations'), url(fonts/nunito.woff2) format('woff2');
}

:root {
  --night: #0C1258;
  --deep: #17208C;
  --stage: #2A41DB;
  --ink: #0E1440;
  --soft: #555E8C;
  --line: #D9DFF8;
  --mist: #EEF1FF;
  --gold: #FFC933;
  --gold-d: #C98E00;
  --gold-ink: #3A2600;
  --mint: #2EE6A0;
  --mint-d: #0A9460;
  --mint-ink: #04321F;
  --mint-t: #067A4E;
  --coral: #FF6B5E;
  --stop: #C2281C;
  --sky: #6FD8FF;
  --display: 'Fredoka', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  --body: 'Nunito', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --out: cubic-bezier(.2, .8, .2, 1);
  --gutter: 18px;
}

*, *::before, *::after { box-sizing: border-box; }

/* manipulation: quick repeated taps never trigger the phone's double-tap zoom. */
html { background: var(--night); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }

body {
  margin: 0;
  color: #fff;
  font: 600 16px/1.45 var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  /* A store name or email typed as one long word wraps instead of widening the page. */
  word-wrap: break-word; overflow-wrap: break-word;
}

button, input { font-family: inherit; }
button, .btn { -webkit-user-select: none; user-select: none; }
[hidden] { display: none !important; }
.em { display: inline-block; margin-left: .35em; font-style: normal; }
.em.lead { margin: 0 .35em 0 0; }

.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.card :focus-visible, .sheet-panel :focus-visible, .pcard :focus-visible { outline-color: var(--stage); }
h1:focus, h2:focus { outline: none; }

/* ------------------------------------------------------------- the stage */

.sky {
  position: fixed; top: 0; left: 0; z-index: 0;
  width: 100%; height: 100%;
  overflow: hidden; pointer-events: none;
  background:
    radial-gradient(95% 40% at 50% 106%, rgba(255, 107, 94, .34) 0%, rgba(255, 107, 94, 0) 72%),
    radial-gradient(130% 75% at 50% 0%, #3F58F5 0%, #2A41DB 36%, #1A24A0 70%, #0C1258 100%);
}
.beam {
  position: absolute; top: -12%;
  width: 70%; height: 130%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 72%);
  -webkit-clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0;
}
.beam.l { left: -30%; animation: sway-l 9s ease-in-out infinite alternate; }
.beam.r { right: -30%; animation: sway-r 11s ease-in-out infinite alternate; }
@keyframes sway-l { from { transform: rotate(-30deg); } to { transform: rotate(-14deg); } }
@keyframes sway-r { from { transform: rotate(30deg); } to { transform: rotate(12deg); } }

.spark {
  position: absolute; border-radius: 50%;
  background: #fff; opacity: 0;
  animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: .85; transform: scale(1); } }

/* Each chapter of the visit washes the stage in a different light. */
.sky::after {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(134, 60, 255, 0);
  transition: background-color 1.2s ease;
}
[data-chapter="plan"] .sky::after { background-color: rgba(134, 60, 255, .22); }
[data-chapter="pick"] .sky::after { background-color: rgba(0, 190, 200, .2); }
[data-chapter="store"] .sky::after { background-color: rgba(255, 70, 150, .17); }
[data-chapter="yours"] .sky::after { background-color: rgba(255, 190, 40, .16); }
[data-chapter="launch"] .sky::after { background-color: rgba(30, 220, 150, .15); }

.page {
  position: relative; z-index: 1;
  max-width: 480px; min-height: 100vh;
  margin: 0 auto;
  display: flex; flex-direction: column;
}
@supports (min-height: 100dvh) { .page { min-height: 100dvh; } }

/* Nothing here clips sideways overflow, because that can stop the bottom bar from
   sticking. Each screen keeps its own moving parts inside its own box instead. */
main { flex: 1 0 auto; display: flex; flex-direction: column; }
#app { flex: 1 0 auto; padding: 16px var(--gutter) 22px; }

/* A new screen rises in piece by piece; the old one slides off first. */
#app.enter > * { animation: rise .46s var(--out) both; animation-delay: calc(var(--i, 0) * 60ms); }
#app.enter.back > * { animation-name: rise-back; }
#app.leave { opacity: 0; transform: translateY(-12px); transition: opacity .16s ease-in, transform .16s ease-in; }
#app.leave.back { transform: translateY(12px); }
/* While a badge has the stage, the new screen waits at the start of its entrance. */
#app.hold, #app.hold *, #app.hold *::before, #app.hold *::after { animation-play-state: paused !important; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes rise-back { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ type */

h1 {
  margin: 0 0 10px;
  font: 700 29px/1.12 var(--display);
  letter-spacing: -.005em;
  text-shadow: 0 2px 0 rgba(6, 10, 60, .28);
}
h1 em { font-style: normal; color: var(--gold); }
/* A headline arrives one word at a time (FX.words). */
/* max-width keeps one very long word (a store name) inside the headline, where it can break. */
h1.kin .w { display: inline-block; max-width: 100%; overflow-wrap: anywhere; animation: word-in .5s var(--spring) both; animation-delay: calc(var(--w) * 45ms + 60ms); }
@keyframes word-in { from { opacity: 0; transform: translateY(.5em) rotate(-5deg) scale(.86); } to { opacity: 1; transform: none; } }
h2 { margin: 0; font: 700 20px/1.2 var(--display); }

.lede { margin: 0 0 16px; font-size: 16.5px; line-height: 1.45; color: rgba(255, 255, 255, .9); }
.lede.small { font-size: 15px; margin-bottom: 12px; }
.fine { margin: 14px 0 0; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .8); }
.cap { margin: 12px 0 0; font-size: 14.5px; line-height: 1.4; color: rgba(255, 255, 255, .85); }

.link {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-decoration: underline; cursor: pointer;
}

.pill {
  display: inline-flex; align-items: center;
  margin: 0 0 12px; padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28);
  font: 600 13.5px/1.2 var(--display);
  letter-spacing: .03em; text-transform: uppercase;
}

/*
  The bar across the top, buttons, and the bar that holds the next action.
*/

/* ------------------------------------------------------------ top of page */

#top { position: -webkit-sticky; position: sticky; top: 0; z-index: 6; }

.testbar {
  background: #060A33; color: #fff;
  font-size: 12px; font-weight: 800; line-height: 1.3;
  letter-spacing: .04em; text-transform: uppercase; text-align: center;
  padding: 6px 12px;
}

.hud { padding: 8px 14px 9px; background: var(--deep); box-shadow: 0 3px 0 rgba(6, 10, 60, .28); }
.hud-row { display: flex; align-items: center; min-height: 40px; }

.hud-back {
  flex: none; width: 40px; height: 40px; margin-right: 8px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.hud-back svg { width: 20px; height: 20px; margin-right: 2px; }
.hud-back:active { transform: scale(.92); }

.hud-brand { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
/* The brand name as a small sign. A long name sits on two lines, the second in gold. */
.mark { min-width: 0; padding-right: 8px; }
.mark b { display: block; font: 700 20px/1.15 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mark.two b { font-size: 15.5px; line-height: 1.06; }
.mark.two b + b { color: var(--gold); }

.hud-q {
  flex: none; margin-right: 6px; padding: 6px 9px;
  border-radius: 999px; background: rgba(255, 255, 255, .14);
  font: 700 14px/1 var(--display);
}

.hud-snd {
  flex: none; width: 36px; height: 36px; margin-left: 6px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.hud-snd svg { width: 20px; height: 20px; }
/* Two drawings sit in the button: the speaker, and the speaker crossed out. */
.hud-snd svg + svg, .hud-snd[aria-pressed="false"] svg { display: none; }
.hud-snd[aria-pressed="false"] svg + svg { display: block; }
.hud-snd[aria-pressed="false"] { color: rgba(255, 255, 255, .7); }
.hud-snd:active { transform: scale(.92); }

.streak {
  flex: none; display: inline-flex; align-items: center;
  padding: 5px 11px 5px 8px; border-radius: 999px;
  background: rgba(6, 10, 60, .5);
  font: 700 16px/1 var(--display);
}
.streak b { min-width: .7em; text-align: center; }
.streak .em { transform-origin: 50% 85%; animation: flicker 1.3s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.14) rotate(4deg); } }
.streak.bump { animation: bump .6s var(--spring); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.35) rotate(-6deg); } 100% { transform: scale(1); } }
/* A star from an answer lands on it. */
.streak.catch { animation: catch .45s var(--spring); }
@keyframes catch { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 201, 51, .7); } 40% { transform: scale(1.28); } 100% { transform: scale(1); box-shadow: 0 0 0 10px rgba(255, 201, 51, 0); } }

/* Marquee bulbs: one lights for every stretch of the way done. */
.bulbs { display: flex; justify-content: space-between; margin-top: 8px; padding: 0 3px; }
.bulb { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .24); }
.bulb.on { background: var(--gold); box-shadow: 0 0 0 2px rgba(255, 201, 51, .22), 0 0 9px 1px rgba(255, 201, 51, .85); }
.bulb.now { animation: bulb-wait 1.1s ease-in-out infinite; }
.bulb.new { animation: bulb-pop .7s var(--spring); }
/* When a badge is won, every lit bulb pops in turn. */
.bulbs.wave .bulb.on { animation: bulb-pop .6s var(--spring) backwards; }
.bulbs.wave .bulb:nth-child(2) { animation-delay: .05s; }
.bulbs.wave .bulb:nth-child(3) { animation-delay: .1s; }
.bulbs.wave .bulb:nth-child(4) { animation-delay: .15s; }
.bulbs.wave .bulb:nth-child(5) { animation-delay: .2s; }
.bulbs.wave .bulb:nth-child(6) { animation-delay: .25s; }
.bulbs.wave .bulb:nth-child(7) { animation-delay: .3s; }
.bulbs.wave .bulb:nth-child(8) { animation-delay: .35s; }
.bulbs.wave .bulb:nth-child(9) { animation-delay: .4s; }
.bulbs.wave .bulb:nth-child(10) { animation-delay: .45s; }
.bulbs.wave .bulb:nth-child(11) { animation-delay: .5s; }
.bulbs.wave .bulb:nth-child(12) { animation-delay: .55s; }
@keyframes bulb-wait { 0%, 100% { background: rgba(255, 255, 255, .24); } 50% { background: rgba(255, 255, 255, .8); } }
@keyframes bulb-pop { 0% { transform: scale(.2); } 55% { transform: scale(1.9); } 100% { transform: scale(1); } }

/* ---------------------------------------------------------------- buttons */

.btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 60px;
  padding: 10px 18px;
  border: 0; border-radius: 18px;
  background: var(--gold); color: var(--gold-ink);
  box-shadow: 0 5px 0 var(--gold-d), 0 14px 22px rgba(6, 10, 60, .35);
  font: 600 19.5px/1.15 var(--display);
  text-align: center; text-decoration: none;
  cursor: pointer; overflow: hidden;
  -webkit-appearance: none; appearance: none;
  transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--gold-d), 0 6px 10px rgba(6, 10, 60, .35); }
.btn[disabled] { opacity: .65; cursor: default; }
.btn svg { flex: none; width: 18px; height: 18px; margin-right: 6px; }
/* The emoji on a button never sits quite still. */
.btn .em { animation: fidget 1.7s ease-in-out infinite; }
@keyframes fidget { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(9deg); } }
.btn + .btn { margin-top: 10px; }

.btn.go { background: var(--mint); color: var(--mint-ink); box-shadow: 0 5px 0 var(--mint-d), 0 14px 22px rgba(6, 10, 60, .35); }
.btn.go:active { box-shadow: 0 1px 0 var(--mint-d), 0 6px 10px rgba(6, 10, 60, .35); }

.btn.ghost { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.btn.ghost:active { transform: scale(.96); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }

.btn.plain {
  min-height: 46px; padding: 8px 18px;
  background: none; color: #fff; box-shadow: none;
  font: 700 16px/1.2 var(--body); text-decoration: underline;
}
.btn.plain:active { transform: none; box-shadow: none; opacity: .7; }

/* A band of light that crosses the main button now and then. */
.btn.shine::after {
  content: '';
  position: absolute; top: 0; left: -70%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
  transform: skewX(-18deg);
  animation: shine 3.2s ease-in-out infinite;
}
@keyframes shine { 0%, 55% { left: -70%; } 100% { left: 130%; } }

.btn.pulse { animation: pulse 1.9s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.btn.pulse:active { animation: none; }
.btn.pop { animation: pop .35s var(--spring); }
@keyframes pop { 0% { transform: scale(.96); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }

.spin {
  display: inline-block; width: 18px; height: 18px; margin-right: 10px;
  border: 3px solid rgba(4, 50, 31, .25); border-top-color: var(--mint-ink); border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* The bar that stays at the bottom of the screen with the next action.
   The sticking is done by #bar, which sits directly inside <main>. */
#bar { position: -webkit-sticky; position: sticky; bottom: 0; z-index: 5; }
.typing #bar { position: static; }
.bar {
  padding: 26px var(--gutter) 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(12, 18, 88, .97) 66%, rgba(12, 18, 88, 0));
}
.bar .under { margin: 12px 0 0; font-size: 14px; line-height: 1.35; text-align: center; color: rgba(255, 255, 255, .88); }
.bar .disclose { margin: 12px 0 0; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .88); }

.bar-two { display: flex; align-items: stretch; }
.bar-two .btn { margin-top: 0; }
.bar-two .btn.ghost { flex: none; width: 34%; margin-right: 10px; padding: 10px 8px; }

.claim { display: flex; align-items: center; }
.claim-price { flex: none; margin: 0 14px 0 2px; text-align: center; }
.claim-price b { display: block; font: 700 34px/1 var(--display); color: var(--gold); }
.claim-price span { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 800; }
.claim .btn { flex: 1; }

/*
  The sidekick, cards, lists, profit per sale and forms.
*/

/* ------------------------------------------------------------ the sidekick */

.bot { display: inline-block; flex: none; width: 58px; height: 58px; vertical-align: middle; }
.bot.mini { width: 30px; height: 30px; margin-right: 8px; }
.bot.big { width: 124px; height: 124px; }
.bot-svg { display: block; width: 100%; height: 100%; overflow: visible; animation: bob 3.4s ease-in-out infinite; }
.bot.mini .bot-svg { animation: none; }

.bot-eyes, .bot-eyes-up, .bot-bulb, .bot-mouth-o { transform-box: fill-box; transform-origin: center; }
.bot-eyes { animation: blink 4.8s infinite; }
.bot-eyes-up, .bot-mouth-o, .bot-arm { display: none; }
.bot-bulb { animation: glow 2.6s ease-in-out infinite; }

/* While a line is being typed, the mouth opens and shuts and the bulb flickers. */
.bot.talking .bot-mouth { display: none; }
.bot.talking .bot-mouth-o { display: block; animation: chat .24s ease-in-out infinite; }
.bot.talking .bot-bulb { animation-duration: .4s; }
@keyframes chat { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* The big one on the first screen waves hello. The arm turns about its shoulder. */
.bot.big .bot-arm { display: block; transform-origin: 104px 88px; animation: wave .34s ease-in-out 1.1s 6 alternate; }
@keyframes wave { from { transform: rotate(0deg); } to { transform: rotate(24deg); } }

.bot[data-mood="happy"] .bot-eyes, .bot[data-mood="party"] .bot-eyes { display: none; }
.bot[data-mood="happy"] .bot-eyes-up, .bot[data-mood="party"] .bot-eyes-up { display: block; }
.bot[data-mood="happy"] .bot-svg { animation: hop .55s var(--spring); }
.bot[data-mood="party"] .bot-svg { animation: hop .55s var(--spring) 3; }
.bot[data-mood="think"] .bot-eyes { animation: look 1.3s ease-in-out infinite; }
.bot[data-mood="think"] .bot-bulb { animation-duration: .5s; }

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes hop { 0% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-12px) rotate(-7deg); } 100% { transform: translateY(0) rotate(0); } }
@keyframes blink { 0%, 44%, 50%, 100% { transform: scaleY(1); } 47% { transform: scaleY(.1); } }
@keyframes look { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
@keyframes glow { 0%, 100% { fill: #FFC933; } 50% { fill: #FFF3C4; } }

.talk { display: flex; align-items: flex-end; margin: 0 0 14px; }
.say {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: grid;
  margin-left: 12px; padding: 11px 14px;
  border-radius: 18px 18px 18px 4px;
  background: #fff; color: var(--ink);
  box-shadow: 0 4px 0 rgba(6, 10, 60, .3);
  font-size: 15.5px; font-weight: 800; line-height: 1.3;
}
.say::before {
  content: '';
  position: absolute; left: -8px; bottom: 0;
  border-style: solid; border-width: 0 0 12px 10px;
  border-color: transparent transparent #fff transparent;
}
.say-ghost, .say-typed { grid-area: 1 / 1; }
.say-ghost { visibility: hidden; }

/* ------------------------------------------------------------------ cards */

.card {
  margin-top: 16px; padding: 16px;
  border-radius: 22px;
  background: #fff; color: var(--ink);
  box-shadow: 0 6px 0 rgba(6, 10, 60, .35);
}
.card h2 { margin-bottom: 8px; }

.notice {
  margin: 16px 0 0; padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28);
  font-size: 14.5px; line-height: 1.45;
}
.sheet-panel .notice { background: var(--mist); box-shadow: none; }

/* Check and dash lists, used on the preview and wherever work is ticked off. */
.list, .ticks { list-style: none; margin: 0; padding: 0; }
.list li, .ticks li { display: flex; align-items: flex-start; padding: 6px 0; font-size: 15.5px; line-height: 1.35; }
.list svg, .ticks svg {
  flex: none; width: 22px; height: 22px; margin: -1px 10px 0 0; padding: 4px;
  border-radius: 50%; background: var(--mint); color: var(--mint-ink);
}
.list.minus svg { background: var(--line); color: var(--soft); }

/* Cards marked data-seen hold their lists back until they scroll into view. If
   that signal never comes, the lists show themselves after a few seconds anyway. */
[data-seen] .list li { opacity: 0; animation: seen-late .4s var(--out) 7s forwards; }
[data-seen].seen .list li { animation: seen-in .4s var(--out) both; }
[data-seen].seen .list li:nth-child(2) { animation-delay: .09s; }
[data-seen].seen .list li:nth-child(3) { animation-delay: .18s; }
[data-seen].seen .list li:nth-child(4) { animation-delay: .27s; }
[data-seen].seen .list li:nth-child(5) { animation-delay: .36s; }
[data-seen].seen .list li:nth-child(n+6) { animation-delay: .45s; }
@keyframes seen-late { to { opacity: 1; } }
@keyframes seen-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

.ticks { margin-top: 14px; }
.ticks li { padding: 7px 0; font-weight: 700; color: rgba(255, 255, 255, .62); transition: color .25s; }
.ticks svg { background: rgba(255, 255, 255, .18); color: transparent; transition: background .25s, color .25s; }
.ticks li.on { color: #fff; }
.ticks li.on svg { background: var(--mint); color: var(--mint-ink); animation: tick .45s var(--spring); }
@keyframes tick { 0% { transform: scale(.3); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* A product photo is there to be looked at. A finger or a mouse on it must
   swipe the card underneath, not drag the picture away or open a save menu. */
.photo {
  -webkit-user-drag: none; -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
  pointer-events: none;
}

/* Profit per sale, and where the rest of the price goes. */
.profit-top { display: flex; align-items: center; justify-content: space-between; }
.profit-k { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--soft); }
.profit-m { margin: 0; padding: 3px 9px; border-radius: 999px; background: #E3FBF1; color: var(--mint-t); font-size: 12.5px; font-weight: 800; line-height: 1.3; }
.profit-v { margin: 1px 0 0; }
.profit-n { font: 700 37px/1.05 var(--display); color: var(--mint-t); font-variant-numeric: tabular-nums; }
.split-bar { display: flex; height: 14px; margin-top: 8px; border-radius: 7px; overflow: hidden; background: var(--line); }
.split-cost { flex: none; height: 100%; background: #B9C1E6; }
.split-keep { flex: none; height: 100%; background: var(--mint); transform-origin: left center; animation: grow .9s var(--out) .15s both; }
[data-seen] .split-keep { animation: grow-late .9s var(--out) 7s both; }
[data-seen].seen .split-keep { animation: grow .9s var(--out) both; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes grow-late { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.split-legend { display: flex; justify-content: space-between; margin-top: 7px; }
.split-legend p { margin: 0; font-size: 13px; font-weight: 700; color: var(--soft); }
.split-legend b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.dot { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; background: var(--mint); }
.dot.cost { background: #B9C1E6; }
.split-note { margin: 6px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--soft); }

/* ------------------------------------------------------------------ forms */

.form { margin-top: 14px; }
.chips { display: flex; flex-wrap: wrap; margin: -4px; }
.chip {
  position: relative; overflow: hidden;
  margin: 4px; min-height: 42px; padding: 7px 14px;
  border: 0; border-radius: 21px;
  background: var(--mist); color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--line);
  font: 800 14.5px/1.2 var(--body);
  cursor: pointer;
}
.chip:active { transform: scale(.95); }
.chip[aria-pressed="true"] { background: var(--gold); box-shadow: inset 0 0 0 2px var(--gold-d); color: var(--gold-ink); }
.chip.dice { background: #fff; box-shadow: inset 0 0 0 2px var(--stage); color: var(--stage); }

.field { margin-top: 16px; }
.field label { display: block; margin-bottom: 6px; font-weight: 800; font-size: 15px; }
.input {
  display: block; width: 100%; height: 56px;
  padding: 0 14px;
  border: 2px solid #A9B3DE; border-radius: 14px;
  background: #fff; color: var(--ink);
  font: 700 17px var(--body);
  -webkit-appearance: none; appearance: none;
}
.input:focus { border-color: var(--stage); outline: 3px solid rgba(42, 65, 219, .28); outline-offset: 0; }
.input[aria-invalid="true"] { border-color: var(--stop); }
.input.shake { animation: shake .4s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.hint { margin: 6px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--soft); }
.err { margin: 8px 0 0; font-size: 14.5px; line-height: 1.4; font-weight: 800; color: var(--stop); }
#app > .err { padding: 10px 14px; border-radius: 12px; background: #fff; }

.check { display: flex; align-items: flex-start; margin-top: 18px; cursor: pointer; }
.check input { flex: none; width: 24px; height: 24px; margin: 1px 12px 0 0; accent-color: var(--stage); }
.check > span { display: block; }
.check b { display: block; font-weight: 800; font-size: 15px; line-height: 1.3; }
.check > span > span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--soft); }

/*
  The bottom sheet, effects (bursts, flying stars, the swoosh between
  chapters, the badge moment), the footer, and adjustments for small, wide
  and reduced-motion screens.
*/

/* ------------------------------------------------------------------ sheet */

.sheet {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(6, 10, 60, .72);
  animation: fade .2s both;
}
.sheet-panel {
  width: 100%; max-width: 480px; max-height: 92vh; overflow: auto;
  padding: 10px var(--gutter) 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0;
  background: #fff; color: var(--ink);
  animation: sheet-up .42s var(--spring) both;
}
.sheet-grip { display: block; width: 44px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: var(--line); }
.sheet-panel h2 { font-size: 25px; }
.sheet-lede { margin: 10px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--soft); }
.sheet-panel .fine { color: var(--soft); }
.sheet-panel .btn { margin-top: 16px; box-shadow: 0 5px 0 var(--gold-d); }
.sheet-panel .btn.go { box-shadow: 0 5px 0 var(--mint-d); }
.sheet-panel .btn.plain { margin-top: 4px; color: var(--ink); box-shadow: none; }
.sheet-open { overflow: hidden; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }

.bill { margin-top: 14px; border-radius: 16px; background: var(--mist); padding: 4px 14px; }
.bill-row { display: flex; align-items: flex-start; justify-content: space-between; padding: 12px 0; }
.bill-row > div { flex: 1; min-width: 0; padding-right: 12px; }
.bill-row b { display: block; font-weight: 800; font-size: 16px; }
.bill-row span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--soft); }
.bill-row > b { flex: none; font: 700 19px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.bill-row.total { border-top: 2px dashed #B9C1E6; }
.bill-row.total > b { font-size: 26px; }

/* The card form. Whop's script puts it, as a frame, inside .pay-box. Until the
   frame has loaded, the box says the form is on its way. */
.pay-as { margin: 12px 2px 0; font-size: 14px; line-height: 1.4; color: var(--soft); overflow-wrap: anywhere; }
.pay-as b { font-weight: 800; color: var(--ink); }
.pay-box { position: relative; min-height: 180px; margin-top: 8px; }
.pay-box iframe { display: block; }
.pay-wait {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  height: 180px; margin: 0;
  font-size: 14.5px; font-weight: 700; color: var(--soft);
}
.pay-box.on { min-height: 0; }
.pay-box.on .pay-wait { display: none; }
.pay-alt { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--soft); }
.pay-alt a { font-weight: 800; color: var(--stage); }

/* --------------------------------------------------------------- effects */

#fx { position: fixed; top: 0; left: 0; z-index: 70; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.fx-confetti { position: fixed; top: 0; left: 0; z-index: 71; width: 100%; height: 100%; pointer-events: none; }

.fx-p { position: absolute; margin: -.6em 0 0 -.6em; line-height: 1.2; animation: fx-burst .9s var(--out) both; }
@keyframes fx-burst {
  0% { transform: translate(0, 0) scale(.3) rotate(0deg); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.15) rotate(var(--r)); opacity: 0; }
}

.fx-float {
  position: absolute; margin-left: -.6em;
  font: 700 18px/1 var(--display); color: var(--gold);
  text-shadow: 0 2px 0 rgba(6, 10, 60, .5);
  animation: fx-float 1s var(--out) both;
}
@keyframes fx-float { 0% { transform: translateY(0) scale(.6); opacity: 0; } 25% { opacity: 1; transform: translateY(6px) scale(1.2); } 100% { transform: translateY(34px) scale(1); opacity: 0; } }

/* A star on its way to the streak counter. One box moves it sideways and the
   one inside moves it up and down, which bends the path into an arc. */
.fx-fly { position: absolute; animation: fly-x .58s cubic-bezier(.45, 0, .85, .55) both; }
.fx-fly span { display: block; margin: -.6em 0 0 -.6em; font-size: 20px; line-height: 1.2; animation: fly-y .58s cubic-bezier(.2, .9, .4, 1) both; }
@keyframes fly-x { to { transform: translateX(var(--dx)); } }
@keyframes fly-y {
  0% { transform: translateY(0) scale(.5); }
  35% { transform: translateY(calc(var(--dy) * .25 - 24px)) scale(1.3); }
  100% { transform: translateY(var(--dy)) scale(.7); }
}

/* The ring of light under a pressed button. */
.fx-rip {
  position: absolute; border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  pointer-events: none;
  transform: scale(0);
  animation: rip .55s var(--out) both;
}
.tile .fx-rip, .pick .fx-rip, .chip .fx-rip { background: rgba(42, 65, 219, .16); }
@keyframes rip { to { transform: scale(1); opacity: 0; } }

/* The swoosh between chapters: one slanted panel with bright leading and
   trailing edges crosses the screen, and pauses while it covers it. */
.fx-wipe { position: fixed; top: 0; left: 0; z-index: 60; width: 100%; height: 100%; overflow: hidden; }
.fx-wipe i {
  position: absolute; top: -10%; left: -300vw;
  width: 300vw; height: 120%;
  background: linear-gradient(90deg,
    rgba(46, 230, 160, 0) 2%, var(--mint) 2%, var(--mint) 4.5%, var(--gold) 4.5%, var(--gold) 8.5%,
    var(--deep) 8.5%, var(--deep) 91.5%,
    var(--gold) 91.5%, var(--gold) 95.5%, var(--mint) 95.5%, var(--mint) 98%, rgba(46, 230, 160, 0) 98%);
  animation: wipe .62s cubic-bezier(.55, 0, .45, 1) both;
}
@keyframes wipe {
  0% { transform: translateX(0) skewX(-12deg); }
  40%, 60% { transform: translateX(200vw) skewX(-12deg); }
  100% { transform: translateX(400vw) skewX(-12deg); }
}

/* A badge landing in the middle of the screen. Taps pass straight through it. */
.fx-splash {
  position: fixed; left: 50%; top: 40%; z-index: 72;
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: splash-in .5s var(--spring) both;
}
.fx-splash.out { animation: splash-out .4s ease-in both; }
.splash-coin { position: relative; width: 108px; height: 108px; display: flex; align-items: center; justify-content: center; }
.splash-coin i {
  position: absolute; top: -28px; right: -28px; bottom: -28px; left: -28px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 224, 138, .65) 0deg 12deg, rgba(255, 224, 138, 0) 12deg 30deg);
  animation: spin 9s linear infinite;
}
.splash-coin span {
  position: relative;
  width: 94px; height: 94px;
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 6px 0 var(--gold-d), inset 0 0 0 5px #FFE08A, 0 18px 36px rgba(6, 10, 60, .55);
  display: flex; align-items: center; justify-content: center;
  font-size: 46px; line-height: 1;
}
.fx-splash .toast-txt {
  margin-top: 16px; padding: 8px 20px;
  border-radius: 999px; background: #fff; color: var(--ink);
  box-shadow: 0 0 0 3px var(--gold), 0 12px 26px rgba(6, 10, 60, .45);
  text-align: center;
}
@keyframes splash-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-14deg); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes splash-out { to { opacity: 0; transform: translate(-50%, -240%) scale(.4); } }

.fx-toast {
  position: fixed; top: 14px; left: 50%; z-index: 72;
  display: flex; align-items: center;
  max-width: calc(100% - 28px);
  padding: 8px 18px 8px 10px;
  border-radius: 999px;
  background: #fff; color: var(--ink);
  box-shadow: 0 0 0 3px var(--gold), 0 12px 26px rgba(6, 10, 60, .45);
  transform: translateX(-50%);
  animation: toast-in .5s var(--spring) both;
}
.fx-toast.out { animation: toast-out .35s ease-in both; }
.toast-emo {
  flex: none; width: 40px; height: 40px; margin-right: 10px;
  border-radius: 50%; background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.toast-txt { font: 700 17px/1.15 var(--display); white-space: nowrap; }
.toast-txt b { display: block; font: 800 11px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
@keyframes toast-in { from { transform: translate(-50%, -90px); } to { transform: translate(-50%, 0); } }
@keyframes toast-out { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, -90px); opacity: 0; } }

/* ----------------------------------------------------------------- footer */

.foot { padding: 18px var(--gutter) 26px; background: rgba(12, 18, 88, .97); color: rgba(255, 255, 255, .78); font-size: 12.5px; line-height: 1.5; }
.foot p { margin: 0 0 9px; }
.foot p:last-child { margin-bottom: 0; }
.foot a { color: inherit; margin-right: 14px; }

/* ------------------------------------------------------------- adjustments */

@media (max-width: 359px) {
  :root { --gutter: 14px; }
  h1 { font-size: 26px; }
  .lede { font-size: 15.5px; }
  .btn { font-size: 18px; }
  .hud { padding-left: 10px; padding-right: 10px; }
  .hud-back { width: 36px; height: 36px; margin-right: 6px; }
  .bot.mini { margin-right: 6px; }
  .mark b { font-size: 18px; }
  .mark.two b { font-size: 14.5px; }
  /* No room for the question count: it stays for screen readers only. */
  .hud-q { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .claim-price b { font-size: 30px; }
}

/* On a wide screen the phone-sized column gets a faint panel behind it, so it reads as the stage. */
@media (min-width: 700px) {
  .page { background: rgba(8, 12, 70, .34); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 0 90px rgba(6, 10, 60, .55); }
}

/* Motion is decoration here. With reduced motion, everything lands in its final state at once. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .beam, .spark, .btn.shine::after { animation: none !important; }
}

/*
  The first screen and the questions.
*/

/* ------------------------------------------------------------------ start
   The opening: the glow swells, the sidekick drops in and waves, and four
   products fly out from behind it to circle on a dashed ring. --orb is how
   far out they circle; smaller screens pull it in (28-end.css). */

.hero { --orb: 100px; position: relative; height: 268px; margin: 2px 0 6px; overflow: hidden; }
.hero-glow {
  position: absolute; left: 50%; top: 50%;
  width: 260px; height: 260px; margin: -130px 0 0 -130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 201, 51, .55) 0%, rgba(255, 201, 51, .18) 42%, rgba(255, 201, 51, 0) 70%);
  animation: glow-in .7s var(--out) both, breathe 3.6s ease-in-out .7s infinite;
}
@keyframes glow-in { from { transform: scale(.2); opacity: 0; } to { transform: scale(.92); opacity: .8; } }
@keyframes breathe { 0%, 100% { transform: scale(.92); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } }

.hero-ring {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--orb) * 2); height: calc(var(--orb) * 2);
  margin: calc(var(--orb) * -1) 0 0 calc(var(--orb) * -1);
  border: 2px dashed rgba(255, 255, 255, .38); border-radius: 50%;
  animation: ring-in .8s var(--out) .35s both, spin 48s linear 1.15s infinite reverse;
}
@keyframes ring-in { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.hero .bot.big { position: absolute; left: 50%; top: 50%; margin: -62px 0 0 -62px; animation: bot-in .7s var(--spring) .15s both; }
@keyframes bot-in { from { opacity: 0; transform: translateY(46px) scale(.3) rotate(-14deg); } to { opacity: 1; transform: none; } }

/* Four products circle the sidekick. Each tile turns the other way so it stays upright. */
.orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: spin 24s linear infinite; }
.orb {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  transform: rotate(var(--r)) translateX(var(--orb));
  animation: orb-out .7s var(--spring) backwards;
  animation-delay: calc(var(--k) * 90ms + .45s);
}
@keyframes orb-out { from { opacity: 0; transform: rotate(var(--r)) translateX(0) scale(.2); } }
.orb-in {
  width: 58px; height: 58px; margin: -29px 0 0 -29px;
  border-radius: 18px;
  background: var(--tint);
  box-shadow: 0 4px 0 rgba(6, 10, 60, .35), inset 0 0 0 2px #fff;
  display: flex; align-items: center; justify-content: center;
  /* Upright even when nothing is turning (reduced motion). */
  transform: rotate(var(--u));
  animation: unspin 24s linear infinite;
}
.orb-in svg { width: 44px; height: 44px; }
.orb-in .photo { width: 100%; height: 100%; border-radius: 18px; object-fit: cover; }
@keyframes unspin { from { transform: rotate(var(--u)); } to { transform: rotate(var(--v)); } }

.hero-say {
  position: absolute; right: 0; top: 4px;
  min-width: 46px; min-height: 36px;
  margin: 0; padding: 8px 13px;
  border-radius: 16px 16px 16px 4px;
  background: #fff; color: var(--ink);
  box-shadow: 0 3px 0 rgba(6, 10, 60, .3);
  font-size: 14.5px; font-weight: 800; line-height: 1.35; white-space: nowrap;
  animation: pop-in .45s var(--spring) .85s both;
}
@keyframes pop-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

.facts { list-style: none; display: flex; margin: 0 -4px; padding: 0; }
.facts li {
  flex: 1 1 0; margin: 0 4px; padding: 11px 6px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28);
  text-align: center;
}
.facts b { display: block; font: 700 27px/1 var(--display); color: var(--gold); }
.facts span { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 800; line-height: 1.2; }
.bar .proof { font-weight: 800; }

/* -------------------------------------------------------------- questions */

.tiles { display: grid; row-gap: 11px; margin-top: 16px; }
.tiles.grid { grid-template-columns: 1fr 1fr; column-gap: 10px; }

.tile {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  width: 100%; min-height: 68px;
  padding: 10px 46px 10px 10px;
  border: 0; border-radius: 18px;
  background: #fff; color: var(--ink);
  box-shadow: 0 5px 0 #AEB8EE;
  font: inherit; text-align: left;
  cursor: pointer;
  transition: transform .1s, box-shadow .1s, opacity .25s;
  animation: tile-in .5s var(--spring) backwards;
}
.tile:nth-child(1) { animation-delay: .14s; }
.tile:nth-child(2) { animation-delay: .2s; }
.tile:nth-child(3) { animation-delay: .26s; }
.tile:nth-child(4) { animation-delay: .32s; }
.tile:nth-child(5) { animation-delay: .38s; }
.tile:nth-child(6) { animation-delay: .44s; }
.tile:nth-child(7) { animation-delay: .5s; }
.tile:nth-child(8) { animation-delay: .56s; }
@keyframes tile-in { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }

.tile:active { transform: translateY(4px); box-shadow: 0 1px 0 #AEB8EE; }

.tile-emo {
  flex: none; width: 48px; height: 48px; margin-right: 12px;
  border-radius: 14px; background: #FFF0BF;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
}
.tile:nth-child(4n+2) .tile-emo { background: #D3F9E9; }
.tile:nth-child(4n+3) .tile-emo { background: #FFDFDB; }
.tile:nth-child(4n+4) .tile-emo { background: #D8F2FF; }

.tile-txt { display: block; min-width: 0; }
.tile-txt b { display: block; font: 600 17.5px/1.2 var(--display); }
.tile-txt span { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 700; line-height: 1.25; color: var(--soft); }

.tile-check {
  position: absolute; right: 12px; top: 50%;
  width: 26px; height: 26px; margin-top: -13px;
  border-radius: 50%; background: var(--mint-d); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transform: scale(0);
}
.tile-check svg { width: 16px; height: 16px; }

.tile[aria-pressed="true"] { background: #E3FBF1; box-shadow: 0 5px 0 var(--mint-d), inset 0 0 0 2.5px var(--mint-d); }
.tile[aria-pressed="true"] .tile-check { transform: scale(1); transition: transform .3s var(--spring); }
/* The nudge comes first so that being picked overrides it. The class stays on
   once the wiggle is over: taking it off would start the entrance again. */
.tile.nudge { animation: wiggle .7s ease-in-out 2; }
.tile.picked { animation: picked .45s var(--spring); }
.tile.picked .tile-emo { animation: emo-jump .55s var(--spring); }
.tile.dim { opacity: .45; }
@keyframes picked { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes emo-jump { 0% { transform: scale(1) rotate(0); } 45% { transform: scale(1.45) rotate(-14deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-1.6deg); } 75% { transform: rotate(1.6deg); } }

.tiles.grid .tile { flex-direction: column; justify-content: center; min-height: 106px; padding: 12px 8px 11px; text-align: center; }
.tiles.grid .tile-emo { width: 50px; height: 50px; margin: 0 0 8px; }
.tiles.grid .tile-txt b { font-size: 16px; }
.tiles.grid .tile-check { right: 8px; top: 8px; width: 24px; height: 24px; margin-top: 0; }

/*
  The crash course, the game plan (its levels are reused on the Shopify step)
  and the cost receipt.
*/

/* ----------------------------------------------------------- crash course
   A small scene: your store at the top, the customer and the supplier below.
   A token travels along one dotted line at a time (playLesson in
   30-start-quiz.js moves it), and the matching step underneath lights up. */

.lesson { margin-top: 12px; padding: 12px 14px 14px; }
.scene { position: relative; height: 176px; }
.scene-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }
.scene-lines path {
  fill: none; stroke: #B9C1E6; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 9;
  vector-effect: non-scaling-stroke;
  transition: stroke .3s;
}
.scene-lines path.on { stroke: var(--stage); }

.st { position: absolute; width: 84px; margin-left: -42px; text-align: center; }
.st span {
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; margin: 0 auto;
  border-radius: 17px; background: var(--mist);
  box-shadow: inset 0 0 0 2px var(--line);
  font-size: 28px; line-height: 1;
}
.st b { display: block; margin-top: 4px; font-size: 12px; font-weight: 800; line-height: 1.2; color: var(--soft); }
.st-store { left: 50%; top: 4px; }
.st-buyer { left: 15%; top: 92px; }
.st-maker { left: 85%; top: 92px; }
.st.hit span { animation: st-hit .5s var(--spring); }
@keyframes st-hit { 0% { transform: scale(1); } 40% { transform: scale(1.24); background: #FFF0BF; } 100% { transform: scale(1); } }

.tok {
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  font-size: 24px; line-height: 30px; font-style: normal; text-align: center;
  opacity: 0; transform: scale(.4);
  transition: opacity .15s, transform .25s var(--spring);
  pointer-events: none;
}
.tok.on { opacity: 1; transform: scale(1); }

.beats { list-style: none; margin: 8px 0 0; padding: 0; }
.beat {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0;
  border-top: 2px dashed var(--line);
  font-size: 14.5px; font-weight: 700; line-height: 1.3;
  opacity: .35; transition: opacity .35s;
}
.beat.on { opacity: 1; }
.beat span { flex: 1; min-width: 0; padding-right: 10px; }
.beat b { flex: none; font: 700 18px/1.1 var(--display); opacity: 0; transform: scale(.5); transition: opacity .3s, transform .4s var(--spring); }
.beat.done b { opacity: 1; transform: none; }
.beat .plus { color: var(--mint-t); }
.beat .minus { color: var(--stop); }
.beat .note { padding: 4px 8px; border-radius: 8px; background: var(--mist); color: var(--soft); font: 800 12.5px/1.2 var(--body); }

.l-total {
  display: flex; align-items: center; justify-content: space-between;
  margin: 4px 0 0; padding: 12px 14px;
  border-radius: 16px; background: var(--mist);
  font-size: 15px; font-weight: 800;
  transition: background .4s;
}
.l-total b { font: 700 28px/1 var(--display); color: var(--soft); font-variant-numeric: tabular-nums; transition: color .3s; }
.lesson.summed .l-total { background: #D9FAEC; animation: pop .45s var(--spring); }
.lesson.summed .l-total b { color: var(--mint-t); }

/* ------------------------------------------------------- plan and handoff */

.levels { position: relative; list-style: none; margin: 16px 0 0; padding: 0; }
.levels::before {
  content: '';
  position: absolute; left: 27px; top: 30px; bottom: 30px;
  border-left: 4px dashed rgba(255, 255, 255, .55);
  transform-origin: top center;
  animation: draw 1.1s var(--out) .25s both;
}
@keyframes draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.level {
  position: relative;
  display: flex; align-items: flex-start;
  margin-bottom: 14px;
  animation: level-in .55s var(--spring) both;
  animation-delay: calc(var(--i) * .3s + .2s);
}
.level:last-child { margin-bottom: 0; }
@keyframes level-in { from { opacity: 0; transform: translateX(-16px) scale(.9); } to { opacity: 1; transform: none; } }

.lv-badge {
  position: relative; flex: none;
  width: 58px; height: 58px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 4px 0 rgba(6, 10, 60, .35);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; line-height: 1;
}
.lv-badge i {
  position: absolute; left: -4px; top: -4px;
  width: 24px; height: 24px;
  border-radius: 50%; background: var(--ink); color: #fff;
  font: 700 14px/24px var(--display); font-style: normal; text-align: center;
}
.lv-badge.num { background: var(--gold); color: var(--gold-ink); font: 700 27px/1 var(--display); }
.level.now .lv-badge { background: var(--gold); }
.level.now .lv-badge::after {
  content: '';
  position: absolute; top: -6px; right: -6px; bottom: -6px; left: -6px;
  border: 3px solid var(--gold); border-radius: 50%;
  animation: ring 1.6s ease-out infinite;
}
@keyframes ring { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.4); opacity: 0; } }

.lv-card {
  flex: 1; min-width: 0;
  margin-left: 12px; padding: 12px 14px;
  border-radius: 18px;
  background: #fff; color: var(--ink);
  box-shadow: 0 4px 0 rgba(6, 10, 60, .3);
}
.lv-card b { display: block; font: 600 17.5px/1.2 var(--display); }
.lv-card p { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: var(--soft); overflow-wrap: anywhere; }
.lv-tag {
  display: inline-block; margin-bottom: 6px; padding: 3px 8px;
  border-radius: 8px; background: var(--gold); color: var(--gold-ink);
  font: 800 11px/1.3 var(--body); letter-spacing: .05em; text-transform: uppercase;
}

/* ------------------------------------------------------------------- cost
   A receipt that prints out of a slot, line by line. */

.printer { margin-top: 14px; }
.printer-slot {
  position: relative; z-index: 2;
  display: block; height: 16px;
  border-radius: 10px; background: #060A33;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .45), 0 2px 0 rgba(255, 255, 255, .2);
}
.paper-clip { margin: -8px 10px 0; padding-bottom: 10px; overflow: hidden; }
.paper {
  position: relative;
  padding: 12px 14px 10px;
  background: #fff; color: var(--ink);
  animation: print 1.2s steps(10) .15s both;
}
.r-head {
  margin: 0; padding: 2px 0 10px;
  border-bottom: 2px dashed var(--line);
  color: var(--soft);
  font-size: 12px; font-weight: 800; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase;
}
.paper::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 100%; height: 6px;
  background:
    linear-gradient(135deg, #fff 25%, rgba(255, 255, 255, 0) 25%) 0 0 / 12px 12px repeat-x,
    linear-gradient(225deg, #fff 25%, rgba(255, 255, 255, 0) 25%) 0 0 / 12px 12px repeat-x;
}
@keyframes print { from { transform: translateY(-101%); } to { transform: none; } }

.r-row, .r-total { animation: fade-up .4s var(--out) both; animation-delay: calc(var(--i) * .17s + .6s); }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.r-row { display: flex; align-items: flex-start; padding: 11px 0; border-bottom: 2px dashed var(--line); }
.r-emo {
  flex: none; width: 36px; height: 36px; margin-right: 10px;
  border-radius: 11px; background: var(--mist);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; line-height: 1;
}
.r-what { flex: 1; min-width: 0; }
.r-what b { display: block; font: 600 16.5px/1.2 var(--display); }
.r-what span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--soft); }
.r-amt { flex: none; margin-left: 10px; text-align: right; font: 700 21px/1.15 var(--display); font-variant-numeric: tabular-nums; }
.r-amt small { display: block; font: 800 11.5px/1.3 var(--body); color: var(--soft); }
.r-amt em { display: block; padding: 4px 8px; border-radius: 8px; background: var(--mist); color: var(--soft); font: 800 12.5px/1.3 var(--body); font-style: normal; }

.r-total { display: flex; align-items: center; padding-top: 14px; }
.r-big { flex: none; margin-left: 10px; font: 700 42px/1 var(--display); font-variant-numeric: tabular-nums; }

.stamp {
  position: absolute; right: 12px; top: 7px;
  padding: 4px 10px 3px;
  border: 3px solid var(--stop); border-radius: 10px;
  color: var(--stop);
  font: 700 14px/1 var(--display); letter-spacing: .07em; text-transform: uppercase;
  opacity: 0;
  animation: stamp .4s cubic-bezier(.3, 1.5, .5, 1) 2.5s both;
}
@keyframes stamp { from { opacity: 0; transform: rotate(-7deg) scale(2.6); } to { opacity: .9; transform: rotate(-7deg) scale(1); } }

/*
  The matching scan and the deck of product cards.
*/

/* ------------------------------------------------------------------ match */

.scan {
  position: relative; margin-top: 12px; padding: 12px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28);
  overflow: hidden;
}
.scan-grid { display: flex; flex-wrap: wrap; justify-content: center; margin: -4px; }
.scan-tile {
  position: relative;
  width: calc(25% - 8px); margin: 4px;
  border-radius: 16px; background: var(--tint);
  transition: opacity .4s, transform .4s var(--out);
}
.scan-tile::before { content: ''; display: block; padding-top: 100%; }
.scan-tile svg, .scan-tile .photo { position: absolute; left: 12%; top: 12%; width: 76%; height: 76%; }
.scan-tile .photo { left: 0; top: 0; width: 100%; height: 100%; border-radius: 16px; object-fit: cover; }
.scan-rank {
  position: absolute; right: -4px; top: -4px;
  min-width: 26px; height: 26px; padding: 0 6px;
  border-radius: 13px; background: var(--gold); color: var(--gold-ink);
  box-shadow: 0 2px 0 var(--gold-d);
  font: 700 15px/26px var(--display); text-align: center;
  transform: scale(0);
}
/* Each product blinks as the counter reaches it. */
.scan-tile.seen { animation: seen-blink .4s var(--out); }
@keyframes seen-blink { 0% { box-shadow: 0 0 0 0 var(--mint); } 40% { box-shadow: 0 0 0 3px var(--mint); transform: scale(1.08); } 100% { box-shadow: 0 0 0 0 rgba(46, 230, 160, 0); } }
.scan-tile.miss { opacity: .28; transform: scale(.86); }
.scan-tile.hit { box-shadow: 0 0 0 3px var(--gold); animation: hit .5s var(--spring) both; animation-delay: calc(var(--d) * .17s); }
.scan-tile.hit .scan-rank { animation: rank-in .45s var(--spring) both; animation-delay: calc(var(--d) * .17s + .05s); }
@keyframes hit { 0% { transform: scale(1); } 50% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes rank-in { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1) rotate(0); } }

.scan-beam {
  position: absolute; left: 0; right: 0; top: 0; height: 34%;
  background: linear-gradient(to bottom, rgba(46, 230, 160, 0), rgba(46, 230, 160, .55));
  border-bottom: 3px solid var(--mint);
  animation: beam 1.1s ease-in-out 2 both;
}
@keyframes beam { from { transform: translateY(-110%); } to { transform: translateY(300%); } }
.scan.sorted .scan-beam { display: none; }

.scan-count { margin: 12px 0 0; font-size: 15px; font-weight: 800; text-align: center; }
.scan-count b { font: 700 20px/1 var(--display); color: var(--gold); }

/* --------------------------------------------------------------- products */

/* The deck runs edge to edge and clips there, so a card can fly off the screen
   without the page growing sideways. */
.deck {
  position: relative;
  margin: -14px calc(var(--gutter) * -1) 0;
  padding: 14px var(--gutter) 22px;
  overflow: hidden;
}
.pcard {
  position: relative; z-index: 2;
  border-radius: 24px;
  background: #fff; color: var(--ink);
  box-shadow: 0 6px 0 rgba(6, 10, 60, .35);
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
}
.pcard.ghost { position: absolute; z-index: 1; left: 30px; right: 30px; top: 26px; bottom: 13px; background: #D5DBF7; box-shadow: none; }
.pcard.ghost.g2 { z-index: 0; left: 42px; right: 42px; bottom: 5px; background: #AEB8EE; }
.pcard.in-next { animation: card-next .32s var(--out) backwards; }
.pcard.in-prev { animation: card-prev .34s var(--out) backwards; }
.pcard.lean { animation: card-hint .9s ease-in-out; }
@keyframes card-next { from { transform: translateY(12px) scale(.94); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes card-prev { from { transform: translateX(-110%) rotate(-12deg); } to { transform: none; } }
@keyframes card-hint { 0%, 100% { transform: none; } 30% { transform: translateX(-24px) rotate(-3deg); } 62% { transform: translateX(8px) rotate(1deg); } }

/* The picture: the product's photo, filling the space, or its drawing. */
.p-art {
  position: relative; height: 196px;
  background: var(--tint);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.p-art > svg { display: block; width: 150px; height: 150px; }
.p-art > .photo {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: settle 6s var(--out) both;
}
@keyframes settle { from { transform: scale(1.12); } to { transform: scale(1); } }
.p-rank, .p-cat {
  position: absolute; top: 10px; z-index: 2;
  display: flex; align-items: center;
  padding: 5px 10px; border-radius: 10px;
}
.p-rank { left: 10px; background: var(--ink); color: #fff; font: 600 13.5px/1.2 var(--display); }
.p-cat { right: 10px; background: rgba(255, 255, 255, .92); font-size: 12.5px; font-weight: 800; line-height: 1.2; }

/* The scaling strip across the bottom of the picture. It darkens what is
   behind it, so it reads on any photo. */
.p-trend {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; align-items: center;
  padding: 26px 12px 9px;
  background: linear-gradient(to top, rgba(6, 10, 60, .92) 46%, rgba(6, 10, 60, 0));
  color: #fff;
}
.tr-tag {
  flex: none; display: flex; align-items: center;
  padding: 4px 10px; border-radius: 999px;
  background: var(--gold); color: var(--gold-ink);
  font: 600 13.5px/1.2 var(--display);
}
.tr-sample {
  flex: none; margin-left: 6px; padding: 3px 7px;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7);
  font-size: 11px; font-weight: 800; line-height: 1.3;
}
.tr-line { flex: none; width: 64px; height: 24px; margin: 0 8px 0 auto; }
/* The line draws itself: its one dash, longer than the line, slides into place. Then the end dot pops. */
.tr-line path {
  fill: none; stroke: var(--mint); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 140; stroke-dashoffset: 140;
  animation: draw-line 1.4s var(--out) .4s forwards;
}
.tr-line circle { fill: var(--mint); transform-box: fill-box; transform-origin: center; animation: pop-in .4s var(--spring) 1.05s both; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
/* The number sits at the right end. With no line before it, it pushes itself there. */
.tr-num { flex: none; margin-left: auto; text-align: right; }
.tr-line + .tr-num { margin-left: 0; }
.tr-num b { display: flex; align-items: center; justify-content: flex-end; font: 700 20px/1 var(--display); color: var(--mint); }
.tr-num b svg { width: 12px; height: 12px; margin-right: 3px; }
.tr-num span { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 800; line-height: 1.2; }
.p-trend.down .tr-num b { color: #FFB8B0; }
.p-trend.down .tr-line path { stroke: #FFB8B0; }
.p-trend.down .tr-line circle { fill: #FFB8B0; }

.p-body { padding: 10px 16px 14px; }
.p-src { margin: 0 0 8px; font-size: 12px; font-weight: 700; line-height: 1.35; color: var(--soft); }
.p-name { font-size: 22px; }
.p-pitch { margin: 3px 0 10px; font-size: 14.5px; line-height: 1.35; color: var(--soft); }
.p-why { list-style: none; display: flex; flex-wrap: wrap; margin: 10px -3px 0; padding: 0; }
.p-why li {
  display: flex; align-items: center;
  margin: 3px; padding: 5px 10px 5px 6px;
  border-radius: 999px; background: #E3FBF1; color: var(--mint-ink);
  font-size: 12.5px; font-weight: 800; line-height: 1.2;
}
.p-why svg { flex: none; width: 16px; height: 16px; margin-right: 5px; padding: 3px; border-radius: 50%; background: var(--mint-d); color: #fff; }
.p-ship { margin: 10px 0 0; font-size: 13px; font-weight: 700; color: var(--soft); }

.dots { display: flex; align-items: center; justify-content: center; margin-top: 4px; }
.dot-row { display: flex; margin: 0 12px; }
.dot-row i { width: 9px; height: 9px; margin: 0 4px; border-radius: 50%; background: rgba(255, 255, 255, .35); transition: transform .2s, background .2s; }
.dot-row i.on { background: var(--gold); transform: scale(1.35); }
.dot-btn {
  flex: none; width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.dot-btn svg { width: 20px; height: 20px; }
.dot-btn[disabled] { opacity: .3; cursor: default; }
.dot-btn:active { transform: scale(.92); }

/*
  The shop front, the build, and the store preview itself.
*/

/* ---------------------------------------------------------------- details
   A little shop front: a lit sign with the store's name, an awning in the
   product's color, a window and a door. */

.front { margin-top: 12px; padding: 0 6px; }
.sign {
  position: relative;
  padding: 20px 14px;
  border: 3px solid var(--gold); border-radius: 16px;
  background: #060A33;
  box-shadow: 0 0 22px rgba(255, 201, 51, .4);
  text-align: center;
}
.sign::before, .sign::after {
  content: '';
  position: absolute; left: 10px; right: 10px; height: 6px;
  background: radial-gradient(circle, var(--gold) 0, var(--gold) 2.4px, rgba(255, 201, 51, 0) 3px) 0 0 / 16px 6px repeat-x;
  animation: chase .7s steps(2) infinite;
}
.sign::before { top: 5px; }
.sign::after { bottom: 5px; animation-direction: reverse; }
@keyframes chase { from { background-position: 0 0; } to { background-position: 16px 0; } }

.sign-name {
  display: block;
  font: 700 27px/1.1 var(--display); color: #fff;
  text-shadow: 0 0 12px rgba(255, 201, 51, .95), 0 0 2px rgba(255, 201, 51, .9);
  overflow-wrap: anywhere;
}
.sign-name.sm { font-size: 21px; }
.sign-name.xs { font-size: 16.5px; }

.awning {
  position: relative; z-index: 1;
  display: block; height: 22px; margin: 0 8px;
  border-radius: 0 0 12px 12px;
  background: repeating-linear-gradient(90deg, var(--a) 0, var(--a) 22px, #fff 22px, #fff 44px);
  box-shadow: 0 4px 0 rgba(6, 10, 60, .3);
}
.front-wall {
  display: flex; align-items: flex-end; justify-content: center;
  height: 62px; margin: -4px 18px 0; padding: 0 14px;
  border-radius: 0 0 10px 10px;
  background: #fff;
}
.front-window {
  flex: 1; height: 42px; margin: 0 12px 9px 0;
  border-radius: 8px; background: var(--tint);
  box-shadow: inset 0 0 0 3px var(--ink);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.front-window svg { width: 38px; height: 38px; }
.front-window .photo { width: 100%; height: 100%; object-fit: cover; }
.front-door { position: relative; flex: none; display: block; width: 38px; height: 50px; border-radius: 8px 8px 0 0; background: var(--a); box-shadow: inset 0 0 0 3px var(--ink); }
.front-door::after { content: ''; position: absolute; right: 8px; top: 24px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ------------------------------------------------------------------ build */

.meter { display: flex; align-items: center; margin-top: 6px; }
.meter-bar { flex: 1; height: 20px; border-radius: 10px; background: rgba(6, 10, 60, .55); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .25); overflow: hidden; }
.meter-bar i {
  display: block; width: 0; height: 100%;
  border-radius: 10px;
  background: var(--gold) linear-gradient(-45deg, rgba(255, 255, 255, .4) 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, rgba(255, 255, 255, 0) 75%) 0 0 / 28px 28px;
  animation: stripes .6s linear infinite;
}
@keyframes stripes { to { background-position: 28px 0; } }
.meter b { flex: none; width: 64px; text-align: right; font: 700 23px/1 var(--display); color: var(--gold); font-variant-numeric: tabular-nums; }

.phone {
  position: relative;
  margin: 14px auto 0;
  border: 6px solid #060A33; border-radius: 30px;
  background: #fff;
  box-shadow: 0 8px 0 rgba(6, 10, 60, .35), 0 0 0 2px rgba(255, 255, 255, .28);
  overflow: hidden;
}
.phone.crop { width: 88%; max-width: 330px; height: 300px; }
.stage { height: 100%; overflow: hidden; }
.stage .store {
  width: 161.3%; margin-left: -30.65%;
  transform: scale(.62); transform-origin: top center;
  animation: pan 2.4s ease-in-out 2.5s both;
}
@keyframes pan { from { transform: scale(.62) translateY(0); } to { transform: scale(.62) translateY(var(--pan, 0px)); } }

.building .b { opacity: 0; animation: piece .5s var(--spring) both; animation-delay: calc(var(--i) * .4s + .2s); }
@keyframes piece { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }

/* A line of light moves down the phone while the pieces go in, then fades. */
.laser {
  position: absolute; left: 0; right: 0; top: -48px; z-index: 2;
  height: 48px;
  background: linear-gradient(to bottom, rgba(46, 230, 160, 0), rgba(46, 230, 160, .38));
  border-bottom: 3px solid var(--mint);
  box-shadow: 0 6px 16px rgba(46, 230, 160, .55);
  pointer-events: none;
  animation: laser 2.5s linear .2s both, laser-off .5s ease-in 4.6s forwards;
}
@keyframes laser { from { transform: translateY(0); } to { transform: translateY(300px); } }
@keyframes laser-off { to { opacity: 0; } }

.flash { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }
.flash.go { animation: flash .65s ease-out both; }
@keyframes flash { 0% { opacity: 0; } 20% { opacity: .95; } 100% { opacity: 0; } }

/* -------------------------------------------------------------- store mock
   The visitor's own store. It takes its colors from the product, not from us. */

.store { background: #fff; color: var(--ink); font-weight: 600; text-align: left; }
.s-chrome { display: flex; align-items: center; padding: 8px 10px; background: var(--mist); border-bottom: 1px solid var(--line); }
.s-url {
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  padding: 6px 10px; border-radius: 10px;
  background: #fff; color: var(--soft);
  font-size: 13px; line-height: 1.2;
}
.s-url svg { flex: none; width: 12px; height: 12px; margin-right: 6px; }
.s-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-strip { background: var(--a); color: #fff; text-align: center; font-size: 13px; font-weight: 800; line-height: 1.3; padding: 7px 10px; }
.s-head { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.s-head svg { flex: none; width: 22px; height: 22px; }
.s-name { flex: 1; min-width: 0; padding: 0 8px; text-align: center; font: 700 19px/1.15 var(--display); overflow-wrap: anywhere; }
.s-hero { height: 224px; background: var(--tint); display: flex; align-items: center; justify-content: center; }
.s-hero svg { width: 184px; height: 184px; }
.s-hero .photo { width: 100%; height: 100%; object-fit: cover; }
.s-body { padding: 16px 14px 18px; }
.s-title { margin: 0; font: 700 23px/1.15 var(--display); }
.s-price { margin: 6px 0 0; font-weight: 800; font-size: 20px; }
.s-pitch { margin: 8px 0 0; font-size: 16px; line-height: 1.45; }
.s-buy { margin-top: 14px; padding: 13px; border-radius: 10px; background: var(--a); color: #fff; text-align: center; font-weight: 800; font-size: 16px; line-height: 1.3; }
.s-buy.alt { margin-top: 8px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.s-points { list-style: none; margin: 16px 0 0; padding: 0; }
.s-points li { position: relative; margin-top: 9px; padding-left: 28px; font-size: 15.5px; line-height: 1.4; }
.s-points li::before {
  content: '';
  position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--a) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 9.3l3 3 6-6.3' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.s-info { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; color: var(--soft); }
.s-foot { padding: 12px 14px; background: var(--mist); text-align: center; font-size: 13px; line-height: 1.5; color: var(--soft); }

/*
  The reveal, the paid screen, add-ons, and adjustments for small, tall and
  short screens.
*/

/* ---------------------------------------------------------------- preview
   The first time the store is shown, a pair of curtains opens on it. */

.phone.reveal { margin-top: 4px; }
.curtain {
  display: none;
  position: absolute; top: 0; bottom: 0; z-index: 3;
  width: 51%;
  background: repeating-linear-gradient(90deg, #E23A52 0, #E23A52 16px, #C42741 16px, #C42741 32px);
}
.reveal.first .curtain { display: block; }
.curtain.l { left: 0; animation: part-l 1.3s cubic-bezier(.6, 0, .2, 1) .75s both; }
.curtain.r { right: 0; animation: part-r 1.3s cubic-bezier(.6, 0, .2, 1) .75s both; }
@keyframes part-l { to { transform: translateX(-103%); } }
@keyframes part-r { to { transform: translateX(103%); } }

/* ------------------------------------------------------------------- paid */

.win { padding-top: 4px; text-align: center; }
.medal { position: relative; width: 112px; height: 112px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; }
.medal span {
  position: relative;
  width: 92px; height: 92px;
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 6px 0 var(--gold-d), inset 0 0 0 5px #FFE08A;
  display: flex; align-items: center; justify-content: center;
  font-size: 46px; line-height: 1;
  animation: medal .8s var(--spring) .1s both;
}
.medal-rays {
  position: absolute; top: -24px; right: -24px; bottom: -24px; left: -24px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 224, 138, .55) 0deg 12deg, rgba(255, 224, 138, 0) 12deg 30deg);
  animation: spin 14s linear infinite;
}
@keyframes medal { from { transform: scale(0) rotate(-180deg); } to { transform: scale(1) rotate(0); } }

.paid-mark {
  display: inline-block; margin: 0 0 10px; padding: 5px 12px;
  border-radius: 999px; background: var(--mint); color: var(--mint-ink);
  font: 600 14.5px/1.2 var(--display);
}

.quest { list-style: none; margin: 0; padding: 0; }
.quest li { display: flex; align-items: flex-start; padding: 8px 0; }
.quest i {
  flex: none; width: 30px; height: 30px; margin-right: 12px;
  border-radius: 50%; background: var(--mist); color: var(--soft);
  display: flex; align-items: center; justify-content: center;
  font: 700 15px/1 var(--display); font-style: normal;
}
.quest i svg { width: 16px; height: 16px; }
.quest .done i { background: var(--mint); color: var(--mint-ink); }
.quest .next i { background: var(--gold); color: var(--gold-ink); box-shadow: 0 0 0 4px rgba(255, 201, 51, .35); animation: pulse 1.4s ease-in-out infinite; }
.quest b { display: block; padding-top: 4px; font: 600 16.5px/1.25 var(--display); }
.quest span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--soft); }

.badges { list-style: none; display: flex; margin: 14px -3px 0; padding: 0; }
.badges li {
  flex: 1 1 0; margin: 0 3px; padding: 9px 4px 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7);
  text-align: center; font-size: 11px; font-weight: 800; line-height: 1.2;
}
.badges .em { display: block; margin: 0 0 4px; font-size: 22px; line-height: 1.2; opacity: .45; }
.badges .got { background: rgba(255, 201, 51, .2); box-shadow: inset 0 0 0 1.5px var(--gold); color: #fff; }
.badges .got .em { opacity: 1; animation: pop-in .5s var(--spring) .3s both; }

/* ---------------------------------------------------------------- add-ons */

.fan { position: relative; height: 188px; margin-top: 4px; }
.ad {
  position: absolute; left: 50%; top: 14px;
  width: 112px; height: 150px; margin-left: -56px; padding: 10px;
  border-radius: 14px; background: var(--tint);
  box-shadow: 0 5px 0 rgba(6, 10, 60, .35), inset 0 0 0 3px #fff;
  display: flex; flex-direction: column; align-items: center;
}
.ad-art { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.ad-art svg { width: 84px; height: 84px; }
.ad-art .photo { max-width: 100%; max-height: 100%; border-radius: 8px; }
.ad i { flex: none; display: block; width: 80%; height: 8px; margin-top: 6px; border-radius: 4px; background: var(--a); }
.ad i.short { width: 50%; opacity: .5; }
.ad.a0 { animation: fan-l .6s var(--spring) .2s both; }
.ad.a1 { z-index: 2; animation: fan-c .6s var(--spring) .2s both; }
.ad.a2 { animation: fan-r .6s var(--spring) .2s both; }
@keyframes fan-l { to { transform: translateX(-78px) translateY(8px) rotate(-11deg); } }
@keyframes fan-r { to { transform: translateX(78px) translateY(8px) rotate(11deg); } }
@keyframes fan-c { from { transform: scale(.9); } to { transform: scale(1.06); } }

.offer { display: flex; align-items: center; }
.offer-price { flex: none; max-width: 46%; margin: 0 14px 0 0; text-align: center; }
.offer-price b { display: block; font: 700 38px/1 var(--display); }
.offer-price span { display: block; margin-top: 3px; font-size: 12px; font-weight: 800; line-height: 1.25; color: var(--soft); }
.offer-note { flex: 1; min-width: 0; margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--soft); }

.picks { display: grid; row-gap: 11px; margin-top: 4px; }
.pick {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start;
  width: 100%; padding: 13px 12px;
  border: 0; border-radius: 18px;
  background: #fff; color: var(--ink);
  box-shadow: 0 5px 0 #AEB8EE;
  font: inherit; text-align: left;
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
}
.pick:active { transform: translateY(3px); box-shadow: 0 2px 0 #AEB8EE; }
.pick-box {
  flex: none; width: 28px; height: 28px; margin: 1px 12px 0 0;
  border-radius: 9px; box-shadow: inset 0 0 0 2.5px #A9B3DE;
  color: transparent;
  display: flex; align-items: center; justify-content: center;
}
.pick-box svg { width: 16px; height: 16px; }
.pick-txt { flex: 1; min-width: 0; }
.pick-txt b { display: block; font: 600 16.5px/1.25 var(--display); }
.pick-txt > span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--soft); }
.pick-price { flex: none; margin-left: 10px; padding: 5px 9px; border-radius: 10px; background: var(--gold); color: var(--gold-ink); font: 700 19px/1.1 var(--display); }
.pick[aria-pressed="true"] { background: #E3FBF1; box-shadow: 0 5px 0 var(--mint-d), inset 0 0 0 2.5px var(--mint-d); }
.pick[aria-pressed="true"] .pick-box { background: var(--mint-d); color: #fff; box-shadow: none; animation: tick .4s var(--spring); }

/* ------------------------------------------------------------- adjustments */

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 359px) {
  .hero { --orb: 91px; height: 244px; }
  .orb-in { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
  .orb-in svg { width: 40px; height: 40px; }
  .bot.big { width: 112px; height: 112px; }
  .hero .bot.big { margin: -56px 0 0 -56px; }
  .facts b { font-size: 24px; }
  .tile-txt b { font-size: 16.5px; }
  .tiles.grid .tile-txt b { font-size: 15px; }
  .p-art { height: 172px; }
  .p-art > svg { width: 126px; height: 126px; }
  .tr-line { display: none; }
  .profit-n { font-size: 33px; }
  .r-big { font-size: 36px; }
  .sign-name { font-size: 24px; }
  @keyframes fan-l { to { transform: translateX(-70px) translateY(8px) rotate(-11deg); } }
  @keyframes fan-r { to { transform: translateX(70px) translateY(8px) rotate(11deg); } }
}

@media (min-height: 760px) {
  .hero { --orb: 112px; height: 296px; margin-top: 10px; }
  .tiles { row-gap: 13px; margin-top: 20px; }
  .tile { min-height: 78px; }
  .tile-emo { width: 54px; height: 54px; font-size: 29px; }
  .tiles.grid .tile { min-height: 118px; }
}

/* Short screens: a smaller hero and product picture, so the main thing stays in view. */
@media (max-height: 700px) {
  .hero { --orb: 76px; height: 206px; margin-top: 0; }
  .hero-glow { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
  .orb-in { width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 15px; }
  .orb-in svg { width: 36px; height: 36px; }
  .bot.big { width: 96px; height: 96px; }
  .hero .bot.big { margin: -48px 0 0 -48px; }
  .p-art { height: 150px; }
  .p-art > svg { width: 110px; height: 110px; }
}