/* Shared reading rails and panel insets for the existing SaaS composition.
   Presentation only: links, dialog triggers, card motion and copy stay intact. */
:root {
  --layout-gap: clamp(28px, 4vw, 56px);
  --panel-inset: 28px;
}

/* Each desktop story follows the same two-column rail. */
#websites .section-heading,
#integrations .section-heading,
#experience .callcapture-layout,
#integrations .integration-feature,
#contact .contact-start {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--layout-gap);
}
#websites .section-heading,
#integrations .section-heading {
  align-items: end;
  margin-bottom: 36px;
}
#websites .section-heading > p,
#integrations .section-heading > p {
  max-width: 44ch;
  margin: 0;
  padding: 0;
}
#websites .section-heading h2,
#integrations .section-heading h2,
#contact .contact-start h2 { margin: 0; }
#websites .section-heading .eyebrow,
#integrations .section-heading .eyebrow,
#experience .callcapture-copy > .eyebrow,
#contact .contact-start .eyebrow {
  margin: 0 0 20px;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .13em;
}
#experience .callcapture-layout,
#integrations .integration-feature { align-items: start; }
#experience .callcapture-copy,
#integrations .integration-story,
#contact .contact-start > div { min-width: 0; }
#experience .callcapture-preview,
#integrations .document-workspace {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* Image edges, panel text and actions share a repeatable inset. */
#websites .website-examples-grid { gap: var(--layout-gap); }
#websites .website-example-body {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) 44px 24px;
  padding: var(--panel-inset);
}
#websites .website-example-body > p:not(.eyebrow) { align-self: start; }
#websites .website-example-links {
  grid-row: 4;
  align-self: end;
  margin: 0;
  padding: 0;
  min-height: 44px;
}
#websites .website-preview-note {
  grid-row: 5;
  align-self: center;
  margin: 0;
  min-height: 24px;
}
#experience .callcapture-preview { padding: var(--panel-inset); }
#integrations .document-workspace-header { padding: 24px var(--panel-inset); }
#integrations .document-tabs { padding-inline: var(--panel-inset); }
#integrations .document-sheet { padding: var(--panel-inset); }
#integrations .document-workspace-footer { padding: 16px var(--panel-inset); }

/* The next step follows the same rail and numbered-list baseline. */
#contact .contact-start { align-items: end; }
#contact .contact-start > div:last-child > p { margin: 0; max-width: 44ch; }
#contact .contact-start .button { margin-top: 24px; }
#contact .getting-started { gap: var(--layout-gap); }
#contact .getting-started > li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  min-width: 0;
}
#contact .getting-started > li > span { padding-top: 4px; line-height: 1.5; }
#contact .getting-started h3 { margin: 0; font-size: 23px; line-height: 1.3; }
#contact .getting-started p { margin-top: 6px; }

@media (min-width: 761px) {
  .site-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 32px;
  }
  .site-footer > span { margin-left: 0; }
}

/* One intentional tablet stack replaces mixed side-by-side breakpoints. */
@media (max-width: 1000px) {
  :root { --layout-gap: 32px; --panel-inset: 24px; }
  #websites .section-heading,
  #integrations .section-heading,
  #experience .callcapture-layout,
  #integrations .integration-feature,
  #contact .contact-start {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }
  #websites .section-heading > p,
  #integrations .section-heading > p,
  #contact .contact-start > div:last-child > p { max-width: 54ch; }
  #integrations .integration-story { max-width: 600px; }
}

@media (max-width: 760px) {
  #websites .website-examples-grid { grid-template-columns: minmax(0, 1fr); }
  #websites .website-example-body { grid-template-rows: auto auto auto 44px auto; }
}

@media (max-width: 580px) {
  :root { --layout-gap: 24px; --panel-inset: 20px; }
  #websites .section-heading,
  #integrations .section-heading { gap: 16px; margin-bottom: 24px; }
  #websites .section-heading .eyebrow,
  #integrations .section-heading .eyebrow,
  #experience .callcapture-copy > .eyebrow,
  #contact .contact-start .eyebrow { margin-bottom: 16px; font-size: 9px; }
  #experience .callcapture-layout,
  #integrations .integration-feature,
  #contact .contact-start { gap: 26px; }
  #integrations .document-workspace-header { padding-block: 18px; }
  #integrations .document-tabs { padding-inline: 12px; }
  #integrations .document-workspace-footer { padding-block: 14px; }
}