/* Device layouts shared by the original and editorial pages. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body .site-header .navbar { left: 0; right: 0; width: 100%; }
body :is(.hero-split, .contact-content, .form-fields, .wb-layout, .heatmap-layout, .product-choice) > * { min-width: 0; }
body :is(input, select, textarea) { min-width: 0; max-width: 100%; }
body :is(.founder-contact, .team-email, .contact-info-card, .footer-col) a,
body a.team-email { overflow-wrap: anywhere; }
body .contact-content { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
body :is(.contact-form, .form-group, .contact-info-card) { min-width: 0; }
body :is(.hero-actions, .cta-actions, .example-actions) { flex-wrap: wrap; }
body :is(.button, .cta-button, .submit-button) { max-width: 100%; white-space: normal; text-align: center; }
body .standard-example { scroll-margin-top: 104px; }

@media (max-width: 950px) {
  html { scroll-padding-top: 96px; }
  body .site-header .navbar { height: 76px; }
  body .nav-container { padding-inline: 24px; }
  body .hamburger { width: 44px; height: 44px; flex-shrink: 0; }
  body .site-header .nav-menu {
    top: 100%;
    max-height: calc(100vh - 76px);
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  body .nav-menu li > a { min-height: 44px; padding-block: 12px; }
  body .nav-menu .cta-button { min-height: 46px; }
  body .contact-content { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  body .contact-info-wrapper { padding: 0; }
  body .standard-example { scroll-margin-top: 96px; }
}

/* Stack detailed previews before either column becomes difficult to read. */
@media (max-width: 900px) {
  body.editorial-page .hero-split,
  body.editorial-page .hero-split:has(.standard-example),
  body .wb-showcase .wb-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  body.editorial-page .hero-split { align-items: start; }
  body.editorial-page .hero-split > div:first-child { max-width: 680px; }
  body.editorial-page .hero-split h1 { max-width: 18ch; }
  body.editorial-page .hero-split .standfirst { max-width: 58ch; }
  body .standard-example { width: 100%; max-width: 680px; }
  body .document-cover { width: 100%; max-width: 520px; }
  body .heatmap-layout { grid-template-columns: minmax(0, 1fr); }
  body .heat-detail { margin-top: 8px; }
  body .wb-showcase .wb-copy { max-width: 680px; }
  body .wb-showcase h2 { max-width: 22ch; }
  body .wb-showcase .wb-intro { max-width: 54ch; }
  body .wb-showcase .wb-benefits p { max-width: none; }
}

/* Touch controls stay readable without browser input zoom on phones/tablets. */
@media (pointer: coarse), (max-width: 950px) {
  body input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  body select,
  body textarea,
  body.editorial-page .framework-select,
  body:is(.contact-page, .editorial-page) form :is(input, select, textarea),
  body .wb-showcase .wb-entry textarea,
  body .wb-showcase .wb-rating select { font-size: 16px; }
  body :is(input:not([type="checkbox"]):not([type="radio"]), select, button, summary),
  body .wb-showcase .wb-rating select { min-height: 44px; }
  body .footer-col a { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; min-height: 44px; }
  body :is(.text-link, .text-button, .hero-link, .wb-showcase .wb-link, .founder-contact a, .team-email) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  body .footer-col { gap: 4px; }
  body .footer-status { margin-block: 4px; }
  body .workbook-play { min-height: 44px; }
  body #workbook-progress { height: 44px; }
  body #workbook-progress::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -10px; }
  body #workbook-progress::-moz-range-thumb { width: 16px; height: 16px; }
}

@media (max-width: 640px) {
  body .ready-cover h2 { font-size: clamp(42px, 12vw, 64px); }
  body .contact-form-wrapper { padding: 22px 18px; }
  body .contact-info-card { padding: 20px; }
  body .form-title, body .info-title { font-size: clamp(22px, 6vw, 28px); }
  body .contact-form .submit-button { width: 100%; }
  body .contact-form :is(input, select, textarea) { width: 100%; }
  body .company-intro { margin-bottom: 48px; }
  body .founder-contact a, body a.team-email { font-size: 13px; }
  body .wb-showcase .wb-benefits p,
  body .wb-showcase .wb-outcome,
  body .wb-showcase .wb-entry > p,
  body .wb-showcase .wb-criterion summary { font-size: 13px; }
  body .wb-showcase .wb-entry label,
  body .wb-showcase .wb-top p,
  body .wb-showcase .wb-tools,
  body .wb-showcase .wb-caption { font-size: 11px; }
  body .wb-showcase .wb-entry textarea { min-height: 110px; }
  body .standard-evidence dd,
  body .standard-requirement > p:last-child,
  body .standard-draft p:not(.source-code),
  body .standard-draft summary { font-size: 13px; }
  body .standard-evidence-heading h3 { font-size: 12px; }
  body .standard-path strong { font-size: 12px; }
  body .standard-evidence dt,
  body .standard-example figcaption,
  body .standard-example figcaption a { font-size: 11px; }
  body .standard-example figcaption a { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
  body .standard-draft .source-code,
  body .standard-evidence-heading > span,
  body .standard-requirement .source-code,
  body .standard-requirement .source-code span,
  body .standard-judgement .source-code { font-size: 9px; }
  body .standard-evidence dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  body .standard-path li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  body .wb-showcase .wb-rating { flex-wrap: wrap; }
  body .wb-showcase .wb-rating select { flex: 1 1 145px; }
}

@media (max-width: 360px) {
  body.home-page .hero-title { font-size: clamp(48px, 16vw, 58px); }
  body .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  body .hero-actions .hero-link { align-self: flex-start; }
  body .standard-evidence, body .standard-draft { margin-inline: 14px; }
  body .standard-evidence { padding: 12px; }
  body .wb-showcase .wb-topline { flex-wrap: wrap; }
}

/* Leave room to scroll the open menu on landscape phones. */
@media (max-width: 950px) and (max-height: 500px) {
  body .site-header .navbar { height: 64px; }
  body .logo-img { height: 48px; width: 145px; }
  body .site-header .nav-menu { max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); }
  html { scroll-padding-top: 84px; }
}