/* Content-only adjustments for secondary pages; the shared module owns navigation. */
@media (max-width: 768px) {
  .sheet { max-width: 100%; }
  .sheet main { min-width: 0; padding: 40px 20px 72px; }
  .sheet main img, .sheet main svg { max-width: 100%; }
  .sheet main h1, .sheet main h2, .sheet main h3, .sheet main p,
  .sheet main li { overflow-wrap: break-word; }
  .sheet main a { overflow-wrap: anywhere; }

  /* Product copy and CTAs */
  body[data-product] main { font-size: 16px; }
  body[data-product] .p-layout { grid-template-columns: minmax(0, 1fr); }
  body[data-product] .p-layout > * { min-width: 0; }
  body[data-product] .p-head h1 { font-size: clamp(2.15rem, 9vw, 3.2rem); }
  body[data-product] .p-head .summary,
  body[data-product] .p-list li, body[data-product] .p-steps p,
  body[data-product] .helps, body[data-product] .panel li { font-size: 16px; line-height: 1.7; }
  body[data-product] .back, body[data-product] .p-nav a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  body[data-product] .stamp { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  body[data-product] .p-cta { gap: 12px; }
  body[data-product] .p-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-product] .panel { min-width: 0; padding: 20px; }
  body[data-product] .p-steps li > div { min-width: 0; }
  body[data-product] .dimension { max-width: 100%; }
  body[data-product] .fig-col, body[data-product] .fig, body[data-product] .fig-frame {
    min-width: 0; max-width: 100%;
  }
  body[data-product] .fig-frame { padding: 16px; }

  /* Portrait, then name/title, then biography; desktop retains its original grid. */
  .team-page .founder { --photo-size: clamp(120px, 38vw, 170px); margin-top: 40px; padding-top: 32px; }
  .team-page .founder figure, .team-page .advisors figure {
    display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 100%;
  }
  .team-page .founder figure > .founder-photo { order: -1; flex: none; width: var(--photo-size); }
  .team-page .founder-photo img { max-width: none; }
  .team-page .founder figcaption { order: 0; }
  .team-page .founder h2 { font-size: clamp(27px, 8vw, 36px); }
  .team-page .founder-story { margin-top: 20px; font-size: 16px; line-height: 1.7; }
  .team-page .founder-role { font-size: 16px; line-height: 1.5; }
  .team-page .advisors figure {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
  }
  .team-page .advisors figcaption, .team-page .advisors h2, .team-page .advisor-photos { display: contents; }
  .team-page .advisors .founder-role { grid-row: 2; margin-bottom: 10px; }
  .team-page .advisor-photos .founder-photo { width: var(--photo-size); }
  .team-page .advisor-photos .patrick-photo { grid-row: 1; }
  .team-page .advisors h2 span:first-child { grid-row: 3; margin-bottom: 18px; }
  .team-page .advisor-photos .jonas-photo { grid-row: 4; }
  .team-page .advisors h2 span:last-child { grid-row: 5; }
  .team-page .advisors h2 span { font-family: var(--cond); font-size: clamp(27px, 8vw, 36px); font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; line-height: 1.05; color: var(--ink); }
  .team-page .advisors h2 br { display: none; }

  /* The story carousel intentionally stays a small, automatic photo gallery. */
  .story-page #storyTitle { font-size: clamp(32px, 9vw, 42px); }
  .story-page .story-carousel { width: 100%; max-width: 420px; }
  .story-page .story-copy, .story-page .story-copy p { font-size: 16px; line-height: 1.7; }

  /* Legal documents have their own stylesheet and otherwise very small copy. */
  .legal-page main { font-size: 16px; }
  .legal-page main p, .legal-page main li { font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; }
  .legal-page main h1 { font-size: clamp(32px, 9vw, 42px); }
  .legal-page main h2 { font-size: 1.6rem; }
  .legal-page main .updated { font-size: 16px; }
  .legal-page main a { display: inline-block; min-height: 44px; line-height: 44px; max-width: 100%; overflow-wrap: anywhere; vertical-align: middle; }
}

@media (max-width: 560px) {
  body[data-product] .p-cta { flex-direction: column; align-items: stretch; }
  body[data-product] .p-cta .stamp { width: 100%; }
  body[data-product] .p-nav { flex-direction: column; gap: 4px; }
}