/* DebutDeploy public site — shared base.
   Ported from the Claude Design source ("DebutDeploy Homepage.dc.html" +
   "DebutDeploy Comparison Pages.dc.html"). Element styling stays inline in the
   markup exactly as the design produced it; this file carries the reset, the
   hover states (the design's `style-hover` attribute) and the breakpoints. */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: #ffffff;
  color: #0b0d12;
  -webkit-font-smoothing: antialiased;
}
a { color: #2563eb; text-decoration: none; }
a:hover { color: #1b4ed1; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 4px; }
::selection { background: #dbe6ff; }
img { max-width: 100%; }

.mono { font-family: 'IBM Plex Mono', monospace; }

.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: #d6dbe4; border-radius: 999px; }

@keyframes dd-blink { 0%, 60% { opacity: 1 } 61%, 100% { opacity: 0.25 } }
@keyframes dd-bar { from { transform: scaleX(0) } to { transform: scaleX(1) } }

/* ---- hover states (design `style-hover`) ---- */
.h-nav:hover     { background: #f2f4f8; color: #0b0d12; }
.h-menu:hover    { background: #f2f4f8; color: #2563eb; }
.h-signin:hover  { background: #f2f4f8; }
.h-primary:hover { background: #1b4ed1; color: #fff; }
.h-ghost:hover   { border-color: #2563eb; color: #2563eb; }
.h-dark:hover    { background: #2563eb; color: #fff; }
.h-link:hover    { color: #2563eb; }
.h-card:hover    { border-color: #c9d4e8; box-shadow: 0 18px 40px -28px rgba(11,13,18,0.3); }
.h-tile:hover    { border-color: #c9d4e8; box-shadow: 0 16px 36px -28px rgba(11,13,18,0.28); }

/* Screenshot drop-slots from the design that have no artwork yet. */
.shot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  text-align: center;
  border: 1.5px dashed #d8dfea;
  border-radius: inherit;
  background: repeating-linear-gradient(135deg, #f7f9fc 0 10px, #f2f5fa 10px 20px);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 1.6;
  color: #9aa2ae;
}
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.showcase-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #f4f6fa;
}
.showcase-media img,
.showcase-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Logo tiles fall back to a monogram until the real artwork is dropped in. */
.logo-fallback {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #4d5661;
}

[data-nav-toggle] { display: none; }

@media (max-width: 760px) { [data-rail] { scroll-snap-type: x proximity; } }

@media (max-width: 980px) {
  [data-faq-layout] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-toc] { position: static !important; }
}

@media (max-width: 1140px) {
  [data-nav], [data-signin] { display: none !important; }
  [data-hero] { grid-template-columns: minmax(0, 1fr) !important; gap: 44px !important; }
  h1 { font-size: 44px !important; }
  [data-nav-toggle] { display: grid !important; }
  [data-grid="4"], [data-grid="4s"], [data-grid="footer"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-grid="plans"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 900px) {
  [data-wrap] { padding-left: 24px !important; padding-right: 24px !important; padding-top: 76px !important; padding-bottom: 76px !important; }
  [data-hero], [data-2col] { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
  [data-grid="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  h1 { font-size: 40px !important; }
  h2 { font-size: 30px !important; }
}

@media (max-width: 760px) {
  [data-grid], [data-grid="plans"], [data-grid="footer"], [data-grid="2"], [data-grid="4"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-grid="4s"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-card] { flex-basis: 86% !important; }
  [data-cta] { width: 100% !important; }
  [data-wrap] { padding-top: 60px !important; padding-bottom: 60px !important; }
  h1 { font-size: 33px !important; }
  h2 { font-size: 26px !important; }
}

/* ============================================================================
   Touch ergonomics and the small-text floor.

   The design ships its element styling inline, so nothing here can be a plain
   declaration and expect to win — the rules below either use a property the
   inline styles never set (`min-height`, `align-content`, `overflow-wrap`) or
   carry `!important` where they must override an inline `font-size`.

   Everything is behind `max-width: 1140px` — the same breakpoint the design
   already collapses the nav at — so the desktop composition above 1140px is
   untouched. Page-level blocks (`_chrome.mjs` CHROME_CSS, `build-pages.mjs`
   PAGE_CSS, the block in index.html) add per-component hooks on top of this
   with the same 44px / 12px targets; these are the site-wide safety net for
   everything that has no hook.
   ========================================================================== */

@media (max-width: 1140px) {
  /* ---- 1. interactive elements are at least 44px tall (WCAG 2.5.8) ----
     `min-height` is inert on a `display: inline` box, so links flowing inside
     a sentence keep their natural line box and prose is unchanged. Only the
     block / inline-block / flex / grid links and buttons the design uses as
     standalone controls grow. `align-content` re-centres the label in the
     taller box; where it does not apply the target is still a valid 44px. */
  a, button, summary, [role="tab"], [role="button"] {
    min-height: 44px;
    align-content: center;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select, textarea { min-height: 44px; }

  /* ---- 2. no body text under 12px on a phone or tablet ----
     The sub-12px sizes in this design are all inline `font-size` declarations
     (9.5 / 10 / 10.5 / 11 / 11.5px on `.mono` micro-labels). Matching the
     declaration itself is the only way to floor them generically, and it can
     only ever hit an element that really is under 12px. Elements whose size is
     inherited are covered because the ancestor that set it is matched. */
  [style*="font-size: 9.5px"],  [style*="font-size:9.5px"],
  [style*="font-size: 10px"],   [style*="font-size:10px"],
  [style*="font-size: 10.5px"], [style*="font-size:10.5px"],
  [style*="font-size: 11px"],   [style*="font-size:11px"],
  [style*="font-size: 11.5px"], [style*="font-size:11.5px"] {
    font-size: 12px !important;
  }
  .shot { font-size: 12px; }

  /* ---- 3. defensive: nothing unbreakable may widen the document ----
     Long URLs, slugs, container ids and email addresses are the usual cause.
     This wraps them instead of letting them set a floor on the layout. It is
     deliberately not `overflow-x: hidden` on the body — that would hide real
     layout bugs rather than fix them. */
  body { overflow-wrap: break-word; }
  pre, code, kbd, samp, .mono { overflow-wrap: anywhere; }
  svg, video, canvas, iframe { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}