/* argylldata.ai: additions to the site stylesheet (site.css is the live site's compiled stylesheet, unchanged).
   Phone and tablet fixes, fade-ins, form states. Breakpoints match site.css: 640, 768, 1024, 1280 px. */

/* ---------- fade-in (only with JS, only for sections below the first screen) ---------- */
.js [data-reveal].reveal-wait{opacity:0;transform:translateY(24px)}
.js [data-reveal].reveal-wait.is-in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.js [data-reveal].reveal-wait{opacity:1;transform:none}}

/* ---------- forms ---------- */
[aria-invalid="true"]{border-color:#f87171!important;box-shadow:0 0 0 2px rgba(248,113,113,.18)}
.form-status{color:#fca5a5}
#mobile-menu[hidden]{display:none!important}

/* ---------- never scroll sideways ---------- */
html,body{overflow-x:clip}
img,video,iframe{max-width:100%}
/* long words, URLs and e-mail addresses in the legal pages and articles */
main p,main li,main td,main th,main dd{overflow-wrap:anywhere}
/* tables in the legal pages: scroll inside their own box on narrow screens */
main table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (min-width:1024px){main table{display:table;overflow:visible}}

/* ---------- touch targets ---------- */
@media (hover:none) and (pointer:coarse){
  footer a,footer button{display:inline-block;padding-top:.35rem;padding-bottom:.35rem}
  details>summary{min-height:44px}
}

/* ---------- phones (up to 639px) ---------- */
@media (max-width:639px){
  /* header: smaller logo so the first screen shows more of the page */
  header[data-header] nav{padding-left:.75rem;padding-right:.75rem}
  header[data-header] nav img{height:2.75rem}
  /* the big glow blobs are 500-900px wide; keep them from widening the page */
  section{overflow-x:clip}
  /* full-width buttons stack neatly */
  .btn-gold,.btn-ghost{max-width:100%;white-space:normal;text-align:center}
}

/* ---------- tablets in portrait (768-1023px): the desktop menu and the CTA share one row ---------- */
@media (min-width:768px) and (max-width:1023px){
  header[data-header] nav img{height:3rem}
  header[data-header] nav{padding-left:1rem;padding-right:1rem}
  header[data-header] nav .md\:flex{gap:1.1rem}
  header[data-header] nav .btn-gold{padding-left:1rem!important;padding-right:1rem!important;font-size:12px}
}

/* hidden model cards (Models page filter) */
[data-model-grid]>[hidden]{display:none!important}

/* ---------- phones and tablets: easier tapping, slightly larger small print ---------- */
@media (max-width:1023px){
  /* footer links and the tablet menu: at least 40px tall to tap */
  footer a,footer button{display:inline-flex;align-items:center;min-height:40px}
  header[data-header] nav a.font-mono{display:inline-flex;align-items:center;min-height:40px}
  [data-model-filter] button{min-height:40px}
  main a.font-mono:not(#mobile-menu a){display:inline-flex;align-items:center;min-height:40px}
  #mobile-menu a.font-mono{display:flex;align-items:center;min-height:44px}
}
@media (max-width:639px){
  .text-\[10px\]{font-size:11.5px}
  .text-\[11px\]{font-size:12px}
}

/* utility classes used by our own markup that the compiled site.css does not include */
.p-5{padding:1.25rem}
.text-\[12px\]{font-size:12px}
@media (min-width:640px){.sm\:p-6{padding:1.5rem}.sm\:self-start{align-self:flex-start}}

/* home page demo panel: on phones the long label and the badge stack instead of squeezing into a column */
@media (max-width:639px){
  [data-demo-head]{flex-direction:column-reverse;align-items:flex-start;gap:.75rem}
}