/* =========================================================================
   page-resources.css — LLM Capsule /resources
   1:1 port of llmcapsule.ai/resources (Framer sections s1..s6), styles ported
   verbatim. Palette via var(--c-*, #fallback) — no :root override (same
   convention as page-architecture/solutions/pricing/trust/proof).
   ========================================================================= */

/* ── S1 — Hero ── */
.s1-root {
  width: 100%;
  container-type: inline-size;
  font-family: var(--f-display, 'Inter', -apple-system, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.s1-hero {
  padding-top: clamp(80px, 10vw, 140px);
  padding-bottom: clamp(64px, 8vw, 96px);
  border-bottom: 1px solid var(--c-rule, #e5e7eb);
  text-align: center;
  background-color: var(--c-bg, #ffffff);
}
.s1-container {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  padding: 0 var(--s-page, clamp(20px, 4vw, 80px));
}
.s1-inner { max-width: 860px; margin: 0 auto; }
.s1-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-primary, #1A6FFF);
  margin-bottom: 12px;
}
.s1-h1 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-ink, #0f1130);
  margin-bottom: 20px;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.s1-h1-highlight { color: var(--c-primary, #1A6FFF); }
.s1-sub {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--c-ink-soft, #3a3d5e);
  line-height: 1.6;
  max-width: 760px;
  margin: 0 auto;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ── S2 — Hub cards ── */
.s2-root {
  width: 100%;
  container-type: inline-size;
  font-family: var(--f-display, 'Inter', -apple-system, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.s2-section {
  padding: var(--s-section, clamp(64px, 8vw, 128px)) 0;
  background-color: var(--c-bg, #ffffff);
}
.s2-container {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  padding: 0 var(--s-page, clamp(20px, 4vw, 80px));
}
.s2-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@container (max-width: 599px) {
  .s2-grid { grid-template-columns: 1fr; }
}
.s2-card {
  background-color: var(--c-bg, #ffffff);
  border: 1px solid var(--c-rule, #e5e7eb);
  border-radius: var(--r-lg, 16px);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.s2-card--highlight {
  background: radial-gradient(500px 220px at 100% 0%, rgba(26,111,255,.06), transparent 60%), var(--c-bg, #ffffff);
}
@container (max-width: 599px) {
  .s2-card { padding: 28px 24px; }
}
.s2-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm, 6px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.s2-icon-wrap--primary { background-color: var(--c-primary-soft, #E0EEFF); color: var(--c-primary, #1A6FFF); }
.s2-icon-wrap--teal    { background-color: var(--c-teal-soft, #e6f7f6); color: var(--c-teal, #0ea5a4); }
.s2-icon-wrap--muted   { background-color: var(--c-bg-soft, #f7f8fb); color: var(--c-muted, #6b7280); }
.s2-count {
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  color: var(--c-muted, #6b7280);
  letter-spacing: 0.08em;
  padding: 5px 10px;
  background-color: var(--c-bg-soft, #f7f8fb);
  border-radius: 999px;
  align-self: flex-start;
}
.s2-card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-ink, #0f1130);
  line-height: 1.2;
  margin: 0;
}
.s2-card-desc {
  font-size: 14px;
  color: var(--c-ink-soft, #3a3d5e);
  line-height: 1.65;
  flex: 1;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.s2-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-primary, #1A6FFF);
  padding-top: 12px;
  border-top: 1px solid var(--c-rule, #e5e7eb);
  text-decoration: none;
  transition: color 0.18s;
}
.s2-card-link:hover { color: var(--c-primary-dark, #3b2fbf); }

/* ── S3 — Featured article (dark) ── */
.s3-root {
  width: 100%;
  container-type: inline-size;
  font-family: var(--f-display, 'Inter', -apple-system, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.s3-section {
  padding: var(--s-section, clamp(64px, 8vw, 128px)) 0;
  background-color: var(--c-bg-soft, #f7f8fb);
}
.s3-container {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  padding: 0 var(--s-page, clamp(20px, 4vw, 80px));
}
.s3-featured {
  background-color: var(--c-bg-dark, #0f1130);
  border-radius: var(--r-lg, 16px);
  padding: 48px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
  align-items: center;
}
@container (max-width: 800px) {
  .s3-featured { grid-template-columns: 1fr; padding: 32px 24px; }
}
.s3-label {
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--c-primary-soft, #E0EEFF);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.s3-title {
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--c-bg, #ffffff);
  margin-bottom: 16px;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.s3-desc {
  font-size: 15px;
  color: var(--c-primary-soft, #E0EEFF);
  line-height: 1.65;
  margin-bottom: 24px;
  opacity: 0.85;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.s3-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--r-md, 10px);
  font-family: var(--f-display, 'Inter', sans-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
  background-color: var(--c-bg, #ffffff);
  color: var(--c-ink, #0f1130);
}
.s3-btn:hover { background-color: var(--c-primary-soft, #E0EEFF); color: var(--c-primary-dark, #3b2fbf); }
.s3-visual {
  background-color: var(--c-bg-dark-2, #1b1d4a);
  border-radius: var(--r-md, 10px);
  padding: 32px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  border: 1px solid rgba(255,255,255,0.08);
}
.s3-visual img { width: 100%; height: auto; display: block; border-radius: var(--r-md, 10px); }
.s3-diag-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.s3-diag-title { font-size: 10px; color: #475569; letter-spacing: 0.1em; text-transform: uppercase; }
.s3-read-time { font-size: 10px; color: #475569; }
.s3-checklist { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.s3-check-item { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #94a3b8; }
.s3-dot-red {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444; flex-shrink: 0; box-shadow: 0 0 6px rgba(239,68,68,0.45);
}
.s3-divider { border: none; border-top: 1px solid rgba(255,255,255,0.07); margin: 18px 0; }
.s3-conclusion { display: flex; align-items: center; gap: 12px; font-size: 13px; margin-bottom: 14px; }
.s3-dot-purple {
  width: 8px; height: 8px; border-radius: 50%;
  background: #6366f1; flex-shrink: 0; box-shadow: 0 0 6px rgba(99,102,241,0.5);
}
.s3-conclusion-label { color: #a5b4fc; font-weight: 700; }
.s3-stat { font-size: 11px; color: #334155; text-align: center; line-height: 1.6; }
.s3-stat-em { color: #ef4444; font-weight: 700; }

/* ── S4 — Learn articles grid ── */
.s4-root {
  width: 100%;
  container-type: inline-size;
  font-family: var(--f-display, 'Inter', -apple-system, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.s4-section {
  padding: var(--s-section, clamp(64px, 8vw, 128px)) 0;
  background-color: var(--c-bg, #ffffff);
}
.s4-container {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  padding: 0 var(--s-page, clamp(20px, 4vw, 80px));
}
.s4-header { text-align: center; margin-bottom: 48px; }
.s4-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-primary, #1A6FFF);
  margin-bottom: 12px;
}
.s4-heading {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  color: var(--c-ink, #0f1130);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  word-break: keep-all;
}
.s4-subheading {
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--c-ink-soft, #3a3d5e);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.6;
  word-break: keep-all;
}
.s4-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-rule, #e5e7eb);
  scrollbar-width: none;
}
.s4-tabs::-webkit-scrollbar { display: none; }
@container (max-width: 600px) {
  .s4-tabs { overflow-x: auto; flex-wrap: nowrap; }
}
.s4-tab {
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  color: var(--c-muted, #6b7280);
  background-color: var(--c-bg-soft, #f7f8fb);
  border: 1px solid var(--c-rule, #e5e7eb);
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.s4-tab--active {
  color: var(--c-bg, #ffffff);
  background-color: var(--c-primary-dark, #3b2fbf);
  border-color: var(--c-primary-dark, #3b2fbf);
}
.s4-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@container (max-width: 767px) {
  .s4-grid { grid-template-columns: 1fr; }
}
.s4-card {
  background-color: var(--c-bg, #ffffff);
  border: 1px solid var(--c-rule, #e5e7eb);
  border-radius: var(--r-md, 10px);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.18s;
}
.s4-card:hover { border-color: var(--c-primary, #1A6FFF); }
.s4-card-cat {
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 700;
  color: var(--c-primary-dark, #3b2fbf);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.s4-card-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-ink, #0f1130);
  margin: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.s4-card-desc {
  font-size: 13px;
  color: var(--c-ink-soft, #3a3d5e);
  line-height: 1.55;
  flex: 1;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.s4-card-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-primary, #1A6FFF);
  text-decoration: none;
  transition: color 0.18s;
}
.s4-card-link:hover { color: var(--c-primary-dark, #3b2fbf); }

/* ── S5 — Glossary preview ── */
.s5-root {
  width: 100%;
  container-type: inline-size;
  font-family: var(--f-display, 'Inter', -apple-system, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.s5-section {
  padding: var(--s-section, clamp(64px, 8vw, 128px)) 0;
  background-color: var(--c-bg-soft, #f7f8fb);
}
.s5-container {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  padding: 0 var(--s-page, clamp(20px, 4vw, 80px));
}
.s5-header { text-align: center; margin-bottom: 48px; }
.s5-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-primary, #1A6FFF);
  margin-bottom: 12px;
}
.s5-heading {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  color: var(--c-ink, #0f1130);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  word-break: keep-all;
}
.s5-subheading {
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--c-ink-soft, #3a3d5e);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.6;
  word-break: keep-all;
}
.s5-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@container (max-width: 900px) {
  .s5-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 560px) {
  .s5-grid { grid-template-columns: 1fr; }
}
.s5-term {
  background-color: var(--c-bg, #ffffff);
  border: 1px solid var(--c-rule, #e5e7eb);
  border-radius: var(--r-md, 10px);
  padding: 18px 20px;
  transition: border-color 0.18s;
}
.s5-term:hover { border-color: var(--c-primary, #1A6FFF); }
.s5-term-title { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.s5-term-link {
  color: var(--c-ink, #0f1130);
  text-decoration: none;
  transition: color 0.15s;
}
.s5-term-link:hover { color: var(--c-primary, #1A6FFF); }
.s5-term-def {
  font-size: 12px;
  color: var(--c-muted, #6b7280);
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ── S6 — Closing CTA (dark) ── */
.s6-root {
  width: 100%;
  container-type: inline-size;
  font-family: var(--f-display, 'Inter', -apple-system, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.s6-section {
  background-color: var(--c-bg-dark, #0f1130);
  padding: var(--s-section, clamp(64px, 8vw, 128px)) var(--s-page, clamp(20px, 4vw, 80px));
  text-align: center;
}
.s6-inner { max-width: 640px; margin: 0 auto; }
.s6-title {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--c-bg, #ffffff);
  margin-bottom: 16px;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.s6-subtitle {
  font-size: 16px;
  color: var(--c-primary-soft, #E0EEFF);
  line-height: 1.6;
  margin-bottom: 32px;
  opacity: 0.85;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.s6-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--r-md, 10px);
  font-family: var(--f-display, 'Inter', sans-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
  background-color: var(--c-bg, #ffffff);
  color: var(--c-ink, #0f1130);
}
.s6-btn:hover { background-color: var(--c-primary-soft, #E0EEFF); color: var(--c-primary-dark, #3b2fbf); }