/* The recap pages' own stylesheet (CC-78), linked by recap-article.ejs, recap-list.ejs and author.ejs only, as
   calendar.ejs links calendar-public.css; no shared layout links it.

   First, word for word, the recap rules home.css held until CC-78: the editor's page (author.ejs: .recap-page,
   .recap-text, .recap-list), the share rows (.recap-share), the article's ending (.ra-end), and the article rules Edit
   copies into recap-admin.css (test/recap-article-edit.test.ts holds the two equal). The new article and list pages
   use their own classes (ra-*, rl-*, after these), so none of the rules below reaches them but the share rows and the
   closing call. */

/* ---------- Investor day recaps (slice C; Roy, 2026-10-04) ----------
   The article, the lists and the editor's page: the site's page head (eyebrow, display, subtitle, ornament), then one
   reading column in the legal text's measure; the targets table in the briefing's table style; the closing call in the
   home page's closing panel style. */

.recap-head__title {
  font-size: clamp(32px, 4vw, 44px);
  text-wrap: balance;
}

.recap-head__company {
  color: inherit;
  border-bottom: 1px solid var(--rule);
}

.recap-head__dek {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  text-wrap: pretty;
}

.recap-byline {
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--ink-2);
}

.recap-event {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-3);
}

.recap-text {
  max-width: 680px;
  margin: 0 auto;
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.72;
  text-align: left;
}

.recap-text h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 27px;
  line-height: 1.25;
  margin: 44px 0 12px;
}

.recap-text h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  margin: 30px 0 8px;
}

.recap-text p {
  margin: 0 0 16px;
}

.recap-text ul,
.recap-text ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.recap-text ul {
  list-style: disc;
}

/* the management case is a numbered list (writer v11): its numbers shown */
.recap-text ol {
  list-style: decimal;
  /* room for a two-digit number */
  padding-left: 30px;
}

.recap-text li {
  margin: 4px 0;
}

.recap-text a:not(.link) {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* "At a glance" (template v6): the event's facts after the summary, a ruled box, labels in small capitals */
.recap-text .recap-glance {
  margin: 8px 0 32px;
  padding: 16px 20px 6px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2, transparent);
}

.recap-text .recap-glance__title {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.recap-glance dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.5;
}

.recap-glance dt {
  color: var(--ink-3);
}

.recap-glance dd {
  margin: 0;
}

@media (max-width: 560px) {
  .recap-glance dl {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .recap-glance dd {
    margin-bottom: 8px;
  }
}

.recap-table {
  margin: 8px 0 24px;
  overflow-x: auto;
}

.recap-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.45;
}

.recap-table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--ink);
  vertical-align: bottom;
}

.recap-table td {
  padding: 12px;
  border-bottom: 1px solid var(--rule-light);
  vertical-align: top;
}

.recap-table th:first-child,
.recap-table td:first-child {
  padding-left: 0;
}

.recap-table th:last-child,
.recap-table td:last-child {
  padding-right: 0;
}

.recap-table td:first-child {
  font-weight: 500;
}

.recap-banner {
  margin: 8px 0 36px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--sellier);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.recap-banner p {
  margin: 0;
}

.recap-sources {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

.recap-sources ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.recap-sources li {
  margin: 8px 0;
}

.recap-note {
  margin-top: 24px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* The old closing call's phone rules (.recap-cta, in the @media block below) are kept as they are: recap-admin.css copies
   that block word for word (test/recap-article-edit.test.ts); the class is no longer drawn. */

/* The article's ending (home page round 2, "Recap pages' ending"): in the reading column, left-aligned with the text
   (CC-3 fix 6); a 1 px ink rule, the line in Cormorant, the link on its own line in Inter, about 48 px above and below */
.ra-end {
  margin: 48px 0;
  padding: 48px 0 0;
  border-top: 1px solid var(--ink);
}

.ra-end__line {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.35;
  color: var(--ink);
}

.ra-end__link {
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 500;
}

/* inside the reading column since CC-3, so above the text's own link rule (.ra-main a:not(.btn), ink): rust and
   underlined like every other text link on the site (CC-4) */
.ra-main .ra-end .ra-end__link a {
  color: var(--sellier);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}

.ra-main .ra-end .ra-end__link a:hover {
  color: var(--ink);
}

@media (max-width: 760px) {
  .ra-end__line {
    font-size: 21px;
  }
}

.recap-list {
  max-width: 680px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.recap-list__item {
  padding: 26px 0;
  border-bottom: 1px solid var(--rule-light);
}

.recap-list__item:first-child {
  border-top: 1px solid var(--rule);
}

.recap-list__meta {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.recap-list__symbol {
  color: var(--ink);
}

.recap-list__title {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 25px;
  line-height: 1.25;
}

.recap-list__title a {
  color: var(--ink);
}

.recap-list__title a:hover {
  color: var(--sellier-deep);
}

.recap-list__dek {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}

.author-bio {
  margin-bottom: 48px;
}

.author-recaps__heading {
  max-width: 680px;
  margin: 0 auto 14px;
}

/* a second list (Announcements, CC-99) stands as far from the list above as the first does from the bio */
.recap-list + .author-recaps__heading {
  margin-top: 48px;
}

/* "Announced <date>" never breaks inside: on a phone it moves to the next line whole (CC-100; CDO-R11) */
.recap-list__announced {
  white-space: nowrap;
}

@media (max-width: 760px) {
  .recap-text {
    font-size: 16px;
  }

  .recap-text h2 {
    font-size: 24px;
  }

  .recap-cta {
    margin-top: 56px;
    padding: 48px 22px;
  }

  .recap-cta__title {
    font-size: 30px;
  }

  .recap-cta .btn {
    width: 100%;
  }

  .recap-list__title {
    font-size: 22px;
  }
}

/* the sources' heading is the site's small section heading, not the article's h2 */
.recap-text .recap-sources h2 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px;
}

/* On a phone the targets table is a list of small cards: the metric, then each other cell under its column's name
   (data-label, src/lib/recap/public-article.ts), so nothing scrolls sideways */
@media (max-width: 760px) {
  .recap-table table,
  .recap-table tbody,
  .recap-table tr,
  .recap-table td {
    display: block;
  }

  .recap-table thead {
    display: none;
  }

  .recap-table tr {
    padding: 14px 0;
    border-bottom: 1px solid var(--rule-light);
  }

  .recap-table tr:first-child {
    border-top: 1px solid var(--ink);
  }

  .recap-table td {
    padding: 2px 0;
    border: 0;
  }

  .recap-table td:first-child {
    margin-bottom: 6px;
    font-size: 15px;
  }

  .recap-table td:not(:first-child) {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 10px;
  }

  .recap-table td:empty {
    display: none;
  }

  .recap-table td:not(:first-child)::before {
    content: attr(data-label);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-top: 2px;
  }
}

/* An inline slide (at most three an article), attributed to the company */
.recap-slide {
  margin: 28px 0 30px;
}

.recap-slide img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: var(--surface);
}

.recap-slide figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.recap-slide__credit {
  color: var(--ink-3);
}

/* The wall (off at launch, RECAP_WALL_ENABLED): where a visitor's open part ends */
.recap-wall {
  margin: 12px 0 36px;
  padding: 32px 28px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--sellier);
  text-align: center;
}

.recap-wall p {
  margin: 0 0 18px;
  color: var(--ink-2);
  font-size: 15px;
}

.recap-wall .recap-wall__title {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--ink);
}

/* a button inside the article keeps the button's own look (the article's link rule would recolour it) */
.recap-text a.btn {
  color: var(--paper);
  text-decoration: none;
}

/* the slide's source on its own line, under the caption */
.recap-slide__credit {
  display: block;
  margin-top: 2px;
}


/* ---------- The recap's share rows (recaps-share): under the event line, and above Sources ----------
   Quiet text links in the byline's size. Items are spaced by the flex gap, which a line never starts or ends with, and
   a separator dot sits in the gap before each item. The first visible item's dot is hidden here; the script hides the
   dot of every item that starts a wrapped line (hiding it changes no width, so nothing reflows). The top row's lines
   are centred, the end row's start at the left. Each link and button is 44 px tall to tap; the underline is on the text
   inside it. No rule here names an article class, so recap-admin.css copies none of them
   (test/recap-article-edit.test.ts). */
.recap-share {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-2);
}

.recap-share .recap-share__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.recap-share .recap-share__item {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.recap-share .recap-share__item[hidden] {
  display: none;
}

/* the dot fills the gap before the item */
.recap-share .recap-share__item::before {
  content: "·";
  /* the dot is decoration: no text for a screen reader where the browser reads the alternative */
  content: "·" / "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -22px;
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  pointer-events: none;
}

/* no dot before the first visible item (Share and Copy link stay hidden until the script shows them), nor before an
   item the script found at the start of a line */
.recap-share .recap-share__item:first-child::before,
.recap-share [data-share-item="native"][hidden] + [data-share-item="copy"]::before,
.recap-share [data-share-item="native"][hidden] + [data-share-item="copy"][hidden] + .recap-share__item::before,
.recap-share .recap-share__item--line-start::before {
  content: none;
}

.recap-share .recap-share__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* inside the article, outranks the article's own link rule (an underline on the whole 44 px box) */
.recap-share a.recap-share__link {
  color: var(--ink);
  text-decoration: none;
}

.recap-share .recap-share__link:hover .link {
  color: var(--sellier-deep);
  border-bottom-color: var(--sellier);
}

/* "Copy link" and the shorter "Copied" share one cell, so the button is always as wide as "Copy link" and nothing moves */
.recap-share .recap-share__swap {
  display: inline-grid;
}

.recap-share .recap-share__swap > .link {
  grid-area: 1 / 1;
  justify-self: center;
}

.recap-share .recap-share__swap > [data-share-state="done"],
.recap-share .recap-share__link.is-done .recap-share__swap > [data-share-state="ready"] {
  visibility: hidden;
}

.recap-share .recap-share__link.is-done .recap-share__swap > [data-share-state="done"] {
  visibility: visible;
}

/* read by a screen reader once (aria-live), never shown and never taking room */
.recap-share .recap-share__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* above Sources: "Share this recap", then the same links, on one line where they fit; a wrapped line starts at the
   label's left edge */
.recap-share--end {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
  margin-top: 40px;
}

.recap-share--end .recap-share__label {
  color: var(--ink-3);
}

.recap-share--end .recap-share__list {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
}

/* /investor-day: the recaps' RSS feed, one quiet link under the introduction */
.recap-feed {
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-2);
}

/* =====================================================================================================================
   The Investor Day Recap article (CC-78; the design chat's RECAP-PAGES-DESIGN.md and its mockup, Roy 2026-10-14)
   The head, then a contents rail (212 px) beside one reading column (680 px); under 1000 px the rail folds into a list
   under At a glance; on a phone (640 px and less) the head is left-aligned and slides and tables run to the edges.
   ===================================================================================================================== */
.ra {
  --ra-ink-soft: #3b352d;
  padding: 60px 5vw 72px;
}

.ra section[id] {
  scroll-margin-top: 24px;
}

/* the head: centred on a desktop */
.ra-head {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.ra-eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 18px;
}

.ra-eyebrow a {
  color: var(--sellier);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.ra-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.3vw, 50px);
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.005em;
}

/* the dek: display italic 500 (self-hosted, app.css), larger and darker than the old dek (Roy, Oct 14) */
.ra-dek {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.42;
  color: var(--ra-ink-soft);
  max-width: 660px;
  margin: 20px auto 0;
  text-wrap: pretty;
}

.ra-meta {
  font-size: 13px;
  color: var(--ink-2);
  margin: 22px 0 0;
  line-height: 1.7;
}

.ra-meta a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}

/* The publication and AI line (CC-99, the design chat's CDO-R10): the editor's name underlined in the line's own colour;
   on a phone the two halves stack and the dot between them is hidden */
.ra-meta__credit a {
  border-bottom-color: currentColor;
}

.ra-head .recap-share {
  margin-top: 8px;
}

.ra-orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 26px 0 0;
  color: var(--sellier);
}

.ra-orn::before,
.ra-orn::after {
  content: "";
  width: 44px;
  height: 1px;
  background: var(--rule);
}

.ra-orn span {
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
}

/* the body: the contents rail and one reading column */
.ra-grid {
  display: grid;
  grid-template-columns: 212px minmax(0, 680px);
  column-gap: 56px;
  justify-content: center;
  margin-top: 44px;
}

.ra-toc {
  grid-column: 1;
  position: sticky;
  top: 24px;
  align-self: start;
  max-height: calc(100vh - 48px);
  overflow: auto;
  font-size: 13px;
  line-height: 1.4;
  padding-bottom: 16px;
}

.ra-main {
  grid-column: 2;
  min-width: 0;
  font-size: 17px;
  line-height: 1.72;
}

.ra-toc__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 4px 0 12px;
}

.ra-toc ol,
.ra-toc-m ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ra-toc li > a,
.ra-toc li > span,
.ra-toc-m li > a,
.ra-toc-m li > span {
  display: block;
  padding: 4px 0 4px 13px;
  border-left: 1px solid var(--rule);
  color: var(--ink-2);
  text-decoration: none;
}

.ra-toc li > a:hover,
.ra-toc-m li > a:hover {
  color: var(--ink);
}

.ra-toc li > a[aria-current="true"] {
  color: var(--ink);
  border-left: 2px solid var(--sellier);
  padding-left: 12px;
}

/* behind the wall: the titles after the cut, muted and not links */
.ra-toc .is-locked > span,
.ra-toc-m .is-locked > span {
  color: var(--ink-4);
}

.ra-toc__cut {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sellier);
  padding: 10px 0 4px 13px;
  border-left: 1px solid var(--rule);
}

.ra-toc__ref-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sellier);
  margin: 14px 0 4px;
  padding-left: 13px;
}

.ra-toc__ref li > a,
.ra-toc__ref li > span {
  font-size: 12.5px;
}

/* the contents, folded, under At a glance (narrower than 1000 px) */
.ra-toc-m {
  display: none;
  margin: 28px 0 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.ra-toc-m summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 0;
  font-size: 13px;
}

.ra-toc-m summary::-webkit-details-marker {
  display: none;
}

.ra-toc-m summary b {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}

.ra-toc-m summary span {
  color: var(--ink-3);
}

.ra-toc-m summary::after {
  content: "+";
  margin-left: auto;
  font-size: 18px;
  line-height: 1;
  color: var(--sellier);
}

.ra-toc-m[open] summary::after {
  content: "\2212";
}

.ra-toc-m__body {
  padding: 0 0 16px;
  font-size: 14px;
  line-height: 1.4;
}

/* At a glance: the writer's rows; the presenters one a line */
.ra-glance {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--ink);
  padding: 20px 24px 18px;
}

.ra-glance h2 {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-2);
  margin: 0 0 12px;
}

.ra-glance dl {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px 18px;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
}

.ra-glance dt {
  color: var(--ink-3);
  font-size: 13px;
  padding-top: 1px;
}

.ra-glance dd {
  margin: 0;
}

/* .ra-main ul's indent off: the names line up with the other values */
.ra-glance .ra-glance__people {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ra-glance .ra-glance__people li {
  padding: 1px 0 3px;
}

/* room between two presenters, so a wrapped line does not read as a third (CC-82) */
.ra-glance .ra-glance__people li + li {
  margin-top: 6px;
}

/* reading type */
.ra-main p {
  margin: 0 0 1.1em;
  text-wrap: pretty;
}

/* the text's links; a button (the panels' See the plans) keeps the site's own colours */
.ra-main a:not(.btn) {
  color: inherit;
  text-decoration-color: var(--sellier);
  text-underline-offset: 3px;
}

.ra-main ul,
.ra-main ol {
  margin: 0 0 1.1em;
  padding-left: 1.3em;
}

.ra-main h3 {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-2);
  margin: 28px 0 10px;
}

/* the overview: set apart as background, before the story */
.ra-overview {
  margin: 44px 0 0;
  padding: 2px 0 2px 26px;
  border-left: 2px solid var(--rule);
}

.ra-overview h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 12px;
}

.ra-overview p {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--ink-2);
}

.ra-overview p:last-child {
  margin-bottom: 0;
}

/* the story: the writer's own section headings, in the display face with a short accent line above */
.ra-sec h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.15;
  margin: 64px 0 20px;
  text-wrap: balance;
}

.ra-sec h2::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--sellier);
  margin-bottom: 18px;
}

/* slides: the figure fills the column; the caption on its own line, the credit under it */
.ra-slide {
  margin: 30px 0 34px;
}

.ra-slide img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}

.ra-slide figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}

.ra-slide__cap {
  display: block;
}

.ra-slide__credit {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-3);
}

/* where the story ends: page furniture, not article text */
.ra-divide {
  margin: 84px 0 0;
  border-top: 2px solid var(--ink);
  padding-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
  justify-content: space-between;
}

.ra-divide b {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sellier);
}

.ra-divide span {
  font-size: 13px;
  color: var(--ink-2);
}

/* the reference part: a quieter register for scanning */
.ra-ref {
  font-size: 16px;
  line-height: 1.65;
}

.ra-ref__sec {
  padding-top: 6px;
  margin-top: 44px;
}

.ra-ref__sec + .ra-ref__sec {
  border-top: 1px solid var(--rule);
  padding-top: 30px;
}

.ra-ref__sec:first-child {
  margin-top: 26px;
}

.ra-ref__sec h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 16px;
  text-wrap: balance;
}

.ra-ref ul {
  list-style: none;
  margin: 0 0 1.1em;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.ra-ref ul > li {
  position: relative;
  padding: 9px 0 9px 22px;
  border-bottom: 1px solid var(--rule);
}

.ra-ref ul > li:last-child {
  border-bottom: 0;
}

.ra-ref ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.22em;
  width: 6px;
  height: 6px;
  background: var(--sellier);
}

.ra-ref__sec--qa ul > li {
  padding-left: 0;
}

.ra-ref__sec--qa ul > li::before {
  display: none;
}

.ra-ref__sec--unsaid ul > li::before {
  background: transparent;
  border: 1px solid var(--sellier);
}

.ra-ref__sec--sources {
  font-size: 14.5px;
}

.ra-ref__sec--sources ul > li {
  padding-left: 0;
  overflow-wrap: anywhere;
}

.ra-ref__sec--sources ul > li::before {
  display: none;
}

.ra-ref__sec--sources a {
  text-decoration: underline;
}

.ra-closing {
  margin: 22px 0 0 !important;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* tables: a real table in its own sideways-scrolling box, the first column fixed */
.ra-table {
  overflow-x: auto;
  margin: 6px 0 10px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  -webkit-overflow-scrolling: touch;
}

.ra-table:focus-visible {
  outline: 2px solid var(--sellier);
  outline-offset: 2px;
}

.ra-table table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 14.5px;
  line-height: 1.45;
}

.ra-table th,
.ra-table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
}

.ra-table thead th {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-2);
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}

.ra-table tbody tr:last-child > * {
  border-bottom: 0;
}

.ra-table tbody th {
  font-weight: 600;
  min-width: 150px;
}

.ra-table td {
  min-width: 120px;
}

.ra-table .c-short {
  white-space: nowrap;
  min-width: 0;
}

.ra-table th:first-child,
.ra-table td:first-child {
  padding-left: 0;
}

.ra-table th:last-child,
.ra-table td:last-child {
  padding-right: 0;
}

.ra-table tr > :first-child {
  position: sticky;
  left: 0;
  background: var(--paper);
  z-index: 1;
}

.ra-table__hint {
  display: none;
  font-size: 12px;
  color: var(--ink-3);
  margin: 0 0 1em !important;
}

/* the writer's note under a table reads as a note */
.ra-main .ra-table__note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* the panels: the visitor panel after the first story section, the paywall panel at the cut */
.ra-panel {
  margin: 48px 0 0;
  padding: 30px 32px 28px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--sellier);
  font-size: 15px;
  line-height: 1.55;
}

.ra-panel__eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sellier);
  margin: 0 0 8px !important;
}

.ra-panel__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.12;
  margin: 0 0 10px;
  text-wrap: balance;
}

.ra-panel__from {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 14px !important;
}

.ra-panel__line {
  color: var(--ink-2);
}

.ra-main .ra-panel__pts {
  list-style: none;
  counter-reset: pt;
  margin: 0 0 22px;
  padding: 0;
}

.ra-panel__pts li {
  counter-increment: pt;
  position: relative;
  padding: 8px 0 8px 34px;
}

.ra-panel__pts li::before {
  content: counter(pt);
  position: absolute;
  left: 0;
  top: 3px;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  color: var(--sellier);
  font-variant-numeric: lining-nums;
}

.ra-panel__pts b {
  font-weight: 600;
}

.ra-panel__act {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  margin: 0 !important;
}

/* "Already a member? Sign in" reads as a link (CC-82): ink-2 text, the accent underline */
.ra-main a.ra-panel__signin {
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--sellier);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* the end of the article: the share row, then (for a visitor reading in full) the closing call */
.ra-main .recap-share--end {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.ra-cta {
  margin: 72px -5vw -72px;
}

/* narrower than a desktop: no rail; the contents fold under At a glance */
@media (max-width: 1000px) {
  .ra-grid {
    grid-template-columns: minmax(0, 680px);
  }

  .ra-toc {
    display: none;
  }

  .ra-main {
    grid-column: 1;
  }

  .ra-toc-m {
    display: block;
  }
}

/* a phone: the whole head left-aligned (the share row and the diamond too), slides and tables to the edges */
@media (max-width: 640px) {
  .ra {
    padding: 36px 16px 56px;
  }

  .ra-head {
    text-align: left;
  }

  .ra-meta__sep {
    display: none;
  }

  .ra-meta__credit {
    display: block;
  }

  .ra-title {
    font-size: 31px;
    line-height: 1.12;
  }

  .ra-dek {
    font-size: 19px;
    margin-top: 14px;
  }

  .ra-head .recap-share .recap-share__list {
    justify-content: flex-start;
  }

  .ra-orn {
    justify-content: flex-start;
  }

  .ra-grid {
    margin-top: 32px;
  }

  .ra-main {
    font-size: 16px;
    line-height: 1.7;
  }

  .ra-glance {
    padding: 16px 16px 14px;
  }

  .ra-glance dl {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 8px 12px;
    font-size: 14px;
  }

  .ra-overview {
    margin: 36px 0 0;
    padding-left: 16px;
  }

  .ra-overview p {
    font-size: 15px;
  }

  .ra-sec h2 {
    font-size: 26px;
    margin: 52px 0 16px;
  }

  .ra-slide {
    margin: 24px -16px 28px;
  }

  .ra-slide img {
    border-left: 0;
    border-right: 0;
  }

  .ra-slide figcaption {
    padding: 0 16px;
  }

  .ra-divide {
    margin-top: 64px;
  }

  .ra-ref {
    font-size: 15.5px;
  }

  .ra-ref__sec h2 {
    font-size: 23px;
  }

  .ra-table {
    margin-left: -16px;
    margin-right: -16px;
  }

  .ra-table th:first-child,
  .ra-table td:first-child {
    padding-left: 16px;
  }

  .ra-table th:last-child,
  .ra-table td:last-child {
    padding-right: 16px;
  }

  .ra-table tbody th {
    min-width: 128px;
    max-width: 150px;
    box-shadow: inset -1px 0 0 var(--rule);
  }

  .ra-table thead th:first-child {
    box-shadow: inset -1px 0 0 var(--rule);
  }

  .ra-table table {
    font-size: 14px;
  }

  .ra-table__hint {
    display: block;
  }

  .ra-panel {
    margin-left: -16px;
    margin-right: -16px;
    padding: 24px 16px 22px;
    border-left: 0;
    border-right: 0;
  }

  .ra-panel__title {
    font-size: 26px;
  }

  .ra-cta {
    margin: 56px -16px -56px;
  }
}

/* =====================================================================================================================
   The Investor Day Recaps list (/investor-day) and a company's recaps (/investor-day/<ticker>)
   ===================================================================================================================== */
/* The list's and the company page's frame: the calendar page's (app.css's .page, widened by calendar-public.css),
   repeated here so the label, the title, the search and the list line up with the wordmark (CDO-R6). Neither shared
   stylesheet is touched or loaded. Each summary keeps its 68ch measure (.rl-sum), so the wider frame does not lengthen
   its lines. */
.rl {
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px var(--gutter) 72px;
}

@media (max-width: 760px) {
  .rl {
    padding-top: 48px;
  }
}

@media (max-width: 700px) {
  .rl {
    padding-top: 40px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

.rl-eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 10px;
}

.rl-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5.2vw, 54px);
  line-height: 1.05;
  margin: 0 0 14px;
}

.rl-lede {
  color: var(--ink-2);
  margin: 0;
  max-width: 62ch;
  font-size: 15.5px;
}

.rl-line {
  margin: 20px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 14px;
}

.rl-line b {
  color: var(--ink);
  font-weight: 600;
}

.rl-line a,
.rl-none a,
.rl-pages__step a {
  color: var(--sellier);
  text-underline-offset: 3px;
}

.rl-find {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 30px 0 0;
}

.rl-find label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  flex-basis: 100%;
}

.rl-find input,
.rl-find select {
  font: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  min-width: 0;
}

.rl-find input {
  flex: 1 1 220px;
  max-width: 320px;
}

.rl-find select {
  flex: 0 1 200px;
}

.rl-find input:focus-visible,
.rl-find select:focus-visible {
  outline: 2px solid var(--sellier);
  outline-offset: 2px;
}

.rl-none {
  margin: 36px 0 0;
  color: var(--ink-2);
}

.rl-month {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 48px 0 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
}

.rl-month h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  margin: 0;
}

.rl-month span {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.rl-item {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  column-gap: 30px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}

/* the picture: drawn whole at its own shape, never cropped, pinned top-left; no picture leaves its space empty */
.rl-thumb {
  grid-row: 1 / span 2;
  width: 176px;
  height: 132px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.rl-thumb img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.rl-meta {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 8px;
}

.rl-meta a {
  color: var(--sellier);
  text-decoration: none;
  font-weight: 600;
}

.rl-headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.18;
  margin: 0;
  text-wrap: balance;
}

.rl-headline a {
  color: inherit;
  text-decoration: none;
}

.rl-headline a:hover {
  text-decoration: underline;
  text-decoration-color: var(--sellier);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.rl-sum {
  grid-column: 2;
  margin: 10px 0 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
  max-width: 68ch;
}

.rl-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: baseline;
  justify-content: space-between;
  margin: 34px 0 0;
  font-size: 14px;
  color: var(--ink-2);
}

.rl-pages nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.rl-pages nav a,
.rl-pages nav span {
  min-width: 32px;
  padding: 5px 8px;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  color: inherit;
}

.rl-pages nav span[aria-current] {
  border-color: var(--ink);
  color: var(--ink);
}

.rl-pages__step {
  display: flex;
  gap: 18px;
}

@media (max-width: 640px) {
  .rl-find input,
  .rl-find select {
    flex: 1 1 100%;
    max-width: none;
  }

  .rl-item {
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 16px;
    padding: 22px 0;
  }

  .rl-thumb {
    grid-row: auto;
    width: 96px;
    height: 72px;
  }

  .rl-headline {
    font-size: 21px;
  }

  .rl-sum {
    grid-column: 1 / -1;
    margin-top: 12px;
    font-size: 14.5px;
  }

  .rl-meta {
    font-size: 10.5px;
    letter-spacing: 0.12em;
  }

  /* the date on its own line, without its dot (CC-82) */
  .rl-meta__date {
    display: block;
    margin-top: 2px;
  }

  .rl-meta__dot {
    display: none;
  }
}

/* At a glance's last row: the event's Investor Day Announcement (the IR announcements chat, CC-3 C), behind a hairline;
   present only when one is published */
.ra-glance dt.ra-glance__ann,
.ra-glance dd.ra-glance__ann {
  border-top: 1px solid var(--rule);
  padding-top: 8px;
}

.ra-glance dd.ra-glance__ann a {
  color: var(--sellier);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}

/* under 640 px the row stacks: the label above, the link below (CC-5 item 21) */
@media (max-width: 640px) {
  .ra-glance dt.ra-glance__ann,
  .ra-glance dd.ra-glance__ann {
    grid-column: 1 / -1;
  }

  .ra-glance dd.ra-glance__ann {
    border-top: 0;
    padding-top: 0;
  }
}

.ra-glance__ann-date {
  color: var(--ink-3);
  font-size: 13px;
}