/* Phone and small tablet layout. Desktop styles are unchanged. */
.shell { width: calc(100% - 32px); max-width: 100%; min-width: 0; }
.hero, .section, .cta-section, .site-footer { max-width: 100%; }
.site-header { background: rgba(7, 11, 17, .94); border-bottom-color: var(--line); backdrop-filter: blur(18px); }
.nav-shell { min-height: 68px; gap: 16px; }
.brand { min-width: 0; }
.brand img { width: min(180px, 52vw); }
.menu-button { display: block; flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; }
.site-nav { top: 67px; left: 16px; right: 16px; visibility: hidden; }
.site-nav.open { visibility: visible; }

/* Flex removes the grid's intrinsic minimum width created by the screenshot. */
.hero { min-height: 0; padding: 100px 0 48px; }
.hero-layout { display: flex; flex-direction: column; align-items: stretch; gap: 34px; min-width: 0; }
.hero-layout > *, .hero-copy, .product-visual { width: 100%; min-width: 0; max-width: 100%; }
.hero-copy { flex: none; }
.hero h1 { max-width: 100%; margin-bottom: 20px; font-size: clamp(2.25rem, 8vw, 3.2rem); line-height: 1.08; overflow-wrap: break-word; }
.hero h1 em { display: inline; }
.hero-lede { max-width: 100%; margin-bottom: 26px; font-size: 1.0625rem; line-height: 1.6; }
.hero-actions { display: flex; flex-direction: column; gap: 10px; }
.hero-actions .button { width: 100%; min-width: 0; min-height: 52px; padding: 10px 18px; text-align: center; font-size: 1rem; white-space: normal; }
.hero-proof { gap: 8px; margin-top: 22px; color: #aab7c9; font-size: .875rem; }

.product-visual { margin: 0; border-radius: 14px; box-shadow: 0 22px 60px rgba(0, 0, 0, .44); transform: none; }
.product-frame-bar { min-height: 50px; padding: 0 8px; }
.product-frame-bar .window-dots, .actual-product-label { display: none; }
.product-tabs { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.product-tab { min-width: 0; min-height: 50px; padding: 8px 4px; font-size: .875rem; line-height: 1.25; white-space: normal; }
.product-tab::after { right: 4px; left: 4px; }
.product-shot { width: 100%; aspect-ratio: 1536 / 884; }
.product-shot a { display: block; width: 100%; height: 100%; }
.product-shot img { width: 100%; height: 100%; object-fit: contain; }
.product-hint { display: block; margin: 0; padding: 10px 12px; border-top: 1px solid #252d3a; color: #aebdd0; font-size: .8125rem; text-align: center; }

.section { padding-block: 64px; }
.section.problem { padding-top: 60px; }
.section.manufacturing { padding-bottom: 48px; }
.kicker { margin-bottom: 13px; font-size: .8125rem; }
.section h2, .cta-section h2 { font-size: clamp(2rem, 7.5vw, 3rem); line-height: 1.12; overflow-wrap: break-word; }
.split-layout, .workflow-heading, .manufacturing-layout, .capability-card.featured { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.split-layout > *, .workflow-heading > *, .manufacturing-layout > *, .capability-card.featured > * { min-width: 0; }
.problem-copy p, .center-heading p, .capability-card p, .workflow-heading p, .workflow-steps p, .manufacturing-copy p, .cta-section p { font-size: 1.0625rem; line-height: 1.55; }
.problem-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 30px; }
.problem-card { min-height: 0; padding: 22px; }
.problem-card h3 { margin: 17px 0 10px; }
.problem-card p { max-width: 100%; margin: 0; color: #aebdd0; font-size: 1rem; line-height: 1.5; }
.center-heading { margin-bottom: 28px; }
.center-heading p { margin-top: 16px; }
.capability-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.capability-card, .capability-card.featured { min-height: 0; padding: 24px; }
.capability-card.featured { grid-column: auto; gap: 22px; }
.capability-card.featured h3 { font-size: 1.9rem; }
.capability-card p { color: #aebdd0; }
.capability-card ul { margin-top: 18px; font-size: .95rem; }
.capability-label { font-size: .75rem; }
.feature-symbol { margin-bottom: 18px; }
.readiness-chart { min-width: 0; padding: 17px; }
.bar-row { grid-template-columns: minmax(0, 1fr) minmax(30px, 1fr) 24px; gap: 7px; font-size: .75rem; }
.bar-row span { overflow-wrap: anywhere; }
.workflow-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 30px; }
.workflow-steps li, .workflow-steps li:first-child, .workflow-steps li:last-child { min-height: 0; padding: 21px; border: 1px solid var(--line); border-radius: 14px; }
.workflow-steps li::after { display: none; }
.workflow-steps li > span { margin-bottom: 13px; }
.workflow-steps strong { font-size: 1.2rem; }
.workflow-steps p { color: #aebdd0; }
.manufacturing-copy h2 { margin-bottom: 18px; }
.coverage-grid { grid-template-columns: minmax(0, 1fr); }
.coverage-grid > div { min-height: 0; padding: 18px; border-right: 0; border-bottom: 1px solid var(--line); }
.coverage-grid > div:last-child { border-bottom: 0; }
.coverage-grid strong { font-size: 1rem; }
.coverage-grid small { font-size: .875rem; line-height: 1.4; }
.industry-panel-head { gap: 10px; flex-wrap: wrap; }
.industry-panel-head small { font-size: .8125rem; }
.cta-section { padding-block: 66px; }
.site-footer { padding-top: 44px; }
.footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 32px; }
.footer-message h2 { font-size: 1.9rem; }
.footer-links { gap: 24px; }
.footer-links a { font-size: 1rem; }
.footer-bottom { gap: 12px; flex-direction: column; font-size: .8125rem; }

@media (max-width: 380px) {
  .shell { width: calc(100% - 24px); }
  .hero h1 { font-size: 2.2rem; }
  .product-tab { font-size: .8125rem; }
  .capability-card, .capability-card.featured { padding: 20px; }
}