/* V4 homepage, light hero sample (Verlin 2026-10-21; preview page /home-light/ only). Simon's live hero colours:
   near-black "Decision Intelligence", the rotating line in his Instant blue to graphite to blue gradient, on a light
   ground that deepens to pale blue at the bottom, then the orange rule, so the white Gap blade below reads as a new
   blade. The stack keeps its dark look inside a rounded product window until it is redrawn for a light ground. */
.inst-home--light .inst-home-hero { background: linear-gradient(180deg, #fff 0%, #f4f9fc 50%, #e5f0f8 100%) !important; color: #1d1d1f; }
.inst-home--light .inst-home-hero h1 { color: #1d1d1f; text-shadow: 0 0 14px rgba(0, 102, 204, .16); }
/* Simon's exact rotating line (live style.css .instant-rotating-line__item, checked 2026-10-23): the gradient spans the
   full width of the line, not just the words, and the title's glow is rgba(0,102,204,.16). */
.inst-home--light .inst-home-rot > span { right: 0; background: linear-gradient(92deg, #0066cc 0%, #383a3b 55%, #0066cc 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.inst-home--light .inst-home-hero p { color: #424245; }
.inst-home--light .inst-home-hero .inst-rd-eyebrow { color: #0066cc; }
.inst-home--light .inst-home-hero::before { height: 3px; }
.inst-rd.inst-home--light .inst-home-btn--ghost { color: #1d1d1f !important; border-color: rgba(29, 29, 31, .35); }
.inst-rd.inst-home--light .inst-home-btn--ghost:hover { background: rgba(0, 102, 204, .06); border-color: #1d1d1f; }

/* the stack in a dark product window */
.inst-home--light .inst-home-stack { position: relative; border-radius: 24px; overflow: hidden !important; border: 1px solid rgba(13, 21, 32, .14);
  background: radial-gradient(34rem 26rem at 55% 45%, rgba(19, 141, 205, .26), transparent 65%), #0b1a2a !important;
  box-shadow: 0 34px 70px -38px rgba(13, 40, 70, .45); height: clamp(420px, 38vw, 540px); }
.inst-home--light .inst-home-stack .stack-scene { top: 64px; }
.inst-home--light .inst-home-stack .stack { width: min(21vw, 300px); }

/* The Gap: plain white, so it parts from the hero */
.inst-home--light .v3h .h3-gap { background: #fff; }

@media (max-width: 900px) { .inst-home--light .inst-home-stack { display: none; } }