/* My Elf Moved - "Christmas Eve, 2:14 am": midnight navy, candle gold, festive red, falling snow.
   Fonts are self-hosted (Fraunces for display, Atkinson Hyperlegible for reading). No external requests. */

@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-latin-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --night-0: #05081a;
  --night-1: #0b1230;
  --night-2: #121b42;
  --night-3: #1a2556;
  --snow: #f7f1e6;
  --snow-2: #d9d3c6;
  --mist: #aab2cf;
  --gold: #f2c46d;
  --gold-2: #e6a840;
  --ember: #ffe7a8;
  --red: #d8323f;
  --red-2: #b0202d;
  --pine: #5fd48a;
  /* the pop palette (Peter 20 Oct 2026: "make it POP"): candy cane, holly, northern lights */
  --candy: #ff2e4d;
  --candy-2: #d41437;
  --candy-3: #7d0a22;
  --holly: #19c37d;
  --holly-2: #0b7f4c;
  --mint: #4ef2cc;
  --berry: #ff63b1;
  --violet: #8a6bff;
  --sky: #63c8ff;
  --cream: #fff8ec;
  --cream-2: #ffefd6;
  --ink: #1f1336;
  --ink-2: #514468;
  --line: rgba(242, 196, 109, .28);
  --line-soft: rgba(247, 241, 230, .1);
  --panel: rgba(18, 27, 66, .6);
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --radius: 22px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--night-1); color: var(--snow); font: 400 1.0625rem/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, svg { max-width: 100%; }
a { color: var(--gold); text-underline-offset: .18em; }
a:hover { color: var(--ember); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }
.wrap { width: min(100% - 32px, 1160px); margin-inline: auto; }
.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; }

h1, h2, h3 { font-family: var(--display); font-weight: 620; line-height: 1.1; letter-spacing: -.012em; margin: 0 0 .5em; font-optical-sizing: auto; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 8.4vw + .4rem, 5rem); line-height: 1.08; font-weight: 720; letter-spacing: -.022em; }
h2 { font-size: clamp(2rem, 4.6vw + .6rem, 3.4rem); max-width: 22ch; font-weight: 700; letter-spacing: -.018em; }
.hl { color: var(--gold); }
h3 { font-size: 1.3rem; line-height: 1.2; }
p { margin: 0 0 1em; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--gold); color: #1b1406; padding: .7rem 1rem; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { left: 8px; }
.bar { background: var(--red-2); color: #fff; text-align: center; font-weight: 700; font-size: .92rem; line-height: 1.35; padding: .55rem 16px; }
.bar-test { background: #5c4200; }

.eyebrow { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .9rem; font: 700 .8rem/1.3 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.spark { width: 14px; height: 14px; flex: none; background: var(--gold); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.lede { font-size: 1.15rem; line-height: 1.55; color: var(--snow-2); max-width: 34rem; }
.section-lede { font-size: 1.1rem; color: var(--snow-2); max-width: 40rem; }
.meta { font-size: .9rem; color: var(--mist); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px; padding: .75rem 1.35rem; border-radius: 999px; border: 1.5px solid transparent;
  font: 700 1rem/1.15 var(--body); text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .6; cursor: progress; transform: none; }
.btn-gold { color: #1b1406; background: linear-gradient(180deg, #ffdc92, var(--gold) 48%, var(--gold-2)); box-shadow: 0 12px 28px -12px rgba(242, 196, 109, .75), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn-gold:hover { color: #1b1406; box-shadow: 0 16px 34px -12px rgba(242, 196, 109, .9), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn-ghost { color: var(--snow); border-color: rgba(247, 241, 230, .3); background: transparent; }
.btn-ghost:hover { color: var(--snow); border-color: var(--gold); }
.btn-small { min-height: 44px; padding: .55rem 1.05rem; font-size: .92rem; }
.badge { display: inline-block; font: 700 .68rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: #1b1406; background: var(--gold); padding: .32rem .55rem; border-radius: 999px; vertical-align: .2em; margin-left: .35rem; white-space: nowrap; }
.ico { width: 20px; height: 20px; flex: none; }

/* ---------- header + footer ---------- */
.site-head { position: relative; z-index: 20; background: rgba(6, 10, 29, .92); border-bottom: 4px solid transparent; border-image: repeating-linear-gradient(-45deg, #fff 0 8px, var(--candy) 8px 16px) 4; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .site-head { background: rgba(6, 10, 29, .78); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); } }
@media (min-width: 860px) { .site-head { position: sticky; top: 0; } }
/* anchor jumps land below the sticky header */
section[id], [id="talking"], [id="waitlist"], [id="get"] { scroll-margin-top: 84px; }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 66px; }
.brand { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; color: var(--snow); text-decoration: none; }
.brand:hover { color: var(--snow); }
.brand-name { font: 640 1.22rem/1 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.mark { flex: none; }
.head-nav { display: flex; align-items: center; gap: .15rem; }
.nav-link { display: none; align-items: center; min-height: 44px; padding: .5rem .8rem; color: var(--snow-2); text-decoration: none; font-weight: 700; font-size: .95rem; }
.nav-link { position: relative; }
.nav-link::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 6px; height: 3px; border-radius: 3px; background: var(--candy); transform: scaleX(0); transition: transform .2s ease; }
.nav-link:hover { color: #fff; }
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }
.head-nav .btn { margin-left: .4rem; }
.lbl-short { display: inline; } .lbl-long { display: none; }
@media (min-width: 480px) { .lbl-short { display: none; } .lbl-long { display: inline; } }
@media (min-width: 860px) { .nav-link { display: inline-flex; } }

.site-foot { background: var(--night-0); border-top: 1px solid var(--line-soft); padding: 46px 0 30px; color: var(--snow-2); font-size: .95rem; }
.foot-grid { display: grid; gap: 22px; }
.foot-brand p { margin: .7rem 0 0; max-width: 30rem; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 1.3rem; align-content: start; }
.foot-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--snow); text-decoration: none; }
.foot-nav a:hover { color: var(--gold); text-decoration: underline; }
.foot-small { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); font-size: .84rem; color: var(--mist); }
.foot-small p { margin: .35rem 0; }
.tm-line { color: var(--snow-2); }
@media (min-width: 780px) { .foot-grid { grid-template-columns: 1.1fr 1fr; align-items: start; } .foot-nav { justify-content: flex-end; } }

/* ---------- hero: midnight sky, fairy lights, falling snow ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: 88px 0 0;
  background:
    radial-gradient(90% 55% at 78% 8%, rgba(53, 74, 160, .55) 0%, rgba(53, 74, 160, 0) 70%),
    radial-gradient(70% 40% at 10% 100%, rgba(216, 50, 63, .14) 0%, rgba(216, 50, 63, 0) 70%),
    linear-gradient(180deg, #060a1d 0%, #0a1130 48%, #0d1536 100%); }
.snowfall { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  /* softer snow behind the words, full snow around the phone (no flake ever sits on a letter at full strength) */
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.28) 0, rgba(0,0,0,.28) 38%, #000 44%, #000 63%, rgba(0,0,0,.28) 68%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.28) 0, rgba(0,0,0,.28) 38%, #000 44%, #000 63%, rgba(0,0,0,.28) 68%); }
@media (min-width: 960px) { .snowfall { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25) 0, rgba(0,0,0,.25) 48%, #000 60%); mask-image: linear-gradient(90deg, rgba(0,0,0,.25) 0, rgba(0,0,0,.25) 48%, #000 60%); } }
.sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sky .glow { position: absolute; left: 50%; top: 38%; width: 720px; height: 720px; transform: translate(-50%, -20%); border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 196, 109, .2), rgba(242, 196, 109, 0) 62%); }
/* northern lights: two soft ribbons drifting high in the sky, kept away from the words by their own fade */
.aurora { position: absolute; left: -25%; width: 150%; height: 34%; border-radius: 50%; filter: blur(34px); opacity: .72; mix-blend-mode: screen; }
.aurora.a1 { top: -6%; background: linear-gradient(95deg, rgba(78, 242, 204, 0) 8%, rgba(78, 242, 204, .55) 30%, rgba(138, 107, 255, .5) 52%, rgba(255, 99, 177, .42) 72%, rgba(255, 99, 177, 0) 92%); transform: rotate(-7deg); }
.aurora.a2 { top: 14%; height: 34%; opacity: .38; background: linear-gradient(80deg, rgba(99, 200, 255, 0) 12%, rgba(99, 200, 255, .5) 40%, rgba(78, 242, 204, .45) 62%, rgba(78, 242, 204, 0) 88%); transform: rotate(5deg); }
@media (prefers-reduced-motion: no-preference) {
  .aurora.a1 { animation: aurora1 16s ease-in-out infinite alternate; }
  .aurora.a2 { animation: aurora2 21s ease-in-out infinite alternate; }
}
@keyframes aurora1 { from { transform: rotate(-7deg) translateX(-4%) scaleY(.9); } to { transform: rotate(-3deg) translateX(5%) scaleY(1.15); } }
@keyframes aurora2 { from { transform: rotate(5deg) translateX(6%); } to { transform: rotate(1deg) translateX(-6%) scaleY(1.2); } }

.lights { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 86px; pointer-events: none; overflow: visible; }
.lights .wire { fill: none; stroke: #2c355f; stroke-width: 2.2; }
.bulb .cap { fill: #4a5380; }
.bulb .glass { fill: currentColor; }
.bulb .shine { fill: #fff; opacity: .75; }
.b-gold { color: #ffd27a; } .b-red { color: #ff5c63; } .b-green { color: #63de93; } .b-blue { color: #9ccdff; }
@media (prefers-reduced-motion: no-preference) {
  .bulb { animation: twinkle 3.4s ease-in-out infinite; }
  .tw1 { animation-delay: -.4s; animation-duration: 2.7s; } .tw2 { animation-delay: -1.1s; } .tw3 { animation-delay: -1.9s; animation-duration: 4.1s; }
  .tw4 { animation-delay: -2.6s; animation-duration: 2.9s; } .tw5 { animation-delay: -.8s; animation-duration: 3.8s; } .tw6 { animation-delay: -3.1s; }
  .tw7 { animation-delay: -1.5s; animation-duration: 2.5s; }
}
@keyframes twinkle { 0%, 100% { opacity: 1; } 45% { opacity: .55; } 55% { opacity: .62; } }

.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "stage" "join"; gap: 30px; }
.hero-copy { grid-area: copy; }
.hero-copy h1 { margin-bottom: .45em; }
@media (min-width: 960px) { .hero-copy h1 { font-size: clamp(3.4rem, 3.4vw + 1.2rem, 4.9rem); } }
.h1-line { display: block; margin-top: .1em; color: var(--gold); font-weight: 600; padding-bottom: .06em;
  background: linear-gradient(100deg, #ff9ccc 0%, #ffd27a 38%, #ffe9b0 55%, #ffd27a 72%, #ff9ccc 100%); background-size: 220% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (prefers-reduced-motion: no-preference) { .h1-line { animation: shimmer 9s ease-in-out infinite alternate; } }
@keyframes shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.hero-join { grid-area: join; max-width: 36rem; }
@media (min-width: 960px) {
  .hero { padding: 100px 0 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "copy stage" "join stage"; column-gap: 72px; row-gap: 26px; align-items: start; }
  .hero-copy { align-self: end; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .hero-copy > *, .js .scanner, .js .hero-join { animation: rise .8s cubic-bezier(.2, .8, .2, 1) both; }
  .js .hero-copy > :nth-child(2) { animation-delay: .08s; } .js .hero-copy > :nth-child(3) { animation-delay: .16s; } .js .hero-copy > :nth-child(4) { animation-delay: .24s; }
  .js .scanner { animation-delay: .2s; } .js .hero-join { animation-delay: .32s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* store buttons: real links when live; dashed "Coming soon" labels (not links) until then */
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5rem; }
.store-btn { display: inline-flex; align-items: center; gap: .7rem; min-height: 58px; min-width: 176px; padding: .55rem 1.15rem .55rem .9rem; border-radius: 15px;
  background: #04071a; border: 1.5px solid rgba(247, 241, 230, .32); color: var(--snow); text-decoration: none; }
a.store-btn:hover { border-color: var(--gold); color: var(--snow); transform: translateY(-1px); }
.store-btn .ico { width: 26px; height: 26px; color: var(--gold); }
.store-btn small { display: block; font-size: .74rem; line-height: 1.2; color: var(--snow-2); }
.store-btn b { display: block; font: 620 1.2rem/1.15 var(--display); white-space: nowrap; }
.store-btn.is-soon { border-style: dashed; border-color: rgba(242, 196, 109, .45); background: rgba(4, 7, 26, .55); cursor: default; }
.store-btn.is-soon small { color: var(--gold); font-weight: 700; letter-spacing: .02em; }
@media (max-width: 420px) { .store-btn { min-width: 0; flex: 1 1 140px; gap: .5rem; padding: .5rem .7rem; } .store-btn .ico { width: 22px; height: 22px; } .store-btn b { font-size: 1.04rem; } .store-btn small { font-size: .7rem; } }

/* hero chips: the three new things, each a jump link */
.hero-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 1.3rem 0 0; }
.hchip { --c: var(--mint); display: inline-flex; align-items: center; gap: .55rem; min-height: 46px; padding: .35rem 1rem .35rem .4rem; border-radius: 999px; text-decoration: none;
  color: var(--snow); font-weight: 700; font-size: 1rem; background: rgba(6, 10, 32, .55); border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 40%, transparent); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s ease, background .2s ease; }
.hchip:hover { color: #fff; transform: translateY(-2px) rotate(-1.5deg); background: color-mix(in srgb, var(--c) 18%, rgba(6, 10, 32, .7)); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--c) 80%, transparent); }
.hchip b { color: var(--c); font-weight: 700; }
.hc-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c); color: #120a24; }
.hc-ico .ico { width: 19px; height: 19px; }
.hc-mint { --c: var(--mint); } .hc-berry { --c: var(--berry); } .hc-candy { --c: #ff6b80; }
.hchip b, .mt-count, .pricing .per, .p-alt { font-family: var(--display); }
@media (max-width: 559px) {
  .hero-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hero-chips li { display: flex; }
  .hero-chips .hchip { width: 100%; }
  .hchip { flex-direction: column; justify-content: center; gap: .3rem; min-height: 84px; padding: .55rem .35rem; border-radius: 18px; text-align: center; font-size: .9rem; line-height: 1.15; }
}
/* before launch: the store badges sit under the form as one quiet coming-soon row */
.stores-soon { margin-top: 14px; gap: 8px; }
.stores-soon .store-btn { min-height: 48px; min-width: 0; padding: .4rem .8rem .4rem .6rem; border-color: rgba(242, 196, 109, .3); background: transparent; }
.stores-soon .store-btn b { font-size: 1rem; }
.stores-soon .store-btn .ico { width: 20px; height: 20px; }
@media (max-width: 959px) { .phone { width: min(64vw, 262px); } }
.hc-candy .hc-ico { background: var(--candy); color: #fff; }

/* the sticker on the phone: a candy speech bubble that points at the talking elf section */
.sticker { position: absolute; z-index: 8; left: -8px; top: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  width: 118px; height: 118px; padding: 10px; border-radius: 50%; text-decoration: none; color: #fff; background: radial-gradient(circle at 50% 30%, #dc1a3e, #c4122f 70%);
  box-shadow: 0 0 0 4px #fff, 0 14px 30px -10px rgba(212, 20, 55, .85); transform: rotate(-12deg); font-family: var(--display); line-height: 1.02; }
.sticker::after { content: ""; position: absolute; right: 6px; bottom: 4px; width: 26px; height: 26px; background: var(--candy-2); clip-path: polygon(0 0, 100% 100%, 30% 70%); transform: rotate(10deg); }
.sticker .st-top { font: 700 .74rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.sticker .st-main { margin-top: .25rem; font-size: 1.22rem; font-weight: 700; }
.sticker:hover, .sticker:focus-visible { color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .sticker { animation: sticker-in .9s cubic-bezier(.3, 1.6, .5, 1) .9s both, wobble 4.5s ease-in-out 2s infinite; }
  .sticker:hover { animation-play-state: paused; transform: rotate(-4deg) scale(1.06); }
}
@keyframes sticker-in { from { opacity: 0; transform: rotate(-40deg) scale(.3); } to { opacity: 1; transform: rotate(-12deg) scale(1); } }
@keyframes wobble { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(-6deg) scale(1.04); } }
@media (max-width: 959px) { .sticker { left: 4px; top: -16px; width: 100px; height: 100px; } .sticker .st-main { font-size: 1.04rem; } .sticker .st-top { font-size: .66rem; } }
@media (min-width: 960px) { .sticker { left: -58px; top: 90px; width: 128px; height: 128px; } }

/* the move ticker along the bottom of the hero, on a candy cane stripe */
.ticker { position: relative; z-index: 2; margin-top: 54px; overflow: hidden; background: var(--candy-2); color: #fff;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  border-image: repeating-linear-gradient(-45deg, #fff 0 12px, var(--candy) 12px 24px) 8; }
.ticker-track { display: flex; align-items: center; width: max-content; padding: 13px 0; white-space: nowrap; }
.tk { font: 700 1.12rem/1 var(--display); letter-spacing: .01em; padding: 0 18px; }
.tk-star { flex: none; width: 15px; height: 15px; background: #ffe7a8; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
@media (prefers-reduced-motion: no-preference) { .ticker-track { animation: ticker 80s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (min-width: 960px) { .ticker { margin-top: 80px; } }

/* ---------- the scanner: phone over the photo, brackets lock on, beam sweeps, then the story plays ---------- */
.scanner { grid-area: stage; position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; justify-self: center; width: min(100%, 380px); }
.scene { position: absolute; z-index: -1; left: -22%; right: -22%; top: 4%; height: 70%; border-radius: 50%; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); }
.scene-img { width: 100%; height: 100%; object-fit: cover; filter: blur(28px) saturate(1.35); opacity: .5; transform: scale(1.2); transition: opacity .6s ease; }
.phone { position: relative; width: min(72vw, 296px); padding: 10px; border-radius: 46px;
  background: linear-gradient(150deg, #313a66 0%, #11163a 38%, #0b0f2c 62%, #262e58 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 44px 80px -34px rgba(0, 0, 0, .95), 0 0 70px -14px rgba(242, 196, 109, .45); }
@media (min-width: 960px) { .phone { width: 300px; } }
.cam { position: absolute; top: 25px; left: 50%; width: 11px; height: 11px; transform: translateX(-50%); border-radius: 50%; background: #02040e; box-shadow: 0 0 0 2px rgba(255, 255, 255, .06); z-index: 7; }
.moon { position: absolute; z-index: -1; top: -10px; right: -2px; width: 62px; height: 62px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 36% 36%, #fff8e4, #f5dea6 58%, #e3b867); box-shadow: 0 0 40px 12px rgba(245, 222, 166, .22), 0 0 110px 36px rgba(245, 222, 166, .08); }
@media (min-width: 960px) { .moon { top: -48px; right: -72px; width: 78px; height: 78px; } }
@media (max-width: 767px) { .moon { display: none; } }
.screen { position: relative; aspect-ratio: 9 / 16; border-radius: 36px; overflow: hidden; background: #070a1c; }
.screen::after { content: ""; position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: 58px; pointer-events: none; background: linear-gradient(180deg, rgba(4, 7, 26, .55), rgba(4, 7, 26, 0)); }
.scr-photo, .scr-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.scr-video { opacity: 0; transition: opacity .35s ease; }
.scanner[data-phase="play"] .scr-video, .scanner[data-phase="land"] .scr-video { opacity: 1; }
.scr-photo { transition: filter .6s ease; }
.scanner[data-phase="scan"] .scr-photo, .scanner[data-phase="lock"] .scr-photo { filter: saturate(.8) brightness(.9); }
.scr-grain { position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity .5s ease; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 236, 190, .06) 0 1px, transparent 1px 4px), linear-gradient(180deg, rgba(10, 17, 48, .25), rgba(10, 17, 48, .05) 40%, rgba(10, 17, 48, .35)); }
.scanner[data-phase="scan"] .scr-grain, .scanner[data-phase="lock"] .scr-grain, .scanner[data-phase="found"] .scr-grain { opacity: .5; }

.brackets { position: absolute; z-index: 3; left: var(--bx, 9%); top: var(--by, 15%); width: var(--bw, 82%); height: var(--bh, 74%); opacity: 0; pointer-events: none;
  transition: opacity .35s ease, left .95s cubic-bezier(.25, .9, .3, 1.12), top .95s cubic-bezier(.25, .9, .3, 1.12), width .95s cubic-bezier(.25, .9, .3, 1.12), height .95s cubic-bezier(.25, .9, .3, 1.12); }
.scanner[data-phase="scan"] .brackets, .scanner[data-phase="lock"] .brackets, .scanner[data-phase="found"] .brackets, .scanner[data-phase="wait"] .brackets,
.scanner[data-phase="land"] .brackets, .scanner[data-phase="still"] .brackets { opacity: 1; }
.brackets .c { position: absolute; width: 24px; height: 24px; border: 3px solid var(--gold); filter: drop-shadow(0 0 5px rgba(242, 196, 109, .95)); transition: border-color .3s ease, transform .3s ease, opacity .3s ease; }
.brackets .tl { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 9px; }
.brackets .tr { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 9px; }
.brackets .bl { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 9px; }
.brackets .br { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 9px; }
.scanner[data-phase="found"] .brackets .c, .scanner[data-phase="still"] .brackets .c { border-color: #fff; }
.scanner[data-phase="found"] .brackets .tl { transform: translate(-3px, -3px); } .scanner[data-phase="found"] .brackets .tr { transform: translate(3px, -3px); }
.scanner[data-phase="found"] .brackets .bl { transform: translate(-3px, 3px); } .scanner[data-phase="found"] .brackets .br { transform: translate(3px, 3px); }
.scanner[data-phase="land"] .brackets .c { opacity: 0; }
.beam { position: absolute; left: -7%; right: -7%; top: 0; height: 3px; border-radius: 3px; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 231, 168, 0), #ffe7a8 18%, #fff 50%, #ffe7a8 82%, rgba(255, 231, 168, 0));
  box-shadow: 0 0 14px 3px rgba(242, 196, 109, .8), 0 0 34px 10px rgba(242, 196, 109, .3); }
.beam::before { content: ""; position: absolute; left: 7%; right: 7%; bottom: 3px; height: 54px; background: linear-gradient(to top, rgba(242, 196, 109, .3), rgba(242, 196, 109, 0)); }
.scanner[data-phase="scan"] .beam, .scanner[data-phase="lock"] .beam { opacity: 1; top: 50%; }
@media (prefers-reduced-motion: no-preference) { .scanner[data-phase="scan"] .beam, .scanner[data-phase="lock"] .beam { animation: sweep 1.45s cubic-bezier(.45, .05, .55, .95) infinite; } }
@keyframes sweep { from { top: 0%; } to { top: 100%; } }
.sparkles i { position: absolute; width: 18px; height: 18px; opacity: 0; background: var(--ember); transform: scale(0);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); filter: drop-shadow(0 0 6px rgba(255, 231, 168, .95)); }
.sparkles i:nth-child(1) { left: -10%; top: 6%; } .sparkles i:nth-child(2) { right: -12%; top: 20%; width: 13px; height: 13px; }
.sparkles i:nth-child(3) { left: -6%; bottom: 18%; width: 12px; height: 12px; } .sparkles i:nth-child(4) { right: -8%; bottom: 6%; }
.sparkles i:nth-child(5) { left: 44%; top: -9%; width: 14px; height: 14px; }
.scanner[data-phase="land"] .sparkles i { animation: pop 1.6s ease-out both; }
.scanner[data-phase="land"] .sparkles i:nth-child(2) { animation-delay: .15s; } .scanner[data-phase="land"] .sparkles i:nth-child(3) { animation-delay: .3s; }
.scanner[data-phase="land"] .sparkles i:nth-child(4) { animation-delay: .1s; } .scanner[data-phase="land"] .sparkles i:nth-child(5) { animation-delay: .4s; }
@keyframes pop { 0% { opacity: 0; transform: scale(0) rotate(0); } 30% { opacity: 1; transform: scale(1.15) rotate(25deg); } 100% { opacity: 0; transform: scale(.6) rotate(70deg); } }
.scr-flash { position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none; background: radial-gradient(circle at 50% 55%, rgba(255, 240, 205, .85), rgba(255, 240, 205, 0) 68%); }
.scanner[data-phase="found"] .scr-flash { animation: flash 1s ease-out both; }
.scanner[data-phase="land"] .scr-flash { animation: flash 1.4s ease-out both; }
@keyframes flash { 0% { opacity: 0; } 18% { opacity: .9; } 100% { opacity: 0; } }

.scr-bar { position: absolute; z-index: 6; top: 0; left: 0; right: 0; height: 36px; display: flex; justify-content: space-between; align-items: center; padding: 0 12px 0 24px;
  font: 700 .74rem/1 var(--body); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); pointer-events: none; }
.scr-tag { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .55rem; border-radius: 999px; background: rgba(4, 7, 26, .7);
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; text-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* under the status bar, top right (where the app puts its own "AI" mark), so it never runs into the camera dot */
.scr-tag { position: absolute; top: 40px; right: 12px; transition: opacity .3s ease; }
/* the tag always says what this is (an AI example, the AI video, or the real photo), like the "AI" mark in the app's
   videos; a gold sparkle, never a red recording dot */
.glint { width: 9px; height: 9px; flex: none; background: var(--gold); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
@media (prefers-reduced-motion: no-preference) {
  .scanner[data-phase="scan"] .glint, .scanner[data-phase="lock"] .glint, .scanner[data-phase="play"] .glint { animation: glint 1.6s ease-in-out infinite; }
}
@keyframes glint { 50% { opacity: .35; transform: scale(.7) rotate(45deg); } }

.console { width: 100%; max-width: 330px; margin-top: 18px; padding: 12px 14px 13px; border-radius: 16px; background: rgba(8, 13, 38, .78); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .9); }
.c-line { display: flex; align-items: flex-start; gap: .6rem; margin: 0 0 .55rem; min-height: 2.6em; font: 700 .95rem/1.3 var(--body); color: var(--snow); }
.c-ico { position: relative; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 2.5px solid var(--gold); border-right-color: transparent; }
@media (prefers-reduced-motion: no-preference) { .scanner[data-phase="scan"] .c-ico, .scanner[data-phase="lock"] .c-ico, .scanner[data-phase="reset"] .c-ico, .scanner[data-phase="wait"] .c-ico { animation: spin .85s linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }
.scanner[data-phase="found"] .c-ico, .scanner[data-phase="land"] .c-ico, .scanner[data-phase="still"] .c-ico { border-color: var(--gold); background: var(--gold); }
.scanner[data-phase="found"] .c-ico::after, .scanner[data-phase="land"] .c-ico::after, .scanner[data-phase="still"] .c-ico::after {
  content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #1b1406; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.scanner[data-phase="play"] .c-ico { border: 0; border-radius: 0; background: var(--gold); filter: drop-shadow(0 0 6px rgba(242, 196, 109, .9));
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.c-bar { display: block; height: 6px; border-radius: 6px; background: rgba(247, 241, 230, .12); overflow: hidden; }
.c-bar i { display: block; height: 100%; width: var(--p, 0%); border-radius: 6px; background: linear-gradient(90deg, var(--gold-2), var(--ember)); box-shadow: 0 0 10px rgba(242, 196, 109, .7); transition: width var(--pt, .6s) linear; }
html:not(.js) .console, html:not(.js) .scan-controls { display: none; }

.scan-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.chips { display: flex; gap: 8px; }
.chip { min-height: 44px; padding: .5rem 1.05rem; border-radius: 999px; border: 1.5px solid rgba(247, 241, 230, .26); background: rgba(4, 7, 26, .4); color: var(--snow-2); font: 700 .92rem/1 var(--body); cursor: pointer; }
.chip:hover { border-color: var(--gold); color: var(--snow); }
.chip[aria-pressed="true"] { background: rgba(242, 196, 109, .16); border-color: var(--gold); color: var(--gold); }
.pp { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(247, 241, 230, .26); background: rgba(4, 7, 26, .4); color: var(--snow); cursor: pointer; }
.pp:hover { border-color: var(--gold); }
.pp .ico-play { display: none; }
.pp[data-paused] .ico-pause { display: none; } .pp[data-paused] .ico-play { display: block; }
.scanner figcaption { margin-top: 12px; max-width: 330px; font-size: .86rem; line-height: 1.45; color: var(--mist); text-align: center; }
.scanner[data-paused] .beam, .scanner[data-paused] .c-ico, .scanner[data-paused] .glint { animation-play-state: paused; }

/* ---------- waitlist ---------- */
.waitlist { padding: 18px; border-radius: 20px; background: rgba(12, 18, 48, .72); border: 1px solid var(--line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wl-label { display: block; margin-bottom: .75rem; font: 620 1.2rem/1.2 var(--display); }
.wl-row { display: flex; flex-wrap: wrap; gap: 10px; }
.wl-row input { flex: 1 1 210px; min-width: 0; }
.wl-row .btn { flex: 1 0 auto; }
input:not([type]), input[type="email"], input[type="text"], input[type="password"], input[type="url"], input[type="number"], input[type="search"], select, textarea { width: 100%; min-height: 50px; padding: .75rem .9rem; border-radius: 13px; border: 1.5px solid rgba(247, 241, 230, .26);
  background: #060a20; color: var(--snow); font: 400 1rem/1.4 var(--body); }
input::placeholder, textarea::placeholder { color: #8f97b6; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.consent { display: flex; align-items: flex-start; gap: .65rem; margin-top: .85rem; min-height: 44px; font-size: .95rem; line-height: 1.4; color: var(--snow-2); cursor: pointer; }
.consent input { flex: none; width: 24px; height: 24px; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; border-radius: 7px; border: 2px solid var(--gold); background: rgba(242, 196, 109, .08); display: grid; place-content: center; }
.consent input::before { content: ""; width: 12px; height: 12px; transform: scale(0); transition: transform .15s ease; background: #1b1406; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.consent input:checked { background: var(--gold); }
.consent input:checked::before { transform: scale(1); }
.consent input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.wl-fine { margin: .35rem 0 0; font-size: .84rem; color: var(--mist); }
.wl-status { margin: .6rem 0 0; font-weight: 700; min-height: 0; }
.wl-status:empty { display: none; }
.wl-status.ok { color: #a9ebbf; } .wl-status.err { color: #ffc2c2; }
.hero-points { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; padding: 0; margin: 18px 0 0; color: var(--snow-2); font-size: .98rem; }
.hero-points li { display: inline-flex; align-items: center; gap: .45rem; }
.hero-points .ico { color: var(--gold); }

/* ---------- sections ---------- */
section { padding: 76px 0; }
@media (min-width: 960px) { section { padding: 96px 0; } }
.sec-head { margin-bottom: 30px; }
.sec-head.center, .center { text-align: center; }
.sec-head.center h2, .sec-head.center .section-lede { margin-inline: auto; }
.note.center { margin-inline: auto; }

/* ---------- 40 moves: a bright snowy gallery (light section) ---------- */
.moves { position: relative; color: var(--ink); background-color: var(--cream);
  background-image: radial-gradient(circle at 20% 30%, rgba(255, 46, 77, .07) 0 2px, transparent 3px), radial-gradient(circle at 70% 80%, rgba(25, 195, 125, .08) 0 2px, transparent 3px), linear-gradient(180deg, #fffaf1, #fff1dc);
  background-size: 46px 46px, 62px 62px, auto; }
.moves::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 26px; background: var(--candy-2);
  -webkit-mask: radial-gradient(14px 14px at 50% 0, #000 98%, transparent) 0 0 / 34px 26px repeat-x; mask: radial-gradient(14px 14px at 50% 0, #000 98%, transparent) 0 0 / 34px 26px repeat-x; }
.moves { z-index: 2; }
.moves::after { content: ""; position: absolute; left: 0; right: 0; bottom: -25px; height: 26px; background: #fff1dc;
  -webkit-mask: radial-gradient(14px 14px at 50% 0, #000 98%, transparent) 0 0 / 34px 26px repeat-x; mask: radial-gradient(14px 14px at 50% 0, #000 98%, transparent) 0 0 / 34px 26px repeat-x; }
.moves h2 { color: var(--ink); }
.moves .hl { color: var(--candy-2); }
.moves .eyebrow { color: var(--candy-2); }
.moves .eyebrow .spark { background: var(--candy); }
.moves .section-lede { color: var(--ink-2); }
.moves .note { color: var(--ink-2); }
.move-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }
.mtab { --c: var(--candy); display: inline-flex; align-items: center; gap: .55rem; min-height: 50px; padding: .4rem 1rem .4rem .45rem; border-radius: 999px; cursor: pointer;
  font: 700 1rem/1 var(--body); color: var(--ink); background: #fff; border: 2px solid rgba(31, 19, 54, .12); box-shadow: 0 6px 14px -10px rgba(31, 19, 54, .5);
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), background .2s ease, color .2s ease, border-color .2s ease; }
.mtab:hover { transform: translateY(-2px); border-color: var(--c); }
.mt-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--c) 16%, #fff); color: var(--c); }
.mt-count { min-width: 1.9em; padding: .25rem .45rem; border-radius: 999px; font-size: .82rem; background: rgba(31, 19, 54, .08); }
.mtab[aria-selected="true"] { background: var(--c); border-color: var(--c); color: #fff; box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--c) 90%, transparent); }
.mtab[aria-selected="true"] .mt-ico { background: #fff; }
.mtab[aria-selected="true"] .mt-count { background: rgba(255, 255, 255, .25); }
.mt-classic { --c: var(--candy-2); } .mt-acrobatics { --c: #7a4dff; } .mt-reindeer { --c: #c2561c; } .mt-gentle { --c: var(--holly-2); }
.mtab:focus-visible { outline-color: var(--ink); }
@media (max-width: 619px) {
  .move-tabs:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mtab { gap: .45rem; min-height: 48px; padding: .35rem .7rem .35rem .35rem; font-size: .94rem; }
  .mt-ico { width: 32px; height: 32px; }
  .mt-count { display: none; }
}
.move-panel + .move-panel { margin-top: 36px; }
.panel-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; font-size: 1.6rem; margin: 0 0 16px; color: var(--ink); }
.panel-h span { font: 400 1rem/1.4 var(--body); color: var(--ink-2); }
.js .move-tabs:not([hidden]) ~ .move-panel .panel-h { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.move-panel[hidden] { display: none; }
.move-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 620px) { .move-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .move-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 18px; } }
.move { margin: 0; }
.move-media { position: relative; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: #e9dcc8; border: 4px solid #fff;
  box-shadow: 0 16px 30px -18px rgba(31, 19, 54, .6), 0 2px 0 rgba(31, 19, 54, .06); transform: rotate(var(--tilt, -1.2deg));
  transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s ease; }
.move:nth-child(even) .move-media { --tilt: 1.3deg; }
.move:nth-child(3n) .move-media { --tilt: -.6deg; }
.move:hover .move-media { transform: rotate(0deg) translateY(-6px) scale(1.03); box-shadow: 0 26px 40px -20px rgba(31, 19, 54, .7); }
.move-media img, .move-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.move-media video { opacity: 0; transition: opacity .35s ease; }
.move-media.is-playing video { opacity: 1; }
.new-tag { position: absolute; z-index: 2; top: 8px; right: 8px; padding: .38rem .6rem; border-radius: 999px; font: 700 .72rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase;
  color: #052b1a; background: var(--mint); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .5); transform: rotate(6deg); }
.move-title { margin: .7rem .2rem 0; font: 700 1rem/1.25 var(--body); color: var(--ink); text-align: center; text-wrap: balance; }
/* each group frames its tiles in its own colour, the same as its tab */
.mp-classic .move-media { border-color: #d81236; } .mp-acrobatics .move-media { border-color: #6e4bd8; } .mp-reindeer .move-media { border-color: #a5521f; } .mp-gentle .move-media { border-color: #0c7e4e; }
.ai-note { display: inline-flex; align-items: center; gap: .55rem; margin: -6px 0 22px; padding: .5rem .9rem; border-radius: 999px; background: #fff; color: var(--ink-2); font-size: .95rem; font-weight: 700; box-shadow: 0 6px 14px -10px rgba(31, 19, 54, .5); }
.ai-note .spark { background: var(--candy); }
.more-moves { display: none; }
@media (max-width: 619px) {
  .move-panel.is-collapsed .move:nth-child(n+7) { display: none; }
  .move-panel.is-collapsed .more-moves { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; margin-top: 18px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; color: var(--ink); font: 700 1rem/1 var(--body); cursor: pointer; }
  .ai-note { border-radius: 16px; }
}

/* ---------- the talking elf + voices: candy red velvet ---------- */
.talk { position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(70% 60% at 50% 0%, rgba(255, 110, 140, .35), rgba(255, 110, 140, 0) 70%), radial-gradient(60% 50% at 0% 100%, rgba(255, 210, 122, .18), rgba(255, 210, 122, 0) 70%), linear-gradient(180deg, #b0102f 0%, #8e0b28 55%, #6e0a21 100%); }
.talk::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .22) 0 1.6px, transparent 2.4px), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, .16) 0 1.2px, transparent 2px);
  background-size: 54px 54px, 38px 38px; }
.talk > .wrap { position: relative; }
.talk .eyebrow { color: #ffe7a8; }
.talk .eyebrow .spark { background: #ffe7a8; }
.talk .hl { color: #ffe7a8; }
.talk .section-lede { color: #ffe1e6; }
.talk .note { color: #ffd0d8; }
.talk-demos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; margin: 10px 0 18px; }
@media (min-width: 900px) { .talk-demos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } }
.talk-card { margin: 0; padding: 10px 10px 12px; border-radius: 22px; background: #fff; color: var(--ink); box-shadow: 0 24px 40px -22px rgba(40, 0, 10, .9);
  transform: rotate(var(--tilt, -2deg)); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1); }
.talk-card:nth-child(even) { --tilt: 2.2deg; }
.talk-card:hover { transform: rotate(0deg) translateY(-6px); }
.talk-photo { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #f3e6e6; }
.talk-photo img, .talk-photo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.talk-photo video { opacity: 0; transition: opacity .2s ease; }
.talk-photo.is-playing video { opacity: 1; }
.bubble { position: absolute; z-index: 2; left: 8px; right: 8px; top: 10px; padding: .55rem .7rem; border-radius: 16px; background: #fff; color: var(--ink);
  font: 700 .98rem/1.2 var(--display); text-align: center; box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .6); transform-origin: 30% 120%; transform: rotate(-2deg);
  transition: transform .35s cubic-bezier(.3, 1.7, .5, 1), opacity .2s ease; }
.bubble::after { content: ""; position: absolute; left: 26%; bottom: -10px; width: 18px; height: 14px; background: #fff; clip-path: polygon(0 0, 100% 0, 20% 100%); }
.talk-photo.is-playing .bubble, .talk-photo.is-playing .bubble::after { background: #ffe7a8; }
@media (prefers-reduced-motion: no-preference) { .talk-photo.is-playing .bubble { animation: chatter .32s ease-in-out infinite alternate; } }
@keyframes chatter { from { transform: rotate(-3deg) scale(1); } to { transform: rotate(2deg) scale(1.06); } }
.talk-play { position: absolute; z-index: 3; left: 50%; bottom: 14px; display: grid; place-items: center; width: 64px; height: 64px; margin-left: -32px; border-radius: 50%; border: 0; cursor: pointer;
  color: #3a1d00; background: radial-gradient(circle at 35% 30%, #fff1c8, var(--gold) 55%, var(--gold-2)); box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .7), 0 0 0 5px rgba(255, 255, 255, .55);
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.talk-play:hover { transform: scale(1.08); }
.talk-play .ico { width: 28px; height: 28px; grid-area: 1 / 1; }
.talk-play .ico-pause { display: none; }
.talk-photo.is-playing .talk-play .ico-play { display: none; } .talk-photo.is-playing .talk-play .ico-pause { display: block; }
.tp-ring { grid-area: 1 / 1; width: 100%; height: 100%; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .talk-photo:not(.is-playing) .tp-ring { animation: ring 2.2s ease-out infinite; } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(255, 231, 168, .7); } 100% { box-shadow: 0 0 0 18px rgba(255, 231, 168, 0); } }
.talk-card figcaption { margin-top: 10px; text-align: center; font-size: .98rem; color: var(--ink-2); text-wrap: balance; }
.talk-card figcaption b { color: var(--candy-2); font-family: var(--display); font-size: 1.12rem; }

.voices-h { margin: 56px auto 22px; text-align: center; font-size: clamp(1.6rem, 3vw + .6rem, 2.3rem); max-width: 26ch; }
.voice-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .voice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .voice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .voice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.voice-tag { --c: var(--candy-2); position: relative; display: flex; flex-direction: column; padding: 20px 18px 16px 22px; border-radius: 10px 22px 22px 10px; color: var(--ink);
  background: linear-gradient(180deg, #fffdf8, var(--cream-2)); box-shadow: 0 18px 30px -20px rgba(40, 0, 10, .95), inset 6px 0 0 var(--c);
  transform: rotate(var(--tilt, -1deg)); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1); }
.voice-tag:nth-child(even) { --tilt: 1.1deg; }
.voice-tag:hover { transform: rotate(0deg) translateY(-4px); }
.v-hole { position: absolute; top: 14px; right: 16px; width: 14px; height: 14px; border-radius: 50%; background: #7d0a22; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .5), 0 0 0 3px color-mix(in srgb, var(--c) 35%, #fff); }
.v-name { margin: 0; font: 700 1.6rem/1.05 var(--display); color: var(--c); }
.v-tagline { margin: .3rem 0 .55rem; font-weight: 700; font-size: .95rem; color: var(--ink-2); }
.v-line { margin: 0 0 14px; font: italic 400 1rem/1.45 var(--body); color: var(--ink); flex: 1; }
.voice-play { display: inline-flex; align-items: center; gap: .6rem; align-self: flex-start; min-height: 46px; padding: .3rem 1rem .3rem .3rem; border-radius: 999px; border: 0; cursor: pointer;
  font: 700 .98rem/1 var(--body); color: #fff; background: var(--c); box-shadow: 0 10px 18px -10px color-mix(in srgb, var(--c) 90%, transparent); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.voice-play:hover { transform: translateY(-2px) scale(1.03); }
.vp-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--c); }
.vp-ico .ico { grid-area: 1 / 1; width: 20px; height: 20px; }
.vp-ico .ico-pause { display: none; }
.voice-play[aria-pressed="true"] .vp-ico .ico-play { display: none; } .voice-play[aria-pressed="true"] .vp-ico .ico-pause { display: block; }
.vp-bars { display: none; align-items: flex-end; gap: 3px; height: 18px; }
.vp-bars i { width: 3px; height: 30%; border-radius: 2px; background: #fff; }
.voice-play[aria-pressed="true"] .vp-bars { display: inline-flex; }
.voice-play[aria-pressed="true"] .vp-text { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .voice-play[aria-pressed="true"] .vp-bars i { animation: eq .9s ease-in-out infinite; }
  .vp-bars i:nth-child(2) { animation-delay: -.3s !important; } .vp-bars i:nth-child(3) { animation-delay: -.6s !important; } .vp-bars i:nth-child(4) { animation-delay: -.15s !important; } .vp-bars i:nth-child(5) { animation-delay: -.45s !important; }
}
.voice-play[aria-pressed="true"] .vp-bars i { height: 70%; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.voice-tag:has(.voice-play[aria-pressed="true"]) { transform: rotate(0deg) translateY(-6px) scale(1.03); box-shadow: 0 24px 40px -18px rgba(40, 0, 10, .95), inset 6px 0 0 var(--c), 0 0 0 3px #ffe7a8; }
/* sparkles thrown from a play button (home.js burst) */
.burst { position: fixed; z-index: 60; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; pointer-events: none; background: var(--gold);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: burst .75s cubic-bezier(.2, .7, .3, 1) forwards; }
.burst.b-mint { background: var(--mint); } .burst.b-berry { background: var(--berry); } .burst.b-snow { background: #fff; }
@keyframes burst { from { opacity: 1; transform: translate(0, 0) scale(.3) rotate(0deg); } 70% { opacity: 1; } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(180deg); } }
.tone-candy { --c: var(--candy-2); } .tone-holly { --c: var(--holly-2); } .tone-gold { --c: #9a5b00; } .tone-berry { --c: #c2187a; } .tone-mint { --c: #0a7562; } .tone-sky { --c: #1f6fd1; }
.voice-play:focus-visible { outline-color: var(--ink); }
/* phones: two compact tags a row; the hello line shows while that voice plays */
@media (max-width: 559px) {
  .voice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .voice-tag { padding: 14px 12px 12px 16px; }
  .v-hole { top: 10px; right: 10px; width: 11px; height: 11px; }
  .v-name { font-size: 1.3rem; padding-right: 14px; }
  .v-tagline { font-size: .86rem; margin: .25rem 0 .7rem; }
  .v-line { display: none; font-size: .9rem; }
  .voice-tag:has(.voice-play[aria-pressed="true"]) .v-line { display: block; }
  .voice-play { padding: .25rem .8rem .25rem .25rem; font-size: .92rem; }
  .vp-ico { width: 36px; height: 36px; }
  .vp-name { display: none; }
}
.how { background: radial-gradient(55% 45% at 12% 0%, rgba(78, 242, 204, .13), rgba(78, 242, 204, 0) 70%), radial-gradient(50% 50% at 92% 100%, rgba(255, 99, 177, .13), rgba(255, 99, 177, 0) 70%), linear-gradient(180deg, #0d1536 0%, #0b1230 100%); }
.steps { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); counter-reset: none; }
@media (min-width: 780px) { .steps { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
  .steps::before { content: ""; position: absolute; z-index: 0; left: 12%; right: 12%; top: 134px; border-top: 3px dashed rgba(255, 231, 168, .35); } }
.step { --c: var(--gold); --on: #1b1406; }
.step:nth-child(1) { --c: var(--candy); --on: #fff; } .step:nth-child(2) { --c: var(--mint); --on: #052b1a; } .step:nth-child(3) { --c: var(--gold); }
.step { position: relative; z-index: 1; padding: 18px 18px 22px; border-radius: var(--radius); background: linear-gradient(180deg, #18224f, #111a42); border: 1px solid var(--line-soft); border-top: 4px solid var(--c); box-shadow: 0 24px 40px -28px color-mix(in srgb, var(--c) 70%, transparent); }
.step h3 { margin: 0 0 .45rem; }
.step p { margin: 0; color: var(--snow-2); }
.step-art { position: relative; height: 236px; margin-bottom: 18px; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(80% 90% at 50% 100%, rgba(242, 196, 109, .16), rgba(242, 196, 109, 0) 70%), #080d27; }
.step-n { position: absolute; top: 8px; left: 8px; z-index: 2; margin: 0; }
.step-n span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font: 700 1.3rem/1 var(--display); color: var(--on);
  background: var(--c); box-shadow: 0 0 0 4px #111a42, 0 8px 18px -6px color-mix(in srgb, var(--c) 85%, transparent); transform: rotate(-6deg); }
.art-snap img { height: 196px; width: auto; aspect-ratio: 9 / 16; border-radius: 12px; display: block; }
.art-snap .vf { position: absolute; width: 22px; height: 22px; border: 3px solid var(--c, var(--gold)); }
.art-snap .vf-tl { left: calc(50% - 70px); top: 14px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.art-snap .vf-tr { right: calc(50% - 70px); top: 14px; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.art-snap .vf-bl { left: calc(50% - 70px); bottom: 14px; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.art-snap .vf-br { right: calc(50% - 70px); bottom: 14px; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.art-pick { flex-direction: column; align-items: stretch; padding: 0 22px; }
.pick { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-radius: 14px; border: 1.5px solid rgba(247, 241, 230, .18); background: rgba(4, 7, 26, .5); font-weight: 700; font-size: .98rem; }
.pick .ico { color: var(--gold); }
.pick.is-on { border-color: var(--mint); background: rgba(78, 242, 204, .14); box-shadow: 0 0 0 4px rgba(78, 242, 204, .1); }
.pick.is-on .ico { color: var(--mint); }
.pick-voice { border-style: dashed; border-color: rgba(255, 99, 177, .6); }
.art-pick { gap: 10px; justify-content: center; }
.mini-moves { display: flex; justify-content: center; align-items: flex-end; gap: 10px; }
.mini { margin: 0; width: 76px; text-align: center; transform: rotate(-4deg); }
.mini:nth-child(2) { transform: translateY(-6px) scale(1.08); } .mini:nth-child(3) { transform: rotate(4deg); }
.mini img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; border: 3px solid rgba(247, 241, 230, .85); }
.mini.is-on img { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(78, 242, 204, .25); }
.mini figcaption { margin-top: 5px; font: 700 .68rem/1.15 var(--body); color: var(--snow-2); text-wrap: balance; }
.art-pick .pick-voice { align-self: center; padding: .5rem .9rem; }
.pick-voice .ico { color: var(--berry); }
.pick-note { text-align: center; font-size: .84rem; color: var(--mist); }
.art-reveal figure { margin: 0; text-align: center; }
.art-reveal img { height: 176px; width: auto; aspect-ratio: 9 / 16; border-radius: 10px; display: block; }
.art-reveal figcaption { margin-top: 6px; font: 700 .78rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--mist); }
.art-reveal figure:last-of-type figcaption { color: var(--gold); }
.art-reveal .arrow .ico { width: 26px; height: 26px; color: var(--gold); }

.why { background: radial-gradient(60% 50% at 100% 0%, rgba(216, 50, 63, .12), rgba(216, 50, 63, 0) 70%), var(--night-1); }
.why-grid { display: grid; gap: 16px; margin-top: 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.why-card { padding: 22px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line-soft); }
.why-card > .ico { width: 30px; height: 30px; padding: 8px; box-sizing: content-box; border-radius: 13px; color: var(--gold); background: rgba(242, 196, 109, .12); margin-bottom: 12px; }
.why-card h3 { margin-bottom: .4rem; }
.why-card p { margin: 0; color: var(--snow-2); }
.why-lead { background: linear-gradient(150deg, rgba(216, 50, 63, .26), rgba(18, 27, 66, .65) 62%); border-color: rgba(216, 50, 63, .4); }
.why-lead > .ico { color: #ffd2d4; background: rgba(216, 50, 63, .3); }
.why-card { --c: var(--gold); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), border-color .3s ease; }
.why-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.why-card[class*="wc-"] > .ico { color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.wc-holly { --c: #4fe39a; } .wc-gold { --c: var(--gold); } .wc-sky { --c: var(--sky); } .wc-berry { --c: var(--berry); } .wc-mint { --c: var(--mint); }
.btn-big { min-height: 60px; padding: 1rem 2rem; font-size: 1.12rem; }

.pricing { background: radial-gradient(70% 60% at 50% 0%, rgba(242, 196, 109, .1), rgba(242, 196, 109, 0) 70%), linear-gradient(180deg, #0b1230, #0d1536); }
.price-grid { display: grid; gap: 18px; margin-top: 34px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .price-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.price-card { position: relative; display: flex; flex-direction: column; padding: 24px 22px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line-soft); }
.price-card h3 { font-size: 1.4rem; margin: 0 0 .7rem; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .7rem; margin: 0; }
.p-main { font: 640 2.5rem/1.1 var(--display); color: var(--snow); }
.p-alt { font: 600 1.3rem/1.1 var(--display); color: var(--snow-2); }
.per { margin: .65rem 0 1.05rem; color: var(--gold); font-weight: 700; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; color: var(--snow-2); font-size: .96rem; }
.ticks li { display: flex; gap: .55rem; align-items: flex-start; }
.ticks li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: .22em; border-radius: 50%;
  background: rgba(242, 196, 109, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 12.5 3.7 3.7 7.3-8' fill='none' stroke='%23F2C46D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.price-card.is-free { border-style: dashed; border-color: rgba(247, 241, 230, .2); }
.price-card.is-best { border: 1.5px solid var(--gold); background: linear-gradient(170deg, rgba(242, 196, 109, .17), rgba(18, 27, 66, .72) 58%); box-shadow: 0 24px 50px -26px rgba(242, 196, 109, .5); }
.ribbon { position: absolute; top: -13px; right: 18px; margin: 0; padding: .45rem .75rem; border-radius: 999px; background: var(--red); color: #fff;
  font: 700 .74rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 8px 18px -8px rgba(216, 50, 63, .9); }
.note { margin: 24px 0 0; max-width: 48rem; color: var(--mist); font-size: .94rem; }

.faq { background: var(--night-1); }
.faq-wrap { display: grid; gap: 26px; }
@media (min-width: 960px) { .faq-wrap { grid-template-columns: 330px minmax(0, 1fr); gap: 60px; } .faq-head { position: sticky; top: 24px; align-self: start; } }
.qa { border-bottom: 1px solid var(--line-soft); }
.qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; padding: 14px 0; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { margin: 0; font-size: 1.22rem; line-height: 1.25; }
.qa summary:hover h3 { color: var(--gold); }
.qa-icon { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line); }
.qa-icon::before, .qa-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--gold); transform: translate(-50%, -50%); transition: transform .25s ease; }
.qa-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa[open] .qa-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.qa p { margin: 0 0 20px; max-width: 46rem; color: var(--snow-2); }

.finale { position: relative; text-align: center; padding: 92px 0 100px; overflow: hidden;
  background: radial-gradient(55% 70% at 50% 100%, rgba(242, 196, 109, .18), rgba(242, 196, 109, 0) 70%), linear-gradient(180deg, #0b1230, #070b1f); }
.finale-inner { display: flex; flex-direction: column; align-items: center; }
.finale h2 { margin: 18px auto .5em; max-width: 19ch; }
.h2-line { display: block; margin-top: .1em; color: var(--gold); font-weight: 520; }
.finale p { color: var(--snow-2); font-size: 1.1rem; }

/* ---------- section rhythm (iteration 3): navy hero, snowy moves, candy talk, navy steps, holly why,
   snowy pricing, navy FAQ, candy finale ---------- */
.why { position: relative; color: #fff;
  background: radial-gradient(60% 55% at 88% 0%, rgba(78, 242, 204, .22), rgba(78, 242, 204, 0) 70%), radial-gradient(50% 50% at 0% 100%, rgba(255, 210, 122, .16), rgba(255, 210, 122, 0) 70%), linear-gradient(180deg, #0d6e47 0%, #0a5939 58%, #08422b 100%); }
.why::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background-image: radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .2) 0 1.6px, transparent 2.4px), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, .14) 0 1.2px, transparent 2px); background-size: 54px 54px, 38px 38px; }
.why > .wrap { position: relative; }
.why .eyebrow { color: #ffe7a8; } .why .eyebrow .spark { background: #ffe7a8; }
.why h2 { color: #fff; }
.why .why-card { --c: #b86e00; color: var(--ink); background: #fffaf1; border: 0; box-shadow: 0 22px 36px -24px rgba(0, 30, 15, .95); }
.why .why-card h3 { color: var(--ink); }
.why .why-card p { color: var(--ink-2); }
.why .why-card > .ico { color: #fff; background: var(--c); }
.why .wc-holly { --c: var(--holly-2); } .why .wc-gold { --c: #b86e00; } .why .wc-sky { --c: #1f6fd1; } .why .wc-berry { --c: #c2187a; } .why .wc-mint { --c: #0d8a72; }
.why .why-card:hover { transform: translateY(-5px) rotate(-.6deg); }
.why .why-lead { color: #fff; background: linear-gradient(150deg, #d01638, #a80d2b 72%); }
.why .why-lead h3 { color: #fff; } .why .why-lead p { color: #ffe6ea; }
.why .why-lead > .ico { color: var(--candy-2); background: #fff; }
.why .badge { background: #ffe7a8; color: #3a1d00; }

.pricing { position: relative; color: var(--ink); background-color: var(--cream);
  background-image: radial-gradient(circle at 20% 30%, rgba(255, 46, 77, .07) 0 2px, transparent 3px), radial-gradient(circle at 70% 80%, rgba(25, 195, 125, .08) 0 2px, transparent 3px), linear-gradient(180deg, #fff1dc, #fffaf1);
  background-size: 46px 46px, 62px 62px, auto; }
.pricing::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 26px; background: #08422b;
  -webkit-mask: radial-gradient(14px 14px at 50% 0, #000 98%, transparent) 0 0 / 34px 26px repeat-x; mask: radial-gradient(14px 14px at 50% 0, #000 98%, transparent) 0 0 / 34px 26px repeat-x; }
.pricing h2 { color: var(--ink); }
.pricing .eyebrow { color: var(--candy-2); } .pricing .eyebrow .spark { background: var(--candy); }
.pricing .section-lede, .pricing .note { color: var(--ink-2); }
.pricing .price-card { color: var(--ink); background: #fff; border: 2px solid rgba(31, 19, 54, .08); box-shadow: 0 20px 34px -24px rgba(31, 19, 54, .55); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1); }
.pricing .price-card:hover { transform: translateY(-5px); }
.pricing .price-card h3, .pricing .p-main { color: var(--ink); }
.pricing .p-alt { color: var(--ink-2); }
.pricing .per { color: var(--candy-2); }
.pricing .ticks { color: var(--ink-2); }
.pricing .ticks li::before { background: rgba(25, 195, 125, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 12.5 3.7 3.7 7.3-8' fill='none' stroke='%230B7F4C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.pricing .price-card.is-free { background: #fffdf8; border: 2px dashed rgba(31, 19, 54, .22); }
.pricing .price-card.is-best { color: #fff; border: 0; background: linear-gradient(160deg, #d01638 0%, #b8102f 55%, #930c27 100%); box-shadow: 0 30px 50px -24px rgba(196, 18, 47, .85); }
@media (min-width: 1060px) { .pricing .price-card.is-best { transform: translateY(-10px); } .pricing .price-card.is-best:hover { transform: translateY(-15px); } }
.pricing .is-best h3, .pricing .is-best .p-main { color: #fff; }
.pricing .is-best .p-alt { color: #ffe9ec; }
.pricing .is-best .per { color: #fff3d1; }
.pricing .is-best .ticks { color: #ffe9ec; }
.pricing .is-best .ticks li::before { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 12.5 3.7 3.7 7.3-8' fill='none' stroke='%23D41437' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.pricing .ribbon { background: #ffe7a8; color: #3a1d00; box-shadow: 0 8px 18px -8px rgba(58, 29, 0, .6); transform: rotate(4deg); }
.pricing a { color: var(--candy-2); }
/* what every pack includes, once, above the cards */
.perks { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 4px 0 30px; }
.perks li { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem .5rem .55rem; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; font-size: .96rem; box-shadow: 0 6px 14px -10px rgba(31, 19, 54, .5); }
.perks li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--holly-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 12.5 3.7 3.7 7.3-8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
/* the other currency as a small pill, never read as a crossed-out was-price */
.pricing .p-alt { padding: .2rem .55rem; border-radius: 999px; font-size: 1.02rem; color: var(--ink); background: rgba(31, 19, 54, .07); }
.pricing .is-best .p-alt { color: #fff; background: rgba(255, 255, 255, .18); }
.pricing .per { font-size: 1.12rem; }
.price-cta { margin: 26px 0 0; }
.pricing .btn-candy, .pricing .btn-candy:hover { color: #fff; }
/* one little star per story in the pack */
.tokens { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 1rem; max-width: 200px; }
.tokens i { width: 14px; height: 14px; background: var(--gold-2); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.pricing .is-best .tokens i { background: #ffe7a8; }
.pricing .is-free .tokens i { background: var(--holly); }
.btn-candy { color: #fff; background: linear-gradient(180deg, #e8264a, #c4122f); box-shadow: 0 14px 28px -12px rgba(196, 18, 47, .8), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn-candy:hover { color: #fff; box-shadow: 0 18px 34px -12px rgba(196, 18, 47, .9), inset 0 1px 0 rgba(255, 255, 255, .3); }

.finale { color: #fff; border-top: 10px solid transparent; border-image: repeating-linear-gradient(-45deg, #fff 0 14px, var(--candy) 14px 28px) 10;
  background: radial-gradient(60% 70% at 50% 100%, rgba(255, 231, 168, .3), rgba(255, 231, 168, 0) 70%), radial-gradient(45% 50% at 10% 0%, rgba(255, 99, 177, .3), rgba(255, 99, 177, 0) 70%), linear-gradient(180deg, #c4122f, #8e0b28); }
.finale .h2-line { color: #ffe7a8; }
.finale p { color: #ffe6ea; }
.finale-inner > .mark { box-sizing: content-box; padding: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .25), 0 18px 34px -14px rgba(60, 0, 15, .9); }
@media (prefers-reduced-motion: no-preference) { .finale-inner > .mark { animation: bob 3.6s ease-in-out infinite; } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
/* soft snow drifting down over the finale (two layers of dots, CSS only) */
.finale::before, .finale::after { content: ""; position: absolute; left: 0; right: 0; top: -760px; height: calc(100% + 760px); pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .8) 0 2px, transparent 2.6px); background-size: 90px 90px; opacity: .35; }
.finale::after { background-image: radial-gradient(circle, rgba(255, 255, 255, .9) 0 1.3px, transparent 1.9px); background-size: 53px 61px; background-position: 20px 10px; opacity: .45; }
.finale > .wrap { position: relative; z-index: 1; }
.finale-lights { z-index: 1; }
.finale { padding-top: 120px; }
.finale-tiles { list-style: none; display: flex; justify-content: center; gap: 14px; padding: 0; margin: 40px 0 0; }
.finale-tiles .move-media { width: clamp(52px, 14vw, 128px); border-color: #fff; }
@media (max-width: 559px) { .finale-tiles { gap: 9px; } .finale-tiles .move-media { border-width: 3px; border-radius: 12px; } }
.finale-tiles .move-media:nth-child(1) { --tilt: -8deg; } .finale-tiles .move-media:nth-child(2) { --tilt: -3deg; transform: rotate(var(--tilt)) translateY(-10px); }
.finale-tiles .move-media:nth-child(3) { --tilt: 2deg; transform: rotate(var(--tilt)) translateY(-16px); } .finale-tiles .move-media:nth-child(4) { --tilt: 5deg; transform: rotate(var(--tilt)) translateY(-8px); }
.finale-tiles .move-media:nth-child(5) { --tilt: 9deg; }
.finale-small { margin: 14px 0 0; font-size: .88rem; color: #ffd6dd !important; }
@media (prefers-reduced-motion: no-preference) { .finale::before { animation: snow1 26s linear infinite; } .finale::after { animation: snow2 17s linear infinite; } }
/* whole pattern tiles (90px, 61px), so the loop never jumps */
@keyframes snow1 { to { transform: translateY(720px); } }
@keyframes snow2 { to { transform: translateY(732px); } }

/* reveal on scroll (only with JS and motion allowed; content is always visible otherwise) */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
  .js [data-reveal].in { opacity: 1; transform: none; }
  /* the lift on hover and the raised best-value card must win over the settled reveal */
  .js .why .why-card.in:hover { transform: translateY(-5px) rotate(-.6deg); }
  .js .pricing .price-card.in:hover { transform: translateY(-5px); }
  .js .step.in:hover { transform: translateY(-4px); }
}
@media (min-width: 1060px) { .pricing .price-card.is-best, .js .pricing .price-card.is-best.in { transform: translateY(-10px); } .js .pricing .price-card.is-best.in:hover { transform: translateY(-15px); } }

/* ---------- prose pages, support, messages ---------- */
.prose { max-width: 48rem; padding: 50px 0 76px; }
.prose h1 { font-size: clamp(2.1rem, 6vw + .3rem, 3.1rem); }
.prose h2 { font-size: 1.55rem; max-width: none; margin: 2.2rem 0 .7rem; }
.prose p, .prose li { color: var(--snow-2); }
.prose strong { color: var(--snow); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin: .4rem 0; }
.prose code { font-size: .9em; background: rgba(247, 241, 230, .08); padding: .1em .35em; border-radius: 5px; }
.table-wrap { overflow-x: auto; margin: 1rem 0 1.4rem; border: 1px solid var(--line-soft); border-radius: 14px; }
.table-wrap table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .93rem; line-height: 1.5; }
.table-wrap th, .table-wrap td { text-align: left; vertical-align: top; padding: .7rem .85rem; border-bottom: 1px solid var(--line-soft); color: var(--snow-2); }
.table-wrap th { color: var(--gold); background: rgba(18, 27, 66, .7); font-weight: 700; }
.table-wrap tr:last-child td { border-bottom: 0; }

.support { display: grid; gap: 28px; padding: 50px 0 76px; }
@media (min-width: 920px) { .support { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: start; } }
.support-intro { padding: 0; }
.quick { list-style: none; padding: 0 !important; }
.quick li { padding: .8rem 1rem; margin: .6rem 0; border-radius: 14px; background: var(--panel); border: 1px solid var(--line-soft); }
.contact-card { font-style: normal; line-height: 1.7; padding: .8rem 1rem; border-radius: 14px; background: var(--panel); border: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.panel { padding: 24px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line-soft); }
.form label { display: block; margin: 16px 0 6px; font-weight: 700; }
.form label:first-of-type { margin-top: 0; }
.form .btn { margin-top: 18px; width: 100%; }
.opt { font-weight: 400; color: var(--mist); }
.hint { margin: .6rem 0 0; font-size: .9rem; color: var(--mist); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
select { appearance: none; -webkit-appearance: none; padding-right: 2.4rem; cursor: pointer;
  background: #060a20 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23F2C46D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .8rem center / 18px no-repeat; }
textarea { min-height: 150px; resize: vertical; }
.flash { padding: .75rem .95rem; border-radius: 13px; margin: 0 0 1rem; }
.flash-err { background: rgba(216, 50, 63, .18); border: 1px solid rgba(216, 50, 63, .55); color: #ffd6d6; }
.message { display: flex; justify-content: center; padding: 64px 0 96px; }
.message-panel { width: 100%; max-width: 580px; text-align: center; display: flex; flex-direction: column; align-items: center; padding: 34px 26px; }
.message-panel h1 { font-size: clamp(2rem, 6vw, 2.7rem); margin-top: 14px; }
.message-panel .lede { margin-inline: auto; }
.message-panel form { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.message-panel p:last-child { margin-bottom: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---------- Play: the scene guides (/ideas, /ideas/<id>) and the home page's Play section (25 Oct 2026) ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem; margin: 0 0 18px; font-size: .92rem; color: var(--mist); }
.crumbs a { color: var(--gold); min-height: 44px; display: inline-flex; align-items: center; }
.crumbs [aria-current] { color: var(--snow-2); }
.ai-chip { position: absolute; z-index: 2; left: 10px; bottom: 10px; padding: .32rem .6rem; border-radius: 999px; font: 700 .7rem/1 var(--body); letter-spacing: .1em;
  text-transform: uppercase; color: #fff; background: rgba(5, 8, 26, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.loop { position: relative; display: block; overflow: hidden; aspect-ratio: 9 / 16; background: #e9dcc8; }
.loop img, .loop video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.loop video { opacity: 0; transition: opacity .35s ease; }
.loop.is-playing video { opacity: 1; }
.loop-play { position: absolute; z-index: 3; right: 10px; bottom: 10px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  color: var(--ink); background: #fff; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .6); }
.loop-play[hidden] { display: none; }
.badge-build { display: inline-flex; align-items: center; gap: .3rem; margin-left: .4rem; padding: .25rem .6rem; border-radius: 999px; font-size: .85rem; font-weight: 700; color: #fff; background: #6e4bd8; }
.badge-build .ico { width: 16px; height: 16px; }
/* families: one colour each, shared by the chips, the frames and the guide pages */
.fam-kitchen { --fam: #d81236; } .fam-crafts { --fam: #6e4bd8; } .fam-games { --fam: #0a74b8; } .fam-cosy { --fam: #c4377f; } .fam-christmas { --fam: #0c7e4e; }

/* the hub: a dark hero with tonight's scene, then the cream gallery */
.ideas-hero { position: relative; padding: 34px 0 70px; overflow: hidden;
  background: radial-gradient(50% 60% at 85% 10%, rgba(138, 107, 255, .28), rgba(138, 107, 255, 0) 70%), radial-gradient(45% 55% at 0% 100%, rgba(78, 242, 204, .18), rgba(78, 242, 204, 0) 70%), linear-gradient(180deg, #0d1638, #0b1230); }
.ideas-hero h1 { font-size: clamp(2.3rem, 6.6vw + .3rem, 4.2rem); max-width: 16ch; }
.ideas-hero .section-lede { margin-bottom: 30px; }
.tonight { display: grid; gap: 22px; align-items: center; padding: 18px; border-radius: 28px; background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .8); }
@media (min-width: 760px) { .tonight { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 34px; padding: 22px 34px 22px 22px; } }
.tonight-media { width: min(100%, 300px); margin-inline: auto; border-radius: 22px; border: 5px solid #fff; transform: rotate(-1.6deg); box-shadow: 0 26px 46px -24px rgba(0, 0, 0, .9); }
.tonight-kicker { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font: 700 .85rem/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--mint); }
.tonight-kicker .ico { width: 20px; height: 20px; }
.tonight-title { font-size: clamp(2rem, 4vw + .6rem, 3.2rem); margin: 0 0 .4rem; }
.tonight-does { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; font-size: 1.2rem; font-weight: 700; color: var(--ember); }
.tonight-does .ico { width: 22px; height: 22px; color: var(--gold); flex: none; }
.tonight-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 1.2rem; color: var(--snow-2); }
.tonight-meta .ico { width: 20px; height: 20px; color: var(--gold); }
.prop-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 1rem; }
.prop-chips li { padding: .42rem .8rem; border-radius: 999px; font-size: .92rem; line-height: 1.25; background: rgba(247, 241, 230, .1); border: 1px solid rgba(247, 241, 230, .18); color: var(--snow); }
.btn .ico { width: 20px; height: 20px; }

.ideas-all, .guide-setup, .guide-more { position: relative; color: var(--ink); background-color: var(--cream);
  background-image: radial-gradient(circle at 20% 30%, rgba(255, 46, 77, .07) 0 2px, transparent 3px), radial-gradient(circle at 70% 80%, rgba(25, 195, 125, .08) 0 2px, transparent 3px), linear-gradient(180deg, #fffaf1, #fff1dc);
  background-size: 46px 46px, 62px 62px, auto; }
.ideas-all::before, .guide-setup::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 26px; background: #0b1230;
  -webkit-mask: radial-gradient(14px 14px at 50% 0, #000 98%, transparent) 0 0 / 34px 26px repeat-x; mask: radial-gradient(14px 14px at 50% 0, #000 98%, transparent) 0 0 / 34px 26px repeat-x; }
.ideas-all h2, .guide-setup h2, .guide-more h2 { color: var(--ink); }
.ideas-all .hl, .guide-more .hl { color: var(--candy-2); }
.ideas-all .section-lede { color: var(--ink-2); }
.ideas-all .note { color: var(--ink-2); }
.fam-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }
.fam-chips[hidden] { display: none; }
.fam-chip { --fam: var(--ink); display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: .45rem 1rem; border-radius: 999px; cursor: pointer;
  font: 700 .98rem/1 var(--body); color: var(--ink); background: #fff; border: 2px solid rgba(31, 19, 54, .12); box-shadow: 0 6px 14px -10px rgba(31, 19, 54, .5);
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), background .2s ease, color .2s ease, border-color .2s ease; }
.fam-chip span { min-width: 1.8em; padding: .22rem .42rem; border-radius: 999px; font-size: .8rem; background: rgba(31, 19, 54, .08); }
.fam-chip:hover { transform: translateY(-2px); border-color: var(--fam); }
.fam-chip[aria-pressed="true"] { background: var(--fam); border-color: var(--fam); color: #fff; }
.fam-chip[aria-pressed="true"] span { background: rgba(255, 255, 255, .25); }
.fam-chip:focus-visible { outline-color: var(--ink); }
.fc-kitchen { --fam: #d81236; } .fc-crafts { --fam: #6e4bd8; } .fc-games { --fam: #0a74b8; } .fc-cosy { --fam: #b52f73; } .fc-christmas { --fam: #0c7e4e; }
.idea-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 620px) { .idea-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .idea-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 22px; } .idea-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.idea[hidden] { display: none; }
.idea-card { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; }
.idea-card:hover { color: var(--ink); }
.idea-card:focus-visible { outline-color: var(--ink); border-radius: 22px; }
.idea-media { border-radius: 20px; border: 4px solid var(--fam, #fff); box-shadow: 0 16px 30px -18px rgba(31, 19, 54, .6); transform: rotate(var(--tilt, -1deg));
  transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s ease; }
.idea:nth-child(even) .idea-media { --tilt: 1.2deg; }
.idea:nth-child(3n) .idea-media { --tilt: -.5deg; }
.idea-card:hover .idea-media, .idea-card:focus-visible .idea-media { transform: rotate(0deg) translateY(-6px) scale(1.03); box-shadow: 0 26px 40px -20px rgba(31, 19, 54, .7); }
.night-tag { position: absolute; z-index: 2; top: 8px; left: 8px; padding: .36rem .62rem; border-radius: 999px; font: 700 .74rem/1 var(--body); letter-spacing: .06em; color: #fff; background: var(--fam, var(--candy-2));
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .5); }
.wand-tag { position: absolute; z-index: 2; top: 8px; right: 8px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: #6e4bd8;
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .5); transform: rotate(8deg); }
.wand-tag .ico { width: 18px; height: 18px; }
.idea-title { display: block; margin: .8rem .2rem 0; font: 650 1.2rem/1.2 var(--display); text-wrap: balance; }
.idea-does { display: block; margin: .3rem .2rem 0; font-weight: 700; font-size: .95rem; line-height: 1.3; color: var(--fam, var(--candy-2)); }
.idea-meta { display: flex; align-items: center; gap: .35rem; margin: .4rem .2rem 0; font-size: .86rem; line-height: 1.3; color: var(--ink-2); }
.idea-meta .ico { width: 16px; height: 16px; flex: none; }
.ai-note-ideas { display: flex; align-items: center; justify-content: center; gap: .55rem; margin-top: 34px; font-weight: 700; }
.ai-note-ideas .spark { background: var(--candy); }

/* the "make it in the app" band */
.ideas-cta { position: relative; text-align: center; color: #fff; overflow: hidden; border-top: 10px solid transparent; border-image: repeating-linear-gradient(-45deg, #fff 0 14px, var(--candy) 14px 28px) 10;
  background: radial-gradient(60% 70% at 50% 100%, rgba(255, 231, 168, .3), rgba(255, 231, 168, 0) 70%), radial-gradient(45% 50% at 10% 0%, rgba(255, 99, 177, .3), rgba(255, 99, 177, 0) 70%), linear-gradient(180deg, #c4122f, #8e0b28); }
.ideas-cta-inner { display: flex; flex-direction: column; align-items: center; }
.ideas-cta h2 { margin-inline: auto; }
.ideas-cta .hl { color: #ffe7a8; }
.ideas-cta .section-lede { color: #ffe6ea; margin-inline: auto; }
.ideas-cta .stores { justify-content: center; }
.ideas-cta .store-btn { color: #fff; }
.ideas-cta .store-btn.is-soon { background: rgba(60, 0, 15, .35); border-color: rgba(255, 231, 168, .55); }
.ideas-cta .store-btn.is-soon small { color: #ffe7a8; }
.cta-ico { display: grid; place-items: center; width: 74px; height: 74px; margin-bottom: 14px; border-radius: 50%; color: var(--candy-2); background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .25), 0 18px 34px -14px rgba(60, 0, 15, .9); }
.cta-ico .ico { width: 36px; height: 36px; }
@media (prefers-reduced-motion: no-preference) { .cta-ico { animation: bob 3.6s ease-in-out infinite; } }
.cta-list { margin: 18px 0 0; }

/* one guide */
.guide-hero { padding: 30px 0 80px;
  background: radial-gradient(55% 60% at 100% 0%, color-mix(in srgb, var(--fam, var(--violet)) 40%, transparent), transparent 70%), radial-gradient(45% 55% at 0% 100%, rgba(78, 242, 204, .14), rgba(78, 242, 204, 0) 70%), linear-gradient(180deg, #0d1638, #0b1230); }
.guide-grid { display: grid; gap: 34px; align-items: center; }
@media (min-width: 900px) { .guide-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; } }
.guide-hero h1 { font-size: clamp(2.3rem, 6vw + .4rem, 4.2rem); max-width: 14ch; }
.guide-lede { font-size: 1.2rem; color: var(--snow-2); max-width: 34rem; }
.guide-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 22px 0 26px; }
.guide-facts li { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem; border-radius: 16px; background: rgba(247, 241, 230, .08); border: 1px solid rgba(247, 241, 230, .16); }
.guide-facts .ico { width: 22px; height: 22px; color: var(--gold); flex: none; }
.guide-facts b { color: #fff; }
.guide-facts .fact-build { background: rgba(110, 75, 216, .35); border-color: rgba(176, 156, 255, .6); }
.guide-facts .fact-build .ico { color: #d9cfff; }
.guide-show { display: flex; flex-direction: column; align-items: center; }
.show-tabs { display: inline-flex; gap: 6px; padding: 6px; margin: 0 0 18px; border-radius: 999px; background: rgba(247, 241, 230, .1); border: 1px solid rgba(247, 241, 230, .16); }
.show-tabs[hidden] { display: none; }
.show-tab { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .4rem 1.1rem; border: 0; border-radius: 999px; cursor: pointer; font: 700 1rem/1 var(--body);
  color: var(--snow); background: transparent; transition: background .2s ease, color .2s ease; }
.show-tab .ico { width: 18px; height: 18px; }
.show-tab[aria-selected="true"] { color: var(--ink); background: #fff; }
.show-phone { margin: 0; width: min(100%, 330px); }
.show-phone[hidden] { display: none; }
.show-media { border-radius: 30px; border: 8px solid #fff; box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .1); transform: rotate(1.4deg); }
.show-phone figcaption { margin: 16px 6px 0; text-align: center; color: var(--snow-2); font-size: .98rem; line-height: 1.45; }
.show-phone figcaption b { color: var(--ember); }
.setup-grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .setup-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 30px; align-items: start; } }
.need-card, .steps-card { padding: 24px 22px 26px; border-radius: 26px; background: #fff; border-top: 6px solid var(--fam, var(--candy)); box-shadow: 0 24px 44px -30px rgba(31, 19, 54, .55); }
.card-h { display: flex; align-items: center; gap: .6rem; font-size: 1.7rem; margin: 0 0 16px; max-width: none; }
.card-h .ico { width: 30px; height: 30px; color: var(--fam, var(--candy-2)); }
.need-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.need { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 54px; padding: .55rem .8rem; border-radius: 16px; cursor: pointer; text-align: left;
  font: 400 1.04rem/1.35 var(--body); color: var(--ink); background: #fff8ee; border: 2px solid rgba(31, 19, 54, .1); transition: background .2s ease, border-color .2s ease; }
.need:hover { border-color: var(--fam, var(--candy)); }
.need:focus-visible { outline-color: var(--ink); }
.need-box { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid rgba(31, 19, 54, .35); color: transparent; background: #fff;
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background .2s ease, border-color .2s ease, color .2s ease; }
.need-box .ico { width: 18px; height: 18px; }
.need[aria-pressed="true"] { background: #e9f9f0; border-color: #0c7e4e; }
.need[aria-pressed="true"] .need-box { background: #0c7e4e; border-color: #0c7e4e; color: #fff; transform: scale(1.1); }
.need-hint { margin: 12px 2px 0; font-size: .92rem; color: var(--ink-2); }
.need-list.all-done + .need-hint::after { content: " All set: time to place your elf."; font-weight: 700; color: #0c7e4e; }
.guide-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.guide-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; }
.guide-steps p { margin: 0; padding-top: 8px; font-size: 1.06rem; line-height: 1.5; color: var(--ink); }
.gstep-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font: 700 1.25rem/1 var(--display); color: #fff; background: var(--fam, var(--candy-2)); }
.step-elf { padding: 12px; margin: 4px -12px 0; border-radius: 18px; background: color-mix(in srgb, var(--fam, var(--candy)) 9%, #fff); border: 2px dashed color-mix(in srgb, var(--fam, var(--candy)) 55%, #fff); }
.step-elf b { color: var(--fam, var(--candy-2)); }
.tip { display: flex; gap: .7rem; align-items: flex-start; margin: 20px 0 0; padding: 14px 16px; border-radius: 18px; background: #fff3d1; color: #4a3505; font-size: 1rem; line-height: 1.5; }
.tip .ico { width: 26px; height: 26px; flex: none; color: #b37400; }
.tip b { color: #2e2104; }
.guide-does { background: radial-gradient(60% 50% at 100% 0%, rgba(78, 242, 204, .12), rgba(78, 242, 204, 0) 70%), var(--night-1); }
.does-grid { display: grid; gap: 18px; margin-top: 10px; }
@media (min-width: 760px) { .does-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.does-card { --c: var(--mint); padding: 22px 22px 24px; border-radius: 24px; background: linear-gradient(180deg, #18224f, #111a42); border: 1px solid var(--line-soft); border-top: 5px solid var(--c); }
.does-card h3 { font-size: 1.55rem; margin: 0 0 .4rem; }
.does-card p { margin: 0; color: var(--snow-2); }
.does-kicker { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .7rem !important; font: 700 .82rem/1 var(--body) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--c) !important; }
.does-kicker .ico { width: 20px; height: 20px; }
.does-build { --c: #b09cff; } .does-move { --c: var(--sky); }
.does-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; margin-top: .6rem; font-weight: 700; }
.does-link .ico { width: 18px; height: 18px; }
.guide-more .btn-ghost { color: var(--ink); border-color: rgba(31, 19, 54, .35); }
.guide-more .btn-ghost:hover { color: var(--ink); border-color: var(--candy-2); }
.guide-more .center { margin-top: 30px; }

/* the home page's Play section: northern lights over the night sky */
.play { position: relative; color: #fff; overflow: hidden;
  background: radial-gradient(60% 55% at 15% 0%, rgba(78, 242, 204, .2), rgba(78, 242, 204, 0) 70%), radial-gradient(55% 60% at 90% 100%, rgba(138, 107, 255, .3), rgba(138, 107, 255, 0) 70%), linear-gradient(180deg, #0b1534, #0b1230); }
.play .eyebrow { color: var(--mint); }
.play .eyebrow .spark { background: var(--mint); }
.play .hl { color: var(--mint); }
.play-demos { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 22px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .play-demos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; } }
.play-demo { margin: 0; }
.play-demo .loop { border-radius: 22px; border: 5px solid #fff; box-shadow: 0 26px 44px -26px rgba(0, 0, 0, .9); transform: rotate(var(--tilt, -1.4deg)); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1); }
.play-demo:nth-child(even) .loop { --tilt: 1.4deg; }
.play-demo a:hover .loop, .play-demo a:focus-visible .loop { transform: rotate(0deg) translateY(-6px) scale(1.03); }
.play-demo a { color: #fff; text-decoration: none; display: block; }
.play-kind { position: absolute; z-index: 2; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: .3rem; padding: .36rem .65rem; border-radius: 999px; font: 700 .74rem/1 var(--body); letter-spacing: .06em;
  text-transform: uppercase; color: #052b1a; background: var(--mint); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .5); }
.play-kind .ico { width: 14px; height: 14px; }
.play-kind.is-build { color: #fff; background: #6e4bd8; }
.play-demo figcaption { margin: .8rem .2rem 0; text-align: center; }
.play-demo figcaption b { display: block; font: 650 1.15rem/1.2 var(--display); }
.play-demo figcaption span { display: block; margin-top: .25rem; font-size: .93rem; color: #cfe8ff; }
.play-steps { list-style: none; padding: 0; margin: 44px 0 0; display: grid; gap: 14px; counter-reset: ps; }
@media (min-width: 760px) { .play-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.play-steps li { display: flex; gap: .8rem; align-items: center; padding: 16px 18px; border-radius: 20px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); font-size: 1.05rem; line-height: 1.4; }
.play-steps li::before { counter-increment: ps; content: counter(ps); display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; font: 700 1.2rem/1 var(--display); color: #052b1a; background: var(--mint); }
.play-steps li:nth-child(2)::before { background: #b09cff; } .play-steps li:nth-child(3)::before { background: var(--gold); color: #1b1406; }
.play-steps b { color: #fff; }
.play-cta { margin: 34px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.play .note { color: #c4cbe6; }
.head-nav .nav-ideas { color: var(--mint); }
/* review v1 (25 Oct 2026): 44 px crumbs, roomier display headings, no sideways scroll from the tilted cards */
.crumbs a { min-width: 44px; justify-content: center; }
.ideas-hero h1, .guide-hero h1 { line-height: 1.1; }
.guide-hero, .ideas-all, .guide-setup, .guide-more, .play { overflow-x: clip; }
/* the smallest phones (320 px): the header's brand and button fit side by side, no sideways scroll on any page */
@media (max-width: 359px) { .brand-name { font-size: 1.08rem; } .head-nav .btn-small { padding-inline: .75rem; } .head-nav .btn { margin-left: .2rem; } }

/* ---------- Play "make it pop" round 1 (25 Oct 2026): countdown, Surprise me, the last-tick sparkles, the phone bar ---------- */
.countdown { display: inline-flex; align-items: center; gap: .55rem; margin: -4px 0 18px; padding: .45rem .95rem .45rem .5rem; border-radius: 999px; font: 700 1rem/1.2 var(--body);
  color: #052b1a; background: linear-gradient(180deg, #7ff7da, var(--mint)); box-shadow: 0 10px 22px -12px rgba(78, 242, 204, .8); }
.countdown[hidden] { display: none; }
.cd-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #0c7e4e; }
.cd-ico .ico { width: 18px; height: 18px; }
@media (prefers-reduced-motion: no-preference) { .cd-ico { animation: bob 3.6s ease-in-out infinite; } }
.fam-bar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; margin: 0 0 26px; }
.fam-bar .fam-chips { margin: 0; }
.surprise { display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: .45rem 1.1rem .45rem .8rem; border-radius: 999px; cursor: pointer;
  font: 700 1rem/1 var(--body); color: #fff; background: linear-gradient(180deg, #8f74ff, #6e4bd8); border: 0; box-shadow: 0 12px 24px -12px rgba(110, 75, 216, .9); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.surprise[hidden] { display: none; }
.surprise .ico { width: 22px; height: 22px; }
.surprise:hover { transform: translateY(-2px) rotate(-2deg); }
.surprise:focus-visible { outline-color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .surprise.is-shaking .ico { animation: giftshake .5s ease-in-out 2; }
  .idea.is-picked .idea-media { animation: picked .9s cubic-bezier(.3, 1.6, .5, 1); }
}
@keyframes giftshake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@keyframes picked { 0% { transform: scale(1); } 40% { transform: scale(1.08) rotate(-2deg); box-shadow: 0 0 0 6px var(--gold), 0 30px 50px -20px rgba(31, 19, 54, .8); } 100% { transform: scale(1.04); box-shadow: 0 0 0 6px var(--gold); } }
.need-card { position: relative; }
.need-burst { position: absolute; inset: 0; pointer-events: none; }
.need-burst i { position: absolute; width: 18px; height: 18px; opacity: 0; background: var(--gold); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.need-burst i:nth-child(1) { left: 12%; top: 8%; } .need-burst i:nth-child(2) { right: 10%; top: 14%; background: var(--candy); }
.need-burst i:nth-child(3) { left: 46%; top: -2%; background: var(--mint); } .need-burst i:nth-child(4) { left: 6%; bottom: 20%; background: var(--berry); }
.need-burst i:nth-child(5) { right: 6%; bottom: 26%; } .need-burst i:nth-child(6) { left: 70%; bottom: 6%; background: var(--sky); }
@media (prefers-reduced-motion: no-preference) { .need-card.is-celebrating .need-burst i { animation: needpop 1s cubic-bezier(.2, .8, .2, 1) both; } .need-card.is-celebrating .need-burst i:nth-child(even) { animation-delay: .12s; } }
@keyframes needpop { 0% { opacity: 0; transform: scale(0) rotate(0); } 35% { opacity: 1; transform: scale(1.4) rotate(40deg); } 100% { opacity: 0; transform: scale(.6) rotate(110deg) translateY(-18px); } }
.guide-bar { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(11, 18, 48, .94); border: 1px solid rgba(242, 196, 109, .35); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: translateY(140%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.guide-bar[hidden] { display: none; }
.guide-bar:not(.on) { visibility: hidden; transition: transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .35s; }
.guide-bar.on { transform: none; visibility: visible; }
.gb-title { min-width: 0; font: 650 1.05rem/1.2 var(--display); color: #fff; overflow-wrap: anywhere; }
@media (max-width: 359px) { .gb-title { font-size: .95rem; } .guide-bar { padding-left: 14px; } }
.guide-bar .btn { flex: none; }
@media (min-width: 760px) { .guide-bar { display: none; } }
@media (prefers-reduced-motion: reduce) { .guide-bar { transition: none; } }

/* ---------- Play review round 1 (25 Oct 2026): fixes and the second "pop" pass ---------- */
/* home: the demo captions use the card's whole width (a figure keeps 40px side margins by default) */
.play-cap { margin: 0; }
/* the hub's H1 says what the page is ("Elf ideas") on a line of its own */
.h1-kicker { display: block; margin-bottom: .2em; font-size: .42em; line-height: 1.2; letter-spacing: .02em; color: var(--mint); font-weight: 700; }
/* wide screens: three scenes fanned like cards fill the hero's right side */
.hero-deck { display: none; }
@media (min-width: 1060px) {
  .ideas-hero .wrap { position: relative; }
  .hero-deck { display: block; position: absolute; top: 30px; right: 10px; width: 400px; height: 400px; pointer-events: none; }
  .deck-card { position: absolute; top: 0; width: 190px; border-radius: 22px; border: 5px solid #fff; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .95); }
  .deck-card.dc-0 { right: 120px; z-index: 3; transform: rotate(-2deg); }
  .deck-card.dc-1 { right: 0; top: 46px; z-index: 2; transform: rotate(8deg); }
  .deck-card.dc-2 { right: 230px; top: 64px; z-index: 1; transform: rotate(-11deg); }
  .deck-card .ai-chip { font-size: .62rem; }
  .ideas-hero h1, .ideas-hero .section-lede { max-width: 620px; }
}
@media (min-width: 1060px) and (prefers-reduced-motion: no-preference) {
  .deck-card.dc-1 { animation: deckbob 5.5s ease-in-out infinite; }
  .deck-card.dc-2 { animation: deckbob 6.5s ease-in-out -2s infinite; }
}
@keyframes deckbob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
/* a guide's facts: two to a row on phones instead of one each */
@media (max-width: 559px) { .guide-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .guide-facts li { padding: .5rem .65rem; font-size: .92rem; line-height: 1.25; } }
/* phones: the title, then straight to the demo (about two thirds of the width), then the rest; the copy column dissolves
   into the grid so its parts can sit either side of the demo */
@media (max-width: 899px) {
  .guide-grid { gap: 0; }
  .guide-copy { display: contents; }
  .guide-copy .crumbs { order: 0; margin-bottom: 12px; }
  .guide-copy .eyebrow { order: 1; }
  .guide-copy h1 { order: 2; }
  .guide-show { order: 3; margin: 8px 0 24px; }
  .guide-lede { order: 4; }
  .guide-facts { order: 5; }
  .guide-actions { order: 6; }
  .show-phone { width: min(64vw, 300px); }
  .guide-hero { padding-top: 22px; }
}
/* "More ideas": four, an even row at two and at four columns */
.guide-more .idea-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 620px) { .guide-more .idea-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* "You need" as real checkboxes: the box is drawn, the native one stays for keyboards and screen readers */
.need-check { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.need { position: relative; }
.need-check:focus-visible + .need-box { outline: 3px solid var(--ink); outline-offset: 3px; }
.need-check:checked + .need-box { background: #0c7e4e; border-color: #0c7e4e; color: #fff; transform: scale(1.1); }
.need:has(.need-check:checked) { background: #e9f9f0; border-color: #0c7e4e; }
/* the Build-up card's before / after wipe: drag (or arrow keys) between the empty scene and the finished photo */
.ba { --ba: 50%; position: relative; width: min(100%, 250px); aspect-ratio: 9 / 16; margin: 18px auto 0; border-radius: 20px; overflow: hidden; border: 4px solid #fff; background: #1a2556;
  box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .9); touch-action: pan-y; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-before { clip-path: inset(0 calc(100% - var(--ba)) 0 0); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--ba); width: 3px; margin-left: -1.5px; background: var(--gold); box-shadow: 0 0 12px rgba(242, 196, 109, .9); pointer-events: none; }
.ba-knob { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; color: #1b1406; background: var(--gold);
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .7); }
.ba-knob .ico { width: 20px; height: 20px; }
.ba-tag { position: absolute; z-index: 2; bottom: 10px; padding: .3rem .55rem; border-radius: 999px; font: 700 .7rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(5, 8, 26, .62); pointer-events: none; }
.ba-tag-before { left: 10px; } .ba-tag-after { right: 10px; }
.ba-range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba-range[hidden] { display: none; }
.ba.is-focus { outline: 3px solid var(--gold); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) { .ba.is-ready .ba-knob { animation: knobhint 2.4s ease-in-out 1s 2; } }
@keyframes knobhint { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-14px); } 60% { transform: translateX(14px); } }
/* every bordered looping card: the 9:16 is the picture's own box (content-box), so a border never trims the photo */
.loop { box-sizing: content-box; }
.tonight-media { width: min(100% - 10px, 290px); }
@media (min-width: 1060px) { .deck-card { width: 180px; } }
.mini img { aspect-ratio: auto 9 / 16; }
.move-media { box-sizing: content-box; }
/* the finale's fanned tiles keep the same outer size now the border sits outside the picture */
.finale-tiles .move-media { width: clamp(44px, calc(14vw - 8px), 120px); }
@media (max-width: 559px) { .finale-tiles .move-media { width: clamp(46px, calc(14vw - 6px), 120px); } }
.guide-facts li span { text-wrap: balance; }
/* "What your elf will do" on wide screens: Play and the arrival side by side, then Build-up across the full width with
   its before / after beside the words (three equal columns left two of them mostly empty beside the tall wipe) */
@media (min-width: 900px) {
  .does-grid:has(.does-build) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .does-grid:has(.does-build) .does-build { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) 250px; grid-template-rows: 1fr auto auto auto 1fr; column-gap: 40px; padding: 26px 34px; }
  .does-build > .does-kicker { grid-row: 2; } .does-build > h3 { grid-row: 3; } .does-build > p:not(.does-kicker) { grid-row: 4; max-width: 46ch; }
  .does-build > * { grid-column: 1; }
  .does-build > .ba { grid-column: 2; grid-row: 1 / -1; margin: 0; }
  .does-build h3 { font-size: 2rem; }
}
.ba { box-sizing: content-box; width: min(100% - 8px, 242px); }
@media (min-width: 900px) { .does-grid:has(.does-build) .does-build { grid-template-columns: minmax(0, 520px) 250px; justify-content: center; column-gap: 64px; } }

/* ---------- Play review round 2 + pop round 3 (25 Oct 2026) ---------- */
.badge-build[hidden] { display: none; }
/* /ideas between 1 and 24 December: tonight's guide in the grid (ideas.js, from the visitor's own date) */
.tonight-tag { position: absolute; z-index: 2; left: 8px; bottom: 8px; padding: .36rem .66rem; border-radius: 999px; font: 800 .72rem/1 var(--body); letter-spacing: .12em;
  text-transform: uppercase; color: #1b1406; background: var(--gold); box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 8px 18px -6px rgba(0, 0, 0, .6); }
.idea.is-tonight .idea-media { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(242, 196, 109, .45), 0 18px 34px -16px rgba(31, 19, 54, .7); }
/* "You need": copy the list, print the guide */
.need-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.need-tools[hidden] { display: none; }
.need-tool { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .45rem .95rem; border-radius: 999px; cursor: pointer; font: 700 .92rem/1.2 var(--body);
  color: var(--ink); background: #fff; border: 2px solid rgba(31, 19, 54, .16); }
.need-tool:hover { border-color: var(--fam, var(--candy)); }
.need-tool:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.need-tool .ico { width: 18px; height: 18px; color: var(--fam, var(--candy)); flex: none; }
/* a guide on paper: the title, the picture, what you need, the steps and the tip (no menus, videos or buttons) */
@media print {
  @page { margin: 14mm; }
  html, body { background: #fff !important; color: #000 !important; }
  .site-head, .site-foot, .skip, .guide-bar, .ideas-cta, .guide-more, .guide-does, .show-tabs, .loop-play, .guide-jump, .crumbs, .need-tools,
  .need-hint, .need-burst, #show-build, video { display: none !important; }
  .guide-hero, .guide-setup { background: none !important; padding: 0 !important; color: #000 !important; }
  .guide-hero::before, .guide-hero::after, .guide-setup::before, .guide-setup::after { display: none !important; }
  .guide-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) 5cm !important; gap: 8mm !important; align-items: start !important; }
  .guide-copy { display: block !important; }
  .guide-show { order: 0 !important; margin: 0 !important; }
  .show-phone { width: 5cm !important; }
  .show-media { transform: none !important; box-shadow: none !important; border: 1px solid #999 !important; }
  .show-phone figcaption, .show-phone figcaption b { color: #000 !important; }
  .guide-hero h1, .guide-hero .hl, .guide-lede, .guide-facts li, .guide-facts b, .eyebrow { color: #000 !important; }
  .guide-facts li { background: none !important; border: 1px solid #999 !important; }
  .setup-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8mm !important; margin-top: 6mm !important; }
  .need-card, .steps-card { box-shadow: none !important; border: 1px solid #999 !important; break-inside: avoid; }
  .js [data-reveal], [data-reveal] { opacity: 1 !important; transform: none !important; }
}
/* the guide's buttons: "Set it up" and "Save to Pinterest" side by side (pop round 3) */
.guide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pin-save .ico { width: 20px; height: 20px; color: var(--gold); }
@media print { .guide-actions { display: none !important; } }