/* KidBD home, party layer: balloons, bunting, moment photo, button polish. Overrides only. */
/* gates-keep #327 (tokens): most literal colours here and in index.html's
   scene rules paint ILLUSTRATIONS drawn in CSS (the room, the TV case and
   feet, the phone on the screen, balloons, bunting flags), where each shade is
   a picture's shading, not a UI colour. The UI-chrome subset (.btn.plain:hover,
   the hero CTA shine, .step, .sa-*, .way) is a real Law 11 debt, filed as #329. */
.bln-field{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.bln{position:absolute; display:block; width:var(--w,64px); aspect-ratio:.84; border-radius:50% 50% 48% 48% / 58% 58% 42% 42%;
  background:
    radial-gradient(18% 12% at 30% 22%, rgba(255,255,255,.95), rgba(255,255,255,0) 100%),
    radial-gradient(40% 32% at 34% 28%, rgba(255,255,255,.55), rgba(255,255,255,0) 72%),
    radial-gradient(30% 22% at 72% 80%, color-mix(in srgb, var(--c) 55%, #fff) 0%, transparent 100%),
    radial-gradient(95% 95% at 38% 32%, color-mix(in srgb, var(--c) 82%, #fff) 0%, var(--c) 40%, color-mix(in srgb, var(--c) 58%, #1b1238) 100%);
  box-shadow:inset -9px -12px 20px color-mix(in srgb, var(--c) 45%, #1b1238), inset 5px 6px 12px rgba(255,255,255,.22);
  filter:drop-shadow(0 14px 12px rgba(27,18,56,.22)) drop-shadow(0 2px 2px rgba(27,18,56,.15));
  animation:blnfloat var(--d,9s) ease-in-out var(--dl,0s) infinite alternate; transform-origin:50% 120%; transform-style:preserve-3d}
.bln::before{content:""; position:absolute; left:50%; bottom:-7px; width:13px; height:10px; translate:-50% 0;
  background:linear-gradient(90deg, color-mix(in srgb, var(--c) 55%, #1b1238), color-mix(in srgb, var(--c) 85%, #fff), color-mix(in srgb, var(--c) 55%, #1b1238));
  clip-path:polygon(50% 0, 100% 100%, 0 100%)}
.bln::after{content:""; position:absolute; left:50%; top:100%; width:calc(var(--w,64px) * .5); height:calc(var(--w,64px) * 1.7); margin-top:3px; translate:-25% 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 100' preserveAspectRatio='none'%3E%3Cpath d='M5 0 C 13 16, -3 32, 5 50 S 13 84, 5 100' fill='none' stroke='%232a2350' stroke-opacity='.45' stroke-width='1.3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  -webkit-mask:linear-gradient(#000 40%, transparent); mask:linear-gradient(#000 40%, transparent)}
@keyframes blnfloat{0%{transform:translateY(0) rotate(-4deg)} 100%{transform:translateY(-22px) rotate(5deg)}}
.bln.red{--c:#ff5a5f} .bln.sun{--c:#ffce3a} .bln.sky{--c:#3aa0ff} .bln.pink{--c:#ff77c2} .bln.mint{--c:#1fc08a} .bln.grape{--c:#6a49f2}

.hero > .wrap, .blk > .wrap{position:relative; z-index:1}
#plan .bln.b1{left:-8px; top:68%; --w:52px; --d:8s}
#plan .bln.b2{left:2.5%; top:82%; --w:38px; --d:10s; --dl:-3s}
#plan .bln.b3{right:3%; top:12%; --w:66px; --d:9s; --dl:-1s}
#plan .bln.b4{right:8%; top:5%; --w:40px; --d:11s; --dl:-5s}
#plan .bln.b5{left:44%; top:6%; --w:34px; --d:12s; --dl:-2s; opacity:.8}
@media (max-width:1100px){ #plan .bln.b1,#plan .bln.b2,#plan .bln.b5{display:none} }
@media (max-width:900px){ #plan .bln{--w:38px !important} }

/* bunting across the top of the hero */
.bunting{position:absolute; left:0; right:0; top:0; z-index:0; height:30px; pointer-events:none;
  display:flex; justify-content:space-between; padding-inline:1vw}
/* borderless-keep: the string the flags hang from; it draws a picture, not a rim (#327) */
.bunting::before{--borderless-keep:1; content:""; position:absolute; left:0; right:0; top:0; height:2px; background:color-mix(in srgb, #2a2350 22%, transparent)}
.bunting i{display:block; width:clamp(18px,2vw,28px); height:clamp(20px,2.2vw,30px); clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:50% 0; animation:flag 3.4s ease-in-out infinite alternate}
.bunting i:nth-child(6n+1){background:#ff5a5f} .bunting i:nth-child(6n+2){background:#ffce3a; animation-delay:-.6s}
.bunting i:nth-child(6n+3){background:#3aa0ff; animation-delay:-1.2s} .bunting i:nth-child(6n+4){background:#ff77c2; animation-delay:-1.8s}
.bunting i:nth-child(6n+5){background:#1fc08a; animation-delay:-2.4s} .bunting i:nth-child(6n){background:#6a49f2; animation-delay:-3s}
@keyframes flag{from{rotate:-5deg} to{rotate:5deg}}
@media (max-width:640px){ .bunting i:nth-child(n+11){display:none} }

/* moment: birthday kid photo behind */
#moment{position:relative; overflow:hidden; isolation:isolate}
#moment .mbg{position:absolute; inset:0; z-index:0; pointer-events:none}
#moment .mbg-scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(42,35,80,.94) 0%, rgba(42,35,80,.82) 45%, rgba(42,35,80,.55) 100%),
             radial-gradient(60% 60% at 75% 50%, rgba(255,164,31,.22), transparent 70%)}
#moment > .wrap{position:relative; z-index:2; pointer-events:none}
#moment > .wrap a, #moment > .wrap button{pointer-events:auto}
#moment .bln-field{z-index:1}
#moment .bln{opacity:.9}
/* balloons released from the floor of the viewport, drifting up across the whole page */
/* balloons drifting up the WHOLE page (not pinned to the viewport). The layer is
   not a stacking context, so each balloon's z-index 0 interleaves with main#top's own
   stack: every sky balloon slips behind the content (.wrap is z-index 1) and shows in
   the gaps and section margins. The .ov/.un classes in the markup no longer differ:
   .ov used to pass OVER the cards and covered .plist rows, "Party games", a library
   pill and a count figure (landing-polish 1.81:1 on #inside .ptile.dark .plist li). */
main#top{position:relative}
/* gates-keep #327 (copy, ambition): gates reads .bln-sky as a 7755px "band of
   air". It is not a band: an aria-hidden, pointer-events:none layer at inset:0
   behind main, carrying the rising balloons over the whole page. The words sit
   in the sections above it, which gates scores on their own. */
.bln-sky{position:absolute; inset:0; pointer-events:none; overflow:hidden}
/* The rise runs on `translate`, not `top`: a `top` animation is a layout of the
   whole page on every frame, forever. `translate` composes before the sway's
   `transform`, so the sway still happens around the balloon's own knot.
   --sky-h is the layer's height in px, kept by index.page.js (a % translate
   reads the balloon's own box, not the page). Travel 106% = top:100% to -6%. */
.bln-sky .bln{bottom:auto; top:100%; z-index:0; opacity:0; will-change:translate,transform,opacity;
  animation:blnrise var(--d,60s) linear var(--dl,0s) infinite, blnsway var(--sw,7s) ease-in-out var(--dl,0s) infinite alternate}
/* Hidden until index.page.js has written --sky-h. Before that the rise reads
   the 100vh fallback, so the balloon near the bottom of the first screen sat
   at one height under the preloader and JUMPED 840px when the real one landed:
   0.007 of layout shift at 1440, the whole of the page's CLS (queue #244).
   A balloon that appears is not a shift. With scripts off, a <noscript> rule
   after this sheet shows them on the fallback as before. */
.bln-sky:not(.sized) .bln{visibility:hidden}
@keyframes blnrise{
  0%{translate:0 0; opacity:0}
  2%{opacity:1}
  97%{opacity:1}
  100%{translate:0 calc(var(--sky-h, 100vh) * -1.06); opacity:0}
}
@keyframes blnsway{
  0%{transform:translateX(calc(var(--sx,16px) * -1)) rotate(-6deg) rotateY(-18deg)}
  100%{transform:translateX(var(--sx,16px)) rotate(6deg) rotateY(18deg)}
}
.bln-sky .r1{left:3%;  --w:58px; --d:64s; --dl:-4s;  --sx:26px; --sw:6s}
.bln-sky .r2{left:11%; --w:40px; --d:78s; --dl:-40s; --sx:-18px; --sw:8s}
.bln-sky .r3{left:24%; --w:50px; --d:70s; --dl:-22s; --sx:22px; --sw:7s}
.bln-sky .r4{left:37%; --w:36px; --d:86s; --dl:-60s; --sx:-20px; --sw:9s}
.bln-sky .r5{left:52%; --w:54px; --d:68s; --dl:-12s; --sx:18px; --sw:6.5s}
.bln-sky .r6{left:66%; --w:42px; --d:80s; --dl:-50s; --sx:-24px; --sw:8.5s}
.bln-sky .r7{left:78%; --w:60px; --d:62s; --dl:-32s; --sx:20px; --sw:7.5s}
.bln-sky .r8{left:89%; --w:48px; --d:74s; --dl:-8s;  --sx:-16px; --sw:6s}
.bln-sky .r9{left:95%; --w:38px; --d:84s; --dl:-70s; --sx:22px; --sw:9s}
.bln-sky .r10{left:45%; --w:32px; --d:90s; --dl:-28s; --sx:-22px; --sw:10s}
.bln-sky .r11{left:17%; --w:46px; --d:72s; --dl:-54s; --sx:20px; --sw:7s}
.bln-sky .r12{left:72%; --w:34px; --d:88s; --dl:-18s; --sx:-18px; --sw:8s}
@media (max-width:700px){ .bln-sky .r2,.bln-sky .r4,.bln-sky .r6,.bln-sky .r10,.bln-sky .r12{display:none} .bln-sky .bln{--w:36px !important} }
@media (prefers-reduced-motion:reduce){ .bln-sky{display:none} }

/* finale balloons */
.finale{position:relative}
.finale > *:not(.bln-field){position:relative; z-index:1}
.finale .bln.f1{left:22px; top:22px; --w:40px}
.finale .bln.f2{right:26px; top:18px; --w:48px; --dl:-3s}
.finale .bln.f3{right:84px; top:40px; --w:30px; --dl:-6s}
/* On a phone the heading and the line under it run the card's full width, so
   the one balloon left there floated behind "before" at 2.4:1. It rises from
   the bottom corner instead, beside the short centred "Takes about five
   minutes." line, clear of every line of copy from 320 to 640. */
@media (max-width:640px){ .finale .bln.f1,.finale .bln.f3{display:none}
  .finale .bln.f2{top:auto; bottom:10px; right:12px; --w:32px} }

/* buttons: lift + gleam */
.btn{position:relative; overflow:hidden; transition:transform 200ms cubic-bezier(.2,1.4,.4,1), box-shadow 200ms, background-color 200ms}
.btn:hover{transform:translate(-1px,-3px)}
.btn::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%); translate:-130% 0}
.btn:hover::after{transition:translate 700ms ease; translate:130% 0}
.hero-cta .btn{animation:ctapulse 2.6s ease-in-out infinite}
@keyframes ctapulse{50%{box-shadow:0 0 0 10px rgba(255,164,31,.18), 6px 8px 0 #2a2350}}


@media (prefers-reduced-motion:reduce){
  .bln,.bunting i,.hero-cta .btn{animation:none}
}

#plan{position:relative; overflow:hidden}
#plan > .wrap{position:relative; z-index:1}
#plan .bln.b1{top:30%} #plan .bln.b2{top:48%}

#moment .mbg{overflow:hidden}
/* self-hosted (Unsplash photo-1608790672275, Unsplash License): the page CSP is img-src 'self'.
   A lazy <img>, not a CSS background: a background on a box in the stylesheet
   is fetched before `load` whatever its distance from the fold, and on a 3G
   phone it took bandwidth from the scripts the preloader waits on. 360x540
   (23KB, was 733x1100 at 91KB) because nobody can see the difference under
   a 14px blur. Sized by hand: an absolutely placed <img> keeps its own width
   with both insets set, and the global img rule caps it at 100%. */
#moment .mbg-img{position:absolute; top:-40px; left:-40px;
  width:calc(100% + 80px); height:calc(100% + 80px); max-width:none;
  object-fit:cover; object-position:center 40%;
  filter:blur(14px) saturate(1.15); transform:scale(1.05)}
/* The lede sits between 38% and 63% of the band at 1440, where the scrim was
   down to .72 and the photo came through at 5.4:1 against a 7:1 bar (queue
   #234, landing-cro 6). Held at .84 to the middle now, and the photo keeps the
   right third, where the cake is. Under 900px the band STACKS (.mgrid), the copy runs the
   full width on top and the cake sits under it, so the scrim runs top to
   bottom there instead of across: it read 3.1:1 at the right end of the line. */
#moment .mbg-scrim{background:linear-gradient(90deg, rgba(42,35,80,.92) 0%, rgba(42,35,80,.84) 50%, rgba(42,35,80,.5) 100%),
  radial-gradient(60% 60% at 75% 50%, rgba(255,164,31,.22), transparent 70%)}
@media (max-width:900px){
  #moment .mbg-scrim{background:linear-gradient(180deg, rgba(42,35,80,.92) 0%, rgba(42,35,80,.88) 52%, rgba(42,35,80,.6) 100%),
    radial-gradient(70% 45% at 50% 78%, rgba(255,164,31,.22), transparent 70%)}
}
#moment .mbg-credit{position:absolute; left:14px; bottom:10px; z-index:3; margin:0; font-size:11px; color:rgba(255,253,244,.72)}
#moment .mbg-credit a{color:rgba(255,253,244,.9); text-decoration:underline}

main#top{position:relative; z-index:1}
#moment.tint.tint{padding-block:calc(var(--gap-in) * 1.35)}

/* planner cards: bolder, tinted, easier to read */
.kits{gap:clamp(12px,1.5vw,18px)}
.kit{position:relative; overflow:hidden; gap:9px; padding:clamp(18px,2vw,24px);
  background:linear-gradient(160deg, color-mix(in srgb, var(--kink) 11%, var(--su)) 0%, var(--su) 62%);
  box-shadow:4px 5px 0 var(--ink)}
.kit::before{display:none}
.kit:hover{transform:translate(-2px,-4px) rotate(-.4deg); box-shadow:7px 9px 0 var(--ink)}
.kit .kn{color:var(--kink); font-size:clamp(22px,2.3vw,28px)}
.kit .ic svg{width:30px; height:30px; transition:transform .25s cubic-bezier(.2,1.4,.4,1)}
.kit:hover .ic svg{transform:scale(1.15) rotate(-6deg)}
.kit h3{font-size:clamp(18px,1.5vw,20.5px); color:var(--ink)}
.kit p{font-size:clamp(14px,1.05vw,15px); color:var(--ink); opacity:.82; line-height:1.5}
@media(max-width:640px){ .kit h3{font-size:17px} .kit p{font-size:14px} }

/* "The afternoon you paid for": picture left, words right (desktop) */
@media(min-width:900px){
  .problem > .wrap{grid-template-columns:auto minmax(0,1fr) auto}
  .problem > .wrap > .planhead{grid-column:1 / -1}
  .problem > .wrap > .probart{grid-column:1; grid-row:3 / span 3; margin:0 clamp(8px,1.5vw,24px) 0 0}
  .problem > .wrap > .prob-h,
  .problem > .wrap > .prob-lede,
  .problem > .wrap > .turnwrap{grid-column:2 / 4}
}

/* "Build it. Send it. Watch them play." */
.how-h{max-width:none; font-size:clamp(34px,5.2vw,66px); line-height:1.02; letter-spacing:-.025em; display:flex; flex-wrap:wrap; column-gap:.28em; row-gap:.08em}
.how-h .hw{position:relative; display:inline-block; white-space:nowrap}
.how-h .hw1{color:var(--ink)}
/* "Launch it." - the moment it goes up: ink word with a little rocket trail under it */
.how-h .hw2{color:var(--grape); padding-bottom:.06em}
.how-h .hw2::after{content:""; position:absolute; left:0; right:.1em; bottom:-.02em; height:.13em; border-radius:99px;
  background:linear-gradient(90deg, transparent, #ff9f1c 25%, #ffce3a 60%, #ff5a5f); opacity:.9}
/* "Watch them love it." - the payoff: white on a tilted grape-to-pink sticker */
.how-h .hw3{color:#fff; padding:.02em .22em .08em; margin-inline:-.04em; isolation:isolate; text-shadow:0 .05em 0 rgba(42,35,80,.35)}
.how-h .hw3::before{content:""; position:absolute; inset:.06em 0 0; z-index:-1; border-radius:.24em;
  background:linear-gradient(100deg, #6a49f2, #b24cf0 55%, #ff5c9a); box-shadow:.08em .1em 0 var(--ink); transform:rotate(-1.8deg)}
@media (prefers-reduced-motion:no-preference){
  .how-h .hw{animation:howin 700ms cubic-bezier(.2,1.4,.4,1) both; animation-timeline:view(); animation-range:entry 10% cover 30%}
  .how-h .hw2{animation-delay:120ms} .how-h .hw3{animation-delay:240ms}
}
/* Law 14 (#327): a scroll-linked range must read parked at its start, so the
   words only settle into place; they never sit invisible at opacity 0. */
@keyframes howin{from{transform:rotate(-3deg)} to{transform:none}}

/* hero: less air above, nav reads as a floating glass bar laid over the banner */
.hero{padding-top:calc(var(--head-h) + var(--hero-air) * .35) !important}
/* Siavash, 2026-10-02: "proper space with the header" on the phone, where
   .35 of the air left the callout 9px under the nav's painted bottom; +6px
   made it 28px, and the same day "reduce the top space with header": 14px. */
@media(max-width:640px){.hero{padding-top:calc(var(--head-h) + var(--hero-air) - 8px) !important}}
header{padding-top:0 !important; top:0 !important; margin-top:0 !important}
header{background:transparent !important; position:fixed !important; top:0 !important}
header{padding-top:10px !important}
header .nav{background:color-mix(in srgb, var(--su) 88%, transparent) !important; box-shadow:var(--shadow-sm) !important; -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%)}

/* ---- library band: deep stage ground, fine grid, one warm spotlight ---- */
.band{background:linear-gradient(180deg, #1a1440 0%, #241a5c 55%, #2c1f6e 100%) !important; overflow:hidden}
.band::before{background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) !important;
  background-size:44px 44px !important; -webkit-mask:radial-gradient(80% 70% at 30% 20%, #000 20%, transparent 75%); mask:radial-gradient(80% 70% at 30% 20%, #000 20%, transparent 75%)}
.band::after{background:
  radial-gradient(40% 60% at 18% 0%, rgba(178,76,240,.38), transparent 70%),
  radial-gradient(36% 50% at 92% 18%, rgba(58,160,255,.22), transparent 70%),
  radial-gradient(60% 45% at 50% 100%, rgba(255,164,31,.16), transparent 70%),
  linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent) top/100% 1px no-repeat,
  linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent) bottom/100% 1px no-repeat !important}
.band .bhead{max-width:none; gap:clamp(12px,1.4vw,16px)}
.band .bhead h2{max-width:18ch; letter-spacing:-.02em}
/* Law 2, no gradient text (#327): one solid warm token on the night band */
.band .bhead h2 em{font-style:normal; color:var(--sun)}
.band .bnum{display:flex; flex-wrap:wrap; gap:10px; color:var(--lav-hi)}
.band .bstat{display:inline-flex; align-items:baseline; gap:.4em; padding:8px 16px; border-radius:14px; font-size:clamp(14px,1.5vw,17px);
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.08)}
.band .bstat b{font-size:1.35em; color:var(--sun)}

/* planner cards: illustrated, animated icons */
.kit .ic{width:64px; height:64px}
.kit .ic svg.kv{width:64px; height:64px; overflow:visible}
.kit:hover .ic svg.kv{transform:none}
.kv *{transform-box:fill-box; transform-origin:center}
/* An animation INSIDE an svg never reaches the compositor: each one is a
   layout of the page per frame, on screen or not. index.page.js marks a host
   .still while it is off screen, so they only run where they can be seen. */
.kv.still, .kv.still *, .mcake.still *{animation-play-state:paused !important}
.kv .o{fill:none; stroke:var(--ink); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.kv .f{fill:color-mix(in srgb, var(--kink) 22%, #fff); stroke:var(--ink); stroke-width:2.6; stroke-linejoin:round}
.kv .f2{fill:color-mix(in srgb, var(--kink) 45%, #fff); stroke:var(--ink); stroke-width:2.6; stroke-linejoin:round}
.kv .w{fill:#fff; stroke:var(--ink); stroke-width:2.6; stroke-linejoin:round}
.kv .k{fill:var(--kink); stroke:var(--ink); stroke-width:2.2; stroke-linejoin:round}
.kv text{font-family:var(--disp); font-weight:700; font-size:15px; fill:var(--ink); text-anchor:middle}
.kit:hover .kv *{animation-duration:calc(var(--kd, 1) * 1s)}

.g-a{animation:kv-pop 2.4s cubic-bezier(.3,1.6,.5,1) infinite}
@keyframes kv-pop{0%,15%{transform:scale(0)} 30%,85%{transform:scale(1)} 100%{transform:scale(0)}}
.g-l{stroke-dasharray:16; animation:kv-draw 2.4s ease-out infinite}
@keyframes kv-draw{0%,20%{stroke-dashoffset:16} 40%,85%{stroke-dashoffset:0} 100%{stroke-dashoffset:16}}

.i-card{animation:kv-rise 2.6s cubic-bezier(.4,1.5,.5,1) infinite}
@keyframes kv-rise{0%,15%{transform:translateY(12px)} 45%,80%{transform:translateY(-4px)} 100%{transform:translateY(12px)}}
.i-heart{animation:kv-beat 1.3s ease-in-out infinite}
@keyframes kv-beat{0%,100%{transform:scale(1)} 20%{transform:scale(1.25)} 40%{transform:scale(1)} 60%{transform:scale(1.15)}}

.s-cart{animation:kv-roll 2.4s ease-in-out infinite}
@keyframes kv-roll{0%,100%{transform:translateX(-3px) rotate(-2deg)} 50%{transform:translateX(3px) rotate(2deg)}}
.s-it{animation:kv-hop 1.2s cubic-bezier(.3,1.6,.5,1) infinite}
@keyframes kv-hop{0%,100%{transform:translateY(0)} 40%{transform:translateY(-6px) rotate(-10deg)}}
.s-wh{stroke-dasharray:4 3; animation:kv-spin 1s linear infinite}
@keyframes kv-spin{to{transform:rotate(360deg)}}

.c-body{animation:kv-ring 3s ease-in-out infinite}
@keyframes kv-ring{0%,80%,100%{transform:none} 84%{transform:rotate(-8deg)} 88%{transform:rotate(8deg)} 92%{transform:rotate(-6deg)} 96%{transform:rotate(4deg)}}
.c-m{transform-box:view-box; transform-origin:32px 35px; animation:kv-spin 3s linear infinite}
.c-h{transform-box:view-box; transform-origin:32px 35px; animation:kv-spin 36s linear infinite}

.g-star{animation:kv-wob 2.2s ease-in-out infinite}
@keyframes kv-wob{0%,100%{transform:rotate(-8deg) scale(1)} 50%{transform:rotate(8deg) scale(1.08)}}
.g-sp{animation:kv-twk 1.8s ease-in-out infinite}
@keyframes kv-twk{0%,100%{opacity:0; transform:scale(.3) rotate(0)} 50%{opacity:1; transform:scale(1) rotate(45deg)}}

.n-flip{animation:kv-flip 1s ease-in-out infinite}
@keyframes kv-flip{0%,70%{transform:none} 85%{transform:scaleY(.1)} 100%{transform:none}}
.n-t{opacity:0; animation:kv-num 3s steps(1) infinite}
@keyframes kv-num{0%{opacity:1} 33.33%,100%{opacity:0}}

.p-lens{animation:kv-iris 2.6s ease-in-out infinite}
@keyframes kv-iris{0%,70%,100%{transform:scale(1)} 80%{transform:scale(.4)} 90%{transform:scale(1.15)}}
.p-flash{animation:kv-flash 2.6s ease-out infinite}
@keyframes kv-flash{0%,72%{opacity:0; transform:scale(.4)} 80%{opacity:1; transform:scale(1.2)} 100%{opacity:0; transform:scale(1)}}

@media (prefers-reduced-motion:reduce){ .kv *{animation:none !important} .n-t{opacity:0} .n-t:first-of-type{opacity:1} .g-sp{opacity:1} }

/* the gift sticker: under the television, right of the planner tablet */
.tvset .gift-tag{position:absolute; left:50%; top:calc(100% + clamp(14px,2.4vw,34px)); margin:0; transform:translateX(-50%); z-index:5; white-space:nowrap}
.gift-tag-m{display:none; margin:14px 0 0; text-align:center}
@media(max-width:720px){
  .tvset .gift-tag{display:none}
  .gift-tag-m{display:block}
}
@media(max-width:640px){ .hero > .wrap > .scene .gift-tag-m{position:relative; z-index:8} }

/* tv tags: tinted candy pills - colour-filled, solid icon coin, glossy top, soft coloured lift */
.tvtag{--tc:var(--mint); gap:10px !important; padding:6px 18px 6px 6px !important; color:var(--ink);
  background:linear-gradient(180deg, color-mix(in srgb, var(--tc) 12%, #fff), color-mix(in srgb, var(--tc) 24%, #fff)) !important;
  /* Law 1: the glossy top line and the 1.5px tinted ring were rims (landing-cro 5b,
     queue #234). The pill separates by its tinted fill and its coloured lift. */
  box-shadow:0 8px 18px -8px color-mix(in srgb, var(--tc) 70%, transparent) !important;
  font-weight:700 !important; letter-spacing:.005em;
  transition:transform .25s cubic-bezier(.2,1.4,.4,1), box-shadow .25s ease;
  animation:tt-in .6s cubic-bezier(.3,1.5,.5,1) both}
.tvtag.b{--tc:var(--red); animation-delay:.08s}
.tvtag.c{--tc:var(--grape); animation-delay:.16s}
.tvtag.d{--tc:var(--sky); animation-delay:.24s}
.tvtag svg{box-sizing:content-box; width:16px !important; height:16px !important; padding:8px; border-radius:50%;
  color:#fff !important; background:var(--tc); box-shadow:inset 0 -2px 0 rgb(0 0 0 / .14), inset 0 2px 0 rgb(255 255 255 / .35);
  transition:transform .35s cubic-bezier(.2,1.6,.4,1)}
.tvtag:hover{transform:translateY(-3px); box-shadow:0 14px 24px -10px color-mix(in srgb, var(--tc) 80%, transparent) !important}
.tvtag:hover svg{transform:rotate(-14deg) scale(1.1)}
@keyframes tt-in{from{opacity:0; transform:translateY(10px) scale(.94)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .tvtag{animation:none} }
@media (max-width:640px){ .tvtag{padding:4px 12px 4px 4px !important; gap:7px !important} .tvtag svg{padding:6px; width:14px !important; height:14px !important} }

/* a child's top margin was collapsing through main and pushing the whole page 46px down */
body{display:flow-root} main#top{display:flow-root} #dc-root, .sc-host{display:flow-root}
.hero{margin-top:0 !important}

/* the television now wears the play page's look: deep aurora ground, a frosted
   glass card, a gradient chip, a glowing title and the candy gold button */
.tvscreen{background:#1a0b33}
.tvscreen::before{content:""; position:absolute; inset:-20%; z-index:0; pointer-events:none;
  background:radial-gradient(40% 50% at 20% 25%, rgb(255 119 194 / .45), transparent 70%),
    radial-gradient(45% 55% at 85% 30%, rgb(106 73 242 / .55), transparent 70%),
    radial-gradient(50% 50% at 60% 95%, rgb(58 160 255 / .35), transparent 70%);
  animation:tv-aur 12s ease-in-out infinite alternate}
@keyframes tv-aur{to{transform:translate(4%,-3%) rotate(6deg)}}
.tvscreen .phone{position:relative; z-index:1; background:transparent !important; background-image:none !important}
.tvscreen .phone::after{content:""; position:absolute; inset:max(6px,2.2cqw); z-index:-1; border-radius:max(10px,3.2cqw);
  background:linear-gradient(160deg, rgb(62 33 110 / .9), rgb(28 13 56 / .9));
  box-shadow:0 12px 30px rgb(0 0 0 / .35);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.tvscreen .phone .pcat{background:linear-gradient(90deg,#ff77c2,#ffc53d) !important; color:#1a0f24; font-weight:800}
/* Law 2, no gradient text (#327): the shine sweep was background-clip:text */
.tvscreen .phone .pt{color:#fff}
.tvscreen .phone .pico{filter:drop-shadow(0 4px 10px rgb(255 197 61 / .45))}
.tvscreen .phone .pbtn{background:linear-gradient(180deg,#ffe08a,#ffc53d) !important; color:#1a0f24 !important;
  box-shadow:0 8px 20px rgb(255 197 61 / .35)}
.tvscreen .phone .pbar{background:rgb(255 255 255 / .12)}
.tvscreen .phone .pbar i{background:linear-gradient(90deg,#ff77c2,#ffc53d) !important}
@media (prefers-reduced-motion:reduce){ .tvscreen::before, .tvscreen .phone .pt{animation:none} }

/* section headlines: a highlighter swipe under the words, tight display tracking, a soft ink lift */
.sec-h, .mhead{letter-spacing:-.028em !important; text-shadow:0 2px 0 rgb(255 255 255 / .6);
  text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--sun) 80%, transparent);
  text-decoration-thickness:.34em; text-underline-offset:-.2em; text-decoration-skip-ink:none}
#moment .mhead{text-shadow:none; text-decoration-color:color-mix(in srgb, var(--sun) 55%, transparent)}
.how-h .hw{text-decoration:inherit}
.prob-h i{font-style:normal}

/* How it works headline, calmer: all ink, one accent - a sun marker under the payoff */
.how-h{text-decoration:none !important}
.how-h .hw{text-decoration:none !important; color:var(--ink) !important}
.how-h .hw2{color:color-mix(in srgb, var(--ink) 55%, var(--bg)) !important}
.how-h .hw2::after{display:none}
.how-h .hw3{padding:0 .04em; margin-inline:0; text-shadow:none !important; z-index:0}
.how-h .hw3::before{inset:auto -.06em .06em; height:.36em; border-radius:.12em; background:var(--sun) !important; box-shadow:none !important; transform:rotate(-1deg); z-index:-1}

.band .bnum b[hidden]{display:none}

/* Mobile hero, 2026-09-22: the chips stand on the floor beside the planner
   (they used to overflow their box and run under the gift tag); the gift line
   sits under the room at full width. "No app to install" is already in the CTA. */
@media (max-width:640px){
  .hero > .wrap > .scene{display:flex !important; flex-direction:column; align-items:stretch}
  .hero > .wrap > .scene > .room{order:1}
  .hero > .wrap > .scene > .tvtags{order:2; position:relative !important; inset:auto !important; width:auto !important; aspect-ratio:auto !important;
    margin:-162px 0 0 !important; padding:0 16px 0 calc(34% + 12px) !important; z-index:7;
    display:grid !important; grid-template-columns:minmax(0,1fr) !important; grid-template-rows:none !important; gap:8px !important}
  .hero > .wrap > .scene .tvtag{min-height:44px !important; height:44px; width:100%; justify-content:flex-start !important; font-size:13.5px !important}
  .hero > .wrap > .scene .tvtag.d{display:none !important}
  .hero > .wrap > .scene > .gift-tag-m{order:3; position:relative; z-index:8; margin:26px 16px 0 !important; text-align:center}
  .hero > .wrap > .scene > .gift-tag-m > span{white-space:normal !important; text-align:left}
}

/* Hero TV screen, mobile: the 16:9 box clipped "Let's go" whenever a title or
   lede ran to two lines. On phones the screen grows to its content, with a
   floor that fits the tallest challenge so it does not jump between them. */
@media (max-width:640px){
  .hero .tvscreen{aspect-ratio:auto !important; height:auto !important}
  .hero .phone{height:auto !important; min-height:clamp(214px,60vw,250px); position:relative !important; inset:auto !important; align-content:start}
  .hero .phone .pbtn{align-self:end}
  .hero .phone .pdial{align-self:start}
}



/* Hero chips, tablet/desktop: the gift line was absolutely placed under the TV
   and the chips spread across it. The line now sits in flow under the TV feet
   and the chips form a tidy 2x2 grid below it, clear of the planner. */
@media (min-width:721px){
  .hero .tvset .gift-tag{position:static !important; inset:auto !important; transform:none !important; width:auto !important;
    margin:18px 0 14px !important; display:flex !important; justify-content:center; pointer-events:none}
}
@media (min-width:641px){
  .hero > .wrap > .scene .tvtags{display:grid !important; grid-template-columns:repeat(2,max-content) !important;
    justify-content:start !important; align-content:start; gap:10px 12px !important}
  .hero > .wrap > .scene .tvtag{justify-content:flex-start !important}
}

#moment .mhead{text-decoration:none !important}

/* 2026-09-23: quieter dot grid in the plan section; the nav bar is near-solid. */
#plan.problem::after{opacity:.3 !important}
header nav.nav{background-color:rgb(255 253 244 / .97) !important}
#plan .beat > b{text-transform:uppercase;letter-spacing:.02em}
.band .bnum > b{display:none !important}

/* 2026-09-23: the hero TV's screen is 16:9 at LEAST, never a clip. A long
   challenge grows the screen instead of pressing "Let's go" into the bezel,
   so the button always keeps the screen's bottom padding under it. */
.hero .tvscreen{aspect-ratio:auto !important; height:auto !important}
.hero .phone{position:relative !important; inset:auto !important; height:auto !important;
  aspect-ratio:16/9; overflow:visible !important; align-content:start}
.hero-cta a.btn{border-radius:18px !important}

/* 2026-09-23: fifth chip, Gift reveal, on top in sun. */
.tvtags .tvtag.e{background-image:linear-gradient(#fff4cf,#ffe79a) !important}
.tvtags .tvtag.e svg{background-color:#f5a800 !important;color:#fff}
@media (max-width:640px){
  .hero > .wrap > .scene > .tvtags{margin-top:-214px !important}
}
.hero .tvtags .tvtag.d{display:none !important}
@media (min-width:641px){
  .hero > .wrap > .scene .tvtags{grid-template-columns:repeat(2,minmax(0,1fr)) !important;justify-content:stretch !important}
  .hero > .wrap > .scene .tvtags .tvtag{width:100%}
}
.tvtags .tvtag.e{box-shadow:0 8px 18px -8px rgb(245 168 0 / .7) !important}

/* 2026-09-23, Law 16: the chip icons paint bare, in the chip's own tone. */
.tvtags .tvtag{padding-left:16px !important}
.tvtags .tvtag svg, .tvtags .tvtag.e svg{padding:0; width:20px !important; height:20px !important;
  background:none !important; box-shadow:none; color:var(--tc) !important}
.tvtags .tvtag.e svg{color:#b87a00 !important}
@media (max-width:640px){ .tvtags .tvtag{padding-left:12px !important} .tvtags .tvtag svg{width:17px !important; height:17px !important} }