/* Final mobile architecture highlight correction — 2026-08-03
   Fixes the accidental display of multiple step headings and keeps the sticky scene inside short phone viewports. */
@media (max-width:760px){
  /* Keep the complete architecture heading visible; do not drift it behind the fixed header. */
  .arch-sticky > .container{
    transform:none!important;
    width:min(100% - 18px,680px)!important;
  }
  .arch-sticky .section-head{
    display:block!important;
    opacity:1!important;
    transform:none!important;
    margin:0 0 7px!important;
    text-align:center!important;
  }
  .arch-sticky .section-head h2{
    font-size:clamp(1.28rem,6.4vw,1.78rem)!important;
    line-height:1.04!important;
    letter-spacing:-.04em!important;
  }
  .arch-sticky .section-head .eyebrow{
    margin-bottom:4px!important;
    font-size:7px!important;
  }
  .arch-sticky .section-head .lede{
    margin:6px auto 0!important;
    font-size:.61rem!important;
    line-height:1.28!important;
    max-width:48ch!important;
  }

  .arch-stage{
    padding:10px 8px 9px!important;
    border-radius:18px!important;
  }

  /* Critical fix: inactive node headings must remain hidden. */
  .arch-detail--highlight .step-copy{
    display:none!important;
  }
  .arch-detail--highlight .step-copy.active{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    animation:copyIn .38s var(--ease)!important;
  }

  .arch-section .arch-detail.arch-detail--highlight{
    display:block!important;
    width:100%!important;
    height:112px!important;
    min-height:112px!important;
    max-height:112px!important;
    margin:0 0 6px!important;
    padding:11px 12px!important;
    overflow:hidden!important;
    border-radius:15px!important;
  }
  .arch-detail--highlight .arch-detail-label{
    display:none!important;
  }
  .arch-detail--highlight .arch-highlight-content{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    gap:8px!important;
    overflow:hidden!important;
  }
  .arch-detail--highlight .step-copy h3{
    margin:0!important;
    max-width:100%!important;
    font-size:clamp(1.02rem,5.25vw,1.32rem)!important;
    line-height:1.08!important;
    text-wrap:balance!important;
    overflow-wrap:normal!important;
  }
  .architecture-details-cta{
    display:inline-flex!important;
    min-height:27px!important;
    padding:6px 10px!important;
    font-size:.54rem!important;
    line-height:1!important;
    letter-spacing:.055em!important;
    white-space:nowrap!important;
  }

  /* Reserve only the space that remains after the heading and highlight card. */
  .arch-section .flow-zone{
    height:calc(100svh - var(--header) - 198px)!important;
    min-height:246px!important;
    max-height:330px!important;
  }
  .arch-section .flow-row{
    inset:2px 24px!important;
    left:24px!important;
    right:24px!important;
    top:2px!important;
    bottom:2px!important;
    grid-template-rows:repeat(5,minmax(0,1fr))!important;
    gap:5px!important;
  }
  .arch-section .flow-node{
    min-height:0!important;
    height:auto!important;
    padding:5px 10px!important;
    border-radius:13px!important;
    gap:10px!important;
  }
  .arch-section .flow-node svg{
    width:19px!important;
    height:19px!important;
    flex:0 0 19px!important;
  }
  .arch-section .flow-node span{
    min-width:0!important;
    font-size:clamp(6.8px,2vw,7.8px)!important;
    line-height:1.18!important;
    letter-spacing:.05em!important;
  }
}

@media (max-width:760px) and (max-height:680px){
  .arch-sticky{padding-top:3px!important;padding-bottom:3px!important}
  .arch-sticky .section-head .eyebrow{display:none!important}
  .arch-sticky .section-head h2{font-size:1.2rem!important;line-height:1.02!important}
  .arch-sticky .section-head .lede{margin-top:4px!important;font-size:.54rem!important}
  .arch-sticky .section-head .architecture-subcopy{display:none!important}
  .arch-section .arch-detail.arch-detail--highlight{
    height:96px!important;
    min-height:96px!important;
    max-height:96px!important;
    padding:9px 10px!important;
    margin-bottom:4px!important;
  }
  .arch-detail--highlight .step-copy h3{font-size:.98rem!important;line-height:1.06!important}
  .architecture-details-cta{min-height:24px!important;padding:5px 9px!important;font-size:.5rem!important}
  .arch-section .flow-zone{
    height:calc(100svh - var(--header) - 154px)!important;
    min-height:230px!important;
    max-height:285px!important;
  }
  .arch-section .flow-row{left:20px!important;right:20px!important;gap:4px!important}
  .arch-section .flow-node{padding:4px 9px!important}
  .arch-section .flow-node svg{width:17px!important;height:17px!important;flex-basis:17px!important}
  .arch-section .flow-node span{font-size:6.5px!important}
}