/* cute-meme / sticker-sheet
   A flat pastel sticker sheet lying on a desk. The page is one sheet with a kiss-cut
   border; the project name is a giant die-cut sticker, the hero art a photo sticker
   taped on with a peeling corner, the cut-out stickers are slapped around it. Cards
   are stickers with white borders and dashed kiss-cut lines, each at its own seeded
   angle, wobbling when touched; the marquee is washi tape, facts are perforated
   stamps, quotes are speech bubbles, questions are sticky notes, the contract is a
   shipping label. Flat colour only: no gradients but the tape and the peel. */

:root {
  /* the pastels (fallbacks; the @supports block below derives them from the brand) */
  --st-desk: color-mix(in srgb, var(--wl-secondary) 38%, #f3f0e8);
  --st-sheet: #fffdf8;
  --st-ink: color-mix(in srgb, var(--wl-accent) 14%, #231a26);
  --st-pop: var(--wl-accent-on-light);
  --st-pop-deep: color-mix(in srgb, var(--wl-accent-on-light) 82%, #000000);
  --st-p1: color-mix(in srgb, var(--wl-accent) 32%, #ffffff);
  --st-p2: color-mix(in srgb, var(--wl-secondary) 45%, #ffffff);
  --st-p3: #fff1a6;
  --st-p4: #e0d6ff;
  --st-p5: #ffdcc8;
  --st-m2: color-mix(in srgb, var(--wl-secondary) 78%, #1f3a35);
  --st-cut: color-mix(in srgb, var(--st-ink) 30%, transparent);
  --st-lift: 0 1px 0 rgb(0 0 0 / 0.05), 0 3px 5px -2px rgb(0 0 0 / 0.12), 0 16px 22px -14px color-mix(in srgb, var(--st-ink) 50%, transparent);
  --st-lift-lg: 0 2px 0 rgb(0 0 0 / 0.05), 0 6px 10px -4px rgb(0 0 0 / 0.12), 0 34px 44px -26px color-mix(in srgb, var(--st-ink) 60%, transparent);
  --st-drop: drop-shadow(0 1px 0 rgb(0 0 0 / 0.06)) drop-shadow(0 10px 10px color-mix(in srgb, var(--st-ink) 24%, transparent));
  --st-wobble: linear(0, 1.3 16%, 0.84 33%, 1.1 50%, 0.96 67%, 1.02 84%, 1);
  --st-hand: "Segoe Print", "Marker Felt", "Bradley Hand", "Ink Free", "Chalkboard SE", "Comic Sans MS", cursive;
  --st-tape-mask:
    conic-gradient(from 45deg at 0 50%, #000 90deg, #0000 0) 0 0 / 7px 9px repeat-y,
    conic-gradient(from 225deg at 100% 50%, #000 90deg, #0000 0) 100% 0 / 7px 9px repeat-y,
    linear-gradient(#000 0 0) 50% 0 / calc(100% - 13px) 100% no-repeat;
  --st-hole: #0000 4.2px, #000 4.8px;
  --st-stamp-mask:
    radial-gradient(circle at 50% 0, var(--st-hole)) 0 0 / 13px 100% round no-repeat,
    radial-gradient(circle at 50% 100%, var(--st-hole)) 0 0 / 13px 100% round no-repeat,
    radial-gradient(circle at 0 50%, var(--st-hole)) 0 0 / 100% 13px no-repeat round,
    radial-gradient(circle at 100% 50%, var(--st-hole)) 0 0 / 100% 13px no-repeat round;

  /* the skin's vocabulary */
  --v-bg: var(--st-sheet);
  --v-fg: var(--st-ink);
  --v-soft: color-mix(in srgb, var(--st-ink) 78%, var(--st-sheet));
  --v-faint: color-mix(in srgb, var(--st-ink) 56%, var(--st-sheet));
  --v-line: color-mix(in srgb, var(--st-ink) 14%, transparent);
  --v-line-strong: var(--st-cut);
  --v-surface: #ffffff;
  --v-surface-2: var(--st-p3);
  --v-card-bg: #ffffff;
  --v-accent: var(--st-pop);
  --v-accent-text: var(--st-pop-deep);
  --v-on-accent: #ffffff;
  --v-secondary: var(--st-m2);
  --v-seg-1: var(--st-pop);
  --v-seg-2: var(--st-m2);
  --v-seg-3: var(--st-p3);
  --v-seg-4: var(--st-p4);
  --v-seg-5: var(--st-p5);
  --v-seg-6: var(--st-p1);
  --v-font-body: "Avenir Next", "Avenir", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --v-font-display: "Cooper Black", "Cooper Std", "Recoleta", "Bookman Old Style", "Bookman", Georgia, "Times New Roman", serif;
  --v-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --v-display-weight: 700;
  --v-display-tracking: -0.012em;
  --v-display-case: none;
  --v-display-lh: 1;
  --v-title-size: clamp(2.3rem, 4.8vw, 3.9rem);
  --v-radius: 26px;
  --v-radius-sm: 16px;
  --v-radius-lg: 34px;
  --v-border: 0 solid transparent;
  --v-shadow: var(--st-lift);
  --v-card-pad: clamp(22px, 2.4vw, 30px);
  --v-maxw: 1060px;
  --v-pad-x: clamp(22px, 5vw, 64px);
  --v-sec-gap: clamp(92px, 10vw, 140px);
  --v-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --v-spring: cubic-bezier(0.3, 1.8, 0.5, 1);

  --wl-label-lore: "Origin story";
  --wl-label-features: "Traits";
  --wl-label-supply: "The split";
  --wl-label-flow: "Step by step";
  --wl-label-timeline: "Scrapbook";
  --wl-label-comparison: "Compared";
  --wl-label-stats: "Numbers";
  --wl-label-tweet: "Pinned post";
  --wl-label-gallery: "Photo stickers";
  --wl-label-facts: "Stamped";
  --wl-label-quotes: "Speech bubbles";
  --wl-label-faq: "Sticky notes";
  --wl-label-access: "Stick it on";

  /* skeleton knobs */
  --cm-page-maxw: 1240px;
  --cm-page-mx: 20px;
  --cm-page-my: 20px;
  --cm-top-h: 90px;
  --cm-top-pos: static;
  --cm-bar-h: 64px;
  --cm-word-display: block;
  --cm-hero-cols: minmax(0, 1fr) minmax(0, 1fr);
  --cm-hero-rows: auto minmax(0, 1fr);
  --cm-hero-areas: "word word" "stage copy";
  --cm-hero-areas-phone: "word" "copy" "stage";
  --cm-hero-peek: 50px;
  --cm-hero-row-gap: 0px;
  --cm-hero-gap: clamp(20px, 3vw, 44px);
  --cm-hero-pad: 0 clamp(26px, 4vw, 56px) 30px;
  --cm-stage-h: min(450px, calc(100svh - 360px));
  --cm-stage-h-phone: min(96vw, 470px);
  --cm-box-w: 88%;
  --cm-box-maxw: 560px;
  --cm-box-r: -3deg;
  --cm-window-ratio: 2 / 1;
  --cm-s1-x: 72%; --cm-s1-y: 30%; --cm-s1-w: 34%; --cm-s1-r: 12deg;
  --cm-s2-x: -4%; --cm-s2-y: 60%; --cm-s2-w: 28%; --cm-s2-r: -13deg;
  --cm-s3-x: 81%; --cm-s3-y: 41%; --cm-s3-w: 22%; --cm-s3-r: 9deg;
  --cm-s4-x: 1%; --cm-s4-y: 0%; --cm-s4-w: 20%; --cm-s4-r: -7deg;
  --cm-h1-xs: clamp(3.4rem, 7vw, 6rem);
  --cm-h1-s: clamp(2.6rem, 4.7vw, 4.3rem);
  --cm-h1-m: clamp(2.3rem, 4vw, 3.6rem);
  --cm-h1-l: clamp(2rem, 3.3vw, 3rem);
  --cm-h1-xl: clamp(1.8rem, 2.7vw, 2.5rem);
  --cm-intro-cols: minmax(0, 0.78fr) minmax(0, 1.22fr);
  --cm-portrait-w: 360px;
  --cm-shot1-col: auto;
  --cm-shot1-row: auto;
  --cm-shot1-pos: static;
  --cm-shot1-h: auto;
  --cm-shot1-ratio: 4 / 3;
  --cm-shot-ratio: 4 / 3;
  --cm-facts-cols: repeat(2, minmax(0, 1fr));
  --cm-quotes-cols: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  --cm-faq-cols: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  --cm-faq-open: all;
}

@supports (color: oklch(from red l c h)) {
  :root {
    --st-desk: oklch(from var(--wl-secondary) 0.9 0.045 h);
    --st-sheet: oklch(from var(--wl-accent) 0.993 0.006 h);
    --st-ink: oklch(from var(--wl-accent) 0.28 0.055 h);
    --st-pop: oklch(from var(--wl-accent) 0.63 clamp(0.12, c, 0.2) h);
    --st-pop-deep: oklch(from var(--wl-accent) 0.5 clamp(0.12, c, 0.19) h);
    --st-p1: oklch(from var(--wl-accent) 0.875 0.08 h);
    --st-p2: oklch(from var(--wl-secondary) 0.905 0.075 h);
    --st-p3: oklch(from var(--wl-accent) 0.95 0.085 calc(h + 105));
    --st-p4: oklch(from var(--wl-accent) 0.89 0.065 calc(h - 75));
    --st-p5: oklch(from var(--wl-accent) 0.905 0.06 calc(h + 40));
    --st-m2: oklch(from var(--wl-secondary) 0.72 0.11 h);
  }
}

body {
  color: var(--st-ink);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--st-ink) 12%, transparent) 1.1px, transparent 1.7px) 0 0 / 20px 20px,
    var(--st-desk);
}

/* ---- the sheet */
.cm-page {
  border-radius: 38px;
  background: var(--st-sheet);
  box-shadow: inset 0 2px 0 #fff, 0 1px 2px rgb(0 0 0 / 0.06), 0 44px 70px -44px color-mix(in srgb, var(--st-ink) 70%, transparent);
}
.cm-page::before {
  content: ""; position: absolute; inset: 12px; z-index: 0;
  border: 2px dashed var(--st-cut);
  border-radius: 28px;
  pointer-events: none;
}

/* shared sticker habits */
.cm-sticker, .cm-doodle { filter: var(--st-drop); }

/* ---- top of the sheet */
.cm-top { padding: 0 clamp(28px, 4vw, 52px); }
.cm-brand { gap: 14px; }
.cm-brand__mark { width: 54px; height: 54px; border: 4px solid #fff; box-shadow: var(--st-lift); rotate: -8deg; }
.cm-brand__name { font-family: var(--v-font-display); font-weight: 700; font-synthesis-weight: none; font-size: 1.62rem; color: var(--st-ink); }
.cm-brand__tick { padding: 5px 10px; border-radius: 8px; background: var(--st-p3); box-shadow: 0 0 0 3px #fff, var(--st-lift); rotate: 5deg; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.04em; }
.cm-top__nav { gap: 8px; }
.cm-top__nav .wl-nav__link { padding: 8px 15px; border-radius: 999px; color: var(--st-ink); font-weight: 700; font-size: 0.93rem; transition: rotate 0.8s var(--st-wobble), background 0.2s, box-shadow 0.2s; }
.cm-top__nav .wl-nav__link:hover, .cm-top__nav .wl-nav__link.is-active { background: var(--st-p2); box-shadow: 0 0 0 3px #fff, var(--st-lift); rotate: -3deg; }
.cm-top__get {
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--st-ink);
  color: #fff;
  font-weight: 800;
  font-size: 0.98rem;
  box-shadow: 0 0 0 5px #fff, var(--st-lift);
  rotate: 3deg;
  transition: rotate 0.8s var(--st-wobble), scale 0.6s var(--st-wobble);
}
.cm-top__get:hover { rotate: -3deg; scale: 1.05; }

/* ---- hero: the name as a giant die-cut sticker */
.cm-hero__word { margin: 0 0 -46px; padding-top: 10px; line-height: 0; }
.cm-word {
  display: inline-block;
  width: auto;
  max-width: 100%;
  vertical-align: top;
  padding: 0.1em 0.14em 0.12em;
  transform-origin: 50% 60%;
  font-family: var(--v-font-display);
  font-weight: 700;
  font-synthesis-weight: none;
  font-size: clamp(4.4rem, 14.2vw, 12.4rem);
  line-height: 0.9;
  letter-spacing: -0.012em;
  color: var(--st-pop);
  rotate: -2.2deg;
  text-shadow:
    0.062em 0 0 #fff, -0.062em 0 0 #fff, 0 0.062em 0 #fff, 0 -0.062em 0 #fff,
    0.044em 0.044em 0 #fff, -0.044em 0.044em 0 #fff, 0.044em -0.044em 0 #fff, -0.044em -0.044em 0 #fff,
    0.057em 0.024em 0 #fff, -0.057em 0.024em 0 #fff, 0.057em -0.024em 0 #fff, -0.057em -0.024em 0 #fff,
    0.024em 0.057em 0 #fff, -0.024em 0.057em 0 #fff, 0.024em -0.057em 0 #fff, -0.024em -0.057em 0 #fff;
  filter: drop-shadow(0 1px 0 rgb(0 0 0 / 0.07)) drop-shadow(0 0.045em 0.05em color-mix(in srgb, var(--st-ink) 32%, transparent));
  transition: rotate 1s var(--st-wobble), scale 0.7s var(--st-wobble);
}
.cm-word:hover { rotate: -0.5deg; scale: 1.015; }
.cm-hero__stage > .cm-sticker, .cm-bouncer { transition: rotate 0.9s var(--st-wobble), scale 0.6s var(--st-wobble); }
.cm-hero__stage > .cm-sticker:hover { rotate: calc(var(--r, 0deg) + 9deg); scale: 1.08; }
.cm-bouncer:hover { rotate: calc(var(--cm-s1-r, 0deg) - 9deg); scale: 1.08; }

.cm-hero__copy { padding-top: 34px; }
.cm-chip {
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--st-p3);
  color: var(--st-ink);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 0 0 4px #fff, var(--st-lift);
  rotate: -2deg;
}
.cm-chip__dot { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--st-pop); box-shadow: 0 0 0 3px #fff; }
.cm-hero__headline { color: var(--st-ink); font-synthesis-weight: none; line-height: 1.02; }
.cm-hero__headline .wl-w:last-child { background: linear-gradient(transparent 58%, var(--st-p3) 58% 92%, transparent 92%); padding: 0 0.05em; margin: 0 -0.05em; }
.cm-hero__subhead { color: var(--v-soft); font-weight: 600; }

/* sticker buttons */
.cm-hero__cta { gap: 16px; }
.wl-btn {
  border: 0;
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--st-p2);
  color: var(--st-ink);
  font-weight: 800;
  font-size: 0.98rem;
  box-shadow: 0 0 0 5px #fff, var(--st-lift);
  rotate: calc(var(--cm-tilt, 0) * 2.5deg);
  transition: rotate 0.9s var(--st-wobble), scale 0.6s var(--st-wobble);
}
.wl-btn .wl-glyph { stroke-width: 2.3; }
.wl-btn:hover { transform: none; border-color: transparent; rotate: calc(var(--cm-tilt, 0) * 2.5deg - 4deg); scale: 1.05; }
.wl-copy.wl-btn { background: var(--st-p2); }
.wl-btn:nth-child(3n+3) { background: var(--st-p1); }
.wl-btn.wl-btn--primary { background: var(--st-ink); color: #fff; }
.wl-btn--primary:hover { box-shadow: 0 0 0 5px #fff, var(--st-lift); }
.wl-btn:focus-visible, .wl-link:focus-visible, .wl-copy:focus-visible { outline: 3px solid var(--st-pop); outline-offset: 7px; }

.cm-tags { gap: 14px; margin-top: 28px; }
.cm-tag {
  padding: 6px 12px;
  border-radius: 8px;
  background: #fff;
  color: var(--st-ink);
  font-weight: 700;
  font-size: 0.84rem;
  box-shadow: var(--st-lift);
  outline: 1.5px dashed var(--st-cut);
  outline-offset: 4px;
  rotate: calc(var(--cm-tilt, 0) * 2deg);
}
.cm-tag--net::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--st-m2); }

/* the photo sticker */
.cm-floor { display: none; }
.cm-box {
  padding: 12px 12px 4px;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--st-lift-lg);
  outline: 2px dashed var(--st-cut);
  outline-offset: 8px;
}
.cm-box__tab {
  position: absolute; z-index: 5;
  top: -19px; left: 50%;
  width: 152px; height: 38px;
  translate: -50% 0;
  rotate: -4deg;
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.4) 0 3px, transparent 3px 11px), color-mix(in srgb, var(--st-p2) 80%, transparent);
  -webkit-mask: var(--st-tape-mask);
  mask: var(--st-tape-mask);
}
.cm-box__band, .cm-box__gloss { display: none; }
.cm-box__window { border-radius: 12px; background: var(--st-p1); }
.cm-box__foot { padding: 10px 46px 8px; text-align: center; color: var(--st-ink); font-family: var(--st-hand); font-size: clamp(1.05rem, 1.6vw, 1.32rem); line-height: 1.3; }
.cm-box__burst {
  z-index: 4;
  top: 38%; left: -40px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: var(--st-p3);
  box-shadow: 0 0 0 6px #fff, var(--st-lift);
  rotate: -14deg;
  color: var(--st-ink);
  font-family: var(--v-font-display);
  font-weight: 700;
  font-synthesis-weight: none;
  font-size: 1.08rem;
}
.cm-box::after, .wl-feature::after {
  content: ""; position: absolute; z-index: 3;
  right: 0; bottom: 0;
  width: 58px; height: 58px;
  border-radius: 0 0 var(--peel-r, 22px) 0;
  background:
    linear-gradient(to top left, var(--st-sheet) 0 50%, transparent 50%),
    linear-gradient(to top left, transparent 50%, #ffffff 50%, #ebe5dc 100%);
  filter: drop-shadow(-2px -2px 2px rgb(0 0 0 / 0.12));
  transition: width 0.4s var(--v-ease), height 0.4s var(--v-ease);
  pointer-events: none;
}
.cm-box:hover::after, .wl-feature:hover::after { width: 80px; height: 80px; }
.cm-img--pfp { aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 7px #fff; }

/* doodles: flat die-cut stickers behind the art */
.cm-doodle__back { fill: #fff; stroke: #fff; stroke-width: 17; stroke-linejoin: round; --cm-core: #fff; }
.cm-doodle__base { fill: var(--c, var(--st-p3)); stroke: var(--c, var(--st-p3)); stroke-width: 2; stroke-linejoin: round; --cm-core: var(--core, var(--st-p3)); }
.cm-doodle__shade { display: none; }
.cm-doodle--1 { --c: var(--st-p3); }
.cm-doodle--2 { --c: var(--st-p1); }
.cm-doodle--3 { --c: var(--st-p2); }
.cm-doodle--4 { --c: var(--st-p4); }
.cm-doodle--5 { --c: var(--st-p5); --core: var(--st-p3); }
.cm-doodle--6 { --c: var(--st-pop); }
.cm-hero__deco > .cm-doodle--1 { --s: 86px; right: 4.5%; top: 4%; rotate: 16deg; }
.cm-hero__deco > .cm-doodle--2 { --s: 74px; left: 43%; bottom: 4%; rotate: -14deg; }
.cm-hero__deco > .cm-doodle--3 { --s: 54px; right: 14%; top: 24%; rotate: 8deg; }
.cm-hero__deco > .cm-doodle--4 { --s: 118px; right: 26%; top: 1%; rotate: -6deg; }
.cm-hero__deco > .cm-doodle--5 { --s: 82px; right: 5%; bottom: 7%; rotate: 20deg; }
.cm-hero__deco > .cm-doodle--6 { --s: 46px; left: 3%; top: 47%; rotate: -10deg; }
/* one doodle sticker stuck beside each section title */
.cm-sec-doodle { --s: 70px; top: calc(62% - var(--s) / 2); rotate: var(--cm-spin, 0deg); }
.cm-sec-doodle--r, .cm-sec-doodle--l { left: calc(100% + 28px); }
.cm-care { display: none; }

/* ---- washi tape marquee */
.cm-ribbon {
  margin: 0 -12px;
  padding: 13px 0 12px;
  rotate: 1.3deg;
  background:
    radial-gradient(circle, rgb(255 255 255 / 0.6) 1.8px, transparent 2.3px) 0 0 / 15px 15px,
    color-mix(in srgb, var(--st-p1) 84%, transparent);
  color: var(--st-ink);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cm-ribbon .wl-marquee__item { padding: 0 1.3em; }
.cm-ribbon .wl-marquee__item::after { content: "\2661"; margin-left: 2.6em; color: var(--st-pop-deep); letter-spacing: 0; }

/* ---- sections: number stickers, cooper titles on a highlighter stripe, perforations */
.wl-sec__head { max-width: 48rem; }
.wl-kicker { gap: 14px; margin-bottom: 20px; color: var(--st-ink); font-family: var(--v-font-body); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.2em; }
.wl-kicker .wl-ord {
  opacity: 1;
  display: inline-grid; place-items: center;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--st-p1);
  color: var(--st-ink);
  font-family: var(--v-font-display);
  font-size: 1.12rem;
  letter-spacing: 0;
  box-shadow: 0 0 0 5px #fff, var(--st-lift);
  rotate: -10deg;
}
.cm-flow .wl-sec:nth-child(4n+1) .wl-kicker .wl-ord { background: var(--st-p2); rotate: 8deg; }
.cm-flow .wl-sec:nth-child(4n+2) .wl-kicker .wl-ord { background: var(--st-p3); }
.cm-flow .wl-sec:nth-child(4n+3) .wl-kicker .wl-ord { background: var(--st-p4); rotate: 6deg; }
.cm-flow .wl-sec:nth-child(4n+4) .wl-kicker .wl-ord { background: var(--st-p5); }
.wl-sec__title {
  display: inline;
  padding: 0 0.08em;
  color: var(--st-ink);
  font-synthesis-weight: none;
  line-height: 1.12;
  background: linear-gradient(transparent 60%, var(--st-p3) 60% 90%, transparent 90%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.cm-flow .wl-sec::before {
  content: ""; position: absolute;
  left: clamp(30px, 4vw, 56px); right: clamp(30px, 4vw, 56px);
  top: calc(var(--v-sec-gap) * 0.5);
  border-top: 2px dashed var(--st-cut);
}
.cm-flow .wl-sec::after {
  content: "\2702"; position: absolute;
  left: calc(clamp(30px, 4vw, 56px) + 18px);
  top: calc(var(--v-sec-gap) * 0.5 - 14px);
  padding: 0 8px;
  background: var(--st-sheet);
  color: var(--v-faint);
  font-size: 22px;
  line-height: 1;
}

/* intro: a round pfp sticker with a HELLO name tag, the story beside it */
.cm-intro__frame {
  border: 12px solid #fff;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--st-lift-lg);
  outline: 2px dashed var(--st-cut);
  outline-offset: 9px;
  rotate: -5deg;
}
.cm-intro__img { border-radius: 50%; }
.cm-intro__tag {
  left: 50%; bottom: -54px;
  width: 232px;
  translate: -50% 0;
  rotate: 6deg;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  text-align: center;
  box-shadow: 0 0 0 5px #fff, var(--st-lift);
}
.cm-intro__hello { display: block; padding: 11px 8px 9px; background: var(--st-pop-deep); color: #fff; font-size: 0; }
.cm-intro__hello::before { content: "Hello"; display: block; font-family: var(--v-font-body); font-weight: 900; font-size: 1.95rem; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; }
.cm-intro__hello::after { content: "my name is"; display: block; margin-top: 4px; font-family: var(--v-font-body); font-weight: 800; font-size: 0.95rem; line-height: 1.1; }
.cm-intro__name { display: block; padding: 12px 12px 16px; color: var(--st-ink); font-family: var(--st-hand); font-size: 2rem; line-height: 1.15; }
.wl-lore { max-width: 40rem; }
.wl-lore__lead { font-family: var(--v-font-display); font-weight: 700; font-synthesis-weight: none; font-size: clamp(1.24rem, 1.8vw, 1.5rem); line-height: 1.4; color: var(--st-ink); }
.wl-lore__p { color: var(--v-soft); font-size: 1.08rem; font-weight: 600; }

/* features: pastel stickers, white borders, kiss-cut lines, a peeling corner */
.cm-page .wl-features { gap: 44px 34px; padding-top: 50px; }
.wl-feature {
  padding: 60px 26px 30px;
  border: 8px solid #fff;
  border-radius: 30px;
  background: var(--st-p1);
  box-shadow: var(--st-lift);
  outline: 2px dashed var(--st-cut);
  outline-offset: 7px;
  rotate: calc(var(--cm-tilt, 0) * 2.4deg);
  transition: rotate 0.9s var(--st-wobble), scale 0.6s var(--st-wobble), translate 0.4s var(--v-ease);
}
.wl-feature:nth-child(3n+2) { background: var(--st-p2); }
.wl-feature:nth-child(3n+3) { background: var(--st-p3); }
.wl-feature:hover { transform: none; border-color: #fff; rotate: calc(var(--cm-tilt, 0) * 2.4deg - 3deg); scale: 1.03; translate: 0 -4px; }
.wl-feature::after { right: -8px; bottom: -8px; --peel-r: 30px; }
.wl-feature__icon, .wl-feature__icon--img {
  position: absolute;
  top: -54px; left: 14px;
  width: 104px; height: 104px;
  margin: 0;
  border-radius: 50%;
  border: 6px solid #fff;
  background: #fff;
  color: var(--st-pop-deep);
  box-shadow: var(--st-lift);
  rotate: -8deg;
}
.wl-feature:nth-child(even) .wl-feature__icon { rotate: 7deg; }
.wl-feature__icon .wl-glyph { width: 46px; height: 46px; stroke-width: 2.2; }
.wl-feature .wl-ord { top: 20px; right: 24px; color: color-mix(in srgb, var(--st-ink) 42%, transparent); font-family: var(--v-font-display); font-size: 1.3rem; }
.wl-feature__title { margin-top: 12px; font-family: var(--v-font-display); font-weight: 700; font-synthesis-weight: none; font-size: 1.68rem; line-height: 1.06; color: var(--st-ink); }
.wl-feature__text { color: color-mix(in srgb, var(--st-ink) 82%, transparent); font-weight: 600; }

/* gallery: photo stickers, taped down, captions by hand */
.cm-page .wl-gallery { gap: 46px 34px; padding-top: 22px; }
.wl-shot {
  overflow: visible;
  padding: 12px 12px 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--st-lift);
  rotate: calc(var(--cm-tilt, 0) * 3.4deg);
  transition: rotate 0.9s var(--st-wobble), scale 0.6s var(--st-wobble);
}
.wl-shot img { border-radius: 6px; }
.wl-shot:hover img { transform: none; }
.wl-shot:hover { rotate: calc(var(--cm-tilt, 0) * 3.4deg + 2.5deg); scale: 1.03; }
.wl-shot::before {
  content: ""; position: absolute; z-index: 2;
  top: -16px; left: 50%;
  width: 116px; height: 32px;
  translate: -50% 0;
  rotate: calc(var(--cm-tilt, 0) * -9deg - 2deg);
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.4) 0 3px, transparent 3px 11px), color-mix(in srgb, var(--st-p3) 82%, transparent);
  -webkit-mask: var(--st-tape-mask);
  mask: var(--st-tape-mask);
}
.wl-shot:nth-child(3n+2)::before { background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.4) 0 3px, transparent 3px 11px), color-mix(in srgb, var(--st-p2) 82%, transparent); }
.wl-shot:nth-child(3n+3)::before { background: radial-gradient(circle, rgb(255 255 255 / 0.55) 1.6px, transparent 2px) 0 0 / 11px 11px, color-mix(in srgb, var(--st-p1) 82%, transparent); }
.wl-shot__caption {
  position: static;
  display: block;
  padding: 9px 6px 13px;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--st-ink);
  font-family: var(--st-hand);
  font-size: 1.2rem;
  text-align: center;
}

/* supply: a round chart sticker, legend and figures as labels */
.wl-infographic { gap: 44px; }
.wl-donut__chart { width: min(100%, 360px); }
.wl-donut__chart::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--st-lift-lg);
  outline: 2px dashed var(--st-cut);
  outline-offset: 9px;
}
.wl-donut__svg { position: relative; }
.wl-donut__ticks, .cm-sprinkles { display: none; }
.wl-donut__track { stroke: var(--st-sheet); stroke-width: 44; }
.wl-donut__seg { stroke-width: 44; }
.wl-donut__center { inset: 28%; }
.wl-donut__value { color: var(--st-ink); font-weight: 700; font-synthesis-weight: none; font-size: clamp(1.05rem, 1.9vw, 1.42rem); letter-spacing: 0; }
.wl-donut__label { color: var(--v-faint); font-family: var(--v-font-body); font-weight: 800; }
.wl-legend { gap: 18px; }
.wl-legend__item {
  padding: 14px 18px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  font-weight: 700;
  box-shadow: var(--st-lift);
  outline: 1.5px dashed var(--st-cut);
  outline-offset: 5px;
  rotate: calc(var(--cm-tilt, 0) * 1.6deg);
}
.wl-legend__swatch { width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--v-line); }
.wl-legend__value { font-family: var(--v-font-display); font-weight: 700; font-synthesis-weight: none; font-size: 1.3rem; }
.wl-stats { gap: 24px; background: none; border: 0; border-radius: 0; overflow: visible; }
.wl-stat { padding: 20px 22px; border: 6px solid #fff; border-radius: 20px; background: var(--st-p3); box-shadow: var(--st-lift); rotate: calc(var(--cm-tilt, 0) * 2deg); }
.wl-stat:nth-child(2n) { background: var(--st-p4); }
.wl-stat__value { color: var(--st-ink); font-weight: 700; font-synthesis-weight: none; }
.wl-stat__label { color: color-mix(in srgb, var(--st-ink) 70%, transparent); font-family: var(--v-font-body); font-weight: 800; }
.wl-caption { color: var(--v-soft); font-family: var(--st-hand); font-size: 1.1rem; }

/* facts: perforated stamps */
.cm-page .wl-facts { gap: 30px 32px; max-width: none; filter: var(--st-drop); }
.wl-fact {
  position: relative;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: center;
  padding: 28px 28px 28px 24px;
  border: 0;
  border-radius: 0;
  background: var(--st-p2);
  color: var(--st-ink);
  font-weight: 700;
  font-size: 1.08rem;
  rotate: calc(var(--cm-tilt, 0) * 1.8deg);
  -webkit-mask: var(--st-stamp-mask);
  -webkit-mask-composite: source-in, source-in, source-in;
  mask: var(--st-stamp-mask);
  mask-composite: intersect;
  transition: rotate 0.9s var(--st-wobble), scale 0.6s var(--st-wobble);
}
.wl-fact:nth-child(4n+2) { background: var(--st-p3); }
.wl-fact:nth-child(4n+3) { background: var(--st-p4); }
.wl-fact:nth-child(4n+4) { background: var(--st-p1); }
.wl-fact:hover { rotate: calc(var(--cm-tilt, 0) * 1.8deg - 2.5deg); scale: 1.03; }
.wl-fact::before { content: ""; position: absolute; inset: 11px; border: 2px solid rgb(255 255 255 / 0.8); pointer-events: none; }
.wl-fact__mark { width: 40px; height: 40px; background: #fff; color: var(--st-pop-deep); box-shadow: 0 2px 0 rgb(0 0 0 / 0.06); }
.wl-fact__text { position: relative; }

/* quotes: speech-bubble stickers */
.cm-page .wl-quotes { gap: 60px 34px; padding: 26px 0 30px; filter: var(--st-drop); }
.wl-quote {
  padding: 44px 28px 28px;
  border: 7px solid #fff;
  border-radius: 36px;
  background: var(--st-p4);
  rotate: calc(var(--cm-tilt, 0) * 2.2deg);
  transition: rotate 0.9s var(--st-wobble), scale 0.6s var(--st-wobble);
}
.wl-quote:nth-child(3n+2) { background: var(--st-p2); }
.wl-quote:nth-child(3n+3) { background: var(--st-p5); }
.wl-quote:hover { rotate: calc(var(--cm-tilt, 0) * 2.2deg + 3deg); scale: 1.03; }
.wl-quote::before {
  content: "\201C";
  top: -26px; left: 20px;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  padding-top: 0.34em;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--st-ink);
  color: #fff;
  font-family: var(--v-font-display);
  font-size: 2.7rem;
  box-shadow: 0 0 0 4px #fff;
  rotate: -8deg;
}
.wl-quote::after {
  content: ""; position: absolute;
  bottom: -25px; left: 44px;
  width: 36px; height: 36px;
  background: inherit;
  border-right: 7px solid #fff;
  border-bottom: 7px solid #fff;
  border-bottom-right-radius: 10px;
  rotate: 45deg;
}
.wl-quote:nth-child(even)::after { left: auto; right: 44px; }
.wl-quote__text { font-family: var(--v-font-display); font-weight: 700; font-synthesis-weight: none; font-size: 1.3rem; line-height: 1.34; color: var(--st-ink); }
.wl-quote__who { color: var(--v-soft); font-family: var(--st-hand); font-size: 1.04rem; }
.wl-quote__who::before { content: "\2014 "; }

/* faq: sticky notes, taped, every answer showing */
.cm-page .wl-faq { gap: 46px 30px; max-width: none; padding-top: 18px; }
.wl-qa {
  position: relative;
  border: 0;
  border-radius: 3px 3px 3px 26px;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.035), transparent 16%) var(--st-p3);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.1), 0 18px 20px -16px color-mix(in srgb, var(--st-ink) 60%, transparent);
  rotate: calc(var(--cm-tilt, 0) * 2.4deg);
  transition: rotate 0.9s var(--st-wobble), scale 0.6s var(--st-wobble);
}
.wl-qa:nth-child(3n+2) { background-color: var(--st-p1); }
.wl-qa:nth-child(3n+3) { background-color: var(--st-p2); }
.wl-qa:hover { rotate: calc(var(--cm-tilt, 0) * 2.4deg - 2.5deg); scale: 1.02; }
.wl-qa::before {
  content: ""; position: absolute; z-index: 1;
  top: -14px; left: 50%;
  width: 98px; height: 28px;
  translate: -50% 0;
  rotate: calc(var(--cm-tilt, 0) * 8deg - 2deg);
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.45) 0 3px, transparent 3px 10px), color-mix(in srgb, var(--st-p4) 80%, transparent);
  -webkit-mask: var(--st-tape-mask);
  mask: var(--st-tape-mask);
}
.wl-qa__q { align-items: flex-start; padding: 32px 22px 12px 24px; font-family: var(--v-font-display); font-weight: 700; font-synthesis-weight: none; font-size: 1.3rem; line-height: 1.16; color: var(--st-ink); }
.wl-qa__sign { width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; background: var(--st-ink); color: #fff; }
.wl-qa__sign::before, .wl-qa__sign::after { left: 7px; right: 7px; height: 2.5px; margin-top: -1.25px; border-radius: 2px; }
.wl-qa__a {
  margin: 0 24px 24px;
  padding: 0;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 600;
  color: color-mix(in srgb, var(--st-ink) 84%, transparent);
  background: repeating-linear-gradient(180deg, transparent 0 calc(1.6em - 1px), color-mix(in srgb, var(--st-ink) 14%, transparent) calc(1.6em - 1px) 1.6em);
}

/* access: a shipping label with the contract on it */
.wl-sec--access .wl-access {
  position: relative;
  max-width: 780px;
  gap: 20px;
  padding: 34px 34px 32px;
  border: 3px solid var(--st-ink);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 0 0 9px #fff, var(--st-lift-lg);
  outline: 2px dashed var(--st-cut);
  outline-offset: 16px;
  rotate: -1.2deg;
}
.wl-sec--access .wl-access::before {
  content: ""; position: absolute; top: 28px; right: 30px;
  width: 136px; height: 44px;
  background: repeating-linear-gradient(90deg, var(--st-ink) 0 3px, transparent 3px 5px, var(--st-ink) 5px 6px, transparent 6px 9px, var(--st-ink) 9px 13px, transparent 13px 15px, var(--st-ink) 15px 16px, transparent 16px 20px);
  opacity: 0.85;
}
.wl-access__net { padding-right: 160px; color: var(--st-ink); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.2em; }
.wl-ca {
  gap: 14px;
  padding: 12px 12px 12px 20px;
  border: 2px dashed var(--st-cut);
  border-radius: 14px;
  background: var(--st-p3);
}
.wl-ca__label { color: color-mix(in srgb, var(--st-ink) 72%, transparent); font-weight: 800; }
.wl-ca__value { color: var(--st-ink); font-weight: 600; }
.wl-ca .wl-copy {
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--st-ink);
  color: #fff;
  box-shadow: 0 0 0 4px #fff, var(--st-lift);
  rotate: -3deg;
  transition: rotate 0.8s var(--st-wobble), scale 0.6s var(--st-wobble);
}
.wl-ca .wl-copy:hover { rotate: 3deg; scale: 1.06; }
.wl-links { gap: 18px; }
.wl-link {
  padding: 13px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--st-p2);
  color: var(--st-ink);
  font-weight: 800;
  box-shadow: 0 0 0 4px #fff, var(--st-lift);
  rotate: calc(var(--cm-tilt, 0) * 3deg);
  transition: rotate 0.9s var(--st-wobble), scale 0.6s var(--st-wobble);
}
.wl-link:nth-child(4n+2) { background: var(--st-p1); }
.wl-link:nth-child(4n+3) { background: var(--st-p3); }
.wl-link:nth-child(4n+4) { background: var(--st-p4); }
.wl-link:hover { transform: none; border-color: transparent; rotate: calc(var(--cm-tilt, 0) * 3deg - 4deg); scale: 1.06; }

/* timeline, flow, post: sticker versions for briefs that carry them */
.wl-ms__body { padding: 16px 20px; border: 6px solid #fff; border-radius: 18px; background: var(--st-p2); box-shadow: var(--st-lift); }
.wl-ms:nth-child(even) .wl-ms__body { background: var(--st-p3); }
.wl-milestones::before { background: repeating-linear-gradient(180deg, var(--st-cut) 0 7px, transparent 7px 13px); }
.wl-ms__ring { fill: #fff; stroke: var(--st-ink); stroke-width: 2.4; }
.wl-ms__core { fill: var(--st-pop); }
.wl-ms__when { color: var(--st-pop-deep); font-weight: 800; }
.wl-ms__title { font-family: var(--v-font-display); font-weight: 700; font-synthesis-weight: none; color: var(--st-ink); }
.wl-node__card { border: 7px solid #fff; border-radius: 24px; background: var(--st-p1); box-shadow: var(--st-lift); rotate: calc(var(--cm-tilt, 0) * 2deg); }
.wl-node:nth-child(3n+2) .wl-node__card { background: var(--st-p2); }
.wl-node:nth-child(3n+3) .wl-node__card { background: var(--st-p3); }
.wl-node__card .wl-ord { background: var(--st-ink); color: #fff; box-shadow: 0 0 0 4px #fff; }
.wl-node__title { font-family: var(--v-font-display); font-weight: 700; font-synthesis-weight: none; }
.wl-edge__line, .wl-edge__head { stroke: var(--st-ink); }
.wl-post { border: 8px solid #fff; border-radius: 28px; background: var(--st-p4); box-shadow: var(--st-lift-lg); outline: 2px dashed var(--st-cut); outline-offset: 8px; }
.wl-table-wrap { border: 7px solid #fff; border-radius: 20px; background: var(--st-p3); box-shadow: var(--st-lift); }

/* footer: the sheet's small print */
.cm-footer { margin: 0 clamp(28px, 4vw, 56px); padding: 30px 0 42px; border-top: 2px dashed var(--st-cut); }
.wl-foot__name { font-family: var(--v-font-display); font-weight: 700; font-synthesis-weight: none; font-size: 1.5rem; color: var(--st-ink); }
.wl-foot__net, .wl-foot__nfa { color: var(--v-faint); font-weight: 600; }
.wl-foot .wl-link { padding: 9px 15px; font-size: 0.86rem; box-shadow: 0 0 0 3px #fff, var(--st-lift); }

/* ---- motion: stickers slap on, then wobble gently */
@keyframes st-slap {
  0% { opacity: 0; transform: scale(1.5) translateY(-10px); }
  55% { opacity: 1; transform: scale(0.94); }
  78% { transform: scale(1.025); }
  100% { opacity: 1; transform: none; }
}
@keyframes st-wobble {
  0%, 100% { rotate: calc(var(--cm-box-r) - 1.3deg); }
  50% { rotate: calc(var(--cm-box-r) + 1.3deg); }
}
/* every entrance lands within 1.5s, so a first-screen snapshot never catches one mid-air */
.cm-word, .cm-box, .cm-bouncer, .cm-hero__stage > .cm-sticker, .cm-doodle, .cm-chip, .cm-box__burst {
  animation: st-slap 0.6s var(--v-ease) both;
}
.cm-word { animation-delay: 0s; }
.cm-box { animation-delay: 0.1s; }
.cm-chip { animation-delay: 0.16s; }
.cm-bouncer { animation-delay: 0.3s; }
.cm-box__burst { animation-delay: 0.36s; }
.cm-hero__stage > .cm-sticker--2 { animation-delay: 0.42s; }
.cm-hero__stage > .cm-sticker--3 { animation-delay: 0.5s; }
.cm-hero__stage > .cm-sticker--4 { animation-delay: 0.58s; }
.cm-doodle--1 { animation-delay: 0.62s; }
.cm-doodle--2 { animation-delay: 0.68s; }
.cm-doodle--3 { animation-delay: 0.74s; }
.cm-doodle--4 { animation-delay: 0.8s; }
.cm-doodle--5 { animation-delay: 0.86s; }
.cm-doodle--6 { animation-delay: 0.92s; }
.wl-hero-wobble .cm-box { animation: st-slap 0.6s var(--v-ease) 0.1s both, st-wobble 4.8s ease-in-out 1s infinite; }

/* ---- phone */
@media (max-width: 900px) {
  :root { --cm-page-mx: 10px; --cm-page-my: 10px; --cm-top-h: 78px; --cm-hero-pad: 0 20px 34px; --cm-box-w: 82%; }
  .cm-page { border-radius: 28px; }
  .cm-page::before { inset: 8px; border-radius: 22px; }
  .cm-top { padding: 0 20px; }
  .cm-hero__word { margin: 4px 0 6px; }
  .cm-word { font-size: clamp(3.6rem, 19vw, 8rem); }
  .cm-hero__copy { padding-top: 8px; }
  .cm-hero__deco > .cm-doodle--1, .cm-hero__deco > .cm-doodle--2, .cm-hero__deco > .cm-doodle--4, .cm-hero__deco > .cm-doodle--6 { display: none; }
  .cm-hero__deco > .cm-doodle--3 { right: 5%; top: auto; bottom: 30%; }
  .cm-hero__deco > .cm-doodle--5 { --s: 64px; bottom: 2%; }
  .cm-sec-doodle { --s: 50px; top: -6px; }
  .cm-sec-doodle--r, .cm-sec-doodle--l { left: auto; right: -12px; }
  .cm-intro__portrait { width: min(78%, 330px); margin-bottom: 40px; }
  .cm-flow .wl-sec::before, .cm-flow .wl-sec::after { left: 22px; }
  .cm-flow .wl-sec::before { right: 22px; }
}
@media (max-width: 560px) {
  :root { --cm-s1-w: 36%; --cm-s2-w: 30%; --cm-s3-w: 25%; --cm-s3-y: 16%; --cm-s4-w: 24%; }
  .wl-btn { padding: 12px 16px; font-size: 0.93rem; }
  .cm-hero__cta { gap: 14px 12px; }
  .cm-page .wl-features { row-gap: 70px; }
  .cm-brand__tick { display: none; }
  .cm-brand__name { font-size: 1.3rem; }
  .cm-brand__mark { width: 46px; height: 46px; }
  .cm-top__get { padding: 11px 16px; font-size: 0.9rem; }
  .cm-box__burst { width: 76px; height: 76px; left: -20px; font-size: 0.86rem; }
  .cm-box__tab { width: 110px; height: 30px; top: -15px; }
  .wl-sec--access .wl-access { padding: 26px 20px 24px; rotate: 0deg; outline-offset: 10px; }
  .wl-sec--access .wl-access::before { width: 90px; height: 34px; top: 22px; right: 18px; }
  .wl-access__net { padding-right: 100px; }
  .wl-ca { padding: 14px; }
}