/* The AI Bestie site. Built from the brand guide (artifact 6vbdDAusJWZ5RaGmhRyKHW#brand).
   One committed light look on eggshell. Green is every yes, pink plays, chartreuse points at one thing.
   Motion is stop-motion: loops jump in 4 to 6 frames. */
:root {
  color-scheme: light;
  --egg: #f3eee4; /* the room */
  --egg2: #ebe4d6; /* alternate band */
  --card: #fbf8f2; /* cards, stickers, bubbles */
  --ink: #1d1a17; /* words, Edit Bestie's stage */
  --stone: #6f665c; /* small print */
  --line: #d9d0c1;
  --green: #0bb14b; /* every yes: buttons, the circle */
  --forest: #077833; /* green words and links on eggshell */
  --pink: #f7c3ec; /* personality, free stuff */
  --pinkdeep: #d77fbf; /* big script only */
  --berry: #af378e; /* pink words on eggshell */
  --acc: #d9f24b; /* the one thing to notice */
  --inkmute: #b9b0a3; /* small print on ink */
  --bold: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --script: "Great Vibes", "Snell Roundhand", cursive;
  --stop: steps(4, end);
  --gut: max(20px, env(safe-area-inset-left, 0px));
  --gutr: max(20px, env(safe-area-inset-right, 0px));
}

/* base */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
body {
  margin: 0;
  background: var(--egg);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
}
p {
  margin: 0;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--bold);
  font-weight: 800;
  text-wrap: balance;
}
h1 {
  font-size: clamp(44px, 7.2vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.045em;
}
h2 {
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1;
  letter-spacing: -0.04em;
}
h3 {
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.s {
  font: 400 1.32em/0.6 var(--script);
  color: var(--pinkdeep);
  letter-spacing: 0;
  padding: 0 0.04em;
}
.ink .s,
.on-ink .s {
  color: var(--pink);
}
.on-green .s {
  color: var(--ink);
}
.acc {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  background: var(--acc);
  color: var(--ink);
  padding: 0 0.18em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.eyebrow {
  font: 600 12px/1.2 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}
.ink .eyebrow {
  color: var(--inkmute);
}
.lede {
  font-size: clamp(17px, 1.6vw, 19px);
  color: #3c352f;
  max-width: 58ch;
}
.ink .lede {
  color: var(--inkmute);
}
.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-left: var(--gut);
  padding-right: var(--gutr);
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: var(--card);
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
}
.skip:focus {
  top: 12px;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
}
:focus-visible {
  outline: 3px solid var(--berry);
  outline-offset: 3px;
  border-radius: 6px;
}
.textlink {
  color: var(--forest);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.ink .textlink {
  color: var(--acc);
}
.on-green .textlink {
  color: var(--ink);
}

/* motion vocabulary */
@keyframes nod {
  0%,
  100% {
    transform: rotate(-5deg) translateY(0);
  }
  50% {
    transform: rotate(4deg) translateY(-3%);
  }
}
@keyframes wob {
  0%,
  100% {
    transform: rotate(var(--r, 0deg)) translateY(0);
  }
  50% {
    transform: rotate(calc(var(--r, 0deg) + 3deg)) translateY(-4px);
  }
}
@keyframes bob {
  0%,
  100% {
    transform: translate(0, 0) rotate(var(--r, 0deg));
  }
  33% {
    transform: translate(3px, -8px) rotate(calc(var(--r, 0deg) + 2deg));
  }
  66% {
    transform: translate(-2px, -3px) rotate(calc(var(--r, 0deg) - 1.5deg));
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes scroll {
  to {
    transform: translateX(-50%);
  }
}
@keyframes tap {
  0%,
  20% {
    transform: translate(26px, 22px);
    opacity: 0;
  }
  34% {
    transform: translate(0, 0);
    opacity: 1;
  }
  44% {
    transform: translate(0, 0) scale(0.82);
  }
  52%,
  78% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(26px, 22px);
    opacity: 0;
  }
}
@keyframes press {
  0%,
  42%,
  54%,
  100% {
    transform: none;
    box-shadow: 0 5px 0 var(--ink);
  }
  46% {
    transform: translateY(3px);
    box-shadow: 0 2px 0 var(--ink);
  }
}
@keyframes ring {
  0%,
  43% {
    opacity: 0;
    transform: scale(0.4);
  }
  47% {
    opacity: 0.9;
  }
  66%,
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}
.m-nod {
  animation: nod 1.8s var(--stop) infinite;
  transform-origin: 50% 90%;
}
.m-wob {
  animation: wob 2.6s var(--stop) infinite;
}
.m-bob {
  animation: bob 3s steps(6, end) infinite;
}
.m-spin {
  animation: spin 9s steps(12, end) infinite;
}

/* buttons, stickers, bubbles, sparkles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  font: 700 16px/1.1 var(--bold);
  letter-spacing: -0.01em;
  text-decoration: none;
  text-align: center;
  color: var(--ink);
  background: var(--green);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 13px 24px;
  box-shadow: 0 5px 0 var(--ink);
  cursor: pointer;
  transition:
    transform 0.24s steps(3, end),
    box-shadow 0.24s steps(3, end);
  white-space: nowrap;
}
.btn:hover {
  transform: translate(-1px, -2px) rotate(-1deg);
  box-shadow: 0 7px 0 var(--ink);
}
.btn:active {
  transform: translate(1px, 3px);
  box-shadow: 0 2px 0 var(--ink);
}
.btn.ghost {
  background: var(--card);
}
.btn.dark {
  background: var(--ink);
  color: var(--card);
  box-shadow: 0 5px 0 rgba(29, 26, 23, 0.4);
}
.btn.dark:hover {
  box-shadow: 0 7px 0 rgba(29, 26, 23, 0.4);
}
.btn.sm {
  min-height: 40px;
  font-size: 14.5px;
  padding: 9px 16px;
  box-shadow: 0 4px 0 var(--ink);
}
.btn.lg {
  min-height: 58px;
  font-size: 18px;
  padding: 16px 30px;
}
.ink .btn {
  box-shadow: 0 5px 0 #000;
}
.ink .btn.ghost {
  background: transparent;
  color: var(--card);
  border-color: var(--card);
  box-shadow: none;
}
.stk {
  display: inline-block;
  font: 800 14px/1 var(--bold);
  letter-spacing: -0.005em;
  padding: 8px 13px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
  background: var(--card);
  color: var(--ink);
  transform: rotate(var(--r, 0deg));
  white-space: nowrap;
  text-decoration: none;
}
.stk.g {
  background: var(--green);
}
.stk.a {
  background: var(--acc);
}
.stk.p {
  background: var(--pink);
}
.stk.k {
  background: var(--ink);
  color: var(--card);
}
.stk.line {
  background: transparent;
  box-shadow: none;
}
.ink .stk.line {
  color: var(--card);
  border-color: var(--card);
}
.bubble {
  position: relative;
  display: inline-block;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 0.5em 0.85em 0.55em;
  font: italic 400 20px/1 var(--serif);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  white-space: nowrap;
  transform: rotate(var(--r, -4deg));
}
.bubble::after {
  content: "";
  position: absolute;
  left: -9px;
  bottom: 12px;
  width: 14px;
  height: 14px;
  background: var(--card);
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
}
.sp {
  fill: var(--acc);
  stroke: var(--ink);
  stroke-width: 1.1;
  stroke-linejoin: round;
  overflow: visible;
}
.sp.pk {
  fill: var(--pink);
}
.head {
  filter: drop-shadow(0 12px 14px rgba(29, 26, 23, 0.22));
}

/* wordmark + avatar */
.wm {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--ink);
  line-height: 1;
}
.wm .w {
  font: 800 1em/0.86 var(--bold);
  letter-spacing: -0.05em;
  white-space: nowrap;
}
.wm .s {
  font: 400 1.12em/0.9 var(--script);
  color: var(--pinkdeep);
  letter-spacing: 0;
  margin: -0.2em 0 0 0.5em;
  padding: 0;
  white-space: nowrap;
}
.av {
  --s: 40px;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--green);
  position: relative;
  overflow: hidden;
  flex: none;
  display: block;
}
.av img {
  position: absolute;
  left: 50%;
  top: 8%;
  height: 88%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
}

/* nav */
.nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  padding: 12px var(--gutr) 0 var(--gut);
  pointer-events: none;
}
.navpill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 920px;
  margin-inline: auto;
  background: rgba(251, 248, 242, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 5px 0 rgba(29, 26, 23, 0.14);
}
.navpill .brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  padding-right: 10px;
  margin-right: auto;
}
.navpill .brand .wm {
  font-size: 17px;
}
.navpill .links {
  display: flex;
  gap: 2px;
}
.navpill .links a {
  font: 600 15px/1 var(--sans);
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 999px;
}
.navpill .links a:hover,
.navpill .links a[aria-current] {
  background: var(--pink);
}
.navpill .navcta[aria-current] {
  background: var(--acc);
}
.navpill .menu {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--card);
  cursor: pointer;
  place-items: center;
  padding: 0;
}
.navpill .menu .bars,
.navpill .menu .bars::before,
.navpill .menu .bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  position: relative;
  transition: transform 0.2s steps(2, end);
}
.navpill .menu .bars::before,
.navpill .menu .bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.navpill .menu .bars::before {
  top: -6px;
}
.navpill .menu .bars::after {
  top: 6px;
}
.navpill .menu[aria-expanded="true"] .bars {
  background: transparent;
}
.navpill .menu[aria-expanded="true"] .bars::before {
  transform: translateY(6px) rotate(45deg);
}
.navpill .menu[aria-expanded="true"] .bars::after {
  transform: translateY(-6px) rotate(-45deg);
}
.sheet {
  pointer-events: auto;
  max-width: 920px;
  margin: 10px auto 0;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 26px;
  padding: 10px;
  box-shadow: 0 6px 0 rgba(29, 26, 23, 0.16);
  display: grid;
  gap: 4px;
}
.sheet a {
  display: block;
  text-decoration: none;
  font: 800 22px/1.1 var(--bold);
  letter-spacing: -0.02em;
  padding: 14px 16px;
  border-radius: 18px;
}
.sheet a span {
  display: block;
  font: 500 14px/1.3 var(--sans);
  color: var(--stone);
  letter-spacing: 0;
  margin-top: 3px;
}
.sheet a:hover {
  background: var(--pink);
}
@media (max-width: 760px) {
  .navpill .links {
    display: none;
  }
  .navpill .menu {
    display: grid;
  }
}
@media (max-width: 380px) {
  .navpill .brand .wm {
    display: none;
  }
}

/* section scaffolding */
.sec {
  padding-block: clamp(64px, 9vw, 112px);
  position: relative;
}
.sec.tight {
  padding-top: clamp(36px, 5vw, 56px);
}
.band {
  background: var(--egg2);
}
.ink {
  background: var(--ink);
  color: var(--card);
}
.sechead {
  display: grid;
  gap: 14px;
  max-width: 760px;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.sechead.center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}
.sechead .lede {
  margin-top: 2px;
}

/* hero */
.hero {
  padding-block: clamp(28px, 5vw, 56px) clamp(20px, 3vw, 36px);
}
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 32px 48px;
  align-items: center;
}
.hero-copy {
  display: grid;
  gap: 22px;
  justify-items: start;
}
.hero .hello {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 13px/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 9px 14px 9px 10px;
  box-shadow: 0 4px 0 var(--ink);
}
.hero .hello i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(11, 177, 75, 0.25);
}
.hero h1 .s {
  font-size: 1.28em;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  position: relative;
}
.hero-note {
  font-size: 15px;
  color: var(--stone);
}
.hero-note a {
  color: var(--forest);
  font-weight: 600;
}
.tapme {
  position: relative;
}
.tapme .cursor {
  position: absolute;
  right: 10px;
  bottom: -22px;
  width: 30px;
  height: 30px;
  pointer-events: none;
  animation: tap 3.2s infinite;
  filter: drop-shadow(1px 2px 0 rgba(29, 26, 23, 0.25));
}
.tapme .ringfx {
  position: absolute;
  right: 21px;
  bottom: -9px;
  width: 26px;
  height: 26px;
  border: 2px solid var(--berry);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: ring 3.2s infinite;
}
.tapme .btn {
  animation: press 3.2s infinite;
}
.tapme:hover .cursor,
.tapme:hover .ringfx,
.tapme:hover .btn {
  animation: none;
}
.tapme:hover .cursor,
.tapme:hover .ringfx {
  opacity: 0;
}
.scene {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 1;
  justify-self: center;
  container-type: inline-size;
}
.scene .circle {
  position: absolute;
  left: 12%;
  top: 20%;
  width: 76%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--green);
  box-shadow: inset 0 -16px 0 rgba(29, 26, 23, 0.08);
}
.scene img {
  position: absolute;
  max-width: none;
  height: auto;
}
.scene .big {
  left: 24%;
  top: 3%;
  width: 52%;
}
.scene .f1 {
  width: 17%;
  left: 1%;
  top: 9%;
  --r: -10deg;
}
.scene .f2 {
  width: 15%;
  right: 1%;
  bottom: 3%;
  --r: 9deg;
  animation-delay: 0.8s;
}
.scene .stk {
  position: absolute;
  font-size: max(12px, 3.1cqw);
  padding: 0.62em 1em;
}
.scene .s1 {
  left: -1%;
  top: 55%;
  --r: -8deg;
  animation-delay: 0.3s;
}
.scene .s2 {
  right: -1%;
  top: 66%;
  --r: 6deg;
}
.scene .s3 {
  left: 33%;
  bottom: 1%;
  --r: -3deg;
}
.scene .bubble {
  position: absolute;
  right: 0;
  top: 1%;
  font-size: max(13px, 3.2cqw);
}
.scene .sp {
  position: absolute;
}
.scene .k1 {
  left: 22%;
  top: 3%;
  width: 6%;
}
.scene .k2 {
  right: 8%;
  top: 38%;
  width: 5%;
}
.scene .k3 {
  left: 5%;
  bottom: 17%;
  width: 4.5%;
}
@media (max-width: 900px) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1fr);
  }
  .scene {
    max-width: 460px;
  }
}

/* marquee */
.marquee {
  background: var(--ink);
  color: var(--card);
  overflow: hidden;
  padding-block: 15px;
  transform: rotate(-1.2deg) scale(1.03);
  margin-block: clamp(20px, 3vw, 36px) 0;
  position: relative;
  z-index: 2;
}
.marquee .track {
  display: flex;
  width: max-content;
  animation: scroll 40s steps(480, end) infinite;
}
.marquee span {
  display: flex;
  align-items: center;
  gap: 30px;
  padding-right: 30px;
  font: italic 400 clamp(22px, 2.6vw, 32px)/1.1 var(--serif);
  white-space: nowrap;
}
.marquee svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: var(--pink);
}

/* cards: freebies and lessons */
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 46px 18px;
}
.grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 46px 18px;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 28px;
  padding: 26px 24px 24px;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.24s steps(3, end);
}
a.card:hover {
  transform: translateY(-4px) rotate(-0.4deg);
}
.card .ph {
  position: absolute;
  top: -46px;
  right: 16px;
  width: 88px;
  max-width: none;
  transform-origin: 50% 90%;
}
.card:hover .ph {
  animation: nod 1.8s var(--stop) infinite;
}
.card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-right: 96px;
}
.card h3 {
  font-size: clamp(23px, 2.3vw, 28px);
  letter-spacing: -0.03em;
  padding-right: 60px;
}
.card p {
  font-size: 15.5px;
  color: #3c352f;
}
.card .row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 10px;
}
.card .meta {
  font: 600 12px/1.3 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
}
.card .go {
  font: 700 15px/1 var(--bold);
  color: var(--forest);
}
.card.pk {
  background: var(--pink);
  border-color: transparent;
}
.card.pk p {
  color: #3c2f37;
}
.card.gr {
  background: var(--green);
  border-color: transparent;
}
.card.gr p,
.card.gr .meta {
  color: var(--ink);
}
.card.inkcard {
  background: var(--ink);
  color: var(--card);
  border-color: transparent;
}
.card.inkcard p,
.card.inkcard small,
.card.inkcard .meta {
  color: var(--inkmute);
}
.card.inkcard .stk.line {
  color: var(--card);
  border-color: var(--card);
}
.price {
  font: 800 28px/1 var(--bold);
  letter-spacing: -0.02em;
}
.price s {
  font-weight: 600;
  font-size: 0.6em;
  color: var(--stone);
  margin-left: 6px;
}
.inkcard .price s,
.ink .price s {
  color: var(--inkmute);
}
.card small,
.pricenote {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  color: var(--stone);
  margin-top: 6px;
}
.card.wide {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 26px;
}
.card.wide .body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.card.wide .ph {
  right: 236px;
}
.card.wide .tags,
.card.wide h3 {
  padding-right: 0;
}
.card.wide .reel {
  width: 170px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 18px;
  align-self: center;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.35);
}
.lessonno {
  font: italic 400 44px/1 var(--serif);
  color: var(--berry);
}
@media (max-width: 980px) {
  .grid3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .grid3,
  .grid2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .card.wide {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
  }
  .card.wide .ph {
    right: 16px;
  }
  .card.wide .tags {
    padding-right: 96px;
  }
  .card.wide .reel {
    width: 140px;
    justify-self: start;
  }
}

/* Edit Bestie spotlight (home) */
.spot .wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 40px 56px;
  align-items: center;
}
.spot .copy {
  display: grid;
  gap: 20px;
  justify-items: start;
  position: relative;
}
.spot h2 {
  color: var(--card);
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}
.stat {
  border: 1px solid rgba(251, 248, 242, 0.18);
  border-radius: 18px;
  padding: 14px;
  min-width: 0;
}
.stat b {
  display: block;
  font: 800 clamp(22px, 2.4vw, 30px)/1 var(--bold);
  letter-spacing: -0.03em;
  color: var(--acc);
}
.stat span {
  display: block;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--inkmute);
  margin-top: 6px;
}
.buyrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
}
.salenote {
  font-size: 14px;
  color: var(--inkmute);
}
.salenote b {
  color: var(--acc);
}
.labels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.spot .peek {
  position: absolute;
  top: -70px;
  right: 0;
  width: 92px;
  --r: 6deg;
}
@media (max-width: 900px) {
  .spot .wrap {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 520px) {
  .stats {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* video frames */
.vframe {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
}
.vframe video,
.vframe img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vframe.tall {
  aspect-ratio: 9 / 16;
}
.vframe.wide {
  aspect-ratio: 16 / 9;
}
.vframe .tag {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
}
.vframe .sound {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  font: 700 13px/1 var(--bold);
  background: var(--card);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 9px 12px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink);
}
.vpair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* meet wendy */
.meet .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 64px;
  align-items: center;
}
.polas {
  position: relative;
  height: clamp(380px, 46vw, 560px);
}
.pola {
  position: absolute;
  width: 46%;
  background: var(--card);
  padding: 10px 10px 34px;
  border-radius: 8px;
  box-shadow: 0 18px 36px rgba(60, 45, 30, 0.2);
  transform: rotate(var(--r, 0deg));
}
.pola img {
  aspect-ratio: 9 / 14;
  object-fit: cover;
  border-radius: 4px;
  width: 100%;
}
.pola figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  text-align: center;
  font: italic 400 17px/1 var(--serif);
}
.pola.p1 {
  left: 0;
  top: 6%;
  --r: -7deg;
}
.pola.p2 {
  left: 29%;
  top: 0;
  --r: 3deg;
  z-index: 2;
}
.pola.p3 {
  right: 0;
  top: 12%;
  --r: 8deg;
}
.meet .copy {
  display: grid;
  gap: 18px;
  justify-items: start;
}
.meet .copy p {
  font-size: 18px;
  max-width: 52ch;
}
.meet .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 900px) {
  .meet .wrap {
    grid-template-columns: minmax(0, 1fr);
  }
  .polas {
    max-width: 520px;
    width: 100%;
    margin-inline: auto;
  }
}

/* newsletter + close (every page) */
.news {
  padding-block: clamp(64px, 8vw, 104px) 0;
}
.newsband {
  position: relative;
  background: var(--green);
  border-radius: 34px;
  padding: clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  gap: 28px 40px;
  align-items: center;
}
.newsband .eyebrow {
  color: var(--ink);
}
.newscopy {
  display: grid;
  gap: 14px;
  justify-items: start;
}
.newscopy h2 .s {
  color: var(--ink);
}
.newscopy p {
  color: var(--ink);
  max-width: 46ch;
}
.newscopy .textlink {
  color: var(--ink);
}
.newshead {
  position: absolute;
  top: -52px;
  left: clamp(20px, 3vw, 44px);
  width: 104px;
  max-width: none;
  --r: -8deg;
  filter: drop-shadow(0 12px 14px rgba(29, 26, 23, 0.25));
}
.newscopy {
  padding-top: 40px;
}
.newsform {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 22px;
  box-shadow: 0 6px 0 var(--ink);
  overflow: hidden;
  min-width: 0;
}
.newsform iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
  background: var(--card);
}
@media (max-width: 900px) {
  .newsband {
    grid-template-columns: minmax(0, 1fr);
  }
}

.close {
  padding-block: clamp(56px, 8vw, 96px)
    max(28px, env(safe-area-inset-bottom, 0px));
}
.closestage {
  display: grid;
  justify-items: center;
  gap: 26px;
  text-align: center;
}
.close .circle {
  position: relative;
  width: min(300px, 64vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--green);
  display: grid;
  place-items: center;
  padding: clamp(30px, 4vw, 46px);
}
.close .circle p {
  font: 800 clamp(20px, 2.4vw, 26px)/1.06 var(--bold);
  letter-spacing: -0.03em;
  color: var(--ink);
}
.close .circle img {
  position: absolute;
  max-width: none;
  filter: drop-shadow(0 8px 10px rgba(29, 26, 23, 0.22));
}
.close .c1 {
  width: 30%;
  left: -16%;
  top: 0;
  --r: -10deg;
}
.close .c2 {
  width: 27%;
  right: -14%;
  top: 22%;
  --r: 8deg;
  animation-delay: 0.7s;
}
.close .c3 {
  width: 25%;
  left: -6%;
  bottom: -5%;
  --r: 6deg;
  animation-delay: 1.3s;
}
.close .circle .stk {
  position: absolute;
  right: -6%;
  bottom: 3%;
  --r: -6deg;
}
.close .stuck {
  font-size: 15px;
  color: var(--stone);
  max-width: 46ch;
}
.close .stuck a {
  color: var(--forest);
  font-weight: 600;
}
.foot {
  margin-top: clamp(48px, 7vw, 80px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
}
.foot .brand {
  text-decoration: none;
}
.foot .brand .wm {
  font-size: 22px;
}
.footlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.footlinks a {
  font: 600 14.5px/1.3 var(--sans);
  text-decoration: none;
  color: #3c352f;
}
.footlinks a:hover {
  color: var(--forest);
  text-decoration: underline;
}
.fine {
  width: 100%;
  font-size: 13px;
  color: var(--stone);
}

/* inner page header */
.phead {
  padding-block: clamp(36px, 6vw, 72px) clamp(28px, 4vw, 48px);
}
.phead .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 40px;
  align-items: end;
}
.phead .copy {
  display: grid;
  gap: 18px;
  justify-items: start;
}
.phead .copy h1 {
  font-size: clamp(44px, 6.4vw, 84px);
}
.phead .headart {
  width: clamp(130px, 17vw, 210px);
  --r: 6deg;
}
.crumbs {
  font: 600 13px/1 var(--sans);
  color: var(--stone);
}
.crumbs a {
  color: var(--forest);
  text-decoration: none;
}
@media (max-width: 640px) {
  .phead .wrap {
    grid-template-columns: minmax(0, 1fr) 96px;
  }
  .phead .headart {
    width: 96px;
  }
}

/* lessons */
.lesson {
  max-width: 820px;
  margin-inline: auto;
}
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.fact {
  background: var(--card);
  border-radius: 18px;
  padding: 16px 18px;
  min-width: 0;
}
.fact b {
  display: block;
  font: 800 17px/1.2 var(--bold);
}
.fact span {
  display: block;
  font-size: 14.5px;
  color: var(--stone);
  margin-top: 4px;
  line-height: 1.4;
}
.lsec {
  margin-top: clamp(48px, 6vw, 72px);
  display: grid;
  gap: 16px;
}
.lsec > h2 {
  font-size: clamp(30px, 4vw, 44px);
}
.lsec > p {
  max-width: 64ch;
}
.steps {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
  counter-reset: st;
}
.steps > li {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 22px 22px 22px 84px;
  display: grid;
  gap: 10px;
  min-width: 0;
}
.steps > li::before {
  counter-increment: st;
  content: counter(st);
  position: absolute;
  left: 20px;
  top: 20px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--ink);
  display: grid;
  place-items: center;
  font: 800 20px/1 var(--bold);
  box-shadow: 0 3px 0 var(--ink);
}
.steps h3 {
  font-size: 21px;
}
.steps p {
  color: #3c352f;
}
.copybox {
  background: var(--ink);
  color: var(--card);
  border-radius: 18px;
  padding: 14px 16px;
  display: grid;
  gap: 8px;
  min-width: 0;
}
.copybox .lbl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font: 600 11.5px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inkmute);
}
.copybox pre,
.copybox code {
  margin: 0;
  font:
    500 15px/1.55 ui-monospace,
    "SF Mono",
    Menlo,
    Consolas,
    monospace;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--card);
}
.copybox .copy {
  font: 700 12.5px/1 var(--bold);
  background: var(--acc);
  color: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  letter-spacing: 0;
  text-transform: none;
}
.copybox .copy.done {
  background: var(--green);
}
.copybox.long pre {
  max-height: 220px;
  overflow: auto;
}
.callout {
  background: var(--pink);
  border-radius: 22px;
  padding: 18px 20px;
  display: grid;
  gap: 6px;
}
.callout b {
  font: 800 17px/1.2 var(--bold);
}
.callout.gr {
  background: var(--green);
}
.callout.ac {
  background: var(--acc);
}
.vs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}
.vs > div {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 20px;
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}
.vs > div.win {
  background: var(--green);
  border-color: transparent;
}
.vs h3 {
  font-size: 20px;
}
.vs ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}
.vs .mid {
  align-self: center;
  font: italic 400 34px/1 var(--serif);
  background: none;
  border: 0;
  padding: 0;
}
.quote {
  font: italic 400 clamp(26px, 3.4vw, 38px)/1.15 var(--serif);
  margin: 0;
}
.quote cite {
  display: block;
  font: 600 13px/1 var(--sans);
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 14px;
}
.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.tile {
  background: var(--card);
  border-radius: 20px;
  padding: 18px;
  min-width: 0;
}
.tile b {
  display: block;
  font: 800 17px/1.2 var(--bold);
}
.tile span {
  display: block;
  font-size: 14.5px;
  color: var(--stone);
  margin-top: 4px;
  line-height: 1.4;
}
.road {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.road a,
.road span {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  text-decoration: none;
  font: 700 15px/1.25 var(--bold);
  min-width: 0;
}
.road a:hover {
  background: var(--pink);
}
.road .now {
  background: var(--acc);
  border-color: var(--ink);
}
.road small {
  display: block;
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 8px;
}
.lessonend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
@media (max-width: 760px) {
  .facts,
  .tiles {
    grid-template-columns: minmax(0, 1fr);
  }
  .road {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vs {
    grid-template-columns: minmax(0, 1fr);
  }
  .vs .mid {
    justify-self: center;
  }
  .steps > li {
    padding: 74px 18px 20px;
  }
  .steps > li::before {
    left: 18px;
    top: 18px;
  }
}

/* Edit Bestie page */
.ebhero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 40px 56px;
  align-items: center;
}
.ebhero .copy {
  display: grid;
  gap: 20px;
  justify-items: start;
}
.ebhero .vframe {
  max-width: 380px;
  justify-self: center;
  width: 100%;
}
.pricebox {
  display: grid;
  gap: 6px;
}
.countdown {
  display: inline-flex;
  gap: 6px;
  font: 800 15px/1 var(--bold);
  font-variant-numeric: tabular-nums;
}
.countdown span {
  background: var(--ink);
  color: var(--acc);
  border-radius: 10px;
  padding: 8px 9px;
  min-width: 44px;
  text-align: center;
}
.countdown small {
  display: block;
  font: 600 9.5px/1 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inkmute);
  margin-top: 4px;
}
.how {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  counter-reset: how;
}
.how li {
  border-top: 2px solid var(--card);
  padding-top: 12px;
  min-width: 0;
}
.how li::before {
  counter-increment: how;
  content: counter(how);
  display: block;
  font: italic 400 34px/1 var(--serif);
  color: var(--acc);
  margin-bottom: 8px;
}
.how b {
  display: block;
  font: 800 16px/1.25 var(--bold);
}
.how span {
  display: block;
  font-size: 14px;
  color: var(--inkmute);
  margin-top: 4px;
  line-height: 1.4;
}
.how kbd,
.say {
  font:
    600 0.92em/1 ui-monospace,
    "SF Mono",
    Menlo,
    monospace;
  background: var(--acc);
  color: var(--ink);
  border-radius: 6px;
  padding: 2px 6px;
}
.reelwall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.reelwall figure {
  margin: 0;
  display: grid;
  gap: 10px;
  min-width: 0;
}
.reelwall figcaption b {
  display: block;
  font: 800 16px/1.2 var(--bold);
}
.reelwall figcaption span {
  display: block;
  font-size: 14px;
  color: var(--stone);
  line-height: 1.35;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chips span {
  font: 700 14.5px/1 var(--bold);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: 0 3px 0 var(--ink);
}
.chips span:nth-child(5n + 1) {
  background: var(--pink);
}
.chips span:nth-child(7n + 3) {
  background: var(--acc);
}
.fx3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.looks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.look {
  background: var(--card);
  border-radius: 20px;
  padding: 18px;
  min-width: 0;
}
.look b {
  display: block;
  font: 800 18px/1.2 var(--bold);
}
.look span {
  display: block;
  font-size: 14.5px;
  color: var(--stone);
  margin-top: 4px;
  line-height: 1.4;
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 56px;
  align-items: center;
}
.split .copy {
  display: grid;
  gap: 16px;
  justify-items: start;
}
.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ticks li {
  position: relative;
  padding-left: 30px;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--ink);
}
.inside {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.inside > div {
  background: var(--card);
  border-radius: 20px;
  padding: 18px;
  min-width: 0;
}
.inside small {
  display: block;
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: 8px;
}
.inside b {
  display: block;
  font: 800 18px/1.2 var(--bold);
}
.inside span {
  display: block;
  font-size: 14.5px;
  color: var(--stone);
  margin-top: 4px;
  line-height: 1.4;
}
.value {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.value > div {
  border-radius: 24px;
  padding: 24px;
  display: grid;
  gap: 8px;
  align-content: start;
}
.value .them {
  background: var(--card);
  border: 1px solid var(--line);
}
.value .us {
  background: var(--green);
}
.value .big {
  font: 800 clamp(30px, 4vw, 44px)/1 var(--bold);
  letter-spacing: -0.03em;
}
.needs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.needs > div {
  background: var(--card);
  border-radius: 20px;
  padding: 18px;
  min-width: 0;
}
.needs b {
  display: block;
  font: 800 17px/1.2 var(--bold);
}
.needs span {
  display: block;
  font-size: 14.5px;
  color: var(--stone);
  margin-top: 4px;
  line-height: 1.4;
}
.faq {
  display: grid;
  gap: 10px;
  max-width: 860px;
}
.faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0 20px;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  font: 800 18px/1.3 var(--bold);
  padding: 18px 34px 18px 0;
  position: relative;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font: 800 24px/1 var(--bold);
  color: var(--forest);
}
.faq details[open] summary::after {
  content: "–";
}
.faq details p {
  padding: 0 0 18px;
  color: #3c352f;
}
.finalcta {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 18px;
}
@media (max-width: 980px) {
  .how {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .reelwall,
  .looks,
  .needs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .inside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .ebhero .wrap,
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
  .fx3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .value {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 520px) {
  .how,
  .inside,
  .needs,
  .looks {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* chat demo (Script Bestie) */
.chat {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 26px;
  padding: 18px;
  display: grid;
  gap: 10px;
  box-shadow: 0 6px 0 var(--ink);
  max-width: 460px;
  width: 100%;
}
.msg {
  max-width: 86%;
  padding: 11px 14px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.45;
}
.msg.me {
  justify-self: end;
  background: var(--ink);
  color: var(--card);
  border-bottom-right-radius: 6px;
}
.msg.cl {
  justify-self: start;
  background: var(--egg2);
  border-bottom-left-radius: 6px;
}

/* cheat sheet */
.tips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  counter-reset: tip;
}
.tips > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
  gap: 20px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 24px;
}
.tips h3 {
  font-size: clamp(21px, 2.2vw, 25px);
}
.tips h3::before {
  counter-increment: tip;
  content: counter(tip);
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--ink);
  font: 800 16px/1 var(--bold);
  margin-right: 10px;
  vertical-align: 3px;
}
.tips p {
  margin-top: 8px;
  color: #3c352f;
}
.tips .demo {
  background: var(--ink);
  color: var(--card);
  border-radius: 18px;
  min-height: 130px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 16px;
  overflow: hidden;
}
.tips .demo .big {
  font: 800 40px/0.9 var(--bold);
  letter-spacing: -0.04em;
  color: var(--acc);
}
.tips .demo .cap {
  font: 500 22px/1 var(--sans);
  text-transform: lowercase;
}
.tips .demo .ser {
  font: italic 400 28px/1.05 var(--serif);
}
.tips .demo .scr {
  font: 400 34px/1 var(--script);
  color: var(--pink);
}
@media (max-width: 760px) {
  .tips > li {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 80;
  background: var(--ink);
  color: var(--card);
  border-radius: 18px;
  padding: 14px 18px;
  max-width: min(520px, calc(100vw - 32px));
  font-size: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.toast a {
  color: var(--acc);
  font-weight: 700;
}

/* reveal on scroll: armed only for things below the fold, so the page reads fine without it */
.rv {
  transition:
    opacity 0.42s steps(4, end),
    transform 0.42s steps(4, end);
}
.rv.arm {
  opacity: 0;
  transform: translateY(14px);
}

/* print a lesson as a clean PDF */
@media print {
  .nav,
  .news,
  .close,
  .marquee,
  .noprint,
  .skip {
    display: none !important;
  }
  body {
    background: #fff;
    font-size: 12pt;
  }
  .steps > li,
  .card,
  .fact,
  .tile,
  .callout,
  .vs > div {
    break-inside: avoid;
    box-shadow: none;
  }
  .copybox {
    background: #f2f2f2;
    color: #000;
  }
  .copybox pre,
  .copybox code {
    color: #000;
  }
  .m-nod,
  .m-wob,
  .m-bob,
  .m-spin {
    animation: none !important;
  }
}

/* stand still for anyone who asks for less motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .rv.arm {
    opacity: 1;
    transform: none;
  }
  .tapme .cursor,
  .tapme .ringfx {
    display: none;
  }
}

/* additions */
.stk.sm { font-size: 12.5px; padding: 7px 11px; box-shadow: 0 3px 0 var(--ink); }
.stk.line.sm, .stk.line { box-shadow: none; }
.inside { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .inside { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .inside { grid-template-columns: minmax(0, 1fr); } }
.vs ul { font-size: 15.5px; }
.vs .win ul { color: var(--ink); }
.phead .labels { margin-top: 2px; }
.ebhero .copy .labels { margin-top: 4px; }
.pricebox .price { font-size: clamp(30px, 3.4vw, 40px); }
.finalcta h2 { color: var(--card); }
.finalcta .salenote a { color: var(--acc); }
.toast[hidden] { display: none; }
.card .ticks li::before { width: 16px; height: 16px; top: .3em; }
.card .ticks { margin: 2px 0 0; }
.inkcard .btn { box-shadow: 0 5px 0 #000; }

/* fixes after the first look */
[hidden] { display: none !important; }
.needs .say, .look .say, .tile .say, .fact .say, .how .say { display: inline; }
@media (max-width: 900px) {
  .spot .peek { display: none; }
  .newshead { left: auto; right: 22px; top: -44px; width: 84px; }
  .newscopy { padding-top: 18px; }
}

/* v1.1: calmer, easier to find your way */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.door { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 290px; padding: 26px; border-radius: 30px; text-decoration: none; color: var(--ink); background: var(--card); border: 2px solid var(--ink); box-shadow: 0 6px 0 var(--ink); transition: transform .24s steps(3, end), box-shadow .24s steps(3, end); }
.door:hover { transform: translate(-1px, -3px) rotate(-.6deg); box-shadow: 0 9px 0 var(--ink); }
.door:active { transform: translate(1px, 3px); box-shadow: 0 3px 0 var(--ink); }
.door img { width: 78px; height: auto; max-width: none; margin-bottom: 6px; transform-origin: 50% 90%; }
.door:hover img { animation: nod 1.8s var(--stop) infinite; }
.door b { font: 800 clamp(26px, 2.6vw, 32px)/1.05 var(--bold); letter-spacing: -.03em; }
.door > span { font-size: 16px; line-height: 1.45; }
.door .go { margin-top: auto; padding-top: 14px; font: 700 16px/1 var(--bold); }
.door.pk { background: var(--pink); }
.door.gr { background: var(--green); }
.door.inkdoor { background: var(--ink); color: var(--card); }
.door.inkdoor .go { color: var(--acc); }
@media (max-width: 860px) {
  .doors { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .door { min-height: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: center; padding: 18px 20px; }
  .door img { grid-row: 1 / span 3; width: 64px; margin: 0; }
  .door .go { margin-top: 0; padding-top: 6px; }
}

.lessonlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 900px; }
.lessonlist a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 18px; padding: 18px 22px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; text-decoration: none; color: var(--ink); transition: transform .2s steps(3, end), background-color .2s steps(2, end); }
.lessonlist a:hover { background: var(--pink); transform: translateX(4px); }
.lessonlist .no { font: italic 400 38px/1 var(--serif); color: var(--berry); min-width: 48px; }
.lessonlist .t b { display: block; font: 800 19px/1.2 var(--bold); letter-spacing: -.02em; }
.lessonlist .t span { display: block; font-size: 15px; color: var(--stone); margin-top: 3px; }
.lessonlist .tm { font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--stone); white-space: nowrap; }
.lessonlist .ar { font: 800 22px/1 var(--bold); color: var(--forest); }
@media (max-width: 560px) { .lessonlist a { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 16px; } .lessonlist .tm { display: none; } .lessonlist .no { font-size: 30px; min-width: 36px; } }

.jump { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.jump a { font: 600 14px/1 var(--sans); text-decoration: none; color: var(--ink); background: var(--card); border: 1.5px solid var(--ink); border-radius: 999px; padding: 10px 14px; white-space: nowrap; }
.jump a:hover { background: var(--pink); }
@media (max-width: 560px) { .jump { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .jump::-webkit-scrollbar { display: none; } }

.feature { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 32px; align-items: center; background: var(--ink); color: var(--card); border-radius: 34px; padding: clamp(28px, 4vw, 48px); }
.feature .body { display: grid; gap: 16px; justify-items: start; min-width: 0; }
.feature h2 { color: var(--card); }
.feature .lede, .feature .salenote { color: var(--inkmute); }
.feature .reel { width: 220px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, .4); }
.feature .ph { position: absolute; top: -54px; right: clamp(290px, 26vw, 320px); width: 96px; max-width: none; transform-origin: 50% 90%; }
.feature:hover .ph { animation: nod 1.8s var(--stop) infinite; }
@media (max-width: 760px) { .feature { grid-template-columns: minmax(0, 1fr); } .feature .reel { width: 160px; } .feature .ph { right: 22px; width: 78px; top: -44px; } }
.card .ph { width: 76px; top: -40px; }
.card .meta { margin-top: 2px; }

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.trio figure { margin: 0; display: grid; gap: 14px; align-content: start; min-width: 0; }
.trio .media { position: relative; aspect-ratio: 1; background: var(--ink); border-radius: 22px; overflow: hidden; display: grid; place-items: center; }
.trio .media video, .trio .media img { width: 100%; height: 100%; object-fit: contain; }
.trio figcaption b { display: block; font: 800 19px/1.2 var(--bold); }
.trio figcaption > span { display: block; font-size: 15px; color: #3c352f; margin-top: 4px; line-height: 1.45; }
.trio .say { display: inline; }
@media (max-width: 860px) { .trio { grid-template-columns: minmax(0, 1fr); } .trio .media { aspect-ratio: 4 / 3; } }

.playbtn { position: absolute; inset: 0; z-index: 1; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; }
.playbtn::before { content: ""; width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); background: var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='%231d1a17'/%3E%3C/svg%3E") 58% 50% / 26px no-repeat; transition: transform .2s steps(3, end), opacity .2s steps(2, end); }
.playbtn:hover::before { transform: scale(1.06); }
[data-play].playing .playbtn::before { opacity: 0; }

.buybar { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; background: var(--card); border: 2px solid var(--ink); border-radius: 999px; padding: 6px 6px 6px 8px; box-shadow: 0 6px 0 rgba(29, 26, 23, .18), 0 16px 34px rgba(29, 26, 23, .18); max-width: calc(100vw - 24px); }
.buybar .bbt { display: grid; line-height: 1.1; padding-right: 4px; white-space: nowrap; }
.buybar .bbt b { font: 800 15px/1.1 var(--bold); }
.buybar .bbt span { font: 600 13.5px/1.2 var(--sans); color: var(--stone); }
.buybar .bbt span s { margin-left: 4px; }
@media (max-width: 380px) { .buybar .av { display: none; } }
.has-buybar .close { padding-bottom: 110px; }
.toast { bottom: max(86px, calc(env(safe-area-inset-bottom, 0px) + 72px)); }
.spot .salenote + .buyrow { margin-top: -4px; }

/* who it's for: tap the lines that sound like you */
.whofor .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px 64px; align-items: center; }
.whofor .copy { display: grid; gap: 18px; justify-items: start; }
.whofor .copy .head { width: 92px; --r: -6deg; margin-bottom: -6px; }
.madefor { display: flex; flex-wrap: wrap; gap: 8px; }
.madefor span { font: 600 14px/1 var(--sans); background: var(--card); border: 1.5px solid var(--ink); border-radius: 999px; padding: 9px 13px; }
.notfor { font-size: 14.5px; color: var(--stone); }
.ticklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tickrow { width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: center; text-align: left; background: var(--card); border: 2px solid var(--ink); border-radius: 20px; padding: 13px 18px 13px 14px; font: 500 18.5px/1.4 var(--sans); color: var(--ink); cursor: pointer; box-shadow: 0 4px 0 var(--ink); transition: transform .2s steps(3, end), box-shadow .2s steps(3, end), background-color .2s steps(2, end); }
.tickrow:hover { transform: translate(-1px, -2px); box-shadow: 0 6px 0 var(--ink); }
.tickrow:active { transform: translate(1px, 2px); box-shadow: 0 2px 0 var(--ink); }
.tickrow .box { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); display: grid; place-items: center; }
.tickrow .box svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.4); transition: opacity .2s steps(2, end), transform .24s steps(3, end); }
.tickrow[aria-pressed=true] { background: var(--pink); }
.tickrow[aria-pressed=true] .box { background: var(--green); }
.tickrow[aria-pressed=true] .box svg { opacity: 1; transform: scale(1); }
.tickresult { margin: 18px 0 8px; font: 700 17px/1.4 var(--bold); }
@media (max-width: 900px) { .whofor .wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .tickrow { font-size: 17px; padding: 12px 14px 12px 12px; } }