/* Final TaskerArmy Hybrid polish.
   Keeps the approved editorial layout while tightening product frames, hierarchy and motion. */

/* The command separator and browser frame were drawing the same edge twice. */
body[data-editorial-family="home"] .editorial-hero-demo .demo-command{border-bottom:0!important}

/* Execution previews close around the actual example instead of leaving a dead screenshot tail.
   Scenarios retain explicit frame heights because the scenes are absolutely positioned, but the
   frame now matches the rendered content much more tightly and centers shorter examples. */
body[data-editorial-family="home"] .editorial-hero-demo{--demo-frame-height:306px}
body[data-editorial-family="home"] .editorial-hero-demo[data-demo-scenario="cleanup"]{--demo-frame-height:240px}
body[data-editorial-family="home"] .editorial-hero-demo[data-demo-scenario="seo"]{--demo-frame-height:262px}
body[data-editorial-family="home"] .demo-scenes{height:var(--demo-frame-height)!important;min-height:0!important;transition:height .32s ease}
body[data-editorial-family="home"] .demo-scene{align-items:center!important;padding-top:14px!important;padding-bottom:14px!important}
body[data-editorial-family="home"] .demo-scene .mock-store,
body[data-editorial-family="home"] .demo-scene .mock-code,
body[data-editorial-family="home"] .demo-scene .mock-collection{width:100%;box-sizing:border-box;align-self:center!important}
body[data-editorial-family="home"] .editorial-workflow-visual{min-height:0!important}
body[data-editorial-family="home"] .workflow-store{height:auto!important;min-height:0!important}

/* Give the medium-blue promise chapter a quiet architectural texture in the outside right gutter. */
body[data-editorial-family="home"] .brand-promise::before{z-index:-2!important}
body[data-editorial-family="home"] .brand-promise::after{
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:calc(50% + min(33vw,460px));
  right:calc(50% - 50vw);
  content:"";
  pointer-events:none;
  opacity:.62;
  background:repeating-linear-gradient(135deg,transparent 0 18px,color-mix(in srgb,var(--text) 8%,transparent) 18px 19px,transparent 19px 38px);
  -webkit-mask-image:linear-gradient(to right,transparent,black 26%,black 100%);
  mask-image:linear-gradient(to right,transparent,black 26%,black 100%);
}

/* The former home-story bottom padding exposed the parent background below the human chapter. */
body[data-editorial-family="home"] .editorial-home-story{padding-bottom:0!important}
body[data-editorial-family="home"] .editorial-human{padding-bottom:clamp(86px,11vw,156px)!important}

/* Pricing remains editorial, but gives the recommended Growth plan a gentle visual pulse. */
body[data-editorial-family="home"] .pricing-preview-paid>a{position:relative;transition:transform .24s ease,background-color .24s ease,box-shadow .24s ease}
body[data-editorial-family="home"] .pricing-preview-paid>a:hover,
body[data-editorial-family="home"] .pricing-preview-paid>a:focus-visible{z-index:2;transform:translateY(-4px);background:color-mix(in srgb,var(--brand) 5%,transparent)!important}
body[data-editorial-family="home"] .pricing-preview-paid>a:nth-child(2){background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 8%,transparent),transparent 68%)!important}
body[data-editorial-family="home"] .pricing-preview-paid>a:nth-child(2)::before{
  position:absolute;
  top:-13px;
  left:28px;
  padding:5px 9px;
  border-radius:999px;
  background:var(--signal);
  color:var(--signal-contrast);
  content:"Recommended";
  font-size:9px;
  font-weight:850;
  letter-spacing:.09em;
  line-height:1;
  text-transform:uppercase;
  box-shadow:0 7px 22px color-mix(in srgb,var(--signal) 16%,transparent);
}
body[data-editorial-family="home"] .pricing-preview-paid>a:nth-child(2) strong{animation:pricing-emphasis 6.4s ease-in-out infinite}
@keyframes pricing-emphasis{0%,78%,100%{transform:translateY(0)}86%{transform:translateY(-3px)}92%{transform:translateY(0)}}

/* Savings are a positive outcome, never an error-red signal. */
html[data-theme="light"] body[data-editorial-family="home"] .savings-result strong{color:var(--text)!important}
html:not([data-theme="light"]) body[data-editorial-family="home"] .savings-result strong{color:var(--signal)!important}
body[data-editorial-family="home"] .savings-result span{color:var(--text)!important;font-weight:700}

/* Light mode gets material depth too, without putting glow behind the reading column. */
html[data-theme="light"] body[data-editorial-family="home"] .editorial-hero{
  background:
    radial-gradient(ellipse 54% 48% at 86% 3%,color-mix(in srgb,var(--brand) 13%,transparent),transparent 72%),
    radial-gradient(ellipse 34% 30% at 68% 22%,color-mix(in srgb,var(--surface3) 58%,transparent),transparent 75%),
    var(--chapter-base)!important;
}
html[data-theme="light"] body[data-editorial-family="home"] .editorial-statement::before{
  background:
    radial-gradient(ellipse 52% 64% at 92% 20%,color-mix(in srgb,var(--brand) 11%,transparent),transparent 72%),
    var(--chapter-ice)!important;
}
html[data-theme="light"] body[data-editorial-family="home"] .savings-section{
  background:
    radial-gradient(ellipse 48% 70% at 92% 12%,color-mix(in srgb,var(--brand) 10%,transparent),transparent 74%),
    var(--chapter-ice)!important;
}

@media(max-width:980px){
  body[data-editorial-family="home"] .brand-promise::after{left:72%;opacity:.36}
  body[data-editorial-family="home"] .editorial-workflow-visual{min-height:0!important}
}

@media(max-width:680px){
  body[data-editorial-family="home"] .brand-promise::after{display:none}
  /* Stacked mobile PDP still needs more room, while code/SEO examples close tightly. */
  body[data-editorial-family="home"] .editorial-hero-demo{--demo-frame-height:500px}
  body[data-editorial-family="home"] .editorial-hero-demo[data-demo-scenario="cleanup"]{--demo-frame-height:292px}
  body[data-editorial-family="home"] .editorial-hero-demo[data-demo-scenario="seo"]{--demo-frame-height:304px}
  body[data-editorial-family="home"] .demo-scene{align-items:center!important}
  body[data-editorial-family="home"] .pricing-preview-paid>a:nth-child(2)::before{top:10px;left:auto;right:12px}
}

@media(prefers-reduced-motion:reduce){
  body[data-editorial-family="home"] .demo-scenes{transition:none!important}
  body[data-editorial-family="home"] .pricing-preview-paid>a{transition:none!important}
  body[data-editorial-family="home"] .pricing-preview-paid>a:nth-child(2) strong{animation:none!important}
}

@media(prefers-contrast:more){
  body[data-editorial-family="home"] .brand-promise::after{display:none}
  html[data-theme="light"] body[data-editorial-family="home"] .editorial-hero,
  html[data-theme="light"] body[data-editorial-family="home"] .savings-section{background-image:none!important}
}