/* Three-surface chapter rhythm: gallery white, cool silver, and midnight slate. */
#nuclyo-mobile-opening {
  --n126-silver: #edf1f5;
  --n126-slate: #111d2c;
}

/* Preserve white around the cutaway animation; give the price story its own stage. */
#nuclyo-mobile-opening .n114-price-chapter {
  background: linear-gradient(180deg, #f2f4f7 0%, var(--n126-silver) 100%);
}
#nuclyo-mobile-opening .n114-price-chapter .n105-value { border-top: 0; }
#nuclyo-mobile-opening .n114-price-chapter .n105-value-home img,
#nuclyo-mobile-opening .n114-price-chapter .n116-phone-composite { mix-blend-mode: multiply; }

/* The lifestyle photographs breathe on white; a cool silver band separates
   the control cards from them and the following door story. */
#nuclyo-mobile-opening #good-stuff { background: #fff; }
#nuclyo-mobile-opening .n114-control-chapter { background: var(--n126-silver); }
#nuclyo-mobile-opening .n114-control-chapter #nuclyo-control-cards .card {
  background: #fff;
  box-shadow: inset 0 0 0 1px #dce3ea;
}
#nuclyo-mobile-opening .n114-control-chapter #nuclyo-control-cards .card-app { background: #f9fbff; }
#nuclyo-mobile-opening #at-your-door { background: #fff; }
#nuclyo-mobile-opening #at-your-door .n92-lock-copy { display: grid; gap: 9px; min-width: 0; }
#nuclyo-mobile-opening #at-your-door .n92-lock-message {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #2464e8;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}
#nuclyo-mobile-opening #at-your-door .n92-lock-message svg {
  width: 18px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#nuclyo-mobile-opening #at-your-door .n92-lock-crop { flex-basis: 55px; width: 55px; }

/* A shallow silver-to-white sweep frames the black switch like an object. */
#nuclyo-mobile-opening #the-nuclyo-switch {
  background: linear-gradient(180deg, #e9edf2 0%, #f5f7f9 41%, #fff 70%);
}

/* Installation and the three-day promise read as one easy-ownership chapter. */
#nuclyo-mobile-opening .n105-install-chapter { background: var(--n126-silver); }
#nuclyo-mobile-opening .n105-install-chapter .n105-fit { border-top: 0; }
#nuclyo-mobile-opening .n105-install-chapter .n105-ready-art img { mix-blend-mode: multiply; }
#nuclyo-mobile-opening .n105-ready-duration {
  display: grid;
  grid-template-columns: 102px minmax(0, 1fr);
  align-items: end;
  gap: 18px;
  margin-top: 20px;
  padding-top: 22px;
  border-top: 1px solid #cbd5e1;
}
#nuclyo-mobile-opening .n105-ready-duration > p { min-width: 0; }
#nuclyo-mobile-opening .n105-ready-duration strong {
  font-size: 128px;
  font-weight: 600;
  line-height: .78;
  letter-spacing: -.09em;
}
#nuclyo-mobile-opening .n105-ready-duration > p > span {
  margin-top: 10px;
  font-size: 20px;
  font-weight: 600;
}
#nuclyo-mobile-opening .n105-ready-duration h3 { font-size: 18px; }
#nuclyo-mobile-opening .n105-ready-duration div p { max-width: 26ch; }

@media (min-width: 1000px) {
  #nuclyo-mobile-opening .n105-ready-duration {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 34px;
    margin-top: 12px;
    padding-top: 28px;
  }
  #nuclyo-mobile-opening .n105-ready-duration strong { font-size: 172px; }
  #nuclyo-mobile-opening .n105-ready-duration > p > span { font-size: 23px; }
  #nuclyo-mobile-opening .n105-ready-duration h3 { font-size: 20px; }
}

@media (min-width: 700px) and (max-width: 999px) {
  #nuclyo-mobile-opening .n105-ready-duration {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    margin-top: 8px;
    padding-top: 16px;
  }
  #nuclyo-mobile-opening .n105-ready-duration strong { font-size: 112px; }
  #nuclyo-mobile-opening .n105-ready-duration > p > span { font-size: 18px; }
  #nuclyo-mobile-opening .n105-ready-duration h3 { font-size: 16px; }
}

/* Installation and ownership are adjacent now: give each its own clear stage. */
#nuclyo-mobile-opening .n114-ownership-chapter { background: #fff; }
#nuclyo-mobile-opening #product-range { background: var(--n126-silver); }

/* The quote follows a silver product chapter; keep its canvas white and
   define the selector with an edge instead of introducing a fourth grey. */
#nuclyo-mobile-opening .nx-lower #nx-scope { background: #fff; }
#nuclyo-mobile-opening .nx-lower #nx-scope .n114-quote-picker {
  background: #fff;
  border: 1px solid #dce3ea;
  box-shadow: 0 12px 36px #111d2c0a;
}

/* The night image is the dark chapter, not a dark card floating on white. */
#nuclyo-mobile-opening #after-hours {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  background: linear-gradient(145deg, #111d2c, #0b1523);
}
#nuclyo-mobile-opening #after-hours .nb91-night-stage { min-height: 525px; }
#nuclyo-mobile-opening #after-hours .nb91-night-heading,
#nuclyo-mobile-opening #after-hours .nb91-night-after {
  padding-left: max(24px, calc((100vw - 1160px) / 2));
  padding-right: max(24px, calc((100vw - 1160px) / 2));
}
#nuclyo-mobile-opening #after-hours .nb91-night-proof {
  left: max(24px, calc((100vw - 1160px) / 2));
  right: max(24px, calc((100vw - 1160px) / 2));
}

/* A dark final invitation closes the light quote-and-FAQ chapter. */
#nuclyo-mobile-opening .nx-lower .nx-final {
  max-width: none;
  margin: 0;
  padding: 0;
  background: linear-gradient(125deg, #1b2a3c 0%, #101c2b 65%, #0b1523 100%);
}
#nuclyo-mobile-opening .nx-lower .nx-final-card {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 52px 24px 60px;
  border-radius: 0;
  background: transparent;
  color: #fff;
}
#nuclyo-mobile-opening .nx-lower .nx-final h2 { color: #fff; }
#nuclyo-mobile-opening .nx-lower .nx-final-intro { color: #d2dce7; }
#nuclyo-mobile-opening .nx-lower .nx-preview-note { color: #acbccc; }

@media (min-width: 700px) {
  #nuclyo-mobile-opening #after-hours .nb91-night-stage > img { object-position: center top; }
  #nuclyo-mobile-opening .nx-lower .nx-final-card { padding: 70px 40px 78px; }
}

/* The phone sits on the vanity in the source photograph. Give the wide
   composition enough vertical room for it to clear the callout. */
@media (min-width: 1000px) {
  #nuclyo-mobile-opening #at-your-door .nb91-door-photo,
  #nuclyo-mobile-opening #at-your-door .nb91-help-photo { height: 460px; }
  #nuclyo-mobile-opening #at-your-door .n92-lock-proof { top: calc(460px - 184px); }
}
@media (min-width: 1200px) {
  #nuclyo-mobile-opening #at-your-door .nb91-door-photo,
  #nuclyo-mobile-opening #at-your-door .nb91-help-photo { height: 500px; }
  #nuclyo-mobile-opening #at-your-door .n92-lock-proof { top: calc(500px - 184px); }
}

@media (min-width: 700px) and (max-width: 999px) {
  #nuclyo-mobile-opening #at-your-door .n92-lock-proof { gap: 12px; padding-inline: 12px; }
  #nuclyo-mobile-opening #at-your-door .n92-lock-message { gap: 6px; font-size: 14px; }
  #nuclyo-mobile-opening #at-your-door .n92-lock-message svg { width: 18px; height: 21px; }
}

/* Keep the two door moments brisk on a phone; the proof card remains readable. */
@media (max-width: 699px) {
  #nuclyo-mobile-opening #at-your-door { padding-top: 42px; padding-bottom: 38px; }
  #nuclyo-mobile-opening #at-your-door .nb91-heading { margin-bottom: 22px; }
  #nuclyo-mobile-opening #at-your-door .nb91-diptych { gap: 28px; }
  #nuclyo-mobile-opening #at-your-door .nb91-door-photo,
  #nuclyo-mobile-opening #at-your-door .nb91-help-photo { aspect-ratio: 1.12; }
  #nuclyo-mobile-opening #at-your-door .nb91-help-photo { aspect-ratio: .93; }
  #nuclyo-mobile-opening #at-your-door .nb91-door-photo > img { object-position: 50% 55%; }
  #nuclyo-mobile-opening #at-your-door .nb91-door-caption,
  #nuclyo-mobile-opening #at-your-door .nb91-help-caption { padding-top: 16px; }
  #nuclyo-mobile-opening #at-your-door .n92-lock-proof {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    z-index: 1;
    margin: 0 12px 12px;
    padding: 11px;
    min-height: 0;
    gap: 12px;
    border: 1px solid #ffffffb3;
    background: #fffffff0;
    backdrop-filter: blur(12px);
  }
  #nuclyo-mobile-opening #at-your-door .n92-lock-crop { flex-basis: 50px; width: 50px; }
  #nuclyo-mobile-opening #at-your-door .n92-lock-message { gap: 6px; font-size: 13px; }
  #nuclyo-mobile-opening #at-your-door .n92-lock-message svg { width: 18px; height: 21px; }
  #nuclyo-mobile-opening #at-your-door .nb91-door-footer { margin-top: 22px; }
}

@media (max-width: 374px) {
  #nuclyo-mobile-opening #after-hours .nb91-night-heading,
  #nuclyo-mobile-opening #after-hours .nb91-night-after { padding-inline: 20px; }
  #nuclyo-mobile-opening #after-hours .nb91-night-proof { left: 20px; right: 20px; }
  #nuclyo-mobile-opening .nx-lower .nx-final-card { padding-inline: 20px; }
}