/* V4 homepage (Verlin 2026-10-19): V3's homepage blades (v3home-scoped.css, scoped under .v3h) under a V4 hero: navy
   banner like the Platform pages, live inst.com's headline with its rotating second line, now in an Instant blue to
   orange gradient, and an animated diagram on the right whose highlighted outcome follows the headline. */
.inst-home-hero { min-height: clamp(540px, 46vw, 700px); }
.inst-home-hero h1 { max-width: none; font-size: clamp(2.4rem, 4.1vw, 3.9rem) !important; }
.inst-home-hero .inst-sec-hero-grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.inst-home-line { display: block; white-space: nowrap; }
.inst-home-rot { display: block; position: relative; height: 1.2em; overflow: hidden; }
.inst-home-rot > span {
  position: absolute; left: 0; top: 0; white-space: nowrap; padding-bottom: .1em; opacity: 0; transform: translateY(-30%);
  transition: transform .56s cubic-bezier(.22, 1, .36, 1), opacity .56s cubic-bezier(.22, 1, .36, 1);
  background: linear-gradient(90deg, #138dcd 0%, #3aa7e0 30%, #f39200 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.inst-home-rot > span[data-cur] { opacity: 1; transform: none; }
.inst-home-rot > span[data-out] { opacity: 0; transform: translateY(30%); }
.inst-home-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem !important; }
/* same pill as the close-blade buttons on the Platform pages: 15.2px, 600, line-height 1.55, 47px tall */
.inst-rd .inst-home-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .684rem 1.0925rem; border-radius: 999px; font-weight: 600; font-size: .95rem; line-height: 1.55; letter-spacing: .01em; text-decoration: none !important;
  background: var(--wp--preset--color--brand-blue, #138dcd); color: #fff !important; border: 1px solid var(--wp--preset--color--brand-blue, #138dcd); }
.inst-rd .inst-home-btn:hover { background: #0f78ae; border-color: #0f78ae; }
.inst-rd .inst-home-btn--ghost { background: transparent; border-color: rgba(234, 241, 248, .55); }
.inst-rd .inst-home-btn--ghost:hover { background: rgba(234, 241, 248, .08); border-color: #eaf1f8; }

/* V3's blades: V4 spacing standard, Simon's fonts, no single-side accents */
.v3s.inst-home-body > section:not(.h3-ski) { padding-top: clamp(6rem, 10vw, 10rem) !important; padding-bottom: clamp(6.5rem, 11vw, 11rem) !important; }
.v3s.inst-home-body .sc-wrap { box-sizing: border-box; max-width: calc(var(--wp--style--global--content-size, 1280px) + 2 * clamp(16px, 5.5vw, 80px)); padding-left: clamp(16px, 5.5vw, 80px); padding-right: clamp(16px, 5.5vw, 80px); margin-left: auto; margin-right: auto; }
.inst-home-body { --sc-font-mono: var(--wp--preset--font-family--instrument, sans-serif); }
.v3s.inst-home-body .btn--primary { background: var(--wp--preset--color--brand-blue, #138dcd) !important; border-color: var(--wp--preset--color--brand-blue, #138dcd) !important; color: #fff !important; }
.v3s.inst-home-body a:hover, .v3s.inst-home-body li:hover { transform: none !important; }
@media (max-width: 900px) { .inst-home-rot > span { font-size: .82em; } .inst-home-hero .inst-sec-hero-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .inst-home-hero h1 { font-size: 9.2vw !important; } }
/* nothing moves under the cursor; the example card pins below Simon's sticky header */
.inst-home-body .ind-tile:hover .ind-img img, .inst-home-body .ind-tile:hover .arrow, .inst-home-body .ind-tile:hover { transform: none !important; }
.inst-home-body .ex-stage { --header-h: 104px; }
.inst-home-body .ind-tile--yours { border-top: 0 !important; }

/* close blade: drop V3 home's taller line-height so its buttons match the rest of the site */
.inst-home-body section.close .btn { line-height: 1.55; }

/* banner: the Platform Overview's exploded stack (V3 styles from v3-scoped.css), sized for the banner column */
.inst-home-stack { --see: #5aa2ff; --know: #ffb347; --act: #5fd39a; --sys: #9db0c4; background: none; overflow: visible !important; }
.inst-home-stack .stack-scene { height: clamp(380px, 36vw, 520px); }
.inst-home-stack .stack { width: min(25vw, 330px); }
.inst-home-stack .plate { transition-duration: .25s; }
/* the open stack rises about 190px; start it lower so, fully open, it sits centred against the headline */
.inst-home-stack .stack-scene { top: 80px; }
/* Our Philosophy example (Verlin 2026-10-23): "Intervene" pushed its time onto a second line while See and Know kept
   theirs beside them; the three words are a little smaller and never wrap, so every time sits on the same line. */
.v3h .h3b .ex-word { flex-wrap: nowrap; white-space: nowrap; font-size: clamp(1.25rem, 2vw, 1.85rem); }
@media (max-width: 900px) { .v3h .h3b .ex-word { font-size: var(--sc-t-xl); } }
/* Closing blade (Verlin 2026-10-23, from his phone): the two buttons touched when they wrapped onto two lines; same
   row-and-gap layout as the Platform pages' closing buttons. */
.v3h .close-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sc-3, .75rem); }
