/* Zivaro Kids — clean playful visual system, July 2026 */

:root {
  --zv-ink: #17233c;
  --zv-ink-soft: #34435c;
  --zv-muted: #596779;
  --zv-canvas: #fbfaf7;
  --zv-surface: #ffffff;
  --zv-line: #e3e6ec;
  --zv-primary: #6556d8;
  --zv-primary-dark: #4d3fbd;
  --zv-teal: #167d79;
  --zv-coral: #d9534f;
  --zv-yellow: #f6ca52;
  --zv-lavender: #f1eeff;
  --zv-mint: #e9f7f3;
  --zv-sky: #eaf4ff;
  --zv-peach: #fff0ea;
  --zv-sun: #fff6d8;
  --zv-shadow-sm: 0 0.5rem 1.5rem rgb(23 35 60 / 8%);
  --zv-shadow-md: 0 1.25rem 3.5rem rgb(23 35 60 / 11%);
  --zv-radius-sm: 1rem;
  --zv-radius-md: 1.5rem;
  --zv-radius-lg: 2.25rem;
  --page-width: 75rem;
}

/* Shared site icon system: local Microsoft Fluent Emoji SVGs. */
:where(.ph-duotone, .ph-bold, .ph-fill, .ph-regular, .ph-light, .ph-thin) {
  width: 1em;
  height: 1em;
  display: inline-block;
  flex: 0 0 auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: transparent !important;
  font-family: inherit !important;
  line-height: 1;
  vertical-align: -0.14em;
  filter: drop-shadow(0 0.16em 0.13em rgb(38 32 74 / 13%));
}

:where(.ph-duotone, .ph-bold, .ph-fill, .ph-regular, .ph-light, .ph-thin)::before {
  display: none !important;
  content: none !important;
}

.ph-baby { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/381ca18b2ce9/baby_color_default.svg"); }
.ph-book-open-text { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/ddd214b2383b/open_book_color.svg"); }
.ph-books { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/2e27d282f5b3/books_color.svg"); }
.ph-brain { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/d6966211f67f/brain_color.svg"); }
.ph-calculator { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/fda7a1016cb0/abacus_color.svg"); }
.ph-caret-down { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/280df86ba746/down_arrow_color.svg"); }
.ph-chats-circle { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/3166b258bd24/speech_balloon_color.svg"); }
.ph-check-circle { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/558fde80fa65/check_mark_button_color.svg"); }
.ph-clock { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/838484b485d0/alarm_clock_color.svg"); }
.ph-desktop { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/705633f53bd7/desktop_computer_color.svg"); }
.ph-device-tablet { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/0109d1473297/mobile_phone_color.svg"); }
.ph-envelope-simple { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/6e5e75f48510/e-mail_color.svg"); }
.ph-flask { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/0c08cdfea331/alembic_color.svg"); }
.ph-game-controller { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/cb2c8d6d1aea/joystick_color.svg"); }
.ph-graduation-cap { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/49af35a1db99/graduation_cap_color.svg"); }
.ph-hand-tap { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/1551908afc67/backhand_index_pointing_up_color_default.svg"); }
.ph-heart { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/74b4451413a2/growing_heart_color.svg"); }
.ph-house { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/19a59311287d/house_color.svg"); }
.ph-image-square { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/3d18642efdaa/framed_picture_color.svg"); }
.ph-info { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/688b32a60051/information_color.svg"); }
.ph-keyboard { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/d483bfb37cfe/keyboard_color.svg"); }
.ph-leaf { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/0d45f7f42154/seedling_color.svg"); }
.ph-map-trifold { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/39bb2cf3dec4/world_map_color.svg"); }
.ph-mouse { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/d0ffa7e4c0d7/computer_mouse_color.svg"); }
.ph-music-notes { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/6dab1458f674/musical_notes_color.svg"); }
.ph-number-circle-one { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/7ac7646a732f/keycap_1_color.svg"); }
.ph-paint-brush { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/38c45f9c859b/paintbrush_color.svg"); }
.ph-palette { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/078b2287b45e/artist_palette_color.svg"); }
.ph-planet { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/c13e139a3056/ringed_planet_color.svg"); }
.ph-plus { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/74fba95c94b2/plus_color.svg"); }
.ph-puzzle-piece { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/2be6da460d1d/puzzle_piece_color.svg"); }
.ph-question { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/aa59f7cfe293/red_question_mark_color.svg"); }
.ph-rocket-launch { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/3e759cbfacd8/rocket_color.svg"); }
.ph-shapes { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/75713fe22ea5/input_symbols_color.svg"); }
.ph-sparkle { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/27103e1c2096/sparkles_color.svg"); }
.ph-strategy { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/5cbf7ab9328f/chess_pawn_color.svg"); }
.ph-student { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/49af35a1db99/graduation_cap_color.svg"); }
.ph-users { background-image: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/af0afcbb4f79/busts_in_silhouette_color.svg"); }

html {
  scroll-padding-top: 5.5rem;
}

body {
  background: var(--zv-canvas);
  color: var(--zv-ink);
  font-family: var(--font-body);
}

main {
  overflow: hidden;
}

section[id] {
  scroll-margin-top: 5.5rem;
}

h1,
h2,
h3,
h4,
strong {
  color: var(--zv-ink);
}

p,
li {
  color: var(--zv-muted);
}

.section-kicker {
  color: var(--zv-primary-dark);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.025em;
}

.section-lead,
.section-heading-row > p {
  color: var(--zv-muted);
}

.zv-section-heading,
.section-heading-row h2 {
  color: var(--zv-ink);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

/* Kicker text now follows its heading across the site. */
h1:has(+ .section-kicker),
h2:has(+ .section-kicker),
h3:has(+ .section-kicker) {
  margin-block-end: 0.4rem;
}

h1 + .section-kicker,
h2 + .section-kicker,
h3 + .section-kicker {
  margin-block-start: 0;
  margin-block-end: clamp(0.8rem, 1.8vw, 1.2rem);
}

.zv-title:has(+ .zv-eyebrow) {
  margin-block-end: 0.55rem;
}

.zv-title + .zv-eyebrow {
  margin-block-start: 0;
  margin-block-end: 1rem;
}

.text-link,
.article-section a,
.legal-inline-links a {
  color: #176481;
  font-weight: 850;
  text-decoration-thickness: 0.08rem;
  text-underline-offset: 0.22rem;
}

.check-list li {
  position: relative;
  padding-inline-start: 1.7rem;
}

.check-list li::before {
  position: absolute;
  inset-block-start: 0.08em;
  inset-inline-start: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  background: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/558fde80fa65/check_mark_button_color.svg") center / contain no-repeat;
  color: transparent;
  content: "";
  text-shadow: none;
}

:focus-visible {
  outline: 0.2rem solid #247d9d;
  outline-offset: 0.2rem;
}

/* Buttons */
.btn {
  min-height: 3rem;
  gap: 0.5rem;
  padding-inline: 1.25rem;
  border: 1px solid transparent;
  border-radius: 1rem;
  box-shadow: none;
  font-weight: 900;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-0.12rem);
}

.btn-primary,
.header-cta,
.hub-cta .btn-primary,
.footer-action .btn-primary {
  border-color: var(--zv-primary);
  background: var(--zv-primary);
  box-shadow: 0 0.38rem 0 var(--zv-primary-dark), 0 0.75rem 1.5rem rgb(101 86 216 / 20%);
  color: #ffffff;
}

.btn-primary span,
.btn-primary i,
.header-cta span,
.header-cta i {
  color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--zv-primary-dark);
}

.btn-secondary,
.zv-hero .btn-secondary,
.content-hero .btn-secondary,
.hub-cta-row .btn-secondary {
  border-color: #cbd4df;
  background: #ffffff;
  box-shadow: 0 0.28rem 0 #d9dfe7;
  color: var(--zv-ink);
}

.btn-secondary:hover,
.btn-secondary:focus-visible,
.hub-cta-row .btn-secondary:hover,
.hub-cta-row .btn-secondary:focus-visible {
  border-color: #aeb8c6;
  background: #f5f7fa;
  color: var(--zv-ink);
}

/* Announcement and sticky header */
.zv-announcement {
  min-height: 2rem;
  padding: 0.38rem var(--gutter);
  border: 0;
  background: var(--zv-ink);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 750;
  text-align: center;
}

.zv-announcement strong {
  color: #ffffff;
}

.home-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  width: 100%;
  max-width: none;
  min-height: 4.6rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 0.55rem max(var(--gutter), calc((100vw - var(--page-width)) / 2));
  border: 0;
  border-bottom: 1px solid rgb(23 35 60 / 8%);
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 0.5rem 1.5rem rgb(23 35 60 / 7%);
  backdrop-filter: blur(1rem) saturate(1.15);
}

.home-brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  color: var(--zv-ink);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
}

.home-brand::before,
.footer-brand::before {
  display: none;
}

.brand-character-placeholder {
  position: relative;
  width: 2.65rem;
  height: 2.65rem;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 0.9rem;
  background: linear-gradient(145deg, #7466e2, #5547c8);
  box-shadow: 0 0.3rem 0 #4035a5, 0 0.7rem 1.35rem rgb(101 86 216 / 18%);
  transform: rotate(-3deg);
}

.brand-character-placeholder::before,
.brand-character-placeholder::after {
  display: none;
}

.brand-character-placeholder i {
  color: #ffffff;
  font-size: 1.45rem;
}

.brand-character-logo {
  width: 4.15rem;
  height: 4.15rem;
  display: block;
  flex: 0 0 auto;
  margin-block: -0.35rem;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.brand-character-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0.28rem 0.28rem rgb(23 35 60 / 16%));
}

.brand-wordmark {
  direction: ltr;
  display: inline-flex;
  align-items: baseline;
  gap: 0.24rem;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", var(--font-display);
  font-size: 1.08rem;
  font-weight: 950;
  letter-spacing: 0.035em;
  line-height: 1;
  text-transform: uppercase;
}

.brand-wordmark-main {
  color: var(--zv-ink);
  text-shadow: 0 0.1rem 0 rgb(255 255 255 / 80%);
}

.brand-wordmark-kids {
  background: linear-gradient(90deg, var(--zv-primary-dark), var(--zv-coral), #c68808);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.home-brand {
  position: relative;
  isolation: isolate;
  padding: 0.55rem 0.88rem;
  border: 0.12rem solid transparent;
  border-radius: 1.35rem;
  background:
    linear-gradient(135deg, #204874, #172f52) padding-box,
    linear-gradient(110deg, var(--zv-primary), var(--zv-teal), var(--zv-yellow), var(--zv-coral), var(--zv-primary)) border-box;
  background-position: 0 0, 0% 50%;
  background-size: 100% 100%, 280% 100%;
  box-shadow: 0 0 0.85rem rgb(101 86 216 / 28%), 0 0 1.65rem rgb(22 125 121 / 14%);
  animation: footer-brand-glow 12s ease-in-out infinite;
}

.home-brand .brand-wordmark-main {
  color: #f5f8ff;
  text-shadow: 0 0 0.55rem rgb(202 220 255 / 24%);
}

.home-brand .brand-wordmark-kids {
  background: linear-gradient(90deg, #a99cff, #ff817c, #ffd45e);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.home-header .primary-navigation {
  min-width: 0;
  margin: 0;
}

.home-header .site-nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.2rem;
}

.home-header .site-nav > li {
  position: relative;
}

.home-header .site-nav a,
.nav-menu > summary {
  min-height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 0.8rem;
  background: transparent;
  color: var(--zv-ink-soft);
  font-size: clamp(0.77rem, 0.85vw, 0.9rem);
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.home-header .site-nav a i,
.nav-menu > summary i:not(.nav-caret) {
  color: var(--zv-primary);
  font-size: 1.1rem;
}

.home-header .site-nav a:hover,
.home-header .site-nav a:focus-visible,
.nav-menu > summary:hover,
.nav-menu > summary:focus-visible,
.nav-menu[open] > summary {
  background: var(--zv-lavender);
  color: var(--zv-ink);
}

.home-header .site-nav a[aria-current="page"],
.nav-menu[data-active="true"] > summary {
  background: var(--zv-mint);
  color: #125b59;
}

.home-header .site-nav a[aria-current="page"] {
  padding: 0.55rem 0.7rem;
}

.home-header .site-nav a[aria-current="page"]::before,
.nav-menu[data-active="true"] > summary::before {
  display: none;
}

.nav-menu > summary {
  list-style: none;
}

.nav-menu > summary::-webkit-details-marker {
  display: none;
}

.nav-menu > summary .nav-label {
  color: inherit;
  transform: none;
}

.nav-menu[open] > summary .nav-label {
  transform: none;
}

.nav-caret {
  color: #6e7a8a;
  font-size: 0.78rem;
  transition: transform 150ms ease;
}

.nav-menu[open] .nav-caret {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  inset-block-start: calc(100% + 0.65rem);
  left: 50%;
  z-index: 120;
  width: min(20rem, calc(100vw - 2rem));
  max-height: min(32rem, calc(100vh - 7rem));
  padding: 0.55rem;
  overflow-y: auto;
  border: 1px solid var(--zv-line);
  border-radius: 1.25rem;
  background: #ffffff;
  box-shadow: var(--zv-shadow-md);
  transform: translateX(-50%);
}

.nav-dropdown ul {
  display: grid;
  gap: 0.22rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-header .nav-dropdown a {
  min-height: 2.75rem;
  justify-content: flex-start;
  padding: 0.65rem 0.8rem;
  border-radius: 0.8rem;
  background: transparent;
  color: var(--zv-ink-soft);
  font-size: 0.84rem;
  text-align: start;
  white-space: normal;
}

.home-header .nav-dropdown a:hover,
.home-header .nav-dropdown a:focus-visible {
  background: #f4f3fb;
  color: var(--zv-ink);
}

.home-header .header-cta {
  min-height: 2.75rem;
  padding-inline: 1rem;
  border-color: var(--zv-primary);
  box-shadow: 0 0.38rem 0 var(--zv-primary-dark), 0 0.75rem 1.5rem rgb(101 86 216 / 20%);
  font-size: 0.86rem;
}

.mobile-menu-toggle {
  min-height: 3.2rem;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.62rem;
  padding: 0.36rem 0.62rem 0.36rem 0.9rem;
  border: 0.12rem solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(135deg, #234d79, #172f52) padding-box,
    linear-gradient(110deg, var(--zv-primary), var(--zv-teal), var(--zv-yellow), var(--zv-coral)) border-box;
  box-shadow: 0 0.55rem 1.35rem rgb(23 35 60 / 22%), inset 0 1px 0 rgb(255 255 255 / 12%);
  color: #f7f9ff;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", var(--font-display);
  font-size: 0.9rem;
  font-weight: 950;
  letter-spacing: 0.015em;
  line-height: 1;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.mobile-menu-toggle:hover {
  box-shadow: 0 0.72rem 1.65rem rgb(57 46 132 / 30%), inset 0 1px 0 rgb(255 255 255 / 16%);
  transform: translateY(-1px);
}

.mobile-menu-toggle:active {
  box-shadow: 0 0.3rem 0.8rem rgb(23 35 60 / 24%), inset 0 1px 0 rgb(255 255 255 / 10%);
  transform: translateY(0) scale(0.98);
}

.mobile-menu-toggle:focus-visible {
  outline: 3px solid rgb(101 86 216 / 28%);
  outline-offset: 3px;
}

.mobile-menu-toggle[aria-expanded="true"] {
  background:
    linear-gradient(135deg, #6655da, #4034a8) padding-box,
    linear-gradient(110deg, #b9afff, #64d1c8, #ffd968, #ff8e88) border-box;
  box-shadow: 0 0.65rem 1.55rem rgb(72 56 174 / 34%), inset 0 1px 0 rgb(255 255 255 / 18%);
  color: #ffffff;
}

.mobile-menu-toggle[aria-expanded="true"]:hover {
  box-shadow: 0 0.8rem 1.8rem rgb(72 56 174 / 40%), inset 0 1px 0 rgb(255 255 255 / 22%);
}

.menu-label {
  min-width: 2.8rem;
  font: inherit;
  color: inherit;
  text-align: center;
}

.menu-icon {
  width: 2.05rem;
  height: 2.05rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff, #eeeaff);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 55%), 0 0.2rem 0.55rem rgb(8 18 38 / 18%);
  transition: background 160ms ease, transform 160ms ease;
}

.menu-icon i {
  width: 1.05rem;
  height: 0.12rem;
  display: block;
  border-radius: 99px;
  background: var(--zv-primary-dark);
  transition: transform 160ms ease, opacity 160ms ease, background 160ms ease;
}

.menu-icon i:nth-child(2) { background: var(--zv-coral); }
.menu-icon i:nth-child(3) { background: #b77c08; }

.mobile-menu-toggle[aria-expanded="true"] .menu-icon {
  background: linear-gradient(145deg, #fff8dc, #ffffff);
  transform: none;
}

.mobile-menu-toggle[aria-expanded="true"] .menu-icon i { background: var(--zv-ink); }
.mobile-menu-toggle[aria-expanded="true"] .menu-icon i:nth-child(1) { transform: translateY(0.34rem) rotate(45deg); }
.mobile-menu-toggle[aria-expanded="true"] .menu-icon i:nth-child(2) { opacity: 0; }
.mobile-menu-toggle[aria-expanded="true"] .menu-icon i:nth-child(3) { transform: translateY(-0.34rem) rotate(-45deg); }
.nav-mobile-cta { display: none; }

/* Shared content hero */
.content-page {
  background: var(--zv-canvas);
}

.content-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5.5rem);
  border: 0;
  background: var(--zv-canvas);
}

.content-hero::before {
  content: "";
  position: absolute;
  width: 30rem;
  height: 30rem;
  inset-inline-end: -13rem;
  inset-block-start: -15rem;
  border-radius: 50%;
  background: var(--zv-lavender);
}

.content-hero::after {
  content: "";
  position: absolute;
  width: 16rem;
  height: 16rem;
  inset-inline-start: -8rem;
  inset-block-end: -8rem;
  border-radius: 50%;
  background: var(--zv-mint);
}

.content-hero > .shell {
  position: relative;
  z-index: 1;
}

.breadcrumbs {
  margin-block-end: 1.8rem;
  color: #687587;
  font-size: 0.8rem;
}

.breadcrumbs ol {
  gap: 0.45rem;
}

.breadcrumbs a {
  color: #365a73;
  text-decoration-color: #b9c8d3;
  text-underline-offset: 0.2rem;
}

.breadcrumbs li:not(:last-child)::after {
  color: #8894a3;
}

.content-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.72fr);
  align-items: center;
  gap: clamp(2.5rem, 7vw, 6rem);
}

.content-hero h1 {
  max-width: 15ch;
  margin: 0 0 1rem;
  color: var(--zv-ink);
  font-family: var(--font-display);
  font-size: clamp(2.55rem, 5.5vw, 4.7rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.content-hero .direct-answer {
  max-width: 45rem;
  margin: 0;
  color: var(--zv-muted);
  font-size: clamp(1.02rem, 1.8vw, 1.2rem);
  font-weight: 650;
  line-height: 1.75;
}

.zv-actions {
  gap: 0.8rem;
  margin-block-start: 1.6rem;
}

.hub-visual {
  position: relative;
  min-height: 20rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: center;
  gap: 0.85rem;
  padding: 1.1rem;
  border: 1px solid var(--zv-line);
  outline: 0;
  border-radius: var(--zv-radius-lg);
  background: #ffffff;
  box-shadow: var(--zv-shadow-md);
  transform: none;
}

.hub-visual::before {
  content: "";
  position: absolute;
  width: 4.5rem;
  height: 4.5rem;
  inset-inline-start: -1.25rem;
  inset-block-start: -1.25rem;
  border-radius: 1.4rem;
  background: var(--zv-yellow);
  transform: rotate(12deg);
  z-index: -1;
}

.hub-visual .hub-icon-card,
.hub-visual > span {
  min-height: 8rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.55rem;
  padding: 0.8rem;
  border: 0;
  border-radius: 1.4rem;
  background: var(--zv-sky);
  box-shadow: none;
  color: #245b7d;
  font-family: var(--font-body);
  font-size: 1rem;
  text-align: center;
  transform: none;
}

.hub-visual .hub-icon-card:nth-child(2),
.hub-visual > span:nth-child(2) { background: var(--zv-sky); color: #245b7d; }
.hub-visual .hub-icon-card:nth-child(3),
.hub-visual > span:nth-child(3) { background: var(--zv-lavender); color: #5545b5; }
.hub-visual .hub-icon-card:nth-child(4),
.hub-visual > span:nth-child(4) { background: var(--zv-mint); color: #176962; }

.hub-icon-card i {
  color: currentColor;
  font-size: 2.6rem;
}

.hub-icon-card small {
  color: var(--zv-ink-soft);
  font-size: 0.78rem;
  font-weight: 850;
}

/* Shared section system */
.hub-intro,
.hub-section,
.related-section,
.zv-section,
.home-intro,
.ages-section,
.how-section,
.school-section,
.activities-section,
.tablet-section,
.faq-section,
.early-access-section {
  padding-block: clamp(4rem, 8vw, 6.5rem);
}

.hub-intro,
.home-intro,
.faq-section {
  background: #ffffff;
}

.hub-section,
.learning-worlds-section,
.activities-section {
  background: #f5f4fb;
}

.related-section,
.ages-section,
.tablet-section {
  background: #f8f6f1;
}

.how-section {
  background: #eef6fb;
}

.school-section {
  background: #f2f8f5;
}

.answer-panel {
  max-width: 58rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--zv-line);
  border-radius: var(--zv-radius-lg);
  background: #ffffff;
  box-shadow: var(--zv-shadow-sm);
}

.answer-panel h2,
.answer-panel strong {
  color: var(--zv-ink);
}

.answer-panel p {
  color: var(--zv-muted);
}

.hub-card-grid,
.parent-hub-grid,
.offer-grid,
.mechanics-grid,
.related-link-grid {
  gap: 1rem;
}

.hub-card,
.parent-guide-card,
.offer-card,
.age-card,
.home-skill-card,
.mechanic-card,
.info-card,
.contact-card,
.guide-list li,
.related-link-grid a,
.step-list li {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--zv-line);
  outline: 0;
  border-radius: var(--zv-radius-md);
  background: #ffffff;
  box-shadow: var(--zv-shadow-sm);
  color: var(--zv-ink);
  transform: none;
}

.hub-card:nth-child(3n + 1),
.hub-card:nth-child(3n + 2),
.hub-card:nth-child(3n),
.parent-guide-card:nth-child(2n) {
  background: #ffffff;
}

.hub-card::before,
.parent-guide-card::before,
.offer-card::before,
.age-card::before,
.home-skill-card::before,
.mechanic-card::before,
.info-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 0.3rem;
  background: var(--zv-primary);
}

.hub-card:nth-child(4n + 2)::before,
.parent-guide-card:nth-child(4n + 2)::before { background: var(--zv-teal); }
.hub-card:nth-child(4n + 3)::before,
.parent-guide-card:nth-child(4n + 3)::before { background: var(--zv-coral); }
.hub-card:nth-child(4n)::before,
.parent-guide-card:nth-child(4n)::before { background: var(--zv-yellow); }

.hub-card h2,
.hub-card h3,
.parent-guide-card h2,
.parent-guide-card h3,
.offer-card h2,
.offer-card h3,
.age-card h3,
.mechanic-card h3,
.info-card h2,
.info-card h3 {
  color: var(--zv-ink);
}

.hub-card p,
.hub-card li,
.parent-guide-card p,
.offer-card p,
.offer-card li,
.age-card p,
.mechanic-card p,
.info-card p,
.contact-card p,
.contact-card li {
  color: var(--zv-muted);
}

.hub-card-icon,
.world-symbol,
.skill-symbol,
.age-number {
  border: 0;
  border-radius: 1rem;
  background: var(--zv-lavender);
  box-shadow: none;
  color: var(--zv-primary-dark);
  transform: none;
}

.hub-card-icon i,
.world-symbol i,
.skill-symbol i {
  color: currentColor;
  font-size: 2.25rem;
}

.subskill-chips span,
.facts-band span,
.format-chip-grid span,
.device-chips li,
.footer-facts span {
  border: 1px solid #d8dee7;
  border-radius: 99px;
  background: #ffffff;
  color: var(--zv-ink-soft);
  box-shadow: none;
}

.skill-jump-nav {
  top: 5.25rem;
  border: 1px solid var(--zv-line);
  background: rgb(255 255 255 / 96%);
  box-shadow: var(--zv-shadow-sm);
}

.skill-jump-nav a {
  background: #f2f4f7;
  color: #31566d;
}

.skill-jump-nav a:hover,
.skill-jump-nav a:focus-visible {
  background: var(--zv-lavender);
  color: var(--zv-primary-dark);
}

.age-stage-strip div {
  border: 1px solid var(--zv-line);
  background: #ffffff;
  color: var(--zv-muted);
}

.age-stage-strip strong {
  color: var(--zv-ink);
}

.skill-card-details,
.faq-list details,
.learning-world,
.play-formats {
  overflow: hidden;
  border: 1px solid var(--zv-line);
  outline: 0;
  border-radius: 1.25rem;
  background: #ffffff;
  box-shadow: none;
  transform: none;
}

.skill-card-details summary,
.faq-list summary,
.learning-world summary,
.play-formats summary {
  color: var(--zv-ink);
  background: #ffffff;
}

.skill-card-details summary::after,
.learning-world summary::after {
  border: 0;
  background: var(--zv-lavender);
  color: var(--zv-primary-dark);
}

.world-content,
.skill-card-details > div {
  border-color: var(--zv-line);
  background: #fafbfc;
}

.world-content p,
.world-content li,
.skill-card-details p,
.skill-card-details li {
  color: var(--zv-muted);
}

.world-math,
.world-logic,
.world-memory,
.world-language,
.world-science,
.world-strategy,
.world-motor,
.world-creative,
.world-computer {
  background: #ffffff;
}

.learning-world summary {
  background: #ffffff;
}

.learning-world:hover,
.learning-world[open] {
  box-shadow: var(--zv-shadow-sm);
  transform: none;
}

.learning-world:nth-child(3n + 1),
.learning-world:nth-child(3n + 2),
.learning-world:nth-child(even) .world-symbol {
  transform: none;
}

.play-formats summary::after {
  color: var(--zv-primary-dark);
}

.faq-list details {
  box-shadow: var(--zv-shadow-sm);
}

.faq-list summary {
  min-height: 4rem;
  padding: 1rem 1.15rem;
}

.faq-list summary::after {
  width: 2rem;
  height: 2rem;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.7rem;
  background: var(--zv-lavender);
  color: var(--zv-primary-dark);
}

.faq-list details[open] summary {
  background: #f8f7fd;
}

.faq-list details > div,
.faq-list details > p {
  color: var(--zv-muted);
}

.offer-card.is-featured {
  border: 2px solid #aaa0ec;
  outline: 0;
  background: #faf9ff;
}

.age-page-note,
.takeaway-box,
.draft-notice,
.early-access-note {
  border: 1px solid #e7d59c;
  border-inline-start: 0.3rem solid #c9981f;
  border-radius: 1.15rem;
  background: var(--zv-sun);
  box-shadow: none;
  color: #5f4a1d;
}

.age-card.is-featured {
  border: 2px solid #aaa0ec;
  outline: 0;
  background: #faf9ff;
  transform: none;
}

.how-section .section-kicker {
  color: var(--zv-primary-dark);
}

.how-copy > p:last-child {
  color: var(--zv-muted);
}

.info-card::before {
  display: none;
}

.info-card-icon {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  margin-block-end: 1rem;
  place-items: center;
  border-radius: 1rem;
  background: var(--zv-lavender);
  color: var(--zv-primary-dark);
}

.info-card-icon i {
  color: currentColor;
  font-size: 1.7rem;
}

.age-page-note p,
.takeaway-box p,
.draft-notice p,
.early-access-note p {
  color: #5f4a1d;
}

.draft-notice strong,
.early-access-note strong {
  color: #5b4517;
}

/* Long-form pages */
.article-shell {
  grid-template-columns: minmax(0, 1fr) 16rem;
  gap: clamp(2rem, 5vw, 4rem);
}

.article-prose {
  padding: clamp(1.4rem, 3vw, 2.5rem);
  border: 1px solid var(--zv-line);
  border-radius: var(--zv-radius-lg);
  background: #ffffff;
  box-shadow: var(--zv-shadow-sm);
}

.article-section h2,
.article-section h3,
.article-toc strong {
  color: var(--zv-ink);
}

.article-section p,
.article-section li {
  color: var(--zv-muted);
}

.article-toc {
  top: 5.75rem;
  border: 1px solid var(--zv-line);
  border-radius: 1.25rem;
  background: #ffffff;
  box-shadow: var(--zv-shadow-sm);
}

.article-toc a {
  color: #31566d;
}

.do-dont-grid > div {
  border: 1px solid #cfe5dd;
  background: #eff8f4;
}

.do-dont-grid > div:last-child {
  border-color: #ecd9d2;
  background: #fff3ee;
}

.do-dont-grid h3 {
  color: var(--zv-ink);
}

/* Homepage hero */
.zv-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 7rem);
  background: var(--zv-canvas);
  color: var(--zv-ink);
}

.zv-hero::before {
  content: "";
  position: absolute;
  width: 36rem;
  height: 36rem;
  inset-inline-end: -18rem;
  inset-block-start: -19rem;
  border-radius: 50%;
  background: var(--zv-lavender);
}

.zv-hero::after {
  content: "";
  position: absolute;
  width: 20rem;
  height: 20rem;
  inset-inline-start: -9rem;
  inset-block-end: -10rem;
  border-radius: 50%;
  background: var(--zv-mint);
}

.zv-hero-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1.05fr) minmax(25rem, 0.95fr);
  gap: clamp(3rem, 8vw, 7rem);
}

.zv-eyebrow {
  border: 1px solid #d7d2f5;
  background: #ffffff;
  box-shadow: none;
  color: var(--zv-primary-dark);
}

.zv-title {
  color: var(--zv-ink);
  font-size: clamp(2.8rem, 6.3vw, 5.5rem);
  line-height: 1.01;
  letter-spacing: -0.045em;
}

.zv-title-cyan {
  color: var(--zv-teal);
}

.zv-title-gold {
  color: var(--zv-coral);
  text-shadow: none;
}

.zv-lead,
.zv-hero .zv-trust {
  color: var(--zv-muted);
}

.zv-trust {
  max-width: 44rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-block-start: 1.7rem;
}

.zv-benefits-heading {
  display: none;
}

.zv-trust span::before {
  display: none;
}

.trust-item {
  position: relative;
  min-height: 4.8rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--zv-line);
  border-radius: 1.15rem;
  background: #ffffff;
  box-shadow: var(--zv-shadow-sm);
  color: inherit;
  text-decoration: none;
  text-align: start;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.trust-item:hover {
  border-color: #aaa0e8;
  box-shadow: 0 0.8rem 1.8rem rgb(78 61 173 / 14%);
  transform: translateY(-0.16rem);
}

.trust-item:focus-visible {
  outline: 3px solid rgb(100 78 223 / 38%);
  outline-offset: 3px;
}

.trust-icon {
  width: 3.1rem;
  height: 3.1rem;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 0.3rem 0.28rem rgb(38 32 74 / 14%));
}

@media (min-width: 52.001rem) {
  .zv-hero-grid {
    grid-template-areas:
      "copy visual"
      "benefits benefits";
    column-gap: clamp(3rem, 8vw, 7rem);
    row-gap: clamp(2rem, 4vw, 3.25rem);
  }

  .zv-hero-copy {
    grid-area: copy;
  }

  .hero-image-placeholder {
    grid-area: visual;
  }

  .zv-benefits {
    grid-area: benefits;
    padding: clamp(1.15rem, 2vw, 1.6rem);
    border: 1px solid #ddd8f4;
    border-radius: 2rem;
    background:
      radial-gradient(circle at 8% 12%, rgb(202 241 235 / 52%) 0 4.8rem, transparent 4.9rem),
      radial-gradient(circle at 94% 88%, rgb(255 232 178 / 52%) 0 5.4rem, transparent 5.5rem),
      linear-gradient(135deg, #fbfaff 0%, #f8fcff 52%, #fffdf7 100%);
    box-shadow: 0 1.2rem 3rem rgb(47 42 87 / 8%);
  }

  .zv-benefits-heading {
    display: block;
    margin: 0 0 1rem;
    color: var(--zv-ink);
    font-size: clamp(1.15rem, 1.5vw, 1.4rem);
    font-weight: 900;
    line-height: 1.3;
    text-align: center;
  }

  .zv-benefits .zv-trust {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.8rem;
    margin-block-start: 0;
  }

  .zv-benefits .trust-item {
    min-height: 7.2rem;
    align-content: center;
  }
}

.trust-item strong,
.trust-item small {
  display: block;
}

.trust-item strong {
  color: var(--zv-ink);
  font-size: 0.8rem;
  line-height: 1.25;
}

.trust-item small {
  margin-block-start: 0.18rem;
  color: var(--zv-muted);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.3;
}

.hero-image-placeholder {
  width: 100%;
  max-width: 31rem;
  min-height: 31rem;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.7rem;
  justify-self: center;
  padding: 2rem;
  border: 2px dashed #c7c0e9;
  border-radius: 2.4rem;
  background: linear-gradient(145deg, #faf8ff, #f0fbf8);
  color: var(--zv-muted);
  box-shadow: inset 0 0 0 0.55rem rgb(255 255 255 / 68%);
  text-align: center;
}

.placeholder-badge {
  width: 4rem;
  height: 4rem;
  display: grid;
  place-items: center;
  margin-block-end: 0.25rem;
  border-radius: 1.25rem;
  background: var(--zv-lavender);
  color: var(--zv-primary-dark);
  font-size: 2rem;
}

.hero-image-placeholder strong,
.hero-image-placeholder small {
  display: block;
  max-width: 19rem;
}

.hero-image-placeholder strong {
  color: var(--zv-ink);
  font-size: 1.1rem;
}

.hero-image-placeholder small {
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.55;
}

/* Homepage content blocks */
.intro-answer,
.feature-copy > p,
.tablet-grid p,
.early-access-copy > p {
  color: var(--zv-muted);
}

.learning-worlds-grid {
  gap: 1rem;
}

.learning-world {
  border-radius: 1.35rem;
}

.learning-world summary::after {
  color: var(--zv-primary-dark);
}

.world-symbol {
  color: var(--zv-primary-dark);
}

.ui-learning-path {
  min-height: 28rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 2rem;
  border: 1px solid var(--zv-line);
  outline: 0;
  border-radius: var(--zv-radius-lg);
  background: #ffffff;
  box-shadow: var(--zv-shadow-md);
}

.path-card {
  width: 6.5rem;
  min-height: 7.5rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.45rem;
  padding: 0.7rem;
  border-radius: 1.25rem;
  background: var(--zv-lavender);
  color: var(--zv-primary-dark);
  font-weight: 900;
  text-align: center;
}

.path-card:nth-child(3) { background: var(--zv-sun); color: #76550e; }
.path-card:nth-child(5) { background: var(--zv-mint); color: #176962; }
.path-card i { font-size: 2.2rem; }
.path-line { width: 2.2rem; height: 0.2rem; border-radius: 99px; background: #ccd2dc; }
.path-finish { position: absolute; inset-inline-end: 1.2rem; inset-block-start: 1.2rem; color: var(--zv-coral); font-size: 2.4rem; }

.activity-placeholder {
  padding: 0.65rem;
  border-radius: 1.5rem;
  background: #ffffff;
}

.activity-placeholder:nth-child(1),
.activity-placeholder:nth-child(2),
.activity-placeholder:nth-child(3),
.activity-placeholder:hover {
  transform: none;
}

.activity-graphic {
  min-height: 17rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.7rem;
  border-radius: 1.15rem;
  background: var(--zv-sky);
  color: #245b7d;
}

.activity-graphic i { font-size: 3.4rem; }
.activity-graphic span { color: var(--zv-ink); font-family: var(--font-display); font-size: 2.1rem; font-weight: 950; }
.activity-graphic small { color: var(--zv-ink-soft); font-weight: 850; }
.graphic-math { background: var(--zv-sun); color: #76550e; }
.graphic-logic { background: var(--zv-lavender); color: var(--zv-primary-dark); }
.activity-placeholder figcaption strong { color: var(--zv-ink); }
.activity-placeholder figcaption span { color: var(--zv-muted); }

.step-list li > span {
  background: var(--zv-primary);
  color: #ffffff;
}

.step-list h3 {
  color: var(--zv-ink);
}

.step-list p {
  color: var(--zv-muted);
}

.tablet-frame {
  border-color: var(--zv-ink-soft);
  outline: 0;
  background: linear-gradient(145deg, var(--zv-lavender), var(--zv-mint));
  box-shadow: var(--zv-shadow-md);
}

.tablet-frame i {
  color: var(--zv-primary);
}

.tablet-frame::before {
  display: none;
}

/* Real product artwork on the dedicated tablet page. */
.tablet-visual.tablet-page-product-art {
  min-height: 0;
  padding: clamp(0.35rem, 1.5vw, 0.8rem);
  overflow: visible;
}

.tablet-page-product-art img {
  display: block;
  width: min(100%, 46rem);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 1.1rem 1.6rem rgb(23 47 82 / 20%));
}

@media (max-width: 40rem) {
  .tablet-visual.tablet-page-product-art {
    min-height: 0;
    padding: 0;
  }
}

/* Forms and early access */
.early-access-section {
  border: 0;
  background: #f4f3fb;
  color: var(--zv-ink);
}

.early-access-section .section-kicker {
  color: var(--zv-primary-dark);
}

.early-access-copy > p:not(.section-kicker) {
  color: var(--zv-muted);
}

.waitlist-form {
  padding: clamp(1.4rem, 4vw, 2rem);
  border: 1px solid var(--zv-line);
  outline: 0;
  border-radius: var(--zv-radius-lg);
  background: #ffffff;
  box-shadow: var(--zv-shadow-md);
  color: var(--zv-ink);
}

.waitlist-form h2,
.waitlist-form h3,
.waitlist-form label,
.form-grid label:not(.consent-field) {
  color: var(--zv-ink);
}

.form-grid input:not([type="checkbox"]),
.form-grid select,
.form-grid textarea {
  min-height: 3.15rem;
  border: 1px solid #c9d1dc;
  border-radius: 0.85rem;
  background: #ffffff;
  color: var(--zv-ink);
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  border-color: var(--zv-primary);
  box-shadow: 0 0 0 0.22rem rgb(101 86 216 / 15%);
  outline: 0;
}

.consent-field,
.form-hint,
.legal-meta {
  color: var(--zv-muted);
}

/* CTA band */
.hub-cta {
  background: var(--zv-ink);
  color: #ffffff;
}

.hub-cta h2,
.hub-cta strong {
  color: #ffffff;
}

.hub-cta p {
  color: #dce2ec;
}

/* Footer */
.home-footer {
  position: relative;
  padding-block: clamp(3.8rem, 7vw, 5.5rem) 1.5rem;
  overflow: hidden;
  background: var(--zv-ink);
  color: #ffffff;
}

.home-footer::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 0.3rem;
  background: linear-gradient(90deg, var(--zv-primary), var(--zv-teal), var(--zv-yellow), var(--zv-coral));
}

.footer-brand {
  position: relative;
  isolation: isolate;
  gap: 0.72rem;
  padding: 0.55rem 0.88rem;
  border: 0.12rem solid transparent;
  border-radius: 1.35rem;
  background:
    linear-gradient(135deg, transparent, transparent) padding-box,
    linear-gradient(110deg, var(--zv-primary), var(--zv-teal), var(--zv-yellow), var(--zv-coral), var(--zv-primary)) border-box;
  background-position: 0 0, 0% 50%;
  background-size: 100% 100%, 280% 100%;
  box-shadow: 0 0 0.85rem rgb(101 86 216 / 28%), 0 0 1.65rem rgb(22 125 121 / 14%);
  color: var(--zv-ink);
  animation: footer-brand-glow 12s ease-in-out infinite;
}

.footer-brand .brand-character-placeholder {
  width: 4.15rem;
  height: 4.15rem;
  margin-block: -0.35rem;
  border: 0;
  border-radius: 0;
  background: url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/bdcb133aa330/logoalpha.png") center / contain no-repeat;
  box-shadow: none;
  transform: none;
}

.footer-brand .brand-character-placeholder i {
  display: none;
}

.footer-brand > span:last-child {
  direction: ltr;
  display: inline-flex;
  align-items: baseline;
  gap: 0.24rem;
  color: transparent;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", var(--font-display);
  font-size: 0;
  font-weight: 950;
  letter-spacing: 0.035em;
  line-height: 1;
  text-transform: uppercase;
}

.footer-brand > span:last-child::before {
  color: #f5f8ff;
  content: "ZIVARO";
  font-size: 1.08rem;
  text-shadow: 0 0 0.55rem rgb(202 220 255 / 24%);
}

.footer-brand > span:last-child::after {
  background: linear-gradient(90deg, #a99cff, #ff817c, #ffd45e);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  content: "KIDS";
  font-size: 1.08rem;
}

@keyframes footer-brand-glow {
  0%, 100% {
    background-position: 0 0, 0% 50%;
    box-shadow: 0 0 0.75rem rgb(101 86 216 / 26%), 0 0 1.45rem rgb(217 83 79 / 11%);
  }
  50% {
    background-position: 0 0, 100% 50%;
    box-shadow: 0 0 1rem rgb(22 125 121 / 30%), 0 0 1.9rem rgb(246 202 82 / 16%);
  }
}

.footer-brand-panel > p,
.footer-action p {
  color: #cbd3df;
}

.footer-facts span {
  border-color: #455169;
  background: #222f49;
  color: #e4e9f1;
}

.footer-action {
  border: 1px solid #46526a;
  border-radius: 1.5rem;
  background: #202d47;
  box-shadow: none;
}

.footer-action strong {
  color: #ffffff;
}

.footer-directory,
.home-footer .footer-bottom {
  border-color: #3a465e;
}

.footer-group > summary {
  color: #ffffff;
}

.footer-group-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #ffffff;
}

.footer-group > summary .footer-group-title {
  display: inline-flex;
}

.footer-group-title i {
  color: #bdb5ff;
  font-size: 1.1rem;
}

.footer-group-toggle {
  display: inline-block;
  color: #ffffff;
  transition: transform 150ms ease;
}

.footer-group[open] .footer-group-toggle {
  transform: rotate(45deg);
}

.footer-group a,
.footer-legal a,
.footer-cookie-settings {
  color: #cbd3df;
}

.footer-cookie-settings {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.footer-group a:hover,
.footer-group a:focus-visible,
.footer-group a[aria-current="page"],
.footer-legal a:hover,
.footer-legal a:focus-visible,
.footer-legal a[aria-current="page"],
.footer-cookie-settings:hover,
.footer-cookie-settings:focus-visible {
  color: #ffffff;
}

.footer-coming-soon,
.home-footer .footer-bottom {
  color: #aeb8c8;
}

/* Desktop navigation: distinct sticky glass bar and centered dropdowns. */
@media (min-width: 70.001rem) {
  .home-header {
    min-height: 5.2rem;
    padding-block: 0.55rem;
    border-bottom: 1px solid rgb(101 86 216 / 17%);
    background:
      radial-gradient(circle at 17% 0%, rgb(241 238 255 / 80%) 0 8rem, transparent 18rem),
      linear-gradient(180deg, rgb(255 255 255 / 98%), rgb(249 249 255 / 96%));
    box-shadow: 0 0.8rem 2.2rem rgb(23 35 60 / 12%), inset 0 -1px 0 rgb(255 255 255 / 80%);
  }

  .home-header::after {
    position: absolute;
    inset-inline: 0;
    inset-block-end: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--zv-primary), var(--zv-teal), var(--zv-yellow), var(--zv-coral), transparent);
    content: "";
    opacity: 0.72;
    pointer-events: none;
  }

  .home-header .primary-navigation {
    justify-self: center;
    padding: 0.38rem;
    border: 1px solid rgb(139 127 226 / 38%);
    border-radius: 1.35rem;
    background: linear-gradient(135deg, #214773, #182f52 58%, #302b68);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 0.65rem 1.45rem rgb(23 35 60 / 18%);
  }

  .home-header .site-nav {
    gap: 0.34rem;
  }

  .home-header .site-nav > li > a > i:first-child,
  .nav-menu > summary > i:first-child {
    font-size: 1.25rem;
  }

  .home-header .site-nav > li > a,
  .nav-menu > summary {
    min-height: 3rem;
    padding: 0.62rem 0.82rem;
    border: 1px solid rgb(255 255 255 / 13%);
    border-radius: 1rem;
    background: rgb(255 255 255 / 8%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
    color: #f4f7ff;
    font-size: clamp(0.8rem, 0.82vw, 0.9rem);
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
  }

  .home-header .site-nav > li > a:hover,
  .home-header .site-nav > li > a:focus-visible,
  .nav-menu > summary:hover,
  .nav-menu > summary:focus-visible,
  .nav-menu[open] > summary {
    border-color: rgb(185 175 255 / 55%);
    background: linear-gradient(135deg, rgb(129 111 238 / 45%), rgb(78 65 176 / 48%));
    box-shadow: 0 0.45rem 1rem rgb(8 18 38 / 20%), inset 0 1px 0 rgb(255 255 255 / 14%);
    color: #ffffff;
    transform: translateY(-1px);
  }

  .home-header .site-nav a[aria-current="page"],
  .nav-menu[data-active="true"] > summary {
    border-color: rgb(105 211 200 / 46%);
    background: linear-gradient(135deg, rgb(39 143 135 / 48%), rgb(28 108 106 / 52%));
    color: #ffffff;
  }

  .nav-menu > summary .nav-caret {
    width: 1.15rem;
    height: 1.15rem;
    margin-inline-start: 0.08rem;
    padding: 0.12rem;
    border-radius: 50%;
    background-color: rgb(255 255 255 / 14%);
    filter: none;
  }

  .nav-dropdown {
    inset-block-start: calc(100% + 0.82rem);
    left: 50%;
    width: min(19rem, calc(100vw - 2rem));
    padding: 0.72rem;
    border: 1px solid rgb(159 147 245 / 48%);
    border-radius: 1.35rem;
    background: linear-gradient(145deg, rgb(34 65 105 / 99%), rgb(25 45 78 / 99%) 65%, rgb(45 39 97 / 99%));
    box-shadow: 0 1.35rem 3.2rem rgb(15 25 48 / 34%), 0 0 0 0.3rem rgb(133 119 231 / 12%);
    transform: translateX(-50%);
  }

  .nav-dropdown::before {
    position: absolute;
    inset-block-start: -0.48rem;
    left: 50%;
    width: 0.9rem;
    height: 0.9rem;
    border-block-start: 1px solid rgb(159 147 245 / 48%);
    border-inline-start: 1px solid rgb(159 147 245 / 48%);
    background: #233f69;
    content: "";
    transform: translateX(-50%) rotate(45deg);
  }

  .nav-dropdown ul {
    gap: 0.36rem;
  }

  .home-header .nav-dropdown a {
    min-height: 3rem;
    justify-content: center;
    padding: 0.68rem 0.8rem;
    border: 1px solid rgb(111 94 218 / 19%);
    border-radius: 0.9rem;
    background: linear-gradient(135deg, #f0edff, #dfd9ff);
    box-shadow: 0 0.24rem 0.62rem rgb(7 16 34 / 16%), inset 0 1px 0 rgb(255 255 255 / 65%);
    color: var(--zv-ink);
    font-size: 0.86rem;
    font-weight: 850;
    line-height: 1.35;
    text-align: center;
  }

  .nav-dropdown li:nth-child(3n + 2) a {
    background: linear-gradient(135deg, #e5f7f2, #cceee5);
  }

  .nav-dropdown li:nth-child(3n) a {
    background: linear-gradient(135deg, #e8f4ff, #d3eaff);
  }

  .home-header .nav-dropdown a:hover,
  .home-header .nav-dropdown a:focus-visible {
    border-color: rgb(255 255 255 / 36%);
    background: linear-gradient(135deg, #fff6cf, #ffe8a4);
    box-shadow: 0 0.45rem 1rem rgb(7 16 34 / 24%);
    color: var(--zv-primary-dark);
    transform: translateY(-1px);
  }

  .home-header .header-cta {
    border-radius: 1rem;
  }
}

/* About page: keep the principle-card icons and headings visually centered. */
.about-page .info-card-icon {
  margin-inline: auto;
}

.about-page .info-card h2,
.about-page .info-card h3 {
  text-align: center;
}

/* Responsive navigation */
@media (max-width: 70rem) {
  .home-header {
    min-height: 4.35rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding-block: 0.45rem;
    border-bottom: 2px solid rgb(101 86 216 / 24%);
    background:
      radial-gradient(circle at 15% 0%, rgb(241 238 255 / 92%) 0 6rem, transparent 14rem),
      linear-gradient(180deg, rgb(255 255 255 / 98%), rgb(248 248 255 / 97%));
    box-shadow: 0 0.65rem 1.7rem rgb(23 35 60 / 16%);
    backdrop-filter: blur(1rem) saturate(1.18);
  }

  .home-header .home-brand {
    justify-self: start;
  }

  .mobile-menu-toggle {
    display: inline-flex;
    justify-self: end;
  }

  .home-header .header-cta {
    display: none;
  }

  .home-header .primary-navigation {
    position: absolute;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline: 0.75rem;
    z-index: 120;
    width: min(calc(100% - 1.5rem), 34rem);
    max-height: calc(100dvh - 5.7rem);
    display: none;
    margin-inline: auto;
    padding: 0.75rem;
    overflow-y: auto;
    border: 1px solid rgb(152 140 240 / 48%);
    border-radius: 1.4rem;
    background:
      radial-gradient(circle at 12% 8%, rgb(101 86 216 / 32%) 0 5.5rem, transparent 12rem),
      linear-gradient(145deg, #24466f, #1a3052 62%, #302a68);
    box-shadow: 0 1.5rem 4rem rgb(12 22 43 / 44%), inset 0 1px 0 rgb(255 255 255 / 12%);
  }

  .home-header .primary-navigation.is-open {
    display: block;
    animation: zv-menu-in 150ms ease-out both;
  }

  .home-header .primary-navigation::before {
    content: "ניווט באתר";
    display: block;
    width: max-content;
    margin: 0.05rem auto 0.65rem;
    padding: 0.38rem 0.8rem;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 999px;
    background: rgb(255 255 255 / 10%);
    color: #f2f5ff;
    font-size: 0.74rem;
    font-weight: 850;
    text-align: center;
  }

  .home-header .primary-navigation .site-nav {
    display: grid;
    gap: 0.5rem;
  }

  .home-header .primary-navigation .site-nav > li {
    width: 100%;
  }

  .home-header .primary-navigation .site-nav > li > a > i:first-child,
  .nav-menu > summary > i:first-child {
    font-size: 1.4rem;
  }

  .home-header .primary-navigation .site-nav a,
  .nav-menu > summary {
    min-height: 3.2rem;
    justify-content: flex-start;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgb(39 54 84 / 18%);
    border-radius: 1rem;
    background: linear-gradient(135deg, #ece8ff, #d8d1ff);
    box-shadow: 0 0.4rem 0.95rem rgb(7 16 34 / 22%), inset 0 1px 0 rgb(255 255 255 / 66%);
    color: var(--zv-ink);
    font-size: 0.94rem;
    font-weight: 900;
    text-align: start;
    white-space: normal;
  }

  .home-header .primary-navigation .site-nav > li:nth-child(5n + 2) > a,
  .home-header .primary-navigation .site-nav > li:nth-child(5n + 2) > .nav-menu > summary {
    background: linear-gradient(135deg, #e3f7f1, #c9ece2);
  }

  .home-header .primary-navigation .site-nav > li:nth-child(5n + 3) > a,
  .home-header .primary-navigation .site-nav > li:nth-child(5n + 3) > .nav-menu > summary {
    background: linear-gradient(135deg, #ffebe4, #ffd7ca);
  }

  .home-header .primary-navigation .site-nav > li:nth-child(5n + 4) > a,
  .home-header .primary-navigation .site-nav > li:nth-child(5n + 4) > .nav-menu > summary {
    background: linear-gradient(135deg, #e4f2ff, #cce5fb);
  }

  .home-header .primary-navigation .site-nav > li:nth-child(5n) > a,
  .home-header .primary-navigation .site-nav > li:nth-child(5n) > .nav-menu > summary {
    background: linear-gradient(135deg, #fff4cc, #ffe49c);
  }

  .home-header .primary-navigation .site-nav > li > a:hover,
  .home-header .primary-navigation .site-nav > li > a:focus-visible,
  .nav-menu > summary:hover,
  .nav-menu > summary:focus-visible,
  .nav-menu[open] > summary {
    border-color: rgb(101 86 216 / 38%);
    box-shadow: 0 0.5rem 1.1rem rgb(73 59 160 / 14%), inset 0 1px 0 #ffffff;
  }

  .nav-menu .nav-caret {
    margin-inline-start: auto;
    padding: 0.14rem;
    border-radius: 50%;
    background-color: rgb(255 255 255 / 42%);
    filter: none;
  }

  .nav-dropdown {
    position: static;
    width: 100%;
    max-height: none;
    margin-block-start: 0.35rem;
    padding: 0.5rem;
    overflow: visible;
    border: 1px solid rgb(255 255 255 / 17%);
    border-radius: 0.95rem;
    background: rgb(10 23 45 / 38%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%);
    transform: none;
  }

  .home-header .nav-dropdown a {
    min-height: 2.7rem;
    justify-content: flex-start;
    border: 1px solid rgb(130 114 228 / 24%);
    background: linear-gradient(135deg, #f1efff, #ddd8ff);
    box-shadow: 0 0.25rem 0.65rem rgb(7 16 34 / 18%);
    font-size: 0.86rem;
  }

  .nav-mobile-cta {
    display: block;
  }

  .home-header .primary-navigation .nav-mobile-cta a {
    border-color: var(--zv-primary);
    background: var(--zv-primary);
    color: #ffffff;
  }

  .home-header .primary-navigation .nav-mobile-cta i,
  .home-header .primary-navigation .nav-mobile-cta span {
    color: #ffffff;
  }

  body.menu-open {
    overflow: hidden;
  }

  body.menu-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgb(23 35 60 / 48%);
    backdrop-filter: blur(0.22rem);
  }

  .article-shell {
    grid-template-columns: 1fr;
  }

  .article-toc {
    position: static;
  }
}

@keyframes zv-menu-in {
  from { opacity: 0; transform: translateY(-0.35rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 52rem) {
  .home-header,
  main,
  .home-footer {
    text-align: center;
  }

  .content-hero-grid,
  .zv-hero-grid,
  .selection-guide,
  .footer-intro,
  .footer-directory,
  .home-footer .footer-bottom {
    grid-template-columns: 1fr;
  }

  .content-hero,
  .zv-hero {
    padding-block: 2.8rem 4.5rem;
  }

  .content-hero h1,
  .content-hero .direct-answer,
  .zv-title,
  .zv-lead,
  .section-lead,
  .section-heading-row > p {
    margin-inline: auto;
  }

  .content-hero h1 {
    max-width: 16ch;
    font-size: clamp(2.25rem, 10.5vw, 3.6rem);
    line-height: 1.06;
  }

  .zv-title {
    font-size: clamp(2.5rem, 12vw, 4.1rem);
  }

  .breadcrumbs ol,
  .zv-actions,
  .device-chips,
  .facts-band,
  .footer-brand,
  .footer-facts,
  .footer-legal {
    justify-content: center;
  }

  .zv-trust {
    width: min(100%, 30rem);
    margin-inline: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zv-benefits {
    width: min(100%, 30rem);
    margin-inline: auto;
    justify-self: center;
  }

  .zv-benefits .zv-trust {
    width: 100%;
    margin-inline: 0;
  }

  .hub-visual {
    width: min(100%, 30rem);
    min-height: 17rem;
    margin-inline: auto;
  }

  .hub-visual .hub-icon-card,
  .hub-visual > span {
    min-height: 6.2rem;
  }

  .hero-image-placeholder {
    width: min(100%, 31rem);
    min-height: 30rem;
    margin-inline: auto;
  }

  .zv-trust {
    gap: 0.55rem;
  }

  .trust-item {
    min-height: 9rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;
    padding: 0.85rem 0.6rem;
    text-align: center;
  }

  .trust-icon {
    width: 3.35rem;
    height: 3.35rem;
    flex: 0 0 auto;
    margin-inline: auto;
  }

  .trust-item > div {
    width: 100%;
    display: grid;
    justify-items: center;
    text-align: center;
  }

  .trust-item strong,
  .trust-item small {
    width: 100%;
    margin-inline: auto;
    text-align: center;
  }

  .trust-item:last-child:nth-child(odd) {
    width: calc(50% - 0.275rem);
    grid-column: 1 / -1;
    justify-self: center;
  }

  .trust-item strong {
    font-size: 0.78rem;
    line-height: 1.3;
  }

  .trust-item small {
    font-size: 0.67rem;
    line-height: 1.35;
  }

  .learning-worlds-grid {
    grid-template-columns: 1fr;
  }

  .learning-world summary,
  .skill-card-details summary {
    justify-content: center;
    text-align: center;
  }

  .world-content ul,
  .article-section ul,
  .article-section ol,
  .hub-card ul {
    padding: 0;
    list-style-position: inside;
  }

  .article-prose {
    padding: 1.3rem;
    border-radius: 1.45rem;
  }

  .ui-learning-path {
    min-height: 24rem;
    flex-wrap: wrap;
  }

  .path-line {
    width: 1.4rem;
  }

  .footer-brand-panel > p {
    margin-inline: auto;
  }

  .footer-group {
    border: 1px solid #3f4b63;
    border-radius: 1rem;
    background: #202d47;
  }

  .footer-group > summary {
    min-height: 3.35rem;
    margin: 0;
    padding: 0.75rem 1rem;
    cursor: pointer;
  }

  .footer-group-toggle {
    display: inline-block;
    transition: transform 150ms ease;
  }

  .footer-group[open] .footer-group-toggle {
    transform: rotate(45deg);
  }

  .footer-group ul {
    padding: 0 1rem 1rem;
  }
}

@media (max-width: 40rem) {
  :root {
    --gutter: 1rem;
  }

  .zv-announcement {
    font-size: 0.69rem;
  }

  .home-header {
    min-height: 4.1rem;
    padding-inline: 0.85rem;
  }

  .home-brand {
    font-size: 0.88rem;
    letter-spacing: 0.05em;
  }

  .brand-character-placeholder {
    width: 2.45rem;
    height: 2.45rem;
  }

  .brand-character-logo {
    width: 3.35rem;
    height: 3.35rem;
    margin-block: -0.2rem;
  }

  .brand-wordmark {
    gap: 0.18rem;
    font-size: 0.92rem;
    letter-spacing: 0.025em;
  }

  .brand-character-placeholder i {
    font-size: 1.25rem;
  }

  .mobile-menu-toggle {
    min-width: 6rem;
  }

  .home-header .primary-navigation {
    inset-block-start: calc(100% + 0.45rem);
    inset-inline: 0.55rem;
    width: calc(100% - 1.1rem);
    max-height: calc(100dvh - 5.2rem);
  }

  .content-hero h1 {
    font-size: clamp(2.05rem, 10.5vw, 2.9rem);
  }

  .content-hero .direct-answer,
  .zv-lead {
    font-size: 1rem;
    line-height: 1.68;
  }

  .hub-visual {
    min-height: 14rem;
    gap: 0.55rem;
    padding: 0.7rem;
    border-radius: 1.5rem;
  }

  .hub-visual .hub-icon-card,
  .hub-visual > span {
    min-height: 5.3rem;
    padding: 0.5rem;
    border-radius: 1rem;
  }

  .hub-icon-card i {
    font-size: 2rem;
  }

  .hub-icon-card small {
    font-size: 0.68rem;
  }

  .hub-intro,
  .hub-section,
  .related-section,
  .zv-section,
  .home-intro,
  .ages-section,
  .how-section,
  .school-section,
  .activities-section,
  .tablet-section,
  .faq-section,
  .early-access-section {
    padding-block: 3.4rem;
  }

  .hub-card,
  .parent-guide-card,
  .offer-card,
  .age-card,
  .home-skill-card,
  .mechanic-card,
  .contact-card,
  .info-card {
    padding: 1.25rem;
  }

  .hero-image-placeholder {
    min-height: 24rem;
    padding: 1.5rem;
    border-radius: 1.7rem;
  }

  .ui-learning-path {
    min-height: auto;
    padding: 1.2rem;
  }

  .path-card {
    width: 5.4rem;
    min-height: 6.5rem;
    font-size: 0.76rem;
  }

  .path-line {
    display: none;
  }

  .activity-graphic {
    min-height: 13rem;
  }

  .footer-directory {
    gap: 0.6rem;
  }
}

/* Homepage: clearer learning worlds, visible play formats, image slot and FAQ */
.learning-worlds-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 4% 8%, rgb(115 92 229 / 12%) 0 7rem, transparent 7.1rem),
    radial-gradient(circle at 94% 88%, rgb(38 178 166 / 12%) 0 9rem, transparent 9.1rem),
    linear-gradient(180deg, #f7f5ff 0%, #f0f7ff 46%, #f7fbf9 100%);
}

.learning-worlds-section .section-heading-row {
  position: relative;
  z-index: 1;
  margin-block-end: clamp(1.8rem, 4vw, 2.8rem);
}

.learning-worlds-grid {
  position: relative;
  z-index: 1;
  gap: 1.15rem;
}

.learning-world {
  --world-border: #9ebce4;
  position: relative;
  isolation: isolate;
  border: 2px solid var(--world-border);
  border-radius: 1.45rem;
  background: var(--world-surface);
  box-shadow: 0 0.55rem 1.35rem rgb(20 47 83 / 10%);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.learning-world::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset-block-start: 0;
  inset-inline: 1.2rem;
  height: 0.32rem;
  border-radius: 0 0 99px 99px;
  background: var(--world-accent);
  opacity: 0.88;
}

.learning-world:hover,
.learning-world[open] {
  border-color: var(--world-accent);
  box-shadow: 0 0.85rem 2rem rgb(20 47 83 / 16%);
  transform: translateY(-0.16rem);
}

.learning-world summary {
  min-height: 7.2rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 1.15rem;
  background: linear-gradient(135deg, rgb(255 255 255 / 76%), rgb(255 255 255 / 32%));
}

.learning-world summary > span:nth-child(2) {
  min-width: 0;
}

.learning-world summary strong {
  color: #142a4d;
  font-size: 1.02rem;
  line-height: 1.35;
}

.learning-world summary small {
  margin-block-start: 0.28rem;
  color: #52657b;
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.5;
}

.learning-world summary::after {
  content: "לגלות עוד +";
  min-width: 6.25rem;
  min-height: 2.55rem;
  display: inline-grid;
  margin: 0;
  padding: 0.45rem 0.8rem;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 74%);
  border-radius: 99px;
  background: var(--world-accent);
  box-shadow: 0 0.3rem 0.75rem rgb(20 47 83 / 16%);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
}

.learning-world[open] summary::after {
  content: "לסגור −";
}

.world-symbol {
  width: 4.1rem;
  height: 4.1rem;
  border: 1px solid rgb(255 255 255 / 88%);
  border-radius: 1.25rem;
  background: rgb(255 255 255 / 76%);
  box-shadow: 0 0.35rem 0.85rem rgb(20 47 83 / 12%);
  color: var(--world-accent);
}

.world-symbol i {
  font-size: 2.45rem;
}

.world-content {
  padding: 0.25rem 1.15rem 1.2rem;
  border-top: 1px solid rgb(20 47 83 / 11%);
  background: rgb(255 255 255 / 58%);
}

.world-content p {
  margin: 1rem 0 0.85rem;
  color: #344a62;
  font-size: 0.9rem;
  line-height: 1.65;
}

.world-content ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.world-content li {
  position: relative;
  padding: 0.55rem 1.75rem 0.55rem 0.7rem;
  border: 1px solid rgb(20 47 83 / 10%);
  border-radius: 0.85rem;
  background: rgb(255 255 255 / 72%);
  color: #32465e;
  font-size: 0.78rem;
  font-weight: 780;
  line-height: 1.4;
}

.world-content li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.78rem;
  inset-inline-start: 0.72rem;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: var(--world-accent);
  box-shadow: 0 0 0 0.22rem rgb(255 255 255 / 72%);
}

.world-math { --world-accent: #a86a00; --world-border: #e6bc4d; --world-surface: #fff4c9; }
.world-logic { --world-accent: #6748b6; --world-border: #aa97e8; --world-surface: #eee8ff; }
.world-memory { --world-accent: #285d9f; --world-border: #82ade5; --world-surface: #e5efff; }
.world-language { --world-accent: #167d79; --world-border: #71c4b8; --world-surface: #e2f6f2; }
.world-science { --world-accent: #2c8546; --world-border: #82c991; --world-surface: #e6f5df; }
.world-strategy { --world-accent: #915322; --world-border: #d6a16f; --world-surface: #f6e6d5; }
.world-motor { --world-accent: #c95042; --world-border: #ed9988; --world-surface: #ffe6de; }
.world-creative { --world-accent: #8f3d9f; --world-border: #cf8bd7; --world-surface: #f6e5f8; }
.world-computer { --world-accent: #315fba; --world-border: #86a8ec; --world-surface: #e5edff; }

.play-formats-static {
  position: relative;
  z-index: 1;
  margin-block-start: clamp(1.7rem, 4vw, 2.6rem);
  overflow: hidden;
  padding: clamp(1.15rem, 3vw, 1.7rem);
  border: 1px solid #d6ddea;
  border-block-start: 0.3rem solid #715bd5;
  border-radius: 1.5rem;
  background: linear-gradient(180deg, #ffffff, #f8f9fd);
  box-shadow: 0 0.4rem 1.15rem rgb(35 52 84 / 8%);
  color: #1d3152;
}

.play-formats-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-block-end: 1rem;
}

.format-icon,
.faq-heading-icon {
  width: 3.55rem;
  height: 3.55rem;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #d8d1f4;
  border-radius: 1rem;
  background: #eeebff;
  box-shadow: 0 0.22rem 0.65rem rgb(35 52 84 / 9%);
  color: #624bc7;
}

.format-icon i,
.faq-heading-icon i {
  font-size: 2.1rem;
}

.play-formats-heading .section-kicker {
  margin: 0 0 0.25rem;
  color: #624bc7;
}

.play-formats-heading h3 {
  margin: 0;
  color: #172c4d;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  line-height: 1.2;
}

.play-formats-heading p:last-child {
  max-width: 46rem;
  margin: 0.35rem 0 0;
  color: #607086;
  font-weight: 720;
  line-height: 1.5;
}

.play-formats-static .format-chip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0;
}

.play-formats-static .format-chip-grid span {
  min-height: 2.7rem;
  display: grid;
  padding: 0.45rem 0.62rem;
  place-items: center;
  border: 1px solid #ddd7f4;
  border-radius: 0.82rem;
  background: #f3f0ff;
  box-shadow: none;
  color: #243759;
  font-size: 0.76rem;
  font-weight: 880;
  line-height: 1.35;
  text-align: center;
}

.play-formats-static .format-chip-grid span:nth-child(4n + 2) { border-color: #cfe8e3; background: #eef9f6; }
.play-formats-static .format-chip-grid span:nth-child(4n + 3) { border-color: #efd9d2; background: #fff4f0; }
.play-formats-static .format-chip-grid span:nth-child(4n) { border-color: #eadfac; background: #fff9df; }

.ages-image-slot {
  padding-block: clamp(2.3rem, 6vw, 4.8rem);
  background: linear-gradient(180deg, #f7fbf9, #fffdf8);
}

.age-bridge-placeholder {
  min-height: clamp(15rem, 30vw, 23rem);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.75rem;
  padding: clamp(1.5rem, 5vw, 3rem);
  border: 2px dashed #9f91e4;
  border-radius: 2rem;
  background:
    radial-gradient(circle at 12% 20%, rgb(255 218 89 / 32%) 0 4.5rem, transparent 4.6rem),
    radial-gradient(circle at 88% 76%, rgb(64 195 177 / 22%) 0 6.5rem, transparent 6.6rem),
    linear-gradient(135deg, #f0edff, #eef9ff 52%, #f1fbf4);
  box-shadow: inset 0 0 0 0.55rem rgb(255 255 255 / 48%);
  color: #203a65;
  text-align: center;
}

.age-bridge-placeholder .placeholder-badge {
  width: 4.8rem;
  height: 4.8rem;
  border: 1px solid rgb(104 75 203 / 18%);
  border-radius: 1.35rem;
  background: #ffffff;
  box-shadow: 0 0.5rem 1.2rem rgb(44 62 96 / 12%);
  color: #684bcb;
}

.age-bridge-placeholder .placeholder-badge i {
  font-size: 2.7rem;
}

.age-bridge-placeholder strong {
  color: #18335f;
  font-size: clamp(1.25rem, 3vw, 1.8rem);
}

.age-bridge-placeholder small {
  max-width: 42rem;
  color: #5a6d83;
  font-size: 0.92rem;
  font-weight: 720;
  line-height: 1.65;
}

.age-bridge-placeholder.age-bridge-art {
  min-height: 0;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.age-bridge-art img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2rem;
}

.faq-section {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.8rem, 5vw, 4.2rem);
  border-block: 1px solid #e4e0f2;
  background: linear-gradient(180deg, #f8f7fc, #f3f7fb);
}

.faq-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 1.9rem);
}

.faq-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  text-align: center;
}

.faq-heading-icon {
  width: 3.35rem;
  height: 3.35rem;
  border-color: #d8d0f5;
  border-radius: 1rem;
  background: #ece8ff;
  box-shadow: 0 0.25rem 0.7rem rgb(49 66 102 / 10%);
  color: #6149c7;
}

.faq-heading .section-kicker {
  margin: 0 0 0.25rem;
  color: #6149c7;
}

.faq-heading .zv-section-heading {
  margin: 0;
  color: #162a4c;
  font-size: clamp(1.8rem, 4vw, 2.65rem);
}

.faq-heading p:last-child {
  max-width: 42rem;
  margin: 0.35rem auto 0;
  color: #607086;
  font-weight: 720;
  line-height: 1.55;
}

.faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0.7rem;
}

.faq-list details {
  overflow: hidden;
  border: 1px solid #d9dfea;
  border-inline-start: 0.28rem solid #7963d8;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 0.22rem 0.65rem rgb(35 52 84 / 7%);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.faq-list details:nth-child(4n + 2) {
  border-inline-start-color: #2ca494;
  background: #ffffff;
}

.faq-list details:nth-child(4n + 3) {
  border-inline-start-color: #e67c69;
  background: #ffffff;
}

.faq-list details:nth-child(4n) {
  border-inline-start-color: #d4a72e;
  background: #ffffff;
}

.faq-list details:hover,
.faq-list details[open] {
  border-color: #b9afeb;
  box-shadow: 0 0.42rem 1rem rgb(35 52 84 / 11%);
}

.faq-list summary {
  min-height: 4.1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.72rem 0.9rem;
  background: transparent;
  color: #172b4c;
  font-size: 0.91rem;
  font-weight: 900;
  line-height: 1.45;
}

.faq-list summary::after {
  content: "";
  width: 2.15rem;
  height: 2.15rem;
  min-width: 2.15rem;
  display: block;
  margin-inline-start: auto;
  padding: 0;
  border: 1px solid #d9d2f4;
  border-radius: 0.72rem;
  background: #f3f0ff url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/74fba95c94b2/plus_color.svg") center / 1.3rem no-repeat;
  box-shadow: none;
  color: transparent;
  transition: transform 180ms ease;
}

.faq-list details[open] summary {
  border-bottom: 1px solid rgb(20 47 83 / 12%);
  background: #f8f7fd;
  color: #172b4c;
}

.faq-list details[open] summary::after {
  content: "";
  transform: rotate(45deg);
}

.faq-list details > p {
  margin: 0;
  padding: 0.75rem 0.95rem 0.9rem;
  background: #ffffff;
  color: #40536b;
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.62;
}

@media (max-width: 70rem) {
  .play-formats-static .format-chip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 52rem) {
  .learning-worlds-section .section-heading-row {
    text-align: center;
  }

  .learning-world summary {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.65rem;
    padding: 1.15rem 1rem;
    text-align: center;
  }

  .learning-world summary > span:nth-child(2) {
    display: grid;
    justify-items: center;
  }

  .learning-world summary::after {
    margin-inline: auto;
  }

  .world-content {
    text-align: center;
  }

  .world-content ul {
    grid-template-columns: 1fr;
  }

  .world-content li {
    padding-inline: 0.8rem;
    text-align: center;
  }

  .world-content li::before {
    display: none;
  }

  .play-formats-heading {
    flex-direction: column;
    text-align: center;
  }

  .faq-heading {
    display: block;
  }

  .faq-heading-icon {
    display: none;
  }

  .play-formats-static .format-chip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .faq-list {
    grid-template-columns: 1fr;
  }

  .faq-list summary {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    text-align: start;
  }

  .faq-list summary::after {
    align-self: center;
    margin-block: 0;
  }
}

@media (max-width: 40rem) {
  .learning-worlds-section {
    padding-block: 3.5rem;
  }

  .faq-section {
    padding-block: 2.35rem;
  }

  .learning-worlds-grid {
    width: 100%;
    margin-inline: auto;
  }

  .learning-world {
    width: 100%;
  }

  .world-symbol {
    width: 3.8rem;
    height: 3.8rem;
  }

  .play-formats-static {
    padding: 1rem;
    border-radius: 1.25rem;
  }

  .play-formats-static .format-chip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
  }

  .play-formats-static .format-chip-grid span {
    min-height: 2.65rem;
    padding: 0.4rem 0.45rem;
    font-size: 0.7rem;
  }

  .play-formats-heading {
    gap: 0.5rem;
    margin-block-end: 0.85rem;
  }

  .format-icon {
    width: 3.1rem;
    height: 3.1rem;
  }

  .format-icon i {
    font-size: 1.85rem;
  }

  .play-formats-heading h3 {
    font-size: 1.3rem;
  }

  .play-formats-heading p:last-child {
    margin-block-start: 0.28rem;
    font-size: 0.79rem;
    line-height: 1.45;
  }

  .ages-image-slot {
    padding-block: 2.2rem;
  }

  .age-bridge-placeholder {
    min-height: 14rem;
    padding: 1.35rem;
    border-radius: 1.5rem;
  }

  .age-bridge-placeholder.age-bridge-art {
    min-height: 0;
    padding: 0;
  }

  .age-bridge-art img {
    border-radius: 1.5rem;
  }

  .age-bridge-placeholder small {
    font-size: 0.8rem;
  }

  .faq-list summary {
    min-height: 3.7rem;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 0.62rem 0.72rem;
    font-size: 0.85rem;
    line-height: 1.38;
    text-align: start;
  }

  .faq-list summary::after {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    background-size: 1.2rem;
  }

  .faq-list details > p {
    padding: 0.68rem 0.8rem 0.8rem;
    font-size: 0.8rem;
    text-align: center;
  }

  .faq-list {
    gap: 0.55rem;
  }

  .faq-heading .zv-section-heading {
    font-size: 1.85rem;
  }

  .faq-heading p:last-child {
    margin-block-start: 0.3rem;
    font-size: 0.88rem;
    line-height: 1.5;
  }
}

/* Site-wide content accordions: FAQ and expanded skill explanations */
.faq-grid > :first-child:not(.faq-heading) {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.faq-grid > :first-child:not(.faq-heading)::before {
  content: "";
  width: 2.9rem;
  height: 2.9rem;
  display: block;
  margin: 0 auto 0.45rem;
  border: 1px solid #d9d2f4;
  border-radius: 0.9rem;
  background: #f1eeff url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/aa59f7cfe293/red_question_mark_color.svg") center / 1.75rem no-repeat;
  box-shadow: 0 0.22rem 0.65rem rgb(35 52 84 / 8%);
}

.faq-grid > :first-child:not(.faq-heading) .section-kicker {
  margin-block-end: 0.2rem;
  color: #624bc7;
}

.faq-grid > :first-child:not(.faq-heading) .zv-section-heading {
  margin: 0;
  color: #172c4d;
  font-size: clamp(1.65rem, 4vw, 2.4rem);
}

.skill-card-details {
  --detail-accent: #725bd3;
  overflow: hidden;
  margin-block: 0 1rem;
  border: 1px solid #d8deea;
  border-inline-start: 0.26rem solid var(--detail-accent);
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 0.22rem 0.65rem rgb(35 52 84 / 7%);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.hub-card:nth-child(4n + 2) .skill-card-details { --detail-accent: #279b8c; }
.hub-card:nth-child(4n + 3) .skill-card-details { --detail-accent: #df735f; }
.hub-card:nth-child(4n) .skill-card-details { --detail-accent: #c69620; }

.skill-card-details:hover,
.skill-card-details[open] {
  border-color: #b9afeb;
  box-shadow: 0 0.4rem 0.95rem rgb(35 52 84 / 10%);
}

.skill-card-details summary {
  min-height: 3.8rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.68rem 0.85rem;
  background: #ffffff;
  color: #1c3153;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.4;
  text-align: start;
}

.skill-card-details summary::after {
  content: "";
  width: 2.1rem;
  height: 2.1rem;
  min-width: 2.1rem;
  display: block;
  flex: 0 0 2.1rem;
  align-self: center;
  margin: 0;
  padding: 0;
  border: 1px solid #d9d2f4;
  border-radius: 0.72rem;
  background: #f3f0ff url("https://zivaro.kids/wp-content/uploads/zivaro-site-assets/74fba95c94b2/plus_color.svg") center / 1.28rem no-repeat;
  box-shadow: none;
  color: transparent;
  transition: transform 180ms ease;
}

.skill-card-details[open] summary {
  border-bottom: 1px solid #e2e5ed;
  background: #f8f7fd;
}

.skill-card-details[open] summary::after {
  content: "";
  transform: rotate(45deg);
}

.skill-card-details > div {
  padding: 0.15rem 0.9rem 0.85rem;
  border: 0;
  background: #ffffff;
}

.skill-card-details p {
  margin-block: 0.7rem;
  color: #485b71;
  font-size: 0.83rem;
  font-weight: 620;
  line-height: 1.65;
}

.skill-card-details ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
  margin: 0.65rem 0;
  padding: 0;
  list-style: none;
}

.skill-card-details li {
  position: relative;
  padding: 0.48rem 1.55rem 0.48rem 0.62rem;
  border: 1px solid #e0e4ec;
  border-radius: 0.75rem;
  background: #f8fafc;
  color: #41546b;
  font-size: 0.75rem;
  font-weight: 740;
  line-height: 1.4;
}

.skill-card-details li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.72rem;
  inset-inline-start: 0.62rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--detail-accent);
}

@media (max-width: 52rem) {
  .skill-card-details summary {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    text-align: start;
  }
}

@media (max-width: 40rem) {
  .faq-grid > :first-child:not(.faq-heading)::before {
    width: 2.55rem;
    height: 2.55rem;
    background-size: 1.5rem;
  }

  .faq-grid > :first-child:not(.faq-heading) .zv-section-heading {
    font-size: 1.75rem;
  }

  .skill-card-details {
    margin-block-end: 0.8rem;
    border-radius: 0.9rem;
  }

  .skill-card-details summary {
    min-height: 3.55rem;
    padding: 0.58rem 0.68rem;
    font-size: 0.8rem;
    line-height: 1.38;
  }

  .skill-card-details summary::after {
    width: 1.95rem;
    height: 1.95rem;
    min-width: 1.95rem;
    flex-basis: 1.95rem;
    background-size: 1.18rem;
  }

  .skill-card-details > div {
    padding: 0.1rem 0.75rem 0.75rem;
    text-align: center;
  }

  .skill-card-details p {
    font-size: 0.79rem;
    line-height: 1.58;
  }

  .skill-card-details ul {
    grid-template-columns: 1fr;
  }

  .skill-card-details li {
    padding-inline: 0.58rem;
    text-align: center;
  }

  .skill-card-details li::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Canonical site-wide sticky header.
   Kept last in the shared stylesheet so every page receives the approved
   treatment after its older header and responsive declarations. */
.home-header {
  border-bottom: 0;
  background: linear-gradient(135deg, #204874 0%, #172f52 68%, #1d416b 100%);
  box-shadow: 0 0.75rem 2rem rgb(12 27 50 / 28%);
  backdrop-filter: blur(1rem) saturate(1.12);
}

.home-header::after {
  content: "";
  position: absolute;
  z-index: 140;
  inset-inline: 0;
  inset-block-end: -1px;
  height: 3px;
  background: linear-gradient(90deg, #7763e6 0%, #2eb3a4 24%, #ffd04f 50%, #ed766b 76%, #7763e6 100%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 18%), 0 0.18rem 0.55rem rgb(94 78 190 / 36%);
  opacity: 1;
  pointer-events: none;
}

.home-brand {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  animation: none;
}

.home-brand .brand-character-logo {
  width: 4.55rem;
  height: 4.55rem;
  margin-block: -0.55rem;
}

.home-brand .brand-wordmark {
  font-size: 1.18rem;
}

.mobile-menu-toggle {
  position: relative;
  isolation: isolate;
  background: transparent;
  box-shadow: none;
  color: #f7f9ff;
}

.mobile-menu-toggle::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -0.12rem;
  padding: 0.12rem;
  border-radius: inherit;
  background: linear-gradient(110deg, var(--zv-primary), var(--zv-teal), var(--zv-yellow), var(--zv-coral), var(--zv-primary));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.mobile-menu-toggle > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 70rem) {
  .home-header::after {
    height: 4px;
    box-shadow: 0 1px 0 rgb(255 255 255 / 22%), 0 0.22rem 0.7rem rgb(94 78 190 / 46%);
  }

  /*
   * Keep the final mobile navigation CTA readable after the older generic
   * navigation layers have been applied.
   */
  .home-header .primary-navigation .nav-mobile-cta > a {
    width: 100%;
    min-height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    color: #ffffff;
    text-align: center;
  }

  .home-header .primary-navigation .nav-mobile-cta > a > span {
    position: static;
    width: auto;
    max-width: 100%;
    display: inline-block;
    flex: 0 1 auto;
    color: #ffffff;
    font-size: 0.94rem;
    font-weight: 900;
    line-height: 1.35;
    opacity: 1;
    visibility: visible;
    white-space: normal;
  }
}

@media (max-width: 40rem) {
  .home-brand .brand-character-logo {
    width: 3.75rem;
    height: 3.75rem;
    margin-block: -0.4rem;
  }

  .home-brand .brand-wordmark {
    font-size: 1.04rem;
  }
}

/* Canonical desktop navigation: lightweight top-level items with shared dropdowns. */
@media (min-width: 70.001rem) {
  .home-header .primary-navigation {
    justify-self: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .home-header .site-nav {
    align-items: center;
    gap: clamp(0.08rem, 0.45vw, 0.38rem);
  }

  .home-header .site-nav > li > a,
  .home-header .nav-menu > summary {
    position: relative;
    min-height: 2.8rem;
    padding: 0.58rem clamp(0.62rem, 0.8vw, 0.88rem);
    border: 0;
    border-radius: 0.78rem;
    background: transparent;
    box-shadow: none;
    color: rgb(247 249 255 / 92%);
    font-size: clamp(0.94rem, 0.92vw, 1.02rem);
    font-weight: 850;
    transition: color 150ms ease;
  }

  .home-header .site-nav > li:not(.nav-mobile-cta) + li:not(.nav-mobile-cta) {
    position: relative;
  }

  .home-header .site-nav > li:not(.nav-mobile-cta) + li:not(.nav-mobile-cta)::before {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: -0.22rem;
    width: 1px;
    height: 1.15rem;
    border-radius: 999px;
    background: linear-gradient(180deg, transparent, rgb(100 211 198 / 68%), rgb(255 196 78 / 62%), transparent);
    content: "";
    opacity: 0.72;
    transform: translateY(-50%);
  }

  .home-header .site-nav > li > a::after,
  .home-header .nav-menu > summary::after {
    position: absolute;
    inset-inline: 0.72rem;
    inset-block-end: 0.18rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--zv-teal), var(--zv-yellow), var(--zv-coral));
    content: "";
    opacity: 0;
    transform: scaleX(0.35);
    transition: opacity 150ms ease, transform 150ms ease;
  }

  .home-header .site-nav > li > a:hover,
  .home-header .site-nav > li > a:focus-visible,
  .home-header .nav-menu > summary:hover,
  .home-header .nav-menu > summary:focus-visible,
  .home-header .nav-menu[open] > summary {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #ffffff;
    transform: none;
  }

  .home-header .site-nav > li > a[aria-current="page"],
  .home-header .nav-menu[data-active="true"] > summary,
  .home-header .nav-parent:has(a[aria-current="page"]) > .nav-menu > summary {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #ffffff;
    transform: none;
  }

  .home-header .site-nav > li > a:hover::after,
  .home-header .site-nav > li > a:focus-visible::after,
  .home-header .nav-menu > summary:hover::after,
  .home-header .nav-menu > summary:focus-visible::after,
  .home-header .nav-menu[open] > summary::after,
  .home-header .site-nav > li > a[aria-current="page"]::after,
  .home-header .nav-menu[data-active="true"] > summary::after,
  .home-header .nav-parent:has(a[aria-current="page"]) > .nav-menu > summary::after {
    opacity: 1;
    transform: scaleX(1);
  }

  .home-header .site-nav > li > a > i:first-child,
  .home-header .nav-menu > summary > i:first-child {
    font-size: 1.26rem;
    opacity: 0.92;
  }

  .home-header .nav-menu > summary .nav-caret {
    width: 1rem;
    height: 1rem;
    margin-inline-start: 0.05rem;
    padding: 0;
    border-radius: 0;
    background: transparent;
    opacity: 0.62;
  }

  .home-header .nav-menu > .nav-dropdown {
    inset-block-start: calc(100% + 1.65rem);
  }
}