/* site/assets/pages/pages.css: the product, audience and pricing pages
   (/product/object/, /product/engine/, /product/registry/,
   /who-its-for/insurance-teams/, /who-its-for/risk-managers/,
   /who-its-for/engineers/, /pricing/).

   Loaded after /assets/craton-ui.css and built only from its --ui-* tokens,
   so light and dark come for free. Nothing here fetches anything. Parts
   marked PROMOTE are general enough to move into craton-ui.css. */

/* ======================================================================
   The family shape: a short hero, sparse bands, one call to action.
   ====================================================================== */

.pg main { display: block; }
/* The hero's shape is the design system's .ui-hero-page. */
.pg-hero-plain { background: var(--ui-bg); }
/* The GOES-19 frame carries a caption strip and logos along its bottom
   edge (the home hero crops them the same way): run the image past the
   hero's bottom so they sit outside it, and keep the storm's eye in view. */
.pg-backdrop-storm img { height: calc(100% + 64px); object-position: 50% 42%; }

/* The one graphic beside the hero, and the figure in each band. */
.pg-art { margin: 0; min-width: 0; }
.pg-art.ui-card { padding: 24px 24px 20px; }
.pg-art .ui-context { margin: 0 0 4px; }
.pg-foot {
  margin: 16px 0 0; font: 12px/1.5 var(--ui-font-mono); color: var(--ui-muted);
  overflow-wrap: anywhere;
}
.pg-foot a { color: inherit; }

/* A band head beside its graphic, or above it. */
/* Band heads are the design system's .ui-band-head. */
.pg-split { align-items: center; }
.pg-split .ui-band-head { margin-bottom: 0; }

/* The closing call to action. */
.pg-cta { text-align: center; }
.pg-cta .ui-h2 { max-width: 18ch; margin: 0 auto; }
.pg-cta .ui-lede { margin-left: auto; margin-right: auto; }
.pg-cta .ui-actions { justify-content: center; }

/* A quiet disclosure under a band keeps its reading column. */
.pg .ui-quiet-body ul { margin: 0 0 12px; padding-left: 1.1em; }
.pg .ui-quiet-body li { margin: 0 0 6px; }
.pg .ui-quiet-body code { font-size: 0.86em; overflow-wrap: anywhere; }

/* Links inside a figure caption stay quiet. */
.pg .ui-fine a { color: inherit; }

/* ======================================================================
   The object: a document drawn as its six blocks (hero).
   ====================================================================== */

.pg-doc { list-style: none; margin: 12px 0 0; padding: 0; }
.pg-doc li {
  display: grid; grid-template-columns: 10px minmax(0, 11em) minmax(0, 1fr); gap: 4px 12px;
  align-items: baseline; padding: 11px 0; border-top: 1px solid var(--ui-line);
}
.pg-doc li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; align-self: center;
  background: var(--pg-tint, var(--ui-line-strong));
}
.pg-doc-key { font: 13px/1.3 var(--ui-font-mono); color: var(--ui-muted); overflow-wrap: anywhere; }
.pg-doc-val { font-size: 15.5px; line-height: 1.35; color: var(--ui-ink); }
.pg-from-file { --pg-tint: var(--ui-accent); }
.pg-from-you { --pg-tint: var(--ui-muted); }
.pg-from-craton { --pg-tint: var(--ui-good); }
.pg-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; padding: 0; list-style: none;
  font-size: 13px; color: var(--ui-muted);
}
.pg-legend li { display: inline-flex; align-items: center; gap: 7px; }
.pg-legend li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pg-tint, var(--ui-muted));
}

/* ======================================================================
   The peril vocabulary: eight tiles, the priced ones lit.
   ====================================================================== */

.pg-perils {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.pg-peril {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 20px 18px 18px;
  border-radius: var(--ui-radius-lg); background: var(--ui-surface); border: 1px solid var(--ui-line);
}
.pg-peril svg {
  width: 36px; height: 36px; margin: 0 0 14px; fill: none; stroke: var(--ui-accent);
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.pg-peril-name { font: 650 17px/1.25 var(--ui-font-display); letter-spacing: -0.01em; color: var(--ui-ink); }
.pg-peril-state { font-size: 14px; color: var(--ui-muted); }
.pg-peril[data-priced] { box-shadow: var(--ui-shadow-1); }
.pg-peril[data-priced] .pg-peril-state { color: var(--ui-ink-2); }
.pg-peril[data-priced] .pg-peril-state::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 7px 1px 0; border-radius: 50%;
  background: var(--ui-good); vertical-align: middle;
}
.pg-peril:not([data-priced]) { background: transparent; border-style: dashed; }
.pg-peril:not([data-priced]) svg { stroke: var(--ui-faint); }

/* ======================================================================
   Published files as a settings-style list (object, engineers).
   ====================================================================== */

.pg-files { max-width: 640px; }
.pg-files .ui-row-title { font-family: var(--ui-font-mono); font-size: 14.5px; overflow-wrap: anywhere; }
.pg-files .ui-row-icon { --ui-tint: var(--ui-surface-2); color: var(--ui-accent); }

/* ======================================================================
   The engine: a file in, receipts out (hero).
   ====================================================================== */

.pg-flow { display: flex; flex-direction: column; align-items: stretch; margin: 16px 0 0; }
.pg-node {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: var(--ui-radius-md); background: var(--ui-surface-2); border: 1px solid var(--ui-line);
  font-size: 15.5px; color: var(--ui-ink);
}
.pg-node svg {
  flex: none; width: 22px; height: 22px; fill: none; stroke: var(--ui-accent); stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.pg-node b { font-weight: var(--ui-weight-semibold); }
.pg-node small { margin-left: auto; font: 12px var(--ui-font-mono); color: var(--ui-muted); }
.pg-node-object { background: var(--ui-accent-soft); border-color: color-mix(in srgb, var(--ui-accent) 40%, transparent); }
.pg-edge {
  position: relative; align-self: flex-start; height: 30px; margin-left: 24px; padding-left: 18px;
  display: flex; align-items: center; font: 12.5px var(--ui-font-mono); color: var(--ui-muted);
}
.pg-edge::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 2px; border-radius: 2px;
  background: var(--ui-line-strong);
}
.pg-verbs {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.pg-verbs li {
  padding: 9px 8px; border-radius: var(--ui-radius-sm); text-align: center;
  background: var(--ui-surface); border: 1px solid var(--ui-line);
  font: var(--ui-weight-medium) 13.5px/1.2 var(--ui-font-mono); color: var(--ui-ink);
}

/* The job lifecycle reads the timeline with a monospace line under each stage. */
.pg-job-card.ui-card { padding: 34px 32px 26px; }
.pg-job .ui-timeline-stage { font-size: 19px; }
.pg-job .ui-timeline-when { font-family: var(--ui-font-mono); font-size: 13.5px; overflow-wrap: anywhere; padding-right: 16px; }

/* ======================================================================
   Season strips: forty years, one bar each (engine, insurance teams).
   ====================================================================== */

/* The strip itself (.ui-strip, .ui-chart-bar) is the design system's. */
.pg-strip-card { padding: 28px 28px 20px; }
.pg-stat-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 48px; margin: 0 0 26px; }
.pg-stat-row .ui-stat-label { margin-top: 8px; }

/* ======================================================================
   The registry: four primitives composing a model (hero).
   ====================================================================== */

.pg-compose { list-style: none; margin: 14px 0 0; padding: 0; position: relative; }
.pg-compose li {
  position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 2px 14px;
  align-items: center; padding: 10px 0;
}
.pg-compose li:not(:last-child)::after {
  content: ""; position: absolute; left: 18px; top: 46px; bottom: -8px; width: 2px; border-radius: 2px;
  background: var(--ui-line-strong);
}
.pg-compose-icon {
  grid-row: span 2; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--ui-accent-soft); color: var(--ui-accent);
}
.pg-compose-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pg-compose-name { font-size: 13px; font-weight: 650; letter-spacing: var(--ui-tracking-caps); text-transform: uppercase; color: var(--ui-muted); }
.pg-compose-val { font: 14.5px/1.35 var(--ui-font-mono); color: var(--ui-ink); overflow-wrap: anywhere; }
.pg-compose-model .pg-compose-icon { background: var(--ui-good); color: var(--ui-bg); }
.pg-compose-model .pg-compose-val { font-family: var(--ui-font-text); font-size: 16px; font-weight: var(--ui-weight-semibold); }

/* Route status rows (registry): a dot and a word. */
.pg-status { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ui-ink-2); white-space: nowrap; }
.pg-status .ui-pulse-sm { --ui-node: var(--ui-good); }
.pg-status-off { color: var(--ui-muted); }
.pg-status-off .ui-pulse-sm { --ui-node: var(--ui-faint); }
.pg-routes .ui-row-title { font-family: var(--ui-font-mono); font-size: 14.5px; overflow-wrap: anywhere; }

/* ======================================================================
   Audience steps (ui-steplist-cards-4 with the corner badge) draw their
   small pictures with these parts.
   ====================================================================== */

.pg-ink { fill: none; stroke: var(--ui-ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pg-line { fill: none; stroke: var(--ui-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pg-soft { fill: var(--ui-accent-soft); }
.pg-fill { fill: var(--ui-accent); }
.pg-well { fill: var(--ui-surface-2); }
.pg-rule { fill: var(--ui-line-strong); }
.pg-good { fill: var(--ui-good); }
.pg-bad { fill: var(--ui-bad); }
.pg-loss { fill: var(--ui-loss-4); }
.pg-dash { fill: none; stroke: var(--ui-muted); stroke-width: 1.6; stroke-dasharray: 3 4; }
.pg-hatch { fill: none; stroke: var(--ui-muted); stroke-width: 1.2; }
.pg-glyph-text { fill: var(--ui-accent); font: 700 16px var(--ui-font-mono); }
.pg-glyph-mute { fill: var(--ui-muted); font: 600 11px var(--ui-font-mono); }

/* ======================================================================
   A stored-run card (insurance teams): the start flow's answer, small.
   ====================================================================== */

.pg-run .ui-stat-num { font-size: clamp(48px, 5.2vw, 68px); }
.pg-run .ui-chip { margin-top: 14px; }
.pg-curve { display: block; width: 100%; height: auto; margin: 18px 0 0; overflow: visible; }

/* ======================================================================
   Receipt card (risk managers): label and value rows.
   ====================================================================== */

.pg-receipt { list-style: none; margin: 18px 0 0; padding: 0; }
.pg-receipt li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 10px 0; border-top: 1px solid var(--ui-line); }
.pg-receipt span:first-child { font-size: 14px; color: var(--ui-muted); }
.pg-receipt span:last-child { font: 13.5px/1.4 var(--ui-font-mono); color: var(--ui-ink); overflow-wrap: anywhere; text-align: right; }


/* ======================================================================
   Pricing: the unit map (hero) and the estimator.
   ====================================================================== */

/* Pricing: two plans side by side, centered under a centered head, so a
   pair of cards does not stretch across a row built for three. */
.pg-tiers-pair { max-width: 840px; margin-inline: auto; }
.pg-units { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.pg-unit {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center;
  padding: 16px; border-radius: var(--ui-radius-md); background: var(--ui-surface-2);
}
.pg-unit-verbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pg-unit-verbs li {
  padding: 4px 10px; border-radius: var(--ui-radius-pill); background: var(--ui-surface);
  border: 1px solid var(--ui-line); font: 13px/1.3 var(--ui-font-mono); color: var(--ui-ink-2);
}
.pg-unit-price { text-align: right; }
.pg-unit-price b {
  display: block; font: var(--ui-weight-bold) clamp(28px, 3vw, 36px)/1 var(--ui-font-display);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ui-ink);
}
.pg-unit-price span { font-size: 13.5px; color: var(--ui-muted); }
.pg-unit-free { background: transparent; border: 1px dashed var(--ui-line-strong); }
.pg-unit-free .pg-unit-price b { color: var(--ui-good); }

.pg-est { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--ui-space-8); align-items: center; }
.pg-est-total .ui-stat-num { font-size: clamp(56px, 7vw, 96px); }
.pg-est .ui-breakdown { max-width: 420px; margin-top: 10px; }
/* The share bar is the design system's .ui-stack; here it keeps to the
   breakdown's width. */
.pg-share { max-width: 420px; margin-top: 22px; }
.pg-sliders { display: grid; gap: 28px; }
.pg-slider label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.pg-slider label span:first-child { font-size: 16px; color: var(--ui-ink-2); }
.pg-slider output {
  font: var(--ui-weight-bold) 26px/1 var(--ui-font-display); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--ui-ink);
}
.pg-slider input[type="range"] { width: 100%; margin: 0; accent-color: var(--ui-accent); height: 28px; cursor: pointer; }
.pg-slider input[type="range"]:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 4px; border-radius: 8px; }
.pg-slider .ui-hint { margin-top: 4px; }

/* ======================================================================
   Where the analytics stop (risk managers): two sides and a line.
   ====================================================================== */

.pg-scope { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0; align-items: stretch; }
.pg-scope-side { padding: 24px 22px; border-radius: var(--ui-radius-lg); background: var(--ui-surface); border: 1px solid var(--ui-line); }
.pg-scope-you { background: transparent; border-style: dashed; }
.pg-scope-side ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.pg-scope-side li { font: 600 17px/1.3 var(--ui-font-display); color: var(--ui-ink); }
.pg-scope-you li { color: var(--ui-ink-2); font-weight: 500; }
.pg-scope-side:not(.pg-scope-you) li::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 10px 2px 0; border-radius: 50%;
  background: var(--ui-accent); vertical-align: middle;
}
.pg-scope-line { position: relative; width: 64px; display: grid; place-items: center; }
.pg-scope-line::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px dashed var(--ui-line-strong);
}
.pg-scope-line span {
  position: relative; writing-mode: vertical-rl; transform: rotate(180deg); padding: 10px 4px;
  background: var(--ui-bg); font-size: 12.5px; font-weight: 650; letter-spacing: var(--ui-tracking-caps);
  text-transform: uppercase; color: var(--ui-muted); white-space: nowrap;
}

/* SVG chart text grows back on phones, where the drawing shrinks. */
@media (max-width: 480px) {
  .pg-chart .ui-chart-axis, .pg-chart .ui-chart-sublabel { font-size: 18px; }
}

/* ======================================================================
   Widths
   ====================================================================== */

@media (max-width: 1100px) {
  .pg-perils { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .pg-hero .pg-art { max-width: 560px; }
  .pg-est { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .pg-art.ui-card { padding: 20px 18px 16px; border-radius: var(--ui-radius-lg); }
  .pg-doc li { grid-template-columns: 10px minmax(0, 1fr); }
  .pg-doc-val { grid-column: 2; }
  .pg-perils { gap: 10px; }
  .pg-peril { padding: 16px 14px 14px; }
  .pg-peril svg { width: 30px; height: 30px; margin-bottom: 10px; }
  .pg-peril-name { font-size: 15.5px; }
  .pg-peril-state { font-size: 13px; }
  .pg-strip-card { padding: 20px 16px 14px; }
  .pg-stat-row { gap: 12px 28px; }
  .pg-unit { grid-template-columns: minmax(0, 1fr); }
  .pg-unit-price { text-align: left; display: flex; align-items: baseline; gap: 8px; }
  .pg-unit-price b { display: inline; }
  .pg-receipt li { flex-direction: column; }
  .pg-receipt span:last-child { text-align: left; }
  .pg-verbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-scope { grid-template-columns: minmax(0, 1fr); }
  .pg-scope-line { width: auto; height: 52px; }
  .pg-scope-line::before { top: 50%; bottom: auto; left: 0; right: 0; border-left: 0; border-top: 2px dashed var(--ui-line-strong); }
  .pg-scope-line span { writing-mode: horizontal-tb; transform: none; padding: 4px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .pg .ui-enter { animation: none; }
}