/* ============================================================
   MOMENTUM WELLNESS — pages.css (inner pages + shared updates)
   ============================================================ */
.container--wide { max-width: var(--content-wide); }
.accent, .section-header h2 strong.accent { color: var(--teal); }
.nav__links a.is-active { color: var(--navy); font-weight: 700; }
.btn--white { background: #fff; color: var(--navy); box-shadow: var(--shadow-md); }
.btn--white:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }

/* ---------- PAGE BANNER ---------- */
.page-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--navy) 0%, #1a45c8 50%, var(--teal) 100%);
  padding: clamp(var(--space-16), 9vw, 7.5rem) var(--space-6);
  text-align: center;
}
.page-banner::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.page-banner__bg-text {
  position: absolute; left: 50%; top: 58%;
  transform: translate(-50%, -50%);
  font-size: clamp(4rem, 12vw, 11rem);
  font-weight: 900; letter-spacing: -0.03em;
  color: rgba(255,255,255,0.055);
  white-space: nowrap; pointer-events: none; user-select: none;
}
.page-banner__inner { position: relative; z-index: 1; max-width: 860px; margin-inline: auto; }
.page-banner h1 {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.page-banner__sub { color: rgba(255,255,255,0.85); font-size: var(--text-lg); margin-top: var(--space-4); }

/* ---------- SCREEN MOCKUP (image stand-ins) ---------- */
.screen {
  background: linear-gradient(150deg, #1230A0 0%, #1a5ad8 55%, #10a8d0 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
  height: 100%;
  overflow: hidden;
}
.screen__title { color: #fff; font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.02em; margin-bottom: var(--space-3); text-align: center; }
.ui-card { background: rgba(255,255,255,0.97); border-radius: var(--radius-md); padding: var(--space-4); }
.ui-card--center { display: flex; flex-direction: column; align-items: center; }
.ui-card--center .mockup-stats { width: 100%; margin: 0; }
.ui-card__title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.ui-list { list-style: none; display: grid; gap: 6px; }
.ui-list li { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; font-weight: 600; color: var(--navy-dark); padding: 6px 8px; background: var(--color-blue-light); border-radius: var(--radius-sm); }
.ui-list .check { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--color-border); flex-shrink: 0; }
.ui-list li.is-done .check { background: var(--teal); border-color: var(--teal); box-shadow: inset 0 0 0 2px #fff; }
.ui-list li.is-done { color: var(--color-text-muted); text-decoration: line-through; }
.ui-card .bar-chart { height: 96px; }
.bubble { font-size: 12px; font-weight: 500; background: var(--color-blue-light); color: var(--navy-dark); padding: 7px 10px; border-radius: 12px 12px 12px 4px; margin-bottom: 6px; max-width: 85%; }
.bubble--me { margin-left: auto; background: var(--teal); color: #fff; border-radius: 12px 12px 4px 12px; width: fit-content; }

/* ---------- FEATURES ---------- */
.features-list { background: linear-gradient(180deg, var(--color-blue-light) 0%, #fff 100%); }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.feature-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-4) var(--space-8);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.feature-card__media { height: 230px; }
.feature-card__icon {
  width: 52px; height: 52px; margin: -26px auto var(--space-4);
  position: relative; z-index: 1;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff; color: var(--navy);
  border: 3px solid var(--color-blue-light);
  box-shadow: var(--shadow-md);
}
.feature-card h3 { font-size: var(--text-lg); color: var(--navy-dark); font-weight: 800; margin-bottom: var(--space-2); }
.feature-card p { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 34ch; margin-inline: auto; }

/* ---------- SPLIT (About / Platform) ---------- */
.split-section { background: linear-gradient(180deg, var(--color-blue-light) 0%, #fff 100%); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.split__media { display: grid; gap: var(--space-5); }
.split__media .chart-card { border: 1px solid var(--color-border); }
.split__text h2 { font-size: var(--text-2xl); font-weight: 800; color: var(--navy-dark); margin-block: var(--space-2) var(--space-5); }
.split__text p { color: var(--color-text-body); margin-bottom: var(--space-4); max-width: 56ch; }
.split__strong { font-weight: 700; color: var(--navy-dark) !important; font-size: var(--text-lg); }
.mockup-card--inline { max-width: none; box-shadow: var(--shadow-lg); border: 1px solid var(--color-border); }
.mockup-card--inline .mockup-stats { margin: 0; }
.day-callout { display: inline-flex; gap: var(--space-2); align-items: baseline; background: var(--color-blue-light); border-radius: var(--radius-full); padding: 6px 14px; font-size: var(--text-sm); color: var(--color-text-muted); }
.day-callout strong { color: var(--navy); font-size: var(--text-base); }

/* ---------- PHILOSOPHY ---------- */
.values-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-5); }
.value-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-4); text-align: center; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.value-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.value-card__icon { width: 52px; height: 52px; margin: 0 auto var(--space-4); display: grid; place-items: center; border-radius: 50%; background: var(--teal-soft); color: var(--navy); }
.value-card h3 { font-size: var(--text-base); font-weight: 700; color: var(--navy-dark); }

/* ---------- HOW IT WORKS TIMELINE ---------- */
.steps-section { background: linear-gradient(180deg, var(--color-blue-light) 0%, #fff 100%); }
.steps { list-style: none; position: relative; display: grid; gap: var(--space-16); }
.steps::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: linear-gradient(180deg, var(--teal), var(--navy)); opacity: 0.35; }
.step { display: grid; grid-template-columns: 1fr 72px 1fr; align-items: center; gap: var(--space-8); }
.step__text { grid-column: 1; }
.step__num { grid-column: 2; }
.step__media { grid-column: 3; }
.step--reverse .step__text { grid-column: 3; grid-row: 1; }
.step--reverse .step__media { grid-column: 1; grid-row: 1; }
.step__num {
  position: relative; z-index: 1; width: 56px; height: 56px; margin-inline: auto;
  display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--navy)); color: #fff; font-weight: 800;
  box-shadow: 0 0 0 6px #fff, var(--shadow-md);
}
.step__text h2 { font-size: var(--text-xl); font-weight: 800; color: var(--navy-dark); margin-block: var(--space-2) var(--space-4); }
.step__points { list-style: none; display: grid; gap: var(--space-2); }
.step__points li { position: relative; padding-left: var(--space-6); color: var(--color-text-body); }
.step__points li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); }
.step__media .screen { max-width: 420px; }
.step--reverse .step__media .screen { margin-left: auto; }

/* ---------- CONTACT ---------- */
.contact-section { background: linear-gradient(180deg, var(--color-blue-light) 0%, #fff 100%); }
.contact-card { max-width: 820px; margin-inline: auto; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: clamp(var(--space-8), 5vw, var(--space-16)); box-shadow: var(--shadow-lg); }
.contact-card .section-header { margin-bottom: var(--space-8); }
.contact-form { display: grid; gap: var(--space-5); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.field { display: grid; gap: var(--space-2); }
.field span { font-size: var(--text-sm); font-weight: 600; color: var(--navy-dark); }
.field input, .field textarea {
  font: inherit; font-size: var(--text-sm); color: var(--navy-dark);
  padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); transition: border-color var(--transition), box-shadow var(--transition);
  resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); background: #fff; }
.field.is-invalid input, .field.is-invalid textarea { border-color: #d64545; }
.contact-form__submit { justify-self: center; min-width: 180px; justify-content: center; }
.form-status { text-align: center; font-size: var(--text-sm); min-height: 1.4em; color: var(--navy); font-weight: 600; }
.form-status.is-error { color: #c23a3a; }

/* ---------- CTA (updated to match Figma) ---------- */
.cta-banner { position: relative; overflow: hidden; }
.cta-banner__bg-text { position: absolute; left: 50%; bottom: -0.18em; transform: translateX(-50%); font-size: clamp(4rem, 11vw, 10rem); font-weight: 900; color: rgba(255,255,255,0.07); white-space: nowrap; pointer-events: none; user-select: none; letter-spacing: -0.03em; }
.cta-banner__inner { position: relative; z-index: 1; }
.cta-banner__ctas { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; }

/* ---------- FOOTER (light, per Figma) ---------- */
.footer { position: relative; overflow: hidden; background: linear-gradient(180deg, #F4F8FF 0%, #E9F1FF 100%); color: var(--color-text-body); padding-bottom: clamp(5rem, 10vw, 9rem); border-top: 1px solid var(--color-border); }
.footer .nav__brand { color: var(--navy); }
.footer .nav__tagline { color: var(--color-text-muted); }
.footer__mission { color: var(--color-text-body); }
.social-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff; }
.social-icon:hover { background: var(--teal); color: #fff; }
.footer__col h4 { color: var(--navy-dark); }
.footer__col a { color: var(--color-text-body); }
.footer__col a:hover { color: var(--navy); }
.footer__col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-8); }
.footer__bottom { border-top-color: var(--color-border); color: var(--color-text-muted); text-align: center; }
.footer__bg-text { position: absolute; left: 50%; bottom: -0.2em; transform: translateX(-50%); font-size: clamp(3.5rem, 10vw, 9rem); font-weight: 900; color: rgba(18,48,160,0.06); white-space: nowrap; pointer-events: none; user-select: none; letter-spacing: -0.03em; }
.footer .container { position: relative; z-index: 1; }
.footer__inner { grid-template-columns: 1fr 1.2fr; }
.footer__links { grid-template-columns: 1.5fr 1fr; }
.footer__col a { white-space: nowrap; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .nav__links { gap: var(--space-4); }
  .nav__links a { font-size: 0.85rem; }
}
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__actions .btn { display: none; }
  .nav__hamburger { display: flex; }
}
@media (max-width: 768px) {
  .split { grid-template-columns: 1fr; gap: var(--space-10); }
  .steps::before { left: 28px; }
  .step, .step--reverse { grid-template-columns: 56px 1fr; gap: var(--space-5); }
  .step .step__num, .step--reverse .step__num { grid-column: 1; grid-row: 1; margin: 0; }
  .step .step__text, .step--reverse .step__text { grid-column: 2; grid-row: 1; }
  .step .step__media, .step--reverse .step__media { grid-column: 2; grid-row: 2; }
  .step--reverse .step__media .screen { margin-left: 0; }
  .form-row { grid-template-columns: 1fr; }
  .footer__links { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .features-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__links { grid-template-columns: 1fr; }
}

/* ============ CREW EDITION (v4) ============ */
.lang-switch { font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--navy); border: 1.5px solid var(--color-border); border-radius: 999px; padding: 7px 12px; line-height: 1; transition: all var(--transition); }
.lang-switch:hover { border-color: var(--navy); background: rgba(18,48,160,.05); }
.lang-toggle { display: inline-flex; align-items: center; gap: 2px; border: 1.5px solid var(--navy); border-radius: 999px; padding: 3px 8px; }
.lang-toggle .sep { color: var(--navy); opacity: .4; font-size: 13px; }
.lang-toggle .lang-switch { font-size: 13px; letter-spacing: .04em; padding: 2px 4px; border: 0; opacity: .55; }
.lang-toggle .lang-switch:hover { background: transparent; opacity: 1; }
.lang-toggle .lang-switch.is-active { background: transparent; color: var(--navy); opacity: 1; font-weight: 900; }
.nav__links { gap: var(--space-5); }
.nav__links a.is-active { color: var(--navy); font-weight: 700; }
@media (max-width: 1180px) {
  .nav__links { display: none; }
  .nav__actions .btn { display: none; }
  .nav__hamburger { display: flex; }
}
.hero__headline--crew { font-size: clamp(2.6rem, 5.6vw, 5rem); }
.hero .mockup-card .bubble { font-size: 14px; padding: 9px 12px; }
.footer__disclaimer { font-size: 12px; line-height: 1.6; color: var(--color-text-muted); max-width: 820px; margin: var(--space-8) 0 0; }

/* Pricing */
.pricing-section { background: linear-gradient(180deg, var(--color-blue-light) 0%, #fff 100%); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: stretch; }
.price-card { position: relative; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.price-card--featured { border: 2px solid var(--navy); box-shadow: var(--shadow-lg); }
.price-card__tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, var(--navy), var(--teal)); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.price-card h3 { font-size: 1.4rem; color: var(--navy-dark); margin: 0 0 var(--space-3); }
.price-card__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price-card__price strong { font-size: 3rem; font-weight: 900; color: var(--navy); line-height: 1; }
.price-card__price span { font-size: 14px; color: var(--color-text-muted); }
.price-card__min { font-size: 14px; color: var(--color-text-body); margin: var(--space-3) 0 var(--space-5); }
.price-card__list { list-style: none; padding: 0; margin: 0 0 var(--space-8); display: grid; gap: 10px; flex: 1; }
.price-card__list li { position: relative; padding-left: 26px; font-size: 15px; color: var(--color-text-body); line-height: 1.45; }
.price-card__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--teal); font-weight: 900; }
.price-card__cta { width: 100%; justify-content: center; }
.price-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-10); }
.price-perk { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); text-align: center; display: grid; gap: 4px; }
.price-perk strong { color: var(--navy); font-size: 1.1rem; }
.price-perk span { color: var(--color-text-body); font-size: 14px; }
.faq-list { max-width: 760px; margin: 0 auto; display: grid; gap: var(--space-3); }
.faq { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }
.faq summary { cursor: pointer; font-weight: 700; color: var(--navy-dark); }
.faq p { margin: var(--space-3) 0 0; color: var(--color-text-body); line-height: 1.6; }
@media (max-width: 900px) {
  .pricing-grid, .price-perks { grid-template-columns: 1fr; }
  .price-card--featured { order: -1; }
}

/* Dark header + footer so the Orenyx logo stands out (like Orenyx Safety AI) */
.nav{background:#0F172A;border-bottom-color:rgba(255,255,255,.08)}
.nav__ox{background:transparent!important;padding:0!important;border-radius:0!important}
.nav__brand{color:#fff}
.nav__tagline{color:rgba(255,255,255,.6)}
.nav__links a{color:rgba(255,255,255,.78)}
.nav__links a:hover,.nav__links a.is-active{color:#fff}
.nav__hamburger span{background:#fff}
.nav__mobile-menu{background:#0F172A;border-top-color:rgba(255,255,255,.1)}
.nav__mobile-menu a{color:rgba(255,255,255,.85)}
.lang-toggle{border-color:rgba(255,255,255,.55)}
.lang-toggle .sep{color:#fff}
.lang-toggle .lang-switch,.lang-toggle .lang-switch.is-active{color:#fff}
.footer{background:#0F172A;border-top-color:rgba(255,255,255,.08);color:rgba(255,255,255,.75)}
.footer .nav__brand{color:#fff}
.footer .nav__tagline{color:rgba(255,255,255,.55)}
.footer__mission{color:rgba(255,255,255,.72)}
.footer__col h4{color:#fff}
.footer__col a{color:rgba(255,255,255,.72)}
.footer__col a:hover{color:var(--teal)}
.footer__bottom{border-top-color:rgba(255,255,255,.12);color:rgba(255,255,255,.55)}
.footer__disclaimer{color:rgba(255,255,255,.55)}
.footer__bg-text{color:rgba(255,255,255,.04)}
.social-icon{background:rgba(255,255,255,.12)}