/* Nexodyne — site-wide fixes layered on top of the Webflow export.
   Loaded after nexodyne-d0ea97.webflow.css on every page. Delete a rule to get the original look back. */

/* 1. Orbitron stays for big headlines only. Small and body text switches to Geist so it can be read. */
.why-text,
.form-section-title-copy.light-copy,
.form-section-title-copy.form-copy,
.form-section-title-copy.form-copy .link,
.text-16px-copy,
.section-heading._48px.end-form,
.text-38px-2-copy {
  font-family: Geist, Inter, sans-serif;
  letter-spacing: 0;
}
.why-text { font-size: 17px; line-height: 1.5; font-weight: 500; }
.form-section-title-copy.light-copy { font-size: 16px; line-height: 1.6; color: #4a4a68; }
.section-heading._48px.end-form { font-size: 22px; line-height: 1.45; font-weight: 600; }

/* 2. Legal/consent lines were rendering at 7px. Never below 12px. */
.form-section-title-copy.form-copy,
.form-section-title-copy.form-copy .link,
.form-section-title.form,
.form-section-title.form .link {
  font-size: 12px !important;
  line-height: 1.55;
}

/* 3. Rotated cards made their text blurry. Keep the stagger and the offset shadows, drop the tilt on cards with text. */
.card-line,
.card-line.green,
.card-line.red,
.horizontal-card,
.horizontal-card.yellow,
.faq-dropdown.green,
.faq-dropdown.red {
  transform: none;
}
.card-line .paragraph-32px { line-height: 1.45; }

/* 4. Visible keyboard focus everywhere (Webflow removes it on some elements). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.w-dropdown-toggle:focus-visible {
  outline: 3px solid #4f46e5;
  outline-offset: 3px;
}

/* 5. Single membership plan on the pricing page: always show the details instead of a collapsed dropdown. */
.nx-single-plan .w-dropdown-list {
  display: block !important;
  position: static !important;
  height: auto !important;
  opacity: 1 !important;
}
.nx-single-plan .faq-question { cursor: default; }
.nx-plan-terms {
  font-family: Geist, Inter, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: #282858;
  background: #fff6d6;
  border: 1.5px solid #282858;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0;
}

/* 6. "Reduce motion" (a setting on the visitor's device): no smooth scrolling and no endless loops.
      Each page removes movement itself and keeps gentle fades, which is what the setting asks for.
      (Squeezing every animation to 0.01ms made looping animations flicker at full speed.) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-iteration-count: 1 !important; }
}

/* 7. Homepage free-games card (was the founding-families card; replaces the testimonial carousel). The button's label
   stays on one line. */
.nx-founding-card { gap: 22px; max-width: 560px; padding: 28px; }
.nx-founding-card .button-p { white-space: nowrap; }

/* 8. Nav buttons stay on one line ("Take the Quiz", "Let’s Talk") */
.nav-button-wrapper .button-p { white-space: nowrap; }

/* 9. Homepage: the heading above the four feature cards was stuck at opacity 0 on desktop,
      which left a large empty gap under the hero. */
.why-us .title-wrap.full-width { opacity: 1 !important; }
.why-us .section-heading.auto { color: #282858; }

/* 10. Homepage founding-families band: give the heading room at the bottom. */
.section.about-us.bg { padding-bottom: 80px; }

/* 11. Membership card on the pricing page: readable text on the navy card, no radio (there's only one plan).
       The consent line was set to opacity 0.24 in the export, which made the legal terms near-invisible. */
.nx-single-plan .faq-ans { color: #ffffff !important; font-size: 16px; line-height: 1.55; }
.nx-single-plan .w-radio-input { display: none; }
.form-section-title.form { opacity: 1 !important; color: #4a4a68; }
.nx-single-plan .form-section-title.form { color: #d9d9ee !important; }
.nx-single-plan .form-section-title.form .link { color: #fedb71; }

/* 12. Homepage hero: the price sits 14px under the doors (the column's gap is 40px) instead of floating under the illustration. */
.nx-hero-price { margin: -26px 0 0; font-family: Geist, Inter, sans-serif; font-size: 15px; line-height: 1.5; color: #282858; }

/* 13. Membership card: monthly / yearly choice */
.nx-billing { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 4px; font-family: Geist, Inter, sans-serif; }
.nx-billing-option { position: relative; display: block; cursor: pointer; margin: 0; }
.nx-billing-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nx-billing-option span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px; border: 2px solid #ffffff; border-radius: 12px; color: #ffffff; font-size: 15px; line-height: 1.35; transition: background-color 0.12s, color 0.12s; }
.nx-billing-option strong { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.nx-billing-option input:checked + span { background: #fedb71; border-color: #fedb71; color: #282858; box-shadow: 4px 4px 0 #000; }
.nx-billing-option input:focus-visible + span { outline: 3px solid #4f46e5; outline-offset: 3px; }
.nx-save { font-style: normal; font-size: 12px; font-weight: 700; color: #282858; background: #d6f775; border-radius: 999px; padding: 2px 8px; align-self: flex-start; margin-top: 4px; }
@media screen and (max-width: 479px) { .nx-billing { grid-template-columns: 1fr; } }

/* 14. Quiz result card (computed from the answers) */
.nx-result { width: 100%; max-width: 560px; margin: 8px auto 0; font-family: Geist, Inter, sans-serif; color: #282858; text-align: left; }
.nx-result-note { font-size: 14px; color: #4a4a68; margin: 0 0 16px; }
.nx-area { margin-bottom: 14px; }
.nx-area-head { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; margin-bottom: 6px; }
.nx-area-head span { color: #4a4a68; white-space: nowrap; }
.nx-area-bar { height: 12px; background: #eeeef5; border-radius: 999px; overflow: hidden; }
.nx-area-bar span { display: block; height: 100%; width: 6%; background: #9a9ab5; border-radius: 999px; transition: width 0.6s ease; }
.nx-area.is-top .nx-area-bar span { background: #fb7d7e; }
.nx-area.is-top strong { text-decoration: underline; text-decoration-color: #fb7d7e; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.nx-start { margin-top: 20px; background: #fff6d6; border: 2px solid #282858; border-radius: 16px; box-shadow: 4px 4px 0 #282858; padding: 16px 18px; }
.nx-start-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #4a4a68; }
.nx-start strong { display: block; font-family: 'Orbitron Variablefont Wght', Orbitron, sans-serif; font-size: 22px; margin: 4px 0 6px; }
.nx-start p { margin: 0; font-size: 15px; line-height: 1.55; }

/* 15. Homepage hero: a playable preview of Mental Math Duel (js/home-demo.js) in place of the stock map animation. */
.nx-demo { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 0 40px; font-family: Geist, Inter, sans-serif; color: #282858; }
.nx-demo-phone { position: relative; width: 300px; max-width: 100%; background: #f5f5f0; border: 3px solid #282858; border-radius: 40px; box-shadow: 8px 8px 0 #282858; padding: 26px 18px 20px; }
.nx-demo-phone::before { content: ""; position: absolute; top: 10px; left: 50%; width: 64px; height: 6px; margin-left: -32px; border-radius: 3px; background: #282858; opacity: 0.85; }
.nx-demo-top { display: grid; text-align: center; gap: 2px; }
.nx-demo-top strong { font-family: 'Orbitron Variablefont Wght', Orbitron, sans-serif; font-size: 16px; }
.nx-demo-top span { font-size: 12px; color: #4a4a68; }
.nx-demo-dots { display: flex; justify-content: center; gap: 6px; margin: 10px 0 0; }
.nx-demo-dots i { width: 22px; height: 6px; border-radius: 3px; background: #dcdce8; }
.nx-demo-dots i.is-now { background: #282858; }
.nx-demo-dots i.is-done { background: #75c5a8; }
.nx-demo-sum { font-family: 'Orbitron Variablefont Wght', Orbitron, sans-serif; font-weight: 800; font-size: 46px; line-height: 1.1; text-align: center; margin: 16px 0 12px; }
.nx-demo-display { min-height: 54px; display: grid; place-items: center; padding: 6px 10px; text-align: center; background: #fff; border: 2px solid #282858; border-radius: 14px; font-size: 26px; font-weight: 700; line-height: 1.2; }
.nx-demo-display.is-empty { color: #b5b5c8; }
.nx-demo-display.is-note { font-size: 16px; }
.nx-demo-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.nx-demo-pad button { height: 46px; border: 2px solid #282858; border-radius: 12px; background: #fff; box-shadow: 3px 3px 0 #282858; font: 700 20px/1 Geist, Inter, sans-serif; color: #282858; cursor: pointer; transition: transform 0.08s, box-shadow 0.08s; touch-action: manipulation; }
.nx-demo-pad button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #282858; }
.nx-demo-pad button.is-ok { background: #75c5a8; }
.nx-demo-toast { position: absolute; left: 14px; right: 14px; top: 72px; padding: 10px 14px; border: 2px solid #282858; border-radius: 14px; box-shadow: 3px 3px 0 #282858; font-size: 15px; font-weight: 700; line-height: 1.35; text-align: center; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; pointer-events: none; }
.nx-demo-toast.is-show { opacity: 1; visibility: visible; transform: none; }
.nx-demo-toast.is-ok { background: #bfffe6; }
.nx-demo-toast.is-no { background: #fedb71; }
.nx-demo-caption { margin: 18px 0 0; font-size: 15px; font-weight: 600; }
.nx-demo-caption a { color: #282858; text-underline-offset: 3px; }
@media screen and (max-width: 991px) { .nx-demo { padding: 8px 0 56px; } }
@media screen and (max-width: 479px) {
  .nx-demo-phone { width: min(270px, 100%); padding: 24px 14px 16px; border-radius: 34px; box-shadow: 6px 6px 0 #282858; }
  .nx-demo-sum { font-size: 40px; }
  .nx-demo-pad button { height: 42px; }
}

/* 16. One shadow system. The export mixed black and navy offsets from 2px to 14px.
       Now: cards 8px navy (6px on phones), buttons and fields 4px navy, all with a 2px navy outline. */
:root { --nx-ink: #282858; --nx-shadow: 8px 8px 0 #282858; --nx-shadow-sm: 4px 4px 0 #282858; }
@media screen and (max-width: 767px) { :root { --nx-shadow: 6px 6px 0 #282858; } }
.card, .card-copy, .horizontal-card,
.growth--card, .growth-card2, .growth--card-copy, .growth-card2-copy,
.cms-main-card, .slide-wrap, .grey-block, .client-detail-wrap, .success-message-2,
.faq-dropdown.about-us, .faq-dropdown-copy.about-us {
  box-shadow: var(--nx-shadow) !important;
  border: 2px solid var(--nx-ink);
}
.button-p, .button-p-2, .button-p-copy, .button {
  box-shadow: var(--nx-shadow-sm) !important;
  border: 2px solid var(--nx-ink);
  transition: transform 0.12s, box-shadow 0.12s;
}
.button-p:hover, .button-p-2:hover, .button-p-copy:hover, .button:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--nx-ink) !important; }
/* No cursor flicker: a button that lifts on hover can slide out from under a mouse resting on its edge, drop back,
   lift again, and the cursor flips between the arrow and the hand. While hovered (and pressed), an invisible area
   stretches back over the spot the button moved from, so the mouse stays on it. */
.button-p, .button-p-2, .button-p-copy { position: relative; }
.button-p:hover::before, .button-p-2:hover::before, .button-p-copy:hover::before { content: ""; position: absolute; inset: -4px -6px -6px -4px; }
.button-p:active, .button-p-2:active, .button-p-copy:active, .button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--nx-ink) !important; }
/* On navy sections a navy shadow disappears: use the page's yellow instead. */
.section.cta .button-p { box-shadow: 4px 4px 0 #fedb71 !important; border-color: #fedb71; }

/* 17. Icons: one line-icon style (Lucide) in the site's palette, instead of emoji and neon-coloured stock icons. */
.card-why .icon-background {
  width: 44px; height: 44px; border-radius: 12px; background-color: #ffffff; border: 2px solid #282858; color: #282858; display: flex;
}
.card-why .card.dark .icon-background { background-color: #fedb71; border-color: #fedb71; }
.nx-step-ico { width: 22px; height: 22px; padding: 7px; border: 2px solid #282858; border-radius: 10px; background: #ffffff; color: #282858; vertical-align: middle; margin: -4px 12px 0 0; box-sizing: content-box; }

/* 18. The sunrise animation took a full screen of scroll on desktop. Keep it, smaller. */
.lottie-animation-15 { max-width: 760px; width: 100%; margin-left: auto; margin-right: auto; }

/* 19. Headlines break evenly instead of leaving one word on the last line. */
h1, h2, h3, .section-heading { text-wrap: balance; }

/* 20. Reading comfort. Body text had -1.2px letter-spacing and, on phones, a line-height of 1 (lines touching).
       The hero headline dropped to 22px on phones. */
.main-text, .main-text-copy, .paragraph-20px, .paragraph-20px-copy, .paragraph-32px { letter-spacing: -0.2px; line-height: 1.55; }
p[class*="paragraph-20px"], p[class*="main-text"] { letter-spacing: -0.2px !important; line-height: 1.55 !important; }
.text-size-large { line-height: 1.45; }
.section-heading.head { color: #282858; }
@media screen and (max-width: 479px) {
  .main-text, .main-text-copy, .paragraph-20px, .paragraph-20px-copy { line-height: 1.55; }
  .paragraph-32px { line-height: 1.45; }
  .section-heading.head { font-size: 40px; line-height: 1.05; letter-spacing: -1px; font-weight: 700; max-width: none; }
}

/* 21. Cards on phones: size to their content instead of a fixed 300px with empty space in the middle. */
@media screen and (max-width: 479px) {
  .card-why .card, .card-why .card.dark { height: auto; min-height: 0; gap: 14px; padding: 16px 16px 20px; }
}

/* 22. The three "Nexodyne idea" bars: text no longer runs into the right edge; one icon per idea. */
.card-line { padding-right: 32px; box-shadow: var(--nx-shadow) !important; border: 2px solid var(--nx-ink); }
.spacer .card-line { box-shadow: 8px 8px 0 #11112b !important; border-color: #11112b; } /* on the homepage's navy band */
.card-line .icon-background { color: #ffffff; display: flex; flex: none; width: 40px; height: 40px; border-radius: 10px; }
.card-line.red .paragraph-32px { color: var(--nx-ink); } /* on coral: 5.4:1, the default text colour gave 4.4:1 (4.5:1 is the minimum) */
@media screen and (max-width: 479px) { .card-line { padding-left: 20px; padding-right: 20px; } }


/* 23. Softer hover everywhere: colours, borders and shadows ease in and out instead of snapping.
       (Transform and opacity are left alone so Webflow's own scroll animations keep their timing.) */
a, button, .w-button, label, .w-checkbox, .w-dropdown-toggle, .faq-question, .footer-link, .footer-link-block, .nav-link,
.card, .card-line, .growth--card, .growth-card2, .growth--card-copy, .growth-card2-copy, .text-field, .text-field-2 {
  transition-property: color, background-color, border-color, box-shadow, text-decoration-color, filter;
  transition-duration: .22s;
  transition-timing-function: cubic-bezier(.2, .75, .25, 1);
}
.button-p, .button-p-2, .button-p-copy, .button, .nx-btn {
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: .22s;
  transition-timing-function: cubic-bezier(.2, .75, .25, 1);
}

/* 24. Three ways in. Wherever the site invites people to start, it offers the assessment first, then the games
       and the quizzes. In the header: one pill in three parts. In a section: the assessment as a full-width button,
       games and quizzes as two smaller doors beneath. Hover changes colour and shadow only, so nothing moves
       out from under the mouse (no cursor flicker). */
.nx-pn { display: inline-flex; align-items: stretch; height: 40px; border: 2px solid #282858; border-radius: 100px; overflow: hidden; background: #fff; box-shadow: 4px 4px 0 #282858; white-space: nowrap; }
.nx-pn-item { display: inline-flex; align-items: center; gap: 8px; padding: 0 15px; font-size: 12px; font-weight: 600; color: #282858; text-decoration: none; background: #fff; }
.nx-pn-item + .nx-pn-item { border-left: 2px solid #282858; }
.nx-pn-item.is-main { background: #fedb71; padding-left: 18px; }
.nx-pn-item.is-main img { width: 9px; }
.nx-pn-item:hover { background: #fff6d6; color: #282858; }
.nx-pn-item.is-main:hover { background: #ffe9a3; }
.nx-pn-item:focus-visible { outline: 3px solid #4f46e5; outline-offset: -5px; }
.nav-button-wrapper.mobile { flex-wrap: wrap; justify-content: center; } /* phone menu: Let's Talk goes under the pill when it can't sit beside it */
.nav-button-wrapper.mobile .nx-pn { width: calc(100% - 40px); max-width: 380px; } /* clear of the screen edges, shadow included */
/* The export leaves 120px before the header buttons; the three-part pill and the Log in (or Dashboard) button need that
   room on mid-size screens. The logo keeps its size and labels never wrap: the links move closer together instead. */
/* The header is a grid: its logo column would shrink to nothing when space runs short. The logo is never under 120px. */
.navbar-brand { min-width: 120px; }
.nav-menu .nav-link { white-space: nowrap; }
@media screen and (min-width: 992px) and (max-width: 1279px) { .nav-logo { width: 120px; max-width: none; } }
@media screen and (min-width: 992px) and (max-width: 1439px) { .nav-button-wrapper:not(.mobile) { margin-left: 16px; grid-column-gap: 10px; } }
@media screen and (min-width: 992px) and (max-width: 1099px) {
  .nav-menu .nav-link { padding-left: 5px; padding-right: 5px; font-size: 13px; }
  .nav-button-wrapper:not(.mobile) .nx-pn-item { padding: 0 9px; }
  .nav-button-wrapper:not(.mobile) .nx-pn-item.is-main { padding-left: 11px; }
  .nav-button-wrapper:not(.mobile) .button-p { padding-left: 14px; padding-right: 14px; }
}
@media screen and (min-width: 1100px) and (max-width: 1199px) {
  .nav-menu .nav-link { padding-left: 8px; padding-right: 8px; }
  .nav-button-wrapper:not(.mobile) .button-p { padding-left: 16px; padding-right: 16px; } /* room for "Dashboard" */
}
@media screen and (min-width: 1200px) and (max-width: 1279px) { .nav-menu .nav-link { padding-left: 13px; padding-right: 13px; } }
.nav-button-wrapper.mobile .nx-pn-item { flex: 1; justify-content: center; }

.nx-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 470px; }
.nx-paths.is-center { margin-left: auto; margin-right: auto; }
.nx-path {
  display: flex; align-items: center; gap: 11px; min-height: 54px; padding: 8px 14px 8px 8px; text-align: left;
  border: 2px solid #282858; border-radius: 100px; background: #fff; color: #282858; text-decoration: none;
  box-shadow: 3px 3px 0 #282858;
}
.nx-path.is-main { grid-column: 1 / -1; min-height: 62px; padding: 8px 10px 8px 8px; background: #282858; color: #fedb71; box-shadow: 4px 4px 0 #fedb71, 4px 4px 0 2px #282858; }
.nx-path-ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #fedb71; color: #282858; border: 2px solid #282858; }
.nx-path.is-main .nx-path-ic { width: 44px; height: 44px; border-color: #fedb71; }
.nx-path-ic svg { width: 19px; height: 19px; }
.nx-path-text { display: grid; gap: 1px; min-width: 0; line-height: 1.2; }
.nx-path-text strong { font-size: 15px; font-weight: 700; }
.nx-path.is-main .nx-path-text strong { font-size: 16.5px; }
.nx-path-text small { font-size: 12.5px; font-weight: 500; opacity: .8; }
.nx-path-go { margin-left: auto; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #fedb71; color: #282858; }
.nx-path-go svg { width: 17px; height: 17px; }
.nx-path:hover { background: #fff6d6; box-shadow: 5px 5px 0 #282858; color: #282858; }
.nx-path.is-main:hover { background: #33336d; color: #fedb71; box-shadow: 6px 6px 0 #fedb71, 6px 6px 0 2px #282858; }
.nx-path:focus-visible { outline: 3px solid #4f46e5; outline-offset: 3px; }
/* On a navy section the navy shadows vanish: the doors turn white with yellow shadows */
.nx-paths.on-dark .nx-path { border-color: #fedb71; box-shadow: 3px 3px 0 #fedb71; }
.nx-paths.on-dark .nx-path.is-main { background: #fedb71; color: #282858; box-shadow: 4px 4px 0 #fff; }
.nx-paths.on-dark .nx-path.is-main .nx-path-ic { background: #fff; border-color: #282858; }
.nx-paths.on-dark .nx-path.is-main .nx-path-go { background: #282858; color: #fedb71; }
.nx-paths.on-dark .nx-path:hover { box-shadow: 5px 5px 0 #fedb71; }
.nx-paths.on-dark .nx-path.is-main:hover { background: #ffe9a3; color: #282858; box-shadow: 6px 6px 0 #fff; }
/* In a narrow card (the game pages' sidebar) */
.nx-paths.is-compact { grid-template-columns: 1fr; gap: 10px; } /* a narrow card: one door per line */
.nx-paths.is-compact .nx-path { min-height: 48px; }
.nx-paths.is-compact .nx-path-ic { width: 32px; height: 32px; }
.nx-paths.is-compact .nx-path-ic svg { width: 16px; height: 16px; }
.nx-paths.is-compact .nx-path-text strong { font-size: 14px; }
.nx-paths.is-compact .nx-path.is-main .nx-path-text strong { font-size: 14.5px; }
.nx-paths.is-compact .nx-path-text small { font-size: 11.5px; }
.nx-paths.is-compact .nx-path-go { display: none; } /* the words need the room; the navy door is the main one without it */
@media screen and (max-width: 360px) { .nx-paths { grid-template-columns: 1fr; } }

/* The header button says "Log in", or "Dashboard" for a member who is logged in. Each page's head reads the nx_in
   cookie before the page is drawn, so the label never changes in front of you (js/nx-account.js points the link). */
html.nx-logged-in .nx-acct-out, html:not(.nx-logged-in) .nx-acct-in { display: none; }

/* 25. Entrance animations (js/nx-reveal.js). Webflow's scroll animations kept the top of each page invisible until
       webflow.js had run; these start with the first paint. data-reveal = left | right | up | fade,
       data-reveal-delay = 300 | 500 | 600 (ms). Reduce motion: the same fades in the same order, without the movement. */
[data-reveal] { --nx-reveal-x: 0px; --nx-reveal-y: 0px; --nx-reveal-delay: 0s; }
[data-reveal="left"] { --nx-reveal-x: -100px; }
[data-reveal="right"] { --nx-reveal-x: 100px; }
/* a block coming in from the right would widen the page for a moment on phones */
.section:has([data-reveal="right"]) { overflow-x: clip; }
[data-reveal="up"] { --nx-reveal-y: 100px; }
[data-reveal-delay="300"] { --nx-reveal-delay: 0.3s; }
[data-reveal-delay="500"] { --nx-reveal-delay: 0.5s; }
[data-reveal-delay="600"] { --nx-reveal-delay: 0.6s; }
@keyframes nx-reveal { from { opacity: 0; translate: var(--nx-reveal-x) var(--nx-reveal-y); } }
html.nx-reveal [data-reveal]:not(.nx-in) { opacity: 0; }
[data-reveal].nx-in { animation: nx-reveal 1.2s cubic-bezier(0.25, 1, 0.5, 1) var(--nx-reveal-delay) backwards; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { --nx-reveal-x: 0px; --nx-reveal-y: 0px; } }
@media print { [data-reveal] { opacity: 1 !important; animation: none !important; } }

/* 26. Lottie animations (js/nx-lottie.js) arrive when they come near the screen. Their space is kept from the start,
       at each file's own shape, so the page does not jump when one appears. */
[data-animation-type="lottie"] > svg { display: block; }
.lottie-animation-15 { aspect-ratio: 594 / 222; }
@media screen and (max-width: 479px) {
  .cute-compass-flat-icon-animation-design-in-4k { height: auto; aspect-ratio: 1920 / 1080; }
}

/* 27. FAQ (faq.html). Opening a question, in 0.3 s: the answer unfolds, the card turns yellow, the question navy and
       the arrow turns over. The same look as before, without Webflow's interaction script (140 KB on every page);
       the dropdown script still opens and closes them (click, Enter, Space, Escape, one open at a time).
       Closed answers are hidden from screen readers too. Reduce motion: the same fades, the arrow fades into an
       upturned copy instead of turning, and the answer's space opens at once. Answers read like the rest of the
       site (on phones and tablets they were centred, at 13-15px with the lines overlapping). */
.faq-dropdown { transition: background-color .3s linear; }
.faq-question .paragraph-20px.white { transition: color .3s linear; }
.faq-question .icon-background { transition: rotate .3s linear; }
.faq-question .arrow-faq { transition: filter .3s linear; }
.faq-question.w--open .icon-background { rotate: 180deg; }
@supports selector(:has(*)) {
  .faq-dropdown:has(> .w--open) { background-color: var(--primary); }
  .faq-question.w--open .paragraph-20px.white { color: var(--blue); }
  .faq-question.w--open .arrow-faq { filter: invert(100%); }
}
.faq-dropdown .faq-answer { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .3s linear, opacity .3s linear, visibility 0s .3s; }
.faq-dropdown .faq-answer.w--open { display: grid; grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows .3s linear, opacity .3s linear; }
.faq-answer-inner { min-height: 0; overflow: hidden; }
.faq-answer-inner .paragraph-16px.regular.faq-ans { width: auto; max-width: none; margin: 0; padding: 10px 0 14px; font-size: 16px; line-height: 1.55; text-align: left; }
@media (prefers-reduced-motion: reduce) {
  .faq-dropdown .faq-answer { transition: opacity .3s linear, grid-template-rows 0s .3s, visibility 0s .3s; }
  .faq-dropdown .faq-answer.w--open { transition: opacity .3s linear; }
  .faq-question .icon-background { position: relative; transition: none; }
  .faq-question.w--open .icon-background { rotate: none; }
  .faq-question .icon-background::after { content: ""; position: absolute; inset: 0; background: url("../images/Vector-1_1.svg") center / 12px 7px no-repeat; rotate: 180deg; opacity: 0; transition: opacity .3s linear; }
  .faq-question .arrow-faq { transition: filter .3s linear, opacity .3s linear; }
  .faq-question.w--open .arrow-faq { opacity: 0; }
  .faq-question.w--open .icon-background::after { opacity: 1; }
  @supports selector(:has(*)) { .faq-question .icon-background::after { filter: invert(100%); } }
}

/* 28. Page-by-page review (2026-10-15): the small things that made pages look unfinished. */

/* Navy buttons on white: the navy shadow merged with the button. A yellow step with a navy edge, like the cards.
   (On navy sections, section 16's yellow shadow still applies.) */
.button-p.blue { box-shadow: 4px 4px 0 #fedb71, 4px 4px 0 2px #282858 !important; }
.button-p.blue:hover { box-shadow: 5px 5px 0 #fedb71, 5px 5px 0 2px #282858 !important; }
.button-p.blue:active { box-shadow: 2px 2px 0 #fedb71, 2px 2px 0 2px #282858 !important; }
/* The same step for the navy buttons of the library, plan and game pages (library.css gives them a navy shadow).
   Pressed, they sit flat as before; plan.css keeps disabled ones flat. */
.nx-btn:not(.light) { box-shadow: 4px 4px 0 #fedb71, 4px 4px 0 2px #282858; }
.nx-btn:not(.light):hover { box-shadow: 5px 5px 0 #fedb71, 5px 5px 0 2px #282858; }
.nx-btn:not(.light):active { box-shadow: 1px 1px 0 #282858; }
/* Button arrows were the same colour as their button (navy on navy, yellow on yellow). Draw them in the text colour. */
@supports (mask-image: none) or (-webkit-mask-image: none) {
  .button-icon[src*="Arrow-1.png"], .nx-pn-item img[src*="Arrow-1_1.png"] {
    object-position: -99px 0; background-color: currentColor;
    -webkit-mask: url("../images/Arrow-1_1.svg") center / contain no-repeat;
    mask: url("../images/Arrow-1_1.svg") center / contain no-repeat;
  }
}
/* Team page: the slider's arrows sit under the slider; the navy band's yellow button steps down in a darker navy,
   like the cards on the home page's navy band (section 22). */
.section.team .swiper-arrow-wrapper { margin: 36px 0 0; }
.section.team-extra .button-p { box-shadow: 4px 4px 0 #11112b !important; border-color: #fedb71; flex: none; }
.section.team-extra .button-p:hover { box-shadow: 5px 5px 0 #11112b !important; }
.section.team-extra .button-p:active { box-shadow: 2px 2px 0 #11112b !important; }
/* Between phone and tablet widths the band stacks: its text is centred like its button, as on phones. */
@media screen and (max-width: 767px) { .section.team-extra .title-wrap { text-align: center; } }
/* Team and About us bands: the sentence is as big on desktop as on tablets (it was 16px), in even lines. On Team it
   stays close to its button; on About us, which has no button, it sits in the middle. */
@media screen and (min-width: 992px) {
  .section.team-extra .paragraph-32px { font-size: 26px; text-wrap: balance; }
  .section.team-extra .paragraph-32px:not(.center) { max-width: 680px; }
  .section.team-extra .title-wrap.full { column-gap: 48px; }
}
.section.team-extra .paragraph-32px.center { text-align: center; text-wrap: balance; }
/* Sliders: Swiper’s screen-reader messages stay off screen (its own stylesheet isn’t loaded). */
.swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; }
/* Sliders: Swiper sizes and spaces the cards itself, so Webflow's own sizes stand aside once it runs. The 440px cap
   made cards narrower than Swiper counted (from about 600 to 990px wide the current card sat partly off the left edge),
   and the 68px gap at 480 to 767px pushed the current card 136px in from the left. */
.swiper-initialized .swiper-slide { max-width: none; }
.swiper-initialized .swiper-wrapper { column-gap: 0; }
/* Blog posts: on phones the closing button's label takes two lines, so the button grows to fit them (it was a fixed
   40px pill and the words ran over its edges at 320px). Its inline padding gives way to the usual button padding. */
@media screen and (max-width: 479px) {
  .button-p-copy.blue-copy { width: auto; max-width: 100%; height: auto; min-height: 40px; padding: 10px 25px !important; justify-content: center; text-align: center; text-wrap: balance; }
}

/* Home page closing lines: the two lines are one size on tablets and phones too, and the big heading is not squeezed. */
@media screen and (max-width: 991px) { .text-38px-2, .text-38px-2.geist { font-size: 30px; } }
@media screen and (max-width: 479px) { .section-heading.fixed-600.center { letter-spacing: -0.5px; line-height: 1.05; } }
/* Home page: "What We Stand For" and "A Better Parenthood" were bigger on big phones and small tablets (80px) than on
   desktop (56px), and "Parenthood" was wider than screens of 480 to 520px. They keep the tablet size there. */
@media screen and (min-width: 480px) and (max-width: 767px) { .section-heading.fixed-640 { font-size: 56px; } }

/* Phone menu: fills the screen under the bar instead of stopping halfway down the page. */
@media screen and (max-width: 991px) {
  .nav-menu { min-height: calc(100vh - 48px); min-height: calc(100dvh - 48px); justify-content: flex-start; }
}
@media screen and (max-width: 479px) {
  .nav-menu { min-height: calc(100vh - 54px); min-height: calc(100dvh - 54px); }
}
/* The open menu covers the page's sticky bars (the library's filters, layer 20); the bar itself sits at layer 5. */
.w-nav:has(.w-nav-button.w--open) { z-index: 1000; }

/* FAQ: one column on every screen, so the questions read 1 to 10 and an open answer doesn't push the other column
   out of line. Round icons that don't squeeze next to long questions; the question sits in the middle of its card. */
@media screen and (min-width: 992px) {
  .faq-grid.hide-on-tablet { display: none; }
  .faq-grid.hide-on-desktop { display: grid; grid-template-columns: 1fr; max-width: 760px; margin-left: auto; margin-right: auto; }
}
.faq-grid.hide-on-desktop { grid-row-gap: 20px; }
.faq-question { padding: 5px 0; }
.faq-question .icon-background { flex: none; }

/* /audit: the privacy note under the first question was faded below readable contrast. */
.nxq #SLIDEID0 .light-copy-copy, .form-section-title-copy-copy.light-copy-copy { opacity: 1; }
/* Its legal links are navy like the text (the export's .link span inside each one made them pure blue). */
.form-section-title-copy.form-copy a, .form-section-title-copy.form-copy a .link { color: #282858; }

/* Home page: the four "why" cards share the row equally; the about cards' pictures are one height. */
@media screen and (min-width: 992px) { .card-why:not(.grid) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cards-wrap .card.about-us > img, .cards-wrap .about-us-copy > img { height: 56px; width: auto; }

/* About us: the sticky heading fits its column. */
.sticky-box .section-heading { font-size: 56px; letter-spacing: -2px; line-height: 1; }
@media screen and (max-width: 479px) { .sticky-box .section-heading { font-size: 44px; letter-spacing: -1.5px; } }
/* Small phones: the picture beside "Our Origin" keeps its 40% and gives way only when the heading needs the room,
   instead of pushing the page wider. */
@media screen and (max-width: 479px) {
  .title-wrap.full.flex-mobile > .section-heading { flex-shrink: 1000; }
  .title-wrap.full.flex-mobile .image-15 { min-width: 0; }
}

/* Blog list: cards are the same height in a row, titles use the card's width, and the featured title lines up left. */
.collection-list .blog-content-block { align-items: stretch; }
.collection-list .section-heading._20px { max-width: none; }
.main-blog-left-content .section-heading._48px { text-align: left; margin-left: 0; }

/* Contact form: the fields line up and keep one gap; the message box no longer keeps room for an icon. */
#contact-form .text-field-block { margin-bottom: 22px; }
.tex-area-new { padding-left: 28px; }
.paragraph-24px.semi-bold { letter-spacing: -0.01em; }
@media screen and (max-width: 991px) {
  #contact-form .text-field { width: 100%; margin: 0; }
  .button-icon-absolute { left: auto; }
}
/* Phones: the button's bottom margin moves to its wrapper, so the arrow stays level with the label */
@media screen and (max-width: 479px) {
  .button-wrappers { padding-bottom: 25px; }
  .button-wrappers > .button-p.blue { margin-bottom: 0; }
  /* Small phones: "Nexodyne" at 60px was wider than the screen, so the heading and the lines under it were cut off on
     the right. It shrinks with the screen below 334px and stays 60px above. */
  .contact-wrap .section-heading.fixed-500.left { font-size: min(60px, 18vw); }
}

/* Footer on phones and small tablets: links in two tidy columns that start under the logo, the legal links wrap as
   whole words, the small print stays readable. */
.footer-copyright-center { max-width: 70ch; margin-left: auto; margin-right: auto; }
@media screen and (max-width: 767px) {
  .footer-wrapper { align-items: flex-start; }
  .footer-content { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: start; gap: 28px 48px; }
  .footer-block { align-items: flex-start; }
}
@media screen and (max-width: 479px) {
  .footer-block { gap: 16px; }
  .footer-block.less { flex-flow: column; gap: 16px; }
  .footer-link { font-size: 14px; line-height: 1.3; }
  .footer-below-first { flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
  .footer-below-first .footer-link { white-space: nowrap; }
  .footer-copyright-center { font-size: 12px; line-height: 1.5; }
}

/* Rows that open (quiz FAQ, the plan's stages, a game's answers, the dashboard's weeks) show an arrow on the right
   that turns over when open. Reduce motion: the arrow fades into an upturned copy instead of turning. */
@supports (mask-image: none) or (-webkit-mask-image: none) {
  :is(.nx-faq details, details.nx-answers, details.nx-prog-all, details.nx-stages-wrap) > summary { position: relative; padding-right: 34px; list-style: none; }
  :is(.nx-faq details, details.nx-answers, details.nx-prog-all, details.nx-stages-wrap) > summary::-webkit-details-marker { display: none; }
  :is(.nx-faq details, details.nx-answers, details.nx-prog-all, details.nx-stages-wrap) > summary::after,
  :is(.nx-faq details, details.nx-answers, details.nx-prog-all, details.nx-stages-wrap) > summary::before {
    content: ""; position: absolute; top: 50%; right: 4px; width: 14px; height: 9px; margin-top: -4.5px; pointer-events: none;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5l5.5 5.5 5.5-5.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5l5.5 5.5 5.5-5.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  :is(.nx-faq details, details.nx-answers, details.nx-prog-all, details.nx-stages-wrap) > summary::before { display: none; }
  :is(.nx-faq details, details.nx-answers, details.nx-prog-all, details.nx-stages-wrap) > summary::after { transition: rotate .3s linear; }
  :is(.nx-faq details, details.nx-answers, details.nx-prog-all, details.nx-stages-wrap)[open] > summary::after { rotate: 180deg; }
  @media (prefers-reduced-motion: reduce) {
    :is(.nx-faq details, details.nx-answers, details.nx-prog-all, details.nx-stages-wrap) > summary::before { display: block; rotate: 180deg; opacity: 0; transition: opacity .3s linear; }
    :is(.nx-faq details, details.nx-answers, details.nx-prog-all, details.nx-stages-wrap) > summary::after { transition: opacity .3s linear; }
    :is(.nx-faq details, details.nx-answers, details.nx-prog-all, details.nx-stages-wrap)[open] > summary::after { rotate: none; opacity: 0; }
    :is(.nx-faq details, details.nx-answers, details.nx-prog-all, details.nx-stages-wrap)[open] > summary::before { opacity: 1; }
  }
  @media print {
    :is(.nx-faq details, details.nx-answers, details.nx-prog-all, details.nx-stages-wrap) > summary::after,
    :is(.nx-faq details, details.nx-answers, details.nx-prog-all, details.nx-stages-wrap) > summary::before { display: none; }
  }
}

/* Words that read badly when split at the hyphen ("money-back", "well-established") */
.nx-nowrap { white-space: nowrap; }

/* Paragraphs, list items and questions don't leave one word alone on the last line (Chrome, Edge, Safari 26;
   other browsers wrap as before). Headings already balance (section 19). */
p, li, blockquote, figcaption, dd, summary { text-wrap: pretty; }

/* Sign-in: the email label reads as a label (it was plain inline text). */
.nx-email-form label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: #282858; }

/* Blog posts: space between the short paragraphs, and more above each heading than between paragraphs */
.cms-rich p, .cms-rich ul { margin-bottom: 0.75em; }
.cms-rich h2 { margin-top: 1em; margin-bottom: 0.35em; }
.cms-rich li { color: #313867; font-size: 20px; font-weight: 600; line-height: 1.5em; }
.cms-rich li + li { margin-top: 0.3em; }
.cms-rich > :last-child { margin-bottom: 0; }
@media screen and (max-width: 479px) {
  .cms-rich li { font-size: 18px; font-weight: 500; }
}

/* Blog list: the featured card shows its whole picture, with the title on a navy band below it (no text over the picture) */
.cms-main-card .main-image-blog { height: 440px !important; border-radius: 0 !important; }
.cms-main-card .main-block-content-block { position: static !important; height: auto !important; background: var(--blue) !important; border-radius: 0 !important; padding: 32px 40px !important; }
@media screen and (max-width: 479px) {
  .cms-main-card .main-image-blog { height: 240px !important; }
  .cms-main-card .main-block-content-block { padding: 24px !important; }
  .cms-main-card .grid-blog-2 { grid-template-columns: 1fr !important; }
}

/* Blog posts on tablets and phones: show the whole picture (the fixed heights cut off its sides) */
@media screen and (max-width: 991px) {
  .main-image-blog.auto { height: auto !important; }
}


/* 29. Small phones (about 280 to 360px wide) and big text: nothing is wider than the screen. Headings and cards shrink
   only where they would not fit; on wider screens nothing changes. */
@media screen and (max-width: 479px) {
  section.tool .bold-text-6 { font-size: min(46px, 14vw); }
  .comparison-wrap > .section-heading.fixed-640 { font-size: min(44px, 14vw); }
  section.ceo .section-heading._64px { font-size: min(60px, 18vw); }
  .cards-wrap > .card { min-width: min(220px, 100%); }
  .cards-wrap > .card-copy { min-width: min(265px, 100%); }
  .w-dyn-item > .card.auto { min-width: min(220px, 100%); } /* blog cards on /blogs and under each post */
  .w-dyn-item > .card.auto .blog-content-block > div { flex-wrap: wrap; gap: 6px 12px; } /* the date goes under "Guide" */
}
@media screen and (max-width: 359px) {
  .w-dyn-item > .card.auto .blog-content-block { padding: 24px 12px !important; } /* more room for the title (inline style) */
}
/* Home page: on the narrowest screens the free-games card (.nx-founding-card, the old founding-families card) drops its
   side margins and some padding, so "Play a free game" fits inside it on one line. */
@media screen and (max-width: 300px) { .nx-founding-card { margin-left: 0; margin-right: 0; padding: 20px; } }

/* 30. The home page's card titles (Mission, Vision and the four "How It Works" steps) are h3, the level after their
   section's h2 (they were h4, so screen readers heard a level skipped). They keep the h4 look: no bottom margin, and
   plain wrapping (balanced lines split "5-Minute" on phones). */
.title-optimisation { margin-bottom: 0; text-wrap: wrap; }

/* 31. Images say their width and height in the page, so the browser keeps their space free while they load and the
   text under them doesn't jump. This keeps each image at its real shape where CSS sets only its width; :where() adds
   no weight, so any height set elsewhere still wins. */
:where(img[width][height]) { height: auto; }

/* 32. A link to a heading (/purchase-policy#refunds) stops a little above it, not with the heading against the top edge.
   :where() adds no weight, so a page's own scroll margin (library.css) still wins. */
:where(h2[id], h3[id]) { scroll-margin-top: 24px; }

/* 33. Menu links now match the address, so Webflow marks the current page again (w--current). Its phone style made that
   link 2 px smaller than the others, which looks like a mistake; it keeps their size (aria-current tells screen readers). */
@media screen and (max-width: 479px) { .nav-menu .nav-link.w--current { font-size: 24px; } }