:root{--chart-2:var(--orange)}
.product-story{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:start;border-top:1px solid var(--rule);padding:56px 0}
.story-copy{min-width:0;max-width:48ch;padding-top:0}
.story-copy h2{max-width:20ch}
.story-copy h3{font-size:20px;font-weight:550;line-height:1.3;letter-spacing:-.02em}
.story-copy p{font-size:16px;color:var(--secondary);margin-top:24px;line-height:1.65}
.story-copy p+p{margin-top:16px}
.story-copy .feature-qualification{font-size:12px;color:var(--muted)}
.story-visual{min-width:0}
.product-story--reverse .story-copy{grid-column:2;grid-row:1}
.product-story--reverse .story-visual{grid-column:1;grid-row:1}
.story-chart{min-width:0;margin:0;border:1px solid var(--rule);background:var(--surface);font-size:13px;font-variant-numeric:tabular-nums}
.story-chart-header{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:58px;padding:14px 16px;border-bottom:1px solid var(--rule)}
.story-chart-header strong{font-size:14px;font-weight:600}
.story-chart-header>span{font-size:11px;color:var(--muted);white-space:nowrap}
.story-chart-body{padding:24px 16px 16px}
.story-chart-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:24px}
.story-chart-summary>div+div{text-align:right}
.story-chart-summary span{display:block;font-size:11px;line-height:1.5;color:var(--muted)}
.story-chart-summary strong{display:block;font-size:28px;line-height:1.3;font-weight:600;letter-spacing:-.025em;margin-top:6px}
.story-chart-summary small{font-size:12px;letter-spacing:0;color:var(--secondary);font-weight:400}
.story-chart-legend{display:flex;flex-wrap:wrap;gap:16px;font-size:11px;line-height:1.5;color:var(--secondary);margin-bottom:20px}
.story-chart-legend span{display:inline-flex;align-items:center;gap:8px}
.story-chart-legend i{display:block;width:16px;height:2px;background:var(--chart-1)}
.story-chart-legend .story-key-sales{height:8px;opacity:.72}
.story-chart-legend .story-key-inbound{background:var(--chart-2)}
.story-chart-grid{display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px}
.story-chart-y{display:flex;height:176px;flex-direction:column;justify-content:space-between;text-align:right;font-size:11px;line-height:1;color:var(--chart-axis)}
.story-chart-y span:first-child{transform:translateY(-50%)}
.story-chart-y span:last-child{transform:translateY(50%)}
.story-chart-plot{min-width:0}
.story-chart-plot svg{display:block;width:100%;height:176px;overflow:visible}
.story-chart-plot path{vector-effect:non-scaling-stroke}
.story-grid-lines{fill:none;stroke:var(--chart-grid);stroke-width:1}
.story-sales-bars{fill:var(--chart-1);fill-opacity:.72}
.story-chart [data-grow-bar]{transform-box:fill-box;transform-origin:center bottom}
.story-available-line,.story-inbound-line{fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.story-available-line{stroke:var(--chart-1)}
.story-inbound-line{stroke:var(--chart-2)}
.story-available-point{fill:var(--chart-1)}
.story-chart-x{display:flex;justify-content:space-between;gap:8px;font-size:11px;line-height:1.5;color:var(--chart-axis);margin-top:12px}
.story-chart-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;border-top:1px solid var(--rule);padding-top:16px;margin-top:20px;font-size:11px;color:var(--muted)}
.story-chart-foot strong{font-size:13px;font-weight:550;color:var(--ink);text-align:right}
.story-chart-foot>span:last-child{grid-column:1/-1}
.story-chart figcaption{padding:12px 16px;border-top:1px solid var(--rule);font-size:11px;line-height:1.6;color:var(--muted)}
@media(min-width:901px) and (min-height:700px){.product-story .story-copy{position:sticky;top:112px}}
@media(max-width:900px){.product-story{grid-template-columns:minmax(0,1fr);gap:32px}.product-story--reverse .story-copy,.product-story--reverse .story-visual{grid-column:auto;grid-row:auto}.story-visual{max-width:680px}.story-copy{max-width:58ch}.story-copy h2{max-width:none}}
@media(max-width:760px){.product-story{padding:40px 0;gap:24px}.story-copy p{margin-top:16px}.story-chart-header{padding:14px 12px}.story-chart-header strong{font-size:13px}.story-chart-body{padding:20px 12px 16px}.story-chart-summary{gap:12px}.story-chart-summary strong{font-size:25px}.story-chart-summary small{display:block;margin-top:2px}.story-chart figcaption{padding:12px}}
@media(max-width:380px){.story-chart-summary strong{font-size:23px}.story-chart-grid{grid-template-columns:32px minmax(0,1fr);gap:8px}.story-chart-foot{column-gap:8px}.story-chart-foot strong{font-size:12px}}

.feature-overview.restored-features{padding-top:0;border-top:0}
/* Each story keeps its interpretation and chart together through three views. */
.product-copy-track{min-width:0;align-self:stretch}
.product-chart-track{min-width:0}
.product-chart-track.is-scroll-story{height:var(--product-track-height)}
.product-chart-track.is-scroll-story .story-chart{position:sticky;top:var(--product-pin-top,112px)}
.product-story--reverse .product-copy-track{grid-column:2;grid-row:1}
.product-story--reverse .product-chart-track{grid-column:1;grid-row:1}
.product-story .story-copy{max-width:none}
.product-story .story-copy h2{font-size:32px;line-height:1.2}
.product-analysis{margin-top:28px;border:1px solid var(--rule);background:var(--surface)}
.product-analysis-header{padding:14px 16px;border-bottom:1px solid var(--rule)}
.product-analysis-header strong{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:14px;font-weight:600}
.product-analysis-body{padding:16px;min-height:250px}
.product-analysis-body p{font-size:14px;line-height:1.65;margin:0;color:var(--ink)}
@media(min-width:1800px) and (min-height:1000px){.product-analysis-body p{font-size:16px}}
.product-analysis-body p+p{margin-top:10px}
.product-view-label{font-size:16px;font-weight:550;line-height:1.4;letter-spacing:0;margin-bottom:18px}
.product-story .story-chart-body{padding:18px 16px 16px}
.product-story .story-chart-summary{margin-bottom:20px}
.product-story .story-chart-legend{margin-bottom:16px}
.product-story [data-product-footer]{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:18px;padding-top:14px}
.product-story [data-product-footer] span{display:block}
.product-story [data-product-footer] strong{display:block;font-size:16px;line-height:1.5;margin-top:4px;text-align:left}
.product-story [data-product-footer]>div:last-child{text-align:right}
.product-story [data-product-footer]>div:last-child strong{text-align:right}
.story-chart .share-steps button{display:grid;place-items:center;min-width:44px;width:44px;min-height:44px;padding:0;border:0;background:none;color:var(--muted)}
.story-chart .share-steps button[aria-pressed=true]{color:var(--orange)}
.story-chart .share-steps button:hover{color:var(--ink)}
@media(min-width:901px){.product-copy-track>.story-copy{position:sticky;top:var(--product-pin-top,112px)}}
@media(max-width:900px){
 .product-story--reverse .product-copy-track,.product-story--reverse .product-chart-track{grid-column:auto;grid-row:auto}
 .product-copy-track>.story-copy{position:static}
 .product-analysis-body{min-height:0}
}
@media(max-width:760px){.product-story .story-copy h2{font-size:28px}.product-analysis{margin-top:24px}.product-story .story-chart-body{padding:16px 12px}}
.product-story{scroll-margin-top:113px}
@media(max-width:760px){
 .product-story{scroll-margin-top:100px}
 .product-story .story-chart-header{min-height:46px;padding:10px 12px}
 .product-story .story-chart-body{padding:12px}
 .product-story .product-view-label{margin-bottom:12px}
 .product-story .story-chart-summary{margin-bottom:12px}
 .product-story .story-chart-legend{margin-bottom:12px}
 .product-story .story-chart-y,.product-story .story-chart-plot svg{height:128px}
 .product-story [data-product-footer]{margin-top:12px;padding-top:10px}
 .product-story [data-product-footer] strong{font-size:14px}
}
@media(max-width:760px) and (max-height:700px){.product-story .story-chart-y,.product-story .story-chart-plot svg{height:104px}}
.story-chart .share-steps button[aria-pressed=true]:hover{color:var(--orange)}
/* Short desktop windows need the same compact chrome as a phone, not smaller type. */
@media(min-width:761px) and (max-height:760px){
 .product-story .story-chart-header{min-height:46px;padding:10px 16px}
 .product-story .story-chart-body{padding:12px 16px}
 .product-story .product-view-label{margin-bottom:12px}
 .product-story .story-chart-summary{margin-bottom:12px}
 .product-story .story-chart-legend{margin-bottom:12px}
 .product-story [data-product-footer]{margin-top:12px;padding-top:10px}
}
.product-story .story-chart-y,.product-story .story-chart-plot svg{height:var(--story-plot-height,176px)}
.product-story.is-copy-static .product-copy-track>.story-copy{position:static}
.story-chart-grid--dual{grid-template-columns:36px minmax(0,1fr) 36px}
.story-chart-y--units{text-align:left;color:var(--chart-4)}
.story-chart-legend .story-key-units{background:var(--chart-4)}
.story-units-line{fill:none;stroke:var(--chart-4);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:380px){.story-chart-grid--dual{grid-template-columns:32px minmax(0,1fr) 32px;gap:6px}}