/* V14: readable editorial hierarchy beyond the home hero.
   Load after v7-polish.css and before the home hero-specific stylesheets.
   These are structural section selectors: embedded product UI, navigation,
   controls and footer/legal typography deliberately retain their own scale. */

:root {
  --df-section-label-size: 16px;
  --df-section-copy-size: 20px;
  --df-section-caption-size: 14px;
}

/* Section labels, not the tiny labels inside the illustrative app. */
.home-page .intro-top > .eyebrow,
.home-page .marketing-heading > div > .eyebrow,
.home-page .interlude-top > div > .eyebrow,
.home-page .presentation-heading > div > .eyebrow,
.home-page .presentation-note > .eyebrow,
.home-page .reply-copy > .eyebrow,
.home-page .closing > .wrap > .eyebrow,
.home-page .story-copy > .story-kicker,
.inner-page .intro > .eyebrow,
.inner-page .section > .wrap > .eyebrow,
.inner-page .section.wrap > .eyebrow,
.inner-page .section-head > div > .eyebrow,
.inner-page .duet > div > .eyebrow,
.inner-page .pull-photo > div > .eyebrow,
.inner-page .form-layout > div > .eyebrow {
  font-size: var(--df-section-label-size);
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: .09em;
}

/* Comfortable reading copy with a little more measure at the larger size. */
.home-page .intro-bottom > p,
.home-page .marketing-heading > .body-copy,
.home-page .story-step > p,
.home-page .interlude-top > div > p:not(.eyebrow),
.home-page .context-strip > div > p,
.home-page .presentation-heading > .body-copy,
.home-page .presentation-note > p:not(.eyebrow),
.home-page .reply-copy > .body-copy,
.home-page .day-heading > .body-copy,
.home-page .day-photos figcaption > p,
.home-page .closing > .wrap > p:not(.eyebrow),
.inner-page .intro-bottom > p,
.inner-page .portrait-opening .intro-bottom > p,
.inner-page .section-head > p,
.inner-page .duet > p,
.inner-page .duet > div > p:not(.eyebrow):not(.quiet),
.inner-page .pull-photo > div > p:not(.eyebrow),
.inner-page .numbered p,
.inner-page .faq p {
  font-size: var(--df-section-copy-size);
  line-height: 1.6;
  letter-spacing: -.015em;
}
/* One legacy editorial paragraph carries an inline 16px size. */
.inner-page .duet > p[style*="font-size"] { font-size: var(--df-section-copy-size) !important; }

.home-page .intro-bottom > p { max-width: 38ch; }
.home-page .marketing-heading > .body-copy { max-width: 32ch; }
.home-page .interlude-top > div > p:not(.eyebrow) { max-width: 32ch; }
.home-page .context-strip > div > p { max-width: 34ch; }
.home-page .presentation-heading > .body-copy { max-width: 35ch; }
.home-page .presentation-note > p:not(.eyebrow) { max-width: none; }
.home-page .reply-copy > .body-copy { max-width: 34ch; }
.home-page .day-heading > .body-copy { max-width: 32ch; }
.home-page .day-photos figcaption > p { max-width: 34ch; }
.home-page .closing > .wrap > p:not(.eyebrow) { max-width: 35ch; }
.inner-page .intro-bottom > p { max-width: 44ch; }
.inner-page .section-head > p { max-width: 40ch; }
.inner-page .duet > p,
.inner-page .duet > div > p:not(.eyebrow):not(.quiet) { max-width: 40ch; }
.inner-page .pull-photo > div > p:not(.eyebrow) { max-width: 36ch; }
.inner-page .faq p { max-width: 68ch; }
.inner-page .role-panel ul,
.inner-page .checklist span { font-size: 18px; line-height: 1.65; }
.inner-page .checklist b { font-size: 23px; line-height: 1.3; }

/* Captions remain quieter than body copy, but no longer shrink to footnotes. */
.home-page .photo-ledger figcaption,
.home-page .detail-footer p,
.home-page .presentation-caption,
.home-page .story-step > small,
.inner-page .image-strip figcaption,
.inner-page .section.wrap > .demo-label {
  font-size: var(--df-section-caption-size);
  line-height: 1.6;
}
.home-page .photo-ledger figcaption { letter-spacing: .055em; padding-top: 14px; }
.home-page .detail-footer p { max-width: 23ch; }
.home-page .presentation-caption { max-width: 76ch; }
.inner-page .image-strip figure { height: auto; }
.inner-page .mini-agenda span { font-size: 15px; line-height: 1.5; letter-spacing: .09em; }
.inner-page .motion-note { font-size: 14px; line-height: 1.65; }

/* Make room in the story's existing pinned layout instead of clipping text.
   Keep all animation semantics and the app preview's own type scale intact. */
@media (min-width: 761px) and (min-height: 601px) {
  .home-page .story-grid { grid-template-columns: minmax(0, .48fr) minmax(0, 1fr); gap: 30px; }
  .home-page .story-copy { min-width: 0; padding-right: 0; }
  .home-page .story-stage { padding-top: 84px; padding-bottom: 40px; }
  .home-page .story-copy > .story-kicker { margin-bottom: 20px; }
  .home-page .story-step h3 { margin-bottom: 16px; }
  .home-page .story-step > p,
  .home-page .story-step > small { max-width: 100%; }
  .home-page .story-step > small { margin-top: 18px; }
  .home-page .story-tabs { margin-top: 20px; }
  .home-page .presentation-side { min-width: 0; }
  .home-page .presentation-note > .eyebrow { margin-bottom: 15px; }
}

@media (max-width: 760px) {
  :root { --df-section-label-size: 14px; --df-section-copy-size: 18px; }
  .home-page .intro-bottom > p,
  .home-page .marketing-heading > .body-copy,
  .home-page .interlude-top > div > p:not(.eyebrow),
  .home-page .context-strip > div > p,
  .home-page .presentation-heading > .body-copy,
  .home-page .reply-copy > .body-copy,
  .home-page .day-heading > .body-copy,
  .home-page .day-photos figcaption > p { max-width: 100%; }
  .home-page .story-copy { min-height: 0; }
  .home-page .story-copy > .story-kicker { margin-bottom: 22px; }
  .home-page .story-step > p,
  .home-page .story-step > small { max-width: 100%; }
  .home-page .marketing-heading > .body-copy,
  .home-page .presentation-heading > .body-copy,
  .home-page .day-heading > .body-copy { margin-top: 28px; }
  .home-page .presentation-side { align-self: stretch; }
  .home-page .presentation-note { padding-top: 28px; }
  .home-page .presentation-note > .eyebrow { margin-bottom: 18px; }
  .home-page .presentation-note > p:not(.eyebrow) { max-width: 36ch; }
  .home-page .context-strip h3 { font-size: 25px; line-height: 1.2; }
  .home-page .day-photos h3 { font-size: 30px; line-height: 1.15; }
  .home-page .day-photos figure,
  .home-page .day-photos figure:nth-child(2),
  .home-page .day-photos figure:nth-child(3) { margin-bottom: 48px; }
  .home-page .photo-ledger figcaption { letter-spacing: .035em; }
  .home-page .presentation-caption { margin-top: 28px; }
  .inner-page .intro-bottom > p,
  .inner-page .portrait-opening .intro-bottom > p,
  .inner-page .section-head > p,
  .inner-page .duet > p,
  .inner-page .duet > div > p:not(.eyebrow):not(.quiet),
  .inner-page .pull-photo > div > p:not(.eyebrow) { max-width: 100%; }
  .inner-page .section-head { margin-bottom: 36px; }
  .inner-page .section-head .eyebrow,
  .inner-page .duet > div > .eyebrow { margin-bottom: 24px; }
  .inner-page .mini-agenda span { font-size: 14px; }
  .inner-page .checklist b { font-size: 22px; }
}

/* Short landscape keeps the normal-flow layouts already supplied by V3. */
@media (orientation: landscape) and (max-height: 600px) {
  :root { --df-section-label-size: 14px; --df-section-copy-size: 18px; }
  .home-page .story-grid { grid-template-columns: minmax(0, .55fr) minmax(0, 1fr); }
  .home-page .story-step > p { font-size: 18px; }
  .home-page .presentation-stage { align-items: start; }
}