:root {
  --sc-canvas:     #FFFFFF;
  --sc-surface:    #F4E8C1;
  --sc-ink:        #123B42;
  --sc-ink-soft:   #5C7A80;
  --sc-accent:     #2BB8D6;
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Baloo 2", system-ui, sans-serif;
  --sc-font-text:    "Nunito", system-ui, sans-serif;

  --pp-yellow: #FFD54F;
  --pp-green:  #2ECC71;
  --pp-green-ink: #073B21;
  --pp-cream:  #F4E8C1;
  --pp-teal-deep: #1E96AF;
}

body { background: var(--sc-canvas); }

/* ---------- nav: floating pill, not a full-width bar ---------- */
.site-bar {
  position: fixed; z-index: 40; left: 50%; top: 18px; transform: translateX(-50%);
  width: min(1120px, calc(100% - 32px));
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem .6rem .55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sc-accent) 20%, transparent);
  background: color-mix(in srgb, var(--pp-cream) 24%, color-mix(in srgb, var(--sc-accent) 9%, transparent));
  backdrop-filter: blur(16px);
  box-shadow: 0 14px 40px rgba(18, 59, 66, .14);
}
@media (max-width: 640px) { .site-bar { top: 12px; width: calc(100% - 20px); padding: .5rem .5rem .5rem .9rem; } }
.site-bar__mark {
  display: inline-flex; align-items: center; gap: var(--sc-2);
  font-family: var(--sc-font-display); font-weight: 800; font-size: 1.15rem;
  color: var(--sc-ink); text-decoration: none;
}
.site-bar__icon { width: auto; height: 52px; display: block; }
.site-bar__name { display: inline-flex; flex-wrap: wrap; column-gap: .35em; }
@media (max-width: 640px) {
  .site-bar__mark { font-size: 1rem; }
  .site-bar__icon { height: 40px; }
  .site-bar__name-sub { display: none; }
}
.site-bar__cta {
  font-family: var(--sc-font-display); font-weight: 700; font-size: .92rem;
  color: var(--pp-green-ink); background: var(--pp-green);
  padding: .6rem 1.2rem; border-radius: 999px; text-decoration: none;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--pp-green) 55%, #000 15%);
  transition: transform 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.site-bar__cta:hover { transform: translateY(-1px); }
.site-bar__cta:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--pp-green) 55%, #000 15%); }

/* ---------- CTA pills, used everywhere ---------- */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sc-font-display); font-weight: 800; font-size: 1rem;
  color: var(--pp-green-ink); background: var(--pp-green);
  padding: .95rem 1.8rem; border-radius: 999px; text-decoration: none;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--pp-green) 55%, #000 15%);
  transition: transform 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.cta:hover { transform: translateY(-2px) scale(1.02); }
.cta:active { transform: translateY(3px); box-shadow: 0 2px 0 color-mix(in srgb, var(--pp-green) 55%, #000 15%); }
.cta:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 3px; }
.cta--lg { font-size: 1.15rem; padding: 1.1rem 2.2rem; }

/* ---------- Suds Pail (signature move) ---------- */
/* bottom-right, not bottom-left: every section's lead-anchored copy and CTA
   lives in the bottom-left quadrant, and on real (shorter) laptop viewport
   heights a left-anchored fixed widget sits directly on top of that text. */
.suds-pail {
  position: fixed; right: var(--sc-3); bottom: var(--sc-3); z-index: 45;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  pointer-events: none;
}
.suds-pail__svg { width: 54px; height: 60px; filter: drop-shadow(0 3px 5px rgba(18,59,66,.25)); }
.suds-pail__fill { transition: y 500ms var(--sc-ease-out); }
.suds-pail__foam { animation: foamDrift 3.4s ease-in-out infinite; }
.suds-pail__foam:nth-child(2) { animation-delay: .4s; }
.suds-pail__foam:nth-child(3) { animation-delay: .9s; }
@keyframes foamDrift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.suds-pail__label {
  font-family: var(--sc-font-text); font-weight: 700; font-size: .68rem;
  color: var(--sc-ink); background: #fff; padding: .2rem .55rem; border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--sc-ink) 14%, transparent);
  white-space: nowrap;
}
@media (max-width: 640px) { .suds-pail { right: var(--sc-2); bottom: var(--sc-2); } .suds-pail__svg { width: 44px; height: 48px; } }

/* ---------- floating / poppable bubbles ---------- */
.bubble-field { position: fixed; inset: 0; z-index: 44; pointer-events: none; overflow: hidden; }
.bubble {
  position: absolute; border-radius: 50%; pointer-events: auto; cursor: pointer;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(255,255,255,.25) 40%, rgba(43,184,214,.18) 72%, rgba(43,184,214,.3));
  border: 1.5px solid rgba(255,255,255,.8);
  animation: bubbleRise linear forwards;
  transition: transform 140ms var(--sc-ease-out);
}
.bubble:hover { transform: scale(1.12); }
@keyframes bubbleRise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  8% { opacity: .9; }
  92% { opacity: .85; }
  100% { transform: translateY(-110vh) translateX(var(--drift, 20px)); opacity: 0; }
}
.bubble-pop { position: absolute; pointer-events: none; z-index: 46; animation: popSparkle 560ms ease-out forwards; }
@keyframes popSparkle { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

.deco-bubble {
  position: absolute; left: var(--x); bottom: -40px; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff, rgba(255,255,255,.3) 45%, rgba(43,184,214,.25));
  border: 1.5px solid rgba(255,255,255,.85);
  animation: decoFloat 7s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes decoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-26px); } }

/* ---------- mascots: real generated PailPal art, one pose per mount ---------- */
.mascot { width: 100%; height: auto; display: block; animation: mascotBob 3.6s ease-in-out infinite; }
@keyframes mascotBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.mascot--wave { animation: mascotBob 3.6s ease-in-out infinite, mascotWiggle 1.6s ease-in-out infinite; }
@keyframes mascotWiggle { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-1.6deg); } }

.mascot--tired { animation: none; filter: saturate(.55) brightness(.97); }

.mascot--cheer { animation: mascotCheer 1.1s ease-in-out infinite; }
@keyframes mascotCheer { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-9px) scale(1.03); } }

/* the generated art sits on an opaque white card, so it reads as a sticker
   wherever the ground behind it isn't already white or cream */
.mascot-plate {
  background: #fff; border-radius: 24px; padding: .5rem .7rem .2rem;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--sc-ink) 85%, transparent);
  display: inline-block;
}

/* ---------- Hero ---------- */
.hero [data-sc-stage] { background: linear-gradient(180deg, #fff, #fff); }
.hero__bg { position: absolute; inset: 0; z-index: 1; }
.hero__bg img { width: 112%; max-width: none; height: 112%; object-fit: cover; position: absolute; top: -6%; left: -6%; }
.hero__floor {
  position: absolute; inset: auto 0 0 0; height: 32%; z-index: 2;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 78%);
}
.hero__mascots {
  position: absolute; z-index: 3; left: 50%; bottom: 4%; transform: translateX(-50%);
  width: min(46vw, 400px);
}
.hero__bubbles { position: absolute; inset: 0; z-index: 2; }
/* top-anchored, not bottom-anchored: a 4-line wrapped headline growing up
   from a bottom anchor reaches behind the fixed nav. Anchoring from a safe
   top offset means it can only ever grow downward, away from the nav. */
.hero__row {
  position: absolute; z-index: 4; left: var(--sc-gutter); right: var(--sc-gutter);
  top: clamp(6.5rem, 22vh, 10rem);
  display: grid; grid-template-columns: 1fr; row-gap: var(--sc-4);
}
.hero__copy { max-width: 640px; }
.hero__aside .sc-body { max-width: 46ch; }

/* plain two-column row: headline left, supporting copy + CTA right. */
@media (min-width: 900px) {
  .hero__row { grid-template-columns: 1fr 1fr; column-gap: var(--sc-7); align-items: center; }
  /* rounded, translucent panel, same family of treatment as the nav pill
     (glass, blurred, no hard white card) but opaque enough that body-size
     text clears 4.5:1 over the busiest part of the scene behind it.
     background is a literal rgba(), not color-mix(): Chrome computes
     color-mix() to a `color(srgb ...)` value with 0-1 components, and the
     verification harness's contrast sampler regex-parses backgroundColor
     expecting rgb()'s 0-255 triplet, so a color-mix() background gets its
     near-white value misread as near-black and reports a false failure. */
  .hero__aside {
    border-radius: var(--sc-r-lg);
    border: 1px solid color-mix(in srgb, var(--sc-accent) 20%, transparent);
    background: rgba(244, 232, 193, .92);
    backdrop-filter: blur(16px);
    box-shadow: 0 14px 40px rgba(18, 59, 66, .14);
    padding: var(--sc-5) var(--sc-6);
  }
  .hero__aside .sc-body { max-width: none; color: var(--sc-ink); font-size: var(--sc-t-lg); line-height: 1.5; }
  .hero__aside .cta { margin-top: var(--sc-4); }
  /* keep the mascots left-of-centre so they don't sit behind the right column */
  .hero__mascots { left: 30%; width: min(34vw, 320px); }
}

/* ---------- Problem ---------- */
.problem { position: relative; padding-block: clamp(3rem, 8vw, 6rem); overflow: hidden; }
/* the hero fades to white at its own bottom edge (.hero__floor); without a
   matching fade in, this section's cream/teal start was a flat seam cutting
   across the page right where the two sections meet. */
.problem::before {
  content: ""; position: absolute; inset: 0 0 auto 0; z-index: 0; pointer-events: none;
  height: clamp(70px, 12vw, 160px);
  background: linear-gradient(180deg, #fff, transparent);
}
/* same flat-seam problem at the bottom: the Turn act opens on a solid teal
   stage, and this section was handing off with a hard horizontal edge.
   z-index 0, not above .problem__mascots/.problem__copy (z-index 1), so the
   fade blends into the photo without washing out the mascot or the text. */
.problem::after {
  content: ""; position: absolute; inset: auto 0 0 0; z-index: 0; pointer-events: none;
  height: clamp(70px, 12vw, 160px);
  background: linear-gradient(180deg, transparent, var(--sc-accent));
}
.problem__bg { position: absolute; inset: 0; z-index: 0; }
.problem__bg img { width: 100%; height: 100%; object-fit: cover; mask-image: linear-gradient(90deg, transparent, transparent 38%, #000 58%); }
/* sc-wrap centers itself across the full page width by default, which on a
   wide screen pushes this whole block right of the gutter and leaves a dead
   blank column on the left. Hug the left edge instead, like the hero does. */
.problem .sc-wrap { margin-inline: 0; max-width: none; }
.problem__copy { position: relative; z-index: 1; max-width: 46ch; }
.problem__copy .sc-body { color: var(--sc-ink); }
.problem__mascots { position: absolute; z-index: 1; right: 6%; bottom: 6%; width: min(30vw, 260px); }

/* ---------- Turn (peak) ---------- */
.turn [data-sc-stage] { background: var(--sc-accent); }
.turn__ground, .turn__reveal { position: absolute; inset: 0; z-index: 1; }
.turn__ground img, .turn__reveal img { width: 100%; height: 100%; object-fit: cover; }
.turn__reveal { z-index: 2; }
.turn__mascots {
  position: absolute; z-index: 3; left: 50%; bottom: 6%; transform: translateX(-50%);
  width: min(30vw, 260px); filter: drop-shadow(0 8px 10px rgba(18,59,66,.28));
}
.turn .sc-scrim--trail { display: none; }
.turn__copy {
  z-index: 4; --sc-ink: #123B42; --sc-ink-soft: #3E6670; color: var(--sc-ink);
  background: #fff; border-radius: 24px; padding: var(--sc-5) var(--sc-6);
  box-shadow: 0 8px 0 color-mix(in srgb, var(--sc-ink) 85%, transparent);
  max-width: min(30rem, 72vw);
}
.turn__copy .sc-body { color: var(--sc-ink-soft); }
@media (max-width: 860px) { .turn__copy { max-width: none; inset-inline: var(--sc-gutter); } }
.turn__sparkles { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.turn-spark {
  position: absolute; width: 16px; height: 16px; opacity: 0;
  background: var(--pp-yellow); clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}
.turn-spark.is-on { animation: sparkPop 900ms ease-out forwards; }
@keyframes sparkPop { 0% { opacity: 0; transform: scale(.3); } 35% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(.4) translateY(-30px); } }

/* ---------- Demo ---------- */
.demo [data-sc-stage] { display: grid; place-items: center; gap: var(--sc-5); background: linear-gradient(180deg, #fff, var(--pp-cream) 140%); padding: var(--sc-section) var(--sc-gutter); grid-template-columns: 1fr; }
.demo__intro { max-width: 36ch; text-align: center; }
.demo__panel {
  width: min(94vw, 420px); background: #fff; border-radius: 28px; padding: var(--sc-5);
  border: 2.5px solid var(--sc-ink); box-shadow: 0 10px 0 color-mix(in srgb, var(--sc-ink) 85%, transparent);
  position: relative;
}
.demo__panel-label { font-weight: 700; color: var(--sc-ink-soft); font-size: .82rem; margin: 0 0 var(--sc-3); }
.demo__lines { list-style: none; padding: 0; margin: 0 0 var(--sc-3); display: grid; gap: .5rem; }
.demo__lines li { display: flex; justify-content: space-between; font-weight: 700; }
.demo__lines li span { color: var(--sc-accent); }
.demo__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px dashed color-mix(in srgb, var(--sc-ink) 20%, transparent); padding-top: var(--sc-3); font-family: var(--sc-font-display); }
.demo__total strong { font-size: 1.6rem; color: var(--pp-green-ink); font-variant-numeric: tabular-nums; }
.demo__sent { display: flex; gap: .5rem; margin-top: var(--sc-3); flex-wrap: wrap; }
.demo__badge { font-size: .78rem; font-weight: 800; padding: .35rem .8rem; border-radius: 999px; background: var(--pp-cream); color: var(--sc-ink); }
.demo__badge--mileage { background: var(--pp-green); color: var(--pp-green-ink); }
.demo__foot { font-size: .82rem; color: var(--sc-ink-soft); margin: var(--sc-3) 0 0; font-weight: 600; }
.demo__mascots { position: absolute; right: -20px; bottom: -10px; width: 190px; display: none; }
@media (min-width: 900px) {
  .demo [data-sc-stage] { grid-template-columns: 1fr 1fr; }
  .demo__intro { text-align: left; }
  .demo__mascots { display: block; }
}

/* ---------- Pricing ---------- */
.price-toggle { display: inline-flex; background: #fff; border-radius: 999px; padding: .3rem; border: 2px solid color-mix(in srgb, var(--sc-ink) 16%, transparent); gap: .2rem; margin-top: var(--sc-3); }
.price-toggle__opt { font-family: var(--sc-font-text); font-weight: 800; font-size: .85rem; border: none; background: transparent; color: var(--sc-ink-soft); padding: .55rem 1rem; border-radius: 999px; cursor: pointer; display: flex; align-items: center; gap: .35rem; transition: background 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out); }
.price-toggle__opt span { font-size: .68rem; background: var(--pp-yellow); color: var(--sc-ink); padding: .1rem .4rem; border-radius: 999px; }
.price-toggle__opt.is-active { background: var(--sc-accent); color: #fff; animation: togglePop 420ms var(--sc-ease-out); }
@keyframes togglePop { 0% { transform: scale(.88); } 55% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* the peeking mascots sit 56-58px above the card's own top edge, so the
   stage needs enough top clearance to keep them clear of the floating nav
   pill, not just the cards themselves. */
.pricing [data-sc-stage] { padding-top: clamp(8.5rem, 16vh, 11rem); }
.rail { display: flex; gap: var(--sc-7); align-items: stretch; padding: 0 var(--sc-gutter); }
.rail__lead { flex: 0 0 min(86vw, 420px); display: flex; flex-direction: column; justify-content: center; }
.price-card {
  flex: 0 0 clamp(21rem, 34vw, 27rem); background: #fff; border-radius: 28px; padding: var(--sc-6);
  border: 2.5px solid var(--sc-ink); position: relative; display: flex; flex-direction: column; gap: .7rem;
  box-shadow: 0 8px 0 color-mix(in srgb, var(--sc-ink) 85%, transparent);
  margin-top: 56px;
}
.rail__note { flex: 0 0 min(76vw, 420px); display: flex; align-items: center; }
.rail__tail { flex: 0 0 38vw; }
.price-card--pop { background: var(--pp-cream); border-color: var(--pp-green-ink); }
.price-card__flag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--pp-green); color: var(--pp-green-ink); font-weight: 800; font-size: .72rem; padding: .3rem .8rem; border-radius: 999px; box-shadow: 0 3px 0 color-mix(in srgb, var(--pp-green) 55%, #000 15%); }
.price-card__mascot {
  position: absolute; top: -58px; right: 14px; width: 110px; pointer-events: none;
  filter: drop-shadow(0 6px 8px rgba(18,59,66,.22));
}
.price-card h3 { font-family: var(--sc-font-display); font-size: 1.3rem; margin: .6rem 0 0; }
.price-card__amt { font-family: var(--sc-font-display); font-size: 2.4rem; margin: 0; position: relative; min-height: 1.2em; }
.price-card__amt small { font-size: 1rem; color: var(--sc-ink-soft); font-weight: 700; }
.price-card--pop .price-card__amt { font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.price-card--pop .price-card__amt [data-price-period] { display: block; }
.price-card--pop .price-card__amt [data-price-period][hidden] { display: none; }
.price-card__for { color: var(--sc-ink-soft); font-weight: 700; margin: 0; }
.price-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; font-weight: 700; font-size: .92rem; }
.price-card li::before { content: "✓ "; color: var(--pp-green-ink); }

/* ---------- Close ---------- */
.close [data-sc-stage] { display: grid; place-items: center; text-align: center; gap: var(--sc-4); background: #106478; color: #fff; padding: var(--sc-section) var(--sc-gutter); position: relative; }
.close .sc-display { color: #fff; }
.close__mascots {
  width: min(32vw, 260px); margin-bottom: var(--sc-2); filter: drop-shadow(0 8px 10px rgba(0,0,0,.25));
}
.close__platforms { display: flex; gap: .6rem; font-weight: 800; color: #fff; opacity: .9; }
.close__platforms span:nth-child(even) { opacity: .6; }
.foot {
  position: absolute; bottom: var(--sc-3); left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4);
  padding: 0 var(--sc-gutter); font-size: .78rem; color: #fff; opacity: .75;
}
.foot__links { display: flex; gap: var(--sc-4); }
.foot__links a { color: #fff; text-decoration: none; }
.foot__links a:hover { text-decoration: underline; }
@media (max-width: 640px) { .foot { flex-direction: column; gap: .3rem; text-align: center; } }