/* The v2 landing and Studio pages (Jason, 29 October 2026). The design spec is
   docs/design/v2/; the first two parts are the mockup's own styles, unedited,
   so a diff against it shows only what the port added. */

@font-face { font-family: "General Sans"; src: url(/fonts/general-sans-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "General Sans"; src: url(/fonts/general-sans-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "General Sans"; src: url(/fonts/general-sans-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "General Sans"; src: url(/fonts/general-sans-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

/* Layout: the page is the table stationery. Hero is the mission card on a blush table; every section after it is another printed piece (receipt slip, colour sheets, menu, reply card, the back of the card). One light look, committed. */
:root {
  --blush: #F3ECFB;      /* the table: ground of the hero and the slip section */
  --paper: #FFFFFF;      /* every printed piece */
  --ink: #2B1A2E;        /* all text */
  --rasp: #C42A78;       /* magenta from the badge seal, for text and solid accents */
  --violet: #8542DB;
  --indigo: #5729E0;
  --grad: linear-gradient(135deg, #DB337D 0%, #8542DB 50%, #5729E0 100%); /* the verified badge gradient */ /* taste-skill-ignore */
  --apricot: #C9B8FF;    /* one colour sheet, the board badge */
  --peach: #EEE7FC;      /* second sheet and the pricing field */
  --ground: #FBF9FD;     /* page ground between pieces */
  --soft: #6B5A6E;       /* secondary notes only */
  --font: "General Sans", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.5rem, 1.2rem + 5vw, 5.5rem);
  --step-hero: clamp(2.5rem, 1.3rem + 5vw, 5.75rem);
  --margin: clamp(1.25rem, 3vw, 2rem);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: var(--step-body); font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.04em; line-height: 0.95; text-wrap: balance; }
p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--rasp); outline-offset: 3px; }
::selection { background: var(--apricot); color: var(--ink); }
.frame { width: 100%; max-width: 92rem; margin-inline: auto; padding-inline: var(--margin); }
.sec { padding-block: clamp(6rem, 12vw, 13rem) 0; }

.btn { display: inline-flex; border-radius: 16px; padding: 2px; background: var(--grad); text-decoration: none; cursor: pointer; transition: transform 180ms var(--ease-out); } /* taste-skill-ignore: gradient edge from the badges */
.btn .face { white-space: nowrap; display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 0.7rem; min-height: 3.5rem; padding: 0 1.35rem 0 0.55rem; border-radius: 14px; background: var(--paper); color: var(--ink); font: 700 var(--step-body)/1 var(--font); letter-spacing: -0.015em; transition: background-color 200ms ease, color 200ms ease; }
.btn .face img { width: 2.4rem; height: 2.4rem; border-radius: 0.65rem; }
.btn:hover { transform: translateY(-2px); }
.btn:hover .face { background: transparent; color: var(--paper); }
.btn:active { transform: translateY(0) scale(0.98); }
.link { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; text-decoration-color: var(--rasp); display: inline-flex; gap: 0.4em; align-items: center; }
.link span { display: inline-block; transition: transform 200ms var(--ease-out); }
.link:hover span { transform: translateX(4px); }

/* bar */
.bar { position: absolute; inset: 0 0 auto 0; z-index: 5; background: var(--ground); }
.bar .frame { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1.5rem; padding-block: 1.1rem; }
.mark { white-space: nowrap; display: flex; align-items: center; gap: 0.7rem; font-weight: 700; font-size: 1.3rem; letter-spacing: -0.03em; text-decoration: none; justify-self: start; }
.mark img { width: 2.5rem; height: 2.5rem; border-radius: 0.6rem; }
.aud { display: flex; gap: 0.2rem; padding: 0.25rem; border-radius: 999px; background: var(--paper); }
.aud button { border: 0; background: transparent; color: var(--ink); font: 600 var(--step-small)/1 var(--font); padding: 0.7rem 1.05rem; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background-color 200ms ease, color 200ms ease; }
.aud button[aria-pressed="true"] { background: var(--grad); color: var(--paper); }
.aud button:disabled { cursor: default; color: var(--soft); }
.aud small { font-size: 0.8125rem; font-weight: 500; margin-left: 0.2rem; }
.bar-right { justify-self: end; display: flex; align-items: center; gap: 1.75rem; }
.bar nav { display: flex; gap: 1.5rem; font-weight: 500; font-size: var(--step-small); }
.bar nav a { text-decoration: none; white-space: nowrap; transition: color 160ms ease; }
.bar nav a:hover { color: var(--rasp); }
.bar .btn .face { min-height: 2.6rem; padding: 0 0.95rem 0 0.4rem; font-size: var(--step-small); }
.bar .btn .face img { width: 1.8rem; height: 1.8rem; border-radius: 0.5rem; }
@media (max-width: 1240px) { .bar nav { display: none; } }
@media (max-width: 720px) { .bar .frame { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.75rem; } .aud { grid-column: 1 / -1; grid-row: 2; justify-self: center; } .hero { padding-top: 13.5rem; } }

/* hero: the card on the table */
.hero { position: relative; background: var(--blush); overflow: hidden; padding-block: clamp(7rem, 11vw, 9rem) clamp(5rem, 8vw, 6rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.hero h1 { font-size: var(--step-hero); grid-column: 1 / -1; }
.hero-copy { align-self: center; }
.hero .lede { margin-top: 0; font-size: var(--step-lead); line-height: 1.35; max-width: 30ch; font-weight: 500; }
.hero .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.25rem; }
.hero .note { margin-top: 1.25rem; font-size: var(--step-small); color: var(--soft); }

.table { position: relative; min-height: clamp(36rem, 50vw, 48rem); }
.card { position: absolute; z-index: 2; left: 50%; top: 50%; width: min(28rem, 84%); aspect-ratio: 5 / 7; translate: -50% -50%; rotate: -3deg; background: var(--paper); padding: clamp(1.25rem, 2.4vw, 2rem); display: grid; grid-template-rows: auto auto 1fr auto; }
.card-who b { font-weight: 700; font-variant-numeric: tabular-nums; }
.card-who { margin-top: 0.5rem; display: flex; gap: 1rem; justify-content: space-between; font-size: var(--step-small); font-weight: 500; }
.card-title { margin-top: 0; font-weight: 700; letter-spacing: -0.04em; line-height: 0.95; font-size: clamp(2rem, 1.3rem + 2vw, 2.9rem); }
.shots { margin-top: 1rem; display: grid; align-content: start; }
.shot { display: flex; align-items: center; gap: 0.8rem; width: 100%; padding: 0.55rem 0; border: 0; background: none; color: inherit; font: 500 var(--step-body)/1.2 var(--font); text-align: left; cursor: pointer; }
.shot i { flex: none; position: relative; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--blush); transition: background-color 220ms ease, transform 220ms var(--ease-out); }
.shot i::after { content: ""; position: absolute; left: 0.5rem; top: 0.28rem; width: 0.38rem; height: 0.72rem; border: solid var(--paper); border-width: 0 0.18rem 0.18rem 0; rotate: 45deg; scale: 0; transition: scale 260ms var(--ease-out) 60ms; }
.shot:hover i { transform: scale(1.12); }
.shot[aria-pressed="true"] i { background: var(--rasp); }
.shot[aria-pressed="true"] i::after { scale: 1; }
.shot[aria-pressed="true"] span { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--rasp); }
.card-foot { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.card-foot canvas { width: clamp(4.5rem, 7vw, 5.5rem); aspect-ratio: 1; image-rendering: pixelated; }
.card-foot p { font-size: var(--step-small); line-height: 1.35; text-align: right; }
.card-foot b { display: block; font-weight: 700; font-size: var(--step-body); }

.print { position: absolute; z-index: 1; width: clamp(10rem, 16vw, 15rem); background: var(--paper); padding: 0.5rem 0.5rem 1.6rem; animation: drift 7s ease-in-out infinite alternate; }
.print img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.print figcaption { position: absolute; left: 0.6rem; bottom: 0.3rem; font-size: var(--step-small); font-weight: 500; }
.p1 { left: 0; top: 4%; rotate: -9deg; }
.p2 { right: 0; top: 0; rotate: 7deg; animation-delay: -2s; }
.p3 { right: 2%; bottom: 0; rotate: -5deg; animation-delay: -4s; }
.landed { position: absolute; z-index: 3; width: clamp(8rem, 13vw, 11rem); background: var(--paper); padding: 0.45rem 0.45rem 1.5rem; pointer-events: none; animation: land 700ms var(--ease-out) both; }
.landed img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.landed figcaption { position: absolute; left: 0.55rem; bottom: 0.25rem; font-size: var(--step-small); font-weight: 500; }
@keyframes drift { to { translate: 0 -14px; } }
@keyframes land { from { opacity: 0; transform: translateY(-40px) scale(1.15); } to { opacity: 1; transform: none; } }
.count { position: absolute; z-index: 4; left: 0; bottom: 4%; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 0.55rem 1rem; font-size: var(--step-small); font-weight: 500; font-variant-numeric: tabular-nums; }
.count b { font-weight: 700; }
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .table { min-height: 36rem; margin-top: 1rem; }
  .p1 { left: 2%; } .p2 { right: 2%; } .p3 { display: none; }
}

/* devices: real app screens */
[data-ui] img { display: block; }
.devices { position: relative; padding-bottom: 2.5rem; }
.browser { background: var(--paper); border-radius: 14px; overflow: hidden; box-shadow: 0 40px 80px -40px rgb(43 26 46 / 0.45); } /* taste-skill-ignore: device frame */
.browser-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.9rem; background: #F4EDF1; font-size: var(--step-small); }
.browser-bar i { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: #E3D5DD; }
.browser-bar span { margin-left: 0.8rem; padding: 0.2rem 0.8rem; border-radius: 999px; background: var(--paper); color: var(--soft); }
.browser img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.phone { background: #1B1220; padding: 0.55rem; border-radius: 2.6rem; box-shadow: 0 40px 70px -30px rgb(43 26 46 / 0.55); } /* taste-skill-ignore: device frame */
.phone img { width: 100%; border-radius: 2.1rem; aspect-ratio: 1290 / 2666; object-fit: cover; object-position: top; }
.phone--hero { position: absolute; left: 2%; bottom: 0; width: 28%; rotate: -4deg; }
.devices .browser { margin-left: 16%; }
.demo { position: absolute; right: 0; bottom: 0; font-size: var(--step-small); color: var(--soft); }

.verbs { margin-top: 1.5rem; display: grid; gap: 0.6rem; }
.verbs li { display: flex; align-items: center; gap: 0.85rem; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.verbs i { flex: none; position: relative; width: 0.9em; height: 0.9em; border-radius: 50%; background: var(--rasp); }
.verbs i::after { content: ""; position: absolute; left: 0.31em; top: 0.17em; width: 0.22em; height: 0.42em; border: solid var(--paper); border-width: 0 0.1em 0.1em 0; rotate: 45deg; }
.verbs li:nth-child(2) i { background: var(--apricot); }
.verbs li:nth-child(3) i { background: var(--ink); }
.js .verbs.in li { animation: tick 520ms var(--ease-out) both; }
.js .verbs.in li:nth-child(2) { animation-delay: 120ms; }
.js .verbs.in li:nth-child(3) { animation-delay: 240ms; }
@keyframes tick { from { opacity: 0; translate: -12px 0; } }
@media (prefers-reduced-motion: reduce) { .js .verbs.in li { animation: none; } }
@media (max-width: 960px) {
  .devices { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); align-items: end; padding: 0; margin-top: 2rem; }
  .devices .browser { grid-row: 1; grid-column: 2; margin-left: 0; }
  .phone--hero { position: relative; grid-row: 1; grid-column: 1; left: auto; bottom: auto; width: auto; margin-right: -35%; z-index: 1; }
  .demo { position: static; grid-column: 1 / -1; text-align: right; margin-top: 0.75rem; }
}
.how-pair { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; margin-top: 3rem; max-width: 40rem; }
.how .card { position: relative; width: 100%; translate: none; left: auto; top: auto; rotate: -2deg; }
.phone--small { rotate: 3deg; }
@media (max-width: 560px) { .bar .btn .face { padding: 0 0.9rem; } }

.sheet-app { display: grid; place-items: center; padding: clamp(2rem, 5vw, 4rem); }
.phone--sheet { width: min(17rem, 62%); rotate: 3deg; }
.rec-shot { position: relative; width: min(24rem, 86%); background: #1B1220; padding: 0.55rem; border-radius: 1.6rem; rotate: -2deg; box-shadow: 0 40px 70px -30px rgb(43 26 46 / 0.55); } /* taste-skill-ignore: device frame */
.rec-shot > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1.15rem; }
.rec-shot .rec { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.4rem; max-width: none; background: rgb(27 18 32 / 0.72); color: #fff; }
.rec-shot .rec span.track { background: rgb(255 255 255 / 0.3); }
.rec-shot .rec span.track b { background: #fff; }
.sheet-body .messages { max-width: 26rem; min-width: 0; }
.sheet-text, .sheet-body, .messages li, .messages q { min-width: 0; }
.messages li { grid-template-columns: minmax(0, 1fr) auto; }
.msg-ui { width: min(26rem, 100%); display: grid; gap: 0.75rem; }
.msg-ui .rec { position: static; max-width: none; }
.sheet .board { position: static; width: min(30rem, 100%); padding: 1.75rem 2rem; font-size: var(--step-lead); }
.sheet .board h4 { font-size: var(--step-lead); margin-bottom: 1rem; }
.sheet .board li b { width: 2.2rem; height: 2.2rem; font-size: var(--step-body); }

.album-devices { position: relative; padding-bottom: 3rem; }
.phone--album { position: absolute; right: 0; bottom: 0; width: 30%; rotate: 4deg; }
.browser--album img { aspect-ratio: 16 / 11; }

.apps-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.apps h2 { font-size: var(--step-head); }
.badge { display: inline-block; margin-top: 1rem; transition: transform 160ms var(--ease-out); }
.badge:hover { transform: translateY(-2px); }
.badge img { width: 9.5rem; height: auto; }
@media (max-width: 900px) { .album-devices { margin-top: 2rem; } }

/* iPhone silhouette: slim bezel, status bar, Dynamic Island */
.phone--small, .phone--sheet { position: relative; }
.phone { display: grid; background: #0E0A10; padding: 0.42rem; border-radius: 3.1rem; } /* taste-skill-ignore: device frame */
.phone::before { content: "9:41"; display: flex; align-items: center; padding-left: 12%; height: 2.6rem; background: var(--paper); color: #0E0A10; font: 600 0.95rem/1 var(--font); letter-spacing: -0.01em; border-radius: 2.7rem 2.7rem 0 0; }
.phone::after { content: ""; position: absolute; top: 1.05rem; left: 50%; translate: -50% 0; width: 31%; height: 1.55rem; border-radius: 999px; background: #0E0A10; }
.phone img { border-radius: 0 0 2.7rem 2.7rem; aspect-ratio: 1290 / 2560; }
.phone--album img { aspect-ratio: 1170 / 2380; }
.phone--small::before, .phone--album::before { height: 1.7rem; font-size: 0.6rem; }
.phone--small::after, .phone--album::after { top: 0.7rem; height: 0.95rem; }
.phone--small, .phone--album { border-radius: 2rem; padding: 0.3rem; }
.phone--small::before, .phone--album::before { border-radius: 1.75rem 1.75rem 0 0; }
.phone--small img, .phone--album img { border-radius: 0 0 1.75rem 1.75rem; }


.hero .tagline { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; grid-column: 1 / -1; margin-top: -0.5rem; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; color: var(--rasp); } /* taste-skill-ignore: verified badge gradient, per Jason */

/* hero motion: photos land in the album */
.flow { position: absolute; inset: 0; pointer-events: none; }
.fly { position: absolute; left: 14%; top: 58%; width: 4.5rem; aspect-ratio: 1; object-fit: cover; border: 3px solid var(--paper); border-radius: 0.6rem; opacity: 0; animation: fly 7.5s var(--ease-out) infinite; }
.f2 { animation-delay: 2.5s; } .f3 { animation-delay: 5s; }
@keyframes fly {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6) rotate(-8deg); }
  6% { opacity: 1; transform: translate(0, -2rem) scale(1) rotate(-4deg); }
  22% { opacity: 1; transform: translate(min(28vw, 24rem), -11rem) scale(0.9) rotate(3deg); }
  30% { opacity: 0; transform: translate(min(30vw, 26rem), -11.5rem) scale(0.55) rotate(0); }
  100% { opacity: 0; }
}
.toast { position: absolute; right: 3%; top: 3.6rem; display: grid; background: var(--ink); color: var(--paper); border-radius: 0.9rem; padding: 0.65rem 1rem; font-size: var(--step-small); font-variant-numeric: tabular-nums; animation: toast 2.5s ease-in-out infinite; }
.toast b { font-weight: 700; }
.toast span { opacity: 0.75; }
@keyframes toast { 0%, 55% { transform: translateY(0); } 62% { transform: translateY(-4px) scale(1.04); } 70%, 100% { transform: translateY(0); } }
@media (max-width: 960px) { .fly { display: none; } .toast { top: 0.5rem; right: 0.5rem; } }
@media (prefers-reduced-motion: reduce) { .fly { display: none; } .toast { animation: none; } }

/* pros */
.pros-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.pros h2 { font-size: var(--step-head); }
.pros .text { margin-block: 1.5rem 2rem; max-width: 36ch; font-size: var(--step-lead); line-height: 1.35; font-weight: 500; }
.pro-card { background: var(--paper); padding: 1.75rem; display: grid; gap: 1rem; rotate: 2deg; max-width: 30rem; justify-self: end; }
.pro-top { display: flex; align-items: center; gap: 0.9rem; }
.pro-top b { display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; font-weight: 700; font-size: var(--step-lead); letter-spacing: -0.02em; }
.pro-top em { font-style: normal; font-size: var(--step-small); color: var(--rasp); font-weight: 600; }
.pro-avatar { width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--apricot); display: grid; place-items: center; font-weight: 700; font-size: var(--step-lead); }
.pro-url { font-size: var(--step-small); background: var(--blush); padding: 0.45rem 0.8rem; border-radius: 999px; justify-self: start; }
.pro-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; }
.pro-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pro-credit { font-size: var(--step-small); font-weight: 600; }
@media (max-width: 860px) { .pros-grid { grid-template-columns: minmax(0, 1fr); } .pro-card { justify-self: start; rotate: 1deg; } }

.badges { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-bottom: 2rem; }
.badges li { display: grid; justify-items: center; gap: 0.4rem; font-weight: 600; font-size: var(--step-small); }
.badges img { width: 4.75rem; height: 4.75rem; transition: transform 220ms var(--ease-out); }
.badges li:hover img { transform: rotate(-8deg) scale(1.06); }
.verified { width: 1.6rem; height: 1.6rem; flex: none; }
.pro-top em.role { font-style: normal; font-size: var(--step-small); color: #5729E0; font-weight: 600; }
.pro-grid figure { position: relative; margin: 0; }
.on-photo { position: absolute; left: 0.35rem; bottom: 0.35rem; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.18rem 0.5rem 0.18rem 0.2rem; border-radius: 999px; background: rgb(0 0 0 / 0.75); color: #fff; font-size: 0.6875rem; font-weight: 600; white-space: nowrap; }
.on-photo img { width: 1.15rem !important; height: 1.15rem; aspect-ratio: 1 !important; }

.apps-say { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.35; max-width: 34ch; }
.plat { background: var(--blush); padding: 0.05em 0.35em; border-radius: 0.4em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.plat--ink { background: var(--ink); color: var(--paper); }
.plat--soft { background: var(--peach); }
.apps-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }

/* hero: one annotated iPhone */
.promise { margin-top: 1.5rem; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.get { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.75rem; font-size: var(--step-small); color: var(--soft); max-width: 34rem; }
.get .badge { margin: 0; }
.get span { max-width: 26ch; }
.phone--star { position: relative; width: min(20rem, 50%); rotate: -2deg; }
.screen { position: relative; aspect-ratio: 1290 / 2666; overflow: hidden; border-radius: 0 0 2.7rem 2.7rem; background: #F6F3F8; }
.sc { position: absolute; inset: 0; width: 100%; height: 100%; }
img.sc { object-fit: cover; object-position: top; border-radius: 0; aspect-ratio: auto; }
.phone--star img { border-radius: 0; aspect-ratio: auto; }
/* beat 1: camera scans the table card */
.sc-scan { background: #222; animation: b-scan 16s linear infinite; }
.vf { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(2px) brightness(0.85); scale: 1.15; }
.tc { position: absolute; left: 50%; top: 52%; width: 52%; translate: -50% -50%; rotate: -6deg; background: #fff; border-radius: 6px; padding: 0.7rem 0.6rem; display: grid; justify-items: center; gap: 0.3rem; text-align: center; color: #2B1A2E; animation: b-card 16s var(--ease-out) infinite; }
.tc img { width: 1.6rem; height: 1.6rem; border-radius: 0.35rem; }
.tc b { font-weight: 700; font-size: 0.8rem; letter-spacing: -0.02em; }
.tc canvas { width: 70%; aspect-ratio: 1; image-rendering: pixelated; }
.tc span { font-weight: 700; font-size: 0.62rem; line-height: 1.1; }
.tc small { font-size: 0.55rem; color: #6B5A6E; }
.br { position: absolute; left: 50%; top: 52%; width: 62%; aspect-ratio: 1; translate: -50% -50%; animation: b-br 16s var(--ease-out) infinite; }
.br i { position: absolute; width: 22%; height: 22%; border: 0 solid #FFD23F; }
.br i:nth-child(1) { left: 0; top: 0; border-width: 3px 0 0 3px; border-top-left-radius: 10px; }
.br i:nth-child(2) { right: 0; top: 0; border-width: 3px 3px 0 0; border-top-right-radius: 10px; }
.br i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 3px 3px; border-bottom-left-radius: 10px; }
.br i:nth-child(4) { right: 0; bottom: 0; border-width: 0 3px 3px 0; border-bottom-right-radius: 10px; }
.qrpill { position: absolute; left: 6%; right: 6%; top: 8%; display: flex; align-items: center; gap: 0.5rem; background: rgb(255 255 255 / 0.94); color: #111; border-radius: 0.9rem; padding: 0.45rem 0.6rem; font-size: 0.62rem; line-height: 1.25; animation: b-pill 16s var(--ease-out) infinite; }
.qrpill img { width: 1.5rem; height: 1.5rem; border-radius: 0.35rem; }
.qrpill span { flex: 1; min-width: 0; } .qrpill b { display: block; font-weight: 700; font-size: 0.68rem; }
.qrpill em { font-style: normal; font-weight: 700; color: #6D3AE0; }
/* beat 2 and 3: event home */
.sc-hub { animation: b-hub 16s linear infinite; }
/* beat 4: album fills */
.sc-album { animation: b-album 16s var(--ease-out) infinite; background: #F6F3F8; }
.scroll { position: absolute; inset: 0 0 auto 0; animation: b-scroll 16s var(--ease-out) infinite; }
.scroll img { display: block; width: 100%; }
.scroll img + img { width: 94%; margin: 2% 3% 0; border-radius: 0.4rem; }
.sc-album .nav { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; }
.tap { position: absolute; left: 69%; top: 92%; width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; border-radius: 50%; background: rgb(214 51 108 / 0.35); outline: 3px solid rgb(214 51 108 / 0.8); opacity: 0; animation: b-tap 16s ease-out infinite; }
/* callouts: numbered labels, straight connectors */
.co { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.85rem 0.45rem 0.45rem; border-radius: 10px; background: var(--paper); color: var(--ink); font-weight: 600; font-size: var(--step-small); line-height: 1.2; max-width: 11.5rem; width: max-content; opacity: 0; translate: 0 -50%; }
.co b { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--grad); color: #fff; font-size: 0.8125rem; font-weight: 700; } /* taste-skill-ignore: badge gradient */
.co::after { content: ""; position: absolute; top: 50%; height: 2px; width: 1.4rem; background: var(--paper); }
.co b { flex: none; }
.c-scan, .c-add, .c-cam { right: calc(100% + 1.4rem); }
.c-scan::after, .c-add::after, .c-cam::after { left: 100%; }
.c-hunt, .c-album { left: calc(100% + 1.4rem); }
.c-hunt::after, .c-album::after { right: 100%; }
.c-scan { top: 50%; animation: c-scan 16s var(--ease-out) infinite; }
.c-hunt { top: calc(2.6rem + 0.42rem + 50% * 0.93); animation: c-hunt 16s var(--ease-out) infinite; }
.c-add { top: calc(2.6rem + 0.42rem + 60% * 0.93); animation: c-add 16s var(--ease-out) infinite; }
.c-cam { top: 92%; animation: c-cam 16s var(--ease-out) infinite; }
.c-album { top: 50%; animation: c-album 16s var(--ease-out) infinite; }
@keyframes b-scan { 0%, 18% { opacity: 1; } 21%, 100% { opacity: 0; } }
@keyframes b-card { 0% { scale: 0.8; translate: -40% -40%; } 8%, 100% { scale: 1; translate: -50% -50%; } }
@keyframes b-br { 0%, 5% { opacity: 0; width: 90%; } 10% { opacity: 1; width: 62%; } 18% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes b-pill { 0%, 11% { opacity: 0; translate: 0 -0.6rem; } 13%, 18% { opacity: 1; translate: 0 0; } 20%, 100% { opacity: 0; } }
@keyframes b-hub { 0%, 18% { opacity: 0; scale: 1.04; } 22%, 62% { opacity: 1; scale: 1; } 66%, 100% { opacity: 0; } }
@keyframes b-album { 0%, 62% { opacity: 0; translate: 0 6%; } 66%, 96% { opacity: 1; translate: 0 0; } 99%, 100% { opacity: 0; } }
@keyframes b-scroll { 0%, 74% { translate: 0 0; } 93%, 100% { translate: 0 -40%; } }
@keyframes b-tap { 0%, 58% { opacity: 0; scale: 0.4; } 60% { opacity: 1; scale: 1; } 64% { opacity: 0; scale: 1.5; } 100% { opacity: 0; } }
@keyframes c-scan { 0%, 3% { opacity: 0; } 6%, 17% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes c-hunt { 0%, 24% { opacity: 0; scale: 0.8; } 27%, 56% { opacity: 1; scale: 1; } 60%, 100% { opacity: 0; } }
@keyframes c-add { 0%, 30% { opacity: 0; scale: 0.8; } 33%, 56% { opacity: 1; scale: 1; } 60%, 100% { opacity: 0; } }
@keyframes c-cam { 0%, 40% { opacity: 0; scale: 0.8; } 43%, 57% { opacity: 1; scale: 1; } 60%, 100% { opacity: 0; } }
@keyframes c-album { 0%, 72% { opacity: 0; scale: 0.8; } 75%, 95% { opacity: 1; scale: 1; } 98%, 100% { opacity: 0; } }
@media (max-width: 960px) { .phone--star { width: min(16rem, 52%); } }
@media (max-width: 700px) { .co { font-size: 0.75rem; padding: 0.35rem 0.6rem 0.35rem 0.35rem; } .co b { width: 1.2rem; height: 1.2rem; font-size: 0.6875rem; } .co::after { display: none; } .c-scan, .c-add, .c-cam { right: auto; left: 0.5rem; } .c-hunt, .c-album { left: auto; right: 0.5rem; } .c-cam { top: auto; bottom: -2.6rem; translate: none; } .annot .demo { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .sc-scan, .sc-album, .tap, .c-scan, .c-album { display: none; }
  .sc-hub, .c-hunt, .c-add, .c-cam { animation: none; opacity: 1; }
}
.annot { position: relative; display: grid; place-items: center; padding: clamp(2rem, 5vw, 3.5rem) 1rem clamp(3rem, 6vw, 4rem); border-radius: 28px; background: var(--grad); } /* taste-skill-ignore: badge gradient panel */
.annot .demo { color: rgb(255 255 255 / 0.85); right: 1.25rem; bottom: 1rem; }

/* how it works: guests, then hosts */
.how { background: var(--blush); padding-block: clamp(5rem, 9vw, 9rem); }
.how h2 { font-size: var(--step-head); }
.how-who { margin-top: clamp(2.5rem, 5vw, 4rem); }
.steps { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); counter-reset: none; }
.steps li { display: grid; gap: 1.25rem; align-content: start; }
.step-pic { height: clamp(24rem, 34vw, 30rem); display: grid; place-items: center; }
.steps p { max-width: 32ch; }
.steps b, .host-steps b { font-weight: 700; }
.card--mini { position: relative; width: min(19rem, 100%); aspect-ratio: auto; translate: none; left: auto; top: auto; rotate: -3deg; }
.phone--step { width: min(14rem, 80%); position: relative; box-shadow: none; } /* taste-skill-ignore: removes the frame shadow */
.steps li:nth-child(2) .phone--step { rotate: 2deg; }
.steps li:nth-child(3) .phone--step { rotate: -2deg; }
.hosts { margin-top: 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.browser--host img { aspect-ratio: 16 / 10; }
@media (max-width: 860px) { .steps, .hosts { grid-template-columns: minmax(0, 1fr); } .step-pic { height: auto; } }

.how-who { display: grid; gap: 0.35rem; color: var(--ink); font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); letter-spacing: -0.035em; line-height: 1; }
.how-who span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: var(--step-body); letter-spacing: 0; line-height: 1.2; } /* taste-skill-ignore: badge gradient */
.host-steps { display: grid; gap: 1.6rem; max-width: 36rem; font-size: var(--step-body); line-height: 1.45; }
.host-steps li { display: grid; grid-template-columns: 0.9rem minmax(0, 1fr); column-gap: 1rem; }
.host-steps li::before { content: ""; grid-row: 1 / 3; width: 0.9rem; height: 0.9rem; margin-top: 0.45rem; border-radius: 50%; background: var(--grad); } /* taste-skill-ignore */
.host-steps h4 { margin: 0 0 0.3rem; font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.tcard { width: min(17rem, 92%); aspect-ratio: 5 / 7; background: var(--paper); border-radius: 10px; padding: 1.4rem 1.25rem; display: grid; justify-items: center; align-content: space-between; text-align: center; rotate: -3deg; outline: 1px solid rgb(87 41 224 / 0.12); }
.tcard-top { display: flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: var(--step-small); }
.tcard-top img { width: 1.6rem; height: 1.6rem; border-radius: 0.4rem; }
.tcard-names { font-weight: 700; font-size: 2rem; letter-spacing: -0.04em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* taste-skill-ignore */
.tcard-date { font-size: var(--step-small); color: var(--soft); margin-top: -0.4rem; }
.tcard canvas { width: 58%; aspect-ratio: 1; image-rendering: pixelated; }
.tcard-cta { font-weight: 600; font-size: var(--step-small); line-height: 1.3; max-width: 20ch; }

@font-face { font-family: "VHS"; src: local("VT323"); }
.vhs > img { filter: sepia(0.35) saturate(0.85) contrast(1.08) brightness(1.04); }
.osd { position: absolute; inset: 0.55rem; padding: 1rem 1.1rem; border-radius: 1.15rem; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto auto; font-family: "VT323", "Courier New", monospace; font-size: 1.2rem; line-height: 1; color: #fff; text-shadow: 2px 2px 0 rgb(0 0 0 / 0.55); letter-spacing: 0.04em; pointer-events: none; } /* taste-skill-ignore: camcorder on-screen display, per Jason */
.osd-rec { display: inline-flex; align-items: center; gap: 0.35rem; }
.osd-rec i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #FF3B3B; animation: blink 1.1s steps(1) infinite; }
.osd-sp { justify-self: end; }
.osd-play { grid-row: 3; }
.osd-time { grid-row: 3; justify-self: end; }
.osd-date { grid-row: 4; grid-column: 1 / -1; justify-self: end; margin-top: 0.3rem; color: #FFD07A; }

section.price { background: var(--grad); } /* taste-skill-ignore: verified badge gradient field, per Jason */
section.price .meter-q output { color: var(--paper); text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; text-decoration-color: rgb(255 255 255 / 0.5); }
.track input::-webkit-slider-thumb { border-color: var(--indigo); background: #fff; }
.track input::-moz-range-thumb { border-color: var(--indigo); background: #fff; }
section.price .tiers li::before { border-radius: 4px; height: 0.6rem; top: -2.3rem; }
section.price .tiers li.on::before { background: #fff; }
section.price .tiers li.on { color: #fff; }
section.price .plan { border-radius: 18px; align-items: start; }
section.price .plan b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* taste-skill-ignore */
.plan-info p { margin-top: 0.2rem; color: var(--soft); font-size: var(--step-small); }
#planList { margin-top: 0.8rem; display: grid; gap: 0.45rem; }
#planList li { display: flex; align-items: center; gap: 0.55rem; font-weight: 500; }
#planList li::before { content: ""; flex: none; width: 1.05rem; height: 1.05rem; background: url("/v2/ef4e72e11caa.svg") center / contain no-repeat; filter: hue-rotate(0deg); }
.after li { border-radius: 10px; }

.foot-band { background: var(--blush); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; margin-top: 0; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2rem 4rem; align-items: start; }
.foot-grid > div p { margin-top: 1rem; max-width: 34ch; color: var(--soft); }
.foot-grid nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem 2rem; font-weight: 500; }
.foot-grid nav a { text-decoration: none; }
.foot-grid nav a:hover { color: var(--rasp); }
.foot-grid .imprint { grid-column: 1 / -1; font-size: var(--step-small); color: var(--soft); text-align: left; padding-top: 1rem; }
.foot-grid .foot-social { display: flex; gap: 0.25rem; margin-top: 1rem; margin-left: -0.6rem; }
.foot-social a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; color: var(--soft); }
.foot-social a:hover { color: var(--rasp); background: var(--paper); }
.foot-social svg { width: 1.3rem; height: 1.3rem; }
.imprint a { color: inherit; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } .foot-grid nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* hero: copy left, the album drifting on the right */
.hero { position: relative; overflow: hidden; padding-block: clamp(7.5rem, 10vw, 9rem) clamp(4rem, 7vw, 6rem); min-height: min(52rem, 100svh); display: grid; align-items: center; }
.hero-grid { grid-template-columns: minmax(0, 1fr) !important; }
.hero-copy { position: relative; z-index: 2; max-width: min(44rem, 52%); display: grid; gap: 0; }
.hero h1 { font-size: clamp(2.6rem, 1.4rem + 4.2vw, 5.25rem); grid-column: auto; }
.hero .tagline { margin-top: 1.25rem; font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.7rem); }
/* The brand and what it is, above the H1, so a search for the name lands on a page that says it. Approved by Jason, 2 November 2026. */
.hero-eyebrow { justify-self: start; margin: 0 0 1.1rem; padding: 7px 14px; border-radius: 999px; background: var(--paper); box-shadow: 0 1px 0 rgba(43, 26, 46, .04), 0 6px 18px rgba(43, 26, 46, .07); color: var(--rasp); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3; }
/* The pool teal is under 4.5:1 on white at 12px, so the Parties pill takes the Parties fill (PARTIES_FILL_COLOR in event-tone.js). */
body.parties .hero-eyebrow { color: #00796F; }
/* One line on a phone: at 12px and 0.14em the longest label wraps below about 400px. */
@media (max-width: 420px) { .hero-eyebrow { font-size: 11px; letter-spacing: 0.08em; padding-inline: 12px; } }
.hero .lede { margin-top: 1.5rem; max-width: 30ch; }
.wall { position: absolute; z-index: 1; top: 0; bottom: 0; right: 0; width: 46vw; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; padding-right: 0.7rem; rotate: 4deg; scale: 1.12; transform-origin: 70% 50%; }
.wcol { overflow: hidden; }
.wtrack { display: grid; gap: 0.7rem; animation: wall 60s linear infinite; }
.wc1 .wtrack { animation-duration: 75s; animation-direction: reverse; }
.wc2 .wtrack { animation-duration: 66s; }
.wtrack img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
@keyframes wall { to { translate: 0 calc(-50% - 0.35rem); } }
.wall-chip { position: absolute; left: -2rem; bottom: 18%; rotate: -4deg; display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 1rem 0.7rem 0.7rem; border-radius: 14px; background: var(--paper); font-size: var(--step-small); line-height: 1.3; }
.wall-chip img { width: 2.6rem; height: 2.6rem; border-radius: 0.7rem; }
.wall-chip b { display: block; font-weight: 700; font-size: var(--step-body); }
@media (max-width: 960px) {
  .hero { min-height: 0; padding-bottom: 0; }
  .annot--how .demo { position: static; color: var(--soft); margin-top: 3rem; }
  .hero-copy { max-width: none; }
  .wall { position: relative; width: auto; height: 26rem; margin-top: 3rem; rotate: 0deg; scale: 1; padding: 0 var(--margin); }
  .wall-chip { left: 1.5rem; bottom: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .wtrack { animation: none; } }
@media (max-width: 720px) { .hero { padding-top: 12rem; } }
.annot--how .demo { color: var(--soft); position: static; margin-top: 1.75rem; }

/* how it works: the guest flow beside the motion graphic */
.guest-flow { margin-top: 1.5rem; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.flow-steps { display: grid; gap: 1.25rem; counter-reset: s; max-width: 30rem; }
.flow-steps li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 0.9rem; counter-increment: s; }
.flow-steps li::before { content: counter(s); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 700; font-size: var(--step-small); grid-row: 1 / 3; } /* taste-skill-ignore: badge gradient */
.flow-steps b { font-weight: 700; font-size: var(--step-lead); letter-spacing: -0.02em; display: block; line-height: 1.15; margin-bottom: 0.2rem; }
.annot--how { background: none; padding: 1rem 0 2rem; border-radius: 0; }
.annot--how .co { background: var(--ink); color: var(--paper); }
.annot--how .co::after { background: var(--ink); }
@media (max-width: 960px) { .guest-flow { grid-template-columns: minmax(0, 1fr); } }

/* parties palette */
body.parties { --rasp: #00B3A4; --blush: #D6F3EF; --apricot: #FFE45C; --peach: #FFF8CC; --ground: #F2F9FA; --ink: #0F2A33; --soft: #4F6B74; }
body { transition: background-color 400ms ease; }

/* how it works: the slip */
.how { background: var(--blush); padding-bottom: clamp(5rem, 9vw, 9rem); }
.how-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 6fr); align-items: start; }
.how h2 { font-size: var(--step-head); }
.how .text { margin-top: 1.5rem; max-width: 30ch; font-size: var(--step-lead); line-height: 1.35; font-weight: 500; }
.slip { grid-column: 3; background: var(--paper); padding: 2.25rem 2.25rem 3.5rem; max-width: 30rem; width: 100%; justify-self: end; font-variant-numeric: tabular-nums; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 96% 100%, 92% calc(100% - 14px), 88% 100%, 84% calc(100% - 14px), 80% 100%, 76% calc(100% - 14px), 72% 100%, 68% calc(100% - 14px), 64% 100%, 60% calc(100% - 14px), 56% 100%, 52% calc(100% - 14px), 48% 100%, 44% calc(100% - 14px), 40% 100%, 36% calc(100% - 14px), 32% 100%, 28% calc(100% - 14px), 24% 100%, 20% calc(100% - 14px), 16% 100%, 12% calc(100% - 14px), 8% 100%, 4% calc(100% - 14px), 0 100%); }
.slip-top { display: flex; justify-content: space-between; font-weight: 700; font-size: var(--step-body); }
.slip h3 { margin-top: 1.75rem; font-size: var(--step-body); letter-spacing: -0.01em; line-height: 1.2; }
.row { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.55rem; font-size: var(--step-body); }
.row .dots { flex: 1; min-width: 1.5rem; border-bottom: 4px dotted var(--blush); translate: 0 -4px; }
.row .val { font-weight: 500; white-space: nowrap; }
.total { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 1.75rem -2.25rem 0; padding: 0 2.25rem; min-height: 3.1rem; background: var(--ink); color: var(--paper); font-weight: 700; }
@media (max-width: 900px) { .how-grid { grid-template-columns: 1fr; } .slip { grid-column: 1; justify-self: stretch; max-width: none; margin-top: 3rem; padding-inline: 1.4rem; } .total { margin-inline: -1.4rem; padding-inline: 1.4rem; } }

/* features: stacking colour sheets */
.sheets-head { padding-bottom: 3rem; }
.sheets-head h2 { font-size: var(--step-head); max-width: 14ch; }
.sheet { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; }
.sheet:nth-child(1) { background: var(--rasp); color: var(--paper); }
.sheet:nth-child(2) { background: var(--apricot); }
.sheet:nth-child(3) { background: var(--peach); }
.sheet-text { display: grid; align-content: center; padding: clamp(3rem, 6vw, 5rem) var(--margin); gap: 2rem; }
.sheet h3 { font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem); line-height: 0.95; }
.sheet-body { display: grid; gap: 1.5rem; max-width: 40ch; }
.sheet-body p { font-size: var(--step-body); font-weight: 500; }
.sheet figure { position: relative; }
.sheet figure > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sheet .tick-list { display: grid; gap: 0.35rem; font-weight: 700; font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1.1; }
.sheet .tick-list li { display: flex; gap: 0.6rem; align-items: center; }
.sheet .tick-list li::before { content: ""; width: 0.75em; height: 0.75em; border-radius: 50%; background: var(--paper); flex: none; }
.sheet .tick-list li.done::before { background: var(--apricot); }
.rec { position: absolute; left: 1.25rem; bottom: 1.25rem; right: 1.25rem; display: flex; align-items: center; gap: 0.8rem; background: var(--paper); color: var(--ink); border-radius: 999px; padding: 0.6rem 1rem; font-weight: 700; font-variant-numeric: tabular-nums; max-width: 22rem; }
.rec i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--rasp); animation: blink 1.2s ease-in-out infinite; }
.rec span.track { flex: 1; height: 6px; border-radius: 6px; background: var(--blush); overflow: hidden; }
.rec span.track b { display: block; height: 100%; width: 53%; background: var(--rasp); animation: fill 15s linear infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
@keyframes fill { from { width: 0; } to { width: 100%; } }
.messages { display: grid; gap: 0.75rem; }
.messages li { background: var(--paper); padding: 0.9rem 1.1rem; display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem; }
.messages b { font-weight: 700; }
.messages span { font-weight: 700; font-variant-numeric: tabular-nums; }
.messages q { grid-column: 1 / -1; font-size: var(--step-body); quotes: none; }
.board { position: absolute; right: 1.25rem; top: 1.25rem; width: min(20rem, 70%); background: var(--paper); padding: 1.1rem 1.25rem; font-variant-numeric: tabular-nums; }
.board h4 { margin: 0 0 0.6rem; font-size: var(--step-body); font-weight: 700; }
.board li { display: flex; justify-content: space-between; align-items: center; padding-block: 0.3rem; font-weight: 500; }
.board li b { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--apricot); font-weight: 700; font-size: var(--step-small); margin-right: 0.6rem; }
.board li:first-child b { background: var(--rasp); color: var(--paper); }
@media (max-width: 860px) {
  .sheet { grid-template-columns: minmax(0, 1fr); min-height: 70svh; }
    .sheet figure { order: -1; aspect-ratio: 4 / 3; }
  .sheet-text { padding-inline: 1.25rem; }
}

/* album: index with preview */
.album-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.album h2 { font-size: var(--step-head); }
.album .text { margin-top: 1.5rem; max-width: 34ch; font-size: var(--step-lead); line-height: 1.35; font-weight: 500; }
.index { position: relative; margin-top: 3rem; }
.index__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 1rem; padding-block: 0.12em; font-size: clamp(2.25rem, 1.4rem + 3.2vw, 4.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; text-decoration: none; transition: opacity 240ms ease, color 240ms ease; }
.index__row small { font-size: var(--step-lead); font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.index__thumb { order: -1; flex-basis: 100%; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin: 0.6rem 0 0.4rem; }
.preview { display: none; }
.keep-list { margin-top: 2.5rem; display: grid; gap: 1.25rem; max-width: 34ch; }
.keep-list b { display: block; font-weight: 700; font-size: var(--step-lead); }
@media (min-width: 861px) {
  .index__thumb { display: none; }
  .index:has(.index__row:hover, .index__row:focus-visible) .index__row:not(:hover, :focus-visible) { opacity: 0.28; }
  .index__row:hover, .index__row:focus-visible { color: var(--rasp); }
  .preview { display: block; position: sticky; top: 6rem; aspect-ratio: 4 / 5; overflow: hidden; background: var(--blush); }
  .preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 240ms ease, scale 600ms var(--ease-out); scale: 1.06; }
  .preview img.on { opacity: 1; scale: 1; }
  .preview p { position: absolute; left: 1rem; bottom: 1rem; background: var(--paper); padding: 0.45rem 0.8rem; border-radius: 999px; font-weight: 700; font-size: var(--step-small); }
}
@media (max-width: 860px) { .album-grid { grid-template-columns: 1fr; } }

/* pricing: the guest meter on a raspberry field */
.price { background: var(--rasp); color: var(--paper); margin-top: clamp(6rem, 12vw, 13rem); padding-block: clamp(5rem, 9vw, 8rem); }
.price-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 3rem; }
.price h2 { font-size: var(--step-head); }
.price-head p { font-size: var(--step-lead); font-weight: 500; max-width: 24ch; }
.meter { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; gap: 1.5rem; }
.meter-q { font-size: clamp(3rem, 1.5rem + 6vw, 7.5rem); font-weight: 700; letter-spacing: -0.05em; line-height: 0.9; }
.meter-q output { color: var(--apricot); font-variant-numeric: tabular-nums; }
.track { position: relative; }
.track input { -webkit-appearance: none; appearance: none; width: 100%; height: 3.25rem; background: transparent; cursor: pointer; margin: 0; position: relative; z-index: 2; }
.track input::-webkit-slider-runnable-track { height: 3.25rem; background: transparent; }
.track input::-moz-range-track { height: 3.25rem; background: transparent; }
.track input::-webkit-slider-thumb { -webkit-appearance: none; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--paper); border: 6px solid var(--ink); }
.track input::-moz-range-thumb { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--paper); border: 6px solid var(--ink); }
.track input:active::-webkit-slider-thumb { transform: scale(1.1); }
.tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 0.4rem; pointer-events: none; }
.tiers li { position: relative; display: grid; gap: 0.1rem; justify-items: center; text-align: center; font-size: var(--step-small); transition: color 220ms ease; }
.tiers li::before { content: ""; position: absolute; left: 0; right: 0; top: -2.55rem; height: 1.1rem; border-radius: 999px; background: rgb(255 255 255 / 0.25); transition: background-color 220ms ease; z-index: 0; }
.tiers li.on::before { background: var(--apricot); }
.tiers li.on { color: var(--apricot); }
.tiers li span { opacity: 0.85; }
.tiers li b { font-weight: 700; font-size: var(--step-body); }
.plan { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); background: var(--paper); color: var(--ink); padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.5rem); border-radius: 1.75rem; }
.plan b { font-weight: 700; font-size: clamp(4rem, 2rem + 8vw, 9rem); letter-spacing: -0.06em; line-height: 0.85; color: var(--rasp); font-variant-numeric: tabular-nums; transition: transform 220ms var(--ease-out); }
.plan.bump b { transform: scale(1.06) rotate(-2deg); }
.plan strong { display: block; font-weight: 700; font-size: var(--step-lead); letter-spacing: -0.02em; }
.plan p { margin-top: 0.4rem; max-width: 46ch; }
.after { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.after li { background: rgb(255 255 255 / 0.14); border-radius: 999px; padding: 0.7rem 1.2rem; font-weight: 500; font-size: var(--step-small); }
.after b { color: var(--apricot); font-weight: 700; margin-right: 0.35rem; }
.price .fine { margin-top: 1.5rem; font-size: var(--step-small); opacity: 0.85; }
@media (max-width: 760px) { .tiers li span { display: none; } .tiers li b { font-size: 0.875rem; } .plan { flex-direction: column; align-items: start; } }
/* faq: reading text */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 4rem); }
.faq h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }
.answers { columns: 2; column-gap: 3.5rem; }
.answers p { break-inside: avoid; margin-bottom: 1.4rem; font-size: var(--step-body); line-height: 1.55; }
.answers b { font-weight: 700; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } .answers { columns: 1; } }

/* cta: the reply card */
.reply { background: var(--grad); color: var(--paper); margin-top: clamp(6rem, 12vw, 13rem); overflow: hidden; } /* taste-skill-ignore: badge gradient */
.reply-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; align-items: center; padding-top: clamp(4rem, 8vw, 7rem); }
.reply .say { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; max-width: 16ch; }
.reply-card { justify-self: end; width: min(40rem, 100%); aspect-ratio: 7 / 5; background: var(--paper); color: var(--ink); rotate: 2deg; translate: 0 0; margin-bottom: clamp(3rem, 6vw, 5rem); padding: 3rem; display: grid; align-content: center; justify-items: center; text-align: center; gap: 1rem; }
.reply-card h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.reply-card p { font-size: var(--step-body); max-width: 34ch; font-weight: 500; }
.reply-card .btn { width: 100%; margin-top: 0.75rem; }
.reply-card .btn .face { min-height: 3.6rem; }
@media (max-width: 860px) { .reply { margin-top: 4rem; } .reply-grid { padding-top: 3rem; } .answers p:last-child { margin-bottom: 0; } }
@media (max-width: 860px) { .reply-grid { grid-template-columns: 1fr; min-height: 0; } .reply .say { padding-bottom: 0; } .reply-card { width: 92%; justify-self: center; rotate: 1deg; aspect-ratio: auto; padding: 2rem 1.4rem; translate: 0 40px; } }

/* footer: the back of the card */
.back { background: var(--rasp); padding-block: 4rem var(--margin); }
.postcard { position: relative; background: var(--paper); padding: 3.5rem clamp(1.5rem, 4vw, 3.5rem) 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 3rem;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='600'%3E%3Cpath d='M0 0h52v600H0z M0 0a26 26 0 0 0 52 0z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E") 0 0 / 52px 100% repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='600'%3E%3Cpath d='M0 0h52v600H0z M0 0a26 26 0 0 0 52 0z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E") 0 0 / 52px 100% repeat-x; }
.postcard h2 { font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); }
.postcard .msg { margin-top: 1rem; max-width: 36ch; }
.addr { display: grid; gap: 0.6rem; align-content: start; justify-items: start; position: relative; padding-top: 0.5rem; font-size: var(--step-body); font-weight: 500; }
.addr a { text-decoration: none; }
.addr a:hover { color: var(--rasp); }
.stamp { position: absolute; right: 0; top: 0; width: 5.5rem; background: var(--paper); padding: 6px; outline: 2px dashed var(--blush); outline-offset: -1px; rotate: 4deg; }
.stamp img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.imprint { grid-column: 1 / -1; text-align: center; font-size: var(--step-small); color: var(--soft); padding-top: 1.5rem; }
@media (max-width: 760px) { .postcard { grid-template-columns: 1fr; } .stamp { width: 4rem; top: -1rem; } }

.mock-note { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 20; max-width: 17rem; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 0.7rem 0.9rem; font-size: var(--step-small); line-height: 1.35; font-weight: 500; }
.mock-note button { all: unset; cursor: pointer; font-weight: 700; margin-left: 0.3rem; }

/* entrances: content stays visible without script */
.js .rise { opacity: 0; translate: 0 24px; transition: opacity 700ms var(--ease-out), translate 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js .rise.in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .js .rise { translate: none; transition: opacity 300ms ease; }
  .print, .rec i, .rec span.track b { animation: none; }
  .landed { animation-name: fadein; }
  @keyframes fadein { from { opacity: 0; } }
  .btn, .link span, .shot i, .preview img { transition: none; }
}

/* round 12 (29 Oct): party wall, tighter how / pricing / close, hunt as a game, Studio */
.wall--party { display: none; }
body.parties .wall--wed { display: none; }
body.parties .wall--party { display: grid; }
.hero .lede { max-width: 34rem; }
.hero .acts { gap: 1rem; align-items: stretch; }
.hero .acts .badge { margin: 0; display: flex; }
.hero .acts .badge img { width: auto; height: calc(3.5rem + 4px); display: block; }

.how { padding-block: clamp(4rem, 7vw, 6.5rem); }
.guest-flow { margin-top: 0; align-items: start; }
.flow-col { display: grid; gap: 0; }
.flow-col .how-who { margin-top: 1.75rem; }
.flow-col .flow-steps { margin-top: 2rem; }
.annot--how { padding: 0 0 1rem; }
.how .how-who + .hosts { margin-top: 1.5rem; }
.how > .frame > .how-who { margin-top: clamp(2rem, 4vw, 3rem); }

.hunt-card { background: var(--paper); color: var(--ink); border-radius: 18px; padding: 1.4rem 1.5rem 1.2rem; max-width: 26rem; rotate: -1.5deg; }
.hunt-title { font-weight: 700; font-size: var(--step-lead); letter-spacing: -0.02em; margin-bottom: 0.8rem; }
.hunt-card .tick-list { font-size: var(--step-body); font-weight: 500; letter-spacing: 0; line-height: 1.3; gap: 0.55rem; }
.hunt-card .tick-list li::before { width: 1.1rem; height: 1.1rem; background: none; border: 2px solid var(--line, #D9CFE6); }
.hunt-card .tick-list li.done { color: var(--soft); text-decoration: line-through; text-decoration-color: rgb(0 0 0 / 0.25); }
.hunt-card .tick-list li.done::before { border: 0; background: var(--grad); } /* taste-skill-ignore: badge gradient */
.hunt-meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid rgb(0 0 0 / 0.08); font-size: var(--step-small); color: var(--soft); }
.hunt-meta b { color: var(--ink); }
.hunt-packs { font-size: var(--step-small) !important; opacity: 0.9; }

.studio-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.studio h2 { font-size: var(--step-head); max-width: 16ch; }
.studio .text { margin-top: 1.25rem; max-width: 40ch; font-size: var(--step-body); font-weight: 500; }
.studio-tag { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: var(--step-lead); margin-bottom: 0.75rem; }
.studio-tag span { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--grad); padding: 0.2rem 0.55rem; border-radius: 6px; } /* taste-skill-ignore: badge gradient */
.studio-list { margin: 1.75rem 0 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.75rem; font-size: var(--step-small); color: var(--soft); line-height: 1.4; }
.studio-list b { display: block; color: var(--ink); font-size: var(--step-body); margin-bottom: 0.2rem; }
.browser--studio img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) { .studio-grid, .studio-list { grid-template-columns: minmax(0, 1fr); } }

section.price { margin-top: clamp(4rem, 7vw, 6rem); padding-block: clamp(3.5rem, 6vw, 5rem); }
section.price .meter { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
section.price .meter-l { display: grid; gap: 1.5rem; }
section.price .meter-q { font-size: clamp(2.75rem, 1.5rem + 4vw, 5.5rem); }
section.price .plan { flex-direction: column; align-items: start; gap: 1rem; }
section.price .plan b { font-size: clamp(4rem, 2.5rem + 4vw, 6.5rem); padding: 0.05em 0.12em 0.05em 0.02em; margin-left: -0.02em; }
section.price .after { margin-top: 1.75rem; }
@media (max-width: 860px) { section.price .meter { grid-template-columns: minmax(0, 1fr); } }

.faq { padding-bottom: 0; }
.reply { margin-top: clamp(4rem, 7vw, 6rem); }
.reply-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 1.5rem 3rem; padding-block: clamp(3rem, 5vw, 4rem) clamp(2rem, 3vw, 2.5rem); }
.reply-row h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.75rem); max-width: 18ch; line-height: 1; }
.reply-acts { display: grid; gap: 0.6rem; justify-items: start; }
.reply-acts p { font-size: var(--step-small); opacity: 0.9; }
.reply-strip { overflow: hidden; padding-bottom: clamp(2rem, 3vw, 2.5rem); }
.rtrack { display: flex; gap: 0.7rem; width: max-content; animation: rstrip 70s linear infinite; }
.rtrack img { width: clamp(6rem, 9vw, 8.5rem); aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.rtrack img:nth-child(odd) { rotate: -2deg; } .rtrack img:nth-child(even) { rotate: 2deg; }
@keyframes rstrip { to { translate: calc(-50% - 0.35rem) 0; } }
@media (prefers-reduced-motion: reduce) { .rtrack { animation: none; } }
.reply-strip--party { display: none; }
body.parties .reply-strip--wed { display: none; }
body.parties .reply-strip--party { display: block; }
.studio { padding-top: clamp(4rem, 7vw, 6rem); }
.studio h2 { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem); }
.sheet-body .hunt-title { font-weight: 700; font-size: var(--step-lead); }
.bar .frame { grid-template-columns: max-content minmax(0, 1fr) max-content; }
.bar .aud { justify-self: center; }
@media (min-width: 721px) { .bar .aud { justify-self: start; } } /* same spot on every page, so switching to Studio and back does not move it */
.bar-right { gap: 1.25rem; }
.bar nav { gap: 1.25rem; }
@media (max-width: 1320px) { .bar nav { display: none; } }
@media (max-width: 860px) { section.price .meter-l { display: contents; } section.price .meter-q { order: 0; } section.price .plan { order: 1; } section.price .track { order: 2; } }
.studio-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.studio-price { display: flex; align-items: center; gap: 0.6rem; }
.studio-price b { font-size: clamp(3rem, 2rem + 3vw, 4.25rem); font-weight: 700; letter-spacing: -0.05em; line-height: 0.9; padding-right: 0.08em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* taste-skill-ignore: badge gradient */
.studio-price span { font-size: var(--step-small); line-height: 1.25; color: var(--soft); font-weight: 500; }
.studio-note { max-width: 46ch; margin-top: 0.9rem; font-size: var(--step-small); color: var(--soft); }
.pro-plan { margin-top: 1.75rem; font-size: var(--step-body); font-weight: 500; }
.pro-plan a { color: #fff; font-weight: 700; text-underline-offset: 0.2em; margin-left: 0.25rem; }
@media (min-width: 961px) { .hero-copy { max-width: min(44rem, calc(50vw - var(--margin) - 3rem)); } .hero h1 { font-size: clamp(2.6rem, 0.9rem + 4.2vw, 5.25rem); } }
#hunt { padding-top: clamp(4rem, 7vw, 6rem); }
.sheets-head { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 861px) { .sheet { padding-inline: max(0px, calc((100% - 92rem) / 2)); grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.sheet-text { padding-block: clamp(2.5rem, 4.5vw, 4rem); }
.sheet-body { max-width: 46ch; }
.sheet-app { padding: clamp(1.5rem, 3.5vw, 3rem); }
@media (max-width: 960px) {
  .hero { display: flex; flex-direction: column; }
  .hero .wall { order: -1; height: 15rem; margin: 0 0 2.25rem; }
}
@media (max-width: 720px) { .hero { padding-top: 9.5rem; } }
.aud .aud-link { display: inline-flex; align-items: center; color: var(--ink); font: 600 var(--step-small)/1 var(--font); padding: 0.7rem 1.05rem; border-radius: 999px; text-decoration: none; white-space: nowrap; transition: background-color 160ms ease, color 160ms ease; }
.aud .aud-link:hover { background: var(--blush); }
.on-photo { padding: 0; gap: 0; background: none; left: 0.45rem; bottom: 0.45rem; }
.on-photo img { width: 1.9rem !important; height: 1.9rem; filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.45)); }

/* party versions of the demo screens (stand-ins built from the licensed party frames) */
.p-only, .wa-party, .scroll--party { display: none; }
body.parties .w-only, body.parties .wa-wed, body.parties .scroll--wed { display: none; }
body.parties .p-only { display: inline; }
body.parties .wa-party { display: block; }
body.parties .scroll--party { display: block; }
img.p-img { display: none; }
body.parties img.w-img { display: none; }
body.parties img.p-img { display: block; }
.wa-party { position: relative; container-type: inline-size; aspect-ratio: 16 / 10; overflow: hidden; background: #F8F6FA; font-family: var(--font); }
.wa-party--album { aspect-ratio: 16 / 11; }
.wa-head { position: relative; display: flex; justify-content: space-between; align-items: center; height: 11cqw; padding: 0 9.2cqw; color: #fff; background: linear-gradient(rgb(30 16 40 / 0.78), rgb(30 16 40 / 0.78)), url("/v2/fb1617445801.webp") center 40% / cover; } /* taste-skill-ignore: app header scrim */
.wa-head small { display: block; font-size: 0.8cqw; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.wa-head b { display: block; font-size: 2.5cqw; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.wa-head span { font-size: 1.05cqw; opacity: 0.75; }
.wa-btns { display: flex; gap: 0.75cqw; }
.wa-btns i { font-style: normal; font-weight: 600; font-size: 1.1cqw; padding: 0.95cqw 1.6cqw; border-radius: 0.7cqw; border: 1px solid rgb(255 255 255 / 0.5); }
.wa-btns i + i { background: #fff; color: #2B1A2E; border-color: #fff; }
.wa-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.45cqw; padding: 1.9cqw 9.2cqw; }
.browser .wa-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0.3cqw; }
.browser .wa-party .wa-nav { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; aspect-ratio: 20 / 1; }
.sc-album { container-type: inline-size; }
.pa { padding: 4cqw 2.8cqw 0; color: #111; font-family: -apple-system, "SF Pro Text", var(--font); }
.pa-top { display: flex; justify-content: space-between; }
.pa-top i { font-style: normal; font-size: 3.6cqw; color: #5A2BD8; background: #fff; border-radius: 99px; padding: 1.6cqw 3.6cqw; box-shadow: 0 1px 3px rgb(0 0 0 / 0.08); }
.pa-h { font-size: 8cqw; font-weight: 700; margin: 2.5cqw 0 3cqw; letter-spacing: -0.02em; }
.pa-card { border-radius: 5cqw; padding: 5cqw 4cqw; color: #fff; background: linear-gradient(110deg, #DB337D, #8542DB 55%, #5729E0); } /* taste-skill-ignore: app card */
.pa-card small { display: block; font-size: 2.6cqw; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.9; }
.pa-card b { display: block; font-size: 5.6cqw; font-weight: 700; margin: 1cqw 0; }
.pa-card span { font-size: 3.2cqw; line-height: 1.3; display: block; }
.pa-ph { margin-top: 4cqw; } .pa-ph b { display: block; font-size: 4.3cqw; } .pa-ph span { font-size: 2.8cqw; color: #666; }
.pa-add { margin: 3cqw 0 4cqw; text-align: center; color: #fff; background: #5A2BD8; border-radius: 99px; padding: 3cqw; font-size: 3.6cqw; }
.pa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8cqw; }
.scroll .pa-grid img { width: 100%; margin: 0; aspect-ratio: 1; object-fit: cover; border-radius: 0.6cqw; }

.sheet--reel { background: var(--paper); }
.sheet--reel .sheet-body b { font-weight: 700; }
.phone--crop { border-radius: 1.6rem; overflow: hidden; width: min(26rem, 100%); }
.phone--crop img { display: block; width: 100%; height: auto; }
.how > .frame > h2 + .how-who { margin-top: 1.25rem; }
.hosts + .guest-flow { margin-top: clamp(3.5rem, 6vw, 5rem); }
.hosts + .guest-flow .flow-col .how-who { margin-top: 0; }
.reel-shot { width: min(28rem, 100%); border-radius: 1.4rem; overflow: hidden; rotate: 2deg; border: 6px solid #1B1320; box-shadow: 0 40px 80px -40px rgb(43 26 46 / 0.45); } /* taste-skill-ignore: device frame */
.reel-shot img { display: block; width: 100%; height: auto; }

/* Studio page */
.aud .aud-link.is-on { background: var(--grad); color: var(--paper); } /* taste-skill-ignore: badge gradient */
.s-hero { background: var(--blush); padding-block: clamp(7.5rem, 10vw, 9rem) clamp(4rem, 7vw, 6rem); }
.s-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.s-hero-copy { display: grid; }
.s-kicker { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; font-size: var(--step-body); margin-bottom: 1.25rem; }
.s-kicker img { width: 2.4rem; height: 2.4rem; }
.s-hero h1 { font-size: clamp(2.6rem, 1.2rem + 4vw, 5rem); }
.s-hero .lede { margin-top: 1.5rem; font-size: var(--step-lead); line-height: 1.35; font-weight: 500; max-width: 34rem; }
.s-hero .acts { margin-top: 2rem; display: flex; }
.s-hero .note { margin-top: 1rem; font-size: var(--step-small); color: var(--soft); }
.s-hero-shot { rotate: 1.5deg; }
.s-hero-shot img, .s-control .browser img { display: block; width: 100%; height: auto; }
.s-sec { padding-top: clamp(4.5rem, 8vw, 7rem); }
.s-sec h2 { font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.75rem); max-width: 18ch; }
.s-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.s-two--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.s-steps { margin-top: 2rem; }
.s-phone { width: min(17rem, 80%); justify-self: center; }
.s-phone img { display: block; width: 100%; height: auto; }
.s-toggles { margin-top: 1.75rem; display: grid; gap: 1rem; }
.s-toggles li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: 0.9rem; font-size: var(--step-small); color: var(--soft); line-height: 1.4; }
.s-toggles li { position: relative; }
.s-toggles li::before { content: ""; grid-row: 1 / 3; align-self: start; margin-top: 0.1rem; width: 2.4rem; height: 1.4rem; border-radius: 999px; background: var(--indigo); }
.s-toggles li::after { content: ""; position: absolute; left: 1.15rem; top: 0.25rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 2px rgb(43 26 46 / 0.25); }
.s-toggles li.s-radio::before { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0 0.55rem; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 0.3rem var(--paper), inset 0 0 0 1.25rem var(--indigo), 0 0 0 1.5px var(--indigo); }
.s-toggles li.s-radio::after { content: none; }
.s-toggles b { color: var(--ink); font-size: var(--step-body); }
.s-why-grid { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 3rem; max-width: 64rem; }
.s-why-grid p { font-size: var(--step-body); color: var(--soft); line-height: 1.45; }
.s-why-grid b { display: block; color: var(--ink); font-size: var(--step-lead); letter-spacing: -0.02em; margin-bottom: 0.25rem; }
.s-shots { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; max-width: 64rem; }
.s-shots figure { position: relative; }
.s-shots figure > img:first-child { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
.s-shots .seal { position: absolute; left: 0.6rem; bottom: 0.6rem; width: 2.2rem; height: 2.2rem; filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.45)); }
@media (max-width: 600px) { .s-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.s-badges { margin-top: 2.5rem; }
.s-badges img { width: 4.25rem; height: 4.25rem; }
.s-price { margin-top: clamp(4.5rem, 8vw, 7rem); padding-block: clamp(3.5rem, 6vw, 5rem); }
.s-price-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.s-price h2 { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.5rem); }
.s-price-sub { margin-top: 1.25rem; font-size: var(--step-lead); font-weight: 500; max-width: 30ch; }
.s-period { margin-top: 2rem; display: inline-flex; gap: 0.2rem; padding: 0.25rem; border-radius: 999px; background: rgb(255 255 255 / 0.18); }
.s-period button { border: 0; background: transparent; color: var(--paper); font: 600 var(--step-small)/1 var(--font); padding: 0.75rem 1.1rem; border-radius: 999px; cursor: pointer; }
.s-period button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.s-plan { flex-direction: column; align-items: start; gap: 0.9rem; }
.s-amount { display: flex; align-items: baseline; gap: 0.6rem; }
.s-amount b { font-size: clamp(4rem, 2.5rem + 4vw, 6.5rem); padding: 0.05em 0.12em 0.05em 0.02em; }
.s-amount span { color: var(--soft); font-size: var(--step-body); }
.s-plan ul { display: grid; gap: 0.5rem; margin: 0.25rem 0 0.75rem; }
.s-plan ul li { display: flex; gap: 0.6rem; align-items: center; font-size: var(--step-body); }
.s-plan ul li::before { content: ""; flex: none; width: 1.1rem; height: 1.1rem; background: url("/v2/ef4e72e11caa.svg") center / contain no-repeat; }
.s-plan-note { font-size: var(--step-small); color: var(--soft); }
.s-plan-note a { color: var(--ink); font-weight: 600; }
.studio-page .reply-row { justify-content: flex-start; }
#faq { padding-top: clamp(4.5rem, 8vw, 7rem); }
@media (max-width: 900px) {
  .s-hero-grid, .s-two, .s-two--flip, .s-price-grid, .s-why-grid { grid-template-columns: minmax(0, 1fr); }
  .s-two--flip .browser { order: 2; }
  .s-hero-shot { rotate: 0deg; }
}
@media (max-width: 720px) { .s-hero { padding-top: 10.5rem; } }

/* ---- What the port adds to the mockup ---- */

/* The shared footer. Every marketing, legal and 404 page carries this markup
   character for character (test/marketing-pages.test.ts), so the landing page
   keeps it and dresses it as the mockup's foot band instead. */
footer.foot { background: var(--blush); padding: clamp(3rem, 6vw, 4.5rem) var(--margin) 2rem; display: grid; gap: 1.75rem; max-width: none; }
footer.foot > * { width: 100%; max-width: 88rem; margin-inline: auto; }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.foot-brand { display: flex; align-items: center; gap: 0.7rem; font-weight: 700; font-size: 1.3rem; letter-spacing: -0.03em; text-decoration: none; margin-right: auto; }
.foot-brand .mark { width: 2.5rem; height: 2.5rem; border-radius: 0.6rem; background: center / contain no-repeat; }
footer.foot .foot-social { display: flex; gap: 0.25rem; }
.foot-app img { display: block; height: 40px; width: auto; }
.foot-pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem 2rem; font-weight: 500; }
.foot-pages a, .foot-links a { text-decoration: none; }
.foot-pages a:hover, .foot-links a:hover { color: var(--rasp); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; font-size: var(--step-small); color: var(--soft); padding-top: 1rem; }
.foot-links span a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.foot-links > span { margin-right: auto; }
@media (max-width: 760px) { .foot-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-links > span { flex-basis: 100%; } }

/* Join an event: the nav entry and its dialog. */
.bar nav .nav-join { border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer; white-space: nowrap; transition: color 160ms ease; }
.bar nav .nav-join:hover { color: var(--rasp); }
.join-dialog { width: min(26rem, calc(100vw - 2rem)); border: 0; border-radius: 20px; padding: 1.75rem; background: var(--paper); color: var(--ink); font-family: var(--font); }
.join-dialog::backdrop { background: rgb(43 26 46 / 0.4); }
.join-dialog h2 { font-size: 2rem; }
.join-dialog p { margin-top: 0.6rem; color: var(--soft); font-size: var(--step-small); }
.join-eyebrow { font-weight: 700; letter-spacing: 0.14em; font-size: 0.75rem; color: var(--rasp) !important; }
.join-close-form { position: absolute; right: 0.75rem; top: 0.75rem; }
.join-close { border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--soft); width: 2.75rem; height: 2.75rem; }
.join-dialog [data-join-form] { margin-top: 1.25rem; display: grid; gap: 0.6rem; }
.join-dialog label, .st-form label, .notify label { font-weight: 600; font-size: var(--step-small); }
.join-dialog input, .st-form input, .st-form select, .notify input { font: 500 var(--step-body)/1.2 var(--font); color: var(--ink); padding: 0.85rem 1rem; border-radius: 14px; border: 2px solid var(--peach); background: var(--paper); width: 100%; min-height: 3.2rem; }
.join-dialog input:focus, .st-form input:focus, .st-form select:focus, .notify input:focus { outline: none; border-color: var(--rasp); }
.join-error { color: #A3164F !important; }
.join-dialog .btn, .st-form .btn, .notify .btn { border: 0; font: inherit; }
.join-dialog .btn .face, .st-form .btn .face, .notify .btn .face { padding: 0 1.35rem; }

/* Sports: coming soon. The pill in the switch, the email field in the hero,
   and the sideline in place of the photo wall. */
.aud small.soon { display: inline-block; margin-left: 0.35rem; padding: 0.2rem 0.45rem; border-radius: 999px; background: var(--blush); color: var(--rasp); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; }
.aud button[aria-pressed="true"] small.soon { background: rgb(255 255 255 / 0.25); color: var(--paper); }
body.sports { --rasp: #2F5BFF; --blush: #E4E9FF; --apricot: #FFD23F; --peach: #FFF4C7; --ground: #F6F7FB; --ink: #12162B; --soft: #5C6178; }
.notify, .sideline { display: none; }
body.sports .notify { display: grid; gap: 0.6rem; margin-top: 2rem; max-width: 34rem; }
body.sports .sideline { display: block; }
body.sports .hero .acts, body.sports .hero .note, body.sports .wall { display: none; }
.notify-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.notify-row input { flex: 1 1 14rem; }
.notify-note { min-height: 1.5em; font-size: var(--step-small); color: var(--soft); }
.notify-note.error { color: #A3164F; }
.sideline { position: absolute; z-index: 1; top: 50%; right: var(--margin); width: min(40vw, 38rem); translate: 0 -50%; rotate: 2deg; background: var(--paper); padding: 0.6rem; border-radius: 22px; }
.sideline > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; }
.sideline .sign { position: absolute; left: -1.5rem; bottom: -1.5rem; rotate: -5deg; display: grid; justify-items: center; gap: 0.5rem; padding: 1rem 1.1rem; background: var(--paper); border-radius: 16px; font-size: var(--step-small); font-weight: 500; text-align: center; max-width: 11rem; }
.sideline .sign b { font-weight: 700; font-size: var(--step-body); }
.sideline .sign canvas { width: 5rem; aspect-ratio: 1; image-rendering: pixelated; }
@media (max-width: 960px) { .sideline { position: relative; top: auto; right: auto; translate: none; width: auto; margin: 3rem var(--margin) 1rem; } }

/* Studio: the steps read as h4 in the mockup; the invite form. */
.s-invite .st-form { display: grid; gap: 0.6rem; background: var(--paper); padding: clamp(1.25rem, 3vw, 2rem); border-radius: 22px; }
.s-invite .st-form .btn { margin-top: 0.8rem; justify-self: start; }
.st-optional { font-weight: 500; color: var(--soft); }
.st-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.st-note { min-height: 1.5em; font-size: var(--step-small); color: var(--soft); }
.st-note.error { color: #A3164F; }
.st-form.done h3 { font-size: var(--step-lead); }
.plan-info .link { margin-top: 0.9rem; }


/* With the SPORTS flag on (src/index.ts markSports), Sports is no longer
   coming soon: its hero gets the buttons back instead of the email field. */
html[data-sports="on"] body.sports .hero .acts { display: flex; }
html[data-sports="on"] body.sports .notify { display: none; }

/* No sideways scroll at any width. At 390 the switch with the Soon pill was
   2px too wide; at 1280 the demo's last callout ("Every guest's photos, one
   album") reached 9px past the edge, so its section clips sideways. */
.how { overflow-x: clip; }
@media (max-width: 440px) {
  .aud button, .aud .aud-link { padding: 0.65rem 0.62rem; }
  .aud small.soon { margin-left: 0.2rem; padding: 0.15rem 0.35rem; }
}
/* At 320 the page was 338px wide: the switch's four pills need 334px of a
   280px row, the album phone's 4deg turn carried it 7px past its column, and
   the Pro card's unbreakable studio name held it at 320px wide. */
@media (max-width: 359px) {
  .aud { gap: 0; }
  .aud button, .aud .aud-link { padding-inline: 0.4rem; font-size: 0.75rem; }
  .aud small.soon { margin-left: 0.15rem; padding: 0.1rem 0.3rem; font-size: 0.625rem; }
  .phone--album { right: 0.5rem; }
  .pro-card { padding: 1.25rem; }
  .pro-top b { white-space: normal; }
}

/* The camcorder's REC dot was the one loop left running under reduced motion. */
@media (prefers-reduced-motion: reduce) { .osd-rec i, .rec i { animation: none; } }

/* Sign in stays on screen at every width. The mockup hides the whole nav
   under 1320px, which took the way back in away from a host on a phone,
   the regression Jason found on 22 September. */
@media (max-width: 1320px) { .bar nav { display: flex; } .bar nav > :not([data-signin]) { display: none; } }

/* Studio's steps are h3 (heading order); same look as the landing page's h4 steps. */
.s-steps h3 { margin: 0 0 0.3rem; font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }

/* The hero comes in on its own, from the first paint, instead of waiting for
   site.js to load and add .in: waiting parked the headline invisible for
   seconds on a phone (Lighthouse LCP 11.8s on staging). CLAUDE.md: content is
   never parked invisible; the animation starts on load.
   It starts at opacity 0.01, not 0, which looks the same: Chrome does not count
   a paint at opacity 0 as the largest paint, so starting from 0 made a phone's
   LCP the later moment site.js rewrote the hero words (5.9s against 0.7s,
   throttled phone on staging, 30 October). */
@keyframes hero-up { from { opacity: 0.01; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
.hero .rise, .js .hero .rise, .s-hero .rise, .js .s-hero .rise { opacity: 1; translate: 0 0; transition: none; animation: hero-up 700ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms); }
@media (prefers-reduced-motion: reduce) { .hero .rise, .js .hero .rise, .s-hero .rise, .js .s-hero .rise { animation: none; } }

/* Moving between audiences without a jump (J, 30 October). The switch shows
   the asked for audience from the first paint, before site.js sets
   aria-pressed; an arrival from one of our own pages does not replay the hero
   entrance; and browsers that can cross fade one page into the next do. */
body.parties .aud button[data-aud="weddings"], body.sports .aud button[data-aud="weddings"] { background: transparent; color: var(--ink); }
body.parties .aud button[data-aud="parties"], body.sports .aud button[data-aud="sports"] { background: var(--grad); color: var(--paper); }
body.sports .aud button[data-aud="sports"] small.soon { background: rgb(255 255 255 / 0.25); color: var(--paper); }
.from-site .hero .rise, .from-site .s-hero .rise { animation: none; }
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Sports is coming soon, so its page is the hero and the sign up, nothing else. */
body.sports main > section:not(.hero) { display: none; }
/* With the flag on, Sports is a full page again. */
html[data-sports="on"] body.sports main > section:not(.hero) { display: revert; }

/* The phone top bar (J, 30 October): the brand, a Sign in pill and the start
   button on one row with room between them, the switch on the next. */
.bar nav [data-signin] { white-space: nowrap; }
@media (max-width: 720px) {
  .bar .frame { column-gap: 0.75rem; }
  .bar .mark { font-size: 1.05rem; gap: 0.5rem; min-width: 0; }
  .bar .mark img { width: 2rem; height: 2rem; }
  .bar-right { gap: 0.5rem; }
  .bar nav [data-signin] { display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0 0.85rem; border-radius: 999px; background: var(--paper); font-weight: 600; }
  .bar .btn .face { padding: 0 0.85rem; }
  .bar .btn .face img { display: none; }
}
@media (max-width: 400px) { .bar .mark { font-size: 0; gap: 0; } }

/* Tablet widths (J, 30 October): from 721 to 900 px the switch did not fit
   between the brand and Sign in and ran under them, so it takes its own row
   there too, as on phones. */
@media (min-width: 721px) and (max-width: 900px) {
  .bar .frame { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.75rem; }
  .bar .aud { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .hero { padding-top: 9.5rem; }
  .s-hero { padding-top: 10.5rem; }
}

/* On a phone the hero is a column whose base rule centres its children, so the
   photo wall was as wide as the photos parsed so far: 62px, then the full width
   once the rest arrived, a layout shift of 0.062 on a fast load. It stretches. */
@media (max-width: 960px) { .hero .wall { align-self: stretch; } }