/* PolicyGPS.ai site styles. Home page black with purple; inner pages white with black and purple
   (Thomas, 2026-11-06). Font A: Lexend for display, Poppins for body. Screen styles live in screens.css. */
.pg-dark{--bg:#07060C;--fg:#EEEAFB;--mute:#A9A2C2;--rule:#262236;--acc:#8B5CF6;--acc-hi:#B79CFF;--panel:#100D1A;--btn-fg:#fff;color-scheme:dark}
.pg-light{--bg:#FFFFFF;--fg:#0E0B18;--mute:#4B4560;--rule:#E9E5F2;--acc:#6D28D9;--acc-hi:#5B21B6;--panel:#F5F3FA;--btn-fg:#fff;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"Poppins",system-ui,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{font-family:"Lexend",system-ui,sans-serif;font-weight:500;letter-spacing:-.015em;text-wrap:balance;margin:0}
.pg-wrap{max-width:1240px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

/* top bar: always black, so the wordmark reads the same on every page */
.pg-top{position:sticky;top:0;z-index:20;background:rgba(7,6,12,.92);backdrop-filter:blur(10px);border-bottom:1px solid #1E1A2C;color:#EEEAFB}
.pg-topin{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px;flex-wrap:wrap}
.pg-wm{font-family:"Lexend",system-ui,sans-serif;font-weight:600;font-size:22px;letter-spacing:-.02em;text-decoration:none;color:#fff}
.pg-wm .g{color:#B79CFF}.pg-wm .d{color:#8B5CF6}
.pg-nav{display:flex;gap:4px;flex-wrap:wrap}
.pg-nav a{text-decoration:none;font-size:14px;padding:7px 14px;border-radius:9px;color:#CFC9E2}
.pg-nav a:hover{color:#fff;background:rgba(139,92,246,.16)}
.pg-nav a.here{background:#8B5CF6;color:#fff}

/* hero */
.pg-hero{position:relative;overflow:hidden;padding-block:96px 88px}
.pg-dark .pg-hero::before{content:"";position:absolute;width:1300px;height:820px;left:50%;top:-520px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(139,92,246,.42),transparent 72%);pointer-events:none}
.pg-hero .pg-wrap{position:relative;display:grid;gap:22px;justify-items:start}
.pg-heromark{font-size:clamp(44px,7vw,76px)!important;line-height:1}
.pg-hero h1{font-size:clamp(32px,5vw,58px);line-height:1.08;max-width:18ch}
.pg-hero-light{padding-block:72px 40px;background:linear-gradient(180deg,#F5F3FA,#fff)}
.pg-lede{margin:0;font-size:clamp(17px,1.6vw,19px);color:var(--mute);max-width:62ch}
.pg-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.pg-btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font:500 15px "Poppins",system-ui,sans-serif;padding:12px 22px;border-radius:12px;border:1px solid var(--acc);color:var(--fg);background:transparent;cursor:pointer}
.pg-btn:hover{background:color-mix(in srgb,var(--acc) 14%,transparent)}
.pg-btn.solid{background:var(--acc);color:var(--btn-fg)}
.pg-btn.solid:hover{filter:brightness(1.08)}
.pg-btn:focus-visible,.pg-nav a:focus-visible{outline:2px solid var(--acc-hi);outline-offset:2px}

/* sections */
.pg-band{padding-block:80px;border-top:1px solid var(--rule)}
.pg-band h2{font-size:clamp(28px,3.6vw,42px);line-height:1.15;margin-bottom:8px}
.pg-kick{margin:0 0 10px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc-hi)}
.pg-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:28px 64px;align-items:start}
.pg-two p{margin:0;color:var(--mute);font-size:17px}
.pg-two > div p{margin-top:14px}

/* the showcase rows: explanation beside the screen, alternating sides */
.pg-show{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:24px 48px;align-items:center;margin-top:64px}
.pg-show:nth-of-type(even){grid-template-columns:minmax(0,2.3fr) minmax(0,1fr)}
.pg-show:nth-of-type(even) .pg-show-text{order:2}
.pg-show-text h3{font-size:clamp(22px,2.2vw,28px);line-height:1.2;margin-bottom:12px}
.pg-show-text p{margin:0;font-size:16.5px;max-width:46ch}
.pg-show-pic{min-width:0;border-radius:14px;box-shadow:0 30px 80px rgba(139,92,246,.18)}
.pg-light .pg-show-pic{box-shadow:0 20px 60px rgba(91,33,182,.14);border:1px solid var(--rule)}
.pg-next{margin:64px 0 0;display:flex;justify-content:center}

.pg-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:32px}
.pg-three > div{border:1px solid var(--rule);background:var(--panel);border-radius:16px;padding:26px}
.pg-three h3{font-size:21px;margin-bottom:8px;color:var(--acc-hi)}
.pg-three p{margin:0;color:var(--mute)}

/* form */
.pg-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pg-form label{display:grid;gap:6px;font-size:13.5px;color:var(--mute)}
.pg-form .full{grid-column:1/-1}
.pg-form input,.pg-form textarea{font:inherit;font-size:15px;color:var(--fg);background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:11px 13px}
.pg-form textarea{min-height:120px;resize:vertical}
.pg-form input:focus,.pg-form textarea:focus{outline:2px solid var(--acc);outline-offset:1px}

/* footer: always black */
.pg-foot{background:#07060C;color:#A9A2C2;border-top:1px solid #1E1A2C;padding-block:48px 28px;font-size:14px}
.pg-footin{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.pg-footin p{margin:0}
.pg-footin a{color:#CFC9E2;text-decoration:none}
.pg-tag{margin-top:8px!important;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.pg-copy{margin-top:28px;font-size:12.5px}

@media (max-width:900px){
  .pg-two,.pg-show,.pg-show:nth-of-type(even){grid-template-columns:1fr}
  .pg-show:nth-of-type(even) .pg-show-text{order:0}
  .pg-three{grid-template-columns:1fr}
  .pg-hero{padding-block:64px 56px}
}
@media (max-width:560px){.pg-form{grid-template-columns:1fr}}
/* hero mark: solid (white with purple i and .ai) or gradient (white to purple). The page's screens.css
   loads after this file and colors .mk i and .mk b, so these selectors carry the hero class to win. */
.pg-hero .pg-heromark i,.pg-hero .pg-heromark b{font-style:normal;color:#A47BFF}
.pg-hero .pg-heromark.grad{background:linear-gradient(90deg,#FFFFFF 0%,#FFFFFF 28%,#C4A8FF 62%,#8B5CF6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.pg-hero .pg-heromark.grad i,.pg-hero .pg-heromark.grad b{color:transparent}

/* hero with the network picture to the right; its edges fade into the page black */
.pg-herogrid{display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px 40px;align-items:center}
.pg-herotext{display:grid;gap:22px;justify-items:start;min-width:0}
.pg-heroimg{width:100%;height:auto;max-width:100%;-webkit-mask-image:radial-gradient(ellipse 54% 56% at 50% 50%,#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 54% 56% at 50% 50%,#000 52%,transparent 100%)}
@media (max-width:900px){.pg-herogrid{grid-template-columns:1fr}.pg-heroimg{max-width:560px;justify-self:center}}
.pg-heroart{position:relative;min-width:0;justify-self:stretch}
.pg-heronet{display:block;width:100%;aspect-ratio:1.1/1}
.pg-hero[data-art="photo"] .pg-heronet{display:none}
.pg-hero[data-art="network"] .pg-heroimg{display:none}
.pg-sub{margin:-8px 0 0;font-family:"Lexend",system-ui,sans-serif;font-weight:400;font-size:clamp(19px,2vw,24px);line-height:1.35;color:#C4A8FF;max-width:32ch}
/* two-line headline, each line held together */
.pg-hero h1.pg-h1two{font-size:clamp(28px,3.7vw,48px);line-height:1.12;max-width:none}
.pg-h1two span{display:block;white-space:nowrap}
@media (max-width:480px){.pg-h1two span{white-space:normal}}
/* the three audiences as linked nodes, echoing the network; a signal passes along them in turn */
.pg-roles-wrap{display:grid;gap:12px}
.pg-roles-wrap .pg-sub{margin:0;font-size:clamp(16px,1.5vw,18px);color:#A9A2C2}
.pg-roles{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap;row-gap:12px}
.pg-roles li{display:flex;align-items:center;gap:10px;font-family:"Lexend",system-ui,sans-serif;font-size:clamp(17px,1.8vw,22px);color:#EEEAFB;white-space:nowrap}
.pg-roles li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:#B79CFF;box-shadow:0 0 0 4px rgba(139,92,246,.22),0 0 14px rgba(164,123,255,.8);animation:pg-node 3.6s ease-in-out infinite}
.pg-roles li:nth-child(2)::before{animation-delay:1.2s}
.pg-roles li:nth-child(3)::before{animation-delay:2.4s}
.pg-roles li:not(:last-child)::after{content:"";flex:none;width:36px;height:2px;margin:0 14px 0 4px;border-radius:2px;background:linear-gradient(90deg,#8B5CF6,rgba(139,92,246,.15))}
@keyframes pg-node{0%,100%{transform:scale(1);background:#B79CFF}15%{transform:scale(1.45);background:#fff}30%{transform:scale(1);background:#B79CFF}}
@media (prefers-reduced-motion:reduce){.pg-roles li::before{animation:none}}
/* Seiken.ai product page */
.pg-hero .pg-heromark-light{color:#0E0B18}
.pg-hero .pg-heromark-light i,.pg-hero .pg-heromark-light b{color:#6D28D9}
.pg-intro{margin:6px 0 0;color:var(--mute);font-size:17px;max-width:70ch}
.pg-num{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-hi)}
.pg-four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:32px}
.pg-four > div{border:1px solid var(--rule);background:var(--panel);border-radius:16px;padding:24px;display:grid;gap:8px;align-content:start;border-top:3px solid var(--acc)}
.pg-four h3{font-size:22px}
.pg-four p{margin:0;color:var(--mute)}
.pg-gates{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.pg-gates li{position:relative;border:1px solid var(--rule);background:var(--panel);border-radius:16px;padding:24px;display:grid;gap:8px;align-content:start}
.pg-gates li:not(:last-child)::after{content:"";position:absolute;right:-30px;top:50%;width:20px;height:2px;background:var(--acc)}
.pg-gates li:not(:last-child)::before{content:"";position:absolute;right:-32px;top:calc(50% - 5px);border:6px solid transparent;border-left-color:var(--acc)}
.pg-gates h3{font-size:22px}
.pg-gates p{margin:0;color:var(--mute)}
.pg-who{margin-top:6px;font-size:13px;font-weight:500;color:var(--acc)}
@media (max-width:900px){.pg-four{grid-template-columns:1fr 1fr}.pg-gates{grid-template-columns:1fr;gap:20px}.pg-gates li::after,.pg-gates li::before{display:none}}
@media (max-width:560px){.pg-four{grid-template-columns:1fr}}