/* ========================================================================== 
   20.0.30-test · homepage mobile presentation pass
   --------------------------------------------------------------------------
   Reference discipline:
   - Apple: one focal point, generous spacing, clean hierarchy.
   - FXReplay: dark product-showcase rhythm and restrained controls.
   - Histriphy: existing typography, gold accent, maps and real product UI.

   This layer intentionally targets the homepage only. Desktop structure stays
   familiar; tablet/phone stop behaving like a squeezed desktop dashboard.
   ========================================================================== */

/* Shared guide: hero and every homepage chapter use the same center line. */
body.home .hp-hero-product .hp-hero-inner,
body.front-page .hp-hero-product .hp-hero-inner,
body.home .hp-formats-strip .section-inner,
body.front-page .hp-formats-strip .section-inner,
body.home .hsd-section .section-inner,
body.front-page .hsd-section .section-inner,
body.home .hp-feature-cycle .section-inner,
body.front-page .hp-feature-cycle .section-inner,
body.home .hp-coming-soon-visual .section-inner,
body.front-page .hp-coming-soon-visual .section-inner,
body.home .hp-community .section-inner,
body.front-page .hp-community .section-inner{
  width:min(calc(100% - 40px),1240px)!important;
  max-width:1240px!important;
  margin-inline:auto!important;
}

/* Main map: no inherited translate/negative margins. */
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:2px auto 0!important;
  justify-self:center!important;
  transform:none!important;
  left:auto!important;
  right:auto!important;
}
body.home .hp-hero-product .world-map,
body.front-page .hp-hero-product .world-map{
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  transform:none!important;
}

/* Compact formats notice. Important, but never a whole chapter. */
.hp-formats-strip-inner{min-height:54px!important;padding-block:8px!important}
.hp-formats-strip-title{gap:9px!important}
.hp-formats-strip-title span{min-height:22px!important;padding:0 8px!important;font-size:.58rem!important}
.hp-formats-strip-title strong{font-size:.82rem!important;letter-spacing:-.01em}
.hp-formats-strip-items{font-size:.72rem!important}
.hp-formats-strip-items span{padding-inline:13px!important}

/* Feature cycle desktop refinement: one quiet container, product image leads. */
.hp-feature-cycle{padding:88px 0 96px!important}
.hp-feature-cycle-head{margin-bottom:30px!important}
.hp-feature-cycle-head h2{font-size:clamp(2.2rem,3vw,3rem)!important}
.hp-feature-cycle-head p{margin-top:10px!important;color:var(--ink-dim)!important}
.hp-feature-cycle-shell{
  padding:64px 20px 20px!important;
  border-radius:22px!important;
  background:color-mix(in srgb,var(--bg-card) 94%,#000)!important;
  box-shadow:none!important;
}
.hp-feature-cycle-stage{grid-template-columns:minmax(250px,320px) minmax(0,1fr)!important;gap:20px!important}
.hp-feature-cycle-item{min-height:86px!important;padding:14px!important}
.hp-feature-cycle-item.is-active{transform:none!important}
.hp-feature-cycle-panels{border-radius:15px!important;background:var(--bg-card)!important}
.hp-feature-cycle-panel{background:transparent!important}
.hp-coming-soon-visual img{background:transparent!important}

/* The supplied bottom image belongs with the final CTA. */
.hp-coming-soon-mobile-copy{display:none}

@media (max-width:899px){
  body.home .hp-hero-product .hp-hero-inner,
  body.front-page .hp-hero-product .hp-hero-inner,
  body.home .hp-formats-strip .section-inner,
  body.front-page .hp-formats-strip .section-inner,
  body.home .hsd-section .section-inner,
  body.front-page .hsd-section .section-inner,
  body.home .hp-feature-cycle .section-inner,
  body.front-page .hp-feature-cycle .section-inner,
  body.home .hp-coming-soon-visual .section-inner,
  body.front-page .hp-coming-soon-visual .section-inner,
  body.home .hp-community .section-inner,
  body.front-page .hp-community .section-inner{
    width:min(calc(100% - 36px),760px)!important;
  }

  /* Tablet remains roomy. Do not turn it into phone UI. */
  .hp-feature-cycle-stage{grid-template-columns:220px minmax(0,1fr)!important;gap:14px!important}
  .hp-feature-cycle-item{min-height:76px!important;padding:12px!important}
  .hp-feature-cycle-item small{font-size:.7rem!important}
}

/* ========================================================================== 
   PHONE — deliberate mobile composition
   ========================================================================== */
@media (max-width:699px){
  body.home .section-inner,
  body.front-page .section-inner,
  body.home .hp-hero-product .hp-hero-inner,
  body.front-page .hp-hero-product .hp-hero-inner,
  body.home .hp-formats-strip .section-inner,
  body.front-page .hp-formats-strip .section-inner,
  body.home .hsd-section .section-inner,
  body.front-page .hsd-section .section-inner,
  body.home .hp-feature-cycle .section-inner,
  body.front-page .hp-feature-cycle .section-inner,
  body.home .hp-coming-soon-visual .section-inner,
  body.front-page .hp-coming-soon-visual .section-inner,
  body.home .hp-community .section-inner,
  body.front-page .hp-community .section-inner{
    width:calc(100% - 36px)!important;
    max-width:430px!important;
    margin-inline:auto!important;
  }

  /* Hero: clear message, compact actions, then one large map. */
  body.home .hp-hero-product .hp-hero-inner,
  body.front-page .hp-hero-product .hp-hero-inner{
    padding:42px 0 30px!important;
    gap:24px!important;
  }
  .hp-hero-product .hp-hero-copy{
    max-width:100%!important;
    margin-inline:auto!important;
    text-align:center!important;
  }
  .hp-hero-product .hp-h1{
    max-width:13.5ch!important;
    margin-inline:auto!important;
    font-size:clamp(2.25rem,10.3vw,2.75rem)!important;
    line-height:.99!important;
    letter-spacing:-.052em!important;
  }
  .hp-hero-product .hp-lede{
    max-width:34ch!important;
    margin:16px auto 0!important;
    font-size:.92rem!important;
    line-height:1.52!important;
  }
  .hp-hero-product .hp-actions{
    display:flex!important;
    width:100%!important;
    margin-top:20px!important;
    justify-content:center!important;
    align-items:center!important;
    gap:10px 14px!important;
    flex-wrap:wrap!important;
  }
  .hp-hero-product .hp-actions .button{
    width:auto!important;
    min-height:44px!important;
    padding-inline:18px!important;
    border-radius:9px!important;
    font-size:.78rem!important;
  }
  .hp-hero-product .hp-hero-secondary{
    width:auto!important;
    min-height:44px!important;
    padding-inline:4px!important;
    font-size:.8rem!important;
  }
  .hp-hero-product .hp-hero-map{
    width:100%!important;
    aspect-ratio:1.58/1!important;
    min-height:0!important;
    margin:0 auto!important;
    border-radius:12px!important;
  }
  .hp-hero-product .map-label{
    left:14px!important;
    right:14px!important;
    bottom:12px!important;
    max-width:calc(100% - 28px)!important;
    font-size:.58rem!important;
    white-space:normal!important;
  }

  /* Formats: a slim horizontal information rail. */
  .hp-formats-strip{overflow:hidden!important}
  .hp-formats-strip-inner{
    width:100%!important;
    max-width:none!important;
    min-height:48px!important;
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    padding:8px 18px!important;
    overflow:hidden!important;
  }
  .hp-formats-strip-title{
    flex:0 0 auto!important;
    margin:0!important;
    gap:7px!important;
  }
  .hp-formats-strip-title span{min-height:20px!important;padding:0 7px!important;font-size:.52rem!important}
  .hp-formats-strip-title strong{font-size:.72rem!important}
  .hp-formats-strip-items{
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    display:flex!important;
    justify-content:flex-start!important;
    gap:0!important;
    overflow-x:auto!important;
    padding:0!important;
    scrollbar-width:none!important;
    font-size:.65rem!important;
    -webkit-overflow-scrolling:touch!important;
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
  }
  .hp-formats-strip-items::-webkit-scrollbar{display:none!important}
  .hp-formats-strip-items span{flex:0 0 auto!important;padding:0 10px!important}
  .hp-formats-strip-items span:first-child{padding-left:0!important}
  .hp-formats-strip-items span+span::before{height:11px!important}

  /* Studio: Apple-like chapter. Copy first, one strong product visual, tiny tool rail. */
  body.home .section.hsd-section,
  body.front-page .section.hsd-section{
    margin-top:0!important;
    padding:72px 0 68px!important;
    background:var(--bg-deep)!important;
  }
  .hsd-section::before{opacity:.55!important}
  .hsd-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:30px!important;
  }
  .hsd-copy{
    width:100%!important;
    max-width:370px!important;
    margin-inline:auto!important;
    text-align:center!important;
  }
  .hsd-copy .hp-kicker{font-size:.6rem!important;letter-spacing:.11em!important}
  .hsd-copy h2.hsd-title-lines{
    max-width:13ch!important;
    margin:13px auto 0!important;
    font-size:clamp(2rem,9vw,2.45rem)!important;
    line-height:1.01!important;
    letter-spacing:-.05em!important;
    text-wrap:balance!important;
  }
  .hsd-title-lines span{display:inline!important;width:auto!important;max-width:none!important}
  .hsd-title-lines span+span::before{content:" "}
  .hsd-copy>p:not(.hp-kicker){
    max-width:34ch!important;
    margin:15px auto 0!important;
    font-size:.9rem!important;
    line-height:1.55!important;
    text-wrap:pretty!important;
  }
  .hsd-cta{
    width:auto!important;
    min-height:44px!important;
    margin:22px auto 0!important;
    padding-inline:18px!important;
    border-radius:9px!important;
    font-size:.77rem!important;
  }
  body.home .hsd-demo,
  body.front-page .hsd-demo{
    width:100%!important;
    max-width:390px!important;
    margin:0 auto!important;
    overflow:hidden!important;
    border:1px solid var(--border-soft)!important;
    border-radius:13px!important;
    background:var(--bg-card)!important;
    box-shadow:0 18px 50px -34px rgba(0,0,0,.9)!important;
  }
  body.home .hsd-demo histriphy-studio-demo,
  body.front-page .hsd-demo histriphy-studio-demo{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
  }
  body.home .hsd-feature-list,
  body.front-page .hsd-feature-list{
    width:100%!important;
    max-width:390px!important;
    display:flex!important;
    grid-template-columns:none!important;
    gap:7px!important;
    margin:12px auto 0!important;
    padding:0 0 3px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    overflow-x:auto!important;
    scroll-snap-type:x proximity!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body.home .hsd-feature-list::-webkit-scrollbar,
  body.front-page .hsd-feature-list::-webkit-scrollbar{display:none!important}
  body.home .hsd-feature-list li,
  body.front-page .hsd-feature-list li{
    flex:0 0 auto!important;
    min-width:0!important;
    min-height:36px!important;
    display:flex!important;
    align-items:center!important;
    padding:0 12px!important;
    border:1px solid var(--border-soft)!important;
    border-radius:999px!important;
    background:var(--bg-card)!important;
    scroll-snap-align:start!important;
  }
  body.home .hsd-feature-list li:first-child,
  body.front-page .hsd-feature-list li:first-child{
    border-color:color-mix(in srgb,var(--gold-ink) 45%,var(--border))!important;
    background:color-mix(in srgb,var(--gold-ink) 7%,var(--bg-card))!important;
  }
  body.home .hsd-feature-list b,
  body.front-page .hsd-feature-list b{
    margin:0!important;
    font-size:.68rem!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  body.home .hsd-feature-list span,
  body.front-page .hsd-feature-list span{display:none!important}

  /* Main four-feature carousel: remove the dashboard-like card on phones. */
  .hp-feature-cycle{
    padding:78px 0 82px!important;
    background:var(--bg)!important;
  }
  .hp-feature-cycle-head{
    max-width:370px!important;
    margin:0 auto 30px!important;
    text-align:center!important;
  }
  .hp-feature-cycle-head h2{
    max-width:13ch!important;
    margin-inline:auto!important;
    font-size:clamp(2rem,9vw,2.45rem)!important;
    line-height:1.02!important;
    letter-spacing:-.05em!important;
  }
  .hp-feature-cycle-head p{
    max-width:31ch!important;
    margin:11px auto 0!important;
    font-size:.9rem!important;
    line-height:1.5!important;
  }
  .hp-feature-cycle-shell{
    width:100%!important;
    max-width:390px!important;
    margin-inline:auto!important;
    padding:0!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .hp-feature-cycle-controls{
    position:static!important;
    width:max-content!important;
    min-height:34px!important;
    margin:0 0 18px auto!important;
    padding:3px 5px!important;
    gap:4px!important;
    border:1px solid var(--border-soft)!important;
    border-radius:999px!important;
    background:var(--bg-card)!important;
  }
  .hp-feature-arrow{width:28px!important;height:28px!important;border-radius:50%!important}
  .hp-feature-counter{min-width:42px!important;font-size:.72rem!important}
  .hp-feature-cycle-stage{display:flex!important;flex-direction:column!important;gap:16px!important}
  .hp-feature-cycle-nav{display:block!important;margin:0!important;order:1!important}
  .hp-feature-cycle-item{display:none!important}
  .hp-feature-cycle-item.is-active{
    width:100%!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr)!important;
    gap:12px!important;
    align-items:center!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    opacity:1!important;
    transform:none!important;
  }
  .hp-feature-icon{
    width:40px!important;
    height:40px!important;
    border-radius:11px!important;
    background:color-mix(in srgb,var(--gold-ink) 9%,var(--bg-card))!important;
  }
  .hp-feature-icon svg{width:20px!important;height:20px!important}
  .hp-feature-cycle-item strong{
    margin:0 0 3px!important;
    font-size:1.08rem!important;
    line-height:1.15!important;
    letter-spacing:-.02em!important;
  }
  .hp-feature-cycle-item small{
    max-width:34ch!important;
    font-size:.78rem!important;
    line-height:1.4!important;
  }
  .hp-feature-cycle-panels{
    width:100%!important;
    max-width:390px!important;
    aspect-ratio:1/1!important;
    order:2!important;
    overflow:hidden!important;
    border:1px solid var(--border-soft)!important;
    border-radius:14px!important;
    background:var(--bg-card)!important;
    box-shadow:0 24px 70px -48px rgba(0,0,0,.95)!important;
  }
  .hp-feature-cycle-panel{background:transparent!important}
  .hp-feature-cycle-panel img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
  }
  .hp-feature-cycle-panel.is-entering{animation:hpFeatureMobileIn .42s cubic-bezier(.22,1,.36,1) both!important}
  @keyframes hpFeatureMobileIn{
    from{opacity:.05;transform:scale(.985)}
    to{opacity:1;transform:none}
  }

  /* Coming soon: keep the user's artwork large, then repeat the core message in
     live text so the desktop artwork never has to carry tiny phone typography. */
  .hp-coming-soon-visual{
    padding:68px 0 70px!important;
    background:var(--bg-deep)!important;
  }
  .hp-coming-soon-visual img{
    width:100%!important;
    height:auto!important;
    display:block!important;
    border:1px solid var(--border-soft)!important;
    border-radius:14px!important;
    background:transparent!important;
  }
  .hp-coming-soon-mobile-copy{
    display:block!important;
    max-width:34ch!important;
    margin:22px auto 0!important;
    text-align:center!important;
  }
  .hp-coming-soon-mobile-copy strong{
    display:block!important;
    color:var(--ink)!important;
    font-size:1.32rem!important;
    line-height:1.15!important;
    letter-spacing:-.025em!important;
  }
  .hp-coming-soon-mobile-copy span{
    display:block!important;
    margin-top:7px!important;
    color:var(--ink-dim)!important;
    font-size:.82rem!important;
    line-height:1.5!important;
  }

  /* Final community CTA: contained, not two giant edge-to-edge bars. */
  .section.hp-community{padding:62px 0 70px!important;background:var(--bg)!important}
  .hp-community-inner{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:24px!important;
    text-align:center!important;
  }
  .hp-community-inner>div:first-child{max-width:360px!important}
  .hp-community-inner h2{
    margin:0!important;
    font-size:clamp(1.8rem,8vw,2.1rem)!important;
    line-height:1.05!important;
    letter-spacing:-.045em!important;
  }
  .hp-community-inner .hp-lede{
    max-width:34ch!important;
    margin:10px auto 0!important;
    font-size:.88rem!important;
    line-height:1.52!important;
  }
  .hp-community-actions{
    width:100%!important;
    max-width:320px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    justify-content:center!important;
  }
  .hp-community-actions .button{
    width:100%!important;
    min-height:44px!important;
    border-radius:9px!important;
    font-size:.75rem!important;
  }
}

@media (max-width:360px){
  body.home .section-inner,
  body.front-page .section-inner,
  body.home .hp-hero-product .hp-hero-inner,
  body.front-page .hp-hero-product .hp-hero-inner,
  body.home .hsd-section .section-inner,
  body.front-page .hsd-section .section-inner,
  body.home .hp-feature-cycle .section-inner,
  body.front-page .hp-feature-cycle .section-inner,
  body.home .hp-coming-soon-visual .section-inner,
  body.front-page .hp-coming-soon-visual .section-inner,
  body.home .hp-community .section-inner,
  body.front-page .hp-community .section-inner{width:calc(100% - 28px)!important}

  .hp-hero-product .hp-h1{font-size:2.08rem!important}
  .hp-hero-product .hp-actions{gap:8px 12px!important}
  .hp-hero-product .hp-actions .button{padding-inline:14px!important}
  .hp-formats-strip-inner{padding-inline:14px!important}
  .hp-formats-strip-title strong{display:none!important}
  .hp-feature-cycle-head h2,.hsd-copy h2.hsd-title-lines{font-size:2rem!important}
}

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

/* 20.0.46 · Studio tool slider wrapper. Controls are tablet-only; desktop and
   phone keep their existing presentation. */
.hsd-tool-slider{display:block;min-width:0}
.hsd-tool-arrow{display:none}