/* ============================================================================
   Chief Of — components
   ----------------------------------------------------------------------------
   The modules that replace the pastel card. Every one of these obeys the surface
   law in css/base.css: a fill either means something or does not exist, and what
   separates content is a hairline, alignment, or whitespace.

   Gallery: /ops/design/components.html
   Rationale and measurements: ops/design/REFRESH-PLAN.md

   Conventions:
     - structural surfaces take --radius-flat (0). Only artifact panels and
       buttons/chips are allowed a radius.
     - hairlines are --line (1.27:1 on white). If you can see it in a thumbnail
       it is too dark.
     - a dark surface is square or pill, never --radius-row, so light and dark
       objects differ by silhouette alone.
   ========================================================================== */

/* ------------------------------------------------------------------- bands */
/* Sections are already viewport-wide, so a band is just a background. Content
   inside still sits in .container, which is the only measure. */

.band { padding: var(--section-y) 0; }
.band--ground { background: var(--ground); }
.band--tint { background: var(--tint); }

/* Rule 6: legal in two roles only — governance/risk/security, and conversion.
   Flat #121212 read as dead space. Every dark band in the reference set carries
   material — Cohere's is a photo, Granola's is a photographed black surface with
   visible paper scratches. So this one carries our own dithered art, held far
   enough back that white type stays well clear of AA. */
.band--ink {
  position: relative;
  background: var(--surface-ink);
  color: #FFFFFF;
  isolation: isolate;
}
.band--ink::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: image-set(
    url('/img/art/mountains-dither-1600.webp') type('image/webp'),
    url('/img/art/mountains-dither-1600.png') type('image/png')
  );
  background-size: cover;
  background-position: center 30%;
  opacity: 0.16;
}
/* Where the band sits behind long-form copy rather than a headline, drop the art
   further so nothing competes with reading. */
.band--ink-quiet::before { opacity: 0.1; }
/* These have to out-specify the component defaults — .lattice p sets --ink-soft
   and, at equal specificity, source order was winning and putting dark grey text
   on a near-black band. White at 0.72 measures 9.4:1 here. */
.band--ink :is(h1, h2, h3, h4) { color: #FFFFFF; }
.band--ink :is(p, li, td, th, .lattice p, .hairline-list p, .figure__body) { color: rgba(255, 255, 255, 0.74); }
.band--ink :is(.eyebrow, .lattice__label, .credential-row__date, .credential-row__byline) { color: rgba(255, 255, 255, 0.58); }
.band--ink :is(.hairline-list, .hairline-list > *, .lattice, .lattice > *, .disclosure, .credential-row) {
  border-color: rgba(255, 255, 255, 0.16);
}
.band--ink .chip { border-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.82); background: none; }
.band--ink .btn-ghost { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }
.band--ink .btn-ghost:hover { background: rgba(255, 255, 255, 0.2); }
.band--ink a:not([class]) { color: #FFFFFF; }

/* Orange carries an --ink label, per rule 1. */
.band--accent { background: var(--accent); color: var(--ink); }
.band--accent h2, .band--accent p, .band--accent .eyebrow { color: var(--ink); }
/* The conversion band (bottom-of-page CTA) is the muted grey, not orange or
   blue — a quiet ground that lets the ink headline and ink button carry it. */
/* Every current .band--quiet is a .final-cta, which now sits directly above
   the sitewide footer stripe — grey-on-grey-ish against that dithered band
   read as muddy, so this is the accent-blue product-UI tint instead of the
   neutral grey fill. --ink label per the --accent-blue contract (>14:1). */
.band--quiet { background: var(--accent-blue); color: var(--ink); }
.band--quiet :is(h2, p, .eyebrow) { color: var(--ink); }

/* The mediating strip that stops an ink band reading as a copy-paste accident.
   Sits between the dark band and the light section below it, so the switch is a
   horizon rather than a hard cut. */
.band-horizon {
  height: clamp(96px, 12vw, 160px);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 32px),
    linear-gradient(to bottom, var(--surface-ink), var(--tint));
}

/* --------------------------------------------------------------- metadata */
/* Rule 5: --mono marks a fact or a parameter. Never prose. */

.eyebrow {
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-4);
}

/* A tint is legal here because it encodes a category, not decoration. */
.chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  white-space: nowrap;
}
.chip--phase    { background: #EEF2F8; border-color: #DDE5F0; }
.chip--duration { background: #F3F0E8; border-color: #E7E2D4; }
.chip--audience { background: #EDF3EE; border-color: #DCE7DE; }
.chip--solid    { background: var(--ink); border-color: var(--ink); color: var(--ground); }

/* A whole capability list at the cost of one line. */
.capability-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
}

/* ------------------------------------------------------- section headings */
/* The workhorse. Eyebrow, a hand-broken two-line h2, and the body copy starting
   at the halfway mark and top-aligned with the heading. ~200px of air above and
   below is what makes an unboxed section legible. */

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--space-7);
  align-items: start;
  margin-bottom: var(--space-9);
}
.section-head h2 { line-height: 1.1; text-wrap: balance; }
.section-head__body {
  font-size: var(--step-body-lg);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: var(--measure-prose);
}
.section-head__body > * + * { margin-top: var(--space-4); }
/* In the two-column default the body is its own grid column and needs no top
   margin. It only sits under the heading in the centred variant, and in the
   `.anchored` FAQ column where the same block is reused without the grid. */
h2 + .section-head__body { margin-top: var(--space-4); }

.section-head--centered {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}
.section-head--centered .section-head__body { max-width: var(--measure-lede); }

/* Below the two-column breakpoint the body drops under the heading. The hand
   break in the h2 is written for a wide column, so it is released here and the
   heading is allowed to wrap on its own — otherwise a two-line desktop heading
   becomes four ragged lines on a phone.

   This is why every hand break is authored as `word <br>word`, with a space
   before the tag: hiding the <br> removes the break but not that space, so the
   two halves stay separate words. Without it they weld together ("business
   sidetakes over"), which is exactly what the 390px sweep caught. */
@media (max-width: 880px) {
  .section-head {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-5);
    margin-bottom: var(--space-8);
  }
  .section-head h2 br { display: none; }
}

/* Heading with an action pinned hard right on the same baseline. */
.head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

/* Graphic emphasis without a fill.
   Two devices were tried and cut: the orange-slab headline (read as a
   highlighter pen) and the ghosted background numeral (read as a watermark).
   Display weight comes from the italic accent already defined in base.css —
   `h1 em` / `h2 em` — and from imagery, which is what the image components
   further down are for. */

/* ------------------------------------------------------------- the lattice */
/* Shared-edge cells. The container draws the top and left edge, each cell draws
   its own right and bottom, so no border is ever doubled. Column counts are
   explicit: `auto-fit, minmax(300px, 1fr)` resolved to 4 columns and rendered
   every 6-item grid as 4+2 with a half-empty final row. */

.lattice {
  display: grid;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.lattice > * {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-flat);
  background: none;
  padding: var(--space-6);
  min-width: 0;
}
.lattice--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lattice--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lattice--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Mistral's move: run the content to three columns of four and still draw the
   fourth gridline. The grid is visible where nothing lives. */
.lattice__void { padding: 0; }

.lattice__label {
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-3);
}
.lattice h3 { font-size: var(--step-h3); margin-bottom: var(--space-3); }
.lattice p { font-size: var(--step-small); color: var(--ink-soft); line-height: 1.6; }

/* Two flush text edges instead of a box: title at the top, body pinned to the
   bottom, so sibling cells align on both. */
.lattice--pinned > * { display: flex; flex-direction: column; }
.lattice--pinned > * > :last-child { margin-top: auto; padding-top: var(--space-6); }

@media (max-width: 880px) {
  .lattice--3, .lattice--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lattice__void { display: none; }
}
@media (max-width: 560px) {
  .lattice--2, .lattice--3, .lattice--4 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------- hairline lists */
/* Seven values in ~500px where seven cards would take 1500. Rows are separated
   by a full-width rule and nothing else. */

.hairline-list { border-top: 1px solid var(--line); list-style: none; padding: 0; margin: 0; }
.hairline-list > li,
.hairline-list > .hl-row { border-bottom: 1px solid var(--line); padding: var(--space-5) 0; }
.hairline-list h3 { font-size: var(--step-h3); margin-bottom: var(--space-2); }
.hairline-list p { color: var(--ink-soft); max-width: var(--measure-prose); }

/* Leading marker variant — an arrow or a small mono index instead of an icon. */
.hairline-list--marked > li { display: grid; grid-template-columns: 2.5rem 1fr; column-gap: var(--space-3); }
.hairline-list__marker { font-family: var(--mono); color: var(--muted); font-size: var(--step-small); }

/* Heading pinned in a narrow left column, rows offset right, a third of the
   width deliberately empty. Five of the six reference sites build FAQ this way. */
.anchored {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--space-7);
  align-items: start;
}
@media (max-width: 880px) { .anchored { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); } }

/* Real disclosure, not a div. The old .faq-item was a div + h3 + p on 23 pages —
   143 instances that could not be operated by keyboard at all.

   First pass read as a plain stack of chevron rows. What it needed was the
   numbering, weight and hit-area a reference-quality accordion has: a mono index
   in its own column, a question set at h3 with real air around it, an accent
   marker on the open row, and a row that lights on hover so it reads as
   operable before you click it. */
.disclosure-list { counter-reset: q; border-top: 1px solid var(--line); }

.disclosure { counter-increment: q; border-bottom: 1px solid var(--line); }
.disclosure > summary {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4) var(--space-6) 0;
  cursor: pointer;
  font-size: var(--step-h3);
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
}
.disclosure > summary::-webkit-details-marker { display: none; }
/* The index sits in its own column so questions align regardless of length. */
.disclosure > summary::before {
  content: counter(q, decimal-leading-zero);
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding-top: 0.45em;
  transition: color var(--dur-fast) var(--ease);
}
.disclosure > summary::after {
  content: '';
  align-self: center;
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--ink-soft);
  border-bottom: 1.5px solid var(--ink-soft);
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
/* No background fill and no horizontal shift on hover — a row that jumps
   sideways reads worse on a two-line question than a one-line one, which is
   exactly the inconsistency this is avoiding. The number is the only thing
   that responds, in place. */
.disclosure > summary:hover::before { color: var(--ink); }
.disclosure[open] > summary { padding-bottom: var(--space-3); }
.disclosure[open] > summary::before { color: var(--ink); }
.disclosure[open] > summary::after { border-color: var(--ink); transform: rotate(-135deg); }
/* Answer indents to the question's column, not to the index. */
.disclosure > :not(summary) {
  padding: 0 var(--space-4) var(--space-6) calc(3rem + var(--space-4));
  color: var(--ink-soft);
  max-width: 62ch;
}

/* The left column of .anchored, when it holds the FAQ heading. Gives the empty
   third something to do: a count and a way out for anyone whose question is not
   listed. */
.anchored__aside { position: sticky; top: var(--space-6); }
.anchored__aside h2 { line-height: 1.1; margin-bottom: var(--space-4); }
.anchored__count { font-family: var(--mono); font-size: var(--step-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-5); }
.anchored__prompt { font-size: var(--step-small); color: var(--ink-soft); max-width: 28ch; }
@media (max-width: 880px) { .anchored__aside { position: static; } }

/* ------------------------------------------------------------- phase rail */
/* Replaces .steps, which shipped at three different circle sizes across 19
   pages with four connector variants, one of them invisible. Three segments,
   a node at segment 1's left / 2's middle / 3's right, a dotted plumb line
   down to each step, and the text alignment inherits its node's position — so
   the alignment itself encodes progression. No boxes. */

.phase-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-7);
}
.phase-rail__step { position: relative; padding-top: 92px; }
.phase-rail__step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--line-strong);
}
.phase-rail__node { position: absolute; top: 0; width: 0; }
.phase-rail__node::before {
  content: '';
  position: absolute;
  top: -3.5px; left: -3.5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink);
}
.phase-rail__node::after {
  content: '';
  position: absolute;
  top: 4px; left: 0;
  width: 0; height: 60px;
  border-left: 1px dotted var(--line-strong);
}
.phase-rail__step:nth-child(1) { text-align: left; }
.phase-rail__step:nth-child(1) .phase-rail__node { left: 0; }
.phase-rail__step:nth-child(2) { text-align: center; }
.phase-rail__step:nth-child(2) .phase-rail__node { left: 50%; }
.phase-rail__step:nth-child(3) { text-align: right; }
.phase-rail__step:nth-child(3) .phase-rail__node { left: 100%; }

.phase-rail h3 { font-size: var(--step-h3); margin-bottom: var(--space-2); }
.phase-rail p { font-size: var(--step-small); color: var(--ink-soft); }
.phase-rail .eyebrow { margin-bottom: var(--space-2); }

@media (max-width: 880px) {
  .phase-rail { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-7); }
  .phase-rail__step { text-align: left !important; padding-top: var(--space-7); }
  .phase-rail__step .phase-rail__node { left: 0 !important; }
  .phase-rail__node::after { height: 24px; }
}

/* -------------------------------------------------------------- stat slab */
/* Proof without logos. A tabular numeral at display scale on a tint block, a
   mono eyebrow with a square bullet, and the caveat set INSIDE the stat, which
   reads as honesty rather than marketing. */

.stat-slab { --slab: clamp(3rem, 8vw, 6.5rem); }
.stat-slab__eyebrow { display: flex; align-items: center; gap: var(--space-2); }
.stat-slab__eyebrow::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--accent);
  flex: none;
}
.stat-slab__value {
  display: inline-block;
  font-size: var(--slab);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: var(--tint);
  padding: 0.06em 0.12em;
  margin: var(--space-4) 0 var(--space-4);
}
.stat-slab__caveat { font-size: var(--step-small); color: var(--ink-soft); max-width: 46ch; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-7); }
.stat-row__value { font-size: var(--step-stat); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat-row__label { font-size: var(--step-small); color: var(--muted); margin-top: var(--space-1); }

/* --------------------------------------------------------- credential row */
/* The authority layer, made entirely of type. Date at the left rule, title and
   full byline, a real excerpt left long, and an action pill flush right.
   Metadata makes the claim, so the copy never has to say "expert". Rows are
   deliberately unequal in height. */

.credential-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1.1fr) minmax(0, 1.6fr) auto;
  column-gap: var(--space-6);
  align-items: start;
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--line);
}
.credential-row:first-of-type { border-top: 1px solid var(--line); }
.credential-row__date { font-family: var(--mono); font-size: var(--step-micro); color: var(--muted); padding-top: 0.35em; }
.credential-row__title { font-size: var(--step-h3); line-height: 1.3; margin-bottom: var(--space-2); }
.credential-row__byline { font-size: var(--step-micro); color: var(--muted); }
.credential-row__excerpt { font-size: var(--step-small); color: var(--ink-soft); line-height: 1.6; }

@media (max-width: 880px) {
  .credential-row { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); }
}

/* --------------------------------------------------------- quote spread */
/* One client quote as a 500px designed spread. The quote panel's right edge is
   skewed and the panel beside it carries the inverse slant, so the two shapes
   interlock. The right half works as a texture panel, which means this ships
   before there is any client photography. */

.quote-spread { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 8px; }
.quote-spread__quote {
  background: var(--ground);
  padding: var(--space-7) var(--space-7) var(--space-7) var(--space-6);
  clip-path: polygon(0 0, 100% 0, calc(100% - 56px) 100%, 0 100%);
}
.quote-spread__quote blockquote { font-size: var(--step-h3); line-height: 1.45; margin-bottom: var(--space-5); }
.quote-spread__attrib { font-size: var(--step-small); }
.quote-spread__attrib strong { display: block; }
.quote-spread__attrib span { color: var(--muted); }
.quote-spread__aside {
  clip-path: polygon(56px 0, 100% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 69, 0, 0.18), transparent 60%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 12px),
    var(--surface-ink);
  min-height: 260px;
}
@media (max-width: 720px) {
  .quote-spread { grid-template-columns: minmax(0, 1fr); }
  .quote-spread__quote { clip-path: none; }
  .quote-spread__aside { clip-path: none; min-height: 140px; }
}

/* -------------------------------------------------------- artifact panel */
/* SUPERSEDED for page use, 2026-08-12. The single meter card (.artifact-window
   + .artifact-row) that these built was identical on 21 pages; it is replaced
   site-wide by the .aw agent-artifact set at the foot of this file. These rules
   stay only because the component gallery (ops/design/components.html) still
   documents them; no shipped page references them. Do not add new usages.

   The answer to having no product UI. A colour-wash field with a fragment of a
   real deliverable floating on it, bled off the right and bottom edges so it
   always reads as a crop of something bigger rather than a slide export.
   Built in markup rather than exported as an image: responsive for free, text
   stays selectable, and a dithered raster cannot be scaled anyway. */

.artifact-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-flat);
  padding: clamp(28px, 4vw, 52px) 0 0 clamp(20px, 3.5vw, 52px);
  min-height: 420px;
  background-color: var(--tint);
  background-image:
    linear-gradient(135deg, rgba(255, 69, 0, 0.16), rgba(255, 69, 0, 0.02) 58%),
    repeating-linear-gradient(0deg, rgba(15, 15, 15, 0.05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(15, 15, 15, 0.05) 0 1px, transparent 1px 48px);
}
.artifact-panel--cool {
  background-image:
    linear-gradient(135deg, rgba(31, 90, 160, 0.18), rgba(31, 90, 160, 0.02) 58%),
    repeating-linear-gradient(0deg, rgba(15, 15, 15, 0.05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(15, 15, 15, 0.05) 0 1px, transparent 1px 48px);
}
.artifact-panel--ink {
  background-color: var(--surface-ink);
  background-image:
    linear-gradient(135deg, rgba(255, 69, 0, 0.22), transparent 58%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 48px);
}

/* A mono label drawn into the field, not into a caption. */
.artifact-panel__stamp {
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-4);
}
.artifact-panel--ink .artifact-panel__stamp { color: rgba(255, 255, 255, 0.6); }

/* Generalised from .sim-window on the homepage, which was already this pattern
   and carried the only genuine two-layer shadow on the site. */
.artifact-window {
  background: var(--ground);
  border-radius: var(--radius-panel) 0 0 0;
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.06), 0 12px 32px rgba(15, 15, 15, 0.12);
  /* The bleed. overflow:hidden on the panel clips these edges. */
  margin-right: -72px;
  margin-bottom: -56px;
  min-width: 0;
}
.artifact-window__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
}
.artifact-window__dots { display: flex; gap: 5px; }
.artifact-window__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.artifact-window__name { font-family: var(--mono); font-size: var(--step-eyebrow); color: var(--muted); letter-spacing: 0.06em; }
.artifact-window__body { padding: var(--space-5); }

/* A deliverable rendered as rows, in real type at real sizes. */
.artifact-doc__title { font-size: var(--step-h3); margin-bottom: var(--space-4); }
.artifact-row {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
  font-size: var(--step-small);
}
.artifact-row__idx { font-family: var(--mono); font-size: var(--step-eyebrow); color: var(--muted); }
.artifact-row__score { font-family: var(--mono); font-size: var(--step-micro); color: var(--ink); font-variant-numeric: tabular-nums; }
.artifact-meter { width: 64px; height: 6px; background: var(--line); }
.artifact-meter > span { display: block; height: 100%; background: var(--accent); }

/* Overlap is the annotation. No arrows, no numbered circles, no dashed boxes —
   one base artifact plus an overlay card tells the next scene for free. */
.artifact-overlay {
  position: absolute;
  left: clamp(12px, 2vw, 28px);
  bottom: clamp(12px, 2vw, 28px);
  width: min(300px, 62%);
  background: var(--ground);
  border-radius: var(--radius-row);
  box-shadow: 0 2px 6px rgba(15, 15, 15, 0.08), 0 18px 40px rgba(15, 15, 15, 0.18);
  padding: var(--space-4);
}
.artifact-overlay__label { font-family: var(--mono); font-size: var(--step-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-2); }
.artifact-overlay p { font-size: var(--step-small); color: var(--ink-soft); }

.artifact-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--accent);
  color: var(--ink);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

/* Text-beside-artifact: the split that carries a feature section. */
.artifact-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  column-gap: var(--space-7);
  align-items: center;
}
@media (max-width: 880px) {
  .artifact-split { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-7); }
  .artifact-window { margin-right: -32px; margin-bottom: -32px; }
}

/* --------------------------------------------------------------- tiers */
/* One lattice, shared edges. The recommended tier is marked ONE way: its fill
   goes white against the tint band and a solid cap bar sits on its top edge at
   exactly the column's width. No scale-up, no shadow, no badge stack.
   The cap label is --ink on orange, not white, because it is small text. */

.tier-table {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  margin-top: 52px;
}
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-flat);
  padding: var(--space-6);
}
.tier--recommended { background: var(--ground); }
.tier--recommended::before {
  content: attr(data-flag);
  position: absolute;
  left: -1px; right: -1px; top: 0;
  transform: translateY(-100%);
  background: var(--accent);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 12px;
}
.tier__name { font-size: var(--step-h3); margin-bottom: var(--space-2); }
.tier__pitch { font-size: var(--step-small); color: var(--ink-soft); min-height: 3.2em; }
.tier__price {
  font-size: var(--step-stat);
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  margin: var(--space-5) 0 var(--space-2);
}
.tier__price s { font-size: 0.5em; font-weight: 500; color: var(--muted); margin-right: 0.25em; }
.tier__unit { font-size: var(--step-small); color: var(--muted); font-weight: 400; }
.tier__features { list-style: none; padding: 0; margin: var(--space-5) 0 var(--space-6); font-size: var(--step-small); }
.tier__features li { padding: var(--space-2) 0; border-top: 1px dotted var(--line-strong); color: var(--ink-soft); }
.tier__features li::before { content: '\2713'; color: var(--ink); margin-right: var(--space-2); }
/* Reserved slot, so the feature lists start at the same y across all columns even
   though the first tier has nothing to inherit. An empty .tier__inherit in the
   first column holds the space. */
.tier__inherit { font-size: var(--step-small); font-weight: 600; margin-top: var(--space-5); min-height: 1.5em; }
.tier .btn-primary, .tier .btn-ghost { margin-top: auto; text-align: center; }

@media (max-width: 880px) {
  .tier-table { grid-template-columns: minmax(0, 1fr); margin-top: 52px; }
}

/* ---------------------------------------------------------------- forms */
/* Mono uppercase labels, realistic placeholders rather than a repeat of the
   label, and a hairline on the page ground instead of a filled box — so a long
   qualifying form reads as a document, not a CRM. */

.form-stack { display: grid; gap: var(--space-5); max-width: 40rem; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.field-label {
  display: block;
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.field-label span { color: var(--accent); }
.form-stack input[type='text'],
.form-stack input[type='email'],
.form-stack select,
.form-stack textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--step-body);
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-row);
  padding: 13px 14px;
  transition: border-color var(--dur-fast) var(--ease);
}
.form-stack ::placeholder { color: var(--muted); font-family: var(--mono); font-size: var(--step-small); }
.form-stack :is(input, select, textarea):focus { border-color: var(--ink); }

/* The native select arrow sits hard against the right edge of a full-width
   field, which on a 40rem form left it stranded miles from the text. Custom
   chevron, positioned 14px in, with room reserved so a long option cannot run
   underneath it. */
.form-stack select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235A5A5A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.form-stack textarea { min-height: 118px; resize: vertical; }
.form-counter { font-family: var(--mono); font-size: var(--step-eyebrow); color: var(--muted); text-align: right; margin-top: var(--space-1); }
.form-legal { font-size: var(--step-micro); color: var(--muted); max-width: 46ch; }

@media (max-width: 560px) { .form-row { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------- situation selector */
/* A self-qualification device that reads as an interactive product. The left
   column is the client's own words; the right responds. CSS-only, driven by
   radios, so it works with no JS and is keyboard-operable by default. */

.situation { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); border: 1px solid var(--line); }
.situation__list { border-right: 1px solid var(--line); }
.situation__opt { position: absolute; width: 1px; height: 1px; opacity: 0; }
.situation__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5);
  border-bottom: 1px solid var(--line);
  font-size: var(--step-small);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.situation__label::after {
  content: '';
  flex: none;
  width: 7px; height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.5;
}
.situation__label:hover { background: var(--tint); }
.situation__opt:checked + .situation__label { background: var(--ink); color: var(--ground); font-weight: 600; }
.situation__opt:focus-visible + .situation__label { outline: 2px solid var(--ink); outline-offset: -3px; }
.situation__panel { display: none; padding: var(--space-7); }
.situation__panel h3 { font-size: var(--step-h3); margin-bottom: var(--space-3); }
.situation__panel p { color: var(--ink-soft); font-size: var(--step-small); margin-bottom: var(--space-5); }

/* Pair each radio to its panel by index. :has() lets the two live in different
   columns of the grid, which a sibling selector could not reach across. */
.situation:has(.situation__opt[value='1']:checked) [data-sit='1'],
.situation:has(.situation__opt[value='2']:checked) [data-sit='2'],
.situation:has(.situation__opt[value='3']:checked) [data-sit='3'],
.situation:has(.situation__opt[value='4']:checked) [data-sit='4'],
.situation:has(.situation__opt[value='5']:checked) [data-sit='5'],
.situation:has(.situation__opt[value='6']:checked) [data-sit='6'] { display: block; }

@media (max-width: 720px) {
  .situation { grid-template-columns: minmax(0, 1fr); }
  .situation__list { border-right: 0; }
}

/* ---------------------------------------------------------------- hero */
/* 29 pages have a <section class="hero"> and there was no component for it —
   every page set its own padding, measure and alignment, which is why 16 of them
   drifted into a centred single column. Three variants, and that is all.

   Display emphasis is the italic accent from base.css: <h1>… <em>expert</em>.</h1> */

.hero { padding: var(--section-y) 0 calc(var(--section-y) * 0.6); }
.hero h1 { font-size: var(--step-display); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.hero .lede {
  font-size: var(--step-body-lg);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: var(--measure-lede);
  margin-top: var(--space-5);
}
.hero .cta-group { margin-top: var(--space-6); }

/* Centred — for pages making a single claim with nothing to show beside it.
   Runway's research page is the reference: eyebrow, two-line statement, narrow
   sub, one button, and a lot of air. */
.hero--centered { text-align: center; }
.hero--centered .hero__inner { max-width: 46rem; margin: 0 auto; }
.hero--centered .lede { margin-inline: auto; }
.hero--centered .cta-group { justify-content: center; }

/* Split — headline left, supporting copy and actions in the right column,
   top-aligned with the headline's first line rather than stacked under it. */
.hero--split .hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  column-gap: var(--space-7);
  align-items: start;
}
.hero--split .lede { margin-top: 0; }

/* Paired — Cohere's 2:1 asymmetric hero. A wide artifact or wash panel beside a
   narrower human photograph: capability plus accountable human, stated without
   copy. This is the shape to use once there is a portrait worth running. */
/* Cohere's 2:1 asymmetric hero: a wide artifact beside a narrower portrait,
   equal height. The artifact is content-sized (window + a dither margin) and
   sets the row height; the portrait's img is a positioned overlay filling the
   frame, so its intrinsic height never drives the row.
   NOTE: `.hero .art-stage` carries a margin-top (for segment-page heroes where
   art follows the CTA); inside the pair that margin was added into the grid row
   and left the portrait ~64px taller, so it is zeroed here. */
.hero-pair {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
  align-items: stretch;
}
.hero .hero-pair > .art-stage { margin-top: 0; }
.hero-pair > .media-frame { position: relative; overflow: hidden; }
.hero-pair > .media-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 880px) {
  .hero--split .hero__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); }
  .hero-pair { grid-template-columns: minmax(0, 1fr); }
  .hero-pair > .media-frame { aspect-ratio: 3 / 2; }
}

/* ------------------------------------------------------------ logo wall */
/* A caption and a row, with no container and no cards — the references all treat
   client logos as a single quiet line, not a section. Logos go flat grey; the one
   place they keep full colour is a dedicated trust band. */

.logo-wall { text-align: center; }
.logo-wall__caption { font-size: var(--step-small); color: var(--muted); margin-bottom: var(--space-6); }
.logo-wall__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(24px, 4vw, 56px); }
.logo-wall__row img { height: 26px; width: auto; filter: grayscale(1); opacity: 0.55; }

/* ---------------------------------------------------------- price block */
/* The single-plan case, on 19 pages. It was .pricing-single — a pastel card with
   the price at four sizes and three weights depending on which page you landed
   on. One setup figure and one recurring figure, on a hairline, no box. */

/* Several pricing sections set text-align:center on the section, which leaked in
   and centred the figures. The block owns its own alignment and centres itself. */
.price-block { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--space-7) 0; max-width: 34rem; margin-inline: auto; text-align: left; }
.price-block__name { font-size: var(--step-h3); margin-bottom: var(--space-4); }
.price-block__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-5); }
.price-block__figure { display: flex; align-items: baseline; gap: var(--space-2); }
.price-block__amount { font-size: var(--step-stat); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.price-block__unit { font-family: var(--mono); font-size: var(--step-eyebrow); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.price-block__then { font-size: var(--step-small); color: var(--muted); }
.price-block__features { list-style: none; padding: 0; margin: var(--space-6) 0 var(--space-6); font-size: var(--step-small); }
.price-block__features li { padding: var(--space-2) 0; border-top: 1px dotted var(--line-strong); color: var(--ink-soft); }
.price-block__features li::before { content: '\2713'; color: var(--ink); margin-right: var(--space-2); }

/* ----------------------------------------------------------- data table */
/* Three near-identical comparison tables existed — .compare-table on pricing and
   .price-table / .compare-table in two blog posts — all with a pastel th. One
   component: hairline rows, a mono header, no zebra, no outer border, no radius.
   Group headers get the tint band; values are right-aligned like a spec sheet. */

.data-table { width: 100%; border-collapse: collapse; font-size: var(--step-small); }
.data-table th, .data-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--line); }
.data-table thead th {
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line-strong);
  background: none;
}
.data-table tbody th { font-weight: 500; color: var(--ink); }
.data-table td { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.data-table td + td, .data-table thead th + th { text-align: right; }
.data-table__group th {
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--tint);
  color: var(--ink);
}
.data-table__wrap { overflow-x: auto; }

/* -------------------------------------------------------------- callout */
/* Replaces .fix, which was a pastel box with a 3px orange left border — the one
   place a card broke the old no-borders rule. Now blue, not orange: a callout is
   a product-UI note ("here is the thing to know"), which is the blue accent's
   job, and it keeps orange reserved for marketing emphasis. The blue wash is a
   legal fill because it marks a callout, the same way --btn-quiet marks a
   button — and --ink on it clears contrast where white never would. */

.callout { border-left: 2px solid var(--accent-blue); background: var(--accent-blue-quiet);
           border-radius: var(--radius-row); padding: var(--space-3) var(--space-5); }
.callout h4 { font-size: var(--step-body-lg); margin-bottom: var(--space-1); }
.callout p { font-size: var(--step-small); color: var(--ink-soft); }
.callout + .callout { margin-top: var(--space-5); }

/* ------------------------------------------------------------ transcript */
/* A conversation as illustration — Granola frames a feature with the user's own
   question, ElevenLabs floats bubbles on a gradient. Used on moms.html and by the
   homepage agent sim. Sits inside an .artifact-panel or on the ground. */

.transcript { display: grid; gap: var(--space-3); max-width: 30rem; }
.transcript__msg { display: flex; flex-direction: column; gap: 4px; }
.transcript__msg--you { align-items: flex-end; }
.transcript__who { font-family: var(--mono); font-size: var(--step-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.transcript__bubble {
  font-size: var(--step-small);
  line-height: 1.55;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-panel);
  max-width: 90%;
}
.transcript__msg--you .transcript__bubble { background: var(--ink); color: var(--ground); border-bottom-right-radius: var(--radius-row); }
.transcript__msg--agent .transcript__bubble { background: var(--ground); border: 1px solid var(--line); border-bottom-left-radius: var(--radius-row); }

/* ----------------------------------------------------------- media frame */
/* The only image treatment on the site. A photograph gets a panel radius and
   nothing else — no border, no shadow, no matting — because its own edge is the
   container. --tall is the portrait slot in .hero-pair. */

.media-frame { overflow: hidden; border-radius: var(--radius-flat); background: var(--tint); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-frame--tall { aspect-ratio: 3 / 4; }
.media-frame--wide { aspect-ratio: 16 / 9; }
.media-frame--square { aspect-ratio: 1 / 1; }
/* Dithered art is resolution-dependent: it must be generated per width and
   served through srcset, never scaled from one raster. See REFRESH-PLAN 2.10. */
.media-frame--dither img { image-rendering: pixelated; }

/* ================================================================= imagery */
/* The reference set carries 22-90% of its page area as media; we were at 0-4.8%.
   These are the treatments they actually use, built on our dither.
   Assets: ops/dither/dither.js --aspect W:H --sizes a,b,c. Every shape is cropped
   and dithered at its serving width, because a dither cannot be rescaled — CSS
   must never object-fit one of these into a different aspect. */

/* --- 1. figure: art ABOVE, words BELOW -----------------------------------
   The house rule, taken from Browserbase's three-up: type never sits on an
   image. The art panel is square and unlinked, and the number, title and body
   live under it on the page ground where they are simply readable. No scrim, no
   reversed-out label, no hover zoom — an image that moves under the cursor
   suggests it is a control, and these are not. */

.figure-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
.figure-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.figure-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.figure__art {
  /* Square. An image's own edge is the container, and a large structural
     surface takes --radius-flat. */
  border-radius: var(--radius-flat);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--tint);
  margin-bottom: var(--space-5);
}
.figure__art > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.figure__num {
  font-family: var(--mono);
  font-size: var(--step-small);
  font-weight: 700;
  color: var(--accent);
  margin-right: var(--space-2);
}
.figure__title { display: inline; font-size: var(--step-h3); }
.figure__body { margin-top: var(--space-3); color: var(--ink-soft); font-size: var(--step-small); max-width: 46ch; }

@media (max-width: 1000px) { .figure-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 880px) { .figure-grid, .figure-grid--2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .figure-grid--4 { grid-template-columns: minmax(0, 1fr); } }

/* --- 2. dither art with an artifact floating on it -----------------------
   Browserbase's step panels, and the most transferable image component we have:
   the dithered landscape is the ground, and a white UI artifact sits on top of
   it. It gives an abstract capability something concrete to look at without
   putting a single word over the photograph. */

.art-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-flat);
  aspect-ratio: 4 / 3;
  background: var(--tint);
  padding: clamp(16px, 3vw, 34px);
}
/* Wider variant for use as the art column of a .media-row. */
.art-stage--wide { aspect-ratio: 3 / 2; }

/* Hero art sits in its own .container directly after the copy block, so nothing
   separated the CTA row from the image — the buttons ran straight into it. This
   belongs on the component, not per page: all 19 heroes that run art had it. */
.hero .art-stage { margin-top: var(--space-8); }

.art-stage__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Everything else stacks above the art. */
.art-stage > :not(.art-stage__bg) { position: relative; }

/* The floating artifact. Rounded, because it is an inner object, not the
   structural surface — that contrast of square frame against rounded object is
   what makes it read as sitting ON the image rather than being part of it. */
.art-card {
  background: var(--ground);
  border-radius: var(--radius-panel);
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.08), 0 14px 34px rgba(15, 15, 15, 0.18);
  width: 100%;
  max-width: 88%;
  overflow: hidden;
}
.art-card--tight { max-width: 74%; }

/* A pill label of the kind those panels use to name the thing being shown. */
.art-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  letter-spacing: 0.04em;
  background: var(--accent);
  color: var(--ink);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.art-pill--quiet { background: var(--ground); color: var(--ink); box-shadow: 0 2px 8px rgba(15,15,15,0.14); }

/* --- 3. media row: art beside copy, alternating ------------------------
   Runway's news and research rows. Not stacked cards — horizontal pairs, so four
   items read as an editorial column rather than a grid. */
.media-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-7) 0;
  border-bottom: 1px solid var(--line);
}
.media-row:first-of-type { border-top: 1px solid var(--line); }
/* Flip targets the first child (the art column, whether .media-row__art or an
   .art-stage) so alternation works for both the img rows and the artifact rows. */
.media-row--flip > :first-child { order: 2; }
/* 3:2 rather than 4:3 — the reference rows run ~1.8:1, and 4:3 made the art
   taller than the copy beside it. `cover` crops vertically at a matched width,
   so the dither is not rescaled. */
.media-row__art { overflow: hidden; border-radius: var(--radius-flat); aspect-ratio: 3 / 2; }
.media-row__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-row h3 { font-size: var(--step-h3); margin-bottom: var(--space-3); }
.media-row p { color: var(--ink-soft); font-size: var(--step-small); max-width: 52ch; }

@media (max-width: 720px) {
  .media-row, .media-row--flip { grid-template-columns: minmax(0, 1fr); }
  .media-row--flip > :first-child { order: 0; }
}

/* --- 5. horizon: the image strip that mediates dark to light -----------
   Cohere ends its dark hero with a band of sunlit moss, so the switch reads as a
   horizon rather than a hard cut. This replaces the CSS gradient version. */
.horizon { display: block; height: clamp(96px, 12vw, 168px); overflow: hidden; }
.horizon img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; display: block; }

/* Decorative, and it clamps to its FLOOR on a phone (12vw is 45px at 375px) —
   so the width where it costs the most relative to the screen is the only width
   where it never shrinks. Landing between two sections that already contribute
   44px each, it was adding 96px to a 209px hole. The image is object-fit:
   cover, so a shorter band just crops. (.image-rule gets the same treatment,
   declared after its own rule below.) */
@media (max-width: 640px) {
  .horizon { height: 56px; }
}

/* --- 6. artifact panel over a photograph ------------------------------
   Granola's actual construction: the wash field is a real photo, and the
   document window sits on it inset from the top-left and bled off the right and
   bottom. Reuses everything in .artifact-window. */
.artifact-panel--photo { background-color: var(--surface-ink); background-image: none; }
.artifact-panel--photo > .artifact-panel__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.artifact-panel--photo > :not(.artifact-panel__art) { position: relative; z-index: 1; }

/* --- 7. image as the section divider ---------------------------------
   A thin full-bleed strip between two light sections. Cheap rhythm, and it is
   how Browserbase punctuates without a rule. */
.image-rule { height: clamp(64px, 7vw, 96px); overflow: hidden; }
.image-rule img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; display: block; }
/* Same floor problem as .horizon (7vw is 26px at 375px, so the 64px floor
   governs). Must come after the rule above, not with the .horizon override —
   equal specificity means source order decides. */
@media (max-width: 640px) {
  .image-rule { height: 44px; }
}

/* ------------------------------------------------------------- reveal */
/* The utility motion layer. Direction is chosen by the element's role, which is
   what tells a reader which elements belong together once the boxes are gone.
   Nothing scales, nothing parallaxes. js/reveal.js adds .is-in. */

.reveal { opacity: 0; transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal--up    { transform: translateY(18px); }
.reveal--left  { transform: translateX(-18px); }
.reveal--right { transform: translateX(18px); }
.reveal.is-in  { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------- the agent conversation */
/* The site had two unrelated chat mock-ups, both page-local: `.sim` on the
   homepage (a request line, a step list, a result block) and `.convo` on the
   moms page (static bubbles). Neither read as a conversation, and neither could
   be reused. This is the one component both become.
 *
 * The turn model is the whole idea. An agent turn is not a message — it is
 * think → act → answer, and showing those as three visually distinct stages is
 * what makes it read as an agent rather than a chatbot:
 *
 *   .agent-turn--user     what the person said
 *   .agent-turn--agent    containing, in order:
 *     .agent-think          a cycling verb while it decides what to do
 *     .agent-steps          tool calls, resolving one at a time
 *     .agent-say            the reply, streamed in
 *     .agent-attach         what it produced, as a chip
 *
 * Two variants, because the two contexts need different registers:
 *   default             work surface — steps prominent, mono metadata, artifact
 *   .agent-chat--message  consumer messaging — bubbles, steps de-emphasised
 *
 * Motion lives in js/agent-chat.js; every stage here has both an idle and a
 * settled state so the panel is legible with JS off and under reduced motion.
 * Per the imagery constraints, this is all type, rules and rectangles — there
 * is no exported image anywhere in it, so it is responsive for free. */

/* Same window chrome as the .aw artifacts: a tint title bar, a floating shadow,
   an 11px radius. This is the animated sibling of .aw, so it must read as the
   same component family, not a flat bordered card. */
.agent-chat {
  background: var(--ground);
  border-radius: 11px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 4px rgba(15, 15, 15, 0.05), 0 22px 44px -20px rgba(15, 15, 15, 0.28);
}
.agent-chat__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px 13px;
  background: var(--tint);
  border-bottom: 1px solid var(--line);
}
.agent-chat__dots { display: flex; gap: 6px; flex: none; }
.agent-chat__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.agent-chat__app {
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  letter-spacing: 0.06em;
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A fixed min-height so the panel does not grow and shove the page down as the
   turn streams in — layout shift during an animation reads as a bug. */
.agent-chat__transcript {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: var(--agent-chat-min, 22rem);
}

.agent-turn { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.agent-turn__who {
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The person's turn. Right-aligned in the messaging variant only — on a work
   surface both turns share a left edge, because the steps below have to align
   with something. */
.agent-turn--user .agent-turn__body {
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--ink);
}

/* ---- stage 1: thinking ---- */
/* One line that swaps its verb every beat. The point is that it changes — a
   static "Thinking…" reads as a spinner, a changing verb reads as a process. */
.agent-think {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--step-small);
  color: var(--muted);
  font-style: italic;
}
.agent-think[hidden] { display: none; }
.agent-think__word { transition: opacity var(--dur) var(--ease); }
.agent-think.is-swapping .agent-think__word { opacity: 0; }

/* The three-dot typing indicator. Staggered so it reads as a wave. */
.agent-dots { display: inline-flex; gap: 4px; flex: none; }
.agent-dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--muted);
  animation: agent-bounce 1.1s var(--ease) infinite;
}
.agent-dots i:nth-child(2) { animation-delay: 0.15s; }
.agent-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes agent-bounce {
  0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

/* ---- stage 2: tool calls ---- */
.agent-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.agent-step {
  display: grid;
  grid-template-columns: 1rem 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--step-small);
  color: var(--muted);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.agent-step.is-active, .agent-step.is-done { opacity: 1; transform: none; }
.agent-step.is-active { color: var(--ink); }
.agent-step.is-done   { color: var(--ink-soft); }

/* The marker carries the state: a ring while running, a filled tick once done.
   Shape, not colour alone — the running and done states have to be tellable
   apart without relying on hue. */
.agent-step__mark {
  width: 1rem; height: 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  position: relative;
  flex: none;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.agent-step.is-active .agent-step__mark {
  border-color: var(--accent);
  border-top-color: transparent;
  animation: agent-spin 0.7s linear infinite;
}
.agent-step.is-done .agent-step__mark {
  border-color: var(--ink);
  background: var(--ink);
}
.agent-step.is-done .agent-step__mark::after {
  content: "";
  position: absolute;
  left: 4px; top: 2px;
  width: 4px; height: 7px;
  border: solid var(--ground);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(40deg);
}
@keyframes agent-spin { to { transform: rotate(360deg); } }

/* Elapsed time per call, in mono. Small, tabular, and only present once the
   step resolves — a timer that counts up would be a lie. */
.agent-step__ms {
  font-family: var(--mono);
  font-size: var(--step-micro);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.agent-step.is-done .agent-step__ms { opacity: 1; }

/* ---- stage 3: the answer ---- */
.agent-say {
  font-size: var(--step-small);
  line-height: 1.6;
  color: var(--ink-soft);
}
.agent-say strong { color: var(--ink); font-weight: 600; }
.agent-say ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.agent-say li { padding: var(--space-1) 0 var(--space-1) var(--space-4); position: relative; }
.agent-say li::before {
  content: "";
  position: absolute; left: 0; top: 0.65em;
  width: 6px; height: 1px;
  background: var(--line-strong);
}
/* The cursor only exists while text is streaming. */
.agent-say__caret {
  display: inline-block;
  width: 2px; height: 1em;
  background: var(--accent);
  vertical-align: -0.15em;
  margin-left: 1px;
  animation: agent-blink 1s steps(2, start) infinite;
}
@keyframes agent-blink { 50% { opacity: 0; } }

/* ---- what it produced ---- */
.agent-attach {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-row);
  font-family: var(--mono);
  font-size: var(--step-micro);
  color: var(--ink);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.agent-attach.is-in { opacity: 1; transform: none; }
.agent-attach__kind { color: var(--muted); }

/* ---- controls ---- */
.agent-chat__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.agent-chip {
  font: inherit;
  font-size: var(--step-micro);
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.agent-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.agent-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }

.agent-chat__foot {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.agent-chat__replay {
  font: inherit;
  font-size: var(--step-micro);
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  flex: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.agent-chat__note { font-size: var(--step-micro); color: var(--muted); line-height: 1.45; }

/* ---- variant: consumer messaging ---- */
/* Same engine, different register. Bubbles and an opposed alignment, because
   here the point is "you text it like a friend", not "watch it work". Steps
   still run, but quieter — she does not care which tool fired. */
.agent-chat--message .agent-chat__transcript { gap: var(--space-4); }
.agent-chat--message .agent-turn--user { align-items: flex-end; }
.agent-chat--message .agent-turn__body {
  max-width: 85%;
  padding: var(--space-3) var(--space-4);
  border-radius: 14px;
  font-size: var(--step-small);
  line-height: 1.5;
}
.agent-chat--message .agent-turn--user .agent-turn__body {
  background: var(--ink);
  color: var(--ground);
  border-bottom-right-radius: var(--radius-row);
}
.agent-chat--message .agent-turn--agent .agent-turn__body {
  background: var(--ground);
  border: 1px solid var(--line);
  border-bottom-left-radius: var(--radius-row);
  max-width: 90%;
}
.agent-chat--message .agent-step { font-size: var(--step-micro); padding: 3px 0; }
.agent-chat--message .agent-step__ms { display: none; }

/* ---- narrow ---- */
@media (max-width: 560px) {
  .agent-chat__transcript { padding: var(--space-4); min-height: 0; }
  .agent-chat__foot { flex-direction: column; gap: var(--space-2); align-items: flex-start; }
  .agent-step { grid-template-columns: 1rem 1fr; }
  .agent-step__ms { display: none; }
}

/* Everything arrives settled: no dots, no spin, no caret, no streaming. The
   panel is a finished transcript, which is also exactly what it looks like with
   JS off. */
@media (prefers-reduced-motion: reduce) {
  .agent-dots i,
  .agent-step.is-active .agent-step__mark,
  .agent-say__caret { animation: none; }
  .agent-step { opacity: 1; transform: none; }
  .agent-attach { opacity: 1; transform: none; }
  .agent-say__caret { display: none; }
}

/* ============================================================ agent artifacts */
/* The window that floats on a dithered .art-stage ground, replacing the old
   single meter card (.art-card + .artifact-row) that was identical on 21 pages.
   Nine body types share one shell (.aw); each type is a shell plus content slots,
   so the same Run log serves a contractor and a recruiter with different lines.
   All type, rules and rectangles — no exported image — so it is responsive and
   the text stays selectable (see the imagery constraints).

   COLOUR, standardised across the set:
   - orange is the brand accent: the live status dot, the running step, the struck
     clause, the pills — sparingly, and on a fill it carries an --ink label.
   - --accent-blue fills only two whole surfaces: the callout note and booked
     calendar cells (neither black nor orange suited them).
   - --btn-quiet carries soft message surfaces; --accent-yellow is the highlighter
     on a held slot. Submit actions are the site's own .btn-primary / .btn-ghost.

   STATUS is two states only: .aw__status--live (a pulsing orange dot) appears
   ONLY on a card genuinely mid-process, so the motion means something; every
   other card is idle — a quiet neutral dot with a label. */

/* The ground hugs the window instead of holding a fixed aspect ratio, so a
   taller window is never clipped; the window floats centred with a dither margin. */
.art-stage:has(.aw) { aspect-ratio: auto; height: auto; padding: clamp(18px, 4vw, 44px); }
.art-stage > .aw { width: 100%; max-width: 460px; }

.aw { background: var(--ground); border-radius: 11px; overflow: hidden; text-align: left;
      box-shadow: 0 2px 4px rgba(15,15,15,0.05), 0 26px 50px -18px rgba(15,15,15,0.34);
      font-size: var(--step-small); line-height: 1.5; display: flex; flex-direction: column; }

/* ---- shell: title bar ---- */
.aw__bar { display: flex; align-items: center; gap: 10px; padding: 9px 13px;
           background: var(--tint); border-bottom: 1px solid var(--line); }
.aw__dots { display: flex; gap: 6px; flex: none; }
.aw__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.aw__app { font-family: var(--mono); font-size: var(--step-eyebrow); color: var(--muted); letter-spacing: 0.04em;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.aw__status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: none;
              font-family: var(--mono); font-size: var(--step-eyebrow); color: var(--muted); }
.aw__status i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); flex: none; }
.aw__status--live i { background: var(--accent); animation: aw-pulse 1.6s var(--ease) infinite; }
@keyframes aw-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,69,0,0.35); } 50% { box-shadow: 0 0 0 5px rgba(255,69,0,0); } }

/* ---- shell: body + feet ---- */
.aw__body { padding: var(--space-4); flex: 1; }
.aw__opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-4); }

.aw__compose { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-top: 1px solid var(--line); }
.aw__field { flex: 1; background: var(--btn-quiet); border-radius: var(--radius-pill); padding: 8px 14px;
             font-size: var(--step-micro); color: var(--muted); }
.aw__send { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--ground);
            display: grid; place-items: center; flex: none; font-size: 15px; line-height: 1; }

.aw__toolbar { display: flex; align-items: center; gap: var(--space-3); padding: 10px 13px; border-top: 1px solid var(--line); }
.aw__meta { font-family: var(--mono); font-size: var(--step-micro); color: var(--muted); }
.aw .btn-primary, .aw .btn-ghost { font-size: var(--step-micro); padding: 8px 16px; }
.aw__act { margin-left: auto; flex: none; }

/* ---- shared marks ---- */
.aw-tag { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase;
          border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 3px 9px; color: var(--muted); flex: none; }
.aw-tag--now { border-color: transparent; background: var(--accent); color: var(--ink); }
.aw-chip { font: inherit; font-size: var(--step-micro); color: var(--ink); background: var(--btn-quiet); border: 0;
           border-radius: var(--radius-pill); padding: 7px 13px; cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.aw-chip::before { content: "\2192"; color: var(--muted); margin-right: 6px; }
.aw-chip:hover { background: var(--btn-quiet-hover); }

/* ---- 1. exchange ---- */
.aw-chat { display: flex; flex-direction: column; gap: 10px; }
.aw-chat__turn { display: flex; gap: 8px; align-items: flex-end; }
.aw-chat__turn--you { flex-direction: row-reverse; }
.aw-chat__av { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center;
               font-family: var(--mono); font-size: 0.6rem; font-weight: 700; }
.aw-chat__av--you { background: var(--ink); color: var(--ground); }
.aw-chat__av--it { background: var(--btn-quiet); color: var(--ink); }
.aw-chat__msg { max-width: 78%; padding: 9px 13px; font-size: var(--step-micro); line-height: 1.45; }
.aw-chat__turn--you .aw-chat__msg { background: var(--ink); color: var(--ground); border-radius: 13px 13px 3px 13px; }
.aw-chat__turn--it .aw-chat__msg { background: var(--btn-quiet); color: var(--ink); border-radius: 13px 13px 13px 3px; }

/* ---- 2. run log ---- */
.aw-run__row { display: grid; grid-template-columns: 15px 1fr auto; gap: 11px; align-items: center;
               padding: 9px 0; font-size: var(--step-micro); color: var(--ink-soft); }
.aw-run__row + .aw-run__row { border-top: 1px solid var(--line); }
.aw-run__st { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; }
.aw-run__st--done { background: var(--ink); border-color: var(--ink); }
.aw-run__st--done::after { content:""; width: 3px; height: 6px; margin-top: -1px;
                           border: solid var(--ground); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.aw-run__st--now { border-color: var(--accent); border-top-color: transparent; animation: aw-spin 0.7s linear infinite; }
@keyframes aw-spin { to { transform: rotate(360deg); } }
.aw-run__row--now { color: var(--ink); font-weight: 600; }
.aw-run__t { font-family: var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.aw-run__row--queued { color: var(--muted); }

/* ---- 3. redline ---- */
.aw-doc__clause { font-family: var(--mono); font-size: var(--step-micro); color: var(--muted); margin-bottom: 7px; }
.aw-doc__body { font-size: var(--step-micro); color: var(--ink-soft); line-height: 1.7; }
.aw-doc__body mark { background: none; color: var(--muted); text-decoration: line-through;
                     text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.aw-doc__note { margin-top: 12px; padding: 10px 13px; background: var(--accent-blue-quiet);
                border-left: 2px solid var(--accent-blue); border-radius: var(--radius-row);
                color: var(--ink); font-size: var(--step-micro); line-height: 1.5; }

/* ---- 4. week ---- */
.aw-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.aw-week__d { font-family: var(--mono); font-size: var(--step-micro); color: var(--muted); text-align: center; padding-bottom: 5px; }
.aw-week__c { border: 1px solid var(--line); border-radius: var(--radius-row); padding: 7px 6px;
              font-size: 0.62rem; line-height: 1.3; color: var(--ink-soft); min-height: 46px; }
.aw-week__c--full { background: var(--accent-blue); border-color: var(--accent-blue); color: var(--ink); }
.aw-week__c--hold { border-style: dashed; border-color: var(--line-strong); background: var(--accent-yellow); color: var(--ink); }
.aw-week__c small { display: block; color: var(--ink); font-family: var(--mono); font-size: 0.55rem; margin-bottom: 2px; opacity: 0.7; }

/* ---- 5. triage ---- */
.aw-triage__sum { font-size: var(--step-small); color: var(--ink-soft); margin-bottom: var(--space-4); }
.aw-triage__sum b { color: var(--ink); font-weight: 600; }
.aw-triage__card { border: 1px solid var(--line); border-radius: var(--radius-panel); padding: var(--space-4); }
.aw-triage__who { color: var(--ink); font-weight: 600; font-size: var(--step-small); display: flex; align-items: center; gap: 8px; }
.aw-triage__ctx { color: var(--ink-soft); font-size: var(--step-micro); margin-top: 4px; line-height: 1.5; }
.aw-triage__strip { margin-top: var(--space-3); font-family: var(--mono); font-size: 0.62rem; color: var(--muted); }

/* ---- 6. left for you (wire) ---- */
.aw-wire__head { font-size: var(--step-small); font-weight: 600; color: var(--ink); margin-bottom: var(--space-3); }
.aw-wire { border: 1px solid var(--line); border-radius: var(--radius-panel); overflow: hidden; }
.aw-wire__row { display: grid; grid-template-columns: 80px 1fr; gap: var(--space-4); padding: 9px 13px; font-size: var(--step-micro); margin: 0; }
.aw-wire__row + .aw-wire__row { border-top: 1px solid var(--line); }
.aw-wire__row dt { font-family: var(--mono); color: var(--muted); }
.aw-wire__row dd { color: var(--ink); margin: 0; }
.aw-wire__row dd.mono { font-family: var(--mono); }
.aw-wire__amt { display: grid; grid-template-columns: 80px 1fr; gap: var(--space-4); padding: 11px 13px; background: var(--tint); border-top: 1px solid var(--line); margin: 0; }
.aw-wire__amt dt { font-family: var(--mono); color: var(--muted); font-size: var(--step-micro); align-self: center; }
.aw-wire__amt dd { font-size: var(--step-h3); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; margin: 0; }
.aw-wire__note { margin-top: var(--space-3); padding: 9px 12px; background: var(--accent-blue-quiet);
                 border-left: 2px solid var(--accent-blue); border-radius: var(--radius-row);
                 font-size: var(--step-micro); color: var(--ink); line-height: 1.5; }

/* ---- 7. internal knowledge ---- */
.aw-kb__files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-4); }
.aw-kb__file { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-soft); background: var(--btn-quiet);
               border-radius: var(--radius-row); padding: 4px 9px; }
.aw-kb__more { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); align-self: center; }
.aw-kb__find { font-size: var(--step-small); color: var(--ink-soft); line-height: 1.55; }
.aw-kb__find b { color: var(--ink); font-weight: 600; }

/* ---- 8. decision ---- */
.aw-dec__q { font-size: var(--step-small); font-weight: 600; color: var(--ink); margin-bottom: var(--space-4); }
.aw-dec__opt { border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 11px 13px; }
.aw-dec__opt + .aw-dec__opt { margin-top: 8px; }
.aw-dec__head { display: flex; align-items: center; gap: 8px; font-size: var(--step-small); font-weight: 600; color: var(--ink); }
.aw-dec__why { font-size: var(--step-micro); color: var(--ink-soft); margin-top: 3px; line-height: 1.45; }
.aw-dec__why .no { color: var(--muted); }

/* ---- 9. digest ---- */
.aw-dg__h { font-size: var(--step-small); font-weight: 600; color: var(--ink); margin-bottom: 11px; }
.aw-dg__l { font-size: var(--step-micro); color: var(--ink-soft); padding: 7px 0 7px 16px; position: relative; line-height: 1.5; }
.aw-dg__l::before { content:""; position:absolute; left:0; top:0.95em; width:7px; height:2px; background: var(--accent); }
.aw-dg__l b { color: var(--ink); font-weight: 600; }
.aw-dg__next { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--space-4); }

@media (max-width: 560px) {
  .aw__toolbar { flex-wrap: wrap; }
  .aw-run__row, .aw-week__c { font-size: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .aw__status--live i, .aw-run__st--now { animation: none; }
  .aw__status--live i { box-shadow: 0 0 0 3px var(--accent-quiet); }
}

/* =============================================================== pricing plan */
/* One pricing card, used everywhere — replaced four divergent components
   (.tier, .pricing-card, .price-block, .way). In a comparison the recommended
   plan is a full accent-blue fill (Callen: blue for the primary plan); a lone
   plan is neutral. --ink on blue is 7.9:1, so all copy and the button stay ink. */
.plan-grid { display: grid; gap: var(--space-6); align-items: stretch; }
.plan-grid--1 { max-width: 30rem; margin-inline: auto; }
.plan-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 60rem; margin-inline: auto; }
.plan-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 880px) { .plan-grid--2, .plan-grid--3 { grid-template-columns: minmax(0, 1fr); max-width: 32rem; } }

.plan { display: flex; flex-direction: column; text-align: left;
        border: 1px solid var(--line); border-radius: var(--radius-panel); padding: var(--space-7) var(--space-6); }
.plan__ribbon { align-self: flex-start; font-family: var(--mono); font-size: var(--step-eyebrow); font-weight: 700;
                letter-spacing: 0.1em; text-transform: uppercase; background: var(--ink); color: var(--ground);
                border-radius: var(--radius-pill); padding: 4px 12px; margin-bottom: 16px; }
.plan__eyebrow { font-family: var(--mono); font-size: var(--step-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.plan__name { font-size: var(--step-h3); margin-bottom: 12px; }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.plan__amount { font-size: var(--step-stat); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan__unit { font-family: var(--mono); font-size: var(--step-eyebrow); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.plan__setup { font-size: var(--step-micro); color: var(--muted); margin-top: 8px; }
.plan__pitch { font-size: var(--step-small); color: var(--ink-soft); line-height: 1.6; margin-top: 16px; }
.plan__features { list-style: none; margin: 20px 0 24px; padding: 0; }
.plan__features li { padding: 8px 0; font-size: var(--step-small); color: var(--ink-soft); border-top: 1px solid var(--line); display: flex; gap: 10px; }
.plan__features li::before { content: "\2713"; color: var(--ink); font-weight: 700; flex: none; }
.plan .btn-primary, .plan .btn-ghost { display: block; text-align: center; margin-top: auto; }
.plan__fine { font-size: var(--step-micro); color: var(--muted); margin-top: 14px; }

.plan--primary { background: var(--accent-blue); border-color: var(--accent-blue); }
.plan--primary :is(.plan__eyebrow, .plan__unit, .plan__setup) { color: rgba(15, 15, 15, 0.68); }
.plan--primary .plan__features li { border-color: rgba(15, 15, 15, 0.18); color: var(--ink); }
.plan--primary .btn-primary { background: var(--ink); color: var(--ground); }
.plan--primary .btn-primary:hover { background: #000; color: var(--ground); }

/* A whole-width fine-print line under a plan grid. */
.plan-fine { text-align: center; font-size: var(--step-micro); color: var(--muted); margin-top: var(--space-5); }