/* Product pages (/gateway/, /router/, /ai-governance/, /compare/openrouter/): rules on top of
   styles.css. Source: conifer-redesign/_drafts/drafts.css, shipped by _source/promote_seo.py. */

main code { overflow-wrap: anywhere; }

/* Product hero: the home hero's night panel, with the product's own art in place of the
   photograph. Copy sits low left, as on the home page. */
.hero-product { aspect-ratio: auto; height: auto; min-height: clamp(31rem, 42vw, 40rem); align-items: flex-end; padding: 2.5rem var(--inset); }
/* The home hero pins its copy above the photo's cards; with no photo the copy sits in normal flow, low left. */
.hero-product .hero-copy { position: relative; left: auto; bottom: auto; width: auto; max-width: 42rem; padding: 0; }
.hero-product::after { display: none; }
.hero-art {
  position: absolute;
  top: 50%;
  right: calc(var(--inset) + 2%);
  width: min(38%, 32rem);
  height: 68%;
  object-fit: contain;
  translate: 0 -50%;
  pointer-events: none;
}
.hero-art.hero-mark { width: min(36%, 20rem); height: auto; opacity: 0.16; } /* the mark is a 319 px PNG: keep it at its own size */
.hero-product .hero-copy { max-width: 42rem; margin-left: 0; }
.hero-label { margin-bottom: 1.125rem; color: var(--on-dark-2); font-size: 1rem; font-weight: 500; }
.hero-lead { max-width: 34em; margin-top: 1.25rem; color: var(--on-dark-2); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.45; text-wrap: pretty; }
.hero-lead code { color: var(--white); }

/* Hero buttons: the main action, then an outlined second one. */
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; }
.hero-actions .pill { margin-top: 0; }
.pill-outline { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.55); }
.pill-outline:hover { background: oklch(1 0 0 / 0.1); }

/* Motion, from the home hero: the art fades in and settles, the label and lead arrive with
   the button once the headline has risen. */
.motion .hero-art { opacity: 0; scale: 1.03; transition: opacity 1400ms cubic-bezier(0.33, 0, 0.2, 1), scale 2400ms var(--ease); }
.motion .hero.is-resolving .hero-art { opacity: 1; scale: 1; }
.motion .hero.is-resolving .hero-art.hero-mark { opacity: 0.16; }
.motion .hero-product :is(.hero-label, .hero-lead) { opacity: 0; translate: 0 18px; transition: opacity var(--t-reveal) var(--ease), translate var(--t-reveal) var(--ease); }
.motion .hero-product .hero-label { transition-delay: 150ms; }
.motion .hero-product .hero-lead { transition-delay: 550ms; }
.motion .hero-product.is-ready :is(.hero-label, .hero-lead) { opacity: 1; translate: 0 0; }

/* Below What-we-do style intro: the section's own rows, then the figures. */
.product-intro { padding-bottom: 0; }
.product-intro .stat-grid { margin-top: var(--heading-gap); }
.stat-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-rows { margin-top: clamp(2.5rem, 5vw, 4rem); }
.product-statement .statement-frame { margin-top: 0; }
.product-intro + .product-statement { padding-top: var(--heading-gap); }
.what-lead a, .product-note a { color: inherit; text-underline-offset: 0.1875rem; text-decoration-thickness: 1px; }
.product-note { max-width: 44em; margin: 1.25rem auto 0; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
/* .block a would otherwise turn the pill's white label to ink. */
.block .dark-pill { color: var(--white); text-decoration: none; }
.product-statement { padding-block: clamp(1rem, 3vw, 2.5rem) clamp(3.5rem, 7vw, 7rem); }


@media (max-width: 1099px) {
  .hero-product { display: block; min-height: 0; padding: 2.5rem 2rem 2rem; }
  .hero-product .hero-copy { padding: 0; }
  .hero-art, .hero-art.hero-mark { position: static; display: block; width: min(70%, 26rem); height: auto; max-height: 18rem; margin: 0 auto 2rem; translate: none; }
}
@media (max-width: 809px) {
  .hero-product { padding: 1.75rem 1rem 1.25rem; }
  .stat-grid.two { grid-template-columns: minmax(0, 1fr); }
}

/* Code. Prose names things in plain words; a real identifier appears only as a quiet chip in a
   sentence, and anything you would type goes in a night panel with syntax colours. */
:root { --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; }
main :is(.rows, .block-line, .what-lead, .product-note, td) code {
  padding: 0.1em 0.375em;
  border-radius: 0.25rem;
  background: oklch(0.24 0.055 262 / 0.07);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.86em;
  white-space: nowrap;
}
.hero-lead code { padding: 0.1em 0.375em; border-radius: 0.25rem; background: oklch(1 0 0 / 0.12); font-family: var(--mono); font-size: 0.86em; }
.code {
  margin: 0.875rem 0 0;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  background: var(--night);
  color: oklch(0.93 0.01 262);
  font-family: var(--mono);
  font-size: 0.8438rem;
  line-height: 1.7;
  tab-size: 2;
}
/* A one-column row on a phone would otherwise grow to the widest code line; the panel scrolls instead. */
.rows dd { min-width: 0; }
.code { max-width: 100%; }
main pre.code code { padding: 0; background: none; color: inherit; font: inherit; white-space: pre; }
.block > .code { max-width: 58rem; margin-top: clamp(1.25rem, 2vw, 1.75rem); }
.t-k { color: oklch(0.80 0.09 245); }
.t-s { color: oklch(0.82 0.12 162); }
.t-v { color: oklch(0.84 0.11 85); }
.t-f { color: oklch(0.80 0.10 305); }
.t-p { color: oklch(0.66 0.02 262); }
.t-c { color: oklch(0.58 0.02 262); font-style: italic; }
/* A panel under a set of rows lines up with the answers, not the labels. */
.rows + .code { margin-left: calc((100% - 1.5rem) * 2 / 9 + 1.5rem); max-width: 44rem; }
@media (max-width: 809px) { .rows + .code { margin-left: 0; } }