/* One campaign, three creator moments. Keep the demonstration below the face. */
.home-page .hero { min-height: 1010px; }
.home-page .hero .hero-stories {
  width: min(520px, 39%);
  min-height: 0;
  right: 4.5%;
  top: 350px;
  bottom: auto;
  padding: 0;
}
.home-page .hero-stories .hero-demo-panel { height: auto; aspect-ratio: 1; }
.hero-stories vkit-hero { display: block; width: 100%; max-width: none; aspect-ratio: 1; }
.hero-stories vkit-hero:not(:defined) {
  display: grid;
  align-content: center;
  color: white;
  padding: 24px;
  box-sizing: border-box;
}
.home-page .hero .hero-stories .hero-demo-controls {
  margin: 0;
  padding: 0 8px;
  min-height: 44px;
  gap: 8px;
}
.home-page .hero-stories .hero-demo-controls button,
.home-page .hero-stories .hero-demo-controls #hero-demo-pause {
  width: 44px;
  height: 44px;
  background: #10151bc9;
  color: white;
  border: 1px solid #ffffff80;
}
.hero-stories .hero-demo-controls button:focus-visible { outline: 3px solid #ffd343; outline-offset: 3px; }
.hero-stories .hero-demo-controls button[aria-disabled="true"] { opacity: .6; cursor: default; }
@media (min-width: 1800px) {
  .home-page .hero { min-height: 1080px; }
  .home-page .hero .hero-stories { width: 560px; right: 6%; top: 375px; }
}
@media (min-width: 761px) and (max-width: 1200px) {
  .home-page .hero { min-height: 1040px; }
  .home-page .hero .hero-stories { width: 42%; right: 3%; top: 460px; }
  .home-page .hero-content { width: 68%; }
  .home-page .hero-description { max-width: 480px; }
  .home-page .hero-products { max-width: min(500px, 50vw); }
}
@media (max-width: 760px) {
  .home-page .hero { min-height: 0; }
  .home-page .hero-products button { min-width: 0; }
  .home-page .hero-products strong { overflow-wrap: anywhere; hyphens: auto; }
  .home-page .hero .hero-image {
    top: 590px;
    height: 720px;
    object-position: 76% center;
    mask-image: linear-gradient(transparent, #000 17%, #000 72%, transparent);
  }
  .home-page .hero .hero-shade {
    background: linear-gradient(180deg, #131c25 0, #131c25 380px, #131c2510 650px, #131c2550 880px, #131c25 100%);
  }
  .home-page .hero .hero-stories {
    position: relative;
    width: 94%;
    max-width: 480px;
    right: auto;
    top: auto;
    bottom: auto;
    margin: 190px auto 16px;
  }
}

/* Three customer worlds, with a spacious stage beneath the subject's face. */
.home-page .hero { background:#111318; min-height:1040px; }
.home-page .hero-content { width:58%; }
.home-page .hero h1 .hero-line { color:inherit; }
.home-page .hero .hero-stories { width:min(560px,42%); right:3.5%; top:370px; }
.home-page .hero .hero-slide:nth-child(2) { object-position:78% center; }
.home-page .hero .hero-slide:nth-child(3) { object-position:78% center; }
.home-page .hero[data-active-product="studio"] .hero-shade { background:linear-gradient(90deg,#160f09e8 0%,#160f09c4 30%,#160f0930 59%,transparent 80%),linear-gradient(0deg,#160f09ed,transparent 52%); }
.home-page .hero[data-active-product="posts"] .hero-shade { background:linear-gradient(90deg,#06131fe8 0%,#06131fb0 32%,#06131f20 60%,transparent 80%),linear-gradient(0deg,#06131fec,transparent 50%); }
.home-page .hero-world-label { display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 12px 12px;color:#fff;line-height:1.3;font-family:DM,Arial,sans-serif; }
.home-page .hero-world-label>span { font-size:18px;font-weight:700;letter-spacing:-.02em; }
.home-page .hero-world-label>small { font-size:12px;font-weight:500;color:#e0e4e9;border:1px solid #ffffff50;border-radius:100px;padding:5px 10px;background:#11131855; }
/* Switch foreground and surface together: a fading white surface with instant
   white text becomes unreadable when the carousel advances to the next tab. */
.home-page .hero-products button { background:#121a25;color:#fff;transition:transform .25s; }
.home-page .hero-products button:hover { background:#243247;color:#fff;transform:translateY(-3px); }
.home-page .hero-products button[aria-selected="true"] { background:#fff;color:#111318;border-color:#fff;box-shadow:inset 0 -2px #fff; }
.home-page .hero-products button:focus-visible { outline:3px solid #ffd343;outline-offset:4px; }
/* Use the same complete Instagram artwork as the navigation, without a tiny
   edge-to-edge mask. It stays recognisable on both the white and dark tabs. */
.home-page .hero .vkit-autodm-label::before {
  width:1em;height:1em;vertical-align:-.14em;
  background:transparent url('/assets/instagram-color.svg') center/contain no-repeat;
  -webkit-mask:none;mask:none;
}
@media(min-width:1800px){.home-page .hero .hero-stories{width:600px;right:6%;top:370px}.home-page .hero{min-height:1120px}}
@media(min-width:761px) and (max-width:1200px){
 .home-page .hero-content{width:64%}
 .home-page .hero .hero-stories{width:43%;right:2%;top:470px}
 .home-page .hero-world-label>span{font-size:16px}
 .home-page .hero{min-height:1080px}
 .home-page .hero[data-active-product="studio"] h1{font-size:clamp(45px,6.2vw,74px)}
}
@media(max-width:760px){
 .home-page .hero{min-height:0}
 .home-page .hero-content{width:auto}
 .home-page .hero h1{font-size:clamp(43px,10.7vw,70px)}
 .home-page .hero .hero-stories{position:relative;width:94%;max-width:480px;top:auto;right:auto;margin:220px auto 14px}
 .home-page .hero .hero-slide:nth-child(2),.home-page .hero .hero-slide:nth-child(3){object-position:81% center}
 .home-page .hero[data-active-product="studio"] .hero-shade{background:linear-gradient(180deg,#19130f 0,#19130f 390px,#19130f10 680px,#19130f40 900px,#19130f 100%)}
 .home-page .hero[data-active-product="posts"] .hero-shade{background:linear-gradient(180deg,#081725 0,#081725 390px,#08172510 680px,#08172540 900px,#081725 100%)}
 .home-page .hero .hero-world-label{margin-bottom:16px}
 .home-page .hero[data-active-product="studio"] .hero-image,.home-page .hero[data-active-product="posts"] .hero-image{top:530px;height:760px}
 .home-page .hero-world-label>span{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.home-page .hero-products button{transition:none}.home-page .hero-products button:hover{transform:none}}

@media(max-width:760px){
 .home-page .hero .hero-stories{margin-top:260px}
 .home-page .hero .hero-image,
 .home-page .hero[data-active-product="studio"] .hero-image,
 .home-page .hero[data-active-product="posts"] .hero-image{top:calc(var(--hero-copy-end, 670px) - 25px);height:760px}
}