/* thefinishedapp.com: the sticker sheet.
   The whole page is a die-cut sticker sheet. Each section is a sheet drenched in one colour
   (violet, paper, mint, ink, peach) and everything sitting on it is a kiss-cut sticker: a
   white border, a soft offset shadow, a degree or two of tilt, a corner that peels on hover.
   The real phone is the one object on the page that is not a sticker.
   Colours and type come from the app (design/Brand.dc.html). */

:root {
  --paper: #FBF7F2;
  --ink: #1F1A2E;
  --ink-soft: #3B3550;
  --muted: #6E6880;
  --violet: #6B3BF5;
  --lilac: #D9C8FF;
  --mint: #BFEBD3;
  --peach: #FFD6C4;
  --border: #E6DED4;
  --night: #14111F;

  --kiss: 6px;                     /* the white border round every sticker */
  --curl: 28px;                    /* how far a corner peels on hover */
  --sticker-radius: 26px;
  --shadow-rest: 0 10px 26px -18px rgba(31, 26, 46, .55), 0 2px 6px -4px rgba(31, 26, 46, .22);
  --shadow-lift: 0 22px 44px -22px rgba(31, 26, 46, .6), 0 4px 10px -6px rgba(31, 26, 46, .25);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-land: cubic-bezier(.2, 1.35, .3, 1);
  --gutter: max(20px, calc(50% - 540px));   /* content column 1080 wide, centred */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--violet);
  color: var(--paper);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
  accent-color: var(--violet);
}
::selection { background: var(--ink); color: var(--paper); }
.sheet-ink ::selection, .sheet-violet ::selection { background: var(--paper); color: var(--ink); }
.sticker ::selection { background: var(--violet); color: var(--paper); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 999px; }
.sheet-ink :focus-visible, .sheet-violet :focus-visible { outline-color: var(--paper); }
.sticker :focus-visible { outline-color: var(--violet); }

h1, h2, h3, .mark, .n, .price {
  font-family: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin: 0;
}
p { margin: 0; }
a { color: inherit; }

/* ---------- sheets ---------- */
/* A section owns its ground from edge to edge. The faint diagonal is the scoring on the
   backing of a real sticker sheet. Content sits in a 1080 column through the padding. */
.sheet {
  position: relative;
  padding: clamp(56px, 8vw, 112px) var(--gutter);
  background-color: var(--sheet, var(--paper));
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(45deg, rgba(31,26,46,.04) 0 1px, transparent 1px 26px);
  color: var(--sheet-ink, var(--ink));
}
.sheet-violet { --sheet: var(--violet); --sheet-ink: var(--paper); --sheet-muted: rgba(251,247,242,.72); }
.sheet-paper  { --sheet: var(--paper);  --sheet-ink: var(--ink);   --sheet-muted: var(--muted); }
.sheet-mint   { --sheet: var(--mint);   --sheet-ink: var(--ink);   --sheet-muted: #3E6A55; }
.sheet-peach  { --sheet: var(--peach);  --sheet-ink: var(--ink);   --sheet-muted: #8A5638; }
.sheet-ink    { --sheet: var(--night);  --sheet-ink: var(--paper); --sheet-muted: #A49CBC; }
/* the perforation between two sheets */
.sheet + .sheet, .marquee + .sheet { border-top: 2px dashed rgba(255,255,255,.4); }
.sheet-paper + .sheet, .marquee + .sheet-paper { border-top-color: rgba(31,26,46,.16); }

/* ---------- stickers ---------- */
.sticker {
  position: relative;
  background: var(--fill, var(--paper));
  color: var(--ink);
  border-radius: var(--sticker-radius);
  box-shadow: 0 0 0 var(--kiss) #fff, var(--shadow-rest);
  transform: rotate(var(--tilt, 0deg));
  overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.sticker-paper  { --fill: var(--paper); }
.sticker-lilac  { --fill: var(--lilac); }
.sticker-mint   { --fill: var(--mint); }
.sticker-peach  { --fill: var(--peach); }
.sticker-violet { --fill: var(--violet); color: var(--paper); }
.tilt-l { --tilt: -1.6deg; }
.tilt-r { --tilt: 1.4deg; }

/* The peel. The top right corner lifts: the sheet shows through the cut and the back of the
   sticker folds over it. The hero sticker is already lifting a little before you touch it. */
.sticker::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: var(--curl); height: var(--curl);
  background: linear-gradient(to bottom left, var(--sheet, var(--violet)) 50%, #EFE9E0 50%, #FFFFFF 88%);
  transform: scale(0);
  transform-origin: top right;
  transition: transform .35s var(--ease-out);
  pointer-events: none;
}
.sticker:hover, .sticker:focus-within {
  transform: rotate(var(--tilt, 0deg)) translateY(-4px) scale(1.012);
  box-shadow: 0 0 0 var(--kiss) #fff, var(--shadow-lift);
}
.sticker:hover::after, .sticker:focus-within::after { transform: scale(1); }
.hero-words::after { transform: scale(.64); }

/* A small sticker used as a label. It sits on the sheet as a real object with its own cut
   edge, never a kicker floating over a heading. */
.tag {
  display: inline-block;
  width: fit-content;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
  box-shadow: 0 0 0 3px #fff, 0 6px 14px -10px rgba(31,26,46,.6);
  transform: rotate(-2deg);
}
.tag-violet { background: var(--violet); color: var(--paper); }
.tag-paper  { background: var(--paper);  color: var(--ink); }
.tag-mint   { background: var(--mint);   color: var(--ink); }
.tag-ink    { background: var(--ink);    color: var(--paper); }

/* ---------- peel-tab buttons ---------- */
/* A tab: square where it meets the sheet, round where you pull. Hover lifts it from the left. */
.peel {
  --tab: var(--ink);
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  height: 56px; padding: 0 28px;
  background: var(--tab); color: var(--paper);
  font: inherit; font-weight: 700;
  text-decoration: none;
  border: 0;
  border-radius: 16px 999px 999px 16px;
  box-shadow: 0 0 0 3px #fff, 0 10px 24px -14px rgba(31,26,46,.7);
  cursor: pointer;
  transform-origin: left center;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.peel:hover { transform: rotate(-3deg) translateY(-2px); box-shadow: 0 0 0 3px #fff, 0 18px 34px -16px rgba(31,26,46,.7); }
.peel:active { transform: rotate(-1deg); }
.peel:disabled { opacity: .6; cursor: default; transform: none; }
.peel span { transition: transform .3s var(--ease-out); }
.peel:hover span { transform: translateX(4px); }
/* The one foil edge on the page: the primary action, a holographic stroke round the tab. */
.foil {
  border: 4px solid transparent;
  background:
    linear-gradient(var(--tab), var(--tab)) padding-box,
    conic-gradient(from 210deg, #FFB199, #7FE0B0, #B79CFF, #FFE85C, #7FD6FF, #FFB199) border-box;
  box-shadow: 0 0 0 1px #fff, 0 10px 24px -14px rgba(31,26,46,.7);
}
.foil:hover { box-shadow: 0 0 0 1px #fff, 0 18px 34px -16px rgba(31,26,46,.7); }

/* ---------- the bar ---------- */
/* Two stickers stuck to the top of the sheet. They ride along as you scroll. */
.bar {
  position: sticky; top: 0; z-index: 20;
  padding: 16px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.mark {
  --tilt: -2deg; --curl: 12px;
  font-size: 24px; color: var(--ink); text-decoration: none; letter-spacing: -0.05em;
  padding: 6px 14px 8px;
  border-radius: 14px;
  line-height: 1.1;
}
.mark span { color: var(--violet); }
.nav-cta { height: 44px; padding: 0 20px; font-size: 14px; }

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  grid-template-rows: auto auto;
  column-gap: clamp(24px, 5vw, 64px);
  align-items: center;
  padding-top: 8px;
  padding-bottom: 28px;
  overflow: hidden;
}
.hero-words {
  padding: clamp(26px, 3.4vw, 40px) clamp(24px, 3.6vw, 44px) clamp(26px, 3.4vw, 38px);
  display: flex; flex-direction: column; gap: 18px;
}
.hero-words .tag { margin-top: 4px; }
.hero h1 {
  font-size: clamp(50px, 8vw, 88px);
  line-height: .92;
  color: var(--ink);
}
/* a violet sticker inside the paper one */
.hero h1 em {
  font-style: normal;
  display: inline-block;
  white-space: nowrap;
  background: var(--violet);
  color: var(--paper);
  padding: 0 .18em .06em;
  border-radius: .18em;
  box-shadow: 0 0 0 4px #fff, 0 10px 22px -14px rgba(31,26,46,.6);
  transform: rotate(-2.4deg) translateY(.04em);
}
.lede { font-size: 19px; max-width: 46ch; color: inherit; opacity: .86; }
.sticker .lede { color: var(--ink-soft); opacity: 1; }
.sticker-violet .lede { color: var(--paper); }
.under { font-size: 14px; color: var(--muted); }

/* ---------- the phone, and the loop it plays ---------- */
.phone {
  position: relative;
  justify-self: center;
  width: min(300px, 76vw);
  border-radius: 46px;
  padding: 11px;
  background: linear-gradient(160deg, #2b2440, #16121f 55%, #322a4a);
  box-shadow: 0 50px 80px -34px rgba(20, 17, 31, .85), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.phone::after {
  content: "";
  position: absolute;
  top: 20px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 26px; border-radius: 999px; background: #0d0b14;
  z-index: 4;
}
.screen {
  position: relative;
  aspect-ratio: 690 / 1500;        /* the screenshots' own shape: overlays measured in % of it stay true */
  border-radius: 36px;
  overflow: hidden;
  background: var(--night);
}
.stage {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .38s ease;
  pointer-events: none;
}
.stage.on { opacity: 1; }
.stage.shot, .stage .shot { width: 100%; height: 100%; object-fit: cover; display: block; }
.stage[data-stage="1"] { background: radial-gradient(120% 80% at 50% 10%, #2a2340, #14111f 70%); }
.stage[data-stage="2"], .stage[data-stage="5"], .stage[data-stage="6"] { background: #FBF8F2; }
.stage.feed { overflow: hidden; }

/* The stars, drawn over the real row. The strip carries the sheet's own colour, sampled
   from the screenshot, so the join cannot be seen. */
.stars {
  position: absolute;
  left: 42.6%; top: 55.4%;
  width: 52%; height: 4.4%;
  display: flex; align-items: center; justify-content: space-between;
  background: #FBF8F2;
}
.stars svg { width: 17%; height: auto; aspect-ratio: 1; fill: #DCD4E4; transition: fill .18s ease; }
.stars svg.lit { fill: var(--violet); }
.stars svg.last { animation: star-pop .55s cubic-bezier(.2,1.4,.3,1); }
@keyframes star-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.38); }
  100% { transform: scale(1); }
}

/* The review, typed into the real box. */
.words {
  position: absolute;
  left: 6.5%; top: 60.4%;
  width: 87.3%; height: 14%;
  background: #fff;
  padding: 3% 4%;
  font-size: clamp(7px, 1.4vw, 11px);
  line-height: 1.45;
  color: #1F1A2E;
  overflow: hidden;
}
.words b { font-weight: 400; }
.caret {
  display: inline-block;
  width: 1.5px; height: 1em;
  background: var(--violet);
  vertical-align: -0.16em;
  animation: blink 1s steps(1) infinite;
}
.caret.gone { display: none; }
@keyframes blink { 50% { opacity: 0; } }

/* Whatever the demo taps next lights up, so it is obvious what was pressed. */
.tapper {
  position: absolute;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  background: rgba(255,255,255,.35);
  box-shadow: 0 0 0 0 rgba(107,59,245,.55);
}
[data-tap="update"] { left: 5.2%; top: 85.1%; width: 89.4%; height: 5.7%; }
[data-tap="share"]  { left: 5.1%; top: 69%;   width: 89.5%; height: 5.7%; }
[data-tap="story"]  { left: 2.8%; top: 90.9%; width: 39.4%; height: 4.3%; }
[data-tap="find"]   { left: 6%;   top: 59.4%; width: 88%;   height: 5.6%; }
.tapper.hit { animation: hit .75s ease-out; }
@keyframes hit {
  0%   { opacity: 0; box-shadow: 0 0 0 0 rgba(107,59,245,.6); }
  25%  { opacity: 1; }
  100% { opacity: 0; box-shadow: 0 0 0 16px rgba(107,59,245,0); }
}

/* The feed: two real screens. The first post lands with a pulse, then the thumb scrolls. */
.stage.feed img { position: absolute; top: 0; left: 0; width: 100%; transition: opacity .5s ease, transform 1.6s cubic-bezier(.4,0,.2,1); }
.stage.feed .feed-2 { opacity: 0; }
.stage.feed.scrolled .feed-1 { opacity: 0; transform: translateY(-6%); }
.stage.feed.scrolled .feed-2 { opacity: 1; }
.popper {
  position: absolute;
  left: 4%; top: 20%; width: 92%; height: 46%;
  border-radius: 20px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(107,59,245,.5);
}
.popper.pop { animation: post-pop 1.5s cubic-bezier(.2,1.2,.3,1); }
@keyframes post-pop {
  0%   { opacity: 0; transform: scale(.9); box-shadow: 0 0 0 0 rgba(107,59,245,.55); }
  18%  { opacity: 1; transform: scale(1.04); box-shadow: 0 0 0 4px rgba(107,59,245,.55); }
  42%  { transform: scale(.99); box-shadow: 0 0 0 4px rgba(107,59,245,.4); }
  60%  { transform: scale(1.01); box-shadow: 0 0 0 10px rgba(107,59,245,.16); }
  100% { opacity: 0; transform: scale(1); box-shadow: 0 0 0 20px rgba(107,59,245,0); }
}

/* the finder, inside the hero loop */
.stage[data-stage="6"] .shot { position: absolute; inset: 0; opacity: 0; transition: opacity .28s ease; }
.stage[data-stage="6"] .find-a { opacity: 1; }
.stage[data-stage="6"].picked .find-a { opacity: 0; }
.stage[data-stage="6"].picked .find-b { opacity: 1; }
.stage[data-stage="6"].answered .find-b { opacity: 0; }
.stage[data-stage="6"].answered .find-c { opacity: 1; }

.in-frame {
  position: absolute;
  top: 50%; left: 50%;
  width: 62%;
  transform: translate(-50%, -52%) rotate(-2deg);
  border-radius: 6px;
  box-shadow: 0 24px 40px -18px rgba(0,0,0,.7);
}
.bracket { position: absolute; width: 26px; height: 26px; border: 3px solid var(--mint); }
.bracket.tl { top: 58px; left: 26px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.bracket.tr { top: 58px; right: 26px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.bracket.bl { bottom: 96px; left: 26px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.bracket.br { bottom: 96px; right: 26px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.pill {
  position: absolute;
  top: 66px; left: 50%; transform: translateX(-50%);
  background: var(--mint); color: #1F1A2E;
  font-size: 12px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px;
}
.shutter {
  position: absolute;
  bottom: 34px; left: 50%; transform: translateX(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: #FBF7F2;
  box-shadow: 0 0 0 4px rgba(251,247,242,.25);
  transition: transform .18s ease;
}
[data-demo].flashing .shutter { transform: translateX(-50%) scale(.82); }
.flash {
  position: absolute; inset: 11px; border-radius: 36px;
  background: #fff; opacity: 0; pointer-events: none; z-index: 3;
  transition: opacity .25s ease;
}
[data-demo].flashing .flash { opacity: .85; }

/* The seven beats: a fixed row of small paper stickers under the phone. The live one is ink. */
.beats {
  grid-column: 2;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 6px;
  align-self: start;
}
.beats li {
  font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  color: var(--ink);
  background: var(--paper);
  border-radius: 999px;
  padding: 6px 10px;
  box-shadow: 0 0 0 3px #fff, 0 6px 14px -10px rgba(31,26,46,.6);
  transform: rotate(var(--r, 0deg));
  transition: background .3s ease, color .3s ease, transform .3s var(--ease-out);
}
.beats li:nth-child(odd) { --r: -1.5deg; }
.beats li:nth-child(even) { --r: 1.2deg; }
.beats li.on { background: var(--ink); color: var(--paper); transform: rotate(0deg) scale(1.06); }

/* ---------- the chart: the hero sheet's bottom edge ---------- */
/* Today's UK top 50, each title a small paper sticker, sliding along the sheet. */
.marquee {
  position: relative;
  background: var(--violet);
  padding: 8px 0 30px;
  overflow: hidden;
}
.marquee-label { position: absolute; left: var(--gutter); top: 8px; z-index: 2; transform: rotate(-3deg); }
.marquee .track {
  display: flex; align-items: center; gap: 10px; width: max-content;
  padding-top: 34px;
  animation: slide 70s linear infinite;
  white-space: nowrap;
}
.marquee .track span {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800; font-size: 17px; letter-spacing: -0.02em;
  color: var(--ink);
  background: var(--paper);
  padding: 8px 14px 9px;
  border-radius: 999px;
  box-shadow: 0 0 0 3px #fff, 0 6px 14px -10px rgba(31,26,46,.6);
  transform: rotate(var(--r, -1deg));
}
.marquee .track span:nth-child(4n+1) { --r: -1.8deg; }
.marquee .track span:nth-child(4n+3) { --r: 1.4deg; }
/* the dot between titles is a gap in the sheet, not a sticker */
.marquee .track span:nth-child(even) { background: transparent; box-shadow: none; color: var(--lilac); padding: 8px 2px; transform: none; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- section heads ---------- */
.section-head { font-size: clamp(32px, 5.2vw, 54px); line-height: 1; }
.fine, .small { color: var(--sheet-muted, var(--muted)); }

/* ---------- four seconds, start to shelf ---------- */
.loop { display: flex; flex-direction: column; gap: 16px; }
.steps {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 30px 24px;
}
.steps li {
  padding: 30px 24px 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.steps .n {
  font-size: clamp(60px, 7vw, 84px); line-height: .8; letter-spacing: -0.05em;
  color: var(--ink); opacity: .1;
  position: absolute; right: 14px; top: 10px;
}
.steps h3 { font-size: 25px; }
.steps p { font-size: 15px; color: var(--ink-soft); }

/* ---------- the card wall ---------- */
/* The eight card tints as a swatch row. Hover one and the wall's backing takes that colour. */
.wall { --wall-tint: var(--lilac); display: flex; flex-direction: column; gap: 26px; }
.wall-words { display: flex; flex-direction: column; gap: 14px; }
.swatches {
  display: flex; gap: 10px; flex-wrap: wrap;
  width: fit-content;
  padding: 12px 14px;
  background: var(--paper);
  border-radius: 999px;
  box-shadow: 0 0 0 var(--kiss) #fff, var(--shadow-rest);
  transform: rotate(-1deg);
}
.swatches button {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid #fff;
  padding: 0;
  background: var(--tint, #ccc);
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(31,26,46,.14);
  transition: transform .25s var(--ease-out), box-shadow .25s;
}
.swatches button:nth-child(1) { --tint: #D9C8FF; }
.swatches button:nth-child(2) { --tint: #BFEBD3; }
.swatches button:nth-child(3) { --tint: #FFD6C4; }
.swatches button:nth-child(4) { --tint: #FBF7F2; }
.swatches button:nth-child(5) { --tint: #1F1A2E; }
.swatches button:nth-child(6) { --tint: #6B3BF5; }
.swatches button:nth-child(7) { --tint: #E9DCC3; }
.swatches button:nth-child(8) { --tint: #CFE4FF; }
.swatches button:hover, .swatches button.on { transform: scale(1.2); box-shadow: 0 0 0 2px var(--ink); }
.swatches button:focus-visible { outline-offset: 2px; }
.cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.8vw, 34px);
  padding: clamp(24px, 3.2vw, 40px);
  border-radius: 34px;
  background: var(--wall-tint);
  box-shadow: 0 0 0 var(--kiss) #fff, var(--shadow-rest);
  transition: background .5s ease;
}
.cards img {
  width: 100%;
  aspect-ratio: 9 / 16;           /* the card's shape, held before the picture arrives */
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 0 0 var(--kiss) #fff, var(--shadow-rest);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.cards img:hover { transform: rotate(0deg) translateY(-8px) scale(1.03); box-shadow: 0 0 0 var(--kiss) #fff, var(--shadow-lift); }

/* ---------- the finder ---------- */
.finder {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.finder-words { display: flex; flex-direction: column; gap: 18px; }
.finder-lede { font-size: 17px; }
.finder-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
/* the live step is a paper sticker stuck on the ink; the others are the cut lines waiting */
.finder-steps li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(251,247,242,.05);
  box-shadow: 0 0 0 2px rgba(251,247,242,.14);
  transition: background .35s ease, box-shadow .35s ease, transform .35s var(--ease-out), color .35s ease;
}
.finder-steps li.on { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 var(--kiss) #fff, var(--shadow-rest); transform: rotate(-1deg) translateX(4px); }
.finder-steps span {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px;
  background: rgba(251,247,242,.14); color: var(--paper);
  font-size: 13px; font-weight: 700;
  display: grid; place-items: center;
  transition: background .35s ease, color .35s ease;
}
.finder-steps li.on span { background: var(--violet); }
.finder-steps strong { display: block; font-size: 16px; }
.finder-steps p { font-size: 14px; color: #CFC8E4; margin-top: 2px; transition: color .35s ease; }
.finder-steps li.on p { color: var(--ink-soft); }
.finder .fine { font-size: 13px; }

.finder-demo { justify-self: center; width: min(300px, 74vw); }
.demo-screen {
  position: relative;
  aspect-ratio: 690 / 1500;
  border-radius: 34px;
  overflow: hidden;
  background: #FBF8F2;
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.1);
}
.demo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .22s ease; }
.demo.on, .demo[data-frame="1"] { opacity: 1; }   /* the first frame shows before the demo starts */
/* The words typed into the real text field. */
.ask-box {
  position: absolute;
  left: 6%; top: 49.6%;
  width: 88%; height: 6.2%;
  background: #fff;
  padding: 1.5% 4%;
  display: flex; align-items: center;
  font-size: clamp(7px, 1.35vw, 11px);
  color: #1F1A2E;
  opacity: 0;
  overflow: hidden;
}
.ask-box.on { opacity: 1; }
.ask-box b { font-weight: 400; white-space: nowrap; }
/* The finger, moved to each cover as it is ticked. */
.finger {
  position: absolute;
  width: 9%; aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(107,59,245,.28);
  border: 2px solid var(--violet);
  top: 35.6%; left: 7%;
  opacity: 0;
  transition: left .42s cubic-bezier(.3,.8,.3,1), transform .16s ease, opacity .3s ease;
}
.finger.on { opacity: 1; }
.finger.press { transform: scale(.72); }
.find-tap { left: 6%; top: 59.4%; width: 88%; height: 5.6%; border-radius: 999px; }

/* ---------- and the rest of it ---------- */
.more { display: flex; flex-direction: column; gap: 28px; }
.more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); grid-auto-flow: dense; gap: 28px 22px; }
/* four of the eight are cut wider, so the sheet reads as stickers of different sizes */
.more article:nth-child(1), .more article:nth-child(4), .more article:nth-child(5), .more article:nth-child(8) { grid-column: span 2; padding: 28px 26px 30px; }
.more article:nth-child(1) h3, .more article:nth-child(4) h3, .more article:nth-child(5) h3, .more article:nth-child(8) h3 { font-size: 27px; }
.more article:nth-child(1) p, .more article:nth-child(4) p, .more article:nth-child(5) p, .more article:nth-child(8) p { font-size: 16px; max-width: 40ch; }
.more article {
  padding: 24px 22px 26px;
  display: flex; flex-direction: column; gap: 8px;
}
.more article:nth-child(1) { --fill: var(--lilac); --tilt: -1.2deg; }
.more article:nth-child(2) { --fill: var(--paper); --tilt: 1.6deg; }
.more article:nth-child(3) { --fill: var(--peach); --tilt: -1deg; }
.more article:nth-child(4) { --fill: var(--mint);  --tilt: .9deg; }
.more article:nth-child(5) { --fill: var(--paper); --tilt: -1.4deg; }
.more article:nth-child(6) { --fill: var(--lilac); --tilt: 1.2deg; }
.more article:nth-child(7) { --fill: var(--mint);  --tilt: -1.6deg; }
.more article:nth-child(8) { --fill: var(--peach); --tilt: 1deg; }
.more h3 { font-size: 20px; }
.more p { font-size: 15px; color: var(--ink-soft); }

/* ---------- what it costs ---------- */
.plans {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 32px 0;
  align-items: start;
}
/* the paid sticker lies on top; the free one's short lines never reach the join */
.plan.free { align-self: end; margin: 56px -28px 0 0; z-index: 1; }
.plan.paid { margin: 0 0 24px 0; z-index: 2; }
.plans-head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 14px; max-width: 46ch; }
.plan {
  padding: 32px 28px 34px;
  display: flex; flex-direction: column; gap: 16px;
}
.plan .price {
  font-size: clamp(46px, 6vw, 64px); line-height: 1; letter-spacing: -0.04em;
  display: flex; flex-direction: column; gap: 6px;
}
.plan .price span { font-family: "DM Sans", sans-serif; font-weight: 500; font-size: 14px; letter-spacing: 0; opacity: .82; }
.plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 16px; }
.plan li { padding-left: 26px; position: relative; }
.plan li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 12px; height: 6px;
  border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: rotate(-45deg); opacity: .85;
}
.plan.free li::before { color: var(--violet); }
/* the 7 days free ribbon: a strip of mint sticker across the bottom corner */
.plan.paid::before {
  content: "7 days free";
  position: absolute; bottom: 30px; right: -40px;
  transform: rotate(-38deg);
  background: var(--mint); color: var(--ink);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  padding: 7px 46px;
  box-shadow: 0 0 0 3px #fff;
}
.plan .note { font-size: 13px; opacity: .82; margin-top: auto; }

/* ---------- the waitlist ---------- */
.waitlist {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-rows: auto auto auto;
  column-gap: clamp(28px, 5vw, 60px);
  row-gap: 16px;
  align-items: start;
  align-content: center;
}
.waitlist h2 { grid-column: 1; font-size: clamp(36px, 5.6vw, 60px); line-height: .96; }
.waitlist > .lede { grid-column: 1; }
.waitlist form, .waitlist #done { grid-column: 2; grid-row: 1 / span 3; padding: 30px 28px 32px; display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: 13px; font-weight: 700; }
input[type="email"] {
  font: inherit;
  padding: 15px 18px;
  border-radius: 16px;
  border: 2px solid var(--border);
  background: #fff;
  color: var(--ink);
  width: 100%;
  caret-color: var(--violet);
}
input[type="email"]:focus-visible { outline: 3px solid var(--violet); outline-offset: 1px; border-radius: 16px; }
.choices { border: 0; padding: 0; margin: 0; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.choices legend { font-size: 13px; font-weight: 700; padding: 0 0 6px; }
.choices label, .tick { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.tick { align-items: flex-start; gap: 10px; }
.tick span { color: var(--ink-soft); font-size: 15px; }
input[type="radio"], input[type="checkbox"] { width: 18px; height: 18px; margin: 0; }
.waitlist .small { font-size: 13px; color: var(--muted); max-width: 52ch; }
.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--lilac); border-radius: 14px; padding: 14px 16px; word-break: break-all;
}
.trouble { grid-column: 2; background: var(--peach); color: var(--ink); border-radius: 14px; padding: 12px 16px; font-size: 15px; box-shadow: 0 0 0 3px #fff; }
#done h3 { font-size: 30px; }
#share { display: flex; flex-direction: column; gap: 14px; }

/* ---------- legal and support pages: one big paper sticker of text ---------- */
.hero.narrow { grid-template-columns: 1fr; padding-bottom: 0; }
.hero.narrow .hero-words { max-width: 720px; }
.hero.narrow h1 { font-size: clamp(40px, 7vw, 72px); }
.prose {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 76ch;
  margin: clamp(24px, 4vw, 56px) auto clamp(56px, 8vw, 112px);
  padding: clamp(24px, 4vw, 52px);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--sticker-radius);
  box-shadow: 0 0 0 var(--kiss) #fff, var(--shadow-rest);
  transform: rotate(-.6deg);
}
main > .prose { margin-inline: max(20px, calc(50% - 38ch)); }
.prose h1 { font-size: clamp(38px, 7vw, 60px); line-height: 1; }
.prose h2 { margin-top: 26px; font-size: 27px; }
.prose h3 { margin-top: 12px; font-size: 19px; letter-spacing: -0.02em; }
.prose a { color: var(--violet); }
.prose ul, .prose ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.prose li::marker { color: var(--violet); }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--lilac); padding: 1px 6px; border-radius: 6px; }
.scroller { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 420px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

footer {
  background: var(--ink);
  color: rgba(251,247,242,.72);
  padding: 30px var(--gutter) 56px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 14px;
}
footer a { color: var(--paper); }

/* ---------- arrivals ---------- */
/* Stickers land: from a little above and a little larger, settling with one short overshoot.
   The animation fills backwards only, so once it ends the sticker's own transform (and its
   hover) takes over. Everything is visible without JS. */
@keyframes land {
  0%   { opacity: 0; transform: translateY(-18px) rotate(var(--tilt, 0deg)) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)) scale(1); }
}
.land { animation: land .9s var(--ease-land) backwards; animation-delay: var(--land-delay, 0ms); }
.reveal > * { opacity: 0; }
.reveal.shown > * { opacity: 1; animation: land .7s var(--ease-land) backwards; }
.reveal.shown > *:nth-child(2) { animation-delay: .07s; }
.reveal.shown > *:nth-child(3) { animation-delay: .14s; }
.reveal.shown > *:nth-child(4) { animation-delay: .21s; }
.reveal.shown :is(.steps li, .cards img, .more article) { animation: land .7s var(--ease-land) backwards; }
.reveal.shown :is(.steps li, .cards img, .more article):nth-child(2) { animation-delay: .22s; }
.reveal.shown :is(.steps li, .cards img, .more article):nth-child(3) { animation-delay: .3s; }
.reveal.shown :is(.steps li, .cards img, .more article):nth-child(4) { animation-delay: .38s; }
.reveal.shown :is(.cards img, .more article):nth-child(5) { animation-delay: .46s; }
.reveal.shown :is(.cards img, .more article):nth-child(6) { animation-delay: .54s; }
.reveal.shown .more article:nth-child(7) { animation-delay: .62s; }
.reveal.shown .more article:nth-child(8) { animation-delay: .7s; }

/* ---------- phones ---------- */
@media (max-width: 860px) {
  .bar { position: static; }
  .hero { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: 0; row-gap: 34px; padding-top: 8px; }
  .hero h1 { font-size: clamp(46px, 13vw, 76px); }
  .hero-words { padding: 28px 22px 30px; }
  .phone { width: min(260px, 66vw); }
  .beats { grid-column: 1; margin-top: 0; }
  .finder, .waitlist, .plans { grid-template-columns: 1fr; }
  .plans { gap: 32px; }
  .plan.free, .plan.paid { margin: 0; }
  .more article:nth-child(1), .more article:nth-child(4), .more article:nth-child(5), .more article:nth-child(8) { grid-column: auto; padding: 24px 22px 26px; }
  .more article:nth-child(1) h3, .more article:nth-child(4) h3, .more article:nth-child(5) h3, .more article:nth-child(8) h3 { font-size: 22px; }
  .waitlist { grid-template-rows: auto; }
  .waitlist form, .waitlist #done { grid-column: 1; grid-row: auto; }
  .trouble { grid-column: 1; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps, .more-grid { gap: 26px 18px; }
  /* the chart as a vertical spine of title stickers, loudest at the bottom */
  .marquee { padding-bottom: 40px; }
  .marquee .track { flex-direction: column; align-items: flex-start; width: auto; padding: 44px var(--gutter) 0; gap: 10px; animation: none; white-space: normal; }
  .marquee .track span:nth-child(even), .marquee .track span:nth-child(n+21) { display: none; }
  .marquee .track span:nth-child(-n+6) { font-size: 15px; margin-left: 4%; }
  .marquee .track span:nth-child(n+7):nth-child(-n+12) { font-size: 19px; margin-left: 10%; }
  .marquee .track span:nth-child(n+13) { font-size: 24px; margin-left: 16%; }
}

@media (prefers-reduced-motion: reduce) {
  .land, .reveal.shown > *, .reveal.shown :is(.steps li, .cards img, .more article) { animation: none; }
  .reveal > * { opacity: 1; }
  .marquee .track { animation: none; }
  .stars svg.last, .tapper.hit, .popper.pop, .caret { animation: none; }
  .sticker, .peel, .cards img, .swatches button, .beats li, .finder-steps li { transition: none; }
}