/* Readable, populated examples belonging only to the public feature tour. */
.pd-feature-tour .ft-example { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); font-size:13px; line-height:1.55; text-align:left; box-shadow:var(--elev-1); }
.pd-feature-tour .ft-example *, .pd-feature-tour .ft-example *::before { box-sizing:border-box; }
.pd-feature-tour .ft-example strong { font-weight:600; }
.pd-feature-tour .ft-example small { font-size:12px; font-weight:400; }
.pd-feature-tour .ft-example-chrome { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; border-bottom:1px solid var(--border); background:var(--surface-canvas); font-size:12px; font-weight:600; }
.pd-feature-tour .ft-example-chrome > span:first-child { display:flex; align-items:center; gap:8px; }
.pd-feature-tour .ft-example-chrome i { color:var(--brand-deep); }
.pd-feature-tour .ft-example-sample { color:var(--text-muted); font-size:11px; font-weight:400; white-space:nowrap; }
.pd-feature-tour .ft-example-body { display:grid; gap:14px; padding:18px; }
.pd-feature-tour .ft-example-body > *, .pd-feature-tour .ft-example-row > *, .pd-feature-tour .ft-example-topline > * { min-width:0; }
.pd-feature-tour .ft-example-topline, .pd-feature-tour .ft-example-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pd-feature-tour .ft-example-topline { flex-wrap:wrap; }
.pd-feature-tour .ft-example-title { font-size:16px; line-height:1.4; }
.pd-feature-tour .ft-example-muted, .pd-feature-tour .ft-example-label { color:var(--text-muted); font-size:12px; }
.pd-feature-tour .ft-example-label { display:block; }
.pd-feature-tour .ft-example-property { padding-bottom:12px; border-bottom:1px solid var(--border-hairline); font-weight:600; }
.pd-feature-tour .ft-example-property .ft-example-muted { font-weight:400; }
.pd-feature-tour .ft-example-stack { display:grid; gap:6px; align-content:center; justify-items:start; }
.pd-feature-tour .ft-example-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.pd-feature-tour .ft-example-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.pd-feature-tour .ft-example-stat { display:grid; align-content:start; gap:4px; padding:12px; background:var(--surface-canvas); border-radius:8px; }
.pd-feature-tour .ft-example-stat small { color:var(--text-muted); }
.pd-feature-tour .ft-example-stat strong { font-size:21px; line-height:1.3; font-variant-numeric:tabular-nums; }
.pd-feature-tour .ft-example-card { padding:12px; border:1px solid var(--border); border-radius:8px; }
.pd-feature-tour .ft-example-row { padding:10px 0; border-bottom:1px solid var(--border-hairline); }
.pd-feature-tour .ft-example-row:last-child { border-bottom:0; }
.pd-feature-tour .ft-example-row .ft-example-muted { display:block; }
.pd-feature-tour .ft-example-pill { display:inline-flex; align-items:center; gap:5px; width:fit-content; max-width:100%; padding:3px 7px; border-radius:6px; background:var(--surface-canvas); color:var(--text-muted); font-size:11px; line-height:1.5; }
.pd-feature-tour .ft-example-pill::before { content:""; flex:0 0 4px; height:4px; border-radius:50%; background:currentColor; }
.pd-feature-tour .ft-example-pill-success { background:var(--success-bg); color:var(--success); }
.pd-feature-tour .ft-example-pill-warning { background:var(--warning-bg); color:var(--warning); }
.pd-feature-tour .ft-example-pill-ai { background:var(--ai-bg); color:var(--ai); }
.pd-feature-tour .ft-example-note { display:flex; align-items:baseline; gap:8px; padding:10px 12px; background:var(--surface-canvas); color:var(--text-muted); border-radius:8px; font-size:12px; }
.pd-feature-tour .ft-example-ai { display:grid; gap:7px; padding:12px; border:1px solid var(--ai-border); background:var(--ai-bg); border-radius:8px; }
.pd-feature-tour .ft-example-ai > .ft-example-label { color:var(--ai); }
.pd-feature-tour .ft-example-amount { font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pd-feature-tour .ft-example-progress { height:6px; overflow:hidden; background:var(--surface-sunken); border-radius:3px; }
.pd-feature-tour .ft-example-progress > span { display:block; height:100%; background:var(--brand-deep); border-radius:inherit; }
.pd-feature-tour .ft-example-table { width:100%; border-collapse:collapse; font-size:12px; }
.pd-feature-tour .ft-example-table th { color:var(--text-muted); font-weight:400; text-align:left; }
.pd-feature-tour .ft-example-table :is(th,td) { padding:9px 5px; border-bottom:1px solid var(--border-hairline); vertical-align:top; }
.pd-feature-tour .ft-example-table :is(th,td):last-child { text-align:right; }
.pd-feature-tour .ft-example-table .ft-example-muted { display:block; font-size:11px; }
.pd-feature-tour .ft-example-message { display:grid; gap:5px; padding:12px; border:1px solid var(--border); border-radius:8px; }
.pd-feature-tour .ft-example-message-user { margin-left:25px; background:var(--surface-canvas); }
.pd-feature-tour .ft-example-person { display:flex; align-items:center; gap:10px; }
.pd-feature-tour .ft-example-person .ft-example-muted { display:block; }
.pd-feature-tour .ft-example-avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--ai-bg); font-size:12px; color:var(--brand-deep-purple); }
.pd-feature-tour .ft-example-listing, .pd-feature-tour .ft-example-site-listing { display:grid; grid-template-columns:1.1fr 1fr; gap:14px; align-items:center; }
.pd-feature-tour .ft-example img.ft-example-photo { display:block; width:100%; height:155px; object-fit:cover; border-radius:8px; }
.pd-feature-tour .ft-example-domain { display:flex; align-items:center; justify-content:center; gap:7px; padding:6px; border-radius:5px; background:var(--surface-canvas); color:var(--text-muted); font-size:11px; overflow-wrap:anywhere; }
.pd-feature-tour .ft-example-site-hero { display:grid; gap:4px; padding:16px; background:var(--brand-deep-tint); border-radius:8px; }
.pd-feature-tour .ft-example-site-hero strong { font-size:20px; line-height:1.4; }
.pd-feature-tour .ft-example-site-hero span { color:var(--text-muted); font-size:12px; }
.pd-feature-tour .ft-screen-example figcaption { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; text-align:left; }
.pd-feature-tour .ft-example-enlarge { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font-size:12px; cursor:zoom-in; }
.pd-feature-tour .ft-example-enlarge:hover { border-color:var(--brand-deep); }
.pd-feature-tour .ft-example-enlarge:focus-visible { outline:3px solid var(--brand-deep-blue); outline-offset:3px; }
.pd-feature-tour .ft-dialog-body [data-product-example] { max-width:780px; margin-inline:auto; }
.pd-feature-tour .ft-dialog-body .ft-example-body { padding:24px; gap:18px; }
.pd-feature-tour .ft-dialog-body .ft-example { font-size:15px; }
.pd-feature-tour .ft-dialog-body .ft-example img.ft-example-photo { height:220px; }
@media (min-width:701px) and (max-width:1024px) {
  .pd-feature-tour .ft-panel { grid-template-columns:1fr 1.35fr; gap:20px; }
  .pd-feature-tour .ft-example-body { padding:14px; }
}
@media (max-width:440px) {
  .pd-feature-tour .ft-example-body, .pd-feature-tour .ft-dialog-body .ft-example-body { padding:12px; gap:12px; }
  .pd-feature-tour .ft-example-chrome { padding:10px 12px; }
  .pd-feature-tour .ft-example-listing, .pd-feature-tour .ft-example-site-listing { grid-template-columns:1fr; gap:12px; }
  .pd-feature-tour .ft-example img.ft-example-photo { height:155px; }
  .pd-feature-tour .ft-example-stat { padding:8px; }
  .pd-feature-tour .ft-example-stat strong { font-size:17px; }
  .pd-feature-tour .ft-example-stat small { font-size:11px; }
  .pd-feature-tour .ft-example-table :is(th,td) { padding-inline:3px; }
  .pd-feature-tour .ft-example-table { font-size:11px; }
  .pd-feature-tour .ft-example-grid { grid-template-columns:1fr; }
  .pd-feature-tour .ft-example-row { flex-wrap:wrap; }
}

.pd-feature-tour .ft-example-stack > :is(.ft-example-row, .ft-example-topline) { width:100%; }