/* =========================================================
   RIDE SYSTEM™ 2.0 — VISUAL BRIDGE v1
   Public CIS website → Console customer-entry continuity
   Applies to: Start, Onboarding, Fitness Diagnostic,
   Fix This First, Recommendation, Choose & Purchase, Activation
   No business logic / flow changes.
========================================================= */

:root{
  --cis-black:#0b0c0d;
  --cis-graphite:#181a1c;
  --cis-charcoal:#26282a;
  --cis-blueblack:#07131d;
  --cis-white:#ffffff;
  --cis-offwhite:#f6f6f4;
  --cis-soft:#efefed;
  --cis-line:#d8d8d4;
  --cis-ink:#171717;
  --cis-muted:#646464;
  --cis-red:#be1e2d;
  --cis-red-bright:#ef3347;

  /* Map legacy page tokens into the new system. */
  --ink:var(--cis-ink);
  --navy:var(--cis-blueblack);
  --blue:var(--cis-blueblack);
  --blue2:var(--cis-blueblack);
  --red:var(--cis-red);
  --paper:var(--cis-offwhite);
  --line:var(--cis-line);
  --muted:var(--cis-muted);
  --white:var(--cis-white);
  --soft:var(--cis-soft);
  --blueSoft:#f1f3f3;
  --success:#116a4b;
  --green:#116a4b;
  --greenSoft:#edf8f2;
  --warn:#9a5b00;
  --amber:#9a6200;
  --amberSoft:#fff8e8;
}

html{background:var(--cis-offwhite)}
body{
  background:var(--cis-offwhite)!important;
  color:var(--cis-ink)!important;
}

/* =========================================================
   CINEMATIC PRODUCT ENTRY
========================================================= */
.shell{
  background:var(--cis-offwhite);
}

.hero{
  position:relative!important;
  background:
    linear-gradient(90deg,rgba(3,8,13,.94) 0%,rgba(3,8,13,.78) 45%,rgba(3,8,13,.38) 100%),
    linear-gradient(180deg,rgba(3,8,13,.08),rgba(3,8,13,.70)),
    url('/assets/ride-system-login.jpg') center/cover no-repeat!important;
  color:#fff!important;
  overflow:hidden!important;
  isolation:isolate;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:radial-gradient(circle at 80% 20%,rgba(239,51,71,.10),transparent 34%);
  pointer-events:none;
}

.hero::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  right:auto!important;
  bottom:auto!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:linear-gradient(180deg,rgba(7,19,29,.03),rgba(7,19,29,.38))!important;
  pointer-events:none;
  z-index:0;
}

.heroInner{position:relative!important;z-index:2!important}

.cisCompany{
  display:inline-block;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-decoration:none;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
  margin-bottom:12px;
  opacity:.82;
  transition:opacity .2s ease;
}
.cisCompany:hover{opacity:1}

.brand,
.hero h1,
.hero p,
.tag{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.brand i{
  color:var(--cis-red-bright)!important;
  -webkit-text-fill-color:var(--cis-red-bright)!important;
}
.tag{opacity:.92}
.hero p{opacity:.92}

/* Subtle product motion only in the cinematic entry rail. */
@media (prefers-reduced-motion:no-preference){
  .hero::before{animation:cisConsoleGlow 10s ease-in-out infinite alternate}
  @keyframes cisConsoleGlow{
    from{transform:translate3d(0,0,0) scale(.96);opacity:.55}
    to{transform:translate3d(-4%,5%,0) scale(1.08);opacity:1}
  }
}

/* =========================================================
   WORK SURFACE
========================================================= */
.main{
  background:var(--cis-offwhite)!important;
}

.eyebrow,
.sectionTitle,
.priceEyebrow{
  color:var(--cis-red)!important;
  -webkit-text-fill-color:var(--cis-red)!important;
}

.main h2,
h2{
  color:var(--cis-ink)!important;
}

.lede,
.intro,
.hint,
.helper,
.mini,
.status{
  color:var(--cis-muted)!important;
}

.steps{gap:7px!important}
.step{
  background:#dcdcd8!important;
  height:5px!important;
}
.step.isActive{
  background:var(--cis-red)!important;
}

/* =========================================================
   CARDS / CONTENT SURFACES
========================================================= */
.card,
.decision,
.recommendation,
.offer,
.tierChoice,
.contextCell,
.metric,
.cell,
.pathCard,
.identity{
  background:#fff!important;
  border-color:var(--cis-line)!important;
}

.card,
.decision,
.recommendation,
.offer{
  box-shadow:0 22px 60px rgba(7,19,29,.08)!important;
}

.context{
  background:var(--cis-line)!important;
  border-color:var(--cis-line)!important;
}

.contextCell small,
.metric small,
.cell small,
.factor small,
.direction small,
.pathRole{
  color:#7a7a76!important;
}

.contextCell strong,
.metric strong,
.cell strong,
.direction strong,
.pathName{
  color:var(--cis-ink)!important;
}

.metricGrid,
.grid{
  background:var(--cis-line)!important;
  border-color:var(--cis-line)!important;
}

.section{
  border-color:var(--cis-line)!important;
}

/* =========================================================
   FORMS
========================================================= */
.field,
.select{
  background:#fff!important;
  color:var(--cis-ink)!important;
  border-color:#cfcfcb!important;
}

.field:focus,
.select:focus{
  border-color:var(--cis-red)!important;
  box-shadow:0 0 0 3px rgba(190,30,45,.10)!important;
}

.check{
  background:#fff!important;
  border-color:var(--cis-line)!important;
}
.check input{accent-color:var(--cis-red)!important}

/* =========================================================
   PRIMARY ACTIONS — RED MEANS ACTION
========================================================= */
.primary{
  background:var(--cis-red)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:none;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease!important;
}
.primary:hover{
  background:#a91628!important;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(190,30,45,.18);
}
.primary:disabled{opacity:.55!important}

.secondary{
  background:var(--cis-soft)!important;
  color:var(--cis-ink)!important;
  -webkit-text-fill-color:var(--cis-ink)!important;
  border:1px solid transparent!important;
  transition:background .18s ease,border-color .18s ease!important;
}
.secondary:hover{
  background:#e5e5e1!important;
  border-color:#d4d4cf!important;
}

/* =========================================================
   SUPPORTING CALLOUTS
========================================================= */
.entryContext,
.inlineNote,
.guardrail,
.boundary,
.rule,
.tierChoiceRule{
  background:#f2f3f2!important;
  color:#4f4f4b!important;
  border-color:var(--cis-line)!important;
  border-left-color:var(--cis-red)!important;
}

.handoff,
.activeBox{
  background:#f1f3f3!important;
  border-color:var(--cis-line)!important;
}

.entryPricing{
  background:#fff!important;
  border-color:var(--cis-line)!important;
  box-shadow:0 14px 36px rgba(7,19,29,.06)!important;
}

.tierPrices>div{
  background:var(--cis-offwhite)!important;
  border-color:var(--cis-line)!important;
}

.priceLead strong,
.tierPrices strong{color:var(--cis-ink)!important}
.priceLead>span:last-child,
.tierPrices span,
.priceNote{color:var(--cis-muted)!important}
.priceNote{border-color:var(--cis-line)!important}

/* =========================================================
   COLLECTIVE SUPPORT LEVELS — PREMIUM COMPARISON
========================================================= */
.collectiveContext{
  display:grid!important;
  gap:5px!important;
  margin:0 0 18px!important;
  padding:14px 16px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-left:4px solid var(--cis-red)!important;
  border-radius:12px!important;
  background:var(--cis-blueblack)!important;
  box-shadow:0 12px 28px rgba(7,19,29,.10)!important;
}
.collectiveContext strong{
  display:block!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-size:12px!important;
  font-weight:850!important;
  letter-spacing:.04em!important;
}
.collectiveContext span{
  display:block!important;
  color:rgba(255,255,255,.74)!important;
  -webkit-text-fill-color:rgba(255,255,255,.74)!important;
  font-size:12.5px!important;
  line-height:1.42!important;
}
.collectivePricing{
  margin:0 0 24px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.collectiveSupportHead{
  display:grid!important;
  gap:6px!important;
  margin-bottom:14px!important;
}
.collectiveSupportHead>strong{
  color:var(--cis-ink)!important;
  font-size:22px!important;
  line-height:1.08!important;
  letter-spacing:-.45px!important;
}
.collectiveSupportHead>span:last-child{
  max-width:640px!important;
  color:var(--cis-muted)!important;
  font-size:13px!important;
  line-height:1.45!important;
}
.supportGrid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  align-items:stretch!important;
}
.supportCard{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  min-height:275px!important;
  padding:17px 16px 16px!important;
  background:#fff!important;
  border:1px solid var(--cis-line)!important;
  border-radius:14px!important;
  box-shadow:0 10px 28px rgba(7,19,29,.045)!important;
  overflow:hidden!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.supportCard::before{
  content:"";
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:3px!important;
  background:var(--cis-red)!important;
  opacity:.0!important;
  transition:opacity .18s ease!important;
}
.supportCard:hover{
  transform:translateY(-2px)!important;
  border-color:#c8c8c4!important;
  box-shadow:0 16px 34px rgba(7,19,29,.08)!important;
}
.supportCard:hover::before{opacity:1!important}
.supportCardTop{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  margin-bottom:18px!important;
}
.supportIndex{
  color:#a2a29d!important;
  font-size:10px!important;
  font-weight:850!important;
  letter-spacing:.11em!important;
}
.supportMode{
  display:inline-flex!important;
  align-items:center!important;
  min-height:22px!important;
  padding:4px 7px!important;
  border-radius:999px!important;
  background:#f4f4f2!important;
  color:#666660!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  white-space:nowrap!important;
}
.supportCard h3{
  margin:0 0 3px!important;
  color:var(--cis-ink)!important;
  font-size:19px!important;
  line-height:1!important;
  letter-spacing:-.35px!important;
}
.supportPrice{
  display:flex!important;
  align-items:baseline!important;
  gap:4px!important;
}
.supportPrice strong{
  color:var(--cis-ink)!important;
  font-size:25px!important;
  line-height:1.05!important;
  letter-spacing:-.55px!important;
}
.supportPrice span{
  color:#777771!important;
  font-size:11px!important;
}
.supportDivider{
  height:1px!important;
  margin:15px 0 13px!important;
  background:var(--cis-line)!important;
}
.supportType{
  margin-bottom:8px!important;
  color:var(--cis-red)!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.065em!important;
  text-transform:uppercase!important;
}
.supportCard p{
  margin:0 0 15px!important;
  color:#555550!important;
  font-size:11.5px!important;
  line-height:1.48!important;
}
.supportAccess{
  display:grid!important;
  gap:2px!important;
  margin-top:auto!important;
  padding-top:12px!important;
  border-top:1px solid #ecece9!important;
}
.supportAccess strong{
  color:var(--cis-ink)!important;
  font-size:13px!important;
  line-height:1.1!important;
}
.supportAccess span{
  color:#71716c!important;
  font-size:10.5px!important;
  line-height:1.25!important;
}
.supportAccess.noCall{
  color:#5e5e59!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1.3!important;
}
.higherTouchStrip{
  display:grid!important;
  grid-template-columns:1.05fr .72fr 1.65fr!important;
  gap:18px!important;
  align-items:center!important;
  margin-top:12px!important;
  padding:15px 17px!important;
  border-radius:13px!important;
  background:var(--cis-blueblack)!important;
  box-shadow:0 12px 30px rgba(7,19,29,.12)!important;
}
.higherTouchStrip>div:first-child{
  display:grid!important;
  gap:3px!important;
}
.higherTouchEyebrow{
  color:#ef6b78!important;
  -webkit-text-fill-color:#ef6b78!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.085em!important;
}
.higherTouchStrip>div:first-child>strong{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-size:16px!important;
  line-height:1.1!important;
}
.higherTouchCadence{
  display:grid!important;
  gap:2px!important;
  padding-left:16px!important;
  border-left:1px solid rgba(255,255,255,.14)!important;
}
.higherTouchCadence strong{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-size:15px!important;
}
.higherTouchCadence span,
.higherTouchStrip p{
  color:rgba(255,255,255,.70)!important;
  -webkit-text-fill-color:rgba(255,255,255,.70)!important;
  font-size:10.5px!important;
  line-height:1.35!important;
}
.higherTouchStrip p{margin:0!important}
.supportFootnote{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:5px!important;
  margin-top:10px!important;
  padding:0 2px!important;
  color:#74746f!important;
  font-size:10.5px!important;
  line-height:1.35!important;
}
.supportFootnote strong{color:#4f4f4b!important}
@media(max-width:760px){
  .supportGrid{grid-template-columns:1fr!important}
  .supportCard{min-height:0!important}
  .higherTouchStrip{grid-template-columns:1fr!important;gap:10px!important}
  .higherTouchCadence{padding:10px 0 0!important;border-left:0!important;border-top:1px solid rgba(255,255,255,.14)!important}
}

.errorBox,
.evidenceBox{
  background:#fff5f5!important;
  border-color:#efc4c8!important;
}
.evidenceBox{border-left-color:var(--cis-red)!important}

/* =========================================================
   ANALYTICAL / DECISION HEADERS
========================================================= */
.resultsHead,
.decisionHead,
.recHead,
.offerHead{
  background:
    radial-gradient(circle at 90% 0%,rgba(239,51,71,.14),transparent 32%),
    var(--cis-blueblack)!important;
  color:#fff!important;
}

.resultsHead small,
.resultsHead h3,
.decisionHead,
.decisionHead h3,
.decisionHead p,
.recHead,
.recHead h3,
.recHead p,
.offerHead,
.offerHead h3,
.offerHead p{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

.decisionBadge,
.routeBadge{
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border:1px solid rgba(255,255,255,.16);
}

/* Fix This First™ should read like a verdict, not a generic card. */
.decision{
  border-color:rgba(7,19,29,.18)!important;
}

/* Fitness Diagnostic™ evidence/result hierarchy. */
.results{
  background:#fff!important;
  border-color:var(--cis-line)!important;
  box-shadow:0 20px 50px rgba(7,19,29,.07);
}

/* Recommendation: recommended Path stays dominant without changing choice. */
.pathTop{
  background:var(--cis-soft)!important;
}
.pathTagline,
.pathBody p,
.why ul,
.body p,
.evidence ul,
.explanation ul{
  color:#4f5559!important;
}
.guide{
  color:var(--cis-blueblack)!important;
  background:#fff!important;
  border-color:#cfcfcb!important;
}
.guide:hover{border-color:var(--cis-red)!important}

/* Choose & Purchase — coaching depth options. */
.direction,
.factor{
  background:var(--cis-soft)!important;
}
.tierOption{
  background:#fff!important;
  border-color:var(--cis-line)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.tierOption:hover{
  transform:translateY(-2px);
  border-color:#bcbcb7!important;
}
.tierOption.isSelected{
  border-color:var(--cis-red)!important;
  box-shadow:0 0 0 2px rgba(190,30,45,.08)!important;
}
.tierOptionTop em{color:var(--cis-red)!important}

/* Activation: status remains semantic; surrounding product language stays neutral. */
.state{
  border-color:var(--cis-line)!important;
}
.rule{border-left-color:var(--cis-red)!important}

/* =========================================================
   SUCCESS / STATE SEMANTICS
========================================================= */
.saved,
.statePill{
  color:var(--success)!important;
}
.statePill{
  background:#edf8f2!important;
}

/* =========================================================
   MOBILE
========================================================= */
@media(max-width:1000px){
  .hero{
    background-position:center 38%!important;
  }
}

@media(max-width:680px){
  .card,
  .decision,
  .recommendation,
  .offer,
  .tierChoice{
    border-radius:14px!important;
  }
}

/* =========================================================
   THE MOVEMENT™ — PREMIUM PATH ENTRY
   Mirrors the FIX3 Collective visual hierarchy while keeping
   Movement focused on one decision: what should I train next?
========================================================= */
.entry-movement .cardWrap{width:min(760px,100%)!important}
.entry-movement .main{padding-top:42px!important;padding-bottom:42px!important}
.entry-movement .main h2{
  font-size:44px!important;
  line-height:1.03!important;
  letter-spacing:-1.45px!important;
  margin-bottom:10px!important;
}
.entry-movement .lede{
  max-width:690px!important;
  margin-bottom:20px!important;
  font-size:16px!important;
  line-height:1.48!important;
}
.movementContext{display:none!important}
.movementPricing{
  margin:0 0 22px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.movementProduct{
  display:grid!important;
  grid-template-columns:minmax(0,1.35fr) minmax(220px,.82fr)!important;
  gap:0!important;
  overflow:hidden!important;
  background:#fff!important;
  border:1px solid var(--cis-line)!important;
  border-radius:16px!important;
  box-shadow:0 16px 38px rgba(7,19,29,.065)!important;
}
.movementProductInfo{
  min-width:0!important;
  padding:22px 22px 20px!important;
}
.movementProductTitle{
  display:block!important;
  max-width:330px!important;
  margin-top:7px!important;
  color:var(--cis-ink)!important;
  font-size:31px!important;
  line-height:.98!important;
  letter-spacing:-.9px!important;
}
.movementProductSub{
  display:block!important;
  max-width:330px!important;
  margin-top:8px!important;
  color:var(--cis-muted)!important;
  font-size:13.5px!important;
  line-height:1.35!important;
}
.movementChecklist{
  display:grid!important;
  gap:9px!important;
  margin-top:17px!important;
}
.movementChecklist>div{
  display:grid!important;
  grid-template-columns:23px 1fr!important;
  gap:9px!important;
  align-items:start!important;
  color:#4f4f4b!important;
  font-size:11.5px!important;
  line-height:1.35!important;
}
.movementChecklist i{
  display:inline-grid!important;
  place-items:center!important;
  width:20px!important;
  height:20px!important;
  border-radius:50%!important;
  background:var(--cis-red)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-style:normal!important;
  font-size:11px!important;
  font-weight:900!important;
}
.movementProductBuy{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-width:0!important;
  margin:18px 0!important;
  padding:7px 21px 7px 22px!important;
  border-left:1px solid var(--cis-line)!important;
}
.movementPrice{
  display:grid!important;
  gap:4px!important;
  padding-bottom:15px!important;
  border-bottom:1px solid var(--cis-line)!important;
}
.movementPrice>strong{
  color:var(--cis-ink)!important;
  font-size:34px!important;
  line-height:1!important;
  letter-spacing:-1px!important;
}
.movementPrice>span{
  color:var(--cis-muted)!important;
  font-size:12.5px!important;
  line-height:1.35!important;
}
.movementPrice b{color:var(--cis-ink)!important}
.movementCta{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:44px!important;
  margin-top:16px!important;
  padding:11px 13px!important;
  border-radius:10px!important;
  background:var(--cis-red)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-decoration:none!important;
  text-align:center!important;
  font-size:12px!important;
  font-weight:850!important;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease!important;
}
.movementCta:hover{
  background:#a91628!important;
  transform:translateY(-1px)!important;
  box-shadow:0 10px 24px rgba(190,30,45,.18)!important;
}
.movementProductBuy>p{
  margin:12px 0 0!important;
  color:#62625d!important;
  font-size:11px!important;
  line-height:1.42!important;
}
.movementValueGrid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
  margin:18px 3px 0!important;
}
.movementValue{
  min-width:0!important;
  padding:0 6px!important;
}
.movementValueIcon{
  display:grid!important;
  place-items:center!important;
  width:36px!important;
  height:36px!important;
  margin-bottom:9px!important;
  border:1px solid #ecece8!important;
  border-radius:50%!important;
  background:#fff!important;
  color:var(--cis-red)!important;
  -webkit-text-fill-color:var(--cis-red)!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
  box-shadow:0 8px 20px rgba(7,19,29,.04)!important;
}
.movementValue>strong{
  display:block!important;
  margin-bottom:4px!important;
  color:var(--cis-ink)!important;
  font-size:13px!important;
  line-height:1.15!important;
}
.movementValue>p{
  margin:0!important;
  color:#666660!important;
  font-size:10.5px!important;
  line-height:1.4!important;
}
.movementRule{
  display:grid!important;
  gap:3px!important;
  margin-top:16px!important;
  padding:12px 14px!important;
  border-left:3px solid var(--cis-red)!important;
  border-radius:9px!important;
  background:#f2f3f2!important;
}
.movementRule>strong{
  color:var(--cis-ink)!important;
  font-size:12px!important;
  line-height:1.25!important;
}
.movementRule>span{
  color:#62625d!important;
  font-size:10.5px!important;
  line-height:1.4!important;
}
.entry-movement .steps{margin:0 0 18px!important}
.entry-movement .card{padding:24px!important;border-radius:16px!important}
.entry-movement .card h3{font-size:20px!important}
.entry-movement .card p{font-size:13px!important;margin-bottom:16px!important}
.entry-movement .trust{display:none!important}
.entry-movement .mini{margin-top:14px!important}
@media(max-width:900px){
  .entry-movement .main{padding:34px 22px!important}
  .entry-movement .main h2{font-size:36px!important}
  .movementProduct{grid-template-columns:1fr!important}
  .movementProductBuy{margin:0 18px 18px!important;padding:18px 4px 0!important;border-left:0!important;border-top:1px solid var(--cis-line)!important}
  .movementValueGrid{grid-template-columns:1fr!important;gap:13px!important}
  .movementValue{display:grid!important;grid-template-columns:42px 1fr!important;column-gap:10px!important;align-items:start!important;padding:0!important}
  .movementValueIcon{grid-row:1 / span 2!important;margin:0!important}
}