/* ============================================================
   Handova — Playful layer
   ------------------------------------------------------------
   Bright palette, cartoon characters and motion, layered on top
   of styles.css. Loaded LAST, so removing the one <link> returns
   the site to the restrained original — nothing below is
   destructive.

   Two things are kept intact no matter how loud it gets:

     Contrast   text stays dark charcoal on light tints, and
                white only on fully saturated fills.
     Motion     styles.css already kills every animation under
                prefers-reduced-motion with !important, and that
                still wins over everything here.
   ============================================================ */

:root {
  --joy-red:    #FF5A5F;
  --joy-orange: #FF9F1C;
  --joy-yellow: #FFD166;
  --joy-green:  #06D6A0;
  --joy-teal:   #2EC4F1;
  --joy-blue:   #4D6DFF;
  --joy-purple: #9B5DE5;
  --joy-pink:   #FF6FB5;

  --joy-ink:    #241C3B;   /* the dark we print on colour */
  --joy-cream:  #FFF9F0;

  /* The bright palette above is for FILLS. Anything that has to be
     read — body text, links, a glyph carrying meaning — uses these
     deeper siblings instead, which clear WCAG AA on cream and white. */
  --joy-purple-ink: #7B3FD4;   /* 5.7:1 on cream */
  --joy-blue-ink:   #2F4FE0;   /* 5.3:1 on white */
  --joy-teal-ink:   #0C6E99;   /* 4.7:1 on white */
  --joy-green-ink:  #04835F;   /* icon-safe green */
  --joy-orange-ink: #B8600A;   /* icon-safe orange */
}

body { background-color: var(--joy-cream); }


/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */
.site-header { background-color: rgba(255, 249, 240, 0.86); }
.site-header.is-scrolled { background-color: rgba(255, 255, 255, 0.94); }

.logo-mark {
  background: var(--joy-purple-ink);
  animation: toon-pulse 4s var(--ease) infinite;
}
.logo:hover .logo-mark { transform: rotate(-12deg) scale(1.08); }

.nav-link::after {
  background: var(--joy-purple-ink);
  height: 3px;
}


/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */
/* Flat purple, white label (5.7:1). */
.btn-primary {
  background: var(--joy-purple-ink);
  border-color: transparent;
}
.btn-primary:hover { background: #6A2FC4; }

.btn-secondary { border-color: var(--joy-purple-ink); color: var(--joy-purple-ink); }
.btn-secondary:hover { border-color: #6A2FC4; color: #6A2FC4; }

.btn-invert { color: var(--joy-purple-ink); }


/* ------------------------------------------------------------
   HERO — a slow rainbow wash and a sky of floating things
   ------------------------------------------------------------ */
/* One flat colour, no gradients (the photo, when shown, covers it). */
.hero { background: var(--joy-cream); }
.hero::before { display: none; }          /* the old restrained glow */

.hero-title { color: var(--joy-ink); }
.hero-title .text-accent { color: var(--joy-purple-ink); }

.eyebrow { color: var(--joy-purple-ink); }

/* Balloons, stars and clouds. Decorative only. */
.toon-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.toon-sky > * { position: absolute; }

.toon-balloon { animation: toon-drift 14s ease-in-out infinite; }
.toon-balloon:nth-child(2) { animation-duration: 18s; animation-delay: -4s; }
.toon-balloon:nth-child(3) { animation-duration: 16s; animation-delay: -8s; }

.toon-star { animation: toon-twinkle 3.5s ease-in-out infinite; }
.toon-star:nth-of-type(even) { animation-delay: -1.4s; }

.hero-grid { position: relative; z-index: 1; }


/* ------------------------------------------------------------
   CARTOON CHARACTERS
   ------------------------------------------------------------ */
.toon { display: block; }

.toon-bob { animation: toon-bob 3s ease-in-out infinite; transform-origin: 50% 100%; }
.toon-bob-slow { animation: toon-bob 4.4s ease-in-out infinite; animation-delay: -1s; }

/* The waving arm pivots at the shoulder. */
.toon-wave {
  animation: toon-wave 1.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 8%;
}

.toon-scene {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

/* Bottom-right: the pickup notice slides in at bottom-left. */
.hero-toon {
  position: absolute;
  right: -3.25rem;
  bottom: -4.25rem;
  width: 118px;
  z-index: 2;
  filter: drop-shadow(0 10px 18px rgba(36, 28, 59, 0.18));
}


/* ------------------------------------------------------------
   SECTIONS
   ------------------------------------------------------------ */
.section-alt { background-color: #FFFFFF; }
.section-title { color: var(--joy-ink); }

/* Flat bands, alternating white and a pale purple. */
#problem  { background: transparent; }
#solution { background: #FFFFFF; }
#product  { background: #F7F2FE; }
#for-parents { background: #FFFFFF; }
.security { background: #F7F2FE; }


/* ------------------------------------------------------------
   CARDS — a different hue each, and a little spring
   ------------------------------------------------------------ */
.card {
  border-radius: 22px;
  border-width: 2px;
  transition:
    transform var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}
.card:hover { transform: translateY(-6px) rotate(-0.6deg); }

.card-icon {
  border-radius: 16px;
  border: 0;
  color: var(--joy-ink);
  transition: transform var(--t-base) var(--ease);
}
.card:hover .card-icon {
  transform: rotate(-10deg) scale(1.14);
  color: var(--joy-ink);
  border: 0;
}

.card-grid > .card:nth-child(6n+1) .card-icon { background: var(--joy-pink); }
.card-grid > .card:nth-child(6n+2) .card-icon { background: var(--joy-teal); }
.card-grid > .card:nth-child(6n+3) .card-icon { background: var(--joy-orange); }
.card-grid > .card:nth-child(6n+4) .card-icon { background: var(--joy-purple); }
.card-grid > .card:nth-child(6n+5) .card-icon { background: var(--joy-green); }
.card-grid > .card:nth-child(6n+6) .card-icon { background: var(--joy-blue); }

.card-grid > .card:nth-child(6n+1):hover { border-color: var(--joy-pink); }
.card-grid > .card:nth-child(6n+2):hover { border-color: var(--joy-teal); }
.card-grid > .card:nth-child(6n+3):hover { border-color: var(--joy-orange); }
.card-grid > .card:nth-child(6n+4):hover { border-color: var(--joy-purple); }
.card-grid > .card:nth-child(6n+5):hover { border-color: var(--joy-green); }
.card-grid > .card:nth-child(6n+6):hover { border-color: var(--joy-blue); }


/* ------------------------------------------------------------
   SOLUTION FLOW — each stop its own colour, hopping in turn
   ------------------------------------------------------------ */
.flow {
  border-radius: 28px;
  border-width: 2px;
  background: #FFFFFF;
}
.flow-icon {
  border: 0;
  color: var(--joy-ink);
  width: 58px;
  height: 58px;
}
.flow > li:nth-child(1)  .flow-icon { background: var(--joy-pink); }
.flow > li:nth-child(3)  .flow-icon { background: var(--joy-orange); }
.flow > li:nth-child(5)  .flow-icon { background: var(--joy-yellow); color: var(--joy-ink); }
.flow > li:nth-child(7)  .flow-icon { background: var(--joy-green); }
.flow > li:nth-child(9)  .flow-icon { background: var(--joy-teal); }
.flow > li:nth-child(11) .flow-icon { background: var(--joy-purple); }

.flow-label { color: var(--joy-ink); }

/* A hop that runs along the row once the diagram is seen. */
.js .flow.is-visible .flow-icon { animation: toon-hop 900ms var(--ease) backwards; }
.flow-step:hover .flow-icon { transform: translateY(-6px) rotate(8deg); }


/* ------------------------------------------------------------
   STEPS
   ------------------------------------------------------------ */
.step-icon {
  border-radius: 16px;
  color: var(--joy-ink);
}
.steps > .step:nth-child(1) .step-icon { background: var(--joy-pink); }
.steps > .step:nth-child(2) .step-icon { background: var(--joy-orange); }
.steps > .step:nth-child(3) .step-icon { background: var(--joy-green); }
.steps > .step:nth-child(4) .step-icon { background: var(--joy-purple); }
.step-number { color: var(--joy-purple-ink); font-weight: 700; }
.step::after { background: var(--joy-purple-ink); height: 3px; }


/* ------------------------------------------------------------
   SECURITY
   ------------------------------------------------------------ */
.security-icon { color: var(--joy-green-ink); }
.security-grid > .security-item:nth-child(2) .security-icon { color: var(--joy-teal-ink); }
.security-grid > .security-item:nth-child(3) .security-icon { color: var(--joy-orange-ink); }
.security-grid > .security-item:nth-child(4) .security-icon { color: var(--joy-purple-ink); }


/* ------------------------------------------------------------
   PRICING
   ------------------------------------------------------------ */
.plan { border-radius: 24px; border-width: 2px; }
.plan:hover { transform: translateY(-6px); }
.plan-name { color: var(--joy-purple-ink); }
.plan-amount { color: var(--joy-purple-ink); }
.plan-featured { border-color: var(--joy-purple); }
.plan-badge {
  background: var(--joy-purple-ink);
  color: #FFFFFF;
}
.plan-features .icon { color: var(--joy-green-ink); }


/* ------------------------------------------------------------
   FAQ
   ------------------------------------------------------------ */
.faq-question:hover { color: var(--joy-purple-ink); }
.faq-question[aria-expanded="true"] .faq-chevron { color: var(--joy-pink); }


/* ------------------------------------------------------------
   FINAL CTA — confetti
   ------------------------------------------------------------ */
.cta {
  /* Flat purple, dark enough to carry the white heading and buttons. */
  background: #5B2FB0;
  overflow: hidden;
}
.cta-lines { opacity: 0.5; }

.toon-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.toon-confetti i {
  position: absolute;
  top: -14px;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.85;
  animation: toon-fall linear infinite;
}


/* ------------------------------------------------------------
   CONTACT & FOOTER
   ------------------------------------------------------------ */
.contact { background: #FFFFFF; }
/* Brand lavender, not a joy fill: these sit beside the purple form
   button and read as one set with it, in both themes. */
.contact-icon { background: var(--accent-soft); border: 0; color: var(--accent); }
.contact-panel { border-radius: 24px; border-width: 2px; }

.site-footer { background-color: #FFFFFF; }
.footer-social a:hover { border-color: var(--joy-pink); color: var(--joy-pink); }


/* ------------------------------------------------------------
   DOCUMENT PAGES
   ------------------------------------------------------------ */
.doc-title { color: var(--joy-ink); }
.help-card { border-radius: 22px; border-width: 2px; }
.help-card:hover { transform: translateY(-6px) rotate(-0.6deg); }
.help-icon { border: 0; color: var(--joy-ink); background: var(--joy-yellow); }
.help-grid > .help-card:nth-child(2) .help-icon { background: var(--joy-pink); }
.help-grid > .help-card:nth-child(3) .help-icon { background: var(--joy-orange); }
.help-grid > .help-card:nth-child(4) .help-icon { background: var(--joy-purple); }


/* ------------------------------------------------------------
   KEYFRAMES
   ------------------------------------------------------------ */

@keyframes toon-slide {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes toon-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(1.5deg); }
}

@keyframes toon-wave {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-22deg); }
  75%      { transform: rotate(14deg); }
}

@keyframes toon-drift {
  0%, 100% { transform: translateY(0) translateX(0) rotate(-3deg); }
  33%      { transform: translateY(-22px) translateX(10px) rotate(3deg); }
  66%      { transform: translateY(-10px) translateX(-8px) rotate(-2deg); }
}

@keyframes toon-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.85) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.12) rotate(18deg); }
}

@keyframes toon-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

@keyframes toon-hop {
  0%   { transform: translateY(0)     scale(1); }
  35%  { transform: translateY(-14px) scale(1.12); }
  60%  { transform: translateY(0)     scale(0.96); }
  100% { transform: translateY(0)     scale(1); }
}

@keyframes toon-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.9; }
  100% { transform: translateY(120vh) rotate(680deg); opacity: 0.9; }
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  /* The hero character would sit on top of the mockup here. */
  .hero-toon { width: 92px; right: -0.75rem; bottom: -3.5rem; }
  /* Once the copy spans the full width these would sit behind it. */
  .toon-wide-only { display: none; }
}

@media (max-width: 620px) {
  .hero-toon { display: none; }
  .toon-balloon { transform: scale(0.7); }
  .card { border-radius: 18px; }
}

/* The stage the handover scene sits on. */
.toon-stage {
  display: grid;
  place-items: center;
  margin-bottom: var(--space-6);
}

.toon-cloud { opacity: 0.9; filter: drop-shadow(0 6px 10px rgba(36, 28, 59, 0.06)); }


/* Flat-illustration colours (.fl, .f-*) live in
   packages/design-system/illustrations.css, shared with the auth screens. */

.cta-illus {
  width: 100%;
  max-width: 460px;
  margin: 0 auto var(--space-5);
}

.hero-illus { filter: drop-shadow(0 18px 30px rgba(36, 28, 59, 0.08)); }

/* The pickup notice sits in the open sky, top-left, clear of the
   people walking along the bottom of the scene. */
.hero-visual .mock-toast { top: 4%; bottom: auto; left: 0; }




/* ------------------------------------------------------------
   DARK THEME
   ------------------------------------------------------------
   Everything above paints light surfaces and dark ink, written
   when the site had one theme. Under data-theme="dark" the
   surfaces and text go back to the tokens, and the colour stays
   in the fills, gradients and characters — which read fine on
   navy.
   ------------------------------------------------------------ */
:root[data-theme="dark"] body { background-color: var(--bg); }

:root[data-theme="dark"] .site-header { background-color: var(--header-bg); }
:root[data-theme="dark"] .site-header.is-scrolled { background-color: var(--header-bg-scrolled); }

:root[data-theme="dark"] .hero { background: var(--bg); }

:root[data-theme="dark"] .hero-title,
:root[data-theme="dark"] .section-title,
:root[data-theme="dark"] .doc-title,
:root[data-theme="dark"] .flow-label { color: var(--text); }

:root[data-theme="dark"] .eyebrow,
:root[data-theme="dark"] .step-number,
:root[data-theme="dark"] .plan-name,
:root[data-theme="dark"] .faq-question:hover { color: #C4A3F5; }

:root[data-theme="dark"] .security-icon { color: var(--joy-green); }
:root[data-theme="dark"] .security-grid > .security-item:nth-child(2) .security-icon { color: var(--joy-teal); }
:root[data-theme="dark"] .security-grid > .security-item:nth-child(3) .security-icon { color: var(--joy-orange); }
:root[data-theme="dark"] .security-grid > .security-item:nth-child(4) .security-icon { color: #C4A3F5; }
:root[data-theme="dark"] .plan-features .icon { color: var(--joy-green); }

:root[data-theme="dark"] .section-alt,
:root[data-theme="dark"] .flow,
:root[data-theme="dark"] .site-footer { background-color: var(--bg-alt); }

:root[data-theme="dark"] #problem     { background: transparent; }
:root[data-theme="dark"] #solution    { background: var(--bg-alt); }
:root[data-theme="dark"] #product     { background: #16112A; }
:root[data-theme="dark"] #for-parents { background: var(--bg-alt); }
:root[data-theme="dark"] .security    { background: #16112A; }
:root[data-theme="dark"] .contact     { background: var(--bg-alt); }

:root[data-theme="dark"] .toon-cloud { opacity: 0.12; }