/* CipherNode mobile compatibility layer
   Desktop styles are intentionally untouched. Everything below only runs on smaller screens. */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
iframe {
  max-width: 100%;
}

@media (max-width: 767px) {
  body {
    width: 100%;
  }

  /* Top information bar */
  body > div:first-of-type > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body > div:first-of-type > div > div {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  body > div:first-of-type {
    font-size: 12px !important;
  }

  /* Main navbar: keeps the same items, but stacks them cleanly on phones */
  body > nav > div {
    flex-wrap: wrap !important;
    gap: 14px !important;
    padding: 16px !important;
  }

  body > nav > div > div:first-child,
  body > nav > div > a:first-child {
    width: 100% !important;
    text-align: center !important;
    font-size: 28px !important;
  }

  body > nav [class~="hidden"][class~="md:flex"] {
    display: flex !important;
    order: 3 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    font-size: 13px !important;
  }

  body > nav [class~="hidden"][class~="md:flex"] a {
    padding: 8px 10px !important;
  }

  body > nav > div > div:last-child {
    order: 2 !important;
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  body > nav > div > div:last-child a {
    flex: 1 1 138px !important;
    max-width: 190px !important;
    text-align: center !important;
    padding: 11px 14px !important;
    font-size: 13px !important;
    border-radius: 14px !important;
  }

  /* Global mobile spacing */
  main {
    width: 100% !important;
  }

  main.py-20,
  main[class~="py-20"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  section,
  main[class~="px-6"],
  section[class~="px-6"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  section[class~="py-32"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  section[class~="py-24"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  section[class~="py-20"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  section[class~="py-8"] {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }

  [class~="px-6"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  [class~="p-10"],
  [class~="p-12"] {
    padding: 24px !important;
  }

  [class~="p-8"] {
    padding: 22px !important;
  }

  [class~="p-6"] {
    padding: 18px !important;
  }

  /* Type scaling */
  h1,
  [class~="text-5xl"],
  [class~="text-6xl"],
  [class~="md:text-6xl"] {
    font-size: clamp(32px, 10vw, 42px) !important;
    line-height: 1.12 !important;
  }

  h2,
  [class~="text-4xl"] {
    font-size: clamp(26px, 8vw, 34px) !important;
    line-height: 1.18 !important;
  }

  [class~="text-3xl"] {
    font-size: 28px !important;
  }

  [class~="text-2xl"] {
    font-size: 22px !important;
  }

  [class~="text-xl"] {
    font-size: 18px !important;
  }

  p,
  li,
  span,
  a,
  button,
  select,
  input,
  textarea {
    overflow-wrap: anywhere;
  }

  h1 br,
  h2 br {
    display: none !important;
  }

  /* Homepage hero */
  main section:first-child img[class~="w-72"] {
    width: 144px !important;
    height: 144px !important;
  }

  main section:first-child p {
    font-size: 16px !important;
  }

  main section:first-child button,
  main section:first-child a {
    max-width: 100% !important;
  }

  /* Cards and blocks */
  [class~="rounded-3xl"] {
    border-radius: 20px !important;
  }

  [class~="rounded-2xl"] {
    border-radius: 16px !important;
  }

  .shadow-2xl {
    box-shadow: none !important;
  }

  /* Hardware/spec rows and similar detail rows */
  main [class~="justify-between"][class~="border-b"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  main [class~="justify-between"][class~="border-b"] span:last-child {
    text-align: left !important;
  }

  /* Pricing calculator */
  #calculator [class~="p-10"] {
    padding: 22px !important;
  }

  #calculator select {
    width: 100% !important;
    min-width: 0 !important;
  }

  #priceDisplay {
    font-size: 36px !important;
    line-height: 1.15 !important;
  }

  #ramDisplay {
    font-size: 18px !important;
  }

  #monthlyBtn,
  #annuallyBtn {
    flex: 1 1 130px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    font-size: 13px !important;
  }

  /* Panel preview tabs */
  .tab-btn {
    flex: 1 1 42% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 13px !important;
  }

  #panel-img {
    border-radius: 10px !important;
  }

  /* FAQ */
  button[onclick^="toggleFAQ"] {
    gap: 16px !important;
    align-items: flex-start !important;
  }

  /* Footer */
  footer {
    padding-top: 48px !important;
    padding-bottom: 30px !important;
  }

  footer [class~="grid"] {
    gap: 32px !important;
  }

  footer .flex.items-center.gap-3 {
    align-items: center !important;
  }

  footer img[class~="w-14"] {
    width: 48px !important;
    height: 48px !important;
  }
}

@media (max-width: 480px) {
  body > nav > div > div:last-child a {
    flex-basis: 100% !important;
    max-width: none !important;
  }

  body > nav [class~="hidden"][class~="md:flex"] {
    gap: 6px !important;
  }

  body > nav [class~="hidden"][class~="md:flex"] a {
    flex: 1 1 45% !important;
    text-align: center !important;
    background: rgba(39, 39, 42, 0.45) !important;
    border: 1px solid rgba(63, 63, 70, 0.55) !important;
    border-radius: 12px !important;
  }

  [class~="p-10"],
  [class~="p-12"],
  [class~="p-8"] {
    padding: 20px !important;
  }

  [class~="gap-10"] {
    gap: 24px !important;
  }

  [class~="gap-8"] {
    gap: 20px !important;
  }

  [class~="mb-16"] {
    margin-bottom: 36px !important;
  }

  [class~="mb-12"] {
    margin-bottom: 30px !important;
  }

  [class~="mt-16"] {
    margin-top: 38px !important;
  }

  main section:first-child img[class~="w-72"] {
    width: 128px !important;
    height: 128px !important;
  }
}


/* Contact/legal page mobile helpers */
@media (max-width: 767px) {
  form input,
  form textarea,
  form button {
    width: 100% !important;
  }

  main .max-w-5xl,
  main .max-w-4xl {
    max-width: 100% !important;
  }

  .legal-content,
  main section.bg-\[\#111113\] {
    overflow-wrap: anywhere !important;
  }
}