/* Scroll story preview: uses the same ThryveMS dashboard visual language as
   the approved product hero. Scope every rule to the story preview only. */
.system .product-sticky{top:112px;min-width:0}
.story-browser.product-hero-browser{
  border-radius:20px;transform:none;
  box-shadow:0 28px 65px rgba(0,0,0,.20);
}
.story-browser.product-hero-browser:hover{transform:none}
.story-browser-chrome{color:#637a70}
.story-browser-app.product-hero-ui{
  height:550px;
  grid-template-columns:135px minmax(0,1fr);
}
.story-browser-sidebar.product-hero-sidebar{
  padding:20px 12px;gap:0;min-width:0;
}
.story-browser-sidebar.product-hero-sidebar img{
  width:100px;height:35px;margin-bottom:20px;object-fit:contain;
}
.story-browser-sidebar .demo-nav{
  display:flex;flex-direction:column;gap:5px;
}
.story-browser-sidebar .demo-nav span{
  display:block;padding:10px 10px;border-radius:8px;
  font:600 10px/1.35 Inter,system-ui,sans-serif;
  color:rgba(255,255,255,.76);opacity:1;
}
.story-browser-sidebar .demo-nav span.active{
  background:rgba(255,255,255,.17);color:#fff;font-weight:700;
}
.story-browser-main.demo-main.product-hero-screen{
  padding:22px 18px 18px;
  display:flex;flex-direction:column;min-height:0;
  color:#163d30;background:#f6f8f6;
}
.story-browser-meta{
  font:700 9px/1.3 Montserrat,system-ui,sans-serif;
  letter-spacing:.12em;color:#728b80;
}
.story-browser-heading.demo-top{
  margin:15px 0 13px;gap:12px;align-items:center;
}
.story-browser-heading.demo-top h4{
  font:700 clamp(14px,1.45vw,18px)/1.2 Montserrat,system-ui,sans-serif;
  color:#163d30;margin:0;letter-spacing:-.03em;
}
.story-browser-heading .demo-pill{
  padding:0;border:0;background:transparent;border-radius:0;
  font:500 10px/1.4 Inter,system-ui,sans-serif;color:#71877b;
  text-align:right;white-space:nowrap;
}
.story-screen-content{
  position:relative;flex:1;min-height:0;
}
.story-screen-panel.demo-panel{
  position:absolute;inset:0;left:0;top:0;right:0;bottom:0;
  margin:0;padding:0;overflow:hidden;
  display:none;opacity:1;transform:none;
  transition:none;
}
.story-screen-panel.demo-panel.active{
  display:block;animation:story-panel-in .28s ease both;
}
@keyframes story-panel-in{
  from{opacity:.25;transform:translateY(9px)}
  to{opacity:1;transform:none}
}
.story-browser-caption{
  text-align:right;color:rgba(255,255,255,.7);
  font:500 10px/1.5 Inter,system-ui,sans-serif;
  margin:11px 5px 0;
}
.story-readiness.product-hero-readiness{
  min-height:157px;padding:18px 17px;
  grid-template-columns:1fr 1.15fr;gap:14px;
  border-radius:13px;
}
.story-readiness.product-hero-readiness strong{
  font-size:52px;margin:10px 0 5px;
}
.story-readiness .hero-bars{gap:4px}
.story-metrics.product-hero-metrics{
  gap:10px;margin-top:10px;
}
.story-metrics.product-hero-metrics>div{
  border-radius:11px;padding:14px 11px;min-height:80px;
}
.story-metrics.product-hero-metrics strong{
  font-size:25px;margin-top:5px;
}
.story-attention.product-hero-activity{
  margin-top:10px;border-radius:11px;
  padding:14px 16px;
}
.story-attention.product-hero-activity>div{margin-bottom:8px}
.story-attention.product-hero-activity p{padding:9px 0}
.story-content-card{
  background:#fff;border:1px solid #e3eae5;border-radius:12px;
  padding:14px 16px;color:#163d30;
}
.story-card-heading{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:9px;
}
.story-card-heading strong{font:700 12px/1.4 Montserrat,system-ui,sans-serif}
.story-card-heading>span{font:500 9px Inter,system-ui,sans-serif;color:#73897b}
.story-record{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;min-height:57px;padding:9px 0;
  border-top:1px solid #edf1ed;
}
.story-record>span:first-child{min-width:0;overflow-wrap:anywhere}
.story-record strong{
  display:block;font:600 11px/1.4 Inter,system-ui,sans-serif;
}
.story-record small{
  display:block;font:500 9px/1.5 Inter,system-ui,sans-serif;color:#73897b;
  margin-top:3px;
}
.story-status{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;border-radius:7px;padding:5px 8px;
  font:700 9px/1.4 Inter,system-ui,sans-serif;white-space:nowrap;
}
.story-status.warning{background:#fff2d5;color:#845f1d}
.story-status.good{background:#e9f4ed;color:#316c4d}
.story-status.neutral{background:#edf1ee;color:#647a6d}
.story-status.danger{background:#fce9e6;color:#9a4c42}
.story-document-summary{
  display:flex;justify-content:space-between;align-items:center;
  background:#fff;border:1px solid #e3eae5;
  border-radius:11px;padding:13px 16px;margin-bottom:10px;
}
.story-document-summary small,.story-audit-summary small,.story-action-summary small{
  display:block;font:500 9px Inter,system-ui,sans-serif;color:#6e8577;
}
.story-document-summary strong,.story-audit-summary strong,.story-action-summary strong{
  display:block;font:700 25px Montserrat,system-ui,sans-serif;
  letter-spacing:-.035em;margin-top:4px;
}
.story-document-list,.story-actions-card{padding-bottom:9px}
.story-detail-note{
  margin-top:10px;font:500 10px/1.5 Inter,system-ui,sans-serif;color:#658174;
}
.story-audit-summary,.story-action-summary{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;margin-bottom:10px;
}
.story-audit-summary>div,.story-action-summary>div{
  background:#fff;border:1px solid #e3eae5;border-radius:11px;
  padding:12px 11px;min-width:0;
}
.story-audit-card{padding-bottom:14px}
.story-audit-calendar{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:5px;margin-top:12px;
}
.story-audit-calendar>span{
  font:600 8px Inter,system-ui,sans-serif;
  color:#6d8477;text-align:center;padding:5px 0;
}
.story-audit-calendar i{
  min-height:30px;display:grid;place-items:center;
  font:500 10px Inter,system-ui,sans-serif;font-style:normal;
  border-radius:7px;background:#f1f5f2;color:#36584b;
}
.story-audit-calendar i.audit-day{
  background:#d6e8dc;color:#13543a;
  box-shadow:inset 0 0 0 1px #8eba9c;font-weight:700;
}
.story-actions-card .story-record{min-height:60px}
@media(max-width:1100px){
  .system .product-sticky{position:relative;top:auto}
  .story-browser-app.product-hero-ui{height:510px}
}
@media(max-width:760px){
  .story-browser.product-hero-browser{border-radius:14px}
  .story-browser-chrome.product-hero-chrome{height:35px;padding:0 9px;font-size:8px}
  .story-browser-app.product-hero-ui{
    grid-template-columns:76px minmax(0,1fr);
    height:415px;
  }
  .story-browser-sidebar.product-hero-sidebar{padding:11px 5px}
  .story-browser-sidebar.product-hero-sidebar img{
    width:64px;height:24px;margin-bottom:12px;
  }
  .story-browser-sidebar .demo-nav{gap:3px}
  .story-browser-sidebar .demo-nav span{
    padding:7px 5px;font-size:7px;border-radius:5px;
  }
  .story-browser-main.demo-main.product-hero-screen{padding:11px 9px}
  .story-browser-meta{font-size:6px;letter-spacing:.04em}
  .story-browser-heading.demo-top{margin:9px 0 10px;gap:4px}
  .story-browser-heading.demo-top h4{font-size:11px}
  .story-browser-heading .demo-pill{font-size:7px}
  .story-readiness.product-hero-readiness{
    padding:9px;min-height:105px;gap:6px;
  }
  .story-readiness.product-hero-readiness strong{font-size:31px;margin:5px 0}
  .story-readiness.product-hero-readiness small{font-size:7px}
  .story-readiness .hero-attention{font-size:6px;padding:4px}
  .story-metrics.product-hero-metrics{gap:5px;margin-top:7px}
  .story-metrics.product-hero-metrics>div{min-height:62px;padding:8px 5px}
  .story-metrics.product-hero-metrics small{font-size:7px}
  .story-metrics.product-hero-metrics strong{font-size:18px}
  .story-attention.product-hero-activity{padding:9px;margin-top:7px}
  .story-attention.product-hero-activity>div{font-size:8px}
  .story-attention.product-hero-activity p{font-size:7px;padding:8px 0}
  .story-content-card{padding:10px 9px}
  .story-card-heading{gap:5px}
  .story-card-heading strong{font-size:9px}
  .story-card-heading>span{font-size:7px}
  .story-record{gap:5px;min-height:56px;padding:7px 0}
  .story-record strong{font-size:8px}
  .story-record small{font-size:7px}
  .story-status{font-size:6px;padding:4px 5px;border-radius:5px}
  .story-document-summary{padding:8px;margin-bottom:7px}
  .story-document-summary strong,.story-audit-summary strong,.story-action-summary strong{font-size:19px}
  .story-document-summary small,.story-audit-summary small,.story-action-summary small{font-size:7px}
  .story-audit-summary,.story-action-summary{gap:5px;margin-bottom:7px}
  .story-audit-summary>div,.story-action-summary>div{padding:7px 5px}
  .story-audit-calendar{gap:3px;margin-top:8px}
  .story-audit-calendar>span{font-size:6px}
  .story-audit-calendar i{min-height:26px;font-size:8px;border-radius:5px}
  .story-detail-note{font-size:8px;margin-top:7px}
  .story-browser-caption{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .story-screen-panel.demo-panel{transition:none;transform:none}
}
/* Leave room for the final action stage to remain in its sticky reading position. */
@media(min-width:1101px){
  .system-scroll .story-list{padding-bottom:480px}
}
@media(prefers-reduced-motion:reduce){
  .story-screen-panel.demo-panel.active{animation:none}
}