/* Mobile layer for the Claude Design pages (inline styles need !important) */
/* let the window scroll (not an inner box) on every page */
html, body, #dc-root, #dc-root > .sc-host { height: auto !important; }
html, body { overflow-x: clip !important; }

@media (max-width: 820px) {
  html, body { overflow-x: clip; }
  img, svg, video, figure, iframe { max-width: 100% !important; }
  img { height: auto; }
  figure { margin-left: 0 !important; margin-right: 0 !important; }
  /* containers: phone gutters and shorter vertical rhythm */
  [style*="max-width:1180px"],[style*="max-width: 1180px"],[style*="max-width:1140px"],[style*="max-width: 1140px"],[style*="max-width:1100px"],[style*="max-width: 1100px"],[style*="max-width:900px"],[style*="max-width: 900px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding:96px"],[style*="padding: 96px"],[style*="padding:88px"],[style*="padding: 88px"],[style*="padding:80px"],[style*="padding: 80px"],[style*="padding:104px"],[style*="padding: 104px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding:40px 48px"],[style*="padding: 40px 48px"],[style*="padding:44px 48px"],[style*="padding: 44px 48px"],[style*="padding:32px 36px"],[style*="padding: 32px 36px"],[style*="padding:32px 30px"],[style*="padding: 32px 30px"],[style*="padding:56px 48px"],[style*="padding: 56px 48px"],[style*="padding:48px 48px"],[style*="padding: 48px 48px"],[style*="padding:40px 40px"],[style*="padding: 40px 40px"] { padding-left: 20px !important; padding-right: 20px !important; }
  /* every multi-column grid stacks to one column... */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0,1fr) !important; }
  /* ...except logo strips and stat rows, which go to two/three columns, and number+text rows */
  /* logo strips (no text inside) go to two columns */
  [style*="grid-template-columns"]:not(:has(h1, h2, h3, h4, p, span, strong, li, button, input)) { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [style*="56px 1fr"] { grid-template-columns: 44px minmax(0,1fr) !important; }
  [style*="gap"] { column-gap: 20px !important; }
  [style*="gap:80px"],[style*="gap: 80px"],[style*="gap:72px"],[style*="gap: 72px"],[style*="gap:64px"],[style*="gap: 64px"],[style*="gap:56px"],[style*="gap: 56px"] { row-gap: 32px !important; }
  /* flex rows wrap instead of overflowing */
  [style*="display: flex"],[style*="display:flex"] { flex-wrap: wrap; }
  [style*="display: flex"] > *, [style*="display:flex"] > * { min-width: 0; max-width: 100%; }
  [style*="flex: 0 0"],[style*="flex:0 0"] { flex-basis: auto !important; }
  /* type scale */
  [style*="font-size:120px"],[style*="font-size: 120px"],[style*="font-size:100px"],[style*="font-size: 100px"] { font-size: 56px !important; line-height: 1.02 !important; }
  [style*="font-size:64px"],[style*="font-size: 64px"],[style*="font-size:58px"],[style*="font-size: 58px"],[style*="font-size:56px"],[style*="font-size: 56px"] { font-size: 38px !important; line-height: 1.08 !important; }
  [style*="font-size:48px"],[style*="font-size: 48px"] { font-size: 34px !important; }
  [style*="font-size:44px"],[style*="font-size: 44px"],[style*="font-size:40px"],[style*="font-size: 40px"] { font-size: 30px !important; }
  [style*="font-size:36px"],[style*="font-size: 36px"],[style*="font-size:34px"],[style*="font-size: 34px"],[style*="font-size:32px"],[style*="font-size: 32px"] { font-size: 26px !important; }
  h1, h2, h3, p, span, a { overflow-wrap: break-word; }
  [style*="min-height"] { min-height: 0 !important; }
  .portrait-frame { box-shadow: 12px 12px 0 #E72F2F; }
  /* card grids (anything with headings or paragraphs) always stack to one column */
  [style*="grid-template-columns"]:has(h3), [style*="grid-template-columns"]:has(p) { grid-template-columns: minmax(0,1fr) !important; }
  [style*="56px 1fr"] { grid-template-columns: 44px minmax(0,1fr) !important; }
  /* flip cards: no hover on phones, so show front and back stacked */
  .flip, .flip-inner { height: auto !important; min-height: 0 !important; transform: none !important; perspective: none !important; }
  .flip-face { position: relative !important; inset: auto !important; transform: none !important; opacity: 1 !important; pointer-events: auto !important; }
  .flip-front { border-bottom: 0 !important; }
  .flip-front h3 { min-height: 0 !important; }
  .flip-front > div > span:last-child { display: none !important; }
  .flip-back > div:first-child { display: none !important; }
}