/* ─────────────────────────────────────────────────────────────
   Vrutaz Advisors — shared design system
   Brand: blue #0571D4 · navy #0B2D50
   ───────────────────────────────────────────────────────────── */

:root{
  --blue:#0571D4;
  --blue-dark:#0559A6;
  --blue-tint:#EEF6FF;
  --blue-tint-2:#DCEBFC;
  --navy:#0B2D50;
  --navy-soft:#14406E;
  --slate:#5B6C80;
  --slate-light:#8395A8;
  --line:#E8E6E1;
  --line-soft:#F0EEEA;
  --wash:#F6F5F2;         /* card and panel fill */
  --paper:#FFFFFF;        /* the page itself, and the sidebar */
  --cream:#FDF8EF;
  --cream-fill:#FCF4DD;   /* the step you are on */
  --cream-line:#EFE1C6;
  --honey:#FBEBC3;        /* the active-item highlight */
  --honey-deep:#F5DFA3;
  --white:#fff;
  --green:#11A66B;
  --green-tint:#E7F7F0;
  --amber:#C77700;
  --amber-tint:#FFF5E5;
  --red:#D0342C;
  --red-tint:#FDECEB;
  --radius:14px;
  --radius-lg:20px;
  --radius-xl:26px;
  --radius-pill:100px;
  --shadow-sm:0 1px 2px rgba(74,56,32,.055), 0 1px 3px rgba(74,56,32,.045);
  --shadow:0 6px 20px -6px rgba(74,56,32,.11), 0 2px 8px -4px rgba(74,56,32,.07);
  --shadow-lg:0 32px 64px -32px rgba(11,45,80,.30);
  --ink:#0A1F33;
  --font:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; font-family:var(--font); color:var(--navy);
  background:var(--white); line-height:1.55; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; line-height:1.2; font-weight:680; letter-spacing:-.018em;}
h1{font-size:clamp(2rem,4vw,3rem);}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem);}
h3{font-size:1.15rem;}
p{margin:0;}
a{color:var(--blue); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0; list-style:none;}
button,input,select,textarea{font:inherit; color:inherit;}
small{font-size:.84rem;}

.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
.wrap-narrow{max-width:860px; margin:0 auto; padding:0 24px;}
.muted{color:var(--slate);}
.tiny{font-size:.82rem;}
.center{text-align:center;}
.mono-num{font-variant-numeric:tabular-nums;}

/* ── Buttons ───────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--radius-pill); border:1.5px solid transparent;
  font-weight:600; font-size:.95rem; cursor:pointer; text-decoration:none;
  transition:background .15s, border-color .15s, color .15s, transform .06s;
  white-space:nowrap;
}
.btn:hover{text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--blue); color:#fff;}
.btn-primary:hover{background:var(--blue-dark); color:#fff;}
.btn-navy{background:var(--navy); color:#fff;}
.btn-navy:hover{background:var(--navy-soft); color:#fff;}
.btn-ghost{background:#fff; color:var(--navy); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--blue); color:var(--blue);}
.btn-quiet{background:transparent; color:var(--slate); border-color:transparent; padding:8px 12px;}
.btn-quiet:hover{color:var(--navy); background:var(--wash);}
.btn-sm{padding:8px 15px; font-size:.87rem; border-radius:var(--radius-pill);}
.btn-pill{border-radius:var(--radius-pill);}
.btn-dark{background:var(--ink); color:#fff; border-radius:var(--radius-pill);}
.btn-dark:hover{background:#16344f; color:#fff;}
.btn .chev{transition:transform .16s;}
.btn:hover .chev{transform:translateX(3px);}
.btn-lg{padding:15px 30px; font-size:1.02rem;}
.btn-block{width:100%;}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed;}

/* ── Cards / surfaces ──────────────────────────────────────── */
.card{background:var(--wash); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px;}
.card-flat{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px;}
.panel{background:var(--wash); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;}
.panel-head{padding:18px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.panel-head h3{font-size:1.02rem;}
.panel-body{padding:22px;}

/* ── Pills / badges ────────────────────────────────────────── */
.pill{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:100px; font-size:.77rem; font-weight:600; letter-spacing:.01em;}
.pill-blue{background:var(--blue-tint); color:var(--blue-dark);}
.pill-green{background:var(--green-tint); color:var(--green);}
.pill-amber{background:var(--amber-tint); color:var(--amber);}
.pill-red{background:var(--red-tint); color:var(--red);}
.pill-grey{background:#F1EDE5; color:var(--slate); border:1px solid var(--line);}
.dot{width:7px; height:7px; border-radius:50%; flex:none;}

/* ── Forms ─────────────────────────────────────────────────── */
.field{margin-bottom:18px;}
.field > label, .lbl{display:block; font-size:.87rem; font-weight:600; color:var(--navy); margin-bottom:7px;}
.hint{font-size:.82rem; color:var(--slate); margin-top:6px;}
.inp, select.inp, textarea.inp{
  width:100%; padding:11px 14px; border:1.5px solid var(--line); border-radius:10px;
  background:#fff; font-size:.95rem; transition:border-color .15s, box-shadow .15s;
}
.inp:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(5,113,212,.13);}
.inp::placeholder{color:var(--slate-light);}
select.inp{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235B6C80' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;}
.err{color:var(--red); font-size:.82rem; margin-top:6px;}
.inp.bad{border-color:var(--red);}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:640px){ .row2{grid-template-columns:1fr;} }

/* ── Choice tiles (radio/checkbox cards) ───────────────────── */
.choice{
  display:block; border:1.5px solid var(--line); border-radius:var(--radius);
  padding:18px; cursor:pointer; background:#fff; transition:border-color .15s, box-shadow .15s, background .15s;
}
.choice:hover{border-color:var(--blue);}
.choice.sel{border-color:var(--blue); background:var(--blue-tint); box-shadow:0 0 0 3px rgba(5,113,212,.11);}
.choice.off{opacity:.5; cursor:not-allowed; background:var(--wash);}
.choice.off:hover{border-color:var(--line);}
.choice-grid{display:grid; gap:14px;}
@media(min-width:720px){ .choice-grid.c2{grid-template-columns:1fr 1fr;} .choice-grid.c3{grid-template-columns:repeat(3,1fr);} }

/* ── Nav (marketing) ───────────────────────────────────────── */
.nav{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.93); backdrop-filter:blur(10px); border-bottom:1.5px solid var(--line);}
.nav .wrap{display:flex; align-items:center; gap:22px; height:72px;}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{height:34px; width:auto;}
.navlinks{display:flex; gap:26px; margin-left:auto; font-size:.93rem;}
.navlinks a{color:var(--slate); font-weight:500;}
.navlinks a:hover{color:var(--blue); text-decoration:none;}
.navcta{display:flex; align-items:center; gap:12px; margin-left:auto;}
.navlinks + .navcta{margin-left:0;}
@media(max-width:900px){ .navlinks{display:none;} }

/* ── Footer ────────────────────────────────────────────────── */
.footer{background:var(--navy); color:#C9D6E4; padding:56px 0 30px; margin-top:80px;}
.footer a{color:#C9D6E4; font-size:.9rem;}
.footer a:hover{color:#fff;}
.footer-grid{display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:34px;}
@media(max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr;} }
.footer h4{color:#fff; font-size:.88rem; margin-bottom:14px; letter-spacing:.03em; text-transform:uppercase;}
.footer li{margin-bottom:9px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.13); margin-top:40px; padding-top:22px; font-size:.83rem; color:#8FA3B8; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;}

/* ── Tables ────────────────────────────────────────────────── */
.tbl-scroll{overflow-x:auto;}
table.tbl{width:100%; border-collapse:collapse; font-size:.92rem;}
table.tbl th{text-align:left; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--slate); font-weight:650; padding:12px 14px; border-bottom:1.5px solid var(--line); white-space:nowrap;}
table.tbl td{padding:14px; border-bottom:1px solid var(--line-soft); vertical-align:middle;}
table.tbl tr:last-child td{border-bottom:none;}

/* ── Steps / progress ──────────────────────────────────────── */
.steps{display:flex; flex-direction:column; gap:0;}
.step{display:flex; gap:14px; align-items:flex-start; padding:13px 0; border-bottom:1px solid var(--line-soft);}
.step:last-child{border-bottom:none;}
.step-dot{width:22px; height:22px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:.65rem; font-weight:700; color:#fff; margin-top:2px;}
.step-dot.done{background:var(--green);}
.step-dot.now{background:var(--blue); box-shadow:0 0 0 4px rgba(5,113,212,.16);}
.step-dot.todo{background:#fff; border:1.8px solid var(--line); color:var(--slate-light);}
.step-t{font-weight:600; font-size:.95rem;}
.step-d{font-size:.85rem; color:var(--slate);}

.bar{height:7px; background:var(--line-soft); border-radius:100px; overflow:hidden;}
.bar > i{display:block; height:100%; background:var(--blue); border-radius:100px; transition:width .4s;}

/* ── Utilities ─────────────────────────────────────────────── */
.stack{display:flex; flex-direction:column;}
.gap8{gap:8px;} .gap12{gap:12px;} .gap16{gap:16px;} .gap24{gap:24px;}
.flex{display:flex;} .between{justify-content:space-between;} .aic{align-items:center;}
.wrapf{flex-wrap:wrap;}
.grid{display:grid; gap:20px;}
@media(min-width:760px){ .grid.g2{grid-template-columns:1fr 1fr;} .grid.g3{grid-template-columns:repeat(3,1fr);} .grid.g4{grid-template-columns:repeat(4,1fr);} }
.mt8{margin-top:8px;} .mt16{margin-top:16px;} .mt24{margin-top:24px;} .mt32{margin-top:32px;} .mt48{margin-top:48px;}
.mb8{margin-bottom:8px;} .mb16{margin-bottom:16px;} .mb24{margin-bottom:24px;} .mb32{margin-bottom:32px;}
.sec{padding:92px 0;}
.sec-tight{padding:48px 0;}
.hr{height:1.5px; background:var(--line); border:none; margin:28px 0;}
.empty{text-align:center; padding:44px 20px; color:var(--slate);}
.empty h3{color:var(--navy); margin-bottom:6px;}


/* ── Sidebar navigation (shared by every signed-in page) ─────
   Rendered by nav.js so the dashboard, bookkeeping and analytics
   all carry the same map of the product. */
.sidenav{display:flex; flex-direction:column; gap:1px;
  /* With every group expanded the nav is taller than the viewport, and the
     logo and account block were being pushed off. The nav scrolls; they stay. */
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; padding-right:2px;}
.sidenav::-webkit-scrollbar{width:6px;}
.sidenav::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px;}
.sidenav::-webkit-scrollbar-track{background:transparent;}
.sidenav a, .navtoggle{
  display:flex; align-items:center; gap:11px; width:100%; padding:9px 12px;
  border:none; background:transparent; border-radius:10px; color:var(--slate);
  font:inherit; font-size:.91rem; font-weight:550; white-space:nowrap;
  cursor:pointer; text-align:left;
}
.sidenav a:hover, .navtoggle:hover{background:var(--wash); color:var(--ink); text-decoration:none;}
/* The current page sits on a raised white card against the warm rail. */
.sidenav a.on{background:#fff; color:var(--ink); font-weight:680;
  box-shadow:0 0 0 1px var(--line), 0 1px 2px rgba(60,50,35,.06);}
.sidenav a.on svg{stroke:var(--ink);}
/* Support keeps a single warm accent, the one place colour earns its keep. */
.sidenav a.on[href^="support"]{background:var(--honey); box-shadow:inset 0 0 0 1px var(--honey-deep);}
.sidenav a svg, .navtoggle svg{width:18px; height:18px; flex:none;}
.sidenav a span, .navtoggle span{overflow:hidden; text-overflow:ellipsis;}
.sidenav .cnt{margin-left:auto; background:var(--amber); color:#fff; font-size:.7rem;
  font-weight:700; padding:1px 7px; border-radius:100px;}
.sidenav a.locked{opacity:.45;}
.sidenav a.locked::after{content:'🔒'; margin-left:auto; font-size:.72rem;}

.sidesep{margin:16px 12px 6px; font-size:.68rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--slate-light); font-weight:750;}

.navtoggle .caret{margin-left:auto; width:15px; height:15px; opacity:.55; transition:transform .18s;}
.navgroup.open .navtoggle .caret{transform:rotate(180deg);}
.navtoggle.live{color:var(--navy); font-weight:650;}
.navsub{display:none; margin:2px 0 6px;}
.navgroup.open .navsub{display:block;}
.navsub a{padding-left:16px; font-size:.885rem;}
.navsub a svg{width:17px; height:17px; opacity:.85;}

@media(max-width:980px){
  .sidenav{flex-direction:row; overflow-x:auto; gap:4px; padding-bottom:4px;}
  .sidesep{display:none;}
  .navgroup{display:flex;}
  .navgroup .navsub{display:flex; gap:4px;}
  .navgroup .navtoggle{display:none;}
  .navsub a{padding-left:12px;}
}


/* ── The journey timeline (homepage) ───────────────────────
   Title on the left, a spine down the middle, the detail on the right.
   Below 820px it becomes a single column with the spine on the edge. */
.tl{max-width:1060px; margin-inline:auto;}
.tlrow{display:grid; grid-template-columns:1fr 56px 1fr; gap:0; align-items:start;}
.tlhead{text-align:right; padding:6px 28px 64px 0;}
.tlbadge{display:inline-block; background:var(--wash); border:1px solid var(--line);
  color:var(--slate); font-size:.78rem; font-weight:650; padding:5px 13px;
  border-radius:var(--radius-pill); margin-bottom:14px;}
.tlhead h3{font-size:clamp(1.1rem,1.9vw,1.45rem); letter-spacing:-.02em; line-height:1.25;}

.tlline{position:relative; justify-self:center; width:56px; align-self:stretch;}
/* The dim track. The honey fill rides on top of it as you scroll. */
.tlline::before{content:''; position:absolute; left:50%; top:0; bottom:-2px; width:2px;
  transform:translateX(-50%); background:var(--honey-deep);}
.tlrow:last-child .tlline::before{bottom:auto; height:34px;}
.tlfill{position:absolute; left:50%; top:0; bottom:-2px; width:2px;
  transform:translateX(-50%); background:var(--honey-deep); transform-origin:top center;}
.tlrow:last-child .tlfill{bottom:auto; height:34px;}
.tlnode{position:absolute; left:50%; top:4px; transform:translateX(-50%);
  width:22px; height:22px; border-radius:7px; background:#fff;
  border:2px solid var(--honey-deep);}

.tlcard{background:var(--wash); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px; margin:0 0 64px 28px;}
/* One step is "the step you are on" as you scroll. It fills; the rest stay
   quiet. `.hi` marks the step we want to draw an eye to (the EIN wait) with
   a slightly warmer border, but the fill belongs to the scroll position. */
.tlcard.hi{border-color:var(--cream-line);}
.tlintro{font-size:.94rem; color:var(--slate); line-height:1.6;}
.tllist{margin:18px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:13px;}
.tllist li{display:flex; gap:11px; align-items:flex-start; font-size:.92rem; color:var(--slate);
  line-height:1.5;}
.tllist li b{color:var(--navy); font-weight:650;}
.tllist svg{flex:none; margin-top:3px;}
.tltime{display:flex; align-items:center; gap:8px; margin-top:20px; padding-top:16px;
  border-top:1px solid var(--line); font-size:.86rem; font-weight:650; color:var(--navy);}
.tlcard.hi .tltime{border-top-color:var(--cream-line); color:#7A5B00;}
.tlnote{margin-top:12px; font-size:.85rem; color:var(--slate); line-height:1.55;}

/* ── The timeline reveals itself as you scroll ─────────────
   Everything below only applies once JS has added .anim, so with
   scripting off, or if the observer never fires, the whole timeline
   is simply there — visible, filled and readable. */
.tl.anim .tlline::before{background:var(--line);}
.tl.anim .tlfill{transform:translateX(-50%) scaleY(0);
  transition:transform .85s cubic-bezier(.22,.61,.36,1);}
.tl.anim .tlrow.in .tlfill{transform:translateX(-50%) scaleY(1);}

.tl.anim .tlnode{background:#fff; border-color:var(--line);
  transition:border-color .4s ease, box-shadow .4s ease, transform .5s cubic-bezier(.2,1.4,.4,1);
  transform:translateX(-50%) scale(.72);}
.tl.anim .tlrow.in .tlnode{border-color:var(--honey-deep);
  transform:translateX(-50%) scale(1); box-shadow:0 0 0 5px var(--honey);}

.tl.anim .tlhead, .tl.anim .tlcard{opacity:0; transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);}
.tl.anim .tlhead{transform:translateY(14px);}
.tl.anim .tlcard{transform:translateY(22px); transition-delay:.1s;}
.tl.anim .tlrow.in .tlhead, .tl.anim .tlrow.in .tlcard{opacity:1; transform:none;}

/* ── The step you are on fills in ─────────────────────────
   As each step reaches the middle of the screen it takes the colour and
   the one before it lets go, so the page reads as a single thing being
   filled in rather than six cards that happen to be stacked. */
.tl.anim .tlcard{
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1),
             background-color .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.tl.anim .tlrow.now .tlcard{
  background:var(--cream-fill); border-color:var(--honey-deep);
  box-shadow:0 10px 30px -18px rgba(122,91,0,.35);
}
.tl.anim .tlrow.now .tltime{ border-top-color:var(--honey-deep); color:#7A5B00; }
.tl.anim .tlbadge{ transition:background-color .5s ease, border-color .5s ease, color .5s ease; }
.tl.anim .tlrow.now .tlbadge{
  background:var(--honey); border-color:var(--honey-deep); color:#6B5200;
}
/* The node is hollow until you reach it, then solid. */
.tl.anim .tlrow.now .tlnode{
  background:var(--honey-deep); border-color:var(--honey-deep);
  box-shadow:0 0 0 5px var(--honey);
}
/* The spine is solid down to where you are and pale after it. */
.tl.anim .tlfill{ background:var(--honey-deep); opacity:.45;
  transition:transform .85s cubic-bezier(.22,.61,.36,1), opacity .5s ease; }
.tl.anim .tlrow.now .tlfill, .tl.anim .tlrow.done .tlfill{ opacity:1; }

/* Nobody should be made motion-sick by a marketing page. */
@media(prefers-reduced-motion:reduce){
  .tl.anim .tlline::before{background:var(--honey-deep);}
  .tl.anim .tlfill, .tl.anim .tlnode, .tl.anim .tlbadge,
  .tl.anim .tlhead, .tl.anim .tlcard{transition:none;}
  .tl.anim .tlfill{opacity:1;}
  .tl.anim .tlfill{transform:translateX(-50%) scaleY(1);}
  .tl.anim .tlnode{transform:translateX(-50%) scale(1); border-color:var(--honey-deep);}
  .tl.anim .tlhead, .tl.anim .tlcard{opacity:1; transform:none;}
}

@media(max-width:820px){
  .tlrow{grid-template-columns:30px 1fr;}
  .tlhead{grid-column:2; text-align:left; padding:0 0 14px 0;}
  .tlline{grid-column:1; grid-row:1 / span 2; width:30px;}
  .tlcard{grid-column:2; margin:0 0 40px 0;}
  .tlbadge{margin-bottom:10px;}
}

table.cmp td{font-size:.92rem;}
table.cmp .cmpgroup{background:var(--paper); font-size:.76rem; text-transform:uppercase;
  letter-spacing:.06em; font-weight:750; color:var(--slate); padding-top:14px; padding-bottom:14px;}
table.cmp .cmpno{color:var(--slate-light);}
table.cmp svg{display:inline-block; vertical-align:middle;}

/* read-only inputs read as read-only */
.inp:disabled, .inp[readonly]{
  background:var(--wash); color:var(--slate-light);
  border-color:var(--line-soft); cursor:not-allowed;
}