/* Trial Match system: base, shell and shared components. Tokens live in tm-tokens.css.
   Rules: Michigan Blue for action/selection, blue text for links; Maize marks one next step; cyan is decoration only; status is glyph + word;
   Source Serif 4 only for text quoted from a protocol or document. */

/* ---- Base ------------------------------------------------------------------------------- */
.trial-match {
  background: var(--tm-canvas);
  color: var(--tm-ink);
  font-family: var(--tm-font);
  font-size: var(--tm-text-base);
  line-height: 1.6;
  font-feature-settings: "kern";
}
.trial-match h1, .trial-match h2, .trial-match h3 { font-family: var(--tm-font); color: var(--tm-ink); text-wrap: balance; }
.trial-match h1 { margin: 0; font-size: var(--tm-text-2xl); line-height: 1.12; font-weight: 400; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.trial-match h2 { margin: var(--tm-space-6) 0 var(--tm-space-3); font-size: var(--tm-text-lg); line-height: 1.3; font-weight: 500; letter-spacing: -0.015em; }
.trial-match h3 { margin: 0 0 var(--tm-space-2); font-size: var(--tm-text-md); line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; }
.trial-match p { max-width: 75ch; }
.trial-match a { color: var(--tm-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.trial-match a:hover { color: var(--tm-blue); }
.trial-match :focus-visible { outline: 2px solid var(--tm-ink); outline-offset: 3px; }
.trial-match ::selection { background: var(--tm-blue-wash); }
.trial-match .meta, .tm-meta, .tm-num { font-variant-numeric: tabular-nums lining-nums; }

/* ---- Shell ------------------------------------------------------------------------------ */
.trial-match .skip-link { position: absolute; top: -80px; left: 16px; z-index: 100; padding: 12px 16px; background: var(--tm-panel); color: var(--tm-ink); }
.trial-match .skip-link:focus { top: 8px; }
.tm-synthetic { padding: 6px 24px; background: var(--tm-canvas-alt); color: var(--tm-ink-muted); border-bottom: 1px solid var(--tm-line); font-size: var(--tm-text-xs); letter-spacing: 0.01em; }

.trial-match .app-bar {
  position: sticky; top: 0; z-index: 20;
  min-height: 64px; gap: 8px 32px; padding: 8px 32px;
  background: oklch(0.962 0.009 225 / 0.86);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--tm-line);
}
@media (prefers-reduced-transparency: reduce) { .trial-match .app-bar { background: var(--tm-canvas); backdrop-filter: none; } }
.trial-match .app-bar .brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--tm-ink); font-size: var(--tm-text-md); font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.tm-mark { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--tm-cyan); }
/* Two offset leaves: a protocol line and the fact it is checked against. */
.tm-mark::before, .tm-mark::after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 0 60% 0 60%; background: var(--tm-panel); }
.tm-mark::before { left: 4px; top: 5px; }
.tm-mark::after { right: 4px; bottom: 5px; transform: rotate(90deg); opacity: 0.75; }
.trial-match .app-bar nav { display: flex; gap: 4px; }
.trial-match .app-bar nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--tm-ink-muted); font-size: var(--tm-text-sm); font-weight: 500; text-decoration: none; border-radius: var(--tm-radius-control); transition: color var(--tm-fast) var(--tm-ease), background-color var(--tm-fast) var(--tm-ease); }
.trial-match .app-bar nav a:hover { color: var(--tm-ink); background: var(--tm-canvas-alt); }
.trial-match .app-bar nav a[aria-current="page"] { color: var(--tm-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--tm-blue); border-radius: 0; }
.trial-match .app-user { gap: 16px; }
.trial-match .who { display: grid; justify-items: end; line-height: 1.25; font-size: var(--tm-text-sm); color: var(--tm-ink); }
.trial-match .who-role { color: var(--tm-ink-muted); font-size: var(--tm-text-xs); }
.trial-match .who-role:empty { display: none; }

.tm-workspace { width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--tm-space-7) 32px var(--tm-space-9); }
.tm-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--tm-space-5); padding-bottom: var(--tm-space-5); }
.tm-lead { margin: var(--tm-space-3) 0 0; color: var(--tm-ink-muted); font-size: var(--tm-text-md); line-height: 1.5; }
.tm-boundary { margin: var(--tm-space-4) 0 var(--tm-space-6); color: var(--tm-ink-muted); font-size: var(--tm-text-sm); }
.tm-breadcrumb { margin-bottom: var(--tm-space-5); font-size: var(--tm-text-sm); }
.tm-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
.tm-footer { max-width: 1200px; margin: 0 auto; padding: var(--tm-space-5) 32px var(--tm-space-7); border-top: 1px solid var(--tm-line); color: var(--tm-ink-muted); font-size: var(--tm-text-xs); }

/* ---- Buttons ---------------------------------------------------------------------------- */
.trial-match .btn {
  min-height: 44px; padding: 10px 22px; gap: 8px; justify-content: center;
  border: 1px solid transparent; border-radius: var(--tm-radius-control);
  font: inherit; font-size: var(--tm-text-sm); font-weight: 600; line-height: 1.4; letter-spacing: 0.005em; text-decoration: none;
  transition: background-color var(--tm-fast) var(--tm-ease), border-color var(--tm-fast) var(--tm-ease), color var(--tm-fast) var(--tm-ease), transform 100ms var(--tm-ease);
}
/* Feedback on press, not release. */
.trial-match .btn:active:not(:disabled) { transform: scale(0.98); }
.trial-match .btn-primary { background: var(--tm-blue); color: var(--tm-panel); }
.trial-match .btn-primary:hover { background: var(--tm-blue-press); color: var(--tm-panel); }
.trial-match .btn-secondary { background: transparent; color: var(--tm-ink); border-color: var(--tm-ink); }
.trial-match .btn-secondary:hover { background: var(--tm-panel); color: var(--tm-ink); }
.trial-match .btn-ghost { background: transparent; color: var(--tm-link); }
.trial-match .btn-ghost:hover { background: var(--tm-blue-wash); color: var(--tm-blue-press); }
.trial-match .btn-destructive { background: var(--tm-error); color: var(--tm-panel); }
.trial-match .btn-small { min-height: 36px; padding: 6px 14px; font-size: var(--tm-text-xs); }
@media (any-pointer: coarse) { .trial-match .btn-small { min-height: 44px; } }
.trial-match .btn:disabled { opacity: 0.55; cursor: not-allowed; }
.trial-match .btn[aria-busy="true"] { cursor: progress; }

/* ---- Form controls ---------------------------------------------------------------------- */
.trial-match input:not([type="checkbox"]):not([type="radio"]), .trial-match select, .trial-match textarea {
  min-height: 44px; padding: 10px 12px;
  background: var(--tm-panel); color: var(--tm-ink);
  border: 1px solid var(--tm-control); border-radius: var(--tm-radius-control);
  font: inherit; font-size: var(--tm-text-base);
  transition: border-color var(--tm-fast) var(--tm-ease), box-shadow var(--tm-fast) var(--tm-ease);
}
.trial-match input:hover, .trial-match select:hover, .trial-match textarea:hover { border-color: var(--tm-ink-muted); }
.trial-match input:focus-visible, .trial-match select:focus-visible, .trial-match textarea:focus-visible { outline: none; border-color: var(--tm-blue); box-shadow: 0 0 0 3px var(--tm-blue-wash), 0 0 0 4px var(--tm-blue); }
.trial-match input[aria-invalid="true"] { border-color: var(--tm-error); }
.trial-match input:disabled, .trial-match select:disabled, .trial-match textarea:disabled { background: var(--tm-canvas-alt); color: var(--tm-ink-faint); }
.trial-match input[type="checkbox"], .trial-match input[type="radio"] { accent-color: var(--tm-blue); }
.trial-match label, .trial-match .field span, .trial-match legend { font-size: var(--tm-text-sm); font-weight: 600; color: var(--tm-ink); }
.trial-match .field .field-help, .trial-match .field-help { color: var(--tm-ink-muted); font-weight: 400; }
.tm-site-label { display: grid; gap: 6px; min-width: 240px; }
.tm-site-label select { width: 100%; }

/* ---- Panels, tables, metadata ----------------------------------------------------------- */
.tm-panel { background: var(--tm-panel); border: 1px solid var(--tm-line); padding: var(--tm-space-6); }
.tm-summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin: var(--tm-space-5) 0 var(--tm-space-4); color: var(--tm-ink-muted); font-size: var(--tm-text-sm); }
.tm-summary strong { color: var(--tm-ink); font-size: var(--tm-text-md); font-weight: 600; }
.tm-table { width: 100%; border-collapse: collapse; text-align: left; background: var(--tm-panel); border: 1px solid var(--tm-line); }
.tm-table caption { padding: 0 0 var(--tm-space-3); text-align: left; font-size: var(--tm-text-sm); font-weight: 600; color: var(--tm-ink-muted); }
.tm-table th { padding: 14px 20px; border-bottom: 1px solid var(--tm-line); background: var(--tm-canvas-alt); color: var(--tm-ink-muted); font-size: var(--tm-text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.tm-table td { padding: 22px 20px; border-bottom: 1px solid var(--tm-line); vertical-align: top; }
.tm-table tbody tr:last-child td { border-bottom: 0; }
.tm-table tbody tr { transition: background-color var(--tm-fast) var(--tm-ease); }
.tm-table tbody tr:hover { background: var(--tm-canvas-alt); }
.tm-table td:first-child { width: 44%; }
.trial-match .tm-trial-link { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; margin-bottom: 2px; color: var(--tm-ink); font-size: var(--tm-text-md); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; text-decoration: none; overflow-wrap: anywhere; }
.trial-match .tm-trial-link:hover { color: var(--tm-ink); text-decoration: underline; text-decoration-color: var(--tm-blue); }
.tm-meta { margin: 2px 0 0; color: var(--tm-ink-muted); font-size: var(--tm-text-xs); overflow-wrap: anywhere; }
.tm-meta-row { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; color: var(--tm-ink-muted); font-size: var(--tm-text-xs); }
.tm-review-label { display: block; font-weight: 600; }
.tm-protocol-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; padding: var(--tm-space-4) 0; color: var(--tm-ink-muted); border-bottom: 1px solid var(--tm-line); font-variant-numeric: tabular-nums; }
.tm-definition { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px 24px; margin: var(--tm-space-5) 0; }
.tm-definition dt { color: var(--tm-ink-muted); font-size: var(--tm-text-sm); }
.tm-definition dd { margin: 0; overflow-wrap: anywhere; }
.tm-version { margin-top: var(--tm-space-6); padding: var(--tm-space-6); background: var(--tm-panel); border: 1px solid var(--tm-line); }
.tm-version h2 { margin-top: 0; }
.tm-criterion { margin: 0; padding: var(--tm-space-4) 0; border-bottom: 1px solid var(--tm-line); }
.tm-criterion:last-child { border-bottom: 0; }
/* The source's own voice. */
.tm-source { margin: var(--tm-space-3) 0 var(--tm-space-5); font-family: var(--tm-font-source); font-size: 1.125rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.tm-criterion .tm-source { margin: var(--tm-space-2) 0 0; }

/* ---- Status marks: glyph + word, never colour alone ------------------------------------ */
.tm-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--tm-text-sm); }
.tm-status::before { content: ""; flex: none; width: 10px; height: 10px; box-sizing: border-box; }
.tm-status--signed { color: var(--tm-signed); }
.tm-status--signed::before { border-radius: 50%; background: currentColor; }
.tm-status--available { color: var(--tm-ink); }
.tm-status--available::before { border-radius: 50%; background: currentColor; }
.tm-status--draft { color: var(--tm-ink); }
.tm-status--draft::before { border-radius: 50%; border: 2px solid currentColor; }
.tm-status--attention { color: var(--tm-attention); }
.tm-status--attention::before { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid currentColor; }
.tm-status--closed { color: var(--tm-ink-muted); }
.tm-status--closed::before { background: currentColor; }
.tm-status--unknown { color: var(--tm-unknown); }
.tm-status--unknown::before { border-radius: 50%; border: 2px dashed currentColor; }
/* The single "do this next" highlight on a screen. */
.tm-next { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; background: var(--tm-maize); color: var(--tm-ink); font-size: var(--tm-text-xs); font-weight: 700; letter-spacing: 0.02em; }

/* ---- Feedback states -------------------------------------------------------------------- */
.trial-match .tag { border-radius: var(--tm-radius-control); background: var(--tm-canvas-alt); color: var(--tm-ink-muted); }
.trial-match .status-message { border-radius: 0; background: var(--tm-panel); border: 1px solid var(--tm-line); color: var(--tm-ink-muted); padding: 12px 16px; }
.trial-match .status-message--attention { background: var(--tm-attention-wash); border-color: oklch(0.85 0.06 80); color: var(--tm-attention); }
.trial-match .error-state, .trial-match .error-banner { border-radius: 0; background: var(--tm-error-wash); border: 1px solid oklch(0.85 0.05 30); color: var(--tm-error); padding: 16px 20px; }
.trial-match .empty-state { max-width: none; margin: 0; padding: var(--tm-space-7) var(--tm-space-6); text-align: left; background: var(--tm-panel); border: 1px solid var(--tm-line); color: var(--tm-ink-muted); }
.trial-match .empty-state h2, .trial-match .error-state h2 { margin: 0 0 6px; font-size: var(--tm-text-md); font-weight: 600; }
.trial-match .skeleton { border-radius: 0; background: var(--tm-canvas-alt); }
#catalogue-status:not(:empty), [role="status"][aria-busy="true"] { color: var(--tm-ink-muted); }

/* ---- Overlays --------------------------------------------------------------------------- */
/* Dialogs grow out of the control that opened them and return the same way (origin set in openDialog). */
.trial-match dialog {
  border: 1px solid var(--tm-line); border-radius: var(--tm-radius-overlay); background: var(--tm-panel); color: var(--tm-ink); box-shadow: var(--tm-shadow-overlay);
  opacity: 0; transform: scale(0.96);
  transition: opacity 160ms var(--tm-ease), transform var(--tm-medium) var(--tm-ease), overlay var(--tm-medium) allow-discrete, display var(--tm-medium) allow-discrete;
}
.trial-match dialog[open] { opacity: 1; transform: none; }
@starting-style { .trial-match dialog[open] { opacity: 0; transform: scale(0.96); } }
.trial-match dialog::backdrop { background-color: oklch(0.23 0.03 255 / 0); transition: background-color var(--tm-medium) var(--tm-ease), overlay var(--tm-medium) allow-discrete, display var(--tm-medium) allow-discrete; }
.trial-match dialog[open]::backdrop { background-color: oklch(0.23 0.03 255 / 0.32); }
@starting-style { .trial-match dialog[open]::backdrop { background-color: oklch(0.23 0.03 255 / 0); } }
@media (prefers-reduced-motion: reduce) {
  .trial-match dialog, .trial-match dialog[open] { transform: none; }
  @starting-style { .trial-match dialog[open] { transform: none; } }
  .trial-match .btn:active:not(:disabled) { transform: none; }
}

/* ---- Scroll edge: a soft fade under the bar once content scrolls beneath it ------------- */
.trial-match .app-bar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none; opacity: 0; background: linear-gradient(to bottom, oklch(0.23 0.03 255 / 0.07), oklch(0.23 0.03 255 / 0)); }
@supports (animation-timeline: scroll()) {
  .trial-match .app-bar { border-bottom-color: transparent; }
  .trial-match .app-bar::after { animation: tm-edge linear both; animation-timeline: scroll(root); animation-range: 0 48px; }
}
@keyframes tm-edge { to { opacity: 1; } }

/* ---- Trial page ------------------------------------------------------------------------- */
.tm-review { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: start; margin: var(--tm-space-5) 0; }
.tm-review h2 { margin: 0 0 var(--tm-space-3); }
.tm-review-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.tm-review-note { grid-column: 1 / -1; margin: 0; padding-top: var(--tm-space-3); border-top: 1px solid var(--tm-line); }
.tm-version-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: var(--tm-space-2); }
.tm-version-head h2 { margin: 0; }
.tm-original { margin-top: var(--tm-space-4); }
/* Summaries stay list items so the browser keeps the open/closed marker. */
.trial-match details > summary { cursor: pointer; min-height: 44px; padding: 10px 0; color: var(--tm-link); font-weight: 600; }
.trial-match details > summary:hover { color: var(--tm-blue-press); }
.tm-version-earlier > summary { color: var(--tm-ink); }
.tm-version-earlier > summary .tm-version-title { display: inline; margin: 0; }
.tm-version-earlier > summary .tm-meta { display: block; margin: 4px 0 0; font-weight: 400; }
.tm-version-earlier[open] > summary { margin-bottom: var(--tm-space-3); }
.tm-next--row { margin-top: 8px; }
@media (max-width: 767px) {
  .tm-review { grid-template-columns: minmax(0, 1fr); }
  .tm-review-actions { align-items: flex-start; }
}

/* ---- Numbered label: "01_" -------------------------------------------------------------- */
.tm-index { display: block; padding-bottom: var(--tm-space-4); border-bottom: 1px solid currentColor; font-size: var(--tm-text-lg); font-weight: 400; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

/* ---- Photo placeholders (brand surfaces only) ------------------------------------------- */
.tm-photo { position: relative; margin: 0; display: grid; place-items: end start; min-height: 320px; padding: var(--tm-space-5); overflow: hidden; background:
  radial-gradient(120% 80% at 70% 20%, oklch(0.86 0.07 213 / 0.9), transparent 60%),
  linear-gradient(160deg, oklch(0.72 0.07 235), oklch(0.36 0.07 252)); color: var(--tm-panel); }
.tm-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Keep faces in frame when a slot crops the photo. */
.lp-hero .tm-photo img { object-position: 55% 30%; }
.lp-band .tm-photo img { object-position: 68% 40%; }

/* ---- Landing ---------------------------------------------------------------------------- */
.lp-bar { display: flex; align-items: center; gap: 32px; max-width: 1280px; margin: 0 auto; padding: 20px 48px; }
.lp-bar nav { display: flex; gap: 8px; margin-left: auto; }
.lp-bar nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--tm-ink); font-size: var(--tm-text-sm); font-weight: 500; text-decoration: none; }
.lp-bar nav a:hover { color: var(--tm-blue); }
.lp-bar .brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--tm-ink); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }

.lp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(760px, calc(100svh - 120px));
  /* The soft cyan glow from the owner's product page, kept behind the copy only. */
  background: radial-gradient(55% 70% at 22% 45%, var(--tm-cyan-wash), transparent 72%), var(--tm-canvas); }
.lp-hero-copy { align-self: center; max-width: 600px; margin-left: auto; padding: var(--tm-space-8) var(--tm-space-8) var(--tm-space-8) 48px; }
.lp-hero h1 { font-size: var(--tm-text-display); line-height: 1.04; font-weight: 300; letter-spacing: -0.035em; }
.lp-lede { margin: var(--tm-space-5) 0 var(--tm-space-6); max-width: 46ch; color: var(--tm-ink); font-size: 1.0625rem; line-height: 1.65; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.lp-actions .btn { min-width: 156px; }
.lp-note { margin: var(--tm-space-5) 0 0; color: var(--tm-ink-muted); font-size: var(--tm-text-xs); }
.lp-hero .tm-photo { min-height: 100%; }

.lp-section { padding: var(--tm-space-9) 48px; }
.lp-section--alt { background: var(--tm-canvas-alt); }
.lp-inner { max-width: 1120px; margin: 0 auto; }
.lp-center { text-align: center; }
.lp-center p { margin-left: auto; margin-right: auto; }
.trial-match .lp-title { margin: 0 auto; max-width: 18ch; font-size: clamp(2rem, 1.5rem + 1.8vw, 2.875rem); line-height: 1.15; font-weight: 400; letter-spacing: -0.03em; }
.trial-match .lp-title--start { margin-left: 0; }
.lp-sub { margin-top: var(--tm-space-4); color: var(--tm-ink-muted); font-size: var(--tm-text-base); line-height: 1.65; }

.lp-roles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tm-space-4) var(--tm-space-8); margin: var(--tm-space-7) 0 0; padding: 0; list-style: none; }
.lp-roles li { display: inline-flex; align-items: center; gap: 12px; color: var(--tm-ink); font-size: var(--tm-text-md); font-weight: 600; letter-spacing: -0.01em; }
.lp-roles li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tm-cyan); }

.lp-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); max-width: 1120px; margin: 0 auto; background: var(--tm-panel); }
.lp-split .tm-photo { min-height: 520px; }
.lp-split-copy { align-self: center; padding: var(--tm-space-8) clamp(32px, 6vw, 96px); }
.lp-split-copy h2 { margin: 0 0 var(--tm-space-5); font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.18; font-weight: 400; letter-spacing: -0.03em; }
.lp-split-copy p { color: var(--tm-ink); line-height: 1.7; }
.lp-split-copy .btn { margin-top: var(--tm-space-5); }

.lp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tm-space-4); margin: var(--tm-space-8) auto 0; padding: 0; list-style: none; }
.lp-step { display: flex; flex-direction: column; min-height: 340px; padding: var(--tm-space-5); background: var(--tm-panel); }
.lp-step .tm-index { border-color: var(--tm-line); }
.lp-step-word { margin: auto 0 var(--tm-space-3); padding-top: var(--tm-space-7); font-size: clamp(2.5rem, 1.8rem + 2vw, 3.75rem); line-height: 1; font-weight: 300; letter-spacing: -0.04em; }
.lp-step p { margin: 0; font-size: var(--tm-text-sm); line-height: 1.55; }
.lp-step--next { background: var(--tm-maize); }
.lp-step--next .tm-index { border-color: oklch(0.23 0.03 255 / 0.35); }

.lp-list { margin: var(--tm-space-7) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--tm-ink); }
.lp-list li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) 11rem; gap: var(--tm-space-5); align-items: baseline; padding: var(--tm-space-5) 0; border-bottom: 1px solid var(--tm-line); }
.lp-list strong { font-size: var(--tm-text-md); font-weight: 600; letter-spacing: -0.01em; }
.lp-list span { color: var(--tm-ink-muted); }
.lp-list .tm-status { white-space: nowrap; }

.lp-band { position: relative; display: grid; align-items: end; min-height: 560px; }
.lp-band .tm-photo { position: absolute; inset: 0; min-height: 0; }
.lp-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, oklch(0.2 0.03 255 / 0.72), oklch(0.2 0.03 255 / 0.05) 70%); pointer-events: none; }
.lp-band-copy { position: relative; z-index: 1; max-width: 1120px; width: 100%; margin: 0 auto; padding: var(--tm-space-8) 48px; color: var(--tm-panel); }
.lp-band-copy h2 { margin: 0 0 var(--tm-space-5); max-width: 16ch; color: var(--tm-panel); font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); line-height: 1.08; font-weight: 300; letter-spacing: -0.035em; }
.lp-band-copy .btn-primary { background: var(--tm-panel); color: var(--tm-ink); }
.lp-band-copy .btn-primary:hover { background: var(--tm-blue-wash); color: var(--tm-ink); }
.lp-band-copy .btn-secondary { color: var(--tm-panel); border-color: var(--tm-panel); }
.lp-band-copy .btn-secondary:hover { background: oklch(1 0 0 / 0.12); color: var(--tm-panel); }

.lp-footer { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; max-width: 1120px; margin: 0 auto; padding: var(--tm-space-6) 48px var(--tm-space-7); color: var(--tm-ink-muted); font-size: var(--tm-text-xs); }
.lp-footer nav { display: flex; gap: 8px; }
.lp-footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }

/* ---- Auth ------------------------------------------------------------------------------- */
.trial-match .auth-shell { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.trial-match .auth-brand { position: relative; background: var(--tm-canvas-alt); border-right: 1px solid var(--tm-line); padding: 40px 56px; }
.trial-match .auth-brand .wordmark { font-size: 1.25rem; letter-spacing: -0.02em; }
.trial-match .wordmark-mark { width: 22px; height: 22px; border-radius: 50%; background: var(--tm-cyan); }
.trial-match .wordmark-mark::before, .trial-match .wordmark-mark::after { content: none; }
.trial-match .auth-lede { max-width: 18ch; margin-bottom: var(--tm-space-6); font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.15; font-weight: 300; letter-spacing: -0.03em; }
.trial-match .entry-rules svg { color: var(--tm-blue); }
.trial-match .auth-rules li > div { color: var(--tm-ink); }
.trial-match .auth-main { background: var(--tm-canvas); }
.trial-match .auth-card { max-width: 440px; padding: 40px; border: 1px solid var(--tm-line); border-radius: 0; background: var(--tm-panel); }
.trial-match .auth-card .page-title { font-size: var(--tm-text-xl); font-weight: 400; letter-spacing: -0.025em; }
.trial-match .auth-card .field { margin-bottom: 20px; }
.trial-match .field span { margin-bottom: 6px; }

/* ---- Responsive ------------------------------------------------------------------------- */
@media (min-width: 1024px) { .tm-definition { grid-template-columns: 110px minmax(0, 1fr) 110px minmax(0, 1fr); gap: 12px 24px; } }
@media (max-width: 1023px) {
  .lp-hero { grid-template-columns: 1fr; min-height: 0; }
  .lp-hero-copy { max-width: none; margin: 0; padding: var(--tm-space-7) 32px; }
  .lp-hero .tm-photo { min-height: 420px; }
  .lp-split { grid-template-columns: 1fr; }
  .lp-split .tm-photo { min-height: 360px; }
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .tm-synthetic { padding: 6px 16px; }
  .trial-match .app-bar { padding: 8px 16px; gap: 4px 12px; }
  .trial-match .app-bar nav { display: flex; order: 3; flex: 1 1 100%; overflow-x: auto; margin: 0 -12px; }
  .trial-match .app-bar .spacer { display: none; }
  .trial-match .app-bar .brand { flex: 1 1 auto; }
  .trial-match .app-user { flex: 0 1 auto; min-width: 0; margin-left: auto; }
  .trial-match .who { min-width: 0; overflow-wrap: anywhere; }
  .trial-match .who-role { display: none; }
  /* A two-row bar would hold a third of a phone or 200% zoom viewport; let it scroll away.
     Relative, not static, so the scroll-edge fade stays anchored without a backdrop filter. */
  .trial-match .app-bar { position: relative; }
  html:has(> body.trial-match) { scroll-padding-top: 0; }
  /* Room below the form so it can scroll clear of the bottom cookie banner. */
  .trial-match .auth-main { padding-bottom: 128px; }
  .tm-workspace { padding: var(--tm-space-6) 16px var(--tm-space-8); }
  .tm-heading { display: grid; align-items: start; gap: var(--tm-space-4); }
  .trial-match h1 { font-size: var(--tm-text-xl); }
  .tm-site-label { min-width: 0; }
  .tm-footer { padding: var(--tm-space-5) 16px; }
  .tm-table { border: 0; background: transparent; }
  .tm-table caption { display: block; width: 100%; }
  .tm-table thead { display: none; }
  .tm-table, .tm-table tbody, .tm-table tr, .tm-table td { display: block; }
  .tm-table tr { margin-bottom: var(--tm-space-3); padding: var(--tm-space-2) var(--tm-space-4); background: var(--tm-panel); border: 1px solid var(--tm-line); }
  .tm-table td { width: auto !important; border: 0; padding: 10px 0; }
  .tm-table td:not(:first-child)::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--tm-ink-muted); font-size: var(--tm-text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
  .tm-definition { grid-template-columns: 1fr; gap: 2px; }
  .tm-definition dd { margin-bottom: 12px; }
  .tm-version { padding: var(--tm-space-5) var(--tm-space-4); }
  .lp-bar { padding: 12px 16px; gap: 12px; }
  .lp-bar nav a:not(.btn) { display: none; }
  .lp-hero-copy { padding: var(--tm-space-6) 16px var(--tm-space-7); }
  .lp-hero .tm-photo { min-height: 300px; }
  .lp-section { padding: var(--tm-space-8) 16px; }
  .lp-split-copy { padding: var(--tm-space-6) 20px; }
  .lp-steps { grid-template-columns: 1fr; }
  .lp-step { min-height: 0; }
  .lp-list li { grid-template-columns: 1fr; gap: 6px; }
  .lp-band-copy { padding: var(--tm-space-7) 16px; }
  .lp-footer { padding: var(--tm-space-5) 16px var(--tm-space-6); }
  .trial-match .auth-shell { grid-template-columns: 1fr; }
  .trial-match .auth-brand { padding: 24px 16px; border-right: 0; border-bottom: 1px solid var(--tm-line); }
  .trial-match .auth-card { padding: 28px 20px; }
}
@media print {
  .trial-match .app-bar, .trial-match .skip-link { display: none; }
  .tm-synthetic, .tm-footer { display: block !important; }
  .tm-workspace { padding: 20px 0; }
  .tm-version { break-inside: avoid-page; border: 0; padding: 0; }
}
/* Fine pointers do not need the 44px box; keeping it would drop the title below row-mates. */
@media (pointer: fine) and (not (any-pointer: coarse)) { .trial-match .tm-table .tm-trial-link { min-height: 0; } }
@media (max-width: 767px) {
  /* Narrow band: faces sit in the upper half, the headline on a solid-enough scrim below. */
  .lp-band { min-height: 560px; }
  .lp-band .tm-photo img { object-position: 64% 0%; }
  .lp-band::after { background: linear-gradient(to top, oklch(0.2 0.03 255 / 0.88) 38%, oklch(0.2 0.03 255 / 0) 72%); }
}

/* ---- Auth photo panel ------------------------------------------------------------------- */
.trial-match .auth-brand { overflow: hidden; justify-content: flex-start; color: var(--tm-panel); }
.auth-photo { position: absolute; inset: 0; min-height: 0; padding: 0; z-index: 0; }
.auth-photo img { object-position: 50% 20%; }
/* Light at the top for the dark wordmark, dark at the bottom for the white copy. */
.trial-match .auth-brand::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background:
  linear-gradient(to bottom, oklch(0.985 0.004 215 / 0.82), oklch(0.985 0.004 215 / 0) 18%),
  linear-gradient(to top, oklch(0.2 0.03 255 / 0.86) 26%, oklch(0.2 0.03 255 / 0) 62%); }
.trial-match .auth-brand > :not(.auth-photo) { position: relative; z-index: 1; }
.trial-match .auth-brand > div { margin-top: auto; }
.trial-match .auth-brand .wordmark { color: var(--tm-ink); }
.trial-match .auth-brand .auth-lede, .trial-match .auth-brand .auth-rules li > div, .trial-match .auth-brand summary { color: var(--tm-panel); }
.trial-match .auth-brand .entry-rules svg { color: var(--tm-blue-wash); }
.trial-match .auth-brand .auth-disclaimer { color: oklch(0.997 0.002 220 / 0.82); }
@media (max-width: 767px) {
  .trial-match .auth-brand { min-height: 240px; justify-content: space-between; }
  .auth-photo img { object-position: 50% 28%; }
}

/* ---- Round 2 polish --------------------------------------------------------------------- */
/* Ruled paragraphs span their container; only prose keeps the reading measure. */
.trial-match .tm-protocol-meta, .trial-match .tm-review-note, .trial-match .tm-meta-row { max-width: none; }
.tm-version h3 { margin-top: var(--tm-space-5); }