/* Three light bands: benefits, organization/cloud, compatibility/offer.
   The built app renders these as main sections 2, 4/5 and 8/9.
   Scope every override to these bands; media, brand icons and CTAs retain color. */
#root main > section:is(:nth-of-type(2), :nth-of-type(4), :nth-of-type(5), :nth-of-type(8), #offer) {
  --text-main: #172033;
  --text-muted: #526077;
  --text-light: #64748b;
  --accent-light: #0055ff;
  --accent-yellow: #946200;
  --shadow-premium: 0 20px 60px rgba(15, 23, 42, .09);
  background: #fff;
  color: var(--text-main);
  max-width: none;
  width: 100%;
  position: relative;
  z-index: 1;
  color-scheme: light;
}
#root main > section:is(:nth-of-type(2), :nth-of-type(4), :nth-of-type(5), :nth-of-type(8), #offer) :is(h2, h3, h4, b) {
  color: var(--text-main) !important;
}
#root main > section:is(:nth-of-type(2), :nth-of-type(4), :nth-of-type(5), :nth-of-type(8), #offer) p {
  color: var(--text-muted) !important;
}
#root main > section:is(:nth-of-type(2), :nth-of-type(4), :nth-of-type(5), :nth-of-type(8), #offer) [style*="background-clip: text"] {
  background-image: linear-gradient(90deg, #0055ff 0%, #193b91 50%, #0055ff 100%) !important;
}
#root main > section:is(:nth-of-type(2), :nth-of-type(4), :nth-of-type(5), :nth-of-type(8), #offer) button {
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(0, 85, 255, .2) !important;
}
#root main > section:is(:nth-of-type(2), :nth-of-type(4), :nth-of-type(5), :nth-of-type(8), #offer) button:focus-visible {
  outline: 3px solid #0055ff;
  outline-offset: 5px;
}

/* Benefits: light cards, with the video kept intact inside a silver phone. */
#root main > section:nth-of-type(2) .glass-box:has(h3) {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
}
#root main > section:nth-of-type(2) .glass-box:has(h3) > div > div:first-child {
  background: #eef3ff !important;
  border-color: #d8e3ff !important;
  color: #0055ff;
}
#root main > section:nth-of-type(2) .glass-box:has(h3) svg {
  color: #0055ff !important;
}
#root main > section:nth-of-type(2) .glass-box:has(h3) span {
  color: #526077 !important;
}
#root main > section:nth-of-type(2) .glass-box:has(video),
#root main > section:nth-of-type(2) .glass-box:has(.localized-cloud-visual) {
  border-color: #e2e8f0 !important;
  box-shadow: 0 24px 56px rgba(15, 23, 42, .16) !important;
}

/* Organization: a light file-library mockup with its colorful asset tiles. */
#root main > section:nth-of-type(4) .tag-pill {
  color: #0055ff;
  background: #eef3ff;
  border-color: #d8e3ff;
  box-shadow: none;
}
#root main > section:nth-of-type(4) div[style*="max-width: 650px"] {
  background: #fff !important;
  border-color: #dbe3ee !important;
  box-shadow: 0 24px 55px rgba(15, 23, 42, .12) !important;
}
#root main > section:nth-of-type(4) div[style*="max-width: 650px"] [style*="color:"] {
  color: #526077 !important;
}
#root main > section:nth-of-type(4) div[style*="max-width: 650px"] :is([style*="font-weight: 600"], [style*="font-weight: 700"], [style*="color: rgb(255, 255, 255)"]) {
  color: #172033 !important;
}
#root main > section:nth-of-type(4) div[style*="max-width: 650px"] [style*="color: var(--accent-light)"] {
  color: #0055ff !important;
}
#root main > section:nth-of-type(4) div[style*="max-width: 650px"] [style*="background: rgba(255, 255, 255"] {
  background: #f1f5f9 !important;
}
#root main > section:nth-of-type(4) div[style*="max-width: 650px"] :is([style*="border: 1px"], [style*="border-bottom: 1px"], [style*="border-right: 1px"]) {
  border-color: #e2e8f0 !important;
}

/* Cloud: a white floating folder card; saturated decorative badges stay intact. */
#root main > section:nth-of-type(5) div[style*="rotateY"] {
  background: #fff !important;
  border-color: #dbe3ee !important;
  box-shadow: 0 24px 55px rgba(15, 23, 42, .12) !important;
}
#root main > section:nth-of-type(5) span[style*="color: rgb(228, 228, 231)"] {
  color: #172033 !important;
}
#root main > section:nth-of-type(5) span[style*="color: rgb(102, 102, 102)"] {
  color: #526077 !important;
}
#root main > section:nth-of-type(5) span[style*="color: rgb(52, 211, 153)"] {
  color: #047857 !important;
}
#root main > section:nth-of-type(5) div[style*="border-bottom: 1px"] {
  border-bottom-color: #e2e8f0 !important;
}
#root main > section:nth-of-type(5) div[style*="display: inline-flex"] {
  color: #0055ff;
  background: #eef3ff !important;
  border-color: #d8e3ff !important;
}
#root main > section:nth-of-type(5) div[style*="position: absolute"][style*="background: linear-gradient"] {
  color: #fff;
}

/* Compatibility: light panels; software brand icons retain their own colors. */
#root main > section:nth-of-type(8) > .glass-box {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 20px 55px rgba(15, 23, 42, .08) !important;
}
#root main > section:nth-of-type(8) .epiphany-grid > div:last-child {
  background: #fff !important;
  border-color: #e2e8f0 !important;
}
#root main > section:nth-of-type(8) .epiphany-grid > div:last-child span[style*="color: rgb(255, 255, 255)"] {
  color: #172033 !important;
}
#root main > section:nth-of-type(8) .epiphany-grid > div:last-child div[style*="background: rgba(255, 255, 255"] {
  background: #e2e8f0 !important;
}

/* Offer: white card, soft emerald price block and legible feature list. */
#root #offer > div:last-child {
  background: #fff !important;
  border-color: #dbe3ee !important;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .1) !important;
}
#root #offer div[style*="background: rgba(16, 185, 129, 0.03)"] {
  background: #ecfdf5 !important;
  border-color: #a7e5ca !important;
}
#root #offer div[style*="color: rgb(16, 185, 129)"] {
  color: #047857 !important;
  text-shadow: none !important;
}
#root #offer div[style*="color: rgb(255, 59, 48)"] {
  color: #c62828 !important;
}
#root #offer div[style*="color: rgba(255, 255, 255"] {
  color: #526077 !important;
}
#root #offer li span {
  color: #334155 !important;
}
#root #offer li svg {
  color: #047857 !important;
}
@media (max-width: 640px) {
  #root main > section:nth-of-type(8) > .glass-box {
    padding: 28px 20px !important;
    border-radius: 24px !important;
  }
  #root main > section:nth-of-type(8) .epiphany-grid > div:last-child {
    padding: 24px !important;
    border-radius: 20px !important;
  }
  #root #offer > div:last-child {
    padding: 28px 22px !important;
  }
}