/* Blunion design system — shared across every page. Indigo + white, matched to the logo. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&family=Jost:wght@300;400;500;600&family=Inter:wght@400;500;600&display=swap');

:root{
  --paper:#FFFFFF; --card:#FFFFFF; --ink:#1B2A4A; --muted:#6A7590; --line:#E9ECF2; --wash:#F7F8FB;
  --navy:#1C356B; --royal:#2C4E96; --steel:#5E76A8; --silver:#C9D2E2; --blue-soft:#EAF0FB;
  --ok:#1F9D6B; --warn:#B98A3E; --bad:#C4553F;
  --serif:"Fraunces",Georgia,serif; --word:"Jost",system-ui,sans-serif; --sans:"Inter",system-ui,sans-serif;
  --shadow:0 24px 60px -26px rgba(24,40,84,.30); --shadow-sm:0 10px 24px -14px rgba(24,40,84,.30);
  --r:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:#fff;color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 34px}
.center{text-align:center}
.muted{color:var(--muted)}

/* ---------- logo ---------- */
.logo{display:inline-flex;align-items:center;gap:12px}
.logo .mark{height:40px;width:auto}
.logo .word{height:21px;width:auto;margin-top:2px}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:40;backdrop-filter:blur(10px);background:rgba(255,255,255,.85);border-bottom:1px solid rgba(233,236,242,.9)}
header.site nav{display:flex;align-items:center;gap:26px;height:70px}
.navlinks{display:flex;gap:30px;margin-left:24px}
.navlinks a{font-family:var(--word);font-size:15px;color:var(--muted);font-weight:400;letter-spacing:.02em;transition:color .18s}
.navlinks a:hover,.navlinks a.on{color:var(--ink)}
.navcta{margin-left:auto;display:flex;align-items:center;gap:12px}

/* ---------- buttons ---------- */
.btn{font-family:var(--word);font-weight:500;font-size:15px;letter-spacing:.02em;border:none;border-radius:12px;cursor:pointer;
  transition:transform .12s,box-shadow .22s,background .2s,border-color .2s;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.btn:active{transform:translateY(1px)}
.ghost{background:transparent;color:var(--ink);padding:10px 8px}
.ghost:hover{color:var(--royal)}
.solid{background:var(--navy);color:#fff;padding:11px 21px;box-shadow:0 10px 24px -10px rgba(28,53,107,.7)}
.solid:hover{background:var(--royal);box-shadow:0 14px 30px -10px rgba(44,78,150,.7)}
.line{background:#fff;border:1px solid var(--line);color:var(--ink);padding:11px 20px}
.line:hover{border-color:var(--royal);color:var(--royal)}
.btn.lg{padding:14px 26px;font-size:15px;border-radius:13px}
.btn.block{width:100%;justify-content:center}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- generic section ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--word);font-size:11.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--royal);margin-bottom:16px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--royal);animation:pl 2.6s infinite}
@keyframes pl{0%{box-shadow:0 0 0 0 rgba(44,78,150,.45)}70%{box-shadow:0 0 0 8px rgba(44,78,150,0)}100%{box-shadow:0 0 0 0 rgba(44,78,150,0)}}
h1{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;line-height:1.05;font-size:clamp(30px,3.6vw,46px)}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3vw,38px);letter-spacing:-.015em;line-height:1.1}
h3{font-family:var(--word);font-weight:600;font-size:18px}
section.pad{padding:72px 0}
section.pad.wash{background:var(--wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lead{color:var(--muted);font-size:17px;max-width:40em;line-height:1.62}
.kicker{max-width:34em;margin:0 auto}

/* ---------- feature grid / cards ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow-sm)}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:14.5px}
.card .ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--blue-soft);color:var(--royal);margin-bottom:14px}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.plan{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 26px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.plan.featured{border:1.5px solid var(--royal);box-shadow:0 30px 70px -30px rgba(44,78,150,.5);position:relative}
.plan .tag{position:absolute;top:-12px;left:26px;background:var(--royal);color:#fff;font-family:var(--word);font-size:11px;font-weight:600;letter-spacing:.08em;padding:5px 12px;border-radius:20px;text-transform:uppercase}
.plan .pn{font-family:var(--word);font-weight:600;font-size:16px;color:var(--royal);letter-spacing:.02em}
.plan .price{font-family:var(--serif);font-size:40px;font-weight:500;margin:12px 0 2px}
.plan .price small{font-family:var(--word);font-size:14px;color:var(--muted);font-weight:400}
.plan .pd{color:var(--muted);font-size:13.5px;min-height:38px}
.plan ul{list-style:none;margin:18px 0 22px;display:flex;flex-direction:column;gap:10px}
.plan li{font-size:14px;display:flex;gap:9px;align-items:flex-start;color:#2c3a56}
.plan li::before{content:"✓";color:var(--royal);font-weight:700}
.plan .btn{margin-top:auto}

/* ---------- prose (legal / faq) ---------- */
.prose{max-width:760px;margin:0 auto}
.prose h2{font-size:26px;margin:34px 0 12px}
.prose h3{font-family:var(--serif);font-weight:500;font-size:20px;margin:24px 0 8px;color:var(--ink)}
.prose p,.prose li{color:#3a4560;font-size:15.5px;margin-bottom:12px}
.prose ul{margin:0 0 14px 22px}
.prose .updated{color:var(--muted);font-size:13px;font-family:var(--word)}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{font-family:var(--word);font-weight:500;font-size:16px;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--royal);font-size:20px}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);font-size:14.5px;margin-top:10px}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);padding:30px 0 44px;margin-top:20px}
footer.site .frow{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
footer.site .tagline{font-family:var(--word);font-weight:400;letter-spacing:.28em;text-transform:uppercase;font-size:11px;color:var(--steel);margin-left:12px;display:inline-flex;align-items:center;gap:12px}
footer.site .tagline::before,footer.site .tagline::after{content:"";width:20px;height:1px;background:var(--silver)}
footer.site .flinks{margin-left:auto;display:flex;gap:22px;font-family:var(--word);font-size:14px;color:var(--muted);flex-wrap:wrap}
footer.site .flinks a:hover{color:var(--ink)}
footer.site .fnote{margin-top:14px;color:#9aa1b2;font-size:12.5px}

/* ---------- modal (auth) ---------- */
.modal-scrim{position:fixed;inset:0;background:rgba(20,30,54,.42);backdrop-filter:blur(4px);z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.modal-scrim.show{display:flex}
.modal{background:#fff;border-radius:20px;width:min(440px,100%);box-shadow:0 40px 90px -30px rgba(20,40,84,.6);overflow:hidden;animation:pop .18s ease}
@keyframes pop{from{transform:translateY(8px) scale(.98);opacity:0}}
.modal .mhead{padding:24px 26px 6px;display:flex;align-items:center;gap:12px}
.modal .mhead .mark{height:34px}
.modal .mbody{padding:8px 26px 24px}
.modal .mt{font-family:var(--serif);font-size:23px;font-weight:500;margin:6px 0 2px}
.modal .ms{color:var(--muted);font-size:14px;margin-bottom:16px}
.field{margin-bottom:12px}
.field label{display:block;font-family:var(--word);font-size:12.5px;color:var(--muted);margin-bottom:5px;letter-spacing:.02em}
.field input,.field select{width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:#fff;transition:border-color .18s,box-shadow .18s}
.field input:focus,.field select:focus{outline:none;border-color:var(--royal);box-shadow:0 0 0 3px rgba(44,78,150,.12)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.msg{font-size:13px;padding:9px 12px;border-radius:10px;margin:6px 0 10px;display:none}
.msg.err{display:block;background:rgba(196,85,63,.08);color:#a03e2c;border:1px solid rgba(196,85,63,.25)}
.msg.ok{display:block;background:rgba(31,157,107,.08);color:#137a52;border:1px solid rgba(31,157,107,.25)}
.msg.info{display:block;background:var(--blue-soft);color:var(--navy);border:1px solid rgba(44,78,150,.18)}
.mfoot{text-align:center;font-size:13.5px;color:var(--muted);margin-top:12px}
.mfoot a{color:var(--royal);font-weight:500;cursor:pointer}
.mclose{margin-left:auto;background:none;border:none;font-size:22px;color:var(--muted);cursor:pointer;line-height:1}
.consent{font-size:11.5px;color:var(--muted);margin-top:8px;line-height:1.5}
.consent a{color:var(--royal)}

/* ---------- account ---------- */
.acct{display:grid;grid-template-columns:220px 1fr;gap:30px}
.acct .side a{display:block;padding:10px 12px;border-radius:10px;font-family:var(--word);font-size:14.5px;color:var(--muted)}
.acct .side a.on{background:var(--blue-soft);color:var(--navy);font-weight:500}
.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--word);font-size:12px;font-weight:500;padding:5px 12px;border-radius:20px}
.pill.trial{background:var(--blue-soft);color:var(--royal)}
.pill.paid{background:rgba(31,157,107,.1);color:#137a52}
.pill.free{background:#F2F0EA;color:#7a6a4a}
.kv{display:grid;grid-template-columns:160px 1fr;gap:10px 16px;font-size:14.5px}
.kv .k{color:var(--muted);font-family:var(--word)}

/* ---------- misc ---------- */
.demo-banner{background:var(--navy);color:#dfe7f6;font-family:var(--word);font-size:12.5px;text-align:center;padding:7px 14px;letter-spacing:.02em}
.demo-banner b{color:#fff}
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--word);font-size:11.5px;font-weight:500;color:var(--royal);background:var(--blue-soft);border:1px solid rgba(44,78,150,.15);border-radius:8px;padding:4px 10px}
@media(max-width:860px){
  .navlinks{display:none}
  .grid3,.grid2,.plans{grid-template-columns:1fr}
  .acct{grid-template-columns:1fr}
  section.pad{padding:52px 0}
}