/* The product pages (Security Awareness Training, Email Incident Response).
   Everything shared with the homepage (bar, products menu, dialogs, footer)
   is in org.css; this file is the product hero, the live-demo frame and the
   cross-sell to the other product. */

/* ---- hero ---------------------------------------------------------------- */
.sat-hero{padding:7.5rem 1.5rem 9rem;text-align:center;position:relative;overflow:hidden}
.sat-hero .hero2-inner{max-width:820px;margin:0 auto;position:relative;z-index:1}
.sat-hero .hero2-lede{margin:1.4rem auto 0}
.sat-hero .hero2-ctas{justify-content:center}
.sat-hero .hero2-meta{justify-content:center}
@media(max-width:800px){.sat-hero{padding:5rem 1.2rem 7rem}}
/* Wide screens: org.css makes the hero two columns (words, then the product).
   The words go back to the left so they line up with the scene beside them. */
@media(min-width:1040px){
  .sat-hero{text-align:left;padding:4.6rem max(1.5rem,calc((100% - 1440px) / 2)) calc(3rem + var(--wave-h))}
  .sat-hero .hero2-inner{margin:0}
  .sat-hero .hero2-lede{margin:1.4rem 0 0}
  .sat-hero .hero2-ctas,.sat-hero .hero2-meta{justify-content:flex-start}
}

/* ---- the hero scene ----------------------------------------------------
   The shared base (the box, cards, chips, the loop's fade) is in org.css,
   because the homepage has a scene too. Below is each product's own scene. */

/* -- Email Incident Response: one email from inbox to closed --
   s1 the cursor reaches Report · s2 reported · s3 it reaches the queue
   s4 three more reports are grouped with it · s5 CyberWatch AI checks it
   s6 the analyst calls it phishing · s7 the follow-up runs · s8 Maya hears back
   It fills the height of the words beside it (align-self:stretch) and is
   drawn from the top, so it starts level with the eyebrow. Its tallest step
   is kept within the words' height (about 410px at the narrowest headline),
   so it ends near the "14 days free" row and never makes the hero taller or
   moves the page below. */
.ha-rp{align-self:stretch}
/* the stage hangs from the top of that box instead of sizing it, so however
   tall a step gets, the hero (and the page below it) stays exactly put */
.ha-rp .ha-stage{position:absolute;top:0;left:0;right:0}
.ha-rp .ha-top{padding-top:7px;padding-bottom:7px}
.ha-rp .ha-ava{width:26px;height:26px}
.ha-inbox{width:86%;padding-bottom:22px}
.ha-queue{width:88%;margin:-20px 0 0 auto;z-index:2}
.ha-mail{position:relative;display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--ha-line)}
.ha-mail-sus{background:rgba(139,157,255,.08);transition:background .4s}
.ha-mail-sus::before{content:'';position:absolute;left:5px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--ha-blue);transition:opacity .3s}
.ha-mail-sus>:not(.ha-sent){transition:opacity .3s .2s}
/* once reported, the email gives way to what Maya sees: first that it went
   to her security team, then, at the end, that she was right */
.ha-sent{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:0 14px;font-size:12px;color:var(--ha-text);
  opacity:0;transform:translateY(6px);transition:opacity .35s,transform .45s var(--ha-ease)}
.ha-sent svg{flex-shrink:0;color:var(--ha-blue)}
.ha-sent .ha-chip{margin-left:auto}
.ha-right svg{color:var(--ha-green)}
.ha.s2 .ha-mail-sus>:not(.ha-sent),.ha.s2 .ha-mail-sus::before{opacity:0}
.ha.s2 .ha-mail-sus>.ha-sent:not(.ha-right){opacity:1;transform:none;transition-delay:.35s}
.ha.s8 .ha-mail-sus{background:rgba(74,222,128,.09)}
.ha.s8 .ha-mail-sus>.ha-sent:not(.ha-right){opacity:0;transition-delay:0s}
.ha.s8 .ha-mail-sus>.ha-right{opacity:1;transform:none;transition-delay:.2s}
.ha-rep{position:relative;flex-shrink:0;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:7px;
  background:#fb7185;color:#1a0b0e;font-size:11px;font-weight:700;transition:transform .15s}
.ha-cursor{position:absolute;right:-8px;bottom:-16px;width:20px;height:20px;opacity:0;transform:translate(70px,60px);
  transition:transform .8s var(--ha-ease),opacity .3s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.ha.s1 .ha-cursor{opacity:1;transform:none}
.ha.s2 .ha-rep{transform:scale(.9)}
.ha-hd{margin-left:auto}
.ha-hd em{margin:0}
.ha-hd>:last-child{opacity:0;transform:scale(.7)}
.ha.s8 .ha-hd>:first-child{opacity:0;transform:scale(.7)}
.ha.s8 .ha-hd>:last-child{opacity:1;transform:none}
.ha-q{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--ha-line)}
.ha-q:last-child{border-bottom:none}
/* the closed reports make room for the checks and the follow-up */
.ha-q-old{opacity:.55;max-height:70px;overflow:hidden;
  transition:max-height .5s var(--ha-ease),padding .5s var(--ha-ease),opacity .35s,border-color .35s}
.ha.s5 .ha-q-old{max-height:0;padding-top:0;padding-bottom:0;opacity:0;border-color:transparent}
.ha-q-new{max-height:0;padding-top:0;padding-bottom:0;opacity:0;transform:translateX(-16px);overflow:hidden;border-color:transparent;
  transition:max-height .5s var(--ha-ease),padding .5s var(--ha-ease),opacity .4s .1s,transform .5s var(--ha-ease) .1s,background .4s}
.ha.s3 .ha-q-new{max-height:90px;padding-top:8px;padding-bottom:8px;opacity:1;transform:none;border-color:var(--ha-line);background:rgba(139,157,255,.08)}
.ha.s6 .ha-q-new{background:rgba(248,113,113,.07)}
.ha-more{color:var(--ha-blue);opacity:0;transition:opacity .3s}
.ha.s4 .ha-more{opacity:1}
.ha-q-new .ha-swap>:last-child{opacity:0;transform:scale(.7)}
.ha.s6 .ha-q-new .ha-swap>:first-child{opacity:0;transform:scale(.7)}
.ha.s6 .ha-q-new .ha-swap>:last-child{opacity:1;transform:none}
/* CyberWatch AI's checks, one finding at a time, then the analyst's call */
.ha-an{max-height:0;opacity:0;overflow:hidden;padding:0 14px;border-bottom:1px solid transparent;
  transition:max-height .6s var(--ha-ease),padding .6s var(--ha-ease),opacity .4s,border-color .4s}
.ha.s5 .ha-an{max-height:240px;opacity:1;padding:10px 14px;border-color:var(--ha-line)}
.ha-an-h{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--ha-blue)}
.ha-an-h svg{flex-shrink:0}
.ha-risk{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--ha-mut);font-weight:600}
.ha-risk .ha-bar{width:70px}
.ha-risk .ha-bar i{transition-delay:.3s}
.ha.s5 .ha-risk .ha-bar i{width:92%}
.ha-risk b{min-width:18px;text-align:right;color:var(--ha-red);font-variant-numeric:tabular-nums}
.ha-an-h b{color:var(--ha-red)}
.ha-anl{justify-items:start}
.ha-anl>:last-child{opacity:0;transform:scale(.9);color:var(--ha-text);font-weight:600}
.ha-f{display:flex;align-items:flex-start;gap:8px;margin-top:5px;max-height:40px;overflow:hidden;font-size:11px;color:var(--ha-mut);
  opacity:0;transform:translateY(6px);
  transition:opacity .35s,transform .45s var(--ha-ease),max-height .45s var(--ha-ease),margin .45s var(--ha-ease)}
.ha-f svg{flex-shrink:0;margin-top:1px;color:var(--ha-amber)}
.ha.s5 .ha-f{opacity:1;transform:none}
.ha.s5 .ha-f1{transition-delay:.5s}
.ha.s5 .ha-f2{transition-delay:1.1s}
.ha.s5 .ha-f3{transition-delay:1.7s}
.ha-verdict{display:flex;align-items:center;gap:8px;margin-top:7px;padding:5px 10px;max-height:44px;overflow:hidden;border-radius:9px;font-size:11.5px;
  background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.3);opacity:0;transform:translateY(6px);
  transition:opacity .35s,transform .45s var(--ha-ease),max-height .45s var(--ha-ease),margin .45s var(--ha-ease),padding .45s var(--ha-ease)}
.ha-verdict .ha-ava{width:20px;height:20px;font-size:8.5px;border-radius:6px}
.ha.s6 .ha-verdict{opacity:1;transform:none}
/* when the follow-up opens, the findings and the call fold into the
   panel's one line, so the two never stack up */
.ha.s7 .ha-an .ha-f,.ha.s7 .ha-an .ha-verdict{max-height:0;margin-top:0;padding-top:0;padding-bottom:0;border-width:0;opacity:0;transition-delay:0s}
.ha.s7 .ha-anl>:first-child{opacity:0;transform:scale(.9)}
.ha.s7 .ha-anl>:last-child{opacity:1;transform:none;transition-delay:.3s}
/* the follow-up, ticked off in turn */
.ha-acts{max-height:0;opacity:0;overflow:hidden;padding:0 14px;transition:max-height .5s var(--ha-ease),padding .5s var(--ha-ease),opacity .3s}
.ha.s7 .ha-acts{max-height:150px;opacity:1;padding:10px 14px 12px}
.ha-acts small{display:block;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ha-dim);margin-bottom:4px}
.ha-act{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:11.5px;color:var(--ha-dim);transition:color .3s}
.ha-act i{width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);flex-shrink:0;display:flex;align-items:center;justify-content:center;
  color:#0b0d13;transition:background .3s,border-color .3s}
.ha-act i svg{opacity:0;transition:opacity .2s}
.ha.s7 .ha-act{color:var(--ha-text)}
.ha.s7 .ha-act i{background:var(--ha-green);border-color:var(--ha-green)}
.ha.s7 .ha-act i svg{opacity:1}
.ha.s7 .ha-a1,.ha.s7 .ha-a1 i,.ha.s7 .ha-a1 i svg{transition-delay:.4s}
.ha.s7 .ha-a2,.ha.s7 .ha-a2 i,.ha.s7 .ha-a2 i svg{transition-delay:1.1s}
.ha.s7 .ha-a3,.ha.s7 .ha-a3 i,.ha.s7 .ha-a3 i svg{transition-delay:1.8s}

/* -- Security Awareness Training: test, train, measure --
   s1 CyberWatch AI writes it · s2 approved · s3 sent · s4 results arrive
   s5 who clicked · s6 lessons assigned · s7, s8 lessons finished
   s9 the score and the riskiest team improve
   Nothing here changes height between steps, so the page below never moves. */
.ha-sim{width:90%}
.ha-pair{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:12px;width:92%;margin:-22px 0 0 auto;position:relative;z-index:2}
.ha-pair .ha-card{min-width:0}
/* the campaign's status, one chip per stage */
.ha-st5>*{opacity:0;transform:scale(.7)}
.ha:not(.s2) .ha-st5>:nth-child(1),.ha.s2:not(.s3) .ha-st5>:nth-child(2),.ha.s3:not(.s4) .ha-st5>:nth-child(3),
.ha.s4:not(.s8) .ha-st5>:nth-child(4),.ha.s8 .ha-st5>:nth-child(5){opacity:1;transform:none}
.ha-pipe{display:flex;flex-wrap:wrap;gap:6px 16px;padding:10px 14px 0;font-size:11px;color:var(--ha-dim)}
.ha-pipe span{display:inline-flex;align-items:center;gap:5px;opacity:.35;transition:opacity .4s,color .4s}
.ha-pipe svg{flex-shrink:0}
.ha.s1 .ha-p1,.ha.s2 .ha-p2,.ha.s3 .ha-p3{opacity:1;color:var(--ha-text)}
.ha-p1 svg{color:var(--ha-blue)}
.ha-p2 svg{color:var(--ha-green)}
.ha-p3 svg{color:#22d3ee}
/* the bottom padding is the room the cards below overlap, so they never
   cover a figure */
.ha-stats{padding:12px 14px 40px;display:flex;flex-direction:column;gap:10px}
.ha-stat{display:grid;grid-template-columns:62px minmax(0,1fr) 26px;align-items:center;gap:10px;font-size:11.5px;color:var(--ha-mut)}
.ha-stat b{text-align:right;color:var(--ha-text);font-variant-numeric:tabular-nums}
.ha-bar{height:7px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
.ha-bar i{display:block;height:100%;width:0;border-radius:4px;background:var(--c);transition:width 1s var(--ha-ease)}
.ha.s3 .ha-b1 i{width:100%}
.ha.s4 .ha-b2 i{width:78%}
.ha.s4 .ha-b3 i{width:15%;transition-delay:.3s}
.ha.s4 .ha-b4 i{width:45%;transition-delay:.6s}
.ha-who{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--ha-mut);opacity:0;transform:translateY(6px);
  transition:opacity .35s,transform .45s var(--ha-ease)}
.ha-who b{color:var(--ha-red)}
.ha.s5 .ha-who{opacity:1;transform:none}
.ha-avs{display:flex;flex-shrink:0}
.ha-avs .ha-ava{width:22px;height:22px;font-size:8.5px;border-radius:50%;border:2px solid #0d1018;margin-left:-6px}
.ha-avs .ha-ava:first-child{margin-left:0}
.ha-les{display:flex;align-items:center;gap:9px;padding:10px 12px;border-bottom:1px solid var(--ha-line);opacity:0;transform:translateY(8px);
  transition:opacity .35s,transform .45s var(--ha-ease)}
.ha-les:last-child{border-bottom:none}
.ha-les .ha-ava{width:24px;height:24px;font-size:10px;border-radius:7px}
.ha.s6 .ha-les{opacity:1;transform:none}
.ha.s6 .ha-les+.ha-les{transition-delay:.25s}
.ha.s6 .ha-les+.ha-les+.ha-les{transition-delay:.5s}
.ha-les .ha-swap>:last-child{opacity:0;transform:scale(.7)}
.ha.s7 .ha-l1 .ha-swap>:first-child,.ha.s8 .ha-l2 .ha-swap>:first-child,.ha.s8 .ha-l3 .ha-swap>:first-child{opacity:0;transform:scale(.7)}
.ha.s7 .ha-l1 .ha-swap>:last-child,.ha.s8 .ha-l2 .ha-swap>:last-child,.ha.s8 .ha-l3 .ha-swap>:last-child{opacity:1;transform:none}
.ha.s8 .ha-l3 .ha-swap>*{transition-delay:.5s}
.ha-score{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 10px 14px;text-align:center}
.ha-ring{position:relative;width:96px;height:96px}
.ha-ring svg{display:block;transform:rotate(-90deg)}
.ha-ring-arc{stroke:var(--ha-amber);stroke-dashoffset:88.2;transition:stroke-dashoffset 1.3s var(--ha-ease),stroke .5s}
.ha.s9 .ha-ring-arc{stroke:var(--ha-green);stroke-dashoffset:58.8}
.ha-ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-size:24px;font-weight:700;letter-spacing:-1px}
.ha-up{margin-top:6px;opacity:0;transform:translateY(6px);transition:opacity .3s .6s,transform .4s var(--ha-ease) .6s}
.ha.s9 .ha-up{opacity:1;transform:none}
.ha-dept{display:block;margin-top:8px;font-size:10.5px;color:var(--ha-mut);opacity:0;transition:opacity .4s 1.1s}
.ha-dept b{color:var(--ha-green);white-space:nowrap}
.ha.s9 .ha-dept{opacity:1}

/* ---- the live demo -------------------------------------------------------
   A working copy of the product with sample data. It is always dark, like
   the product, so it reads as the app sitting on the page rather than as
   another section of the page. */
.demo-band{background:linear-gradient(180deg,var(--bg2) 0,var(--bg) 100%)}
.dm{
  --dm-bg:#0f1117;--dm-side:#13161f;--dm-card:#1b1f2a;--dm-card2:#222735;--dm-line:#2a3040;
  --dm-text:#e8eaf0;--dm-mut:#a0a8b8;--dm-dim:#6c7488;
  --dm-blue:#8b9dff;--dm-green:#4ade80;--dm-amber:#fbbf24;--dm-red:#f87171;--dm-cyan:#22d3ee;
  position:relative;max-width:1120px;margin:0 auto;border-radius:16px;overflow:hidden;
  background:var(--dm-bg);color:var(--dm-text);border:1px solid #1f2533;
  box-shadow:0 40px 90px -30px rgba(13,32,74,.55),0 12px 30px -16px rgba(13,32,74,.35);
  font-size:14px;text-align:left}
.dm *{box-sizing:border-box}
.dm button{font:inherit;color:inherit}
.dm :focus-visible{outline:2px solid var(--dm-blue);outline-offset:2px}

/* window chrome */
.dm-bar{display:flex;align-items:center;gap:14px;padding:10px 14px;background:#0b0d13;border-bottom:1px solid var(--dm-line)}
.dm-dots{display:flex;gap:6px;flex-shrink:0}
.dm-dots i{width:10px;height:10px;border-radius:50%;background:#2c3242}
.dm-dots i:first-child{background:#ff5f57}.dm-dots i:nth-child(2){background:#febc2e}.dm-dots i:nth-child(3){background:#28c840}
.dm-url{flex:1;min-width:0;display:flex;align-items:center;gap:7px;height:28px;padding:0 12px;border-radius:8px;
  background:#161a24;color:var(--dm-dim);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-url svg{flex-shrink:0;color:var(--dm-green)}
.dm-role{display:flex;gap:2px;padding:3px;border-radius:9px;background:#161a24;border:1px solid var(--dm-line);flex-shrink:0}
.dm-role button{border:none;background:none;padding:5px 12px;border-radius:7px;font-size:12px;font-weight:600;color:var(--dm-mut);cursor:pointer;white-space:nowrap;
  transition:background var(--d-fast),color var(--d-fast)}
.dm-role button[aria-pressed="true"]{background:var(--dm-card2);color:var(--dm-text);box-shadow:0 1px 0 rgba(255,255,255,.05) inset}
@media(max-width:640px){.dm-dots{display:none}.dm-url{display:none}.dm-bar{justify-content:center}}

/* layout */
.dm-body{display:grid;grid-template-columns:208px minmax(0,1fr);height:640px}
.dm-side{background:var(--dm-side);border-right:1px solid var(--dm-line);padding:16px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.dm-brand{font-family:'Sora',sans-serif;font-weight:800;font-size:14px;padding:4px 10px 14px;letter-spacing:-.3px}
.dm-brand em{font-style:normal;color:var(--dm-red)}
.dm-org{display:flex;align-items:center;gap:9px;padding:9px 10px;margin-bottom:10px;border-radius:10px;background:var(--dm-card);border:1px solid var(--dm-line)}
.dm-org b{display:block;font-size:12.5px}
.dm-org div span{display:block;font-size:11px;color:var(--dm-dim)}
.dm-ava{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;
  background:linear-gradient(135deg,#3b4bd8,#8b5cf6);color:#fff}
.dm-nav{display:flex;align-items:center;gap:10px;width:100%;border:none;background:none;text-align:left;padding:9px 10px;border-radius:9px;
  color:var(--dm-mut);font-size:13px;font-weight:500;cursor:pointer;position:relative;transition:background var(--d-fast),color var(--d-fast)}
.dm-nav svg{flex-shrink:0;opacity:.85}
.dm-nav:hover{background:rgba(255,255,255,.04);color:var(--dm-text)}
.dm-nav[aria-current="page"]{background:rgba(139,157,255,.12);color:var(--dm-text)}
.dm-nav[aria-current="page"] svg{color:var(--dm-blue);opacity:1}
.dm-badge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--dm-red);color:#fff;font-size:10.5px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center}
.dm-main{min-width:0;overflow-y:auto;overflow-x:hidden;padding:28px 30px 36px;scroll-behavior:smooth;outline:none}
@media(max-width:760px){
  .dm-body{grid-template-columns:minmax(0,1fr);height:auto}
  .dm-side{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:8px;gap:4px;border-right:none;border-bottom:1px solid var(--dm-line);scrollbar-width:none}
  .dm-side::-webkit-scrollbar{display:none}
  .dm-brand,.dm-org{display:none}
  .dm-nav{width:auto;white-space:nowrap;flex-shrink:0;padding:8px 11px}
  .dm-main{padding:20px 16px 28px;min-height:520px;max-height:none;overflow:visible}
}

/* entering a view */
.dm-view{animation:dmIn .42s var(--ease-out) both}
@keyframes dmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* type and building blocks */
.dm-h{font-family:'Sora',sans-serif;font-size:24px;font-weight:700;letter-spacing:-.6px;line-height:1.2}
.dm-sub{color:var(--dm-mut);font-size:13px;margin-top:5px}
.dm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.dm-live{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:15px;border:1px solid var(--dm-line);color:var(--dm-mut);font-size:12px}
.dm-live i{width:7px;height:7px;border-radius:50%;background:var(--dm-green);box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:dmPulse 2s infinite}
@keyframes dmPulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.dm-card{background:var(--dm-card);border:1px solid var(--dm-line);border-radius:14px;padding:18px 20px}
.dm-card+.dm-card,.dm-grid+.dm-card,.dm-card+.dm-grid,.dm-grid+.dm-grid{margin-top:14px}
.dm-card h4{font-family:'Sora',sans-serif;font-size:14.5px;font-weight:600;letter-spacing:-.2px}
.dm-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.dm-card-h span{font-size:12px;color:var(--dm-dim)}
.dm-grid{display:grid;gap:14px}
.dm-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dm-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:980px){.dm-g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.dm-g2{grid-template-columns:minmax(0,1fr)}}
.dm-k{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--dm-mut);display:flex;align-items:center;gap:7px}
.dm-k::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--k,var(--dm-blue))}
.dm-n{font-family:'Sora',sans-serif;font-size:28px;font-weight:700;letter-spacing:-1px;margin-top:8px;line-height:1}
.dm-n small{font-size:13px;color:var(--dm-mut);font-weight:500;letter-spacing:0;margin-left:2px}
.dm-s{font-size:12px;color:var(--dm-mut);margin-top:6px}
.dm-btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:9px;border:1px solid var(--dm-line);
  background:var(--dm-card2);color:var(--dm-text);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background var(--d-fast),border-color var(--d-fast),transform var(--d-fast) var(--ease-press)}
.dm-btn:hover{border-color:#3a4256;background:#283043}
.dm-btn:active{transform:scale(.97)}
.dm-btn-p{background:var(--dm-blue);border-color:var(--dm-blue);color:#0b0d13}
.dm-btn-p:hover{background:#a5b3ff;border-color:#a5b3ff}
.dm-btn-r{background:#fb7185;border-color:#fb7185;color:#1a0b0e}
.dm-btn-r:hover{background:#fda4af;border-color:#fda4af}
.dm-btn[disabled]{opacity:.45;cursor:not-allowed}
.dm-chip{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.3px;
  border:1px solid currentColor;white-space:nowrap}
.dm-chip-g{color:var(--dm-green);background:rgba(74,222,128,.08)}
.dm-chip-r{color:var(--dm-red);background:rgba(248,113,113,.08)}
.dm-chip-a{color:var(--dm-amber);background:rgba(251,191,36,.08)}
.dm-chip-n{color:var(--dm-mut);background:rgba(255,255,255,.03);border-color:var(--dm-line)}
.dm-chip-b{color:var(--dm-blue);background:rgba(139,157,255,.08)}

/* attention strip */
.dm-alert{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:13px;border:1px solid rgba(248,113,113,.55);background:rgba(248,113,113,.05);margin-bottom:14px;flex-wrap:wrap}
.dm-alert-i{width:34px;height:34px;border-radius:9px;background:rgba(248,113,113,.14);color:var(--dm-red);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dm-alert b{display:block;font-size:13.5px}
.dm-alert span{font-size:12px;color:var(--dm-mut)}
.dm-alert .dm-btn{margin-left:auto}

/* score */
.dm-score{display:grid;grid-template-columns:180px 1fr;gap:26px;align-items:center}
@media(max-width:620px){.dm-score{grid-template-columns:1fr;justify-items:center;text-align:center}}
.dm-gauge{position:relative;width:170px;height:120px}
.dm-gauge svg{display:block}
.dm-gauge-arc{transition:stroke-dashoffset 1.1s var(--ease-out),stroke .4s}
.dm-gauge-n{position:absolute;left:0;right:0;top:44px;text-align:center}
.dm-gauge-n b{display:block;font-family:'Sora',sans-serif;font-size:36px;font-weight:700;letter-spacing:-1.5px;line-height:1}
.dm-gauge-n span{display:block;font-size:11px;color:var(--dm-mut);margin-top:3px}
.dm-gauge-n em{display:block;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:1px;margin-top:3px}
.dm-score h3{font-family:'Sora',sans-serif;font-size:18px;font-weight:600;letter-spacing:-.4px}
.dm-score p{color:var(--dm-mut);font-size:13px;line-height:1.65;margin-top:6px}
.dm-score p b{color:var(--dm-text)}
.dm-next{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border-radius:11px;background:#141823;border:1px solid var(--dm-line);flex-wrap:wrap;text-align:left}
.dm-next small{display:block;font-size:10px;font-weight:700;letter-spacing:1px;color:var(--dm-dim);text-transform:uppercase}
.dm-next b{display:block;font-size:13px;margin-top:2px}
.dm-next span{font-size:12px;color:var(--dm-mut)}
.dm-next .dm-btn{margin-left:auto}

/* department bars */
.dm-dept{display:grid;grid-template-columns:96px 1fr 44px;align-items:center;gap:12px;width:100%;padding:8px 8px;margin:0 -8px;border:none;background:none;border-radius:9px;cursor:pointer;text-align:left;
  transition:background var(--d-fast)}
.dm-dept:hover,.dm-dept[aria-expanded="true"]{background:rgba(255,255,255,.04)}
.dm-dept-n{font-size:13px;color:var(--dm-text)}
.dm-track{height:8px;border-radius:5px;background:#262b38;overflow:hidden}
.dm-fill{height:100%;width:0;border-radius:5px;background:var(--c,var(--dm-blue));transition:width .9s var(--ease-out)}
.dm-dept-p{font-size:12.5px;font-weight:700;text-align:right;color:var(--c)}
.dm-drill{margin:6px 0 10px;padding:14px;border-radius:11px;background:#141823;border:1px solid var(--dm-line);animation:dmIn .35s var(--ease-out) both}
.dm-drill-h{font-size:12px;color:var(--dm-mut);margin-bottom:10px}
.dm-drill-h b{color:var(--dm-text)}
.dm-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--dm-line);font-size:12.5px}
.dm-row:first-of-type{border-top:none}
.dm-row .dm-ava{width:24px;height:24px;font-size:10px;border-radius:7px}
.dm-row-m{flex:1;min-width:0}
.dm-row-m b{display:block;font-weight:600}
.dm-row-m span{display:block;color:var(--dm-dim);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* tables */
.dm-table{width:100%;border-collapse:collapse;font-size:12.5px}
.dm-table th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--dm-dim);padding:0 10px 10px;white-space:nowrap}
.dm-table td{padding:11px 10px;border-top:1px solid var(--dm-line);vertical-align:middle}
.dm-table tr.dm-new td{animation:dmFlash 1.8s ease-out}
@keyframes dmFlash{from{background:rgba(139,157,255,.16)}to{background:transparent}}
.dm-tscroll{overflow-x:auto;margin:0 -10px}
.dm-num{font-variant-numeric:tabular-nums}
.dm-mini{display:flex;align-items:center;gap:8px;min-width:120px}
.dm-mini .dm-track{flex:1;height:6px}
.dm-search{height:34px;width:220px;max-width:100%;padding:0 12px;border-radius:9px;border:1px solid var(--dm-line);background:#141823;color:var(--dm-text);font:inherit;font-size:12.5px}
.dm-search::placeholder{color:var(--dm-dim)}

/* simulation funnel inside a running row */
.dm-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.dm-status i{width:7px;height:7px;border-radius:50%;background:currentColor}
.dm-run{color:var(--dm-cyan)}
.dm-run i{animation:dmPulse 1.4s infinite}
.dm-done{color:var(--dm-green)}

/* modules */
.dm-mod{display:flex;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--dm-line)}
.dm-mod:first-of-type{border-top:none;padding-top:2px}
.dm-mod-i{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(139,157,255,.12);color:var(--dm-blue)}
.dm-mod-m{flex:1;min-width:0}
.dm-mod-m b{display:block;font-size:13.5px;font-weight:600}
.dm-mod-m span{display:block;font-size:12px;color:var(--dm-mut);margin-top:2px}
.dm-mod-m .dm-mini{margin-top:8px;max-width:260px}

/* employee home */
.dm-res{display:grid;grid-template-columns:1fr 190px;gap:18px;align-items:center}
@media(max-width:620px){.dm-res{grid-template-columns:1fr;justify-items:center;text-align:center}}
.dm-res h3{font-family:'Sora',sans-serif;font-size:19px;font-weight:600;letter-spacing:-.4px;margin-top:4px}
.dm-res p{color:var(--dm-mut);font-size:13px;line-height:1.65;margin-top:6px;max-width:34em}
.dm-act{display:flex;align-items:center;gap:12px;width:100%;padding:14px;border-radius:12px;border:1px solid var(--dm-line);background:#151925;cursor:pointer;text-align:left;
  transition:border-color var(--d-fast),background var(--d-fast),transform var(--d-fast) var(--ease-out)}
.dm-act:hover{border-color:#3a4256;background:#191e2b;transform:translateY(-1px)}
.dm-act-i{width:38px;height:38px;border-radius:10px;background:var(--dm-card2);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--dm-blue)}
.dm-act b{display:block;font-size:13.5px}
.dm-act span{display:block;font-size:12px;color:var(--dm-mut);margin-top:2px}

/* mail client */
.dm-mail{display:grid;grid-template-columns:260px minmax(0,1fr);border:1px solid var(--dm-line);border-radius:14px;overflow:hidden;min-height:470px;background:var(--dm-card)}
@media(max-width:900px){.dm-mail{grid-template-columns:minmax(0,1fr)}}
.dm-list{min-width:0;border-right:1px solid var(--dm-line);background:#171b25}
@media(max-width:900px){.dm-list{border-right:none;border-bottom:1px solid var(--dm-line)}}
.dm-li{display:block;width:100%;text-align:left;border:none;background:none;padding:13px 14px;border-bottom:1px solid var(--dm-line);cursor:pointer;position:relative;
  transition:background var(--d-fast)}
.dm-li:hover{background:rgba(255,255,255,.03)}
.dm-li[aria-current="true"]{background:rgba(139,157,255,.1)}
.dm-li.unread::before{content:'';position:absolute;left:5px;top:19px;width:6px;height:6px;border-radius:50%;background:var(--dm-blue)}
.dm-li b{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:600}
.dm-li b time{font-weight:400;color:var(--dm-dim);font-size:11px;flex-shrink:0}
.dm-li span{display:block;font-size:12px;color:var(--dm-text);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-li small{display:block;font-size:11.5px;color:var(--dm-dim);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-read{padding:20px 22px;min-width:0}
.dm-tools{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--dm-line)}
.dm-subj{font-family:'Sora',sans-serif;font-size:17px;font-weight:600;letter-spacing:-.3px}
.dm-from{display:flex;align-items:center;gap:10px;margin:12px 0 16px;font-size:12.5px;flex-wrap:wrap}
.dm-from span{color:var(--dm-dim)}
.dm-letter{background:#fff;color:#1f2937;border-radius:10px;padding:22px;font-size:13.5px;line-height:1.65}
.dm-letter p+p{margin-top:10px}
.dm-letter .ms{font-weight:700;color:#0067b8;font-size:15px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.dm-letter .ms i{display:grid;grid-template-columns:repeat(2,8px);gap:2px}
.dm-letter .ms i b{width:8px;height:8px;display:block}
.dm-cta{display:inline-block;margin:6px 0;padding:9px 18px;border-radius:4px;background:#0067b8;color:#fff;font-weight:600;font-size:13px;border:none;cursor:pointer}
.dm-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;min-height:300px;color:var(--dm-dim);font-size:13px;gap:8px}

/* lesson: find the tells */
.dm-tell{position:relative;cursor:pointer;border-radius:4px;transition:background var(--d-fast),box-shadow var(--d-fast);
  border:none;background:none;font:inherit;color:inherit;padding:0 2px;text-align:inherit}
.dm-tell:hover{background:rgba(251,191,36,.18)}
.dm-tell.found{background:rgba(220,38,38,.12);box-shadow:inset 0 -2px 0 #dc2626}
.dm-tell.found::after{content:attr(data-n);position:absolute;top:-9px;right:-9px;width:18px;height:18px;border-radius:50%;background:#dc2626;color:#fff;
  font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif}
.dm-lesson{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;align-items:start}
@media(max-width:900px){.dm-lesson{grid-template-columns:minmax(0,1fr)}}
.dm-found{display:flex;flex-direction:column;gap:8px}
.dm-fi{padding:11px 12px;border-radius:10px;border:1px dashed var(--dm-line);font-size:12px;color:var(--dm-dim)}
.dm-fi.on{border-style:solid;border-color:rgba(74,222,128,.45);background:rgba(74,222,128,.06);color:var(--dm-text);animation:dmIn .35s var(--ease-out) both}
.dm-fi.on b{display:block;font-size:12.5px;color:var(--dm-green);margin-bottom:2px}
.dm-prog{height:6px;border-radius:4px;background:#262b38;overflow:hidden;margin:8px 0 2px}
.dm-prog i{display:block;height:100%;background:var(--dm-green);width:0;transition:width .5s var(--ease-out)}

/* result screens */
.dm-win{text-align:center;padding:30px 20px}
.dm-win-i{width:64px;height:64px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;animation:dmPop .5s var(--ease-press) both}
@keyframes dmPop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.dm-win h3{font-family:'Sora',sans-serif;font-size:21px;font-weight:600;letter-spacing:-.5px}
.dm-win p{color:var(--dm-mut);font-size:13px;line-height:1.65;max-width:30em;margin:8px auto 0}
.dm-xp{display:inline-flex;gap:8px;margin-top:16px;flex-wrap:wrap;justify-content:center}
.dm-tells{max-width:460px;margin:18px auto 0;text-align:left;display:flex;flex-direction:column;gap:8px}
.dm-tells div{padding:10px 12px;border-radius:10px;background:#141823;border:1px solid var(--dm-line);font-size:12.5px;color:var(--dm-mut)}
.dm-tells b{color:var(--dm-text)}

/* report */
.dm-rep-line{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-top:1px solid var(--dm-line);font-size:13px}
.dm-rep-line:first-of-type{border-top:none}
.dm-rep-line span{color:var(--dm-mut)}

/* dialog inside the demo */
.dm-modal{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,7,12,.66);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:dmFade .2s ease both}
.dm-modal[hidden]{display:none}
@keyframes dmFade{from{opacity:0}to{opacity:1}}
.dm-dlg{width:min(560px,100%);max-height:100%;overflow-y:auto;background:var(--dm-card);border:1px solid var(--dm-line);border-radius:16px;padding:22px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7);animation:dmIn .3s var(--ease-out) both}
.dm-dlg h4{font-family:'Sora',sans-serif;font-size:17px;font-weight:600}
.dm-dlg>p{color:var(--dm-mut);font-size:12.5px;margin-top:4px}
.dm-lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--dm-dim);margin:18px 0 8px}
.dm-tpl{display:grid;gap:8px}
.dm-tpl label{display:flex;gap:11px;align-items:flex-start;padding:12px;border-radius:11px;border:1px solid var(--dm-line);cursor:pointer;background:#151925;
  transition:border-color var(--d-fast),background var(--d-fast)}
.dm-tpl label:has(input:checked){border-color:var(--dm-blue);background:rgba(139,157,255,.08)}
.dm-tpl input{accent-color:#8b9dff;margin-top:3px}
.dm-tpl b{display:block;font-size:13px}
.dm-tpl span{display:block;font-size:12px;color:var(--dm-mut);margin-top:2px}
.dm-select{width:100%;height:38px;padding:0 10px;border-radius:9px;border:1px solid var(--dm-line);background:#151925;color:var(--dm-text);font:inherit;font-size:13px}
.dm-dlg-f{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;flex-wrap:wrap}
.dm-safe{display:flex;gap:9px;margin-top:14px;padding:10px 12px;border-radius:10px;background:rgba(74,222,128,.06);border:1px solid rgba(74,222,128,.25);font-size:12px;color:var(--dm-mut)}
.dm-safe svg{flex-shrink:0;color:var(--dm-green);margin-top:1px}

/* the simulation builder: a template, CyberWatch AI, or an attack in the news */
.dm-dlg-w{width:min(660px,100%)}
.dm-tabs{display:flex;gap:3px;padding:3px;margin-top:16px;border-radius:10px;background:#141823;border:1px solid var(--dm-line)}
.dm-tabs button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;background:none;padding:7px 8px;border-radius:8px;
  font-size:12.5px;font-weight:600;color:var(--dm-mut);cursor:pointer;white-space:nowrap;transition:background var(--d-fast),color var(--d-fast)}
.dm-tabs button:hover{color:var(--dm-text)}
.dm-tabs button[aria-selected="true"]{background:var(--dm-card2);color:var(--dm-text)}
.dm-tabs button[aria-selected="true"] svg{color:var(--dm-blue)}
@media(max-width:520px){.dm-tabs{flex-direction:column}}
.dm-ta{display:block;width:100%;min-height:86px;padding:10px 12px;border-radius:10px;border:1px solid var(--dm-line);background:#151925;color:var(--dm-text);
  font:inherit;font-size:13px;line-height:1.55;resize:vertical}
.dm-ta::placeholder{color:var(--dm-dim)}
.dm-sugs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dm-sug{border:1px dashed #3a4256;background:none;color:var(--dm-mut);font-size:11.5px;line-height:1.3;padding:5px 10px;border-radius:999px;cursor:pointer;text-align:left;
  transition:border-color var(--d-fast),color var(--d-fast)}
.dm-sug:hover{border-color:var(--dm-blue);color:var(--dm-text)}
.dm-genrow{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dm-seg{display:inline-flex;gap:2px;padding:3px;border-radius:9px;background:#141823;border:1px solid var(--dm-line)}
.dm-seg button{border:none;background:none;padding:5px 12px;border-radius:7px;font-size:12px;font-weight:600;color:var(--dm-mut);cursor:pointer}
.dm-seg button[aria-pressed="true"]{background:var(--dm-card2);color:var(--dm-text)}
.dm-think{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding:12px 14px;border-radius:11px;background:#141823;border:1px solid var(--dm-line)}
.dm-think div{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dm-mut);animation:dmIn .3s var(--ease-out) both}
.dm-think div svg{color:var(--dm-green);flex-shrink:0}
.dm-think b{color:var(--dm-text)}
.dm-think .dm-think-go{color:var(--dm-blue)}
.dm-spin{width:12px;height:12px;border-radius:50%;border:2px solid rgba(139,157,255,.3);border-top-color:var(--dm-blue);flex-shrink:0;animation:dmSpin .8s linear infinite}
@keyframes dmSpin{to{transform:rotate(360deg)}}
.dm-draft{margin-top:14px;padding:14px;border-radius:12px;border:1px solid rgba(139,157,255,.35);background:#151925;outline:none;animation:dmIn .35s var(--ease-out) both}
.dm-draft-h{display:flex;flex-wrap:wrap;gap:6px}
.dm-draft-h .dm-chip svg{margin-right:4px}
.dm-draft .dm-lbl{margin-top:14px}
.dm-draft .dm-tells{max-width:none;margin:0}
.dm-tok{background:#e0e7ff;color:#3730a3;border-radius:4px;padding:0 5px;font-size:.9em;font-weight:600}
.dm-qr{display:inline-block;padding:8px;margin:4px 0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;line-height:0}
button.dm-qr{cursor:pointer}
.dm-trends{display:flex;flex-direction:column;gap:8px}
.dm-trend{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:11px;border:1px solid var(--dm-line);background:#151925}
.dm-trend>div{flex:1;min-width:0}
.dm-trend small{display:block;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--dm-amber)}
.dm-trend b{display:block;font-size:13px;margin-top:2px}
.dm-trend span{display:block;font-size:12px;color:var(--dm-mut);margin-top:2px;line-height:1.5}
.dm-trend.on{border-color:var(--dm-blue);background:rgba(139,157,255,.08)}
@media(max-width:520px){.dm-trend{flex-direction:column;align-items:stretch}}

/* toast: at the foot of the window, clear of the tour strip at the top */
.dm-toast{position:absolute;left:50%;bottom:18px;z-index:40;transform:translate(-50%,10px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:9px;max-width:calc(100% - 32px);padding:10px 14px;border-radius:11px;background:#232a3a;border:1px solid #33405a;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.6);font-size:12.5px;transition:opacity .25s,transform .35s var(--ease-out)}
.dm-toast.on{opacity:1;transform:translate(-50%,0)}
.dm-toast svg{flex-shrink:0;color:var(--dm-green)}

/* guided tour: a strip across the top of the app window, under its title
   bar, where it is read before anything is clicked. It is in the flow of
   the page, so it can never cover the button it is asking you to press */
.dm-tour{position:relative;display:flex;align-items:center;gap:14px;padding:12px 16px;
  background:linear-gradient(135deg,#2c3a8f,#4a2f8f);border-bottom:1px solid rgba(255,255,255,.14)}
.dm-tour.off{display:none}
.dm-tour-n{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;
  font-family:'Sora',sans-serif;font-size:12px;font-weight:700}
.dm-tour-t{flex:1;min-width:0;font-size:13px;line-height:1.5}
.dm-tour-t small{display:block;font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.6)}
.dm-tour-b{display:flex;gap:6px;flex-shrink:0}
.dm-tour-b button{border:none;background:rgba(255,255,255,.12);color:#fff;height:30px;padding:0 11px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer}
.dm-tour-b button:hover{background:rgba(255,255,255,.22)}
.dm-tour-b .dm-tour-cta{background:#fff;color:#1e1b4b}
.dm-tour-b .dm-tour-cta:hover{background:#e0e7ff}
@media(max-width:620px){.dm-tour{flex-wrap:wrap}.dm-tour-b{width:100%;justify-content:flex-end}}
.dm-reopen{border:1px solid var(--dm-line);background:var(--dm-card2);color:var(--dm-text);
  height:28px;padding:0 11px;border-radius:14px;font-size:12px;font-weight:600;cursor:pointer;display:none;align-items:center;gap:6px;flex-shrink:0}
.dm-reopen.on{display:inline-flex}

/* the pulsing ring on whatever the tour is asking you to press */
.dm-hot{position:relative;z-index:2;animation:dmHot 1.7s ease-out infinite;border-radius:9px}
@keyframes dmHot{0%{box-shadow:0 0 0 0 rgba(139,157,255,.75)}70%{box-shadow:0 0 0 10px rgba(139,157,255,0)}100%{box-shadow:0 0 0 0 rgba(139,157,255,0)}}

/* ---- cross-sell: the other product, at the foot of each page ----------- */
.rp-pair{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;max-width:var(--maxw);margin:0 auto;
  padding:2rem 2.2rem;border-radius:18px;background:var(--prod-bg,var(--blue-light));border:1px solid #c7dbfb}
.rp-pair h3{font-size:1.25rem;font-weight:600;letter-spacing:-.3px}
.rp-pair p{color:var(--text2);font-size:.95rem;line-height:1.65;margin-top:.4rem;max-width:40em}
.rp-pair.prod-card-red{border-color:#fecaca}

.dm-note{text-align:center;font-size:.8rem;color:var(--text3);margin-top:1.1rem}

/* a demo with no motion: views appear, nothing pulses */
@media(prefers-reduced-motion:reduce){
  .dm-view,.dm-drill,.dm-dlg,.dm-fi.on,.dm-win-i,.dm-think div,.dm-draft,.dm-spin{animation:none}
  .dm-hot,.dm-live i,.dm-run i{animation:none}
  .dm-hot{box-shadow:0 0 0 2px var(--dm-blue)}
  .dm-fill,.dm-gauge-arc,.dm-prog i{transition:none}
}