/* Product component craft: native-sized text, filled controls and layered surfaces.
   HeroUI's public theme previews inform the treatment; no HeroUI runtime is used. */
.home-page .platform-bento.bento-stories {
 --scene-base:#f5f0f3; --scene-ink:#23131d; --scene-muted:#6e5562; --scene-line:#e7dce2;
 --ui-surface:#fff; --ui-control:#ededf0; --ui-soft:#f5f5f7;
 --scene-shadow:0 1px 2px #18181b0d,0 3px 6px #18181b08,0 14px 26px -12px #48233c29;
 display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:repeat(3,340px); gap:16px;
 color:var(--scene-ink); text-align:left; color-scheme:light;
}
.bento-stories .story-symbols { position:absolute; width:0; height:0; overflow:hidden; }
.bento-stories .sf-icon { display:block; width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.home-page .bento-stories .work-story { position:relative; min-width:0; overflow:hidden; border:1px solid #e8dfe4; border-radius:24px; background:radial-gradient(ellipse at 100% 100%,#f9e7dd99,transparent 65%),linear-gradient(135deg,#f5eff5,#f8f5f6); box-shadow:inset 0 1px 0 #ffffffd9; isolation:isolate; }
.bento-stories .work-catalog,.bento-stories .work-dashboard { grid-column:span 6; }
.bento-stories .work-agents { grid-column:span 4; }
.bento-stories .work-automation,.bento-stories .work-browser,.bento-stories .work-library { grid-column:span 4; }
.bento-stories .work-memory,.bento-stories .work-brand { grid-column:span 4; }
.home-page .bento-stories .story-caption { position:absolute; inset:20px 24px auto; z-index:3; }
.home-page .bento-stories .story-caption h3 { font:500 18px/1.35 var(--text); letter-spacing:-.025em; margin:0; color:var(--scene-ink); text-wrap:normal; }
.home-page .bento-stories .story-caption p { font:400 13px/1.55 var(--text); letter-spacing:-.012em; color:#6e5e69; margin:0; max-width:43ch; text-wrap:pretty; }
.bento-stories .story-title-row { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.bento-stories .story-development { color:#686872; font:400 10px/1.4 var(--text); white-space:nowrap; }
.bento-stories .story-development::before { content:'·'; padding-right:9px; color:#909097; }
.bento-stories .story-art { position:absolute; inset:86px 0 0; overflow:hidden; }
.bento-stories .product-window { position:absolute; overflow:hidden; border:1px solid #ffffff; border-radius:20px; background:var(--ui-surface); box-shadow:var(--scene-shadow); }
.bento-stories .window-bar { display:flex; align-items:center; gap:9px; height:32px; padding:0 14px; border-bottom:1px solid #eeeeF1; background:#fafafb; color:#6b6b75; font:400 11px/1 var(--text); white-space:nowrap; }
.bento-stories .window-dots { display:flex; gap:4px; align-items:center; flex:none; }
.bento-stories .window-dots>i { width:4px; height:4px; border-radius:50%; background:#c5c5cc; }
.bento-stories .forma-wordmark { color:#343a32; font:400 22px/1 Georgia,'Times New Roman',serif; letter-spacing:-.085em; }
.bento-stories .forma-photo { background-image:url('../../img/home/forma/product-atlas.webp'); background-size:300% 200%; background-repeat:no-repeat; background-color:#e9e7e2; }
.bento-stories .photo-mug { background-position:0 0; }.bento-stories .photo-linen { background-position:50% 0; }.bento-stories .photo-carafe { background-position:100% 0; }
.bento-stories .photo-bowl { background-position:0 100%; }.bento-stories .photo-vase { background-position:50% 100%; }.bento-stories .photo-napkins { background-position:100% 100%; }
.bento-stories .ui-count { display:inline-flex; align-items:center; justify-content:center; min-width:25px; min-height:23px; padding:3px 7px; border-radius:8px; background:#f0f0f2; color:#686872; font:400 11px/1 var(--text); white-space:nowrap; }
.bento-stories .ui-search { display:flex; align-items:center; gap:8px; height:35px; padding:0 11px; border-radius:10px; background:var(--ui-control); color:#6b6b75; font:400 12px/1.2 var(--text); }
.bento-stories .ui-search>.sf-icon { width:15px; height:15px; color:#6b6b75; }
.bento-stories .ui-select { display:flex; align-items:center; justify-content:space-between; gap:12px; width:max-content; padding:8px 11px; border-radius:10px; background:var(--ui-control); color:#50505a; font:400 11.5px/1.2 var(--text); white-space:nowrap; }
.bento-stories .ui-select>.sf-icon { width:12px; height:12px; color:#686872; }

.bento-stories .chat-prompt-pill { display:block; width:max-content; padding:10px 14px; border:1px solid #fff; border-radius:999px; background:#ffffffe6; box-shadow:0 2px 3px #48233c04,0 5px 10px -7px #48233c12; color:#65525f; font:400 12px/1.35 var(--text); letter-spacing:-.01em; white-space:nowrap; text-align:center; }

/* Catalog: real product cards on an inset collection surface. */
.bento-stories .catalog-plane { top:6px; left:26px; width:calc(100% - 10px); height:430px; background:#f4f4f6; }
.bento-stories .catalog-topbar { display:flex; align-items:center; justify-content:space-between; height:38px; padding:0 16px; background:#fff; }
.bento-stories .catalog-topbar>div { display:flex; align-items:center; gap:8px; }
.bento-stories .catalog-topbar b { color:#27272d; font:500 14px/1.3 var(--text); letter-spacing:-.02em; }
.bento-stories .catalog-topbar>.forma-wordmark { margin-right:12px; }
.bento-stories .catalog-toolbar { display:flex; gap:10px; padding:5px 13px 0; }
.bento-stories .catalog-toolbar>.ui-search { height:30px; flex:1; min-width:0; background:#e9e9ed; color:#62626c; }
.bento-stories .catalog-toolbar>.ui-select { background:#fff; box-shadow:0 1px 2px #18181b0a; }
.bento-stories .catalog-aperture { position:absolute; top:74px; left:0; right:0; bottom:0; padding:0 12px; overflow:hidden; }
.bento-stories .catalog-conveyor { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px 10px; padding-top:4px; }
.bento-stories .catalog-product { min-width:0; padding:6px; border:1px solid #fff; border-radius:15px; background:#fff; box-shadow:0 1px 2px #18181b0b,0 3px 5px -3px #18181b08; }
.bento-stories .catalog-product .forma-photo { aspect-ratio:1.18; border-radius:10px; }
.bento-stories .catalog-product>div:last-child { display:grid; gap:3px; padding:6px 3px 0; }
.bento-stories .catalog-product b { color:#42424a; font:400 12px/1.3 var(--text); letter-spacing:-.015em; white-space:nowrap; }
.bento-stories .catalog-product span { color:#27272d; font:500 13px/1.3 var(--text); letter-spacing:-.015em; }
.bento-stories .catalog-product small { color:#6b6b75; font:400 10px/1.2 var(--text); letter-spacing:0; }
.bento-stories .catalog-product-best { position:relative; }
.bento-stories .catalog-spotlight { position:absolute; z-index:3; top:50%; left:50%; width:min(202px,calc(100% - 88px)); translate:-50% -50%; opacity:0; pointer-events:none; box-shadow:0 3px 5px #48233c0a,0 18px 30px -12px #48233c30,0 35px 65px -28px #48233c24; }
.bento-stories .catalog-spotlight b { color:#29212a; font-weight:500; }

.bento-stories .catalog-product .catalog-best-seller { position:absolute; top:14px; left:13px; padding:5px 8px; border:1px solid #ffffffd9; border-radius:999px; background:#fffffff0; color:#6d4358; box-shadow:0 1px 3px #48233c0c; font:500 10px/1.2 var(--text); letter-spacing:-.01em; white-space:nowrap; }

/* Connected dashboard: source identity, inset metrics, a properly framed chart. */
.bento-stories .dashboard-sources { position:absolute; z-index:2; top:0; left:50%; width:274px; max-width:calc(100% - 36px); transform:translateX(-50%); display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:20px; }
.bento-stories .dashboard-source { display:flex; align-items:center; gap:9px; justify-self:center; min-width:0; height:34px; padding:3px 12px 3px 4px; border:1px solid #ffffff; border-radius:999px; background:#ffffffdc; box-shadow:0 1px 2px #48233c0b,0 5px 9px -5px #48233c21; }
.bento-stories .source-brand { display:grid; place-items:center; width:25px; height:25px; flex:none; border-radius:50%; }
.bento-stories .source-brand-stripe { background:#635bff; }.bento-stories .source-brand-gorgias { background:#ff9780; }
.bento-stories .source-logo { display:block; object-fit:contain; }.bento-stories .source-brand-stripe>.source-logo { width:12px; height:17px; }.bento-stories .source-brand-gorgias>.source-logo { width:18px; height:20px; }
.bento-stories .dashboard-source>span:last-child { color:#625563; font:400 12px/1 var(--text); white-space:nowrap; }
.bento-stories .dashboard-connections { position:absolute; top:30px; left:50%; width:300px; max-width:calc(100% - 36px); transform:translateX(-50%); height:28px; overflow:visible; fill:none; stroke-width:1.1; }
.bento-stories .connection-track { stroke:#c0c0cb; }.bento-stories .connection-flow { stroke:#8676b6; stroke-dasharray:15 85; stroke-dashoffset:-85; stroke-linecap:round; }.bento-stories .connection-flow[data-flow=support] { stroke:#6d9a91; }
.bento-stories .dashboard-window { top:54px; left:25px; right:25px; height:190px; }
.bento-stories .dashboard-topbar { display:flex; align-items:center; justify-content:space-between; gap:10px; height:38px; padding:0 17px; }
.bento-stories .dashboard-topbar>b { font:500 13px/1.3 var(--text); color:#2a2a31; letter-spacing:-.02em; }
.bento-stories .dashboard-content { padding:0 16px 10px; }
.bento-stories .dashboard-metrics { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.bento-stories .dashboard-metrics>div { display:grid; gap:6px; padding:9px 12px; border-radius:12px; background:#f5f5f7; }
.bento-stories .dashboard-metrics span { display:flex; align-items:center; gap:6px; color:#686872; font:400 11.5px/1.3 var(--text); }
.bento-stories .source-key { width:5px; height:5px; flex:none; border-radius:50%; background:#8c7ab5; }.bento-stories .source-key-support { background:#6c988c; }
.bento-stories .dashboard-metrics strong { color:#232329; font:500 30px/1 var(--text); letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.bento-stories .dashboard-plot { height:36px; margin-top:9px; border-bottom:1px solid #e8e8ed; background:linear-gradient(to bottom,transparent 48%,#eeeeF2 49%,#eeeeF2 51%,transparent 52%); }
.bento-stories .dashboard-plot>svg { width:100%; height:100%; overflow:visible; }.bento-stories .dashboard-chart-line { fill:none; stroke:#8472b2; stroke-width:1.65; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }.bento-stories .dashboard-chart-area { fill:url(#sf-chart-fill); }
.bento-stories .dashboard-axis { display:flex; justify-content:space-between; margin-top:7px; color:#6b6b75; font:400 10px/1.1 var(--text); }

/* A scheduled job and its delivered report, on two distinct surfaces. */
.bento-stories .routine-panel { position:absolute; top:6px; left:23px; right:23px; }
.bento-stories .routine-schedule { overflow:hidden; border:1px solid #fff; border-radius:17px; background:#fff; box-shadow:0 1px 2px #48233c08,0 7px 16px -10px #48233c30; }
.bento-stories .routine-heading { display:flex; align-items:center; gap:10px; padding:12px; }
.bento-stories .routine-mark { display:grid; place-items:center; flex:none; width:32px; height:32px; border:1px solid #f0dce6; border-radius:10px; background:linear-gradient(145deg,#fff8fb,#f6e4ec); color:#a54b72; }
.bento-stories .routine-mark>.sf-icon { width:17px; height:17px; }
.bento-stories .routine-heading>div { display:grid; gap:3px; min-width:0; }
.bento-stories .routine-heading b { color:#372833; font:500 12.5px/1.3 var(--text); letter-spacing:-.02em; white-space:nowrap; }
.bento-stories .routine-heading div>span { color:#8a7784; font:400 10.5px/1.3 var(--text); }
.bento-stories .routine-status { display:flex; align-items:center; gap:4px; margin-left:auto; padding:5px 7px; border:1px solid #dceee2; border-radius:999px; background:#edf7f0; color:#327150; font:500 9px/1 var(--text); }
.bento-stories .routine-status>i { width:4px; height:4px; border-radius:50%; background:#4f956b; }
.bento-stories .routine-trigger { display:flex; align-items:center; gap:7px; min-height:35px; padding:8px 12px; border-top:1px solid #f1ebef; background:#fcfafc; }
.bento-stories .routine-clock { display:grid; place-items:center; flex:none; width:15px; height:15px; color:#8b7786; }
.bento-stories .routine-clock>.sf-icon { width:14px; height:14px; }
.bento-stories .routine-trigger b { color:#66505f; font:400 11px/1.3 var(--text); }
.bento-stories .routine-trigger>span:last-child { margin-left:auto; color:#66505f; font:500 11px/1.3 var(--text); font-variant-numeric:tabular-nums; }
.bento-stories .routine-connection { position:relative; width:1px; height:18px; margin-left:29px; background:#d7bdcc; }
.bento-stories .routine-connection>span { position:absolute; left:-2px; top:6px; width:5px; height:5px; border-radius:50%; background:#ba5b85; box-shadow:0 0 0 3px #f6edf2; }
.bento-stories .routine-report { position:relative; padding:12px; border:1px solid #fff; border-radius:17px; background:#fff; box-shadow:0 2px 4px #48233c08,0 10px 18px -11px #48233c30; }
.bento-stories .routine-report-top { display:flex; align-items:center; gap:9px; }
.bento-stories .routine-file { display:grid; place-items:center; flex:none; width:29px; height:31px; border:1px solid #eee4ed; border-radius:9px; background:#f6f2f7; color:#877090; }
.bento-stories .routine-file>.sf-icon { width:17px; height:17px; }
.bento-stories .routine-report-top>div { display:grid; gap:3px; }
.bento-stories .routine-report b { color:#3d2b37; font:500 12.5px/1.3 var(--text); letter-spacing:-.02em; }
.bento-stories .routine-report-top div>span { color:#8a7784; font:400 10px/1.3 var(--text); white-space:nowrap; }
.bento-stories .routine-done { display:grid; place-items:center; flex:none; width:21px; height:21px; margin-left:auto; border-radius:50%; color:#438361; background:#eaf5ee; }
.bento-stories .routine-done>.sf-icon { width:12px; height:12px; }
.bento-stories .routine-preview { display:grid; grid-template-columns:1.1fr .7fr 1fr; align-items:end; gap:10px; margin-top:10px; padding-top:8px; border-top:1px solid #f3edf1; }
.bento-stories .routine-preview>span { display:grid; gap:5px; }
.bento-stories .routine-preview small { color:#8a7784; font:400 9.5px/1.2 var(--text); }
.bento-stories .routine-preview b { color:#43313e; font:500 21px/1.1 var(--text); letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.bento-stories .routine-preview>div { display:flex; align-items:flex-end; gap:4px; height:35px; padding-bottom:1px; }
.bento-stories .routine-preview i { flex:1; height:40%; border-radius:2px 2px 0 0; background:#ba7997; transform-origin:bottom; }
.bento-stories .routine-preview i:nth-child(2n) { height:65%; background:#dfb5c9; }.bento-stories .routine-preview i:nth-child(3n) { height:85%; }.bento-stories .routine-preview i:last-child { height:100%; background:#a84d77; }

/* A browser result, with scenery restricted to the desktop surface. */
.bento-stories .computer-demo { position:absolute; top:6px; left:20px; right:20px; height:224px; overflow:hidden; border:1px solid #e8e8ed; border-radius:20px; background:#fff; box-shadow:var(--scene-shadow); }
.bento-stories .computer-demo-bar { display:flex; align-items:center; justify-content:space-between; gap:7px; height:36px; padding:0 15px; color:#4c4c57; font:500 11.5px/1.3 var(--text); }
.bento-stories .computer-task { display:flex; align-items:center; gap:6px; min-width:0; white-space:nowrap; }
.bento-stories .computer-task>.sf-icon { width:16px; height:16px; color:#6e5e69; }
.bento-stories .computer-state { display:flex; align-items:center; gap:3px; padding:5px 7px; border-radius:999px; background:#edf6f0; color:#456d57; font:400 9.5px/1 var(--text); white-space:nowrap; }.bento-stories .computer-state>.sf-icon { width:10px; height:10px; }
.bento-stories .computer-desktop { position:absolute; inset:36px 8px 8px; overflow:hidden; border-radius:12px; background:#dfe8ed url('../../img/home/platform-scenes/mist-lake.webp') 40% 100%/auto 200% no-repeat; }
.bento-stories .tracking-window { left:15px; top:12px; width:calc(100% - 9px); height:190px; border-radius:13px; border-color:#fff; box-shadow:0 2px 5px #20202413,0 10px 20px -10px #20202438; }
.bento-stories .tracking-chrome { height:46px; color:#6b6670; background:#f6f5f7; border-bottom:1px solid #eeebf0; }
.bento-stories .chrome-tabstrip { display:flex; align-items:flex-end; gap:8px; height:25px; padding:0 9px; background:#eae8ed; }
.bento-stories .chrome-traffic-lights { display:flex; align-items:center; align-self:center; gap:4px; flex:none; }
.bento-stories .chrome-traffic-lights>i { width:6px; height:6px; border-radius:50%; box-shadow:inset 0 0 0 .5px #00000012; background:#ff6058; }
.bento-stories .chrome-traffic-lights>i:nth-child(2) { background:#ffbd2e; }.bento-stories .chrome-traffic-lights>i:nth-child(3) { background:#28c840; }
.bento-stories .chrome-tab { display:flex; align-items:center; gap:5px; min-width:0; max-width:180px; height:21px; padding:0 8px; border-radius:7px 7px 0 0; background:#f6f5f7; font:400 9px/1 var(--text); }
.bento-stories .chrome-tab>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bento-stories .chrome-tab>.sf-icon { width:11px; height:11px; }.bento-stories .chrome-tab>.chrome-tab-close { width:9px; height:9px; margin-left:8px; }
.bento-stories .chrome-new-tab { align-self:center; color:#88818d; font:400 15px/1 var(--text); }
.bento-stories .chrome-toolbar { display:flex; align-items:center; gap:7px; height:20px; padding:0 8px; }
.bento-stories .chrome-history { display:flex; align-items:center; gap:5px; flex:none; }.bento-stories .chrome-history>.sf-icon { width:10px; height:10px; }.bento-stories .chrome-history>.sf-icon:nth-child(2) { opacity:.4; }
.bento-stories .chrome-address { display:flex; align-items:center; gap:5px; min-width:0; flex:1; height:15px; padding:0 6px; border-radius:6px; background:#e9e7ed; color:#77717b; font:400 8px/1 var(--text); }
.bento-stories .chrome-address>.sf-icon { width:8px; height:8px; }.bento-stories .chrome-address>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bento-stories .tracking-content { padding:8px 14px; }
.bento-stories .tracking-order { display:flex; align-items:center; gap:9px; color:#776b73; font:400 11px/1.3 var(--text); }.bento-stories .tracking-order b { font-weight:500; color:#493841; }
.bento-stories .tracking-package { display:grid; place-items:center; width:25px; height:25px; border-radius:8px; color:#a06b4c; background:#f7eee4; }.bento-stories .tracking-package>.sf-icon { width:17px; height:17px; }
.bento-stories .tracking-content>small { display:block; margin-top:8px; color:#7b6d76; font:400 10px/1.3 var(--text); }
.bento-stories .tracking-selection { display:block; position:relative; width:max-content; margin:4px 0 0 -5px; padding:3px 5px; border-radius:7px; color:#463340; background:#f9edf2; font:500 25px/1.1 var(--text); letter-spacing:-.05em; }
.bento-stories .tracking-pointer { position:absolute; right:-8px; bottom:-12px; width:15px; height:18px; fill:#382430; stroke:#fff; stroke-width:1.3; filter:drop-shadow(0 2px 2px #48233c20); }
.bento-stories .tracking-progress { display:flex; gap:4px; margin-top:10px; }.bento-stories .tracking-progress>i { flex:1; height:4px; border-radius:9px; background:#eae7eb; }.bento-stories .tracking-progress>i:nth-child(-n+2) { background:#739d86; }
.bento-stories .tracking-status { display:block; margin-top:7px; color:#6e7871; font:400 9.5px/1.3 var(--text); }
.bento-stories .browser-answer { position:absolute; z-index:3; display:flex; align-items:center; gap:9px; left:50%; right:auto; bottom:12px; translate:-50% 0; width:max-content; max-width:calc(100% - 32px); padding:9px 13px 9px 9px; border:1px solid #5a4353; border-radius:999px; background:#392b35; color:#f2e8ee; font:400 12px/1.4 var(--text); box-shadow:0 2px 4px #24131d24,0 10px 22px -9px #38202f66; }
.bento-stories .browser-answer-icon { display:grid; place-items:center; flex:none; width:22px; height:22px; border-radius:50%; background:#dff3e6; color:#387556; }.bento-stories .browser-answer-icon>.sf-icon { width:13px; height:13px; }.bento-stories .browser-answer b { color:#fff; font-weight:500; }

/* A saved-file collection, using a real toolbar and comfortably spaced rows. */
.bento-stories .library-window { top:6px; left:24px; right:auto; width:calc(100% - 8px); height:300px; }
.bento-stories .library-topbar { display:flex; align-items:center; gap:10px; height:44px; padding:0 17px; }.bento-stories .library-topbar>b { color:#303039; font:500 14px/1.3 var(--text); letter-spacing:-.02em; }
.bento-stories .library-add { display:grid; place-items:center; width:27px; height:27px; margin-left:auto; border-radius:50%; background:#eeeef1; color:#666670; }.bento-stories .library-add>.sf-icon { width:14px; height:14px; }
.bento-stories .library-search { height:31px; margin:0 14px 7px; background:#f1f1f4; }
.bento-stories .library-files { padding:4px 10px 9px; }
.bento-stories .library-files .source-file { min-height:54px; }
.bento-stories .source-file { display:flex; align-items:center; gap:11px; min-height:56px; padding:7px 9px; border-radius:12px; }
.bento-stories .source-file:first-child { background:#f5f5f7; }.bento-stories .source-file+.source-file { margin-top:2px; }
.bento-stories .source-file-icon,.bento-stories .source-file-photo { display:grid; place-items:center; width:35px; height:37px; flex:none; border-radius:9px; color:#8d819b; background-color:#e9e6ed; }.bento-stories .source-file-icon>.sf-icon { width:19px; height:19px; }
.bento-stories .source-file>div { display:grid; gap:5px; min-width:0; }.bento-stories .source-file b { color:#41414a; font:400 12.5px/1.3 var(--text); white-space:nowrap; }.bento-stories .source-file small { color:#6b6b75; font:400 11px/1.3 var(--text); }

/* A neat grid of useful preferences collects into one remembered context. */
.bento-stories .file-thumbnail { position:relative; border:1px solid #e8dcd5; border-radius:7px; box-shadow:0 1px 2px #48233c0a; }
.bento-stories .file-thumbnail-pdf { background:linear-gradient(135deg,#fff,#fff4ee); color:#b84c3f; }
.bento-stories .file-thumbnail-pdf>i { position:absolute; top:7px; left:8px; width:14px; height:9px; background:repeating-linear-gradient(to bottom,#ddb5a3 0 1px,transparent 1px 4px); }
.bento-stories .source-file .file-thumbnail-pdf>b { position:absolute; bottom:6px; left:5px; padding:2px 3px; border-radius:3px; background:#b64f41; color:#fff; font:600 6.5px/1 var(--text); letter-spacing:.03em; }
.bento-stories .file-thumbnail-brand { background:linear-gradient(150deg,#f2e9d8,#e3d8c0); border-color:#dfd4be; color:#48503e; }
.bento-stories .source-file .file-thumbnail-brand>b { margin-top:-5px; font:400 18px/1 Georgia,'Times New Roman',serif; color:#48503e; letter-spacing:-.09em; }
.bento-stories .file-thumbnail-brand>i { position:absolute; bottom:6px; left:7px; width:19px; height:3px; border-radius:2px; background:linear-gradient(to right,#b77b59 0 29%,transparent 29% 35%,#777b61 35% 64%,transparent 64% 70%,#36372e 70%); }
.bento-stories .memory-conversation { position:absolute; inset:0; }
.bento-stories .memory-grid-mask { position:absolute; top:12px; left:0; right:0; height:166px; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(0deg,transparent,#000 17%,#000 83%,transparent); mask-composite:intersect; }
.bento-stories .memory-prompt-grid { display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; gap:10px; width:100%; position:absolute; top:8px; left:0; }
.bento-stories .memory-row { position:relative; display:flex; justify-content:center; gap:8px; width:max-content; }
.bento-stories .memory-row-focus { translate:var(--memory-focus-offset,0px) 0; }
.bento-stories .memory-request mark { padding:0; color:#c51553; background:none; font-weight:500; }
.bento-stories .memory-row-edge { filter:blur(.7px); opacity:.6; }
.bento-stories .memory-event { position:absolute; top:190px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; width:max-content; max-width:calc(100% - 40px); padding:6px 10px 6px 6px; border:1px solid #fff; border-radius:999px; background:linear-gradient(135deg,#fffafd,#fcecf3); box-shadow:0 1px 2px #48233c0a,0 5px 9px -5px #a93e5c21; color:#984362; font:500 11.5px/1.3 var(--text); white-space:nowrap; }
.bento-stories .memory-event-icon { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#f7dce7; color:#b82c60; }.bento-stories .memory-event-icon>.sf-icon { width:13px; height:13px; }
.bento-stories .memory-event-check { display:grid; place-items:center; margin-left:6px; width:17px; height:17px; border-radius:50%; background:#f5dce6; color:#ad315e; }.bento-stories .memory-event-check>.sf-icon { width:10px; height:10px; }

/* Merchant identity: a coherent theme editor beside a living brand preview. */
.bento-stories .brand-window { top:6px; left:25px; width:calc(100% - 9px); height:300px; }
.bento-stories .brand-topbar { display:flex; align-items:center; justify-content:space-between; gap:10px; height:44px; padding:0 17px; }.bento-stories .brand-topbar>b { color:#303039; font:500 14px/1.3 var(--text); letter-spacing:-.02em; }.bento-stories .brand-saved { display:flex; align-items:center; gap:4px; margin-right:16px; padding:5px 8px; border-radius:999px; background:#e9f5ed; color:#367150; font:500 10.5px/1.3 var(--text); }.bento-stories .brand-saved>.sf-icon { width:12px; height:12px; color:#367150; }
.bento-stories .merchant-brandboard { position:absolute; top:58px; left:19px; width:43%; padding:0 9px 0 0; }
.bento-stories .brandboard-heading { color:#6b6b75; font:400 11px/1.4 var(--text); }
.bento-stories .merchant-brandboard>.forma-wordmark { display:block; margin:10px 0 14px; color:#3b4238; font-size:38px; line-height:1.1; }
.bento-stories .merchant-swatches { display:flex; gap:5px; }.bento-stories .merchant-swatches>i { width:27px; height:27px; border-radius:7px; background:var(--merchant-color); box-shadow:inset 0 0 0 1px #24242409; }
.bento-stories .merchant-typography { display:flex; align-items:center; gap:9px; margin-top:12px; padding:8px; border-radius:12px; background:#f1f2ef; color:#5a6556; }.bento-stories .merchant-typography>b { font:400 27px/1 Georgia,'Times New Roman',serif; letter-spacing:-.06em; }
.bento-stories .merchant-typography>span { display:grid; gap:4px; }.bento-stories .merchant-typography small { color:#626c5d; font:400 9.5px/1.1 var(--text); }.bento-stories .merchant-typography strong { color:#616b5b; font:400 11px/1.1 var(--text); white-space:nowrap; }.bento-stories .merchant-typography>.sf-icon { width:10px; height:10px; margin-left:auto; color:#8a9287; }
.bento-stories .merchant-campaign { position:absolute; top:58px; right:14px; width:44%; height:250px; padding:12px; overflow:hidden; border-radius:12px; background:#e8deca; color:#393b30; box-shadow:0 1px 2px #18181b0a,0 6px 12px -5px #18181b18; }
.bento-stories .merchant-campaign>.forma-wordmark { color:#393b30; font-size:20px; }.bento-stories .merchant-campaign>b { display:block; margin-top:14px; font:400 clamp(27px,2.2vw,31px)/.97 Georgia,'Times New Roman',serif; letter-spacing:-.055em; }
.bento-stories .merchant-campaign>.forma-photo { width:100%; height:102px; margin-top:10px; border-radius:5px; }

/* Every specialist keeps its avatar visible; only the active gradient moves. */
.bento-stories .work-agents { scroll-margin-top:88px; }
.bento-stories .agent-console { position:absolute; inset:12px 21px 16px; overflow:hidden; }
.bento-stories .team-task { display:flex; justify-content:center; position:absolute; top:7px; left:0; right:0; }
.bento-stories .team-task>.chat-prompt-pill { max-width:100%; padding:12px 18px; color:#4e3a49; font-size:14px; font-weight:500; }
.bento-stories .agent-team { display:flex; align-items:center; justify-content:center; position:absolute; top:86px; left:50%; width:max-content; transform:translateX(-50%); isolation:isolate; }
.home-page .bento-stories .team-agent { --agent-color:#b22e61; --agent-fill:#fff7fa; --avatar-image:url('../../img/home/agent-avatars/red.jpg'); --avatar-a:#f96396; --avatar-b:#8f1e65; --avatar-c:#ffc4ba; position:relative; display:block; width:44px; height:44px; min-width:44px; min-height:44px; padding:0; border:0; border-radius:24px; background:none; overflow:hidden; color:var(--agent-color); cursor:pointer; flex:none; z-index:1; -webkit-tap-highlight-color:transparent; transition:width 400ms cubic-bezier(.22,1,.36,1); }
.bento-stories .team-agent+.team-agent { margin-left:-20px; }
.bento-stories .team-agent[data-agent=feedback] { --agent-color:#70509b; --agent-fill:#faf7ff; --avatar-image:url('../../img/home/agent-avatars/purple.jpg'); --avatar-a:#b699ee; --avatar-b:#604691; --avatar-c:#f6d0ec; }
.bento-stories .team-agent[data-agent=merchandising] { --agent-color:#9b5930; --agent-fill:#fffbf5; --avatar-image:url('../../img/home/agent-avatars/orange.jpg'); --avatar-a:#f9b375; --avatar-b:#ac5939; --avatar-c:#ffe4b2; }
.bento-stories .agent-shell { position:absolute; inset:3px; border-radius:999px; background:transparent; transition:background 300ms,box-shadow 300ms; }
.bento-stories .agent-avatar { position:absolute; left:8px; top:7px; width:30px; height:30px; overflow:hidden; border-radius:50%; background:var(--agent-color); box-shadow:0 0 0 2px #fbf7fa; transform:scale(1); transition:transform 400ms cubic-bezier(.22,1,.36,1),box-shadow 350ms; isolation:isolate; }
.bento-stories .agent-gradient { display:block; position:absolute; inset:-20%; opacity:1; background:var(--avatar-image) center/cover no-repeat,var(--avatar-a); animation:agent-gradient-turn 3800ms linear infinite; animation-play-state:paused; transition:opacity 220ms; }
.bento-stories .agent-avatar::after { content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px #ffffff52,inset 1px 2px 3px #ffffff5c,inset -1px -2px 5px #48233c26; opacity:1; transition:opacity 250ms; }
.bento-stories .agent-copy { position:absolute; top:7px; left:49px; display:grid; gap:1px; width:max-content; white-space:nowrap; text-align:left; font:500 13px/16px var(--text); letter-spacing:-.02em; opacity:0; filter:blur(2px); transform:translateX(-3px); pointer-events:none; transition:opacity 130ms,filter 150ms,transform 250ms cubic-bezier(.22,1,.36,1); }
.bento-stories .agent-copy>b { font:inherit; }
.bento-stories .agent-copy>small { font-size:10.5px; font-weight:400; line-height:14px; opacity:.78; }
.bento-stories .team-agent[data-active] { width:200px; z-index:2; }.bento-stories .team-agent[data-active] .agent-shell { background:var(--agent-fill); box-shadow:inset 0 0 0 1px #fff,0 2px 4px #48233c0c; }
.bento-stories .team-agent[data-active] .agent-avatar { transform:scale(1); box-shadow:0 0 0 2px #fff,0 1px 3px #48233c20; }.bento-stories .team-agent[data-active] :is(.agent-gradient,.agent-avatar::after) { opacity:1; }
.bento-stories .team-agent[data-active] .agent-gradient { animation-play-state:running; }
.bento-stories .team-agent[data-active] .agent-copy { opacity:1; filter:blur(0); transform:translateX(0); transition-delay:100ms; }
.bento-stories .team-skills { position:absolute; top:150px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 20px); padding:0; margin:0; text-align:center; font:400 11px/1.5 var(--text); letter-spacing:-.015em; color:#7c6878; white-space:nowrap; }
.bento-stories .agents-art[data-team-view=idle] .team-skills { opacity:0; }.bento-stories .team-skills>b { color:#5c4356; font-weight:500; }.bento-stories .team-skills>span { padding-inline:5px; color:#a48a9b; }
.bento-stories .team-agent:active .agent-avatar { scale:.94; }.home-page .bento-stories .team-agent:focus-visible { outline:2px solid var(--agent-color); outline-offset:0; z-index:3; }
.bento-stories .work-agents:is([data-motion=offscreen],[data-motion=settled],[data-motion=interaction],[data-motion=static]) .agent-gradient { animation-play-state:paused!important; }
.bento-stories .agents-art[data-team-motion=instant] .team-agent,.bento-stories .agents-art[data-team-motion=instant] .team-agent * { transition:none!important; }
.bento-stories.is-static-preview .agent-gradient { animation:none!important; }
@keyframes agent-gradient-turn { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

@media(max-width:1100px) {
 .home-page .platform-bento.bento-stories { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(4,340px); }
 .bento-stories .work-story { grid-column:span 1; }
 .bento-stories .work-catalog { grid-column:1; grid-row:1; }.bento-stories .work-dashboard { grid-column:2; grid-row:1; }
 .bento-stories .work-agents { grid-column:1; grid-row:2; }.bento-stories .work-automation { grid-column:2; grid-row:2; }
 .bento-stories .work-memory { grid-column:1; grid-row:3; }.bento-stories .work-library { grid-column:2; grid-row:3; }
 .bento-stories .work-browser { grid-column:1; grid-row:4; }.bento-stories .work-brand { grid-column:2; grid-row:4; }
 .bento-stories .catalog-conveyor { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .bento-stories .catalog-toolbar { gap:7px; }
 .bento-stories .catalog-toolbar .ui-select { display:none; }
 .bento-stories .dashboard-window { left:20px; right:20px; }
 .bento-stories .dashboard-topbar { padding-inline:14px; }
 .bento-stories .dashboard-content { padding-inline:14px; }
 .bento-stories .dashboard-metrics { gap:8px; }
 .bento-stories .dashboard-metrics>div { padding-inline:11px; }
 .bento-stories .dashboard-metrics span { font-size:11px; }
 .bento-stories .routine-panel { left:20px; right:20px; }
 .bento-stories .computer-demo { left:20px; right:20px; }
 .bento-stories .computer-demo-bar { font-size:11px; padding-inline:13px; }
 .bento-stories .library-window { left:20px; right:auto; }
 .bento-stories .source-file b { font-size:12px; }
 .bento-stories .merchant-brandboard { width:43%; left:16px; }
 .bento-stories .merchant-typography { padding-inline:8px; gap:6px; }
 .bento-stories .merchant-typography strong { font-size:10.5px; }
 .bento-stories .merchant-typography>.sf-icon { display:none; }
 .bento-stories .merchant-swatches>i { width:25px; height:29px; }
}
@media(max-width:700px) {
 .home-page .platform-bento.bento-stories { grid-template-columns:1fr; grid-template-rows:none; grid-auto-rows:auto; gap:14px; }
 .bento-stories .work-story { grid-column:auto; grid-row:auto; min-height:360px; }
 .home-page .bento-stories .story-caption { inset:20px 23px auto; }
 .home-page .bento-stories .story-caption p { font-size:12.5px; }
 .bento-stories .story-art { top:100px; }
 .bento-stories .catalog-plane { left:20px; }
 .bento-stories .catalog-conveyor { grid-template-columns:repeat(4,minmax(0,1fr)); }
 .bento-stories .catalog-product b { font-size:12px; }
 .bento-stories .catalog-toolbar .ui-select { display:flex; }
 .bento-stories .agent-console { inset-inline:14px; }
}
@media(max-width:500px) {
 .bento-stories .catalog-conveyor { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .bento-stories .catalog-toolbar .ui-select { display:none; }
 .bento-stories .merchant-campaign>b { font-size:29px; }
}
@media(max-width:360px) {
 .bento-stories .catalog-conveyor { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .home-page .bento-stories .story-caption { inset-inline:20px; }
 .home-page .bento-stories .story-caption p { font-size:12px; }
 .bento-stories .story-development { font-size:9px; }
 .bento-stories .story-title-row { gap:6px; }
 .bento-stories .story-development::before { padding-right:6px; }
 .bento-stories .catalog-plane { left:17px; }
 .bento-stories .catalog-topbar { padding-inline:14px; }
 .bento-stories .dashboard-window { left:14px; right:14px; }
 .bento-stories .dashboard-topbar { padding-inline:12px; gap:8px; }
 .bento-stories .dashboard-topbar>b { font-size:12px; }
 .bento-stories .dashboard-topbar .ui-select { padding:6px 8px; gap:4px; font-size:10.5px; }
 .bento-stories .dashboard-content { padding-inline:12px; }
 .bento-stories .dashboard-metrics>div { padding:9px; }
 .bento-stories .dashboard-metrics span { font-size:10.5px; gap:4px; }
 .bento-stories .dashboard-metrics strong { font-size:27px; }
 .bento-stories .dashboard-sources,.bento-stories .dashboard-connections { max-width:calc(100% - 28px); }
 .bento-stories .dashboard-source { gap:8px; padding:4px 12px 4px 5px; }
 .bento-stories .dashboard-source>span:last-child { font-size:11px; }
 .bento-stories .routine-panel { left:18px; right:18px; }
 .bento-stories .computer-demo { left:16px; right:16px; }
 .bento-stories .computer-demo-bar { padding-inline:11px; font-size:10.5px; }
 .bento-stories .computer-state { font-size:9px; padding:4px 5px; }
 .bento-stories .browser-answer { padding:9px 11px 9px 9px; font-size:11px; gap:7px; }
 .bento-stories .team-task>.chat-prompt-pill { padding-inline:14px; font-size:13px; }
 .bento-stories .library-window { left:17px; right:auto; }
 .bento-stories .library-topbar { padding-inline:15px; gap:8px; }
 .bento-stories .brand-topbar { padding-inline:15px; gap:8px; }
 .bento-stories .library-search { margin-inline:12px; }
 .bento-stories .library-files { padding-inline:10px; }
 .bento-stories .source-file { gap:10px; padding-inline:8px; }
 .bento-stories .source-file b { font-size:11.5px; }
 .bento-stories .source-file small { font-size:10.5px; }
 .bento-stories .brand-window { left:17px; }
 .bento-stories .merchant-brandboard { left:14px; width:43%; }
 .bento-stories .merchant-brandboard>.forma-wordmark { font-size:38px; }
 .bento-stories .merchant-swatches { gap:4px; }
 .bento-stories .merchant-swatches>i { width:22px; height:27px; }
 .bento-stories .merchant-typography { margin-top:16px; padding:8px; gap:6px; }
 .bento-stories .merchant-typography>b { display:none; }
 .bento-stories .merchant-typography strong { font-size:11.5px; }
 .bento-stories .merchant-campaign { right:10px; padding:11px; }
 .bento-stories .team-skills { font-size:10.5px; }
}
@media(prefers-reduced-motion:reduce) {
 .home-page .bento-stories button,.bento-stories .team-agent * { transition:none!important; animation:none!important; }
 .home-page .bento-stories button:active { transform:none; }
}