/* assets/sections.css · the shared sections lane (1 Nov 2026).
   Styles for the sections rendered from partials/sections/ by tools/build/sections.py (os-core, member-proof,
   builder, compare, flagship, memberships, free-start, community, academy-qa) and the intro page's own
   who-for and credential sections. Prefix .sx-. The quotes reuse .pq from assets/proof.css and the questions
   reuse .qa from assets/qa.css.
   Brand OS v1.2: cards have no border (light: white + shadow-card; dark: elev-1 #0A0A0C, elev-2 #12121A on an
   alt band, no shadow); no magenta in these sections, so each page keeps its one action and one insight;
   Lucide icons (24px grid, 2px stroke); Mono for eyebrows, meta and numerals; text passes AA on its ground. */

.sx-grid{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(12px,1.4vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); align-items:stretch; }
.sx-grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1100px){ .sx-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .sx-grid--4{ grid-template-columns:minmax(0,1fr); } }

/* ---- the card ---- */
.sx-card{ --sx-bg:#FFFFFF; --sx-ink:#0E0E14; --sx-soft:#3C3C50; --sx-mute:#4A4A68; --sx-link:#3B06D4; --sx-rule:#E6E6EE;
  position:relative; display:flex; flex-direction:column; gap:10px; min-width:0; margin:0;
  padding:clamp(20px,2.2vw,28px); border:0; border-radius:var(--radius-card,12px);
  background:var(--sx-bg); color:var(--sx-ink);
  box-shadow:var(--shadow-card,0 1px 2px rgba(0,0,0,.06),0 8px 24px -12px rgba(0,0,0,.18)); }
body.gtm-dark .sx-card, html[data-mode="dark"] .sx-card{
  --sx-bg:#0A0A0C; --sx-ink:#F8F8FA; --sx-soft:#D1D1D9; --sx-mute:#9A9BBD; --sx-link:#7B87FF; --sx-rule:#1E1E2A; box-shadow:none; }
body.gtm-dark .section--alt .sx-card, html[data-mode="dark"] .section--alt .sx-card{ --sx-bg:#12121A; }
.sx-card__ico{ display:inline-grid; place-items:center; width:44px; height:44px; border-radius:10px;
  background:color-mix(in oklab, var(--sx-link) 14%, transparent); color:var(--sx-link); }
.sx-card__ico svg{ width:22px; height:22px; }
.sx-card__k, body.gtm-dark main .sx-card__k{ font:500 var(--fs-meta,.75rem)/1.4 var(--font-mono,"IBM Plex Mono",monospace);
  letter-spacing:.08em; text-transform:uppercase; color:var(--sx-mute) !important; }
.sx-card__t{ margin:0; font:600 clamp(1.125rem,1rem + .4vw,1.3125rem)/1.3 var(--font-sans,"IBM Plex Sans",sans-serif);
  letter-spacing:-.01em; color:var(--sx-ink); text-wrap:balance; }
.sx-card p{ margin:0; font-size:1rem; line-height:1.6; text-wrap:pretty; }
body.gtm-dark main .sx-card p, html[data-mode="dark"] .sx-card p{ color:var(--sx-soft) !important; }
.sx-card__meta{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 12px;
  margin-top:auto; padding-top:14px; border-top:1px solid var(--sx-rule); }
.sx-card__price{ font:600 1.125rem/1.2 var(--font-mono,"IBM Plex Mono",monospace); font-variant-numeric:tabular-nums;
  letter-spacing:-.01em; color:var(--sx-ink); white-space:nowrap; }
.sx-card__price small{ display:block; margin-top:4px; font:500 .6875rem/1.4 var(--font-mono,"IBM Plex Mono",monospace);
  letter-spacing:.08em; text-transform:uppercase; color:var(--sx-mute) !important; white-space:normal; }
.sx-card__go{ display:inline-flex; align-items:center; gap:6px; min-height:44px; font-weight:600; color:var(--sx-link);
  text-decoration:none; }
.sx-card__go:hover{ text-decoration:underline; text-underline-offset:3px; }
.sx-card__go:focus-visible, .sx-card--link:focus-visible{ outline:3px solid var(--focus-ring,#3B06D4); outline-offset:2px; border-radius:6px; }
body.gtm-dark .sx-card__go:focus-visible, body.gtm-dark .sx-card--link:focus-visible{ outline-color:#7B87FF; }
.sx-card--link{ text-decoration:none; transition:transform var(--dur-instant,120ms) var(--ease-standard,ease); }
.sx-card--link:hover{ transform:translateY(-2px); }
.sx-card--link:hover .sx-card__go{ text-decoration:underline; text-underline-offset:3px; }
.sx-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.sx-list li{ position:relative; padding-inline-start:22px; font-size:.9375rem; line-height:1.5; }
.sx-list li::before{ content:""; position:absolute; inset-inline-start:2px; top:.55em; width:8px; height:8px; border-radius:50%;
  background:color-mix(in oklab, var(--sx-link) 70%, transparent); }
body.gtm-dark main .sx-list li{ color:var(--sx-soft) !important; }

.sx-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-top:clamp(20px,2.4vw,32px); }
.sx-note{ margin:0; font-size:var(--fs-small,.875rem); line-height:1.5; }
body.gtm-dark main .sx-note{ color:#9A9BBD !important; }
.sx-note a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
body.gtm-dark main .sx-note a{ color:#C9CCFF; }

/* ---- builder: the person behind the system ---- */
.sx-builder{ display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:clamp(20px,3vw,44px); align-items:start;
  padding:clamp(22px,3vw,40px); }
.sx-builder__photo{ width:100%; aspect-ratio:1; height:auto; border-radius:var(--radius-card,12px); object-fit:cover; background:var(--sx-rule); }
.sx-builder__body{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.sx-builder__name{ margin:0; font:600 clamp(1.5rem,1.2rem + 1vw,2rem)/1.15 var(--font-sans,"IBM Plex Sans",sans-serif); letter-spacing:-.02em; }
.sx-builder__body p{ max-width:68ch; }
.sx-proof{ list-style:none; margin:8px 0 4px; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.sx-proof li{ display:flex; flex-direction:column; gap:4px; padding-top:12px; border-top:1px solid var(--sx-rule); }
.sx-proof b{ font:600 clamp(1.25rem,1rem + .8vw,1.75rem)/1.1 var(--font-mono,"IBM Plex Mono",monospace); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--sx-ink); white-space:nowrap; }
.sx-proof span{ font:500 .6875rem/1.4 var(--font-mono,"IBM Plex Mono",monospace); letter-spacing:.08em; text-transform:uppercase; color:var(--sx-mute); }
.sx-builder .btn{ align-self:flex-start; }
@media (max-width:760px){
  .sx-builder{ grid-template-columns:minmax(0,1fr); }
  .sx-builder__photo{ width:120px; }
  .sx-proof{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ---- compare: RIVET Academy and typical training ---- */
.sx-cmp{ width:100%; border-collapse:separate; border-spacing:0; padding:0; overflow:hidden; }
.sx-cmp th, .sx-cmp td{ padding:14px clamp(14px,2vw,24px); text-align:start; vertical-align:top; font-size:1rem; line-height:1.45;
  border-bottom:1px solid var(--sx-rule); }
.sx-cmp tbody tr:last-child > *{ border-bottom:0; }
.sx-cmp thead th, .sx-cmp thead td{ padding-block:20px 16px; vertical-align:middle; }
.sx-cmp thead th{ font:500 var(--fs-meta,.75rem)/1.4 var(--font-mono,"IBM Plex Mono",monospace); letter-spacing:.08em;
  text-transform:uppercase; color:var(--sx-mute) !important; }
.sx-cmp__logo{ display:block; width:auto; height:26px; }
.sx-cmp__row{ width:22%; font:500 var(--fs-meta,.75rem)/1.5 var(--font-mono,"IBM Plex Mono",monospace) !important;
  letter-spacing:.08em; text-transform:uppercase; color:var(--sx-mute) !important; }
.sx-cmp td.is-us{ font-weight:600; color:var(--sx-ink); background:color-mix(in oklab, var(--sx-link) 9%, transparent); }
.sx-cmp td:not(.is-us){ color:var(--sx-mute); }
body.gtm-dark main .sx-cmp td:not(.is-us){ color:#9A9BBD !important; }
.sx-cmp__check{ display:inline-block; width:18px; height:18px; margin-inline-end:8px; vertical-align:-3px; color:var(--sx-link); }
@media (max-width:700px){
  .sx-cmp thead{ display:none; }
  .sx-cmp, .sx-cmp tbody, .sx-cmp tr, .sx-cmp th, .sx-cmp td{ display:block; width:auto; }
  .sx-cmp tr{ padding:14px 16px; border-bottom:1px solid var(--sx-rule); }
  .sx-cmp tbody tr:last-child{ border-bottom:0; }
  .sx-cmp th, .sx-cmp td{ padding:4px 0; border:0 !important; background:none !important; }
  .sx-cmp__row{ width:auto; margin-bottom:4px; }
  .sx-cmp td::before{ content:attr(data-col); display:block; font:500 .6875rem/1.4 var(--font-mono,"IBM Plex Mono",monospace);
    letter-spacing:.08em; text-transform:uppercase; color:var(--sx-mute); }
  .sx-cmp td.is-us{ padding-bottom:8px; }
}

/* ---- memberships ---- */
.sx-plan__price{ margin:6px 0 0; display:flex; flex-direction:column; gap:4px; }
.sx-plan__price b{ font:600 clamp(1.5rem,1.2rem + 1vw,2rem)/1.05 var(--font-mono,"IBM Plex Mono",monospace); letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:var(--sx-ink); white-space:nowrap; }
.sx-plan__price b span{ font:inherit; letter-spacing:inherit; color:inherit; text-transform:none; }
.sx-plan__price > span{ font:500 .6875rem/1.4 var(--font-mono,"IBM Plex Mono",monospace); letter-spacing:.08em; text-transform:uppercase; color:var(--sx-mute); }
.sx-plan__seats{ display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:14px; border-top:1px solid var(--sx-rule);
  font:500 .75rem/1.4 var(--font-mono,"IBM Plex Mono",monospace); letter-spacing:.06em; text-transform:uppercase; color:var(--sx-mute); }
.sx-plan__seats svg{ flex:none; width:18px; height:18px; color:var(--sx-link); }

/* ---- community: the chapters ---- */
.sx-community{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(16px,2vw,24px); align-items:stretch; }
.sx-stat{ justify-content:center; }
.sx-stat b{ font:600 clamp(3rem,2rem + 3vw,4.5rem)/1 var(--font-mono,"IBM Plex Mono",monospace); letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:var(--sx-ink); }
.sx-chapters{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr)); gap:10px; }
.sx-chapter{ display:flex; flex-direction:column; gap:4px; padding:14px 16px; border-radius:10px;
  background:color-mix(in oklab, var(--sx-ink) 5%, transparent); }
.sx-chapter b{ font-size:1rem; line-height:1.3; color:var(--sx-ink); }
.sx-chapter span{ font:500 .6875rem/1.4 var(--font-mono,"IBM Plex Mono",monospace); letter-spacing:.08em; text-transform:uppercase; color:var(--sx-mute); }
.sx-chapter--home span{ color:var(--sx-link); }
@media (max-width:860px){ .sx-community{ grid-template-columns:minmax(0,1fr); } }

/* ---- questions: the shared .qa list, at a readable measure ---- */
.sx-qa .qa-list{ max-width:880px; }

/* ---- the intro page: who it is for, and where it leads ---- */
.sx-wins{ list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }

@media (prefers-reduced-motion:reduce){ .sx-card--link{ transition:none; } .sx-card--link:hover{ transform:none; } }