/* V9 — one reading scale for mobile, including prices and disclosure text. */
/* Narrow desktop columns must also let their rotated documents grow in height. */
@media screen and (min-width: 900px) and (max-width: 1100px) {
  .material-scene { height: auto; min-height: 200px; padding-block: 24px; }
}

@media screen and (max-width: 899px) {
  :root {
    --mobile-body: 16px;
    --mobile-caption: 14px;
    --mobile-miniature: 12px;
    --mobile-leading: 1.6;
  }
  body { font-size: var(--mobile-body); line-height: var(--mobile-leading); }

  /* Reading copy, controls and required information share the same baseline. */
  body :is(
    .hero-description, .hero-format, .hero-price, .hero-actions .text-link,
    .hero-bottom, .hero-bottom > a, .section-heading > p:last-child,
    .product-demo .demo-caption, .product-demo .demo-status, .demo-play,
    .demo-tabs a, .demo-sample-link, .product-demo .demo-honesty,
    .product-demo .demo-motion-note, .workbook-edition,
    .workbook-table, .workbook-table caption, .workbook-table thead th,
    .workbook-table tbody th, .workbook-table td, .workbook-pending,
    .product-demo .workbook-calculation, .workbook-calculation > span,
    .product-demo .workbook-footnote, .workbook-margin-note > div,
    .workbook-margin-note > blockquote, .workbook-footer,
    .materials-intro > p, .materials-collection-heading > p,
    .material-item figcaption strong, .material-item figcaption > span,
    .material-extra-examples figcaption strong, .material-extra-examples figcaption > span,
    .materials-footer > p, .materials-footer .text-link,
    .detail-card p, .comparison-copy > p:not(.eyebrow), .scenario p,
    .scenario > span:last-child, .comparison-table, .comparison-table caption,
    .comparison-table tbody th, .comparison-table td, .status,
    .comparison-pending-total, .comparison-more summary, .comparison-note,
    .source-details summary, .source-details .details-content,
    .breathing-copy > p:last-child, .kit-description, .kit-features,
    .kit-price > span, .kit-price > span > span, .everything-line,
    .kit-card .purchase-button, .purchase-unavailable, .kit-common,
    .preview-status, .guarantee p, .guarantee .text-link, .cancellation-note,
    .faq-intro > p:last-of-type, .faq-list summary, .faq-list .details-content,
    .closing-layout p:not(.eyebrow), .closing-layout p.closing-price,
    .footer-top > p > span, .footer-top > .text-link, .footer-identity,
    .footer-links, .footer-bottom, .cookie-dialog, .cookie-dialog .note,
    .cookie-actions .button, .quick-navigation summary, .quick-navigation nav a,
    .sticky-choice > a > span > span
  ) { font-size: var(--mobile-body); line-height: var(--mobile-leading); }
  :is(.inside-section, .details-section, .kits-section) .section-heading > p:last-child {
    font-size: var(--mobile-body);
    line-height: var(--mobile-leading);
  }

  /* Short labels sit one step below body copy, never at the old 7–12 px. */
  body :is(.eyebrow, .hero-copy > .eyebrow, .hero-note .eyebrow,
    .product-demo .demo-kicker, .workbook-heading .demo-kicker,
    .product-demo .workbook-margin-note .demo-kicker,
    .workbook-toolbar, .workbook-toolbar > span, .workbook-page-number,
    .demo-tabs a > span, .materials-collection-heading .eyebrow,
    .photo-label, .comparison-masthead > span:last-child,
    .complete-ribbon, .faq-paper-heading > span:last-child,
    .announcement, .hero-photo-frame figcaption
  ) { font-size: var(--mobile-caption); line-height: 1.5; letter-spacing: .5px; }
  .announcement em { font-size: 18px; }
  .hero-description, .hero-format, .hero-price,
  .section-heading > p:last-child, .detail-card p,
  .closing-layout p:not(.eyebrow) { max-width: 38ch; }
  .centred > p:last-child { margin-inline: auto; }
  .hero-price { margin-top: 22px; }
  .hero-bottom { gap: 12px; letter-spacing: 0; }
  .hero-bottom > a { min-height: 44px; }
  .hero-note { width: 176px; padding: 20px 17px 16px; }
  .hero-note .eyebrow { letter-spacing: .3px; }
  .hero-photo-frame { padding-bottom: 45px; }
  .hero-photo-frame figcaption { padding-inline: 10px; bottom: 7px; }

  .demo-introduction { align-items: start; }
  .workbook-toolbar { flex-wrap: wrap; gap: 6px 16px; }
  .workbook-toolbar > span:first-child, .workbook-toolbar > span:last-child {
    max-width: none; white-space: normal; text-align: left;
  }
  .workbook-heading { padding-block: 24px; }
  .workbook-wedding { gap: 16px; }
  .workbook-edition { margin: 0; }
  .demo-tabs a { flex-direction: column; gap: 0; padding: 10px 4px; }
  .workbook-highlight strong { font-size: 20px; line-height: 1.4; }
  .workbook-table th, .workbook-table td { overflow-wrap: normal; }
  .workbook-table tbody th:first-child { padding-top: 16px; padding-bottom: 8px; }
  .workbook-table td { padding-bottom: 16px; }
  .workbook-page-number { white-space: nowrap; }
  .demo-play { min-width: 0; max-width: 100%; }
  .demo-sample-link { white-space: normal; }
  .product-demo .demo-honesty { max-width: 58ch; }
  .workbook-margin-note { gap: 18px; }
  .workbook-footer { flex-wrap: wrap; }

  .materials-intro, .materials-footer { flex-wrap: wrap; }
  .materials-grid { gap: 30px 22px; }
  .material-item figcaption { margin-top: 16px; }
  .material-item figcaption > span { margin-top: 5px; }
  .materials-collection-heading { margin-bottom: 24px; gap: 10px 16px; }

  /* Preview documents are miniature artwork; enlarge the sheets and their type together. */
  .materials-collections { display: block; }
  .materials-complete { margin-top: 44px; }
  .material-scene { height: auto; min-height: 264px; padding: 25px 18px; }
  .material-sheet, .material-guide, .material-question-card, .material-lesson-outline {
    width: 100%; max-width: 300px; height: auto; padding: 20px 16px;
  }
  .material-guide { min-height: 264px; }
  .material-question-back { width: 78%; height: 175px; }
  .material-priorities { min-height: 220px; }
  .material-priorities img { right: 16px; top: 65px; width: 39px; height: 40px; }
  .material-sheet > strong, .material-guide > strong,
  .material-question-card > strong, .material-lesson-outline > strong { font-size: 28px; line-height: 1.1; }
  .material-priorities > strong { font-size: 34px; }
  body :is(.material-masthead, .material-guide .material-masthead,
    .material-lesson-outline .material-masthead, .material-guide-edition,
    .material-sheet-tabs, .material-mini-table, .material-example-line,
    .material-example-line i, .material-lesson-outline > div,
    .material-preparation, .material-answer-line, .material-email-subject,
    .material-email p, .material-email-signoff, .material-payment-heading,
    .material-payment-row, .material-priority-prompt, .material-guide-subtitle
  ) { font-size: var(--mobile-miniature); line-height: 1.5; letter-spacing: 0; }
  .material-masthead { letter-spacing: .4px; }
  .material-question-card > p { font-size: 14px; line-height: 1.6; }
  .material-margin-note, .material-payment-note { font-size: 18px; }
  .material-mini-table { grid-template-columns: 1.2fr 1fr 1fr; }
  .material-mini-table > * { padding: 7px 4px; }
  .material-sheet-tabs { flex-wrap: wrap; gap: 8px; }
  .material-example-line { gap: 12px; padding-block: 7px; }
  .material-lesson-outline > div { padding-block: 8px; }
  .material-lesson-outline > div > span { font-size: 20px; }
  .material-guide-subtitle, .material-guide-edition { margin-top: 16px; }
  .material-payment-heading, .material-payment-row { grid-template-columns: 1.3fr 1fr 28px; }
  .material-extra-examples { flex-wrap: wrap; gap: 24px; }
  .material-example-stack { flex-basis: 210px; height: 100px; }
  .material-example-stack > span { width: 72px; height: 90px; font-size: 12px; padding: 10px 6px; letter-spacing: 0; }
  .material-example-stack > span:nth-child(2) { left: 67px; }
  .material-example-stack > span:nth-child(3) { left: 134px; }
  .material-example-stack b { font-size: 34px; }

  .photo-label { max-width: calc(100% - 24px); left: 12px; bottom: 12px; padding: 7px 10px; }
  .comparison-table { line-height: 1.6; }
  .comparison-table th, .comparison-table td { overflow-wrap: normal; }
  .comparison-table tbody th { padding-block: 16px 6px; letter-spacing: 0; }
  .comparison-table td { padding-block: 6px 16px; }
  .source-details .details-content { padding-top: 12px; }
  .source-details a, .footer-identity a, .faq-list a { overflow-wrap: anywhere; }
  .comparison-note { padding-top: 20px; }
  .comparison-more summary, .source-details summary { line-height: 1.5; padding-block: 16px; }
  .breathing-copy > p:last-child { max-width: 38ch; }
  .kit-card h3 { font-size: 38px; min-height: 0; line-height: 1.1; }
  .kit-card > .eyebrow { min-height: 0; }
  .kit-description { min-height: 0; max-width: 38ch; margin-top: 14px; }
  .kit-price { display: block; padding: 0 0 22px; margin-top: 24px; }
  .kit-price > strong { display: block; font-size: 70px; line-height: 1; }
  .kit-price > span { display: block; margin-top: 14px; }
  .kit-price > span > span { display: block; margin-top: 4px; }
  .kit-price > span > br { display: none; }
  .kit-drawing { width: 60px; height: 66px; right: 0; top: 4px; }
  .kit-features { padding-block: 20px 28px; }
  .kit-features li + li { margin-top: 14px; }
  .kit-card .purchase-button { white-space: normal; min-width: 0; padding: 14px 12px; min-height: 64px; }
  .purchase-unavailable { margin-top: 14px; }
  .kit-common { margin-top: 32px; }
  .kit-common span + span { margin-top: 10px; }
  .preview-status { margin-top: 28px; }
  .guarantee { display: block; text-align: left; margin-top: 40px; padding-top: 12px; }
  .guarantee-seal { width: 128px; height: 128px; margin: 0 0 28px 4px; }
  .guarantee-seal > strong { font-size: 56px; }
  .guarantee-seal > span { font-size: 12px; line-height: 1.4; letter-spacing: .5px; max-width: 90px; align-self: center; }
  .guarantee .text-link { display: inline-block; padding-block: 10px; }
  .cancellation-note { margin-top: 24px; }
  .faq-list summary { padding-block: 20px; }
  .faq-list .details-content { padding-bottom: 22px; }
  .faq-paper-heading > span:last-child { white-space: normal; }
  .footer-top > p > span { display: block; margin-top: 10px; }
  .footer-links { gap: 8px 22px; }
  .footer-links a, .footer-bottom a { min-height: 44px; }
  .footer-bottom { flex-wrap: wrap; gap: 6px 20px; }
  .cookie-dialog { padding: 24px 20px; }
  .cookie-actions .button { min-width: 0; padding-inline: 12px; }
  .sticky-choice > a { min-width: 0; justify-content: center; }
  .sticky-choice > a > span:first-child { min-width: 0; font-size: 16px; }
  .sticky-choice strong { font-size: 24px; line-height: 1.2; }
  .quick-navigation summary { min-width: 94px; padding-inline: 12px; gap: 8px; }
}

@media screen and (max-width: 640px) {
  .hero h1 { font-size: clamp(40px, 10.5vw, 48px); line-height: 1.08; }
  .inside-section .section-heading h2, .comparison-copy h2,
  .faq-intro h2, .closing-layout h2, .section-heading h2 { font-size: 38px; line-height: 1.12; }
  .breathing-copy h2 { font-size: 34px; line-height: 1.15; }
  .detail-card h3, .materials-intro h3 { font-size: 30px; line-height: 1.15; }
  .materials-collection-heading h4 { font-size: 28px; }
  .workbook-heading h3 { font-size: 32px; line-height: 1.15; }
  .workbook-page-heading h4 { font-size: 26px; line-height: 1.2; }
  .guarantee h3 { font-size: 32px; line-height: 1.15; }
  .hero-actions { margin-top: 26px; gap: 14px; }
  .hero-visual { margin-top: 50px; margin-bottom: 20px; }
  .hero-note { bottom: 14px; left: 0; }
  .hero-bottom { margin-top: 22px; align-items: flex-start; }
  .inside-section { padding-block: 54px 44px; }
  .workbook-wedding { margin-top: 20px; }
  .workbook-wedding .line-art { width: 46px; height: 56px; }
  .workbook-page-heading { flex-wrap: wrap; }
  .workbook-page-heading h4 { max-width: 100%; }
  .workbook-page-number { padding-top: 0; }
  .workbook-footer { padding-block: 18px; }
  .demo-controls { padding-block: 18px; }
  .demo-below { padding-top: 24px; }
  .materials-showcase { padding-block: 48px; }
  .materials-grid { grid-template-columns: minmax(0,1fr); }
  .material-scene { min-height: 264px; padding: 26px 24px; }
  .material-item { max-width: 390px; width: 100%; margin-inline: auto; }
  .material-extra-examples { margin-top: 30px; }
  .materials-footer { margin-top: 36px; gap: 12px; }
  .comparison-masthead { flex-wrap: wrap; gap: 12px; }
  .comparison-masthead > span:last-child { white-space: normal; }
  .comparison-table thead th { font-size: 25px; line-height: 1.15; }
  .starting-row td strong { font-size: 29px; }
  .starting-row td strong span { font-size: 16px; }
  .faq-intro { margin-bottom: 32px; }
  .faq-paper { padding: 24px 20px 12px; }
  .closing-layout p:not(.eyebrow) { max-width: 35ch; }
}