/* Home v2 hero (local: /home-v2): real client mockups inside the devices. */
.v2-layer.live { overflow: hidden; background: #0b0c10; }
.v2-layer.live iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; background: transparent; }
/* inactive live layers stop painting once faded out */
.v2-layer.live:not(.on) { visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.v2-layer.live.on { visibility: visible; transition: opacity .8s ease, visibility 0s; }

/* "open the real site" pill at the end of the caption row, only while a live mockup is on screen */
.v2-stage .hero-cap { flex-wrap: wrap; }
.live-open { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: #0b0c10; color: #fff;
  font: 600 .8rem/1 "Instrument Sans", sans-serif; letter-spacing: 0; text-decoration: none; white-space: nowrap; box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
  opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .35s, transform .35s cubic-bezier(.2,.8,.2,1), background .2s; }
.v2-stage.is-live .live-open { opacity: 1; pointer-events: auto; transform: none; }
.live-open:hover { background: #7b5cff; }

/* sector picker replaces the name box: picking a sector is the interaction */
.sector-pick { display: grid; gap: 12px; width: 100%; }
.sector-q { font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 1.6vw, 1.3rem); letter-spacing: -0.02em; color: #15161c; }
.sectors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.sector { font: inherit; text-align: left; cursor: pointer; display: grid; gap: 3px; padding: 16px 44px 16px 18px; border-radius: 18px; position: relative;
  background: #fff; color: #15161c; border: 1px solid rgba(21, 22, 28, .12); box-shadow: 0 1px 2px rgba(21, 22, 28, .04), 0 10px 26px rgba(40, 30, 90, .06);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), background .25s, color .25s, border-color .25s, box-shadow .25s; }
.sector b { font-family: var(--display); font-size: 1.22rem; letter-spacing: -0.02em; }
.sector small { font-size: .82rem; color: #6b7080; line-height: 1.3; transition: color .25s; }
.sector::after { content: "→"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: #a0a4b0; transition: transform .2s, color .25s; }
.sector:hover { transform: translateY(-2px); border-color: rgba(123, 92, 255, .5); }
.sector:hover::after { transform: translate(3px, -50%); color: var(--violet); }
.sector[aria-pressed="true"], .hero-v2.demo .sector.demo-on { background: #15161c; color: #fff; border-color: #15161c; box-shadow: 0 0 0 4px rgba(123, 92, 255, .22), 0 18px 40px rgba(21, 22, 28, .22); }
.sector[aria-pressed="true"] small, .hero-v2.demo .sector.demo-on small { color: #c4b5ff; }
.sector[aria-pressed="true"]::after, .hero-v2.demo .sector.demo-on::after { color: #fff; }
/* during the demo loop only the sector on screen looks selected */
.hero-v2.demo .sector[aria-pressed="true"]:not(.demo-on) { background: #fff; color: #15161c; border-color: rgba(21, 22, 28, .12); box-shadow: 0 1px 2px rgba(21, 22, 28, .04), 0 10px 26px rgba(40, 30, 90, .06); }
.hero-v2.demo .sector[aria-pressed="true"]:not(.demo-on) small { color: #6b7080; }
.hero-v2.demo .sector[aria-pressed="true"]:not(.demo-on)::after { color: #a0a4b0; }
.hero-go { padding: 17px 26px; font-size: 1.02rem; }
@media (max-width: 520px) { .sector { padding: 13px 14px; } .sector::after { display: none; } .sector b { font-size: 1.05rem; } .sector small { font-size: .74rem; } .hero-go { width: 100%; } }

/* real sites laid over the generated mini-site in the sections below (story phone, tour browser/phone) */
.live-over { position: absolute; inset: 0; z-index: 3; overflow: hidden; background: #0b0c10; opacity: 0; transition: opacity .6s ease; }
.live-over.in { opacity: 1; }
.live-over iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
#tourMock, #tourPhone { position: relative; }
.sc-site { overflow: hidden; }
/* the mini-site spotlight is meaningless over a real site */
.tour-stage.is-live [data-focus] .ms-list, .tour-stage.is-live [data-focus] .ms-hero { box-shadow: none; }