/* ============================================================
   KLYMO MOBILE SYSTEM
   One deliberate mobile layer shared by every page.
   Scale: 4px grid — 8 / 12 / 16 / 20 / 28 / 40 / 56
   Type:  h1 34–42 · h2 27–32 · h3 20 · body 16/1.65 · mono 10
   Alignment: left. Nothing centered unless it is a number.
   ============================================================ */

@media (max-width: 767px) {

  /* ---------- base ---------- */
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
  }
  body {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }
  .light-leak {
    filter: blur(70px);
    opacity: .1;
  }
  /* Light theme, phone: one flat warm-white canvas. Specificity (0,2,2)
     outranks the light-kit's body/[class*=] rules regardless of order. */
  html[data-theme="light"] body.bg-background {
    background: #fdfbfc !important;
  }

  /* ---------- navigation bar ---------- */
  nav > div:first-child {
    height: 64px !important;
    padding-inline: 20px !important;
  }
  nav img[alt="Klymo AI Logo"] {
    height: 44px !important;
    width: auto !important;
  }
  nav > div:first-child > div:first-child a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* phones get the hamburger, not the inline CTA */
  nav > div:first-child a.metallic-button {
    display: none !important;
  }
  #theme-toggle,
  #mobile-menu-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 178, 184, .16);
    border-radius: 3px;
    background: rgba(255, 178, 184, .03);
  }
  nav::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent 8%, rgba(255, 178, 184, .1) 30%, rgba(255, 178, 184, .4) 50%, rgba(255, 178, 184, .1) 70%, transparent 92%);
    pointer-events: none;
  }
  [data-theme="light"] nav::after {
    background: linear-gradient(90deg, transparent 8%, rgba(255, 107, 142, .1) 30%, rgba(255, 107, 142, .35) 50%, rgba(255, 107, 142, .1) 70%, transparent 92%);
  }

  /* ---------- mobile menu: full-height indexed sheet ---------- */
  /* The nav's backdrop-filter makes it the containing block for fixed
     descendants, so anchor the sheet absolutely below the fixed nav. */
  #mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    border-top: 1px solid rgba(255, 178, 184, .14) !important;
    /* fully opaque: nested backdrop-filters (nav + sheet) composite
       unreliably and let page content ghost through */
    background: linear-gradient(180deg, #080709, #050505) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #mobile-menu:not(.hidden) {
    animation: klymo-menu-in .26s cubic-bezier(.16, 1, .3, 1) both;
  }
  #mobile-menu > div {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 12px 20px calc(24px + env(safe-area-inset-bottom)) !important;
    counter-reset: knav;
  }
  #mobile-menu a:not(.metallic-button) {
    display: flex !important;
    align-items: center;
    gap: 16px;
    min-height: 62px;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-family: "Hanken Grotesk", sans-serif !important;
    font-size: 21px !important;
    font-weight: 600;
    letter-spacing: -.015em !important;
    line-height: 1 !important;
    text-transform: none !important;
    color: #fdfdfd;
  }
  #mobile-menu a:not(.metallic-button)::before {
    counter-increment: knav;
    content: "0" counter(knav);
    min-width: 24px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
    color: rgba(255, 178, 184, .55);
  }
  #mobile-menu a.active:not(.metallic-button) {
    color: #ffb2b8;
  }
  #mobile-menu > div > a:last-child {
    margin-top: auto !important;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px !important;
    letter-spacing: .2em !important;
  }
  body.mobile-menu-open {
    overflow: hidden !important;
  }
  [data-theme="light"] #mobile-menu {
    background: linear-gradient(180deg, #fdfbfc, #faf4f6) !important;
  }
  [data-theme="light"] #mobile-menu a:not(.metallic-button) {
    color: #161418;
    border-bottom-color: rgba(0, 0, 0, .07);
  }
  [data-theme="light"] #mobile-menu a.active:not(.metallic-button) {
    color: #ff6b8e;
  }

  /* ---------- section rhythm ---------- */
  main > section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  main > section:first-child {
    padding-top: 100px !important;
    padding-bottom: 28px !important;
  }

  /* heroes read left-aligned, like the rest of the system */
  main > section:first-child {
    text-align: left !important;
  }
  main > section:first-child .flex.flex-col.items-center {
    align-items: flex-start !important;
  }
  main > section:first-child .mx-auto {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  main > section:first-child h1 {
    text-wrap: balance;
  }

  /* ---------- typography ---------- */
  main h1 {
    font-size: clamp(34px, 9.5vw, 42px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.03em !important;
    margin-bottom: 20px !important;
  }
  main h2 {
    font-size: clamp(27px, 7.5vw, 32px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.022em !important;
  }
  main p.font-body-lg {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }
  /* display numbers (pricing) */
  main .text-5xl {
    font-size: 40px !important;
    line-height: 1.05 !important;
    margin-bottom: 20px !important;
  }
  main .text-7xl {
    font-size: 56px !important;
    line-height: 1 !important;
  }
  /* 10px floor on micro labels — nothing smaller renders on a phone */
  .text-\[8px\], .text-\[9px\] {
    font-size: 10px !important;
  }
  /* section kickers: one quiet line, no letter-spacing overflow */
  main p.font-label-mono.uppercase {
    font-size: 10px !important;
    letter-spacing: .18em !important;
  }

  /* ---------- cards ---------- */
  main .glass-pink:not(.inline-flex):not(.rounded-full) {
    padding: 20px !important;
    border-radius: 4px;
  }
  main .grid {
    gap: 12px !important;
  }
  main section .mb-10 { margin-bottom: 24px !important; }
  main section .mb-12 { margin-bottom: 28px !important; }
  main section ul.space-y-4 > li + li { margin-top: 12px !important; }

  /* ---------- buttons ---------- */
  main a.metallic-button,
  main a.metallic-pink-btn {
    width: 100%;
    min-height: 52px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding-block: 0 !important;
    font-size: 10px !important;
    letter-spacing: .18em !important;
  }

  /* ---------- forms (book-audit) ---------- */
  input.form-input, select.form-input, textarea.form-input {
    font-size: 16px !important; /* prevents iOS focus zoom */
    min-height: 48px;
  }

  /* ---------- comparison table ---------- */
  .compare-table {
    min-width: 640px !important;
  }
  .compare-table td, .compare-table th {
    padding-block: 14px !important;
    font-size: 13px;
    line-height: 1.5;
  }
  .overflow-x-auto {
    -webkit-mask-image: linear-gradient(to right, black 92%, transparent);
    mask-image: linear-gradient(to right, black 92%, transparent);
    scrollbar-width: thin;
  }

  /* ---------- footer: two-column ledger ---------- */
  footer {
    padding: 56px 0 24px !important;
  }
  footer > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 20px !important;
    padding-inline: 20px !important;
  }
  footer > .grid > div:first-child {
    grid-column: 1 / -1;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 178, 184, .1);
  }
  [data-theme="light"] footer > .grid > div:first-child {
    border-bottom-color: rgba(255, 107, 142, .14);
  }
  footer img[alt="Klymo AI Logo"] {
    height: 56px !important;
    width: auto !important;
  }
  footer > .grid > div:first-child .mb-8 { margin-bottom: 12px !important; }
  footer > .grid > div:first-child p { margin-bottom: 0 !important; }
  footer h4 {
    margin-bottom: 12px !important;
    font-size: 10px !important;
    letter-spacing: .28em !important;
  }
  footer ul { font-size: 10px !important; }
  footer ul.space-y-4 > li + li { margin-top: 0 !important; }
  footer ul li a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
  }
  footer > div:last-child {
    margin-top: 40px !important;
    padding: 20px 20px 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    font-size: 10px !important;
    line-height: 1.6;
  }
  footer > div:last-child > div {
    width: 100%;
    justify-content: space-between;
    gap: 16px !important;
  }

  /* ---------- touch ---------- */
  a:focus-visible, button:focus-visible {
    outline: 2px solid #ffb2b8;
    outline-offset: 2px;
  }
  [data-theme="light"] a:focus-visible,
  [data-theme="light"] button:focus-visible {
    outline-color: #ff6b8e;
  }
}

@media (max-width: 767px) and (hover: none) {
  .metallic-button:hover,
  .metallic-pink-btn:hover,
  .bento-card:hover {
    transform: none !important;
    filter: none !important;
  }
}

@keyframes klymo-menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}