/* Mobile-only layout layer for LateBite Pause.
   Desktop styles and desktop assets remain controlled by styles.css. */

@media (max-width: 720px) {
  html { overflow-x: hidden; }
  body { overflow-x: hidden; }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(7, 11, 18, 0.94);
    backdrop-filter: blur(14px);
  }

  .header-inner {
    width: min(100% - 28px, 1280px);
    min-height: 74px;
    padding: 12px 0;
  }

  .brand-lockup {
    min-width: 0;
    gap: 12px;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
  }

  .brand-lockup span {
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.055em;
  }

  .hero,
  .hero-integrated,
  .page-hero,
  .page-hero-integrated {
    padding-top: 28px;
    padding-bottom: 58px;
  }

  .section {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .visual-surface.visual-surface--hero,
  .visual-surface.visual-surface--how,
  .visual-surface.visual-surface--plan,
  .visual-surface.visual-surface--trust,
  .visual-surface.visual-surface--privacy,
  .page-surface.visual-surface {
    display: flex !important;
    flex-direction: column;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(17,25,36,.92), rgba(7,11,18,.96));
  }

  .visual-surface::before,
  .visual-surface::after {
    display: none !important;
  }

  .visual-surface .surface-content,
  .visual-surface .surface-content--hero,
  .page-surface.visual-surface .surface-content,
  .page-surface .surface-content {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    order: 1;
    z-index: 2;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 26px 22px 22px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(7,11,18,.98), rgba(7,11,18,.94)) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .visual-surface .surface-content h1,
  .visual-surface .surface-content h2,
  .page-surface.visual-surface .surface-content h1,
  .page-surface.visual-surface .surface-content h2 {
    text-shadow: none !important;
    text-wrap: balance;
  }

  .visual-surface .surface-content h1 {
    font-size: clamp(42px, 12vw, 52px);
    line-height: 1.02;
    letter-spacing: -0.065em;
  }

  .visual-surface .surface-content h2,
  .page-surface.visual-surface .surface-content h1 {
    font-size: clamp(32px, 9.2vw, 40px);
    line-height: 1.08;
    letter-spacing: -0.055em;
  }

  .visual-surface .surface-content p:not(.eyebrow),
  .visual-surface .surface-content .hero-lede,
  .visual-surface .page-surface-copy p:not(.eyebrow),
  .page-surface.visual-surface .surface-content p:not(.eyebrow) {
    max-width: none !important;
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.62;
    color: var(--lbp-text-muted);
    text-shadow: none !important;
  }

  .visual-surface .surface-picture {
    position: relative !important;
    inset: auto !important;
    order: 2;
    z-index: 1;
    display: block;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
    background: #05090F;
    border-top: 1px solid rgba(167,173,184,.12);
  }

  .visual-surface .surface-picture img {
    position: relative !important;
    inset: auto !important;
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    filter: none !important;
  }

  .visual-surface--hero .surface-picture {
    background: #05090F;
  }

  .visual-surface--how .surface-picture,
  .visual-surface--trust .surface-picture,
  .visual-surface--privacy .surface-picture,
  .visual-surface--plan .surface-picture {
    padding: 14px;
  }

  .visual-surface--how .surface-picture img,
  .visual-surface--trust .surface-picture img,
  .visual-surface--privacy .surface-picture img,
  .visual-surface--plan .surface-picture img {
    border-radius: 22px;
  }

  .visual-surface .surface-caption,
  .visual-surface .surface-caption--split {
    display: none !important;
  }

  .visual-surface .hero-actions,
  .visual-surface .cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .visual-surface .chip-row {
    gap: 8px;
  }

  .visual-surface .chip {
    width: 100%;
    justify-content: center;
  }

  .visual-surface .step-list {
    margin-top: 22px;
    border-top: 1px solid rgba(167,173,184,.14);
  }

  .visual-surface .step-list div {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(167,173,184,.12);
  }

  .visual-surface .step-list p {
    margin: 0 !important;
    color: #DFE5EE !important;
    font-size: 15.5px !important;
    line-height: 1.46 !important;
  }

  .visual-surface .plan-card-mini {
    margin-top: 22px;
    padding: 18px;
    background: rgba(17,25,36,.66) !important;
    border: 1px solid rgba(255,210,138,.24);
  }

  .visual-surface .check-list li {
    color: var(--lbp-text-muted);
    text-shadow: none !important;
  }

  .story-strip,
  .plan-module,
  .reality-panel,
  .cta-panel,
  .support-panel,
  .split-panel,
  .warning-panel,
  .contact-card,
  .support-hero-shell {
    padding: 22px;
    border-radius: 26px;
  }
}

/* Mobile overlay refinement pass, 2026-05-04.
   Mobile clients use accepted illustrations as section backgrounds with live HTML text over
   the readable dark area. Desktop composition remains governed by styles.css. */
@media (max-width: 720px) {
  .client-mobile body {
    background:
      radial-gradient(circle at 20% 0%, rgba(109,139,255,.13), transparent 24rem),
      linear-gradient(180deg, #0B1220 0%, #070B12 100%);
  }

  .client-mobile .hero,
  .client-mobile .hero-integrated,
  .client-mobile .page-hero,
  .client-mobile .page-hero-integrated {
    padding-top: 18px;
    padding-bottom: 50px;
  }

  .client-mobile .visual-surface.visual-surface--hero,
  .client-mobile .visual-surface.visual-surface--how,
  .client-mobile .visual-surface.visual-surface--plan,
  .client-mobile .visual-surface.visual-surface--trust,
  .client-mobile .visual-surface.visual-surface--privacy,
  .client-mobile .page-surface.visual-surface {
    display: block !important;
    position: relative !important;
    min-height: min(780px, calc(100vh - 42px)) !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: 30px !important;
    background: #05090F !important;
    border-color: rgba(167,173,184,.18) !important;
    box-shadow: 0 24px 74px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.045) !important;
  }

  .client-mobile .visual-surface.visual-surface--how,
  .client-mobile .visual-surface.visual-surface--plan,
  .client-mobile .visual-surface.visual-surface--trust,
  .client-mobile .visual-surface.visual-surface--privacy,
  .client-mobile .page-surface.visual-surface {
    min-height: 690px !important;
  }

  .client-mobile .visual-surface.visual-surface--plan {
    min-height: 720px !important;
  }

  .client-mobile .visual-surface .surface-picture,
  .client-mobile .page-surface.visual-surface .surface-picture {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #05090F !important;
  }

  .client-mobile .visual-surface .surface-picture img,
  .client-mobile .page-surface.visual-surface .surface-picture img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    transform: none !important;
    filter: none !important;
    border-radius: 0 !important;
  }

  .client-mobile .visual-surface--hero .surface-picture img { object-position: 56% center !important; }
  .client-mobile .visual-surface--how .surface-picture img { object-position: 56% center !important; }
  .client-mobile .visual-surface--plan .surface-picture img { object-position: 50% center !important; }
  .client-mobile .visual-surface--trust .surface-picture img,
  .client-mobile .visual-surface--privacy .surface-picture img { object-position: 43% center !important; }

  .client-mobile .visual-surface.visual-surface--hero::before,
  .client-mobile .visual-surface.visual-surface--how::before,
  .client-mobile .visual-surface.visual-surface--plan::before,
  .client-mobile .visual-surface.visual-surface--trust::before,
  .client-mobile .visual-surface.visual-surface--privacy::before,
  .client-mobile .page-surface.visual-surface::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
    background:
      linear-gradient(180deg, rgba(5,9,15,.97) 0%, rgba(5,9,15,.90) 35%, rgba(5,9,15,.58) 58%, rgba(5,9,15,.16) 100%),
      radial-gradient(circle at 10% 10%, rgba(109,139,255,.13), transparent 22rem),
      radial-gradient(circle at 86% 92%, rgba(255,184,77,.08), transparent 18rem) !important;
  }

  .client-mobile .visual-surface.visual-surface--hero::before {
    background:
      linear-gradient(180deg, rgba(5,9,15,.98) 0%, rgba(5,9,15,.90) 38%, rgba(5,9,15,.50) 66%, rgba(5,9,15,.08) 100%),
      linear-gradient(90deg, rgba(5,9,15,.44) 0%, rgba(5,9,15,.14) 54%, transparent 100%),
      radial-gradient(circle at 12% 6%, rgba(109,139,255,.14), transparent 22rem) !important;
  }

  .client-mobile .visual-surface.visual-surface--plan::before {
    background:
      linear-gradient(180deg, rgba(5,9,15,.98) 0%, rgba(5,9,15,.92) 43%, rgba(5,9,15,.46) 70%, rgba(5,9,15,.12) 100%),
      radial-gradient(circle at 18% 12%, rgba(255,184,77,.10), transparent 18rem) !important;
  }

  .client-mobile .visual-surface.visual-surface--trust::before,
  .client-mobile .visual-surface.visual-surface--privacy::before,
  .client-mobile .page-surface.visual-surface--privacy::before {
    background:
      linear-gradient(180deg, rgba(5,9,15,.98) 0%, rgba(5,9,15,.91) 48%, rgba(5,9,15,.44) 76%, rgba(5,9,15,.16) 100%),
      radial-gradient(circle at 14% 10%, rgba(109,139,255,.12), transparent 21rem) !important;
  }

  .client-mobile .visual-surface.visual-surface--hero::after,
  .client-mobile .visual-surface.visual-surface--how::after,
  .client-mobile .visual-surface.visual-surface--plan::after,
  .client-mobile .visual-surface.visual-surface--trust::after,
  .client-mobile .visual-surface.visual-surface--privacy::after,
  .client-mobile .page-surface.visual-surface::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), inset 0 -92px 130px rgba(5,9,15,.28) !important;
  }

  .client-mobile .visual-surface .surface-content,
  .client-mobile .visual-surface .surface-content--hero,
  .client-mobile .page-surface.visual-surface .surface-content,
  .client-mobile .page-surface .surface-content {
    position: relative !important;
    z-index: 2 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 24px 22px 26px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .client-mobile .visual-surface .surface-content h1,
  .client-mobile .visual-surface .surface-content h2,
  .client-mobile .page-surface.visual-surface .surface-content h1,
  .client-mobile .page-surface.visual-surface .surface-content h2 {
    max-width: 12.5em;
    text-wrap: balance;
    color: #F2F4F8;
    text-shadow: 0 3px 20px rgba(0,0,0,.68);
  }

  .client-mobile .visual-surface .surface-content h1 {
    font-size: clamp(38px, 11.2vw, 48px) !important;
    line-height: 1.01 !important;
    letter-spacing: -.065em !important;
  }

  .client-mobile .visual-surface .surface-content h2,
  .client-mobile .page-surface.visual-surface .surface-content h1 {
    font-size: clamp(30px, 8.7vw, 38px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.058em !important;
  }

  .client-mobile .visual-surface .surface-content p:not(.eyebrow),
  .client-mobile .visual-surface .surface-content .hero-lede,
  .client-mobile .visual-surface .page-surface-copy p:not(.eyebrow),
  .client-mobile .page-surface.visual-surface .surface-content p:not(.eyebrow) {
    max-width: 31em !important;
    margin-top: 14px !important;
    font-size: 15.5px !important;
    line-height: 1.55 !important;
    color: #C9D1DC !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.64) !important;
  }

  .client-mobile .visual-surface .eyebrow,
  .client-mobile .page-surface.visual-surface .eyebrow {
    margin-bottom: 12px !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.62);
  }

  .client-mobile .visual-surface .hero-actions,
  .client-mobile .visual-surface .cta-actions,
  .client-mobile .visual-surface .chip-row,
  .client-mobile .visual-surface .trust-actions {
    position: relative;
    z-index: 3;
  }

  .client-mobile .visual-surface .hero-actions,
  .client-mobile .visual-surface .cta-actions {
    margin-top: 24px;
    gap: 10px;
  }

  .client-mobile .visual-surface .fine-note {
    margin-top: 14px !important;
  }

  .client-mobile .visual-surface .chip-row {
    margin-top: 18px;
    gap: 8px;
  }

  .client-mobile .visual-surface .chip {
    width: auto !important;
    min-height: 34px;
    justify-content: flex-start !important;
    padding: 0 12px;
    background: rgba(7,11,18,.52) !important;
    border-color: rgba(175,194,255,.22) !important;
    color: #DCE5F7;
    box-shadow: 0 12px 32px rgba(0,0,0,.16);
  }

  .client-mobile .visual-surface .step-list {
    margin-top: 20px !important;
    border-top: 1px solid rgba(167,173,184,.15) !important;
  }

  .client-mobile .visual-surface .step-list div {
    display: grid !important;
    grid-template-columns: 32px 1fr !important;
    gap: 11px !important;
    padding: 13px 0 !important;
    border-bottom: 1px solid rgba(167,173,184,.12) !important;
  }

  .client-mobile .visual-surface .step-list div span {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(109,139,255,.18);
    color: var(--lbp-blue-soft);
    font-weight: 900;
  }

  .client-mobile .visual-surface .step-list p {
    margin: 0 !important;
    max-width: none !important;
    font-size: 14.75px !important;
    line-height: 1.42 !important;
    color: #DFE5EE !important;
  }

  .client-mobile .visual-surface .plan-card-mini {
    margin-top: 20px !important;
    padding: 16px !important;
    border-radius: 20px !important;
    background: rgba(7,11,18,.54) !important;
    border: 1px solid rgba(255,210,138,.26) !important;
    box-shadow: 0 16px 44px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  .client-mobile .visual-surface .check-list {
    margin-top: 18px !important;
    gap: 10px !important;
  }

  .client-mobile .visual-surface .check-list li {
    font-size: 14.75px !important;
    line-height: 1.46 !important;
    color: #C6CED9 !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.50) !important;
  }

  .client-mobile .visual-surface .surface-caption,
  .client-mobile .visual-surface .surface-caption--split {
    position: absolute !important;
    z-index: 3 !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    display: inline-flex !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 20px !important;
    background: rgba(7,11,18,.64) !important;
    border-color: rgba(175,194,255,.22) !important;
    backdrop-filter: none !important;
    box-shadow: 0 12px 38px rgba(0,0,0,.22) !important;
  }

  .client-mobile .visual-surface .surface-caption--split span,
  .client-mobile .visual-surface--plan .surface-caption span {
    display: none !important;
  }

  .client-mobile .visual-surface--trust .surface-caption,
  .client-mobile .visual-surface--privacy .surface-caption {
    display: none !important;
  }
}

/* UA-controlled mobile mode for real mobile browsers whose layout viewport reports wider
   than 720px. Kept narrower than tablet-desktop composition, but still uses the same mobile
   overlay system after the user-agent check marks the client as mobile. */
.ua-mobile.client-mobile .visual-surface.visual-surface--hero,
.ua-mobile.client-mobile .visual-surface.visual-surface--how,
.ua-mobile.client-mobile .visual-surface.visual-surface--plan,
.ua-mobile.client-mobile .visual-surface.visual-surface--trust,
.ua-mobile.client-mobile .visual-surface.visual-surface--privacy,
.ua-mobile.client-mobile .page-surface.visual-surface {
  max-width: 720px;
}

@media (min-width: 721px) and (max-width: 920px) {
  .ua-mobile.client-mobile .container,
  .ua-mobile.client-mobile .container.slim { width: min(100% - 32px, 720px); }

  .ua-mobile.client-mobile .visual-surface.visual-surface--hero,
  .ua-mobile.client-mobile .visual-surface.visual-surface--how,
  .ua-mobile.client-mobile .visual-surface.visual-surface--plan,
  .ua-mobile.client-mobile .visual-surface.visual-surface--trust,
  .ua-mobile.client-mobile .visual-surface.visual-surface--privacy,
  .ua-mobile.client-mobile .page-surface.visual-surface {
    display: block !important;
    position: relative !important;
    min-height: 720px !important;
    overflow: hidden !important;
    border-radius: 30px !important;
    background: #05090F !important;
  }

  .ua-mobile.client-mobile .visual-surface .surface-picture,
  .ua-mobile.client-mobile .page-surface.visual-surface .surface-picture {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
  }

  .ua-mobile.client-mobile .visual-surface .surface-picture img,
  .ua-mobile.client-mobile .page-surface.visual-surface .surface-picture img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }

  .ua-mobile.client-mobile .visual-surface::before,
  .ua-mobile.client-mobile .page-surface.visual-surface::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
      linear-gradient(180deg, rgba(5,9,15,.98) 0%, rgba(5,9,15,.90) 40%, rgba(5,9,15,.46) 72%, rgba(5,9,15,.14) 100%),
      radial-gradient(circle at 14% 8%, rgba(109,139,255,.13), transparent 22rem) !important;
  }

  .ua-mobile.client-mobile .visual-surface::after,
  .ua-mobile.client-mobile .page-surface.visual-surface::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), inset 0 -92px 130px rgba(5,9,15,.28) !important;
  }

  .ua-mobile.client-mobile .visual-surface .surface-content,
  .ua-mobile.client-mobile .visual-surface .surface-content--hero,
  .ua-mobile.client-mobile .page-surface.visual-surface .surface-content {
    position: relative !important;
    z-index: 2 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 26px 24px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .ua-mobile.client-mobile .visual-surface .surface-content h1,
  .ua-mobile.client-mobile .visual-surface .surface-content h2,
  .ua-mobile.client-mobile .page-surface.visual-surface .surface-content h1 {
    max-width: 12.5em;
    text-shadow: 0 3px 20px rgba(0,0,0,.68);
  }

  .ua-mobile.client-mobile .visual-surface .surface-content h1 { font-size: clamp(42px, 7vw, 58px) !important; }
  .ua-mobile.client-mobile .visual-surface .surface-content h2,
  .ua-mobile.client-mobile .page-surface.visual-surface .surface-content h1 { font-size: clamp(34px, 5.6vw, 46px) !important; }

  .ua-mobile.client-mobile .visual-surface .surface-content p:not(.eyebrow),
  .ua-mobile.client-mobile .visual-surface .surface-content .hero-lede,
  .ua-mobile.client-mobile .page-surface.visual-surface .surface-content p:not(.eyebrow) {
    max-width: 31em !important;
    color: #C9D1DC !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.64) !important;
  }
}