/* Pages around TrendBrain. Night palette from site.css; yellow informs, red acts.
   The pixel font stays with the building; everything here reads in Overpass. Each section type has its own
   shape (product shot, big numbers, rows, line, timeline, statement) so the page is not one card grid after another. */
.lead { font-size: clamp(18px, 1.4vw, 20px); color: var(--chalk-2); }
.lead a { color: var(--chalk); }
.h2 { font-size: clamp(30px, 3vw, 46px); margin-bottom: 14px; text-wrap: balance; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 56px; align-items: start; }

/* hero */
.hero { padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 6vw, 72px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px 56px; align-items: center; }
.hero h1 { font-size: clamp(36px, 4.4vw, 68px); text-wrap: balance; }
.hero .lead { margin-top: 20px; max-width: 36em; }
.hero__now { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 18px; font-size: 16px; color: var(--chalk-2); }
.hero__text { margin-top: 22px; max-width: 46em; }
.split.hero__text { max-width: none; }
.split.hero__text .lead { max-width: none; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.statusrow { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 24px; list-style: none; padding: 0; }
.statusrow li { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }

/* product shot: the forecast log as it looks in the tool */
.shot { margin: 0; background: #0d0f12; border: 2px solid var(--line); border-radius: 6px; overflow: hidden; }
.shot__bar { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 2px solid var(--line); font: 600 14px/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--chalk-2); }
.shot__tag { color: var(--signal); }
.shot__tbl { width: 100%; border-collapse: collapse; font: 13.5px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; font-variant-numeric: tabular-nums; }
.shot__tbl th, .shot__tbl td { padding: 9px 14px; text-align: left; white-space: nowrap; border-bottom: 1px solid #23272e; color: var(--chalk-2); }
.shot__tbl thead th { font-weight: 600; color: #8b919a; }
.shot__tbl tbody th { font-weight: 700; color: var(--chalk); }
.shot__tbl td:nth-child(4) { text-align: right; color: var(--chalk); }
.shot__open { color: var(--signal); }
.shot figcaption { padding: 12px 14px 14px; font-size: 14px; line-height: 1.5; color: var(--chalk-2); }
.shot figcaption a { color: var(--chalk); }

/* big numbers */
.numbers { padding: 36px 0 40px; border-block: 2px solid var(--line); background: var(--night-2); }
.numbers__t { margin-bottom: 20px; font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.4; color: var(--chalk-2); }
.numbers__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 40px; margin: 0; }
.numbers__list dt { font-size: clamp(40px, 4.4vw, 64px); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.numbers__list dd { margin: 8px 0 0; font-size: 16px; color: var(--chalk-2); }

/* problem, alternatives, market */
.list-t { margin-bottom: 12px; font-size: 18px; }
.after-list { margin-top: 18px; font-weight: 700; }
.guard { list-style: none; padding: 0; margin-block: 0; border-top: 2px solid var(--line); }
.guard li { position: relative; padding: 16px 0 16px 32px; border-bottom: 2px solid var(--line); color: var(--chalk-2); }
.guard li::before { content: ""; position: absolute; left: 0; top: 23px; width: 14px; height: 14px; background: var(--signal); }
.guard b { color: var(--chalk); }
.market { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 32px; margin-top: 56px; padding-top: 28px; border-top: 2px solid var(--line); }
.market__n { font-size: clamp(56px, 7vw, 104px); font-weight: 800; letter-spacing: -.04em; line-height: .9; color: var(--signal); }
.market__t { max-width: 34em; font-size: 18px; color: var(--chalk-2); }
.market__t a { color: var(--chalk); }

/* the loop: six steps with arrows; the grid gap draws the lines */
.flow { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; background: var(--line); border: 2px solid var(--line); counter-reset: fl; }
.flow li { counter-increment: fl; position: relative; padding: 18px 16px 22px; background: var(--night); }
.sec--alt .flow li { background: var(--night-2); }
.flow li::before { content: counter(fl); display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 12px; font-weight: 800; font-size: 15px; border: 2px solid var(--chalk-2); color: var(--chalk-2); }
.flow li.is-plan::before { border-style: dashed; }
.flow li + li::after { content: ""; position: absolute; left: -7px; top: 25px; border: 7px solid transparent; border-left: 8px solid var(--signal); border-right: 0; }
.flow b { display: block; margin-bottom: 6px; font-size: 18px; line-height: 1.2; }
.flow p { font-size: 15px; line-height: 1.5; color: var(--chalk-2); }
.flow .pill { margin-top: 10px; }

/* cards (one grid per page at most) */
.cards { list-style: none; padding: 0; margin-block: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.modules { margin-top: 40px; }
.card { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: var(--night-2); border: 2px solid var(--line); }
.sec--alt .card { background: var(--night); }
.card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.card h3, .card h2 { font-size: 22px; letter-spacing: -.01em; line-height: 1.15; }
.card p { font-size: 16px; color: var(--chalk-2); }
.card a { color: var(--chalk); }
.checks { margin-top: auto; padding-top: 12px; border-top: 2px solid var(--line); }
.checks b { display: block; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--signal); }
.more-row { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 12px; }
.more-link { display: inline-block; padding: 10px 0; font-weight: 700; text-decoration-thickness: 2px; text-decoration-color: var(--feather); }

/* statement */
.statement { padding: clamp(56px, 9vw, 120px) 0; text-align: center; border-block: 2px solid var(--line); }
.statement p { max-width: 18em; font-size: clamp(30px, 4.2vw, 64px); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }

/* a vertical line of steps */
.steps-line { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line); }
.steps-line li { position: relative; padding: 0 0 22px 26px; color: var(--chalk-2); }
.steps-line li:last-child { padding-bottom: 0; }
.steps-line li::before { content: ""; position: absolute; left: -8px; top: 7px; width: 14px; height: 14px; background: var(--night); border: 2px solid var(--signal); }
.steps-line b { color: var(--chalk); }

/* rows */
.rows { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--line); }
.rows li { padding: 14px 0 18px; border-bottom: 2px solid var(--line); }
.rows a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; font-size: 20px; text-decoration: none; }
.rows a b { font-weight: 800; }
.rows p { font-size: 16px; color: var(--chalk-2); }
@media (hover: hover) and (pointer: fine) { .rows a:hover b { text-decoration: underline; text-decoration-color: var(--feather); text-decoration-thickness: 2px; } }

/* roadmap: a line with milestones and a marker for today */
.timeline { position: relative; list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 24px; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--chalk-2); opacity: .4; }
.timeline li { position: relative; padding-top: 34px; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--night-2); border: 2px solid var(--chalk-2); }
.timeline .is-now::before { background: var(--signal); border-color: var(--signal); }
.timeline b { display: block; margin-bottom: 6px; font-size: 18px; }
.timeline .is-now b { color: var(--signal); }
.timeline p { font-size: 16px; color: var(--chalk-2); }

/* building section */
.explore .split { margin-bottom: clamp(24px, 3vw, 40px); }
.explore .world { height: clamp(420px, 72svh, 760px); }
.staff { margin-top: 28px; }
.staff > summary { cursor: pointer; padding: 10px 0 18px; font-size: 17px; font-weight: 700; color: var(--chalk); }
.tag--side { border-style: dashed; color: var(--chalk-2); }
.roster h3 + .role__job { margin-top: 2px; }

/* text blocks */
.prose p { max-width: 38em; color: var(--chalk-2); }
.prose p + p { margin-top: 12px; }
.prose a { color: var(--chalk); }
.prose h3 { margin: 28px 0 8px; }
.prose h3:first-child { margin-top: 0; }
.metric { padding: 22px 24px; border: 3px solid var(--signal); background: rgba(242, 183, 5, .07); }
.metric b { display: block; margin: 8px 0 10px; font-size: clamp(20px, 2vw, 28px); font-weight: 800; line-height: 1.2; color: var(--signal); }
.metric p { color: var(--chalk-2); }
#example .metric { margin-top: 48px; }

/* tables */
.table-scroll { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 16px; }
.tbl caption { text-align: left; padding-bottom: 12px; font-size: 15px; color: var(--chalk-2); }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 2px solid var(--line); }
.tbl thead th { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--signal); border-bottom-color: var(--chalk-2); }
.tbl tbody th { font-weight: 800; }
.tbl td { color: var(--chalk-2); }
.tbl .pill { white-space: nowrap; }
.research-tbl { margin-top: 48px; }
.refs { margin-top: 16px; }

/* example report chart */
.chart { margin: 0; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .grid { stroke: #2b2f37; stroke-width: 1; }
.chart .axis { fill: #9aa0a8; font: 12px "Overpass", sans-serif; }
.chart .band { fill: #b98a00; fill-opacity: .28; }
.chart .med { fill: none; stroke: #b98a00; stroke-width: 2; }
.chart .base { fill: none; stroke: #3f8cd0; stroke-width: 2; stroke-dasharray: 6 5; }
.chart .dot-med { fill: #b98a00; stroke: var(--night-2); stroke-width: 2; }
.chart .dot-base { fill: #3f8cd0; stroke: var(--night-2); stroke-width: 2; }
.chart .lbl { fill: var(--chalk); font: 600 13px "Overpass", sans-serif; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 15px; color: var(--chalk-2); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend i { display: inline-block; width: 22px; height: 10px; }
/* avoid-ai-design-ignore: K4 (legend swatch: the band fill with its median line on top, not a card stripe) */
.legend .k-band { background: rgba(185, 138, 0, .45); border-top: 2px solid #b98a00; }
.legend .k-base { height: 0; border-top: 2px dashed #3f8cd0; }
.chart details { margin-top: 12px; font-size: 15px; color: var(--chalk-2); }
.chart summary { cursor: pointer; padding: 10px 0; font-weight: 700; color: var(--chalk); }

/* numbered steps */
.steps7 { list-style: none; padding: 0; margin-block: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 0 32px; counter-reset: s7; }
.steps7 li { counter-increment: s7; padding: 20px 0 22px; border-top: 2px solid var(--line); }
.steps7 li::before { content: counter(s7, decimal-leading-zero); display: block; margin-bottom: 10px; font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--signal); }
.steps7 b { display: block; margin-bottom: 4px; font-size: 18px; }
.steps7 p { font-size: 16px; color: var(--chalk-2); }
.steps7 .is-human { border-top-color: var(--feather); }

/* changelog, facts, press */
.log { list-style: none; padding: 0; margin-block: 0; border-top: 2px solid var(--line); }
.log li { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: 8px 32px; padding: 22px 0; border-bottom: 2px solid var(--line); }
.log time { font-weight: 800; color: var(--signal); }
.log h2 { font-size: 22px; letter-spacing: -.01em; line-height: 1.2; margin-bottom: 6px; }
.log p { color: var(--chalk-2); max-width: 44em; }
.log a { color: var(--chalk); }
.facts { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 10px 24px; margin-block: 0; }
.facts dt { font-weight: 800; }
.facts dd { margin: 0; color: var(--chalk-2); }
.tiles { list-style: none; padding: 0; margin-block: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; }
.tiles a { text-decoration: none; }
.tile { display: grid; place-items: center; height: 160px; padding: 20px; border: 2px solid var(--line); }
.tile img { max-height: 110px; width: auto; }
.tile--light { background: var(--hall); }
.tile--dark { background: var(--board-2); }
.tiles p { margin-top: 8px; font-size: 15px; }
.boilers { margin-top: 40px; }
.boiler { margin: 0 0 20px; padding: 14px 18px; border-left: 4px solid var(--chalk-2); background: rgba(255, 255, 255, .04); color: var(--chalk); }
.boiler + h3 { margin-top: 28px; }

/* TrendBrain example */
.model-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.model-controls button { appearance: none; cursor: pointer; min-height: 44px; padding: 8px 14px; font: 700 15px/1 "Overpass", sans-serif; color: var(--chalk); background: var(--night-2); border: 2px solid #3a3f47; border-radius: 4px; }
.model-controls [aria-pressed="true"] { background: var(--signal); color: var(--ink); border-color: var(--signal); }
.cap { margin-top: 10px; font-size: 15px; color: var(--chalk-2); }
.steps-list { margin: 0; padding-left: 1.2em; }
.steps-list li { padding: 6px 0; color: var(--chalk-2); }
.steps-list strong { color: var(--chalk); }
.motion-bar { display: flex; justify-content: flex-end; margin-top: 12px; }
.local .split { grid-template-columns: 1fr; gap: 24px; }

@media (max-width: 900px) {
  .hero__grid, .split { grid-template-columns: 1fr; }
  .numbers__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow li::after { display: none; }
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .timeline::before { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .timeline li { padding: 0 0 24px 34px; }
}
@media (max-width: 640px) {
  .flow { grid-template-columns: 1fr; }
  .log li, .facts { grid-template-columns: 1fr; }
  .facts dd { margin-bottom: 10px; }
  .tbl thead { display: none; }
  .tbl tr { display: block; padding: 14px 0; border-bottom: 2px solid var(--line); }
  .tbl th, .tbl td { display: block; padding: 2px 0; border: 0; }
  .tbl td:empty, .tbl td:only-child { display: none; }
  /* phones: the building is a picture, the rooms are the open list below */
  .explore .world { height: auto; overflow: hidden; }
  .world__poster { position: static; height: auto; }
  .world__bar { display: none; }
}
/* the forecast log keeps its key columns as the space shrinks: date first, then model name */
.shot .table-scroll { scrollbar-color: #3a3f47 transparent; }
@media (max-width: 1279px) { .shot__tbl tr > :first-child { display: none; } }
@media (max-width: 640px) { .shot__tbl tr > :nth-child(3) { display: none; } .shot__tbl th, .shot__tbl td { padding: 8px 10px; } }

/* contact form: native validation, no script; the trap field is for bots only */
.form { display: grid; gap: 6px; padding: 24px; background: var(--night-2); border: 2px solid var(--line); border-radius: 6px; }
.form label { margin-top: 10px; font-weight: 700; }
.form label:first-child { margin-top: 0; }
.form input, .form select, .form textarea { width: 100%; min-height: 48px; padding: 10px 12px; font: 400 17px/1.4 "Overpass", sans-serif; color: var(--chalk); background: var(--night); border: 2px solid #3a3f47; border-radius: 4px; }
.form textarea { resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { border-color: var(--signal); outline-offset: 1px; }
.form button { justify-self: start; margin-top: 18px; border: 0; cursor: pointer; }
.form__note { font-size: 15px; color: var(--chalk-2); }
.form__note a { color: var(--chalk); }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-facts { margin-top: 28px; }