/* =============================================================================
   Peloras marketing site
   =============================================================================
   Standalone. No build step, no framework, no product code. Lives at
   peloras.dev; the product lives at app.peloras.dev and shares nothing with
   this but the design system.

   Palette values are copied from apps/web/app/tokens.css rather than imported,
   because importing across a deployment boundary would couple a marketing page
   to the product's build.

   SHAPE AND WEIGHT. The first build of this site read as soft. That came from
   three things, and all three are fixed here rather than softened further:
   an 18px corner radius on everything, coloured glow shadows under buttons and
   the brand mark, and a 62px 700-weight display. The rule now is a tight
   radius scale topped out at 10px, hairlines doing the work that drop shadows
   were doing, and display type set at 600 with tighter tracking. Enterprise
   software looks expensive because it is precise, not because it is rounded.
   ============================================================================= */

:root {
  /* ---- Surfaces ---------------------------------------------------------- */
  --surface-00: oklch(0.99 0.003 268);
  --canvas: oklch(0.975 0.005 268);
  --surface-sunken: oklch(0.955 0.006 268);
  --surface-raised: #ffffff;
  --hairline: oklch(0.92 0.008 268);
  --hairline-soft: oklch(0.945 0.006 268);
  --border-300: oklch(0.80 0.012 268);

  /* ---- Ink --------------------------------------------------------------- */
  --ink-400: oklch(0.62 0.018 268);
  --ink-600: oklch(0.46 0.020 268);
  --ink-900: oklch(0.22 0.025 268);
  --midnight: oklch(0.15 0.028 262);

  /* ---- Accent, Violet Aurora --------------------------------------------- */
  --g1a: oklch(0.66 0.18 292);
  --g1b: oklch(0.50 0.20 266);
  --brand: oklch(0.55 0.20 274);
  --brand-deep: oklch(0.44 0.19 272);
  --brand-tint: color-mix(in oklch, var(--brand) 9%, white);
  --brand-shadow: rgba(96, 72, 226, 0.55);

  /* ---- The Midnight band ------------------------------------------------- */
  --nav-top: oklch(0.245 0.042 274);
  --nav-bot: oklch(0.155 0.028 262);
  --nav-glow: radial-gradient(120% 150% at 10% -10%, oklch(0.36 0.10 288) 0%, transparent 55%),
    radial-gradient(90% 120% at 92% 0%, oklch(0.30 0.09 232) 0%, transparent 52%);

  /* ---- Status ------------------------------------------------------------ */
  --ok-text: oklch(0.40 0.11 160);
  --ok-bg: oklch(0.965 0.035 162);
  --ok-border: oklch(0.885 0.055 160);
  --warn-text: oklch(0.43 0.10 68);
  --warn-bg: oklch(0.975 0.04 88);
  --warn-border: oklch(0.90 0.07 78);

  /* ---- Type -------------------------------------------------------------- */
  --font-ui: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --font-data: "Azeret Mono", ui-monospace, SFMono-Regular, monospace;

  /* ---- Radius ------------------------------------------------------------
     Four steps, and nothing on this site is allowed a fifth. 10px is the
     ceiling: it is the largest radius that still reads as a machined edge
     rather than a bubble. --r-dot exists only for genuine circles. */
  --r-1: 3px;
  --r-2: 5px;
  --r-3: 8px;
  --r-4: 10px;
  --r-dot: 50%;

  /* ---- Elevation ---------------------------------------------------------
     Hairline first, shadow second. No inset white highlight and no coloured
     glow: both are what made the previous build look lit from underneath,
     which is a consumer-app treatment. */
  --sh-1: 0 1px 1px rgba(14, 16, 32, 0.035);
  --sh-2: 0 1px 2px rgba(14, 16, 32, 0.05), 0 6px 14px -10px rgba(14, 16, 32, 0.20);
  --sh-pop: 0 2px 4px rgba(14, 16, 32, 0.06), 0 18px 40px -22px rgba(14, 16, 32, 0.34);

  /* ---- Motion ------------------------------------------------------------
     One decelerating curve, used everywhere, with no overshoot anywhere in it.
     Durations are short on purpose: a 300ms hover reads as a toy. */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 110ms;
  --t: 170ms;

  --shell: 1120px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 132px;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink-900);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.008em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }

:where(a, button, input, [role="button"]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-2);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 28px; }
.section { padding: clamp(68px, 8vw, 104px) 0; }
.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* =============================================================================
   Type
   =============================================================================
   Display drops from 62px/700 to 52px/600 and tightens. The old setting was
   the single loudest thing on the page and it read as a landing page rather
   than a product.
   ============================================================================= */
.display {
  margin: 0;
  font-size: clamp(33px, 4.1vw, 51px);
  line-height: 1.07;
  font-weight: 600;
  letter-spacing: -0.028em;
}
.h2 {
  margin: 0;
  font-size: clamp(24px, 2.5vw, 32px);
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -0.024em;
}
.h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.018em; line-height: 1.3; }
.lede { font-size: clamp(16px, 1.35vw, 18px); line-height: 1.6; color: var(--ink-600); font-weight: 400; }
.band-dark .lede { color: rgba(255, 255, 255, 0.78); }

/* -----------------------------------------------------------------------------
   Small text.
   -----------------------------------------------------------------------------
   Five named roles, each with a decided weight, size, tracking and colour. The
   previous build had small text in four places with four accidental settings,
   which is what made it read as filler. Nothing on this site sets a one-off
   font-size below 14px outside this block.
   --------------------------------------------------------------------------- */

/* Section label. Mono, sentence case, always preceded by a short rule, which
   is what keeps it from looking like a stray line of text. Never uppercase. */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  font-family: var(--font-data);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ink-400);
}
.eyebrow::before {
  content: ""; width: 18px; height: 1px; flex-shrink: 0;
  background: var(--border-300);
}
.band-dark .eyebrow { color: rgba(255, 255, 255, 0.55); }
.band-dark .eyebrow::before { background: rgba(255, 255, 255, 0.28); }

/* A qualifying sentence under a heading or a button. Slightly heavier than
   body text and a step down in size, so it reads as deliberate rather than as
   body copy that got left behind. */
.note {
  margin: 0;
  font-size: 13.5px; font-weight: 500;
  letter-spacing: -0.004em; line-height: 1.5;
  color: var(--ink-400);
}
.band-dark .note { color: rgba(255, 255, 255, 0.68); }

/* Machine facts inside a card: dates, counts, statuses. Mono and tabular so
   columns of them line up. Tabular figures are scoped HERE and nowhere else,
   because Schibsted Grotesk puts the comma and full stop inside its tabular
   set and applying it to prose pads every piece of punctuation. */
.meta {
  font-family: var(--font-data);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-400);
}

/* A line that explains the thing above it. Sits under visuals and tables. */
.caption {
  margin: 12px 0 0;
  font-size: 12.5px; font-weight: 500;
  letter-spacing: -0.002em;
  color: var(--ink-400);
}

/* A hard, small, rectangular label. Not a pill: the pill is what made the old
   hero badge read as a sticker. */
/* Set on the brand face at a real weight, not in mono. Wide-tracked monospace
   is what every default badge component looks like; a bold grotesk at close
   tracking reads as a decision somebody made. The tracking is slightly
   POSITIVE, but only enough to keep a 700 weight from closing up at 12px. */
.badge {
  display: inline-flex; align-items: center;
  padding: 6px 11px; border-radius: var(--r-2);
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.008em;
  color: rgba(255, 255, 255, 0.94);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.badge-light {
  color: var(--ink-600);
  background: var(--surface-raised);
  border-color: var(--hairline);
}

.muted { color: var(--ink-400); }

/* =============================================================================
   Navigation
   ============================================================================= */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner { display: flex; align-items: center; gap: 28px; height: 62px; }

/* -----------------------------------------------------------------------------
   The mark. Flat, square-shouldered, no gradient and no coloured glow beneath
   it. The old mark was a gradient tile with a rotated square inside it and a
   violet halo, which is the most recognisably friendly-startup object on a
   page. This one is a solid near-black tile with a precise offset aperture:
   monochrome by default, with the accent left to do work elsewhere.
   --------------------------------------------------------------------------- */
.wordmark { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.mark {
  position: relative;
  width: 26px; height: 26px; border-radius: var(--r-2);
  background: var(--ink-900);
  flex-shrink: 0;
}
/* A stem with two arms of different weight: asymmetric, so it does not read as
   the four-square grid icon that sits in the corner of every dashboard. */
.mark i { position: absolute; display: block; border-radius: 1px; background: #fff; }
.mark i:nth-child(1) { left: 7px;  top: 7px;    width: 3px; height: 12px; }
.mark i:nth-child(2) { left: 11.5px; top: 7px;  width: 7.5px; height: 3px; opacity: 0.5; }
.mark i:nth-child(3) { left: 11.5px; top: 16px; width: 7.5px; height: 3px; background: var(--g1a); }
.band-dark .mark { background: rgba(255, 255, 255, 0.12); }
.wordmark span { font-size: 16px; font-weight: 600; letter-spacing: -0.025em; }

.nav-links { display: flex; align-items: center; gap: 2px; margin-left: 4px; }
.nav-link {
  padding: 7px 10px; border-radius: var(--r-2);
  font-size: 14px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--ink-600);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-link:hover { color: var(--ink-900); background: var(--surface-sunken); }
.nav-link[aria-current="page"] { color: var(--ink-900); font-weight: 600; }
.nav-spacer { flex: 1; }

.menu { position: relative; }
.menu-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px; border: 0; border-radius: var(--r-2);
  background: transparent; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--ink-600);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.menu-trigger:hover, .menu[data-open="true"] .menu-trigger { color: var(--ink-900); background: var(--surface-sunken); }
.menu-trigger svg { transition: transform var(--t) var(--ease); }
.menu[data-open="true"] .menu-trigger svg { transform: rotate(180deg); }

.menu-panel {
  position: absolute; top: calc(100% + 9px); left: -6px;
  width: 336px; padding: 6px;
  border-radius: var(--r-4);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  box-shadow: var(--sh-pop);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
}
.menu[data-open="true"] .menu-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-item { display: block; padding: 10px 11px; border-radius: var(--r-2); transition: background var(--t-fast) var(--ease); }
.menu-item:hover { background: var(--surface-sunken); }
.menu-item b { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: -0.015em; }
.menu-item span { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--ink-400); line-height: 1.45; }

/* =============================================================================
   Buttons. Flat fills, tight corners, no halo.
   ============================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 17px; border-radius: var(--r-2);
  font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: -0.012em;
  cursor: pointer; border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.btn-primary { color: #fff; background: var(--brand); border-color: var(--brand-deep); }
.btn-primary:hover { background: var(--brand-deep); }
.btn-quiet {
  color: var(--ink-900); background: var(--surface-raised);
  border-color: var(--border-300); box-shadow: var(--sh-1);
}
.btn-quiet:hover { background: var(--surface-sunken); }
.btn-onDark { color: var(--ink-900); background: #fff; }
.btn-onDark:hover { background: rgba(255, 255, 255, 0.88); }
.btn-ghostDark {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
}
.btn-ghostDark:hover { background: rgba(255, 255, 255, 0.11); }
.btn-sm { padding: 7px 13px; font-size: 13px; }

/* =============================================================================
   Dark bands
   =============================================================================
   The masthead glow stays, at a lower blob opacity, over a fine grid. The grid
   is the enterprise half of this treatment: it gives the surface a measured
   structure that a pure gradient does not have.
   ============================================================================= */
.band-dark {
  position: relative; overflow: hidden;
  color: #fff;
  background: var(--nav-glow), linear-gradient(170deg, var(--nav-top), var(--nav-bot));
}
.band-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
}
.band-dark::after {
  content: ""; position: absolute; top: -240px; right: -80px;
  width: 560px; height: 560px; border-radius: var(--r-dot);
  background: radial-gradient(circle, var(--brand-shadow) 0%, transparent 66%);
  filter: blur(30px); opacity: 0.34; pointer-events: none;
}
.band-dark > * { position: relative; z-index: 1; }

/* =============================================================================
   Hero
   ============================================================================= */
.hero { padding: clamp(68px, 8vw, 104px) 0 clamp(96px, 11vw, 150px); }
/* The one-line positioning statement above the headline. Sized between the
   headline and the body, at a weight that holds its own against both, and
   given room to sit on one or two lines rather than three. */
.hero-intro {
  max-width: 46ch; margin: 18px 0 0;
  font-size: clamp(15.5px, 1.3vw, 17px); font-weight: 500;
  letter-spacing: -0.014em; line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}
.hero .display { margin-top: 14px; max-width: 19ch; }
.hero .lede { max-width: 54ch; margin: 20px 0 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hero-note { margin-top: 16px; }

/* Narrower than the page shell, and lifted far enough into the band above that
   most of the card sits over the field rather than below it. */
.lift { margin-top: -290px; position: relative; z-index: 2; max-width: 820px; }

/* =============================================================================
   The email thread. Unchanged in markup, copy and motion from the first build;
   only the shared radius and shadow tokens moved underneath it.
   ============================================================================= */
.thread {
  border-radius: var(--r-4);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  box-shadow: var(--sh-pop);
  overflow: hidden;
}
.thread-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-sunken);
}
.thread-bar b { font-size: 13px; font-weight: 600; letter-spacing: -0.015em; }
.thread-bar em { font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--ink-400); }
.thread-bar .kicker { margin-left: auto; }
.kicker {
  font-family: var(--font-data);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-400);
}
.dotrow { display: flex; gap: 5px; }
.dotrow i { width: 7px; height: 7px; border-radius: var(--r-dot); background: var(--border-300); display: block; }

.thread-body { padding: 22px 18px 24px; display: flex; flex-direction: column; gap: 14px; }
.msg { display: flex; gap: 12px; align-items: flex-start; }
[data-js="true"] .msg,
[data-js="true"] .verdict { opacity: 0; }
[data-js="true"] .thread[data-play="true"] .msg,
[data-js="true"] .thread[data-play="true"] .verdict {
  animation: rise 520ms cubic-bezier(0.22, 0.85, 0.3, 1) forwards;
}
.thread[data-play="true"] .msg:nth-child(1) { animation-delay: 80ms; }
.thread[data-play="true"] .msg:nth-child(2) { animation-delay: 900ms; }
.thread[data-play="true"] .msg:nth-child(3) { animation-delay: 1700ms; }
.thread[data-play="true"] .msg:nth-child(4) { animation-delay: 2500ms; }
.thread[data-play="true"] .verdict { animation-delay: 3300ms; }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.who {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--r-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-data); font-size: 10.5px; font-weight: 600;
  color: var(--ink-600);
  background: var(--surface-sunken);
  border: 1px solid var(--hairline);
}
.msg[data-from="peloras"] .who { color: #fff; border-color: var(--brand-deep); background: var(--brand); }

.bubble { min-width: 0; }
.bubble-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0; }
.bubble-head b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.015em; }
.bubble-head time { font-family: var(--font-data); font-size: 10.5px; font-variant-numeric: tabular-nums; color: var(--ink-400); }
.bubble p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-600); max-width: 62ch; }
.msg[data-from="peloras"] .bubble p { color: var(--ink-900); }

.trace { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 5px; }
.trace li {
  font-family: var(--font-data); font-size: 10.5px; font-weight: 500; letter-spacing: 0.02em;
  padding: 3px 7px; border-radius: var(--r-1);
  color: var(--ink-600); background: var(--surface-sunken); border: 1px solid var(--hairline);
}

.verdict {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 0; padding: 12px 14px; border-radius: var(--r-3);
  background: var(--ok-bg); border: 1px solid var(--ok-border); color: var(--ok-text);
}
.verdict b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.015em; }
.verdict span { font-family: var(--font-data); font-size: 10.5px; font-variant-numeric: tabular-nums; }

/* =============================================================================
   Capability sections. Heading block on top, working demo underneath.
   ============================================================================= */
.cap { padding: clamp(60px, 7vw, 92px) 0; border-top: 1px solid var(--hairline); }
.cap-alt { background: var(--surface-00); }
.cap-head { max-width: 62ch; }
.cap-head .h2 { max-width: 22ch; }
.cap-head .lede { margin: 14px 0 0; max-width: 58ch; }
.cap-demo { margin-top: 32px; }

/* Shared frame for all three demos. The ROW of controls above each one is what
   tells a visitor it is operable; a demo that looks like a screenshot never
   gets clicked. */
.demo {
  border: 1px solid var(--hairline); border-radius: var(--r-4);
  background: var(--surface-raised); overflow: hidden;
}
.demo-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 16px; border-bottom: 1px solid var(--hairline);
  background: var(--surface-sunken);
}
.demo-bar b { font-size: 13px; font-weight: 600; letter-spacing: -0.015em; }
.demo-bar .meta { margin-left: auto; }
.demo-split { display: grid; grid-template-columns: 1.05fr 0.95fr; }
.demo-pane { padding: 18px; min-width: 0; }
.demo-pane + .demo-pane { border-left: 1px solid var(--hairline); background: var(--surface-00); }
.pane-title {
  margin: 0 0 12px; font-size: 12.5px; font-weight: 600;
  letter-spacing: -0.008em; color: var(--ink-900);
}

/* ---- Demo one: a call turning into entries -------------------------------- */
.line { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 6px 0; }
.line .who-s {
  align-self: start; margin-top: 2px;
  padding: 2px 0; border-radius: var(--r-1);
  background: var(--surface-sunken); border: 1px solid var(--hairline);
  font-family: var(--font-data); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.02em; color: var(--ink-600); text-align: center;
}
.line p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-600); }

/* The clickable phrase. A real button, so it works from a keyboard and
   announces its state; styled as a marked-up phrase, not as a control. */
.hl {
  display: inline; padding: 1px 4px; margin: 0 -1px;
  border: 0; border-radius: var(--r-1);
  font: inherit; color: var(--ink-900); text-align: left;
  background: var(--brand-tint);
  box-shadow: inset 0 -1px 0 color-mix(in oklch, var(--brand) 32%, transparent);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.hl:hover { background: color-mix(in oklch, var(--brand) 18%, white); }
.hl[aria-pressed="true"] { background: var(--brand); color: #fff; box-shadow: none; }

.pulls { display: grid; gap: 8px; }
.pull {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start;
  padding: 11px 12px; border-radius: var(--r-3);
  background: var(--surface-raised); border: 1px solid var(--hairline);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
    transform var(--t) var(--ease);
}
.pull[data-on="true"] {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand) 12%, transparent);
}
.pull dt { font-size: 11px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-400); font-family: var(--font-data); }
.pull dd { margin: 3px 0 0; font-size: 14px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink-900); }
.pull .flagline { margin: 5px 0 0; font-size: 12.5px; font-weight: 500; color: var(--warn-text); }

/* ---- Demo two: the ATS record -------------------------------------------- */
.events { display: grid; gap: 4px; }
.event {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  width: 100%; text-align: left; cursor: pointer;
  padding: 11px 12px; border-radius: var(--r-3);
  font-family: inherit;
  background: transparent; border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.event:hover { background: var(--surface-sunken); }
.event[aria-selected="true"] {
  background: var(--surface-raised); border-color: var(--hairline); box-shadow: var(--sh-1);
}
.event b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink-900); }
.event span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-400); }
.event i {
  width: 7px; height: 7px; border-radius: var(--r-dot); display: block;
  background: var(--border-300);
}
.event[aria-selected="true"] i { background: var(--brand); }

.record { display: grid; }
.field {
  display: grid; grid-template-columns: 38% 1fr; gap: 12px; align-items: baseline;
  padding: 9px 8px; border-radius: var(--r-2);
  border-bottom: 1px solid var(--hairline-soft);
}
.field:last-child { border-bottom: 0; }
.field dt { font-size: 12.5px; font-weight: 500; color: var(--ink-400); }
.field dd { margin: 0; font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-900); }
.field[data-hit="true"] { background: color-mix(in oklch, var(--brand) 7%, white); }
.field[data-hit="true"] dd { color: var(--brand-deep); font-weight: 600; }
.field[data-hit="true"] dd::after {
  content: "written just now";
  display: block; margin-top: 2px;
  font-family: var(--font-data); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.05em; color: var(--ink-400);
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: var(--r-1);
  font-family: var(--font-data); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.chip i { width: 5px; height: 5px; border-radius: var(--r-dot); display: block; }
.chip[data-tone="ok"] { color: var(--ok-text); background: var(--ok-bg); border: 1px solid var(--ok-border); }
.chip[data-tone="ok"] i { background: oklch(0.66 0.14 158); }
.chip[data-tone="warn"] { color: var(--warn-text); background: var(--warn-bg); border: 1px solid var(--warn-border); }
.chip[data-tone="warn"] i { background: oklch(0.72 0.14 72); }
.chip[data-tone="idle"] { color: var(--ink-600); background: var(--surface-sunken); border: 1px solid var(--hairline); }
.chip[data-tone="idle"] i { background: var(--border-300); }

/* =============================================================================
   Comparison
   =============================================================================
   Fixed table layout with declared column widths, and no horizontal scroll at
   any width. The previous build set a min-width on the table inside an
   overflow-x container AND made the header sticky: the header then floated
   over the first row, chopping it, and the leading column scrolled out of
   reach with nothing pinning it. Both are gone.
   ============================================================================= */
.cmp {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 30px;
}
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 18px 20px; }
.cmp thead th {
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink-900);
  border-bottom: 1px solid var(--border-300); padding-bottom: 13px;
}
.cmp thead th .meta { display: block; margin-top: 5px; line-height: 1.45; }
.cmp tbody th {
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.018em; color: var(--ink-900);
}
.cmp tbody td { font-size: 14px; line-height: 1.55; color: var(--ink-600); }
.cmp tbody tr + tr th, .cmp tbody tr + tr td { border-top: 1px solid var(--hairline); }

/* One visual claim, made once: the Peloras column is the only one on a raised
   surface. A tick in every cell is the cheap version of this. */
.cmp .ours {
  background: var(--surface-raised); color: var(--ink-900);
  box-shadow: 1px 0 0 var(--border-300), -1px 0 0 var(--border-300);
}
.cmp thead .ours {
  border-bottom-color: var(--brand);
  box-shadow: 1px 0 0 var(--border-300), -1px 0 0 var(--border-300),
    inset 0 2px 0 var(--brand);
  padding-top: 20px;
}
.cmp tbody tr:last-child .ours {
  box-shadow: 1px 0 0 var(--border-300), -1px 0 0 var(--border-300),
    inset 0 -1px 0 var(--border-300);
}

/* =============================================================================
   Control section
   ============================================================================= */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
.checks { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 15px; }
.checks li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; }
.checks svg { margin-top: 4px; color: var(--brand); }
.checks b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.015em; }
.checks p { margin: 3px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-600); }

.panel {
  border-radius: var(--r-4); padding: 6px 18px 14px;
  background: var(--surface-raised); border: 1px solid var(--hairline); box-shadow: var(--sh-2);
}
.setting {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-top: 1px solid var(--hairline-soft);
}
.setting:first-of-type { border-top: 0; }
.setting b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.015em; }
.setting p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-400); }

/* A real control, not a picture of one. */
.switch {
  position: relative; flex-shrink: 0;
  width: 36px; height: 20px; padding: 0; border-radius: var(--r-4);
  border: 1px solid var(--border-300); background: var(--surface-sunken);
  cursor: pointer;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: var(--r-dot); background: #fff;
  box-shadow: var(--sh-1);
  transition: transform var(--t) var(--ease);
}
.switch[aria-checked="true"] { background: var(--brand); border-color: var(--brand-deep); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }

.consequence {
  margin: 10px 0 0; padding: 11px 13px; border-radius: var(--r-3);
  background: var(--warn-bg); border: 1px solid var(--warn-border);
  font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--warn-text);
}
.consequence[data-tone="ok"] { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); }

/* =============================================================================
   Closing band and footer
   ============================================================================= */
.close-band { padding: clamp(72px, 8vw, 100px) 0; text-align: center; }
.close-band .h2 { max-width: 22ch; margin: 0 auto; }
.close-band .lede { max-width: 54ch; margin: 16px auto 0; }
.close-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.close-band .note { margin-top: 16px; }

.foot { padding: 28px 0; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.foot-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot-links { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }
.foot a, .foot p {
  font-size: 12.5px; font-weight: 500; letter-spacing: -0.002em;
  color: rgba(255, 255, 255, 0.5);
}
.foot a { transition: color var(--t-fast) var(--ease); }
.foot a:hover { color: #fff; }
.foot p { margin: 0; }

/* =============================================================================
   Agency page
   ============================================================================= */
.hero-light { padding: clamp(58px, 6.5vw, 84px) 0 clamp(46px, 5vw, 64px); }
.hero-light .display { max-width: 19ch; }
.hero-light .lede { max-width: 58ch; margin: 18px 0 0; }

.stage-bar {
  position: sticky; top: 62px; z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(150%) blur(12px);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.stage-inner { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.stage-inner::-webkit-scrollbar { display: none; }
.stage-inner a {
  padding: 14px 13px; font-size: 13.5px; font-weight: 500; white-space: nowrap;
  letter-spacing: -0.01em; color: var(--ink-400);
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.stage-inner a:hover { color: var(--ink-900); }
.stage-inner a.on { color: var(--ink-900); font-weight: 600; border-bottom-color: var(--brand); }

.feature { padding: clamp(56px, 6.5vw, 84px) 0; border-top: 1px solid var(--hairline); }
.feature:first-of-type { border-top: 0; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.feature[data-flip="true"] { background: var(--surface-00); }
.feature .h2 { max-width: 18ch; }
.feature .lede { margin: 16px 0 0; max-width: 52ch; }

.bullets { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.bullets li {
  display: grid; grid-template-columns: 7px 1fr; gap: 13px; align-items: start;
  font-size: 14.5px; color: var(--ink-600); line-height: 1.55;
}
.bullets li::before {
  content: ""; width: 5px; height: 5px; margin-top: 9px; border-radius: var(--r-1);
  background: var(--brand);
}

.vis {
  border-radius: var(--r-4); padding: 18px;
  background: var(--surface-raised); border: 1px solid var(--hairline); box-shadow: var(--sh-2);
}
.feature[data-flip="true"] .vis { background: var(--surface-sunken); box-shadow: none; }
.vis-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.vis-head b { font-size: 13px; font-weight: 600; letter-spacing: -0.015em; }
.vis-head .meta { margin-left: auto; }

.rows { display: grid; }
.row {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  padding: 12px 2px; border-bottom: 1px solid var(--hairline-soft);
}
.row:last-child { border-bottom: 0; }
.row b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.015em; display: block; }
.row .meta { display: block; margin-top: 2px; }

.slots { display: grid; gap: 7px; margin-top: 14px; }
.slot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 13px; border-radius: var(--r-3);
  border: 1px solid var(--hairline); background: var(--surface-raised);
  font-size: 13.5px; font-weight: 500;
}
.slot[data-picked="true"] {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand) 12%, transparent);
}

.quote { max-width: 56ch; margin: 0; }
/* Scoped to the DIRECT child. The attribution underneath carries a .note, and
   a descendant selector here set that at quote size too. */
.quote > p { margin: 0; font-size: clamp(18px, 1.9vw, 23px); line-height: 1.45; letter-spacing: -0.02em; font-weight: 500; color: var(--ink-900); }
.quote footer { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.quote footer b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-900); letter-spacing: -0.012em; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* =============================================================================
   Narrow screens
   ============================================================================= */
@media (max-width: 900px) {
  .shell { padding: 0 20px; }
  .two, .feature-grid, .demo-split { grid-template-columns: 1fr; }
  .two, .feature-grid { gap: 32px; }
  .demo-pane + .demo-pane { border-left: 0; border-top: 1px solid var(--hairline); }
  .feature[data-flip="true"] .feature-grid > .vis { order: 2; }
  .lift { margin-top: -210px; }

  /* The nav rewraps rather than disappearing: wordmark and call to action on
     one line, links scrolling underneath. */
  .nav-inner { flex-wrap: wrap; height: auto; padding: 11px 0 0; gap: 11px; }
  .nav-spacer { display: none; }
  .nav-inner > .btn { margin-left: auto; }
  .nav-links {
    order: 3; width: 100%; margin-left: 0; padding: 3px 0;
    overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--hairline);
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-link, .menu-trigger { white-space: nowrap; }
  .menu { position: static; }
  .menu-panel { position: fixed; top: 108px; left: 14px; right: 14px; width: auto; }
  .stage-bar { top: 100px; }
  html { scroll-padding-top: 162px; }
}

/* -----------------------------------------------------------------------------
   The comparison table restacks. It does NOT scroll sideways: a table a
   visitor has to drag is a table they do not read. Each scenario becomes its
   own block with the three answers labelled underneath it.
   --------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cmp tbody tr {
    margin-top: 14px; padding: 4px 0 0;
    border: 1px solid var(--hairline); border-radius: var(--r-4);
    background: var(--surface-raised); overflow: hidden;
  }
  .cmp tbody th {
    padding: 14px 16px 10px; font-size: 15px;
    border-bottom: 1px solid var(--hairline);
  }
  .cmp tbody td { padding: 12px 16px; border-top: 0; }
  .cmp tbody td::before {
    content: attr(data-col);
    display: block; margin-bottom: 4px;
    font-family: var(--font-data); font-size: 10px; font-weight: 500;
    letter-spacing: 0.05em; color: var(--ink-400);
  }
  .cmp tbody tr + tr th, .cmp tbody tr + tr td { border-top: 0; }
  .cmp tbody tr + tr td { border-top: 1px solid var(--hairline-soft); }
  .cmp .ours { box-shadow: none; background: var(--brand-tint); }
  .cmp .ours::before { color: var(--brand-deep); }
}



/* =============================================================================
   The capability index. Four columns divided by hairlines, not four cards.
   ============================================================================= */
.cap-index {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 34px; border-top: 1px solid var(--border-300);
}
.cap-card {
  padding: 20px 18px 22px;
  border-left: 1px solid var(--hairline);
  transition: background var(--t-fast) var(--ease);
}
.cap-card:first-child { border-left: 0; }
.cap-card:hover { background: var(--surface-00); }
.cap-card b {
  display: block; margin-top: 12px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.018em;
}
.cap-card:hover b { color: var(--brand-deep); }
.cap-card > span:last-child {
  display: block; margin-top: 5px;
  font-size: 13.5px; line-height: 1.5; color: var(--ink-600);
}

@media (max-width: 900px) {
  .cap-index { grid-template-columns: 1fr; }
  .cap-card { border-left: 0; border-bottom: 1px solid var(--hairline); padding: 16px 0 18px; }
  .cap-card:last-child { border-bottom: 0; }
}

/* =============================================================================
   The mail frame. How you work with Peloras, stated as an email header.
   =============================================================================
   Sits where the email thread used to sit, straddling the bottom of the hero
   band. The point it makes is structural rather than decorative: Peloras is a
   line in the Cc field, next to the humans, in the agency's own domain.
   ============================================================================= */
.mailframe {
  border-radius: var(--r-4);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  box-shadow: var(--sh-pop);
  overflow: hidden;
}
.mail-head { padding: 18px 20px 20px; border-bottom: 1px solid var(--hairline); }
.mail-row {
  display: grid; grid-template-columns: 62px 1fr; gap: 14px; align-items: baseline;
  padding: 7px 0;
}
.mail-row + .mail-row { border-top: 1px solid var(--hairline-soft); }
.mail-k {
  font-family: var(--font-data); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.04em; color: var(--ink-400);
}
.mail-v { font-size: 14px; font-weight: 500; letter-spacing: -0.012em; color: var(--ink-900); min-width: 0; }
.mail-v em { font-style: normal; font-weight: 400; color: var(--ink-400); margin-left: 3px; }
.mail-v b { font-weight: 600; }

/* The Peloras recipient. Same shape as a human recipient chip, deliberately,
   with only the accent to say which one it is. */
.rcpt {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 10px 3px 4px; border-radius: var(--r-4);
  background: var(--brand-tint); border: 1px solid color-mix(in oklch, var(--brand) 26%, transparent);
  font-size: 13px; font-weight: 600; letter-spacing: -0.012em; color: var(--brand-deep);
}
.rcpt i {
  width: 18px; height: 18px; border-radius: var(--r-1); flex-shrink: 0;
  background: var(--brand); position: relative;
}
.rcpt i::before, .rcpt i::after { content: ""; position: absolute; background: #fff; border-radius: 1px; }
.rcpt i::before { left: 5px; top: 4.5px; width: 2px; height: 9px; }
.rcpt i::after  { left: 8.5px; top: 4.5px; width: 5px; height: 2px; box-shadow: 0 5px 0 #fff; }
.rcpt em { font-style: normal; font-weight: 400; color: color-mix(in oklch, var(--brand-deep) 65%, white); }

/* The one beat of motion here: the chip arrives after the human recipients, the
   way it would if someone had just typed it in. */
[data-js="true"] .mailframe[data-mail] .rcpt { opacity: 0; }
[data-js="true"] .mailframe[data-mail][data-play="true"] .rcpt {
  animation: rcptIn 420ms var(--ease) 500ms forwards;
}
@keyframes rcptIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.mail-points { display: grid; grid-template-columns: repeat(3, 1fr); }
.mail-point { padding: 18px 20px; border-left: 1px solid var(--hairline); }
.mail-point:first-child { border-left: 0; }
.mail-point b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.015em; }
.mail-point p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-600); }

/* =============================================================================
   The call room. Peloras as a participant, not a file processor.
   ============================================================================= */
.callroom {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--hairline);
  background: var(--surface-00);
}
.seat {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 12px 7px 7px; border-radius: var(--r-3);
  background: var(--surface-raised); border: 1px solid var(--hairline);
}
.seat b { display: block; font-size: 13px; font-weight: 600; letter-spacing: -0.015em; }
.seat .meta { display: block; margin-top: 1px; }
.seat-av {
  width: 26px; height: 26px; border-radius: var(--r-2); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-data); font-size: 10px; font-weight: 600; font-style: normal;
  color: var(--ink-600); background: var(--surface-sunken); border: 1px solid var(--hairline);
}
.seat[data-agent] { border-color: color-mix(in oklch, var(--brand) 30%, transparent); background: var(--brand-tint); }
.seat[data-agent] .seat-av { color: #fff; background: var(--brand); border-color: var(--brand-deep); }
.seat[data-agent] b { color: var(--brand-deep); }

/* A level meter, not a spinner. A spinner says "loading"; this says "hearing
   something". It only moves while the call is running. */
.meter { display: flex; align-items: flex-end; gap: 2px; height: 16px; margin-left: 2px; }
.meter i {
  width: 2.5px; height: 4px; border-radius: 1px; display: block;
  background: color-mix(in oklch, var(--brand) 45%, white);
}
.callroom[data-state="ended"] .meter { display: none; }
.callroom[data-state="listening"] .meter i { animation: lvl 900ms ease-in-out infinite; background: var(--brand); }
.callroom[data-state="listening"] .meter i:nth-child(2) { animation-delay: 140ms; }
.callroom[data-state="listening"] .meter i:nth-child(3) { animation-delay: 300ms; }
.callroom[data-state="listening"] .meter i:nth-child(4) { animation-delay: 80ms; }
@keyframes lvl {
  0%, 100% { height: 4px; }
  50% { height: 14px; }
}

/* Which call. A segmented control rather than two demos stacked: the point is
   that it is the SAME agent on both, so they have to occupy the same frame. */
.seg {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 11px 18px; border-bottom: 1px solid var(--hairline);
  background: var(--surface-00);
}
.seg-btn {
  padding: 7px 13px; border-radius: var(--r-2);
  border: 1px solid transparent; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--ink-400);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.seg-btn:hover { background: var(--surface-sunken); color: var(--ink-900); }
.seg-btn[aria-selected="true"] {
  background: var(--surface-raised); border-color: var(--hairline);
  color: var(--ink-900); font-weight: 600; box-shadow: var(--sh-1);
}

.demo-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; border-top: 1px solid var(--hairline); background: var(--surface-sunken);
}
.demo-foot .meta { margin-left: auto; }

.line { grid-template-columns: 34px 28px 1fr; gap: 12px; }
.line-t { padding-top: 3px; }
[data-js="true"] .demo[data-call] .line,
[data-js="true"] .demo[data-call] .pull { opacity: 0; }
[data-js="true"] .demo[data-call][data-play="true"] .line,
[data-js="true"] .demo[data-call][data-play="true"] .pull {
  animation: rise 420ms var(--ease) forwards;
}

/* =============================================================================
   The ATS board. A card that actually moves between columns.
   ============================================================================= */
.board { padding: 16px 18px; border-bottom: 1px solid var(--hairline); background: var(--surface-00); }
.board-grid { position: relative; }
.board-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.board-cols span {
  padding: 8px 10px 58px; border-radius: var(--r-3);
  background: var(--surface-sunken); border: 1px solid var(--hairline);
  font-family: var(--font-data); font-size: 10px; font-weight: 500;
  letter-spacing: 0.04em; color: var(--ink-400);
}
.board-cols span[data-active="true"] { border-color: color-mix(in oklch, var(--brand) 32%, transparent); background: var(--brand-tint); color: var(--brand-deep); }

/* The card is positioned over the columns rather than inside one, so moving it
   is a transition on `left` instead of a DOM move with no animation. */
.board-card {
  position: absolute; top: 30px; left: 0;
  width: calc(25% - 6px); margin-left: 8px;
  padding: 6px 9px; border-radius: var(--r-2);
  background: var(--surface-raised); border: 1px solid var(--border-300);
  box-shadow: var(--sh-2);
  font-size: 12.5px; font-weight: 600; letter-spacing: -0.015em;
  transition: left 420ms var(--ease);
}
.board-card span:first-child { display: block; }
.board-card .meta { display: block; margin-top: 1px; font-size: 9.5px; }

/* =============================================================================
   An email Peloras sent, shown as an email.
   ============================================================================= */
.mailback {
  border-radius: var(--r-3); border: 1px solid var(--hairline);
  background: var(--surface-raised); overflow: hidden;
}
.mailback-head { padding: 12px 14px; border-bottom: 1px solid var(--hairline-soft); background: var(--surface-00); }
.mailback-head .mail-row { grid-template-columns: 46px 1fr; gap: 10px; padding: 4px 0; border: 0; }
.mailback-head .mail-v { font-size: 13px; }
.mailback-body { padding: 14px; }
.mailback-body p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-600); }
.mailback-body p + p { margin-top: 10px; }
.mailback-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 14px 14px; }

/* =============================================================================
   What Peloras did while nobody was working.
   ============================================================================= */
.bglog { margin: 0; padding: 0; list-style: none; display: grid; }
.bglog li {
  display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--hairline-soft);
}
.bglog li:last-child { border-bottom: 0; }
.bglog p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-600); }
.bglog li:last-child p { color: var(--ink-900); font-weight: 600; }
[data-js="true"] .demo[data-bg] .bglog li { opacity: 0; }
[data-js="true"] .demo[data-bg][data-play="true"] .bglog li { animation: rise 420ms var(--ease) forwards; }
[data-js="true"] .demo[data-bg] .mailback { opacity: 0; }
[data-js="true"] .demo[data-bg][data-play="true"] .mailback { animation: rise 460ms var(--ease) 2200ms forwards; }

@media (max-width: 900px) {
  .mail-points { grid-template-columns: 1fr; }
  .mail-point { border-left: 0; border-top: 1px solid var(--hairline); }
  .mail-point:first-child { border-top: 0; }
  /* The board keeps four columns at every width. Wrapping it to two rows
     would strand the card, which is positioned over the columns rather than
     inside one. */
  .board { padding: 14px; }
  .board-cols { gap: 5px; }
  .board-cols span { padding: 7px 6px 50px; font-size: 9px; letter-spacing: 0.02em; }
  .board-card { top: 26px; }
  .board-card { width: calc(25% - 3.75px); margin-left: 5px; padding: 7px 8px; font-size: 11.5px; }
}

/* =============================================================================
   The stage: one agent, across the whole workflow
   =============================================================================
   A plane of lanes receding in real perspective, each lane one open role, and
   one mark that crosses all of them. The meaning is structural rather than
   asserted: a single point lights the whole field.

   WHY LANES AND NOT AN ORBIT. Horizontal lanes sit under left-aligned type
   cleanly; a ring crosses letterforms diagonally and always costs either
   legibility or the centre of the composition. Lanes also carry a second
   reading for free, which is that a desk runs many roles at once.

   TIMING. One 18s cycle, and everything on this stage shares it. Each element
   is phase-shifted into that cycle with a NEGATIVE animation-delay rather than
   its own keyframes: a delay of -(18 - t) puts the element's flash at t
   seconds. That is what keeps eight lit segments, four labels and the mark in
   step with one set of keyframes each.

   The mark travels an SVG path in the plane's own coordinate space, so the 3D
   transform foreshortens it for free: it genuinely recedes rather than being
   drawn smaller. The waypoint distances in `travel` are the cumulative lengths
   of that polyline, and the time percentages hold it still at the four
   labelled waypoints.
   ============================================================================= */

/* The fine grid steps aside on the hero: the lanes are doing that job now. */
.band-stage::before { display: none; }

.stage {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}

/* The graphic is strongest in the empty right half and recedes behind the text
   column. This is a type-protection mask, not decoration: without it the lanes
   cross the lede at full strength and cost it contrast.

   It lives on a wrapper rather than on .stage because the LABELS must not be
   dimmed by it, and it cannot live on .plane, whose own mask runs in the
   plane's tilted local space rather than in screen space. */
.veil {
  position: absolute; inset: 0;
  /* perspective applies to direct children only, so it lives here, on the
     element that parents .plane, not on .stage. Both are per-scene: the camera
     is the main thing that tells the two instances apart. */
  perspective: var(--persp);
  perspective-origin: var(--porigin);
  -webkit-mask-image: var(--veilmask);
  mask-image: var(--veilmask);
}

.plane {
  position: absolute;
  left: 50%; bottom: var(--pbottom);
  /* Authored at twice the original scale. Doubling x and y scales the waypoint
     polyline uniformly, so the cumulative distances in `travel` are unchanged
     while the plane covers enough of the hero to sit behind the headline. */
  width: 2400px; height: 1280px; margin-left: -1200px;
  transform-origin: 50% 100%;
  transform: rotateX(calc(var(--tilt) + var(--ty, 0deg))) rotateZ(var(--tz, 0deg)) translateX(var(--tx, 0px));
  /* Local space, so "to top" is toward the far end of the plane. */
  /* The far end fades late. Cutting it at 82% dissolved every lane in the top
     of the band, which is the part that has to reach the section's own edge. */
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 94%, transparent 100%);
}

.lane {
  position: absolute; left: 0; right: 0;
  top: calc(var(--y) * 1px);
  /* 2px in the plane's own space, not 1px: after a 70 degree tilt a single
     pixel row anti-aliases down to almost nothing, which is why the first
     build had lanes that were technically present and visually absent. */
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8) 10%,
    rgba(255, 255, 255, 0.8) 90%, transparent);
  opacity: 0.92;
}

/* A lane lighting up where the mark touched it, then fading over about seven
   seconds. The fade is the point: the plane remembers where the agent has been. */
.lit {
  position: absolute;
  top: calc(var(--y) * 1px - 2px);
  left: calc(var(--x) * 1px);
  width: 560px; margin-left: -280px; height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--g1a) 32%, color-mix(in oklch, var(--g1a) 70%, white) 50%, var(--g1a) 68%, transparent);
  opacity: 0;
  animation-name: litPass;
  animation-duration: var(--cycle);
  animation-delay: var(--d);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes litPass {
  0%    { opacity: 0;    transform: scaleX(0.35); }
  2.3%  { opacity: 0.7; transform: scaleX(1); }
  22%   { opacity: 0.22; transform: scaleX(1); }
  33%   { opacity: 0;    transform: scaleX(1); }
  100%  { opacity: 0;    transform: scaleX(1); }
}

.agent {
  position: absolute; top: 0; left: 0;
  width: 26px; height: 26px; border-radius: var(--r-dot);
  background: radial-gradient(circle, color-mix(in oklch, var(--g1a) 74%, white) 0%, var(--g1a) 38%, transparent 68%);
  offset-anchor: 50% 50%;
  offset-rotate: 0deg;
  offset-distance: 0%;
  animation-duration: var(--cycle);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
/* -----------------------------------------------------------------------------
   The two scenes. Only the camera, the path, the pace and the labels differ;
   every rule above is shared, which is what makes them read as one system
   rather than two graphics.
   --------------------------------------------------------------------------- */
.band-stage[data-scene="one"] {
  /* Protects a LEFT-aligned text column. LINEAR rather than radial: a radial
     centred on the open side cannot tell "left of the text" from "far right"
     by radius alone. The stack lives past 72%, at full strength. */
  --veilmask: linear-gradient(90deg, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.12) 42%,
    rgba(0, 0, 0, 0.5) 56%, #000 72%, #000 100%);
}

/* A shallower tilt on a longer lens, with the vanishing point left of centre
   and ON the band's top edge. The horizon is a hard ceiling the field can never
   rise above: at 42% of the band it left the whole upper third empty, which is
   why the graphic looked like it started partway down the section. The tilt
   came down with it, because a steeper one bunches the far lanes into an
   illegible blur instead of spreading them up the band.

   The pass is slower than the hero's, because this is a section somebody stops
   and reads. */
.band-stage[data-scene="two"] {
  --persp: 1500px;
  --porigin: 34% 0%;
  --tilt: 50deg;
  --pbottom: -40px;
  --cycle: 30s;
  --parked: 10.909%;
  /* Protects a CENTRED heading sitting at the top of the band, so the field
     opens out underneath it at full strength. A radial mask aimed at one side
     would be protecting the wrong thing here. */
  --veilmask: linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.3) 40%, #000 62%, #000 100%);
}
.band-stage[data-scene="two"] .agent {
  offset-path: path("M250,360 L619,920 L1300,220 L1138,780 L1950,500 L868,1060 L1649,920 L2019,780 L2350,220");
  animation-name: travelTwo, agentFade;
}
@keyframes travelTwo {
  0.000%   { offset-distance: 0.000%; }
  7.182%   { offset-distance: 10.910%; }
  12.516%  { offset-distance: 10.910%; }
  22.975%  { offset-distance: 26.798%; }
  29.218%  { offset-distance: 36.281%; }
  34.552%  { offset-distance: 36.281%; }
  43.751%  { offset-distance: 50.254%; }
  56.799%  { offset-distance: 70.074%; }
  62.132%  { offset-distance: 70.074%; }
  70.630%  { offset-distance: 82.982%; }
  75.963%  { offset-distance: 82.982%; }
  80.200%  { offset-distance: 89.417%; }
  85.533%  { offset-distance: 89.417%; }
  92.500%  { offset-distance: 100.000%; }
  100.000% { offset-distance: 100.000%; }
}
/* It leaves at the far end and returns at the near end rather than flying back
   across the plane, which would read as a bouncing object. */
@keyframes agentFade {
  0%    { opacity: 0; }
  1.5%  { opacity: 1; }
  93%   { opacity: 1; }
  96.5% { opacity: 0; }
  100%  { opacity: 0; }
}

/* Labels live OUTSIDE the transformed plane, in screen space: text lying on a
   plane at this angle is unreadable. They are placed against where their
   waypoint lands, with a short leader. */
.labels { position: absolute; inset: 0; }
.stn {
  position: absolute; left: 0; top: 0;
  padding-left: 13px;
  font-family: var(--font-data); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.88);
  white-space: nowrap; opacity: 0;
  pointer-events: auto;
  animation-name: lblPass;
  animation-duration: var(--cycle);
  animation-delay: var(--d);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.stn::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 9px; height: 1px; background: rgba(255, 255, 255, 0.45);
}
/* When a label flips to the far side of its point, the leader goes with it. */
.stn[data-side="left"] { padding-left: 0; padding-right: 13px; }
.stn[data-side="left"]::before { left: auto; right: 0; }
@keyframes lblPass {
  0%   { opacity: 0; }
  1.5% { opacity: 1; }
  9%   { opacity: 1; }
  12%  { opacity: 0; }
  100% { opacity: 0; }
}
/* !important because a running animation beats a normal declaration. Pausing
   alone would freeze the label at whatever opacity it happened to be at. */
.stn:hover { opacity: 1 !important; animation-play-state: paused; }

/* =============================================================================
   The hero: the desk, compounding
   =============================================================================
   A shallow stack of plates seen from above and slightly to the side, each
   plate one closed mandate. New plates arrive at the front and low; the ones
   already there step up and back, dimming as they recede, and leave off the far
   end. It never empties and it never resets, so it reads as accumulation rather
   than as a loop.

   This is deliberately the OPPOSITE shape to the lanes in the band below: one
   mark moving across many things there, many things stacking into one here.
   Horizontal travel against vertical accumulation.

   Every plate runs the same keyframes over the same cycle, phase-shifted by one
   station each, so at any instant there is one plate at every station. That is
   the whole mechanism; there is no frame loop.
   ============================================================================= */
.rig {
  position: absolute;
  right: 4%; top: 17%;
  width: 500px; height: 420px;
  perspective: 900px;
  perspective-origin: 50% 44%;
}
.stack {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(calc(63deg + var(--ty, 0deg))) rotateZ(calc(-7deg + var(--tz, 0deg)))
    translateX(var(--tx, 0px));
}

.plate {
  position: absolute; left: 50%; top: 50%;
  width: 306px; height: 38px; margin: -19px 0 0 -153px;
  border-radius: 4px;
  background: linear-gradient(104deg,
    color-mix(in oklch, var(--g1a) 52%, transparent) 0%,
    color-mix(in oklch, var(--g1b) 30%, transparent) 58%,
    rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.85);
  opacity: 0;
  animation: plateLife 21s var(--ease) var(--d) infinite;
}
/* The lit near edge. After the tilt the plate's local bottom is the edge facing
   the camera, so that is the one that catches light; a slab reads as a slab
   because one edge is lit and the rest is not. */
.plate::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, transparent, var(--g1a) 18%, #fff 52%, var(--g1a) 82%, transparent);
  opacity: 0.55;
}

/* Local space here is the tilted plane, and its axes are not the ones intuition
   offers: +Y runs TOWARD the camera and down the screen, +Z lifts off the plane
   toward the camera as well. Receding therefore means NEGATIVE Y, and it has to
   dominate the lift, or the oldest plates grow and the stack reads as advancing
   on the viewer rather than retreating from them. Both signs were wrong once. */
@keyframes plateLife {
  0%       { transform: translate3d(0, 22px, -7px); opacity: 0; }
  2.55%    { transform: translate3d(0, 0px, 0px); opacity: 1; }
  14.29%   { transform: translate3d(0, 0px, 0px); opacity: 1; }
  17.29%   { transform: translate3d(0, -58px, 6px); opacity: 1; }
  28.57%   { transform: translate3d(0, -58px, 6px); opacity: 1; }
  31.57%   { transform: translate3d(0, -116px, 12px); opacity: 0.9; }
  42.86%   { transform: translate3d(0, -116px, 12px); opacity: 0.9; }
  45.86%   { transform: translate3d(0, -174px, 18px); opacity: 0.76; }
  57.14%   { transform: translate3d(0, -174px, 18px); opacity: 0.76; }
  60.14%   { transform: translate3d(0, -232px, 24px); opacity: 0.6; }
  71.43%   { transform: translate3d(0, -232px, 24px); opacity: 0.6; }
  74.43%   { transform: translate3d(0, -290px, 30px); opacity: 0.42; }
  85.71%   { transform: translate3d(0, -290px, 30px); opacity: 0.42; }
  88.71%   { transform: translate3d(0, -348px, 36px); opacity: 0.2; }
  100.00%  { transform: translate3d(0, -348px, 36px); opacity: 0.2; }
  97%      { transform: translate3d(0, -406px, 42px); opacity: 0; }
  100%     { transform: translate3d(0, -406px, 42px); opacity: 0; }
}

/* -----------------------------------------------------------------------------
   The tally.
   -----------------------------------------------------------------------------
   Small, mono, in the same microtype family as every other label on the site.
   It counts the plates that are on screen and stops at the number the stack
   holds, so it is checkable by eye rather than asserted. It lives outside the
   veil, because the mask that protects the text would otherwise dim it.
   --------------------------------------------------------------------------- */
.tally {
  position: absolute;
  right: calc(4% + 34px); bottom: 23%;
  text-align: right;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  animation: tallyBreath 21s linear infinite;
}
.tally-mark {
  margin: 0 0 9px;
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.34);
}
.tally-rows { display: grid; gap: 3px; }
.tally-row {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 8px;
  margin: 0;
}
.tally-row span {
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
  width: 72px; text-align: left;
}
.odo {
  position: relative; display: inline-block;
  width: 1.3em; height: 1.15em;
  font-size: 19px; font-weight: 600; letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.9);
}
.odo i {
  position: absolute; inset: 0;
  font-style: normal; text-align: right;
  opacity: 0;
  animation-name: digitOn;
  animation-duration: 21s;
  animation-delay: var(--d);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
/* The last digit holds through the stations after the stack is full. */
.odo i.hold { animation-name: digitHold; }
/* Authored ON from clock zero, so the delay above places the swap. A counter
   swaps hard rather than crossfading; two digits dissolving through each other
   is the one thing that would make it look broken. */
@keyframes digitOn {
  0%      { opacity: 1; }
  14.28%  { opacity: 1; }
  14.29%  { opacity: 0; }
  100%    { opacity: 0; }
}
/* The last digit covers the two stations after the stack is full. */
@keyframes digitHold {
  0%      { opacity: 1; }
  28.56%  { opacity: 1; }
  28.57%  { opacity: 0; }
  100%    { opacity: 0; }
}
/* One dip per pass, so the count never snaps back where anyone can see it. */
@keyframes tallyBreath {
  0%    { opacity: 0; }
  2%    { opacity: 1; }
  96.5% { opacity: 1; }
  99.2% { opacity: 0; }
  100%  { opacity: 0; }
}

.tally-state {
  position: relative;
  margin: 13px 0 0; height: 1.3em;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.56);
}
.tally-state i {
  position: absolute; right: 0; top: 0;
  font-style: normal; white-space: nowrap;
  opacity: 0;
  animation: stateOn 21s linear var(--d) infinite;
}
@keyframes stateOn {
  0%     { opacity: 1; }
  30%    { opacity: 1; }
  33.33% { opacity: 0; }
  100%   { opacity: 0; }
}

/* -----------------------------------------------------------------------------
   Why the attenuation is a mask and not a dark overlay.
   -----------------------------------------------------------------------------
   The mark travels the whole field, so it passes behind the words, and
   measurement is unambiguous about what that costs: a bright point behind the
   lede took its contrast from 11:1 down to 3.4:1.

   The first fix was a dark scrim between the field and the type. It worked and
   it cost too much: it covers the brand gradient the graphic is meant to be
   layered on, and the hero went flat. So the attenuation lives in --veilmask
   instead, which lowers the GRAPHIC's alpha over each scene's text and leaves
   the gradient alone. Every line of hero and band-two text was then measured
   per line box across a full cycle at 1440 and at 390.
   --------------------------------------------------------------------------- */

/* The second band. Heading centred at the top, field opening out beneath it. */
.band-two { border-top: 1px solid rgba(255, 255, 255, 0.07); }
/* Deep bottom padding on purpose: the field has to keep running below the
   heading and then carry on behind the card that straddles this band's edge.
   Measured before this change, only 44% of the card sat over the band and two
   lanes reached behind it, so the graphic read as something the card was
   sitting on rather than something still running underneath it. */
.one-agent { padding: clamp(66px, 7vw, 92px) 0 clamp(360px, 35vw, 470px); text-align: center; }
.one-agent .eyebrow { justify-content: center; }
.one-agent .h2 { max-width: 22ch; margin: 0 auto; }
.one-agent .lede { max-width: 58ch; margin: 16px auto 0; }

/* Nothing on a stage runs while its own band is off screen. */
.stage[data-rest="true"] .lit,
.stage[data-rest="true"] .agent,
.stage[data-rest="true"] .stn,
.stage[data-rest="true"] .plate,
.stage[data-rest="true"] .tally,
.stage[data-rest="true"] .odo i,
.stage[data-rest="true"] .tally-state i { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  /* The global reduced-motion rule collapses every animation to 0.01ms, which
     would land this one on its LAST keyframe, where the mark is invisible.
     Park it at the first labelled waypoint instead and draw the rest statically,
     so the composition still works as a still image. */
  .stage .lit, .stage .agent, .stage .stn,
  .stage .plate, .stage .tally, .stage .odo i, .stage .tally-state i { animation: none !important; }
  .stage .lit { opacity: 0.30; }
  .stage .stn { opacity: 1; }
  .stage .agent { offset-distance: var(--parked); opacity: 1; }
  /* The stack is drawn full, at the depths its keyframes would have reached,
     with the tally showing the number it caps at and one state line. */
  .stage .tally { opacity: 1; }
  .stage .odo i { opacity: 0; }
  .stage .odo i.hold { opacity: 1; }
  .stage .tally-state i { opacity: 0; }
  .stage .tally-state i:first-child { opacity: 1; }
  .stage .plate { opacity: 1; }
.stage .plate:nth-child(1) { transform: translate3d(0, 0px, 0px); opacity: 1; }
  .stage .plate:nth-child(2) { transform: translate3d(0, 46px, 9px); opacity: 1; }
  .stage .plate:nth-child(3) { transform: translate3d(0, 92px, 18px); opacity: 0.9; }
  .stage .plate:nth-child(4) { transform: translate3d(0, 138px, 27px); opacity: 0.76; }
  .stage .plate:nth-child(5) { transform: translate3d(0, 184px, 36px); opacity: 0.6; }
  .stage .plate:nth-child(6) { transform: translate3d(0, 230px, 45px); opacity: 0.42; }
  .stage .plate:nth-child(7) { transform: translate3d(0, 276px, 54px); opacity: 0.2; }
}

@media (max-width: 900px) {
  /* On one column the headline runs the full width, so the backdrop drops back
     and the near lanes over the type come off entirely. */
  .stage { opacity: 0.6; }
  .labels { display: none; }

  /* Room under the hero copy for the stack and its tally. */
  .hero { padding-bottom: 400px; }

  /* On one column the stack cannot sit beside the words, so it moves below
     them into a reserved band of its own with the tally under it. Washing it
     behind the headline instead would lose the one part of this graphic that
     carries the point. */
  .stage { opacity: 1; }
  .band-stage[data-scene="two"] .stage { opacity: 0.6; }
  .rig {
    right: auto; left: 50%; top: auto; bottom: 80px;
    width: 340px; height: 210px; margin-left: -170px;
    perspective: 700px;
  }
  .plate { width: 224px; height: 28px; margin: -14px 0 0 -112px; }
  /* Stacked rather than side by side, because the "illustrative" mark has to
     stay on screen at every width. It is the thing that makes the count
     honest, so it is not a candidate for saving space. */
  .tally {
    right: auto; left: 50%; bottom: 20px;
    width: 300px; margin-left: -150px;
    text-align: left;
  }
  .tally-mark { margin: 0 0 7px; }
  .tally-rows { gap: 2px; }
  .tally-row { justify-content: flex-start; gap: 10px; }
  .tally-row span { width: auto; }
  .odo { font-size: 17px; }
  .tally-state { margin: 9px 0 0; text-align: left; }
  .tally-state i { right: auto; left: 0; }
  .plane { bottom: -220px; }
}

/* =============================================================================
   Narrowest screens. LAST BLOCK IN THE FILE, deliberately.
   =============================================================================
   Every rule here overrides a base rule of equal specificity, so it only works
   from below them. Adding a component further down the file would silently
   win over this block; put new components above it.
   ============================================================================= */
@media (max-width: 640px) {
  .thread-bar .kicker { display: none; }

  /* The call transcript drops its timestamp column. At 350px of content width
     a 34px time column plus a 28px speaker tag leaves the text too little room
     to set. */
  .line { grid-template-columns: 28px 1fr; gap: 10px; }
  .line-t { display: none; }

  .mail-row { grid-template-columns: 1fr; gap: 2px; }
  .mailback-head .mail-row { grid-template-columns: 46px 1fr; gap: 10px; }

  /* A kanban card cannot carry two lines inside a column a quarter of 350px
     wide: it wrapped to three lines and spilled out of the board. One
     truncated line is the honest version of this object at this size. */
  .board-card { top: 26px; padding: 5px 7px; font-size: 11px; }
  .board-card span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .board-card .meta { display: none; }
  .board-cols span { padding: 7px 5px 40px; font-size: 9px; }
}