/**
 * OpsIQ Commerce — page-scoped stylesheet for /commerce.
 *
 * @package   OpsIQ
 * @author    Nabtech Digitalnet Limited
 * @copyright Copyright (c) 2026 Nabtech Digitalnet Limited. All rights reserved.
 * @license   Proprietary Commercial Licence (see LICENCE)
 *
 * HOUSE ART METHOD (memory: a-new-marketing-page-must-match-the-house-art-method).
 * Five things are measured on a marketing page, not three:
 *   1. large inline SVG scenes           2. <animate> loops
 *   3. m3d-stage / op-spot-art framings  4. per-section grounds
 *   5. background layer types (radial / conic / grid / pseudo-element glow)
 * Plus a stated light/dark cadence and a framing treatment for every scene.
 *
 * The section ground recipe copied from opsiq-team-performance.css (.tp3-hero):
 *   a) a 3-stop background: two positioned radial glows over a diagonal linear base
 *   b) an oversized ::after with border-radius:50% and negative left/right that
 *      melts one section into the next (this is what "blending" means here)
 *   c) a masked graph-paper background-image grid at 48px
 *   d) two blurred glow orbs at opposite corners in different hues
 * Lighter sections use only (a) with two radials at opposite corners.
 *
 * This sheet is loaded render-blocking through site_head()'s `styles` key, the
 * same door team-performance.css uses. It is deliberately NOT loaded with the
 * media="print" onload async trick: memory marketing-fouc-async-css records that
 * exact pattern painting the marketing site unstyled on every load, and it was
 * reverted site-wide on 2026-08-19.
 */

/* ============================================================= *
 * 1. PAGE SCOPE + TOKENS
 * ============================================================= */
.op-commerce-page{
  --cm-ink:#08152c;
  --cm-muted:#5c6d8c;
  --cm-card:rgba(255,255,255,.88);
  --cm-soft:rgba(244,248,255,.84);
  --cm-line:rgba(105,130,180,.22);
  --cm-shadow:0 30px 80px rgba(30,54,108,.14);
  --cm-shadow-lg:0 44px 110px rgba(24,46,98,.2);
  --cm-violet:#7657f8;
  --cm-blue:#2382ef;
  --cm-cyan:#0bbbd4;
  --cm-green:#10b981;
  --cm-amber:#f59e0b;
  --cm-rose:#e35bd0;
  --cm-deep:linear-gradient(145deg,#07172f,#101939 55%,#171741);
  color:var(--cm-ink);
  overflow:clip;
}
.op-commerce-page *{box-sizing:border-box}
.op-commerce-page a,.op-commerce-page button{font:inherit}
.op-commerce-page button{color:inherit}
.op-commerce-page .op-mega-h2 em,.op-commerce-page .cm-grad{
  font-style:normal;
  background:linear-gradient(100deg,#2181ef,#08b7d0 46%,#8855f6 78%,#e35bd0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ============================================================= *
 * 2. SECTION GROUNDS — the four-layer recipe, per section.
 *    Every section on this page carries its own ground. A run of
 *    sections on the default page ground is what made the first
 *    /hr page read as a different website.
 * ============================================================= */

/* Shared blend tail: the oversized ellipse that melts a section into
 * the next one. Negative left/right is deliberate, it must overhang. */
.cm-ground{position:relative;isolation:isolate}
.cm-ground::after{
  content:"";position:absolute;left:-14%;right:-14%;bottom:-92px;height:190px;
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 0,rgba(255,255,255,.92),rgba(255,255,255,0) 68%);
}
.cm-ground>.op-container,.cm-ground>.op-reveal,.cm-ground>.cm-head{position:relative;z-index:1}
/* NB: this must NOT be `.cm-ground>*`. This sheet loads after opsiq-marketing-3d.css,
 * so a universal child rule at equal specificity wins over `.op-halo{position:absolute}`
 * and drags the hero's decorative halos into the flow. That put roughly 1,450px of
 * empty space above the hero card. Name the content containers instead. */

/* Graph-paper grid, masked so it fades before the section edge. */
.cm-grid::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:linear-gradient(rgba(96,126,186,.11) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(96,126,186,.11) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 42%,#000 12%,transparent 72%);
  mask-image:radial-gradient(ellipse at 50% 42%,#000 12%,transparent 72%);
}

/* Two blurred glow orbs at opposite corners, different hues. */
.cm-orb{position:absolute;border-radius:50%;filter:blur(66px);pointer-events:none;z-index:0;opacity:.62}
.cm-orb.a{width:520px;height:520px;top:-140px;left:-130px;background:rgba(35,130,239,.3)}
.cm-orb.b{width:560px;height:560px;bottom:-190px;right:-150px;background:rgba(118,87,248,.26)}
.cm-orb.c{width:480px;height:480px;top:-120px;right:-120px;background:rgba(11,187,212,.24)}
.cm-orb.d{width:520px;height:520px;bottom:-170px;left:-140px;background:rgba(227,91,208,.2)}

/* --- LIGHT sections: two radials at opposite corners over a diagonal base --- */
.cm-lite{
  background:radial-gradient(circle at 16% 22%,rgba(35,130,239,.12),transparent 34%),
             radial-gradient(circle at 85% 76%,rgba(118,87,248,.13),transparent 32%),
             linear-gradient(160deg,#fbfcff,#f2f7ff 62%,#eef4ff);
}
.cm-lite-warm{
  background:radial-gradient(circle at 14% 28%,rgba(245,158,11,.11),transparent 30%),
             radial-gradient(circle at 87% 70%,rgba(227,91,208,.11),transparent 31%),
             linear-gradient(160deg,#fffdfa,#fdf6ff 58%,#f4f2ff);
}
.cm-lite-cool{
  background:radial-gradient(circle at 18% 20%,rgba(11,187,212,.13),transparent 33%),
             radial-gradient(circle at 82% 78%,rgba(16,185,129,.11),transparent 31%),
             linear-gradient(160deg,#fbfeff,#eefaff 60%,#eef6ff);
}

/* --- DARK panels: the cadence break. Twenty light sections in a row
 *     reads as flat no matter how good each one is. --- */
.cm-deep{
  color:#edf5ff;
  background:radial-gradient(circle at 12% 14%,rgba(92,83,235,.3),transparent 34%),
             radial-gradient(circle at 88% 82%,rgba(11,187,212,.2),transparent 33%),
             var(--cm-deep);
}
.cm-deep::after{background:radial-gradient(ellipse at 50% 0,rgba(23,23,65,.9),rgba(23,23,65,0) 68%)}
.cm-deep .op-kicker,.cm-deep .op-prism-kicker{color:#9fd4ff}
.cm-deep h2,.cm-deep h3,.cm-deep h4,.cm-deep b,.cm-deep strong{color:#f4f8ff}
.cm-deep p,.cm-deep li,.cm-deep small,.cm-deep span{color:#c4d2ec}
.cm-deep .cm-grid::before{
  background-image:linear-gradient(rgba(150,180,255,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(150,180,255,.09) 1px,transparent 1px);
}

/* Conic accent — used sparingly on the ledger and the gateway ring. */
.cm-conic{
  background:conic-gradient(from 210deg at 50% 50%,
    rgba(35,130,239,.16),rgba(11,187,212,.14) 25%,rgba(118,87,248,.16) 52%,
    rgba(227,91,208,.13) 74%,rgba(35,130,239,.16));
}

/* ============================================================= *
 * 4. LAYOUT PRIMITIVES
 * ============================================================= */
.cm-row{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.cm-row.rev>.cm-row-copy{order:2}
.cm-row.rev>.cm-scene{order:1}
.cm-row-copy h2{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.025em;line-height:1.08;margin:8px 0 14px}
.cm-row-copy h3{font-size:clamp(21px,2.5vw,30px);letter-spacing:-.02em;margin:6px 0 10px}
.cm-row-copy p{color:var(--cm-muted);font-size:16.5px;line-height:1.62}
.cm-deep .cm-row-copy p{color:#c4d2ec}

.cm-head{max-width:800px;margin:0 auto 40px;text-align:center}
.cm-head h2{font-size:clamp(30px,4vw,50px);letter-spacing:-.028em;line-height:1.06;margin:10px 0 14px}
.cm-head p{color:var(--cm-muted);font-size:17px;line-height:1.62}
.cm-deep .cm-head p{color:#c4d2ec}

.cm-feats{display:grid;gap:13px;margin-top:22px}
.cm-feat{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:15px;line-height:1.55;color:var(--cm-muted)}
.cm-feat svg{width:20px;height:20px;margin-top:2px;color:var(--cm-green)}
.cm-feat b{color:var(--cm-ink)}
.cm-deep .cm-feat{color:#c4d2ec}
.cm-deep .cm-feat b{color:#f4f8ff}

.cm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:20px}
.cm-card{
  position:relative;padding:24px;border-radius:20px;overflow:hidden;
  background:var(--cm-card);border:1px solid var(--cm-line);box-shadow:var(--cm-shadow);
  transition:transform .35s ease,box-shadow .35s ease;
}
.cm-card:hover{transform:translateY(-5px);box-shadow:var(--cm-shadow-lg)}
.cm-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.7;
  background:radial-gradient(circle at 100% 0,rgba(35,130,239,.1),transparent 42%);
}
.cm-card>*{position:relative}
.cm-card .cm-card-ico{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;margin-bottom:14px;
  background:linear-gradient(135deg,rgba(35,130,239,.14),rgba(118,87,248,.14));
  border:1px solid rgba(118,87,248,.2);
}
.cm-card .cm-card-ico svg{width:21px;height:21px;color:var(--cm-blue)}
.cm-card h4{font-size:16.5px;font-weight:900;letter-spacing:-.012em;margin:0 0 7px;color:var(--cm-ink)}
.cm-card p{font-size:14px;line-height:1.58;color:var(--cm-muted);margin:0}
.cm-deep .cm-card{background:rgba(16,25,57,.72);border-color:rgba(138,166,222,.2)}
.cm-deep .cm-card h4{color:#f4f8ff}
.cm-deep .cm-card p{color:#bccbe8}
.cm-deep .cm-card .cm-card-ico svg{color:#7fc7ff}

/* Numbered step rail. */
.cm-steps{display:grid;gap:16px;counter-reset:cmstep}
.cm-step{
  position:relative;display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:start;
  padding:20px 22px;border-radius:18px;
  background:var(--cm-card);border:1px solid var(--cm-line);box-shadow:var(--cm-shadow);
}
.cm-step>span{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  font-size:15px;font-weight:950;color:#fff;
  background:linear-gradient(135deg,var(--cm-violet),var(--cm-blue));
}
.cm-step b{display:block;font-size:16px;font-weight:900;color:var(--cm-ink);margin-bottom:5px}
.cm-step p{margin:0;font-size:14.2px;line-height:1.56;color:var(--cm-muted)}
.cm-deep .cm-step{background:rgba(16,25,57,.72);border-color:rgba(138,166,222,.2)}
.cm-deep .cm-step b{color:#f4f8ff}
.cm-deep .cm-step p{color:#bccbe8}

/* Pill chips. */
.cm-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.cm-chips span{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  font-size:12.5px;font-weight:850;color:#41527a;
  background:rgba(255,255,255,.76);border:1px solid var(--cm-line);
}
.cm-deep .cm-chips span{color:#cfdcf5;background:rgba(255,255,255,.07);border-color:rgba(150,180,255,.2)}

/* Inline CTA row. */
.cm-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;align-items:center}

/* A note/caveat block — used where the page must be honest about a limit. */
.cm-note{
  display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;
  margin-top:24px;padding:18px 20px;border-radius:16px;
  background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.26);
}
.cm-note svg{width:22px;height:22px;color:#b4740a;margin-top:1px}
.cm-note p{margin:0;font-size:14px;line-height:1.58;color:#6b4c12}
.cm-deep .cm-note{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3)}
.cm-deep .cm-note p{color:#f2d9a6}

/* ============================================================= *
 * 5. RESPONSIVE — the page must hold at 1180 / 900 / 680 / 420.
 * ============================================================= */
@media(max-width:1180px){
  .cm-row{gap:38px}
  .cm-scene{min-height:390px}
  .cm-float.a{left:0}
  .cm-float.b{right:0}
  .cm-float.c{left:0}
}
@media(max-width:900px){
  .cm-row{grid-template-columns:1fr;gap:34px}
  .cm-row.rev>.cm-row-copy,.cm-row.rev>.cm-scene{order:initial}
  .cm-window{transform:none}
  .cm-window:hover{transform:translateY(-4px)}
  .cm-scene{min-height:0}
  .cm-head{margin-bottom:30px}
}
@media(max-width:680px){
  .cm-float{position:static;margin:12px 0 0;animation:none;width:100%}
  .cm-float.a,.cm-float.b,.cm-float.c{top:auto;bottom:auto;left:auto;right:auto}
  .cm-stage-shadow{display:none}
  .cm-cards{grid-template-columns:1fr}
  .cm-step{grid-template-columns:38px 1fr;gap:13px;padding:17px 18px}
  .cm-step>span{width:38px;height:38px;border-radius:12px;font-size:13.5px}
  .cm-ground::after{bottom:-60px;height:130px}
}
@media(max-width:420px){
  .cm-row-copy p{font-size:15.5px}
  .cm-chips span{font-size:11.5px;padding:7px 12px}
}

/* Motion: every loop on this page is decorative. */
@media (prefers-reduced-motion:reduce){
  .op-commerce-page *,.op-commerce-page *::before,.op-commerce-page *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .op-commerce-page svg animate,
  .op-commerce-page svg animateTransform,
  .op-commerce-page svg animateMotion{display:none}
}

/* ============================================================= *
 * 6. DARK THEME — the site's own three-selector convention.
 * ============================================================= */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .op-commerce-page{
  --cm-ink:#f2f7ff;
  --cm-muted:#bccbe8;
  --cm-card:rgba(16,25,57,.78);
  --cm-soft:rgba(16,25,57,.6);
  --cm-line:rgba(138,166,222,.22);
  --cm-shadow:0 30px 80px rgba(0,0,0,.34);
  --cm-shadow-lg:0 44px 110px rgba(0,0,0,.42);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .cm-lite{
  background:radial-gradient(circle at 16% 22%,rgba(35,130,239,.16),transparent 34%),
             radial-gradient(circle at 85% 76%,rgba(118,87,248,.17),transparent 32%),
             linear-gradient(160deg,#07142f,#0b1735 62%,#0a1430);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .cm-lite-warm{
  background:radial-gradient(circle at 14% 28%,rgba(245,158,11,.14),transparent 30%),
             radial-gradient(circle at 87% 70%,rgba(227,91,208,.14),transparent 31%),
             linear-gradient(160deg,#0d1130,#130f2c 58%,#0b1430);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .cm-lite-cool{
  background:radial-gradient(circle at 18% 20%,rgba(11,187,212,.16),transparent 33%),
             radial-gradient(circle at 82% 78%,rgba(16,185,129,.13),transparent 31%),
             linear-gradient(160deg,#07172f,#08202f 60%,#07152c);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .cm-ground::after{
  background:radial-gradient(ellipse at 50% 0,rgba(7,20,47,.92),rgba(7,20,47,0) 68%);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .cm-grid::before{
  background-image:linear-gradient(rgba(150,180,255,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(150,180,255,.09) 1px,transparent 1px);
}
/* THE WINDOW IS A SCREEN, NOT A PANEL.
 * Every scene paints its own ground inside it: the storefront, the gateway
 * board and the analytics screens are light product UIs, the order path,
 * evidence chain, connector ladder and harness are dark consoles. Flipping the
 * FRAME with the theme put a white screen inside a navy box in dark mode,
 * which is what looked broken. The frame stays constant and only its shadow
 * deepens; the scene decides what is inside it. */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .cm-window{
  box-shadow:0 38px 92px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.55);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .cm-float{
  background:rgba(16,25,57,.84);border-color:rgba(138,166,222,.26);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .cm-float b{color:#0b1a38}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .cm-float span{color:#65769a}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .cm-card::before{
  background:radial-gradient(circle at 100% 0,rgba(35,130,239,.16),transparent 42%);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .cm-chips span{
  color:#cfdcf5;background:rgba(255,255,255,.07);border-color:rgba(150,180,255,.2);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .cm-note{
  background:rgba(245,158,11,.13);border-color:rgba(245,158,11,.3);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .cm-note p{color:#f2d9a6}

/* ============================================================= *
 * 7. THE GATEWAY BOARD — rendered from GatewayRegistry
 * ============================================================= */
.cm-gw-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:20px}
.cm-gw-region{
  position:relative;padding:22px;border-radius:20px;overflow:hidden;
  background:var(--cm-card);border:1px solid var(--cm-line);box-shadow:var(--cm-shadow);
}
.cm-gw-region::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.8;
  background:radial-gradient(circle at 100% 0,rgba(11,187,212,.12),transparent 46%);
}
.cm-gw-region>*{position:relative}
.cm-gw-region>header{display:flex;align-items:center;gap:10px;margin-bottom:15px}
.cm-gw-region>header b{font-size:13px;font-weight:950;letter-spacing:.06em;text-transform:uppercase;color:var(--cm-blue)}
.cm-gw-region>header em{
  margin-left:auto;font-style:normal;font-size:11px;font-weight:900;color:#54668c;
  background:rgba(105,130,180,.12);border-radius:999px;padding:3px 10px;
}
.cm-gw-list{display:grid;gap:11px}
.cm-gw{
  padding:13px 15px;border-radius:14px;
  background:var(--cm-soft);border:1px solid var(--cm-line);
  transition:transform .3s ease,border-color .3s ease;
}
.cm-gw:hover{transform:translateX(3px);border-color:rgba(35,130,239,.4)}
.cm-gw b{display:block;font-size:14.5px;font-weight:900;color:var(--cm-ink);letter-spacing:-.01em}
.cm-gw span{display:block;margin-top:3px;font-size:12px;font-weight:800;color:var(--cm-blue)}
.cm-gw small{display:block;margin-top:3px;font-size:11.5px;font-weight:700;color:var(--cm-muted);line-height:1.45}

/* ============================================================= *
 * 8. THE ORDERING-MODE LADDER (connectors)
 * ============================================================= */
.cm-ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:20px;margin-top:8px}
.cm-rung{
  position:relative;padding:26px 24px;border-radius:20px;overflow:hidden;
  background:var(--cm-card);border:1px solid var(--cm-line);box-shadow:var(--cm-shadow);
}
.cm-rung::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cm-blue)}
.cm-rung.r2::after{background:linear-gradient(180deg,var(--cm-blue),var(--cm-violet))}
.cm-rung.r3::after{background:linear-gradient(180deg,var(--cm-violet),var(--cm-green))}
.cm-rung>span{
  display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;margin-bottom:12px;
  font-size:11px;font-weight:950;letter-spacing:.05em;text-transform:uppercase;
  color:var(--cm-blue);background:rgba(35,130,239,.12);
}
.cm-rung.r2>span{color:var(--cm-violet);background:rgba(118,87,248,.12)}
.cm-rung.r3>span{color:#0d8f66;background:rgba(16,185,129,.12)}
.cm-rung h4{font-size:18px;font-weight:950;letter-spacing:-.018em;margin:0 0 9px;color:var(--cm-ink)}
.cm-rung p{margin:0 0 15px;font-size:14px;line-height:1.58;color:var(--cm-muted)}
.cm-rung ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.cm-rung li{
  font-size:12px;font-weight:850;color:#3f5178;padding:6px 11px;border-radius:9px;
  background:rgba(105,130,180,.1);border:1px solid var(--cm-line);
}
.cm-deep .cm-rung{background:rgba(16,25,57,.74);border-color:rgba(138,166,222,.2)}
.cm-deep .cm-rung h4{color:#f4f8ff}
.cm-deep .cm-rung p{color:#bccbe8}
.cm-deep .cm-rung li{color:#d3e0f7;background:rgba(255,255,255,.07);border-color:rgba(150,180,255,.2)}

/* ============================================================= *
 * 9. SECURITY GRID
 * ============================================================= */
.cm-sec{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px}
.cm-sec-item{
  position:relative;padding:22px;border-radius:18px;overflow:hidden;
  background:rgba(255,255,255,.06);border:1px solid rgba(150,180,255,.2);
}
.cm-sec-item::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 0 0,rgba(11,187,212,.16),transparent 48%);
}
.cm-sec-item>*{position:relative}
.cm-sec-item i{
  display:grid;place-items:center;width:38px;height:38px;border-radius:12px;margin-bottom:13px;
  background:linear-gradient(135deg,rgba(11,187,212,.24),rgba(118,87,248,.24));
  border:1px solid rgba(150,180,255,.26);
}
.cm-sec-item i svg{width:19px;height:19px;color:#8ee0f5}
.cm-sec-item b{display:block;font-size:15.5px;font-weight:900;color:#f2f7ff;margin-bottom:7px}
.cm-sec-item p{margin:0;font-size:13.5px;line-height:1.56;color:#bccbe8}

@media(max-width:680px){
  .cm-gw-board,.cm-ladder,.cm-sec{grid-template-columns:1fr}
  .cm-gw-region,.cm-rung{padding:19px}
}

/* ============================================================= *
 * 12. THE STOREFRONT SECTION — its own signature: a machine on a
 *     floor. Nothing else on the page uses the room, so this
 *     section reads as a different kind of moment.
 * ============================================================= */
.cm-sec-store{padding-bottom:clamp(60px,8vw,110px)}
.cm-store-stage{max-width:1120px;margin:0 auto clamp(44px,6vw,80px);padding-top:10px}
.cm-float-room{z-index:6}
.cm-float-room.a{top:4%;left:-2%}
.cm-float-room.b{top:42%;right:-3%}
.cm-float-room.c{bottom:24%;left:-4%}

.cm-store-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2px;border-radius:22px;overflow:hidden;border:1px solid var(--cm-line);box-shadow:var(--cm-shadow)}
.cm-store-item{
  position:relative;padding:28px 26px;background:var(--cm-card);overflow:hidden;
  transition:background .4s ease,transform .4s cubic-bezier(.16,.84,.34,1);
}
.cm-store-item::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--cm-blue),var(--cm-cyan),var(--cm-violet));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.16,.84,.34,1);
}
.cm-store-item:hover::before{transform:scaleX(1)}
.cm-store-item:hover{background:rgba(255,255,255,.99);transform:translateY(-3px)}
.cm-store-item b{display:block;font-size:17px;font-weight:900;letter-spacing:-.015em;color:var(--cm-ink);margin-bottom:9px}
.cm-store-item p{margin:0;font-size:14.2px;line-height:1.6;color:var(--cm-muted)}

.cm-store-cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:26px;
  padding:30px 32px;border-radius:22px;
  background:linear-gradient(120deg,rgba(35,130,239,.1),rgba(118,87,248,.1) 52%,rgba(11,187,212,.09));
  border:1px solid rgba(118,87,248,.24);
}
.cm-store-cta>div{flex:1 1 380px}
.cm-store-cta b{display:block;font-size:19px;font-weight:900;letter-spacing:-.018em;color:var(--cm-ink);margin-bottom:8px}
.cm-store-cta p{margin:0;font-size:14.4px;line-height:1.6;color:var(--cm-muted)}

:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .cm-store-item{background:rgba(16,25,57,.78)}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .cm-store-item:hover{background:rgba(22,33,72,.9)}

@media(max-width:900px){
  .cm-store-stage{margin-bottom:38px}
  .cm-float-room{position:static;margin:10px 0 0;width:100%}
}
@media(max-width:680px){
  .cm-store-grid{grid-template-columns:1fr}
  .cm-store-cta{padding:24px}
}

/* ============================================================= *
 * 15. TYPESETTING — wrap, measure and balance.
 * Owner 2026-09-15 ("wrap this") on the Store Intelligence copy:
 * at a zoomed or wide column the lines ran the full 553px and the
 * headline broke mid-phrase. Balance every heading, and cap the
 * running text at a readable measure instead of the column width.
 * ============================================================= */
.op-commerce-page h1,
.op-commerce-page h2,
.op-commerce-page h3,
.op-commerce-page h4,
.op-commerce-page .cm-head h2,
.op-commerce-page .cm-row-copy h2,
.op-commerce-page .cm-row-copy h3{text-wrap:balance}

.op-commerce-page .cm-row-copy>p,
.op-commerce-page .cm-head>p{max-width:60ch}
.op-commerce-page .cm-head>p{margin-inline:auto;text-wrap:pretty}
.op-commerce-page .cm-row-copy>p{text-wrap:pretty}
.op-commerce-page .cm-feat span,
.op-commerce-page .cm-card p,
.op-commerce-page .cm-step p,
.op-commerce-page .cm-rung p,
.op-commerce-page .cm-store-item p,
.op-commerce-page .cm-sec-item p,
.op-commerce-page .cm-note p{text-wrap:pretty;hyphens:auto;overflow-wrap:break-word}

/* Long unbroken strings (an action id, a domain) must never widen a card. */
.op-commerce-page .cm-gw b,
.op-commerce-page .cm-rung li,
.op-commerce-page .cm-chips span{overflow-wrap:anywhere}

/* ============================================================= *
 * 16. THE DEPTH PASS — one signature per section.
 *
 * The art-density bar is five counts, not three: scenes, loops,
 * stages, per-section grounds, and background LAYER TYPES. This
 * block is the fifth: it gives each section a ground nobody else
 * on the page has, so scrolling reads as a sequence of different
 * rooms rather than one long page with pictures in it.
 * ============================================================= */

/* THE STOREFRONT — a lit floor under a machine. Warm top light,
   cool bounce from below, and a horizon line where they meet. */
.cm-sec-store{
  background:
    radial-gradient(ellipse 120% 60% at 50% -8%,rgba(118,87,248,.16),transparent 62%),
    radial-gradient(ellipse 90% 50% at 12% 104%,rgba(11,187,212,.16),transparent 60%),
    radial-gradient(ellipse 90% 50% at 88% 104%,rgba(35,130,239,.15),transparent 60%),
    linear-gradient(176deg,#fcfdff,#eef4ff 54%,#e7eeff);
}
.cm-sec-store::before{
  content:"";position:absolute;left:0;right:0;top:46%;height:1px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(120,150,210,.42) 22%,rgba(120,150,210,.42) 78%,transparent);
}

/* THE WALLS — heavier, warmer, with a faint vault ring behind it. */
#walls{
  background:
    radial-gradient(circle at 50% 42%,rgba(245,158,11,.14),transparent 46%),
    radial-gradient(circle at 8% 16%,rgba(227,91,208,.1),transparent 34%),
    radial-gradient(circle at 92% 84%,rgba(118,87,248,.11),transparent 34%),
    linear-gradient(162deg,#fffdf9,#fdf5ff 56%,#f3f1ff);
}
#walls::before{
  content:"";position:absolute;left:50%;top:14%;width:min(70vw,760px);aspect-ratio:1;translate:-50% 0;
  border-radius:50%;z-index:0;pointer-events:none;opacity:.5;
  background:conic-gradient(from 90deg at 50% 50%,
    rgba(245,158,11,.18),transparent 12%,rgba(245,158,11,.18) 25%,transparent 37%,
    rgba(245,158,11,.18) 50%,transparent 62%,rgba(245,158,11,.18) 75%,transparent 87%,rgba(245,158,11,.18));
  -webkit-mask-image:radial-gradient(circle,transparent 58%,#000 60%,#000 66%,transparent 68%);
  mask-image:radial-gradient(circle,transparent 58%,#000 60%,#000 66%,transparent 68%);
  animation:cmVault 46s linear infinite;
}
@keyframes cmVault{to{transform:rotate(360deg)}}

/* PAYMENTS — a wide cool sweep with a conic aurora behind the ring. */
#payments{
  background:
    radial-gradient(ellipse 110% 56% at 50% 0,rgba(35,130,239,.15),transparent 60%),
    radial-gradient(circle at 16% 72%,rgba(16,185,129,.12),transparent 34%),
    radial-gradient(circle at 86% 30%,rgba(11,187,212,.14),transparent 34%),
    linear-gradient(170deg,#fbfdff,#eef7ff 58%,#eaf2ff);
}
#payments::before{
  content:"";position:absolute;left:50%;top:6%;width:min(92vw,1180px);height:460px;translate:-50% 0;
  z-index:0;pointer-events:none;opacity:.42;filter:blur(46px);
  background:conic-gradient(from 200deg at 50% 50%,
    rgba(35,130,239,.4),rgba(11,187,212,.34) 22%,rgba(16,185,129,.3) 44%,
    rgba(118,87,248,.36) 68%,rgba(227,91,208,.3) 86%,rgba(35,130,239,.4));
}

/* STORE FEATURES — the warm room. Paper-like, with a soft vignette. */
#store-features{
  background:
    radial-gradient(circle at 12% 18%,rgba(245,158,11,.13),transparent 32%),
    radial-gradient(circle at 88% 30%,rgba(227,91,208,.12),transparent 32%),
    radial-gradient(circle at 50% 96%,rgba(118,87,248,.12),transparent 42%),
    linear-gradient(158deg,#fffdfa,#fdf7ff 52%,#f4f3ff);
}

/* ANALYTICS — cool and clinical, with measured rules across it. */
#analytics{
  background:
    radial-gradient(circle at 18% 14%,rgba(11,187,212,.15),transparent 32%),
    radial-gradient(circle at 84% 82%,rgba(16,185,129,.13),transparent 32%),
    linear-gradient(168deg,#fbfeff,#ecfaff 56%,#eaf4ff);
}
#analytics::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(180deg,rgba(90,140,190,.16) 0 1px,transparent 1px 74px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
}

/* DEVELOPERS — the workbench. Cooler paper, a faint blueprint grid. */
#developers{
  background:
    radial-gradient(circle at 10% 20%,rgba(118,87,248,.14),transparent 32%),
    radial-gradient(circle at 90% 78%,rgba(35,130,239,.13),transparent 32%),
    linear-gradient(172deg,#fbfcff,#f1f4ff 58%,#edf1ff);
}
#developers::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.42;
  background-image:
    linear-gradient(rgba(96,126,186,.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(96,126,186,.14) 1px,transparent 1px),
    linear-gradient(rgba(96,126,186,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(96,126,186,.08) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,24px 24px,24px 24px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 10%,transparent 76%);
  mask-image:radial-gradient(ellipse at 50% 40%,#000 10%,transparent 76%);
}

/* The dark rooms each get their own accent rather than one navy. */
#chat-commerce{
  background:
    radial-gradient(circle at 14% 12%,rgba(37,211,102,.16),transparent 34%),
    radial-gradient(circle at 86% 86%,rgba(227,91,208,.16),transparent 34%),
    linear-gradient(148deg,#07172f,#101939 52%,#1a1046);
}
#security{
  background:
    radial-gradient(circle at 12% 16%,rgba(11,187,212,.2),transparent 34%),
    radial-gradient(circle at 88% 80%,rgba(118,87,248,.2),transparent 34%),
    linear-gradient(150deg,#05101f,#0a1730 54%,#0d1436);
}
#connectors{
  background:
    radial-gradient(circle at 84% 14%,rgba(35,130,239,.22),transparent 34%),
    radial-gradient(circle at 12% 84%,rgba(16,185,129,.16),transparent 34%),
    linear-gradient(152deg,#07142c,#0d1b3a 54%,#121540);
}
#readiness{
  background:
    radial-gradient(circle at 50% 8%,rgba(16,185,129,.2),transparent 40%),
    radial-gradient(circle at 10% 88%,rgba(245,158,11,.14),transparent 34%),
    linear-gradient(156deg,#061626,#0a1b32 54%,#0c1338);
}

:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) :is(.cm-sec-store,#walls,#payments,#store-features,#analytics,#developers){
  background:
    radial-gradient(circle at 16% 18%,rgba(35,130,239,.18),transparent 34%),
    radial-gradient(circle at 84% 80%,rgba(118,87,248,.18),transparent 34%),
    linear-gradient(162deg,#07142f,#0b1735 58%,#0a1430);
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .cm-sec-store::before{
  background:linear-gradient(90deg,transparent,rgba(150,180,255,.3) 22%,rgba(150,180,255,.3) 78%,transparent);
}

@media (prefers-reduced-motion:reduce){#walls::before{animation:none}}

/* ============================================================= *
 * DARK MODE USES THE HOUSE GROUND HERE TOO
 *
 * Same reasoning as the Features page: the per-section grounds are a
 * light-mode rhythm device. In dark mode they stacked several different dark
 * blues against the site's own body gradient. Neutralise them, keep the grid,
 * and let one ground run the length of the page.
 * ============================================================= */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-ground,.cm-lite,.cm-lite-warm,.cm-lite-cool,.cm-deep,.cm-sec-store,
    #walls,#payments,#store-features,#analytics,#developers,
    #chat-commerce,#security,#connectors,#readiness){
  background:transparent!important;
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark)
:is(.cm-ground::after,.cm-sec-store::before,#walls::before,#payments::before,
    #analytics::before,#developers::before){
  display:none!important;
}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .cm-orb{display:none}
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .cm-grid::before{
  opacity:.5;
  background-image:
    linear-gradient(rgba(150,180,255,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(150,180,255,.09) 1px,transparent 1px)!important;
  background-size:48px 48px;
}
/* Every section is on the dark ground now, so the deep-panel text tokens
   apply everywhere rather than only to the sections that were already deep. */
:is(html[data-theme="dark"],html[data-opsiq-saas-theme="dark"],html.op-theme-dark) .op-commerce-page{
  --cm-ink:#f2f7ff;--cm-muted:#bccbe8;
  --cm-card:rgba(16,25,57,.78);--cm-soft:rgba(16,25,57,.6);
  --cm-line:rgba(138,166,222,.22);
}