.l3p-page {
  --orange: #f74a00;
  --gray: #666666;
  --light: #f3f3f3;
  --line: #d1d1d1;
  --black: #000000;
  --white: #ffffff;
  --radius: 12px;
  --content: 1872px;
  color: var(--black);
  font-family: 'Inter', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
.l3p-page, .l3p-page *, .l3p-page *::before, .l3p-page *::after { box-sizing: border-box; }
.l3p-page img { display: block; max-width: 100%; }
.l3p-page ul { margin: 0; padding: 0; list-style: none; }
.l3p-page p, .l3p-page h1, .l3p-page h2, .l3p-page h3 { margin: 0; }
.l3p-page button { font: inherit; }
.l3p-page [hidden] { display: none !important; }
.l3p-page :focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.l3p-page .section-shell {
width: calc(100% - 48px); max-width: var(--content); margin-inline: auto;
}

.l3p-page .eyebrow {
color: rgba(0, 0, 0, .6); font-size: 24px; font-weight: 500; line-height: 1.21; text-transform: uppercase;
}

.l3p-page .button {
min-height: 66px;
  padding: 18px 28px;
  color: var(--white);
  background: var(--black);
  border-radius: var(--radius);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  transition: background-color 300ms ease;
}

.l3p-page .button:not(:disabled):hover {
background: var(--gray);
}

.l3p-page .button:disabled {
opacity: 1;
}

.l3p-page .button-intro,
.l3p-page .button-wide {
width: 100%;
}

.l3p-page .cta-wrap {
display: flex; flex-direction: column; align-items: center;
}

.l3p-page .cta-note {
color: var(--gray); font-size: 14px; line-height: 1.4;
}

.l3p-page .cta-note {
margin-top: 8px; text-align: center;
}

.l3p-page .mobile-copy {
display: none;
}

.l3p-page .hero {
position: relative; height: 512px;
}

.l3p-page .hero-wordmark {
display: none;
}

.l3p-page .hero-image {
position: absolute; inset: 0; border-radius: var(--radius);
}

.l3p-page .hero-image img {
position: absolute;
  top: calc((100vw - 48px) * -.11858);
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1873 / 1013;
  object-fit: cover;
  border-radius: 0 0 var(--radius) var(--radius);
}

.l3p-page .intro {
margin-top: 290px; display: flex; flex-direction: column; align-items: center; gap: 28px;
}

.l3p-page .intro h1 {
max-width: 1110px; font-size: 40px; font-weight: 500; line-height: 1.15; text-align: center; letter-spacing: -.025em;
}

.l3p-page .intro h1 span {
color: var(--orange);
}

.l3p-page .intro .cta-wrap {
position: relative; width: 364px;
}

.l3p-page .intro .cta-note {
position: absolute; top: calc(100% + 4px); white-space: nowrap;
}

.l3p-page .proposals {
margin-top: 210px;
}

.l3p-page .proposals h2 {
margin-top: 50px; color: var(--orange); font-size: 64px; font-weight: 500; line-height: 1.1; letter-spacing: -.035em;
}

.l3p-page .proposal-grid {
margin-top: 34px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}

.l3p-page .proposal-card {
position: relative;
  height: 395px;
  min-width: 0;
  overflow: hidden;
  color: var(--orange);
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .18);
}

.l3p-page .proposal-card h3 {
position: absolute; z-index: 2; top: 25px; left: 28px; font-size: 36px; font-weight: 500; line-height: 1.15;
}

.l3p-page .proposal-card > img {
position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); object-fit: contain;
}

.l3p-page .proposal-card p {
position: absolute; z-index: 2; left: 28px; bottom: 23px; max-width: 47%; font-size: 14px; line-height: 1.35;
}

.l3p-page .proposal-accent {
color: var(--white); background: var(--orange);
}

.l3p-page .content-pending {
font-style: italic;
}

.l3p-page .audience-label {
margin-top: 88px; margin-bottom: 24px;
}

.l3p-page .audience {
padding: 40px 0 24px; color: var(--white); background: var(--orange); border-radius: var(--radius) var(--radius) 0 0;
}

.l3p-page .audience h2 {
max-width: 1770px; font-size: 64px; font-weight: 500; line-height: 1.12; letter-spacing: -.035em;
}

.l3p-page .benefit-grid {
margin-top: 42px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}

.l3p-page .benefit-card {
position: relative;
  height: 560px;
  min-width: 0;
  overflow: hidden;
  color: var(--orange);
  background: var(--white);
  border-radius: var(--radius);
}

.l3p-page .benefit-card h3 {
position: absolute; z-index: 2; top: 23px; left: 24px; max-width: 75%; font-size: 40px; font-weight: 500; line-height: 1.08; letter-spacing: -.025em;
}

.l3p-page .benefit-card > img {
position: absolute; right: 36px; bottom: 36px; object-fit: contain;
}

.l3p-page .benefit-card > p {
position: absolute; z-index: 2; left: 24px; bottom: 24px; max-width: 56%; color: var(--gray); font-size: 28px; line-height: 1.25; letter-spacing: -.02em;
}

.l3p-page .benefit-manager > p {
bottom: 116px; max-width: 55%;
}

.l3p-page .manager-image {
right: 36px; bottom: 48px;
}

.l3p-page .avatar-list {
position: absolute; z-index: 3; left: 24px; bottom: 24px; display: flex; padding-left: 0;
}

.l3p-page .avatar-list li {
flex: 0 0 52px;
}

.l3p-page .avatar-list img {
width: 66px; height: 66px; object-fit: cover; border: 2px solid var(--white); border-radius: 50%; background: var(--light);
}

.l3p-page .benefit-convenience > img {
right: 40px; bottom: 36px;
}

.l3p-page .gear-group {
position: absolute; right: 35px; bottom: 38px; width: 350px; height: 280px;
}

.l3p-page .gear {
position: absolute; object-fit: contain;
}

.l3p-page .gear-large {
right: 0; top: 0;
}

.l3p-page .gear-small {
left: 0; bottom: 0;
}

.l3p-page .cta-final {
position: relative; margin-top: 12px;
}

.l3p-page .cta-final .cta-note {
position: absolute; top: calc(100% + 4px); color: var(--white); white-space: nowrap;
}

@media (min-width: 1920px) {
.l3p-page .hero-image img {
top: -222px;
}
}

@media (max-width: 1199px) {
.l3p-page .intro {
margin-top: 240px;
}

.l3p-page .intro h1 {
max-width: 950px; font-size: 34px;
}

.l3p-page .proposals {
margin-top: 180px;
}

.l3p-page .proposals h2,
.l3p-page .audience h2 {
font-size: 50px;
}

.l3p-page .proposal-card {
height: 350px;
}

.l3p-page .proposal-card h3 {
left: 20px; font-size: 26px;
}

.l3p-page .proposal-card > img {
transform: translateX(-50%) scale(.76); transform-origin: center bottom;
}

.l3p-page .proposal-card p {
left: 20px; bottom: 18px; max-width: 50%; font-size: 12px;
}

.l3p-page .benefit-card {
height: 520px;
}

.l3p-page .benefit-card h3 {
font-size: 32px;
}

.l3p-page .benefit-card > p {
max-width: 62%; font-size: 22px;
}

.l3p-page .benefit-card > img,
.l3p-page .manager-image {
right: 18px; transform: scale(.8); transform-origin: right bottom;
}

.l3p-page .benefit-manager > p {
max-width: 60%;
}

.l3p-page .gear-group {
right: 18px; transform: scale(.8); transform-origin: right bottom;
}
}

@media (min-width: 768px) and (max-width: 900px) {
.l3p-page .intro {
margin-top: 190px;
}

.l3p-page .proposal-card > img {
transform: translateX(-50%) scale(.58);
}

.l3p-page .proposal-card p {
max-width: 65%;
}

.l3p-page .benefit-card h3 {
max-width: 90%; font-size: 27px;
}

.l3p-page .benefit-card > img,
.l3p-page .manager-image {
transform: scale(.62);
}

.l3p-page .benefit-card > p {
max-width: 68%; font-size: 18px;
}

.l3p-page .benefit-manager > p {
max-width: 65%;
}

.l3p-page .gear-group {
transform: scale(.62);
}

.l3p-page .avatar-list li {
flex-basis: 40px;
}

.l3p-page .avatar-list img {
width: 52px; height: 52px;
}
}

@media (max-width: 767px) {
.l3p-page .section-shell {
width: calc(100% - 24px);
}

.l3p-page .eyebrow {
font-size: 16px;
}

.l3p-page .hero {
height: auto;
}

.l3p-page .hero-wordmark {
display: block; margin: 12px 0 4px; color: var(--orange); font-size: clamp(48px, 14vw, 62px); font-weight: 800; line-height: 1; letter-spacing: -.07em;
}

.l3p-page .hero-image {
position: relative; height: auto; aspect-ratio: 378 / 204; overflow: hidden;
}

.l3p-page .hero-image img {
position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: var(--radius);
}

.l3p-page .intro {
margin-top: 0; padding: 42px 0 54px; gap: 30px;
}

.l3p-page .intro h1 {
max-width: 350px; font-size: 24px; line-height: 1.18;
}

.l3p-page .button {
font-size: 16px;
}

.l3p-page .intro .cta-wrap {
position: static; width: 100%;
}

.l3p-page .intro .cta-note {
position: static; white-space: normal;
}

.l3p-page .proposals {
margin-top: 0;
}

.l3p-page .proposals h2 {
margin-top: 0; font-size: 36px;
}

.l3p-page .proposal-grid {
margin-top: 24px; grid-template-columns: 1fr; gap: 24px;
}

.l3p-page .proposal-card {
height: 539px; padding: 24px; display: flex; flex-direction: column; align-items: flex-start;
}

.l3p-page .proposal-card > img {
position: static; order: 1; align-self: center; width: auto; height: 295px; margin: 0 auto 18px; transform: none; object-fit: contain;
}

.l3p-page .proposal-card h3 {
position: static; order: 2; font-size: 32px;
}

.l3p-page .proposal-card p {
position: static; order: 3; max-width: none; margin-top: 18px; font-size: 15px;
}

.l3p-page .audience-label {
margin-top: 54px; margin-bottom: 18px;
}

.l3p-page .audience {
padding: 30px 0 12px;
}

.l3p-page .audience h2 {
font-size: 40px; line-height: 1.05;
}

.l3p-page .benefit-grid {
margin-top: 30px; grid-template-columns: 1fr; gap: 24px;
}

.l3p-page .benefit-card {
height: 539px;
}

.l3p-page .benefit-card h3 {
top: 22px; max-width: 90%; font-size: 32px;
}

.l3p-page .desktop-copy {
display: none;
}

.l3p-page .mobile-copy {
display: inline;
}

.l3p-page .benefit-card > img,
.l3p-page .manager-image {
right: 12px; bottom: 34px; transform: none;
}

.l3p-page .benefit-card > p {
left: 20px; bottom: 24px; max-width: 66%; font-size: 18px; line-height: 1.3;
}

.l3p-page .benefit-manager > p {
bottom: 116px; max-width: 62%; font-size: 16px;
}

.l3p-page .benefit-manager {
order: 1;
}

.l3p-page .benefit-monitoring {
order: 2;
}

.l3p-page .benefit-parameters {
order: 3;
}

.l3p-page .benefit-convenience {
order: 4;
}

.l3p-page .manager-image {
width: 190px; height: auto; bottom: 45px;
}

.l3p-page .benefit-monitoring > img {
width: 250px; height: auto;
}

.l3p-page .benefit-convenience > img {
width: 230px; height: auto; right: 12px;
}

.l3p-page .avatar-list {
left: 20px;
}

.l3p-page .avatar-list li {
flex-basis: 40px;
}

.l3p-page .avatar-list img {
width: 52px; height: 52px;
}

.l3p-page .gear-group {
right: 8px; bottom: 60px; transform: scale(.82); transform-origin: right bottom;
}

.l3p-page .cta-final .cta-note {
position: static; white-space: normal;
}
}

@media (max-width: 390px) {
.l3p-page .benefit-card h3 {
font-size: 29px;
}

.l3p-page .benefit-card > p {
max-width: 70%; font-size: 16px;
}

.l3p-page .benefit-manager > p {
max-width: 62%; font-size: 15px;
}

.l3p-page .manager-image {
width: 165px;
}

.l3p-page .benefit-monitoring > img {
width: 220px;
}

.l3p-page .benefit-convenience > img {
width: 200px;
}

.l3p-page .gear-group {
transform: scale(.7);
}
}

@media (min-width: 768px) {
.l3p-page .proposal-card > img {
left: auto; right: 24px; transform: none; transform-origin: right bottom;
}

.l3p-page .proposal-card p {
max-width: 46%;
}
}

@media (min-width: 768px) and (max-width: 1200px) {
.l3p-page .proposal-card > img {
right: 12px; transform: scale(.68);
}

.l3p-page .proposal-card p {
max-width: 44%;
}
}

@media (min-width: 768px) and (max-width: 900px) {
.l3p-page .proposal-card > img {
right: 4px; transform: scale(.4);
}

.l3p-page .proposal-card p {
max-width: 45%; font-size: 11px;
}
}