/* ===========================================================================
   Mindenza responsive layer — single source of truth for every breakpoint.

   These pages carry their layout in inline style attributes (Claude Design
   output), so the rules below key off those attributes. They are written
   against the exact serialisation the pages use: no space after the colon.
   Every rule that overrides an inline style needs !important; that is the
   cost of inline layout, not a shortcut.

   Ladder:   <=360  small phone
             <=480  phone
             <=640  large phone
             <=700  collapse guarantee — nothing is ever squeezed below this
             <=900  tablet portrait
             <=1023 tablet landscape
             <=1280 small laptop
             >=1024 container widens toward the 1536 cap
   =========================================================================== */

:root {
  --mz-gutter: clamp(16px, 4.5vw, 32px);
}

/* --- 1. Foundations ------------------------------------------------------ */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* `clip` behaves like `hidden` but does not create a scroll container, so
   position:sticky and scroll-anchoring keep working. `hidden` is the fallback
   for engines without it. */
html, body { overflow-x: hidden; }
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

* { box-sizing: border-box; }

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

/* The single most common cause of blowouts: a flex/grid child refusing to
   shrink below its content width. */
[style*="display:grid"] > *,
[style*="display:flex"] > * { min-width: 0; }

/* --- 2. Page containers -------------------------------------------------- */

/* Every page container in the design is one of these five widths. */
[style*="max-width:1060px"],
[style*="max-width:1120px"],
[style*="max-width:1160px"],
[style*="max-width:1180px"],
[style*="max-width:1200px"] {
  padding-left: var(--mz-gutter) !important;
  padding-right: var(--mz-gutter) !important;
}

@media (min-width: 1024px) {
  [style*="max-width:1060px"],
  [style*="max-width:1120px"],
  [style*="max-width:1160px"],
  [style*="max-width:1180px"],
  [style*="max-width:1200px"] { width: 99% !important; max-width: 1536px !important; }
}

/* Vertical rhythm compresses on small screens — 96px of air above every
   section is desktop spacing, not phone spacing. */
@media (max-width: 900px) {
  [style*="padding:160px 32px"] { padding-top: 84px !important; }
  [style*="padding:150px 32px"] { padding-top: 80px !important; }
  [style*="padding:140px 32px"] { padding-top: 76px !important; }
  [style*="padding:120px 32px"] { padding-top: 68px !important; }
  [style*="padding:112px 32px"] { padding-top: 96px !important; }  /* under fixed nav */
  [style*="padding:102px 32px"] { padding-top: 92px !important; }
  [style*="padding:96px 32px"]  { padding-top: 60px !important; }
  [style*="padding:90px 32px"]  { padding-top: 58px !important; }
  [style*="padding:88px 32px"]  { padding-top: 56px !important; }
  [style*="padding:80px 32px"]  { padding-top: 54px !important; }
  [style*="padding:72px 32px"]  { padding-top: 92px !important; }  /* page headers sit under the nav */
  [style*="padding:64px 32px"]  { padding-top: 48px !important; }
  [style*="padding:62px 32px"]  { padding-top: 46px !important; }
  [style*="padding:56px 32px"]  { padding-top: 44px !important; }
  [style*="padding:52px 32px"]  { padding-top: 42px !important; }

  [style*="32px 110px"] { padding-bottom: 64px !important; }
  [style*="32px 100px"] { padding-bottom: 60px !important; }
  [style*="32px 84px"]  { padding-bottom: 52px !important; }
  [style*="32px 72px"]  { padding-bottom: 48px !important; }
  [style*="32px 64px"]  { padding-bottom: 44px !important; }
  [style*="32px 56px"]  { padding-bottom: 40px !important; }
  [style*="32px 40px"]  { padding-bottom: 32px !important; }
}

/* Inner card padding also needs to come down or content loses its width. */
@media (max-width: 640px) {
  [style*="padding:56px"]  { padding: 26px 20px !important; }
  [style*="padding:48px"]  { padding: 24px 20px !important; }
  [style*="padding:44px"]  { padding: 22px 18px !important; }
  [style*="padding:40px"]  { padding: 22px 18px !important; }
  [style*="padding:36px"]  { padding: 20px 18px !important; }
  [style*="padding:32px"]:not([style*="max-width:1"]) { padding: 18px 16px !important; }
}

/* --- 3. Grid ladder ------------------------------------------------------ */

/* 3a. Two-track splits (hero, sidebar + body, media + copy) go single column
       as soon as the narrow track can no longer hold real content. */
@media (max-width: 900px) {
  [style*="grid-template-columns:1.05fr 1fr"],
  [style*="grid-template-columns:1.1fr 1fr"],
  [style*="grid-template-columns:1.2fr 1fr"]:not([style*="1fr 1fr 1.2fr"]),
  [style*="grid-template-columns:1.25fr 1fr"],
  [style*="grid-template-columns:1.4fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  [style*="grid-template-columns:1.5fr 1fr"],
  [style*="grid-template-columns:1fr 1.4fr"],
  [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  [style*="grid-template-columns:auto 1fr"],
  [style*="grid-template-columns:200px 1fr"],
  [style*="grid-template-columns:260px 1fr"],
  [style*="grid-template-columns:320px 1fr"],
  [style*="grid-template-columns:340px 1fr"],
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns:repeat(2,"] {
    grid-template-columns: 1fr !important;
  }
}

/* 3b. Three, four and six track grids step down instead of collapsing —
       a 4-up stat row reads better as 2x2 than as four stacked lines. */
@media (max-width: 1023px) {
  [style*="grid-template-columns:repeat(3,"],
  [style*="grid-template-columns:repeat(4,"],
  [style*="grid-template-columns:1.2fr 1fr 1fr 1.2fr"],
  [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:repeat(6,"] { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 640px) {
  [style*="grid-template-columns:repeat(3,"],
  [style*="grid-template-columns:1.2fr 1fr 1fr 1.2fr"],
  [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(6,"] { grid-template-columns: repeat(2, 1fr) !important; }
  /* repeat(4,…) is kept at 2 columns: these are compact metric tiles. */
}

/* 3c. auto-fit tracks with a hard px floor overflow once the viewport drops
       below that floor. Collapse them rather than let them push the page. */
@media (max-width: 640px) {
  [style*="grid-template-columns:repeat(auto-fit"] { grid-template-columns: 1fr !important; }
}

/* 3d. Below 700px nothing keeps more than one column unless it was explicitly
       allowed above. This is the guarantee: no unenumerated grid can ever
       squeeze content into an unreadable sliver. */
@media (max-width: 700px) {
  [style*="display:grid"][style*="grid-template-columns:"]:not([style*="repeat(4,"]) {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-column:span"] { grid-column: auto !important; }
  [style*="grid-row:span"]    { grid-row: auto !important; }
}

@media (max-width: 1023px) {
  [style*="grid-column:span"] { grid-column: auto !important; }
  [style*="grid-row:span"]    { grid-row: auto !important; }
}

/* Gaps scale down with the columns. */
@media (max-width: 900px) {
  [style*="gap:56px"] { gap: 28px !important; }
  [style*="gap:48px"] { gap: 26px !important; }
  [style*="gap:44px"] { gap: 24px !important; }
  [style*="gap:40px"] { gap: 22px !important; }
  [style*="gap:36px"] { gap: 20px !important; }
  [style*="gap:34px"] { gap: 18px !important; }
  [style*="gap:30px"] { gap: 18px !important; }
  [style*="gap:28px"] { gap: 16px !important; }
}

/* Sticky sidebars have nothing to stick beside once the grid is one column. */
@media (max-width: 900px) {
  [style*="position:sticky"] { position: static !important; top: auto !important; }
}

/* --- 4. Flex safety ------------------------------------------------------ */

@media (max-width: 900px) {
  [style*="white-space:nowrap"]:not(nav *):not(.mz-panel *) { white-space: normal !important; }
}

/* A flex row whose image is pinned to a fixed width (flex:none) cannot give
   the text column anything once the viewport is narrower than the image. Stack
   the row instead of squeezing the copy into a sliver. */
@media (max-width: 900px) {
  [style*="display:flex"]:has(> img[style*="flex:none"][style*="width:3"]),
  [style*="display:flex"]:has(> img[style*="flex:none"][style*="width:2"]) {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  [style*="display:flex"] > img[style*="flex:none"][style*="width:3"],
  [style*="display:flex"] > img[style*="flex:none"][style*="width:2"] {
    width: 100% !important;
    max-height: 190px;
    object-fit: cover;
  }
  /* the trailing "Learn more" affordance moves under the copy */
  [style*="align-self:center"][style*="white-space:nowrap"][style*="padding-right"] {
    align-self: flex-start !important;
    padding: 0 26px 24px !important;
  }
}

/* Flex rows wrap rather than push past the viewport. This only changes rows
   whose content genuinely does not fit — anything that already fits is
   untouched — so it is the safety net for every row not enumerated above.
   The marquee is excluded: it sizes itself to its content on purpose. */
@media (max-width: 640px) {
  [style*="display:flex"]:not([style*="flex-direction:column"]):not([style*="width:max-content"]):not(nav *):not(.mz-panel *) {
    flex-wrap: wrap;
  }
}

/* Button rows wrap instead of shrinking their labels to two words a line. */
@media (max-width: 480px) {
  [style*="display:flex"][style*="gap:14px"],
  [style*="display:flex"][style*="gap:12px"] { flex-wrap: wrap; }
}

/* --- 5. Typography ------------------------------------------------------- */

@media (max-width: 900px) {
  h1 { font-size: clamp(30px, 8.4vw, 46px) !important; line-height: 1.12 !important; }
  h2 { font-size: clamp(24px, 6.4vw, 36px) !important; line-height: 1.18 !important; }
  h3 { font-size: clamp(18px, 4.6vw, 24px) !important; }
}

/* Oversized display numerals are decoration; they cost more than they give
   on a phone. */
@media (max-width: 860px) {
  [style*="font-size:220px"],
  [style*="font-size:180px"],
  [style*="font-size:160px"],
  [style*="font-size:150px"] { display: none !important; }

  span[style*="font-size:96px"],
  span[style*="font-size:88px"],
  span[style*="font-size:80px"],
  span[style*="font-size:72px"],
  span[style*="font-size:68px"] { font-size: clamp(34px, 9vw, 54px) !important; }
}

/* Nothing drops below 12px on a phone. */
@media (max-width: 640px) {
  [style*="font-size:10px"],
  [style*="font-size:10.5px"],
  [style*="font-size:11px"],
  [style*="font-size:11.5px"] { font-size: 12px !important; }
  th { font-size: 12px !important; }
}

@media (max-width: 480px) {
  [style*="letter-spacing:0.2em"]  { letter-spacing: 0.12em !important; }
  [style*="letter-spacing:0.18em"] { letter-spacing: 0.11em !important; }
}

/* --- 6. Fixed dimensions ------------------------------------------------- */

/* The hero console is drawn at a fixed 470px. Once its inner grid is one
   column that height truncates the content, so let it grow. */
@media (max-width: 900px) {
  [style*="height:470px"] { height: auto !important; min-height: 300px; }
  [style*="height:440px"] { height: auto !important; min-height: 260px; }
}

@media (max-width: 640px) {
  [style*="height:250px"] { height: 190px !important; }
  [style*="width:42px"][style*="height:42px"],
  [style*="width:38px"][style*="height:38px"] { flex: none; }
}

/* --- 7. Decorative layers ------------------------------------------------ */

/* Radial glows are drawn far wider than the viewport on purpose. Clip them at
   the section that owns them so they can never extend the scroll width. */
div:has(> [style*="position:absolute"][style*="radial-gradient"]),
section:has(> [style*="position:absolute"][style*="radial-gradient"]),
footer:has(> [style*="position:absolute"][style*="radial-gradient"]) {
  overflow: hidden;
}
/* …but a clipping ancestor would kill a sticky descendant, so only clip where
   nothing is sticking. */
div:has(> [style*="position:absolute"][style*="radial-gradient"]):has([style*="position:sticky"]) {
  overflow: visible;
}

[style*="position:absolute"][style*="radial-gradient"] { pointer-events: none; }

/* --- 8. Forms ------------------------------------------------------------ */

input, select, textarea, button { font-family: inherit; }

/* iOS zooms the page in on focus for any control under 16px. */
@media (max-width: 900px) {
  input, select, textarea { font-size: 16px !important; }
  input, select, textarea { max-width: 100%; }
}

@media (max-width: 480px) {
  input[style*="padding:16px 18px"],
  select[style*="padding:16px 18px"],
  textarea[style*="padding:16px 18px"] { padding: 14px 15px !important; }
}

/* --- 9. Tables ----------------------------------------------------------- */

table { max-width: 100%; }

@media (max-width: 640px) {
  table { table-layout: fixed; word-break: break-word; }
  td:first-child { white-space: normal !important; }
  th, td { padding-right: 8px !important; }
}

/* A three-column data table has no readable form at phone widths, so each row
   becomes a card of label/value pairs. Cells carry their column name in
   data-label; a table without those attributes keeps the plain layout. */
@media (max-width: 560px) {
  table:has(td[data-label]) { display: block; }
  table:has(td[data-label]) tr:first-child { display: none; }        /* header row */
  table:has(td[data-label]) tr {
    display: block;
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid #232329;
    border-radius: 12px;
    background: #141416;
  }
  table:has(td[data-label]) td {
    display: block;
    border: 0 !important;
    padding: 0 0 10px !important;
    white-space: normal !important;
  }
  table:has(td[data-label]) td:last-child { padding-bottom: 0 !important; }
  table:has(td[data-label]) td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5c6069;
  }
  table:has(td[data-label]) td:first-child { font-size: 16px; }
}
.mz-light table:has(td[data-label]) tr { background: #ffffff; border-color: #d3e6ec; }
.mz-light table:has(td[data-label]) td::before { color: #64748b; }

/* --- 10. Touch targets --------------------------------------------------- */

/* Stacked link lists (footer columns, link rails) become 40px rows without
   changing how dense they look — the gap shrinks by what the padding adds. */
@media (hover: none) and (max-width: 900px) {
  footer [style*="flex-direction:column"] > a,
  footer [style*="flex-direction:column"] > div > a {
    min-height: 40px;
    display: flex;
    align-items: center;
  }
  footer [style*="flex-direction:column"][style*="gap:10px"],
  footer [style*="flex-direction:column"][style*="gap:12px"],
  footer [style*="flex-direction:column"][style*="gap:14px"] { gap: 2px !important; }

  /* Plain text links carry no surface of their own, so their hit area is
     grown with a pseudo-element instead of padding — the target reaches 40px
     without moving a single pixel of layout. Anything with its own padding,
     background, border or position is left alone. */
  a[style]:not([style*="padding"]):not([style*="background"]):not([style*="border"]):not([style*="position:"]):not([style*="grid-column"]):not([style*="display:"]):not(footer a):not(nav a):not(.mz-panel a) {
    position: relative;
  }
  a[style]:not([style*="padding"]):not([style*="background"]):not([style*="border"]):not([style*="position:"]):not([style*="grid-column"]):not([style*="display:"]):not(footer a):not(nav a):not(.mz-panel a)::after {
    content: "";
    position: absolute;
    inset: -12px -8px;
    border-radius: 10px;
  }

  /* Links that are already flex rows only need the height floor. */
  a[style*="display:flex"]:not([style*="padding"]):not([style*="background"]) { min-height: 40px; }

  /* Pills and list rows that land just short of 40px. */
  a[style*="padding:9px 12px"],  button[style*="padding:9px 12px"],
  a[style*="padding:9px 20px"],  button[style*="padding:9px 20px"],
  a[style*="padding:8px 18px"],  button[style*="padding:8px 18px"],
  a[style*="padding:8px 16px"],  button[style*="padding:8px 16px"],
  a[style*="padding:7px 16px"],  button[style*="padding:7px 16px"],
  a[style*="padding:7px 14px"],  button[style*="padding:7px 14px"] {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Circular icon controls (carousel arrows, socials) reach the 40px floor. */
  a[style*="border-radius:50%"][style*="width:34px"],
  button[style*="border-radius:50%"][style*="width:34px"],
  a[style*="border-radius:50%"][style*="width:36px"],
  button[style*="border-radius:50%"][style*="width:36px"],
  a[style*="border-radius:50%"][style*="width:38px"],
  button[style*="border-radius:50%"][style*="width:38px"] {
    width: 42px !important;
    height: 42px !important;
  }
}

/* --- 11. Standalone ChatVeil pages (class-based, no nav) ----------------- */

@media (max-width: 640px) {
  .wrap { padding-left: var(--mz-gutter) !important; padding-right: var(--mz-gutter) !important; }
  .card { padding: 18px 16px !important; }
  code { word-break: break-word; }
  ol, ul { padding-left: 18px !important; }
}

/* --- 12. Very small phones ---------------------------------------------- */

@media (max-width: 360px) {
  [style*="padding:14px 30px"] { padding: 13px 20px !important; }
  [style*="padding:14px 28px"] { padding: 13px 20px !important; }
  [style*="border-radius:999px"][style*="padding:7px 16px"] { padding: 6px 12px !important; }
}

/* --- 13. Wide screens ---------------------------------------------------- */

@media (min-width: 1600px) {
  :root { --mz-gutter: 40px; }
}

/* ===========================================================================
   14. Mobile navigation
   The burger, panel and scrim are created by responsive.js. The desktop link
   row is only hidden once that script has flagged <html> as mz-nav-ready, so a
   script failure degrades to the old wrapping nav rather than to no nav.
   =========================================================================== */

.mz-burger { display: none; }

/* .mz-panel sets display:flex, which outranks the user-agent [hidden] rule —
   without this the closed menu stays in the tab order and the a11y tree. */
.mz-panel[hidden], .mz-scrim[hidden] { display: none !important; }

@media (max-width: 900px) {
  nav > div { padding-left: var(--mz-gutter) !important; padding-right: var(--mz-gutter) !important; gap: 12px !important; }
  .mz-nav-ready nav > div > div { display: none !important; }
  .mz-nav-ready nav > div > a:first-child { margin-right: auto; }
  .mz-nav-ready nav [data-theme-toggle] { margin-left: 0 !important; }

  .mz-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 10px;
    flex: none;
    border: 1px solid #232329;
    border-radius: 12px;
    background: rgba(20, 20, 22, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
  }
  .mz-burger:hover, .mz-burger:focus-visible { border-color: #22d3ee; }
  .mz-burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: #f4f4f5;
    transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .18s ease;
  }
  .mz-burger span:nth-child(2) { width: 70%; }
}

@media (min-width: 901px) {
  .mz-panel, .mz-scrim { display: none !important; }
}

.mz-open .mz-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mz-open .mz-burger span:nth-child(2) { opacity: 0; }
.mz-open .mz-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mz-scrim {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(4, 6, 10, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .3s ease;
}
.mz-open .mz-scrim { opacity: 1; }

.mz-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  width: min(84vw, 340px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #0f0f12;
  border-left: 1px solid #232329;
  box-shadow: -30px 0 80px -40px rgba(0, 0, 0, 0.9);
  transform: translateX(100%);
  transition: transform .34s cubic-bezier(.22,.61,.36,1);
  font-family: 'Inter', system-ui, sans-serif;
}
.mz-open .mz-panel { transform: translateX(0); }

.mz-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mz-panel-brand { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #5c6069; }
.mz-close {
  width: 40px; height: 40px; flex: none;
  border: 1px solid #232329; border-radius: 50%;
  background: rgba(20, 20, 22, 0.6); color: #8b909a;
  font-size: 22px; line-height: 1; cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.mz-close:hover, .mz-close:focus-visible { border-color: #22d3ee; color: #22d3ee; }

.mz-panel-links { display: flex; flex-direction: column; }
.mz-panel-links a {
  display: block;
  padding: 15px 4px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #c5c8ce;
  text-decoration: none;
  border-bottom: 1px solid #1c1c21;
  transition: color .2s ease, padding-left .2s ease;
}
.mz-panel-links a:hover, .mz-panel-links a:focus-visible { color: #22d3ee; padding-left: 8px; }
.mz-panel-links a[aria-current="page"] { color: #f4f4f5; }
.mz-panel-links a[aria-current="page"]::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 6px; height: 6px; margin-left: 10px; border-radius: 50%; background: #22d3ee;
}

.mz-panel-cta {
  margin-top: 18px;
  padding: 15px 22px;
  border-radius: 999px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #04252e;
  background: linear-gradient(135deg, #06b6d4, #22d3ee);
  box-shadow: 0 0 28px rgba(34, 211, 238, 0.32);
  text-decoration: none;
}

/* Light theme: the panel is created after theme.js has finished its sweep, so
   it is styled here rather than swept. */
.mz-light .mz-panel { background: #ffffff; border-left-color: #d3e6ec; }
.mz-light .mz-panel-links a { color: #0f172a; border-bottom-color: #e2eff3; }
.mz-light .mz-panel-links a[aria-current="page"] { color: #0f172a; }
.mz-light .mz-panel-brand { color: #64748b; }
.mz-light .mz-close { background: #ffffff; border-color: #d3e6ec; color: #64748b; }
.mz-light .mz-burger { background: #ffffff; border-color: #d3e6ec; }
.mz-light .mz-burger span { background: #0f172a; }
.mz-light .mz-scrim { background: rgba(15, 23, 42, 0.35); }

@media (prefers-reduced-motion: reduce) {
  .mz-panel, .mz-scrim, .mz-burger span { transition: none !important; }
}