@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;450;500;600;700&display=swap');
/* ============================================================
   ProfylPages — shared design system  ·  "Minimal" direction
   Editorial serif display + clean sans body, warm paper,
   hairline borders, soft depth. Class/token names preserved.
   ============================================================ */
:root{
  --ink:#191a22; --ink-soft:#53565f; --muted:#9a9da8; --line:#ecebe6; --line-2:#f4f3ef;
  --paper:#fff; --bg:#f6f5f1;
  --indigo:#3a39a3; --indigo-soft:#eceafb;
  --amber:#b7860f; --amber-soft:#f8f1dd;
  --wa:#1c9e54; --wa-soft:#e7f4ec; --wa-ink:#157a45;
  --red:#c0392b; --red-soft:#fbecea;
  --teal:#1fa888; --blue:#3f74b0; --slate:#586079; --brown:#b0792f;
  --radius:20px;
  --shadow:0 1px 1px rgba(25,26,34,.03), 0 18px 42px -18px rgba(25,26,34,.16);
  --shadow-sm:0 1px 2px rgba(25,26,34,.05);
  --display:"Fraunces","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15.5px; line-height:1.6; letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0; line-height:1.15}
h1,h2{font-family:var(--display); font-weight:600; letter-spacing:-.018em}
h3,h4{font-weight:650; letter-spacing:-.01em}
a{color:inherit; text-decoration:none}
img{max-width:100%}
::selection{background:#dedcfa}
.wrap{max-width:1080px; margin:0 auto; padding:0 22px}
section[id], header[id]{scroll-margin-top:80px}   /* anchor jumps land clear of the sticky nav */
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 22px}
.muted{color:var(--muted)} .soft{color:var(--ink-soft)}
.center{text-align:center}
.hide{display:none !important}

/* ---------- top nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(246,245,241,.78); backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--line)}
.nav .row{display:flex; align-items:center; gap:18px; height:66px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:16.5px; letter-spacing:-.02em}
/* the wordmark shows everywhere: a trust product should say its own name in the chrome */
@media(max-width:380px){ .brand .wordmark{display:none} }
.brand .mark{width:30px; height:30px; border-radius:9px; background:linear-gradient(140deg,#3a39a3,#6a68e0); display:grid; place-items:center; color:#fff; font-size:14px; font-weight:800; box-shadow:0 4px 12px -3px rgba(58,57,163,.5)}
.brand small{font-weight:500; color:var(--muted); font-size:11px; letter-spacing:.06em; text-transform:uppercase}
.navtoggle{display:none; margin-left:auto; width:42px; height:42px; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:none; background:none; padding:0; cursor:pointer; border-radius:10px}
.navtoggle span{display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform .18s, opacity .18s}
.navtoggle.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle.on span:nth-child(2){opacity:0}
.navtoggle.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.navlinks{display:flex; gap:2px; margin-left:auto; align-items:center}
.navlinks a{font-size:14px; font-weight:550; color:var(--ink-soft); padding:8px 13px; border-radius:10px; transition:.13s}
.navlinks a:hover{background:rgba(25,26,34,.05); color:var(--ink)}
.navlinks a.on{color:var(--indigo); background:var(--indigo-soft)}
.navlinks .demo{font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--amber); background:var(--amber-soft); border:1px solid #efe2c0; padding:4px 10px; border-radius:999px; margin-left:6px}
/* the Seeker's primary job — find an advisor — is the prominent action, a search affordance */
/* a solid CTA button — colour follows .btn.primary (theme-controlled, same as every other
   primary CTA); navfind only sets nav-appropriate sizing + the reveal-on-scroll behaviour */
.navlinks a.navfind{gap:7px; color:#fff; font-size:13.5px; font-weight:650; padding:9px 16px; border-radius:11px; line-height:1; opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .22s ease, transform .22s ease, background .13s ease, border-color .13s ease}
.navlinks a.navfind.show{opacity:1; visibility:visible; transform:none}
.navlinks a.navfind:hover{color:#fff}
.navlinks a.navfind .fi{width:15px; height:15px; flex:none}
/* the supply-side on-ramp, deliberately quiet — claim/verify is the primary listing path */
.navlinks a.navpro{color:var(--muted); font-weight:500}
.navlinks a.navpro:hover{color:var(--ink-soft)}
/* account menu for a logged-in member — gives them a way to log out (the gap the flat nav had) */
.navacct{position:relative; display:flex}
.navavatar{display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:14px; font-weight:550; color:var(--ink-soft); background:none; border:1px solid var(--line); padding:6px 13px; border-radius:999px; cursor:pointer; transition:.13s}
.navavatar:hover{border-color:#d6d4cd; color:var(--ink)}
.navavatar .caret{font-size:11px; transition:transform .15s}
.navacct.open .navavatar .caret{transform:rotate(180deg)}
.navmenu{display:none; position:absolute; top:calc(100% + 8px); right:0; min-width:172px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:6px; flex-direction:column; gap:1px; z-index:60}
.navacct.open .navmenu{display:flex}
.navmenu a, .navmenu button{display:block; width:100%; text-align:left; font-family:inherit; font-size:14px; font-weight:500; color:var(--ink-soft); background:none; border:none; padding:9px 11px; border-radius:8px; cursor:pointer; transition:.12s}
.navmenu a:hover, .navmenu button:hover{background:rgba(25,26,34,.05); color:var(--ink)}
.nav .row{flex-wrap:wrap; row-gap:0}
@media(max-width:1000px){ .navlinks .demo{display:none} }
@media(max-width:640px){
  .nav .row{height:auto; min-height:54px; padding-top:6px; padding-bottom:6px; row-gap:6px; position:relative; flex-wrap:nowrap}  /* keep .wrap's 22px side gutter so the iQ mark aligns with page content */
  .navtoggle{display:flex}                       /* links collapse into the hamburger */
  .navlinks{display:none; position:absolute; top:100%; right:22px; flex-direction:column; align-items:stretch; gap:2px; margin:0; min-width:184px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:8px; z-index:60}
  .navlinks.open{display:flex}
  .navlinks a.lbl{font-size:15px; padding:12px 14px; border-radius:10px}
  /* the find-an-advisor pill stays out of the hamburger — the primary action is always visible */
  .navlinks a.navfind{font-size:13px; padding:7px 13px}
  /* inside the open sheet the account menu is shown inline (no nested toggle) */
  .navacct{display:block; width:100%}
  .navavatar{width:100%; justify-content:space-between; border:none; padding:12px 14px; font-size:15px}
  .navavatar .caret{display:none}
  .navmenu{display:flex; position:static; box-shadow:none; border:none; border-top:1px solid var(--line); border-radius:0; padding:4px 0 0; margin-top:2px; min-width:0}
  .navmenu a, .navmenu button{font-size:15px; padding:11px 14px}
}

/* ---------- buttons ---------- */
[hidden]{display:none!important}   /* author display rules (.btn etc.) otherwise override the attribute */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; border:1px solid var(--line);
  background:#fff; color:var(--ink); padding:11px 18px; border-radius:13px; font-size:14.5px; font-weight:600; transition:.15s ease; font-family:inherit}
.btn:hover{border-color:#d6d4cd; transform:translateY(-1px); box-shadow:var(--shadow-sm)}
.btn.primary{background:var(--indigo); color:#fff; border-color:var(--indigo); box-shadow:0 8px 18px -8px rgba(58,57,163,.6)}
.btn.primary:hover{background:#2f2e8e}
.btn.wa{background:var(--wa); color:#fff; border-color:var(--wa); box-shadow:0 8px 18px -8px rgba(28,158,84,.55)}
.btn.wa:hover{background:#178a48}
.btn.dark{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn.dark:hover{background:#000}
.btn.ghost{background:transparent; box-shadow:none}
.btn.block{display:flex; width:100%}
.btn.sm{padding:8px 13px; font-size:13px; border-radius:10px}

/* ---------- cards ---------- */
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px}
.eyebrow{font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--indigo)}

/* ---------- avatar (photo or initials fallback) ---------- */
.avatar{position:relative; flex:0 0 auto; border-radius:22px; display:grid; place-items:center; color:#fff; font-weight:700; font-family:var(--sans); overflow:hidden; box-shadow:var(--shadow-sm)}
.avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.avatar.t-mfd{background:linear-gradient(140deg,#3a39a3,#6a68e0)}
.avatar.t-insurance{background:linear-gradient(140deg,#176b5a,#1fa888)}
.avatar.t-sub_broker{background:linear-gradient(140deg,#274b7a,#3f74b0)}
.avatar.t-dsa{background:linear-gradient(140deg,#7a4a16,#b0792f)}
.avatar.t-ria{background:linear-gradient(140deg,#3a3f55,#586079)}
.avatar.t-ca{background:linear-gradient(140deg,#9a6a10,#c98a17)}

/* ---------- badges / pills ---------- */
.verify{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px;
  background:var(--wa-soft); color:var(--wa-ink); border:1px solid #c6e8d3}
.verify.onhero{background:rgba(255,255,255,.15); color:#fff; border-color:rgba(255,255,255,.28)}
.verify.pending{background:#fbf3e0; color:#9a6a10; border-color:#eedcae}
.clean{display:flex; align-items:center; gap:9px; background:var(--wa-soft); border:1px solid #c6e8d3; border-radius:12px; padding:11px 14px; font-size:13px; color:var(--wa-ink); font-weight:600}
.typepill{font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px}
.tp-mfd{background:var(--indigo-soft); color:var(--indigo)}
.tp-insurance{background:#e0f1ec; color:#157a64}
.tp-sub_broker{background:#e5eef8; color:#2c558a}
.tp-dsa{background:#f5ecda; color:#8a5e12}
.tp-ria{background:#eaebf1; color:#414763}
.tp-ca{background:var(--amber-soft); color:#9a6a10}
.tag{font-size:12.5px; background:var(--line-2); border:1px solid var(--line); border-radius:9px; padding:5px 11px; color:var(--ink-soft)}
.tag.foc{background:var(--indigo-soft); border-color:#dddbf7; color:var(--indigo)}
.tagwrap{display:flex; flex-wrap:wrap; gap:7px}

/* vouch chips */
.v{font-size:13px; background:var(--wa-soft); border:1px solid #c6e8d3; color:var(--wa-ink); border-radius:999px; padding:6px 13px; font-weight:500}
.v .n{opacity:.65; font-weight:800; margin-left:4px}
.v.int{background:#fbf3e0; border-color:#eedcae; color:#9a6a10}
.vgrid{display:flex; flex-wrap:wrap; gap:8px}

/* referral strip */
.refstrip{color:#fff; text-align:center; font-size:13.5px; padding:10px 12px; font-weight:550}
.refstrip b{font-weight:700}
.rs-mfd{background:var(--indigo)} .rs-insurance{background:#157a64} .rs-sub_broker{background:#2c558a}
.rs-dsa{background:#86511a} .rs-ria{background:#414763}

/* disclosure cards */
.charge{background:var(--amber-soft); border:1px solid #efe2c0; border-radius:12px; padding:11px 14px; font-size:13px; color:#8a5e12}
.info{background:#eef3fb; border:1px solid #d8e3f3; color:#2c558a; border-radius:12px; padding:11px 14px; font-size:13px}
.blocked{background:var(--red-soft); border:1px solid #f1cdc6; color:var(--red); border-radius:12px; padding:10px 14px; font-size:12.5px}
.foot-legal{font-size:11px; color:var(--muted); line-height:1.65}

/* footer */
.sitefoot{border-top:1px solid var(--line); margin-top:48px; padding:34px 0 56px; color:var(--muted); font-size:12.5px; line-height:1.75}
.sitefoot a{color:var(--ink-soft); font-weight:550}
/* sitemap columns — the lost reader's exit map */
.sitefoot .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:20px 28px; margin-bottom:24px}
.sitefoot .col h5{margin:0 0 8px; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.sitefoot .col a{display:block; padding:3px 0; font-size:13px}
.sitefoot .col a:hover{color:var(--ink)}

/* ---------- console app shell (left sidebar nav) ---------- */
body.has-console-shell{padding-left:236px}
.console-shell{position:fixed; left:0; top:0; bottom:0; width:236px; background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column; padding:16px 12px; z-index:60; gap:3px}
.console-shell .cs-brand{display:flex; align-items:center; gap:9px; font-weight:650; padding:6px 10px 14px; font-size:15px; color:var(--ink)}
.console-shell .cs-brand .mark{width:28px; height:28px; border-radius:8px; background:linear-gradient(140deg,#a3e635,#d9ff50); color:#1a2e05; display:grid; place-items:center; font-weight:800; font-size:13px}
.cs-section{font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:12px 12px 5px}
.cs-nav{display:flex; flex-direction:column; gap:2px}
.cs-item{display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px; font-size:14px; font-weight:550; color:var(--ink-soft); cursor:pointer; border:none; background:none; font-family:inherit; width:100%; text-align:left; text-decoration:none}
.cs-item:hover{background:var(--line-2); color:var(--ink)}
.cs-item.on{background:#ecfccb; color:#3f6212; font-weight:650}
.cs-ic{width:20px; text-align:center; font-size:15px; flex:none}
.cs-foot{margin-top:auto; border-top:1px solid var(--line); padding-top:8px; display:flex; flex-direction:column; gap:2px}
.cs-foot .who{padding:6px 12px 8px; font-size:12px; color:var(--muted); line-height:1.35}
.cs-foot .who b{color:var(--ink); font-weight:650; display:block; font-size:13px}
.cs-logout{color:var(--muted)}
/* mobile: sidebar → horizontal scrollable top strip */
@media(max-width:900px){
  body.has-console-shell{padding-left:0}
  .console-shell{position:sticky; top:0; width:auto; flex-direction:row; align-items:center; border-right:none; border-bottom:1px solid var(--line); padding:8px; gap:4px; overflow-x:auto}
  .console-shell .cs-brand{padding:6px 8px; flex:0 0 auto}
  .cs-section{display:none}
  .cs-nav{flex-direction:row; gap:2px}
  .cs-item{white-space:nowrap; padding:8px 11px}
  .cs-foot{margin-top:0; border-top:none; padding-top:0; flex-direction:row; align-items:center; margin-left:auto}
  .cs-foot .who{display:none}
}

/* F3 share-compose modal + the intro card (feature 5) */
.pp-sharedlg{border:none; border-radius:16px; padding:0; max-width:480px; width:92vw; background:var(--paper); color:var(--ink); box-shadow:var(--shadow)}
.pp-sharedlg::backdrop{background:rgba(20,24,43,.5)}
.pp-sd-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:16px 18px 14px; border-bottom:1px solid var(--line)}
.pp-sd-head h3{font-size:16px} .pp-sd-sub{font-size:12px; color:var(--muted); margin-top:3px; max-width:34ch}
.pp-sd-body{padding:14px 18px 18px}
.pp-sd-k{font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:6px}
.pp-sd-ta{width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:13.5px; font-family:inherit; line-height:1.5; resize:vertical; background:#fbfbfd}
.pp-sd-ta:focus{outline:none; border-color:var(--indigo)}
.pp-sd-link{display:flex; gap:8px; margin-top:10px} .pp-sd-link input{flex:1; min-width:0; border:1px solid var(--line); border-radius:9px; padding:8px 10px; font-size:12px; font-family:ui-monospace,Menlo,monospace; background:#fbfbfd; color:var(--ink-soft)}
.pp-sd-actions{display:flex; gap:8px; margin-top:12px} .pp-sd-actions #ppShareWa{flex:1}
.pp-sd-note{display:flex; gap:6px; font-size:11.5px; color:var(--muted); margin-top:12px; line-height:1.45}
.introcard{background:#f7fbf8; border:1px solid #cbe9d6; border-radius:12px; padding:13px 15px; margin-top:12px}
.introcard .ic-sum{font-size:14px; color:var(--ink); line-height:1.5} .introcard .ic-meta{font-size:12px; color:var(--ink-soft); margin-top:7px; display:flex; flex-wrap:wrap; gap:5px 14px}
.introcard .ic-meta b{font-weight:650; color:var(--ink)}