.feature-page { padding-block: var(--space-5) var(--space-7); }
.feature-breadcrumb { display: flex; align-items: center; gap: var(--space-3); color: var(--text-faint); font-size: var(--text-sm); }
.feature-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-soft); text-underline-offset: 4px; }
.feature-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); align-items: center; padding-block: var(--space-7) var(--space-8); }
.feature-hero .landing-eyebrow { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); }
.feature-hero h1 { font-size: var(--text-landing-hero); font-weight: 500; line-height: 1.07; letter-spacing: -0.045em; text-wrap: balance; }
.feature-hero h1 span { color: var(--brand); }
.feature-lead { margin-top: var(--space-5); max-width: 50ch; color: var(--text-soft); font-size: var(--text-lg); line-height: 1.65; }
.feature-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); margin-top: var(--space-6); }
.feature-actions .landing-text-link { min-height: 44px; margin-top: 0; }
.feature-hero__note { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-faint); }
.feature-preview { margin: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-stage); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-stage); }
.feature-preview__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.feature-preview__bar > span:first-child { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.feature-preview__bar > span:last-child, .feature-preview__label { color: var(--text-faint); font-size: var(--text-xs); }
.feature-preview__bar svg { color: var(--brand); }
.feature-preview__inbox { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); }
.feature-preview__conversations { padding: var(--space-5) var(--space-3); border-right: 1px solid var(--border); }
.feature-preview__label { padding-inline: var(--space-2); margin-bottom: var(--space-4); }
.feature-contact { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-2); border-radius: var(--radius-sm); }
.feature-contact + .feature-contact { margin-top: var(--space-2); }
.feature-contact--selected { background: var(--brand-soft); }
.feature-contact > div { min-width: 0; flex: 1; }
.feature-contact strong { display: block; font-size: var(--text-sm); font-weight: 500; }
.feature-contact div > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-faint); font-size: var(--text-xs); margin-top: var(--space-1); }
.feature-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-3); color: var(--text-soft); font-size: var(--text-xs); }
.feature-unread { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-size: var(--text-xs); }
.feature-preview__thread, .feature-preview__monitor { padding: var(--space-5); }
.feature-preview__identity { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.feature-preview__identity > svg, .feature-preview__identity > .platform-icon { flex-shrink: 0; width: 24px; height: 24px; }
.feature-preview__identity > div { flex: 1; }
.feature-preview__identity strong { display: block; font-weight: 500; font-size: var(--text-sm); }
.feature-preview__identity > div > span { display: block; color: var(--text-faint); font-size: var(--text-xs); margin-top: var(--space-1); }
.feature-message { margin-top: var(--space-5); padding: var(--space-4); border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) 0; background: var(--surface-3); }
.feature-message > span { font-size: var(--text-xs); color: var(--text-faint); }
.feature-message p, .feature-draft p, .feature-comment p, .feature-post p { font-size: var(--text-sm); line-height: 1.65; }
.feature-message p { margin-top: var(--space-2); }
.feature-draft { margin-top: var(--space-5); padding: var(--space-4); border-left: 2px solid var(--brand); background: var(--brand-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.feature-draft > span { display: flex; gap: var(--space-2); align-items: center; color: var(--brand); font-size: var(--text-xs); font-weight: 600; }
.feature-draft p { margin-block: var(--space-3); }
.feature-draft small { color: var(--text-soft); font-size: var(--text-xs); }
.feature-preview figcaption { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--text-faint); }
.feature-post { padding-block: var(--space-5) var(--space-4); }
.feature-post__metrics { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); font-size: var(--text-xs); color: var(--text-soft); }
.feature-comment { display: flex; align-items: start; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.feature-comment strong { font-size: var(--text-sm); font-weight: 500; }
.feature-comment p { margin-top: var(--space-1); }
.feature-preview__schedule { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); color: var(--text-faint); font-size: var(--text-xs); }
.feature-preview__schedule svg { flex-shrink: 0; }
.feature-platforms { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); padding-block: var(--space-5); border-block: 1px solid var(--border); }
.feature-platforms p { color: var(--text-soft); font-size: var(--text-sm); }
.feature-platforms > div { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-5); }
.feature-platforms > div > span { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.feature-platforms .platform-icon { width: 20px; height: 20px; }
.feature-platforms__soon { color: var(--text-faint); }
.feature-platforms small { padding: var(--space-1) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-xs); }
.feature-section { padding-block: var(--space-9); border-bottom: 1px solid var(--border); scroll-margin-top: 112px; }
.feature-section__intro { max-width: 680px; }
.feature-section__intro .landing-eyebrow, .feature-next .landing-eyebrow { margin-bottom: var(--space-4); }
.feature-section h2, .feature-next h2 { font-size: var(--text-landing-section); font-weight: 500; line-height: 1.12; letter-spacing: -0.035em; text-wrap: balance; }
.feature-section__intro > p:not(.landing-eyebrow), .feature-next p:not(.landing-eyebrow) { margin-top: var(--space-5); color: var(--text-soft); line-height: 1.7; }
.feature-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-8); margin-top: var(--space-7); }
.feature-benefit-icon { display: inline-flex; color: var(--brand); margin-bottom: var(--space-4); }
.feature-benefits h3, .feature-steps h3 { font-size: var(--text-lg); font-weight: 500; line-height: 1.4; }
.feature-benefits p, .feature-steps p { color: var(--text-soft); line-height: 1.7; margin-top: var(--space-3); }
.feature-setup, .feature-questions { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: var(--space-8); }
.feature-setup .landing-text-link { margin-top: var(--space-5); }
.feature-steps { list-style: none; padding: 0; margin: 0; }
.feature-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-5); padding-block: var(--space-5); border-top: 1px solid var(--border); }
.feature-steps li:first-child { padding-top: 0; border: 0; }
.feature-step-number { font-family: var(--font-display); color: var(--brand); font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.feature-next { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-8); }
.feature-next .btn { flex-shrink: 0; }
.feature-related { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border); font-size: var(--text-sm); }
.feature-related p { color: var(--text-soft); }
.feature-related .landing-text-link { margin-top: 0; }
@media (max-width: 1050px) {
  .feature-hero { gap: var(--space-6); }
  .feature-preview__inbox { grid-template-columns: 1fr; }
  .feature-preview__conversations { display: none; }
  .feature-platforms { align-items: start; flex-direction: column; }
}
@media (max-width: 800px) {
  .feature-hero { grid-template-columns: 1fr; padding-block: var(--space-6) var(--space-7); }
  .feature-hero__copy { max-width: 620px; }
  .feature-preview { width: 100%; max-width: 620px; }
  .feature-preview__inbox { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); }
  .feature-preview__conversations { display: block; }
  .feature-section { padding-block: var(--space-8); }
  .feature-setup, .feature-questions { grid-template-columns: 1fr; gap: var(--space-6); }
  .feature-next, .feature-related { align-items: start; flex-direction: column; }
}
@media (max-width: 480px) {
  .feature-lead { font-size: var(--text-md); }
  .feature-preview__inbox { grid-template-columns: 1fr; }
  .feature-preview__conversations { display: none; }
  .feature-preview__bar, .feature-preview__thread, .feature-preview__monitor, .feature-preview figcaption { padding-inline: var(--space-4); }
  .feature-benefits { grid-template-columns: 1fr; gap: var(--space-6); }
  .feature-platforms > div { gap: var(--space-4); }
  .feature-actions { align-items: start; flex-direction: column; }
}