.protocol-page { margin:0; }
/* Evaluation protocol page (protocol.html). The article shares Benchmark's
   1440px shell and sidebar grid. Type comes from media/typography.css;
   colours reuse the benchmark-overview palette. */
.pr-page {
  --pr-ink: #203447;
  --pr-text: #34424f;
  --pr-muted: #5b6b77;
  --pr-line: #dfe5e3;
  --pr-soft: #f3f6f4;
  --pr-accent: #416b61;
  --pr-accent-soft: #e7efec;
  box-sizing: border-box;
  max-width: none;
  margin: 0 auto;
  padding: 0 0 96px;
  color: var(--pr-text);
}
.pr-page *, .pr-page *::before, .pr-page *::after { box-sizing: border-box; }
.pr-page a { color: var(--pr-accent); text-underline-offset: 3px; }

/* Preserve the approved composition with native text and a rebuilt illustration. */
.pr-hero { position:relative; isolation:isolate; overflow:clip; display:grid; grid-template-rows:1fr; min-height:calc(100svh - 90px); }
.pr-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:12px; width:100%; max-width:none; margin:0 auto; padding:60px 4vw 124px; }
.pr-head-copy { position:relative; z-index:2; min-width:0; transform:translateY(-48px); }
.pr-eyebrow { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 28px; color:var(--pr-accent); font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.pr-eyebrow span { color:var(--pr-muted); font-weight:500; letter-spacing:0; text-transform:none; }
.pr-eyebrow span::before { content:"·"; margin-right:10px; color:#a9b5b0; }
.pr-head h1 { margin:0; color:var(--pr-ink); font-size:clamp(38px,4.65vw,90px); line-height:1.1; font-weight:750; letter-spacing:-.01em; word-spacing:.1em; }
.pr-head h1 span { display:block; white-space:nowrap; }
.pr-lead { max-width:760px; margin:28px 0 0; color:var(--pr-muted); font-size:clamp(18px,1.4vw,27px); line-height:1.75; text-wrap:pretty; }
.pr-facts { display:grid; grid-template-columns:.8fr 1.2fr; align-items:baseline; gap:28px 30px; margin:38px 0 0; padding:0; }
.pr-facts div { display:flex; align-items:baseline; gap:7px; white-space:nowrap; }
.pr-facts dt { order:2; color:var(--pr-muted); font-size:clamp(14px,1.1vw,21px); }
.pr-facts dd { order:1; margin:0; color:var(--pr-ink); font-size:clamp(32px,2.6vw,50px); line-height:1; font-weight:700; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
/* Rebuilt illustration has no baked-in labels. Text and curves remain sharp
   at every device pixel ratio; desktop layers share the approved lunar frame. */
.pr-hero-visual { position:absolute; z-index:1; width:56vw; max-width:1120px; top:24px; right:0; margin:0; }
.pr-hero-scene { position:relative; width:100%; aspect-ratio:1300 / 1210; }
.pr-hero-artwork { display:block; width:100%; height:auto; }
.pr-episode-artwork { display:none; }
.pr-scene-labels { position:absolute; inset:39% 0 auto; margin:0; padding:0; list-style:none; }
.pr-scene-labels li { position:absolute; display:grid; justify-items:center; gap:7px; transform:translateX(-50%); white-space:nowrap; }
.pr-scene-labels li:nth-child(1) { left:12%; }
.pr-scene-labels li:nth-child(2) { left:53%; }
.pr-scene-labels li:nth-child(3) { left:88%; }
.pr-scene-labels strong { padding:5px 12px; border:1px solid #dce2d9; border-radius:6px; background:#f7f8f1ed; color:var(--pr-accent); font-size:clamp(12px,1.08vw,19px); line-height:1.3; font-weight:650; }
.pr-scene-labels span { font-size:clamp(11px,.85vw,15px); line-height:1.4; color:var(--pr-ink); }
.pr-scene-arrows { position:absolute; top:calc(39% + 62px); left:0; width:100%; height:9%; color:var(--pr-accent); overflow:visible; }
.pr-scene-arrows path,.pr-scene-arrows circle { vector-effect:non-scaling-stroke; }
.pr-hero-visual figcaption { position:absolute; right:2%; bottom:max(8%,calc(100% - 100svh + 194px)); padding:5px 9px; border:1px solid #e0e4dc; border-radius:5px; background:#f7f8f1ed; color:var(--pr-muted); font-size:11px; line-height:1.4; }
.pr-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* A Benchmark-style rule finishes the first screen with four section links. */
.pr-hero-links { position:absolute; z-index:3; inset:auto 4vw 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; min-height:56px; padding:16px 0; border-top:1px solid var(--pr-line); background:#fff; }
.pr-hero-links a { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; color:var(--pr-accent); font-size:14px; line-height:1.6; font-weight:500; text-decoration:none; }
.pr-hero-links a + a { padding-left:24px; border-left:1px solid var(--pr-line); }
.pr-hero-links a:hover { color:var(--pr-ink); text-decoration:underline; }
.pr-hero-links a:focus-visible { outline:2px solid var(--pr-accent); outline-offset:5px; }
.pr-hero-links span { flex:none; }

/* Keep the lunar dome at its approved scale. Place the episode separately so
   its keyboard, contact inset and caption fit inside even a short first screen.
   Both layers reuse the original high-resolution source without resampling. */
@media (min-width:1041px) {
 .pr-facts { transform:translateY(clamp(36px,5svh,54px)); }
 .pr-hero-scene { --pr-episode-height:calc(min(56vw,1120px) * .96 * 560 / 1300); height:calc(100svh - 150px); aspect-ratio:auto; }
 .pr-hero-artwork { clip-path:inset(0 0 46% 0); mask-image:linear-gradient(#000 0 min(43%,calc(100svh - 260px - var(--pr-episode-height))),transparent min(54%,calc(100svh - 180px - var(--pr-episode-height)))); }
 .pr-episode-artwork { display:block; position:absolute; left:-1%; bottom:30px; width:96%; height:var(--pr-episode-height); overflow:clip; }
 .pr-episode-artwork img { position:absolute; bottom:0; display:block; width:100%; height:auto; }
 .pr-scene-labels { top:calc(100% - var(--pr-episode-height) - 110px); }
 .pr-scene-arrows { top:calc(100% - var(--pr-episode-height) - 48px); height:58px; }
 .pr-hero-visual figcaption { bottom:auto; top:calc(100svh - 208px); left:43%; right:auto; }
}





/* ---- Two-column body: sticky contents + article */
.pr-layout { display:grid; grid-template-columns:200px minmax(0,1fr); gap:30px; max-width:1440px; padding-inline:48px; margin:64px auto 0; }
.pr-article { min-width:0; }
.pr-toc { position: sticky; top: 110px; align-self: start; }
.pr-toc p { margin: 0 0 12px; color: var(--pr-muted); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.pr-toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--pr-line); }
.pr-toc a { display: block; margin-left: -1px; padding: 10px 12px 10px 16px; border-left: 2px solid transparent; color: var(--pr-muted); font-size: 15px; line-height: 1.55; text-decoration: none; }
.pr-toc a:hover { color: var(--pr-ink); }
.pr-toc a[aria-current=true] { border-left-color: var(--pr-accent); color: var(--pr-ink); font-weight: 600; }

.pr-article > section { padding: 0 0 72px; scroll-margin-top: 110px; }
.pr-article > section + section { padding-top: 64px; border-top: 1px solid var(--pr-line); }
.pr-article h2 { margin: 0 0 22px; color: var(--pr-ink); font-size: 32px; line-height: 1.3; font-weight: 650; letter-spacing: -.02em; }
.pr-article h3 { margin: 0 0 14px; color: var(--pr-ink); font-size: 20px; line-height: 1.45; font-weight: 600; letter-spacing: -.01em; }
.pr-article p { margin: 0 0 24px; font-size: 17px; line-height: 1.85; }
.pr-article > section > p { max-width:76ch; }
.pr-article p.pr-section-lead { color: var(--pr-muted); font-size: 19px; line-height: 1.8; }
.pr-article code { padding: .1em .35em; border-radius: 5px; background: var(--pr-soft); color: var(--pr-ink); font-size: .88em; }

/* Callouts (RoboDojo: left-ruled notice box) */
.pr-callout { margin: 0 0 64px; padding: 26px 30px; border: 1px solid #cfdcd7; border-left: 4px solid var(--pr-accent); border-radius: 10px; background: var(--pr-accent-soft); }
.pr-callout p { margin: 0; font-size: 17px; line-height: 1.85; }
.pr-callout strong { color: var(--pr-ink); }

/* Track cards */
.pr-tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 32px 0 28px; }
.pr-track { display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--pr-line); border-radius: 14px; background: #fff; }
.pr-track-tag { align-self: flex-start; margin: 0 0 14px; padding: 4px 10px; border-radius: 999px; background: var(--pr-soft); color: var(--pr-accent); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pr-track p { font-size: 17px; line-height: 1.85; }
.pr-track p.pr-track-tag { margin-bottom:22px; font-size:12px; line-height:1.6; }
.pr-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: auto 0 0; padding: 14px 0 0; border-top: 1px dashed var(--pr-line); list-style: none; }
.pr-flow li { padding: 5px 9px; border-radius: 6px; background: var(--pr-soft); color: var(--pr-ink); font-family: var(--m2a-font-mono); font-size: 13px; }
.pr-flow li.pr-arrow { padding: 0 2px; background: none; color: #9aa9a3; font-family: var(--m2a-font-sans); }

/* Chip grid: what an instance fixes, what a result discloses */
.pr-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 28px 0 24px; padding: 0; list-style: none; }
.pr-chips li { padding: 20px; border: 1px solid var(--pr-line); border-radius: 10px; background: #fff; }
.pr-chips b { display: block; color: var(--pr-ink); font-size: 15.5px; font-weight: 600; }
.pr-chips span { display: block; margin-top: 10px; color: var(--pr-muted); font-size: 15px; line-height: 1.75; }

/* Numbered rules (RoboDojo requirement cards) */
.pr-rules { margin: 28px 0 24px; padding: 0; list-style: none; counter-reset: pr-rule; display: grid; gap: 16px; }
.pr-rules li { counter-increment: pr-rule; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px 24px; border: 1px solid var(--pr-line); border-radius: 12px; background: #fff; font-size: 17px; line-height: 1.85; }
.pr-rules li::before { content: counter(pr-rule); display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; background: var(--pr-accent-soft); color: var(--pr-accent); font-size: 13px; font-weight: 700; }
.pr-rules strong { color: var(--pr-ink); }

/* Clock comparison */
.pr-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 22px 0 18px; border: 1px solid var(--pr-line); border-radius: 14px; overflow: hidden; }
.pr-compare > div { padding: 30px; }
.pr-compare > div + div { border-left: 1px solid var(--pr-line); background: var(--pr-soft); }
.pr-compare p { font-size: 17px; line-height: 1.85; }
.pr-compare dl { margin: 14px 0 0; display: grid; gap: 8px; font-size: 15px; }
.pr-compare dl div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; }
.pr-compare dt { color: var(--pr-muted); }
.pr-compare dd { margin: 0; color: var(--pr-ink); font-weight: 500; }

/* Metric cards and formula */
.pr-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 28px 0; }
.pr-metric { padding: 26px; border: 1px solid var(--pr-line); border-radius: 12px; }
.pr-metric-value { display: block; margin: 0 0 10px; color: var(--pr-ink); font-family: var(--m2a-font-mono); font-size: 22px; font-weight: 600; }
.pr-metric p { margin: 0; font-size: 16px; line-height: 1.8; }
.pr-formula { margin: 8px 0 20px; padding: 18px 22px; border-radius: 12px; background: #17232e; color: #e8efec; font-family: var(--m2a-font-mono); font-size: 15px; line-height: 1.9; overflow-x: auto; }
.pr-formula span { color: #9fb7b0; }

/* Diagnostic table */
.pr-table-wrap { margin: 20px 0 8px; border: 1px solid var(--pr-line); border-radius: 12px; overflow-x: auto; }
.pr-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.pr-table th, .pr-table td { padding: 18px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--pr-line); }
.pr-table tr:last-child td { border-bottom: 0; }
.pr-table thead th { background: var(--pr-soft); color: var(--pr-muted); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.pr-table tbody th { width: 32%; color: var(--pr-ink); font-weight: 600; }
.pr-table td { color: var(--pr-text); line-height: 1.8; }

/* Submission steps (embodied-first-exam.ai: "From proposal to leaderboard") */
.pr-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 32px 0 12px; padding: 0; list-style: none; counter-reset: pr-step; }
.pr-steps li { position: relative; counter-increment: pr-step; }
.pr-steps li::before { content: "0" counter(pr-step); display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 14px; border-radius: 50%; background: var(--pr-ink); color: #fff; font-family: var(--m2a-font-mono); font-size: 12px; font-weight: 600; }
.pr-steps h3 { font-size: 17px; margin-bottom: 6px; }
.pr-steps p { margin: 0; color: var(--pr-muted); font-size: 16px; line-height: 1.8; }

/* Closing call to action */
.pr-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 8px; padding: 36px 40px; border-radius: 20px; background: #17232e; color: #e8efec; }
.pr-cta h2 { margin: 0 0 6px; color: #fff; font-size: 30px; }
.pr-cta p { margin: 0; color: #b9c7c3; font-size: 16px; }
.pr-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pr-cta-actions a { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 11px 20px; border: 1px solid #ffffff40; border-radius: 999px; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
.pr-cta-actions a:first-child { background: #f2f6ee; border-color: #f2f6ee; color: #203447; }
.pr-cta-actions a:hover { border-color: #c3e3d6; }

.pr-footer { max-width: 1440px; margin: 0 auto; padding: 28px 48px 48px; border-top: 1px solid var(--pr-line, #dfe5e3); color: #5b6b77; font-size: 14px; }

@media (max-width:1180px) and (min-width:1041px) {
  .pr-layout { grid-template-columns:180px minmax(0,1fr); gap:24px; }
}
@media (max-width:1100px) and (min-width:1041px) {
  .pr-layout { padding-inline:32px; }
}

@media (max-width: 1040px) {
  .pr-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pr-toc { position: static; margin-bottom: 32px; }
  .pr-toc ol { display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
  .pr-toc a { margin: 0; padding: 7px 14px; border: 1px solid var(--pr-line); border-radius: 999px; font-size: 14px; }
  .pr-toc a[aria-current=true] { border-color: var(--pr-accent); }
  .pr-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .pr-steps::before { display: none; }
}
@media (max-width: 760px) {
  .pr-page { padding: 28px 16px 72px; }
  .pr-head { padding-top: 12px; }
  .pr-eyebrow { flex-direction: column; align-items: flex-start; gap: 4px; }
  .pr-eyebrow span::before { display: none; }
  .pr-lead { font-size: 17px; }
  .pr-article h2 { font-size: 27px; }
  .pr-article > section { padding-bottom:48px; }
  .pr-article > section + section { padding-top:40px; }
  .pr-callout { margin-bottom:40px; padding:22px; }
  .pr-track, .pr-compare > div { padding:24px; }
  .pr-tracks, .pr-compare, .pr-metrics { grid-template-columns: minmax(0, 1fr); }
  .pr-compare > div + div { border-left: 0; border-top: 1px solid var(--pr-line); }
  .pr-chips { grid-template-columns: minmax(0, 1fr); }
  .pr-steps { grid-template-columns: minmax(0, 1fr); }
  .pr-cta { padding: 28px 22px; }
  .pr-footer { padding-inline: 16px; }
}


@media (max-width:1200px) and (min-width:1041px) {
 .pr-head { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:6px; padding-inline:32px; }
 .pr-head h1 { font-size:clamp(30px,3.6vw,44px); }
 .pr-eyebrow { font-size:10px; gap:6px; }
 .pr-eyebrow span::before { margin-right:6px; }
 .pr-lead { font-size:15px; margin-top:24px; }
 .pr-facts { gap:8px; margin-top:30px; }
 .pr-facts div { gap:4px; }
 .pr-facts dt { font-size:11px; }
 .pr-facts dd { font-size:28px; }



}
@media (max-width:1040px) {
 .pr-page { padding:0 0 64px; }
 .pr-hero { grid-template-rows:1fr auto; min-height:calc(100svh - 74px); }
 .pr-head { display:block; padding:28px 20px 24px; }
 .pr-head-copy { transform:none; }
 .pr-eyebrow { font-size:10px; gap:5px; margin-bottom:22px; }
 .pr-eyebrow span::before { display:none; }
 .pr-head h1 { font-size:clamp(24px,6.4vw,46px); line-height:1.14; }
 .pr-head h1 span { white-space:normal; }
 .pr-lead { font-size:15px; line-height:1.65; margin-top:22px; }
 .pr-facts { grid-template-columns:1fr 1.45fr; gap:20px 16px; margin-top:26px; }
 .pr-facts div { align-items:baseline; gap:6px; white-space:normal; }
 .pr-facts dd { font-size:26px; }
 .pr-facts dt { font-size:11px; }
 .pr-hero-visual { position:relative; width:100%; max-width:620px; top:0; margin:32px auto 0; }
 .pr-scene-labels { top:37%; }
 .pr-scene-arrows { top:calc(37% + 46px); }
 .pr-scene-labels strong { font-size:11px; padding:4px 6px; }
 .pr-scene-labels span { font-size:10px; }
 .pr-scene-labels li { gap:4px; }
 .pr-scene-labels li:nth-child(3) { left:86%; }
 .pr-hero-visual figcaption { bottom:8%; font-size:10px; padding:3px 6px; }
 .pr-hero-links { position:relative; inset:auto; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; margin:0 20px; padding:12px 0; }
 .pr-hero-links a { min-height:44px; font-size:12px; }
 .pr-hero-links a + a { padding-left:0; border-left:0; }



 .pr-layout { padding-inline:20px; margin-top:32px; }
}

@media (min-width:1041px) and (max-height:800px) {
 .pr-head { padding-top:36px; padding-bottom:100px; }
 .pr-head h1 { font-size:clamp(38px,4.05vw,64px); }
 .pr-lead { max-width:calc(100% - 96px); font-size:16px; line-height:1.65; margin-top:22px; }
 .pr-facts { margin-top:28px; gap:22px 30px; }
 .pr-facts dd { font-size:32px; }
 .pr-facts dt { font-size:12px; }
 .pr-facts { transform:translateY(48px); }
}

@media (min-width:1041px) and (max-width:1200px) {
 .pr-scene-labels strong { font-size:11px; padding:4px 7px; }
 .pr-scene-labels span { font-size:10px; }
}
