/* Reading boundaries for phone layouts only. */
@media (max-width: 700px) {
  main p, main dd, main li, main label, main h1, main h2, main h3 {
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
    text-wrap: pretty;
    letter-spacing: 0;
  }
  main h1, main h2, main h3 { text-wrap: balance; }
  .hero h1 .keep-line { white-space: normal; }
  .hero h1 { font-size: 30px; line-height: 1.55; }
  .section .sec-title { font-size: 28px; line-height: 1.55; }
  .section .sec-title .phrase { display: inline; }
  .selected-item h3 .phrase { display: block; }
  #works .work-copy h3 { font-size: 20px; text-wrap: balance; }
  .note-panel h2 { font-size: 26px; text-wrap: balance; }
  #flow .step p { text-wrap: pretty; }
  main .section p, main .section dd, main .section dt, main .section label {
    font-family: var(--gothic);
  }
  .selected-item dd, #works .work-copy p { font-size: 14px; line-height: 1.85; }
  main > .section {
    padding-top: 48px;
    padding-bottom: 48px;
    border-top: 1px solid #d8dcda;
  }
  main > #works, main > #flow, main > #faq {
    background: #f0f2f1;
  }
  main > #problems, main > #note, main > #contact {
    background: #fff;
  }
  .section > .kicker { margin-bottom: 14px; }
  .section > .sec-title { margin-bottom: 18px; }
  .section > .sec-lead { line-height: 1.9; margin-bottom: 28px; }
  .selected-grid { gap: 0; margin-top: 28px; }
  .selected-item { padding-bottom: 32px; }
  .selected-item + .selected-item {
    border-top: 1px solid #cdd3cf;
    padding-top: 32px;
  }
  .selected-item:last-child { padding-bottom: 0; }
  .selected-name { margin-top: 18px; font-weight: 600; }
  .selected-item h3 { margin-bottom: 20px; }
  .selected-item dl { row-gap: 18px; }
  .selected-item dt { padding-top: 2px; color: #505952; }
  .selected-item .text-link { margin-top: 4px; min-height: 44px; }
  #works .works-grid { gap: 0; }
  #works .work-card { padding-bottom: 28px; }
  #works .work-card + .work-card {
    border-top: 1px solid #cdd3cf;
    padding-top: 28px;
  }
  #works .work-copy { padding-top: 18px; }
  #works .works-group-title { border-top: 1px solid #cdd3cf; padding-top: 24px; }
  .catalog-filters { margin-top: 24px; margin-bottom: 28px; }
  #problems .example-tabs { margin-top: 24px; }
  #problems .example-panel { border-top: 2px solid #828c85; }
  #problems .example-panel > div + div { border-top: 1px solid #d5dad6; }
  #flow .steps-grid { display: block; margin-top: 28px; }
  #flow .step {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px 14px;
    padding: 24px 0;
    border-bottom: 1px solid #cdd3cf;
  }
  #flow .step .num { grid-row: 1 / 3; align-self: start; padding-top: 3px; }
  #flow .step b { margin: 0; font-size: 19px; }
  #flow .step p { grid-column: 2; font-size: 14px; line-height: 1.9; }
  #flow .step::after { display: none; }
  #note .note-panel { padding: 0; border: 0; background: transparent; gap: 24px; }
  #note .note-panel h2 { margin-bottom: 18px; }
  #note .reading-link { display: block; border-top: 1px solid #d8dcda; padding-top: 20px; margin-top: 28px; }
  #faq .faq-item { padding-block: 20px; border-bottom-color: #cdd3cf; }
  #faq .faq-item summary { font-size: 15px; line-height: 1.7; }
  #faq .faq-item p { font-size: 14px; line-height: 1.9; }
  #contact .consult-grid { margin-top: 28px; gap: 32px; }
  #contact .consult-grid > div + div { border-top: 1px solid #d8dcda; padding-top: 32px; }
  #contact .consult-grid .btn-primary, #consult-mail button { width: 100%; justify-content: center; min-height: 52px; }
  .work-hero { padding-bottom: 32px; }
  .work-hero + .section { border-top: 0; }
  .work-cta { border-top: 1px solid #d8dcda; background: #f0f2f1; padding-top: 40px; padding-bottom: 40px; }
}