
#contentwrapper{border-top: solid 1px #003A8B;background-color: #E5F3FC;  font-family: "Open Sans", sans-serif; font-weight: 500;  margin: -20px auto -200px auto; position: relative; }

		body{background-color: #E5F3FC;}
		
		header{position: relative; margin-top: -16px}
		.wave2{background: url(https://www.lafcu.com/templates/lafcu_landing_2025/images/CommunityWave2.png) center center #E5F3FC; height: 119px; z-index: 99;position: relative; margin-top: 40px}
		footer{background: transparent !important;}

		article.inside {width: 100%;}
		.upto{font-size: 14px;  font-stretch: normal;  line-height: 1.26;  letter-spacing: 0.14px;}

		a.homelink{height: 141px !important;  top: 20px; display: flex;  justify-content: center;  align-items: center;}


		.notlogo,  header .wave1{display: none;}

		h1{font-size: 45.3px; line-height: 1;  letter-spacing: -0.91px; font-weight: 800;text-shadow: none;  font-weight: 800; margin: 0; padding: .3rem  0 0 0; }
		h1 .br2{display: none;}


		h2{font-size: 34px; line-height: 1.5; font-weight: 800; color: black; margin: 0; padding:  0; line-height: 1.25;  letter-spacing: -0.91px;}
		h2.d1{ color: #0055a5; font-size: 25px;padding: 1rem 0 14px 0}
		h2 span{ color: #0055a5}

		h3{font-size: 25px;  font-weight: 800;}
		

		section.inside, article {background: none transparent !important; }

		section.inside{margin-bottom: -160px}

		@media only screen and (max-width: 1200px) {
			h1{font-size: 42px;}
			h2{font-size: 30px; }
			h2.d1{font-size: 20px;}
			.hero-left{padding-right: 40px; }
		}

		@media only screen and (max-width: 992px) {
			h1{font-size: 30px; padding: .3rem 0 0 0}
			h1 .br1{display: none;}
			h1 .br2{display: inline;}
			h2{font-size: 30px;  }
			h2.d1{font-size: 18px;}

			h3{font-size: 18px;  font-weight: 800;}

			body{background-color: #E5F3FC;}
			.wave2{ margin:0 0 40px 0}
		}


		/* hero banner */
		.landing-banner { width: 100%;  background: linear-gradient(100deg, rgba(5,24,63,1) 0%,rgba(0,85,165,1) 37%,rgba(0,85,165,1) 68%,rgba(5,24,63,1) 100%); padding: 120px 30px 0 30px; position: relative; top: -110px; z-index: 1; max-width: 2100px; margin: 0 auto -70px auto}
		.landing-banner .dropin-wave, .landing-banner .dropin-waveM{ background: url(https://www.lafcu.com/templates/lafcu_landing_2025/images/CommunityWave1.png) center center ; width: 100%;height: 124px;  z-index: 99;position: absolute; bottom: -68px; right: 0; z-index: 99}
		.landing-banner .dropin-waveM{display: none;}

		article.inside .liner h2.d1:first-child{padding-top: 3rem}

		img.ydy{max-width: 100%; width: 290px }
	
		.couple{ width: 673px; margin: -450px 0 30px -72px; position: relative; z-index: 1 }
		.couple img, .coupleM img{width: 100%;}
		.coupleM{display: none; }

		.landing-banner .contain{ max-width: 1170px; width: 100%; margin: 0 auto; width: 100%; position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; color: white;}
		.hero-left, .hero-right{border: solid 0px yellow; text-align: left; font-size: 18px; line-height: 1.5}
		.hero-left{flex: 1 1 calc(55% - 15px); width: calc(55% - 15px); padding-right: 140px; font-size: 17.6px; font-weight: 500; line-height: 1.57;  letter-spacing: -0.35px;}
		.hero-right{max-width: 480px;flex: 1 1 calc(45% - 15px); width: calc(45% - 15px); }

		.rate_capsule{  font-family: "Open Sans", sans-serif;  font-weight: 800; font-size: 20px; color: white; background-color: #006aac; padding: 3px 0px; border-radius: 10px; display: inline-block; width: 290px; text-align: center; letter-spacing: 1px}
		.hero-left p{margin: 0; padding: 1rem 0 0 0}

		
		.flexrates{ display: flex; justify-content: space-between; gap: 20px; margin: 2rem 0 0 0; width: 100%;}
		.FRbox{text-align: center;font-size: 16px}
		.FRrate{color: white;font-weight: 800; font-size: 40px; font-family: "Open Sans", sans-serif; line-height: 1; padding: 5px 0 }
		.FRrate.diff{padding: 5px 0 }

		@media only screen and (max-width: 1400px) {
			.hero-left{padding-right: 30px;}
			.couple{ width: 100%; max-width: 55%; margin: -450px 0 30px 0;  }
		}

		@media only screen and (max-width: 1200px) {
			.couple{ margin: -420px 0 0px 0;  }
		}
		@media only screen and (max-width: 1120px) {
			.couple{ margin: -380px 0 0px 0;  }
		}

			@media only screen and (max-width: 1010px) {
			.couple{ margin: -360px 0 0px 0;  }
		}

		@media only screen and (max-width: 992px) {
			article.inside .liner h2.d1:first-child{0}
			.landing-banner { background: linear-gradient(to bottom, rgba(5,24,63,1) 0%,rgba(0,85,165,1) 37%,rgba(0,85,165,1) 60%,rgba(5,24,63,1) 100%); text-align: center;padding-bottom: 70px}
			.landing-banner .contain{border: solid 0px orange; display: block;top: 0px;}
			.hero-left, .hero-right{ border: solid 0px yellow;font-size: 16px; width: 100%; max-width: 480px; margin: 0 auto;}
			.hero-left{padding-right: 0px; }

			.couple{display: none; }
			.coupleM{display: block; max-width: 559px; width: 559px; margin: 2rem 0 0 0; position: relative; z-index: 1; left: -40px }
			.coupleM img{width: 559px; max-width: 559px; }

			.landing-banner .dropin-wave{/*display: none */}
			.landing-banner .dropin-waveM{display: block; z-index: 99;position: relative; bottom: 0; right: 30px; width: calc(100% + 60px); margin: -30px 0 -60px 0; background-position: -400px center ; }




			.iphone .landing-banner .dropin-wave{ bottom: 660px;}

			.calc-card {margin: 0 auto !important; }
			.hero-right{ padding: 80px 0 50px 0;}

			img.ydy{max-width: 100%; width: 240px }
			.rate_capsule{width: 240px; font-size: 16px; padding: 3px 0 }
		}

		@media only screen and (max-width: 600px) {
			.coupleM{ max-width: 100%; width: 100%; left: 0px }
			.coupleM img{width: 100%; max-width: 100%; }
		}

		@media only screen and (max-width: 460px) {
			.FRbox{font-size: 14px}
			.FRrate{ font-size: 7vw;  }
		}


		/****************
		- Blue: #0055a5
		- Cyan: #69c1fc
		- Dark Blue: #003563
		- Light Blue: #c3e6fe
		- Black: #333333
		********************/


		/* small boxes */
		.flexboxes{display:flex; justify-content: space-between; gap: 20px; margin: 2rem 0 4rem 0; flex-wrap: wrap}
		.flexboxes .whtbx{padding: 20px; flex: 1 1 calc(33.33% - 20px); margin: 0; max-width: calc(33.33% - 20px);}
		.flexboxes .whtbx h3{font-size: 18px;}

		@media only screen and (max-width: 920px) {
			.flexboxes .whtbx{ flex: 1 1 calc(50% - 10px); min-width: calc(50% - 10px);max-width: calc(50% - 10px);}

		}
		@media only screen and (max-width: 700px) {
			.flexboxes .whtbx{ flex: 1 1 100%; min-width: calc(50% - 10px);max-width: 100%;}
			.whtbx h3 br{display: none;}

		}



		/* large boxes */
		.whtbx, .blubx{background-color:white; border: solid 1.5px #0055a5; padding: 30px 40px; border-radius: 20px; text-align: left; margin: 5rem 0}
		.whtbx p, .blubx p{margin: 0; padding: .5rem 0}
		.blubx{color:white; background-color: #0055a5;}
		.whtbx h3, .blubx h3{font-size: 24px; color: black; line-height: 1.25; padding: 0; margin: 0}
		.blubx h3{color: white;}

		.flexbx{display:flex; /*flex-wrap: wrap;*/ justify-content: space-between;  align-items: center;}
		
		.joinbox.whtbx{border-left: solid 5px #0055a5;}
		.joinbox .flexbx div{width: 180px}
		.joinbox .flexbx div:first-child{flex: 1 1; padding-right: 110px;}

		.joinbox a.calc-cta-btn{width: 160px;}
		.joinbox{font-size: 18px;  font-weight: bold;  line-height: 1.28;}
		.joinbox p span{color: #0054a4}

		.Qbox .flexbx div{ border: solid 0px fuchsia;flex 1 1; max-width: 44%;}
		.Qbox .flexbx div:first-child{max-width: 60%; min-width: 56%}

		ul.checked{padding: 0; margin: 0; list-style: none;}
		ul.checked li{padding: 0 0 1rem 30px; margin: 0; list-style: none; line-height: 1.25; position: relative; }
		ul.checked li:before{content: url(https://www.lafcu.com/files/lafcu/1/image/LandingPages/AutoRefiJuly2026/7_Check.svg); width: 26px !important; height: 100%; position: absolute;  left: 0; top: 0px; }

		.linkbox .flexbx div{}
		.linkbox .flexbx div:first-child{ padding-right: 290px; }
		.linkbox .flexbx div:last-child{ max-width: 212px; min-width: 212px; }

		.mmbrbox{}
		.mmbrbox .flexbx div:first-child{ padding-right: 290px; }
		.mmbrbox .flexbx div:last-child{ max-width: 212px; min-width: 212px; }

		.flexhead{display:flex;  gap: 10px;}
		h3.d1{font-size: 18px; color: #0055a5}

		.flexhead div{}
		.flexhead div img{width: 44px}

		@media only screen and (max-width: 1200px) {
			.joinbox .flexbx div:first-child, .linkbox .flexbx div:first-child, .mmbrbox .flexbx div:first-child{ padding-right: 90px; }
			.Qbox h3 br{display: none;}

		}

		@media only screen and (max-width: 992px) {
			article{ border: solid 0px orange; max-width: 540px; margin: 0 auto; padding: 60px 26px;}
			article .liner{border: solid 0px fuchsia; padding: 0 }
			.flexbx{display: block;}

			.flexbx div, .joinbox .flexbx div:first-child, .linkbox .flexbx div:first-child, .mmbrbox .flexbx div:first-child{ padding-right: 0px; }
			.flexbx div, .joinbox .flexbx div, .Qbox .flexbx div, .Qbox .flexbx div:first-child, .linkbox .flexbx div:last-child, .mmbrbox .flexbx div:first-child, .mmbrbox .flexbx div:last-child{ max-width: 100%; min-width: 100%; width: 100% }

			.joinbox .flexbx div:nth-child(2), .joinbox .flexbx div:last-child{ display: inline-block; max-width: auto; min-width: 1px; width: auto; padding-right: 5px; }
			
			ul.checked{padding: 1rem 0 0 0; }

			.blubx h3{text-align: center;}


	
		}

		/* FAQS */

		.FAQS{ border: solid 1.5px #0055a5; border-radius: 20px; text-align: left; overflow: hidden; margin-top: 40px;}
		.faq{text-align: left; border-bottom:  solid 1.5px #0055a5;}
		.FAQS .faq:nth-child(odd){background-color:white; }
		.FAQS .faq:last-child{border: 0}
		button.Q{padding: 24px 38px; width: 100%; text-align: left;font-size: 18px;  font-weight: bold;  line-height: 1.56; color: black;}
		button.Q:after{content: '\f077'; font-family: 'Font Awesome 6 Pro'; font-weight: 400; position: relative; float: right; transition: all .25s; transform: rotate(180deg);}
		.A{display: none;padding: 0 38px 24px 38px; width: 100%}
		button.Q:hover, button.Q:focus{color: #0055a5;}
		button.Q.opened:after { transform: rotate(0deg);}





		.calc-cta-btn.call {background: transparent; color: white; border: 2px solid #69c1fc; }
		.calc-cta-btn.call:hover, .calc-cta-btn.call:focus  { transform: scale(1.02); color: #69c1fc}
		.calc-cta-btn.bluer {background-color: #0055a5; color: white; border: 2px solid #0055a5;display: inline-block; width: 100% }
		.calc-cta-btn.bluer:hover, .calc-cta-btn.bluer:focus { transform: scale(1.02); color: white; }
		.calc-cta-btn:hover, .calc-cta-btn:focus{text-decoration: none;}

		/*.calc-cta-label br{display: none}*/

		.armbar{width: 100%; display: flex; flex-wrap: wrap; margin-top: 1rem }
		.armbar1, .armbar3{width: 33%; text-align: center;  }
		.armbar2, .armbar4{width: 64%;  text-align: center; }
		.armbar1, .armbar2{  font-family: "Open Sans", sans-serif;   font-weight: 800;padding: 5px;  display: flex;  justify-content: center;  align-items: center;}
		.armbar1{background-color: #0055a5; color: white; border-radius: 5px 0 0 5px;}
		.armbar2{background-color: #c8d4e2; color: #44577E;  border-radius: 0 5px 5px 0;}
		.armbar br{display: none;}
		.armbar3, .armbar4{font-size: 14px; line-height: 1.15; padding: 5px;}


		 .blubx  .calc-cta-btn.apply { background-color: white; color: var(--blue); border: 2px solid var(--blue-light); }
		.blubx  .calc-cta-btn.apply:hover { background-color: white; color: var(--blue); transform: scale(1.02); }


		/* comparison table */
		table.Tcomp{width: 100%;border: solid 1px #002353; border-radius: 20px; background-color: #daefff; margin: .5rem 0 0 0; border-collapse: separate; overflow: hidden;border-spacing: 0; position: relative; position: relative; z-index: 90 }
		table.Tcomp td, table.Tcomp th{text-align: center; padding: 20px 25px; font-size: 19px;  font-weight: 700; line-height: 1.25}
		.notbold{ font-weight: 500}
		table.Tcomp th{font-size: 25px;  font-weight: 800;position: relative; width: 50%; padding: 35px 25px 25px 25px;}
		.Trate{font-size:  40px;;  font-weight: 800; padding: 0px 0 0px 0;}
		.Trate.samller{font-size: 36px;}
		.Tsmall{font-size: 14px;  font-weight: 500; padding-top: 10px}

		table.Tcomp tr td:last-child, table.Tcomp tr th:last-child{background-image: linear-gradient(to left, #1b4a9b 0%, #002353 100%); color: white; border-bottom: solid 1px white}
		table.Tcomp tr td:first-child, table.Tcomp tr th{border-bottom: solid 1px #002353;}

		table.Tcomp tr:last-child td:last-child, table.Tcomp tr:last-child td:first-child{border: 0;}

		table.Tcomp tr:first-child th:first-child{background-color: #6ac0fb;}


		.yellowpill{ height: 44px;width: 160px;  border-radius: 18px;  background-color: #ffc000; color:  #002353;position: relative; top: 30px; left: calc(50% + (25% - 78px)); border: 0;   display: flex;  justify-content: center;  align-items: center;font-size: 19.5px;  font-weight: 800; text-decoration: none; z-index: 99}

		.disc{font-size: 14px; margin: 1rem 0 5rem 0; line-height: 1.15}

		@media only screen and (max-width: 700px) {
			table.Tcomp td, table.Tcomp th{ font-size: 13px; padding: 20px; }
		table.Tcomp th{ padding: 35px 20px 25px 20px;}
			table.Tcomp th{font-size: 14px; }
			.Trate{font-size:  36px;}
			.yellowpill{font-size: 16px;  }
			.Trate.smaller{font-size: 24px;}

		}

		/* numbers */
		.Nboxes{display:flex; justify-content: space-between; gap: 20px; margin: 2rem 0 3rem 0; flex-wrap: wrap; position: relative;}
		.Nline{width: 66%; height: 1px; border-top: solid 2px  #61798f; position: absolute; top: 32px; right: 17%; z-index: 10}
		.Nbox{text-align: center;font-size: 17px; line-height: 1.75; flex: 1 1; width: calc(25% - 15px); position: relative;  z-index: 99}
		.Nnumber{font-size: 24px; font-weight: 900; color: white;  width: 60px;  height: 60px;  background-color: #0057ab; border-radius: 50%; border: solid 8px #EAF3FB;display: flex;  justify-content: center;  align-items: center; margin: 0 auto 1rem auto;}
		.Nhead{font-size: 20px;  font-weight: 800; color: black;}

		@media only screen and (max-width: 992px) {
			.Nboxes{ gap: 20px 30px; max-width: 480px; margin: 1.5rem auto 0 auto;}
			.Nline{display: none;}
			.Nbox{ width: 100%;flex: 1 1 100%;}

		}

/** C A L C U L A T O R **/

  :root {
    --blue:       #04519f;
    --blue-dark:  #03407e;
    --blue-light: #76bde9;
    --blue-pale:  #e8f3fb;
    --white:      #ffffff;
    --gray-100:   #eef2f7;
    --gray-500:   #4a5f75;
    --gray-900:   #1a2533;
  }


  .calc-card {
    background: var(--white);
    border-radius: 20px;
    padding: 36px 32px 24px;
    box-shadow: 0 24px 64px rgba(4,81,159,0.18);
    width: 100%;
    max-width: 480px;
  }

  .calc-headline {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--blue);
    line-height: 1.2;
    margin-bottom: 6px;
  }
  .calc-title {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-500);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--blue-pale);
  }

  .slider-group { margin-bottom: 20px; }
  .slider-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
  .slider-label { font-size: 0.9rem; color: var(--gray-500); font-weight: 600; }
  .slider-value { font-size: 1.5rem; font-weight: 800; color: var(--blue); }
  input[type="range"] {
    -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
    border-radius: 3px; background: var(--gray-100); outline: none; cursor: pointer;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--blue); border: 4px solid var(--white);
    box-shadow: 0 2px 8px rgba(4,81,159,0.35); cursor: pointer; transition: transform 0.1s;
  }
  input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
  input[type="range"]::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--blue); border: 4px solid var(--white);
    box-shadow: 0 2px 8px rgba(4,81,159,0.35); cursor: pointer;
  }
  .range-ends {
    display: flex; justify-content: space-between; margin-top: 6px;
    font-size: 0.7375rem; color: var(--gray-500); font-weight: 600;
  }

  .term-group { margin-bottom: 20px; }
  .term-label { font-size: 0.9rem; color: var(--gray-500); font-weight: 600; margin-bottom: 10px; display: block; }
  .term-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .term-btn {
    font-family: 'Open Sans', sans-serif; font-size: 0.875rem; font-weight: 700;
    padding: 9px 0; border-radius: 8px; border: 1.5px solid var(--gray-100);
    background: var(--white); color: var(--gray-500); cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
  }
  .term-btn:hover { border-color: var(--blue); color: var(--blue); }
  .term-btn.active { background: var(--blue); border-color: var(--blue); color: var(--white); }

  .result-rows { margin-top: 20px; margin-bottom: 16px; }
  .result-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px solid var(--gray-100);
  }
  .result-row:last-child { border-bottom: none; }
  .result-row-label { font-size: 0.8125rem; color: var(--gray-500); font-weight: 600; }
  .result-row-val { font-size: 1rem; font-weight: 800; color: var(--gray-900); white-space: nowrap; margin-left: 8px; }
  .result-row-val.savings { color: var(--blue); }
  @media (max-width: 420px) {
    .result-row { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 0; }
    .result-row-val { margin-left: 0; font-size: 1.0625rem; }
  }

  .result-month1 {
    background: linear-gradient(135deg, #02306b 0%, #04519f 60%, #03407e 100%);
    border-radius: 12px; padding: 18px 20px; margin-top: 16px; text-align: center;
  }
  .result-month1-label {
    font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.1em; color: rgba(255,255,255,0.65); margin-bottom: 4px;
  }
  .result-month1-amount { font-size: 2.8rem; font-weight: 700; color: #ffffff; line-height: 1; }
  .result-month1-sub { font-size: 0.8rem; color: rgba(255,255,255,0.60); margin-top: 6px; }

  .calc-cta-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
  .calc-cta-col { display: flex; flex-direction: column; gap: 5px; }
  .calc-cta-label {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--gray-500); text-align: center;
  }
  .calc-cta-btn {
    display: block; width: 100%; font-family: 'Open Sans', sans-serif;
    font-size: 0.9375rem; font-weight: 800; padding: 13px; border-radius: 10px;
    text-align: center; text-decoration: none; transition: background 0.15s, transform 0.1s;
  }
  .calc-cta-btn.join { background: var(--white); color: var(--blue); border: 2px solid var(--blue); }
  .calc-cta-btn.join:hover { background: var(--blue-pale); transform: scale(1.02); }
  .calc-cta-btn.apply { background: var(--blue); color: var(--white); border: 2px solid var(--blue); }
  .calc-cta-btn.apply:hover { background: var(--blue-dark); transform: scale(1.02); }

  .calc-disclaimer {
    font-size: 0.7rem; color: var(--gray-500); margin-top: 12px;
    line-height: 1.5; text-align: center;
  }
