/* iPhone-first responsive layer. Loaded after page-local and elite styles. */
:root {
  --mobile-gutter: clamp(.9rem, 4vw, 1.25rem);
  --mobile-nav-height: 64px;
  --mobile-tap: 46px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-rendered-height, var(--mobile-nav-height)) + .75rem);
}

body { min-height: 100vh; min-height: 100dvh; }
img, video, canvas, svg { max-width: 100%; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a, [role="button"] { touch-action: manipulation; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-bright, #5dd8ff);
  outline-offset: 3px;
}

.mobile-nav-toggle {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  width: var(--mobile-tap);
  height: var(--mobile-tap);
  flex: 0 0 var(--mobile-tap);
  padding: 0;
  border: 1px solid var(--border, rgba(81,190,255,.22));
  border-radius: 5px;
  background: rgba(7,12,23,.9);
  color: var(--white, #fff);
  cursor: pointer;
}

.mobile-nav-toggle span,
.mobile-nav-toggle::before,
.mobile-nav-toggle::after {
  content: "";
  position: absolute;
  width: 19px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.mobile-nav-toggle::before { transform: translateY(-6px); }
.mobile-nav-toggle::after { transform: translateY(6px); }
.mobile-nav-open .mobile-nav-toggle span { opacity: 0; }
.mobile-nav-open .mobile-nav-toggle::before { transform: rotate(45deg); }
.mobile-nav-open .mobile-nav-toggle::after { transform: rotate(-45deg); }

@media (pointer: coarse) {
  :where(button, .btn, .nav-link, .nav-cta, .nav-badge, .mobile-nav-toggle) {
    min-height: var(--mobile-tap);
  }
}

@media (max-width: 900px) {
  html, body { width: 100%; max-width: 100%; overflow-x: clip; }
  body { cursor: auto !important; padding-bottom: env(safe-area-inset-bottom, 0px); }
  body.mobile-nav-open { overflow: hidden; }
  button { min-height: var(--mobile-tap) !important; }

  nav {
    min-height: calc(var(--mobile-nav-height) + env(safe-area-inset-top, 0px)) !important;
    height: calc(var(--mobile-nav-height) + env(safe-area-inset-top, 0px)) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-right: max(var(--mobile-gutter), env(safe-area-inset-right, 0px)) !important;
    padding-left: max(var(--mobile-gutter), env(safe-area-inset-left, 0px)) !important;
  }

  .mobile-nav-toggle { display: inline-flex; order: 2; margin-left: auto; }
  nav .nav-right { order: 3; margin-left: .5rem; }
  nav.has-mobile-menu .nav-right { display: none !important; }
  nav .nav-logo, nav .logo {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    min-height: var(--mobile-tap);
  }

  nav [data-mobile-nav-menu] {
    position: fixed;
    z-index: 1000;
    top: var(--nav-rendered-height, calc(var(--mobile-nav-height) + env(safe-area-inset-top, 0px))) !important;
    left: max(.65rem, env(safe-area-inset-left, 0px));
    right: max(.65rem, env(safe-area-inset-right, 0px));
    display: none !important;
    flex-direction: column;
    gap: 0 !important;
    max-height: calc(100dvh - var(--nav-rendered-height, var(--mobile-nav-height)) - 1rem);
    margin: 0;
    padding: .45rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    border: 1px solid var(--border-bright, rgba(81,190,255,.34));
    border-radius: 7px;
    background: rgba(5,9,17,.985);
    box-shadow: 0 24px 70px rgba(0,0,0,.56);
    backdrop-filter: blur(18px);
  }
  .mobile-nav-open nav [data-mobile-nav-menu] { display: flex !important; }
  nav [data-mobile-nav-menu] li { width: 100%; }
  nav [data-mobile-nav-menu] a {
    display: flex !important;
    align-items: center;
    width: 100%;
    min-height: var(--mobile-tap);
    padding: .75rem .9rem;
    border-bottom: 1px solid var(--border, rgba(81,190,255,.14));
  }
  nav [data-mobile-nav-menu] li:last-child a { border-bottom: 0; }
  nav [data-mobile-nav-menu] .mobile-nav-action {
    color: var(--gold, #12aefb);
    font-weight: 700;
  }

  :where(.nav-link, .nav-cta, .nav-badge, .btn, .btn-primary, .btn-outline, .save-btn, .choose-plan-btn) {
    min-width: var(--mobile-tap);
    min-height: var(--mobile-tap) !important;
    align-items: center;
    justify-content: center;
  }
  :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    width: 100%;
    max-width: 100%;
    min-height: var(--mobile-tap);
    font-size: 16px !important;
  }
  textarea { line-height: 1.55; }

  footer {
    padding-right: max(var(--mobile-gutter), env(safe-area-inset-right, 0px)) !important;
    padding-bottom: max(2rem, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(var(--mobile-gutter), env(safe-area-inset-left, 0px)) !important;
  }
  .footer-links a, footer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--mobile-tap);
  }

  /* Landing page */
  body.elite-home #hero {
    padding-top: calc(var(--nav-rendered-height, 64px) + 1.75rem) !important;
    padding-bottom: 2.75rem !important;
  }
  .hero-right, .examples-demo, .ex-demo-window, .stream-window,
  .contact-layout, .contact-form-wrap { min-width: 0; max-width: 100%; }
  .ex-toggles, .scene-tabs, .demo-tabs {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }
  .ex-toggles button, .scene-tabs button, .demo-tabs button {
    min-height: var(--mobile-tap) !important;
    scroll-snap-align: start;
  }
  .chat-send-btn { min-width: var(--mobile-tap) !important; min-height: var(--mobile-tap) !important; }

  /* Landing pricing: each mode is a full-width row on phones. */
  body.elite-home .pricing-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .85rem !important;
    background: transparent !important;
  }
  body.elite-home .price-card { width: 100%; min-width: 0; }

  /* Mobile-only Memory Depth symbol; desktop keeps the original rendering. */
  body.elite-home .hero-stat-memory .hero-stat-val {
    font-family: Arial, 'Segoe UI Symbol', sans-serif !important;
    font-size: 2.7rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  /* Stable mobile live-demo composition:
     row 1 = full-width transcript; row 2 = video + waveform. */
  body.elite-home #hero .ex-demo-window {
    --mobile-live-panel-height: 346px;
  }
  body.elite-home #hero .ex-speech-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: 214px 132px !important;
    width: 100% !important;
    height: var(--mobile-live-panel-height) !important;
    min-height: var(--mobile-live-panel-height) !important;
    overflow: hidden !important;
  }
  body.elite-home #hero .ex-speech-left {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 214px !important;
    padding: .8rem .9rem !important;
    overflow: hidden !important;
  }
  body.elite-home #hero .ex-speech-label {
    margin-bottom: .42rem !important;
    font-size: .68rem !important;
  }
  body.elite-home #hero .ex-speech-lines { gap: .14rem !important; }
  body.elite-home #hero .ex-speech-line,
  body.elite-home #hero .ex-speech-line.trigger-kept {
    font-size: 1.16rem !important;
    line-height: 1.28 !important;
    overflow-wrap: anywhere;
  }
  body.elite-home #hero .ex-speech-line.prev {
    font-size: .94rem !important;
    line-height: 1.25 !important;
  }
  body.elite-home #hero .ex-wave-right,
  body.elite-home #hero .ex-wave-right.has-video {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 132px !important;
    min-height: 132px !important;
    border-top: 1px solid rgba(0,168,255,.18) !important;
    border-left: 0 !important;
    overflow: hidden !important;
    contain: layout paint !important;
  }
  body.elite-home #hero .ex-scene-video-wrap {
    position: relative !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 132px !important;
    border-right: 1px solid rgba(0,168,255,.18) !important;
    border-bottom: 0 !important;
    overflow: hidden !important;
    contain: strict !important;
    clip-path: inset(0) !important;
  }
  body.elite-home #hero .ex-scene-still {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    transform: none !important;
    transform-origin: center center !important;
    will-change: auto !important;
  }
  body.elite-home #hero .ex-scene-video-wrap > img,
  body.elite-home #hero .ex-scene-video-wrap > video,
  body.elite-home #hero .ex-scene-video-wrap > canvas {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
  }
  body.elite-home #hero .ex-wave-wrap {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 132px !important;
  }
  body.elite-home #hero .ex-wave-canvas {
    width: 100% !important;
    height: 100% !important;
  }
  body.elite-home #hero .ex-messages {
    padding: 2.15rem .62rem .55rem !important;
  }
  body.elite-home #hero .ex-msg {
    font-size: 1.02rem !important;
    line-height: 1.31 !important;
    overflow-wrap: anywhere;
  }
  body.elite-home #hero .ex-msg.joe-msg {
    font-size: 1.18rem !important;
    line-height: 1.34 !important;
  }
  body.elite-home #hero .ex-msg.joe-msg,
  body.elite-home #hero .ex-msg.viewer-msg {
    padding-left: 2.25rem !important;
  }
  body.elite-home #hero .joe-mini-icon,
  body.elite-home #hero .viewer-mini-icon {
    left: .4rem !important;
  }
  body.elite-home #hero .ex-joe-tag {
    top: .38rem !important;
    right: .45rem !important;
    max-width: calc(100% - .9rem);
    padding: .16rem .42rem !important;
  }
  body.elite-home #hero .ex-joe-tag span {
    font-size: .54rem !important;
    letter-spacing: .12em !important;
    white-space: nowrap;
  }

  /* On phones, the scene transition belongs over Live Audio. The chat area
     shows a lightweight three-dot handoff while the next scene loads. */
  body.elite-home #hero .ex-messages-wrap {
    overflow: visible !important;
  }
  body.elite-home #hero .ex-transition {
    top: auto !important;
    right: 0 !important;
    bottom: 100% !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--mobile-live-panel-height) !important;
    overflow: hidden !important;
  }
  body.elite-home #hero .ex-mobile-next-dots {
    position: absolute;
    inset: 0;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    background: rgba(6,10,19,.88);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  body.elite-home #hero .ex-transition.show ~ .ex-mobile-next-dots {
    opacity: 1;
    visibility: visible;
  }
  body.elite-home #hero .ex-mobile-next-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold, #12aefb);
    box-shadow: 0 0 8px rgba(18,174,251,.55);
    animation: mobileNextDot .78s ease-in-out infinite;
  }
  body.elite-home #hero .ex-mobile-next-dots span:nth-child(2) { animation-delay: .13s; }
  body.elite-home #hero .ex-mobile-next-dots span:nth-child(3) { animation-delay: .26s; }

  @keyframes mobileNextDot {
    0%, 70%, 100% { opacity: .28; transform: translateY(0); }
    35% { opacity: 1; transform: translateY(-3px); }
  }

  /* Landing footer: brand, links and company line each get their own row. */
  body.elite-home footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    gap: .75rem !important;
    text-align: center !important;
  }
  body.elite-home footer > * { width: 100% !important; }
  body.elite-home .footer-links {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: .25rem .75rem !important;
  }
  body.elite-home .footer-copy { display: block !important; }

  /* Readable comparison cards replace a sideways-scrolling table. */
  .compare-table {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
    white-space: normal !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .compare-table thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
  }
  .compare-table tbody, .compare-table tr, .compare-table td { display: block !important; width: 100% !important; }
  .compare-table tr {
    margin-bottom: .9rem;
    overflow: hidden;
    border: 1px solid var(--border-bright, rgba(81,190,255,.3));
    border-radius: 6px;
    background: var(--panel, #0d0d17);
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
  }
  .compare-table td {
    min-width: 0 !important;
    padding: .78rem .9rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border, rgba(81,190,255,.14)) !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .compare-table td:last-child { border-bottom: 0 !important; }
  .compare-table td:first-child {
    padding: 1rem .9rem !important;
    color: var(--white, #fff) !important;
    background: rgba(18,174,251,.09) !important;
    font-weight: 700;
  }
  .compare-table td:not(:first-child) {
    display: grid !important;
    grid-template-columns: minmax(6.25rem,.8fr) minmax(0,1.3fr);
    gap: .75rem;
    align-items: start;
  }
  .compare-table td:not(:first-child)::before {
    content: attr(data-label);
    color: var(--gold, #12aefb);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  /* Console */
  body.elite-console .ctrl-hero { padding-top: calc(var(--nav-rendered-height, 64px) + 2rem) !important; }
  body.elite-console .status-strip { top: var(--nav-rendered-height, 64px) !important; }
  body.elite-console .profile-card.mobile-profile-promoted {
    width: calc(100% - 2rem) !important;
    max-width: none !important;
    margin: 0 1rem 1rem !important;
  }
  .panel, .profile-card, .customer-card, .job-card { min-width: 0; overflow-wrap: anywhere; }

  /* Checkout, account, legal and admin pages */
  body.elite-checkout .hero { padding-top: calc(var(--nav-rendered-height, 64px) + 1.75rem) !important; }
  body.elite-login .shell, body.elite-reset .shell, body.elite-success .shell {
    min-height: 100dvh !important;
    padding-top: calc(var(--nav-rendered-height, 64px) + 2rem) !important;
  }
  body.elite-admin nav { flex-wrap: nowrap; }
  body.elite-admin nav .nav-right { min-width: 0; justify-content: flex-end; }
  body.elite-admin .wrap { padding-top: calc(var(--nav-rendered-height, 64px) + 2.5rem) !important; }
  body.elite-admin .drawer { width: min(100%, 520px); }
  body.elite-legal .wrap { width: min(100%, 920px); padding-inline: var(--mobile-gutter); }
  .actions a, .actions button, .step-copy a, .lead a, .msg a { overflow-wrap: anywhere; }
}

@media (max-width: 430px) {
  .compare-table td:not(:first-child) { grid-template-columns: 1fr; gap: .3rem; }
  .card, .panel, .plan-card, .pay-panel, .flow-aside { max-width: 100%; }
  nav .nav-logo, nav .logo { font-size: .98rem !important; letter-spacing: .1em !important; }
  nav .nav-right { margin-left: .35rem; }
}

@media (min-width: 901px) {
  .ex-mobile-next-dots { display: none !important; }
}

@media (max-width: 900px) and (orientation: landscape) {
  nav [data-mobile-nav-menu] { max-height: calc(100dvh - var(--nav-rendered-height, 64px) - .5rem); }
  body.elite-home #hero { padding-top: calc(var(--nav-rendered-height, 64px) + 1rem) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .scan-lines, .scroll-progress, .cta-video-bg, video[autoplay] { display: none !important; }
}

@media (max-width: 900px) and (prefers-reduced-data: reduce) {
  .cta-video-bg, video[autoplay] { display: none !important; }
}