/* Desktop is the approved composition. Mobile has its own information hierarchy. */
.mobile-tabs, .mobile-workflows, .management-mobile, .factor-mobile-copy, .usecase-mobile, .usecase-mobile-content { display: none; }
.mobile-disclosure > summary { display: none; }
.mobile-disclosure { display: contents; }
@media (max-width: 767px) {
  .landing-page { --type-section-size: 27px; --type-section-line: 1.3; }
  .landing-page section h2, .landing-page section h3 { word-break: keep-all; overflow-wrap: anywhere; }
  .landing-page > section:not(#top) > .max-w-7xl { padding-top: 64px; padding-bottom: 64px; }
  .landing-page .type-lead { line-height: 1.75; }
  .landing-page .type-section + .type-lead { margin-top: 16px; }
  /* A single three-part visual summary instead of three full-height rows. */
  #management .management-desktop { display: none; }
  #management .management-mobile { display: inline; }
  #management .management-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; padding: 22px 0 24px; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; }
  #management .management-factor { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0; border: 0; }
  #management .factor-illustration { order: 0; width: 58px; height: 72px; margin: 0 0 10px; overflow: hidden; }
  #management .factor-illustration svg { width: 210px; max-width: none; height: 70.875px; }
  #management .factor-label { order: 1; font-size: 15px; font-weight: 600; margin: 0; }
  #management .management-factor h3, #management .factor-copy { display: none; }
  #management .factor-mobile-copy { display: block; order: 2; margin-top: 8px; font-size: 13px; line-height: 1.65; color: #525252; }
  #management .management-takeaway { margin-top: 24px; padding: 0; background: none; border: 0; }
  #management .management-takeaway > :first-child { font-size: 18px; word-break: keep-all; }
  #management .management-takeaway > :last-child { font-size: 14px; margin-top: 8px; }
  /* One shared stage makes the difference visible without two full-height cards. */
  .mobile-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
  .mobile-tabs button { min-height: 48px; padding: 10px 6px; font-size: 13px; font-weight: 600; line-height: 1.4; border: 0; border-radius: 4px; background: transparent; color: #737373; cursor: pointer; }
  .mobile-tabs button[aria-selected='true'] { background: #000; color: #fff; }
  .mobile-tabs button:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; }
  #rfid-reading .mobile-tabs { padding: 4px; border: 1px solid #404040; border-radius: 6px; margin-bottom: 24px; }
  #rfid-reading .mobile-tabs button { color: #b8b8b8; }
  #rfid-reading .mobile-tabs button[aria-selected='true'] { color: #000; background: #fff; }
  .reading-comparison.mobile-enhanced { display: block; margin-top: 28px; }
  .reading-comparison.mobile-enhanced .reading-card { background: #111; border: none; padding: 22px; }
  .reading-comparison.mobile-enhanced .reading-rfid { background: #fff; color: #111; }
  .reading-comparison.mobile-enhanced .reading-card[hidden] { display: none; }
  .mobile-enhanced .reading-label { display: none; }
  .reading-card h3 { margin: 0; font-size: 22px; }
  .reading-illustration { margin: 12px -4px; max-width: none; }
  .reading-copy { font-size: 15px; min-height: 54px; }
  .reading-conditions { margin-top: 20px; font-size: 12px; }
  .landing-page .adoption-summary { margin-top: 32px; padding-top: 28px; }
  .landing-page .adoption-summary > div:first-child { font-size: 13px; font-weight: 400; }
  .landing-page .adoption-summary > p { margin-top: 12px; font-size: 21px; line-height: 1.45; word-break: keep-all; }
  .landing-page .adoption-summary > .grid { display: block; margin-top: 16px; }
  .landing-page .adoption-summary > .grid > div { display: grid; grid-template-columns: 102px minmax(0,1fr); gap: 16px; padding: 16px 0; border: 0; border-bottom: 1px solid #292929; }
  .landing-page .adoption-summary > .grid > div:last-child { border-bottom: 0; padding-bottom: 0; }
  .landing-page .adoption-summary > .grid > div p { margin: 0; font-size: 13px; line-height: 1.75; }
  /* A task selector replaces four repetitions of the same comparison. */
  .has-mobile-workflows { display: none; }
  .mobile-workflows { display: block; margin-top: 28px; }
  .mobile-workflows .mobile-tabs { border-bottom: 1px solid #dedede; padding-bottom: 12px; gap: 2px; }
  .mobile-workflows .mobile-tabs button { font-size: 12px; }
  .mobile-workflow-panel { padding-top: 24px; }
  .mobile-workflow-panel[hidden] { display: none; }
  .mobile-workflow-panel h3 { font-size: 20px; font-weight: 700; }
  .mobile-workflow-before { padding: 22px 20px; }
  .mobile-workflow-before > span, .mobile-workflow-after > span:not(.workflow-change-arrow) { display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
  .mobile-workflow-before { color: #737373; }
  .mobile-workflow-before p { font-size: 15px; }
  .mobile-workflow-after { position: relative; padding: 24px 20px; background: #f5f5f5; min-height: 156px; }
  .mobile-workflow-after > span:not(.workflow-change-arrow) { color: var(--sf-accent); }
  .mobile-workflow-after strong { display: block; font-size: 20px; font-weight: 700; word-break: keep-all; line-height: 1.5; }
  .mobile-workflow-after p { margin-top: 8px; color: #525252; font-size: 14px; line-height: 1.7; }
  .workflow-change-arrow { position: absolute; top: -13px; left: 20px; background: white; width: 26px; height: 26px; border-radius: 50%; text-align: center; color: var(--sf-accent); }
  .workflow-note { border: 0; padding: 0; margin-top: 22px; font-size: 13px; }
  /* Both important product scenes stay visible in the normal reading flow. */
  .landing-page .scanner-benefits { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 16px; }
  .landing-page .scanner-benefits > div { display: block; border: 0; background: transparent; padding: 0; }
  .landing-page .scanner-benefits > div > span { display: none; }
  .landing-page .scanner-benefits .type-card-title { font-size: 14px; }
  .landing-page .scanner-benefits .type-card-copy { font-size: 13px; margin-top: 6px; }
  #scanner .scanner-scenes { display: grid; grid-template-columns: 1fr; gap: 24px; margin: 32px 0 0; padding: 0; }
  #scanner .scanner-scene { min-width: 0; border-radius: 8px; }
  #scanner .scanner-scene-copy { padding: 22px 20px; }
  #scanner .scanner-scene-title { font-size: 20px; line-height: 1.4; }
  #scanner .scanner-scene-copy p { font-size: 14px; margin-top: 10px; }
  #scanner .scanner-scene-photo { aspect-ratio: 4/3; }
  #labels ol li { padding-block: 14px; gap: 16px; }
  /* Keep primary functions visible; secondary capabilities open on demand. */
  #features > div > .grid, #features > div > .extra-feature-cards, #features > div > .web-extra-features { margin-top: 48px; }
  .landing-page .app-task-grid { gap: 0 20px; }
  .landing-page .app-task-grid > div { padding: 16px 0; border: 0; border-top: 1px solid #dedede; border-radius: 0; }
  .landing-page .app-task-grid > div > .inline-flex { width: 28px; height: 28px; background: transparent; border-radius: 0; }
  .landing-page .app-task-grid > div > .font-bold { margin-top: 6px; }
  .landing-page .app-task-grid p { font-size: 13px; line-height: 1.7; }
  .scan-range-cards > div { border-radius: 0; border: 0; padding: 14px 0; border-top: 1px solid #dedede; }
  .mobile-disclosure { display: block; margin-top: 20px; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; }
  .mobile-disclosure > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0; min-height: 56px; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
  .mobile-disclosure > summary::-webkit-details-marker { display: none; }
  .mobile-disclosure > summary::after { content: '+'; font-size: 22px; font-weight: 400; }
  .mobile-disclosure[open] > summary::after { content: '−'; }
  .mobile-disclosure > .grid { margin: 0 0 20px; }
  .mobile-disclosure > .grid > div { border: 0; border-radius: 0; padding: 16px; background: #f5f5f5; }
  .mobile-disclosure .sku-details { margin: 0; border: 0; }
  .extra-feature-cards > div:first-child, .web-extra-features > div:first-child { display: none; }
  /* Number and description read as one step, without decorative vertical rails. */
  #process ol { margin-top: 28px; gap: 0; }
  #process li { display: grid; grid-template-columns: 26px minmax(0,1fr); column-gap: 14px; padding-block: 22px; }
  #process .process-number { grid-column: 1; grid-row: 1/4; padding-top: 2px; }
  #process li h3, #process li p { grid-column: 2; margin: 0; }
  #process li h3 { font-size: 18px; }
  #process li p { margin-top: 8px; font-size: 14px; line-height: 1.65; }
  #process li p:last-child { font-size: 12px; color: #737373; }
  #for-brands > div > .eyebrow { display: none; }
  #for-brands > div > h2 { margin-top: 0; }
  #for-brands .usecase-desktop, #for-brands .brand-usecases ul, #for-brands .usecase-tasks { display: none; }
  #for-brands .usecase-mobile { display: inline; }
  #for-brands .usecase-mobile-content { display: block; }
  #for-brands .brand-usecases { gap: 16px; margin-top: 28px; }
  #for-brands .brand-usecases article { border: 1px solid #e5e5e5; border-radius: 8px; padding: 20px; background: #fff; }
  #for-brands .usecase-kicker { color: #737373; font-size: 13px; font-weight: 500; }
  #for-brands .brand-usecases h3 { margin-top: 8px; min-height: 0; font-size: 21px; line-height: 1.4; }
  #for-brands .brand-usecases h3 br { display: initial; }
  #for-brands .usecase-flow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 18px; padding: 12px 8px; background: #f5f5f5; border-radius: 4px; }
  #for-brands .usecase-flow li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; border: 0; font-size: 12px; color: #525252; white-space: nowrap; }
  #for-brands .usecase-flow li:not(:last-child)::after { content: ''; position: absolute; right: -11px; top: 7px; width: 12px; height: 12px; background: url('/ui-icons/vendor/arrow-right.svg') center / contain no-repeat; opacity: .35; }
  #for-brands .usecase-summary { margin-top: 14px; font-size: 14px; line-height: 1.65; color: #525252; }
  .review-flow { flex-direction: row; flex-wrap: nowrap; gap: 10px; }
  .review-flow li { flex: 1; display: block; font-size: 12px; line-height: 1.6; }
  .review-flow span { display: block; margin-bottom: 6px; }
}