/* Design-export host layer.
 *
 * The page body is the Claude Design export's own markup, inline styles and
 * all — that is what makes it pixel-identical to the given UI at 1440px.
 * Those inline styles cannot be overridden from a stylesheet without
 * !important, so every rule here is scoped under .dcx and used only to make a
 * fixed-width artboard survive smaller screens and pointer states.
 * Nothing here changes the 1440px rendering.
 */

.dcx { width: 100%; max-width: none !important; }

/* The export is a 1440 artboard, so its section backgrounds stop at 1440 and a
   wide monitor shows white gutters beside the dark bands. Let each top-level
   band bleed to the viewport and keep its content on the 1440 grid instead.
   Absolutely-positioned children are the decorative glows and wordmarks —
   they must keep their own placement. */
.dcx > div > *:not([style*="position:absolute"]):not([style*="position: absolute"]) {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}
.dcx img { max-width: 100%; }

/* interactive pills: the export paints the active one inline, so selection
   state is applied by class instead of by rewriting the style attribute */
.dcx [data-depth], .dcx [data-vol] { cursor: pointer; user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.dcx [data-depth]:hover, .dcx [data-vol]:hover { border-color: #6300FF !important; }
.dcx [data-depth]:focus-visible, .dcx [data-vol]:focus-visible {
  outline: 2px solid #6300FF; outline-offset: 2px; }
.dcx [data-depth].is-on, .dcx [data-vol].is-on {
  background: #6300FF !important; border-color: #6300FF !important; color: #FFFFFF !important; }
.dcx [data-depth].is-on *, .dcx [data-vol].is-on * { color: #FFFFFF !important; }

/* animate the two model bars rather than snapping */
.dcx #depth-fill, .dcx #manual-bar, .dcx #talvin-bar { transition: width 0.3s ease; }

@media (prefers-reduced-motion: reduce) {
  .dcx #depth-fill, .dcx #manual-bar, .dcx #talvin-bar { transition: none; }
}

/* ---------------- below the artboard width ---------------- */
@media (max-width: 1439px) {
  /* the export pads sections with a fixed 80px gutter */
  .dcx [style*="padding:0 80px"], .dcx [style*="padding: 0 80px"] { padding-left: 5vw !important; padding-right: 5vw !important; }
  .dcx [style*="80px"][style*="padding"] { padding-left: 5vw !important; padding-right: 5vw !important; }
}

@media (max-width: 1024px) {
  /* every multi-column grid in the export collapses to one column */
  .dcx [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .dcx [style*="position:sticky"], .dcx [style*="position: sticky"] { position: static !important; }
  /* oversized display type has to come down with the canvas */
  .dcx [style*="font-size:240px"] { font-size: 22vw !important; }
  .dcx [style*="font-size:64px"] { font-size: 6vw !important; }
  .dcx [style*="font-size:56px"] { font-size: 5.4vw !important; }
  .dcx [style*="font-size:52px"] { font-size: 5.2vw !important; }
  .dcx [style*="font-size:44px"] { font-size: 4.6vw !important; }
  .dcx [style*="font-size:42px"] { font-size: 4.4vw !important; }
}

@media (max-width: 760px) {
  .dcx [style*="padding:0 80px"], .dcx [style*="padding: 0 80px"] { padding-left: 20px !important; padding-right: 20px !important; }
  .dcx [style*="88px 80px"], .dcx [style*="96px 80px"], .dcx [style*="80px 80px"],
  .dcx [style*="72px 80px"], .dcx [style*="64px 80px"] { padding-left: 20px !important; padding-right: 20px !important; }
  .dcx [style*="font-size:64px"] { font-size: 34px !important; }
  .dcx [style*="font-size:56px"] { font-size: 31px !important; }
  .dcx [style*="font-size:52px"] { font-size: 29px !important; }
  .dcx [style*="font-size:44px"], .dcx [style*="font-size:42px"] { font-size: 26px !important; }
  .dcx [style*="font-size:240px"] { font-size: 26vw !important; }
  /* flex rows that were never meant to wrap */
  .dcx [style*="display:flex"][style*="gap:48px"], .dcx [style*="display:flex"][style*="gap:56px"],
  .dcx [style*="display:flex"][style*="gap:64px"] { flex-wrap: wrap !important; }
}

@media (max-width: 380px) {
  /* 32px of card padding on a 320px screen leaves the box wider than the viewport */
  .dcx [style*="padding:32px"] { padding: 20px !important; }
  .dcx [style*="padding:30px"], .dcx [style*="padding:36px"] { padding: 20px !important; }
  .dcx [style*="border-radius:20px"] { border-radius: 14px !important; }
}

/* long words in display type must not push the page sideways */
.dcx h1, .dcx h2, .dcx h3 { overflow-wrap: anywhere; }

/* the artboard must never be the thing that scrolls the page */
.dcx { overflow-x: clip; }

/* --- CTA hover, tagged at build time by dcx.square_ctas ---
   The export ships buttons with no hover state at all. data-on records the
   button's OWN scheme — "dark" means light text (an outlined button on a dark
   band), "light" means dark text (a filled button) — so each gets the hover
   that suits it. */
.dcx-btn {
  cursor: pointer;
  transition: background-color 0.18s var(--ease-out, ease), color 0.18s var(--ease-out, ease),
              border-color 0.18s var(--ease-out, ease), transform 0.18s var(--ease-out, ease),
              box-shadow 0.18s var(--ease-out, ease);
}
.dcx-btn:hover { transform: translateY(-1px); }
.dcx-btn:active { transform: translateY(0); }
.dcx-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* A filled button only darkens — swapping its fill for a translucent tint put
   white text on a near-white background and hid the label. */
.dcx-btn[data-btn="solid"]:hover { filter: brightness(0.88); box-shadow: 0 6px 20px rgba(0,0,0,0.22); }

/* outlined on a dark band: fill lightly */
.dcx-btn[data-btn="ghost"][data-on="dark"]:hover {
  background-color: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
/* outlined on a light band: the accent does the work */
.dcx-btn[data-btn="ghost"][data-on="light"]:hover {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(99, 0, 255, 0.24);
}
.dcx-btn[data-btn="ghost"][data-on="light"]:hover * { color: #fff !important; }

@media (prefers-reduced-motion: reduce) {
  .dcx-btn, .dcx-btn:hover, .dcx-btn:active { transition: none; transform: none; }
}

/* --- scroll reveal for export-hosted pages ---
   Bands stay put; their content blocks ease in. Decorative absolutely-positioned
   glows are excluded by the tagger, so nothing shifts behind the content. */
.dcx [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
              transform 0.55s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  transition-delay: calc(var(--reveal-i, 0) * 55ms);
}
.dcx [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .dcx [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --- export tables on narrow screens ---
   The export wraps its tables in a rounded box with overflow:hidden. Once the
   canvas is narrower than the table, that clips the right-hand columns with no
   way to reach them. Let the wrapper scroll instead of swallowing content. */
@media (max-width: 1200px) {
  .dcx div:has(> table) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .dcx table { min-width: 640px; }
}

/* --- mobile fixes for export layouts --- */
@media (max-width: 760px) {
  /* Section heads pair a heading with a note using align-items:end. Kept as a
     row on a phone the heading is squeezed to ~80px and breaks mid-phrase. */
  .dcx [style*="align-items:end"][style*="justify-content:space-between"],
  .dcx [style*="align-items: end"][style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px;
  }
  /* Side-by-side CTAs wrap to two lines each; stack them instead. Matched by
     "a flex row that directly contains buttons" rather than by gap value —
     hero pairs and closing pairs use different gaps. */
  .dcx [style*="display:flex"]:has(> .dcx-btn + .dcx-btn) {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .dcx [style*="display:flex"]:has(> .dcx-btn) > .dcx-btn { text-align: center; }

  /* Cards authored with 64–80px of padding leave ~220px of usable width on a
     phone, which is what forced the CTA labels onto two lines. */
  .dcx [style*="padding:64px"],
  .dcx [style*="padding: 64px"],
  .dcx [style*="padding:80px"],
  .dcx [style*="padding: 80px"],
  .dcx [style*="padding:56px 80px"],
  .dcx [style*="padding:76px 80px"],
  .dcx [style*="padding:92px 80px"],
  .dcx [style*="padding:80px 80px"] { padding: 32px 22px !important; }
  .dcx [style*="padding:36px 40px"],
  .dcx [style*="padding:34px 40px"],
  .dcx [style*="padding:38px 40px"],
  .dcx [style*="padding:36px 44px"] { padding: 24px 20px !important; }
}

/* At 320 the longest CTA labels still take two lines inside a padded card. */
@media (max-width: 360px) {
  .dcx [style*="padding:64px"], .dcx [style*="padding: 64px"],
  .dcx [style*="padding:80px"], .dcx [style*="padding: 80px"] { padding: 26px 14px !important; }
  .dcx-btn { padding-left: 16px !important; padding-right: 16px !important; font-size: 14px !important; }
}