/* /real-example styles. Layers on top of base.css, which holds the shared
   design system (palette, type, container, buttons, header, footer,
   accent rule, centered close).

   The page is a menu fixed down the left and one claim at a time beside
   it (see the header of real-example.ejs). Its sections are built from
   the audience pages' frames (sales.css, which copied them from
   marketing.css), with their class names (.mk-*) kept, so the pages read
   as one system; those frames belong in a shared stylesheet once the
   pages settle.

   LOAD ORDER. The head partial loads this file straight after base.css,
   and the template then loads the sheets of the components brought over
   from site-v3-story-a (showcase.css, example.market-insights.css,
   how.css, monthly.css, demo.css). So every rule here is scoped under
   .rx (the page's <main>) to win on specificity, never on order. The
   menu-and-views rules at the end are scoped one class further, under
   .rx.rxs or html.rxs-page.

   THE SEVEN SECTIONS' OWN STYLES are imported first, below, one file per
   section under css/real-example/, in page order. An @import comes
   before every rule in this file in the cascade, so a section rule only
   beats a frame rule here by being more specific: scope every section
   rule under its section, e.g.

     .rx #committee .plate { ... }        beats   .rx .plate { ... }

   Use only base.css tokens. No amber anywhere on this page. */
@import url('/static/css/real-example/committee.css');
@import url('/static/css/real-example/dashboard.css');
@import url('/static/css/real-example/problems.css');
@import url('/static/css/real-example/ranked.css');
@import url('/static/css/real-example/standard.css');
@import url('/static/css/real-example/monthly.css');

/* ── Header, on a phone ─────────────────────────────────────────── */

/* As on the audience pages: this hero carries no button, so on a phone
   the header keeps its "Get a custom plan" beside the menu button,
   compact. Below 360px there is no room, and the menu carries it. The
   header sits outside <main>, so this one block is not scoped under .rx;
   this sheet loads on /real-example only. */
@media (max-width: 900px) {
  .bar .bar-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-left: auto;
    margin-right: -6px;
    padding: 0 14px;
    font-size: 14px;
  }
  .bar-inner { gap: 12px; }
  /* The open menu carries its own button; never show two. */
  body.mobile-menu-open .bar .bar-cta { visibility: hidden; }
}
@media (max-width: 359px) {
  .bar .bar-cta { display: none; }
}

/* ── Utilities ──────────────────────────────────────────────────── */

/* Read aloud, never seen. */
.rx .rx-vh {
  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;
  border: 0;
}

/* ── The overview's lede, and the TieOut note ────────────────────── */

/* The overview's subhead, at the lede size every hero on this line uses. */
.rx .mk-hero-sub {
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.52;
  color: var(--body);
  margin-top: 26px;
  max-width: 25em;
}

/* The one line about what is invented, set as an evidence record
   (DESIGN.md): Surface 2, a hairline, 8px radius, Caption in Muted. Its
   link opens the About TieOut tab of the slide-in panel, so it is a
   button drawn as a link. */
.rx .rx-note {
  margin-top: 26px;
  max-width: 34em;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
.rx .rx-note-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.rx .rx-note-link:hover { color: var(--teal-deep); text-decoration-color: currentColor; }
.rx .rx-arrow {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease;
}
.rx .rx-note-link:hover .rx-arrow { transform: translateX(2px); }

/* ── Plate titles ───────────────────────────────────────────────── */

/* Plate title: Outfit 600, about 17px (DESIGN.md, inside pictures). */
.rx .rx-plate-title {
  padding: 0 24px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.014em;
  line-height: 1.3;
  color: var(--ink);
}
@media (max-width: 520px) {
  .rx .rx-plate-title { padding: 0 18px; }
}

/* ── Tags: the audiences each claim is made to ─────────────────── */

/* The neutral pill (DESIGN.md): 12px, 600, 5px radius, Pill None ground,
   Muted text. Sales and Marketing look identical on purpose: no verdict
   colour, and Blue is taken. */
.rx .rx-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
  list-style: none;
}
.rx .rx-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 5px;
  background: var(--pill-none-bg);
  font-family: var(--text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Sections ───────────────────────────────────────────────────── */

/* The audience pages' band padding. Grounds in the All view run Paper
   (hero), Tint, Paper, Tint, Paper, Tint, Paper, Tint, Paper (close);
   real-example.js re-alternates them when the filter hides some. */
.rx .rx-sec { padding: 96px 0 104px; }
@media (max-width: 700px) {
  .rx .rx-sec { padding: 68px 0 76px; }
}

.rx .mk-head h2 { max-width: 19.5em; }

/* The line under each heading that places the claim in TieOut's world:
   lede size, a measure the headline sets. */
.rx .rx-lede {
  margin-top: 18px;
  max-width: 36em;
  font-size: 19.5px;
  line-height: 1.62;
  color: var(--body);
}
@media (max-width: 700px) {
  .rx .rx-lede { font-size: 18px; }
}

/* What a team does with it (since 2026-10-12): one sentence under the
   lede, set apart as the takeaway: Ink, a little heavier, on a short
   Teal rule, the site's one positive accent. */
.rx .rx-use {
  margin-top: 16px;
  max-width: 36em;
  padding-left: 16px;
  border-left: 3px solid var(--teal);
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
}
@media (max-width: 700px) {
  .rx .rx-use { font-size: 16.5px; padding-left: 14px; }
}

/* ── Rows: one point of copy beside its picture ─────────────────── */

.rx .mk-rows {
  display: grid;
  gap: 88px;
  margin-top: 56px;
}
@media (max-width: 1040px) {
  .rx .mk-rows { gap: 64px; margin-top: 44px; }
}

/* Copy 5 parts, picture 7: at 1440 the plate is about 674px wide.
   .is-flip puts the picture on the left. */
.rx .mk-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: center;
}
.rx .mk-row.is-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.rx .mk-row.is-flip .mk-copy { order: 2; }
.rx .mk-row.is-flip .vis,
.rx .mk-row.is-flip .plate { order: 1; }

/* At 1040 and below, copy always sits above its picture. */
@media (max-width: 1040px) {
  .rx .mk-row,
  .rx .mk-row.is-flip { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .rx .mk-row.is-flip .mk-copy,
  .rx .mk-row.is-flip .vis,
  .rx .mk-row.is-flip .plate { order: 0; }
}

/* A point of copy at lede size. */
.rx .mk-point {
  font-size: 19px;
  line-height: 1.6;
  color: var(--body);
  max-width: 26em;
}
@media (max-width: 700px) {
  .rx .mk-point { font-size: 18px; }
}

/* Hairline rows, not bullets: on these pages a dot is an account. */
.rx .mk-list {
  list-style: none;
  margin-top: 26px;
  max-width: 30em;
  border-top: 1px solid var(--rule);
}
.rx .mk-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--body);
}
.rx .mk-list b { color: var(--ink); font-weight: 600; }

/* ── The plate every picture sits on ────────────────────────────── */

/* Surface, 1px Rule, 14px radius, no shadow. */
.rx .plate {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}

/* A plate the full width of the container (about 1220px at 1440), for
   a section with no copy beside it. Not .vis, which is capped at 680px
   from 1040 down. */
.rx .plate.rx-wide { width: 100%; margin-top: 56px; }
@media (max-width: 1040px) {
  .rx .plate.rx-wide { margin-top: 44px; }
}

/* A picture's plate, as on the audience pages: it sets its shape and
   inner padding through four custom properties in its own section
   (--vis-ratio, --vis-ratio-phone, --vis-pad, --vis-pad-phone), and
   reads the verdict fills and score ink from the four below. */
.rx .vis {
  --v-target: rgba(0, 168, 138, 0.95);
  --v-monitor: rgba(47, 99, 218, 0.55);
  --v-hold: rgba(118, 127, 137, 0.45);
  --score-ink: rgba(17, 22, 27, 0.62);
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  aspect-ratio: var(--vis-ratio, 1.6 / 1);
  padding: var(--vis-pad, 26px);
  font-family: var(--text);
  color: var(--ink);
}
@media (max-width: 1040px) {
  .rx .vis { max-width: 680px; }
}
@media (max-width: 520px) {
  .rx .vis {
    aspect-ratio: var(--vis-ratio-phone, 0.95 / 1);
    padding: var(--vis-pad-phone, 18px);
  }
}

/* ── The map's key (how.css, site-v3-story-a) ───────────────────── */

/* Chris's commit 6722a5f deleted these selectors from how.css but left
   their declarations behind, which blanks the key's swatches and makes
   the browser drop the .hw-map-note rule after them. The rules as they
   stood in 77e046b, restored here rather than in his file. */
.rx .hw-sw-engage { background: var(--teal-deep); }
.rx .hw-sw-rest { background: var(--muted); opacity: 0.55; }
/* The key's "opens" swatch is the dot itself: an Ink dot inside a ring. */
.rx .hw-sw-open {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
}
.rx .hw-sw-open::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--ink);
}
.rx .hw-map-note { margin-left: auto; font-size: 14px; color: var(--muted); }
@media (max-width: 700px) {
  .rx .hw-map-note { margin-left: 0; flex-basis: 100%; font-size: 13.5px; }
}

/* ── The close ──────────────────────────────────────────────────── */

/* The audience pages' close, word for word and drawn the same. */
.rx .mk-plan { padding: 104px 0 96px; }
.rx .mk-plan .accent-rule { margin-left: auto; margin-right: auto; }
.rx .mk-plan h2 { font-size: clamp(33px, 4.5vw, 57px); }
.rx .mk-plan-body {
  margin: 22px auto 0;
  max-width: 31em;
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--body);
}
.rx .mk-plan .actions { margin-top: 30px; }

/* Two rows of unread accounts, hollow Slate rings, with the read line
   waiting at their edge in Ink at 35%. Drawn twice, 32 a row and 18 a
   row, and the width picks one. */
.rx .mk-unread {
  margin: 56px auto 0;
  max-width: 760px;
}
.rx .mk-unread svg { display: block; width: 100%; height: auto; }
.rx .mk-unread-narrow { display: none !important; }
@media (max-width: 520px) {
  .rx .mk-unread-wide { display: none !important; }
  .rx .mk-unread-narrow { display: block !important; }
}
.rx .mk-unread-rings circle {
  fill: none;
  stroke: rgba(183, 190, 196, 0.95);
  stroke-width: 1.2;
}
.rx .mk-unread-line {
  fill: none;
  stroke: rgba(17, 22, 27, 0.35);
  stroke-width: 1.6;
}


/* ════ THE MENU AND THE VIEWS ══════════════════════════════════════ */

/* What makes this page one claim at a time: the menu fixed down the left,
   one view beside it, chosen by the address. These were
   real-example-split.css while the layout was compared with the long
   page. */

/* ── The page ───────────────────────────────────────────────────── */

/* Anchors clear the header alone (base.css's 76px). And no smooth
   scrolling: a view opens at its top rather than gliding there from where
   the last one was read. */
html.rxs-page {
  scroll-padding-top: 76px;
  scroll-behavior: auto;
}

/* The header runs the full width here, as the menu and the view do, its
   wordmark on the menu's left edge (20px of menu and 12px of row) rather
   than in the centered column the long page's header keeps. The header
   sits outside <main>, so this is scoped to the page's html instead. */
@media (min-width: 901px) {
  html.rxs-page .bar .container {
    max-width: none;
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* The menu, then the views: a fifth of the screen within bounds, and the
   rest. */
.rx.rxs {
  display: grid;
  grid-template-columns: clamp(248px, 20vw, 320px) minmax(0, 1fr);
  align-items: start;
}

/* ── The menu ───────────────────────────────────────────────────── */

/* Fixed under the 61px header for the whole height of the screen, on
   Paper with a hairline down its edge. Its z-index holds the claims that
   open beside it over the view, and under the header's 40. */
.rx.rxs .rxs-side {
  --rxs-pad: 20px;
  position: sticky;
  top: 61px;
  z-index: 35;
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: calc(100vh - 61px);
  padding: 28px var(--rxs-pad) 24px;
  border-right: 1px solid var(--rule);
  background: var(--bg);
}

/* The hero list's own title, in the filter label's Micro type. */
.rx.rxs .rxs-label {
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The rows: each claim's number in Teal Deep, as on the hero's list, and
   its short name. The Overview row takes no number. */
.rx.rxs .rxs-nav {
  list-style: none;
  display: grid;
  gap: 2px;
  margin-top: 12px;
  counter-reset: rxs;
}
.rx.rxs .rxs-item { position: relative; }
.rx.rxs .rxs-item:not(.is-overview) { counter-increment: rxs; }
.rx.rxs .rxs-nav a {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ink);
  transition: background 160ms ease, color 160ms ease;
}
.rx.rxs .rxs-nav a::before {
  content: counter(rxs);
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--teal-deep);
}
.rx.rxs .rxs-item.is-overview a::before { content: ""; }
.rx.rxs .rxs-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}
@media (hover: hover) {
  .rx.rxs .rxs-nav a:hover { background: var(--tint); }
}
.rx.rxs .rxs-nav a:focus-visible { outline-offset: -3px; }

/* The view showing: Ink with white type, as the filter's pressed button
   and the running head are, its number in the Teal the dark band's
   labels take. */
.rx.rxs .rxs-nav a[aria-current="true"],
.rx.rxs .rxs-nav a[aria-current="true"]:hover {
  background: var(--ink);
  color: var(--surface);
}
.rx.rxs .rxs-nav a[aria-current="true"]::before { color: var(--teal); }

/* Each claim in full, beside its short name over the view: a white plate
   with the Ink hairline floating things take on this page, shown after a
   moment's hover or on focus. Always in the link, so a screen reader reads
   the claim with its name, and never in the pointer's way. */
.rx.rxs .rxs-sub {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--rxs-pad) + 12px);
  width: max-content;
  max-width: 340px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  opacity: 0;
  transform: translate(-6px, -50%);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}
@media (hover: hover) {
  .rx.rxs .rxs-nav a:hover .rxs-sub {
    opacity: 1;
    transform: translate(0, -50%);
    transition: opacity 200ms ease-out 160ms, transform 280ms cubic-bezier(0.16, 1, 0.3, 1) 160ms;
  }
}
.rx.rxs .rxs-nav a:focus-visible .rxs-sub {
  opacity: 1;
  transform: translate(0, -50%);
}
/* Not for the view showing: its claim is the heading right beside it, and
   the pointer that chose it would otherwise leave this over that heading. */
.rx.rxs .rxs-nav a[aria-current="true"] .rxs-sub { display: none; }

/* The note about what is invented, at the menu's foot, so it is in view
   whichever claim a link opens on. */
.rx.rxs .rxs-note {
  margin-top: auto;
  max-width: none;
  padding: 12px 14px;
  font-size: 13.5px;
}

/* A short screen: the menu scrolls rather than losing its foot, and the
   claims beside it go, since a scrolling menu would clip them. */
@media (max-height: 640px) and (min-width: 901px) {
  .rx.rxs .rxs-side { overflow-y: auto; }
  .rx.rxs .rxs-sub { display: none; }
}

/* ── The views ──────────────────────────────────────────────────── */

/* One at a time, chosen by the address: the view that is, or holds, the
   target, or the overview when there is none. real-example.js
   follows the same rule to mark the menu. Each fills the screen beside the
   menu, so a short one keeps its ground down to the fold. */
.rx.rxs .rxs-pane { min-width: 0; }
.rx.rxs .rxs-pane > [data-rxs-view] { display: none; }
.rx.rxs .rxs-pane > [data-rxs-view]:target,
.rx.rxs .rxs-pane > [data-rxs-view]:has(:target),
.rx.rxs .rxs-pane:not(:has(:target)) > .rxs-overview { display: block; }
.rx.rxs .rxs-view { min-height: calc(100vh - 61px); }

/* A claim alone, so less of the long page's run-up above its heading,
   and no hairline over it. */
.rx.rxs .rx-sec { padding: 56px 0 72px; border-top: 0; }
.rx.rxs .mk-plan { padding: 72px 0; border-top: 0; }
@media (max-width: 700px) {
  .rx.rxs .rx-sec { padding: 44px 0 56px; }
}

/* The overview: the hero's headline and line, then every claim in full
   under its short name, in hairline rows. */
.rx.rxs .rxs-overview { padding: 56px 0 72px; }
.rx.rxs .rxs-overview h1 { font-size: clamp(33px, 4.2vw, 57px); max-width: 12em; }
.rx.rxs .rxs-overview .mk-hero-sub { max-width: 34em; }

/* The film beside them (since 2026-10-12): on a wide screen it takes a
   column of its own to the right, level with the headline, and the
   headline, line and list share the left; narrower, it sits between the
   line and the list. */
.rx.rxs .rxs-overview .film { max-width: 460px; margin-top: 36px; }
@media (min-width: 1240px) {
  .rx.rxs .rxs-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "title film" "intro film" "toc film";
    column-gap: 56px;
    align-items: start;
  }
  .rx.rxs .rxs-overview-grid > h1 { grid-area: title; }
  .rx.rxs .rxs-overview-grid > .mk-hero-sub { grid-area: intro; }
  .rx.rxs .rxs-overview-grid > .film { grid-area: film; margin-top: 8px; }
  .rx.rxs .rxs-overview-grid > .rxs-toc { grid-area: toc; }
}
@media (min-width: 1500px) {
  .rx.rxs .rxs-overview-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); column-gap: 72px; }
}

.rx.rxs .rxs-toc {
  list-style: none;
  max-width: 760px;
  margin-top: 44px;
  border-top: 1px solid var(--rule);
  counter-reset: rxs-toc;
}
.rx.rxs .rxs-toc li {
  counter-increment: rxs-toc;
  border-bottom: 1px solid var(--rule);
}
.rx.rxs .rxs-toc a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 4px 16px;
  padding: 18px 8px;
  color: var(--ink);
}
.rx.rxs .rxs-toc a::before {
  content: counter(rxs-toc);
  grid-row: 1 / span 2;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--teal-deep);
}
.rx.rxs .rxs-toc-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.014em;
  line-height: 1.3;
  transition: color 160ms ease;
}
.rx.rxs .rxs-toc-claim {
  font-size: 16px;
  line-height: 1.5;
  color: var(--body);
}
@media (hover: hover) {
  .rx.rxs .rxs-toc a:hover .rxs-toc-name { color: var(--teal-deep); }
}
.rx.rxs .rxs-toc a:focus-visible { outline-offset: -3px; }

/* The link to the next claim at the foot of each, the last to the close:
   a hairline, the Micro label, the next one's short name in Outfit. */
.rx.rxs .rxs-next {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-top: 80px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  color: var(--ink);
}
.rx.rxs .rxs-next-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.rx.rxs .rxs-next-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.018em;
  line-height: 1.26;
  transition: color 160ms ease;
}
.rx.rxs .rxs-next .rx-arrow { align-self: center; }
@media (hover: hover) {
  .rx.rxs .rxs-next:hover .rxs-next-name { color: var(--teal-deep); }
  .rx.rxs .rxs-next:hover .rx-arrow { transform: translateX(3px); }
}

/* ── Narrower screens ───────────────────────────────────────────── */

/* The view is a fifth narrower than the screen, so the long page's
   copy-beside-picture rows go to one column here at 1279px rather than
   at 1040px, where its own rule does it (above, Rows). */
@media (max-width: 1279px) {
  .rx.rxs .mk-rows { gap: 64px; margin-top: 44px; }
  .rx.rxs .mk-row,
  .rx.rxs .mk-row.is-flip { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .rx.rxs .mk-row.is-flip .mk-copy,
  .rx.rxs .mk-row.is-flip .vis,
  .rx.rxs .mk-row.is-flip .plate { order: 0; }
  .rx.rxs .vis { max-width: 680px; }
  .rx.rxs .plate.rx-wide { margin-top: 44px; }
}

/* Where the header's own menu button takes over, there is no room for a
   menu beside the view: it sits above it instead, its rows in two
   columns, then one on a phone, and the claims beside them go. Choosing a
   row puts its view at the top of the screen. */
@media (max-width: 900px) {
  .rx.rxs { display: block; }
  .rx.rxs .rxs-side {
    position: static;
    gap: 18px;
    height: auto;
    padding: 20px;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .rx.rxs .rxs-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rx.rxs .rxs-sub { display: none; }
  .rx.rxs .rxs-view { min-height: 0; }
}
@media (max-width: 520px) {
  .rx.rxs .rxs-nav { grid-template-columns: minmax(0, 1fr); }
}

/* ══ The five-view layout (Rex, 2026-10-10) ═══════════════════════════
   Built and tested as /real-example-five, scoped under .rx5 (the class
   main carries) so it layered over the seven-view page without touching
   it; kept under that scope now it is the page.

     - the market view's second section (problems by volume): its spacing,
       and its headline as a subheading;
     - the standard as rows that open one at a time (standard.ejs);
     - the pointer to the dashboard's filters, and the stage table's row
       groups as buttons (both driven by real-example.js);
     - the committee's names as buttons, and seniority as a plain pill. */

/* ── The market view's second section ──────────────────────────── */

.rx5 .rx5-part { margin-top: 88px; }
@media (max-width: 700px) {
  .rx5 .rx5-part { margin-top: 64px; }
}

/* A line standing alone between two plates: the lede's size and measure,
   with room under it like the one under a heading. */
.rx5 .rx5-lede { margin: 0 0 32px; }

/* Title, card (DESIGN.md): problems by volume's claim under the
   dashboard's. */
.rx5 .rx5-subhead {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 22em;
}
.rx5 .rx5-subhead + .rx5-lede { margin-top: 14px; }

/* ── The standard, as an accordion ──────────────────────────────── */
/* partials/real-example/standard.ejs. The plate, its padding
   variable, the bank line, the pills, the finding and its source come
   from standard.css (.rx #standard .rx-std*); these rules are the
   structure around them. Three steps of heading, each on the type ramp:
   the section headline, the groups at Title, card (22px), the tests at
   Subtitle (17.5px). */

/* A group's head: the band it had, its heading on its own line now. */
.rx5 #standard .rx5-std-ghead {
  padding: 26px var(--std-pad) 22px;
  background: var(--surface-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.rx5 #standard .rx5-std-group:first-child .rx5-std-ghead { border-top: 0; }
.rx5 #standard .rx5-std-glabel {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--ink);
}
/* The group's place in the order a standard is built: an ordinal, so
   Teal Deep, as on the standard it replaces. */
.rx5 #standard .rx5-std-gnum { color: var(--teal-deep); }
.rx5 #standard .rx5-std-gbody {
  margin-top: 8px;
  max-width: 44em;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--body);
}
.rx5 #standard .rx5-std-gcount {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* A test: one row that opens. The whole row is the button; the chevron
   in its circle says so, and turns over when open. */
.rx5 #standard .rx5-std-item + .rx5-std-item { border-top: 1px solid var(--rule); }
.rx5 #standard .rx5-std-sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 14px var(--std-pad);
  list-style: none;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.rx5 #standard .rx5-std-sum::-webkit-details-marker { display: none; }
.rx5 #standard .rx5-std-sum:hover { background: var(--surface-2); }
/* The site's focus ring (Blue, 3px), drawn inside the row so the plate's
   rounded edge does not clip it. */
.rx5 #standard .rx5-std-sum:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.rx5 #standard .rx5-std-sumtext {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  min-width: 0;
}
.rx5 #standard .rx5-std-sumtext .rx-std-pill { position: relative; top: -2px; }
.rx5 #standard .rx5-std-name {
  font-family: var(--display);
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.016em;
  line-height: 1.25;
  color: var(--ink);
}
.rx5 #standard .rx5-std-chev {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  transition: transform 200ms ease, border-color 160ms ease;
}
.rx5 #standard .rx5-std-chev svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rx5 #standard .rx5-std-sum:hover .rx5-std-chev { border-color: var(--ink); }
.rx5 #standard .rx5-std-item[open] .rx5-std-chev { transform: rotate(180deg); border-color: var(--ink); }

/* What opens: the test's meaning, then its real example in one quiet
   panel under it, in one column. */
.rx5 #standard .rx5-std-body { padding: 0 var(--std-pad) 28px; }
.rx5 #standard .rx5-std-body .rx-std-meaning { margin-top: 0; max-width: 40em; }
.rx5 #standard .rx5-std-window {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.rx5 #standard .rx5-std-ex {
  max-width: 44em;
  margin-top: 18px;
  padding: 16px 20px 18px;
  border-radius: 8px;
  background: var(--surface-2);
}
.rx5 #standard .rx5-std-none { margin-top: 8px; }
/* Rio Bank, the one example not worth engaging: its dot takes the grey
   the dashboard gives the other banks in view, since Teal means the
   research marked a bank worth engaging. */
.rx5 #standard .rx-std-dot.is-rest { background: rgba(118, 127, 137, 0.5); }

/* Opening and closing slide where the browser can animate to a height
   of auto; elsewhere the row simply opens. */
.rx5 #standard .rx5-std { interpolate-size: allow-keywords; }
.rx5 #standard .rx5-std-item::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size 240ms ease, content-visibility 240ms allow-discrete;
}
.rx5 #standard .rx5-std-item[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
  .rx5 #standard .rx5-std-item::details-content { transition: none; }
  .rx5 #standard .rx5-std-chev { transition: none; }
}

@media (max-width: 520px) {
  .rx5 #standard .rx5-std-ghead { padding-top: 20px; padding-bottom: 18px; }
  .rx5 #standard .rx5-std-glabel { gap: 10px; }
  .rx5 #standard .rx5-std-gbody { font-size: 15px; }
  .rx5 #standard .rx5-std-sum { gap: 14px; min-height: 58px; padding-top: 12px; padding-bottom: 12px; }
  .rx5 #standard .rx5-std-name { font-size: 16.5px; }
  .rx5 #standard .rx5-std-body { padding-bottom: 22px; }
  .rx5 #standard .rx5-std-ex { padding: 14px 14px 16px; }
}

/* ── The market dashboard ──────────────────────────────────────── */

/* The pointer to the filters: a line over the plate's top left, where
   the filters now start, and a ring that pulses on the first filter (the
   Filters button when they fold away on a phone). Blue, the system's
   colour for marks and the focus ring; Teal and Amber carry findings.
   It pulses six times, then holds still, and goes the moment the reader
   uses a filter (real-example.js removes .rx5-hint). */
.rx5 .rx5-try {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 34px 0 0 4px;
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--blue-deep);
  transition: opacity 240ms ease;
}
.rx5 .rx5-try-dot {
  position: relative;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue);
}
.rx5 .rx5-try-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  opacity: 0;
  animation: rx5-ring 1.8s ease-out 0.4s 6;
}
.rx5 .rx5-try-arrow {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Held close to the filters it points at, not to the line above. */
.rx5 .rx5-try + .plate { margin-top: 12px; }
@keyframes rx5-ring {
  0% { transform: scale(0.6); opacity: 0.9; }
  80%, 100% { transform: scale(1.5); opacity: 0; }
}

.rx5 #dashboard.rx5-hint .mi-f[data-dim="region"] .mi-fbtn,
.rx5 #dashboard.rx5-hint .mi-ftoggle {
  border-color: var(--blue);
  animation: rx5-ping 1.8s ease-out 0.4s 6;
}
@keyframes rx5-ping {
  0% { box-shadow: 0 0 0 0 rgba(47, 99, 218, 0.4); }
  80%, 100% { box-shadow: 0 0 0 9px rgba(47, 99, 218, 0); }
}

/* Once the reader has used a filter, the pointer has done its job. */
.rx5 #dashboard:not(.rx5-hint) .rx5-try { opacity: 0; visibility: hidden; transition: opacity 240ms ease, visibility 0s 240ms; }

@media (prefers-reduced-motion: reduce) {
  .rx5 .rx5-try-dot::after,
  .rx5 #dashboard.rx5-hint .mi-f[data-dim="region"] .mi-fbtn,
  .rx5 #dashboard.rx5-hint .mi-ftoggle { animation: none; }
}

/* ── The dashboard's row groups ────────────────────────────────── */
/* "What the research found at each stage": each group heading is a
   button (real-example.js), its chevron in a small circle at the
   left, as a disclosure reads in a table, turned to point right while the
   group is closed. Any number open at once. The label stays the small
   uppercase of Chris's group rows, in Ink rather than Muted now that it
   is a control. */
.rx5 #dashboard .mi-grp th { padding: 0; }
.rx5 #dashboard .rx5-grp-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 12px 0 7px;
  border: 0;
  background: none;
  font-family: var(--text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.rx5 #dashboard .rx5-grp-chev {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--surface);
  transition: transform 200ms ease, border-color 160ms ease;
}
.rx5 #dashboard .rx5-grp-chev svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rx5 #dashboard .rx5-grp-btn[aria-expanded="false"] .rx5-grp-chev { transform: rotate(-90deg); }
.rx5 #dashboard .rx5-grp-btn:hover .rx5-grp-chev,
.rx5 #dashboard .rx5-grp-btn[aria-expanded="true"] .rx5-grp-chev { border-color: var(--ink); }
.rx5 #dashboard .rx5-grp-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
  .rx5 #dashboard .rx5-grp-chev { transition: none; }
}

/* ── The buying committee's names ──────────────────────────────── */
/* Each name opens the contacts tab at that person's row
   (real-example.js makes it a button). It keeps the name's type and
   takes the bank buttons' underline, so it reads as a link. */
.rx5 #committee .rx5-cm-person {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.rx5 #committee .rx5-cm-person:hover { color: var(--teal-deep); text-decoration-color: currentColor; }

/* ── The committee's seniority ─────────────────────────────────── */
/* Rex, 10 Oct 2026: seniority is a scale everyone already knows, so it
   needs no label, only the level, in the same neutral pill as the
   persona (which keeps its label, being this research's own grouping).
   "Seniority" stays for screen readers, which read the pair as a list of
   facts. */
.rx5 #committee .rx-cm-tags { gap: 6px 8px; }
.rx5 #committee .rx-cm-level {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 5px;
  background: var(--pill-none-bg);
  font-size: 12.5px;
}
.rx5 #committee .rx-cm-level-l {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── The film ── (film-player.js) ──────────────────────────────────
   GTM Pipes for TieOut, beside the overview since 2026-10-12. These rules
   came over from home.css unchanged when the film moved here; no other
   sheet on this page uses the .film names, so they need no .rx scope. */

/* Its place in the section, which keeps its square while the frame is
   out in the larger view. */
.film {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
}

/* The frame: the film, its play button and its bar, which travel
   together into the larger view. Its own ground is light, so on the page
   it takes the card's hairline and the large panels' 14px radius. */
.film-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--surface);
}
.film-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film-frame.is-ready .film-video { cursor: pointer; }
.film-frame.is-idle,
.film-frame.is-idle .film-video { cursor: none; }

/* The play button: the placeholder's play mark made real, an Ink disc
   with a Paper triangle, in the poster's empty lower third so it covers
   none of the TieOut mark above. It goes while the film plays and comes
   back on pause and at the end. */
.film-play {
  position: absolute;
  left: 50%;
  top: 76%;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: background 160ms ease, opacity 200ms ease, visibility 0s;
}
.film-play[hidden] { display: none; }
.film-play svg { width: 32px; height: 32px; margin-left: 4px; fill: currentColor; }
.film-play:hover { background: var(--teal-deep); }
.film-frame.is-playing .film-play {
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}
@media (max-width: 600px) {
  .film-play { width: 64px; height: 64px; }
  .film-play svg { width: 26px; height: 26px; margin-left: 3px; }
}

/* The bar: Ink at 84% along the frame's foot, 8px in, and 44px tall so
   it stays under the captions the film draws into its lowest tenth
   (82.5% to 89% of its height). Shown once the film has started, faded
   while the pointer rests on it playing. */
.film-bar {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 0;
  height: 44px;
  padding: 0 2px;
  border-radius: 8px;
  background: rgba(17, 22, 27, 0.84);
  color: var(--surface);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}
.film-bar[hidden] { display: none; }
.film-frame.is-started .film-bar {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease, visibility 0s;
}
.film-frame.is-started.is-playing.is-idle .film-bar {
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms ease, visibility 0s linear 400ms;
}

/* 44px square, the site's floor for a control a thumb has to find. */
.film-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background 160ms ease;
}
.film-btn:hover { background: rgba(255, 255, 255, 0.12); }
.film-btn:focus-visible { outline-offset: -2px; }
.film-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.film-btn .i-play { fill: currentColor; stroke: none; }
.film-btn .i-pause { stroke-width: 2.4; }
.film-frame .i-pause,
.film-frame .i-muted { display: none; }
.film-frame.is-playing .i-play,
.film-frame.is-muted .i-sound { display: none; }
.film-frame.is-playing .i-pause,
.film-frame.is-muted .i-muted { display: block; }

/* Where you are: a 4px line, white over white at 28%, filled as a scale
   so it never lays the bar out again. The whole bar's height is the
   target. */
.film-seek {
  position: relative;
  flex: 1 1 auto;
  height: 44px;
  margin: 0 8px;
  border-radius: 6px;
  cursor: pointer;
  touch-action: none;
}
.film-seek::before,
.film-seek-fill {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
}
.film-seek::before { content: ""; background: rgba(255, 255, 255, 0.28); }
.film-seek-fill {
  background: var(--surface);
  transform: scaleX(0);
  transform-origin: left center;
}
.film-seek:focus-visible { outline-offset: 0; }

.film-time {
  flex: none;
  padding: 0 6px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--dark-body);
}
@media (max-width: 420px) {
  .film-time { display: none; }
}

/* The larger view: the native modal dialog, its backdrop Ink at 88%, the
   frame as large as the window allows with room above for Close. In it,
   Watch it larger has nothing left to do and goes. The margin puts back
   the auto that centers a modal dialog, which base.css's reset of every
   margin to 0 takes away. */
.film-box {
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  overflow: visible;
}
.film-box::backdrop { background: rgba(17, 22, 27, 0.88); }
.film-box .film-frame {
  width: min(92vw, calc(100vh - 140px));
  border: 0;
}
.film-frame.is-big [data-film-larger] { display: none; }
.film-box-close {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--surface);
  cursor: pointer;
  transition: border-color 160ms ease;
}
.film-box-close:hover { border-color: var(--surface); }