/* Phone layouts use whole words, a shared left edge and full-width actions. */
@media screen and (max-width: 700px) {
  html { -webkit-text-size-adjust: 100%; }
  h1, h2, h3, h4, p, li, summary, .button, .text-link {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }
  h1, h2, h3 { text-wrap: balance; }
  p, li { text-wrap: pretty; }
  .shell { padding-left: 20px; padding-right: 20px; }
  .hero-grid > *, .product-top > *, .hero-offers > *,
  .inventory-grid > *, .board-row > *, .session > *,
  .guide-grid > *, .grid3 > *, .four > * { min-width: 0; }
  .button { max-width: 100%; min-height: 48px; line-height: 1.4; text-align: center; }
  .button .arrow, .round { flex: 0 0 auto; }
  .nav { height: 76px; gap: 12px; }
  .nav-logo { width: clamp(150px, 44vw, 190px); }
  .nav-links { flex: 0 0 auto; }
  .nav-links .button { min-height: 44px; font-size: 12px; padding: 11px 14px; gap: 8px; }
  .hero-top { padding-bottom: 26px; }
  .hero-top h1 {
    font-size: clamp(27px, 8.3vw, 58px);
    line-height: 1.08;
    letter-spacing: -.045em;
    text-align: left;
    white-space: nowrap;
    text-wrap: nowrap;
  }
  .hero-copy .eyebrow { font-size: 10px; line-height: 1.5; letter-spacing: .12em; margin-bottom: 16px; }
  .hero-copy p { font-size: 16px; line-height: 1.55; max-width: 34ch; margin-top: 18px; }
  .hero-art { margin-left: -20px; margin-right: -20px; height: 220px; }
  .hero-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .hero-offer { padding-top: 14px; }
  .hero-offer h3 { font-size: clamp(20px, 5.5vw, 26px); text-wrap: nowrap; }
  .hero-offer .micro { font-size: 11px; line-height: 1.5; }
  .hero-offer .offer-bottom { align-items: center; gap: 8px; }
  .hero-offer .offer-price span { line-height: 1.45; }
  .audience-row { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 12px; line-height: 1.5; gap: 12px 18px; }
  .section-heading h2, .guide h2 { font-size: clamp(29px, 8vw, 39px); line-height: 1.12; }
  .section-heading p { font-size: 16px; line-height: 1.55; }
  .product { border-radius: 16px; }
  .product-info { padding: 24px 20px; }
  .product-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .product-logo { width: 200px; max-width: 100%; height: 40px; }
  .product-name { font-size: 29px; text-align: left; text-wrap: pretty; }
  .product-type { font-size: 10px; line-height: 1.6; letter-spacing: .06em; margin-top: 8px; }
  .product-top .price { font-size: 34px; text-align: left; }
  .product-top .price small { font-size: 12px; margin-top: 7px; }
  .product-lead { font-size: 22px; line-height: 1.35; margin: 24px 0 20px; }
  .inventory li { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px; font-size: 14px; line-height: 1.55; padding: 13px 0; }
  .inventory li > span:first-child { width: 20px; line-height: 1.4; }
  .session { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 9px; padding: 18px; border-radius: 10px; }
  .session-badge { font-size: 27px; }
  .session p { font-size: 14px; line-height: 1.5; }
  .product-actions { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 22px; }
  .product-actions .button { width: 100%; font-size: 14px; padding: 15px 18px; justify-content: space-between; }
  .product-actions .text-link { align-self: center; font-size: 13px; line-height: 1.5; padding: 5px 0; }
  .product-fine { font-size: 12px; line-height: 1.65; margin-top: 20px; }
  .product-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 12px; height: auto; padding: 48px 18px 20px; }
  .stage-label { left: 20px; top: 20px; font-size: 9px; }
  .school-tool, .situation, .visual-book, .matrix, .mini-deck {
    position: relative; inset: auto; width: auto; height: auto; min-width: 0;
    min-height: 0; transform: none; padding: 14px; box-shadow: 0 5px 14px #08213d12;
  }
  .school-tool img { width: 100%; }
  .school-tool h4, .situation h4 { font-size: clamp(17px, 4.8vw, 24px); line-height: 1.15; margin: 14px 0; }
  .school-tool .eyebrow, .situation .eyebrow { font-size: 7px; line-height: 1.5; letter-spacing: .08em; }
  .tool-line { font-size: 8px; line-height: 1.5; }
  .tool-line span { display: none; }
  .situation .speech { padding: 8px; margin: 4px 0 12px; transform: none; }
  .situation p { font-size: 10px; line-height: 1.5; }
  .visual-book { grid-column: 1; grid-row: 1; border-left-width: 3px; }
  .visual-book .cover-logo { width: 100%; padding: 5px; }
  .visual-book .cover-kicker { font-size: 7px; line-height: 1.5; margin: 18px 0 8px; }
  .visual-book h3 { font-size: clamp(24px, 8vw, 32px); line-height: 1; text-align: left; }
  .visual-book .cover-foot { font-size: 9px; line-height: 1.5; margin-top: 18px; }
  .cover-sun { display: none; }
  .matrix { grid-column: 2; grid-row: 1; }
  .matrix h4 { font-size: 17px; line-height: 1.2; margin: 12px 0; }
  .matrix-table { grid-template-columns: minmax(0, 1fr); font-size: 8px; }
  .matrix-table .head, .matrix-table .tick { display: none; }
  .mini-deck { grid-column: 1 / -1; font-size: 12px; padding: 12px 14px; }
  .guide .intro { font-size: 16px; line-height: 1.6; }
  .meeting { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; }
  .meeting p { font-size: 14px; }
  .meeting .tag { display: block; line-height: 1.6; }
  .faq { padding-left: 20px; padding-right: 20px; }
  .faq summary { font-size: 16px; line-height: 1.5; }
  .faq summary:after { flex: 0 0 auto; }
  .family-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .family-logo span { font-size: 11px; line-height: 1.5; }
  .top { gap: 16px; align-items: center; }
  .brand { width: clamp(150px, 43vw, 190px); }
  .top > a:last-child { max-width: 120px; font-size: 12px; line-height: 1.5; text-align: right; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid h1 { font-size: clamp(33px, 9vw, 44px); line-height: 1.1; }
  .board-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; line-height: 1.5; }
  .board-row b { text-align: left; }
  .actions { align-items: stretch; }
  .actions .button { flex-basis: 100%; justify-content: center; font-size: 14px; }
  .inventory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-grid b { line-height: 1.4; }
  .inventory-grid span { font-size: 14px; }
  .board .board-note, .fine { line-height: 1.65; }
  .sample-table-scroll { overflow-x: auto; margin: 20px 0; border: 1px solid #ccd6e5; border-radius: 10px; }
  .sample-table-scroll:focus-visible { outline: 3px solid #1253d8; outline-offset: 3px; }
  .sample-table-scroll table { min-width: 440px; margin: 0; overflow-wrap: normal; word-break: normal; }
  .sample-table-scroll th, .sample-table-scroll td { padding: 12px; line-height: 1.5; overflow-wrap: normal; word-break: normal; }
  .sample-table-hint { font-size: 12px; color: #506176; margin-bottom: -10px; }
}
@media screen and (min-width: 701px) { .sample-table-hint { display: none; } }
@media screen and (max-width: 480px) {
  .inventory-grid { grid-template-columns: minmax(0, 1fr); }
  .inventory-grid > div { padding: 20px; }
  .inventory-grid b { font-size: 18px; }
  .four { grid-template-columns: minmax(0, 1fr); }
  .four article { padding: 23px; }
  .tabs { flex-wrap: wrap; }
  .metrics { grid-template-columns: minmax(0, 1fr); }
  .metrics article { padding: 20px; }
  .metrics b { font-size: 32px; }
  .metrics span { font-size: 14px; }
  .availability h1 { font-size: 34px; }
  .closing h2 { font-size: 29px; line-height: 1.2; }
  .closing .button { width: 100%; }
}