/* =============================================================================
   rp — the related-products strip (founder, 2026-09-27: "a related product strip
   that goes at the bottom of the page, listing other products").
   Prefix: .rp-   Page-scoped (css: rp). The last band before the footer on a
   product page: a short heading and one tile per OTHER product. First used on
   /counsel (FineShield + FinePrint Live); /fineshield and /live can reuse it by
   listing their own siblings. Each tile carries its product's colour world, as
   the homepage's product cards do: FineShield amber on bronze, FinePrint Live
   indigo. (A Counsel tile, when /fineshield or /live reuses this, takes teal:
   --rp-acc:var(--teal) and the navy .rp-mark default.)
   ========================================================================== */
.rp{--rp-acc:var(--ink);background:var(--sand);border-top:1px solid var(--line);padding-block:clamp(48px,5.6vw,80px)}
.rp-in{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,2fr);gap:clamp(24px,4vw,64px);align-items:center}
.rp-head{min-width:0}
.rp-k{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2)}
.rp-h{margin-top:12px;max-width:16ch;font-family:var(--display);font-weight:400;font-size:clamp(26px,2.3vw,34px);line-height:1.12;
  letter-spacing:-.005em;color:var(--ink);text-wrap:balance}

.rp-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.rp-list li{display:flex}
.rp-item{flex:1;display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:1fr auto;column-gap:18px;row-gap:16px;
  padding:clamp(20px,1.9vw,26px);border:1px solid var(--line);border-radius:14px;background:var(--paper-2);color:var(--ink);text-decoration:none;
  box-shadow:0 1px 0 rgba(16,30,40,.03);transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.rp-mark{grid-row:1 / span 2;width:56px;height:56px;border-radius:12px;display:grid;place-items:center;background:var(--deep)}
.rp-mark .picon{width:30px;height:30px}
.rp-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.rp-name{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rp-acc)}
.rp-job{font-family:var(--display);font-size:clamp(20px,1.6vw,23px);line-height:1.2;color:var(--ink)}
.rp-note{font-size:13.5px;line-height:1.45;color:var(--grey-2)}
.rp-go{align-self:end;display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--rp-acc)}
.rp-go .arr{transition:transform .25s ease}
.rp-item:hover{border-color:var(--rp-acc);box-shadow:0 18px 36px -24px rgba(16,30,40,.35)}
.rp-item:hover .rp-go .arr{transform:translateX(4px)}
.rp-item:focus-visible{outline:2px solid var(--rp-acc);outline-offset:3px}

/* the colour worlds, from the homepage product cards (layer-28 .h5-two-shield, h7 .h7-two-live) */
.rp-shield{--rp-acc:#9A5B06}
.rp-shield .rp-mark{background:radial-gradient(90% 70% at 88% 18%,#4A4128 0%,rgba(74,65,40,0) 70%),linear-gradient(160deg,#34301F 0%,#221F15 60%,#17150E 100%)}
.rp-live{--rp-acc:#46528A}
.rp-live .rp-mark{background:radial-gradient(90% 70% at 88% 18%,#343B5E 0%,rgba(52,59,94,0) 70%),linear-gradient(160deg,#1E233A 0%,#141829 60%,#0D101D 100%)}

@media (prefers-reduced-motion:no-preference){
  .rp-item:hover{transform:translateY(-2px)}
}
@media (prefers-reduced-motion:reduce){
  .rp-item,.rp-go .arr{transition:none}
}
@media (max-width:1000px){
  .rp-in{grid-template-columns:minmax(0,1fr)}
  .rp-h{max-width:24ch}
}
@media (max-width:640px){
  .rp-list{grid-template-columns:minmax(0,1fr)}
  .rp-item{grid-template-columns:48px minmax(0,1fr);column-gap:16px;row-gap:14px}
  .rp-mark{width:48px;height:48px;border-radius:10px}
  .rp-mark .picon{width:26px;height:26px}
}