.feature-example--new { width: 100%; max-width: 580px; }
.feature-demo-tabs { display: flex; flex-wrap: wrap; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.feature-demo-tabs .is-selected { color: var(--ink); box-shadow: 0 2px 0 var(--lime-strong); }
.feature-demo-artwork { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 0; }
.feature-demo-artwork img { width: 44px; height: 44px; object-fit: contain; }
.feature-demo-more { margin-left: auto; font-size: 10px; color: var(--ink-2); }
.feature-demo-draft { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font-size: 13px; color: var(--ink); }
.feature-demo-draft img { width: 30px; height: 30px; object-fit: contain; }
.feature-demo-send { display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; border-radius: 50%; background: var(--lime-wash); font-size: 16px; }
.feature-demo-selection, .feature-demo-quote { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font-size: 13px; }
.feature-demo-selection { margin-bottom: 12px; }
.feature-demo-source { display: block; color: var(--muted); font: 10px var(--font-mono); }
.feature-demo-selection p { margin: 10px 0; line-height: 1.6; }
.feature-demo-selection mark { background: var(--lime); color: var(--ink); padding: 2px 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.feature-demo-quote blockquote { margin: 10px 0; padding-left: 12px; border-left: 2px solid var(--lime-strong); color: var(--ink); line-height: 1.6; }
.feature-demo-quote blockquote small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.feature-demo-quote > p { margin: 9px 0 0; color: var(--ink); }
.tile--expressions .feature-example, .tile--quote .feature-example { margin: 0; }
.tile--expressions .feature-example__window, .tile--quote .feature-example__window { padding: 14px; }
.tile--expressions .feature-example figcaption, .tile--quote .feature-example figcaption { padding-inline: 5px; font-size: 10px; }
.tile--expressions .tile__copy .text-link, .tile--quote .tile__copy .text-link { display: inline-flex; gap: 8px; min-height: 44px; margin-top: 10px; font-size: 12px; }
.bento .tile--quote { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 24px; }
.tile--quote .tile__copy { padding: 20px; }
@media (max-width: 800px) {
  .bento .tile--quote { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tile--quote .tile__copy { padding: 22px 14px 14px; }
}