/* Visual fidelity pass 3: improve hierarchy/readability without copying mockup annotation lines. */

@media (min-width:1241px){
  /* Hero: keep the current compact height, but give the process diagram more visual authority. */
  .hero__grid{grid-template-columns:35% 65%}
  .hero h1{max-width:500px;font-size:clamp(38px,2.95vw,47px);line-height:1.04}
  .hero__lead{max-width:500px;font-size:14px;line-height:1.58}
  .system-card{box-shadow:inset 0 0 32px rgba(255,255,255,.07),0 18px 34px rgba(0,0,0,.28)}
  .system-core{width:23%;left:38.5%;box-shadow:inset 0 0 0 3px #ff6b00,0 0 28px rgba(255,105,0,.48),0 18px 40px rgba(0,0,0,.32);filter:drop-shadow(0 0 12px rgba(255,111,0,.34))}
  .system-core::before{box-shadow:inset 0 0 0 3px #ff6b00}
  .hero-system__links .line{stroke-width:2.6;stroke-dasharray:3 6}

  /* Process strip: slightly larger labels so the block reads at a glance. */
  .process-breaks__inner{min-height:104px;grid-template-columns:235px 1fr 165px}
  .process-breaks__title h2{font-size:22px}
  .process-breaks__title p{font-size:11.5px}
  .problem-item strong{font-size:11px}
  .problem-item span{font-size:10.5px;line-height:1.3}

  /* Ready-made widgets should feel like a product showcase, not a compressed table. */
  .widgets-section{padding-top:28px}
  .feature-widget{min-height:205px;padding:16px;gap:12px}
  .card-kicker{font-size:11.5px}
  .feature-widget__copy p{font-size:12.5px;line-height:1.48}
  .feature-widget__visual .ui-preview__body{min-height:110px}
  .feature-widget__visual .mock-map{min-height:96px}
  .widgets-grid{margin-top:14px;gap:11px}
  .widget-card{min-height:194px;padding:13px}
  .widget-card h3{font-size:12.5px}
  .widget-card p{font-size:10.5px;line-height:1.45}
  .widget-card .ui-preview__body{min-height:74px}
  .custom-tool-strip{min-height:78px;margin-top:12px;padding:11px 16px}
  .custom-tool-strip__title strong{font-size:15px}
  .custom-tool-strip__step{font-size:10.5px}

  /* Constructor / order path: preserve the two-column composition but eliminate 7–8px body text. */
  .architecture-row{grid-template-columns:46% 54%}
  .architecture-row .system-constructor,.architecture-row .order-path{padding:30px 18px 25px}
  .architecture-row .section-heading{margin-bottom:20px}
  .architecture-row .section-heading h2{font-size:25px}
  .architecture-row .section-heading p{font-size:11.5px;line-height:1.45}
  .architecture-row .constructor-grid{gap:9px}
  .architecture-row .constructor-card{min-height:278px;padding:13px 10px}
  .architecture-row .constructor-card h3{font-size:11px;line-height:1.25}
  .architecture-row .constructor-card ul{gap:10px}
  .architecture-row .constructor-card li{font-size:9.5px;line-height:1.3}
  .architecture-row .constructor-card__highlight{font-size:9.5px;padding:10px 6px}
  .architecture-row .constructor-footer{font-size:10px}
  .architecture-row .path-step{padding-inline:5px}
  .architecture-row .path-step__number{width:34px;height:34px;font-size:11px}
  .architecture-row .path-step::before{top:16px}
  .architecture-row .path-step h3{min-height:42px;font-size:9.5px;line-height:1.28}
  .architecture-row .path-step p{min-height:76px;font-size:8.5px;line-height:1.42}
  .architecture-row .path-step__mock .ui-preview__body{min-height:50px}
  .architecture-row .path-step__mock .mock-map{min-height:41px}
  .architecture-row .path-step__mock .mock-chart{height:41px}

  /* Integrations / dashboard / cases: raise proof-block readability. */
  .ecosystem__grid{grid-template-columns:1.02fr 1fr 1.08fr;gap:16px;padding-top:20px;padding-bottom:20px}
  .ecosystem .section-intro--compact h2{font-size:27px}
  .ecosystem .section-intro--compact p{font-size:11.5px}
  .integration-card{min-height:118px;padding:11px}
  .integration-card h3{font-size:12px}
  .integration-card li{font-size:10.5px;line-height:1.3}
  .manager-dashboard{padding:15px;border-radius:12px}
  .manager-dashboard__head{font-size:18px}.manager-dashboard__head small{font-size:9.5px}
  .manager-dashboard__metrics span,.manager-dashboard__metrics small{font-size:9px}
  .manager-dashboard__metrics strong{font-size:17px}
  .manager-dashboard__body>div{min-height:145px}
  .manager-list span{font-size:9px}.manager-list b{font-size:9px}
  .case-card__title{font-size:16px}
  .case-columns h3{font-size:12px}.case-columns ul{font-size:10.5px;line-height:1.35}
  .case-proof span{font-size:9px}.case-proof strong{font-size:11.5px}
  .case-mini{min-height:126px;padding:11px}.case-mini strong,.case-mini span{font-size:10.5px}

  /* Lower blocks must remain clearly readable even though they are compact. */
  .how-faq{padding-top:25px;padding-bottom:22px}
  .how-panel h2,.faq-panel h2{font-size:29px}
  .work-steps article{grid-template-columns:40px 1fr;gap:9px}
  .work-steps article>span{width:38px;height:38px}
  .work-steps h3{font-size:13.5px}.work-steps p{font-size:10.5px;line-height:1.5}
  .faq-list summary{min-height:39px;font-size:12.5px}.faq-list details>div{font-size:11.5px}
  .how-note{min-height:64px}.how-note p{font-size:12.5px}
  .final-cta__inner{min-height:170px}
  .final-cta__copy h2{font-size:clamp(30px,2.25vw,38px)}
  .final-cta__copy p{font-size:13.5px}
  .site-footer__grid{min-height:118px;padding-block:18px}
  .site-footer h2{font-size:11px}.site-footer a,.site-footer span{font-size:10px}.site-footer__brand p{font-size:10.5px}
}

@media (min-width:981px) and (max-width:1240px){
  .architecture-row .constructor-card li{font-size:10px}
  .architecture-row .path-step h3{font-size:10px}
  .architecture-row .path-step p{font-size:9px}
  .manager-dashboard__metrics span,.manager-dashboard__metrics small{font-size:9px}
  .manager-list span,.manager-list b{font-size:9px}
}

@media (max-width:640px){
  /* Hero on phones: retain the system story but avoid spending almost a full screen on each pair of cards. */
  .hero__copy{padding-top:30px;padding-bottom:22px}
  .hero h1{font-size:36px;line-height:1.03}
  .hero__lead{font-size:14px;line-height:1.55}
  .hero__stats{gap:12px}.hero__stats dt{font-size:18px}.hero__stats dd{font-size:11px}
  .hero-system{min-height:0;grid-auto-rows:minmax(98px,auto);gap:8px;padding-top:132px;padding-bottom:10px}
  .system-core{top:4px;width:132px;height:118px}
  .system-core strong{font-size:19px}.system-core span{font-size:10px}
  .hero-system .system-card{padding:8px}
  .hero-system .system-card--dev{width:64%}
  .system-card__head{margin-bottom:5px}.system-card__head strong{font-size:11px}.system-card__head small{font-size:9px}
  .system-card .ui-preview__body{min-height:40px;padding:5px}
  .system-card .mock-map{min-height:34px}.system-card .mock-chart{height:34px}

  /* Two-column problem list is easier to scan and noticeably shorter. */
  .process-breaks__inner{padding-block:18px}
  .process-breaks__items{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
  .problem-item{align-items:flex-start}
  .problem-item:last-child{grid-column:1/-1;max-width:230px}
  .problem-item strong{font-size:11px}.problem-item span{font-size:10px}
  .process-breaks__inner>.button{width:100%}

  /* Secondary cards become swipeable product rails instead of five/six full vertical screens. */
  .widgets-grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(260px,84vw);overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;padding:2px 2px 10px;margin-inline:-2px;scrollbar-width:thin}
  .widget-card{scroll-snap-align:start;min-height:205px}
  .custom-tool-strip__title strong{font-size:15px}

  .architecture-row .system-constructor,.architecture-row .order-path{padding-block:26px}
  .architecture-row .section-heading h2{font-size:25px}
  .architecture-row .section-heading p{font-size:13px}
  .architecture-row .constructor-grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(245px,82vw);overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;gap:10px;padding-bottom:10px;scrollbar-width:thin}
  .architecture-row .constructor-card,.architecture-row .constructor-card:last-child{grid-column:auto;scroll-snap-align:start;min-height:250px;padding:15px}
  .architecture-row .constructor-card h3{font-size:14px}
  .architecture-row .constructor-card li{font-size:12px}
  .architecture-row .constructor-card__highlight{font-size:11px}
  .architecture-row .constructor-footer{font-size:11px}
  .architecture-row .order-path__track{grid-template-columns:repeat(8,132px);gap:2px;padding-bottom:12px;scroll-snap-type:x proximity}
  .architecture-row .path-step{scroll-snap-align:start}
  .architecture-row .path-step__number{width:34px;height:34px;font-size:11px}
  .architecture-row .path-step h3{font-size:11px;min-height:42px}
  .architecture-row .path-step p{font-size:10px;min-height:72px}

  .ecosystem{padding-top:4px}
  .integration-card h3{font-size:12px}.integration-card li{font-size:11px}
  .manager-dashboard{padding:14px}
  .manager-dashboard__head{font-size:17px;align-items:flex-start;flex-direction:column}
  .manager-dashboard__metrics span,.manager-dashboard__metrics small{font-size:10px}.manager-dashboard__metrics strong{font-size:17px}
  .manager-list span,.manager-list b{font-size:10px}
  .cases-panel__head h2{font-size:28px}
  .case-card__title{font-size:16px}.case-columns h3{font-size:12px}.case-columns ul{font-size:11px}.case-proof span{font-size:10px}.case-proof strong{font-size:12px}

  .how-panel h2,.faq-panel h2{font-size:28px}
  .work-steps h3{font-size:14px}.work-steps p{font-size:11.5px}
  .faq-list summary{min-height:44px;font-size:13px}.faq-list details>div{font-size:12px}
  .final-cta__inner{padding-block:32px}.final-cta__copy h2{font-size:31px}.final-cta__copy p{font-size:14px}
  .site-footer__grid{padding-block:24px;gap:18px}.site-footer h2{font-size:12px}.site-footer a,.site-footer span{font-size:11px}.site-footer__brand p{font-size:11px}
}