/* Layout finishing pass. Keep the approved colors and workflow animation intact. */
html { scroll-padding-top: 108px; }
main > .section-pad,
#product-showcase > .section-pad { padding-block: 88px; }
main > .hero { padding-block: 76px 84px; }
.section-head { margin-bottom: 32px; }
.section-head.center { margin-bottom: 36px; }
.section-head p:empty { display: none; }
.section-head.split { gap: 32px; }
.section-head.split > p { max-width: 340px; }
.section-head h2, .faq h2,
.release-section h2, .feedback-section h2 {
  font-size: clamp(32px, 3.1vw, 44px);
  text-wrap: balance;
}
/* Keep supporting information quieter than the live workflow demonstration. */
.app-card-grid { gap: 18px; }
.app-card { min-height: 220px; padding: 26px; }
.app-card > p { flex: 0; margin: 20px 0 0; max-width: 48ch; }
.app-card-bottom { display: none; } /* Repeated by the card's description. */
.app-card:hover { border-color: var(--border); }
.platform-roadmap { padding: 18px 22px; margin: 20px 0; gap: 10px 14px; }
.compatibility-note { margin-top: 20px; }
.faq-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; }
.release-grid { gap: 24px; }
.release-section h2 { margin-bottom: 28px; }
/* A balanced closing section, not a narrow form stranded on a full-width row. */
.feedback-layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: 64px;
}
.feedback-intro { padding-top: 24px; }
.feedback-section h2 { margin: 20px 0; max-width: 11em; }
.feedback-intro > p { max-width: 34ch; line-height: 1.8; }
.feedback-panel {
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
#feedbackForm { max-width: none; margin: 0; gap: 12px; }
#feedbackForm label:not(:first-child) { margin-top: 8px; }
#feedbackForm select, #feedbackForm textarea {
  width: 100%; min-width: 0;
  background: var(--bg);
  border-color: var(--border2);
  line-height: 1.6;
}
#feedbackForm select:focus-visible, #feedbackForm textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
#feedbackForm textarea { min-height: 148px; }
.feedback-actions { margin-top: 6px; gap: 12px; }
#feedbackStatus { margin: 0; font-size: 14px; line-height: 1.65; }
#feedbackStatus:empty, #feedbackDrafts:empty { display: none; }
#feedbackDrafts .draft { max-width: none; background: var(--bg); font-size: 14px; line-height: 1.7; }
main > .cta { padding-block: 72px; }
.cta h2 { font-size: clamp(36px, 3.9vw, 56px); }
.cta p { margin: 20px auto 26px; }
.cta-actions { margin-bottom: 30px; }
@media (max-width: 1000px) {
  html { scroll-padding-top: 140px; }
  main > .section-pad, #product-showcase > .section-pad { padding-block: 68px; }
  .feedback-layout, .faq-grid { gap: 32px; }
  .app-card { min-height: 220px; padding: 22px; }
  .feedback-panel { padding: 24px; }
}
@media (max-width: 800px) {
  .feedback-layout, .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .feedback-intro { padding-top: 0; }
  .feedback-section h2, .feedback-intro > p { max-width: none; }
  .section-head.split { gap: 20px; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 116px; }
  main > .section-pad, #product-showcase > .section-pad { padding-block: 54px; }
  .nav { padding-block: 8px; gap: 6px 10px; }
  .nav .brand strong { font-size: 14px; }
  .nav .brand img { width: 30px; height: 30px; }
  .nav .language { min-height: 36px; padding-block: 6px; font-size: 13px; }
  .nav-links { gap: 16px; font-size: 14px; }
  .nav-links a { display: inline-flex; align-items: center; min-height: 40px; }
  .nav-actions .button-small { min-height: 40px; padding: 8px 12px; }
  .section-head.center { margin-bottom: 26px; }
  .section-head h2, .faq h2, .release-section h2, .feedback-section h2 {
    font-size: 30px; line-height: 1.3;
  }
  .app-card { min-height: 0; padding: 22px; }
  .app-card > p { margin-top: 16px; }
  .platform-roadmap { padding: 18px; }
  .feedback-panel { padding: 20px; }
  .feedback-actions .button { width: auto; flex: 1 1 140px; }
  .cta h2 { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.feedback-intro > p { max-width: none; }
.feedback-section h2 { max-width: none; text-wrap: initial; }

/* Lower sections share the approved hero's expanding content rail.
   Keep this scoped: the approved hero and navigation must not change. */
main section:not(.hero) > .container,
footer > .container.footer-inner {
  width: calc(100% - 48px);
  max-width: 1400px;
  padding-inline: 0;
  margin-inline: auto;
}
#connections .connections-layout,
#faq .faq-grid,
#feedback .feedback-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 48px;
  align-items: center;
}
#connections .platform-map { max-width: none; justify-self: stretch; }
#connections .connections-copy { min-width: 0; }
#connections .connections-copy p { max-width: 42ch; }
main .section-head.split {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 18px;
}
main .section-head.split > p { max-width: 65ch; }
#pricing .release-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 24px;
}
#faq .faq-grid > div:first-child,
#feedback .feedback-intro { min-width: 0; max-width: 42ch; }
#faq .faq-grid > div:first-child p { max-width: 42ch; }
#feedback .feedback-intro { padding-top: 0; }
#feedback .feedback-intro h2 { margin-top: 0; }
#feedback .feedback-intro > p { max-width: 42ch; }
main .section-head.center { max-width: 760px; }
main .section-head.center > p { max-width: 65ch; }
@media (max-width: 1000px) {
  #connections .connections-layout,
  #faq .faq-grid,
  #feedback .feedback-layout { gap: 32px; }
}
@media (max-width: 900px) {
  #connections .connections-layout,
  #faq .faq-grid,
  #feedback .feedback-layout,
  #pricing .release-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  #connections .connections-copy,
  #faq .faq-grid > div:first-child,
  #feedback .feedback-intro { max-width: 680px; }
  #connections .platform-map { width: 100%; max-width: 760px; justify-self: center; }
}
@media (max-width: 800px) {
  main section:not(.hero) > .container,
  footer > .container.footer-inner { width: calc(100% - 40px); }
}
@media (max-width: 600px) {
  main section:not(.hero) > .container,
  footer > .container.footer-inner { width: calc(100% - 32px); }
  main .section-head.split { gap: 16px; }
}