/* LeoFolio homepage visual refinement — founder-approved reference execution. Homepage-only. */

/* --------------------------------------------------------------------------
   HERO — retain the existing live background media; refine foreground only.
   -------------------------------------------------------------------------- */
body.lf-sitewide .video-hero.lf-payroll-hero{
  min-height:680px;
  background-color:var(--lf-navy);
}
body.lf-sitewide .lf-payroll-hero .hero-overlay{
  background:linear-gradient(90deg,rgba(5,18,31,.92) 0%,rgba(8,24,40,.80) 47%,rgba(8,24,40,.52) 72%,rgba(8,24,40,.42) 100%);
}
body.lf-sitewide .lf-payroll-hero .hero-content{
  width:min(92%,1500px);
  max-width:1500px;
  padding:128px 0 74px;
  grid-template-columns:minmax(0,.94fr) minmax(560px,1.06fr);
  gap:clamp(40px,5vw,82px);
  align-items:center;
}
body.lf-sitewide .lf-payroll-hero .hero-left{align-self:center;}
body.lf-sitewide .lf-payroll-hero .lf-eyebrow{
  margin:0 0 14px;
  color:#E1B85F;
  font-size:clamp(.72rem,.85vw,.84rem);
  font-weight:800;
  letter-spacing:.13em;
}
body.lf-sitewide .lf-payroll-hero .hero-headline{
  max-width:700px;
  margin:0 0 24px;
  font-family:'Libre Baskerville',Georgia,serif;
  font-size:clamp(4.15rem,5.85vw,6rem);
  font-weight:700;
  line-height:.98;
  letter-spacing:-.047em;
  text-shadow:0 3px 26px rgba(0,0,0,.28);
}
body.lf-sitewide .lf-payroll-hero .hero-headline span{display:block;}
body.lf-sitewide .lf-payroll-hero .hero-headline .lf-hero-title-ivory{color:#FFF9F0;}
body.lf-sitewide .lf-payroll-hero .hero-headline .lf-hero-title-gold{color:#E5B960;}
body.lf-sitewide .lf-payroll-hero .hero-sub{
  max-width:660px;
  margin:0 0 30px;
  color:rgba(255,255,255,.9);
  font-size:clamp(1rem,1.3vw,1.24rem);
  line-height:1.55;
}
body.lf-sitewide .lf-payroll-hero .hero-ctas{gap:18px;margin:0 0 34px;}
body.lf-sitewide .lf-payroll-hero .hero-ctas a{
  min-height:58px;
  padding:16px 30px;
  border-radius:999px;
  font-size:1.02rem;
  font-weight:800;
}
body.lf-sitewide .lf-payroll-hero .btn-primary{
  border:1px solid #E1B85F;
  background:linear-gradient(180deg,#E7BD67,#D5A94F);
  color:#071B2D;
  box-shadow:0 9px 26px rgba(0,0,0,.22);
}
body.lf-sitewide .lf-payroll-hero .btn-primary:hover{background:#EDC977;transform:none;}
body.lf-sitewide .lf-payroll-hero .btn-outline-white{
  border:1.5px solid rgba(255,255,255,.75);
  background:rgba(7,25,42,.18);
  color:#FFF9F0;
}
body.lf-sitewide .lf-payroll-hero .btn-outline-white:hover{
  border-color:#E1B85F;
  background:rgba(225,184,95,.08);
  color:#FFF9F0;
}
.lf-payroll-hero-assurance{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
}
.lf-payroll-hero-assurance li{
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  align-items:start;
  gap:12px;
  min-width:250px;
  padding:0 30px 0 0;
  color:#FFF9F0;
  white-space:normal;
}
.lf-payroll-hero-assurance li+li{
  margin-left:30px;
  padding-left:30px;
  border-left:1px solid rgba(255,255,255,.28);
}
body.lf-sitewide .lf-payroll-hero .lf-payroll-hero-assurance li+li::before{display:none;}
.lf-payroll-assurance-icon{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  color:#E5B960;
}
.lf-payroll-assurance-icon svg{width:26px;height:26px;}
.lf-payroll-hero-assurance strong{display:block;font-size:.93rem;line-height:1.35;}
.lf-payroll-hero-assurance small{display:block;margin-top:5px;color:rgba(255,255,255,.68);font-size:.78rem;line-height:1.35;font-weight:400;}
body.lf-sitewide .lf-payroll-hero .lf-hero-video-toggle{margin-top:24px;color:rgba(255,255,255,.68);}

/* Dark payroll workflow widget. */
.lf-payroll-widget{
  min-width:0;
  width:100%;
  max-width:760px;
  justify-self:end;
  box-sizing:border-box;
  border:2px solid #E7B657;
  border-radius:22px;
  background:linear-gradient(155deg,rgba(15,39,61,.97),rgba(6,28,47,.98));
  color:#F8F3EA;
  box-shadow:0 30px 80px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.055);
  overflow:hidden;
  backdrop-filter:blur(8px);
}
.lf-payroll-widget-tabs{
  display:grid;
  grid-template-columns:1.1fr .8fr .8fr;
  gap:0;
  margin:22px 20px 0;
  padding:0 0 14px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.lf-payroll-widget-tab{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:0 12px 0 0;
  border:0;
  background:transparent;
  color:#BEC9D6;
  font:500 .85rem/1.2 'DM Sans',system-ui,sans-serif;
  text-align:left;
  cursor:pointer;
}
.lf-payroll-widget-tab::after{
  content:"";
  position:absolute;
  left:0;
  right:18px;
  bottom:-15px;
  height:2px;
  background:transparent;
}
.lf-payroll-widget-tab span{
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:grid;
  place-items:center;
  border:1px solid #8292A5;
  border-radius:50%;
  color:#DCE3EB;
  font-weight:800;
}
.lf-payroll-widget-tab strong{font-weight:500;white-space:nowrap;}
.lf-payroll-widget-tab.is-active{color:#F2C76B;}
.lf-payroll-widget-tab.is-active span{
  border-color:#F2C76B;
  background:#F2C76B;
  color:#0B2338;
}
.lf-payroll-widget-tab.is-active strong{font-weight:800;}
.lf-payroll-widget-tab.is-active::after{background:#E7B657;}
.lf-payroll-widget-tab:focus-visible{outline:2px solid #F2C76B;outline-offset:5px;border-radius:5px;}
.lf-payroll-widget-panel{
  display:grid;
  grid-template-columns:minmax(0,1.58fr) minmax(190px,.72fr);
  gap:20px;
  padding:20px;
}
.lf-payroll-widget-panel[hidden]{display:none!important;}
.lf-payroll-widget-main{min-width:0;}
.lf-payroll-employee-list{
  border:1px solid rgba(255,255,255,.13);
  border-radius:15px;
  background:rgba(7,25,42,.28);
  overflow:hidden;
}
.lf-payroll-employee{
  display:grid;
  grid-template-columns:38px minmax(100px,1.25fr) .72fr .8fr 18px;
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:8px 12px;
  border-bottom:1px solid rgba(255,255,255,.12);
  transition:background-color .16s ease,border-color .16s ease;
}
.lf-payroll-employee:last-child{border-bottom:0;}
.lf-payroll-employee:hover{background:rgba(231,182,87,.07);box-shadow:inset 2px 0 0 rgba(231,182,87,.72);}
.lf-payroll-avatar{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#F8F5F0;
  color:#102B45;
  font-size:.66rem;
  font-weight:900;
}
.lf-payroll-employee strong{color:#FFF;font-size:.81rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lf-payroll-employee>span:not(.lf-payroll-avatar){color:#C7D0DB;font-size:.75rem;}
.lf-payroll-employee b{color:#FFF;font-size:.78rem;font-weight:700;text-align:right;white-space:nowrap;}
.lf-payroll-employee i{color:#DFE7EF;font-size:1.15rem;font-style:normal;text-align:center;opacity:.68;transition:opacity .16s ease,color .16s ease;}
.lf-payroll-employee:hover i{opacity:1;color:#F2C76B;}
.lf-payroll-add{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 18px;
  align-items:center;
  gap:10px;
  min-height:58px;
  margin-top:12px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:13px;
  background:rgba(7,25,42,.2);
  color:#D5DEE8;
  text-decoration:none;
  font-size:.8rem;
}
.lf-payroll-add>span{
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#F2C76B;color:#0B2338;font-size:1.3rem;font-weight:500;
}
.lf-payroll-add i{font-size:1.45rem;font-style:normal;text-align:center;}
.lf-payroll-add:hover{border-color:rgba(242,199,107,.5);background:rgba(242,199,107,.06);}
.lf-payroll-add:focus-visible,.lf-payroll-widget-cta:focus-visible{outline:3px solid #F2C76B;outline-offset:3px;}
.lf-payroll-widget-summary{
  min-width:0;
  padding:8px 0 4px 20px;
  border-left:1px solid rgba(255,255,255,.14);
}
.lf-payroll-widget-label{margin:0 0 9px;color:#AFC0D0;font-size:.62rem;font-weight:700;letter-spacing:.13em;}
.lf-payroll-widget-total{display:block;margin:0 0 20px;color:#F2C76B;font-size:1.9rem;line-height:1;font-weight:800;letter-spacing:-.035em;}
.lf-payroll-widget-total--small{font-size:1.18rem;line-height:1.18;letter-spacing:-.015em;}
.lf-payroll-widget-summary ul{display:grid;gap:14px;margin:0 0 22px;padding:0;list-style:none;}
.lf-payroll-widget-summary li{position:relative;padding-left:27px;color:#E6ECF1;font-size:.76rem;line-height:1.25;}
.lf-payroll-widget-summary li::before{
  content:"✓";
  position:absolute;left:0;top:-2px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#E8B957;color:#0B2338;font-size:.74rem;font-weight:900;
}
.lf-payroll-widget-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:46px;
  padding:11px 14px;
  border-radius:999px;
  background:linear-gradient(180deg,#F0C873,#DFAF52);
  color:#0B2338;
  text-decoration:none;
  font-size:.72rem;
  font-weight:900;
}
.lf-payroll-widget-cta:hover{background:#F1CD7E;}
.lf-payroll-widget-foot{margin:17px 3px 0;color:#AEBCCA;font-size:.67rem;line-height:1.5;}
.lf-payroll-widget-state-kicker{margin:2px 0 12px;color:#E7B657;font-size:.65rem;font-weight:800;letter-spacing:.14em;}
.lf-payroll-review-state,.lf-payroll-package-state{
  min-height:328px;
  padding:16px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:15px;
  background:rgba(7,25,42,.28);
}
.lf-payroll-review-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:12px;
  align-items:center;
  min-height:56px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.lf-payroll-review-row span{color:#D2DCE5;font-size:.8rem;}
.lf-payroll-review-row strong{font-size:.82rem;color:#FFF;}
.lf-payroll-review-row em{padding:5px 8px;border-radius:999px;background:rgba(242,199,107,.12);color:#F2C76B;font-size:.62rem;font-style:normal;font-weight:800;}
.lf-payroll-review-note{margin:14px 0 0;color:#AEBCCA;font-size:.72rem;line-height:1.45;}
.lf-payroll-package-state{display:grid;align-content:start;gap:8px;}
.lf-payroll-package-row{
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:12px;
  align-items:center;
  min-height:58px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:11px;
  background:rgba(255,255,255,.025);
}
.lf-payroll-package-row>span{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#E8B957;color:#0B2338;font-size:.72rem;font-weight:900;}
.lf-payroll-package-row strong{display:block;color:#FFF;font-size:.8rem;}
.lf-payroll-package-row small{display:block;margin-top:3px;color:#AEBCCA;font-size:.66rem;}

/* --------------------------------------------------------------------------
   METHODOLOGY — warm editorial treatment matching the approved reference.
   -------------------------------------------------------------------------- */
.lf-home-methodology{
  position:relative;
  overflow:hidden;
  background:#F7F0E4;
  color:#102D48;
}
.lf-home-methodology::before,
.lf-home-methodology::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.lf-home-methodology::before{
  width:720px;height:720px;left:-340px;top:-330px;
  background:radial-gradient(circle at 56% 58%,rgba(225,183,105,.16) 0 34%,rgba(225,183,105,.075) 35% 55%,transparent 56%);
}
.lf-home-methodology::after{
  width:820px;height:820px;right:-430px;bottom:-390px;
  background:radial-gradient(circle at 40% 42%,rgba(225,183,105,.13) 0 32%,rgba(225,183,105,.055) 33% 56%,transparent 57%);
}
.lf-home-methodology-inner{
  position:relative;
  z-index:1;
  width:min(1240px,90%);
  margin:0 auto;
  padding:92px 0 86px;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(440px,.92fr);
  gap:76px;
  align-items:center;
}
.lf-home-methodology-kicker{
  margin:0 0 16px;
  color:#A8772D;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.18em;
}
.lf-home-methodology h2{
  margin:0 0 24px;
  color:#0E3150;
  font-family:'Bricolage Grotesque','DM Sans',system-ui,sans-serif;
  font-size:clamp(3rem,4.5vw,4.7rem);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.05em;
}
.lf-home-methodology h2 span{display:block;}
.lf-home-methodology-copy>p:not(.lf-home-methodology-kicker){
  max-width:690px;
  margin:0 0 30px;
  color:#445D73;
  font-size:1rem;
  line-height:1.75;
}
.lf-home-methodology-principles{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:28px;
}
.lf-home-methodology-principles article{
  min-height:126px;
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:12px;
  align-content:start;
  padding:21px 18px;
  border:1px solid #DFCDAE;
  border-radius:15px;
  background:rgba(255,252,247,.52);
  box-shadow:0 6px 16px rgba(89,64,28,.025);
}
.lf-home-methodology-principles article>span{
  color:#AA782A;
  font:800 .67rem/1.35 'JetBrains Mono',monospace;
}
.lf-home-methodology-principles h3{margin:0 0 7px;color:#0E3150;font-size:.88rem;font-weight:800;}
.lf-home-methodology-principles p{margin:0;color:#52677A;font-size:.77rem;line-height:1.5;}
.lf-home-methodology-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  padding:13px 20px;
  border:1px solid #D2A955;
  border-radius:999px;
  background:linear-gradient(180deg,#E7C16E,#D6AE59);
  color:#0C2C47;
  text-decoration:none;
  font-size:.8rem;
  font-weight:900;
  box-shadow:0 8px 20px rgba(161,118,44,.14);
}
.lf-home-methodology-cta:hover{background:#EBC97D;}
.lf-home-methodology-cta:focus-visible{outline:3px solid #0E3150;outline-offset:3px;}
.lf-home-methodology-process{
  display:grid;
  gap:10px;
  padding:28px;
  border:1px solid #DCC79F;
  border-radius:24px;
  background:rgba(250,244,234,.7);
  box-shadow:0 20px 45px rgba(81,55,21,.05),inset 0 1px 0 rgba(255,255,255,.74);
}
.lf-home-methodology-process>div{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  grid-template-areas:"num title" "num sub";
  column-gap:15px;
  min-height:73px;
  align-items:center;
  padding:14px 16px;
  border:1px solid #E0D0B5;
  border-radius:13px;
  background:rgba(255,253,249,.67);
}
.lf-home-methodology-process>div span{
  grid-area:num;
  width:38px;height:38px;display:grid;place-items:center;border-radius:10px;
  background:linear-gradient(180deg,#D9AE58,#C99843);
  color:#0E3150;
  font:900 .65rem/1 'JetBrains Mono',monospace;
}
.lf-home-methodology-process>div strong{grid-area:title;align-self:end;color:#0E3150;font-size:.82rem;letter-spacing:.035em;}
.lf-home-methodology-process>div small{grid-area:sub;align-self:start;margin-top:3px;color:#5D7182;font-size:.72rem;}
.lf-home-methodology-process>i{text-align:center;color:#B68534;font-style:normal;font-size:1.35rem;line-height:.8;}
.lf-home-methodology-process>p{margin:8px 0 0;text-align:center;color:#AF7F2F;font-size:.8rem;font-weight:900;letter-spacing:.01em;}

/* --------------------------------------------------------------------------
   U.S. / CANADA resources — split reference composition with faint flags.
   -------------------------------------------------------------------------- */
.lf-payroll-resources{
  overflow:hidden;
  border-top:1px solid #E7DCCB;
  border-bottom:1px solid #E7DCCB;
  background:#F3EDE3;
}
.lf-payroll-resources-inner{
  width:min(1380px,92%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(320px,.9fr);
  gap:34px;
  padding:68px 0 72px;
  align-items:start;
}
.lf-payroll-resource-panel{
  position:relative;
  min-width:0;
  min-height:0;
  padding:0;
  overflow:hidden;
  background:transparent;
}
.lf-payroll-resource-panel>*{position:relative;z-index:2;}
.lf-payroll-resource-us{border-right:0;}
.lf-payroll-resource-us::before,
.lf-payroll-resource-canada::before{content:"";position:absolute;inset:auto;pointer-events:none;background-repeat:no-repeat;opacity:.08;z-index:0;}
.lf-payroll-resource-us::before{top:-22px;left:-32px;width:220px;height:220px;background-image:url('/assets/images/home-us-flag-watermark.svg');background-size:contain;background-position:center;}
.lf-payroll-resource-canada::before{right:-24px;bottom:-6px;width:190px;height:190px;background-image:url('/assets/images/home-canada-flag-watermark.svg');background-size:contain;background-position:center;opacity:.15;}
.lf-payroll-resource-kicker{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 16px;
  color:#A6752D;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.22em;
}
.lf-payroll-resource-kicker::before{content:"";width:28px;height:2px;background:#C5933E;}
.lf-payroll-resource-canada .lf-payroll-resource-kicker{color:#B04450;}
.lf-payroll-resource-canada .lf-payroll-resource-kicker::before{background:#C85F69;}
.lf-payroll-resource-panel h2{
  max-width:680px;
  margin:0 0 14px;
  color:#183150;
  font-family:'Libre Baskerville',Georgia,serif;
  font-size:clamp(2.2rem,3vw,3.35rem);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.04em;
}
.lf-payroll-resource-panel h2 span{display:block;}
.lf-payroll-resource-panel h2 .lf-canada-red{color:#B13A47;}
.lf-payroll-resource-panel>p,.lf-payroll-resource-canada-content>p{
  max-width:680px;
  margin:0 0 18px;
  color:#5E6770;
  font-size:1rem;
  line-height:1.7;
}
.lf-payroll-jurisdiction-grid{
  position:relative;
  z-index:2;
  display:grid;
  gap:10px;
  margin:22px 0 22px;
}
.lf-payroll-state-grid{grid-template-columns:repeat(9,minmax(0,1fr));max-width:780px;}
.lf-payroll-canada-grid{grid-template-columns:repeat(5,minmax(0,1fr));max-width:none;}
.lf-payroll-jurisdiction-grid a{
  min-height:42px;
  display:grid;
  place-items:center;
  padding:7px 6px;
  border:1px solid #D8CEC0;
  border-radius:8px;
  background:#fff;
  color:#5A6168;
  box-shadow:none;
  text-decoration:none;
  font-size:.9rem;
  font-weight:800;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.lf-payroll-resource-us .lf-payroll-jurisdiction-grid a:hover,
.lf-payroll-resource-us .lf-payroll-jurisdiction-grid a:focus-visible{
  background:#183150;
  color:#F2C66A;
  border-color:#183150;
  box-shadow:0 8px 16px rgba(24,49,80,.12);
  outline:none;
  transform:translateY(-1px);
}
.lf-payroll-resource-canada .lf-payroll-jurisdiction-grid a:hover,
.lf-payroll-resource-canada .lf-payroll-jurisdiction-grid a:focus-visible{
  background:#B13A47;
  color:#FFF;
  border-color:#B13A47;
  box-shadow:0 8px 16px rgba(177,58,71,.12);
  outline:none;
  transform:translateY(-1px);
}
.lf-payroll-jurisdiction-grid a:focus-visible{outline:3px solid #D9AD57!important;outline-offset:2px!important;}
.lf-payroll-resource-cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:50px;
  padding:13px 24px;
  border:1px solid #D2A34C;
  border-radius:999px;
  background:linear-gradient(180deg,#E8C06C,#D7AC55);
  color:#0C3150;
  text-decoration:none;
  font-size:.92rem;
  font-weight:900;
  box-shadow:0 8px 18px rgba(161,118,44,.12);
}
.lf-payroll-resource-cta:hover{background:#EFCB7C;}
.lf-payroll-resource-cta:focus-visible{outline:3px solid #0E3150;outline-offset:3px;}
.lf-payroll-resource-canada{
  min-height:0;
  padding:28px 34px 30px;
  border:1px solid #DBCDBE;
  border-top:3px solid #B13A47;
  border-radius:18px;
  background:#FFFDF9;
  box-shadow:0 16px 32px rgba(33,46,61,.05);
}
.lf-payroll-resource-canada-content{position:relative;z-index:2;}
.lf-payroll-canada-art{display:none!important;}

/* Navigation anchor targets added to the existing Bookkeepers page should clear the sticky header. */
.lf-nav-anchor{scroll-margin-top:96px;}

/* --------------------------------------------------------------------------
   Responsive reflow: preserve hierarchy instead of shrinking desktop layouts.
   -------------------------------------------------------------------------- */
@media (max-width:1200px){
  body.lf-sitewide .lf-payroll-hero .hero-content{grid-template-columns:minmax(0,.86fr) minmax(520px,1.14fr);gap:34px;}
  body.lf-sitewide .lf-payroll-hero .hero-headline{font-size:clamp(3.55rem,5.7vw,5rem);}
  .lf-payroll-hero-assurance li{min-width:220px;padding-right:20px;}
  .lf-payroll-hero-assurance li+li{margin-left:20px;padding-left:20px;}
  .lf-payroll-employee{grid-template-columns:36px minmax(85px,1.1fr) .65fr .75fr 14px;gap:8px;padding-left:10px;padding-right:10px;}
  .lf-home-methodology-inner{grid-template-columns:minmax(0,1fr) minmax(390px,.9fr);gap:46px;}
  .lf-payroll-resource-panel h2{font-size:clamp(2.2rem,3.5vw,3.1rem);}
  .lf-payroll-jurisdiction-grid{gap:8px;}
  .lf-payroll-state-grid{grid-template-columns:repeat(7,minmax(0,1fr));}
}

@media (max-width:1023px){
  body.lf-sitewide .video-hero.lf-payroll-hero{min-height:0;}
  body.lf-sitewide .lf-payroll-hero .hero-content{grid-template-columns:1fr;gap:40px;padding-top:120px;padding-bottom:70px;}
  body.lf-sitewide .lf-payroll-hero .hero-left{max-width:760px;}
  .lf-payroll-widget{max-width:760px;justify-self:start;}
  .lf-home-methodology-inner{grid-template-columns:1fr;gap:42px;padding:74px 0;}
  .lf-home-methodology-copy{max-width:760px;}
  .lf-home-methodology-process{max-width:720px;}
  .lf-payroll-resources-inner{grid-template-columns:1fr;gap:28px;padding:56px 0 60px;}
  .lf-payroll-resource-us{padding:0;}
  .lf-payroll-resource-canada{min-height:0;padding:28px 28px 30px;}
  .lf-payroll-state-grid{grid-template-columns:repeat(7,minmax(0,1fr));}
  .lf-payroll-canada-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
}
@media (max-width:720px){
  body.lf-sitewide .lf-payroll-hero .hero-content{width:min(92%,680px);padding-top:104px;padding-bottom:54px;gap:34px;}
  body.lf-sitewide .lf-payroll-hero .lf-eyebrow{margin-bottom:14px;font-size:.67rem;letter-spacing:.09em;}
  body.lf-sitewide .lf-payroll-hero .hero-headline{margin-bottom:20px;font-size:clamp(3rem,13vw,4.3rem);line-height:1;}
  body.lf-sitewide .lf-payroll-hero .hero-sub{font-size:1rem;line-height:1.58;}
  .lf-hero-copy-break{display:none;}
  body.lf-sitewide .lf-payroll-hero .hero-ctas{align-items:stretch;display:grid;grid-template-columns:1fr;margin-bottom:30px;}
  body.lf-sitewide .lf-payroll-hero .hero-ctas a{justify-content:center;min-height:54px;}
  .lf-payroll-hero-assurance{display:grid;grid-template-columns:1fr;gap:16px;}
  .lf-payroll-hero-assurance li{min-width:0;padding:0;}
  .lf-payroll-hero-assurance li+li{margin:0;padding:16px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.2);}
  .lf-payroll-widget{border-radius:17px;}
  .lf-payroll-widget-tabs{margin:16px 14px 0;padding-bottom:12px;grid-template-columns:1.25fr .9fr .9fr;}
  .lf-payroll-widget-tab{gap:6px;padding-right:6px;font-size:.72rem;}
  .lf-payroll-widget-tab span{width:30px;height:30px;flex-basis:30px;font-size:.72rem;}
  .lf-payroll-widget-tab::after{bottom:-13px;right:8px;}
  .lf-payroll-widget-panel{grid-template-columns:1fr;gap:18px;padding:14px;}
  .lf-payroll-widget-summary{padding:18px 4px 4px;border-left:0;border-top:1px solid rgba(255,255,255,.14);}
  .lf-payroll-widget-summary ul{grid-template-columns:1fr 1fr;gap:11px 8px;}
  .lf-payroll-employee-list{border-radius:12px;}
  .lf-payroll-employee{grid-template-columns:36px minmax(0,1fr) auto 14px;}
  .lf-payroll-employee>span:not(.lf-payroll-avatar){display:none;}
  .lf-payroll-employee b{text-align:right;}
  .lf-payroll-widget-foot br{display:none;}
  .lf-payroll-review-state,.lf-payroll-package-state{min-height:0;}
  .lf-home-methodology-inner{width:min(92%,680px);padding:62px 0;}
  .lf-home-methodology h2{font-size:clamp(2.55rem,11vw,3.6rem);}
  .lf-home-methodology-principles{grid-template-columns:1fr;}
  .lf-home-methodology-principles article{min-height:0;}
  .lf-home-methodology-process{padding:18px;border-radius:19px;}
  .lf-payroll-resources-inner{width:min(92%,680px);padding:46px 0 52px;}
  .lf-payroll-resource-panel h2{font-size:clamp(2.15rem,10vw,3rem);}
  .lf-payroll-resource-panel>p,.lf-payroll-resource-canada-content>p{font-size:.96rem;}
  .lf-payroll-state-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
  .lf-payroll-canada-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .lf-payroll-jurisdiction-grid a{min-height:44px;font-size:.84rem;}
  .lf-payroll-resource-canada{padding:24px 22px 26px;border-radius:16px;}
  .lf-payroll-resource-us::before{width:170px;height:170px;left:-14px;top:-8px;}
  .lf-payroll-resource-canada::before{width:150px;height:150px;right:-20px;bottom:-10px;}
}
@media (max-width:440px){
  .lf-payroll-widget-tab strong{font-size:.67rem;}
  .lf-payroll-employee{grid-template-columns:34px minmax(0,1fr) auto;}
  .lf-payroll-employee i{display:none;}
  .lf-payroll-widget-summary ul{grid-template-columns:1fr;}
  .lf-payroll-review-row{grid-template-columns:minmax(0,1fr) auto;}
  .lf-payroll-review-row em{display:none;}
  .lf-payroll-state-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .lf-payroll-canada-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .lf-payroll-resource-kicker{gap:10px;font-size:.65rem;letter-spacing:.15em;}
  .lf-payroll-resource-kicker::before{width:38px;}
}
@media (prefers-reduced-motion:reduce){
  .lf-payroll-widget-tab,
  .lf-payroll-employee,
  .lf-payroll-employee i,
  .lf-payroll-jurisdiction-grid a,
  .lf-payroll-hero .hero-ctas a{transition:none!important;animation:none!important;}
}

/* --------------------------------------------------------------------------
   V10.2.26 — founder-approved homepage hero composition + widget relocation.
   The supplied hero media remains at the canonical four hero asset paths.
   -------------------------------------------------------------------------- */
body.lf-sitewide .video-hero.lf-payroll-hero.lf-home-hero-v10226{
  min-height:848px;
  display:block;
  background:#061a2b;
  isolation:isolate;
}
body.lf-sitewide .lf-home-hero-v10226 .hero-video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  opacity:1;
  filter:none;
}
body.lf-sitewide .lf-home-hero-v10226 .hero-overlay{
  z-index:1;
  background:
    linear-gradient(180deg,rgba(2,12,22,.05) 0%,rgba(2,13,24,.11) 62%,rgba(2,10,18,.58) 100%),
    linear-gradient(90deg,rgba(4,18,31,.44) 0%,rgba(5,22,38,.65) 27%,rgba(5,23,40,.72) 50%,rgba(5,23,40,.65) 73%,rgba(4,18,31,.34) 100%);
}
.lf-home-hero-v10226 .lf-hero-stage{
  position:relative;
  z-index:3;
  width:min(1440px,calc(100% - 72px));
  min-height:710px;
  margin:0 auto;
  padding:82px 0 174px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:minmax(210px,250px) minmax(620px,820px) minmax(210px,250px);
  gap:clamp(28px,3vw,52px);
  align-items:center;
  justify-content:center;
}
body.lf-sitewide .lf-home-hero-v10226 .hero-left.lf-hero-main-copy{
  width:100%;
  max-width:820px;
  align-self:center;
  justify-self:center;
  text-align:center;
  overflow:visible;
  transform:translateY(28px);
}
body.lf-sitewide .lf-home-hero-v10226 .lf-eyebrow{
  margin:0 0 25px;
  color:#f0bd58;
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:clamp(.76rem,.9vw,.92rem);
  font-weight:700;
  letter-spacing:.16em;
  line-height:1.2;
  text-align:center;
}
body.lf-sitewide .lf-home-hero-v10226 .hero-headline{
  max-width:none;
  margin:0;
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:clamp(4.7rem,6.4vw,6.4rem);
  font-weight:800;
  line-height:.93;
  letter-spacing:-.055em;
  text-align:center;
  text-shadow:0 4px 32px rgba(0,0,0,.34);
}
body.lf-sitewide .lf-home-hero-v10226 .hero-headline span{display:block;}
body.lf-sitewide .lf-home-hero-v10226 .hero-headline .lf-hero-title-ivory{color:#fffaf1;}
body.lf-sitewide .lf-home-hero-v10226 .hero-headline .lf-hero-title-gold{color:#efb94e;margin-top:8px;}
body.lf-sitewide .lf-home-hero-v10226 .hero-sub{
  max-width:760px;
  margin:27px auto 0;
  color:rgba(255,255,255,.94);
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:clamp(1.04rem,1.35vw,1.28rem);
  font-weight:400;
  line-height:1.52;
  text-align:center;
}
body.lf-sitewide .lf-home-hero-v10226 .hero-ctas{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  margin:33px 0 0;
}
body.lf-sitewide .lf-home-hero-v10226 .hero-ctas a{
  width:280px;
  min-height:67px;
  box-sizing:border-box;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:17px 30px;
  border-radius:999px;
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:1.03rem;
  font-weight:700;
}
body.lf-sitewide .lf-home-hero-v10226 .btn-primary{
  border:1px solid #efbd5c;
  background:linear-gradient(180deg,#f2c86f 0%,#e1ad4f 100%);
  color:#071a2c;
  box-shadow:0 11px 30px rgba(0,0,0,.25);
}
body.lf-sitewide .lf-home-hero-v10226 .btn-primary:hover{background:#f3cc79;}
body.lf-sitewide .lf-home-hero-v10226 .btn-outline-white{
  border:1.5px solid rgba(255,255,255,.78);
  background:rgba(6,25,42,.34);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
body.lf-sitewide .lf-home-hero-v10226 .btn-outline-white:hover{
  border-color:#f0bd58;
  background:rgba(8,31,51,.58);
  color:#fff;
}
.lf-home-hero-v10226 .lf-hero-float{
  width:220px;
  min-height:92px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:15px;
  align-items:center;
  padding:17px 20px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:18px;
  background:linear-gradient(120deg,rgba(7,29,48,.66),rgba(13,38,58,.42));
  color:#fff;
  box-shadow:0 18px 44px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.lf-home-hero-v10226 .lf-hero-float--left{justify-self:start;transform:translate(55px,-68px);}
.lf-home-hero-v10226 .lf-hero-float-stack{
  display:grid;
  gap:138px;
  justify-items:end;
  align-self:center;
  transform:translateY(9px);
}
.lf-home-hero-v10226 .lf-hero-float-icon{
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  color:#efb94e;
}
.lf-home-hero-v10226 .lf-hero-float-icon svg{width:42px;height:42px;}

@keyframes lfHeroFloatIconGlimmer{
  0%,20%,100%{
    color:#efb94e;
    filter:drop-shadow(0 0 0 rgba(255,216,122,0));
    transform:scale(1);
  }
  8%{
    color:#ffe19a;
    filter:drop-shadow(0 0 6px rgba(255,215,112,.92)) drop-shadow(0 0 13px rgba(239,185,78,.42));
    transform:scale(1.045);
  }
  14%{
    color:#f7c968;
    filter:drop-shadow(0 0 4px rgba(255,220,137,.58));
    transform:scale(1.015);
  }
}
.lf-home-hero-v10226 .lf-hero-float-icon{
  animation:lfHeroFloatIconGlimmer 6s ease-in-out infinite;
  transform-origin:center;
}
.lf-home-hero-v10226 .lf-hero-float--left .lf-hero-float-icon{animation-delay:0s;}
.lf-home-hero-v10226 .lf-hero-float--records .lf-hero-float-icon{animation-delay:2s;}
.lf-home-hero-v10226 .lf-hero-float--trusted .lf-hero-float-icon{animation-delay:4s;}
.lf-home-hero-v10226 .lf-hero-float strong,
.lf-home-hero-v10226 .lf-hero-float small{
  display:block;
  font-family:'DM Sans',system-ui,sans-serif;
  color:#fff;
  line-height:1.2;
}
.lf-home-hero-v10226 .lf-hero-float strong{font-size:1rem;font-weight:700;}
.lf-home-hero-v10226 .lf-hero-float small{margin-top:5px;font-size:1rem;font-weight:500;}
.lf-home-hero-v10226 .lf-hero-benefits{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:80px;
  width:min(1090px,calc(100% - 96px));
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center;
}
.lf-home-hero-v10226 .lf-hero-benefit{
  min-width:0;
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:18px;
  align-items:center;
  padding:0 38px;
}
.lf-home-hero-v10226 .lf-hero-benefit:first-child{padding-left:0;}
.lf-home-hero-v10226 .lf-hero-benefit:last-child{padding-right:0;}
.lf-home-hero-v10226 .lf-hero-benefit+.lf-hero-benefit{border-left:1px solid rgba(255,255,255,.26);}
.lf-home-hero-v10226 .lf-hero-benefit-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border:2px solid #eeb94f;
  border-radius:50%;
  color:#eeb94f;
}
.lf-home-hero-v10226 .lf-hero-benefit-icon svg{width:28px;height:28px;}
.lf-home-hero-v10226 .lf-hero-benefit strong,
.lf-home-hero-v10226 .lf-hero-benefit small{
  display:block;
  font-family:'DM Sans',system-ui,sans-serif;
}
.lf-home-hero-v10226 .lf-hero-benefit strong{color:#fff;font-size:1rem;font-weight:700;line-height:1.25;}
.lf-home-hero-v10226 .lf-hero-benefit small{margin-top:6px;color:rgba(255,255,255,.72);font-size:.88rem;line-height:1.25;}
body.lf-sitewide .lf-home-hero-v10226 .lf-hero-video-toggle{display:none!important;}

@media (max-width:1250px){
  .lf-home-hero-v10226 .lf-hero-stage{
    width:min(1180px,calc(100% - 48px));
    grid-template-columns:190px minmax(520px,1fr) 190px;
    gap:22px;
  }
  .lf-home-hero-v10226 .lf-hero-float{width:188px;padding:14px;grid-template-columns:40px minmax(0,1fr);gap:10px;}
  .lf-home-hero-v10226 .lf-hero-float-icon,.lf-home-hero-v10226 .lf-hero-float-icon svg{width:36px;height:36px;}
  .lf-home-hero-v10226 .lf-hero-float strong,.lf-home-hero-v10226 .lf-hero-float small{font-size:.88rem;}
  body.lf-sitewide .lf-home-hero-v10226 .hero-headline{font-size:clamp(4.2rem,7.1vw,5.4rem);}
}

@media (max-width:1023px){
  body.lf-sitewide .video-hero.lf-payroll-hero.lf-home-hero-v10226{min-height:0;}
  .lf-home-hero-v10226 .lf-hero-float,
  .lf-home-hero-v10226 .lf-hero-float-stack{display:none;}
  .lf-home-hero-v10226 .lf-hero-stage{
    width:min(760px,calc(100% - 48px));
    min-height:0;
    padding:118px 0 54px;
    display:block;
  }
  body.lf-sitewide .lf-home-hero-v10226 .hero-left.lf-hero-main-copy{max-width:760px;margin:0 auto;transform:none;}
  body.lf-sitewide .lf-home-hero-v10226 .hero-headline{font-size:clamp(4rem,9vw,5.2rem);}
  .lf-home-hero-v10226 .lf-hero-benefits{
    position:relative;
    left:auto;
    bottom:auto;
    width:min(860px,calc(100% - 48px));
    margin:0 auto;
    transform:none;
    padding:0 0 50px;
  }
  .lf-home-hero-v10226 .lf-hero-benefit{padding:0 24px;grid-template-columns:48px minmax(0,1fr);gap:13px;}
  .lf-home-hero-v10226 .lf-hero-benefit-icon{width:44px;height:44px;}
  .lf-home-hero-v10226 .lf-hero-benefit-icon svg{width:24px;height:24px;}
}

@media (max-width:767px){
  body.lf-sitewide .lf-home-hero-v10226 .hero-overlay{
    background:linear-gradient(180deg,rgba(3,18,31,.58),rgba(3,18,31,.70) 66%,rgba(2,10,18,.82));
  }
  .lf-home-hero-v10226 .lf-hero-stage{width:calc(100% - 36px);padding:102px 0 42px;}
  body.lf-sitewide .lf-home-hero-v10226 .lf-eyebrow{font-size:.68rem;line-height:1.5;letter-spacing:.12em;margin-bottom:18px;}
  body.lf-sitewide .lf-home-hero-v10226 .hero-headline{font-size:clamp(3.2rem,16vw,4.35rem);line-height:.94;}
  body.lf-sitewide .lf-home-hero-v10226 .hero-headline .lf-hero-title-gold{margin-top:7px;}
  body.lf-sitewide .lf-home-hero-v10226 .hero-sub{font-size:.98rem;line-height:1.55;margin-top:22px;}
  .lf-hero-copy-break{display:none;}
  body.lf-sitewide .lf-home-hero-v10226 .hero-ctas{display:grid;grid-template-columns:1fr;gap:12px;margin-top:27px;}
  body.lf-sitewide .lf-home-hero-v10226 .hero-ctas a{width:100%;min-height:56px;font-size:.96rem;}
  .lf-home-hero-v10226 .lf-hero-benefits{width:calc(100% - 36px);grid-template-columns:1fr;padding:0 0 38px;}
  .lf-home-hero-v10226 .lf-hero-benefit{padding:18px 4px;grid-template-columns:48px minmax(0,1fr);}
  .lf-home-hero-v10226 .lf-hero-benefit:first-child{padding-top:8px;}
  .lf-home-hero-v10226 .lf-hero-benefit:last-child{padding-bottom:0;}
  .lf-home-hero-v10226 .lf-hero-benefit+.lf-hero-benefit{border-left:0;border-top:1px solid rgba(255,255,255,.22);}
  .lf-home-hero-v10226 .lf-hero-benefit strong{font-size:.95rem;}
  .lf-home-hero-v10226 .lf-hero-benefit small{font-size:.82rem;}
}

/* The payroll workflow preview now lives in the Bookkeepers repeat-work section. */
body.lf-bookkeepers-v2 .bk-repeat{padding:42px 0;background:linear-gradient(95deg,#fbf8f2,#f7f0e4);}
body.lf-bookkeepers-v2 .bk-repeat-grid{grid-template-columns:minmax(300px,.72fr) minmax(580px,1.28fr);gap:38px;align-items:center;}
body.lf-bookkeepers-v2 .bk-repeat-widget{min-width:0;}
body.lf-bookkeepers-v2 .bk-repeat-widget .lf-payroll-widget{max-width:none;width:100%;justify-self:stretch;}
@media (max-width:1023px){
  body.lf-bookkeepers-v2 .bk-repeat-grid{grid-template-columns:1fr;gap:30px;}
  body.lf-bookkeepers-v2 .bk-repeat-widget .lf-payroll-widget{max-width:760px;}
}

@media (prefers-reduced-motion:reduce){
  .lf-home-hero-v10226 .lf-hero-float-icon{animation:none!important;transform:none!important;filter:none!important;}
}
