/* beeloop.ai's home page (server/src/home.ts). A comb cut open: you fall through dark wax at night, drop into a cell
   full of honey, and back into the dark. The honey bands are bitten off at top and bottom by the points of the cells
   above and below them, so the two halves of the page interlock instead of meeting at a ruled line.
   One family, Recursive: its Casual style, set heavy and tight, for everything that speaks; its Linear style for
   everything that is read. Two materials: what you press is honey in glass, and what holds the app is smoked glass.
   The app is shown whole, in a smoked-glass frame no wider than the page's column; a phone gets the part that matters,
   cut out. Its one script (home.js) runs the chat box and the sign-in box: the moves are sprite strips stepped by CSS,
   the plans/credits switch is a radio button and the questions are <details>. */

@font-face {
  font-family: "Recursive";
  src: url("/static/site/fonts/recursive-latin.woff2") format("woff2");
  font-weight: 300 1000;
  font-style: oblique 0deg 15deg;
  font-display: swap;
}

:root {
  --hive: #14110b;
  --comb: #1e1910;
  --wax: #3b3222;
  --honey: #f6d77a;
  --honey-light: #fbe6a3;
  --pollen: #f4eedd;
  --body: #e4dbc4;
  --smoke: #aba08a;
  /* The honey band, and the ink that reads on it. */
  --field: linear-gradient(176deg, #f8e5a6, #eecd71);
  --field-flat: #f2d88c;
  --ink: #17120a;
  --ink-soft: #5e4a13;
  --ink-line: rgba(23, 18, 10, 0.17);
  /* Hairlines. */
  --line: rgba(246, 215, 122, 0.14);
  /* Glass you see through (the bar, the pieces leaning on the screenshot): a warm tint, an edge, a lit top edge,
     the shadow it throws and the frost on what's behind it. The grain is the panes' below. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .94 0 0 0 0 .8 .07 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --glass: linear-gradient(180deg, rgba(255, 238, 196, 0.075), rgba(255, 238, 196, 0.03) 42%, rgba(255, 238, 196, 0.025));
  --glass-drop: 0 32px 64px -32px rgba(0, 0, 0, 0.85);
  /* A pane of smoked glass on the dark: the slab, the light glancing off it from the top left, and its rim, bright
     where it faces the light (set in the border with background-clip, so it follows the corners). */
  --slab: linear-gradient(180deg, #221c13, #19150e);
  --sheen: linear-gradient(158deg, rgba(255, 240, 205, 0.09), rgba(255, 240, 205, 0.018) 36%, rgba(255, 240, 205, 0) 56%);
  --rim: linear-gradient(166deg, rgba(255, 226, 160, 0.5), rgba(255, 226, 160, 0.12) 26%, rgba(255, 226, 160, 0.05) 62%, rgba(255, 226, 160, 0.1));
  --pane: var(--grain) padding-box, var(--sheen) padding-box, var(--slab) padding-box, var(--rim) border-box;
  /* Honey in glass: lit from below, a sheen on the top half, an amber rim. */
  --honey-fill:
    linear-gradient(180deg, rgba(255, 253, 240, 0.5), rgba(255, 253, 240, 0.08) 50%, rgba(255, 253, 240, 0) 62%),
    radial-gradient(130% 130% at 50% 108%, #ffe38f, #f3c856 52%, #dca437);
  --honey-rim: #b3821f;
  --honey-lit:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 4px rgba(150, 92, 8, 0.32),
    0 1px 1px rgba(0, 0, 0, 0.45),
    0 12px 26px -12px rgba(246, 196, 72, 0.65);
  --honey-pressed:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 2px 5px rgba(150, 92, 8, 0.38),
    0 0 1px rgba(0, 0, 0, 0.5),
    0 4px 12px -8px rgba(246, 196, 72, 0.5);
  /* One row of cells, seen from the side: the bite taken out of a honey band's top and bottom edge. */
  --tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='16' preserveAspectRatio='none'%3E%3Cpath d='M0 16V14L28 0l28 14v2z' fill='%23000'/%3E%3C/svg%3E");
  --tooth-h: 16px;
  /* The voices. Casual, heavy and tight is what the page says; Linear is what it reads. */
  --speak: "CASL" 1, "MONO" 0;
  --read: "CASL" 0, "MONO" 0;
  --gutter: clamp(16px, 4vw, 48px);
  --page: min(1280px, 100% - 2 * var(--gutter));
  --inset: min(1080px, 100%);
  /* The same column for what sits straight in a part (the full width of the window), with the page's gutter kept. */
  --column: min(1080px, 100% - 2 * var(--gutter));
  --section: clamp(84px, 9vw, 140px);
  color-scheme: dark;
  scroll-padding-top: 92px;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: clip;
  background-color: var(--hive);
  /* A honeycomb of dots: a hex lattice, its rows half a step apart. */
  background-image:
    radial-gradient(circle, rgba(246, 215, 122, 0.07) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(246, 215, 122, 0.07) 1px, transparent 1.6px);
  background-size: 26px 45px;
  background-position:
    0 0,
    13px 22.5px;
  color: var(--pollen);
  font-family: "Recursive", ui-sans-serif, system-ui, sans-serif;
  font-variation-settings: var(--read);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* --- the surfaces the browser draws, kept in the page's own colours --- */

::selection {
  background: rgba(246, 215, 122, 0.3);
  color: #fff8e4;
}

.band ::selection {
  background: rgba(23, 18, 10, 0.78);
  color: #f8e5a6;
}

* {
  scrollbar-color: var(--wax) var(--hive);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--hive);
}

::-webkit-scrollbar-thumb {
  border: 3px solid var(--hive);
  border-radius: 8px;
  background: var(--wax);
}

::-webkit-scrollbar-thumb:hover {
  background: #4f432c;
}

a {
  color: var(--honey);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--honey-light);
}

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

.band :focus-visible {
  outline-color: var(--ink);
}

b {
  color: var(--pollen);
  font-weight: 700;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: var(--gutter);
  top: 84px;
  z-index: 20;
  background: var(--comb);
  padding: 8px 14px;
}

h1,
h2,
h3,
.brand,
.button,
.stamp,
.plan-price b,
.credits-top b,
.amount-usd,
summary {
  font-variation-settings: var(--speak);
}

h1,
h2 {
  text-wrap: balance;
  letter-spacing: -0.035em;
  line-height: 0.95;
  font-weight: 860;
}

h3 {
  margin: 0 0 0.4rem;
  color: var(--pollen);
  font-size: 1.12rem;
  font-weight: 760;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

/* --- the bar --- */

.top {
  position: sticky;
  top: 14px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 20px;
  width: var(--page);
  margin: 14px auto 0;
  padding: 9px 9px 9px 18px;
  border: 1px solid rgba(255, 233, 184, 0.11);
  border-radius: 999px;
  background: var(--glass), rgba(20, 17, 11, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 222, 0.13),
    0 20px 44px -26px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--pollen);
  font-size: 1.04rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand img {
  display: block;
}

.brand:hover {
  color: var(--honey-light);
}

.links {
  display: flex;
  gap: 4px;
  margin-inline: auto;
}

.links a {
  padding: 7px 13px;
  border-radius: 999px;
  color: var(--body);
  font-size: 0.93rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.16s ease-out, color 0.16s ease-out;
}

.links a:hover {
  background: rgba(246, 215, 122, 0.1);
  color: var(--honey-light);
}

.actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.actions a:not(.button) {
  color: var(--body);
  font-size: 0.93rem;
  text-decoration: none;
  white-space: nowrap;
}

.brand {
  white-space: nowrap;
}

/* Between a phone and a laptop, the bar keeps its links but tighter, so nothing wraps. */
@media (max-width: 980px) {
  .top {
    gap: 10px;
  }

  .links a {
    padding: 7px 8px;
    font-size: 0.88rem;
  }
}

.actions a:not(.button):hover {
  color: var(--honey-light);
}

/* --- honey in glass: everything you press --- */

.button,
.plan-button.popular-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border: 1px solid var(--honey-rim);
  border-radius: 999px;
  background: var(--honey-fill);
  box-shadow: var(--honey-lit);
  color: #2c1f05;
  font-size: 1.04rem;
  font-weight: 800;
  letter-spacing: -0.012em;
  text-decoration: none;
  transition: filter 0.16s ease-out, box-shadow 0.16s ease-out, translate 0.16s ease-out;
}

.button:hover,
.plan-button.popular-button:hover {
  filter: brightness(1.07);
  color: #2c1f05;
  translate: 0 -1px;
}

.button:active,
.plan-button.popular-button:active {
  box-shadow: var(--honey-pressed);
  filter: brightness(0.97);
  translate: 0 1px;
}

.button svg {
  width: 19px;
  height: 19px;
  flex: none;
}

.button.small {
  padding: 9px 18px;
  font-size: 0.93rem;
}

/* --- the hero --- */

.hero {
  width: var(--page);
  margin: clamp(56px, 8vw, 104px) auto 0;
  text-align: center;
}

.hero-words {
  max-width: 1120px;
  margin-inline: auto;
}

/* The offer over the headline: a cell stamped in honey on a hairline, not a pill with a light in it. */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(22px, 3vw, 34px);
  padding: 0 0 9px;
  border-bottom: 1px solid rgba(246, 215, 122, 0.42);
  color: var(--honey);
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: -0.008em;
  text-decoration: none;
}

.stamp .mark {
  width: 19px;
  height: 21px;
  flex: none;
}

.stamp .arrow {
  width: 15px;
  height: 11px;
  flex: none;
  transition: translate 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.stamp:hover {
  border-bottom-color: var(--honey-light);
}

.stamp:hover .arrow {
  translate: 4px 0;
}

h1 {
  margin: 0;
  font-size: clamp(2.9rem, 7vw, 5.2rem);
}

h1 span {
  display: block;
}

h1 span:last-child {
  color: var(--honey);
}

.lead {
  max-width: 52ch;
  margin: clamp(22px, 2.6vw, 30px) auto 0;
  color: var(--body);
  font-size: clamp(1.04rem, 1.35vw, 1.18rem);
  line-height: 1.58;
  text-wrap: pretty;
}

.get {
  margin-top: clamp(28px, 3.4vw, 40px);
}

.note {
  max-width: 48ch;
  margin: 16px auto 0;
  color: var(--smoke);
  font-size: 0.92rem;
  line-height: 1.5;
}

.note a {
  color: var(--body);
  text-underline-offset: 0.22em;
}

.note a:hover {
  color: var(--honey-light);
}

/* The page leads with a question and a box, nothing else (as plain as Tripo's): smoked glass holding the words,
   honey to send them, a bulb for an idea. */
h1.ask-title {
  font-size: clamp(2.3rem, 5.2vw, 4.1rem);
}

.ask-sub {
  margin: clamp(10px, 1.4vw, 16px) auto 0;
  color: var(--smoke);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}

.ask {
  max-width: 880px;
  margin: clamp(30px, 3.6vw, 44px) auto 0;
  padding: 18px;
  border: 1px solid transparent;
  border-radius: 26px;
  background: var(--pane);
  box-shadow: inset 0 1px 0 rgba(255, 246, 222, 0.07), var(--glass-drop);
  text-align: left;
  transition: box-shadow 0.16s ease-out;
}

.ask:focus-within {
  box-shadow: inset 0 1px 0 rgba(255, 246, 222, 0.07), 0 0 0 2px rgba(246, 215, 122, 0.5), var(--glass-drop);
}

.ask textarea {
  display: block;
  width: 100%;
  min-height: 132px;
  padding: 8px 10px;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--pollen);
  font: inherit;
  font-size: 1.2rem;
  line-height: 1.5;
}

.ask textarea::placeholder {
  color: var(--smoke);
}

/* The foot: the app's download on the left, the idea bulb and send on the right, all one height. */
.ask-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}

.ask-foot .button {
  height: 48px;
  padding: 0 22px;
  font-size: 0.98rem;
}

.ask-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.ask .button .arrow {
  width: 15px;
  height: 11px;
}

.ask-idea {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 233, 184, 0.2);
  border-radius: 999px;
  background: rgba(255, 238, 196, 0.04);
  color: var(--body);
  cursor: pointer;
  transition: color 0.16s ease-out, border-color 0.16s ease-out;
}

.ask-idea[hidden] {
  display: none;
}

.ask-idea:hover {
  border-color: rgba(246, 215, 122, 0.55);
  color: var(--honey-light);
}

.ask-idea svg {
  width: 20px;
  height: 20px;
}

.hidden-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ask-send {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--honey-rim);
  border-radius: 999px;
  background: var(--honey-fill);
  box-shadow: var(--honey-lit);
  color: #2c1f05;
  cursor: pointer;
  transition: filter 0.16s ease-out, translate 0.16s ease-out;
}

.ask-send:hover {
  filter: brightness(1.07);
  translate: 0 -1px;
}

.ask-send svg {
  width: 20px;
  height: 20px;
}

/* The app, held in a glass bezel, with a character from two other games leaning on it, moving. This is the page's one
   authored moment: it rises and settles once, and the pieces arrive just after it. */
.hero-shot {
  position: relative;
  width: var(--inset);
  margin: clamp(44px, 5vw, 68px) auto 0;
}

.hero-shot .shot {
  width: 100%;
  margin: 0;
}

.peek {
  position: absolute;
  z-index: 2;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  width: 150px;
  height: 172px;
  padding: 16px;
  border: 1px solid rgba(255, 233, 184, 0.16);
  border-radius: 20px;
  /* Glass over the screenshot's edge, with honey light pooled on its floor. */
  background:
    radial-gradient(90% 55% at 50% 100%, rgba(246, 205, 100, 0.3), transparent 72%),
    var(--glass),
    rgba(34, 28, 18, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 222, 0.2),
    0 28px 56px -16px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
}

.peek .strip {
  justify-self: center;
  align-self: end;
  width: auto;
  height: 100%;
}

/* Ren's run is cut to the box its frames fit in (ren-run-peek), so it fills the piece and stays inside it. */
.peek-right .strip {
  width: 100%;
  height: auto;
}

.peek-left {
  left: -88px;
  bottom: 6%;
  rotate: -9deg;
}

.peek-right {
  right: -84px;
  bottom: 22%;
  rotate: 8deg;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-shot .frame {
    animation: settle 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .peek {
    animation: lean 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
  }

  @keyframes settle {
    from {
      translate: 0 36px;
      scale: 0.975;
      filter: blur(7px);
      opacity: 0;
    }
  }

  @keyframes lean {
    from {
      translate: 0 22px;
      opacity: 0;
    }
  }
}

/* --- the parts --- */

.part {
  position: relative;
  padding-block: var(--section);
}

.head {
  width: var(--page);
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

h2 {
  margin: 0;
  font-size: clamp(2.15rem, 4.6vw, 3.5rem);
}

.head p {
  max-width: 56ch;
  margin: clamp(16px, 2vw, 22px) auto 0;
  color: var(--body);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  text-wrap: pretty;
}

/* A heading and its words on one side, the app on the other. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(34px, 5vw, 72px);
  width: var(--page);
  margin-inline: auto;
}

.split.flip {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.split.flip .words {
  order: 2;
}

/* A column of questions is taller than its heading, so it starts at the top rather than centring. */
.split.start {
  align-items: start;
}

.split.tight {
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: start;
  margin-top: clamp(48px, 6vw, 80px);
}

.words p {
  max-width: 62ch;
  margin: 1.05rem 0 0;
  color: var(--body);
  line-height: 1.62;
  text-wrap: pretty;
}

.words .say {
  margin-top: clamp(16px, 2vw, 22px);
  color: var(--pollen);
  font-size: clamp(1.04rem, 1.3vw, 1.16rem);
  line-height: 1.55;
}

.words p b {
  color: var(--honey-light);
  font-weight: 760;
}

/* A screenshot of the app, whole, in smoked glass like the hero's. */
.shot {
  width: var(--column);
  margin: clamp(36px, 4.5vw, 56px) auto 0;
}

.frame {
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: var(--pane);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 222, 0.07),
    0 60px 110px -50px rgba(0, 0, 0, 0.95);
}

.frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 13px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

figcaption {
  max-width: 64ch;
  margin-top: 13px;
  padding-left: 15px;
  border-left: 1px solid rgba(246, 215, 122, 0.4);
  color: var(--smoke);
  font-size: 0.89rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.split .shot {
  width: 100%;
  margin: 0;
}

.words h3 {
  margin: 0;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 840;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* --- a game's world, part by part: the words beside each screenshot, the sides swapping down the page --- */

.steps {
  display: grid;
  gap: clamp(48px, 7vw, 96px);
  width: var(--column);
  margin: clamp(44px, 5.5vw, 72px) auto 0;
}

.step {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

.step.flip {
  grid-template-columns: minmax(0, 1.38fr) minmax(0, 0.62fr);
}

.step.flip .words {
  order: 2;
}

.step .shot {
  width: 100%;
  margin: 0;
}

/* --- a move beside what came back: the roll and the run side by side, the top-down roll under them --- */

.pairs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(20px, 3vw, 36px);
  width: var(--column);
  margin: clamp(40px, 5vw, 64px) auto 0;
}

.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
  margin: 0;
}

.pair figcaption {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.facings {
  grid-template-columns: minmax(0, 1fr);
  width: var(--column);
  margin: clamp(28px, 3.5vw, 44px) auto 0;
}

/* Wax cells set into the honey: the mannequin's dark and plain, the game's lit warm from below. */
.stage {
  position: relative;
  display: grid;
  place-items: end center;
  padding: 44px clamp(10px, 2vw, 22px) clamp(14px, 2vw, 22px);
  border: 1px solid transparent;
  border-radius: 20px;
  background: var(--grain) padding-box, var(--slab) padding-box, var(--rim) border-box;
  box-shadow: 0 26px 46px -26px rgba(60, 40, 0, 0.6);
}

.stage.real {
  background:
    radial-gradient(80% 45% at 50% 100%, rgba(246, 205, 100, 0.22), transparent 72%) padding-box,
    var(--grain) padding-box,
    linear-gradient(180deg, #2a2114, #17130c) padding-box,
    linear-gradient(166deg, rgba(250, 216, 120, 0.95), rgba(246, 210, 110, 0.3) 34%, rgba(246, 210, 110, 0.2)) border-box;
}

.stage-label {
  position: absolute;
  top: 14px;
  left: 16px;
  margin: 0;
  color: var(--smoke);
  font-size: 0.82rem;
  font-weight: 700;
}

.stage.real .stage-label {
  color: var(--honey);
}

.stage > .strip {
  width: min(100%, 300px);
}

.three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
}

/* A sprite strip, one frame at a time: --frames frames side by side in --src, each --aspect, played in --time. */
.strip {
  display: block;
  width: 100%;
  aspect-ratio: var(--aspect);
  background: var(--src) 0 0 / calc(var(--frames) * 100%) 100% no-repeat;
  animation: frames var(--time) steps(var(--frames), jump-none) infinite;
}

.strip.pixel {
  image-rendering: pixelated;
}

@keyframes frames {
  from {
    background-position: 0% 0;
  }
  to {
    background-position: 100% 0;
  }
}

.facings + .shot {
  margin-top: clamp(56px, 7vw, 96px);
}

.band .frame {
  background: var(--hive);
  box-shadow:
    inset 0 0 0 1px rgba(246, 215, 122, 0.18),
    0 40px 70px -34px rgba(60, 40, 0, 0.55);
}

.band figcaption {
  border-left-color: rgba(23, 18, 10, 0.4);
  color: var(--ink-soft);
}

/* --- frames from the games' own test runs --- */

.frames {
  width: var(--column);
  margin: clamp(36px, 4.5vw, 56px) auto 0;
}

.frames-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(10px, 1.4vw, 16px);
}

.frames-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(255, 233, 184, 0.13),
    0 26px 48px -22px rgba(0, 0, 0, 0.9);
}

.frames-grid .big {
  grid-row: span 2;
}

.frames-grid .pixel {
  image-rendering: pixelated;
}

/* --- a cell full of honey --- */

.band {
  margin-block: calc(var(--tooth-h) * 2);
  background: var(--field);
  color: var(--ink);
}

.band::before,
.band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--tooth-h);
  background: var(--field-flat);
  -webkit-mask: var(--tooth) repeat-x bottom / 56px var(--tooth-h);
  mask: var(--tooth) repeat-x bottom / 56px var(--tooth-h);
}

.band::before {
  bottom: 100%;
}

.band::after {
  top: 100%;
  scale: 1 -1;
}

.band h2,
.band h3 {
  color: var(--ink);
}

.band > .head p,
.band > .fine,
.band .perk p {
  color: var(--ink-soft);
}

.band a:not(.button):not(.plan-button) {
  color: #4a3a0b;
}

.band a:not(.button):not(.plan-button):hover {
  color: var(--ink);
}

/* --- what it costs --- */

.prices {
  width: var(--page);
  margin: clamp(36px, 4.5vw, 56px) auto 0;
}

.price-pick {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.price-tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  margin: 0 auto clamp(30px, 3.5vw, 42px);
  padding: 4px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: rgba(23, 18, 10, 0.08);
}

.price-tabs label {
  padding: 9px 24px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.16s ease-out, color 0.16s ease-out;
}

.price-tabs label:hover {
  color: var(--ink);
}

#prices-plans:checked ~ .price-tabs label[for="prices-plans"],
#prices-credits:checked ~ .price-tabs label[for="prices-credits"] {
  background: var(--ink);
  color: #f6dd92;
}

#prices-plans:focus-visible ~ .price-tabs label[for="prices-plans"],
#prices-credits:focus-visible ~ .price-tabs label[for="prices-credits"] {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

#prices-credits:checked ~ .price-plans {
  display: none;
}

.price-credits {
  display: none;
}

#prices-credits:checked ~ .price-credits {
  display: block;
}

/* Monthly or yearly: a smaller switch under the plans/credits one, the saving tagged on Yearly. */
.price-tabs.billing-tabs {
  margin-top: calc(clamp(30px, 3.5vw, 42px) * -0.45);
  margin-bottom: clamp(22px, 2.6vw, 30px);
  padding: 3px;
}

.billing-tabs label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 18px;
  font-size: 0.88rem;
}

.billing-tabs em {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: #f6dd92;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 760;
}

#billing-month:checked ~ .price-tabs label[for="billing-month"],
#billing-year:checked ~ .price-tabs label[for="billing-year"] {
  background: var(--ink);
  color: #f6dd92;
}

#billing-year:checked ~ .price-tabs label[for="billing-year"] em {
  background: #f6dd92;
  color: var(--ink);
}

#billing-month:focus-visible ~ .price-tabs label[for="billing-month"],
#billing-year:focus-visible ~ .price-tabs label[for="billing-year"] {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

#billing-month:checked ~ .plan-cards .by-year,
#billing-year:checked ~ .plan-cards .by-month {
  display: none;
}

.plan-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.plan-cards.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Wax cells set into the honey: dark panels, the popular one deepest and rimmed in honey. */
.plan-card,
.credits-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: 24px 22px 26px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: var(--grain) padding-box, var(--slab) padding-box, var(--rim) border-box;
  color: var(--pollen);
  box-shadow: 0 26px 46px -26px rgba(60, 40, 0, 0.6);
}

.plan-card.popular {
  background: var(--grain) padding-box, linear-gradient(180deg, #2a2114, #17130c) padding-box, linear-gradient(166deg, rgba(250, 216, 120, 0.95), rgba(246, 210, 110, 0.3) 34%, rgba(246, 210, 110, 0.2)) border-box;
  box-shadow: 0 34px 60px -26px rgba(60, 40, 0, 0.75);
}

.plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  margin-bottom: 14px;
}

.cells {
  width: 30px;
  height: 30px;
  color: var(--honey);
}

.plan-card.free .cells {
  color: var(--smoke);
}

.plan-badge {
  padding: 4px 11px;
  border: 1px solid rgba(246, 215, 122, 0.45);
  border-radius: 999px;
  color: var(--honey);
  font-size: 0.76rem;
  font-weight: 760;
  letter-spacing: 0.02em;
}

.plan-card h3 {
  margin: 0;
  color: var(--pollen);
  font-size: 1.3rem;
  font-weight: 820;
}

.plan-line {
  min-height: 2.5em;
  margin: 4px 0 0;
  color: var(--smoke);
  font-size: 0.9rem;
  line-height: 1.4;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 18px;
  font-variant-numeric: tabular-nums;
}

.plan-price b {
  color: var(--pollen);
  font-size: 2.3rem;
  font-weight: 860;
  letter-spacing: -0.04em;
  line-height: 1;
}

.plan-price span {
  color: var(--smoke);
  font-size: 0.78rem;
  line-height: 1.3;
}

.plan-art {
  min-height: 2.9em;
  margin: 16px 0 0;
  color: var(--body);
  font-size: 0.9rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

.plan-art b {
  color: var(--honey-light);
  font-weight: 760;
}

.plan-button {
  display: block;
  margin-top: 20px;
  padding: 12px 18px;
  border: 1px solid rgba(246, 215, 122, 0.4);
  border-radius: 999px;
  background: rgba(246, 215, 122, 0.08);
  color: var(--honey);
  font-size: 0.97rem;
  font-weight: 760;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.16s ease-out, border-color 0.16s ease-out, color 0.16s ease-out;
}

.plan-button:hover {
  border-color: var(--honey);
  background: rgba(246, 215, 122, 0.16);
  color: var(--honey-light);
}

.plan-button:active {
  background: rgba(246, 215, 122, 0.24);
}

.plan-card.popular .plan-button {
  border-color: var(--honey-rim);
  background: var(--honey-fill);
  box-shadow: var(--honey-lit);
  color: #2c1f05;
}

.plan-card.popular .plan-button:hover {
  filter: brightness(1.07);
  color: #2c1f05;
}

.plan-note {
  margin: 11px 0 0;
  color: var(--smoke);
  font-size: 0.8rem;
  text-align: center;
}

.plan-what {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.plan-what p {
  margin: 0 0 10px;
  color: var(--body);
  font-size: 0.86rem;
  font-weight: 700;
}

.plan-what ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-what li {
  position: relative;
  padding-left: 19px;
  color: var(--smoke);
  font-size: 0.86rem;
  line-height: 1.45;
}

.plan-what li + li {
  margin-top: 7px;
}

/* A cell for a bullet, in the page's own shape. */
.plan-what li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 7px;
  height: 8px;
  background: var(--honey);
  opacity: 0.75;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.credits-card {
  height: auto;
  max-width: 560px;
  margin-inline: auto;
  padding: 30px 30px 32px;
}

.credits-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}

.credits-top b {
  color: var(--pollen);
  font-size: 2.4rem;
  font-weight: 860;
  letter-spacing: -0.04em;
  line-height: 1;
}

.credits-top span {
  color: var(--body);
  font-size: 0.95rem;
}

.credits-top em {
  margin-left: auto;
  color: var(--honey);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 760;
}

.credits-about {
  margin: 16px 0 0;
  color: var(--body);
  font-size: 0.93rem;
  line-height: 1.55;
}

.amounts {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

/* Each amount is its own checkout. */
.amounts li + li {
  margin-top: 8px;
}

.amounts a {
  display: grid;
  grid-template-columns: 3.6rem 7.4rem minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 238, 196, 0.03);
  color: inherit;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.16s ease-out, background-color 0.16s ease-out;
}

.amounts a:hover {
  border-color: rgba(246, 215, 122, 0.55);
  background: rgba(246, 215, 122, 0.07);
  color: inherit;
}

.amounts .arrow {
  width: 15px;
  height: 11px;
  color: var(--honey);
}

.amount-usd {
  color: var(--pollen);
  font-size: 1.05rem;
  font-weight: 820;
  letter-spacing: -0.02em;
}

.amount-credits {
  color: var(--honey);
  font-size: 0.9rem;
  font-weight: 700;
}

.amount-art {
  color: var(--smoke);
  font-size: 0.85rem;
  line-height: 1.4;
}

.perks {
  width: var(--page);
  max-width: 760px;
  margin: clamp(32px, 4vw, 48px) auto 0;
}

.perk {
  padding-top: 20px;
  border-top: 1px solid var(--ink-line);
}

.perk h3 {
  color: var(--ink);
}

.perk p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
}

.fine {
  width: var(--page);
  max-width: 68ch;
  margin: clamp(30px, 3.6vw, 44px) auto 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.55;
  text-align: center;
}

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

.faq {
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 0;
  color: var(--pollen);
  font-size: 1.04rem;
  font-weight: 740;
  letter-spacing: -0.012em;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  transition: color 0.16s ease-out;
}

summary:hover {
  color: var(--honey-light);
}

summary::-webkit-details-marker {
  display: none;
}

/* A drawn cross that turns into a bar when the answer is open. */
summary::after {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 0.34em;
  background:
    linear-gradient(currentColor, currentColor) center / 13px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 13px no-repeat;
  color: var(--honey);
  transition: rotate 0.24s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease-out;
}

details[open] summary::after {
  rotate: 45deg;
  opacity: 0.75;
}

.faq details p {
  max-width: 66ch;
  margin: 0 0 22px;
  color: var(--body);
  font-size: 0.97rem;
  line-height: 1.6;
}

/* --- the last word --- */

.finale {
  position: relative;
  isolation: isolate;
  padding-block: clamp(96px, 12vw, 168px);
  overflow: hidden;
  border-top: 1px solid var(--line);
}

.finale-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.finale::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 120% at 50% 50%, rgba(20, 17, 11, 0.55), rgba(20, 17, 11, 0.93) 72%),
    linear-gradient(180deg, var(--hive), transparent 22%, transparent 78%, var(--hive));
}

.finale-in {
  width: var(--page);
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.finale h2 {
  margin: 0;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
}

.finale-in > p:not(.note) {
  max-width: 44ch;
  margin: 18px auto clamp(28px, 3.4vw, 38px);
  color: var(--body);
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.55;
}

/* --- the bottom --- */

.bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  width: var(--page);
  margin: 0 auto;
  padding-block: clamp(48px, 6vw, 72px);
  border-top: 1px solid var(--line);
}

.about p {
  max-width: 34ch;
  margin: 12px 0 0;
  color: var(--smoke);
  font-size: 0.92rem;
}

.bottom nav {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.bottom .col {
  margin: 0 0 3px;
  color: var(--pollen);
  font-size: 0.9rem;
  font-weight: 740;
}

.bottom nav a {
  color: var(--smoke);
  font-size: 0.92rem;
  text-decoration: none;
  width: fit-content;
}

.bottom nav a:hover {
  color: var(--honey-light);
}

/* --- the sign-in box: the same as the website Design's (SignUp.tsx, after Higgsfield's), in the app's colours: the
   games on the left, the ways in on the right. On a phone, the whole screen, the games across the top. --- */

.signin {
  --s-bg: #24262b;
  --s-panel: #1b1c20;
  --s-well: #111215;
  --s-hover: #2d2f35;
  --s-line: #2c2e34;
  --s-line-strong: #3b3e46;
  --s-text: #e6e7ea;
  --s-muted: #a3a6ae;
  --s-faint: #6f737c;
  --s-accent: #f6d77a;
  --s-accent-strong: #fbe6a3;
  --s-on-accent: #231d0c;
  --s-bad: #ef5a56;
  width: min(1000px, 100% - 32px);
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--s-text);
  font: 400 14px/1.45 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  overflow: visible;
  overscroll-behavior: contain;
}

.signin::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

/* The page under the box stays put while it's open. */
html:has(.signin[open]) {
  overflow: hidden;
}

.signin-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  min-height: 580px;
  max-height: calc(100dvh - 32px);
  overflow: hidden auto;
  border: 1px solid var(--s-line-strong);
  border-radius: 16px;
  background: var(--s-bg);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.75);
}

.signin-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--s-muted);
  cursor: pointer;
}

.signin-close:hover {
  background: var(--s-hover);
  color: var(--s-text);
}

.signin-close svg {
  width: 16px;
  height: 16px;
}

/* The games: each whole over a blurred, dimmed copy of itself, its title and line under it, the tabs at the foot. */
.signin-games {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--s-well);
}

.sg-backs,
.sg-back {
  position: absolute;
  inset: 0;
}

.sg-back,
.sg-picture {
  opacity: 0;
  transition: opacity 0.7s;
}

.sg-back.on,
.sg-picture.on {
  opacity: 1;
}

.sg-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.25);
  filter: blur(40px) brightness(0.45) saturate(1.5);
}

.sg-back.walk {
  background: radial-gradient(70% 50% at 50% 45%, rgba(246, 205, 100, 0.18), transparent 70%), linear-gradient(180deg, #2a2418, #14110b);
}

.sg-stage {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 28px 0;
}

.sg-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.sg-picture {
  position: absolute;
  inset: 0;
}

.sg-picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sg-picture.walk {
  display: grid;
  place-items: center;
  background: radial-gradient(80% 60% at 50% 85%, rgba(246, 205, 100, 0.28), transparent 70%), linear-gradient(180deg, #2a2418, #14110b);
}

.sg-walk {
  display: block;
  height: 72%;
  aspect-ratio: 180 / 176;
  background: url("/static/site/walk-customer-large.png") 0 0 / 2400% 100% no-repeat;
  animation: sg-stride 1s steps(24, jump-none) infinite;
}

@keyframes sg-stride {
  to {
    background-position: 100% 0;
  }
}

.sg-title {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.sg-line {
  margin-top: 2px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.sg-tabs {
  position: relative;
  display: flex;
  gap: 8px;
  padding: 24px 28px 20px;
}

.sg-tabs button {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.sg-bar {
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.25);
}

.sg-bar span {
  display: block;
  width: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
}

.sg-tabs .past .sg-bar span {
  width: 100%;
}

.sg-tabs [aria-selected="true"] .sg-bar span {
  background: var(--s-accent);
  animation: sg-fill var(--slide-ms, 4500ms) linear forwards;
}

@keyframes sg-fill {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.sg-name {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.55);
}

.sg-tabs [aria-selected="true"] .sg-name,
.sg-tabs button:hover .sg-name {
  color: #fff;
}

/* The ways in. */
.signin-side {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px;
}

.signin-bee {
  width: 44px;
  height: 44px;
}

.signin [data-when] {
  display: none;
}

.signin[data-mode="signup"] [data-when="signup"],
.signin[data-mode="login"] [data-when="login"] {
  display: revert;
}

.signin[data-mode="signup"] .signin-gift[data-when="signup"],
.signin[data-mode="signup"] .signin-agree[data-when="signup"] {
  display: flex;
}

.signin-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 20px;
  padding: 4px;
  border: 1px solid var(--s-line-strong);
  border-radius: 8px;
  background: var(--s-well);
}

.signin-modes button {
  height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--s-muted);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.signin-modes button:hover {
  color: var(--s-text);
}

.signin-modes [aria-selected="true"] {
  background: var(--s-bg);
  color: var(--s-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.signin h2 {
  margin: 20px 0 0;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: normal;
  font-family: inherit;
}

.signin-lead {
  margin: 4px 0 0;
  color: var(--s-muted);
}

.signin-gift {
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  padding: 10px 14px;
  border: 1px solid rgba(246, 215, 122, 0.3);
  border-radius: 8px;
  background: rgba(246, 215, 122, 0.1);
}

.signin-gift svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--s-accent);
}

.signin-gift b {
  color: var(--s-accent);
  font-weight: 600;
}

.signin-step {
  margin-top: 20px;
}

.signin-step[hidden] {
  display: none;
}

.signin .way {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  margin-bottom: 10px;
  border: 1px solid var(--s-line-strong);
  border-radius: 8px;
  background: var(--s-panel);
  color: var(--s-text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.signin .way:hover {
  background: var(--s-hover);
}

.signin .way svg {
  width: 16px;
  height: 16px;
}

.signin .or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 14px;
  font-size: 12px;
  color: var(--s-faint);
}

.signin .or span {
  flex: 1;
  border-top: 1px solid var(--s-line);
}

.signin-row {
  display: flex;
  gap: 8px;
}

.signin-email {
  position: relative;
  flex: 1;
  display: block;
}

.signin-email svg {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--s-faint);
  pointer-events: none;
}

.signin input[type="email"],
.signin input[type="password"],
.signin input.code {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--s-line-strong);
  border-radius: 8px;
  background: var(--s-well);
  color: var(--s-text);
  font: inherit;
  outline: none;
}

.signin-email input[type="email"] {
  padding-left: 36px;
}

.signin [data-form="password"] > * + * {
  margin-top: 10px;
}

.signin input::placeholder {
  color: var(--s-faint);
}

.signin input:focus {
  border-color: var(--s-accent);
}

.signin input.code {
  height: 48px;
  margin-top: 12px;
  text-align: center;
  font-size: 24px;
  letter-spacing: 0.4em;
  font-variant-numeric: tabular-nums;
}

.signin .go {
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: var(--s-accent);
  color: var(--s-on-accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.signin .go:hover {
  background: var(--s-accent-strong);
}

.signin .go:disabled {
  opacity: 0.6;
  cursor: default;
}

.signin .go.wide {
  width: 100%;
  margin-top: 12px;
}

.signin-sent {
  margin: 0;
}

.signin-sent b {
  font-weight: 500;
}

.signin-links {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 0;
  font-size: 12px;
}

.signin-links button,
.signin-links a {
  padding: 0;
  border: 0;
  background: none;
  color: var(--s-muted);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.signin-links button:hover,
.signin-links a:hover {
  color: var(--s-text);
}

.signin-problem {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--s-bad);
}

.signin-problem[hidden] {
  display: none;
}

.signin-agree {
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--s-muted);
  cursor: pointer;
}

.signin-agree input {
  margin: 3px 0 0;
  accent-color: var(--s-accent);
}

.signin-terms {
  margin: 24px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--s-faint);
}

.signin-agree a,
.signin-terms a {
  color: var(--s-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* A phone: a narrower card over the dimmed page, the games across its top and the ways in under them, a little
   tighter; every field at 16px, so Safari doesn't zoom in on a tap. */
@media (max-width: 767px) {
  .signin-card {
    grid-template-columns: 1fr;
    align-content: start;
    min-height: 0;
    overscroll-behavior: contain;
  }

  .signin-close {
    width: 36px;
    height: 36px;
    border-radius: 99px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
  }

  .sg-stage {
    padding: 16px 16px 0;
  }

  .sg-title {
    margin-top: 12px;
    font-size: 15px;
  }

  .sg-line {
    font-size: 13px;
  }

  .sg-tabs {
    padding: 12px 16px;
  }

  .signin-side {
    justify-content: flex-start;
    padding: 20px 20px 24px;
  }

  .signin-bee {
    width: 36px;
    height: 36px;
  }

  .signin-modes {
    margin-top: 16px;
  }

  .signin h2 {
    margin-top: 16px;
    font-size: 20px;
  }

  .signin input[type="email"],
  .signin input[type="password"] {
    font-size: 16px;
  }

  .signin-agree input {
    width: 18px;
    height: 18px;
    margin-top: 1px;
  }
}

/* A short phone (an SE): no bee and no caption under the picture, so the card fits. */
@media (max-width: 767px) and (max-height: 720px) {
  .signin-bee,
  .sg-line {
    display: none;
  }

  .signin-modes {
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sg-walk {
    animation: none;
  }

  .sg-back,
  .sg-picture {
    transition: none;
  }

  .sg-tabs [aria-selected="true"] .sg-bar span {
    animation: none;
    width: 100%;
  }
}

/* --- narrower --- */

@media (max-width: 1180px) {
  .peek-left {
    left: -40px;
  }

  .peek-right {
    right: -36px;
  }
}

@media (max-width: 980px) {
  .split,
  .split.flip,
  .step,
  .step.flip {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 4vw, 32px);
  }

  .split.flip .words,
  .step.flip .words {
    order: 0;
  }

  .pairs {
    grid-template-columns: minmax(0, 1fr);
  }

  .plan-cards,
  .plan-cards.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .peek {
    width: 118px;
    height: 136px;
    padding: 12px;
  }

  .peek-left {
    left: -18px;
  }

  .peek-right {
    right: -14px;
  }
}

@media (max-width: 760px) {
  .links {
    display: none;
  }

  .top {
    top: 10px;
    gap: 12px;
    padding-left: 14px;
  }

  .actions {
    margin-left: auto;
  }

  .hero {
    margin-top: clamp(40px, 9vw, 64px);
  }

  .peek {
    display: none;
  }

  .frames-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .frames-grid .big {
    grid-row: auto;
  }

  .bottom {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .plan-cards,
  .plan-cards.four {
    grid-template-columns: minmax(0, 1fr);
  }

  .frame {
    padding: 4px;
    border-radius: 14px;
  }

  .frame img {
    border-radius: 10px;
  }

  .stage {
    padding: 38px 8px 10px;
    border-radius: 14px;
  }

  .stage-label {
    top: 11px;
    left: 11px;
    font-size: 0.74rem;
  }

  .amounts a {
    grid-template-columns: 3.2rem minmax(0, 1fr) auto;
  }

  .amount-art {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  figcaption {
    padding-left: 12px;
  }

  .get .button {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .brand span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .strip {
    animation: none;
  }

  .strip {
    background-position: 0 0;
  }

  .hero-shot .frame,
  .peek {
    animation: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

/* The page's last word: start designing here, or get the app. */
.finale-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.button.glass {
  border-color: rgba(255, 233, 184, 0.28);
  background: var(--pane);
  box-shadow: inset 0 1px 0 rgba(255, 246, 222, 0.08);
  color: var(--pollen);
}

.button.glass:hover {
  color: var(--honey-light);
}

.finale-actions .arrow {
  width: 15px;
  height: 11px;
}