/* ============================================================================
   sections.css  -  shared marketing "section shell" components
   ----------------------------------------------------------------------------
   Lifted out of index.html on 2026-06-08 so any public page can drop in the
   homepage's feature-showcase patterns without duplicating the CSS:
     - .cz-* : the capability band (zigzag copy + demo-iframe rows)
     - .slm-*: the "more of the platform" multi-slider (tabbed single-stage)
   Loaded globally from base.html. These class prefixes are unique to the
   showcase (no collision with Tailwind or sl-/m- component classes), so it is
   inert on pages that do not use them. Keep this the SINGLE source of truth;
   do not re-inline these rules in index.html.
   Hand-written CSS on purpose: prod Tailwind is prebuilt/purged, so arbitrary
   utilities would silently no-op. Brand gradient stops: #8C6CFF / #6A9EFF / #48E2D9.
   ============================================================================ */

/* ---- Capability band (cz-*) ------------------------------------------------ */
.cz-band{padding:88px 0 26px;background:#ffffff;border-bottom:1px solid #f1f5f9}
.cz-wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.cz-head{max-width:700px;margin:0 auto 8px;text-align:center}
.cz-eye{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#576478}
.cz-eye .cz-tick{width:18px;height:2px;border-radius:2px;background:var(--brand-gradient, linear-gradient(135deg, #8C6CFF 0%, #6A9EFF 50%, #48E2D9 100%))}
.cz-h2{font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;font-size:clamp(28px,3.6vw,42px);line-height:1.08;letter-spacing:-.025em;font-weight:800;margin:14px 0 14px;color:#0f172a}
.cz-grad{background:var(--brand-gradient, linear-gradient(135deg, #8C6CFF 0%, #6A9EFF 50%, #48E2D9 100%));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.cz-sub{font-size:18px;line-height:1.55;color:#293649;margin:0}

.cz-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,76px);align-items:center;padding:60px 0}
.cz-copy{max-width:460px}
.cz-row.cz-flip .cz-copy{order:2}
.cz-row.cz-flip .cz-stagewrap{order:1}
.cz-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#6A9EFF}
.cz-eyebrow .cz-dot{width:7px;height:7px;border-radius:50%;background:var(--brand-gradient, linear-gradient(135deg, #8C6CFF 0%, #6A9EFF 50%, #48E2D9 100%))}
.cz-h{font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;font-size:clamp(26px,3vw,34px);line-height:1.12;letter-spacing:-.02em;font-weight:800;margin:14px 0 14px;color:#0f172a}
.cz-p{font-size:16.5px;line-height:1.6;color:#293649;margin:0 0 18px}
.cz-chips{display:flex;flex-direction:column;gap:9px;margin:0 0 26px}
.cz-chip{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#1e2b3d;line-height:1.45}
.cz-chip svg{flex-shrink:0;margin-top:3px;color:#287a4a}
.cz-cta{display:inline-flex;align-items:center;gap:9px;background:#0f172a;color:#fff;font-weight:700;font-size:14.5px;padding:12px 22px;border-radius:999px;transition:transform .15s ease,background .15s ease}
.cz-cta:hover{background:#1e293b;transform:translateY(-1px)}
.cz-cta svg{transition:transform .15s ease}
.cz-cta:hover svg{transform:translateX(3px)}

.cz-stagewrap{position:relative}
.cz-stage{position:relative;border-radius:28px;overflow:hidden;padding:clamp(14px,2vw,22px);background:var(--cz-stage-bg,linear-gradient(135deg,#efeaff 0%,#e7edff 48%,#e4fbf7 100%));box-shadow:0 30px 70px -34px var(--cz-stage-shadow,rgba(79,70,229,.32)),inset 0 0 0 1px rgba(255,255,255,.5)}
.cz-row.cz-flip .cz-stage{background:var(--cz-stage-bg-flip,var(--cz-stage-bg,linear-gradient(135deg,#e4fbf7 0%,#e7edff 50%,#efeaff 100%)))}
.cz-stage iframe{width:100%;height:clamp(440px,40vw,486px);border:0;display:block;background:transparent}

@media (max-width:900px){
  /* minmax(0,1fr), not 1fr. A plain 1fr track floors at the min-content of its
     widest item, so a stage illustration wider than the phone pushed the whole
     document sideways instead of shrinking inside its own frame. The mocks are
     already built to cope (min-width:0, overflow:hidden, text-overflow:ellipsis);
     the intrinsic track minimum was what kept that wiring from ever engaging. */
  .cz-row{grid-template-columns:minmax(0,1fr);gap:30px;padding:44px 0}
  .cz-copy,.cz-row.cz-flip .cz-copy{order:1;max-width:none}
  .cz-stagewrap,.cz-row.cz-flip .cz-stagewrap{order:2}
  .cz-stage iframe{height:430px}
}
@media (prefers-reduced-motion:reduce){.cz-cta{transition:none}}

/* ---- "More of the platform" multi-slider (slm-*) --------------------------- */
.slm-band{padding:30px 0 84px;background:linear-gradient(180deg,#ffffff 0%,#fbfcff 100%);border-bottom:1px solid #f1f5f9}
.slm-head{max-width:760px;margin:0 auto 22px;text-align:center;padding:0 28px}
.slm-kicker{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#576478}
.slm-kicker .slm-tick{width:18px;height:2px;border-radius:2px;background:var(--brand-gradient, linear-gradient(135deg, #8C6CFF 0%, #6A9EFF 50%, #48E2D9 100%))}
.slm-h{font-size:clamp(23px,2.7vw,30px);font-weight:800;letter-spacing:-.02em;margin:12px 0 8px;color:#0f172a}
.slm-sub{font-size:16px;line-height:1.5;color:#354358;margin:0}
.slm-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:4px 28px 10px;margin:0 auto 6px;max-width:1010px;scroll-snap-type:x proximity}
.slm-tabs::-webkit-scrollbar{display:none}
.slm-tab{scroll-snap-align:center;flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:13.5px;font-weight:700;color:#354358;background:#f1f5f9;border:1px solid #eef2f7;border-radius:999px;padding:9px 16px;cursor:pointer;white-space:nowrap;transition:color .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
.slm-tab .tdot{width:7px;height:7px;border-radius:50%;background:#cbd5e1;transition:background .18s ease}
.slm-tab:hover{color:#1e2b3d;background:#eef2f7}
.slm-tab.is-active{color:#0f172a;background:#ffffff;border-color:transparent;box-shadow:0 8px 20px -10px rgba(79,70,229,.45),0 0 0 1px rgba(140,108,255,.18)}
.slm-tab.is-active .tdot{background:var(--brand-gradient, linear-gradient(135deg, #8C6CFF 0%, #6A9EFF 50%, #48E2D9 100%))}
.slm-shell{max-width:1140px;margin:0 auto;padding:0 28px}
.slm-frame{position:relative;border:1px solid #eef2f7;border-radius:30px;background:#ffffff;box-shadow:0 40px 90px -54px rgba(15,23,42,.35);padding:clamp(18px,3vw,38px)}
.slm-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:center;min-height:486px}
.slm-copywrap{position:relative;min-height:360px}
.slm-panel{position:absolute;inset:0;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .42s ease,transform .42s cubic-bezier(.16,1,.3,1)}
.slm-panel.is-active{opacity:1;transform:none;pointer-events:auto}
.slm-stagewrap{position:relative}
.slm-stage{position:relative;border-radius:28px;overflow:hidden;padding:clamp(14px,2vw,22px);background:linear-gradient(135deg,#efeaff 0%,#e7edff 48%,#e4fbf7 100%);box-shadow:0 30px 70px -34px rgba(79,70,229,.32),inset 0 0 0 1px rgba(255,255,255,.5)}
.slm-stage iframe{width:100%;height:clamp(440px,40vw,486px);border:0;display:block;background:transparent}
.slm-ctrls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px}
.slm-arrow{width:42px;height:42px;border-radius:50%;border:1px solid #e2e8f0;background:#fff;color:#1e2b3d;display:grid;place-items:center;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.slm-arrow:hover{border-color:#cbd5e1;box-shadow:0 8px 18px -10px rgba(15,23,42,.4);transform:translateY(-1px)}
.slm-dots{display:flex;align-items:center;gap:8px}
.slm-dot{width:8px;height:8px;border-radius:50%;background:#dbe2ea;border:0;padding:0;cursor:pointer;transition:width .2s ease,background .2s ease}
.slm-dot.is-active{width:24px;border-radius:999px;background:var(--brand-gradient, linear-gradient(135deg, #8C6CFF 0%, #6A9EFF 50%, #48E2D9 100%))}
@media (max-width:900px){
  .slm-body{grid-template-columns:1fr;gap:26px;min-height:0}
  .slm-copywrap{position:static;min-height:0}
  .slm-panel{position:static;opacity:1;transform:none;pointer-events:auto;display:none}
  .slm-panel.is-active{display:block}
  .slm-stage iframe{height:430px}
}
@media (prefers-reduced-motion:reduce){
  .slm-tab,.slm-arrow,.slm-dot,.slm-panel{transition:none}
  .slm-panel{transform:none}
}

/* ---- "Two AIs, one approval queue" Mozart + Luna showcase (twoai-*) --------- */
.twoai{padding:84px 0;background:#ffffff;overflow:hidden;border-bottom:1px solid #f1f5f9}
.twoai-wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.twoai-head{text-align:center;max-width:720px;margin:0 auto 44px}
.twoai-eye{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#354358;background:#fff;border:1px solid #e2e8f0;padding:7px 14px;border-radius:999px;box-shadow:0 4px 14px -8px rgba(15,23,42,.25)}
.twoai-eye .twoai-d{width:8px;height:8px;border-radius:999px;background:linear-gradient(135deg,#8C6CFF,#48E2D9)}
.twoai-h2{font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;font-size:clamp(28px,4.2vw,44px);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:18px 0 0;color:#0f172a}
.twoai-grad{background:linear-gradient(110deg,#8C6CFF,#6A9EFF 55%,#48E2D9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.twoai-sub{font-size:clamp(15px,1.6vw,18px);color:#354358;margin:16px auto 0;max-width:600px;line-height:1.55}
.twoai-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.twoai-card{position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:22px;padding:30px;overflow:hidden;box-shadow:0 30px 70px -36px rgba(15,23,42,.35);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.twoai-card:hover{transform:translateY(-4px);box-shadow:0 44px 90px -40px rgba(15,23,42,.45)}
.twoai-card::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--g1),var(--g2))}
.twoai-card.mozart{--g1:#d8293e;--g2:#d8293e}
.twoai-card.luna{--g1:#8C6CFF;--g2:#48E2D9}
.twoai-badge{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px}
.twoai-mark{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;box-shadow:0 10px 24px -10px rgba(15,23,42,.5)}
.twoai-card.mozart .twoai-mark{background:linear-gradient(135deg,#d8293e,#d8293e)}
.twoai-card.luna .twoai-mark{background:linear-gradient(135deg,#8C6CFF,#48E2D9)}
.twoai-who{line-height:1.15}
.twoai-who b{display:block;font-size:17px;font-weight:800;color:#0f172a}
.twoai-who span{font-size:12.5px;font-weight:600;color:#576478}
.twoai-card h3{font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;font-size:22px;font-weight:800;letter-spacing:-.01em;margin:4px 0 10px;line-height:1.2;color:#0f172a}
.twoai-card p{font-size:14.5px;color:#354358;line-height:1.6;margin:0 0 18px}
.twoai-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:11px}
.twoai-list li{display:flex;gap:11px;align-items:flex-start;font-size:14px;font-weight:600;color:#1e2b3d}
.twoai-list svg{flex-shrink:0;margin-top:2px}
.twoai-card.mozart .twoai-list svg{color:#d8293e}
.twoai-card.luna .twoai-list svg{color:#8C6CFF}
.twoai-cta{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:14px;font-weight:800;color:#fff;padding:12px 20px;border-radius:12px;transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
.twoai-card.mozart .twoai-cta{background:linear-gradient(135deg,#d8293e,#d8293e);box-shadow:0 12px 26px -12px rgba(216,41,62,.7)}
.twoai-card.luna .twoai-cta{background:var(--brand-gradient, linear-gradient(135deg, #8C6CFF 0%, #6A9EFF 50%, #48E2D9 100%));box-shadow:0 12px 26px -12px rgba(106,158,255,.7)}
.twoai-cta:hover{transform:translateY(-2px);filter:brightness(1.05)}
.twoai-cta svg{transition:transform .15s ease}
.twoai-cta:hover svg{transform:translateX(3px)}
.twoai-foot{margin-top:34px;text-align:center}
.twoai-rule{font-size:15px;font-weight:700;color:#0f172a;display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid #e2e8f0;border-radius:999px;padding:10px 20px;box-shadow:0 10px 26px -16px rgba(15,23,42,.4)}
.twoai-rule b{background:linear-gradient(110deg,#8C6CFF,#48E2D9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
@media (max-width:860px){.twoai-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.twoai-card,.twoai-cta,.twoai-cta svg{transition:none}}

/* ============================================================
   Shared bits reused by the cz-band /features/* pages: .fpg-wrap, buttons,
   CTA row, trust stats, and the dark final-CTA. The .fpg-* hero / cards /
   loop / split / faq layout was retired when those pages moved to the
   cz-band animated style (2026-06-09). No em-dashes.
   ============================================================ */
.fpg-wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.fpg-cta-row{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:26px}
.fpg-btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-size:15px;font-weight:800;padding:13px 22px;border-radius:13px;transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
.fpg-btn.primary{color:#fff;background:var(--brand-gradient, linear-gradient(135deg, #8C6CFF 0%, #6A9EFF 50%, #48E2D9 100%));box-shadow:0 14px 30px -12px rgba(106,158,255,.7)}
.fpg-btn.primary:hover{transform:translateY(-2px);filter:brightness(1.05)}
.fpg-btn.ghost{color:#0f172a;background:#fff;border:1px solid #e2e8f0}
.fpg-btn.ghost:hover{border-color:#cbd5e1;background:#f8fafc}
.fpg-btn svg{transition:transform .15s ease}.fpg-btn:hover svg{transform:translateX(3px)}
.fpg-trust{display:flex;flex-wrap:wrap;gap:10px 22px}
.fpg-trust .t{display:flex;flex-direction:column;line-height:1.1}
.fpg-trust .t b{font-size:19px;font-weight:800}
.fpg-trust .t span{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#576478}
/* (retired with the cz-band move: .fpg- demo-frame, sections, loop/steps,
   feature cards, split highlight, and FAQ styles. The cz-band pages use the
   .cz-* and .czm-* systems instead.) */
/* final cta */
.fpg-final{position:relative;background:radial-gradient(110% 120% at 50% 0%,rgba(140,108,255,.14),transparent 55%),#0b1220;color:#fff;padding:72px 0;text-align:center;overflow:hidden}
.fpg-final h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.02em;margin:0 0 14px}
.fpg-final p{font-size:16px;color:#576478;max-width:520px;margin:0 auto 26px;line-height:1.6}
.fpg-final .fpg-btn.ghost{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.fpg-final .fpg-btn.ghost:hover{background:rgba(255,255,255,.12)}
.fpg-final .fine{margin-top:18px;font-size:13px;color:#354358}
/* (.fpg-* badge/mark/who and the hero/cards/loop responsive rules retired
   with the cz-band move.) */

/* ============================================================
   cz-band animated feature pages. Scroll-reveal (.cz-rv) for the zigzag
   rows + a CSS-only animated mockup library (.czm-*) so a page can have
   many zigzag rows with one real demo iframe + cheap moving mockups for
   the rest. Driven by .cz-rv.in (added by an IntersectionObserver on the
   page). Per-page accent: set --cz-grad on the page root. Added 2026-06-09
   (CZBAND_PAGES_PLAN.md). No em-dashes.
   ============================================================ */
.cz-rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.cz-rv.in{opacity:1;transform:none}
.cz-stagewrap.cz-rv{transform:translateY(22px) scale(.965)}
.cz-stagewrap.cz-rv.in{transform:none}
/* universal sequence-reveal: put class czm-stagger + style="--i:N" on items */
.czm-stagger{opacity:0;transform:translateY(9px)}
.cz-rv.in .czm-stagger{animation:czmIn .55s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(.18s + var(--i,0)*.13s)}
@keyframes czmIn{to{opacity:1;transform:none}}
/* Reduced motion. The mockup interiors are the subtle part here.
   Most .czm cards style a part with a default opacity:0 and only reach
   opacity:1 by running a play-gated animation with a `forwards` fill. So
   cancelling the animation outright does not freeze the card, it EMPTIES it:
   the reveal never runs, the fill never lands, and the reader gets a titled
   box with nothing inside. That is what shipped, on 31 of the 47 cz-band
   pages (measured), and it is the opposite of what the media query is for.
   Collapsing the timings instead lets every reveal finish in one frame, so
   the fill still lands and the card shows its finished state with no motion
   to perceive. iteration-count pins looping effects to a single pass, since
   a loop left running is exactly what the reader asked us to stop.
   Deliberately NOT setting animation-fill-mode: transient effects (a scan
   line, a token that flies away) are authored to end hidden, and forcing a
   fill would park them on screen. czm-lib.css loads after this file, so a
   mockup that already tuned its own reduced-motion state keeps winning the
   tie and is untouched. */
@media (prefers-reduced-motion:reduce){.cz-rv{opacity:1;transform:none;transition:none}.czm-stagger{opacity:1;transform:none}.czm *{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important}}
/* mockup card shell */
.czm{--cz-grad:var(--brand-gradient, linear-gradient(135deg, #8C6CFF 0%, #6A9EFF 50%, #48E2D9 100%));width:100%;max-width:432px;margin:0 auto;background:#fff;border:1px solid #e8edf4;border-radius:18px;box-shadow:0 24px 52px -30px rgba(15,23,42,.32);padding:18px 18px 20px;font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;color:#0f172a}
/* ---- Card motion polish (2026-07-29) ------------------------------------
   The mockups INSIDE these cards were already richly animated, but the card
   shells themselves never moved: no hover, no settle, no sequence. This adds
   that, and nothing more.

   Scope: keyed on .czm and .cz-chip, so it reaches the feature and marketing
   pages and CANNOT reach the legal and policy pages. Those use the cz-band
   layout but contain zero .czm cards and zero .cz-chip rows (verified), so
   animated cards never show up on a cookie or fair-housing policy.

   Two deliberate safety choices:
   1. Hover effects sit behind (hover:hover) and (pointer:fine). On a phone a
      hover rule can latch after a tap and leave a card stuck in its lifted
      state, which looks broken.
   2. The chip sequence uses `animation` that only EXISTS under .cz-rv.in, and
      never sets a default hidden state. If the reveal observer never fires,
      chips stay fully visible instead of vanishing. Adding a second layer of
      opacity:0 here would risk blanking real marketing copy. */
.czm{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease,border-color .45s ease}
@media (hover:hover) and (pointer:fine){
  .czm:hover{transform:translateY(-6px);border-color:rgba(140,108,255,.34);
    /* Layered shadow rather than a gradient pseudo-element: .czm children use
       ::before/::after in several mockups, so claiming one here would collide. */
    box-shadow:0 34px 74px -30px rgba(15,23,42,.42),0 0 0 1px rgba(140,108,255,.20),0 16px 46px -20px rgba(106,158,255,.38)}
  .cz-chip{transition:transform .3s cubic-bezier(.16,1,.3,1),color .3s ease}
  .cz-chip:hover{transform:translateX(3px);color:#0f172a}
}
/* Chips arrive in sequence with the row rather than all at once. */
.cz-rv.in .cz-chips .cz-chip{animation:czChipIn .5s cubic-bezier(.16,1,.3,1) both}
.cz-rv.in .cz-chips .cz-chip:nth-child(1){animation-delay:.16s}
.cz-rv.in .cz-chips .cz-chip:nth-child(2){animation-delay:.25s}
.cz-rv.in .cz-chips .cz-chip:nth-child(3){animation-delay:.34s}
.cz-rv.in .cz-chips .cz-chip:nth-child(4){animation-delay:.43s}
.cz-rv.in .cz-chips .cz-chip:nth-child(n+5){animation-delay:.52s}
@keyframes czChipIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
/* The card settles in with its shadow, so it reads as lifting into place.
   Gated on :not(.in) rather than paired with an .in override on purpose. The
   override form (.cz-stagewrap.cz-rv.in .czm) carries four classes, which beats
   .czm:hover on specificity and silently swallowed the hover shadow: the card
   lifted but never deepened. Scoping to :not(.in) means the rule stops matching
   once revealed, so the base shadow applies and :hover can win normally. */
.cz-stagewrap.cz-rv:not(.in) .czm{box-shadow:0 10px 26px -22px rgba(15,23,42,.30)}
@media (prefers-reduced-motion:reduce){
  .czm,.cz-chip{transition:none}
  .czm:hover{transform:none}
  .cz-rv.in .cz-chips .cz-chip{animation:none}
}
/* ------------------------------------------------------------------------ */
.czm-top{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800;color:#1e2b3d;margin-bottom:14px}
.czm-top .ic{width:20px;height:20px;border-radius:6px;background:var(--cz-grad);display:grid;place-items:center;color:#fff;flex-shrink:0}
.czm-top .ic svg{width:12px;height:12px}
.czm-top .ctx{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#576478;background:#f1f5f9;padding:3px 9px;border-radius:999px}
/* checklist */
.czm-check .it{display:flex;align-items:center;gap:11px;padding:9px 1px;font-size:13px;font-weight:600;color:#1e2b3d;border-bottom:1px solid #f1f5f9}
.czm-check .it:last-child{border-bottom:0}
.czm-check .it .bx{width:21px;height:21px;border-radius:7px;background:var(--cz-grad);display:grid;place-items:center;flex-shrink:0;color:#fff}
.czm-check .it .bx svg{width:12px;height:12px}
/* chat */
.czm-chat .b{max-width:84%;font-size:12.5px;line-height:1.45;padding:9px 12px;border-radius:14px;margin-bottom:9px}
.czm-chat .b.me{margin-left:auto;background:#f1f5f9;color:#0f172a;border-bottom-right-radius:5px}
.czm-chat .b.ai{background:linear-gradient(135deg,rgba(140,108,255,.1),rgba(72,226,217,.08));border:1px solid #e6e2fb;color:#0f172a;border-bottom-left-radius:5px}
/* score gauge */
.czm-score{text-align:center}
.czm-score .big{font-size:48px;font-weight:800;line-height:1;background:var(--cz-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:0;transform:scale(.82)}
.cz-rv.in .czm-score .big{animation:czmPop .6s cubic-bezier(.16,1,.3,1) .55s forwards}
@keyframes czmPop{to{opacity:1;transform:none}}
.czm-score .sub{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#576478;margin:4px 0 14px}
.czm-score .bar{height:9px;border-radius:999px;background:#eef2f7;overflow:hidden;margin-bottom:14px}
.czm-score .bar i{display:block;height:100%;width:0;background:var(--cz-grad);border-radius:999px}
.cz-rv.in .czm-score .bar i{animation:czmFill 1.3s cubic-bezier(.16,1,.3,1) .35s forwards}
@keyframes czmFill{to{width:84%}}
.czm-score .codes{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.czm-score .codes .c{font-size:10.5px;font-weight:700;color:#0e7490;background:#ecfeff;border-radius:999px;padding:3px 9px}
/* ledger */
.czm-ledger .lr{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;padding:9px 1px;border-bottom:1px solid #f1f5f9}
.czm-ledger .lr:last-child{border-bottom:0}
.czm-ledger .lr .d{color:#293649;font-weight:600}
.czm-ledger .lr .a{font-weight:800}.czm-ledger .lr .a.pos{color:#287a4a}.czm-ledger .lr .a.neg{color:#d8293e}
/* steps */
.czm-steps .st{display:flex;gap:11px;align-items:flex-start;margin-bottom:11px}
.czm-steps .st:last-child{margin-bottom:0}
.czm-steps .st .n{width:27px;height:27px;border-radius:8px;background:var(--cz-grad);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px;flex-shrink:0}
.czm-steps .st .t{font-size:12.5px;color:#354358;line-height:1.4}.czm-steps .st .t b{display:block;font-weight:800;font-size:13px;color:#0f172a}
/* pipeline */
.czm-pipe{display:flex;gap:8px}
.czm-pipe .col{flex:1;background:#f8fafc;border:1px solid #eef2f7;border-radius:11px;padding:9px 7px}
.czm-pipe .col .hd{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#576478;margin-bottom:8px;text-align:center}
.czm-pipe .ch{font-size:11px;font-weight:700;background:#fff;border:1px solid #e8edf4;border-radius:8px;padding:6px 7px;margin-bottom:6px;text-align:center}
/* triage */
.czm-triage .ph{height:92px;border-radius:12px;background:linear-gradient(135deg,#1e293b,#475569);display:grid;place-items:center;color:rgba(255,255,255,.5);margin-bottom:13px}
.czm-triage .tg{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.czm-triage .tg .c{background:#f8fafc;border:1px solid #eef2f7;border-radius:11px;padding:9px 11px}
.czm-triage .tg .c .k{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#576478}
.czm-triage .tg .c .v{font-size:13px;font-weight:800;margin-top:2px}

/* ============================================================================
   PER-PAGE ACCENT + STRUCTURAL VARIETY SYSTEM   (added 2026-06-09)
   ----------------------------------------------------------------------------
   The cz-band feature pages were chromatically identical: every .cz-stage and
   every .czm mockup rendered the same purple-blue-teal default, because the
   per-page accent var was never set. This block lets ONE attribute on a page,
   data-accent="money", recolor the whole page (stage + every mockup internal)
   with ZERO per-mock rebuild, plus a set of OPT-IN layout/treatment modifiers
   to break the every-row-is-identical rhythm. Fully additive and backward
   compatible: a page with no data-accent / no modifier class renders exactly
   as before (the defaults above already fall back to today's values).
   Every accent is a tasteful cousin of the brand gradient (#8C6CFF/#6A9EFF/
   #48E2D9), so the site stays on-brand. No em-dashes (Rule 2).
   ============================================================================ */

/* (1) ACCENT TOKENS. Set data-accent on the page's .cz-band (or a wrapper that
   contains the band). --accent-grad recolors mockups; --cz-stage-bg recolors
   the stage (flip rows inherit it via the fallback chain on .cz-flip above). */
[data-accent] .czm{--cz-grad:var(--accent-grad);--g:var(--accent-grad)}
[data-accent] .cz-grad,[data-accent] .cz-tick,[data-accent] .cz-dot{background-image:var(--accent-grad)}
[data-accent] .fpg-btn.primary{background-image:var(--accent-btn,var(--accent-grad))}
[data-accent] .cz-eyebrow{color:var(--accent-ink,#6A9EFF)}

[data-accent="brand"]{--accent-grad:var(--brand-gradient, linear-gradient(135deg, #8C6CFF 0%, #6A9EFF 50%, #48E2D9 100%));--cz-stage-bg:linear-gradient(135deg,#efeaff 0%,#e7edff 48%,#e4fbf7 100%);--accent-ink:#6A9EFF}
[data-accent="trust"]{--accent-grad:linear-gradient(135deg,#4F6BFF,#6A9EFF 55%,#22D3EE);--cz-stage-bg:linear-gradient(135deg,#e6ecff 0%,#e7edff 50%,#e0f6fb 100%);--accent-ink:#4F6BFF}
[data-accent="money"]{--accent-grad:linear-gradient(135deg,#0EA47A,#47ae72 50%,#48E2D9);--cz-stage-bg:linear-gradient(135deg,#e1f6ee 0%,#e6f6f2 48%,#e3fbf6 100%);--accent-ink:#0EA47A;--cz-stage-shadow:rgba(71,174,114,.26)}
[data-accent="ops"]{--accent-grad:linear-gradient(135deg,#0E9FCF,#38BDF8 55%,#6A9EFF);--cz-stage-bg:linear-gradient(135deg,#e1f6fb 0%,#e6f4ff 50%,#e7edff 100%);--accent-ink:#0E9FCF;--cz-stage-shadow:rgba(14,159,207,.24)}
[data-accent="docs"]{--accent-grad:linear-gradient(135deg,#7C5CFF,#8C6CFF 50%,#6A9EFF);--cz-stage-bg:linear-gradient(135deg,#efeaff 0%,#ece9ff 50%,#e7edff 100%);--accent-ink:#7C5CFF}
[data-accent="growth"]{--accent-grad:linear-gradient(135deg,#A855F7,#8C6CFF 50%,#22D3EE);--cz-stage-bg:linear-gradient(135deg,#f4eafe 0%,#efeaff 50%,#e7edff 100%);--accent-ink:#9333EA}
[data-accent="amber"]{--accent-grad:linear-gradient(135deg,#F59E0B,#FB923C 50%,#FBBF24);--cz-stage-bg:linear-gradient(135deg,#fdf3e3 0%,#fbf1e8 50%,#fef6e0 100%);--accent-ink:#C2740B;--cz-stage-shadow:rgba(245,158,11,.26)}
[data-accent="slate"]{--accent-grad:linear-gradient(135deg,#475569,#64748B 55%,#334155);--cz-stage-bg:linear-gradient(135deg,#eef2f7 0%,#e9edf3 50%,#e7ebf2 100%);--accent-ink:#475569;--cz-stage-shadow:rgba(51,65,85,.28);--accent-btn:linear-gradient(135deg,#4F6BFF,#6A9EFF 55%,#22D3EE)}

/* (2) ROW-LAYOUT VARIANTS. A page adds one class to a single .cz-row to break
   the rigid 50/50 metronome. They re-collapse to one column on mobile below. */
.cz-row.cz-stage-wide{grid-template-columns:.82fr 1.18fr}
.cz-row.cz-copy-wide{grid-template-columns:1.16fr .84fr}
.cz-row.cz-stack{grid-template-columns:1fr;max-width:780px;margin-left:auto;margin-right:auto;text-align:center;gap:30px}
.cz-row.cz-stack .cz-copy{max-width:none;margin:0 auto}
.cz-row.cz-stack .cz-chips{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:9px 18px}
.cz-row.cz-stack .fpg-cta-row,.cz-row.cz-stack .fpg-trust{justify-content:center}

/* (3) STAGE TREATMENTS. Opt-in skins layered over the accent gradient (no extra
   markup). Use one or two per page on the rows that benefit, not everywhere. */
.cz-stage.cz-grid{background-image:radial-gradient(circle at 1px 1px,rgba(15,23,42,.06) 1px,transparent 0),var(--cz-stage-bg,linear-gradient(135deg,#efeaff,#e7edff 48%,#e4fbf7));background-size:15px 15px,cover}
.cz-stage.cz-graph{background-image:linear-gradient(rgba(15,23,42,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.05) 1px,transparent 1px),var(--cz-stage-bg,linear-gradient(135deg,#efeaff,#e7edff 48%,#e4fbf7));background-size:26px 26px,26px 26px,cover}
.cz-stage.cz-dark{background:radial-gradient(120% 130% at 28% 0%,rgba(140,108,255,.22),transparent 60%),#0b1220;--cz-stage-shadow:rgba(2,6,23,.55)}
.cz-stage.cz-dark::after{content:'';position:absolute;inset:0;background:radial-gradient(60% 60% at 80% 100%,rgba(72,226,217,.14),transparent 70%);pointer-events:none}

/* (4) CONNECTIVE SCROLL-THREAD. Opt-in: add cz-thread to the .cz-band. Draws a
   thin accent spine down the centre gutter so the rows read as one journey.
   Pure CSS, no new JS, sits behind the cards. Hidden on mobile (single column).
   isolation:isolate makes .cz-wrap its own stacking context so the spine
   (z-index:-1) sits BEHIND every wrap child, not just .cz-row. Without it the
   positioned z-index:0 spine painted OVER the in-flow centered sections
   (.mkt-caps card grid, .mkt-head, .mkt-faq, legal prose), the overlap bug. */
.cz-band.cz-thread .cz-wrap{position:relative;isolation:isolate}
.cz-band.cz-thread .cz-wrap::before{content:'';position:absolute;left:50%;top:170px;bottom:120px;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,var(--accent-ink,#8C6CFF) 6%,var(--accent-ink,#6A9EFF) 94%,transparent);opacity:.22;z-index:-1;border-radius:2px}
.cz-band.cz-thread .cz-row{position:relative;z-index:1}
/* The spine threads only the zigzag rows. Every OTHER direct child of the wrap
   (centered headings, card grids, FAQ, other-markets, legal/comparison prose)
   masks the z-index:-1 spine with the band's own white so the line never runs
   through a centered section. .cz-band bg is #fff (Rule 32); white-on-white is
   invisible, it just hides the line. Rows stay transparent so the spine shows
   in their centre gutter. cz-rows are always DIRECT children of .cz-wrap. */
.cz-band.cz-thread .cz-wrap > *:not(.cz-row){position:relative;background:#fff}
/* The gaps BETWEEN two consecutive centered sections (their top margins) are
   transparent, so the z-index:-1 spine peeked through as a short stub. A
   non-row section that follows another non-row section paints a white riser up
   over that gap, on the spine's own z-index:-1 layer (covers the line, stays
   behind all content, white-on-white-band so invisible). Never targets the
   first tail section (it follows a .cz-row), so the last row keeps its spine. */
.cz-band.cz-thread .cz-wrap > *:not(.cz-row) + *:not(.cz-row)::before{content:'';position:absolute;left:50%;bottom:100%;width:6px;height:80px;transform:translateX(-50%);background:#fff;z-index:-1}

/* (5) CHIP VARIETY. Opt-in numbered step pills to replace the green-check tic on
   a row or two per page. Add cz-chips-num to .cz-chips; the counter auto-numbers. */
.cz-chips.cz-chips-num{counter-reset:czchip}
.cz-chips.cz-chips-num .cz-chip{counter-increment:czchip;align-items:center}
.cz-chips.cz-chips-num .cz-chip svg{display:none}
.cz-chips.cz-chips-num .cz-chip::before{content:counter(czchip);flex-shrink:0;width:20px;height:20px;border-radius:7px;background:var(--accent-grad,var(--brand-gradient, linear-gradient(135deg, #8C6CFF 0%, #6A9EFF 50%, #48E2D9 100%)));color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800}

/* (6) CALLOUT ROW. A single full-width tinted proof line, not eyebrow->h->chips.
   Drop one per page on the strongest claim. <div class="cz-callout"> ... */
.cz-callout{max-width:1140px;margin:8px auto;padding:0 28px}
.cz-callout .in{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--cz-stage-bg,linear-gradient(135deg,#efeaff,#e7edff 48%,#e4fbf7));border:1px solid rgba(255,255,255,.6);border-radius:20px;padding:24px 28px;box-shadow:0 24px 56px -38px var(--cz-stage-shadow,rgba(79,70,229,.3))}
.cz-callout .big{font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;font-size:clamp(30px,4vw,44px);font-weight:800;line-height:1;letter-spacing:-.02em;background:var(--accent-grad,var(--brand-gradient, linear-gradient(135deg, #8C6CFF 0%, #6A9EFF 50%, #48E2D9 100%)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;flex:0 0 auto}
.cz-callout .txt{font-size:16px;line-height:1.5;color:#1e2b3d;font-weight:600;min-width:240px;flex:1}
.cz-callout .txt b{color:#0f172a;font-weight:800}

@media (max-width:900px){
  .cz-row.cz-stage-wide,.cz-row.cz-copy-wide{grid-template-columns:1fr}
  .cz-band.cz-thread .cz-wrap::before{display:none}
}
@media (prefers-reduced-motion:reduce){.cz-stage.cz-dark::after{display:none}}

/* ============================================================
   Animated Who/Problem image-card primitives (added 2026-06-23).
   Shared by get_started, referral, ask_ai, ai_operator so the
   "Who it's for / problem it solves" framing bands carry a visual
   card instead of a text-only column (Rule 32). CSS-only loops;
   --cz-grad inherits the page accent and falls back to brand. No
   em-dashes. Single source: do not re-inline these on a page.
   ============================================================ */
/* WHO: an AI sweep travels down a workload checklist, checks draw */
.who-jobs{display:flex;flex-direction:column;gap:7px}
.who-job{position:relative;display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;background:#f8fafc;border:1px solid #eef2f7;font-size:13px;font-weight:600;color:#1e2b3d;overflow:hidden}
.who-job .ji{width:24px;height:24px;border-radius:7px;background:#fff;border:1px solid #e8edf4;display:grid;place-items:center;flex-shrink:0;color:#6A9EFF;position:relative;z-index:1}
.who-job .ji svg{width:13px;height:13px}
.who-job .jt{position:relative;z-index:1}
.who-job .jchk{margin-left:auto;width:21px;height:21px;border-radius:7px;background:var(--cz-grad,var(--brand-gradient, linear-gradient(135deg, #8C6CFF 0%, #6A9EFF 50%, #48E2D9 100%)));display:grid;place-items:center;color:#fff;flex-shrink:0;position:relative;z-index:1}
.who-job .jchk svg{width:12px;height:12px}
.who-job .jchk svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:whoDraw .5s ease forwards;animation-delay:calc(.25s + var(--i)*.14s)}
.who-job::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(140,108,255,.18),rgba(72,226,217,.10) 60%,transparent);opacity:0;animation:whoSweep 4.2s ease-in-out infinite;animation-delay:calc(var(--i)*.42s)}
.who-job::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cz-grad,var(--brand-gradient, linear-gradient(135deg, #8C6CFF 0%, #6A9EFF 50%, #48E2D9 100%)));opacity:0;animation:whoSweep 4.2s ease-in-out infinite;animation-delay:calc(var(--i)*.42s)}
@keyframes whoDraw{to{stroke-dashoffset:0}}
@keyframes whoSweep{0%,16%{opacity:0}5%{opacity:1}11%{opacity:.55}}
.who-foot{margin-top:14px;display:flex;align-items:center;gap:11px;font-size:12.5px;font-weight:800;color:#fff;background:var(--cz-grad,var(--brand-gradient, linear-gradient(135deg, #8C6CFF 0%, #6A9EFF 50%, #48E2D9 100%)));border-radius:12px;padding:12px 14px;box-shadow:0 14px 26px -14px rgba(106,158,255,.75)}
.who-foot svg{width:15px;height:15px;flex-shrink:0}
.who-team{display:flex;gap:5px;margin-left:auto}
.who-team i{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.9);display:inline-block}
.who-team i:nth-child(1){background:#8C6CFF;animation:teamPulse 2.4s ease-in-out infinite}
.who-team i:nth-child(2){background:#6A9EFF;animation:teamPulse 2.4s ease-in-out infinite .25s}
.who-team i:nth-child(3){background:#48E2D9;animation:teamPulse 2.4s ease-in-out infinite .5s}
@keyframes teamPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.22);opacity:1}}
/* PROBLEM: scattered chips converge + merge into one bar */
.prob-stage{position:relative;height:216px;border-radius:13px;background:radial-gradient(120% 120% at 50% 120%,rgba(106,158,255,.08),transparent 60%);overflow:hidden;display:grid;place-items:center}
.prob-field{position:relative;width:300px;height:200px}
@media(max-width:520px){.prob-field{transform:scale(.8)}}
.prob-tool{--x:0;--y:0;--r:0;position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#354358;background:#fff;border:1px solid #e8edf4;border-radius:9px;padding:7px 10px;white-space:nowrap;box-shadow:0 8px 18px -12px rgba(15,23,42,.4);transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--r));animation:probMerge 5.4s cubic-bezier(.16,1,.3,1) infinite}
.prob-tool .pd{width:8px;height:8px;border-radius:2px;background:#cbd5e1;flex-shrink:0}
.prob-tool .px{position:absolute;top:-6px;right:-6px;width:15px;height:15px;border-radius:50%;background:#fae5e8;color:#d8293e;display:grid;place-items:center;font-size:10px;font-weight:900;line-height:1;animation:probX 5.4s ease-in-out infinite}
@keyframes probMerge{0%{transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--r));opacity:1}44%{transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--r));opacity:1}66%{transform:translate(-50%,-50%) translate(0,0) rotate(0deg) scale(.55);opacity:0}100%{transform:translate(-50%,-50%) translate(0,0) rotate(0deg) scale(.55);opacity:0}}
@keyframes probX{0%,40%{opacity:1;transform:scale(1)}55%,100%{opacity:0;transform:scale(.4)}}
.prob-one{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8);display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:800;color:#0f172a;background:#fff;border:1px solid #e6e2fb;border-radius:12px;padding:12px 16px;box-shadow:0 16px 34px -16px rgba(106,158,255,.6);opacity:0;animation:probOne 5.4s cubic-bezier(.16,1,.3,1) infinite}
.prob-one .dot{width:10px;height:10px;border-radius:50%;background:var(--cz-grad,var(--brand-gradient, linear-gradient(135deg, #8C6CFF 0%, #6A9EFF 50%, #48E2D9 100%)));flex-shrink:0;box-shadow:0 0 0 4px rgba(106,158,255,.16)}
@keyframes probOne{0%,58%{opacity:0;transform:translate(-50%,-50%) scale(.8)}72%,93%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.85)}}
.prob-ring{position:absolute;left:50%;top:50%;width:18px;height:18px;border-radius:50%;border:2px solid #6A9EFF;transform:translate(-50%,-50%);opacity:0;animation:probRing 5.4s ease-out infinite}
@keyframes probRing{0%,56%{opacity:0;transform:translate(-50%,-50%) scale(1)}62%{opacity:.7}78%{opacity:0;transform:translate(-50%,-50%) scale(7)}100%{opacity:0}}
.prob-cap{display:flex;justify-content:space-between;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#576478;margin-top:10px}
.prob-cap b{color:#0f172a}
@media(prefers-reduced-motion:reduce){
  .who-job .jchk svg path{stroke-dashoffset:0}
  .prob-tool{opacity:.55}
  .prob-one{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

/* ============================================================================
   PRODUCT SHOT (.ps-*)   added 2026-08-07
   ----------------------------------------------------------------------------
   Browser-framed screenshot of a real product screen, used by the
   _product_shot.html macro. Shared here rather than copied per page so the
   frame stays identical everywhere it appears.
   Renders near 1:1 (source art is 2428px wide, shown at up to ~1140), because
   a dashboard screenshot scaled below about half is unreadable and stops
   earning its scroll. Below 760px pages should pass show_on_mobile=false on
   all but their strongest one.
   ========================================================================== */
.ps-wrap{max-width:1140px;margin:36px auto 0}
.ps-cap{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ps-cap b{font-size:18px;font-weight:800;color:#0f172a;letter-spacing:-.015em}
.ps-cap span{font-size:14px;line-height:1.55;color:#354358;flex:1;min-width:230px}
.ps-frame{border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#0b1120,#070d1c);
  border:1px solid rgba(255,255,255,.13);box-shadow:0 34px 76px -44px rgba(15,23,42,.85),0 0 0 1px rgba(140,108,255,.07)}
.ps-frame .ps-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border-bottom:1px solid rgba(255,255,255,.08)}
.ps-frame .ps-bar i{width:9px;height:9px;border-radius:50%;display:block;background:linear-gradient(180deg,#334155,#1e293b)}
.ps-frame .ps-bar .ps-url{margin-left:10px;font-size:11px;font-weight:700;color:#354358;letter-spacing:.01em}
.ps-frame img{display:block;width:100%;height:auto}
/* On a dark band the caption has to invert. */
.ps-on-dark .ps-cap b{color:#fff}
.ps-on-dark .ps-cap span{color:#576478}
@media (max-width:760px){ .ps-wrap.ps-hide-sm{display:none} }