/* Shared spacing and text alignment for the phone reading layout. */
@media (max-width: 680px) {
  :root {
    --mobile-icon: 24px;
    --mobile-icon-gap: 12px;
    --mobile-text-inset: calc(var(--mobile-icon) + var(--mobile-icon-gap));
    --mobile-card-pad: 24px;
    --mobile-row-pad: 24px;
    --mobile-section-pad: 12px;
    --mobile-section-gap: calc(2 * var(--mobile-section-pad));
  }

  /* A clear card heading and two consistent weights for the mobile facts. */
  .facts-card .facts-title {
    display: block;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.02em;
  }
  .facts-card .facts-title::after { display: none; }
  .facts-card .facts-grid dt {
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .07em;
  }
  .facts-card .facts-grid dd {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.02em;
  }
  .facts-card .facts-grid .fact-sub,
  .facts-card .facts-condition {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
  }
  /* Centred facts: two matched pairs, then the application stage on its own row. */
  .facts-card .facts-title,
  .facts-card .facts-grid,
  .facts-card .facts-condition { text-align: center; }
  .facts-card .facts-grid > div {
    padding: 20px 8px;
    border-top: 1px solid #e0e8ef;
    border-left: 0;
  }
  .facts-card .facts-grid > div:nth-child(-n+2) { padding-top: 0; border-top: 0; }
  .facts-card .facts-grid > div:nth-child(even) { border-left: 1px solid #e0e8ef; }
  .facts-card .facts-grid > div:nth-child(3) { grid-column: auto; }
  .facts-card .facts-grid > div:last-child { grid-column: 1 / -1; }
  .facts-card .facts-title,
  .facts-card .facts-grid .fact-sub,
  .facts-card .facts-condition { text-wrap: balance; }

  /* One 24px gap between sections, split equally across background boundaries. */
  .listing { padding-block: var(--mobile-section-gap) 0; }
  .listing-grid { gap: var(--mobile-section-gap); }
  .industry,
  .term-section,
  .process-section,
  .apply { padding-block: var(--mobile-section-pad); }
  /* Each photograph keeps the page gutter beside, between and below it. */
  .industry { padding-bottom: var(--gutter); }
  .industry-grid { gap: var(--gutter); }

  /* Separate the process card, then give the application its own breathing room. */
  .process-section { padding-bottom: var(--mobile-card-pad); }
  .apply { padding-block: 40px; }
  .apply-grid { gap: var(--mobile-card-pad); }
  .apply-copy { padding: 0; }
  /* Keep the mobile transition focused on the steps and application heading. */
  .process-design .selection-frame .selection-feature,
  .apply-copy > .side-label { display: none; }
  .apply-copy > p:not(.side-label) { margin-top: 16px; }
  .apply-guide { margin-top: var(--mobile-card-pad); padding-inline: var(--mobile-card-pad); max-width: none; }

  .block h2,
  .industry-heading h2,
  .section-heading h2,
  .apply-copy h2 {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.025em;
    text-wrap: initial;
  }
  /* Each divider gets one 24px gap on either side, including list endings. */
  .listing-body > .block { padding-block: var(--mobile-row-pad); }
  .listing-body > .block-first { padding-top: 0; }
  .listing-body > .block:last-child { padding-bottom: var(--mobile-section-pad); }
  .listing-body > .block:has(> .spec:last-child) { padding-bottom: 0; }

  .block h2 { margin-bottom: 16px; }
  .block-intro { margin-bottom: 24px; }
  .section-heading,
  .industry-heading { margin-bottom: 24px; }
  .section-heading .side-label,
  .apply-copy .side-label { margin-bottom: 16px; }

  /* Term and process share one introduction: an underlined label, then the
     heading on the main content edge, on a 24px spacing scale. */
  .term-section,
  .process-section { padding-top: var(--mobile-card-pad); }
  .term-section .section-heading,
  .process-section .section-heading {
    padding-inline: 0;
    margin-bottom: var(--mobile-card-pad);
  }
  .term-section .section-heading .side-label,
  .process-section .section-heading .side-label {
    border-top: 0;
    padding-top: 0;
    border-bottom: 2px solid currentColor;
    padding-bottom: calc(var(--mobile-card-pad) / 2);
    margin-bottom: 16px;
  }
  .process-design .selection-frame .capacity { --panel-cut: var(--mobile-card-pad); }
  .process-design .selection-frame .capacity::after {
    left: auto;
    right: -1px;
    background: linear-gradient(45deg,
      transparent calc(50% - .5px), var(--panel-edge) calc(50% - .5px),
      var(--panel-edge) calc(50% + .5px), var(--bone) calc(50% + .5px));
  }

  .panel-inner { padding: var(--mobile-card-pad); }
  .partnership-frame .term-feature { padding: var(--mobile-card-pad); }
  .partnership-frame .capacity { padding: var(--mobile-card-pad) var(--mobile-card-pad) 0; }
  .form { --form-pad: var(--mobile-card-pad); }
  .panel-inner h2,
  .partnership-frame .capacity > h3,
  .form-header h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.02em;
    text-wrap: initial;
  }
  .partnership-frame .capacity > h3 { margin-bottom: 24px; }

  .spec-row,
  .spec-row:last-child {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-block: var(--mobile-row-pad);
  }
  .spec dt {
    display: grid;
    grid-template-columns: var(--mobile-icon) minmax(0, 1fr);
    align-items: start;
    gap: var(--mobile-icon-gap);
  }
  .spec dt .ui-icon {
    width: var(--mobile-icon);
    height: var(--mobile-icon);
    margin: 0;
  }
  .spec dd { margin-inline-start: var(--mobile-text-inset); }

  .partnership-frame .capacity-list {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .partnership-frame .capacity-list li {
    display: grid;
    grid-template-columns: var(--mobile-icon) minmax(0, 1fr);
    align-items: start;
    gap: var(--mobile-icon-gap);
    padding: var(--mobile-row-pad) 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .partnership-frame .icon-well,
  .partnership-frame .capacity-list .ui-icon {
    width: var(--mobile-icon);
    height: var(--mobile-icon);
    margin: 0;
  }
  .spec dt,
  .partnership-frame .capacity-list strong,
  .partnership-frame .capacity-list h4 {
    min-height: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -.01em;
  }
  .spec dd,
  .partnership-frame .capacity-list p {
    font-size: 16px;
    line-height: 1.6;
  }
  .partnership-frame .capacity-list p { margin-top: 8px; }

  .panel-facts > div { padding-left: var(--mobile-text-inset); }
  .panel-facts .ui-icon {
    top: 0;
    width: var(--mobile-icon);
    height: var(--mobile-icon);
  }
  .reqs { gap: 16px; }
  .reqs li { font-size: 16px; line-height: 1.6; }
}

/* Keep longer fact values within the two-column layout on small phones. */
@media (max-width: 380px) {
  .facts-card .facts-grid dd { font-size: 18px; }
  .facts-card .facts-grid > div { padding-inline: 4px; }
}