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

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