/*
 * BirthdayPartyPal brand + marketing site. Tokens and rules are documented in BRAND.md.
 * Mobile-first. Motion is transform/opacity only and always switched off for reduced motion.
 * Marketing classes are prefixed (mk-, b-) so they never collide with the invite's ui.css,
 * which is also on the page for the live theme previews.
 */

/* ---------- metric-matched fallbacks: no layout shift while the web fonts arrive ---------- */
@font-face { font-family: "Bricolage Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 103%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Figtree Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 100%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }

body.mk {
  /* palette */
  --midnight: #1a1433; --midnight-2: #261c4d; --night: #120d26;
  --ink: #1a1433; --ink-2: #4b4466; --ink-3: #635c7c;
  --frosting: #fff8f0; --paper: #ffffff; --blush: #ffeef2; --lilac: #f1ecff; --peach: #fff0e3; --mintwash: #e6faf4;
  --balloon: #d42f68; --balloon-hi: #ee4c76; --balloon-soft: #ffd6e0;
  --sunbeam: #ffc23d; --mint: #2ec4a0; --sky: #4d9fff; --grape: #7b5cff; --grape-ink: #5636c9; --coral: #ff7a59;
  --line: #ece3f2; --line-2: #e0d5ea;
  --celebrate: linear-gradient(115deg, #ff7a59 0%, #ee4c76 38%, #b23fd1 72%, #7b5cff 100%);
  /* type */
  --f-display: "Bricolage Grotesque", "Bricolage Fallback", system-ui, sans-serif;
  --f-body: "Figtree", "Figtree Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* shape + depth */
  --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-xl: 40px;
  --sh-1: 0 1px 2px rgba(26, 20, 51, .06), 0 4px 12px rgba(26, 20, 51, .06);
  --sh-2: 0 2px 6px rgba(26, 20, 51, .06), 0 18px 40px -12px rgba(26, 20, 51, .18);
  --sh-3: 0 4px 10px rgba(26, 20, 51, .08), 0 40px 80px -24px rgba(40, 18, 80, .35);
  /* motion */
  --ease: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 180ms; --t-med: 360ms; --t-slow: 720ms;
  /* the invite's ui.css reads these, so anything it styles on this page matches the brand */
  --bg: var(--frosting); --bg2: var(--lilac); --card: #fff; --cardInk: var(--ink); --muted: var(--ink-2); --accent: var(--balloon); --gold: var(--sunbeam);
  --font-display: var(--f-display); --font-body: var(--f-body);
  margin: 0; background: var(--frosting); color: var(--ink); font-family: var(--f-body); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
body.mk *, body.mk *::before, body.mk *::after { box-sizing: border-box; }
/* Nothing on a marketing page may widen the phone's layout viewport. body's overflow-x: clip
   propagates to the viewport, and Chrome on Android still sizes the layout viewport to the content:
   a reveal waiting off screen (translateX 28px) or a chip row's bleed made the home page 388px wide
   at 375. The visual viewport then panned (26px) when the try-it name was focused, so taps landed
   below what they aimed at. Clipping inside <main> keeps the page exactly the screen's width
   (clip, not hidden: no scroll container, so sticky headers and view timelines keep working). */
body.mk main { overflow-x: clip; }
.mk ::selection { background: var(--balloon-soft); color: var(--ink); }
.mk h1, .mk h2, .mk h3, .mk h4 { font-family: var(--f-display); color: inherit; letter-spacing: -.02em; line-height: 1.05; margin: 0 0 .45em; font-weight: 750; font-variation-settings: "opsz" 64; }
.mk p { margin: 0 0 1em; }
.mk a { color: var(--balloon); text-underline-offset: .18em; text-decoration-thickness: .08em; }
.mk a:hover { text-decoration-thickness: .14em; }
.mk :focus-visible { outline: 3px solid var(--grape); outline-offset: 3px; border-radius: 10px; }
.mk-dark :focus-visible { outline-color: var(--sunbeam); }
.mk img, .mk svg { max-width: 100%; }
:where(.mk) button { font: inherit; color: inherit; }
.mk .ic { width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none; }
.mk-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--midnight); color: #fff !important; padding: 10px 16px; border-radius: 12px; font-weight: 700; text-decoration: none; transition: transform var(--t-fast) var(--ease); }
.mk-skip:focus { transform: translateY(72px); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- layout ---------- */
.mk-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.mk-narrow { max-width: 780px; }
@media (max-width: 400px) { .mk-wrap { padding: 0 16px; } }
.mk-section { padding: 72px 0; position: relative; }
@media (min-width: 900px) { .mk-section { padding: 104px 0; } }
.mk-section--tight { padding: 48px 0; }
.mk-sec-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
@media (min-width: 900px) { .mk-sec-head { margin-bottom: 64px; } }
.mk-sec-head--left { margin-left: 0; text-align: left; }
.mk-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-body); font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--balloon); margin: 0 0 14px; }
.mk-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.mk-h1 { font-size: clamp(2.5rem, 5.6vw + .6rem, 5.2rem); font-weight: 800; letter-spacing: -.035em; line-height: .98; font-variation-settings: "opsz" 96; }
.mk-h2 { font-size: clamp(2rem, 3.4vw + .7rem, 3.5rem); letter-spacing: -.03em; line-height: 1.02; }
.mk-h3 { font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem); letter-spacing: -.015em; line-height: 1.15; }
.mk-lede { font-size: clamp(1.08rem, .5vw + 1rem, 1.3rem); color: var(--ink-2); line-height: 1.55; max-width: 60ch; }
.mk-sec-head .mk-lede { margin-left: auto; margin-right: auto; }
.mk-muted { color: var(--ink-2); }
.mk-fine { font-size: .9rem; color: var(--ink-3); }
.mk-ink-grad { background: var(--celebrate); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mk-ul { position: relative; white-space: nowrap; }
.mk-ul::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: .02em; height: .2em; border-radius: 1em; background: var(--sunbeam); opacity: .55; z-index: -1; transform-origin: left; transform: scaleX(var(--ul, 1)); transition: transform 900ms var(--ease) 500ms; }
.js-motion .mk-ul:not(.is-in)::after { --ul: 0; }

/* dark sections */
.mk-dark { background: var(--night); color: #f4f0ff; --ink-2: #c9c1e6; --ink-3: #ada4cf; --line: rgba(255, 255, 255, .1); }
.mk-dark .mk-eyebrow { color: var(--sunbeam); }
.mk-dark a { color: #ffc6d6; }
.mk-tint-blush { background: linear-gradient(180deg, var(--frosting), var(--blush) 30%, var(--frosting)); }
.mk-tint-lilac { background: linear-gradient(180deg, var(--frosting), var(--lilac) 30%, var(--frosting)); }

/* ---------- buttons ---------- */
.b-btn { --bb: var(--balloon); --bf: #fff; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 24px;
  border: 0; border-radius: 999px; background: var(--bb); color: var(--bf) !important; font-family: var(--f-body); font-weight: 700; font-size: 1.02rem; letter-spacing: -.005em; line-height: 1.1;
  text-decoration: none !important; cursor: pointer; isolation: isolate; overflow: hidden; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 24px -10px color-mix(in srgb, var(--bb) 80%, transparent), 0 2px 4px rgba(26, 20, 51, .12);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), background-color var(--t-fast); -webkit-tap-highlight-color: transparent; }
.b-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); transition: transform 700ms var(--ease); }
.b-btn:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 16px 32px -12px color-mix(in srgb, var(--bb) 90%, transparent), 0 3px 6px rgba(26, 20, 51, .14); }
.b-btn:hover::after { transform: translateX(120%); }
.b-btn:active { transform: translateY(0) scale(.98); transition-duration: 80ms; }
.b-btn .ar { width: 18px; height: 18px; transition: transform var(--t-med) var(--ease-spring); }
.b-btn:hover .ar { transform: translateX(4px); }
.b-btn--ink { --bb: var(--midnight); }
.b-btn--light { --bb: #fff; --bf: var(--midnight); }
.b-btn--ghost { --bb: transparent; --bf: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); background: rgba(255, 255, 255, .55); }
.b-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); background: #fff; }
.mk-dark .b-btn--ghost { --bf: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); }
.mk-dark .b-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; background: rgba(255, 255, 255, .12); }
.b-btn--sm { min-height: 42px; padding: 10px 18px; font-size: .95rem; }
.b-btn--lg { min-height: 60px; padding: 18px 30px; font-size: 1.1rem; }
.b-btn--block { width: 100%; }
.b-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink) !important; text-decoration: none !important; }
.b-link .ar { width: 16px; height: 16px; transition: transform var(--t-med) var(--ease-spring); }
.b-link:hover .ar { transform: translateX(4px); }
.b-link:hover { color: var(--balloon) !important; }
.mk-dark .b-link { color: #fff !important; }
.mk-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 480px) { .mk-ctas .b-btn { flex: 1 1 100%; } }

/* chips (filters, pickers) */
.b-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--line-2); background: #fff; color: var(--ink);
  font-weight: 650; font-size: .95rem; cursor: pointer; white-space: nowrap; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease); -webkit-tap-highlight-color: transparent; }
.b-chip:hover { border-color: var(--ink-3); }
.b-chip:active { transform: scale(.97); }
.b-chip[aria-pressed="true"], .b-chip[aria-checked="true"], .b-chip[aria-selected="true"] { background: var(--midnight); border-color: var(--midnight); color: #fff; }
.b-chip small { font-weight: 600; opacity: .7; }
.mk-dark .b-chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #fff; }
.mk-dark .b-chip[aria-pressed="true"], .mk-dark .b-chip[aria-checked="true"] { background: #fff; color: var(--midnight); border-color: #fff; }
.mk-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; background: #fff; box-shadow: var(--sh-1); font-weight: 650; font-size: .9rem; color: var(--ink); text-decoration: none; }
.mk-pill b { background: var(--balloon); color: #fff; border-radius: 999px; padding: 2px 9px; font-size: .78rem; letter-spacing: .02em; }

/* ---------- header ---------- */
.mk-head { position: sticky; top: 0; z-index: 50; }
.mk-head__bg { position: absolute; inset: 0; background: rgba(255, 248, 240, .82); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; opacity: 0; transition: opacity var(--t-med) var(--ease), border-color var(--t-med); }
.mk-head.is-condensed .mk-head__bg { opacity: 1; border-color: var(--line); }
.mk-head.on-dark .mk-head__bg { background: rgba(18, 13, 38, .78); border-color: rgba(255, 255, 255, .08); }
.mk-head.on-dark .mk-brand, .mk-head.on-dark .mk-nav a, .mk-head.on-dark .mk-head__signin { color: #fff !important; }
.mk-head.on-dark .mk-brand b { color: #ff9cb6; }
.mk-head.on-dark .mk-nav a:hover, .mk-head.on-dark .mk-head__signin:hover { background: rgba(255, 255, 255, .08); }
.mk-head.on-dark .mk-burger { background: rgba(255, 255, 255, .12); }
.mk-head.on-dark .mk-burger span { background: #fff; }
.mk-head .mk-brand, .mk-head .mk-nav a, .mk-head .mk-head__signin { transition: color var(--t-med) var(--ease), background-color var(--t-fast); }
.mk-head__in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
@media (min-width: 900px) { .mk-head__in { height: 80px; } .mk-head.is-condensed .mk-head__in > * { transform: translateY(0); } }
.mk-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; color: var(--ink) !important; font-family: var(--f-display); font-weight: 800; font-size: 1.22rem; letter-spacing: -.03em; flex: none; }
.mk-brand svg { width: 34px; height: 34px; transition: transform var(--t-med) var(--ease-spring); }
.mk-brand:hover svg { transform: rotate(-8deg) translateY(-2px); }
.mk-brand b { color: var(--balloon); font-weight: 800; }
.mk-nav { display: none; align-items: center; gap: 4px; }
.mk-nav a { position: relative; padding: 10px 14px; border-radius: 999px; color: var(--ink) !important; font-weight: 600; font-size: .98rem; text-decoration: none !important; transition: background-color var(--t-fast); }
.mk-nav a:hover { background: rgba(26, 20, 51, .05); }
.mk-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--balloon); }
.mk-head__act { display: flex; align-items: center; gap: 8px; }
.mk-head__signin { display: none; padding: 10px 12px; font-weight: 650; color: var(--ink) !important; text-decoration: none !important; border-radius: 999px; }
.mk-head__signin:hover { background: rgba(26, 20, 51, .05); }
@media (min-width: 1000px) { .mk-nav { display: flex; } .mk-head__signin { display: inline-flex; } .mk-burger { display: none !important; } }
@media (max-width: 380px) { .mk-brand { font-size: 1.06rem; gap: 8px; } .mk-brand svg { width: 30px; height: 30px; } .mk-head__act .b-btn { padding: 10px 14px; } }
.mk-burger { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 999px; border: 0; background: rgba(26, 20, 51, .06); cursor: pointer; }
.mk-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform var(--t-med) var(--ease); }
.mk-burger span + span { margin-top: -8px; }
.mk-burger i { position: absolute; }
.mk-burger { position: relative; }
.mk-burger span:nth-child(1) { transform: translateY(-4px); }
.mk-burger span:nth-child(2) { transform: translateY(4px); }
.mk-burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.mk-burger[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); }
.mk-burger span { grid-area: 1 / 1; margin: 0 !important; }
.mk-menu { position: fixed; inset: 68px 0 0; z-index: 49; background: var(--frosting); padding: 12px 20px 32px; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(-8px); transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility 0s linear var(--t-med); visibility: hidden; }
.mk-menu.is-open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.mk-menu a.mk-menu__link { display: flex; align-items: center; justify-content: space-between; padding: 16px 4px; border-bottom: 1px solid var(--line); font-family: var(--f-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -.02em; color: var(--ink) !important; text-decoration: none !important;
  opacity: 0; transform: translateY(10px); transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); transition-delay: calc(var(--i, 0) * 40ms + 60ms); }
.mk-menu.is-open a.mk-menu__link { opacity: 1; transform: none; }
.mk-menu a.mk-menu__link .ar { width: 20px; height: 20px; color: var(--ink-3); }
.mk-menu__foot { margin-top: auto; padding-top: 24px; display: grid; gap: 10px; }
body.mk-menu-open { overflow: hidden; }
@media (min-width: 1000px) { .mk-menu { display: none; } }

/* ---------- footer ---------- */
.mk-foot { background: var(--night); color: #d9d2f2; padding: 72px 0 40px; position: relative; overflow: hidden; }
.mk-foot a { color: #f4f0ff !important; text-decoration: none; }
.mk-foot a:hover { text-decoration: underline; }
.mk-foot .mk-brand { color: #fff !important; }
.mk-foot__grid { display: grid; gap: 36px; grid-template-columns: 1fr 1fr; }
.mk-foot__brand { grid-column: 1 / -1; max-width: 360px; }
.mk-foot__brand p { margin-top: 14px; color: #bfb6e0; font-size: .95rem; }
.mk-foot nav { display: grid; gap: 10px; align-content: start; font-size: .97rem; }
.mk-foot nav h2 { font-family: var(--f-body); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #a79ed0; margin: 0 0 4px; font-weight: 700; }
@media (min-width: 900px) { .mk-foot__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .mk-foot__brand { grid-column: auto; } }
.mk-foot__base { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .88rem; color: #a79ed0; }
.mk-foot__promise { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.mk-foot__promise span { display: inline-flex; align-items: center; gap: 6px; }
.mk-foot__promise .ic { color: var(--mint); }
.mk-foot__word { position: absolute; left: 50%; bottom: -0.32em; transform: translateX(-50%); font-family: var(--f-display); font-weight: 800; font-size: clamp(4rem, 15vw, 13rem); letter-spacing: -.05em; line-height: 1; white-space: nowrap; color: rgba(255, 255, 255, .035); pointer-events: none; user-select: none; }

/* ---------- reveal choreography ---------- */
.js-motion [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 800ms var(--ease), transform 900ms var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.js-motion [data-reveal="fade"] { transform: none; }
.js-motion [data-reveal="scale"] { transform: scale(.96) translate3d(0, 16px, 0); }
.js-motion [data-reveal="left"] { transform: translate3d(-28px, 0, 0); }
.js-motion [data-reveal="right"] { transform: translate3d(28px, 0, 0); }
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }
[data-parallax] { will-change: transform; }

/* ---------- confetti field (decorative, parallax) ---------- */
.mk-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.mk-confetti i { position: absolute; display: block; width: var(--w, 12px); height: var(--h, 12px); border-radius: var(--br, 50%); background: var(--c, var(--sunbeam)); opacity: .9; transform: rotate(var(--rot, 0deg)); }
.mk-confetti i.sq { --br: 3px; }
.mk-confetti i.ring { background: none; border: 3px solid var(--c); }
.mk-confetti i.squig { width: 34px; height: 12px; background: none; border-radius: 0; }
.mk-confetti i.squig::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 10px -4px, transparent 9px, var(--c) 9.5px 12.5px, transparent 13px) 0 0 / 20px 12px repeat-x; }
.js-motion .mk-confetti i { animation: mk-bob var(--dur, 7s) ease-in-out infinite; animation-delay: var(--del, 0s); }
@keyframes mk-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* ---------- hero ---------- */
/* overflow: clip, never hidden: a hidden hero is its own (invisible) scroll container. Its decorations
   overflow it by a few pixels, so focusing the try-it name or scrolling a chip into view scrolled the
   hero itself (~15px, its top cut off, no way back), and it jumped again whenever that overflow changed
   (a phone redraw, the try form growing): taps then landed beside the chip. Old browsers keep hidden. */
.mk-hero { position: relative; padding: 24px 0 72px; overflow: hidden; overflow: clip; }
.mk-hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 120%; background:
  radial-gradient(40% 36% at 78% 32%, rgba(238, 76, 118, .16), transparent 70%),
  radial-gradient(36% 30% at 92% 70%, rgba(123, 92, 255, .14), transparent 70%),
  radial-gradient(30% 30% at 10% 20%, rgba(255, 194, 61, .16), transparent 70%); pointer-events: none; }
.mk-hero__grid { position: relative; z-index: 1; display: grid; gap: 48px; align-items: center; }
@media (min-width: 980px) { .mk-hero { padding: 40px 0 120px; } .mk-hero__grid { grid-template-columns: 1.08fr .92fr; gap: 40px; } }
.mk-hero__copy .mk-pill { margin-bottom: 22px; }
.mk-hero__copy .mk-h1 { margin-bottom: 22px; }
.mk-hero__copy .mk-lede { margin-bottom: 30px; }
.mk-hero__trust { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 20px; color: var(--ink-2); font-weight: 600; font-size: .95rem; }
.mk-hero__trust li { display: inline-flex; align-items: center; gap: 7px; }
.mk-hero__trust .ic { color: var(--mint); width: 20px; height: 20px; }
.mk-hero__stage { position: relative; display: grid; place-items: center; min-height: 600px; }
@media (max-width: 979px) { .mk-hero__stage { min-height: 0; } }

/* device mockup */
.mk-device { position: relative; width: 300px; height: 620px; border-radius: 52px; padding: 11px; background: linear-gradient(145deg, #2b2252, #120d26 60%); box-shadow: var(--sh-3), inset 0 0 0 1.5px rgba(255, 255, 255, .14), inset 0 0 0 5px #0b0718; flex: none; }
@media (min-width: 1200px) { .mk-device { width: 320px; height: 660px; } }
@media (max-width: 380px) { .mk-device { width: 272px; height: 560px; border-radius: 46px; } }
.mk-device::before { content: ""; position: absolute; top: 22px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 20px; background: #05030c; z-index: 5; }
.mk-device__screen { position: relative; width: 100%; height: 100%; border-radius: 42px; overflow: hidden; background: var(--lilac); isolation: isolate; transform: translateZ(0); }
@media (max-width: 380px) { .mk-device__screen { border-radius: 36px; } }
.mk-device__layer { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease); }
.mk-device__layer.is-on { opacity: 1; }
.mk-device__layer.is-entering .mk-inv__scroll { animation: mk-enter 1100ms var(--ease) both; }
@keyframes mk-enter { from { transform: scale(var(--s)) translate3d(0, 30px, 0); } to { transform: scale(var(--s)) translate3d(0, 0, 0); } }
.mk-device__glare { position: absolute; inset: 0; border-radius: 42px; background: linear-gradient(125deg, rgba(255, 255, 255, .16) 0%, transparent 32%); pointer-events: none; z-index: 4; }
.mk-device__skel { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(120% 70% at 50% 0%, #fde7ef, var(--lilac)); }
.mk-device__skel svg { width: 64px; height: 64px; opacity: .6; }

/* an invite rendered at phone width and scaled to fit any frame */
.mk-inv { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 70% at 50% 0%, var(--bg2) 0%, var(--bg) 60%), var(--bg); color: var(--ink); font-family: var(--font-body), system-ui, sans-serif; }
.mk-inv__scroll { width: 390px; transform-origin: 0 0; transform: scale(var(--s, .8)); pointer-events: none; }
.mk-inv__scroll .inv { padding-top: 34px; }
.mk-inv.is-auto .mk-inv__scroll { animation: mk-autoscroll var(--scroll-dur, 16s) var(--ease-io) infinite alternate; }
@keyframes mk-autoscroll { 0%, 14% { transform: scale(var(--s)) translate3d(0, 0, 0); } 100% { transform: scale(var(--s)) translate3d(0, var(--scroll-to, -900px), 0); } }
.mk-inv .op-host, .mk-inv .rsvp-pill { display: none !important; }

/* floating notifications around the device */
.mk-toasts { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.mk-toast { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 18px; background: rgba(255, 255, 255, .94); box-shadow: var(--sh-2); font-size: .86rem; line-height: 1.25; color: var(--ink); max-width: 250px;
  opacity: 0; transform: translate3d(0, 14px, 0) scale(.96); transition: opacity 600ms var(--ease), transform 700ms var(--ease-spring); }
.mk-toast.is-on { opacity: 1; transform: none; }
.mk-toast b { display: block; font-weight: 700; }
.mk-toast small { color: var(--ink-3); }
.mk-toast__ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--tc, var(--mint)); }
.mk-toast__ic .ic { width: 18px; height: 18px; }
.mk-toast--a { left: -6%; top: 16%; --tc: var(--mint); }
.mk-toast--b { right: -8%; top: 44%; --tc: var(--grape); }
.mk-toast--c { left: -2%; bottom: 12%; --tc: var(--balloon); }
@media (max-width: 979px) { .mk-toast--a { left: 0; top: 6%; } .mk-toast--b { right: 0; top: 46%; } .mk-toast--c { left: 2%; bottom: 6%; } .mk-toast { max-width: 200px; font-size: .8rem; } }
@media (max-width: 560px) { .mk-toast--b, .mk-toast--c { display: none; } .mk-toast--a { left: auto; right: 0; top: auto; bottom: 14%; } }

.mk-switch { margin-top: 26px; display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; }
.mk-switch__name { font-weight: 700; font-size: .95rem; min-width: 13ch; text-align: left; margin: 0; line-height: 1.25; min-height: 2.5em; white-space: nowrap; }
.mk-switch__name small { display: block; font-weight: 600; color: var(--ink-3); font-size: .8rem; }
.mk-dots { display: flex; gap: 6px; }
.mk-dots button { width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.mk-dots button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dot, #ccc); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line-2); transition: transform var(--t-med) var(--ease-spring), box-shadow var(--t-fast); }
.mk-dots button[aria-pressed="true"]::before { transform: scale(1.35); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink); }
.mk-pause { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line-2); background: #fff; display: grid; place-items: center; cursor: pointer; }
.mk-pause svg { width: 14px; height: 14px; }

/* ---------- three pillars ---------- */
.mk-pillars { display: grid; gap: 18px; }
@media (min-width: 860px) { .mk-pillars { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.mk-pillar { position: relative; background: #fff; border-radius: var(--r-lg); padding: 30px 26px 28px; box-shadow: var(--sh-1); overflow: hidden; transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.mk-pillar:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.mk-pillar__ic { width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; margin-bottom: 20px; color: #fff; background: var(--pc); box-shadow: 0 10px 20px -8px var(--pc); }
.mk-pillar__ic .ic { width: 26px; height: 26px; }
.mk-pillar h3 { font-size: 1.45rem; }
.mk-pillar p { color: var(--ink-2); margin: 0 0 16px; }
.mk-pillar ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-weight: 600; font-size: .95rem; }
.mk-pillar li { display: flex; gap: 8px; align-items: flex-start; }
.mk-pillar li .ic { color: var(--pc); margin-top: 3px; }

/* ---------- the "plans itself" film ---------- */
.mk-film { overflow: hidden; }
.mk-film::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 40% at 20% 0%, rgba(123, 92, 255, .28), transparent 70%), radial-gradient(40% 40% at 90% 30%, rgba(238, 76, 118, .2), transparent 70%); pointer-events: none; }
.film { position: relative; display: grid; gap: 22px; }
@media (min-width: 1000px) { .film { grid-template-columns: 320px 1fr; gap: 32px; align-items: start; } }
.film__rail { display: grid; gap: 18px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--r-lg); padding: 22px; }
@media (min-width: 1000px) { .film__rail { position: sticky; top: 104px; } }
.film__q { display: grid; gap: 10px; }
.film__q > span { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #a79ed0; display: flex; align-items: center; gap: 8px; }
.film__q > span b { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff; font-size: .72rem; letter-spacing: 0; }
.film__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.film__chips .b-chip { min-height: 38px; padding: 6px 12px; font-size: .88rem; }
.film__chips .b-chip.is-cursor { box-shadow: 0 0 0 3px rgba(255, 194, 61, .7); }
.film__bar { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.film__progress { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.film__progress i { display: block; height: 100%; width: 100%; background: var(--celebrate); transform-origin: left; transform: scaleX(var(--p, 0)); }
.film__play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--midnight); display: grid; place-items: center; cursor: pointer; flex: none; }
.film__play svg { width: 16px; height: 16px; }
.film__screen { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .film__screen { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .film__screen { grid-template-columns: 1.05fr 1fr 1fr; } }
.fp { --ink-2: #4b4466; --ink-3: #635c7c; --line: #ece3f2; position: relative; background: #fff; color: var(--ink); border-radius: 22px; padding: 18px 18px 16px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .5); overflow: hidden; min-height: 120px;
  transition: opacity 600ms var(--ease), transform 700ms var(--ease); }
.js-motion .film:not(.is-done) .fp:not(.is-on) { opacity: .5; transform: translate3d(0, 10px, 0) scale(.985); }
.fp__skel { display: none; position: absolute; left: 18px; right: 18px; top: 58px; gap: 12px; }
.fp__skel i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--lilac), #f8f5ff, var(--lilac)); }
.fp__skel i:nth-child(2n) { width: 72%; } .fp__skel i:nth-child(3n) { width: 86%; }
.js-motion .film:not(.is-done) .fp:not(.is-on) .fp__skel { display: grid; }
.fp__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.fp__head h3 { font-family: var(--f-body); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin: 0; color: var(--ink-3); font-weight: 750; display: flex; align-items: center; gap: 8px; }
.fp__head h3 .ic { color: var(--balloon); width: 18px; height: 18px; }
.fp__tag { font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--mintwash); color: #0d7a60; display: inline-flex; gap: 5px; align-items: center; }
.fp__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fp--invite { grid-row: span 2; padding: 0; min-height: 440px; }
@media (max-width: 679px) { .fp--invite { min-height: 420px; } }
.fp--invite .mk-inv { border-radius: 22px; }
.fp ul, .fp ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.fp li { display: flex; gap: 10px; align-items: baseline; font-size: .93rem; line-height: 1.35; opacity: 1; transform: none; transition: opacity 420ms var(--ease), transform 520ms var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js-motion .fp:not(.is-on) li { opacity: 0; transform: translate3d(-8px, 0, 0); }
.fp li b { font-weight: 700; }
.fp li small { color: var(--ink-3); display: block; font-size: .8rem; }
.fp li .qty { margin-left: auto; font-weight: 700; color: var(--balloon); white-space: nowrap; font-size: .86rem; }
.fp li .tm { flex: none; width: 66px; font-weight: 750; color: var(--grape-ink); font-size: .82rem; font-variant-numeric: tabular-nums; }
.fp li .dt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); transform: translateY(-1px); }
.fp--remind li { display: grid; grid-template-columns: 8px 1fr; column-gap: 12px; }
.fp--remind li .dt { margin-top: 7px; }
.fp--remind li em { font-style: normal; display: block; font-size: .82rem; color: var(--ink-2); background: var(--lilac); border-radius: 12px 12px 12px 4px; padding: 7px 10px; margin-top: 4px; }
.film__note { margin-top: 18px; text-align: center; color: #a79ed0; font-size: .9rem; }

/* ---------- how it works ---------- */
.mk-steps { display: grid; gap: 18px; counter-reset: st; list-style: none; padding: 0; margin: 0; }
@media (min-width: 720px) { .mk-steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .mk-steps { grid-template-columns: repeat(4, 1fr); } }
.mk-step { position: relative; background: #fff; border-radius: var(--r-lg); padding: 14px 14px 24px; box-shadow: var(--sh-1); counter-increment: st; }
.mk-step__art { aspect-ratio: 4 / 3; border-radius: 20px; background: var(--sa, var(--lilac)); overflow: hidden; margin-bottom: 18px; position: relative; }
.mk-step__art svg { width: 100%; height: 100%; display: block; }
.mk-step h3 { font-size: 1.25rem; padding: 0 8px; display: flex; gap: 10px; align-items: baseline; }
.mk-step h3::before { content: counter(st, decimal-leading-zero); font-family: var(--f-body); font-size: .8rem; font-weight: 750; color: var(--balloon); letter-spacing: .04em; }
.mk-step p { color: var(--ink-2); margin: 0; padding: 0 8px; font-size: .97rem; }
/* step illustrations animate when the card is revealed */
.ill * { transform-box: fill-box; }
.js-motion .ill .pop { transform: scale(0); transform-origin: center; transition: transform 700ms var(--ease-spring); transition-delay: calc(var(--i, 0) * 120ms + 300ms); }
.js-motion .is-in .ill .pop { transform: scale(1); }
.js-motion .ill .rise { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease), transform 700ms var(--ease); transition-delay: calc(var(--i, 0) * 120ms + 300ms); }
.js-motion .is-in .ill .rise { opacity: 1; transform: none; }
.js-motion .ill .draw { stroke-dasharray: var(--len, 200); stroke-dashoffset: var(--len, 200); transition: stroke-dashoffset 1200ms var(--ease); transition-delay: calc(var(--i, 0) * 120ms + 400ms); }
.js-motion .is-in .ill .draw { stroke-dashoffset: 0; }
.js-motion .is-in .ill .floaty { animation: mk-floaty 4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.7s); }
@keyframes mk-floaty { 50% { transform: translateY(-5px); } }
.js-motion .is-in .ill .fly { animation: mk-fly 3.4s var(--ease) infinite; animation-delay: calc(var(--i, 0) * .5s + .8s); }
@keyframes mk-fly { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--fx, 60px), var(--fy, -30px)) scale(1); opacity: 0; } }
.js-motion .is-in .ill .blink { animation: mk-blink 2.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .3s); }
@keyframes mk-blink { 50% { opacity: .35; } }
.js-motion .is-in .ill .typing { animation: mk-type 3.2s steps(12) infinite; transform-origin: left; }
@keyframes mk-type { 0% { transform: scaleX(0); } 55%, 100% { transform: scaleX(1); } }

/* ---------- feature showcase ---------- */
.feat { display: grid; gap: 20px; }
@media (min-width: 1000px) { .feat { grid-template-columns: 340px 1fr; gap: 36px; align-items: start; } }
.feat__tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 20px 12px; margin: 0 -20px; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent); mask: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent); }
.feat__tabs::-webkit-scrollbar { display: none; }
.feat__tab { scroll-snap-align: start; flex: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 16px 10px 10px; border-radius: 999px; border: 1.5px solid var(--line-2); background: #fff; cursor: pointer; font-weight: 650; font-size: .95rem; text-align: left; color: var(--ink); transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.feat__tab .fi { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--lilac); color: var(--grape); flex: none; transition: background-color var(--t-fast), color var(--t-fast); }
.feat__tab .fi .ic { width: 17px; height: 17px; }
.feat__tab small { display: none; }
.feat__tab[aria-selected="true"] { background: var(--midnight); color: #fff; border-color: var(--midnight); }
.feat__tab[aria-selected="true"] .fi { background: var(--balloon); color: #fff; }
@media (min-width: 1000px) {
  .feat__tabs { flex-direction: column; overflow: visible; padding: 0; margin: 0; gap: 4px; -webkit-mask: none; mask: none; position: sticky; top: 100px; }
  .feat__tab { border-radius: 18px; border-color: transparent; background: transparent; padding: 10px 14px 10px 10px; min-height: 0; }
  .feat__tab:hover { background: rgba(26, 20, 51, .04); }
  .feat__tab span { display: grid; }
  .feat__tab small { display: block; font-weight: 500; font-size: .84rem; color: var(--ink-3); }
  .feat__tab[aria-selected="true"] small { color: #c9c1e6; }
}
.feat__stage { position: relative; min-height: 560px; }
.feat__panel { background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-2); padding: 26px 22px; display: grid; gap: 26px; overflow: hidden; }
@media (min-width: 760px) { .feat__panel { padding: 36px 40px 40px; gap: 28px; } .feat__copy ul { grid-template-columns: 1fr 1fr; column-gap: 20px; } }
.feat__copy h3 + p { max-width: 62ch; }
.feat__panel[hidden] { display: none; }
.js-motion .feat__panel.is-enter > * { animation: mk-panel 600ms var(--ease) both; }
.js-motion .feat__panel.is-enter > *:nth-child(2) { animation-delay: 80ms; }
@keyframes mk-panel { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
.feat__copy h3 { font-size: clamp(1.5rem, 1.6vw + 1rem, 2.1rem); }
.feat__copy p { color: var(--ink-2); }
.feat__copy ul { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; font-weight: 600; font-size: .96rem; }
.feat__copy li { display: flex; gap: 9px; }
.feat__copy li .ic { color: var(--mint); margin-top: 3px; }
.demo { position: relative; background: var(--frosting); border-radius: 26px; padding: 40px 18px 22px; min-height: 360px; display: grid; align-content: center; border: 1px solid var(--line); }
.demo__label { position: absolute; top: 12px; right: 14px; font-size: .7rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.feat__more { margin-top: 26px; display: grid; gap: 12px; }
@media (min-width: 720px) { .feat__more { grid-template-columns: repeat(3, 1fr); } }
.feat__mini { display: flex; gap: 12px; align-items: flex-start; padding: 18px; background: #fff; border-radius: 20px; box-shadow: var(--sh-1); }
.feat__mini .fi { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--blush); color: var(--balloon); flex: none; }
.feat__mini b { display: block; margin-bottom: 2px; }
.feat__mini p { margin: 0; font-size: .92rem; color: var(--ink-2); }

/* small UI kit used inside demos */
.ui-card { background: #fff; border-radius: 18px; box-shadow: var(--sh-1); padding: 14px; }
.ui-row { display: flex; align-items: center; gap: 10px; }
.ui-av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 750; font-size: .82rem; color: #fff; background: var(--av, var(--grape-ink)); }
.ui-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--lilac); color: var(--grape-ink); white-space: nowrap; }
.ui-badge.yes { background: var(--mintwash); color: #0b6e57; }
.ui-badge.no { background: #ffe9ec; color: #a8193f; }
.ui-badge.wait { background: #fff4d6; color: #7a5300; }
.ui-badge.open { background: #e7f1ff; color: #1d5fb8; }
.ui-list { display: grid; gap: 8px; }
.ui-list > * { transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease), background-color var(--t-fast); }
.ui-toggle { position: relative; width: 46px; height: 28px; border-radius: 999px; background: var(--line-2); border: 0; cursor: pointer; flex: none; transition: background-color var(--t-fast); }
.ui-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: transform var(--t-med) var(--ease-spring); }
.ui-toggle[aria-checked="true"], .ui-toggle[aria-pressed="true"] { background: var(--mint); }
.ui-toggle[aria-checked="true"]::after, .ui-toggle[aria-pressed="true"]::after { transform: translateX(18px); }
.ui-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); gap: 2px; flex-wrap: wrap; }
.ui-seg button { border: 0; background: none; padding: 8px 12px; min-height: 36px; border-radius: 999px; font-weight: 650; font-size: .86rem; cursor: pointer; color: var(--ink-2); }
.ui-seg button[aria-pressed="true"] { background: var(--midnight); color: #fff; }
.ui-stat { display: grid; gap: 2px; }
.ui-stat b { font-family: var(--f-display); font-size: 2rem; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ui-stat small { color: var(--ink-3); font-weight: 650; font-size: .78rem; }
.ui-bubble { background: #e9e9ef; color: #1c1c22; border-radius: 18px 18px 18px 6px; padding: 9px 13px; font-size: .9rem; line-height: 1.35; max-width: 92%; justify-self: start; }
.ui-bubble.me { background: #2f7bf6; color: #fff; border-radius: 18px 18px 6px 18px; justify-self: end; }
.ui-bubble small { display: block; opacity: .7; font-size: .72rem; margin-top: 3px; }
.ui-phone { width: min(290px, 100%); margin: 0 auto; background: #fff; border-radius: 30px; box-shadow: var(--sh-2); padding: 14px 12px; display: grid; gap: 8px; border: 1px solid var(--line); }
.ui-phone__top { text-align: center; font-size: .78rem; color: var(--ink-3); font-weight: 650; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.ui-meter { height: 10px; border-radius: 10px; background: var(--lilac); overflow: hidden; display: flex; }
.ui-meter i { display: block; height: 100%; transform-origin: left; transition: transform 900ms var(--ease); }
.ui-input { width: 100%; min-height: 44px; border-radius: 12px; border: 1.5px solid var(--line-2); padding: 9px 12px; background: #fff; font: inherit; font-size: .92rem; }
textarea.ui-input { min-height: 96px; resize: vertical; line-height: 1.4; }
.ui-range { width: 100%; accent-color: var(--balloon); }
.ui-pop { animation: mk-pop 500ms var(--ease-spring) both; }
@keyframes mk-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.ui-slide { animation: mk-slide 520ms var(--ease) both; }
@keyframes mk-slide { from { transform: translate3d(0, 10px, 0); opacity: 0; } to { transform: none; opacity: 1; } }
.ui-check { width: 26px; height: 26px; border-radius: 9px; border: 2px solid var(--line-2); background: #fff; display: grid; place-items: center; cursor: pointer; flex: none; color: transparent; transition: background-color var(--t-fast), border-color var(--t-fast); }
.ui-check[aria-checked="true"], .ui-check[aria-pressed="true"] { background: var(--mint); border-color: var(--mint); color: #fff; }
.ui-check .ic { width: 15px; height: 15px; }
.ui-tv { aspect-ratio: 16 / 10; border-radius: 18px; background: #0b0718; padding: 10px; box-shadow: var(--sh-2); position: relative; }
.ui-tv__screen { position: relative; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; }
.ui-tv__slide { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 14px; opacity: 0; transform: scale(1.04); transition: opacity 700ms var(--ease), transform 1200ms var(--ease); }
.ui-tv__slide.is-on { opacity: 1; transform: none; }
.flyer__qr { width: 96px; height: 96px; flex: none; border-radius: 8px; overflow: hidden; }
.flyer__qr svg { display: block; width: 100%; height: 100%; }

/* ---------- before / after ---------- */
.ba { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-3); background: #fff; user-select: none; -webkit-user-select: none; touch-action: pan-y; --x: 50%; }
.ba__side { position: relative; min-height: 520px; padding: 26px 22px; }
@media (min-width: 760px) { .ba__side { min-height: 560px; padding: 40px; } }
.ba__before { background: #f2f2f6; }
.ba__after { position: absolute; inset: 0; background: linear-gradient(160deg, #fff, var(--lilac)); clip-path: inset(0 0 0 var(--x)); }
.ba__tag { position: absolute; top: 16px; z-index: 3; padding: 6px 12px; border-radius: 999px; font-size: .78rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.ba__before .ba__tag { left: 16px; background: #fff; color: #a8193f; box-shadow: var(--sh-1); }
.ba__after .ba__tag { right: 16px; background: var(--midnight); color: #fff; }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 0; z-index: 4; pointer-events: none; }
.ba__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(26, 20, 51, .08), 0 0 20px rgba(26, 20, 51, .25); }
.ba__knob { position: absolute; top: 50%; left: 0; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: #fff; box-shadow: var(--sh-2); display: grid; place-items: center; color: var(--midnight); transition: transform var(--t-fast) var(--ease); }
.ba__knob svg { width: 26px; height: 26px; }
.ba.is-drag .ba__knob { transform: scale(1.08); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: 5; cursor: ew-resize; margin: 0; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.ba__range:focus-visible + .ba__handle .ba__knob { box-shadow: 0 0 0 4px var(--grape), var(--sh-2); }
.chaos { display: grid; gap: 7px; max-width: 360px; padding-top: 34px; }
.chaos .ui-bubble { font-size: .86rem; padding: 7px 11px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.chaos .ui-bubble.me { background: #34c759; color: #fff; }
.chaos__head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .9rem; color: #555; margin-bottom: 6px; }
.chaos__head .ui-av { background: #6b6b7b; }
.chaos__count { margin-left: auto; background: #ff3b30; color: #fff; border-radius: 999px; padding: 2px 9px; font-size: .78rem; }
.calm { position: absolute; inset: 0; padding: 70px 22px 22px; display: grid; justify-items: end; align-content: start; }
@media (min-width: 760px) { .calm { padding: 70px 40px 40px; } }
.calm__panel { width: min(420px, 100%); display: grid; gap: 12px; }
.calm__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.calm__stats .ui-card { padding: 12px; }
.ba__cap { display: grid; gap: 4px; margin-top: 18px; text-align: center; color: var(--ink-2); font-size: .95rem; }

/* ---------- picker + gallery ---------- */
.picker { display: grid; gap: 22px; background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-3); padding: 22px; position: relative; overflow: hidden; }
@media (min-width: 980px) { .picker { grid-template-columns: 1fr 380px; padding: 40px; gap: 44px; align-items: center; } }
.picker__q { display: grid; gap: 10px; margin-bottom: 20px; }
.picker__q:last-of-type { margin-bottom: 0; }
.picker__q > span { font-weight: 750; font-size: .95rem; display: flex; gap: 10px; align-items: center; }
.picker__q > span b { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--balloon); color: #fff; font-size: .8rem; flex: none; }
.picker__q > span small { font-weight: 550; color: var(--ink-3); }
.picker__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.picker__result { display: grid; gap: 14px; justify-items: center; }
.picker__frame { position: relative; width: 100%; justify-self: stretch; margin-inline: auto; max-width: 330px; aspect-ratio: 9 / 15.5; border-radius: 40px; padding: 9px; background: linear-gradient(145deg, #2b2252, #120d26 60%); box-shadow: var(--sh-3); }
.picker__screen { position: relative; width: 100%; height: 100%; border-radius: 32px; overflow: hidden; isolation: isolate; transform: translateZ(0); }
.picker__screen .mk-device__layer { transition-duration: 700ms; }
.picker__meta { text-align: center; }
.picker__meta h3 { margin: 0 0 4px; font-size: 1.3rem; }
.picker__meta p { margin: 0; color: var(--ink-2); font-size: .93rem; }
.picker__alts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.picker__alts .b-chip { min-height: 38px; padding: 6px 12px; font-size: .85rem; }
.picker__note { font-size: .86rem; color: var(--ink-3); margin: 16px 0 0; display: flex; gap: 8px; align-items: flex-start; }
.picker__note .ic { color: var(--balloon); margin-top: 2px; }

/* signature moment overlay: a theme's own flourish when it takes the stage */
.sig { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.sig i { position: absolute; display: block; left: var(--x); top: var(--y); width: var(--z); height: var(--z); border-radius: var(--br, 50%); background: var(--c); opacity: 0; }
.sig--up i { animation: sig-up var(--dur, 1.6s) var(--ease) var(--del, 0s) both; }
.sig--down i { animation: sig-down var(--dur, 2s) linear var(--del, 0s) both; }
.sig--burst i { animation: sig-burst var(--dur, 1.1s) var(--ease) var(--del, 0s) both; }
.sig--twinkle i { animation: sig-tw var(--dur, 1.4s) ease-in-out var(--del, 0s) both; }
@keyframes sig-up { 0% { opacity: 0; transform: translate3d(0, 40px, 0) scale(.6); } 20% { opacity: .95; } 100% { opacity: 0; transform: translate3d(var(--dx, 0), -220px, 0) scale(1); } }
@keyframes sig-down { 0% { opacity: 0; transform: translate3d(0, -60px, 0); } 15% { opacity: .95; } 100% { opacity: 0; transform: translate3d(var(--dx, 0), 260px, 0) rotate(180deg); } }
@keyframes sig-burst { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.3); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) scale(1) rotate(200deg); } }
@keyframes sig-tw { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.2); } }
.mk-inv.sig-lift .hero-art { animation: sa-lift 1.4s var(--ease) both; }
.mk-inv.sig-stomp .hero-art { animation: sa-stomp .9s var(--ease) both; }
.mk-inv.sig-pop .hero-art { animation: sa-pop .9s var(--ease-spring) both; }
.mk-inv.sig-float .hero-art { animation: sa-float 1.6s var(--ease) both; }
.mk-inv.sig-bounce .hero-art { animation: sa-bounce 1.1s var(--ease) both; }
.mk-inv.sig-shimmer .hero-art, .mk-inv.sig-glow .hero-art { animation: sa-glow 1.6s var(--ease) both; }
.mk-inv.sig-glitch .hero-art { animation: sa-glitch .7s steps(6) both; }
@keyframes sa-lift { 0% { transform: translateY(24px); } 100% { transform: none; } }
@keyframes sa-stomp { 0%, 100% { transform: none; } 20% { transform: translateY(-6px); } 30% { transform: translate(-3px, 2px); } 40% { transform: translate(3px, -1px); } 50% { transform: translate(-2px, 1px); } 60% { transform: translate(1px, 0); } }
@keyframes sa-pop { 0% { transform: scale(.85); } 100% { transform: none; } }
@keyframes sa-float { 0% { transform: translateY(18px); opacity: .6; } 100% { transform: none; opacity: 1; } }
@keyframes sa-bounce { 0% { transform: translateY(-20px); } 40% { transform: translateY(4px); } 70% { transform: translateY(-4px); } 100% { transform: none; } }
@keyframes sa-glow { 0% { opacity: .4; transform: scale(1.03); } 100% { opacity: 1; transform: none; } }
@keyframes sa-glitch { 0% { transform: translateX(-6px); opacity: .5; } 33% { transform: translateX(5px); } 66% { transform: translateX(-3px); opacity: 1; } 100% { transform: none; } }

.gal__filters { display: grid; gap: 14px; margin-bottom: 28px; }
.gal__row { display: flex; gap: 8px; overflow-x: auto; padding: 4px 20px 6px; margin: 0 -20px; scrollbar-width: none; }
.gal__row::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .gal__row { flex-wrap: wrap; overflow: visible; padding: 0; margin: 0; } }
.gal__label { font-size: .78rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); align-self: center; margin-right: 6px; flex: none; }
.gal__count { color: var(--ink-3); font-size: .93rem; margin: -10px 0 18px; }
.gal__grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .gal__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .gal__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.tcard { position: relative; display: flex; flex-direction: column; border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-1); text-decoration: none !important; color: var(--ink) !important; overflow: hidden;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform 500ms var(--ease), box-shadow var(--t-med) var(--ease), opacity 400ms var(--ease); }
.tcard:hover { box-shadow: var(--sh-3); }
.tcard.is-tilting { transition: transform 120ms linear, box-shadow var(--t-med) var(--ease); }
.tcard.is-hidden { display: none; }
.tcard__art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, var(--bg2), var(--bg)); }
.tcard__art .hero-art { position: absolute; inset: auto 0 0; width: 100%; height: 100%; transition: transform 900ms var(--ease); }
.tcard:hover .tcard__art .hero-art { transform: scale(1.05); }
.tcard__squad { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 0; z-index: 2; }
.tcard__squad svg { width: 44px; height: 44px; margin: 0 -3px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .18)); transition: transform 500ms var(--ease-spring); }
.tcard:hover .tcard__squad svg { transform: translateY(-6px); }
.tcard:hover .tcard__squad svg:nth-child(2) { transition-delay: 40ms; } .tcard:hover .tcard__squad svg:nth-child(3) { transition-delay: 80ms; } .tcard:hover .tcard__squad svg:nth-child(4) { transition-delay: 120ms; }
.tcard__shine { position: absolute; inset: 0; background: radial-gradient(60% 60% at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .35), transparent 70%); opacity: 0; transition: opacity var(--t-med); pointer-events: none; z-index: 3; }
.tcard:hover .tcard__shine { opacity: 1; }
.tcard__body { padding: 18px 20px 20px; display: grid; gap: 6px; }
.tcard__name { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tcard__name h3 { margin: 0; font-size: 1.22rem; }
.tcard__tier { font-size: .72rem; font-weight: 750; padding: 3px 9px; border-radius: 999px; background: var(--mintwash); color: #0b6e57; white-space: nowrap; }
.tcard__tier.premium { background: #fff4d6; color: #7a5300; }
.tcard__body p { margin: 0; color: var(--ink-2); font-size: .93rem; line-height: 1.45; }
.tcard__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.tcard__tags span { font-size: .74rem; font-weight: 650; padding: 3px 8px; border-radius: 999px; background: var(--frosting); color: var(--ink-2); border: 1px solid var(--line); }
.gal__empty { text-align: center; padding: 40px 0; color: var(--ink-2); }

/* ---------- theme detail ---------- */
.td-hero { position: relative; overflow: hidden; color: var(--ink); background: radial-gradient(120% 80% at 50% 0%, var(--bg2), var(--bg)); }
.td-hero.mk-dark-theme { color: #fff; }
.td-hero__grid { display: grid; gap: 34px; padding: 40px 0 64px; align-items: center; }
@media (min-width: 980px) { .td-hero__grid { grid-template-columns: 1.1fr .9fr; padding: 72px 0 96px; } }
.td-hero__art { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16 / 9; background: rgba(255, 255, 255, .06); }
.td-hero__art .hero-art { width: 100%; height: 100%; display: block; }
.td-crumb { font-size: .9rem; font-weight: 650; margin-bottom: 18px; display: flex; gap: 8px; align-items: center; }
.td-crumb a { color: inherit !important; opacity: .75; }
.td-hero .mk-lede { color: inherit; opacity: .86; }
.td-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.td-facts li { padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--midnight); font-weight: 650; font-size: .88rem; }
.td-grid { display: grid; gap: 18px; }
@media (min-width: 900px) { .td-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.td-card { background: #fff; border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh-1); }
.td-card h3 { font-size: 1.2rem; }
.td-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.td-card li { display: flex; gap: 9px; color: var(--ink-2); }
.td-card li .ic { color: var(--balloon); margin-top: 3px; }
.td-squad { display: flex; flex-wrap: wrap; gap: 12px; }
.td-squad figure { margin: 0; text-align: center; font-size: .82rem; font-weight: 650; color: var(--ink-2); width: 76px; }
.td-squad svg { width: 64px; height: 64px; }
.td-pal { display: flex; gap: 8px; flex-wrap: wrap; }
.td-pal span { width: 40px; height: 40px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.td-live { display: grid; gap: 30px; align-items: center; }
@media (min-width: 900px) { .td-live { grid-template-columns: 1fr 360px; } }
.td-live .picker__frame { max-width: 340px; margin: 0 auto; }

/* ---------- samples ---------- */
.scards { display: grid; gap: 18px; }
@media (min-width: 700px) { .scards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .scards--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.scard { position: relative; display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: var(--sh-1); color: var(--ink) !important; text-decoration: none !important; transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.scard:hover { transform: translateY(-5px); box-shadow: var(--sh-3); }
.scard__art { position: relative; aspect-ratio: 4 / 3; background: radial-gradient(120% 100% at 50% 0%, var(--bg2), var(--bg)); overflow: hidden; }
.scard__art .hero-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.scard__age { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(255, 255, 255, .92); color: var(--midnight); border-radius: 999px; padding: 4px 10px; font-weight: 750; font-size: .78rem; }
.scard__label { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--midnight); color: #fff; border-radius: 999px; padding: 4px 10px; font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.scard__body { padding: 18px 20px 20px; display: grid; gap: 6px; flex: 1; }
.scard__body h3 { margin: 0; font-size: 1.2rem; }
.scard__body p { margin: 0; color: var(--ink-2); font-size: .93rem; }
.scard__body .b-link { margin-top: auto; padding-top: 8px; }

.sp-banner { background: var(--midnight); color: #fff; font-size: .9rem; }
.sp-banner .mk-wrap { display: flex; gap: 10px 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.sp-banner b { display: inline-flex; align-items: center; gap: 8px; }
.sp-banner b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sunbeam); }
.sp-banner a { color: #fff !important; font-weight: 650; }
.sp-layout { display: grid; gap: 28px; padding: 28px 0 80px; }
@media (min-width: 1000px) { .sp-layout { grid-template-columns: 340px 1fr; gap: 48px; padding: 48px 0 120px; align-items: start; } .sp-side { position: sticky; top: 100px; } }
.sp-side h1 { font-size: clamp(2rem, 2vw + 1.4rem, 2.8rem); }
.sp-tabs { display: inline-flex; gap: 4px; padding: 5px; background: #fff; border-radius: 999px; box-shadow: var(--sh-1); margin-bottom: 18px; flex-wrap: wrap; }
.sp-tabs [role="tab"] { border: 0; background: none; min-height: 44px; padding: 8px 18px; border-radius: 999px; font-weight: 700; cursor: pointer; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
.sp-tabs [role="tab"][aria-selected="true"] { background: var(--midnight); color: #fff; }
.sp-stage { position: relative; }
.sp-invite { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-3); background: var(--bg); position: relative; }
.sp-invite .inv { padding-top: 24px; }
.sp-invite .invite-wrap { background: radial-gradient(120% 70% at 50% 0%, var(--bg2) 0%, var(--bg) 60%), var(--bg); color: var(--ink); font-family: var(--font-body), system-ui, sans-serif; padding-bottom: 20px; }
.sp-invite .rsvp-pill { display: none !important; }
.sp-actions { display: grid; gap: 10px; margin-top: 20px; }
.sp-facts { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; color: var(--ink-2); font-size: .95rem; }
.sp-facts li { display: flex; gap: 9px; }
.sp-facts .ic { color: var(--balloon); margin-top: 3px; }
.sp-demo-note { display: flex; gap: 10px; align-items: flex-start; background: #fff4d6; color: #5b3e00; border-radius: 16px; padding: 12px 14px; font-size: .9rem; font-weight: 600; margin-top: 16px; }

/* demo Party HQ (read-only) */
.hq { background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-3); overflow: hidden; }
.hq__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.hq__top h2 { margin: 0; font-size: 1.3rem; }
.hq__body { padding: 22px; display: grid; gap: 18px; }
.hq__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 700px) { .hq__stats { grid-template-columns: repeat(4, 1fr); } }
.hq__stats .ui-card { padding: 14px 16px; }
.hq__cols { display: grid; gap: 18px; }
@media (min-width: 900px) { .hq__cols { grid-template-columns: 1.3fr 1fr; } }
.hq h3 { font-size: 1rem; font-family: var(--f-body); font-weight: 750; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.hq h3 .ic { color: var(--balloon); }
.hq table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.hq th { text-align: left; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; padding: 0 8px 8px; }
.hq td { padding: 9px 8px; border-top: 1px solid var(--line); vertical-align: middle; }
.hq td small { display: block; color: var(--ink-3); font-size: .78rem; }
.hq__scroll { overflow-x: auto; }
.hq__readonly { display: inline-flex; gap: 6px; align-items: center; font-size: .78rem; font-weight: 700; color: var(--ink-3); background: var(--frosting); border-radius: 999px; padding: 5px 11px; }

/* ---------- pricing ---------- */
.price { display: grid; gap: 22px; }
@media (min-width: 980px) { .price { grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; } }
.price__card { position: relative; background: var(--midnight); color: #fff; border-radius: var(--r-xl); padding: 34px 26px; box-shadow: var(--sh-3); overflow: hidden; }
@media (min-width: 760px) { .price__card { padding: 48px; } }
.price__card::before { content: ""; position: absolute; inset: auto -20% -50% auto; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(238, 76, 118, .45), transparent); pointer-events: none; }
.price__card > * { position: relative; }
.price__card .mk-eyebrow { color: var(--sunbeam); }
.price__amt { display: flex; align-items: flex-start; gap: 6px; font-family: var(--f-display); font-weight: 800; letter-spacing: -.05em; line-height: .9; margin: 14px 0 8px; }
.price__amt span { font-size: 2.2rem; margin-top: .3em; }
.price__amt b { font-size: clamp(5rem, 9vw, 7.5rem); }
.price__per { color: #c9c1e6; font-weight: 600; margin-bottom: 22px; }
.price__list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 11px; }
.price__list li { display: flex; gap: 10px; align-items: flex-start; }
.price__list .ic { color: var(--mint); margin-top: 3px; width: 20px; height: 20px; }
.price__pay { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.price__pay span { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 650; color: #ddd6f6; padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.price__trial { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); margin-bottom: 24px; font-size: .95rem; }
.price__trial .ic { color: var(--sunbeam); width: 22px; height: 22px; margin-top: 1px; }
.addons { display: grid; gap: 10px; }
.addon { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; background: #fff; border-radius: 18px; box-shadow: var(--sh-1); }
.addon b.nm { display: block; }
.addon small { color: var(--ink-3); font-size: .87rem; }
.addon > b { font-family: var(--f-display); font-size: 1.25rem; letter-spacing: -.02em; white-space: nowrap; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; font-size: .95rem; }
.cmp th, .cmp td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cmp thead th { font-family: var(--f-display); font-size: 1.05rem; background: var(--frosting); }
.cmp thead th.us { background: var(--midnight); color: #fff; }
.cmp td.us { background: #fbf9ff; font-weight: 650; }
.cmp tr:last-child td { border-bottom: 0; }
.cmp .yes { color: #0b6e57; } .cmp .no { color: #a8193f; }
.cmp-wrap { overflow-x: auto; border-radius: var(--r-lg); }
.cmp-wrap .cmp { min-width: 560px; }
.mk-source { font-size: .82rem; color: var(--ink-3); margin-top: 12px; }

/* reviews coming soon */
.soon { position: relative; text-align: center; border-radius: var(--r-xl); padding: 48px 24px; background: #fff; box-shadow: var(--sh-1); overflow: hidden; border: 1.5px dashed var(--line-2); }
.soon__stars { display: inline-flex; gap: 6px; margin-bottom: 16px; color: var(--line-2); }
.soon__stars .ic { width: 26px; height: 26px; }
.soon__tag { display: inline-block; font-size: .75rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: var(--lilac); color: var(--grape-ink); margin-bottom: 14px; }
.soon p { color: var(--ink-2); max-width: 54ch; margin: 0 auto; }

/* faq */
.qa { display: grid; gap: 10px; }
.qa details { background: #fff; border-radius: 20px; box-shadow: var(--sh-1); transition: box-shadow var(--t-med); }
.qa details[open] { box-shadow: var(--sh-2); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; font-weight: 700; font-size: 1.05rem; min-height: 56px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--frosting) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1433' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform var(--t-med) var(--ease), background-color var(--t-fast); }
.qa details[open] summary::after { transform: rotate(135deg); background-color: var(--balloon-soft); }
.qa .qa__a { padding: 0 22px 20px; color: var(--ink-2); }
.qa .qa__a p:last-child { margin-bottom: 0; }
.js-motion .qa details[open] .qa__a { animation: mk-slide 420ms var(--ease) both; }
.faq-groups { display: grid; gap: 48px; }
.faq-group h2 { font-size: clamp(1.4rem, 1vw + 1.1rem, 1.8rem); margin-bottom: 16px; }
.faq-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 48px; }

/* final CTA */
.mk-final { text-align: center; overflow: hidden; }
.mk-final .mk-h2 { font-size: clamp(2.4rem, 5vw + .6rem, 4.6rem); max-width: 14ch; margin-left: auto; margin-right: auto; }
.mk-final .mk-ctas { justify-content: center; margin-top: 30px; }
.mk-final__squad { display: flex; justify-content: center; gap: 4px; margin-bottom: 26px; }
.mk-final__squad svg { width: 56px; height: 56px; }
.js-motion .mk-final.is-in .mk-final__squad svg { animation: mk-hop 2.6s var(--ease) infinite; animation-delay: calc(var(--i) * 120ms); }
@keyframes mk-hop { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(-14px); } 80% { transform: translateY(0); } 86% { transform: translateY(-5px); } }

/* prose pages (legal, about) */
.prose { max-width: 760px; margin: 0 auto; font-size: 1.04rem; }
.prose h1 { font-size: clamp(2.2rem, 3vw + 1rem, 3.4rem); }
.prose h2 { font-size: 1.45rem; margin-top: 2em; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { padding-left: 1.2em; display: grid; gap: 6px; margin-bottom: 1em; }
.prose b { color: var(--ink); }
.draft-banner { display: flex; gap: 12px; align-items: flex-start; background: #fff4d6; border: 1.5px solid #f0c24b; color: #4f3600; padding: 16px 18px; border-radius: 18px; font-weight: 650; margin: 0 0 32px; }
.draft-banner .ic { width: 22px; height: 22px; color: #b07a00; margin-top: 1px; }
.draft-banner b { color: #4f3600; }
.legal-toc { position: sticky; top: 96px; display: none; }
@media (min-width: 1100px) { .legal-layout { display: grid; grid-template-columns: 220px 1fr; gap: 56px; max-width: 1040px; margin: 0 auto; } .legal-toc { display: grid; gap: 4px; align-self: start; font-size: .92rem; } .legal-toc a { color: var(--ink-2) !important; text-decoration: none; padding: 6px 10px; border-radius: 10px; } .legal-toc a:hover { background: #fff; color: var(--ink) !important; } }

/* page hero (inner pages) */
.mk-phero { position: relative; overflow: hidden; padding: 40px 0 56px; text-align: center; }
@media (min-width: 900px) { .mk-phero { padding: 72px 0 88px; } }
.mk-phero .mk-h1 { font-size: clamp(2.4rem, 4.4vw + .8rem, 4.4rem); max-width: 16ch; margin-left: auto; margin-right: auto; }
.mk-phero .mk-lede { margin: 0 auto; }
.mk-phero .mk-ctas { justify-content: center; margin-top: 28px; }

/* walkthrough (how it works page) */
.walk { display: grid; gap: 80px; }
.walk__step { display: grid; gap: 28px; align-items: center; }
@media (min-width: 940px) { .walk__step { grid-template-columns: 1fr 1fr; gap: 64px; } .walk__step:nth-child(even) .walk__media { order: -1; } }
.walk__num { font-family: var(--f-display); font-size: 1rem; font-weight: 800; color: var(--balloon); letter-spacing: .02em; margin-bottom: 10px; display: block; }
.walk__media { position: relative; border-radius: var(--r-xl); background: var(--wm, var(--lilac)); padding: 24px; min-height: 340px; display: grid; place-items: center; overflow: hidden; }
.walk ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.walk li { display: flex; gap: 10px; color: var(--ink-2); }
.walk li .ic { color: var(--mint); margin-top: 3px; }
.walk__tip { background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: var(--sh-1); font-size: .93rem; color: var(--ink-2); }
.walk__tip b { color: var(--ink); }

/* compare page */
.vs { display: grid; gap: 18px; }
@media (min-width: 900px) { .vs { grid-template-columns: 1fr 1fr; gap: 24px; } }
.vs__card { background: #fff; border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh-1); }
.vs__card h3 { font-size: 1.4rem; }
.vs__card p, .vs__card li { color: var(--ink-2); }
.vs__card ul { padding-left: 1.1em; display: grid; gap: 6px; }

/* about */
.about-quote { font-family: var(--f-display); font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem); letter-spacing: -.02em; line-height: 1.15; color: var(--ink); margin: 32px 0; }
.values { display: grid; gap: 16px; }
@media (min-width: 800px) { .values { grid-template-columns: repeat(3, 1fr); } }

/* 404 */
.nf { min-height: 62vh; display: grid; place-items: center; text-align: center; padding: 60px 0; position: relative; overflow: hidden; }
.nf__balloon { width: 120px; height: 150px; margin: 0 auto 18px; }
.js-motion .nf__balloon { animation: nf-drift 6s ease-in-out infinite; }
@keyframes nf-drift { 0%, 100% { transform: translate(0, 0) rotate(-4deg); } 50% { transform: translate(6px, -14px) rotate(4deg); } }

/* backpack flyer */
.flyer { display: grid; gap: 22px; align-items: center; background: #fff; border-radius: var(--r-xl); padding: 26px; box-shadow: var(--sh-2); }
@media (min-width: 860px) { .flyer { grid-template-columns: 1fr 1fr; padding: 40px; gap: 40px; } }
.flyer__paper { position: relative; background: #fff; border-radius: 10px; padding: 22px; box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 18px 40px -16px rgba(26, 20, 51, .35); transform: rotate(-2deg); max-width: 360px; margin: 0 auto; border: 1px solid var(--line); }
.flyer__paper h4 { font-size: 1.4rem; margin: 6px 0; }
.flyer__paper p { font-size: .88rem; color: var(--ink-2); margin: 0 0 12px; }
.flyer__row { display: flex; gap: 14px; align-items: center; }
.flyer__cut { position: absolute; left: -10px; right: -10px; top: -12px; border-top: 2px dashed var(--line-2); }

/* reduced motion: everything rests in its final state */
@media (prefers-reduced-motion: reduce) {
  body.mk *, body.mk *::before, body.mk *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .mk-inv.is-auto .mk-inv__scroll { animation: none !important; }
  .sig { display: none !important; }
  [data-parallax] { transform: none !important; }
}
html.reduce body.mk *, html.reduce body.mk *::before, html.reduce body.mk *::after { animation: none !important; transition: none !important; }
html.reduce .sig { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; } /* anchors land below the sticky header */
.b-btn:disabled, .b-btn[aria-disabled="true"] { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.b-chip:disabled { opacity: .5; cursor: default; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ======================================================================
   Modern platform layer (progressive enhancement: every rule below has a
   working fallback above it). Design-system tokens can replace these
   custom properties one for one when public/ds lands.
   ====================================================================== */

/* OKLCH color tokens: perceptually even, wider gamut on P3 screens */
@supports (color: oklch(0 0 0)) {
  body.mk {
    --midnight: oklch(0.2 0.06 293); --night: oklch(0.16 0.05 293); --ink: oklch(0.2 0.06 293);
    --ink-2: oklch(0.43 0.05 293); --ink-3: oklch(0.51 0.04 293);
    --frosting: oklch(0.985 0.012 70); --blush: oklch(0.96 0.025 5); --lilac: oklch(0.95 0.03 293);
    --balloon: oklch(0.56 0.2 4); --balloon-hi: oklch(0.65 0.2 4); --balloon-soft: oklch(0.9 0.06 4);
    --sunbeam: oklch(0.85 0.16 80); --mint: oklch(0.74 0.14 172); --sky: oklch(0.69 0.16 252); --grape: oklch(0.58 0.22 288);
    --celebrate: linear-gradient(115deg in oklch, oklch(0.72 0.17 40) 0%, oklch(0.65 0.2 4) 38%, oklch(0.55 0.22 320) 72%, oklch(0.58 0.22 288) 100%);
  }
}

/* Spring easing with linear(): a real overshoot-and-settle curve */
@supports (transition-timing-function: linear(0, 1)) {
  body.mk {
    --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  }
}

/* Registered properties: the card tilt interpolates smoothly as a real angle */
@property --rx { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --ry { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* Cross-document View Transitions: the header holds still, pages crossfade,
   and a theme card's art flies into the theme page's hero */
@view-transition { navigation: auto; }
.mk-head { view-transition-name: mk-head; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: var(--ease, ease); }
::view-transition-group(*) { animation-duration: 420ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* Container queries: components respond to their own width, not the window's */
.feat__stage, .picker__form, .tcard, .scard, .demo { container-type: inline-size; }
@container (min-width: 640px) { .feat__copy ul { grid-template-columns: 1fr 1fr; column-gap: 20px; } }
@container (max-width: 300px) { .tcard__tags span:nth-child(n + 3) { display: none; } }
@container (max-width: 420px) { .ui-seg button { padding: 8px 10px; font-size: .82rem; } }

/* Scroll-driven animations (compositor-only, where supported) */
.mk-progress { display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .mk-progress { display: block; position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 60; background: var(--celebrate); transform-origin: 0 50%; animation: mk-grow linear both; animation-timeline: scroll(root); }
    @keyframes mk-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .mk-hero .mk-confetti { animation: mk-drift linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes mk-drift { to { translate: 0 -60px; opacity: .3; } }
    .mk-step__art svg { animation: mk-art-in linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    @keyframes mk-art-in { from { scale: .92; } to { scale: 1; } }

  }
}

/* Long pages: let the browser skip rendering what's far off screen */
.mk-cv { content-visibility: auto; contain-intrinsic-size: auto 900px; }


/* :has(): the open FAQ card and a focused question lift together */
.qa details:has(summary:focus-visible) { box-shadow: 0 0 0 3px var(--grape), var(--sh-2); }
.picker:has([data-pq="interests"] [aria-pressed="true"]) .picker__note { opacity: .85; }

/* Touch: 44px targets everywhere a finger lands */
@media (pointer: coarse) {
  .film__chips .b-chip, .picker__alts .b-chip { min-height: 44px; }
  .ui-seg button { min-height: 44px; }
  .mk-dots button { width: 36px; height: 44px; }
  .feat__tab { min-height: 48px; }
}

/* ---------- polish pass (design review, round 1) ---------- */
.mk h1, .mk h2, .mk h3, .mk-h1, .mk-h2 { text-wrap: balance; }
.mk p, .mk li { text-wrap: pretty; }
.mk-head__bg { background: rgba(255, 248, 240, .93); }
.mk-hero__stage > div:not(.mk-toasts) { display: grid; justify-items: center; }
@media (max-width: 640px) {
  .mk-hero .mk-confetti i:nth-child(-n + 2) { display: none; }
  .mk-dots { gap: 0; }
  .mk-dots button { width: 30px; }
  /* chip groups become one swipeable row each: the picker and the film stay short on phones */
  .picker__chips, .film__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -22px; padding: 2px 22px 6px; scroll-snap-type: x proximity;
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent); mask: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent); }
  .picker__chips::-webkit-scrollbar, .film__chips::-webkit-scrollbar { display: none; }
  .picker__chips .b-chip, .film__chips .b-chip { scroll-snap-align: start; flex: none; }
  .picker { padding: 22px; }
  .picker__alts { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; max-width: 100%; scrollbar-width: none; }
  .picker__q > span small { display: block; width: 100%; }
  /* the four steps: a swipeable row of cards instead of a tall stack */
  .mk-steps { grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 6px 20px 18px; scrollbar-width: none; }
  .mk-steps::-webkit-scrollbar { display: none; }
  .mk-step { scroll-snap-align: center; }
  /* the film: each panel a short, scrollable card */
  .fp:not(.fp--invite) { max-height: 300px; }
  .fp:not(.fp--invite)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: linear-gradient(transparent, #fff); pointer-events: none; }
  .fp--invite { min-height: 380px; }
  .ba__tag b { display: none; }
  .scards { grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 6px 20px 18px; scrollbar-width: none; }
  .scards::-webkit-scrollbar { display: none; }
  .scard { scroll-snap-align: center; }
}
.js-motion .film:not(.is-done) .fp:not(.is-on) { opacity: .9; }
/* Fixed panel heights: the film rewrites its lists constantly, and nothing around it may move (CLS). */
.fp:not(.fp--invite) { height: 300px; max-height: none; }
.fp:not(.fp--invite)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.fp--invite { height: 614px; min-height: 0; }
@media (max-width: 679px) { .fp--invite { height: 440px; } .fp:not(.fp--invite) { height: 280px; } }
@media (max-width: 640px) { .mk-switch__name { flex-basis: 100%; text-align: center; } }
/* design review round 3: gutters on phones, quieter confetti, tabs, ghost buttons on dark themes */
.td-hero__grid, .sp-layout { padding-left: 20px; padding-right: 20px; }
@media (max-width: 400px) { .td-hero__grid, .sp-layout { padding-left: 16px; padding-right: 16px; } }
@media (max-width: 640px) {
  .mk-phero .mk-confetti { display: none; }
  .sp-tabs { display: flex; width: 100%; flex-wrap: nowrap; }
  .sp-tabs [role="tab"] { flex: 1; justify-content: center; padding: 8px 10px; font-size: .92rem; }
}
.td-hero.mk-dark-theme .b-btn--ghost { --bf: #fff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); }
.td-hero.mk-dark-theme .b-btn--ghost:hover { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1.5px #fff; }

/* ---------- "Try it now" in the hero: the parent's own kid on the phone, before any account ---------- */
@media (min-width: 980px) {
  .mk-hero__grid { grid-template-areas: "copy stage" "try stage"; grid-template-rows: auto 1fr; row-gap: 28px; }
  .mk-hero__copy { grid-area: copy; } .mk-hero__stage { grid-area: stage; } .try { grid-area: try; align-self: start; }
}
.try { position: relative; max-width: 560px; width: 100%; margin: 0 auto; padding: 18px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--sh-2), inset 0 0 0 1px rgba(255, 255, 255, .9); display: grid; gap: 12px; }
@media (min-width: 980px) { .try { margin: 0; } .mk-hero__copy .mk-hero__trust { margin-top: 18px; } .mk-hero__copy .mk-lede { margin-bottom: 26px; } }
@media (min-width: 980px) and (max-height: 960px) { .mk-hero { padding-top: 16px; } .mk-hero__copy .mk-pill { margin-bottom: 14px; } .mk-hero__copy .mk-h1 { font-size: clamp(2.5rem, 4.6vw + .4rem, 4.4rem); margin-bottom: 16px; } }
.try__h { margin: 0; font-weight: 750; font-size: .98rem; display: flex; align-items: center; gap: 10px; color: var(--ink); }
.try__spark { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(46, 196, 160, .22); flex: none; }
.js-motion .try__spark { animation: try-pulse 2.4s ease-in-out infinite; }
@keyframes try-pulse { 50% { box-shadow: 0 0 0 8px rgba(46, 196, 160, 0); } }
.try__name { width: 100%; min-height: 54px; border-radius: 16px; border: 1.5px solid var(--line-2); background: #fff; padding: 12px 16px; font: inherit; font-size: 1.15rem; font-weight: 650; color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.try__name::placeholder { color: var(--ink-3); font-weight: 500; }
.try__name:focus { outline: none; border-color: var(--balloon); box-shadow: 0 0 0 4px var(--balloon-soft); }
.try__row { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 10px; }
.try__label { font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.try__ages, .try__themes { position: relative; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; scroll-snap-type: x proximity; }
.try__ages::-webkit-scrollbar, .try__themes::-webkit-scrollbar { display: none; }
.try__ages button, .try__themes button { flex: none; scroll-snap-align: start; min-height: 44px; border-radius: 999px; border: 1.5px solid var(--line-2); background: #fff; color: var(--ink); font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease); -webkit-tap-highlight-color: transparent; }
.try__ages button { width: 44px; padding: 0; font-variant-numeric: tabular-nums; }
.try__themes button { padding: 8px 14px 8px 10px; display: inline-flex; align-items: center; gap: 8px; }
.try__themes button::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--dot); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.try__ages button:hover, .try__themes button:hover { border-color: var(--ink-3); }
.try__ages button:active, .try__themes button:active { transform: scale(.95); }
.try__ages button[aria-pressed="true"], .try__themes button[aria-checked="true"] { background: var(--midnight); border-color: var(--midnight); color: #fff; }
.try__note { margin: 0; font-size: .86rem; color: var(--ink-3); min-height: 1.3em; }
@media (max-width: 420px) { .try__row { grid-template-columns: 1fr; gap: 6px; } }
.mk-device.is-personal { box-shadow: var(--sh-3), inset 0 0 0 1.5px rgba(255, 255, 255, .14), inset 0 0 0 5px #0b0718, 0 0 0 6px rgba(46, 196, 160, .28); transition: box-shadow var(--t-slow) var(--ease); }

/* Space reserved for what scripts fill in, so nothing below moves (CLS) */
.picker__alts { min-height: 44px; }
.picker__meta h3 { min-height: 1.3em; }
.picker__meta p { min-height: 1.5em; }
.mk-final__squad { min-height: 56px; }
.scard__art .tcard__squad { bottom: 10px; }

/* the invites demo: a phone thumbnail beside the family links, at any width */
.inv-demo { display: grid; gap: 14px; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr); align-items: center; }
.inv-demo__phone { position: relative; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; box-shadow: var(--sh-2); }
.inv-demo .ui-card b, .inv-demo .ui-card small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* print: the legal pages and the FAQ print cleanly */
@media print {
  .mk-head, .mk-menu, .mk-foot, .mk-skip, .mk-progress, .legal-toc, .mk-final, .faq-nav, .mk-confetti { display: none !important; }
  body.mk { background: #fff; color: #000; font-size: 11pt; }
  .qa details { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .qa details .qa__a { display: block; }
  .prose a::after { content: " (" attr(href) ")"; font-size: .85em; }
}

/* Safe areas on notched phones */
.mk-head__in { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.mk-menu { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
.mk-foot { padding-bottom: max(40px, env(safe-area-inset-bottom)); }
.mk-menu { height: 100dvh; inset: 0; padding-top: 80px; z-index: 48; }

/* the no-surprises price line */
.mk-promise { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 18px 0 0; padding: 0; list-style: none; font-weight: 700; font-size: .92rem; color: var(--ink); }
.mk-promise li { display: inline-flex; align-items: center; gap: 6px; }
.mk-promise li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--balloon); }
.mk-dark .mk-promise { color: #fff; }

/* the chase: the lead pain, answered */
.chase { display: grid; gap: 28px; align-items: center; }
@media (min-width: 960px) { .chase { grid-template-columns: 1fr 1fr; gap: 64px; } }
.chase__ui { position: relative; background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-3); padding: 22px; display: grid; gap: 12px; }
.chase__ui h3 { margin: 0; font-family: var(--f-body); font-size: 1rem; font-weight: 750; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.chase__row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.chase__row > span:nth-child(2) { flex: 1; min-width: 0; }
.chase__row small { display: block; color: var(--ink-3); font-size: .82rem; }
.chase__msg { background: var(--lilac); border-radius: 16px 16px 16px 4px; padding: 12px 14px; font-size: .9rem; color: var(--ink-2); }
.chase__msg b { color: var(--ink); }
.chase__quote { font-family: var(--f-display); font-size: clamp(1.3rem, 1vw + 1rem, 1.6rem); letter-spacing: -.02em; line-height: 1.2; color: var(--ink); border-left: 4px solid var(--sunbeam); padding-left: 16px; margin: 0 0 22px; }
.chase__points { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.chase__points li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); }
.chase__points li b { color: var(--ink); display: block; }
.chase__points .ic { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 11px; background: var(--blush); color: var(--balloon); }

/* ======================================================================
   Art direction v2, "Confetti editorial" (Oct 2026). BRAND.md §5–§9.
   Warm paper, OKLCH aurora light with a fine grain, an editorial serif
   italic for the one phrase that matters, glass only where something
   floats, and the themes' own critters as the brand's cast.
   Everything here is progressive: without it, the rules above still stand.
   ====================================================================== */
@font-face { font-family: "Instrument Fallback"; src: local("Georgia Italic"), local("Georgia-Italic"), local("Times New Roman Italic"); font-style: italic; size-adjust: 88%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; }
body.mk {
  --f-serif: "Instrument Serif", "Instrument Fallback", Georgia, serif;
  /* film grain: a tiny tiled noise, painted once, never animated */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .08 0 0 0 0 .2 0 0 0 .9 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --glass: rgba(255, 252, 248, .7);
  --glass-strong: rgba(255, 250, 245, .9);
  --glass-line: rgba(255, 255, 255, .85);
  --sh-glass: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 12px 32px -14px rgba(40, 18, 80, .32), 0 2px 6px rgba(26, 20, 51, .06);
  --wrap: 1200px;
}
@media (min-width: 1600px) { body.mk { --wrap: 1320px; font-size: 18px; } .mk-wrap { max-width: var(--wrap); } }

/* the serif accent: one phrase per heading, never a whole line */
.mk-serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-size: 1.06em; color: var(--balloon); font-variation-settings: normal; padding-right: .04em; }
.mk-dark .mk-serif { color: #ff9cb6; }
.mk-ul.mk-serif::after { left: -1%; right: 2%; bottom: -.1em; height: .3em; opacity: 1; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15c30-9 54-9 78-2s48 8 72 0 50-10 75-2 44 8 69-1' fill='none' stroke='%23FFC23D' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* display type, one notch bolder in scale and optics */
.mk-hero .mk-h1 { font-size: clamp(2.7rem, 5.2vw + .7rem, 5.9rem); letter-spacing: -.042em; line-height: .95; }
.mk-h2 { letter-spacing: -.035em; }
@media (min-width: 1600px) { .mk-h2 { font-size: 3.9rem; } }

/* ---------- aurora light + grain (hero, final CTA, inner-page heroes) ---------- */
.mk-hero::before { display: none; }
.mk-aurora { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.mk-aurora::before { content: ""; position: absolute; inset: -25% -15%; background:
  radial-gradient(34% 30% at 74% 30%, rgba(238, 76, 118, .3), transparent 70%),
  radial-gradient(30% 28% at 90% 74%, rgba(123, 92, 255, .24), transparent 70%),
  radial-gradient(30% 28% at 14% 16%, rgba(255, 194, 61, .3), transparent 70%),
  radial-gradient(26% 24% at 36% 92%, rgba(46, 196, 160, .2), transparent 70%); }
.mk-aurora::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .16; }
.mk-aurora--night::before { background:
  radial-gradient(40% 40% at 18% 10%, rgba(123, 92, 255, .42), transparent 70%),
  radial-gradient(36% 36% at 86% 26%, rgba(238, 76, 118, .34), transparent 70%),
  radial-gradient(40% 30% at 50% 110%, rgba(255, 122, 89, .3), transparent 70%); }
.mk-aurora--night::after { opacity: .35; mix-blend-mode: screen; }
@supports (color: oklch(0 0 0)) {
  .mk-aurora::before { background:
    radial-gradient(34% 30% at 74% 30%, oklch(0.72 0.19 4 / .32), transparent 70%),
    radial-gradient(30% 28% at 90% 74%, oklch(0.62 0.2 293 / .26), transparent 70%),
    radial-gradient(30% 28% at 14% 16%, oklch(0.86 0.16 80 / .36), transparent 70%),
    radial-gradient(26% 24% at 36% 92%, oklch(0.78 0.13 172 / .24), transparent 70%); }
  .mk-aurora--night::before { background:
    radial-gradient(40% 40% at 18% 10%, oklch(0.58 0.22 293 / .5), transparent 70%),
    radial-gradient(36% 36% at 86% 26%, oklch(0.62 0.2 4 / .4), transparent 70%),
    radial-gradient(40% 30% at 50% 110%, oklch(0.7 0.17 40 / .34), transparent 70%); }
}
.js-motion .mk-aurora::before { animation: mk-aurora 26s ease-in-out infinite alternate; }
@keyframes mk-aurora { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(-3%, 2%, 0) rotate(4deg) scale(1.06); } 100% { transform: translate3d(2%, -2%, 0) rotate(-3deg) scale(1.02); } }
.mk-hero { isolation: isolate; }
.mk-final { isolation: isolate; }
.mk-final > .mk-wrap { z-index: 1; }

/* ---------- header: a floating glass capsule once you scroll ---------- */
.mk-head__bg { transition: opacity var(--t-med) var(--ease); }
.mk-head.is-condensed .mk-head__bg { inset: 6px max(8px, calc((100% - var(--wrap) - 40px) / 2)); border-radius: 999px; background: var(--glass-strong);
  -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px); border: 1px solid rgba(26, 20, 51, .07); box-shadow: 0 10px 30px -16px rgba(40, 18, 80, .35); }
.mk-head.is-condensed.on-dark .mk-head__bg { background: rgba(24, 17, 50, .72); border-color: rgba(255, 255, 255, .1); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .6); }
@media (max-width: 999px) { .mk-head.is-condensed .mk-head__bg { inset: 6px 8px; border-radius: 26px; } body.mk-menu-open .mk-head__bg { inset: 0; border-radius: 0; } }
@media (min-width: 1000px) { .mk-nav { gap: 2px; padding: 4px; } .mk-nav a { padding: 9px 15px; } }

/* ---------- hero stage: rings, the crew, glass notifications ---------- */
.mk-hero__stage { isolation: isolate; }
.mk-orbit { position: absolute; left: 50%; top: 46%; width: 0; height: 0; z-index: -1; pointer-events: none; }
.mk-orbit i { position: absolute; left: 0; top: 0; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%; border: 1.5px dashed rgba(123, 92, 255, .22); }
.mk-orbit i:nth-child(1) { --d: 420px; border-style: solid; border-color: rgba(238, 76, 118, .14); background: radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); }
.mk-orbit i:nth-child(2) { --d: 560px; }
.mk-orbit i:nth-child(3) { --d: 700px; border-color: rgba(255, 194, 61, .3); }
.js-motion .mk-orbit i:nth-child(2) { animation: mk-spin 90s linear infinite; }
.js-motion .mk-orbit i:nth-child(3) { animation: mk-spin 140s linear infinite reverse; }
@keyframes mk-spin { to { transform: rotate(360deg); } }
@media (max-width: 979px) { .mk-orbit i:nth-child(1) { --d: 340px; } .mk-orbit i:nth-child(2) { --d: 440px; } .mk-orbit i:nth-child(3) { display: none; } }

.crew { pointer-events: none; }
.crew__m { position: absolute; display: grid; place-items: center; width: var(--sz, 78px); height: var(--sz, 78px); border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0%, color-mix(in srgb, var(--c) 22%, #fff) 70%); box-shadow: 0 1px 0 #fff inset, 0 14px 28px -14px color-mix(in srgb, var(--c) 70%, #1a1433), 0 2px 6px rgba(26, 20, 51, .08); }
.crew__m svg { width: 74%; height: 74%; }
.js-motion .crew__m { animation: mk-float var(--dur, 7s) ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s); }
@keyframes mk-float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-4deg); } 50% { transform: translate3d(0, -12px, 0) rotate(4deg); } }
.crew--hero { position: absolute; inset: 0; z-index: 2; }
/* placed on the rings around the phone (stage centre is the phone's centre) */
.crew--hero .crew__m { --sz: 64px; margin: calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2); left: calc(50% + var(--x)); top: calc(46% + var(--y)); }
.crew--hero .crew__m:nth-child(1) { --x: -228px; --y: -196px; --sz: 76px; }
.crew--hero .crew__m:nth-child(2) { --x: 234px; --y: -232px; --dur: 8s; }
.crew--hero .crew__m:nth-child(3) { --x: 262px; --y: 120px; --sz: 70px; --dur: 6.5s; }
.crew--hero .crew__m:nth-child(4) { --x: -262px; --y: 58px; --sz: 58px; --dur: 9s; }
.crew--hero .crew__m:nth-child(5) { --x: -196px; --y: 268px; --sz: 54px; --dur: 7.5s; }
.crew--hero .crew__m:nth-child(6) { --x: 214px; --y: 302px; --sz: 50px; --dur: 8.5s; }
@media (max-width: 979px) {
  .crew--hero .crew__m { --sz: 56px !important; }
  .crew--hero .crew__m:nth-child(n + 5) { display: none; }
  .crew--hero .crew__m:nth-child(1) { --x: -190px; --y: -210px; } .crew--hero .crew__m:nth-child(2) { --x: 190px; --y: -170px; }
  .crew--hero .crew__m:nth-child(3) { --x: 196px; --y: 150px; } .crew--hero .crew__m:nth-child(4) { --x: -196px; --y: 80px; }
}
@media (max-width: 480px) {
  .crew--hero .crew__m { --sz: 46px !important; }
  .crew--hero .crew__m:nth-child(1) { --x: -150px; --y: -230px; } .crew--hero .crew__m:nth-child(2) { --x: 150px; --y: -150px; }
  .crew--hero .crew__m:nth-child(3) { --x: 152px; --y: 170px; } .crew--hero .crew__m:nth-child(4) { --x: -152px; --y: 40px; }
}

.mk-toast { background: var(--glass); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); box-shadow: var(--sh-glass); border: 1px solid var(--glass-line); z-index: 3; }
.mk-toasts { z-index: 4; }
.mk-device { z-index: 1; }
.mk-hero__stage > div:not(.mk-toasts):not(.crew):not(.mk-orbit) { position: relative; z-index: 1; }

/* ---------- "Planning a teen party?" (home): teen mode's own posters on night ---------- */
.teen-sec { background: #0b0a0f; color: #f4f2ec; overflow: hidden; }
.teen-sec .mk-eyebrow { color: #ffc23d; }
.teen-sec .mk-h2 { color: #f4f2ec; }
.teen-sec .mk-serif { color: #ff9cb6; }
.teen-sec .mk-lede, .teen-sec__note { color: #c9c5d6; }
.teen-sec__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 980px) { .teen-sec__grid { grid-template-columns: 1.05fr .95fr; gap: 56px; } }
.teen-sec__list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.teen-sec__list li { display: flex; gap: 12px; align-items: flex-start; color: #c9c5d6; }
.teen-sec__list li b { color: #f4f2ec; }
.teen-sec__list .ic { color: #ffc23d; width: 22px; height: 22px; flex: none; margin-top: 2px; }
.teen-sec__note { margin: 18px 0 26px; font-size: .95rem; }
.teen-sec .b-btn.teen-sec__btn { --bb: #f4f2ec; --bf: #0b0a0f; background: #f4f2ec; color: #0b0a0f; }
.teen-sec .b-btn--ghost.teen-sec__ghost { --bf: #fff; color: #f4f2ec; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(244, 242, 236, .45); }
.teen-sec__cards { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.teen-sec__card { position: relative; aspect-ratio: 9 / 15; border-radius: 10px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(244, 242, 236, .1); transform: translateY(calc(var(--i) * 18px)) rotate(calc((var(--i) - 1) * 2.5deg)); }
.js-motion .teen-sec__card { transition: transform 900ms var(--ease); }
@media (hover: hover) { .teen-sec__cards:hover .teen-sec__card { transform: translateY(calc(var(--i) * 8px)) rotate(0deg); } }
@media (max-width: 520px) { .teen-sec__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .teen-sec__card { transition: none; } }

/* ---------- the hero phone never collides with the sticky header (wide windows, 980px and up) ----------
   Side by side, the phone sits right under the header's "Sign in / My parties" and "Try it free". It
   starts a clear gap below the header, and as the hero scrolls away the whole stage (phone, crew,
   notifications) fades and sinks back before its top can slide under the header capsule, so the
   dark phone never shows through the glass behind those buttons. Scroll-driven where supported
   (it starts 120px below the 80px header), mk.js does the same on scroll elsewhere; reduced motion: no fade,
   the opaque capsule below covers it. */
@media (min-width: 980px) {
  .mk-hero__stage { margin-top: 12px; }
  @supports (animation-timeline: view()) {
    .js-motion .mk-hero__stage { animation: mk-stage-away linear both; animation-timeline: view(block 200px auto); animation-range: exit 0% exit 22%; }
  }
}
/* .mk-hero is overflow: clip at every width (see .mk-hero above), so the view timeline moves. */
@keyframes mk-stage-away { to { opacity: 0; transform: translate3d(0, 40px, 0) scale(.96); } }
.mk-head.is-condensed .mk-head__bg { background: rgba(255, 250, 245, .97); }
.mk-head.is-condensed.on-dark .mk-head__bg { background: rgba(24, 17, 50, .94); }
@media (prefers-reduced-motion: reduce) { .mk-hero__stage { animation: none !important; } }

/* the try-it card: frosted glass that belongs to the stage */
.try { background: var(--glass); box-shadow: var(--sh-glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); }

/* ---------- the promise ribbon ---------- */
.ribbon { position: relative; z-index: 2; overflow: hidden; padding: 30px 0; margin: -64px 0 -20px; }
.ribbon__band { width: 106%; margin-left: -3%; overflow: hidden; transform: rotate(-1.4deg); background: var(--midnight); color: #fff; box-shadow: 0 18px 40px -22px rgba(26, 20, 51, .6); }
.ribbon__track { display: flex; width: max-content; padding-left: 3%; }
.ribbon__list { display: flex; flex: none; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.ribbon__list li { display: inline-flex; align-items: center; gap: 22px; padding: 16px 22px 16px 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(1rem, .6vw + .85rem, 1.2rem); letter-spacing: -.01em; white-space: nowrap; }
.ribbon__list li::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--sunbeam); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.ribbon__list li:nth-child(3n + 2)::before { background: #ff9cb6; }
.ribbon__list li:nth-child(3n)::before { background: var(--mint); }
.js-motion .ribbon__track { animation: mk-marquee 48s linear infinite; }
.ribbon:hover .ribbon__track { animation-play-state: paused; }
@keyframes mk-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
html:not(.js-motion) .ribbon__track { width: auto; flex-wrap: wrap; justify-content: center; padding: 6px 16px; }
html:not(.js-motion) .ribbon__list { flex-wrap: wrap; justify-content: center; }
html:not(.js-motion) .ribbon__list li { padding: 8px 12px; }
html:not(.js-motion) .ribbon__list[aria-hidden="true"] { display: none; }

/* ---------- the story: party week in four acts ---------- */
.story { overflow: clip; }
.story__grid { position: relative; display: grid; gap: 0; }
.story__acts { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.story__act { min-height: 72svh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
.story__act > * { max-width: 30rem; }
.story__no { display: inline-flex; align-self: flex-start; font-weight: 750; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--balloon); background: var(--blush); padding: 6px 12px; border-radius: 999px; margin-bottom: 16px; }
.story__act h3 { font-size: clamp(1.9rem, 2.4vw + 1rem, 3rem); letter-spacing: -.035em; line-height: 1; margin-bottom: 14px; }
.story__act p { color: var(--ink-2); font-size: 1.08rem; margin: 0; }
/* the act being played is in full ink; the others step back to Ink 3 (still AA, never faded out) */
.js-motion .story__act:not(.is-current) h3 { color: var(--ink-3); }
.js-motion .story__act:not(.is-current) p { color: var(--ink-3); }
.js-motion .story__act:not(.is-current) .story__no { background: var(--lilac); color: var(--grape-ink); }
.story__more { text-align: center; margin: 24px 0 0; }

.story__stage { position: sticky; top: 74px; z-index: 2; height: min(56svh, 470px); display: grid; place-items: center; padding: 34px 0 10px;
  background: linear-gradient(var(--frosting) calc(100% - 16px), rgba(255, 248, 240, 0)); }
.story__device { position: relative; height: 100%; aspect-ratio: 9 / 13.5; max-width: 92vw; border-radius: 34px; background: #fff; box-shadow: var(--sh-3), inset 0 0 0 1px var(--line); overflow: hidden; isolation: isolate; }
.story__device::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 60% at 50% 0%, var(--lilac), #fff 70%); z-index: -1; }
@media (min-width: 960px) {
  .story__grid { grid-template-columns: 1fr 1fr; gap: 56px; }
  .story__stage { grid-column: 2; grid-row: 1; top: 96px; height: calc(100svh - 140px); max-height: 640px; padding: 40px 0 0; background: none; }
  .story__acts { grid-column: 1; grid-row: 1; }
  .story__act { min-height: 88svh; }
  .story__act:first-child { min-height: 70svh; }
  .story__act:last-child { min-height: 76svh; }
  .story__device { height: min(100%, 560px); border-radius: 40px; }
}
/* progress: one fill for the four acts (stepped here; scrubbed by the scroll timeline below) */
.story__rail { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; padding: 4px; z-index: 3; }
.story__rail::before { content: ""; position: absolute; left: 16px; right: 16px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: var(--line-2); }
.story__fill { position: absolute; left: 16px; right: 16px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: var(--celebrate); transform-origin: 0 50%; transform: scaleX(0); transition: transform 600ms var(--ease); }
.story__rail b { position: relative; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 800; background: #fff; color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background-color var(--t-med), color var(--t-med), box-shadow var(--t-med); }
.story__stage[data-act="2"] .story__fill { transform: scaleX(.333); }
.story__stage[data-act="3"] .story__fill { transform: scaleX(.667); }
.story__stage[data-act="4"] .story__fill { transform: scaleX(1); }
.story__stage:is([data-act="1"], [data-act="2"], [data-act="3"], [data-act="4"]) .story__rail b:nth-of-type(1),
.story__stage:is([data-act="2"], [data-act="3"], [data-act="4"]) .story__rail b:nth-of-type(2),
.story__stage:is([data-act="3"], [data-act="4"]) .story__rail b:nth-of-type(3),
.story__stage[data-act="4"] .story__rail b:nth-of-type(4) { background: var(--midnight); color: #fff; box-shadow: none; }

/* scenes: only the current act shows; every move is transform or opacity */
.sc { position: absolute; inset: 0; padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; opacity: 0; visibility: hidden; transition: opacity 420ms var(--ease), visibility 0s linear 420ms; }
.story__stage[data-act="1"] .sc--1, .story__stage[data-act="2"] .sc--2, .story__stage[data-act="3"] .sc--3, .story__stage[data-act="4"] .sc--4 { opacity: 1; visibility: visible; transition-delay: 0s; }
.sc__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 4px 0 6px; font-size: 1rem; }
.sc__head b { font-family: var(--f-display); font-size: 1.15rem; letter-spacing: -.02em; }
.sc__cap { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; text-align: center; font-weight: 700; font-size: .88rem; color: var(--ink-2); }
.sc__kicker { margin: 6px 0 0; font-size: .78rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* act 1: the envelope opens and the invite rises out of it */
.env { position: absolute; left: 9%; right: 9%; bottom: 17%; height: 40%; perspective: 900px; }
.env__back, .env__front, .env__flap { position: absolute; left: 0; right: 0; }
.env__back { inset: 0; border-radius: 14px; background: #e3d9ff; }
.env__front { inset: 0; z-index: 3; border-radius: 0 0 14px 14px; background: linear-gradient(160deg, #f1ecff, #ddd2ff); clip-path: polygon(0 18%, 50% 62%, 100% 18%, 100% 100%, 0 100%); }
.env__flap { top: 0; height: 64%; z-index: 4; background: linear-gradient(180deg, #cfc0ff, #b9a6ff); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; transform: rotateX(0deg); transition: transform 520ms var(--ease), z-index 0s linear 260ms; backface-visibility: visible; }
.env__card { position: absolute; left: 6%; right: 6%; top: -6%; height: 150%; z-index: 2; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 16px 34px -16px rgba(26, 20, 51, .5); transform: translate3d(0, 36%, 0); transition: transform 900ms var(--ease-spring) 380ms; display: flex; flex-direction: column; }
.env__art { flex: 0 0 52%; background: linear-gradient(#26307a, #0b1033); position: relative; overflow: hidden; }
.env__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.env__txt { flex: 1; padding: 8px 12px 10px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; background: #0b1033; color: #fff; }
.env__txt small { font-size: .62rem; color: #ffd166; font-weight: 700; }
.env__txt b { font-family: var(--f-display); font-size: 1.05rem; letter-spacing: -.02em; line-height: 1.1; }
.env__txt span { font-size: .66rem; opacity: .8; }
.env__txt i { font-style: normal; margin-top: auto; font-size: .66rem; font-weight: 800; color: #1a1433; background: #ffb703; border-radius: 999px; padding: 4px 12px; }
.story__stage[data-act="1"] .env__flap { transform: rotateX(180deg); z-index: 1; }
.story__stage[data-act="1"] .env__card { transform: translate3d(0, -52%, 0); }

/* act 2: replies fly in, one family at a time */
.rv { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 16px; background: #fff; box-shadow: var(--sh-1); font-size: .86rem; line-height: 1.2;
  opacity: 0; transform: translate3d(70%, -10px, 0) rotate(5deg); transition: opacity 360ms var(--ease) calc(var(--i) * 170ms + 120ms), transform 820ms var(--ease-spring) calc(var(--i) * 170ms + 120ms); }
.rv > span:nth-child(2) { flex: 1; min-width: 0; }
.rv small { display: block; color: var(--ink-3); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv .ui-av { width: 30px; height: 30px; font-size: .72rem; }
.story__stage[data-act="2"] .rv { opacity: 1; transform: none; }

/* act 3: the headcount ticks up */
.hc { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.hc b { font-family: var(--f-display); font-weight: 800; font-size: clamp(4rem, 9vw, 6.2rem); line-height: .9; letter-spacing: -.06em; font-variant-numeric: tabular-nums; color: var(--ink); }
.hc span { font-weight: 750; color: var(--ink-2); }
.hc__meter { display: flex; height: 12px; border-radius: 999px; background: var(--line); overflow: hidden; }
.hc__meter i { display: block; width: calc(var(--w) * 100%); height: 100%; transform-origin: 0 50%; transform: scaleX(0); transition: transform 1100ms var(--ease) 200ms; }
.hc__meter i + i { transition-delay: 600ms; }
.story__stage[data-act="3"] .hc__meter i { transform: scaleX(1); }
.hc__chips { list-style: none; padding: 0; margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hc__chips li { font-size: .78rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--lilac); color: var(--grape-ink); opacity: 0; transform: scale(.8); transition: opacity 300ms var(--ease), transform 500ms var(--ease-spring); }
.hc__chips li:nth-child(2) { --n: 1; } .hc__chips li:nth-child(3) { --n: 2; background: #fff4d6; color: #7a5300; }
.story__stage[data-act="3"] .hc__chips li { opacity: 1; transform: none; transition-delay: calc(700ms + var(--n, 0) * 120ms); }
.hc__nudge { margin-top: auto; padding: 12px 14px; border-radius: 18px 18px 18px 6px; background: var(--blush); font-size: .82rem; color: var(--ink-2); line-height: 1.35; opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 400ms var(--ease) 1100ms, transform 700ms var(--ease-spring) 1100ms; }
.hc__nudge b { display: block; color: var(--ink); font-size: .86rem; margin-bottom: 2px; }
.hc__nudge span { display: table; margin-top: 8px; font-weight: 800; font-size: .76rem; color: #fff; background: var(--balloon); padding: 5px 12px; border-radius: 999px; }
.story__stage[data-act="3"] .hc__nudge { opacity: 1; transform: none; }

/* act 4: party night, checked in and picked up */
.ck { display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: #fff; box-shadow: var(--sh-1); font-size: .9rem; line-height: 1.2; }
.ck small { grid-column: 2; color: var(--ink-3); font-size: .78rem; }
.ck__box { grid-row: span 2; width: 26px; height: 26px; border-radius: 9px; border: 2px solid var(--line-2); position: relative; transition: background-color 300ms var(--ease) calc(var(--i) * 260ms + 250ms), border-color 300ms var(--ease) calc(var(--i) * 260ms + 250ms); }
.ck__box::after { content: ""; position: absolute; left: 7px; top: 3px; width: 7px; height: 12px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0); transition: transform 500ms var(--ease-spring) calc(var(--i) * 260ms + 300ms); }
.story__stage[data-act="4"] .ck__box { background: var(--mint); border-color: var(--mint); }
.story__stage[data-act="4"] .ck__box::after { transform: rotate(45deg) scale(1); }
.sc__done { margin-top: auto; padding: 14px 16px; border-radius: 18px; background: var(--celebrate); color: #fff; font-family: var(--f-display); font-weight: 750; font-size: 1.05rem; letter-spacing: -.01em; line-height: 1.2; text-align: center;
  opacity: 0; transform: translate3d(0, 16px, 0) scale(.96); transition: opacity 400ms var(--ease) 1400ms, transform 700ms var(--ease-spring) 1400ms; }
.story__stage[data-act="4"] .sc__done { opacity: 1; transform: none; }

.sc__stats { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity 400ms var(--ease) 1000ms, transform 600ms var(--ease) 1000ms; }
.sc__stats span { display: grid; justify-items: center; padding: 10px 6px; border-radius: 14px; background: var(--lilac); font-size: .74rem; font-weight: 700; color: var(--grape-ink); }
.sc__stats b { font-family: var(--f-display); font-size: 1.4rem; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.story__stage[data-act="2"] .sc__stats { opacity: 1; transform: none; }
.hc__shop { display: grid; gap: 4px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: var(--sh-1); font-size: .84rem; opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity 400ms var(--ease) 900ms, transform 600ms var(--ease) 900ms; }
.hc__shop b { font-size: .84rem; margin-bottom: 2px; }
.hc__shop span { display: flex; justify-content: space-between; color: var(--ink-2); border-top: 1px dashed var(--line-2); padding-top: 4px; }
.hc__shop i { font-style: normal; font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums; }
.story__stage[data-act="3"] .hc__shop { opacity: 1; transform: none; }
.sc__next { display: grid; padding: 12px 14px; border-radius: 16px; background: var(--midnight); color: #fff; opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity 400ms var(--ease) 1200ms, transform 600ms var(--ease) 1200ms; }
.sc__next small { font-size: .74rem; font-weight: 700; color: var(--sunbeam); letter-spacing: .04em; }
.sc__next b { font-family: var(--f-display); font-size: 1.1rem; letter-spacing: -.02em; }
.story__stage[data-act="4"] .sc__next { opacity: 1; transform: none; }
.sc--4 .sc__done { margin-top: 0; }
.sc--4 .sc__next { margin-top: auto; }
.story__stage[data-act="0"] .sc--1 { opacity: 1; visibility: visible; }

/* the crew peeks around the device and cheers on party night */
.crew--story { position: absolute; inset: 34px 0 0; pointer-events: none; z-index: 3; }
.crew--story .crew__m { --sz: 60px; }
.crew--story .crew__m:nth-child(1) { left: calc(50% - 236px); top: 12%; }
.crew--story .crew__m:nth-child(2) { right: calc(50% - 240px); top: 30%; }
.crew--story .crew__m:nth-child(3) { left: calc(50% - 250px); bottom: 18%; }
.crew--story .crew__m:nth-child(4) { right: calc(50% - 232px); bottom: 2%; }
@media (max-width: 959px) { .crew--story { display: none; } }
.js-motion .story__stage[data-act="4"] .crew--story .crew__m { animation: mk-hop 1.6s var(--ease) infinite; animation-delay: calc(var(--i) * 140ms); }

/* ---------- value: the receipt, the per-guest math, the plan ---------- */
.value__grid { display: grid; gap: 22px; align-items: start; }
@media (min-width: 980px) { .value__grid { grid-template-columns: 1.02fr .98fr; gap: 36px; } }
.receipt { position: relative; background: #fff; padding: 30px 26px 40px; border-radius: 22px 22px 0 0; box-shadow: var(--sh-2); font-size: .97rem;
  -webkit-mask: radial-gradient(10px at 50% calc(100% + 1px), #0000 98%, #000) 50% / 26px 100% repeat-x; mask: radial-gradient(10px at 50% calc(100% + 1px), #0000 98%, #000) 50% / 26px 100% repeat-x; }
@media (min-width: 980px) { .receipt { transform: rotate(-1.2deg); padding: 40px 40px 52px; transition: transform var(--t-slow) var(--ease); } .receipt:hover { transform: rotate(0deg); } }
.receipt__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding-bottom: 18px; margin: 0 0 8px; border-bottom: 2px dashed var(--line-2); }
.receipt__head span { font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; }
.receipt__head small { color: var(--ink-3); font-weight: 600; letter-spacing: .04em; }
.receipt__list { list-style: none; padding: 0; margin: 0; }
.receipt__list li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; color: var(--ink-2); }
.receipt__list li span { flex: 1; min-width: 0; }
.receipt__list li::after { content: none; }
.receipt__list b { flex: none; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #0b6e57; }
.receipt__total { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 0; padding-top: 18px; border-top: 2px dashed var(--line-2); font-weight: 750; }
.receipt__total b { font-family: var(--f-display); font-size: 2.6rem; letter-spacing: -.05em; line-height: 1; color: var(--ink); }
.receipt__foot { margin: 14px 0 0; text-align: center; font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: var(--ink-3); }
.value__side { display: grid; gap: 18px; }

.calc { background: #fff; border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sh-1); }
.calc__q { display: block; font-weight: 750; margin-bottom: 8px; }
.calc__row { display: flex; align-items: center; gap: 16px; }
.calc__n { flex: none; min-width: 2.2ch; font-family: var(--f-display); font-weight: 800; font-size: 1.8rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-align: right; }
.calc__range { flex: 1; min-width: 0; height: 44px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; --p: 41.7%; }
.calc__range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--balloon) var(--p), var(--line) var(--p)); }
.calc__range::-moz-range-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--balloon) var(--p), var(--line) var(--p)); }
.calc__range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 2px var(--balloon), 0 6px 14px -4px rgba(212, 47, 104, .6); transition: transform var(--t-fast) var(--ease-spring); }
.calc__range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 2px var(--balloon), 0 6px 14px -4px rgba(212, 47, 104, .6); }
.calc__range:active::-webkit-slider-thumb { transform: scale(1.15); }
.calc__range:focus-visible { outline: 3px solid var(--grape); outline-offset: 4px; border-radius: 999px; }
.calc__out { margin: 10px 0 0; color: var(--ink-2); }
.calc__out b { font-family: var(--f-display); font-size: 1.7rem; letter-spacing: -.03em; color: var(--balloon); font-variant-numeric: tabular-nums; margin-right: 4px; }

.mk-plan { position: relative; overflow: hidden; isolation: isolate; background: var(--midnight); color: #f4f0ff; border-radius: var(--r-xl); padding: 30px 24px; box-shadow: var(--sh-3); --ink-2: #c9c1e6; }
.mk-plan::before { content: ""; position: absolute; inset: -40% -30% auto auto; width: 90%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(238, 76, 118, .45), transparent); z-index: -1; }
.mk-plan::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .3; mix-blend-mode: screen; z-index: -1; pointer-events: none; }
@media (min-width: 760px) { .mk-plan { padding: 38px 40px; } }
.mk-plan__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-bottom: 18px; }
.mk-plan__amt { display: flex; align-items: flex-start; margin: 0; font-family: var(--f-display); font-weight: 800; letter-spacing: -.05em; line-height: .85; color: #fff; }
.mk-plan__amt span { font-size: 1.9rem; margin-top: .2em; }
.mk-plan__amt b { font-size: clamp(4.4rem, 7vw, 6rem); }
.mk-plan__amt small { align-self: flex-end; margin: 0 0 .5em .4em; font-family: var(--f-body); font-size: 1rem; font-weight: 700; letter-spacing: 0; color: #c9c1e6; }
.mk-plan__lede { flex: 1 1 14rem; margin: 0; color: #c9c1e6; font-weight: 600; }
.mk-plan__facts { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.mk-plan__facts li { display: flex; gap: 12px; align-items: flex-start; color: #c9c1e6; }
.mk-plan__facts li b { color: #fff; }
.mk-plan__facts .ic { flex: none; width: 32px; height: 32px; padding: 7px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: var(--sunbeam); }
.mk-plan__fine { margin: 16px 0 0; font-size: .88rem; color: #c9c1e6; }
.mk-plan__fine a { color: #fff; }

/* payment marks: plain wordmarks in the style of a checkout badge (no logos) */
.paybadges { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 16px 0 0; }
.paybadges--center { justify-content: center; margin-top: 22px; }
.pb { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 8px; background: #fff; color: #111 !important; font-weight: 750; font-size: .85rem; letter-spacing: -.01em; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.pb--ghost { background: transparent; color: #c9c1e6 !important; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2); font-weight: 650; }
.pb::before { content: ""; width: 14px; height: 14px; margin-right: 7px; border-radius: 4px; background: currentColor; -webkit-mask: var(--pbi) center / contain no-repeat; mask: var(--pbi) center / contain no-repeat;
  --pbi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2.5'/%3E%3Cpath d='M3 10.5h18'/%3E%3C/svg%3E"); }
.pb--ghost::before { --pbi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }

/* ---------- final CTA ---------- */
.mk-final .mk-h2 { max-width: 15ch; }
.mk-final .mk-serif { display: inline-block; }

/* ---------- inner-page heroes: aurora, grain and the crew peeking in ---------- */
.mk-phero { isolation: isolate; }
.mk-phero::before { content: ""; position: absolute; inset: -30% -10% 0; z-index: -1; pointer-events: none; background:
  radial-gradient(30% 40% at 12% 30%, rgba(255, 194, 61, .22), transparent 70%),
  radial-gradient(30% 40% at 88% 24%, rgba(238, 76, 118, .18), transparent 70%),
  radial-gradient(40% 40% at 50% 100%, rgba(123, 92, 255, .12), transparent 70%);
  -webkit-mask: linear-gradient(#000 60%, transparent); mask: linear-gradient(#000 60%, transparent); }
.mk-phero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--grain); opacity: .14; -webkit-mask: linear-gradient(#000 50%, transparent); mask: linear-gradient(#000 50%, transparent); }
.crew--phero { position: absolute; inset: 0; z-index: 0; display: none; }
@media (min-width: 1000px) {
  .crew--phero { display: block; }
  .crew--phero .crew__m { --sz: 76px; }
  .crew--phero .crew__m:nth-child(1) { left: max(24px, calc(50% - 600px)); top: 22%; }
  .crew--phero .crew__m:nth-child(2) { left: max(110px, calc(50% - 500px)); top: 62%; --sz: 60px; }
  .crew--phero .crew__m:nth-child(3) { right: max(24px, calc(50% - 600px)); top: 18%; --sz: 66px; }
  .crew--phero .crew__m:nth-child(4) { right: max(120px, calc(50% - 490px)); top: 60%; }
}
.mk-phero > .mk-wrap { position: relative; z-index: 1; }

/* ---------- desktop pointer: magnetic buttons (the cursor bubble was removed: owner feedback) ---------- */
[data-magnetic] { transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), background-color var(--t-fast), translate 500ms var(--ease-spring); }

/* ---------- theme pages: the art as a framed, tilted poster with the crew in front ---------- */
.td-hero { isolation: isolate; }
.td-hero__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(40% 50% at 78% 40%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%),
  radial-gradient(36% 40% at 10% 90%, color-mix(in srgb, var(--accent2, var(--accent)) 26%, transparent), transparent 70%); }
.td-hero__glow::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .12; }
.td-hero .mk-h1 { font-size: clamp(2.8rem, 5vw + 1rem, 5.6rem); line-height: .95; }
.td-stage { position: relative; perspective: 1400px; padding: 10px 0 40px; }
.td-hero__art { aspect-ratio: 16 / 10; border-radius: 32px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .14) inset; transform: rotateY(-9deg) rotateX(3deg); transform-origin: 60% 50%; background: radial-gradient(120% 90% at 50% 0%, var(--bg2), var(--bg)); }
.td-hero__art .hero-art { position: absolute; inset: 0; }
.td-hero__squad { position: absolute; left: 0; right: 0; bottom: 6%; display: flex; justify-content: center; z-index: 2; }
.td-hero__squad svg { width: clamp(48px, 7vw, 76px); height: auto; margin: 0 -4px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .25)); }
.js-motion .td-hero__squad svg { animation: mk-float 5s ease-in-out infinite; }
.js-motion .td-hero__squad svg:nth-child(2) { animation-delay: -1s; } .js-motion .td-hero__squad svg:nth-child(3) { animation-delay: -2s; }
.js-motion .td-hero__squad svg:nth-child(4) { animation-delay: -3s; } .js-motion .td-hero__squad svg:nth-child(5) { animation-delay: -4s; }
.td-hero__sheen { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(120deg, rgba(255, 255, 255, .22), transparent 35%, transparent 70%, rgba(255, 255, 255, .08)); }
.td-ticket { position: absolute; left: -2%; bottom: 0; z-index: 4; display: grid; gap: 4px; padding: 14px 16px; border-radius: 20px; min-width: 200px;
  background: rgba(255, 255, 255, .78); color: var(--midnight); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); box-shadow: var(--sh-glass); border: 1px solid rgba(255, 255, 255, .9); }
.td-ticket small { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.td-ticket b { font-family: var(--f-display); font-size: 1.1rem; letter-spacing: -.02em; }
.td-ticket__pal { display: flex; gap: 5px; margin-top: 4px; }
.td-ticket__pal span { width: 18px; height: 18px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.js-motion .td-hero__art { animation: td-poster-in 1100ms var(--ease) both; }
.js-motion .td-ticket { animation: td-ticket-in 900ms var(--ease-spring) 500ms both; }
@keyframes td-poster-in { from { opacity: 0; transform: rotateY(-22deg) rotateX(8deg) translate3d(40px, 20px, 0); } }
@keyframes td-ticket-in { from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.94); } }
@media (max-width: 979px) { .td-hero__art { transform: none; } .td-ticket { left: 12px; bottom: 6px; min-width: 0; padding: 10px 12px; } .td-ticket b { font-size: .98rem; } }
/* the poster is the view-transition target: no entrance animation when it flies in from a card */
html:active-view-transition .td-hero__art { animation: none; }

/* sample cards: cinematic 2:1 art on the samples page, the crew a little bigger, art drifts on hover */
.scards:not(.scards--4) .scard__art { aspect-ratio: 2 / 1; }
.scards:not(.scards--4) .scard__art .tcard__squad svg { width: 58px; height: 58px; }
.scards:not(.scards--4) .scard__body { padding: 22px 26px 24px; }
.scards:not(.scards--4) .scard__body h3 { font-size: 1.45rem; letter-spacing: -.025em; }
.scard__art .hero-art { transition: transform 900ms var(--ease); }
.scard:hover .scard__art .hero-art { transform: scale(1.05); }

/* home on phones: the theme gallery is one swipeable row (all themes, a few screens shorter) */
@media (max-width: 599px) {
  #themes .gal__grid { grid-auto-flow: column; grid-auto-columns: 80%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 6px 20px 18px; scrollbar-width: none; }
  #themes .gal__grid::-webkit-scrollbar { display: none; }
  #themes .gal__grid .tcard { scroll-snap-align: center; }
  #themes .gal__grid .tcard.is-hidden { display: none; }
}

/* ---------- small refinements across pages ---------- */
/* .mk p sets paragraph margins; these components set their own */
.mk .mk-plan__fine { margin: 18px 0 0; }
.mk .sc__head, .mk .sc__kicker, .mk .hc, .mk .calc__out, .mk .receipt__total, .mk .receipt__foot, .mk .receipt__head, .mk .mk-plan__amt, .mk .mk-plan__lede, .mk .sc__cap { margin-bottom: 0; }
.mk-pill { background: var(--glass); box-shadow: var(--sh-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mk-pillar, .qa details, .vs__card, .addon, .calc { box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, var(--sh-1); }
.mk-sec-head .mk-h2 { margin-bottom: .35em; }

/* phones: a compact, wide stage pinned under the header, and the act text in the half below it */
@media (max-width: 959px) {
  .story__stage { height: auto; padding: 38px 0 18px; }
  .story__device { height: 300px; width: min(100%, 380px); aspect-ratio: auto; border-radius: 28px; font-size: .9em; }
  .story__act { min-height: 48svh; justify-content: flex-start; padding: 4px 0 24px; }
  .story__act h3 { font-size: 1.75rem; margin-bottom: 8px; }
  .story__act p { font-size: 1rem; }
  .sc { padding: 14px 14px; gap: 6px; }
  .sc__head { margin: 0 0 2px; }
  .rv { padding: 6px 8px; font-size: .8rem; border-radius: 12px; }
  .rv .ui-av { width: 26px; height: 26px; }
  .sc__stats, .hc__shop, .sc--4 .sc__next, .hc__chips li:nth-child(2) { display: none; }
  .hc b { font-size: 3.6rem; }
  .ck { padding: 6px 10px; font-size: .84rem; border-radius: 12px; }
  .ck__box { width: 22px; height: 22px; border-radius: 7px; }
  .ck__box::after { left: 5px; top: 1px; }
  .sc--4 .sc__done { margin-top: auto; padding: 10px 12px; font-size: .95rem; }
  .hc__nudge { padding: 10px 12px; font-size: .78rem; }
  .env { bottom: 16%; height: 46%; left: 18%; right: 18%; }
  .sc__cap { bottom: 10px; font-size: .8rem; }
}

/* the story's progress fill and a gentle turn of the device, scrubbed by scroll where supported */
@supports (animation-timeline: view()) and (timeline-scope: --a) {
  @media (prefers-reduced-motion: no-preference) {
    .story__grid { timeline-scope: --story; }
    .story__acts { view-timeline: --story block; }
    .story__fill { transition: none; animation: mk-grow linear both; animation-timeline: --story; animation-range: contain 0% contain 100%; }
    .story__device { animation: story-turn linear both; animation-timeline: --story; animation-range: contain 0% contain 100%; }
    @keyframes story-turn { from { transform: perspective(1400px) rotateY(-7deg) rotateX(2deg); } 50% { transform: perspective(1400px) rotateY(0deg) rotateX(0deg); } to { transform: perspective(1400px) rotateY(7deg) rotateX(-2deg); } }
  }
}

/* reduced motion: every scene rests in its final state, nothing drifts */
@media (prefers-reduced-motion: reduce) {
  .sc, .env__flap, .env__card, .rv, .hc__meter i, .hc__chips li, .hc__nudge, .ck__box, .ck__box::after, .sc__done, .story__fill, [data-magnetic] { transition: none !important; }
}

/* ---------------- Google Ads landing pages (/lp/*, scripts/site-pages.mjs lpPage) ---------------- */
/* The home hero, with a headline sized for longer, keyword-matched lines. */
.mk-hero--lp .mk-h1 { font-size: clamp(2.3rem, 3.9vw + .7rem, 4.3rem); letter-spacing: -.035em; line-height: 1; }
@media (min-width: 980px) and (max-height: 960px) { .mk-hero--lp .mk-h1 { font-size: clamp(2.3rem, 3.4vw + .5rem, 3.9rem); } }
.lp-proof p { margin-bottom: 0; }
/* The intent's theme strip: swipe on phones (the strip scrolls, never the page), three across on desktop. */
.lp-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 80%); gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 4px; padding: 4px 4px 18px; margin: 0 -4px; scrollbar-width: thin; }
.lp-strip > .tcard { scroll-snap-align: start; min-width: 0; }
@media (min-width: 640px) { .lp-strip { grid-auto-columns: minmax(260px, 44%); } }
@media (min-width: 1000px) { .lp-strip { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; gap: 24px; overflow: visible; padding: 0; margin: 0; } }
.lp-plan { max-width: 560px; margin: 0 auto; }

/* Theme art pauses while off screen (mk.js offscreenPause). */
[data-theme][data-off], [data-theme][data-off] * { animation-play-state: paused !important; }

/* Smallest phones (320–359px): the header used to need ~380px and widened the whole page sideways.
   Tighter spacing keeps the full wordmark and "Try it free" on one line inside the screen. */
@media (max-width: 359px) {
  .mk-head__in { gap: 6px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .mk-brand { font-size: .9rem; gap: 6px; min-width: 0; }
  .mk-brand svg { width: 26px; height: 26px; }
  .mk-head__act { gap: 4px; }
  .mk-head__act .b-btn { padding: 8px 10px; font-size: .82rem; }
  .mk-burger { width: 40px; height: 40px; }
}