/* Consolidated enterprise readiness section for the public landing page. */
.pp-landing .ler-section { background: #f5f8f8; }
.ler-section .pl-section-top { margin-bottom: 34px; }
.ler-section .pl-section-top h2 { max-width: 670px; }
.ler-section .pl-section-top > p { max-width: 390px; }

.ler-map { overflow: hidden; border: 1px solid #153d4a; border-radius: 19px; color: #ebfaf9; background: radial-gradient(ellipse at 50% 60%, rgba(41, 132, 133, .25), transparent 45%), radial-gradient(circle at 0% 0%, rgba(47, 145, 155, .14), transparent 38%), #092635; box-shadow: 0 23px 54px rgba(9, 46, 59, .13); }
.ler-map-head, .ler-map-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 53px; padding: 0 27px; }
.ler-map-head { border-bottom: 1px solid rgba(144, 214, 213, .12); }
.ler-map-head > div, .ler-map-foot > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.ler-map-head strong { font-size: 12px; font-weight: 750; }
.ler-map-head > span, .ler-map-foot { color: #85aeb6; font-size: 10px; }
.ler-map-signal, .ler-map-foot i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #54d6c8; box-shadow: 0 0 0 5px rgba(84, 214, 200, .11), 0 0 17px rgba(84, 214, 200, .5); }
.ler-map-foot { min-height: 48px; border-top: 1px solid rgba(144, 214, 213, .12); }
.ler-map-foot i { width: 5px; height: 5px; box-shadow: 0 0 0 4px rgba(84, 214, 200, .1); }
.ler-map-foot > span:last-child { color: #63bcb9; }

.ler-network { position: relative; height: 340px; isolation: isolate; background-image: linear-gradient(rgba(114, 198, 198, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(114, 198, 198, .045) 1px, transparent 1px); background-size: 36px 36px; }
.ler-network::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 53%, rgba(50, 173, 169, .18), transparent 31%); }
.ler-connections { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ler-connections path { fill: none; stroke: #51bdb7; stroke-width: 1; stroke-opacity: .42; stroke-dasharray: 6 9; animation: ler-path 28s linear infinite; }
.ler-connections circle { fill: none; stroke: #5ac8c2; stroke-width: 1; stroke-opacity: .12; }
.ler-connections circle:last-child { stroke-dasharray: 4 8; }
.ler-center { position: absolute; top: 53%; right: 50%; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 173px; height: 133px; transform: translate(50%, -50%); border: 1px solid rgba(113, 230, 217, .67); border-radius: 17px; background: linear-gradient(150deg, #154a56, #0c3443 68%); box-shadow: 0 0 0 9px rgba(72, 196, 190, .08), 0 18px 45px rgba(0, 16, 27, .31), inset 0 1px rgba(255, 255, 255, .1); }
.ler-center .pl-brand-logo { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 9px; }
.ler-center .pl-brand-logo img { top: -7px; width: 67px; }
.ler-center strong { margin-top: 2px; color: #f4fffd; font-size: 13px; letter-spacing: .035em; }
.ler-center small { color: #94c6c4; font-size: 9px; }
.ler-node { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; min-width: 139px; height: 43px; padding: 0 13px; border: 1px solid rgba(109, 191, 193, .3); border-radius: 8px; color: #e3f6f5; background: rgba(17, 61, 75, .94); box-shadow: 0 9px 27px rgba(0, 16, 27, .22), inset 0 1px rgba(255, 255, 255, .045); white-space: nowrap; font-size: 11px; font-weight: 680; }
.ler-node i { color: #62cec4; font-size: 10px; font-weight: 750; font-style: normal; }
.ler-node-1 { top: 7%; right: 8%; }.ler-node-2 { top: 1%; right: calc(50% - 69px); }.ler-node-3 { top: 7%; left: 8%; }
.ler-node-4 { top: 53%; right: 2%; }.ler-node-5 { top: 53%; left: 2%; }.ler-node-6 { right: 27%; bottom: 3%; }.ler-node-7 { left: 27%; bottom: 3%; }

.ler-readiness { margin-top: 22px; overflow: hidden; border: 1px solid #dce9e9; border-radius: 17px; background: #fff; box-shadow: 0 17px 43px rgba(29, 78, 86, .055); }
.ler-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 9px; border-bottom: 1px solid #e2ebeb; background: #f9fcfb; }
.ler-tabs button { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 49px; padding: 8px; border: 1px solid transparent; border-radius: 8px; color: #5b777e; background: transparent; font-size: 11px; font-weight: 760; transition: background .2s, border-color .2s, color .2s; }
.ler-tabs button:hover { color: #116d75; background: #eff8f6; }
.ler-tabs button.is-active { border-color: #c9e7e2; color: #0d7174; background: #e9f7f4; box-shadow: 0 4px 11px rgba(48, 134, 132, .07); }
.ler-tabs button span { color: #72b8b4; font-size: 10px; font-weight: 750; }
.ler-tabs button.is-active span { color: #15958c; }
.ler-panel { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(30px, 5vw, 83px); align-items: center; min-height: 386px; padding: 31px 39px 33px 47px; }
.ler-panel-copy { align-self: center; }
.ler-panel-copy h3 { margin-top: 14px !important; color: #123c49; font-size: clamp(22px, 2.3vw, 32px); font-weight: 800; line-height: 1.6; }
.ler-panel-copy p { max-width: 490px; margin-top: 10px !important; color: #637d83; font-size: 12px; line-height: 2.15; }
.ler-panel-copy ul { display: grid; gap: 12px; margin: 25px 0 0; padding: 0; list-style: none; }
.ler-panel-copy li { display: flex; align-items: center; gap: 10px; color: #315d68; font-size: 11px; font-weight: 650; }
.ler-panel-copy li span { display: grid; place-items: center; width: 19px; height: 19px; flex: 0 0 19px; border-radius: 50%; color: #0a8d85; background: #e4f5f0; font-size: 10px; }
.ler-preview { min-width: 0; overflow: hidden; border: 1px solid #d7e8e8; border-radius: 13px; background: linear-gradient(150deg, #f7fbfa, #eef7f5); box-shadow: 0 16px 39px rgba(34, 94, 101, .07); }
.ler-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 43px; padding: 0 20px; border-bottom: 1px solid #dceae9; color: #66878d; background: rgba(255, 255, 255, .64); font-size: 10px; }
.ler-preview-head span:first-child { display: flex; align-items: center; gap: 8px; }
.ler-preview-head i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #45c0b1; box-shadow: 0 0 0 4px rgba(69, 192, 177, .13); }
.ler-preview-head span:last-child { color: #278f89; font-weight: 750; }
.ler-role-picker { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 19px 0; }
.ler-role-picker button { min-height: 29px; padding: 4px 10px; border: 1px solid #d5e5e4; border-radius: 6px; color: #5a787e; background: #fff; font-size: 9px; font-weight: 720; transition: color .2s, background .2s, border-color .2s; }
.ler-role-picker button:hover { border-color: #9ed5cf; color: #0b807b; }
.ler-role-picker button.is-active { border-color: #8fd0c7; color: #087e78; background: #e8f8f3; }
.ler-role-view, .ler-generic-view { min-height: 215px; padding: 17px 21px 22px; }
.ler-generic-view { padding-top: 31px; }
.ler-preview-label { color: #4eb3ab; font-size: 10px; font-weight: 760; }
.ler-role-view h4, .ler-generic-view h4 { margin-top: 5px !important; color: #174653; font-size: 17px; font-weight: 800; }
.ler-role-view p { margin-top: 3px !important; color: #759097; font-size: 10px; line-height: 1.7; }
.ler-preview-rows { display: grid; gap: 5px; margin-top: 12px; }
.ler-preview-rows > div { display: flex; align-items: center; gap: 9px; min-height: 35px; padding: 5px 10px; border: 1px solid #dceae8; border-radius: 5px; color: #315762; background: rgba(255, 255, 255, .85); }
.ler-preview-rows strong { flex: 1; font-size: 10px; font-weight: 670; }
.ler-row-icon { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 5px; color: #178e87; background: #e5f6f1; font-size: 12px; }
.ler-row-end { color: #a8c6c4; font-size: 12px; }
.ler-preview-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; padding: 0 19px; border-top: 1px solid #dceae9; color: #83a0a5; background: rgba(255, 255, 255, .52); font-size: 9px; }
.ler-preview-foot span:last-child { color: #64aaa8; font-size: 8px; letter-spacing: .06em; }

@keyframes ler-path { to { stroke-dashoffset: -300; } }

@media (max-width: 1100px) {
    .ler-node-1 { right: 5%; }.ler-node-3 { left: 5%; }
    .ler-node-4 { right: 1%; }.ler-node-5 { left: 1%; }
    .ler-panel { gap: 28px; padding: 28px; }
}
@media (max-width: 850px) {
    .ler-map-head > span { display: none; }
    .ler-node { min-width: 115px; height: 40px; padding: 0 9px; font-size: 10px; }
    .ler-node-2 { right: calc(50% - 57px); }
    .ler-center { width: 153px; height: 121px; }
    .ler-panel { grid-template-columns: 1fr; gap: 25px; }
    .ler-panel-copy { padding: 8px 5px 0; }
    .ler-preview { width: 100%; }
}
@media (max-width: 650px) {
    .ler-section .pl-section-top { margin-bottom: 27px; }
    .ler-map { border-radius: 13px; }
    .ler-map-head, .ler-map-foot { padding-inline: 16px; }
    .ler-map-foot > span:last-child { display: none; }
    .ler-network { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; height: auto; padding: 22px 15px 19px; background-size: 26px 26px; }
    .ler-connections { display: none; }
    .ler-center { position: relative; top: auto; right: auto; grid-column: 1 / -1; grid-row: 1; justify-self: center; width: min(100%, 215px); height: 108px; margin-bottom: 12px; transform: none; }
    .ler-node { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 100%; min-width: 0; height: 39px; padding: 0 8px; border-color: rgba(109, 191, 193, .25); font-size: 9px; }
    .ler-node-7 { grid-column: 1 / -1; width: calc(50% - 5px); justify-self: center; }
    .ler-readiness { margin-top: 17px; border-radius: 12px; }
    .ler-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 8px; scrollbar-width: thin; }
    .ler-tabs button { flex: 0 0 auto; min-height: 41px; padding: 6px 11px; white-space: nowrap; font-size: 10px; }
    .ler-panel { min-height: 0; padding: 23px 17px 18px; }
    .ler-panel-copy h3 { font-size: 23px; }
    .ler-panel-copy p { font-size: 11px; }
    .ler-preview-head, .ler-preview-foot { padding-inline: 11px; }
    .ler-role-picker { padding-inline: 11px; }
    .ler-role-view, .ler-generic-view { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .ler-connections path { animation: none; }
    .ler-tabs button, .ler-role-picker button { transition: none; }
}
