/* ==========================================================================
   Inner pages, set D: repforge.html (branch `redesign`).
   Loaded after redesign.css on this page only. Uses the shared tokens,
   island, buttons, metric strip, character slots and gutter decoration from
   redesign.css; everything here is scoped under .pd.
   ========================================================================== */

/* ---------- Hero island (the homepage Rep Forge panel, as a page head) ---------- */
.pd-hero-inner { position: relative; z-index: 1; }
.pd-hero-copy { max-width: 600px; }
.pd-hero h1 {
  font-size: clamp(28px, 8vw, var(--text-hero-display));   /* three short lines hold on phones (2026-09-28) */
  line-height: var(--leading-hero-display);
}
.pd-hero h1 span { display: block; }
.pd-hero .lede { max-width: 520px; margin-top: 18px; }

/* Store badges: no listings exist yet, so these stay dashed placeholders. */
.pd-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.pd-store-slot {
  flex-direction: column;
  gap: 2px;
  width: 196px;
  max-width: 100%;
  min-height: 56px;
  padding: 8px 14px;
  border-color: rgba(139, 179, 218, .7);
  border-radius: 8px;
  background: rgba(139, 179, 218, .08);
  color: var(--color-white-surface);
  font-size: 13px;
  line-height: 1.3;
}
.pd-store-slot .note { color: var(--color-signal-blue); font-size: 11px; }
.pd-reassure {
  margin-top: 14px;
  font-size: var(--text-caption);
  line-height: 22px;
  font-weight: 400;
  color: var(--color-signal-blue);
}

/* Character slot: phones stack it under the copy, at the right, crossing the
   island's bottom edge. From 900 px it stands at the right of the island. */
.pd-hero-art {
  position: relative;
  z-index: 2;
  width: min(54%, 220px);
  margin: 20px var(--gutter) -64px auto;
  pointer-events: none;
}
.pd-hero-art .rs-char-slot { min-height: 0; font-size: 12px; line-height: 16px; }
@media (min-width: 900px) {
  .pd-hero { min-height: 560px; }
  .pd-hero-copy { max-width: calc(100% - 400px); }
  .pd-hero-art {
    position: absolute;
    right: max(calc(var(--gutter) + 8px), calc((100% - var(--page-max-width)) / 2 + 8px));
    bottom: -64px;
    width: 352px;
    margin: 0;
  }
  .pd-hero-art .rs-char-slot { font-size: 14px; line-height: 22px; }
}
@media (min-width: 1200px) {
  .pd-hero-copy { max-width: 620px; }
  .pd-hero-art { width: 400px; }
}

/* ---------- Pale body bands ---------- */
.pd-body { position: relative; padding-top: 88px; }
.pd-body--after { padding-top: 0; }
@media (min-width: 900px) { .pd-body { padding-top: 120px; } .pd-body--after { padding-top: 0; } }

.pd-sec { position: relative; padding: 56px 0; }
.pd-sec--tight { padding-block: 24px; }
.pd-sec--panel { padding-top: 64px; }
.pd-sec--last { padding-top: 32px; padding-bottom: 32px; }
.pd-session-sec { position: relative; padding-bottom: 24px; }
@media (min-width: 900px) {
  .pd-sec { padding: 88px 0; }
  .pd-sec--tight { padding-block: 32px; }
  .pd-sec--panel { padding: 96px 0 72px; }
  .pd-sec--last { padding-top: 56px; padding-bottom: 40px; }
  .pd-session-sec { padding-bottom: 32px; }
}

/* Gutter decoration (the blog's layer): spans the band, full viewport width,
   and shows only where the gutter beside the content is real. */
@media (min-width: 1100px) {
  .pd .blog-ambient {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    --clear: 1180px;
  }
  .pd-body > :not(.blog-ambient) { position: relative; z-index: 1; }
}
@media (min-width: 1100px) and (max-width: 1299px) {
  .pd .blog-ambient { display: none; }
}

/* ---------- Shared bits ---------- */
.pd .rs-head h2 { font-size: clamp(28px, 7.6vw, var(--text-section-heading)); }
.pd-eyebrow {
  font-size: var(--text-caption);
  line-height: 22px;
  font-weight: 500;
  color: #2f6fe0;
}
.pd-ico { width: 48px; height: 48px; flex: none; }

/* Unwritten copy: a visible pending block (see CLAUDE.md, "Placeholder system") */
.pd .pending {
  padding: 18px 20px;
  border: 1.5px dashed rgba(24, 61, 109, .35);
  border-radius: var(--radius-cards);
  background: var(--color-ice-surface);
  color: var(--color-edge-navy);
  font-size: 16px;
  line-height: 1.45;
}

.pd-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-edge-navy);
  text-decoration: none;
}
.pd-arrow .rs-chevron { width: 18px; height: 18px; transition: transform var(--t-mid) var(--ease); }
.pd-arrow:hover .rs-chevron { transform: translateX(4px); }

/* Tick lists */
.pd-ticks { display: grid; gap: 10px; margin-top: 18px; }
.pd-ticks li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-edge-navy);
}
.pd-ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-edge-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.pd-ticks--dark li { color: var(--color-white-surface); }
.pd-ticks--dark li::before {
  background-color: var(--color-white-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23183d6d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Phone screenshot placeholders */
.pd-shot-slot {
  flex-direction: column;
  gap: 6px;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 14px;
  border-color: rgba(24, 61, 109, .35);
  border-radius: 14px;
  background: var(--color-ice-surface);
  color: var(--color-edge-navy);
  font-size: 12px;
  line-height: 1.35;
}
.pd-shot-slot .note { opacity: .7; }
.pd-shot-slot--wide { aspect-ratio: 4 / 3; }
.pd-shot-slot--dark {
  border-color: rgba(139, 179, 218, .7);
  background: rgba(139, 179, 218, .08);
  color: var(--color-white-surface);
}
.pd-shot-slot--dark .note { color: var(--color-signal-blue); opacity: 1; }

/* ---------- Live session panel (rendered, sample data) ---------- */
.pd-session {
  max-width: 1000px;
  margin: 40px auto 0;
  border: 1px solid var(--color-mist-divider);
  border-radius: var(--radius-hero);
  background: var(--color-white-surface);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.pd-sess-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: var(--color-launch-bay);
  color: var(--color-white-surface);
}
.pd-sess-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.pd-sess-title strong { font-size: 18px; font-weight: 700; }
.pd-sess-title small { font-size: var(--text-caption); color: var(--color-signal-blue); }
.pd-live {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid rgba(139, 179, 218, .5);
  border-radius: var(--radius-pills);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.pd-live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--color-signal-blue); }
.pd-live-dot::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: var(--color-signal-blue);
  opacity: 0;
  animation: rs-breathe 2.4s ease-out infinite;
}

.pd-sess-grid { display: grid; }
.pd-moves { padding: 8px 12px; }
.pd-move {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name time" "meta meta" "prev prev";
  align-items: center;
  gap: 10px 12px;
  padding: 16px 10px;
  border-top: 1px solid var(--color-mist-divider);
}
.pd-move:first-child { border-top: 0; }
.pd-move.is-pr {
  margin-top: 4px;
  border-radius: 12px;
  background: var(--color-ice-surface);
  box-shadow: inset 4px 0 0 var(--color-signal-orange);   /* the one orange highlight */
  padding-left: 16px;
}
.pd-move.is-pr + .pd-move { border-top: 0; }
.pd-move-name { grid-area: name; min-width: 0; }
.pd-move-name strong { display: block; font-size: var(--text-card-title); line-height: var(--leading-card-title); font-weight: 700; }
.pd-move-name small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.3; color: #4a6a93; }
.pd-move-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 6px; }
.pd-move-meta span {
  padding: 4px 11px;
  border-radius: var(--radius-pills);
  background: var(--color-cloud-canvas);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.pd-move-meta .pd-lr { background: transparent; box-shadow: inset 0 0 0 1px var(--color-mist-divider); }
.pd-move-time { grid-area: time; display: flex; align-items: center; gap: 10px; justify-self: end; }
.pd-time { font-size: var(--text-rating); line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-move:not(.is-pr) .pd-time { color: #4a6a93; }
.pd-pr {
  padding: 4px 10px;
  border-radius: var(--radius-pills);
  background: var(--color-edge-navy);
  color: var(--color-white-surface);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.pd-move-prev { grid-area: prev; font-size: 14px; line-height: 1.3; color: #4a6a93; }
.pd-move-prev b { margin-left: 8px; font-weight: 700; color: #2f6fe0; }

.pd-sess-side {
  display: grid;
  gap: 18px;
  align-content: start;
  padding: 20px;
  background: var(--color-ice-surface);
  border-top: 1px solid var(--color-mist-divider);
}
.pd-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pd-totals > div { display: flex; flex-direction: column; gap: 6px; }
.pd-cell-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #4a6a93;
}
.pd-num { font-size: var(--text-rating); line-height: 1; font-weight: 700; white-space: nowrap; }
.pd-num small { font-size: 14px; font-weight: 500; }
.pd-num--season { font-size: clamp(30px, 9vw, 44px); }
.pd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-chips li {
  padding: 5px 12px;
  border: 1px solid var(--color-mist-divider);
  border-radius: var(--radius-pills);
  background: var(--color-white-surface);
  font-size: 13px;
  line-height: 1.3;
}
@media (max-width: 399px) {
  .pd-moves { padding: 6px 6px; }
  .pd-sess-bar, .pd-sess-side { padding-inline: 16px; }
  .pd-totals { grid-template-columns: 1fr; }
}
@media (min-width: 640px) {
  .pd-move {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "name meta time" "prev prev prev";
  }
  .pd-move-meta { justify-content: flex-end; }
}
@media (min-width: 900px) {
  .pd-session { margin-top: 56px; }
  .pd-sess-bar { padding: 18px 28px; }
  .pd-sess-grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
  .pd-moves { padding: 12px 20px 16px; }
  .pd-sess-side { padding: 28px; border-top: 0; border-left: 1px solid var(--color-mist-divider); }
  .pd-totals { grid-template-columns: 1fr; gap: 22px; }
}

/* ---------- Coverage cards + metric strip ---------- */
.pd-cover {
  display: grid;
  gap: 15px;
  margin-top: 40px;
}
.pd-cover-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  padding: 18px 20px;
  border-radius: var(--radius-cards);
  background: var(--color-white-surface);
  box-shadow: var(--shadow-xl);
  transition: transform var(--t-mid) var(--ease);
}
.pd-cover-card .pd-ico { grid-row: span 2; }
.pd-cover-card h3 { font-size: 18px; line-height: 1.3; font-weight: 700; }
.pd-cover-card p { margin-top: 4px; font-size: 16px; line-height: 1.4; }
.pd-cover-card:hover { transform: scale(1.02); }
@media (min-width: 640px) { .pd-cover { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .pd-cover { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 56px; }
  .pd-cover-card { grid-template-columns: 1fr; row-gap: 14px; padding: 24px 20px; }
  .pd-cover-card .pd-ico { grid-row: auto; }
  .pd-cover-card h3 { min-height: 2.6em; }
  .pd-cover-card p { margin-top: -8px; }
}

/* ---------- Feature cards ---------- */
.pd-features { display: grid; gap: 15px; margin-top: 40px; }
.pd-feature {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 26px 22px;
  border-radius: var(--radius-cards);
  background: var(--color-white-surface);
  box-shadow: var(--shadow-xl);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.pd-feature:hover { transform: scale(1.02); box-shadow: 0 10px 40px rgba(24, 61, 109, .09); }
.pd-feature-body { flex: 1; min-width: 0; }
.pd-feature-body .pd-ico { margin-bottom: 14px; }
.pd-feature h3 { margin-top: 2px; font-size: var(--text-card-title); line-height: var(--leading-card-title); font-weight: 700; }
.pd-feature-body > p:not(.pd-eyebrow) { margin-top: 6px; font-size: 16px; line-height: 1.4; }
.pd-feature-media { width: min(100%, 190px); }
.pd-feature--wide .pd-feature-media { width: min(100%, 260px); }
@media (min-width: 560px) {
  .pd-feature { flex-direction: row; align-items: flex-start; gap: 24px; padding: 28px 28px 28px 32px; }
  .pd-feature-media { flex: none; width: 170px; }
  .pd-feature--wide .pd-feature-media { width: 240px; }
}
@media (min-width: 1024px) {
  .pd-features { margin-top: 56px; }
  .pd-feature--wide .pd-feature-body { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 20px; }
  .pd-feature--wide .pd-feature-body .pd-ico { grid-row: span 4; margin: 0; }
  .pd-feature--wide .pd-ticks { grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px 28px; }
}
@media (min-width: 1200px) {
  .pd-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  .pd-feature--wide { grid-column: 1 / -1; }
}

/* ---------- Form builder (dark panel) ---------- */
.pd-forms {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 100px;                /* room for the art that crosses the top edge */
  padding: 0 22px 32px;
  border-radius: var(--radius-hero);
  background: var(--panel-dark-bg);
  color: var(--color-white-surface);
}
.pd-forms-art {
  align-self: flex-start;
  width: min(56%, 220px);
  margin: -96px 0 16px;
  pointer-events: none;
}
.pd-forms-art .rs-char-slot { min-height: 0; font-size: 12px; line-height: 16px; }
.pd-forms-copy { position: relative; z-index: 1; }
.pd-forms h2 {
  margin-top: 8px;
  font-size: clamp(30px, 8.6vw, var(--text-section-heading));
  line-height: var(--leading-section-heading);
  font-weight: 700;
  color: var(--color-white-surface);
}
.pd-forms-lede { margin-top: 14px; max-width: 520px; font-size: var(--text-body); line-height: 1.3; }
.pd-forms-media { width: min(100%, 190px); margin-top: 26px; }
@media (min-width: 640px) { .pd-forms { padding: 0 40px 40px; } }
@media (min-width: 900px) {
  .pd-forms {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    align-items: center;
    column-gap: 28px;
    margin-top: 40px;
    min-height: 400px;
    padding: 48px 36px 48px 320px;
  }
  .pd-forms h2 { font-size: 36px; }
  .pd-forms-media { margin-top: 0; width: 150px; }
  .pd-forms-art {
    position: absolute;
    left: 28px;
    bottom: 0;
    width: 270px;
    height: calc(100% + 100px);
    margin: 0;
  }
  .pd-forms-art .rs-char-slot { height: 100%; aspect-ratio: auto !important; font-size: 14px; line-height: 22px; }
}
@media (min-width: 1100px) {
  .pd-forms {
    grid-template-columns: minmax(0, 1fr) 190px;
    column-gap: 48px;
    padding: 64px 64px 64px 420px;
  }
  .pd-forms h2 { font-size: var(--text-section-heading); }
  .pd-forms-art { left: 56px; width: 320px; }
  .pd-forms-media { margin-top: 0; width: 190px; }
}

/* ---------- Practice scenarios ---------- */
.pd-scen-grid { display: grid; gap: 15px; max-width: 1040px; margin: 40px auto 0; }
.pd-scen {
  padding: 24px 22px;
  border-radius: var(--radius-cards);
  background: var(--color-white-surface);
  box-shadow: var(--shadow-xl);
}
.pd-scen h3 { font-size: var(--text-card-title); line-height: var(--leading-card-title); font-weight: 700; }
.pd-scen p { margin-top: 8px; font-size: 16px; line-height: 1.5; }
@media (min-width: 760px) {
  .pd-scen-grid { grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 56px; }
  .pd-scen { padding: 30px 30px 30px 32px; }
}

/* ---------- Why we built this ---------- */
.pd-story {
  max-width: 820px;
  margin-inline: auto;
  padding: 28px 22px 20px;
  border-radius: var(--radius-cards);
  background: var(--color-white-surface);
  box-shadow: var(--shadow-xl);
}
.pd-story h2 { font-size: clamp(26px, 6.4vw, 34px); line-height: 1.2; font-weight: 700; }
.pd-story .pending { margin-top: 18px; }
.pd-story .pd-arrow { margin-top: 10px; }
@media (min-width: 640px) { .pd-story { padding: 40px 40px 28px; } }

/* ---------- Also from us (TKD Companion; no integration claims) ---------- */
.pd-also {
  display: grid;
  gap: 26px;
  max-width: 1040px;
  margin-inline: auto;
  padding: 28px 22px;
  border-radius: var(--radius-cards);
  background: var(--color-white-surface);
  box-shadow: var(--shadow-xl);
}
.pd-also h2 { margin-top: 4px; font-size: clamp(26px, 6.4vw, 34px); line-height: 1.2; font-weight: 700; }
.pd-also-copy > p:not(.pd-eyebrow) { margin-top: 12px; font-size: var(--text-body); line-height: 1.4; }
.pd-also .rs-btn { margin-top: 22px; }
.pd-ring {
  align-self: center;
  padding: 18px;
  border-radius: var(--radius-cards);
  background: var(--color-ice-surface);
  font-size: 15px;
  line-height: 1.3;
}
.pd-ring-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; }
.pd-ring-bar strong { display: block; font-size: 17px; font-weight: 700; }
.pd-ring-bar small { display: block; margin-top: 3px; font-size: 13px; color: #4a6a93; }
.pd-ring-tag {
  flex: none;
  padding: 4px 11px;
  border-radius: var(--radius-pills);
  background: var(--color-white-surface);
  font-size: 12px;
  font-weight: 500;
}
.pd-ring-list { margin: 0; padding: 0; list-style: none; }
.pd-ring-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 6px;
  border-top: 1px solid var(--color-mist-divider);
}
.pd-ring-list b {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-white-surface);
  font-size: 14px;
}
.pd-ring-list strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-ring-list span { font-size: 20px; font-weight: 700; }
.pd-ring-list .is-lead b { background: var(--color-edge-navy); color: var(--color-white-surface); }
@media (min-width: 760px) {
  .pd-also { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 40px 40px 40px 44px; }
}

/* ---------- FAQ (native details, no JS) ---------- */
.pd-faq-list { display: grid; gap: 12px; max-width: 820px; margin: 40px auto 0; }
.pd-faq-list details {
  border-radius: var(--radius-cards);
  background: var(--color-white-surface);
  box-shadow: var(--shadow-xl);
  transition: box-shadow var(--t-mid) var(--ease);
}
.pd-faq-list details:hover { box-shadow: 0 10px 40px rgba(24, 61, 109, .09); }
.pd-faq-list summary {
  position: relative;
  display: block;
  padding: 20px 60px 20px 20px;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-cards);
}
.pd-faq-list summary::-webkit-details-marker { display: none; }
.pd-faq-list summary::before,
.pd-faq-list summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 16px;
  height: 2.5px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--color-edge-navy);
  transition: transform var(--t-mid) var(--ease);
}
.pd-faq-list summary::after { transform: rotate(90deg); }
.pd-faq-list details[open] summary::before { transform: rotate(45deg); }
.pd-faq-list details[open] summary::after { transform: rotate(135deg); }
.pd-faq-list summary:focus-visible { outline-offset: 2px; }
.pd-faq-list details p {
  margin: 0 20px 22px;
  font-size: 16px;
  line-height: 1.55;
  animation: rs-reveal-down .3s ease-out both;
}
.pd-faq-list details p:not(.pending) { margin-inline: 20px; }
.pd-faq-list details[open] { box-shadow: 0 10px 40px rgba(24, 61, 109, .09), inset 3px 0 0 var(--color-signal-blue); }
.pd-faq-more { max-width: 820px; margin: 18px auto 0; }
@media (min-width: 640px) {
  .pd-faq-list summary { padding: 22px 64px 22px 28px; font-size: var(--text-card-title); line-height: var(--leading-card-title); }
  .pd-faq-list details p { margin: 0 64px 26px 28px; font-size: var(--text-body); }
  .pd-faq-list details p.pending { font-size: 16px; }
}

/* ---------- Closing conversion banner ---------- */
.pd-final {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 100px;                /* room for the art that crosses the top edge */
  padding: 0 22px 34px;
  border-radius: var(--radius-hero);
  background: var(--panel-dark-bg);
  color: var(--color-white-surface);
}
.pd-final :focus-visible { outline-color: var(--color-white-surface); }
.pd-final-copy { position: relative; z-index: 1; max-width: 580px; }
.pd-final h2 {
  font-size: clamp(30px, 7.6vw, var(--text-promo-heading));
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-white-surface);
  text-wrap: balance;
}
.pd-final-actions { margin-top: 26px; }
.pd-final .pd-badges { margin-top: 18px; }
.pd-final-art {
  order: -1;
  align-self: flex-end;
  width: min(70%, 280px);
  margin: -110px 0 16px;
  pointer-events: none;
}
.pd-final-art .rs-char-slot { min-height: 0; font-size: 12px; line-height: 16px; }
@media (max-width: 479px) {
  .pd-final .rs-btn--convert { width: 100%; justify-content: space-between; }
}
@media (min-width: 640px) { .pd-final { padding: 0 40px 40px; } }
@media (min-width: 900px) {
  .pd-final { margin-top: 70px; min-height: 380px; justify-content: center; padding: 56px 64px; }
  .pd-final-copy { max-width: calc(100% - 380px); }
  .pd-final-art {
    position: absolute;
    right: 56px;
    bottom: 0;
    width: 320px;
    height: calc(100% + 96px);
    margin: 0;
  }
  .pd-final-art .rs-char-slot { height: 100%; aspect-ratio: auto !important; font-size: 14px; line-height: 22px; }
}
@media (min-width: 1200px) {
  .pd-final-copy { max-width: calc(100% - 440px); }
  .pd-final-art { right: 80px; width: 340px; }
}
/* Blake a bit bigger (Adam, 2026-09-28): the art box grows taller and wider,
   and the image fills it, anchored bottom-right. */
.pd-final-art .rs-char-art { width: 100%; height: auto; }
@media (min-width: 900px) {
  .pd-final-copy { max-width: calc(100% - 430px); }
  .pd-final { margin-top: 170px; }
  .pd-final-art { width: 340px; height: 540px; }   /* 900-1199: a fixed height so he never crowds the copy */
  /* Size Blake by height; the canvas has wide empty margins, so let it overflow the box sideways. */
  .pd-final-art .rs-char-art { position: absolute; right: -40px; bottom: 0; height: 100%; width: auto; max-width: none; }
}
@media (min-width: 1200px) {
  .pd-final-copy { max-width: calc(100% - 500px); }
  .pd-final-art { width: 440px; right: 64px; height: calc(100% + 200px); }
}

/* ---------- Motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  .pd-cover-card:hover,
  .pd-feature:hover,
  .pd-arrow:hover .rs-chevron { transform: none; }
}

/* Natalie in the form-builder panel, a little bigger (Adam, 2026-09-28): about +20% */
.pd-forms-art { width: min(66%, 264px); margin-top: -110px; }
@media (min-width: 900px) {
  .pd-forms { padding-left: 360px; margin-top: 70px; }
  .pd-forms-art { left: 20px; width: 324px; height: calc(100% + 130px); }
}
@media (min-width: 1100px) {
  .pd-forms { padding-left: 480px; }
  .pd-forms-art { left: 48px; width: 384px; }
}

/* Rep Forge web app is live (rep-forge.net): hero conversion button + browser badge */
.pd-cta { margin-top: 28px; }
.pd-cta + .pd-badges { margin-top: 16px; }
.pd-badges .rs-store--web { height: 56px; }

/* Hero art: Theo and Blake, sized like the homepage hero (Adam, 2026-09-28) */
.pd-hero-art {
  width: min(100%, 520px);
  margin: 12px auto -56px;
  aspect-ratio: 1060 / 900;
}
.pd-hero-art .rs-char-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  animation: rs-float 7s ease-in-out infinite;
}
@media (min-width: 900px) {
  .pd-hero-copy { max-width: min(560px, 48%); }
  .pd-hero-art {
    right: max(calc(var(--gutter) - 8px), calc((100% - var(--page-max-width)) / 2 - 28px));
    bottom: -64px;
    width: min(56%, 690px);
  }
}
@media (min-width: 1200px) {
  .pd-hero-copy { max-width: min(560px, 48%); }
  .pd-hero-art { width: min(58%, 720px); }
}
@media (prefers-reduced-motion: reduce) { .pd-hero-art .rs-char-art { animation: none; } }
/* Keep the hero copy clear of Theo and the badges on one row */
@media (min-width: 900px) {
  .pd-hero .pd-store-slot { width: 150px; }
  .pd-hero-copy { max-width: min(520px, 46%); }
  .pd-hero-art { right: calc((100% - var(--page-max-width)) / 2 - 90px); }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .pd-hero-copy { max-width: 54%; }
  .pd-hero h1 { font-size: 44px; }
  .pd-hero-art { right: 8px; width: 48%; }
}

/* Natalie (form-builder panel): a bit larger and a little lower (Adam, 2026-09-28) */
.pd-forms-art { width: min(74%, 296px); margin-top: -84px; }
@media (min-width: 900px) {
  .pd-forms { padding-left: 390px; }
  .pd-forms-art { width: 360px; height: calc(100% + 92px); }
}
@media (min-width: 1100px) {
  .pd-forms { padding-left: 520px; }
  .pd-forms-art { width: 430px; left: 44px; }
}