/* ===========================================================================
   The Accountant Services, funnel v3 shared stylesheet, 18 Sep 2026.

   Her brand, sampled from theaccountantservices.com: navy #013364 with the
   #00162B top-bar navy, gold #C1A43A, a light #F3F4F6 band, Inter. The same
   tokens as the landing page, which carries its own inline copy of them so
   the first paint never waits on this file.

   Gold buttons carry deep navy text (7.5:1). White on her gold is 2.4:1 and
   fails, so it is never used. Gold as TEXT on white is the darker #7A661B
   (5.6:1); the bright gold is for fills and rules only.

   The v2 pages referenced tokens this file never defined (gold, gold2,
   paper2, paper3, ok, warn and others), so the progress bar, the carried
   answers box and the booked stamp rendered unstyled. Every name those pages
   use is defined below, old and new.
   =========================================================================== */
:root{
  --deep:#00162B; --navy:#013364; --navy2:#0B2B55;
  --gold:#C1A43A; --gold-hv:#CDB14A; --gold-tx:#7A661B; --gold-lt:#E4CF86;
  --gold-bg:#FBF6E4; --gold-bd:#EBDDAD;
  --wht:#FFFFFF; --off:#F3F4F6; --off2:#ECEEF2; --off3:#E3E6EC;
  --ink:#0E1A2B; --ink2:#243247; --mut:#475467; --mut2:#667085;
  --line:#E3E6EC; --line2:#D0D5DD;
  --ok:#157347; --ok-bg:#EAF6EF; --ok-bd:#BFE3CC;
  --warn:#8A5A00; --warn-bg:#FDF6E7; --warn-bd:#EBD9AE;
  --red:#B42318; --red2:#912018; --red-bg:#FEF3F2; --red-bd:#F5C6C2;
  --fd:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fb:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fm:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sh:0 1px 2px rgba(0,22,43,.04),0 12px 32px rgba(0,22,43,.07);
  --sh2:0 2px 6px rgba(0,22,43,.06),0 34px 80px rgba(0,22,43,.15);

  /* names the v2 pages use, pointed at the brand */
  --gold2:var(--gold-tx); --paper:#FFFFFF; --paper2:var(--off); --paper3:var(--off2);
  --grn:var(--gold); --grn2:var(--gold-tx); --grn-bg:var(--gold-bg); --grn-bd:var(--gold-bd);
  --amb:var(--warn); --amb-bg:var(--warn-bg); --amb-bd:var(--warn-bd);
  --deep2:var(--navy2); --deep3:var(--deep); --mint:var(--gold-lt); --mint2:#EEDFA6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wht);color:var(--ink);font-family:var(--fb);
  font-size:16.5px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.has-sticky{padding-bottom:80px}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px;margin:0 auto;padding:0 20px}
.mid{max-width:920px;margin:0 auto;padding:0 20px}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--fd);margin:0;text-wrap:balance;font-weight:800;color:var(--ink)}
h1{font-size:clamp(32px,5.6vw,56px);line-height:1.05;letter-spacing:-.035em;font-weight:900}
h2{font-size:clamp(26px,4.2vw,42px);line-height:1.08;letter-spacing:-.032em;font-weight:900}
h3{font-size:clamp(18px,2.2vw,21px);line-height:1.25;letter-spacing:-.02em}
h4{font-size:17px;letter-spacing:-.015em}
p{margin:0}
a{color:var(--navy)}
.center{text-align:center}
.nw{white-space:nowrap}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-weight:700}
.kicker{font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-tx)}
.eyebrow{font-size:clamp(13.5px,1.7vw,15px);font-weight:500;color:var(--mut);max-width:62ch;margin:0 auto}
.lead{color:var(--mut);font-size:clamp(16px,1.8vw,18.5px);line-height:1.58}
.fine{font-size:13px;color:var(--mut2);line-height:1.5}
.hl{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:.09em;text-underline-offset:.11em}

/* ---------- nav ---------- */
nav.top{border-bottom:1px solid var(--line);background:rgba(255,255,255,.95);
  backdrop-filter:saturate(160%) blur(12px);position:sticky;top:0;z-index:60}
nav.top .wrap{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;gap:12px}
.mark{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--ink);
  font-weight:900;font-size:15.5px;letter-spacing:-.02em}
.mark img{height:38px;width:auto;display:block}
.mark b{color:var(--gold-tx);font-weight:900}
.navsteps{display:flex;gap:16px;font-size:12.5px;color:var(--mut2)}
.navsteps span{display:flex;align-items:center;gap:6px}
.navsteps i{width:8px;height:8px;border-radius:50%;background:var(--line2);display:block}
.navsteps .on{color:var(--ink);font-weight:700}
.navsteps .on i{background:var(--gold);box-shadow:0 0 0 4px rgba(193,164,58,.2)}
.navsteps .done{color:var(--navy)}
.navsteps .done i{background:var(--navy)}
.navback{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;color:var(--mut);text-decoration:none}
.navback:hover{color:var(--navy);text-decoration:underline}

/* ---------- buttons: gold with navy text, the landing page's button ---------- */
.btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:var(--gold);color:var(--deep);font-family:var(--fd);font-weight:800;letter-spacing:-.01em;
  font-size:17.5px;line-height:1.2;padding:17px 32px;min-height:58px;border:none;border-radius:13px;cursor:pointer;
  text-decoration:none;text-align:center;transition:background .15s,transform .12s,box-shadow .15s;
  box-shadow:0 2px 0 rgba(0,0,0,.07),0 14px 30px rgba(193,164,58,.34)}
.btn:hover{background:var(--gold-hv);transform:translateY(-1px);
  box-shadow:0 2px 0 rgba(0,0,0,.07),0 18px 38px rgba(193,164,58,.42)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:1;cursor:not-allowed;transform:none;box-shadow:none;background:var(--off2);color:var(--mut2)}
.btn small{font-size:13px;font-weight:600;opacity:.8;letter-spacing:0}
.btn.gold{background:var(--gold);color:var(--deep)}
.btn.gold[disabled]{background:var(--off2);color:var(--mut2)}
.btn.dark{background:var(--navy);color:#fff;box-shadow:0 12px 26px rgba(1,51,100,.26)}
.btn.dark:hover{background:var(--navy2)}
.btn.gh{background:#fff;color:var(--navy);border:2px solid var(--line2);box-shadow:none}
.btn.gh:hover{background:var(--off);border-color:var(--navy);transform:none}
.btn.block{display:flex;width:100%}
.btn.sm{flex-direction:row;gap:7px;padding:12px 19px;font-size:15px;min-height:46px;border-radius:11px;
  box-shadow:0 1px 0 rgba(0,0,0,.06),0 8px 18px rgba(193,164,58,.28)}
.btn.sm:hover{transform:none}

/* ---------- sections ---------- */
.sec{padding:clamp(48px,6.5vw,88px) 0}
.sec-off{background:var(--off)}
.sec-tight{padding:clamp(22px,3.2vw,38px) 0}
.sec-deep{background:var(--navy);color:#C9D6E8;position:relative;overflow:hidden}
.sec-deep h2,.sec-deep h3,.sec-deep h4{color:#fff}
.sec-deep .lead{color:#A9BBD6}
.sec-deep .kicker{color:var(--gold-lt)}
.sec-deep .fine{color:#8FA3C0}
.glow{color:var(--gold-lt)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:var(--wht);border:1px solid var(--line);border-radius:16px;padding:clamp(20px,2.8vw,30px);box-shadow:var(--sh)}
.card.soft{background:var(--off);box-shadow:none}
.card.grn,.card.gold{background:var(--gold-bg);border-color:var(--gold-bd);box-shadow:none}
.hr{height:1px;background:var(--line);border:none;margin:0}

/* ---------- rows ---------- */
.row{display:grid;grid-template-columns:1fr auto;gap:16px;padding:14px 20px;
  border-bottom:1px solid var(--line);align-items:baseline}
.row:last-child{border-bottom:none}
.row .k{font-size:15.5px;color:var(--ink2)}
.row .v{font-weight:800;font-size:15.5px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--navy)}
.row.hi{background:var(--gold-bg)}
.row.tot{background:var(--navy);color:#fff;border-bottom:none}
.row.tot .k{color:#fff;font-weight:700}
.row.tot .v{color:var(--gold-lt);font-size:18px}

/* ---------- options ---------- */
.opts{display:flex;flex-direction:column;gap:9px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.opt{text-align:left;background:var(--wht);border:2px solid var(--line);border-radius:13px;
  padding:14px 17px;font-family:var(--fb);font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;
  transition:border-color .14s,background .14s,transform .14s;min-height:54px;
  display:flex;flex-direction:column;justify-content:center}
.opt:hover{border-color:var(--gold);background:var(--gold-bg)}
.opt.sel{border-color:var(--navy);background:#F1F5FB;box-shadow:inset 0 0 0 1px var(--navy)}
.opt small{display:block;font-size:13px;color:var(--mut);font-weight:500;margin-top:2px}
.chips .opt{min-height:46px;padding:11px 17px;border-radius:99px;font-size:15px;flex-direction:row;align-items:center}

/* ---------- fields ---------- */
label.fld{display:block;font-size:14px;font-weight:700;color:var(--ink2);margin:18px 0 7px}
input.fld,select.fld,textarea.fld{width:100%;font-family:var(--fb);font-size:16px;
  padding:15px 17px;border:2px solid var(--line);border-radius:12px;background:var(--wht);
  color:var(--ink);min-height:54px;transition:border-color .14s,box-shadow .14s}
input.fld:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px rgba(1,51,100,.12)}
input.fld.bad{border-color:var(--red);background:var(--red-bg)}
.err{display:none;font-size:13.5px;color:var(--red2);margin-top:6px;font-weight:600}
.err.on{display:block}
.reassure{font-size:13.5px;color:var(--mut2);margin-top:13px}

/* ---------- faq ---------- */
details.qa{border-bottom:1px solid var(--line)}
details.qa summary{list-style:none;cursor:pointer;padding:19px 0;font-weight:800;font-size:17px;
  letter-spacing:-.02em;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:56px}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"";flex:none;width:10px;height:10px;border-right:2.5px solid var(--gold-tx);
  border-bottom:2.5px solid var(--gold-tx);transform:rotate(45deg);transition:transform .2s ease;margin-right:6px}
details.qa[open] summary::after{transform:rotate(-135deg)}
details.qa[open] summary{color:var(--navy)}
details.qa .a{padding:0 0 20px;color:var(--mut);font-size:15.5px;line-height:1.64;max-width:64ch}

/* ---------- final, sticky, footer ---------- */
.final{background:linear-gradient(170deg,#0B3E78 0%,var(--navy) 55%,var(--deep) 100%);color:#C9D6E8;
  padding:clamp(56px,7vw,100px) 0;text-align:center}
.final h2{color:#fff}
.final p{color:#C9D6E8}
.final .kicker{color:var(--gold-lt)}
.sticky{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(160%) blur(10px);border-top:1px solid var(--line);
  padding:10px 18px;display:flex;justify-content:space-between;align-items:center;gap:14px;
  z-index:70;box-shadow:0 -8px 28px rgba(0,22,43,.12)}
.sticky .t{font-size:14px;color:var(--mut)}
.sticky .t b{color:var(--ink)}
footer.site{background:var(--deep);color:#8FA3C0;padding:26px 0 32px;font-size:13.5px}
footer.site .wrap{display:flex;justify-content:space-between;align-items:center;gap:6px 18px;flex-wrap:wrap}
footer.site a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:#A9BBD6;text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:underline}
.pill{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;border-radius:99px;padding:6px 13px;border:1px solid var(--line2)}
.pill.g{background:var(--gold-bg);color:var(--gold-tx);border-color:var(--gold-bd)}
.pill.w{background:var(--gold-bg);color:var(--gold-tx);border-color:var(--gold-bd)}
.back{background:none;border:none;font-family:var(--fb);font-size:14px;color:var(--mut2);cursor:pointer;
  margin-top:14px;font-weight:600;padding:12px 6px;min-height:46px;text-decoration:underline;text-underline-offset:3px}
.back:hover{color:var(--ink2)}
.backlink{display:inline-flex;align-items:center;min-height:44px;padding:0 10px}
.calfallback{background:var(--gold-bg);border:1px solid var(--gold-bd);border-radius:16px;padding:26px}
.calfallback a{display:inline-block;padding:10px 2px;min-height:44px;line-height:24px;font-weight:700}
.calwrap iframe{width:100%;min-height:640px;border:none;border-radius:16px;background:var(--wht)}

@media(max-width:880px){
  .grid2{grid-template-columns:1fr}
  .sticky .t{display:none}.sticky{justify-content:center}
}
/* Reveal starts from a VISIBLE resting state and only hides once JS confirms
   it can un-hide it, so a dead script or a throttled tab can never leave the
   page blank. */
.rv{transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)}
html.js-rv .rv{opacity:0;transform:translateY(14px)}
html.js-rv .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}
  html.js-rv .rv{opacity:1;transform:none}}
:focus-visible{outline:2.5px solid var(--navy);outline-offset:2px}

/* ===========================================================================
   PHONE FIRST
   =========================================================================== */
button,a,.opt,summary,input,select,textarea{-webkit-tap-highlight-color:rgba(193,164,58,.18)}
input.fld,select.fld,textarea.fld{font-size:16px}
@media(max-width:620px){
  body{font-size:16px}
  .wrap,.narrow,.mid{padding:0 16px}
  nav.top .wrap{padding:8px 16px;gap:10px}
  .mark img{height:32px}
  .navsteps{gap:10px;font-size:11.5px}
  .btn{width:100%;font-size:17px;padding:17px 22px}
  .btn.sm{width:auto;padding:11px 15px;font-size:14px;white-space:nowrap}
  .sticky .btn.sm{width:100%;min-height:52px;font-size:15px}
  footer.site .wrap{gap:2px 14px}
  details.qa summary{font-size:16.5px;padding:17px 0}
  details.qa .a{font-size:15.5px}
  .opt{min-height:58px}
  .fine,.kicker,.eyebrow,.reassure{font-size:13.5px}
  .row .k,.row .v{font-size:15px}
  .row{padding:13px 16px}
  body.has-sticky{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  .sticky{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:400px){ .navsteps span:not(.on){display:none} }
