/* ========================================================================== 
   20.0.29-test · landing-page feature cycle, compact formats strip, map guide
   This file is intentionally homepage-only and loads after the responsive CSS.
   ========================================================================== */

/* Keep the hero map on the same 1240px guide as the rest of the site. */
body.home .hp-hero-product .hp-hero-inner,
body.front-page .hp-hero-product .hp-hero-inner{
  width:min(calc(100% - 40px),1240px)!important;
  max-width:1240px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0!important;
  padding-right:0!important;
  box-sizing:border-box!important;
}
body.home .hp-hero-product .hp-hero-map,
body.front-page .hp-hero-product .hp-hero-map{
  width:100%!important;
  max-width:1240px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  justify-self:stretch!important;
  transform:none!important;
  box-sizing:border-box!important;
}
body.home .hp-hero-product .hp-hero-map .world-map,
body.front-page .hp-hero-product .hp-hero-map .world-map{
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
}

/* Small, prominent notice near the top. */
.hp-formats-strip{
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
  background:color-mix(in srgb,var(--bg-deep) 86%,var(--bg-card));
}
.hp-formats-strip-inner{
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-top:10px;
  padding-bottom:10px;
}
.hp-formats-strip-title{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  white-space:nowrap;
}
.hp-formats-strip-title span{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 9px;
  border:1px solid color-mix(in srgb,var(--gold-ink) 42%,var(--border));
  border-radius:999px;
  color:var(--gold-ink);
  background:color-mix(in srgb,var(--gold-ink) 8%,transparent);
  font-size:.62rem;
  font-weight:750;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hp-formats-strip-title strong{
  color:var(--ink);
  font-size:.9rem;
  font-weight:700;
}
.hp-formats-strip-items{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:0;
  color:var(--ink-dim);
  font-size:.78rem;
  white-space:nowrap;
}
.hp-formats-strip-items span{
  position:relative;
  padding:0 15px;
}
.hp-formats-strip-items span+span::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:1px;
  height:14px;
  transform:translateY(-50%);
  background:var(--border-soft);
}
.hp-formats-strip-items span:last-child{padding-right:0}

/* Image-led four-feature carousel. */
.hp-feature-cycle{
  padding:90px 0 96px!important;
  background:var(--bg)!important;
}
.hp-feature-cycle-head{
  max-width:760px;
  margin:0 auto 32px;
  text-align:center;
}
.hp-feature-cycle-head h2{
  margin:0;
  color:var(--ink);
  font-size:clamp(2rem,3.1vw,3rem);
  line-height:1.03;
  letter-spacing:-.045em;
}
.hp-feature-cycle-head p{
  margin:12px auto 0;
  color:var(--ink-dim);
  font-size:1rem;
  line-height:1.5;
}
.hp-feature-cycle-shell{
  position:relative;
  padding:62px 18px 18px;
  border:1px solid var(--border);
  border-radius:24px;
  background:
    radial-gradient(circle at 72% 42%,color-mix(in srgb,var(--gold-ink) 6%,transparent),transparent 34%),
    color-mix(in srgb,var(--bg-card) 92%,#000);
  overflow:hidden;
}
.hp-feature-cycle-controls{
  position:absolute;
  z-index:5;
  top:18px;
  right:20px;
  display:flex;
  align-items:center;
  gap:6px;
  min-height:38px;
  padding:4px 6px;
  border:1px solid var(--border-soft);
  border-radius:12px;
  background:color-mix(in srgb,var(--bg-raised) 92%,transparent);
}
.hp-feature-arrow{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
}
.hp-feature-arrow:hover{background:var(--bg-card)}
.hp-feature-arrow svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hp-feature-counter{
  min-width:48px;
  text-align:center;
  color:var(--ink-dim);
  font-size:.82rem;
}
.hp-feature-counter b{color:var(--ink);font-weight:750}

.hp-feature-cycle-stage{
  display:grid;
  grid-template-columns:minmax(260px,330px) minmax(0,1fr);
  gap:22px;
  align-items:stretch;
}
.hp-feature-cycle-nav{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  min-width:0;
}
.hp-feature-cycle-item{
  width:100%;
  min-height:92px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:16px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  opacity:.34;
  transition:opacity .22s ease,background .22s ease,border-color .22s ease,transform .22s ease;
}
.hp-feature-cycle-item:hover{opacity:.62}
.hp-feature-cycle-item.is-active{
  opacity:1;
  background:var(--bg-raised);
  border-color:var(--border-soft);
  transform:translateX(2px);
}
.hp-feature-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:var(--gold-ink);
  background:color-mix(in srgb,var(--gold-ink) 12%,var(--bg-card));
  border:1px solid color-mix(in srgb,var(--gold-ink) 18%,var(--border-soft));
}
.hp-feature-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hp-feature-cycle-item strong{
  display:block;
  margin:1px 0 5px;
  color:var(--ink);
  font-size:1.02rem;
  line-height:1.22;
  font-weight:700;
}
.hp-feature-cycle-item small{
  display:block;
  max-width:31ch;
  color:var(--ink-dim);
  font-size:.78rem;
  line-height:1.45;
  font-weight:450;
}
.hp-feature-cycle-panels{
  position:relative;
  min-width:0;
  aspect-ratio:3/2;
  border:1px solid var(--border-soft);
  border-radius:16px;
  background:#050505;
  overflow:hidden;
}
.hp-feature-cycle-panel{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:#050505;
}
.hp-feature-cycle-panel.is-active{display:flex}
.hp-feature-cycle-panel img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  user-select:none;
}
.hp-feature-cycle-panel.is-entering{animation:hpFeatureIn .46s cubic-bezier(.22,1,.36,1) both}
@keyframes hpFeatureIn{
  from{opacity:.08;transform:translateY(6px) scale(.995)}
  to{opacity:1;transform:none}
}

/* The supplied coming-soon artwork becomes the final visual before community. */
.hp-coming-soon-visual{
  padding:72px 0 76px!important;
  background:var(--bg-deep)!important;
  border-top:1px solid var(--border-soft);
}
.hp-coming-soon-visual img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--border-soft);
  border-radius:20px;
  background:#050505;
}

/* Keep the next section close enough to read as the final CTA, not another gap. */
.hp-coming-soon-visual + .hp-community{border-top:1px solid var(--border-soft)!important}

@media (max-width:1000px){
  .hp-feature-cycle{padding:68px 0 72px!important}
  .hp-feature-cycle-stage{grid-template-columns:minmax(220px,270px) minmax(0,1fr);gap:14px}
  .hp-feature-cycle-item{min-height:82px;padding:13px;grid-template-columns:32px minmax(0,1fr);gap:10px}
  .hp-feature-icon{width:30px;height:30px;border-radius:8px}
  .hp-feature-icon svg{width:18px;height:18px}
  .hp-feature-cycle-item strong{font-size:.92rem}
  .hp-feature-cycle-item small{font-size:.7rem}
  .hp-coming-soon-visual{padding:56px 0 60px!important}
}

@media (max-width:760px){
  body.home .hp-hero-product .hp-hero-inner,
  body.front-page .hp-hero-product .hp-hero-inner{width:calc(100% - 28px)!important}

  .hp-formats-strip-inner{
    min-height:0;
    display:block;
    padding-top:12px;
    padding-bottom:12px;
    overflow:hidden;
  }
  .hp-formats-strip-title{margin-bottom:10px}
  .hp-formats-strip-title strong{font-size:.82rem}
  .hp-formats-strip-items{
    justify-content:flex-start;
    width:100%;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    font-size:.7rem;
    padding-bottom:1px;
  }
  .hp-formats-strip-items::-webkit-scrollbar{display:none}
  .hp-formats-strip-items span{padding:0 12px}
  .hp-formats-strip-items span:first-child{padding-left:0}

  .hp-feature-cycle{padding:52px 0 58px!important}
  .hp-feature-cycle-head{margin-bottom:22px}
  .hp-feature-cycle-head h2{font-size:clamp(1.8rem,8vw,2.35rem)}
  .hp-feature-cycle-head p{max-width:34ch;font-size:.86rem}
  .hp-feature-cycle-shell{padding:58px 10px 10px;border-radius:17px}
  .hp-feature-cycle-controls{top:11px;right:11px;min-height:36px}
  .hp-feature-cycle-stage{display:block}
  .hp-feature-cycle-nav{display:block;margin-bottom:10px}
  .hp-feature-cycle-item{display:none;transform:none!important}
  .hp-feature-cycle-item.is-active{
    width:100%;
    min-height:74px;
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    padding:12px;
    opacity:1;
  }
  .hp-feature-cycle-item strong{font-size:.9rem;margin-bottom:3px}
  .hp-feature-cycle-item small{max-width:38ch;font-size:.69rem;line-height:1.38}
  .hp-feature-cycle-panels{width:100%;aspect-ratio:3/2;border-radius:12px}
  .hp-coming-soon-visual{padding:44px 0 48px!important}
  .hp-coming-soon-visual img{border-radius:13px}
}

@media (max-width:430px){
  .hp-feature-cycle-shell{padding-left:8px;padding-right:8px;padding-bottom:8px}
  .hp-feature-cycle-controls{right:9px}
  .hp-feature-cycle-item.is-active{min-height:70px;padding:10px}
  .hp-feature-cycle-item small{font-size:.66rem}
  .hp-feature-cycle-panels{border-radius:10px}
  .hp-coming-soon-visual{padding:36px 0 40px!important}
}

@media (prefers-reduced-motion:reduce){
  .hp-feature-cycle-panel.is-entering{animation:none!important}
  .hp-feature-cycle-item{transition:none!important}
}