/* Plan page (quiz-form.html). Builds on library.css and the result-card styles in nexodyne-overrides.css. */
.nx-plan-body { margin: 0; background: #fff; font-family: Geist, Inter, sans-serif; }
.nx-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: #f5f5f0; border-bottom: 1px solid #e4e4ee; }
.nx-topbar-logo img { display: block; }
.nx-topbar-offer { flex: 1; font-size: 14px; font-weight: 600; color: #282858; text-align: center; }
.nx-topbar-cta { padding: 11px 18px !important; font-size: 14px !important; text-decoration: none; white-space: nowrap; }

.nx-plan-narrow { max-width: 720px; }
.nx-plan-hero { background: #fedb71; border-bottom: 2px solid #282858; padding: 48px 0 44px; }
.nx-kicker { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #282858; margin: 0 0 10px; }
.nx-plan-hero h1 { font-size: clamp(32px, 5vw, 54px); margin-bottom: 24px; }
.nx-plan-hero .nx-result { max-width: none; background: #fff; border: 2px solid #282858; border-radius: 22px; box-shadow: 8px 8px 0 #282858; padding: 22px 24px 24px; }
.nx-no-result { background: #fff; border: 2px solid #282858; border-radius: 22px; box-shadow: 8px 8px 0 #282858; padding: 22px 24px; }
.nx-no-result p { font-size: 17px; line-height: 1.6; margin: 0 0 16px; color: #282858; }
.nx-no-result .nx-btn { text-decoration: none; }

.nx-week { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; margin-top: 26px; align-items: start; }
.nx-sample-card { position: relative; background: #beffe7; border: 3px solid #282858; border-radius: 26px; padding: 30px 28px 22px; color: #282858; }
.nx-sample-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: #282858; color: #fedb71; border-radius: 999px; padding: 5px 10px; }
.nx-sample-step { margin-top: 16px; text-align: center; font-family: 'Orbitron Variablefont Wght', Orbitron, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.nx-sample-title { margin: 12px auto 18px; max-width: 420px; text-align: center; background: #282858; color: #fedb71; border-radius: 14px; padding: 14px 18px; font-family: 'Orbitron Variablefont Wght', Orbitron, sans-serif; font-size: 22px; font-weight: 700; }
.nx-sample-card > p { font-size: 16px; line-height: 1.6; color: #454545; margin: 0 0 14px; }
.nx-sample-protocol { background: #fff; border: 2px solid #282858; border-radius: 14px; padding: 16px 18px; }
.nx-sample-label { font-family: 'Orbitron Variablefont Wght', Orbitron, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid #eee; padding-bottom: 8px; margin-bottom: 8px; }
.nx-sample-protocol p { margin: 0; font-size: 16px; line-height: 1.6; color: #454545; }
.nx-sample-foot { margin: 14px 0 0 !important; font-size: 13px !important; color: #4a4a68 !important; text-align: center; }

.nx-week-side { display: grid; gap: 18px; }
.nx-tonight { display: grid; gap: 6px; text-decoration: none; color: #282858; background: #fff6d6; border: 2px solid #282858; border-radius: 20px; box-shadow: 6px 6px 0 #282858; padding: 20px; transition: transform 0.12s, box-shadow 0.12s; }
.nx-tonight:hover { transform: translate(-1px, -1px); box-shadow: 7px 7px 0 #282858; }
.nx-tonight { position: relative; } /* no cursor flicker at its edge (see library.css) */
.nx-tonight:hover::before { content: ""; position: absolute; inset: -4px -6px -6px -4px; }
.nx-tonight .nx-sample-tag { justify-self: start; }
.nx-tonight strong { font-family: 'Orbitron Variablefont Wght', Orbitron, sans-serif; font-size: 26px; margin-top: 6px; }
.nx-tonight span { font-size: 15px; color: #4a4a68; }
.nx-tonight .nx-tonight-go { color: #282858; font-weight: 700; margin-top: 4px; }
.nx-week-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nx-week-list li { font-size: 16px; line-height: 1.5; color: #282858; padding-left: 26px; position: relative; }
.nx-week-list li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: #75c5a8; border: 2px solid #282858; }

/* Your 12-week program: week 1 in full (js/plan.js), then the three stages */
.nx-w1 { padding-top: 24px; }
.nx-w1 .nx-sample-title { margin-bottom: 14px; }
.nx-w1-part { margin-top: 12px; }
.nx-w1-part p { margin: 0 0 6px; }
.nx-sample-protocol .nx-w1-say { margin-top: 8px; font-style: italic; color: #282858; }
.nx-w1-days, .nx-w1-steps { margin: 0; padding: 0; display: grid; gap: 6px; font-size: 16px; line-height: 1.45; color: #454545; }
.nx-w1-days { list-style: none; }
.nx-w1-steps { padding-left: 22px; }
.nx-w1-days li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.nx-w1-day { min-width: 46px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #282858; }
.nx-w1-days a { color: #282858; font-weight: 700; }
.nx-w1-days small { font-size: 13px; color: #4a4a68; }
.nx-stages { display: grid; gap: 16px; }
.nx-stages-wrap { background: #fff; border: 2px solid #282858; border-radius: 20px; padding: 14px 20px; }
.nx-stages-wrap[hidden] { display: none; }
.nx-stages-wrap summary { cursor: pointer; min-height: 28px; font-size: 16px; font-weight: 700; color: #282858; }
.nx-stages-wrap[open] summary { margin-bottom: 14px; }
.nx-stage h3 { margin: 0 0 8px; font-family: Geist, Inter, sans-serif; font-size: 13px; line-height: 1.4; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #282858; }
.nx-stage ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nx-stage li { font-size: 15px; line-height: 1.4; color: #282858; }
.nx-stage li span { display: inline-block; min-width: 66px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #4a4a68; }

.nx-plan-offer { background: #f5f5f0; border-top: 2px solid #282858; border-bottom: 2px solid #282858; }
.nx-offer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px; align-items: start; }
.nx-inside { list-style: none; margin: 18px 0 24px; padding: 0; display: grid; gap: 12px; }
.nx-inside li { display: flex; gap: 12px; font-size: 17px; line-height: 1.5; color: #1a1a1a; }
.nx-inside li::before { content: "✓"; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #282858; color: #fedb71; font-weight: 800; display: grid; place-items: center; font-size: 13px; }
.nx-guarantee { background: #fff; border: 2px solid #fedb71; border-radius: 16px; padding: 16px 18px; }
.nx-guarantee strong { color: #282858; font-size: 17px; }
.nx-guarantee p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: #454545; }
.nx-guarantee a, .nx-plan-consent a, .nx-plan-small a { color: #282858; font-weight: 600; }

.nx-plan-card { background: #fff; border: 3px solid #282858; border-radius: 26px; box-shadow: 10px 10px 0 #282858; padding: 26px; }
.nx-plan-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.nx-plan-card-head span { font-family: 'Orbitron Variablefont Wght', Orbitron, sans-serif; font-size: 20px; font-weight: 700; color: #282858; }
.nx-plan-card-head strong { font-family: 'Orbitron Variablefont Wght', Orbitron, sans-serif; font-size: 32px; color: #282858; white-space: nowrap; }
.nx-plan-card-head small { font-family: Geist, Inter, sans-serif; font-size: 14px; font-weight: 600; color: #4a4a68; }
.nx-billing-light .nx-billing-option span { border-color: #282858; color: #282858; }
.nx-billing-light .nx-billing-option input:checked + span { box-shadow: 4px 4px 0 #282858; }
.nx-plan-card .nx-plan-terms { margin: 16px 0; }
.nx-start-trial { width: 100%; justify-content: center; font-size: 17px !important; padding: 17px 22px !important; background: #d6f775 !important; color: #282858 !important; }
.nx-plan-small { font-size: 13px; color: #4a4a68; margin: 12px 0 0; text-align: center; }
.nx-plan-consent { font-size: 12px; line-height: 1.55; color: #4a4a68; margin: 14px 0 0; }
.nx-plan-status { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: #b42318; min-height: 1em; }

.nx-faq { display: grid; gap: 12px; margin-top: 20px; }
.nx-faq details { border: 2px solid #282858; border-radius: 16px; padding: 14px 18px; background: #fff; }
.nx-faq summary { cursor: pointer; font-size: 17px; font-weight: 700; color: #282858; min-height: 28px; }
.nx-faq p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: #454545; }
.nx-book .nx-btn { text-decoration: none; margin-top: 18px; }
.nx-book .nx-plan-small { text-align: left; margin-top: 18px; }
.nx-book-practise { margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: #282858; }
.nx-book-practise a { color: #282858; font-weight: 700; }

.nx-plan-footer { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; padding: 28px 20px 36px; border-top: 1px solid #e4e4ee; font-size: 14px; }
.nx-plan-footer a { color: #282858; text-decoration: none; font-weight: 600; padding: 10px 0; }
.nx-plan-footer span { width: 100%; text-align: center; color: #4a4a68; font-size: 13px; }

@media (max-width: 900px) {
  .nx-week, .nx-offer-grid { grid-template-columns: 1fr; }
  .nx-topbar-offer { display: none; }
  .nx-topbar { justify-content: space-between; }
}
@media (max-width: 560px) {
  .nx-plan-hero { padding: 32px 0 30px; }
  .nx-sample-card { padding: 22px 16px 18px; }
  .nx-sample-title { font-size: 18px; }
  .nx-plan-card { padding: 20px 16px; box-shadow: 6px 6px 0 #282858; }
  .nx-plan-card-head { flex-direction: column; gap: 4px; }
}
.nx-tonight .nx-sample-tag { color: #fedb71; }
.nx-topbar.nx-lib { background: #f5f5f0; }

/* ---------- Three plans, the intro offer in the middle ---------- */
.nx-topbar-offer { font-variant-numeric: tabular-nums; }
.nx-offer-head { text-align: center; max-width: 720px; margin: 0 auto; }
.nx-offer-head .nx-section-lead { margin-left: auto; margin-right: auto; }
.nx-offer-clock, .nx-plan-hold { display: inline-flex; align-items: center; gap: 8px; color: #282858; font-weight: 600; font-variant-numeric: tabular-nums; transition: color .4s ease, border-color .4s ease; }
.nx-offer-clock { margin: 16px 0 0; padding: 7px 14px; border: 1.5px solid #282858; border-radius: 999px; background: #fff; font-size: 14px; }
.nx-offer-clock[hidden], .nx-plan-hold[hidden] { display: none; }
.nx-plan-hold { justify-content: center; margin: 4px 0 0; font-size: 13.5px; }
.nx-offer-clock.is-last-minute, .nx-plan-hold.is-last-minute { color: #b4441c; border-color: #b4441c; }
.nx-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; margin: 38px 0 18px; }
.nx-plan-opt { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 26px 22px 22px; background: #fff; border: 2px solid #282858; border-radius: 22px; box-shadow: 6px 6px 0 #282858; text-align: center; transition: background-color .4s ease, box-shadow .4s ease, border-color .4s ease, transform .4s ease; }
.nx-plan-name { margin: 0; font: 700 14px/1.2 Geist, Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #4a4a68; }
.nx-plan-price { margin: 6px 0 0; font-size: 16px; color: #282858; }
.nx-plan-price strong { display: block; font-family: 'Orbitron Variablefont Wght', Orbitron, sans-serif; font-size: 42px; line-height: 1.1; }
.nx-plan-then { margin: 0; font-size: 16px; color: #282858; }
.nx-plan-then s { margin-left: 4px; color: #8a8aa6; }
.nx-plan-sub { margin: 4px 0 12px; font-size: 14.5px; line-height: 1.5; color: #4a4a68; }
.nx-plan-opt .nx-btn { margin-top: auto; width: 100%; justify-content: center; text-decoration: none; }
.nx-plan-opt.is-featured { background: #fff6d6; border-width: 3px; box-shadow: 10px 10px 0 #282858; transform: translateY(-10px); padding-top: 34px; }
.nx-plan-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px; background: #282858; color: #fedb71; font: 700 12px/1 Geist, Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.nx-plan-note { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: #4a4a68; }
.nx-plan-note a { color: #282858; font-weight: 700; }
.nx-plan-opt.is-ended { background: #f4f4f7; border-color: #b8b8cc; box-shadow: 4px 4px 0 #c9c9d8; transform: none; }
.nx-plan-opt.is-ended .nx-plan-badge { background: #9a9ab5; color: #fff; }
.nx-plan-opt.is-ended .nx-plan-price, .nx-plan-opt.is-ended .nx-plan-then, .nx-plan-opt.is-ended .nx-plan-sub { opacity: .45; }
.nx-plan-opt.is-ended .nx-plan-price strong { text-decoration: line-through; text-decoration-thickness: 3px; }
.nx-plan-opt .nx-btn[disabled] { cursor: not-allowed; background: #e4e4ec !important; color: #6b6b85 !important; border-color: #b8b8cc !important; box-shadow: none !important; transform: none !important; }
.nx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nx-plan-offer .nx-plan-status { text-align: center; }
.nx-plan-offer .nx-plan-small, .nx-plan-offer .nx-plan-consent { max-width: 780px; margin-left: auto; margin-right: auto; text-align: center; }
.nx-includes-title { margin: 0; font: 700 20px/1.3 Geist, Inter, sans-serif; color: #282858; }
@media (max-width: 900px) {
  .nx-plans { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; gap: 26px; }
  .nx-plan-opt.is-featured { order: -1; transform: none; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .nx-plan-opt { transition: background-color .4s ease, box-shadow .4s ease, border-color .4s ease; } }
#plan { scroll-margin-top: 84px; }

/* ---------- Hero: a strength first, then a button to the plans (with the time left on the intro price) ---------- */
.nx-result-strength { margin: 0 0 6px; font-size: 17px; line-height: 1.45; font-weight: 700; color: #1f6f55; }
.nx-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; }
.nx-hero-cta[hidden] { display: none; }
.nx-hero-cta .nx-btn { text-decoration: none; }
.nx-hero-cta p { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 600; color: #282858; font-variant-numeric: tabular-nums; }
.nx-hero-cta p.is-last-minute { color: #9a3412; }

/* The sticky top bar keeps the offer in view on phones too: a short line between the logo and the button */
.nx-topbar-short { display: none; }
@media (max-width: 900px) {
  .nx-topbar-short { display: block; flex: 1; min-width: 0; text-align: center; font-size: 13px; line-height: 1.25; font-weight: 700; color: #282858; font-variant-numeric: tabular-nums; }
  .nx-topbar-short[hidden] { display: none; }
}
@media (max-width: 560px) {
  .nx-topbar { gap: 10px; padding: 8px 14px; }
  .nx-topbar-logo img { width: 104px; height: auto; }
  .nx-topbar-cta { padding: 10px 14px !important; }
}

/* Week 1 on phones: the five games fold into one line with "Show all" */
.nx-w1-short { display: none; }
.nx-w1-more { padding: 8px 0; border: 0; background: none; font: inherit; font-weight: 700; color: #282858; text-decoration: underline; cursor: pointer; }
@media (max-width: 560px) {
  .nx-sample-protocol .nx-w1-short { display: block; }
  .nx-w1-games:not(.is-open) .nx-w1-days { display: none; }
}

/* ---------- Plans: what every plan includes above the cards, the renewal under each button ---------- */
.nx-includes { max-width: 900px; margin: 30px auto 0; }
.nx-includes .nx-includes-title { text-align: center; }
.nx-includes .nx-inside { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin: 16px 0 0; }
.nx-plan-renew { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: #4a4a68; }
.nx-plan-opt.is-ended .nx-plan-renew { display: none; }
.nx-faq a { color: #282858; font-weight: 600; }

/* Under the plans: the guarantee, who makes Nexodyne, and a free game for parents who aren't ready yet */
.nx-offer-after { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 40px; align-items: start; }
.nx-trust { background: #fff; border: 2px solid #282858; border-radius: 16px; padding: 16px 18px; }
.nx-trust strong, .nx-not-ready > strong { color: #282858; font-size: 17px; }
.nx-trust p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: #454545; }
.nx-trust .nx-founder-photo { float: right; width: 72px; height: 72px; margin: 0 0 8px 12px; border-radius: 50%; object-fit: cover; border: 2px solid #282858; }
.nx-trust .nx-founder-name { margin-top: 2px; font-weight: 700; color: #282858; }
.nx-trust ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 15px; line-height: 1.5; color: #454545; }
.nx-trust a { display: inline-block; margin-top: 10px; padding: 4px 0; color: #282858; font-weight: 700; }
.nx-not-ready { display: grid; gap: 12px; }
@media (max-width: 1000px) {
  .nx-offer-after { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-not-ready { grid-column: 1 / -1; max-width: 460px; }
}
@media (max-width: 760px) {
  .nx-includes .nx-inside { grid-template-columns: 1fr; }
  .nx-offer-after { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
}
.nx-keep { white-space: nowrap; }