/* Main-page size adjustment, 2026-10-20.
   Remove this stylesheet's link from index.html to restore the previous sizes.
   Keep original assets and full-size image dialogs intact. */

/* Titles: 90% of the existing size at each responsive breakpoint. */
.figma-layout .hero h1 { font-size: clamp(39.6px, 6.75vw, 86.4px); }
.figma-layout #story h2,
.figma-layout #problems h2 { font-size: 28.8px; }
.figma-layout #problems .problem-grid h3 { font-size: 25.2px; }
.figma-layout #solution .solution-caption { font-size: 32.4px; }
.figma-layout #features .section-heading h2,
.figma-layout #new h2,
.figma-layout #market .section-heading h2 { font-size: 57.6px; }
.figma-layout #features .card-title { font-size: 18px; }
.figma-layout #new .spotlight h3 { font-size: 39.6px; }
.figma-layout #market .agent-examples-heading h3 { font-size: 16.2px; }
.figma-layout #market .agent-card .card-title { font-size: 19.8px; }
.figma-layout #participation h2 { font-size: 36px; }
.figma-layout #participation .participation-grid h3 { font-size: 21.6px; }
.figma-layout #guide .guide-carousel-heading h2 { font-size: 28.8px; }
.figma-layout #faq h2 { font-size: clamp(25.2px, 2.52vw, 36px); }

/* Size the complete illustration so device and callout anchors stay aligned. */
.figma-layout #solution .solution-showcase { width: 90%; margin-inline: auto; }
.figma-layout #features .feature-visual { width: 90%; margin-inline: auto; }
.figma-layout #new .spotlight-visual { width: 90%; margin-inline: auto; justify-self: center; }
.figma-layout #market .agent-card { grid-template-columns: 128.7px minmax(0, 1fr); }
.figma-layout #market .agent-card .card-media { width: 128.7px; height: 128.7px; }

/* The carousel script owns its base width. Derive both slide width and
   centering padding from it so dragging and keyboard navigation still align. */
.figma-layout #guide { --home-guide-width: calc(var(--guide-preview-width) * .9); }
.figma-layout #guide .guide-slide { flex-basis: var(--home-guide-width); }
.figma-layout #guide .guide-carousel-track { padding-inline: calc((100% - var(--home-guide-width)) / 2); }

@media (width <= 1200px) {
  .figma-layout #story h2 { font-size: 25.2px; }
  .figma-layout #problems .problem-grid h3 { font-size: 20.7px; }
  .figma-layout #solution .solution-caption { font-size: 25.2px; }
  .figma-layout #new .spotlight h3 { font-size: 30.6px; }
}

@media (width <= 960px) {
  .figma-layout #features .section-heading h2,
  .figma-layout #new h2,
  .figma-layout #market .section-heading h2 { font-size: 43.2px; }
  .figma-layout #market .agent-card { grid-template-columns: 108px minmax(0, 1fr); }
  .figma-layout #market .agent-card .card-media { width: 108px; height: 108px; }
  .figma-layout #market .agent-card .card-title { font-size: 18px; }
}

@media (width <= 720px) {
  /* Retain the existing lower bounds for already-small mobile headings. */
  .figma-layout .hero h1 { font-size: clamp(16px, calc(5.76vw - 9px), 30.6px); }
  .figma-layout #story h2,
  .figma-layout #problems h2,
  .figma-layout #solution .solution-caption { font-size: 14px; }
  .figma-layout #problems .problem-grid h3 { font-size: 18px; }
  .figma-layout #features .section-heading h2,
  .figma-layout #new h2,
  .figma-layout #market .section-heading h2 { font-size: 19.8px; }
  .figma-layout #features .card-title,
  .figma-layout #market .agent-card .card-title { font-size: 16.2px; }
  .figma-layout #new .spotlight h3 { font-size: 21.6px; }
  .figma-layout #market .agent-examples-heading h3 { font-size: 14.4px; }
  .figma-layout #participation h2,
  .figma-layout #faq h2 { font-size: 16.2px; }
  .figma-layout #participation .participation-grid h3 { font-size: 18px; }

  /* Mobile callouts are a text list; shrink only the device illustration. */
  .figma-layout #solution .solution-showcase { width: 100%; }
  .figma-layout #solution .solution-visual { width: 79.2%; max-width: 288px; }
  .figma-layout #features .feature-card { grid-template-columns: minmax(0, 1fr) 86.4px; }
  .figma-layout #features .feature-visual { width: 86.4px; }
  .figma-layout #new .spotlight-visual { width: 79.2%; max-width: 252px; }
}

@media (width <= 600px) {
  .figma-layout #guide .guide-carousel-heading h2 { font-size: 23.4px; }
}

@media (width < 360px) {
  .figma-layout .hero h1 { font-size: 14px; }
  .figma-layout #features .section-heading h2,
  .figma-layout #new h2,
  .figma-layout #market .section-heading h2 { font-size: 16.2px; }
  .figma-layout #features .card-title,
  .figma-layout #market .agent-card .card-title { font-size: 14.4px; }
  .figma-layout #solution .solution-caption { font-size: 12px; }
  .figma-layout #features .feature-card { grid-template-columns: minmax(0, 1fr) 72px; }
  .figma-layout #features .feature-visual { width: 72px; }
}