/* White/orange content theme - PDF-inspired content below dark heroes.
   Loaded site-wide: homepage dark .hero, subpage dark .phero, white content sections. */
body.wm{background:#fff}
.wm-banner{position:static;z-index:60;background:#1d1d1f;color:#fff;text-align:center;font:600 12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;padding:10px 16px}
.wm-banner a{color:#9cc2ff}

/* White content sections below the hero */
body.wm main > section:not(.hero):not(.phero){
  --text:#1d1d1f; --muted:#44505f; --dim:#5f6b7c;
  --bg:#ffffff; --bg2:#f4f7fc; --card:#ffffff; --line:#d9e2f1; --line-soft:#e6edf8;
  --navy:#174db0;
  --accent:#1d5fd6; --accent-d:#174db0; --accent-2:#2563eb; --on-accent:#ffffff;
  --shadow:0 1px 2px rgba(60,30,10,.05),0 10px 28px rgba(60,30,10,.07);
  --shadow-lg:0 24px 60px -12px rgba(60,30,10,.16);
  background:var(--bg); color:var(--text);
}
body.wm main > section.alt:not(.hero):not(.phero){background:var(--bg2)}
body.wm main > section:not(.hero):not(.phero){padding-top:104px;padding-bottom:104px}

/* Editorial type voice from the PDF theme */
body.wm main > section:not(.hero):not(.phero) .eyebrow,
body.wm main > section:not(.hero):not(.phero) .hero-note,
body.wm main > section:not(.hero):not(.phero) .stage-tag{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.16em; font-weight:700; color:var(--accent); opacity:1;
}
body.wm main > section:not(.hero):not(.phero) h2.h2,
body.wm main > section:not(.hero):not(.phero) .endcta h2{
  font-family:Georgia,'Times New Roman',serif; font-weight:700; letter-spacing:-.015em;
}
body.wm main > section:not(.hero):not(.phero) .lead{color:var(--muted);max-width:640px}

/* Reserve/contact section: warm cream instead of the navy gradient */
body.wm .contact{background:#eef3fb;color:var(--text)}
body.wm .contact .lead{color:var(--muted)}
body.wm .contact .eyebrow{color:var(--accent);opacity:1}
body.wm .contact .fine{color:var(--dim)}
body.wm .contact ul li{color:var(--text)}

/* Calculator teaser keeps its orange panel; soften the bridge on white */
body.wm .cbridge{color:var(--muted)}

/* Footer in the PDF's quiet style */
body.wm footer{
  --text:#1d1d1f; --muted:#44505f; --dim:#5f6b7c; --line-soft:#e6edf8; --accent:#1d5fd6;
  background:#fff;border-top:1px solid var(--line-soft);color:var(--muted);
}
body.wm footer a{color:var(--muted)}
body.wm footer a:hover{color:var(--accent)}

/* Keep the fixed header readable over white once past the hero */
body.wm.scrolled header, body.wm header.hdr-solid{--glass:rgba(255,255,255,.85)}
body.wm .top{top:0}
/* Header: keep dark-hero styling at top, switch to light glass once scrolled */
body.wm .top.scrolled, body.wm-flat .top{
  --text:#1d1d1f; --muted:#44505f; --line-soft:#d9e2f1;
  --card:#ffffff; --bg:#ffffff; --bg2:#f4f7fc; --line:#d9e2f1;
  background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
body.wm .top.scrolled .logo .on-dark, body.wm-flat .top .logo .on-dark{display:none}
body.wm .top.scrolled .logo .on-light, body.wm-flat .top .logo .on-light{display:block}
body.wm .top.scrolled .logo::before, body.wm-flat .top .logo::before{background-image:url('../img/brand/logo-dark.png')}
body.wm footer .foot-logo::before{background-image:url('../img/brand/logo-dark.png')}
body.wm footer .logo::before{background-image:url('../img/brand/logo-dark.png')}

/* Integrations scrolling banner */
#integrations-band{background:#f4f7fc;padding:90px 0 100px;overflow:hidden}
.wm-marquee{overflow:hidden;margin-top:48px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.wm-track{display:flex;gap:26px;width:max-content;animation:wmscroll 26s linear infinite;padding:18px 0 26px}
@keyframes wmscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.wm-tile{width:200px;flex:none;background:#fff;border:1px solid #e1e9f5;border-radius:22px;padding:30px 18px 24px;text-align:center;
  box-shadow:0 2px 0 #fff inset,0 18px 34px -14px rgba(29,95,214,.28),0 4px 10px rgba(29,95,214,.08);
  transform:perspective(700px) rotateX(4deg)}
.wm-tile i{display:block;width:64px;height:64px;margin:0 auto 16px;background:#1d5fd6;
  -webkit-mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;
  mask-position:center;mask-size:contain;mask-repeat:no-repeat}
.wm-tile b{font-size:16px;font-weight:800;color:#1d1d1f;letter-spacing:-.01em}
@media (prefers-reduced-motion:reduce){.wm-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}
@media (max-width:640px){.wm-tile{width:160px;padding:22px 12px 18px}.wm-tile i{width:48px;height:48px;margin-bottom:12px}.wm-track{animation-duration:20s}}
body.wm .ao-rue .ao-text p{color:#b4b4bd}
body.wm #addons .ao-grid{grid-template-columns:1fr}
body.wm .sheet{--text:#1d1d1f;--muted:#44505f;--bg:#ffffff;--bg2:#f4f7fc;--card:#ffffff;--line-soft:#d9e2f1;--accent:#1d5fd6;background:#fff}
body.wm .sheet a{color:#1d1d1f;border-bottom-color:#e6edf8}
body.wm .sheet .sheet-label{color:#1d5fd6}

/* Subpage dark heroes: each page keeps its own dark intro above the white content */
body.wm main > section.phero{background:linear-gradient(180deg,rgba(5,6,8,.62) 0%,rgba(5,6,8,.55) 45%,#0a0c11 97%),radial-gradient(48% 42% at 50% 30%,rgba(5,6,8,.45) 0%,rgba(5,6,8,0) 75%),var(--ph-img,linear-gradient(180deg,#050608 0%,#0a0c11 100%)) center 30%/cover no-repeat,#0a0c11;color:#f5f5f7;padding:150px 0 90px}
body.wm main > section.phero .lead{color:#a1a1aa}
body.wm main > section.phero .fine{color:#8a8a93}
@media (max-width:700px){body.wm main > section.phero{padding:120px 0 70px}}

/* Mobile gap fix (features page): the 104px section rhythm is desktop-only. Below 768px the
   screenshot strip and the .ft section each took 104px top+bottom, stacking ~225px of empty
   space between the DASHBOARD caption and the category pills; the sticky filter bar adds 16px more. */
@media (max-width:767px){
  body.wm main > section:not(.hero):not(.phero){padding-top:44px;padding-bottom:44px}
  body.wm main > section.shotstrip:not(.hero):not(.phero){padding-bottom:0}
  body.wm main > section.ft:not(.hero):not(.phero){padding-top:16px}
  .ft-bar{position:static;padding-top:0}
}

/* Semantic titles round 2 (owner-directed 2026-11-01, "Orange title sitewide"): orange = solution/positive titles and labels; problem and calculator stay blue. Light content sections only; dark heroes, dark cards and endcta bands unchanged. */
body.wm:not(.page-calculator) main > section:not(.hero):not(.phero):not(#problem):not(#calc-entry) .eyebrow{color:#ea580c}
body.wm:not(.page-calculator) main > section:not(.hero):not(.phero):not(#problem):not(#calc-entry) h2.h2,
body.wm:not(.page-calculator) main > section:not(.hero):not(.phero):not(#problem):not(#calc-entry) .card h3,
body.wm:not(.page-calculator) main > section:not(.hero):not(.phero):not(#problem):not(#calc-entry) .pp3 .pp b,
body.wm:not(.page-calculator) main > section:not(.hero):not(.phero):not(#problem):not(#calc-entry) .steps4 .st b,
body.wm:not(.page-calculator) main > section:not(.hero):not(.phero):not(#problem):not(#calc-entry) .mx-txt h3{color:#ea580c}
body.wm main > section#problem h2.h2,
body.wm main > section#problem .pp3 .pp b{color:var(--accent)}
body.wm main > section#calc-entry h2.h2{color:var(--accent)}

/* Integrations logo grid (homepage trust card) */
.int-logos{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.int-logos span{width:38px;height:38px;flex:none;border-radius:11px;background:#f4f7fc;border:1px solid #e1e9f5;display:grid;place-items:center}
.int-logos img{width:22px;height:22px;display:block}

/* Semantic titles round 3 (owner-directed "Orange title sitewide", 2026-11-01): positive/solution titles orange in dark contexts too; problem headlines/labels blue. Backgrounds unchanged. */
body.page-index section#aiw .h2{color:#ff8a3d}
.aiw-card h3{color:#ff8a3d}
.int-card h3{color:#ff8a3d}
body.wm main section.ft .ft-cat h3{color:#ea580c}
body.wm main section.ft .ft-h{color:#ea580c}
body.wm main section.ft .ft-h small{color:var(--dim)}
body.wm main section .cs-group{color:#ea580c}
body.wm main section#the-problem .cs-group{color:var(--accent)}
body.wm main section .leak-opener .eyebrow{color:var(--accent)!important}
body.wm main section .leak-h{color:var(--accent)}
.phones figcaption{color:#ea580c}
body.wm main section .qa-q{background:linear-gradient(100deg,var(--text) 40%,#ea580c);-webkit-background-clip:text;background-clip:text;color:transparent}
body.wm main section .cat h3{color:#ea580c}
.int-card h2{color:#ff8a3d}
.int-card .eyebrow{color:#ff8a3d!important}
body.wm:not(.page-calculator) main > section:not(.hero):not(.phero) .row-item{color:#ea580c}
body.wm:not(.page-calculator) main > section:not(.hero):not(.phero):not(#problem):not(#calc-entry) h3{color:#ea580c}
.aiw-card h3, .int-card h3{color:#ff8a3d!important}
body.wm main section .leak-opener h3{color:var(--accent)!important}