/* Cashbook Finance — 2026 visual polish layer
   Loaded last so the public site and secure portal share one consistent finish. */

:root{
  --font:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --paper:#f7f9fc;
  --paper-2:#eef3f9;
  --tint:#e9f4ff;
  --card:#ffffff;
  --line:#dbe5ef;
  --line-strong:#c9d7e5;
  --text:#0d2239;
  --text-mut:#586b81;
  --ink:#081f36;
  --ink-2:#0c2b4a;
  --ink-deep:#051727;
  --blue:#087fd0;
  --blue-2:#1594e8;
  --blue-mid:#4aa8ec;
  --blue-light:#96d5ff;
  --sky:#83c8f8;
  --r:22px;
  --wrap:1240px;
  --pad-y:clamp(72px,7.6vw,116px);
  --shadow-xs:0 1px 2px rgba(8,31,54,.04),0 8px 24px -22px rgba(8,31,54,.22);
  --shadow-sm:0 16px 38px -30px rgba(8,31,54,.38),0 1px 2px rgba(8,31,54,.04);
  --shadow-md:0 28px 70px -46px rgba(8,31,54,.48),0 2px 5px rgba(8,31,54,.04);
  --shadow-dark:0 34px 90px -48px rgba(0,0,0,.62);
  --ease:cubic-bezier(.2,.75,.25,1);
}

html{scroll-padding-top:104px}
body{
  background:
    radial-gradient(900px 520px at 8% -8%,rgba(75,168,236,.075),transparent 67%),
    radial-gradient(760px 520px at 100% 18%,rgba(8,127,208,.055),transparent 70%),
    var(--paper);
  color:var(--text);
  text-rendering:optimizeLegibility;
}
body:not([data-page="portal"]){font-size:16.5px}
.wrap{max-width:var(--wrap);padding-inline:clamp(20px,3vw,32px)}
.section{isolation:isolate}
.tint{background:linear-gradient(180deg,#f0f5fa 0%,#edf3f9 100%)}
.deep{background:linear-gradient(135deg,#051726 0%,#08233d 58%,#0b2d4d 100%)}

/* Type hierarchy */
.eyebrow{
  gap:10px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.145em;
}
.eyebrow::before{width:26px;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--blue-light))}
.h2{font-size:clamp(31px,3.8vw,48px);line-height:1.02;letter-spacing:-.043em;text-wrap:balance}
.lead{line-height:1.68;color:#5a6e84;text-wrap:pretty}
.hero h1{letter-spacing:-.052em;line-height:.98;text-wrap:balance}
.hero p,.subhero p{max-width:62ch}

/* Accessible interaction system */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid rgba(78,180,246,.72)!important;
  outline-offset:3px!important;
}
:where(button,.btn,a):active{transform:translateY(1px)}
::placeholder{color:#8a9aab;opacity:1}

/* Buttons */
.btn{
  min-height:50px;
  padding:0 23px;
  border-radius:14px;
  font-weight:750;
  letter-spacing:-.01em;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .25s,border-color .25s,color .25s;
}
.btn-blue{
  background:linear-gradient(115deg,#0679c9 0%,#1594e8 58%,#55b6f3 120%);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 14px 30px -17px rgba(0,105,190,.82),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-blue::before{
  content:"";position:absolute;inset:1px;border-radius:12px;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.15),transparent 35%);opacity:.72;
}
.btn-blue:hover{box-shadow:0 20px 38px -17px rgba(0,105,190,.88),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-light{box-shadow:0 13px 34px -24px rgba(0,0,0,.55);border-color:rgba(255,255,255,.9)}
.btn-outline{background:rgba(255,255,255,.72);border-color:#bdd2e6;box-shadow:var(--shadow-xs)}
.btn-outline:hover{background:#fff;border-color:#69b4e8;box-shadow:var(--shadow-sm)}
.btn-ghost{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.2);backdrop-filter:blur(12px)}

/* Public header — clear three-zone layout */
header.nav{padding:14px 18px 0}
header.nav .nav-in{
  width:min(1880px,calc(100% - 8px));
  min-height:72px;
  padding:10px 12px 10px 24px;
  border-radius:22px;
  border-color:rgba(144,197,236,.2);
  background:rgba(5,25,44,.84);
  box-shadow:0 22px 56px -36px rgba(0,0,0,.86),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
}
body.nav-solid header.nav{padding-top:9px}
body.nav-solid header.nav .nav-in{
  background:rgba(255,255,255,.93);
  border-color:rgba(202,216,230,.88);
  box-shadow:0 18px 52px -35px rgba(6,31,55,.48),inset 0 1px 0 #fff;
}
header.nav .brand{min-width:0}
header.nav .brand img{height:36px}
header.nav nav.links a{
  min-height:42px;
  border-radius:10px;
  padding-inline:7px;
  font-size:14px;
  font-weight:690;
  transition:background .2s,color .2s,transform .2s;
}
header.nav nav.links a:hover{background:rgba(255,255,255,.075)}
body.nav-solid header.nav nav.links a:hover{background:#edf5fb}
header.nav nav.links a.active{background:rgba(85,178,241,.12)}
body.nav-solid header.nav nav.links a.active{background:#e8f4fd}
header.nav nav.links a::after{bottom:2px!important;height:2px!important}
header.nav .nav-div{background:rgba(255,255,255,.2)}
body.nav-solid header.nav .nav-div{background:#cad7e4}
header.nav .nav-cta{gap:10px}
header.nav .nav-phone,
header.nav .portal-nav-link,
header.nav .nav-apply{height:48px;min-height:48px;border-radius:14px}
header.nav .nav-phone{
  width:48px;min-width:48px;padding:0;justify-content:center;
  background:rgba(20,66,103,.28);border:1px solid rgba(113,191,245,.27);
}
header.nav .portal-nav-link{
  min-width:156px;padding-inline:17px;
  background:linear-gradient(135deg,rgba(5,106,181,.38),rgba(70,163,226,.16));
  border-color:rgba(126,202,255,.38);
}
header.nav .nav-apply{min-width:128px;padding-inline:20px}
body.nav-solid header.nav .nav-phone{background:#edf6fc;border-color:#c8deed}

@media (min-width:1501px){
  header.nav .nav-in{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    align-items:center;
    column-gap:clamp(34px,2.5vw,56px)!important;
  }
  header.nav nav.links{
    display:flex!important;justify-content:center!important;align-items:center;
    width:100%;min-width:0;margin:0!important;gap:0!important;
  }
  header.nav nav.links>a{margin-inline:11px!important}
  header.nav nav.links>a.np{margin-inline:16px!important}
  header.nav nav.links>a:first-child{margin-left:0!important}
  header.nav nav.links>a:last-child{margin-right:0!important}
  header.nav nav.links>.nav-div{width:1px;height:28px;margin-inline:17px!important;flex:0 0 1px}
  header.nav .nav-cta{margin:0!important;gap:10px!important}
}
@media (min-width:1501px) and (max-width:1780px){
  header.nav .nav-in{column-gap:24px!important;padding-left:20px}
  header.nav .brand img{height:32px}
  header.nav nav.links>a{margin-inline:7px!important;font-size:12.75px;padding-inline:4px}
  header.nav nav.links>a.np{margin-inline:10px!important}
  header.nav nav.links>.nav-div{margin-inline:9px!important}
  header.nav .portal-nav-link{min-width:0;padding-inline:13px;font-size:13px}
  header.nav .nav-apply{min-width:0;padding-inline:16px;font-size:13px}
}

/* Mobile header and menu */
@media (max-width:1500px){
  header.nav{padding:10px 12px 0}
  header.nav .nav-in{width:100%;min-height:64px;padding:8px 9px 8px 16px;border-radius:18px}
  header.nav .brand img{height:30px}
  header.nav .portal-nav-link,header.nav .nav-apply,header.nav .burger{height:46px;min-height:46px;border-radius:13px}
  header.nav .burger{width:46px;min-width:46px}
  .mobile-menu{
    padding:96px clamp(18px,5vw,32px) 34px!important;
    background:
      radial-gradient(75% 48% at 100% 0%,rgba(47,154,232,.24),transparent 64%),
      radial-gradient(80% 60% at 0% 100%,rgba(8,127,208,.15),transparent 70%),
      linear-gradient(180deg,#061a2d 0%,#08243e 100%)!important;
  }
  .mobile-menu a:not(.btn):not(.m-call):not(.portal-mobile-link){
    min-height:53px;padding:11px 8px!important;font-size:20px!important;border-radius:10px;
  }
  .mobile-menu a:not(.btn):not(.m-call):not(.portal-mobile-link):hover{background:rgba(255,255,255,.06)}
  .mobile-menu .portal-mobile-link{border-radius:19px!important;padding:16px!important;box-shadow:0 24px 58px -36px rgba(0,0,0,.8)}
}
@media (max-width:600px){
  header.nav{padding-inline:8px}
  header.nav .nav-in{padding-left:12px;gap:7px}
  header.nav .brand img{height:27px}
  header.nav .portal-nav-link{width:44px;min-width:44px;height:44px;min-height:44px;border-radius:12px}
  header.nav .burger{width:44px;min-width:44px;height:44px;min-height:44px}
}

/* Hero and dark feature areas */
.ink-bg{
  background:
    radial-gradient(80% 80% at 88% 5%,rgba(40,151,231,.2),transparent 60%),
    linear-gradient(135deg,#06192c 0%,#092742 52%,#0a3153 100%);
}
.ink-bg::before{opacity:.92;filter:saturate(115%)}
.ink-bg::after{opacity:.035!important}
.hero{padding-top:clamp(140px,13vw,184px);padding-bottom:clamp(82px,8vw,122px)}
.hero-grid{gap:clamp(48px,5.5vw,82px)}
.hero h1{font-size:clamp(42px,5.55vw,72px);max-width:13ch}
.hero .lead{font-size:clamp(17px,1.45vw,20px);line-height:1.7}
.pillrow{gap:9px;margin-top:25px}
.pill{
  padding:9px 14px;border-radius:999px;
  background:rgba(255,255,255,.075);border-color:rgba(160,210,247,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(10px);
}
.hero-cta{gap:12px;margin-top:33px}
.glass{
  border-radius:28px;
  border-color:rgba(178,220,250,.2);
  background:linear-gradient(150deg,rgba(255,255,255,.105),rgba(255,255,255,.045));
  box-shadow:var(--shadow-dark),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(20px) saturate(135%);
}
.demo-head{padding:20px 23px}
.demo-body{padding:28px 23px}

/* Home stats become a floating confidence band */
body[data-page="home"] .ticker{
  position:relative;z-index:8;
  width:min(1180px,calc(100% - 40px));
  margin:-38px auto 0;
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow-md);
  background:var(--line);
}
body[data-page="home"] .ticker .ti{background:rgba(255,255,255,.96);padding:28px 20px}

/* Reusable surface system */
.icard,.panel-card,.zrow,.fitbox,.sector,.form-card,.tcard,.bcard,.qa,.gterm,.apply-card,.define,.analogy,.worked{
  border-color:var(--line);
  border-radius:var(--r);
}
.icard,.panel-card,.zrow,.fitbox,.sector,.form-card,.tcard,.bcard,.qa,.gterm,.apply-card,.define{
  box-shadow:var(--shadow-xs);
}
.icard,.panel-card,.zrow,.fitbox,.sector,.form-card,.tcard,.bcard,.qa,.gterm{
  transition:border-color .25s,box-shadow .3s var(--ease),transform .3s var(--ease),background .25s;
}
.icard{padding:30px;background:linear-gradient(160deg,#fff 0%,#fbfdff 100%)}
.icard:hover,.panel-card:hover,.zrow:hover,.sector:hover,.tcard:hover,.bcard:hover,.gterm:hover{
  border-color:#bfd5e8;
  box-shadow:var(--shadow-md);
}
.ic{width:54px;height:54px;border-radius:16px;background:linear-gradient(145deg,#e8f4fe,#f2f8fd);border:1px solid #d9eafb}
.grid3,.grid2{gap:24px;margin-top:50px}
.panel-card{padding:32px;background:linear-gradient(150deg,#fff,#f9fcff)}
.zrow{padding:28px 30px}
.znum{border-radius:17px;box-shadow:0 12px 25px -15px rgba(0,120,215,.75)}
.worked{box-shadow:0 25px 65px -45px rgba(0,0,0,.7)}
.tabs{padding:5px;border-radius:15px;background:#eaf0f6}
.tab{min-height:43px;border-radius:11px;padding:0 20px}
.tab.on{box-shadow:0 8px 20px -14px rgba(8,31,54,.36)}

/* Forms and calculators */
.form-card{padding:32px}
.fld label,.portal-field label,.portal-field legend{letter-spacing:.055em}
.fld input,.fld select,.wf input,.wf select,.wf textarea{
  min-height:50px;border-radius:12px;border-color:var(--line-strong);background:#f8fafc;
}
.fld input:hover,.fld select:hover,.wf input:hover,.wf select:hover,.wf textarea:hover{border-color:#9fb9d1}
.fld input:focus,.fld select:focus,.wf input:focus,.wf select:focus,.wf textarea:focus{
  border-color:var(--blue);box-shadow:0 0 0 4px rgba(8,127,208,.12);background:#fff;
}
.seg .opt{min-height:46px;display:grid;place-items:center;border-radius:12px}
.apply-card{overflow:hidden;box-shadow:var(--shadow-md)}
.wprogress{background:linear-gradient(180deg,#fff,#fbfdff)}
.wnav{background:#f4f7fa}
.qpick button,.ftab,.chip{min-height:42px}

/* FAQ, blog and team */
.qa{margin-bottom:14px}
.qa>button{min-height:66px;padding:20px 24px}
.qa[aria-expanded="true"]{border-color:#bdd5e9;box-shadow:var(--shadow-sm)}
.bcard{background:linear-gradient(180deg,#fff,#fcfdff)}
.bcover{aspect-ratio:16/9}
.bcat{padding:7px 12px;background:rgba(6,27,47,.7);border:1px solid rgba(255,255,255,.14)}
.avatar{box-shadow:0 18px 38px -18px rgba(0,120,215,.55)}

/* Contact/CTA */
.cta-grid{gap:clamp(42px,5vw,68px)}
.nstep .nn{border-radius:11px;background:rgba(255,255,255,.08)}
.contact-lines a{border-radius:10px;padding:9px 10px;margin-left:-10px;transition:background .2s,color .2s}
.contact-lines a:hover{background:rgba(255,255,255,.06)}

/* Footer */
footer.ft{
  position:relative;
  background:
    radial-gradient(50% 100% at 100% 0%,rgba(46,153,229,.13),transparent 66%),
    linear-gradient(135deg,#041421,#071d31 52%,#092740 100%);
}
.ft-top{gap:clamp(32px,4vw,56px)}
.ft-soc a{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.035)}
.ft-col a{padding:7px 0}
.ft-bottom{padding-bottom:3px}

/* Back to top: polished but intentionally quiet */
.back-to-top{
  width:44px!important;height:44px!important;
  border-radius:14px!important;
  border:1px solid rgba(116,173,216,.32)!important;
  background:rgba(8,31,54,.84)!important;
  box-shadow:0 14px 32px -20px rgba(0,0,0,.62)!important;
  backdrop-filter:blur(14px);
}

/* Secure portal */
body[data-page="portal"]{
  background:
    radial-gradient(900px 540px at 100% 0%,rgba(65,160,231,.09),transparent 68%),
    #edf2f7;
}
.portal-appbar{
  background:rgba(5,24,42,.94)!important;
  border-bottom-color:rgba(140,199,240,.18)!important;
  box-shadow:0 16px 42px -26px rgba(0,0,0,.62)!important;
  backdrop-filter:blur(20px) saturate(150%);
}
.portal-appbar-in{max-width:1440px!important;min-height:78px!important;padding-inline:clamp(16px,3vw,32px)!important}
.portal-logo-link{border-radius:14px!important;box-shadow:0 13px 30px -17px rgba(0,0,0,.5)!important}
.portal-appname{border-radius:11px!important}
.portal-exit-link{min-height:44px!important;border-radius:12px!important}
body[data-page="portal"] .subhero{
  background:
    radial-gradient(70% 90% at 95% 8%,rgba(64,166,238,.2),transparent 65%),
    linear-gradient(135deg,#06192c 0%,#092a49 57%,#0b3458 100%)!important;
}
body[data-page="portal"] .portal-shell{background:transparent!important}
.portal-intro{border-radius:19px!important;border-color:#d7e2ed!important;box-shadow:var(--shadow-sm)!important}
.portal-alert{border-radius:16px!important}
.portal-layout{gap:28px!important}
.portal-rail{border-radius:22px!important;box-shadow:0 26px 65px -40px rgba(5,24,42,.82)!important}
.portal-step{border-radius:13px!important;min-height:52px}
.portal-card{
  border-radius:23px!important;
  border-color:#d5e1ec!important;
  box-shadow:0 22px 58px -43px rgba(8,31,54,.52)!important;
  background:linear-gradient(155deg,#fff 0%,#fcfdff 100%)!important;
}
.portal-card::before{width:5px!important}
.portal-card-head{padding-bottom:24px!important}
.portal-field input,.portal-field select,.portal-field textarea{
  min-height:51px!important;border-radius:12px!important;background:#f8fafc!important;
}
.portal-field textarea{min-height:108px!important}
.portal-field input:focus,.portal-field select:focus,.portal-field textarea:focus{background:#fff!important}
.upload-box{border-radius:18px!important;background:linear-gradient(145deg,#f7fafc,#f2f7fb)!important}
.upload-box:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.choice span{min-height:46px;border-radius:12px!important}
.legal-panel,.person-card,.privacy-strip{border-radius:15px!important}
.send-panel{
  border-radius:23px!important;
  background:
    radial-gradient(65% 140% at 100% 0%,rgba(57,164,238,.22),transparent 64%),
    linear-gradient(135deg,#06192c,#0a2a49)!important;
  box-shadow:0 30px 75px -43px rgba(5,23,42,.76)!important;
}
.portal-footer{background:linear-gradient(135deg,#041421,#071d31)!important}

/* Responsive content polish */
@media (max-width:980px){
  :root{--pad-y:clamp(62px,9vw,88px)}
  .hero-grid,.duo,.cta-grid,.explain{gap:38px}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .ft-top{grid-template-columns:1.4fr 1fr 1fr}
}
@media (max-width:720px){
  body:not([data-page="portal"]){font-size:16px}
  .wrap{padding-inline:18px}
  .section{padding-block:62px}
  .hero{padding-top:118px;padding-bottom:76px}
  .hero h1{font-size:clamp(39px,12vw,54px)}
  .hero-grid{gap:36px}
  .hero-cta{align-items:stretch}
  .hero-cta .btn{flex:1 1 100%}
  body[data-page="home"] .ticker{width:calc(100% - 28px);margin-top:-24px;border-radius:18px;grid-template-columns:1fr 1fr}
  body[data-page="home"] .ticker .ti{padding:22px 12px}
  .grid3,.grid2{grid-template-columns:1fr;gap:16px;margin-top:36px}
  .icard,.panel-card,.zrow,.form-card,.tcard,.gterm{border-radius:18px;padding:23px}
  .zrow{grid-template-columns:52px 1fr;gap:15px}
  .znum{width:48px;height:48px}
  .tabs{display:flex;width:100%;overflow-x:auto;justify-content:flex-start}
  .tab{flex:0 0 auto}
  .ft-top{grid-template-columns:1fr 1fr}
  .ft-brand{grid-column:1/-1}
  .ft-bottom{align-items:flex-start;flex-direction:column}
  .ft-bottom .lk{flex-wrap:wrap;gap:10px 18px}
}
@media (max-width:480px){
  .wrap{padding-inline:15px}
  .h2{font-size:clamp(30px,9.5vw,39px)}
  .btn{width:100%}
  .hero .pillrow{display:grid;grid-template-columns:1fr}
  .pill{justify-content:flex-start}
  .ft-top{grid-template-columns:1fr}
  .ft-brand{grid-column:auto}
  .fld-2{grid-template-columns:1fr}
  .portal-appbar-in{min-height:64px!important}
  .portal-card{border-radius:17px!important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .is-tilt{transform:none!important}
}

/* Wide desktop correction: the legacy max-width was still constraining the
   header to the content column, which forced otherwise well-spaced items to overlap. */
header.nav .nav-in{max-width:1880px!important}
body[data-page="portal"] .apply-badge{
  min-height:34px;
  padding:7px 12px;
  border:1px solid rgba(167,214,247,.17);
  border-radius:999px;
  background:rgba(255,255,255,.075);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
@media (max-width:560px){
  body[data-page="portal"] .apply-badges{display:grid;grid-template-columns:1fr;gap:7px!important}
  body[data-page="portal"] .apply-badge{justify-content:flex-start;width:100%;font-size:12px!important}
}


/* Homepage quote section — equal-height, top-aligned two-column composition */
body[data-page="home"] #contact .quote-layout{
  grid-template-columns:minmax(0,1.06fr) minmax(430px,.94fr);
  gap:clamp(54px,5.5vw,84px);
  align-items:stretch;
}
body[data-page="home"] #contact .quote-copy-column{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  padding-block:4px;
}
body[data-page="home"] #contact .quote-form-column{
  align-self:stretch;
  display:flex;
  align-items:stretch;
  width:100%;
  max-width:560px;
  margin-left:auto;
  padding-top:0;
}
body[data-page="home"] #contact .quote-form-card{
  position:relative;
  display:flex;
  width:100%;
  min-height:100%;
  padding:clamp(32px,2.7vw,40px);
  overflow:hidden;
  border:1px solid rgba(208,223,236,.88);
  border-radius:24px;
  box-shadow:0 34px 80px -42px rgba(0,0,0,.72),0 12px 30px -22px rgba(30,115,184,.38);
}
body[data-page="home"] #contact .quote-form-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:5px;
  background:linear-gradient(90deg,#087fd1,#57b6f1 62%,#9fdcff);
}
body[data-page="home"] #contact .quote-form-card #formFields{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}
body[data-page="home"] #contact .quote-form-card h3{
  margin-bottom:7px;
  font-size:clamp(24px,2vw,29px);
  letter-spacing:-.025em;
}
body[data-page="home"] #contact .quote-form-card p.fs{
  max-width:38ch;
  margin-bottom:25px;
  font-size:14.5px;
  line-height:1.55;
}
body[data-page="home"] #contact .quote-form-card .fld{margin-bottom:17px}
body[data-page="home"] #contact .quote-form-card .fld-2{gap:16px}
body[data-page="home"] #contact .quote-form-card .fld input,
body[data-page="home"] #contact .quote-form-card .fld select{
  min-height:51px;
  padding:14px 15px;
  border-radius:12px;
  background:#f7fafc;
}
body[data-page="home"] #contact .quote-form-card .seg{gap:10px}
body[data-page="home"] #contact .quote-form-card .seg .opt{
  min-height:49px;
  display:grid;
  place-items:center;
  padding:11px 12px;
  border-radius:12px;
}
body[data-page="home"] #contact .quote-form-card .btn{
  min-height:54px;
  margin-top:8px;
  border-radius:12px;
  font-size:15.5px;
}
@media (max-width:1180px) and (min-width:981px){
  body[data-page="home"] #contact .quote-layout{
    grid-template-columns:minmax(0,1fr) minmax(400px,.92fr);
    gap:40px;
  }
  body[data-page="home"] #contact .quote-form-card{padding:30px}
}
@media (max-width:980px){
  body[data-page="home"] #contact .quote-layout{
    grid-template-columns:1fr;
    gap:46px;
  }
  body[data-page="home"] #contact .quote-copy-column{padding-block:0}
  body[data-page="home"] #contact .quote-form-column{
    max-width:680px;
    margin-inline:auto;
  }
  body[data-page="home"] #contact .quote-form-card{
    min-height:0;
    height:auto;
    padding:34px;
  }
  body[data-page="home"] #contact .quote-form-card #formFields{justify-content:flex-start}
}
@media (max-width:560px){
  body[data-page="home"] #contact .quote-layout{gap:34px}
  body[data-page="home"] #contact .quote-form-card{padding:27px 22px 24px;border-radius:19px}
  body[data-page="home"] #contact .quote-form-card h3{font-size:24px}
  body[data-page="home"] #contact .quote-form-card p.fs{margin-bottom:21px}
  body[data-page="home"] #contact .quote-form-card .fld{margin-bottom:15px}
}

/* ========================================================================== 
   Cashbook Finance UI refinement — v2.1.0
   A restrained premium pass focused on optical rhythm, legibility and polish.
   ========================================================================== */

:root{
  --surface-glass:rgba(255,255,255,.78);
  --surface-blue:#f2f8fd;
  --focus:rgba(23,146,226,.2);
  --shadow-lift:0 26px 62px -38px rgba(7,35,61,.48),0 2px 6px rgba(7,35,61,.04);
}

html{
  scrollbar-color:#8fb8d6 #edf3f8;
  scrollbar-width:thin;
}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:#edf3f8}
*::-webkit-scrollbar-thumb{background:linear-gradient(#a4c7df,#74a9cf);border:3px solid #edf3f8;border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(#89b7d8,#5f9dc8)}
::selection{color:#fff;background:#087fd0}

body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
main{overflow:clip}
[id]{scroll-margin-top:112px}

/* More deliberate vertical rhythm without changing page structure. */
.section>.wrap>.eyebrow:first-child,
.section>.wrap>.center>.eyebrow:first-child{margin-bottom:15px}
.section .h2+.lead{margin-top:17px}
.section .lead+*{margin-top:clamp(28px,3vw,44px)}

/* Sub-page hero system */
.subhero{
  position:relative;
  min-height:clamp(350px,34vw,500px);
  display:flex;
  align-items:center;
  padding-top:clamp(132px,12vw,170px)!important;
  padding-bottom:clamp(68px,7vw,98px)!important;
  overflow:hidden;
}
.subhero::after{
  content:"";
  position:absolute;
  width:min(520px,42vw);height:min(520px,42vw);
  right:-10%;bottom:-48%;
  border:1px solid rgba(143,208,252,.11);
  border-radius:50%;
  box-shadow:0 0 0 70px rgba(122,199,250,.035),0 0 0 140px rgba(122,199,250,.02);
  pointer-events:none;
}
.subhero .wrap{position:relative;z-index:2}
.subhero h1{max-width:18ch;line-height:1.01;letter-spacing:-.052em;text-wrap:balance}
.subhero p{font-size:clamp(17px,1.4vw,20px);line-height:1.7;color:rgba(220,235,247,.78)}

/* Header: improve optical balance and reduce the "row of buttons" feel. */
header.nav .nav-in{transition:background .28s,border-color .28s,box-shadow .28s,transform .28s}
header.nav nav.links a{letter-spacing:-.012em}
header.nav nav.links a::before{transition:transform .2s var(--ease),border-color .2s}
header.nav nav.links a.np:hover::before{transform:rotate(-45deg) translate(1px,1px)}
header.nav .nav-cta{
  padding-left:10px;
  border-left:1px solid rgba(164,207,238,.16);
}
body.nav-solid header.nav .nav-cta{border-left-color:#d5e1eb}
header.nav .nav-phone{box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
header.nav .portal-nav-link,header.nav .nav-apply{box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
header.nav .portal-nav-link:hover,header.nav .nav-apply:hover{transform:translateY(-2px)}

/* Buttons: premium depth, clearer arrows, consistent disabled states. */
.btn{position:relative;isolation:isolate;overflow:hidden}
.btn .arr,.btn>span:last-child{transition:transform .22s var(--ease)}
.btn:hover .arr,.btn:hover>span:last-child{transform:translateX(3px)}
.btn:disabled,.btn[aria-disabled="true"]{filter:saturate(.55);opacity:.66;box-shadow:none!important;transform:none!important;cursor:not-allowed!important}
.btn-blue::after{
  content:"";position:absolute;z-index:-1;top:-120%;left:-35%;width:28%;height:330%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transform:rotate(18deg);transition:left .65s var(--ease);pointer-events:none;
}
.btn-blue:hover::after{left:115%}

/* Cards: consistent edge treatment, gentler motion and higher visual quality. */
.icard,.panel-card,.zrow,.fitbox,.sector,.form-card,.tcard,.bcard,.qa,.gterm,.apply-card,.define,
.portal-card,.portal-intro{
  position:relative;
  background-clip:padding-box;
}
.icard::before,.panel-card::before,.tcard::before,.bcard::before,.sector::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(73,162,226,.36),transparent);
  opacity:0;transition:opacity .25s;pointer-events:none;
}
.icard:hover::before,.panel-card:hover::before,.tcard:hover::before,.bcard:hover::before,.sector:hover::before{opacity:1}
.icard:hover,.panel-card:hover,.zrow:hover,.sector:hover,.tcard:hover,.bcard:hover,.gterm:hover{
  transform:translateY(-4px)!important;
  box-shadow:var(--shadow-lift)!important;
}
/* Keep the experience polished rather than gimmicky when legacy tilt JS runs. */
.is-tilt:hover{transform:translateY(-4px)!important}
.is-tilt .glare{opacity:.18!important}

/* Icons and numbered process elements */
.ic,.znum,.portal-mobile-icon{
  position:relative;overflow:hidden;
}
.ic::after,.znum::after,.portal-mobile-icon::after{
  content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.32),transparent 48%);pointer-events:none;
}

/* Forms: better hierarchy, quieter fields, clear validation. */
.fld label,.wf label,.portal-field label,.portal-field legend{
  display:block;
  margin-bottom:8px;
  font-weight:750;
  color:#29445f;
}
.fld input,.fld select,.wf input,.wf select,.wf textarea,
.portal-field input,.portal-field select,.portal-field textarea{
  transition:border-color .2s,box-shadow .2s,background .2s,transform .2s;
  box-shadow:inset 0 1px 2px rgba(8,31,54,.025);
}
.fld input:focus,.fld select:focus,.wf input:focus,.wf select:focus,.wf textarea:focus,
.portal-field input:focus,.portal-field select:focus,.portal-field textarea:focus{
  transform:translateY(-1px);
  box-shadow:0 0 0 4px var(--focus),0 10px 24px -18px rgba(8,127,208,.45)!important;
}
:where(input,select,textarea):user-invalid{
  border-color:#cf695b!important;
  box-shadow:0 0 0 3px rgba(207,105,91,.1)!important;
}
:where(input,select,textarea):user-valid:not(:placeholder-shown){border-color:#91c7ae}
.req,.required,.portal-required{color:#d54c3f;font-weight:850}
input[type="checkbox"],input[type="radio"]{accent-color:var(--blue)}

/* Tabs and segmented controls */
.tabs,.seg{border:1px solid rgba(197,213,228,.8)}
.tab,.seg .opt{transition:background .2s,color .2s,box-shadow .2s,transform .2s}
.tab:hover,.seg .opt:hover{background:rgba(255,255,255,.72)}
.tab.on,.seg .opt:has(input:checked){box-shadow:0 8px 20px -15px rgba(8,31,54,.42),inset 0 1px 0 #fff}

/* FAQ */
.qa{overflow:hidden}
.qa>button{transition:background .2s,color .2s}
.qa>button:hover{background:linear-gradient(90deg,#f8fbfe,#f1f7fc)}
.qa[aria-expanded="true"]>button{background:#f2f8fd}
.qa .plus{transition:transform .24s var(--ease),background .2s}
.qa[aria-expanded="true"] .plus{transform:rotate(45deg)}

/* Blog listing and article reading experience */
.bcard .bcover{overflow:hidden}
.bcard .bcover>*{transition:transform .6s var(--ease)}
.bcard:hover .bcover>*{transform:scale(1.025)}
.article{max-width:920px;margin-inline:auto}
.article-head{max-width:850px;margin-inline:auto;text-align:left}
.article-head h1{font-size:clamp(38px,5vw,64px);line-height:1.01;letter-spacing:-.052em;text-wrap:balance}
.article-meta{gap:10px;flex-wrap:wrap}
.article-cover{border-radius:26px;overflow:hidden;box-shadow:0 36px 90px -55px rgba(5,27,48,.66)}
.prose{max-width:760px;margin-inline:auto}
.prose>p:first-of-type{font-size:clamp(19px,2vw,22px)!important;line-height:1.68!important;color:#28435e!important}
.prose h2{font-size:clamp(27px,3vw,35px)!important;line-height:1.14!important;margin-top:48px!important;scroll-margin-top:120px}
.prose h3{font-size:clamp(21px,2.2vw,25px)!important;margin-top:34px!important}
.prose p,.prose li{line-height:1.82!important}
.prose a:not(.btn){color:#0679c9;text-decoration:underline;text-decoration-color:rgba(6,121,201,.3);text-underline-offset:4px;text-decoration-thickness:1.5px}
.prose a:not(.btn):hover{text-decoration-color:#0679c9}
.prose ul li::marker,.prose ol li::marker{color:var(--blue);font-weight:800}
.prose blockquote{
  margin:32px 0;padding:22px 26px;border-left:4px solid var(--blue);border-radius:0 16px 16px 0;
  background:#edf7fe;color:#24445f;box-shadow:var(--shadow-xs);
}
.prose-cta{border:1px solid rgba(126,198,246,.18);box-shadow:var(--shadow-dark)}

/* Tables and legal content */
table{border-collapse:separate;border-spacing:0}
.finance-table,.legal-table{border-radius:15px;overflow:hidden;border:1px solid var(--line)}
.finance-table th,.legal-table th{background:#0b2b48;color:#fff;font-weight:750}
.finance-table tr:nth-child(even) td,.legal-table tr:nth-child(even) td{background:#f8fbfd}
.finance-table td,.legal-table td{border-color:#e1e9f0}

/* CTA and quote areas */
.deep.ink-bg{border-top:1px solid rgba(131,200,248,.12)}
.cta-grid>.form-card,.quote-form-card{backdrop-filter:blur(10px)}
.contact-lines a svg{transition:transform .2s}
.contact-lines a:hover svg{transform:translateX(2px)}
body[data-page="home"] #contact .quote-copy-column{justify-content:center}
body[data-page="home"] #contact .quote-form-card{background:linear-gradient(155deg,rgba(255,255,255,.99),rgba(244,250,255,.98))}
body[data-page="home"] #contact .quote-form-card::after{
  content:"";position:absolute;width:180px;height:180px;right:-82px;bottom:-96px;border-radius:50%;
  border:1px solid rgba(78,170,233,.13);box-shadow:0 0 0 34px rgba(78,170,233,.035);pointer-events:none;
}

/* Footer refinement */
footer.ft::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(115,199,255,.5),transparent);
}
.ft-col a{position:relative;width:max-content;max-width:100%;transition:color .2s,transform .2s}
.ft-col a::after{content:"";position:absolute;left:0;right:100%;bottom:3px;height:1px;background:#71c1f6;transition:right .25s var(--ease)}
.ft-col a:hover{transform:translateX(2px)}
.ft-col a:hover::after{right:0}

/* Portal: make long-form completion feel structured and calm. */
body[data-page="portal"] .portal-shell{padding-bottom:clamp(72px,8vw,116px)!important}
.portal-intro{overflow:hidden}
.portal-intro::after{
  content:"";position:absolute;width:220px;height:220px;right:-110px;bottom:-145px;border-radius:50%;
  background:radial-gradient(circle,rgba(69,166,234,.1),transparent 68%);pointer-events:none;
}
@media (min-width:981px){
  .portal-rail{position:sticky!important;top:104px!important;max-height:calc(100vh - 126px);overflow:auto}
}
.portal-step{transition:background .2s,color .2s,transform .2s,border-color .2s}
.portal-step:hover{transform:translateX(3px);background:rgba(255,255,255,.07)}
.portal-card{transition:box-shadow .3s,border-color .3s}
.portal-card:focus-within{border-color:#acd0e9!important;box-shadow:0 28px 70px -44px rgba(8,70,117,.5)!important}
.upload-box{transition:transform .22s var(--ease),background .22s,border-color .22s,box-shadow .22s!important}
.upload-box:focus-within{border-style:solid!important;border-color:#268dd5!important;box-shadow:0 0 0 4px rgba(38,141,213,.1)}
.send-panel .btn{box-shadow:0 17px 38px -20px rgba(0,128,217,.72)}

/* Gentle entry motion, only when allowed. */
@media (prefers-reduced-motion:no-preference){
  .rv{transition-duration:.72s!important;transition-timing-function:var(--ease)!important}
  .ui-ready .section .rv.in{will-change:auto}
}

/* Tablet and mobile refinements */
@media (max-width:1500px){
  header.nav .nav-cta{padding-left:0;border-left:0}
}
@media (max-width:980px){
  .subhero{min-height:390px}
  .article{padding-inline:18px}
  .article-cover{border-radius:21px}
}
@media (max-width:720px){
  html{scroll-padding-top:84px}
  [id]{scroll-margin-top:94px}
  .subhero{min-height:auto;padding-top:112px!important;padding-bottom:68px!important}
  .subhero h1{font-size:clamp(38px,11vw,54px)}
  .subhero::after{right:-28%;bottom:-25%}
  .section .h2+.lead{margin-top:13px}
  .icard:hover,.panel-card:hover,.zrow:hover,.sector:hover,.tcard:hover,.bcard:hover,.gterm:hover{transform:none!important}
  .article{padding-inline:0}
  .article-head h1{font-size:clamp(35px,10vw,48px)}
  .article-cover{border-radius:17px}
  .prose h2{margin-top:39px!important}
  .prose blockquote{padding:19px 20px;margin-inline:-4px}
  .portal-step:hover{transform:none}
}
@media (max-width:480px){
  .subhero p{font-size:16.5px}
  .btn-blue::after{display:none}
  .article-meta{font-size:12.5px}
  .portal-card,.portal-intro,.send-panel{box-shadow:0 18px 42px -35px rgba(8,31,54,.45)!important}
}

/* Hover styles should never punish touch users. */
@media (hover:none){
  .icard:hover,.panel-card:hover,.zrow:hover,.sector:hover,.tcard:hover,.bcard:hover,.gterm:hover,
  header.nav .portal-nav-link:hover,header.nav .nav-apply:hover{transform:none!important}
  .btn-blue::after{display:none}
}

/* Non-destructive form submission indicator. */
button.is-loading,input.is-loading{position:relative;pointer-events:none}
button.is-loading::before{
  content:"";width:15px;height:15px;margin-right:9px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;display:inline-block;vertical-align:-2px;animation:cb-spin .75s linear infinite;
}
@keyframes cb-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){button.is-loading::before{animation:none;border-right-color:currentColor}}


/* ========================================================================== 
   Cashbook Finance UI additions — v2.2.0
   Linked product discovery, denser quote capture and clearer explanations.
   ========================================================================== */

/* Homepage product cards are now meaningful navigation targets. */
.product-link-grid{align-items:stretch}
.product-link-card{
  display:flex!important;
  flex-direction:column;
  min-height:100%;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}
.product-link-card>p{flex:1 1 auto}
.product-link-card .product-card-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:100%;
  margin-top:24px;
  color:var(--blue);
  font-size:14px;
  font-weight:800;
  line-height:1.25;
}
.product-link-card .product-card-cta span{transition:transform .22s var(--ease)}
.product-link-card:hover .product-card-cta span{transform:translateX(4px)}
.product-link-card:focus-visible{outline:3px solid rgba(54,168,237,.42);outline-offset:5px}

/* Homepage quote card: more useful questions and less empty vertical space. */
body[data-page="home"] #contact .quote-form-card #formFields{
  justify-content:flex-start;
}
body[data-page="home"] #contact .quote-form-card .quote-assurance{
  max-width:none;
  white-space:nowrap;
}
body[data-page="home"] #contact .quote-form-card .fld textarea{
  width:100%;
  min-height:96px;
  resize:vertical;
  padding:14px 15px;
  border:1px solid var(--line-strong);
  border-radius:12px;
  background:#f7fafc;
  color:var(--text);
  font:inherit;
  line-height:1.5;
  box-shadow:inset 0 1px 2px rgba(8,31,54,.025);
  transition:border-color .2s,box-shadow .2s,background .2s,transform .2s;
}
body[data-page="home"] #contact .quote-form-card .fld textarea:hover{border-color:#9fb9d1}
body[data-page="home"] #contact .quote-form-card .fld textarea:focus{
  outline:none;
  border-color:var(--blue);
  background:#fff;
  transform:translateY(-1px);
  box-shadow:0 0 0 4px var(--focus),0 10px 24px -18px rgba(8,127,208,.45);
}
@media (max-width:620px){
  body[data-page="home"] #contact .quote-form-card .quote-assurance{white-space:normal}
}

/* Company sector chips: deliberately arranged as two balanced desktop rows. */
body[data-page="company"] .sector-two-row{
  display:grid;
  gap:12px;
  margin-top:30px;
}
body[data-page="company"] .sector-two-row .sector-row{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:space-between;
  gap:9px;
}
body[data-page="company"] .sector-two-row span{
  white-space:nowrap;
  padding:8px 13px;
  font-size:13.5px;
}
@media (max-width:1180px){
  body[data-page="company"] .sector-two-row .sector-row{flex-wrap:wrap;justify-content:flex-start}
}
@media (max-width:680px){
  body[data-page="company"] .sector-two-row span{padding:8px 12px;font-size:13px}
}

/* Invoice-finance product explainers. */
.product-explainer-grid{align-items:start}
.product-explainer-card{display:flex;flex-direction:column;min-height:100%}
.product-explainer-card>p{min-height:4.9em}
.product-more{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.product-more summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--blue);
  font-size:14px;
  font-weight:820;
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.product-more summary::-webkit-details-marker{display:none}
.product-more summary span{
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  flex:0 0 26px;
  border:1px solid #c9deef;
  border-radius:50%;
  background:#f3f9fd;
  transition:transform .22s var(--ease),background .2s,border-color .2s;
}
.product-more[open] summary span{transform:rotate(45deg);background:#e8f5fd;border-color:#9bc9e8}
.product-more-body{padding-top:14px;animation:productMoreIn .22s ease both}
.product-more-body p{margin:0;color:var(--text-mut);font-size:14.5px;line-height:1.68}
.product-more-body a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:14px;
  color:var(--blue);
  font-size:13.5px;
  font-weight:800;
}
@keyframes productMoreIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.product-more-body{animation:none}}
@media (max-width:760px){.product-explainer-card>p{min-height:0}}