/**
 * OpsIQ — the Features page product sections.
 *
 * @package   OpsIQ
 * @author    Nabtech Digitalnet Limited
 * @copyright Copyright (c) 2026 Nabtech Digitalnet Limited. All rights reserved.
 * @license   Proprietary Commercial Licence (see LICENCE)
 *
 * Nineteen sections, one per row of the feature menu, each with its own scene
 * and its own Explore button. Pairs with partials/feature-sections.php.
 *
 * THE FIVE COUNTS (memory: a-new-marketing-page-must-match-the-house-art-method)
 * are scenes, animation loops, stages, PER-SECTION GROUNDS and background layer
 * types. This sheet owns the last two: six ground recipes that cycle so no two
 * neighbours share one, each built from positioned radial glows over a diagonal
 * base, a masked graph-paper grid, blurred orbs at opposite corners, and an
 * oversized blend tail that melts each section into the next.
 *
 * Loaded render-blocking through site_head()'s `styles` key. Deliberately not
 * the media="print" async trick: memory marketing-fouc-async-css records that
 * exact pattern painting the marketing site unstyled on every load.
 */

/* ============================================================= *
 * 1. THE SECTION SHELL
 * ============================================================= */
.fx-sec{
  --fx-ink:#08152c;
  --fx-muted:#5c6d8c;
  --fx-card:rgba(255,255,255,.9);
  --fx-line:rgba(105,130,180,.22);
  --fx-accent:#2563eb;
  position:relative;isolation:isolate;overflow:clip;
  padding:clamp(56px,7vw,104px) 0;
  color:var(--fx-ink);
}
.fx-sec>.op-container{position:relative;z-index:2}

/* The blend tail is OFF (owner, 15 Sep 2026). It was an oversized ellipse
   hanging 14% past both edges with border-radius:50%, meant to dissolve one
   section into the next. In practice it read as a hard dark arc cutting across
   the page between every section. `content:none` removes the pseudo-element
   entirely, so the per-variant `.fx-*::after` colours below have nothing to
   paint and stay inert; restoring the effect is a one-line revert. */
.fx-sec::after{ content:none; }
/* Masked graph paper. */
.fx-sec::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.46;
  background-image:
    linear-gradient(rgba(96,126,186,.1) 1px,transparent 1px),
    linear-gradient(90deg,rgba(96,126,186,.1) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 8%,transparent 72%);
  mask-image:radial-gradient(ellipse at 50% 40%,#000 8%,transparent 72%);
}
.fx-orb{position:absolute;border-radius:50%;filter:blur(78px);pointer-events:none;z-index:0;opacity:.6}
.fx-orb.a{width:520px;height:520px;top:-150px;left:-140px}
.fx-orb.b{width:500px;height:500px;bottom:-170px;right:-130px}

/* ONE LIGHT GROUND RUNS THE WHOLE PAGE; only the dark sections break it.
   (owner, 15 Sep 2026)

   Every section used to paint its own gradient anchored to its own box, so even
   neighbours sharing a ground drew a seam where the gradient restarted, and five
   different grounds made the page read as a patchwork. The light sections now
   share one flat colour with no decoration of their own, so they run together as
   a single surface however many there are; .fx-deep and .fx-violet keep their
   own treatment and are the only deliberate breaks.

   The !important is load-bearing: .op-features-premium .op-section:nth-of-type(2n)
   in opsiq-marketing-3d.css is (0,3,0) and outranks any plain .fx-* selector, so
   without it the light sections fall back to that alternating tint and nothing
   here has any effect. */
.fx-sec:not(.fx-deep):not(.fx-violet){
  background:#f3f7ff !important;
}
.fx-sec:not(.fx-deep):not(.fx-violet)::before{content:none}
.fx-sec:not(.fx-deep):not(.fx-violet) .fx-orb{display:none}

/* DARK MODE: the page's own background is the ground. (owner, 15 Sep 2026)

   Two things were fighting here. The light rule above is !important, so in dark
   theme it forced the sections to stay light -- they "refused" to go dark. And
   the dark-theme rule further down repainted every light section with its own
   navy gradient, which put the patchwork back at night: section after section
   each drawing its own slightly different dark.

   Both are neutralised. Every section becomes transparent so the single page
   background shows through unbroken, and the decoration that restarted per
   section is dropped with it. Only .fx-deep and .fx-violet keep a ground, so a
   dark break still reads as a deliberate one rather than as a seam. */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .fx-sec:not(.fx-deep):not(.fx-violet),
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .fx-sec{
  /* The :not() pair is carried over from the light rule ON PURPOSE. That rule is
     (0,3,0) and !important; this one as `… .fx-sec` alone is only (0,2,1), so the
     light ground won even in dark theme and the sections refused to go dark.
     Matching its shape puts this at (0,4,1) and it wins. */
  background:transparent !important;
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .fx-sec::before{content:none}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .fx-sec::after{content:none}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .fx-sec .fx-orb{display:none}
/* No .fx-deep exception in dark theme: the owner asked for the page background
   to be the ONE ground at night, so a dark section drawing its own navy would be
   a break with nothing to break from. The rule that used to sit here was (0,2,1)
   and lost to the transparent rule above anyway -- dead CSS claiming to do
   something it did not, which is worse than none. Light theme is where .fx-deep
   still earns its ground. */

/* A dark section that continues another drops the repeat, so a dark pair is one
   surface rather than two gradients meeting. */
.fx-sec.fx-join.fx-deep{background:#151140 !important}
.fx-sec.fx-join.fx-violet{background:#0f1038 !important}
.fx-sec.fx-join::before{content:none}
.fx-sec.fx-join .fx-orb{display:none}

/* ---- six grounds, cycled so no two neighbours match ---- */
.fx-lite{
  background:
    radial-gradient(circle at 15% 20%,rgba(35,130,239,.12),transparent 33%),
    radial-gradient(circle at 86% 78%,rgba(118,87,248,.12),transparent 32%),
    linear-gradient(162deg,#fbfcff,#f2f7ff 60%,#eef4ff);
}
.fx-lite .fx-orb.a{background:rgba(35,130,239,.28)}
.fx-lite .fx-orb.b{background:rgba(118,87,248,.24)}
.fx-lite::after{background:radial-gradient(ellipse at 50% 0,rgba(255,255,255,.92),rgba(255,255,255,0) 68%)}

.fx-warm{
  background:
    radial-gradient(circle at 13% 26%,rgba(245,158,11,.12),transparent 30%),
    radial-gradient(circle at 88% 72%,rgba(227,91,208,.12),transparent 31%),
    linear-gradient(162deg,#fffdfa,#fdf6ff 58%,#f4f2ff);
}
.fx-warm .fx-orb.a{background:rgba(245,158,11,.24)}
.fx-warm .fx-orb.b{background:rgba(227,91,208,.22)}
.fx-warm::after{background:radial-gradient(ellipse at 50% 0,rgba(255,253,250,.94),rgba(255,253,250,0) 68%)}

.fx-cool{
  background:
    radial-gradient(circle at 17% 19%,rgba(11,187,212,.13),transparent 32%),
    radial-gradient(circle at 83% 79%,rgba(16,185,129,.11),transparent 31%),
    linear-gradient(162deg,#fbfeff,#eefaff 60%,#eef6ff);
}
.fx-cool .fx-orb.a{background:rgba(11,187,212,.26)}
.fx-cool .fx-orb.b{background:rgba(16,185,129,.2)}
.fx-cool::after{background:radial-gradient(ellipse at 50% 0,rgba(251,254,255,.94),rgba(251,254,255,0) 68%)}

.fx-deep{
  --fx-ink:#f2f7ff;
  --fx-muted:#bccbe8;
  --fx-card:rgba(16,25,57,.78);
  --fx-line:rgba(138,166,222,.22);
  --fx-accent:#7fc7ff;
  color:#edf5ff;
  background:
    radial-gradient(circle at 12% 15%,rgba(92,83,235,.3),transparent 34%),
    radial-gradient(circle at 88% 82%,rgba(11,187,212,.2),transparent 33%),
    /* Vertical, so the last stop spans the FULL bottom edge. At 150deg the
       bottom-left and bottom-right corners end on different colours, and the
       flat #151140 of the joined section below would meet them as a faint
       diagonal seam. */
    linear-gradient(180deg,#06122a,#0b1735 54%,#151140);
}
.fx-deep .fx-orb.a{background:rgba(118,87,248,.3)}
.fx-deep .fx-orb.b{background:rgba(11,187,212,.24)}
.fx-deep::after{background:radial-gradient(ellipse at 50% 0,rgba(21,17,64,.92),rgba(21,17,64,0) 68%)}
.fx-deep::before{
  background-image:
    linear-gradient(rgba(150,180,255,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(150,180,255,.09) 1px,transparent 1px);
}

.fx-violet{
  --fx-ink:#f4f2ff;
  --fx-muted:#c6bde8;
  --fx-card:rgba(30,20,62,.76);
  --fx-line:rgba(170,150,240,.24);
  --fx-accent:#c9b6ff;
  color:#f4f2ff;
  background:
    radial-gradient(circle at 84% 16%,rgba(227,91,208,.26),transparent 34%),
    radial-gradient(circle at 14% 84%,rgba(35,130,239,.22),transparent 34%),
    linear-gradient(152deg,#160e33,#231348 52%,#0f1038);
}
.fx-violet .fx-orb.a{background:rgba(227,91,208,.26)}
.fx-violet .fx-orb.b{background:rgba(118,87,248,.3)}
.fx-violet::after{background:radial-gradient(ellipse at 50% 0,rgba(15,16,56,.92),rgba(15,16,56,0) 68%)}
.fx-violet::before{
  background-image:
    linear-gradient(rgba(200,180,255,.1) 1px,transparent 1px),
    linear-gradient(90deg,rgba(200,180,255,.1) 1px,transparent 1px);
}

/* ============================================================= *
 * 2. THE ROW
 * ============================================================= */
.fx-row{display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(30px,4.4vw,64px);align-items:center}
.fx-row.is-flip>.fx-copy{order:2}
.fx-row.is-flip>.fx-art{order:1}

.fx-kicker{
  display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;
  font-size:11.5px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fx-accent);background:rgba(37,99,235,.09);border:1px solid rgba(37,99,235,.18);
}
.fx-deep .fx-kicker,.fx-violet .fx-kicker{background:rgba(150,200,255,.1);border-color:rgba(150,200,255,.22)}
.fx-copy h2{
  font-size:clamp(27px,3.5vw,44px);line-height:1.06;letter-spacing:-.03em;font-weight:900;
  margin:16px 0 14px;text-wrap:balance;
}
.fx-copy h2 em{
  font-style:normal;
  background:linear-gradient(100deg,#2181ef,#08b7d0 46%,#8855f6 78%,#e35bd0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.fx-deep .fx-copy h2 em,.fx-violet .fx-copy h2 em{
  background:linear-gradient(100deg,#61b6ff,#25d7e8 44%,#a98cff 74%,#f07ae0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.fx-lead{margin:0 0 22px;max-width:56ch;font-size:16px;line-height:1.62;color:var(--fx-muted);text-wrap:pretty}

.fx-points{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:13px}
.fx-points li{
  position:relative;padding-left:32px;font-size:14px;line-height:1.56;color:var(--fx-muted);text-wrap:pretty;
}
.fx-points li::before{
  content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:7px;
  background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(6,182,212,.16));
  border:1px solid rgba(16,185,129,.28);
}
.fx-points li::after{
  content:"";position:absolute;left:6px;top:7px;width:7px;height:4px;
  border-left:2px solid #10b981;border-bottom:2px solid #10b981;transform:rotate(-45deg);
}
.fx-points b{display:block;font-size:14.6px;font-weight:850;color:var(--fx-ink);margin-bottom:3px}

.fx-cta{align-self:start}

/* ============================================================= *
 * 3. THE SCENE FRAME
 * ============================================================= */
.fx-art{position:relative;display:grid;place-items:center;isolation:isolate;min-height:300px}
.fx-art-glow{
  position:absolute;inset:8% 4% 6%;border-radius:44% 56% 52% 48%;z-index:-1;filter:blur(20px);
  background:
    radial-gradient(circle at 44% 38%,rgba(11,187,212,.26),transparent 42%),
    radial-gradient(circle at 70% 68%,rgba(118,87,248,.28),transparent 46%);
  animation:fxGlow 9s ease-in-out infinite alternate;
}
@keyframes fxGlow{from{transform:scale(.97) translateY(4px);opacity:.75}to{transform:scale(1.03) translateY(-6px);opacity:1}}
.fx-art-shadow{
  position:absolute;left:6%;right:-2%;bottom:6px;height:74px;border-radius:50%;z-index:-1;
  background:radial-gradient(ellipse,rgba(23,40,84,.24),transparent 68%);filter:blur(6px);
}
.fx-deep .fx-art-shadow,.fx-violet .fx-art-shadow{background:radial-gradient(ellipse,rgba(0,0,0,.44),transparent 68%)}

.fx-window{
  width:100%;border-radius:20px;overflow:hidden;
  border:1px solid rgba(128,158,216,.32);
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(241,247,255,.94));
  box-shadow:0 38px 88px rgba(22,44,104,.24),inset 0 1px 0 #fff;
  transform:perspective(1500px) rotateY(-5deg) rotateX(2deg);
  transition:transform .8s cubic-bezier(.16,.84,.34,1),box-shadow .8s ease;
}
.fx-row.is-flip .fx-window{transform:perspective(1500px) rotateY(5deg) rotateX(2deg)}
.fx-art:hover .fx-window,
.fx-row.is-flip .fx-art:hover .fx-window{
  transform:perspective(1500px) rotateY(0) rotateX(0) translateY(-7px);
  box-shadow:0 50px 108px rgba(22,44,104,.3),inset 0 1px 0 #fff;
}
.fx-window-bar{
  display:flex;align-items:center;gap:9px;padding:11px 15px;
  border-bottom:1px solid rgba(128,158,216,.24);
  background:linear-gradient(180deg,#fff,#f2f6ff);
}
.fx-window-bar i{width:9px;height:9px;border-radius:50%;background:#c3cede;flex:none}
.fx-window-bar i:nth-child(2){background:#e7c66a}
.fx-window-bar i:nth-child(3){background:#8fd6a6}
.fx-window-bar b{margin-left:6px;font-size:12px;font-weight:900;color:#28374f}
.fx-window-bar em{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-style:normal;
  font-size:10px;font-weight:900;color:#1f7a5c;
  background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.26);
  padding:4px 10px;border-radius:999px;
}
.fx-window-bar em i{width:6px;height:6px;background:#10b981;animation:fxPulse 1.8s ease-in-out infinite}
@keyframes fxPulse{0%,100%{opacity:1}50%{opacity:.34}}
.fx-window-body svg{display:block;width:100%;height:auto}

/* THE WINDOW IS A SCREEN, NOT A PANEL.
 * Each scene paints its own ground inside it — some are light product UIs,
 * some are dark consoles — so the frame stays the same on every section and
 * in either theme. Tinting the frame dark under a light scene produced a
 * white slab floating in a navy box, which is what it looked like before. */
.fx-deep .fx-window,.fx-violet .fx-window{
  box-shadow:0 38px 88px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.5);
}

/* THE SHARED STAGE IS A MOUNT HERE, NOT A CARD.
 *
 * Every scene brings its own frame, so the stage must contribute nothing but
 * the float animation. Two rules in opsiq-marketing-3d.css have to be beaten
 * and both carry !important:
 *   .op-spot-art .m3d-stage{background:…!important}          (0,2,0)
 *   html[data-theme="dark"] .m3d-stage{background-color:…}   (0,1,1)+attr
 * The second is why it showed as a navy wedge only in dark theme: the window
 * is rotated in perspective, so its receding left edge exposed whatever sat
 * behind it, and that was the stage's own dark fill. Specificity here is
 * deliberately higher than both. */
html .fx-sec .fx-art .op-spot-art.m3d .m3d-stage,
.fx-art .m3d-stage{
  background:none!important;background-color:transparent!important;
  border:0!important;box-shadow:none!important;padding:0!important;
  border-radius:0!important;min-height:0!important;
  width:100%!important;max-width:100%!important;
  display:block!important;overflow:visible!important;transform:none!important;
}
.fx-art .op-spot-art{width:100%}
.fx-art .m3d-tag{z-index:6}
/* The stage also draws its own little light bar along the bottom. */
html .fx-sec .fx-art .op-spot-art.m3d .m3d-stage::after,
html .fx-sec .fx-art .op-spot-art.m3d .m3d-stage::before{display:none!important}

/* ============================================================= *
 * 4. RESPONSIVE
 * ============================================================= */
@media (max-width:1080px){
  .fx-row{grid-template-columns:1fr;gap:34px}
  .fx-row.is-flip>.fx-copy,.fx-row.is-flip>.fx-art{order:initial}
  .fx-window,.fx-row.is-flip .fx-window{transform:none}
  .fx-art{min-height:0}
}
@media (max-width:680px){
  .fx-sec{padding:clamp(44px,9vw,64px) 0}
  .fx-copy h2{font-size:clamp(25px,7vw,34px)}
  .fx-art-shadow{display:none}
  .fx-sec::after{bottom:-64px;height:140px}
}
@media (prefers-reduced-motion:reduce){
  .fx-art-glow,.fx-window-bar em i{animation:none}
  .fx-window{transition:none}
  .fx-sec svg animate,.fx-sec svg animateTransform,.fx-sec svg animateMotion{display:none}
}

/* ============================================================= *
 * 5. DARK THEME — the light grounds invert, the dark ones stay.
 * ============================================================= */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) :is(.fx-lite,.fx-warm,.fx-cool){
  --fx-ink:#f2f7ff;
  --fx-muted:#bccbe8;
  --fx-card:rgba(16,25,57,.78);
  --fx-line:rgba(138,166,222,.22);
  --fx-accent:#7fc7ff;
  color:#edf5ff;
  background:
    radial-gradient(circle at 15% 20%,rgba(35,130,239,.18),transparent 33%),
    radial-gradient(circle at 86% 78%,rgba(118,87,248,.18),transparent 32%),
    linear-gradient(162deg,#07142f,#0b1735 60%,#0a1430);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) :is(.fx-lite,.fx-warm,.fx-cool)::after{
  background:radial-gradient(ellipse at 50% 0,rgba(10,20,48,.92),rgba(10,20,48,0) 68%);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) :is(.fx-lite,.fx-warm,.fx-cool)::before{
  background-image:
    linear-gradient(rgba(150,180,255,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(150,180,255,.09) 1px,transparent 1px);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) :is(.fx-lite,.fx-warm,.fx-cool) .fx-kicker{
  background:rgba(150,200,255,.1);border-color:rgba(150,200,255,.22);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) :is(.fx-lite,.fx-warm,.fx-cool) .fx-copy h2 em{
  background:linear-gradient(100deg,#61b6ff,#25d7e8 44%,#a98cff 74%,#f07ae0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* The frame does not follow the theme either, for the same reason. */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) :is(.fx-lite,.fx-warm,.fx-cool) .fx-window{
  box-shadow:0 38px 88px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.5);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) :is(.fx-lite,.fx-warm,.fx-cool) .fx-art-shadow{
  background:radial-gradient(ellipse,rgba(0,0,0,.44),transparent 68%);
}

/* ============================================================= *
 * DARK MODE REACHES INSIDE THE SCENES (2026-09-15)
 *
 * Owner: "you can't have light theme in dark mode." Right. Keeping the
 * scene light and only darkening the frame around it is a half measure:
 * the product screens are the largest thing on the page and they were
 * still glowing white on a navy ground.
 *
 * HOW, WITHOUT TOUCHING A SINGLE SVG.
 * A presentation attribute (fill="#fff") has lower priority than ANY CSS
 * declaration, so an attribute selector can repaint it. That means the
 * scene sources keep their readable literals and the theme is expressed
 * once, here, for every scene on both pages.
 *
 * THE ELEMENT MATTERS, NOT JUST THE COLOUR. `#fff` is a light card when
 * it is on a <rect> and white lettering when it is on a <text> sitting in
 * a coloured header. Remapping it everywhere turned those labels black.
 * So surfaces are matched on rect/circle/ellipse, and inks on text.
 *
 * Brand colour is deliberately untouched: gradients, the greens, ambers,
 * reds and violets all carry meaning and read correctly on either ground.
 * ============================================================= */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-body,.cm-hero-shopcard,.fx-window-body,.ch-demo-desk) svg{

  --sc-ground:#0c1730;   /* the screen's own page */
  --sc-card:#152244;     /* a card sitting on it */
  --sc-soft:#1b2a52;     /* a quieter panel */
  --sc-ink:#eaf2ff;      /* primary lettering */
  --sc-muted:#9fb4d8;    /* secondary lettering */
  --sc-faint:#7e93b6;    /* tertiary lettering */
  --sc-line:rgba(150,180,255,.24);
  --sc-line-soft:rgba(150,180,255,.14);
}

/* ---- surfaces ------------------------------------------------ */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-body,.cm-hero-shopcard,.fx-window-body) svg
:is(rect,circle,ellipse):is([fill="#fbfdff"],[fill="#fbfcff"],[fill="#fbfbff"],[fill="#fbfeff"],[fill="#fffdfa"],[fill="#fdfbff"]){
  fill:var(--sc-ground);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-body,.cm-hero-shopcard,.fx-window-body) svg
:is(rect,circle,ellipse):is([fill="#fff"],[fill="#ffffff"]){
  fill:var(--sc-card);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-body,.cm-hero-shopcard,.fx-window-body) svg
:is(rect,circle,ellipse):is([fill="#f2f6ff"],[fill="#eef4ff"],[fill="#eef3fd"],[fill="#f8fafe"],[fill="#f7f9ff"],[fill="#f2f4ff"],[fill="#f1f6ff"],[fill="#f2f7ff"],[fill="#eef7ff"],[fill="#e2e9f7"],[fill="#e6ecf9"],[fill="#f0f4fd"],[fill="#e8eefb"]){
  fill:var(--sc-soft);
}

/* ---- lettering ----------------------------------------------- */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-body,.cm-hero-shopcard,.fx-window-body) svg
text:is([fill="#0d1a38"],[fill="#12203f"],[fill="#07111f"],[fill="#10203f"],[fill="#0a1730"],[fill="#1e2a4a"],[fill="#28374f"],[fill="#1b2a52"]){
  fill:var(--sc-ink);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-body,.cm-hero-shopcard,.fx-window-body) svg
text:is([fill="#7186a8"],[fill="#7b8aa8"],[fill="#5b6d8e"],[fill="#6d82a6"],[fill="#66789a"],[fill="#64729a"],[fill="#4a5c80"],[fill="#4a6b9c"],[fill="#6b7d9e"],[fill="#8595b4"],[fill="#52627a"],[fill="#5a6c8e"],[fill="#5d6f92"]){
  fill:var(--sc-muted);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-body,.cm-hero-shopcard,.fx-window-body) svg
text:is([fill="#93a8cc"],[fill="#94a3c4"],[fill="#9aa8c2"],[fill="#9aa9c6"],[fill="#a3825a"],[fill="#8a6c2f"],[fill="#6b6088"],[fill="#4f7a6c"],[fill="#8d5757"]){
  fill:var(--sc-faint);
}

/* ---- hairlines ----------------------------------------------- */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-body,.cm-hero-shopcard,.fx-window-body) svg
[stroke^="rgba(120,150,210"]{stroke:var(--sc-line)}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-body,.cm-hero-shopcard,.fx-window-body) svg
:is(rect,line,path):is([fill="#e2e9f7"],[fill="#e6ecf9"],[fill="#dce7f6"]){fill:var(--sc-line-soft)}

/* A white keyline drawn ON a coloured chip stays white; one drawn as a
   divider on a light card would vanish, so only the dividers move. */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-body,.cm-hero-shopcard,.fx-window-body) svg
rect[fill="#fff"][height="1"]{fill:var(--sc-line)}

/* ---- the frames that sit around them ------------------------- */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window,.cm-hero-shopcard,.fx-window){
  border-color:rgba(138,166,222,.26)!important;
  background:linear-gradient(145deg,#152244,#101b3a)!important;
  box-shadow:0 38px 92px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.07)!important;
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-bar,.fx-window-bar){
  background:linear-gradient(180deg,#1b2a52,#152244)!important;
  border-bottom-color:rgba(138,166,222,.22)!important;
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-bar,.fx-window-bar) b{color:#e6eeff!important}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-bar,.fx-window-bar) i:first-child{background:#5c6a86}

/* THE GROUND IS OFTEN A GRADIENT, NOT A FLAT FILL.
 * The storefront screen, the operator inbox and the capability player all
 * paint their page with a two-stop light gradient, so the flat-fill remap
 * above did not reach them and those screens stayed white. The gradients are
 * addressable by their id prefix, which is stable because every scene suffixes
 * its ids with the variant rather than renaming them. */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(linearGradient,radialGradient):is([id^="sfpage-"],[id^="aiapp-"],[id^="cpapp-"]) stop{
  stop-color:#0c1730;
}
/* The product-photo plates behind each item keep a lift off the ground. */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-window-body,.cm-hero-shopcard,.fx-window-body) svg
rect[fill="#f0f4fd"]{fill:#1b2a52}

/* ============================================================= *
 * DARK MODE USES THE HOUSE GROUND, NOT SIX OF ITS OWN
 *
 * Owner 2026-09-15: "it's not using the general dark theme with its grid.
 * All backgrounds need to be neutralised."
 *
 * The six cycling grounds are a LIGHT-MODE device: they give a long page a
 * rhythm when the page itself is bright. In dark mode they fought the site's
 * own ground (linear-gradient(135deg,#070d1a,#0c1730) on the body) and the
 * page read as six different dark blues stacked on each other.
 *
 * So in dark mode every section goes transparent and the body shows through
 * unbroken. The only thing each section keeps is its grid overlay, which is
 * what gives the dark theme its texture. The blend tails and the coloured
 * orbs go: with one continuous ground there is nothing left to blend between,
 * and the orbs were the colour that made each band look different.
 * ============================================================= */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.fx-sec,.fx-lite,.fx-warm,.fx-cool,.fx-deep,.fx-violet){
  background:transparent!important;
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .fx-sec::after{
  display:none;
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .fx-orb{
  display:none;
}
/* The grid belongs to the site, not to this page. The general dark theme
   paints a fixed 48px grid on the body at z-index:-3; a second grid drawn
   per section moved with the scroll and crossed it. Drop ours. */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .fx-sec::before{
  display:none!important;
}
/* Every section now sits on the same dark ground, so every section needs the
   light-side tokens, not just the three that used to be light. */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.fx-lite,.fx-warm,.fx-cool,.fx-deep,.fx-violet){
  --fx-ink:#f2f7ff;
  --fx-muted:#bccbe8;
  --fx-card:rgba(16,25,57,.78);
  --fx-line:rgba(138,166,222,.22);
  --fx-accent:#7fc7ff;
  color:#edf5ff;
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .fx-kicker{
  color:#7fc7ff;background:rgba(150,200,255,.1);border-color:rgba(150,200,255,.22);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .fx-copy h2 em{
  background:linear-gradient(100deg,#61b6ff,#25d7e8 44%,#a98cff 74%,#f07ae0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* =============================================================
 * DARK — THE PAGE HAS NO GROUND OF ITS OWN
 *
 * Owner, 09-15: "Feature page is not using the general dark theme for dark
 * mode all other pages are using. It has its grid too." Then, after a first
 * pass: "it neutralises everything, look how other pages are, even their
 * hero."
 *
 * Measured on /crm in dark mode: <main> and every one of its sections compute
 * to rgba(0,0,0,0) with no background image, and no section pseudo paints a
 * grid. The whole ground is the body's:
 *
 *   body.op-site-body        two radial glows over linear-gradient(135deg,
 *                            #070d1a,#0c1730)
 *   body.op-site-body:before a FIXED 48px grid at z-index:-3
 *
 * The Features page was the exception. `.op-features-premium` painted its own
 * linear-gradient(180deg,#050712,#07111f 42%,#050712), the hero section
 * painted a second one on top of that, and the hero shell drew a third grid
 * at 58px that scrolled while the body's stayed fixed. Three grounds and two
 * grids, none of them the site's.
 *
 * So the page stops painting. Cards, art, stages and glows keep their own
 * surfaces, because those are objects sitting on the ground rather than the
 * ground itself.
 * ============================================================= */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(main.op-features-premium,
    .op-features-premium .op-spot-hero,
    .op-features-premium .op-features-top,
    .op-features-premium .op-section:nth-of-type(even),
    .op-features-premium .op-section-tight:nth-of-type(even)){
  background:none!important;
  background-color:transparent!important;
}
/* Both of the page's own grids, and the tails that blended one band into the
   next. With one continuous ground there is nothing left to blend. */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) main.op-features-premium::before,
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .op-features-premium .op-mkt-top::before,
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .op-features-premium .op-spot-hero::after{
  display:none!important;
}