@import url("site-system.css?v=20260922d");

.role-page { margin:0; overflow-x:hidden; background:radial-gradient(48% 28% at 4% 0,var(--site-periwinkle),transparent 72%),radial-gradient(40% 24% at 100% 18%,color-mix(in srgb,var(--site-peach) 70%,transparent),transparent 72%),var(--site-paper); color:var(--site-ink); font:17px/1.55 var(--site-sans); -webkit-font-smoothing:antialiased; }
.role-page * { box-sizing:border-box; }
.role-page a { color:inherit; }
.role-page .eyebrow { display:inline-flex; align-items:center; gap:9px; margin:0; color:var(--site-action); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.role-page .eyebrow::before { width:8px; height:8px; border:2px solid currentColor; border-radius:50%; content:""; }
.role-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.82fr); gap:clamp(38px,7vw,88px); align-items:center; padding:clamp(62px,8vw,108px) 0 72px; }
.role-hero h1 { max-width:10.5ch; margin:14px 0 20px; font:600 clamp(3.25rem,6.4vw,5.25rem)/.97 var(--site-serif); letter-spacing:-.072em; }
.role-hero .lede { max-width:47ch; margin:0; color:var(--site-muted); font-size:1.08rem; }
.role-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:28px; }
.role-primary { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 18px; border-radius:14px; background:var(--site-action); color:#fff!important; font-weight:700; text-decoration:none; box-shadow:inset 0 1px rgba(255,255,255,.28),0 8px 20px rgba(74,82,190,.2); }
.role-secondary { color:var(--site-action)!important; font-size:.9rem; font-weight:700; text-decoration:none; }
.role-proof { display:flex; flex-wrap:wrap; gap:9px 18px; margin:24px 0 0; padding:0; color:var(--site-muted); font-size:.78rem; list-style:none; }
.role-proof li::before { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#b9e7d4; content:""; }
.role-demo { padding:12px; border:1px solid color-mix(in srgb,var(--site-action) 22%,var(--site-line)); border-radius:30px; background:color-mix(in srgb,var(--site-periwinkle) 62%,var(--site-surface)); box-shadow:0 26px 58px rgba(44,49,112,.13); }
.role-demo-window { display:grid; gap:13px; min-height:410px; padding:20px; border:1px solid rgba(255,255,255,.76); border-radius:23px; background:color-mix(in srgb,var(--site-surface) 90%,transparent); }
.role-demo-head { display:flex; justify-content:space-between; color:var(--site-muted); font-size:.72rem; font-weight:750; }
.role-demo-head span:last-child { color:var(--site-action); }
.role-demo-card { padding:17px; border:1px solid var(--site-line); border-radius:18px; background:var(--site-surface); box-shadow:0 12px 28px rgba(37,42,94,.07); }
.role-demo-card small { display:block; color:var(--site-muted); font-size:.67rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.role-demo-card h2 { margin:6px 0 4px; font:600 1.65rem/1 var(--site-serif); letter-spacing:-.045em; }
.role-demo-card p { margin:0; color:var(--site-muted); font-size:.82rem; }
.role-demo-list { display:grid; gap:8px; margin-top:14px; }
.role-demo-list span { display:flex; justify-content:space-between; gap:12px; padding:11px 12px; border-radius:12px; background:color-mix(in srgb,var(--site-periwinkle) 38%,var(--site-surface)); color:var(--site-muted); font-size:.76rem; }
.role-demo-list b { color:var(--site-ink); }
.role-demo-assist { border-color:color-mix(in srgb,var(--site-action) 44%,var(--site-line)); background:linear-gradient(135deg,color-mix(in srgb,var(--site-periwinkle) 76%,var(--site-surface)),var(--site-surface)); }
.role-demo-assist strong { display:block; margin-top:7px; }
.role-section { padding:78px 0; border-top:1px solid var(--site-line); }
.role-section-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.65fr); gap:42px; align-items:end; }
.role-section h2 { max-width:12ch; margin:11px 0 0; font:600 clamp(2.45rem,5vw,4rem)/1 var(--site-serif); letter-spacing:-.065em; }
.role-section-head>p { margin:0; color:var(--site-muted); }
.role-moments { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:36px; }
.role-moment { min-height:220px; padding:22px; border:1px solid var(--site-line); border-radius:24px; background:var(--site-surface); box-shadow:0 10px 24px rgba(42,47,103,.045); }
.role-moment i { display:grid; place-items:center; width:40px; height:40px; border-radius:13px; background:var(--site-periwinkle); color:var(--site-action); font-style:normal; font-weight:800; }
.role-moment h3 { margin:18px 0 8px; font-size:1rem; }
.role-moment p { margin:0; color:var(--site-muted); font-size:.88rem; }
.role-thread { display:grid; grid-template-columns:.78fr 1.22fr; gap:28px; align-items:center; margin-top:36px; padding:28px; border:1px solid color-mix(in srgb,var(--site-action) 22%,var(--site-line)); border-radius:28px; background:linear-gradient(135deg,color-mix(in srgb,var(--site-periwinkle) 68%,var(--site-surface)),var(--site-surface)); }
.role-thread h3 { margin:9px 0 10px; font:600 2rem/1 var(--site-serif); letter-spacing:-.055em; }
.role-thread p { margin:0; color:var(--site-muted); }
.role-thread-list { display:grid; gap:9px; }
.role-thread-list span { display:flex; justify-content:space-between; gap:12px; padding:14px; border:1px solid var(--site-line); border-radius:14px; background:var(--site-surface); font-size:.82rem; font-weight:700; }
.role-thread-list em { color:var(--site-action); font-size:.7rem; font-style:normal; }
.role-closing { padding:78px 0 44px; }
.role-closing-inner { padding:clamp(30px,6vw,68px); border-radius:32px; background:radial-gradient(circle at 85% 10%,rgba(151,157,255,.48),transparent 28%),radial-gradient(circle at 6% 100%,rgba(255,193,156,.3),transparent 29%),#161b38; color:#fff; }
.role-closing h2 { max-width:11ch; margin:11px 0 14px; font:600 clamp(2.7rem,5vw,4.4rem)/.98 var(--site-serif); letter-spacing:-.068em; }
.role-closing p { max-width:52ch; color:#d5d8ea; }
.role-footer { padding:0 0 38px; color:var(--site-muted); font-size:.78rem; }

@media(max-width:850px) { .role-hero,.role-section-head,.role-thread { grid-template-columns:1fr; } .role-moments { grid-template-columns:1fr; } .role-moment { min-height:0; } }
@media(max-width:560px) { .role-hero { gap:32px; padding:38px 0 48px; } .role-hero h1 { max-width:none; font-size:clamp(2.35rem,11vw,3.3rem); line-height:1; } .role-hero .lede { font-size:1rem; } .role-actions { gap:12px; margin-top:24px; } .role-primary { flex:1 1 100%; } .role-proof { display:grid; } .role-demo { padding:9px; border-radius:25px; } .role-demo-window { min-height:0; padding:15px; border-radius:19px; } .role-section { padding:56px 0; } .role-section h2 { font-size:2.45rem; } .role-thread { padding:22px; border-radius:24px; } .role-closing { padding-top:56px; } .role-closing-inner { border-radius:25px; } }
@media(prefers-color-scheme:dark) { .role-page { --site-paper:#101117; --site-surface:#1d1f2a; --site-ink:#f5f5fa; --site-muted:#b9bfd1; --site-line:rgba(194,199,255,.18); --site-periwinkle:#252846; background:radial-gradient(48% 28% at 4% 0,#24264a,transparent 72%),radial-gradient(40% 24% at 100% 18%,#30242c,transparent 72%),var(--site-paper); } .role-demo-window { border-color:rgba(205,210,255,.12); } .role-demo-card,.role-moment,.role-thread-list span { box-shadow:none; } }
@media(prefers-reduced-motion:reduce) { .role-page * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }