/* Shared styles for every page except the homepage.
   Tokens and chrome are lifted from index.html so the pages match it exactly. */

:root{
  --ink:#1A1D23;--gray:#6B7280;--faint:#9CA3AF;--hair:#F1F2F4;--border:#ECECEF;--chipbg:#F3F4F6;
  --white:#FFF;--canvas:#F5F5F7;--violet-700:#5300C4;--violet-600:#6400EB;--violet-100:#F1E9FE;--violet-050:#F7F2FF;
  --quota-green:#16A34A;--green-soft:#E8F6EE;--gold:#A16207;--gold-bg:#FBF3DD;--people:#15803D;--people-bg:#EAF6EE;
  --grad:linear-gradient(135deg,#8A3BFF,var(--violet-600) 60%,#4A00B8);
  --font-ui:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --swift:cubic-bezier(.2,0,0,1);
  --glass-lite:blur(20px) saturate(180%);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.55);
}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
:focus-visible{outline:2px solid var(--violet-600);outline-offset:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;transform:none!important}}
html{scroll-behavior:smooth}
body{font-family:var(--font-ui);color:var(--ink);-webkit-font-smoothing:antialiased;background:var(--white)}
img{max-width:100%;height:auto;display:block}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);border-bottom:1px solid var(--border)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  /* 0.70 with #374151 links keeps the worst case (over the violet band and
     the dark footer) at 5.4:1. The old grey fell to 2.4:1 there. */
  .nav{background:rgba(255,255,255,.70);-webkit-backdrop-filter:var(--glass-lite);backdrop-filter:var(--glass-lite);box-shadow:var(--glass-edge)}
}
@media (prefers-reduced-transparency:reduce){
  .nav{background:var(--white);-webkit-backdrop-filter:none;backdrop-filter:none}
}
.navin{max-width:1160px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:26px}
.lockup svg{height:34px;width:auto;display:block}
.lockup .mark{fill:#6400EB}
.nav a{font-size:13.5px;font-weight:500;color:#374151;text-decoration:none;transition:color .1s var(--swift)}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--ink);font-weight:600}
.nav a.cta{color:#fff}
.nav a.cta:hover{color:#fff;background:var(--violet-700);border-color:var(--violet-700)}
.nav .grow{flex:1}
@media(max-width:640px){
  .navin{padding:10px 14px;gap:12px}
  .lockup svg{height:26px}
  .nav a{white-space:nowrap;flex:0 0 auto;padding:12px 7px}
  .nav .navsec{display:none}
  .nav a.cta{padding:12px 14px}
}
@media(max-width:400px){
  .navin{padding:10px 10px;gap:6px}
  .lockup svg{height:22px}
  .nav a{font-size:12.5px;padding:12px 4px}
  .nav a.cta{font-size:12.5px;padding:12px 10px}
}
/* audience switch */
.navseg{display:inline-flex;align-items:stretch;border:1px solid var(--border);background:var(--chipbg);padding:2px;flex:none}
.navseg a{display:flex;align-items:center;font-size:13px;font-weight:500;color:var(--gray);padding:6px 13px;line-height:1;white-space:nowrap;transition:color .12s var(--swift),background .12s var(--swift)}
.navseg a:hover{color:var(--ink)}
.navseg a.on{background:var(--white);color:var(--violet-700);font-weight:600;box-shadow:0 1px 2px rgba(26,10,70,.07)}
@media(max-width:640px){
  .navseg{padding:1px}
  .navseg a{font-size:12px;padding:6px 9px}
}
.cta{font-family:var(--font-ui);font-size:13.5px;font-weight:600;color:#fff;background:var(--violet-600);border:1px solid var(--violet-600);padding:9px 16px;cursor:pointer;text-decoration:none;transition:background .1s var(--swift);display:inline-block}
.cta:hover{background:var(--violet-700)}
.cta.big{font-size:15px;padding:13px 22px}
.cta.ghost{background:transparent;color:var(--violet-700);border-color:#D8CCF3}
.cta.ghost:hover{background:var(--violet-050);color:var(--violet-700)}

/* shared section furniture */
.kick::before{content:'';display:inline-block;width:18px;height:2px;background:var(--violet-600);margin-right:9px;vertical-align:middle}
.kick{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--violet-700)}
h2{font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1.12;margin-top:12px}
.lead{font-size:15.5px;line-height:1.6;color:var(--gray);margin-top:14px;max-width:560px}

/* page header */
.phead{border-bottom:1px solid var(--border);padding:64px 0 40px;background:
  radial-gradient(620px 340px at 88% -20%,rgba(100,0,235,.07),transparent 62%),var(--white)}
.phead h1{font-size:44px;font-weight:600;letter-spacing:-.025em;line-height:1.08}
.phead .sub{font-size:15.5px;line-height:1.6;color:var(--gray);margin-top:14px;max-width:620px}
.stamp{font-size:12px;font-weight:500;color:var(--faint);margin-top:16px}
@media(max-width:640px){.phead{padding:40px 0 28px}.phead h1{font-size:31px}}

/* legal document body */
.doc{max-width:760px;margin:0 auto;padding:56px 24px 80px}
.doc .intro p{font-size:16px;line-height:1.7;color:var(--ink);margin-bottom:14px}
.doc h2{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:44px 0 0;padding-top:24px;border-top:1px solid var(--hair)}
.doc h2:first-of-type{border-top:none;padding-top:0;margin-top:34px}
.doc h3{font-size:15px;font-weight:600;color:var(--violet-700);margin:26px 0 8px}
.doc p{font-size:15px;line-height:1.72;color:var(--gray);margin-top:10px}
.doc p strong{color:var(--ink);font-weight:600}
.doc ul{margin:12px 0 0;padding-left:0;list-style:none}
.doc li{font-size:15px;line-height:1.72;color:var(--gray);position:relative;padding-left:20px;margin-top:7px}
.doc li::before{content:'';position:absolute;left:2px;top:10px;width:6px;height:1.5px;background:var(--violet-600)}
.doc a{color:var(--violet-700);text-decoration:none;border-bottom:1px solid #D8CCF3}
.doc a:hover{border-bottom-color:var(--violet-600)}
.doc .callout{background:var(--violet-050);border-left:2px solid var(--violet-600);padding:16px 18px;margin-top:18px}
.doc .callout p{margin-top:0;color:var(--ink)}
@media(max-width:640px){.doc{padding:34px 20px 56px}.doc h2{font-size:18px;margin-top:34px}}

/* contents rail */
.toc{border:1px solid var(--border);background:var(--canvas);padding:18px 20px;margin-top:30px}
.toc .tl{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--violet-700);margin-bottom:10px}
.toc ol{list-style:none;counter-reset:t;columns:2;column-gap:26px}
.toc li{counter-increment:t;font-size:13.5px;line-height:1.5;margin-bottom:6px;break-inside:avoid}
.toc a{color:var(--gray);text-decoration:none;border:none}
.toc a:hover{color:var(--violet-700)}
.toc a::before{content:counter(t) '. ';color:var(--faint)}
@media(max-width:640px){.toc ol{columns:1}}

/* footer */
footer{position:relative;overflow:hidden;background:var(--ink);color:rgba(255,255,255,.7);padding:52px 0 30px}
.ftop{position:relative;max-width:1160px;margin:0 auto;padding:0 24px 32px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.fbig{flex:none;display:block;width:96px;height:96px}
.fbig svg{width:100%;height:100%;display:block;fill:#8A3BFF}
.ftag{font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.2;color:#fff;max-width:340px}
.fgrow{flex:1}
.fcta{font-family:var(--font-ui);font-size:14.5px;font-weight:600;color:var(--ink);background:#fff;border:1px solid #fff;padding:12px 20px;text-decoration:none;white-space:nowrap;transition:background .12s var(--swift),color .12s var(--swift)}
.fcta:hover{background:var(--violet-600);border-color:var(--violet-600);color:#fff}
.fin{position:relative;border-top:1px solid rgba(255,255,255,.1);padding-top:24px}
@media(max-width:720px){footer{padding:38px 0 26px}.ftop{gap:18px;padding-bottom:26px}.fbig{width:68px;height:68px}.ftag{font-size:19px;max-width:none}}
.fin{max-width:1160px;margin:0 auto;padding:24px 24px 0;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.flock svg{height:24px;width:auto;display:block}
.flock .mark{fill:#FFFFFF}
footer a{color:rgba(255,255,255,.7);font-size:12.5px;text-decoration:none}
footer a:hover{color:#fff}
.fli{display:inline-flex;align-items:center}
.fli svg{display:block}
footer .grow{flex:1}
/* On phones the footer links are the only navigation on the page, so give each
   one a real tap target instead of a 17px line box. The padding is invisible,
   so the gap is pulled in to keep the text spacing it had. */
@media(max-width:640px){
  .fin{gap:0 2px;padding-top:14px}
  .fin>a{padding:12px 10px;line-height:1.2}
  .fli{padding:12px 15px}
  .fcta{padding:14px 22px}
}

/* ---------------------------------- blog ---------------------------------- */
.meta{font-size:12.5px;font-weight:500;color:var(--faint);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.meta .dot{width:3px;height:3px;background:var(--faint);display:inline-block}

/* index */
.posts{max-width:760px;margin:0 auto;padding:56px 24px 80px}
.post-card{display:block;text-decoration:none;color:inherit;padding:28px 0;border-bottom:1px solid var(--hair)}
.post-card:first-child{padding-top:0}
.post-card:hover h2{color:var(--violet-700)}
.post-card h2{font-size:23px;font-weight:600;letter-spacing:-.015em;line-height:1.2;margin-top:10px;transition:color .1s var(--swift)}
.post-card p{font-size:15px;line-height:1.6;color:var(--gray);margin-top:8px}
.post-card .more{font-size:13px;font-weight:600;color:var(--violet-700);margin-top:12px;display:inline-block}
.post-card .more::after{content:' \2192'}
.feat{border:1px solid var(--border);padding:0;margin-bottom:34px;background:var(--white)}
.feat img{width:100%;aspect-ratio:16/7;object-fit:cover;background:var(--chipbg)}
.feat .in{padding:26px 26px 28px}
.feat .tag{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--violet-700)}
.feat h2{font-size:28px;margin-top:10px}
@media(max-width:640px){.posts{padding:34px 20px 56px}.feat h2{font-size:22px}.post-card h2{font-size:19px}}

/* article */
.art{max-width:720px;margin:0 auto;padding:0 24px 84px}
.art-hero{width:100%;aspect-ratio:16/7;object-fit:cover;background:var(--chipbg);margin-top:-8px}
.art h2{font-size:21px;font-weight:600;letter-spacing:-.012em;line-height:1.25;margin:40px 0 0}
.art p{font-size:16.5px;line-height:1.75;color:#33383F;margin-top:14px}
.art ul{margin:14px 0 0;list-style:none}
.art li{font-size:16.5px;line-height:1.75;color:#33383F;position:relative;padding-left:21px;margin-top:8px}
.art li::before{content:'';position:absolute;left:2px;top:12px;width:7px;height:1.5px;background:var(--violet-600)}
.art blockquote{font-size:20px;font-weight:500;line-height:1.45;letter-spacing:-.015em;color:var(--ink);border-left:2px solid var(--violet-600);padding:4px 0 4px 20px;margin:28px 0}
.art figure{margin:28px 0 0}
.art figure img{width:100%;border:1px solid var(--border);background:var(--canvas)}
.art a{color:var(--violet-700);text-decoration:none;border-bottom:1px solid #D8CCF3}
.art a:hover{border-bottom-color:var(--violet-600)}
.art .sign{font-size:16.5px;line-height:1.75;color:var(--gray);margin-top:26px;padding-top:22px;border-top:1px solid var(--hair)}
.backlink{display:inline-block;font-size:13px;font-weight:500;color:var(--gray);text-decoration:none;margin-bottom:22px}
@media(max-width:640px){.backlink{padding:11px 0;margin-bottom:12px}}
.backlink:hover{color:var(--violet-700)}
.backlink::before{content:'\2190  '}
@media(max-width:640px){.art{padding:0 20px 56px}.art p,.art li{font-size:16px}.art h2{font-size:19px;margin-top:32px}.art blockquote{font-size:18px}}

/* end-of-post cta */
.endcta{border-top:1px solid var(--border);background:var(--canvas);padding:44px 0;margin-top:56px;text-align:center}
.endcta h3{font-size:21px;font-weight:600;letter-spacing:-.015em}
.endcta p{font-size:15px;color:var(--gray);margin-top:8px}
.endcta .cta{margin-top:20px}
.phead h1.art-title{font-size:38px}
@media(max-width:640px){.phead h1.art-title{font-size:27px}}

/* --------------------------------- form ---------------------------------- */
.formwrap{max-width:620px;margin:34px auto 0;border:1px solid var(--border);background:var(--white);padding:30px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{margin-top:16px}
.fld:first-child,.frow .fld{margin-top:0}
.frow{margin-top:0}
.fld label{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);margin-bottom:7px}
.fld input,.fld textarea{width:100%;font-family:var(--font-ui);font-size:15px;color:var(--ink);background:var(--white);border:1px solid var(--border);padding:11px 13px;transition:border-color .1s var(--swift)}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--violet-600)}
.fld textarea{resize:vertical;min-height:112px;line-height:1.55}
.fld .req{color:var(--violet-600)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fstatus{font-size:14px;line-height:1.6;margin-top:14px;min-height:1px}
.fstatus a{color:var(--violet-700)}
.fsend{margin-top:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.fsend button{font-family:var(--font-ui)}
.fsend button[disabled]{opacity:.6;cursor:default}
.fnote{font-size:12.5px;color:var(--faint)}
@media(max-width:640px){
  .formwrap{padding:22px 18px}
  .frow{grid-template-columns:1fr;gap:0}
  .frow .fld+.fld{margin-top:16px}
  /* 16px is the iOS zoom threshold. Anything under it zooms Safari in on focus
     and never back, so the rest of the form gets filled in at 1.4x. */
  .fld input,.fld textarea{font-size:16px;padding:12px 13px}
  .fsend{gap:12px}
  .fsend button{width:100%;padding:15px 22px}
}