/* Subpages theme — features, nodes, business, pricing */

body[data-page="features"] .theme-toggle-btn,
body[data-page="nodes"] .theme-toggle-btn,
body[data-page="business"] .theme-toggle-btn,
body[data-page="pricing"] .theme-toggle-btn,
body:not([data-page]) .theme-toggle-btn {
  display: inline-flex !important;
}

@media (max-width: 900px) {
  body[data-page="features"] .theme-toggle-btn,
  body[data-page="nodes"] .theme-toggle-btn,
  body[data-page="business"] .theme-toggle-btn,
  body[data-page="pricing"] .theme-toggle-btn,
  body:not([data-page]) .theme-toggle-btn {
    display: inline-flex !important;
  }
}

body[data-page="features"],
body[data-page="nodes"],
body[data-page="business"],
body[data-page="pricing"] {
  background: var(--sp-bg);
  color: var(--sp-heading);
}

body[data-page] .features-page-hero,
body[data-page] .nodes-page-hero,
body[data-page] .business-page-hero,
body[data-page] .pricing-page-hero,
body[data-page] .feature-detail,
body[data-page] .features-cta,
body[data-page] .nodes-section,
body[data-page] .nodes-cta,
body[data-page] .business-vertical,
body[data-page] .business-platform,
body[data-page] .business-cta,
body[data-page] .pricing-plans,
body[data-page] .pricing-page-cta {
  background: var(--sp-bg);
}

body[data-page] .fp-title,
body[data-page] .np-title,
body[data-page] .bp-title,
body[data-page] .pp-title {
  color: var(--sp-heading);
  font-size: clamp(32px, 4.6vw, 56px);
  letter-spacing: -0.04em;
  line-height: 1.14;
}

body[data-page] .fp-title em,
body[data-page] .np-title em,
body[data-page] .bp-title em,
body[data-page] .pp-title em {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

body[data-page] .fp-desc,
body[data-page] .np-desc,
body[data-page] .bp-desc,
body[data-page] .pp-desc {
  color: var(--sp-text-muted);
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 1.55;
}

body[data-page] .features-toc a,
body[data-page] .nodes-toc a,
body[data-page] .business-toc a {
  color: var(--sp-text-medium);
  border-color: var(--sp-toc-border);
  background: var(--sp-toc-bg);
}

body[data-page] .feature-detail:not(.feature-detail--green) .feature-detail-panel,
body[data-page] .nodes-section:not(.nodes-section--green) .nodes-section-panel,
body[data-page] .business-vertical:not(.business-vertical--green) .business-vertical-panel,
body[data-page] .business-platform-panel {
  background: var(--sp-panel);
  border-color: var(--sp-panel-border);
  box-shadow: var(--sp-card-shadow);
}

body[data-page] .feature-detail:not(.feature-detail--green) .feature-detail-num,
body[data-page] .nodes-section:not(.nodes-section--green) .nodes-section-num,
body[data-page] .business-vertical:not(.business-vertical--green) .business-vertical-num,
body[data-page] .business-platform-num {
  color: var(--sp-text-faint);
}

body[data-page] .feature-detail:not(.feature-detail--green) .feature-detail-side h2,
body[data-page] .nodes-section:not(.nodes-section--green) .nodes-section-head h2,
body[data-page] .business-vertical:not(.business-vertical--green) .business-vertical-content h2,
body[data-page] .business-platform-head h2 {
  color: var(--sp-heading);
}

body[data-page] .feature-detail:not(.feature-detail--green) .feature-detail-lead,
body[data-page] .nodes-section:not(.nodes-section--green) .nodes-section-head p,
body[data-page] .business-vertical:not(.business-vertical--green) .business-vertical-lead,
body[data-page] .business-platform-head p,
body[data-page] .business-vertical:not(.business-vertical--green) .business-vertical-body p {
  color: var(--sp-text-muted);
}

body[data-page] .feature-detail:not(.feature-detail--green) .feature-detail-body p {
  color: var(--sp-text-subtle);
}

body[data-page] .feature-detail:not(.feature-detail--green) .feature-detail-body p strong,
body[data-page] .nodes-section:not(.nodes-section--green) .handles-note strong {
  color: var(--sp-heading);
}

body[data-page] .feature-detail:not(.feature-detail--green) .feature-detail-list li,
body[data-page] .business-vertical:not(.business-vertical--green) .business-vertical-list li,
body[data-page] .price-card:not(.featured) .price-features li {
  color: var(--sp-text-body);
}

body[data-page] .feature-detail:not(.feature-detail--green) .feature-detail-icon {
  background: var(--sp-icon-bg);
  border-color: var(--sp-icon-border);
}

body[data-page] .feature-detail:not(.feature-detail--green) .feature-detail-actions .btn-secondary,
body[data-page] .price-card:not(.featured) .btn-secondary {
  border-color: var(--sp-btn-secondary-border);
  color: var(--sp-btn-secondary-color);
}

body[data-page] .nodes-section:not(.nodes-section--green) .node-type-card,
body[data-page] .nodes-section:not(.nodes-section--green) .handle-card,
body[data-page] .nodes-section:not(.nodes-section--green) .example-card,
body[data-page] .business-platform-card,
body[data-page] .price-card:not(.featured) {
  background: var(--sp-surface);
  border-color: var(--sp-surface-border);
  box-shadow: var(--sp-card-shadow);
}

body[data-page] .nodes-section:not(.nodes-section--green) .node-type-card:hover,
body[data-page] .business-platform-card:hover,
body[data-page] .price-card:not(.featured):hover {
  background: var(--sp-surface-hover);
}

body[data-page] .nodes-section:not(.nodes-section--green) .node-type-card h3,
body[data-page] .nodes-section:not(.nodes-section--green) .handle-card h4,
body[data-page] .nodes-section:not(.nodes-section--green) .example-card h3,
body[data-page] .business-platform-card h3,
body[data-page] .price-card:not(.featured) .price-card-head h3 {
  color: var(--sp-heading);
}

body[data-page] .nodes-section:not(.nodes-section--green) .node-type-card p,
body[data-page] .nodes-section:not(.nodes-section--green) .handle-card p,
body[data-page] .nodes-section:not(.nodes-section--green) .example-card > p,
body[data-page] .business-platform-card p,
body[data-page] .price-card:not(.featured) .price-card-head p {
  color: var(--sp-text-subtle);
}

body[data-page] .nodes-section:not(.nodes-section--green) .node-type-tag,
body[data-page] .nodes-section:not(.nodes-section--green) .handles-note,
body[data-page] .nodes-section:not(.nodes-section--green) .example-steps li {
  color: var(--sp-text-muted);
}

body[data-page] .nodes-section:not(.nodes-section--green) .node-type-tag {
  color: var(--sp-text-faint);
}

body[data-page] .business-platform-card code {
  background: var(--sp-code-bg);
}

body[data-page] .business-vertical:not(.business-vertical--green) .business-vertical-visual {
  border-color: var(--sp-visual-border);
  background: var(--sp-visual-bg);
}

body[data-page] .business-vertical:not(.business-vertical--green) .business-visual-icon {
  background: var(--sp-icon-bg);
  border-color: var(--sp-icon-border);
}

body[data-page] .nodes-section:not(.nodes-section--green) .example-chain {
  border-color: var(--sp-chain-border);
  background: var(--sp-chain-bg);
}

body[data-page] .nodes-section:not(.nodes-section--green) .example-node {
  background: var(--sp-node-bg);
  border-color: var(--sp-node-border);
  color: var(--sp-node-text);
}

body[data-page] .nodes-section:not(.nodes-section--green) .example-arrow {
  color: var(--sp-arrow);
}

body[data-page] .billing-toggle {
  background: var(--sp-billing-bg);
  border-color: var(--sp-billing-border);
}

body[data-page] .billing-toggle button {
  color: var(--sp-billing-inactive);
}

body[data-page] .billing-hint,
body[data-page] .pricing-note {
  color: var(--sp-billing-hint);
}

body[data-page] .price-card:not(.featured) .price-value {
  color: var(--sp-heading);
}

body[data-page] .price-card:not(.featured) .price-prefix {
  color: var(--sp-price-prefix);
}

body[data-page] .price-card:not(.featured) .price-period {
  color: var(--sp-price-period);
}

body[data-page] .price-card:not(.featured) .price-amount {
  border-bottom-color: var(--sp-price-divider);
}

body[data-page] .fp-cta,
body[data-page] .np-cta,
body[data-page] .bp-cta,
body[data-page] .pp-cta {
  width: min(920px, 100%);
  padding: 0 32px;
}

body[data-page] .fp-cta-title,
body[data-page] .np-cta-title,
body[data-page] .bp-cta-title,
body[data-page] .pp-cta-title {
  color: var(--sp-heading);
  margin: 0 0 18px;
  font-size: clamp(32px, 5.2vw, 64px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

body[data-page] .fp-cta-sub,
body[data-page] .np-cta-sub,
body[data-page] .bp-cta-sub,
body[data-page] .pp-cta-sub {
  color: var(--sp-text-muted);
  margin: 0 0 36px;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.45;
  max-width: 540px;
}

body[data-page] .fp-cta .hero-actions,
body[data-page] .np-cta .hero-actions,
body[data-page] .bp-cta .hero-actions,
body[data-page] .pp-cta .hero-actions,
body[data-page] .feature-detail-actions {
  animation: none;
  gap: 14px;
}

/* Compact buttons — match index hero */
body[data-page] .btn-primary,
body[data-page] .btn-secondary {
  padding: 10px 22px;
  font-size: 12px;
  box-shadow: none;
}

body[data-page] .btn-primary {
  font-weight: 500;
}

body[data-page] .btn-secondary {
  font-weight: 400;
}

body[data-page] .btn-primary:hover,
body[data-page] .btn-secondary:hover {
  box-shadow: none;
}

body[data-page] .price-card .btn-primary,
body[data-page] .price-card .btn-secondary {
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 500;
}

html[data-theme="light"] body[data-page] .btn-primary,
html[data-theme="light"] body[data-page] .btn-secondary,
:root[data-theme="light"] body[data-page] .btn-primary,
:root[data-theme="light"] body[data-page] .btn-secondary {
  box-shadow: none;
}

html[data-theme="light"] body[data-page] .btn-primary:hover,
html[data-theme="light"] body[data-page] .btn-secondary:hover,
:root[data-theme="light"] body[data-page] .btn-primary:hover,
:root[data-theme="light"] body[data-page] .btn-secondary:hover {
  box-shadow: none;
}

/* Green text on gray → white on dark chip (light theme) */
html[data-theme="light"] .fp-label,
html[data-theme="light"] .np-label,
html[data-theme="light"] .bp-label,
html[data-theme="light"] .pp-label,
html[data-theme="light"] .business-vertical:not(.business-vertical--green) .business-vertical-label,
:root[data-theme="light"] .fp-label,
:root[data-theme="light"] .np-label,
:root[data-theme="light"] .bp-label,
:root[data-theme="light"] .pp-label,
:root[data-theme="light"] .business-vertical:not(.business-vertical--green) .business-vertical-label {
  color: var(--sp-green-text);
  background-color: var(--sp-green-text-bg);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

html[data-theme="light"] .business-platform-card code,
html[data-theme="light"] .nodes-section:not(.nodes-section--green) .example-node.highlight,
:root[data-theme="light"] .business-platform-card code,
:root[data-theme="light"] .nodes-section:not(.nodes-section--green) .example-node.highlight {
  color: var(--accent-text);
  background-color: var(--sp-code-bg);
  border-color: rgba(var(--accent-rgb), 0.35);
  box-decoration-break: initial;
  -webkit-box-decoration-break: initial;
}

html[data-theme="light"] body[data-page] .feature-detail:not(.feature-detail--green) .feature-detail-body p strong,
html[data-theme="light"] body[data-page] .nodes-section:not(.nodes-section--green) .handles-note strong,
:root[data-theme="light"] body[data-page] .feature-detail:not(.feature-detail--green) .feature-detail-body p strong,
:root[data-theme="light"] body[data-page] .nodes-section:not(.nodes-section--green) .handles-note strong {
  color: var(--accent-text);
  background: var(--sp-code-bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  font-weight: 600;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  box-decoration-break: initial;
  -webkit-box-decoration-break: initial;
}

html[data-theme="light"] .billing-hint strong,
html[data-theme="light"] .pricing-note a,
:root[data-theme="light"] .billing-hint strong,
:root[data-theme="light"] .pricing-note a {
  color: var(--accent);
  background: none;
  background-color: transparent;
  box-decoration-break: initial;
  -webkit-box-decoration-break: initial;
}

html[data-theme="light"] .pricing-note a,
:root[data-theme="light"] .pricing-note a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

html[data-theme="light"] .fp-label,
html[data-theme="light"] .np-label,
html[data-theme="light"] .bp-label,
html[data-theme="light"] .pp-label,
:root[data-theme="light"] .fp-label,
:root[data-theme="light"] .np-label,
:root[data-theme="light"] .bp-label,
:root[data-theme="light"] .pp-label {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
}

/* Title emphasis — green italic, no chip */
html[data-theme="light"] .fp-title em,
html[data-theme="light"] .np-title em,
html[data-theme="light"] .bp-title em,
html[data-theme="light"] .pp-title em,
html[data-theme="light"] .fp-cta-title em,
html[data-theme="light"] .np-cta-title em,
html[data-theme="light"] .bp-cta-title em,
html[data-theme="light"] .pp-cta-title em,
:root[data-theme="light"] .fp-title em,
:root[data-theme="light"] .np-title em,
:root[data-theme="light"] .bp-title em,
:root[data-theme="light"] .pp-title em,
:root[data-theme="light"] .fp-cta-title em,
:root[data-theme="light"] .np-cta-title em,
:root[data-theme="light"] .bp-cta-title em,
:root[data-theme="light"] .pp-cta-title em {
  color: var(--accent);
  background: none;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  box-decoration-break: initial;
  -webkit-box-decoration-break: initial;
}

@media (max-width: 900px) {
  body[data-page] .fp-title,
  body[data-page] .np-title,
  body[data-page] .bp-title,
  body[data-page] .pp-title {
    max-width: none;
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.16;
  }

  body[data-page] .fp-cta-title,
  body[data-page] .np-cta-title,
  body[data-page] .bp-cta-title,
  body[data-page] .pp-cta-title {
    font-size: clamp(28px, 8vw, 40px);
  }

  body[data-page] .fp-cta-sub,
  body[data-page] .np-cta-sub,
  body[data-page] .bp-cta-sub,
  body[data-page] .pp-cta-sub {
    margin-bottom: 28px;
    font-size: 14px;
  }

  body[data-page] .fp-cta .hero-actions,
  body[data-page] .np-cta .hero-actions,
  body[data-page] .bp-cta .hero-actions,
  body[data-page] .pp-cta .hero-actions {
    flex-direction: column;
    width: 100%;
    max-width: 280px;
  }
}