/* poll.ad: dot voting on a cork board. Light mode is cork on a pale wall by day; dark mode is the
   same board after hours, a felt board under a desk lamp. Notes keep their colours and dark ink in
   both themes. Motion lives under .motion (set by theme.js unless the visitor asks for less). */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-variable-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "Caveat";
  src: url("fonts/caveat-variable-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}

:root {
  --ui: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;

  --wall: #f4f2ec;
  --ink: #1b1a17;
  --ink-soft: #3b3830;
  --muted: #5b564c;
  --line: rgb(27 26 23 / 0.13);
  --focus: #2f6fe2;

  --cork: #c9a06a;
  --board-tex: url("cork.svg");
  --board-tex-size: 320px;
  --lamp: linear-gradient(transparent, transparent);
  --frame: #8a5f36;
  --frame-hi: #a5774a;
  --frame-lo: #6a4524;
  --divider: rgb(64 38 12 / 0.3);
  --tape: rgb(250 245 229 / 0.9);

  --yellow: #ffd84d;
  --pink: #ff8fb1;
  --blue: #8fd3ff;
  --green: #a6e07a;
  --note-ink: #1b1a17;
  --red: #e2352f;
  --dot-blue: #2f6fe2;
  --stamp: #0f7a4a;

  --shadow-tint: 52 32 8;
  --glow: 0;
  --seg-bg: rgb(27 26 23 / 0.05);
  --seg-on: #1b1a17;
  --seg-on-ink: #f4f2ec;
  --card: #fffdf6;
  --edge: #1b1a17;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wall: #15161c;
    --ink: #f1efe8;
    --ink-soft: #d8d4ca;
    --muted: #b3aea3;
    --line: rgb(241 239 232 / 0.13);
    --focus: #8fd3ff;
    --cork: #2a2b33;
    --board-tex: url("felt.svg");
    --board-tex-size: 240px;
    --lamp: radial-gradient(120% 85% at 22% -8%, rgb(255 214 150 / 0.2), rgb(255 214 150 / 0.06) 45%, transparent 75%);
    --frame: #3a2a1e;
    --frame-hi: #4d3827;
    --frame-lo: #22180f;
    --divider: rgb(241 239 232 / 0.16);
    --tape: rgb(244 236 214 / 0.88);
    --shadow-tint: 0 0 0;
    --glow: 1;
    --seg-bg: rgb(241 239 232 / 0.06);
    --seg-on: #ffd84d;
    --seg-on-ink: #1b1a17;
    --card: #fbf6e6;
    --edge: #000;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --wall: #15161c;
  --ink: #f1efe8;
  --ink-soft: #d8d4ca;
  --muted: #b3aea3;
  --line: rgb(241 239 232 / 0.13);
  --focus: #8fd3ff;
  --cork: #2a2b33;
  --board-tex: url("felt.svg");
  --board-tex-size: 240px;
  --lamp: radial-gradient(120% 85% at 22% -8%, rgb(255 214 150 / 0.2), rgb(255 214 150 / 0.06) 45%, transparent 75%);
  --frame: #3a2a1e;
  --frame-hi: #4d3827;
  --frame-lo: #22180f;
  --divider: rgb(241 239 232 / 0.16);
  --tape: rgb(244 236 214 / 0.88);
  --shadow-tint: 0 0 0;
  --glow: 1;
  --seg-bg: rgb(241 239 232 / 0.06);
  --seg-on: #ffd84d;
  --seg-on-ink: #1b1a17;
  --card: #fbf6e6;
  --edge: #000;
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--wall);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a {
  color: inherit;
}

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

.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: min(100% - 32px, 1180px);
  margin-inline: auto;
}

/* ---------- top bar ---------- */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 14px 10px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.mark {
  width: 30px;
  height: 30px;
  flex: none;
  filter: drop-shadow(0 1.5px 1.5px rgb(var(--shadow-tint) / 0.3));
}

.mark-note {
  fill: var(--yellow);
}

.mark-glue {
  fill: rgb(0 0 0 / 0.07);
}

.mark-dot {
  fill: var(--red);
}

.mark-shine {
  fill: rgb(255 255 255 / 0.6);
}

.theme {
  display: flex;
  margin: 0;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  background: var(--seg-bg);
  box-shadow: inset 0 0 0 1px var(--line);
}

.theme label {
  display: block;
  cursor: pointer;
}

.theme label span {
  display: block;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  color: var(--muted);
}

.theme label:hover span {
  color: var(--ink);
}

.theme input:checked + span {
  background: var(--seg-on);
  color: var(--seg-on-ink);
}

.theme input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

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

.hero {
  display: grid;
  gap: 22px;
  padding-top: 8px;
}

.hero-words {
  display: grid;
  gap: 16px;
  justify-items: start;
}

h1 {
  margin: 0;
  font-size: clamp(38px, 10.4vw, 52px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hl {
  position: relative;
  z-index: 0;
  display: inline-block;
  color: var(--note-ink);
  padding-inline: 0.06em;
}

.hl::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0.16em -0.1em 0.02em -0.08em;
  background: var(--yellow);
  border-radius: 0.42em 0.16em 0.4em 0.12em / 0.28em 0.5em 0.22em 0.46em;
  transform: rotate(-2deg) skewX(-8deg);
  transform-origin: left center;
  box-shadow: 0 0 calc(var(--glow) * 18px) rgb(255 216 77 / calc(var(--glow) * 0.35));
}

.motion .hl::before {
  animation: swipe 0.65s 0.3s cubic-bezier(0.65, 0, 0.25, 1) both;
}

@keyframes swipe {
  from {
    transform: rotate(-2deg) skewX(-8deg) scaleX(0);
  }
}

.lede {
  margin: 0;
  max-width: 34ch;
  font-size: 17px;
  font-weight: 450;
  line-height: 1.45;
  color: var(--ink-soft);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  border: 0;
  font: inherit;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn--cta {
  flex-wrap: wrap;
  padding: 13px 18px;
  border-radius: 14px;
  background: var(--yellow);
  color: var(--note-ink);
  font-size: 16px;
  box-shadow:
    0 0 0 2px var(--edge),
    4px 5px 0 var(--edge),
    0 0 calc(var(--glow) * 28px) rgb(255 216 77 / calc(var(--glow) * 0.28));
}

.btn-email {
  font-weight: 800;
  text-decoration: underline 2px;
  text-underline-offset: 3px;
}

.motion .btn {
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.btn--cta:hover {
  transform: translate(-1px, -1px);
  box-shadow:
    0 0 0 2px var(--edge),
    6px 7px 0 var(--edge),
    0 0 calc(var(--glow) * 28px) rgb(255 216 77 / calc(var(--glow) * 0.35));
}

.btn--cta:active {
  transform: translate(3px, 4px);
  box-shadow:
    0 0 0 2px var(--edge),
    1px 1px 0 var(--edge);
}

/* ---------- the board ---------- */

.hero-board {
  min-width: 0;
}

.board-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 9px 2px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.board-label::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: inset -1px -1.5px 1px rgb(0 0 0 / 0.2);
}

.frame {
  --fw: 8px;
  position: relative;
  padding: var(--fw);
  border-radius: 12px;
  background:
    repeating-linear-gradient(97deg, rgb(0 0 0 / 0.06) 0 1.5px, transparent 1.5px 7px, rgb(255 255 255 / 0.05) 7px 8px, transparent 8px 13px),
    linear-gradient(150deg, var(--frame-hi), var(--frame) 45%, var(--frame-lo));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.28),
    inset 0 -1.5px 0 rgb(0 0 0 / 0.3),
    0 22px 40px -22px rgb(var(--shadow-tint) / 0.7),
    0 6px 12px -6px rgb(var(--shadow-tint) / 0.45);
}

.board {
  --g: 8px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 14px;
  padding: 10px 10px 14px;
  border-radius: 5px;
  background-color: var(--cork);
  background-image: var(--lamp), var(--board-tex);
  background-size: auto, var(--board-tex-size);
  box-shadow:
    inset 0 2px 7px rgb(0 0 0 / 0.38),
    inset 0 0 0 1px rgb(0 0 0 / 0.28);
}

.col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.col--ideas {
  grid-column: span 2;
}

.col--shipped {
  position: relative;
}

.col--shipped::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 0;
  left: -8px;
  border-left: 2px dashed var(--divider);
}

.tape {
  align-self: flex-start;
  margin: 0 0 10px -2px;
  padding: 6px 12px 5px;
  background: var(--tape);
  color: var(--note-ink);
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  rotate: -1.6deg;
  clip-path: polygon(0 10%, 3% 0, 50% 6%, 97% 0, 100% 12%, 98% 50%, 100% 90%, 96% 100%, 50% 94%, 4% 100%, 0 88%, 2% 50%);
}

.col--shipped .tape {
  rotate: 1.8deg;
}

.notes {
  margin: 0;
  padding: 0;
  list-style: none;
}

#ideas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--g);
}

#shipped {
  display: flex;
  flex-direction: column;
  gap: var(--g);
}

#shipped .slot + .slot {
  margin-top: var(--pile, 0px);
}

.slot {
  position: relative;
  aspect-ratio: 1;
  container-type: inline-size;
}

/* The shadow under the curled corner: a box tucked behind the note's bottom right. */
.slot::before {
  content: "";
  position: absolute;
  right: 7%;
  bottom: 7%;
  width: 48%;
  height: 26%;
  box-shadow: 3cqi 7cqi 7cqi rgb(var(--shadow-tint) / 0.5);
  transform: rotate(calc(var(--tilt, 0deg) + 6deg)) skewX(14deg);
  transform-origin: right bottom;
}

.slot[data-id="dark"] { --tilt: -2.2deg; }
.slot[data-id="streak"] { --tilt: 1.8deg; }
.slot[data-id="watch"] { --tilt: 1.1deg; }
.slot[data-id="reorder"] { --tilt: -1.4deg; }
.slot[data-id="weekly"] { --tilt: 2.4deg; }

.note {
  --c: var(--yellow);
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 8cqi 8cqi 0 9cqi;
  border: 0;
  border-radius: 1.4cqi 1.4cqi 9cqi 1.4cqi / 1.4cqi 1.4cqi 4cqi 1.4cqi;
  color: var(--note-ink);
  font-family: var(--hand);
  font-size: 16.5cqi;
  font-weight: 650;
  line-height: 0.96;
  text-align: left;
  background:
    linear-gradient(to bottom, rgb(0 0 0 / 0.075), rgb(0 0 0 / 0.02) 15%, transparent 19%),
    linear-gradient(315deg, rgb(255 255 255 / 0.32) 0, rgb(255 255 255 / 0) 9%, rgb(0 0 0 / 0.07) 10%, transparent 24%),
    url("paper.svg") 0 0 / 240px,
    var(--c);
  rotate: var(--tilt, 0deg);
  box-shadow:
    0 0.6cqi 0.8cqi rgb(var(--shadow-tint) / 0.28),
    0 3cqi 5cqi -3cqi rgb(var(--shadow-tint) / 0.4),
    0 0 calc(var(--glow) * 11cqi) calc(var(--glow) * -1cqi) color-mix(in srgb, var(--c) 42%, transparent);
  -webkit-tap-highlight-color: transparent;
}

button.note {
  cursor: pointer;
}

.motion .note {
  transition:
    transform 0.22s cubic-bezier(0.3, 0.7, 0.4, 1.3),
    box-shadow 0.22s ease;
}

.motion .slot::before {
  transition: box-shadow 0.22s ease;
}

button.note:not([aria-disabled="true"]):hover {
  transform: translateY(-2cqi) scale(1.025);
  box-shadow:
    0 0.6cqi 0.8cqi rgb(var(--shadow-tint) / 0.2),
    0 7cqi 9cqi -4cqi rgb(var(--shadow-tint) / 0.45),
    0 0 calc(var(--glow) * 14cqi) calc(var(--glow) * -1cqi) color-mix(in srgb, var(--c) 55%, transparent);
}

.slot:has(button.note:not([aria-disabled="true"]):hover)::before {
  box-shadow: 5cqi 11cqi 10cqi rgb(var(--shadow-tint) / 0.42);
}

button.note:not([aria-disabled="true"]):active {
  transform: translateY(0.5cqi) scale(0.99);
}

.note:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2cqi;
  border-radius: 2cqi;
}

.note--yellow { --c: var(--yellow); }
.note--pink { --c: var(--pink); }
.note--blue { --c: var(--blue); }
.note--green { --c: var(--green); }

.note-text {
  position: relative;
  z-index: 2;
  display: block;
}

.count {
  position: absolute;
  z-index: 3;
  right: 7cqi;
  bottom: 5cqi;
  font-size: 21cqi;
  font-weight: 700;
  line-height: 1;
}

.is-shipped .count {
  display: none;
}

.dots {
  position: absolute;
  z-index: 1;
  left: 6cqi;
  bottom: 6cqi;
  width: 64cqi;
  height: 34cqi;
}

.dot {
  --dc: var(--red);
  position: absolute;
  left: calc(var(--x) * 1cqi);
  bottom: calc(var(--y) * 1cqi);
  width: 12.5cqi;
  height: 12.5cqi;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0) 30%),
    radial-gradient(circle at 50% 46%, var(--dc) 58%, color-mix(in srgb, var(--dc), #000 22%) 100%);
  box-shadow:
    0 0.5cqi 0.9cqi rgb(var(--shadow-tint) / 0.45),
    inset 0 -0.4cqi 0.5cqi rgb(0 0 0 / 0.15);
}

.dot--blue {
  --dc: var(--dot-blue);
}

.dot[hidden] {
  display: none;
}

.stamp {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 66%;
  display: inline-flex;
  align-items: center;
  gap: 2.2cqi;
  padding: 3cqi 5cqi 2.8cqi 4cqi;
  border-radius: 3cqi;
  background: var(--stamp);
  color: #fff;
  font-family: var(--ui);
  font-size: 11.5cqi;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  width: max-content;
  translate: -50% -50%;
  rotate: -12deg;
  box-shadow:
    inset 0 0 0 1.1cqi var(--stamp),
    inset 0 0 0 1.7cqi rgb(255 255 255 / 0.8);
  -webkit-mask: url("grunge.svg") 0 0 / 100% 100%;
  mask: url("grunge.svg") 0 0 / 100% 100%;
}

.stamp svg {
  width: 10cqi;
  height: 10cqi;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Before app.js arranges the board (and runs its opening), the notes wait out of sight; if the
   script never runs, they appear on their own after a moment. */
.motion #board:not(.is-live) .slot {
  animation: wait-for-script 0s 2.5s backwards;
}

@keyframes wait-for-script {
  from,
  to {
    opacity: 0;
  }
}

.slot.is-lifting {
  z-index: 5;
}

/* ---------- the play ---------- */

.play {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-inline: 2px;
}

.play h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.btn--vote {
  padding: 11px 22px 11px 13px;
  border-radius: 999px;
  /* A shade deeper than the dot red, which carries white text at only 4.4:1. */
  background: #cf2a24;
  color: #fff;
  font-size: 17px;
  box-shadow:
    0 0 0 2px var(--edge),
    3px 4px 0 var(--edge);
}

.btn--vote:hover {
  transform: translate(-1px, -1px);
  box-shadow:
    0 0 0 2px var(--edge),
    5px 6px 0 var(--edge);
}

.btn--vote:active {
  transform: translate(2px, 3px);
  box-shadow:
    0 0 0 2px var(--edge),
    1px 1px 0 var(--edge);
}

.btn--vote:disabled {
  cursor: default;
  opacity: 0.55;
  transform: none;
}

.vote-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 32%, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0) 34%),
    radial-gradient(circle, #c22520 0 52%, #fff 54%);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}

.after {
  display: grid;
  grid-template-rows: 0fr;
}

.after.is-open {
  grid-template-rows: 1fr;
}

.motion .after {
  transition: grid-template-rows 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.after-inner {
  min-height: 0;
  overflow: hidden;
  padding-inline: 6px;
  margin-inline: -6px;
}

.ship-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 4px;
  padding: 12px 16px 12px 12px;
  border-radius: 14px;
  background: var(--card);
  color: var(--note-ink);
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.07),
    0 10px 22px -12px rgb(var(--shadow-tint) / 0.55);
}

.ship-card[hidden],
.play-note[hidden] {
  display: none;
}

.ship-card p {
  margin: 0;
  font-weight: 700;
  line-height: 1.3;
}

.bell {
  flex: none;
  width: 38px;
  height: 38px;
  padding: 8px;
  border-radius: 50%;
  background: var(--stamp);
  fill: none;
  stroke: #fff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.play-note {
  margin: 12px 2px 18px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
}

/* ---------- steps ---------- */

.steps {
  padding-block: 64px 12px;
}

.steps h2,
.nf h1 {
  margin: 0 0 26px;
  font-size: clamp(28px, 7.4vw, 44px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.step-list {
  display: grid;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  column-gap: 18px;
  align-content: start;
}

.step-note {
  grid-row: span 2;
  width: 78px;
  aspect-ratio: 1;
  border-radius: 2px 2px 8px 2px / 2px 2px 4px 2px;
  background:
    linear-gradient(to bottom, rgb(0 0 0 / 0.075), rgb(0 0 0 / 0.02) 15%, transparent 19%),
    linear-gradient(315deg, rgb(255 255 255 / 0.3) 0, rgb(255 255 255 / 0) 9%, rgb(0 0 0 / 0.07) 10%, transparent 24%),
    url("paper.svg") 0 0 / 240px,
    var(--c);
  box-shadow:
    0 1px 1px rgb(var(--shadow-tint) / 0.25),
    0 6px 10px -5px rgb(var(--shadow-tint) / 0.45),
    0 0 calc(var(--glow) * 16px) calc(var(--glow) * -2px) color-mix(in srgb, var(--c) 40%, transparent);
  rotate: var(--tilt, 0deg);
}

.step:nth-child(1) .step-note { --tilt: -3deg; }
.step:nth-child(2) .step-note { --tilt: 2.5deg; }
.step:nth-child(3) .step-note { --tilt: -1.5deg; }

.step-note svg {
  display: block;
  width: 100%;
  height: 100%;
}

.scrawl {
  fill: none;
  stroke: var(--note-ink);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.78;
}

.plus {
  fill: none;
  stroke: var(--red);
  stroke-width: 4.2;
  stroke-linecap: round;
}

.dot-r { fill: var(--red); }
.dot-b { fill: var(--dot-blue); }
.shine { fill: rgb(255 255 255 / 0.6); }

.mini-stamp {
  rotate: -9deg;
  transform-origin: 34px 45px;
}

.mini-stamp rect {
  fill: var(--stamp);
}

.mini-stamp path {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.motion .step:not(.is-in) .step-note {
  opacity: 0;
}

.motion .step.is-in .step-note {
  animation: drop 0.75s cubic-bezier(0.25, 0.9, 0.35, 1) both;
}

@keyframes drop {
  0% {
    opacity: 0;
    translate: 0 -64px;
    scale: 1.18;
    rotate: calc(var(--tilt) - 16deg);
  }
  55% {
    opacity: 1;
    translate: 0 3px;
    scale: 0.96;
    rotate: calc(var(--tilt) + 2deg);
  }
  78% {
    translate: 0 -1px;
    scale: 1.01;
  }
  100% {
    translate: 0 0;
    scale: 1;
    rotate: var(--tilt);
  }
}

.step h3 {
  margin: 6px 0 4px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.step p {
  margin: 0;
  text-wrap: pretty;
  color: var(--ink-soft);
}

/* ---------- for app makers ---------- */

.makers {
  padding-block: 56px 64px;
}

.makers-line {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  --lh: 34px;
  --pt: 30px;
  padding: var(--pt) 24px 24px 30px;
  background:
    linear-gradient(90deg, transparent 18px, rgb(226 53 47 / 0.45) 18px 19.5px, transparent 19.5px),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--lh) - 1px), rgb(47 111 226 / 0.22) calc(var(--lh) - 1px) var(--lh)),
    url("paper.svg") 0 0 / 240px,
    var(--card);
  background-position: 0 0, 0 calc(var(--pt) - 4px), 0 0, 0 0;
  background-repeat: no-repeat, repeat-y, repeat, no-repeat;
  color: var(--note-ink);
  font-size: 22px;
  font-weight: 600;
  line-height: var(--lh);
  letter-spacing: -0.01em;
  rotate: -1deg;
  box-shadow:
    0 1px 1px rgb(var(--shadow-tint) / 0.2),
    0 14px 26px -16px rgb(var(--shadow-tint) / 0.55),
    0 0 calc(var(--glow) * 30px) calc(var(--glow) * -6px) rgb(251 246 230 / 0.25);
}

.makers-line::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 104px;
  height: 24px;
  translate: -50% 0;
  rotate: 3deg;
  background: var(--tape);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
  clip-path: polygon(0 10%, 3% 0, 50% 6%, 97% 0, 100% 12%, 98% 50%, 100% 90%, 96% 100%, 50% 94%, 4% 100%, 0 88%, 2% 50%);
}

.makers-line {
  text-wrap: balance;
}

.makers-line strong {
  font-weight: 800;
}

.squiggle {
  white-space: nowrap;
  padding-bottom: 5px;
  background: url("squiggle.svg") repeat-x 0 100% / 56px 8px;
}

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

.foot {
  padding-block: 26px 40px;
  border-top: 1px solid var(--line);
}

.foot-line {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

.foot-line a {
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* ---------- 404 ---------- */

.nf {
  display: grid;
  justify-items: center;
  gap: 26px;
  padding-block: 36px 72px;
  text-align: center;
}

.frame--nf {
  width: min(100%, 400px);
}

.board--nf {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding: 40px 0 44px;
}

.slot--nf {
  width: 62%;
  --tilt: -3deg;
}

.slot--nf .note {
  cursor: default;
}

.nf .note h1 {
  margin: 0;
  font: inherit;
  letter-spacing: 0;
}

.slot--nf .note {
  font-size: 19cqi;
  padding: 12cqi 10cqi 0 11cqi;
}

.motion .slot--nf {
  animation: stick 0.7s 0.15s cubic-bezier(0.25, 0.9, 0.35, 1.25) both;
}

@keyframes stick {
  from {
    opacity: 0;
    translate: 0 -28px;
    scale: 1.12;
  }
}

/* ---------- wider screens ---------- */

@media (min-width: 560px) {
  .board {
    --g: 12px;
    column-gap: 22px;
    padding: 14px 16px 18px;
  }

  .frame {
    --fw: 12px;
    border-radius: 14px;
  }

  .col--shipped::before {
    left: -12px;
  }

  .tape {
    font-size: 12px;
    padding: 7px 14px 6px;
    margin-bottom: 14px;
  }

  .step-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }

  .step {
    grid-template-columns: 1fr;
  }

  .step-note {
    grid-row: auto;
    width: 92px;
    margin-bottom: 16px;
  }
}

@media (min-width: 960px) {
  .bar {
    padding-block: 22px 10px;
  }

  .hero {
    grid-template-columns: minmax(0, 5.2fr) minmax(0, 6.8fr);
    align-items: center;
    gap: 60px;
    padding-top: 26px;
  }

  .hero-words {
    gap: 24px;
    padding-bottom: 40px;
  }

  h1 {
    font-size: clamp(56px, 5.2vw, 76px);
    line-height: 0.98;
  }

  .lede {
    font-size: 20px;
  }

  .btn--cta {
    font-size: 17px;
    padding: 15px 22px;
  }

  .play h2 {
    font-size: 30px;
  }

  .steps {
    padding-top: 96px;
  }

  .step h3 {
    font-size: 26px;
  }

  .step p {
    font-size: 18px;
  }

  .makers {
    padding-block: 80px 96px;
  }

  .makers-line {
    max-width: 640px;
    --lh: 38px;
    --pt: 34px;
    font-size: 26px;
    padding: var(--pt) 34px 28px 40px;
  }
}