/* v243 — responsive perfection layer.
   Intent: preserve desktop content/design; only reflow, stack, and vertically recompose
   at smaller widths. This stylesheet loads LAST so it can safely neutralize legacy
   prototype overrides without changing desktop presentation. */

html,body{max-width:100%;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto}
*,*::before,*::after{box-sizing:border-box}

/* Never allow a content child to force a grid/flex container wider than the viewport. */
main section *, .hero *, .footer *{min-width:0}

/* LAPTOP / LANDSCAPE TABLET — tighten only; preserve hierarchy. */
@media (max-width:1199px){
  .wrap,.nav>.wrap,.hero>.wrap,.heroV10>.wrap,.pageHero>.wrap,.secondaryHero>.wrap,
  .algoSplitHero>.wrap,.whyV172Hero>.wrap,.demoHero>.wrap,.cta>.wrap,.footer>.wrap{
    max-width:100%!important;
  }
  .heroArt,.secondaryHeroArt,.algoHeroArtV161,.bsHeroImageWrap,
  .fragmentViz,.brandViz,.manageScaleVizV105,.topology,.invisibleFlow,.networkIntelViz,
  .marketArt,.storyArt,.diagramCanvas,.signalPlane,.bsNetworkStage,.flywheel,.flywheelImage,
  .spotlightVisual,.archStack{
    max-width:100%!important;
  }
}

/* TABLET — preserve every section and every label, but stack horizontal compositions. */
@media (max-width:980px){
  :root{--edge-gap:28px!important;--site-gutter:28px!important}

  .wrap,.nav>.wrap,.hero>.wrap,.heroV10>.wrap,.pageHero>.wrap,.secondaryHero>.wrap,
  .algoSplitHero>.wrap,.whyV172Hero>.wrap,.demoHero>.wrap,.cta>.wrap,.footer>.wrap{
    width:100%!important;
    padding-left:28px!important;
    padding-right:28px!important;
  }

  /* Generic two-column editorial layouts */
  .heroGrid,.heroV10 .heroGrid,.secondaryHeroGrid,.algoSplitHero .heroGridV161,
  .whyV172Hero .grid,.demoHeroGrid,.v172-head,.ddExpansion,.bsOutcomes,.smaProofGrid,
  .algoInfraHead,.algoStrategyGrid,.algoCredGrid,.algoValidation .wrap,.storyGrid,
  .networkIntelGrid,.scaleGrid,.invisibleGrid,.collapseStory,.marketplaceGrid,
  .networkFirstGrid,.featureSplit,.problemGrid,.miGrid,.whyManifesto,.strategyBand,
  .quoteGrid,.caseProofV153,.validationV153 .quoteGrid,.sectionHead{
    grid-template-columns:minmax(0,1fr)!important;
    gap:30px!important;
  }

  .heroCopy,.heroArt,.secondaryHeroArt,.algoHeroCopyV161,.algoHeroArtV161,
  .whyV172Hero .grid>*,.demoHeroGrid>*{
    width:100%!important;max-width:100%!important;
    margin-left:0!important;margin-right:0!important;
  }

  /* Multi-card systems remain readable rather than squeezed. */
  .productCards,.cardGrid3,.cardGrid4,.detailGrid,.pageCards,.whyMoat,.whyMetricsV172,
  .proofGrid,.productionGrid,.algoMiniStats,.algoProdStats,.strategyPrinciples{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  /* All approved horizontal workflow diagrams become vertical. */
  .workflow,.storySpineSteps,.ddSequence,.smaFlow,.signalPlaneV206{
    grid-template-columns:minmax(0,1fr)!important;
  }

  .ddSequence{gap:0!important}
  .ddArrow{height:48px!important;transform:none!important}
  .ddArrow span{transform:rotate(90deg)!important}

  .signalPlaneV206{
    display:flex!important;flex-direction:column!important;gap:0!important;
    overflow:visible!important;
  }
  .signalPlaneV206 .signalColumnV206,
  .signalPlaneV206 .signalOutcomeV206{width:100%!important;max-width:none!important}
  .signalPlaneV206 .signalConnectorV206{
    width:2px!important;height:42px!important;min-height:42px!important;
    margin:0 auto!important;transform:none!important;
  }
  .signalPlaneV206 .signalConnectorV206.arrow b{transform:rotate(90deg)!important}

  .smaFlow{gap:12px!important}
  .smaFlow:before{
    left:33px!important;right:auto!important;top:44px!important;bottom:44px!important;
    width:1px!important;height:auto!important;
  }
  .smaStep{min-height:0!important;padding:26px 24px 26px 68px!important}
  .smaStep .dot{left:20px!important;top:26px!important}

  /* Buy-Side Opportunity: keep exact story, but vertical on tablet/phone. */
  .bsOpportunityFlow{
    grid-template-columns:minmax(0,1fr)!important;
    gap:18px!important;
    max-width:640px!important;
    margin-left:auto!important;margin-right:auto!important;
  }
  .bsFlowArrow{
    width:58px!important;height:44px!important;margin:0 auto!important;
    transform:rotate(90deg)!important;
  }
  .bsOpportunityCoreCircle{width:190px!important;height:190px!important}
}

/* PORTRAIT TABLET / LARGE PHONE — swap complex graphics to approved vertical representations. */
@media (max-width:820px){
  :root{--edge-gap:22px!important;--site-gutter:22px!important}

  .wrap,.nav>.wrap,.hero>.wrap,.heroV10>.wrap,.pageHero>.wrap,.secondaryHero>.wrap,
  .algoSplitHero>.wrap,.whyV172Hero>.wrap,.demoHero>.wrap,.cta>.wrap,.footer>.wrap{
    padding-left:22px!important;padding-right:22px!important;
  }

  /* Hero compositions become copy first, graphic second. */
  .heroGrid,.heroV10 .heroGrid,.secondaryHeroGrid,.algoSplitHero .heroGridV161,
  .whyV172Hero .grid,.demoHeroGrid,.dealerDirectHeroGridV217{
    grid-template-columns:minmax(0,1fr)!important;
    gap:28px!important;
  }

  /* Hide desktop-only horizontal artwork only where a dedicated vertical equivalent exists. */
  .dealerDirectTopologyV217>svg,
  .secondaryHeroArt>svg,
  .algoHeroArtV161>svg,
  .heroV10 .heroArt.heroPlainArt>svg,
  .bsHeroImageWrap>img,
  .bsHeroImageWrap>.bsHeroMotion,
  .bsNetworkStage>svg{
    display:none!important;
  }

  .ddMobileFlowV224,.bsHeroMobileV224,.bsNetworkMobileV224,.mobileHeroFlow{
    display:flex!important;
  }

  .ddMobileFlowV224,.bsHeroMobileV224,.bsNetworkMobileV224{
    flex-direction:column!important;
    width:100%!important;max-width:520px!important;
    margin-left:auto!important;margin-right:auto!important;
  }

  .mobileHeroFlow{
    flex-direction:column!important;
    align-items:stretch!important;
    width:100%!important;max-width:100%!important;
    gap:12px!important;
  }

  .mobileHeroFlow .mhCluster{grid-template-columns:minmax(0,1fr)!important}
  .mobileHeroFlow .mhCard{width:100%!important}
  .mobileHeroFlow .mhCore{
    width:min(230px,72vw)!important;max-width:230px!important;
    margin-left:auto!important;margin-right:auto!important;
  }

  .bsnmParticipants{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .bsnmCore{width:min(250px,72vw)!important}

  /* Cards and proof grids become one column at portrait-tablet size. */
  .productCards,.cardGrid3,.cardGrid4,.detailGrid,.pageCards,.whyMoat,.whyMetricsV172,
  .proofGrid,.productionGrid,.algoMiniStats,.algoProdStats,.strategyPrinciples,
  .smaPillars{
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* Opportunity footer stacks cleanly. */
  .bsOpportunityFoot{grid-template-columns:minmax(0,1fr)!important}
  .bsOpportunityFoot div{
    border-right:0!important;
    border-bottom:1px solid #d9e1e6!important;
    padding:18px 0!important;
  }
  .bsOpportunityFoot div:last-child{border-bottom:0!important}

  /* Footer and CTA regions */
  .footerGrid{grid-template-columns:minmax(0,1fr)!important;gap:30px!important}
  .footBrand{grid-column:auto!important}
  .copyright{flex-direction:column!important;gap:8px!important}
}

/* PHONE — preserve copy exactly; improve fit, tap targets, and spacing only. */
@media (max-width:700px){
  :root{--edge-gap:20px!important;--site-gutter:20px!important}

  .wrap,.nav>.wrap,.hero>.wrap,.heroV10>.wrap,.pageHero>.wrap,.secondaryHero>.wrap,
  .algoSplitHero>.wrap,.whyV172Hero>.wrap,.demoHero>.wrap,.cta>.wrap,.footer>.wrap{
    padding-left:20px!important;padding-right:20px!important;
  }

  .heroV10 .heroGrid,.secondaryHeroGrid,.algoSplitHero .heroGridV161,
  .whyV172Hero .grid,.demoHeroGrid{
    padding-top:32px!important;padding-bottom:38px!important;gap:24px!important;
  }

  .heroV10 h1,.secondaryHero h1,.algoSplitHero h1,.whyV172Hero h1,.demoHero h1{
    font-size:clamp(36px,10vw,44px)!important;
    line-height:1.035!important;
    letter-spacing:-.025em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  .heroV10 .heroCopy>p,.secondaryHero p,.algoHeroCopyV161 p,
  .whyV172Hero p,.demoLead{
    font-size:16px!important;line-height:1.62!important;
  }

  .section,.productSection,.pageIntro,.secondarySectionV153,
  .algoProofEditorial,.algoInfra,.algoStrategyEditorial,.algoCredibility,.algoValidation,
  .v172-section{
    padding-top:52px!important;padding-bottom:52px!important;
  }

  .sectionHead h2,.storyTitle h2,.productHead h2,.storyCopy h2,.networkCopy h2,
  .scaleCopy h2,.capSimpleHead h2,.v172-head h2{
    font-size:clamp(31px,8vw,40px)!important;
    line-height:1.08!important;
  }

  .sectionHead p,.storyCopy p,.productHead p,.networkCopy p,.scaleCopy p,
  .capSimpleHead p,.v172-head p{
    font-size:16px!important;line-height:1.62!important;
  }

  .actions{
    display:flex!important;flex-wrap:wrap!important;
    width:100%!important;gap:10px!important;
  }
  .actions .btn,.actions .productSheetLink{max-width:100%!important}
  .btn,.demo{min-height:46px!important}

  .location>.wrap{
    white-space:normal!important;
    flex-wrap:wrap!important;
    row-gap:4px!important;
  }

  /* Tables/data regions, if present, stay usable without clipping the page. */
  table{max-width:100%}
  .tableWrap,.table-wrap,[class*="tableWrap"],[class*="table-wrap"]{
    width:100%!important;max-width:100%!important;overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }

  .bsOpportunityCard{min-height:0!important;padding:28px 24px!important}
  .bsOpportunityCard h3{font-size:30px!important}
}

/* SMALL PHONE — only spacing/scale; no content removal. */
@media (max-width:430px){
  :root{--edge-gap:18px!important;--site-gutter:18px!important}

  .wrap,.nav>.wrap,.hero>.wrap,.heroV10>.wrap,.pageHero>.wrap,.secondaryHero>.wrap,
  .algoSplitHero>.wrap,.whyV172Hero>.wrap,.demoHero>.wrap,.cta>.wrap,.footer>.wrap{
    padding-left:18px!important;padding-right:18px!important;
  }

  .heroV10 h1,.secondaryHero h1,.algoSplitHero h1,.whyV172Hero h1,.demoHero h1{
    font-size:36px!important;
  }

  .mobileHeroFlow .mhCore{
    width:198px!important;max-width:calc(100vw - 72px)!important;
  }

  .bsnmParticipants{grid-template-columns:minmax(0,1fr)!important}
  .ddmSignals{grid-template-columns:minmax(0,1fr)!important}

  .actions{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .actions .btn,.actions .productSheetLink{
    width:100%!important;
    text-align:center!important;
  }
}

/* Accessibility: motion respects operating-system preference everywhere. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}


/* v244 — authoritative mobile navigation.
   This deliberately overrides all legacy desktop/current-state nav rules on small screens. */
@media (max-width:1100px){
  .nav{overflow:visible!important}
  .navin{position:relative!important;height:72px!important;display:flex!important;align-items:center!important}
  .brand{min-width:0!important;max-width:calc(100% - 64px)!important}
  .brand img{width:185px!important;max-width:56vw!important;height:auto!important}

  .mobilebtn{
    display:grid!important;place-items:center!important;flex:0 0 46px!important;
    width:46px!important;height:46px!important;margin-left:auto!important;padding:0!important;
    background:#071d33!important;color:#fff!important;
    border:2px solid #d6a94d!important;border-radius:11px!important;
    font:700 30px/1 Arial,sans-serif!important;cursor:pointer!important;
    position:relative!important;z-index:1003!important;
  }

  .navlinks{
    display:none!important;
    position:fixed!important;
    top:var(--tm-fixed-nav-height,72px)!important;
    left:0!important;right:0!important;bottom:auto!important;
    width:100vw!important;max-width:none!important;
    height:auto!important;max-height:calc(100dvh - var(--tm-fixed-nav-height,72px))!important;
    margin:0!important;padding:10px 22px 24px!important;
    flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;
    gap:0!important;
    background:#071d33!important;color:#fff!important;
    border-top:1px solid rgba(255,255,255,.12)!important;
    box-shadow:0 18px 36px rgba(0,0,0,.32)!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    z-index:1002!important;
  }
  .navlinks.is-open,.navlinks.open{display:flex!important}

  .navlinks>.navitem,
  .navlinks>a:not(.demo){
    display:block!important;position:relative!important;
    width:100%!important;height:auto!important;min-height:0!important;
    margin:0!important;padding:0!important;
  }

  .navlinks>.navitem>a,
  .navlinks>a:not(.demo){
    display:flex!important;align-items:center!important;justify-content:flex-start!important;
    width:100%!important;height:auto!important;min-height:48px!important;
    margin:0!important;padding:13px 2px!important;
    border:0!important;border-bottom:1px solid rgba(255,255,255,.10)!important;
    color:#fff!important;background:transparent!important;
    font-size:15px!important;font-weight:750!important;line-height:1.35!important;
    white-space:normal!important;text-decoration:none!important;
  }

  /* Kill the desktop active underline pseudo-elements that were crossing the mobile menu. */
  .navlinks>.navitem>a::after,
  .navlinks>a:not(.demo)::after,
  .navitem.current>a::after,
  .navlinks>a.current::after{
    content:none!important;display:none!important;
  }

  .navitem .navTri{display:none!important}
  .navitem .drop{
    display:block!important;position:static!important;top:auto!important;left:auto!important;right:auto!important;
    width:100%!important;height:auto!important;margin:0!important;padding:5px 0 9px 14px!important;
    background:transparent!important;border:0!important;box-shadow:none!important;color:#fff!important;
  }
  .navitem .drop a{
    display:flex!important;align-items:center!important;
    width:100%!important;min-height:42px!important;margin:0!important;padding:9px 12px!important;
    background:transparent!important;color:#cbd6df!important;
    border:0!important;border-left:1px solid rgba(214,169,77,.55)!important;
    font-size:14px!important;font-weight:600!important;line-height:1.35!important;
    white-space:normal!important;text-decoration:none!important;
  }
  .navitem .drop a.current{color:#e8c98f!important;background:rgba(255,255,255,.035)!important}

  .navlinks>.demo{
    display:flex!important;align-items:center!important;justify-content:center!important;
    width:100%!important;height:auto!important;min-height:50px!important;
    margin:14px 0 0!important;padding:13px 18px!important;
    background:#84242b!important;color:#fff!important;border:1px solid #84242b!important;
    font-size:15px!important;font-weight:850!important;line-height:1.25!important;
    text-align:center!important;white-space:normal!important;
  }
  .navlinks>.demo::after{content:none!important;display:none!important}

  body.mobile-nav-open{overflow:hidden!important;touch-action:none}
}
@media (max-width:430px){
  .navlinks{padding-left:18px!important;padding-right:18px!important}
  .brand img{width:176px!important;max-width:58vw!important}
}