/* =====================================================================================================
   assets/pg-saas-free.css · page parts for the two free SaaS courses
   Pages: academy/saas-fluency-foundation, academy/saas-revenue-roles (12 Nov 2026).
   Loads AFTER pg-academy.css and pg-mastery-intros.css; everything else is the shared kit (k-*, ac-*, mi-*, pui-*).
   Prefix sf-. Tokens only; no new colour: magenta stays the page's one decision button.
   Sections: 1 proof pair · 2 what you learn (figure + list) · 3 outline aside · 4 the room · 5 RTL / reduced motion
   ===================================================================================================== */

/* ---------- 1. two real quotes side by side ---------- */
.sf-proof{ display:grid; gap:clamp(16px, 2vw, 24px); margin-top:clamp(24px, 3vw, 40px); }
@media (min-width:900px){ .sf-proof{ grid-template-columns:repeat(2, minmax(0,1fr)); align-items:stretch; } }
.sf-proof .mi-quote{ align-content:space-between; }
.sf-proof .mi-quote blockquote p{ font-size:clamp(18px, 1.6vw, 22px); }
.sf-move{ margin:0; }

/* ---------- 2. what you learn: the loop with every seat, beside the topics ---------- */
.sf-learn{ display:grid; gap:clamp(20px, 3vw, 40px); align-items:start; }
@media (min-width:1024px){ .sf-learn{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); } }
.sf-fig{ display:grid; gap:12px; margin:0; padding:clamp(16px, 2.4vw, 28px); border-radius:var(--radius-card); background-color:var(--ac-media, var(--ground-alt)); }
.sf-fig img{ display:block; width:100%; height:auto; }
.sf-fig figcaption{ font:500 12px/1.4 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }
@media (min-width:1024px){ .sf-fig{ position:sticky; top:calc(var(--header-h, 64px) + 88px); } }
.sf-learn .mi-leave{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

/* the eight-model tiles in the tour: two columns, so every model name reads in full beside its mark */
.sf-tour .ds-models{ grid-template-columns:repeat(2, minmax(0,1fr)); }

/* ---------- 3. the outline's side card: the other course in the same space ---------- */
.sf-aside{ display:grid; gap:12px; align-content:start; }
.sf-aside__k{ margin:0; }
.sf-aside__t{ font:600 clamp(20px, 2vw, 24px)/1.25 var(--font-sans); letter-spacing:-0.01em; }
.sf-aside p{ color:var(--ink-muted); }
.sf-aside__meta{ display:flex; flex-wrap:wrap; gap:6px 14px; font:500 12px/1.4 var(--font-mono); letter-spacing:.02em; color:var(--ink); }
.sf-aside__note{ padding:12px 14px; border-radius:10px; background:var(--ground-alt); font:400 14px/1.5 var(--font-sans); }
.sf-aside__note b{ font-weight:600; color:var(--ink); }

/* ---------- 4. the room after the course ---------- */
.sf-room__q{ display:grid; gap:8px; margin:clamp(16px, 2vw, 24px) 0 0; padding:18px 20px; border-radius:var(--radius-card); background:var(--ground-alt); }
.k-sec--alt .sf-room__q{ background:var(--card-surface); box-shadow:var(--card-lift); }
.sf-room__q blockquote{ margin:0; font:600 clamp(17px, 1.5vw, 20px)/1.4 var(--font-sans); color:var(--ink); text-wrap:pretty; }
.sf-room__q figcaption{ font:500 12px/1.4 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }
.sf-room .k-acts{ margin-top:clamp(16px, 2vw, 24px); }

/* ---------- 5. RTL and reduced motion ---------- */
@media (prefers-reduced-motion:reduce){ .sf-fig{ position:static; } }