/*
 * ADDED by see.io. The website pages arrived with their own styling and none
 * of it has been changed: every rule here is either a safety net that only
 * fires when something would otherwise spill off the screen, or sits inside a
 * media query a desktop browser never applies.
 *
 * Two of these pages already asked for style.css and never had one, so this
 * also stops a 404 on every load.
 */

/* ------------------------------------------------ never spill off screen */
img, video, canvas, iframe, svg, table, pre { max-width: 100%; }
img, video { height: auto; }
input, select, textarea, button { max-width: 100%; box-sizing: border-box; }
code, pre { overflow-wrap: anywhere; }

/* a video whose file was never supplied must not leave a black hole */
video[data-missing-video] { display: none !important; }

/* ------------------------------------------------------------ the phone */
@media (max-width: 900px) {
  /* the home page locks the document so its full screen hero can sit still.
     On a phone that hides everything below the fold, so scrolling comes back. */
  html, body { overflow-x: hidden !important; }
  body { overflow-y: auto !important; height: auto !important; min-height: 100%; }

  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { word-break: break-word; }
}

@media (max-width: 640px) {
  html, body { overflow-y: auto !important; height: auto !important; }

  /* the hero: give it a real height instead of a locked viewport */
  .scene-3d, .phone-frame { max-width: 100%; }
  .bgVideo { object-fit: cover; }

  .neo-container {
    display: flex; flex-direction: column; gap: 10px;
    width: 100%; max-width: 420px; margin-left: auto; margin-right: auto;
  }
  .neo-btn { width: 100%; justify-content: center; text-align: center; }

  .home-page { padding-left: 16px; padding-right: 16px; }
  .logo { max-width: 140px; height: auto; }
  h1, .typewriter-text { font-size: clamp(1.3rem, 6vw, 2rem); line-height: 1.25; }
  h2 { font-size: clamp(1.1rem, 5vw, 1.5rem); }
  .sub-text { font-size: 0.95rem; }

  /* anything the pages lay out in columns falls into one */
  .grid, .cards, .row, .columns, .two-col, .three-col { grid-template-columns: 1fr !important; }
  .container, .wrapper, .content, .page, main, section { max-width: 100%; }
}

@media (max-width: 400px) {
  body { font-size: 0.95rem; }
  .neo-btn { font-size: 0.9rem; padding: 12px 14px; }
}

/* a phone held sideways: let a full height hero scroll rather than be cut */
@media (max-height: 480px) and (orientation: landscape) {
  html, body { overflow-y: auto !important; height: auto !important; }
  .home-page, .hero, .scene-3d { min-height: auto !important; }
}

/* ----------------------------------------- the home page headline, on a phone
 * The heading is typed out by an animation that grows its width from zero,
 * which needs white-space: nowrap. At 2.5rem on a phone that sentence is far
 * wider than the screen, so it was cut off mid word. Below 640px it wraps and
 * sizes to the screen instead, and its sub line is shown with it. Nothing was
 * removed: on a wider screen the typing effect plays exactly as before.
 */
@media (max-width: 640px) {
  .typewriter-text,
  .typewriter-text.start-typing {
    white-space: normal !important;
    overflow: visible !important;
    width: auto !important;
    max-width: 100%;
    font-size: clamp(1.35rem, 7vw, 2.1rem) !important;
    animation: none !important;
    line-height: 1.2;
  }
  .typewriter-text.start-typing + .sub-text,
  .sub-text {
    opacity: 1 !important;
    animation: none !important;
    font-size: 1rem;
    padding: 0 4px;
  }
}