/* Paragon MSP shared styles for inner pages (prototype) */
:root{--g-dark:#14171b;--g-dark2:#22272e;--g-dark3:#2f3b48;--blue:#026399;--blue-hi:#3fa9f5;--blue-ink:#04243a;--bg:#f4f5f7;--card:#ffffff;--ink:#14171b;--sub:#55606e;--line:#dfe3e8;--alert:#ff6b4a;--ok:#12916b;--amber:#f5a524;
--display:'Manrope','Segoe UI',system-ui,sans-serif;--body:'Figtree','Segoe UI',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,Consolas,monospace;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance}
a{color:inherit}
[id]{scroll-margin-top:84px}
:focus-visible{outline:3px solid var(--blue-hi);outline-offset:3px;border-radius:6px}
.pw{max-width:1140px;margin:0 auto;padding-inline:20px}
.proto{background:#fff7e0;color:#6b4e00;border-bottom:1px solid #f1dfa6;font-size:13px}.proto .pw{padding-block:7px}
/* header */
header.pnav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.pnav .pw{display:flex;align-items:center;gap:20px;padding-block:12px}
.plogo{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:20px;color:#1b2440;text-decoration:none;border-radius:8px}
.plogo b{color:#1a6fb5}.plogo svg{width:30px;height:22px}
.pmenu{display:flex;gap:6px;margin-left:auto;font-size:14.5px;font-weight:500;align-items:center}
.pmenu a{text-decoration:none;color:#29344f;padding:6px 9px;border-radius:8px}
.pmenu a[aria-current=page]{color:var(--blue);background:#e6f1f8}
.pdrop{position:relative}.pdrop>button{font:inherit;color:#29344f;background:none;border:0;padding:6px 9px;border-radius:8px;cursor:pointer}
.pdrop .pdd{position:absolute;top:100%;left:0;min-width:240px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(20,23,27,.14);padding:8px;display:none}
.pdrop:hover .pdd,.pdrop:focus-within .pdd{display:grid}
.pdd a{display:block;padding:9px 12px}
.pbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:12px 20px;font:700 15px var(--display);cursor:pointer;text-decoration:none;transition:transform .15s}
.pbtn.pri{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(2,99,153,.3)}
.pbtn.hi{background:var(--blue-hi);color:var(--blue-ink)}
.pbtn.ghost{background:transparent;color:var(--blue);border:1.5px solid var(--blue)}
.pbtn.ghost.dark{color:#fff;border-color:rgba(255,255,255,.6)}
header.pnav .pbtn{padding:9px 14px;font-size:14px}
/* page hero */
.phero{position:relative;overflow:hidden;background:linear-gradient(120deg,#14171b 0%,#22272e 55%,#2f3b48 100%);color:#fff;padding:64px 0 56px}
.phero .eyebrow{font:700 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-hi)}
.phero h1{font-size:clamp(32px,4.6vw,52px);line-height:1.08;margin:12px 0 14px;letter-spacing:-.02em}
.phero p.lead{font-size:18px;color:#c9d4e5;max-width:40em;margin:0 0 24px}
.crumb{font-size:13px;color:#9fb0c4;margin-bottom:10px}.crumb a{color:#cfe2f4;text-decoration:none;border-radius:6px}
/* sections */
.psec{padding:72px 0}
.psec .eyebrow{font:700 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.psec h2{font-size:clamp(26px,3.2vw,38px);margin:10px 0 10px;letter-spacing:-.015em}
.psec p.sub{color:var(--sub);font-size:17px;max-width:44em;margin:0 0 28px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
/* final CTA band */
.pcta{background:linear-gradient(120deg,#04243a,#026399);color:#fff;border-radius:22px;padding:40px;display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center}
.pcta h2{color:#fff;margin:0 0 8px}.pcta p{color:#d7e8f5;margin:0}
.pcta .acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
/* footer */
footer.pfoot{background:var(--g-dark);color:#aab4c0;margin-top:72px}
footer.pfoot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;padding:44px 0 28px}
footer.pfoot h4{font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#8b96a3;margin:0 0 10px}
footer.pfoot a{display:block;color:#dfe6ee;text-decoration:none;padding:3px 6px;margin-left:-6px;border-radius:8px;font-size:14.5px}
footer.pfoot .bar{border-top:1px solid var(--g-dark2);padding:16px 0;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
/* pulse system */
@keyframes hvp{0%{box-shadow:0 0 0 0 rgba(63,169,245,.65)}100%{box-shadow:0 0 0 14px rgba(63,169,245,0)}}
@keyframes idlep{0%,70%{box-shadow:0 0 0 0 rgba(63,169,245,.55)}100%{box-shadow:0 0 0 16px rgba(63,169,245,0)}}
@keyframes pingp{0%{box-shadow:0 0 0 0 rgba(63,169,245,.8)}100%{box-shadow:0 0 0 22px rgba(63,169,245,0)}}
@media (hover:hover){body :is(a,button,[role=tab],summary,input[type=range],label.chip,[tabindex="0"]):hover{animation:hvp 1.1s ease-out infinite!important}}
body :is(a,button,[role=tab],summary,[tabindex="0"]):focus-visible{animation:hvp 1.1s ease-out infinite!important}
.cta-idle{animation:idlep 2.6s ease-out infinite}
.cta-ping{animation:pingp .9s ease-out 2}
.tapped{animation:pingp .7s ease-out 1!important}
/* reveal: visible at rest, a short move plays on entry */
@keyframes secin{from{transform:translateY(26px)}to{transform:none}}
.reveal.seen{animation:secin .8s cubic-bezier(.2,.8,.2,1) both}
/* mobile */
.burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer;align-items:center;justify-content:center}
.burger b,.burger b:before,.burger b:after{display:block;width:20px;height:2px;background:var(--g-dark);border-radius:2px;position:relative;transition:.25s}
.burger b:before,.burger b:after{content:"";position:absolute;left:0}.burger b:before{top:-6px}.burger b:after{top:6px}
.menu-open .burger b{background:transparent}.menu-open .burger b:before{top:0;transform:rotate(45deg)}.menu-open .burger b:after{top:0;transform:rotate(-45deg)}
.psheet,.mbar{display:none}
@media (max-width:980px){
 .pmenu,header.pnav .pw>.pbtn{display:none}.burger{display:flex}
 .psheet{display:block;visibility:hidden;position:fixed;left:0;right:0;z-index:45;background:rgba(20,23,27,.97);padding:10px 20px 24px;transform:translateY(-120%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
 .menu-open .psheet{transform:none;visibility:visible}
 .psheet a{display:block;color:#fff;text-decoration:none;font:700 19px var(--display);padding:11px 4px;border-bottom:1px solid #2f3b48}
 .psheet a.pbtn{margin-top:16px;border:0;background:var(--blue-hi);color:var(--blue-ink)}
 .mbar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:44;justify-content:center;background:var(--blue-hi);color:var(--blue-ink);font:800 15px var(--display);text-decoration:none;padding:14px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .3s}
 .mbar.hide{transform:translateY(140%)}
 body{padding-bottom:84px}
 .pcta{grid-template-columns:1fr;padding:28px}.pcta .acts{justify-content:flex-start}
 footer.pfoot .cols{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* ===== Site unify: inner pages share the home canvas (light top, light body, dark end).  Home keeps its own rules. ===== */
/* 1. hero: light top that fades softly into the page body */
body:not(.pg-home) .phero{background:linear-gradient(180deg,#f7f9fb 0%,#eef5fa 38%,#e6f1f8 70%,var(--bg) 100%);color:var(--ink)}
body:not(.pg-home) .phero>.pw{position:relative;z-index:1}
body:not(.pg-home) .phero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233fa9f5' stop-opacity='.9'/%3E%3Cstop offset='.75' stop-color='%233fa9f5' stop-opacity='.25'/%3E%3Cstop offset='1' stop-color='%233fa9f5' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M300 0 H340 L480 640 H160 Z' fill='url(%23b)'/%3E%3Ccircle cx='320' cy='320' r='300' stroke='%23026399' stroke-width='3'/%3E%3Ccircle cx='320' cy='320' r='252' stroke='%23026399' stroke-width='3' stroke-dasharray='2 8'/%3E%3Ccircle cx='320' cy='320' r='200' stroke='%231f86c9' stroke-width='26' stroke-dasharray='197.4 12'/%3E%3Ccircle cx='320' cy='320' r='164' stroke='%23026399' stroke-width='3' fill='%233fa9f5' fill-opacity='.12'/%3E%3C/svg%3E") no-repeat calc(50% + 300px) 50%/min(680px,120vw) auto;opacity:.13;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent);animation:ubreathe 6s ease-in-out infinite}
body:not(.pg-home) .phero::after{content:none;display:none}
@keyframes ubreathe{0%,100%{opacity:.11}50%{opacity:.15}}
body:not(.pg-home) .phero h1{color:var(--ink)}
body:not(.pg-home) .phero .eyebrow{color:var(--blue)}
body:not(.pg-home) .phero p.lead{color:var(--sub)}
body:not(.pg-home) .phero .crumb{color:var(--sub)}
body:not(.pg-home) .phero .crumb a{color:var(--blue)}
body:not(.pg-home) .phero .pbtn.hi{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(2,99,153,.3)}
body:not(.pg-home) .phero .pbtn.ghost.dark{background:transparent;color:var(--blue);border-color:var(--blue)}
/* 3. one section rhythm, no gaps between sections */
.psec{padding:clamp(56px,8vw,104px) 0}
body:not(.pg-home) main>section{margin-block:0}
/* 1. dark end: the closing band and the footer read as one dark field */
body:not(.pg-home) footer.pfoot{margin-top:0}
/* 2. hero chips, status lines and meta on the light top */
body:not(.pg-home) .phero .hstat{background:rgba(18,145,107,.1);color:#0b6b4f;border-color:rgba(18,145,107,.35)}
body:not(.pg-home) .phero .live{color:#0b6b4f}
body:not(.pg-home) .phero .jump{color:var(--blue)}
body:not(.pg-home) .phero .facts{color:var(--sub)}
body:not(.pg-home) .phero .hchip{background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:0 14px 30px -16px rgba(4,36,58,.5)}
body:not(.pg-home) .phero .meta{color:var(--sub)}
body:not(.pg-home) .phero .meta .tg{color:var(--blue);background:rgba(2,99,153,.08);border-color:rgba(2,99,153,.3)}
body:not(.pg-home) .phero svg rect[fill="url(#pp-glow)"]{opacity:0}
/* 2. hero art: light paper shapes get an outline so they hold on the light top */
body:not(.pg-home) .phero svg rect[fill="#f4f5f7"]{stroke:#cfd7e0;stroke-width:1.5;filter:drop-shadow(0 10px 18px rgba(4,36,58,.14))}
/* 1. dark end zone: the last section fades from the light body into the footer dark, like home */
body:not(.pg-home) main>section:last-child{--uf:clamp(170px,22vw,300px);background:linear-gradient(180deg,var(--bg) 0,#dde8f1 calc(var(--uf)*.22),#b9d3e6 calc(var(--uf)*.4),#6f97b5 calc(var(--uf)*.58),#34546e calc(var(--uf)*.74),#22303d calc(var(--uf)*.87),#181c22 calc(var(--uf)*.95),#14171b var(--uf));padding-top:var(--uf)}
body:not(.pg-home) main>section:last-child .pcta{box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
body:not(.pg-home) main>section:last-child .plan{background:#1b2027;border-color:#2f3b48}
body:not(.pg-home) main>section:last-child .plan .pl{color:#9fb0c4}
body:not(.pg-home) main>section:last-child .plan p{color:#c9d4e5}
body:not(.pg-home) main>section:last-child .plan a.more{color:var(--blue-hi)}
body:not(.pg-home) main>section:last-child .plan .pchip{background:rgba(63,169,245,.12);color:#cfe2f4;border-color:rgba(63,169,245,.4)}
/* last section that holds a form or FAQ (no closing band): keep it light, fade to dark in its bottom padding */
body:not(.pg-home) main>section:last-child:not(:has(.pcta)){padding-top:clamp(56px,8vw,104px);padding-bottom:var(--uf);background:linear-gradient(0deg,#14171b 0,#181c22 calc(var(--uf)*.05),#22303d calc(var(--uf)*.13),#34546e calc(var(--uf)*.26),#6f97b5 calc(var(--uf)*.42),#b9d3e6 calc(var(--uf)*.6),#dde8f1 calc(var(--uf)*.78),var(--bg) var(--uf))}
@media (max-width:980px){body:not(.pg-home){padding-bottom:0}body:not(.pg-home) footer.pfoot{padding-bottom:84px}}
body:not(.pg-home) footer.pfoot .bar{display:flex;height:auto;border-radius:0;overflow:visible;background:none;margin:0}
/* 4. one card radius: 18 px on every card (closing band stays 22 like the home band) */
body:not(.pg-home) main :is(.pcard,.tool,.card,.bc,.news,.s5,.pkq,.pkres,.bio,.dcard,.c,.vsum,.qbox,.keypt,.panel,.plan,.svc,.scard,.hw li,details){border-radius:18px!important}
/* 4. one stats style, matching home: large numerals, divider lines, mono source line */
body:not(.pg-home) main :is(.stats,.stats2){gap:0}
body:not(.pg-home) main :is(.stats,.stats2) .stat{display:block;background:none;border:0;border-left:1px solid var(--line);border-radius:0!important;padding:8px 24px;box-shadow:none;transform:none}
body:not(.pg-home) main :is(.stats,.stats2) .stat:first-child{border-left:0;padding-left:0}
body:not(.pg-home) main :is(.stats,.stats2) .stat :is(b,.num){display:block;min-width:0;font:800 clamp(40px,4.4vw,56px)/1.05 var(--display);letter-spacing:-.03em;color:var(--blue)}
body:not(.pg-home) main :is(.stats,.stats2) .stat p{margin:10px 0 8px;color:var(--ink);font-size:16px;max-width:26ch}
body:not(.pg-home) main :is(.stats,.stats2) .stat small,body:not(.pg-home) main .scard .stat small{display:block;margin-top:8px;font:600 12px var(--mono);letter-spacing:.04em;color:var(--sub)}
@media (max-width:760px){body:not(.pg-home) main :is(.stats,.stats2){grid-template-columns:1fr;gap:22px}body:not(.pg-home) main :is(.stats,.stats2) .stat{border-left:0;padding:22px 0 0;border-top:1px solid var(--line)}body:not(.pg-home) main :is(.stats,.stats2) .stat:first-child{border-top:0;padding-top:0}}
body:not(.pg-home) main .scard .stat b{display:block;margin:0 0 4px;font:800 clamp(30px,3vw,36px)/1.05 var(--display);letter-spacing:-.03em;color:var(--blue)}
