/* ============ Section styles (7): Sovereign-simple, Widget, Outreach ============ */

/* ---------- SOVEREIGN · простыми словами ---------- */
.sv2{margin-top:34px; background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-line); border-radius:var(--radius-lg); box-shadow:var(--sh-3), var(--glass-inset); overflow:hidden}
.sv2-statement{padding:22px 26px; font-size:clamp(17px,1.7vw,21px); line-height:1.5; font-weight:500; color:var(--ink); border-bottom:1px solid var(--glass-line); transition:.3s; text-wrap:pretty; border-left:3px solid var(--success)}
.sv2-statement b{font-weight:700}
.sv2-statement.bad{background:var(--risk-soft); border-left-color:var(--risk)} .sv2-statement.bad b{color:var(--risk)}
.sv2-statement.good{background:var(--success-soft); border-left-color:var(--success)} .sv2-statement.good b{color:var(--success)}

/* scene */
.sv2-scene{display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:0; padding:30px 26px; background:transparent}
@media(max-width:760px){ .sv2-scene{grid-template-columns:1fr; gap:16px; justify-items:center} }
.sv2-place{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:28px 18px; border-radius:18px; border:1px solid var(--glass-line); background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:var(--sh-1), var(--glass-inset); width:100%; max-width:300px; transition:.3s}
.sv2-place.bank.active{border-color:var(--success-line); background:var(--success-soft); box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 12%,transparent), var(--sh-1)}
.sv2-place.ext.active{border-color:var(--risk-line); background:var(--risk-soft); box-shadow:0 0 0 3px color-mix(in srgb,var(--risk) 12%,transparent), var(--sh-1)}
.sv2-ptitle{font-size:19px; font-weight:700; letter-spacing:-.02em}
.sv2-psub{font-size:12.5px; color:var(--ink-3); line-height:1.4}
.sv2-conv{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; padding:7px 14px; border-radius:100px; transition:.3s; margin-top:6px}
.sv2-conv.in-bank{background:var(--success); color:#fff} .sv2-conv.in-ext{background:var(--risk); color:#fff}
.sv2-conv.ghost{background:var(--surface-3); color:var(--ink-4); border:1px dashed var(--border-2)}

/* lane between places */
.sv2-lane{position:relative; width:120px; height:80px; display:flex; align-items:center; justify-content:center}
@media(max-width:760px){ .sv2-lane{width:100%; height:54px; transform:rotate(90deg)} }
.sv2-lane .ll{position:absolute; left:0; right:0; top:50%; height:3px; transform:translateY(-50%); border-radius:3px}
.sv2-lane.closed .ll{background:repeating-linear-gradient(90deg,var(--border-2) 0 6px,transparent 6px 12px)}
.sv2-lane.open .ll{background:linear-gradient(90deg, color-mix(in srgb,var(--risk) 25%,transparent), var(--risk))}
.sv2-lane .barrier{position:relative; z-index:2; width:34px;height:34px;border-radius:10px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--border-2); box-shadow:var(--sh-1); font-size:16px; font-weight:600; line-height:1}
.sv2-lane.closed .barrier{color:var(--success); border-color:var(--success-line)}
.sv2-lane.open .barrier{color:var(--risk); border-color:var(--risk-line)}
.sv2-fly{position:absolute; top:50%; width:10px;height:10px;border-radius:50%; transform:translateY(-50%); background:var(--risk); box-shadow:0 0 0 4px var(--risk-soft); animation:flyOut 1.7s linear infinite}
@keyframes flyOut{0%{left:8%; opacity:0}15%{opacity:1}85%{opacity:1}100%{left:92%; opacity:0}}
@media(prefers-reduced-motion:reduce){.sv2-fly{animation:none}}

/* ===== cloud-vs-onprem: two banks + VS ===== */
.sov-compare{display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:stretch; padding:28px 24px; border-bottom:1px solid var(--glass-line)}
@media(max-width:760px){ .sov-compare{grid-template-columns:1fr} }
.sov-side{position:relative; border-radius:20px; padding:18px 16px 16px; background:rgba(255,255,255,.42); border:1px solid var(--glass-line); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); text-align:center; overflow:hidden}
.sov-side.onprem{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--success) 24%,transparent)}
.sov-side.cloud{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--risk) 20%,transparent)}
.sov-side-tag{font-size:12.5px; font-weight:700; letter-spacing:-.01em; padding:6px 14px; border-radius:100px; display:inline-block}
.sov-side.onprem .sov-side-tag{background:var(--success-soft); color:var(--success)}
.sov-side.cloud .sov-side-tag{background:var(--risk-soft); color:var(--risk)}

.bank-stage{position:relative; height:212px; display:flex; align-items:flex-end; justify-content:center; margin-top:6px}
.sov-ring{position:absolute; left:50%; top:50%; width:216px; height:188px; transform:translate(-50%,-44%); border-radius:18px; pointer-events:none; z-index:0}
.sov-side.onprem .sov-ring{border:2px solid color-mix(in srgb,var(--success) 50%,transparent)}
.sov-side.cloud .sov-ring{border:2px dashed color-mix(in srgb,var(--risk) 48%,transparent)}

.bankfig{position:relative; z-index:1; width:168px}
.bld-roof{width:0; height:0; margin:0 auto; border-left:92px solid transparent; border-right:92px solid transparent; border-bottom:38px solid var(--ink); opacity:.85}
.bld-frieze{height:20px; background:var(--ink); opacity:.85; display:flex; align-items:center; justify-content:center; color:#fff; font-size:9.5px; font-weight:700; letter-spacing:.24em; margin:0 -8px}
.bld-cols{display:flex; justify-content:center; gap:9px; padding:11px 16px 0; background:rgba(20,27,41,.05)}
.bld-cols i{width:13px; height:72px; background:linear-gradient(var(--ink),color-mix(in srgb,var(--ink) 60%,transparent)); opacity:.42; border-radius:2px 2px 0 0}
.bld-base{height:13px; background:var(--ink); opacity:.85; margin:0 -18px; border-radius:0 0 5px 5px}

.bank-core{position:absolute; left:50%; top:56%; transform:translate(-50%,-50%); z-index:3}
.core-dot{display:grid; place-items:center; width:38px;height:38px;border-radius:11px; color:#fff; font-size:17px; font-weight:800; background:linear-gradient(150deg,var(--accent),var(--accent-700)); box-shadow:0 6px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.3)}
.sov-side.cloud .core-dot{background:linear-gradient(150deg,#c0564b,var(--risk))}

/* safe: data orbits the inner perimeter, node→node, with icons */
.sov-orbit{position:absolute; left:50%; top:50%; width:216px; height:188px; transform:translate(-50%,-44%); z-index:2; pointer-events:none}
.sov-orbit-svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.sov-orbit-track{stroke:color-mix(in srgb,var(--success) 28%,transparent); stroke-width:1.5; stroke-dasharray:3 4}
.sov-orbit-dot{fill:var(--success); filter:drop-shadow(0 0 3px color-mix(in srgb,var(--success) 60%,transparent))}
.sov-node{position:absolute; width:26px;height:26px;border-radius:8px; display:grid; place-items:center; background:#fff; color:var(--success); border:1px solid color-mix(in srgb,var(--success) 35%,transparent); box-shadow:0 2px 8px rgba(20,27,41,.12); z-index:3}
.sov-node.n-tl{left:25px; top:31px} .sov-node.n-tr{right:25px; top:31px}
.sov-node.n-bl{left:25px; bottom:31px} .sov-node.n-br{right:25px; bottom:31px}
.sov-cap{position:absolute; font-size:9.5px; font-weight:700; color:var(--success); z-index:3}
.sov-cap.c-tl{left:18px; top:11px} .sov-cap.c-tr{right:18px; top:11px}
.sov-cap.c-bl{left:18px; bottom:11px} .sov-cap.c-br{right:18px; bottom:11px}

/* saas: larger RED orbit OUTSIDE the building perimeter */
.sov-orbit.out{width:248px; height:216px; transform:translate(-50%,-46%); z-index:1}
.sov-orbit-track.red{stroke:color-mix(in srgb,var(--risk) 32%,transparent)}
.sov-orbit-dot.red{fill:var(--risk); filter:drop-shadow(0 0 3px color-mix(in srgb,var(--risk) 65%,transparent))}
.sov-node.red{color:var(--risk); border-color:color-mix(in srgb,var(--risk) 38%,transparent)}
.sov-orbit.out .sov-node.n-tl{left:6px; top:14px} .sov-orbit.out .sov-node.n-tr{right:6px; top:14px}
.sov-orbit.out .sov-node.n-bl{left:6px; bottom:14px} .sov-orbit.out .sov-node.n-br{right:6px; bottom:14px}
.sov-cap.red{color:var(--risk)}
.sov-orbit.out .sov-cap.c-tl{left:0; top:-6px} .sov-orbit.out .sov-cap.c-tr{right:0; top:-6px}
.sov-orbit.out .sov-cap.c-bl{left:0; bottom:-6px} .sov-orbit.out .sov-cap.c-br{right:0; bottom:-6px}
@media(prefers-reduced-motion:reduce){.sov-orbit-dot animateMotion{display:none}}

/* leak: data streams up & out */
.leak-stream{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:24px; height:210px; z-index:4; pointer-events:none}
.leak-p{position:absolute; left:50%; margin-left:-5.5px; bottom:0; width:11px;height:11px;border-radius:50%; background:var(--risk); box-shadow:0 0 0 4px color-mix(in srgb,var(--risk) 16%,transparent); animation:leakUp 2.4s ease-in infinite}
@keyframes leakUp{0%{bottom:44px; opacity:0; transform:scale(.5)}18%{opacity:1; transform:scale(1)}100%{bottom:206px; opacity:0; transform:translateX(18px) scale(.7)}}
.saas-nodes{position:absolute; top:4px; left:0; right:0; display:flex; justify-content:space-around; z-index:5; padding:0 8px}
.saas{font-size:10px; font-weight:700; color:var(--risk); background:var(--risk-soft); border:1px solid var(--risk-line); padding:4px 9px; border-radius:8px; animation:saasFloat 3s ease-in-out infinite}
.saas:nth-child(2){animation-delay:.7s} .saas:nth-child(3){animation-delay:1.4s}
@keyframes saasFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

.bank-verdict{margin-top:12px; font-size:13.5px; font-weight:700; letter-spacing:-.01em}
.sov-side.onprem .bank-verdict{color:var(--success)} .sov-side.cloud .bank-verdict{color:var(--risk)}

.sov-vs{align-self:center; justify-self:center; width:52px;height:52px;border-radius:50%; display:grid; place-items:center; font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--ink); background:#fff; border:1px solid var(--glass-line); box-shadow:var(--sh-2), var(--glass-inset)}

/* cloud side: data streams out to 4 surrounding services */
.leak-out{position:absolute; left:50%; top:54%; transform:translate(-50%,-50%); width:0; height:0; z-index:4; pointer-events:none}
.lk-p{position:absolute; left:-5px; top:-5px; width:10px;height:10px;border-radius:50%; background:var(--risk); box-shadow:0 0 0 4px color-mix(in srgb,var(--risk) 15%,transparent)}
.lk-p.tl{animation:lkTL 1.9s linear infinite} .lk-p.tr{animation:lkTR 1.9s linear infinite}
.lk-p.bl{animation:lkBL 1.9s linear infinite} .lk-p.br{animation:lkBR 1.9s linear infinite}
@keyframes lkTL{0%{transform:translate(0,0); opacity:0}14%{opacity:1}88%{opacity:1}100%{transform:translate(-120px,-96px); opacity:0}}
@keyframes lkTR{0%{transform:translate(0,0); opacity:0}14%{opacity:1}88%{opacity:1}100%{transform:translate(120px,-96px); opacity:0}}
@keyframes lkBL{0%{transform:translate(0,0); opacity:0}14%{opacity:1}88%{opacity:1}100%{transform:translate(-120px,88px); opacity:0}}
@keyframes lkBR{0%{transform:translate(0,0); opacity:0}14%{opacity:1}88%{opacity:1}100%{transform:translate(120px,88px); opacity:0}}
.leak-badges{position:absolute; inset:0; z-index:5; pointer-events:none}
.lkb{position:absolute; left:0; top:0; white-space:nowrap; font-size:10.5px; font-weight:700; color:var(--risk); background:var(--risk-soft); border:1px solid var(--risk-line); padding:5px 11px; border-radius:9px; box-shadow:var(--sh-1)}
.lkb{position:absolute; white-space:nowrap; font-size:10.5px; font-weight:700; color:var(--risk); background:var(--risk-soft); border:1px solid var(--risk-line); padding:5px 11px; border-radius:9px; z-index:5}
.lkb.tl{left:-6px; right:auto; top:6px}
.lkb.tr{right:-6px; left:auto; top:6px}
.lkb.bl{left:-6px; right:auto; bottom:42px}
.lkb.br{right:-6px; left:auto; bottom:42px}
@media(prefers-reduced-motion:reduce){.lk-p{animation:none}}

/* Q&A */
.sv2-qa{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--glass-line); border-top:1px solid var(--glass-line)}
@media(max-width:760px){ .sv2-qa{grid-template-columns:1fr} }
.sv2-q{background:rgba(255,255,255,.45); padding:20px 22px}
.sv2-q .qh{font-size:14px; font-weight:700; letter-spacing:-.01em; color:var(--ink); margin-bottom:13px}
.sv2-ans{display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.45; transition:.3s}
.sv2-ans .ai2{width:9px;height:9px;border-radius:50%; flex-shrink:0; margin-top:4px}
.sv2-ans.bad{color:var(--risk)} .sv2-ans.bad .ai2{background:var(--risk)}
.sv2-ans.good{color:var(--ink)} .sv2-ans.good .ai2{background:var(--success)}
.sv2-tech-toggle{display:flex; justify-content:center; margin-top:28px}
.sv2-tech-btn{display:inline-flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:var(--ink-2); padding:11px 20px; border-radius:100px; border:1px solid var(--glass-line); background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); cursor:pointer; transition:.16s; box-shadow:var(--sh-1), var(--glass-inset)}
.sv2-tech-btn:hover{color:var(--ink)}
.sv2-tech-btn .cx{font-size:18px; line-height:1; color:var(--ink-4)}
.sv2-tech-wrap{overflow:hidden; transition:max-height .4s ease; max-height:0}

/* ---------- WIDGET demo ---------- */
.widget-stage{margin-top:44px; border-radius:var(--radius-lg); border:1px solid var(--border-2); box-shadow:var(--sh-2); overflow:hidden; position:relative; background:
  linear-gradient(135deg,#e9ecf4,#eef0f6); padding:34px; display:flex; justify-content:center; min-height:680px}
.widget-stage::before{content:""; position:absolute; inset:0; opacity:.55; pointer-events:none;
  background:radial-gradient(600px 300px at 18% 10%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 60%),
  radial-gradient(500px 280px at 88% 80%, color-mix(in srgb,#7b5fe0 14%,transparent), transparent 60%)}
.faux-site{position:absolute; inset:0; padding:26px 30px; opacity:.5; pointer-events:none}
.faux-bar{height:14px; border-radius:7px; background:#fff; opacity:.7; margin-bottom:10px}
.faux-hero{height:120px; border-radius:14px; background:#fff; opacity:.55; margin:14px 0}
.faux-row{display:flex; gap:12px} .faux-card{flex:1; height:90px; border-radius:12px; background:#fff; opacity:.5}

.widget{position:relative; z-index:2; width:384px; max-width:100%; background:var(--surface); border-radius:24px; box-shadow:0 24px 70px rgba(20,27,41,.22), 0 4px 14px rgba(20,27,41,.1); overflow:hidden; display:flex; flex-direction:column; height:612px}
.w-head{position:relative; padding:18px; background:linear-gradient(180deg, #f2f1fc, #ffffff); display:flex; flex-direction:column; align-items:center; text-align:center; flex-shrink:0}
.w-burger{position:absolute; left:16px; top:16px; width:38px;height:38px;border-radius:50%; background:var(--surface); border:1px solid var(--border); display:grid; place-items:center; color:var(--ink-2); box-shadow:var(--sh-1); cursor:pointer}
.w-burger .bdg{position:absolute; right:-3px; top:-3px; min-width:18px;height:18px; border-radius:10px; background:var(--accent); color:#fff; font-size:10.5px; font-weight:700; display:grid; place-items:center; border:2px solid #fff; padding:0 4px}
.w-orb{width:128px;height:128px;border-radius:50%; margin:16px 0 14px; position:relative; flex-shrink:0;
  background:radial-gradient(circle at 50% 38%, #ffffff 0%, #c3b8f7 22%, #7b6ce8 52%, #4a39c4 82%, #2e2496 100%);
  box-shadow:0 12px 30px rgba(74,57,196,.35), inset 0 2px 10px rgba(255,255,255,.5); transition:.3s}
.w-orb::after{content:""; position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 210deg, rgba(255,255,255,.55), transparent 18%, transparent 60%, rgba(255,255,255,.35) 78%, transparent 92%); mix-blend-mode:screen; opacity:.7}
.w-orb.mini{width:54px;height:54px; margin:0; position:absolute; right:16px; bottom:96px; z-index:5; box-shadow:0 8px 22px rgba(74,57,196,.4); animation:orbFloat 3s ease-in-out infinite}
@keyframes orbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.w-orb.listening{animation:orbPulse 1.4s ease-in-out infinite}
@keyframes orbPulse{0%,100%{box-shadow:0 12px 30px rgba(74,57,196,.35), 0 0 0 0 rgba(123,108,232,.5)}50%{box-shadow:0 12px 30px rgba(74,57,196,.45), 0 0 0 18px rgba(123,108,232,0)}}
.w-name{display:flex; align-items:center; gap:9px; font-size:18px; font-weight:700; letter-spacing:-.01em}
.w-online{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--success)}
.w-online .d{width:7px;height:7px;border-radius:50%; background:var(--success)}
.w-sub{font-size:13px; color:var(--ink-3); margin-top:6px}
.w-wave{display:flex; align-items:center; gap:3px; height:26px; margin-top:10px}
.w-wave i{width:3px; border-radius:3px; background:var(--accent); animation:wv 1s ease-in-out infinite}

.w-body{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; min-height:0; background:var(--surface-2); position:relative}
.w-msg{max-width:86%; font-size:13.5px; line-height:1.45; padding:11px 14px; border-radius:16px}
.w-msg.jess{align-self:flex-start; background:#efeafe; color:#3a2b8c; border:1px solid #ddd3fb; border-bottom-left-radius:5px}
.w-msg.user{align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:5px}
.w-tag{font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#7b6ce8; margin-bottom:5px; font-family:var(--mono); display:flex; align-items:center; gap:5px}

.pcard{background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--sh-1); cursor:pointer; transition:.16s}
.pcard:hover{box-shadow:var(--sh-2); transform:translateY(-2px)}
.pcard.sel{box-shadow:0 0 0 2px var(--accent), var(--sh-2)}
.pcard-hd{position:relative; height:118px; padding:14px; display:flex; flex-direction:column; justify-content:space-between; color:#fff; overflow:hidden}
.pcard-hd::after{content:""; position:absolute; inset:0; background:radial-gradient(120px 80px at 80% 20%, rgba(255,255,255,.25), transparent 70%)}
.pcard-rec{position:relative; z-index:1; align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:5px 10px; border-radius:100px; background:rgba(255,255,255,.92); color:var(--accent-700)}
.pcard-heart{position:absolute; z-index:1; right:12px; top:12px; width:30px;height:30px;border-radius:50%; background:rgba(255,255,255,.22); display:grid; place-items:center; color:#fff; backdrop-filter:blur(4px); cursor:pointer; transition:.15s}
.pcard-heart.on{background:#fff; color:var(--risk)}
.pcard-rate{position:relative; z-index:1; display:flex; align-items:baseline; gap:6px}
.pcard-rate .big{font-size:30px; font-weight:800; letter-spacing:-.03em; line-height:1}
.pcard-rate .u{font-size:13px; font-weight:600; opacity:.9}
.pcard-bd{padding:13px 14px}
.pcard-nm{font-size:15px; font-weight:700; letter-spacing:-.01em}
.pcard-mt{font-size:12.5px; color:var(--ink-3); margin-top:3px; display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.pcard-chip{font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:7px; background:var(--accent-soft); color:var(--accent-700)}

.w-foot{flex-shrink:0; border-top:1px solid var(--border); background:var(--surface); padding:12px 14px}
.w-chips{display:flex; gap:8px; overflow-x:auto; padding-bottom:10px; margin-bottom:2px; -ms-overflow-style:none; scrollbar-width:none}
.w-chips::-webkit-scrollbar{display:none}
.w-chip{flex-shrink:0; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:100px; border:1px solid var(--border-2); background:var(--surface-2); color:var(--ink-2); cursor:pointer; transition:.15s; white-space:nowrap}
.w-chip:hover{border-color:var(--accent-line); color:var(--accent-700); background:var(--accent-soft)}
.w-cta{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:52px; border-radius:15px; border:0; background:#15151c; color:#fff; font-size:15px; font-weight:600; cursor:pointer; transition:.16s}
.w-cta:hover{background:#000; transform:translateY(-1px)}
.w-cta.active{background:var(--accent)}
.w-inputrow{display:flex; align-items:center; gap:10px; margin-top:10px}
.w-input{flex:1; display:flex; align-items:center; gap:9px; height:46px; padding:0 14px; border-radius:13px; border:1px solid var(--border-2); background:var(--surface-2); color:var(--ink-4); font-size:13.5px}
.w-op{display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 16px; border-radius:13px; border:0; background:var(--accent); color:#fff; font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap; transition:.15s}
.w-op:hover{background:var(--accent-700)}
.widget-aside{position:absolute; z-index:3; right:34px; top:50%; transform:translateY(-50%); width:240px; display:flex; flex-direction:column; gap:11px}
@media(max-width:1080px){ .widget-aside{display:none} }
.wa-card{background:rgba(255,255,255,.86); backdrop-filter:blur(8px); border:1px solid var(--border); border-radius:14px; padding:14px 15px; box-shadow:var(--sh-1)}
.wa-card .wah{display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; margin-bottom:5px}
.wa-card .wai{width:26px;height:26px;border-radius:7px; background:var(--accent-soft); color:var(--accent-700); display:grid; place-items:center; flex-shrink:0}
.wa-card p{font-size:12px; color:var(--ink-2); line-height:1.45}

/* ---------- OUTREACH · SMS / Email / PDF ---------- */
.out-tabs{display:inline-flex; padding:5px; gap:3px; border-radius:100px; margin:34px 0 4px; width:max-content; max-width:100%; flex-wrap:wrap}
.out-stage{display:grid; grid-template-columns:.9fr 1.1fr; gap:34px; align-items:center; margin-top:26px}
@media(max-width:880px){ .out-stage{grid-template-columns:1fr; gap:26px} }
.out-copy .h3{margin-bottom:10px}
.out-steps{display:flex; flex-direction:column; gap:12px; margin-top:22px}
.out-step{display:flex; gap:13px; align-items:flex-start}
.out-step .os-n{width:28px;height:28px;border-radius:9px; background:var(--accent-soft); color:var(--accent-700); display:grid; place-items:center; font-weight:700; font-size:13px; flex-shrink:0; font-family:var(--mono)}
.out-step .os-t{font-size:14px; font-weight:600} .out-step .os-s{font-size:13px; color:var(--ink-3); margin-top:2px; line-height:1.45}
.out-stats{display:flex; gap:9px; margin-top:24px; flex-wrap:wrap}
.out-stat{flex:1; min-width:120px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:13px 15px}
.out-stat .v{font-size:21px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.out-stat .l{font-size:11.5px; color:var(--ink-3); margin-top:3px}
.out-art{display:flex; justify-content:center; align-items:flex-start}

/* iOS SMS */
.imsg{width:340px; max-width:100%; background:#fff; border-radius:34px; box-shadow:0 22px 60px rgba(20,27,41,.2); overflow:hidden; border:1px solid var(--border)}
.imsg-top{padding:14px 16px 12px; border-bottom:1px solid #ededf2; display:flex; flex-direction:column; align-items:center; gap:6px; background:#f7f7fa}
.imsg-back{position:absolute; color:#3a82f7}
.imsg-av{width:48px;height:48px;border-radius:50%; background:linear-gradient(160deg,#b9bfca,#8a92a3); display:grid; place-items:center; color:#fff; font-weight:700; font-size:18px}
.imsg-name{font-size:13px; font-weight:600; color:#1a1a1c; display:flex; align-items:center; gap:4px}
.imsg-body{padding:18px 14px; display:flex; flex-direction:column; gap:9px; background:#fff; min-height:380px}
.imsg-time{text-align:center; font-size:11px; color:#8a8a8e; margin:4px 0 8px}
.imsg-time b{color:#6a6a6e; font-weight:600}
.ibubble{align-self:flex-start; max-width:82%; background:#e9e9eb; color:#000; font-size:14px; line-height:1.4; padding:9px 13px; border-radius:18px; border-bottom-left-radius:5px}
.ilink{align-self:flex-start; max-width:82%; width:230px; background:#f1f1f3; border-radius:16px; overflow:hidden; border:1px solid #e4e4e8}
.ilink-pic{height:78px; background:repeating-linear-gradient(45deg,#e3e3e8 0 10px,#e9e9ee 10px 20px); display:grid; place-items:center; color:#3a82f7; font-size:12.5px; font-weight:600; text-align:center; line-height:1.3}
.ilink-url{display:flex; align-items:center; justify-content:space-between; padding:9px 12px; font-size:12.5px; color:#8a8a8e; background:#ededf0}
.imsg-field{display:flex; align-items:center; gap:9px; padding:10px 14px 16px; background:#fff}
.imsg-field .f{flex:1; height:34px; border-radius:18px; border:1px solid #d8d8de; display:flex; align-items:center; padding:0 14px; color:#a0a0a6; font-size:13px}

/* Gmail */
.gmail{width:520px; max-width:100%; background:#fff; border:1px solid var(--border-2); border-radius:14px; box-shadow:0 18px 50px rgba(20,27,41,.16); overflow:hidden}
.gmail-tb{display:flex; align-items:center; gap:16px; padding:11px 16px; border-bottom:1px solid #eceef1; color:#5f6368}
.gmail-tb .g-ico{display:flex; gap:14px}
.gmail-subj{padding:16px 20px 6px; font-size:18px; font-weight:500; color:#202124; display:flex; align-items:center; gap:10px}
.gmail-label{font-size:11px; font-weight:500; color:#3c4043; background:#e8eaed; padding:2px 8px; border-radius:4px}
.gmail-from{display:flex; align-items:center; gap:12px; padding:6px 20px 16px}
.gmail-favi{width:38px;height:38px;border-radius:50%; background:linear-gradient(150deg,var(--accent),#6a4ad6); color:#fff; display:grid; place-items:center; font-weight:700; font-size:16px; flex-shrink:0}
.gmail-fn{font-size:14px; color:#202124; font-weight:600}
.gmail-fm{font-size:12.5px; color:#5f6368}
.gmail-date{margin-left:auto; font-size:12.5px; color:#5f6368}
.gmail-card{margin:0 20px 20px; border:1px solid #e8eaed; border-radius:10px; overflow:hidden}
.gmail-ohead{background:linear-gradient(135deg,var(--accent),#5a3fd0); padding:22px 24px; color:#fff}
.gmail-ohead .t{font-size:18px; font-weight:700} .gmail-ohead .s{font-size:13px; opacity:.85; margin-top:3px}
.gmail-obody{padding:22px 24px}
.gmail-obody p{font-size:14px; color:#3c4043; line-height:1.55}
.gmail-btn{display:inline-flex; align-items:center; gap:9px; margin-top:18px; background:var(--accent); color:#fff; font-size:14px; font-weight:600; padding:12px 20px; border-radius:9px}
.gmail-fine{font-size:12px; color:#80868b; margin-top:16px; line-height:1.5}
.gmail-actions{display:flex; gap:10px; padding:0 20px 20px}
.gmail-action{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border:1px solid #d8dade; border-radius:20px; font-size:13.5px; color:#3c4043; font-weight:500}

/* PDF offer */
.pdfdoc{width:392px; max-width:100%; background:#fff; border-radius:8px; box-shadow:0 22px 60px rgba(20,27,41,.22); overflow:hidden; border:1px solid var(--border)}
.pdf-head{background:linear-gradient(140deg,var(--accent),#5a3fd0); color:#fff; padding:34px 30px 30px}
.pdf-head .t{font-size:26px; font-weight:800; letter-spacing:-.01em}
.pdf-head .s{font-size:13.5px; opacity:.85; margin-top:6px}
.pdf-bd{padding:28px 30px 24px}
.pdf-prod{font-size:18px; font-weight:700; color:var(--ink)}
.pdf-rate{display:flex; align-items:baseline; gap:9px; margin:14px 0 22px}
.pdf-rate .big{font-size:54px; font-weight:800; letter-spacing:-.03em; line-height:.9; color:var(--accent)}
.pdf-rate .u{font-size:13.5px; color:var(--ink-3); font-weight:500; max-width:9ch; line-height:1.3}
.pdf-li{display:flex; align-items:flex-start; gap:11px; padding:8px 0; font-size:14px; color:var(--ink); line-height:1.4}
.pdf-li .d{width:6px;height:6px;border-radius:50%; background:var(--accent); margin-top:8px; flex-shrink:0}
.pdf-note{margin-top:20px; padding:15px 16px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); font-size:12px; color:var(--ink-3); line-height:1.55}
.pdf-foot{display:flex; align-items:center; justify-content:space-between; padding:14px 30px; border-top:1px solid var(--border); font-size:11px; color:var(--ink-4); flex-wrap:wrap; gap:6px}
.pdf-foot .by{display:inline-flex; align-items:center; gap:6px; color:var(--accent-700); font-weight:600}