/* Shared phone and tablet layouts for the public website. Product editors keep
   their own responsive styles. Scrollable comparisons retain every column. */
.plans-table-wrap, .analytics-table-wrap { position: relative; min-width: 0; overscroll-behavior-x: contain; }
.public-nav-backdrop { position: fixed; inset: var(--public-header-height) 0 0; z-index: 490; background: #18253570; backdrop-filter: blur(3px); }
.case-open-link { display: none; }
.help-skip { z-index: 1000; }

@media (max-width: 1320px) {
  body.mobile-nav-open { overflow: hidden; }
  html body .site-header[data-public-header] .menu-toggle {
    flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px;
    min-height: 44px; padding: 10px; margin-left: 0; border: 1px solid currentColor;
    border-radius: 13px; align-items: center;
  }
  html body .site-header[data-public-header] .menu-toggle span { flex: none; width: 19px; height: 2px; transition: transform .15s; }
  html body .site-header[data-public-header] .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  html body .site-header[data-public-header] .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  html body .site-header[data-public-header] > .nav {
    max-height: calc(100vh - var(--public-header-height) - 24px);
    max-height: calc(100dvh - var(--public-header-height) - 24px - env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain; scrollbar-width: thin;
  }
  html body .site-header[data-public-header] .nav-link { min-height: 48px; }
  .language-menu [data-language], .site-account-dropdown :is(a, button) { min-height: 44px; }
  .site-account-dropdown { max-width: calc(100vw - 32px); max-height: calc(100dvh - var(--public-header-height) - 28px); overflow-y: auto; }
  .site-account-dropdown > span { overflow-wrap: anywhere; }
  .mobile-nav-open .spark-support-root { visibility: hidden; }
}

@media (max-width: 1024px) {
  .pcase-phones { scrollbar-width: thin; scrollbar-color: #8e9aa5 #e5e0d9; overscroll-behavior-x: contain; }
  .pcase-stage > .pcase-qr-card {
    display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 5px 18px;
    align-items: center; position: static; width: min(100%, 420px); margin: 8px auto 20px;
    padding: 16px 20px; text-align: left; border: 1px solid #e2dbd3; border-radius: 17px;
    box-shadow: 0 8px 28px #24334b12;
  }
  .pcase-stage > .pcase-qr-card .pcase-qr-slot { grid-row: 1 / 3; width: 88px; height: 88px; margin: 0; }
  .pcase-stage > .pcase-qr-card img { width: 80px; height: 80px; }
  .pcase-stage > .pcase-qr-card .pcase-caption { align-self: end; margin: 0; font-size: 14px; line-height: 1.6; }
  .pcase-stage > .pcase-qr-card .pcase-demo { position: static; align-self: start; width: fit-content; }
  .pcase-example-note { font-size: 12px; line-height: 1.8; }
  .pcase-example-note a { display: flex; align-items: center; justify-content: center; width: fit-content; min-height: 44px; margin: 10px auto 0; padding: 10px 18px; border: 1px solid #c7cbcf; border-radius: 999px; font-size: 13px; }
}

@media (max-width: 900px) {
  .public-footer .footer-column :is(a, button), .public-footer .footer-back-top { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; line-height: 1.65; }
  html body .public-footer .footer-column { gap: 2px; }
  .public-footer .footer-column h2 { font-size: 13px; }
  .footer-language button { min-height: 44px; padding: 9px 12px; font-size: 12px; }
  .feature-related-grid a, .docs-related a, .docs-toc a { min-height: 44px; }
  .public-detail :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea), .public-home :is(input:not([type="file"]), select, textarea) { font-size: 16px; }
  .public-detail select { min-height: 46px; }
}

@media (max-width: 760px) {
  /* Use short, visible login text and a named account icon, even at 320px. */
  html body .site-header[data-public-header] { padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)) !important; gap: 8px; flex-wrap: nowrap; }
  html body .site-header[data-public-header] .brand { gap: 6px; font-size: 20px; }
  html body .site-header[data-public-header] .brand img { width: 28px; height: 28px; }
  html body .site-header[data-public-header] .header-actions { gap: 6px; min-width: 0; }
  html body .site-header[data-public-header] .language-trigger { min-width: 48px; width: 48px; height: 44px; padding: 0 6px; font-size: 12px; gap: 4px; }
  html body .site-header[data-public-header] .button-small {
    flex: none; align-items: center; justify-content: center; min-width: 64px; max-width: none;
    min-height: 44px; padding: 10px 12px; font-size: 0 !important; border-radius: 13px; overflow: visible;
  }
  html body .site-header[data-public-header] .button-small::before { content: attr(data-mobile-label); display: inline; width: auto; height: auto; background: none; mask: none; color: inherit; font-size: 12px; line-height: 1.5; }
  html body.studio-support-page .site-header[data-public-header] #help-login { width: auto; min-width: 64px; padding: 10px 12px; }
  html body.studio-support-page .site-header[data-public-header] #help-login::before { content: attr(data-mobile-label); width: auto; height: auto; background: none; mask: none; font-size: 12px; }
  html body .site-header[data-public-header] .button-small span { display: none; }
  html body .site-header[data-public-header] .site-account-menu summary { display: grid; place-items: center; width: 44px; min-width: 44px; max-width: 44px; height: 44px; padding: 10px; border-radius: 13px; }
  html body .site-header[data-public-header] .site-account-menu summary > span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  html body .site-header[data-public-header] .site-account-menu summary i { display: none; }
  html body .site-header[data-public-header] .site-account-menu summary::before {
    content: ''; display: block; width: 21px; height: 21px; background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='4' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M4 22v-3a8 8 0 0 1 16 0v3' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  html body .site-header[data-public-header] .language-menu { right: 0; max-height: calc(100dvh - 100px); overflow-y: auto; }
  html body .site-header[data-public-header] .public-features-dropdown,
  html body .site-header[data-public-header] .help-dropdown { grid-template-columns: minmax(0, 1fr); padding: 6px; gap: 3px; }
  html body .site-header[data-public-header] .dropdown > a { padding: 13px 10px; }
  html body .site-header[data-public-header] .dropdown b { font-size: 14px; }
  html body .site-header[data-public-header] .dropdown small { margin-top: 4px; font-size: 12px; line-height: 1.65; }
  html body .site-header[data-public-header] .nav-link { font-size: 17px; }
  html body .site-header[data-public-header] > .nav { left: 12px; right: 12px; padding: 10px 16px; }

  .public-home .hero { height: min(780px, 100svh); min-height: 540px; }
  .public-home .hero-content { inset: 92px 18px 54px; padding: 0; }
  .public-home .hero h1 { font-size: clamp(32px, 8.5vw, 46px); line-height: 1.16; letter-spacing: -.045em; }
  .public-home .hero-eyebrow { max-width: 100%; font-size: 10px; line-height: 1.6; letter-spacing: 1px; }
  .public-home .hero-eyebrow i { flex-shrink: 0; }
  .public-home .hero-cta { min-height: 48px; padding: 12px 20px; font-size: 14px; }
  .public-home .scr-play { min-height: 44px; }
  .public-home .section-pad { padding: 56px 20px; }
  .public-home .section-heading { margin-bottom: 28px; }
  .public-home .section-heading > p { font-size: 14px; }
  .public-home .pcase-section { padding: 54px 0; }
  .public-home .pcase-inner { padding: 0 20px; gap: 28px; }
  .public-home .feature-strip { padding: 26px 20px; }
  .public-home .feature-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; overflow: visible; }
  .public-home .feature-card { min-width: 0; width: 100%; min-height: 0; padding: 20px; }
  .public-home .feature-card-title { font-size: 16px; }
  .public-home .feature-card-desc { font-size: 13px; }
  .public-home .value-grid.case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 0; overflow: visible; }
  .public-home .case-section > .section-heading { padding: 0; }
  .public-home .value-card.case-card { flex: none; width: auto; min-width: 0; border-radius: 14px; }
  .public-home .case-card .value-copy { display: none; }
  .public-home .case-media { border-radius: 14px 14px 0 0; }
  .public-home .case-qr { width: calc(100% - 18px); max-width: 210px; padding: 8px; border-radius: 10px; }
  .public-home .case-qr img { width: 100%; height: auto; aspect-ratio: 1; }
  .public-home .case-open-link { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 6px; font-size: 12px; color: #24334b; background: #fff; text-decoration: none; text-align: center; }
  .public-home .story-copy p, .public-home .trust-items p { font-size: 14px; line-height: 1.8; }
  .public-home .simple-link { min-height: 44px; font-size: 13px; }
  .public-home .trial-title { font-size: clamp(31px, 8.5vw, 40px); letter-spacing: -.04em; }
  .public-home .trial-description { font-size: 15px; }
  .public-home .trial-account-link { display: inline-flex; align-items: center; min-height: 44px; line-height: 1.6; }
  .public-home .trial-live-note { font-size: 12px; line-height: 1.8; }
  .public-home .upload-card { min-width: 0; padding: 18px; }
  .public-home .upload-card-foot { display: grid; gap: 8px; font-size: 12px; line-height: 1.6; }
  .public-home .upload-action-bar .app-button { min-height: 48px; }
  .public-home .upload-selection-actions .app-secondary,
  .public-home .share-actions :is(.app-button, .app-secondary) { min-height: 44px; font-size: 12px; }
  .public-home .share-result { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 16px; }
  .public-home .share-qr { width: 152px; height: 152px; justify-self: center; }
  .public-home .share-copy { width: 100%; min-width: 0; }
  .public-home .share-copy > .text-button, .public-home .result-delete { min-height: 44px; font-size: 12px; }
  .public-home .faq-item button { min-height: 60px; font-size: 15px; line-height: 1.6; gap: 14px; }
  .public-home .faq-item button span { flex-shrink: 0; }
  .public-home .faq-answer p, .public-home .faq-intro > p { font-size: 14px; line-height: 1.9; }
  .public-home .final-cta p { font-size: 14px; line-height: 1.8; }
  .public-home .final-cta :is(.cta-button, .cta-secondary) { min-height: 46px; font-size: 14px; }

  :is(.public-home, .public-detail) .pricing-card { padding: 24px 22px; }
  :is(.public-home, .public-detail) .pricing-card:hover { transform: none; }
  :is(.public-home, .public-detail) .plan-top { flex-wrap: wrap; }
  :is(.public-home, .public-detail) .plan-price-line { flex-wrap: wrap; white-space: normal; }
  :is(.public-home, .public-detail) .plan-features { font-size: 14px; line-height: 1.6; gap: 11px; }
  :is(.public-home, .public-detail) .plan-fit { font-size: 14px; min-height: 0; }
  :is(.public-home, .public-detail) .plan-note { font-size: 12px; line-height: 1.7; }
  :is(.public-home, .public-detail) .plan-button { min-height: 48px; font-size: 14px; }
  .plans-main, .feature-main, .help-main, .public-main, .docs-main { width: calc(100% - 40px); min-width: 0; }
  .plans-main .plans-hero > p, .plans-section-heading > p { font-size: 14px; }
  .plans-compare-anchor { min-height: 44px; font-size: 13px; }
  .plans-payment-note, .plans-table-notes p { font-size: 12px; }
  .plans-scroll-hint { display: block; font-size: 13px; line-height: 1.7; }
  .plans-table-wrap { max-height: min(660px, calc(100dvh - var(--public-header-height) - 32px)); overflow: auto; }
  .plans-table tr > :first-child { width: 145px; }
  .plans-table { min-width: 800px; }
  .plans-table thead th { position: sticky; top: 0; z-index: 2; }
  .plans-table thead tr > :first-child { z-index: 3; }
  .plans-help p, .plans-notes p { font-size: 14px; }

  .feature-hero-copy > p, .feature-step p, .feature-capability p,
  .feature-plan-note p, .feature-question p, .feature-bottom p { font-size: 14px; line-height: 1.85; }
  .feature-demo-note { font-size: 12px; line-height: 1.8; }
  .feature-actions, .public-actions, .docs-actions { gap: 10px; }
  :is(.feature-actions, .public-actions, .docs-actions) .public-button { flex: 1 1 180px; min-height: 48px; font-size: 14px; }
  .feature-question summary { min-height: 48px; font-size: 15px; }
  .feature-qr-strip { flex-wrap: wrap; }
  .feature-qr-strip > div { flex: 1 1 120px; min-width: 0; }
  .feature-qr-strip a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; font-size: 13px; }
  .feature-demo.feature-showcase { padding: 16px 12px; }
  .showcase-mobile .showcase-phones { scrollbar-width: thin; scrollbar-color: #8e9aa5 #e5e0d9; overscroll-behavior-x: contain; }

  .help-page .help-main { width: calc(100% - 40px); }
  .help-search { padding: 0 12px; gap: 8px; }
  .help-search button { width: 44px; height: 44px; }
  .help-categories button { min-height: 44px; font-size: 13px; }
  .help-question summary { font-size: 15px; line-height: 1.7; }
  .help-answer { font-size: 14px; line-height: 1.9; }
  .help-contact p { font-size: 14px; }
  .help-contact-button { min-height: 48px; font-size: 14px; }
  .docs-hero > p, .docs-section-lead, .docs-step p, .docs-plan p, .docs-contact p { font-size: 14px; line-height: 1.85; }
  .docs-step { padding: 20px 16px; gap: 10px; }
  .docs-toc a { font-size: 13px; }
  .docs-section-heading { min-width: 0; }
  .docs-section h2 { font-size: 23px; overflow-wrap: anywhere; }

  .analytics-tools { gap: 16px; margin-top: 28px; }
  .analytics-tools > div { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); }
  .analytics-tools select { width: 100%; min-width: 0; }
  .analytics-table-wrap { border: 0; border-radius: 0; background: transparent; overflow: visible; }
  .analytics-table { display: block; min-width: 0; }
  .analytics-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .analytics-table tbody { display: grid; gap: 14px; }
  .analytics-table tr { display: block; padding: 6px 16px; border: 1px solid #d6d7d8; border-radius: 14px; background: #fff; }
  .analytics-table tbody th { display: block; max-width: none; padding: 14px 0; font-size: 15px; font-weight: 600; }
  .analytics-table tbody th a { display: inline-flex; align-items: center; min-height: 44px; }
  .analytics-table td[data-label] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 12px 0; font-size: 13px; text-align: right; overflow-wrap: anywhere; }
  .analytics-table td[data-label]::before { content: attr(data-label); text-align: left; color: #737b82; }
  .analytics-table td.analytics-empty { display: block; padding: 26px 0; }
  .analytics-table tr:last-child > :not(:last-child) { border-bottom: 1px solid #e8e8e8; }
  .analytics-metrics h3 { font-size: 13px; margin-bottom: 12px; }
  .analytics-metrics p { font-size: 12px; }
  .analysis-explanation p, .capability-card p, .public-hero > p { font-size: 14px; }

  html body .public-footer { padding: 40px 20px 0; }
  html body .public-footer .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .public-footer .footer-brand { grid-column: 1 / -1; }
  .public-footer .footer-brand p { max-width: 340px; margin-top: 14px; font-size: 14px; }
  html body .public-footer .footer-bottom { font-size: 12px; }
  .public-footer .footer-bottom > p { min-width: 0; font-size: 12px; }

  /* Keep support reachable without a floating button covering upload/plan CTAs. */
  :is(.public-home, .public-detail) .spark-support-root { position: static; margin: 0; padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px)); background: #e5d6c5; }
  body.studio-support-page .spark-support-root { background: #142d46; }
  :is(.public-home, .public-detail) .spark-support-toggle { display: flex; justify-content: center; gap: 12px; width: 100%; height: auto; min-height: 48px; padding: 10px 18px; }
  :is(.public-home, .public-detail) .spark-support-toggle svg { width: 24px; height: 24px; }
  :is(.public-home, .public-detail) .spark-support-tooltip { display: block; position: static; opacity: 1; visibility: visible; white-space: normal; padding: 0; border: 0; background: transparent; color: inherit; box-shadow: none; font-size: 14px; }
  :is(.public-home, .public-detail) .spark-support-card { position: fixed; z-index: 800; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(350px, calc(100vw - 32px)); max-height: calc(100dvh - 106px - env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 380px) {
  .public-home .pcase-inner, .public-home .section-pad { padding-left: 16px; padding-right: 16px; }
  .plans-main, .feature-main, .public-main, .docs-main, .help-page .help-main { width: calc(100% - 32px); }
  .plans-cards .pricing-card { padding: 23px 18px; }
  .public-home .case-open-link { font-size: 11px; }
}

@media (max-width: 760px) and (max-height: 500px) and (orientation: landscape) {
  .public-home .hero { height: auto; min-height: 480px; }
}

@media (prefers-reduced-motion: reduce) {
  .public-nav-backdrop { backdrop-filter: none; }
  .site-header[data-public-header] .menu-toggle span { transition: none; }
}