/* Explanatory product diagrams use the same tokens as the shared components. */
.feature-board{width:100%;min-width:0;margin:0;color:var(--ink);container-type:inline-size}
.feature-board .icon{width:22px;height:22px;flex:0 0 22px}
.feature-board__stage{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:340px;aspect-ratio:4/3;padding:28px 24px;background:var(--bg-blue);border:1px solid rgba(45,80,184,.04);border-radius:var(--radius-lg)}
.feature-board__content{width:100%;min-width:0}
.feature-board figcaption{margin-top:12px;color:var(--muted);font-size:12px;line-height:1.5;text-align:center}
.feature-board__scope{margin:20px auto 0;text-align:center;font-size:12px;color:var(--ink-soft);line-height:1.65;max-width:32ch}
.feature-board__core{display:flex;align-items:center;justify-content:center;gap:10px;width:fit-content;max-width:100%;margin:auto;padding:16px 22px;border-radius:var(--radius);background:var(--primary);color:#fff;font-size:16px;line-height:1.4;box-shadow:0 8px 22px rgba(45,80,184,.12)}
.feature-board__core b{font-weight:700}
.feature-board__trunk{height:28px;width:1px;background:#bac8e3;margin:auto}
.feature-board__nodes{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-top:22px}
.feature-board__nodes::before{content:'';position:absolute;top:0;height:1px;background:#bac8e3;left:calc((100% - 20px)/6);right:calc((100% - 20px)/6)}
.feature-board__node{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;min-width:0;padding:18px 8px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;font-size:13px;line-height:1.55;word-break:keep-all;overflow-wrap:anywhere}
.feature-board__node::before{content:'';position:absolute;top:-23px;height:22px;width:1px;left:50%;background:#bac8e3}
.feature-board__node b{font-weight:600}
.feature-board__node-icon,.feature-board__module-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:var(--primary-soft);color:var(--primary)}
.feature-board__panel{width:100%;min-width:0;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.feature-board__panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.feature-board__panel-head b{font-size:15px;line-height:1.5;font-weight:700}
.feature-board__panel-head>span{font-size:10px;color:var(--muted);white-space:nowrap}
.feature-board__module-list{padding:4px 20px}
.feature-board__module{display:flex;align-items:center;gap:12px;min-width:0;padding:14px 0}
.feature-board__module+.feature-board__module{border-top:1px solid var(--line)}
.feature-board__module b{font-size:13px;line-height:1.55;font-weight:600;overflow-wrap:anywhere}
.feature-board__module-icon{width:34px;height:34px;flex-basis:34px;border-radius:10px}
.feature-board__module-icon .icon{width:18px;height:18px;flex-basis:18px}
.feature-board__flow{padding:16px 20px 20px;display:grid;gap:16px}
.feature-board__flow-step{position:relative;display:flex;align-items:center;gap:14px;min-height:48px}
.feature-board__flow-marker{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:var(--primary-soft);color:var(--primary)}
.feature-board__flow-step:last-child .feature-board__flow-marker{background:var(--primary);color:#fff}
.feature-board__flow-step b{font-size:14px;line-height:1.55;font-weight:600;overflow-wrap:anywhere}
.feature-board__flow-arrow{position:absolute;top:43px;left:13px;color:#a6b8d8;display:flex;z-index:0}
.feature-board__flow-arrow .icon{width:14px;height:14px;flex-basis:14px;transform:rotate(90deg)}
/* These are diagrams, so no success pills or live-state indicators are used. */
.product-visual .ui-phone__scope{display:flex;align-items:center;gap:7px;padding:10px 0;font-size:10px;border-bottom:1px solid var(--line)}
.product-visual .ui-phone__scope .icon{width:13px;height:13px;flex-basis:13px;color:var(--primary)}
.product-visual .ui-side-note{pointer-events:none}
@container (max-width:380px){
 .feature-board__stage{padding:24px 16px;min-height:310px;aspect-ratio:auto}
 .feature-board__core{font-size:15px;padding:14px 18px}
 .feature-board__nodes{gap:8px}
 .feature-board__nodes::before{left:calc((100% - 16px)/6);right:calc((100% - 16px)/6)}
 .feature-board__node{padding:16px 6px;font-size:12px;gap:10px}
 .feature-board__node-icon{width:34px;height:34px;flex-basis:34px}
 .feature-board__node-icon .icon{width:20px;height:20px;flex-basis:20px}
 .feature-board__panel-head{padding:16px}
 .feature-board__panel-head b{font-size:14px}
 .feature-board__panel-head>span{display:none}
 .feature-board__module-list{padding-inline:16px}
 .feature-board__module{gap:10px}
 .feature-board__flow{padding:16px}
 .feature-board__flow-step b{font-size:13px}
 .feature-board__scope{font-size:11px;margin-top:16px}
}
@container (max-width:290px){
 .feature-board__stage{padding:22px 12px}
 .feature-board__nodes{gap:6px}
 .feature-board__nodes::before{left:calc((100% - 12px)/6);right:calc((100% - 12px)/6)}
 .feature-board__node{padding-inline:5px}
 .feature-board__core{font-size:14px}
}