/* The Fun Place — base styles. Tokens from /design/brand-tokens.css (no raw hex).
   Full-bleed everywhere; text is --ink/white; rainbow is for surfaces & motion. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--surface);
  line-height: 1.6;
  overflow-x: hidden;
}
body[data-mood="festive"] { background-image: var(--festive-sky); background-attachment: fixed; }
body[data-mood="trust"]   { background-image: var(--trust-sky);   background-attachment: fixed; }

a { color: var(--blue); }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); line-height: 1.05; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff;
  padding: var(--space-2); border-radius: var(--r-sm); z-index: 100;
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

:where(a, button):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* The experience island is a fixed full-bleed layer; it fades out on scroll (handled
   in the island) so the lower sections stay clean (restraint). */
#tfp-experience { position: fixed; inset: 0; z-index: -1; pointer-events: none; transition: opacity .25s linear; }
/* Soft vignette over the 3D scene — deepens the edges so the center reads as the focus (Lusion calm). */
.tfp-vignette { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(125% 95% at 50% 40%, transparent 50%, rgba(22,38,126,.06) 78%, rgba(22,38,126,.13) 100%); }

/* ---- Nav ---- */
.tfp-nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--gutter);
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,249,240,.82); backdrop-filter: blur(8px);
  border-bottom: var(--sticker-stroke) solid var(--ink);
}
/* The header is anchored only on the home scroll-story. On the form pages it
   scrolls away so it never slices the page title / wizard. */
body:not([data-scene="hero"]) .tfp-nav { position: relative; top: auto; }
.tfp-nav__brand { display: flex; align-items: center; }
.tfp-logo { display: block; height: auto; }
/* Reserve the logo box before the image loads (kills layout shift / CLS). 1233×1034 source. */
.tfp-logo { aspect-ratio: 1233 / 1034; }
.tfp-logo--nav { height: clamp(58px, 7vw, 76px); width: auto; }
.tfp-logo--footer { height: clamp(88px, 12vw, 116px); width: auto; margin: 0 auto var(--space-2); }
.tfp-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.tfp-nav__links { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.tfp-nav__link { color: var(--ink); text-decoration: none; font-weight: 700; }
.tfp-nav__link:hover { color: var(--pink); }
/* Hamburger button — animates to an X when the menu is open. */
.tfp-nav__toggle { display: none; width: 44px; height: 44px; padding: 0; position: relative; background: none; border: 0; color: var(--ink); cursor: pointer; border-radius: var(--r-md, 12px); }
.tfp-nav__toggle:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.tfp-burger, .tfp-burger::before, .tfp-burger::after {
  content: ""; position: absolute; left: 50%; width: 24px; height: 3px; border-radius: 3px;
  background: currentColor; transform: translateX(-50%);
  transition: transform .26s var(--ease-bounce), top .26s var(--ease-bounce), background-color .2s ease;
}
.tfp-burger { top: 50%; margin-top: -1.5px; }
.tfp-burger::before { top: -8px; }
.tfp-burger::after  { top: 8px; }
.tfp-nav[data-open="true"] .tfp-burger { background-color: transparent; }
.tfp-nav[data-open="true"] .tfp-burger::before { top: 0; transform: translateX(-50%) rotate(45deg); }
.tfp-nav[data-open="true"] .tfp-burger::after  { top: 0; transform: translateX(-50%) rotate(-45deg); }

/* ---- Buttons (sticker look) ---- */
.tfp-btn {
  position: relative; overflow: hidden;
  display: inline-block; font-family: var(--font-display); font-weight: 700;
  padding: .7em 1.3em; border-radius: var(--r-pill); text-decoration: none;
  border: var(--sticker-stroke) solid var(--ink); box-shadow: var(--sticker-shadow);
  transition: transform var(--dur-fast) var(--ease-bounce), box-shadow var(--dur-fast) ease;
}
.tfp-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 24px -10px rgba(15,27,92,.42); }
.tfp-btn:active { transform: translateY(1px) scale(.98); }
/* Light sweep across the primary CTA on hover (premium microinteraction). */
.tfp-btn--cta::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg); transition: left .55s ease; pointer-events: none;
}
.tfp-btn--cta:hover::after { left: 130%; }
@media (prefers-reduced-motion: reduce) { .tfp-btn--cta::after { display: none; } }
.tfp-btn--cta { background: var(--cta); color: var(--cta-ink); }
.tfp-btn--ghost { background: #fff; color: var(--ink); }

/* ---- Hero ---- */
.tfp-hero { min-height: 64vh; display: grid; place-items: center; text-align: center; padding: var(--space-5) var(--gutter); }
.tfp-hero__inner { max-width: 880px; position: relative; z-index: 0; }
/* Soft focal halo: separates the logo (figure) from the busy balloon field (ground). */
.tfp-hero__inner::before {
  content: ""; position: absolute; left: 50%; top: 48%;
  transform: translate(-50%, -50%);
  width: min(94vw, 840px); height: 132%;
  background: radial-gradient(closest-side,
    rgba(255,249,240,.95) 28%, rgba(255,249,240,.6) 56%, rgba(255,249,240,0) 100%);
  filter: blur(8px); z-index: -1; pointer-events: none;
}
.tfp-eyebrow {
  display: inline-block; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-deep);
  background: rgba(255,249,240,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: .45em 1.1em; border-radius: var(--r-pill);
}
.tfp-logo--hero {
  width: min(78vw, 540px); margin: var(--space-2) auto var(--space-3);
  filter: drop-shadow(0 14px 22px rgba(15,27,92,.22));
  transition: transform var(--dur-med) var(--ease-bounce);
}
.tfp-logo--hero:hover { transform: scale(1.03) rotate(-1deg); }
.tfp-hero__sub {
  display: inline-block; font-size: clamp(1rem, 2.1vw, 1.3rem); font-weight: 600; color: var(--ink); max-width: none; margin-inline: auto;
  background: rgba(255,249,240,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: .35em 1.2em; border-radius: var(--r-pill);
}
@media (min-width: 620px) { .tfp-hero__sub { white-space: nowrap; } }
.tfp-hero__cta { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-4); }
.tfp-btn--lg { font-size: 1.25rem; padding: .85em 1.7em; border-width: 3.5px; }

/* ---- Rooms grid ---- */
.tfp-rooms { padding: var(--space-6) var(--gutter); }
.tfp-section-title { text-align: center; font-size: clamp(1.6rem, 4vw, 2.4rem); }
.tfp-rooms__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); max-width: var(--content-max); margin: var(--space-4) auto 0; }
.tfp-room {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-4) var(--space-3); border-radius: var(--r-lg); text-decoration: none;
  border: var(--sticker-stroke) solid var(--ink); box-shadow: var(--elev-card);
  background: #fff; color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  transition: transform var(--dur-fast) var(--ease-bounce);
}
.tfp-room:hover { transform: translateY(-4px) rotate(-1deg); }
.tfp-room--festive { background: color-mix(in srgb, var(--yellow) 16%, #fff); }
.tfp-room--trust   { background: color-mix(in srgb, var(--teal) 14%, #fff); }
.tfp-room__go { color: var(--pink); font-size: 1.6rem; }

/* ---- Inner pages (restrained, matches homepage) ---- */
.tfp-page { max-width: 720px; margin-inline: auto; padding: calc(var(--space-6) + 48px) var(--gutter) var(--space-6); text-align: center; }
.tfp-page__head { position: relative; z-index: 0; display: grid; justify-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
/* Soft focal halo: same figure-ground separation the homepage hero uses over the 3D scene. */
.tfp-page__head::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 660px); height: 150%;
  background: radial-gradient(closest-side,
    rgba(255,249,240,.94) 30%, rgba(255,249,240,.55) 62%, rgba(255,249,240,0) 100%);
  filter: blur(8px); z-index: -1; pointer-events: none;
}
.tfp-page__prop { display: block; font-size: 76px; line-height: 1; color: var(--ink); }   /* UICONS glyph */
.tfp-page__title {
  font-size: clamp(2rem, 6vw, 3.4rem); margin: 0;
  display: inline-block; background: rgba(255,249,240,.65);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: .08em .45em; border-radius: var(--r-lg);
}
.tfp-page__lede {
  font-size: 1.2rem; max-width: var(--readable); margin: 0 auto;
  display: inline-block; background: rgba(255,249,240,.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: .5em 1.1em; border-radius: var(--r-lg);
}
.tfp-flow { max-width: var(--readable); padding-left: 1.2em; text-align: left; margin-inline: auto; }
.tfp-flow li { margin: var(--space-1) 0; font-weight: 600; }
.tfp-note { background: var(--surface-2); border: 2px solid var(--ink); border-radius: var(--r-md); padding: var(--space-3); max-width: var(--readable); margin: var(--space-4) auto 0; }

/* ---- Footer ---- */
.tfp-footer { padding: var(--space-5) var(--gutter); border-top: var(--sticker-stroke) solid var(--ink); background: #fff; }
.tfp-footer__inner { max-width: var(--content-max); margin: 0 auto; display: grid; gap: var(--space-3); justify-items: center; text-align: center; }
.tfp-footer__brand { display: grid; justify-items: center; gap: var(--space-2); }
.tfp-footer__legal { opacity: .7; font-size: .9rem; color: var(--ink); margin: 0; }
.tfp-footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: center; }
.tfp-footer__nav a { color: var(--ink); text-decoration: none; font-weight: 700; }
.tfp-footer__nav a:hover { color: var(--pink); }
.tfp-footer__contact { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: center; font-size: .95rem; }
.tfp-footer__contact a { color: var(--ink); opacity: .85; text-decoration: none; font-weight: 600; }
.tfp-footer__contact a:hover { opacity: 1; text-decoration: underline; }

/* ---- Top promo / phone banner (above the sticky nav; scrolls away) ---- */
.tfp-promo {
  display: flex; align-items: center; justify-content: center; gap: .4em 1.2em; flex-wrap: wrap;
  background: var(--cta); color: var(--cta-ink); padding: .5em var(--gutter);
  font-weight: 700; font-size: .92rem; text-align: center; position: relative; z-index: 21;
}
.tfp-promo__msg, .tfp-promo__phone { display: inline-flex; align-items: center; gap: .45em; }
.tfp-promo__ico { width: 1.2em; height: 1.2em; color: #fff; flex: none; }  /* white icons pop on teal */
.tfp-promo__phone { color: inherit; text-decoration: none; white-space: nowrap; }
.tfp-promo__phone:hover { text-decoration: underline; }
/* Phones: drop the promo message so BOTH numbers stay visible + compact in the header. */
@media (max-width: 560px) {
  .tfp-promo { font-size: .82rem; gap: .3em .9em; }
  .tfp-promo__msg { display: none; }
}

/* ---- Contact page ---- */
.tfp-contact { display: grid; gap: var(--space-4); max-width: var(--readable); margin: var(--space-4) auto 0; }
.tfp-contact__info { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.tfp-contact__info a { color: var(--ink); text-decoration: none; }
.tfp-contact__info a:hover { color: var(--pink); text-decoration: underline; }

/* ---- Forms (sticker card) ---- */
.tfp-form {
  max-width: var(--readable); display: grid; gap: var(--space-3); margin: var(--space-4) auto 0; text-align: left;
  background: #fff; border: var(--sticker-stroke) solid var(--ink); border-radius: var(--r-lg);
  box-shadow: var(--sticker-shadow); padding: var(--space-5) var(--space-4);
}
.tfp-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.tfp-form label { display: grid; gap: 6px; font-weight: 700; color: var(--ink); }
.tfp-form input { font: inherit; padding: .7em .8em; border: 2px solid var(--ink); border-radius: var(--r-md); background: #fff; }
.tfp-form input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.tfp-form fieldset { border: 2px dashed var(--ink); border-radius: var(--r-md); padding: var(--space-3); }
.tfp-form legend { font-family: var(--font-display); font-weight: 700; padding: 0 .4em; }
.tfp-check { grid-template-columns: auto 1fr; display: grid; gap: var(--space-2); align-items: start; font-weight: 600; }
.tfp-check input { width: 1.3em; height: 1.3em; }
.tfp-note--error { background: color-mix(in srgb, var(--red) 14%, #fff); border-color: var(--red); }
@media (max-width: 560px) { .tfp-form__row { grid-template-columns: 1fr; } }

/* ---- Waiver read panel + signature ---- */
.tfp-waiver-heading { text-align: center; font-size: 1.3rem; margin-top: var(--space-4); }
.tfp-waiver-doc {
  max-width: var(--readable); margin: var(--space-3) auto var(--space-2); max-height: 360px; overflow-y: auto;
  text-align: left; background: #fff; border: 2px solid var(--ink); border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4); font-size: .92rem; line-height: 1.55;
}
.tfp-waiver-doc h2 { font-family: var(--font-body); font-size: 1rem; font-weight: 800; color: var(--ink); margin: var(--space-3) 0 var(--space-1); }
.tfp-waiver-doc p { margin: 0 0 .7em; }
.tfp-waiver-doc:focus-visible { outline: 3px solid var(--focus-ring); }

/* Counsel-review flags: jurisdiction/entity changes + must-confirm spots are wrapped in
   <mark class="counsel-flag" data-counsel="…">. INVISIBLE to customers by default (renders
   as plain text); only /waiver?counsel=1 (body[data-counsel="on"]) highlights them and
   prints the attorney note inline. See WAIVER_COUNSEL_REVIEW.md. */
.counsel-flag { background: none; color: inherit; }
body[data-counsel="on"] .counsel-flag {
  background: #fde68a; color: var(--ink); padding: 0 .12em; border-radius: 3px;
  box-shadow: 0 0 0 2px #b45309; cursor: help;
}
body[data-counsel="on"] .counsel-flag::after {
  content: " ⚠ COUNSEL: " attr(data-counsel);
  display: block; margin: .35em 0 .6em; padding: .4em .6em;
  background: #fff7ed; color: #7c2d12; border-left: 4px solid #b45309; border-radius: 4px;
  font-size: .8rem; font-weight: 600; line-height: 1.4; white-space: normal;
}
/* Blocker-level flag — RED. A hard launch blocker, not a "confirm this". */
body[data-counsel="on"] .counsel-flag--blocker {
  background: #fecaca; box-shadow: 0 0 0 2px #b91c1c;
}
body[data-counsel="on"] .counsel-flag--blocker::after {
  content: " " attr(data-counsel);
  background: #fef2f2; color: #7f1d1d; border-left: 4px solid #b91c1c;
}
.tfp-sign { display: grid; gap: var(--space-2); }
.tfp-sign__label { font-weight: 700; color: var(--ink); }
.tfp-sign__pad { width: 100%; height: 180px; background: #fff; border: 2px dashed var(--ink); border-radius: var(--r-md); touch-action: none; cursor: crosshair; }
.tfp-sign__row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.tfp-sign__typed { display: grid; gap: 6px; font-weight: 700; flex: 1; min-width: 220px; }

/* ---- Hero scroll cue ---- */
.tfp-hero { position: relative; }
.tfp-scrollcue {
  position: absolute; bottom: var(--space-3); left: 50%; transform: translateX(-50%);
  font-size: 1.6rem; color: var(--ink); opacity: .65;
  animation: tfp-bob 1.6s var(--ease-bounce) infinite;
}
@keyframes tfp-bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* ---- 02 Two worlds ---- */
.tfp-worlds {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
  max-width: var(--content-max); margin: 0 auto; padding: var(--space-6) var(--gutter);
}
.tfp-world {
  border: var(--sticker-stroke) solid var(--ink); border-radius: var(--r-lg);
  padding: var(--space-5) var(--space-4); box-shadow: var(--elev-card); background: #fff;
}
.tfp-world__prop { width: 116px; height: 116px; margin: 0 auto var(--space-2); }
.tfp-world h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-top: 0; }
.tfp-world p { max-width: 42ch; }
.tfp-world--festive { background: color-mix(in srgb, var(--yellow) 12%, #fff); }
.tfp-world--trust { background: color-mix(in srgb, var(--teal) 12%, #fff); }

/* ---- Offer grid (merged "what you can do") ---- */
/* "What you can do" + "Inside the fun" read as one grouped beat (tight seam between them). */
.tfp-offer { padding: var(--space-5) var(--gutter) var(--space-3); }
.tfp-offer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-3); max-width: var(--content-max); margin: var(--space-4) auto 0; }
.tfp-offer__card {
  position: relative; display: block; text-decoration: none; color: var(--ink); background: #fff;
  border: var(--sticker-stroke) solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--elev-card);
  padding: var(--space-4); transition: transform var(--dur-fast) var(--ease-bounce), box-shadow var(--dur-fast) ease;
}
.tfp-offer__card:hover { transform: translateY(-7px) rotate(-.6deg); box-shadow: 0 22px 36px -16px rgba(15,27,92,.42); }
.tfp-offer__card:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.tfp-offer__card--festive { background: color-mix(in srgb, var(--yellow) 12%, #fff); }
.tfp-offer__card--trust { background: color-mix(in srgb, var(--teal) 12%, #fff); }
/* Per-card brand background — coordinated with each card's icon tint */
.tfp-offer__card--red   { background: color-mix(in srgb, var(--red) 10%, #fff); }
.tfp-offer__card--green { background: color-mix(in srgb, var(--green) 13%, #fff); }
.tfp-offer__card--teal  { background: color-mix(in srgb, var(--teal) 13%, #fff); }
.tfp-offer__card--purple { background: color-mix(in srgb, var(--purple) 10%, #fff); }
.tfp-offer__card--blue  { background: color-mix(in srgb, var(--blue) 10%, #fff); }
.tfp-offer__icon { display: block; font-size: 52px; line-height: 1; margin-bottom: var(--space-2); color: var(--ink); transform-origin: left center; transition: transform var(--dur-med) var(--ease-bounce); }
.tfp-offer__card:hover .tfp-offer__icon { transform: scale(1.14) rotate(-7deg); }
/* Per-section brand tint for UICONS glyphs */
.tfp-offer__icon--red   { color: var(--red); }
.tfp-offer__icon--green { color: var(--green); }
.tfp-offer__icon--teal  { color: var(--teal); }
.tfp-offer__icon--purple { color: var(--purple); }
.tfp-offer__icon--blue  { color: var(--blue); }
.tfp-offer__card--orange { background: color-mix(in srgb, var(--orange) 12%, #fff); }
.tfp-offer__icon--orange { color: var(--orange); }

/* Coming-soon offering: ribbon badge; the card stays calm (no arrow). */
.tfp-offer__card--soon { position: relative; }
.tfp-soon {
  position: absolute; top: .9rem; right: .9rem; z-index: 2;
  background: var(--ink); color: #fff; font-family: var(--font-display); font-weight: 700;
  font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  padding: .22em .7em; border-radius: 999px; box-shadow: 0 2px 0 rgba(15,27,92,.18);
}
div.tfp-offer__card--soon { cursor: default; }   /* Summer Camp has no page yet */
/* Coming-soon page panel (e.g. /after-school) */
.tfp-soon-panel {
  max-width: var(--readable); margin: var(--space-4) auto; text-align: center;
  background: #fff; border: 2px solid var(--ink); border-radius: var(--r-lg);
  padding: var(--space-5) var(--space-4); box-shadow: var(--sticker-shadow);
}
.tfp-soon-panel .tfp-soon { position: static; display: inline-block; margin-bottom: var(--space-3); }
.tfp-pkg__list { margin: var(--space-2) 0 0; padding-left: 1.1em; display: grid; gap: .25em; font-size: .92rem; }
.tfp-pkg__list li { color: var(--ink); }
.tfp-offer__card h3 { font-family: var(--font-display); font-size: 1.35rem; margin: 0 0 6px; }
.tfp-offer__card p { margin: 0; max-width: 42ch; }
.tfp-offer__go { position: absolute; top: var(--space-3); right: var(--space-4); color: var(--pink); font-size: 1.6rem; line-height: 1; transition: transform var(--dur-fast) var(--ease-bounce); }
.tfp-offer__card:hover .tfp-offer__go { transform: translateX(5px) scale(1.15); }

/* ---- After-school weekly themes ---- */
.tfp-weeks-lede { max-width: var(--readable); margin: 0 auto var(--space-3); text-align: center; }
.tfp-weeks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); max-width: var(--content-max); margin: 0 auto; }
.tfp-week { position: relative; text-align: center; padding: var(--space-3) var(--space-2); border: 2px solid var(--ink); border-radius: var(--r-md); background: #fff; box-shadow: var(--elev-card); }
.tfp-week--now { background: color-mix(in srgb, var(--teal) 18%, #fff); border-width: var(--sticker-stroke); }
.tfp-week__icon { display: block; font-size: 1.8rem; }
.tfp-week__name { display: block; font-weight: 700; color: var(--ink); margin-top: 4px; }
.tfp-week__tag { display: inline-block; margin-top: 6px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--pink); padding: 2px 8px; border-radius: var(--r-pill); }

/* ---- 03 Actions ---- */
.tfp-actions { padding: var(--space-6) var(--gutter); }
.tfp-actions__list { max-width: 760px; margin: var(--space-4) auto 0; display: grid; gap: var(--space-2); }
.tfp-action {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border: var(--sticker-stroke) solid var(--ink);
  border-radius: var(--r-md); background: #fff; text-decoration: none; color: var(--ink);
  box-shadow: var(--elev-card); transition: transform var(--dur-fast) var(--ease-bounce);
}
.tfp-action:hover { transform: translateX(6px); }
.tfp-action__name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.tfp-action__meta { color: var(--ink-soft, var(--ink)); opacity: .7; font-size: .95rem; }
.tfp-action__go { color: var(--pink); font-size: 1.4rem; }

/* ---- 04 Gallery ---- */
.tfp-gallery { padding: var(--space-3) var(--gutter) var(--space-5); text-align: center; }
.tfp-gallery__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
  max-width: var(--content-max); margin: var(--space-4) auto var(--space-2);
}
@media (max-width: 760px) { .tfp-gallery__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .tfp-gallery__grid { grid-template-columns: 1fr; } }
.tfp-gallery__grid--page { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: var(--space-3) auto var(--space-5); text-align: left; }
.tfp-gallery__item {
  margin: 0; aspect-ratio: 4/3; border-radius: var(--r-lg); border: var(--sticker-stroke) solid var(--ink);
  box-shadow: var(--elev-card); display: flex; align-items: flex-end; overflow: hidden;
}
.tfp-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-med) var(--ease-soft); }
.tfp-gallery__item:hover img { transform: scale(1.05); }
.tfp-gallery__item figcaption { background: rgba(22,38,126,.78); color: #fff; width: 100%; padding: var(--space-2); font-weight: 700; }
.tfp-ph--1 { background: linear-gradient(135deg, var(--sky), var(--purple)); }
.tfp-ph--2 { background: linear-gradient(135deg, var(--pink), var(--orange)); }
.tfp-ph--3 { background: linear-gradient(135deg, var(--teal), var(--green)); }

/* ---- 05 Proof ---- */
.tfp-proof { padding: var(--space-5) var(--gutter); text-align: center; background: var(--surface-2); }
.tfp-quote { max-width: 620px; margin: var(--space-4) auto 0; font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 1.9rem); color: var(--ink); }
.tfp-quote cite { display: block; margin-top: var(--space-3); font-family: var(--font-body); font-style: normal; font-size: 1rem; opacity: .7; }

/* ---- 06 Location ---- */
.tfp-location { padding: var(--space-5) var(--gutter); text-align: center; }
.tfp-location__addr { font-size: 1.2rem; font-weight: 700; }
.tfp-muted { opacity: .6; }

@media (max-width: 720px) { .tfp-worlds { grid-template-columns: 1fr; } .tfp-action { grid-template-columns: 1fr auto; } .tfp-action__meta { display: none; } }

/* ---- Responsive nav: hamburger + frosted dropdown panel (mobile + tablet) ---- */
@media (max-width: 1024px) {
  .tfp-nav__toggle { display: grid; place-items: center; }
  .tfp-nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: var(--space-2) var(--gutter) var(--space-3);
    background: rgba(255,249,240,.97);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: var(--sticker-stroke) solid var(--ink);
    box-shadow: 0 20px 34px -14px rgba(15,27,92,.32);
    max-height: calc(100dvh - 100%); overflow-y: auto;
    /* animated, accessible hide (no display:none, so it can transition) */
    opacity: 0; transform: translateY(-12px); pointer-events: none; visibility: hidden;
    transition: opacity .22s ease, transform .28s var(--ease-bounce), visibility 0s linear .28s;
  }
  .tfp-nav[data-open="true"] .tfp-nav__links {
    opacity: 1; transform: none; pointer-events: auto; visibility: visible;
    transition: opacity .22s ease, transform .28s var(--ease-bounce), visibility 0s;
  }
  .tfp-nav__link {
    padding: .85em 1em; border-radius: var(--r-lg); font-size: 1.12rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  }
  .tfp-nav__link:last-of-type { border-bottom: 0; }
  .tfp-nav__link:hover, .tfp-nav__link:focus-visible {
    background: color-mix(in srgb, var(--ink) 7%, #fff); color: var(--ink);
  }
  .tfp-nav__links .tfp-btn--cta { margin-top: var(--space-2); width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .tfp-nav__links, .tfp-burger, .tfp-burger::before, .tfp-burger::after { transition: none; }
}

/* ---- Sound toggle (injected by the island when motion/sound is live) ---- */
.tfp-soundtoggle {
  position: fixed; right: var(--space-3); bottom: var(--space-3); z-index: 30;
  width: 44px; height: 44px; display: grid; place-items: center;
  color: var(--ink); background: rgba(255,249,240,.82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: var(--sticker-stroke) solid var(--ink); border-radius: var(--r-pill);
  box-shadow: var(--sticker-shadow); cursor: pointer; transition: transform .15s var(--ease-bounce);
}
.tfp-soundtoggle:hover { transform: translateY(-2px) scale(1.05); }
.tfp-soundtoggle:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* First-visit "tap the balloons" hint (injected by the island, dismissible). */
.tfp-hint {
  position: fixed; left: 50%; bottom: calc(var(--space-3) + 4px); transform: translate(-50%, 14px);
  z-index: 25; display: inline-flex; align-items: center; gap: .5em;
  padding: .6em 1.15em; border-radius: var(--r-pill);
  background: rgba(22,38,126,.92); color: #fff; font-weight: 700; font-size: .98rem;
  box-shadow: var(--sticker-shadow); cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .35s ease, transform .35s var(--ease-bounce);
}
.tfp-hint.is-in { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; animation: tfp-hint-bob 2.2s var(--ease-bounce) infinite; }
@keyframes tfp-hint-bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -5px); } }
@media (prefers-reduced-motion: reduce) { .tfp-hint.is-in { animation: none; } }

/* ---- Scroll choreography: reveal-on-enter (pairs with the 3D camera Ascent) ---- */
[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s ease, transform .6s var(--ease-bounce);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ---- Balloon-rise page transition ---- */
.tfp-transition { position: fixed; inset: 0; z-index: 1000; overflow: hidden; pointer-events: none; visibility: hidden; }
.tfp-rising .tfp-transition, .tfp-transition.is-leaving, .tfp-transition.is-entering { visibility: visible; pointer-events: auto; }
.tfp-transition__sky { position: absolute; inset: 0; background: #fff9f0; opacity: 0; }
.tfp-rising .tfp-transition__sky { opacity: 1; }
.tfp-transition.is-leaving .tfp-transition__sky { animation: tfp-cover .45s ease forwards; }
.tfp-transition.is-entering .tfp-transition__sky { animation: tfp-reveal .5s ease .15s forwards; }
@keyframes tfp-cover { from { opacity: 0; } to { opacity: 1; } }
@keyframes tfp-reveal { from { opacity: 1; } to { opacity: 0; } }
.tfp-transition__balloon {
  position: absolute; left: var(--x); bottom: -18vh;
  width: calc(84px * var(--s, 1)); height: calc(106px * var(--s, 1));
  background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.6), transparent 46%), var(--c, var(--red));
  border: 3px solid var(--ink); border-radius: 50% 50% 49% 49%;
  transform: translate(-50%, 0); opacity: 0;
}
.tfp-transition__balloon::after {
  content: ""; position: absolute; top: 100%; left: 50%; width: 2px; height: 8vh;
  background: var(--ink); opacity: .45; transform: translateX(-50%);
}
.tfp-transition.is-leaving .tfp-transition__balloon,
.tfp-transition.is-entering .tfp-transition__balloon { animation: tfp-brise .72s var(--ease-soft, ease-out) var(--delay, 0s) forwards; }
@keyframes tfp-brise {
  0% { transform: translate(-50%, 0); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(-50%, -135vh); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .tfp-transition { display: none !important; } .tfp-step { animation: none !important; } }

/* ── Wizards (multi-step forms) ─────────────────────────────────────────────
   No-JS fallback: without the .js flag every .tfp-step is visible (one long
   form) so the legal/money paths always submit. JS turns it into a stepper. */
.tfp-stepper { list-style: none; margin: 0 auto var(--space-4); padding: 0; display: flex;
  flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-3); max-width: var(--readable); }
.tfp-stepper__item { display: flex; align-items: center; gap: 8px; font-weight: 700;
  font-size: .82rem; color: color-mix(in srgb, var(--ink) 45%, #fff); }
.tfp-stepper__num { display: grid; place-items: center; width: 1.7em; height: 1.7em;
  border-radius: 50%; border: 2px solid currentColor; font-size: .85rem; }
.tfp-stepper__item[aria-current="step"] { color: var(--ink); }
.tfp-stepper__item[aria-current="step"] .tfp-stepper__num { background: var(--cta); color: var(--cta-ink); border-color: var(--cta); }
.tfp-stepper__item.is-done { color: var(--green); }
.tfp-stepper__item.is-done .tfp-stepper__num { background: var(--green); color: #fff; border-color: var(--green); }
.tfp-stepper__label { white-space: nowrap; }
@media (max-width: 560px) { .tfp-stepper__label { display: none; } }

.js .tfp-step:not(.is-active) { display: none; }
.tfp-step { animation: tfp-step-in var(--dur-med, .3s) var(--ease-soft, ease-out); }
.tfp-step > legend, .tfp-step__title { font-family: var(--font-display); font-size: 1.25rem;
  color: var(--ink); margin: 0 0 var(--space-1); text-align: center; }
.tfp-step__hint { text-align: center; color: color-mix(in srgb, var(--ink) 62%, #fff);
  margin: 0 auto var(--space-3); max-width: var(--readable); }
@keyframes tfp-step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.tfp-wizard__nav { display: flex; gap: var(--space-3); justify-content: space-between;
  align-items: center; margin-top: var(--space-4); }
.tfp-wizard__nav .tfp-btn { flex: 0 0 auto; }
.tfp-wizard__nav [data-wizard-back] { margin-right: auto; }
.tfp-wizard__nav [data-wizard-next], .tfp-wizard__nav [type="submit"] { margin-left: auto; }
.no-js .tfp-wizard__nav [data-wizard-back], .no-js .tfp-wizard__nav [data-wizard-next] { display: none; }

/* Recognition banner ("welcome back") + waiver-covered badge */
.tfp-recognize { display: none; gap: var(--space-2); align-items: center; text-align: left;
  background: color-mix(in srgb, var(--green) 12%, #fff); border: 2px solid var(--green);
  border-radius: var(--r-md); padding: var(--space-3); margin-top: var(--space-3); }
.tfp-recognize.is-shown { display: grid; grid-template-columns: auto 1fr; }
.tfp-recognize__actions { grid-column: 1 / -1; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.tfp-covered { display: flex; gap: var(--space-2); align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--green) 12%, #fff); border: 2px solid var(--green);
  border-radius: var(--r-md); padding: var(--space-3); font-weight: 700; }

/* Stub panels (calendar / deposit before Cal.com + Stripe are wired) */
.tfp-stub { text-align: center; border: 2px dashed var(--ink); border-radius: var(--r-md);
  padding: var(--space-4); background: var(--surface-2); display: grid; gap: var(--space-2); justify-items: center; }
.tfp-stub__badge { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cta-ink); background: var(--cta); padding: .25em .7em; border-radius: 999px; }

/* Party packages + add-ons + live total */
.tfp-pkgs { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
.tfp-pkg { position: relative; display: grid; gap: 6px; text-align: left; cursor: pointer;
  border: 2px solid var(--ink); border-radius: var(--r-md); padding: var(--space-3); background: #fff;
  box-shadow: var(--elev-card); transition: transform var(--dur-fast) var(--ease-bounce), box-shadow var(--dur-fast) ease; }
.tfp-pkg:hover { transform: translateY(-2px); box-shadow: var(--sticker-shadow); }
.tfp-pkg input { position: absolute; opacity: 0; pointer-events: none; }
.tfp-pkg:has(input:checked) { border-color: var(--cta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cta) 35%, transparent); }
.tfp-pkg:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.tfp-pkg__name { font-family: var(--font-display); font-size: 1.15rem; }
.tfp-pkg__price { font-weight: 800; color: var(--cta); }
.tfp-pkg__meta { font-size: .85rem; color: color-mix(in srgb, var(--ink) 60%, #fff); }
.tfp-pkg__flag { position: absolute; top: -10px; right: var(--space-3); font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--pink); padding: .2em .6em; border-radius: 999px; }

.tfp-addons { display: grid; gap: var(--space-2); }
.tfp-addon { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2); align-items: center;
  border: 2px solid var(--ink); border-radius: var(--r-md); padding: var(--space-2) var(--space-3); background: #fff; font-weight: 600; }
.tfp-addon:has(input:checked) { border-color: var(--cta); background: color-mix(in srgb, var(--cta) 8%, #fff); }
.tfp-addon__price { font-weight: 800; color: var(--cta); }
.tfp-total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800;
  border-top: 2px dashed var(--ink); padding-top: var(--space-2); margin-top: var(--space-1); }
.tfp-total__big { font-family: var(--font-display); font-size: 1.4rem; color: var(--cta); }
.tfp-total__note { font-size: .8rem; font-weight: 600; color: color-mix(in srgb, var(--ink) 60%, #fff); }

/* Schedule-day checkboxes (after-school) */
.tfp-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: var(--space-2); }
.tfp-day { display: grid; place-items: center; gap: 4px; text-align: center; cursor: pointer;
  border: 2px solid var(--ink); border-radius: var(--r-md); padding: var(--space-2); background: #fff; font-weight: 700; }
.tfp-day input { width: 1.1em; height: 1.1em; }
.tfp-day:has(input:checked) { border-color: var(--cta); background: color-mix(in srgb, var(--cta) 10%, #fff); }

/* Per-clause initials (waiver "initial here" boxes) */
.tfp-initials { display: grid; gap: var(--space-2); border: 2px dashed var(--ink); border-radius: var(--r-md); padding: var(--space-3); margin: var(--space-2) 0; }
.tfp-initials legend { font-family: var(--font-display); font-weight: 700; padding: 0 .4em; }
.tfp-initial { display: grid; grid-template-columns: 1fr 5.5em; gap: var(--space-3); align-items: center; font-weight: 600; font-size: .92rem; }
.tfp-initial input { width: 100%; text-transform: uppercase; text-align: center; font-weight: 800; letter-spacing: .08em; padding: .5em; border: 2px solid var(--ink); border-radius: var(--r-md); background: #fff; }
.tfp-initial input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.tfp-initial em { font-style: normal; color: color-mix(in srgb, var(--ink) 55%, #fff); }

/* Stripe payment block (deposit / fee / tuition) */
.tfp-pay { border: 2px solid var(--ink); border-radius: var(--r-md); padding: var(--space-3); background: #fff; box-shadow: var(--elev-card); display: grid; gap: var(--space-2); }
.tfp-pay__head { display: flex; align-items: baseline; gap: var(--space-2); }
.tfp-pay__amount { font-family: var(--font-display); font-size: 1.6rem; color: var(--cta); }
.tfp-pay__label { font-weight: 600; color: color-mix(in srgb, var(--ink) 65%, #fff); }
.tfp-pay__card { min-height: 44px; }
.tfp-pay__stub { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); align-items: center;
  border: 2px dashed var(--ink); border-radius: var(--r-md); padding: var(--space-3);
  background: var(--surface-2); font-size: .9rem; }
.tfp-pay__stub span:first-child { font-size: 1.4rem; }

/* Cal.com availability — our own time buttons */
.tfp-slots { display: grid; gap: var(--space-3); max-height: 340px; overflow-y: auto; padding: 2px; }
.tfp-slots--needpick { outline: 2px solid var(--red); outline-offset: 4px; border-radius: var(--r-md); }
.tfp-slots__day { display: grid; gap: var(--space-2); }
.tfp-slots__date { margin: 0; font-family: var(--font-body); font-weight: 800; color: var(--ink); font-size: .95rem; }
.tfp-slots__times { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-2); }
.tfp-slot { font: inherit; font-weight: 700; cursor: pointer; padding: .6em .4em; border: 2px solid var(--ink);
  border-radius: var(--r-md); background: #fff; color: var(--ink); transition: transform var(--dur-fast) var(--ease-bounce), background var(--dur-fast) ease; }
.tfp-slot:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--cta) 8%, #fff); }
.tfp-slot:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.tfp-slot.is-selected { background: var(--cta); color: var(--cta-ink); border-color: var(--cta); }