/* Decision Room · Methodology: two counter-scrolling rows of testimonial-style cards (R12, RS2 values).
   transform-only marquee, duplicated set per track, paused on hover / focus / off-screen / the Pause control.
   rgba() literals: 255,255,255 = glass recipe. */
.dr-meth{ padding-block:64px 0; }
/* The head keeps the page gutter (T11 QA-01: it sat flush at x=0); the rows below stay full-bleed under their mask.
   The head spans the wrap so the Pause control sits on the right gutter; only the text column is capped (FIX-4). */
.dr-meth-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:28px; padding-inline:var(--gutter); }
.dr-meth-head > div{ max-width:900px; }
/* 44px touch target for the Pause / Play control (T11 F1), page-scoped: shared.css .btn.sm is unchanged. */
.dr-meth #dr-meth-toggle{ min-height:44px; }
.dr-meth-intro{ margin:0; font-size:14px; line-height:1.55; color:var(--ink-mute); }
.dr-meth-rows{ display:flex; flex-direction:column; gap:16px; }
.dr-meth-row{ overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.dr-meth-row[data-dir="right"]{ margin-left:140px; margin-top:12px; }
.dr-meth-track{ display:flex; width:max-content; will-change:transform; animation:dr-marquee var(--dr-meth-dur,64s) linear infinite; }
.dr-meth-row[data-dir="right"] .dr-meth-track{ --dr-meth-dur:72s; animation-direction:reverse; }
.dr-meth-set{ display:flex; gap:16px; padding-right:16px; align-items:stretch; }
@keyframes dr-marquee{ to{ transform:translateX(-50%); } }
.dr-meth-row:hover .dr-meth-track,
.dr-meth-row:focus-within .dr-meth-track,
.dr-meth.is-paused .dr-meth-track,
.dr-meth.is-offscreen .dr-meth-track{ animation-play-state:paused; }

.dr-card{ flex:none; display:flex; flex-direction:column; gap:10px; padding:20px 22px; border-radius:16px; }
.dr-card[data-size="s"]{ width:300px; }
.dr-card[data-size="m"]{ width:380px; }
.dr-card[data-size="l"]{ width:460px; }
.dr-card-lead{ margin:0; font-size:16px; font-weight:500; line-height:1.35; color:var(--ink); }
.dr-card-body{ margin:0; font-size:14px; line-height:1.55; color:var(--ink-dim); }
.dr-card-tag{ margin-top:auto; padding-top:6px; }
/* The approved how-these-figures-were-produced paragraph (owner 2026-09-14): static, under the two card rows, on the
   page gutter like the head above (OWNER-5 column). It sits inside #dr-methodology-content so the drawer shows it too. */
.dr-meth-note{ margin:12px var(--gutter) 0; max-width:900px; font-size:14px; line-height:1.6; color:var(--ink-mute); }

/* Drawer: the same content stacked and static; the clone sets are hidden. */
.dr-drawer-body .dr-meth-row{ overflow:visible; mask-image:none; -webkit-mask-image:none; margin:0; }
.dr-drawer-body .dr-meth-track{ animation:none; width:auto; display:block; }
.dr-drawer-body .dr-meth-set{ flex-direction:column; padding-right:0; }
.dr-drawer-body .dr-meth-set[aria-hidden="true"]{ display:none; }
.dr-drawer-body .dr-card{ width:100%; margin-bottom:12px; }
.dr-drawer-body .dr-meth-note{ margin:4px 0 0; }

@media (max-width:1023px){
  .dr-meth-head{ flex-direction:column; align-items:flex-start; gap:12px; }
  .dr-meth-row[data-dir="right"]{ margin-left:40px; }
  .dr-card[data-size="s"],.dr-card[data-size="m"],.dr-card[data-size="l"]{ width:min(320px,80vw); }
}
@media (prefers-reduced-motion:reduce){
  :root[data-motion="always"] .dr-meth-track{ animation-duration:var(--dr-meth-dur,64s) !important; animation-iteration-count:infinite !important; }
}