/* ==========================================================
   NOA FIND YOUR ROUTINE + SKIN GUIDE
   Scoped ONLY to #noa-routine-guide-page
========================================================== */

#noa-routine-guide-page {
  --noa-green:#174f32;
  --noa-green-dark:#103923;
  --noa-blue:#22CBFF;
  --noa-red:#E53935;
  --noa-cream:#f7f4ee;
  --noa-soft:#eef5f0;
  --noa-text:#171917;
  --noa-muted:#606762;
  width:100%;
  overflow:hidden;
  color:var(--noa-text);
  font-family:inherit;
}
#noa-routine-guide-page,
#noa-routine-guide-page * { box-sizing:border-box; }

#noa-routine-guide-page h1,
#noa-routine-guide-page h2,
#noa-routine-guide-page h3,
#noa-routine-guide-page p { margin-top:0; }

#noa-routine-guide-page button,
#noa-routine-guide-page a { font:inherit; }

#noa-routine-guide-page .noa-wrap {
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
}

#noa-routine-guide-page .noa-eyebrow {
  color:var(--noa-green);
  font-size:12px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
}

#noa-routine-guide-page .noa-light { color:#a9ebff; }

#noa-routine-guide-page .noa-hero {
  padding:90px 0;
  background:
    radial-gradient(circle at 84% 18%,rgba(34,203,255,.16),transparent 30%),
    linear-gradient(135deg,#faf8f3 0%,#edf4ef 100%);
}
#noa-routine-guide-page .noa-hero-grid {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:60px;
  align-items:center;
}
#noa-routine-guide-page .noa-hero h1 {
  margin:18px 0 24px;
  max-width:760px;
  font-size:clamp(48px,6vw,82px);
  line-height:.98;
  letter-spacing:-3px;
}
#noa-routine-guide-page .noa-hero h1 span { color:var(--noa-green); }
#noa-routine-guide-page .noa-hero-copy > p {
  max-width:690px;
  color:var(--noa-muted);
  font-size:18px;
  line-height:1.8;
}
#noa-routine-guide-page .noa-hero-note {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:26px;
}
#noa-routine-guide-page .noa-pill {
  padding:9px 14px;
  border:1px solid rgba(23,79,50,.15);
  border-radius:999px;
  background:#fff;
  color:var(--noa-green);
  font-size:12px;
  font-weight:800;
}
#noa-routine-guide-page .noa-hero-visual {
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
#noa-routine-guide-page .noa-skin-card {
  width:min(390px,100%);
  padding:30px;
  border:1px solid rgba(23,79,50,.12);
  border-radius:30px;
  background:rgba(255,255,255,.78);
  box-shadow:0 24px 60px rgba(18,54,35,.10);
  backdrop-filter:blur(12px);
}
#noa-routine-guide-page .noa-skin-card h3 {
  margin:12px 0 10px;
  font-size:30px;
  line-height:1.05;
}
#noa-routine-guide-page .noa-skin-card p {
  color:var(--noa-muted);
  font-size:15px;
  line-height:1.7;
}
#noa-routine-guide-page .noa-mini-steps {
  display:grid;
  gap:10px;
  margin-top:22px;
}
#noa-routine-guide-page .noa-mini-step {
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border-radius:15px;
  background:var(--noa-soft);
  color:var(--noa-green);
  font-size:13px;
  font-weight:800;
}
#noa-routine-guide-page .noa-mini-step b {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  flex:0 0 28px;
  border-radius:50%;
  background:var(--noa-green);
  color:#fff;
  font-size:11px;
}

/* QUIZ */
#noa-routine-guide-page .noa-quiz {
  padding:100px 0;
  background:#fff;
}
#noa-routine-guide-page .noa-section-head {
  max-width:820px;
  margin-bottom:46px;
}
#noa-routine-guide-page .noa-section-head h2 {
  margin:14px 0 16px;
  font-size:clamp(38px,5vw,62px);
  line-height:1.05;
  letter-spacing:-2px;
}
#noa-routine-guide-page .noa-section-head p {
  color:var(--noa-muted);
  font-size:17px;
  line-height:1.75;
}
#noa-routine-guide-page .noa-question {
  padding:34px 0;
  border-top:1px solid rgba(23,79,50,.12);
}
#noa-routine-guide-page .noa-question:first-of-type { border-top:0; padding-top:0; }
#noa-routine-guide-page .noa-question-title { margin-bottom:18px; }
#noa-routine-guide-page .noa-question-title span {
  display:block;
  margin-bottom:7px;
  color:var(--noa-blue);
  font-size:12px;
  font-weight:900;
  letter-spacing:1.6px;
}
#noa-routine-guide-page .noa-question-title h3 { margin:0; font-size:26px; }
#noa-routine-guide-page .noa-options {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
#noa-routine-guide-page .noa-option {
  appearance:none;
  width:100%;
  padding:20px;
  text-align:left;
  border:1px solid rgba(23,79,50,.14);
  border-radius:18px;
  background:#fff;
  color:var(--noa-text);
  cursor:pointer;
  transition:.2s ease;
}
#noa-routine-guide-page .noa-option:hover {
  transform:translateY(-2px);
  border-color:rgba(23,79,50,.35);
  box-shadow:0 12px 30px rgba(16,57,35,.07);
}
#noa-routine-guide-page .noa-option.is-selected {
  border-color:var(--noa-green);
  background:var(--noa-soft);
  box-shadow:inset 0 0 0 1px var(--noa-green);
}
#noa-routine-guide-page .noa-option strong {
  display:block;
  margin-bottom:6px;
  color:var(--noa-green);
  font-size:16px;
}
#noa-routine-guide-page .noa-option small {
  display:block;
  color:var(--noa-muted);
  font-size:13px;
  line-height:1.6;
}
#noa-routine-guide-page .noa-quiz-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-top:28px;
}
#noa-routine-guide-page .noa-primary-btn,
#noa-routine-guide-page .noa-secondary-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:15px 24px;
  border:0;
  border-radius:999px;
  text-decoration:none !important;
  font-size:12px;
  font-weight:900;
  letter-spacing:.7px;
  cursor:pointer;
}
#noa-routine-guide-page .noa-primary-btn { background:var(--noa-green); color:#fff !important; }
#noa-routine-guide-page .noa-secondary-btn { background:var(--noa-blue); color:#10252b !important; }
#noa-routine-guide-page .noa-reset-btn {
  border:0;
  background:transparent;
  color:var(--noa-muted);
  font-size:12px;
  text-decoration:underline;
  cursor:pointer;
}
#noa-routine-guide-page .noa-result {
  display:none;
  margin-top:36px;
  padding:34px;
  border-radius:24px;
  background:var(--noa-green);
  color:#fff;
}
#noa-routine-guide-page .noa-result.is-visible { display:block; }
#noa-routine-guide-page .noa-result h3 {
  margin:10px 0 12px;
  color:#fff;
  font-size:32px;
}
#noa-routine-guide-page .noa-result p { color:rgba(255,255,255,.76); line-height:1.75; }
#noa-routine-guide-page .noa-result-steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:24px 0;
}
#noa-routine-guide-page .noa-result-step {
  padding:18px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:17px;
  background:rgba(255,255,255,.06);
}
#noa-routine-guide-page .noa-result-step b {
  display:block;
  margin-bottom:8px;
  color:#a9ebff;
  font-size:11px;
  letter-spacing:1.3px;
}
#noa-routine-guide-page .noa-result-step strong {
  display:block;
  margin-bottom:6px;
  color:#fff;
}
#noa-routine-guide-page .noa-result-step span {
  color:rgba(255,255,255,.68);
  font-size:12px;
  line-height:1.55;
}

/* GUIDE */
#noa-routine-guide-page .noa-guide {
  padding:100px 0;
  background:var(--noa-cream);
}
#noa-routine-guide-page .noa-guide-intro {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px;
  margin-bottom:55px;
}
#noa-routine-guide-page .noa-guide-intro h2 {
  margin:14px 0 0;
  font-size:clamp(38px,5vw,62px);
  line-height:1.05;
  letter-spacing:-2px;
}
#noa-routine-guide-page .noa-guide-intro p {
  color:var(--noa-muted);
  font-size:17px;
  line-height:1.8;
}
#noa-routine-guide-page .noa-guide-group { margin-top:52px; }
#noa-routine-guide-page .noa-guide-group-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}
#noa-routine-guide-page .noa-guide-group-head h3 { margin:0; font-size:28px; }
#noa-routine-guide-page .noa-guide-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
#noa-routine-guide-page .noa-guide-card {
  padding:26px;
  border:1px solid rgba(23,79,50,.12);
  border-radius:20px;
  background:#fff;
}
#noa-routine-guide-page .noa-guide-card h4 {
  margin:0 0 10px;
  color:var(--noa-green);
  font-size:19px;
}
#noa-routine-guide-page .noa-guide-card p {
  margin-bottom:16px;
  color:var(--noa-muted);
  font-size:14px;
  line-height:1.7;
}
#noa-routine-guide-page .noa-read-link {
  border:0;
  padding:0;
  background:transparent;
  color:var(--noa-green);
  font-size:12px;
  font-weight:900;
  letter-spacing:.7px;
  cursor:pointer;
}
#noa-routine-guide-page .noa-guide-more {
  display:none;
  margin-top:13px;
  padding-top:13px;
  border-top:1px solid rgba(23,79,50,.10);
  color:var(--noa-muted);
  font-size:13px;
  line-height:1.7;
}
#noa-routine-guide-page .noa-guide-card.is-open .noa-guide-more { display:block; }

/* FINAL */
#noa-routine-guide-page .noa-final {
  padding:95px 0;
  background:
    radial-gradient(circle at 15% 20%,rgba(34,203,255,.12),transparent 27%),
    var(--noa-green-dark);
  color:#fff;
}
#noa-routine-guide-page .noa-final-grid {
  display:grid;
  grid-template-columns:1fr auto;
  gap:40px;
  align-items:center;
}
#noa-routine-guide-page .noa-final h2 {
  margin:14px 0 16px;
  color:#fff;
  font-size:clamp(40px,5vw,66px);
  line-height:1;
}
#noa-routine-guide-page .noa-final p {
  max-width:720px;
  color:rgba(255,255,255,.73);
  font-size:16px;
  line-height:1.75;
}
#noa-routine-guide-page .noa-final-actions {
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:215px;
}
#noa-routine-guide-page .noa-disclaimer {
  margin-top:36px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.53);
  font-size:11px;
  line-height:1.6;
}

/* RESPONSIVE */
@media (max-width:900px) {
  #noa-routine-guide-page .noa-hero-grid,
  #noa-routine-guide-page .noa-guide-intro,
  #noa-routine-guide-page .noa-final-grid {
    grid-template-columns:1fr;
  }
  #noa-routine-guide-page .noa-result-steps { grid-template-columns:1fr; }
  #noa-routine-guide-page .noa-final-actions {
    flex-direction:row;
    flex-wrap:wrap;
  }
}
@media (max-width:650px) {
  #noa-routine-guide-page .noa-wrap {
    width:min(100% - 28px,1180px);
  }
  #noa-routine-guide-page .noa-hero,
  #noa-routine-guide-page .noa-quiz,
  #noa-routine-guide-page .noa-guide,
  #noa-routine-guide-page .noa-final {
    padding-top:68px;
    padding-bottom:68px;
  }
  #noa-routine-guide-page .noa-hero h1 {
    font-size:45px;
    letter-spacing:-1.5px;
  }
  #noa-routine-guide-page .noa-hero-visual { min-height:330px; }
  #noa-routine-guide-page .noa-options,
  #noa-routine-guide-page .noa-guide-grid {
    grid-template-columns:1fr;
  }
}