/* Marketing site (/, /pricing, /about): layout and illustrations on top of styles.css. */

html { scroll-behavior: smooth; }
.mk { max-width: 1320px; margin: 0 auto; padding: 4px 32px 0; }
.mk section { scroll-margin-top: 24px; }
.eyebrow { display: inline-flex; }
.lede { font-size: 19px; line-height: 1.5; color: var(--muted); max-width: 560px; }
.lede b { color: var(--ink); font-weight: 650; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.sec-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin: 0 auto 32px; max-width: 760px; }
.sec-head h2, .big-h2 { font-size: 52px; font-weight: 780; letter-spacing: -0.05em; line-height: 1; }
.sec-head .lede { max-width: 620px; }
.qi { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--t-soft); color: var(--t-deep); flex: none; }
.qi.dark { background: var(--ink); color: #fff; }

/* ---------- header / footer ---------- */
.site-nav { padding: 18px 32px; }
.site-nav .btn { height: 42px; }
.site-foot { width: calc(100% - 64px); max-width: 1256px; margin: 72px auto 0; padding: 26px 0 40px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; border-top: 1px solid var(--line); }
.site-foot .logo { font-size: 18px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.site-foot nav a { font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; }
.site-foot nav a:hover { color: var(--ink); }

/* ---------- landing ---------- */
/* Sticker colours: the mint theme plus butter, sky and peach pops. */
.lp { --mint: #dff5e4; --mint-ink: #1d5c3b; --butter: #fff1c7; --butter-ink: #6b4a05; --sky: #e1eaff; --sky-ink: #233a8a; --peach: #ffe3d9; --peach-ink: #8a3420; --lp-shadow: 0 24px 48px -24px rgba(24, 60, 40, 0.3), 0 4px 12px -6px rgba(24, 60, 40, 0.12); }
body[data-page="landing"] { overflow-x: clip; }
.lp .mint { background: var(--mint); color: var(--mint-ink); }
.lp .butter { background: var(--butter); color: var(--butter-ink); }
.lp .sky { background: var(--sky); color: var(--sky-ink); }
.lp .peach { background: var(--peach); color: var(--peach-ink); }
/* The Fizz swash: one hand-made mint stroke under a phrase, ending in a few rising fizz bubbles.
   It draws itself in (on load in the hero, once scrolled into view elsewhere: marketing.js adds .in)
   and is simply there with reduced motion or without JavaScript. */
.swash { position: relative; isolation: isolate; display: inline-block; white-space: nowrap; color: var(--t-deep); }
.swash::before { content: ""; position: absolute; left: -0.04em; right: 0.06em; bottom: -0.2em; height: 0.28em; z-index: -1; 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 17 C60 12 140 9 220 8 C250 7.5 275 6 296 3 C297 6 290 9 280 11 C230 15 150 16 80 19 C50 20 20 21 5 21 C1 21 0 18 3 17 Z' fill='%238fdcaa'/%3E%3C/svg%3E") no-repeat center / 100% 100%; transition: clip-path 0.9s cubic-bezier(0.6, 0, 0.2, 1); }
.swash::after { content: ""; position: absolute; right: -0.4em; bottom: -0.24em; width: 0.36em; height: 0.52em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 40'%3E%3Cg fill='%23effdf0' stroke='%234fb47c' stroke-width='2.4'%3E%3Ccircle cx='8' cy='31' r='5.5'/%3E%3Ccircle cx='19' cy='18' r='4'/%3E%3Ccircle cx='25' cy='7' r='2.8'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; transition: opacity 0.5s 0.7s, transform 0.5s 0.7s ease-out; }
.swash-js .lp section:not(.hero) .swash:not(.in)::before { clip-path: inset(0 100% 0 0); }
.swash-js .lp section:not(.hero) .swash:not(.in)::after { opacity: 0; transform: translateY(0.2em) scale(0.5); }
.hero .swash::before { animation: swash-in 0.9s 0.3s cubic-bezier(0.6, 0, 0.2, 1) both; }
.hero .swash::after { animation: fizz-in 0.6s 1.1s ease-out both; }
@keyframes swash-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fizz-in { from { opacity: 0; transform: translateY(0.2em) scale(0.5); } to { opacity: 1; transform: none; } }
.ok { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #34c46e; color: #fff; font-size: 12px; font-weight: 800; }

/* Hero: short headline, Fizzy on a wobbly blob with fizz rising and stickers bobbing around. */
.hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 16px; align-items: center; padding: 36px 24px 8px; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; position: relative; z-index: 1; }
.hero h1 { font-size: 74px; font-weight: 800; letter-spacing: -0.045em; line-height: 0.98; }
.hero .lede { font-size: 20px; max-width: 560px; }
.hero-stage { position: relative; display: grid; place-items: center; min-height: 500px; }
.blob { position: absolute; width: 420px; height: 400px; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; background: radial-gradient(circle at 40% 35%, #fff, var(--t-soft) 50%, var(--t-mid)); box-shadow: inset 0 -20px 40px -20px rgba(47, 143, 94, 0.35); animation: morph 14s ease-in-out infinite; }
@keyframes morph { 50% { border-radius: 58% 42% 38% 62% / 55% 60% 40% 45%; transform: rotate(8deg); } }
.hero-stage > .fizzy { position: relative; z-index: 1; animation: bob 5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-10px); } }
.bubbles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bubbles i { position: absolute; bottom: -24px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle at 32% 30%, #fff 18%, rgba(255, 255, 255, 0.25) 42%, rgba(151, 224, 173, 0.25)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(47, 143, 94, 0.12); opacity: 0; animation: rise var(--d) linear infinite var(--delay); }
.bubbles i:nth-child(1) { --x: 30%; --s: 14px; --d: 6s; --delay: 0s; }
.bubbles i:nth-child(2) { --x: 44%; --s: 22px; --d: 7.5s; --delay: -2s; }
.bubbles i:nth-child(3) { --x: 58%; --s: 10px; --d: 5.5s; --delay: -4s; }
.bubbles i:nth-child(4) { --x: 66%; --s: 18px; --d: 8s; --delay: -1s; }
.bubbles i:nth-child(5) { --x: 38%; --s: 8px; --d: 5s; --delay: -3s; }
.bubbles i:nth-child(6) { --x: 52%; --s: 12px; --d: 6.5s; --delay: -5s; }
.bubbles i:nth-child(7) { --x: 72%; --s: 9px; --d: 7s; --delay: -6s; }
.bubbles i:nth-child(8) { --x: 24%; --s: 16px; --d: 9s; --delay: -7s; }
@keyframes rise {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(12px, -260px); }
  90% { opacity: 0.9; }
  100% { transform: translate(-8px, -520px); opacity: 0; }
}
.sticker { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 16px; background: #fff; font-size: 14px; font-weight: 700; line-height: 1.15; white-space: nowrap; box-shadow: var(--lp-shadow); transform: rotate(var(--r)); animation: wobble var(--d, 6s) ease-in-out infinite var(--delay, 0s); }
@keyframes wobble { 50% { transform: translateY(-9px) rotate(calc(var(--r) * -0.6)); } }
.s-copied { left: 0; top: 70px; --r: -6deg; --d: 6s; }
.s-watched { right: -4px; top: 120px; --r: 5deg; --d: 6.8s; --delay: -2s; background: var(--butter); color: var(--butter-ink); }
.s-um { left: 10px; bottom: 96px; --r: 4deg; --d: 7.2s; --delay: -3s; background: var(--peach); color: var(--peach-ink); }
.s-book { right: 30px; bottom: 50px; --r: -4deg; --d: 6.4s; --delay: -1s; background: var(--ink); color: #fff; border-radius: 999px; }
.s-react { left: 30%; top: 4px; --r: -10deg; --d: 5.4s; --delay: -4s; width: 68px; height: 68px; justify-content: center; padding: 0; border-radius: 50%; background: var(--sky); }
/* The Fizz 3D icon set; sizes come from each img's width/height. */
.ico3d { flex: none; display: block; }
.sticker .ico3d { margin: -12px 0 -12px -8px; }
.s-react.sticker .ico3d { margin: 0; }
.scribble { position: absolute; stroke: var(--ink-2); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.scribble.arrow { width: 54px; right: 150px; bottom: 6px; transform: rotate(-12deg); }
.scribble.stars { width: 30px; right: 70px; top: 40px; stroke: #e0a10e; }
.hero-stage .note { position: absolute; right: 64px; bottom: -22px; transform: rotate(-5deg); font-size: 17px; }

/* Story: three steps with little looping demos. */
.story { margin-top: 72px; text-align: center; }
.story > .pill { margin-bottom: 16px; }
.steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: left; }
.step { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 26px; border-radius: 30px; background: rgba(255, 255, 255, 0.85); box-shadow: var(--lp-shadow); transform: rotate(var(--r)); transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
.step:hover { transform: rotate(0) translateY(-4px); }
.s1 { --r: -1.6deg; }
.s2 { --r: 1.2deg; margin-top: 36px; }
.s3 { --r: -0.8deg; }
.step h3 { font-size: 26px; font-weight: 770; letter-spacing: -0.04em; margin-top: 6px; padding: 0 6px; }
.step p { color: var(--muted); font-size: 15.5px; line-height: 1.45; padding: 0 6px; }
.steps .num { position: absolute; z-index: 3; top: -18px; left: -12px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font: 700 25px/1 var(--hand); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.4); transform: rotate(-8deg); }
.s1 .num { background: #ffd96b; }
.s2 .num { background: #9dbcff; }
.s3 .num { background: #ffb39a; }
.demo { position: relative; height: 200px; border-radius: 20px; overflow: hidden; background: radial-gradient(70% 80% at 15% 10%, var(--bg-a), transparent 70%), radial-gradient(60% 70% at 90% 90%, var(--bg-b), transparent 70%), var(--bg-c); box-shadow: inset 0 0 0 1px var(--line); }

/* 1: the cursor clicks Stop and the link is copied. */
.rec-demo .screen { position: absolute; inset: 14px 14px 62px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-radius: 14px; background: #fff; box-shadow: 0 14px 28px -18px rgba(20, 50, 35, 0.5); }
.rec-demo .screen s { flex: 1; height: 8px; border-radius: 6px; background: var(--t-soft); }
.rec-demo .screen s + s { flex: 0.6; }
.rec-demo .recbar { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 5px; border-radius: 999px; background: #151917; }
.recbar .rb { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.recbar .time { color: #fff; font-weight: 650; font-size: 13px; font-variant-numeric: tabular-nums; }
.recbar .stop { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px 0 11px; border-radius: 999px; background: #fff; font-weight: 700; font-size: 13px; animation: press 4.5s ease infinite; }
.recbar .stop i { width: 10px; height: 10px; border-radius: 3px; background: var(--rec); }
@keyframes press { 0%, 38%, 48%, 100% { transform: scale(1); } 43% { transform: scale(0.88); } }
.cursor { position: absolute; left: calc(50% + 52px); bottom: 14px; width: 20px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath d='M2 1 L2 18 L6.5 14 L9.5 21 L12.5 19.5 L9.5 13 L16 13 Z' fill='%23111513' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat; animation: cursor 4.5s ease-in-out infinite; }
@keyframes cursor {
  0% { transform: translate(-130px, -100px); opacity: 0; }
  8% { opacity: 1; }
  36%, 44% { transform: translate(0, 0); }
  41% { transform: translate(0, 0) scale(0.85); }
  80% { transform: translate(40px, 30px); opacity: 1; }
  92%, 100% { transform: translate(40px, 30px); opacity: 0; }
}
.rec-demo .copied { position: absolute; top: 24px; right: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 9px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 700; box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.5); animation: toast 4.5s ease infinite; }
@keyframes toast {
  0%, 44% { opacity: 0; transform: translateY(-10px) scale(0.85); }
  50% { opacity: 1; transform: translateY(0) scale(1.06); }
  54%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(-6px); }
}

/* 2: ums and pauses get snipped out of the transcript. */
.tidy-demo { padding: 18px 18px 0; text-align: left; }
.tidy-demo p { font-size: 16px; line-height: 1.7; font-weight: 550; color: var(--ink-2); }
.tidy-demo del { display: inline-block; max-width: 70px; overflow: hidden; vertical-align: bottom; white-space: nowrap; padding: 0 3px; border-radius: 6px; background: var(--peach); color: var(--peach-ink); text-decoration-thickness: 2px; animation: snip 5s ease-in-out infinite; }
.tidy-demo del:nth-of-type(2) { animation-delay: 0.25s; }
.tidy-demo del:nth-of-type(3) { animation-delay: 0.5s; }
.tidy-demo del.gap { font-size: 12px; }
@keyframes snip {
  0%, 15% { max-width: 70px; padding: 0 3px; background: transparent; color: rgba(17, 21, 19, 0.45); text-decoration-color: transparent; }
  28%, 40% { max-width: 70px; padding: 0 3px; background: var(--peach); color: var(--peach-ink); text-decoration-color: currentColor; }
  52%, 88% { max-width: 0; padding: 0; background: var(--peach); color: var(--peach-ink); }
  100% { max-width: 70px; padding: 0 3px; background: transparent; color: rgba(17, 21, 19, 0.45); text-decoration-color: transparent; }
}
.tidy-tag { position: absolute; right: 14px; bottom: 54px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px 4px 6px; border-radius: 999px; background: var(--butter); color: var(--butter-ink); font-size: 12.5px; font-weight: 750; transform: rotate(-3deg); box-shadow: 0 8px 16px -10px rgba(0, 0, 0, 0.35); animation: tag-pop 5s ease infinite; }
@keyframes tag-pop { 0%, 48% { opacity: 0; transform: rotate(-3deg) scale(0.6); } 56%, 90% { opacity: 1; transform: rotate(-3deg) scale(1); } 100% { opacity: 0; } }
.tidy-demo .caption { position: absolute; left: 14px; right: 14px; bottom: 12px; padding: 7px 10px; border-radius: 10px; background: #1c2340; color: #fff; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: 0.02em; }
.tidy-demo .caption b { padding: 0 4px; border-radius: 5px; background: #ffb020; color: #1c2340; }

/* 3: a branded page, then viewers arrive and their progress fills. */
.watch-demo { padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.page-top { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 8px; border-radius: 12px; background: #fff; font-size: 13px; box-shadow: 0 0 0 1px var(--line); }
.logo-dot { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: #e85d75; color: #fff; font-size: 11px; font-weight: 800; }
.page-top b { flex: 1; }
.page-top .book { padding: 5px 10px; border-radius: 999px; background: var(--t-deep); color: #fff; font-size: 11.5px; font-weight: 700; }
.viewer { display: flex; align-items: center; gap: 10px; font-size: 13.5px; animation: arrive 5s ease infinite; }
.viewer:nth-child(3) { animation-delay: 0.35s; }
.viewer:nth-child(4) { animation-delay: 0.7s; }
.viewer .avatar { width: 30px; height: 30px; font-size: 12px; box-shadow: none; }
.viewer .a2 { background: linear-gradient(140deg, #ffd96b, #c98a0b); }
.viewer .a3 { background: linear-gradient(140deg, #9dbcff, #3d63d6); }
.viewer b { width: 44px; }
.viewer .bar { flex: 1; height: 8px; border-radius: 8px; background: rgba(17, 21, 19, 0.08); overflow: hidden; }
.viewer .bar i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--t-mid), var(--t-deep)); animation: fill 5s ease-out infinite; animation-delay: inherit; }
@keyframes arrive { 0% { opacity: 0; transform: translateX(-14px); } 10%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes fill { 0%, 12% { width: 0; } 60%, 100% { width: var(--w); } }

/* Stack strip: the tools Fizz replaces, in three punchy lines. */
.stack { margin: 72px auto 0; max-width: 1040px; text-align: center; display: flex; flex-direction: column; gap: 6px; font-size: 32px; font-weight: 760; letter-spacing: -0.035em; line-height: 1.2; }
.stack-2 { color: var(--muted); }
.stack .ouch { color: var(--peach-ink); white-space: nowrap; }

/* Live, meetings and studio: copy beside a little demo, alternating sides. */
.feat { margin-top: 96px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.feat.flip .feat-copy { order: 2; }
.feat-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.feat-ico { margin-bottom: -4px; filter: drop-shadow(0 12px 12px rgba(24, 60, 40, 0.2)); }
.feat-demo { height: auto; min-height: 300px; padding: 22px; display: flex; flex-direction: column; gap: 14px; justify-content: center; border-radius: 28px; box-shadow: var(--lp-shadow); transform: rotate(1deg); }
.flip .feat-demo { transform: rotate(-1deg); }

/* Live: the real Fizzy Live compositor (marketing.js), with Fizzy on camera, a Pill name card and a scene switcher. */
.call-tile { position: relative; border-radius: 20px; overflow: hidden; }
#live-canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--bg-c); }
.live-pill { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(17, 21, 19, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 11.5px; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; }
.live-pill i { width: 7px; height: 7px; border-radius: 50%; background: #ff5a4f; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.scenes { align-self: center; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.75); box-shadow: 0 10px 20px -14px rgba(0, 0, 0, 0.35); }
.scenes button { padding: 7px 13px; border: 0; border-radius: 999px; background: transparent; font: 650 12.5px var(--font); color: var(--ink-2); cursor: pointer; transition: background 0.25s, color 0.25s; }
.scenes button:hover { color: var(--ink); }
.scenes button.on { background: var(--ink); color: #fff; }

.joined { display: flex; align-items: center; gap: 10px; align-self: flex-start; padding: 6px 14px 6px 8px; border-radius: 999px; background: #fff; font-size: 13.5px; }
.joined .rec-dot { margin-left: 4px; }
.notes { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 18px; background: #fff; font-size: 13.5px; }
.notes .label { font-size: 10.5px; }
.notes p { color: var(--ink-2); line-height: 1.4; }
.todo { display: flex; align-items: center; gap: 9px; }
.todo i { width: 16px; height: 16px; flex: none; border-radius: 5px; box-shadow: inset 0 0 0 1.5px rgba(17, 21, 19, 0.3); }
.todo em { font-style: normal; color: var(--muted); font-size: 12.5px; }
.recap { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 7px 12px 7px 8px; border-radius: 12px; background: var(--t-light); }
.recap span { color: var(--muted); }

.shapes { display: flex; align-items: flex-end; justify-content: center; gap: 18px; padding-bottom: 22px; }
.shp { position: relative; display: grid; place-items: center; border-radius: 14px; background: radial-gradient(70% 80% at 20% 15%, #fff, var(--t-soft) 55%, var(--t-mid)); box-shadow: 0 14px 24px -16px rgba(24, 60, 40, 0.5); }
.shp.wide { width: 176px; height: 99px; }
.shp.tall { width: 74px; height: 132px; }
.shp.square { width: 108px; height: 108px; }
.shp em { position: absolute; bottom: -22px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); }
.k4 { position: absolute; top: 6px; right: 6px; padding: 2px 6px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 800; }
/* Burned-in captions in Fizz's karaoke style: heavy caps, the spoken word lit up. */
.cap-strip { display: grid; place-items: center; padding: 16px 12px; border-radius: 16px; background: radial-gradient(80% 120% at 30% 0%, #34406a, #141a2c); }
.kara { margin: 0; text-align: center; font: 900 20px/1.25 var(--font); letter-spacing: 0.01em; text-transform: uppercase; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45); }
.kara span { display: inline-block; padding: 1px 6px; border-radius: 8px; animation: kara 6s infinite; }
.kara .hot { background: #ffb020; color: #1c2340; text-shadow: none; transform: rotate(-2deg) scale(1.06); }
.kara span:nth-child(2) { animation-delay: 1s; }
.kara span:nth-child(3) { animation-delay: 2s; }
.kara span:nth-child(4) { animation-delay: 3s; }
.kara span:nth-child(5) { animation-delay: 4s; }
.kara span:nth-child(6) { animation-delay: 5s; }
@keyframes kara {
  0%, 15% { background: #ffb020; color: #1c2340; text-shadow: none; transform: rotate(-2deg) scale(1.06); }
  17%, 100% { background: transparent; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45); transform: none; }
}

/* Make it look like you: the real compositor, driven by layout, frame, shape and backdrop chips. */
.looks { margin-top: 96px; display: grid; grid-template-columns: 0.9fr 1.1fr; grid-template-areas: "copy stage" "pick stage"; column-gap: 48px; row-gap: 22px; align-items: start; }
.looks-copy { grid-area: copy; display: flex; flex-direction: column; gap: 14px; align-self: end; }
.looks-stage { grid-area: stage; align-self: center; position: relative; transform: rotate(1.2deg); }
.looks-stage::before { content: ""; position: absolute; inset: -22px -18px -26px -26px; z-index: -1; border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%; background: var(--t-mid); opacity: 0.45; transform: rotate(-3deg); }
#looks-canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 24px; background: var(--bg-c); box-shadow: var(--lp-shadow); }
.looks-pick { grid-area: pick; display: flex; flex-direction: column; gap: 12px; }
.pick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pick-label { width: 100%; margin-bottom: -2px; font-size: 15.5px; color: var(--t-deep); }
.looks-pick .chip { height: 32px; padding: 0 12px; font-size: 12.5px; background: rgba(255, 255, 255, 0.75); transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1); }
.looks-pick .chip:hover { transform: translateY(-2px) rotate(-2deg); }
.looks-pick .chip.on { background: var(--ink); color: #fff; }
.looks-pick .shape { gap: 6px; padding-left: 8px; }
.looks-pick .shape canvas { width: 20px; height: 20px; }

/* Who it's for: four tilted stickers. */
.for { margin-top: 96px; text-align: center; }
.for .big-h2 { max-width: 820px; margin: 0 auto; }
.who-row { list-style: none; margin: 96px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* Each card's icon pops out over its top edge, like Fizzy on the founder note. */
.who-row li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 16px 22px; border-radius: 28px; box-shadow: 0 18px 30px -20px rgba(24, 60, 40, 0.5); transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
.who-ico { width: 112px; height: 112px; margin: -64px 0 4px; filter: drop-shadow(0 14px 14px rgba(24, 60, 40, 0.2)); transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
.who-row li:hover .who-ico { transform: translateY(-6px) rotate(-6deg); }
.who-row li:nth-child(odd) { transform: rotate(-2.5deg); }
.who-row li:nth-child(even) { transform: rotate(2deg) translateY(10px); }
.who-row li:hover { transform: rotate(0) scale(1.05); }
.who-row b { font-size: 21px; letter-spacing: -0.03em; color: var(--ink); }
.who-row li > span:last-child { font-size: 14.5px; font-weight: 600; }

/* Founder note: Fizzy perches on the card's top corner, half outside it. */
.strip.founder { position: relative; max-width: 860px; margin: 112px auto 0; overflow: visible; align-items: flex-start; padding: 28px 36px 28px 136px; border: 0; box-shadow: var(--lp-shadow); transform: rotate(-0.6deg); }
.strip.founder > .fizzy { position: absolute; left: -44px; top: -62px; transform: rotate(-10deg); }
.strip.founder .col { align-items: flex-start; gap: 10px; }

/* Final call to action: a fizzy blob, and confetti when you hover the button. */
.finale { position: relative; margin-top: 96px; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 56px 24px 64px; text-align: center; border-radius: 64px 48px 72px 40px; background: radial-gradient(80% 90% at 50% 0%, #fff, var(--t-soft) 45%, var(--t-mid)); box-shadow: var(--lp-shadow); overflow: hidden; }
.finale .bubbles i { --d: 7s; width: calc(var(--s) * 1.8); height: calc(var(--s) * 1.8); }
.finale > .fizzy { position: relative; animation: bob 4.5s ease-in-out infinite; }
.finale h2 { position: relative; font-size: 52px; font-weight: 790; letter-spacing: -0.05em; line-height: 1.02; max-width: 720px; }
.finale .lede { position: relative; color: var(--ink-2); }
.confetti-wrap { position: relative; margin-top: 8px; }
.confetti { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.confetti i { position: absolute; width: 9px; height: 14px; border-radius: 3px; opacity: 0; background: var(--c); }
.confetti-wrap:hover .confetti i, .confetti-wrap:focus-within .confetti i { animation: burst 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
@keyframes burst { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(0.4); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--rot)) scale(1); } }
.confetti i:nth-child(1) { --c: #ffd96b; --x: -140px; --y: -70px; --rot: 220deg; }
.confetti i:nth-child(2) { --c: #ffb39a; --x: -110px; --y: 40px; --rot: -180deg; }
.confetti i:nth-child(3) { --c: #9dbcff; --x: -60px; --y: -95px; --rot: 160deg; }
.confetti i:nth-child(4) { --c: #2f8f5e; --x: -20px; --y: 70px; --rot: 300deg; }
.confetti i:nth-child(5) { --c: #ffd96b; --x: 30px; --y: -100px; --rot: -240deg; }
.confetti i:nth-child(6) { --c: #ff8fa3; --x: 70px; --y: 60px; --rot: 200deg; }
.confetti i:nth-child(7) { --c: #9dbcff; --x: 120px; --y: -60px; --rot: -160deg; }
.confetti i:nth-child(8) { --c: #ffb39a; --x: 150px; --y: 30px; --rot: 260deg; }
.confetti i:nth-child(9) { --c: #97e0ad; --x: -160px; --y: -10px; --rot: -300deg; }
.confetti i:nth-child(10) { --c: #ff8fa3; --x: 170px; --y: -20px; --rot: 140deg; }

/* ---------- strip: Fizzy, a line of copy, a button (landing founder note, about beta) ---------- */
.strip { margin-top: 96px; display: flex; align-items: center; gap: 24px; padding: 26px 36px 26px 24px; }
.strip .col { flex: 1; gap: 6px; }
.strip h2 { font-size: 26px; font-weight: 760; letter-spacing: -0.04em; line-height: 1.1; }
.strip .cta { flex: none; }

/* ---------- about page ---------- */
.about-hero { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center; padding: 56px; }
.about-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.about-copy h1 { font-size: 64px; font-weight: 790; letter-spacing: -0.055em; line-height: 0.98; }
.about-copy p { font-size: 17.5px; line-height: 1.6; color: var(--ink-2); max-width: 620px; }
.signoff { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.signoff .hand { font-size: 25px; font-weight: 500; line-height: 1.2; color: var(--ink); }
.portrait { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: radial-gradient(70% 60% at 50% 40%, #fff, var(--t-soft) 62%, var(--t-mid)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 1px var(--line); }
.portrait .fizzy { animation: bob 5s ease-in-out infinite; }
.portrait .hand { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; font-size: 16.5px; }
.why { margin-top: 96px; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.why-card { display: flex; flex-direction: column; gap: 12px; padding: 28px; }
.why-card h3 { font-size: 22px; font-weight: 750; letter-spacing: -0.04em; }
.why-card p { color: var(--muted); line-height: 1.5; }

/* ---------- pricing page ---------- */
.p-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: 40px 0 8px; }
.p-hero h1 { font-size: 72px; font-weight: 790; letter-spacing: -0.055em; line-height: 0.98; }
.beta { display: flex; align-items: center; gap: 16px; padding: 14px 16px 14px 22px; margin: 28px auto 0; max-width: 860px; border-radius: 999px; }
.beta p { flex: 1; font-weight: 650; font-size: 15.5px; }
.beta p span { color: var(--muted); font-weight: 500; }
.p-hero .lede { max-width: 640px; }
.pill.soon { height: 20px; padding: 0 8px; gap: 5px; margin-left: 4px; font-size: 11px; vertical-align: 1px; box-shadow: 0 0 0 1px var(--line); }
.pill.soon .dot { width: 6px; height: 6px; box-shadow: 0 0 0 2px rgba(242, 179, 61, 0.22); }
.billing { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 34px 0 26px; }
.billing .seg { width: 260px; background: rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 1px var(--line); }
.billing .seg > * { padding: 9px 12px; font-size: 14px; }
.save { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: #e3f7c8; color: #2f6b12; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 26px 24px 24px; }
.plan h3 { font-size: 21px; font-weight: 740; letter-spacing: -0.035em; }
.plan .for { color: var(--muted); font-size: 14px; min-height: 40px; }
.plan .price { display: flex; align-items: baseline; gap: 6px; }
.plan .price .num { font-size: 56px; }
.plan .per { color: var(--muted); font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.plan .bill { font-size: 12.5px; color: var(--muted); min-height: 18px; margin-top: -10px; }
.plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.plan li { display: flex; gap: 9px; align-items: flex-start; line-height: 1.35; }
.plan li .ico { width: 16px; height: 16px; margin-top: 1px; color: var(--t-deep); stroke-width: 2.6; }
.plan li.head { font-weight: 700; }
.plan .btn { margin-top: auto; }
.plan.pop { background: rgba(255, 255, 255, 0.94); box-shadow: 0 0 0 2px var(--ink), var(--shadow); border-color: transparent; }
.plan .badge-top { position: absolute; top: -14px; left: 24px; }
.plan.pop .peek { position: absolute; top: -58px; right: 4px; }
.plan.pop .peek-note { position: absolute; top: -40px; right: 86px; transform: rotate(-7deg); font-size: 14px; white-space: nowrap; }
.plan.soon .price .num { color: rgba(17, 21, 19, 0.55); }
.plan.current { box-shadow: 0 0 0 3px var(--t-deep), var(--shadow); }
.plan.current h3::after { content: attr(data-badge); margin-left: 10px; padding: 3px 9px; border-radius: 999px; background: var(--t-deep); color: var(--t-on); font-size: 12px; font-weight: 700; letter-spacing: 0; vertical-align: 3px; }
.plans-wrap { padding-top: 54px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.compare { margin-top: 96px; }
.compare .card { padding: 8px 8px 4px; }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; }
.swipe { display: none; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 680px; }
.tbl th, .tbl td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--line); }
.tbl tr:last-child td, .tbl tr:last-child th { border-bottom: 0; }
.tbl thead th { font-size: 15px; font-weight: 720; letter-spacing: -0.02em; vertical-align: bottom; }
.tbl thead th .tiny { display: block; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-top: 2px; }
.tbl th[scope="row"] { text-align: left; font-weight: 500; color: var(--ink-2); }
.tbl .grp th { text-align: left; padding-top: 22px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tbl td .ico { color: var(--t-deep); stroke-width: 2.6; }
.tbl .no { color: rgba(17, 21, 19, 0.25); }
.tbl .hl { background: rgba(17, 21, 19, 0.035); }
.tbl .soonc { color: var(--muted); }
.tbl .soonc .ico { color: var(--muted); }
.tbl .grp .pill { height: 22px; padding: 0 9px; margin-left: 6px; font-size: 11px; letter-spacing: 0; text-transform: none; vertical-align: middle; }

.faq { margin-top: 96px; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px; align-items: start; }
.faq-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq details { padding: 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; font-size: 17px; font-weight: 680; letter-spacing: -0.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { transform: rotate(90deg); transition: transform 0.2s; color: var(--muted); }
.faq details[open] summary .ico { transform: rotate(-90deg); }
.faq details .ans { padding: 0 22px 20px; color: var(--ink-2); display: flex; flex-direction: column; gap: 10px; max-width: 680px; }
.faq details .ans p { line-height: 1.55; }
.faq code { font: 600 13px ui-monospace, "SF Mono", Menlo, monospace; background: rgba(17, 21, 19, 0.06); padding: 1px 6px; border-radius: 6px; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .plans { grid-template-columns: repeat(2, 1fr); row-gap: 56px; }
  .hero h1 { font-size: 64px; }
  .steps { gap: 22px; }
  .feat { gap: 36px; }
  .about-hero { padding: 44px; gap: 32px; }
  .about-copy h1 { font-size: 56px; }
}
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding: 28px 8px 8px; }
  .hero-stage { min-height: 440px; }
  .steps { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; gap: 36px; }
  .s2 { margin-top: 0; }
  .who-row { grid-template-columns: repeat(2, 1fr); row-gap: 84px; }
  .feat { grid-template-columns: 1fr; gap: 28px; }
  .feat.flip .feat-copy { order: 0; }
  .looks { grid-template-columns: 1fr; grid-template-areas: "copy" "stage" "pick"; row-gap: 28px; }
  .looks-stage { transform: rotate(0.6deg); margin: 0 6px; }
  .looks { overflow-x: clip; }
  .strip { flex-wrap: wrap; }
  .about-hero { grid-template-columns: 1fr; }
  .portrait { aspect-ratio: auto; padding: 24px 0 64px; }
  .why-grid { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; gap: 20px; }
  .faq-side { position: static; }
}
@media (max-width: 860px) {
  .site-nav { padding: 14px 18px; gap: 8px; }
  .site-nav .links { display: flex; }
  .site-nav .links a { padding: 7px 11px; font-size: 13px; }
  .site-nav .btn { height: 36px; padding: 0 14px; font-size: 13px; }
  .mk { padding: 4px 16px 0; }
  .site-foot { width: calc(100% - 36px); padding: 22px 0 32px; margin-top: 56px; }
}
@media (max-width: 640px) {
  .hero { padding: 16px 4px 4px; }
  .hero h1 { font-size: 48px; }
  .hero .lede { font-size: 17px; }
  .p-hero h1, .about-copy h1 { font-size: 44px; }
  .lede { font-size: 17px; }
  .hero-stage { min-height: 360px; }
  .hero .cta { align-self: stretch; flex-direction: column; }
  .hero-stage > .fizzy img { width: 210px; height: 210px; }
  .blob { width: 290px; height: 280px; }
  .sticker { font-size: 12.5px; padding: 8px 11px; }
  .s-copied { top: 30px; }
  .s-watched { top: 92px; right: 0; }
  .s-um { bottom: 70px; left: 0; }
  .s-book { bottom: 30px; right: 10px; }
  .sticker .ico3d { width: 34px; height: 34px; }
  .s-react { width: 54px; height: 54px; left: 32%; top: 0; }
  .s-react .ico3d { width: 44px; height: 44px; }
  .scribble.arrow, .scribble.stars, .hero-stage .note { display: none; }
  .stack { margin-top: 56px; font-size: 22px; }
  .feat { margin-top: 72px; }
  .feat-ico { width: 64px; height: 64px; }
  .feat-demo { min-height: 0; padding: 16px; }
  .shapes { gap: 12px; }
  .shp.wide { width: 128px; height: 72px; }
  .shp.tall { width: 54px; height: 96px; }
  .shp.square { width: 78px; height: 78px; }
  .shp .fizzy img { width: 40px; height: 40px; }
  .kara { font-size: 15px; }
  .scenes button { padding: 6px 9px; font-size: 11.5px; }
  .looks { margin-top: 72px; }
  .strip.founder { margin-top: 96px; padding: 64px 20px 22px; }
  .strip.founder > .fizzy { left: -10px; top: -46px; }
  .strip.founder > .fizzy img { width: 100px; height: 100px; }
  .big-h2, .finale h2 { font-size: 38px; }
  .story, .for { margin-top: 72px; }
  .steps { margin-top: 36px; }
  .who-row { gap: 14px; row-gap: 76px; margin-top: 84px; }
  .who-row li { padding: 0 10px 16px; }
  .who-ico { width: 88px; height: 88px; margin-top: -50px; }
  .who-row b { font-size: 18px; }
  .who-row li > span:last-child { font-size: 13px; }
  .finale { margin-top: 72px; padding: 40px 18px 48px; border-radius: 40px 32px 48px 28px; }
  .strip { margin-top: 72px; padding: 22px 20px; gap: 14px; flex-direction: column; align-items: flex-start; }
  .strip > .fizzy img { width: 72px; height: 72px; }
  .strip h2 { font-size: 22px; }
  .strip .cta { align-self: stretch; }
  .strip .cta .btn { flex: 1; }
  .portrait .fizzy img { width: 180px; height: 180px; }
  .about-hero { padding: 28px 22px; }
  .about-copy p { font-size: 16.5px; }
  .why { margin-top: 72px; }
  .why-card { padding: 22px; }
  .plans { grid-template-columns: 1fr; }
  .beta { border-radius: 22px; flex-direction: column; align-items: flex-start; padding: 18px 20px; }
  .compare, .faq { margin-top: 72px; }
  .swipe { display: block; }
  .tbl { min-width: 600px; font-size: 13px; }
  .tbl th, .tbl td { padding: 12px 10px; }
  .tbl th[scope="row"], .tbl thead th:first-child { position: sticky; left: 0; z-index: 1; width: 150px; min-width: 150px; background: #f9fcf8; box-shadow: 1px 0 0 var(--line); }
}
/* The narrowest phones keep just "Sign in" (or "Back to Fizz" when signed in); "Request an invite" waits in the page. */
@media (max-width: 520px) {
  .site-nav .btn[data-start] { display: none; }
}
@media (max-width: 420px) {
  .site-nav .logo { font-size: 19px; gap: 6px; }
  .site-nav .logo svg { width: 30px; height: 30px; }
  .site-nav .links a { padding: 7px 9px; }
  .site-nav .btn { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp *, .lp *::before, .lp *::after, .portrait .fizzy { animation: none !important; transition: none !important; }
  .bubbles, .cursor { display: none; }
}