/* ILUVRE NextGen (Phase 1 design; Phase 2 adds purchase, gift form, studio, activation). Loaded only on /nextgen pages. Uses the ILUVRE palette and type from iluvre.css; adds nothing global.
   Signature: a deep-green hero with the gold "click, explore, interact, learn" line, echoing the main site's journey line. */
.ng [hidden]{display:none!important}
.ng{--ng-gold-text:#7D5F2C;--ng-gold-light:#D9C08A;--ng-card:#FFFFFF;--ng-pos:#2F6B3F;--ng-neg:#9A3B2E}

.ng-preview{background:#F3EBD9;border-bottom:1px solid #E4D6B6;font-size:.88rem;color:#3A352B;padding:.6rem 0}

/* ---------- hero */
.ng-hero{background:var(--green-deep);color:#EFEBE2;padding-block:clamp(2.2rem,6vw,5rem) clamp(2.5rem,6vw,5.5rem)}
.ng-hero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.ng-hero h1{color:var(--white);font-size:clamp(2.2rem,1.3rem + 3.6vw,4rem);max-width:15ch;margin-bottom:.35em}
.ng-back{margin:0 0 1.4rem;font-size:.88rem}
.ng-hero .ng-back a{color:#E7E1D4;text-decoration:none;border-bottom:1px solid rgba(231,225,212,.45);padding:.6rem 0}
.ng-hero .ng-back a:hover{color:var(--white);border-bottom-color:var(--white)}
.ng-brand{font:500 .95rem/1.4 var(--sans);letter-spacing:.14em;color:var(--ng-gold-light);margin:0 0 1rem}
.ng-brand sup{font-size:.55em;letter-spacing:0}
.ng-spark{color:var(--ng-gold-light);letter-spacing:0;margin-left:.15em}
.ng-tagline{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,1rem + .7vw,1.5rem);color:var(--ng-gold-light);margin-bottom:1.1rem}
.ng-intro{font-size:1.05rem;color:#E2DDD2;max-width:46ch;margin-bottom:2rem}
.ng-hero .btn--primary{background:var(--ivory);color:var(--green-deep)}
.ng-hero .btn--primary:hover{background:var(--white);color:var(--green-deep)}
.ng-hero .btn--ghost{color:var(--white);border-color:rgba(255,255,255,.55)}
.ng-hero .btn--ghost:hover{background:rgba(255,255,255,.08);color:var(--white)}
.ng-soon{font-size:.72rem;font-weight:500;letter-spacing:.04em;background:rgba(217,192,138,.18);color:var(--ng-gold-light);border-radius:2px;padding:.15rem .4rem}

/* the flow line: four gold nodes on a thin rule */
.ng-flow{list-style:none;margin:0;padding:0 0 0 1.6rem;position:relative;display:grid;gap:1.9rem;counter-reset:ng}
.ng-flow::before{content:"";position:absolute;left:.42rem;top:.6rem;bottom:.6rem;width:1px;background:linear-gradient(var(--ng-gold-light),rgba(217,192,138,.25))}
.ng-flow li{position:relative;font-family:var(--serif);font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);color:var(--white);line-height:1.1}
.ng-flow li::before{content:"";position:absolute;left:-1.6rem;top:.42em;width:.85rem;height:.85rem;border-radius:50%;background:var(--green-deep);border:1px solid var(--ng-gold-light)}
.ng-flow li:last-child::before{background:var(--ng-gold-light)}
.ng-flow li span::after{content:" →";color:var(--ng-gold-light);font-family:var(--sans);font-size:.6em;vertical-align:middle}
.ng-flow li:last-child span::after{content:""}

/* ---------- studio cards */
.ng-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.5rem)}
.ng-card{background:var(--ng-card);border:1px solid var(--line);border-radius:6px;padding:1.6rem 1.4rem 1.4rem;display:flex;flex-direction:column;position:relative;transition:border-color .2s,transform .2s}
.ng-card:hover,.ng-card:focus-within{border-color:var(--gold)}
@media (hover:hover){.ng-card:hover{transform:translateY(-2px)}}
.ng-num{position:absolute;top:1.1rem;right:1.3rem;font-family:var(--serif);font-size:1.6rem;color:var(--ng-gold-text);line-height:1}
.ng-icon svg{width:44px;height:44px;fill:none;stroke:var(--green);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:1rem}
.ng-card h3{font-size:1.3rem;margin-bottom:.4rem}
.ng-card p{font-size:.95rem;color:var(--muted);margin-bottom:.6rem}
.ng-card .ng-meta{font-size:.8rem;color:var(--muted);margin-top:auto;margin-bottom:1rem}
.ng-card .btn{width:100%}

/* ---------- activity panel */
.ng-activity{background:var(--ng-card);border:1px solid var(--line);border-radius:6px;padding:clamp(1.25rem,3vw,2.5rem);scroll-margin-top:1rem}
.ng-activity h3{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);margin-bottom:.5rem}
.ng-activity h3:focus{outline:none}
.ng-activity h3:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.ng-close{background:none;border:0;font:500 .9rem var(--sans);color:var(--green-deep);cursor:pointer;padding:.7rem 0;min-height:44px;margin-bottom:.4rem}
.ng-close:hover{text-decoration:underline}
.ng-kicker{font:500 .85rem/1.4 var(--sans);letter-spacing:.06em;color:var(--ng-gold-text);margin:0 0 .5rem}
.ng-kicker--light{color:var(--ng-gold-light)}
.ng-instr{color:var(--muted);max-width:62ch;margin-bottom:1.6rem}
.ng-two{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.ng-results{background:var(--ivory);border:1px solid var(--line);border-radius:6px;padding:clamp(1rem,2.5vw,1.6rem);position:sticky;top:1rem}

/* sliders */
.ng-slider{margin-bottom:1.3rem}
.ng-slider-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.35rem}
.ng-slider label{font-weight:500;color:var(--charcoal);display:flex;align-items:center;gap:.55rem}
.ng-amount{display:inline-flex;align-items:center;gap:.15rem;font-weight:500;color:var(--charcoal)}
.ng-amount input{width:6.2rem;text-align:right;font:500 1rem var(--sans);padding:.45rem .55rem;border:1px solid var(--stone);border-radius:3px;background:var(--white);min-height:44px}
.ng-hint{font-size:.85rem;color:var(--muted);margin:.25rem 0 0}
input[type=range]{width:100%;height:44px;accent-color:var(--green);margin:0;cursor:pointer;background:transparent}
.ng-swatch{display:inline-block;width:.85rem;height:.85rem;border-radius:2px}
.ng-swatch--housing{background:#263D35}.ng-swatch--transport{background:#5E7F70}.ng-swatch--food{background:#B4935A}.ng-swatch--savings{background:#2F6B3F;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 2px,transparent 2px 6px)}.ng-swatch--personal{background:#CFC6B6}

.ng-stats{display:grid;gap:.4rem;margin-bottom:1rem}
.ng-stats p{display:flex;justify-content:space-between;align-items:baseline;margin:0;max-width:none;border-bottom:1px solid var(--line);padding:.35rem 0}
.ng-stats span{color:var(--muted)}
.ng-stats strong{font-family:var(--serif);font-size:1.3rem;font-weight:500;color:var(--charcoal)}
.ng-stats strong.is-over{color:var(--ng-neg)}
.ng-bar{display:flex;height:18px;border-radius:3px;overflow:hidden;background:var(--line);margin-bottom:1rem}
.ng-seg{display:block;height:100%;width:0;border-radius:0;transition:width .25s ease}
.ng-status{min-height:1.4em;font-size:.95rem;color:var(--muted);margin-bottom:1rem}
.ng-status.is-over{color:var(--ng-neg);font-weight:500}
.ng-feedback{margin-top:1.2rem}
.ng-feedback:focus{outline:none}
.ng-feedback h4{font-family:var(--serif);font-size:1.15rem;margin-bottom:.5rem}
.ng-feedback ul,.ng-done ul,.ng-notes ul{margin:0;padding-left:1.15rem}
.ng-feedback li,.ng-done li,.ng-notes li{margin-bottom:.45rem;font-size:.95rem}

/* quiz */
.ng-progress{display:flex;align-items:center;gap:1rem;font-size:.88rem;color:var(--muted);margin-bottom:1.4rem}
.ng-progress-bar{flex:1;max-width:260px;height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.ng-progress-bar span{display:block;height:100%;width:0;background:var(--gold);transition:width .3s ease}
.ng-statement{font-family:var(--serif);font-size:clamp(1.25rem,1.05rem + .9vw,1.7rem);line-height:1.4;color:var(--charcoal);max-width:40ch;margin-bottom:1.5rem}
.ng-statement:focus{outline:none}
.ng-choices .btn{min-width:8.5rem}
.ng-choices .btn.is-picked{background:var(--green);color:var(--white);border-color:var(--green)}
.ng-choices .btn[disabled]:not(.is-picked){background:transparent;color:#8A857B;border-color:var(--line)}
.ng-feedback.is-right,.ng-feedback.is-wrong{border-left:3px solid var(--ng-pos);background:var(--ivory);padding:1rem 1.2rem;max-width:62ch}
.ng-feedback.is-wrong{border-left-color:var(--gold)}
.ng-done{margin-bottom:1rem}
.ng-done:focus{outline:none}
.ng-done h4{font-family:var(--serif);font-size:1.5rem}

/* forms (First Keys, Investor Mode) */
.ng-field{margin-bottom:1.1rem}
.ng-field label,.ng-fieldset legend{display:block;font-weight:500;color:var(--charcoal);margin-bottom:.3rem;font-size:.95rem}
.ng-input{display:flex;align-items:center;gap:.35rem;max-width:16rem}
.ng-input input,.ng-field select{width:100%;font:400 1rem var(--sans);padding:.6rem .7rem;border:1px solid var(--stone);border-radius:3px;background:var(--white);min-height:46px;color:var(--charcoal)}
.ng-field select{max-width:16rem}
.ng-input span{color:var(--muted);font-weight:500}
input[aria-invalid="true"]{border-color:var(--ng-neg);box-shadow:0 0 0 1px var(--ng-neg)}
.ng-err{color:var(--ng-neg);font-size:.88rem;margin:.3rem 0 0;min-height:0}
.ng-err:empty{display:none}
.ng-fieldset{border:1px solid var(--line);border-radius:4px;padding:1rem 1.1rem .4rem;margin:0 0 1.1rem}
.ng-fieldset legend{padding:0 .3rem}
.ng-check{display:flex!important;align-items:center;gap:.6rem;font-weight:400!important;min-height:44px;cursor:pointer;margin-bottom:.6rem}
.ng-check input{width:20px;height:20px;accent-color:var(--green)}
.ng-adjust,.ng-notes{border-top:1px solid var(--line);margin-top:.6rem;padding-top:.4rem}
.ng-adjust summary,.ng-notes summary{cursor:pointer;font-weight:500;color:var(--green-deep);padding:.7rem 0;min-height:44px}
.ng-notes{margin-top:2rem;max-width:72ch}
.ng-notes ul{color:var(--muted)}

/* results */
.ng-big{display:flex;flex-direction:column;gap:.15rem;margin-bottom:1.1rem}
.ng-big span{color:var(--muted);font-size:.9rem}
.ng-big strong{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,1.6rem + 1.6vw,2.8rem);color:var(--charcoal);line-height:1.1}
.ng-big strong.is-pos{color:var(--ng-pos)}
.ng-big strong.is-neg{color:var(--ng-neg)}
.ng-big small{font-size:.85rem;color:var(--muted)}
.ng-table{width:100%;border-collapse:collapse;font-size:.93rem;margin-bottom:1rem}
.ng-table th{text-align:left;font-weight:400;color:var(--text);padding:.45rem .5rem .45rem 0;border-bottom:1px solid var(--line)}
.ng-table td{text-align:right;padding:.45rem 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;white-space:nowrap}
.ng-table tfoot th,.ng-table tfoot td{font-weight:600;color:var(--charcoal);border-bottom:0;border-top:2px solid var(--charcoal);padding-top:.6rem}
.ng-table .ng-sub th,.ng-table .ng-sub td{font-weight:500;color:var(--charcoal)}
.ng-est{display:inline-block;font-size:.72rem;color:var(--muted);border:1px solid var(--line);border-radius:2px;padding:0 .3rem;margin-left:.2rem;vertical-align:1px}

/* ---------- free preview */
.ng-narrow{max-width:820px}
.ng-mini{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:clamp(1.25rem,3vw,2.2rem)}
.ng-q{border:0;margin:0;padding:0}
.ng-q legend{font-family:var(--serif);font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem);color:var(--charcoal);margin-bottom:1.1rem;padding:0}
.ng-q legend:focus{outline:none}
.ng-options{display:grid;gap:.7rem;margin-bottom:1.2rem}
.ng-option{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;text-align:left;background:var(--ivory);border:1px solid var(--stone);border-radius:4px;padding:1rem 1.1rem;font:400 1rem var(--sans);color:var(--charcoal);cursor:pointer;min-height:56px;transition:border-color .15s,background .15s}
.ng-option:hover{border-color:var(--green);background:var(--white)}
.ng-option strong{font-weight:500;color:var(--green-deep);white-space:nowrap}
.ng-mini-result:focus{outline:none}
.ng-mini-result h3{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem)}
.ng-cta{border-top:1px solid var(--line);margin-top:1.4rem;padding-top:1.3rem;margin-bottom:1rem}
.ng-cta-title{font-family:var(--serif);font-size:1.3rem;color:var(--charcoal);margin-bottom:.4rem}

/* ---------- offer */
.ng-offer-card{border:1px solid var(--gold);border-radius:6px;padding:clamp(1.5rem,4vw,3rem);background:var(--white);text-align:center}
.ng-offer-card h2{margin-bottom:1.2rem}
.ng-ticks{list-style:none;margin:0 auto 1.6rem;padding:0;display:inline-grid;gap:.5rem;text-align:left}
.ng-ticks li{padding-left:1.6rem;position:relative}
.ng-ticks li::before{content:"✦";position:absolute;left:0;color:var(--ng-gold-text);font-size:.85rem;top:.15em}
.ng-price{margin:0 auto .3rem;font-family:var(--serif)}
.ng-price strong{font-size:clamp(2.4rem,2rem + 2vw,3.4rem);font-weight:500;color:var(--charcoal)}
.ng-price span{font-family:var(--sans);color:var(--muted)}
.ng-price-note{color:var(--muted);font-size:.95rem;margin:0 auto 1.3rem}

/* ---------- gift */
.ng-gift{text-align:center}
.ng-gift h2{font-size:clamp(1.9rem,1.4rem + 2.2vw,3rem);max-width:20ch;margin-inline:auto}
.ng-gift-copy{font-family:var(--serif);font-size:clamp(1.1rem,1rem + .5vw,1.35rem);color:#E2DDD2;margin:0 auto 1.4rem;max-width:44ch}
.ng-gift-soon{display:inline-block;border:1px solid rgba(217,192,138,.6);color:var(--ng-gold-light);border-radius:2px;padding:.4rem .9rem;font-size:.9rem;margin-bottom:2rem}
.ng-gift-line{font-family:var(--serif);font-style:italic;color:var(--ng-gold-light);margin:0 auto}
.ng-back--end{margin-top:2rem}

/* ---------- Phase 2: purchase, gift form, studio, activation */
.ng-included{color:var(--muted);margin:-.4rem 0 1.4rem}
.ng-buy{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin:0 auto 1rem}
.ng-buy form{margin:0}
.ng-caps{text-transform:uppercase;letter-spacing:.05em;font-size:.92rem}
.ng-fine{font-size:.85rem;color:var(--muted);max-width:60ch;margin:.4rem auto 0}
.ng-gift-steps{text-align:left;max-width:52ch;margin:0 auto 2rem;padding-left:1.3rem;color:#E2DDD2}
.ng-gift-steps li{margin-bottom:.4rem}
.ng-gift-form{background:var(--ivory);color:var(--charcoal);text-align:left;border-radius:6px;padding:clamp(1.25rem,3vw,2.2rem);max-width:640px;margin:0 auto 2rem;scroll-margin-top:1rem}
.ng-gift .ng-gift-form h3{color:var(--green-deep);font-size:1.45rem;margin-bottom:1.1rem}
.ng-gift .ng-gift-form a{color:var(--green-deep)}
.ng-gift-form input[type=text],.ng-gift-form input[type=email],.ng-gift-form textarea,.ng-redeem-form input[type=email]{width:100%;font:400 1rem var(--sans);padding:.65rem .75rem;border:1px solid var(--stone);border-radius:3px;background:var(--white);min-height:46px;color:var(--charcoal)}
.ng-gift-form textarea{min-height:6.5rem;resize:vertical}
textarea[aria-invalid="true"]{border-color:var(--ng-neg);box-shadow:0 0 0 1px var(--ng-neg)}
.ng-optional{font-weight:400;color:var(--muted)}
.ng-gift .ng-gift-form p,.ng-gift .ng-gift-form .ng-optional{color:var(--muted)}
.ng-gift .ng-gift-form label,.ng-gift .ng-gift-form .ng-errors p,.ng-gift .ng-gift-form .ng-errors li{color:var(--charcoal)}
.ng-gift .ng-gift-form .ng-err{color:var(--ng-neg)}
.ng-field--check{display:grid;grid-template-columns:auto 1fr;gap:.2rem .7rem;align-items:center}
.ng-field--check input{width:22px;height:22px;accent-color:var(--green);margin:0}
.ng-field--check label{margin:0;font-weight:500}
.ng-field--check .ng-err{grid-column:1/-1}
.ng-gift-form .btn{width:100%;margin-top:.4rem}
.ng-gift-form .ng-fine{margin-left:0}
.ng-errors{border:1px solid var(--ng-neg);border-left-width:4px;background:#FBF1EF;padding:.9rem 1.1rem;margin-bottom:1.2rem;border-radius:3px}
.ng-errors p{margin:0 0 .4rem}
.ng-errors ul{margin:0;padding-left:1.1rem}
.ng-gift .ng-errors a{color:var(--ng-neg)}
.ng-studio--paid h1{font-size:clamp(2rem,1.4rem + 2.4vw,3rem)}
.ng-studio--paid .ng-brand,.ng-locked .ng-brand,.ng-redeem .ng-brand{color:var(--ng-gold-text)}
.ng-worksheets{list-style:none;margin:0 0 1.4rem;padding:0}
.ng-worksheets li{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:.8rem 0;border-bottom:1px solid var(--line)}
.ng-locked-paths{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,2rem);margin-top:2rem}
.ng-locked-paths>div{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:1.4rem}
.ng-redeem h1{font-size:clamp(2rem,1.5rem + 2vw,2.8rem)}
.ng-redeem-form{background:var(--white);border:1px solid var(--gold);border-radius:6px;padding:clamp(1.25rem,3vw,2rem);max-width:560px;margin:1.6rem 0}
.ng-redeem-form .ng-fine{margin-left:0}

/* ---------- responsive */
@media (max-width:1080px){.ng-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
  .ng-hero-grid{grid-template-columns:1fr}
  .ng-flow{grid-auto-flow:column;grid-template-columns:repeat(4,auto);justify-content:start;gap:1.2rem;padding:1.4rem 0 0}
  .ng-flow::before{left:0;right:0;top:1.85rem;bottom:auto;width:auto;height:1px;background:linear-gradient(90deg,var(--ng-gold-light),rgba(217,192,138,.25))}
  .ng-flow li{font-size:1.05rem;padding-top:1.4rem}
  .ng-flow li::before{left:0;top:0}
  .ng-flow li span::after{content:""}
  .ng-two{grid-template-columns:1fr}
  .ng-results{position:static}
}
@media (max-width:560px){.ng-cards{grid-template-columns:1fr}.ng-hero .actions .btn{width:100%}.ng-buy .btn,.ng-buy form{width:100%}.ng-locked-paths{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ng-card,.ng-seg,.ng-progress-bar span,.ng-option{transition:none}.ng-card:hover{transform:none}}

/* ---------- Phase 2: free Learning Library teaser on the landing page */
.ng-lib-list{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.ng-lib-list a{display:flex;align-items:center;gap:.9rem;min-height:56px;padding:.8rem 1rem;background:var(--white);border:1px solid var(--line);border-radius:6px;text-decoration:none;color:var(--charcoal)}
.ng-lib-list a:hover,.ng-lib-list a:focus-visible{border-color:var(--gold)}
.ng-lib-n{font-family:var(--serif);font-size:1.2rem;color:var(--ng-gold-text);flex:none}
.ng-lib-t{font-family:var(--serif);font-size:1.02rem;line-height:1.3}
@media (max-width:860px){.ng-lib-list{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ng-lib-list{grid-template-columns:1fr}}
.ng-offer-tag{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--ng-gold-text);margin:-.6rem 0 1.2rem}
/* NextGen hero: second-row gold purchase button (links to the existing #offer purchase section) */
.ng-hero-buy{margin-top:1.1rem}
.ng-hero .btn.ng-btn-gold{background:#D9C08A;border-color:#D9C08A;color:#1F332D;font-weight:600;padding-inline:1.6rem}
.ng-hero .btn.ng-btn-gold:hover{background:#E6D2A6;border-color:#E6D2A6;color:#1F332D}
.ng-hero .btn.ng-btn-gold:focus-visible{outline:3px solid var(--white);outline-offset:3px}
.ng-hero-buy-note{margin:.6rem 0 0;font-size:.9rem;color:#CFC9BC}
@media (max-width:560px){.ng-hero .btn.ng-btn-gold{width:100%;justify-content:center}}
/* NextGen hero label only: 30% larger than the shared .ng-brand size (0.95rem x 1.3 = 1.235rem) */
.ng-hero .ng-brand{font-size:1.235rem}