/* Clear Funds Manager — shared stylesheet. System fonts only (no webfont fetch),
   plain CSS custom properties for light/dark, no build step, no framework. */

:root{
  --bg:#FAF7FB; --surface:#FFFFFF; --surface-2:#F3EAF6; --ink:#2A0E3A; --ink-muted:#6B5876;
  --border:#E6D9EC; --border-strong:color-mix(in srgb, var(--ink) 35%, var(--surface));
  --accent:#8E44AD; --accent-dark:#3D1152; --accent-soft:#F1E4F7; --accent-ink:#FFFFFF;
  --lavender:#C9A0DC;
  --ok:#1F7A52; --ok-soft:#E7F4EC; --warn:#866212; --warn-soft:#F8EFD9;
  --shadow:0 1px 2px rgba(42,14,58,0.05), 0 16px 40px -24px rgba(42,14,58,0.22);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#170A1F; --surface:#20102B; --surface-2:#2A1737; --ink:#F3EAF8; --ink-muted:#B8A4C4;
    --border:#3A2548; --accent:#B876D6; --accent-dark:#C9A0DC; --accent-soft:#2E1A3B; --accent-ink:#170A1F;
    --lavender:#C9A0DC;
    --ok:#4FBE87; --ok-soft:#132419; --warn:#D8B457; --warn-soft:#282012;
    --shadow:0 1px 2px rgba(0,0,0,0.4), 0 20px 48px -24px rgba(0,0,0,0.65);
    color-scheme: dark;
  }
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; margin:0;}
h1,h2,h3{text-wrap:balance; margin:0; letter-spacing:-0.015em; font-weight:750;}
p{line-height:1.6;}
a{color:var(--accent);}
img{max-width:100%; display:block;}
.mono{font-variant-numeric:tabular-nums;}

.skip-link{position:absolute; left:-9999px; top:0; background:var(--accent-dark); color:#fff; padding:12px 18px; border-radius:0 0 10px 0; z-index:100; text-decoration:none; font-weight:600;}
.skip-link:focus{left:0;}

.wrap{max-width:calc(1320px + 56px); margin:0 auto; padding:0 28px 96px; box-sizing:border-box;}

/* --- Site nav --- */
.sitenav{background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); position:sticky; top:0; z-index:20; border-bottom:1px solid var(--border);}
.sitenav-inner{max-width:calc(1320px + 56px); margin:0 auto; padding:10px 28px; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.sitenav-brand{display:flex; align-items:center; gap:9px; text-decoration:none; padding:6px 0;}
.sitenav-brand img{height:34px; width:auto;}
.sitenav-links{display:flex; align-items:center; gap:4px;}
.navlink{display:inline-flex; align-items:center; gap:5px; color:var(--ink-muted); text-decoration:none; font-size:13.5px; font-weight:600; line-height:1; padding:13px 12px; border:0; border-radius:9px; background:transparent; cursor:pointer; white-space:nowrap; transition:color .15s ease, background-color .15s ease;}
.navlink:hover{color:var(--ink); background:var(--surface-2);}
.navlink[aria-current="page"]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent);}
.navcta{background:var(--accent-dark); color:#fff !important; border-radius:100px; padding:10px 18px; font-weight:700; box-shadow:none !important;}
.navcta:hover{background:var(--accent); color:#fff;}
.navtoggle{display:none; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--ink); background:transparent; border:1px solid var(--border); border-radius:10px; padding:10px 14px; min-height:44px; cursor:pointer;}
.navtoggle-bars{display:inline-flex; flex-direction:column; justify-content:center; gap:4px; width:16px;}
.navtoggle-bars span{display:block; height:2px; border-radius:2px; background:currentColor;}
.sitenav a:focus-visible, .sitenav button:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

@media (max-width:860px){
  .sitenav-inner{flex-wrap:wrap; padding:10px 20px;}
  .navtoggle{display:inline-flex;}
  .sitenav-links{width:100%; flex-direction:column; align-items:stretch; gap:2px; padding:6px 0 12px;}
  .js-nav .sitenav-links{display:none;}
  .js-nav .sitenav-links.is-open{display:flex;}
  .navlink{justify-content:flex-start; padding:0 12px; min-height:48px; font-size:15px; border-radius:10px;}
  .navcta{justify-content:center; margin-top:6px;}
}

/* --- Masthead / hero --- */
.masthead{position:relative; padding:72px 28px 52px; overflow:hidden; background:var(--bg);}
.masthead-home{
  background:
    radial-gradient(560px 420px at 6% -12%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
    radial-gradient(480px 380px at 96% 6%, color-mix(in srgb, var(--lavender) 22%, transparent), transparent 70%),
    var(--bg);
}
.masthead-inner{position:relative; max-width:1320px; margin:0 auto;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:18px;}
.eyebrow svg{width:14px; height:14px;}
h1.title{font-size:clamp(34px,5.2vw,58px); font-weight:750; letter-spacing:-0.03em; line-height:1.06; color:var(--ink); max-width:26ch;}
.masthead-photo-grid h1.title{max-width:17ch;}
.subtitle{margin-top:18px; font-size:17.5px; line-height:1.6; color:var(--ink-muted); max-width:760px; font-weight:400;}
.hero-cta{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:100px; font-size:14.5px; font-weight:700; text-decoration:none; border:1px solid transparent; transition:opacity .15s ease, background .15s ease; cursor:pointer;}
.btn-primary{background:var(--accent-dark); color:#fff;}
.btn-primary:hover{opacity:.86;}
.btn-secondary{background:transparent; color:var(--ink); border-color:var(--border);}
.btn-secondary:hover{background:var(--surface-2);}

.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
@media (max-width:860px){ .hero-grid{grid-template-columns:1fr;} }

/* --- Hero photo (home + services mastheads) --- */
.masthead-photo-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;}
@media (max-width:900px){ .masthead-photo-grid{grid-template-columns:1fr; gap:32px;} }
.masthead-photo{border-radius:20px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border); aspect-ratio:4/5; max-height:520px;}
.masthead-photo img{width:100%; height:100%; object-fit:cover; display:block;}
@media (max-width:900px){ .masthead-photo{aspect-ratio:16/9; max-height:340px;} }
.masthead-services .masthead-photo{aspect-ratio:16/10; max-height:420px;}
@media (max-width:900px){ .masthead-services .masthead-photo{aspect-ratio:16/9; max-height:280px;} }

.trust-panel{background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:22px; box-shadow:var(--shadow);}
.trust-panel h3{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); margin-bottom:14px;}
.trust-row{display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-top:1px solid var(--border);}
.trust-row:first-of-type{border-top:0;}
.trust-row svg{width:20px; height:20px; flex:none; color:var(--accent); margin-top:1px;}
.trust-row .t{font-weight:650; font-size:14.5px;}
.trust-row .d{font-size:13px; color:var(--ink-muted); margin-top:2px; line-height:1.5;}

.proof-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px; padding-top:36px; border-top:1px solid var(--border);}
@media (max-width:700px){ .proof-strip{grid-template-columns:1fr;} }
.proof-item .n{font-size:30px; font-weight:750; color:var(--accent-dark); letter-spacing:-0.02em;}
@media (prefers-color-scheme: dark){ .proof-item .n{color:var(--lavender);} }
.proof-item .l{font-size:13.5px; color:var(--ink-muted); margin-top:4px; line-height:1.45;}

/* --- Two-column page layout with sticky sidebar (FAQ, Switching) --- */
.page-grid{display:grid; grid-template-columns:1fr 300px; gap:48px; align-items:start;}
.page-grid .page-main{min-width:0;}
.page-aside{position:sticky; top:96px;}
@media (max-width:900px){
  .page-grid{grid-template-columns:1fr;}
  .page-aside{position:static; margin-top:8px;}
}
.page-aside .person-card .btn{display:block; text-align:center; width:100%; box-sizing:border-box;}
.page-aside .trust-row{padding:10px 0;}

/* --- Content sections --- */
.info{padding:56px 0; border-top:1px solid var(--border); max-width:820px;}
.info:first-of-type{border-top:none;}
.info:has(.feature-grid,.step-list,.two-col,.stat-band){max-width:none;}
.info h2{font-size:clamp(24px,3vw,32px);}
.info .lede{font-size:17px; color:var(--ink-muted); max-width:85ch; margin-top:14px; line-height:1.65;}
.info p{max-width:85ch; color:var(--ink-muted);}
.info ol, .info ul{max-width:85ch; color:var(--ink-muted); line-height:1.75; padding-left:22px;}
.info li{margin-bottom:6px;}
.info strong{color:var(--ink);}

.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px;}
@media (max-width:860px){ .feature-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .feature-grid{grid-template-columns:1fr;} }
.feature-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:10px; transition:box-shadow .15s ease, border-color .15s ease;}
.feature-card:hover{box-shadow:var(--shadow); border-color:var(--border-strong);}
.feature-card .icon{width:38px; height:38px; border-radius:10px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; color:var(--accent-dark);}
@media (prefers-color-scheme: dark){ .feature-card .icon{color:var(--lavender);} }
.feature-card .icon svg{width:20px; height:20px;}
.feature-card h3{font-size:16.5px;}
.feature-card p{font-size:13.8px; color:var(--ink-muted); margin:0; line-height:1.55;}
.feature-card .go{font-size:13px; font-weight:700; color:var(--accent); margin-top:auto;}

.step-list{counter-reset:step; display:grid; gap:16px; margin-top:28px;}
.step{display:grid; grid-template-columns:auto 1fr; gap:16px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px 22px;}
.step .num{counter-increment:step; width:34px; height:34px; border-radius:50%; background:var(--accent-dark); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:750; flex:none;}
.step h3{font-size:16px; margin-bottom:4px;}
.step p{margin:0; font-size:14px; color:var(--ink-muted);}

.stat-band{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:16px; overflow:hidden; margin-top:28px;}
@media (max-width:760px){ .stat-band{grid-template-columns:repeat(2,1fr);} }
.stat-band .cell{background:var(--surface); padding:22px; text-align:center;}
.stat-band .n{font-size:24px; font-weight:750; color:var(--accent-dark);}
@media (prefers-color-scheme: dark){ .stat-band .n{color:var(--lavender);} }
.stat-band .l{font-size:12.5px; color:var(--ink-muted); margin-top:4px;}

.callout{background:var(--accent-soft); border:1px solid var(--border); border-radius:16px; padding:22px 24px; margin-top:24px; max-width:85ch;}
.callout p{color:var(--ink); margin:0;}
.callout.warn{background:var(--warn-soft);}
.callout strong{display:block; margin-bottom:6px;}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:28px;}
@media (max-width:760px){ .two-col{grid-template-columns:1fr;} }
.person-card{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:26px;}
.person-card .avatar{width:56px; height:56px; border-radius:50%; background:var(--accent-dark); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:750; font-size:19px; margin-bottom:14px;}
.person-card h3{font-size:18px;}
.person-card .role{color:var(--accent); font-weight:650; font-size:13.5px; margin-top:2px; margin-bottom:12px;}
.person-card ul{padding-left:20px; margin:0; color:var(--ink-muted); font-size:14px; line-height:1.7;}

.faq-item{border-top:1px solid var(--border); padding:20px 0;}
.faq-item:first-of-type{border-top:none;}
.faq-item summary{cursor:pointer; font-weight:650; font-size:16px; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; font-size:22px; color:var(--accent); flex:none; font-weight:400;}
.faq-item[open] summary::after{content:'\2212';}
.faq-item p{margin-top:12px; color:var(--ink-muted); max-width:85ch;}

table{width:100%; border-collapse:collapse; margin-top:20px; font-size:14.5px;}
th,td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--border);}
th{color:var(--ink-muted); font-size:12.5px; text-transform:uppercase; letter-spacing:.04em;}

/* --- Forms --- */
.form-card{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:30px; box-shadow:var(--shadow); max-width:720px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:6px;}
@media (max-width:600px){ .form-grid{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:6px; margin-top:16px;}
.field.full{grid-column:1/-1;}
.field label{font-size:13.5px; font-weight:650;}
.field .hint{font-size:12px; color:var(--ink-muted);}
input, textarea, select{font:inherit; font-size:14.5px; padding:11px 13px; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--ink); width:100%;}
input:focus, textarea:focus, select:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
textarea{resize:vertical; min-height:100px;}
.consent{display:flex; gap:10px; align-items:flex-start; margin-top:20px; font-size:13.5px; color:var(--ink-muted); line-height:1.5;}
.consent input{width:auto; margin-top:3px;}
.form-actions{margin-top:24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.form-note{font-size:13px; color:var(--ink-muted);}
#form-success{display:none; background:var(--ok-soft); border:1px solid var(--border); border-radius:16px; padding:26px; max-width:720px;}
#form-success h3{color:var(--ok); margin-bottom:8px;}
#form-success p{margin:0 0 8px; color:var(--ink);}
.dev-note{background:var(--warn-soft); border:1px dashed var(--warn); border-radius:12px; padding:14px 16px; font-size:13px; color:var(--ink); margin-bottom:20px; max-width:720px;}

/* --- Footer --- */
.sitefooter{border-top:1px solid var(--border); background:var(--surface-2); padding-top:48px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;}
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .footer-grid{grid-template-columns:1fr;} }
.footer-brand-name{display:flex; align-items:center; gap:9px; text-decoration:none; margin-bottom:10px;}
.footer-brand-name img{height:30px; width:auto;}
.footer-brand p{font-size:13.5px; color:var(--ink-muted); max-width:32ch; line-height:1.6;}
.footer-col h4{font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); margin-bottom:14px;}
.footer-col a{display:block; color:var(--ink); text-decoration:none; font-size:14px; padding:5px 0; opacity:.85;}
.footer-col a:hover{opacity:1; color:var(--accent);}
.footer-bottom{max-width:calc(1320px + 56px); margin:0 auto; padding:28px 28px 34px; box-sizing:border-box; margin-top:36px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-muted);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .btn, .feature-card, .navlink{transition:none;}
}