/* Homepage-specific styles. Loaded in addition to styles.css on /. */

/* ─── LAYOUT HELPERS ─── */
.section {
  padding: 120px 0;
}

.section-label {
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color:          var(--accent);
  margin-bottom:  var(--space-3);
}

.section-title {
  font-family:    var(--font-heading);
  font-weight:    700;
  font-size:      36px;
  color:          var(--text-primary);
  letter-spacing: -0.8px;
  line-height:    1.15;
  margin-bottom:  var(--space-4);
}

.section-subtitle {
  font-size:   16px;
  color:       var(--text-muted);
  line-height: 1.65;
  max-width:   540px;
}

.section-header {
  text-align:    center;
  margin-bottom: 72px;
}

.section-header .section-subtitle {
  margin: 0 auto;
}

/* ─── HERO ─── */
.hero {
  padding-top:    140px;
  padding-bottom: 80px;
  text-align:     center;
  position:       relative;
  overflow:       visible;
}

.hero::before {
  content:        '';
  position:       absolute;
  top:            0;
  left:           50%;
  transform:      translateX(-50%);
  width:          800px;
  height:         500px;
  background:     radial-gradient(ellipse at center, rgba(129, 142, 248, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.hero-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  font-size:     12px;
  font-weight:   500;
  color:         var(--accent);
  margin-bottom: var(--space-9);
  position:      relative;
}

.hero-badge .pulse {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--accent);
  animation:     pulse 2s ease infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.hero h1 {
  font-family:    var(--font-heading);
  font-weight:    700;
  font-size:      60px;
  color:          var(--text-primary);
  letter-spacing: -1.8px;
  line-height:    1.05;
  margin-bottom:  var(--space-6);
  max-width:      720px;
  margin-left:    auto;
  margin-right:   auto;
  position:       relative;
}

.hero h1 .accent {
  color: var(--accent);
}

.hero-sub {
  font-size:   17px;
  color:       var(--text-muted);
  line-height: 1.7;
  max-width:   520px;
  margin:      0 auto var(--space-12);
  position:    relative;
  font-weight: 300;
}

/* ─── HERO SEARCH ─── */
.hero-search {
  max-width: 580px;
  margin:    0 auto;
  position:  relative;
}

.hero-cta {
  display:         flex;
  justify-content: center;
}

.hero-chips {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             8px;
  margin-top:      var(--space-4);
}

.chip {
  background:    none;
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       4px 12px;
  font-size:     12px;
  color:         var(--text-muted);
  cursor:        pointer;
  transition:    border-color 150ms ease, color 150ms ease;
}

.chip:hover {
  border-color: var(--accent);
  color:        var(--text-primary);
}

/* ─── VALUE STRIP ─── */
.value-strip {
  padding: var(--space-4) var(--space-9) var(--space-16);
}

.value-strip-items {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-6);
  list-style:            none;
  max-width:             960px;
  margin:                0 auto;
}

.value-item {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--space-4);
  padding:       var(--space-6);
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  transition:    border-color 150ms ease;
}

.value-item:hover {
  border-color: var(--border-hover);
}

.value-glyph {
  font-size:   22px;
  line-height: 1;
  flex-shrink: 0;
}

.value-text {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.value-text strong {
  font-family:    var(--font-heading);
  font-weight:    600;
  font-size:      15px;
  color:          var(--text-primary);
  letter-spacing: -0.2px;
}

.value-text span {
  font-size:   13px;
  color:       var(--text-muted);
  line-height: 1.5;
  font-weight: 300;
}

/* ─── SOCIAL PROOF ─── */
.social-proof {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-16);
  padding:         var(--space-16) 0;
}

.proof-stat {
  text-align: center;
}

.proof-stat .number {
  font-family:    var(--font-heading);
  font-weight:    700;
  font-size:      32px;
  color:          var(--text-primary);
  letter-spacing: -0.8px;
}

.proof-stat .label {
  font-size:  13px;
  color:      var(--text-muted);
  margin-top: 4px;
}

.proof-divider {
  width:      1px;
  height:     40px;
  background: var(--border);
}

/* ─── BENTO FEATURES GRID ─── */
.bento {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows:        auto;
  gap:                   var(--space-4);
}

.bento-card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       var(--space-8);
  transition:    border-color 150ms ease;
}

.bento-card:hover {
  border-color: var(--border-hover);
}

.bento-card.span-2 {
  grid-column: span 2;
}

.bento-icon {
  width:           44px;
  height:          44px;
  border-radius:   var(--radius-md);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   var(--space-6);
}

.bento-icon svg {
  width:  22px;
  height: 22px;
}

.bento-icon.accent {
  background: var(--accent-tint);
  color:      var(--accent);
}

.bento-icon.success {
  background: #102a1e;
  color:      var(--success);
}

.bento-icon.warning {
  background: #281e0a;
  color:      var(--warning);
}

.bento-icon.pink {
  background: #2c1020;
  color:      var(--cat-society);
}

.bento-icon.green {
  background: #0e2a16;
  color:      var(--cat-health);
}

.bento-icon.gold {
  background: #2a2008;
  color:      var(--cat-business);
}

.bento-card h3 {
  font-family:    var(--font-heading);
  font-weight:    600;
  font-size:      16px;
  color:          var(--text-primary);
  letter-spacing: -0.3px;
  margin-bottom:  var(--space-2);
}

.bento-card p {
  font-size:   14px;
  color:       var(--text-muted);
  line-height: 1.6;
  font-weight: 300;
}

/* ─── HOW IT WORKS ─── */
.how-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-16);
  align-items:           center;
}

.steps {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.step {
  display:        flex;
  gap:            var(--space-6);
  padding-bottom: var(--space-9);
}

.step:last-child {
  padding-bottom: 0;
}

.step-indicator {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  flex-shrink:    0;
}

.step-number {
  width:           36px;
  height:          36px;
  border-radius:   50%;
  background:      var(--accent-tint);
  border:          1px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-mono);
  font-size:       13px;
  font-weight:     500;
  color:           var(--accent);
  flex-shrink:     0;
}

.step-line {
  width:      1px;
  flex:       1;
  background: var(--border);
  margin-top: var(--space-2);
}

.step-content h3 {
  font-family:    var(--font-heading);
  font-weight:    600;
  font-size:      17px;
  color:          var(--text-primary);
  letter-spacing: -0.3px;
  margin-bottom:  var(--space-2);
  padding-top:    8px;
}

.step-content p {
  font-size:   14px;
  color:       var(--text-muted);
  line-height: 1.65;
  font-weight: 300;
}

/* Pipeline demo */
.pipeline-demo {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       var(--space-8);
}

.pipeline-header {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  margin-bottom: var(--space-6);
}

.pipeline-header .topic-title {
  font-family:    var(--font-heading);
  font-weight:    600;
  font-size:      16px;
  color:          var(--text-primary);
  letter-spacing: -0.2px;
}

.pipeline-badge {
  font-size:      10px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding:        2px 8px;
  border-radius:  var(--radius-sm);
  background:     var(--accent-tint);
  color:          var(--accent);
  border:         1px solid var(--border);
}

.pipeline-steps {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.pipeline-step {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  transition:    background 150ms ease;
}

.pipeline-step:hover {
  background: rgba(255, 255, 255, 0.02);
}

.pipeline-step .check {
  width:           22px;
  height:          22px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.pipeline-step.done .check {
  background: rgba(59, 212, 142, 0.12);
  color:      var(--success);
}

.pipeline-step.active .check {
  background: var(--accent-tint);
  color:      var(--accent);
  animation:  pulse 1.5s ease infinite;
}

.pipeline-step.pending .check {
  background: rgba(255, 255, 255, 0.04);
  color:      var(--text-dim);
}

.pipeline-step .step-label {
  font-size:   13px;
  color:       var(--text-secondary);
  font-weight: 400;
}

.pipeline-step.pending .step-label {
  color: var(--text-dim);
}

.pipeline-step .step-detail {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size:   11px;
  color:       var(--text-muted);
}

/* ─── GREG SHOWCASE ─── */
.greg-section {
  background: var(--bg-elevated);
  position:   relative;
}

.greg-section::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     1px;
  background: var(--border-subtle);
}

.greg-section::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  height:     1px;
  background: var(--border-subtle);
}

.greg-layout {
  display:               grid;
  grid-template-columns: 1fr 420px;
  gap:                   72px;
  align-items:           center;
}

.greg-text .section-title {
  text-align: left;
}

.greg-text .section-subtitle {
  text-align: left;
}

.greg-features {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  margin-top:     var(--space-8);
}

.greg-feature {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--space-4);
  padding:       var(--space-4);
  border-radius: var(--radius-lg);
  transition:    background 200ms ease;
}

.greg-feature:hover {
  background: rgba(255, 255, 255, 0.02);
}

.greg-feature .gf-icon {
  width:           32px;
  height:          32px;
  border-radius:   var(--radius-md);
  background:      var(--accent-tint);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.greg-feature .gf-icon svg {
  width:  16px;
  height: 16px;
  color:  var(--accent);
}

.greg-feature .gf-text {
  font-size:   14px;
  color:       var(--text-secondary);
  line-height: 1.55;
  font-weight: 300;
}

.greg-feature .gf-text strong {
  color:       var(--text-primary);
  font-weight: 500;
}

/* Chat mockup */
.chat-mockup {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
}

.chat-mock-header {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  background:    rgba(255, 255, 255, 0.01);
}

.chat-mock-header .name {
  font-family:    var(--font-heading);
  font-weight:    600;
  font-size:      14px;
  color:          var(--text-primary);
  letter-spacing: -0.2px;
}

.chat-mock-header .context-badge {
  font-size:     10px;
  color:         var(--accent);
  background:    var(--accent-tint);
  padding:       2px 8px;
  border-radius: var(--radius-sm);
  border:        1px solid var(--border);
}

.chat-mock-messages {
  padding:        var(--space-6);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  min-height:     300px;
}

.chat-bubble {
  max-width:     85%;
  padding:       var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size:     13px;
  line-height:   1.6;
  font-weight:   300;
}

.chat-bubble.user {
  background:                 var(--accent);
  color:                      white;
  align-self:                 flex-end;
  border-bottom-right-radius: var(--radius-sm);
  font-weight:                400;
}

.chat-bubble.ai {
  background:                rgba(255, 255, 255, 0.03);
  border:                    1px solid var(--border);
  color:                     var(--text-secondary);
  align-self:                flex-start;
  border-bottom-left-radius: var(--radius-sm);
}

.chat-bubble .source-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  font-size:     10px;
  color:         var(--accent);
  background:    var(--accent-tint);
  padding:       2px 8px;
  border-radius: var(--radius-sm);
  margin-top:    8px;
  font-family:   var(--font-mono);
}

.chat-mock-input {
  padding:     var(--space-4) var(--space-6);
  border-top:  1px solid var(--border-subtle);
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
}

.chat-mock-input .input-fake {
  flex:          1;
  padding:       var(--space-3) var(--space-4);
  background:    rgba(255, 255, 255, 0.03);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  font-size:     13px;
  color:         var(--text-dim);
}

.chat-mock-input .send-btn {
  width:           32px;
  height:          32px;
  border-radius:   var(--radius-md);
  background:      var(--accent);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

/* ─── SOURCE SCORING ─── */
.scoring-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-6);
  max-width:             840px;
  margin:                0 auto;
}

.scoring-card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       var(--space-8);
  transition:    border-color 150ms ease;
}

.scoring-card:hover {
  border-color: var(--border-hover);
}

.scoring-card-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   var(--space-4);
}

.scoring-card-title {
  font-family:    var(--font-heading);
  font-weight:    600;
  font-size:      14px;
  color:          var(--text-primary);
  letter-spacing: -0.2px;
}

.scoring-card-domain {
  font-family: var(--font-mono);
  font-size:   11px;
  color:       var(--text-muted);
}

.credibility-bar {
  height:        3px;
  background:    rgba(255, 255, 255, 0.04);
  border-radius: 2px;
  margin-bottom: var(--space-4);
  overflow:      hidden;
}

.credibility-bar .fill {
  height:        100%;
  border-radius: 2px;
}

.credibility-bar .fill.high {
  background: var(--success);
}

.credibility-bar .fill.medium {
  background: var(--warning);
}

.tag {
  display:        inline-flex;
  align-items:    center;
  padding:        2px 8px;
  border-radius:  var(--radius-sm);
  font-size:      10px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.tag-success {
  background: rgba(59, 212, 142, 0.1);
  color:      var(--success);
}

.tag-warning {
  background: rgba(234, 173, 66, 0.1);
  color:      var(--warning);
}

.insight {
  background:    rgba(255, 255, 255, 0.02);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       var(--space-3) var(--space-4);
  border-left:   3px solid;
}

.insight.success {
  border-left-color: var(--success);
}

.insight.warning {
  border-left-color: var(--warning);
}

.insight-title {
  font-size:     12px;
  font-weight:   600;
  color:         var(--text-primary);
  margin-bottom: 2px;
}

.insight-body {
  font-size:   12px;
  color:       var(--text-secondary);
  line-height: 1.55;
  font-weight: 300;
}

/* ─── PRINCIPLES ─── */
.principles {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-6);
}

.principle {
  text-align: center;
  padding:    var(--space-9) var(--space-6);
}

.principle-icon {
  width:           48px;
  height:          48px;
  border-radius:   var(--radius-md);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto var(--space-6);
  background:      var(--accent-tint);
}

.principle-icon svg {
  width:  24px;
  height: 24px;
  color:  var(--accent);
}

.principle h3 {
  font-family:    var(--font-heading);
  font-weight:    600;
  font-size:      17px;
  color:          var(--text-primary);
  letter-spacing: -0.3px;
  margin-bottom:  var(--space-3);
  line-height:    1.3;
}

.principle p {
  font-size:   14px;
  color:       var(--text-muted);
  line-height: 1.6;
  font-weight: 300;
}

/* ─── PRICING ─── */
.pricing-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-4);
  max-width:             920px;
  margin:                0 auto;
}

.pricing-card {
  background:     var(--bg-card);
  border:         1px solid var(--border);
  border-radius:  var(--radius-lg);
  padding:        var(--space-9);
  display:        flex;
  flex-direction: column;
  transition:     border-color 150ms ease;
}

.pricing-card:hover {
  border-color: var(--border-hover);
}

.pricing-card.featured {
  border-color: var(--accent);
  position:     relative;
}

.pricing-card.featured::before {
  content:        'Most popular';
  position:       absolute;
  top:            -10px;
  left:           50%;
  transform:      translateX(-50%);
  font-size:      10px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color:          white;
  background:     var(--accent);
  padding:        2px 12px;
  border-radius:  var(--radius-sm);
}

.pricing-name {
  font-family:    var(--font-heading);
  font-weight:    600;
  font-size:      18px;
  color:          var(--text-primary);
  letter-spacing: -0.3px;
  margin-bottom:  var(--space-1);
}

.pricing-desc {
  font-size:     13px;
  color:         var(--text-muted);
  margin-bottom: var(--space-6);
}

.pricing-price {
  display:       flex;
  align-items:   baseline;
  gap:           4px;
  margin-bottom: var(--space-8);
}

.pricing-price .amount {
  font-family:    var(--font-mono);
  font-weight:    500;
  font-size:      36px;
  color:          var(--text-primary);
  letter-spacing: -1px;
}

.pricing-price .period {
  font-size: 14px;
  color:     var(--text-dim);
}

.pricing-features {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  margin-bottom:  var(--space-9);
  flex:           1;
}

.pricing-features li {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-3);
  font-size:   13px;
  color:       var(--text-secondary);
  line-height: 1.5;
  font-weight: 300;
}

.pricing-features li svg {
  width:       16px;
  height:      16px;
  color:       var(--success);
  flex-shrink: 0;
  margin-top:  2px;
}

.pricing-card .btn {
  width:           100%;
  justify-content: center;
}

/* ─── CTA ─── */
.cta {
  text-align: center;
  position:   relative;
  overflow:   hidden;
}

.cta::before {
  content:        '';
  position:       absolute;
  bottom:         0;
  left:           50%;
  transform:      translateX(-50%);
  width:          600px;
  height:         400px;
  background:     radial-gradient(ellipse at center, rgba(129, 142, 248, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.cta .section-title {
  position: relative;
}

.cta .section-subtitle {
  margin:   0 auto var(--space-12);
  position: relative;
}

.cta .cta-actions {
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-3);
}

/* ─── COURSE MOCKUP ─── */
.course-mockup {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  max-width:     820px;
  margin:        0 auto;
}

.course-mock-nav {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x:    auto;
}

.course-mock-nav .chapter-tab {
  padding:       5px 14px;
  border-radius: var(--radius-md);
  font-size:     12px;
  font-weight:   500;
  color:         var(--text-dim);
  white-space:   nowrap;
  cursor:        default;
}

.course-mock-nav .chapter-tab.active {
  background: var(--accent-tint);
  color:      var(--accent);
  border:     1px solid var(--border);
}

.course-mock-body {
  padding:    var(--space-8) var(--space-9);
  max-height: 480px;
  overflow:   hidden;
  position:   relative;
}

.course-mock-body::after {
  content:        '';
  position:       absolute;
  bottom:         0;
  left:           0;
  right:          0;
  height:         120px;
  background:     linear-gradient(transparent, var(--bg-card));
  pointer-events: none;
}

.course-mock-body .chapter-title {
  font-family:    var(--font-heading);
  font-weight:    700;
  font-size:      22px;
  color:          var(--text-primary);
  letter-spacing: -0.5px;
  margin-bottom:  var(--space-6);
}

.course-mock-body .chapter-section {
  font-family:    var(--font-heading);
  font-weight:    600;
  font-size:      15px;
  color:          var(--text-primary);
  letter-spacing: -0.2px;
  margin:         var(--space-6) 0 var(--space-3);
}

.course-mock-body .chapter-text {
  font-size:   14px;
  color:       var(--text-secondary);
  line-height: 1.7;
  font-weight: 300;
  max-width:   640px;
}

.course-mock-body .chapter-text .cite {
  font-size:      11px;
  color:          var(--accent);
  vertical-align: super;
  cursor:         default;
}

.course-mock-body .chapter-insight {
  margin: var(--space-4) 0;
}

.course-mock-meta {
  display:        flex;
  align-items:    center;
  gap:            var(--space-3);
  margin-bottom:  var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom:  1px solid var(--border-subtle);
}

.course-mock-meta .meta-item {
  font-size:   12px;
  color:       var(--text-dim);
  display:     flex;
  align-items: center;
  gap:         4px;
}

.course-mock-meta .meta-item svg {
  width:  14px;
  height: 14px;
}

.course-sample-cta {
  text-align: center;
  margin-top: var(--space-9);
}

.course-sample-cta a {
  font-size:       14px;
  color:           var(--accent);
  text-decoration: none;
  border-bottom:   1px solid var(--border);
  padding-bottom:  2px;
  transition:      border-color 150ms ease;
}

.course-sample-cta a:hover {
  border-color: var(--accent);
}

/* ─── SOURCE ASSESSMENT PANEL ─── */
.assessment-panel {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
}

.assessment-header {
  padding:         var(--space-4) var(--space-6);
  border-bottom:   1px solid var(--border-subtle);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.assessment-header .source-title {
  font-family:    var(--font-heading);
  font-weight:    600;
  font-size:      14px;
  color:          var(--text-primary);
  letter-spacing: -0.2px;
}

.assessment-body {
  padding:        var(--space-6);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}

.assessment-row {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-4);
}

.assessment-row .label {
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color:          var(--text-dim);
  min-width:      100px;
  padding-top:    2px;
  flex-shrink:    0;
}

.assessment-row .value {
  font-size:   13px;
  color:       var(--text-secondary);
  line-height: 1.5;
  font-weight: 300;
}

.assessment-signals {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-2);
}

.signal-tag {
  font-size:     11px;
  padding:       2px 8px;
  border-radius: var(--radius-sm);
  font-weight:   500;
}

.signal-tag.positive {
  background: rgba(59, 212, 142, 0.1);
  color:      var(--success);
}

.signal-tag.negative {
  background: rgba(240, 114, 114, 0.1);
  color:      var(--danger);
}

.signal-tag.neutral {
  background: rgba(255, 255, 255, 0.04);
  color:      var(--text-muted);
  border:     1px solid var(--border);
}

/* ─── COMPARISON STRIP ─── */
.comparison-strip {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-4);
  max-width:             960px;
  margin:                0 auto;
}

.comparison-col {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       var(--space-8);
  display:       flex;
  flex-direction: column;
  gap:           var(--space-3);
  transition:    border-color 150ms ease;
}

.comparison-col:hover {
  border-color: var(--border-hover);
}

.comparison-col-featured {
  border-color: var(--accent);
  background:   linear-gradient(180deg, rgba(129, 142, 248, 0.06), var(--bg-card) 60%);
  position:     relative;
}

.comparison-col-featured::before {
  content:        'You are here';
  position:       absolute;
  top:            -10px;
  left:           var(--space-6);
  font-size:      10px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .6px;
  color:          white;
  background:     var(--accent);
  padding:        2px 10px;
  border-radius:  var(--radius-sm);
}

.comparison-label {
  font-family:    var(--font-heading);
  font-weight:    600;
  font-size:      15px;
  color:          var(--text-primary);
  letter-spacing: -0.2px;
}

.comparison-desc {
  font-size:   13px;
  color:       var(--text-muted);
  line-height: 1.6;
  font-weight: 300;
}

.comparison-col-featured .comparison-desc {
  color: var(--text-secondary);
}

/* ─── FAQ ─── */
.faq-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-6);
  max-width:             840px;
  margin:                0 auto;
}

.faq-item h3 {
  font-family:    var(--font-heading);
  font-weight:    600;
  font-size:      14px;
  color:          var(--text-primary);
  letter-spacing: -0.2px;
  margin-bottom:  var(--space-2);
}

.faq-item p {
  font-size:   13px;
  color:       var(--text-muted);
  line-height: 1.6;
  font-weight: 300;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .hero h1 {
    font-size: 46px;
  }

  .greg-layout {
    grid-template-columns: 1fr;
    gap:                   var(--space-12);
  }

  .chat-mockup {
    margin:    0 auto;
    max-width: 420px;
  }

  .bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento-card.span-2 {
    grid-column: span 1;
  }

  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing-card:last-child {
    grid-column: span 2;
    max-width:   420px;
    margin:      0 auto;
  }

  .scoring-grid {
    grid-template-columns: 1fr;
  }

  .how-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .course-mock-body {
    padding: var(--space-6) var(--space-4);
  }

  .course-mock-body .chapter-title {
    font-size: 18px;
  }

  .faq-grid {
    grid-template-columns: 1fr;
  }

  .assessment-row {
    flex-direction: column;
    gap:            var(--space-1);
  }

  .assessment-row .label {
    min-width: auto;
  }

  .section {
    padding: 80px 0;
  }

  .hero {
    padding-top:    120px;
    padding-bottom: 60px;
  }

  .hero h1 {
    font-size:      36px;
    letter-spacing: -1px;
  }

  .hero-sub {
    font-size: 15px;
  }

  .section-title {
    font-size: 28px;
  }

  .bento {
    grid-template-columns: 1fr;
  }

  .value-strip-items {
    grid-template-columns: 1fr;
  }

  .comparison-strip {
    grid-template-columns: 1fr;
  }

  .principles {
    grid-template-columns: 1fr;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .pricing-card:last-child {
    grid-column: span 1;
    max-width:   none;
  }

  .greg-layout {
    text-align: center;
  }

  .greg-text .section-title,
  .greg-text .section-subtitle {
    text-align: center;
  }

  .greg-features {
    align-items: center;
  }

  .how-grid {
    gap: var(--space-9);
  }
}