/* Presentation adjustments layered on the original design. */
.nav-links{gap:1.5rem}.nav-inner{gap:1.5rem}
.code-block{white-space:pre;overflow-x:auto}.terminal .response-box{white-space:normal}
.code-layout>*{min-width:0}
.price-card{display:flex;flex-direction:column}.price-card>.btn{margin-top:auto}
.price-card .btn-outline{color:#08718d;border-color:#08718d}.price-card .btn-primary{color:#03202b}
.pricing-guarantee a{text-decoration:underline;text-underline-offset:3px}
.perf-metric{font-size:clamp(2rem,3.5vw,3.25rem)}
@media(max-width:1050px){.nav-links{gap:1rem}.nav-inner{gap:1rem;padding-inline:1.2rem}}
@media(max-width:820px){.nav-links{display:none}.nav-inner{gap:.7rem}.nav-cta{gap:.4rem}.nav-cta .btn-sm{font-size:.75rem;padding:.5em .8em}}
@media(max-width:480px){.nav-cta>a[href="/login"]{display:none}.nav-inner{padding-inline:1rem;gap:.5rem}.theme-toggle{padding:7px 8px;font-size:10px}.hero-sub{font-size:1rem}.hero-ctas{gap:.75rem}.hero-ctas .btn{justify-content:center}}
@media(max-width:600px){.agent-icons{width:100%;flex-wrap:wrap;justify-content:center;gap:.65rem}.agent-icons-label{width:100%;margin:0;text-align:center;white-space:normal}}

/* The hero stays in normal flow. Enhancement pins one viewport after it and
   selects a single product scene from scroll progress. Without JS, on small or
   short screens, or with reduced motion, every section stays in document flow. */
.product-tour{max-width:1280px;margin:0 auto;padding:0 2rem 5rem}
.product-tour-intro{max-width:720px;margin:0 auto 3rem;text-align:center;color:var(--text-muted);font-size:1.1rem}
.product-tour-intro .section-label{margin-bottom:1rem}
.product-tour .product-card{padding:3rem;margin-bottom:2rem;border:1px solid var(--border);border-radius:24px;background:var(--bg);box-shadow:0 20px 60px rgba(0,0,0,.12);scroll-margin-top:90px}
.product-tour .product-card::before{display:none}
.product-tour .fade-up{opacity:1;transform:none}
.product-tour .section-header{margin-bottom:2rem}
.product-tour .section-header h2{font-size:clamp(2rem,3.6vw,3rem)}
.product-tour .graph-embed{height:350px}
.product-tour .light-section{background:var(--bg);color:var(--text)}
.product-tour .light-section .section-header h2{color:var(--text)}
.product-tour .light-section .section-header p{color:var(--text-muted)}
.product-tour .light-section .section-label{color:var(--teal)}
.product-stage-controls{display:none}
.product-stage-controls button{border:1px solid var(--border);border-radius:8px;padding:.65rem .85rem;background:var(--bg);color:var(--text);font:500 .75rem var(--font-mono);cursor:pointer;white-space:nowrap}
.product-stage-controls button:hover{border-color:var(--teal)}
.product-stage-controls button:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.product-stage-controls button[aria-disabled="true"]{opacity:.4;cursor:default}
.product-stage-status{color:var(--text-muted);font:500 .75rem var(--font-mono);min-width:18rem;text-align:center}
@media(min-width:1000px) and (min-height:850px) and (prefers-reduced-motion:no-preference){
  body{overflow-x:clip}
  .product-story.is-staged{height:400svh}
  .is-staged .product-stage{position:sticky;top:0;height:100svh;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:1rem;padding:calc(var(--nav-h) + 24px) 0 24px}
  .is-staged .product-scenes{display:grid;grid-template-rows:minmax(0,1fr);align-items:center;min-height:0}
  .product-tour .is-staged .product-card{grid-area:1 / 1;position:relative;width:100%;margin:0;padding:2rem 3rem;opacity:0;transform:translateY(9%) scale(.975);pointer-events:none;transition:opacity .65s ease,transform .8s cubic-bezier(.22,1,.36,1)}
  .product-tour .is-staged .product-card.is-before{transform:translateY(-9%) scale(.975)}
  .product-tour .is-staged .product-card.is-active{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;z-index:1}
  .is-staged .product-stage-controls{display:flex;align-items:center;justify-content:center;gap:1rem}
  .is-staged.is-initializing .product-card{transition:none}
}
@media(max-width:820px){
  .product-tour{padding:0 1rem 2rem}
  .product-tour .product-card{padding:2rem 1.25rem;border-radius:16px}
  .product-tour .graph-embed{height:400px}
}
@media(prefers-reduced-motion:reduce){.product-tour{scroll-behavior:auto}}

/* Lower cards keep their grid cells and semantic order while scrolling deals
   them into place. No overlay/pinning, and revealed content never retreats. */
[data-card-shuffle] > :is(.perf-card,.tier-card,.price-card){opacity:1;transform:none}
@media(min-width:1000px) and (min-height:850px) and (prefers-reduced-motion:no-preference){
  [data-card-shuffle].is-shuffling > :is(.perf-card,.tier-card,.price-card){
    opacity:var(--shuffle-opacity,1);
    transform:translate(var(--shuffle-x,0px),var(--shuffle-y,0px)) rotate(var(--shuffle-angle,0deg)) scale(var(--shuffle-scale,1));
    transition:border-color .25s ease,box-shadow .25s ease;
  }
}