/* Phone layouts: preserve readable copy while giving each component a
   deliberate stack, comfortable actions, and consistent section spacing. */
@media (min-width: 1041px) {
  .smartnav__links .smartnav__home { display: none; }
}

@media (min-width: 761px) {
  .focus-jumps a { font-size: 1rem; }
  .focus-jumps a > span { font-size: inherit; }
  .pg .agenda a { font-size: 1.0625rem; }
  .agenda__n { font-size: .875rem; }
}

@media (max-width: 900px) {
  /* Authored desktop lines also become cramped in small tablet columns. */
  .h-line, .s4__h-line { display: inline; text-wrap: inherit; }
  .focus-hero__h em, .site-feature__h em { display: inline; }
  .s4__h-line + .s4__h-line::before { content: " "; }
  html[lang="ja"] .s4__h-line, html[lang="ja"] .pg .h-line { word-break: normal; }
  html[lang="ja"] .focus-hero__h, html[lang="ja"] .site-feature__h { word-break: normal; }
  html[lang="ja"] .s4__h-line + .s4__h-line::before { content: ""; }
}

@media (max-width: 760px) {
  /* Contents navigation stays available on desktop only. */
  .focus-jumps, .agenda { display: none; }

  .pg { padding: 6rem 1.25rem 0; }
  .s4__inner { padding-inline: 1.25rem; }
  .s4 { padding-block: 3.5rem; }
  .s4__head { gap: 1rem; margin-bottom: 1.75rem; }
  .s4__head-left { gap: .75rem; }
  .s4__head-right { gap: 1rem; }
  .s4__chapter, .chapter { gap: .625rem; letter-spacing: .09em; }
  .s4__chapter-line, .chapter__line { width: 1.5rem; flex: none; }
  .s4__chapter-name, .chapter__name { min-width: 0; }
  .slide__head--solo .chapter { width: auto; }
  .pg .hero, .co-head { padding-block: 2rem; }
  .pg .hero.deck-hero { padding-block: 2rem 2.5rem; gap: 1.75rem; }
  .pg section.block, .pg section.block.slide { padding-block: 2.75rem; }
  .slide__head { gap: 1rem; margin-bottom: 1.5rem; }
  .pg .deck-hero .lede, .pg .hero > .lede { font-size: 1rem; line-height: 1.75; }
  .pg .deck-hero .lede { margin-top: 1rem; }
  .pg .slide__note, .pg .slide__lede { font-size: 1rem; line-height: 1.75; }
  .pg .slide__lede { margin-bottom: 1.5rem; }

  .pg .deck-hero h1, .focus-hero--brand .focus-hero__h { font-size: clamp(1.875rem, 8vw, 2.25rem); line-height: 1.22; }
  .s4 .s4__h, .site-feature__h, .contact4 .contact4__h,
  .pg .slide__h, .pg .ask h2 { font-size: clamp(1.75rem, 7vw, 2rem); line-height: 1.25; }
  html[lang="ja"] .pg h1, html[lang="ja"] .pg .deck-hero h1,
  html[lang="ja"] .focus-hero--brand .focus-hero__h { font-size: clamp(1.625rem, 7vw, 1.875rem); line-height: 1.5; word-break: normal; }
  html[lang="ja"] .s4 .s4__h, html[lang="ja"] .site-feature__h,
  html[lang="ja"] .contact4 .contact4__h, html[lang="ja"] .pg .slide__h,
  html[lang="ja"] .pg .ask h2 { font-size: clamp(1.625rem, 6.5vw, 1.875rem); line-height: 1.5; word-break: normal; }

  /* Shared actions fill the available width instead of wrapping unevenly. */
  .cta-row, .focus-hero__actions, .gameb__cta-row, .labb__cta-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .625rem; width: 100%; }
  :is(.cta-row,.focus-hero__actions,.gameb__cta-row,.labb__cta-row) > :is(.btn,.cta,.gameb__cta,.labb__cta) { width: 100%; margin: 0; }
  .focus-invite .btn, .focus-build__intro .btn, .ask-card .cta,
  .s4__head-cta .btn, .contact4__mail .btn { width: 100%; }
  .btn > [aria-hidden], .btn__arrow { flex: none; }
  .contact4__direct, .contact4__mail { width: 100%; }
  .pg section.ask { padding: 2rem 1.25rem; margin-bottom: 2.5rem; }

  /* site.js moves these existing actions after their section's content,
     keeping keyboard and screen-reader order aligned with the layout. */
  [data-mobile-cta-end] { width: 100%; margin-block: 1.5rem 0; }
  .focus-hero__inner > [data-mobile-cta-end],
  .focus-build > [data-mobile-cta-end] { margin-block: 0; }

  /* A compact brand opening. */
  .focus-hero--brand { padding: 7rem 1.25rem 2.5rem; }
  .focus-hero--brand .focus-hero__inner { gap: 1.5rem; }
  .focus-brand.hero4__wordmark { top: 0; font-size: clamp(4.5rem, 23.5vw, 7.5rem); margin-bottom: .75rem; }
  .focus-hero__lede { margin-block: 1rem; }
  :is(.focus-hero,.deck-hero) .tool-strip { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; }
  :is(.focus-hero,.deck-hero) .tool-strip > span { text-align: center; padding: .625rem .25rem; }
  .focus-invite, .focus-build { padding: 1.25rem; gap: 1.25rem; }
  .focus-invite { margin-block: 1.5rem 0; }
  .focus-build__examples { padding-top: 1.25rem; }
  .workflow-card__body, .focus-games .gameb__body { padding: 1.25rem; }
  .workflow-card .workflow-art { height: 10.5rem; padding-block: .75rem; }
  .site-feature__grid { gap: 1.5rem; margin-top: 1.5rem; }
  .site-feature__h { margin-bottom: 1rem; }
  .site-feature__copy .focus-hero__actions { margin-top: 1.5rem; }
  .focus-games .gameb__shot { height: 13rem; flex-basis: 13rem; }
  .bento4--labs-duo .labb__body { padding: 1.25rem; }
  .bento4--labs-duo .labb__preview--mock { min-height: 13rem; }
  .bento4--labs-duo .labb__preview { max-height: 14rem; }

  /* Keep the mobile reading path visible even during fast scrolling. */
  .js-reveal .reveal, .js-reveal .reveal.is-visible { opacity: 1; transform: none; animation: none; }

  /* Preserve the three footer columns, with larger touch areas. */
  .footer4 { padding: 1.75rem 1.25rem; }
  .footer4__inner { grid-template-columns: 1.25fr .85fr 1fr; gap: 1.25rem .75rem; }
  .footer4__brand-block { grid-column: 1 / -1; }
  .footer4__col { gap: 0; min-width: 0; }
  .footer4__col a { display: flex; align-items: center; min-height: 2.75rem; padding-block: .375rem; line-height: 1.5; }
  .footer4__h { margin-bottom: .5rem; }
  .smartnav__settings-btn, .smartnav__menu { min-height: 2.75rem; }
}

@media (max-width: 480px) {
  /* Keep the full contact address readable beside the phone controls. */
  html { scroll-padding-top: 8.5rem; }
  .smartnav { grid-template-columns: minmax(0,1fr) auto auto; gap: .5rem; padding: .625rem .75rem; border-radius: 1.5rem; }
  .smartnav__brand { grid-column: 1; grid-row: 1; }
  .smartnav__right { display: contents; }
  .smartnav__settings { grid-column: 2; grid-row: 1; }
  .smartnav__menu { grid-column: 3; grid-row: 1; margin-right: 0; width: 2.75rem; }
  .smartnav .btn--nav { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .smartnav.is-open .smartnav__links { grid-row: 3; }
  .smartnav__settings-panel { top: calc(100% + .5rem); right: 0; }
  .focus-hero--brand { padding-top: 10rem; }
  .pg { padding-top: 10rem; }
  /* Labels sit above long values instead of taking half a phone's width. */
  .spec > div { grid-template-columns: minmax(0,1fr); gap: .35rem; padding-block: 1rem; }
  .spec dt { font-size: .75rem; }
  .spec dd, .spec code, .steps3 code { overflow-wrap: anywhere; }
  .pg .agenda a { grid-template-columns: 1.75rem minmax(0,1fr); gap: .35rem .5rem; min-height: 3rem; }
  .agenda__tag { grid-column: 2; justify-self: start; white-space: normal; }
  .report__head, .sample__head, .lesson__head, .evlist__head { flex-wrap: wrap; gap: .35rem .75rem; }
  .report__rows, .sample__rows, .lesson__steps { padding-inline: 1rem; }
  .pg .report__score { margin-inline: 1rem; padding-inline: .75rem; }
  .report__rows li { align-items: flex-start; }
  .toc li { grid-template-columns: 1.75rem minmax(0,1fr); gap: .25rem .75rem; }
  .pg .toc h3 { line-height: 1.45; }
  .lesson__steps li { grid-template-columns: 1.6rem minmax(0,1fr); gap: .3rem .5rem; }
  .lesson__steps li > p { grid-column: 1 / -1; }
  .lesson__n { grid-row: auto; }
  .pg .ask .engagement-prompts { display: grid; grid-template-columns: minmax(0,1fr); gap: .5rem; }
  .evlist__rows li { grid-template-columns: 2.5rem minmax(0,1fr); gap: .4rem .75rem; }
  .evlist__lang { grid-column: 2; justify-self: start; }

  /* These disclosures contain column tables rather than label/value rows.
     Keep column headers available to assistive technology and visually
     group each provider with its disclosure. */
  .co-table--providers { margin-top: 1.5rem; }
  .co-table--providers caption { position: static; width: auto; height: auto; padding: 0 0 1rem; margin: 0; clip: auto; overflow: visible; white-space: normal; }
  .co-table--providers caption .en { display: block; font-size: .875rem; font-weight: 400; margin-top: .25rem; color: var(--text-muted); }
  .co-table--providers thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .co-table--providers tbody td { padding-inline: 0; }
  .co-table--providers tbody td:first-child { font-weight: 600; border-bottom: 0; padding-bottom: .5rem; }
  .co-table--providers tbody td:last-child { padding-bottom: 1.25rem; }
}

@media (max-width: 360px) {
  .pg, .focus-hero--brand, .s4__inner, .footer4 { padding-inline: 1rem; }
  .focus-build, .focus-invite, .pg section.ask { padding-inline: 1rem; }
  .report--audit .report__rows li { display: grid; grid-template-columns: minmax(0,1fr); gap: .25rem; }
  .report__counts { font-size: .875rem; }
  .smartnav__wordmark, .smartnav__ai { font-size: 1.125rem; }
}