/* ---------------------------------------------------------------------------
   Responsive corrections for the Claude Design export.
   
   The bundles ship a handful of breakpoints (.bz-3, .bz-4, .bz-posts) but the
   header and the two wide data blocks have none, so below roughly 700px the
   nav's right-hand group is pushed past the viewport — clipped on the exported
   pages, and real horizontal scroll on the Next.js blog pages, which have no
   clipping wrapper. Everything here is a narrow-screen override.

   Loaded by both the exported bundles and the Next.js layout, so the header
   behaves the same on /pricing and on /blog/<slug>. The !important flags are
   unavoidable: the design writes its layout as inline style attributes, and the
   export's own breakpoints use the same escape hatch.
   ------------------------------------------------------------------------- */

/* --- header ------------------------------------------------------------- */
/* Three columns (logo | links | auth) need about 700px. Below that the nav
   becomes two rows: logo and the auth buttons, then the links centred under
   them — so "Start for free" stays on screen instead of off the right edge. */
@media (max-width: 760px) {
  .bz-nav {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px !important;
    padding: 12px 16px !important;
  }
  .bz-nav > :nth-child(2) {
    order: 3;
    flex: 1 0 100%;
    justify-content: center !important;
    gap: 24px !important;
  }
  .bz-nav > :nth-child(3) { gap: 8px !important; }
  .bz-nav > :nth-child(3) > a {
    font-size: 13.5px !important;
    padding: 8px 13px !important;
  }
}
@media (max-width: 400px) {
  .bz-nav { padding: 12px 14px !important; }
  .bz-nav > :nth-child(3) > a { font-size: 13px !important; padding: 8px 11px !important; }
  .bz-nav img { height: 26px !important; }
}

/* --- wide data blocks ---------------------------------------------------- */
/* The marketplace preview and the two pricing tables are laid out for a desktop
   measure. They were set to overflow:hidden, so on a phone the right-hand
   columns were cut off with no way to reach them. Let them scroll sideways
   inside their own frame instead, keeping their columns aligned. */
.bz-scroll { overflow: hidden; }
@media (max-width: 900px) {
  .bz-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .bz-scroll > * { min-width: var(--bz-scroll-min, 720px); }
}

/* --- one header per page ------------------------------------------------- */
/* Next.js renders its own hamburger and drawer sitewide. On a page wearing the
   exported chrome that is a second, different nav on top of the first — and its
   links point at pages the exported header does not list. The exported header
   now works at every width, so it is the only one these pages need. */
body:has(.dcpage) .hamburger,
body:has(.dcpage) .drawer,
body:has(.dcpage) .drawer-backdrop { display: none !important; }

/* --- headline scale ------------------------------------------------------ */
/* The design sets every heading at one fixed size, so a 52px hero headline
   stays 52px on a 390px phone and eats the first screen. The runtime writes
   these as real CSS in the style attribute, which lets each size band be
   matched exactly — so this only ever scales the large display sizes down and
   never touches text that was already small. */
@media (max-width: 700px) {
  .bz-page [style*="font-size: 44px"],
  .bz-page [style*="font-size: 46px"],
  .bz-page [style*="font-size: 48px"],
  .bz-page [style*="font-size: 52px"],
  .bz-page [style*="font-size: 54px"],
  .bz-page [style*="font-size: 56px"],
  .bz-page [style*="font-size: 58px"],
  .bz-page [style*="font-size: 62px"] {
    font-size: min(8.6vw, 36px) !important;
    line-height: 1.14 !important;
  }
  .bz-page [style*="font-size: 36px"],
  .bz-page [style*="font-size: 38px"],
  .bz-page [style*="font-size: 40px"],
  .bz-page [style*="font-size: 42px"] {
    font-size: min(7.4vw, 31px) !important;
    line-height: 1.18 !important;
  }
  .bz-page [style*="font-size: 27px"],
  .bz-page [style*="font-size: 28px"],
  .bz-page [style*="font-size: 29px"],
  .bz-page [style*="font-size: 30px"],
  .bz-page [style*="font-size: 32px"],
  .bz-page [style*="font-size: 34px"] {
    font-size: min(6.4vw, 26px) !important;
    line-height: 1.24 !important;
  }
}

/* --- the headline's rotating AI logo ------------------------------------- */
/* The homepage headline shows a product name and logo where the word "AI" sits,
   cycling through the assistants named in assets/ai-logos/logos.json. Until
   site.js has one that actually loads, this is an ordinary word in an ordinary
   sentence and none of the rules below apply — .is-live is only added once a
   frame is mounted.

   The stage is an inline grid with every frame in the same cell. That stacks
   them, and sizes the stage to the widest of them, so the sentence is laid out
   once for "Google Gemini" and never reflows when "Claude" takes its place. It
   also means no width has to be measured or configured: the browser does it,
   and it re-does it for free when the phone breakpoint changes the headline's
   font size. */
.bz-ai.is-live {
  display: inline-block;
  vertical-align: baseline;
}
/* The word stays for screen readers and for anyone reading the page with
   styles off; the names and marks are decoration layered over it. */
.bz-ai-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.bz-ai-stage {
  display: inline-grid;
  /* An explicit width is an escape hatch, not the norm — logos.json can set
     one if a future set needs to be pinned wider than its widest member. */
  width: var(--bz-ai-w, auto);
  vertical-align: -0.12em;
  margin: 0 0.1em;
}
.bz-ai-frame {
  grid-area: 1 / 1;                 /* every frame in the one cell */
  display: inline-flex;
  align-items: center;
  gap: 0.16em;
  white-space: nowrap;
  opacity: 0;
  /* The two halves are staggered rather than crossed: the outgoing frame fades
     out first and the incoming one waits for it. A true cross-fade overlapped
     them mid-swap, and two product names on top of each other reads as a
     printing error rather than a transition. */
  transition: opacity 170ms ease;
}
.bz-ai-frame.is-on {
  opacity: 1;
  transition: opacity 170ms ease 170ms;
}
/* b300, the brand purple, so the assistant reads as the one coloured word in
   an otherwise near-black headline. */
.bz-ai-name { color: #7357eb; }
.bz-ai-frame img {
  height: 0.92em;
  width: auto;
  max-width: 1.6em;
  object-fit: contain;
  display: block;
}

/* The logos still change under this setting — what it objects to is the
   animation, not the content — so the cross-fade goes and each one simply
   replaces the last. */
@media (prefers-reduced-motion: reduce) {
  .bz-ai-frame,
  .bz-ai-frame.is-on { transition: none; }
}