.apps-hero { padding-bottom: 32px; }
.apps-hero h1 { max-width: 17ch; }
.apps-hero .lede { max-width: 62ch; }
.app-availability { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.app-availability article { display: grid; grid-template-columns: 58px 1fr; gap: 20px 16px; align-items: center; padding: 26px; border: 1px solid var(--hairline); border-radius: 24px; background: var(--surface); }
.app-availability article > img { border-radius: 14px; }
.app-availability h2 { font-size: 1.3rem; margin: 0 0 4px; }
.app-availability p { margin: 0; color: var(--ink-2); font-size: .9rem; }
.partner-app-mark { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 14px; color: white; background: #1b62e8; }
.partner-app-mark .ic { width: 30px; height: 30px; }
.app-store-status { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.app-store-status > span { padding: 12px 14px; background: var(--surface-alt); border: 1px solid var(--hairline); border-radius: 12px; }
.app-store-status strong, .app-store-status small { display: block; }
.app-store-status strong { font-size: .83rem; }
.app-store-status small { margin-top: 5px; color: var(--ink-2); font-size: .78rem; }
.app-availability .btn { grid-column: 1 / -1; }
.app-preview-switch { padding-top: 24px; }
.app-switch { display: inline-flex; gap: 6px; padding: 6px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface-alt); }
.app-switch[hidden], .app-demo-panel[hidden], [data-app-panel][hidden], .partner-demo-screen[hidden] { display: none; }
.app-switch button { font: inherit; font-size: .9rem; font-weight: 700; padding: 13px 24px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); cursor: pointer; }
.app-switch button[aria-selected='true'] { background: var(--btn-bg); color: var(--btn-ink); box-shadow: 0 3px 10px rgb(15 45 85 / .12); }
[data-app-panel] { scroll-margin-top: 100px; padding-top: 34px; }
.app-journey { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); gap: 60px; align-items: center; }
.app-journey .phone { max-width: 320px; }
.app-journey .phone-status { padding-inline: 16px; }
.partner-demo-screen { flex: 1; padding: 8px 16px 16px; overflow-y: auto; }
.app-demo-work { display: block; width: 100%; height: 138px; object-fit: cover; border-radius: 10px; margin-block: 12px; }
.app-demo-person { display: flex; gap: 12px; align-items: center; margin: 18px 0; color: var(--p-ink); }
.app-demo-person img { border-radius: 16px; object-fit: cover; }
.app-demo-hint { color: var(--p-ink2); font-size: 11px; line-height: 1.55; margin-top: 16px; }
.app-demo-status { list-style: none; padding: 10px 0 10px 18px; margin-block: 20px; border-left: 2px solid var(--p-accent); display: grid; gap: 18px; }
.app-demo-status li { color: var(--p-ink); }
.app-journey-steps { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 10px; }
.app-journey-steps button { width: 100%; display: flex; align-items: flex-start; gap: 16px; text-align: left; padding: 18px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--hairline); border-radius: 15px; cursor: pointer; }
.app-journey-steps button > span:first-child { color: var(--accent-text); font-size: .85rem; font-weight: 750; margin-top: 2px; }
.app-journey-steps strong, .app-journey-steps small { display: block; }
.app-journey-steps strong { font-size: 1rem; }
.app-journey-steps small { color: var(--ink-2); font-size: .85rem; margin-top: 6px; line-height: 1.55; }
.app-journey-steps button[aria-pressed='true'] { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); background: var(--accent-wash); }
.app-plan-link { display: block; margin-top: 18px; font-size: .9rem; color: var(--accent-text); text-underline-offset: 4px; }
@media (max-width: 760px) {
  .app-availability { grid-template-columns: 1fr; gap: 16px; }
  .app-availability article { padding: 20px; }
  .app-store-status { gap: 8px; }
  .app-store-status > span { padding: 12px 10px; }
  .app-journey { grid-template-columns: 1fr; gap: 32px; }
  .app-switch { display: flex; }
  .app-switch button { flex: 1; padding: 13px 10px; }
}