/* Distinct section surfaces, with a shared blue-and-gold edge detail. */
body[data-phone-dock] main {
  display: flow-root;
  padding-block: 20px 24px;
  background: #eef3f6;
}

body[data-phone-dock] main > .section {
  position: relative;
  margin: 24px 22px 0;
  padding-inline: max(28px, calc(6% - 22px));
  border: 1px solid var(--section-border, #d5e2e9);
  border-radius: 24px;
}

body[data-phone-dock] main > .section:first-child { margin-top: 0; }

.solutions.section,
.demo-section.section,
.solution-overview.section,
.detail-hero.section,
.detail-capabilities.section,
.conference-section.section,
.more-solutions.section { background: #fff; }

.state-context.section { background: #e8f3fa; --section-border: #bed9e9; }
.about.about-partnership.section {
  background: radial-gradient(ellipse at 100% 0, #fffaf0, transparent 65%), #fff2cc;
  --section-border: #e5d59e;
}
.contact.team-contact.section {
  background: linear-gradient(120deg, #dceef9, #e9f5fb);
  --section-border: #b8d6e8;
}
.giveaway-section.section { background: #fff5d9; --section-border: #e5d59e; }
.events-contact.section { background: #e8f3fa; --section-border: #bed9e9; }
.solutions-intro.section,
.events-intro.section,
.solution-cta.section { --section-border: #0079c2; }

/* The short inlaid rule marks the beginning without adding vertical space. */
:is(.solutions, .state-context, .about-partnership, .demo-section, .team-contact,
    .solution-overview, .detail-capabilities, .detail-use, .conference-section,
    .giveaway-section, .events-contact, .more-solutions).section::after {
  content: "";
  position: absolute;
  top: -1px;
  left: max(28px, calc(6% - 22px));
  width: 96px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--blue) 0 72%, var(--accent) 72%);
  pointer-events: none;
}

:is(.about-partnership, .giveaway-section).section::after {
  background: linear-gradient(90deg, var(--accent) 0 72%, var(--blue) 72%);
}

.solutions .section-heading::after { display: none; }
.team-contact::before { opacity: .35; }
.product-source { margin: 0 22px; }

@media (min-width: 761px) {
  .solutions.section { padding-block: 64px 72px; }
  .solutions .section-heading { margin-bottom: 64px; }
  .demo-section.section { padding-block: 64px; }
  .contact.team-contact.section { padding-block: 64px; }

  :is(.section-heading > div, .about-statement, .demo-intro, .team-heading > div,
      .state-context-heading, .detail-section-heading, .use-intro,
      .conference-heading > div, .giveaway-story) > .eyebrow {
    display: inline-block;
    padding-bottom: 9px;
    border-bottom: 1px solid #adcbdc;
    color: #006da9;
  }

  .about-statement > .eyebrow,
  .giveaway-story > .eyebrow { border-bottom-color: #d7c36e; }

  /* Product rows remain open layouts, separated by a fine editorial rule. */
  .product-sequence { gap: 88px; }
  .product-row + .product-row { position: relative; }
  .product-row + .product-row::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -44px;
    height: 1px;
    background: #dce7ed;
    pointer-events: none;
  }
}

@media (max-width: 760px) {
  body[data-phone-dock] main { padding-block: 0 12px; }
  body[data-phone-dock] main > .section {
    margin: 12px 10px 0;
    padding: 26px max(12px, calc(var(--mobile-right) - 10px))
      26px max(12px, calc(var(--mobile-left) - 10px));
    border-radius: 16px;
  }
  body[data-phone-dock] main > :is(.solutions-intro, .events-intro):first-child {
    margin: 0;
    border-radius: 0 0 18px 18px;
  }
  :is(.solutions, .state-context, .about-partnership, .demo-section, .team-contact,
      .solution-overview, .detail-capabilities, .detail-use, .conference-section,
      .giveaway-section, .events-contact, .more-solutions).section::after {
    left: max(12px, calc(var(--mobile-left) - 10px));
    width: 64px;
    height: 3px;
  }
  .product-source { margin-inline: 10px; }

  /* State information stays folded and compact between the main sections. */
  main > .state-context-panel {
    margin: 12px 10px 0;
    border-color: #bed9e9;
    border-left: 3px solid var(--blue);
    border-radius: 12px;
    background: #e8f3fa;
  }
  .state-context-panel .state-context.section {
    position: relative;
    background: #f4f9fc;
    border-radius: 0 0 11px 11px;
  }
  .state-context-panel .state-context::after { display: none; }
  .state-context-panel[open] > summary { border-bottom-color: #bed9e9; }
}