/* The website merchants reach from our App Store listings, in WeirdOps' own palette and type, at
   the owner's word (2026-10-11): the ribbon W's violets on its night navy, Syne for the wordmark and
   the headings, Inter for the text. Its first version was plain and he called it "super-basic"; the
   second, a night gallery, he called "much better" and asked for "unbelievably cool animations".
   So the motion follows the logo: the W draws itself band by band along the ribbon's path, a glint
   runs over it, and a satin ribbon (site-ribbon.js, drawn behind the page) slides out from under it and
   leads down the page as the reader scrolls. Everything else moves only to show what a reader did
   or what a figure means. A reader who asked for less motion gets the finished page, still. */

:root {
  --night: #0d1020;
  --deep: #090b18;
  --line: rgba(194, 144, 248, .14);
  --text: #e7e5f4;
  --text-2: #b4b0cf;
  --text-3: #8f8bae;
  --violet: #6d3ae9;
  --lilac: #a069f3;
  --pale: #c290f8;
  --max: 1800px;
  --gutter: clamp(20px, 5vw, 112px);
  --ease-out: cubic-bezier(.2, .85, .25, 1);
  --display: "Syne", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --store: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: radial-gradient(120% 60rem at 50% 18rem, #15183a 0%, rgba(21, 24, 58, 0) 70%) no-repeat, var(--night);
  color: var(--text);
  font: 400 1.0625rem/1.65 var(--sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

a { color: var(--pale); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: #fff; }

:focus-visible { outline: 2px solid var(--pale); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 { margin: 0; color: #fff; font-family: var(--display); font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
p { text-wrap: pretty; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* The ribbon's canvas lies behind the page; the sections are see-through so it shows between them. */
.satin { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
main, .foot { position: relative; z-index: 1; }

/* The header lies over the hero, and turns to frosted glass at the top of the window once the
   reader scrolls past it. */
.top { position: absolute; inset: 0 0 auto; z-index: 5; }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.5rem; transition: padding .35s var(--ease-out); }
html.motion .top { animation: fade-in .9s ease-out .2s both; }
html.motion .top.is-stuck, .top.is-stuck {
  position: fixed;
  background: rgba(13, 16, 32, .72);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 1px 0 var(--line);
  animation: drop .55s var(--ease-out) both;
}
.top.is-stuck .top-in { padding-block: .85rem; }

.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand-mark { width: 2.1rem; height: auto; }
.wordmark { color: #fff; font: 800 1.25rem/1 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.wordmark span { color: var(--lilac); }
.wordmark .gap { margin-left: .14em; }

.top nav { display: flex; gap: clamp(1.25rem, 2.5vw, 2.75rem); font-size: .95rem; }
.top nav a { color: var(--text-2); text-decoration: none; }
.top nav a:hover { color: #fff; }

/* The hero: the ribbon on its stage, lit from behind, standing on a floor that holds its reflection. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: max(44rem, 100svh);
  padding-block: 7rem clamp(4rem, 9vh, 7rem);
  text-align: center;
}

/* The stage is a 3D space: the W turns in it on a spring that follows the pointer (site.js), and
   the hero carries where the pointer is (--gx, --gy, --fx, --px, --py) for the lights and the words. */
.stage {
  position: relative;
  width: min(36vw, 42rem);
  margin-bottom: clamp(3rem, 8vh, 5.5rem);
  perspective: 1600px;
}

.glow {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  width: 240%;
  aspect-ratio: 1.7;
  translate: calc(-50% + var(--gx, 0px)) calc(-50% + var(--gy, 0px));
  background:
    radial-gradient(closest-side, rgba(199, 156, 251, .30), transparent 38%),
    radial-gradient(closest-side, rgba(124, 76, 240, .40), rgba(109, 58, 233, .14) 48%, transparent 76%);
  transition: translate 1.1s var(--ease-out);
}
html.motion .glow { animation: glow 2.4s ease-out .5s both; }

.ribbon { position: relative; transform-style: preserve-3d; }

/* The W's four bands, back to front, each at its own depth and scaled to cancel it, so at rest they
   line up into the logo and part only as the W turns. */
.w-layers { position: relative; aspect-ratio: 961 / 638; transform-style: preserve-3d; }
.w-layer { position: absolute; inset: 0; transform: translateZ(calc(var(--z) * 1px)) scale(calc(1 - var(--z) / 1600)); }

.w-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  -webkit-box-reflect: below 0 linear-gradient(transparent 58%, rgba(255, 255, 255, .2));
}
.w-shadow { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; filter: blur(1.75rem); transform: translateZ(-70px) scale(1.04375) translateY(2.5rem); }
html.motion .w-shadow { animation: fade-in 1.2s ease 1s both; }

/* The bands draw one after another along the ribbon's path: down the left arm, up the middle, over
   the fold, up the right arm. Each is revealed by its mask's stroke. */
.hw-draw { fill: none; stroke: #fff; stroke-width: 300; stroke-dasharray: 1 1; }
html.motion .hw-draw { stroke-dashoffset: 1; animation: hw-draw .62s cubic-bezier(.6, 0, .25, 1) forwards; }
html.motion .hw-d1 { animation-delay: .3s; }
html.motion .hw-d2 { animation-delay: .74s; }
html.motion .hw-d3 { animation-delay: 1.12s; }
html.motion .hw-d4 { animation-delay: 1.46s; }

/* The pointer is a lamp on the ribbon (site.js moves it); the glint runs once when it is whole. */
.hw-lamp { mix-blend-mode: soft-light; }
html.motion .hw-lamp { animation: fade-in 1s ease 2.1s both; }
.hw-glint { mix-blend-mode: screen; opacity: 0; transform: skewX(-18deg); }
html.motion .hw-glint { animation: hw-glint 1.25s cubic-bezier(.45, 0, .2, 1) 2.05s; }
/* A click plucks the W, and the glint runs again. */
.w-layers.is-plucked .hw-glint { animation: hw-glint 1.1s cubic-bezier(.45, 0, .2, 1); }


.floor {
  position: absolute;
  left: 50%;
  top: 99%;
  width: 170%;
  height: 1px;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, rgba(194, 144, 248, .4) 50%, transparent);
}
.floor::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 46%;
  height: 4rem;
  translate: calc(-50% + var(--fx, 0px)) -50%;
  background: radial-gradient(closest-side, rgba(160, 105, 243, .32), transparent);
  transition: translate 1.1s var(--ease-out);
}
html.motion .floor { animation: floor-in 1.2s var(--ease-out) .1s both; }

.hero-text { position: relative; translate: var(--px, 0px) var(--py, 0px); transition: translate 1.2s var(--ease-out); }
.hero h1 { font-size: clamp(2.6rem, 5.6vw, 7.25rem); line-height: 1; letter-spacing: -.04em; }

.lede { max-width: 38em; margin: 1.5rem auto 0; color: var(--text-2); font-size: clamp(1.1rem, 1.25vw, 1.35rem); }
html.motion .hero .lede { animation: fade-up 1s var(--ease-out) 1.8s both; }

.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin-top: 2.25rem; }
html.motion .hero .actions { animation: fade-up 1s var(--ease-out) 1.95s both; }

/* A heading's words rise one after another out of their own line: the hero's as the page opens,
   the others as they come into view (site.js marks them). */
.rise .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .2em; margin-bottom: -.2em; }
.rise .w > span { display: inline-block; }
html.motion .rise-now .w > span { animation: rise 1.05s var(--ease-out) both; animation-delay: calc(1.25s + var(--i) * 90ms); }
html.js-reveal .rise:not(.rise-now) .w > span { transform: translateY(115%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--i) * 80ms); }
html.js-reveal .rise.is-in .w > span { transform: none; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  padding: 0 1.5rem;
  border-radius: .8rem;
  font: 600 1rem/1 var(--sans);
  text-decoration: none;
  transition: background .2s, color .2s, transform .45s var(--ease-out);
}
.button-primary {
  background: linear-gradient(180deg, #8250f2, var(--violet));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 .75rem 2rem -.75rem rgba(109, 58, 233, .85);
}
.button-primary:hover { background: linear-gradient(180deg, #8f62f5, #7444ee); color: #fff; }
.button-soft { background: rgba(160, 105, 243, .14); color: #e4d6ff; box-shadow: inset 0 0 0 1px rgba(194, 144, 248, .2); }
.button-soft:hover { background: rgba(160, 105, 243, .24); color: #fff; }

/* Sections. The results lie under a darker glass, so the ribbon dims as it passes behind it. */
.apps, .results, .help { padding-block: clamp(4.5rem, 8vw, 8rem); }
.results { background: linear-gradient(rgba(4, 5, 12, 0), rgba(4, 5, 12, .5) 9rem, rgba(4, 5, 12, .5) calc(100% - 9rem), rgba(4, 5, 12, 0)); }
/* The light behind the demo reaches past it; the section keeps it from widening the page. */
.apps { overflow-x: clip; }

h2 { font-size: clamp(2.25rem, 4.2vw, 4.75rem); line-height: 1.02; }

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 2rem; margin-bottom: clamp(2.5rem, 4vw, 4rem); }
.section-head p { margin: 0; color: var(--text-3); }

/* An app: what it is beside it working, and everything it does under both. */
.app {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(3rem, 5vw, 7rem);
  padding-top: clamp(2.5rem, 4vw, 4rem);
  border-top: 1px solid var(--line);
}

.app-title { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.app-title h3 { font-size: clamp(2.75rem, 4.6vw, 5.5rem); line-height: 1; letter-spacing: -.045em; }

.soon {
  margin: 0;
  padding: .4rem .85rem;
  border-radius: 999px;
  background: rgba(160, 105, 243, .14);
  box-shadow: inset 0 0 0 1px rgba(194, 144, 248, .2);
  color: #ddcbff;
  font-size: .85rem;
  font-weight: 500;
}

.app-what { max-width: 26em; margin: 1.75rem 0 0; font-size: clamp(1.2rem, 1.5vw, 1.55rem); line-height: 1.45; }

.app-price { margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.app-price dt { color: var(--text-3); font-size: .875rem; font-weight: 500; }
.app-price dd { max-width: 30em; margin: .35rem 0 0; }

.app-links { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 1.75rem 0 0; padding: 0; font-weight: 500; }

.app-does {
  grid-column: 1 / -1;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 5rem);
  margin: 0;
  padding: 0;
}
.app-does li { position: relative; padding: 1.1rem 0 1.1rem 1.6rem; border-top: 1px solid var(--line); }
/* Each one is marked with a fold of the ribbon. */
.app-does li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(1.1rem + .5em);
  width: .6rem;
  height: .55rem;
  background: linear-gradient(180deg, var(--pale), var(--violet));
  clip-path: polygon(0 0, 34% 0, 50% 46%, 66% 0, 100% 0, 58% 100%, 42% 100%);
}

/* The demo: a store's product page with Bundles on it, and its checkout. */
.app-demo { position: relative; isolation: isolate; }
.app-demo::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12% -8%;
  background: radial-gradient(closest-side, rgba(109, 58, 233, .26), transparent 72%);
}

.demo { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin: 0; }

.store {
  grid-column: 2 / -1;
  grid-row: 1;
  overflow: hidden;
  border-radius: 1.25rem;
  background: #fff;
  color: #121212;
  color-scheme: light;
  box-shadow: 0 3rem 6rem -2rem rgba(0, 0, 0, .7), 0 2rem 5rem -2.5rem rgba(109, 58, 233, .55);
  font: 400 15px/1.45 var(--store);
}

.store-bar { display: flex; align-items: center; gap: 1rem; padding: .65rem 1rem; border-bottom: 1px solid #e7e7e3; background: #f4f4f2; }
.store-dots { display: flex; gap: .4rem; }
.store-dots i { width: .65rem; height: .65rem; border-radius: 50%; background: #d9d9d4; }
.store-url { flex: 1; max-width: 22rem; margin-inline: auto; padding: .3rem .8rem; border-radius: .5rem; background: #fff; box-shadow: inset 0 0 0 1px #e7e7e3; color: #6b6b66; font-size: .78rem; text-align: center; }

.store-body { display: grid; grid-template-columns: minmax(0, 16.5rem) minmax(0, 1fr); align-items: start; gap: 1.75rem; padding: 1.75rem; }
.store-photo svg { display: block; width: 100%; height: auto; border-radius: .6rem; }
.store-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .6rem; }
.store-thumb { padding: 2px; border-radius: .5rem; }
.store-thumb[data-chosen] { box-shadow: 0 0 0 1.5px #121212; }
.store-thumbs svg { display: block; width: 100%; height: auto; border-radius: .35rem; }

.store-name { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.store-price { display: flex; align-items: baseline; gap: .6rem; margin: .35rem 0 0; font-size: 1.05rem; }
.store-price s { color: #7a7a75; font-size: .92rem; }

.store-colors { display: flex; flex-wrap: wrap; gap: .45rem; min-width: 0; margin: 1.1rem 0 0; padding: 0; border: 0; }
.store-colors legend { width: 100%; margin-bottom: .45rem; padding: 0; color: #6b6b66; font-size: .8rem; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-block; padding: .38rem .85rem; border-radius: 999px; box-shadow: inset 0 0 0 1px #cfcfca; font-size: .85rem; }
.chip input:checked + span { box-shadow: inset 0 0 0 1.5px #121212; font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid #121212; outline-offset: 2px; }

/* The widget as it draws itself in a light theme: its plain design, the theme's own black. */
.wb { --wb-a: #121212; margin-top: 1.25rem; }
.wb fieldset { display: grid; gap: .5rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.wb legend { margin-bottom: .55rem; padding: 0; font-size: .95rem; font-weight: 600; }
.wb-tier {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .35em .75em;
  padding: .72em .9em;
  border: 1px solid color-mix(in srgb, #121212 22%, transparent);
  border-radius: .5rem;
  cursor: pointer;
  transition: background-color .25s;
}
.wb-tier[data-selected] {
  padding: calc(.72em - 1px) calc(.9em - 1px);
  border: 2px solid var(--wb-a);
  background: color-mix(in srgb, var(--wb-a) 5%, transparent);
}
.wb-tier input { width: 1.1em; height: 1.1em; margin: 0; accent-color: var(--wb-a); }
.wb-head { display: flex; flex-wrap: wrap; align-items: center; gap: .25em .5em; }
.wb-title { font-weight: 600; }
.wb-badge { padding: .15em .55em; border-radius: 999px; background: color-mix(in srgb, #121212 10%, transparent); font-size: .75em; line-height: 1.2; }
.wb-prices { display: grid; justify-items: end; line-height: 1.25; font-variant-numeric: tabular-nums; }
.wb-pay { font-weight: 600; }
.wb-was { font-size: .85em; opacity: .6; }

.store-add { width: 100%; min-height: 3rem; margin-top: 1rem; border: 0; border-radius: .5rem; background: #121212; color: #fff; font: inherit; font-weight: 600; cursor: pointer; transition: background .2s, transform .15s; }
.store-add:hover { background: #000; }
.store-add:active { transform: scale(.98); }
.store-add:focus-visible { outline: 2px solid #121212; outline-offset: 2px; }

.checkout {
  position: relative;
  z-index: 2;
  grid-column: 1 / 7;
  grid-row: 2;
  margin-top: -4.5rem;
  padding: 1.15rem 1.25rem 1.1rem;
  border-radius: 1rem;
  background: #fbfbfa;
  color: #121212;
  color-scheme: light;
  box-shadow: 0 2.5rem 5rem -1.5rem rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .05);
  font: 400 14px/1.45 var(--store);
}
.checkout-title { margin: 0 0 .9rem; color: #6b6b66; font-size: .78rem; font-weight: 600; }

.co-line { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: .85rem; }
.co-thumb { position: relative; width: 3.5rem; }
.co-thumb svg { display: block; width: 100%; height: auto; border: 1px solid #e3e3e0; border-radius: .5rem; }
.co-qty {
  position: absolute;
  top: -.5rem;
  right: -.5rem;
  display: grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: #66665f;
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.co-qty.is-bump { animation: bump .5s var(--ease-out); }
.co-name { display: grid; gap: .1rem; min-width: 0; }
.co-product { font-weight: 600; }
.co-variant { color: #6b6b66; font-size: .85rem; }
.co-disc { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .2rem; color: #4a4a46; font-size: .82rem; }
.co-disc[hidden] { display: none; }
.co-disc svg { flex: none; width: .85rem; height: .85rem; fill: currentColor; }
.co-prices { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.co-was { color: #8a8a85; font-size: .82rem; }
.co-was[hidden] { display: none; }
.co-pay { font-weight: 600; }

.co-sum { display: grid; gap: .45rem; margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid #e6e6e2; font-variant-numeric: tabular-nums; }
.co-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.co-row dt, .co-row dd { margin: 0; }
.co-total { font-size: 1.1rem; font-weight: 700; }
.co-total small { margin-right: .35rem; color: #6b6b66; font-size: .7rem; font-weight: 500; }

.co-match { display: flex; align-items: center; gap: .45rem; margin: .85rem 0 0; padding: .45rem .7rem; border-radius: .6rem; background: #f1ebff; color: #4a24b8; font-size: .8rem; font-weight: 600; }
.co-match[hidden] { display: none; }
.co-match svg { flex: none; width: 1rem; height: 1rem; fill: currentColor; }
.co-match.is-new { animation: pop .5s var(--ease-out); }

/* A price that changes rolls to its new figure, digit by digit (site.js builds the wheels). */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.odo { display: inline-flex; }
.odo-d { display: inline-block; height: 1lh; overflow: hidden; }
.odo-s { display: flex; flex-direction: column; transform: translateY(calc(var(--d) * -1lh)); transition: transform .85s var(--ease-out); }
.odo-s > span { height: 1lh; }
.checkout.is-new :is(.co-pay, .co-subtotal, .co-total-pay) { animation: changed 1.1s ease-out; }

/* The line of light from the chosen tier's price to the checkout's total. */
.beam { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.beam-line { fill: none; stroke: url(#beam-paint); stroke-width: 2.5; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 5px rgba(160, 105, 243, .95)); }
.beam-dot { fill: #fff; opacity: 0; filter: drop-shadow(0 0 6px #a069f3); }

/* The shirt on its way to the checkout. */
.fly { position: fixed; z-index: 50; margin: 0; pointer-events: none; transform-origin: 0 0; border-radius: .6rem; box-shadow: 0 1.5rem 3rem -1rem rgba(0, 0, 0, .55); }

.demo-note {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  grid-column: 7 / -1;
  grid-row: 2;
  align-self: center;
  max-width: 24em;
  margin: 1.5rem 0 0 2rem;
  color: var(--text-2);
  font-size: .95rem;
}
.demo-note svg { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .2rem; fill: var(--pale); }

/* As it comes into view, the store page rises flat onto the table and its checkout slides in. */
@supports (animation-timeline: view()) {
  html.motion .store { animation: store-in linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  html.motion .checkout { animation: checkout-in linear both; animation-timeline: view(); animation-range: entry 10% entry 100%; }
}

/* What shops get: each result beside how Bundles does it. */
.results-head {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: end;
  gap: 1.5rem clamp(2rem, 6vw, 8rem);
  margin-bottom: clamp(3rem, 5vw, 5rem);
}
.results-head p { max-width: 34em; margin: 0; color: var(--text-2); font-size: clamp(1.1rem, 1.3vw, 1.3rem); }

.stats { width: 100%; border-collapse: collapse; }
.stats th { padding: 0 0 1rem; border-bottom: 1px solid var(--line); color: var(--text-3); font: 500 .875rem/1.4 var(--sans); text-align: left; }
.stats th:first-child { width: 50%; }
.stats td { padding-block: clamp(1.75rem, 2.6vw, 2.75rem); border-bottom: 1px solid var(--line); vertical-align: top; }
.stats td:first-child { padding-right: clamp(2rem, 6vw, 8rem); }
.figure { display: block; margin-bottom: .9rem; color: #fff; font: 700 clamp(2.5rem, 4.2vw, 4.75rem)/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; transition: opacity .4s ease; }
html.js-reveal .stats tr:not(.is-in) .figure { opacity: 0; }
.stat-label { display: block; max-width: 26em; color: var(--text-2); font-size: 1.05rem; }
.answer { max-width: 28em; font-size: clamp(1.1rem, 1.35vw, 1.35rem); line-height: 1.5; }

/* Each figure as squares: one for each hundredth, the ones it counts lit. */
.units { display: grid; grid-template-columns: repeat(var(--cols), .55rem); gap: .22rem; margin: 0 0 1rem; }
.units i { width: .55rem; height: .55rem; border-radius: 2px; background: rgba(194, 144, 248, .14); }
.units i.on { background: #9b6cf5; box-shadow: 0 0 .5rem rgba(160, 105, 243, .5); }
html.js-reveal .units i.on { background: rgba(194, 144, 248, .14); box-shadow: none; scale: .5; transition: background-color .3s ease, box-shadow .3s ease, scale .45s var(--ease-out); transition-delay: calc(var(--i) * 22ms); }
html.js-reveal tr.is-in .units i.on { background: #9b6cf5; box-shadow: 0 0 .5rem rgba(160, 105, 243, .5); scale: 1; }

/* The note under the results while they are samples. */
.results-head .sample-note { margin-top: .75rem; color: var(--text-3); font-size: .9rem; }


/* Help */
.help-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem clamp(2rem, 6vw, 8rem); }
.help-head p { max-width: 28em; margin: 1.25rem 0 0; color: var(--text-2); }
.help-ways { display: grid; align-content: start; }
.way { display: grid; grid-template-columns: minmax(7rem, 1fr) minmax(0, 3fr); gap: .5rem 2rem; padding-block: 1.75rem; border-top: 1px solid var(--line); }
.way:last-child { border-bottom: 1px solid var(--line); }
.way h3 { padding-top: .3rem; color: var(--text-2); font: 500 1rem/1.4 var(--sans); letter-spacing: 0; }
.way-body { container-type: inline-size; min-width: 0; }
.way p { max-width: 30em; margin: 0; color: var(--text-2); }
.way .email { display: inline-block; margin-bottom: .6rem; color: #fff; font: 700 clamp(1.2rem, 7.4cqi, 2.75rem)/1.1 var(--display); letter-spacing: -.03em; text-decoration-color: rgba(194, 144, 248, .45); text-decoration-thickness: 2px; text-underline-offset: .18em; white-space: nowrap; }
.way .email:hover { text-decoration-color: #fff; }

.foot { border-top: 1px solid var(--line); background: var(--deep); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; padding-block: 2.25rem; }
.foot-links { list-style: none; display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0; padding: 0; font-size: .95rem; }
.foot .foot-links a { color: var(--text-3); text-decoration: none; }
.foot .foot-links a:hover { color: #fff; }
.copy { margin: 0 0 0 auto; color: var(--text-3); font-size: .9rem; }

@keyframes hw-draw { to { stroke-dashoffset: 0; } }
@keyframes hw-glint {
  from { opacity: 1; transform: translateX(0) skewX(-18deg); }
  to { opacity: 1; transform: translateX(1750px) skewX(-18deg); }
}
@keyframes glow { from { opacity: 0; scale: .8; } }
@keyframes floor-in { from { opacity: 0; transform: scaleX(0); } }
@keyframes rise { from { transform: translateY(115%); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(1rem); } }
@keyframes drop { from { transform: translateY(-100%); } }
@keyframes changed { from { background: rgba(109, 58, 233, .16); } to { background: transparent; } }
@keyframes bump { 40% { transform: scale(1.5); } }
@keyframes pop { from { opacity: 0; transform: translateY(.4rem) scale(.96); } }
@keyframes store-in { from { opacity: 0; transform: perspective(1400px) rotateX(14deg) translateY(4rem) scale(.95); } }
@keyframes checkout-in { from { opacity: 0; transform: translate(-3rem, 3rem) rotate(-2.5deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .glow, .floor::after, .hero-text, .button, .odo-s, .top-in { transition: none; }
  .top.is-stuck, .co-qty.is-bump, .co-match.is-new, .checkout.is-new :is(.co-pay, .co-subtotal, .co-total-pay) { animation: none; }
}

@media (max-width: 1180px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app-demo { width: 100%; max-width: 48rem; }
  .checkout { grid-column: 1 / 6; }
  .app-does { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results-head, .help-in { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .stage { width: min(78vw, 26rem); }
  .demo { grid-template-columns: minmax(0, 1fr); }
  .store, .checkout, .demo-note { grid-column: 1; }
  .checkout { grid-row: 2; margin-top: 1rem; }
  .demo-note { grid-row: 3; margin: 1.25rem 0 0; }
  .store-body { grid-template-columns: minmax(0, 1fr); padding: 1.25rem; gap: 1.25rem; }
  .store-photo { max-width: 15rem; }
  .app-does { grid-template-columns: minmax(0, 1fr); }
  .way { grid-template-columns: minmax(0, 1fr); }
  .stats thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .stats, .stats tbody, .stats tr, .stats td { display: block; }
  .stats tr { padding-block: 1.75rem; border-bottom: 1px solid var(--line); }
  .stats td { padding: 0; border: 0; }
  .stats td:first-child { padding-right: 0; }
  .answer { margin-top: 1rem; }
  .answer::before { content: attr(data-label); display: block; margin-bottom: .3rem; color: var(--text-3); font-size: .8rem; }
  .copy { margin-left: 0; }
}

@media (max-width: 560px) {
  .top-in { gap: 1rem; }
  .top nav { gap: 1rem; }
  .top nav a[href="#results"] { display: none; }
  .brand-mark { width: 1.9rem; }
  .wordmark { font-size: 1.05rem; }
}