/* TaskerArmy Hybrid palette.
   Core identity: midnight 0D2533 / Tasker blue 175676 / electric sky 4BA3C3 / ice CCE6F4.
   Shared engineering signal: CCFF00. Commercial punch: D62839. Canvas: F8FBFC.
   Dark chapters use restrained cool-metal light, never glow behind reading copy. */

:root{
  color-scheme:dark;
  --brand:#4BA3C3!important;
  --brand-hover:#CCE6F4!important;
  --brand-contrast:#0D2533!important;
  --info:#CCE6F4!important;
  --success:#CCFF00!important;
  --focus:#4BA3C3!important;
  --bg:#0D2533!important;
  --surface:#102F40!important;
  --surface2:#123B50!important;
  --surface3:#175676!important;
  --panel:var(--surface)!important;
  --panel-2:var(--surface2)!important;
  --line:#2B6178!important;
  --line2:#4BA3C3!important;
  --text:#F8FBFC!important;
  --muted:#CCE6F4!important;
  --muted2:#A6CBDC!important;
  --accent:#FF6A78!important;
  --accent-soft:color-mix(in srgb,#D62839 18%,transparent)!important;
  --signal:#CCFF00!important;
  --signal-contrast:#0D2533!important;
  --punch:#FF6A78!important;
  --punch-source:#D62839!important;
  --chapter-base:#0D2533!important;
  --chapter-soft:#102F40!important;
  --chapter-ice:#123B50!important;
  --chapter-deep:#175676!important;
  --chapter-midnight:#081B26!important;
  --chapter-paper:#0D2533!important;
  --metal-highlight:color-mix(in srgb,#CCE6F4 15%,transparent)!important;
  --metal-sky:color-mix(in srgb,#4BA3C3 18%,transparent)!important;
  --metal-shadow:color-mix(in srgb,#06131C 34%,transparent)!important;
  --shadow:0 24px 70px color-mix(in srgb,#06131C 62%,transparent)!important;
  --product-bg:#081B26!important;
  --product-surface:#0D2A38!important;
  --product-surface2:#123B50!important;
  --product-line:#2B6178!important;
  --product-text:#F8FBFC!important;
  --product-muted:#CCE6F4!important;
  --product-brand:#4BA3C3!important;
  --product-success:#CCFF00!important;
  --warning:#FFD166!important;
  --danger:#FF6A78!important;
}

html[data-theme="light"]{
  color-scheme:light;
  --brand:#175676!important;
  --brand-hover:#0D2533!important;
  --brand-contrast:#FFFFFF!important;
  --info:#175676!important;
  --success:#286A50!important;
  --focus:#175676!important;
  --bg:#F8FBFC!important;
  --surface:#FFFFFF!important;
  --surface2:#EAF6FB!important;
  --surface3:#CCE6F4!important;
  --panel:var(--surface)!important;
  --panel-2:var(--surface2)!important;
  --line:#C6DDE8!important;
  --line2:#7DB4CB!important;
  --text:#0D2533!important;
  --muted:#466475!important;
  --muted2:#5B7180!important;
  --accent:#D62839!important;
  --accent-soft:color-mix(in srgb,#D62839 10%,transparent)!important;
  --signal:#CCFF00!important;
  --signal-contrast:#0D2533!important;
  --punch:#D62839!important;
  --punch-source:#D62839!important;
  --chapter-base:#F8FBFC!important;
  --chapter-soft:#EAF6FB!important;
  --chapter-ice:#CCE6F4!important;
  --chapter-deep:#175676!important;
  --chapter-midnight:#0D2533!important;
  --chapter-paper:#FFFFFF!important;
  --metal-highlight:color-mix(in srgb,#CCE6F4 18%,transparent)!important;
  --metal-sky:color-mix(in srgb,#4BA3C3 17%,transparent)!important;
  --metal-shadow:color-mix(in srgb,#0D2533 22%,transparent)!important;
  --shadow:0 24px 60px color-mix(in srgb,#0D2533 10%,transparent)!important;
  --warning:#8B5A00!important;
  --danger:#A5142C!important;
}

:root{
  --green:var(--success)!important;
  --green2:var(--signal)!important;
  --blue:var(--brand)!important;
  --amber:var(--warning)!important;
  --red:var(--danger)!important;
}

/* Primary interaction is Tasker blue. Crimson is reserved for controlled commercial emphasis. */
.theme-option[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--line2)!important}
.button.primary{box-shadow:0 10px 28px color-mix(in srgb,var(--brand) 24%,transparent)!important}
.editorial-hero .dot{background:var(--punch)!important}
.savings-result strong{color:var(--punch)!important}

/* Keep the main CTA above the fold on common laptop viewports without shrinking the product demo. */
body[data-editorial-family="home"] .editorial-hero{padding-block:clamp(46px,5.6vw,78px)!important}
body[data-editorial-family="home"] .editorial-hero h1{font-size:clamp(48px,5.8vw,78px)!important;line-height:.95!important}
body[data-editorial-family="home"] .editorial-hero .lead{margin-top:22px!important;font-size:clamp(17px,1.55vw,20px)!important;line-height:1.55!important}
body[data-editorial-family="home"] .editorial-hero .cta-row{margin-top:24px!important}
body[data-editorial-family="home"] .editorial-hero .hero-reassurance{margin-top:14px!important}

/* Full-width narrative chapters. The statement is full shell width so its 100vw field cannot drift. */
body[data-editorial-family="home"] .editorial-statement{max-width:none!important}
body[data-editorial-family="home"] .editorial-statement,
body[data-editorial-family="home"] .brand-promise,
body[data-editorial-family="home"] .editorial-requests,
body[data-editorial-family="home"] .editorial-workflow,
body[data-editorial-family="home"] .editorial-human{
  position:relative;
  isolation:isolate;
}
body[data-editorial-family="home"] .editorial-statement::before,
body[data-editorial-family="home"] .brand-promise::before,
body[data-editorial-family="home"] .editorial-requests::before,
body[data-editorial-family="home"] .editorial-workflow::before,
body[data-editorial-family="home"] .editorial-human::before{
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  min-width:100vw;
  transform:translateX(-50%);
  content:"";
}
body[data-editorial-family="home"] .editorial-statement::before{background:var(--chapter-ice)}
body[data-editorial-family="home"] .brand-promise::before{
  background:
    radial-gradient(ellipse 72% 52% at 84% 4%,var(--metal-highlight),transparent 64%),
    linear-gradient(122deg,var(--chapter-deep) 0%,color-mix(in srgb,var(--chapter-deep) 88%,#4BA3C3) 54%,var(--chapter-deep) 100%);
}
body[data-editorial-family="home"] .editorial-requests::before{background:var(--chapter-paper)}
body[data-editorial-family="home"] .editorial-workflow::before{
  background:
    radial-gradient(ellipse 64% 42% at 78% 7%,var(--metal-sky),transparent 68%),
    radial-gradient(ellipse 45% 34% at 8% 92%,var(--metal-shadow),transparent 72%),
    linear-gradient(128deg,var(--chapter-midnight),color-mix(in srgb,var(--chapter-midnight) 86%,#175676) 56%,var(--chapter-midnight));
}
body[data-editorial-family="home"] .editorial-human::before{background:var(--chapter-soft)}

/* Avoid the duplicated horizontal rule before the first merchant example. */
body[data-editorial-family="home"] .editorial-request:first-of-type{border-top:0!important}

/* Deep chapters use their own readable local token set in both appearance modes. */
body[data-editorial-family="home"] .brand-promise,
body[data-editorial-family="home"] .editorial-workflow{
  --text:#F8FBFC!important;
  --muted:#CCE6F4!important;
  --muted2:#A6CBDC!important;
  --brand:#4BA3C3!important;
  --brand-hover:#CCE6F4!important;
  --brand-contrast:#0D2533!important;
  --line:#4B8199!important;
  --line2:#75B4CC!important;
  --editorial-rule:var(--line)!important;
  --editorial-rule-strong:var(--line2)!important;
}

/* The rest of the homepage alternates quieter chapters after the product story. */
body[data-editorial-family="home"] .section.alt{background:var(--chapter-soft)!important}
body[data-editorial-family="home"] .savings-section{background:var(--chapter-ice)!important}
body[data-editorial-family="home"] .section:has(.trust-grid),
body[data-editorial-family="home"] .section:has(.merchant-proof-grid){background:var(--chapter-paper)!important}
body[data-editorial-family="home"] .merchant-final{
  --text:#F8FBFC!important;
  --muted:#CCE6F4!important;
  --muted2:#A6CBDC!important;
  --brand:#4BA3C3!important;
  --brand-hover:#CCE6F4!important;
  --brand-contrast:#0D2533!important;
  background:
    radial-gradient(ellipse 58% 72% at 86% 0%,var(--metal-highlight),transparent 68%),
    linear-gradient(120deg,var(--chapter-deep),color-mix(in srgb,var(--chapter-deep) 90%,#4BA3C3))!important;
}

/* Buttons inside locally-dark chapters must not inherit Light surface fills. */
body[data-editorial-family="home"] .brand-promise .button.primary,
body[data-editorial-family="home"] .editorial-workflow .button.primary,
body[data-editorial-family="home"] .merchant-final .button.primary,
body[data-editorial-family]:not([data-editorial-family="home"]) .final-cta .button.primary{
  border-color:#4BA3C3!important;
  background:#4BA3C3!important;
  color:#0D2533!important;
}
body[data-editorial-family="home"] .brand-promise .button.ghost,
body[data-editorial-family="home"] .editorial-workflow .button.ghost,
body[data-editorial-family="home"] .merchant-final .button.ghost,
body[data-editorial-family]:not([data-editorial-family="home"]) .final-cta .button.ghost{
  border-color:#75B4CC!important;
  background:transparent!important;
  color:#F8FBFC!important;
  box-shadow:none!important;
}
body[data-editorial-family="home"] .merchant-final .button.ghost:hover,
body[data-editorial-family="home"] .merchant-final .button.ghost:focus-visible,
body[data-editorial-family]:not([data-editorial-family="home"]) .final-cta .button.ghost:hover,
body[data-editorial-family]:not([data-editorial-family="home"]) .final-cta .button.ghost:focus-visible{
  border-color:#CCE6F4!important;
  background:color-mix(in srgb,#CCE6F4 10%,transparent)!important;
  color:#FFFFFF!important;
}

/* Interior pages use the same hierarchy without turning every page into a striped landing page. */
body[data-editorial-family]:not([data-editorial-family="home"]) .hero{
  background:color-mix(in srgb,var(--chapter-ice) 72%,var(--chapter-base))!important;
}
body[data-editorial-family]:not([data-editorial-family="home"]) .section.alt{
  background:var(--chapter-soft)!important;
}
body[data-editorial-family]:not([data-editorial-family="home"]) .final-cta{
  --text:#F8FBFC!important;
  --muted:#CCE6F4!important;
  --muted2:#A6CBDC!important;
  --brand:#4BA3C3!important;
  --brand-hover:#CCE6F4!important;
  --brand-contrast:#0D2533!important;
  background:
    radial-gradient(ellipse 60% 70% at 88% 0%,var(--metal-highlight),transparent 68%),
    linear-gradient(122deg,var(--chapter-deep),color-mix(in srgb,var(--chapter-deep) 90%,#4BA3C3))!important;
}

/* In Dark, even the global canvas gets a restrained metallic falloff at the top. */
html:not([data-theme="light"]) body[data-editorial-family] .hero{
  background:
    radial-gradient(ellipse 58% 46% at 82% 0%,var(--metal-sky),transparent 70%),
    linear-gradient(125deg,var(--chapter-base),color-mix(in srgb,var(--chapter-base) 92%,#175676))!important;
}

/* Footer becomes a premium blue identity anchor with a low-intensity metallic edge light. */
.footer{
  --text:#F8FBFC!important;
  --muted:#CCE6F4!important;
  --muted2:#A6CBDC!important;
  --brand:#4BA3C3!important;
  --brand-hover:#CCE6F4!important;
  --brand-contrast:#0D2533!important;
  --line:#3D7188!important;
  --line2:#4BA3C3!important;
  background:
    radial-gradient(ellipse 55% 70% at 84% 0%,color-mix(in srgb,#4BA3C3 12%,transparent),transparent 70%),
    #0D2533!important;
  color:#F8FBFC!important;
}
.footer a,.footer h2,.footer strong{color:var(--text)!important}
.footer p,.footer small{color:var(--muted)!important}
.footer a:hover,.footer a:focus-visible{color:#CCE6F4!important}

/* Signal Lime is a status signal, not a generic brand wash. */
.demo-browser-bar small,
.demo-result span,
.mock-seo-row b,
.mock-search-result small,
.workflow-preview-badge{
  color:var(--product-success)!important;
}
.mock-sticky-atc b{
  background:var(--product-success)!important;
  color:var(--signal-contrast)!important;
}
.preview-change i{background:var(--signal)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 18%,transparent)}

@media(prefers-reduced-motion:reduce){
  .button.primary{box-shadow:none!important}
}

@media(prefers-contrast:more){
  :root{
    --line:#5B8FA5!important;
    --line2:#73BDD7!important;
    --muted:#E4F3FA!important;
    --muted2:#CCE6F4!important;
  }
  html[data-theme="light"]{
    --line:#91B8CA!important;
    --line2:#175676!important;
    --muted:#315363!important;
    --muted2:#405B6A!important;
  }
  body[data-editorial-family="home"] .brand-promise::before,
  body[data-editorial-family="home"] .editorial-workflow::before,
  body[data-editorial-family="home"] .merchant-final,
  body[data-editorial-family]:not([data-editorial-family="home"]) .final-cta,
  .footer{background-image:none!important}
}