/* Six complete cards, using the existing copy, examples and section anchors. */
:root {
  --deck-pad: 40px;
  --hero-lead-pad-top: 4px;
  --type-h1: 44px;
  --type-h2: 34px;
  --type-h3: 20px;
  --type-cta: 13px;
  --type-mini-label: 10px;
  --type-example-code: 12px;
  --type-example-ui: 12px;
  --type-example-mono: 11px;
  --type-use-code: 12px;
  --type-install-heading: 38px;
  --type-pricing-heading: 38px;
  --type-price-number: 48px;
  --deck-ui: 12px;
  --deck-mono: 11px;
  --deck-body: 14px;
}
/* Type and Hero spacing change only at width breakpoints. Layout may still flow with the view. */
@media (max-width: 380px) {
  :root { --type-h1: 40px; --type-h2: 32px; }
}
@media (min-width: 601px) {
  :root {
    --hero-lead-pad-top: 8px;
    --type-h1: 56px;
    --type-h2: 36px;
    --type-install-heading: 42px;
    --type-pricing-heading: 40px;
  }
}
@media (min-width: 1100px) {
  :root {
    --hero-lead-pad-top: 10px;
    --type-h1: 60px;
    --type-h2: 44px;
    --type-h3: 22px;
    --type-mini-label: 11px;
    --type-example-code: 13px;
    --type-example-ui: 13px;
    --type-example-mono: 12px;
    --type-install-heading: 48px;
    --type-pricing-heading: 56px;
    --type-price-number: 64px;
    --deck-ui: 13px;
    --deck-mono: 12px;
  }
}
@media (min-width: 1440px) {
  :root {
    --hero-lead-pad-top: 12px;
    --type-h1: 72px;
    --type-h2: 48px;
    --type-h3: 24px;
    --type-cta: 14px;
    --type-example-code: 15px;
    --type-example-ui: 15px;
    --type-example-mono: 13px;
    --type-use-code: 12px;
    --type-pricing-heading: 60px;
    --type-price-number: 72px;
    --deck-ui: 14px;
    --deck-mono: 13px;
    --deck-body: 16px;
  }
}
@media (min-width: 1680px) {
  :root {
    --hero-lead-pad-top: 16px;
    --type-h1: 80px;
    --type-h2: 56px;
    --type-h3: 28px;
    --type-cta: 16px;
    --type-mini-label: 12px;
    --type-example-ui: 17px;
    --type-example-mono: 15px;
    --type-use-code: 13px;
    --type-install-heading: 56px;
    --type-pricing-heading: 64px;
    --type-price-number: 80px;
    --deck-ui: 16px;
    --deck-mono: 14px;
    --deck-body: 18px;
  }
}
.page-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #f5f5f4b3;
  box-shadow: none;
}
#improve > .page-card,
#deploy > .page-card,
#how > .page-card,
.closing-card {
  width: calc(100% - 48px);
  max-width: 1392px;
  margin-inline: auto;
  padding: var(--deck-pad);
}
#main > .page-slide > .page-card { padding: var(--deck-pad); }
.closing-card { display: grid; gap: 48px; }
#secrets > .page-card { background: #f5f5f4b3; }
.closing-card > #pricing,
.closing-card > #install { padding: 0; }
.closing-card > #pricing > .wrap,
.closing-card > #install > .wrap {
  width: 100%;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
}
.closing-slide > .foot { padding-top: 40px; }

@media (max-width: 760px) {
  #improve > .page-card,
  #deploy > .page-card,
  #how > .page-card,
  .closing-card { width: calc(100% - 24px); }
  .closing-card { gap: 48px; }
}
@media (max-width: 600px) {
  :root { --deck-pad: 24px; }
}

/* Pointer/hover keep touch tablets in the continuous document, including iPad
 * landscape. The document remains the only scrolling surface. */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  :root {
    --deck-top: 108px;
    --deck-edge: 24px;
    --deck-card-height: calc(100svh - var(--deck-top) - var(--deck-edge) - 200px);
    --deck-pad: 48px;
  }
  html { scroll-snap-type: y mandatory; scroll-padding-top: 0; }
  /* The wheel controller allows reading tall slides before changing slides.
   * Native snap remains the fallback when the enhancement is unavailable. */
  html.deck-scroll { scroll-snap-type: none; scroll-padding-top: var(--deck-top); }
  /* The slide transition supplies the spatial motion; reveal content in place. */
  html.deck-scroll .reveal-pending { transform: none; }
  html.deck-scroll .reveal-pending.reveal-visible { transition: opacity 700ms var(--ease); }
  /* These anchors now point at the whole slide, including its nav clearance. */
  html.deck-scroll #main > :is(#deploy, #secrets, #improve, #how) { scroll-margin-top: calc(-1 * var(--deck-top)); }
  .nav { position: fixed; inset: 20px 0 auto; margin: 0 auto; }
  #main > .page-slide {
    display: grid;
    align-items: center;
    height: auto;
    min-height: 100svh;
    padding: var(--deck-top) var(--deck-edge) var(--deck-edge);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: visible;
  }
  #main > .page-slide > .page-card {
    width: 100%;
    height: auto;
    min-height: var(--deck-card-height);
    max-width: 1392px;
    margin: 0 auto;
    padding: var(--deck-pad);
    background: #f5f5f4b3;
    overflow: visible;
  }
  .hero-grid { grid-template-rows: auto auto; align-content: center; gap: 40px; }
  .hero-copy { gap: 20px 56px; }
  .hero h1 { font-size: var(--type-h1); }
  .hero .lead { font-size: var(--deck-body); }
  .hero .cta-row { flex-direction: row; padding-top: 20px; }
  .hero .cta-row .btn { font-size: var(--type-cta); }
  .hero-visual, .demo { height: auto; min-height: 0; }
  .demo-app, .demo-chat { display: block; }
  .demo-body { display: block; min-height: 232px; }
  .demo-ask, .demo-live, .demo-composer, .demo-app > .term-bar, .demo-chat > .chat-head { flex-shrink: 0; }
  .demo-steps { align-content: normal; font-size: var(--deck-ui); }
  .demo .term-title, .demo-live, .demo-composer { font-size: var(--deck-mono); }
  .demo .bubble, .demo .chat-head, .demo .chat-body, .demo-toast { font-size: var(--deck-ui); }
  .demo-chat .chat-body { justify-content: flex-start; }
  .demo-toast b { font-size: calc(var(--deck-ui) + 1px); }
  .gains, .gains > :not(:nth-child(3n + 1)) { font-size: var(--deck-mono); }
  .page-card h2 { font-size: var(--type-h2); }
  #improve > .page-card { gap: 40px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); }
  #improve h2 { font-size: var(--type-h2); }
  #improve .lead { margin-top: 24px; font-size: var(--deck-body); }
  .improve-demo { height: auto; min-height: 0; }
  .improve { display: block; height: auto; }
  .improve > .card-head, .loop-row, .improve-actions { flex-shrink: 0; }
  .improve .card-head, .improve-label, .finding, .metric-name, .canary { font-size: var(--deck-ui); }
  .loop { font-size: var(--deck-mono); }
  .improve-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .improve-fix { display: block; }
  .spans.mini { display: block; }
  .spans.mini .span { height: 25px; grid-template-columns: 100px minmax(0, 1fr); }
  .spans.mini .sp-name { font-size: var(--type-mini-label); }
  .improve-change h3 { font-size: calc(var(--deck-ui) + 2px); }
  .improve-diff { font-size: var(--deck-mono); }
  .improve-compare { justify-content: flex-start; border-left: 1px solid var(--border); border-top: 0; }
  .metric { grid-template-columns: clamp(78px, 7.5vw, 108px) minmax(0, 1fr); }
  .metric-bar { display: grid; grid-template-columns: minmax(0, 1fr) 6.5ch; font-size: var(--deck-mono); }
  .metric-bar i { width: calc(var(--w) * 1%); height: clamp(6px, .9svh, 10px); }
  #secrets > .page-card,
  #deploy > .page-card,
  #how > .page-card { display: flex; flex-direction: column; justify-content: center; }
  .section-head { margin-bottom: clamp(20px, 3.5svh, 36px); }
  #secrets .section-head, #secrets h2, #deploy h2, #how h2 { max-width: none; }
  .carry, .uses, .trace { flex: none; min-height: 0; width: 100%; }
  .carry > .term, .carry > .card { display: block; }
  .carry .term-body { display: block; min-height: 280px; font-size: var(--type-example-code); line-height: 2.6; }
  .carry .term-title { font-size: var(--deck-mono); }
  .carry .card-head { font-size: var(--deck-ui); }
  .carry .rows { display: block; }
  .carry .rows > div { align-items: center; font-size: var(--type-example-ui); }
  .carry .rows dd { font-size: var(--type-example-mono); }
  .use h3 { font-size: var(--type-h3); }
  .mini-code { font-size: var(--type-use-code); }
  .mini-page .chat-head, .mini-page .chat-body, .sched-head, .sched-runs li { font-size: var(--type-example-ui); }
  .mini-url, .sched-head .mono, .sched-runs .mono { font-size: var(--deck-mono); }
  .sched { display: block; }
  .sched-runs { display: block; }
  .sched-runs li { align-items: center; }
  .trace { display: block; padding: 20px 28px; }
  .trace > .spans { display: block; }
  .trace .span { height: clamp(20px, 2.6svh, 28px); font-size: var(--deck-mono); }
  .trace-id, .trace-meta, .trace .sp-dur, .legend, .legend-note { font-size: var(--deck-mono); }
  .trace .sp-track i { height: clamp(7px, 1svh, 11px); }
  .trace-head { padding-bottom: 16px; }
  .legend { padding-top: 16px; }
  #main > .closing-slide { display: flex; flex-direction: column; justify-content: center; gap: 18px; }
  #main > .closing-slide > .closing-card {
    flex: none;
    min-height: calc(var(--deck-card-height) - 63px);
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    align-content: center;
    grid-template-rows: auto auto;
    gap: clamp(24px, 5svh, 56px);
  }
  .closing-card > #pricing { padding: clamp(20px, 2.6svh, 30px) 40px 0; }
  .closing-card > #install {
    padding: var(--deck-pad);
    border: 1px solid var(--border);
    background: #f5f5f4b3;
  }
  .closing-card #pricing > .wrap,
  .closing-card #install > .wrap { height: auto; gap: 16px 48px; }
  .closing-card #install h2 { font-size: var(--type-install-heading); }
  .closing-card #pricing h2 { font-size: var(--type-pricing-heading); }
  .closing-card .prices { align-self: center; }
  .closing-card .price { padding: 24px; gap: 24px; justify-content: center; }
  .closing-card .price h3, .closing-card .price-num span { font-size: var(--deck-ui); }
  .closing-card .price-num b { font-size: var(--type-price-number); }
  .closing-card .tabs-window { display: block; align-self: center; }
  .closing-card .tabs-window > [role="tabpanel"]:not([hidden]) { display: block; }
  .closing-card .tabs-window pre,
  .closing-card .tabs-window[data-bui-component="CodeBlock"] > [role="tabpanel"] pre { display: block; font-size: var(--deck-mono); }
  .closing-card .tab-bar > [role="tab"] { font-size: var(--deck-ui); }
  .closing-slide > .foot { flex: none; width: 100%; max-width: 1440px; margin-inline: auto; padding: 0; }
  .closing-slide .foot-row { padding-top: 16px; }

  @media (max-height: 800px) {
    .hero-copy { gap: 16px 40px; }
    .demo-body { min-height: 200px; padding: 20px 20px 0; }
    .demo-steps { gap: 8px; }
    .demo-live { margin-top: 16px; padding-top: 12px; }
    .demo-composer { margin: 16px; }
    .demo-toast { padding: 16px 20px; }
    .improve-fix, .improve-compare { padding: 18px 16px; }
    .improve-label { margin-bottom: 10px; }
    .spans.mini .span { height: 20px; }
    .loop { padding-block: 14px; gap: 12px; }
    .card-head { padding-block: 12px; }
    .improve-actions { min-height: 56px; padding-block: 12px; }
    .carry .term-body { min-height: 240px; }
    .closing-card .price { padding: 20px; gap: 18px; }
    .closing-card .tabs-window pre { padding-block: 20px; }
  }

  /* The 200px reduction is a preferred minimum. Natural content can keep a
   * card taller on short screens without stretching or cropping its demos. */
}

/* Give the Hero a quiet color shift while retaining the orbital backdrop. */
#main > .hero > .hero-grid {
  background: linear-gradient(to top right, #fafaf9cc 0%, #ecebe9bf 48%, #d4d1cdc7 100%);
}

@media print {
  html { scroll-snap-type: none; }
}