/* ============================================================
   RIVET proof kit (31 Oct 2026)
   One testimonial card (.pq) used on the home, /pricing, the OS overview and the
   intro course pages, plus the in-section Q&A (.pdp-qa, the plan-page pattern)
   for pages that don't load product.css.
   Brand: cards have no border; light = white + shadow-card, dark = elev-1, no shadow.
   Magenta is never used here: the page's one action keeps it.
   ============================================================ */

/* ---- the card ---- */
.pq{
  --pq-bg:#FFFFFF; --pq-ink:#0E0E14; --pq-soft:#3C3C50; --pq-mute:#4A4A68; --pq-link:#3B06D4; --pq-rule:#E6E6EE;
  --pq-shadow:var(--shadow-card, 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06));
  position:relative; margin:0; min-width:0;
  display:flex; flex-direction:column; gap:20px;
  padding:clamp(22px,2.4vw,30px);
  border:0; border-radius:var(--radius-card,12px);
  background:var(--pq-bg); box-shadow:var(--pq-shadow); color:var(--pq-ink);
  text-align:start;
}
html[data-mode="dark"] .pq, body.gtm-dark .pq{
  --pq-bg:#0A0A0C; --pq-ink:#F8F8FA; --pq-soft:#D1D1D9; --pq-mute:#9A9BBD; --pq-link:#7B87FF; --pq-rule:#1E1E2A; --pq-shadow:none;
}
html[data-mode="dark"] .section--alt .pq, body.gtm-dark .section--alt .pq{ --pq-bg:#12121A; }

/* one opening glyph, nothing more */
.pq__q{ margin:0; flex:1; }
.pq__q::before{
  content:"\201C"; display:block; height:.5em; margin:0 0 8px;
  font:600 2.75rem/1 var(--font-mono,"IBM Plex Mono",monospace); color:var(--pq-mute);
}
.pq__q p{ margin:0; font-family:var(--font-sans,"IBM Plex Sans",system-ui,sans-serif); font-size:1.0625rem; line-height:1.6; color:var(--pq-ink); text-wrap:pretty; }

/* the outcome line: Mono numerals in ink (magenta stays with the page's action) */
.pq__stat{ display:flex; flex-direction:column; gap:6px; margin:0; padding-bottom:18px; border-bottom:1px solid var(--pq-rule); }
.pq__stat b{ font:600 clamp(2.25rem,1.6rem + 2.4vw,3.5rem)/1.02 var(--font-mono,"IBM Plex Mono",monospace); letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--pq-ink); }
.pq__stat span{ font:500 .75rem/1.4 var(--font-mono,"IBM Plex Mono",monospace); letter-spacing:.08em; text-transform:uppercase; color:var(--pq-mute); }

/* who said it */
.pq__by{ display:flex; align-items:center; gap:14px; min-width:0; padding-top:4px; }
.pq__face{ flex:none; width:52px; height:52px; border-radius:50%; object-fit:cover; background:var(--pq-rule); }
.pq__id{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; line-height:1.3; }
.pq__n{ font-size:.98rem; font-weight:600; color:var(--pq-ink); }
.pq__t{ font:500 .75rem/1.4 var(--font-mono,"IBM Plex Mono",monospace); letter-spacing:.06em; text-transform:uppercase; color:var(--pq-mute); overflow-wrap:anywhere; }
.pq__li{
  flex:none; display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%;
  color:var(--pq-mute); text-decoration:none;
  transition:color var(--dur-instant,120ms) var(--ease-standard,ease), background-color var(--dur-instant,120ms) var(--ease-standard,ease);
}
.pq__li:hover{ color:var(--pq-link); background:color-mix(in oklab, var(--pq-link) 9%, transparent); }
.pq__li:focus-visible{ outline:3px solid var(--focus-ring,#3B06D4); outline-offset:2px; }
.pq__li svg{ width:18px; height:18px; }

/* feature: the outcome card gets the larger quote */
.pq--feature{ gap:clamp(20px,2.4vw,32px); padding:clamp(24px,3vw,40px); }
.pq--feature .pq__stat b{ font-size:clamp(2.5rem,1.4rem + 3.6vw,5rem); }
.pq--feature .pq__q{ display:flex; flex-direction:column; justify-content:center; }
.pq--feature .pq__q p{ font-size:clamp(1.25rem,.9rem + 1.1vw,1.75rem); line-height:1.4; letter-spacing:-.012em; font-weight:500; }
.pq--feature .pq__face{ width:64px; height:64px; }

/* ---- layouts ---- */
/* a row of cards */
.pq-row{ display:grid; gap:clamp(14px,1.6vw,20px); grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); align-items:stretch; }
/* the home proof: one feature card, two beside it */
.pq-trio{ display:grid; gap:clamp(14px,1.6vw,20px); grid-template-columns:minmax(0,1fr); }
@media(min-width:900px){
  .pq-trio{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-template-rows:auto auto; }
  .pq-trio > .pq--feature{ grid-row:1 / span 2; }
}
/* questions on the left, the quote(s) that answer the same doubt on the right */
.pq-pair{ display:grid; gap:clamp(20px,3vw,40px); grid-template-columns:minmax(0,1fr); align-items:start; margin-top:clamp(32px,4vw,52px); }
@media(min-width:960px){ .pq-pair{ grid-template-columns:minmax(0,1fr) minmax(300px,400px); } }
.pq-pair--solo{ grid-template-columns:minmax(0,1fr); }
.pq-pair > .pq-stack{ display:flex; flex-direction:column; gap:clamp(14px,1.6vw,20px); min-width:0; }
.pq-pair > .pdp-qa-set, .pq-pair > .pp-qa-set{ margin-top:0; }
.pq-more{ margin:clamp(14px,2vw,20px) 0 0; }
.pq-more a{ display:inline-flex; align-items:center; min-height:44px; font-weight:600; color:var(--pq-link,#3B06D4); text-decoration:none; }
html[data-mode="dark"] .pq-more a, body.gtm-dark .pq-more a{ color:#7B87FF; }
.pq-more a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---- in-section questions (the plan-page pattern, unscoped from main.pdp) ---- */
.pdp-qa-set{ display:grid; gap:24px clamp(24px,3vw,48px); grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); margin-top:clamp(32px,3.5vw,48px); }
.pdp-qa{ padding-block:16px 4px; border-block-start:1px solid var(--line,#E6E6EE); max-width:62ch; min-width:0; }
.pdp-qa__q{ margin:0 0 6px; font:600 1.125rem/1.3 var(--font-sans,"IBM Plex Sans",system-ui,sans-serif); letter-spacing:-.01em; color:var(--ink,#0E0E14); text-wrap:balance; }
.pdp-qa__a{ margin:0; font-size:1rem; line-height:1.62; color:var(--fg-soft,#3C3C50); text-wrap:pretty; }
.pdp-qa__a a{ color:var(--violet,#3B06D4); text-decoration:underline; text-underline-offset:3px; }
html[data-mode="dark"] .pdp-qa, body.gtm-dark .pdp-qa{ border-block-start-color:#1E1E2A; }
html[data-mode="dark"] .pdp-qa__q, body.gtm-dark .pdp-qa__q{ color:#F8F8FA; }
html[data-mode="dark"] .pdp-qa__a, body.gtm-dark .pdp-qa__a{ color:#B7B7C6; }
html[data-mode="dark"] .pdp-qa__a a, body.gtm-dark .pdp-qa__a a{ color:#7B87FF; }
/* inside a pair the questions stack in one column so they read next to the quote */
.pq-pair > .pdp-qa-set{ grid-template-columns:minmax(0,1fr); gap:20px; }
@media(min-width:960px){ .pq-pair--wide > .pdp-qa-set{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

@media(prefers-reduced-motion:reduce){ .pq__li{ transition:none; } }

/* one question, two quotes: the quotes sit side by side */
@media(min-width:960px){
  .pq-pair--split{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
  .pq-pair--split > .pq-stack{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }
}

/* ---- /pricing: the plan-page questions (.pp-qa) inside a pair ---- */
.pq-pair > .pp-qa-set, .pp-plans-sec .pq-pair > .pp-qa-set{ grid-template-columns:minmax(0,1fr); gap:20px; }
@media(min-width:960px){ .pq-pair--wide > .pp-qa-set, .pp-plans-sec .pq-pair--wide > .pp-qa-set{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 32px; } }
.pq-pair--solo.pq-pair--wide > .pp-qa-set{ max-width:none; }
/* phones: the plans wrap is a flex column with ordered children; the pair follows the notes */
@media(max-width:759px){ .pp-plans-sec .pq-pair{ order:3; } }
.pq-pair{ scroll-margin-top:96px; }
.pp-close .pp-close__fine{ margin:0; color:#D1D1D9; }
.pp-close .pp-close__fine a{ display:inline-flex; align-items:center; min-height:44px; color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.45); text-underline-offset:3px; }
.pp-close .pp-close__fine a:hover{ text-decoration-color:#fff; }
/* a stat in a side card stays on one line */
.pq:not(.pq--feature) .pq__stat b{ font-size:clamp(1.75rem,1.3rem + 1.4vw,2.5rem); white-space:nowrap; }
/* /infinite-os-overview: the named member cards under the benchmark band */
.ov-proofwords__k{ display:block; margin:clamp(28px,3.4vw,48px) 0 0; }
.ov-proofwords{ margin-top:clamp(12px,1.4vw,16px); }

/* ---- /academy/intro-ai-score: the next-course cards (cards have no border: white + shadow on light, elev-1 on dark) ---- */
.ias-next{ display:grid; gap:clamp(14px,1.6vw,20px); grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); align-items:stretch; }
.ias-next__c{ display:flex; flex-direction:column; gap:12px; min-width:0; padding:clamp(22px,2.4vw,30px); border:0; border-radius:var(--radius-card,12px); background:#fff; box-shadow:var(--shadow-card,0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06)); }
.ias-next__k{ font:500 .75rem/1.4 var(--font-mono,"IBM Plex Mono",monospace); letter-spacing:.08em; text-transform:uppercase; color:#4A4A68; }
.ias-next__c h3{ margin:0; color:#0E0E14; text-wrap:balance; }
.ias-next__c > p{ margin:0; font-size:1rem; line-height:1.6; color:#3C3C50; }
.ias-next__m{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:auto !important; padding-top:6px; font:500 .75rem/1.4 var(--font-mono,"IBM Plex Mono",monospace) !important; letter-spacing:.06em; text-transform:uppercase; }
.ias-next__go{ display:inline-flex; align-items:center; gap:6px; min-height:44px; font-weight:600; color:#3B06D4; text-decoration:none; }
.ias-next__go:hover{ text-decoration:underline; text-underline-offset:3px; }
.ias-next__go:focus-visible{ outline:3px solid #3B06D4; outline-offset:2px; border-radius:6px; }
body.gtm-dark main .ias-next__c, html[data-mode="dark"] .ias-next__c{ background:#0A0A0C; box-shadow:none; }
/* "What you leave with" reuses .audcard: cards have no border, on either ground */
.ias-leave .audcard, body.gtm-dark main .ias-leave .audcard{ border:0 !important; }
body.gtm-dark main .ias-leave .audcard{ background:#0A0A0C !important; }
body.gtm-dark main .ias-next__k, html[data-mode="dark"] .ias-next__k{ color:#9A9BBD; }
body.gtm-dark main .ias-next__c h3, html[data-mode="dark"] .ias-next__c h3{ color:#F8F8FA; }
body.gtm-dark main .ias-next__c > p, html[data-mode="dark"] .ias-next__c > p{ color:#D1D1D9; }
body.gtm-dark main .ias-next__m, html[data-mode="dark"] .ias-next__m{ color:#9A9BBD; }
body.gtm-dark main .ias-next__go, html[data-mode="dark"] .ias-next__go{ color:#7B87FF; }
body.gtm-dark main .ias-next__go:focus-visible, html[data-mode="dark"] .ias-next__go:focus-visible{ outline-color:#7B87FF; }
/* the in-section questions and member cards on the dark course pages */
body.gtm-dark .pq{ --pq-bg:#0A0A0C; --pq-ink:#F8F8FA; --pq-soft:#D1D1D9; --pq-mute:#9A9BBD; --pq-link:#7B87FF; --pq-rule:#1E1E2A; --pq-shadow:none; }
body.gtm-dark .pq-more a{ color:#7B87FF; }
.pq-pair--solo > .pdp-qa-set{ max-width:none; }
/* the plans wrap orders .pp-qa-set on phones; inside a pair the questions still lead */
.pp-plans-sec .pq-pair > .pp-qa-set{ order:0; }

/* intro-ai-score: the FAQ pair carries the course's review-only quote slot (.vquote[data-tpl], hidden on tryrivet.co).
   In production the pair keeps full width; in review (?review=1 or a non-production host) the page's draft rule shows the slot beside it. */
.ias-faqrow{ margin-top:clamp(32px,4vw,52px); }
.ias-faqrow > .pq-pair{ margin-top:0; }
.miniq__row.ias-faqrow:has(> .vquote[data-tpl]){ grid-template-columns:minmax(0,1fr) !important; }
@media(max-width:899px){ html.is-draft .miniq__row.ias-faqrow:has(> .vquote[data-tpl]){ grid-template-columns:minmax(0,1fr) !important; } }