/* Roots & Fruit — Reveal components (Pitch-aligned)
   PDS SoR: edit this file only. Mirror with sync-pds-deck.ps1.
   Do not hand-edit template-deck/components.css. */

/* Roots & Fruit — Reveal components (Pitch-aligned) */

/* Letterbox / overscan must match slide paper (reveal margin leaves a frame) */
html,
body {
  margin: 0;
  background: var(--rf-cream);
  background-color: var(--rf-cream);
}

.reveal,
.reveal-viewport,
.reveal .backgrounds {
  background: var(--rf-cream);
  background-color: var(--rf-cream);
}

.reveal {
  font-family: var(--rf-font-sans);
  color: var(--rf-ink);
  font-weight: 400;
}

.reveal .slides {
  text-align: left;
}

.reveal .slides section {
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Padding only on real slides — stack wrappers (<section> around vertical children)
   must stay at 0 or content gets double left inset */
.reveal .slides section.rf-slide {
  padding: var(--rf-pad-y) var(--rf-pad-x);
  background-color: var(--rf-cream);
  isolation: isolate;
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4 {
  font-family: var(--rf-font-serif);
  text-transform: none;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--rf-ink-deep);
  margin: 0;
  line-height: 1.15;
}

.reveal h1 { font-size: var(--rf-h1); }
.reveal h2 { font-size: var(--rf-h2); }
.reveal h3 { font-size: var(--rf-h3); color: var(--rf-green); }

.reveal p,
.reveal li {
  font-family: var(--rf-font-sans);
  font-size: var(--rf-body);
  line-height: 1.45;
  color: var(--rf-ink);
  margin: 0;
}

.reveal strong { color: var(--rf-ink-deep); font-weight: 700; }

.reveal .controls { color: var(--rf-green); }

/* Full-width brand ribbon; span clips how far the gradient is revealed */
.reveal .progress {
  height: 8px;
  container-type: inline-size;
  background: color-mix(in srgb, var(--rf-ink) 10%, var(--rf-cream));
}

.reveal .progress span {
  background-color: transparent;
  background-image: linear-gradient(
    90deg,
    var(--rf-green-deep) 0%,
    var(--rf-green) 45%,
    var(--rf-orange) 100%
  );
  background-size: 100cqi;
  background-position: left center;
  background-repeat: no-repeat;
}

/* —— Atmosphere —— */
.rf-slide {
  position: relative;
  z-index: 0;
}

/*
  Single watermark <img> only — never ::before + img, never two watermarks.
  Reveal fade transitions otherwise ghost a second copy from the previous slide.
*/
.rf-watermark {
  position: absolute !important;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: min(72%, 860px);
  height: auto;
  max-height: 78%;
  object-fit: contain;
  opacity: var(--rf-atmosphere);
  pointer-events: none;
  z-index: 0 !important;
  user-select: none;
  filter: none;
}

.rf-watermark--roots {
  /* roots.svg is dark line art; keep light on cream — CDS --rf-atmosphere */
  opacity: var(--rf-atmosphere);
}

/* Title hero: denser line art under lede — CDS --rf-atmosphere-quiet */
.rf-title-hero .rf-watermark--roots {
  opacity: var(--rf-atmosphere-quiet);
}

.rf-art-apples {
  position: absolute !important;
  top: 6%;
  right: 4%;
  width: min(38%, 420px);
  height: auto;
  z-index: 0 !important;
  pointer-events: none;
  opacity: var(--rf-atmosphere-spot);
  user-select: none;
}

.rf-art-roots-side {
  display: block;
  width: 100%;
  max-width: 260px;
  margin-top: 1.5rem;
  opacity: var(--rf-atmosphere-spot);
  position: relative;
  z-index: 1;
}

/* Content above atmosphere; exclude positioned art from relative reset */
.rf-slide > *:not(.rf-watermark):not(.rf-art-apples) {
  position: relative;
  z-index: 1;
}

/* Body copy over roots/apples: heavier weight before frosting the art */
.reveal .rf-slide:has(.rf-watermark) p:not(.rf-eyebrow),
.reveal .rf-slide:has(.rf-watermark) li,
.reveal .rf-slide:has(.rf-art-apples) p:not(.rf-eyebrow),
.reveal .rf-slide:has(.rf-art-apples) li {
  font-weight: 600;
}


/* —— Reveal adapters for CDS elements (slide scale / aliases) ——
   Element chrome lives in cds-elements.css. Keep only what reveal or pt scale requires. */

.reveal .btn,
.reveal .rf-cta {
  font-size: var(--rf-small);
  padding: 0.55em 1.15em;
}

.reveal .rf-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--rf-font-sans);
  font-weight: 700;
  line-height: 1.2;
  border-radius: var(--rf-radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  background: var(--rf-orange);
  color: var(--rf-ink-deep);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.reveal .rf-cta:hover {
  background: color-mix(in srgb, var(--rf-orange) 85%, var(--rf-cream));
  color: var(--rf-ink-deep);
}

.reveal .rf-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rf-orange) 45%, transparent);
}

/* Reveal preview lightbox (data-preview-link): ink scrim + cream panel at 75%.
   Header controls sit outside the cream panel (on the scrim) for contrast. */
.reveal-viewport .r-overlay-preview {
  background: color-mix(in srgb, var(--rf-ink) 38%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  --r-overlay-header-height: 40px;
}

.reveal-viewport .r-overlay-preview .r-overlay-viewport {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: 75%;
  height: 75%;
  max-width: 75%;
  max-height: 75%;
  transform: translate(-50%, -50%);
  background: transparent;
  overflow: visible;
  gap: 0;
  padding: 0;
}

.reveal-viewport .r-overlay-preview .r-overlay-header {
  position: absolute;
  top: calc(-1 * var(--r-overlay-header-height) - 10px);
  right: 0;
  left: auto;
  width: auto;
  height: var(--r-overlay-header-height);
  background: transparent;
  color: #fff;
  z-index: 3;
}

.reveal-viewport .r-overlay-preview .r-overlay-header .r-overlay-button:hover {
  background-color: rgba(255, 255, 255, 0.18);
}

.reveal-viewport .r-overlay-preview .r-overlay-content {
  flex-grow: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--rf-cream);
  border-radius: var(--rf-radius);
  box-shadow: var(--rf-shadow);
  overflow: hidden;
}

.reveal .pill {
  font-size: var(--rf-small);
}

.reveal .rf-code__body {
  font-size: var(--rf-small);
}

.reveal .rf-table th,
.reveal .rf-table td {
  font-size: var(--rf-small);
}


/* —— Pattern specimen layouts (kit / composed slides) —— */
.rf-pattern-stack {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  height: 100%;
}

.rf-pattern-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rf-gap);
  align-items: start;
  height: 100%;
}

/* Beat .reveal p { margin: 0 } */
.reveal p.rf-pattern-caption,
.reveal .rf-pattern-caption {
  font-family: var(--rf-font-sans);
  font-size: var(--rf-meta);
  color: var(--rf-ink-muted);
  margin: 0 0 1.5rem;
}

/* CDS element spacing/colors lose to .reveal h3/p/li/ol — reassert under .reveal */
.reveal .rf-takeaways > h3,
.reveal .rf-takeaways .rf-takeaways__title {
  margin: 0 0 1rem;
  color: var(--rf-green);
  font-size: var(--rf-h3);
}

.reveal .rf-takeaways > ol,
.reveal ol.rf-keytakeaways {
  display: grid;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 42rem;
}

.reveal .rf-takeaways > ol > li,
.reveal ol.rf-keytakeaways > li {
  margin: 0;
  padding: 0 0 0 0.75rem;
  border-left: 2px solid var(--rf-orange);
  font-size: var(--rf-body);
  line-height: 1.45;
  color: var(--rf-ink);
}

.reveal .alert--note {
  margin-top: 0;
  padding: 0.85rem 1rem;
  font-size: var(--rf-small);
  line-height: 1.4;
  max-width: none;
}

.reveal .surface {
  padding: 1.15rem 1.25rem;
  box-sizing: border-box;
}

.reveal .surface h3 {
  margin: 0 0 0.55rem;
  font-size: 18pt;
  font-weight: 600;
  color: var(--rf-green);
}

.reveal .surface p {
  margin: 0 0 0.85rem;
  font-size: var(--rf-small);
  color: var(--rf-ink-muted);
}

.reveal .surface--dark,
.reveal .surface--dark h3,
.reveal .surface--dark h4 {
  color: var(--rf-on-dark);
}

.reveal .surface--dark p,
.reveal .surface--dark li {
  color: var(--rf-on-dark-muted);
}

.reveal .rf-surface-grid {
  margin-top: 0.75rem;
  gap: var(--rf-gap);
}

.reveal .rf-surface-grid .surface {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 0;
}

.reveal .rf-surface-grid .surface .btn {
  margin-top: auto;
  align-self: flex-start;
}

.surface--dark .rf-cta {
  background: var(--rf-orange);
  color: var(--rf-ink-deep);
}

/* Element-kit layout helpers (not CDS chrome) */
.rf-surface-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rf-gap-sm);
  align-content: start;
  height: 100%;
}

.rf-surface-grid .surface {
  min-height: 0;
}

.rf-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.75rem 0 0;
}

.rf-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin: 0.85rem 0 0;
}

/* —— Brand header —— */
.rf-brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-bottom: 2rem;
}

.rf-brand-row--spread {
  justify-content: space-between;
}

.rf-brand-meta {
  font-family: var(--rf-font-sans);
  font-size: var(--rf-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rf-green);
}

.rf-mark {
  height: 44px;
  width: auto;
  display: block;
}

.rf-wordmark {
  height: 40px;
  width: auto;
  display: block;
}

.rf-client-mark {
  height: 32px;
  width: auto;
  display: block;
}

.rf-brand-x {
  color: var(--rf-muted-soft);
  font-family: var(--rf-font-serif);
  font-size: 18pt;
  font-weight: 600;
}

/* —— Eyebrow / motion —— */
/* Beat .reveal p { font-size/color/margin } — eyebrow is meta, not body */
.reveal p.rf-eyebrow,
.reveal .rf-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--rf-font-sans);
  font-size: var(--rf-body);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--rf-orange-deep);
  margin: 0 0 0.45rem;
}

.reveal .rf-eyebrow > img {
  width: 0.95em;
  height: 0.95em;
  flex-shrink: 0;
  display: block;
}

.rf-motion {
  display: inline-block;
  margin: 0 0 0.85rem;
  font-family: var(--rf-font-sans);
  font-size: var(--rf-small);
  font-weight: 600;
  color: var(--rf-green-deep);
}

.rf-date {
  font-family: var(--rf-font-sans);
  font-size: var(--rf-small);
  color: var(--rf-muted);
}

/* —— Title hero —— */
/* !important: reveal.js sets section display; without it flex centering fails */
.reveal .slides section.rf-title-hero {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  min-height: 100%;
}

.rf-title-hero__top {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  min-height: 2rem;
}

/* One client mark only at top — do not stack R&F wordmark beside it */
.rf-title-hero__top .rf-client-mark {
  height: 28px;
  margin: 0;
}

.rf-title-hero__top .rf-template-chip {
  margin: 0;
}

.rf-title-hero__main {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem 0 1rem;
}

.rf-title-hero h1 {
  max-width: 16ch;
  margin: 0 auto 1rem;
  text-align: center;
}

.reveal p.rf-lede,
.reveal .rf-lede {
  font-family: var(--rf-font-sans);
  font-size: var(--rf-body);
  font-weight: 400;
  color: var(--rf-ink-muted);
  line-height: 1.45;
  margin: 0;
}

.rf-title-hero .rf-lede {
  /* CDS .rf-lede-over-atmosphere — weight before frosting */
  max-width: 34ch;
  margin: 0 auto;
  font-size: var(--rf-body);
  font-weight: 600;
  color: var(--rf-ink-muted);
  text-align: center;
  line-height: 1.45;
}

.rf-title-hero__foot {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding-top: 0.35rem;
}

.rf-title-hero__foot .rf-brand-row {
  width: auto;
  margin-bottom: 0;
  gap: 0.5rem;
  justify-content: center;
}

.rf-title-hero__foot .rf-brand-meta {
  font-size: 9.5pt;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--rf-muted);
}

.rf-title-hero__foot .rf-mark {
  height: 20px;
}

.rf-title-hero__foot .rf-date {
  width: 100%;
  margin: 0;
  padding-top: 0;
  text-align: center;
  font-size: 11pt;
}

/* —— Section divider —— */
.reveal .slides section.rf-section-divider {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
  padding-bottom: 0.5rem;
}

.rf-section-divider h2 {
  font-size: var(--rf-h1);
  /* Leave room for apples art; never use reveal .r-fit-text here (it forces one line and clips) */
  max-width: min(22ch, 58%);
  width: auto;
  margin-bottom: 0.5rem;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

.reveal .rf-section-divider p.rf-eyebrow,
.reveal .rf-section-divider .rf-eyebrow {
  max-width: 28ch;
}

.reveal .rf-section-divider .rf-sub {
  color: var(--rf-green);
  font-family: var(--rf-font-sans);
  font-size: var(--rf-body);
  font-weight: 600;
  letter-spacing: normal;
  max-width: 28ch;
}

/* —— Full-bleed dark slides (CDS surface-dark + on-dark) ——
   Pair with data-background-color="#4b5e2e" so reveal’s letterbox matches.
   No roots/apples atmosphere on these — reverse type only. */

.reveal .slides section.rf-slide.rf-slide--dark {
  background-color: var(--rf-surface-dark);
  color: var(--rf-on-dark);
}

.reveal .rf-slide--dark h1,
.reveal .rf-slide--dark h2,
.reveal .rf-slide--dark h3 {
  color: var(--rf-on-dark);
}

.reveal .rf-slide--dark p,
.reveal .rf-slide--dark li,
.reveal .rf-slide--dark .rf-lede,
.reveal .rf-slide--dark .rf-sub {
  color: var(--rf-on-dark-muted);
}

.reveal .rf-slide--dark p.rf-eyebrow,
.reveal .rf-slide--dark .rf-eyebrow {
  color: var(--rf-orange);
}

.reveal .rf-slide--dark .rf-eyebrow img {
  /* Mono icon is dark-on-transparent; invert for moss field */
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.reveal .slides section.rf-slide.rf-dark-statement {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  text-align: center;
  min-height: 100%;
  /* ch is body-sized — never use it to size display titles */
  overflow: hidden;
}

.rf-dark-statement__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-inline: 4%;
}

.reveal .rf-dark-statement h2 {
  font-size: var(--rf-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0;
  width: 100%;
  max-width: 18em; /* em = display size, ~sentence on 2 lines */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.reveal .rf-dark-statement .rf-lede {
  font-size: var(--rf-body);
  font-weight: 600;
  line-height: 1.4;
  width: 100%;
  max-width: 36em; /* em = body size on this element */
  margin: 0;
}

.reveal .slides section.rf-slide.rf-dark-chapter {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  min-height: 100%;
  padding-bottom: 0.5rem;
  overflow: hidden;
}

.rf-dark-chapter__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-inline: 0;
}

.reveal .rf-dark-chapter h2 {
  font-size: var(--rf-h1);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0;
  width: 100%;
  max-width: 16em; /* em = h1 size */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.reveal .rf-dark-chapter .rf-lede {
  font-size: var(--rf-body);
  font-weight: 600;
  line-height: 1.4;
  width: 100%;
  max-width: 34em;
  margin: 0;
}

.reveal .rf-dark-chapter .rf-cta {
  margin-top: 0.5rem;
}

/* —— Agenda sidebar —— */
.rf-agenda {
  display: grid;
  grid-template-columns: 0.95fr 1.55fr;
  gap: 2.5rem;
  min-height: 100%;
  align-items: stretch;
}

.rf-agenda__side {
  border-right: 1px solid var(--rf-rule);
  padding-right: 1.5rem;
  display: flex;
  flex-direction: column;
}

.rf-agenda__side h2 {
  font-size: var(--rf-h1);
}

.rf-agenda__list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0;
}

.rf-agenda__list li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rf-rule);
}

.rf-agenda__list li:last-child {
  border-bottom: 0;
}

.rf-agenda__list h3 {
  font-size: 18pt;
  margin-bottom: 0.2rem;
}

.rf-agenda__list p {
  font-size: var(--rf-small);
  color: var(--rf-muted);
}

/* —— Idea columns —— */
.rf-ideas {
  display: grid;
  gap: var(--rf-gap);
  margin-top: 2rem;
}

.rf-ideas--2 { grid-template-columns: repeat(2, 1fr); }
.rf-ideas--3 { grid-template-columns: repeat(3, 1fr); }
.rf-ideas--4 { grid-template-columns: repeat(4, 1fr); }

.rf-idea .rf-num {
  display: block;
  font-family: var(--rf-font-sans);
  font-size: var(--rf-number);
  font-weight: 600;
  color: var(--rf-muted);
  margin-bottom: 0.35rem;
}

.rf-idea h3 {
  font-size: 17pt;
  margin-bottom: 0.55rem;
  line-height: 1.25;
}

.rf-idea p {
  font-size: var(--rf-small);
  color: var(--rf-muted);
  line-height: 1.4;
}

/* —— Quote center —— */
.reveal .slides section.rf-quote {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100%;
}

.rf-quote h2 {
  max-width: 18ch;
  margin-bottom: 1.25rem;
}

.rf-quote p {
  max-width: 42ch;
  font-size: var(--rf-body);
  color: var(--rf-muted);
}

/* —— Before / after board —— */
.rf-board {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

.rf-lens {
  display: grid;
  grid-template-columns: 7.5rem 1fr 1fr;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--rf-rule);
  align-items: start;
}

.rf-lens:last-child { border-bottom: 0; }

.rf-lens__label {
  font-family: var(--rf-font-sans);
  font-size: var(--rf-small);
  font-weight: 700;
  color: var(--rf-green);
}

.rf-lens__before {
  font-size: var(--rf-small);
  color: var(--rf-muted);
}

.rf-lens__after {
  font-size: var(--rf-small);
  color: var(--rf-ink);
}

.rf-board-head {
  display: grid;
  grid-template-columns: 7.5rem 1fr 1fr;
  gap: 1rem;
  font-family: var(--rf-font-sans);
  font-size: 10pt;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rf-muted-soft);
  margin-bottom: 0.25rem;
}

/* —— Bento —— */
.rf-bento {
  display: grid;
  gap: var(--rf-gap-sm);
  margin-top: 0.5rem;
  min-height: 0;
}

.reveal .slides section.rf-slide:has(> .rf-bento--metrics),
.reveal .slides section.rf-slide:has(> .rf-bento--actions) {
  display: flex !important;
  flex-direction: column;
}

.rf-bento--metrics {
  flex: 1 1 auto;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  margin-top: 1rem;
  min-height: 0;
}

.rf-bento--actions {
  flex: 1 1 auto;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: auto 1fr;
  min-height: 0;
}

.rf-panel {
  background: var(--rf-panel);
  border-radius: var(--rf-radius);
  padding: 1rem 1.15rem;
  box-sizing: border-box;
  min-height: 0;
  overflow: hidden;
}

.rf-panel--soft { background: var(--rf-panel-soft); }
.rf-panel--deep { background: var(--rf-panel-deep); }

.rf-panel--accent-green {
  background: var(--rf-green-soft);
  box-shadow: inset 3px 0 0 0 var(--rf-green);
}
.rf-panel--accent-green .rf-stat { color: var(--rf-green-deep); }

.rf-panel--accent-orange {
  background: var(--rf-orange-soft);
  box-shadow: inset 3px 0 0 0 var(--rf-orange);
}
.rf-panel--accent-orange .rf-stat { color: var(--rf-orange-deep, var(--rf-orange)); }

.rf-panel--accent-blue {
  background: var(--rf-blue-soft);
  box-shadow: inset 3px 0 0 0 var(--rf-blue);
}
.rf-panel--accent-blue .rf-stat { color: var(--rf-blue); }

.rf-panel--accent-brown {
  background: color-mix(in srgb, var(--rf-brown) 12%, var(--rf-cream));
  box-shadow: inset 3px 0 0 0 var(--rf-brown);
}
.rf-panel--accent-brown .rf-stat { color: var(--rf-brown); }

.rf-panel h3 {
  font-size: 15pt;
  color: var(--rf-ink);
  margin-bottom: 0.35rem;
}

.rf-panel p,
.rf-panel li {
  font-size: var(--rf-small);
  color: var(--rf-muted);
}

.rf-panel ul {
  margin: 0.4rem 0 0 1.05em;
  padding: 0;
}

.rf-panel li + li { margin-top: 0.3rem; }

.rf-stat {
  font-family: var(--rf-font-serif);
  font-size: var(--rf-stat);
  font-weight: 700;
  color: var(--rf-ink);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0.35rem;
}

.rf-bento--metrics .rf-stat {
  font-size: 42pt;
}

.rf-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 1.5rem;
  height: 100%;
}

.rf-stat-row > * {
  flex: 1 1 0;
  text-align: center;
  min-width: 0;
}

.rf-stat-row .rf-stat {
  font-size: 42pt;
}

.rf-stat-row p {
  margin: 0;
  font-size: var(--rf-small);
  font-weight: 600;
  color: var(--rf-muted);
}

/* —— Media split —— */
.reveal .slides section.rf-slide:has(> .rf-media-split) {
  display: flex !important;
  flex-direction: column;
}

.rf-media-split {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: stretch;
  min-height: 0;
  margin-top: 0.75rem;
}

.rf-media-split__copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
}

.rf-media-split__copy h2 {
  margin-top: 0.35rem;
  max-width: 12ch;
}

.rf-media-split__copy .rf-body-bottom {
  max-width: 28ch;
  font-size: var(--rf-small);
  color: var(--rf-muted);
}

.rf-media-frame {
  background: var(--rf-panel);
  border-radius: var(--rf-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  padding: 1.5rem;
  box-sizing: border-box;
  overflow: hidden;
}

.rf-media-frame img {
  max-width: 80%;
  max-height: 280px;
  width: auto;
  height: auto;
}

/* —— Resources list —— */
.rf-resources {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}

.rf-resources li {
  display: grid;
  grid-template-columns: 1.1fr 1.5fr;
  gap: 1.25rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rf-rule);
  font-size: var(--rf-small);
}

.rf-resources li:last-child { border-bottom: 0; }

.rf-resources strong {
  display: block;
  font-family: var(--rf-font-serif);
  font-size: 14pt;
  color: var(--rf-ink);
  margin-bottom: 0.15rem;
}

.rf-resources span { color: var(--rf-muted); }

/* —— Utilities —— */
.rf-stack-end {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
}

/* Beat .reveal p/li { margin: 0 } */
.reveal .rf-mt-1,
.reveal p.rf-mt-1 { margin-top: 0.75rem; }
.reveal .rf-mt-2,
.reveal p.rf-mt-2 { margin-top: 1.5rem; }
.rf-narrow { max-width: 40ch; }
.rf-measure-sm { max-width: 28ch; }
.rf-measure-md { max-width: 42ch; }
.rf-measure-lg { max-width: 48ch; }
.rf-gap-lg { gap: 2rem; }
.rf-span-all { grid-column: 1 / -1; }

/* Text accents — same intents as CDS .pill--* / brand text utilities */
.text-muted { color: var(--rf-muted); }
.text-green { color: var(--rf-green-deep); }
.text-orange { color: var(--rf-orange); }
.text-blue { color: var(--rf-blue); }
.text-danger { color: var(--rf-danger); }
.text-center { text-align: center; }

/* Beat .rf-panel h3 { color: ink } when accent utilities are applied */
.rf-panel h3.text-green { color: var(--rf-green-deep); }
.rf-panel h3.text-orange { color: var(--rf-orange); }
.rf-panel h3.text-blue { color: var(--rf-blue); }

/* —— Placeholders (charts / media / mockups) —— */
.rf-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  min-height: 12rem;
  background: var(--rf-panel-soft);
  border: 1.5px dashed color-mix(in srgb, var(--rf-ink) 18%, transparent);
  border-radius: var(--rf-card-radius);
  color: var(--rf-muted);
  font-family: var(--rf-font-sans);
  font-size: var(--rf-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  box-sizing: border-box;
}

.rf-placeholder span {
  display: block;
  max-width: 18ch;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--rf-ink-soft);
}

.rf-placeholder--media {
  min-height: 0;
  max-height: 100%;
  aspect-ratio: 4 / 3;
}

.reveal .slides section.rf-slide:has(> .rf-media-wide) {
  display: flex !important;
  flex-direction: column;
}

.rf-media-wide {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin: 1rem 0 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
}

.rf-placeholder--wide {
  width: min(100%, calc(100cqh * 16 / 9));
  height: min(100%, calc(100cqw * 9 / 16));
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
}

.rf-placeholder--mockup {
  min-height: 20rem;
  border-style: solid;
  border-color: var(--rf-rule);
  background:
    linear-gradient(180deg, var(--rf-panel-soft) 0 2.25rem, transparent 2.25rem),
    var(--rf-white);
  box-shadow: var(--rf-shadow, 0 2px 12px rgba(44, 41, 34, 0.06));
}

.rf-chart {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  margin-top: 1.25rem;
}

.rf-chart__copy h2 {
  margin: 0 0 0.75rem;
}

.rf-chart__copy p {
  margin: 0;
  max-width: 36ch;
  color: var(--rf-muted);
  font-size: 14pt;
  line-height: 1.45;
}

.rf-chart-frame {
  background: var(--rf-white);
  border: 1px solid var(--rf-rule);
  border-radius: var(--rf-radius);
  padding: 1.25rem 1.35rem 1rem;
  box-shadow: var(--rf-shadow, 0 2px 12px rgba(44, 41, 34, 0.06));
}

.rf-chart-frame figcaption {
  margin-top: 0.65rem;
  font-size: 11pt;
  color: var(--rf-muted);
  text-align: center;
}

.rf-bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 0.85rem;
  height: 11rem;
  padding: 0.25rem 0.25rem 0;
  border-bottom: 1px solid var(--rf-rule);
}

.rf-bars span {
  display: block;
  border-radius: 0.35rem 0.35rem 0 0;
  min-height: 1rem;
}

.rf-bars span:nth-child(1) { height: 42%; background: var(--rf-chart-1); }
.rf-bars span:nth-child(2) { height: 58%; background: var(--rf-chart-2); }
.rf-bars span:nth-child(3) { height: 76%; background: var(--rf-chart-3); }
.rf-bars span:nth-child(4) { height: 94%; background: var(--rf-chart-4); }

.rf-donut-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 2rem;
  align-items: center;
  margin-top: 1.25rem;
}

.rf-donut {
  width: min(100%, 14rem);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background: conic-gradient(
    var(--rf-chart-1) 0 38%,
    var(--rf-chart-2) 38% 68%,
    var(--rf-chart-3) 68% 100%
  );
  mask: radial-gradient(circle at center, transparent 52%, #000 53%);
  -webkit-mask: radial-gradient(circle at center, transparent 52%, #000 53%);
}

.rf-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.rf-points li {
  position: relative;
  padding-left: 1.35rem;
}

.rf-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--rf-chart-1);
}

.rf-points li:nth-child(2)::before { background: var(--rf-chart-2); }
.rf-points li:nth-child(3)::before { background: var(--rf-chart-3); }
.rf-points li:nth-child(4)::before { background: var(--rf-chart-4); }

.rf-points strong {
  display: block;
  font-family: var(--rf-font-serif);
  font-size: 16pt;
  color: var(--rf-ink);
  margin-bottom: 0.2rem;
}

.rf-points p {
  margin: 0;
  color: var(--rf-muted);
  font-size: 13pt;
  line-height: 1.4;
}

/* Horizontal bars */
.rf-hbars {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.rf-hbar {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) 3rem;
  gap: 0.75rem;
  align-items: center;
}

.rf-hbar__label {
  font-family: var(--rf-font-sans);
  font-size: var(--rf-small);
  font-weight: 700;
  color: var(--rf-ink);
}

.rf-hbar__track {
  height: 1.15rem;
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--rf-ink) 8%, var(--rf-cream));
  overflow: hidden;
}

.rf-hbar__track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--rf-chart-1);
}

.rf-hbar:nth-child(2) .rf-hbar__track > span { background: var(--rf-chart-2); }
.rf-hbar:nth-child(3) .rf-hbar__track > span { background: var(--rf-chart-3); }
.rf-hbar:nth-child(4) .rf-hbar__track > span { background: var(--rf-chart-4); }

.rf-hbar__value {
  font-family: var(--rf-font-sans);
  font-size: var(--rf-small);
  font-weight: 700;
  color: var(--rf-ink-muted);
  text-align: right;
}

/* Grouped compare bars */
.rf-gbars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 1rem;
  height: 12rem;
  margin-top: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--rf-rule);
}

.rf-gbar-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 0.3rem;
  height: 100%;
}

.rf-gbar-group span {
  display: block;
  border-radius: 0.3rem 0.3rem 0 0;
  min-height: 0.75rem;
}

.rf-gbar-group span:first-child { background: var(--rf-chart-1); }
.rf-gbar-group span:last-child { background: var(--rf-chart-2); }

.rf-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-top: 0.85rem;
  font-family: var(--rf-font-sans);
  font-size: var(--rf-small);
  font-weight: 600;
  color: var(--rf-ink-muted);
}

.rf-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.rf-chart-legend span::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.2rem;
  background: var(--rf-chart-1);
}

.rf-chart-legend span:nth-child(2)::before { background: var(--rf-chart-2); }
.rf-chart-legend span:nth-child(3)::before { background: var(--rf-chart-3); }
.rf-chart-legend span:nth-child(4)::before { background: var(--rf-chart-4); }

/* Stacked bar */
.rf-stackbars {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.rf-stackbar {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
}

.rf-stackbar__label {
  font-family: var(--rf-font-sans);
  font-size: var(--rf-small);
  font-weight: 700;
  color: var(--rf-ink);
}

.rf-stackbar__row {
  display: flex;
  height: 1.35rem;
  border-radius: 0.35rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--rf-ink) 8%, var(--rf-cream));
}

.rf-stackbar__row > span {
  display: block;
  height: 100%;
  min-width: 0;
}

.rf-stackbar__row > span:nth-child(1) { background: var(--rf-chart-1); }
.rf-stackbar__row > span:nth-child(2) { background: var(--rf-chart-2); }
.rf-stackbar__row > span:nth-child(3) { background: var(--rf-chart-3); }
.rf-stackbar__row > span:nth-child(4) { background: var(--rf-chart-4); }

/* Simple SVG line chart */
.rf-linechart {
  width: 100%;
  height: 11rem;
  display: block;
}

.rf-linechart .rf-linechart__grid {
  stroke: var(--rf-rule);
  stroke-width: 1;
}

.rf-linechart .rf-linechart__area {
  fill: color-mix(in srgb, var(--rf-chart-1) 18%, transparent);
}

.rf-linechart .rf-linechart__line {
  fill: none;
  stroke: var(--rf-chart-1);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rf-linechart .rf-linechart__dot {
  fill: var(--rf-cream);
  stroke: var(--rf-chart-2);
  stroke-width: 2.5;
}

.rf-mockup-bleed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 2rem;
  align-items: center;
  height: 100%;
}

.rf-mockup-bleed__copy h2 {
  margin: 0 0 0.5rem;
}

.rf-mockup-bleed__copy .rf-sub {
  margin: 0 0 1rem;
  color: var(--rf-green);
  font-family: var(--rf-font-serif);
  font-size: 16pt;
}

.rf-mockup-bleed__copy p {
  margin: 0;
  max-width: 34ch;
  color: var(--rf-muted);
  font-size: 14pt;
  line-height: 1.45;
}

.rf-template-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--rf-radius-pill);
  background: var(--rf-green-soft);
  color: var(--rf-green-deep, var(--rf-green));
  font-size: 10pt;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* AUTO chart data-attrs (phase4) */
[data-rf-w="28"] { width: 28%; }
[data-rf-w="41"] { width: 41%; }
[data-rf-w="64"] { width: 64%; }
[data-rf-w="86"] { width: 86%; }
[data-rf-h="42"] { height: 42%; }
[data-rf-h="48"] { height: 48%; }
[data-rf-h="55"] { height: 55%; }
[data-rf-h="60"] { height: 60%; }
[data-rf-h="62"] { height: 62%; }
[data-rf-h="70"] { height: 70%; }
[data-rf-h="78"] { height: 78%; }
[data-rf-h="88"] { height: 88%; }
[data-rf-flex="1"] { flex: 1; }
[data-rf-flex="2"] { flex: 2; }
[data-rf-flex="2.5"] { flex: 2.5; }
[data-rf-flex="2.8"] { flex: 2.8; }
[data-rf-flex="3"] { flex: 3; }
[data-rf-flex="3.5"] { flex: 3.5; }
[data-rf-flex="4.2"] { flex: 4.2; }