/* Calculator hero normalization — /methodology/ color + spacing, time-card two-column format. */
:root{
  --calc-hero-deeper:#06281C;
}

:where(.annualizer-hero,.ytd-hero,.rir-hero,.wot-hero,.bot-hero,.sdc-hero,.rpc-hero,.fpc-hero,.tcr-hero,.cl-hero,.pw-hero){
  position:relative;
  overflow:hidden;
  padding:0!important;
  background:linear-gradient(128deg,var(--calc-hero-deeper) 0%,#0E3712 58%,#172e23 100%)!important;
  color:#fff!important;
  border-bottom:0!important;
}

:where(.annualizer-hero,.ytd-hero,.rir-hero,.wot-hero,.bot-hero,.sdc-hero,.rpc-hero,.fpc-hero,.tcr-hero,.cl-hero,.pw-hero)::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  border:0!important;
  border-radius:0!important;
  background:radial-gradient(circle at 78% 20%,rgba(51,212,132,.20),transparent 29%),radial-gradient(circle at 10% 95%,rgba(243,111,0,.15),transparent 30%)!important;
  pointer-events:none!important;
}

/* Remove legacy decorative circles / half-circles from individual calculator styles. */
:where(.annualizer-hero,.ytd-hero,.rir-hero,.wot-hero,.bot-hero,.sdc-hero,.rpc-hero,.fpc-hero,.tcr-hero,.cl-hero,.pw-hero)::after{
  content:none!important;
  display:none!important;
}

:where(.annualizer-hero-inner,.ytd-hero-inner,.rir-hero-inner,.wot-hero-inner,.bot-hero-inner,.sdc-hero-inner,.rpc-hero-inner,.fpc-hero-inner,.tcr-hero-inner,.cl-hero-inner,.pw-hero-inner){
  position:relative;
  z-index:1;
  width:min(1180px,100%)!important;
  max-width:1180px!important;
  margin:0 auto!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr)!important;
  gap:48px!important;
  align-items:center!important;
  padding:142px 24px 78px!important;
}

:where(.annualizer-example,.ytd-hero-card,.rir-example,.wot-example,.bot-example,.sdc-example,.rpc-example,.fpc-example,.tcr-example){
  align-self:stretch!important;
}

@media(max-width:980px){
  :where(.annualizer-hero-inner,.ytd-hero-inner,.rir-hero-inner,.wot-hero-inner,.bot-hero-inner,.sdc-hero-inner,.rpc-hero-inner,.fpc-hero-inner,.tcr-hero-inner,.cl-hero-inner,.pw-hero-inner){
    grid-template-columns:1fr!important;
    gap:35px!important;
  }
}

@media(max-width:820px){
  :where(.annualizer-hero-inner,.ytd-hero-inner,.rir-hero-inner,.wot-hero-inner,.bot-hero-inner,.sdc-hero-inner,.rpc-hero-inner,.fpc-hero-inner,.tcr-hero-inner,.cl-hero-inner,.pw-hero-inner){
    padding:118px 20px 64px!important;
  }
}


/* Changelog + publisher-widget hero adoption of the calculator hero system. */
:where(.cl-hero,.pw-hero){
  padding:0!important;
}
:where(.cl-hero,.pw-hero)::after{
  content:none!important;
  display:none!important;
}
:where(.cl-hero-inner,.pw-hero-inner){
  width:min(1180px,100%)!important;
  max-width:1180px!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr)!important;
  gap:48px!important;
  align-items:center!important;
  padding-left:24px!important;
  padding-right:24px!important;
}
:where(.cl-status-card,.pw-hero-card){
  align-self:stretch!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:20px!important;
  padding:24px!important;
  background:rgba(255,255,255,.11)!important;
  color:#fff!important;
  box-shadow:0 18px 45px rgba(4,65,43,.22)!important;
  backdrop-filter:blur(6px);
}
.cl-status-card{border-top:1px solid rgba(255,255,255,.18)!important}
.cl-status-card h2,.pw-hero-card h2{color:#fff!important}
.cl-status-grid div{
  background:rgba(255,255,255,.075)!important;
  border:1px solid rgba(255,255,255,.10)!important;
}
.cl-status-grid strong{color:#fff!important}
.cl-status-grid span{color:#dcf2e8!important}
.pw-hero-card>span{color:#ffe5d1!important}
.pw-hero-card li{color:#dcf2e8!important}
.pw-hero-card li b{background:#fff!important;color:#087445!important}

@media(max-width:980px){
  :where(.cl-hero-inner,.pw-hero-inner){
    grid-template-columns:1fr!important;
    gap:35px!important;
  }
  :where(.cl-status-card,.pw-hero-card){max-width:760px!important}
}
@media(max-width:820px){
  :where(.cl-hero-inner,.pw-hero-inner){
    padding-left:20px!important;
    padding-right:20px!important;
  }
}

/* Typography and controls follow the calculator hero reference proportions. */
:where(.cl-kicker,.pw-kicker){
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  margin:0!important;
  color:#d5f4e6!important;
  font:700 12px/1.2 "DM Sans",sans-serif!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
:where(.cl-kicker,.pw-kicker)::before{
  content:""!important;
  width:7px!important;
  height:7px!important;
  border-radius:50%!important;
  background:currentColor!important;
  flex:0 0 auto!important;
}
:where(.cl-hero,.pw-hero) h1{
  margin:14px 0 16px!important;
  max-width:800px!important;
  font:800 clamp(38px,5.2vw,64px)/.98 "Bricolage Grotesque",sans-serif!important;
  letter-spacing:-.045em!important;
  color:#fff!important;
}
.cl-hero-inner>div>p,.pw-hero-copy{
  margin:0!important;
  max-width:780px!important;
  color:rgba(255,255,255,.9)!important;
  font-size:18px!important;
  line-height:1.66!important;
}

/* Pay Stub Review methodology — calculator hero parity. */
.ucc-methodology-hero{
  position:relative!important;
  overflow:hidden!important;
  padding:0!important;
  background:linear-gradient(128deg,#06281C 0%,#0E3712 58%,#172e23 100%)!important;
  color:#fff!important;
  border-bottom:0!important;
}
.ucc-methodology-hero::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:radial-gradient(circle at 78% 20%,rgba(51,212,132,.20),transparent 29%),radial-gradient(circle at 10% 95%,rgba(243,111,0,.15),transparent 30%)!important;
  pointer-events:none!important;
}
.ucc-methodology-hero::after{content:none!important;display:none!important}
.ucc-methodology-hero-inner{
  position:relative!important;
  z-index:1!important;
  width:min(1180px,100%)!important;
  max-width:1180px!important;
  margin:0 auto!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr)!important;
  gap:48px!important;
  align-items:center!important;
  padding:142px 24px 78px!important;
}
.ucc-methodology-hero .ucc-kicker{
  margin:0!important;
  color:#d5f4e6!important;
  letter-spacing:.08em!important;
}
.ucc-methodology-hero .ucc-kicker::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:currentColor;
  flex:0 0 auto;
}
.ucc-methodology-hero h1{
  margin:14px 0 16px!important;
  max-width:800px!important;
  font:800 clamp(38px,5.2vw,64px)/.98 "Bricolage Grotesque",sans-serif!important;
  letter-spacing:-.045em!important;
  color:#fff!important;
}
.ucc-methodology-hero p{
  margin:0!important;
  max-width:780px!important;
  color:rgba(255,255,255,.9)!important;
  font-size:18px!important;
  line-height:1.66!important;
}
.ucc-methodology-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ucc-methodology-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 18px;
  border-radius:12px;
  font:700 15px/1 "DM Sans",sans-serif;
  text-decoration:none;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.ucc-methodology-btn:hover{transform:translateY(-1px)}
.ucc-methodology-btn-primary{background:#f37016;color:#fff;border:1px solid #f37016}
.ucc-methodology-btn-primary:hover{background:#df6410;border-color:#df6410;color:#fff}
.ucc-methodology-btn-secondary{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.32);color:#fff}
.ucc-methodology-btn-secondary:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.48);color:#fff}
.ucc-methodology-summary{
  align-self:stretch!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:20px!important;
  padding:24px!important;
  background:rgba(255,255,255,.11)!important;
  color:#fff!important;
  box-shadow:0 18px 45px rgba(4,65,43,.22)!important;
  backdrop-filter:blur(6px);
}
.ucc-methodology-summary-label{
  display:inline-flex;
  align-self:flex-start;
  margin-bottom:14px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#ffe5d1;
  font:700 11px/1 "DM Sans",sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.ucc-methodology-summary h2{margin:0 0 18px;color:#fff;font:800 26px/1.08 "Bricolage Grotesque",sans-serif}
.ucc-methodology-summary-row{display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-top:1px solid rgba(255,255,255,.14);color:#dcf2e8;font-size:14px}
.ucc-methodology-summary-row strong{color:#fff;text-align:right}
@media(max-width:980px){
  .ucc-methodology-hero-inner{grid-template-columns:1fr!important;gap:35px!important}
  .ucc-methodology-summary{max-width:760px!important}
}
@media(max-width:820px){
  .ucc-methodology-hero-inner{padding:118px 20px 64px!important}
  .ucc-methodology-hero h1{font-size:clamp(38px,11vw,54px)!important}
}