/* V28 — Interactive app demo section brand match
   Aligns the immersive owner-app demo to the approved eyebrow and bottom-nav references. */

:root{
  --z28-gold:#a87327;
  --z28-gold-border:#e8d4ae;
  --z28-gold-bg:#f7eedf;
  --z28-tab-text:#667892;
  --z28-tab-bg:rgba(255,255,255,.88);
  --z28-tab-border:#ece6dd;
}

/* Left intro eyebrow */
.z15-overlay .z15-kicker{
  color:var(--z28-gold)!important;
  font-size:clamp(16px,1.18vw,20px)!important;
  font-weight:500!important;
  letter-spacing:.30em!important;
  text-transform:uppercase!important;
  margin:0 0 clamp(26px,3.3vh,36px)!important;
}

/* Bottom destination pills */
.z15-overlay .z15-controls{
  width:min(100%, 930px)!important;
  padding-bottom:clamp(18px,4vh,34px)!important;
}
.z15-overlay .z15-nav{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  width:100%!important;
  border:0!important;
}
.z15-overlay .z15-nav button{
  width:100%!important;
  max-width:none!important;
  min-height:104px!important;
  padding:0 30px!important;
  border-radius:999px!important;
  border:1.5px solid var(--z28-tab-border)!important;
  background:var(--z28-tab-bg)!important;
  color:var(--z28-tab-text)!important;
  box-shadow:0 10px 24px rgba(95,77,41,.05)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
}
.z15-overlay .z15-nav button .z20-nav-icon{
  display:block!important;
  width:28px!important;
  height:28px!important;
  flex:none!important;
  stroke:currentColor!important;
  fill:none!important;
  stroke-width:1.7!important;
}
.z15-overlay .z15-nav button .z16-nav-accent,
.z15-overlay .z15-nav button .z16-nav-description{
  display:none!important;
}
.z15-overlay .z15-nav button .z16-nav-copy{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.z15-overlay .z15-nav button .z16-nav-name{
  color:currentColor!important;
  font-size:clamp(17px,1.28vw,22px)!important;
  line-height:1!important;
  font-weight:560!important;
  letter-spacing:-.02em!important;
}
.z15-overlay .z15-nav button[aria-current="page"]{
  background:var(--z28-gold-bg)!important;
  border-color:var(--z28-gold-border)!important;
  color:var(--z28-gold)!important;
  box-shadow:none!important;
}
.z15-overlay .z15-nav button:hover{
  border-color:#dbc7a2!important;
  background:#fbf8f2!important;
}
.z15-overlay .z15-nav button[aria-current="page"]:hover{
  background:#f8efdf!important;
}

@media (max-width:1200px){
  .z15-overlay .z15-nav{gap:10px!important}
  .z15-overlay .z15-nav button{min-height:88px!important;padding:0 20px!important;gap:10px!important}
  .z15-overlay .z15-nav button .z20-nav-icon{width:24px!important;height:24px!important}
  .z15-overlay .z15-nav button .z16-nav-name{font-size:clamp(15px,1.15vw,19px)!important}
}
@media (max-width:900px){
  .z15-overlay .z15-nav button{min-height:64px!important;padding:0 10px!important}
  .z15-overlay .z15-nav button .z16-nav-name{font-size:14px!important}
}
@media (max-width:750px){
  .z15-overlay .z15-nav{gap:8px!important}
  .z15-overlay .z15-nav button{min-height:50px!important;border-radius:999px!important;padding:0 8px!important}
  .z15-overlay .z15-nav button .z20-nav-icon{display:none!important}
  .z15-overlay .z15-nav button .z16-nav-name{font-size:12px!important}
  .z15-overlay .z15-controls{padding-bottom:16px!important}
}

/* V28.1 acceptance correction: recreate the compact, independent pills
   of the approved reference, never circular cards or joined labels. */
@media (min-width: 901px) {
  .z15-overlay .z15-kicker {
    color:#8F6224!important;
    font-size:clamp(14px,1.06vw,17px)!important;
    letter-spacing:.30em!important;
    font-weight:500!important;
    margin-bottom:clamp(30px,4vh,43px)!important;
  }
  .z15-overlay .z15-controls {
    width:min(100%, 850px)!important;
    padding-bottom:clamp(22px,4vh,42px)!important;
  }
  .z15-overlay .z15-nav {
    gap:12px!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  .z15-overlay .z15-nav button {
    box-sizing:border-box!important;
    min-height:74px!important;
    height:74px!important;
    padding:0 14px!important;
    gap:11px!important;
    border-radius:999px!important;
    border-width:1px!important;
    white-space:nowrap!important;
  }
  .z15-overlay .z15-nav button .z20-nav-icon {
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    display:block!important;
  }
  .z15-overlay .z15-nav button .z16-nav-copy,
  .z15-overlay .z15-nav button .z16-nav-name {
    display:inline-flex!important;
    align-items:center!important;
    white-space:nowrap!important;
    min-width:0!important;
  }
  .z15-overlay .z15-nav button .z16-nav-name {
    font-size:clamp(14px,1.05vw,17px)!important;
    letter-spacing:-.02em!important;
    line-height:1.2!important;
  }
}
@media (min-width:901px) and (max-width:1200px) {
  .z15-overlay .z15-nav {gap:7px!important;}
  .z15-overlay .z15-nav button{height:60px!important;min-height:60px!important;gap:6px!important;padding:0 7px!important;}
  .z15-overlay .z15-nav button .z20-nav-icon{width:19px!important;height:19px!important;min-width:19px!important;}
  .z15-overlay .z15-nav button .z16-nav-name{font-size:13px!important;}
}

/* V28.2 final correction — match approved large-phone overlay composition */
@media (min-width: 1001px) {
  .z15-overlay .z15-topbar{
    height:84px!important;
    min-height:84px!important;
    padding:0 clamp(24px,3.2vw,56px)!important;
    background:transparent!important;
    border-bottom:0!important;
  }
  .z15-overlay .z15-close{
    width:52px!important;
    height:52px!important;
    padding:0!important;
    border-radius:50%!important;
    font-size:0!important;
    gap:0!important;
    justify-content:center!important;
    border:0!important;
    background:rgba(255,255,255,.92)!important;
    box-shadow:0 6px 18px rgba(65,50,30,.08)!important;
  }
  .z15-overlay .z15-close span{font-size:24px!important;font-weight:300!important;line-height:1!important;}

  .z15-overlay .z15-main{
    height:calc(100dvh - 84px)!important;
    min-height:0!important;
    max-width:none!important;
    width:100%!important;
    margin:0!important;
    padding:0 clamp(34px,4vw,68px) clamp(26px,4vh,42px)!important;
    display:grid!important;
    grid-template-columns:minmax(0, 1.08fr) minmax(430px, 0.92fr)!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    column-gap:clamp(18px,2.6vw,42px)!important;
    row-gap:0!important;
    align-items:center!important;
    overflow:hidden!important;
  }
  .z15-overlay .z15-intro{
    grid-column:1!important;
    grid-row:1!important;
    align-self:center!important;
    justify-self:start!important;
    max-width:820px!important;
    padding:0 0 clamp(24px,5vh,54px)!important;
    z-index:5!important;
  }
  .z15-overlay .z15-kicker{
    color:#8F6224!important;
    font-size:clamp(14px,1.02vw,17px)!important;
    letter-spacing:.30em!important;
    font-weight:500!important;
    margin:0 0 clamp(26px,4vh,38px)!important;
  }
  .z15-overlay .z15-intro h2{
    max-width:820px!important;
    font-size:clamp(42px,4vw,66px)!important;
    line-height:1.08!important;
    letter-spacing:-.062em!important;
    font-weight:780!important;
    margin:0 0 clamp(28px,4vh,40px)!important;
  }
  .z15-overlay .z15-intro > p:not(.z15-kicker):not(.z15-help){
    font-size:clamp(18px,1.55vw,27px)!important;
    line-height:1.56!important;
    max-width:640px!important;
  }
  .z15-overlay .z15-intro .z15-rule{
    margin:clamp(28px,4.5vh,44px) 0 clamp(26px,4vh,36px)!important;
    max-width:730px!important;
  }
  .z15-overlay .z15-intro .z15-help{
    font-size:clamp(14px,1.18vw,20px)!important;
    line-height:1.58!important;
    max-width:700px!important;
  }

  .z15-overlay .z15-phone-wrap{
    grid-column:2!important;
    grid-row:1 / span 2!important;
    justify-self:center!important;
    align-self:center!important;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    min-height:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:visible!important;
    transform:translateX(-1.3vw)!important;
    position:relative!important;
    z-index:4!important;
  }
  .z15-overlay .z15-phone{
    width:auto!important;
    max-width:none!important;
    height:min(calc(100dvh - 116px), 870px)!important;
    max-height:none!important;
    aspect-ratio:863/1822!important;
    flex:0 0 auto!important;
    position:relative!important;
    transform:none!important;
    filter:drop-shadow(0 14px 20px rgba(37,30,22,.16))!important;
  }
  .z15-overlay .z15-phone img[data-z15-screen]{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }

  .z15-overlay .z15-controls{
    grid-column:1!important;
    grid-row:2!important;
    align-self:end!important;
    justify-self:start!important;
    width:min(100%, 890px)!important;
    max-width:none!important;
    padding-bottom:0!important;
    z-index:6!important;
  }
  .z15-overlay .z15-control-title,
  .z15-overlay .z15-hint{display:none!important;}
  .z15-overlay .z15-nav{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:14px!important;
    width:100%!important;
  }
  .z15-overlay .z15-nav button{
    min-width:0!important;
    width:100%!important;
    height:74px!important;
    min-height:74px!important;
    padding:0 18px!important;
    gap:10px!important;
    border-radius:999px!important;
    border:1px solid #ece3d6!important;
    background:rgba(255,255,255,.92)!important;
    color:#6e7f98!important;
    box-shadow:0 10px 24px rgba(95,77,41,.05)!important;
    justify-content:center!important;
  }
  .z15-overlay .z15-nav button .z20-nav-icon{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    display:block!important;
    stroke:currentColor!important;
  }
  .z15-overlay .z15-nav button .z16-nav-copy{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:0!important;
  }
  .z15-overlay .z15-nav button .z16-nav-name{
    display:inline-flex!important;
    align-items:center!important;
    white-space:nowrap!important;
    font-size:clamp(14px,1.05vw,17px)!important;
    line-height:1.1!important;
    font-weight:560!important;
    letter-spacing:-.02em!important;
    color:currentColor!important;
  }
  .z15-overlay .z15-nav button[aria-current="page"]{
    background:#fbf2e2!important;
    border-color:#e7d2ad!important;
    color:#a87327!important;
    box-shadow:none!important;
  }
}

@media (min-width:1001px) and (max-width:1340px){
  .z15-overlay .z15-main{
    grid-template-columns:minmax(0,1.12fr) minmax(390px,.88fr)!important;
    padding:0 clamp(22px,2.6vw,36px) 24px!important;
    column-gap:18px!important;
  }
  .z15-overlay .z15-intro h2{font-size:clamp(36px,3.35vw,52px)!important;}
  .z15-overlay .z15-phone-wrap{transform:translateX(-.4vw)!important;}
  .z15-overlay .z15-phone{height:min(calc(100dvh - 126px), 760px)!important;}
  .z15-overlay .z15-nav{gap:10px!important;}
  .z15-overlay .z15-nav button{height:68px!important;min-height:68px!important;padding:0 12px!important;gap:8px!important;}
  .z15-overlay .z15-nav button .z20-nav-icon{width:22px!important;height:22px!important;min-width:22px!important;}
  .z15-overlay .z15-nav button .z16-nav-name{font-size:clamp(13px,.95vw,15px)!important;}
}