/* =========================================================================
   responsive.css — shared element defaults + mobile-first breakpoints.
   ========================================================================= */

/* --------------------------------- defaults ------------------------------- */
.art { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; overflow: visible; }
.art .art-face { transition: opacity 0.3s ease; }
.btn, .chip, .pill, .tabs button { min-height: 40px; }
.btn--sm { min-height: 34px; }
.fab { min-height: 54px; }
table.data th, table.data td { white-space: normal; }

/* --------------------------------- ≤ 1180px ------------------------------ */
@media (max-width: 1180px) {
  :root { --container: 1120px; }
  .nav-list a { padding: 9px 9px; font-size: 0.9rem; }
  .footer__grid { grid-template-columns: 1.1fr repeat(3, minmax(0, 0.8fr)); }
  .dash { grid-template-columns: 226px minmax(0, 1fr); }
}

/* --------------------------------- ≤ 1024px ------------------------------- */
@media (max-width: 1024px) {
  .main-nav > .nav-list { gap: 0; }
  .header-actions .btn:not(.btn--sm) { padding: 10px 13px; font-size: 0.84rem; }
  .hero__grid, .page-hero__grid, .split { grid-template-columns: 1fr; }
  .split--flip .split__art { order: 0; }
  .hero__art { order: -1; min-height: 0; }
  .hero3d { max-height: 420px; }
  .page-hero__art { max-width: 560px; }
  .legal-body, .blog-shell { grid-template-columns: 1fr; }
  .toc, .blog-aside { position: static; }
  .blog-feature { grid-template-columns: 1fr; }
  .auth-card { grid-template-columns: 1fr; }
  .auth-side { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .dash { grid-template-columns: 1fr; }
  .dash__side { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .dash__nav { grid-auto-flow: column; overflow-x: auto; }
  .dash__nav button { white-space: nowrap; }
}

/* --------------------------------- ≤ 900px -------------------------------- */
@media (max-width: 1180px) {
  :root { --header-h: 66px; }
  .visually-hidden-sm { display: initial; }
  .topbar__msg { display: none; }
  .header-actions { margin-inline-start: auto; }
  .header-actions .btn { display: none; }
  .nav-toggle { display: grid; place-items: center; }
  .main-nav {
    position: fixed;
    z-index: 60;
    inset: 0 0 0 auto;
    width: min(400px, 92vw);
    margin: 0;
    padding: 88px 20px calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
    background: linear-gradient(170deg, rgba(12, 18, 33, 0.99), rgba(4, 7, 14, 0.99));
    border-left: 1px solid var(--hairline);
    box-shadow: -30px 0 80px -30px rgba(0, 0, 0, 1);
    visibility: hidden;
    transform: translateX(102%);
    transition: transform 0.34s cubic-bezier(0.2, 0.75, 0.2, 1);
    overscroll-behavior: contain;
  }
  body.nav-open .main-nav { transform: none; visibility: visible; }
  body.nav-open { overflow: hidden; }
  .nav-list { display: grid; gap: 2px; }
  .nav-list a { padding: 13px 12px; font-size: 1rem; border-radius: 12px; justify-content: flex-start; }
  .nav-item--menu > a { justify-content: space-between; }
  .nav-item--account > a { border: 1px solid rgba(34, 211, 238, 0.3); background: rgba(34, 211, 238, 0.08); margin-top: 8px; justify-content: center; }
  .mega {
    position: static;
    width: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.035);
    border: 0;
    border-left: 2px solid rgba(34, 211, 238, 0.35);
    border-radius: 0 12px 12px 0;
    margin: 4px 0 8px;
    padding: 6px 0 10px 12px;
    display: none;
  }
  .nav-item--menu.is-open .mega { display: block; }
  .mega__title { display: none; }
  .mega__foot { display: none; }
  .mobile-cta { display: grid !important; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hairline); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__bar { justify-content: flex-start; }
  .footer__meta { text-align: left; }
  .media-tile--row .art { width: 72px; }
}

@media (min-width: 1181px) {
  .mobile-cta { display: none; }
  .nav-scrim { display: none !important; }
}

/* --------------------------------- ≤ 680px -------------------------------- */
@media (max-width: 680px) {
  :root { --container: 100%; }
  .container { width: calc(100% - 1.7rem); }
  body { font-size: 15.4px; }
  .section { padding-block: clamp(40px, 9vw, 62px); }
  .hero { padding-block: 22px 44px; }
  .hero3d { aspect-ratio: 1 / 1; }
  .hero3d__float { width: clamp(66px, 21%, 104px); border-radius: 14px; }
  .hero3d__chips { bottom: -14px; gap: 6px; }
  .hero3d__chips .chip { font-size: 0.7rem; padding: 5px 9px; }
  .btn-row .btn { flex: 1 1 auto; }
  .cta-band__list { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .hero-meta li { flex: 1 1 44%; min-width: 0; }
  .media-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr)); }
  .dash__nav { grid-auto-flow: row; }
  .toast-stack { left: 12px; right: 12px; width: auto; bottom: calc(84px + env(safe-area-inset-bottom)); }
  .fab-stack { right: 12px; }
  .quote-card figcaption { flex-wrap: wrap; }
  .quote-card .pill { margin-left: 51px; }
}

/* --------------------------------- ≤ 400px -------------------------------- */
@media (max-width: 400px) {
  .brand__word { font-size: 0.78rem; letter-spacing: 0.04em; }
  .brand__sub { font-size: 0.55rem; letter-spacing: 0.16em; }
  .brand__mark { width: 34px; height: 34px; }
  .code-box { font-size: 0.9rem; letter-spacing: 0.06em; }
  .media-row { grid-template-columns: 1fr 1fr; }
}

/* ----------------------------- small height phones ----------------------- */
@media (max-height: 620px) and (max-width: 900px) {
  .main-nav { padding-top: 74px; }
  .hero3d__chips { position: static; margin-top: 14px; }
}

/* ------------------------------- touch tweaks ---------------------------- */
@media (hover: none) {
  [data-tilt] { transform: none !important; }
  .card3d:hover { transform: none; }
  .btn:hover { transform: none; }
}

/* ── full-bleed phone layout: use the whole screen ─────────────────────── */
@media (max-width: 640px) {
  .container,
  .container--narrow { width: calc(100% - 18px); }
  .container--wide { width: calc(100% - 12px); }
  .hero { min-height: calc(100svh - var(--header-h, 64px)); display: grid; align-content: center; }
  .glass-card, .panel, .glass-panel { border-radius: 16px; }
  .dash__card .table-wrap { margin-inline: -10px; }
}

/* ── ultra-wide desktop: keep breathing room, no side bands ───────────── */
@media (min-width: 1700px) {
  .container { width: min(100% - 88px, 1660px); }
}

html, body { max-width: 100%; overflow-x: clip; }
.site-header__inner, .hero__grid > *, .grid > *, .dash__main, .dash__panel { min-width: 0; }
@media (max-width: 640px) {
  .topbar__mail, .topbar__links a[href^="mailto:"], .topbar__sep { display: none; }
  .topbar__inner { min-height: 34px; }
  .topbar__links { width: 100%; justify-content: space-between; }
  .hero__art { order: 1; }
  .hero3d { max-height: 340px; }
  .hero { min-height: auto; }
  .hero h1 { font-size: clamp(2rem, 8.7vw, 3.25rem); }
  .hero__sub2 { font-size: .85rem; }
  .header-actions { gap: 6px; }
  .topbar__links a { font-size: .78rem; }
  .local__grid { grid-template-columns: 1fr; }
  .auth-main, .auth-side { padding: 20px 15px; }
  .dash__side { grid-template-columns: minmax(0,1fr); }
  .dash__grid { grid-template-columns: minmax(0,1fr); }
  .table-wrap { overflow-x: auto; max-width: 100%; }
}
/* Compact desktop header retains the full navigation without clipping CTAs. */
@media (min-width: 1181px) {
  .nav-item--account { display: none; }
  .nav-list a { text-decoration: none; }
}
@media (min-width: 1181px) and (max-width: 1650px) {
  .site-header__inner { gap: 12px; }
  .site-header .brand__word { font-size: .84rem; }
  .site-header .brand__sub { font-size: .52rem; letter-spacing: .18em; }
  .site-header .brand__mark { width: 34px; height: 34px; }
  .nav-list { gap: 0; }
  .nav-list a { font-size: .84rem; padding-inline: 8px; }
  .header-actions .btn { white-space: nowrap; padding: 11px 13px; font-size: .8rem; }
  .header-actions .btn-wa { display: none; }
  .topbar__msg { display: none; }
}