/* /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/facts.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 "Meet with our team" 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; }
}

/* ── 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; }

.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); }
}