/* Final mobile-first editorial and diagram polish. */

.hero-mobile-break{display:none}
.hero h1,
.section-heading h2,
.figure-claim-title{
  word-break:auto-phrase;
}
section[id]{scroll-margin-top:calc(var(--header-h) + 18px)}

/* Do not spend battery animating large illustrations outside the viewport. */
.js-animate .motion-managed *,
.js-animate .motion-managed *::before,
.js-animate .motion-managed *::after{
  animation-play-state:paused!important;
}
.js-animate .motion-managed.is-visual-active *,
.js-animate .motion-managed.is-visual-active *::before,
.js-animate .motion-managed.is-visual-active *::after{
  animation-play-state:running!important;
}

/* Evidence wording now carries meaning, so it must read like body copy. */
.lab-outcomes span{letter-spacing:.01em}

/* Optional application links and editorial links remain easy to tap. */
.agent-answer a,
.atlas-feature a,
.editorial-inner a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
}

/* Desktop reading measure: keep the long home thesis on one calm, article-like axis.
   Mobile retains its existing composition below 820px. */
@media (min-width:821px){
  /* Prose stays calm at 700px; illustrated diagram sections keep more canvas room. */
  main>section>.shell{
    width:min(calc(100% - 64px),700px);
  }
  main>section.market-map-section>.shell,
  main>section.mechanism>.shell,
  main>section.fx-hub>.shell,
  main>section.mm-quote-section>.shell,
  main>section.stack>.shell,
  main>section.adoption-roadmap>.shell,
  main>section.price-formation>.shell,
  main>section.agentic>.shell,
  main>section.inventory-bridge>.shell,
  main>section.speed-market-engine>.shell,
  main>section.speed-public-deck>.shell,
  main>section.evidence>.shell{
    width:min(calc(100% - 64px),1080px);
  }
  .hero-grid{
    grid-template-columns:1fr;
    grid-template-areas:"head" "visual" "details";
    gap:38px;
  }
  .hero-head,.hero-details{max-width:700px}
  .hero-details{padding-top:0}
  .hero h1{max-width:700px;font-size:clamp(54px,5.1vw,68px)}
  .hero-visual{width:100%;margin-inline:auto}
  .split-heading{
    grid-template-columns:1fr;
    gap:18px;
    align-items:start;
  }
  .split-heading>p{max-width:700px}
  .section-heading h2{font-size:clamp(38px,3.7vw,50px)}

  /* A 700px desktop column needs stacked captions, not a squeezed desktop row. */
  .diagram-claim{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:9px!important;
    min-height:0!important;
    padding:18px 20px!important;
  }
  .diagram-claim>div:first-child>.figure-claim-title{max-width:650px}
  .diagram-claim .figure-claim-note{max-width:620px;text-align:left!important}

  /* Quote keeps the desktop six-stage loop, but gives each stage usable width. */
  .mm-story-machine{
    gap:45px 28px;
    padding:38px 24px 50px;
  }
  .mm-story-stage{padding:19px 12px 22px}
  .mm-story-reference::after,.mm-story-adjust::after{right:-30px}
  .mm-story-fill::after,.mm-story-inventory::after{left:-30px}
  .mm-story-quotes{
    grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);
    gap:4px;
  }
  .mm-story-quotes>div{padding-inline:5px}
  .mm-story-quotes strong{font-size:15px}
  .mm-market-layer{padding-inline:20px}
  .mm-market-layer-flow{grid-template-columns:1.1fr 24px .9fr 24px 1.1fr;gap:7px}

  /* x402's desktop switchyard originally assumes a 1200px canvas. */
  .protocol-rooftop{
    grid-template-columns:150px minmax(260px,1fr) 150px;
    gap:10px;
    padding-inline:18px;
  }
  .routing-machine-floor{
    grid-template-columns:minmax(125px,.8fr) 22px minmax(190px,1fr) 22px minmax(130px,.9fr);
    gap:7px;
    padding-inline:16px;
  }
  .tower-rail{width:300px}

  /* The roadmap becomes a true narrow-desktop timeline instead of overlapping
     1200px absolute labels on a 700px canvas. */
  .expedition-scene{
    height:1480px;
    background:linear-gradient(180deg,#fbfcff,#f2f6fc);
  }
  .expedition-landscape{display:none}
  .expedition-scene::after{
    content:"";
    position:absolute;
    top:78px;
    bottom:168px;
    left:50%;
    z-index:2;
    width:4px;
    transform:translateX(-50%);
    border-radius:999px;
    background:linear-gradient(var(--blue),#6e91e8 45%,#9aa9c3 72%,#c2cad8);
    box-shadow:0 0 0 6px rgba(23,92,255,.045);
  }
  .expedition-station{
    width:270px;
    min-height:138px;
    padding:15px 16px;
    border:1px solid rgba(23,92,255,.13);
    border-radius:17px;
    background:rgba(255,255,255,.96);
    box-shadow:0 14px 34px rgba(23,40,72,.08);
    text-shadow:none;
  }
  .expedition-station::before{display:none}
  .expedition-station>span{font-size:8px}
  .expedition-station h3{font-size:15px}
  .expedition-station p{font-size:9px}
  .expedition-station>small{font-size:8px}
  .station-beacon{top:18px;width:38px;height:38px}
  .station-beacon>i{display:none}
  .station-01,.station-03,.station-05,.station-07{left:4%}
  .station-02,.station-04,.station-06{right:4%;left:auto}
  .station-01{top:7%}.station-02{top:19%}.station-03{top:31%}.station-04{top:43%}
  .station-05{top:55%}.station-06{top:67%}.station-07{top:79%}
  .station-01 .station-beacon,.station-03 .station-beacon,.station-05 .station-beacon,.station-07 .station-beacon{right:-59px;left:auto}
  .station-02 .station-beacon,.station-04 .station-beacon,.station-06 .station-beacon{left:-59px}
  .expedition-current-marker{
    top:22px;
    left:50%;
    width:300px;
    transform:translateX(-50%);
  }
  .expedition-gate{width:210px}
  .expedition-gate-one{top:28%;left:50%;transform:translateX(-50%)}
  .expedition-gate-two{top:64%;left:50%;transform:translateX(-50%)}
  .expedition-destination{
    top:auto;
    right:auto;
    bottom:22px;
    left:50%;
    width:350px;
    transform:translateX(-50%);
  }
  .expedition-destination>p{font-size:9px}

  .reading-route{grid-template-columns:1fr}
  .reading-route a{min-height:0}
  .atlas-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .editorial-inner{grid-template-columns:1fr;gap:30px}
}

@media (max-width:820px){
  /* Quote: keep all six stages visible; no hidden horizontal interaction. */
  .mm-story-rail{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px 13px;
    overflow:visible;
    padding:14px 17px 16px;
  }
  .mm-story-rail li{
    grid-template-columns:25px minmax(0,1fr);
    gap:7px;
  }
  .mm-story-rail li:not(:last-child)::after{
    content:"→";
    top:50%;
    right:-11px;
    width:auto;
    height:auto;
    transform:translateY(-50%);
    color:var(--mm-blue);
    background:none;
    font-size:10px;
  }
  .mm-story-rail li:nth-child(3)::after{
    content:"↓";
    top:auto;
    right:calc(50% - 5px);
    bottom:-12px;
    transform:none;
  }
  .mm-story-rail span{font-size:9.5px}
  .mm-quote-reactor>strong{font-size:13px;line-height:1.35}
  .mm-market-layer-flow{
    grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr);
    gap:3px;
  }
  .mm-market-layer-flow>i{
    min-height:0;
    transform:none;
    font-size:13px;
  }
  .mm-market-layer-flow>div{
    min-height:128px;
    padding:11px 8px;
  }
  .mm-market-layer-flow>div>span{font-size:8.5px}
  .mm-market-layer-flow>div>b{font-size:9.2px;line-height:1.45}

  /* Price: buy and sell are simultaneous forces, so compare them side by side. */
  .price-order-balance{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"buy sell" "engine engine";
    gap:10px 8px;
  }
  .price-buy-silo{grid-area:buy}
  .price-sell-silo{grid-area:sell}
  .price-matching-engine{grid-area:engine;justify-self:center;width:min(270px,92%)}
  .price-order-silo{border-radius:21px 21px 16px 16px}
  .price-silo-cap{align-items:flex-start;flex-direction:column;gap:2px;padding:12px 10px}
  .price-silo-cap span{font-size:7.5px}
  .price-silo-cap strong{font-size:12px}
  .price-order-silo article{
    grid-template-columns:1fr;
    gap:4px;
    min-height:112px;
    padding:11px 9px;
  }
  .price-order-silo time{
    grid-row:auto;
    justify-self:start;
    min-height:22px;
    padding:4px 6px;
    font-size:7.5px;
  }
  .price-order-silo b{font-size:9.5px;line-height:1.4}
  .price-order-silo small{font-size:8.5px;line-height:1.45}
}

@media (max-width:620px){
  .split-heading>div,.split-heading>p{min-width:0;overflow-wrap:anywhere}
  /* Japanese headings break at authored semantic boundaries. */
  .hero h1 br:first-of-type{display:inline}
  .hero-mobile-break{display:inline}
  .hero h1 em{font-size:.82em;line-height:1.22;letter-spacing:-.05em}
  .section-heading h2{font-size:clamp(30px,8.5vw,34px);line-height:1.25}

  /* Keep the five-role spine visible while the long market cutaway scrolls. */
  .market-mobile-overview ol{display:grid}
  .market-mobile-overview li{font-size:8.3px}

  /* Residual mechanism: raise the text floor without enlarging the machinery. */
  .plant-landmark>small{font-size:9px;line-height:1.45}
  .route-terminal>b{font-size:9.5px}
  .route-terminal>small{font-size:8.3px;line-height:1.35}
  .residual-plant-verdict span{font-size:8.5px}
  .residual-plant-verdict strong{font-size:10.5px;line-height:1.55}

  /* FX: show the route sentence before the long visual, then let the route animate. */
  .fx-inventory-world{display:flex;flex-direction:column}
  .fx-world-head{order:0}
  .fx-world-story{order:1;margin:12px 12px 0}
  .fx-world-scene{order:2}
  .fx-world-principle{order:3}
  .fx-world-story span{font-size:9px}
  .fx-world-story strong{font-size:11px;line-height:1.65}
  .fx-currency-port>strong{font-size:10px;line-height:1.35}
  .fx-currency-port>small{display:none}
  .fx-currency-port>span{font-size:8.5px}
  .fx-lender-station>span{font-size:8.5px}
  .fx-lender-station>strong{font-size:10px}
  .fx-world-principle b{font-size:10.5px}
  .fx-world-principle span{font-size:9px;line-height:1.45}

  /* Ripple stack: public components stay bright; the unproven trunk is dashed. */
  .factory-building>strong{font-size:10px}
  .factory-building>small{max-width:145px;font-size:8.2px;line-height:1.4}
  .factory-boundary strong{font-size:9.5px}
  .factory-gate>small{font-size:8.7px;line-height:1.42}
  .factory-cycle-node>b{font-size:8.5px}
  .factory-cycle-node>small{font-size:7.8px}
  .factory-inventory-reactor>small{font-size:7.5px}
  .factory-trunk{stroke-dasharray:8 11;opacity:.62}
  .factory-packet{animation-play-state:paused!important}

  /* Roadmap: mobile reading order is now present → future, never the reverse. */
  .expedition-scene{height:2150px}
  .expedition-station{
    width:230px;
    padding:10px 12px 12px;
    border:1px solid rgba(23,92,255,.10);
    border-radius:15px;
    background:rgba(255,255,255,.90);
    box-shadow:0 10px 28px rgba(23,40,72,.055);
    text-shadow:none;
  }
  .expedition-station::before{display:none}
  .expedition-station>span{font-size:8.5px}
  .expedition-station h3{margin:5px 0;font-size:14px;line-height:1.35}
  .expedition-station p{font-size:10.2px;line-height:1.58}
  .expedition-station>small{font-size:9.2px;line-height:1.45}
  .station-beacon{top:-24px;left:8px;width:34px;height:34px}
  .station-beacon>b{font-size:9px}
  .station-beacon>i{top:39px;height:11px}
  .station-01{top:8%;left:6%}
  .station-02{top:20%;right:6%;left:auto}
  .station-03{top:34%;left:6%}
  .station-04{top:46%;right:6%;left:auto}
  .station-05{top:58%;left:6%}
  .station-06{top:72%;right:6%;left:auto}
  .station-07{top:83%;left:6%}
  .expedition-current-marker{
    top:1.5%;
    left:50%;
    width:280px;
    transform:translateX(-50%);
    padding:10px 12px;
  }
  .expedition-current-marker>span{font-size:8.5px}
  .expedition-current-marker>strong{font-size:11px}
  .expedition-current-marker>small{font-size:9px;line-height:1.4}
  .expedition-gate{width:210px}
  .expedition-gate span{font-size:8px}
  .expedition-gate strong{font-size:10px;line-height:1.45}
  .expedition-gate-one{top:29%;left:22%}
  .expedition-gate-two{top:67%;left:20%}
  .expedition-destination{top:92%;right:50%;width:280px;transform:translateX(50%)}
  .expedition-destination>span{font-size:8.5px}
  .expedition-destination>strong{font-size:17px}
  .expedition-destination>p{font-size:10px;line-height:1.5}
  .expedition-legend span{font-size:9px}

  /* Evidence: reach the six tests sooner and make every condition readable. */
  .lab-reactor{height:225px}
  .lab-reactor-rings{width:190px;height:190px}
  .lab-reactor-rings i:nth-child(1){width:150px;height:150px}
  .lab-reactor-rings i:nth-child(2){width:116px;height:116px}
  .lab-reactor-rings i:nth-child(3){width:82px;height:82px}
  .lab-reactor-vessel{width:128px;height:128px}
  .lab-reactor-vessel span{font-size:30px}
  .lab-reactor-vessel strong{font-size:13px}
  .lab-reactor-readout{bottom:5px;width:230px}
  .lab-axis-head>div:last-child span{font-size:8.5px}
  .lab-axis-head>div:last-child strong{font-size:14px}
  .lab-axis-head>div:last-child small{font-size:9.5px;line-height:1.5}
  .lab-outcomes{gap:9px}
  .lab-outcomes span{font-size:8.5px;line-height:1.35}
  .lab-outcomes b{font-size:11px;line-height:1.4}
  .lab-outcomes small{font-size:10.2px;line-height:1.58}
  .lab-verdict p{font-size:10.5px;line-height:1.65}

  /* x402: protocol strings and all three candidate rails remain legible. */
  .tower-level-label span{font-size:8.5px}
  .tower-level-label strong{font-size:13px}
  .tower-level-label small{font-size:9px;line-height:1.45}
  .tower-terminal>span{font-size:8px}
  .tower-terminal>strong{font-size:11px}
  .tower-terminal>small{font-size:9px;line-height:1.5}
  .http-packet span{font-size:9px;text-overflow:clip}
  .verification-deck span{font-size:8.5px}
  .verification-deck p{font-size:9.5px;line-height:1.6}
  .tower-spec-boundary span{font-size:8.5px}
  .tower-spec-boundary strong{font-size:10.5px}
  .payment-intent-port>small,.connector-switchyard>small{font-size:9.5px;line-height:1.55}
  .tower-rail{min-height:126px;opacity:.72}
  .tower-rail span{font-size:8.5px}
  .tower-rail strong{font-size:11.5px}
  .tower-rail small{font-size:9.5px;line-height:1.5}
  .tower-rail em{font-size:8.5px}
  .tower-route-status p{font-size:9.8px;line-height:1.55}
}

@media (prefers-reduced-motion:reduce){
  .js-animate .motion-managed *,
  .js-animate .motion-managed *::before,
  .js-animate .motion-managed *::after{
    animation-play-state:paused!important;
  }
  .protocol-tower-visual .tower-rail{
    opacity:1;
    transform:none;
  }
  .fx-inventory-world .fx-currency-port{
    opacity:1!important;
    filter:none!important;
  }
  .fx-inventory-world .fx-route-group{opacity:.28}
  .fx-inventory-world .fx-route-jpy-mxn{opacity:1}
}